|
|
| Line 1: |
Line 1: |
| /* CSS placed here will be applied to all skins */ | | /* CSS placed here will be applied to all skins */ |
| .skin-citizen-dark {
| |
| --color-primary__l: 60%;
| |
| --color-surface-0: hsl(210,27%,10%);
| |
| --color-surface-1: hsl(212,15%,17%);
| |
| --color-surface-2: hsl(208,14%,18%);
| |
| --color-surface-3: hsl(210,11%,21%);
| |
| --color-surface-4: hsl(210,10%,24%);
| |
| --background-color-primary--hover: hsl(var(--color-primary__h),var(--color-primary__s),15%);
| |
| --background-color-primary--active: hsl(var(--color-primary__h),var(--color-primary__s),20%);
| |
| --color-surface-2--hover: hsl(208,14%,22%);
| |
| --color-surface-2--active: hsl(208,14%,14%);
| |
| --surface-shadow: var(--color-primary__h) 50% 3%;
| |
| --shadow-strength: 0.8;
| |
| }
| |
|
| |
| .skin-citizen-dark {
| |
| --background-color-overlay: rgba(19,26,33,0.95);
| |
| --background-color-overlay--lighter: rgba(19,26,33,0.6);
| |
| --background-color-framed: #1f262c;
| |
| --background-color-framed--hover: #262c32;
| |
| --background-color-framed--active: #131a21;
| |
| --background-color-input: rgba(0,0,0,0.5);
| |
| --background-color-icon: rgba(255,255,255,0.6);
| |
| --background-color-icon--hover: rgba(255,255,255,0.8);
| |
| --background-color-icon--active: rgba(255,255,255,0.4);
| |
| --background-color-quiet--hover: rgba(255,255,255,0.07000000000000001);
| |
| --background-color-quiet--active: rgba(255,255,255,0.03);
| |
| --background-color-destructive: #b32424;
| |
| --background-color-warning: #ac6600;
| |
| --background-color-success: #14866d;
| |
| --color-base: rgba(255,255,255,0.6);
| |
| --color-base--emphasized: rgba(255,255,255,0.87);
| |
| --color-base--subtle: rgba(255,255,255,0.38);
| |
| --color-link-new: #e35b5b;
| |
| --color-link-new--hover: #fee7e6;
| |
| --color-link-new--active: #b32424;
| |
| --opacity-icon-base--active: 0.4;
| |
| --border-color-base: rgba(255,255,255,0.05);
| |
| --border-color-base--lighter: rgba(255,255,255,0.02);
| |
| --border-color-base--darker: rgba(255,255,255,0.08);
| |
| --border-color-input: rgba(255,255,255,0.05);
| |
| --border-color-input--hover: rgba(255,255,255,0.5);
| |
| }
| |
