The draft of dl-duck's-2

版式代码

@import url("https://fonts.googleapis.com/css2?family=Aldrich&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap');
 
:root {
   --theme-base: "black-highlighter";
   --theme-id: "corporate";
   --theme-name: "Corporate Theme";
 
   --logo-image: url("http://backrooms-sandbox-2.wdfiles.com/local--files/sky3theme/corporate-logo");
   --header-title: "The Backrooms";
   --header-subtitle: "未来空间，近在眼前";
 
    --body-font: 'Aldrich', zcoolwenyiti;
    --header-font: 'Kdam Thmor Pro', zcoolwenyiti;
    --title-font: 'Kdam Thmor Pro', zcoolwenyiti;
    --mono-font: 'Noto Serif SC', sans-serif;
    --terminal-font: 'VonwaonBitmap 12px', sans-serif;
    --additional-font: 'Noto Sans SC', sans-serif;
 
   --white-monochrome: 47, 63, 76;
   --text-white-monochrome: 231,254,255;
   --swatch-text-secondary-color: 231,254,255;
   --pale-gray-monochrome: 0,115,207;
   --light-gray-monochrome: 207,236,255;
   --gray-monochrome: 174,198,207;
   --black-monochrome: 240, 255, 255;
   --bright-accent: 240, 248, 255;
   --medium-accent: 30, 181, 232;
   --dark-accent: 125, 196, 235;
   --pale-accent: 69,177,232;
   --alt-accent: 0, 114, 187;
   --midnight-blue:  0,2,64;
   --baby-blue: 161,202,241;
   --medium-blue: 65,105,225;
   --darker-blue: 0,3,132;
 
   --swatch-topmenu-border-color: var(--medium-accent);
  --swatch-headerh1-color: 222, 222, 222;
  --swatch-headerh2-color: 176,196,222;
 
   --link-color: 70,150,200;
   --hover-link-color: 90, 180, 220;
   --visited-link-color: 162,162,208;
 
   --background-gradient-distance: 0rem;
 
   --gradient-header: linear-gradient(to top,
      rgba(var(--medium-accent)) 0%,
      rgba(var(--medium-accent), 0.90) 0%
   );
   --diagonal-stripes: linear-gradient(transparent 0);
}
 
#skrollr-body {
   background-image:
    radial-gradient(circle, rgb(var(--medium-accent)) 50%, transparent 0);
   background-repeat: repeat;
   background-size: 0.25em 0.25em;
   width: 100%;
   height: 7.5rem;
}
 
#side-bar .side-block div a img {
   filter: grayscale(100%);
}
 
#container {
   background-image: radial-gradient(circle, rgb(var(--medium-accent), 0.05) 50%, transparent 0);
   background-size: 0.25em 0.25em;
   background-repeat: repeat;
   background-attachment: fixed;
}
 
#top-bar div.mobile-top-bar > ul > li > a,
#top-bar div.top-bar > ul > li > a,
#top-bar div.mobile-top-bar > ul > li > ul > li > a,
#top-bar div.top-bar > ul > li > ul > li > a {
   color: rgb(var(--bright-accent));
}
 
div#page-options-bottom-2 > a, div#page-options-bottom > a {
   border-radius: 0em;
   -moz-border-radius: 0em;
   border: none;
}
 
div#page-options-bottom-2 > a:active, div#page-options-bottom-2 > a:hover, div#page-options-bottom > a:active, div#page-options-bottom > a:hover {
   border: none;
}
 
#header, #top-bar {
   background-attachment: scroll;
}
 
#header {
   background-image: none;
}
 
#header::before {
   content: "";
   position: absolute;
   height: 100%;
   width: 100%;
   left: 0;
   top: 0;
   background-image: var(--logo-image);
   background-size: auto 16rem;
   background-position: center;
   background-repeat: no-repeat;
   opacity: 0.4;
}
 
#header h1, #header h1 a {
   position: absolute;
   top: 1rem;
   margin: 0;
   width: 100%;
   display: flex;
   justify-content: center;
   z-index: 0;
   font-size: 1.5em;
}
 
