MediaWiki:Timeless.css

From VRChat Wiki
Revision as of 19:19, 31 July 2024 by Prismic247 (talk | contribs)

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.
	/* GENERAL THINGS:

	- Responsive page design will be fairly fucky with a number of these changes; I'm fixing the really big/notable ones where I can, but it's frankly not something I have a ton of bandwidth to really tackle alone, help would be VERY appreciated since I'm mainly focused on the primary display use-case (1080p+ desktop)
	- Colors are a mix of the below codes (taken from VRC's site directly) and some arbitrary ones I marked, ALL OF THAT IS SUBJECT TO CHANGE
	- I'm generally working on things pretty asyncronously, so it's likely I *did* notice some spots I might've missed but tend to jump around a lot so... it'll happen when it happens (or you can help!!)

	*/

	:root {
		--faux-white: #f8f9fa;
		--blue-text: #6ae3f9;
		--more-dark-green: #07242b;
		--more-dark-green-border: #053c48;
		--less-dark-green: #07343f;
		--less-dark-green-border: #086c84;
		--more-dark-grey: #181b1f;
		--less-dark-grey: #252a30;
	}

	/* establish faux white text globally */
	body {
		color: var(--faux-white);
	}

	/* main BG, INVESTIGATE SCALING AND POSSIBLY DITHERING THE GRADIENT */
	body {
		background: #10171c;
		background-image: url('https://i.imgur.com/Z2x34d3.jpeg');
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: top center;
	}

	#mw-wrapper {
		background: linear-gradient(to bottom, #10171c00 20vh, #10171c 55vh), linear-gradient(to right, #10171c 1vw, #10171c00 15vw, #10171c00 85vw, #10171c 99vw);
	}

	/* ugly serif fonts BEGONE */
	.mw-body h1,
	.mw-body h2,
	.mw-body h3,
	.mw-body h4,
	.mw-body h5,
	.mw-body h6,
	.mw-body dt,
	#personal h2 {
		font-family: "Exo 2", "Linux Libertine", "Times New Roman", "Liberation Serif", "Nimbus Roman", "Noto Serif", "Times", serif;
		font-weight: 600;
	}

	body {
		font-family: "Noto Sans", "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", "Lato", "Liberation Sans", "Helvetica Neue", "Helvetica", sans-serif;
	}


