MediaWiki:Theme-light.css

:root {
	--text-color: #0e191a;
	--text-color-2: #44474e;
	--text-color-3: #24201e;
	--text-color-4: #182546;
	--text-color-5: #101420;
	--text-color-6: #313950;
	--text-color-7: #1a233c;
	--primary-1: #fff4ef;
	--primary-2: #90a2bf;
	--primary-3: #4f6087;
	--primary-4: #bec9da;
	--primary-5: #f5dfd4;
	--primary-6: #ddd8d5;
	--primary-7: #ebe3e0;
	--primary-8: #777f95;
	--primary-9: #304275;
	--primary-10: #fbeeeb; /*f7e5e0*/
    --primary-11: #fbeeea; /*ebdbd6*/
    --primary-12: #f7eeeb; /*ddc6bf*/
    --primary-13: #e3d6d2;
	--primary-14: #224a75;
	--primary-15: #091c50;
	--primary-16: #b9b0ad;
	--primary-17: #2e4074;
	--primary-18: #e9e0dc;
	--primary-19: #2d417a;
	--primary-20: #22397a;
	--accent-1: #556375;
	--accent-2: #47639E;
	--accent-3: #46619b;
	--accent-4: #334671;
	--accent-5: #324b83;
	--accent-6: #506593;
    --accent-7: #2a498a;
	--accent-8: #324268;
    --accent-9: #425278;
    --accent-10: #3d5c7d;
    --accent-11: #27394c;
	--accent-12: #5b6a8e;
	--accent-13: #3b4660;
	--accent-14: #264a70;
	--accent-15: #858da7;
	--accent-16: #7793b1;
	--accent-17: #303a4c;
	--accent-18: #354d91;
	--alt-text-color: #ffffff;
	--alt-text-color-2: #e9ebf1;
	--alt-text-color-3: #bec7d9;
    --alt-text-color-4: #dadfe8;
	--contrast-color-1: #6b778f;
	--contrast-color-1--rgb: 107,119,143;
	--contrast-color-2: #2d2724;
	--contrast-color-2--rgb: 45,39,36;
	--contrast-color-3: #687a99;
	--contrast-color-3-rgb: 104,122,153;
	--contrast-color-4: #737f92;
    --contrast-color-5: #687a99;
	--contrast-color-5-rgb: 104,122,153;
    --contrast-color-6: #bec7d9;
    --contrast-color-6-rgb: 190,199,217;
    --contrast-color-7: #4a628c;
    --contrast-color-8: #b8c2d4;
    --contrast-color-9: #3f4a5c;
    --contrast-color-10: #cdc7c5;
    --contrast-color-11: #aeafba;
    --contrast-color-12: #a5a6b7;
    --contrast-color-13: #a0a2b1;
    --contrast-color-14: #717381;
    --contrast-color-15: #212e42;
    --contrast-color-16: #030d3a;
    --contrast-color-17: #535676;
    --contrast-color-18: #3c4854;
	--border-shade: #ffffff;
	--border-shade-2: #002c91;
	--background-contrast-shade: #e0e0e2;
	--background-contrast-shade-2: #d2d2d2; /*exclusive to light mode #799be9*/
		--integrate-sections: 0.153em 1.2px 0 var(--contrast-color-1) inset,0px -2px 0 6px var(--contrast-color-11);
		--integrate-sections-2: 0.113em 1.2px 0 var(--contrast-color-1) inset,-2px -1px 0 6.9px var(--contrast-color-11),-4px -3px 0 7px var(--contrast-color-14),-4px 1.9px 0 7px var(--contrast-color-14);
		--subtle-shadow-1: drop-shadow(-6.04px -3.3px 17.7px #06173561);
		--stub-tab: -3.5px -1px 0 5px var(--primary-7),3.7px -1px 0 5px var(--primary-7),-3.5px -1px 0 7px var(--contrast-color-11),3.7px -1px 0 7px var(--contrast-color-11)!important;
		--category-box-1: 0 12px 0 0 #4e6795, -73px 0 0 0 #2b4778 inset, 0 -10px 0 0 #415b87, 0 -35px 0 #4b699b, -240px 8px 0 #77849bd6, 30px 0 0 #7685a3, 30px -20px 0 #374764d9, -222px -15px 12px 20px #486293d9, -30px -37px 0 #335eb9, -30px -37px 0 #516891, 68.4em -47px 0 #6f88b3;
		--category-box-2: -99em 3.12em #2d4670e3, -69.6em 1.92em #3a5a91e3, -99em 1.396em 0 -1.26em #243654b0, 0 -0.91em 0 #7187a9d6 inset, -105em 2.09em 0 #7187a9d6;
}
#menus-cover {
	background-position-x: 298.394em;
    opacity: .69;
    filter: brightness(0.99) hue-rotate(226deg) contrast(1.1) blur(.45px);
}

