MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
Created page with "→CSS placed here will be applied to all skins: →--- THE PYRE BRANDING FOR CITIZEN ---: :root.skin-theme-clientpref-night { →THEME ACCENT: Pyre Orange/Red (#ff4d00): --color-progressive-oklch__l: 65%; --color-progressive-oklch__c: 0.23; --color-progressive-oklch__h: 30; →Fire Orange: →SURFACE COLORS: Ash and Charcoal: --color-surface-0: #0d0d0d; →Deepest black/ash background: --color-surface-1: #1a1a1a; /* Card/Contai..." |
No edit summary |
||
| Line 1: | Line 1: | ||
/* --- THE PYRE COLOR PALETTE --- */ | |||
/* --- THE PYRE | |||
/* LIGHT MODE: Keeping it clean but with your branding */ | |||
:root.skin-theme-clientpref-day { | |||
--color-surface-0: #ffffff; | |||
--color-surface-1: #f8f9fa; | |||
/* Deep Orange accent for Light Mode */ | |||
--color-progressive-oklch__l: 55%; | |||
--color-progressive-oklch__c: 0.2; | |||
--color-progressive-oklch__h: 35; | |||
} | |||
/* DARK MODE: Your Deep Black-Blue branding */ | |||
:root.skin-theme-clientpref-night { | :root.skin-theme-clientpref-night { | ||
/* | /* Your specific rgb(3, 7, 30) Background */ | ||
--color-progressive-oklch__l: 65%; | --color-surface-0: rgb(3, 7, 30); | ||
--color-progressive-oklch__c: 0. | --color-surface-1: #0a0e24; /* Slightly lighter shade for cards/boxes */ | ||
--color-progressive-oklch__h: | --color-surface-2: #141831; /* For inputs/search bars */ | ||
/* Fire Accent: Based on your rgb(232, 93, 4) */ | |||
--color-progressive-oklch__l: 65.55%; | |||
--color-progressive-oklch__c: 0.211; | |||
--color-progressive-oklch__h: 41.5; | |||
--color-emphasized: #ffffff; | --color-emphasized: #ffffff; | ||
--color-base: # | --color-base: #cbd5e0; | ||
} | } | ||
/* | /* APPLY YOUR GRADIENT: This applies your specific fire gradient to the top header bar */ | ||
.mw-header { | |||
background: linear-gradient(45deg, rgb(220, 47, 2) 0%, rgb(232, 93, 4) 50%, rgb(250, 163, 7) 100%) !important; | |||
} | } | ||
/* | /* Fix text color on the gradient header so it stays readable */ | ||
.mw-header .cdx-button, .mw-header .citizen-header-links a { | |||
color: white !important; | |||
} | } | ||
Revision as of 15:08, 26 February 2026
/* --- THE PYRE COLOR PALETTE --- */
/* LIGHT MODE: Keeping it clean but with your branding */
:root.skin-theme-clientpref-day {
--color-surface-0: #ffffff;
--color-surface-1: #f8f9fa;
/* Deep Orange accent for Light Mode */
--color-progressive-oklch__l: 55%;
--color-progressive-oklch__c: 0.2;
--color-progressive-oklch__h: 35;
}
/* DARK MODE: Your Deep Black-Blue branding */
:root.skin-theme-clientpref-night {
/* Your specific rgb(3, 7, 30) Background */
--color-surface-0: rgb(3, 7, 30);
--color-surface-1: #0a0e24; /* Slightly lighter shade for cards/boxes */
--color-surface-2: #141831; /* For inputs/search bars */
/* Fire Accent: Based on your rgb(232, 93, 4) */
--color-progressive-oklch__l: 65.55%;
--color-progressive-oklch__c: 0.211;
--color-progressive-oklch__h: 41.5;
--color-emphasized: #ffffff;
--color-base: #cbd5e0;
}
/* APPLY YOUR GRADIENT: This applies your specific fire gradient to the top header bar */
.mw-header {
background: linear-gradient(45deg, rgb(220, 47, 2) 0%, rgb(232, 93, 4) 50%, rgb(250, 163, 7) 100%) !important;
}
/* Fix text color on the gradient header so it stays readable */
.mw-header .cdx-button, .mw-header .citizen-header-links a {
color: white !important;
}