/*

▀███▀▀▀██▄ ▄▄█▀▀██▄ ▀███▀▀▀██▄ ▀███▀   ▀██▀
  ██    ████▀    ▀██▄ ██    ▀██▄ ███   ▄█
  ██    ███▀      ▀██ ██     ▀██  ███ ▄█
  ██▀▀▀█▄▄█        ██ ██      ██   ████
  ██    ▀██▄      ▄██ ██     ▄██    ██
  ██    ▄███▄    ▄██▀ ██    ▄██▀    ██
▄████████  ▀▀████▀▀ ▄████████▀    ▄████▄

*/

	/* colors! :D */
	#mw-content-container {
		background: transparent;
	}

	#mw-content {
		background: var(--more-dark-grey);
		color: var(--faux-white);
		border: solid #282a2e;
	}

	/* these are kinda arbitrary */
	#mw-content a:not(.new, .new a) {
		color: #6bd4ff;
	}

	#mw-content a:hover:not(.new, .new a) {
		color: #468ca9;
	}

	#mw-content a:visited:not(.new, .new a) {
		color: #509fdd;
	}

	#mw-content a:visited:hover:not(.new, .new a) {
		color: #3874a3;
	}

	/* CURSED icon inversion, I'm fucking INSANE */
	#p-namespaces a,
	#p-namespaces a span,
	#p-views a,
	#p-views a span,
	.mw-editsection,
	.mw-editsection a {
		filter: invert(1);
	}

	/* roundin' the corners! (subject to change) */
	@media screen and (min-width: 1100px) {
		#mw-content {
			border-radius: 15px;
		}
	}

	/* vertically aligning the top of the body content box with the sidebars */
	@media screen and (min-width: 1100px) {
		#mw-content-wrapper {
			padding: 1em 0 0;
		}
	}

	/* DROP SHADOWS MY BELOVED */
	#mw-content {
		filter: drop-shadow(0 0 0.7rem #000);
	}

	/* move page titles post-namespace a *bit* to the right in order to space 'em better */
	.mw-page-title-separator {
		margin-right: 0.25em;
	}

	/* general TOC theming */
	ul#filetoc,
	.toc,
	.toccolours,
	.mw-warning {
		background: #2e2f35;
		border: 3px solid #3b3f4a;
	}

	/* general content thumbnail theming */
	.thumbinner {
		background: var(--less-dark-green);
		border: solid var(--less-dark-green-border);
		border-radius: 10px;
	}

	.thumbinner .thumbimage,
	.thumbborder {
		border: 0;
		filter: drop-shadow(0 0 0.2rem #000);
	}

	/* code block theming */
	code {
		background: var(--less-dark-grey);
		border: 1px solid var(--more-dark-grey);
		color: var(--faux-white);
	}

	/* table theming; COLORS ARE ARBITRARY */
	.wikitable,
	.mw-datatable {
		color: #fff;
	}
	.wikitable > * > tr > th,
	.mw-datatable th {
		background: #17181d;
	}
	.wikitable tr,
	.mw-datatable tr td,
	.mw-datatable tr:hover td {
		background: #2d3135;
	}
	.wikitable tr:nth-child(2n),
	.mw-datatable tr:nth-child(2n) td,
	.mw-datatable tr:nth-child(2n) td:hover {
		background: #212428;
	}
	
	.wikitable,
	.wikitable > * > tr > th,
	.wikitable > * > tr > td,
	.mw-datatable,
	.mw-datatable > * > tr > th,
	.mw-datatable > * > tr > td {
		border: 2px solid #414b57;
	}

	/* FIRST CELL MAIN PAGE INLINE */
	@media screen and (max-width: 850px) {
		#first-cell{
			display: inline;
		}
	}
	@media screen and (min-width: 851px) {
		#first-cell{
			display: flex;
		}
	}


	/*

▀██▀ ▀█▄   ▀█▀ ▀██▀▀▀▀█  ▄▄█▀▀██   ▀██▀▀█▄    ▄▄█▀▀██   ▀██▀ ▀█▀
 ██   █▀█   █   ██  ▄   ▄█▀    ██   ██   ██  ▄█▀    ██    ██ █
 ██   █ ▀█▄ █   ██▀▀█   ██      ██  ██▀▀▀█▄  ██      ██    ██
 ██   █   ███   ██      ▀█▄     ██  ██    ██ ▀█▄     ██   █ ██
▄██▄ ▄█▄   ▀█  ▄██▄      ▀▀█▄▄▄█▀  ▄██▄▄▄█▀   ▀▀█▄▄▄█▀  ▄█   ██▄

*/

	.pi-theme-official,
	.pi-theme-community {
		background: #252a30;
		--pi-secondary-background: transparent;
		border: 5px solid #3c434d;
		color: #f8f9fa;
		margin-left: 2em;
		border-radius: 20px;
	}
	.skin-timeless #mw-content-text .pi-data-label {
		font-family: 'Exo 2';
	}
	.pi-title {
		text-align: center;
	}
	.pi-data-value {
		display: flex;
		align-items: center;
	}
	.portable-infobox .pi-data-value > :not(ul) {
		margin: 0;
	}

