status/modules/styles.scss

@import 'elements-sk/themes/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);
  --success: rgb(102, 166, 30);
  --success-alpha: rgba(102, 166, 30, 0.3);
  --warning: rgb(255, 167, 38);
  --warning-alpha: rgb(255, 171, 64, 0.8);
  --failure: rgb(217, 95, 2);
  --failure-alpha: rgba(217, 95, 2, 0.8);
  --on-success: var(--on-surface);
  --on-failure: var(--on-surface);
  --on-warning: var(--on-surface);
  --on-unexpected: var(--on-surface);
  --unexpected: rgb(117, 112, 179);
  --unexpected-alpha: rgba(117, 112, 179, 1);
  --disabled: var(--grey-500);
  --disabled-alpha: rgba(117, 117, 117, 1);

  .darkmode {
    --grey-850: #303030;
    --primary: var(--light-green-700);
    --on-primary: var(--grey-200);
    --secondary: #9a7200;
    --on-secondary: var(--grey-200);
    --warning-alpha: rgb(255, 171, 64, 0.5);
    --failure-alpha: rgba(217, 95, 2, 0.5);
    --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);

    /* Redefine these, otherwise they take variable values from light mode.*/
    --on-success: var(--on-surface);
    --on-failure: var(--on-surface);
    --on-warning: var(--on-surface);
    --on-unexpected: var(--on-surface);

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