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