@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"; }

Chào mừng tới trang nháp của Wiki SCP-VN! Bạn có thể dùng trang này để thử nghiệm các format, đăng tải các tài liệu bạn đang làm và dùng để chia sẻ các tác phẩm của mình tới mọi người để nhận những đóng góp trước khi đăng lên wiki chính! Dưới đây là chút luật lệ ngắn bạn cần ghi tâm:
- Toàn bộ thành viên của wiki SCP-VN đều có thể tham gia tạo và chỉnh sửa trang nháp của riêng mình. Tuy nhiên bạn phải đăng ký tư cách THÀNH VIÊN TRANG NHÁP để có những đặc quyền này.
- Toàn bộ luật lệ của wiki SCP-VN đều áp dụng cho trang nháp này.
- Nhân viên của SCP-VN Wiki có quyền xóa các tài liệu vi phạm luật lệ của wiki. Nếu luật của trang chủ bị vi phạm trên trang nháp, thành viên có thể bị khởi tố vi phạm trên tư cách thành viên trang chủ.
- Trang nháp của wiki SCP-VN thường được giám sát bởi nhân viên. Nếu bạn phát hiện có vi phạm, hãy báo cáo cho chúng tôi.
- Cơ chế bình chọn của trang nháp hiện được vô hiệu hóa.
- Toàn bộ thành viên được yêu cầu tạo trang nháp không vi phạm quy chuẩn tên. Quy chuẩn tên yêu cầu thành viên tạo trang nháp với các tên cá nhân như tên tài khoản. Nghiêm cấm đặt tên trang là các bài đăng trên trang chủ như "SCP-XXXX".
- Đăng tải tài liệu lên trang nháp bị giới hạn. Bạn được phép đăng tài liệu như ảnh, âm thanh, v.v. lên trang nháp cho mục đích kiểm tra hiển thị, hỗ trợ đánh giá bài. Lưu ý: Từ sự thành lập của Trang nháp III, toàn bộ tệp phương tiện trên wiki chính sẽ chỉ dẫn từ các tệp đăng tải trên trang nháp chính thức. Đăng tải quá nhiều file phương tiện có thể khiến bạn bị cảnh cáo và yêu cầu gỡ file.
- Các trang nháp có chế độ tự động khóa. Chế độ khóa được kích hoạt trên trang khi có người đang chỉnh sửa trang. Chỉ có bạn mới có thể sửa trang. Bạn mở khóa chế độ này và cho phép các người dùng khác tham gia chỉnh sửa trang bằng cách thêm cụm collab: trước tên.
- Trong trường hợp component bị hỏng. Bạn thử thêm cụm :scp-vn: trước tên trang của lệnh include xem sao nhé.
- Đóng góp vui vẻ :)
Để tạo trang nháp, hãy tham gia trang trước nhé!
Nhập TÊN TRANG của bạn ở hộp phía dưới đây:
Hướng dẫn về Lưu trữ Hình ảnh
Trong trường hợp tác giả/dịch giả mong muốn lưu trữ các tác phẩm hội họa của mình trên trang nháp. Vui lòng tạo một trang bất kỳ để lưu trữ hình ảnh cho một bài duy nhất. Ví dụ bài SCP-6488 hiện có trang lưu trữ và chỉ trang lưu trữ 6488. Để thông báo cho các người dùng khác rõ hơn về trang lưu trữ của bạn cho bài, đặt tag image-hub cho bài và thêm component sau:
[[include component:image-hub |post=(thêm)
Với mục (thêm) thay bằng mã bài của bài đó trên Wiki SCP-VN.
Các Hướng dẫn có ích (Wiki SCP-VN)
- Cách để Viết SCP
- Thực hiện Biện pháp An toàn
- Viết bài Kỹ thuật
- Hướng dẫn cho Dịch giả
- Các bài này cùng nhiều bài hướng dẫn khác có thể được tìm thấy tại Trung tâm Hướng fẫn
Các hướng dẫn trên đều được đăng tải tại SCP-VN Wiki.
Thêm vào đó, hãy xem qua Wikidot Syntax để biết cách làm văn bản ngầu lòi như tô đen, in nghiêng, v.v. Một mục nhỏ cơ bản của danh sách cũng có thể tìm thấy tại Hướng Dẫn Cách để viết SCP phía trên.