MediaWiki:Timeless.css
From VRChat Wiki
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 */
