status/modules/styles.scss

@import 'elements-sk/themes/themes';
@import '../../infra-sk/themes';

body,
html {
  background-color: var(--background);
  color: var(--on-background);
  fill: var(--on-background);
  min-width: fit-content;
  min-height: 100vh;
}

body {
  font-size: 12px;
}

.bg-success {
  background-color: var(--success-alpha);
}

.bg-warning {
  background-color: var(--warning-alpha);
  color: var(--black);
}

.bg-failure {
  background-color: var(--failure-alpha);
  color: var(--on-failure);
  fill: var(--on-failure);
}

.bg-mishap {
  background-color: var(--unexpected-alpha);
}

.bg-unknown {
  background-color: var(--unexpected-alpha);
}

.table {
  display: table;
  border-collapse: collapse;

  a {
    color: inherit;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }
}

.tr {
  display: table-row;
  border-bottom: 1px solid var(--surface);
}

.td,
.th {
  display: table-cell;
}

.td {
  vertical-align: middle;
  font-size: 1em;
  padding: 6px;
}

.th {
  font-size: 0.75em;
  padding: 8px;
}

.number {
  text-align: right;
}

.nowrap {
  white-space: nowrap;
}

:root {
  // TODO(westont): Move to named colors, unify theme.
  --primary: var(--light-green-700);
  --on-primary: var(--white);
  --secondary: #e6ab02;
  --on-secondary: var(--black);
  --surface: var(--grey-200);
  --surface-1dp: var(--grey-300);
  --surface-1dp: var(--grey-400);

  .darkmode {
    --grey-850: #303030;
    --primary: var(--light-green-700);
    --on-primary: var(--grey-200);
    --secondary: #9a7200;
    --on-secondary: var(--grey-200);
    --on-background: var(--grey-300);
    --on-surface: var(--grey-400);
    --on-primary: var(--grey-200);
    --background: var(--grey-900);
    --on-background: var(--grey-300);
    --surface: var(--grey-850);
    --on-surface: var(--grey-200);
    --error: var(--amber-900);

    input {
      background-color: var(--surface);
      color: var(--on-surface);
    }
    input-sk {
      .underline-background {
        background-color: var(--surface-2dp);
      }
      input {
        background-color: var(--surface);
      }
    }
  }
}