#mw-content {
	border-color: var(--primary-6);
    filter: var(--subtle-shadow-1);
}
.skin-timeless a, .skin-timeless .mw-parser-output a.external, .skin-timeless .mw-parser-output a.extiw {
    color: var(--primary-20);
}
#mw-site-navigation .timeless-logo img {
    filter: drop-shadow(-1.04px 0px 3.9px #213250) saturate(.94) brightness(1.37) opacity(0.93) hue-rotate(338deg);
}
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
    border-top-right-radius: 1px;
    border-bottom-right-radius: 1px;
    left: 4.5px;
    /* background: var(--contrast-color-10);
    border-color: var(--primary-7); */
    border-color: var(--contrast-color-5);
    background: var(--primary-10);
    filter: var(--subtle-shadow-1);
}
@media screen and (min-width: 1100px) {
	#mw-site-navigation .sidebar-chunk,
	#mw-related-navigation .sidebar-chunk {
    	border-color: var(--contrast-color-13);
	      -moz-box-shadow: var(--integrate-sections);
	   -webkit-box-shadow: var(--integrate-sections);
	        -o-box-shadow: var(--integrate-sections);
	       -ms-box-shadow: var(--integrate-sections);
	           box-shadow: var(--integrate-sections);
	}
}
#mw-site-navigation .sidebar-chunk h3,
#mw-related-navigation .sidebar-chunk h3 {
    color: var(--contrast-color-17);
    font-weight: bold;
    padding-bottom: 6px;
    border-bottom-color: var(--primary-16)!important;
}
#mw-site-navigation .sidebar-chunk a,
#mw-related-navigation .sidebar-chunk a {
	color: var(--text-color-4);
}
#mw-site-navigation .sidebar-chunk#site-navigation a {
	color: var(--text-color-2);
}

.sidebar-chunk#page-tools .mw-inputbox-centered .mw-ui-input {
      -moz-box-shadow: 0 0 0 2.9px #8c8fa7,0 0 0 5.19px var(--primary-8);
   -webkit-box-shadow: 0 0 0 2.9px #8c8fa7,0 0 0 5.19px var(--primary-8);
        -o-box-shadow: 0 0 0 2.9px #8c8fa7,0 0 0 5.19px var(--primary-8);
       -ms-box-shadow: 0 0 0 2.9px #8c8fa7,0 0 0 5.19px var(--primary-8);
           box-shadow: 0 0 0 2.9px #8c8fa7,0 0 0 5.19px var(--primary-8);
}

.sidebar-chunk#page-tools .mw-inputbox-centered .mw-ui-button {
    background: #697798;
    background: #6977989e;
    border: solid 2px var(--primary-8);
     -moz-box-shadow: 0 0 0 2.06px #d9d9db;
  -webkit-box-shadow: 0 0 0 2.06px #d9d9db;
       -o-box-shadow: 0 0 0 2.06px #d9d9db;
      -ms-box-shadow: 0 0 0 2.06px #d9d9db;
          box-shadow: 0 0 0 2.06px #d9d9db;
    color: #dfe0e5;
}