/*

▀██    ██▀ ▀██▀▀▀▀█  ▀██▀▀█▄   ▀██▀     █     ▀██ ▀██▀  ▀█▀ ▀██▀ ▀██▀  █▀  ▀██▀
 ███  ███   ██  ▄     ██   ██   ██     ███     ▀█▄ ▀█▄  ▄▀   ██   ██ ▄▀     ██
 █▀█▄▄▀██   ██▀▀█     ██    ██  ██    █  ██     ██  ██  █    ██   ██▀█▄     ██
 █ ▀█▀ ██   ██        ██    ██  ██   ▄▀▀▀▀█▄     ███ ███     ██   ██  ██    ██
▄█▄ █ ▄██▄ ▄██▄▄▄▄▄█ ▄██▄▄▄█▀  ▄██▄ ▄█▄  ▄██▄     █   █     ▄██▄ ▄██▄  ██▄ ▄██▄

*/

	/* preferences colors */
	.oo-ui-panelLayout-framed {
		border: 3px solid #444d57;
		color: #fff;
	}
	.oo-ui-tabSelectWidget-framed {
		background: #252a30;
	}
	.oo-ui-menuLayout-content {
		background: #1b1f23;
	}

	.mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed,
	.mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout {
		border-color: #444d57;
	}
	.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
		background: #1b1f23;
		color: #fff;
	}
	.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover,
	.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
		background: #1b1f23;
		color: inherit;
	}
	/* arbitrary choices for the buttons here, remove "#mw-prefs-form" if applying globally later */
	#mw-prefs-form .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
		background: #101315;
		border: 2px solid #232a2e;
	}
	#mw-prefs-form .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
		background: #1d2327;
		border: 2px solid #364046;
	}

	/* dropdowns */
	.oo-ui-menuSelectWidget {
		background: #161b1e;
		border-color: #000;
		filter: drop-shadow(0 0 5px #000);
	}
	.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget {
		color: #fff;
	}
	.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected {
		background: #0c0f10;
	}
	.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
	.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
	.oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
		background: #101415;
	}
	.oo-ui-dropdownInputWidget.oo-ui-widget-enabled,
	.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle {
		background: #151719;
		border: 1px solid #2f363b;
		color: #fff;
	}
	.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover,
	.oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle {
		background: #202326;
		border: 1px solid #3e484e;
		color: #fff;
	}
	.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:focus {
		outline: 0;
		box-shadow: none;
		border-color: #2f363b;
	}
	
	/* TEMPORARY THEMING JUST TO BE GOOFY, FIGURE OUT WHAT TO DO WITH THIS BUTTON LATER */
	.mw-prefs-buttons {
		background: transparent;
		border: 0;
		filter: drop-shadow(0 0 10px #000);
		box-shadow: none;
	}
	.oo-ui-tabOptionWidget {
		color: #ffffffab;
	}
	
	/* search theming */
	.mw-body .mw-search-profile-tabs {
		background: #151719;
		border: solid #2f363b;
	}
	.oo-ui-textInputWidget .oo-ui-inputWidget-input {
		background: #101315;
		border: 2px solid #232a2e;
		color: #fff;
	}
	.oo-ui-indicator-clear {
		filter: invert(1);
		top: 8px;
	}


/*

 ▄█▀▀▀█▄█████▀███▀▀▀██▄ ▀███▀▀▀███▀███▀▀▀██▄     ██     ▀███▀▀▀██▄  ▄█▀▀▀█▄█
▄██    ▀█ ██   ██    ▀██▄ ██    ▀█  ██    ██    ▄██▄      ██   ▀██▄▄██    ▀█
▀███▄     ██   ██     ▀██ ██   █    ██    ██   ▄█▀██▄     ██   ▄██ ▀███▄
  ▀█████▄ ██   ██      ██ ██████    ██▀▀▀█▄▄  ▄█  ▀██     ███████    ▀█████▄
▄     ▀██ ██   ██     ▄██ ██   █  ▄ ██    ▀█  ████████    ██  ██▄  ▄     ▀██
██     ██ ██   ██    ▄██▀ ██     ▄█ ██    ▄█ █▀      ██   ██   ▀██▄██     ██
█▀█████▀▄████▄████████▀ ▄██████████████████▄███▄   ▄████▄████▄ ▄███▄▀█████▀

*/

	/* colors! :D */
	#mw-site-navigation .sidebar-chunk,
	#mw-related-navigation .sidebar-chunk {
		background: var(--less-dark-grey);
		color: var(--faux-white);
		border: solid #3c4148;
	}
    /* Removing this until we can fix */
    @media screen and (max-width: 850px) {
		#p-logo {
			display: none;
		}
    }
	

	/* these are kinda arbitrary */
	.sidebar-chunk a:not(.new, .new a) {
		color: #6bd4ff;
	}

	.sidebar-chunk a:hover:not(.new, .new a) {
		color: #468ca9;
	}

	.sidebar-chunk a:visited:not(.new, .new a) {
		color: #509fdd;
	}

	.sidebar-chunk a:visited:hover:not(.new, .new a) {
		color: #3874a3;
	}

	/* round the corners for the sidebars a bit */
	.sidebar-chunk {
		border-radius: 15px;
	}

	/* main logo */
	#p-logo {
		display: inline;
	}

	/* DROP SHADOWS MY BELOVED */
	@media screen and (min-width: 1100px) {
		.sidebar-chunk {
			filter: drop-shadow(0 0 0.7rem #000);
		}
	}

	/* make the "related navigation" bar equal to the main nav bar (WHY WAS IT DIFFERENT) */
	#mw-related-navigation {
		width: 14em;
		flex: 0 0 14em;
	}
	
	    /* inverts hamburger in mobile top-left */
    #site-navigation h2 {
        filter: invert(1);
    }
    /* Changes mobile sidebar to match */
    @media screen and (max-width: 850px) {
        .sidebar-inner,
        .dropdown {
            background: var(--less-dark-grey);
            color: var(--faux-white);
            border: solid 3px #3c4148;
            border-radius: 15px;
        }
    }
    /* adjusts the menu cover (greys out stuff behind the sidebar) to match theming */
    @media screen and (max-width: 850px) {
        #menus-cover {
            background: var(--more-dark-grey);
            opacity: 0.25;
        }
    }

