Theme Trang (BHL Qua Chỉnh Sửa)
Theme đã được sửa đổi cho trang
TRANG CÓ SỬ DỤNG CÁC THÀNH PHẦN SAU
THEME BHL
Link Nguồn: https://scp-wiki.wikidot.com/theme:black-highlighter-theme
COLLAPSIBLE SIDEBAR
Link Nguồn: https://scp-wiki.wikidot.com/component:collapsible-sidebar
Overwatch Command
Bởi:EstrellaYoshte
Link Nguồn: https://scp-wiki.wikidot.com/desk-of-junior-designer-s-yvonne
CC-BY-SA 3.0
@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"; }