#header h2, #header h2 span, #header h2 span::before {
   position: absolute;
   top: 2rem;
   margin: 0;
   width: 100%;
   display: flex;
   justify-content: center;
   font-size: 1em;
}
 
#header h1 a::before, #header h2 span::before {
   text-shadow: .063rem 0.1rem 0.1rem #0c0c0c;
}
 
.yui-navset .yui-nav .selected a {
   color: rgb(var(--bright-accent)) !important;
}
 
table.wiki-content-table th {
   color: rgb(var(--white-monochrome));
}
 
#login-status {
   color: rgb(var(--bright-accent));
}
 
#login-status a {
   color: rgb(var(--bright-accent));
}
 
#search-top-box input.empty {
   color: rgb(var(--bright-accent));
}
 
a.newpage {
   background: transparent;
   text-decoration: none
}
 
a.newpage {
   color: rgb(var(--alt-accent))
}
 
blockquote {
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(90, 20, 20,.25);
}
blockquote a {
    color: rgb(var(--light-gray-monochrome));
}
 
.styled-quote {
   background-color:rgb(var(--black-monochrome));
   border-left: 0.5rem solid rgba(var(--midnight-blue));
   color:rgb(var(--darker-blue));
   padding: 0.1rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
}
 
.dark-styled-quote {
   background-color:rgb(var(--midnight-blue));
   border-left: 0.5rem solid rgba(var(--black-monochrome));
   color:rgb(var(--text-white-monochrome));
   padding: 0.1rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
}
 
.lightblock {
   background-color: rgb(var(--black-monochrome));
   color: rgb(var(--darker-blue));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.block {
   background-color:rgb(var(--gray-monochrome));
   color:rgb(var(--midnight-blue));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.darkblock {
   background-color:rgb(var(--midnight-blue));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
   color: rgb(var(--text-white-monochrome));
}
 
.titleblock {
        background-color: rgb(var(--black-monochrome));
        color:rgb(var(--midnight-blue));
        padding: 0.5rem 1rem 0.10rem;
        margin: 1.5rem 0rem 0.5rem 0rem;
        box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5);
        border: solid rgb(var(--baby-blue)) 2px;
     }
 
     .titlebox{
       color: rgb(var(--midnight-blue));
       position: relative;
       top: -1.6rem;
       background-color: rgb(var(--baby-blue));
       padding: 0.25rem 1rem;
       line-height: 0.1rem;
     }
 
.dark-titleblock {
        background-color: rgb(var(--midnight-blue));
        color:rgb(var(--text-white-monochrome));
        padding: 0.5rem 1rem 0.10rem;
        margin: 1.5rem 0rem 0.5rem 0rem;
        box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5);
        border: solid rgb(var(--baby-blue)) 2px;
     }
 
     .dark-titlebox{
       color: rgb(var(--midnight-blue));
       position: relative;
       top: -1.6rem;
       background-color: rgb(var(--baby-blue));
       padding: 0.25rem 1rem;
       line-height: 0.1rem;
     }
 
.border-block {
    background-color:rgb(var(--gray-monochrome));
    color:rgb(255, 255, 255);
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    border: solid 0.3rem rgb(var(--gray-monochrome));
 }
 
.filetabs .yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li {
   display: inline-block;
}
 
.filetabs .yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav {
   display: block;
}
 
.filetabs .yui-navset .yui-content {
   border-top-width: 15px;
}
 
