MediaWiki:Citizen.css
MediaWiki interface page
More actions
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/*/════════════════════════════════════════════════════════════════════════════════
CITIZEN.CSS
The majority of the multi-page styling for the wiki can be found here, as well as
CSS variables. Styling for templates and modules will be located at
<name>/styles.css, MediaWiki:Gadget-Templates.css or MediaWiki:Gadget-Modules.css
════════════════════════════════════════════════════════════════════════════════/*/
/*╔══════════════════════════════════════════════════════════════════════════════╗
║ GLOBAL VARIABLES ║
╚══════════════════════════════════════════════════════════════════════════════╝*/
/*═══════│ CORE VARIABLES │═══════*/
:root {
/* typography */
--font-family-heading: 'Domine', 'Merriweather', Georgia, serif !important;
--font-family-base: 'Vend Sans', 'Roboto', Helvetica, Verdana, sans-serif;
--font-family-script: 'Sofia', 'Dancing Script', 'Brush Script MT', cursive;
--font-family-icon: 'Material Symbols Outlined';
--font-size-xx-small: 0.75rem;
--font-size-x-small: 0.8125rem;
--font-size-small: 0.875rem;
--font-size-medium: 1rem;
--font-size-large: 1.125rem;
--font-size-x-large: 1.25rem;
--font-size-xx-large: 1.5rem;
--font-size-xxx-large: 2rem;
--font-size-display: min(calc(2.5rem + 3.9vw), 4rem);
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--line-height-xxx-small: 1.25;
--line-height-xx-small: 1.375;
/* layout */
--border-radius--large: 15px;
--border-radius--medium: 10px;
--border-radius--small: 5px;
/* notice */
--type-important: rgba(200, 0, 0, 0.8);
--type-moderate: rgba(233, 124, 47, 0.8);
--type-minor: rgba(241, 197, 37, 0.8);
/* color */
--color-accent: oklch(var(--color-accent-oklch__l) var(--color-accent-oklch__c) var(--color-accent-oklch__h));
--color-accent-1-oklch_l: calc(var(--color-accent-oklch__l) - var(--delta-lightness-surface-base));
--color-accent-1: oklch(var(--color-accent-1-oklch_l) var(--color-accent-oklch__c) var(--color-accent-oklch__h));
--color-surface-0--semiclear: oklch(var(--color-surface-0-oklch__l) var(--color-surface-0-oklch__c) var(--color-progressive-oklch__h)/ 50%);
--color-surface-2--semiclear: oklch(var(--color-surface-2-oklch__l) var(--color-surface-2-oklch__c) var(--color-progressive-oklch__h)/ 50%);
--color-surface-4--semiclear: oklch(var(--color-surface-4-oklch__l) var(--color-surface-4-oklch__c) var(--color-progressive-oklch__h)/ 50%);
/* accordion */
--accordion--background-color: var(--color-surface-1);
--accordion--border-color: var(--border-color-base);
--accordion__header--background-color: var(--color-surface-2);
--accordion__header--background-color--hover: var(--color-surface-4);
--accordion__links--background-color: var(--theme-body-dynamic-color-1--rgb);
--accordion__links--background-color--hover: rgba(var(--theme-body-dynamic-color-1--rgb), .08);
--accordion__links--border-radius: 8px;
--accordion-icon-color--light: currentcolor;
--accordion-icon-color--dark: currentcolor;
}
/*╔══════════════════════════════════════════════════════════════════════════════╗
║ THEME VARIABLES ║
║ Character styling in Mediawiki:Gadget-Preferences.css ║
╚══════════════════════════════════════════════════════════════════════════════╝*/
/*═══════│ LIGHT THEME │═══════*/
:root.skin-theme-clientpref-day {
/* mix-in variables */
--color-progressive-oklch__l: 70%;
--color-progressive-oklch__c: 0.0542;
--color-progressive-oklch__h: 119.86;
--color-emphasized-oklch__l: 0.3;
--color-emphasized-oklch__c: 0.05;
--color-emphasized-oklch__h: 65.3;
--color-base-oklch__l: 46%;
--color-base-oklch__c: 0.085;
--color-base-oklch__h: 64;
--color-subtle-oklch__l: 65%;
--color-subtle-oklch__c: 0.085;
--color-subtle-oklch__h: 64;
--color-placeholder-oklch__l: 40%;
--color-placeholder-oklch__c: 0.05;
--color-placeholder-oklch__h: 65.5;
--color-disabled-oklch__l: 60%;
--color-disabled-oklch__c: 0.05;
--color-disabled-oklch__h: 65.5;
--color-accent-oklch__l: 49%;
--color-accent-oklch__c: 0.0802 ;
--color-accent-oklch__h: 74.93;
/*variable adjustments */
--filter-invert: none;
--delta-lightness-surface-base: -8%;
--color-filter: hue-rotate(25deg);
/* standard variables */
--color-link: oklch(0.4914 0.0802 74.93);
--color-link--hover: #fff;
--color-visited--hover: #fff;
--color-alert: oklch(0.83 0.03 14);
}
/*═══════│ DARK THEME │═══════*/
:root.skin-theme-clientpref-night {
--color-link: oklch(0.5962 0.0015 106.44);
--color-link--hover: #fff;
--color-visited--hover: #fff;
--color-accent: oklch(0.6942 0.0738 117.06);
--color-inverted-primary: #fff;
--delta-lightness-surface-base: 8%;
--color-progressive-oklch__l: 20%;
--color-progressive-oklch__c: 0.05;
--color-progressive-oklch__h: 106.44;
--color-emphasized-oklch__l: 95%;
--color-emphasized-oklch__c: 0.038;
--color-emphasized-oklch__h: 274.7;
--color-base-oklch__l: 91.7%;
--color-base-oklch__c: 0.038;
--color-base-oklch__h: 274.7;
--color-subtle-oklch__l: 80%;
--color-subtle-oklch__c: 0.038;
--color-subtle-oklch__h: 274.7;
--color-placeholder-oklch__l: 60%;
--color-placeholder-oklch__c: 0.03;
--color-placeholder-oklch__h: 274.7;
--color-disabled-oklch__l: 40%;
--color-disabled-oklch__c: 0.02;
--color-disabled-oklch__h: 274.7;
--color-progressive-hsl__h: 276;
--color-progressive-hsl__s: 2%;
--color-progressive-hsl__l: 12%;
--color-surface-0-hsl__s: 10%;
--color-surface-0-hsl__l: 12%;
--filter-invert: invert(1);
--filter-invert-primary: none;
--color-alert: oklch(0.27 0.08 26);
}
/*╔══════════════════════════════════════════════════════════════════════════════╗
║ GLOBAL STYLING ║
╚══════════════════════════════════════════════════════════════════════════════╝*/
/*═══════│ TYPOGRAPHY & COLORS │═══════*/
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-heading);
}
h2 {
margin-block-start: 0.3em;
border-bottom: 1px solid var(--color-surface-4--semiclear);
color: var(--color-link);
line-height: var(--font-size-x-large);
}
h3 {
margin-left: -1em;
text-decoration: underline;
}
h3 > .mw-editsection {
display: none;
}
h4 {
margin-left: 1.2em;
color: var(--color-emphasized);
font-weight: var(--font-weight-bold);
}
pre, code, .mw-code {
color: var(--color-emphasized);
background-color: var(--color-surface-0);
border: var(--border-width-base) solid var(--border-color-base);
}
/*╔══════════════════════════════════════════════════════════════════════════════╗
║ PREFERENCES & MENUS ║
╚══════════════════════════════════════════════════════════════════════════════╝*/
/*═══════│ PREFERENCES │═══════*/
/*═══════│ NAVIGATION │═══════*/
.skin-theme-clientpref-day .mw-logo-icon {filter: invert(1)}
/* Navigation Icons */
/* Character Icons */
/* Stats Icons */
/* Misc Icons */
/*╔══════════════════════════════════════════════════════════════════════════════╗
║ HEADER & FOOTER ║
╚══════════════════════════════════════════════════════════════════════════════╝*/
/*═══════│ HEADER │═══════*/
/*═══════│ FOOTER │═══════*/
.citizen-footer__sitetitle {
align-items: center;
flex-direction: row;
}
/*╔══════════════════════════════════════════════════════════════════════════════╗
║ TABLES ║
╚══════════════════════════════════════════════════════════════════════════════╝*/
/*═══════│ GENERAL │═══════*/
/*╔══════════════════════════════════════════════════════════════════════════════╗
║ MAIN CONTENT ║
╚══════════════════════════════════════════════════════════════════════════════╝*/
/*╔══════════════════════════════════════════════════════════════════════════════╗
║ MAIN PAGE ║
╚══════════════════════════════════════════════════════════════════════════════╝*/
/*═══════│ HEADER │═══════*/
.mainpage-header {
align-items: center;
display: flex;
flex-direction: column;
text-align: center;
pointer-events: auto;
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.5;
}
.mainpage-header h2 {
color: var(--color-accent);
border: 0;
font-size: var(--font-size-display);
font-family: var(--font-family-base);
line-height: 0.9;
letter-spacing: -0.05em;
}
.mainpage-header-text {
font-size: var(--font-size-small);
}
.mainpage-header-text > .mw-heading.mw-heading2,
.mainpage-header-text > p,
.mainpage-box > .mw-heading,
.wishing-well-rotation > .mw-heading.mw-heading4 {
margin-top: 0;
}
.mainpage-header-search {
align-items: center;
background-color: oklch(var(--color-progressive-oklch__l) var(--color-progressive-oklch__c) var(--color-progressive-oklch__h)/ 90%);
border-radius: var(--border-radius-pill);
color: var(--color-surface-1);
cursor: pointer;
display: flex;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
gap: 0.5rem;
line-height: 1;
margin: 10px auto;
padding: 1rem 2.5rem;
user-select: none;
justify-content: center;
max-width: 400px;
transition: all 0.5s ease;
}
.mainpage-header-search:before {
content: 'search';
font-family: var(--font-family-icon);
}
.mainpage-header-search:hover {
filter: brightness(1.5) grayscale(0.5);
}
.mainpage-header-search:active {
background-color: var(--color-progressive--active);
}
/*═══════│ BODY │═══════*/
.page-Main_Page .citizen-body {
backdrop-filter: none;
background-color: transparent;
border: 0;
}
.mainpage-container {
background-color: var(--color-surface-2--semiclear);
border: 2px solid var(--border-color-base);
border-radius: var(--border-radius--large);
padding: 1em;
margin: auto;
backdrop-filter: blur(5px);
}
.mainpage-grid {
display: grid;
grid: auto-flow dense/repeat(auto-fit, minmax(9.375rem, 1fr));
grid-auto-rows: minmax(3rem, auto);
grid-gap: var(--space-xs);
}
.mainpage-box {
position: relative;
padding: var(--space-md);
background: var(--color-surface-2);
border: 1px solid var(--color-surface-4);
border-radius: var(--border-radius-medium);
font-size: var(--font-size-small);
}
.mainpage-box h5 {
color: var(--color-emphasized);
font-family: var(--font-family-base);
font-size: 1rem;
font-weight: var(--font-weight-semi-bold);
line-height: var(--line-height-xxx-small);
margin-top: 0.25rem;
}
.mainpage-box h5 a {
display: flex;
align-items: center;
justify-content: space-between;
}
.mainpage-box h5 a:after {
content: "left_click";
}
/* Grid spans */
.mainpage-box--col2 { grid-column: span 2; }
.mainpage-box--col4 { grid-column: span 4; }
.mainpage-box--row3 { grid-row: span 3; }
.mainpage-box--row4 { grid-row: span 4; }
.mainpage-box--row8 { grid-row: span 8 / auto; }
div#mainpage-servers {
background: transparent;
padding: 0;
border: none;
}
/*═══════│ CONTAINERS & SECTIONS │═══════*/
/*═══════│ BUTTONS & LINKS │═══════*/
.mainpage-button {
display: flex;
}
.mainpage-button a {
flex-grow: 1;
padding: var(--space-xs);
border: 1px solid var(--border-color-base);
background: var(--color-surface-3);
border-radius: var(--border-radius-medium);
color: var(--color-emphasized) !important;
line-height: var(--line-height-xxx-small);
text-decoration: none !important;
}
.mainpage-button a:hover {
background: var(--color-surface-2--hover);
}
.mainpage-links {
display: grid;
margin-top: var(--space-xs);
font-size: var(--font-size-small);
font-weight: var(--font-weight-medium);
grid-gap: var(--space-xs);
text-align: center;
}
.link-button {
padding: 3px;
border: 1px solid var(--border-color-base);
height: 40px;
width: 40px;
background-color: var(--color-surface-3);
border-radius: var(--border-radius-medium);
color: var(--color-emphasized) !important;
line-height: var(--line-height-xxx-small);
text-decoration: none !important;
display: flex;
align-items: center;
transition: all 0.3s ease;
}
.link-button:hover {
filter: brightness(1.2);
}
.link-button a {
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
color: transparent;
height: 30px;
width: 30px;
filter: var(--filter-invert);
}
.mainpage-small-buttons {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
gap: 3px;
align-items: center;
margin-top: 5px;
}
/* Social Media Icons */
.icon-infold a { background-image: var(--ico-infold); }
.icon-youtube a { background-image: var(--ico-youtube); }
.icon-facebook a { background-image: var(--ico-facebook); }
.icon-tiktok a { background-image: var(--ico-tiktok); }
.icon-instagram a { background-image: var(--ico-instagram); }
.icon-twitter a { background-image: var(--ico-twitter); }
.icon-discord a { background-image: var(--ico-discord); }
/*╔══════════════════════════════════════════════════════════════════════════════╗
║ OVERRIDES ║
╚══════════════════════════════════════════════════════════════════════════════╝*/
/*═══════│ OOUI & INTERFACE │═══════*/
/*═══════│ HIDDEN │═══════*/
.page-info__label {
display: none;
}