Nhà Kho Của Một Tác Giả/Dịch Giả Hết Thời

---

+ Show theme code

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
 
@supports(display: grid) {
 
    :root {
     /* S-CSS-P Integration */
     /* If you're making a new CSS theme, please include the following three variables at minimum. */
     --theme-base: "black-highlighter";
     /* must be either "black-highlighter" or "sigma9" */
     --theme-id: "SCP-Offices-theme";
     /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
     --theme-name: "SCP Offices Theme";
     /* set this to your theme's full name */
 
     /* Typefaces */
     --body-font: "JetBrains Mono", Recursive, Consolas, monaco, monospace;
     --header-font: var(--header-font);
     --title-font: var(--header-font);
     --mono-font: var(--header-font);
     --UI-font: var(--header-font);
 
     /* Standard Colors */
 
     --white-monochrome: 238, 238, 216;
     --pale-gray-monochrome: 233, 231, 204;
     --light-gray-monochrome: 147, 147, 147;
     --gray-monochrome: 127, 127, 127;
     --dark-gray-monochrome: 101, 101, 101;
     --black-monochrome: 25, 20, 16;
     --bright-accent: 145, 179, 153;
     --medium-accent: 145, 179, 153;
     --dark-accent: 105, 133, 111;
 
     --swatch-text-general: var(--swatch-text-dark);
 
     --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme:scp-offices-theme/scpoffices_logo.svg");
 
     --background-gradient-color: 215, 215, 215;
     --background-gradient-distance: 40rem;
 
     /* Link Colors */
     --link-color: var(--bright-accent);
     --visited-link-color: var(--dark-accent);
     --hover-link-color: var(--dark-accent);
     --newpage-color: 221, 102, 17;
    }
 
    #container-wrap-wrap {
     background-image:
     repeating-linear-gradient(180deg,
     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),
 
     linear-gradient(to bottom,
     rgba(var(--black-monochrome), 1) var(--header-height-on-desktop),
     rgba(var(--gray-monochrome), 1) calc(var(--header-height-on-desktop) + 0.125rem),
     rgba(var(--gray-monochrome), 1) calc(100% - 0.125rem),
     rgba(var(--gray-monochrome), 1) calc(100% - 0.125rem),
     rgba(var(--black-monochrome), 1) 100%);
     background-repeat: no-repeat;
     background-size:
     100% var(--header-height-on-desktop),
     100% var(--final-header-height-on-desktop);
    }
 
    a {
     --wght: 900;
     font-weight: 900;
    }
 
    #header h2 span::before {
     color: rgb(var(--bright-accent));
    }
 
    #header h1 *,
    #top-bar *,
    #page-title * {
     will-change: opacity;
     transition: opacity 0.2s ease-in-out;
    }
 
    #header h1 a:hover::before,
    #header h1 a:hover::after,
    #top-bar a:hover,
    #page-title:hover,
    #search-top-box-form input[type="submit"]:hover,
    #search-top-box-form input[type="submit"]:focus {
     -webkit-animation: flicker 20s linear infinite;
     animation: flicker 20s linear infinite;
    }
 
    #side-bar .collapsible-block-unfolded {
     background: unset;
    }
 
    #side-bar div.menu-item a.collapsible-block-link,
    #side-bar .side-block>.collapsible-block a.collapsible-block-link {
     background: rgba(var(--medium-accent), 0.5);
    }
 
    #side-bar .close-menu::before {
     line-height: 0.85em !important;
    }
 
    #side-bar .heading p,
    #side-bar .collapsible-block .collapsible-block-link {
     color: rgb(var(--swatch-primary-darkest))
    }
 
    #side-bar div.menu-item a,
    #side-bar div.menu-item .text {
     --wght: 900;
     font-weight: 900;
    }
 
    #side-bar div.menu-item a:hover,
    #side-bar div.menu-item a:active {
     -webkit-animation: flicker 20s linear infinite;
     animation: flicker 20s linear infinite;
     color: rgb(var(--swatch-text-tertiary-color));
    }
 
    #side-bar div.menu-item a:focus-within {
     -webkit-animation: flicker 20s linear infinite;
     animation: flicker 20s linear infinite;
     color: rgb(var(--swatch-text-tertiary-color));
    }
 
    .info-container .collapsible-block-folded,
    .info-container .collapsible-block-unfolded-link {
     background: rgb(var(--bright-accent)) !important;
    }
 
    div[id*="page-options-bottom"] {
     --ui-wght: 600;
     --ui-hvr-wght: 600;
     font-size: calc(var(--base-font-size) * 0.75);
    }
 
    @media only screen and (max-width: 56.25rem) {
     #header {
     background-repeat: no-repeat, repeat;
     background-position: left calc(5vw + 5.5rem - 10.4rem) top calc(4% - var(--offset-from-page-top) / 2), top center;
     background-size: calc(8.75rem + var(--offset-from-page-top)), 100% var(--header-height-on-desktop);
     }
    }
 
    @-webkit-keyframes flicker {
     0% {
     opacity: 1;
     }
 
     5% {
     opacity: .9;
     }
 
     6% {
     opacity: .8;
     }
 
     11% {
     opacity: .4;
     }
 
     11.25% {
     opacity: .6;
     }
 
     11.5% {
     opacity: .4;
     }
 
     18% {
     opacity: 1;
     }
 
     18.5% {
     opacity: .9;
     }
 
     22% {
     opacity: 1;
     }
 
     38.5% {
     opacity: 1;
     }
 
     39% {
     opacity: .8;
     }
 
     42% {
     opacity: 1;
     }
 
     60% {
     opacity: 1;
     }
 
     60.5% {
     opacity: 0;
     }
 
     62% {
     opacity: 0;
     }
 
     63% {
     opacity: .2;
     }
 
     63.25% {
     opacity: 0;
     }
 
     65% {
     opacity: 1;
     }
 
     73% {
     opacity: 1;
     }
 
     75% {
     opacity: .8;
     }
 
     79% {
     opacity: 1;
     }
 
     100% {
     opacity: 1;
     }
    }
 
    @keyframes flicker {
     0% {
     opacity: 1;
     }
 
     5% {
     opacity: .9;
     }
 
     6% {
     opacity: .8;
     }
 
     11% {
     opacity: .4;
     }
 
     11.25% {
     opacity: .6;
     }
 
     11.5% {
     opacity: .4;
     }
 
     18% {
     opacity: 1;
     }
 
     18.5% {
     opacity: .9;
     }
 
     22% {
     opacity: 1;
     }
 
     38.5% {
     opacity: 1;
     }
 
     39% {
     opacity: .8;
     }
 
     42% {
     opacity: 1;
     }
 
     60% {
     opacity: 1;
     }
 
     60.5% {
     opacity: 0;
     }
 
     62% {
     opacity: 0;
     }
 
     63% {
     opacity: .2;
     }
 
     63.25% {
     opacity: 0;
     }
 
     65% {
     opacity: 1;
     }
 
     73% {
     opacity: 1;
     }
 
     75% {
     opacity: .8;
     }
 
     79% {
     opacity: 1;
     }
 
     100% {
     opacity: 1;
     }
    }
}

