Level AS-600
/*fonts*/ @import url('https://fontlibrary.org/face/fantasque-sans-mono'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap'); @import url('https://fonts.googleapis.com/css?family=Basic|IBM+Plex+Mono:400,700'); @font-face { font-family: 'ChillGSans'; src: url('https://cdn.jsdelivr.net/gh/LupusCaeruleus/Fonts@main/ChillGSans.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } :root { --theme-base: "black-highlighter"; --theme-id: "stardust"; --theme-name: "Stardust Theme"; /* Header */ --logo-image: url("http://backrooms-wiki.wikidot.com/local--files/component:theme/logo.svg"); --header-title: "The Backrooms"; --header-subtitle: "触及群星"; /* Typefaces */ --body-font: proxima-nova, 'Noto Sans SC', sans-serif; --header-font: 'Fantasque Sans Mono', 'ChillGSans', sans-serif; --title-font: 'Fantasque Sans Mono', 'ChillGSans', sans-serif; --mono-font: 'Fantasque Sans Mono', 'Noto Serif SC', serif; /* Standard Colors */ --white-monochrome: 250, 250, 250; /* white*/ --black-monochrome: 0, 0, 0; /* black */ --bright-accent: 71, 213, 240; /* the bright blue */ --medium-accent: 167, 27, 59; /* the bright blue animated */ --dark-accent: 24, 36, 56; /* dark blue for background*/ /* Primary Theme Colors */ --swatch-background: var(--black-monochrome); --swatch-primary: var(--bright-accent); --swatch-primary-darker: var(--medium-accent); --swatch-primary-darkest: var(--black-monochrome); /* Primary Text Colors */ --swatch-text-dark: var(--white-monochrome); --swatch-text-light: var(--white-monochrome); --swatch-important-text: var(--bright-accent); --barColour: var(--very-light-gray-monochrome); --linkColour: var(--pale-accent); /* Primary Menu Colors */ --swatch-menubg-color: var(--black-monochrome); --swatch-menubg-light-color: var(--pale-gray-monochrome); --swatch-menubg-medium-color: var(--light-gray-monochrome); --swatch-menubg-medium-dark-color: var(--gray-monochrome); --swatch-menubg-dark-color: var(--dark-gray-monochrome); --swatch-menubg-black-color: var(--black-monochrome); --swatch-menubg-hover-color: var(--black-monochrome); --swatch-menutxt-dark-color: var(--white-monochrome); --swatch-menutxt-light-color: var(--white-monochrome); --swatch-border-color: var(--bright-accent); /* Primary Header Colors */ --swatch-headerh1-color: var(--white-monochrome); --swatch-headerh2-color: var(--white-monochrome); --swatch-topmenu-border-color: var(--bright-accent); --swatch-topmenu-bg-color: var(--black-monochrome); /* Link Colors */ --link-color: var(--bright-accent); --visited-link-color: var(--medium-accent); --hover-link-color: var(--bright-accent); --sidebar-links-text: var(--swatch-menutxt-dark-color); --link-color-bright: var(--medium-accent); /* Rating Module Colors */ --rating-module-button-color: var(--black-monochrome); --rating-module-text-color: var(--swatch-menutxt-dark-color); --rating-module-text-hover-color: var(--swatch-menutxt-light-color); /* Header Gradients */ --gradient-header: none; --diagonal-stripes: none; } /*weird stuff*/ #login-status { color: rgb(var(--bright-accent)); } hr { background-color: rgb(var(--bright-accent)); border-color: rgb(var(--bright-accent)); } #page-title { border-color: rgb(var(--bright-accent)); color: rgb(var(--bright-accent))!important; } #skrollr-body { background-image: none; } div#container-wrap{ background: url(http://vivarium.wdfiles.com/local--files/backrooms%3Astarstheme/coolbgfr.jpg) top center repeat-x; background-size: 100%; } #container { background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 37%); background-size: 37rem 37rem; background-attachment: scroll; } #header { background-image: none; } /* Header Colours */ h1, h2, h3, h4, h5, h6 { color: rgb(var(--bright-accent)); } /*image block*/ .scp-image-block .scp-image-caption { color: rgb(var(--bright-accent)); background-color: rgba(var(--bright-accent), .25); border-color: rgba(var(--bright-accent), .25); } /*rate module*/ .page-rate-widget-box { background: rgba(var(--bright-accent), .5); border-color: rgba(var(--black-monochrome)); border-width: 0px; } /*table*/ table.wiki-content-table th { border: 1px solid rgb(var(--medium-accent)) !important; background-color: rgba(var(--medium-accent), .25); color: rgb(var(--medium-accent)); } table.wiki-content-table td { border: 1px solid rgb(var(--medium-accent)) !important; } /*search box*/ #search-top-box-input { background-color: rgba(var(--bright-accent), .25); } #search-top-box-input:hover, #search-top-box-input:focus { background: rgba(var(--medium-accent), .25); } /*buttons*/ div#page-options-bottom > a:hover, div#page-options-bottom > a:active, div#page-options-bottom-2 > a:hover, div#page-options-bottom-2 > a:active { background-color: rgba(var(--bright-accent), .25); } /*top bar*/ #top-bar div.top-bar > ul > li > ul, #top-bar div.mobile-top-bar > ul > li > ul { background-color: rgba(var(--bright-accent), 0.5); } #top-bar div.top-bar > ul > li > a:hover, #top-bar div.mobile-top-bar > ul > li > a:hover { background-color: rgba(var(--bright-accent), 0.5); } #top-bar div.top-bar > ul > li:hover > a, #top-bar div.mobile-top-bar > ul > li:hover > a { background-color: rgba(var(--bright-accent), 0.5); } /* TABVIEW - Abandon All Hope Ye Who Enter Here */ .yui-navset .yui-content { background-color:rgba(var(--medium-accent), .25); border-color: rgba(var(--medium-accent), 1); } /*unselected tab color*/ .yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a { background-color: rgba(var(--medium-accent), .25); color:rgb(var(--white-monochrome)); } /*hover tab bg*/ .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus { background-color: rgba(var(--bright-accent), .25); } /*selected tab bg*/ .yui-navset .yui-nav .selected, .yui-navset .yui-navset-top .yui-nav .selected { background-color: rgba(var(--medium-accent), 1); } .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:active { background-color: rgba(var(--medium-accent), 1); } /*backer background*/ .yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li { background: rgb(var(--black-monochrome)); } /*mobile stuff*/ @media only screen and (max-width:768px){ :root{ --header-height-on-mobile: 7.5rem; } #main-content { max-width: 90vw; padding: 0; margin: 9.2em auto 0; } #header { position: absolute; top: 0rem; height: var(--header-height-on-mobile); } div#container-wrap{ background: url(http://vivarium.wdfiles.com/local--files/backrooms%3Astarstheme/coolbgfr.jpg) top center repeat-x; background-size: 220%; } #container { background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 37%); background-size: 20rem 20rem; background-attachment: scroll; } } @media only screen and (max-width:1366px){ #container { background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 37%); background-size: 25rem 25rem; background-attachment: scroll; } div#container-wrap{ background: url(http://vivarium.wdfiles.com/local--files/backrooms%3Astarstheme/coolbgfr.jpg) top center repeat-x; background-size: 160%; } } /*funny blocks*/ blockquote, .blockquote, div.blockquote, [class*="blockquote"] { box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25); background-color:rgba(var(--bright-accent), .25); border-color: rgb(var(--bright-accent)); } .styled-quote { background-color:rgba(var(--bright-accent), .25); border-left: 0.5rem solid rgb(var(--bright-accent)); padding: 0.1rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25); } .dark-styled-quote { background-color:rgba(var(--medium-accent), .25); border-left: 0.5rem solid rgb(var(--medium-accent)); color:rgb(var(--white-monochrome)); padding: 0.1rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25); } .dark-styled-quote a{ color: rgb(var(--swatch-menubg-medium-color)); } .lightblock { background-color:rgba(var(--bright-accent), .25); padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); } .darkblock { background-color:rgba(var(--medium-accent), .25); color:rgb(var(--white-monochrome)); padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); } #header h1 a::before, #header h2 span::before { --text-shadow: 0px 2px 3px rgba(0,0,0,0.8); }
