web/browser/components/device-set/list-item.css

/* Copyright 2015 The Vanadium Authors. All rights reserved. */
/* Use of this source code is governed by a BSD-style */
/* license that can be found in the LICENSE file. */

@import "../base/reset.css";
@import "../base/typography.css";
@import "../base/variables.css";

.device-set {
  inherits: .reset-box;
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  box-shadow: var(--drop-shadow);
  border-radius: 2px;
  max-width: 512px;
  overflow: hidden;
  position: relative;
  margin: var(--gutter) auto;
}

.device-set .header {
  padding: calc(var(--gutter));
}

.device-set .header .title {
  inherits: .type-title;
}

.device-set .header .subhead {
  inherits: .type-smallhead;
  color: var(--blue-grey-500);
}

.device-set .support {
  background-color: var(--blue-grey-25);
  padding: calc(var(--gutter));
  border-top: 1px solid var(--blue-grey-100);
}

.device-set .support p {
  margin: var(--gutter) 0;
}

.device-set .support .devices > .title {
  font-weight: bold;
}

.device-set .support ul,
.device-set .support li {
  inherits: .reset-box;
}

.device-set .support ul {
  margin-top: var(--gutter);
}

.device-set .support ul ul {
  margin-top: 0;
  padding-left: var(--gutter);
}

.device-set .actions {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--blue-grey-100);
  padding: calc(var(--gutter) * (1/3));
}

.device-set .actions a {
  inherits: .reset;
  inherits: .type-smallhead;
  border-radius: 2px;
  text-transform: uppercase;
  background-color: var(--white);
  padding: calc(var(--gutter) / 2) calc(var(--gutter) * (2/3));
  margin-left: calc(var(--gutter) * (1/3));
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1),
    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.device-set .actions a:hover {
  background-color: var(--blue-grey-50);
}

.device-set .actions a.read {
  color: var(--cyan-800);
}

.device-set .actions a.delete {
  color: var(--blue-grey-400);
}