Theme Colors
Usage
Note: This is a Black Highlighter based theme. You will need to import the Black Highlighter theme as well in order to use this theme. To learn more go here.
On any wiki:
[[include :scp-cs:theme:black-highlighter-theme]]
[[include :scp-cs:theme:aesthetic-theme]]
Examples
A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.
Titles can be created by putting between one and six plus "+" at the start of the line
This is a tab view.
Hey look, more text here.
How quaint.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a blockquote, created by putting "> " at the start of each line.
More text
That's a horizontal rule
Nested blockquotes
This is a | table |
---|---|
You should know | how to make these |
already |
The body font is Rubik.
The Header font is Sedgwick Ave Display.
The Title font is Audiowide.
The monospace font used is Roboto Mono.
Uživatel Modular upravil theme, aby do něj šly zakomponovat moduly info:start a info-ayers.
@import url('https://fonts.googleapis.com/css2?family=Sedgwick+Ave+Display&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap'); @import url("https://use.typekit.net/afb2wxe.css"); @supports(display:grid) { :root { /* S-CSS-P Integration */ /* If you're making a new CSS theme, please include the following three variables at minimum. */ --theme-base: "black-highlighter"; /* must be either "black-highlighter" or "sigma9" */ --theme-id: "AESTHETIC-theme"; /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */ --theme-name: "AESTHETIC Theme"; /* set this to your theme's full name */ /* Header */ --logo-image: url("http://www.scp-wiki.net/local--files/theme:aesthetic-theme/AESTHETIC_logo.png");¨ --header-h2-font-size: 1rem; /* Typefaces */ --body-font: 'Rubik', sans-serif !important; --header-font: 'Sedgwick Ave Display', cursive; --title-font: 'Audiowide', cursive; --mono-font: 'Roboto Mono', monospace; /* Standard Colors */ --white-monochrome: 217, 233, 251; --pale-gray-monochrome: 1, 245, 252; --light-pale-gray-monochrome: 170, 207, 251; --very-light-gray-monochrome: 26, 139, 235; --light-gray-monochrome: 150, 62, 184; --gray-monochrome: 92, 42, 95; --dark-gray-monochrome: 39, 6, 75; --black-monochrome: 14, 12, 45; --bright-accent: 250, 245, 45; --medium-accent: 255, 52, 131; --dark-accent: 195, 42, 158; --newpage-color: 204, 5, 166; --swatch-headerh2-color: var(--dark-gray-monochrome); --swatch-topmenu-border-color: var(--pale-gray-monochrome); --swatch-topmenu-bg-color: var(--dark-gray-monochrome); --swatch-border-color: var(--pale-gray-monochrome); --rating-module-text-color: var(--bright-accent); --rating-module-button-color: var(--bright-accent); --swatch-background: var(--black-monochrome, 14, 12, 45); --background-gradient-color: var(--dark-accent); --header-gradient-color-bottom: var(--light-gray-monochrome); --header-gradient-color-middle: var(--dark-accent); --header-gradient-color-top: var(--medium-accent); --gradient-header: linear-gradient(355deg, rgb(var(--header-gradient-color-bottom)) 0%, rgb(var(--header-gradient-color-middle)) 20%, rgb(var(--header-gradient-color-top)) 100%); --rating-module-text-color: var(--dark-gray-monochrome); --rating-module-button-color: var(--dark-gray-monochrome); --scrollbar-width: 0.5rem; --header-title: "SCP Nadace"; --header-subtitle: "ZAJISTIT, ZADRŽET, CHRÁNIT"; } ::-webkit-scrollbar, #side-bar:hover::-webkit-scrollbar { background-color: rgba(var(--dark-gray-monochrome), 1); } ::-webkit-scrollbar-thumb, #side-bar:hover::-webkit-scrollbar-thumb { background-color: rgba(var(--pale-gray-monochrome), 1); } ::-moz-selection { background: rgba(var(--pale-gray-monochrome), 0.25); } ::selection { background: rgba(var(--pale-gray-monochrome), 0.25); } html { background: white; } html, body { color: rgb(var(--swatch-text-light)); -webkit-font-feature-settings: "onum"0; -moz-font-feature-settings: "onum"0; font-feature-settings: "onum"0; font-variant-numeric: tabular-nums; scrollbar-color: rgb(var(--pale-gray-monochrome)) rgb(var(--dark-gray-monochrome)); } a { color: rgb(var(--swatch-primary-darker)); } @supports((-webkit-mask-image: inherit) or (mask-image: inherit)) { #extra-div-1 { width: 100%; height: -webkit-calc(100% - 9.375rem); height: -moz-calc(100% - 9.375rem); height: calc(100% - 9.375rem); position: absolute; top: 9.375rem; left: 0; background-image: var(--gradient-background); -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 2580' xml:space='preserve'%3E%3Cg id='Outrun Lines'%3E%3Cg%3E%3Crect width='1000' height='60'/%3E%3Crect y='63' width='1000' height='12'/%3E%3Crect y='78' width='1000' height='13'/%3E%3Crect y='94' width='1000' height='12'/%3E%3Crect y='109' width='1000' height='13'/%3E%3Crect y='125' width='1000' height='12'/%3E%3Crect y='141' width='1000' height='12'/%3E%3Crect y='157' width='1000' height='12'/%3E%3Crect y='172' width='1000' height='12'/%3E%3Crect y='187' width='1000' height='12'/%3E%3Crect y='203' width='1000' height='12'/%3E%3Crect y='219.5' width='1000' height='11'/%3E%3Crect y='234.5' width='1000' height='11'/%3E%3Crect y='249.5' width='1000' height='11'/%3E%3Crect y='265.5' width='1000' height='11'/%3E%3Crect y='281' width='1000' height='10'/%3E%3Crect y='297' width='1000' height='10'/%3E%3Crect y='313' width='1000' height='9'/%3E%3Crect y='328' width='1000' height='9'/%3E%3Crect y='343.5' width='1000' height='9'/%3E%3Crect y='359' width='1000' height='8'/%3E%3Crect y='374' width='1000' height='9'/%3E%3Crect y='391' width='1000' height='8'/%3E%3Crect y='407' width='1000' height='8'/%3E%3Crect y='422' width='1000' height='8'/%3E%3Crect y='437' width='1000' height='8'/%3E%3Crect y='453' width='1000' height='8'/%3E%3Crect y='469' width='1000' height='6'/%3E%3Crect y='485' width='1000' height='6'/%3E%3Crect y='501' width='1000' height='4'/%3E%3Crect y='517' width='1000' height='4'/%3E%3Crect y='533' width='1000' height='4'/%3E%3Crect y='549' width='1000' height='3'/%3E%3Crect y='564' width='1000' height='3'/%3E%3Crect y='579' width='1000' height='3'/%3E%3Crect y='595' width='1000' height='3'/%3E%3Crect y='611' width='1000' height='2'/%3E%3Crect y='627' width='1000' height='2'/%3E%3Crect y='643' width='1000' height='2'/%3E%3C/g%3E%3C/g%3E%3Cg id='Layer_2'%3E%3C/g%3E%3C/svg%3E%0A"); mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 2580' xml:space='preserve'%3E%3Cg id='Outrun Lines'%3E%3Cg%3E%3Crect width='1000' height='60'/%3E%3Crect y='63' width='1000' height='12'/%3E%3Crect y='78' width='1000' height='13'/%3E%3Crect y='94' width='1000' height='12'/%3E%3Crect y='109' width='1000' height='13'/%3E%3Crect y='125' width='1000' height='12'/%3E%3Crect y='141' width='1000' height='12'/%3E%3Crect y='157' width='1000' height='12'/%3E%3Crect y='172' width='1000' height='12'/%3E%3Crect y='187' width='1000' height='12'/%3E%3Crect y='203' width='1000' height='12'/%3E%3Crect y='219.5' width='1000' height='11'/%3E%3Crect y='234.5' width='1000' height='11'/%3E%3Crect y='249.5' width='1000' height='11'/%3E%3Crect y='265.5' width='1000' height='11'/%3E%3Crect y='281' width='1000' height='10'/%3E%3Crect y='297' width='1000' height='10'/%3E%3Crect y='313' width='1000' height='9'/%3E%3Crect y='328' width='1000' height='9'/%3E%3Crect y='343.5' width='1000' height='9'/%3E%3Crect y='359' width='1000' height='8'/%3E%3Crect y='374' width='1000' height='9'/%3E%3Crect y='391' width='1000' height='8'/%3E%3Crect y='407' width='1000' height='8'/%3E%3Crect y='422' width='1000' height='8'/%3E%3Crect y='437' width='1000' height='8'/%3E%3Crect y='453' width='1000' height='8'/%3E%3Crect y='469' width='1000' height='6'/%3E%3Crect y='485' width='1000' height='6'/%3E%3Crect y='501' width='1000' height='4'/%3E%3Crect y='517' width='1000' height='4'/%3E%3Crect y='533' width='1000' height='4'/%3E%3Crect y='549' width='1000' height='3'/%3E%3Crect y='564' width='1000' height='3'/%3E%3Crect y='579' width='1000' height='3'/%3E%3Crect y='595' width='1000' height='3'/%3E%3Crect y='611' width='1000' height='2'/%3E%3Crect y='627' width='1000' height='2'/%3E%3Crect y='643' width='1000' height='2'/%3E%3C/g%3E%3C/g%3E%3Cg id='Layer_2'%3E%3C/g%3E%3C/svg%3E%0A"); -webkit-mask-size: 8%; mask-size: 8%; -webkit-mask-position: top; mask-position: top; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; pointer-events: none; opacity: 0.5; } } #header { -webkit-filter: initial; filter: initial; background: inherit; } #header-extra-div-1 { --drop-shadow: rgb(var(--pale-gray-monochrome)); width: 7rem; position: absolute; top: 0; left: 0; z-index: 10; height: 9.375rem; background-image: url("https://nu-scptheme.github.io/Black-Highlighter/images/logo.svg"); background-image: var(--logo-image); background-repeat: no-repeat; background-position: left 0 top 0.1875rem; background-clip: border-box; -webkit-background-size: auto 7rem; -moz-background-size: auto 6.75rem; -o-background-size: auto 6.75rem; background-size: auto 6.75rem; -webkit-filter: drop-shadow(-0.125rem 0.125rem 0rem var(--drop-shadow)); filter: drop-shadow(-0.125rem 0.125rem 0rem var(--drop-shadow)); display: block; pointer-events: none; } #extra-div-2 { --drop-shadow: rgb(var(--pale-gray-monochrome)); display: block; width: 100%; height: 7.5rem; top: 0; left: 0; position: absolute; background: url("http://www.scp-wiki.net/local--files/theme:aesthetic-theme/AESTHETIC_mtns.svg"); background-position: bottom; background-repeat: no-repeat; -webkit-background-size: 200% 200%; -moz-background-size: 200% 200%; -o-background-size: 200% 200%; background-size: 200% 200%; -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); -webkit-mask-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); mask-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); -webkit-filter: drop-shadow(-0.125rem 0.125rem 0rem var(--drop-shadow)); filter: drop-shadow(-0.125rem 0.125rem 1rem var(--drop-shadow)); pointer-events: none; } #header h1 a { font-size: 200%; overflow-wrap: normal; margin-top: -webkit-calc(var(--header-height-on-desktop)/2 - 0.8em); margin-top: -moz-calc(var(--header-height-on-desktop)/2 - 0.8em); margin-top: calc(var(--header-height-on-desktop)/2 - 0.8em); margin-left: var(--header-height-on-desktop); } #header h1 a::after { --text-shadow: rgb(var(--swatch-text-dark, 12, 12, 12, )); content: "SCP Nadace"; content: var(--header-title); color: transparent; text-shadow: .063rem .063rem .063rem #0c0c0c; text-shadow: .063rem .063rem .063rem var(--text-shadow); overflow-wrap: normal; position: absolute; z-index: -1; left: var(--header-height-on-desktop); } @supports(-webkit-background-clip: text) { #header h1 a::before { color: rgb(255, 219, 90); color: rgb(var(--bright-accent)); text-shadow: inherit; background: -webkit-gradient(linear, left bottom, left top, from(rgb(var(--dark-gray-monochrome))), color-stop(20%, rgb(var(--dark-gray-monochrome))), color-stop(40%, rgb(var(--dark-accent))), color-stop(70%, rgb(var(--pale-gray-monochrome)))); background: -webkit-linear-gradient(bottom, rgb(var(--dark-gray-monochrome)) 0%, rgb(var(--dark-gray-monochrome)) 20%, rgb(var(--dark-accent)) 40%, rgb(var(--pale-gray-monochrome)) 70%); background: -moz-linear-gradient(bottom, rgb(var(--dark-gray-monochrome)) 0%, rgb(var(--dark-gray-monochrome)) 20%, rgb(var(--dark-accent)) 40%, rgb(var(--pale-gray-monochrome)) 70%); background: -o-linear-gradient(bottom, rgb(var(--dark-gray-monochrome)) 0%, rgb(var(--dark-gray-monochrome)) 20%, rgb(var(--dark-accent)) 40%, rgb(var(--pale-gray-monochrome)) 70%); background: linear-gradient(to top, rgb(var(--dark-gray-monochrome)) 0%, rgb(var(--dark-gray-monochrome)) 20%, rgb(var(--dark-accent)) 40%, rgb(var(--pale-gray-monochrome)) 70%); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -webkit-background-clip: text; -webkit-text-fill-color: transparent; overflow-wrap: normal; } } #header h2 span { margin-left: -webkit-calc(var(--header-height-on-desktop)); margin-left: -moz-calc(var(--header-height-on-desktop)); margin-left: calc(var(--header-height-on-desktop)); } #header h2 span::before { --text-shadow: rgb(var(--pale-gray-monochrome)); text-shadow: .063rem .063rem .063rem var(--text-shadow); letter-spacing: 0.5em; } #search-top-box input.empty { color: rgba(var(--swatch-primary-darker)); } #top-bar { font-size: var(--base-font-size); } #top-bar div.top-bar > ul > li > a, #top-bar div.mobile-top-bar > ul > li > a { --text-shadow: rgb(var(--pale-gray-monochrome)); padding: .3rem; color: rgb(var(--swatch-primary)) !important; text-shadow: -0.0625rem -0.0625rem 0 var(--text-shadow); text-transform: uppercase; } #top-bar div.top-bar > ul > li > ul { top: -webkit-calc(0.0625rem * -3); top: -moz-calc(0.0625rem * -3); top: calc(0.0625rem * -3); } #top-bar div.top-bar > ul > li > a::after { background: -webkit-gradient(linear, left top, right top, from(rgba(var(--swatch-topmenu-border-color), 0.5)), to(rgba(var(--swatch-topmenu-border-color), 1))); background: -webkit-linear-gradient(left, rgba(var(--swatch-topmenu-border-color), 0.5), rgba(var(--swatch-topmenu-border-color), 1)); background: -moz-linear-gradient(left, rgba(var(--swatch-topmenu-border-color), 0.5), rgba(var(--swatch-topmenu-border-color), 1)); background: -o-linear-gradient(left, rgba(var(--swatch-topmenu-border-color), 0.5), rgba(var(--swatch-topmenu-border-color), 1)); background: linear-gradient(to right, rgba(var(--swatch-topmenu-border-color), 0.5), rgba(var(--swatch-topmenu-border-color), 1)); } #top-bar div.top-bar > ul > li > a::before { background: -webkit-gradient(linear, right top, left top, from(rgba(var(--swatch-topmenu-border-color), 0.5)), to(rgba(var(--swatch-topmenu-border-color), 1))); background: -webkit-linear-gradient(right, rgba(var(--swatch-topmenu-border-color), 0.5), rgba(var(--swatch-topmenu-border-color), 1)); background: -moz-linear-gradient(right, rgba(var(--swatch-topmenu-border-color), 0.5), rgba(var(--swatch-topmenu-border-color), 1)); background: -o-linear-gradient(right, rgba(var(--swatch-topmenu-border-color), 0.5), rgba(var(--swatch-topmenu-border-color), 1)); background: linear-gradient(to left, rgba(var(--swatch-topmenu-border-color), 0.5), rgba(var(--swatch-topmenu-border-color), 1)); } #top-bar li ul, #top-bar:not(:hover) li ul { -webkit-transform: translate(0, 0.3rem); -ms-transform: translate(0, 0.3rem); -o-transform: translate(0, 0.3rem); -moz-transform: translate(0, 0.3rem); transform: translate(0, 0.3rem); } #top-bar div.top-bar > ul > li > ul > li > a { font-weight: 600; } #top-bar div.top-bar > ul > li > ul > li > a::before, #top-bar div.top-bar > ul > li > ul > li > ul > li > a::before, #top-bar div.top-bar > ul > li > ul > li > a:hover::before { background: var(--gradient-header); background-attachment: fixed; background-position: top; -webkit-background-origin: border-box; -moz-background-origin: border-box; -o-background-origin: border-box; background-origin: border-box; -webkit-background-size: 100vh 100vh; -moz-background-size: 100vh; -o-background-size: 100vh; background-size: 100vh; } #side-bar, #side-bar:hover { background: -webkit-gradient(linear, left top, left bottom, from(rgb(var(--black-monochrome))), color-stop(50%, rgb(var(--dark-gray-monochrome))), to(rgb(var(--dark-accent)))); background: -webkit-linear-gradient(top, rgb(var(--black-monochrome)) 0%, rgb(var(--dark-gray-monochrome)) 50%, rgb(var(--dark-accent)) 100%); background: -moz-linear-gradient(top, rgb(var(--black-monochrome)) 0%, rgb(var(--dark-gray-monochrome)) 50%, rgb(var(--dark-accent)) 100%); background: -o-linear-gradient(top, rgb(var(--black-monochrome)) 0%, rgb(var(--dark-gray-monochrome)) 50%, rgb(var(--dark-accent)) 100%); background: linear-gradient(to bottom, rgb(var(--black-monochrome)) 0%, rgb(var(--dark-gray-monochrome)) 50%, rgb(var(--dark-accent)) 100%); background-attachment: fixed; -webkit-background-size: 400vh 400vh; -moz-background-size: 400vh; -o-background-size: 400vh; background-size: 400vh; -webkit-background-origin: border-box; -moz-background-origin: border-box; -o-background-origin: border-box; background-origin: border-box; background-position: top left; } #side-bar div.menu-item { --text-shadow: rgb(var(--swatch-text-dark, 12, 12, 12, )); border-bottom: 0.0625rem solid rgb(var(--swatch-border-color)); border-top: 0.0625rem solid rgb(var(--swatch-border-color)); margin-top: -0.0625rem; text-shadow: .063rem .063rem .063rem #0c0c0c; text-shadow: .063rem .063rem .063rem var(--text-shadow); } #side-bar div.menu-item > :not(:nth-child(2)):not(.collapsible-block) { border-left: 0.0625rem solid rgb(var(--swatch-border-color)); } #side-bar div.menu-item a, #side-bar div.menu-item a:visited, #side-bar div.menu-item a:active, #side-bar div.menu-item .text { --text-shadow: rgb(var(--black-monochrome)); color: rgb(var(--swatch-primary)); letter-spacing: 0.1em; word-spacing: 0.1em; font-weight: 600; text-shadow: -0.0625rem -0.0625rem 0 var(--text-shadow); } #side-bar div.menu-item a::before, #side-bar div.menu-item a:hover::before { background: var(--gradient-header); background-attachment: fixed; background-position: top; -webkit-background-origin: border-box; -moz-background-origin: border-box; -o-background-origin: border-box; background-origin: border-box; -webkit-background-size: 100vh 100vh; -moz-background-size: 100vh; -o-background-size: 100vh; background-size: 100vh; } #side-bar div.menu-item > a:last-of-type { -webkit-box-flex: 1; -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } #side-bar .heading, #side-bar .side-block > .collapsible-block:nth-child(1) .collapsible-block-folded { background: initial; } #side-bar .heading p, #side-bar .side-block > .collapsible-block .collapsible-block-link { --text-shadow: rgb(var(--swatch-text-dark, 12, 12, 12, )); letter-spacing: 0.05rem; font-weight: 900; font-size: 1.25rem; position: relative; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 1rem 0 1rem 0.5rem; color: rgb(var(--pale-gray-monochrome)); font-family: var(--header-font); text-transform: none; } /*@supports(-webkit-background-clip: text) { #side-bar .heading p, #side-bar .side-block > .collapsible-block .collapsible-block-link { background: linear-gradient(to top, rgb(var(--dark-gray-monochrome)) 0%, rgb(var(--dark-gray-monochrome)) 20%, rgb(var(--dark-accent)) 40%, rgb(var(--pale-gray-monochrome)) 70%); -webkit-background-size: cover; background-size: 400vh; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-attachment: fixed; background-repeat: repeat; } }*/ #side-bar .side-block[style*="background-color:"] { padding-bottom: 0.5rem; } #side-bar .side-block[style*="background-color:"] * { margin-left: 0 !important; } #side-bar .side-block[style*="background-color:"] .heading { margin-top: .25rem; } #side-bar .heading p::after, #side-bar .side-block > .collapsible-block .collapsible-block-link::after { bottom: -0.6rem; } #side-bar .heading p::before, #side-bar .side-block > .collapsible-block .collapsible-block-link::before { top: -0.6rem; } #side-bar div.menu-item .sub-text { color: rgba(var(--swatch-primary), 1); } #main-content { z-index: 1; position: relative; } #page-title { color: rgb(var(--pale-gray-monochrome)); border-color: rgba(0, 0, 0, 0); } blockquote, .blockquote { background-color: rgba(var(--gray-monochrome), 0.25); border: 0.0625rem solid rgb(var(--swatch-border-color)); } blockquote:nth-of-type(odd) { border-color: rgb(var(--swatch-border-color)); } blockquote:nth-of-type(even) { border-color: rgb(var(--swatch-primary)); } .yui-navset .yui-content { background-color: rgba(var(--gray-monochrome), 0.25); } .yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content { --box-shadow: rgb(var(--swatch-border-color)); border-color: rgb(var(--swatch-border-color)); -webkit-box-shadow: 0 -webkit-calc(0.0625rem * 5) 0 0 var(--box-shadow); -moz-box-shadow: 0 -moz-calc(0.0625rem * 5) 0 0 var(--box-shadow); box-shadow: 0 calc(0.0625rem * 5) 0 0 var(--box-shadow); } .yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a { background-color: rgb(var(--swatch-menubg-black-color)); color: rgb(var(--swatch-text-light)); font-weight: 600; } .yui-navset .yui-nav .selected a { color: rgb(var(--black-monochrome)) !important; } table.wiki-content-table th { background: rgb(var(--swatch-primary-darker)); color: rgb(var(--dark-gray-monochrome)); } table.wiki-content-table, table.wiki-content-table th, table.wiki-content-table td { border: .0625rem solid rgba(var(--swatch-border-color), 1) !important; border-collapse: collapse; } .code { background-color: rgba(var(--swatch-menubg-dark-color), 0.25); border-color: rgb(var(--swatch-border-color)); } .hl-main { -webkit-filter: invert(1) hue-rotate(180deg); filter: invert(1) hue-rotate(180deg); } .scp-image-block .scp-image-caption { background-color: rgba(var(--swatch-menubg-dark-color), 0.25); } .scp-image-block img { border: 0.0625rem solid rgba(var(--swatch-border-color)); } a:visited { color: rgb(var(--swatch-primary-darker)); } h1 { color: rgb(var(--swatch-primary)) !important; } hr { border-top: none; position: relative; height: 0.35rem; background: rgba(0, 0, 0, 0); display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } hr::before { content: " "; position: absolute; top: 0.1125rem; left: 0; border-top: none; width: 100%; height: 0.125rem; background: -webkit-linear-gradient(10deg, rgba(var(--gray-monochrome), 0.15) 0%, rgba(var(--pale-gray-monochrome), 1) 50%, rgba(var(--gray-monochrome), 0.15) 100%); background: -o-linear-gradient(10deg, rgba(var(--gray-monochrome), 0.15) 0%, rgba(var(--pale-gray-monochrome), 1) 50%, rgba(var(--gray-monochrome), 0.15) 100%); background: -moz-linear-gradient(10deg, rgba(var(--gray-monochrome), 0.15) 0%, rgba(var(--pale-gray-monochrome), 1) 50%, rgba(var(--gray-monochrome), 0.15) 100%); background: -webkit-linear-gradient(80deg, rgba(var(--gray-monochrome), 0.15) 0%, rgba(var(--pale-gray-monochrome), 1) 50%, rgba(var(--gray-monochrome), 0.15) 100%); background: -moz-linear-gradient(80deg, rgba(var(--gray-monochrome), 0.15) 0%, rgba(var(--pale-gray-monochrome), 1) 50%, rgba(var(--gray-monochrome), 0.15) 100%); background: -o-linear-gradient(80deg, rgba(var(--gray-monochrome), 0.15) 0%, rgba(var(--pale-gray-monochrome), 1) 50%, rgba(var(--gray-monochrome), 0.15) 100%); background: linear-gradient(10deg, rgba(var(--gray-monochrome), 0.15) 0%, rgba(var(--pale-gray-monochrome), 1) 50%, rgba(var(--gray-monochrome), 0.15) 100%); background-position: center center; -webkit-filter: blur(0.04rem); filter: blur(0.04rem); } #page-content .rate-box-with-credit-button, .info-container .collapsible-block-folded, .info-container .collapsible-block-unfolded-link, .page-rate-widget-box { background: -webkit-gradient(linear, right bottom, left top, color-stop(0, rgba(var(--swatch-primary), 1)), to(rgba(var(--swatch-primary-darkest), 1))) !important; background: -webkit-linear-gradient(bottom right, rgba(var(--swatch-primary), 1) 0, rgba(var(--swatch-primary-darkest), 1) 100%) !important; background: -moz-linear-gradient(bottom right, rgba(var(--swatch-primary), 1) 0, rgba(var(--swatch-primary-darkest), 1) 100%) !important; background: -o-linear-gradient(bottom right, rgba(var(--swatch-primary), 1) 0, rgba(var(--swatch-primary-darkest), 1) 100%) !important; background: linear-gradient(to top left, rgba(var(--swatch-primary), 1) 0, rgba(var(--swatch-primary-darkest), 1) 100%) !important; } #page-content .modalbox { background: rgb(14, 12, 45) !important; color: #ccc; box-shadow: 0px 0px 0px 2px #ffb961; } form#edit-page-form { background-color: rgba(var(--dark-accent), 0.25); border: 0.0625rem solid rgb(var(--light-gray-monochrome)); } textarea, input.text { background-color: rgb(var(--black-monochrome)); color: rgb(var(--white-monochrome)); padding: 0.5em; } #lock-info { background-color: rgb(var(--black-monochrome)); } div.buttons input, input.button, button, file, a.button { font-weight: 600; background-color: rgb(var(--gray-monochrome)); color: rgb(var(--medium-accent)); border: 0.0625rem solid rgb(var(--light-gray-monochrome)); -webkit-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); } div.buttons input:hover, input.button:hover, button:hover, a.button:hover { background-color: rgb(var(--dark-gray-monochrome)); color: rgb(var(--pale-gray-monochrome)); cursor: pointer; } div#page-info, div.page-watch-options { padding: 0 1em; } div#page-options-bottom { width: 90%; margin-bottom: 2.125rem; margin-left: auto; margin-right: auto; } div#page-options-bottom-2 { width: 90%; margin-top: -2.125rem; margin-left: auto; margin-right: auto; } div#page-options-bottom, div#page-options-bottom-2 { text-align: left; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } div#page-options-bottom, div#page-options-bottom-2, div#page-options-bottom > a { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } div#page-options-bottom > a, div#page-options-bottom-2 > a { -webkit-box-flex: 2; -webkit-flex-grow: 2; -moz-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; padding: .25rem; -webkit-border-radius: .25rem; -moz-border-radius: .25rem; border-radius: .25rem; color: rgb(var(--medium-accent)); background-color: rgba(var(--swatch-menubg-dark-color), 0.25); border: 0.125rem solid rgba(var(--swatch-border-color), 0.25); font-weight: 700; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); } div#page-options-bottom-2 > a { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } 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 { text-decoration: none; background-color: rgb(var(--dark-gray-monochrome)); color: rgb(var(--pale-gray-monochrome)); } .owindow .title { background-color: rgb(var(--swatch-menubg-dark-color)); } .title.modal-header, .owindow, .hovertip { background-color: rgb(var(--swatch-primary-darkest)); background: var(--gradient-header); } .owindow .button-bar a { background-color: rgb(var(--swatch-menubg-dark-color)); color: rgb(var(--white-monochrome)); } iframe.scpnet-interwiki-frame { -webkit-filter: invert(0.8) hue-rotate(120deg) saturate(6); filter: invert(0.8) hue-rotate(120deg) saturate(6); } #license-area { color: rgba(var(--pale-gray-monochrome), 0.75); } @media only screen and (max-width: 768px) { #extra-div-2 { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #header h2 span::before { letter-spacing: 0.25em; } #search-top-box:not(:focus-within)::before { color: rgb(var(--swatch-primary)); } } @media only screen and (max-width: 500px) { #header-extra-div-1 { --size: -webkit-calc(var(--final-header-height-on-mobile) - 0.875rem); --size: -moz-calc(var(--final-header-height-on-mobile) - 0.875rem); --size: calc(var(--final-header-height-on-mobile) - 0.875rem); --y-offset: 1.5rem; -webkit-background-size: var(--size), 100% var(--header-height-on-mobile); -moz-background-size: var(--size), 100% var(--header-height-on-mobile); -o-background-size: var(--size), 100% var(--header-height-on-mobile); position: -webkit-sticky; position: absolute; top: 0; margin: 0; background-image: url(https://nu-scptheme.github.io/Black-Highlighter/images/logo.svg); background-image: var(--logo-image); background-position: -webkit-calc(var(--header-height-on-mobile) - .75rem - var(--size)) -webkit-calc((var(--size)*-1 + var(--header-height-on-mobile) + var(--y-offset))/2); background-position: -moz-calc(var(--header-height-on-mobile) - .75rem - var(--size)) -moz-calc((var(--size)*-1 + var(--header-height-on-mobile) + var(--y-offset))/2); background-position: calc(var(--header-height-on-mobile) - .75rem - var(--size)) calc((var(--size)*-1 + var(--header-height-on-mobile) + var(--y-offset))/2); background-repeat: no-repeat, repeat; background-size: var(--size), 100% var(--header-height-on-mobile); width: 100vw; height: var(--header-height-on-mobile); grid-area: header; z-index: -1; } #header h1 a { font-size: 160%; margin-left: 1rem; margin-top: -webkit-calc(var(--header-height-on-mobile)/2 - 1.5em); margin-top: -moz-calc(var(--header-height-on-mobile)/2 - 1.5em); margin-top: calc(var(--header-height-on-mobile)/2 - 1.5em); } #header h1 a::before { -webkit-filter: drop-shadow(-0.25rem 0.15rem 0rem rgba(var(--black-monochrome))); filter: drop-shadow(-0.25rem 0.15rem 0rem rgba(var(--black-monochrome))); } #header h1 a::after { left: -webkit-calc(var(--header-height-on-mobile)/2 - 1.5em); left: -moz-calc(var(--header-height-on-mobile)/2 - 1.5em); left: calc(var(--header-height-on-mobile)/2 - 1.5em); } #header h2 span { margin-left: 7.75rem; margin-top: -webkit-calc(var(--header-height-on-mobile)/2 + 0.2em); margin-top: -moz-calc(var(--header-height-on-mobile)/2 + 0.2em); margin-top: calc(var(--header-height-on-mobile)/2 + 0.2em); font-size: 115%; font-weight: 600; line-height: 1; width: 50%; -webkit-filter: drop-shadow(-0.25rem 0.25rem 0rem rgba(var(--light-gray-monochrome))); filter: drop-shadow(-0.25rem 0.25rem 0rem rgba(var(--light-gray-monochrome))); } #header h2 span::before { color: rgb(var(--black-monochrome)); letter-spacing: 0.15em; } #top-bar div.mobile-top-bar > ul > li > a { font-size: 100%; } #extra-div-1 { top: 1.375rem; } } }