SCP基金会

:root{
 --sidebar-width-on-desktop: calc(var(--base-font-size) * (266 / 15));
 --body-width-on-desktop:45.75rem;
 }@mediaonlyscreenand (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:0auto;
 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:left300ms 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:centerleft1rem;
 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:left300ms 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:centerleft 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;
 }
 
 /*PrintFriendlyFormattingbyEstrella*/
 body.print-body{ 
 --sidebar-width-on-desktop:0; 
 }body.print-body#main-content::before,
 body.print-body#main-content::after{display:none; 
 }}

"苍马入目",作者 "MalyceGraves",来自 SCP 维基。原文链接:https://scp-wiki.wikidot.com/et-ecce。译者 "FizzFossey",来自 SCP-CN 维基。译文链接:http://scp-wiki-cn.wikidot.com/et-ecce。遵循 CC-BY-SA 协议。