MediaWiki:Timeless.css
From Tardis Wiki, the free Doctor Who reference
Clear your cache often around here
After changes are made to this site's CSS or Javascript, you have to bypass your browser's cache to see the changes. You can always do this by going to your browser's preferences panel. But many browsers also offer keyboard shortcuts to save you that trouble. The following shortcuts work in the versions of the browsers that Tardis currently supports. They may not work in earlier versions.
- Firefox: hold down Shift while performing a page reload.
- Opera offers no default keyboard shortcut, but you can create a custom keyboard shortcut with the value Clear disk cache
- Safari users should simultaneously hold down ⌘ + Option + E. You may need to enable the Develop menu first
- Chrome: press Ctrl + F5 or Shift + F5 while performing a page reload.
/* All CSS here will be loaded for users of the Timeless skin */
/* ===================
Dark theme by default
=================== */
/* dark theme - bundled */
:root.theme-dark {
--text-color: #ffffff;
--primary-1: #0e2348;
--primary-2: #0f2651;
--primary-3: #1a2e53;
--primary-4: #0a1b3c;
--primary-5: #14294f;
--primary-6: #081937;
--primary-7: #44587f;
--background-shade: #11357a; /* Same for both */
--accent-1: #c7b286;
--accent-2: #d5ac59;
--accent-3: #bfa773;
--accent-4: #e5c076;
--accent-5: #dcd697;
--alt-text-color: #000000;
--alt-link-color: #ddcfae;
--alt-link-color-1b: #ddcca4;
--contrast-color-1: #8595b5;
--contrast-color-1--rgb: 133,149,181;
--contrast-color-2: #e3e5e7;
--contrast-color-2--rgb: 227,229,231;
--contrast-color-3: #526586;
--contrast-color-3--rgb: 82,101,134;
--border-shade: #d2e2ff;
--background-contrast-shade: #012667;
}
#mw-content-container {
background: var(--background-shade); /* Same for both skins */
border-bottom: 4px solid var(--border-shade) !important;
}
@media screen and (min-width: 1100px) {
/*#mw-content-container::after {
background: url(https://tardis.wiki/images/Tardis_images/d/de/Background_grey.png); /* Same for both skins */
/*opacity: .5;
filter: invert(1);
margin-bottom: auto;
position: absolute;
width: 100%;
height: 100%;
background-position: 50%;
background-size: cover;
content: "";
top: 0;
background-repeat: y;
}
#mw-content-block {
z-index: 1;
position: relative;
}*/
#mw-content-container {
background: var(--background-shade); /* Same for both skins */
border-bottom: 4px solid var(--border-shade) !important;
}
#menus-cover {
background: url(https://tardis.wiki/images/Tardis_images/d/de/Background_grey.png); /* Same for both skins */
opacity: .5;
filter: invert(1);
margin-bottom: auto;
position: fixed;
width: 100%;
height: 100%;
background-position: 50%;
background-size: cover;
z-index: 0;
display: block !important;
}
#mw-content-wrapper, #mw-site-navigation, #mw-related-navigation, #mw-footer {
z-index: 2;
position: relative;
}
}
@media screen {
:root.theme-dark pre, :root.theme-dark .mw-code {
filter: invert(1) hue-rotate(180deg);
/*color: var(--text-color);
background-color: #373737;
border: 1px solid #4f4f4f;*/
}
}
:root.theme-dark .CodeMirror-code {
filter: invert(1) hue-rotate(180deg);
}
:root.theme-dark .wikiEditor-ui,
:root.theme-dark .wikiEditor-ui-toolbar .tabs span.tab a,
:root.theme-dark .oo-ui-fieldLayout-field,
:root.theme-dark .oo-ui-labelWidget,
:root.theme-dark .mw-editsection,
:root.theme-dark div.magnify a,
:root.theme-dark .mw-editsection a,
:root.theme-dark .suggestions,
:root.theme-dark #personal h2,
:root.theme-dark #site-tools h2,
:root.theme-dark #site-navigation h2,
:root.theme-dark #page-tools h2,
:root.theme-dark #other-languages h2 {
filter: invert(1) hue-rotate(180deg);
}
:root.theme-dark #p-search {
filter: invert(0.1) hue-rotate(115deg);
}
:root.theme-dark #site-tools h2,
:root.theme-dark #site-navigation h2,
:root.theme-dark #page-tools h2,
:root.theme-dark #other-languages h2 {
color: var(--alt-text-color);
}
:root.theme-dark .oo-ui-messageDialog-message {
filter: none;
}
/* for the icons on the little tabs below the page title. Each element is inverted, and then the text inside it is inverted back. This leaves only the icon inverted */
:root.theme-dark #ca-nstab-main a,
:root.theme-dark #ca-nstab-main a span,
:root.theme-dark #ca-nstab-user a,
:root.theme-dark #ca-nstab-user a span,
:root.theme-dark #ca-nstab-project a,
:root.theme-dark #ca-nstab-project a span,
:root.theme-dark #ca-nstab-file a,
:root.theme-dark #ca-nstab-file a span,
:root.theme-dark #ca-nstab-mediawiki a,
:root.theme-dark #ca-nstab-mediawiki a span,
:root.theme-dark #ca-nstab-template a,
:root.theme-dark #ca-nstab-template a span,
:root.theme-dark #ca-nstab-help a,
:root.theme-dark #ca-nstab-help a span,
:root.theme-dark #ca-nstab-category a,
:root.theme-dark #ca-nstab-category a span,
:root.theme-dark #ca-nstab-property a,
:root.theme-dark #ca-nstab-property a span,
:root.theme-dark #ca-nstab-form a,
:root.theme-dark #ca-nstab-form a span,
:root.theme-dark #ca-nstab-howling a,
:root.theme-dark #ca-nstab-howling a span,
:root.theme-dark #ca-nstab-theory a,
:root.theme-dark #ca-nstab-theory a span,
:root.theme-dark #ca-nstab-transmat a,
:root.theme-dark #ca-nstab-transmat a span,
:root.theme-dark #ca-nstab-thread a,
:root.theme-dark #ca-nstab-thread a span,
:root.theme-dark #ca-nstab-guide a,
:root.theme-dark #ca-nstab-guide a span,
:root.theme-dark #ca-nstab-module a,
:root.theme-dark #ca-nstab-module a span,
:root.theme-dark #ca-nstab-gadget a,
:root.theme-dark #ca-nstab-gadget a span,
:root.theme-dark #ca-nstab-gadget_definition a,
:root.theme-dark #ca-nstab-gadget_definition a span,
:root.theme-dark #ca-nstab-map a,
:root.theme-dark #ca-nstab-map a span,
:root.theme-dark #ca-nstab-video a,
:root.theme-dark #ca-nstab-video a span,
:root.theme-dark #ca-talk a,
:root.theme-dark #ca-talk a span,
:root.theme-dark #ca-watch a,
:root.theme-dark #ca-watch a span,
:root.theme-dark #ca-view a,
:root.theme-dark #ca-view a span,
:root.theme-dark #ca-viewsource a,
:root.theme-dark #ca-viewsource a span,
:root.theme-dark #ca-formedit a,
:root.theme-dark #ca-formedit a span,
:root.theme-dark #ca-ve-edit a,
:root.theme-dark #ca-ve-edit a span,
:root.theme-dark #ca-edit a,
:root.theme-dark #ca-edit a span,
:root.theme-dark #ca-addsection,
:root.theme-dark #ca-addsection a span,
:root.theme-dark #ca-undelete a,
:root.theme-dark #ca-undelete a span,
:root.theme-dark #ca-history a,
:root.theme-dark #ca-history a span,
:root.theme-dark #ca-purge a,
:root.theme-dark #ca-purge a span,
:root.theme-dark #t-contributions a,
:root.theme-dark #t-contributions a span,
:root.theme-dark #ca-more span,
:root.theme-dark #ca-more::after,
:root.theme-dark #ca-languages span,
:root.theme-dark #ca-languages::after {
filter: invert(1) hue-rotate(180deg);
}
:root.theme-dark .mw-rcfilters-ui-overlay,
:root.theme-dark .mw-rcfilters-head,
:root.theme-dark .mw-changeslist-legend {
filter: invert(1) hue-rotate(180deg);
color: var(--alt-text-color);
}
:root.theme-dark .mw-changeslist-legend a {
filter: invert(1) hue-rotate(180deg);
color: var(--accent-2);
}
/* General */
body {
color: var(--text-color);
background: var(--primary-2);
}
#mw-content, #mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk {
border: solid var(--primary-3);
background: var(--primary-1);
}
.sidebar-chunk h3 {
border-bottom: solid 3px var(--primary-7)!important;
}
.mw-portlet-body a {
color: var(--alt-link-color);
}
@media screen and (min-width: 851px) and (max-width: 1099px) {
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
border: solid 3px var(--contrast-color-3);
border-radius: 3px;
background: var(--primary-5);
margin-top: 2px;
padding-left: 8px;
padding-right: 1px;
padding-bottom: 6px;
}
#site-navigation h2,
#site-tools h2 {
filter: none;
color: #222731;
}
}
.mw-wiki-logo.timeless-logo img {
margin-left: -2px;
padding-bottom: 1px;
}
#mw-header-container {
background: var(--primary-3);
}
#simpleSearch {
border-radius: 5px;
}
#personal h2 {
font-family:"Nunito","Rubik",sans-serif;
}
#personal h2 span {
position: relative;
top: -4px;
}
#p-banner.mw-wiki-title {
font-family:"Della Respira","Ysabeau Office","Nunito","Rubik",sans-serif!important;
/* opacity: 0; */
}
/* #p-logo-text {
background-image: url("https://tardis.wiki/images/Tardis_images/thumb/a/aa/Tardis_Wiki_sign.png/798px-Tardis_Wiki_sign.png");
background-size: cover;
} */
#personal .dropdown {
border: solid var(--primary-3);
background: var(--primary-1);
color: var(--text-color);
}
#personal .dropdown::after {
border-bottom-color: var(--primary-1);
}
#personal .dropdown::before, #personal .dropdown::after {
border-bottom: 10px solid var(--primary-1);
}
a, .mw-parser-output a.external, .mw-parser-output a.extiw {
color: var(--accent-2);
}
a:visited, .mw-parser-output a.external:visited, .mw-parser-output a.extiw:visited {
color: var(--accent-1);
}
a:hover, .mw-parser-output a.external:hover, .mw-parser-output a.extiw:hover {
color: var(--accent-1);
}
a:visited:hover, .mw-parser-output a.external:visited:hover, .mw-parser-output a.extiw:visited:hover {
color: var(--accent-3);
}
.tools-inline li.selected a {
color: var(--text-color);
}
#editpage-copywarn a,
#editpage-copywarn a:hover,
#editpage-copywarn a:visited,
#editpage-copywarn a:hover:visited {
color: var(--alt-text-color);
text-decoration: underline;
}
.mw-parser-output a.external, .link-mailto, .link-ftp, .link-irc, .link-audio, .link-video, .link-document {
background: none;
padding-right: 0;
}
.mw-body h1.firstHeading {
border-bottom: solid 7px var(--primary-3);
}
.mw-parser-output h2 .mw-headline {
font-size: 25px;
margin-left: -1px;
}
.mw-editsection a {
color: var(--alt-link-color-1b);
}
.mw-body .mw-parser-output h2:after {
margin-top: 1px;
border: 2px solid var(--primary-3); /*both*/
}
.mw-parser-output > h3 {
margin-top: 3px!important;
font-size: 18px;
padding-bottom: 1px;
}
.mw-parser-output > h4 {
margin-top: 11px!important;
font-size: 16px;
}
/* ==================
Likely temporary
=================*/
.mw-parser-output > p {
font-size: 1.034em;
}
.mw-parser-output > p:nth-of-type(2) {
margin-top: 14.4px;
font-size: 1.045em;
}
@media screen and (max-width: 849px) {
.mw-parser-output p {
font-size: 1.035em;
}
}
.tools-inline li.selected {
border: none;
border-radius: 8px;
background: var(--primary-6);
padding: 4px;
}
.tools-inline .mw-list-item a {
color: var(--contrast-2);
}
ul#filetoc, .toc, .toccolours, .mw-warning {
background: var(--accent-1);
border: solid var(--accent-2);
color: var(--alt-text-color);
}
ul#filetoc a, .toc a, .toccolours a, .mw-warning a {
color: var(--alt-text-color);
}
.wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent-2);
}
.wikiEditor-ui-toolbar .tabs span.tab a.current, .wikiEditor-ui-toolbar .tabs span.tab a.current:visited {
color: var(--text-color);
}
div.editOptions {
border: solid var(--primary-2);
background: var(--primary-3);
color: var(--text-color);
}
#p-banner.mw-wiki-title {
font-family: sans-serif;
font-weight: bold;
color: var(--text-color);
}
/*#p-banner.mw-wiki-title {
font-family: sans-serif;
font-weight: bold;
color: transparent;
}
#p-logo-text {
background-image: url(https://static.wikia.nocookie.net/tardis/images/2/23/TARDIS_logo_pitch_1.png/);
background-size: 160px auto;
background-repeat: no-repeat;
background-position: center center;
}*/
#mw-header-container {
outline: 4px solid var(--contrast-color-1);
margin-bottom: 3px;
}
#p-logo-text a {
white-space: nowrap;
}
/* Hide default lines under header */
.color-left, .color-right, .color-middle {
height: 0em;
}
ul#filetoc, .toc, .toccolours, .mw-warning {
float: right;
clear: right;
max-width: 250px;
}
.thumbinner {
background: unset;
border: unset;
box-shadow: unset;
}
.thumbinner .thumbimage, .thumbborder {
border: unset;
}
@media screen and (min-width: 851px) {
.mw-wiki-logo.timeless-logo img {
width: 13em;
}
}
/* https://www.mediawiki.org/wiki/Skin:Timeless#Indefinite_content_width - CC BY-SA 4.0 */
/* Indefinite content width */
@media screen and (min-width: 851px) {
.color-middle-container,
.ts-inner { max-width: none; }
}
#mw-header-nav-hack {
background: var(--primary-1);
z-index: 0;
}
#content-bottom-stuff {
background: var(--primary-3);
}
#mw-content-container {
border-bottom-color: var(--border-shade);
}
.mw-footer-container {
display: inline-flex;
background: var(--background-contrast-shade);
color: var(--text-color);
padding-right: calc(94.18% - 700px);
padding-left: 5.82%;
font-weight: 500;
}
.mw-footer-container a,
.mw-footer-container a:visited,
.mw-footer-container a:hover,
.mw-footer-container a:visited:hover {
color: var(--text-color);
}
.mw-footer {
min-width: 700px;
}
@media screen and (max-width: 850px) {
.mw-footer-container {
background: #102651;
width: 100%;
padding-left: initial;
}
.mw-footer {
min-width: initial;
max-width: 850px;
}
}
@media screen and (max-width: 1099px) {
#mw-site-navigation .sidebar-inner,
#mw-related-navigation .sidebar-inner {
border-radius: 6px 2px 14px 24px;
margin-left: 11px;
margin-top: 7px;
padding-left: 25px;
background: var(--primary-1);
border: solid var(--contrast-color-3);
box-shadow: 0 0px 0 3px var(--contrast-color-1);
color: var(--text-color);
}
#mw-site-navigation:nth-child(1) .sidebar-inner {
width: 148px;
min-height: 135px;
margin-left: 2px;
padding-top: 20px;
padding-left: 20px;
}
#mw-site-navigation:nth-child(2) .sidebar-inner {
margin-left: -10px;
}
#mw-site-navigation .sidebar-inner::after,
#mw-related-navigation .sidebar-inner::after {
border-bottom-color: var(--primary-1);
}
#mw-site-navigation .dropdown-active h2 span::before,
.client-nojs #mw-site-navigation .sidebar-chunk:hover h2 span::before,
#mw-site-navigation .dropdown-active h2 span::after,
.client-nojs #mw-site-navigation .sidebar-chunk:hover h2 span::after,
#mw-related-navigation .sidebar-inner::before,
#mw-related-navigation .sidebar-inner::after,
#mw-site-navigation .sidebar-inner::before,
#mw-site-navigation .sidebar-inner::after {
border-bottom: 10px solid var(--primary-1);
}
}
@media screen and (min-width: 851px) and (max-width: 1099px) {
#mw-site-navigation .sidebar-inner,
#mw-related-navigation .sidebar-inner {
border-radius: 6px 1px 4px 14px;
border-radius: 6px 2px 14px 24px;
margin-left: 11px;
margin-top: 7px;
padding-left: 25px;
border-color: var(--primary-3);
border-color: var(--contrast-color-3); /*dark*/
box-shadow: 0 0px 0 3px var(--primary-2);
box-shadow: 0 0px 0 3px var(--contrast-color-1); /*dark*/
}
}
code {
color: var(--text-color);
}
.mw-rcfilters-ui-overlay {
z-index: 100000000;
}