.skin-timeless .mw-parser-output > h2 {
    border-color: var(--contrast-color-15);
    margin-left: -5px;
}
.skin-timeless .mw-body .mw-parser-output > h2:after {
    border-color: var(--primary-8);
}
.skin-timeless .ns-0 .mw-parser-output > h2 {
    background: var(--primary-11);
    box-shadow: -14px 0 var(--primary-11);
}
.skin-timeless .mw-parser-output > h2 {
	margin-left: 0.14em;
    font-weight: bold;
    color: var(--contrast-color-18);
}
.skin-timeless .mw-parser-output > h3 {
	text-transform: uppercase;
    font-weight: 700;
    font-size: 18.83px;
    color: var(--accent-13);
}
.skin-timeless .mw-parser-output > h3 + h4 {
    margin-top: -13.12px;
}
.skin-timeless .mw-parser-output > h4 {
    color: var(--text-color-6);
}
.skin-timeless .mw-parser-output > h5, .skin-timeless .mw-parser-output > h6 {
    color: var(--text-color-7);
}
.skin-timeless .mw-parser-output > h3, .mw-parser-output > h4,
.skin-timeless .mw-parser-output > h5, .mw-parser-output > h6 {
    border-color: var(--contrast-color-16);
}

ul#filetoc, .toc, .toccolours, .mw-warning {
    border-color: var(--primary-8);
    margin-right: -0.601em;
    margin-top: -0.19em;
    margin-left: 0.74em;
}
.skin-timeless .gallery {
	margin-bottom: 20.4px;
	margin-left: 5.008px;
}
.skin-timeless li.gallerybox {
    border-color: var(--accent-17);
    background: var(--primary-14);
    background: var(--accent-6);
    box-shadow: 0 -4.04px 0 4px var(--accent-12), 0 6.02px 0 4px var(--accent-12), 1.82px 21.38px 0 2.2px #717b9d;
    min-height: 189.4px;
}
.skin-timeless .gallerytext p {
    margin: -0.5em 0 0.57em 0em;
    background: var(--primary-6);
    padding: 0.5em 0.23293em 0.1em 0.41em;
	filter: brightness(1.14);
}
.gallerytext p a {
    color: var(--accent-18);
    font-weight: bold;
    filter: brightness(0.86);
}
.skin-timeless li.gallerybox:not:nth-child(1),
.skin-timeless li.gallerybox:not:nth-child(2),
.skin-timeless li.gallerybox:not:nth-child(3) {
    box-shadow: 0 0 0 4px var(--accent-12), 0 18.26px 0 4px var(--accent-12);
}
.skin-timeless li.gallerybox:nth-last-child(4),
.skin-timeless li.gallerybox:nth-last-child(3),
.skin-timeless li.gallerybox:nth-last-child(2) {
    box-shadow: 0 0 0 4px var(--accent-12), 0 8.26px 0 4px var(--accent-12), 3.82px 18.38px 0 2.2px var(--accent-15);
}
.skin-timeless li.gallerybox:nth-child(2),
.skin-timeless li.gallerybox:nth-child(3n+2) {
    position: relative;
    z-index: 2;
}
.skin-timeless li.gallerybox:nth-child(3n+1) {
    position: relative;
    z-index: 2;
}
.skin-timeless li.gallerybox:nth-child(3n+2) {
    z-index: 3;
}
.skin-timeless li.gallerybox:nth-child(2):nth-last-child(4),
.skin-timeless li.gallerybox:nth-child(3n+2):nth-last-child(4),
.skin-timeless li.gallerybox:nth-child(2):nth-last-child(3),
.skin-timeless li.gallerybox:nth-child(3n+2):nth-last-child(3),
.skin-timeless li.gallerybox:nth-child(2):nth-last-child(2),
.skin-timeless li.gallerybox:nth-child(3n+2):nth-last-child(2),
.skin-timeless li.gallerybox:nth-child(2):nth-last-child(1),
.skin-timeless li.gallerybox:nth-child(3n+2):nth-last-child(1) {
    box-shadow: 0 0 0 4px var(--accent-12), 0 8.26px 0 4px var(--accent-12), 2px 18.38px 0 2px var(--accent-15);
}
.skin-timeless li.gallerybox:nth-child(3n):nth-last-child(2) {
    box-shadow: 0 0 0 4px var(--accent-12), 0 8.26px 0 4px var(--accent-12), 1.28px 17.44px 0 2.2px var(--accent-15);
}
.skin-timeless li.gallerybox:nth-last-child(1) {
    box-shadow: 0 0 0 4px var(--accent-12), 0 8.26px 0 4px var(--accent-12), 1.28px 18.44px 0 2.2px var(--accent-15);
}
div.mw-edit-longpagewarning, div.mw-editinginterface, div.mw-warning-with-logexcerpt {
    background-color: var(--primary-6);
}
.toctogglelabel {
    color: var(--primary-1);
    font-size: 1.052em;
}

