MediaWiki:ThemeDefinitions.css

From Oxygen Not Included Wiki
Jump to navigation Jump to search

Style changes not showing up

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)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.

Documentation [ view ] [ talk ]

Overview

This documentation outlines the structure and purpose of the CSS style sheets used. Each CSS files is supposed to have it's own purpose to keep things organized. The two primary CSS files are Common.css, and Vector.css. There are no CSS files for the Themes, which would be Theme-dark.css, Theme-light.css, Theme-dark-dyslexic.css and Theme-light-dyslexic.css. The different Themes are not too different, so it's not quite necessary to have them all defined in seperate places, but are combined into ThemeDefinitions.css.

Currently all Style Sheets are loaded for all users, the 4 Themes would load only for those users that have picked them, but are currently combined in ThemeDefinitions.css which differentiates between choosen themes.

File Loading Order

  1. Common.css: Loaded first and contains styles specific to the Oxygen Not Included Wiki, such as the Main Page and Templates.
  2. ThemeDefinitions.css: Loaded by Common.css and includes theme definitions for light and dark skins, as well as the dyslexic-friendly theme (also available in light and dark).
  3. Vector.css: Loaded last, this file defines the primary design and layout for the Vector skin, which is the major design of wiki.gg wikis.

Style Sheet

:root {
	--wiki-font-dyslexic: 'OpenDyslexic', sans-serif;

	--wiki-card-text-standard: #dde;
	--wiki-card-shadow-standard: #2A2F3B;
    --wiki-card-border-standard: #020203;
    --wiki-card-background-standard: #3E4357;

	--wiki-card-text-FP: #cdfffe;
	--wiki-card-border-FP: var(--wiki-card-shadow-standard);
	--wiki-card-shadow-FP: #2650a2;
	--wiki-card-background-FP: linear-gradient(to bottom,color-mix(in srgb, var(--wiki-card-text-FP) 75%, var(--wiki-card-background-standard)),color-mix(in srgb, var(--wiki-card-shadow-FP) 75%, var(--wiki-card-background-standard)));

	--wiki-card-text-SO: #322100;
	--wiki-card-border-SO: var(--wiki-card-shadow-standard);
	--wiki-card-shadow-SO: #fc9113;
	--wiki-card-background-SO: linear-gradient(to bottom,color-mix(in srgb,#ffce02 75%,var(--wiki-card-background-standard)),color-mix(in srgb,var(--wiki-card-shadow-SO) 66%,var(--wiki-card-background-standard)));
}

.view-dark {
    --wiki-body-background-image: url(/images/c/c4/Site-background-dark.jpg); /* [[File:Site-background-dark.jpg]] */
    --wiki-body-background-color: #212451;
    --wiki-body-background-color--rgb: 33, 36, 81;
    --wiki-body-dynamic-color: #ffffff;
    --wiki-body-dynamic-color--rgb: 255,255,255;
    --wiki-body-dynamic-color--inverted: #000000;
    --wiki-body-dynamic-color--inverted--rgb: 0,0,0;
    --wiki-body-dynamic-color--secondary: #dddddd;
    --wiki-body-dynamic-color--secondary--rgb: 221,221,221;
    --wiki-body-dynamic-color--secondary--inverted: #333333;
    --wiki-body-dynamic-color--secondary--inverted--rgb: 51,51,51;
    
    --wiki-content-background-color: #161830;
    --wiki-content-background-color--rgb: 22,24,48;
    --wiki-content-background-opacity: 0.95;
    --wiki-content-background-color--secondary: #393b4f;
    --wiki-content-background-color--secondary--rgb: 57,59,79;
    --wiki-content-border-color: #4a4c5e;
    --wiki-content-border-color--rgb: 74,76,94;
    --wiki-content-text-color: #eeeeee;
    --wiki-content-text-color--rgb: 238,238,238;
    --wiki-content-link-color: #d16fa0;
    --wiki-content-link-color--rgb: 209,111,160;
    --wiki-content-link-label-color: #000;
    --wiki-content-link-label-color--rgb: 0,0,0;
    --wiki-content-link-color--visited: var(--wiki-content-link-color);
    --wiki-content-link-color--visited--rgb: var(--wiki-content-link-color--rgb);
    --wiki-content-link-color--hover: var(--wiki-content-link-color);
    --wiki-content-link-color--hover--rgb: var(--wiki-content-link-color--rgb);
    --wiki-content-redlink-color: #fc452d;
    --wiki-content-redlink-color--rgb: 252,69,45;
    --wiki-content-text-mix-color: #7e7f8b;
    --wiki-content-text-mix-color--rgb: 126, 127, 139;
    --wiki-content-text-mix-color-95: #202239;
    --wiki-content-text-mix-color-95--rgb: 32, 34, 57;
    --wiki-content-dynamic-color: #ffffff;
    --wiki-content-dynamic-color--rgb: 255, 255, 255;
    --wiki-content-dynamic-color--inverted: #000000;
    --wiki-content-dynamic-color--inverted--rgb: 0, 0, 0;
    --wiki-content-dynamic-color--secondary: #dddddd;
    --wiki-content-dynamic-color--secondary--rgb: 221, 221, 221;
    --wiki-content-dynamic-color--secondary--inverted: #333333;
    --wiki-content-dynamic-color--secondary--inverted--rgb: 51, 51, 51;

    --wiki-heading-color: var(--wiki-content-text-color);
    --wiki-heading-color--rgb: var(--wiki-content-text-color--rgb);
    --wiki-heading-font-family: 'Economica', 'Rubik', sans-serif;

    --wiki-accent-color: #8a3b65;
    --wiki-accent-color--rgb: 138,59,101;
    --wiki-accent-color--hover: #c987ab;
    --wiki-accent-color--hover--rgb: 201, 135, 171;
    --wiki-accent-label-color: #fff;
    --wiki-accent-label-color--rgb: 255,255,255;
    --wiki-accent-link-color: #c1dcde;
    --wiki-accent-link-color--rgb: 1913,220,222;

    --wiki-sidebar-background-color: var(--wiki-content-background-color);
    --wiki-sidebar-background-color--rgb: var(--wiki-content-background-color--rgb);
    --wiki-sidebar-background-opacity: 0.8;
    --wiki-sidebar-border-color: var(--wiki-content-border-color);
    --wiki-sidebar-border-color--rgb: var(--wiki-content-border-color--rgb);
    --wiki-sidebar-link-color: var(--wiki-content-link-color);
    --wiki-sidebar-link-color--rgb: var(--wiki-content-link-color--rgb);
    --wiki-sidebar-heading-color: var(--wiki-heading-color);
    --wiki-sidebar-heading-color--rgb: var(--wiki-heading-color--rgb);

    --wiki-navigation-background-color: var(--wiki-content-border-color);
    --wiki-navigation-background-color--rgb: var(--wiki-content-border-color--rgb);
    --wiki-navigation-background-color--secondary: var(--wiki-content-background-color--secondary);
    --wiki-navigation-background-color--secondary--rgb: var(--wiki-content-background-color--secondary--rgb);
    --wiki-navigation-border-color: var(--wiki-content-border-color);
    --wiki-navigation-border-color--rgb: var(--wiki-content-border-color--rgb);
    --wiki-navigation-text-color: var(--wiki-content-link-color);
    --wiki-navigation-text-color--rgb: var(--wiki-content-link-color--rgb);
    --wiki-navigation-selected-background-color: var(--wiki-content-background-color);
    --wiki-navigation-selected-background-color--rgb: var(--wiki-content-background-color--rgb);
    --wiki-navigation-selected-border-color: var(--wiki-navigation-border-color);
    --wiki-navigation-selected-border-color-rgb: var(--wiki-navigation-border-color--rgb);
    --wiki-navigation-selected-text-color: var(--wiki-content-text-color);
    --wiki-navigation-selected-text-color-rgb: var(--wiki-content-text-color--rgb);

    --wiki-alert-color: #d30019;
    --wiki-alert-color--rgb: 211,0,25;
    --wiki-alert-label-color: #ffffff;
    --wiki-alert-label-color--rgb: 255,255,255;
    --wiki-warning-color: #cf721c;
    --wiki-warning-color--rgb: 207,114,28;
    --wiki-warning-label-color: #000000;
    --wiki-warning-label-color--rgb: 0, 0, 0;
    --wiki-success-color: #0c742f;
    --wiki-success-color--rgb: 12,116,47;
    --wiki-success-label-color: #000000;
    --wiki-success-label-color--rgb: 0,0,0;
    
    --wiki-icon-general-filter: invert(100%);
    --wiki-icon-to-link-filter: invert(51%) sepia(57%) saturate(440%) hue-rotate(277deg) brightness(84%) contrast(92%);
}

.view-light {
    --wiki-body-background-image: url(/images/f/f7/Site-background-light.jpg); /* [[File:Site-background-light.jpg]] */
    --wiki-body-background-color: #bdc1c2;
    --wiki-body-background-color--rgb: 189, 193, 194;
    --wiki-body-dynamic-color: #000000;
    --wiki-body-dynamic-color--rgb: 0,0,0;
    --wiki-body-dynamic-color--inverted: #ffffff;
    --wiki-body-dynamic-color--inverted--rgb: 255,255,255;
    --wiki-body-dynamic-color--secondary: #333333;
    --wiki-body-dynamic-color--secondary--rgb: 51,51,51;
    --wiki-body-dynamic-color--secondary--inverted: #dddddd;
    --wiki-body-dynamic-color--secondary--inverted--rgb: 221,221,221;
    
    --wiki-content-background-color: #effffe;
    --wiki-content-background-color--rgb: 239,255,254;
    --wiki-content-background-opacity: 0.95;
    --wiki-content-background-color--secondary: #e3f2f1;
    --wiki-content-background-color--secondary--rgb: 227,242,241;
    --wiki-content-border-color: #c2cecd;
    --wiki-content-border-color--rgb: 194,206,205;
    --wiki-content-text-color: #262626;
    --wiki-content-text-color--rgb: 38,38,38;
    --wiki-content-link-color: #b25986;
    --wiki-content-link-color--rgb: 178,89,134;
    --wiki-content-link-label-color: #ffffff;
    --wiki-content-link-label-color--rgb: 255,255,255;
    --wiki-content-link-color--visited: var(--wiki-content-link-color);
    --wiki-content-link-color--visited--rgb: var(--wiki-content-link-color--rgb);
    --wiki-content-link-color--hover: var(--wiki-content-link-color);
    --wiki-content-link-color--hover--rgb: var(--wiki-content-link-color--rgb);
    --wiki-content-redlink-color: #bf0017;
    --wiki-content-redlink-color--rgb: 191,0,23;
    --wiki-content-text-mix-color: #959d9c;
    --wiki-content-text-mix-color--rgb: 149, 157, 156;
    --wiki-content-text-mix-color-95: #e6f5f4;
    --wiki-content-text-mix-color-95--rgb: 230, 245, 244;
    --wiki-content-dynamic-color: #000000;
    --wiki-content-dynamic-color--rgb: 0,0,0;
    --wiki-content-dynamic-color--inverted: #ffffff;
    --wiki-content-dynamic-color--inverted--rgb: 255,255,255;
    --wiki-content-dynamic-color--secondary: #333333;
    --wiki-content-dynamic-color--secondary--rgb: 51,51,51;
    --wiki-content-dynamic-color--secondary--inverted: #dddddd;
    --wiki-content-dynamic-color--secondary--inverted--rgb: 221,221,221;

    --wiki-heading-color: var(--wiki-content-text-color);
    --wiki-heading-color--rgb: var(--wiki-content-text-color--rgb);
    --wiki-heading-font-family: 'Economica', 'Rubik', sans-serif;

    --wiki-accent-color: #93456f;
    --wiki-accent-color--rgb: 147,69,111;
    --wiki-accent-color--hover: #c17ca1;
    --wiki-accent-color--hover--rgb: 193, 124, 161;
    --wiki-accent-label-color: #ffffff;
    --wiki-accent-label-color--rgb: 255,255,255;
    --wiki-accent-link-color: #9CEDF5;
    --wiki-accent-link-color--rgb: 156, 237, 245;

    --wiki-sidebar-background-color: var(--wiki-content-background-color);
    --wiki-sidebar-background-color--rgb: var(--wiki-content-background-color--rgb);
    --wiki-sidebar-background-opacity: 0.8;
    --wiki-sidebar-border-color: var(--wiki-body-background-color);
    --wiki-sidebar-border-color--rgb: var(--wiki-body-background-color--rgb);
    --wiki-sidebar-link-color: var(--wiki-content-link-color);
    --wiki-sidebar-link-color--rgb: var(--wiki-content-link-color--rgb);
    --wiki-sidebar-heading-color: var(--wiki-heading-color);
    --wiki-sidebar-heading-color--rgb: var(--wiki-heading-color--rgb);

    --wiki-navigation-background-color: var(--wiki-content-border-color);
    --wiki-navigation-background-color--rgb: var(--wiki-content-border-color--rgb);
    --wiki-navigation-background-color--secondary: var(--wiki-content-background-color--secondary);
    --wiki-navigation-background-color--secondary--rgb: var(--wiki-content-background-color--secondary--rgb);
    --wiki-navigation-border-color: var(--wiki-content-border-color);
    --wiki-navigation-border-color--rgb: var(--wiki-content-border-color--rgb);
    --wiki-navigation-text-color: var(--wiki-content-link-color);
    --wiki-navigation-text-color--rgb: var(--wiki-content-link-color--rgb);
    --wiki-navigation-selected-background-color: var(--wiki-content-background-color);
    --wiki-navigation-selected-background-color--rgb: var(--wiki-content-background-color--rgb);
    --wiki-navigation-selected-border-color: var(--wiki-navigation-border-color);
    --wiki-navigation-selected-border-color-rgb: var(--wiki-navigation-border-color--rgb);
    --wiki-navigation-selected-text-color: var(--wiki-content-text-color);
    --wiki-navigation-selected-text-color-rgb: var(--wiki-content-text-color--rgb);

    --wiki-alert-color: #bf0017;
    --wiki-alert-color--rgb: 191,0,23;
    --wiki-alert-label-color: #ffffff;
    --wiki-alert-label-color--rgb: 255, 255, 255;
    --wiki-warning-color: #cf721c;
    --wiki-warning-color--rgb: 207,114,28;
    --wiki-warning-label-color: #000000;
    --wiki-warning-label-color--rgb: 0, 0, 0;
    --wiki-success-color: #0c742f;
    --wiki-success-color--rgb: 12,116,47;
    --wiki-success-label-color: #ffffff;
    --wiki-success-label-color--rgb: 255, 255, 255;
    
    --wiki-icon-general-filter: ;
    --wiki-icon-to-link-filter: invert(41%) sepia(19%) saturate(1809%) hue-rotate(277deg) brightness(83%) contrast(81%);
}


/* ---------------------------------------------------------------------------------------------------------------

For Template:ThemedImage and other theme dependant images and equations

--------------------------------------------------------------------------------------------------------------- */

/* Template:ThemedImage */
.invert-image img { 
	filter: invert(1); 
}
.view-dark .invert-on-dark,
.view-light .invert-on-light {
    filter:invert(100%);
}
.view-dark .light-image,
.view-light .dark-image { 
    display:none; 
}


/* ---------------------------------------------------------------------------------------------------------------

Dyslexia support

--------------------------------------------------------------------------------------------------------------- */

html.theme-dark-dyslexic, html.theme-dark-dyslexic body,
html.theme-light-dyslexic, html.theme-light-dyslexic body {
	font-family: 'OpenDyslexic', sans-serif;
	font-size: 1.01em;
}
.theme-dark-dyslexic .oo-ui-buttonElement-framed.oo-ui-labelElement > .oo-ui-buttonElement-button,
.theme-light-dyslexic .oo-ui-buttonElement-framed.oo-ui-labelElement > .oo-ui-buttonElement-button {
	padding-top: 0.25em;
	padding-bottom: 1.75em;
}
@media screen {
	html.theme-dark-dyslexic, html.theme-dark-dyslexic body,
	html.theme-light-dyslexic, html.theme-light-dyslexic body {
		font-family: 'OpenDyslexic', sans-serif;
		font-size: 1.01em;
	}
	.theme-dark-dyslexic .oo-ui-buttonElement-framed.oo-ui-labelElement > .oo-ui-buttonElement-button,
	.theme-light-dyslexic .oo-ui-buttonElement-framed.oo-ui-labelElement > .oo-ui-buttonElement-button {
		padding-top: 0.25em;
		padding-bottom: 0.75em;
	}
}

/* revert non-blocktext to sans-serif from dyslexic */
.mw-changeslist, 
.mw-changeslist-separator, 
.mw-rcfilters-head, 
.mw-history-legend,
.mw-htmlform-ooui-wrapper,
.mw-pager-navigation-bar,
.mw-history-subtitle,
#mw-history-compare,
#mw-scribunto-console,
.mw-editTools,
.diff-title,
.diff-multi,
.interlanguage-link-target:lang(ru) {
	font-family: sans-serif;
}
Retrieved from "https://oxygennotincluded.wiki.gg/index.php?title=MediaWiki:ThemeDefinitions.css&oldid=55966"