MediaWiki:Citizen.css: Difference between revisions

Revision as of 21:02, 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,
.mw-logo-wordmark {
	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%);
    --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: #fff;
    --color-base--emphasized: rgba(255,255,255,0.87);
    --color-base--subtle: rgba(255,255,255,0.38);
    --color-primary: #ffff00; 
    --color-primary--hover: #ffffe0;
    --color-primary--active: #ffd700;
    --color-link-new: #d44;
    --color-link-new--hover: #f55;
    --color-link-new--active: #900;
    --opacity-icon-base--active: 0.4;
    --border-color-base: #ffd700;
    --border-color-base--lighter: #ffffe0;
    --border-color-base--darker: #ffd700;
    --border-color-input: rgba(255,255,255,0.05);
    --border-color-input--hover: rgba(255,255,255,0.5);
}

.mw-footer {
	background: var(--background-color-dp-00);
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
    border-color: var(--green-dark);
    background-color: var(--green-dark);
    color: var(--link);
}

.editOptions {
    background-color: var(--background3);
    color: #c8ccd1;
    border: 1px solid #c8ccd1;
    border-top: 0;
    padding: 1em 1em 1.5em 1em;
    margin-bottom: 2em;
}