.filetabs .yui-navset .yui-nav a,
.filetabs .yui-navset .yui-navset-top .yui-nav a,
.filetabs .yui-navset .yui-nav .selected a,
.filetabs .yui-navset .yui-nav a:focus,
.filetabs .yui-navset .yui-navset-top .yui-nav a:focus,
.filetabs .yui-navset .yui-nav a:hover,
.filetabs .yui-navset .yui-navset-top .yui-nav a:hover {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no' %3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' preserveAspectRatio='none' viewBox='0 0 150 45' xml:space='preserve'%3E%3Cdesc%3ECreated with Fabric.js 4.6.0%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg transform='matrix(1 0 0 1 74.95 22.39)' id='bC-LIzxo7Tu37zCdkDrqS' %3E%3Cpath style='stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(125, 196, 235); fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' transform=' translate(0, 0)' d='M -74.94856 22.50703 L -60.0064 -12.520110000000003 C -60.0064 -12.520110000000003 -55.89385 -21.849030000000003 -47.235839999999996 -22.281930000000003 C -38.57782999999999 -22.714830000000003 46.87608 -22.39016 46.87608 -22.39016 C 46.87608 -22.39016 56.05659 -23.219710000000003 61.40639 -12.520120000000002 C 66.75618 -1.8205300000000015 74.94856 22.506959999999996 74.94856 22.506959999999996 z' stroke-linecap='round' /%3E%3C/g%3E%3Cg transform='matrix(1 0 0 1 75.18 17.97)' id='E8ePkHu_UUyvFWDAIzFyP' %3E%3Cpath style='stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(125, 196, 235); fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' transform=' translate(0, 0)' d='M -46.15385 12.0108 L -46.15385 -12.01079 L 46.153839999999995 -12.01079 L 46.153839999999995 12.0108 z' stroke-linecap='round' /%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 2.7rem;
    background-repeat: no-repeat;
    border-width: 0px;
    border-top: none;
    background-position: top;
}
 
.filetabs .yui-navset .yui-nav a,
.filetabs .yui-navset .yui-navset-top .yui-nav a {
   padding: 4px 20px 0px 20px;
}
 
.filetabs .yui-navset .yui-nav .selected a,
.filetabs .yui-navset .yui-nav a:focus,
.filetabs .yui-navset .yui-navset-top .yui-nav a:focus,
.filetabs .yui-navset .yui-nav .selected a:hover,
.filetabs .yui-navset .yui-navset-top .yui-nav .selected a:hover {
    padding: 8px 20px 0px 20px;
}
 
.filetabs .yui-navset .yui-nav a:hover,
.filetabs .yui-navset .yui-navset-top .yui-nav a:hover {
   padding: 6px 20px 0px 20px;
}
 
.filetabs .yui-navset .yui-nav,
.filetabs .yui-navset .yui-navset-top .yui-nav {
    border-color: transparent;
}
 
.filetabs .yui-navset .yui-nav .selected,
.filetabs .yui-navset .yui-navset-top .yui-nav .selected,
.filetabs .yui-navset .yui-nav .selected a:active,
.filetabs .yui-navset .yui-nav .selected a:focus,
.filetabs .yui-navset .yui-nav li,
.filetabs .yui-navset .yui-navset-top .yui-nav li {
   background-color: transparent;
}
 
.filetabs .yui-navset .yui-nav li,
.filetabs .yui-navset .yui-navset-top .yui-nav li {
   box-shadow: none;
}
 
.filetabs .yui-navset .yui-nav li {
   margin-right: 36px;
}
 
.filetabs .yui-navset .yui-nav .selected a {
   color: rgb(var(--pale-gray-minochrome)) !important;
}
 
.filetabs .yui-navset .yui-nav a:focus,
.filetabs .yui-navset .yui-nav a:hover {
   color: rgb(var(--white-monochrome));
}
 
.filetabs .yui-navset .yui-nav .selected a em,
.filetabs .yui-navset .yui-nav .selected a:hover em {
   position: relative;
   top: -4px;
}
 
.filetabs .yui-navset .yui-nav a:hover em {
   position: relative;
   top: -2px;
}
 
.filetabs .yui-navset .yui-nav li,
.filetabs .yui-navset .yui-navset-top .yui-nav li {
   border-bottom: solid 1px rgb(var(--black-monochrome));
}
 
.filetabs .yui-navset .yui-nav li.selected,
.filetabs .yui-navset .yui-navset-top .yui-nav li.selected {
   border-bottom: none;
   z-index: 1;
}
 
code,
.code {
   background-color: rgb(var(--darker-blue));
}
 
