The Backrooms中文维基

/* ┌───────────────────────────────┐ */
/* │　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　│ */
/* │==　　　　　　　　　　　灯笼档案馆版式　　　　　　　　　　　==│ */
/* │===　　　　　　　　　由Scutoid Studios制作　　　　　　　 　===│ */
/* │　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　│ */
/* ├───────────────────────────────┤ */
/* │　　　　　　　　　　　　基于超阈限　　　　　　　　　　　　　　│ */
/* │　　　　　　　　　　 原作者 后室中文的　　　　　　　　　　　　│ */
/* │　　　　　　　　　　　　 Ambersight　　　　　　　　　　　 　　│ */
/* ├───────────────────────────────┤ */
/* │　　　　　　　　　　代码授权： CC-BY-SA 3.0　　　　　　　　 　│ */
/* │　　　　　　　　　https://creativecommons.org/　　　　　　　　│ */
/* │　　　　　　　　　　licenses/by-sa/3.0/　　　　　　　　　 　　│ */
/* ├───────────────────────────────┤ */
/* │　　　　　　　　　　代码由 ReyDay 通过　　　　　　　　　　　　│ */
/* │　　　　　　　　　　日期：2025 十一月 4　　　　　　　　　　 　│ */
/* ├───────────────────────────────┤ */
/* │　　　　　　　　　　　　　内容表格　　　　　　　　　　　　　　│ */
/* │　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　│ */
/* │　　　　　　　　 ├ ROOT VARIABLES　　　　　　　　　　　　　　│ */
/* │　 　　　　　　　├── Font Set　　　　　　　　　　　　　　　│ */
/* │　　　　　　　　 ├── Colours　　　　　　　　　　　　　　　 │ */
/* │　　　　　　　　 ├── Measurements　　　　　　　　　　　　　│ */
/* │　　　　　　　　 ├── Images　　　　　　　　　　　　　　　　│ */
/* │　　　　　　　　 ├ HEADER　　　　　　　　　　　　　　　　　　│ */
/* │　　　　　　　　 ├ ELEMENTS　　　　　　　　　　　　　　　　　│ */
/* │　 　　　　　　　├── Code Block　　　　　　　　　　　　　　│ */
/* │　　　　　　　　 ├── Footer　　　　　　　　　　　　　　　　│ */
/* │　　　　　　　　 ├── Side bar　　　　　　　　　　　　　　　│ */
/* │　　　　　　　　 ├── Keycap　　　　　　　　　　　　　　　　│ */
/* │　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　│ */
/* └───────────────────────────────┘ */
/* └───────────────────────────────┘ */

@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/*源泉圆体*/
@import url("https://fontsapi.zeoseven.com/303/main/result.css");

/* === ROOT VARIABLES === */