---

+ Hiện code component

:root {
    --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19);
    --body-width-on-desktop: 45.75rem;
}
@media only screen and (min-width: 56.25rem) {
    #content-wrap {
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -webkit-flex-direction: row;
        -moz-box-orient: horizontal;
        -moz-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
     width: -webkit-calc(100vw - (100vw - 100%));
     width: -moz-calc(100vw - (100vw - 100%));
     width: calc(100vw - (100vw - 100%));
     min-height: -webkit-calc(100vh - -webkit-calc(var(--final-header-height-on-desktop, 10.125rem)));
     min-height: -moz-calc(100vh - -moz-calc(var(--final-header-height-on-desktop, 10.125rem)));
     min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
     -webkit-box-flex: 2;
     -webkit-flex-grow: 2;
        -moz-box-flex: 2;
         -ms-flex-positive: 2;
             flex-grow: 2;
     height: auto;
     position: initial;
     margin: 0 auto;
     max-width: inherit;
     margin-left: -11em;
     margin-left: -webkit-calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem);
     margin-left: -moz-calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem);
     margin-left: calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem);
    }
 
    #main-content {
     position: initial;
     max-height: 100%;
     padding: 2rem 1rem;
     width: 45.75rem;
     width: var(--body-width-on-desktop, 45.75rem);
     max-width: 45.75rem;
     max-width: var(--body-width-on-desktop, 45.75rem);
     margin: 0 auto;
    }
 
    #page-content {
     max-width: min(90vw, 45.75rem);
     max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
    }
 
    #side-bar {
     -webkit-transform: translateX(-14.6rem);
        -moz-transform: translateX(-14.6rem);
         -ms-transform: translateX(-14.6rem);
          -o-transform: translateX(-14.6rem);
             transform: translateX(-14.6rem);
     -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
        -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
         -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
          -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
             transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
     -webkit-transition:
     background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     padding 300ms linear,
     margin 300ms linear,
     -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition:
     background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     padding 300ms linear,
     margin 300ms linear,
     -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -o-transition:
     background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     padding 300ms linear,
     margin 300ms linear,
     -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -moz-transition:
     transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     padding 300ms linear,
     margin 300ms linear,
     -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition:
     transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     padding 300ms linear,
     margin 300ms linear;
     transition:
     transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     padding 300ms linear,
     margin 300ms linear,
     -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     border: none;
     border-color: rgba(var(--swatch-tertiary-color, 170, 170, 170), 0.4);
     width: var(--sidebar-width-on-desktop, 13.6rem) !important;
     min-width: var(--sidebar-width-on-desktop, 13.6rem) !important;
     grid-area: side-bar;
     padding-right: 2rem;
     background-color: transparent;
     background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
     top: 0;
     max-height: 100vh;
     position: -webkit-sticky;
     position: sticky;
     left: 0;
     padding-left: 0.5rem;
     direction: rtl;
     scrollbar-width: thin;
     -ms-scroll-chaining: none;
         overscroll-behavior: contain;
     overflow-y: scroll;
     scrollbar-color:
     rgba(170, 170, 170, 0)  /* Thumb */
     rgba(252, 252, 252, 0); /* Track */
     scrollbar-color:
     rgba(var(--swatch-primary-darker, 170, 170, 170), 0.1)   /* Thumb */
     rgba(var(--swatch-tertiary-color, 252, 252, 252), 0.05); /* Track */
    }
 
    #side-bar::-webkit-scrollbar-track {
     background-color: rgba(var(--swatch-secondary-color, 244, 244, 244), 0.8);
    }
 
    #side-bar::-webkit-scrollbar,
    #side-bar::-webkit-scrollbar-thumb,
    #side-bar::-webkit-scrollbar-corner {
     width: 0.5rem;
     border-right-width: -webkit-calc(100vw + 100vh);
     border-right-width: calc(100vw + 100vh);
     border-right-style: inset;
     border-color: inherit;
     background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
    }
 
    #side-bar:hover,
    #side-bar:active {
     background-color: white;
     background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1);
     padding-right: 0.25rem;
     margin-right: 1.75rem;
     -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
         -ms-transform: translateX(0);
          -o-transform: translateX(0);
             transform: translateX(0);
     -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
        -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
         -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
          -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
             transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-color:
     rgba(170, 170, 170, 1)  /* Thumb */
     rgba(252, 252, 252, 1); /* Track */
     scrollbar-color:
     rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */
     rgb(var(--swatch-menubg-color, 252, 252, 252), 1);  /* Track */
     border-color: rgba(var(--swatch-primary-darker), 1);
    }
 
    #side-bar:focus-within {
     background-color: white;
     background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1);
     padding-right: 0.25rem;
     margin-right: 1.75rem;
     -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
         -ms-transform: translateX(0);
          -o-transform: translateX(0);
             transform: translateX(0);
     -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
        -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
         -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
          -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
             transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-color:
     rgba(170, 170, 170, 1)  /* Thumb */
     rgba(252, 252, 252, 1); /* Track */
     scrollbar-color:
     rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */
     rgb(var(--swatch-menubg-color, 252, 252, 252), 1);  /* Track */
     border-color: rgba(var(--swatch-primary-darker), 1);
    }
 
    #main-content::after {
     content: " ";
     position: fixed;
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -webkit-align-items: center;
        -moz-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     -webkit-box-pack: center;
     -webkit-justify-content: center;
        -moz-box-pack: center;
         -ms-flex-pack: center;
             justify-content: center;
     width: 1rem;
     height: 100%;
     max-height: 100%;
     top: 0;
     -webkit-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -o-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -moz-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     left: 1rem;
     background: url("https://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg");
     background-repeat: no-repeat;
     background-position: center left 1rem;
     background-attachment: fixed;
     -webkit-background-size: 1rem 12.875rem;
        -moz-background-size: 1rem 12.875rem;
          -o-background-size: 1rem 12.875rem;
             background-size: 1rem 12.875rem;
     pointer-events: none;
    }
 
    #side-bar:hover+#main-content::after,
    #side-bar:active+#main-content::after {
     left: -17em;
     left: -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
     left: -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
     left: calc(var(--sidebar-width-on-desktop, 17em) * -1);
     background-position: center left -17em;
     background-position: center left -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
     background-position: center left -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
     background-position: center left calc(var(--sidebar-width-on-desktop, 17em) * -1);
     -webkit-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -o-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -moz-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     opacity: 0;
     width: 0rem;
     font-size: 0em;
    }
 
    #side-bar:focus-within+#main-content::after {
     left: -17em;
     left: -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
     left: -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
     left: calc(var(--sidebar-width-on-desktop, 17em) * -1);
     background-position: center left -17em;
     background-position: center left -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
     background-position: center left -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
     background-position: center left calc(var(--sidebar-width-on-desktop, 17em) * -1);
     -webkit-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -o-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -moz-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     opacity: 0;
     width: 0rem;
     font-size: 0em;
    }
 
    #main-content::before {
     --not-ie: absolute;
     content: " ";
     background-color: black;
     background-color: rgb(var(--swatch-alternate-color, 0, 0, 0));
     position: fixed;
     position: var(--not-ie);
     top: 0;
     top: var(--final-header-height-on-desktop, 0);
     left: 0;
     -webkit-transform: translateX(-12.6rem);
        -moz-transform: translateX(-12.6rem);
         -ms-transform: translateX(-12.6rem);
          -o-transform: translateX(-12.6rem);
             transform: translateX(-12.6rem);
     -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
        -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
         -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
          -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
             transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
     width: 17em;
     width: var(--sidebar-width-on-desktop, 17em);
     height: -webkit-calc(100% - 3rem);
     height: -moz-calc(100% - 3rem);
     height: calc(100% - 3rem);
     height: -webkit-calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
     height: -moz-calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
     height: calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
     -webkit-transition:
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition:
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -o-transition:
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -moz-transition:
     transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition:
     transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition:
     transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     opacity: 0.5;
     pointer-events: none;
     z-index: 9;
     margin-bottom: 0;
     margin-bottom: -webkit-calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
     margin-bottom: -moz-calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
     margin-bottom: calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
    }
 
    #side-bar:hover+#main-content::before,
    #side-bar:active+#main-content::before {
     -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
         -ms-transform: translateX(0);
          -o-transform: translateX(0);
             transform: translateX(0);
     opacity: 0;
    }
 
    #side-bar:focus-within+#main-content::before {
     -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
         -ms-transform: translateX(0);
          -o-transform: translateX(0);
             transform: translateX(0);
     opacity: 0;
    }
 
    #side-bar .side-block {
     margin-top: 1em;
     padding-left: 0.25em;
     background-color: rgb(0, 0, 0, 0);
     -webkit-border-radius: 0;
        -moz-border-radius: 0;
             border-radius: 0;
     border-left-width: 0rem;
     border-right-width: 0rem;
     direction: ltr;
    }
 
    #side-bar .scpnet-interwiki-wrapper {
     direction: ltr;
    }
 
    @supports (-ms-ime-align: auto) {
     #side-bar {
     overflow-y: hidden;
     overflow-x: hidden;
     -webkit-transform: translateX(-90%) !important;
        -moz-transform: translateX(-90%) !important;
         -ms-transform: translateX(-90%) !important;
          -o-transform: translateX(-90%) !important;
             transform: translateX(-90%) !important;
     }
 
     #side-bar:hover,
     #side-bar:active {
     overflow-y: auto;
     -webkit-transform: translateX(0) !important;
        -moz-transform: translateX(0) !important;
         -ms-transform: translateX(0) !important;
          -o-transform: translateX(0) !important;
             transform: translateX(0) !important;
     margin-left: -0.5rem;
     }
 
     #side-bar:focus-within {
     overflow-y: auto;
     -webkit-transform: translateX(0) !important;
        -moz-transform: translateX(0) !important;
         -ms-transform: translateX(0) !important;
          -o-transform: translateX(0) !important;
             transform: translateX(0) !important;
     margin-left: -0.5rem;
     }
 
     #main-content::before {
     left: 1rem;
     -webkit-transform: translateX(-100%) !important;
        -moz-transform: translateX(-100%) !important;
         -ms-transform: translateX(-100%) !important;
          -o-transform: translateX(-100%) !important;
             transform: translateX(-100%) !important;
     }
    }
}