:root{
  --base-color: rgb(34,191,250);
  --hover-color: rgb(173,216,230);
  --click-color: rgb(164,221,237);
}
 
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    margin-top: 10px;
    padding-left: 1rem;
    padding-right: 1rem;
    box-shadow: rgb(128, 128, 128) 0px 0px 3px 0px;
    transition: background 0.1s linear;
    background: var(--base-color);
    width: min-content;
    white-space: nowrap;
    overflow: hidden;
}
 
#page-content .collapsible-block-link {
    color: white;
    font-weight: bold;
    text-decoration: none;
}
 
#page-content .collapsible-block-link:hover {
    text-decoration: none
}
 
#page-content .collapsible-block-content {
    transition: border-top-color 0.2s linear, border-bottom-color 0.2s linear;
    border-top: solid var(--base-color) 5px;
    border-bottom: solid var(--base-color) 3px;
}
 
#page-content .collapsible-block-folded {
    max-width: 100%;
}
#page-content .collapsible-block-unfolded-link{
    width: min-content;
}
 
#page-content .collapsible-block-folded .collapsible-block-link::before {
    content: "▷";
    border-right: none;
    padding-right: 0rem;
    margin-right: 1rem;
    font-weight: normal;
    font-family: var(--mono-font);
}
#page-content .collapsible-block-unfolded .collapsible-block-link::before {
    content: "▽";
    border-right: none;
    padding-right: 0rem;
    margin-right: 1rem;
    font-weight: normal;
    font-family: var(--mono-font);
}
 
#page-content .collapsible-block-folded:hover, #page-content .collapsible-block-unfolded-link:hover {
    background: var(--hover-color);
    max-width: 100%;
}
 
#page-content .collapsible-block-unfolded-link:hover + .collapsible-block-content{
    border-top-color: var(--hover-color);
    border-bottom-color: var(--hover-color);
}
 
#page-content .collapsible-block-unfolded-link:hover + .collapsible-block-content::after {
    background: var(--hover-color);
}
 
#page-content .collapsible-block-folded:active, #page-content .collapsible-block-unfolded-link:active, #page-content .collapsible-block-unfolded-link:active + .collapsible-block-content::after {
    transition: background 0s, max-width 0s;
    background: var(--click-color);
    max-width: 100%;
}
 
#page-content .collapsible-block-unfolded-link:active + .collapsible-block-content {
    transition: border-top-color 0s, border-bottom-color 0s;
    border-top-color: var(--click-color);
    border-bottom-color: var(--click-color);
}
 
#page-content .unfolded-collapse {
    margin-top: 10px;
    padding-left: 1rem;
    padding-right: 1rem;
    box-shadow: rgb(128, 128, 128) 0px 0px 3px 0px;
    background: var(--base-color);
    color: white;
    font-weight: bold;
    width: min-content;
    white-space: nowrap;
    overflow: hidden;
}
 
#page-content .unfolded-collapse::before {
    content: "▽";
    border-right: none;
    padding-right: 0rem;
    margin-right: 1rem;
    font-weight: normal;
    font-family: var(--mono-font);
}
 
#page-content .unfolded-collapse-border {
    display: block;
    width: 700px;
    border-top: solid var(--base-color) 5px;
}
 
#page-content .center-collapse .collapsible-block-folded, #page-content .center-collapse .collapsible-block-unfolded-link, #page-content .center-collapse .unfolded-collapse{
    margin:auto;
    margin-top: 10px;
}
 
#page-content .addendumfooter{
    display: block;
    border-bottom: solid 3px var(--base-color);
    margin: auto;
    text-align: center;
}
 
#page-content .info-container .collapsible-block {
    counter-increment: none;
}
 
#page-title{
    font-family: var(--header-font);
    border-bottom: 2px solid rgb(var(--pale-accent));
    text-align: center;
    color: rgb(var(--pale-accent));
}
 
#page-content .info-container .collapsible-block-folded, #page-content .info-container .collapsible-block-unfolded-link  {
    transition: none;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-shadow: none;
    background: var(--barColour);
}
 
