[[ul class="creditRate"]]
[[li class="rateBox folded"]]
What's this?
This is an aesthetic theme inspired by Paperstack Theme by EstrellaYoshte, BASALT Theme by azamo does not match any existing user name and
Placeholder McD, and BHL Theme by
Woedenaz.
Although having a similar appearance, NAT is not a BHL based theme. Just like BHL Theme and BASALT Theme, NAT overhauls almost the entire page layout, and it can even work well without Sigma-9 Theme.
NAT steals borrows elements from:
- Theme of SCP-5633 by
Woedenaz
- YOSSISTYLE CSS by
Yossipossi (For the capitalized rating module)
To import NAT to your page, put the following text anywhere inside it:
[[include :ah-sandbox:theme:new-aristocrat-dev]]
Theme Variables
You can modify the theme variables to change the page display details form the header title text to the entire page color scheme.
[[include :ah-sandbox:theme:new-aristocrat-dev
|variable1=value
|variable2=value
|variable3=value
|...
]]
The following are all the available variables.
REMOVE PAGE TITLE
|notitle=*
CENTERED HEADER
|centeredheader=*
CLASSIC RATE BUTTONS
|classicratebutton=*
Use the classic " " rating button instead of the default " ".
CHANGE HEADER TITLE
|changetitle=*
|title=Your own header title
|subtitle=Your own header subtitle
CHANGE LOGO
|changelogo=*
|logo-image=http://url.com/
|logo-opacity=100%
|logo-invert=0%
CHANGE THEME COLORS

CLASSIC
[[include :ah-sandbox:theme:new-aritocrat-dev
|classic=*
]]

DEEP
[[include :ah-sandbox:theme:new-aritocrat-dev
|deep=*
]]

GREY
[[include :ah-sandbox:theme:new-aritocrat-dev
|grey=*
]]

DARK
[[include :ah-sandbox:theme:new-aritocrat-dev
|dark=*
]]

DARKER
[[include :ah-sandbox:theme:new-aritocrat-dev
|dark=*
|darker=*
]]

THE DARKEST
[[include :ah-sandbox:theme:new-aritocrat-dev
|dark=*
|darkest=*
]]

An image.
Examples
A horizontal rule can be created with 4 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.
A link (A link you probably visited)
FIRST TITLE
SECOND TITLE
THIRD TITLE
FOURTH TITLE
FIFTH TITLE
SIXTH TITLE

A regular image block.
[[include :scp-wiki:component:image-block
|name=...
]]

A broken image block.
[[div class="image-block-break"]]
[[/div]]
[[include :scp-wiki:component:image-block
|name=...
]]