.mw-parser-output > #subpage-article ~ .pullout-wrapper,
.mw-parser-output > .content-table-wrapper:first-child ~ .pullout-wrapper {
      -moz-box-shadow: -20px 0 0 0 var(--primary-7) inset;
   -webkit-box-shadow: -20px 0 0 0 var(--primary-7) inset;
        -o-box-shadow: -20px 0 0 0 var(--primary-7) inset;
       -ms-box-shadow: -20px 0 0 0 var(--primary-7) inset;
           box-shadow: -20px 0 0 0 var(--primary-7) inset;
}
.pullout-handle {
   	background-color: var(--accent-4);
}
.pullout-wrapper ~ .portable-infobox .pi-title,
.pullout-wrapper ~ .portable-infobox .pi-title p {
   	background: var(--accent-6);   
}

#personal h2,
.tocnumber {
	filter: invert(1) hue-rotate(180deg);
}
div.editOptions {
	color: var(--alt-text-color);
}
.mw-footer-container a {
	color: var(--primary-1);
}
#p-banner.mw-wiki-title {
	color: var(--alt-text-color);
}
#p-themes, #p-themes-label, .vector-menu-content-list .mw-list-item a {
	color: var(--alt-text-color);
}
#p-themes-label::after {
	background-color: var(--alt-text-color);
}

/*.mw-portlet-body a {
    color: #ddcfae;
} */

.mw-editsection a {
    color: var(--accent-2);
}

.subpage-tabs-tab {
    background-color: var(--accent-2);
}
.skin-timeless .subpage-tabs-main a {
    color: var(--alt-text-color);
}
.subpage-tabs-main a:visited, .subpage-tabs-main a:hover:visited {
    color: var(--alt-text-color-2);
}
.portable-infobox {
    margin-top: 1.5px; /*light mode only*/
}
.mw-parser-output h2 .mw-headline {
    margin-left: -1px; /*light mode only*/
}

.skin-timeless .mw-dismissable-notice,
.skin-timeless #localNotice {
    background: var(--primary-7);
    border-color: var(--primary-8);
    color: var(--text-color-2);
}
.skin-timeless .mw-dismissable-notice a, .skin-timeless #localNotice a,
.skin-timeless .mw-dismissable-notice a:visited, .skin-timeless #localNotice a:visited {
    color: var(--primary-9);
}
.skin-timeless .smw-editpage-help,
.skin-timeless #box {
    background-color: var(--primary-7);
    border: 2px solid var(--accent-1);
}
.skin-timeless smw-editpage-help a,
.skin-timeless #box a {
    color: var(--accent-14);
}

#content-bottom-stuff {
    background: var(--primary-5);
    filter: saturate(0.7);
}
#content-bottom-stuff .catlinks {
    background: var(--primary-2);
}
#content-bottom-stuff .catlinks a {
    color: var(--alt-text-color-2);
	filter: saturate(1.1) brightness(0.7);
}