---

+ Hiện code

@supports(display: grid) {
    :root {
        /* header measurements */
        --header-height-on-desktop: 10rem;
        --header-height-on-mobile: 10rem;
        --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem);
        --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem);
    }
 
    #header {
        --search-textbox-text-color: var(--swatch-secondary-color);
        background: none;
    }
 
    #header::before {
        content: " ";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0.75rem;
        background-image: var(--logo-image);
        background-repeat: no-repeat;
        background-position: center 0;
        background-size: auto calc(var(--header-height-on-desktop) - 1.5rem);
        opacity: 0.8;
        pointer-events: none;
    }
 
    #header h1,
    #header h2 {
        margin: 0;
        padding: 0;
        width: 100%;
        height: var(--header-height-on-desktop);
        display: flex;
        align-items: center;
        justify-content: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    #header h1 a,
    #header h1 a::before,
    #header h2 span,
    #header h2 span::before {
        margin: 0;
        padding: 0;
        z-index: 0;
        display: block;
        text-align: center;
    }
 
    #header h1 {
        z-index: 1;
    }
 
    #header h1 a::before,
    #header h1 a::after {
        content: var(--header-title);
    }
 
    #header h1 a::before  {
        color: rgb(var(--swatch-text-tertiary-color));
        z-index: -1;
        -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-dark));
    }
 
    #header h1 a::after {
        color: rgb(var(--swatch-headerh1-color));
        z-index: 1;
    }
 
    #header h2 {
        z-index: 0;
        text-transform: uppercase;
        pointer-events: none;
    }
 
    #header h2 span {
        margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em);
    }
 
    #header h2 span::before,
    #header h2 span::after {
        --wght: 600;
        content: var(--header-subtitle);
        position: absolute;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        width: 100%;
        text-align: center;
    }
 
    #header h2 span::before {
        -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark));
    }
 
    #header h2 span::after {
        color: rgb(var(--swatch-headerh2-color));
        z-index: 1;
    }
 
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
        color: rgba(0, 0, 0, 0);
    }
 
    @media (min-width: 36rem) {
 
        #login-status {
            flex-grow: 1;
            left: 3%;
            right: initial;
        }
 
     #login-status::before {
     --mask-image: none;
     background-color: transparent;
     }
 
        #login-status:not(:focus-within) {
            color: rgb(var(--login-line-divider-color));
            -webkit-user-select: initial;
            -moz-user-select: initial;
            -ms-user-select: initial;
            user-select: initial;
        }
 
        #login-status #account-topbutton,
        #login-status:not(:focus-within) #account-topbutton {
            --clip-path:
                    polygon( 0 0, 100% 0, 100% 100%, 0 100% );
            background-color: rgba(var(--login-arrow-color), 0);
 
        }
 
        #login-status #account-topbutton::before{
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(var(--login-arrow-color), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton:hover::before {
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
        }
 
        #login-status:not(:focus-within) #account-topbutton::after {
            display: none;
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            pointer-events: all;
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) {
            opacity: 1;
        }
 
        #login-status #my-account {
            --wght: 300;
        }
 
        #account-options {
            background: var(--gradient-header);
        }
 
        #search-top-box {
            top: 1.5em;
            right: 3%;
            background: rgba(var(--search-focus-textbox-bg-color), 0.4);
            box-shadow: calc(var(--search-height) / 2 * -1) 0 calc(var(--search-height) / 2) rgba(var(--search-focus-textbox-bg-color), 0.4);
        }
 
     #search-top-box:focus-within ~ #login-status {
     opacity: 1;
     }
 
        #search-top-box::after {
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
        }
 
        #search-top-box:not(:focus-within)::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0% 100%
                    );
            background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #search-top-box:not(:focus-within):hover::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            background-color: rgb(var(--search-icon-hover-bg-color));
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) {
            max-width: var(--search-width);
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
            max-width: var(--search-width);
            padding: 0 var(--search-height) 0 1em;
            outline-width: 0;
            background-color: rgb(var(--search-focus-textbox-bg-color), 0.35);
            color: rgba(var(--search-textbox-text-color), 0.4);
            cursor: pointer;
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"],
        #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] {
            pointer-events: all;
            border: none;
        }
 
    }
 
    #page-title::after,
    .meta-title::after,
    #page-title::before,
    .meta-title::before {
        content: "";
        flex-grow: 1;
        height: 0.0625rem;
        background: rgb(var(--swatch-primary));
    }
 
    #page-title::before,
    .meta-title::before {
        margin: auto 1.25rem auto auto;
    }
}