:root {
    --header-title: "";
    --header-subtitle: "";

    /* Font Set */
    --body-font: 'Tinos', "Noto Sans SC", "Noto Sans TC" , serif;
    --header-font: 'Arimo', "Noto Sans SC", "Noto Sans TC" , sans-serif;
    --title-font: "GenSenRounded2 TW R" , monospace;
    --mono-font: 'Courier Prime', "Noto Serif CJK" , monospace;

    /* Colours */
    /* ...Basic */
    --background-color: 0, 0, 0;
    --text-color: 138, 133, 254; /* AAA contrast with dark-color-3!! */
    --light-color-2: 0, 0, 30;
    --dark-color-2: 0, 0, 60;
    --dark-color-3: 0, 0, 80;
    --dark-color-4: var(--dark-color-3);

    /* ...General use */
    --general-light-background-color: var(--light-color-2);
    --general-light-text-color: var(--text-color);
    --general-medium-background-color: var(--dark-color-2);
    --general-medium-text-color: var(--text-color);
    --general-dark-background-color: var(--dark-color-3);
    --general-dark-text-color: var(--text-color);
    --general-medium-border-color: var(--dark-color-2);
    --general-shadow-color: 0, 0, 0;

    /* ...Scrollbars */
    --scrollbar-color: var(--text-color), 0.7;
    --scrollbar-background-color: var(--light-color-2);

    /* ...Header */
    --header-background-image: linear-gradient(to top, transparent, rgb(var(--background-color)) 2rem);
    --header-extra-background-image: none;
    --header-text-color: var(--text-color);
    --header-text-shadow-color: 0, 0, 0, 0;

    /* ...Popup fader */
    --popup-fader-color: 0, 0, 0, 0.5;
    --popup-tip-color: var(--text-color);

    /* ...Horizontal rule */
    --hr-color: var(--dark-color-3);

    /* ...Side bar */
    --sidebar-handle-background-color: var(--light-color-2);
    --sidebar-title-shadow-color: 0, 0, 0, 0;
    --sidebar-media-background-color: var(--light-color-2), 0.5;
    --sidebar-text-color: var(--link-color);
    --sidebar-hover-text-color: var(--hover-link-color);

    /* ...Loading animation */
    --popup-loading-color: var(--link-color);

    /* ...Top bar */
    --topbar-text-color: var(--link-color);
    --topbar-hover-text-color: var(--hover-link-color);

    --topbar-hover-background-color: var(--dark-color-2);
    --topbar-hover-border-color: var(--dark-color-2);

    --topbar-drop-text-color: var(--link-color);
    --topbar-drop-hover-text-color: var(--hover-link-color);

    --topbar-drop-border-color: var(--dark-color-2);
    --topbar-drop-border-width: 1px;

    /* ...License footer */
    --license-text-color: var(--text-color), 0.8;

    /* ...Links */
    --link-color: 222, 181, 70;
    --hover-link-color: 244, 237, 189;
    --visited-link-color: 150, 24, 43;
    --newpage-color: 221, 102, 17;

    /* ...Buttons */
    --general-button-text-color: var(--link-color);
    --general-hover-button-text-color: var(--hover-link-color);
    
    /* MEASUREMENTS */
    --main-header-height: 13rem;
    --main-header-height-on-mobile: 12rem;

    /* IMAGES */
    --logo-image: url(https://brsandbox-pro.wikidot.com/local--files/theme:lantern-archive/lanternheader-hole-2.png);
    --background-image: url(https://scutoidbox.wikidot.com/local--files/monster-commission/darktile.png);
}

#container {
    background: var(--background-image);
}

/* HEADER */

#header h2 span::before {
    opacity: 1;
}

#top-bar {
    border: solid 1px rgb(var(--dark-color-3));
    border-width: 1px 0;
}

#top-bar .mobile-top-bar {
    background: rgb(var(--background-color));
}

#top-bar div[class*="top-bar"] > ul > li:is(:hover, :active, :focus, :focus-within, .sfhover) {
    background: radial-gradient(rgb(var(--dark-color-3), 0),rgb(var(--background-color)));
    background-size: 100% 200%;
}

#top-bar div[class*="top-bar"] > ul > li:is(:hover, :active, :focus, :focus-within, .sfhover) {
    background: radial-gradient(rgb(var(--dark-color-3)),rgb(var(--background-color)));
    background-size: 100% 200%;
}

/* ELEMENTS */

/* Code Block */
/* Super Liminal is supposed to support dark themes,
   but actually code blocks break in them because
   the text within them isn't styled by Super
   Liminal's colours. On a light theme, the default
   Wikidot colours work fine, but of course they
   break on a black background. */
/* It's complex and not really my problem to fix
   so for now here's an aesthetically pretty stopgap
   solution! */

.code {
    /* Give it a light bg */
    background: #EEE;
    /* Invert it so no flashbang */
    filter: invert(100);
}

/* Footer */
/* Just to make links a little clearer */
#license-area a, #footer a {
    font-weight: bold;
}

/* Side Bar */

#side-bar .side-block .sidebar-social {
  background: rgb(var(--link-color));
  margin: 1rem 0;
  opacity: 0.7;
}

#side-bar .side-block .sidebar-social:visited {
  color: rgb(var(--dark-color-2));
}

#side-bar .side-block .sidebar-social:is(:hover, :focus) {
  background: rgb(var(--hover-link-color));
}

/* Keycap */
/* So you can see the edge better */
.keycap {
    box-shadow: 0 0.125em 0 0.05em rgb(var(--dark-color-3));
}