| @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); |
| } |
| } |
| } |
| } |