.skin-timeless .mw-footer-container {
	color: black;
}

@media screen and (min-width: 851px) and (max-width: 1099px) {

    .skin-timeless #mw-site-navigation {
        z-index: 2;
    }
    .skin-timeless #mw-header-container {
        z-index: 200;
    }
    #mw-header-nav-hack {
        min-height: 12em;
        background: var(--background-image);
        filter: brightness(0.99) hue-rotate(216deg) contrast(1.1) blur(.45px);
        z-index: -1;
        position: absolute;
    }
    #mw-header-nav-hack .color-bar {
        background: #d99c9c66;
        margin-top: 0;
        height: 14.5em;
    }
    .skin-timeless #mw-content-container {
        margin-top: 6.8em!important;
    }
    
    #mw-site-navigation .sidebar-chunk,
    #mw-related-navigation .sidebar-chunk {
        border-color: var(--alt-text-color);
    }
    .sidebar-chunk#page-tools .mw-inputbox-centered {
        position: absolute;
        top: -3.08em!important;
    }
    #mw-related-navigation .sidebar-chunk#catlinks-sidebar {
        margin-top: -0.42em!important;
    }
    .skin-timeless .mw-dismissable-notice {
        /* left: 1.4em; */
    }
	
    .skin-timeless #mw-content-container {
        background: #4d5f7c; /*will save as variable later*/
    }
    .skin-timeless .mw-footer {
        background: #1e3c75b3;
        color: var(--alt-text-color-3);
    }
    .skin-timeless .mw-footer-container a,
    .skin-timeless .mw-footer-container a:hover {
        color: var(--alt-text-color);
    }
}

.mainpage-box-about .header,
.mainpage-box-characters .header,
.mainpage-box-how-to-DW .header,
.mainpage-box-featured-videos .header,
.mainpage-box-series .header {
    color: var(--accent-7);
    border-bottom-color: var(--accent-1);
}
.mainpage a,
.mainpage a: link {
    color: var(--primary-3)!important;
}
.mainpage-box-welcome a,
.mainpage-box-welcome a:link,
.mainpage-box-welcome a:visited {
    color: black!important;
}

#mw-previewheader {
    background: var(--accent-6);
    color: var(--primary-7);
    padding-top: 6px;
    margin-top: -7.8px;
    border-bottom-color: var(--accent-2);
    margin-bottom: -2.21px;
}
.mw-message-box-warning {
    background: var(--primary-7);
    border-color: var(--accent-6);
    color: var(--accent-9);
}
.mw-message-box-warning strong {
    color: var(--primary-14);
}
.mw-message-box-warning a {
    color: var(--primary-14);
    font-size: 1.21464em;
    font-weight: 580;
}

