R-The Backrooms 同人创作站

@import url("https://fonts.googleapis.com/css2?family=Comfortaa&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Righteous&display=swap");
@import url("https://fontlibrary.org//face/beon");
@import url("https://fontlibrary.org//face/radis-sans");
@import url("https://fontlibrary.org//face/la-chata");
@import url("https://fontlibrary.org//face/hezaedrus");
@import url("https://fonts.googleapis.com/css2?family=Nova+Round&display=swap");
 
@font-face {
    font-family: 'ARKai_C';
    src: url('https://cdn.jsdelivr.net/gh/LupusCaeruleus/Fonts@main/ARKai_C.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
 
@font-face {
    font-family: 'CangerYumoW03';
    src: url('https://fastly.jsdelivr.net/gh/Etinjat/FONT@Tsanger/仓耳与墨W03.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
 
@font-face {
    font-family: 'CangerYumoW02';
    src: url('https://fastly.jsdelivr.net/gh/Etinjat/FONT@Tsanger/仓耳与墨W02.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
 
:root {
   --theme-base: "black-highlighter";
   --theme-id: "blinding-lights";
   --theme-name: "Blinding Lights Theme";
 
   --logo-image: url("");
   --header-title: "盲光";
   --header-subtitle: "闪耀而迷人";
 
    --body-font: 'Radis Sans', 'ARKai_C', '幼圆', sans-serif;
    --header-font: 'Beon', 'ARKai_C', '幼圆', sans-serif;
    --title-font: 'La Chata', 'CangerYumoW02', '幼圆', sans-serif;
    --mono-font: 'Comfortaa', 'ARKai_C', '幼圆', monospace;
    --top-font: 'Righteous', 'CangerYumoW03', '幼圆', sans-serif;
    --additional-font: 'Hezaedrus', sans-serif;
    --rate-font: 'Nova Round', 'CangerYumoW02', '幼圆', sans-serif;
 
   --white-monochrome:  35, 35, 55;
   --text-white-monochrome: 255,175,220;
   --pale-gray-monochrome: 230, 101, 168;
   --light-gray-monochrome: 250,80,162;
   --gray-monochrome: 219,131,175;
   --black-monochrome: 255, 255, 255;
   --bright-accent: 255, 200, 230;
   --medium-accent: 30, 30, 60;
   --dark-accent: 245, 125, 186;
   --pale-accent: 215,160,210;
   --alt-accent: 218, 111, 235;
   --midnight: 30,30,70;
   --bubblegum-pink: 255,192,224;
   --neon-pink: 255,77,166;
   --dark-purple: 97,50,87;
 
   --swatch-topmenu-border-color: var(--neon-pink);
   --swatch-headerh1-color: 255, 200, 240;
   --swatch-headerh2-color: 255,200,240;
 
   --link-color: 245, 125, 186;
   --hover-link-color: 251, 190, 222;
   --visited-link-color: 239,90,133;
 
   --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);
}
 
#side-bar .side-block div a img {
   filter: grayscale(100%);
}
 
#skrollr-body {
   background-image:
    radial-gradient(circle, black 50%, transparent 0);
   background-repeat: repeat;
   background-size: 0.25em 0.25em;
   width: 100%;
   height: 7.5rem;
}
 
#container {
   background-image: radial-gradient(circle, rgb(var(--dark-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: white;
}
 
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-size: auto 16rem;
   background-position: center;
   background-repeat: no-repeat;
   opacity: 0.4;
}
 
#header h1, #header h1 a {
   position: absolute;
   top: 0.2em;
   margin: 0;
   width: 100%;
   display: flex;
   justify-content: center;
   z-index: 0;
   font-size: 2em;
}
 
#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;
   background-color: rgb(var(--dark-purple)) !important;
}
 
table.wiki-content-table th {
   background-color: rgb(var(--bubblegum-pink));
   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 {
   background-color: rgb(var(--midnight));
   border: 0.2rem solid white;
   border-radius: 10px;
   box-shadow: 0 0 2px #fff, 0 0 3px 2px #db83b0, 0 0 4px 3px #db83b0;
}
 
.border-block {
   background-color: rgb(var(--midnight));
   border: 0.2rem solid white;
   border-radius: 10px;
   padding: 0.01rem 1rem;
   box-shadow: 0 0 2px #fff, 0 0 3px 2px #db83b0, 0 0 4px 3px #db83b0;
}
 
code,
.code {
   background-color: rgb(var(--midnight));
}
 
:root{
  --base-color: rgb(215,125,175);
  --hover-color: rgb(255,182,225);
  --click-color: rgb(239,152,199);
}
 
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    margin-top: 10px;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 15px 15px 0px 0px;
    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-top-right-radius: 3px;
    border-bottom: solid var(--base-color) 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 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(--top-font);
    border-bottom: 2px double rgb(var(--text-white-monochrome));
    text-align: center;
    color: rgb(var(--text-white-monochrome));
}
 
#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;
}
 
.presum {
    font-family: var(--title-font);
    padding-left: 10px;
}
 
.presumtext {
    font-family: var(--additional-font);
}
 
table.speak th {
    font-size: 1.05em;
    font-weight: bold;
    border-right: 1px solid white;
    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(--bubblegum-pink));
}
 
