Tham gia trang nháp
@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"; }
THAM GIA LÀM THÀNH VIÊN TRANG NHÁP
Vui lòng lưu ý rằng bạn cần phải là thành viên của trang nháp mới được tạo trang nháp tại đây. Trở thành thành viên của Wiki Tổ Chức SCP không nghĩa bạn là thành viên của trang nháp, đây là hai wiki tách biệt.
Vui lòng bấm nút phía dưới để tham gia wiki.
Nếu nút tham gia không hiển thị, có nghĩa wiki hiện đang trong chế độ chỉ nhận thành viên qua gửi lời mời.
Vui lòng tham gia Discord của Tổ Chức SCP, vào mục #dịch-thuật-wiki và xin yêu cầu được gửi lời mời tham gia trang nháp. Bạn cần phải ghi rõ tên tài khoản và tuổi của mình để nhân viên xem xét. Mọi thắc mắc vui lòng liên hệ nhân viên.
Vui lòng tham khảo hướng dẫn trước khi tham gia máy chủ