:root { --sidebar-width-on-desktop: calc(var(--base-font-size) * (266 / 15)); --body-width-on-desktop: 45.75rem; } @media only screen and (min-width: 56.25rem) { #content-wrap { display: flex; position: initial; flex-direction: row; flex-grow: 2; width: calc(100vw - (100vw - 100%)); max-width: inherit; height: auto; min-height: calc(100vh - var(--final-header-height-on-desktop, 10.125rem)); margin: 0 var(--sidebar-width-on-desktop, 13.6rem) 0 calc(var(--sidebar-width-on-desktop, 13.6rem) * -1 / 2); } #main-content { position: initial; width: var(--body-width-on-desktop, 45.75rem); max-width: var(--body-width-on-desktop, 45.75rem); max-height: 100%; margin: 0 auto; padding: 2rem 1rem; } #page-content { max-width: min(90vw, var(--body-width-on-desktop, 45.75rem)); } #side-bar { position: -webkit-sticky; position: sticky; top: 0; left: 0; grid-area: side-bar; width: var(--sidebar-width-on-desktop, 13.6rem) !important; min-width: var(--sidebar-width-on-desktop, 13.6rem) !important; max-height: 100vh; padding-right: 2.5rem; padding-left: 0.5rem; overflow-y: scroll; transition: translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 300ms linear, margin 300ms linear; border: none; border-color: rgba(var(--swatch-tertiary-color, 170, 170, 170), 0.4); background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0); translate: calc(var(--sidebar-width-on-desktop, 13.5rem) * -1 - 1rem); 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 */ } #side-bar::-webkit-scrollbar-track { background-color: rgba(var(--swatch-secondary-color, 244, 244, 244), 0.8); } #side-bar::-webkit-scrollbar, #side-bar::-webkit-scrollbar-thumb, #side-bar::-webkit-scrollbar-corner { width: 0.5rem; border-right-width: calc(100vw + 100vh); border-right-style: inset; border-color: inherit; background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0); } #side-bar:is(:hover, :active, :focus-within) { margin-right: 2.25rem; padding-right: 0.25rem; overflow-x: hidden; overflow-y: auto; border-color: rgba(var(--swatch-primary-darker), 1); background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1); translate: calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)); scrollbar-color: rgba(170, 170, 170, 1) /* Thumb */ rgba(252, 252, 252, 1); /* Track */ scrollbar-color: rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */ rgb(var(--swatch-menubg-color, 252, 252, 252), 1); /* Track */ } #main-content::after { content: " "; display: flex; position: fixed; top: 0; left: 1rem; align-items: center; justify-content: center; width: 1rem; height: 100%; max-height: 100%; transition: left 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); background: url("https://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg"); background-attachment: fixed; background-repeat: no-repeat; background-position: center left 1rem; background-size: 1rem 12.875rem; pointer-events: none; } #side-bar:is(:hover, :active, :focus-within) + #main-content::after { left: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1); width: 0rem; transition: left 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); opacity: 0; background-position: center left calc(var(--sidebar-width-on-desktop, 14.5rem) * -1); font-size: 0em; } #main-content::before { content: " "; position: absolute; z-index: 9; top: var(--final-header-height-on-desktop, 0); left: 0; width: var(--sidebar-width-on-desktop, 14.5rem); height: calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem); margin-bottom: calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem); transition: translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); opacity: 0.5; background-color: rgb(var(--swatch-alternate-color, 0, 0, 0)); pointer-events: none; translate: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1 + 1rem); } #side-bar:is(:hover, :active, :focus-within) + #main-content::before { translate: 0; opacity: 0; } #side-bar .side-block { margin-top: 1em; padding-left: 0.25em; border-right-width: 0rem; border-left-width: 0rem; border-radius: 0; background-color: rgb(0, 0, 0, 0); direction: ltr; } #side-bar .scpnet-interwiki-wrapper { direction: ltr; } /* Print Friendly Formatting by Estrella */ body.print-body { --sidebar-width-on-desktop: 0; } body.print-body #main-content::before, body.print-body #main-content::after { display: none; } }
其他
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap); /* Centered Header Sigma-9 * [2021 Wikidot Component] * By Lt Flops (CC BY-SA 3.0) * Forked from: * Penumbra Theme by EstrellaYoshte * Also based on: * Centered Header BHL by Woedenaz **/ /* ---- VARS ---- */ :root{ --titleColor: hsl(0, 0%, 95%); --subtitleColor: hsl(60, 62%, 85%); --lgurl: url(https://scp-wiki.wdfiles.com/local--files/component%3Acentered-header-sigma-9/logo.svg); } /* ---- SITE HEADER ---- */ div#header{ background-image: none; } #header::before{ position: absolute; width: 100%; height: 100%; top: .45rem; left: 0; content: " "; background-image: var(--lgurl); background-position: center top; background-repeat: no-repeat; background-size: auto 8rem; opacity: .35; pointer-events: none; z-index: -1; } #header h1, #header h2{ float: none; margin-left: 0; text-align: center; } /* Move the Subtitle Down a Smidge */ #header h2{ margin-top: .45rem; } /* Hide the Existing Text */ #header h1 span, #header h2 span{ display: none; font-size: 0; } /* Style the New Text */ #header h1 a::before, #header h2::before{ font-family: "Montserrat", "Arial", sans-serif; text-shadow: none; } #header h1 a::before{ position: relative; bottom: .15em; color: var(--titleColor); } #header h2::before{ position: relative; bottom: .3em; color: var(--subtitleColor); } /* Set the New Text's Content From Variable */ #header h1 a::before{ content: var(--header-title, "SCP基金会"); font-size: 115%; font-weight: bold; } #header h2::before{ content: var(--header-subtitle, "控制 - 收容 - 保护"); font-size: 130%; font-weight: 600; } /* ---- LOGIN ---- */ #login-status{ top: .5rem; left: 0; right: initial; z-index: 1; } /* ---- SEARCH ---- */ #search-top-box{ top: .5rem; right: 0; } #search-top-box-input{ border-radius: 0; } #search-top-box-input, #search-top-box-input:hover, #search-top-box-input:focus, #search-top-box-form input[type=submit], #search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus{ border-radius: 0; box-shadow: none; font-size: unset; } /* ---- TOP BAR ---- */ #top-bar{ display: flex; justify-content: center; right: 0; } #top-bar ul li ul{ box-shadow: none; overflow: hidden; } /* ---- PAGE TITLE ---- */ .meta-title, #page-title{ text-align: center; } /* ---- BREADCRUMBS ---- */ .pseudocrumbs, #breadcrumbs{ text-align: center; } /* ---- MOBILE DISPLAY ---- */ @media (max-width: 767px){ #login-status{ left: 5.15rem; z-index: 20; } #search-top-box{ width: unset; } .mobile-top-bar{ position: relative; display: flex; justify-content: center; left: 0; } }