h1, h2, h3, h4, h5, h6, #header h1 a::before {
font-family: var(--header-font);
font-weight: normal;
color: white;
text-shadow: 0 0 10px #fff, 0 0 15px #ff4da6, 0 0 20px #ff4da6, 0 0 25px #ff4da6, 0 0 25px #ff4da6, 0 0 30px #ff4da6, 0 0 35px #ff4da6;
}
 
hr {
    border-top: .063rem solid #db83b0;
    box-shadow: 0 0 2px #fff, 0 0 3px #db83b0, 0 0 4px 2px #db83b0;
    background-color: #db83b0;
}
 
.scp-image-block.block-right {
   border: 1px double rgb(var(--bubblegum-pink));
   box-shadow: 0 0 2px #fff, 0 0 3px 2px #db83b0, 0 0 4px 3px #db83b0;
}
 
@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 5px #fff, 0 0 10px #e60073, 0 0 15px #e60073, 0 0 20px #e60073, 0 0 25px #e60073, 0 0 30px #e60073;
  }
  to {
    text-shadow: 0 0 10px #fff, 0 0 15px #ff4da6, 0 0 20px #ff4da6, 0 0 25px #ff4da6, 0 0 25px #ff4da6, 0 0 30px #ff4da6, 0 0 35px #ff4da6;
  }
}
 
@-webkit-keyframes hr-glow {
  from {
    box-shadow: 0 0 1px #fff, 0 0 2px #db83b0, 0 0 3px #db83b0, 0 0 4px #db83b0, 0 0 5px #e60073;
  }
  to {
    box-shadow: 0 0 2px #fff, 0 0 3px #db83b0, 0 0 4px 2px #db83b0, 0 0 5px 2px #db83b0;
  }
}
 
@-webkit-keyframes div-glow {
  from {
    box-shadow: 0 0 1px #fff, 0 0 2px #db83b0, 0 0 3px #db83b0, 0 0 4px 1px #db83b0, 0 0 5px 2px #e60073;
  }
  to {
    box-shadow: 0 0 2px #fff, 0 0 3px 2px #db83b0, 0 0 4px 3px #db83b0, 0 0 5px 4px #db83b0;
  }
}
 
.lightblock {
    background-color: rgba(var(--bubblegum-pink), 0.875);
    color: rgb(var(--midnight));
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0px 0px 5px 2px #db83b0;
}
 
.styled-quote {
    background-color: rgba(var(--bubblegum-pink),0.1);
    border-left: 0.5rem solid rgb(var(--bubblegum-pink));
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding: 0.1rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0px 0px 5px 1px #db83b0;
}
 
.border-block hr {
    border-top: .063rem solid white;
    background-color: white;
}
 
.page-rate-widget-box {
    font-family: var(--rate-font);
    background: none;
    border: 0.15rem solid white;
    border-radius: 5px;
    background-color: rgb(var(--midnight));
    box-shadow: 0 0 1px #fff, 0 0 2px 1px #db83b0, 0 0 3px 2px #db83b0;
}
 
.footnotes-footer {
    border-left: 0.5rem solid rgb(var(--bubblegum-pink));
    border-top: 0.1rem solid white;
    border-right: 0.1rem solid white;
    border-bottom: 0.1rem solid white;
    box-shadow: 0 0 2px #fff, 0 0 3px 2px #db83b0, 0 0 4px 3px #db83b0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
 
div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form)>a.btn {
    border: 0.15rem solid white;
    border-radius: 5px;
    background-color: var(--base-color);
    color: white;
    box-shadow: 0 0 2px #fff;
}
 
#side-bar .heading,
#interwiki .heading {
    background-color: rgb(var(--bubblegum-pink));
}
 
#header div#top-bar {
    font-family: var(--mono-font);
}
 
#account-options{
    background-color: rgb(var(--dark-purple));
    border: 0.1rem solid white;
    border-radius: 5px;
}