MediaWiki:Theme-Changeling.css
Jump to navigation
Jump to search
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.
/*** (Changeling/Dark) ***/
html:root {
--theme-thumb-wrapper-background: rgba(180,180,180,.8);
/* for wide table */
--theme-wide-table-shadow-color: #999;
/*** text color ***/
--theme-text-color: #e6e6e6; /* main text color */
--theme-text-color--rgb: 32, 33, 34;
--theme-text-color-note: #b5bdb2; /* note text */
--theme-text-color-em: #6699ff;/* 6, 69, 173 */
--theme-text-color-highlight: #fff;
/*** link text color ***/
--theme-link-color: #6699ff;
--theme-link-color--rgb: 159,236,240;
--theme-link-color-hover: currentcolor;
--theme-link-color-visited: #709bbd;
--theme-link-color-redlink: #ba0000;
/* common */
--theme-border-color: #376E95;
--theme-border-color--rgb: 0,0,0;
--theme-box-background: #414d63;
--theme-highlight-background: rgba(20,20,20, 0.25);
--theme-hr-color-A: rgb(10,10,10);
--theme-hr-color-B: rgba(255,255,255, 0.1);
--theme-box-border-color: rgba(255, 255, 255, 0.1) rgba(13, 4, 2, 0.5) rgb(13, 4, 2, 0.5) rgba(255, 255, 255, 0.1);
--theme-box-border-color-inner: var(--theme-box-border-color);
--theme-box-border-radius-inner: 0px;
--theme-box-border-color-invert: rgba(255,255,255, 0.1);
--theme-button-background: linear-gradient(rgba(20,20,20, 0.2), rgba(20,20,20, 0.2)), var(--theme-button-background-active);
--theme-button-border-color: rgba(151,107,69, 0.7) rgba(86,47,33, 0.7) rgba(86,47,33, 0.7) rgba(151,107,69, 0.7);
--theme-button-background-active: #7b573d var(--theme-image-button-background) center center / cover repeat-x;
--theme-button-border-color-active: rgb(151,107,69) rgb(86,47,33) rgb(86,47,33) rgb(151,107,69);
/*** body ***/
--theme-body-background: #1B1E35 url(https://equestriaatwar.wiki.gg/images/4/40/Site-background-changeling.png) center top / cover no-repeat fixed;
/*** top site logo ***/
--theme-site-logo-image: url(https://equestriaatwar.wiki.gg/images/e/e6/Site-logo.png);
--theme-site-logo-width: 224px; /* 448 × 275 */
--theme-site-logo-height: 137px;
/* sidebar/content common */
--theme-box-shadow: 0px 0px 0px 0px rgba(10,10,10, 0.7);
--theme-navbar-background-top: top repeat-x; /* the "grass" */
--theme-navbar-background-top-offset: -6px; /* top */
/*** sidebar ***/
--theme-sidebar-box-background: rgba(31,46,71,0.85);
--theme-sidebar-box-border-style: solid;
--theme-sidebar-box-border-color: var(--theme-content-border-color); /* set it to "transparent" for no border */
--theme-sidebar-box-shadow: var(--theme-box-shadow);
--theme-sidebar-heading-text-color: var(--theme-text-color);
--theme-sidebar-heading-arrow-color: rgba(234,227,209, 0.5);
--theme-sidebar-heading-arrow-color-hover: rgb(234,227,209);
--theme-sidebar-heading-background: none;
--theme-sidebar-heading-background-hover: var(--theme-sidebar-heading-background); /* for hover effect */
/* following 3 values will affect the space between the heading and the list */
--theme-sidebar-heading-border-bottom: 1px solid rgb(10,10,10);
--theme-sidebar-list-border-top: 1px solid rgba(255,255,255, 0.1); /* will be hidden when collapsed */
--theme-sidebar-list-padding-top: 4px;
--theme-sidebar-list-item-background: none;
--theme-sidebar-list-item-hover-mask: rgba(20,20,20, 0.25);
--theme-sidebar-list-item-text-color: var(--theme-text-color-em);
--theme-sidebar-list-item-text-color-hover: var(--theme-text-color-em);
/* responsive */
--theme-sidebar-box-background-2: #60473b url(https://terraria.wiki.gg/images/5/5a/Navbar-background-overworld.jpg);
--theme-sidebar-dropdown-background: #60473b url(https://terraria.wiki.gg/images/2/26/Content-background-overworld.jpg);
/*** navbar ***/
--theme-navbar-background: none;
--theme-navbar-tab-box-shadow: none;
--theme-navbar-tab-text-color: var(--theme-text-color-em);
--theme-navbar-tab-icon-color: var(--theme-navbar-tab-text-color);
--theme-navbar-tab-text-color-hover: var(--theme-navbar-tab-text-color);
--theme-navbar-tab-icon-color-hover: var(--theme-navbar-tab-icon-color);
--theme-navbar-tab-text-color-redlink: var(--theme-link-color-redlink);
--theme-navbar-tab-icon-color-redlink: var(--theme-link-color-redlink);
--theme-navbar-tab-border-color: #376E95;
--theme-navbar-tab-background-hover:rgba(31,46,71,0.85); /*rgba(214,255,228,0.06);*/
--theme-navbar-tab-border-color-hover: rgba(20,20,20, 0.25); /*rgba(214,255,228,0.03);*/
--theme-navbar-tab-selected-border-color: #376E95;
--theme-navbar-tab-selected-border-bottom-corner-color: #376E95;
--theme-navbar-tab-background: rgba(89, 110, 146, 0.85);
--theme-navbar-tab-selected-background: rgba(31,46,71,0.85);
--theme-navbar-tab-dropdown-arrow-color: rgba(196,235,208, 0.85);
--theme-navbar-tab-dropdown-arrow-color-hover: rgb(196,235,208);
--theme-navbar-tab-dropdown-background: rgba(31,46,71);
--theme-navbar-tab-dropdown-border-color: var(--theme-content-border-color);
--theme-navbar-tab-dropdown-box-shadow: 0px 0 5px 0px rgba(var(--theme-dark-color-rgb), 0.3);
--theme-navbar-tab-dropdown-hover-mask: rgba(20,20,20, 0.25);
--theme-navbar-search-box-shadow: var(--theme-navbar-tab-dropdown-box-shadow);
--theme-navbar-search-input-background: rgba(20,20,20, 0.3);
--theme-navbar-search-input-border-color: rgba(13, 4, 2, 0.5) rgba(255,255,255, 0.1) rgba(255,255,255, 0.1) rgba(13, 4, 2, 0.5);
--theme-navbar-search-input-text-color: inherit;
--theme-navbar-search-button-background: var(--theme-button-background);
--theme-navbar-search-botton-border-color: var(--theme-button-border-color);
--theme-navbar-search-botton-text-color: var(--theme-text-color);
--theme-navbar-search-button-background-active: var(--theme-button-background-active);
--theme-navbar-search-botton-border-color-active: var(--theme-button-border-color-active);
--theme-navbar-search-botton-text-color-active: var(--theme-navbar-search-botton-text-color);
--theme-navbar-search-suggestions-background: rgba(31,46,71);
--theme-navbar-search-suggestions-border-color: var(--theme-content-border-color);
--theme-navbar-search-suggestions-text-color: var(--theme-text-color-em);
--theme-navbar-search-suggestions-text-color-hover: var(--theme-text-color-em);
--theme-navbar-search-suggestions-hover-mask: rgba(20,20,20, 0.25);
--theme-navbar-search-suggestions-results-border-bottom-color: rgb(10,10,10);
--theme-navbar-search-suggestions-special-offset-top: 0px; /* margin-top offset, normally is -1px */
--theme-navbar-search-suggestions-special-border-top-color: rgba(255,255,255, 0.1);
--theme-navbar-search-suggestions-special-label-text-color: var(--theme-text-color);
--theme-navbar-search-suggestions-special-label-text-color-hover: var(--theme-text-color);
/* responsive */
--theme-navbar-search-background: #60473b url(https://terraria.wiki.gg/images/5/5a/Navbar-background-overworld.jpg) repeat-x;
/*** content box ***/
--theme-content-background:rgba(31,46,71,0.85);
--theme-thumbimage-background: var(--theme-content-background);
--theme-content-border-bottom-width: 0;
--theme-content-border-style: solid;
--theme-content-border-color: #376E95;
--theme-content-subpage-icon-color: rgba(234,227,209,0.4); /* color for "<" */
--theme-content-heading-rule-border-top: 1px solid var(--theme-hr-color-A); /* border */
--theme-content-heading-rule-border-bottom: 1px solid var(--theme-hr-color-B);
/** category: box **/
--theme-content-category-background: #414d63;
--theme-content-category-border-style: solid;
--theme-content-category-border-color: #376E95;
/** notification **/
--theme-notification-background: url(https://terraria.wiki.gg/images/5/56/Notification-background-overworld.png);
--theme-notification-border-color: #cdab7b #562f21 #562f21 #cdab7b;
--theme-notification-shadow: 0px 0px 0px 0px rgb(var(--theme-shadow-color-rgb));
/*** #footer ***/
--theme-footer-text-color: #fff;
--theme-footer-background: rgba(31,46,71,0.85);
--theme-footer-border-top-width: 0;
--theme-footer-border-style: solid;
--theme-footer-border-color: var(--theme-content-border-color);
--theme-footer-box-shadow: inset var(--theme-box-shadow);
/* ------------------------------------------------------------------------- */
/* ========================================================================= */
/* OOUI variables start */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* These helper variables are defined for reuse in the variable definitions below */
--oouihelper--red: #d33;
--oouihelper--red-darker: #d73333;
--oouihelper--red-darkest: #b32424;
--oouihelper--red-lighter: #ff4242;
--oouihelper--red-lighter-transparent: rgba(240, 72, 72, 0.6); /* #f0484899 */
--oouihelper--red-lightest: #fee7e6;
--oouihelper--red-lightest-another: #f5c2c2;
--oouihelper--yellow: #fc3;
--oouihelper--yellow-darker: #ffd3bd;
--oouihelper--yellow-lighter:#fff0c2;
--oouihelper--yellow-lightest: #fef6e7;
--oouihelper--green: #14866d;
--oouihelper--green-darker: ;
--oouihelper--green-lightest: #d5fdf4;
--oouihelper--green-lighter:#b3e7dc;
--oouihelper--blue:#36c;
--oouihelper--blue-another: #3366cc;
--oouihelper--blue-lighter: #447ff5;
--oouihelper--blue-darker: #2a4b8d;
--oouihelper--blue-darker-another: #0645ad;
--oouihelper--blue-lightest: #eaf3ff;
--oouihelper--blue-lightest-another: #c2d1f0;
--oouihelper--black:#202122;
--oouihelper--black-another:#222;
--oouihelper--black-darker:#000;
--oouihelper--black-lighter: #404244;
--oouihelper--grey: #a2a9b1;
--oouihelper--grey-darker:#72777d;
--oouihelper--grey-darkest: #54595d;
--oouihelper--grey-lighter: #c8ccd1;
--oouihelper--grey-lightest: #eaecf0;
--ouuihelper--grey-another: #7b8590;
--oouihelper--white: #f8f9fa;
--oouihelper--white-lighter: #fff;
--oouihelper--white-darker: #eff3fa;
--ouuihelper--misc1:rgba(0, 36, 73, 21/255);
--ouuihelper--misc2:rgba(0, 24, 73, 7/255);
--ouuihelper--misc3:rgba(0, 0, 0, 0.25);
--ouuihelper--misc4:rgba(8, 126, 204, 0.1);
--ouuihelper--misc5:rgba(212, 83, 83, 0.1);
--ouuihelper--misc6:rgba(51, 102, 204, 0.5);
--ouuihelper--misc7:rgba(0, 0, 0, 0.1);
--ouuihelper--misc8:rgba(0, 23, 70, 0.08599999999999999);
--oouihelper--progressive: #9fecf0;
--oouihelper--progressive-transparent: rgba(159, 236, 240, 0.6); /* #9fecf099; */
--oouihelper--progressive-lighter: #a7eef1;
--oouihelper--disabled: #b3b3b3;
--oouihelper--disabled-lighter-transparent: rgba(196, 196, 196, 0.5);
--oouihelper--disabled-darker-transparent: rgba(128, 128, 128, 0.5);
--oouihelper--borderdark: #000;
--oouihelper--borderdark-lighter: #0e0c0c;
--oouihelper--borderdark-hover: #72777d;
--oouihelper--borderdark-focus: var(--oouihelper--progressive);
--oouihelper--textinput-background: rgba(20, 20, 20, 0.65);
--oouihelper--textinput-background-lighter: rgba(30, 30, 30, 0.65);
--oouihelper--textinput-background-darker: rgba(20, 20, 20, 0.9);
--oouihelper--placeholdertext: rgba(234, 227, 209, 0.4);
--oouihelper--themerelated: #a58350;
--oouihelper--themerelated-lighter: #cdab78;
--oouihelper--themerelated-lighter-transparent: rgba(171, 120, 84, 0.6);
--oouihelper--themerelated-lightest: #e6dbcb;
--oouihelper--themerelated-darker: #785f3a;
--oouihelper--themerelated-darkest: #342919;
--oouihelper--themerelated-disabled: rgba(230, 219, 203, 0.25);
--oouihelper--themerelated-disabled-lighter: rgba(238, 231, 221, 0.25);
--oouihelper--text-background: #2c2421;
/* Actual OOUI variables, grouped by element type */
/* misc */
--ooui--inlinehelp-color: var(--theme-text-color-note);
--ooui--disabled-color: var(--oouihelper--disabled);
/* all buttons */
--ooui--button-background--hover: #7b573d url(https://terraria.wiki.gg/images/d/d4/Button-background-overworld.jpg) center center / cover repeat-x;
--ooui--button-background: linear-gradient(rgba(20, 20, 20, 0.2), rgba(20, 20, 20, 0.2)), var(--ooui--button-background--hover);
--ooui--button-box-shadow: rgba(10, 10, 10, 0.5) 0px 0px 0px;
--ooui--button-box-shadow--focus: inset var(--oouihelper--themerelated-lighter-transparent) 0 0 0 0px;
/* "normal" button */
--ooui--button-background: rgba(0,24,73,7/255);
--ooui--button-border--focus: #36c;
--ooui--button-border--hover: #72777d;
--ooui--button-border-right--hover: 1px solid rgb(86, 47, 33);
--ooui--button-border-bottom--hover: var(--ooui--button-border-right--hover);
--ooui--button-border-left--hover: var(--ooui--button-border-top--hover);
--ooui--button-color: var(--theme-text-color);
--ooui--button-color--hover: #000;
--ooui--button-color--active: #000;
--ooui--button-box-shadow---focus: inset 0 0 0 1px #36c;
/* "progressive" button */
--ooui--button-progressive-color: #36c;
--ooui--button-progressive-color--hover: #447ff5;
--ooui--button-progressive-color--active: #2a4b8d;
--ooui--button-progressive-box-shadow--focus: inset var(--oouihelper--progressive-transparent) 0 0 0 2px;
--ooui--button-border--active: #2a4b8d;
--ooui--button-progressive-primary-border-color: var(--oouihelper--progressive);
--ooui--button-progressive-primary-border-color--hover: var(--oouihelper--progressive-lighter);
/* "destructive" button */
--ooui--button-destructive-color: #d33;
--ooui--button-destructive-color--hover: #ff4242;
--ooui--button-destructive-color--active: #b32424;
--ooui--button-destructive-box-shadow--focus: inset var(--oouihelper--red-lighter-transparent) 0 0 0 2px;
--ooui--button-border--active: #b32424;
--ooui--button-destructive-primary-border-color: var(--oouihelper--red-lighter);
--ooui--button-destructive-primary-border-color--hover: var(--oouihelper--red-lightest);
/* disabled button */
--ooui--button-disabled-color--frameless: #72777d;
--ooui--button-disabled-color: #fff;
--ooui--button-disabled-background: #c8ccd1;
--ooui--button-disabled-border: #c8ccd1;
--ooui--button-disabled-border-right: 1px solid rgba(70, 53, 47, 0.7);
--ooui--button-disabled-border-bottom: var(--ooui--button-disabled-border-right);
--ooui--button-disabled-border-left: var(--ooui--button-disabled-border-top);
/* framed button */
--ooui--button-framed-background: #f8f9fa;
--ooui--button-framed-background--hover:#fff;
--ooui--button-framed-color: var(--theme-text-color);
--ooui--button-framed-color--hover: #404244;
--ooui--button-framed-border--hover: #a2a9b1;
--ooui--button-framed-border:#a2a9b1;
--ooui--button-border-top--focus: #36c;
--ooui--button-framed-box-shadow--focus: inset 0 0 0 1px #36c;
/* frameless button */
--ooui--button-frameless-on-color: var(--theme-text-color-highlight);
/* textarea */
--ooui--textarea-background-color: var(--oouihelper--textinput-background);
--ooui--textarea-placeholder-color: var(--oouihelper--placeholdertext);
--ooui--textarea-border-color: var(--oouihelper--borderdark);
--ooui--textarea-border-color--hover: var(--oouihelper--borderdark-hover);
--ooui--textarea-border-color--focus: var(--oouihelper--borderdark-focus);
--ooui--textarea-invalid-border-color: var(--oouihelper--red-lighter);
--ooui--textarea-readonly-background-color: var(--oouihelper--textinput-background-darker);
--ooui--textarea-disabled-color: var(--oouihelper--disabled);
--ooui--textarea-disabled-border-color: var(--oouihelper--disabled-lighter-transparent);
--ooui--textarea-disabled-background-color: var(--oouihelper--disabled-darker-transparent);
--ooui--textarea-pending-background-color-1: rgba(20, 20, 20, 0.9);
--ooui--textarea-pending-background-color-2: #000;
/* checkbox */
--ooui--checkbox-border-color: var(--oouihelper--themerelated);
--ooui--checkbox-border-color--hover: var(--oouihelper--themerelated-lighter);
--ooui--checkbox-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Echeck%3C/title%3E%3Cg fill=%22%23a58350%22%3E%3Cpath d=%22M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z%22/%3E%3C/g%3E%3C/svg%3E"); /* set the part between "fill=%22%23" and "%22" to the desired hexcode */
--ooui--checkbox-icon--hover: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Echeck%3C/title%3E%3Cg fill=%22%23cdab78%22%3E%3Cpath d=%22M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z%22/%3E%3C/g%3E%3C/svg%3E");
--ooui--checkbox-box-shadow--focus: var(--oouihelper--themerelated-darkest);
--ooui--checkbox-disabled-background-color: var(--oouihelper--themerelated-disabled);
--ooui--checkbox-disabled-icon: var(--ooui--checkbox-icon);
/* radiobutton */
--ooui--radiobutton-border-color: var(--oouihelper--themerelated);
--ooui--radiobutton-border-color--hover: var(--oouihelper--themerelated-lighter);
--ooui--radiobutton-box-shadow--focus: var(--oouihelper--themerelated-darkest);
--ooui--radiobutton-disabled-background-color: var(--oouihelper--themerelated-disabled);
/* toggleswitch */
--ooui--toggleswitch-border-color: var(--oouihelper--themerelated);
--ooui--toggleswitch-border-color--hover: var(--oouihelper--themerelated-lighter);
--ooui--toggleswitch-color--active: var(--oouihelper--themerelated-darker);
--ooui--toggleswitch-grip-color: var(--oouihelper--themerelated-lightest);
--ooui--toggleswitch-box-shadow--focus: var(--oouihelper--themerelated-darkest);
--ooui--toggleswitch-disabled-background-color: var(--oouihelper--themerelated-disabled);
--ooui--toggleswitch-disabled-grip-color: var(--oouihelper--themerelated-disabled-lighter);
/* dropdown */
--ooui--dropdown-background-color: var(--oouihelper--textinput-background);
--ooui--dropdown-background-color--hover: var(--oouihelper--textinput-background-lighter);
--ooui--dropdown-border-color: var(--oouihelper--borderdark);
--ooui--dropdown-border-color--hover: var(--oouihelper--borderdark-hover);
--ooui--dropdown-border-color--focus: var(--oouihelper--borderdark-focus);
--ooui--dropdown-disabled-color: var(--oouihelper--disabled);
--ooui--dropdown-disabled-border-color: var(--oouihelper--disabled-lighter-transparent);
--ooui--dropdown-disabled-background-color: var(--oouihelper--disabled-darker-transparent);
/* selectfile */
--ooui--selectfile-border-color: #72777d;
--ooui--selectfile-background-color: var(--oouihelper--textinput-background);
--ooui--selectfile-candrop-background-color: #514743;
/* tag item */
--ooui--tagitem-background-color: rgba(20, 20, 20, 0.75);
--ooui--tagitem-border-color: var(--oouihelper--borderdark);
--ooui--tagitem-border-color--hover: var(--oouihelper--borderdark-hover);
--ooui--tagitem-border-color--focus: var(--oouihelper--themerelated-darkest);
--ooui--tagitem-invalid-border-color: var(--oouihelper--red-lighter);
--ooui--tagitem-color--hover: #efeadc;
--ooui--tagitem-disabled-color: var(--oouihelper--disabled);
--ooui--tagitem-disabled-border-color: var(--oouihelper--disabled-lighter-transparent);
--ooui--tagitem-disabled-background-color: rgba(20, 20, 20, 0.5);
/* multioption */
--ooui--multioption-disabled-color: var(--oouihelper--disabled);
/* progressbar */
--ooui--progressbar-border-color: var(--oouihelper--themerelated);
--ooui--progressbar-bar-background-color: var(--oouihelper--themerelated);
--ooui--progressbar-disabled-border-color: var(--oouihelper--themerelated-disabled);
--ooui--progressbar-pending-background-color-1: #7a6a52;
--ooui--progressbar-pending-background-color-2: #4d4233;
/* messagewidget */
--ooui--messagewidget-notice-background-color: #4e3a32;
--ooui--messagewidget-notice-border-color: #2f231e;
--ooui--messagewidget-error-background-color: var(--oouihelper--red);
--ooui--messagewidget-error-border-color: var(--oouihelper--red-darker);
--ooui--messagewidget-error-color: var(--oouihelper--red-lighter);
--ooui--messagewidget-warning-background-color: var(--oouihelper--yellow);
--ooui--messagewidget-warning-border-color: var(--oouihelper--yellow-darker);
--ooui--messagewidget-success-background-color: var(--oouihelper--green);
--ooui--messagewidget-success-border-color: var(--oouihelper--green-darker);
--ooui--messagewidget-success-color: var(--oouihelper--green-lighter);
/* menuselectwidget */
--ooui--menuselect-background-color: var(--oouihelper--text-background);
--ooui--menuselect-selected-background-color: var(--oouihelper--textinput-background-darker);
--ooui--menuselect-highlighted-background-color: var(--oouihelper--textinput-background-lighter);
--ooui--menuselect-border-color: var(--oouihelper--borderdark);
--ooui--menusectionoption-color: var(--oouihelper--placeholdertext);
/* tabselectwidget */
--ooui--tabselect-background-color: var(--oouihelper--text-background);
--ooui--tabselect-selected-background-color: var(--theme-content-background);
--ooui--tabselect-highlighted-background-color: var(--oouihelper--textinput-background-lighter);
--ooui--tabselect-frameless-box-shadow-color: var(--oouihelper--borderdark-lighter);
--ooui--tabselect-frameless-selected-color: var(--theme-link-color);
--ooui--tabselect-frameless-selected-box-shadow-color: var(--theme-link-color);
--ooui--tabselect-frameless-highlighted-color: #bcd1d2;
--ooui--tabselect-frameless-highlighted-box-shadow-color: #bcd1d2;
--ooui--taboption-color: var(--oouihelper--placeholdertext);
/* outlineselectwidget */
--ooui--outlineselect-box-shadow--focus: inset var(--oouihelper--themerelated-lighter-transparent) 0 0 0 2px;
--ooui--outlineoption-background-color: var(--oouihelper--text-background);
--ooui--outlineoption-border-color: var(--oouihelper--borderdark);
--ooui--outlineoption-selected-background-color: var(--oouihelper--textinput-background-darker);
--ooui--outlineoption-highlighted-background-color: var(--oouihelper--textinput-background-lighter);
--ooui--outlineoption-pressed-background-color: #22292a;
/* popupwidget */
--ooui--popup-background-color: var(--oouihelper--text-background);
--ooui--popup-border-color: var(--oouihelper--borderdark);
/* layouts */
--ooui--bookletlayout-border-color: var(--oouihelper--borderdark);
--ooui--panellayout-border-color: var(--oouihelper--borderdark);
/* dialog */
--ooui--dialog-border-color: var(--oouihelper--borderdark);
--ooui--dialog-border-color--lighter: var(--oouihelper--borderdark-lighter);
/* window */
--ooui--window-background-color: var(--oouihelper--text-background);
--ooui--window-border-color: var(--oouihelper--borderdark);
/* indicators */
/* tools like https://isotropic.co/tool/hex-color-to-css-filter/ allow converting the desired color into a filter */
--ooui--indicator-filter: /*brightness(0) invert(90%) sepia(28%) saturate(107%) hue-rotate(5deg) brightness(96%) contrast(93%)*/;
--ooui--indicator-invert-filter: brightness(0);
/* icons */
--ooui--icon-normal-filter: /*brightness(0) invert(90%) sepia(28%) saturate(107%) hue-rotate(5deg) brightness(96%) contrast(93%)*/;
--ooui--icon-progressive-filter: /*brightness(0) invert(90%) sepia(21%) saturate(662%) hue-rotate(140deg) brightness(99%) contrast(91%)*/;
--ooui--icon-destructive-filter: /*brightness(0) invert(33%) sepia(27%) saturate(2948%) hue-rotate(329deg) brightness(116%) contrast(91%)*/;
--ooui--icon-invert-filter: /*brightness(0)*/;
--ooui--icon-success-filter: /*brightness(0) invert(76%) sepia(47%) saturate(4832%) hue-rotate(101deg) brightness(101%) contrast(101%)*/; /* #00e673 */
--ooui--icon-warning-filter: /*brightness(0) invert(81%) sepia(89%) saturate(585%) hue-rotate(323deg) brightness(96%) contrast(112%)*/; /* #ffcc33 */
--ooui--icon-error-filter: /*brightness(0) invert(56%) sepia(62%) saturate(4943%) hue-rotate(329deg) brightness(91%) contrast(108%)*/; /* #f04848 */
/* ------------------------------------------------------------------------- */
/* ========================================================================= */
/* OOUI variables end */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/******* "real" wiki content ********/
--theme-widget-toc-arrow-color: rgba(234,227,209, 0.5);
--theme-widget-toc-arrow-color-hover: rgba(234,227,209);
--theme-widget-toc-item-hover-background: rgba(20,20,20, 0.25);
--theme-collapsible-toggle-icon-color: var(--theme-text-color-note);
--theme-collapsible-toggle-icon-color-hover: var(--theme-link-color-hover);
}
/**** Theme vars END ***********************************************************/
/* Extension:SyntaxHighlight */
/* ("SyntaxHighlight_GeSHi") */
.mw-highlight pre {
margin-top: 1em;
background: #282828 !important;
color:#fff !important;
overflow: auto; /* scroll if needed */
}
.mw-highlight, .kw1 {
color: #FFFFFF;
font-weight: bold;
}
.mw-highlight .nf {
color: aqua;
}
/* Operators */
.mw-highlight .p,
.mw-highlight .o {
color: #fff;
font-weight: bold;
}
/* Comments */
.mw-highlight .c {
color: #8d9e6b;
font-weight: bold;
}
/* HTML Tags */
.mw-highlight .nt {
color: #bfe431;
}
/* IDs */
.mw-highlight .nn {
color: #a8a8ff;
}
/* Classes */
.mw-highlight .nc {
color: #7676ff;
}
/* Pseudo-classes */
.mw-highlight .nd {
color: #cf82ff;
}
/* Properties */
.mw-highlight .k,
.mw-highlight .kp {
color: #fff;
font-weight: normal;
}
/* Keywords */
.mw-highlight .nb {
color: #ff5858;
}
/* Text values, strings */
.mw-highlight .kc,
.mw-highlight .s1,
.mw-highlight .s2,
.mw-highlight .sx,
.mw-highlight .n {
color: #00c6d2;
}
/* Numeric values */
.mw-highlight .mi,
.mw-highlight .mf {
color: #60feff;
font-weight: bold;
}
/* Units */
.mw-highlight .kt {
color: #ff3f85;
font-weight: bold;
}
/* #Color values */
.mw-highlight .mh {
color: #b2d241;
}
/* !important */
.mw-highlight .cp {
color: #F37F20;
}
/* JS generic */
.mw-highlight .nx {
color: #a8a8ff;
}
.mw-highlight .nv {
color: #fff;
}
/* Highlighted lines */
.mw-highlight .hll {
background-color: #50503e;
}
/* Highlight fields inside code class (e.g. Template:Code) */
code.mw-highlight {
background: var(--theme-page-background-color);
color: var(--theme-text-color);
}
/**** ponybox ****/
html:root {
--theme-ponybox-inline-link-color: #6699ff;
--theme-ponybox-color: white;
--theme-ponybox-border-header-background-color: #005082;
--theme-ponybox-background-color: #146ea0;
--theme-ponybox-link-color: #6699ff;
--theme-ponybox-yellow-color: #ffcd51;
--theme-ponybox-inline-color: #e6e6e6;
--theme-ponybox-inline-background-color:#1f2e47;
--theme-ponybox-inline-border-color:#6ed7fa;
--theme-ponybox-inline-header-background-color:#3a93bd;
--theme-ponybox-inline-hr-background-color:#ccc;
--theme-ponybox-inline-subheading-color:#f2f2f2;
}
/**** navbox ****/
html:root {
--theme-navbox-border: #A2A9b1;
--theme-navbox-background: #1F2E47; /*(31,46,71)*/
--theme-navbox-level1: #376E95;
--theme-navbox-level2: #523073;
--theme-navbox-level3: #49428F;
--theme-navbox-level4: #39346D;
--theme-navbox-even: #2A3B59;
}
/**** ponybox ****/
html:root {
--theme-ponybox-inline-link-color: #6699ff;
--theme-ponybox-color: white;
--theme-ponybox-border-header-background-color: #005082;
--theme-ponybox-background-color: #146ea0;
--theme-ponybox-link-color: #6699ff;
--theme-ponybox-yellow-color: #ffcd51;
--theme-ponybox-inline-color: #e6e6e6;
--theme-ponybox-inline-background-color:#1f2e47;
--theme-ponybox-inline-border-color:#6ed7fa;
--theme-ponybox-inline-header-background-color:#3a93bd;
--theme-ponybox-inline-hr-background-color:#ccc;
--theme-ponybox-inline-subheading-color:#f2f2f2;
}
/**** frontpage ****/
html:root{
--theme-frontpage-background:#222e5b;
--theme-frontpage-border:#376E95;
}
/**** tech cell gradient ****/
/* tech tree cells */
html:root{
--techgradient-border: #376E95;
--techgradient-background: #1f2e47;
--techgradient1-background: linear-gradient(to right, var(--techgradient-background), #286C34);
--techgradient2-background: linear-gradient(to right, var(--techgradient-background), #6F1E1E);
--techgradient3-background: linear-gradient(to right, var(--techgradient-background), #9F9533);
}
/**** mildtable/wikitable ****/
html:root{
--mild-header-background: #141f33;
--mild-cell-top-border: #303b8d;
}
.wikitable{
background-color:#1f2e47;
border:1px solid #376E95;
color: #e6e6e6;
}
.wikitable td,
.wikitable th,
.wikitable > * > tr > th,
.wikitable > * > tr > td{
border:1px solid #376E95;
}
.wikitable th,
.wikitable > * > tr > th{
background-color:#242d6f
}
/**** infobox ****/
html:root {
--infobox-border:#376E95;
--infobox-background:#242d6f;
--infobox-color: var(--theme-text-color);
}