#page-content .info-container .collapsible-block-folded::before, #page-content .info-container .collapsible-block-unfolded-link::before  {
    content: "";
    display: none;
}
 
#page-content .info-container .collapsible-block-content {
    border-bottom: none;
    transition: none;
    border-top: none;
}
 
#page-content .info-container .collapsible-block-content::after {
    display: none;
}
 
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded, #page-content .unfolded-collapse{
    line-height: 1.4;
}
 
#page-content .collapsible-block-folded .collapsible-block-link::before, #page-content .collapsible-block-unfolded .collapsible-block-link::before, #page-content .unfolded-collapse::before {
    font-size: 130%;
    margin-left: -0.4em
}
 
.log-top {
    font-family: var(--header-font);
    text-align: center;
    font-size: 2em;
    color: rgb(var(--medium-blue));
}
 
.presum {
    font-family: var(--title-font);
    color: rgb(var(--medium-blue));
}
 
.presumtext {
    font-family: var(--additional-font);
    color: rgb(var(--medium-blue));
}
 
table.speak th {
    font-size: 1.05em;
    font-weight: bold;
    border-right: 1px solid #c6d6dd;
    color: rgb(var(--medium-blue));
    padding:  1.1em 1em 0em 1em;
}
 
table.speak td {
    padding: 1.1em 0em 0em 0.9em;
}
 
table.speak td.act {
    font-family: var(--mono-font);
    color: rgb(var(--darker-blue));
}
 
table.speak td.speech {
    color: rgb(var(--medium-blue));
}
 
.terminal-top {
    font-family: var(--header-font);
    text-align: center;
    font-size: 2em;
    color: rgb(var(--bright-accent));
}
 
table.digital {
    font-family: var(--terminal-font);
}
 
table.digital th {
    font-weight: bold;
    border: none;
    padding: 0, 0, 0, 0;
    vertical-align: top;
}
 
table.digital td {
    padding: 0em 0 0 1em;
}
 
table.digital td.response {
    color: rgb(var(--baby-blue));
}
 
#account-options{
    color: rgb(var(--midnight-blue));
}

+ 版式代码