@media screen and (min-width: 1340px) {
	#menus-cover {
    	background-position-x: 334.402em;
	}
	#mw-content {
    	margin-right: -0.9138vw;
    	left: 6.18px;
	}
	#mw-site-navigation .timeless-logo img {
    	width: 13.679em;
    	margin-left: calc(-3.04em + 0.4584vw);
    	right: -35.9121px;
    	top: 2.2499em;
    	margin-bottom: 3.04em;
	}
	#mw-related-navigation {
    	padding-top: 2.2087em;
	}
	#mw-related-navigation .sidebar-chunk {
        /* left: 14.63px; */
        left: 18.1263px;
    }
    #mw-related-navigation .sidebar-chunk#site-navigation {
    	box-shadow: 0.153em 1.2px 0 var(--contrast-color-1) inset,0px -2px 0 6px var(--contrast-color-12);
         -moz-box-shadow: 0.153em 1.2px 0 var(--contrast-color-1) inset,0px -2px 0 6px var(--contrast-color-12);
      -webkit-box-shadow: 0.153em 1.2px 0 var(--contrast-color-1) inset,0px -2px 0 6px var(--contrast-color-12);
           -o-box-shadow: 0.153em 1.2px 0 var(--contrast-color-1) inset,0px -2px 0 6px var(--contrast-color-12);
          -ms-box-shadow: 0.153em 1.2px 0 var(--contrast-color-1) inset,0px -2px 0 6px var(--contrast-color-12);
              box-shadow: 0.153em 1.2px 0 var(--contrast-color-1) inset,0px -2px 0 6px var(--contrast-color-12);
    }
    #mw-site-navigation .sidebar-chunk {
    	left: 0.06216em;
    }
	.mediawiki.long-page #mw-site-navigation .sidebar-chunk:last-of-type:not(:first-of-type):after {
    	filter: saturate(0.92) brightness(1.032);
		left: 0.0614em;
    	top: 121.92%;
    }
}
@media screen and (max-width: 1099px) {
	.skin-timeless .mw-dismissable-notice, .skin-timeless #localNotice {
	    background: var(--primary-6);
	    border-color: var(--background-contrast-shade-2);
	}
}
@media screen and (max-width: 850px) {
	.skin-timeless .mw-dismissable-notice, .skin-timeless #localNotice {
	    border-color: var(--contrast-color-3);
	}
    .mw-footer-container {
        background: #90a1bf;
    }
    .mw-footer a {
         color: var(--text-color);
    }
}
@media screen and (min-width: 851px) and (max-width: 1099px) {
    #mw-content-container {
        border-bottom-color: var(--border-shade-2)!important;
    }
    .mw-footer-container {
        background: var(--background-contrast-shade-2);
        border-color: transparent;
        font-weight: 500;
    }
}
@media screen and (max-width: 1099px) {
	#mw-site-navigation .sidebar-inner,
	#mw-related-navigation .sidebar-inner {
        border-color: var(--primary-3);
        -moz-box-shadow: 0 0 0 3px var(--primary-2);
     -webkit-box-shadow: 0 0 0 3px var(--primary-2);
          -o-box-shadow: 0 0 0 3px var(--primary-2);
         -ms-box-shadow: 0 0 0 3px var(--primary-2);
             box-shadow: 0 0 0 3px var(--primary-2);
	}
}
@media screen and (min-width: 1100px) {
    #mw-header-container {
        outline-color: var(--contrast-color-3);
    }
}
@media screen and (min-width: 1100px) and (max-width: 1339px) {
	#mw-content {
		position: relative;
		left: 7px;
		padding-left: 1.789em;
	}
	.pullout-content div#article-type {
		border-right-color: var(--accent-16);
	}
	#subpage-article ~ .pullout-wrapper ~ .stub-type,
    #subpage-article ~ .pullout-wrapper ~ #stub-type,
    #subpage-article ~ .pullout-wrapper ~ div#stub-type {
        transform: rotate(90deg) translate(-5px,-3.98px);
    }
	#mw-related-navigation .sidebar-chunk {
    	top: 9px;
    	left: 1px;
        -moz-box-shadow: var(--integrate-sections-2);
     -webkit-box-shadow: var(--integrate-sections-2);
          -o-box-shadow: var(--integrate-sections-2);
         -ms-box-shadow: var(--integrate-sections-2);
             box-shadow: var(--integrate-sections-2);
	}
	#mw-related-navigation .sidebar-chunk:nth-last-of-type(2):after, 
	#mw-related-navigation .sidebar-chunk:nth-last-of-type(1):after{
    	filter: saturate(0.92) brightness(1.032);
    	top: 105.7%;
    }
    .toc ~ .content-table-wrapper {
    	margin-left: -8.4px!important;
	}
}

/* Temporary colour correct */
.oo-ui-windowManager-modal > .oo-ui-dialog {
    background-color: rgb(229 229 229 / 37%);
}
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame {
    background-color: #f0f0f0;
}
.oo-ui-flaggedElement-progressive > a.oo-ui-buttonElement-button {
    background: #617aad !important;
}

.ns-116 a:link,
.ns-116 a:visited {
    color: var(--accent-2);
}
.ns-116 a:hover {
    color: var(--accent-1);
}