Usr edc96730-b899-466c-b373-34e59e839444/timeless.css: Difference between revisions

From VRChat Wiki
(lots of tweaks today! *boy do we need version control for this* (soon™))
(no need for this page at the moment :))
Tag: Replaced
 
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 */

Latest revision as of 19:51, 29 July 2024

/* moved to global :) */