Màu Sắc Chủ Đề
Sử dụng
Lưu ý: Đây là theme dựa trên Black Highlighter. Bạn sẽ cần import cả theme Black Highlighter để sử dụng theme này. Để tìm hiểu thêm bấm vào đây.
Trên bất kì wiki nào:
[[include :scp-vn:theme:black-highlighter-theme]]
[[include :scp-vn:theme:aesthetic-theme]]
Ví dụ
Một dòng kẻ ngang có thể được tạo với 5 dấu gạch ngang "-----" và giãn ra cả trang nếu nó không được đặt trong bất kì thứ gì (ví dụ một blockquote). Các đường chia phần của tài liệu là các dòng kẻ ngang.
Đề mục có thể được tạo bằng cách đặt giữa một và sáu dấu cộng "+" ở đầu dòng1
Đây là một tab.
Nhìn này, nhiều nội dung hơn.
Thật kì lạ.
Đây là một tab dài. Nó chứa rất nhiều nội dung.2
Đây là một tab dài. Nó chứa rất nhiều nội dung.
Đây là một tab dài. Nó chứa rất nhiều nội dung.
Đây là một tab dài. Nó chứa rất nhiều nội dung.
Đây là một tab dài. Nó chứa rất nhiều nội dung.
Đây là một tab dài. Nó chứa rất nhiều nội dung.
Đây là một tab dài. Nó chứa rất nhiều nội dung.
Đây là một tab dài. Nó chứa rất nhiều nội dung.
Đây là một tab dài. Nó chứa rất nhiều nội dung.
Đây là một tab dài. Nó chứa rất nhiều nội dung.
Đây là một tab dài. Nó chứa rất nhiều nội dung.
Đây là một tab dài. Nó chứa rất nhiều nội dung.
Đây là một hộp, được tạo bằng cách đặt "> " đầu tiên ở từng dòng.3
Nhiều nội dung hơn
Đây là horizontal rule
Hộp lồng nhau
Đây là một | bảng |
---|---|
Bạn nên biết | cách làm |
rồi chứ |
Font chữ nội dung là Prenton.
The Header font is Flood Std.
Font chữ tiêu đề là Eurostile.
Font chữ đơn cách là Recursive.
@supports(display: grid) { :root { --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19); --body-width-on-desktop: 45.75rem; } @media only screen and (min-width: 769px) { #side-bar .close-menu { display: block; position: fixed; top: 0.25rem; left: 0.5rem; width: 3rem; opacity: 1; pointer-events: all; z-index: -1; } #side-bar .close-menu img { color: transparent; } #side-bar .close-menu::before, #side-bar .close-menu::after { content: ""; box-sizing: border-box; position: fixed; display: block; top: 0.5rem; left: 0.5rem; width: 3rem; height: 3rem; padding: 0; margin: 0; text-align: center; pointer-events: all; cursor: pointer; transition: opacity var(--sidebar-transition-timing); } #side-bar .close-menu::before { --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E"); z-index: -1; background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important; -webkit-mask: var(--mask); mask: var(--mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; -webkit-mask-size: 60%; mask-size: 60%; } #side-bar .close-menu::after { z-index: -2; background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important; border-radius: var(--toggle-roundness, 50%); border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid; } #side-bar:focus-within .close-menu::before, #side-bar:focus-within .close-menu::after { opacity: 0; } #side-bar { display: block; position: fixed; top: 0; left: calc(var(--sidebar-width-on-desktop)*-1); z-index: 10; transition: left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; height: 100%; overflow-y: auto; overflow-x: hidden; margin-top: 0; } #side-bar:focus-within { left: 0; } #side-bar .side-block { margin-top: 1rem; background-color: rgb(0, 0, 0, 0); border-radius: 0; border-left-width: 0px; border-right-width: 0px; } #main-content::before { content: ""; display: block; position: fixed; top: 0; right: 0; z-index: -1; opacity: 0; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; margin-left: var(--sidebar-width-on-desktop); background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat; padding-right: 0; width: 100%; height: 100vh; pointer-events: none; z-index: 99; } #side-bar:focus-within~#main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } #content-wrap { display: flex; flex-direction: row; width: calc(100vw - (100vw - 100%)); min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem))); flex-grow: 2; height: auto; position: relative; margin: 0 auto; max-width: inherit; } #main-content { width: 100%; position: initial; max-height: 100%; padding: 2rem 1rem; width: var(--body-width-on-desktop, 45.75rem); max-width: var(--body-width-on-desktop, 45.75rem); margin: 0 auto; } #page-content { max-width: min(90vw, var(--body-width-on-desktop, 45.75rem)); } @media not all and (-webkit-min-device-pixel-ratio:0), not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) { #side-bar { transition: left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; padding-right: 0; background-color: rgb(0, 0, 0, 0); pointer-events: all; overflow-x: visible; overflow-y: visible; z-index: 999; } #side-bar::-webkit-scrollbar { opacity: 0; -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; } #side-bar .close-menu::before { z-index: 999; } #side-bar .close-menu::after { z-index: 998; } #side-bar:hover .close-menu::before { opacity: 0; } #side-bar:hover { left: 0; background-color: rgba(var(--swatch-menubg-color), 1); padding-right: 0; } #side-bar:hover::-webkit-scrollbar { opacity: 1; } #side-bar:hover~#main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } } } } }
@supports(display: grid) { :root { /* header measurements */ --header-height-on-desktop: 10rem; --header-height-on-mobile: 10rem; --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem); --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem); } #header { --search-textbox-text-color: var(--swatch-secondary-color); background: none; } #header::before { content: " "; position: absolute; width: 100%; height: 100%; left: 0; top: 0.75rem; background-image: var(--logo-image); background-repeat: no-repeat; background-position: center 0; background-size: auto calc(var(--header-height-on-desktop) - 1.5rem); opacity: 0.8; pointer-events: none; } #header h1, #header h2 { margin: 0; padding: 0; width: 100%; height: var(--header-height-on-desktop); display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center; } #header h1 a, #header h1 a::before, #header h2 span, #header h2 span::before { margin: 0; padding: 0; z-index: 0; display: block; text-align: center; } #header h1 { z-index: 1; } #header h1 a::before, #header h1 a::after { content: var(--header-title); } #header h1 a::before { color: rgb(var(--swatch-text-tertiary-color)); z-index: -1; -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-dark)); } #header h1 a::after { color: rgb(var(--swatch-headerh1-color)); z-index: 1; } #header h2 { z-index: 0; text-transform: uppercase; pointer-events: none; } #header h2 span { margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em); } #header h2 span::before, #header h2 span::after { --wght: 600; content: var(--header-subtitle); position: absolute; left: 50%; transform: translateY(-50%) translateX(-50%); width: 100%; text-align: center; } #header h2 span::before { -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark)); } #header h2 span::after { color: rgb(var(--swatch-headerh2-color)); z-index: 1; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { color: rgba(0, 0, 0, 0); } @media (min-width: 36rem) { #login-status { flex-grow: 1; left: 3%; right: initial; } #login-status::before { --mask-image: none; background-color: transparent; } #login-status:not(:focus-within) { color: rgb(var(--login-line-divider-color)); -webkit-user-select: initial; -moz-user-select: initial; -ms-user-select: initial; user-select: initial; } #login-status #account-topbutton, #login-status:not(:focus-within) #account-topbutton { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); background-color: rgba(var(--login-arrow-color), 0); } #login-status #account-topbutton::before{ --clip-path: polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% ); --mask-image: initial; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(var(--login-arrow-color), 1); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status #account-topbutton::before, #login-status:not(:focus-within) #account-topbutton::before, #login-status:not(:focus-within) #account-topbutton:hover::before { --clip-path: polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% ); --mask-image: initial; } #login-status:not(:focus-within) #account-topbutton::after { display: none; } #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); pointer-events: all; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) { opacity: 1; } #login-status #my-account { --wght: 300; } #account-options { background: var(--gradient-header); } #search-top-box { top: 1.5em; right: 3%; background: rgba(var(--search-focus-textbox-bg-color), 0.4); box-shadow: calc(var(--search-height) / 2 * -1) 0 calc(var(--search-height) / 2) rgba(var(--search-focus-textbox-bg-color), 0.4); } #search-top-box:focus-within ~ #login-status { opacity: 1; } #search-top-box::after { transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); } #search-top-box:not(:focus-within)::after { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0% 100% ); background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #search-top-box:not(:focus-within):hover::after { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); background-color: rgb(var(--search-icon-hover-bg-color)); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) { max-width: var(--search-width); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { max-width: var(--search-width); padding: 0 var(--search-height) 0 1em; outline-width: 0; background-color: rgb(var(--search-focus-textbox-bg-color), 0.35); color: rgba(var(--search-textbox-text-color), 0.4); cursor: pointer; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"], #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] { pointer-events: all; border: none; } } #page-title::after, .meta-title::after, #page-title::before, .meta-title::before { content: ""; flex-grow: 1; height: 0.0625rem; background: rgb(var(--swatch-primary)); } #page-title::before, .meta-title::before { margin: auto 1.25rem auto auto; } }
@import url("https://use.typekit.net/afb2wxe.css"); @supports(display: grid) { :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: "AESTHETIC-theme"; /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */ --theme-name: "Theme TRANG ĐIỂM"; /* set this to your theme's full name */ /* Header */ --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme:aesthetic-theme/AESTHETIC_logo.svg"); --header-title: "Tổ Chức SCP"; --header-subtitle: "Quản Thúc, Lưu Trữ, Bảo Vệ"; /* Typefaces */ --body-font: prenton, serif; --header-font: flood-std, sans-serif; --title-font: eurostile-extended, sans-serif; /* Standard Colors */ --white-monochrome: 217, 233, 251; --pale-gray-monochrome: 1, 245, 252; --light-pale-gray-monochrome: 170, 207, 251; --very-light-gray-monochrome: 26, 139, 235; --light-gray-monochrome: 150, 62, 184; --gray-monochrome: 92, 42, 95; --dark-gray-monochrome: 39, 6, 75; --black-monochrome: 14, 12, 45; --bright-accent: 250, 245, 45; --pale-accent: var(--pale-gray-monochrome); --medium-accent: 255, 52, 131; --dark-accent: 195, 42, 158; --newpage-color: 204, 5, 166; --swatch-text-general: var(--swatch-text-light); --swatch-menutxt-general-color: var(--swatch-menutxt-light-color); --ui-wght: 700; --ui-hvr-wght: 900; /* ===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-dark-color); --swatch-tertiary-color: var(--swatch-menubg-light-color); --swatch-alternate-color: var(--swatch-primary); /* Text Colors for Secondary & Tertiary items like Sidebar Headers and Top-Bar Menu Text */ --swatch-text-secondary-color: var(--swatch-menutxt-dark-color); --swatch-text-tertiary-color: var(--swatch-menutxt-light-color); --swatch-headerh2-color: var(--dark-gray-monochrome); --swatch-topmenu-border-color: var(--pale-gray-monochrome); --swatch-topmenu-bg-color: var(--dark-gray-monochrome); /* ===MENU BACKGROUND COLORS=== */ --swatch-menubg-color: var(--black-monochrome); --swatch-border-color: var(--pale-gray-monochrome); --rating-module-text-color: var(--bright-accent); --rating-module-button-color: var(--bright-accent); --swatch-background: var(--black-monochrome, 14, 12, 45); --background-gradient-color: var(--dark-accent); --header-gradient-color-bottom: var(--light-gray-monochrome); --header-gradient-color-middle: var(--dark-accent); --header-gradient-color-top: var(--medium-accent); --gradient-header: linear-gradient(355deg, rgb(var(--header-gradient-color-bottom)) 0%, rgb(var(--header-gradient-color-middle)) 20%, rgb(var(--header-gradient-color-top)) 100%); --rating-module-text-color: var(--dark-gray-monochrome); --rating-module-button-color: var(--dark-gray-monochrome); /* ===HEADER TITLE FONT SIZES=== */ --header-h1-font-size: calc(var(--base-font-size) * 3.5); --header-h2-font-size: calc(var(--base-font-size) * 0.8); --scrollbar-width: 0.5rem; } #header { /* ===HEADER ELEMENTS=== */ /* ===SEARCH ELEMENT=== */ --search-icon-color: var(--swatch-primary); --search-icon-bg-color: var(--black-monochrome); --search-icon-hover-color: var(--swatch-primary); --search-icon-hover-bg-color: var(--swatch-primary); --search-icon-focus-color: var(--black-monochrome); --search-icon-focus-bg-color: var(--medium-accent); --search-focus-outline-color: var(--medium-accent); --search-textbox-text-color: var(--swatch-text-tertiary-color); --search-focus-textbox-text-color: var(--swatch-text-secondary-color); } #top-bar { /* ===TOPBAR ELEMENTS=== */ /* ===TOPBAR CATEGORIES=== */ --topmenu-category-color: var(--bright-accent); --topmenu-category-hover-color: var(--bright-accent); --mobile-topmenu-sidebar-button-color: var(--bright-accent); /* ===DROPDOWN MENU=== */ --dropdown-bg-color: var(--swatch-secondary-color), 0.8; --dropdown-links-color: var(--swatch-text-tertiary-color); --dropdown-links-hover-color: var(--swatch-text-secondary-color); } #side-bar { /* ===SIDE-BAR ELEMENTS=== */ /* ===SIDE-BAR GENERAL=== */ --sidebar-resources-bg-color: 0, 0, 0, 0; --sidebar-media-bg-color: 0, 0, 0, 0; /* ===SIDEBLOCK MENU=== */ --sideblock-bg-color: 0, 0, 0, 0; /* Transparent */ /* ===MENU-ITEMS=== */ --sidebar-links-text: var(--swatch-primary); --sidebar-links-hover-bg-color: var(--medium-accent); --sidebar-links-hover-text-color: var(--swatch-text-secondary-color); } #license-area { --license-link-hover-color: var(--swatch-text-secondary-color); } ::-moz-selection { background: rgb(var(--pale-gray-monochrome)); color: rgb(var(--black-monochrome)); } ::selection { background: rgb(var(--pale-gray-monochrome)); color: rgb(var(--black-monochrome)); } html { background: white; } html, body { font-feature-settings: "onum"0; font-variant-numeric: tabular-nums; } #extra-div-1 { --outrun-lines: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 645' overflow='visible' xml:space='preserve'%3E%3Cg id='Outrun_Lines'%3E%3Crect width='100' height='60'/%3E%3Crect y='63' width='100' height='12'/%3E%3Crect y='78' width='100' height='13'/%3E%3Crect y='94' width='100' height='12'/%3E%3Crect y='109' width='100' height='13'/%3E%3Crect y='125' width='100' height='12'/%3E%3Crect y='141' width='100' height='12'/%3E%3Crect y='157' width='100' height='12'/%3E%3Crect y='172' width='100' height='12'/%3E%3Crect y='187' width='100' height='12'/%3E%3Crect y='203' width='100' height='12'/%3E%3Crect y='219.5' width='100' height='11'/%3E%3Crect y='234.5' width='100' height='11'/%3E%3Crect y='249.5' width='100' height='11'/%3E%3Crect y='265.5' width='100' height='11'/%3E%3Crect y='281' width='100' height='10'/%3E%3Crect y='297' width='100' height='10'/%3E%3Crect y='313' width='100' height='9'/%3E%3Crect y='328' width='100' height='9'/%3E%3Crect y='343.5' width='100' height='9'/%3E%3Crect y='359' width='100' height='8'/%3E%3Crect y='374' width='100' height='9'/%3E%3Crect y='391' width='100' height='8'/%3E%3Crect y='407' width='100' height='8'/%3E%3Crect y='422' width='100' height='8'/%3E%3Crect y='437' width='100' height='8'/%3E%3Crect y='453' width='100' height='8'/%3E%3Crect y='469' width='100' height='6'/%3E%3Crect y='485' width='100' height='6'/%3E%3Crect y='501' width='100' height='4'/%3E%3Crect y='517' width='100' height='4'/%3E%3Crect y='533' width='100' height='4'/%3E%3Crect y='549' width='100' height='3'/%3E%3Crect y='564' width='100' height='3'/%3E%3Crect y='579' width='100' height='3'/%3E%3Crect y='595' width='100' height='3'/%3E%3Crect y='611' width='100' height='2'/%3E%3Crect y='627' width='100' height='2'/%3E%3Crect y='643' width='100' height='2'/%3E%3C/g%3E%3C/svg%3E%0A"); width: 100%; height: calc(100% - var(--final-header-height-on-desktop)); position: absolute; top: var(--final-header-height-on-desktop); left: 0; background-image: var(--gradient-background); -webkit-mask-image: var(--outrun-lines); mask-image: var(--outrun-lines); -webkit-mask-size: 8%; mask-size: 8%; -webkit-mask-position: top; mask-position: top; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; pointer-events: none; opacity: 0.5; } #extra-div-2, #extra-div-2 span { /* Mountains Mask hosted on external site due to CORS issue with wikidot hosted mask SVGs */ --mountains-mask: url("https://elusionillusion.com/img/AESTHETIC_mtns_vs2.svg"); display: block; width: 100%; top: 0; left: 0; position: absolute; pointer-events: none; } #extra-div-2 { height: var(--header-height-on-desktop); background-image: linear-gradient(35deg, rgb(var(--pale-gray-monochrome), 1) 0%, rgb(var(--pale-gray-monochrome), 0.3) 30%, rgb(var(--pale-gray-monochrome), 0.4) 50%, rgba(var(--pale-gray-monochrome), 0) 100%); -webkit-mask-image: var(--mountains-mask); mask-image: var(--mountains-mask); background-repeat: repeat; -webkit-mask-size: 400vmin; mask-size: 400vmin; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: bottom; mask-position: bottom; } #extra-div-2 span { height: 100%; background-image: linear-gradient(70deg, rgb(var(--bright-accent), 0.8) 0%, rgb(var(--medium-accent), 0.3) 50%, rgba(var(--bright-accent), 0.8) 100%); background-repeat: repeat; -webkit-animation: movebg 30s linear infinite normal; animation: movebg 30s linear infinite normal; will-change: background-size, background-position-x, background-position-y; } @-webkit-keyframes movebg { 0% { background-size: 200vw; background-position-x: 100vw; background-position-y: -100vw; } 50% { background-size: 400vw; background-position-x: 0; background-position-y: 100vw; } 100% { background-size: 200vw; background-position-x: -100vw; background-position-y: 200vw; } } @keyframes movebg { 0% { background-size: 200vw; background-position-x: 100vw; background-position-y: -100vw; } 50% { background-size: 400vw; background-position-x: 0; background-position-y: 100vw; } 100% { background-size: 200vw; background-position-x: -100vw; background-position-y: 200vw; } } #header::before { opacity: 1; -webkit-filter: drop-shadow(0.15rem 0.15rem 0.5rem rgba(var(--pale-gray-monochrome), 0.5)); filter: drop-shadow(0.15rem 0.15rem 0.5rem rgba(var(--pale-gray-monochrome), 0.5)); } #header h1 a { overflow-wrap: normal; } #header h1 a::before, #header h1 a::after { letter-spacing: 0.07em; } #header h1 a::before { -webkit-text-stroke: 0.325rem rgb(var(--dark-gray-monochrome)); } #header h1 a::after { color: rgb(var(--bright-accent)); background: linear-gradient(to top, rgb(var(--dark-gray-monochrome)) 0%, rgb(var(--dark-gray-monochrome)) 20%, rgb(var(--dark-accent)) 40%, rgb(var(--pale-gray-monochrome)) 70%); background-size: contain; overflow-wrap: normal; z-index: 1; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #header h2 span { width: 100%; } #header h2 span::before, #header h2 span::after { --wght: 500; top: calc(50% + (var(--header-h1-font-size) / 1.5)); letter-spacing: 0.25em; } #header h2 span::before { -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-secondary-color)); } /* Mobile Header Font Sizes */ @media only screen and (max-width: 36rem) { :root { /* ===HEADER TITLE FONT SIZES=== */ --header-h1-font-size: calc(var(--base-font-size) * 3); --header-h2-font-size: calc(var(--base-font-size) * 0.7); } } @media only screen and (max-width: 21.875rem) { :root { /* ===HEADER TITLE FONT SIZES=== */ --header-h1-font-size: calc(var(--base-font-size) * 2); --header-h2-font-size: calc(var(--base-font-size) * 0.7); } } #top-bar { font-size: var(--base-font-size); } #top-bar div.top-bar>ul>li>ul>li>a { --wght: 600; } #side-bar, #side-bar:hover { background: linear-gradient(to bottom, rgb(var(--black-monochrome)) 0%, rgb(var(--dark-gray-monochrome)) 50%, rgb(var(--dark-accent)) 100%); background-size: 400vh; background-origin: border-box; background-position: top left; } #side-bar div.menu-item { --text-shadow: rgb(var(--swatch-text-dark, 12, 12, 12, )); border-bottom: 0.0625rem solid rgb(var(--swatch-border-color)); border-top: 0.0625rem solid rgb(var(--swatch-border-color)); margin-top: -0.0625rem; text-shadow: .063rem .063rem .063rem var(--text-shadow); } #side-bar div.menu-item> :not(:nth-child(2)):not(.collapsible-block) { border-left: 0.0625rem solid rgb(var(--swatch-border-color)); } #side-bar div.menu-item a, #side-bar div.menu-item a:visited, #side-bar div.menu-item .text { --text-shadow: rgb(var(--black-monochrome)); letter-spacing: 0.1em; word-spacing: 0.1em; } #side-bar div.menu-item a::before, #side-bar div.menu-item a:hover::before { background: var(--gradient-header); background-attachment: fixed; background-position: top; background-origin: border-box; background-size: 100vh; } #side-bar .heading { text-align: center; justify-content: center; align-items: center; } #side-bar .heading p, #side-bar .side-block>.collapsible-block .collapsible-block-link { --text-shadow: rgb(var(--swatch-text-dark, 12, 12, 12, )); --ui-hvr-wght: 900; letter-spacing: 0.05rem; font-size: 1.25rem; position: relative; display: flex; justify-content: center; margin: 1rem 0 1rem 0.5rem; color: rgb(var(--pale-gray-monochrome)); font-family: var(--header-font); text-transform: none; } #side-bar .side-block[style*="background-color:"] .heading { margin-top: .25rem; } #side-bar .heading p::after, #side-bar .side-block>.collapsible-block .collapsible-block-link::after { bottom: -0.6rem; } #side-bar .heading p::before, #side-bar .side-block>.collapsible-block .collapsible-block-link::before { top: -0.6rem; } a[href*="/random:random-tale"], a[href*="/most-recently-edited"] { min-width: calc((var(--base-font-size) * (14 / 15)) * 6.5); } #main-content { z-index: 1; position: relative; } #main-content a:not([href*="javascript"]):not([href*="classification-"]), #main-content a:not([href*="javascript"]):not([href*="classification-"]):visited, #main-content div.collapsible-block a, #main-content div.collapsible-block a:visited { --wght: var(--ui-wght); background-color: rgb(var(--swatch-primary)); align-items: center; justify-content: center; text-align: center; margin: 0 0.4em 0 0.2em; color: rgb(var(--swatch-background)); box-shadow: 0.25em 0.25em 0 0 rgb(var(--swatch-primary-darker)); transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); -webkit-box-decoration-break: clone; box-decoration-break: clone; } #main-content a:not([href*="javascript"]):not([href*="classification-"]):hover, #main-content a:not([href*="javascript"]):not([href*="classification-"]):active, #main-content div.collapsible-block a:hover, #main-content div.collapsible-block a:active { --wght: var(--ui-hvr-wght); background-color: rgb(var(--swatch-primary-darker)); color: rgb(var(--swatch-background)); text-decoration: none; box-shadow: 0.125em 0.125em 0 0 rgb(var(--swatch-primary)), 0.3625em 0.3625em 0 0 rgb(var(--pale-gray-monochrome)); } #main-content a:not([href*="javascript"]):not([href*="classification-"]):focus-within, #main-content div.collapsible-block a:focus-within { --wght: var(--ui-hvr-wght); background-color: rgb(var(--swatch-primary-darker)); color: rgb(var(--swatch-background)); text-decoration: none; box-shadow: 0.125em 0.125em 0 0 rgb(var(--swatch-primary)), 0.3625em 0.3625em 0 0 rgb(var(--pale-gray-monochrome)); } #main-content a.footnoteref, #main-content a.footnoteref:visited { --wght: var(--ui-wght); background-color: rgb(var(--swatch-primary)); width: 1em; height: 1.1em; display: inline-flex; align-items: center; justify-content: center; text-align: center; margin: 0 0.4em 0 0.2em; color: rgb(var(--swatch-background)); box-shadow: 0.25em 0.25em 0 0 rgb(var(--swatch-primary-darker)); transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } #main-content a.footnoteref:hover, #main-content a.footnoteref:active { --wght: var(--ui-hvr-wght); background-color: rgb(var(--swatch-primary-darker)); color: rgb(var(--swatch-background)); box-shadow: 0.125em 0.125em 0 0 rgb(var(--swatch-primary)), 0.3625em 0.3625em 0 0 rgb(var(--pale-gray-monochrome)); } a.footnoteref:focus-within { --wght: var(--ui-hvr-wght); background-color: rgb(var(--swatch-primary-darker)); color: rgb(var(--swatch-background)); box-shadow: 0.125em 0.125em 0 0 rgb(var(--swatch-primary)), 0.3625em 0.3625em 0 0 rgb(var(--pale-gray-monochrome)); } #page-title, .meta-title { color: rgb(var(--pale-gray-monochrome)); border-color: rgba(0, 0, 0, 0); } #page-title::before, #page-title::after, .meta-title::before, .meta-title::after { background-image: linear-gradient(30deg, rgb(var(--bright-accent), 0.8) 0%, rgb(var(--dark-accent), 0.3) 50%, rgba(var(--bright-accent), 1) 100%); background-size: 100%; background-color: rgb(var(--bright-accent)); height: 0.125rem; } blockquote, .blockquote { background-color: rgba(var(--gray-monochrome), 0.25); border: 0.0625rem solid rgb(var(--swatch-border-color)); } blockquote:nth-of-type(odd) { border-color: rgb(var(--swatch-border-color)); } blockquote:nth-of-type(even) { border-color: rgb(var(--swatch-primary)); } table.wiki-content-table th { background: rgb(var(--swatch-primary-darker)); color: rgb(var(--dark-gray-monochrome)); } table.wiki-content-table, table.wiki-content-table th, table.wiki-content-table td { border: .0625rem solid rgba(var(--swatch-border-color), 1) !important; border-collapse: collapse; } .code { background-color: rgba(var(--swatch-menubg-dark-color), 0.25); border-color: rgb(var(--swatch-border-color)); } .hl-main { -webkit-filter: invert(1) hue-rotate(180deg); filter: invert(1) hue-rotate(180deg); } .scp-image-block .scp-image-caption { background-color: rgba(var(--swatch-menubg-dark-color), 0.25); } .scp-image-block img { border: 0.0625rem solid rgba(var(--swatch-border-color)); } a:visited { color: rgb(var(--swatch-primary-darker)); } h1 { color: rgb(var(--swatch-primary)) !important; } hr { border-top: none; position: relative; height: 0.35rem; background: rgba(0, 0, 0, 0); display: flex; } hr::before { content: " "; position: absolute; top: 0.1125rem; left: 0; border-top: none; width: 100%; height: 0.125rem; background: linear-gradient(10deg, rgba(var(--gray-monochrome), 0.15) 0%, rgba(var(--pale-gray-monochrome), 1) 50%, rgba(var(--gray-monochrome), 0.15) 100%); background-position: center center; -webkit-filter: blur(0.04rem); filter: blur(0.04rem); } .page-rate-widget-box { background: linear-gradient(to top left, rgba(var(--swatch-primary), 1) 0, rgba(var(--swatch-primary-darkest), 1) 100%) !important; } form#edit-page-form { background-color: rgba(var(--dark-accent), 0.25); border: 0.0625rem solid rgb(var(--light-gray-monochrome)); } #side-bar iframe.scpnet-interwiki-frame:not(:lang(cn)) { -webkit-filter: invert(1); filter: invert(1); } #side-bar .scpnet-interwiki-wrapper:not(:lang(cn))::before, #side-bar .scpnet-interwiki-wrapper:not(:lang(cn)) p::before, #side-bar .scpnet-interwiki-wrapper:not(:lang(cn)) p::after { background-color: rgb(var(--swatch-menubg-color)); } #side-bar .scpnet-interwiki-wrapper:not(:lang(cn))::before { mix-blend-mode: lighten; } @media only screen and (max-width: 56.25rem) { a[href*="/random:random-tale"], a[href*="/most-recently-edited"] { min-width: calc((var(--base-font-size) * (14 / 15)) * 4); } #side-bar .heading p, #side-bar .side-block>.collapsible-block .collapsible-block-link { font-size: 1em; } } @-webkit-keyframes fade-in { from { opacity: 0; box-shadow: 0.25em 0.25em 0 0 rgb(var(--swatch-primary-darker)); } to { opacity: 1; box-shadow: 0.125em 0.125em 0 0 rgb(var(--swatch-primary)), 0.3625em 0.3625em 0 0 rgb(var(--pale-gray-monochrome)); } } @keyframes fade-in { from { opacity: 0; box-shadow: 0.25em 0.25em 0 0 rgb(var(--swatch-primary-darker)); } to { opacity: 1; box-shadow: 0.125em 0.125em 0 0 rgb(var(--swatch-primary)), 0.3625em 0.3625em 0 0 rgb(var(--pale-gray-monochrome)); } } }