More actions
Created page with "→All CSS here will be loaded for users of the Citizen skin: @font-face { font-family: Caprica; font-style: normal; src: url('/w/skins/Daybreak/resources/fonts/caprica.ttf') format('truetype'), url('/w/skins/Daybreak/resources/fonts/caprica.otf') format('opentype'); } #mw-header-container #p-banner, #mw-header-container #personal h2, #content h1, #content h2, #content h3, #content h4, #content h5, #content h6, #content #firstHeading { font-family: Cap..." |
No edit summary |
||
Line 23: | Line 23: | ||
#content h2 { | #content h2 { | ||
font-variant: small-caps; | font-variant: small-caps; | ||
} | |||
:root.skin-citizen-dark { | |||
--text: #fff; | |||
--background: #471919; | |||
--background2: #000; | |||
--background3: #160807; | |||
--background-dark: #f4a460; | |||
--background-dark2: #d2691e; | |||
--text-inverse: #018; | |||
--grey: #ccc; | |||
--grey-bright: #eee; | |||
--grey-dark: #666; | |||
--red: #d44; | |||
--red-bright: #f55; | |||
--red-dark: #900; | |||
--orange: #ffa500; | |||
--orange-bright: #ff4500; | |||
--orange-dark: #ff8c00; | |||
--yellow: #ffff00; | |||
--yellow-bright: #ffffe0; | |||
--yellow-dark: #ffd700; | |||
--green: #3b7; | |||
--green-bright: #4c8; | |||
--green-dark: #396; | |||
--blue: #08d; | |||
--blue-bright: #2af; | |||
--blue-dark: #069; | |||
--link: #ffff00; | |||
--link-red: #d44; | |||
--font-size: 0.93em; | |||
--color-primary__l: 60%; | |||
--color-surface-0: hsl(0deg 48% 19%); | |||
--color-surface-1: hsl(0deg 48% 19%); | |||
--color-surface-2: hsl(0deg 48% 19%); | |||
--color-surface-3: hsl(0deg 48% 19%); | |||
--color-surface-4: hsl(0deg 48% 19%); | |||
--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(0deg 53% 30%)l | |||
--color-surface-2--active: hsl(0deg 66% 28%); | |||
--background-color-dp-00: #471919; | |||
--background-color-dp-01: #471919; | |||
--background-color-dp-02: #471919; | |||
--background-color-dp-03: #471919; | |||
--background-color-dp-04: #471919; | |||
--background-color-dp-06: #471919; | |||
--background-color-dp-08: #471919; | |||
--background-color-dp-12: #471919; | |||
--background-color-dp-16: #471919; | |||
--background-color-dp-24: #471919; | |||
--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: #ffff00; | |||
--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); | |||
} | } |
Revision as of 20:36, 27 March 2022
/* All CSS here will be loaded for users of the Citizen skin */ @font-face { font-family: Caprica; font-style: normal; src: url('/w/skins/Daybreak/resources/fonts/caprica.ttf') format('truetype'), url('/w/skins/Daybreak/resources/fonts/caprica.otf') format('opentype'); } #mw-header-container #p-banner, #mw-header-container #personal h2, #content h1, #content h2, #content h3, #content h4, #content h5, #content h6, #content #firstHeading { font-family: Caprica; } #content h1, #content h2 { font-variant: small-caps; } :root.skin-citizen-dark { --text: #fff; --background: #471919; --background2: #000; --background3: #160807; --background-dark: #f4a460; --background-dark2: #d2691e; --text-inverse: #018; --grey: #ccc; --grey-bright: #eee; --grey-dark: #666; --red: #d44; --red-bright: #f55; --red-dark: #900; --orange: #ffa500; --orange-bright: #ff4500; --orange-dark: #ff8c00; --yellow: #ffff00; --yellow-bright: #ffffe0; --yellow-dark: #ffd700; --green: #3b7; --green-bright: #4c8; --green-dark: #396; --blue: #08d; --blue-bright: #2af; --blue-dark: #069; --link: #ffff00; --link-red: #d44; --font-size: 0.93em; --color-primary__l: 60%; --color-surface-0: hsl(0deg 48% 19%); --color-surface-1: hsl(0deg 48% 19%); --color-surface-2: hsl(0deg 48% 19%); --color-surface-3: hsl(0deg 48% 19%); --color-surface-4: hsl(0deg 48% 19%); --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(0deg 53% 30%)l --color-surface-2--active: hsl(0deg 66% 28%); --background-color-dp-00: #471919; --background-color-dp-01: #471919; --background-color-dp-02: #471919; --background-color-dp-03: #471919; --background-color-dp-04: #471919; --background-color-dp-06: #471919; --background-color-dp-08: #471919; --background-color-dp-12: #471919; --background-color-dp-16: #471919; --background-color-dp-24: #471919; --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: #ffff00; --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); }