An accented image block.
[[div class="image-block-accent"]]
[[/div]]
[[include :scp-wiki:component:image-block
|name=...
]]
- Tabulator
- Tabulation
- Long Tab
- This empty tab has a really long name for some odd reason. I wonder why? It is very strange.
- Empty Tab
- Empty Tab
- Empty Tab
- Empty Tab
- Empty Tab
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
Nested inset blockquotes
Use [[div class="blockquote inset"]] to create this. Or use inset class to create an inset div.
This is a normal box. This div has a transparent background.
Use [[div class="box"]] to create it.
This is an inset box.
Use [[div class="box inset"]] to create it.
[[div class="box light"]]
This div has a background color of white.
[[div class="box dark"]]
This div has a background color of black.
[[div class="box roc"]]
This div has rounded corners.
[[div class="box document light"]]
[[div class="box document dark"]]
[[div class="box raisa-memo"]]
[[div class="box domc-memo"]]
[[div class="box pata-memo"]]
[[div class="box overwatch-memo"]]
This is a | table |
---|---|
You should know | how to make these |
already |
The body font is Noto Sans.
The header and title font is Comfortaa.
The monospace font is Anonymous Pro.
Theme Code
/* ==================== * * NEW ARISTOCRAT THEME * * [2021 Wikidot Theme] * * By Dr Hormress * * CC BY-SA 3.0 * * ==================== */ /* Non-Sigma-9 Fix */ @import url('https://fonts.googleapis.com/earlyaccess/nanumgothic.css'); @import url('https://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css'); @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'); @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext'); @import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@300;400;500;700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext'); @supports(--variables: 0) { /* ====== * * COMMON * * ====== */ body { color: rgb(var(--base-dark-color)); background-color: rgb(var(--base-bright-color)); font-size: var(--base-font-size); line-height: var(--base-line-height); font-family: var(--body-font); } #page-content { font-size: var(--base-font-size); } /* ---------------- * * Global Variables * * ---------------- */ :root { /* Basic Colors */ --base-bright-color: var(--white-monochrome); --base-dark-color: var(--black-monochrome); --link-color: var(--bright-accent); --white-monochrome: 252, 252, 252; --black-monochrome: 15, 15, 15; --red-monochrome: 225, 72, 72; --green-monochrome: 72, 225, 72; --blue-monochrome: 56, 103, 204; --main-accent: var(--base-dark-color); --bright-accent: var(--blue-monochrome); --light-accent: 252, 252, 252; --dark-accent: 15, 15, 15; /* Other */ --base-font-size: 0.85rem; --base-line-height: 1.4; --base-box-shadow: 0 0 7px rgba(var(--base-dark-color), 0.75); --base-transition-time: 0.5s; --main-width: 720px; /* Fonts */ --header-font: var(--title-font); --title-font: "Comfortaa", sans-serif; --body-font: "Noto Sans", "Noto Sans SC", sans-serif; --mono-font: "Anonymous Pro", "Roboto Mono", "Courier New", monospace; /* Header */ --header-height: 10rem; --header-title: "SCP Foundation"; --header-title-color: var(--base-dark-color); --header-h1-x: calc(var(--header-icon-size) + 1rem); --header-h1-y: 4.5rem; --header-subtitle: "Secure, Contain, Protect"; --header-subtitle-color: var(--header-title-color); --header-h2-x: calc(var(--header-icon-size) + 1rem); --header-h2-y: calc(var(--header-h1-y) + 2.5rem); --header-bg-color: var(--base-bright-color); --header-bg-top-color: var(--header-bg-color); --header-bg-middle-color: var(--header-bg-color); --header-bg-bottom-color: var(--header-bg-color); --header-gradient: linear-gradient( to bottom, rgb(var(--header-bg-top-color)) 0, rgb(var(--header-bg-middle-color)) 50%, rgb(var(--header-bg-bottom-color)) 100% ); --header-bg-size: auto 100%; --header-button-color: var(--base-dark-color); --header-button-hover-color: var(--green-monochrome); --header-button-bg-color: var(--base-bright-color); --header-button-x: 4.5rem; --header-icon: url("https://ah-sandbox.wikidot.com/local--files/theme:new-aristocrat-dev/nalogo.png"); --header-icon-size: 5rem; --header-icon-x: 0; --header-icon-y: 4rem; --header-icon-w: var(--header-icon-size); --header-icon-drop-shadow: 0 0 2px rgba(0, 0, 0, 0.25); --header-icon-opacity: 1; --header-icon-invert: 0; /* Topbar */ --topbar-height: 2rem; --topbar-bg-color: var(--header-bg-color); --topbar-bg-size: 100% var(--topbar-height); --topbar-bg-top-color: var(--topbar-bg-color); --topbar-bg-middle-color: var(--topbar-bg-color); --topbar-bg-bottom-color: var(--topbar-bg-color); --topbar-gradient: linear-gradient( to bottom, rgb(var(--topbar-bg-top-color)) 0, rgb(var(--topbar-bg-middle-color)) 50%, rgb(var(--topbar-bg-bottom-color)) 100% ); --topbar-button-color: var(--topbar-item-text-color); --topbar-item-text-color: var(--base-dark-color); --topbar-item-hover-text-color: var(--topbar-menu-item-text-color); --topbar-item-hover-bg-color: var(--topbar-menu-item-bg-color); --topbar-menu-item-width: 10rem; --topbar-menu-item-height: var(--topbar-height); --topbar-menu-item-bg-color: var(--base-dark-color); --topbar-menu-item-text-color: var(--base-bright-color); --topbar-menu-item-border-color: var(--base-dark-color); /* Sidebar */ --sidebar-width: 15rem; --sidebar-bg-color: var(--base-bright-color); --sidebar-block-bg-color: var(--base-bright-color); --sidebar-heading-color: var(--base-dark-color); --sidebar-heading-bg-color: var(--base-bright-color); --sidebar-item-height: calc(var(--base-font-size) * 2); --sidebar-item-hover-bg-color: var(--sidebar-link-color); --sidebar-link-color: var(--base-dark-color); --sidebar-link-hover-color: var(--base-bright-color); /* Rate Box */ --ratebox-height: 1.5rem; --ratebox-text-color: var(--base-dark-color); --ratebox-bg-color: var(--base-bright-color); --ratebox-btn-color: var(--ratebox-text-color); --ratebox-btn-bg-color: var(--ratebox-bg-color); --ratebox-btn-hover-color: var(--ratebox-bg-color); --rateup-hover-bg-color: var(--green-monochrome); --ratedown-hover-bg-color: var(--red-monochrome); --ratebox-btn-hover-bg-color: var(--base-dark-color); /* Tabview */ --tab-color: var(--base-dark-color); --tab-bg-color: var(--base-bright-color); --tab-item-height: 2rem; --tab-item-color: var(--base-bright-color); --tab-item-bg-color: var(--base-dark-color); --tab-item-hover-color: var(--tab-item-color); --tab-item-hover-bg-color: var(--tab-item-bg-color); --tab-item-selected-color: var(--base-dark-color); --tab-item-selected-bg-color: var(--base-bright-color); /* Wiki Content Table */ --table-th-color: var(--base-bright-color); --table-th-bg-color: var(--base-dark-color); --table-th-border-color: var(--base-dark-color); --table-td-color: var(--base-dark-color); --table-td-bg-color: var(--base-bright-color); --table-td-border-color: var(--base-dark-color); /* Buttons */ --btn-color: var(--bright-accent); --btn-bg-color: var(--base-bright-color); --btn-hover-bg-color: var(--btn-color); /* OWindow */ --window-bg-color: var(--base-bright-color); --window-title-bg-color: var(--base-dark-color); /* Editor */ --weditor-button-bg-color: var(--base-bright-color); --weditor-button-hover-bg-color: var(--base-dark-color); /* Forum Thread */ --thread-head-bg-color: var(--base-bright-color); } @media (max-width: 767px) { :root { /* Mobile Fix */ --header-button-x: 1rem; } } /* ------------ * * Global Width * * ------------ */ div#content-wrap { position: relative; margin: 0; max-width: 100vw; min-height: 1300px; height: auto !important; } div#main-content, div#page-content { padding: 0; margin: 0 auto; max-width: var(--main-width); min-height: 720px; } div#main-content { margin-top: -100vh; padding-top: 1.5rem; } @media (max-width: calc(720px + 18rem * 2 + 3.4rem - 1px)) { div#main-content { margin-left: calc(var(--sidebar-width) + 4rem); margin-right: 2rem; } } @media (max-width: 767px) { div#content-wrap { margin-left: 0; margin-right: 0; } div#main-content, div#page-content { padding: 0; margin: 0 auto; } div#main-content { margin-left: 1.5rem; margin-right: 1.5rem; padding-top: 1.5rem; } .owindow { min-width: 80%; max-width: 99%; } .modal-body .table, .modal-body .table ~ div { float: none !important; } .owindow .button-bar { float: right; } .owindow div a.btn-primary { display: block; float: none; width: fit-content; width: -moz-fit-content; width: -webkit-fit-content; } a, span, #action-area td { word-break: break-all; } } /* ====== * * HEADER * * ====== */ /* ------------ * * Header title * * ------------ */ div#container-wrap, div#header { background-image: none; } div#header { position: sticky; top: calc(var(--header-height) * -1); height: calc(var(--header-height) + var(--topbar-height)); background-color: transparent; padding-bottom: 0; max-width: 60rem; width: 90%; margin: 0 auto; z-index: 20; } div#header h1, div#header h2 { float: none; margin: 0; padding: 0; position: absolute; text-align: center; z-index: 5; } div#header h1, div#header h1 a, div#header h2 { margin: 0; padding: 0; line-height: 1; max-width: unset; max-height: unset; letter-spacing: 0; } div#header h1 a span, div#header h2 span { display: none; } div#header h1 { left: var(--header-h1-x); top: var(--header-h1-y); width: var(--header-h1-w); } div#header h2 { left: var(--header-h2-x); top: var(--header-h2-y); width: var(--header-h2-w); } div#header h1 a::before { content: var(--header-title); font-size: 2.5rem; font-weight: bold; font-family: var(--header-font); line-height: 2.5rem; color: rgb(var(--header-title-color)); text-shadow: 0 0 2px rgba(var(--header-title-color), 0.25); } @media (max-width: 479px) { div#header h1 a::before { line-height: 1.6rem; font-size: 1.6rem; } } div#header h2::before { content: var(--header-subtitle); font-size: 1rem; font-weight: normal; font-family: var(--title-font); line-height: 1rem; color: rgb(var(--header-subtitle-color)); text-shadow: 0 0 2px rgba(var(--header-subtitle-color), 0.25); } div#header::after { content: ""; display: block; position: absolute; top: var(--header-icon-y); left: var(--header-icon-x); width: var(--header-icon-w); height: var(--header-icon-size); background-image: var(--header-icon); background-repeat: no-repeat; background-size: auto var(--header-icon-size); background-position: center center; filter: drop-shadow(var(--header-icon-drop-shadow)) opacity(var(--header-icon-opacity)) invert(var(--header-icon-invert)); -webkit-filter: drop-shadow(var(--header-icon-drop-shadow)) opacity(var(--header-icon-opacity)) invert(var(--header-icon-invert)); z-index: 2; } /* ----------- * * Top Buttons * * ----------- */ div#header #login-status { top: var(--header-button-x); right: 1.9rem; font-size: 0; } div#header #login-status div#account-options { font-size: var(--base-font-size); border: none; border-radius: 0.3rem; width: 4rem; box-shadow: var(--base-box-shadow); } div#header #login-status span { display: none; } div#header #login-status span.printuser { display: inline-block; border-radius: 0.4rem; transition: ease var(--base-transition-time); } div#header #login-status a.login-status-create-account::before { content: "\f007"; } div#header #login-status a.login-status-sign-in::before { content: "\f090"; } div#header #login-status > a[href*="/account/messages"] { display: block; position: absolute; width: 0.75rem; height: 0.75rem; left: 1.25rem; top: 1.25rem; line-height: 0.75rem; color: transparent; background-color: rgb(var(--message-reminding-bg-color, 225, 72, 72)); border-radius: 50%; z-index: 25; box-shadow: 0 0 2px rgba(0, 0, 0, 0.75); } div#header #login-status a#account-topbutton { border: none; margin: 0; padding: 0; } div#header #login-status a#account-topbutton::before { content: "\f0d7"; } div#header #search-top-box::before { content: "\f002"; } div#header #search-top-box::before, div#header #login-status span.printuser a, div#header #login-status a::before { display: inline-block; border: none; width: 1.5rem; height: 1.5rem; margin: 0.2rem; color: rgb(var(--header-button-color)); background-color: rgb(var(--header-button-bg-color)); text-align: center; font-family: "FontAwesome"; font-size: 1.2rem; line-height: 1.5rem; border-radius: 0.3rem; box-shadow: var(--base-box-shadow); transition: ease var(--base-transition-time); overflow: hidden; } div#header #login-status span.printuser img.small { margin: 0; padding: 0; background-image: none !important; width: 1.5rem; height: 1.5rem; border-radius: 0.3rem; } div#header #login-status span.printuser:hover, div#header #login-status span.printuser:focus { background-color: rgba(var(--header-button-hover-color), 0.75); } div#header #login-status span.printuser:hover img.small, div#header #login-status span.printuser:focus img.small { opacity: 0.75 } div#header #search-top-box:hover::before, div#header #login-status a:hover::before, div#header #search-top-box:focus::before, div#header #login-status a:focus::before { color: rgb(var(--header-button-hover-color)); text-decoration: none; } div#header #search-top-box { top: var(--header-button-x); right: 0; width: 1.9rem; height: 1.9rem; } div#header #search-top-box input#search-top-box-input { display: none; } div#header #search-top-box #search-top-box-form input[type=submit], div#header #search-top-box #search-top-box-form input[type=submit]:hover, div#header #search-top-box #search-top-box-form input[type=submit]:focus { position: absolute; left: 0; top: 0; border-width: 0; width: 1.5rem; height: 1.5rem; color: transparent; text-shadow: none; background-color: transparent; background-image: none; background: none; box-shadow: none; border-radius: 0.3rem; margin: 0.2rem; opacity: 1; z-index: 10; } div#header #search-top-box #search-top-box-form:not(:hover) input[type=submit]:focus { background-color: rgba(var(--header-button-hover-color), 0.375); } /* ----------- * * Topbar Menu * * ----------- */ div#top-bar div.mobile-top-bar { display: none; } @media (max-width: 767px) { div#top-bar div.top-bar { display: none; } div#top-bar div.mobile-top-bar { display: block; } } body::before { content: ""; display: block; position: sticky; top: calc(var(--header-height) * -1); width: 100%; height: calc(var(--header-height) + var(--topbar-height)); background-color: rgb(var(--header-bg-color)); background-image: var(--topbar-gradient), var(--header-gradient); background-size: var(--topbar-bg-size), var(--header-bg-size); box-shadow: var(--base-box-shadow); background-position: center var(--header-height), center center; background-repeat: repeat-x, repeat; z-index: 15; } div#container-wrap { margin-top: calc(var(--header-height) * -1 + var(--topbar-height) * -1); } div#top-bar { z-index: 20; width: 100%; max-width: 60rem; right: auto; font-size: inherit; position: absolute; top: var(--header-height); height: var(--topbar-height); background-color: transparent; background-image: none; } div#top-bar * { margin: 0; } div#top-bar div div.open-menu a { border: none; border-radius: 0; position: absolute; top: 0; left: calc(var(--topbar-height) * -1); text-align: center; font-family: 'Nanum Gothic', sans-serif; font-size: calc(var(--topbar-height) * 0.8); background-color: transparent; color: rgb(var(--topbar-button-color)); width: var(--topbar-height); height: var(--topbar-height); line-height: var(--topbar-height); transition: ease var(--base-transition-time); } div#top-bar div div.open-menu a:hover { color: rgba(var(--topbar-button-color), 0.5); box-shadow: none; } div#top-bar div > ul { float: none; width: 100%; display: flex; } div#top-bar div > ul > li { flex-grow: 1; position: static; } div#top-bar div > ul > li > a { margin: 0; padding: 0; border: none; max-height: unset; height: var(--topbar-height); line-height: var(--topbar-height); color: rgb(var(--topbar-item-text-color)); transition: ease var(--base-transition-time); } div#top-bar div > ul > li:hover > a, div#top-bar div > ul > li.sfhover > a { border: none; color: rgb(var(--topbar-item-hover-text-color)); background-color: rgba(var(--topbar-item-hover-bg-color), 0.75); background-image: none; } div#top-bar div > ul > li:hover > a:hover, div#top-bar div > ul > li.sfhover > a:hover { background-color: rgba(var(--topbar-item-hover-bg-color), 0.87); background-image: none; } div#top-bar div > ul > li > ul, div#top-bar div > ul > li:hover > ul, div#top-bar div > ul > li.sfhover > ul { width: auto; border: none; box-shadow: var(--base-box-shadow); background-color: rgba(var(--topbar-menu-item-bg-color), 0.75); } div#top-bar div > ul > li > ul > li, div#top-bar div > ul > li:hover > ul > li, div#top-bar div > ul > li.sfhover > ul > li { border: none; width: auto; } div#top-bar div > ul > li > ul > li > a, div#top-bar div > ul > li:hover > ul > li > a, div#top-bar div > ul > li.sfhover > ul > li > a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: var(--topbar-menu-item-width); height: var(--topbar-menu-item-height); line-height: var(--topbar-menu-item-height); color: rgb(var(--topbar-menu-item-text-color)); background-color: transparent; border: solid 1px rgb(var(--topbar-menu-item-border-color)); transition: background-color ease var(--base-transition-time); } div#top-bar div > ul > li > ul > li > a:hover, div#top-bar div > ul > li:hover > ul > li > a:hover, div#top-bar div > ul > li.sfhover > ul > li > a:hover { background-color: rgba(var(--topbar-menu-item-bg-color), 0.4); } @media (max-width: 767px) { div#top-bar { left: 0; } div#top-bar div.mobile-top-bar { position: absolute; width: calc(100% - var(--topbar-height)); margin-left: var(--topbar-height); } div#top-bar div > ul > li > ul, div#top-bar div > ul > li:hover > ul, div#top-bar div > ul > li.sfhover > ul { display: flex; flex-wrap: wrap; box-sizing: border-box; position: absolute; left: calc(-6.1125% + var(--topbar-height) * -1); width: 100vw; border: solid 1px rgb(var(--topbar-menu-item-border-color)); } div#top-bar div > ul > li > ul > li, div#top-bar div > ul > li:hover > ul > li, div#top-bar div > ul > li.sfhover > ul > li { width: 50%; max-width: 50%; } div#top-bar div > ul > li > ul > li > a, div#top-bar div > ul > li:hover > ul > li > a, div#top-bar div > ul > li.sfhover > ul > li > a { box-sizing: border-box; width: 100%; max-width: 100%; } } /* ======================= * * SIDE BAR & PAGE CONTENT * * ======================= */ /* ------------ * * Sidebar Menu * * ------------ */ div#side-bar { position: sticky; top: var(--topbar-height); left: 1.7rem; height: 100vh; width: var(--sidebar-width); overflow-y: scroll; overflow-x: hidden; box-sizing: border-box; float: none; padding: 0; } #side-bar p { margin: auto; } @media (max-width: 767px) { div#side-bar, div#side-bar:target { position: fixed; width: var(--sidebar-width); top: 0; left: calc(var(--sidebar-width) * -1); z-index: 25; border: none; background-color: rgb(var(--sidebar-bg-color)); transition: ease var(--base-transition-time); } div#side-bar:target { left: 0; } div#side-bar a.close-menu { display: block; opacity: 1; background: transparent; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); transition: ease var(--base-transition-time); } div#side-bar a.close-menu img { display: none; } div#side-bar:target a.close-menu { display: block; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; background: transparent; backdrop-filter: blur(0.2rem); -webkit-backdrop-filter: blur(0.2rem); } } div#side-bar div.side-block, div#side-bar div.side-block.media, div#side-bar div.side-block.resources, div.scpnet-interwiki-wrapper { margin: 0.5rem; margin-top: 1rem; padding: 0; padding-top: 0.5rem; padding-bottom: 0.5rem; overflow: hidden; border: none; border-radius: 0; box-shadow: var(--base-box-shadow); background-color: rgb(var(--sidebar-block-bg-color)); } div.scpnet-interwiki-wrapper { width: auto; max-height: calc(var(--base-font-size) * 1.75 + 2rem); min-height: unset; margin-bottom: 15rem; overflow: hidden; transition: ease var(--base-transition-time); } div.scpnet-interwiki-wrapper:focus, div.scpnet-interwiki-wrapper:hover { max-height: unset; min-height: 20rem; } div#side-bar div.side-block[style*="background"] { background-color: rgba(var(--base-dark-color), 0.18) !important; } div.scpnet-interwiki-wrapper::before { content: "Languages"; } div.scpnet-interwiki-wrapper::before, div#side-bar div.side-block div.heading, div#side-bar div.collapsible-block-folded .collapsible-block-link, div#side-bar div.collapsible-block-folded .collapsible-block-link:hover, div#side-bar div.collapsible-block-unfolded-link .collapsible-block-link, div#side-bar div.collapsible-block-unfolded-link .collapsible-block-link:hover { display: block; font-size: unset; font-size: calc(var(--base-font-size) * 1.25)); font-weight: bold; font-family: var(--title-font); text-align: center; text-decoration: none; color: rgb(var(--sidebar-heading-color)); background-color: rgb(var(--sidebar-heading-bg-color)); box-shadow: var(--base-box-shadow); margin: 0.5rem; margin-left: 0.75rem; margin-right: 0.75rem; padding: 0; border-bottom: none; } div#side-bar div.collapsible-block-folded { background-image: none; } div#side-bar div.collapsible-block-unfolded-link { border: none; } div#side-bar div.side-block .menu-item { margin: 0; display: flex; font-size: 0; margin-left: var(--sidebar-item-height); } div#side-bar div.side-block .menu-item a { flex: 1; position: relative; font-weight: bold; display: block; line-height: var(--sidebar-item-height); font-size: var(--base-font-size); color: rgb(var(--sidebar-link-color)); transition: ease var(--base-transition-time); padding-left: calc(var(--sidebar-item-height) * 0.5); white-space: nowrap; } div#side-bar div.side-block .menu-item a[href*="scp-series"] { padding-left: 0; text-align: center; } div#side-bar div.side-block .menu-item a:hover::before, div#side-bar div.side-block .menu-item a:hover, div#side-bar div.side-block .menu-item a:focus::before, div#side-bar div.side-block .menu-item a:focus { text-decoration: none; color: rgb(var(--sidebar-link-hover-color)); background-color: rgb(var(--sidebar-item-hover-bg-color)); } div#side-bar div.side-block:not(.media) .menu-item img { max-width: 0; max-height: 0; opacity: 0; padding: 0; margin: 0; } div#side-bar img + a::before { display: block; position: absolute; top: 0; left: calc(var(--sidebar-item-height) * -1); width: var(--sidebar-item-height); height: var(--sidebar-item-height); max-height: var(--sidebar-item-height); line-height: var(--sidebar-item-height); overflow: hidden; text-align: center; font-weight: normal; font-family: "FontAwesome"; font-size: var(--base-font-size); color: rgb(var(--base-dark-color)); transition: ease var(--base-transition-time); } div#side-bar img[src*="help.png"] + a::before { content: "\f059"; } div#side-bar img[src*="main.png"] + a::before { content: "\f192"; } div#side-bar img[src*="default.png"] + a::before { content: "\f10c"; } div#side-bar img[src*="home.png"] + a::before { content: "\f015"; } div#side-bar img[src*="series.png"] + a::before { content: "\f1c0"; } div#side-bar img[src*="forum.png"] + a::before { content: "\f086"; } /* ---------- * * Scroll Bar * * ---------- */ ::-webkit-scrollbar { cursor: pointer; border: none; width: 0.5rem; height: 0.5rem; } ::-webkit-scrollbar-thumb { background: rgba(var(--base-dark-color), 0.8); cursor: pointer; } ::-webkit-scrollbar-thumb:hover { background: rgb(var(--base-dark-color)); } ::-webkit-scrollbar-track { background: rgba(var(--base-bright-color), 0.4); } * { scrollbar-color: #222, #FAFAFA; } /* ----------- * * Rate Module * * ----------- */ div#page-content div.page-rate-widget-box, div#page-content div.creditRate, div#page-content table.rate_t, div#page-content table.rate_t2 { margin: 0; padding: 0; font-size: 0; } div#page-content div.page-rate-widget-box, div#page-content div.rate-box-with-credit-button, div#page-content table.rate_t, div#page-content table.rate_t2 { display: inline-flex; background-color: rgb(var(--ratebox-bg-color)); height: var(--ratebox-height); border: none; border-radius: 0; box-shadow: var(--base-box-shadow); } div#page-content div.rate-box-with-credit-button div.page-rate-widget-box, div#page-content table.rate_t div.page-rate-widget-box, div#page-content table.rate_t2 div.page-rate-widget-box { box-shadow: none; } div#page-content div.page-rate-widget-box a { font-size: 0; } div#page-content div.page-rate-widget-box a::before { font-family: "FontAwesome"; font-size: var(--base-font-size); } div#page-content div.page-rate-widget-box .rateup.btn a::before { content: "\f102"; } div#page-content div.page-rate-widget-box .ratedown.btn a::before { content: "\f103"; } div#page-content div.page-rate-widget-box .cancel.btn a::before { content: "\f00d"; } div#page-content div.page-rate-widget-box span.rate-points { text-transform: capitalize; color: rgb(var(--ratebox-text-color)) !important; background-color: transparent !important; border: none; border-radius: 0; height: var(--ratebox-height); line-height: var(--ratebox-height); font-size: var(--base-font-size); } div#page-content div.page-rate-widget-box .rateup.btn, div#page-content div.page-rate-widget-box .ratedown.btn, div#page-content div.page-rate-widget-box .cancel.btn, div#page-content .creditButton, div#page-content .creditButton p { display: block; margin: 0; padding: 0; border: none; border-radius: 0; height: var(--ratebox-height); background-color: transparent; font-size: var(--base-font-size); line-height: var(--ratebox-height); } div#page-content .creditButton p a { margin-left: 0; border-left: 0; } div#page-content div.page-rate-widget-box .rateup.btn a, div#page-content div.page-rate-widget-box .ratedown.btn a, div#page-content div.page-rate-widget-box .cancel.btn a, div#page-content .creditButton p a.fa.fa-info { margin: 0; padding: 0; display: block; overflow: hidden; border-radius: 0; text-align: center; width: var(--ratebox-height); height: var(--ratebox-height); line-height: var(--ratebox-height); color: rgb(var(--ratebox-btn-color)); background-color: rgba(var(--ratebox-btn-bg-color), 0.75); transition: ease var(--base-transition-time); } div#page-content div.page-rate-widget-box .rateup.btn a:hover, div#page-content div.page-rate-widget-box .ratedown.btn a:hover, div#page-content div.page-rate-widget-box .cancel.btn a:hover, div#page-content .creditButton p a.fa.fa-info:hover { border-radius: 0; text-decoration: none; color: rgb(var(--ratebox-btn-hover-color)); background-color: rgb(var(--ratebox-btn-hover-bg-color)); } div#page-content div.page-rate-widget-box .rateup.btn a:hover { background-color: rgb(var(--rateup-hover-bg-color)); } div#page-content div.page-rate-widget-box .ratedown.btn a:hover { background-color: rgb(var(--ratedown-hover-bg-color)); } /* ------- * * Content * * ------- */ div.title, span.title, div.meta-title, div#page-title, h1, h2, h3, h4, h5, h6 { font-family: var(--title-font); color: rgb(var(--main-accent)); } div.meta-title, div#page-title { min-height: 2.5rem; line-height: 2.5rem; font-size: 2rem; font-weight: bold; margin: 0; padding: 0; border: none; } a, a:link, a:focus, a:active, a:visited { color: rgb(var(--link-color)); text-decoration: none; background-color: transparent; transition: var(--base-transition-time); } a:hover, div#header a:hover, div#top-bar a:hover, div#side-bar a:hover { color: rgba(var(--link-color), 0.8); text-decoration: none; background-color: transparent; } div#page-content a:hover { text-decoration: underline; } div#page-content a.newpage { color: rgb(var(--link-color)); background-color: rgba(var(--link-color), 0.1); } .hovertip { color: rgb(var(--base-dark-color)); border: solid 0px transparent !important; box-shadow: var(--base-box-shadow); background-color: rgb(var(--base-bright-color)) !important; } .hovertip .content .footnote .f-heading, .hovertip .content .footnote .f-footer { display: none !important; } hr { width: auto; margin: 1em 1rem; background-color: rgba(var(--base-dark-color), 0.75); } div.dark hr { background-color: rgba(127, 127, 127, 0.75); } blockquote, div.blockquote, div.code, div.page-source, div.box { margin: 0.8rem 0; padding: 1px 1rem; background-color: transparent; border: none; box-shadow: var(--base-box-shadow); } tt, div.code, div.code *, span.monospace { font-family: var(--mono-font); } div.page-source { padding: 0.8rem; font-family: var(--mono-font); } blockquote, div.blockquote { margin: 0.8rem auto; width: 90%; max-width: 520px; box-sizing: border-box; } /* --------- * * Page Tags * * --------- */ div.page-tags span { border-top: dotted 0.125rem rgba(var(--base-dark-color), 0.75); } div.page-tags span a { text-transform: uppercase; margin-right: 0.5rem; } div.page-tags span a::before { content: "\f02b"; font-family: "FontAwesome"; display: inline-block; margin-right: 0.25rem; color: rgb(var(--base-dark-color)); } /* ------------------ * * Wiki Content Table * * ------------------ */ div#page-content table.wiki-content-table { box-shadow: var(--base-box-shadow); } div#page-content table.wiki-content-table th { color: rgb(var(--table-th-color)); background-color: rgba(var(--table-th-bg-color), 0.75); border-color: rgba(var(--table-th-border-color), 0.87); } div#page-content table.wiki-content-table td { color: rgb(var(--table-td-color)); background-color: rgba(var(--table-td-bg-color), 0.75); border-color: rgba(var(--table-td-border-color), 0.87); } /* ----------- * * Image Block * * ----------- */ div#page-content div.scp-image-block { width: 300px; border: none; box-shadow: var(--base-box-shadow); } div#page-content div.scp-image-block p { margin: 0; } div#page-content div.scp-image-block.block-center { margin: 0.8rem auto; } div#page-content div.scp-image-block.block-right { float: right; clear: right; max-width: 50%; margin: 0.8rem 0 0.8rem 0.8rem; } div#page-content div.scp-image-block.block-left { float: left; clear: left; max-width: 50%; margin: 0.8rem 0.8rem 0.8rem 0; } div#page-content div.scp-image-block img.image, div#page-content div.scp-image-block div.scp-image-caption { border: none; min-width: 100%; max-width: 100%; } div#page-content div.scp-image-block div.scp-image-caption { text-align: center; font-weight: bold; font-size: calc(var(--base-font-size) * 0.8); color: rgb(var(--base-dark-color)); background-color: rgb(var(--base-bright-color)); padding: 0.2rem 0.5rem; box-sizing: border-box; } div#page-content div.image-block-break + div.scp-image-block { box-shadow: none; } div#page-content div.image-block-break + div.scp-image-block img.image { box-shadow: var(--base-box-shadow); margin-bottom: 0.8rem; } div#page-content div.image-block-break + div.scp-image-block div.scp-image-caption { box-shadow: var(--base-box-shadow); } div#page-content div.image-block-accent + div.scp-image-block div.scp-image-caption { color: rgb(var(--base-bright-color)); background-color: rgba(var(--base-dark-color), 0.87); } /* ---------- * * Fancy Divs * * ---------- */ div.box.light { background-color: rgba(var(--light-accent), 0.87); color: rgb(var(--dark-accent)); } div.box.dark { background-color: rgba(var(--dark-accent), 0.87); color: rgb(var(--light-accent)); } div.box.dark h1, div.box.dark h2, div.box.dark h3, div.box.dark h4, div.box.dark h5, div.box.dark h6 { color: rgb(var(--light-accent)); } div.box.roc { border-radius: 1rem; } div#page-content div.box.document { position: relative; min-height: 10rem; margin: 0.8rem 0 1.4rem 0.6rem; } div#page-content div.box.document::before { content: ""; display: block; position: absolute; left: -0.3rem; top: 0.3rem; width: 100%; height: 100%; box-shadow: var(--base-box-shadow); z-index: -1; } div#page-content div.box.document::after { content: ""; display: block; position: absolute; left: -0.6rem; top: 0.6rem; width: 100%; height: 100%; box-shadow: var(--base-box-shadow); z-index: -2; } div#page-content div.box.document.light, div#page-content div.box.document.light::before, div#page-content div.box.document.light::after { color: rgb(var(--dark-accent)); background-color: rgb(var(--light-accent)); } div#page-content div.box.document.dark, div#page-content div.box.document.dark::before, div#page-content div.box.document.dark::after { color: rgb(var(--light-accent)); background-color: rgb(var(--dark-accent)); } div#page-content div.box.raisa-memo { color: rgb(15, 15, 15); background-color: rgba(255, 255, 175, 0.75); text-align: center; border: solid 0.125rem rgb(75, 75, 75); } div#page-content div.box.raisa-memo::before { display: block; content: "NOTICE FROM THE FOUNDATION \A RECORDS AND INFORMATION SECURITY ADMINISTRATION "; color: rgb(15, 15, 15); white-space: pre-wrap; font-family: var(--title-font); font-weight: bold; font-size: calc(var(--base-font-size) * 1.25); text-align: center; margin-top: 0.8rem; } div#page-content div.box.domc-memo { position: relative; margin: 1.6rem 0.8rem; background-color: transparent; border: solid 0.125rem rgb(255, 255, 127); color: rgb(255, 255, 127); box-shadow: none; text-align: center; } div#page-content div.box.domc-memo::before { display: block; content: "NOTICE FROM THE FOUNDATION \A DEPARTMENT OF MISCOMMUNICATIONS "; color: rgb(255, 255, 127); white-space: pre-wrap; font-family: var(--title-font); font-weight: bold; font-size: calc(var(--base-font-size) * 1.25); text-align: center; margin-top: 0.8rem; } div#page-content div.box.domc-memo::after { content: ""; position: absolute; left: -0.925rem; top: -0.925rem; right: -0.925rem; bottom: -0.925rem; z-index: -1; background-color: rgba(230, 35, 35, 0.75); box-shadow: var(--base-box-shadow); } div#page-content div.box.pata-memo { color: rgb(225, 225, 225); background-color: rgba(70, 45, 120, 0.75); text-align: center; } div#page-content div.box.pata-memo::before { display: block; content: "NOTICE FROM THE FOUNDATION \A DEPARTMENT OF 'PATAPHYSICS "; color: rgb(225, 225, 225); white-space: pre-wrap; font-family: var(--title-font); font-weight: bold; font-size: calc(var(--base-font-size) * 1.25); text-align: center; margin-top: 0.8rem; } div#page-content div.box.overwatch-memo { color: rgb(225, 225, 225); background-color: rgba(75, 75, 75, 0.75); border: double 0.1875rem rgb(225, 225, 225); text-align: center; } div#page-content div.box.overwatch-memo::before { display: block; content: "OVERWATCH COMMAND"; color: rgb(225, 225, 225); white-space: pre-wrap; font-family: var(--title-font); font-weight: bold; font-size: calc(var(--base-font-size) * 2.25); text-align: center; margin-top: 0.8rem; } div.outset { box-shadow: var(--base-box-shadow); } div.inset { box-shadow: inset var(--base-box-shadow); } /* -------- * * YUI Tabs * * -------- */ div#page-content div.yui-navset.yui-navset-top { box-shadow: var(--base-box-shadow); color: rgb(var(--tab-color)); background-color: rgb(var(--tab-bg-color)); } div#page-content div.yui-navset.yui-navset-top a:hover, div#page-content div.yui-navset.yui-navset-top a:focus { text-decoration: none; } div#page-content div.yui-navset.yui-navset-top > ul.yui-nav { border: none; display: flex; flex-wrap: wrap; } div#page-content div.yui-navset.yui-navset-top > ul.yui-nav > li { margin: 0; padding: 0; height: var(--tab-item-height); border: none; flex-grow: 1; max-width: 100%; } div#page-content div.yui-navset.yui-navset-top > ul.yui-nav > li > a { margin: 0; padding: 0 0.8rem; border: none; width: 100%; height: 100%; max-width: 100%; text-align: center; overflow: hidden; font-family: var(--title-font); color: rgb(var(--tab-item-color)); background-image: none; background-color: rgba(var(--tab-item-bg-color), 0.87); box-sizing: border-box; transition: ease var(--base-transition-time); } div#page-content div.yui-navset.yui-navset-top > ul.yui-nav > li > a:focus, div#page-content div.yui-navset.yui-navset-top > ul.yui-nav > li > a:hover { color: rgb(var(--tab-item-hover-color)); background-color: rgba(var(--tab-item-hover-bg-color), 0.75); } div#page-content div.yui-navset.yui-navset-top > ul.yui-nav > li.selected > a, div#page-content div.tui-navset.yui-navset-top > ul.yui-nav > li.selected > a:focus, div#page-content div.yui-navset.yui-navset-top > ul.yui-nav > li.selected > a:hover { color: rgb(var(--tab-item-selected-color)); background-color: rgb(var(--tab-item-selected-bg-color)); background-image: none; } div.yui-navset.yui-navset-top > ul.yui-nav > li > a > em { display: block; padding: 0; margin: 0; height: 100%; line-height: var(--tab-item-height); border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } div.yui-navset.yui-navset-top > div.yui-content { padding: 0 1rem; background-color: transparent; border: none; } div.yui-navset.yui-navset-top > div.yui-content > div { padding: 1px; margin: -1px; } /* ------- * * Buttons * * ------- */ div.owindow { border-color: rgb(var(--window-bg-color)); background-color: rgb(var(--window-bg-color)); box-shadow: var(--base-box-shadow); } div.owindow div.title.modal-header { background-color: rgba(var(--window-title-bg-color), 0.1); color: rgb(var(--base-dark-color)); } a.button.btn, div.owindow a.btn, div.options input.btn, div.options input.btn.btn-default, div.options input.btn.btn-primary, div.options input.btn.btn-sm, div.options input.btn.btn-small, div.options a.btn, div.options a.btn.btn-default, div.options a.btn.btn-primary, div.options a.btn.btn-sm, div.options a.btn.btn-small, div.buttons input.btn, div.buttons input.btn.btn-default, div.buttons input.btn.btn-primary, div.buttons input.btn.btn-sm, div.buttons input.btn.btn-small, div.buttons a.btn, div.buttons a.btn.btn-default, div.buttons a.btn.btn-primary, div.buttons a.btn.btn-sm, div.buttons a.btn.btn-small, div.button-bar input.btn, div.button-bar a.btn, div.button-bar a, div.page-options-bottom input.btn, div.page-options-bottom a.btn { display: inline-block; font-weight: bold; color: rgb(var(--btn-color)); border-color: transparent; background-color: rgb(var(--btn-bg-color)); box-shadow: var(--base-box-shadow); padding: 0.2rem 0.5rem; transition: ease var(--base-transition-time); } a.button.btn:hover, div.owindow a.btn:hover, div.options input.btn:hover, div.options a.btn:hover, div.buttons input.btn:hover, div.buttons a.btn:hover, div.button-bar input.btn:hover, div.button-bar a.btn:hover, div.button-bar a:hover, div.page-options-bottom input.btn:hover, div.page-options-bottom a.btn:hover, a.button.btn:focus, div.owindow a.btn:focus, div.options input.btn:focus, div.options a.btn:focus, div.buttons input.btn:focus, div.buttons a.btn:focus, div.button-bar input.btn:focus, div.button-bar a.btn:focus, div.button-bar a:focus, div.page-options-bottom input.btn:focus, div.page-options-bottom a.btn:focus { display: inline-block; text-decoration: none; border-color: transparent; background-color: rgba(var(--btn-hover-bg-color), 0.5); color: rgb(var(--base-bright-color)); } div.page-options-bottom { display: flex; flex-wrap: wrap; text-align: center; } div.page-options-bottom a.btn { flex-grow: 1; } div#page-content div#u-credit-view, div#page-content div#u-credit-otherwise { z-index: 30; } div#page-content div.modalcontainer div.modalbox { border-radius: 0; border-color: rgb(var(--window-bg-color)); box-shadow: var(--base-box-shadow); background: linear-gradient(rgba(var(--window-title-bg-color), 0.1) 51px, transparent 51px, transparent), rgb(var(--window-bg-color)); } /* -------------- * * Edit Page Form * * -------------- */ form#new-post-form *, form#edit-post-form *, form#edit-page-form * { font-family: "Anonymous Pro", monospace; font-size: var(--base-font-size); } input#edit-page-title { max-width: 100%; width: 100%; } input, input#np-title, input#ep-title, input#edit-page-title, input#page-tags-input, input#upload-userfile, input#upload-dfilename, input#move-new-page-name, input.text, textarea, textarea#np-text, textarea#ep-text, textarea#edit-page-textarea, table.edit-page-bottomtable td div:not(.sub) textarea#edit-page-comments[name="comments"] { color: rgb(var(--base-dark-color)); border-color: transparent; background-color: transparent; box-shadow: inset var(--base-box-shadow); } table.edit-page-bottomtable td div.sub { color: rgba(var(--base-dark-color), 0.25); } table.edit-page-bottomtable td div#lock-info { color: rgb(var(--base-dark-color)); background-color: transparent; border-color: transparent; box-shadow: var(--base-box-shadow); } table.page-history td.optionstd a, div.pager a { display: inline-block; padding: 0 0.2rem; min-width: 1.25rem; min-height: 1.25rem; text-align: center; line-height: 1.25rem; font-size: var(--base-font-size); color: rgb(var(--base-dark-color)); border: none; border-radius: 0.2rem; background-color: transparent; box-shadow: var(--base-box-shadow); box-sizing: border-box; transition: ease var(--base-transition-time); } div.pager span.current { display: inline-block; padding: 0; min-width: 1.25rem; min-height: 1.25rem; text-align: center; line-height: 1.25rem; font-size: var(--base-font-size); color: rgb(var(--base-bright-color)); border: none; border-radius: 0.2rem; background-color: rgb(var(--bright-accent)); box-shadow: var(--base-box-shadow); transition: ease var(--base-transition-time); } div.pager span.current:hover { color: rgba(var(--base-bright-color), 0.625); background-color: rgba(var(--bright-accent), 0.85); } table.page-history td.optionstd a:hover, div.pager a:hover { background-color: rgba(var(--bright-accent), 0.125); color: rgb(var(--bright-accent)); } div.wd-editor-toolbar-panel div > ul > li > a { background-image: url("https://ah-sandbox.wdfiles.com/local--files/theme:new-aristocrat-dev/icons1.png"); background-color: rgb(var(--weditor-button-bg-color)); box-shadow: var(--base-box-shadow); border-radius: 0.1rem; } div.wd-editor-toolbar-panel div > ul > li > a:hover { background-image: url("https://ah-sandbox.wdfiles.com/local--files/theme:new-aristocrat-dev/icons3.png"); background-color: rgba(var(--weditor-button-hover-bg-color), 0.1); box-shadow: var(--base-box-shadow); } div.wd-editor-toolbar-panel div > ul > li > ul, div.wd-editor-toolbar-panel div > ul > li > ul:hover, div.wd-editor-toolbar-panel div > ul > li > ul.sfhover { background-color: rgb(var(--weditor-button-bg-color)); border: none !important; border-radius: 0.1rem; box-shadow: var(--base-box-shadow); } div.wd-editor-toolbar-panel div > ul > li > ul > li > a { background-image: url("https://ah-sandbox.wdfiles.com/local--files/theme:new-aristocrat-dev/icons1.png"); background-color: rgb(var(--weditor-button-bg-color)); box-shadow: none; border-radius: 0.1rem; } div.wd-editor-toolbar-panel div > ul > li > ul > li > a:hover { background-image: url("https://ah-sandbox.wdfiles.com/local--files/theme:new-aristocrat-dev/icons3.png"); background-color: rgba(var(--weditor-button-hover-bg-color), 0.1); box-shadow: none; } /* ------------- * * Forum Threads * * ------------- */ .thread-container .post .short, .thread-container .post .head { color: rgb(var(--base-dark-color)); background: rgba(var(--thread-head-bg-color), 0.1); border-radius: 0; border-color: transparent; box-shadow: var(--base-box-shadow); } /* === * * END * * === */ }
:root { --header-gradient: linear-gradient( 135deg, transparent 0, transparent 25%, rgba(var(--base-dark-color), 0.1) 25%, rgba(var(--base-dark-color), 0.1) 50%, transparent 50%, transparent 75%, rgba(var(--base-dark-color), 0.1) 75%, rgba(var(--base-dark-color), 0.1) 100% );/* Inspired by SCP-5633 */ --header-bg-size: 2.5rem 2.5rem; --header-bg-color: 215, 75, 75; --topbar-bg-color: 225, 225, 225; --header-title-color: 225, 225, 225; --header-icon-invert: 1; --header-button-bg-color: 225, 225, 225; --header-button-hover-color: 215, 75, 75; --bright-accent: 215, 75, 75; --btn-bg-color: 225, 225, 225; }
:root { --header-gradient: linear-gradient( 135deg, transparent, transparent 25%, rgba(var(--base-dark-color), 0.1) 25%, rgba(var(--base-dark-color), 0.1) 50%, transparent 50%, transparent 75%, rgba(var(--base-dark-color), 0.1) 75%, rgba(var(--base-dark-color), 0.1) );/* Inspired by SCP-5633 */ --header-bg-size: 2.5rem 2.5rem; --header-bg-color: 105, 25, 25; --topbar-bg-color: 25, 25, 25; --topbar-item-text-color: var(--base-bright-color); --header-title-color: 225, 225, 225; --header-icon-invert: 1; --header-button-color: var(--base-bright-color); --header-button-bg-color: 25, 25, 25; --header-button-hover-color: 215, 75, 75; --sidebar-heading-color: var(--base-bright-color); --sidebar-heading-bg-color: 105, 25, 25; --ratebox-text-color: 252, 252, 252; --ratebox-bg-color: 105, 25, 25; --ratebox-btn-hover-bg-color: 225, 225, 225; --bright-accent: 105, 25, 25; --btn-bg-color: 225, 225, 225; }
:root { --header-gradient: linear-gradient( 135deg, transparent, transparent 25%, rgba(var(--base-dark-color), 0.1) 25%, rgba(var(--base-dark-color), 0.1) 50%, transparent 50%, transparent 75%, rgba(var(--base-dark-color), 0.1) 75%, rgba(var(--base-dark-color), 0.1) );/* Inspired by SCP-5633 */ --header-bg-size: 2.5rem 2.5rem; --header-bg-color: 75, 75, 75; --topbar-bg-color: 25, 25, 25; --topbar-item-text-color: var(--base-bright-color); --header-title-color: 225, 225, 225; --header-icon-invert: 1; --header-button-color: var(--base-bright-color); --header-button-bg-color: 25, 25, 25; --header-button-hover-color: 75, 75, 75; --sidebar-heading-color: var(--base-bright-color); --sidebar-heading-bg-color: 75, 75, 75; --ratebox-text-color: 252, 252, 252; --ratebox-bg-color:75, 75, 75; --ratebox-btn-hover-bg-color: 225, 225, 225; --bright-accent: 75, 75, 75; --btn-bg-color: 225, 225, 225; }
:root { --base-bright-color: 56, 56, 56; --base-dark-color: 225, 225, 225; --base-box-shadow: 0 0 7px rgb(15, 15, 15); --header-icon-invert: 1; --header-icon-drop-shadow: 0 0 2px rgba(var(--base-dark-color), 0.25); }