:root {
 
    /* Variables */
    --light-red: 192, 127, 127;
    --dark-red: 88, 18, 14;
    --light-yellow: 218, 210, 175;
    --dark-yellow: 117, 102, 67;
    --light-blue: 151, 161, 197;
    --dark-blue: 49, 69, 130;
    --gold-accent: 231, 213, 185;
    --beige-accent: 244, 242, 229;
    --light-grey: 204, 204, 204;
    --dark-grey: 54, 54, 54;
    --full-black: 0, 0, 0;
    --full-white: 255, 255, 255;
 
    --theme-base: "black-highlighter";
    --theme-id: "nuliminal";
    --theme-name: "NuLiminal Theme";
 
    /* Header */
     --logo-image: url("http://backrooms-wiki.wdfiles.com/local--files/component%3Atheme/logo.svg");
     --header-title: "The Backrooms";
     --header-subtitle: "你曾经来过这里";
     --swatch-headerh1-color: var(--white-monochrome);
     --swatch-headerh2-color: var(--white-monochrome);
 
    /* Typefaces */
     --body-font: 'Public Sans', Noto Sans SC, Inter, Verdana, Geneva, "Helvetica Neue", "Helvetica", sans-serif;
     --UI-font: "Fantasque Sans Mono", Noto Sans SC, Courier New, Ubuntu Mono, Consolas, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     --header-font: 'Fantasque Sans Mono', Noto Sans SC, Courier New, Ubuntu Mono, Consolas, monospace;
     --title-font: var(--header-font);
     --mono-font: 'Fantasque Sans Mono', Noto Serif SC, Recursive, Consolas, monaco, monospace;
    /* MOST THEMES SHOULDN'T CHANGE THIS: makes editing consistent across themes, adds programming ligatures */
     --editor-font: 'Fantasque Sans Mono', Noto Serif SC, Recursive, Consolas, monaco, monospace;
 
    /* Colors */
    --white-monochrome: var(--full-white);
    --pale-gray-monochrome: var(--beige-accent);
    --light-gray-monochrome: var(--light-grey);
    --dark-gray-monochrome: var(--dark-grey);
    --gray-monochrome: var(--dark-blue);
    --black-monochrome: var(--dark-grey);
    --bright-accent: var(--dark-blue);
    --medium-accent: var(--light-blue);
    --dark-accent: var(--dark-red);
    --pale-accent: var(--light-red);
    --link-color: var(--dark-blue);
    --visited-link-color: var(--dark-red);
    --alt-accent: var(--dark-grey);
    --hover-link-color: var(--dark-blue);
 
   /* Liminal Variables */
    --header-text-shadow: 0px 2px 3px rgba(0,0,0,0.8);
    --header-text-shadow-hover: 0px 5px 3px rgba(0,0,0,0.3);
    --quote-shadow: 0 2px 4px rgba(var(--black-monochrome),0.25);
    --footer-message: var(--header-subtitle);
 
   /* Swatches */
    --swatch-background: var(--beige-accent);
    --swatch-primary: var(--dark-blue);
    --swatch-secondary-color: var(--light-yellow);
 
    --swatch-text-general: var(--full-black);
    --swatch-important-text: var(--full-white);
 
    --swatch-menubg-color: var(--light-grey);
    --swatch-menubg-medium-color: var(--gold-accent);
    --swatch-menubg-dark-color: var(--dark-blue);
    --swatch-menubg-hover-color: var(--dark-grey);
    --swatch-menutxt-dark-color: var(--dark-grey);
    --swatch-menutxt-general-color: var(--full-black);
    --swatch-border-color: var(--dark-grey);
 
    --swatch-topmenu-border-color: var(--dark-red);
    --swatch-topmenu-bg-color: var(--gold-accent);
    --swatch-topmenu-txt-color: var(--dark-grey);
 
    --swatch-sidebar-collapsible-tab-bg: var(--dark-grey);
 
    --gradient-header: linear-gradient( to bottom, rgb(var(--medium-accent)) 0%, rgb(var(--bright-accent)) 100%);
     --gradient-background: linear-gradient( to bottom, rgb(var(--swatch-background)), rgb(var(--swatch-background)));
     --diagonal-stripes: transparent;
     --background-gradient-distance: 40rem; /* will not go further than 100vh */
     --background-gradient-color: var(--dark-yellow); /* This will display at low opacity */
     --banner-gradient-color: var(--dark-blue);
 
    /* Measurements */
     --scrollbar-width: 0.7rem;
     --sidebar-width-on-desktop: calc(var(--base-font-size) * (266 / 15));
     --body-width-on-desktop: 45.75rem;
     --header-height-on-desktop: 9rem;
     --header-height-on-mobile: 9rem;
 
    /* Rating Module */
     --rating-module-bg-color: var(--light-gray-monochrome);
}
 
/* Main Content */
#main-content {
    --tabs-bg: var(--bright-accent);
    --tabs-txt: var(--swatch-important-text);
    --tabs-hover-bg: var(--swatch-topmenu-bg-color r);
    --tabs-hover-txt: var(--swatch-text-general);
    --tabs-selected-bg: var(--light-gray-monochrome);
    --tabs-selected-txt: var(--swatch-text-general);
    --tabs-selected-outline: var(--dark-gray-monochrome);
    --tabs-bottom-border-color: var(--swatch-topmenu-bg-color);
    --tabs-content-bg-color: var(--medium-accent), 0.25;
    --tabs-content-border-color: var(--bright-accent);
 
    --tables-header-bg: var(--dark-accent);
    --tables-header-txt: var(--swatch-text-secondary-color);
    --tables-border: var(--dark-gray-monochrome);
    --tables-body-bg: var(--pale-accent);
    --tables-body-txt: var(--swatch-text-general);
 
    --footnotes-footer-bg-color: var(--swatch-secondary-color);
    --footnotes-footer-colorbar-color: var(--dark-accent);
    --footnotes-footer-title-bg-color: var(--swatch-primary);
 
    --blockquote-bg-color: var(--light-gray-monochrome), 0.25;
    --blockquote-border-color: var(--dark-gray-monochrome);
 
    --toc-body-bg-color: var(--light-gray-monochrome);
 
}
 
