@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css");
: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: "theme";
/* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
--theme-name: "05-VN Theme";
/* set this to your theme's full name */
/* Header */
--logo-image: url("http://05command-vn.wikidot.com/local--files/start/Q2TCZnd.png");
--header-title: "Hội Đồng O5";
--header-subtitle: "Quản Trị và Quản Lý";
--sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19);
--body-width-on-desktop: 45.75rem;
/* ===TYPEFACES=== */
--body-font: Inter, Verdana, Geneva, "Helvetica Neue", "Helvetica",
Arial, sans-serif;
--UI-font: PTRootUI, -apple-system, system-ui, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantrell, "Helvetica Neue",
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--header-font: Inter, Franklin Gothic Medium, Franklin Gothic,
ITC Franklin Gothic, "Helvetica Neue", "Helvetica", Arial, sans-serif;
--title-font: var(--header-font);
--mono-font: Recursive, Consolas, monaco, monospace;
/* ===BASE FONT SIZE & LINE HEIGHT=== */
--min-font-size: 0.8125rem; /* 13px */
--max-font-size: 0.9375rem; /* 15px */
/* Hiding for now due to mobile iOS breaking when clamp is used as a font-size
--base-font-size:
clamp(
var(--min-font-size),
2vw,
var(--max-font-size)
);
*/
--base-font-size: var(--max-font-size);
--base-line-height: 1.5;
/* ===HEADER TITLE FONT SIZES=== */
--header-h1-font-size: calc(var(--base-font-size) * 2.65);
--header-h2-font-size: var(--base-font-size);
}
/* Temporary fix until either Safari fixes itself or another solution reveals itself */
@media only screen and (max-width: 56.25rem) {
:root {
--base-font-size: var(--min-font-size);
}
}
:root {
/* ===VARIABLE FONT SETTINGS=== */
/* SETTING | ============== DESCRIPTION | FONT: RANGE */
/* SETTING | ============== Weight | Body: 100 - 900 */
--wght: 400;
/* SETTING | ============== Weight for UI | UI: 100 - 700 */
--ui-wght: 500;
/* SETTING | ============== Hover Weight for UI | UI: 100 - 700 */
--ui-hvr-wght: 500;
/* ========================== Body Font Italic | Body: 0 - 1 */
--ital: 0;
/* ===VARIABLE MONO FONT SETTINGS=== */
/* See here for Recursive Font information: https://www.recursive.design/ */
/*=========================== Mono Font Weight | Mono: 300 - 1000 */
--mono-wght: 350;
/* ========================== Mono Font Italic | Mono: -15 - 0 */
--slnt: 0;
/* ========================== Mono Font Casual Amnt | Mono: 0 - 1 */
--CASL: 0;
/* ========================== Mono Font Cursive Amnt| Mono: 0 - 1 */
--CRSV: 0;
/* ========================== Mono Font Mono Amnt | Mono: 0 - 1 */
--MONO: 1;
/* ===OPENTYPE FEATURE SETTINGS=== */
/* See here for detailed explainations: https://sparanoid.com/lab/opentype-features/ */
/* ========================== Lining Numerals | Any: 0 OR 1 */
--lnum: 1;
/* ========================== Proportional Numerals | Any: 0 OR 1 */
--pnum: 1;
/* ========================== Kerning | Any: 0 OR 1 */
--kern: 1;
/* ========================== Capital Spacing | Any: 0 OR 1 */
--cpsp: 1;
/* ========================== Case Alternatives | Any: 0 OR 1 */
--liga: 1;
/* ========================== Standard Ligature | Any: 0 OR 1 */
--case: 1;
/* ========================== Contextual Ligature | Any: 0 OR 1 */
--clig: 1;
/* ========================== Discretionary Ligature| Any: 0 OR 1 */
--dlig: 0;
/* ========================== Contextual Alternate | Any: 0 OR 1 */
--calt: 1;
/* ========================== Access All Alternates | Any: 0 OR 1 */
--aalt: 0;
/* ========================== Stylistic Sets | Any: 0 OR 1 */
/* ========================== SS 1 | Open Digits | Inter: 0 OR 1 */
--ss01: 1;
/* ========================== SS 2 | Disambiguation | Inter: 0 OR 1 */
--ss02: 0;
/* ========================== SS 3 | Curved R | Inter: 0 OR 1 */
--ss03: 1;
/* ========================== SS 4 | SS2 w/o zero | Inter: 0 OR 1 */
--ss04: 1;
/* ========================== Slashed Zero | Inter: 0 OR 1 */
--zero: 1;
/* ========================== Single Story a | Inter: 0 OR 1 */
--cv11: 0;
/* ===STANDARD THEME COLORS=== */
/* white */
--white-monochrome: 252, 252, 252;
/* v light gray for blockquotes and stuff */
--pale-gray-monochrome: 254, 251, 229;
/* very light pale gray for misc. use */
--light-pale-gray-monochrome: 244, 244, 244;
/* very light accent gray for misc. use */
--very-light-gray-monochrome: 215, 215, 215;
/* light accent gray for login status */
--light-gray-monochrome: 160, 160, 160;
/* gray */
--gray-monochrome: 66, 66, 72;
/* dark accent gray for sidebar background */
--dark-gray-monochrome: 48, 48, 52;
/* black */
--black-monochrome: 12, 12, 12;
/* vivid theme color, the "default" accent color */
--bright-accent: 088, 137, 093;
/* theme color */
--medium-accent: 124, 186, 089;
/* darker theme color */
--dark-accent: 031, 111, 070;
/* alternate accent color, for newpage links */
--newpage-color: 218, 176, 108;
/* ===PRIMARY COLORS=== */
/* ===GENERAL COLORS=== */
--swatch-primary: var(--bright-accent);
--swatch-primary-darker: var(--medium-accent);
--swatch-primary-darkest: var(--dark-accent);
--swatch-border-color: var(--black-monochrome);
/* ===GENERAL TEXT COLORS=== */
--swatch-text-dark: var(--black-monochrome);
--swatch-text-light: var(--white-monochrome);
--swatch-text-general: var(--swatch-text-dark);
--swatch-important-text: var(--bright-accent);
/* ===MENU COLORS=== */
/* ===MENU BACKGROUND COLORS=== */
--swatch-menubg-color: var(--white-monochrome);
--swatch-menubg-light-color: var(--pale-gray-monochrome);
--swatch-menubg-medium-color: var(--light-gray-monochrome);
--swatch-menubg-medium-dark-color: var(--gray-monochrome);
--swatch-menubg-dark-color: var(--dark-gray-monochrome);
--swatch-menubg-black-color: var(--black-monochrome);
--swatch-menubg-hover-color: var(--black-monochrome);
/* ===MENU TEXT COLORS=== */
--swatch-menutxt-dark-color: var(--black-monochrome);
--swatch-menutxt-light-color: var(--white-monochrome);
--swatch-menutxt-general-color: var(--swatch-menutxt-dark-color);
/* ===SECONDARY & TERTIARY COLORS=== */
/* Editing these will edit a vast majority of theme elements. Useful for making dark themes */
/* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
--swatch-secondary-color: var(--swatch-menubg-light-color);
--swatch-tertiary-color: var(--swatch-menubg-medium-color);
--swatch-alternate-color: var(--swatch-menubg-dark-color);
/* Text Colors for Secondary & Tertiary items like Sidebar Headers and Top-Bar Menu Text */
--swatch-text-secondary-color: var(--swatch-menutxt-light-color);
--swatch-text-tertiary-color: var(--swatch-menutxt-dark-color);
/* ===PRIMARY GRADIENTS=== */
/* Creates the header image at top of page */
--gradient-header: linear-gradient(
to top,
rgb(var(--header-gradient-color-bottom)) 0%,
rgb(var(--header-gradient-color-middle)) 90%,
rgb(var(--header-gradient-color-top)) 100%
);
/* Diagonal Strikes placed on top of header image */
--diagonal-stripes: repeating-linear-gradient(
45deg,
hsla(0, 0%, 100%, 0),
hsla(0, 0%, 100%, 0) 0.25vh,
rgba(88, 88, 88, 0.1) 0.35vh,
rgba(88, 88, 88, 0.2) 0.5vh
);
/* Create top-menu bar below the header */
--gradient-topmenu: linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) var(--header-height-on-desktop),
rgba(var(--swatch-topmenu-border-color), 1)
var(--header-height-on-desktop),
rgba(var(--swatch-topmenu-bg-color), 1)
calc(var(--header-height-on-desktop) + 0.125rem),
rgba(var(--swatch-topmenu-bg-color), 0.95) calc(100% - 0.125rem),
rgba(var(--swatch-topmenu-bg-color), 1) calc(100% - 0.125rem),
rgba(var(--swatch-topmenu-border-color), 1) 100%
);
--gradient-topmenu-mobile: linear-gradient(
to bottom,
rgba(var(--swatch-topmenu-border-color), 1) 0,
rgba(var(--swatch-topmenu-bg-color), 1) 0.125rem,
rgba(var(--swatch-topmenu-bg-color), 1)
calc(var(--topbar-height-on-mobile) - 0.125rem),
rgba(var(--swatch-topmenu-bg-color), 1)
calc(var(--topbar-height-on-mobile) - 0.125rem),
rgba(var(--swatch-topmenu-border-color), 1)
var(--topbar-height-on-mobile)
);
/* Subtle gradient that begins just below the top-bar and header */
--background-gradient-distance: 40rem;
--gradient-background: linear-gradient(
to bottom,
rgba(var(--background-gradient-color), 1) 0,
rgba(var(--background-gradient-color), 0)
var(--background-gradient-distance)
);
/* ===STRUCTURAL SPACING ELEMENTS=== */
--scrollbar-width: 1rem;
/* ===HEADER MEASUREMENTS=== */
--header-width-on-desktop: 61.25rem;
--header-width-on-mobile: 100vw;
--header-height-on-desktop: 7.5rem;
--header-height-on-mobile: 7.5rem;
--header-background-image-size: 100% var(--header-height-on-desktop);
/* ===TOPBAR MEASUREMENTS=== */
--topbar-height-on-desktop: 1.875rem;
--topbar-height-on-mobile: 3rem;
/* ===FINAL HEADER + TOPBAR MEASUREMENTS=== */
/* These Vars should not be edited unless necessary. */
--final-header-height-on-desktop: calc(
var(--header-height-on-desktop) + var(--topbar-height-on-desktop)
);
--final-header-height-on-mobile: calc(
var(--header-height-on-mobile) + var(--topbar-height-on-mobile)
);
/* ===SIDEBAR MEASUREMENTS=== */
--sidebar-width-on-mobile: calc(
(var(--base-font-size) * (14 / 15)) * 17
);
--sidebar-internal-border-thickness: 0.125rem;
}
/* ===============================
======= SPECIFIC COLORS =======
===============================
/* Colors for Buttons, Tabs, Tables, Footnotes Hover/Modal, Etc. */
:root {
/* ===BACKGROUND GRADIENT=== */
/* ===GENERAL BACKGROUND=== */
/* Overall Page Background Color */
--swatch-background: var(--white-monochrome);
/* Gradient Color used for the --gradient-background var */
--background-gradient-color: var(--very-light-gray-monochrome);
/* ===HEADER GRADIENT=== */
/* Colors forming the header gradient used in --gradient-header var */
--header-gradient-color-bottom: var(--medium-accent);
--header-gradient-color-middle: var(--black-monochrome);
--header-gradient-color-top: var(--black-monochrome);
/* ===TOPBAR GRADIENT=== */
/* Colors used in the --gradient-topmenu var to give the topbar its color */
--swatch-topmenu-bg-color: var(--swatch-menubg-medium-dark-color);
--swatch-topmenu-border-color: var(--swatch-menubg-black-color);
/* ===LINK COLORS=== */
--link-color: var(--pale-accent);
--visited-link-color: var(--swatch-primary-darkest);
--hover-link-color: var(--swatch-primary);
--newpage-color: var(--alt-accent);
}
#header {
/* ===HEADER ELEMENTS=== */
/* ===HEADER TITLES=== */
/* Header H1 and H2 colors */
--swatch-headerh1-color: var(--swatch-text-light);
--swatch-headerh2-color: var(--swatch-text-light);
/* ===SEARCH ELEMENT=== */
--search-icon-color: var(--swatch-text-secondary-color);
--search-icon-hover-color: var(--swatch-text-secondary-color);
--search-icon-hover-bg-color: var(--swatch-alternate-color);
--search-textbox-text-color: 0,0,0,0;
/* Focus is when the search box has been clicked on */
--search-icon-focus-color: var(--swatch-text-secondary-color);
--search-icon-focus-bg-color: var(--swatch-primary);
--search-focus-outline-color: var(--swatch-primary);
--search-focus-textbox-bg-color: var(--swatch-alternate-color);
--search-focus-textbox-text-color: var(--swatch-text-secondary-color);
/* ===LOGIN BOX ELEMENT=== */
--login-line-divider-color: var(--swatch-text-secondary-color);
--login-username-color: var(--swatch-text-secondary-color);
--login-myaccount-color: var(--swatch-text-secondary-color);
--login-myaccount-hover-color: var(--login-myaccount-color);
--login-myaccount-underline-color: var(--swatch-primary-darkest);
--login-myaccount-hover-bg-color: var(--swatch-primary-darkest);
--login-arrow-color: var(--search-icon-color);
/* Dropdown Box when arrow is clicked */
--login-dropdown-bg-color: var(--swatch-menubg-color);
--login-dropdown-bg-image: var(--gradient-header);
--login-dropdown-border-color: var(--swatch-text-tertiary-color), 0.5;
--login-dropdown-text-color: var(--swatch-text-secondary-color);
--login-dropdown-text-hover-color: var(--swatch-text-secondary-color);
--login-dropdown-bg-hover-color: var(--swatch-primary);
/* Mobile Icon Styling */
--login-mobile-icon-color: var(--search-icon-color);
--login-mobile-icon-hover-color: var(--search-icon-hover-color);
--login-mobile-icon-hover-bg-color: var(--search-icon-hover-bg-color);
}
#top-bar {
/* ===TOPBAR ELEMENTS=== */
/* ===TOPBAR CATEGORIES=== */
--topmenu-category-color: var(--swatch-text-secondary-color);
--topmenu-category-hover-color: var(--swatch-text-secondary-color);
--topmenu-category-hover-bg: 0,0,0,0; /* Transparent */
--topmenu-hover-border-color: var(--swatch-primary);
--mobile-topmenu-sidebar-button-color: var(--swatch-text-secondary-color);
/* ===DROPDOWN MENU=== */
--dropdown-bg-color: var(--swatch-alternate-color), 0.9;
--dropdown-border-color: var(--swatch-text-tertiary-color), 0.5;
--dropdown-links-color: var(--swatch-text-secondary-color);
--dropdown-links-bg-color: 0,0,0,0; /* Transparent */
--dropdown-links-hover-color: var(--swatch-text-secondary-color);
--dropdown-links-hover-bg-color: var(--swatch-primary);
}
#side-bar {
/* ===SIDE-BAR ELEMENTS=== */
/* ===SIDE-BAR GENERAL=== */
--sidebar-bg-color: var(--swatch-menubg-color);
--sidebar-resources-bg-color: var(--swatch-primary-darker), 0.25;
--sidebar-media-bg-color: var(--swatch-primary-darker), 0.125;
/* ===SOCIAL MEDIA ICONS=== */
--discord-icon-color: 88, 101, 242; /* BLURPLE */
--deviantart-icon-color: 0, 199, 135;
--facebook-icon-color: 59, 89, 152;
--github-icon-color: 25, 23, 23;
--instagram-icon-color: 240, 148, 51;
--instagram-icon-gradient:
linear-gradient(
45deg,
rgb(240, 148, 51) 0%,
rgb(230, 104, 60) 25%,
rgb(220, 39, 67) 50%,
rgb(204, 35, 102) 75%,
rgb(188, 24, 136) 100%
);
--reddit-icon-color: 225, 69, 0;
--sandbox-icon-color: 35, 140, 120;
--steam-icon-color: 8, 20, 40;
--twitch-icon-color: 100, 65, 165;
--twitter-icon-color: 29, 161, 242;
--youtube-icon-color: 255, 0, 0;
--social-icon-hover-color: var(--swatch-primary);
/* ===SIDEBLOCK MENU=== */
--sideblock-bg-color: 0,0,0,0; /* Transparent */
--sideblock-heading-border-color: var(--swatch-primary);
--sideblock-heading-bg-color: 0,0,0,0; /* Transparent */
--sideblock-heading-text-color: var(--swatch-primary-darker);
/* ===MENU-ITEMS=== */
--sidebar-border-color: var(--swatch-border-color), 0.08;
--sidebar-subtest-color: var(--swatch-primary);
--sidebar-links-text: var(--swatch-menutxt-general-color);
--sidebar-links-bg-color: 0,0,0,0; /* Transparent */
--sidebar-links-hover-bg-color: var(--swatch-primary);
--sidebar-links-hover-text-color: var(--swatch-text-secondary-color);
/* ===SIDEBAR COLLAPSIBLES=== */
/*Folded Colors */
--sidebar-collapsible-fld-link-bg: var(--swatch-primary-darker), 0.25;
--sidebar-collapsible-fld-link-color: var(--sideblock-heading-text-color);
--sidebar-collapsible-fld-link-hover-bg: var(--swatch-primary-darker);
--sidebar-collapsible-fld-link-hover-color: var(--swatch-text-secondary-color);
--sidebar-collapsible-fld-arrow-color: var(--swatch-text-tertiary-color);
--sidebar-collapsible-fld-arrow-hover-color: var(--swatch-text-secondary-color);
/*Unfolded Colors */
--sidebar-collapsible-ufld-link-bg: var(--sidebar-collapsible-fld-link-bg);
--sidebar-collapsible-ufld-link-color: var(--sideblock-heading-text-color);
--sidebar-collapsible-ufld-link-hover-bg: var(--swatch-primary), 1;
--sidebar-collapsible-ufld-link-hover-color: var(--sidebar-collapsible-fld-link-hover-color);
--sidebar-collapsible-ufld-arrow-color: var(--sidebar-collapsible-fld-arrow-color);
--sidebar-collapsible-ufld-arrow-hover-color: var(--sidebar-collapsible-fld-arrow-hover-color);
/* Unfolded Body Colors */
--sidebar-collapsible-body-bg: var(--swatch-primary), 0.125;
--sidebar-collapsible-link-color: var(--sidebar-links-text);
--sidebar-collapsible-link-hover-bg: var(--sidebar-links-hover-bg-color);
--sidebar-collapsible-link-hover-color: var(--sidebar-links-hover-text-color);
}
/* ===FOOTER=== */
#footer {
--footer-bg-color: var(--swatch-primary-darkest);
--footer-text-color: var(--swatch-text-secondary-color);
--footer-link-color: var(--swatch-text-secondary-color);
--footer-link-hover-color: var(--swatch-primary);
--footer-link-hover-bg-color: var(--swatch-secondary-color);
}
/* ===LICENSE AREA=== */
#license-area {
--license-bg-color: var(--swatch-alternate-color);
--license-text-color: var(--swatch-text-secondary-color);
--license-link-color: var(--swatch-text-secondary-color);
--license-link-hover-color: var(--swatch-primary);
--license-link-hover-bg-color: var(--swatch-secondary-color);
}
#main-content {
/* ===MAIN CONTENT UI ELEMENTS */
/* ===UI ICONS=== */
/* ===PAGE OPTIONS ICONS=== */
--ui-icon-color: var(--swatch-text-secondary-color);
--ui-icon-bg: var(--swatch-primary-darkest);
--ui-icon-hover-color: var(--swatch-text-secondary-color);
--ui-icon-hover-bg: var(--swatch-primary);
/* ===TEXT EDITOR ICONS=== */
--editor-icon-color: var(--swatch-menutxt-general-color);
--editor-icon-bg: 0,0,0,0; /* Transparent */
--editor-icon-hover-color: var(--swatch-background);
--editor-icon-hover-bg: var(--swatch-primary);
--editor-icon-submenu-bg: var(--swatch-secondary-color);
/* ===TABS=== */
--tabs-bg: var(--swatch-secondary-color);
--tabs-txt: var(--swatch-text-tertiary-color);
--tabs-hover-bg: var(--swatch-primary-darker);
--tabs-hover-txt: var(--swatch-text-secondary-color);
--tabs-selected-bg: var(--swatch-primary);
--tabs-selected-txt: var(--swatch-text-secondary-color);
--tabs-selected-outline: var(--swatch-primary);
--tabs-bottom-border-color: var(--swatch-primary-darker);
--tabs-content-bg-color: var(--swatch-secondary-color), 0.25;
--tabs-content-border-color: var(--swatch-tertiary-color);
/* ===TABLES=== */
--tables-header-bg: var(--swatch-primary-darkest);
--tables-header-txt: var(--swatch-text-secondary-color);
--tables-border: var(--swatch-tertiary-color);
--tables-body-bg: var(--swatch-background);
--tables-body-txt: var(--swatch-text-general);
/* ===BLOCKQUOTES=== */
--blockquote-bg-color: var(--swatch-secondary-color), 0.25;
--blockquote-border-color: var(--swatch-tertiary-color);
/* Color for special .colorbar-quote blockquote class */
--blockquote-colorbar-color: var(--swatch-primary), 1;
/* ===FOOTNOTES/BIBLIOGRAPHY FOOTER=== */
--footnotes-footer-bg-color: var(--swatch-secondary-color);
--footnotes-footer-colorbar-color: var(--swatch-primary-darkest);
--footnotes-footer-title-bg-color: var(--swatch-primary-darkest);
--footnotes-footer-title-text-color: var(--swatch-text-secondary-color);
--footnotes-footer-num-color: var(--link-color);
--footnotes-footer-num-hover-color: var(--hover-link-color);
--footnotes-footer-text-color: var(--swatch-text-general);
/* ===TOC=== */
--toc-header-bg-color: var(--swatch-primary-darkest);
--toc-header-text-color: var(--swatch-text-secondary-color);
--toc-header-text-hover-color: var(--swatch-text-secondary-color);
--toc-body-bg-color: var(--swatch-menubg-color);
--toc-directory-lines-color: var(--swatch-tertiary-color);
--toc-body-link-color: var(--link-color);
--toc-body-link-hover-color: var(--link-color);
--toc-body-hover-arrow-color: var(--link-color);
/* ===PAGE TAGS=== */
--pagetags-title-bg: var(--swatch-primary-darkest);
--pagetags-title-text: var(--swatch-text-secondary-color);
--pagetags-text-color: var(--swatch-primary-darkest);
--pagetags-text-hover-color: var(--swatch-background);
--pagetags-text-hover-bg-color: var(--swatch-primary);
}
/* ===GLOBAL ELEMENTS=== */
:root {
/* ===UI BUTTONS=== */
--ui-button-bg: var(--swatch-secondary-color);
--ui-button-txt: var(--swatch-text-tertiary-color);
--ui-button-hover-bg: var(--swatch-primary);
--ui-button-hover-txt: var(--swatch-text-secondary-color);
--ui-button-hover-outline: var(--swatch-primary);
/* ===RATING MODULE=== */
--rating-module-button-plus-color: 0, 200, 0;
--rating-module-button-negative-color: 200, 0, 0;
--rating-module-button-cancel-color: var(--swatch-tertiary-color);
--rating-module-button-credit-color: var(--swatch-secondary-color);
--rating-module-bg-color: var(--swatch-background);
--rating-module-bottom-border-color: var(--swatch-primary);
--rating-module-text-color: var(--swatch-text-tertiary-color);
--rating-module-text-hover-color: var(--swatch-text-secondary-color);
/* ===MODALS=== */
--modal-bg: var(--swatch-secondary-color);
--modal-body-text: var(--swatch-text-tertiary-color);
/* h1/h2/h3/h4/h5/h6 */
--modal-body-header-txt: var(--swatch-text-tertiary-color);
--modal-header-bg: var(--swatch-primary-darkest);
--modal-header-txt: var(--swatch-text-secondary-color);
--modal-header-stripe: var(--swatch-primary);
/* ===FOOTNOTES HOVER BLOCK=== */
--hoverblock-bg: var(--swatch-secondary-color);
--hoverblock-txt: var(--swatch-text-tertiary-color);
--hoverblock-header-bg: var(--swatch-primary-darker);
--hoverblock-header-txt: var(--swatch-text-secondary-color);
--hoverblock-footer-bg: var(--swatch-tertiary-color);
--hoverblock-footer-txt: var(--swatch-text-tertiary-color);
/* ===LISTPAGES PAGER=== */
--pager-text: var(--swatch-text-general);
--pager-link: var(--link-color);
--pager-link-hover: var(--swatch-text-secondary-color);
--pager-hover-bg: var(--swatch-primary-darkest);
--pager-selected-bg: var(--swatch-primary);
--pager-selected-link: var(--swatch-text-secondary-color);
}
/* ===============================
========= DEPRECIATED =========
===============================
/* LEGACY VARS */
/* These Vars are being left for now in case they are used in various these but will eventually be removed */
:root {
/* Legacy Var -- No longer used */
--gradient-sidemenu-header: linear-gradient(
10deg,
rgba(var(--swatch-primary-darker), 0.45) 0%,
rgba(var(--swatch-primary-darker), 0.55) 100%
);
--rating-module-button-color: var(--swatch-menutxt-general-color);
--border-styling: solid 0.0625rem rgb(var(--swatch-border-color));
--border-radius-width: 0.0625rem;
/* Box-Shadow 1px Borders */
--box-border-bottom: 0 0.0625rem 0 0 rgb(var(--swatch-border-color));
--box-border-top: 0 -0.0625rem 0 0 rgb(var(--swatch-border-color));
--box-border-left: -0.0625rem 0 0 0 rgb(var(--swatch-border-color));
--box-border-right: 0.0625rem 0 0 0 rgb(var(--swatch-border-color));
--box-border-all: 0 0 0 0.0625rem rgb(var(--swatch-border-color));
--sidebar-transition-timing: 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
}
@media only screen and (min-width: 56.25rem) {
#content-wrap {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-moz-box-orient: horizontal;
-moz-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
width: -webkit-calc(100vw - (100vw - 100%));
width: -moz-calc(100vw - (100vw - 100%));
width: calc(100vw - (100vw - 100%));
min-height: -webkit-calc(100vh - -webkit-calc(var(--final-header-height-on-desktop, 10.125rem)));
min-height: -moz-calc(100vh - -moz-calc(var(--final-header-height-on-desktop, 10.125rem)));
min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
-webkit-box-flex: 2;
-webkit-flex-grow: 2;
-moz-box-flex: 2;
-ms-flex-positive: 2;
flex-grow: 2;
height: auto;
position: initial;
margin: 0 auto;
max-width: inherit;
margin-left: -11em;
margin-left: -webkit-calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem);
margin-left: -moz-calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem);
margin-left: calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem);
}
#main-content {
position: initial;
max-height: 100%;
padding: 2rem 1rem;
width: 45.75rem;
width: var(--body-width-on-desktop, 45.75rem);
max-width: 45.75rem;
max-width: var(--body-width-on-desktop, 45.75rem);
margin: 0 auto;
}
#page-content {
max-width: min(90vw, 45.75rem);
max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
}
#side-bar {
-webkit-transform: translateX(-14.6rem);
-moz-transform: translateX(-14.6rem);
-ms-transform: translateX(-14.6rem);
-o-transform: translateX(-14.6rem);
transform: translateX(-14.6rem);
-webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
-moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
-ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
-o-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
-webkit-transition:
background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
padding 300ms linear,
margin 300ms linear,
-webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
transition:
background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
padding 300ms linear,
margin 300ms linear,
-webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
-o-transition:
background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
padding 300ms linear,
margin 300ms linear,
-o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
-moz-transition:
transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
padding 300ms linear,
margin 300ms linear,
-moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
transition:
transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
padding 300ms linear,
margin 300ms linear;
transition:
transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
padding 300ms linear,
margin 300ms linear,
-webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
-moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
-o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
border: none;
border-color: rgba(var(--swatch-tertiary-color, 170, 170, 170), 0.4);
width: var(--sidebar-width-on-desktop, 13.6rem) !important;
min-width: var(--sidebar-width-on-desktop, 13.6rem) !important;
grid-area: side-bar;
padding-right: 2rem;
background-color: transparent;
background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
top: 0;
max-height: 100vh;
position: -webkit-sticky;
position: sticky;
left: 0;
padding-left: 0.5rem;
direction: rtl;
scrollbar-width: thin;
-ms-scroll-chaining: none;
overscroll-behavior: contain;
overflow-y: scroll;
scrollbar-color:
rgba(170, 170, 170, 0) /* Thumb */
rgba(252, 252, 252, 0); /* Track */
scrollbar-color:
rgba(var(--swatch-primary-darker, 170, 170, 170), 0.1) /* Thumb */
rgba(var(--swatch-tertiary-color, 252, 252, 252), 0.05); /* Track */
}
#side-bar::-webkit-scrollbar-track {
background-color: rgba(var(--swatch-secondary-color, 244, 244, 244), 0.8);
}
#side-bar::-webkit-scrollbar,
#side-bar::-webkit-scrollbar-thumb,
#side-bar::-webkit-scrollbar-corner {
width: 0.5rem;
border-right-width: -webkit-calc(100vw + 100vh);
border-right-width: calc(100vw + 100vh);
border-right-style: inset;
border-color: inherit;
background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
}
#side-bar:hover,
#side-bar:active {
background-color: white;
background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1);
padding-right: 0.25rem;
margin-right: 1.75rem;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
-moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
-ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
-o-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
overflow-y: auto;
overflow-x: hidden;
scrollbar-color:
rgba(170, 170, 170, 1) /* Thumb */
rgba(252, 252, 252, 1); /* Track */
scrollbar-color:
rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */
rgb(var(--swatch-menubg-color, 252, 252, 252), 1); /* Track */
border-color: rgba(var(--swatch-primary-darker), 1);
}
#side-bar:focus-within {
background-color: white;
background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1);
padding-right: 0.25rem;
margin-right: 1.75rem;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
-moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
-ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
-o-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
overflow-y: auto;
overflow-x: hidden;
scrollbar-color:
rgba(170, 170, 170, 1) /* Thumb */
rgba(252, 252, 252, 1); /* Track */
scrollbar-color:
rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */
rgb(var(--swatch-menubg-color, 252, 252, 252), 1); /* Track */
border-color: rgba(var(--swatch-primary-darker), 1);
}
#main-content::after {
content: " ";
position: fixed;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 1rem;
height: 100%;
max-height: 100%;
top: 0;
-webkit-transition:
left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
-o-transition:
left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
-moz-transition:
left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
transition:
left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
left: 1rem;
background: url("https://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg");
background-repeat: no-repeat;
background-position: center left 1rem;
background-attachment: fixed;
-webkit-background-size: 1rem 12.875rem;
-moz-background-size: 1rem 12.875rem;
-o-background-size: 1rem 12.875rem;
background-size: 1rem 12.875rem;
pointer-events: none;
}
#side-bar:hover+#main-content::after,
#side-bar:active+#main-content::after {
left: -17em;
left: -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
left: -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
left: calc(var(--sidebar-width-on-desktop, 17em) * -1);
background-position: center left -17em;
background-position: center left -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
background-position: center left -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
background-position: center left calc(var(--sidebar-width-on-desktop, 17em) * -1);
-webkit-transition:
left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
-o-transition:
left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
-moz-transition:
left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
transition:
left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
opacity: 0;
width: 0rem;
font-size: 0em;
}
#side-bar:focus-within+#main-content::after {
left: -17em;
left: -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
left: -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
left: calc(var(--sidebar-width-on-desktop, 17em) * -1);
background-position: center left -17em;
background-position: center left -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
background-position: center left -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
background-position: center left calc(var(--sidebar-width-on-desktop, 17em) * -1);
-webkit-transition:
left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
-o-transition:
left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
-moz-transition:
left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
transition:
left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
opacity: 0;
width: 0rem;
font-size: 0em;
}
#main-content::before {
--not-ie: absolute;
content: " ";
background-color: black;
background-color: rgb(var(--swatch-alternate-color, 0, 0, 0));
position: fixed;
position: var(--not-ie);
top: 0;
top: var(--final-header-height-on-desktop, 0);
left: 0;
-webkit-transform: translateX(-12.6rem);
-moz-transform: translateX(-12.6rem);
-ms-transform: translateX(-12.6rem);
-o-transform: translateX(-12.6rem);
transform: translateX(-12.6rem);
-webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
-moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
-ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
-o-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
width: 17em;
width: var(--sidebar-width-on-desktop, 17em);
height: -webkit-calc(100% - 3rem);
height: -moz-calc(100% - 3rem);
height: calc(100% - 3rem);
height: -webkit-calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
height: -moz-calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
height: calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
-webkit-transition:
opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
-webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
transition:
opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
-webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
-o-transition:
opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
-o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
-moz-transition:
transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
-moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
transition:
transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
transition:
transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
-webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
-moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
-o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
opacity: 0.5;
pointer-events: none;
z-index: 9;
margin-bottom: 0;
margin-bottom: -webkit-calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
margin-bottom: -moz-calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
margin-bottom: calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
}
#side-bar:hover+#main-content::before,
#side-bar:active+#main-content::before {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
opacity: 0;
}
#side-bar:focus-within+#main-content::before {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
opacity: 0;
}
#side-bar .side-block {
margin-top: 1em;
padding-left: 0.25em;
background-color: rgb(0, 0, 0, 0);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
border-left-width: 0rem;
border-right-width: 0rem;
direction: ltr;
}
#side-bar .scpnet-interwiki-wrapper {
direction: ltr;
}
@supports (-ms-ime-align: auto) {
#side-bar {
overflow-y: hidden;
overflow-x: hidden;
-webkit-transform: translateX(-90%) !important;
-moz-transform: translateX(-90%) !important;
-ms-transform: translateX(-90%) !important;
-o-transform: translateX(-90%) !important;
transform: translateX(-90%) !important;
}
#side-bar:hover,
#side-bar:active {
overflow-y: auto;
-webkit-transform: translateX(0) !important;
-moz-transform: translateX(0) !important;
-ms-transform: translateX(0) !important;
-o-transform: translateX(0) !important;
transform: translateX(0) !important;
margin-left: -0.5rem;
}
#side-bar:focus-within {
overflow-y: auto;
-webkit-transform: translateX(0) !important;
-moz-transform: translateX(0) !important;
-ms-transform: translateX(0) !important;
-o-transform: translateX(0) !important;
transform: translateX(0) !important;
margin-left: -0.5rem;
}
#main-content::before {
left: 1rem;
-webkit-transform: translateX(-100%) !important;
-moz-transform: translateX(-100%) !important;
-ms-transform: translateX(-100%) !important;
-o-transform: translateX(-100%) !important;
transform: translateX(-100%) !important;
}
}
}
#main-content .page-tags::before {
content: "TAG\0021b4";
}
DaLil$tick - 62 votes
MI SA - 58 votes
Irina Bougainvillea - 38 votes
KirQ &
Nya Piece – 32 votes
King Pigeon &
Suzu-Hitsuji – 29 votes
Yohank – 25 votes
KH Nam – 22 votes
Agent MTD08 &
Doctor NHMP - 21 votes
EstrellaYoshte – 20 votes
StupifPotato – 18 votes
Hazarral – 15 votes
Ts StreetBoii & Corgi#7099 – 13 votes
SCPFoundationVietnam
