MediaWiki:Pivot.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.
/* Some skin variables as a subset of Citizen's CSS. included here for compatibility because some userspace templates ended up using them.
Only includes oklch color space support but i don't think anyone is using a pre-2023 browser.
*/
:root {
--color-base: oklch(var(--color-base-oklch__l) var(--color-base-oklch__c) var(--color-progressive-oklch__h));
--color-base-fixed: #202122;
--color-base--hover: oklch(calc(var(--color-base-oklch__l) + var(--delta-lightness-hover-state)) var(--color-base-oklch__c) var(--color-progressive-oklch__h));
--color-emphasized: oklch(var(--color-emphasized-oklch__l) var(--color-emphasized-oklch__c) var(--color-progressive-oklch__h));
--color-subtle: oklch(var(--color-subtle-oklch__l) var(--color-subtle-oklch__c) var(--color-progressive-oklch__h));
--color-placeholder: oklch(var(--color-placeholder-oklch__l) var(--color-placeholder-oklch__c) var(--color-progressive-oklch__h));
--color-disabled: oklch(var(--color-disabled-oklch__l) var(--color-disabled-oklch__c) var(--color-progressive-oklch__h));
--color-inverted: #fff;
--color-inverted-fixed: #fff;
--color-progressive: oklch(var(--color-progressive-oklch__l) var(--color-progressive-oklch__c) var(--color-progressive-oklch__h));
--color-progressive--hover: oklch(calc(var(--color-progressive-oklch__l) + var(--delta-lightness-hover-state)) var(--color-progressive-oklch__c) var(--color-progressive-oklch__h));
--color-progressive--active: oklch(calc(var(--color-progressive-oklch__l) + var(--delta-lightness-active-state)) var(--color-progressive-oklch__c) var(--color-progressive-oklch__h));
--color-progressive--focus: var(--color-progressive);
--color-destructive: hsl(var(--color-destructive__h),100%,var(--color-destructive__l));
--color-destructive--hover: hsl(var(--color-destructive__h),100%,calc(var(--color-destructive__l) + var(--delta-lightness-hover-state)));
--color-destructive--active: hsl(var(--color-destructive__h),100%,calc(var(--color-destructive__l) + var(--delta-lightness-active-state)));
--color-destructive--focus: var(--color-progressive);
--color-visited: var(--color-link);
--color-destructive--visited: var(--color-destructive);
--color-error: var(--color-destructive);
--color-warning: hsl(var(--color-warning__h),100%,var(--color-warning__l));
--color-success: hsl(var(--color-success__h),100%,var(--color-success__l));
--color-notice: var(--color-base);
--color-content-added: var(--color-success);
--color-content-removed: var(--color-destructive);
--filter-invert-icon: 0;
--filter-invert-primary-button-icon: 1;
--box-shadow-color-base: var(--box-shadow-color-alpha-base);
--box-shadow-color-progressive--active: var(--color-progressive--active);
--box-shadow-color-progressive--focus: var(--color-progressive);
--box-shadow-color-progressive-selected: var(--color-progressive);
--box-shadow-color-progressive-selected--hover: var(--color-progressive--hover);
--box-shadow-color-progressive-selected--active: var(--color-progressive--active);
--box-shadow-color-destructive--focus: var(--color-progressive);
--box-shadow-color-inverted: #fff;
--box-shadow-color-transparent: transparent;
--background-color-base: var(--color-surface-0);
--background-color-base-fixed: oklch(96% 0.01 var(--color-progressive-oklch__h));
--background-color-neutral: var(--color-surface-2);
--background-color-neutral-subtle: var(--color-surface-1);
--background-color-interactive: var(--color-surface-2);
--background-color-interactive-subtle: var(--color-surface-1);
--background-color-disabled: var(--color-surface-3);
--background-color-disabled-subtle: var(--color-surface-1);
--background-color-inverted: #101418;
--background-color-progressive: var(--color-progressive);
--background-color-progressive--hover: var(--color-progressive--hover);
--background-color-progressive--active: var(--color-progressive--active);
--background-color-progressive--focus: var(--color-progressive);
--background-color-progressive-subtle: hsl(var(--color-progressive-hsl__h),var(--color-progressive-hsl__s),var(--background-color-subtle__l));
--background-color-destructive: var(--color-destructive);
--background-color-destructive--hover: var(--color-destructive--hover);
--background-color-destructive--active: var(--color-destructive--active);
--background-color-destructive--focus: var(--color-progressive);
--background-color-destructive-subtle: hsl(var(--color-destructive__h),var(--background-color-subtle__s),var(--background-color-subtle__l));
--background-color-error: var(--color-destructive);
--background-color-error--hover: var(--color-destructive--hover);
--background-color-error--active: var(--color-destructive--active);
--background-color-error-subtle: var(--background-color-destructive-subtle);
--background-color-warning-subtle: hsl(var(--color-warning__h),var(--background-color-subtle__s),var(--background-color-subtle__l));
--background-color-success-subtle: hsl(var(--color-success__h),var(--background-color-subtle__s),var(--background-color-subtle__l));
--background-color-notice-subtle: var(--color-surface-2);
--background-color-content-added: var(--background-color-success-subtle);
--background-color-content-removed: var(--background-color-destructive-subtle);
--background-color-transparent: transparent;
--background-color-backdrop-light: oklch(var(--color-surface-0-oklch__l) var(--color-surface-0-oklch__c) var(--color-progressive-oklch__h) / var(--backdrop-opacity));
--background-color-backdrop-dark: rgba(0,0,0,var(--backdrop-opacity));
--background-color-button-quiet--hover: rgba(0,24,73,0.027);
--background-color-button-quiet--active: rgba(0,24,73,0.082);
--background-color-input-binary--checked: var(--color-progressive);
--background-color-tab-list-item-framed--hover: rgba(255,255,255,0.3);
--background-color-tab-list-item-framed--active: rgba(255,255,255,0.65);
--opacity-icon-base: 0.6;
--opacity-icon-base--hover: 0.74;
--opacity-icon-base--selected: 1;
--opacity-icon-base--disabled: 0.51;
--opacity-icon-placeholder: 0.51;
--opacity-icon-subtle: 0.67;
--border-color-base: rgb(0 0 0 / 0.1);
--border-color-subtle: rgb(0 0 0 / 0.05);
--border-color-muted: rgb(0 0 0 / 0.03);
--border-color-interactive: rgb(0 0 0 / 0.1);
--border-color-disabled: var(--border-color-subtle);
--border-color-inverted: #fff;
--border-color-progressive: var(--color-progressive);
--border-color-progressive--hover: var(--color-progressive--hover);
--border-color-progressive--active: var(--color-progressive--active);
--border-color-progressive--focus: var(--color-progressive);
--border-color-destructive: var(--color-destructive);
--border-color-destructive--hover: var(--color-destructive--hover);
--border-color-destructive--active: var(--color-destructive--active);
--border-color-destructive--focus: var(--color-progressive);
--border-color-error: var(--border-color-base);
--border-color-error--hover: var(--border-color-base);
--border-color-warning: var(--border-color-base);
--border-color-success: var(--border-color-base);
--border-color-notice: var(--border-color-base);
--border-color-content-added: var(--border-color-base);
--border-color-content-removed: var(--border-color-base);
--border-color-transparent: transparent;
--border-color-divider: var(--border-color-base);
--outline-color-progressive--focus: var(--color-progressive);
--color-link-red: var(--color-destructive);
--color-link-red--hover: var(--color-destructive--hover);
--color-link-red--active: var(--color-destructive--active);
--color-link-red--focus: var(--color-destructive--focus);
--color-link-red--visited: var(--color-destructive--visited);
--border-color-input--hover: var(--border-color-interactive);
--border-color-input-binary: var(--border-color-interactive);
--border-color-input-binary--hover: var(--border-color-progressive--hover);
--border-color-input-binary--active: var(--border-color-progressive--active);
--border-color-input-binary--focus: var(--border-color-progressive--focus);
--border-color-input-binary--checked: var(--border-color-progressive);
--color-visited--hover: var(--color-progressive--hover);
--color-visited--active: var(--color-progressive--active);
--color-destructive--visited--hover: var(--color-destructive--hover);
--color-destructive--visited--active: var(--color-destructive--active);
--background-color-interactive--hover: var(--color-surface-2--hover);
--background-color-interactive--active: var(--color-surface-2--active);
--color-link-red--visited--hover: var(--color-destructive--visited--hover);
--color-link-red--visited--active: var(--color-destructive--visited--active);
--background-color-interactive-subtle--hover: var(--color-surface-1--hover);
--background-color-interactive-subtle--active: var(--color-surface-1--active);
--accent-color-base: var(--color-progressive);
--box-shadow-color-alpha-base: oklch(var(--shadow-color-oklch__l) var(--shadow-color-oklch__c) var(--color-progressive-oklch__h) / var(--shadow-opacity));
--font-size-x-small: 0.75rem;
--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: 1.75rem;
--line-height-x-small: 1.25rem;
--line-height-small: 1.375rem;
--line-height-medium: 1.625rem;
--line-height-large: 1.75rem;
--line-height-x-large: 1.875rem;
--line-height-xx-large: 2.125rem;
--line-height-xxx-large: 2.375rem;
--line-height-content: 1.625
}
:root {
--delta-lightness-state-base: 4%;
--delta-lightness-hover-state: calc(var(--delta-lightness-state-base) * 1);
--delta-lightness-active-state: calc(var(--delta-lightness-state-base) * -1);
--delta-lightness-surface-base: -2%;
--color-progressive-oklch__l: 53.25%;
--color-progressive-oklch__c: 0.1679;
--color-progressive-oklch__h: 262.29;
--color-surface-0-oklch__l: 96%;
--color-surface-0-oklch__c: 0.01;
--color-surface-1-oklch__l: calc(var(--color-surface-0-oklch__l) + var(--delta-lightness-surface-base));
--color-surface-1-oklch__c: 0.015;
--color-surface-2-oklch__l: calc(var(--color-surface-0-oklch__l) + (var(--delta-lightness-surface-base) * 2));
--color-surface-2-oklch__c: 0.02;
--color-surface-3-oklch__l: calc(var(--color-surface-0-oklch__l) + (var(--delta-lightness-surface-base) * 3));
--color-surface-3-oklch__c: 0.03;
--color-surface-4-oklch__l: calc(var(--color-surface-0-oklch__l) + (var(--delta-lightness-surface-base) * 4));
--color-surface-4-oklch__c: 0.04;
--color-surface-0: oklch(var(--color-surface-0-oklch__l) var(--color-surface-0-oklch__c) var(--color-progressive-oklch__h));
--color-surface-1: oklch(var(--color-surface-1-oklch__l) var(--color-surface-1-oklch__c) var(--color-progressive-oklch__h));
--color-surface-1--hover: oklch(calc(var(--color-surface-1-oklch__l) + var(--delta-lightness-hover-state)) var(--color-surface-1-oklch__c) var(--color-progressive-oklch__h));
--color-surface-1--active: oklch(calc(var(--color-surface-1-oklch__l) + var(--delta-lightness-active-state)) var(--color-surface-1-oklch__c) var(--color-progressive-oklch__h));
--color-surface-2: oklch(var(--color-surface-2-oklch__l) var(--color-surface-2-oklch__c) var(--color-progressive-oklch__h));
--color-surface-2--hover: oklch(calc(var(--color-surface-2-oklch__l) + var(--delta-lightness-hover-state)) var(--color-surface-2-oklch__c) var(--color-progressive-oklch__h));
--color-surface-2--active: oklch(calc(var(--color-surface-2-oklch__l) + var(--delta-lightness-active-state)) var(--color-surface-2-oklch__c) var(--color-progressive-oklch__h));
--color-surface-3: oklch(var(--color-surface-3-oklch__l) var(--color-surface-3-oklch__c) var(--color-progressive-oklch__h));
--color-surface-4: oklch(var(--color-surface-4-oklch__l) var(--color-surface-4-oklch__c) var(--color-progressive-oklch__h));
--color-emphasized-oklch__l: 5%;
--color-emphasized-oklch__c: 0.07000000000000001;
--color-base-oklch__l: 20%;
--color-base-oklch__c: 0.09;
--color-subtle-oklch__l: 35%;
--color-subtle-oklch__c: 0.11;
--color-placeholder-oklch__l: 40%;
--color-placeholder-oklch__c: 0.07000000000000001;
--color-disabled-oklch__l: 60%;
--color-disabled-oklch__c: 0.05;
--color-inverted-primary: #fff;
--color-destructive__h: 340;
--color-destructive__l: 40%;
--color-success__h: 170;
--color-success__l: 17%;
--color-warning__h: 48;
--color-warning__l: 40%;
--background-color-subtle__s: 95%;
--background-color-subtle__l: 95%;
--background-color-icon: rgba(0,0,0,var(--opacity-icon-base));
--background-color-icon--hover: rgba(0,0,0,var(--opacity-icon-base--hover));
--background-color-icon--active: rgba(0,0,0,var(--opacity-icon-base--active));
--color-link: var(--color-progressive);
--color-link--hover: var(--color-progressive--hover);
--color-link--active: var(--color-progressive--active);
--color-syntax-red: #e53935;
--color-syntax-orange: #f76d47;
--color-syntax-yellow: #e2931d;
--color-syntax-green: #91b859;
--color-syntax-cyan: #39adb5;
--color-syntax-blue: #6182b8;
--color-syntax-paleblue: #8796b0;
--color-syntax-purple: #9c3eda;
--color-syntax-brown: #916b53;
--color-syntax-pink: #ff5370;
--color-syntax-violet: #945eb8;
--color-syntax-grey: #90a4ae;
--backdrop-filter-frosted-glass: blur(16px) saturate(140%);
--backdrop-opacity: 0.65;
--filter-invert: none;
--filter-invert-primary: invert(1) hue-rotate(180deg);
--opacity-glass: 0.9;
--font-grade: 25;
--shadow-color-oklch__l: 12%;
--shadow-color-oklch__c: 0.01;
--shadow-color-hsl__s: 10%;
--shadow-color-hsl__l: 20%;
--shadow-opacity: 0.03;
color-scheme: light;
--color-progressive-hsl__h: 220;
--color-progressive-hsl__s: 60%;
--color-progressive-hsl__l: 50%;
--color-surface-0-hsl__s: 30%;
--color-surface-0-hsl__l: 96%;
--color-surface-1-hsl__s: 40%;
--color-surface-1-hsl__l: calc(var(--color-surface-0-hsl__l) + var(--delta-lightness-surface-base));
--color-surface-2-hsl__s: 40%;
--color-surface-2-hsl__l: calc(var(--color-surface-0-hsl__l) + (var(--delta-lightness-surface-base) * 2));
--color-surface-3-hsl__s: 43%;
--color-surface-3-hsl__l: calc(var(--color-surface-0-hsl__l) + (var(--delta-lightness-surface-base) * 3));
--color-surface-4-hsl__s: 46%;
--color-surface-4-hsl__l: calc(var(--color-surface-0-hsl__l) + (var(--delta-lightness-surface-base) * 4));
--color-emphasized-hsl__s: 85%;
--color-emphasized-hsl__l: 5%;
--color-base-hsl__s: 30%;
--color-base-hsl__l: 20%;
--color-subtle-hsl__s: 40%;
--color-subtle-hsl__l: 35%;
--color-placeholder-hsl__s: 85%;
--color-placeholder-hsl__l: 40%;
--color-disabled-hsl__s: 85%;
--color-disabled-hsl__l: 60%;
--border-radius-medium: calc(var(--border-radius-base) * 2);
--border-radius-large: calc(var(--border-radius-base) * 3);
--box-shadow-border: var(--border-color-base) 0 0 0 1px;
--filter-invert-fixed: invert(1) hue-rotate(180deg);
--filter-image-brightness: none;
--font-family-citizen-base: 'Roboto','Roboto-fallback';
--font-family-citizen-serif: 'Roboto Serif','Roboto Serif-fallback';
--font-family-citizen-monospace: 'Roboto Mono','Roboto Mono-fallback';
--font-family-language-base: '';
--font-family-language-serif: '';
--font-family-language-monospace: '';
--size-icon: 1.25rem;
--toolbar-size: 2.5rem;
--height-sticky-header: 0px;
--header-size: 3.5rem;
--header-card-maxheight: 80vh;
--overflow-gradient-size: 2rem;
--width-layout: 1080px;
--width-layout--extended: calc(var(--width-layout) * 1.5);
--width-toc: 240px;
--width-page: 1080px;
--padding-page: 16px;
--space-unit: 1rem;
--space-xxs: calc(0.25 * var(--space-unit));
--space-xs: calc(0.5 * var(--space-unit));
--space-sm: calc(0.75 * var(--space-unit));
--space-md: var(--space-unit);
--space-lg: calc(1.25 * var(--space-unit));
--space-xl: calc(1.5 * var(--space-unit));
--space-xxl: calc(2 * var(--space-unit));
--transition-delay-menu: 100ms;
--transition-timing-function-ease: cubic-bezier(0.44,0.21,0,1);
--transition-timing-function-ease-in: cubic-bezier(0.75,0,1,1);
--transition-timing-function-ease-out: cubic-bezier(0.215,0.61,0.355,1);
--transform-image-hover: scale(1.1);
--border-base: var(--border-width-base) solid var(--border-color-base);
--border-subtle: var(--border-width-base) solid var(--border-color-subtle);
--border-width-base: 1px;
--border-width-thick: 2px;
--border-radius-base: 4px;
--border-radius-sharp: 0;
--border-radius-pill: 9999px;
--border-radius-circle: 50%;
--box-shadow-small: 0 0 0 1px var(--border-color-base);
--box-shadow-medium: 0 0.5px 0.6px var(--box-shadow-color-alpha-base),0 1.6px 1.8px -0.8px var(--box-shadow-color-alpha-base),0 4px 4.5px -1.7px var(--box-shadow-color-alpha-base),0 9.8px 11px -2.5px var(--box-shadow-color-alpha-base);
--box-shadow-large: 0 0.5px 0.6px var(--box-shadow-color-alpha-base),0 2.8px 3.1px -0.4px var(--box-shadow-color-alpha-base),0 5.3px 6px -0.7px var(--box-shadow-color-alpha-base),0 8.7px 9.8px -1.1px var(--box-shadow-color-alpha-base),0 13.9px 15.6px -1.4px var(--box-shadow-color-alpha-base),0 21.8px 24.5px -1.8px var(--box-shadow-color-alpha-base);
--font-family-base: var(--font-family-citizen-base),var(--font-family-language-base),system-ui,-apple-system,sans-serif;
--font-family-serif: var(--font-family-citizen-serif),var(--font-family-language-serif),'Linux Libertine','Georgia','Times','Source Serif Pro',serif;
--font-family-monospace: var(--font-family-citizen-monospace),var(--font-family-language-monospace),'Menlo','Consolas','Liberation Mono','Fira Code','Courier New',monospace;
--font-weight-normal: 400;
--font-weight-medium: calc(var(--font-weight-normal) + 100);
--font-weight-semi-bold: calc(var(--font-weight-normal) + 200);
--font-weight-bold: calc(var(--font-weight-normal) + 300);
--font-family-overline: var(--font-family-base);
--font-weight-overline: var(--font-weight-medium);
--font-size-overline: var(--font-size-small);
--line-height-overline: var(--line-height-small);
--text-transform-overline: none;
--letter-spacing-overline: normal;
--header-direction: row;
--header-size-inline-start: 0px;
--header-size-inline-end: 0px;
--header-size-block-start: 0px;
--header-size-block-end: 0px;
--header-inset-block-start: 0px;
--header-inset-block-end: 0px;
--header-inset-inline-start: 0px;
--header-inset-inline-end: 0px;
--header-border-block-start-width: 0px;
--header-border-block-end-width: 0px;
--header-border-inline-start-width: 0px;
--header-border-inline-end-width: 0px;
--color-primary__h: var(--color-progressive-hsl__h);
--color-primary__s: var(--color-progressive-hsl__s);
--color-primary__l: var(--color-progressive-hsl__l);
--font-size-base: var(--font-size-medium);
--line-height: 1.6;
--line-height-xxx-small: 1.25;
--line-height-xx-small: 1.375;
--box-shadow-drop-small: var(--box-shadow-small);
--box-shadow-drop-medium: var(--box-shadow-medium);
--box-shadow-drop-xx-large: var(--box-shadow-large)
}
/* Custom colors - top bar*/
.tab-bar {
background: #041424;
}
/* style the labels */
.side-nav li a:not(.button) {
color: #ddd;
transition: color 0.15s ease-in;
}
.side-nav li a:not(.button):hover, .side-nav li a:not(.button):focus {
background: transparent;
color: #fc640b;
}
ul.side-nav label {
/* orange */
background: #fc640b;
color: #fff;
padding: .25em .5em;
}
/* Side-nav logo */
.side-nav>.logo {
max-width: 300px;
}
/* sidebar background color */
body {
/* blue */
background-color: #183d62;
}
/* Namespace labels */
h4.namespace.label {
background-color: #677e94;
}
/* Labels (Categories) */
.label {
background: #1d6eb3;
}
/* controls the main body area styling */
#p-cactions {
padding-top: .5em;
padding-bottom: .5em;
background-color: #f6f6f6;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#p-cactions>footer {
margin-bottom: 0;
padding-bottom: 0;
background: none;
}
/* Side left and right user menus*/
ul.off-canvas-list li label {
background: #183d62;
border: none;
color: #eee;
line-height: 2.5em;
}
ul.off-canvas-list li a {
color: #fc640b;
transition: background-color 0.15s ease-in, color 0.15s ease-in;
}
ul.off-canvas-list li a:hover {
background: #c5d8e8;
}
.right-off-canvas-menu, .left-off-canvas-menu {
background: #eee;
}
/* Fix side nav title cursors */
ul.side-nav label {
cursor: default;
}
/* Dropdown menu */
#p-cactions #drop1 {
border: 1px solid #b9c4d0;
}