#top-bar {
    --dropdown-bg-color: var(--dark-accent), 0.9;
    --dropdown-border-color: var(--pale-accent);
    --topmenu-category-color: var(--dark-grey);
    --topmenu-category-hover-bg: var(--dark-grey);
}
 
#side-bar, #interwiki {
    --sidebar-collapsible-fld-link-bg: var(--dark-gray-monochrome);
    --sidebar-collapsible-fld-link-color: var(--light-gray-monochrome);
}
 
#side-bar div.collapsible-block div.collapsible-block-unfolded-link>a.collapsible-block-link {
    color: rgb(var(--light-gray-monochrome));
}
 
/* Scrollbar */
html, body {
    color: rgb(var(--full-black));
    font-variant-ligatures: none;
    scrollbar-color: rgb(54, 54, 54) rgb(204, 204, 204);
    margin: 0;
    padding: 0;
}
 
/* Wallpaper */
/* Header Wallpaper */
 #skrollr-body::before {
     background-color: rgba(var(--banner-gradient-color),0.2);
}
 #skrollr-body::before {
     background-color: rgba(var(--banner-gradient-color),0.2);
}
 
 #container-wrap-wrap::before {
     background: linear-gradient(
         to bottom,
         rgba(var(--banner-gradient-color), 0) 0%,
         rgba(var(--banner-gradient-color), 0.013) 5%,
         rgba(var(--banner-gradient-color), 0.049) 10.1%,
         rgba(var(--banner-gradient-color), 0.104) 15.2%,
         rgba(var(--banner-gradient-color), 0.175) 20.5%,
         rgba(var(--banner-gradient-color), 0.259) 25.9%,
         rgba(var(--banner-gradient-color), 0.352) 31.6%,
         rgba(var(--banner-gradient-color), 0.45) 37.5%,
         rgba(var(--banner-gradient-color), 0.55) 43.8%,
         rgba(var(--banner-gradient-color), 0.648) 50.4%,
         rgba(var(--banner-gradient-color), 0.741) 57.4%,
         rgba(var(--banner-gradient-color), 0.825) 64.9%,
         rgba(var(--banner-gradient-color), 0.896) 72.8%,
         rgba(var(--banner-gradient-color), 0.951) 81.3%,
         rgba(var(--banner-gradient-color), 0.987) 90.3%,
         rgb(var(--banner-gradient-color)) 100%
     );
     z-index: -1;
     content: "";
     top: 0;
     left: 0;
     position: absolute;
     width: 100%;
     height: var(--header-height-on-desktop);
}
 
/* Div Boxes */
 .darkblock {
     color: rgb(var(--white-monochrome));
     background: rgb(var(--dark-gray-monochrome));
     padding: 0.01rem 1rem;
     margin: 0.5rem 0;
     box-shadow: var(--quote-shadow);
}
 .lightblock {
     color: rgb(var(--full-black));
     background: rgb(var(--light-gray-monochrome));
     padding: 0.01rem 1rem;
     margin: 0.5rem 0;
     box-shadow: var(--quote-shadow);
}
 
 .redblock {
    color: rgb(var(--full-black));
    background: rgb(var(--light-red));
    padding: 0.01rem 1rem;
    margin: 0.5rem 0;
    box-shadow: var(--quote-shadow);
}
 
 .yellowblock {
    color: rgb(var(--full-black));
    background: rgb(var(--light-yellow));
    padding: 0.01rem 1rem;
    margin: 0.5rem 0;
    box-shadow: var(--quote-shadow);
}
 
 .blueblock {
    color: rgb(var(--full-black));
    background: rgb(var(--light-blue));
    padding: 0.01rem 1rem;
    margin: 0.5rem 0;
    box-shadow: var(--quote-shadow);
}
 
