MediaWiki:Timeless.css

/* All CSS here will be loaded for users of the Timeless skin */
/* == LIGHT/STANDARD THEME == */
/* See: /skins/Timeless/resources/themes/wikimedia.less for colours */
:root {
	--pink: #FF8DC6;
	--body-1: #eaecf0;
	--body-2: #fff;
	--body-3: #c8ccd1;
	/* adjust colours */
	--body-4: #72777d;
	--body-5: #54595d;
	--body-6: #f8f9fa;
	--color: #000;
	--link: #36c;
	--link-visited: #2a4b8d;
	--link-hover: #7093db;
	--link-new: #d73333;
}

/* == DARK THEME == */
:root.dark {
	--pink: #d96ba2;
	--body-1: #000;
	--body-2: #333;
	--body-3: #555;
	--body-4: #666;
	--body-5: #777;
	--body-6: #666;
	--color: #eee;
	--link: #D0A3E1;
	--link-visited: #D0A3E1;
	--link-hover: #d9b5e7;
	--link-new: #ba0000;
}

/* == COLORS FOR THEMES == */
/* Main background */
#mw-content-container {
	background: var(--body-1);
}

/* Header, Content, Navigation, Page tools */
body,
#mw-header-container,
#menus-cover,
#mw-content,
.sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
	background: var(--body-2);
	color: var(--color);
}

:root.dark #simpleSearch {
	background: var(--body-3);
	border: none;
}

#p-logo-text a,
.tools-inline li.selected a,
#mw-footer-container,
.tocnumber {
	color: var(--color);
}

:root.dark .toc {
	background: var(--body-3);
	border: 2px solid var(--body-1);
}
:root.dark .toc .toctitle {
	border-color: var(--body-1);
}
#mw-site-navigation .sidebar-chunk, .sidebar-inner, .dropdown {
	background: var(--body-2);
}

#mw-footer-container {
	color: var(color);
	border-top: 4px solid var(--pink);
}

.mw-body h1.firstHeading {
	border-bottom: solid 4px var(--pink);
}

hr,
.mw-body .mw-heading2,
.mw-body h2,
.sidebar-chunk h3 {
	border-bottom: 2px solid var(--body-4);
}

#mw-header-nav-hack {
  background: none;
}

#mw-header-nav-hack {
  border-top: none;
}

/* Links */
a, a.external,
#mw-footer-container a,
.toctogglelabel {
	color: var(--link);
}

a:visited, a.external:visited {
	color: var(--link-visited);
}

a:hover, a.external:hover, a:hover:visited {
	color: var(--link-hover);
}

a:new {
	color: var(--link-new);
}

/* Editing area */
:root.dark code,
:root.dark .mw-code {
	color: var(--color);
	background-color: var(--body-6);
	border: 1px solid var(--body-6);
}

/* User tools, notifications, etc. (Making them a bit lighter than the content */
.oo-ui-popupWidget-popup,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled>.oo-ui-buttonElement-button {
	background-color: var(--body-3);
	border: none;
}

/* Small arrow */
.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::after {
	border-bottom-color: var(--body-3);
}

.mw-echo-ui-notificationBadgeButtonPopupWidget-popup>.oo-ui-popupWidget-popup>.oo-ui-popupWidget-head {
	border-bottom: none;
}

.mw-echo-ui-notificationBadgeButtonPopupWidget-popup>.oo-ui-popupWidget-popup>.oo-ui-popupWidget-footer {
	border-top: none;
}

.mw-echo-ui-placeholderItemWidget {
	background: var(--body-5);
}

:root.dark #personal .dropdown {
    background: var(--body-3);
    border: none;
    box-shadow: 2px 2px 5px var(--body-1);
}

#personal .dropdown::after {
	background: var(--body-3);
}

#personal .dropdown::before,
#personal .dropdown::after {
	transform: rotate(360deg);
	border-bottom: 10px solid var(--body-3);
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
}

/* Changes color of SVG elements */
:root.dark #pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read,
:root.dark #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read,
:root.dark #personal h2,
:root.dark #ca-ve-edit a,
:root.dark #ca-edit a,
:root.dark #ca-history a,
:root.dark #ca-cargo-purge a,
:root.dark .tools-inline li[id^='ca-nstab-'] a,
:root.dark #ca-talk a,
:root.dark #ca-watch a {
	filter: invert(99%) sepia(2%) saturate(102%) hue-rotate(213deg) brightness(113%) contrast(87%);
	color: #000;
}