/*

▀████▀  ▀████▀▀███▀▀▀███      ██     ▀███▀▀▀██▄ ▀███▀▀▀███▀███▀▀▀██▄
  ██      ██    ██    ▀█     ▄██▄      ██    ▀██▄ ██    ▀█  ██   ▀██▄
  ██      ██    ██   █      ▄█▀██▄     ██     ▀██ ██   █    ██   ▄██
  ██████████    ██████     ▄█  ▀██     ██      ██ ██████    ███████
  ██      ██    ██   █  ▄  ████████    ██     ▄██ ██   █  ▄ ██  ██▄
  ██      ██    ██     ▄█ █▀      ██   ██    ▄██▀ ██     ▄█ ██   ▀██▄
▄████▄  ▄████▄▄█████████████▄   ▄████▄████████▀ ▄██████████████▄ ▄███▄

*/

	/* fundamental layout adjustments */
	#mw-header-container {
		position: relative;
		padding-top: 5em;
	}

	#mw-header {
		max-width: 115em;
		justify-content: right;
	}

	/* colors! :D */
	#mw-header-container,
	#mw-header-hack .color-middle,
	#mw-header-hack .color-left,
	#mw-header-hack .color-right {
		background: transparent;
	}

	#mw-header-hack {
		box-shadow: 0 0;
	}

	#mw-header-container {
		color: #fff;
	}

	/* title text removal */
	#p-logo-text {
		display: none;
	}

	/* searchbar theming and adjustments */
	#simpleSearch {
		background: var(--less-dark-grey);
		border: solid 2px #39404a;
	}

	#searchInput {
		color: #fff;
	}

	#p-search {
		flex: 0 1 auto;
		padding-right: 1em;
	}

	#p-search input:focus {
		outline: none;
	}

	#searchInput::placeholder {
		opacity: .8;
		font-weight: 500;
	}

	/* account box theming and adjustments */
	#user-tools {
		background: var(--less-dark-grey);
		border-radius: 8px;
		border: solid 2px #39404a;
		filter: drop-shadow(0 0 0.4rem #000);
		transition: background-color 0.1s ease-in-out;
	}

	#user-tools:has(.dropdown-active) {
		background: #16191c;
		border: solid 2px #24282e;
	}

	/* account box adjustments */
	#user-tools {
		width: 12.5em; /* magic number, NO IDEA why it has to be different from the column below it to *kinda* match it in width, investigate later */
		min-width: 0;
		display: flex;
		justify-content: center;
	}

	/* account name fix */
	#personal {
		padding: 0;
	}
	#personal h2 {
		padding: .25em 0 0 1.5em; /* magic numbers */
	}

	/* dropdown theming, totally arbitrary, please change */
	#personal .dropdown {
		background: #1e262c;
		border: solid #252e34;
	}

	/* I HATE CHEVRONS MADE LIKE THIS */
	#personal .dropdown:before {
		border-bottom: 10px solid transparent;
	}

	#personal .dropdown::after {
		border-bottom-color: #252e34;
		top: -10px;
	}

