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

From VRChat Wiki
m (removin' !important metadata)
(today's work getting big's concept drafted, STILL ROUGH- MOBILE *VERY* BROKEN)
Line 1: Line 1:
/* GENERAL THINGS:
/* 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)
- 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
- 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!!)
- 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!!)
Line 19: Line 19:
*/
*/


@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;600;700;800');
@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 */
/* establish faux white text globally */
Line 25: Line 25:
color: #f8f9fa;
color: #f8f9fa;
}
}
/* REQUIRED to define the footer color (otherwise there's a bit of unaccounted space at the very bottom, no idea why- investigate later!!) */
/* main BG, INVESTIGATE SCALING AND POSSIBLY DITHERING THE GRADIENT */
body{
body{
background: #252a30;
background: #0f1117;
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%, #0f1117 35%), linear-gradient(to right, rgb(15, 17, 23) 10%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%, rgb(15, 17, 23) 90%);
}
}


/* ugly serif fonts BEGONE */
/* 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{
.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: Dosis;
font-family: "Exo 2";
font-weight: 600;
}
}
body{
font-family: "Noto Sans"
}


/*
/*
Line 46: Line 59:


*/
*/
 
/* colors! :D */
/* colors! :D */
#mw-content-container{
#mw-content-container{
background: #181b1f;
background: transparent;
}
}
#mw-content{
#mw-content{
background: #07242b;
background: #181b1f;
color: #f8f9fa;
color: #f8f9fa;
border: solid #053c48;
border: solid #282a2e;
}
}
/* these are kinda arbitrary */
/* these are kinda arbitrary */
Line 75: Line 88:


/* silly tiled background textue (VERY WIP, SUBJECT TO HEAVY CHANGE, *PLEASE* HELP ME OUT HERE) */
/* silly tiled background textue (VERY WIP, SUBJECT TO HEAVY CHANGE, *PLEASE* HELP ME OUT HERE) */
#mw-content-container{
/* #mw-content-container{
background-image: url("https://i.imgur.com/SIyo36l.png");
background-image: url("https://i.imgur.com/SIyo36l.png");
background-repeat: repeat;
background-repeat: repeat;
background-size: 300px;
background-size: 300px;
}
} */


/* roundin' the corners! (subject to change) */
/* roundin' the corners! (subject to change) */
Line 156: Line 169:


/* colors! :D */
/* colors! :D */
.sidebar-chunk{
#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk{
background: #07343f;
background: #252a30;
color: #f8f9fa;
color: #f8f9fa;
border: solid #086c84;
border: solid #3c4148;
}
}
/* these are kinda arbitrary */
/* these are kinda arbitrary */
Line 182: Line 195:
/* hiding the top-left logo for now */
/* hiding the top-left logo for now */
#p-logo{
#p-logo{
display: none;
display: inline;
}
}


Line 212: Line 225:


*/
*/
/* fundamental layout adjustments */
#mw-header-container{
position: relative;
padding-top: 10em;
}
#mw-header{
max-width: inherit;
justify-content: right;
}


/* colors! :D */
/* colors! :D */
#mw-header-container{
#mw-header-container{
background: linear-gradient(0deg, #07242b 0%, #07343f 100%);
background: transparent;
}
}
#mw-header-hack .color-middle, #mw-header-hack .color-left, #mw-header-hack .color-right{
#mw-header-hack .color-middle, #mw-header-hack .color-left, #mw-header-hack .color-right{
background: #053c48;
background: transparent;
}
#mw-header-hack{
box-shadow: 0 0;
}
}
#p-logo-text a, #mw-header-container{
#p-logo-text a, #mw-header-container{
Line 224: Line 250:
}
}


/* title text fix, should be an SVG */
/* title text removal */
#p-logo-text a{
#p-logo-text{
font-family: Dosis;
display: none;
padding: 0;
}
#p-logo-text a:hover{
text-decoration: none;
}
}


/* narrow the width of the header's content */
/* searchbar theming and adjustments */
@media screen and (min-width: 1340px) {
#mw-header{
max-width: 90em;
margin: 0 auto;
}
#user-tools{
min-width: 14em;
}
}
#simpleSearch{
#simpleSearch{
background: #07343f;
background: #252a30;
border: solid 2px #086c84;
border: solid 2px #39404a;
}
}
#searchInput{
#searchInput{
color: #fff;
color: #fff;
}
}
#p-search{
flex: 0 1 auto;
padding-right: 1em;
}
 
/* account box theming and adjustments */
#user-tools{
background: #252a30;
border-radius: 8px;
border: solid 2px #39404a;
filter: drop-shadow(0 0 0.4rem #000);
}
/* account name fix */
/* account name fix */
#personal h2{
#personal h2{

Revision as of 03:10, 27 July 2024

	/* 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!!)

	*/


	/* VRCWEBTWEAKS COLOR CODES:
	--fauxWhite: #f8f9fa;
	--blueText: #6ae3f9;
	--moreDarkGreen: #07242b;
	--moreDarkGreenBorder: #053c48;
	--lessDarkGreen: #07343f;
	--lessDarkGreenBorder: #086c84;
	--moreDarkGrey: #181b1f;
	--lessDarkGrey: #252a30;
	*/

	@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: #0f1117;
		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%, #0f1117 35%), linear-gradient(to right, rgb(15, 17, 23) 10%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%, rgb(15, 17, 23) 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{
		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;
	}

	/* 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;
	}


/*

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

*/



/*

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

*/

	/* 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: 10em;
	}
	#mw-header{
		max-width: inherit;
		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;
	}

	/* account box theming and adjustments */
	#user-tools{
		background: #252a30;
		border-radius: 8px;
		border: solid 2px #39404a;
		filter: drop-shadow(0 0 0.4rem #000);
	}
	/* 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;
	}
	.mw-footer{
		max-width: 80em;
	}


/*

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

*/

/*

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

*/

	/* 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, .oo-ui-labelElement-label{
		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 */
Retrieved from "https://wiki.vrchat.com/index.php?title=User:Usr_edc96730-b899-466c-b373-34e59e839444/timeless.css&oldid=1260"