User:EpicestGamer/cosmos.css

/** * Hi! this is my custom css for fallout.wiki * * This is primarily made for dark mode, so light mode is left mostly untested, as a result, I do not recommend using it with light mode! * I made this so that I could tweak the site a bit more for my liking, custom fonts, darker pages, different backgrounds, better contrast. * However, it turns out that there's a lot of css to go through! I've got some basic things set up, but a lot of pages and elements *will* look bad until I see them. */

/* Personal variable declaration */
 * root {

--epicestgamer-cosmos-banner-backgroundcolor: #1e2f36ee; --epicestgamer-search-backgroundcolor: #00000066; --epicestgamer-background-image-gradient: url(https://cdn.discordapp.com/attachments/1103445304050724915/1103446019833860126/TransbianShelter_Background_Gradients.png); --epicestgamer-background-image-tile: url(https://cdn.discordapp.com/attachments/1103445304050724915/1103446018999193620/TransbianShelter_Background_Tile.png); --epicestgamer-background-image-noise: url(https://cdn.discordapp.com/attachments/1103445304050724915/1103446020068737117/TransbianShelter_Background_Noise.png); --epicestgamer-mw-content-light-background-color: #f7f7f7; --epicestgamer-mw-content-light-background-color-alpha: #f7f7f766; --epicestgamer-mw-content-dark-background-color: #000000; --epicestgamer-mw-content-dark-background-color-alpha: #00000066; --epicestgamer-mw-content-light-background-image-tile: url(https://cdn.discordapp.com/attachments/1103445304050724915/1103446019578019860/Fallout_Background_Tiled_Light.png); --epicestgamer-mw-content-dark-background-image-tile: url(https://cdn.discordapp.com/attachments/1103445304050724915/1103450708394647622/image.png); --epicestgamer-theme-color-darker-than-white: #DDD; --epicestgamer-theme-color-lighter-than-black: #0F0F0F; --epicestgamer-theme-color-lighter-than-lighter-than-black: #1F1F1F; }

/* Premade variable edits */
 * root {

--theme-page-background-color--secondary: var(--epicestgamer-theme-color-lighter-than-black) !important; --pi-cell-even-color: var(--epicestgamer-theme-color-lighter-than-black) !important; }

/* Imports fonts from Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&family=Share+Tech+Mono&display=swap');

/* Transparency effects for the search banner, minor ui bugfixes. */	background: var(--epicestgamer-cosmos-banner-backgroundcolor); }	background: none; }	background: none; }
 * 1) cosmos-banner {
 * 1) cosmos-banner-search {
 * 1) cosmos-banner-userOptions {

/* Changes searchform's background color */ background: var(--epicestgamer-search-backgroundcolor); }
 * 1) searchform input {

/* Adjusts Cosmos' banner button colors for contrast */ filter: invert(100%); }	filter: invert(100%); background-color: red; }	filter: invert(100%); border-color: #FFFFFF; }	border-color: #FFFFFF; }	color: white; }	stroke: white; fill: white; }
 * 1) cosmos-banner .cosmos-bannerOption-icon {
 * 1) cosmos-banner .cosmos-bannerOption-icon .mw-echo-notifications-badge::after {
 * 1) cosmos-banner .cosmos-userOptions-personalTools img {
 * 1) cosmos-banner .cosmos-userOptions-personalTools:hover img {
 * 1) cosmos-banner .cosmos-userButton-label {
 * 1) cosmos-banner .cosmos-bannerOption-dropdownIcon {

/* Removes header background */ .cosmos-header::before { background: none; } /* Removes the shadow and gradient on Cosmos's toolbar */ background: #111111; box-shadow: none; }
 * 1) cosmos-toolbar {

/* Only applies if viewport width is larger than 851 pixels */ /* I.E. on desktop devices. */ @media screen and (min-width: 851px) { /* Decreases the width of the cosmos banner content */ #cosmos-banner-content { padding: 0 20vw; }	/* Widens page content */ #mw-content-wrapper { width: 75vw; }	/* Centers Cosmos's toolbar */ #cosmos-toolbar { float: none; margin: 0 auto; } }

/* Only applies if viewport width is smaller than 850 pixels */ /* I.E. on mobile devices. */ @media screen and (max-width: 850px) { /* Fixes Cosmos' toolbar footer width */ #cosmos-toolbar { width: calc(100% - 10px); }	/* Adds transparency to the page content background */ #mw-content { background-color: var(--epicestgamer-mw-content-light-background-color-alpha) !important; background-size: 125px; }	.theme-dark #mw-content { background-color: var(--epicestgamer-mw-content-dark-background-color-alpha) !important; background-size: 125px; } }

/* Removes the new wiki banner image*/ display: none; }
 * 1) mw-content-banner {

/* Changes the whole page background */ /* Make sure I can occupy the entire space for scrolling effects */ html{ min-height:100%;/* make sure it is at least as tall as the viewport */ position:relative; }

body{ height:100%; /* force the BODY element to match the height of the HTML element */ }

/* Where the magic happens */ .theme-dark:after { position: absolute; z-index: -1; top: 0; bottom:0; left: 0; right: 0; content: ''; overflow:hidden; background: var(--epicestgamer-background-image-gradient), var(--epicestgamer-background-image-noise), var(--epicestgamer-background-image-tile); background-repeat: no-repeat, repeat, repeat; background-blend-mode: multiply; background-size: 100% 100%, 16.18033988749894in, 2in; background-position: center; background-attachment: fixed, scroll, scroll; }

/* Better tiling page content background */ background-color: var(--epicestgamer-mw-content-light-background-color); background-image: var(--epicestgamer-mw-content-light-background-image-tile); background-repeat: repeat; background-size: 125px; }
 * 1) mw-content {

/* Better looking dark mode page content background */ .theme-dark #mw-content { background-color: var(--epicestgamer-mw-content-dark-background-color); background-image: var(--epicestgamer-mw-content-dark-background-image-tile); }

/* Changes monospace font to Share Tech Mono */ .mw-highlight pre, #cosmos-pageBody-content pre, pre, code, tt, kbd, samp, .mw-code { color: var(--epicestgamer-theme-color-darker-than-white); font-family: 'Share Tech Mono', monospace !important; font-size: 14px; }

/* Corrected collapsible content background */ .toccolours { background-color: var(--epicestgamer-theme-color-lighter-than-black); }

/* Adjust's line numbering background color */ .mw-content-ltr.mw-highlight-lines pre { box-shadow: inset 2.75em 0 0 var(--epicestgamer-theme-color-lighter-than-lighter-than-black); }