/* Tables */
.mw_metadata > tr > th,
.mw-datatable > tr > th,
.mw_metadata > tr > td,
.mw-datatable > tr > td,
.mw_metadata > * > tr > th,
.mw-datatable > * > tr > th,
.wikitable > * > tr > th,
.mw_metadata > * > tr > td,
.mw-datatable > * > tr > td,
.wikitable > * > tr > td {
    border: 1px solid var(--body-3);;
}
.wikitable, .mw-datatable {
	background: none;
	border: 2px solid var(--body-3);
	color: var(--color);
}

.wikitable>*>tr>th, .datatable th {
	background-color: var(--body-3);
}

/* Makes the pink a bit darker for tables, infoboxes and tabs */
.article-table,
.article-table td,
.infobox {
	border: 2px solid var(--pink);
}

.wikitable td,
.article-table td, .datatable td {
	background: none !important;
}

.article-table th,
.infobox th,
.tabs-tabbox>.tabs-input:checked+.tabs-label,
.tabs-input-0:checked+.tabs-input-1+.tabs-label {
	background-color: var(--pink);
}
.article-table th a + a:visited {color: #fff;}
/* Images */
:root.dark figure[typeof~='mw:File/Thumb']> :not(figcaption) .mw-file-element,
:root.dark figure[typeof~='mw:File/Frame']> :not(figcaption) .mw-file-element {
	border: 1px solid #000;
}

:root.dark figure[typeof~='mw:File/Thumb'],
:root.dark figure[typeof~='mw:File/Frame'] {
	border: none;
	background: var(--body-3);
}

:root.dark figure[typeof~='mw:File/Thumb']>figcaption,
:root.dark figure[typeof~='mw:File/Frame']>figcaption {
	border: none;
	background: var(--body-3);
	color: var(--color);
}

:root.dark table.dataTable.display tbody tr.odd {
    background-color: #666;
}

:root.dark table.dataTable.display tbody tr.even {
    background-color: #444;
}

:root.dark.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
:root.dark.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
:root.dark.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    background: #eee;
}

:root.dark.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: none;
}
/* Navbar Colours */
.color-left,
.color-middle,
.color-right {
	background: var(--purple);
}

:root .dark .speechbubble {background-color: #666;}


/* == SKIN ADJUSTMENTS == */
.mw-body h1.firstHeading {
	font-family: 'CelestiaRedux', serif;
}

/* Current workaround for wordmark being too big for the header */
#p-logo-text {
	padding-bottom: 1em;
}

#p-logo-text a.long {
	font-size: 120%;
	font-family: 'CelestiaRedux', serif;
}

@media (max-width: 500px) {
	#p-logo-text {
        height: 30px;
        aspect-ratio: 1 / 1;
        padding: 0 0;
		aspect-ratio: 1 / 1;
	}

	#p-logo-text a {
		text-indent: -9999px;
		color: transparent;

		background-image: url('/images/a/a0/Wiki-logo.png');
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;

		width: 100%;
		height: 100%;
	}
}

/* Navigation */
#mw-site-navigation .mw-portlet h3 {
	text-transform: uppercase;
	font-size: 1.2em;
	font-family: 'CelestiaRedux', serif;
}

/* Removes border around content and naviagtion */
#mw-content,
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk, .sidebar-inner, .dropdown {
	border: none;
}

/* Image thumbnail */
.mw-body li.gallerybox div.thumb {
	background: none;
	border: none;
	padding: 0;
	box-shadow: none;
	margin: 0;
}

.gallery-text {
	text-align: center;
	padding: 0;
}

/* Footer */
#mw-footer-container {
	border-top: 4px solid var(--pink);
}

#mw-content-container {
	border-bottom: none;
}

.theme-switcher {
	background: none;
	height: 2rem;
	aspect-ratio: 1 / 1;
}

@media screen and (min-width: 851px) {
	.theme-switcher {
		float: left;
	}
}


@media screen and (max-width: 850px) {
  .theme-switcher {
    position: absolute;
    top: 1.2em;
    right: 7.2em;
  }
  
  #personal-extra {
    position: absolute;
    top: 0.9em;
    right: 8.5em;
  }
}

.theme-switcher-button {
	text-indent: -9999px;
	color: transparent;
	width: 100%;
	height: 100%;
	margin: 0 2px;
	box-sizing: border-box;
	cursor: pointer;

	border: none;

	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;

	background-color: transparent;
}

:root.light .theme-switcher-button {
	background-image: url('/skins/Timeless/resources/images/cutiemark_celestia.png');
}

:root.dark .theme-switcher-button {
	background-image: url('/skins/Timeless/resources/images/cutiemark_luna.png');
}