@charset "utf-8"; @import "../fonts/fonts.css"; @supports(display: grid) { /* ROOT VARS ============================= */ /* Structural elements generally part of standard HTML spec as well as Wikidot's base structural elements */ /* ===DIRECTORY=== 1. =S-CSS-P INTEGRATION 2. =HEADER ELEMENTS 3. =TYPEFACES 3.1 =BASE FONT SIZE & LINE HEIGHT 3.2 =HEADER TITLE FONT SIZES 4. =VARIABLE FONT SETTINGS 4.1 =VARIABLE MONO FONT SETTINGS 5. =OPENTYPE FEATURE SETTINGS 6. =STANDARD THEME COLORS 7. =PRIMARY COLORS 8.1. =GENERAL COLORS 8.2. =GENERAL TEXT COLORS 8. =BACKGROUND & HEADER COLORS 9. =MENU COLORS 9.1 =MENU BACKGROUND COLORS 9.2 =MENU TEXT COLORS 10. =SECONDARY & TERTIARY COLORS 11. =PRIMARY GRADIENTS 12. =STRUCTURAL SPACING ELEMENTS 14.1 =HEADER MEASUREMENTS 14.2 =TOPBAR MEASUREMENTS 14.3 =FINAL HEADER + TOPBAR MEASUREMENTS 14.4 =SIDEBAR MEASUREMENTS =============================== ======= SPECIFIC COLORS ======= =============================== 13. =BACKGROUND GRADIENT 13.1 =GENERAL BACKGROUND 13.2 =HEADER GRADIENT 13.3 =TOPBAR GRADIENT 14. =LINK COLORS 15. =HEADER ELEMENTS 15.1 =HEADER TITLES 15.2 =SEARCH ELEMENT 15.3 =LOGIN BOX ELEMENT 16. =TOPBAR ELEMENTS 16.1 =TOPBAR CATEGORIES 16.2 =DROPDOWN MENU 17. =SIDE-BAR ELEMENTS 17.1 =SIDE-BAR GENERAL 17.2 =SOCIAL MEDIA ICONS 17.3 =SIDEBLOCK MENU 17.4 =MENU-ITEMS 17.5 =SIDEBAR COLLAPSIBLES 18. =FOOTER 19. =LICENSE AREA 20. =MAIN CONTENT UI ELEMENTS 20.1 =UI ICONS 20.1.1 =PAGE OPTIONS ICONS 20.1.2 =TEXT EDITOR ICONS 20.2 =TABS 20.3 =TABLES 20.4 =BLOCKQUOTES 20.5 =FOOTNOTES/BIBLIOGRAPHY FOOTER 20.6 =TOC 21. =GLOBAL ELEMENTS 21.1 =UI BUTTONS 21.2 =RATING MODULE 21.3 =MODALS 21.4 =FOOTNOTES HOVER BLOCK =============================== ========= DEPRECIATED ========= =============================== 22. =LEGACY VARS =============== */ :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: "black-highlighter"; /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */ --theme-name: "Black Highlighter Theme"; /* set this to your theme's full name */ /* ===HEADER ELEMENTS=== */ --logo-image: url("https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg"); --header-title: "SCP Foundation"; --header-subtitle: "SECURE, CONTAIN, PROTECT"; /* ===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: 244, 244, 244; /* 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; /* subdued theme color, for visited links */ --pale-accent: 210, 20, 20; /* vivid theme color, the "default" accent color */ --bright-accent: 133, 0, 5; /* theme color */ --medium-accent: 100, 46, 44; /* darker theme color */ --dark-accent: 100, 3, 15; /* alternate accent color, for newpage links */ --alt-accent: 221, 102, 17; /* ===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=== */ --body-width-on-desktop: 44.25rem; --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-desktop: min( calc( (var(--base-font-size) * (14 / 15)) * 19 ), calc( (100vw - var(--body-width-on-desktop)) ) ); --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, #interwiki { /* ===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; --tiktok-icon-color: 12, 12, 12; --tiktok-icon-gradient: linear-gradient( 125deg, rgb(37,244,238) 0%, rgb(37,244,238) 50%, rgb(254,44,85) calc(50% + 0.0625rem), rgb(254,44,85) 100% ); --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; } /* INT BRANCHES ROOT VARS ============================= */ /* Root Vars specific to various languages targeted to int-branches /* ===DIRECTORY=== 1. =CZECH BRANCH 2. =FRENCH BRANCH 3. =GERMAN BRANCH 4. =GREEK BRANCH 5. =ITALIAN BRANCH 6. =JAPANESE BRANCH 7. =KOREAN BRANCH 8. =POLISH BRANCH 9. =PORTUGESE BRANCH 10. =RUSSIAN BRANCH 11. =SIMPLIFIED CHINESE BRANCH 12. =SPANISH BRANCH 13. =THAI BRANCH 14. =TRADITIONAL CHINESE BRANCH 15. =UKRAINIAN BRANCH */ /* ===CZECH BRANCH=== */ :root:lang(cs) { /* Header */ --header-title: "SCP Nadace"; --header-subtitle: "Česká Větev SCP Nadace"; } /* ===FRENCH BRANCH=== */ :root:lang(fr) { /* header */ --header-title: "Fondation SCP"; --header-subtitle: "Sécuriser, Contenir, Protéger"; } /* ===GERMAN BRANCH=== */ :root:lang(de) { /* Header */ --header-title: "SCP Foundation"; --header-subtitle: "auf Deutsch"; } /* ===GREEK BRANCH=== */ :root:lang(el) { /* Header */ --header-title: "Το Ίδρυμα SCP"; --header-subtitle: "Ελληνόφωνος κλάδος"; } /* ===ITALIAN BRANCH=== */ :root:lang(it) { /* Header */ --header-title: "Fondazione SCP"; --header-subtitle: "Branca Italiana - SCP Foundation"; } /* ===JAPANESE BRANCH=== */ :root:lang(ja) { /* Header */ --header-title: "SCP財団"; --header-subtitle: "確保、収容、保護"; /* Fonts */ --body-font: Inter, "M PLUS 1p", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "MS Gothic", "Noto Sans CJK JP", TakaoPGothic, sans-serif; --UI-font: PTRootUI, "游ゴシック体", YuGothic, "ヒラギノ丸ゴ", "Hiragino Sans", "Yu Gothic UI", "Meiryo UI", "MS Gothic", Roboto, Noto, "Noto Sans CJK JP", sans-serif; --header-font: var(--body-font); --title-font: var(--body-font); --mono-font: Recursive, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "MS Gothic", "Noto Sans CJK JP", TakaoPGothic, monospace; } /* ===KOREAN BRANCH=== */ :root:lang(ko) { /* Header */ --header-title: "SCP 재단"; --header-subtitle: "확보, 격리, 보호"; /* Fonts */ --body-font: Inter, NanumBarunCatsi, "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", "굴림", "Gulim", "돋움", "Dotum", "Helvetica Neue", "Helvetica", Arial, sans-serif; --UI-font: PTRootUI, "Nanum Gothic", "Apple SD Gothic Neo", "Malgun Gothic", Roboto, Noto, "Noto Sans CJK KR", sans-serif; --header-font: var(--body-font); --title-font: var(--body-font); --mono-font: "Nanum Gothic Coding", Recursive, "Apple SD Gothic Neo", "NanumBarunGothic", "맑은 고딕", "Malgun Gothic", "굴림", "Gulim", "돋움", "Dotum", "Helvetica Neue", "Helvetica", Arial, monospace; } /* ===POLISH BRANCH=== */ :root:lang(pl) { /* Header */ --header-title: "Fundacja SCP"; --header-subtitle: "Polska Filia SCP"; } /* ===PORTUGESE BRANCH=== */ :root:lang(pt-br) { /* Header */ --header-title: "Fundação SCP"; --header-subtitle: "Filial Lusófona"; } /* ===RUSSIAN BRANCH=== */ :root:lang(ru) { /* Header */ --header-title: "The SCP Foundation"; --header-subtitle: "Russian Branch"; /* Typefaces */ --body-font: Inter, Charcoal, 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, Charcoal, "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; } :root:lang(ru) { --sidebar-width-on-desktop: calc((var(--base-font-size) * (14/15) * 19)); --body-width-on-desktop: 75rem; } /* ===SPANISH BRANCH=== */ :root:lang(es) { /* Header */ --header-title: "La Fundación SCP"; --header-subtitle: "Rama Hispanohablante"; } /* ===SIMPLIFIED CHINESE BRANCH=== */ :root:lang(cn) { --theme-base: "黑色标记笔"; --theme-id: "黑色标记笔"; --theme-name: "黑色标记笔"; /* Header */ --header-title: "SCP基金会"; --header-subtitle: "控制，收容，保护"; /* Fonts */ --body-font: Inter, "Noto Sans SC", Verdana, "Microsoft YaHei", "微软雅黑", Geneva, sans-serif, STXihei, "华文细黑"; --UI-font: PTRootUI, "方体", "PingFang SC", "黑体", "Heiti SC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK SC", sans-serif; --header-font: var(--body-font); --title-font: var(--body-font); --mono-font: Recursive, "Noto Serif SC", "Microsoft YaHei", "微软雅黑", "Courier New", Courier, monospace, STXihei, "华文细黑"; } /* ===THAI BRANCH=== */ :root:lang(th) { /* Header */ --header-title: "สถาบัน SCP"; --header-subtitle: "ควบคุม, กักกัน, ป้องกัน"; /* Typefaces */ --body-font: Inter, "Kanit", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Verdana, Geneva, sans-serif; --UI-font: PTRootUI, "Kanit", "Thonburi", "Leelawadee UI", "Cordia New", Roboto, Noto, "Noto Sans Thai", sans-serif; --header-font: var(--body-font); --title-font: var(--body-font); --mono-font: Recursive, "Kanit", Consolas, monaco, monospace; } /* ===TRADITIONAL CHINESE BRANCH=== */ :root:lang(zh) { /* Header */ --header-title: "SCP基金會"; --header-subtitle: "控制，收容，保護"; /* Typefaces */ --body-font: Inter, "Noto Sans TC", "微軟正黑體", "Microsoft JhengHei", "Microsoft JhengHei UI", “微軟雅黑”, "Microsoft YaHei", "Microsoft YaHei UI", sans-serif; --UI-font: PTRootUI, "方體", "PingFang HK", "方體", "PingFang TC", "黑體", "Heiti TC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK TC", sans-serif; --header-font: var(--body-font); --title-font: var(--body-font); --body-font: InRecursiveer, "Noto Sans TC", "微軟正黑體", "Microsoft JhengHei", "Microsoft JhengHei UI", “微軟雅黑”, "Microsoft YaHei", "Microsoft YaHei UI", monospace; } /* ===UKRAINIAN BRANCH=== */ :root:lang(uk) { /* Header */ --header-title: "Фонд SCP."; --header-subtitle: "Охороняти. Утримувати. Захищати."; /* Typefaces */ --body-font: Inter, Charcoal, 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, Charcoal, "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; } :root:lang(uk) { --sidebar-width-on-desktop: calc((var(--base-font-size) * (14/15) * 19)); --body-width-on-desktop: 75rem; } /* ENCODED SVGS ============================= */ /* URI Encoded SVG files used in other .css files. Centrally located here as they tend to be very long and make the code feel very cluttered. */ /* ===DIRECTORY=== 1. =GENERAL USE SVGS 2. =HEADER SVGS 2.1 =COMMON THEME SVGS 3. =SOCIAL ICON SVGS 4. =RATING MODULE SVGS 5. =PAGE OPTIONS BUTTONS SVGS 6. =EDIT MENU BUTTONS MASKS /* ===GENERAL USE SVGS=== */ :root { --down-arrow-mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Right_Arrow' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 6' overflow='visible' xml:space='preserve'%3E%3Cpath d='M0,0l5,6l5-6H0z'/%3E%3C/svg%3E%0A"); --right-arrow-mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-16'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Right_Arrow' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 6 10' overflow='visible' xml:space='preserve'%3E%3Cpath d='M0,10l6-5L0,0V10z'/%3E%3C/svg%3E%0A"); } /* ===HEADER SVGS=== */ :root { --search-icon-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='search_icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M164.4 141.4h-10.6l11.8-11.8-6.5-12.9c1.2-2.9 2.2-5.9 3-9 8.2-30.6-3.4-61.9-26.9-80.2l-.8-14.5-49-13-7.9 12.1c-29.6 4.1-55.2 25.4-63.4 56-.8 3.1-1.4 6.2-1.9 9.3L0 85.3l13.1 48.8 14.5.8c9.9 12.7 23.9 22.4 40.6 26.9 16.8 4.5 33.7 3.1 48.6-3l12.9 6.5 11.6-11.6v10.6L177 200h8l15-15v-8l-35.6-35.6zm-76.5-6.2c-26.1 0-47.2-21.1-47.2-47.2s21.1-47.2 47.2-47.2 47.2 21.1 47.2 47.2c0 26-21.1 47.2-47.2 47.2z'/%3E%3C/svg%3E"); --user-account-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='UserIcon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M89.8 70.6c-9.9 0-15.8 7.9-15.8 15.8 0 15.8 19.8 19.8 27.7 31.6 7.9-11.9 27.7-15.8 27.7-31.6 0-7.9-5.9-15.8-15.8-15.8-7.9 0-11.9 7.9-11.9 7.9s-4-7.9-11.9-7.9z'/%3E%3Cpath d='M188.7 115.6c.1-.9.2-1.8.3-2.8.2-1.8.3-3.7.3-5.5v-2.8c0-1.1 0-2.2-.1-3.2 0-.4 0-.7-.1-1.1 0-.7-.1-1.4-.1-2.2 0-.4-.1-.8-.1-1.2-.1-.7-.1-1.3-.2-2 0-.4-.1-.9-.1-1.3-.1-.6-.2-1.3-.3-1.9-.1-.4-.1-.9-.2-1.3-.1-.6-.2-1.3-.3-1.9-.1-.4-.1-.8-.2-1.2-.1-.7-.3-1.4-.4-2.1-.1-.3-.1-.7-.2-1-.2-1-.5-2-.7-3-.1-.3-.2-.7-.3-1-.2-.7-.4-1.3-.6-2-.1-.4-.3-.9-.4-1.3-.2-.5-.4-1.1-.5-1.6-.2-.5-.3-.9-.5-1.4l-.6-1.5c-.2-.5-.4-.9-.5-1.4-.2-.5-.4-1-.6-1.4-.2-.5-.4-.9-.6-1.4-.2-.5-.4-.9-.6-1.4-.2-.5-.4-1-.7-1.4l-.6-1.2c-.5-1.1-1.1-2.1-1.7-3.2-.1-.3-.3-.5-.4-.8-.3-.5-.6-1.1-.9-1.6-.2-.3-.4-.6-.6-1-.3-.5-.7-1-1-1.6l-.6-.9c-.3-.5-.7-1-1.1-1.6l-.6-.9c-.4-.5-.7-1-1.1-1.6-.2-.3-.4-.5-.6-.8-.4-.5-.8-1.1-1.3-1.6-.1-.2-.3-.3-.4-.5-2.2-2.7-4.5-5.2-6.9-7.6l-.4-.4c-.5-.5-1.1-1-1.6-1.6-.2-.1-.3-.3-.5-.4-.6-.5-1.1-1-1.7-1.5-.2-.1-.3-.3-.5-.4l-1.8-1.5c-.1-.1-.2-.2-.3-.2-2.8-2.3-5.8-4.4-8.9-6.3-3.9-2.4-7.9-4.5-12.2-6.3L129.5 6h-59l-5.3 16.1c-32.1 13.6-54.6 45.4-54.6 82.4 0 1.8.1 3.7.2 5.5s.3 3.7.5 5.5L0 128.2l15 26.1 14.5 25.1 16.6-3.5c15 11.4 33.7 18.1 53.9 18.1 20.2 0 38.9-6.7 53.9-18.1l16.6 3.5 29.5-51.2-11.3-12.6zm-70-94.6 1.9 5.8 2.1 6.5 5.1 2.2-11 4 16.9 11.9c7.6 5.4 12.2 14.1 12.2 23.4v24.4c0 10.4-4.3 19.9-11.3 26.6-5.7 5.5-13.2 9.1-21.1 10.1-3.2.5-16.9.2-20.3.3-9.5 0-18.9-3.8-25.7-10.4-6.9-6.7-11.3-16.1-11.3-26.5V74.7c0-9.3 4.6-18.1 12.2-23.4l31.3-21.9 1.5-8.3h17.5zm44.2 141.5-5.9-1.2-6.7-1.4-5.4 4.1c-13 9.8-28.5 15-44.8 15s-31.9-5.2-44.8-15l-5.4-4.1-6.7 1.4-5.9 1.2-10.9-19c8.3-6.6 18.4-12 29.7-16C64.5 138.7 78 146 93.2 146H109c15.2 0 28.7-7.3 37.3-18.5 10.7 3.8 20.2 8.9 28.2 14.9l-11.6 20.1z'/%3E%3C/svg%3E%0A"); /* ===COMMON THEME SVGS=== */ --homebutton-mask: 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 7 7' overflow='visible' xml:space='preserve'%3E%3Cpolygon points='3.5,0 0,4 1,4 1,7 2.5,7 2.5,5 4.5,5 4.5,7 6,7 6,4 7,4 '/%3E%3C/svg%3E%0A"); --lightbulb-mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='far' data-icon='lightbulb' class='svg-inline--fa fa-lightbulb fa-w-11' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'%3E%3Cpath fill='currentColor' d='M176 80c-52.94 0-96 43.06-96 96 0 8.84 7.16 16 16 16s16-7.16 16-16c0-35.3 28.72-64 64-64 8.84 0 16-7.16 16-16s-7.16-16-16-16zM96.06 459.17c0 3.15.93 6.22 2.68 8.84l24.51 36.84c2.97 4.46 7.97 7.14 13.32 7.14h78.85c5.36 0 10.36-2.68 13.32-7.14l24.51-36.84c1.74-2.62 2.67-5.7 2.68-8.84l.05-43.18H96.02l.04 43.18zM176 0C73.72 0 0 82.97 0 176c0 44.37 16.45 84.85 43.56 115.78 16.64 18.99 42.74 58.8 52.42 92.16v.06h48v-.12c-.01-4.77-.72-9.51-2.15-14.07-5.59-17.81-22.82-64.77-62.17-109.67-20.54-23.43-31.52-53.15-31.61-84.14-.2-73.64 59.67-128 127.95-128 70.58 0 128 57.42 128 128 0 30.97-11.24 60.85-31.65 84.14-39.11 44.61-56.42 91.47-62.1 109.46a47.507 47.507 0 0 0-2.22 14.3v.1h48v-.05c9.68-33.37 35.78-73.18 52.42-92.16C335.55 260.85 352 220.37 352 176 352 78.8 273.2 0 176 0z'%3E%3C/path%3E%3C/svg%3E"); } /* ===SOCIAL ICON SVGS=== */ :root { --bilibili-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='bilibili_logo' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 2215 2080' xml:space='preserve'%3E%3Cpath d='M1536.5 714.3h-858c-58 0-105.1 47.2-105.1 105.1v549.5c0 58 47.2 105.1 105.1 105.1h858.1c58 0 105.1-47.2 105.1-105.1V819.4c0-57.9-47.2-105.1-105.2-105.1zM681.2 958.6l280.6-49.5 20.6 116.9-280.6 49.5-20.6-116.9zm570.3 317.7c-18.8 18.8-43.8 29.6-70.5 30.3-26.9.7-53.6-10.9-73.5-31.2-19.3 19.7-45 31.2-71.1 31.2h-2.4c-26.6-.8-51.7-11.5-70.5-30.3l-17.7-17.7 33.6-33.6 17.7 17.7c10.2 10.2 23.8 16 38.2 16.4 17.1.7 35.1-9.8 46.3-26.9l25.9-39.7 25.9 39.7c11.2 17.1 29.1 27.8 46.3 26.9 14.4-.4 28-6.2 38.2-16.4l17.7-17.7 33.6 33.6-17.7 17.7zm261.7-200.8-280.6-49.5 20.6-116.9 280.6 49.5-20.6 116.9z'/%3E%3Cpath d='M2090 1212.1c4.9-40 7.5-80.8 7.5-122.1 0-410-249.3-761.8-604.6-912.1L1434.5 0h-654l-58.4 177.9C366.8 328.2 117.5 680 117.5 1090c0 41.4 2.6 82.1 7.5 122.1L0 1351.8l327 566.4 183.5-38.4c166 125.7 372.8 200.2 597 200.2s431-74.5 597-200.2l183.5 38.4 327-566.4-125-139.7zm-329.6 156.8c0 123.6-100.2 223.8-223.8 223.8H1501c-3.4 36.2-33.5 64.6-70.6 64.6-37.1 0-67.1-28.4-70.6-64.6H855.1c-3.4 36.2-33.5 64.6-70.6 64.6-37.1 0-67.1-28.4-70.6-64.6h-35.5c-123.6 0-223.8-100.2-223.8-223.8V819.4c0-123.6 100.2-223.8 223.8-223.8h211.8l-91.8-91.8c-18.5-18.5-18.5-48.6 0-67.1 18.5-18.5 48.6-18.5 67.1 0l158.9 158.9h166l158.9-158.9c18.5-18.5 48.6-18.5 67.1 0 18.5 18.5 18.5 48.6 0 67.1l-91.8 91.8h211.8c123.6 0 223.8 100.2 223.8 223.8v549.5z'/%3E%3C/svg%3E"); --deviantart-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='deviantart_logo' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 2215 2080' xml:space='preserve'%3E%3Cpath d='M2090 1212.1c4.9-40 7.5-80.8 7.5-122.1 0-410-249.3-761.8-604.6-912.1L1434.5 0h-654l-58.4 177.9C366.8 328.2 117.5 680 117.5 1090c0 41.4 2.6 82.1 7.5 122.1L0 1351.8l327 566.4 183.5-38.4c166 125.7 372.8 200.2 597 200.2s431-74.5 597-200.2l183.5 38.4 327-566.4-125-139.7zm-548.7-592.9-257.2 490.4 21.3 25.4h235.9v350.5H1112l-37.7 25.4-120 229.1-26.1 25.4H673.7v-254.5l257.2-491.1-21.3-25.4H673.7V644.6H1103l37.7-25.4 120-229.8 25.4-25.4h255.2v255.2z'/%3E%3C/svg%3E"); --discord-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='Discord_Logo' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 2215 2080' xml:space='preserve'%3E%3Cpath d='M1337.6 939.4c-69.2 0-124.2 62.5-124.2 139.3 0 76.8 56.1 139.3 124.2 139.3 69.7 0 124.2-62.5 124.2-139.3 1.1-76.3-54.5-139.3-124.2-139.3zm-459.3 0c-69.2 0-124.2 62.5-124.2 139.3 0 76.8 56.1 139.3 124.2 139.3 69.2 0 124.2-62.5 124.2-139.3 1.1-76.3-54.5-139.3-124.2-139.3z'/%3E%3Cpath d='M2090 1212.1c4.9-40 7.5-80.8 7.5-122.1 0-410-249.3-761.8-604.6-912.1L1434.5 0h-654l-58.4 177.9C366.8 328.2 117.5 680 117.5 1090c0 41.4 2.6 82.1 7.5 122.1L0 1351.8l327 566.4 183.5-38.4c166 125.7 372.8 200.2 597 200.2s431-74.5 597-200.2l183.5 38.4 327-566.4-125-139.7zm-297.3 163c-.1 1.3-.8 2.4-1.8 3.2-118.2 86.8-232.8 139.5-345.7 174.5-1.8.5-3.8-.1-4.8-1.6-26.1-36.3-49.8-74.6-70.6-114.8-1.2-2.4-.1-5.2 2.3-6.1 37.6-14.2 73.4-31.2 107.9-51.3 2.7-1.6 2.9-5.5.4-7.4-7.3-5.4-14.5-11.1-21.5-16.8-1.3-1-3.1-1.3-4.5-.5-223.6 103.3-468.5 103.3-694.7 0-1.5-.7-3.2-.4-4.5.6-6.9 5.7-14.2 11.4-21.4 16.8-2.5 1.9-2.3 5.8.4 7.4 34.4 19.7 70.2 37.1 107.8 51.4 2.5.9 3.6 3.7 2.4 6.1-20.3 40.3-44 78.5-70.6 114.9-1.1 1.5-3.1 2.1-4.8 1.6-112.4-34.9-226.9-87.7-345.2-174.5-1-.8-1.7-2-1.8-3.2-24.1-257.9 25-519 204.2-786.8.4-.7 1.1-1.3 1.9-1.6 88.2-40.5 182.6-70.3 281.4-87.3 1.8-.3 3.6.5 4.5 2.1 12.2 21.6 26.2 49.3 35.6 72 104.1-15.9 209.8-15.9 316 0 9.4-22.2 22.9-50.4 35-72 .9-1.6 2.7-2.5 4.5-2.1 98.8 17.1 193.3 46.8 281.4 87.3.8.3 1.4.9 1.8 1.6 156.1 229.3 233.2 488.3 204.4 786.5z'/%3E%3C/svg%3E"); --facebook-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='Facebook_Logo' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 2215 2080' xml:space='preserve'%3E%3Cpath d='M2090 1212.1c4.9-40 7.5-80.8 7.5-122.1 0-410-249.3-761.8-604.6-912.1L1434.5 0h-654l-58.4 177.9C366.8 328.2 117.5 680 117.5 1090c0 41.4 2.6 82.1 7.5 122.1L0 1351.8l327 566.4 183.5-38.4c152.4 115.4 339.2 187.6 542.3 198.7v-709H795.4v-293h257.4V853.2c0-254.1 151.4-394.4 382.8-394.4 110.9 0 226.9 19.8 226.9 19.8V728h-127.8c-126 0-165.2 78.2-165.2 158.3v190.1h281.1l-44.9 293h-236.2V2045c122.8-33.6 236.2-90.3 335-165.2l183.5 38.4 327-566.4-125-139.7z'/%3E%3C/svg%3E"); --github-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='github_logo' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 2215 2080' xml:space='preserve'%3E%3Cpath d='M2090 1212.1c4.9-40 7.5-80.8 7.5-122.1 0-410-249.3-761.8-604.6-912.1L1434.5 0h-654l-58.4 177.9C366.8 328.2 117.5 680 117.5 1090c0 41.4 2.6 82.1 7.5 122.1L0 1351.8l327 566.4 183.5-38.4c166 125.7 372.8 200.2 597 200.2s431-74.5 597-200.2l183.5 38.4 327-566.4-125-139.7zm-736.9 603.8c-39.4 7.6-53.3-16.6-53.3-37.3 0-25.4 1-109.1 1-212.7 0-72.3-24.8-119.7-52.6-143.6 172.8-19.2 354.1-84.8 354.1-382.7 0-84.7-30-153.9-79.7-208.1 8-19.6 34.6-98.5-7.7-205.2 0 0-65-20.9-213 79.5-61.9-17.2-128.3-25.8-194.1-26.1-65.9.3-132.3 8.9-194.1 26.1-148.1-100.4-213.3-79.5-213.3-79.5-42.4 106.7-15.8 185.6-7.9 205.2-49.6 54.2-79.8 123.4-79.8 208.1 0 297.2 181 363.7 353.2 383.3-22.2 19.4-42.2 53.6-49.2 103.7-44.2 19.9-156.5 54.1-225.7-64.4 0 0-41-74.4-118.8-79.9 0 0-75.7-1-5.3 47.1 0 0 50.8 23.9 86.1 113.4 0 0 45.5 150.8 261.2 104 .4 64.7 1 113.5 1 131.9 0 20.6-14.2 44.5-52.9 37.4C554.2 1713.5 332 1422.8 332 1080.2c0-428.3 347.2-775.5 775.4-775.5 428.3 0 775.5 347.2 775.5 775.5.1 342.5-221.9 633-529.8 735.7z'/%3E%3C/svg%3E"); --instagram-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='Instagram_Logo' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 2215 2080' xml:space='preserve'%3E%3Cellipse cx='1107.5' cy='1074.9' rx='204.3' ry='204.3' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -435.692 1097.9515)'/%3E%3Cpath d='M1585.3 713.4c-11.1-28.6-24.4-49-45.8-70.5-21.4-21.4-41.9-34.7-70.5-45.8-21.6-8.4-54.1-18.4-113.8-21.1-64.6-2.9-84-3.6-247.7-3.6s-183 .6-247.7 3.6c-59.8 2.7-92.2 12.7-113.8 21.1-28.6 11.1-49 24.4-70.5 45.8-21.4 21.4-34.7 41.9-45.8 70.5-8.4 21.6-18.4 54.1-21.1 113.8-2.9 64.6-3.6 84-3.6 247.7s.6 183 3.6 247.7c2.7 59.8 12.7 92.2 21.1 113.8 11.1 28.6 24.4 49 45.8 70.5 21.4 21.4 41.9 34.7 70.5 45.8 21.6 8.4 54 18.4 113.8 21.1 64.6 2.9 84 3.6 247.7 3.6s183-.6 247.7-3.6c59.8-2.7 92.2-12.7 113.8-21.1 28.6-11.1 49-24.4 70.5-45.8 21.4-21.4 34.7-41.9 45.8-70.5 8.4-21.6 18.4-54.1 21.1-113.8 2.9-64.6 3.6-84 3.6-247.7s-.6-183-3.6-247.7c-2.7-59.7-12.7-92.2-21.1-113.8zm-477.8 676.2c-173.8 0-314.7-140.9-314.7-314.7s140.9-314.7 314.7-314.7 314.7 140.9 314.7 314.7-140.9 314.7-314.7 314.7zm327.2-568.3c-40.6 0-73.5-32.9-73.5-73.5s32.9-73.5 73.5-73.5 73.5 32.9 73.5 73.5-32.9 73.5-73.5 73.5z'/%3E%3Cpath d='M2090 1212.1c4.9-40 7.5-80.8 7.5-122.1 0-410-249.3-761.8-604.6-912.1L1434.5 0h-654l-58.4 177.9C366.8 328.2 117.5 680 117.5 1090c0 41.4 2.6 82.1 7.5 122.1L0 1351.8l327 566.4 183.5-38.4c166 125.7 372.8 200.2 597 200.2s431-74.5 597-200.2l183.5 38.4 327-566.4-125-139.7zm-373.3 115.5c-3 65.2-13.3 109.8-28.5 148.8-15.7 40.3-36.6 74.5-70.7 108.6-34.1 34.1-68.3 55-108.6 70.7-39 15.2-83.5 25.5-148.8 28.5-65.4 3-86.2 3.7-252.7 3.7s-187.3-.7-252.7-3.7c-65.2-3-109.8-13.3-148.8-28.5-40.3-15.7-74.5-36.6-108.6-70.7-34.1-34.1-55-68.3-70.7-108.6-15.2-39-25.5-83.5-28.5-148.8-3-65.4-3.7-86.2-3.7-252.7s.7-187.3 3.7-252.7c3-65.2 13.3-109.8 28.5-148.8 15.7-40.3 36.6-74.5 70.7-108.6 34.1-34.1 68.3-55 108.6-70.7 39-15.2 83.5-25.5 148.8-28.5 65.4-3 86.2-3.7 252.7-3.7s187.3.7 252.7 3.7c65.2 3 109.8 13.3 148.8 28.5 40.3 15.7 74.5 36.6 108.6 70.7 34.1 34.1 55 68.3 70.7 108.6 15.2 39 25.5 83.5 28.5 148.8 3 65.4 3.7 86.2 3.7 252.7s-.7 187.3-3.7 252.7z'/%3E%3C/svg%3E"); --naver-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='naver_logo' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 2215 2080' xml:space='preserve'%3E%3Cpath d='M2090 1212.1c4.9-40 7.5-80.8 7.5-122.1 0-410-249.3-761.8-604.6-912.1L1434.5 0h-654l-58.4 177.9C366.8 328.2 117.5 680 117.5 1090c0 41.4 2.6 82.1 7.5 122.1L0 1351.8l327 566.4 183.5-38.4c166 125.7 372.8 200.2 597 200.2s431-74.5 597-200.2l183.5 38.4 327-566.4-125-139.7zM1107.5 1881c-441.8 0-800-358.2-800-800s358.2-800 800-800 800 358.2 800 800-358.2 800-800 800z'/%3E%3Cpath d='M1267.7 1112.6 934.1 633.2H657.5v895.6h289.8v-479.3l333.6 479.3h276.6V633.2h-289.8z'/%3E%3C/svg%3E%0A"); --plurk-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='plurk_logo' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 2215 2080' xml:space='preserve'%3E%3Cpath d='M2090 1212.1c4.9-40 7.5-80.8 7.5-122.1 0-410-249.3-761.8-604.6-912.1L1434.5 0h-654l-58.4 177.9C366.8 328.2 117.5 680 117.5 1090c0 41.4 2.6 82.1 7.5 122.1L0 1351.8l327 566.4 183.5-38.4c166 125.7 372.8 200.2 597 200.2s431-74.5 597-200.2l183.5 38.4 327-566.4-125-139.7zM1107.5 1881c-441.8 0-800-358.2-800-800s358.2-800 800-800 800 358.2 800 800-358.2 800-800 800z'/%3E%3Cpath d='M1683 871.9c-25.3 9.4-44.8 15.5-68.3 10.1-75.3-190.9-257.5-329.1-470.3-340.1-179.7-9.3-340.1 69.6-443.8 196.2-4.7 5.8-9.4 11.6-13.9 17.5-.4.5-.8.9-1.1 1.4.1-.1.1-.1.2-.1 12.3-10.4 25.1-18.4 38.1-23.6 1-.4 2.1-.8 3.1-1.3 15.9-5.9 32-7.8 47.8-4.6 76.5 15.3 116.4 138.6 89 275.3-27.4 136.8-111.6 235.2-188.1 219.9-53.7-10.7-89.2-74.6-96.2-158.9v-.3 2.8c-.1 7-.1 14.1 0 21.2v3.9c0 1 .1 2.1.2 3.1.2 7.9.7 15.8 1.2 23.6.3 3.6.7 7.1 1 10.6.4 3.8.8 7.6 1.2 11.5 7.1 60.9 24.2 118.7 49.9 171.5 3.2 6.6 1.6 14.6-4.1 19.3l-14.7 12c-13.4 10.9-19.2 27.5-17.2 43.5.3 2.7 1 5.4 1.8 8l.3.9c.8 2.6 1.9 5.1 3.1 7.5l2.7-2 12.2-9.3c6.1-4.6 14.8-3.5 19.5 2.6 4.6 6.1 3.5 14.8-2.6 19.5l-13 9.9-1.9 1.5 62.5 76.9c16.7 20.6 47.2 23.7 67.8 7l13.7-11.1c5.8-4.7 14-4.6 19.9 0 95.1 75.4 216 119.2 346.8 115.8 110.5-2.9 212.2-39 296.1-98.5 6.2-4.4 14.6-3.9 20.1 1.3l8.7 8.3c16.5 15.7 41.4 17.2 59.6 5.2 1-.6 2-1.4 3-2.1l-.2-.2-11.1-10.5c-5.6-5.2-5.9-14-.6-19.6 5.2-5.6 14-5.9 19.6-.6l12 11.2 66.9-70.5c18.2-19.2 17.5-49.9-1.8-68.1l-14-13.3c-5.3-5-6.4-12.9-2.8-19.2 49.8-89.9 74.6-195.3 64.9-306.7-1.4-16.1-3.5-32-6.4-47.7 16-14.7 45.3-43.8 56.8-68.6 11.9-26.7 15-54.2-17.6-42.1z'/%3E%3Cpath d='M599.9 1034.9c5.4 65.3 32.9 114.8 74.4 123.1 59.2 11.8 124.3-64.3 145.5-170 21.2-105.7-9.7-201.1-68.8-212.9-23.1-4.6-47 4.3-68.9 22.9-23.9 20.4-45.4 52.5-60.6 92-.5-.1-1-.2-1.6-.4-7.5-2.1-11.4-7-16.6-8.1 20.5-22.1 23.5-56.2 5.5-81.8-20.7-29.6-61.5-36.7-91.1-16-26.6 18.7-34.9 53.5-21.2 81.9-12.1.5-24.3 4.2-35 11.7-29.6 20.7-36.7 61.5-16 91.1 20.7 29.6 61.5 36.7 91.1 16 9.4-6.6 16.3-15.3 21-25 9.9 18.2 24.5 33.3 41.4 43.7-.2 10.9.1 21.5.9 31.8zm69.9-181.3c14.3-12.2 29.9-18 44.9-14.9 38.5 7.7 58.6 69.8 44.8 138.7-13.8 68.9-56.2 118.5-94.8 110.8-26.2-5.2-43.8-35.7-48.1-76.2 9.6 3.7 19.7 6 29.7 6.5 28 1.3 46.3-8.1 60.5-27.3 18.4-24.7 4.5-93.1-19.8-101.9-18.9-6.9-30.1 1.4-47 2.6 8.7-15.9 18.9-29 29.8-38.3z'/%3E%3C/svg%3E"); --reddit-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='Reddit_Logo' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 2215 2080' xml:space='preserve'%3E%3Cpath d='M1318.4 1444.1c-46.5 47.8-148.4 64.1-220.1 64.1-71.7 0-172.3-16.4-220.1-64.1-11.3-11.3-28.9-11.3-40.2 0-11.3 11.3-11.3 28.9 0 40.2 74.2 74.2 217.6 80.5 260.3 80.5 41.5 0 184.9-5 260.3-80.5 10.1-11.3 10.1-28.9 0-40.2-11.3-11.3-28.9-11.3-40.2 0z'/%3E%3Cpath d='M2090 1212.1c4.9-40 7.5-80.8 7.5-122.1 0-410-249.3-761.8-604.6-912.1L1434.5 0h-654l-58.4 177.9C366.8 328.2 117.5 680 117.5 1090c0 41.4 2.6 82.1 7.5 122.1L0 1351.8l327 566.4 183.5-38.4c166 125.7 372.8 200.2 597 200.2s431-74.5 597-200.2l183.5 38.4 327-566.4-125-139.7zm-289.9-127.7c0 62.9-37.7 117-90.6 140.9 2.5 15.4 3.8 30.9 3.8 46.5 0 237.7-275.4 428.9-615 428.9s-615-192.4-615-428.9c0-16.4 1.3-31.4 3.8-46.5-15.9-7.2-30.5-17.1-43-29.2-61.1-58.8-62.9-155.9-4.1-217 58.8-61.1 155.9-62.9 217-4.1 106.9-76.7 254.1-125.8 417.6-130.8l78-367.2c1-7.2 5.2-13.7 11.3-17.6 5-3.8 12.6-5 20.1-3.8l255.3 54.1c17.8-35.9 53.8-59.2 93.8-60.7 60.4-2.3 111.2 44.8 113.5 105.1 2.3 60.4-44.8 111.2-105.1 113.5-60.4 2.3-111.2-44.8-113.5-105.1l-228.9-49.1-70.4 329.5c161 6.3 305.6 55.3 411.3 130.8 28.8-28 67.4-43.5 107.5-43.4 84.5.4 152.9 69.4 152.6 154.1z'/%3E%3Cpath d='M964.9 1193.8v-.2c0-60.4-49.1-109.4-109.5-109.3-60.4 0-109.4 49.1-109.3 109.5 0 60.4 49 109.4 109.4 109.4 60.5 0 109.4-49 109.4-109.4zm373.6-108.1h-.2c-60.4 0-109.4 49.1-109.3 109.5 0 60.4 49.1 109.4 109.5 109.3 60.4 0 109.3-49 109.3-109.3.1-60.5-48.9-109.5-109.3-109.5z'/%3E%3C/svg%3E"); --sandbox-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='sandbox_logo' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 2215 2080' xml:space='preserve'%3E%3Cpath d='M2090 1212.1c4.9-40 7.5-80.8 7.5-122.1 0-410-249.3-761.8-604.6-912.1L1434.5 0h-654l-58.4 177.9C366.8 328.2 117.5 680 117.5 1090c0 41.4 2.6 82.1 7.5 122.1L0 1351.8l327 566.4 183.5-38.4c166 125.7 372.8 200.2 597 200.2s431-74.5 597-200.2l183.5 38.4 327-566.4-125-139.7zM1107.5 1881c-441.8 0-800-358.2-800-800s358.2-800 800-800 800 358.2 800 800-358.2 800-800 800z'/%3E%3Cpath d='m504.1 1518.1 386.6 131.1 820.2-131.1zm252.3-55.9h423c12.4-8 24.9-16.3 37.3-25.2 99.5-71.2 166-150.9 207.7-210.7-89.3-42.4-178.6-84.7-267.8-127.1l247.8-363 125.6 55c16.5 7.2 35.7 2.4 46.9-11.7L1620 725c16.4-20.8 8.2-51.5-16.4-61.3l-372.8-148.1c-15.5-6.2-33.3-1.9-44.3 10.6l-42.6 48.5c-17.6 20-10.8 51.4 13.6 62.2l130.5 58.2-237.5 353.7c-88-41.7-176-83.5-264-125.2-23.6 89.4-46.3 212.3-44.5 359 .8 65.3 6.3 125.4 14.4 179.6z'/%3E%3C/svg%3E"); --steam-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='steam_logo' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 2215 2080' xml:space='preserve'%3E%3Cpath d='M1721.3 835.4c0-141.9-115.3-257.4-257.1-257.4-141.7 0-257 115.5-257 257.4 0 142 115.3 257.5 257 257.5 141.8 0 257.1-115.5 257.1-257.5zm-449.6-.4c0-106.8 86.5-193.5 193-193.5 106.6 0 193.1 86.6 193.1 193.5 0 106.8-86.5 193.4-193.1 193.4-106.5 0-193-86.6-193-193.4z'/%3E%3Cpath d='M2090 1212.1c4.9-40 7.5-80.8 7.5-122.1 0-410-249.3-761.8-604.6-912.1L1434.5 0h-654l-58.4 177.9c-336 142.1-577.2 464.4-602.4 845.8l543.9 223.9c14.8-9.8 30.7-18.2 47.6-25.1 38.3-15.8 78.7-22.8 119-21l248.5-361c-.1-1.6-.1-3.3-.1-5 0-213.1 173-386.4 385.8-386.4s385.8 173.3 385.8 386.4c0 213-173 386.5-385.8 386.5-2.9 0-5.8-.1-8.7-.2l-355.6 254.1c1 39.2-6.2 78.5-21.7 116-59.6 143.4-224.9 211.7-368.3 151.8-87.6-36.5-147-112.5-166.4-199L20.4 1329 0 1351.8l327 566.4 183.5-38.4c166 125.7 372.8 200.2 597 200.2s431-74.5 597-200.2l183.5 38.4 327-566.4-125-139.7z'/%3E%3Cpath d='m748.4 1629.6-125.6-52c22.2 46.5 60.8 85.4 111.8 106.7 110.7 46.1 238-6.5 284.2-117.3 22.3-53.5 22.4-112.8.3-166.5s-63.7-95.7-117.3-118c-53.2-22.1-110.1-21.4-160.2-2.4l129.8 53.8c81.6 34 120.2 127.8 86.2 209.5-33.9 81.5-127.5 120.2-209.2 86.2z'/%3E%3C/svg%3E"); --telegram-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='telegram_logo' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 2215 2080' xml:space='preserve'%3E%3Cpath d='M2090 1212.1c4.9-40 7.5-80.8 7.5-122.1 0-410-249.3-761.8-604.6-912.1L1434.5 0h-654l-58.4 177.9C366.8 328.2 117.5 680 117.5 1090c0 41.4 2.6 82.1 7.5 122.1L0 1351.8l327 566.4 183.5-38.4c166 125.7 372.8 200.2 597 200.2s431-74.5 597-200.2l183.5 38.4 327-566.4-125-139.7zm-394.4-561c-3.4 47.9-34.2 215.6-58.2 397l-82.1 537.3s-6.8 78.7-68.4 92.4c-61.6 13.7-154-47.9-171.1-61.6-13.7-10.3-256.7-164.3-342.2-239.6-24-20.5-51.3-61.6 3.4-109.5l359.3-342.2c41.1-41.1 82.1-136.9-89-20.5l-479.1 325.1s-54.8 34.2-157.4 3.4l-222.5-68.4s-82.1-51.3 58.2-102.7c342.2-160.9 763.2-325.1 1136.2-479.1-.1 0 123.1-48 112.9 68.4z'/%3E%3C/svg%3E"); --tiktok-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='tiktok_logo' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 2215 2080' xml:space='preserve'%3E%3Cpath d='M2090 1212.1c4.9-40 7.5-80.8 7.5-122.1 0-410-249.3-761.8-604.6-912.1L1434.5 0h-654l-58.4 177.9C366.8 328.2 117.5 680 117.5 1090c0 41.4 2.6 82.1 7.5 122.1L0 1351.8l327 566.4 183.5-38.4c166 125.7 372.8 200.2 597 200.2s431-74.5 597-200.2l183.5 38.4 327-566.4-125-139.7zm-381.6-294.4c-111.8 10.9-209.8-25.6-323.7-94.6v418.3c0 531.4-579.4 697.5-812.3 316.6-149.7-245.1-58-675.2 422.1-692.5v235.9c-36.6 5.9-75.7 15.1-111.4 27.3-106.8 36.2-167.3 103.8-150.5 223.3 32.4 228.7 452 296.4 417.1-150.5V364.4h231.7v-.4c23.1 198.9 134.1 317.4 327.1 330v223.7z'/%3E%3C/svg%3E%0A"); --twitch-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='Twitch_Logo' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 2215 2080' xml:space='preserve'%3E%3Cpath d='m1035.5 1510 175-175h200l200-200V585h-800v750h225v175zm325-750h100v300h-100V760zm-275 0h100v300h-100V760z'/%3E%3Cpath d='M2090 1212.1c4.9-40 7.5-80.8 7.5-122.1 0-410-249.3-761.8-604.6-912.1L1434.5 0h-654l-58.4 177.9C366.8 328.2 117.5 680 117.5 1090c0 41.4 2.6 82.1 7.5 122.1L0 1351.8l327 566.4 183.5-38.4c166 125.7 372.8 200.2 597 200.2s431-74.5 597-200.2l183.5 38.4 327-566.4-125-139.7zm-379.5-27.1-450 450h-200l-250 250v-250h-300V735l250-250h950v700z'/%3E%3C/svg%3E"); --twitter-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='Twitter_Logo' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 2215 2080' xml:space='preserve'%3E%3Cpath d='M2090 1212.1c4.9-40 7.5-80.8 7.5-122.1 0-410-249.3-761.8-604.6-912.1L1434.5 0h-654l-58.4 177.9C366.8 328.2 117.5 680 117.5 1090c0 41.4 2.6 82.1 7.5 122.1L0 1351.8l327 566.4 183.5-38.4c166 125.7 372.8 200.2 597 200.2s431-74.5 597-200.2l183.5 38.4 327-566.4-125-139.7zm-393.2-378.6c.5 12.2.8 24.5.8 36.9 0 376.5-286.6 810.6-810.6 810.6-160.9 0-310.7-47.2-436.7-128 22.3 2.6 45 4 68 4 133.5 0 256.3-45.5 353.8-122-124.7-2.3-229.9-84.7-266.2-197.9 17.4 3.3 35.2 5.1 53.6 5.1 26 0 51.2-3.5 75.1-10-130.3-26.2-228.5-141.3-228.5-279.4v-3.6c38.4 21.3 82.3 34.2 129 35.6-76.4-51.1-126.7-138.3-126.7-237.1 0-52.2 14.1-101.2 38.6-143.2C687.5 777 897.4 890.4 1134.2 902.3c-4.9-20.9-7.4-42.6-7.4-64.9 0-157.3 127.6-284.9 284.9-284.9 81.9 0 156 34.6 208 90 64.9-12.8 125.9-36.5 180.9-69.1-21.3 66.5-66.5 122.4-125.3 157.6 57.6-6.9 112.5-22.2 163.6-44.9-38.1 57.1-86.4 107.3-142.1 147.4z'/%3E%3C/svg%3E"); --youtube-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='youtube_logo' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 2215 2080' xml:space='preserve'%3E%3Cpath d='M2090 1212.1c4.9-40 7.5-80.8 7.5-122.1 0-410-249.3-761.8-604.6-912.1L1434.5 0h-654l-58.4 177.9C366.8 328.2 117.5 680 117.5 1090c0 41.4 2.6 82.1 7.5 122.1L0 1351.8l327 566.4 183.5-38.4c166 125.7 372.8 200.2 597 200.2s431-74.5 597-200.2l183.5 38.4 327-566.4-125-139.7zM1107.5 1881c-441.8 0-800-358.2-800-800s358.2-800 800-800 800 358.2 800 800-358.2 800-800 800z'/%3E%3Cpath d='M1728.8 768.4c-15.2-56.1-59-99.9-115.1-115.1-100.9-27.5-506.9-27.5-506.9-27.5s-406 .8-506.9 28.3c-56.1 15.2-99.9 59-115.1 115.1-30.5 179.3-42.4 452.4.8 624.5 15.2 56.1 59 99.9 115.1 115.1 100.9 27.5 506.9 27.5 506.9 27.5s406 0 506.9-27.5c56.1-15.2 99.9-59 115.1-115.1 32.2-179.5 42.1-452.5-.8-625.3zm-751.2 507.7V885.9l336.8 195.1-336.8 195.1z'/%3E%3C/svg%3E%0A"); } /* ===RATING MODULE SVGS=== */ :root { --rateup-mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Up' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 200 200' overflow='visible' xml:space='preserve'%3E%3Cpolygon points='200.1,86.6 113.5,86.6 113.5,0 86.5,0 86.5,86.6 -0.1,86.6 -0.1,113.4 86.5,113.4 86.5,200 113.5,200 113.5,113.4 200.1,113.4 '/%3E%3C/svg%3E%0A"); --ratedown-mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Down' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 200 200' overflow='visible' xml:space='preserve'%3E%3Crect x='10' y='86.6' width='180' height='26.9'/%3E%3C/svg%3E%0A"); --cancel-mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Cancel' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 200 200' overflow='visible' xml:space='preserve'%3E%3Cpolygon points='198.3,20.1 179.9,1.7 100,81.6 20.1,1.7 1.7,20.1 81.6,100 1.7,179.9 20.1,198.3 100,118.4 179.9,198.3 198.3,179.9 118.4,100 '/%3E%3C/svg%3E%0A"); --credit-button-mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Info' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 200 200' overflow='visible' xml:space='preserve'%3E%3Cpath d='M140.1,154.6c-12,23.7-29,45.4-57.7,45.4c-19,0-26.6-12-20.5-34.3l20.5-75c2.1-7.3,0.9-11.7-4.7-12L61.1,77l2.3-10.5 l66.8-8.2l1.8,2.1l-27.5,101.9c-1.8,7-2,12.6,3.2,12.6c5.9,0,16.1-14.9,22.8-26.9L140.1,154.6z M138.1,19.9 c0,15.5-10.8,24.3-24.9,24.3c-13.8,0-22-7.9-22-19.9C91.2,12.6,99.4,0,116.4,0C128.7,0,138.1,7,138.1,19.9z'/%3E%3C/svg%3E%0A"); } /* ===PAGE OPTIONS BUTTONS SVGS=== */ :root { --edit-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='Edit-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M103.1 36.1h50v71.7h-50z' transform='matrix(0.7071 0.7071 -0.7071 0.7071 88.3726 -69.4924)'/%3E%3Cpath d='m60.3 139.7 17.7-53 35.3 35.3z'/%3E%3Cpath d='M146.1 13.9h50v30h-50z' transform='matrix(0.7071 0.7071 -0.7071 0.7071 70.5477 -112.5254)'/%3E%3Cpath d='M178.5 97.5c-.5-3.6-1.2-7.2-2.2-10.8-.9-3.5-2.1-6.9-3.4-10.2l-15.8 15.8c.7 2.6 1.2 5.3 1.6 7.9l1.3 9 7.6 5 2 1.3-7.7 28.9-2.4.1-9.1.5-5.6 7.2c-9.3 12-22 20.4-36.6 24.3-5.9 1.6-11.9 2.4-17.9 2.4-8.9 0-17.6-1.7-25.9-5.1l-8.4-3.4-8.1 4.1-2.1 1.1-21.2-21.2 1.1-2.1 4.1-8.1-3.4-8.4c-1.1-2.6-2-5.4-2.7-8.1C16.5 100.8 26 72.4 48 55.2l7.2-5.6.5-9.1.1-2.4 28.9-7.7 1.3 2 5 7.6 9 1.3c2.7.4 5.3.9 7.9 1.6l15.8-15.8c-6.7-2.7-13.7-4.6-21-5.6L93.3 7.4 36.4 22.6l-.9 16.8C8 60.8-5.4 97.2 4.1 132.9c1 3.6 2.1 7.1 3.5 10.4L0 158.4 41.6 200l15.1-7.6c10.5 4.3 21.8 6.6 33.5 6.6 7.6 0 15.4-1 23.1-3.1 19.5-5.2 35.7-16.5 47.3-31.3l16.9-.9 15.2-56.9-14.2-9.3z'/%3E%3C/svg%3E"); --pagerate-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='Vote-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M0 100c0 51.9 39.5 94.5 90 99.5v-20.2c-39.4-4.9-70-38.6-70-79.4 0-33.5 20.7-62.2 50-74.1V100H40l50 60V.5C39.5 5.5 0 48.1 0 100zM110 .5v20.2c39.4 4.9 70 38.6 70 79.4 0 33.5-20.7 62.2-50 74.1V100h30l-50-60v159.6c50.5-5 90-47.7 90-99.5S160.5 5.5 110 .5z'/%3E%3C/svg%3E"); --tags-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='Tags-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='m183.5 37 1.7-16.6-20.9-6.9zM124.4.3.2 82.4l54.5 83.9L77 151.5l6.2-28-22.6 15.1-5.5-8.4 31.1-20.7 4.7-21.2L47 117.7l-5.5-8.4L94 74.2l4.6-21.1-65.3 43.6-5.4-8.4L101.7 39l.6-2.6 52.1-26.2z'/%3E%3Cpath d='m159.5 7.7-57.2 28.7L71 178.9l97.8 20.8 31.3-142.5-40.6-49.5zm-16.1 27.5c2.6-12.8 22.4-8.5 19.6 4.2-2.6 12.7-22.4 8.4-19.6-4.2zm17.8 152.6-78.3-16.6 28.1-128 23-11.5c-7.2 27.3 34.5 36.1 39 8.3l16.3 19.9-28.1 127.9z'/%3E%3C/svg%3E"); --discuss-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='Discuss-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='m85.4 107-5.4 8h60v10H73.4l-10 15H140v10H20v-10h36.6l-10-15H20v-10h20l-10-15H20V90h10V70H0v100h120l20 30 20-30v-63z'/%3E%3Cpath d='M40 0v97l20 30 20-30h120V0H40zm81.8 56.8c0-5.3 4-10.6 10.6-10.6 5.3 0 7.9 5.3 7.9 5.3s2.6-5.3 7.9-5.3c6.6 0 10.6 5.3 10.6 10.6 0 10.6-13.2 13.2-18.5 21.2-5.2-7.9-18.5-10.6-18.5-21.2zm31-46.8-9.9 9.9 1.7-9.9h8.2zM74.6 87l-3 4.5L60 109 50 94V10h90.6l-1.5 8.6L110 39v44.7l-7.1 3.3H74.6zM190 87h-12.9l-7.1-3.3V39l-19.6-13.7 21.2-7.7-1.4-3.8-23.8 8.7-.2-.2 12.1-12.1-.2-.2H190v77z'/%3E%3C/svg%3E"); --history-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='History-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='m108.9 113.9 14.7-50.5-14.5-4.1-18.8 64.8 14.4 4.2 21.6 6.2 4.2-14.4z'/%3E%3Cpath d='M192.1 141.1c4.4-10.9 6.8-22.7 6.8-34.7 0-7.9-1-16-3.2-24-5.4-20.2-17.2-37.1-32.5-49.1l-1-17.5-59-15.8-9.6 14.7c-3.7.5-7.5 1.3-11.2 2.3-3.6 1-7.1 2.1-10.5 3.5l-10-10-18.3 55 55.1-18.4-10.3-10.3c2.7-.7 5.4-1.2 8.1-1.6l9.3-1.3L111 26l1.4-2.1 30 8 .1 2.5.5 9.4 7.5 5.8c12.4 9.7 21.1 22.8 25.2 38 1.6 6.1 2.5 12.4 2.5 18.6 0 9.2-1.8 18.3-5.3 26.9l-3.6 8.8 4.3 8.4 1.1 2.2-22 22-2.2-1.1-8.4-4.3-8.7 3.5c-2.7 1.1-5.6 2.1-8.4 2.8-27.9 7.5-57.5-2.4-75.2-25.2l-5.8-7.4-9.4-.5-2.5-.1-8-30L26 111l7.9-5.2 1.3-9.3c.4-2.8.9-5.5 1.6-8.2L20.5 71.9c-2.8 6.9-4.8 14.2-5.8 21.8L0 103.2l15.8 59.1 17.5 1c22.2 28.4 60 42.4 97 32.5 3.7-1 7.4-2.2 10.8-3.6l15.6 7.9 43.2-43.2-7.8-15.8z'/%3E%3C/svg%3E"); --files-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='Files-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M18.4 43.5.3 48.3l34.5 102.6z'/%3E%3Cpath fill='none' d='M60 20v180h140V75l-55-55z'/%3E%3Cpath d='M60 200h90.9H60zm85-180H60v180h140V75l-55-55zm35.9 50H150V39.1L180.9 70zm9.1 120H70V30h70v50h50v110z'/%3E%3Cpath d='M130 125h-10V10H90v90h10V40h10v70H80V0h50zm86.6 50.6c.2-1.7.3-3.5.3-5.2 0-19.7-11.5-37.4-29.4-45.3l-3-9.1h-34.3l-3 9.1c-17.9 8-29.4 25.7-29.4 45.3 0 1.7.1 3.5.3 5.2l-6.4 7.1 17.2 29.7 9.4-2c8.5 6.2 18.6 9.5 29.2 9.5s20.7-3.3 29.2-9.5l9.4 2 17.2-29.7-6.7-7.1zm-14.8 28.1-7.4-1.6-.7.6c-7.4 6.1-16.8 9.4-26.4 9.4s-19-3.3-26.4-9.4l-.7-.6-7.4 1.6-11.5-20 5.1-5.7-.2-.9c-.4-2.2-.5-4.4-.5-6.7 0-17.2 10.8-32.9 26.9-39.1l.9-.3 2.4-7.2H179l2.4 7.2.9.3c16.1 6.1 26.9 21.8 26.9 39.1 0 2.2-.2 4.5-.5 6.7l-.2.9 5.1 5.7-11.8 20z'/%3E%3Cpath d='M200.5 170.4c0-16.9-12.7-31.1-29.3-33v-4.8h-7.8v4.8c-16.6 2-29.3 16.1-29.3 33 0 4.6.9 9 2.7 13.1l-4.1 2.4 3.9 6.8 4.1-2.4c6.3 8.4 16.1 13.3 26.6 13.3s20.4-5 26.6-13.3l4.1 2.4 3.9-6.8-4.1-2.4c1.8-4.1 2.7-8.5 2.7-13.1zm-56.7 0c0-11.5 8.4-21.3 19.6-23.2v7.2H158l7.3 14.7h-.3l.2.3-16.4 1 2.7 4.6-6.2 3.6c-1.1-2.6-1.5-5.4-1.5-8.2zm23.4 23.5c-7 0-13.6-3.1-18.1-8.5l6.2-3.6 2.7 4.6 9-13.7.1.3.1-.3 9 13.7 2.7-4.6 6.2 3.6c-4.2 5.3-10.8 8.5-17.9 8.5zm22-15.3L183 175l2.7-4.6-16.4-1 .2-.3h-.3l7.3-14.7h-5.3v-7.2c11.1 1.9 19.6 11.7 19.6 23.2-.1 2.8-.6 5.6-1.6 8.2z'/%3E%3Cpath fill='none' d='M200 200H60V20h85l55 55z'/%3E%3Cpath d='m27 30 23 170V28z'/%3E%3C/svg%3E"); --print-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='Print-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M140 10v60H60V10h80m10-10H50v80h100V0zM40 120v80h120v-80H40zm110 70H50v-60h100v60z'/%3E%3Cpath d='M0 50v100h50v-20h100v20h50V50H0zm30 17h20v20H30V67zm140 48H30v-10h140v10z'/%3E%3Cpath d='M76.5 200h9.1l-9.4-16.3 5.1-5.7-.2-.9c-.4-2.2-.5-4.4-.5-6.7 0-17.2 10.8-32.9 26.9-39.1l.9-.3 2.4-7.2h23.1l2.4 7.2.9.3c10.3 3.9 18.5 11.8 23 21.5v-14.6c-4.7-5.5-10.7-10.1-17.6-13.2l-3-9.1h-34.3l-3 9.1c-17.9 8-29.4 25.7-29.4 45.3 0 1.7.1 3.5.3 5.2l-6.4 7.1 9.7 17.4zm82.4 0h1.1v-1.9z'/%3E%3Cpath d='m91.5 192.7 4.1-2.4c3.1 4.1 7 7.4 11.5 9.7h30.3c4.5-2.3 8.4-5.6 11.5-9.7l4.1 2.4 3.9-6.8-4.1-2.4c1.8-4.1 2.7-8.5 2.7-13.1 0-16.9-12.7-31.1-29.3-33v-4.8h-7.8v4.8c-16.6 2-29.3 16.1-29.3 33 0 4.6.9 9 2.7 13.1l-4.1 2.4 3.8 6.8zm34.7-38.2v-7.2c11.1 1.9 19.6 11.7 19.6 23.2 0 2.8-.5 5.6-1.5 8.2L138 175l2.7-4.6-16.4-1 .2-.3h-.3l7.3-14.7h-5.3zm-4 18.5.1-.3 9 13.7 2.7-4.6 6.2 3.6c-4.4 5.4-11.1 8.5-18.1 8.5-7 0-13.6-3.1-18.1-8.5l6.2-3.6 2.7 4.6 9-13.7.3.3zm-3.9-25.7v7.2H113l7.3 14.7h-.3l.2.3-16.4 1 2.7 4.6-6.2 3.6c-1-2.6-1.5-5.3-1.5-8.2 0-11.6 8.4-21.4 19.5-23.2z'/%3E%3C/svg%3E"); --site-tools-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='Site-Tools-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='m66 186.6-.8-14.5-.7-.6c-12.4-10.1-21.2-23.7-25.3-39.2-1.7-6.5-2.6-13.1-2.6-19.7 0-9.2 1.7-18.3 4.9-26.9l.3-.8-6.6-13 36.6-36.6 13 6.6.8-.3c2.4-.9 4.8-1.7 7.2-2.3 6.5-1.7 13.1-2.6 19.7-2.6 22.5 0 44.5 10.4 58.8 27.9l.6.7 14.5.8 13.4 50-12.2 8-.1.9c-.9 5.5-2.4 10.9-4.5 16.1l-1.1 2.8-15.9-16.2.3-1.1c.5-2.1 1-4.2 1.3-6.4l1.2-8.4 7.5-4.9-5.7-21.2-9-.5-5.2-6.7c-10.6-13.6-26.5-21.4-43.7-21.4-4.8 0-9.7.6-14.4 1.9-2.2.6-4.4 1.3-6.5 2.2L84 64.4l-8-4.1-15.6 15.6 4.1 8-3.2 7.8c-2.7 6.7-4.1 13.6-4.1 20.8 0 4.8.6 9.7 1.9 14.4 3.2 11.8 9.9 21.9 19.5 29.4l6.7 5.2.5 9 21.2 5.7 4.9-7.5 8.4-1.2c2.1-.3 4.2-.7 6.3-1.3l1.1-.3 16.1 16.1-2.8 1.1c-2.8 1.1-5.8 2.1-8.7 2.9-2.4.7-4.9 1.2-7.4 1.6l-.9.1-8 12.2-50-13.3z'/%3E%3Cpath d='M144 112.9c0-2.4-.3-4.7-.8-6.9l8.8-7.9c-2-5.3-5-10.1-8.9-14.2l-11 4.4c-1.8-1.4-3.8-2.7-5.9-3.7l-.7-11.8c-2.6-.9-5.4-1.5-8.2-1.8-2.8-.3-5.7-.4-8.4-.1l-3.4 11.4c-2.3.5-4.5 1.3-6.6 2.3l-9.7-6.8c-4.7 3.1-8.7 7.1-11.9 11.8l6.8 9.7c-1 2.1-1.8 4.3-2.3 6.6l-11.4 3.3c-.5 5.8.1 11.4 1.8 16.6l11.8.8c1 2.1 2.2 4.1 3.7 5.9l-4.5 11c4 3.8 8.8 6.9 14.1 9l8-8.8c1.1.3 2.3.5 3.4.6 1.2.1 2.3.2 3.5.2l5.8 10.4c5.7-.8 11-2.7 15.8-5.5l-1.9-11.7c1.8-1.4 3.5-3.1 4.9-4.9l11.7 2c2.8-4.7 4.8-10 5.6-15.8l-10.1-6.1zm-33.1 14.6c-8.4-1-14.5-8.6-13.5-17s8.6-14.4 17-13.5c8.4 1 14.5 8.6 13.5 17s-8.6 14.4-17 13.5z'/%3E%3Cpath d='M21.1 8.1h55.6v80H21.1z' transform='matrix(0.7071 0.7071 -0.7071 0.7071 48.305 -20.5051)'/%3E%3C/svg%3E"); --more-options-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='Layer_1' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M55 35v30H25V35h30m10-10H15v50h50V25zM0 40h15v20H0zm65 0h135v20H65zm100 45v30h-30V85h30m10-10h-50v50h50V75zm0 15h25v20h-25zM0 90h125v20H0zm105 45v30H75v-30h30m10-10H65v50h50v-50zM0 140h65v20H0zm115 0h85v20h-85z'/%3E%3C/svg%3E"); --edit-sections-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='Edit-Sections-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M14.1 63.7 0 49.6V140h90v-.4zM0 160h90v40H0zM110 0v60.6l20 20V20h50v160h-50v-19.9l-20-6.7V200h90V0z'/%3E%3Cpath d='M56.3 31.4h50v100h-50z' transform='matrix(-0.7071 0.7071 -0.7071 -0.7071 196.4094 81.5396)'/%3E%3Cpath d='m159.1 159.2-17.7-53-35.3 35.4z'/%3E%3Cpath d='M3.3 13.4h50v30h-50z' transform='matrix(-0.7071 0.7071 -0.7071 -0.7071 68.3764 28.5066)'/%3E%3C/svg%3E"); --append-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='Append-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M62.5 62.4 7.5 44 44.2 7.3z'/%3E%3Cpath d='M93.9 14.7c-3.7.5-7.5 1.3-11.2 2.3-3.6 1-7.1 2.2-10.5 3.5l16.4 16.4c2.7-.7 5.5-1.3 8.2-1.6l9.3-1.3 5.2-7.9 1.4-2.1 30 8 .1 2.5.5 9.4 7.5 5.8c12.4 9.7 21.1 22.8 25.2 38 1.6 6.1 2.5 12.4 2.5 18.6 0 9.2-1.8 18.3-5.3 26.9l-3.6 8.8 4.3 8.4 1.1 2.2-22 22-2.2-1.1-8.4-4.3-8.7 3.5c-2.7 1.1-5.6 2.1-8.4 2.8-27.9 7.5-57.5-2.4-75.2-25.2l-5.8-7.4-9.4-.5-2.5-.1-8-30 2.1-1.3 7.9-5.2 1.3-9.3c.4-2.8.9-5.5 1.6-8.2L20.8 71.9C18 78.8 16 86.1 15 93.6L.4 103.2l15.8 59.1 17.5 1c22.2 28.4 60 42.4 97 32.5 3.7-1 7.4-2.2 10.8-3.6l15.6 7.9 43.2-43.2-7.9-15.6c4.4-10.9 6.8-22.7 6.8-34.7 0-7.9-1-16-3.2-24-5.4-20.2-17.2-37.1-32.5-49.1l-1-17.5-59-16-9.6 14.7z'/%3E%3Ccircle cx='106.6' cy='106' r='72.5' fill='none'/%3E%3Cpath d='M106.6 61c-24.9 0-45 20.1-45 45s20.1 45 45 45 45-20.1 45-45-20.2-45-45-45zm30 50h-25v25h-10v-25h-25v-10h25V76h10v25h25v10z'/%3E%3Cpath d='M3.7 6.6h25.8v20H3.7z' transform='matrix(0.7071 0.7071 -0.7071 0.7071 16.6282 -6.885)'/%3E%3C/svg%3E"); --edit-meta-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='Meta-Tags-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M78.4 20.7 7.7 91.5 110.2 194l63.6-7.1 7.1-63.6L78.4 20.7zm35.5 162.8-92.1-92 56.6-56.6 92.1 92.1-5.7 50.9-50.9 5.6z'/%3E%3Cpath d='m180.9 123.3-5.3 47.4 16.8-30.4-55.5-134-51.6 21.4zM61.6 37.5l-17.1 7.1 3 7.1zm79.8 153 20.1 5.9 4.7-8.6z'/%3E%3Cpath d='M154.4 153.9c2.6 0 5.1 1 7.1 2.9 3.9 3.9 3.9 10.2 0 14.1-2 2-4.5 2.9-7.1 2.9s-5.1-1-7.1-2.9c-3.9-3.9-3.9-10.2 0-14.1 2-1.9 4.5-2.9 7.1-2.9m0-10c-5.3 0-10.4 2.1-14.1 5.9-7.8 7.8-7.8 20.5 0 28.3 3.8 3.8 8.8 5.9 14.1 5.9 5.3 0 10.4-2.1 14.1-5.9 7.8-7.8 7.8-20.5 0-28.3-3.7-3.8-8.8-5.9-14.1-5.9z'/%3E%3Cpath fill='none' stroke='%23000000' stroke-miterlimit='10' stroke-width='10' d='M65 105.2v-30h30m33.5 33.6v30h-30m-11.3-8.7 19.1-46.2'/%3E%3C/svg%3E"); --watchers-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='Watchers-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M76.9 124.8c-5.8-10.1-5.7-22.7.1-32.9l8.7 5c-4.1 7.1-4.1 15.9-.1 23l-8.7 4.9zm-67.3.5-9.2-4C27.5 56.5 98.3 18 158.8 25.8l-1 10c-56.5-7.4-123 28.8-148.2 89.5z'/%3E%3Cpath d='M111.8 51.2C47.9 63.9 10.6 136.8 8.2 167.1 89.8 198.2 188.3 131.5 200 54.6c-14.3-4.9-48-14.2-88.2-3.4zm29.2 80.9c-3.6 3.2-7.5 6.1-11.5 8.8l-9.4-16.6c6.2-7 3.8-19.4-5.1-23.2-7.4-2.8-11.3-12.5-8-19.7-20 9-21.3 48.7 4.4 47.9l9.6 16.8c-25.9 14.8-57.2 19.6-86.4 13.3l2.1-9.8c12.7 3.1 38.2 4.3 59.4-3.3-33.2-6.7-40.2-55.6-10.1-71.8 28-17.7 65 10.5 57 41.9 8.6-9.2 15.8-19.9 21-31.5l9.1 4.1c-7.4 16.5-18.5 31.4-32.1 43.1z'/%3E%3C/svg%3E"); --backlinks-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='Backlinks-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M192.1 141.1c4.4-10.9 6.8-22.7 6.8-34.7 0-7.9-1-16-3.2-24-5.4-20.2-17.2-37.1-32.5-49.1l-1-17.5-59-15.8-9.6 14.7c-3.7.5-7.5 1.3-11.2 2.3-3.6 1-7.1 2.1-10.5 3.5l-10-10-18.3 55 55.1-18.4-10.3-10.3c2.7-.7 5.4-1.2 8.1-1.6l9.3-1.3L111 26l1.4-2.1 30 8 .1 2.5.5 9.4 7.5 5.8c12.4 9.7 21.1 22.8 25.2 38 1.6 6.1 2.5 12.4 2.5 18.6 0 9.2-1.8 18.3-5.3 26.9l-3.6 8.8 4.3 8.4 1.1 2.2-22 22-2.2-1.1-8.4-4.3-8.7 3.5c-2.7 1.1-5.6 2.1-8.4 2.8-27.9 7.5-57.5-2.4-75.2-25.2l-5.8-7.4-9.4-.5-2.5-.1-8-30L26 111l7.9-5.2 1.3-9.3c.4-2.8.9-5.5 1.6-8.2L20.5 71.9c-2.8 6.9-4.8 14.2-5.8 21.8L0 103.2l15.8 59.1 17.5 1c22.2 28.4 60 42.4 97 32.5 3.7-1 7.4-2.2 10.8-3.6l15.6 7.9 43.2-43.2-7.8-15.8z'/%3E%3Cpath d='M102.2 108.3c-4.4 5.7-13-1-8.6-6.7l3.3-4.3c7.1-9.1 17-9.9 24.8-6.1 2.9 1.3 5.7 3.5 7.7 6 5.6 6.6 7.2 16.5.1 25.6l-20.9 26.9c-4.8 6.2-11 8.4-17 7.9-7.6 0-15.5-5.5-18.3-12.6-3.9-8.1-1.7-16.1 5.2-23.9 2.1 2.9 5.3 5.3 8.6 6.7-1.5 2-4.1 4.8-4.4 7.4-1.5 6.5 4.8 12.8 11.3 11.5 2.1-.3 4.3-1.4 6-3.6 4.9-6.3 20.9-26.9 20.9-26.9 1.3-1.6 1.9-3.3 2-4.9 1.1-9.8-11.4-14.8-17.4-7.1l-3.3 4.1z'/%3E%3Cpath d='M117.3 113.5c4.4-5.7-4.1-12.5-8.6-6.7l-3.3 4.3c-6 7.7-18.5 2.7-17.4-7.1.1-1.6.7-3.3 2-4.9 0 0 16-20.6 20.9-26.9 1.7-2.2 3.9-3.3 6-3.6 6.5-1.4 12.8 5 11.3 11.5-.3 2.6-2.9 5.4-4.4 7.4 3.3 1.3 6.5 3.8 8.6 6.7 6.9-7.8 9.2-15.8 5.2-23.9-2.8-7.2-10.7-12.6-18.3-12.6-6-.5-12.2 1.7-17 7.9L81.4 92.5c-7.1 9.1-5.4 18.9.1 25.6 2 2.5 4.8 4.7 7.7 6 7.8 3.7 17.7 3 24.8-6.1l3.3-4.5z'/%3E%3C/svg%3E"); --view-source-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='View-Source-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath fill='none' stroke='%23000000' stroke-miterlimit='10' stroke-width='10' d='M69.2 139.9h-15v-60h15m-30 60h-15v-60h15m91.6 0h15v60h-15m30-60h15v60h-15m-44.8-70-32 80'/%3E%3Cpath d='M190 45v130H10V45h180m10-10H0v150h200V35z'/%3E%3Cpath d='M0 45h200V15H0v30zm59.9-20H180v10H59.9V25zm-20 0h10v10h-10V25zM20 25h10v10H20V25z'/%3E%3C/svg%3E"); --parent-page-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='Parent-Page-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M114.2 95.9c-.5-3.7-1.3-7.5-2.3-11.2-1-3.6-2.1-7.1-3.5-10.5l10-10-55-18.4 18.4 55.1L92 90.6c.7 2.7 1.2 5.4 1.6 8.1l1.3 9.3 7.9 5.2 2.1 1.4-8 30 16.2 19.9 15.8-59.1-14.7-9.5z'/%3E%3Cpath d='M160 70V0H0v130h40v70h160V70h-40zM59.9 10H140v10H59.9V10zm-20 0h10v10h-10V10zM20 10h10v10H20V10zm170 180H50v-90h20.9l-3.3-10H60V80h4.3L61 70H39.9v50H10V30h140v40h-23.2l-1.2 1.2-5.5 5.5c.4 1.1.7 2.2 1 3.2h59v10h-56.5l10.8 7.1 4.5 2.9H190V190z'/%3E%3C/svg%3E"); --lock-page-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='Page-Lock-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M140 120c5.5 0 10 4.5 10 10v50c0 5.5-4.5 10-10 10H60c-5.5 0-10-4.5-10-10v-50c0-5.5 4.5-10 10-10h80m0-10H60c-11 0-20 9-20 20v50c0 11 9 20 20 20h80c11 0 20-9 20-20v-50c0-11-9-20-20-20z'/%3E%3Cpath d='M0 40v140h40v-10H10V50h180v120h-30v10h40V40z'/%3E%3Cpath fill='none' stroke='%23000000' stroke-miterlimit='10' stroke-width='10' d='M130 113H70V83c0-5.5 4.5-10 10-10h40c5.5 0 10 4.5 10 10v30z'/%3E%3Cpath d='M0 50h200V20H0v30zm59.9-20H180v10H59.9V30zm-20 0h10v10h-10V30zM20 30h10v10H20V30zm80 155c-2.8 0-5-2.2-5-5v-30c0-2.8 2.2-5 5-5s5 2.2 5 5v30c0 2.8-2.2 5-5 5z'/%3E%3Cpath d='M105 160H95c-5.5 0-10-4.5-10-10v-10c0-5.5 4.5-10 10-10h10c5.5 0 10 4.5 10 10v10c0 5.5-4.5 10-10 10z'/%3E%3C/svg%3E"); --rename-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='Rename-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M80 140h20v20H80zm-30 0h20v20H50zm-30 0h20v20H20z'/%3E%3Cpath d='M190 110h-16l3.4 10H190v50H10v-50h81.2l-10-10H0v70h200v-70z'/%3E%3Cpath d='m179.9 159.2-53.1-17.7 35.4-35.4z'/%3E%3Cpath d='M24.1 13.4h50v30h-50z' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -5.6833 42.9942)'/%3E%3Cpath d='M76.8 31.1h50v100h-50z' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -27.5307 95.7386)'/%3E%3C/svg%3E"); --delete-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='Delete-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M150 70v120H50V70h100m10-10H40v140h120V60zm10-30v20H30V30h140m10-10H20v40h160V20z'/%3E%3Cpath d='M95 90h10v80H95zm30 0h10v80h-10zm-60 0h10v80H65zm55-80v10H80V10h40m10-10H70v30h60V0z'/%3E%3C/svg%3E"); } /* ===EDIT MENU BUTTONS MASKS=== */ :root { --h1-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='H1-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M22.4 160V40h14.5v53.4h64V40h14.5v120h-14.5v-53.7h-64V160H22.4zM177.6 40v120h-14.5V61.1h-.9c-.5 1.1-2 2.3-4.2 3.7-2.3 1.4-5.2 2.6-8.8 3.6s-7.7 1.6-12.3 1.6V57.8c4.6 0 8.7-.8 12.1-2.5 3.4-1.7 6.2-3.7 8.5-5.9 2.3-2.3 4-4.3 5.2-6.2 1.2-1.8 1.9-2.9 2.1-3.2h12.8z'/%3E%3C/svg%3E"); --h2-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='H2-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M10.2 160.8v-120h14.5v53.4h64V40.8h14.5v120H88.7v-53.7h-64v53.7H10.2zm106.8 0v-10.5l39.6-43.4c4.6-5.1 8.5-9.5 11.5-13.3 3-3.8 5.2-7.3 6.7-10.7s2.2-6.8 2.2-10.5c0-4.2-1-7.9-3-11-2-3.1-4.8-5.5-8.2-7.1-3.5-1.7-7.4-2.5-11.7-2.5-4.6 0-8.6.9-12 2.8-3.4 1.9-6.1 4.5-7.9 7.9s-2.8 7.4-2.8 12h-13.8c0-7 1.6-13.2 4.9-18.5 3.2-5.3 7.7-9.5 13.3-12.4 5.6-3 11.9-4.5 18.9-4.5 7 0 13.3 1.5 18.7 4.5 5.4 3 9.7 7 12.8 12s4.6 10.6 4.6 16.8c0 4.4-.8 8.7-2.4 12.9-1.6 4.2-4.3 8.9-8.2 14-3.9 5.1-9.3 11.4-16.1 18.8l-27 28.8v.9h55.8v12.9H117z'/%3E%3C/svg%3E"); --h3-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='H3-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M6.1 160V40h14.5v53.4h64V40h14.5v120H84.6v-53.7h-64V160H6.1zm147.3 1.6c-7.7 0-14.6-1.3-20.7-4s-10.8-6.4-14.4-11.1c-3.5-4.7-5.5-10.3-5.8-16.6h14.8c.3 3.9 1.6 7.2 4 10 2.3 2.8 5.4 5 9.2 6.5 3.8 1.5 8 2.3 12.6 2.3 5.2 0 9.7-.9 13.7-2.7 4-1.8 7.1-4.3 9.4-7.5 2.3-3.2 3.4-6.9 3.4-11.1 0-4.4-1.1-8.3-3.3-11.7-2.2-3.4-5.4-6-9.6-7.9-4.2-1.9-9.4-2.9-15.5-2.9h-9.6V92h9.6c4.8 0 9-.9 12.6-2.6 3.6-1.7 6.4-4.1 8.5-7.3 2.1-3.1 3.1-6.8 3.1-11 0-4.1-.9-7.6-2.7-10.6-1.8-3-4.3-5.4-7.6-7-3.3-1.7-7.1-2.5-11.5-2.5-4.1 0-8 .8-11.7 2.3-3.7 1.5-6.6 3.7-8.9 6.5-2.3 2.8-3.6 6.2-3.8 10.2h-14.1c.2-6.3 2.1-11.8 5.7-16.6 3.6-4.7 8.2-8.4 14-11.1 5.8-2.7 12.1-4 19-4 7.4 0 13.8 1.5 19.1 4.5 5.3 3 9.4 6.9 12.2 11.8 2.9 4.9 4.3 10.2 4.3 15.8 0 6.8-1.8 12.5-5.3 17.3-3.5 4.8-8.3 8.1-14.4 9.9v.9c7.6 1.3 13.5 4.5 17.8 9.6 4.3 5.2 6.4 11.6 6.4 19.2 0 6.5-1.8 12.4-5.3 17.5-3.5 5.2-8.3 9.2-14.4 12.2s-13 4.6-20.8 4.6z'/%3E%3C/svg%3E"); --h4-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='H4-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M83.2 93.4h-64V40H4.6v120h14.6v-53.7h64V160h14.5V40H83.2zm112.2 29.1H179V40h-17.7l-52.7 83.4v12h56.5V160h13.8v-24.6h16.4v-12.9zm-71.1-.9 39.8-63h.9v64h-40.8v-1z'/%3E%3C/svg%3E"); --h5-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='H5-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M6.4 159.2v-120h14.5v53.4h64V39.2h14.5v120H84.9v-53.7h-64v53.7H6.4zm147.6 1.6c-6.9 0-13.1-1.4-18.6-4.1s-9.9-6.5-13.2-11.2c-3.3-4.8-5.1-10.2-5.4-16.3h14.1c.5 5.4 3 9.9 7.4 13.4s9.7 5.3 15.8 5.3c4.9 0 9.3-1.2 13.2-3.5 3.8-2.3 6.9-5.5 9.1-9.5s3.3-8.6 3.3-13.7c0-5.2-1.1-9.9-3.4-14s-5.4-7.4-9.4-9.8c-4-2.4-8.5-3.6-13.7-3.6-3.7 0-7.4.5-11.3 1.7-3.9 1.2-7.1 2.6-9.6 4.4l-13.6-1.6 7.3-59.1h62.3v12.9h-50.2l-4.2 35.4h.7c2.5-2 5.5-3.6 9.3-4.9s7.6-1.9 11.6-1.9c7.3 0 13.9 1.7 19.7 5.2 5.8 3.5 10.3 8.3 13.6 14.3 3.3 6.1 5 13 5 20.7 0 7.7-1.7 14.5-5.1 20.5-3.4 6-8.1 10.7-14.1 14.2s-13 5.2-20.6 5.2z'/%3E%3C/svg%3E"); --h6-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='H6-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M5 160.1v-120h14.5v53.4h64V40.1H98v120H83.5v-53.7h-64v53.7H5zm149.9 1.7c-4.9-.1-9.8-1-14.8-2.8s-9.4-4.8-13.5-9.1-7.3-10.1-9.8-17.4c-2.5-7.3-3.7-16.5-3.7-27.6 0-10.7 1-20.1 3-28.4s4.9-15.2 8.7-20.9c3.8-5.7 8.4-10 13.7-12.9s11.4-4.4 18.2-4.4c6.7 0 12.7 1.3 18 4s9.5 6.4 12.9 11.2c3.3 4.8 5.5 10.3 6.4 16.6h-14.3c-1.3-5.5-3.9-10-7.7-13.6s-8.9-5.4-15.2-5.4c-9.3 0-16.6 4.1-21.9 12.2-5.3 8.1-8 19.5-8.1 34.2h.9c2.2-3.3 4.8-6.2 7.8-8.5 3-2.4 6.4-4.2 10-5.5s7.6-1.9 11.7-1.9c6.9 0 13.2 1.7 18.9 5.1 5.7 3.4 10.3 8.1 13.7 14.1 3.4 6 5.2 12.9 5.2 20.6 0 7.4-1.7 14.2-5 20.4s-8 11-14 14.6c-5.9 3.7-13 5.4-21.1 5.4zm0-12.9c4.9 0 9.3-1.2 13.3-3.7s7-5.8 9.3-9.9c2.3-4.1 3.4-8.8 3.4-13.8s-1.1-9.5-3.3-13.6c-2.2-4.1-5.2-7.3-9.1-9.8-3.8-2.4-8.2-3.6-13.2-3.6-3.7 0-7.2.7-10.4 2.2s-6 3.5-8.4 6c-2.4 2.5-4.3 5.4-5.7 8.7-1.4 3.3-2.1 6.7-2.1 10.3 0 4.8 1.1 9.2 3.4 13.4 2.2 4.1 5.3 7.5 9.3 10 4.1 2.5 8.5 3.8 13.5 3.8z'/%3E%3C/svg%3E"); --bold-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='Bold-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M53.9 159.4V40h47.8c8.8 0 16.1 1.3 22 3.9 5.9 2.6 10.3 6.2 13.2 10.8 3 4.6 4.4 9.9 4.4 15.9 0 4.7-.9 8.8-2.8 12.3s-4.4 6.4-7.7 8.6c-3.2 2.2-7 3.8-11.1 4.8v1.2c4.5.2 8.8 1.5 12.8 3.8 4 2.4 7.2 5.7 9.7 9.9 2.5 4.3 3.7 9.3 3.7 15.2 0 6.3-1.6 12-4.7 16.9-3.1 5-7.7 8.9-13.9 11.8-6.1 2.9-13.6 4.3-22.6 4.3H53.9zM79.2 90h18.7c3.5 0 6.5-.6 9.2-1.8 2.7-1.2 4.8-3 6.4-5.2 1.6-2.3 2.4-5 2.4-8.1 0-4.3-1.5-7.8-4.6-10.4-3.1-2.6-7.4-4-13-4H79.2V90zm0 48.8h20.6c7 0 12.2-1.4 15.4-4.1 3.2-2.7 4.8-6.3 4.8-10.8 0-3.3-.8-6.2-2.4-8.7-1.6-2.5-3.9-4.5-6.8-5.9-2.9-1.4-6.4-2.2-10.5-2.2H79.2v31.7z'/%3E%3C/svg%3E"); --italic-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='Italic-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='m136.4 52.9 2.2-12.9H81.4l-2.1 12.9h21.3l-15.7 94.2H63.6L61.4 160h57.2l2.1-12.9H99.4l15.7-94.2z'/%3E%3C/svg%3E"); --underline-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='Underline-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M30 172.5h140v10H30zM131.5 40h14.3v78c0 8.1-1.9 15.2-5.7 21.5-3.8 6.3-9.1 11.3-16 14.9-6.9 3.6-14.9 5.4-24.2 5.4-9.2 0-17.3-1.8-24.2-5.4-6.9-3.6-12.2-8.6-16-14.9C55.9 133.2 54 126 54 118V40h14.3v76.9c0 5.8 1.3 10.9 3.8 15.3 2.5 4.5 6.1 8 10.8 10.5 4.7 2.6 10.3 3.8 16.9 3.8s12.2-1.3 16.9-3.8c4.7-2.6 8.3-6.1 10.8-10.5 2.5-4.5 3.8-9.6 3.8-15.3V40z'/%3E%3C/svg%3E"); --strikethrough-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='Strike-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M30 95h140v10H30z'/%3E%3Cpath d='M127.5 69.8c-.7-5.9-3.6-10.5-8.6-13.8s-11-5-18.3-5c-5.3 0-10 .9-13.9 2.6-4 1.7-7.1 4.1-9.3 7.1-2.2 3-3.3 6.4-3.3 10.3 0 3.2.8 5.9 2.3 8.2 1.5 2.3 3.5 4.2 5.9 5.7 2.4 1.5 5 2.7 7.6 3.7 2.7 1 5.1 1.7 7.3 2.3l12.2 3.3c3.1.8 6.6 2 10.5 3.4 3.8 1.4 7.5 3.4 11.1 5.9s6.5 5.7 8.8 9.5 3.5 8.6 3.5 14.2c0 6.5-1.7 12.3-5.1 17.6-3.4 5.2-8.3 9.4-14.8 12.5s-14.3 4.6-23.5 4.6c-8.6 0-16-1.4-22.3-4.2s-11.2-6.6-14.8-11.6c-3.6-5-5.6-10.7-6.1-17.3h15c.4 4.5 1.9 8.3 4.6 11.2 2.7 3 6.1 5.1 10.2 6.6 4.1 1.4 8.6 2.1 13.3 2.1 5.5 0 10.5-.9 14.9-2.7s7.9-4.4 10.5-7.6c2.6-3.3 3.9-7.1 3.9-11.5 0-4-1.1-7.2-3.3-9.7s-5.2-4.5-8.8-6.1-7.6-2.9-11.8-4.1l-14.8-4.2c-9.4-2.7-16.8-6.5-22.3-11.5s-8.2-11.5-8.2-19.6c0-6.7 1.8-12.6 5.5-17.6 3.7-5 8.6-8.9 14.8-11.7 6.2-2.8 13.1-4.2 20.8-4.2 7.7 0 14.6 1.4 20.6 4.1s10.8 6.5 14.3 11.3c3.5 4.8 5.4 10.2 5.6 16.2h-14z'/%3E%3C/svg%3E"); --teletype-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='Teletype-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M166 70.9c-.3-.3-.8-.5-1.3-.5h-34.4V43.9c0-.4-.1-.8-.2-1l-.6-.6c-.2-.2-.6-.2-1-.2h-9.8v28.3H67.4V43.9c0-.4-.1-.8-.2-1l-.6-.6c-.2-.2-.6-.2-1-.2h-9.8v28.3H33.5V79c0 .3 0 .6.1.8l.3.6c.2.2.4.3.6.3.2.1.5.1.8.1h20.5V126c0 6.3.8 11.5 2.4 15.6 1.6 4.1 3.9 7.4 6.8 9.8 2.9 2.4 6.3 4.1 10.1 5 3.8 1 7.9 1.5 12.2 1.5h14.6c.7 0 1.1-.2 1.4-.5.3-.3.4-.8.4-1.5v-8.8H88.3c-3.7 0-6.9-.3-9.5-1-2.6-.7-4.7-1.8-6.4-3.5-1.7-1.7-2.9-4-3.7-6.9-.8-3-1.2-6.7-1.2-11.2V80.8h51.3V126c0 6.3.8 11.5 2.4 15.6 1.6 4.1 3.9 7.4 6.8 9.8 2.9 2.4 6.3 4.1 10.1 5s7.9 1.5 12.2 1.5h14.6c.7 0 1.1-.2 1.4-.5.3-.3.4-.8.4-1.5v-8.8h-15.4c-3.7 0-6.9-.3-9.5-1-2.6-.7-4.7-1.8-6.4-3.5-1.7-1.7-2.9-4-3.7-6.9-.8-3-1.2-6.7-1.2-11.2V80.8h36.2v-8.6c-.2-.5-.4-1-.7-1.3z'/%3E%3C/svg%3E"); --quote-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='Quote-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M114.8 150v-37.2c0-4.1.2-8.6.5-13.7.3-4 .8-8 1.8-12.4.8-3.8 2.2-7.5 4-11.2 1.8-3.5 4.3-6.9 7.5-10.1 5.4-5.4 10.8-8.9 16.5-10.6 3.1-.9 6.2-1.8 9.4-2.6v10c-3.2 1.5-5.9 3.2-8.1 5.1-3.6 3.2-6.3 6.7-8.2 10.4-1.7 3.4-2.9 7.1-3.4 11v.4c-.4 3.4-.6 6.4-.6 9.1v10h20.3V150h-39.7zm-69.3 0v-37.2c0-4.1.2-8.6.5-13.7.3-4.1.9-8.1 1.8-12.2 1-4 2.3-7.8 4.2-11.5 1.6-3.3 4.1-6.6 7.4-9.7l.2-.2.2-.2c4.9-5.2 10.4-8.7 16.2-10.4 3.1-.9 6.3-1.8 9.6-2.6v10.1c-3.2 1.5-5.9 3.2-8.1 5.1-3.6 3.2-6.3 6.7-8.2 10.4-1.7 3.4-2.9 7.1-3.4 11v.4c-.4 3.4-.6 6.4-.6 9.1v10h20.3V150H45.5z'/%3E%3C/svg%3E"); --superscript-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='Superscript-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='m33.9 39.9 30.9 49.9h.9l30.9-49.9h17.1L76 99.9l37.7 60h-17l-30.9-49h-.9l-30.9 49H16.8l38.7-60-38.7-60h17.1zm92.6 60v-9.1l27.4-24.4c2.7-2.4 5-4.6 6.9-6.5 1.8-1.9 3.2-3.8 4.2-5.6.9-1.8 1.4-3.7 1.4-5.7 0-3.5-1.3-6.3-4-8.4-2.7-2.1-6-3.1-10-3.1-4.2 0-7.6 1.1-10.2 3.4-2.6 2.2-3.9 5.2-3.9 8.8H126c0-6.7 2.5-12.1 7.4-16.1 5-4.1 11.3-6.1 19-6.1 5.2 0 9.7.9 13.6 2.8 3.9 1.9 7 4.4 9.1 7.6s3.3 6.9 3.3 10.9c0 3.2-.6 6.2-1.9 8.9-1.3 2.7-3.3 5.6-6 8.5s-6.2 6.3-10.5 10l-15.2 13.4v.5h35.9V100h-54.2z'/%3E%3C/svg%3E"); --subscript-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='Subscript-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='m35.6 39.9 30.9 49.9h.9l30.9-49.9h17.1l-37.7 60 37.7 60h-17l-30.9-49h-.9l-30.9 49H18.4l38.7-60-38.7-60h17.2zm89.2 140.6v-9.1l27.4-24.4c2.7-2.4 5-4.6 6.9-6.5 1.8-1.9 3.2-3.8 4.2-5.6.9-1.8 1.4-3.7 1.4-5.7 0-3.5-1.3-6.3-4-8.4s-6-3.1-10-3.1c-4.2 0-7.6 1.1-10.2 3.4s-3.9 5.2-3.9 8.8h-12.2c0-6.7 2.5-12.1 7.4-16.1s11.3-6.1 19-6.1c5.2 0 9.7.9 13.6 2.8s7 4.4 9.1 7.6 3.3 6.9 3.3 10.9c0 3.2-.6 6.2-1.9 8.9-1.3 2.7-3.3 5.6-6 8.5s-6.2 6.3-10.5 10l-15.2 13.4v.5H179v10.3h-54.2z'/%3E%3C/svg%3E"); --rawtext-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='Raw-Text-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M104.3 109.8V98.5H81.1L65.6 71.4H35.8v.1l-13.1 36 10.6 3.9 10.5-28.7h8.7l-17.3 47.6H12.8v11.3h30.4l7.4-20.5 32.7 39 8.7-7.3-36.9-44 7.3-20.1 12.1 20.9v.2zm-37.2-42c3.2 1.2 6.4 1 9.5-.4 3.1-1.5 5.3-3.8 6.4-7 1.2-3.2 1-6.4-.4-9.5-1.5-3.1-3.8-5.3-7.1-6.5-3.2-1.2-6.3-1-9.5.5-3.1 1.5-5.3 3.8-6.5 7s-1 6.4.4 9.5c1.6 3 4 5.2 7.2 6.4z'/%3E%3Cpath d='M183.4 72.7C180.8 66 177 60.2 172 55.3c-5-4.9-11-8.6-18.2-11.3-7.1-2.6-15.2-4-24.3-4-9.8 0-18.5 1.4-26.2 4.3-5.6 2.1-10.6 4.9-15 8.4.6 3.1.4 6.3-.7 9.3-1.5 4.3-4.6 7.7-8.9 9.8l-.1.2c-1.9.8-3.8 1.3-5.7 1.5-.1.1-.1.3-.2.4L84 93.5h.4c.4-3.9 1.3-7.6 2.4-11.2 1.9-5.6 4.7-10.4 8.5-14.5s8.5-7.4 14.2-9.7c5.7-2.3 12.3-3.4 19.9-3.4 4.4 0 8.7.4 12.8 1.3 4.2.9 8 2.3 11.6 4.2 3.6 1.9 6.7 4.4 9.4 7.5 2.7 3.1 4.8 6.8 6.3 11.1s2.3 9.4 2.3 15.1c0 5.9-.4 10.8-1.1 14.7s-1.8 6.7-3.2 8.5c-1.4 1.9-3.2 2.8-5.3 2.8-1.5 0-2.8-.6-3.7-1.7-.9-1.2-1.4-2.8-1.4-4.9V68.7h-14.3v5.1h-.6c-.5-1.3-1.8-2.6-4-3.7-2.1-1.2-4.7-2-7.8-2.5-3.1-.5-6.3-.5-9.8 0-3 .4-6.1 1.4-9.1 2.9s-5.7 3.6-8.2 6.3c-2.4 2.7-4.4 6-5.9 9.9-.8 2.1-1.4 4.4-1.7 6.9h13.6v21.3H97.4c1.4 4 3.3 7.4 5.8 10.1 2.5 2.8 5.3 4.9 8.5 6.3 3.2 1.5 6.6 2.3 10.2 2.5 3.4.2 6.7-.1 9.7-.9 3.1-.8 5.6-2 7.8-3.4 2.1-1.5 3.6-3.1 4.3-5h.5c.3 2.1 1.1 3.9 2.2 5.5s2.8 2.7 5 3.5c2.2.8 5.1 1.1 8.6.8 4.9-.3 9.1-1.4 12.6-3.4s6.3-4.8 8.4-8.3c2.1-3.5 3.7-7.6 4.7-12.3 1-4.7 1.5-9.8 1.5-15.4.1-8.1-1.2-15.5-3.8-22.2zm-42.9 37.5c-1 2.8-2.5 4.9-4.7 6.4-2.2 1.4-5.2 2.1-8.9 2.1-4 0-7.1-.9-9.5-2.7s-4-4.1-5-7c-1-2.9-1.5-5.9-1.6-9.2 0-3.5.7-6.5 1.9-9.1 1.2-2.6 3-4.6 5.4-6 2.4-1.4 5.2-2.1 8.6-2.1 3.9 0 6.9.7 9.1 2 2.2 1.3 3.7 3.3 4.6 5.8.9 2.5 1.4 5.6 1.4 9.3.1 4.2-.4 7.7-1.3 10.5z'/%3E%3Cpath d='M149.4 142.5c-2.7.7-5.7 1.3-9.1 1.8-3.3.5-6.8.8-10.3.8-7.4 0-14-1-19.7-2.9-5.7-1.9-10.5-4.8-14.4-8.6-3.9-3.8-6.8-8.4-8.8-14-.6-1.5-1-3.2-1.4-4.8H69.5v-3.9l-1.4-2.4c.3 3.4.8 6.7 1.5 9.8L99 153.4l-.8.7c1.6.7 3.2 1.4 4.9 1.9 7.6 2.6 16.2 3.9 25.9 3.9 4.3 0 8.5-.3 12.6-.9 4.1-.6 7.8-1.4 11-2.3 3.3-1 5.9-2 7.8-3.1l-4.5-13.2c-1.7.7-3.8 1.4-6.5 2.1z'/%3E%3C/svg%3E"); --hr-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='hr-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath fill='none' stroke='%23000000' stroke-miterlimit='10' stroke-width='10' d='M160 40v30H40V40m0 120v-30h120v30'/%3E%3Cpath d='M175 110H25V90h150v20z'/%3E%3C/svg%3E"); --divblock-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='Div-Block-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='m59.5 65.5-18.8 69.7H30.3L49 65.5h10.5zm17.1 61.6c-3.3 0-6.3-.9-9-2.6-2.7-1.7-4.8-4.2-6.4-7.6-1.6-3.3-2.3-7.4-2.3-12.3 0-5 .8-9.2 2.4-12.5 1.6-3.3 3.8-5.8 6.4-7.5 2.7-1.7 5.6-2.5 8.8-2.5 2.4 0 4.5.4 6.1 1.2 1.6.8 3 1.8 4 3.1 1 1.2 1.8 2.4 2.3 3.6h.4V68.2h12.1v58.2H89.5v-7H89c-.6 1.2-1.4 2.4-2.4 3.6-1 1.2-2.4 2.2-4 2.9s-3.7 1.2-6 1.2zm3.8-9.6c2 0 3.6-.5 5-1.6s2.4-2.6 3.1-4.5c.7-1.9 1.1-4.2 1.1-6.8s-.4-4.8-1.1-6.8c-.7-1.9-1.8-3.4-3.1-4.4s-3-1.6-5-1.6-3.7.5-5 1.6-2.4 2.6-3.1 4.5c-.7 1.9-1.1 4.1-1.1 6.6s.4 4.8 1.1 6.7c.7 1.9 1.7 3.5 3.1 4.5s3 1.8 5 1.8zm35-40.4c-1.8 0-3.3-.6-4.6-1.8-1.3-1.2-1.9-2.6-1.9-4.3s.6-3.1 1.9-4.3c1.3-1.2 2.8-1.8 4.6-1.8 1.8 0 3.4.6 4.6 1.8 1.3 1.2 1.9 2.6 1.9 4.3 0 1.7-.6 3.1-1.9 4.3-1.3 1.2-2.8 1.8-4.6 1.8zm-6.1 49.3V82.7h12.1v43.6h-12.1zm60.4-43.7-15.3 43.6h-13.6l-15.3-43.6h12.8l9.1 31.2h.5l9-31.2h12.8z'/%3E%3Cpath fill='none' stroke='%23000000' stroke-width='10' d='M42.4 160H5V40h37.4m115.2 0H195v120h-37.4'/%3E%3C/svg%3E"); --clearfloat-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='Clear-Both-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M150 50v100H50V50h100m10-10H40v120h120V40z'/%3E%3Cpath d='m160 58.2 28 41.8-28 41.8V58.2m-.1-18.2H150v120h9.9l40.1-60-40.1-60zM40 58.2v83.6L12 100l28-41.8M50 40h-9.9L0 100l40.1 60H50V40zm77.3 102.7-70-69.9 15.4-15.5 70.1 70-15.5 15.4zm-54.7 0-15.4-15.4 70-70 15.4 15.5-70 69.9z'/%3E%3C/svg%3E"); --clearfloatleft-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='Clear-Left-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M170 50v100H70V50h100m10-10H60v120h120V40z'/%3E%3Cpath d='M60 58.2v83.6L32 100l28-41.8M70 40h-9.9L20 100l40.1 60H70V40zm77.3 102.7-70-69.9 15.4-15.5 70.1 70-15.5 15.4zm-54.7 0-15.4-15.4 70-70 15.4 15.5-70 69.9z'/%3E%3C/svg%3E"); --clearfloatright-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='Clear-Right-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M130 50v100H30V50h100m10-10H20v120h120V40z'/%3E%3Cpath d='m140 58.2 28 41.8-28 41.8V58.2m-.1-18.2H130v120h9.9l40.1-60-40.1-60zm-32.6 102.7-70-69.9 15.4-15.5 70.1 70-15.5 15.4zm-54.7 0-15.4-15.4 70-70 15.4 15.5-70 69.9z'/%3E%3C/svg%3E"); --table-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='Tables-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M165 50v100H35V50h130m10-10H25v120h150V40z'/%3E%3Cpath d='M25 40h150v30H25z'/%3E%3Cpath fill='none' stroke='%23000000' stroke-miterlimit='10' stroke-width='10' d='M115 70v90m5-50H25'/%3E%3C/svg%3E"); --toc-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='TOC-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M66.5 50.5v9.1H40.2v-9.1h26.3zM46.2 40.1h12.1v40.7c0 1.1.2 2 .5 2.6s.8 1 1.4 1.3c.6.2 1.3.4 2.1.4.6 0 1.1-.1 1.7-.2s1-.2 1.3-.2l1.9 9c-.6.2-1.5.4-2.6.7-1.1.3-2.4.4-4 .5-2.9.1-5.5-.3-7.7-1.2-2.2-.9-3.9-2.3-5.1-4.1-1.2-1.9-1.8-4.2-1.8-7.1V40.1h.2zM90.1 95c-4.4 0-8.2-.9-11.4-2.8-3.2-1.9-5.7-4.5-7.4-7.9-1.7-3.4-2.6-7.3-2.6-11.8s.9-8.5 2.6-11.8c1.7-3.4 4.2-6 7.4-7.9 3.2-1.9 7-2.8 11.4-2.8s8.2.9 11.4 2.8c3.2 1.9 5.7 4.5 7.4 7.9 1.7 3.4 2.6 7.3 2.6 11.8s-.9 8.4-2.6 11.8-4.2 6-7.4 7.9c-3.1 1.9-7 2.8-11.4 2.8zm.1-9.3c2 0 3.7-.6 5-1.7s2.4-2.7 3.1-4.7 1-4.3 1-6.8-.3-4.8-1-6.8-1.7-3.6-3.1-4.7c-1.3-1.2-3-1.7-5-1.7s-3.7.6-5.1 1.7c-1.4 1.2-2.4 2.7-3.1 4.7s-1 4.3-1 6.8.3 4.8 1 6.8 1.7 3.6 3.1 4.7 3.1 1.7 5.1 1.7zm47.4 9.3c-4.5 0-8.3-1-11.5-2.9s-5.7-4.5-7.4-7.9c-1.7-3.4-2.6-7.3-2.6-11.7 0-4.5.9-8.4 2.6-11.8s4.2-6 7.4-7.9c3.2-1.9 7-2.9 11.4-2.9 3.8 0 7.1.7 10 2.1 2.9 1.4 5.1 3.3 6.8 5.8s2.6 5.4 2.8 8.8h-11.4c-.3-2.2-1.2-3.9-2.5-5.3-1.4-1.3-3.2-2-5.4-2-1.9 0-3.5.5-4.9 1.5s-2.5 2.5-3.3 4.4c-.8 1.9-1.2 4.3-1.2 7 0 2.8.4 5.2 1.2 7.1s1.9 3.4 3.3 4.5c1.4 1 3 1.5 4.9 1.5 1.4 0 2.6-.3 3.7-.9 1.1-.6 2-1.4 2.8-2.5.7-1.1 1.2-2.4 1.4-3.9h11.4c-.2 3.3-1.1 6.3-2.7 8.8s-3.8 4.5-6.7 5.9c-2.9 1.6-6.2 2.3-10.1 2.3z'/%3E%3Cpath fill='none' stroke='%23000000' stroke-width='10' d='M70 155h80m-80-28.8h80'/%3E%3Cpath stroke='%23000000' stroke-width='2.5' d='M50.2 131.2v-10l10 5zm0 29v-10l10 5z'/%3E%3C/svg%3E"); --codeblock-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='Code-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M165 50v100H35V50h130m10-10H25v120h150V40z'/%3E%3Cpath d='M60.5 86.4c-2.9 1.3-5.6 2.5-8.3 3.7-2.7 1.2-5.3 2.4-7.7 3.5v13.5c0 .3 0 .5.1.6.1.2.2.3.4.5s.4.3.6.4c3.5 1.6 7.1 3.1 10.7 4.7 3.5 1.6 7.1 3.1 10.6 4.7s7.1 3.1 10.6 4.7v-9.5c0-.4-.1-.7-.1-.8-.1-.2-.3-.3-.7-.5-.9-.4-2.3-1-4.1-1.8-1.8-.8-3.9-1.8-6.3-2.8-2.4-1-4.8-2.1-7.3-3.2-2-.9-3.8-1.7-5.5-2.4V100c1.2-.6 2.6-1.2 4-1.8 1.9-.9 3.9-1.7 5.8-2.6 2-.8 3.8-1.7 5.6-2.5 1.8-.8 3.4-1.5 4.7-2.1s2.4-1 3.1-1.4c.3-.2.6-.4.7-.6.1-.2.1-.4.1-.8v-9.4c-2.7 1.2-5.5 2.4-8.4 3.7-2.9 1.4-5.8 2.7-8.6 3.9zm54.8 38.4c-2.5-6.3-4.9-12.7-7.3-19.1-2.5-6.4-4.9-12.8-7.4-19.1-2.5-6.4-4.9-12.7-7.4-19.1-.1-.1-.1-.3-.2-.3-.1-.1-.2-.1-.3-.1H82.5c2.8 7.2 5.6 14.4 8.4 21.7 2.8 7.3 5.6 14.5 8.4 21.8 2.8 7.3 5.6 14.5 8.3 21.8.1.3.3.5.5.6.2.1.4.2.6.2h9.8c-.6-1.3-1.1-2.7-1.6-4.1s-1.1-2.9-1.6-4.3zm40.2-30.9c-.1-.2-.2-.4-.4-.5-.2-.2-.4-.3-.6-.4-3.6-1.5-7.1-3.1-10.6-4.7s-7.1-3.1-10.6-4.7c-3.6-1.5-7.1-3.1-10.6-4.7v9.4c0 .4 0 .6.1.8.1.2.3.4.7.6.9.4 2.3 1 4.1 1.8 1.8.8 3.9 1.8 6.3 2.8 2.4 1.1 4.8 2.1 7.3 3.2 2 .9 3.8 1.7 5.6 2.4v1.6c-1.2.6-2.6 1.2-4 1.8-1.9.9-3.9 1.7-5.8 2.6-2 .9-3.8 1.7-5.6 2.5s-3.4 1.5-4.7 2.1c-1.3.6-2.4 1-3.1 1.3-.4.2-.6.4-.7.5-.1.2-.1.4-.1.8v9.5c2.7-1.2 5.5-2.5 8.4-3.8 2.9-1.2 5.7-2.5 8.6-3.8 2.8-1.3 5.6-2.5 8.3-3.8 2.7-1.2 5.3-2.4 7.7-3.5V94.3c-.2 0-.3-.2-.3-.4z'/%3E%3C/svg%3E"); --codewiz-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='Code-Wizard-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M60.5 86.4c-2.9 1.3-5.6 2.5-8.3 3.7-2.7 1.2-5.3 2.4-7.7 3.5v13.5c0 .3 0 .5.1.6.1.2.2.3.4.5s.4.3.6.4c3.5 1.6 7.1 3.1 10.7 4.7 3.5 1.6 7.1 3.1 10.6 4.7s7.1 3.1 10.6 4.7v-9.5c0-.4-.1-.7-.1-.8-.1-.2-.3-.3-.7-.5-.9-.4-2.3-1-4.1-1.8-1.8-.8-3.9-1.8-6.3-2.8-2.4-1-4.8-2.1-7.3-3.2-2-.9-3.8-1.7-5.5-2.4V100c1.2-.6 2.6-1.2 4-1.8 1.9-.9 3.9-1.7 5.8-2.6 2-.8 3.8-1.7 5.6-2.5 1.8-.8 3.4-1.5 4.7-2.1s2.4-1 3.1-1.4c.3-.2.6-.4.7-.6.1-.2.1-.4.1-.8v-9.4c-2.7 1.2-5.5 2.4-8.4 3.7-2.9 1.4-5.8 2.7-8.6 3.9zm54.8 38.4c-2.5-6.3-4.9-12.7-7.3-19.1-2.5-6.4-4.9-12.8-7.4-19.1l-2.1-5.4-8.6-8.6-5.6-5.6h-1.8c2.8 7.2 5.6 14.4 8.4 21.7 2.8 7.3 5.6 14.5 8.4 21.8 2.8 7.3 5.6 14.5 8.3 21.8.1.3.3.5.5.6.2.1.4.2.6.2h9.8c-.6-1.3-1.1-2.7-1.6-4.1s-1.1-2.8-1.6-4.2zm12.1-14.7c-.3.1-.6.3-.9.4-1.3.6-2.4 1-3.1 1.3-.4.2-.6.4-.7.5-.1.2-.1.4-.1.8v9.5c2.7-1.2 5.5-2.5 8.4-3.8 1.2-.5 2.4-1.1 3.6-1.6l-7.2-7.1zM140.7 50H165v24.3l10 10V40h-44.3z'/%3E%3Cpath d='m169.4 152.2-4.4-4.5v2.3H35V50h63.3l10-10H25v120h150v-2.3z'/%3E%3Cpath d='m199.1 122.5-57-57-22.6-22.6-22.6 22.6 22.6 22.6 57 57 22.6-22.6zM119.5 57l8.5 8.5-8.5 8.5-8.5-8.5 8.5-8.5z'/%3E%3C/svg%3E"); --url-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='Link-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M96 100.9c-5.3 6.9-15.6-1.2-10.3-8.1l4-5.1c8.5-10.9 20.3-11.9 29.7-7.4 3.5 1.5 6.9 4.1 9.3 7.2 6.7 8 8.6 19.8.2 30.7l-25.1 32.2c-5.8 7.4-13.2 10.1-20.4 9.5-9.1 0-18.7-6.6-22-15.2-4.7-9.7-2-19.3 6.3-28.7 2.5 3.5 6.3 6.4 10.3 8-1.8 2.4-5 5.8-5.3 8.8-1.7 7.8 5.7 15.4 13.6 13.8 2.6-.3 5.1-1.6 7.2-4.3 5.9-7.5 25.1-32.3 25.1-32.3 1.5-1.9 2.2-3.9 2.4-5.9 1.3-11.7-13.7-17.8-20.9-8.5l-4.1 5.3z'/%3E%3Cpath d='M114.2 107.2c5.3-6.8-5-14.9-10.3-8.1l-4 5.1c-7.2 9.3-22.2 3.2-20.9-8.5.1-2 .9-4 2.4-5.9 0 0 19.2-24.7 25.1-32.3 2.1-2.7 4.6-4 7.2-4.3 7.9-1.6 15.3 6 13.6 13.8-.3 3.1-3.4 6.4-5.3 8.8 4 1.6 7.8 4.5 10.3 8 8.3-9.4 11-18.9 6.3-28.7-3.3-8.6-12.8-15.1-22-15.2-7.2-.6-14.6 2.1-20.4 9.5L71.1 81.6c-8.5 10.9-6.5 22.7.2 30.7 2.4 3 5.7 5.7 9.3 7.2 9.4 4.5 21.2 3.5 29.7-7.4l3.9-4.9z'/%3E%3C/svg%3E"); --urlwiz-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='Link-Wizard-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M52.5 100.9c-5.3 6.9-15.6-1.2-10.3-8.1l4-5.1c8.5-10.9 20.3-11.9 29.7-7.4 3.5 1.5 6.9 4.1 9.3 7.2 6.7 8 8.6 19.8.2 30.7l-25.1 32.2c-5.8 7.4-13.2 10.1-20.4 9.5-9.1 0-18.7-6.6-22-15.2-4.7-9.7-2-19.3 6.3-28.7 2.5 3.5 6.3 6.4 10.3 8-1.8 2.4-5 5.8-5.3 8.8-1.7 7.8 5.7 15.4 13.6 13.8 2.6-.3 5.1-1.6 7.2-4.3 5.9-7.5 25.1-32.3 25.1-32.3 1.5-1.9 2.2-3.9 2.4-5.9 1.3-11.7-13.7-17.8-20.9-8.5l-4.1 5.3z'/%3E%3Cpath d='m60.5 99.1-4 5.1c-7.2 9.3-22.2 3.2-20.9-8.5.1-2 .9-4 2.4-5.9 0 0 19.2-24.7 25.1-32.3 2.1-2.7 4.6-4 7.2-4.3 4.1-.9 8.1.8 10.7 3.8l9.3-9.3C85.8 43.1 79.4 40 73.2 40c-7.2-.6-14.6 2.1-20.4 9.5L27.7 81.7c-8.5 10.9-6.5 22.7.2 30.7 2.4 3 5.7 5.7 9.3 7.2 9.4 4.5 21.2 3.5 29.7-7.4l4-5.1c5.1-6.8-5.2-14.9-10.4-8zm128.3 23.4-57-57-22.6-22.6-22.6 22.6 22.6 22.6 57 57 22.6-22.6zM109.2 57l8.5 8.5-8.5 8.5-8.5-8.5 8.5-8.5z'/%3E%3C/svg%3E"); --pagelink-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='Page-Link-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M96 100.9c-5.3 6.9-15.6-1.2-10.3-8.1l4-5.1c8.5-10.9 20.3-11.9 29.7-7.4 3.5 1.5 6.9 4.1 9.3 7.2 6.7 8 8.6 19.8.2 30.7l-25.1 32.2c-5.8 7.4-13.2 10.1-20.4 9.5-9.1 0-18.7-6.6-22-15.2-4.7-9.7-2-19.3 6.3-28.7 2.5 3.5 6.3 6.4 10.3 8-1.8 2.4-5 5.8-5.3 8.8-1.7 7.8 5.7 15.4 13.6 13.8 2.6-.3 5.1-1.6 7.2-4.3 5.9-7.5 25.1-32.3 25.1-32.3 1.5-1.9 2.2-3.9 2.4-5.9 1.3-11.7-13.7-17.8-20.9-8.5l-4.1 5.3z'/%3E%3Cpath d='M114.2 107.2c5.3-6.8-5-14.9-10.3-8.1l-4 5.1c-7.2 9.3-22.2 3.2-20.9-8.5.1-2 .9-4 2.4-5.9 0 0 19.2-24.7 25.1-32.3 2.1-2.7 4.6-4 7.2-4.3 7.9-1.6 15.3 6 13.6 13.8-.3 3.1-3.4 6.4-5.3 8.8 4 1.6 7.8 4.5 10.3 8 8.3-9.4 11-18.9 6.3-28.7-3.3-8.6-12.8-15.1-22-15.2-7.2-.6-14.6 2.1-20.4 9.5L71.1 81.6c-8.5 10.9-6.5 22.7.2 30.7 2.4 3 5.7 5.7 9.3 7.2 9.4 4.5 21.2 3.5 29.7-7.4l3.9-4.9z'/%3E%3Cpath d='M35.9 150V50h70.7l10-10H25.9v120h150v-10z'/%3E%3Cpath d='m165.9 140 10-10v30h-10zm-140-70h69.9V40H25.9v30zm39.9-20h10v10h-10V50zm-19.9 0h10v10h-10V50z'/%3E%3C/svg%3E"); --pagelinkwiz-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='Page-Link-Wizard-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M35.9 150V70h28.6l10.7-13.7c6.8-8.6 16.1-13.4 26.3-13.4.8 0 1.6 0 2.4.1 1.5 0 3 .2 4.6.4l1.8-1.8L112 40H25.9v120h12.4c-1.2-2.9-2.1-6.3-2.4-10zm10-100h10v10h-10V50zm124.4 102.2-4.4-4.5v2.3h-52.2l-7.8 10h70v-2.3z'/%3E%3Cpath d='M82.8 113.9c-5.3 6.9-15.6-1.2-10.3-8.1l4-5.1c8.5-10.9 20.3-11.9 29.7-7.4 3.5 1.5 6.9 4.1 9.3 7.2 6.7 8 8.6 19.8.2 30.7l-25.1 32.2c-5.8 7.4-13.2 10.1-20.4 9.5-9.1 0-18.7-6.6-22-15.2-4.7-9.7-2-19.3 6.3-28.7 2.5 3.5 6.3 6.4 10.3 8-1.8 2.4-5 5.8-5.3 8.8-1.7 7.8 5.7 15.4 13.6 13.8 2.6-.3 5.1-1.6 7.2-4.3 5.9-7.5 25.1-32.3 25.1-32.3 1.5-1.9 2.2-3.9 2.4-5.9 1.3-11.7-13.7-17.8-20.9-8.5l-4.1 5.3zm117.2 8.6-57-57-22.6-22.6-22.6 22.6 22.6 22.6 57 57 22.6-22.6zM120.4 57l8.5 8.5-8.5 8.5-8.5-8.5 8.5-8.5z'/%3E%3Cpath d='m90.7 112.1-4 5.1c-7.2 9.3-22.2 3.2-20.9-8.5.1-2 .9-4 2.4-5.9 0 0 19.2-24.7 25.1-32.3 1.6-2.1 3.5-3.4 5.5-4l-1-1 11.6-11.6c-2-.6-4-.9-6-.9-7.2-.6-14.6 2.1-20.4 9.5L57.9 94.7c-8.5 10.9-6.5 22.7.2 30.7 2.4 3 5.7 5.7 9.3 7.2 9.4 4.5 21.2 3.5 29.7-7.4l4-5.1c5.2-6.8-5.1-14.9-10.4-8z'/%3E%3C/svg%3E"); --imageblock-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='Image-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M25 40v120h150V40H25zm10 110v-20.3l24.1-24.1 21.6 21.6L130 78l35 35v37H35zm28-89c8.3 0 15 6.7 15 15s-6.7 15-15 15-15-6.7-15-15c0-8.2 6.7-15 15-15z'/%3E%3C/svg%3E"); --imagewiz-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='Image-Wizard-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M175 83.9V40h-43.9zm-10 63.5v2.6H35v-20.3l24.1-24.1 21.6 21.6 32-32-22.6-22.7-7.1-7 7.1-7.1L108.5 40H25v120h150v-2.6l-10-10zM63 61c8.3 0 15 6.7 15 15s-6.7 15-15 15-15-6.7-15-15c0-8.2 6.7-15 15-15z'/%3E%3Cpath d='m199.4 122.5-57-57-22.6-22.6-22.6 22.6 22.6 22.6 57 57 22.6-22.6zM119.8 57l8.5 8.5-8.5 8.5-8.5-8.5 8.5-8.5z'/%3E%3C/svg%3E"); --htmlblock-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='HTML-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M76.5 110.6c-1.7.8-3.3 1.5-4.9 2.2s-3.1 1.4-4.6 2.1v8c0 .2 0 .3.1.4.1.1.1.2.2.3s.2.2.4.2c2.1.9 4.2 1.8 6.4 2.8 2.1.9 4.2 1.8 6.3 2.8s4.2 1.8 6.3 2.8v-5.6c0-.2-.1-.4-.1-.5-.1-.1-.2-.2-.4-.3-.5-.2-1.4-.6-2.4-1.1-1.1-.5-2.3-1.1-3.7-1.7-1.4-.6-2.8-1.2-4.3-1.9-1.2-.5-2.3-1-3.3-1.4v-1c.7-.4 1.5-.7 2.4-1.1 1.1-.5 2.3-1 3.4-1.5 1.2-.5 2.3-1 3.3-1.5 1.1-.5 2-.9 2.8-1.2.8-.4 1.4-.6 1.8-.8.2-.1.4-.2.4-.4.1-.1.1-.2.1-.5v-5.6c-1.6.7-3.3 1.4-5 2.2-1.9.8-3.6 1.6-5.2 2.3zm14 25.3c-.3.8-.6 1.7-.9 2.4h5.8c.1 0 .2-.1.4-.1.1-.1.2-.2.3-.4 1.6-4.3 3.3-8.6 4.9-12.9s3.3-8.6 5-12.9c1.7-4.3 3.3-8.6 5-12.9h-6.1c-.1 0-.1 0-.2.1-.1 0-.1.1-.1.2-1.5 3.8-2.9 7.5-4.4 11.3-1.5 3.7-2.9 7.5-4.4 11.3-1.4 3.8-2.8 7.6-4.3 11.3-.4.9-.7 1.8-1 2.6zm42.4-20.9c-.1-.1-.1-.2-.2-.3-.1-.1-.2-.2-.4-.2-2.1-.9-4.2-1.8-6.3-2.8-2.1-.9-4.2-1.8-6.3-2.8-2.1-.9-4.2-1.8-6.3-2.8v5.6c0 .2 0 .4.1.5l.4.4c.5.2 1.4.6 2.4 1.1 1.1.5 2.3 1.1 3.7 1.7 1.4.7 2.8 1.2 4.3 1.9 1.2.5 2.3 1 3.3 1.4v.9c-.7.4-1.5.7-2.4 1.1-1.1.5-2.3 1-3.4 1.5-1.2.5-2.3 1-3.3 1.5-1.1.5-2 .9-2.8 1.2-.8.4-1.4.6-1.8.8-.2.1-.4.2-.4.3-.1.1-.1.2-.1.5v5.6c1.6-.7 3.3-1.5 5-2.3 1.7-.7 3.4-1.5 5.1-2.3 1.7-.8 3.3-1.5 4.9-2.3 1.6-.7 3.1-1.4 4.6-2.1v-8c-.1.2-.1.1-.1-.1z'/%3E%3Cpath d='M110.7 38.3H51.6v123.5h96.8V75.9l-37.7-37.6zm4.4 33.3V57l14.6 14.6h-14.6zm23.1 10.2v69.8H61.7V48.4h43.2v33.3h33.3z'/%3E%3C/svg%3E"); --ordered-list-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='OL-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath fill='none' stroke='%23000000' stroke-width='15' d='M65 150h110M65 100h110M65 50h110'/%3E%3Cpath d='M49.2 60.5c-1.7-.4-4.5 0-6.7-.1V33.2c-.9-1.3-6-.2-7.7-.5-2.4 1.6-5 3.4-7.4 5.1.2.3-.3 8.3.2 8.2 2.7-.8 5.2-3.5 6.6-6.1h1v20.5h-8.8c.1 2-.2 4.8.1 6.8 7 .4 15.7 0 22.8.1-.1-1.8.3-5-.1-6.8zm.5 50.3c-4.9-.5-11.8-.2-16.3 1.2.2-7.1 10.8-8.1 14-13.5 6.7-12.1-5.4-19-16.2-15.1-5.7 1.3-3.9 4.7-4.1 9h1c3.4-2.4 10.8-5 13.7-1.2.8 7.6-13.2 8.8-14.8 16.1-1 2.6-1.3 7.5-.6 10.2 7.3.2 16.3 0 23.6.1-.3-2 .1-4.9-.3-6.8zm-.7 43.1c-1.5-2.2-4.3-3.3-7.3-3.9v-1c9.3-.6 10.8-13.7 1.8-16.1-4.6-1.5-12.5-1.2-16.6.7-.3 2 0 4.9-.1 6.9 4.5-.4 11-3 15 .3 2.4 6.2-6.7 5.1-11.2 5.4-.8 11.4 1.7 4.7 10 7.9 3 1 2.9 5.4-.2 6.2-4.6 1.3-10-.1-14.5-1v6.6c.2 1.1 1 .9 2.4 1.3 9.3 2.6 26.5.1 20.7-13.3z'/%3E%3C/svg%3E"); --unordered-list-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='UL-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath fill='none' stroke='%23000000' stroke-width='15' d='M65 150h110M65 100h110M65 50h110'/%3E%3Ccircle cx='37.5' cy='50.2' r='12.5'/%3E%3Ccircle cx='37.5' cy='100' r='12.5'/%3E%3Ccircle cx='37.5' cy='150' r='12.5'/%3E%3C/svg%3E"); --inc-list-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='Inc-List-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath fill='none' stroke='%23000000' stroke-width='15' d='M90 140h110M90 100h110M90 60h110M58 40v120'/%3E%3Cpath d='M0 125V75l30 25z'/%3E%3C/svg%3E"); --dec-list-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='Dec-List-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath fill='none' stroke='%23000000' stroke-width='15' d='M90 140h110M90 100h110M90 60h110M58 40v120'/%3E%3Cpath d='M30 75v50L0 100z'/%3E%3C/svg%3E"); --def-list-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='Def-List-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='M34.2 63.4c-1.5 0-2.9-.5-4-1.7-1.1-1.1-1.7-2.4-1.7-4 0-1.5.5-2.9 1.7-4 1.1-1.1 2.4-1.7 4-1.7 1.5 0 2.9.6 4 1.7s1.7 2.4 1.7 4c0 1-.3 2-.8 2.8-.5.9-1.2 1.5-2 2-.9.6-1.9.9-2.9.9zm0 32.2c-1.5 0-2.9-.5-4-1.7-1.1-1.1-1.7-2.4-1.7-4s.5-2.9 1.7-4c1.1-1.1 2.4-1.7 4-1.7 1.5 0 2.9.5 4 1.7 1.1 1.1 1.7 2.4 1.7 4 0 1-.3 2-.8 2.8-.5.9-1.2 1.5-2 2-.9.7-1.9.9-2.9.9zm19.2 8.2h-8.1L68.7 40h8l23.4 63.8H92L73 50.1h-.5l-19.1 53.7zm3-24.9H89v6.9H56.4v-6.9zm54.9-15.5c-1.5 0-2.9-.5-4-1.7-1.1-1.1-1.7-2.4-1.7-4 0-1.5.6-2.9 1.7-4s2.4-1.7 4-1.7 2.9.6 4 1.7 1.7 2.4 1.7 4c0 1-.3 2-.8 2.8-.5.9-1.2 1.5-2 2-1 .6-1.9.9-2.9.9zm0 32.2c-1.5 0-2.9-.5-4-1.7-1.1-1.1-1.7-2.4-1.7-4s.6-2.9 1.7-4 2.4-1.7 4-1.7 2.9.5 4 1.7 1.7 2.4 1.7 4c0 1-.3 2-.8 2.8s-1.2 1.5-2 2c-1 .7-1.9.9-2.9.9zm17.3 8.2V40h22.3c4.4 0 8.1.8 11 2.3s5 3.6 6.4 6.1c1.4 2.6 2.1 5.4 2.1 8.5 0 2.7-.5 5-1.4 6.8-1 1.8-2.2 3.2-3.8 4.2s-3.3 1.8-5.1 2.3v.6c2 .1 3.9.8 5.9 2.1 2 1.2 3.6 3 5 5.4s2 5.2 2 8.5c0 3.2-.7 6.1-2.2 8.6s-3.7 4.6-6.9 6.1c-3.1 1.5-7.2 2.2-12.2 2.2h-23.1zm7.7-35.8h14.3c2.3 0 4.4-.5 6.3-1.4 1.9-.9 3.4-2.2 4.5-3.9 1.1-1.7 1.7-3.6 1.7-5.9 0-2.8-1-5.2-2.9-7.1s-5-2.9-9.3-2.9h-14.6V68zm0 28.9h15.3c5 0 8.6-1 10.8-2.9s3.2-4.3 3.2-7.1c0-2.2-.6-4.2-1.7-6-1.1-1.8-2.7-3.3-4.7-4.4-2-1.1-4.4-1.7-7.2-1.7h-15.7v22.1z'/%3E%3Cpath fill='none' stroke='%23000000' stroke-width='10' d='M69.9 154.2h80m-80-28.8h80'/%3E%3Cpath stroke='%23000000' stroke-width='2.5' d='M50.1 130.4v-10l10 5-10 5zm0 29v-10l10 5-10 5z'/%3E%3C/svg%3E"); --footnote-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='Footnotes-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath fill='none' stroke='%23000000' stroke-miterlimit='10' stroke-width='10' d='M127.9 84.7v14.6H73.5v15.4'/%3E%3Cpath d='M185 125.1v30h-75v-30h75m5-5h-85v40h85v-40zM75 77.4H10v-5h65v5zm-20-15H10v-5h45v5zm40-15H10v-5h85v5z'/%3E%3Cpath fill='none' stroke='%23000000' stroke-miterlimit='10' stroke-width='5' d='M95 44.9H10m45 15H10m65 15H10'/%3E%3Cpath d='M130.4 44.9v30H125V50.2h-.2l-7 4.5v-5l7.5-4.8h5.1zm-54.7 80.2v30h-5.4v-24.7h-.2l-7 4.5v-5l7.5-4.8h5.1z'/%3E%3C/svg%3E"); --math-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='Math-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath fill='none' stroke='%23000000' stroke-miterlimit='10' stroke-width='10' d='M160 157H40m0-110h120'/%3E%3Cpath d='m65.1 142-3-7.1 29.1-35.7-28.7-29.1 3-8.1h60.1l5.2 4.3V83h-8.4l-5.6-10.7H82.4l28.5 28.6v4.7l-24.6 28h35.4l4.2-10.8h6.8V142H65.1z'/%3E%3C/svg%3E"); --inline-math-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='Inline-Math-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath d='m65.1 142-3-7.1 29.1-35.7-28.7-29.1 3-8.1h60.1l5.2 4.3V83h-8.4l-5.6-10.7H82.4l28.5 28.6v4.7l-24.6 28h35.4l4.2-10.8h6.8V142H65.1z'/%3E%3Cpath d='m65.8 103.4-54.9 28v-10.9L53 100.2l-.3.7v-1.7l.3.7-42.1-20.4V68.6l54.9 28v6.8zm69.3-6.8 54.9-28v10.9l-42.1 20.3.3-.7v1.7l-.3-.7 42.1 20.3v10.9l-54.9-28v-6.7z'/%3E%3C/svg%3E"); --eq-def-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='Equation-Ref-Icon' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath fill='none' d='M.5 0h200v200H.5z'/%3E%3Cpath d='m145.7 106.1.9-25-21.1 13.4L120 85l22.3-11.6L120 61.8l5.5-9.5 21.1 13.4-.9-25h10.9l-.9 25 21.1-13.4 5.5 9.5L160 73.4 182.3 85l-5.5 9.5-21.1-13.4.9 25h-10.9zM21 160V87.3h45.6v9.4H32v22.2h32.2v9.4H32v22.3h35v9.4H21zm100.9 20.5h-10.6v-28.9h-.6c-.6 1.2-1.6 2.5-2.8 4s-2.8 2.8-4.9 3.9c-2.1 1.1-4.8 1.7-8.1 1.7-4.4 0-8.3-1.1-11.8-3.4-3.4-2.3-6.1-5.5-8.1-9.7s-2.9-9.3-2.9-15.1 1-10.9 3-15.1c2-4.2 4.7-7.4 8.1-9.6 3.5-2.2 7.4-3.3 11.8-3.3 3.4 0 6.1.6 8.2 1.7 2.1 1.1 3.7 2.4 4.8 3.9 1.1 1.5 2 2.8 2.7 3.9h.9v-8.8H122v74.8zm-10.5-47.8c0-3.8-.5-7.1-1.6-9.9-1.1-2.8-2.7-5.1-4.8-6.6-2.1-1.6-4.7-2.4-7.8-2.4-3.2 0-5.9.8-8 2.5-2.1 1.7-3.7 3.9-4.8 6.8-1.1 2.9-1.6 6.1-1.6 9.7 0 3.6.5 6.9 1.6 9.8 1.1 2.9 2.7 5.2 4.8 6.9 2.1 1.7 4.8 2.5 7.9 2.5 3.1 0 5.6-.8 7.8-2.4 2.1-1.6 3.7-3.9 4.8-6.8 1.2-2.9 1.7-6.2 1.7-10.1z'/%3E%3C/svg%3E"); --bib-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' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cpath id='Bibliography-Icon' d='M165.6 110.1c2.6-6.4 2.6-13.8 0-20.2 2.7-6.7 2.6-14.6-.4-21.2-.2-.5-.6-.9-1-1.1l-46.4-27.1c-.4-.3-1-.4-1.5-.3l-81.4 6.9h-.5c-.1 0-.2.1-.2.1s-.1 0-.1.1c-.1 0-.2.1-.2.1l-.1.1-.2.2-.1.1-.2.2s-.1.1-.1.2-.1.1-.1.2-.1.1-.1.2-.1.1-.1.2 0 .1-.1.2v1.4c0 .1 0 .2.1.2 2.6 5.7 2.6 12.5 0 18.2v.1c0 .1-.1.2-.1.3v.1c0 .1 0 .3-.1.4v.6c0 .1 0 .2.1.3 0 .1 0 .1.1.2 0 .1 0 .1.1.2 2.6 5.7 2.6 12.5 0 18.2v.1c0 .1-.1.2-.1.3v.1c0 .1 0 .3-.1.4v.6c0 .1 0 .2.1.3 0 .1 0 .1.1.2 0 .1 0 .1.1.2 2.6 5.7 2.6 12.5 0 18.2v.1c0 .1-.1.2-.1.3v.1c0 .1 0 .3-.1.4v.6c0 .1 0 .2.1.3 0 .1 0 .1.1.2 0 .1 0 .1.1.2 2.6 5.7 2.6 12.5 0 18.2-.5 1.2-.1 2.5 1 3.2l46.4 27.1c.4.2.8.3 1.3.3h.2l81.4-6.9c.9-.1 1.7-.6 2.1-1.5 3-6.6 3.1-14.5.4-21.3 2.1-7 2.1-14.4-.4-20.8zm-81.3 6.7c2.5-6.4 2.4-13.7-.1-20 0-.1.1-.2.1-.2l76.1-6.5c0 .3.1.6.2.8 2.6 5.7 2.6 12.5 0 18.2-.2.4-.2.8-.2 1.2l-76.1 6.5zm-4.8-38.5c1.9 4.7 2.1 10 .7 14.8l-42-24.6c1.5-4.4 1.9-9.2 1.1-13.8l34.8 20.4 5.4 3.2zm0 20.2c1.9 4.7 2.1 10 .7 14.8l-42-24.6c1.5-4.4 1.9-9.2 1.1-13.8l40.2 23.6zm0 20.3c1.9 4.7 2.1 10 .7 14.8l-42-24.6c1.5-4.4 1.9-9.2 1.1-13.8l40.2 23.6zm.6 35-42-24.6c1.5-4.4 1.9-9.2 1.1-13.8l40.1 23.5.1.1c2 4.7 2.2 10 .7 14.8zm81-5.6-76 6.5c1.6-5.7 1.2-11.9-.9-17.4 0-.1.1-.2.1-.2l76.1-6.5c0 .3.1.6.2.8 2.3 5.2 2.5 11.4.5 16.8z'/%3E%3C/svg%3E"); --bib-cite-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' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 200 200' xml:space='preserve'%3E%3Cg id='Bibliography-Cite-Icon'%3E%3Cpath d='m145.2 106.1.9-25L125 94.5l-5.5-9.5 22.3-11.6-22.3-11.6 5.5-9.5 21.1 13.4-.9-25h10.9l-.9 25 21.1-13.4 5.5 9.5-22.3 11.6L181.8 85l-5.5 9.5-21.1-13.4.9 25h-10.9z'/%3E%3Cpath d='m165.9 99.7.2 6 .1 2.6c.8-2.4 1.2-5 1.3-7.6l-1.6-1zm.5 12.8.1 3.6h-31.7l.1-3.6-50.7 4.3c2.5-6.4 2.4-13.7-.1-20 0-.1.1-.2.1-.2l29-2.5-2.4-4.2-5.2-9 9.2-4.8 5.2-2.7-5.2-2.7-9.2-4.8 5.2-9 5.5-9.5 3.3-5.8-1.9-1.1c-.4-.3-1-.4-1.5-.3l-81.4 6.9h-.5c-.1 0-.2.1-.2.1s-.1 0-.1.1c-.1 0-.2.1-.2.1l-.1.1-.2.2-.1.1-.2.2s-.1.1-.1.2-.1.1-.1.2-.1.1-.1.2-.1.1-.1.2 0 .1-.1.2v1.4c0 .1 0 .2.1.2 2.6 5.7 2.6 12.5 0 18.2v.1c0 .1-.1.2-.1.3v.1c0 .1 0 .3-.1.4v.6c0 .1 0 .2.1.3 0 .1 0 .1.1.2 0 .1 0 .1.1.2 2.6 5.7 2.6 12.5 0 18.2v.1c0 .1-.1.2-.1.3v.1c0 .1 0 .3-.1.4v.6c0 .1 0 .2.1.3 0 .1 0 .1.1.2 0 .1 0 .1.1.2 2.6 5.7 2.6 12.5 0 18.2v.1c0 .1-.1.2-.1.3v.1c0 .1 0 .3-.1.4v.6c0 .1 0 .2.1.3 0 .1 0 .1.1.2 0 .1 0 .1.1.2 2.6 5.7 2.6 12.5 0 18.2-.5 1.2-.1 2.5 1 3.2l46.4 27.1c.4.2.8.3 1.3.3h.2l81.4-6.9c.9-.1 1.7-.6 2.1-1.5 3-6.6 3.1-14.5.4-21.3 1.9-6.2 2.2-12.6.5-18.4zm-86.3 41.3-42-24.6c1.5-4.4 1.9-9.2 1.1-13.8l40.1 23.5.1.1c2 4.7 2.2 10 .7 14.8zm0-20.2-42-24.6c1.5-4.4 1.9-9.2 1.1-13.8l40.2 23.5c2 4.7 2.2 10.1.7 14.9zm0-20.2-42-24.6c1.5-4.4 1.9-9.2 1.1-13.8l40.2 23.5c2 4.7 2.2 10 .7 14.9zm0-20.3-42-24.6c1.5-4.4 1.9-9.2 1.1-13.8L74 75.1l5.4 3.2c2 4.7 2.2 10 .7 14.8zm81 55.1-76 6.5c1.6-5.7 1.2-11.9-.9-17.4 0-.1.1-.2.1-.2l76.1-6.5c0 .3.1.6.2.8 2.3 5.2 2.5 11.4.5 16.8z'/%3E%3C/g%3E%3C/svg%3E%0A"); } /* STRUCTURE ============================= */ /* Structural elements generally part of standard HTML spec as well as Wikidot's base structural elements */ /* ===DIRECTORY=== 1. =OPENTYPE STYLING 2. =HTML & BODY GLOBAL STYLING 3. =HTML5 MEDIA ITEMS 4. =USER INPUT & FORMS 4.1 =TEXTAREA & TEXT 4.2 =BUTTONS 4.3 =CHECKBOXES 4.4 =RADIO BUTTONS 4.5 =DATA-FORM STYLING 4.5.1 =DATA-FORM LABEL STYLING 4.5.2 =DATA-FORM GENERAL INPUT STYLING 4.5.3 =CHECKBOX & RADIO DATAFORM STYLING 4.5.4 =STATIC DATAFORM STYLING 4.5.5 =PASSWORD STYLING 4.5.6 =SELECT & PAGE SELECT STYLING 4.5.7 =JQUERY DATE PICKER STYLING 5. =STANDARD STRUCTURE 5.1 =STYLING 5.2 =HEADERS 5.3 =LISTS 5.4 =LINKS 6. =CODE FORMATTING 7. =BROWSER SPECIFIC FIXES 8. =MOBILE FORMATTING 9. =ANIMATIONS =============== */ /* ===OPENTYPE STYLING=== */ /* Opentype Supported Styles and Variables */ *, *::before, *::after { -webkit-font-kerning: auto; font-kerning: auto; font-variant-ligatures: common-ligatures contextual; font-variant-numeric: lining-nums proportional-nums; font-weight: var(--wght, revert); } @supports (font-variation-settings: inherit) { *, *::before, *::after { font-variation-settings: "ital" var(--ital, 0), "slnt" var(--slnt, 0), "CASL" var(--CASL, 0), "CRSV" var(--CRSV, 0), "MONO" var(--MONO, 0), "FLAR" var(--FLAR, 0); } } @supports (font-feature-settings: inherit) { *, *::before, *::after { font-feature-settings: "lnum" var(--lnum, 1), "pnum" var(--pnum, 1), "kern" var(--kern, 1), "cpsp" var(--cpsp, 1), "liga" var(--liga, 1), "case" var(--case, 1), "clig" var(--clig, 1), "dlig" var(--dlig, 0), "calt" var(--calt, 1), "aalt" var(--aalt, 0), "ss01" var(--ss01, 1), "ss02" var(--ss02, 0), "ss03" var(--ss03, 1), "ss04" var(--ss04, 1), "zero" var(--zero, 1), "cv11" var(--cv11, 0); } } /* ===HTML & BODY GLOBAL STYLING=== */ html { font-size: 1em; line-height: var(--base-line-height); } html, body { margin: 0; padding: 0; color: rgb(var(--swatch-text-general)); font-variant-ligatures: none; scrollbar-color: rgba(var(--swatch-tertiary-color), 1) /* Thumb */ rgba(var(--swatch-secondary-color), 1); /* Track */ } /* Webkit Scrollbar */ ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb { background: rgba(var(--swatch-tertiary-color), 1); } ::-webkit-scrollbar-track, ::-webkit-scrollbar-track { background: rgba(var(--swatch-secondary-color), 1); } /* Selection color */ ::-moz-selection { background: rgba(var(--swatch-primary, 180, 35, 35), 0.25); text-shadow: none; } ::selection { background: rgba(var(--swatch-primary, 180, 35, 35), 0.25); text-shadow: none; } body { /* coloring */ background-color: rgba(var(--swatch-background), 1); /* font behavior */ font-family: var(--body-font); font-size: var(--max-font-size); font-size: var(--base-font-size); line-height: var(--base-line-height); word-break: normal; -webkit-hyphens: manual; -ms-hyphens: manual; hyphens: manual; /* line behavior */ orphans: 2; } /* Setting mobile body font size to 14px/0.875rem) */ @media only screen and (max-width: 20rem) { body { font-size: calc(var(--base-font-size) * (14 / 15)); } } /* Chrome, Safari, Opera Scrollbar */ ::-webkit-scrollbar { width: var(--scrollbar-width); height: var(--scrollbar-width); border: solid 0.0625rem rgba(var(--swatch-menubg-black-color), 0.1); border-radius: 0.031rem; } ::-webkit-scrollbar-track { background: rgba(var(--swatch-menubg-black-color), 0.1); } ::-webkit-scrollbar-thumb { background: rgba(var(--swatch-tertiary-color), 0.4); } /* Bold/Italic Font Globals */ body strong, body strong *, body b, body b *, body .bold, body .bold * { --wght: 700; font-weight: var(--wght); --mono-wght: calc(var(--wght) - 50); } body i, body i *, body em, body em *, body .italic, body .italic * { --ital: 1; --slnt: -15; } /* Attribute Selectors for font-weight and font-style */ [style*="weight: 1000"], [style*="weight: 1000"] *, [style*="weight:1000"], [style*="weight:1000"] * { --wght: 1000; font-weight: var(--wght); --mono-wght: calc(var(--wght) - 50); } [style*="weight: 900"], [style*="weight: 900"] *, [style*="weight:900"], [style*="weight:900"] * { --wght: 900; font-weight: var(--wght); --mono-wght: calc(var(--wght) - 50); } [style*="weight: 800"], [style*="weight: 800"] *, [style*="weight:800"], [style*="weight:800"] * { --wght: 800; font-weight: var(--wght); --mono-wght: calc(var(--wght) - 50); } [style*="weight: 700"], [style*="weight: 700"] *, [style*="weight:700"], [style*="weight:700"] * { --wght: 700; font-weight: var(--wght); --mono-wght: calc(var(--wght) - 50); } [style*="weight: 600"], [style*="weight: 600"] *, [style*="weight:600"], [style*="weight:600"] * { --wght: 600; font-weight: var(--wght); --mono-wght: calc(var(--wght) - 50); } [style*="weight: 500"], [style*="weight: 500"] *, [style*="weight:500"], [style*="weight:500"] * { --wght: 500; font-weight: var(--wght); --mono-wght: calc(var(--wght) - 50); } [style*="weight: 400"], [style*="weight: 400"] *, [style*="weight:400"], [style*="weight:400"] * { --wght: 400; font-weight: var(--wght); --mono-wght: calc(var(--wght) - 50); } [style*="weight: 300"], [style*="weight: 300"] *, [style*="weight:300"], [style*="weight:300"] * { --wght: 300; font-weight: var(--wght); --mono-wght: calc(var(--wght) - 50); } [style*="weight: 200"], [style*="weight: 200"] *, [style*="weight:200"], [style*="weight:200"] * { --wght: 200; font-weight: var(--wght); --mono-wght: calc(var(--wght) - 50); } [style*="weight: 100"], [style*="weight: 100"] *, [style*="weight:100"], [style*="weight:100"] * { --wght: 100; font-weight: var(--wght); --mono-wght: calc(var(--wght) - 50); } [style*="italic"], [style*="italic"] *, [style*="oblique"], [style*="oblique"] * { --ital: 1; --slnt: -15; } /* ===HTML5 MEDIA ITEMS=== */ audio, canvas, iframe, img, svg, video { vertical-align: middle; } img, embed, video, object, iframe, table { max-width: 100%; } input, textarea, select, button, meter, progress { font-family: var(--body-font); } /* ===USER INPUT & FORMS=== */ /* Controls the width of many form elements*/ .form-control { width: calc(100% - 1.0625rem); } table.form { margin: 0.5rem -0.25rem; } table.form, table.form > tbody { width: 100%; } fieldset { margin: 0; padding: 0; border: 0; } #edit-page-comments { width: calc(100% - 2rem); min-height: 3rem; padding: 0 1rem; line-height: 1.5; resize: both; } textarea, input.text, input.checkbox, div.note, #lock-info { transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); border: 0.0625rem solid rgba(var(--swatch-border-color), 0.25); background-color: rgb(var(--swatch-background)); color: rgb(var(--swatch-text-general)); font-family: var(--body-font); scrollbar-color: rgba(var(--swatch-tertiary-color), 0.6) rgba(var(--swatch-tertiary-color), 0.1); will-change: box-shadow, color, background-color; } input[type="text"], textarea { outline: 0 solid rgb(var(--swatch-primary)); box-shadow: 0 0 0 0 rgb(var(--swatch-primary)); } input[type="text"]:not(:-moz-placeholder-shown), textarea:not(:-moz-placeholder-shown) { background-color: rgb(var(--swatch-background)); } input[type="text"]:not(:placeholder-shown), textarea:not(:placeholder-shown) { background-color: rgb(var(--swatch-background)); } input[type="text"]:-moz-placeholder-shown, textarea:-moz-placeholder-shown { background-color: rgba(var(--swatch-primary-darker), 0.2); } input[type="text"]:placeholder-shown, textarea:placeholder-shown { background-color: rgba(var(--swatch-primary-darker), 0.2); } input[type="text"]:focus, textarea:focus { outline-width: 0; box-shadow: 0 0 0 0.125em rgb(var(--swatch-primary)); } /* ===TEXTAREA & TEXT=== */ textarea::-webkit-scrollbar-track, input.text::-webkit-scrollbar-track { background: rgba(var(--swatch-tertiary-color), 0.1); } textarea::-webkit-scrollbar-thumb, input.text::-webkit-scrollbar-thumb { background: rgba(var(--swatch-tertiary-color), 0.6); } /* ===BUTTONS=== */ *:not(.page-rate-widget-box):not(#search-top-box-form) > .owindow .button-bar a, *:not(.page-rate-widget-box):not(#search-top-box-form) > div.buttons input, *:not(.page-rate-widget-box):not(#search-top-box-form) > input.button, *:not(.page-rate-widget-box):not(#search-top-box-form) > button, *:not(.page-rate-widget-box):not(#search-top-box-form) > .button, *:not(.page-rate-widget-box):not(#search-top-box-form) > div.buttons input, *:not(.page-rate-widget-box):not(#search-top-box-form) > input.button, *:not(.page-rate-widget-box):not(#search-top-box-form) > button, *:not(.page-rate-widget-box):not(#search-top-box-form) > .btn { --wght: var(--ui-wght); display: inline-flex; position: relative; z-index: 2; align-items: center; justify-content: center; min-width: 5em; margin: 0; padding: 0.25em; overflow: hidden; transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); border: 0.0625rem solid rgb(var(--swatch-primary),0.05); outline: 0 solid rgb(var(--swatch-primary)); background-color: rgb(var(--ui-button-bg)); box-shadow: 0 0 0 0 rgb(var(--ui-button-bg)); color: rgb(var(--ui-button-txt)); font-family: var(--UI-font); font-weight: var(--wght); will-change: border-color, box-shadow, color, background-color, font-weight, font-variation-settings; } *:not(.page-rate-widget-box):not(#search-top-box-form) > .owindow .button-bar a:hover, *:not(.page-rate-widget-box):not(#search-top-box-form) > .owindow .button-bar a:active, *:not(.page-rate-widget-box):not(#search-top-box-form) > div.buttons input:hover, *:not(.page-rate-widget-box):not(#search-top-box-form) > div.buttons input:active, *:not(.page-rate-widget-box):not(#search-top-box-form) > input.button:hover, *:not(.page-rate-widget-box):not(#search-top-box-form) > input.button:active, *:not(.page-rate-widget-box):not(#search-top-box-form) > button:hover, *:not(.page-rate-widget-box):not(#search-top-box-form) > button:active, *:not(.page-rate-widget-box):not(#search-top-box-form) > .button:hover, *:not(.page-rate-widget-box):not(#search-top-box-form) > .button:active, *:not(.page-rate-widget-box):not(#search-top-box-form) > div.buttons input:hover, *:not(.page-rate-widget-box):not(#search-top-box-form) > div.buttons input:active, *:not(.page-rate-widget-box):not(#search-top-box-form) > input.button:hover, *:not(.page-rate-widget-box):not(#search-top-box-form) > input.button:active, *:not(.page-rate-widget-box):not(#search-top-box-form) > button:hover, *:not(.page-rate-widget-box):not(#search-top-box-form) > button:active, *:not(.page-rate-widget-box):not(#search-top-box-form) > .btn:hover, *:not(.page-rate-widget-box):not(#search-top-box-form) > .btn:active { --wght: var(--ui-hvr-wght); border-color: transparent; outline: 0 solid rgb(var(--swatch-primary)); background-color: rgb(var(--ui-button-hover-bg)); box-shadow: 0 0 0 0.125rem rgb(var(--ui-button-hover-outline)); color: rgb(var(--ui-button-hover-txt)); font-weight: var(--wght); text-decoration: none; cursor: pointer; } *:not(.page-rate-widget-box):not(#search-top-box-form) > .owindow .button-bar a:focus-within, *:not(.page-rate-widget-box):not(#search-top-box-form) > div.buttons input:focus-within, *:not(.page-rate-widget-box):not(#search-top-box-form) > input.button:focus-within, *:not(.page-rate-widget-box):not(#search-top-box-form) > button:focus-within, *:not(.page-rate-widget-box):not(#search-top-box-form) > .button:focus-within, *:not(.page-rate-widget-box):not(#search-top-box-form) > div.buttons input:focus-within, *:not(.page-rate-widget-box):not(#search-top-box-form) > input.button:focus-within, *:not(.page-rate-widget-box):not(#search-top-box-form) > button:focus-within, *:not(.page-rate-widget-box):not(#search-top-box-form) > .btn:focus-within { --wght: var(--ui-hvr-wght); border-color: transparent; outline: 0 solid rgb(var(--swatch-primary)); background-color: rgb(var(--ui-button-hover-bg)); box-shadow: 0 0 0 0.125rem rgb(var(--ui-button-hover-outline)); color: rgb(var(--ui-button-hover-txt)); font-weight: var(--wght); text-decoration: none; cursor: pointer; } /* ===CHECKBOXES=== */ input[type=checkbox] { display: inline-block; position: relative; width: 1em; height: 1em; transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1); border: 0.0625rem solid rgb(var(--swatch-tertiary-color)); outline: 0 solid rgb(var(--swatch-primary)); background-color: transparent; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; will-change: box-shadow, border-color; } input[type=checkbox]::before, input[type=checkbox]::after { --clip-path: polygon( 0 0, 100% 0, 100% 0, 0 0 ); content: " "; display: inline-block; position: absolute; width: 20%; height: 0; transform-origin: left top; background-color: rgba(var(--swatch-primary),0); box-shadow: 0 0 0 0 rgb(var(--swatch-secondary-color)); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); will-change: box-shadow, border-color; } input[type=checkbox]::before { top: 75%; left: 40%; height: 150%; transform: rotate(-135deg); transition: background-color 50ms cubic-bezier(0.4, 0, 0.2, 1) 50ms, box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 50ms cubic-bezier(0.4, 0, 0.2, 1) 50ms, box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 50ms cubic-bezier(0.4, 0, 0.2, 1) 50ms, box-shadow 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); } input[type=checkbox]::after { top: 40%; left: 5%; height: 50%; transform: rotate(-45deg); transition: background-color 50ms cubic-bezier(0.4, 0, 0.2, 1) 200ms, box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 150ms, -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1) 150ms; transition: background-color 50ms cubic-bezier(0.4, 0, 0.2, 1) 200ms, box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 150ms, clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1) 150ms; transition: background-color 50ms cubic-bezier(0.4, 0, 0.2, 1) 200ms, box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 150ms, clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1) 150ms, -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1) 150ms; } input[type=checkbox]:checked { border-color: rgb(var(--swatch-primary)); outline: 0 solid rgb(var(--swatch-primary)); box-shadow: 0 0 0 0.125rem rgb(var(--swatch-primary)); } input[type=checkbox]:checked::before, input[type=checkbox]:checked::after { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); background-color: rgba(var(--swatch-primary),1); box-shadow: 0 0 0 0.05em rgb(var(--swatch-secondary-color)); } input[type=checkbox]:checked::before { transition: background-color 50ms cubic-bezier(0.4, 0, 0.2, 1) 200ms, box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 150ms, -webkit-clip-path 159ms cubic-bezier(0.4, 0, 0.2, 1) 150ms; transition: background-color 50ms cubic-bezier(0.4, 0, 0.2, 1) 200ms, box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 150ms, clip-path 159ms cubic-bezier(0.4, 0, 0.2, 1) 150ms; transition: background-color 50ms cubic-bezier(0.4, 0, 0.2, 1) 200ms, box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 150ms, clip-path 159ms cubic-bezier(0.4, 0, 0.2, 1) 150ms, -webkit-clip-path 159ms cubic-bezier(0.4, 0, 0.2, 1) 150ms; } input[type=checkbox]:checked::after { transition: background-color 50ms cubic-bezier(0.4, 0, 0.2, 1) 50ms, box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 50ms cubic-bezier(0.4, 0, 0.2, 1) 50ms, box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 50ms cubic-bezier(0.4, 0, 0.2, 1) 50ms, box-shadow 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); } /* ===RADIO BUTTONS=== */ input[type="radio"], input[type="radio"] * { box-sizing: border-box; padding: 0; overflow: hidden; outline: 0; } input[type="radio"] { display: grid; position: relative; align-items: center; justify-content: center; width: 1em; height: 1em; border: none; border-radius: 50%; outline: 0 solid transparent; background: rgb(var(--swatch-primary)); box-shadow: 0 0 0 0.0625rem rgb(var(--swatch-primary)); font-size: 0.875rem; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type="radio"]::before, input[type="radio"]::after { grid-column: 1; grid-row: 1; align-self: center; justify-self: center; } input[type="radio"]::before, input[type="radio"]:not(:checked)::before { content: ""; width: 0.3625rem; height: 0.3625rem; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 50%; background: rgb(var(--swatch-primary)); } input[type="radio"]::after { content: ""; width: 1em; height: 1em; transform: scale(0); border-radius: 50%; background: rgba(var(--swatch-tertiary-color),0.5); } input[type="radio"]:checked { transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); outline: 0 solid rgb(var(--swatch-primary)); background: rgb(var(--swatch-background)); box-shadow: 0 0 0 0.0625rem rgb(var(--swatch-primary)), inset 0 0 0 0.0625rem rgb(var(--swatch-primary)); } input[type="radio"]:checked::after { transform: scale(1); transition: all 500ms; background: transparent; } input[type="radio"]:checked::before { width: 0.5em; height: 0.5em; transition: all 200ms; background: rgb(var(--swatch-primary)); } /* ===DATA-FORM STYLING=== */ #edit-page-form.data-form { padding: 0; background-color: transparent; font-size: 0.8125rem; font-size: clamp(0.8125rem, 2.5vw, var(--base-font-size)); } #edit-page-form.data-form, #edit-page-form.data-form * { box-sizing: border-box; margin: 0; padding: 0; } #edit-page-form.data-form .form-row { display: grid; grid-auto-rows: auto; margin: 1.25rem 0 0.75em 0; box-shadow: 0 0 0 0.0625rem rgba(var(--swatch-tertiary-color), 0.5); font-size: 0.8em; } #edit-page-form.data-form .form-row .form-values { padding: 0.5em 0; box-shadow: 0 -0.0625rem 0 0 rgba(var(--swatch-tertiary-color), 0.5); } #edit-page-form.data-form .form-row .form-values > span { display: contents; } /* ===DATA-FORM LABEL STYLING=== */ #edit-page-form.data-form .form-row .form-labels { z-index: 2; margin: -1em 0 -0.5em 1rem; transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); } #edit-page-form.data-form .form-row:focus-within .form-labels { transform: translateY(-0.125rem) translateX(-0.125rem); } #edit-page-form.data-form .form-row .form-labels span { --wght: calc(var(--ui-wght) + 100); --header-height: var(--final-header-height-on-desktop); margin: 0; padding: 0.125em 0.5em; transition: padding 200ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: padding 200ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: padding 200ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); outline: 0 solid rgb(var(--swatch-primary)); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); color: rgb(var(--swatch-text-general)); text-transform: uppercase; will-change: box-shadow, color, background-color, transform, font-weight, font-variation-settings; } #edit-page-form.data-form .form-row .form-labels span::before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), background-image 50ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgba(var(--swatch-background), 1); background-image: linear-gradient( to bottom, rgba(var(--background-gradient-color), 1), rgba(var(--background-gradient-color), 0) var(--background-gradient-distance), rgba(var(--background-gradient-color), 0) 100% ); pointer-events: none; background-position-y: top; } #edit-page-form.data-form .form-row:focus-within .form-labels span { --wght: calc(var(--ui-hvr-wght) + 100); padding-left: 0.5rem; outline: 0 solid rgb(var(--swatch-primary)); color: rgb(var(--swatch-background)); -webkit-clip-path: polygon( 0 0, calc(100% + 0.125rem) 0, calc(100% + 0.125rem) calc(100% + 0.125rem), 0 calc(100% + 0.125rem) ); clip-path: polygon( 0 0, calc(100% + 0.125rem) 0, calc(100% + 0.125rem) calc(100% + 0.125rem), 0 calc(100% + 0.125rem) ); } #edit-page-form.data-form .form-row:focus-within .form-labels span::before { background-color: rgba(var(--swatch-primary), 1); background-image: linear-gradient( to bottom, rgba(var(--background-gradient-color), 0) 0, rgba(var(--background-gradient-color), 0) var(--background-gradient-distance) ); -webkit-clip-path: unset; clip-path: unset } /* ===DATA-FORM GENERAL INPUT STYLING=== */ #edit-page-form.data-form .form-row span.field-select-long, #edit-page-form.data-form .form-row div.dataform-pagepath-chooser { display: flex; position: relative; flex-direction: column; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; border-radius: 0 0.25rem 0.25rem 0.25rem; } #edit-page-form.data-form .form-row span.field-select-long *:not(.text-danger), #edit-page-form.data-form .form-row div.dataform-pagepath-chooser *:not(.text-danger) { flex-grow: 1; width: 100%; } #edit-page-form.data-form .form-row span.field-select-short, #edit-page-form.data-form .form-row span.field-checkbox, #edit-page-form.data-form .form-row div.field-static, #edit-page-form.data-form .form-row span.field-file { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; width: calc(100% - 2rem); height: auto; margin: 0 0 0 1.25rem; } #edit-page-form.data-form .form-row input[type=text], #edit-page-form.data-form .form-row textarea, #edit-page-form.data-form .form-row input.form-control, #edit-page-form.data-form .form-row span.field-select-long select, #edit-page-form.data-form .form-row div.dataform-pagepath-chooser select { --wght: var(--ui-wght); padding: 0.25rem; transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); border: none; outline: 0 solid rgb(var(--swatch-primary)); box-shadow: inset 0 0 0 0.0625rem rgb(var(--swatch-tertiary-color),0.3625); font-size: 1.2em !important; /* Overwrite Wikidot Inline Styling */ will-change: box-shadow, background-color, font-weight, font-variation-settings; } #edit-page-form.data-form .form-row input[type=text], #edit-page-form.data-form .form-row textarea, #edit-page-form.data-form .form-row input.form-control, #edit-page-form.data-form .form-row span.field-select-long, #edit-page-form.data-form .form-row div.dataform-pagepath-chooser { width: calc(100% - 2rem); margin: 0 1rem; } #edit-page-form.data-form .form-row input[type=text]:focus, #edit-page-form.data-form .form-row textarea:focus, #edit-page-form.data-form .form-row td.form-values input.form-control:focus, #edit-page-form.data-form .form-row span.field-select-long select:focus, #edit-page-form.data-form .form-row div.dataform-pagepath-chooser select:focus { --wght: var(--ui-hvr-wght); border: none; outline: 0 solid rgb(var(--swatch-primary)); background-color: rgba(var(--swatch-secondary-color), 0); box-shadow: 0 0 0 0.125rem rgb(var(--swatch-primary)); } #edit-page-form.data-form .form-row input[type=text]:focus-visible, #edit-page-form.data-form .form-row textarea:focus-visible, #edit-page-form.data-form .form-row td.form-values input.form-control:focus-visible, #edit-page-form.data-form .form-row span.field-select-long select:focus-visible, #edit-page-form.data-form .form-row div.dataform-pagepath-chooser select:focus-visible { --wght: var(--ui-hvr-wght); border: none; outline: 0 solid rgb(var(--swatch-primary)); background-color: rgba(var(--swatch-secondary-color), 0); box-shadow: 0 0 0 0.125rem rgb(var(--swatch-primary)); } #edit-page-form.data-form .form-row:focus-within input[type=text], #edit-page-form.data-form .form-row:focus-within textarea, #edit-page-form.data-form .form-row:focus-within td.form-values input.form-control, #edit-page-form.data-form .form-row:focus-within span.field-select-long select, #edit-page-form.data-form .form-row:focus-within div.dataform-pagepath-chooser select { --wght: var(--ui-hvr-wght); border: none; outline: 0 solid rgb(var(--swatch-primary)); background-color: rgba(var(--swatch-secondary-color), 0); box-shadow: 0 0 0 0.125rem rgb(var(--swatch-primary)); } #edit-page-form.data-form .form-row span.form-value select { border-radius: 0 0.25rem 0.25rem 0.25rem; } /* ===CHECKBOX & RADIO DATAFORM STYLING=== */ #edit-page-form.data-form .form-row span.field-select-short label, #edit-page-form.data-form .form-row span.field-checkbox label { display: flex; align-items: center; justify-content: center; padding: 0.5em; text-indent: 0.5ch; } #edit-page-form.data-form .form-row span.field-select-short input, #edit-page-form.data-form .form-row span.field-checkbox input { margin: 0; } #edit-page-form.data-form .form-row span.field-checkbox { padding: 0.75em 0; } #edit-page-form.data-form .form-row span.field-checkbox span.text-danger { transform: translateX(0); transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) } #edit-page-form.data-form .form-row span.field-checkbox input:checked + span.text-danger { transform: translateX(0.25em); } /* ===STATIC DATAFORM STYLING=== */ #edit-page-form.data-form .form-row div.field-static { font-size: 1.2em !important; } /* ===PASSWORD STYLING=== */ #edit-page-form.data-form .form-row span.field-password { text-indent: 1rem; } #edit-page-form.data-form .form-row span.field-password .form-control { width: calc(100% - 2rem); margin: 0 0 0 1rem; } /* ===SELECT & PAGE SELECT STYLING=== */ #edit-page-form.data-form .form-row span.field-pagepage div[class*="dataform-pagepath"] > span select { grid-column: 2; grid-row: 1; flex-grow: 2; margin-bottom: 0.5em; } #edit-page-form.data-form .form-row span.field-pagepage div[class*="dataform-pagepath"] > span span { display: grid; position: relative; grid-column: 2; grid-row: 2; grid-template-columns: 1em 1fr; justify-content:stretch; width: 100%; overflow: hidden; } #edit-page-form.data-form .form-row span.field-select-long::after, #edit-page-form.data-form .form-row span.field-pagepage div[class*="dataform-pagepath"] > span::after, #edit-page-form.data-form .form-row span.field-pagepage div[class*="dataform-pagepath"] > span span::after, #edit-page-form.data-form .form-row span.field-select-long::before, #edit-page-form.data-form .form-row span.field-pagepage div[class*="dataform-pagepath"] > span::before, #edit-page-form.data-form .form-row span.field-pagepage div[class*="dataform-pagepath"] > span span::before{ content: ""; position: absolute; top: 0; right: 0; width: calc(1em + 0.875rem); height: calc(1em + 0.875rem); pointer-events: none; } #edit-page-form.data-form .form-row span.field-select-long::before, #edit-page-form.data-form .form-row span.field-pagepage div[class*="dataform-pagepath"] > span::before, #edit-page-form.data-form .form-row span.field-pagepage div[class*="dataform-pagepath"] > span span::before{ border-radius: 0 0.25rem 0.25rem 0; background-color: rgb(var(--swatch-primary)); } #edit-page-form.data-form .form-row span.field-select-long::after, #edit-page-form.data-form .form-row span.field-pagepage div[class*="dataform-pagepath"] > span::after, #edit-page-form.data-form .form-row span.field-pagepage div[class*="dataform-pagepath"] > span span::after { --clip-path: polygon( 35% 40%, 65% 40%, 50% 65% ); transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--swatch-secondary-color)); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #edit-page-form.data-form .form-row span.field-select-long:focus-within::after, #edit-page-form.data-form .form-row span.field-pagepage div[class*="dataform-pagepath"]:focus-within > span::after, #edit-page-form.data-form .form-row span.field-pagepage div[class*="dataform-pagepath"]:focus-within > span span::after{ --clip-path: polygon( 40% 50%, 60% 30%, 60% 70% ); background-color: rgb(var(--swatch-secondary-color)); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #edit-page-form.data-form .form-row td.form-values select { width: 100%; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #edit-page-form.data-form .form-row td.form-values select option { margin-top: 2em; color: rgb(var(--swatch-text-secondary-color)) } #edit-page-form.data-form div.do-not-notify { padding: 0 0 1em; } #edit-page-form.data-form div.buttons { display: flex; align-items: center; justify-content: center; } /* ===JQUERY DATE PICKER STYLING=== */ #ui-datepicker-div { z-index: 2 !important; } #ui-datepicker-div, #ui-datepicker-div * { border: none; border-radius: none !important; font-family: var(--UI-font); } #ui-datepicker-div.ui-datepicker { width:min(90vw, 17em); padding:0.25rem 0.25rem 0; background-color: rgb(var(--swatch-background)); box-shadow: inset 0 0 0 0.0625rem rgb(var(--swatch-tertiary-color),0.3625); } #ui-datepicker-div.ui-datepicker .ui-datepicker-header { display: grid; position:relative; grid-template-areas: "cal-prev cal-title cal-next"; align-items: center; justify-content: space-between; padding:.2em 0; border: none; background-color: rgb(var(--swatch-primary)); background-image: none; color: rgb(var(--swatch-text-secondary-color)); } #ui-datepicker-div.ui-datepicker .ui-datepicker-header::before, #ui-datepicker-div.ui-datepicker .ui-datepicker-header::after { display: none; } #ui-datepicker-div.ui-datepicker .ui-datepicker-prev, #ui-datepicker-div.ui-datepicker .ui-datepicker-next { display: grid; position:relative; top:unset; grid-template-columns: 1fr; grid-template-rows: 1fr; align-items: center; justify-content: center; width:2em; height:2em; margin: 0; padding: 0; line-height: 0; cursor: pointer; } #ui-datepicker-div.ui-datepicker .ui-datepicker-prev::before, #ui-datepicker-div.ui-datepicker .ui-datepicker-next::before, #ui-datepicker-div.ui-datepicker .ui-datepicker-prev::after, #ui-datepicker-div.ui-datepicker .ui-datepicker-next::after { content: ""; grid-column: 1; grid-row: 1; align-self: center; justify-self: center; } #ui-datepicker-div.ui-datepicker .ui-datepicker-prev::after, #ui-datepicker-div.ui-datepicker .ui-datepicker-next::after { width: 2em; height: 2em; transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--swatch-primary)); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #ui-datepicker-div.ui-datepicker .ui-datepicker-prev::before, #ui-datepicker-div.ui-datepicker .ui-datepicker-next::before { grid-column: 1; grid-row: 1; width: 1em; height: 1em; transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1), width 200ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 0.25em; background-color: rgb(var(--swatch-secondary-color)); } #ui-datepicker-div.ui-datepicker .ui-datepicker-prev:hover::before, #ui-datepicker-div.ui-datepicker .ui-datepicker-next:hover::before { width: 1.5em; height: 1.5em; } #ui-datepicker-div.ui-datepicker .ui-datepicker-prev-hover, #ui-datepicker-div.ui-datepicker .ui-datepicker-next-hover { top:unset } #ui-datepicker-div.ui-datepicker .ui-datepicker-prev { --clip-path: polygon( 40% 50%, 60% 30%, 60% 70% ); left:unset; grid-area: cal-prev; } #ui-datepicker-div.ui-datepicker .ui-datepicker-next { --clip-path: polygon( 60% 50%, 40% 30%, 40% 70% ); right:unset; grid-area: cal-next; } #ui-datepicker-div.ui-datepicker .ui-datepicker-prev:hover, #ui-datepicker-div.ui-datepicker .ui-datepicker-prev-hover { --clip-path: polygon( 30% 50%, 60% 20%, 60% 80% ); left:unset } #ui-datepicker-div.ui-datepicker .ui-datepicker-next:hover, #ui-datepicker-div.ui-datepicker .ui-datepicker-next-hover { --clip-path: polygon( 70% 50%, 40% 20%, 40% 80% ); right:unset } #ui-datepicker-div.ui-datepicker .ui-datepicker-prev span, #ui-datepicker-div.ui-datepicker .ui-datepicker-next span { display:none; position:unset; top:unset; left:unset; margin-top:unset; margin-left:unset; background-image: none; } #ui-datepicker-div.ui-datepicker .ui-state-hover { border: none; background: none; } #ui-datepicker-div.ui-datepicker .ui-datepicker-title { grid-area: cal-title; margin:0; line-height:0; } #ui-datepicker-div.ui-datepicker .ui-datepicker-calendar { display: grid; grid-gap: 0.125rem; gap: 0.125rem; grid-template-columns: repeat(7, 1fr); } #ui-datepicker-div.ui-datepicker .ui-datepicker-calendar thead, #ui-datepicker-div.ui-datepicker .ui-datepicker-calendar tbody, #ui-datepicker-div.ui-datepicker .ui-datepicker-calendar tr { display: contents } #ui-datepicker-div.ui-datepicker th { padding:0; color: rgb(var(--swatch-text-tertiary-color)); } #ui-datepicker-div.ui-datepicker td { padding:0; border:0; background-image: none; } #ui-datepicker-div.ui-datepicker td span, #ui-datepicker-div.ui-datepicker td a { --MONO: 1; --CASL: 0; --CRSV: 0; padding: 0.1875rem 0; background-color: rgb(var(--swatch-secondary-color)); background-image: none; box-shadow: inset 0 0 0 0.0625rem rgb(var(--swatch-tertiary-color),0.3625); color: rgb(var(--swatch-text-tertiary-color)); font-family: var(--mono-font); text-align:center; text-decoration:none; } /* ===STANDARD STRUCTURE=== */ hr { display: block; height: 0.0625rem; margin: 1em 0; padding: 0; border: 0; border-top: 0.0625rem solid rgba(var(--swatch-tertiary-color, 66, 66, 72)); } /* ===STYLING=== */ pre, pre * { --MONO: 1; --calt: 0; max-width: 90vw; font-family: var(--mono-font); white-space: pre; font-variation-settings: "wght" var(--mono-wght), "CASL" var(--CASL), "CRSV" var(--CRSV), "MONO" var(--MONO); } pre i, pre i *, pre em, pre em *, pre .italic, pre .italic *, pre [style*="italic"], pre [style*="italic"] *, pre [style*="oblique"], pre [style*="oblique"] * { --slnt: -15; } /* Unsetting Footnoteref styling on Common Theme */ .footnoteref { position: unset; top: unset; vertical-align: unset; } sub, sup, #main-content sub, #main-content sup { position: relative; font-size: 0.75em; } sub, #main-content sub { bottom: -0.25em; vertical-align: sub; } sup, #main-content sup { top: -0.25em; vertical-align: super; } .emph { -webkit-text-emphasis-style: dot; text-emphasis-style: dot; } /* Teletype */ tt { --calt: 0; word-wrap: anywhere; white-space: pre-wrap; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } tt, tt * { --MONO: 1; font-family: var(--mono-font); font-variation-settings: "wght" var(--mono-wght), "CASL" var(--CASL), "CRSV" var(--CRSV), "MONO" var(--MONO); } tt i, tt i *, tt em, tt em *, tt .italic, tt .italic *, tt [style*="italic"], tt [style*="italic"] *, tt [style*="oblique"], tt [style*="oblique"] * { --slnt: -15; } /* ===HEADERS=== */ h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em 0; padding: 0; font-family: var(--title-font); font-weight: revert; line-height: 1.4; font-variant-ligatures: common-ligatures contextual discretionary-ligatures; } h1, h2 { --wght: 800; font-weight: var(--wght); } h3, h4, h5, h6 { --wght: 700; font-weight: var(--wght); } h1 { font-size: 1.5em; } h2 { font-size: 1.25em; } h3 { font-size: 1.1875em; } h4 { font-size: 1.125em; } h5 { font-size: 1.0625em; } h6 { font-size: 1em; } @media only screen and (min-width: 56.25rem) { h1 { font-size: 2em; } h2 { font-size: 1.75em; } h3 { font-size: 1.5375em; } h4 { font-size: 1.3625em; } h5 { font-size: 1.15em; } h6 { font-size: 1em; } } /* ===LISTS=== */ ul { list-style: initial; } ol { margin-left: 0; padding-left: 0; list-style: outside none; } /* Ordered Lists */ #page-content ol { counter-reset: step1 0; } #page-content ol > li { padding-left: 1.25em; } #page-content ol > li:before { content: counter(step1) "."; margin-right: 0.5em; counter-increment: step1; } /* Special Heirarchal Ordered List */ #page-content .heirarch ol ol { counter-reset: step2 0; } #page-content .heirarch ol ol ol { counter-reset: step3 0; } #page-content .heirarch ol ol ol ol { counter-reset: step4 0; } #page-content .heirarch ol ol ol ol ol { counter-reset: step5 0; } #page-content .heirarch ol ol > li:before { content: counter(step1) "." counter(step2); counter-increment: step2; } #page-content .heirarch ol ol ol > li:before { content: counter(step1) "." counter(step2) "." counter(step3); counter-increment: step3; } #page-content .heirarch ol ol ol ol > li:before { content: counter(step1) "." counter(step2) "." counter(step3) "." counter(step4); counter-increment: step4; } #page-content .heirarch ol ol ol ol ol > li:before { content: counter(step1) "." counter(step2) "." counter(step3) "." counter(step4) "." counter(step5); counter-increment: step5; } /* ===ANCHOR LINKS=== */ a { transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1); color: rgb(var(--link-color)); -webkit-text-decoration: underline 0.09375em; text-decoration: underline 0.09375em; -webkit-text-decoration-color: transparent; text-decoration-color: transparent; } a:visited { transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1); color: rgb(var(--visited-link-color)); -webkit-text-decoration: underline 0.09375em; text-decoration: underline 0.09375em; -webkit-text-decoration-color: transparent; text-decoration-color: transparent; } a, a.newpage { background: transparent; } a.newpage { color: rgb(var(--newpage-color)); } a:hover, a:active { transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1); background-color: transparent; color: rgb(var(--hover-link-color)); -webkit-text-decoration: underline 0.09375em; text-decoration: underline 0.09375em; -webkit-text-decoration-color: currentColor; text-decoration-color: currentColor; } a:focus-within { transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1); background-color: transparent; color: rgb(var(--hover-link-color)); -webkit-text-decoration: underline 0.09375em; text-decoration: underline 0.09375em; -webkit-text-decoration-color: currentColor; text-decoration-color: currentColor; } /* BlACK BLOCK ELEMENT */ .bblock, .dblock { display: inline; transition: background-color 2000ms cubic-bezier(0.4, 0, 0.2, 1), color 2000ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--swatch-menubg-black-color)); color: rgb(var(--swatch-text-dark)); text-decoration: none; } div.bblock, div.dblock { display: inline-block; } .dblock:hover, .dblock:active { background-color: rgba(var(--swatch-menubg-black-color),0); text-decoration: none; } .dblock:focus-within { background-color: rgb(var(--swatch-menubg-black-color),0); text-decoration: none; } .bblock:hover, .bblock:active { background-color: rgb(var(--swatch-menubg-black-color)); color: rgb(var(--swatch-primary-darkest)); text-decoration: none; } .bblock:focus-within { background-color: rgb(var(--swatch-menubg-black-color)); color: rgb(var(--swatch-primary-darkest)); text-decoration: none; } .bblock::-moz-selection { color: rgb(var(--swatch-menutxt-light-color)) } .bblock::selection { color: rgb(var(--swatch-menutxt-light-color)) } /* ===CODE FORMATTING=== */ .code { --MONO: 1; padding: 1em; border-width: 0.0625rem; border-style: dashed; border-color: rgba(var(--swatch-border-color), 0.25); background-color: rgb(var(--swatch-secondary-color, 244, 244, 244)); font-family: var(--mono-font); word-break: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } .code * { --MONO: 1; --calt: 0; max-width: 90vw; font-family: var(--mono-font); } .code, .code * { font-variation-settings: "wght" var(--mono-wght), "slnt" var(--slnt), "CASL" var(--CASL), "CRSV" var(--CRSV), "MONO" var(--MONO); } .code i, .code i *, .code em, .code em *, .code .italic, .code .italic *, .code [style*="italic"], .code [style*="italic"] *, .code [style*="oblique"], .code [style*="oblique"] * { --slnt: -15; } .code p, .code pre { margin: 0; } .code pre { white-space: pre-wrap; } /* Ruby Elements from Sigma-9 */ .ruby, ruby { display: inline-table; height: 1em; line-height: 1; text-align: center; vertical-align: text-bottom; white-space: nowrap; } .rt, rt { display: table-header-group; font-size: .6em; line-height: 1.1; text-align: center; white-space: nowrap; } /* ===BROWSER SPECIFIC FIXES=== */ /* 1% Height Firefox Fixes */ .page-options-bottom, .owindow .title, .math-equation, .bibitem, .thread-container .post .long .options { height: auto; } /* ===MOBILE FORMATTING=== */ @media only screen and (max-width: 56.25rem) { body { font-size: var(--min-font-size); font-size: var(--base-font-size); } .page-options-bottom { height: initial; } .page-options-bottom a { padding: 0 0.25rem; } table.form td, table.form th { padding: 0; float: left; } td.name { width: 15em; } input[type="text"], textarea { --base-font-size: 1rem; } } /* ===ANIMATIONS=== */ @-webkit-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes slide-in { from { transform: translateY(1rem) translateX(1rem); } to { transform: translateY(0) translateX(0); } } @keyframes slide-in { from { transform: translateY(1rem) translateX(1rem); } to { transform: translateY(0) translateX(0); } } @-webkit-keyframes slide-down { from { max-height: 0; } to { max-height: var(--header-height-on-desktop); } } @keyframes slide-down { from { max-height: 0; } to { max-height: var(--header-height-on-desktop); } } @-webkit-keyframes lift-in { from { box-shadow: 0 0 0 0 rgba(var(--swatch-alternate-color), 0.25), inset 0 0 0 0.0625rem rgb(var(--swatch-primary-darkest)); } to { box-shadow: 0.25rem 0.125rem 0.5rem 0 rgba(var(--swatch-alternate-color),0.25), inset 0 0 0 0.0625rem rgb(var(--swatch-primary-darkest)); } } @keyframes lift-in { from { box-shadow: 0 0 0 0 rgba(var(--swatch-alternate-color), 0.25), inset 0 0 0 0.0625rem rgb(var(--swatch-primary-darkest)); } to { box-shadow: 0.25rem 0.125rem 0.5rem 0 rgba(var(--swatch-alternate-color),0.25), inset 0 0 0 0.0625rem rgb(var(--swatch-primary-darkest)); } } /* WIKIDOT SPECIFIC STRUCTURE ============================= */ /* Structural Elements specific to Wikidot's functionality /* ===DIRECTORY=== 1. =CONTAINER & CONTAINER-WRAP 1.1 =MAIN-CONTENT 1.1.1 =PAGE-TITLE 1.1.2 =BREADCRUMBS 1.1.3 =PAGE-CONTENT 1.1.4 =PAGE INFO & PAGE WATCH 1.1.6 =PAGE TAGS 1.1.6 =PAGE OPTIONS BUTTONS 1.2 =FOOTER BOX 1.3 =LICENSE BOX 2 =ACTION AREA 2.1 =EDIT AREA 2.1.1 =EDITOR CAPTCHA FIELDS 2.1.2 =EDITOR TITLE BOX 2.1.3 =EDITOR TOOLBAR 2.3.1 =TOOLBAR ICONS 2.1.4 =EDITOR TEXTAREA 2.1.5 =EDITOR HELP LINKS 2.1.6 =EDITOR TEXTAREA HEIGHT BUTTONS 2.1.7 =EDITOR DESCRIPTION BOX 2.1.7.1 =DESCRIPTION CHAR COUNT 2.1.8 =EDITOR LOCK INFO 2.1.9 =EDITOR NOTIFY CHECKBOX 2.1.10 =EDITOR BUTTONS 2.2 =WHO RATED AREA 2.3 =PAGE TAGS ACTION 2.4 =PAGE HISTORY 2.5 =FILES UPLOAD 2.7 =SITE TOOLS 2.7.1 =WANTED PAGES 2.7.2 =ORPHANED/DRAFT PAGES 2.8 =EDIT META 2.9 =WATCHERS/LOCK/RENAME/DELETE/SOURCE 4. =MODALS 5. =FORUM 6. =MOBILE FORMATTING =============== */ /* ===CONTAINER & CONTAINER WRAP=== */ #container { display: grid; grid-template-areas: "header" "content-wrap" "footer" "license"; grid-template-rows: auto; width: 100%; height: 100%; margin: 0; } #container, #content-wrap { padding: 0; } #content-wrap { display: grid; position: initial; grid-area: content-wrap; grid-gap: 0.5rem; grid-gap: 0.5rem; grid-template-areas: "side-bar . content ."; grid-template-columns: /* Sidebar Width */ var(--sidebar-width-on-desktop) /* Space Between Sidebar and Content Width */ calc((((100vw - (100vw - 100%)) - var(--body-width-on-desktop)) - (var(--sidebar-width-on-desktop)) * 3) / 2) /* Content Width */ 1fr /* Space Between Content and Scrollbar Width */ calc(((100vw - (100vw - 100%)) - (var(--body-width-on-desktop) + (var(--sidebar-width-on-desktop)))) / 2); width: calc(100vw - (100vw - 100%)); height: auto; min-height: calc(100vh - calc(var(--final-header-height-on-desktop))); margin: 0 auto; padding: 0; gap: 0.5rem; gap: 0.5rem; } /* ===MAIN-CONTENT=== */ #main-content { display: grid; grid-area: content; grid-auto-rows: -webkit-min-content; grid-auto-rows: min-content; grid-template-areas: "action-area-top action-area-top action-area-top action-area-top action-area-top action-area-top" "page-title page-title page-title page-title page-title page-title" "breadcrumbs breadcrumbs breadcrumbs breadcrumbs breadcrumbs breadcrumbs" "page-content page-content page-content page-content page-content page-content" "page-info-break page-info-break page-info-break page-info-break page-info-break page-info-break" ". . pwatch pwatch pwatch pwatch" ". . pinfo pinfo pinfo pinfo" "page-tags page-tags page-tags page-tags page-tags page-tags" "options-1 options-1 options-1 options-1 options-1 options-1" "options-2 options-2 options-2 options-2 options-2 options-2" "pbottom pbottom pbottom pbottom pbottom pbottom" "action-area-btm action-area-btm action-area-btm action-area-btm action-area-btm action-area-btm"; grid-template-columns: repeat(6, 1fr); max-width: min(90vw, var(--body-width-on-desktop)); margin: 0 auto; padding: 2rem 1rem; padding-right: 0; padding-left: 0; background-color: transparent; } /* Mobile Chrome Width Fix */ @supports (not (-webkit-hyphens:none)) and (not (-moz-appearance:none)) and (list-style-type:"*") { @media only screen and (max-width: 56.25rem) { #main-content > * { max-width: min(90vw,var(--body-width-on-desktop)); } } } #action-area-top { grid-area: action-area-top; width: var(--body-width-on-desktop); } /* ===PAGE-TITLE=== */ #page-title, .meta-title { --wght: 700; display: flex; align-items: center; min-height: 1em; margin: 0.5em 0 1em 0; padding: 0; border: none; color: rgb(var(--swatch-text-general)); font-family: var(--title-font); font-size: 1.5em; font-weight: var(--wght); line-height: 1; text-align: left; font-variant-ligatures: common-ligatures contextual discretionary-ligatures; } @media only screen and (min-width: 56.25rem) { #page-title, .meta-title { font-size: 2em; } } #page-title { grid-area: page-title; } #page-title::after, .meta-title::after { content: ""; flex-grow: 1; height: 0.0625rem; margin: auto auto auto 1.25rem; background: rgb(var(--swatch-tertiary-color)); } /* ===BREADCRUMBS=== */ #breadcrumbs, .pseudocrumbs { display: flex; position: relative; grid-area: breadcrumbs; flex-wrap: wrap; align-items: center; justify-content: flex-start; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: -1em 0 1em; padding: 0 0.75em 0 0; font-family: var(--UI-font); font-size: 0.85em; line-height: 2; } #breadcrumbs a, .pseudocrumbs a, #breadcrumbs a:visited, .pseudocrumbs a:visited { display: flex; position: relative; z-index: 2; margin-right: 0.75em; padding: 0 0.5em; transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1); } #breadcrumbs a:hover, .pseudocrumbs a:hover, #breadcrumbs a:active, .pseudocrumbs a:active { color: rgb(var(--swatch-text-secondary-color)); text-decoration: none; } #breadcrumbs a:focus-within, .pseudocrumbs a:focus-within { color: rgb(var(--swatch-text-secondary-color)); text-decoration: none; } #breadcrumbs a::before, .pseudocrumbs a::before, #breadcrumbs a:visited::before, .pseudocrumbs a:visited::before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; transform: skew(-25deg); transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); background: transparent; box-shadow: 0.0625rem 0.0625rem 0 0 rgba(var(--swatch-primary),1), 0.25rem 0.0625rem 0 0 rgba(var(--background-gradient-color),0.7), 0.25rem 0.0625rem 0 0 rgba(var(--swatch-background),1), 0.3125rem 0.0625rem 0 0 rgba(var(--swatch-primary),1); } #breadcrumbs a:hover::before, .pseudocrumbs a:hover::before, #breadcrumbs a:active::before, .pseudocrumbs a:active::before { background-color: rgb(var(--swatch-primary)); box-shadow: 0 0 0 0.25rem rgba(var(--swatch-primary),1), 0 0 0 0 rgba(var(--background-gradient-color),0), 0 0 0 0 rgba(var(--swatch-background),0), 0 0 0 0 rgba(var(--swatch-primary),0); } #breadcrumbs a:focus-within::before, .pseudocrumbs a:focus-within::before { background-color: rgb(var(--swatch-primary)); box-shadow: 0 0 0 0.25rem rgba(var(--swatch-primary),1), 0 0 0 0 rgba(var(--background-gradient-color),0), 0 0 0 0 rgba(var(--swatch-background),0), 0 0 0 0 rgba(var(--swatch-primary),0); } /* ===PAGE-CONTENT=== */ #page-content { grid-area: page-content; min-height: calc(100vh - var(--final-header-height-on-desktop)); } #page-content, #page-content > * { max-width: min(90vw, var(--body-width-on-desktop)); } /* ===PAGE INFO & PAGE WATCH=== */ #page-info-break { grid-area: page-info-break; } #page-options-container { display: contents; font-family: var(--UI-font); } div#page-info { grid-area: pinfo; align-self: flex-end; height: -webkit-min-content; height: -moz-min-content; height: min-content; overflow: visible; font-size: 0.75em; text-align: right; } div#page-info .odate { font-size: 0.85em; } div.page-watch-options { grid-area: pwatch; align-self: flex-end; height: -webkit-min-content; height: -moz-min-content; height: min-content; margin-top: 1em; overflow: visible; font-size: 0.85em; line-height: 1 } div.page-watch-options a, div.page-watch-options a:visited { --hover-link-color: var(--swatch-text-secondary-color); --wght: calc(var(--ui-wght) + 200); margin: -0.15em 0; padding: 0.15em; transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); box-shadow: inset 0 0 0 0 rgb(var(--swatch-primary)); font-weight: var(--wght); -webkit-box-decoration-break: clone; box-decoration-break: clone; -webkit-text-decoration: underline dotted 0.09375rem; text-decoration: underline dotted 0.09375rem; } div.page-watch-options a:hover, div.page-watch-options a:active { --wght: calc(var(--ui-hvr-wght) + 200); box-shadow: inset -30vw 0 0 0 rgb(var(--swatch-primary)); color: rgb(var(--swatch-text-secondary-color)); font-weight: var(--wght); text-decoration: none; } div.page-watch-options a:focus-within { --wght: calc(var(--ui-hvr-wght) + 200); box-shadow: inset -30vw 0 0 0 rgb(var(--swatch-primary)); color: rgb(var(--swatch-text-secondary-color)); font-weight: var(--wght); text-decoration: none; } /* ===PAGE TAGS=== */ #main-content .page-tags { display: block; position: relative; grid-area: page-tags; width: 100%; margin: 0.2rem 0 0 0; padding: 0.2rem 0 0 0; box-shadow: 0 -0.125rem 0 0 rgb(var(--pagetags-title-bg)); font-family: var(--UI-font); font-size: 0.9em; justify-self: flex-start; } #main-content .page-tags::before { --wght: var(--ui-hvr-wght); content: "TAGS\0021b4"; position: absolute; top: -2em; left: 0; height: 1.5em; padding: 0.25em; background-color: rgb(var(--pagetags-title-bg)); color: rgb(var(--pagetags-title-text)); font-size: 0.8em; font-weight: var(--wght); } #main-content .page-tags span { --clip-path: polygon( 0 0, calc(100% - 0.0625rem) 0, calc(100% - 0.0625rem) 100%, 0 100% ); display: flex; position: relative; flex-direction: row; flex-wrap: wrap; justify-content: space-between; width: auto; height: 100%; padding: 0; font-size: 0.9em; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #main-content .page-tags span::after { content: " "; flex-grow: 2; } #main-content .page-tags span a:not([href^="/system:page-tags/tag/_"]), #main-content .page-tags span a:visited:not([href^="/system:page-tags/tag/_"]) { --wght: calc(var(--ui-wght)); display: inline-flex; position: relative; z-index: 1; flex-grow: 0; align-items: center; justify-content: center; margin: 0.2em -0.2em 0.2em 0.2em; padding: 0.1em 0.4em 0.1em 0.3em; overflow: hidden; transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); font-weight: var(--wght); line-height: 1; --link-color: var(--pagetags-text-color); --hover-link-color: var(--pagetags-text-hover-color); } #main-content .page-tags span a:not([href^="/system:page-tags/tag/_"]):not(:last-child), #main-content .page-tags span a:visited:not([href^="/system:page-tags/tag/_"]):not(:last-child) { border-right: 0.0625rem dotted rgba(var(--pagetags-text-color), 0.5); } #main-content .page-tags span a:not([href^="/system:page-tags/tag/_"])::before, #main-content .page-tags span a:visited:not([href^="/system:page-tags/tag/_"])::before { --clip-path: polygon( 0 0, 0 0, 0 100%, 0 100% ); content: " "; position: absolute; z-index: -1; top: 0; left: -0.5%; width: 101%; height: 101%; transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; background-color: rgb(var(--pagetags-text-hover-bg-color)); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #main-content .page-tags span a:not([href^="/system:page-tags/tag/_"]):hover, #main-content .page-tags span a:not([href^="/system:page-tags/tag/_"]):active { --wght: calc(var(--ui-hvr-wght)); transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); font-weight: var(--wght); text-decoration: none; } #main-content .page-tags span a:not([href^="/system:page-tags/tag/_"]):focus-within { --wght: calc(var(--ui-hvr-wght)); transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); font-weight: var(--wght); text-decoration: none; } #main-content .page-tags span a:not([href^="/system:page-tags/tag/_"]):hover::before, #main-content .page-tags span a:not([href^="/system:page-tags/tag/_"]):active::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #main-content .page-tags span a:not([href^="/system:page-tags/tag/_"]):focus-within::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } /* Hiding Hidden Tags */ #main-content .page-tags a[href^="/system:page-tags/tag/_"] { display: none; } /* ===PAGE OPTIONS BUTTONS=== */ div#page-options-bottom { position: relative; grid-area: options-1; padding-top: 0.75em; } div#page-options-bottom-2 { grid-area: options-2; } div#page-options-area-bottom { grid-area: pbottom; } div[id*="page-options-bottom"] { --wght: var(--ui-wght); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; max-width: min(90vw, var(--body-width-on-desktop)); font-family: var(--UI-font); font-size: var(--base-font-size); font-weight: var(--wght); text-align: left; white-space: nowrap; --icon-size: 1.5em; --icon-size: clamp(1.5em, 5vmin, 2em); } div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form)>a.btn { --button-padding: calc(var(--icon-size) / 8); flex-basis: 5rem; height: 1.5em; margin: 0 0.5ch 1ch 0.5ch; padding: var(--button-padding); padding-left: calc(var(--icon-size) + 0.5em); box-shadow: 0 0 0 0 rgb(var(--ui-button-hover-outline)), inset var(--icon-size) 0 0 0 rgb(var(--ui-icon-bg)); line-height: 1.5; } @media only screen and (max-width: 56.25rem) { div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form)>a.btn { --button-padding: calc(var(--icon-size) / 4); } } div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form)>a.btn:hover, div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form)>a.btn:active { box-shadow: 0 0 0 0.125rem rgb(var(--ui-button-hover-outline)), inset var(--icon-size) 0 0 0 rgb(var(--ui-icon-hover-bg)); } div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form)>a.btn:focus-within { box-shadow: 0 0 0 0.125rem rgb(var(--ui-button-hover-outline)), inset var(--icon-size) 0 0 0 rgb(var(--ui-icon-hover-bg)); } div[id*="page-options-bottom"]>a>* { text-indent: 0; } div[id*="page-options-bottom"]>a::after { content: " "; position: absolute; top: 50%; left: 0; width: var(--icon-size); height: var(--icon-size); transform: translateY(-50%); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--ui-icon-color)); -webkit-mask-image: var(--button-icon); mask-image: var(--button-icon); -webkit-mask-size: calc(var(--icon-size) - 0.5em); mask-size: calc(var(--icon-size) - 0.5em); -webkit-mask-position: center center; mask-position: center center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } div[id*="page-options-bottom"]>a:hover::after, div[id*="page-options-bottom"]>a:active::after { background-color: rgb(var(--ui-icon-hover-color)); } div[id*="page-options-bottom"]>a:focus-within::after { background-color: rgb(var(--ui-icon-hover-color)); } div[id*="page-options-bottom"]>a#edit-button { --button-icon: var(--edit-mask); } div[id*="page-options-bottom"]>a#pagerate-button, div[id*="page-options-bottom"]>a#scpper-pagerate-button { --button-icon: var(--pagerate-mask); } div[id*="page-options-bottom"]>a#tags-button { --button-icon: var(--tags-mask); } div[id*="page-options-bottom"]>a#discuss-button { --button-icon: var(--discuss-mask); } div[id*="page-options-bottom"]>a#history-button, div[id*="page-options-bottom"]>a#scpper-history-button { --button-icon: var(--history-mask); } div[id*="page-options-bottom"]>a#files-button { --button-icon: var(--files-mask); } div[id*="page-options-bottom"]>a#print-button { --button-icon: var(--print-mask); } div[id*="page-options-bottom"]>a#site-tools-button { --button-icon: var(--site-tools-mask); } div[id*="page-options-bottom"]>a#more-options-button { --button-icon: var(--more-options-mask); } div[id*="page-options-bottom"]>a#edit-sections-button { --button-icon: var(--edit-sections-mask); } div[id*="page-options-bottom"]>a#edit-append-button { --button-icon: var(--append-mask); } div[id*="page-options-bottom"]>a#edit-meta-button { --button-icon: var(--edit-meta-mask); } div[id*="page-options-bottom"]>a#watchers-button { --button-icon: var(--watchers-mask); } div[id*="page-options-bottom"]>a#backlinks-button { --button-icon: var(--backlinks-mask); } div[id*="page-options-bottom"]>a#view-source-button { --button-icon: var(--view-source-mask); } div[id*="page-options-bottom"]>a#parent-page-button { --button-icon: var(--parent-page-mask); } div[id*="page-options-bottom"]>a#page-block-button { --button-icon: var(--lock-page-mask); } div[id*="page-options-bottom"]>a#rename-move-button { --button-icon: var(--rename-mask); } div[id*="page-options-bottom"]>a#delete-button { --button-icon: var(--delete-mask); } /* ===FOOTER BOX=== */ #footer { --link-color: var(--footer-link-color); --visited-link-color: var(--footer-link-color); --hover-link-color: var(--footer-link-hover-color); display: flex !important; box-sizing: border-box; grid-area: footer; flex-wrap: wrap; align-items: center; justify-content: center; margin: 0; padding: 0.25em 0; background: rgb(var(--footer-bg-color)); color: rgb(var(--footer-text-color)); font-family: var(--UI-font); font-size: 0.75em; line-height: 1; white-space: nowrap; } #footer .options { display: grid !important; grid-template-columns: repeat(9, -webkit-min-content); grid-template-columns: repeat(9, min-content); align-items: center; justify-content: center; padding: 0 1.5em 0 0; color: transparent; } #footer .options, #footer .options * { white-space: nowrap; } #footer .options a, #footer .options a:visited { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 1em; box-shadow: 0.0625rem 0 0 0 rgb(var(--swatch-text-secondary-color)); } #footer a, #footer a:visited { --wght: var(--ui-wght); display: inline-flex; position: relative; z-index: 1; align-items: center; justify-content: center; margin: 0.2em; padding: 0.2em; overflow: hidden; transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); color: rgb(var(--link-color)); font-weight: var(--wght); line-height: 1; } #footer a::before { --clip-path: polygon( 0 0, 0 0, 0 100%, 0 100% ); content: " "; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; background-color: rgb(var(--footer-link-hover-bg-color)); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #footer a:hover, #footer a:active { --wght: calc(var(--ui-hvr-wght)); transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); color: rgb(var(--hover-link-color)); font-weight: var(--wght); text-decoration: none; } #footer a:focus-within { --wght: calc(var(--ui-hvr-wght)); transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); color: rgb(var(--hover-link-color)); font-weight: var(--wght); text-decoration: none; } #footer a:hover::before, #footer a:active::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #footer a:focus-within::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } /* ===LICENSE BOX=== */ #license-area { --link-color: var(--license-link-color); --visited-link-color: var(--license-link-color); --hover-link-color: var(--license-link-hover-color); display: flex; position: relative; box-sizing: border-box; grid-area: license; flex-wrap: wrap; align-items: center; align-self: flex-end; justify-content: center; width: 100%; padding: 0.5em; background-color: rgb(var(--license-bg-color)); color: rgb(var(--license-text-color)); font-family: var(--UI-font); line-height: 1; } #license-area a, #license-area a:visited { --wght: calc(var(--ui-wght)); display: inline-flex; position: relative; z-index: 1; align-items: center; justify-content: center; margin: 0.2em; padding: 0.2em; overflow: hidden; transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-decoration 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: text-decoration 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: text-decoration 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-decoration 150ms cubic-bezier(0.4, 0, 0.2, 1); font-weight: var(--wght); line-height: 1; -webkit-text-decoration: underline 0.125em rgb(var(--swatch-primary)); text-decoration: underline 0.125em rgb(var(--swatch-primary)); } #license-area a::before { --clip-path: polygon( 0 0, 0 0, 0 100%, 0 100% ); content: " "; position: absolute; z-index: -1; top: 0; left: -0.5%; width: 101%; height: 101%; transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; background-color: rgb(var(--license-link-hover-bg-color)); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #license-area a:hover, #license-area a:active { --wght: calc(var(--ui-hvr-wght)); transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); font-weight: var(--wght); text-decoration: none; } #license-area a:focus-within { --wght: calc(var(--ui-hvr-wght)); transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); font-weight: var(--wght); text-decoration: none; } #license-area a:hover::before, #license-area a:active::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #license-area a:focus-within::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } /* ===ACTION AREA=== */ #action-area { grid-area: action-area-btm; padding: 2em 0 1em; text-align: center; } #action-area h1, #action-area h2, #action-area h3, #action-area h4 { --wght: 700; display: flex; align-items: center; min-height: 1em; margin: 0.5em 0 0.25em 0; padding: 0; border: none; color: rgb(var(--swatch-text-general)); font-family: var(--title-font); font-size: 1.25em; font-weight: var(--wght); line-height: 1; text-align: left; font-variant-ligatures: common-ligatures contextual discretionary-ligatures; } #action-area h1 { font-size: 1.1875em; } #action-area h2 { font-size: 1.125em; } #action-area h3 { font-size: 1.0625em; } #action-area h4 { font-size: 1em; } @media only screen and (min-width: 56.25rem) { #action-area h1 { font-size: 1.5375em; } #action-area h2 { font-size: 1.3625em; } #action-area h3 { font-size: 1.15em; } #action-area h4 { font-size: 1em; } } #action-area h1::after, #action-area h2::after, #action-area h3::after, #action-area h4::after { content: ""; flex-grow: 1; height: 0.0625rem; margin: auto auto auto 1.25rem; background: rgb(var(--swatch-tertiary-color)); } div#action-area>a.btn-danger[href="javascript:;"], #action-area a.action-area-close { margin-top: 0.5em; } #action-area>div:not([style*="center"]):first-of-type { padding-top: 2rem; border: none; } #action-area a.action-area-close { --wght: var(--ui-wght); display: inline-flex; position: relative; z-index: 2; justify-content: center; min-width: 5em; padding: 0.25em; overflow: hidden; transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); border: 0.0625rem solid rgba(var(--swatch-border-color), 0.15); outline: 0 solid rgb(var(--swatch-primary)); background-color: rgba(var(--swatch-primary-darker), 0.05); box-shadow: 0 0 0 0 rgb(var(--swatch-primary)); color: rgb(var(--swatch-text-tertiary-color)); font-family: var(--UI-font); font-weight: var(--wght); will-change: box-shadow, color, background-color, font-weight, font-variation-settings; } #action-area a.action-area-close:hover, #action-area a.action-area-close:active { --wght: var(--ui-hvr-wght); outline: 0 solid rgb(var(--swatch-primary)); background-color: rgba(var(--swatch-primary), 1); box-shadow: 0 0 0 0.125rem rgb(var(--swatch-primary)); color: rgb(var(--swatch-text-secondary-color, 252, 252, 252)); font-weight: var(--wght); text-decoration: none; cursor: pointer; } #action-area a.action-area-close:focus-within { --wght: var(--ui-hvr-wght); outline: 0 solid rgb(var(--swatch-primary)); background-color: rgba(var(--swatch-primary), 1); box-shadow: 0 0 0 0.125rem rgb(var(--swatch-primary)); color: rgb(var(--swatch-text-secondary-color, 252, 252, 252)); font-weight: var(--wght); text-decoration: none; cursor: pointer; } /* ===EDIT AREA=== */ form#edit-page-form:not(.data-form) { display: grid; grid-template-areas: "pageid . captcha-1 captcha-1 captcha-2 captcha-2" "title-txt title-txt . . . ." "title-box title-box title-box title-box title-box title-box" "toolbar toolbar toolbar toolbar toolbar toolbar" "editbox editbox editbox editbox editbox editbox" "edit-help edit-help edit-help edit-help edit-help text-resize" "descrip descrip descrip descrip descrip descrip" "descsub descsub descsub descsub descsub descsub" "info-lock info-lock info-lock info-lock info-lock info-lock" "nonotif nonotif nonotif nonotif nonotif nonotif" "captcha-3 captcha-3 captcha-3 captcha-3 captcha-3 captcha-3" "editbuttons editbuttons editbuttons editbuttons editbuttons editbuttons"; grid-template-columns: repeat(6, 1fr); padding: 0; background-color: transparent; box-shadow: -0.0625rem 0 0 0 rgba(var(--swatch-tertiary-color), 0.5), 0.0625rem 0 0 0 rgba(var(--swatch-tertiary-color), 0.5), 0 0.0625rem 0 0 rgba(var(--swatch-tertiary-color), 0.5); font-size: 0.8125rem; font-size: clamp(0.8125rem, 2.5vw, var(--base-font-size)); } form#edit-page-form, form#edit-page-form * { box-sizing: border-box; } form#edit-page-form, form#edit-page-form *:not(#edit-page-textarea) { max-width: var(--body-width-on-desktop); } form#edit-page-form *:not(input):not(textarea) { font-family: var(--UI-font); } form#edit-page-form:not(.data-form)>table, form#edit-page-form:not(.data-form)>table tbody, form#edit-page-form:not(.data-form)>table tr, form#edit-page-form:not(.data-form)>table:not(.form) td { display: contents; } /* ===EDITOR CAPTCHA FIELDS=== */ form#edit-page-form #page_id { grid-area: pageid; } form#edit-page-form #recaptcha_challenge_field { grid-area: captcha-1; } form#edit-page-form #recaptcha_response_field { grid-area: captcha-2; } form#edit-page-form #edit-page-captcha { grid-area: captcha-3; } /* ===EDITOR TITLE BOX=== */ form#edit-page-form table.form:first-of-type td:first-of-type { --wght: calc(var(--ui-wght) + 100); grid-area: title-txt; width: -webkit-max-content; width: -moz-max-content; width: max-content; margin: calc(-0.75em + 0.0625rem) 1rem -0.75em 1rem; padding: 0 0.25em; transform: translateY(0); transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); outline: 0 solid rgb(var(--swatch-primary)); background-color: rgba(var(--swatch-background), 1); box-shadow: 0 0 0 0 rgb(var(--swatch-primary)); color: rgb(var(--swatch-text-general)); font-size: 0.8em; font-weight: var(--wght); text-transform: uppercase; will-change: box-shadow, color, background-color, transform, font-weight, font-variation-settings; } form#edit-page-form table.form:first-of-type tr:focus-within td:first-of-type { --wght: calc(var(--ui-hvr-wght) + 100); transform: translateY(-0.15625rem); outline: 0 solid rgb(var(--swatch-primary)); background-color: rgba(var(--swatch-primary), 1); box-shadow: 0 0 0 0.15625rem rgb(var(--swatch-primary)); color: rgb(var(--swatch-background)); font-weight: var(--wght); } /* Template Dropdown Styling */ form#edit-page-form table.form:first-of-type tr:not(:only-of-type):first-of-type > td:last-of-type { grid-column: 1/span 5; } form#edit-page-form table.form:first-of-type tr:not(:only-of-type):last-of-type > td:last-of-type { display: grid; grid-column: 6/span 1; align-items: center; justify-content: center; padding: 0 1em 0 0; } form#edit-page-form table.form:first-of-type tr:not(:only-of-type):last-of-type > td:first-of-type { grid-column: 6/span 1; } form#edit-page-form #page-templates { --wght: var(--ui-wght); padding: 0.25rem; transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); border: none; border-radius: 0.25rem; outline: 0 solid rgb(var(--swatch-primary)); box-shadow: inset 0 0 0 0.0625rem rgb(var(--swatch-tertiary-color),0.3625); /* Overwrite Wikidot Inline Styling */ will-change: box-shadow, background-color, font-weight, font-variation-settings; } form#edit-page-form #page-templates option { color: rgb(var(--swatch-menutxt-light-color)); } form#edit-page-form #page-templates:focus { --wght: var(--ui-hvr-wght); border: none; outline: 0 solid rgb(var(--swatch-primary)); background-color: rgba(var(--swatch-secondary-color), 0); box-shadow: 0 0 0 0.125rem rgb(var(--swatch-primary)); } form#edit-page-form #page-templates:focus-visible { --wght: var(--ui-hvr-wght); border: none; outline: 0 solid rgb(var(--swatch-primary)); background-color: rgba(var(--swatch-secondary-color), 0); box-shadow: 0 0 0 0.125rem rgb(var(--swatch-primary)); } form#edit-page-form #page-templates:focus-within { --wght: var(--ui-hvr-wght); border: none; outline: 0 solid rgb(var(--swatch-primary)); background-color: rgba(var(--swatch-secondary-color), 0); box-shadow: 0 0 0 0.125rem rgb(var(--swatch-primary)); } form#edit-page-form table.form:first-of-type tr:focus-within td:first-of-type { --wght: calc(var(--ui-hvr-wght) + 100); transform: translateY(-.15625rem); outline: 0 solid rgb(var(--swatch-primary)); background-color: rgba(var(--swatch-primary),1); box-shadow: 0 0 0 .15625rem rgb(var(--swatch-primary)); color: rgb(var(--swatch-background)); font-weight: var(--wght); } form#edit-page-form table.form:first-of-type td:last-of-type { grid-area: title-box; box-shadow: 0 -0.0625em 0 0 rgba(var(--swatch-tertiary-color), 0.5); } form#edit-page-form table.form:first-of-type td:last-of-type input { --wght: var(--ui-wght); width: calc(100% - 2em); margin: 0.5em 1rem; padding: 0.25em; transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); border: none; outline: 0 solid rgb(var(--swatch-primary)); box-shadow: 0 0 0 0 rgb(var(--swatch-primary)); font-size: 1.2em !important; font-weight: var(--wght); /* Overwrite Wikidot Inline Styling */ will-change: box-shadow, background-color, font-weight, font-variation-settings; } form#edit-page-form table.form:first-of-type td:last-of-type input:not(:-moz-placeholder-shown) { background-color: rgba(var(--swatch-primary-darker), 0.05); } form#edit-page-form table.form:first-of-type td:last-of-type input:not(:placeholder-shown) { background-color: rgba(var(--swatch-primary-darker), 0.05); } form#edit-page-form table.form:first-of-type td:last-of-type input:-moz-placeholder-shown { background-color: rgba(var(--swatch-primary-darker), 0.2); } form#edit-page-form table.form:first-of-type td:last-of-type input:placeholder-shown { background-color: rgba(var(--swatch-primary-darker), 0.2); } form#edit-page-form table.form:first-of-type td:last-of-type input:focus { --wght: var(--ui-hvr-wght); border: none; outline: 0 solid rgb(var(--swatch-primary)); background-color: rgba(var(--swatch-secondary-color), 0); box-shadow: 0 0 0 0.125em rgb(var(--swatch-primary)); font-weight: var(--wght); } form#edit-page-form table.form:first-of-type td:last-of-type input:focus-within { --wght: var(--ui-hvr-wght); border: none; outline: 0 solid rgb(var(--swatch-primary)); background-color: rgba(var(--swatch-secondary-color), 0); box-shadow: 0 0 0 0.125em rgb(var(--swatch-primary)); font-weight: var(--wght); } form#edit-page-form table.form:first-of-type td:last-of-type input:focus-visible { --wght: var(--ui-hvr-wght); border: none; outline: 0 solid rgb(var(--swatch-primary)); background-color: rgba(var(--swatch-secondary-color), 0); box-shadow: 0 0 0 0.125em rgb(var(--swatch-primary)); font-weight: var(--wght); } /* ===EDITOR TOOLBAR=== */ form#edit-page-form .wd-editor-toolbar-panel { --icon-size: 1.5em; --icon-size: clamp(1.5em, 5.75vw, calc((var(--body-width-on-desktop) - 6em)/22)); display: grid; position: relative; grid-area: toolbar; grid-auto-columns: var(--icon-size); grid-auto-flow: row; grid-auto-rows: var(--icon-size); grid-gap: 0.125em; gap: 0.125em; grid-template-areas: "header-h1 bold-txt italic-txt underline-txt strike-txt super-txt sub-txt raw-txt teletype-txt . ordered-list unordered-list increment-list decrement-list . quote-block hr-txt div-block code-block code-wizard html-block create-table" "url-txt url-wizard page-link-txt page-link-wizard image-block image-wizard . create-footnote create-toc definition-list bibliography bib-cite clear-all-fl . math-block math-inline equation-ref . . . . ."; grid-template-columns: repeat(auto-fit, minmax(1fr, var(--icon-size))); align-items: center; justify-content: space-evenly; width: 100%; height: 100%; margin: 0; padding: 0 1em; background-color: rgb(var(--swatch-background)); box-shadow: 0 -0.0625rem 0 0 rgb(var(--swatch-tertiary-color)); } @media only screen and (max-width: 30rem), (orientation: portrait) { form#edit-page-form .wd-editor-toolbar-panel { grid-template-areas: "header-h1 bold-txt italic-txt underline-txt strike-txt super-txt sub-txt raw-txt teletype-txt . ordered-list unordered-list increment-list decrement-list" "quote-block hr-txt div-block code-block code-wizard html-block create-table . url-txt url-wizard page-link-txt page-link-wizard image-block image-wizard" ". . create-footnote create-toc definition-list bibliography bib-cite clear-all-fl . math-block math-inline equation-ref . ."; justify-content: center; } } form#edit-page-form .wd-editor-toolbar-panel div { display: contents; } form#edit-page-form .wd-editor-toolbar-panel li.hseparator { display: none; } form#edit-page-form .wd-editor-toolbar-panel div>ul { display: contents; } form#edit-page-form .wd-editor-toolbar-panel div>ul>li { position: relative; height: 100%; margin: 0; } form#edit-page-form .wd-editor-toolbar-panel div>ul>li>ul { --clip-path: polygon( 0 0, 0 0, 0 100%, 0 100% ); display: grid; top: 0; left: var(--icon-size); grid-auto-columns: var(--icon-size); grid-auto-flow: column; grid-template-columns: repeat(auto-fit, var(--icon-size)); height: var(--icon-size); padding-left: 0; overflow: hidden; transition: box-shadow 100ms cubic-bezier(0.4, 0, 0.2, 1) 250ms, padding-left 100ms cubic-bezier(0.4, 0, 0.2, 1) 250ms, -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0.4, 0, 0.2, 1) 250ms, padding-left 100ms cubic-bezier(0.4, 0, 0.2, 1) 250ms; transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0.4, 0, 0.2, 1) 250ms, padding-left 100ms cubic-bezier(0.4, 0, 0.2, 1) 250ms, -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); border: none; background-color: rgb(var(--swatch-background)); box-shadow: inset 0 0 0 0 rgb(var(--swatch-tertiary-color)); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } form#edit-page-form .wd-editor-toolbar-panel div>ul>li:hover>ul, form#edit-page-form .wd-editor-toolbar-panel div>ul>li:active>ul, form#edit-page-form .wd-editor-toolbar-panel div>ul>li.sfhover>ul { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); left: var(--icon-size); padding-left: 0.125em; transition: box-shadow 100ms cubic-bezier(0.4, 0, 0.2, 1), padding-left 100ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1) 50ms; transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1) 50ms, box-shadow 100ms cubic-bezier(0.4, 0, 0.2, 1), padding-left 100ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1) 50ms, box-shadow 100ms cubic-bezier(0.4, 0, 0.2, 1), padding-left 100ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1) 50ms; box-shadow: inset 0.125em 0 0 0 rgb(var(--swatch-tertiary-color)); pointer-events: all; } form#edit-page-form .wd-editor-toolbar-panel div>ul>li:focus-within>ul { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); left: var(--icon-size); padding-left: 0.125em; transition: box-shadow 100ms cubic-bezier(0.4, 0, 0.2, 1), padding-left 100ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1) 50ms; transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1) 50ms, box-shadow 100ms cubic-bezier(0.4, 0, 0.2, 1), padding-left 100ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1) 50ms, box-shadow 100ms cubic-bezier(0.4, 0, 0.2, 1), padding-left 100ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1) 50ms; box-shadow: inset 0.125em 0 0 0 rgb(var(--swatch-tertiary-color)); pointer-events: all; } form#edit-page-form .wd-editor-toolbar-panel a { position: relative; width: 100%; height: 100%; overflow: hidden; border: none; background-color: rgb(var(--editor-icon-bg)); background-image: initial; background-position: initial; } form#edit-page-form .wd-editor-toolbar-panel div>ul>li>ul a { background-color: rgb(var(--editor-icon-submenu-bg)); } form#edit-page-form .wd-editor-toolbar-panel a::before, form#edit-page-form .wd-editor-toolbar-panel a::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; } form#edit-page-form .wd-editor-toolbar-panel a::before { z-index: 1; width: 100%; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--editor-icon-color)); -webkit-mask-image: var(--edit-menu-mask); mask-image: var(--edit-menu-mask); -webkit-mask-size: calc(var(--icon-size) * 0.8); mask-size: calc(var(--icon-size) * 0.8); -webkit-mask-position: center center; mask-position: center center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } form#edit-page-form .wd-editor-toolbar-panel li:hover>a::before, form#edit-page-form .wd-editor-toolbar-panel li:active>a::before { background-color: rgb(var(--editor-icon-hover-color)); } form#edit-page-form .wd-editor-toolbar-panel>li:focus-within a::before { background-color: rgb(var(--editor-icon-hover-color)); } form#edit-page-form .wd-editor-toolbar-panel a::after { --clip-path: polygon( 0 0, 0 0, 0 100%, 0 100% ); z-index: 0; width: 100%; height: 100%; transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; background-color: rgb(var(--editor-icon-hover-bg)); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } form#edit-page-form .wd-editor-toolbar-panel li:hover>a::after, form#edit-page-form .wd-editor-toolbar-panel li:active>a::after { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } form#edit-page-form .wd-editor-toolbar-panel li:focus-within a::after { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(1)>ul>li:nth-of-type(1) { grid-area: header-h1; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(1)>ul>li:nth-of-type(2) { grid-area: bold-txt; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(1)>ul>li:nth-of-type(3) { grid-area: italic-txt; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(1)>ul>li:nth-of-type(4) { grid-area: underline-txt; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(1)>ul>li:nth-of-type(5) { grid-area: strike-txt; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(1)>ul>li:nth-of-type(6) { grid-area: teletype-txt; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(1)>ul>li:nth-of-type(7) { grid-area: quote-block; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(1)>ul>li:nth-of-type(8) { grid-area: super-txt; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(1)>ul>li:nth-of-type(9) { grid-area: sub-txt; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(1)>ul>li:nth-of-type(10) { grid-area: raw-txt; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(2)>ul>li:nth-of-type(1) { grid-area: hr-txt; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(2)>ul>li:nth-of-type(2) { grid-area: div-block; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(2)>ul>li:nth-of-type(3) { grid-area: clear-all-fl; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(2)>ul>li:nth-of-type(4) { grid-area: create-table; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(2)>ul>li:nth-of-type(5) { grid-area: create-toc; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(2)>ul>li:nth-of-type(7) { grid-area: code-block } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(2)>ul>li:nth-of-type(8) { grid-area: code-wizard; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(2)>ul>li:nth-of-type(10) { grid-area: url-txt; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(2)>ul>li:nth-of-type(11) { grid-area: url-wizard; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(2)>ul>li:nth-of-type(12) { grid-area: page-link-txt; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(2)>ul>li:nth-of-type(13) { grid-area: page-link-wizard; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(2)>ul>li:nth-of-type(15) { grid-area: image-block; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(2)>ul>li:nth-of-type(16) { grid-area: image-wizard; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(2)>ul>li:nth-of-type(18) { grid-area: html-block; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(3)>ul>li:nth-of-type(1) { grid-area: ordered-list; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(3)>ul>li:nth-of-type(2) { grid-area: unordered-list; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(3)>ul>li:nth-of-type(3) { grid-area: increment-list; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(3)>ul>li:nth-of-type(4) { grid-area: decrement-list; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(3)>ul>li:nth-of-type(5) { grid-area: definition-list; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(3)>ul>li:nth-of-type(6) { grid-area: create-footnote; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(3)>ul>li:nth-of-type(8) { grid-area: math-block; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(3)>ul>li:nth-of-type(9) { grid-area: math-inline; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(3)>ul>li:nth-of-type(10) { grid-area: equation-ref; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(3)>ul>li:nth-of-type(12) { grid-area: bibliography; } form#edit-page-form .wd-editor-toolbar-panel div:nth-of-type(3)>ul>li:nth-of-type(13) { grid-area: bib-cite; } /* ===TOOLBAR ICONS ===*/ form#edit-page-form .wd-editor-toolbar-panel a.weditor-h1::before { --edit-menu-mask: var(--h1-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-h2::before { --edit-menu-mask: var(--h2-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-h3::before { --edit-menu-mask: var(--h3-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-h4::before { --edit-menu-mask: var(--h4-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-h5::before { --edit-menu-mask: var(--h5-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-h6::before { --edit-menu-mask: var(--h6-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-bold::before { --edit-menu-mask: var(--bold-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-italic::before { --edit-menu-mask: var(--italic-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-underline::before { --edit-menu-mask: var(--underline-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-strikethrough::before { --edit-menu-mask: var(--strikethrough-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-teletype::before { --edit-menu-mask: var(--teletype-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-quote::before { --edit-menu-mask: var(--quote-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-superscript::before { --edit-menu-mask: var(--superscript-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-subscript::before { --edit-menu-mask: var(--subscript-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-raw::before { --edit-menu-mask: var(--rawtext-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-hr::before { --edit-menu-mask: var(--hr-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-div::before { --edit-menu-mask: var(--divblock-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-clearfloat::before { --edit-menu-mask: var(--clearfloat-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-clearfloatleft::before { --edit-menu-mask: var(--clearfloatleft-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-clearfloatright::before { --edit-menu-mask: var(--clearfloatright-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-table::before { --edit-menu-mask: var(--table-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-toc::before { --edit-menu-mask: var(--toc-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-code::before { --edit-menu-mask: var(--codeblock-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-codewiz::before { --edit-menu-mask: var(--codewiz-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-uri::before { --edit-menu-mask: var(--url-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-uriwiz::before { --edit-menu-mask: var(--urlwiz-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-pagelink::before { --edit-menu-mask: var(--pagelink-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-pagelinkwiz::before { --edit-menu-mask: var(--pagelinkwiz-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-image::before { --edit-menu-mask: var(--imageblock-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-imagewiz::before { --edit-menu-mask: var(--imagewiz-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-html::before { --edit-menu-mask: var(--htmlblock-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-numlist::before { --edit-menu-mask: var(--ordered-list-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-bullist::before { --edit-menu-mask: var(--unordered-list-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-incindent::before { --edit-menu-mask: var(--inc-list-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-decindent::before { --edit-menu-mask: var(--dec-list-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-deflist::before { --edit-menu-mask: var(--def-list-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-footnote::before { --edit-menu-mask: var(--footnote-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-math::before { --edit-menu-mask: var(--math-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-mathinline::before { --edit-menu-mask: var(--inline-math-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-eqref::before { --edit-menu-mask: var(--eq-def-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-bib::before { --edit-menu-mask: var(--bib-mask); } form#edit-page-form .wd-editor-toolbar-panel a.weditor-bibcite::before { --edit-menu-mask: var(--bib-cite-mask); } /* ===EDITOR TEXTAREA=== */ form#edit-page-form #wd-editor-toolbar-panel+div { position: relative; grid-area: editbox; padding: 0.125em 0; box-shadow: inset 0 -0.0625rem 0 0 rgba(var(--swatch-tertiary-color), 0.25), inset 0 0.0625rem 0 0 rgba(var(--swatch-tertiary-color), 0.25); } form#edit-page-form #edit-page-textarea { min-width: 100%; min-height: calc(var(--body-width-on-desktop) / 2); padding: 0.75em 1em; } form#edit-page-form #edit-page-textarea:focus { outline: 0 solid transparent; } form#edit-page-form textarea { overflow-y: auto; border: none; outline: 0 solid transparent; font-size: 0.9em; line-height: 1.42; text-align: left; word-wrap: break-word; white-space: pre-wrap; -moz-tab-size: 4; tab-size: 4; } /* ===EDITOR HELP LINKS=== */ form#edit-page-form .edit-help-34 { --wght: var(--ui-wght); display: flex; grid-area: edit-help; flex-wrap: wrap; align-items: center; justify-content: center; min-height: 1.125em; margin: 0; padding: 0.125em 0; background-color: rgb(var(--swatch-tertiary-color), 0.05); font-size: 0.7em; font-weight: var(--wght); line-height: 1.25; text-transform: capitalize; white-space: nowrap; } form#edit-page-form .edit-help-34>a { display: inline-flex; position: relative; align-items: center; justify-content: center; padding: 0 0.25em; } form#edit-page-form .edit-help-34>a:nth-of-type(1) { margin: 0 1.5em 0 0.5em; } form#edit-page-form .edit-help-34>a:nth-of-type(2)::before, form#edit-page-form .edit-help-34>a:nth-of-type(2):hover::before, form#edit-page-form .edit-help-34>a:nth-of-type(2):active::before { content: " | "; position: absolute; left: -1em; color: rgb(var(--swatch-text-tertiary-color)); } form#edit-page-form .edit-help-34>a:nth-of-type(2):focus-within::before { content: " | "; position: absolute; right: -1em; color: rgb(var(--swatch-text-tertiary-color)); } form#edit-page-form .edit-help-34>a::after { --clip-path: polygon( 100% 0, 100% 0, 100% 100%, 100% 100% ); content: " "; position: absolute; z-index: -1; top: 0; width: 100%; height: 100%; transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; background-color: rgb(var(--swatch-primary)); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } form#edit-page-form .edit-help-34>a:hover, form#edit-page-form .edit-help-34>a:active { --wght: calc(var(--ui-hvr-wght)); transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); color: rgb(var(--swatch-background)); font-weight: var(--wght); text-decoration: none; } form#edit-page-form .edit-help-34>a:focus-within { --wght: calc(var(--ui-hvr-wght)); transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); color: rgb(var(--swatch-background)); font-weight: var(--wght); text-decoration: none; } form#edit-page-form .edit-help-34>a:hover::after, form#edit-page-form .edit-help-34>a:active::after { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } form#edit-page-form .edit-help-34>a:focus-within::after { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } /* ===EDITOR TEXTAREA HEIGHT BUTTONS=== */ form#edit-page-form .change-textarea-size { display: grid; grid-area: text-resize; grid-auto-flow: column; grid-gap: 0.25em; gap: 0.25em; align-items: center; justify-content: flex-end; height: 100%; margin: 0; padding: 0; background-color: rgb(var(--swatch-tertiary-color), 0.15); } form#edit-page-form .change-textarea-size a { --wght: calc(var(--ui-wght) + 100); display: inline-flex; align-items: center; justify-content: center; width: 1.125em; height: 1.125em; padding: 0; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); border: none; background-color: rgba(var(--swatch-primary-darker), 0.4); box-shadow: none; color: rgba(var(--swatch-text-secondary-color)); font-weight: var(--wght); } form#edit-page-form .change-textarea-size a:hover, form#edit-page-form .change-textarea-size a:active { --wght: calc(var(--ui-hvr-wght) + 100); background-color: rgba(var(--swatch-primary)); font-weight: var(--wght); } form#edit-page-form .change-textarea-size a:focus-within { --wght: calc(var(--ui-hvr-wght) + 100); background-color: rgba(var(--swatch-primary)); font-weight: var(--wght); } /* ===EDITOR DESCRIPTION BOX=== */ form#edit-page-form .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1) { --wght: var(--ui-hvr-wght); display: grid; position: relative; grid-area: descrip; grid-template-rows: 1em 1fr; align-items: center; justify-content: stretch; margin-top: 1.5rem; padding-top: 0.75em; background-color: rgba(var(--swatch-background), 1); box-shadow: 0 -0.0625rem 0 0 rgba(var(--swatch-tertiary-color), 0.5); color: transparent; font-weight: var(--wght); } form#edit-page-form .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1)::before { content: "Short Description of Changes:"; position: absolute; z-index: 2; top: -1em; left: 1rem; padding: 0.15625em; transform: translateY(0); transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1); outline: 0 solid rgb(var(--swatch-primary)); background-color: rgba(var(--swatch-background), 1); box-shadow: 0 0 0 0 rgb(var(--swatch-primary)); color: rgb(var(--swatch-text-general)); font-size: 0.8em; text-transform: uppercase; will-change: box-shadow, color, background-color; } form#edit-page-form .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1):focus-within::before { transform: translateY(-0.25em); outline: 0 solid rgb(var(--swatch-primary)); background-color: rgba(var(--swatch-primary), 1); box-shadow: 0 0 0 0.15625em rgb(var(--swatch-primary)); color: rgb(var(--swatch-background)); } form#edit-page-form .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1) br { display: none; } form#edit-page-form .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1) textarea { --wght: var(--ui-wght); z-index: 1; width: calc(100% - 2rem); height: 100%; min-height: 7em; margin: -1.325em auto 0; padding: 0.75em 0.5em 0.5em; transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); outline: 0 solid rgb(var(--swatch-primary)); box-shadow: 0 0 0 0 rgb(var(--swatch-primary)); color: rgb(var(--swatch-menutxt-general-color)); font-weight: var(--wght); resize: none; will-change: box-shadow, background-color; } form#edit-page-form .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1) textarea:not(:-moz-placeholder-shown) { background-color: rgba(var(--swatch-primary-darker), 0.05); color: rgb(var(--swatch-menutxt-general-color)); } form#edit-page-form .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1) textarea:not(:placeholder-shown) { background-color: rgba(var(--swatch-primary-darker), 0.05); color: rgb(var(--swatch-menutxt-general-color)); } form#edit-page-form .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1) textarea:-moz-placeholder-shown { background-color: rgba(var(--swatch-primary-darker), 0.4); color: rgb(var(--swatch-menutxt-general-color)); } form#edit-page-form .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1) textarea:placeholder-shown { background-color: rgba(var(--swatch-primary-darker), 0.4); color: rgb(var(--swatch-menutxt-general-color)); } form#edit-page-form .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1):focus-within textarea { border: none; outline: 0 solid rgb(var(--swatch-primary)); background-color: rgba(var(--swatch-secondary-color), 0); box-shadow: 0 0 0 0.125rem rgb(var(--swatch-primary)); color: rgb(var(--swatch-menutxt-general-color)); } table.form td div.sub, form div.sub { color: rgb(var(--swatch-menutxt-general-color),0.5); } /* ===DESCRIPTION CHAR COUNT=== */ form#edit-page-form .edit-page-bottomtable div.sub { z-index: 5; grid-area: descsub; height: 1rem; margin: -1.5em 1rem 0 0; padding: 0 1.25em 0 0; font-size: 0.8em; text-align: right; } /* ===EDITOR LOCK INFO=== */ form#edit-page-form #lock-info { grid-area: info-lock; margin: 0.25em auto; border: none; font-size: 0.8125em; line-height: 1.42; text-align: center; } /* ===EDITOR NOTIFY CHECKBOX=== */ form#edit-page-form div.do-not-notify { display: flex; grid-area: nonotif; align-items: center; justify-content: center; } form#edit-page-form div.do-not-notify label { display: flex; height: 1em; } form#edit-page-form div.do-not-notify label input { margin-right: 0.5em; } /* ===EDITOR BUTTONS=== */ form#edit-page-form div.buttons { display: grid; grid-area: editbuttons; grid-gap: 0.5em; gap: 0.5em; grid-template-columns: repeat(3, 1fr); margin: 0 0.5em; } /* ===WHO RATED AREA=== */ #action-area a[onclick*="PageRateModule"] { --wght: var(--ui-wght); display: inline-flex; position: relative; z-index: 2; justify-content: center; min-width: 5em; margin: 0; padding: 0.25em; overflow: hidden; transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); border: 0.0625rem solid rgba(var(--ui-button-hover-outline), 0.05); outline: 0 solid rgb(var(--swatch-primary)); background-color: rgb(var(--ui-button-bg)); box-shadow: 0 0 0 0 rgb(var(--ui-button-bg)); color: rgb(var(--ui-button-txt)); font-family: var(--UI-font); font-weight: var(--wght); will-change: border-color, box-shadow, color, background-color, font-weight, font-variation-settings; } #action-area a[onclick*="PageRateModule"]:hover, #action-area a[onclick*="PageRateModule"]:active { --wght: var(--ui-hvr-wght); border-color: transparent; outline: 0 solid rgb(var(--swatch-primary)); background-color: rgba(var(--ui-button-hover-bg), 1); box-shadow: 0 0 0 0.125rem rgb(var(--ui-button-hover-outline)); color: rgb(var(--ui-button-hover-txt)); font-weight: var(--wght); text-decoration: none; cursor: pointer; } #action-area a[onclick*="PageRateModule"]:focus-within { --wght: var(--ui-hvr-wght); border-color: transparent; outline: 0 solid rgb(var(--swatch-primary)); background-color: rgba(var(--ui-button-hover-bg), 1); box-shadow: 0 0 0 0.125rem rgb(var(--ui-button-hover-outline)); color: rgb(var(--ui-button-hover-txt)); font-weight: var(--wght); text-decoration: none; cursor: pointer; } /* RATING LIST COLUMNS */ #who-rated-page-area>div { --wght: var(--ui-wght); display: grid; grid-auto-rows: 1.5rem; grid-row-gap: 0.25em; grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr) 1em); font-weight: var(--wght); line-height: 1; } #who-rated-page-area br { display: none; } #who-rated-page-area>div>span[style*="color"] { --wght: 800; display: flex; align-items: center; align-self: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 50%; box-shadow: 0 0 0 0.0625rem rgb(var(--swatch-tertiary-color)); color: rgb(var(--swatch-text-tertiary-color)) !important; font-weight: var(--wght); text-align: left; } #who-rated-page-area>div>span[style*="color"]::after { content: ""; display: block; padding-bottom: 100%; } #who-rated-page-area .printuser { width: calc(100% - 1em); height: 100%; margin-left: 0.25em; padding-left: 0.75em; text-align: left; } #who-rated-page-area .printuser::after { content: ""; flex-grow: 1; height: 0.0625rem; margin: auto auto auto 0.25rem; background: rgb(var(--swatch-tertiary-color)); } #who-rated-page-area .printuser a, #who-rated-page-area .printuser.deleted { --wght: 600; font-family: var(--UI-font); font-size: 0.8em; font-weight: var(--wght); white-space: nowrap; } /* ===PAGE TAGS ACTION=== */ form[onsubmit*="PageTagsModule"] table>tbody>tr { display: grid; grid-template-rows: 1.5rem 1fr; align-items: stretch; justify-content: stretch; } form[onsubmit*="PageTagsModule"] table>tbody>tr>td { text-align: left; } form[onsubmit*="PageTagsModule"] table>tbody>tr>td:nth-child(1) { --wght: var(--ui-hvr-wght); display: flex; align-items: center; justify-content: flex-start; width: -webkit-max-content; width: -moz-max-content; width: max-content; height: 1.5em; padding: 0.25em; background-color: rgb(var(--swatch-primary-darkest)); color: rgb(var(--swatch-background)); font-size: 0.8em; font-weight: var(--wght); } form[onsubmit*="PageTagsModule"] table>tbody>tr>td:nth-child(1)::after { content: "\0021b4"; } form[onsubmit*="PageTagsModule"] table>tbody>tr>td:nth-child(2)>input { width: 100%; } /* ===PAGE HISTORY=== */ #page-version-info { z-index: 1; } #history-form-1 { margin-top: 1.5rem; } #history-form-1>table>tbody { display: grid; grid-template-columns: 1fr 8.5rem; } #history-form-1>table>tbody>tr { display: grid; grid-template-rows: 1.5rem 1fr; width: 100%; } #history-form-1>table>tbody>tr>td:nth-of-type(1) { --wght: var(--ui-hvr-wght); display: flex; align-items: center; width: -webkit-max-content; width: -moz-max-content; width: max-content; height: 1.5em; padding: 0.25em; background-color: rgb(var(--swatch-primary-darkest)); color: rgb(var(--swatch-background)); font-size: 0.8em; font-weight: var(--wght); } #history-form-1>table>tbody>tr:nth-child(2) { justify-content: flex-end; } #history-form-1>table>tbody>tr>td:nth-of-type(2) { height: 100%; padding: 0.5em 0; box-shadow: 0 -0.125rem 0 0 rgb(var(--swatch-primary-darkest)); } #history-form-1>table>tbody>tr:nth-child(2)>td:nth-of-type(2) { display: flex; align-items: flex-start; justify-content: center; } #history-form-1>table>tbody>tr:nth-child(1)>td:nth-of-type(2) { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, 3rem 1fr); width: 100%; text-indent: -0.5ch; } #history-form-1>table>tbody>tr:nth-child(1)>td:nth-of-type(2) input { margin-left: 50% } table.page-history { width: 100%; } table.page-history tr[id*="evision-row"] { display: grid; grid-template-areas: "rev-num rev-radio rev-flags rev-actions rev-user rev-date" "rev-com rev-com rev-com rev-com rev-com rev-com"; grid-template-columns: 2.5rem 2.5rem 3rem 4.625rem 1fr 1fr; grid-template-rows: 2rem 1fr; padding: 0 0 0.5em; } table.page-history tr:nth-child(n+3) { padding: 0.5em 0; } table.page-history tr[id*="evision-row"] td:nth-of-type(1) { grid-area: rev-num; } table.page-history tr[id*="evision-row"] td:nth-of-type(2) { grid-area: rev-radio; } table.page-history tr[id*="evision-row"] td:nth-of-type(3) { grid-area: rev-flags; } table.page-history tr[id*="evision-row"] td:nth-of-type(4) { display: grid; grid-area: rev-actions; grid-template-columns: 1fr 1fr 1fr; } table.page-history tr[id*="evision-row"] td:nth-of-type(5) { grid-area: rev-user; } table.page-history tr[id*="evision-row"] td:nth-of-type(6) { grid-area: rev-date; padding: 0 !important; /* Overwriting Wikidot Inline-Styling */ } table.page-history tr td:nth-of-type(7) { grid-area: rev-com; width: calc(100% - 2em) !important; /* Overwriting Wikidot Inline-Styling */ padding: 0 1em; } table.page-history tr:nth-of-type(1) { display: none; } table.page-history tr:nth-of-type(2) { padding-top: 3em; } table.page-history tr:nth-of-type(odd) { background-color: rgba(var(--swatch-tertiary-color), 0.2); } table.page-history tr td { display: flex; position: relative; align-items: center; justify-content: center; width: 100% !important; /* Overwriting Wikidot Inline-Styling */ } table.page-history td.optionstd a { --wght: var(--ui-wght); display: inline-flex; position: relative; justify-content: center; width: 1rem; margin: 0 auto; padding: 0.125rem; overflow: hidden; transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); border: 0.0625rem solid rgba(var(--ui-button-hover-outline), 0.05); outline: 0 solid rgb(var(--ui-button-hover-outline)); background-color: rgb(var(--ui-button-bg)); box-shadow: 0 0 0 0 rgb(var(--ui-button-bg)); color: rgb(var(--ui-button-txt)); font-family: var(--UI-font); font-weight: var(--wght); will-change: border-color, box-shadow, color, background-color, font-weight, font-variation-settings; } table.page-history td.optionstd a:hover, table.page-history td.optionstd a:active { --wght: var(--ui-hvr-wght); border-color: transparent; outline: 0 solid rgb(var(--ui-button-hover-outline)); background-color: rgb(var(--ui-button-hover-bg)); box-shadow: 0 0 0 0.125rem rgb(var(--ui-button-hover-outline)); color: rgb(var(--ui-button-hover-txt)); font-weight: var(--wght); text-decoration: none; cursor: pointer; } table.page-history td.optionstd a:focus-within { --wght: var(--ui-hvr-wght); border-color: transparent; outline: 0 solid rgb(var(--ui-button-hover-outline)); background-color: rgb(var(--ui-button-hover-bg)); box-shadow: 0 0 0 0.125rem rgb(var(--ui-button-hover-outline)); color: rgb(var(--ui-button-hover-txt)); font-weight: var(--wght); text-decoration: none; cursor: pointer; } table.page-history tr:nth-of-type(2) td:not(:nth-of-type(7))::before { --wght: 600; display: flex; position: absolute; top: calc(-100% - 0.5em); left: 0; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: rgb(var(--swatch-primary)); color: rgb(var(--swatch-text-secondary-color)); font-family: var(--UI-font); font-weight: var(--wght); text-transform: uppercase; } table.page-history tr:nth-of-type(2) td:nth-of-type(1)::before { content: "rev."; } table.page-history tr:nth-of-type(2) td:nth-of-type(2)::before { content: ""; } table.page-history tr:nth-of-type(2) td:nth-of-type(3)::before { content: "flags"; } table.page-history tr:nth-of-type(2) td:nth-of-type(4)::before { content: "actions"; } table.page-history tr:nth-of-type(2) td:nth-of-type(5)::before { content: "by"; } table.page-history tr:nth-of-type(2) td:nth-of-type(6)::before { content: "date"; } div.inline-diff del { background-color: rgb(var(--rating-module-button-negative-color), 0.25); } div.inline-diff ins { background-color: rgb(var(--rating-module-button-plus-color), 0.25); } /* ===FILES UPLOAD=== */ table.page-files { font-family: var(--UI-font); } table.page-files tbody, table.page-files tbody { display: contents; } table.page-files tr { display: grid; position: relative; width: 100%; } table.page-files tbody tr::before { content: ""; position: absolute; top: 0; left: -0.5%; width: 101%; height: 101%; background-color: rgb(var(--swatch-primary), 0); } table.page-files thead tr, table.page-files tr[id*="file-row"] { grid-template-columns: 1.5fr 1.5fr 1fr 2fr; padding: 0.5em 0; } table.page-files tr[id*="file-options"] { grid-template-columns: 0 0 0 1fr; margin-top: 0; padding: 0 0 0.5em; } table.page-files tr[id*="file-row"]:nth-of-type(odd), table.page-files tr[id*="file-row"]:nth-of-type(odd)+table.page-files tr[id*="file-options"], table.page-files tr[id*="file-row"]:nth-of-type(odd)+.highlight { background-color: rgba(var(--swatch-tertiary-color), 0.2); } table.page-files tr[id*="file-options"]~tr[id*="file-row"]:nth-of-type(odd), table.page-files tr[id*="file-row"]:nth-of-type(even)+.highlight { background-color: transparent; } table.page-files tr[id*="file-options"]~tr[id*="file-row"]:nth-of-type(even) { background-color: rgba(var(--swatch-tertiary-color), 0.2); } table.page-files thead tr th, table.page-files tbody tr td { display: flex; position: relative; align-items: center; justify-content: center; } table.page-files th { --wght: 600; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: rgb(var(--swatch-primary)); color: rgb(var(--swatch-text-secondary-color)); font-weight: var(--wght); text-transform: uppercase; } table.page-files tr>td>a:not(.btn), table.page-files tr>td>a:visited:not(.btn) { --link-color: var(--swatch-text-general); --visited-link-color: var(--swatch-text-general); --wght: var(--ui-wght); display: flex; align-items: center; padding: 0 0.5em; transition: color 160ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 160ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 160ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-decoration 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: color 160ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 160ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 160ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), text-decoration 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: color 160ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 160ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 160ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), text-decoration 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-decoration 200ms cubic-bezier(0.4, 0, 0.2, 1); background-color: transparent; box-shadow: inset 0 0 0 0 rgb(var(--swatch-primary-darkest)); font-weight: var(--wght); text-align: center; -webkit-text-decoration: underline rgb(var(--swatch-primary-darkest)) 0.125em; text-decoration: underline rgb(var(--swatch-primary-darkest)) 0.125em; word-break: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; -webkit-box-decoration-break: clone; box-decoration-break: clone; } table.page-files tr>td>a:not(.btn):hover, table.page-files tr>td>a:not(.btn):active { --wght: var(--ui-hvr-wght); box-shadow: inset 0 -5em 0 0 rgb(var(--swatch-primary)); color: rgb(var(--swatch-text-secondary-color)); font-weight: var(--wght); -webkit-text-decoration: underline rgb(var(--swatch-primary)) 0; text-decoration: underline rgb(var(--swatch-primary)) 0; } table.page-files tr>td>a:not(.btn):focus-within { --wght: var(--ui-hvr-wght); box-shadow: inset 0 -5em 0 0 rgb(var(--swatch-primary)); color: rgb(var(--swatch-text-secondary-color)); font-weight: var(--wght); -webkit-text-decoration: underline rgb(var(--swatch-primary)) 0; text-decoration: underline rgb(var(--swatch-primary)) 0; } table.page-files tbody tr td:not(.page-rate-widget-box):not(#search-top-box-form)>a.btn { margin: 0 0.5em; } #file-upload-form table, #file-upload-form table>*, #file-upload-form table>*>* { display: contents; } #file-upload-form table.form { display: grid; grid-gap: 0.5em; gap: 0.5em; grid-template-columns: repeat(2, 1fr); } #file-upload-form table.form tr:nth-of-type(3) td { grid-column: span 2; } /* Removing for now until autoprefixer preFIXES itself Issue filed here: https://github.com/postcss/autoprefixer/issues/1419 Currently, Autoprefixer breaks when there are multiple instances of ::file-selector-button #upload-userfile[type="file"]::file-selector-button { --wght: var(--ui-wght); font-weight: var(--wght); display: inline-flex; position: relative; z-index: 2; justify-content: center; min-width: 5em; margin: -0.0625rem 0.5rem -0.0625rem -0.0625rem; padding: 0.25em; overflow: hidden; transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); border: 0.0625rem solid rgba(var(--ui-button-hover-outline), 0.05); border-radius: 0; box-shadow: 0 0 0 0 rgb(var(--ui-button-bg)); outline: 0 solid rgb(var(--ui-button-hover-outline)); background-color: rgb(var(--ui-button-bg)); color: rgb(var(--ui-button-txt)); font-family: var(--UI-font); cursor: pointer; } #upload-userfile[type="file"]::file-selector-button:hover, #upload-userfile[type="file"]::file-selector-button:active { --wght: var(--ui-hvr-wght); font-weight: var(--wght); background-color: rgb(var(--ui-button-hover-bg)); color: rgb(var(--ui-button-hover-txt)); box-shadow: 0 0 0 0 rgb(var(--ui-button-hover-outline)); text-decoration: none; cursor: pointer; } #upload-userfile[type="file"]::file-selector-button:focus-within { --wght: var(--ui-hvr-wght); font-weight: var(--wght); background-color: rgb(var(--ui-button-hover-bg)); color: rgb(var(--ui-button-hover-txt)); box-shadow: 0 0 0 0 rgb(var(--ui-button-hover-outline)); text-decoration: none; cursor: pointer; } */ /* Temporary until Autoprefixer is fixed */ #upload-userfile[type="file"]::-webkit-file-upload-button { min-width: 5em; height: 2em; border: none; border-radius: 0; font-family: var(--UI-font); } #upload-userfile[type="file"]::file-selector-button { min-width: 5em; height: 2em; border: none; border-radius: 0; font-family: var(--UI-font); } #upload-userfile[type="file"] { --wght: var(--ui-wght); display: inline-flex; position: relative; z-index: 2; justify-content: center; min-width: 5em; height: 2em; padding: 0.25em; overflow: hidden; transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); border: 0.0625rem solid rgba(var(--ui-button-hover-outline), 0.05); border-radius: 0; outline: 0 solid rgb(var(--ui-button-hover-outline)); background-color: rgb(var(--ui-button-bg)); box-shadow: 0 0 0 0 rgb(var(--ui-button-bg)); color: rgb(var(--ui-button-txt)); font-family: var(--UI-font); font-weight: var(--wght); cursor: pointer; will-change: border-color, color, background-color, font-weight, font-variation-settings; } #upload-userfile[type="file"]:hover, #upload-userfile[type="file"]:active { --wght: var(--ui-hvr-wght); border-color: transparent; background-color: rgb(var(--ui-button-hover-bg)); box-shadow: 0 0 0 0.25em rgb(var(--ui-button-hover-outline)); color: rgb(var(--ui-button-hover-txt)); font-weight: var(--wght); text-decoration: none; cursor: pointer; } #upload-userfile[type="file"]:focus-within { --wght: var(--ui-hvr-wght); border-color: transparent; background-color: rgb(var(--ui-button-hover-bg)); box-shadow: 0 0 0 0.25em rgb(var(--ui-button-hover-outline)); color: rgb(var(--ui-button-hover-txt)); font-weight: var(--wght); text-decoration: none; cursor: pointer; } #upload-userfile[type="file"] { width: calc(95% + 0.5ch); } /* End of temporary section */ #upload-userfile[type="file"] { padding: 0 !important; /* Overwriting Wikidot Inline-Styling */ cursor: pointer; } /* ===SITE TOOLS=== */ #site-tools-box { position: relative; margin-top: 1.5em; } #site-tools-box::after { content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: calc(100% - 6em); height: 100%; box-shadow: 0 -0.0625rem 0 0 rgb(var(--swatch-tertiary-color)); } #site-tools-box::before { --wght: 700; content: "Site Tools"; display: flex; align-items: center; width: -webkit-max-content; width: -moz-max-content; width: max-content; min-height: 1em; margin: -1.25em 0 0.25em 0; padding: 0 0.5em 0 0; border: none; background-color: rgb(var(--swatch-background)); color: rgb(var(--swatch-text-general)); font-family: var(--title-font); font-size: 1.1875em; font-weight: var(--wght); line-height: 1; text-align: left; font-variant-ligatures: common-ligatures contextual discretionary-ligatures; } @media only screen and (min-width: 56.25rem) { #site-tools-box::before { font-size: 1.5375em; } } #site-tools-box ul.nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); } #site-tools-box ul.nav li { display: flex; align-items: center; justify-content: center; } #site-tools-box ul.nav li a, #site-tools-box ul.nav li a:visited { --wght: var(--ui-wght); display: inline-flex; position: relative; z-index: 2; justify-content: center; min-width: 5em; margin: 0; padding: 0.25em; overflow: hidden; transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); border: 0.0625rem solid rgba(var(--ui-button-hover-outline), 0.05); outline: 0 solid rgb(var(--ui-button-hover-outline)); background-color: rgb(var(--ui-button-bg)); box-shadow: 0 0 0 0.125rem rgb(var(--ui-button-bg)); color: rgb(var(--ui-button-txt)); font-family: var(--UI-font); font-weight: var(--wght); will-change: box-shadow, color, background-color, font-weight, font-variation-settings; } #site-tools-box ul.nav li a:hover, #site-tools-box ul.nav li a:active { --wght: var(--ui-hvr-wght); border-color: transparent; outline: 0 solid rgb(var(--ui-button-hover-outline)); background-color: rgba(var(--ui-button-hover-bg), 1); box-shadow: 0 0 0 0.125rem rgb(var(--ui-button-hover-outline)); color: rgb(var(--ui-button-hover-txt)); font-weight: var(--wght); text-decoration: none; cursor: pointer; } #site-tools-box ul.nav li a:focus-within { --wght: var(--ui-hvr-wght); border-color: transparent; outline: 0 solid rgb(var(--ui-button-hover-outline)); background-color: rgba(var(--ui-button-hover-bg), 1); box-shadow: 0 0 0 0.125rem rgb(var(--ui-button-hover-outline)); color: rgb(var(--ui-button-hover-txt)); font-weight: var(--wght); text-decoration: none; cursor: pointer; } /* ===WANTED PAGES=== */ #site-tools-box div.wanted-pages-module { display: contents; } #site-tools-box div.wanted-pages-module .pager { grid-column: span 2; } #site-tools-box div.wanted-pages-module table { display: grid; grid-auto-rows: auto; grid-column: span 2; grid-template-columns: 1fr 1fr; } #site-tools-box div.wanted-pages-module tbody, #site-tools-box div.wanted-pages-module tbody tr { display: contents; } #site-tools-box div.wanted-pages-module table tr { width: 100%; } #site-tools-box div.wanted-pages-module table tr:first-of-type th { --wght: 600; display: flex; align-items: center; justify-content: center; background-color: rgb(var(--swatch-primary)); color: rgb(var(--swatch-text-secondary-color)); font-weight: var(--wght); text-transform: uppercase; } #site-tools-box div.wanted-pages-module table tr:nth-of-type(odd) td { background-color: rgb(var(--swatch-tertiary-color), 0.1); } #site-tools-box div.wanted-pages-module table tr br { display: none } #site-tools-box div.wanted-pages-module table tr a { display: flex; width: calc(100% - 2em); margin: 0.125rem 1em; } #site-tools-box div.wanted-pages-module table tr a:not(:first-of-type) { box-shadow: 0 -0.0625rem 0 0 rgb(var(--swatch-primary), 0.25); } #site-tools-box div.wanted-pages-module table.form.grid td, #site-tools-box div.wanted-pages-module table.form.grid th { border-color: rgb(var(--swatch-tertiary-color), 0.4); } /* ===ORPHANED/DRAFT PAGES=== */ #st-action-area { display: grid; grid-auto-rows: auto; grid-template-columns: 50% 50%; grid-template-rows: 3rem 1fr; } #st-action-area br { display: none; } #st-action-area>h1:first-of-type { grid-column: span 2; } #st-action-area>p:first-of-type { display: block; position: relative; grid-column: span 2; margin: 0.5em 1.25rem; padding: 0.825em 1.25em; clear: both; border: none; background-color: rgb(var(--swatch-secondary-color)); box-shadow: inset 0.25rem 0 0 0 rgba(var(--swatch-primary), 1), -0.125rem 0 0.25rem 0 rgba(var(--swatch-tertiary-color), 0.25), inset 0.0625rem 0 0 0 rgba(var(--swatch-tertiary-color), 0.5), inset 0 -0.0625rem 0 0 rgba(var(--swatch-tertiary-color), 0.75); } #st-action-area>span, #st-action-area>a:not([href="javascript:;"]) { display: flex; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 0.125rem 0; } #st-action-area>span:not(:first-of-type), #st-action-area>a:not(:first-of-type):not([href="javascript:;"]) { box-shadow: 0 -0.0625rem 0 0 rgb(var(--swatch-primary), 0.25); } #st-action-area>a:not([href="javascript:;"]) { justify-content: flex-end; padding-right: 0.125em; text-align: right; } #st-action-area>span { padding-left: 0.125em; color: rgb(var(--swatch-text-tertiary-color), 0.6) !important; text-align: left; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } #st-action-area>span:nth-of-type(even) { background-color: rgb(var(--swatch-tertiary-color), 0.05); } #st-action-area>a:not([href="javascript:;"]), #st-action-area>a:visited:not([href="javascript:;"]) { --link-color: var(--swatch-text-general); --visited-link-color: var(--swatch-text-general); --wght: var(--ui-wght); display: flex; align-items: center; padding: 0 0.5em; transition: color 160ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 160ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 160ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-decoration 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: color 160ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 160ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 160ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), text-decoration 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: color 160ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 160ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 160ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), text-decoration 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-decoration 200ms cubic-bezier(0.4, 0, 0.2, 1); background-color: transparent; box-shadow: inset 0 0 0 0 rgb(var(--swatch-primary-darkest)); font-weight: var(--wght); -webkit-text-decoration: underline rgb(var(--swatch-primary-darkest)) 0.0625rem; text-decoration: underline rgb(var(--swatch-primary-darkest)) 0.0625rem; } #st-action-area>a:not(.btn):not([href="javascript:;"]):hover, #st-action-area>a:not(.btn):not([href="javascript:;"]):active { --wght: var(--ui-hvr-wght); box-shadow: inset 0 -2em 0 0 rgb(var(--swatch-primary)); color: rgb(var(--swatch-text-secondary-color)); font-weight: var(--wght); -webkit-text-decoration: underline rgb(var(--swatch-primary)) 0; text-decoration: underline rgb(var(--swatch-primary)) 0; } #st-action-area>a:not(.btn):not([href="javascript:;"]):focus-within { --wght: var(--ui-hvr-wght); box-shadow: inset 0 -2em 0 0 rgb(var(--swatch-primary)); color: rgb(var(--swatch-text-secondary-color)); font-weight: var(--wght); -webkit-text-decoration: underline rgb(var(--swatch-primary)) 0; text-decoration: underline rgb(var(--swatch-primary)) 0; } #st-action-area div:not(.wanted-pages-module) a:nth-of-type(n):not([href="javascript:;"]) { justify-content: flex-end; } #st-action-area *:not(span)+a:nth-of-type(4n-1):not([href="javascript:;"]), #st-action-area *:not(span)+a:nth-of-type(4n-4):not([href="javascript:;"]) { background-color: rgb(var(--swatch-tertiary-color), 0.1); } #st-action-area span~a:nth-of-type(n):not([href="javascript:;"]) { background-color: transparent; } /* ===EDIT META=== */ #action-area>div[style="padding-left:3em;"] { padding: 1em 0 !important; } #action-area>div[style="padding-left:3em;"]>div { display: grid; grid-gap: 1em; gap: 1em; grid-template-columns: 3rem 1fr; } #action-area a[onclick*="deleteTag"] { --wght: var(--ui-wght); display: flex; align-items: center; width: 100%; padding: 0 1em 0 0.6em; padding: 0 1em; transition: color 160ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 160ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 160ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-decoration 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: color 160ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 160ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 160ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), text-decoration 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: color 160ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 160ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 160ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), text-decoration 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-decoration 200ms cubic-bezier(0.4, 0, 0.2, 1); background-color: transparent; box-shadow: inset 0 0 0 0 rgb(var(--swatch-primary-darkest)); font-weight: var(--wght); -webkit-text-decoration: underline rgb(var(--swatch-primary-darkest)) 0.0625rem; text-decoration: underline rgb(var(--swatch-primary-darkest)) 0.0625rem; } #action-area a[onclick*="deleteTag"]:not(.btn):hover, #action-area a[onclick*="deleteTag"]:not(.btn):active { --wght: var(--ui-hvr-wght); box-shadow: inset 0 -2em 0 0 rgb(var(--swatch-primary)); color: rgb(var(--swatch-text-secondary-color)); font-weight: var(--wght); -webkit-text-decoration: underline rgb(var(--swatch-primary)) 0; text-decoration: underline rgb(var(--swatch-primary)) 0; } #action-area a[onclick*="deleteTag"]:not(.btn):focus-within { --wght: var(--ui-hvr-wght); box-shadow: inset 0 -2em 0 0 rgb(var(--swatch-primary)); color: rgb(var(--swatch-text-secondary-color)); font-weight: var(--wght); -webkit-text-decoration: underline rgb(var(--swatch-primary)) 0; text-decoration: underline rgb(var(--swatch-primary)) 0; } #edit-meta-newtag-form table { display: grid; grid-template-columns: repeat(2, -webkit-min-content 1fr) -webkit-min-content; grid-template-columns: repeat(2, min-content 1fr) min-content; grid-template-rows: 1.5em; width: 100%; max-width: 100%; } #edit-meta-newtag-form table tbody, #edit-meta-newtag-form table tr, #edit-meta-newtag-form table td:nth-of-type(2), #edit-meta-newtag-form table td:nth-of-type(4) { display: contents; } #edit-meta-newtag-form table td { white-space: nowrap; } #edit-meta-newtag-form>div { display: grid; grid-gap: 2em; gap: 2em; grid-template-columns: repeat(3, 1fr); margin: 0 2em; } /* ===WATCHERS/LOCK/RENAME/DELETE/SOURCE=== */ #action-area a + h1 + h2 ~ ul li { text-align: left; } #action-area a + h1 + p + h2 ~ div[style="padding-left:3em;"] > div { grid-template-columns: 5em 1fr; text-align: left; } #action-area a + h1 + p + h2 ~ div[style="padding-left:3em;"] > div a { --wght: var(--ui-wght); display: inline-flex; align-items: center; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-right: 0 !important; padding: 0 1em; transition: color 160ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 160ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 160ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-decoration 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: color 160ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 160ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 160ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), text-decoration 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: color 160ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 160ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 160ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), text-decoration 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-decoration 200ms cubic-bezier(0.4, 0, 0.2, 1); background-color: transparent; box-shadow: inset 0 0 0 0 rgb(var(--swatch-primary-darkest)); font-weight: var(--wght); -webkit-text-decoration: underline rgb(var(--swatch-primary-darkest)) 0.0625rem; text-decoration: underline rgb(var(--swatch-primary-darkest)) 0.0625rem; } #action-area a + h1 + p + h2 ~ div[style="padding-left:3em;"] > div a:hover, #action-area a + h1 + p + h2 ~ div[style="padding-left:3em;"] > div a:active { --wght: var(--ui-hvr-wght); box-shadow: inset 0 -2em 0 0 rgb(var(--swatch-primary)); color: rgb(var(--swatch-text-secondary-color)); font-weight: var(--wght); -webkit-text-decoration: underline rgb(var(--swatch-primary)) 0; text-decoration: underline rgb(var(--swatch-primary)) 0; } #action-area a + h1 + p + h2 ~ div[style="padding-left:3em;"] > div a:focus-within { --wght: var(--ui-hvr-wght); box-shadow: inset 0 -2em 0 0 rgb(var(--swatch-primary)); color: rgb(var(--swatch-text-secondary-color)); font-weight: var(--wght); -webkit-text-decoration: underline rgb(var(--swatch-primary)) 0; text-decoration: underline rgb(var(--swatch-primary)) 0; } #action-area p+ul[style*="list-style: none"] { display: grid; grid-auto-flow: row; grid-gap: 1em; gap: 1em; grid-template-columns: repeat(auto-fill, minmax(calc(var(--body-width-on-desktop) / 4), 1fr)); } #action-area>form:nth-child(4)>table:nth-child(1)>tbody:nth-child(1)>tr:nth-child(1) { display: flex; justify-content: center } #action-area form[onsubmit*="RenamePage"] table { display: grid; grid-gap: 0.25em; gap: 0.25em; grid-template-columns: 0.5fr 1.5fr; grid-template-rows: 1.5em 1.5em; align-items: center; justify-content: center; white-space: nowrap; } #action-area form[onsubmit*="RenamePage"] table td:first-of-type { padding-right: 0.5em; text-align: right; } #action-area form[onsubmit*="RenamePage"] table td:last-of-type { display: flex; } #action-area form[onsubmit*="RenamePage"] table td:last-of-type * { flex-grow: 2; } #action-area form[onsubmit*="RenamePage"] tbody, #action-area form[onsubmit*="RenamePage"] tr { display: contents; } /* ===PAGE SOURCE=== */ .page-source { margin: 1em 0 0 0; text-align: left; word-break: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } /* ===MODALS=== */ div.odialog-shader { background-color: rgb(var(--swatch-alternate-color), 0.5); pointer-events: none; } div.odialog-shader-iframe { opacity: 0; } #odialog-container, #odialog-container * { box-sizing: border-box; } #odialog-container div.owindow { display: grid; position: fixed; top: 50% !important; /* Overwrite Wikidot Inline-Styling */ left: 50% !important; /* Overwrite Wikidot Inline-Styling */ transform: translateY(-50%) translateX(-50%); border: none; background-color: rgb(var(--modal-bg)); box-shadow: inset 0 0 0 0.125rem rgba(var(--swatch-alternate-color), 0.25), 0.5rem 0.25rem 1rem 0 rgba(var(--swatch-alternate-color), 0.25); color: rgb(var(--modal-body-text)); } #odialog-container .modal-header, #odialog-container .title { --wght: 800; display: flex; justify-content: flex-start; width: 100%; margin: 0; padding: 1.5ex 1.25rem; background-color: rgb(var(--modal-header-bg)); background-image: linear-gradient(125deg, rgba(var(--modal-header-stripe), 0.75) 25%, transparent 25%, transparent 50%, rgba(var(--modal-header-stripe), 0.75) 50%, rgba(var(--modal-header-stripe), 0.75) 75%, transparent 75%, transparent 100%); background-size: 3rem 4.35rem; color: rgb(var(--modal-header-txt)); font-family: var(--header-font); font-size: 1.5em; font-weight: var(--wght); line-height: 1ex; text-transform: uppercase; } #odialog-container .modal-body, #odialog-container .content { display: grid; margin: 0 1rem; padding: 0; } #odialog-container .modal-body h1, #odialog-container .content h1, #odialog-container .modal-body h2, #odialog-container .content h2, #odialog-container .modal-body h3, #odialog-container .content h3, #odialog-container .modal-body h4, #odialog-container .content h4, #odialog-container .modal-body h5, #odialog-container .content h5 { width: -webkit-max-content; width: -moz-max-content; width: max-content; margin: 0.25em 0.25em 0.5em; padding-bottom: 0.5em; box-shadow: 0 0.0625rem 0 0 rgba(var(--modal-header-stripe), 0.2); color: rgb(var(--modal-body-header-txt)); } #odialog-container .modal-body p, #odialog-container .content p { width: 100%; margin: 1em 1rem 0 0; } #odialog-container .modal-body h1+p, #odialog-container .content h1+p { margin-top: 0; } #odialog-container .modal-footer { width: 100%; margin: 1rem 0 1em 0; padding: 1rem 1rem 0 0; box-shadow: 0 -0.0625rem 0 0 rgba(var(--modal-header-stripe), 0.2); } #odialog-container .title.modal-header *:not(.page-rate-widget-box):not(#search-top-box-form)>a.btn, #odialog-container .owindow *:not(.page-rate-widget-box):not(#search-top-box-form)>a.btn { background-color: rgb(var(--ui-button-bg)); color: rgb(var(--ui-button-txt)); } #odialog-container .title.modal-header *:not(.page-rate-widget-box):not(#search-top-box-form)>a.btn:not(:last-of-type), #odialog-container .owindow *:not(.page-rate-widget-box):not(#search-top-box-form)>a.btn:not(:last-of-type) { margin-right: 0.5em; } #odialog-container .title.modal-header *:not(.page-rate-widget-box):not(#search-top-box-form)>a.btn:hover, #odialog-container .title.modal-header *:not(.page-rate-widget-box):not(#search-top-box-form)>a.btn:active, #odialog-container .owindow *:not(.page-rate-widget-box):not(#search-top-box-form)>a.btn:hover, #odialog-container .owindow *:not(.page-rate-widget-box):not(#search-top-box-form)>a.btn:active { background-color: rgba(var(--ui-button-hover-bg), 1); color: rgb(var(--ui-button-hover-txt)); } #odialog-container .title.modal-header *:not(.page-rate-widget-box):not(#search-top-box-form)>a.btn:focus-within, #odialog-container .owindow *:not(.page-rate-widget-box):not(#search-top-box-form)>a.btn:focus-within { background-color: rgba(var(--ui-button-hover-bg), 1); color: rgb(var(--ui-button-hover-txt)); } /* MODAL LOADING SCREEN BY ESTRELLAYOSHTE */ #odialog-container .owindow.owait .content { padding: 0.5em 0.5em 2em; background-image: none; } #odialog-container .owindow.owait .content::after { content: " "; display: block; width: 1.5rem; height: 1.5rem; margin: -0.9rem auto; margin-top: 0.6rem; -webkit-animation: loading 1.2s linear infinite; animation: loading 1.2s linear infinite; border-top: 0.3rem solid rgb(var(--modal-header-stripe)); border-right: 0.3rem solid transparent; border-bottom: 0.3rem solid rgb(var(--modal-header-stripe)); border-left: 0.3rem solid transparent; border-radius: 50%; } #odialog-container .owindow.osuccess { padding: 0.5em; } @-webkit-keyframes loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* User Screen Styling */ #odialog-container .owindow > div.modal-body > img[style*="padding: 2px 8px;"]:first-child { grid-column: 1; grid-row: 1; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; margin: 1em 0 0.25em 0.25rem; padding: 0 !important; /*Overwriting inline styling */ background-color: transparent!important; /*Overwriting inline styling */ box-shadow: 0 0 0 0.25rem rgb(var(--swatch-primary-darkest)); } #odialog-container .owindow > div.modal-body > img[style*="padding: 2px 8px;"]:first-child + h1 { display: inline-flex; grid-column: 1/ span 2; grid-row: 1; align-self: center; width: calc(100% - 7.5rem); margin-left: 7.5rem; } #odialog-container .owindow > div.modal-body > img[style*="padding: 2px 8px;"]:first-child ~ table tbody, #odialog-container .owindow > div.modal-body > img[style*="padding: 2px 8px;"]:first-child ~ table tr { display: contents; } #odialog-container .owindow > div.modal-body > img[style*="padding: 2px 8px;"]:first-child ~ table { display: grid; grid-column: 1/ span 2; grid-template-columns: 1fr 1fr; margin-top: 0.25rem; } #odialog-container .owindow > div.modal-body > img[style*="padding: 2px 8px;"]:first-child ~ table td.active { display: flex; align-items: center; } #odialog-container .owindow > div.modal-body > img[style*="padding: 2px 8px;"]:first-child ~ table td.active::after { content: ""; flex-grow: 1; margin: auto 1em auto; border-bottom: thin solid rgb(var(--swatch-primary)); } #odialog-container .owindow > div.modal-body > img[style*="padding: 2px 8px;"]:first-child ~ table + div { display: grid; grid-column: span 2; grid-template-columns: repeat(3, 1fr); grid-template-rows: -webkit-min-content; grid-template-rows: min-content; text-align: center; justify-self: flex-end; } #odialog-container .owindow > div.modal-body > img[style*="padding: 2px 8px;"]:first-child ~ table + div > div { grid-column: 3; grid-row: 2; margin-top: 0.5em; } #odialog-container .owindow > div.modal-body > img[style*="padding: 2px 8px;"]:first-child ~ table + div > div > a { width: 100%; background-color: rgba(var(--swatch-primary),0.125); } /* ===FORUM=== */ .forum-thread-box .description-block { --box-shadow-1: rgba(var(--swatch-menubg-black-color), 0.15); --box-shadow-2: rgba(var(--swatch-menubg-black-color), 0.8); --box-shadow-3: rgba(var(--swatch-menubg-color), 0.25); --box-shadow-4: rgba(var(--swatch-menubg-black-color), 0.1); padding: 0.5em 1em; border-radius: 0.625rem; box-shadow: 0 0.0625rem 0.3125rem var(--box-shadow-1), inset 0 0.0625rem 0 var(--box-shadow-2), inset 0 0.625rem 0.3125rem var(--box-shadow-3), inset 0 -0.9375rem 1.875rem var(--box-shadow-4); } .thread-container .post .long { padding: 0.5em; border: 0.0625rem solid rgba(var(--gray-monochrome), 0.25); border-radius: 0.3125rem; } .thread-container .post .head { --box-shadow: rgba(var(--swatch-menubg-black-color), 0.15); padding: 0.5em 1em; border-radius: 0.3125rem 0.3125rem 0 0; background: linear-gradient(to right, rgba(var(--swatch-secondary-color)), rgba(var(--swatch-tertiary-color))), rgba(var(--swatch-secondary-color)); box-shadow: inset 0.125rem 0.1875rem 0.375rem var(--box-shadow); background-blend-mode: screen; } .thread-container .post .long .content { padding: 0 1em; } .thread-container .post .long .head .title { --wght: 700; font-family: var(--title-font); font-size: 1.2em; font-weight: var(--wght); letter-spacing: 0.05em; } #page-content>div.forum-thread-box>div.new-post { display: flex; justify-content: flex-start; } #page-content>div.forum-thread-box>div.options, .post-container>.post>div.long>div.options { display: flex; justify-content: flex-end; } #page-content>div.forum-thread-box>div.new-post>a, #page-content>div.forum-thread-box>div.options a, .post-container>.post>div.long>div.options a { --wght: 700; display: flex; flex-grow: 0; justify-content: center; margin: 0.1rem; padding: 0.25em; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1); border: 0.0625rem solid rgba(var(--swatch-primary-darker), 1); border-radius: 0.25rem; background-color: rgba(var(--swatch-secondary-color), 0.25); color: rgb(var(--swatch-primary-darkest)); font-weight: var(--wght); letter-spacing: 0.016em; } #page-content>div.forum-thread-box>div.new-post>a:hover, #page-content>div.forum-thread-box>div.new-post>a:active, #page-content>div.forum-thread-box>div.options>a:hover, #page-content>div.forum-thread-box>div.options>a:active, .post-container>.post>div.long>div.options a:hover, .post-container>.post>div.long>div.options a:active { background-color: rgba(var(--swatch-alternate-color), 1); color: rgb(var(--swatch-primary-darker)); text-decoration: none; } #page-content>div.forum-thread-box>div.new-post>a:focus-within, #page-content>div.forum-thread-box>div.options>a:focus-within, .post-container>.post>div.long>div.options a:focus-within { background-color: rgba(var(--swatch-alternate-color), 1); color: rgb(var(--swatch-primary-darker)); text-decoration: none; } .signature, .hidden { display: none; } /* ===MOBILE FORMATTING=== */ @media only screen and (max-width: 56.25rem) { #content-wrap { grid-template-areas: "content content content"; justify-content: center; min-height: calc(100vh - calc(var(--final-header-height-on-mobile))); margin: calc(var(--topbar-height-on-mobile) - 0.125rem) auto 0 !important; } #page-content { min-height: calc(100vh - var(--final-header-height-on-mobile)); } #page-options-bottom { width: 100%; } table.page-history tr[id*="evision-row"] { grid-template-areas: "rev-num rev-radio rev-flags rev-actions rev-date rev-date" "rev-com rev-com rev-com rev-com rev-user rev-user"; } table.page-history tr:nth-of-type(2) td:nth-of-type(5):before { display: none; } #footer { align-self: auto; width: auto; } .license-area { font-size: 0.8em; } .page-history tbody tr td:last-child { width: 35%; font-size: 1.5rem; } #odialog-container div.owindow { min-width: 80%; max-width: 99%; } #odialog-container .modal-body .table, #odialog-container .modal-body .table~div { float: left; } #odialog-container .owindow .button-bar { float: right; } #odialog-container .owindow > div.modal-body > img[style*="padding: 2px 8px;"] { width: 3.25rem; } #odialog-container .owindow > div.modal-body > img[style*="padding: 2px 8px;"] + h1 { width: calc(100% - 5rem); margin-left: 4.25rem; } #odialog-container .owindow > div.modal-body > img[style*="padding: 2px 8px;"] ~ table { grid-template-columns: 1fr; } /* Temporarily hiding page options hovertips in the hope that it might fix some mobile chrome issues */ #odialog-hovertips > div[id*="hovertip"] { display: none !important; } } /* Ad Styling */ div.wd-adunit { grid-column: span 6; grid-row: action-area-btm-end; } /* INT WIKIDOT STRUCTURE STYLING ============================= */ /* Styling specific to Int Branches' Wikidot Structure /* ===DIRECTORY=== 1. =CZECH BRANCH 2. =FRENCH BRANCH 3. =GERMAN BRANCH 4. =GREEK BRANCH 5. =ITALIAN BRANCH 6. =JAPANESE BRANCH 7. =KOREAN BRANCH 8. =POLISH BRANCH 9. =PORTUGESE BRANCH 10. =RUSSIAN BRANCH 11. =SIMPLIFIED CHINESE BRANCH 12. =SPANISH BRANCH 13. =THAI BRANCH 14. =TRADITIONAL CHINESE BRANCH 15. =UKRAINIAN BRANCH */ /* ===CZECH BRANCH=== */ div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:lang(cs) { --button-padding: calc(var(--icon-size)/4) calc(var(--icon-size)/8); height: auto; line-height: 1; white-space: normal; } div#page-options-bottom-2:not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:lang(cs) { flex-basis: 6rem; } form#edit-page-form:lang(cs) .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1)::before { content: "Krátký popis změn:"; } table.page-history:lang(cs) tr:nth-of-type(2) td:nth-of-type(3)::before { content: "změny"; } table.page-history:lang(cs) tr:nth-of-type(2) td:nth-of-type(4)::before { content: "akce"; } table.page-history:lang(cs) tr:nth-of-type(2) td:nth-of-type(5)::before { content: "od"; } table.page-history:lang(cs) tr:nth-of-type(2) td:nth-of-type(6)::before { content: "datum"; } #site-tools-box:lang(cs)::before { content: "Nástroje stránky"; } /* ===FRENCH BRANCH=== */ #main-content:lang(fr) .page-tags::before { content: "étiquettes\0021b4"; text-transform: uppercase; } form#edit-page-form:lang(fr) .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1)::before { content: "Courte Description des Modifications:"; } table.page-history:lang(fr) tr:nth-of-type(2) td:nth-of-type(1)::before { content: "rév."; } table.page-history:lang(fr) tr:nth-of-type(2) td:nth-of-type(3)::before { content: "drapeaux"; } table.page-history:lang(fr) tr:nth-of-type(2) td:nth-of-type(5)::before { content: "par"; } #site-tools-box:lang(fr)::before { content: "Outils du Site"; } /* ===GERMAN BRANCH=== */ div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:lang(de) { --button-padding: calc(var(--icon-size)/4) calc(var(--icon-size)/8); flex-basis: max-content; height: auto; line-height: 1; white-space: normal; } div#page-options-bottom-2:not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:lang(de) { flex-basis: 6rem; } form#edit-page-form:lang(de) .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1)::before { content: "Kurze Beschreibung der Änderungen:"; } table.page-history:lang(de) tr:nth-of-type(2) td:nth-of-type(3)::before { content: "markierungen"; } table.page-history:lang(de) tr:nth-of-type(2) td:nth-of-type(4)::before { content: "aktionen"; } table.page-history:lang(de) tr:nth-of-type(2) td:nth-of-type(5)::before { content: "durch"; } table.page-history:lang(de) tr:nth-of-type(2) td:nth-of-type(6)::before { content: "datum"; } #site-tools-box:lang(de)::before { content: "Site-Werkzeuge"; } /* ===GREEK BRANCH=== */ #main-content:lang(el) .page-tags::before { content: "ΕΤΙΚΈΤΕΣ\0021b4"; } form#edit-page-form:lang(el) .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1)::before { content: "Σύντομη περιγραφή των αλλαγών:"; } table.page-history:lang(el) tr:nth-of-type(2) td:nth-of-type(1)::before { content: "ανα."; } table.page-history:lang(el) tr:nth-of-type(2) td:nth-of-type(3)::before { content: "σημαίες"; } table.page-history:lang(el) tr:nth-of-type(2) td:nth-of-type(4)::before { content: "δράσεις"; } table.page-history:lang(el) tr:nth-of-type(2) td:nth-of-type(5)::before { content: "του"; } table.page-history:lang(el) tr:nth-of-type(2) td:nth-of-type(6)::before { content: "ημερομηνία"; } #site-tools-box:lang(el)::before { content: "Εργαλεία Ιστοσελίδας"; } /* ===ITALIAN BRANCH=== */ div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:lang(it) { --button-padding: calc(var(--icon-size)/4) calc(var(--icon-size)/8); height: auto; line-height: 1; white-space: normal; } div#page-options-bottom-2:not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:lang(it) { flex-basis: 6rem; } form#edit-page-form:lang(it) .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1)::before { content: "Breve descrizione delle modifiche:"; } table.page-history:lang(it) tr:nth-of-type(2) td:nth-of-type(3)::before { content: "segnalazioni"; } table.page-history:lang(it) tr:nth-of-type(2) td:nth-of-type(4)::before { content: "azioni"; } table.page-history:lang(it) tr:nth-of-type(2) td:nth-of-type(5)::before { content: "da"; } table.page-history:lang(it) tr:nth-of-type(2) td:nth-of-type(6)::before { content: "data"; } #site-tools-box:lang(it)::before { content: "Strumenti del Sito"; } #main-content:lang(it) .page-tags::before { content: "TAG\0021b4"; } /* ===JAPANESE BRANCH=== */ form#edit-page-form:lang(ja) .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1)::before { content: "変更の要旨"; } table.page-history:lang(ja) tr:nth-of-type(2) td:nth-of-type(3)::before { content: "フラグ"; } table.page-history:lang(ja) tr:nth-of-type(2) td:nth-of-type(4)::before { content: "アクション"; } table.page-history:lang(ja) tr:nth-of-type(2) td:nth-of-type(5)::before { content: "編集者"; } table.page-history:lang(ja) tr:nth-of-type(2) td:nth-of-type(6)::before { content: "日付"; } #site-tools-box:lang(ja)::before { content: "サイトツール"; } #main-content:lang(ja) .page-tags::before { content: "タグ\0021b4"; } /* ===KOREAN BRANCH=== */ #main-content:lang(ko) .page-tags::before { content: "태그\0021b4"; } form#edit-page-form:lang(ko) .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1)::before { content: "수정에 대한 짤막한 설명"; } table.page-history:lang(ko) tr:nth-of-type(2) td:nth-of-type(1)::before { content: "수정"; } table.page-history:lang(ko) tr:nth-of-type(2) td:nth-of-type(3)::before { content: "유형"; } table.page-history:lang(ko) tr:nth-of-type(2) td:nth-of-type(4)::before { content: "활동"; } table.page-history:lang(ko) tr:nth-of-type(2) td:nth-of-type(5)::before { content: "편집자"; } table.page-history:lang(ko) tr:nth-of-type(2) td:nth-of-type(6)::before { content: "날짜"; } #site-tools-box:lang(ko)::before { content: "사이트 도구"; } /* ===POLISH BRANCH=== */ div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:lang(pl) { --button-padding: calc(var(--icon-size)/4) calc(var(--icon-size)/8); height: auto; line-height: 1; white-space: normal; } div#page-options-bottom-2:not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:lang(pl) { flex-basis: 6rem; } form#edit-page-form:lang(pt-br) .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1)::before { content: "Krótki Opis Zmian:"; } table.page-history:lang(pt-br) tr:nth-of-type(2) td:nth-of-type(1)::before { content: "wersja"; } table.page-history:lang(pt-br) tr:nth-of-type(2) td:nth-of-type(3)::before { content: "flagi"; } table.page-history:lang(pt-br) tr:nth-of-type(2) td:nth-of-type(4)::before { content: "opcje"; } table.page-history:lang(pt-br) tr:nth-of-type(2) td:nth-of-type(5)::before { content: "przez"; } table.page-history:lang(pt-br) tr:nth-of-type(2) td:nth-of-type(6)::before { content: "Data"; } #site-tools-box:lang(pt-br)::before { content: "Narzędzia Witryny"; } /* ===PORTUGESE BRANCH=== */ div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:lang(pt-br) { --button-padding: calc(var(--icon-size)/4) calc(var(--icon-size)/8); height: auto; line-height: 1; white-space: normal; } div#page-options-bottom-2:not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:lang(pt-br) { flex-basis: 6rem; } form#edit-page-form:lang(pt-br) .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1)::before { content: "Resumo das Mudanças:"; } table.page-history:lang(pt-br) tr:nth-of-type(2) td:nth-of-type(1)::before { content: "Revisão"; } table.page-history:lang(pt-br) tr:nth-of-type(2) td:nth-of-type(3)::before { content: "Marcações"; } table.page-history:lang(pt-br) tr:nth-of-type(2) td:nth-of-type(4)::before { content: "Ações"; } table.page-history:lang(pt-br) tr:nth-of-type(2) td:nth-of-type(5)::before { content: "Por"; } table.page-history:lang(pt-br) tr:nth-of-type(2) td:nth-of-type(6)::before { content: "Data"; } #site-tools-box:lang(pt-br)::before { content: "Ferramentas do Site"; } /* ===RUSSIAN BRANCH=== */ div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:lang(ru) { --button-padding: calc(var(--icon-size)/4) calc(var(--icon-size)/8); flex-basis: 6rem; height: auto; line-height: 1; white-space: normal; } /* ===SIMPLIFIED CHINESE BRANCH=== */ form#edit-page-form:lang(cn) .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1)::before { content: "简要修改说明"; } table.page-history:lang(cn) tr:nth-of-type(2) td:nth-of-type(1)::before { content: "版本"; } table.page-history:lang(cn) tr:nth-of-type(2) td:nth-of-type(3)::before { content: "标记"; } table.page-history:lang(cn) tr:nth-of-type(2) td:nth-of-type(4)::before { content: "操作"; } table.page-history:lang(cn) tr:nth-of-type(2) td:nth-of-type(5)::before { content: "更新者"; } table.page-history:lang(cn) tr:nth-of-type(2) td:nth-of-type(6)::before { content: "日期"; } #site-tools-box:lang(cn)::before { content: "网站工具"; } /* ===SPANISH BRANCH=== */ div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:lang(es) { --button-padding: calc(var(--icon-size)/4) calc(var(--icon-size)/8); flex-basis: 6rem; height: auto; line-height: 1; white-space: normal; } #main-content:lang(es) .page-tags::before { content: "Etiquetas\0021b4"; } form#edit-page-form:lang(es) .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1)::before { content: "Breve descripción de los cambios:"; } table.page-history:lang(es) tr:nth-of-type(2) td:nth-of-type(3)::before { content: "marcas"; } table.page-history:lang(es) tr:nth-of-type(2) td:nth-of-type(4)::before { content: "acciones"; } table.page-history:lang(es) tr:nth-of-type(2) td:nth-of-type(5)::before { content: "por"; } table.page-history:lang(es) tr:nth-of-type(2) td:nth-of-type(6)::before { content: "fecha"; } #site-tools-box:lang(es)::before { content: "Herramientas del Sitio"; } /* ===THAI BRANCH=== */ /* ===TRADITIONAL CHINESE BRANCH=== */ form#edit-page-form:lang(zh-tr) .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1)::before { content: "本次編輯的簡要說明"; } table.page-history:lang(zh-tr) tr:nth-of-type(2) td:nth-of-type(1)::before { content: "修訂版本"; } table.page-history:lang(zh-tr) tr:nth-of-type(2) td:nth-of-type(3)::before { content: "標記"; } table.page-history:lang(zh-tr) tr:nth-of-type(2) td:nth-of-type(4)::before { content: "動作"; } table.page-history:lang(zh-tr) tr:nth-of-type(2) td:nth-of-type(5)::before { content: "由"; } table.page-history:lang(zh-tr) tr:nth-of-type(2) td:nth-of-type(6)::before { content: "日期"; } #site-tools-box:lang(zh-tr)::before { content: "網站工具"; } #main-content:lang(zh-tr) .page-tags::before { content: "標籤\0021b4"; } /* ===UKRAINIAN BRANCH=== */ @media only screen and (min-width: 56.25rem) { #container:lang(uk) { width: calc((99vw - (99vw - 99%))); } #content-wrap:lang(uk) { grid-template-areas: "side-bar content"; grid-template-columns: /* Sidebar Width */ var(--sidebar-width-on-desktop) 1fr; } #content-wrap:lang(uk) { margin: 0 !important; /* Overwriting branch's !important */ padding: 0 !important; /* Overwriting branch's !important */ } } #main-content:lang(uk) .page-tags::before { content: "Теґи\0021b4"; } div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:lang(uk) { --button-padding: calc(var(--icon-size)/4) calc(var(--icon-size)/8); flex-basis: 6rem; height: auto; line-height: 1; white-space: normal; } /* SIDEBAR ============================= */ /* Primary Header Coding. Includes Login Box, Search Box, and Top Bar Dropdown Menus */ /* ===DIRECTORY=== 1. =MAIN BLOCK 2. =SUB-BLOCK 3. =HEADING 4. =MENU ITEMS 4.1 =SUB-TEXT 4.2 =MAIN LINKS & TEXT 4.2.1 =MAIN LINKS HOVER BG BAR 4.3 =SCP & TALES SERIES 4.4 =SIGMA-9 OVERWRITES 5. =COMMON THEME COMPATABILITY 6. =MOBILE SIDEBAR =============== */ /* ===MAIN BLOCK=== */ #side-bar { display: flex; position: -webkit-sticky; position: sticky; z-index: 9; top: 0; grid-area: side-bar; flex-direction: column; width: var(--sidebar-width-on-desktop); height: 100vh; margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), scrollbar-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1); border: none; border-color: rgba(var(--swatch-tertiary-color), 0.4); background-attachment: local, local, scroll, fixed; background-color: rgba(var(--sidebar-bg-color), 1); color: rgb(var(--sidebar-links-text)); font-family: var(--UI-font, var(--header-font)); direction: rtl; scrollbar-width: thin; -ms-scroll-chaining: none; overscroll-behavior: contain; scrollbar-color: rgba(var(--swatch-primary-darker), 0.1) /* Thumb */ rgba(var(--swatch-tertiary-color), 0.05); /* Track */ justify-self: start; } /* Hover Scrollbar Behavior */ #side-bar:hover, #side-bar:active { scrollbar-color: rgb(var(--swatch-primary-darker), 1) /* Thumb */ rgb(var(--swatch-menubg-color), 1); /* Track */ border-color: rgba(var(--swatch-primary-darker), 1); } #side-bar:focus-within { scrollbar-color: rgb(var(--swatch-primary-darker), 1) /* Thumb */ rgb(var(--swatch-menubg-color), 1); /* Track */ border-color: rgba(var(--swatch-primary-darker), 1); } #side-bar::-webkit-scrollbar-track { background-color: rgba(var(--swatch-secondary-color), 0.8); } #side-bar::-webkit-scrollbar, #side-bar::-webkit-scrollbar-thumb, #side-bar::-webkit-scrollbar-corner { width: 0.5rem; border-right-width: 0.5rem; border-right-style: inset; border-color: inherit; background-color: rgba(var(--swatch-menubg-color), 0); } /* Manually style each of the sidebar blocks for compatibility with the old sidebar design */ #side-bar div[style*="#f0fff6"] { background-color: rgba(var(--swatch-primary-darker), 0.25) !important; } #side-bar div[style*="#e7e5e8"] { background-color: rgba(var(--swatch-primary-darkest), 0.3) !important; } #side-bar div[style*="#fff0f0"], #side-bar .side-block.resources { background-color: rgba(var(--sidebar-resources-bg-color)) !important; } #side-bar div[style*="#e5e5ff"], #side-bar .side-block.media { margin: 0.5rem 0.5rem 0 0; padding: 0.5rem !important; background-color: rgba(var(--sidebar-media-bg-color)) !important; } /* Social Media Icons */ #side-bar .side-block.media a { position: relative; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--social-color)); -webkit-mask-image: var(--social-logo-mask); mask-image: var(--social-logo-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center center; mask-position: center center; } #side-bar .side-block.media a::before, #side-bar .side-block.media a[href*="tiktok"]::after { --clip-path: polygon( 0 0, 0 0, 0 100%, 0 100% ); content: " "; position: absolute; top: 0; width: 100%; height: 100%; transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--social-icon-hover-color)); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #side-bar .side-block.media a:hover::before, #side-bar .side-block.media a:active::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar .side-block.media a:focus-within::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar .side-block.media a img { width: 1.6875rem; height: 1.6875rem; opacity: 0; } #side-bar .side-block.media a[href*="facebook"] { --social-logo-mask: var(--facebook-mask); --social-color: var(--facebook-icon-color); } #side-bar .side-block.media a[href*="twitter"] { --social-logo-mask: var(--twitter-mask); --social-color: var(--twitter-icon-color); } #side-bar .side-block.media a[href*="reddit"] { --social-logo-mask: var(--reddit-mask); --social-color: var(--reddit-icon-color); } #side-bar .side-block.media a[href*="instagram"] { --social-logo-mask: var(--instagram-mask); --social-color: var(--instagram-icon-color); background-image: var(--instagram-icon-gradient); background-size: contain; } #side-bar .side-block.media a[href*="twitch"] { --social-logo-mask: var(--twitch-mask); --social-color: var(--twitch-icon-color); } #side-bar .side-block.media a[href*="tiktok"] { --social-logo-mask: var(--tiktok-mask); --social-color: var(--tiktok-icon-color); background-image: var(--tiktok-icon-gradient); background-size: contain; } #side-bar .side-block.media a[href*="tiktok"]::after { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); top: 0.125rem; left: 0.125rem; background-color: rgb(var(--social-color)); -webkit-mask-image: var(--social-logo-mask); mask-image: var(--social-logo-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 90%; mask-size: 90%; } #side-bar .side-block.media a[href*="tiktok"]:hover::after, #side-bar .side-block.media a[href*="tiktok"]:active::after { --clip-path: polygon( 0 0, 0 0, 0 100%, 0 100% ); } #side-bar .side-block.media a[href*="tiktok"]:focus-within::after { --clip-path: polygon( 0 0, 0 0, 0 100%, 0 100% ); } #side-bar .side-block.media a[href*="discord"] { --social-logo-mask: var(--discord-mask); --social-color: var(--discord-icon-color); } /*Forcing default sidebar coloring on any INT branches that still use Background Color*/ #side-bar .side-block[style*="background-color"] { background-color: rgba(var(--dark-accent), 0.15) !important; } /* Chinese Specific Styling */ #side-bar div[style*="#f0f0f0"] { background-color: transparent !important; } #side-bar div[style*="#f0f0f0"] div[style*="center"] { align-items: center; } #side-bar div[style*="#f0f0f0"] div[style*="center"] img { margin: 0 !important; } /* ===SUB-BLOCK=== */ #side-bar .side-block, #side-bar div[style*="center"], #side-bar div[style*="center"] > div, #interwiki .side-block { display: grid; grid-template-rows: repeat(auto-fit, minmax(1.3125rem, 1fr)); } #side-bar div[style*="center"], #side-bar div[style*="center"] > div { grid-auto-flow: column; justify-content: space-evenly; width: 100%; } #side-bar .side-block, #interwiki .side-block { margin: 0.5rem 0.5rem 0 0; border: 0; background: rgb(var(--sideblock-bg-color)); direction: ltr; } #side-bar .side-area { padding: 0.625rem; } /* ===HEADING=== */ #side-bar .heading, #interwiki .heading { display: flex; align-items: flex-end; justify-content: flex-start; min-height: 1.5rem; margin: 0 0 0.25rem 0; box-shadow: 0 0.0625rem 0 0 rgb(var(--sideblock-heading-border-color)); } #side-bar .heading, #interwiki .heading { background-color: rgb(var(--sideblock-heading-bg-color)); } #side-bar .heading p, #interwiki .heading p { --wght: calc(var(--ui-wght) + 300); margin: 0; color: rgb(var(--sideblock-heading-text-color)); font-family: var(--title-font); font-size: calc((var(--base-font-size) * (14 / 15)) * 0.9); font-weight: var(--wght); letter-spacing: 0.016em; line-height: 1.15; text-indent: 0.25rem; text-transform: uppercase; } #side-bar .heading p, #interwiki .heading p { cursor: default; } /* ===MENU ITEMS=== */ #side-bar div.menu-item, #side-bar div.menu-item > p, #interwiki div.menu-item, #interwiki div.menu-item > p { display: flex; flex-basis: 100%; flex-flow: row wrap; flex-shrink: 0; align-items: center; justify-content: flex-start; height: 1.5rem; min-height: 1.5rem; margin: 0; padding: 0; box-shadow: inset 0 calc(var(--sidebar-internal-border-thickness) * -1) 0 0 rgba(var(--sidebar-border-color)); font-size: 0; } #side-bar div.menu-item p::before, #side-bar div.menu-item p::after, #interwiki div.menu-item p::before, #interwiki div.menu-item p::after { display: none; } #side-bar div.menu-item > span, #side-bar div.menu-item > p > span, #interwiki div.menu-item > span, #interwiki div.menu-item > p > span { display: none; } #side-bar div.menu-item span:first-of-type, #interwiki div.menu-item span:first-of-type { padding: 0 0 0 calc((var(--base-font-size) * 1.5)); } /* ===SUB-TEXT=== */ /* Sub-Text Styling for select Int Branches */ #side-bar div.menu-item .sub-text { display: inline-flex; min-width: 35%; padding-right: 3em; padding-left: 1em; color: rgba(var(--sidebar-subtest-color)); font-size: calc((var(--base-font-size) * 0.65)); text-align: left; } /* ===MAIN LINKS & TEXT=== */ #side-bar div.menu-item a, #interwiki div.menu-item a { position: relative; z-index: 2; height: inherit; overflow: hidden; } #side-bar div.menu-item a, #side-bar div.menu-item a:visited, #interwiki div.menu-item a, #interwiki div.menu-item a:visited { --wght: var(--ui-wght); display: flex; flex-grow: 2; justify-content: flex-start; height: 1.5rem; margin: 0; padding: 0 0.6em; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); background-clip: padding-box; background-color: rgba(var(--sidebar-links-bg-color)); color: rgb(var(--sidebar-links-text)); font-size: calc(var(--base-font-size) * (14/15)); font-weight: var(--wght); letter-spacing: 0.04em; line-height: 1.5; } #side-bar div.menu-item .text { --wght: var(--ui-wght); display: flex; flex-grow: 2; justify-content: flex-start; height: 1.5rem; margin: 0; padding: 0 0.6em; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); background-clip: padding-box; background-color: rgba(var(--sidebar-links-bg-color)); color: rgb(var(--sidebar-links-text)); font-size: calc(var(--base-font-size) * (14/15)); font-weight: var(--wght); letter-spacing: 0.04em; line-height: 1.5; cursor: default; } #side-bar div.menu-item a:only-child, #interwiki div.menu-item a:only-child { flex-grow: 1; } #side-bar div.menu-item > div:not(:nth-child(2)):not(.collapsible-block), #side-bar div.menu-item > span:not(:nth-child(2)):not(.collapsible-block) { border-left: 0.125rem solid rgba(var(--sidebar-border-color)); } #side-bar div.menu-item > :last-child, #interwiki div.menu-item > :last-child { flex-grow: 2; } #side-bar div.menu-item a, #interwiki div.menu-item a { justify-content: flex-start; padding: 0 0 0 calc(var(--base-font-size) * (14 / 15)); } #side-bar div.menu-item a:hover, #side-bar div.menu-item a:active, #interwiki div.menu-item a:hover, #interwiki div.menu-item a:active { --wght: var(--ui-hvr-wght); background-color: rgba(var(--sidebar-links-hover-bg-color), 0.15); color: rgb(var(--sidebar-links-hover-text-color)); font-weight: var(--wght); text-decoration: none; } #side-bar div.menu-item a:focus-within, #interwiki div.menu-item a:focus-within { --wght: var(--ui-hvr-wght); background-color: rgba(var(--sidebar-links-hover-bg-color), 0.15); color: rgb(var(--sidebar-links-hover-text-color)); font-weight: var(--wght); text-decoration: none; } /* ===MAIN LINKS HOVER BG BAR=== */ /* Menu Item Hover Color Bar */ #side-bar div.menu-item a::before, #interwiki div.menu-item a::before { --clip-path: polygon( 0 0, 0 0, 0 100%, 0 100% ); content: " "; position: absolute; z-index: -1; top: 0; left: calc(var(--base-font-size) * (14 / 15) * -1); width: calc(100% + calc(var(--base-font-size) * (14 / 15))); height: 100%; transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; background-color: rgb(var(--sidebar-links-hover-bg-color)); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #side-bar div.menu-item a:hover::before, #side-bar div.menu-item a:active::before, #interwiki div.menu-item a:hover::before, #interwiki div.menu-item a:active::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar div.menu-item a:focus-within::before, #interwiki div.menu-item a:focus-within::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } /* ===SCP & TALES SERIES==*/ #side-bar div.menu-item.scp-series a, #side-bar div.menu-item.scp-tales a, #side-bar div.menu-item.small a:not([href*="shortest"]), #side-bar div.menu-item a[href*="scp-series"] { justify-content: center; width: auto; padding: 0 0.25em; text-indent: 0; white-space: nowrap; } #side-bar div.menu-item.scp-series a::before, #side-bar div.menu-item.scp-tales a::before, #side-bar div.menu-item.small a:not([href*="shortest"])::before, #side-bar div.menu-item a[href*="scp-series"]::before { width: 250%; } #side-bar div.menu-item img, #interwiki div.menu-item img, #side-bar div.menu-item br { display: none; } #side-bar ul { padding: 0 0.25rem; list-style-type: none; } /* there's an empty menu item in the old sidebar design */ #side-bar .close-menu, #side-bar div.menu-item:empty { display: none; } #side-bar div.menu-item:first-of-type a[href="/"], #side-bar div.menu-item:nth-of-type(2) a[href="/forum:start"] { justify-content: center; padding: 0; } /* Search box specific styling */ #___gcse_0 > div { display: inline-flex; flex-direction: row; width: 100%; height: 2rem; } #___gcse_0 > div > form { margin: 0; } #___gcse_0 > div > form > table > tbody > tr > td.gsc-search-button > button { transition: background-color 80ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgba(var(--swatch-primary-darkest), 0); color: rgb(var(--swatch-text-secondary-color)); line-height: 1.85; } #___gcse_0 > div > form > table > tbody > tr > td.gsc-search-button > button:hover, #___gcse_0 > div > form > table > tbody > tr > td.gsc-search-button > button:active, #___gcse_0 > div > form > table > tbody > tr > td.gsc-search-button > button:focus { background-color: rgba(var(-sidebar-bg-color), 0.15); text-decoration: none; } #___gcse_0 > div > form > table > tbody > tr > td.gsc-search-button > button:focus-within { background-color: rgba(var(-sidebar-bg-color), 0.15); text-decoration: none; } /* Interwiki styling for Interwikis that cannot style themselves. Also targets the SCP-CN Interwiki, which is stylable but does not currently have the interwiki-stylable class */ #side-bar div.scpnet-interwiki-wrapper:not(:lang(cn)):not(.interwiki-stylable), #side-bar div.scpnet-interwiki-wrapper:not(:lang(cn)):not(.interwiki-stylable) * { max-width: var(--sidebar-width-on-desktop); } #side-bar div.scpnet-interwiki-wrapper:not(:lang(cn)):not(.interwiki-stylable) { position: relative; } #side-bar div.scpnet-interwiki-wrapper:not(:lang(cn)):not(.interwiki-stylable) div.list-pages-item { display: flex; align-items: flex-end; justify-content: flex-end; width: 100%; } #side-bar div.scpnet-interwiki-wrapper:not(:lang(cn)):not(.interwiki-stylable) p { display: flex; position: relative; align-items: center; justify-content: center; margin-bottom: 2rem; overflow: hidden; } #side-bar .scpnet-interwiki-wrapper:not(:lang(cn)):not(.interwiki-stylable) iframe.scpnet-interwiki-frame { position: relative; width: 90%; margin: 0 auto; overflow: hidden; } /* Coloring to (mostly) match sidebar */ @supports(mix-blend-mode:hue) { #side-bar .scpnet-interwiki-wrapper:not(:lang(cn)):not(.interwiki-stylable)::before, #side-bar .scpnet-interwiki-wrapper:not(:lang(cn)):not(.interwiki-stylable) p::before, #side-bar .scpnet-interwiki-wrapper:not(:lang(cn)):not(.interwiki-stylable) p::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } #side-bar .scpnet-interwiki-wrapper:not(:lang(cn)):not(.interwiki-stylable)::before { z-index: 3; background-color: rgb(var(--swatch-menubg-color)); mix-blend-mode: darken; } #side-bar .scpnet-interwiki-wrapper:not(:lang(cn)):not(.interwiki-stylable) p::before { z-index: 2; background-color: rgb(var(--swatch-primary)); mix-blend-mode: color; } #side-bar .scpnet-interwiki-wrapper:not(:lang(cn)):not(.interwiki-stylable) p::after { z-index: 1; transition: background-color 500ms cubic-bezier(.4,0,.2,1); background-color: rgb(var(--swatch-menubg-color)); mix-blend-mode:overlay; } } /* Remove margin around stylable interwiki */ #side-bar div.interwiki-stylable { width: auto; margin: 0; } #side-bar div.interwiki-stylable p { margin: 0; } /* Collapsibles in the sidebar */ #side-bar div.collapsible-block { position: relative; flex-basis: 100%; width: 100%; } #side-bar div.collapsible-block div.collapsible-block-folded, #side-bar div.collapsible-block div.collapsible-block-unfolded-link { --wght: calc(var(--ui-wght) + 300); display: flex; position: relative; align-items: flex-end; justify-content: flex-start; height: 1.5rem; min-height: 1.5rem; margin: 0; box-shadow: 0 0.0625rem 0 0 rgb(var(--sideblock-heading-border-color)); font-family: var(--title-font); font-size: calc((var(--base-font-size) * (14 / 15)) * 0.9); font-weight: var(--wght); letter-spacing: 0.016em; line-height: 1.15; text-indent: 0.25rem; text-transform: uppercase; } #side-bar div.collapsible-block a.collapsible-block-link { display: flex; position: absolute; top: 0; left: 0; flex-grow: 2; align-items: center; justify-content: flex-start; width: 100%; height: 100%; margin-left: 0; transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); color: rgb(var(--sidebar-collapsible-link-color)); } #side-bar a.collapsible-block-link:hover, #side-bar a.collapsible-block-link:active { --wght: calc(var(--ui-hvr-wght) + 300); font-weight: var(--wght); text-decoration: none; } #side-bar a.collapsible-block-link:focus-within { --wght: var(--ui-hvr-wght); font-weight: var(--wght); text-decoration: none; } /* create a dropdown triangle next to the collapsible */ #side-bar div.collapsible-block a.collapsible-block-link::after { content: ""; position: absolute; top: 0; right: 0; width: 2rem; height: 100%; transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); -webkit-mask-image: var(--down-arrow-mask); mask-image: var(--down-arrow-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; -webkit-mask-size: 1em; mask-size: 1em; } #side-bar div.collapsible-block div.collapsible-block-folded a.collapsible-block-link { background: rgba(var(--sidebar-collapsible-fld-link-bg)); color: rgb(var(--sidebar-collapsible-fld-link-color)); } #side-bar div.collapsible-block div.collapsible-block-folded > a.collapsible-block-link:hover, #side-bar div.collapsible-block div.collapsible-block-folded > a.collapsible-block-link:active { background: rgba(var(--sidebar-collapsible-fld-link-hover-bg)); color: rgb(var(--sidebar-collapsible-fld-link-hover-color)); } #side-bar div.collapsible-block div.collapsible-block-folded > a.collapsible-block-link:focus-within { background: rgba(var(--sidebar-collapsible-fld-link-hover-bg)); color: rgb(var(--sidebar-collapsible-fld-link-hover-color)); } #side-bar div.collapsible-block div.collapsible-block-folded > a.collapsible-block-link::after { background: rgba(var(--sidebar-collapsible-fld-arrow-color)); } #side-bar div.collapsible-block div.collapsible-block-folded > a.collapsible-block-link:hover:after, #side-bar div.collapsible-block div.collapsible-block-folded > a.collapsible-block-link:active:after { background: rgba(var(--sidebar-collapsible-fld-arrow-hover-color)); } #side-bar div.collapsible-block div.collapsible-block-folded > a.collapsible-block-link:focus-within:after { background: rgba(var(--sidebar-collapsible-fld-arrow-hover-color)); } #side-bar div.collapsible-block div.collapsible-block-unfolded-link > a.collapsible-block-link.collapsible-block-link { background: rgba(var(--sidebar-collapsible-ufld-link-bg)); color: rgb(var(--sidebar-collapsible-ufld-link-color)); } #side-bar div.collapsible-block div.collapsible-block-unfolded-link > a.collapsible-block-link:hover, #side-bar div.collapsible-block div.collapsible-block-unfolded-link > a.collapsible-block-link:active { background: rgba(var(--sidebar-collapsible-ufld-link-hover-bg)); color: rgb(var(--sidebar-collapsible-ufld-link-hover-color)); } #side-bar div.collapsible-block div.collapsible-block-unfolded-link > a.collapsible-block-link:focus-within { background: rgba(var(--sidebar-collapsible-ufld-link-hover-bg)); color: rgb(var(--sidebar-collapsible-ufld-link-hover-color)); } #side-bar div.collapsible-block div.collapsible-block-unfolded-link a.collapsible-block-link::after { transform: rotate(180deg); background: rgba(var(--sidebar-collapsible-ufld-arrow-color)); } #side-bar div.collapsible-block div.collapsible-block-unfolded-link a.collapsible-block-link:hover:after, #side-bar div.collapsible-block div.collapsible-block-unfolded-link a.collapsible-block-link:active:after { background: rgba(var(--sidebar-collapsible-ufld-arrow-hover-color)); } #side-bar div.collapsible-block div.collapsible-block-unfolded-link a.collapsible-block-link:focus-within:after { background: rgba(var(--sidebar-collapsible-ufld-arrow-hover-color)); } /* create a gap next to the collapsible contents */ #side-bar .collapsible-block-content { box-sizing: border-box; border-right: 2rem solid rgba(var(--sidebar-border-color)); } /* hide the last border within the collapsible */ #side-bar .collapsible-block-content .menu-item:last-of-type { border-bottom: none; } #side-bar .collapsible-block-unfolded-link { border-bottom: 0.125rem solid rgba(var(--sidebar-border-color)); } #side-bar div.collapsible-block-content { background-color: rgb(var(--sidebar-collapsible-body-bg)); } #side-bar div.collapsible-block-content div.menu-item a::before { background-color: rgb(var(--sidebar-collapsible-link-hover-bg)); } #side-bar div.collapsible-block-content div.menu-item a, #side-bar div.collapsible-block-content div.menu-item a:visited { color: rgb(var(--sidebar-collapsible-link-color)); } #side-bar div.collapsible-block-content div.menu-item a:hover, #side-bar div.collapsible-block-content div.menu-item a:active { color: rgb(var(--sidebar-collapsible-link-hover-color)); } #side-bar div.collapsible-block-content div.menu-item a:focus-within { color: rgb(var(--sidebar-collapsible-link-hover-color)); } /* ===COMMON THEME COMPATABILITY=== */ #side-bar div.menu-item.expandable { max-width: calc(100% - (var(--base-font-size) * (14 / 15))); } #side-bar div.menu-item.expandable + .collapsible-block { background: none; } #side-bar .menu-item.expandable + .collapsible-block .collapsible-block-folded, #side-bar .menu-item.expandable + .collapsible-block .collapsible-block-unfolded-link { min-height: 0; } #side-bar div.menu-item.expandable + .collapsible-block a.collapsible-block-link { display: flex; top: calc((1.5rem - var(--sidebar-internal-border-thickness)) * -1); justify-content: flex-end; height: calc(1.5rem - (var(--sidebar-internal-border-thickness) * 5)); padding-right: 0; } #side-bar div.menu-item.expandable + .collapsible-block .collapsible-block-link::before { display: flex; position: absolute; top: 0; right: 0; align-content: center; justify-content: center; height: 100%; text-shadow: none; } #side-bar div.menu-item.expandable + .collapsible-block .collapsible-block-link::after { display: none; } #side-bar div.menu-item.expandable + .collapsible-block a.collapsible-block-link:hover, #side-bar div.menu-item.expandable + .collapsible-block a.collapsible-block-link:active { background-color: transparent; } #side-bar div.menu-item.expandable + .collapsible-block a.collapsible-block-link:focus-within { background-color: transparent; } #side-bar div.menu-item.expandable + .collapsible-block .collapsible-block-content .menu-item p { height: 1.25rem; min-height: 1.25rem; padding: 0; font-size: calc(var(--base-font-size) * 0.7); } #side-bar div.menu-item.expandable + .collapsible-block .collapsible-block-content .menu-item a { padding: 0; font-size: calc(var(--base-font-size) * 0.7); } /* Common Theme Colors */ #side-bar div.side-block.yellow { background-color: rgba(255, 255, 229, 0.15); } #side-bar div.side-block.green { background-color: rgba(229, 255, 229, 0.15); } #side-bar:not(:lang(en)) .side-block > .collapsible-block .collapsible-block-folded { background: none !important; } /* ===MOBILE SIDEBAR=== */ @media only screen and (max-width: 56.25rem) { #side-bar { display: block; position: fixed; z-index: 10; top: 0; left: calc(var(--sidebar-width-on-mobile) * -1 - 1rem); width: var(--sidebar-width-on-mobile); max-width: calc(80vw + (var(--base-font-size) * 0.5)); height: 100%; padding-left: 0.25em; overflow-y: auto; transition: left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; direction: initial; } #side-bar:after { content: ""; position: absolute; top: 0; width: 0; height: 100%; background-color: rgba(var(--swatch-menubg-black-color), 0.2); } #side-bar .side-block { margin-top: 0.25rem; direction: initial; } #side-bar div.menu-item a:first-of-type { padding: 0 calc((var(--base-font-size) * (14 / 15)) * 0.5); } #side-bar .heading p, #side-bar .side-block > .collapsible-block .collapsible-block-link { font-size: 0.75em; letter-spacing: 0.1em; } #side-bar > div[style="background-color: #e5e5ff;"] > div.menu-item > div { grid-template-columns: repeat(3, 1fr); } #skrollr-body:target .close-menu, #side-bar .close-menu { display: block; visibility: hidden; position: fixed; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; margin-left: var(--scrollbar-width); padding-right: var(--sidebar-width-on-mobile); transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; opacity: 0; background: rgba(var(--swatch-menubg-black-color), 0.3) 0.0625rem 0.0625rem repeat; pointer-events: none; } #skrollr-body:target #side-bar, #side-bar:target { --box-shadow: rgb(var(--swatch-text-secondary-color, 252, 252, 252)); display: block; z-index: 10; left: 0; width: var(--sidebar-width-on-mobile); max-width: calc(80vw + (var(--base-font-size) * 0.5)); margin: 0; overflow-x: hidden; box-shadow: inset 0 0 0 -0.0625rem var(--box-shadow); } #skrollr-body:target + #main-content, #side-bar:target + #main-content { left: 0; } #skrollr-body:target .close-menu, #side-bar:target .close-menu { display: block; visibility: visible; position: fixed; z-index: -1; top: 0; left: 0; width: calc(100% - var(--sidebar-width-on-mobile)); height: 100%; margin-left: var(--sidebar-width-on-mobile); padding-right: 0; opacity: 1; background: rgba(var(--swatch-menubg-black-color), 0.3) 0.0625rem 0.0625rem repeat; pointer-events: auto; } #side-bar div.scpnet-interwiki-wrapper:not(:lang(cn)), #side-bar div.scpnet-interwiki-wrapper:not(:lang(cn)) * { max-width: var(--sidebar-width-on-mobile); margin-left: 0; } } /* INT SIDEBAR STYLING ============================= */ /* Styling specific to Int Branches' Sidebars /* ===DIRECTORY=== 1. =CZECH BRANCH 2. =FRENCH BRANCH 3. =GERMAN BRANCH 4. =GREEK BRANCH 5. =ITALIAN BRANCH 6. =JAPANESE BRANCH 7. =KOREAN BRANCH 8. =POLISH BRANCH 9. =PORTUGESE BRANCH 10. =RUSSIAN BRANCH 11. =SIMPLIFIED CHINESE BRANCH 12. =SPANISH BRANCH 13. =THAI BRANCH 14. =TRADITIONAL CHINESE BRANCH 15. =UKRAINIAN BRANCH */ /* ===CZECH BRANCH=== */ #side-bar:lang(cs) div.menu-item { height: auto; } #side-bar:lang(cs) .side-block.blue { margin: 0.5rem 0.5rem 0 0; padding: 0.5rem !important; background-color: rgba(var(--sidebar-media-bg-color)) !important; } #side-bar:lang(cs) .side-block.blue a { position: relative; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--social-color)); -webkit-mask-image: var(--social-logo-mask); mask-image: var(--social-logo-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center center; mask-position: center center; } #side-bar:lang(cs) .side-block.blue a::before { --clip-path: polygon( 0 0, 0 0, 0 100%, 0 100% ); content: " "; position: absolute; top: 0; width: 100%; height: 100%; transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--social-icon-hover-color)); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #side-bar:lang(cs) .side-block.blue a:hover::before, #side-bar:lang(cs) .side-block.blue a:active::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar:lang(cs) .side-block.blue a:focus-within::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar:lang(cs) .side-block.blue a img { width: 1.6875rem; height: 1.6875rem; opacity: 0; } #side-bar:lang(cs) .side-block.blue a[href*="facebook"] { --social-logo-mask: var(--facebook-mask); --social-color: var(--facebook-icon-color); } #side-bar:lang(cs) .side-block.blue a[href*="instagram"] { --social-logo-mask: var(--instagram-mask); --social-color: var(--instagram-icon-color); background-image: var(--instagram-icon-gradient); background-size: contain; } #side-bar:lang(cs) .side-block.blue a[href*="discord"] { --social-logo-mask: var(--discord-mask); --social-color: var(--discord-icon-color); } #side-bar:lang(cs) .side-block.blue a[href*="github"] { --social-logo-mask: var(--github-mask); --social-color: var(--github-icon-color); } /* ===FRENCH BRANCH=== */ /* ===GERMAN BRANCH=== */ #side-bar:lang(de) *:not(.scpnet-interwiki-wrapper) { height: auto; } #side-bar:lang(de) div.side-block { display: grid; grid-auto-rows: minmax(0, auto); grid-template-rows: unset; flex-basis: 100%; } #side-bar:lang(de) div.side-block:not(.svg-icons) div.menu-item { display: grid; grid-template-columns: 50% 50%; } #side-bar:lang(de) .side-links.svg-icons a { width: 1.25rem; height: 1.25rem; } #side-bar:lang(de) div.side-bar-container { display: contents; } #side-bar:lang(de) div.menu-item p { display: contents; } #side-bar:lang(de) div.menu-item a:only-of-type { grid-column: 1/ span 2; grid-row: 1; justify-content: flex-start; } #side-bar:lang(de) div.menu-item a { grid-row: 1; } #side-bar:lang(de) div.menu-item span { z-index: 2; grid-column: 2; grid-row: 1; justify-content: flex-end; padding-right: 1em; transition: padding-right 150ms cubic-bezier(.4,0,.2,1), border-color 150ms cubic-bezier(.4,0,.2,1), background-color 150ms cubic-bezier(.4,0,.2,1), color 150ms cubic-bezier(.4,0,.2,1), font-weight 200ms cubic-bezier(.4,0,.2,1), font-variation-settings 200ms cubic-bezier(.4,0,.2,1) } #side-bar:lang(de) div.menu-item a:only-of-type:hover ~ span, #side-bar:lang(de) div.menu-item a:only-of-type:active ~ span { --wght: var(--ui-hvr-wght); border-color: rgb(var(--sidebar-links-hover-text-color),0.15); color: rgb(var(--sidebar-links-hover-text-color)); } #side-bar:lang(de) div.menu-item a:only-of-type:focus-within ~ span { --wght: var(--ui-hvr-wght); border-color: rgb(var(--sidebar-links-hover-text-color),0.15); color: rgb(var(--sidebar-links-hover-text-color)); } #side-bar:lang(de) .collapsible-block + .collapsible-block { margin-top: -1.5rem; margin-bottom: 0.5rem; } #side-bar:lang(de) .collapsible-block + .collapsible-block a.collapsible-block-link { width: calc(100% - (var(--base-font-size)*(7.5/15))); padding: 0 0 0 calc(var(--base-font-size)*(7.5/15)); } #side-bar:lang(de) .collapsible-block + .collapsible-block a.collapsible-block-link::before { display: none; } #side-bar:lang(de) .menu-item.expandable + .collapsible-block { display: grid; min-height: 1.5rem; } #side-bar:lang(de) .menu-item.expandable + .collapsible-block + .menu-item.expandable { margin-top: -1.5rem; } #side-bar:lang(de) .menu-item.expandable + .collapsible-block > div.collapsible-block-folded { margin-top: -1.5rem; box-shadow: unset; } #side-bar:lang(de) .menu-item.expandable + .collapsible-block > div.collapsible-block-unfolded { margin-bottom: 1.5rem; } #side-bar:lang(de) .menu-item.expandable + .collapsible-block > div, #side-bar:lang(de) .menu-item.expandable + .collapsible-block > div a { min-height: 1.5rem; background-color: transparent; } #side-bar:lang(de) .menu-item.expandable + .collapsible-block > div a { width: 100%; max-height: 1.5rem; } #side-bar:lang(de) .menu-item.expandable + .collapsible-block > div a::before { -webkit-filter: unset; filter: unset; } #side-bar:lang(de) .menu-item.expandable + .collapsible-block .collapsible-block-link { top: unset; } #side-bar:lang(de) .collapsible-block-folded .collapsible-block-link::before, #side-bar:lang(de) .colmod-link-top a:first-child::before { --text-shadow-color: var(--swatch-primary-darkest); content: "+"; display: grid; align-items: center; justify-content: center; background-image: unset; color: rgba(var(--sidebar-bg-color),1); -webkit-text-fill-color: rgba(var(--sidebar-bg-color),1); -webkit-text-stroke: 0.0625rem rgb(var(--text-shadow-color)); } @supports not (-webkit-text-stroke:initial) { #side-bar:lang(de) .collapsible-block-folded .collapsible-block-link::before, #side-bar:lang(de) .colmod-link-top a:first-child::before { text-shadow: rgb(var(--text-outline-color)) 0.0625rem 0rem 0rem, rgb(var(--text-outline-color)) 0.0338rem 0.0526rem 0rem, rgb(var(--text-outline-color)) -0.026rem 0.0568rem 0rem, rgb(var(--text-outline-color)) -0.0619rem 0.0088rem 0rem, rgb(var(--text-outline-color)) -0.0409rem -0.0473rem 0rem, rgb(var(--text-outline-color)) 0.0177rem -0.0599rem 0rem, rgb(var(--text-outline-color)) 0.06rem -0.0175rem 0rem; } } #side-bar:lang(de) div.menu-item.expandable:hover + div.collapsible-block a.collapsible-block-link::before { --text-outline-color: rgba(var(--sidebar-bg-color),1); } #side-bar:lang(de) div.side-block > div.menu-item.expandable > p > a:only-of-type { -webkit-clip-path: polygon(-15% 0,100% 0,calc(100% - 1em) 100%,0 100%); clip-path: polygon(-15% 0,100% 0,calc(100% - 1em) 100%,0 100%); } #side-bar:lang(de) div.side-block > div.menu-item.expandable > p > span { padding-right: 0; } #side-bar:lang(de) div.side-block > div.menu-item.expandable:hover > p > span, #side-bar:lang(de) div.side-block > div.menu-item.expandable:active > p > span { padding-right: 1.25em; } #side-bar:lang(de) .menu-item.expandable + .collapsible-block .menu-item { margin: 0; padding: 0; border-left: none; } #side-bar:lang(de) .collapsible-block-content { border-right: var(--base-font-size) solid rgba(var(--sidebar-border-color)); } #side-bar:lang(de) .collapsible-block-content div.menu-item { max-width: 100%; } #side-bar:lang(de) div.menu-item.expandable + .collapsible-block .collapsible-block-content .menu-item a { align-items: center; width: calc(100% - var(--base-font-size)); margin: 0 0 0 calc(var(--base-font-size) * (1/3)); padding: 0 0 0 calc(var(--base-font-size) * (2/3)); border-left: 0.0625rem dashed rgb(var(--swatch-primary-darkest)); } #side-bar:lang(de) .side-block.svg-icons { margin: 0.5rem 0.5rem 0.5rem 0; padding: 0.5rem !important; background-color: rgba(var(--sidebar-media-bg-color)) !important; } #side-bar:lang(de) .side-block.svg-icons > p { display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fit,minmax(1.3125rem,1fr)); justify-content: space-evenly; width: 100%; } #side-bar:lang(de) .side-block.svg-icons a { position: relative; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--social-color)); background-image: unset; -webkit-mask-image: var(--social-logo-mask); mask-image: var(--social-logo-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center center; mask-position: center center; } #side-bar:lang(de) .side-block.svg-icons a::before { --clip-path: polygon( 0 0, 0 0, 0 100%, 0 100% ); content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--social-icon-hover-color)); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #side-bar:lang(de) .side-block.svg-icons a:hover::before, #side-bar:lang(de) .side-block.svg-icons a:active::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar:lang(de) .side-block.svg-icons a:focus-within::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar:lang(de) .side-block.svg-icons a img { width: 1.6875rem; height: 1.6875rem; opacity: 0; } #side-bar:lang(de) .side-block.svg-icons a[href*="chat"] { --social-logo-mask: var(--discord-mask); --social-color: var(--discord-icon-color); } #side-bar:lang(de) .side-block.svg-icons a[href*="youtube"] { --social-logo-mask: var(--youtube-mask); --social-color: var(--youtube-icon-color); } #side-bar:lang(de) .side-block.svg-icons a[href*="facebook"] { --social-logo-mask: var(--facebook-mask); --social-color: var(--facebook-icon-color); } #side-bar:lang(de) .side-block.svg-icons a[href*="twitter"] { --social-logo-mask: var(--twitter-mask); --social-color: var(--twitter-icon-color); } #side-bar:lang(de) .side-block.svg-icons a[href*="deviantart"] { --social-logo-mask: var(--deviantart-mask); --social-color: var(--deviantart-icon-color); } #side-bar:lang(de) .side-block.svg-icons a[href*="instagram"] { --social-logo-mask: var(--instagram-mask); --social-color: var(--instagram-icon-color); background-image: var(--instagram-icon-gradient); background-size: contain; } #side-bar:lang(de) .side-block.svg-icons a[href*="reddit"] { --social-logo-mask: var(--reddit-mask); --social-color: var(--reddit-icon-color); } #side-bar:lang(de) .side-block.svg-icons a[href*="sandbox"] { --social-logo-mask: var(--sandbox-mask); --social-color: var(--sandbox-icon-color); } /* ===GREEK BRANCH=== */ /* ===ITALIAN BRANCH=== */ #side-bar:lang(it) div.side-bar-container { display: contents; } #side-bar:lang(it) div.menu-item { height: auto; } #side-bar:lang(it) .side-block.green + div { display: contents; } #side-bar:lang(it) .side-block.blue { grid-auto-flow: column; align-self: center; justify-content: space-evenly; width: var(--sidebar-width-on-mobile); padding: .5em !important; background-color: rgba(var(--sidebar-media-bg-color)) !important; direction: ltr; } #side-bar:lang(it) .side-block.blue br { display: none; } #side-bar:lang(it) .side-block.blue a { position: relative; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--social-color)); -webkit-mask-image: var(--social-logo-mask); mask-image: var(--social-logo-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center center; mask-position: center center; } #side-bar:lang(it) .side-block.blue a::before { --clip-path: polygon( 0 0, 0 0, 0 100%, 0 100% ); content: " "; position: absolute; top: 0; width: 100%; height: 100%; transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--social-icon-hover-color)); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #side-bar:lang(it) .side-block.blue a:hover::before, #side-bar:lang(it) .side-block.blue a:active::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar:lang(it) .side-block.blue a:focus-within::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar:lang(it) .side-block.blue a img { width: 1.6875rem; height: 1.6875rem; opacity: 0; } #side-bar:lang(it) .side-block.blue a[href*="facebook"] { --social-logo-mask: var(--facebook-mask); --social-color: var(--facebook-icon-color); } #side-bar:lang(it) .side-block.blue a[href*="twitter"] { --social-logo-mask: var(--twitter-mask); --social-color: var(--twitter-icon-color); } #side-bar:lang(it) .side-block.blue a[href*="instagram"] { --social-logo-mask: var(--instagram-mask); --social-color: var(--instagram-icon-color); background-image: var(--instagram-icon-gradient); background-size: contain; } #side-bar:lang(it) .side-block.blue a[href*="chat"] { --social-logo-mask: var(--discord-mask); --social-color: var(--discord-icon-color); } #side-bar:lang(it) .side-block.blue a[href*="reddit"] { --social-logo-mask: var(--reddit-mask); --social-color: var(--reddit-icon-color); } /* ===JAPANESE BRANCH=== */ #side-bar:lang(ja) hr { margin-bottom: 0; } #side-bar:lang(ja) div.side-block:not(.sns) div.menu-item { display: grid; grid-template-columns: 50% 50%; } #side-bar:lang(ja) div.menu-item a:only-of-type { grid-column: 1/ span 2; grid-row: 1; justify-content: flex-start; } #side-bar:lang(ja) div.menu-item span { z-index: 2; grid-column: 2; grid-row: 1; transition: border-color 150ms cubic-bezier(.4,0,.2,1), background-color 150ms cubic-bezier(.4,0,.2,1), color 150ms cubic-bezier(.4,0,.2,1), font-weight 200ms cubic-bezier(.4,0,.2,1), font-variation-settings 200ms cubic-bezier(.4,0,.2,1) } #side-bar:lang(ja) div.menu-item a:only-of-type:hover ~ span, #side-bar:lang(ja) div.menu-item a:only-of-type:active ~ span { --wght: var(--ui-hvr-wght); border-color: rgb(var(--sidebar-links-hover-text-color),0.15); color: rgb(var(--sidebar-links-hover-text-color)); } #side-bar:lang(ja) div.menu-item a:only-of-type:focus-within ~ span { --wght: var(--ui-hvr-wght); border-color: rgb(var(--sidebar-links-hover-text-color),0.15); color: rgb(var(--sidebar-links-hover-text-color)); } #side-bar:lang(ja) div.menu-item a[href*="sandbox2"], #side-bar:lang(ja) div.menu-item span[style*="line-through"] a { text-indent: 1em; } #side-bar:lang(ja) div.menu-item a[href*="sandbox2"]::after, #side-bar:lang(ja) div.menu-item span[style*="line-through"] a::after { content: "|"; position: absolute; left: 0; transition: color 150ms cubic-bezier(.4,0,.2,1), font-weight 200ms cubic-bezier(.4,0,.2,1), font-variation-settings 200ms cubic-bezier(.4,0,.2,1); color: rgba(var(--sidebar-links-text),0.25) } #side-bar:lang(ja) div.menu-item a[href*="sandbox2"]:hover::after, #side-bar:lang(ja) div.menu-item a[href*="sandbox2"]:active::after, #side-bar:lang(ja) div.menu-item span[style*="line-through"] a:hover::after, #side-bar:lang(ja) div.menu-item span[style*="line-through"] a:active::after { color: rgba(var(--sidebar-links-hover-text),0.25); } #side-bar:lang(ja) div.menu-item span[style*="line-through"] { display: contents; } #side-bar:lang(ja) div.menu-item span[style*="line-through"] a { text-decoration: line-through; } #side-bar:lang(ja) .side-block.sns { grid-auto-flow: column; justify-content: space-evenly; width: var(--sidebar-width-on-mobile); margin: .5rem 0.5rem 0 0; padding: .5em !important; background-color: rgba(var(--sidebar-media-bg-color)) !important; direction: ltr; } #side-bar:lang(ja) .side-block.sns > div, #side-bar:lang(ja) .side-block.sns > div > div { display: contents !important; } #side-bar:lang(ja) .side-block.sns a { position: relative; width: 1.6875rem; height: 1.6875rem; margin: 0; padding: 0; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); border: none; background-color: rgb(var(--social-color)); -webkit-mask-image: var(--social-logo-mask); mask-image: var(--social-logo-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center center; mask-position: center center; } #side-bar:lang(ja) .side-block.sns a::before { --clip-path: polygon( 0 0, 0 0, 0 100%, 0 100% ); content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--social-icon-hover-color)); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #side-bar:lang(ja) .side-block.sns a:hover::before, #side-bar:lang(ja) .side-block.sns a:active::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar:lang(ja) .side-block.sns a:focus-within::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar:lang(ja) .side-block.sns a img { width: 1.6875rem; height: 1.6875rem; opacity: 0; } #side-bar:lang(ja) .side-block.sns a[href*="discord"] { --social-logo-mask: var(--discord-mask); --social-color: var(--discord-icon-color); } #side-bar:lang(ja) .side-block.sns a[href*="twitter"] { --social-logo-mask: var(--twitter-mask); --social-color: var(--twitter-icon-color); } #side-bar:lang(ja) .side-block[style*="fff0f0"] div.menu-item:last-of-type { grid-template-columns: repeat(3, calc(100% / 3)); } #side-bar:lang(ja) .side-block[style*="fff0f0"] div.menu-item:last-of-type a { grid-row: 1; } #side-bar:lang(ja) div.scpnet-interwiki-wrapper { margin-top: 1em; } /* ===KOREAN BRANCH=== */ #side-bar:lang(ko) { --youtube-icon-color: 255, 0, 0; --naver-icon-color: 25, 206, 96; } #side-bar:lang(ko) .side-block[style*="E5E5FF"] + div + div { grid-auto-flow: row; margin-top: 1rem; } #side-bar:lang(ko) .side-block[style*="E5E5FF"] { grid-auto-flow: column; justify-content: space-evenly; width: var(--sidebar-width-on-mobile); margin: .5rem 0.5rem 0 0; padding: .5em !important; background-color: rgba(var(--sidebar-media-bg-color)) !important; } #side-bar:lang(ko) .side-block[style*="E5E5FF"] > div { display: contents; } #side-bar:lang(ko) .side-block[style*="E5E5FF"] a { position: relative; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--social-color)); -webkit-mask-image: var(--social-logo-mask); mask-image: var(--social-logo-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center center; mask-position: center center; } #side-bar:lang(ko) .side-block[style*="E5E5FF"] a::before { --clip-path: polygon( 0 0, 0 0, 0 100%, 0 100% ); content: " "; position: absolute; top: 0; width: 100%; height: 100%; transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--social-icon-hover-color)); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #side-bar:lang(ko) .side-block[style*="E5E5FF"] a:hover::before, #side-bar:lang(ko) .side-block[style*="E5E5FF"] a:active::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar:lang(ko) .side-block[style*="E5E5FF"] a:focus-within::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar:lang(ko) .side-block[style*="E5E5FF"] a img { width: 1.6875rem; height: 1.6875rem; opacity: 0; } #side-bar:lang(ko) .side-block[style*="E5E5FF"] a[href*="twitter"] { --social-logo-mask: var(--twitter-mask); --social-color: var(--twitter-icon-color); } #side-bar:lang(ko) .side-block[style*="E5E5FF"] a[href*="youtube"] { --social-logo-mask: var(--youtube-mask); --social-color: var(--youtube-icon-color); } #side-bar:lang(ko) .side-block[style*="E5E5FF"] a[href*="naver"] { --social-logo-mask: var(--naver-mask); --social-color: var(--naver-icon-color); } /* ===POLISH BRANCH=== */ #side-bar:lang(pl) div.menu-item a[href*="scp-series"]:only-of-type { justify-content: flex-start; padding: 0 0 0 calc(var(--base-font-size) * (14/15)); } /* ===PORTUGESE BRANCH=== */ #side-bar:lang(pt-br) div.menu-item a[href*="series"] { justify-content: center; } #side-bar:lang(pt-br) div.side-block[style*="#e7e5e8"] + div[style*="center"] { display: contents; } #side-bar:lang(pt-br) div.side-block[style*="#e7e5e8"] + div[style*="center"] { display: contents; } #side-bar:lang(pt-br) .side-block.side-links { grid-auto-flow: column; justify-content: space-evenly; width: var(--sidebar-width-on-mobile); margin: .5rem 0.5rem 0 0; padding: .5em !important; background-color: rgba(var(--sidebar-media-bg-color)) !important; } #side-bar:lang(pt-br) .side-block.side-links a { position: relative; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--social-color)); -webkit-mask-image: var(--social-logo-mask); mask-image: var(--social-logo-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center center; mask-position: center center; } #side-bar:lang(pt-br) .side-block.side-links a::before { --clip-path: polygon( 0 0, 0 0, 0 100%, 0 100% ); content: " "; position: absolute; top: 0; width: 100%; height: 100%; transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--social-icon-hover-color)); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #side-bar:lang(pt-br) .side-block.side-links a:hover::before, #side-bar:lang(pt-br) .side-block.side-links a:active::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar:lang(pt-br) .side-block.side-links a:focus-within::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar:lang(pt-br) .side-block.side-links a img { width: 1.6875rem; height: 1.6875rem; opacity: 0; } #side-bar:lang(pt-br) .side-block.side-links a[href*="twitter"] { --social-logo-mask: var(--twitter-mask); --social-color: var(--twitter-icon-color); } #side-bar:lang(pt-br) .side-block.side-links a[href*="chat"] { --social-logo-mask: var(--discord-mask); --social-color: var(--discord-icon-color); } #side-bar:lang(pt-br) .side-block.side-links a[href*="youtube"] { --social-logo-mask: var(--youtube-mask); --social-color: var(--youtube-icon-color); } #side-bar:lang(pt-br) .side-block.side-links a[href*="scpsandboxbr"] { --social-logo-mask: var(--sandbox-mask); --social-color: var(--sandbox-icon-color); } #side-bar:lang(pt-br) .side-block span[style*="font-size"] { display: contents; } #side-bar:lang(pt-br) .side-block span[style*="font-size"] a { font-size: calc(var(--base-font-size)*0.8); } /* ===RUSSIAN BRANCH=== */ /*Normalizing Unique Sideblock Class*/ #side-bar:lang(ru) #u-become-member { margin-bottom: inherit; padding: inherit; border: inherit; border-radius: inherit; background-color: inherit; box-shadow: inherit; } #side-bar:lang(ru) #u-become-member { display: grid; grid-template-rows: repeat(auto-fit,minmax(1.3125rem,1fr)); justify-content: stretch; margin: .5rem .5rem 0 0; border: 0; background: rgb(var(--sideblock-bg-color)); box-shadow: 0 0.25rem rgb(var(--swatch-primary-darkest)); direction: ltr } #side-bar:lang(ru) #u-become-member div.menu-item a { flex-grow: 2; justify-content: center; min-width: 100%; padding: 0; } #side-bar:lang(ru) hr { margin-bottom: 0; } #side-bar:lang(ru) div.side-block:not(.sns) div.menu-item { display: grid; grid-template-columns: 50% 50%; } #side-bar:lang(ru) div.menu-item a:only-of-type { grid-column: 1/ span 2; grid-row: 1; justify-content: flex-start; } #side-bar:lang(ru) div.menu-item a[href="/news"] { justify-content: center; padding: 0; } #side-bar:lang(ru) div.menu-item a[href*="scp-series"] { padding: 0 0 0 calc(var(--base-font-size)*(14/15)); } #side-bar:lang(ru) div.menu-item a[href*="scp-series"] + span, #side-bar:lang(ru) div.menu-item a[href*="scp-list"] + span{ padding: 0 0 0 calc(var(--base-font-size)/2); } #side-bar:lang(ru) div.menu-item span { z-index: 2; grid-column: 2; grid-row: 1; transition: border-color 150ms cubic-bezier(.4,0,.2,1), background-color 150ms cubic-bezier(.4,0,.2,1), color 150ms cubic-bezier(.4,0,.2,1), font-weight 200ms cubic-bezier(.4,0,.2,1), font-variation-settings 200ms cubic-bezier(.4,0,.2,1) } #side-bar:lang(ru) div.menu-item a:only-of-type:hover ~ span, #side-bar:lang(ru) div.menu-item a:only-of-type:active ~ span { --wght: var(--ui-hvr-wght); border-color: rgb(var(--sidebar-links-hover-text-color),0.15); color: rgb(var(--sidebar-links-hover-text-color)); } #side-bar:lang(ru) div.menu-item a:only-of-type:focus-within ~ span { --wght: var(--ui-hvr-wght); border-color: rgb(var(--sidebar-links-hover-text-color),0.15); color: rgb(var(--sidebar-links-hover-text-color)); } #side-bar:lang(ru) > hr + .side-block { grid-template-rows: unset; } #side-bar:lang(ru) > hr + .side-block h5 { display: flex; justify-content: center; } #side-bar:lang(ru) > hr + .side-block .collapsible-block-content { border-right: 0 solid transparent; text-align: center; } #side-bar:lang(ru) > hr + .side-block > div:last-of-type { padding: 0 0 0 calc(var(--base-font-size) * (14/15)); } /* ===SIMPLIFIED CHINESE BRANCH=== */ #side-bar:lang(cn) { --bilibili-icon-color: 0,161,214; display: grid; grid-template-columns: 5rem 1fr; } #side-bar:lang(cn) .heading { margin: 0; } #side-bar:lang(cn) div.side-block, #side-bar:lang(cn) div.scpnet-interwiki-wrapper { grid-column: span 2; } #side-bar:lang(cn) div.side-block.media { grid-column: 1/ span 1; flex-basis: 3.6875rem; } #side-bar:lang(cn) div.side-block.media + div[style*="#f0f0f0"] { grid-column: 2/ span 1; flex-basis: calc(var(--sidebar-width-on-desktop) - 3.6875rem); } #side-bar:lang(cn) div.side-block.media + div[style*="#f0f0f0"] > div { grid-auto-flow: row; grid-template-columns: 1fr; grid-template-rows: auto auto; } #side-bar:lang(cn) div.side-block.media + div[style*="#f0f0f0"] > div a { padding: 0.5em; } #side-bar:lang(cn) div.side-block.media div.menu-item { display: contents; } #side-bar:lang(cn) div.side-block.media .heading { align-items: center; justify-content: center; padding-left: 0; } #side-bar:lang(cn) div.side-block.media .menu-item div { align-items: center; border: none; } #side-bar:lang(cn) div.side-block.media a, #side-bar:lang(cn) div.side-block.media a:visited { position: relative; justify-content: center; width: 1.6875rem; height: 1.6875rem; margin: 0; padding: 0; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--social-color)); font-size: var(--base-font-size); line-height: 1; -webkit-mask-image: var(--social-logo-mask); mask-image: var(--social-logo-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center center; mask-position: center center; } #side-bar:lang(cn) div.side-block.media a::before { --clip-path: polygon( 0 0, 0 0, 0 100%, 0 100% ); content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--social-icon-hover-color)); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #side-bar:lang(cn) div.side-block.media a:hover::before, #side-bar:lang(cn) div.side-block.media a:active::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar:lang(cn) div.side-block.media a:focus-within::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar:lang(cn) div.side-block.media a img { width: 1.6875rem; height: 1.6875rem; opacity: 0; } #side-bar:lang(cn) div.side-block.media a[href*="bilibili"] { --social-logo-mask: var(--bilibili-mask); --social-color: var(--bilibili-icon-color); } /* ===SPANISH BRANCH=== */ #side-bar:lang(es) .side-block[style*="e5e5ff"] { margin: .5rem .5rem 0 0; padding: .5rem !important; background-color: rgba(var(--sidebar-media-bg-color)) !important; } #side-bar:lang(es) .side-block[style*="e5e5ff"] > div { display: grid !important; grid-auto-flow: column; justify-content: space-evenly !important; width: 100%; box-shadow: unset; } #side-bar:lang(es) .side-block[style*="e5e5ff"] > div > div { display: contents; } #side-bar:lang(es) .side-block[style*="e5e5ff"] a { position: relative; justify-content: center; width: 1.6875rem; height: 1.6875rem; margin: 0; padding: 0; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--social-color)); font-size: var(--base-font-size); line-height: 1; -webkit-mask-image: var(--social-logo-mask); mask-image: var(--social-logo-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center center; mask-position: center center; } #side-bar:lang(es) .side-block[style*="e5e5ff"] a::before { --clip-path: polygon( 0 0, 0 0, 0 100%, 0 100% ); content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--social-icon-hover-color)); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #side-bar:lang(es) .side-block[style*="e5e5ff"] a:hover::before, #side-bar:lang(es) .side-block[style*="e5e5ff"] a:active::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar:lang(es) .side-block[style*="e5e5ff"] a:focus-within::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar:lang(es) .side-block[style*="e5e5ff"] a img { width: 1.6875rem; height: 1.6875rem; opacity: 0; } #side-bar:lang(es) .side-block[style*="e5e5ff"] a[href*="facebook"] { --social-logo-mask: var(--facebook-mask); --social-color: var(--facebook-icon-color); } #side-bar:lang(es) .side-block[style*="e5e5ff"] a[href*="twitter"] { --social-logo-mask: var(--twitter-mask); --social-color: var(--twitter-icon-color); } #side-bar:lang(es) .side-block[style*="e5e5ff"] a[href*="chat"] { --social-logo-mask: var(--discord-mask); --social-color: var(--discord-icon-color); } #side-bar:lang(es) .side-block[style*="e5e5ff"] a[href*="instagram"] { --social-logo-mask: var(--instagram-mask); --social-color: var(--instagram-icon-color); background-image: var(--instagram-icon-gradient); background-size: contain; } #side-bar:lang(es) .side-block[style*="fff0f0"] + .side-block > div:nth-child(1) a, #side-bar:lang(es) .side-block[style*="fff0f0"] + .side-block > div:nth-child(3) a { justify-content: center; padding: 0; } /* ===THAI BRANCH=== */ #side-bar:lang(th) br { display: none; } #side-bar:lang(th) div.menu-item { height: auto; } #side-bar:lang(th) .side-block div.new-page-box form { display: grid; padding: 0; } #side-bar:lang(th) .side-block div.new-page-box input.button, #side-bar:lang(th) .side-block div.new-page-box input.text { width: 100%; margin: 0 !important; padding: 0 0.25rem; font-family: var(--header-font); font-size: calc(var(--base-font-size)*1.1); justify-self: center; } #side-bar:lang(th) div.menu-item input.text { height: 2rem !important; background-color: rgba(var(--swatch-tertiary-color), 0.25) !important; font-family: var(--body-font); cursor: text; } #side-bar:lang(th) .side-block div.new-page-box input.button { justify-content: center; margin-top: 0.5rem !important; padding: 0 0.25rem; box-shadow: 0 0 0 0.125rem rgba(var(--swatch-primary), 1); cursor: pointer; } #side-bar:lang(th) .side-block:nth-child(3) > div { display: contents; } #side-bar:lang(th) .side-block:nth-child(3) { grid-template-columns: repeat(6, 1fr); padding: 0 0.5rem; } #side-bar:lang(th) .side-block:nth-child(3) > div > *:not(script):not(br) { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 0.25rem 0; } #side-bar:lang(th) .side-block:nth-child(3) :nth-child(1), #side-bar:lang(th) .side-block:nth-child(3) :nth-child(3), #side-bar:lang(th) .side-block:nth-child(3) :nth-child(5) { grid-column: span 6; } #side-bar:lang(th) .side-block:nth-child(3) :nth-child(7) { grid-column: span 4; justify-self: flex-end; } #side-bar:lang(th) .side-block:nth-child(3) :nth-child(8) { grid-column: span 2; justify-self: flex-start; } #side-bar:lang(th) .side-block:nth-child(3) a:nth-child(n+10) { position: relative; justify-content: center; width: 1.6875rem; height: 1.6875rem; margin: 0; padding: 0; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--social-color)); font-size: var(--base-font-size); line-height: 1; -webkit-mask-image: var(--social-logo-mask); mask-image: var(--social-logo-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center center; mask-position: center center; } #side-bar:lang(th) .side-block:nth-child(3) a:nth-child(n+10)::before { --clip-path: polygon( 0 0, 0 0, 0 100%, 0 100% ); content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--social-icon-hover-color)); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #side-bar:lang(th) .side-block:nth-child(3) a:nth-child(n+10):hover::before, #side-bar:lang(th) .side-block:nth-child(3) a:nth-child(n+10):active::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar:lang(th) .side-block:nth-child(3) a:nth-child(n+10):focus-within::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar:lang(th) .side-block:nth-child(3) a:nth-child(n+10) img { width: 1.6875rem; height: 1.6875rem; opacity: 0; } #side-bar:lang(th) .side-block:nth-child(3) a[href*="facebook"] { --social-logo-mask: var(--facebook-mask); --social-color: var(--facebook-icon-color); } #side-bar:lang(th) .side-block:nth-child(3) a[href*="twitter"] { --social-logo-mask: var(--twitter-mask); --social-color: var(--twitter-icon-color); } #side-bar:lang(th) .side-block:nth-child(3) a[href*="chat"] { --social-logo-mask: var(--discord-mask); --social-color: var(--discord-icon-color); } #side-bar:lang(th) .side-block:nth-child(3) a[href*="deviantart"] { --social-logo-mask: var(--deviantart-mask); --social-color: var(--deviantart-icon-color); } #side-bar:lang(th) .side-block:nth-child(3) a[href*="steam"] { --social-logo-mask: var(--steam-mask); --social-color: var(--steam-icon-color); } #side-bar:lang(th) .side-block:nth-child(3) a[href*="sandbox"] { --social-logo-mask: var(--sandbox-mask); --social-color: var(--sandbox-icon-color); } #side-bar:lang(th) .side-block:nth-child(4) { grid-gap: 0.25em; grid-template-rows: 1.5rem 1.5rem 1fr; } #side-bar:lang(th) .side-block:nth-child(4) a:first-of-type, #side-bar:lang(th) .side-block:nth-child(4) a:first-of-type:visited { --wght: var(--ui-wght); display: flex; position: relative; flex-grow: 2; justify-content: flex-start; height: 1.5rem; margin: 0; padding: 0 0 0 calc(var(--base-font-size) * (14 / 15)); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); background-clip: padding-box; background-color: rgba(var(--sidebar-links-bg-color)); color: rgb(var(--sidebar-links-text)); font-size: calc(var(--base-font-size) * (14/15)); font-weight: var(--wght); letter-spacing: 0.04em; line-height: 1.5; } #side-bar:lang(th) .side-block:nth-child(4) a:first-of-type:hover, #side-bar:lang(th) .side-block:nth-child(4) a:first-of-type:active { --wght: var(--ui-hvr-wght); background-color: rgba(var(--sidebar-links-hover-bg-color), 0.15); color: rgb(var(--sidebar-links-hover-text-color)); font-weight: var(--wght); text-decoration: none; } #side-bar:lang(th) .side-block:nth-child(4) a:first-of-type:focus-within { --wght: var(--ui-hvr-wght); background-color: rgba(var(--sidebar-links-hover-bg-color), 0.15); color: rgb(var(--sidebar-links-hover-text-color)); font-weight: var(--wght); text-decoration: none; } #side-bar:lang(th) .side-block:nth-child(4) a:first-of-type::before { --clip-path: polygon( 0 0, 0 0, 0 100%, 0 100% ); content: " "; position: absolute; z-index: -1; top: 0; left: calc(var(--base-font-size) * (14 / 15) * -1); width: calc(100% + calc(var(--base-font-size) * (14 / 15))); height: 100%; transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; background-color: rgb(var(--sidebar-links-hover-bg-color)); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #side-bar:lang(th) .side-block:nth-child(4) a:first-of-type:hover::before, #side-bar:lang(th) .side-block:nth-child(4) a:first-of-type:active::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar:lang(th) .side-block:nth-child(4) a:first-of-type:focus-within::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar:lang(th) .side-block:nth-child(4) p { display: grid; margin-right: 0; } #side-bar:lang(th) .side-block:nth-child(4) p iframe { width: 100%; justify-self: center; } /* ===TRADITIONAL CHINESE BRANCH=== */ #side-bar:lang(zh) { --plurk-icon-color: 255, 87, 77; } #side-bar:lang(zh) .menu-item { height: auto; } #side-bar:lang(zh) .side-block[style*="ADD8E6"] { margin: .5rem .5rem 0 0; padding: .5rem !important; background-color: rgba(var(--sidebar-media-bg-color)) !important; } #side-bar:lang(zh) .side-block[style*="ADD8E6"] > div { display: grid !important; grid-auto-flow: column; justify-content: space-evenly !important; width: 100%; } #side-bar:lang(zh) .side-block[style*="ADD8E6"] a { position: relative; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--social-color)); -webkit-mask-image: var(--social-logo-mask); mask-image: var(--social-logo-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center center; mask-position: center center; } #side-bar:lang(zh) .side-block[style*="ADD8E6"] a::before { --clip-path: polygon( 0 0, 0 0, 0 100%, 0 100% ); content: " "; position: absolute; top: 0; width: 100%; height: 100%; transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--social-icon-hover-color)); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #side-bar:lang(zh) .side-block[style*="ADD8E6"] a:hover::before, #side-bar:lang(zh) .side-block[style*="ADD8E6"] a:active::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar:lang(zh) .side-block[style*="ADD8E6"] a:focus-within::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar:lang(zh) .side-block[style*="ADD8E6"] a img { width: 1.6875rem; height: 1.6875rem; opacity: 0; } #side-bar:lang(zh) .side-block[style*="ADD8E6"] a[href*="chat"] { --social-logo-mask: var(--discord-mask); --social-color: var(--discord-icon-color); } #side-bar:lang(zh) .side-block[style*="ADD8E6"] a[href*="plurk"] { --social-logo-mask: var(--plurk-mask); --social-color: var(--plurk-icon-color); } #side-bar:lang(zh) .side-block[style*="ADD8E6"] a[href*="twitter"] { --social-logo-mask: var(--twitter-mask); --social-color: var(--twitter-icon-color); } #side-bar:lang(zh) .side-block[style*="ADD8E6"] a[href*="instagram"] { --social-logo-mask: var(--instagram-mask); --social-color: var(--instagram-icon-color); background-image: var(--instagram-icon-gradient); background-size: contain; } /* ===UKRAINIAN BRANCH=== */ /*Normalizing Unique Sideblock Class*/ #side-bar:lang(uk) { --telegram-icon-color: 0, 136, 204; } #side-bar:lang(uk) > * { direction: ltr; } #side-bar:lang(uk) hr { margin-bottom: 0; } #side-bar:lang(uk) .side-block.side-links { grid-auto-flow: column; justify-content: space-evenly; width: var(--sidebar-width-on-mobile); margin: .5rem 0.5rem 0 0; padding: .5em !important; background-color: rgba(var(--sidebar-media-bg-color)) !important; } #side-bar:lang(uk) .side-block.side-links > div { display: contents; } #side-bar:lang(uk) .side-block.side-links a { position: relative; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--social-color)); -webkit-mask-image: var(--social-logo-mask); mask-image: var(--social-logo-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center center; mask-position: center center; } #side-bar:lang(uk) .side-block.side-links a::before { --clip-path: polygon( 0 0, 0 0, 0 100%, 0 100% ); content: " "; position: absolute; top: 0; width: 100%; height: 100%; transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--social-icon-hover-color)); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #side-bar:lang(uk) .side-block.side-links a:hover::before, #side-bar:lang(uk) .side-block.side-links a:active::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar:lang(uk) .side-block.side-links a:focus-within::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #side-bar:lang(uk) .side-block.side-links a img { width: 1.6875rem; height: 1.6875rem; opacity: 0; } #side-bar:lang(uk) .side-block.side-links a[href*="twitter"] { --social-logo-mask: var(--twitter-mask); --social-color: var(--twitter-icon-color); } #side-bar:lang(uk) .side-block.side-links a[href*="discord"] { --social-logo-mask: var(--discord-mask); --social-color: var(--discord-icon-color); } #side-bar:lang(uk) .side-block.side-links a[href*="t.me"] { --social-logo-mask: var(--telegram-mask); --social-color: var(--telegram-icon-color); } #side-bar:lang(uk) div.side-block:not(.side-links) div.menu-item { display: grid; grid-template-columns: 50% 50%; } #side-bar:lang(uk) div.menu-item a:only-of-type { grid-column: 1/ span 2; grid-row: 1; justify-content: flex-start; } #side-bar:lang(uk) div.menu-item a[href="/news"], #side-bar:lang(uk) div.menu-item a[href="/faq"]{ justify-content: center; padding: 0; } #side-bar:lang(uk) div.menu-item a[href*="scp-series"] { padding: 0 0 0 calc(var(--base-font-size)*(14/15)); } #side-bar:lang(uk) div.menu-item a[href*="scp-series"] + span, #side-bar:lang(uk) div.menu-item a[href*="scp-list"] + span { display: flex; padding: 0 0 0 calc(var(--base-font-size)/2); } #side-bar:lang(uk) div.menu-item span { z-index: 2; grid-column: 2; grid-row: 1; transition: border-color 150ms cubic-bezier(.4,0,.2,1), background-color 150ms cubic-bezier(.4,0,.2,1), color 150ms cubic-bezier(.4,0,.2,1), font-weight 200ms cubic-bezier(.4,0,.2,1), font-variation-settings 200ms cubic-bezier(.4,0,.2,1) } #side-bar:lang(uk) div.menu-item a:only-of-type:hover ~ span, #side-bar:lang(uk) div.menu-item a:only-of-type:active ~ span { --wght: var(--ui-hvr-wght); border-color: rgb(var(--sidebar-links-hover-text-color),0.15); color: rgb(var(--sidebar-links-hover-text-color)); } #side-bar:lang(uk) div.menu-item a:only-of-type:focus-within ~ span { --wght: var(--ui-hvr-wght); border-color: rgb(var(--sidebar-links-hover-text-color),0.15); color: rgb(var(--sidebar-links-hover-text-color)); } #side-bar:lang(uk) > hr + .side-block { grid-template-rows: unset; } #side-bar:lang(uk) div.menu-item a[href*="system:recent-changes"] { grid-column: 2; grid-row: 1; } #side-bar:lang(uk) > h3 { display: flex; justify-content: center; margin-top: 0.5rem; } #side-bar:lang(uk) > h2 { display: flex; justify-content: center; margin-top: 0.5rem; font-size: 1.25em; text-align: center; } #side-bar:lang(uk) div.pages-tag-cloud-box { overflow: visible; text-align: center; } #side-bar:lang(uk) > div[style*="80%"] > * { padding: 0 0 0 calc(var(--base-font-size)*(14/15)); } #side-bar:lang(uk) > div[style*="15px"] { display: grid; justify-content: center; text-align: center; gap: 0.5rem; } #side-bar:lang(uk) > div[style*="15px"] br { display: none; } /* HEADER ============================= */ /* Primary Header Coding. Includes Login Box, Search Box, and Top Bar Dropdown Menus */ /* ===DIRECTORY=== 1. =MAIN 2. =SEARCH BOX 3. =LOGIN BOX 4. =TOP BAR 5. =MOBILE HEADER 6. =COMMON THEME COMPATABILITY =============== */ /* ===MAIN=== */ #header { --topbar-height: var(--topbar-height-on-desktop); position: relative; z-index: 10; grid-area: header; width: 90vw; height: var(--final-header-height-on-desktop); background-clip: border-box; background-image: var(--logo-image); background-repeat: no-repeat; background-position: left 0.75rem top 1.1875rem; background-size: auto calc(var(--header-height-on-desktop) - 2rem); } /* Body Background Image: Includes header image, subtle gradient that extends into the content, and page background color */ body { background-image: var(--gradient-header), var(--gradient-topmenu), var(--gradient-background); /* 120px, 150px */ background-repeat: repeat-x; background-size: var(--header-background-image-size), 100% var(--final-header-height-on-desktop), 100% var(--background-gradient-distance); } /* Remove background image for interwiki */ #interwiki body { background-image: none; } /* Diagonal Stripes in Header */ div#container-wrap { background-image: var(--diagonal-stripes); background-repeat: no-repeat; background-position: 0 0; background-size: 100% var(--header-height-on-desktop); } #header { --search-width: calc(var(--base-font-size) * 15); --search-height: calc(var(--base-font-size) * 1.8); --account-height: var(--search-height); } #header, #top-bar { --wght: var(--ui-wght); max-width: var(--header-width-on-desktop,61.25rem); /* 980px */ margin: 0 auto; font-weight: var(--wght); } #header h1, #header h2 { position: absolute; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } #header h1 { position: absolute; height: 100%; max-height: var(--header-height-on-desktop); } #header h1 a { --wght: 900; display: block; z-index: 10; margin-top: calc(((var(--header-height-on-desktop) / 2)) - 0.85em); margin-left: calc(var(--header-height-on-desktop) - 0.75rem); padding: 1.875rem 0 0; color: rgb(var(--swatch-headerh1-color)); font-family: var(--header-font); font-size: var(--header-h1-font-size); font-weight: var(--wght); line-height: 0; text-decoration: none; text-shadow: none; } #header h1 a::before { --text-shadow: rgb(var(--swatch-text-dark, 12, 12, 12)); content: var(--header-title, "SCP Foundation"); color: rgb(var(--swatch-headerh1-color)); text-shadow: none; } #header h1 a > span { display: inline-table; position: absolute; top: 0; left: 0; width: calc(100% - 2rem); height: calc(var(--header-height-on-desktop) - var(--topbar-height)); color: transparent; pointer-events: none; } #header h2 { pointer-events: none; } #header h2 span { --wght: 500; display: block; margin-top: calc(((var(--header-height-on-desktop) / 2) + (var(--header-h1-font-size) / 2) - var(--header-h2-font-size) + 0.675em)); margin-left: calc(var(--header-height-on-desktop) - 0.5rem); color: transparent; font-family: var(--title-font); font-size: var(--header-h2-font-size); font-weight: var(--wght); line-height: 1; text-shadow: none; } #header h2 span::before { content: var(--header-subtitle, "SECURE, CONTAIN, PROTECT"); color: rgb(var(--swatch-headerh2-color)); text-shadow: none; } #header-extra-div-1, #header-extra-div-2 { display: none; } /* ===SEARCH BOX=== */ /* Mobile Search Box by 7happy7 */ #search-top-box-input, #navi-bar, #navi-bar-shadow { display: inline-block; } #search-top-box { display: flex; position: absolute; z-index: 12; top: 1.5em; right: calc(3% - 0.25em); align-items: center; justify-content: center; width: auto; height: var(--search-height); transform: translateY(-50%); font-size: calc(var(--base-font-size) * (13 / 15)); } #search-top-box, #search-top-box * { box-sizing: border-box; margin: 0; padding: 0; transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), right 200ms cubic-bezier(0.4, 0, 0.2, 1), width 600ms cubic-bezier(0.4, 0, 0.2, 1), padding 600ms cubic-bezier(0.4, 0, 0.2, 1), max-width 600ms cubic-bezier(0.4, 0, 0.2, 1); border: none; will-change: box-shadow, font-variation-settings, font-weight, background-color, color, right, width, padding, max-width; } #search-top-box:focus-within, #search-top-box:focus-within *, #search-top-box:focus-within *::before, #search-top-box:focus-within *::after { margin: 0; padding: 0; transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), right 200ms cubic-bezier(0.4, 0, 0.2, 1), width 300ms cubic-bezier(0.4, 0, 0.2, 1), padding 300ms cubic-bezier(0.4, 0, 0.2, 1), max-width 300ms cubic-bezier(0.4, 0, 0.2, 1); will-change: box-shadow, font-variation-settings, font-weight, background-color, color, right, width, padding, max-width; } #search-top-box:focus-within { background: rgba(var(--search-focus-textbox-bg-color),0.7); box-shadow: calc(var(--search-height) / 2 * -1) 0 calc(var(--search-height) / 2) rgba(var(--search-focus-textbox-bg-color)); } #search-top-box::before, #search-top-box::after { content: " "; position: absolute; top: 0; right: 0; width: var(--search-height); height: 100%; } #search-top-box::before { z-index: 14; background-color: rgb(var(--search-icon-color)); color: rgb(var(--swatch-text-tertiary-color)); text-align: center; cursor: pointer; pointer-events: none; -webkit-mask-size: calc(var(--search-height) / 2) calc(var(--search-height) / 2); mask-size: calc(var(--search-height) / 2) calc(var(--search-height) / 2); -webkit-mask-position: center center; mask-position: center center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-image: var(--search-icon-mask); mask-image: var(--search-icon-mask); } #search-top-box:not(:focus-within):hover::before { background-color: rgb(var(--search-icon-hover-color)); } #search-top-box:focus-within::before { background-color: rgb(var(--search-icon-hover-color)); } #search-top-box::after { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); z-index: 13; background-color: rgb(var(--search-icon-focus-bg-color)); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #search-top-box:not(:focus-within)::after { --clip-path: polygon( 100% 0, 100% 0, 100% 100%, 100% 100% ); background-color: rgb(var(--search-icon-focus-bg-color),0); } #search-top-box form[id="search-top-box-form"] { display: flex; visibility: visible; position: relative; right: 0; max-width: 100%; height: var(--search-height); } #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"] input { position: relative; top: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #search-top-box form[id="search-top-box-form"] input[type="text"] { position: absolute; z-index: 13; right: 0; width: var(--search-width); max-width: var(--search-width); height: 100%; padding: 0 var(--search-height) 0 1em; outline: 0 solid rgb(var(--search-focus-outline-color)); background-color: rgb(var(--search-icon-hover-bg-color),0.7); box-shadow: 0 0 0 0.125rem rgb(var(--search-focus-outline-color)); color: rgba(var(--search-focus-textbox-text-color)); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { max-width: var(--search-height); padding: 0; outline-width: 0; background-color: rgba(var(--search-icon-hover-bg-color),0); box-shadow: 0 0 0 0 rgb(var(--search-focus-outline-color)); color: rgba(var(--search-textbox-text-color)); cursor: pointer; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"]:hover { background-color: rgba(var(--search-icon-hover-bg-color),1); } #search-top-box form[id="search-top-box-form"] input[type="submit"] { visibility: visible; position: absolute; z-index: 14; right: 0; width: var(--search-height); height: var(--search-height); outline: 0 solid rgb(var(--search-focus-outline-color)); background-color: rgba(0, 0, 0, 0); box-shadow: 0 0 0 0.125rem rgb(var(--search-focus-outline-color)); color: transparent; font-size: calc(var(--base-font-size) * (13 / 15)); cursor: pointer; pointer-events: all; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"] { box-shadow: 0 0 0 0 rgb(var(--search-focus-outline-color)); pointer-events: none; } /* ===LOGIN BOX=== */ #login-status { --wght: var(--ui-wght); display: flex; position: absolute; z-index: 11; top: 1.5em; right: calc(3% + var(--search-height) - 0.25em);; align-items: center; justify-content: center; height: 2em; margin: 0 0 0 0.5em; transform: translateY(-50%); transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1); color: rgb(var(--login-line-divider-color)); font-family: var(--UI-font); font-size: 0.9em; font-weight: var(--wght); white-space: nowrap; } #search-top-box:focus-within ~ #login-status { opacity: 0; } #login-status span.printuser a:first-of-type { width: 1.75em; } /* Not Logged In Styling */ #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-create-account, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-sign-in { margin: 0 1em; background-color: rgb(var(--ui-button-bg)); color: rgb(var(--ui-button-txt)); } #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-create-account:hover, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-create-account:active, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-sign-in:hover, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-sign-in:active { background-color: rgba(var(--ui-button-hover-bg), 1); color: rgb(var(--ui-button-hover-txt)); } #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-create-account:focus-within, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-sign-in:focus-within { background-color: rgba(var(--ui-button-hover-bg), 1); color: rgb(var(--ui-button-hover-txt)); } #login-status span.printuser { --wght: var(--ui-wght); margin-right: 0.5em; color: rgb(var(--login-username-color)); font-weight: var(--wght); } #login-status a[href*="account/messages"] { color: rgb(var(--login-myaccount-color)); } #login-status a#my-account { --wght: var(--ui-wght); display: flex; align-items: center; padding: 0 0.5em; transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-decoration 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), text-decoration 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), text-decoration 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-decoration 200ms cubic-bezier(0.4, 0, 0.2, 1); background-color: transparent; box-shadow: inset 0 0 0 0 rgb(var(--login-myaccount-hover-bg-color)); color: rgb(var(--login-myaccount-color)); font-weight: var(--wght); -webkit-text-decoration: underline rgb(var(--login-myaccount-underline-color)) 0.125em; text-decoration: underline rgb(var(--login-myaccount-underline-color)) 0.125em; } #login-status a#my-account:hover, #login-status a#my-account:active { --wght: var(--ui-hvr-wght); box-shadow: inset 0 -2em 0 0 rgb(var(--login-myaccount-hover-bg-color)); color: rgb(var(--login-myaccount-hover-color)); font-weight: var(--wght); -webkit-text-decoration: underline rgb(var(--login-myaccount-underline-color)) 0; text-decoration: underline rgb(var(--login-myaccount-underline-color)) 0; } #login-status a#my-account:focus-within { --wght: var(--ui-hvr-wght); box-shadow: inset 0 -2em 0 0 rgb(var(--login-myaccount-hover-bg-color)); color: rgb(var(--login-myaccount-hover-color)); font-weight: var(--wght); -webkit-text-decoration: underline rgb(var(--login-myaccount-underline-color)) 0; text-decoration: underline rgb(var(--login-myaccount-underline-color)) 0; } #login-status #account-topbutton { --clip-path: polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% ); position: relative; width: var(--account-height); height: var(--account-height); margin: 0; padding: 0; transition: -webkit-clip-path 100ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 100ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 100ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 100ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--login-arrow-color)); color: transparent; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status #account-options { display: block !important; position: absolute; z-index: 12; top: 1.5rem; right: 0; width: 10em; margin: 0.25em 0 0 0; padding: 0; overflow: hidden; transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; background-color: rgb(var(--login-dropdown-bg-color)); background-image: var(--login-dropdown-bg-image); pointer-events: none; } #login-status #account-topbutton:focus + #account-options, #login-status #account-topbutton:active + #account-options, #login-status #account-options:focus-within { opacity: 1; pointer-events: all; } /* Without this, touchscreen doesn't work */ @media (pointer: coarse) { #login-status #account-topbutton:hover + #account-options, #login-status #account-options:hover { opacity: 1; pointer-events: all; } } #login-status #account-options * { margin: 0; padding: 0; } #login-status #account-options ul { display: grid; grid-auto-rows: 2em; grid-template-columns: 1fr 1fr; flex-grow: 1; align-items: center; justify-content: center; font-size: 0.85em; } #login-status #account-options ul li { position: relative; } #login-status #account-options ul li, #login-status #account-options ul li a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } #login-status #account-options a { --box-shadow: rgba(var(--login-dropdown-border-color)); --wght: var(--ui-wght); position: relative; flex-grow: 1; height: 100%; max-height: 2em; padding: 0 0.25em; transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 150ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 150ms cubic-bezier(0.4, 0, 0.2, 1); box-shadow: inset 0 0 0 0.0625rem var(--login-dropdown-border-color); font-weight: var(--wght); } #login-status #account-options li > a, #login-status #account-options li > a:visited { color: rgb(var(--login-dropdown-text-color)); } #login-status #account-options li > a:hover, #login-status #account-options li > a:active { --wght: var(--ui-hvr-wght); color: rgb(var(--login-dropdown-text-hover-color)); font-weight: var(--wght); text-decoration: none; } #login-status #account-options li > a:focus-within { --wght: var(--ui-hvr-wght); color: rgb(var(--login-dropdown-text-hover-color)); font-weight: var(--wght); text-decoration: none; } #login-status #account-options li > a[href*="/messages"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 100%; font-size: 0; } #login-status #account-options li > a[href*="/messages"]::after { content: "Messages"; position: absolute; left: 50%; transform: translateX(-50%); font-size: calc(var(--base-font-size) * 0.765); pointer-events: none; } #login-status #account-options li > a::before { --clip-path: polygon( 0 0, 0 0, 0 100%, 0 100% ); content: " "; position: absolute; z-index: -1; top: 0; width: 100%; height: 100%; transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--login-dropdown-bg-hover-color)); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status #account-options li > a:hover::before, #login-status #account-options li > a:active::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #login-status #account-options li > a:focus-within::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } /* ===TOP BAR=== */ /* Hide Mobile Top Bar on Desktop */ div.mobile-top-bar { display: none; position: relative; z-index: 9999; bottom: 0; left: 1rem; -webkit-filter: unset; filter: unset; } #header div#top-bar { --wght: var(--ui-wght); display: inline-flex; position: initial; z-index: 50; flex-wrap: nowrap; width: 100%; height: var(--topbar-height-on-desktop); margin: var(--header-height-on-desktop) 0 1.75rem 0; padding: 0; font-family: var(--UI-font, var(--header-font)); font-size: calc(var(--base-font-size) * 0.85); font-weight: var(--wght); } /* ul */ #header div[class*="top-bar"] > ul { display: flex; z-index: 20; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; width: 90vw; max-width: var(--header-width-on-desktop,61.25rem); height: 100%; margin: 0; padding: 0; letter-spacing: 0.0625rem; line-height: 0; text-align: center; } /* ul > li */ #header div[class*="top-bar"] > ul > li { display: inline-flex; position: relative; flex-grow: 2; flex-shrink: 2; width: auto; margin: 0; padding: 0; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); list-style: outside none none; cursor: pointer; } /* ul > li > a */ #header div[class*="top-bar"] > ul > li > a { --wght: calc(var(--ui-wght) + 100); display: inline-flex; position: relative; align-items: center; justify-content: center; width: 100%; height: calc(100% - 0.6em); padding: 0.3em; overflow: hidden; transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1); border: none; background-color: transparent; color: rgb(var(--topmenu-category-color)); font-weight: var(--wght); line-height: 1; text-decoration: none; white-space: normal; } #header div[class*="top-bar"] > ul > li:hover > a, #header div[class*="top-bar"] > ul > li:active > a { --wght: var(--ui-hvr-wght); color: rgb(var(--topmenu-category-hover-color)); font-weight: var(--wght); } #header div[class*="top-bar"] > ul > li:focus-within > a { --wght: var(--ui-hvr-wght); color: rgb(var(--topmenu-category-hover-color)); font-weight: var(--wght); } /* Sliding top/bottom borders on top-bar links */ #header div[class*="top-bar"] > ul > li > a::before, #header div[class*="top-bar"] > ul > li > a::after { content: " "; position: absolute; width: 100%; height: calc(0.0625rem * 3); transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--topmenu-hover-border-color)); } #header div[class*="top-bar"] > ul > li > a::before { --clip-path: polygon( 0 0, 0 0, 0 100%, 0 100% ); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); top: 0; left: 0; } #header div[class*="top-bar"] > ul > li > a::after { --clip-path: polygon( 100% 0, 100% 0, 100% 100%, 100% 100% ); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); right: 0; bottom: 0; } #header div[class*="top-bar"] > ul > li:hover > a::before, #header div[class*="top-bar"] > ul > li:active > a::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #header div[class*="top-bar"] > ul > li:focus-within > a::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #header div[class*="top-bar"] > ul > li:hover > a::after, #header div[class*="top-bar"] > ul > li:active > a::after { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #header div[class*="top-bar"] > ul > li:focus-within > a::after { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #header div[class*="top-bar"] > ul > li:hover > a, #header div[class*="top-bar"] > ul > li:active > a { --wght: calc(var(--ui-hvr-wght) + 100); background-color: rgb(var(--topmenu-category-hover-bg)); font-weight: var(--wght); } #header div[class*="top-bar"] > ul > li:focus-within > a { --wght: calc(var(--ui-hvr-wght) + 100); background-color: rgb(var(--topmenu-category-hover-bg)); font-weight: var(--wght); } /* any ul after li */ #header div[class*="top-bar"] li ul { display: flex; position: relative; align-items: center; justify-content: center; width: 100%; margin: 0; padding: 0; border-collapse: collapse; transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; } /* any li after ul */ #header div[class*="top-bar"] > ul li:hover, #header div[class*="top-bar"] > ul li:active { /* Adding a slight bg colour change before the :before obscures it */ background-color: rgba(var(--dark-accent), 0.05); } #header div[class*="top-bar"] > ul li:focus-within { background-color: rgba(var(--dark-accent), 0.05); } /* any a after li */ #header div[class*="top-bar"] li a { transition: font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); } #header div[class*="top-bar"] li:hover a, #header div[class*="top-bar"] li:active a { text-decoration: none; } #header div[class*="top-bar"] li a:focus-within { text-decoration: none; } /* DROPDOWN MENU */ /* ul > li > ul */ #header div[class*="top-bar"] > ul > li > ul { --box-shadow: rgba(var(--dropdown-border-color)); display: flex; visibility: visible; position: absolute; z-index: 20; left: 0; box-sizing: border-box; flex-direction: column; flex-wrap: nowrap; align-self: flex-start; width: auto; min-width: 100%; max-width: var(--header-width-on-desktop,61.25rem); margin-top: var(--topbar-height-on-desktop); border-top: none; background: rgba(var(--dropdown-bg-color)); box-shadow: 0 0.125rem 0.375rem var(--box-shadow), inset 0 0 0 0.0625rem var(--box-shadow); pointer-events: none; } #header div[class*="top-bar"] > ul > li:hover > ul, #header div[class*="top-bar"] > ul > li:active > ul { opacity: 1; pointer-events: all; } #header div[class*="top-bar"] > ul > li:focus-within > ul { opacity: 1; pointer-events: all; } #header div[class*="top-bar"] > ul:first-of-type > li:last-of-type > ul { right: 0; left: auto; } /* any li > a after top-bar > ul > li > ul */ /* Background diagonal hover color on dropdown links */ #header div[class*="top-bar"] > ul > li > ul li > a { --wght: var(--ui-wght); /* Text Positioning */ display: flex; position: relative; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 1em; overflow: hidden; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); border: 0rem solid rgba(0, 0, 0, 0); background: rgba(var(--dropdown-links-bg-color)); color: rgb(var(--dropdown-links-color)); font-size: calc(var(--base-font-size) * (4 / 5)); font-weight: var(--wght); text-align: center; white-space: nowrap; } #header div[class*="top-bar"] > ul > li > ul li > a::before { --clip-path: polygon( 0 0, 0 0, 0 100%, 0 100% ); content: " "; position: absolute; z-index: -1; top: 0; width: 100%; height: 100%; transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; background-color: rgb(var(--dropdown-links-hover-bg-color)); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #header div[class*="top-bar"] > ul > li > ul li:hover > a, #header div[class*="top-bar"] > ul > li > ul li:active > a { --wght: var(--ui-hvr-wght); color: rgb(var(--dropdown-links-hover-color)); font-weight: var(--wght); } #header div[class*="top-bar"] > ul > li > ul li:focus-within > a { --wght: var(--ui-hvr-wght); color: rgb(var(--dropdown-links-hover-color)); font-weight: var(--wght); } #header div[class*="top-bar"] > ul > li > ul li:hover > a::before, #header div[class*="top-bar"] > ul > li > ul li:active > a::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } #header div[class*="top-bar"] > ul > li > ul li:focus-within > a::before { --clip-path: polygon( -15% 0, 115% 0, 100% 100%, 0 100% ); } /* ul > li ul > li */ #header div[class*="top-bar"] > ul > li ul > li { display: flex; visibility: visible; position: relative; box-sizing: border-box; align-items: center; justify-content: center; width: 100%; height: 2rem; margin: 0; padding: 0; overflow: visible; border-collapse: collapse; transition: background-color 80ms cubic-bezier(0.4, 0, 0.2, 1); box-shadow: inset 0 0 0 0.0625rem var(--box-shadow); word-break: normal; /* Prevent splitting in half onto the next column */ -moz-column-break-inside: avoid; break-inside: avoid; } /* ul > li > ul > li > ul */ /* Flyout Nested Menus */ #header div[class*="top-bar"] > ul > li > ul > li ul { display: flex; position: absolute; z-index: 5; top: 0; left: calc(100% - 0.0625rem); box-sizing: content-box; flex-direction: column; flex-wrap: nowrap; width: auto; height: auto; margin: 0; transition: opacity 80ms cubic-bezier(0.4, 0, 0.2, 1), background-color 80ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; background-color: rgba(var(--dropdown-bg-color)); pointer-events: none; } #header div[class*="top-bar"] > ul > li > ul > li:hover ul, #header div[class*="top-bar"] > ul > li > ul > li:active ul, #header div[class*="top-bar"] > ul > li > ul > li:hover ul:hover, #header div[class*="top-bar"] > ul > li > ul > li:active ul:active { opacity: 1; pointer-events: all; } #header div[class*="top-bar"] > ul > li > ul > li:focus-within ul, #header div[class*="top-bar"] > ul > li > ul > li:focus-within ul:focus-within { opacity: 1; pointer-events: all; } /* ul > li > ul li > ul */ /* Prevent flyout menus from disappearing when moving to them diagonally */ #header div[class*="top-bar"] > ul > li > ul li > ul::before { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 0 ); content: " "; position: absolute; z-index: 5; top: 2rem; right: 100%; width: 50%; height: calc(100% - 2rem); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } /* Images in Dropdown Menu Support */ #header div[class*="top-bar"] > ul > li > ul > li > img { position: initial; padding: 0 0.25rem; padding-left: 0; } #header div[class*="top-bar"] > ul > li > ul > li > a.topbar-link-w-img { justify-content: start; padding-left: 2.5rem; text-align: left; } #header div[class*="top-bar"] > ul > li > ul > li > a.topbar-link-w-img img { position: abslute; left: 0; } /* Backdrop Filter Blur Support */ @supports ((-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter: blur(1rem))) { #header div[class*="top-bar"] ul > li > ul { -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-backdrop-filter 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: backdrop-filter 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: backdrop-filter 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-backdrop-filter 200ms cubic-bezier(0.4, 0, 0.2, 1); } #header div[class*="top-bar"] ul > li:hover > ul, #header div[class*="top-bar"] ul > li:active > ul { -webkit-backdrop-filter: blur(0.125rem); backdrop-filter: blur(0.125rem); } #header div[class*="top-bar"] ul > li:focus-within > ul { -webkit-backdrop-filter: blur(0.125rem); backdrop-filter: blur(0.125rem); } } /* ===COMMON THEME COMPATABILITY=== */ .topbar_arrow { top: initial; } #top-bar ul li.homebutton-li, #top-bar ul li.inline-switch { max-width: var(--topbar-height-on-desktop); } #top-bar ul li a.homebutton { background-image: initial; } #top-bar ul li .homebutton, #top-bar ul li:hover .homebutton, #top-bar ul li .lightbulb .lightbulb-mask, #top-bar ul li:hover .lightbulb .lightbulb-mask, #top-bar > .ct-theme-switch .lightbulb .lightbulb-mask, #top-bar > .ct-theme-switch:hover .lightbulb .lightbulb-mask { width: 100%; background-color: rgb(var(--topmenu-category-color)) !important; background-image: initial; color: transparent !important; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 1em 1em; mask-size: 1em 1em; -webkit-mask-position: center center; mask-position: center center; } #top-bar ul li:focus-within .homebutton, #top-bar ul li:focus-within .lightbulb .lightbulb-mask, #top-bar > .ct-theme-switch:focus-within .lightbulb .lightbulb-mask { width: 100%; background-color: rgb(var(--topmenu-category-color)) !important; background-image: initial; color: transparent !important; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 1em 1em; mask-size: 1em 1em; -webkit-mask-position: center center; mask-position: center center; } #top-bar ul li .homebutton { -webkit-mask-image: var(--homebutton-mask); mask-image: var(--homebutton-mask); } #top-bar ul li:hover .homebutton, #top-bar ul li:active .homebutton { -webkit-mask-image: var(--homebutton-mask); mask-image: var(--homebutton-mask); } #top-bar ul li:focus-within .homebutton { -webkit-mask-image: var(--homebutton-mask); mask-image: var(--homebutton-mask); } #top-bar ul li .lightbulb .lightbulb-mask, #top-bar > .ct-theme-switch .lightbulb .lightbulb-mask { -webkit-mask-image: var(--lightbulb-mask); mask-image: var(--lightbulb-mask); } #top-bar ul li:hover .lightbulb .lightbulb-mask, #top-bar ul li:active .lightbulb .lightbulb-mask, #top-bar > .ct-theme-switch:hover .lightbulb .lightbulb-mask, #top-bar > .ct-theme-switch:active .lightbulb .lightbulb-mask { -webkit-mask-image: var(--lightbulb-mask); mask-image: var(--lightbulb-mask); } #top-bar ul li:focus-within .lightbulb .lightbulb-mask, #top-bar > .ct-theme-switch:focus-within .lightbulb .lightbulb-mask { -webkit-mask-image: var(--lightbulb-mask); mask-image: var(--lightbulb-mask); } #top-bar > .ct-theme-switch { display: none; /* Hiding since BHL does not support this feature */ position: absolute; top: 3.5em; right: calc(3% - 0.25em); } #top-bar .ct-theme-switch a { display: flex; align-items: center; justify-content: center; width: 2em; height: 2em; border-radius: 50%; font-size: calc(var(--base-font-size) * 0.9); } #top-bar > .ct-theme-switch .lightbulb, #top-bar > .ct-theme-switch:hover .lightbulb, #top-bar > .ct-theme-switch:active .lightbulb { border: 0.125rem solid rgb(var(--swatch-tertiary-color)); border-radius: 1.0625rem; box-shadow: 0 0 0.3125rem 0.3125rem rgba(0, 0, 0, 0.1), inset 0 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.3); } #top-bar > .ct-theme-switch:focus-within .lightbulb { border: 0.125rem solid rgb(var(--swatch-tertiary-color)); border-radius: 1.0625rem; box-shadow: 0 0 0.3125rem 0.3125rem rgba(0, 0, 0, 0.1), inset 0 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.3); } #top-bar > .ct-theme-switch .lightbulb { background: rgb(var(--swatch-menubg-medium-dark-color)); } #top-bar > .ct-theme-switch:hover .lightbulb, #top-bar > .ct-theme-switch:active .lightbulb { background: rgb(var(--swatch-menubg-black-color)); } #top-bar > .ct-theme-switch:focus-within .lightbulb { background: rgb(var(--swatch-menubg-black-color)); } #top-bar > .ct-theme-switch .lightbulb .lightbulb-mask, #top-bar > .ct-theme-switch:hover .lightbulb .lightbulb-mask, #top-bar > .ct-theme-switch:active .lightbulb .lightbulb-mask { background-color: rgb(var(--swatch-text-secondary-color)) !important; } #top-bar > .ct-theme-switch:focus-within .lightbulb .lightbulb-mask { background-color: rgb(var(--swatch-text-secondary-color)) !important; } /* ===MOBILE HEADER=== */ @media only screen and (max-width: 56.25rem) { /* ===MOBILE DIRECTORY=== 1. *MAIN 2. *LOGIN/SEARCH BOX 3. *TOP BAR =============== */ /* Removing Scrollbar to deal with horizontal overflow and still allow sticky scrolling */ :root { overflow: -moz-scrollbars-none; scrollbar-width: none; } ::-webkit-scrollbar { width: 0; background: transparent; } ::-webkit-scrollbar-thumb { background: rgb(var(--bright-accent)); } /* ***MAIN*** */ :root { --header-h1-font-size: calc(1.15rem + (2.405 - 1.15) * ((var(--header-width-on-mobile,100vw) - 18.75rem) / (48 - 18.75))); --header-h2-font-size: calc(0.5rem + (0.945 - 0.5) * ((var(--header-width-on-mobile, 100vw) - 18.75rem) / (48 - 18.75))); } body { background-size: 100% var(--header-height-on-mobile), 100% var(--final-header-height-on-mobile), 100% var(--background-gradient-distance); } div#container-wrap { background-size: 100% var(--header-height-on-mobile); } #header { --size: calc(var(--final-header-height-on-mobile) - 0.875rem); --y-offset: 1.5rem; position: -webkit-sticky; position: sticky; top: calc(var(--header-height-on-mobile) * -1); width: var(--header-width-on-mobile, 100vw); height: var(--header-height-on-mobile); margin: 0; background-image: var(--logo-image); background-repeat: no-repeat, repeat; background-position: calc((var(--header-height-on-mobile) - 0.75rem) - var(--size)) calc(((var(--size) * -1) + var(--header-height-on-mobile) + var(--y-offset)) / 2); background-size: var(--size), 100% var(--header-height-on-mobile); } #header, div.mobile-top-bar { left: 0; max-width: 100%; } #header h1 { max-height: var(--header-height-on-mobile); } #header h1 a { margin-top: calc(((var(--header-height-on-mobile) / 2)) - 1.345rem); } #header > h1 > a > span { height: var(--header-height-on-mobile); } #header h2 span { margin-top: calc(((var(--header-height-on-mobile) / 2) + (var(--header-h1-font-size) / 2) + 0.5rem)); line-height: 1; } /* ***LOGIN/SEARCH BOX*** */ #search-top-box { top: 2em; right: 3%; } #login-status { top: 2em; right: calc(3% + var(--account-height) + 0.25em); transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1); color: transparent; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #login-status:hover, #login-status:active { color: rgb(var(--login-line-divider-color)); pointer-events: all; -webkit-user-select: initial; -moz-user-select: initial; -ms-user-select: initial; user-select: initial; } #login-status:focus-within { color: rgb(var(--login-line-divider-color)); pointer-events: all; -webkit-user-select: initial; -moz-user-select: initial; -ms-user-select: initial; user-select: initial; } #login-status:hover #account-options, #login-status:active #account-options { pointer-events: all; } #login-status:focus-within #account-options { pointer-events: all; } #login-status > *:not(#account-topbutton):not([href*="account/messages"]) { --clip-path: polygon( 100% 0, 100% 0, 100% 100%, 100% 100% ); transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-decoration 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), text-decoration 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), text-decoration 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-decoration 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status:hover > *:not(#account-topbutton):not([href*="account/messages"]), #login-status:active > *:not(#account-topbutton):not([href*="account/messages"]) { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); opacity: 1; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status:focus-within > *:not(#account-topbutton):not([href*="account/messages"]) { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); opacity: 1; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status #account-topbutton { margin-left: 0; 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: clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); background-color: transparent; pointer-events: all; } #login-status:hover #account-topbutton { background-color: rgb(var(--login-arrow-color)); } #login-status::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgba(var(--login-mobile-icon-color),0); cursor: pointer; pointer-events: all; -webkit-mask-image: var(--user-account-mask); mask-image: var(--user-account-mask); -webkit-mask-size: calc(var(--account-height) - 0.5em); mask-size: calc(var(--account-height) - 0.5em); -webkit-mask-position: center right; mask-position: center right; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } #login-status::before { z-index: 2; background-color: rgba(var(--login-mobile-icon-color),1); } #login-status:hover::before { background-color: rgba(var(--login-mobile-icon-hover-color),1); } #login-status:hover::before, #login-status:hover::after, #login-status:active::before, #login-status:active::after { background-color: rgba(var(--login-mobile-icon-hover-bg-color),0); cursor: auto; pointer-events: none; } #login-status:focus-within::before, #login-status:focus-within::after { background-color: rgba(var(--login-mobile-icon-hover-bg-color),0); cursor: auto; pointer-events: none; } #login-status #account-topbutton { --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); background-color: rgba(var(--login-arrow-color),0); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status:hover #account-topbutton, #login-status:active #account-topbutton { --clip-path: polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% ); background-color: rgb(var(--login-arrow-color)); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status:focus-within #account-topbutton { --clip-path: polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% ); background-color: rgb(var(--login-arrow-color)); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status #account-options { margin: 0; } #login-status a[href*="account/messages"] { color: rgb(var(--login-myaccount-color)); pointer-events: all; } /* ***TOP BAR*** */ #header div#top-bar { height: var(--topbar-height-on-mobile); margin: calc(var(--header-height-on-mobile)) 0 1.75rem 0; } #header div.top-bar { display: none; } div.mobile-top-bar { display: flex; position: static; z-index: 9999; top: 0; right: 0; left: 0; align-items: center; width: var(--header-width-on-mobile, 100vw); margin: 0; padding: 0; background: var( --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) ) ); } /* ul */ #header div[class*="top-bar"] > ul { width: calc(100% - var(--topbar-height-on-mobile)); } /* ul > li */ #header div[class*="top-bar"] > ul > li { position: inherit; } /* ul > li > a */ #header div[class*="top-bar"] > ul > li > a { background: none; font-size: 1.25em; } /* DROPDOWN MENU */ /* ul > li > ul */ #header div[class*="top-bar"] > ul > li > ul { display: grid; left: 50%; grid-template-columns: repeat(2, 50%); max-height: calc(100vh - 8rem); margin-top: var(--topbar-height-on-mobile); transform: translate(-50%, 0); } #header div[class*="top-bar"] > ul > li:hover > ul, #header div[class*="top-bar"] > ul > li:active > ul, #header div[class*="top-bar"] > ul > li > ul:hover, #header div[class*="top-bar"] > ul > li > ul:active { transform: translate(-50%, 0); } #header div[class*="top-bar"] > ul > li:focus-within > ul, #header div[class*="top-bar"] > ul > li > ul:focus-within { transform: translate(-50%, 0); } #header div[class*="top-bar"] > ul:first-of-type > li:last-of-type > ul { right: 0; left: 50%; } /* ul > li ul > li */ #header div[class*="top-bar"] > ul > li ul > li { max-width: calc(80vw + 0.0625rem); height: var(--topbar-height-on-mobile); max-height: calc((100vh - 15rem) / 10); text-align: center; } #header div[class*="top-bar"] > ul > li ul > li:nth-last-of-type(2):nth-of-type(even) { box-shadow: inset 0 0 0 0.0625rem var(--box-shadow), 0 0.0625rem 0 0 var(--box-shadow); } #header div[class*="top-bar"] > ul > li ul > li:last-of-type:nth-of-type(odd) { box-shadow: inset 0 0 0 0.0625rem var(--box-shadow), 0.0625rem 0 0 0 var(--box-shadow); } /* ul > li > ul li > a */ #header div[class*="top-bar"] > ul > li > ul li > a { --min-font-size: 1rem; --max-font-size: 1rem; font-size: var(--base-font-size); line-height: 1; white-space: inherit; } /* ul > li > ul > li ul */ /* Mobile Nested Menus */ #header div[class*="top-bar"] > ul > li > ul > li ul { top: 100%; width: 90%; } #header div[class*="top-bar"] > ul > li > ul > li:nth-of-type(odd) ul { left: 10%; } #header div[class*="top-bar"] > ul > li > ul > li:nth-of-type(even) ul { left: 0%; } /* Sidebar Menu Button */ #header div.open-menu { display: flex; width: var(--topbar-height-on-mobile); height: var(--topbar-height-on-mobile); } #header div.open-menu > p { display: inline-flex; align-content: stretch; align-items: stretch; width: 100%; height: 100%; margin: 0; padding: 0; font-size: 2.5em; } #header div.open-menu > p, #header div.open-menu > p > a { justify-content: center; } #header div.open-menu > p > a { --wght: 700; display: flex; flex: 2 0 100%; align-items: center; justify-content: center; /* Overriding Wikidot's Default Styling */ border: none !important; background-color: transparent !important; color: rgb(var(--mobile-topmenu-sidebar-button-color)) !important; font-weight: var(--wght); letter-spacing: 0.016em; text-align: center; text-decoration: none; } } /* INT SIDEBAR STYLING ============================= */ /* Styling specific to Int Branches' Headers /* ===DIRECTORY=== 1. =CZECH BRANCH 2. =FRENCH BRANCH 3. =GERMAN BRANCH 4. =GREEK BRANCH 5. =ITALIAN BRANCH 6. =JAPANESE BRANCH 7. =KOREAN BRANCH 8. =POLISH BRANCH 9. =PORTUGESE BRANCH 10. =RUSSIAN BRANCH 11. =SIMPLIFIED CHINESE BRANCH 12. =SPANISH BRANCH 13. =THAI BRANCH 14. =TRADITIONAL CHINESE BRANCH 15. =UKRAINIAN BRANCH */ /* ===CZECH BRANCH=== */ #login-status:lang(cs) #account-options li > a[href*="/messages"]::after { content: "Zprávy"; } /* ===FRENCH BRANCH=== */ /* ===GERMAN BRANCH=== */ @media only screen and (max-width:56.25rem) { #header:lang(de) div.open-menu { background-image: var(--gradient-topmenu-mobile); } } /* ===GREEK BRANCH=== */ #login-status:lang(el) #account-options li > a[href*="/messages"]::after { content: "Μηνύματα"; } /* ===ITALIAN BRANCH=== */ #login-status:lang(it) #account-options li > a[href*="/messages"]::after { content: "Messaggi"; } /* ===JAPANESE BRANCH=== */ #login-status:lang(ja) #account-options li > a[href*="/messages"]::after { content: "メッセージ"; } /* ===KOREAN BRANCH=== */ #login-status:lang(ko) #account-options li > a[href*="/messages"]::after { content: "메시지"; } /* ===POLISH BRANCH=== */ #login-status:lang(po) #account-options li > a[href*="/messages"]::after { content: "Wiadomości"; } /* ===PORTUGESE BRANCH=== */ #login-status:lang(pt-br) #account-options li > a[href*="/messages"]::after { content: "Mensagens"; } /* ===RUSSIAN BRANCH=== */ #top-bar:lang(ru) .list-pages-item, #top-bar:lang(ru) .list-pages-item .top-bar { height: 100%; } @media only screen and (max-width: 56.25rem) { #header:lang(ru) div[class*="top-bar"] > ul { height: var(--topbar-height-on-mobile); } #header:lang(ru) div[class*="top-bar"] > ul > li > a { font-size: 1.5em; } } /* ===SIMPLIFIED CHINESE BRANCH=== */ #login-status:lang(cn) #account-options li > a[href*="/messages"]::after { content: "消息"; } /* ===SPANISH BRANCH=== */ #login-status:lang(es) #account-options li > a[href*="/messages"]::after { content: "Mensajes"; } /* ===THAI BRANCH=== */ /* ===TRADITIONAL CHINESE BRANCH=== */ #login-status:lang(zh-tr) #account-options li > a[href*="/messages"]::after { content: "訊息"; } /* ===UKRAINIAN BRANCH=== */ /* ELEMENTS ============================= */ /* Modules, IMG blocks, text blocks, and other elements used outside of the structural html */ /* ===DIRECTORY=== 1. =TABVIEW 2. =BLOCKQUOTE 3. =FOOTNOTES & BIBLIOGRAPHY 4. =HOVER BLOCKS 5. =IMAGE BLOCK 6. =RATING MODULE 7. =TABLES 8. =TOC 9. =WARNING BOX 10. =LISTPAGES PAGER 11. =WIKIDOT USER ICONS 12. =AYERS' INFO MODULE 13. =SIDEBOX DIV 14. =MISC SMALL ELEMENTS 15. =FRONT PAGE ELEMENTS 15.1 =CONTENT PANEL 16. =MOBILE ELEMENTS 17. =PRINT FORMATTING =============== */ /* ===TABVIEW=== */ .yui-navset { z-index: 1; } .yui-navset .yui-nav { --clip-path: polygon( -0.0625rem -0.5rem, calc(100% + 0.0625rem) -0.5rem, calc(100% + 0.0625rem) 100%, -0.0625rem 100% ); display: flex; flex-wrap: wrap; width: calc(100% - 0.125rem); margin: 0 auto; zoom: unset; border: 0; box-shadow: 0 0.3125rem 0 0 var(--tab-bottom-border-color); font-family: var(--UI-font, var(--header-font)); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } .yui-navset .yui-nav a { border: unset; background-color: rgb(var(--tabs-bg)); color: rgb(var(--tabs-txt)); } .yui-navset .yui-nav li { display: flex; position: relative; flex-grow: 2; max-width: 100%; margin: 0; padding: 0; transform: translateY(0); transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1); border: none; background-color: rgb(var(--tabs-bg)); box-shadow: 0 0 0 0 rgb(var(--tabs-selected-outline)); will-change: box-shadow, color, background-color, transform; } .yui-navset .yui-nav li a, .yui-navset-top .yui-nav li a, .yui-navset-bottom .yui-nav li a { --wght: var(--ui-wght); display: flex; position: relative; align-items: center; justify-content: center; width: 100%; transition: background-color 160ms cubic-bezier(0.4, 0, 0.2, 1), color 160ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 160ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 160ms cubic-bezier(0.4, 0, 0.2, 1); font-weight: var(--wght); vertical-align: bottom; } .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:active, .yui-navset .yui-nav a:focus { --wght: var(--ui-hvr-wght); color: rgb(var(--tabs-hover-txt)); font-weight: var(--wght); } .yui-navset .yui-nav a:focus-within { --wght: var(--ui-hvr-wght); color: rgb(var(--tabs-hover-txt)); font-weight: var(--wght); } .yui-navset .yui-nav a::before { --clip-path: polygon( 0 calc(100% - 0.25rem), calc(100% + 1rem) calc(100% - 0.25rem), calc(100% + 1rem) calc(100% + 1rem), 0 calc(100% + 1rem) ); content: " "; position: absolute; z-index: 0; top: 0; left: -0.5%; width: 101%; height: 101%; transition: background-color 50ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 50ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 50ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--tabs-bottom-border-color)); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } .yui-navset .yui-nav li:hover a::before, .yui-navset .yui-nav li:active a::before, .yui-navset .yui-nav li:focus a::before { --clip-path: polygon( 0 0, calc(100% + 1rem) -1rem, calc(100% + 1rem) calc(100% + 1rem), 0 calc(100% + 1rem) ); background-color: rgb(var(--tabs-hover-bg)); } .yui-navset .yui-nav li:focus-within a::before { --clip-path: polygon( 0 0, calc(100% + 1rem) -1rem, calc(100% + 1rem) calc(100% + 1rem), 0 calc(100% + 1rem) ); background-color: rgb(var(--tabs-hover-bg)); } .yui-navset .yui-nav a em, .yui-navset .yui-nav .selected a em { top: 0; padding: 0.35em 0.75em; overflow: hidden; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; } .yui-navset .yui-nav li em { border: unset !important; /* Overwriting Wikidot Inline-Styling */ } /* Selected Tab */ .yui-navset .yui-nav .selected { z-index: 10; margin: 0; padding: 0; transform: translateY(-0.25rem); box-shadow: 0 0 0 0.25rem rgb(var(--tabs-selected-outline)); } .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em { border: none; border-color: transparent; } .yui-navset .yui-nav .selected a { --wght: var(--ui-hvr-wght); background-image: none; color: rgb(var(--tabs-selected-txt)) !important; /* Overwriting Wikidot Inline-Styling */ font-weight: var(--wght); } .yui-navset .yui-nav .selected a::before, .yui-navset .yui-nav .selected:hover a::before, .yui-navset .yui-nav .selected:focus a::before, .yui-navset .yui-nav .selected:active a::before { --clip-path: polygon( 0 0, calc(100% + 1rem) -1rem, calc(100% + 1rem) calc(100% + 1rem), 0 calc(100% + 1rem) ); background-color: rgb(var(--tabs-selected-bg)); } .yui-navset .yui-nav .selected:focus-within a::before { --clip-path: polygon( 0 0, calc(100% + 1rem) -1rem, calc(100% + 1rem) calc(100% + 1rem), 0 calc(100% + 1rem) ); background-color: rgb(var(--tabs-selected-bg)); } .yui-navset .yui-nav .selected a:hover, .yui-navset .yui-nav .selected a:active { /* Indicate that the currently selected tab is not clickable */ cursor: default; } .yui-navset .yui-nav .selected a:focus-within { /* Indicate that the currently selected tab is not clickable */ cursor: default; } .yui-navset .yui-content { background-color: rgba(var(--tabs-content-bg-color)); /* content background color */ } .yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content { /* content border */ zoom: unset; border-color: rgb(var(--tabs-content-border-color)); } /* ===BLOCKQUOTE=== */ blockquote, .blockquote, div.blockquote, [class*="blockquote"] { display: block; position: relative; margin: 0.5em 1.25rem; padding: 0.825em 1.25em; clear: both; border: none; background-color: rgba(var(--blockquote-bg-color)); box-shadow: inset 0 0 0 0.0625rem rgba(var(--blockquote-border-color), 0.5), inset 0.0625rem 0 0 0 rgba(var(--blockquote-border-color), 0.5), inset 0 -0.0625rem 0 0 rgba(var(--blockquote-border-color), 0.75); } blockquote> :first-child, .blockquote> :first-child, div.blockquote> :first-child, [class*="blockquote"]> :first-child { margin-top: 0; } blockquote> :last-child, .blockquote> :last-child, div.blockquote> :last-child, [class*="blockquote"]> :last-child { margin-bottom: 0; } .colorbar-quote { box-shadow: inset 0.25rem 0 0 0 rgba(var(--blockquote-colorbar-color)), -0.125rem 0 0.25rem 0 rgba(var(--blockquote-border-color), 0.25), inset 0.0625rem 0 0 0 rgba(var(--blockquote-border-color), 0.5), inset 0 -0.0625rem 0 0 rgba(var(--blockquote-border-color), 0.75); } @supports (display: flow-root) { blockquote, .blockquote, div.blockquote, .colorbar-quote [class*="blockquote"] { display: flow-root; } } /* ===FOOTNOTES & BIBLIOGRAPHY=== */ .footnotes-footer, .bibitems { display: block; position: relative; box-sizing: border-box; width: 95%; height: auto; margin: 1.5rem 1.5rem 0.5rem; padding: 0.15em 1em 1em 0; background-color: rgb(var(--footnotes-footer-bg-color)); box-shadow: inset 0.5em 0 0 0 rgba(var(--footnotes-footer-colorbar-color)); color: rgb(var(--footnotes-footer-text-color)); } .footnotes-footer { counter-reset: footnotes 0; } .bibitems { counter-reset: bibitems 0; } .footnotes-footer .title, .bibitems .title { --wght: 700; display: inline-block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-top: -0.75em; padding: 0 0.5em; background-color: rgb(var(--footnotes-footer-title-bg-color)); color: rgb(var(--footnotes-footer-title-text-color)); font-size: 1.25em; font-weight: var(--wght); } .footnotes-footer .footnote-footer { margin: 0.25em 0 0 6ch; } .bibitems .bibitem { margin: 0.25em 0 0 3ch; text-indent: 2ch; } .bibitems .bibitem::first-letter { font-size: 0; } .footnotes-footer a[href*="javascript"], .footnotes-footer a[href*="javascript"]:visited { --MONO: 1; --wght: calc(var(--ui-wght) + 100); display: inline-flex; position: relative; min-width: 2ch; margin: 0 0 0 -3ch; color: transparent; font-family: var(--mono-font); font-weight: var(--wght); } .footnotes-footer a[href*="javascript"]::before, .bibitems .bibitem::after { --MONO: 1; --wght: calc(var(--ui-wght) + 100); display: inline-flex; position: absolute; z-index: 2; top: 0; right: -25%; width: 100%; background-color: rgb(var(--footnotes-footer-bg-color)); font-family: var(--mono-font); font-weight: var(--wght); } .footnotes-footer a[href*="javascript"]::before { content: counter(footnotes) "."; display: inline-flex; justify-content: flex-end; transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1); color: rgb(var(--footnotes-footer-num-color)); counter-increment: footnotes; } @supports (font-feature-settings: inherit) { .footnotes-footer a[href*="javascript"]::before { transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); } } .footnotes-footer a[href*="javascript"]:hover::before, .footnotes-footer a[href*="javascript"]:active::before { --wght: calc(var(--ui-hvr-wght) + 100); color: rgb(var(--footnotes-footer-num-hover-color)); font-weight: var(--wght); } .footnotes-footer a[href*="javascript"]:focus-within::before { --wght: calc(var(--ui-hvr-wght) + 100); color: rgb(var(--footnotes-footer-num-hover-color)); font-weight: var(--wght); } .bibitems .bibitem { position: relative; } .bibitems .bibitem::after { content: counter(bibitems) "."; left: 0; width: -webkit-min-content; width: -moz-min-content; width: min-content; margin: 0 0 0 -2ch; color: rgb(var(--swatch-primary)); counter-increment: bibitems; } .bibitems .bibitem:nth-child(n+11)::after { width: calc(1em + 0.75ch); margin: 0 0 0 -2em; } /* ===HOVER BLOCKS=== */ .hovertip { width: min(50%, -webkit-fit-content) !important; width: min(50%, -moz-fit-content) !important; width: min(50%, fit-content) !important; max-width: calc(var(--body-width-on-desktop) - 2rem); -webkit-animation: fade-in 200ms cubic-bezier(0.4, 0, 0.2, 1) 100ms 1 alternate forwards; animation: fade-in 200ms cubic-bezier(0.4, 0, 0.2, 1) 100ms 1 alternate forwards; border: none !important; /* Overwriting JS-injected inline styling */ opacity: 0; background-color: rgb(var(--hoverblock-bg)) !important; /* Overwriting JS-injected inline styling */ color: rgb(var(--hoverblock-txt)); } .hovertip::before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; max-width: 100%; height: 100%; margin: 0; padding: 0; -webkit-animation: lift-in 200ms cubic-bezier(0.4, 0, 0.2, 1) 100ms 1 alternate forwards, slide-in 200ms cubic-bezier(0.4, 0, 0.2, 1) 100ms 1 alternate forwards; animation: lift-in 200ms cubic-bezier(0.4, 0, 0.2, 1) 100ms 1 alternate forwards, slide-in 200ms cubic-bezier(0.4, 0, 0.2, 1) 100ms 1 alternate forwards; background-color: transparent; box-shadow: 0 0 0 0 rgba(var(--swatch-alternate-color), 0.25), inset 0 0 0 0.0625rem rgb(var(--swatch-primary-darkest)); } .hovertip .content { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0.25em 0.5em; transform: translateY(0) translateX(0); -webkit-animation: slide-in 200ms cubic-bezier(0.4, 0, 0.2, 1) 100ms 1 alternate forwards; animation: slide-in 200ms cubic-bezier(0.4, 0, 0.2, 1) 100ms 1 alternate forwards; font-family: var(--UI-font); font-size: 0.9em; } .hovertip .footnote { display: flex; flex-direction: column; flex-wrap: wrap; width: 100%; height: 100%; margin: 0; padding: 0; } .hovertip .f-heading { --wght: 550; width: -webkit-max-content; width: -moz-max-content; width: max-content; height: 1.5em; margin: -0.75rem 0 0 -1rem; padding: 0.125em 0.25em; background-color: rgb(var(--hoverblock-header-bg)); color: rgb(var(--hoverblock-header-txt)); font-family: var(--UI-font); font-size: 0.96em; font-weight: var(--wght); } .hovertip .f-content { flex-grow: 2; margin: 0.125em 0; padding: 0 0.75rem; } .hovertip .f-footer { flex-grow: 2; align-self: flex-end; padding: 0.25rem 0.75rem; color: rgba(var(--hoverblock-footer-txt), 0.8); font-family: var(--UI-font); font-size: 0.8em; text-align: right; justify-self: flex-end; } /* ===IMAGE BLOCK=== */ .image-block, .scp-image-block { display: flex; flex-flow: column nowrap; align-items: center; min-width: 30%; box-shadow: 0 0 0 0.0625rem rgba(var(--swatch-tertiary-color), 1), -0.0625rem 0 0 0 rgba(var(--swatch-tertiary-color), 1), 0 0.0625rem 0 0 rgba(var(--swatch-tertiary-color), 0.75); } .image-block, .scp-image-block, .image-block *, .scp-image-block * { border: none; } .image-block *, .scp-image-block * { width: 100%; } .image-block.block-right, .scp-image-block.block-right { margin: 0 0 1em 2em; float: right; clear: right; } .image-block.block-left, .scp-image-block.block-left { margin: 0 2em 1em 0; float: left; clear: left; } .image-block.block-center, .scp-image-block.block-center { margin-right: auto; margin-left: auto; } .image-block img.image, .scp-image-block img.image { min-width: 100%; border: 0; } /* Overwriting img width set by Image Block component as it's is already placed on the parent div */ .image-block img.image[style*="width:"], .scp-image-block img.image[style*="width:"] { width: 100% !important; } .image-caption, .scp-image-caption { min-width: 100%; } .image-block .image-caption, .scp-image-block .scp-image-caption { --wght: 600; box-sizing: border-box; padding: 0.25em 0.5em; background-color: rgb(var(--swatch-secondary-color)); box-shadow: inset 0 0.0625rem 0 0 rgb(var(--swatch-tertiary-color), 0.75); font-size: 0.9em; font-weight: var(--wght); letter-spacing: 0.016em; line-height: 1.25; text-align: center; } .image-block .image-caption>p, .scp-image-block .scp-image-caption>p { margin: 0; padding: 0; } /* ===RATING MODULE=== */ :root { --rating-module-height: 1.3125em; } .page-rate-widget-box, #page-content .rate-box-with-credit-button { display: inline-flex; height: var(--rating-module-height); margin: 0 0 0.75rem 0; padding: 0; overflow: hidden; border: 0.0625rem solid rgba(var(--swatch-border-color), 0.15); border-bottom-width: 0; border-radius: 0; background-color: rgb(var(--rating-module-bg-color)); box-shadow: 0 0.125rem 0 0 rgb(var(--rating-module-bottom-border-color)); } /* Same rule as above, but specifically for the info module / credit button */ .rate-box-with-credit-button .page-rate-widget-box { border: none; border-radius: 0; background: none; box-shadow: none; } .page-rate-widget-box .rate-points, .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown, .page-rate-widget-box .cancel { display: block; margin: 0 0.125rem 0 0; border: none; } .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown, .page-rate-widget-box .cancel, .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a, .page-rate-widget-box .cancel a, /* Credit Button Rating Module Specific */ .rate-box-with-credit-button>.creditButton, .rate-box-with-credit-button>.creditButton>p { display: block; width: calc((var(--base-font-size) * (14 / 15)) * 1.5); height: 100%; padding: 0; line-height: var(--rating-module-height); text-align: center; text-transform: uppercase; } .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a { background: unset; background-color: none; background-color: transparent; } .page-rate-widget-box .rate-points, .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown, .page-rate-widget-box .cancel, .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a, .page-rate-widget-box .cancel a { --wght: 600; position: relative; background: transparent; color: rgb(var(--rating-module-text-color)); font-weight: var(--wght); } .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a, .page-rate-widget-box .cancel a { z-index: 0; } .page-rate-widget-box .cancel { font-size: 0.85em; } .page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover, .page-rate-widget-box .cancel a:hover, .page-rate-widget-box .rateup a:active, .page-rate-widget-box .ratedown a:active, .page-rate-widget-box .cancel a:active { text-decoration: none; } .page-rate-widget-box .rateup a:focus-within, .page-rate-widget-box .ratedown a:focus-within, .page-rate-widget-box .cancel a:focus-within { text-decoration: none; } .page-rate-widget-box .rateup a::after, .page-rate-widget-box .ratedown a::after, .page-rate-widget-box .cancel a::after { --clip-path: polygon( 0 100%, 100% 115%, 100% 100%, 0 115% ); content: " "; position: absolute; z-index: -1; top: 0; left: -0.5%; width: 101%; height: 101%; transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } .page-rate-widget-box .rateup a::after { background-color: rgba(var(--rating-module-button-plus-color), 1); } .page-rate-widget-box .ratedown a::after { background-color: rgba(var(--rating-module-button-negative-color), 1); } .page-rate-widget-box .cancel a::after { background-color: rgba(var(--rating-module-button-cancel-color), 1); } .page-rate-widget-box .rateup a:hover::after, .page-rate-widget-box .rateup a:active::after, .page-rate-widget-box .ratedown a:hover::after, .page-rate-widget-box .ratedown a:active::after, .page-rate-widget-box .cancel a:hover::after, .page-rate-widget-box .cancel a:active::after { --clip-path: polygon( 0 100%, 100% 115%, 100% 0, 0 -15% ); } .page-rate-widget-box .rateup a:focus-within::after, .page-rate-widget-box .ratedown a:focus-within::after, .page-rate-widget-box .cancel a:focus-within::after { --clip-path: polygon( 0 100%, 100% 115%, 100% 0, 0 -15% ); } .page-rate-widget-box .rate-points { display: flex; padding: 0 0.5em; /* !important is needed here to override styles loaded when Rate is clicked */ background-color: transparent !important; color: rgb(var(--rating-module-text-color)) !important; font-family: var(--UI-font); font-size: 0.85em; line-height: calc(var(--rating-module-height) * 1.25); text-transform: capitalize; } .page-rate-widget-box .rate-points .number { font-size: calc((var(--base-font-size) * (14 / 15)) * 1.2); } .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a, .page-rate-widget-box .cancel a, .page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover, .page-rate-widget-box .cancel a:hover, .page-rate-widget-box .rateup a:active, .page-rate-widget-box .ratedown a:active, .page-rate-widget-box .cancel a:active { color: transparent; } .page-rate-widget-box .rateup a:focus-within, .page-rate-widget-box .ratedown a:focus-within, .page-rate-widget-box .cancel a:focus-within { color: transparent; } .page-rate-widget-box .rateup a::before, .page-rate-widget-box .ratedown a::before, .page-rate-widget-box .cancel a::before { content: " "; position: absolute; z-index: 1; top: 0; left: 0; width: calc((var(--base-font-size) * (14 / 15)) * 1.5); height: 100%; background-color: rgb(var(--rating-module-text-color)); pointer-events: none; -webkit-mask-size: calc(var(--rating-module-height) - 0.5em); mask-size: calc(var(--rating-module-height) - 0.5em); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .page-rate-widget-box .rateup a::before { -webkit-mask-image: var(--rateup-mask); mask-image: var(--rateup-mask); } .page-rate-widget-box .ratedown a::before { -webkit-mask-image: var(--ratedown-mask); mask-image: var(--ratedown-mask); } .page-rate-widget-box .cancel a::before { -webkit-mask-image: var(--cancel-mask); mask-image: var(--cancel-mask); } .page-rate-widget-box .rateup a:hover::before, .page-rate-widget-box .ratedown a:hover::before, .page-rate-widget-box .cancel a:hover::before, .page-rate-widget-box .rateup a:active::before, .page-rate-widget-box .ratedown a:active::before, .page-rate-widget-box .cancel a:active::before { background-color: rgb(var(--rating-module-text-hover-color)); } .page-rate-widget-box .rateup a:focus-within::before, .page-rate-widget-box .ratedown a:focus-within::before, .page-rate-widget-box .cancel a:focus-within::before { background-color: rgb(var(--rating-module-text-hover-color)); } /* Heritage Rating Module */ .heritage-rating-module { display: inline-block; margin-right: 2em; margin-bottom: 0.625rem; padding: 0.125rem 0.5rem 0.125rem 0.3125rem; border: 0.0625rem solid rgba(var(--swatch-border-color), 0.15); border-bottom-width: 0; border-radius: 0; background-color: rgb(var(--rating-module-bg-color)); box-shadow: 0 0.125rem 0 0 rgb(var(--rating-module-bottom-border-color)); } .heritage-rating-module .page-rate-widget-box { margin-right: 0; margin-bottom: 0; box-shadow: none; } .heritage-rating-module .heritage-emblem { position: relative; top: -0.125rem; left: 0.125rem; width: 1rem; height: 1rem; margin-right: 0.125rem; float: left; overflow: visible; } .heritage-rating-module .heritage-emblem img { width: 1.25rem; height: 1.25rem; border: 0; } /* Info module */ /* These override the styles provided by the base Info Module so have been given a higher specificity with #page-content */ #page-content .creditRate { margin-right: 0; margin-bottom: 0; } #page-content .rate-box-with-credit-button>.creditButton:hover, #page-content .rate-box-with-credit-button>.creditButton:active { background: initial; } #page-content .rate-box-with-credit-button>.creditButton:focus-within { background: initial; } #page-content .rate-box-with-credit-button>.creditButton>p { display: block; position: relative; margin: 0; padding: 0; } #page-content .rate-box-with-credit-button>.creditButton>p, #page-content .rate-box-with-credit-button>.creditButton>p>a { width: 100%; height: 100%; } #page-content .rate-box-with-credit-button>.creditButton>p>a { display: flex; margin-left: 0; border-left: none; background-color: transparent; } #page-content .rate-box-with-credit-button>.creditButton>p>a::after { --clip-path: polygon( 0 100%, 100% 115%, 100% 100%, 0 115% ); content: " "; position: absolute; z-index: 0; top: 0; width: 100%; height: 100%; transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #page-content .rate-box-with-credit-button>.creditButton>p>a::after { background-color: rgba(var(--rating-module-text-color), 1); } #page-content .rate-box-with-credit-button>.creditButton>p>a:hover::after, #page-content .rate-box-with-credit-button>.creditButton>p>a:active::after { --clip-path: polygon( 0 100%, 100% 115%, 100% 0, 0 -15% ); } #page-content .rate-box-with-credit-button>.creditButton>p>a:focus-within::after { --clip-path: polygon( 0 100%, 100% 115%, 100% 0, 0 -15% ); } #page-content .rate-box-with-credit-button>.creditButton>p>a::before { --mask-image: var(--credit-button-mask); content: " "; position: absolute; z-index: 1; top: 0; left: 0; width: calc((var(--base-font-size) * (14 / 15)) * 1.5); height: 100%; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--rating-module-text-color)); pointer-events: none; -webkit-mask-image: var(--mask-image); mask-image: var(--mask-image); -webkit-mask-size: calc(var(--rating-module-height) - 0.375em); mask-size: calc(var(--rating-module-height) - 0.375em); -webkit-mask-position: center center; mask-position: center center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } #page-content .rate-box-with-credit-button>.creditButton>p>a:hover::before, #page-content .rate-box-with-credit-button>.creditButton>p>a:active::before { background-color: rgb(var(--rating-module-text-hover-color)); } #page-content .rate-box-with-credit-button>.creditButton>p>a:focus-within::before { background-color: rgb(var(--rating-module-text-hover-color)); } #page-content .rate-box-with-credit-button>.page-rate-widget-box { display: inline-flex; overflow: hidden; border-radius: 0; box-shadow: none; } /* Credit View Styling */ [id*="u-credit"], [id*="u-credit"] * { box-sizing: border-box; } [id*="u-credit"] div.modalbox>hr:first-of-type, [id*="u-credit"] div.modalbox>hr:last-of-type { display: none; } [id*="u-credit"], [id*="u-credit"] .fader, [id*="u-credit"] .fader iframe { width: 100vw !important; /* Overwriting Inline Styling */ max-width: 100vw !important; /* Overwriting Inline Styling */ height: 100% !important; /* Overwriting Inline Styling */ } [id*="u-credit"] .modalcontainer { display: flex; top: 50%; align-items: center; justify-content: center; margin: 0 auto; transform: translateY(-50%); color: rgb(var(--modal-body-text)); } [id*="u-credit"] div.modalbox { position: relative; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; padding: 0; border: none; border-radius: 0; background: rgb(var(--modal-bg)) !important; /* Important to overwrite inline styling */ box-shadow: inset 0 0 0 0.125rem rgba(var(--swatch-alternate-color), 0.25), 0.5rem 0.25rem 1rem 0 rgba(var(--swatch-alternate-color), 0.25); } [id*="u-credit"] div.modalbox>div:first-of-type { --wght: 600; display: flex; justify-content: flex-start; width: 100%; margin: 0; padding: 0.5em 1.25rem; background-color: rgb(var(--modal-header-bg)); background-size: 3rem 4.35rem; color: rgb(var(--modal-header-txt)); font-weight: var(--wght); text-transform: uppercase; } [id*="u-credit"] div.modalbox>div:first-of-type h2 { margin: 0; padding: 0; } [id*="u-credit"] .credit.first, [id*="u-credit"] .credit.otherwise { display: grid; width: auto; height: -webkit-max-content; height: -moz-max-content; height: max-content; max-height: calc(50vh - 7.5em); margin: 0 1rem; padding: 0; overflow-x: visible; overflow-y: auto; } [id*="u-credit"] .credit.first>p:not(:first-of-type) { width: 100%; margin: 0; padding: 1em 0 0 0; } [id*="u-credit"] .credit.first h1+p:not(:first-of-type) { margin-top: 0; } [id*="u-credit"] .credit.first>p:first-of-type { position: absolute; top: 0.5em; right: 0.5em; width: 1.25em; height: 1.25em; margin: 0; font-size: 1.25em; font-size: clamp(1.25em, 2vw, 1.5em); } [id*="u-credit"] .credit.first>p:first-of-type::after, [id*="u-credit"] .credit.first>p:first-of-type::before { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; pointer-events: none; } [id*="u-credit"] .credit.first>p:first-of-type::before { border-radius: 50%; background-color: rgb(var(--modal-bg)); } [id*="u-credit"] .credit.first>p:first-of-type::after { --mask-image: var(--cancel-mask); transform: rotate(0) scale(1); transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--modal-header-bg)); -webkit-mask-image: var(--mask-image); mask-image: var(--mask-image); -webkit-mask-size: 0.75em; mask-size: 0.75em; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } [id*="u-credit"] .credit.first>p:hover:first-of-type::after, [id*="u-credit"] .credit.first>p:active:first-of-type::after { transform: rotate(15deg) scale(1.1); } [id*="u-credit"] .credit.first>p:focus-within:first-of-type::after { transform: rotate(15deg) scale(1.1); } [id*="u-credit"] .close-credits { top: 0.3125em; right: 0; width: 1.25em; height: 1.25em !important; /* Overwrite inline styling */ transform: scale(1.5); opacity: 0; } [id*="u-credit"] div.creditBottomRate { width: 100%; height: -webkit-fit-content !important; height: -moz-fit-content !important; height: fit-content !important; /* Overwrite inline styling */ margin: 1rem 0 0.5em 0; padding: 1rem 0 0 0; box-shadow: 0 -0.0625rem 0 0 rgba(var(--rating-module-bottom-border-color), 0.2); } [id*="u-credit"] div.credit-back, [id*="u-credit"] a[href="#u-credit-otherwise"] { position: relative; width: 50%; min-width: 5em; height: 2em; margin: 1em auto; padding: 0.25em; } [id*="u-credit"] div.credit-back p, [id*="u-credit"] div.credit-back iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } [id*="u-credit"] div.credit-back::before, [id*="u-credit"] a[href="#u-credit-otherwise"] { --wght: var(--ui-wght); display: flex; z-index: 1; align-items: center; justify-content: center; width: auto; margin: 0 auto; padding: 0 0.5em; overflow: hidden; transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); border: 0.0625rem solid rgba(var(--ui-button-hover-outline), 0.05); outline: 0 solid rgb(var(--ui-button-hover-outline)); background-color: rgb(var(--ui-button-bg)); box-shadow: 0 0 0 0 rgb(var(--ui-button-bg)); color: rgb(var(--ui-button-txt)); font-family: var(--UI-font); font-weight: var(--wght); will-change: border-color, box-shadow, color, background-color, font-weight, font-variation-settings; } [id*="u-credit"] div.credit-back::before { content: "Back"; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } [id*="u-credit"] div.credit-back:hover::before, [id*="u-credit"] div.credit-back:active::before, [id*="u-credit"] a[href="#u-credit-otherwise"]:hover, [id*="u-credit"] a[href="#u-credit-otherwise"]:active { --wght: var(--ui-hvr-wght); border-color: transparent; outline: 0 solid rgb(var(--ui-button-hover-outline)); background-color: rgba(var(--ui-button-hover-bg), 1); box-shadow: 0 0 0 0.125rem rgb(var(--ui-button-hover-outline)); color: rgb(var(--ui-button-hover-txt)); font-weight: var(--wght); text-decoration: none; } [id*="u-credit"] div.credit-back:focus-within::before, [id*="u-credit"] a[href="#u-credit-otherwise"]:focus-within { --wght: var(--ui-hvr-wght); border-color: transparent; outline: 0 solid rgb(var(--ui-button-hover-outline)); background-color: rgba(var(--ui-button-hover-bg), 1); box-shadow: 0 0 0 0.125rem rgb(var(--ui-button-hover-outline)); color: rgb(var(--ui-button-hover-txt)); font-weight: var(--wght); text-decoration: none; } [id*="u-credit"] .page-rate-widget-box { margin: 0; } /* ===TABLES=== */ #page-content table.wiki-content-table *, #page-content div.b-tables table.wiki-content-table * { --min-font-size: 0.8125rem; /* 12px */ } #page-content table.wiki-content-table, #page-content div.b-tables table.wiki-content-table { display: table; margin: 0.5em auto; border-spacing: 0; background-color: rgb(var(--tables-body-bg)); color: rgb(var(--tables-body-txt)); } #page-content table.wiki-content-table th, #page-content div.b-tables table.wiki-content-table th { --wght: calc(var(--ui-wght) + 200); padding: 0.5em 1em; background: rgb(var(--tables-header-bg)); color: rgb(var(--tables-header-txt)); font-weight: var(--wght); } #page-content table.wiki-content-table th, #page-content table.wiki-content-table td, #page-content div.b-tables table.wiki-content-table th, #page-content div.b-tables table.wiki-content-table td { /* Override's border on wikidot's default layout */ border: 0.0625rem solid rgb(var(--tables-border)) !important; } #page-content table.wiki-content-table tr, #page-content div.b-tables table.wiki-content-table tr { border: none !important; } #page-content table.wiki-content-table td, #page-content div.b-tables table.wiki-content-table td { padding: 0.5em; } .translation-box-stylesheet { display: none; } /* Nested Collapsible Block Fix */ div.colmod-block>ul, div.colmod-block>ul>li { line-height: 1.5; } /* ===TOC=== */ #toc, #toc *, table[style*="margin:0"], table[style*="margin:0"] * { box-sizing: border-box; margin: 0; padding: 0; border-spacing: 0; } #page-content div#toc { display: grid; position: relative; grid-template-areas: "fold title" "list list"; grid-template-columns: 1fr; min-width: var(--sidebar-width-on-desktop); max-width: var(--sidebar-width-on-desktop); margin: 0; font-family: var(--UI-font); } #toc.floatleft { float: left; } #toc.floatright { float: right; } #toc #toc-action-bar { position: relative; grid-area: fold; justify-content: center; width: 100%; height: 100%; } #toc .title, #toc #toc-action-bar { --wght: calc(var(--ui-wght) + 100); display: flex !important; /* Overwriting JS-injected inline styling */ align-items: center; transition: font-weight 160ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 160ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--toc-header-bg-color)); color: rgb(var(--toc-header-text-color)); font-weight: var(--wght); } #toc #toc-action-bar a[style*="display: none"] { display: flex !important; /* Overwriting JS-injected inline styling */ opacity: 0; pointer-events: none; } #toc #toc-action-bar a { display: flex !important; /* Overwriting JS-injected inline styling */ position: absolute; z-index: 0; top: 0; left: 0; align-items: center; justify-content: flex-end; width: 100%; height: 100%; padding: 0.25em 0.25em 0.25em 0; transition: font-weight 160ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 160ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-filter 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: font-weight 160ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 160ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), filter 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: font-weight 160ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 160ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), filter 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-filter 200ms cubic-bezier(0.4, 0, 0.2, 1); pointer-events: all; } #toc #toc-action-bar a, #toc #toc-action-bar a:visited { color: rgb(var(--toc-header-text-color)); } #toc #toc-action-bar a:hover, #toc #toc-action-bar a:active { color: rgb(var(--toc-header-text-hover-color)); } #toc #toc-action-bar a:focus-within { color: rgb(var(--toc-header-text-hover-color)); } #toc #toc-action-bar a:hover, #toc #toc-action-bar a:active, #toc #toc-action-bar:hover+.title, #toc #toc-action-bar:active+.title { --wght: calc(var(--ui-hvr-wght) + 200); font-weight: var(--wght); text-decoration: none; } #toc #toc-action-bar a:focus-within, #toc #toc-action-bar:focus-within+.title { --wght: calc(var(--ui-hvr-wght) + 200); font-weight: var(--wght); text-decoration: none; } #toc #toc-action-bar a::before { content: ""; display: inline-block; position: relative; width: 1em; height: 1em; background-color: rgb(var(--toc-header-text-color)); -webkit-mask-image: var(--mask-image); mask-image: var(--mask-image); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; } #toc #toc-action-bar a:hover::before, #toc #toc-action-bar a:active::before { color: rgb(var(--toc-header-text-hover-color)); } #toc #toc-action-bar a:focus-within::before { color: rgb(var(--toc-header-text-hover-color)); } #toc #toc-action-bar a:first-of-type::before { --mask-image: var(--down-arrow-mask); -webkit-mask-size: 1em 0.3625em; mask-size: 1em 0.3625em; } #toc #toc-action-bar a:last-of-type::before { --mask-image: var(--right-arrow-mask); left: -0.25em; -webkit-mask-size: 0.3625em 1em; mask-size: 0.3625em 1em; } #toc #toc-action-bar a::after { content: "Table of Contents"; position: absolute; left: 100%; transition: font-weight 160ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 160ms cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; } #toc .title { grid-area: title; justify-content: center; padding: 0.25em 0.5em 0.25em 0; color: transparent; } #toc #toc-list { --wght: var(--ui-wght); display: grid; grid-area: list; max-width: var(--sidebar-width-on-desktop); max-height: calc(100vh - 2em); padding-top: 0.25rem; overflow: auto; overflow-x: hidden; overflow-y: auto; background-color: rgb(var(--toc-body-bg-color)); box-shadow: 0 -0.25rem 0 0 rgb(var(--toc-header-bg-color)); font-size: calc(var(--base-font-size) * (14/15)); font-weight: var(--wght); scrollbar-width: thin; } #toc #toc-list::-webkit-scrollbar, #toc #toc-list::-webkit-scrollbar-thumb, #toc #toc-list::-webkit-scrollbar-corner { width: 0.5em; } #toc #toc-list div { position: relative; } #toc #toc-list div:first-of-type { margin-top: 0.25em; } #toc #toc-list div:last-of-type { margin-bottom: 1em; } #toc #toc-list div:not([style*="1em"])::after { content: " "; position: absolute; top: 0; left: 0; width: 100%; height: calc(50% + 0.09375rem); border-bottom-left-radius: 0.0625rem; box-shadow: inset 0.09375rem 0 0 0 rgb(var(--toc-directory-lines-color)); pointer-events: none; } #toc #toc-list div[style*="1em"]+div:not([style*="1em"])::after, #toc #toc-list div[style*="2em"]+div:not([style*="1em"])::after, #toc #toc-list div[style*="3em"]+div:not([style*="1em"])::after, #toc #toc-list div[style*="4em"]+div:not([style*="1em"])::after, #toc #toc-list div[style*="5em"]+div:not([style*="1em"])::after { height: 100%; border-bottom-left-radius: 0; } #toc #toc-list div::before { display: block; position: absolute; left: -0.25em; color: rgb(var(--toc-directory-lines-color)); font-family: monospace; } /* Margin !importants included to overwrite JS-injected styling */ #toc #toc-list div[style*="em"] { margin-left: 1em !important; } #toc #toc-list div:not([style*="1em"]) { margin-left: 1.25em !important; } #toc #toc-list div[style*="2em"] { padding-left: 0.75em !important; } #toc #toc-list div[style*="2em"]::before { content: "╶"; } #toc #toc-list div[style*="3em"] { padding-left: 1.75em !important; } #toc #toc-list div[style*="3em"]::before { content: "╶──"; } #toc #toc-list div[style*="4em"] { padding-left: 2.75em !important; } #toc #toc-list div[style*="4em"]::before { content: "╶───╴"; } #toc #toc-list div[style*="5em"] { padding-left: 3.75em !important; } #toc #toc-list div[style*="5em"]::before { content: "╶─────"; } #toc #toc-list div[style*="6em"] { padding-left: 4.75em !important; } #toc #toc-list div[style*="6em"]::before { content: "╶──────╴"; } #toc #toc-list a { display: inline-block; position: relative; transition: font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1); } #toc #toc-list a::before { content: ""; display: inline-block; position: absolute; top: 0; left: 0; width: 1em; height: 100%; transform: rotateY(25deg) translateX(-1.25em); transition: transform 160ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; background-color: rgb(var(--toc-body-hover-arrow-color)); pointer-events: none; -webkit-mask-size: 0.3625em 1em; mask-size: 0.3625em 1em; -webkit-mask-image: var(--right-arrow-mask); mask-image: var(--right-arrow-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center 0.25rem; mask-position: center 0.25rem; } #toc #toc-list a, #toc #toc-list a:visited { color: rgb(var(--toc-body-link-color)); } #toc #toc-list a:hover, #toc #toc-list a:active { --wght: var(--ui-hvr-wght); transform: translateX(0.25rem); color: rgb(var(--toc-body-link-hover-color)); font-weight: var(--wght); text-decoration: none; } #toc #toc-list a:focus-within { --wght: var(--ui-hvr-wght); transform: translateX(0.25rem); color: rgb(var(--toc-body-link-hover-color)); font-weight: var(--wght); text-decoration: none; } #toc #toc-list a:hover::before, #toc #toc-list a:active::before { transform: rotateY(0) translateX(-1em); opacity: 1; pointer-events: all; } #toc #toc-list a:focus-within::before { transform: rotateY(0) translateX(-1em); opacity: 1; pointer-events: all; } /* ===WARNING BOX=== */ #page-content div.warning-top-box, #page-content div.archived-top-box, #page-content div.warning-top-box *, #page-content div.archived-top-box * { box-sizing: border-box; margin: 0; padding: 0; } #page-content div.warning-top-box, #page-content div.archived-top-box { display: grid; width: 100%; max-width: calc(var(--body-width-on-desktop) / 2); margin: 0 auto 1em; border: none; border-radius: 0; background-color: rgb(var(--swatch-background)); box-shadow: 0 0 0 0.125rem rgba(var(--swatch-alternate-color), 0.25); text-align: center; } #page-content div.warning-top-box>h1, #page-content div.archived-top-box>h1 { --wght: 600; display: flex; justify-content: flex-start; width: 100%; margin: 0; padding: 0.5em 1.25rem; background-color: rgb(var(--swatch-primary)); background-image: linear-gradient(125deg, rgba(var(--swatch-primary-darkest), 0.75) 25%, transparent 25%, transparent 50%, rgba(var(--swatch-primary-darkest), 0.75) 50%, rgba(var(--swatch-primary-darkest), 0.75) 75%, transparent 75%, transparent 100%); background-size: 3rem 4.35rem; color: rgb(var(--swatch-text-secondary-color)); font-weight: var(--wght); text-transform: uppercase; } #page-content div.warning-top-box>p:first-of-type, #page-content div.archived-top-box>p:first-of-type { width: 100%; padding: 1em 0.5em; } #page-content div.warning-top-box>p+p, #page-content div.archived-top-box>p+p { margin-top: 0; } /* ===LISTPAGES PAGER=== */ .pager { --wght: var(--ui-wght); display: grid; grid-gap: 0; grid-template-columns: repeat(auto-fit, minmax(1em, 1fr)); margin: 0 1em; box-shadow: 0 0.125rem 0 0 rgb(var(--pager-selected-bg)); color: rgb(var(--pager-text)); font-weight: var(--wght); white-space: nowrap; gap: 0; } .pager span, .pager span * { display: flex; position: relative; align-content: center; justify-content: center; } .pager span { transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); } .pager .pager-no { grid-column: 1 / span 4; justify-self: flex-start; text-transform: uppercase; } .pager .current { --wght: var(--ui-hvr-wght); background-color: rgb(var(--pager-selected-bg)); color: rgb(var(--pager-selected-link)); font-weight: var(--wght); } .pager .current::before { content: ""; position: absolute; bottom: 0; width: 1.5em; height: 1.5em; background-color: rgb(var(--pager-selected-bg)); } .pager .current:not(:last-of-type)::before { --clip-path: polygon( 100% 0, 0 100%, 100% 100% ); left: -1.5em; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } .pager .current:last-of-type { width: calc(100% - 1.5em); } .pager .current:last-of-type::before { --clip-path: polygon( 0 0, 0 100%, 100% 100% ); right: -1.5em; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } .pager a { z-index: 2; width: 100%; overflow: hidden; transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); } .pager a, .paged a:visited { color: rgb(var(--pager-link)); } .pager a:hover, .pager a:active { --wght: var(--ui-hvr-wght); color: rgb(var(--pager-link-hover)); font-weight: var(--wght); text-decoration: none; } .pager a:focus-within { --wght: var(--ui-hvr-wght); color: rgb(var(--pager-link-hover)); font-weight: var(--wght); text-decoration: none; } .pager a::after { --clip-path: polygon( 0 100%, 100% 115%, 100% 100%, 0 115% ); content: " "; position: absolute; z-index: -1; top: 0; width: 100%; height: 100%; transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--pager-hover-bg)); pointer-events: none; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } .pager a:hover::after, .pager a:active::after { --clip-path: polygon( 0 100%, 100% 115%, 100% 0, 0 -15% ); } .pager a:focus-within::after { --clip-path: polygon( 0 100%, 100% 115%, 100% 0, 0 -15% ); } /* ===WIKIDOT USER ICONS=== */ span.printuser { display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; width: -webkit-max-content; width: -moz-max-content; width: max-content; height: -webkit-min-content; height: -moz-min-content; height: min-content; margin-right: 0; } #main-content span.printuser { align-items: baseline; } span.printuser a:first-of-type, span.printuser.deleted img { display: inline-block; height: 1em; margin: 0 0.125rem 0 0; } span.printuser.avatarhover a:first-of-type, span.printuser.deleted img { width: 1.75em; } span.printuser img.small { width: calc(100% - 0.05625em); padding: 0 0 0 0.5625em; background-position: left center; background-size: cover; object-fit: contain; object-position: left center; color: transparent; } #main-content span.printuser img.small { width: calc(100% - 0.5625em); } span.printuser img.small::before { content: ""; display: block; padding-bottom: 100%; } span.printuser.deleted img { width: -webkit-min-content; width: -moz-min-content; width: min-content; } a.avatar-hover, a.avatar-hover:hover { z-index: 10; } /* ===Ayers' Info Collapsible=== */ #page-title+#page-content>div.info-container { margin-top: 1em; } .info-container .collapsible-block-link, .info-container:hover .collapsible-block-link, .info-container:active .collapsible-block-link { line-height: 1.6; } .info-container:focus-within .collapsible-block-link { line-height: 1.6; } /* ===MISC SMALL ELEMENTS=== */ /* Wikidot [[note]]. Unsure why this exists. */ div.wiki-note { --CRSV: 1; --MONO: 0; --CASL: 1; --note-color: 255, 255, 136; position: relative; width: min(calc(var(--body-width-on-desktop) / 2), 90vw); margin: 2em auto; padding: 1.25em 1.25em 0.50em 1.25em; border: none; border-radius: 0.5em 0.25em / 0 0 30% 75%; background-color: rgb(var(--note-color)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(255, 255, 255, 0.2)); background-repeat: no-repeat, repeat; background-size: 100% 1.5em, contain; font-family: var(--mono-font); background-blend-mode: overlay, normal; } div.wiki-note:before, div.wiki-note:after { content: ""; position: absolute; z-index: -1; bottom: 1.5em; width: 70%; height: 55%; max-height: 40%; transform: scale(1.1); box-shadow: inset 0 -0.5em 1.05em rgba(0, 0, 0, 0.3), 0 0.5em 1.05em rgba(0, 0, 0, 0.3); } div.wiki-note:before { left: 1.35em; transform: skew(-15deg) rotate(-6deg); } div.wiki-note:after { right: 1.125em; transform: skew(15deg) rotate(6deg); } /* Class that adds rounded corners */ .curved { margin: 0 0.625rem; border-radius: 0.625rem; } /* Class that removes margin from Paragraphs */ .unmargined>p { margin: 0; line-height: 1; } /* Wikiwalk Nav */ .footer-wikiwalk-nav { --wght: 700; font-size: 0.75em; font-weight: var(--wght); letter-spacing: 0.016em; } .browserupgrade { margin: 0.2em 0; padding: 0.2em 0; background: rgb(var(--swatch-secondary-color)); color: rgb(var(--swatch-text-tertiary-color)); } /* Sexy Box (apparently) */ div.sexy-box { margin: 0.4375rem 0.25rem 0.75rem; padding: 0 0.625rem 0.75rem; overflow: hidden; border: 0.0625rem solid rgba(var(--swatch-border-color, 12, 12, 12), 0.25); background: rgb(var(--swatch-background, 252, 252, 252)); } div.sexy-box div.image-container img.image { margin: 0.3125rem; padding: 0.125rem; border: 0.0625rem solid rgba(var(--swatch-border-color, 12, 12, 12), 0.5); } /* Keycap Styling */ /* Reworked from Sigma-9 */ .keycap { display: inline; padding: 0.0625rem 0.1875rem; border-radius: 0.1875em; background: rgb(var(--swatch-background)); box-shadow: 0 -0.03125rem 0 rgba(var(--swatch-tertiary-color), 0.5), 0 0.03125em 0 rgb(var(--swatch-secondary-color)), 0 0.0625em 0 rgb(var(--swatch-secondary-color)), 0 0.125em 0 rgb(var(--swatch-secondary-color)), 0 0.125em 0 0.0625em rgb(var(--swatch-tertiary-color), 0.25), 0 0.125em 0 0.125em rgba(var(--swatch-tertiary-color), 0.5); font-size: .85em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } div.keycap { display: inline-block; } /* Tags Styling */ /* Reworked from Sigma-9 */ .tags { --clip-path: polygon( 0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50% ); --wght: 500; display: inline; position: relative; height: 1.175em; margin: 0 0 0 0.5125rem; padding: 0.1875rem 0.3125rem 0.1875rem 1rem; border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; background: rgb(var(--swatch-tertiary-color)); color: rgb(var(--swatch-text-secondary-color)); font-size: 0.6875rem; font-weight: var(--wght); line-height: 0.8125; text-decoration: none; text-shadow: 0.0625rem 0.0625rem .0625rem rgb(var(--swatch-alternate-color)); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } div.tags { display: inline-block; } .tags::after { content: ""; position: absolute; top: 50%; left: 0.5rem; width: 0.25rem; height: 0.25rem; transform: translateY(-50%); border-radius: 50%; background: rgb(var(--swatch-background)); box-shadow: -0.0625rem -0.0625rem 0.125rem rgb(var(--swatch-alternate-color)); } /* General Odate Styling */ .odate { --MONO: 1; font-family: var(--mono-font); } /* Clearfix */ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } div.block-right, div.block-left { min-width: 30%; } /* ===FRONT PAGE ELEMENTS=== */ /* ===CONTENT PANEL=== */ .content-panel { --box-shadow-1: rgba(var(--swatch-text-dark, 12, 12, 12), 0.16); --box-shadow-2: rgba(var(--swatch-text-dark, 12, 12, 12), 0.23); --box-shadow-3: rgb(var(--swatch-tertiary-color, 170, 170, 170)); margin: 0.625em 0 0.938em; border-radius: 0.625rem; background-color: rgba(var(--gray-monochrome, 66, 66, 72), 0.5); box-shadow: 0 0.188em 0.375em var(--box-shadow-1), 0 0.188em 0.375em var(--box-shadow-2), 0 0 0.0625rem 0 var(--box-shadow-3) inset, 0 0 0.0625rem 0 var(--box-shadow-3); } .content-panel.standalone { box-sizing: border-box; padding: 1em 2em 2em 2em !important; background: rgb(var(--swatch-background, 252, 252, 252)); } .content-panel.series { margin-bottom: 1.25rem; padding: 0 1.25rem; } .content-panel.centered { text-align: center; } .content-panel.left-column { width: 48%; float: left; } .content-panel.right-column { width: 48%; float: right; } .content-panel .panel-heading { --wght: 700; --text-shadow: rgba(var(--swatch-menutxt-dark-color, 12, 12, 12), 0.35); padding: 0.313em 0.625em; color: rgb(var(--swatch-text-secondary-color, 252, 252, 252)); font-weight: var(--wght); text-align: center; text-shadow: 0.0625rem 0.0625rem 0.125rem var(--text-shadow); text-transform: uppercase; } .content-panel .panel-body { padding: 0.313em 0.625em; background: rgb(var(--swatch-tertiary-color)); } .content-panel .panel-body>.news-title { --wght: 700; font-family: var(--title-font); font-size: 0.9em; font-weight: var(--wght); text-transform: uppercase; } .content-panel .panel-footer { --text-shadow: rgba(var(--swatch-menutxt-dark-color, 12, 12, 12), 0.5); --wght: 700; padding: 0.0625rem 0.625rem; font-size: 0.8em; font-weight: var(--wght); letter-spacing: 0.016em; text-align: right; text-shadow: 0.0625rem 0.0625rem 0.125rem var(--text-shadow); } .content-panel .panel-footer, .content-panel .panel-footer a { color: rgb(var(--swatch--text-tertiary-color)); } .content-panel .content-toc { --box-shadow: rgba(var(--swatch-menutxt-dark-color, 12, 12, 12), 0.15); margin: 1.25rem 0 0.313rem 0.313rem; padding: 0 1.25rem; float: right; border: solid 0.0625rem rgb(var(--swatch-menubg-medium-dark-color)); border-radius: 0.625rem; background-color: rgb(var(--swatch-tertiary-color)); box-shadow: inset 0.0625rem 0.125rem 0.375rem var(--box-shadow); white-space: nowrap; } .news-block .alternate:nth-child(even) { background-color: rgba(var(--swatch-menubg-color), 0.9); } /* ===MOBILE ELEMENTS=== */ @media only screen and (max-width: 56.25rem) { :root { --rating-module-height: 1.5em; } div.block-right, div.block-left { min-width: 40%; margin: 0 auto; } #who-rated-page-area>div { grid-template-columns: repeat(2, 1fr auto); } .footnotes-footer, .bibitems { width: 100%; margin: 1.5em 0 0 0; } .hovertip { max-width: 90vw !important; } .image-block.block-right, .image-block.block-left, .scp-image-block.block-right, .scp-image-block.block-left { max-width: 40vw !important; } .image-block img.image[style*="width:"], .scp-image-block img.image[style*="width:"] { width: 100% !important; } blockquote, .blockquote, div.blockquote, [class*="blockquote"] { margin-right: 0; margin-left: 0; } .curved { margin: 0; } .content-panel.left-column, .content-panel.right-column { width: 99%; float: left; } #page-content div#toc { min-width: var(--sidebar-width-on-mobile); max-width: var(--sidebar-width-on-mobile); } #toc #toc-list { max-width: var(--sidebar-width-on-mobile); } } /* See https://scp-wiki.wikidot.com/component:preview */ #page-content>div.preview { display: none; } /* ===PRINT FORMATTING=== */ body.print-body { --body-width-on-desktop: calc(100vw - (100vw - 100%)); --header-width-on-desktop: calc(100vw - (100vw - 100%)); background: white; } body.print-body pre, body.print-body blockquote, body.print-body .blockquote { background: none; } body.print-body #side-bar, body.print-body #search-top-box, body.print-body #login-status, body.print-body #page-options-container { display: none; } body.print-body #container { grid-template-areas: "print-options" "print-head" "content-wrap" "print-hr" "license"; } body.print-body #print-options { grid-area: print-options; font-family: var(--UI-font); } body.print-body #print-options tbody { display: grid; grid-gap: 0.25em; gap: 0.25em; } body.print-body #print-options tr { display: grid; grid-gap: 0.5em; gap: 0.5em; grid-template-columns: 10rem 1fr; } body.print-body #print-options tr>td:first-of-type { --wght: 600; display: flex; align-items: center; justify-content: center; background-color: rgb(var(--swatch-primary)); color: rgb(var(--swatch-text-secondary-color)); font-weight: var(--wght); text-transform: uppercase; } body.print-body #print-options tr>td:last-of-type { display: grid; grid-template-columns: repeat(6, 1fr 0.25em); color: transparent } body.print-body #print-options tr>td b { display: contents; } body.print-body #print-options a, body.print-body #print-options a:visited { --wght: var(--ui-wght); display: inline-flex; position: relative; z-index: 2; justify-content: center; min-width: 5em; margin: 0; padding: 0.25em; overflow: hidden; transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1); border: 0.0625rem solid rgba(var(--swatch-border-color), 0.15); background-color: rgb(var(--ui-button-bg)); box-shadow: 0 0 0 0 rgb(var(--ui-button-bg)); color: rgb(var(--ui-button-txt)); font-family: var(--UI-font); font-weight: var(--wght); will-change: box-shadow, color, background-color, font-weight, font-variation-settings; } body.print-body #print-options a:hover, body.print-body #print-options a:active { --wght: var(--ui-hvr-wght); background-color: rgba(var(--ui-button-hover-bg), 1); box-shadow: 0 0 0 0.125rem rgb(var(--ui-button-hover-outline)); color: rgb(var(--ui-button-hover-txt)); font-weight: var(--wght); text-decoration: none; cursor: pointer; } body.print-body #print-options a:focus-within { --wght: var(--ui-hvr-wght); background-color: rgba(var(--swatch-primary), 1); box-shadow: 0.125rem solid rgb(var(--swatch-primary)); color: rgb(var(--ui-button-hover-txt)); text-decoration: none; cursor: pointer; } body.print-body #print-options tr>td b a, body.print-body #print-options tr>td b a:visited { --wght: calc(var(--ui-wght) + 100); font-weight: var(--wght); } body.print-body #print-options tr>td b a:hover, body.print-body #print-options tr>td b a:active { --wght: calc(var(--ui-hvr-wght) + 100); font-weight: var(--wght); } body.print-body #print-options tr>td b a:focus-within { --wght: calc(var(--ui-hvr-wght) + 100); font-weight: var(--wght); } body.print-body #print-options a[onclick*="Georgia"] { font-family: Georgia; } body.print-body #print-options a[onclick*="roman"] { font-family: 'Times New Roman', Times; } body.print-body #print-options a[onclick*="serif"] { font-family: serif; } body.print-body #print-options a[onclick*="arial"] { font-family: Arial, Helvetica, sans-serif; } body.print-body #print-head { grid-area: print-head; padding-right: 1em; font-family: var(--UI-font); } body.print-body #container>hr { grid-area: print-hr; } body.print-body #content-wrap { grid-template-areas: "content"; grid-template-columns: 1fr; } body.print-body #main-content .page-tags { margin-top: 1rem; } body.print-body #main-content .page-tags span { justify-content: flex-start; } @media print { :root { --background-gradient-color: var(--swatch-background); --body-width-on-desktop: calc(100vw - (100vw - 100%)); --header-width-on-desktop: calc(100vw - (100vw - 100%)); } *, :before, :after { -moz-column-break-inside: avoid; break-inside: avoid; } pre, blockquote, .blockquote { -moz-column-break-inside: avoid; break-inside: avoid; background: none; } p, h1, h2, h3, h4, h5, h6 { -moz-column-break-inside: avoid; break-inside: avoid; } h1, h2, h3, h4, h5, h6 { -moz-column-break-after: avoid; break-after: avoid; } table, img, svg { -moz-column-break-inside: avoid; break-inside: avoid; } #side-bar, #search-top-box, #login-status, #page-options-container { display: none; } #content-wrap { grid-template-areas: "content"; grid-template-columns: 1fr; } #main-content .page-tags { margin-top: 1rem; } #main-content .page-tags span { justify-content: flex-start; } #page-title { -moz-column-break-inside: avoid; break-inside: avoid; -moz-column-break-after: avoid; break-after: avoid; } #print-head { -moz-column-break-before: avoid; break-before: avoid; -moz-column-break-after: avoid; break-after: avoid; } } /* Reduced Motion Media Query */ @media screen and (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms; transition-timing-function: linear; transition-delay: 0ms; } } /* INT ELEMENTS STYLING ============================= */ /* Styling specific to Int Branches' Elements /* ===DIRECTORY=== 1. =CZECH BRANCH 2. =FRENCH BRANCH 3. =GERMAN BRANCH 4. =GREEK BRANCH 5. =ITALIAN BRANCH 6. =JAPANESE BRANCH 7. =KOREAN BRANCH 8. =POLISH BRANCH 9. =PORTUGESE BRANCH 10. =RUSSIAN BRANCH 11. =SIMPLIFIED CHINESE BRANCH 12. =SPANISH BRANCH 13. =THAI BRANCH 14. =TRADITIONAL CHINESE BRANCH 15. =UKRAINIAN BRANCH */ /* ===CZECH BRANCH=== */ [id*="u-credit"]:lang(cs) div.credit-back::before { content: "Zpět"; } #toc:lang(cs) #toc-action-bar a::after { content: "Obsah"; } /* ===FRENCH BRANCH=== */ [id*="u-credit"]:lang(fr) div.credit-back::before { content: "Retour"; } #toc:lang(fr) #toc-action-bar a::after { content: "Sommaire"; } /* ===GERMAN BRANCH=== */ [id*="u-credit"]:lang(de) div.credit-back::before { content: "Zurück"; } #toc:lang(de) #toc-action-bar a::after { content: "Inhalt"; } :lang(de) .page-rate-widget-box, #page-content:lang(de) .rate-box-with-credit-button { background-color: rgb(var(--rating-module-bg-color)) !important; } /* ===GREEK BRANCH=== */ [id*="u-credit"]:lang(el) div.credit-back::before { content: "Πίσω"; } #toc:lang(el) #toc-action-bar a::after { content: "Πίνακας περιεχομένων"; } /* ===ITALIAN BRANCH=== */ [id*="u-credit"]:lang(it) div.credit-back::before { content: "Indietro"; } #toc:lang(it) #toc-action-bar a::after { content: "Indice dei contenuti"; } /* ===JAPANESE BRANCH=== */ [id*="u-credit"]:lang(ja) div.credit-back::before { content: "閉じる"; } #toc:lang(ja) #toc-action-bar a::after { content: "目次"; } /* ===KOREAN BRANCH=== */ [id*="u-credit"]:lang(ko) div.credit-back::before { content: "뒤로"; } #toc:lang(ko) #toc-action-bar a::after { content: "목차"; } /* ===POLISH BRANCH=== */ [id*="u-credit"]:lang(po) div.credit-back::before { content: "Powrót"; } #toc:lang(po) #toc-action-bar a::after { content: "Spis Treści"; } /* ===PORTUGESE BRANCH=== */ [id*="u-credit"]:lang(pt-br) div.credit-back::before { content: "Voltar"; } #toc:lang(pt-br) #toc-action-bar a::after { content: "Índice"; } /* ===RUSSIAN BRANCH=== */ /* ===SIMPLIFIED CHINESE BRANCH=== */ [id*="u-credit"]:lang(cn) div.credit-back::before { content: "返回"; } #toc:lang(cn) #toc-action-bar a::after { content: "目录"; } /* ===SPANISH BRANCH=== */ [id*="u-credit"]:lang(es) div.credit-back::before { content: "Volver"; } #toc:lang(es) #toc-action-bar a::after { content: "Tabla de Contenidos"; } /* ===THAI BRANCH=== */ /* ===TRADITIONAL CHINESE BRANCH=== */ [id*="u-credit"]:lang(zh-tr) div.credit-back::before { content: "返回"; } /* ===UKRAINIAN BRANCH=== */ }