|
|
| Line 1: |
Line 1: |
| /* GENERAL THINGS:
| | /* moved to global :) */ |
| | |
| - 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!!)
| |
| | |
| */
| |
| | |
| | |
| /* VRCWEBTWEAKS COLOR CODES:
| |
| --fauxWhite: #f8f9fa;
| |
| --blueText: #6ae3f9;
| |
| --moreDarkGreen: #07242b;
| |
| --moreDarkGreenBorder: #053c48;
| |
| --lessDarkGreen: #07343f;
| |
| --lessDarkGreenBorder: #086c84;
| |
| --moreDarkGrey: #181b1f;
| |
| --lessDarkGrey: #252a30;
| |
| */
| |
| | |
| /* MAKE SURE THESE ARE NATIVE AT SOME POINT */
| |
| @import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
| |
| | |
| /* establish faux white text globally */
| |
| body{
| |
| color: #f8f9fa;
| |
| }
| |
|
| |
| /* main BG, INVESTIGATE SCALING AND POSSIBLY DITHERING THE GRADIENT */
| |
| body{
| |
| background: #10171c;
| |
| background-image: url('https://i.imgur.com/Z2x34d3.jpeg');
| |
| background-size: 80%;
| |
| background-repeat: no-repeat;
| |
| background-position: top center;
| |
| }
| |
| #mw-wrapper{
| |
| background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, #10171c 35%), linear-gradient(to right, #10171c 10%, #10171c00 20%, #10171c00 80%, #10171c 90%);
| |
| }
| |
| | |
| /* 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";
| |
| font-weight: 600;
| |
| }
| |
| body{
| |
| font-family: "Noto Sans"
| |
| }
| |
| | |
| | |
| /*
| |
| | |
| ▀███▀▀▀██▄ ▄▄█▀▀██▄ ▀███▀▀▀██▄ ▀███▀ ▀██▀
| |
| ██ ████▀ ▀██▄ ██ ▀██▄ ███ ▄█
| |
| ██ ███▀ ▀██ ██ ▀██ ███ ▄█
| |
| ██▀▀▀█▄▄█ ██ ██ ██ ████
| |
| ██ ▀██▄ ▄██ ██ ▄██ ██
| |
| ██ ▄███▄ ▄██▀ ██ ▄██▀ ██
| |
| ▄████████ ▀▀████▀▀ ▄████████▀ ▄████▄
| |
| | |
| */
| |
| | |
| /* colors! :D */
| |
| #mw-content-container{
| |
| background: transparent;
| |
| }
| |
| #mw-content{
| |
| background: #181b1f;
| |
| color: #f8f9fa;
| |
| border: solid #282a2e;
| |
| }
| |
| /* these are kinda arbitrary */
| |
| #mw-content a{
| |
| color: #6bd4ff;
| |
| }
| |
| #mw-content a:hover{
| |
| color: #468ca9;
| |
| }
| |
| #mw-content a:visited{
| |
| color: #509fdd;
| |
| }
| |
| #mw-content a:visited:hover{
| |
| 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);
| |
| }
| |
| | |
| /* silly tiled background textue (VERY WIP, SUBJECT TO HEAVY CHANGE, *PLEASE* HELP ME OUT HERE) */
| |
| /* #mw-content-container{
| |
| background-image: url("https://i.imgur.com/SIyo36l.png");
| |
| background-repeat: repeat;
| |
| background-size: 300px;
| |
| } */
| |
| | |
| /* 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 */
| |
| .toc{
| |
| background: #07343f;
| |
| border-width: .15em .15em .2em;
| |
| border-color: #086c84;
| |
| }
| |
| /* A.R.B.I.T.R.A.R.Y */
| |
| ul#filetoc, .toc, .toccolours, .mw-warning{
| |
| background: #2e2f35;
| |
| border: 3px solid #3b3f4a;
| |
| }
| |
| | |
| /* general content thumbnail theming */
| |
| .thumbinner{
| |
| background: #07343f;
| |
| border: solid #086c84;
| |
| border-radius: 10px;
| |
| }
| |
| .thumbinner .thumbimage, .thumbborder{
| |
| border: 0;
| |
| filter: drop-shadow(0 0 0.2rem #000);
| |
| }
| |
| | |
| /* code block theming */
| |
| code{
| |
| background: #252a30;
| |
| border: 1px solid #181b1f;
| |
| color: #f8f9fa;
| |
| }
| |
|
| |
| /* table theming; COLORS ARE ARBITRARY */
| |
| .wikitable{
| |
| color: #fff;
| |
| }
| |
| .wikitable > * > tr > th{
| |
| background: #17181d;
| |
| }
| |
| .wikitable tr{
| |
| background: #2d3135;
| |
| }
| |
| .wikitable tr:nth-child(2n){
| |
| background: #212428;
| |
| }
| |
| .wikitable, .wikitable > * > tr > th, .wikitable > * > 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-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{
| |
| vertical-align: middle;
| |
| }
| |
| .portable-infobox .pi-data-value > :not(ul){
| |
| margin: 0;
| |
| }
| |
| | |
| | |
| /*
| |
| | |
| ▀██ ██▀ ▀██▀▀▀▀█ ▀██▀▀█▄ ▀██▀ █ ▀██ ▀██▀ ▀█▀ ▀██▀ ▀██▀ █▀ ▀██▀
| |
| ███ ███ ██ ▄ ██ ██ ██ ███ ▀█▄ ▀█▄ ▄▀ ██ ██ ▄▀ ██
| |
| █▀█▄▄▀██ ██▀▀█ ██ ██ ██ █ ██ ██ ██ █ ██ ██▀█▄ ██
| |
| █ ▀█▀ ██ ██ ██ ██ ██ ▄▀▀▀▀█▄ ███ ███ ██ ██ ██ ██
| |
| ▄█▄ █ ▄██▄ ▄██▄▄▄▄▄█ ▄██▄▄▄█▀ ▄██▄ ▄█▄ ▄██▄ █ █ ▄██▄ ▄██▄ ██▄ ▄██▄
| |
| | |
| */
| |
| | |
| /* preferences colors */
| |
| .oo-ui-panelLayout-framed{
| |
| border: 3px solid;
| |
| color: #fff;
| |
| }
| |
| .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{
| |
| background: #252a30;
| |
| }
| |
| .oo-ui-menuLayout-content{
| |
| background: #1b1f23;
| |
| }
| |
|
| |
| /* 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;
| |
| }
| |
| .mw-prefs-buttons #prefcontrol{
| |
| border: 5px solid #000;
| |
| }
| |
| .oo-ui-tabOptionWidget{
| |
| color: #ffffffab;
| |
| }
| |
| /* 🦀 REAL NAME IS GONE 🦀 */
| |
| [data-ooui*="Real name"]{
| |
| pointer-events: none;
| |
| display: none;
| |
| }
| |
| | |
| /*
| |
| | |
| ▄█▀▀▀█▄█████▀███▀▀▀██▄ ▀███▀▀▀███▀███▀▀▀██▄ ██ ▀███▀▀▀██▄ ▄█▀▀▀█▄█
| |
| ▄██ ▀█ ██ ██ ▀██▄ ██ ▀█ ██ ██ ▄██▄ ██ ▀██▄▄██ ▀█
| |
| ▀███▄ ██ ██ ▀██ ██ █ ██ ██ ▄█▀██▄ ██ ▄██ ▀███▄
| |
| ▀█████▄ ██ ██ ██ ██████ ██▀▀▀█▄▄ ▄█ ▀██ ███████ ▀█████▄
| |
| ▄ ▀██ ██ ██ ▄██ ██ █ ▄ ██ ▀█ ████████ ██ ██▄ ▄ ▀██
| |
| ██ ██ ██ ██ ▄██▀ ██ ▄█ ██ ▄█ █▀ ██ ██ ▀██▄██ ██
| |
| █▀█████▀▄████▄████████▀ ▄██████████████████▄███▄ ▄████▄████▄ ▄███▄▀█████▀
| |
| | |
| */
| |
| | |
| /* colors! :D */
| |
| #mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk{
| |
| background: #252a30;
| |
| color: #f8f9fa;
| |
| border: solid #3c4148;
| |
| }
| |
| /* these are kinda arbitrary */
| |
| .sidebar-chunk a{
| |
| color: #6bd4ff;
| |
| }
| |
| .sidebar-chunk a:hover{
| |
| color: #468ca9;
| |
| }
| |
| .sidebar-chunk a:visited{
| |
| color: #509fdd;
| |
| }
| |
| .sidebar-chunk a:visited:hover{
| |
| color: #3874a3;
| |
| }
| |
| | |
| /* round the corners for the sidebars a bit */
| |
| .sidebar-chunk{
| |
| border-radius: 15px;
| |
| }
| |
| | |
| /* hiding the top-left logo for now */
| |
| #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;
| |
| }
| |
| | |
| | |
| | |
| | |
| /*
| |
| | |
| ▀████▀ ▀████▀▀███▀▀▀███ ██ ▀███▀▀▀██▄ ▀███▀▀▀███▀███▀▀▀██▄
| |
| ██ ██ ██ ▀█ ▄██▄ ██ ▀██▄ ██ ▀█ ██ ▀██▄
| |
| ██ ██ ██ █ ▄█▀██▄ ██ ▀██ ██ █ ██ ▄██
| |
| ██████████ ██████ ▄█ ▀██ ██ ██ ██████ ███████
| |
| ██ ██ ██ █ ▄ ████████ ██ ▄██ ██ █ ▄ ██ ██▄
| |
| ██ ██ ██ ▄█ █▀ ██ ██ ▄██▀ ██ ▄█ ██ ▀██▄
| |
| ▄████▄ ▄████▄▄█████████████▄ ▄████▄████████▀ ▄██████████████▄ ▄███▄
| |
| | |
| */
| |
| | |
| /* fundamental layout adjustments */
| |
| #mw-header-container{
| |
| position: relative;
| |
| padding-top: 5em;
| |
| }
| |
| #mw-header{
| |
| max-width: 115em;
| |
| justify-content: right;
| |
| }
| |
| | |
| /* colors! :D */
| |
| #mw-header-container{
| |
| background: transparent;
| |
| }
| |
| #mw-header-hack .color-middle, #mw-header-hack .color-left, #mw-header-hack .color-right{
| |
| background: transparent;
| |
| }
| |
| #mw-header-hack{
| |
| box-shadow: 0 0;
| |
| }
| |
| #p-logo-text a, #mw-header-container{
| |
| color: #fff;
| |
| }
| |
| | |
| /* title text removal */
| |
| #p-logo-text{
| |
| display: none;
| |
| }
| |
| | |
| /* searchbar theming and adjustments */
| |
| #simpleSearch{
| |
| background: #252a30;
| |
| 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 */
| |
| #user-tools{
| |
| background: #252a30;
| |
| 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;
| |
| }
| |
| #personal{
| |
| padding-left: 0;
| |
| }
| |
| | |
| /* account name fix */
| |
| #personal h2{
| |
| padding: .25em 0 0 1.5em;
| |
| }
| |
| | |
| /* 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 #252a30;
| |
| 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; */
| |
| }
| |
| .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: #252a30;
| |
| border-bottom: 1px solid #181b1f;
| |
| }
| |
| .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 */
| |