Thông Tin

---

Trang Tác giả: Advanced Sandbox Playground

Người làm/quản: MarkNguyen

---

Hồ Sơ Chủ Hộ

Họ và Tên: Mark Nguyen

Quê quán: [DỮ LIỆU BỊ XÓA]

Đơn Vị Công Tác: Phòng Ban [KHÔNG CÓ DỮ LIỆU]

Khu Trưng Bày Tác Phẩm Của Thằng Chủ Nhà

Tài Liệu Dở Hơi Của Chủ Nhà

Tài liệu	Đánh giá	Phản hồi	Ngày đăng tải

Xấp Truyện Đóng Bụi 40000 Năm

Truyện	Đánh giá	Phản hồi	Ngày đăng tải

Quầy báo Thanh niên

Quầy Báo Chính

Tài liệu	Đánh giá	Phản hồi	Ngày đăng tải
SCP-243-JP	+ 2	1	02 Nov 2022 07:51
SCP-1302-JP	+ 2	1	06 Nov 2022 07:38
SCP-002-INT	+ 5	1	13 Nov 2022 04:27
SCP-595	+ 2	1	27 Nov 2022 15:02
SCP-1040-RU	+ 1	1	18 Dec 2022 03:40
SCP-ZH-526	+ 5	1	25 Jan 2023 15:11
SCP-3973	+ 2	1	07 Feb 2023 04:08

Tuyển tập văn hay chữ đẹp

Truyện	Đánh giá	Phản hồi	Ngày đăng tải

Hàng nóng từ Thư viện

• Tĩnh Trạng Niết Bàn

Các trang khác

Trang	Đánh giá	Phản hồi	Ngày đăng tải