/* Div Quotes */
 .styled-quote {
     color: rgb(var(--full-black));
     background: rgb(var(--light-gray-monochrome));
     padding: 0.01rem 1rem;
     margin: 0.5rem 0;
     box-shadow: var(--quote-shadow);
     border-left: solid 6px rgb(var(--dark-gray-monochrome));
}
 
 .dark-styled-quote {
     color: rgb(var(--white-monochrome));
     background: rgb(var(--dark-gray-monochrome));
     padding: 0.01rem 1rem;
     margin: 0.5rem 0;
     box-shadow: var(--quote-shadow);
     border-left: solid 6px rgb(var(--light-gray-monochrome));
}
 
 .styled-red {
     color: rgb(var(--full-black));
     background: rgb(var(--light-red));
     padding: 0.01rem 1rem;
     margin: 0.5rem 0;
     box-shadow: var(--quote-shadow);
     border-left: solid 6px rgb(var(--dark-red));
}
 
 .styled-yellow {
     color: rgb(var(--full-black));
     background: rgb(var(--light-yellow));
     padding: 0.01rem 1rem;
     margin: 0.5rem 0;
     box-shadow: var(--quote-shadow);
     border-left: solid 6px rgb(var(--dark-yellow));
}
 
 .styled-blue {
     color: rgb(var(--full-black));
     background: rgb(var(--light-blue));
     padding: 0.01rem 1rem;
     margin: 0.5rem 0;
     box-shadow: var(--quote-shadow);
     border-left: solid 6px rgb(var(--dark-blue));
}
 
/* Tess Div by Ambersight */
 
:is(.with-tess) {
    margin-top: 18rem;
    padding-top: 1.2rem;
    position: relative;
}
 
:is(.with-tess.no-padding) {
    padding-top: 0.5rem;
    min-height: 1rem;
}
 
.with-tess::before {
    content: "";
    display: block;
    height: 20rem;
    width: 23rem;
    background: url(https://s2.loli.net/2024/11/19/REebTS8UZjvnfJC.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: -18.06rem;
    right: 2rem;
}
 
.with-tess::after {
    content: "";
    display: block;
    height: 6rem;
    width: 10rem;
    background: url(https://s2.loli.net/2024/11/20/9KYzVHiUAOJnyeS.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: -4rem;
    left: 1rem;
}
 
@media only screen and (max-width: 590px) {
    .with-tess::after {
        display: none;
    }
}
 
@media only screen and (max-width: 520px) {
    .with-tess::before {
        right: 0.5rem;
    }
}
 
/* Header Text */
 #header h1 {
     width: 100%;
}
 #header h1 a, #header h1 a:before {
     width: fit-content;
     transition: 0.2s;
     position: relative;
     bottom: 0;
     color: rgb(var(--swatch-headerh1-color));
}
 #header h1 a:hover:before {
     text-shadow: var(--header-text-shadow-hover);
     bottom: 3px;
}
 #header h1, #header h1 a {
     position: absolute;
     top: 1.4rem;
     margin: 0;
     display: flex;
     justify-content: center;
     z-index: 0;
     height: 1.5rem;
}
 #header h2, #header h2 span, #header h2 span::before {
     position: absolute;
     top: 2.05rem;
     margin: 0;
     width: 100%;
     display: flex;
     justify-content: center;
     font-weight: bold;
}
 #header h2 span::before {
     color: rgb(var(--swatch-headerh2-color));
}
 #header h1 a::before, #header h2 span::before {
     text-shadow: var(--header-text-shadow);
}
 
/* License Box */
 #page-content .licensebox .collapsible-block-link {
     margin-left: .25em;
     padding: .25em;
     font-weight: 700;
     opacity: .5;
     color: rgb(var(--dark-gray-monochrome));
     -webkit-transition: opacity .5s ease-in-out;
     -moz-transition: opacity .5s ease-in-out;
     transition: opacity .5s ease-in-out;
}
 #page-content .licensebox .collapsible-block-link:hover {
     color: rgb(var(--black-monochrome));
}

T.C.L.

什么是T.C.L.?

T.C.L.，全称(The backrooms)Technology-Conduct Level-exploration(team)。