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: fit-content;
}

.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 {
  background-color: var(--surface);
  color: var(--on-surface);
  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(--grey-200);
}

.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 {
  --primary: var(--light-green-700);
  // TODO(westont): Move to named colors, unify theme.
  --secondary: #e6ab02;

  --success: rgb(102, 166, 30);
  --success-alpha: rgba(102, 166, 30, 0.3);
  --warning: var(--orange-400);
  --warning-alpha: var(--orange-a200);
  --failure: rgb(217, 95, 2);
  --failure-alpha: rgba(217, 95, 2, 0.3);
  --on-failure: var(--black);
  --on-warning: var(--black);
  --unexpected: rgb(117, 112, 179);
  --unexpected-alpha: rgba(117, 112, 179, 0.3);
  --disabled: var(--grey-500);
  --disabled-alpha: rgba(117, 117, 117, 0.3);

  .darkmode {
    --success-alpha: rgba(102, 166, 30, 0.9);
    --failure-alpha: rgba(217, 95, 2, 0.9);
    --on-failure: var(--white);
    --unexpected-alpha: rgba(117, 112, 179, 0.9);
    --disabled-alpha: rgba(117, 117, 117, 0.9);
  }
}