/*

▀███▀▀▀███ ▄▄█▀▀██▄   ▄▄█▀▀██▄ ███▀▀██▀▀██████▀▀▀███▀███▀▀▀██▄
  ██    ▀███▀    ▀██▄██▀    ▀██▄▀   ██   ▀█ ██    ▀█  ██   ▀██▄
  ██   █ ██▀      ▀███▀      ▀██    ██      ██   █    ██   ▄██
  ██▀▀██ ██        ███        ██    ██      ██████    ███████
  ██   █ ██▄      ▄███▄      ▄██    ██      ██   █  ▄ ██  ██▄
  ██     ▀██▄    ▄██▀██▄    ▄██▀    ██      ██     ▄█ ██   ▀██▄
▄████▄     ▀▀████▀▀   ▀▀████▀▀    ▄████▄  ▄██████████████▄ ▄███▄

*/

	/* colors! :D */
	.mw-footer-container {
		border-top: solid 1px var(--less-dark-grey);
		background: #1a1d1c;
		/* background-image: url('https://i.imgur.com/Z2x34d3.jpeg'), linear-gradient(120deg, transparent 15%, #1a1d1c 25%);
		background-size: contain;
		background-repeat: no-repeat; */
	}

	/* FIGURE OUT POTENTIALLY HAVING CUSTOM IMAGES IN THE FOOTER LATER
	.mw-footer-container::after {
		background: linear-gradient(120deg, transparent 20%, #1a1d1c 30%);
	} */

	/* center it a bit more */
	.mw-footer {
		max-width: 80em;
	}

	/* fix ghost margin at bottom of page */
	.mw-footer ul,
	.mw-footer li {
		margin: 0;
		padding: .3em 0;
	}


/*

▀███▀▀▀███▀███▀▀▀██▄ ▀████▀██▀▀██▀▀███ ▄▄█▀▀██▄ ▀███▀▀▀██▄
  ██    ▀█  ██    ▀██▄ ██ █▀   ██   ▀███▀    ▀██▄ ██   ▀██▄
  ██   █    ██     ▀██ ██      ██    ██▀      ▀██ ██   ▄██
  ██████    ██      ██ ██      ██    ██        ██ ███████
  ██   █  ▄ ██     ▄██ ██      ██    ██▄      ▄██ ██  ██▄
  ██     ▄█ ██    ▄██▀ ██      ██    ▀██▄    ▄██▀ ██   ▀██▄
▄██████████████████▀ ▄████▄  ▄████▄    ▀▀████▀▀ ▄████▄ ▄███▄

*/

/*

▀██▀  ▀█▀ ▀██▀  ▄█▀▀▀▄█  ▀██▀  ▀█▀     █     ▀██▀
 ▀█▄  ▄▀   ██   ██▄▄  ▀   ██    █     ███     ██
  ██  █    ██    ▀▀███▄   ██    █    █  ██    ██
   ███     ██  ▄     ▀██  ██    █   ▄▀▀▀▀█▄   ██
    █     ▄██▄ █▀▄▄▄▄█▀    ▀█▄▄▀   ▄█▄  ▄██▄ ▄██▄▄▄▄▄█

*/

	/* colors! :D */
	.oo-ui-toolbar-bar,
	.oo-ui-toolbar-position-top>.oo-ui-toolbar-bar {
		background-color: var(--less-dark-grey);
		border-bottom: 1px solid var(--more-dark-grey);
	}

	.oo-ui-menuToolGroup {
		border: 0;
	}

	.oo-ui-popupToolGroup.oo-ui-widget-enabled>.oo-ui-popupToolGroup-handle:hover,
	.oo-ui-tool.oo-ui-widget-enabled>.oo-ui-tool-link:hover {
		background: #0000003d;
	}

	/* invert the icons (stinky) */
	.oo-ui-iconElement-icon,
	.oo-ui-indicator-down {
		filter: invert(1);
	}

	/* round the corners */
	.oo-ui-toolbar-bar {
		border-radius: 15px 15px 0 0;
	}

/*

 ▄█▀▀▀▄█   ▄▄█▀▀██   ▀██▀  ▀█▀ ▀██▀▀█▄     ▄▄█▀▀▀▄█ ▀██▀▀▀▀█
 ██▄▄  ▀  ▄█▀    ██   ██    █   ██   ██  ▄█▀     ▀   ██  ▄
  ▀▀███▄  ██      ██  ██    █   ██▀▀█▀   ██          ██▀▀█
▄     ▀██ ▀█▄     ██  ██    █   ██   █▄  ▀█▄      ▄  ██
█▀▄▄▄▄█▀   ▀▀█▄▄▄█▀    ▀█▄▄▀   ▄██▄  ▀█▀  ▀▀█▄▄▄▄▀  ▄██▄▄▄▄▄█

*/

	/* I AM *NOT* DOING THIS RIGHT NOW, SOMEONE ELSE HANDLE THIS LATER */