User:Virinas-code/timeless.css


 * root {

--tn-bg-dark: #1f2335; --tn-bg: #24283b; --tn-bg-highlight: #292e42; --tn-terminal-black: #414868; --tn-fg: #c0caf5; --tn-fg-gutter: #3b4261; --tn-blue-0: #3d59a1; --tn-blue: #7aa2f7; --tn-blue-1: #2ac3de; --tn-blue-2: #0db9d7; --tn-blue-7: #394b70; --tn-magenta: #bb9af7; --tn-magenta-2: #ff007c; --tn-border: #07080c; --tn-bg-visual: #253561; }

.skin-timeless { html { background-color: var(--tn-terminal-black); }	body { color: var(--tn-fg); }	a { color: var(--tn-blue); &:hover { color: var(--tn-blue-1); }		&:visited { color: var(--tn-magenta); &:hover { color: var(--tn-magenta-2); }		}	}	* {		&:focus, &:focus-visible { outline-color: var(--tn-border); outline-style: solid; }	}	#mw-content-container { background-color: var(--tn-bg-dark); border-bottom-color: var(--tn-border); }	#mw-content { background-color: var(--tn-bg); border-color: var(--tn-border); }	#mw-header-container { color: var(--tn-fg); background-color: var(--tn-bg); #p-banner { filter: invert(1); }		#simpleSearch, #searchInput { color: var(--tn-fg); background-color: var(--tn-bg-highlight); border-color: var(--tn-border); #searchInput { color: var(--tn-fg); &::placeholder { color: var(--tn-fg); }			}			#searchButton { filter: invert(1); }		}		#user-tools { li { filter: invert(1); }			h2 { /* Ugly hack, but how do you put a filter on pseudo elements? */				filter: invert(1); span { filter: invert(1); }			}		}	}	#mw-site-navigation, #mw-related-navigation { .sidebar-chunk { background-color: var(--tn-bg); border-color: var(--tn-border); h3 { border-color: var(--tn-fg-gutter); }		}	}	#mw-footer-container { color: var(--tn-fg); background-color: var(--tn-terminal-black); border-top-color: var(--tn-border); box-shadow: none; }	#footer-icons img { filter: invert(1); }	.suggestions { .suggestions-results { color: var(--tn-fg); background-color: var(--tn-bg-highlight); border-color: var(--tn-border); .suggestions-result { color: var(--tn-fg); }		}		.mw-searchSuggest-link > .suggestions-special { color: var(--tn-fg); background-color: var(--tn-bg-highlight); border-color: var(--tn-border); .special-label, .special-query { color: var(--tn-fg); }			&.suggestions-result-current { color: var(--tn-fg); background-color: var(--tn-bg-visual); }		}		.suggestions-result-current { color: var(--tn-fg); background-color: var(--tn-bg-visual); }	}	.mw-echo-ui-overlay { .oo-ui-iconElement-icon { filter: invert(1); }		.oo-ui-popupWidget-popup { background-color: var(--tn-bg); border-color: var(--tn-border); .oo-ui-popupWidget-head { border-color: var(--tn-border); }			.oo-ui-popupWidget-body { background-color: var(--tn-bg-dark); .mw-echo-ui-placeholderItemWidget { background-color: var(--tn-bg-dark); }			}			.oo-ui-popupWidget-footer { border-color: var(--tn-border); .oo-ui-buttonElement-button { background-color: var(--tn-bg-dark); &:focus { box-shadow: none; }				}			}		}	} }