| @import '~elements-sk/themes/themes'; |
| |
| .body-sk.darkmode { |
| --primary: var(--light-blue); |
| --primary-variant: var(--light-blue-200); |
| --on-primary-variant: var(--black); |
| --dark-grayish-blue: #8899A6; |
| --dark-desaturated-blue: #192734; |
| |
| --active: var(--red-300); |
| --inactive: var(--dark-grayish-blue); |
| --silenced: var(--green-300); |
| --assigned: var(--orange-300); |
| --selected: var(--dark-desaturated-blue); |
| |
| --minimized: var(--dark-desaturated-blue); |
| --comments: var(--dark-desaturated-blue); |
| --icons: var(--green-300); |
| --disabled: var(--grey-700); |
| --dialog-background: var(--dark-desaturated-blue); |
| } |
| |
| .body-sk { |
| --primary: var(--blue-800); |
| --primary-variant: var(--light-blue-600); |
| --secondary: var(--green-500); |
| --very-dark-gray: #4F4F4F; |
| |
| --active: var(--red); |
| --inactive: var(--very-dark-gray); |
| --silenced: var(--green); |
| --assigned: var(--orange); |
| --assigned-person: var(--light-orange); |
| --selected: var(--dark-white); |
| |
| --minimized: var(--dark-white); |
| --comments: var(--dark-white); |
| --icons: var(--green); |
| --dialog-background: var(--surface); |
| |
| input, textarea { |
| border: solid 1px var(--on-surface); |
| color: var(--on-surface); |
| background: var(--surface); |
| } |
| |
| dialog { |
| border: solid 2px var(--on-surface); |
| color: var(--on-surface); |
| background: var(--dialog-background); |
| } |
| |
| a { |
| color: var(--primary); |
| } |
| } |
| |
| /* |
| The following styles are for scrollbars. There are some non-standard looking |
| styles because it is 2020 and there's still no standard way to style |
| scrollbars on a web page. |
| |
| https://caniuse.com/#feat=css-scrollbar |
| |
| There is currently an editor's draft for styling scrollbars: |
| https://drafts.csswg.org/css-scrollbars-1/, but it is only supported by |
| FireFox. So set that first. |
| */ |
| |
| * { |
| scrollbar-color: var(--surface-1dp) var(--background); |
| } |
| |
| /* Turn on a 13x13 scrollbar */ |
| ::-webkit-scrollbar { |
| width: 13px; |
| height: 13px; |
| } |
| |
| /* Turn off single button up on top and down on bottom */ |
| ::-webkit-scrollbar-button:start:decrement, |
| ::-webkit-scrollbar-button:end:increment, |
| ::-webkit-scrollbar-button:vertical:start:increment, |
| ::-webkit-scrollbar-button:vertical:end:decrement { |
| display: none; |
| } |
| |
| /* Track below and above */ |
| ::-webkit-scrollbar-track-piece { |
| background-color: var(--background); |
| border: solid 1px var(--surface-2dp); |
| } |
| |
| /* The thumb itself */ |
| ::-webkit-scrollbar-thumb { |
| border: solid 1px var(--on-surface); |
| background: var(--surface-1dp); |
| } |
| |
| /* Handle on hover */ |
| ::-webkit-scrollbar-thumb:hover { |
| background: var(--surface); |
| } |