| @import '../colors'; |
| @import '../style.scss'; |
| @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Roboto+Mono:400,500|Material+Icons'); |
| |
| skcq-scaffold-sk { |
| * { |
| font-family: Roboto, Helvetica, Arial, 'Bitstream Vera Sans', sans-serif; |
| } |
| |
| header { |
| h1 { |
| font-weight: 400; |
| font-size: 24px; |
| } |
| |
| .spinner-spacer { |
| min-width: 40px; |
| } |
| |
| spinner-sk { |
| width: 24px; |
| height: 24px; |
| margin: 0; |
| border: 8px solid var(--on-primary); |
| border-left: 8px solid var(--primary-variant); |
| } |
| } |
| |
| main { |
| background-color: var(--background); |
| } |
| |
| nav { |
| display: flex; |
| flex-direction: column; |
| |
| a { |
| padding: 16px 0px; |
| color: var(--on-surface); /* Override User Agent SS*/ |
| text-decoration: none; |
| } |
| |
| span { |
| padding: 0 8px; |
| vertical-align: middle; |
| white-space: nowrap; |
| } |
| } |
| |
| /* Overrides to elements-sk elements since they set color internally. */ |
| app-sk, |
| app-sk > aside { |
| background-color: var(--background); |
| color: var(--on-background); |
| |
| aside { |
| border-right: 1px solid var(--on-background); |
| } |
| --content-horiz-padding: 32px; |
| } |
| |
| app-sk > main { |
| padding: 32px 80px; |
| } |
| |
| svg.icon-sk-svg { |
| fill: var(--on-surface); |
| } |
| |
| error-toast-sk toast-sk { |
| background-color: var(--error); |
| color: var(--on-error); |
| } |
| } |
| |
| // Make sure the app doesn't leave empty space on the bottom. e.g. blank |
| // white in darkmode. |
| html, |
| body, |
| app-sk { |
| height: 100%; |
| } |