孤魂
@import url('https://fonts.googleapis.com/css2?family=Nixie+One&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap'); :root { --body-bg: 225, 225, 225; --content-bg: var(--global-white-color); --bg-opacity: 0.9; --extra-bg-1: url(https://imagebed.pro/images/Liurd/n2QIoY5r1F.svg); --extra-bg-2: url(https://imagebed.pro/images/Liurd/n2QIoY5r1F.svg); --extra-bg-3: url(https://imagebed.pro/images/Liurd/n2QIoY5r1F.svg); --extra-opacity-1: 0.15; --extra-opacity-2: 0.05; --extra-opacity-3: 0.05; --topbar-hover-bg: var(--dark-ui-bg), 0.2; --topbar-hover-txt: var(--light-ui-txt); --user-drop-txt: var(--dark-ui-txt); --bottombar-bg: var(--dark-ui-bg); --bottombar-txt: var(--dark-ui-txt); --header-title: "Backrooms"; --banner-title: "BACKROOMS"; --banner-subtitle: "当色彩褪去的时候"; --header-height: 3rem; --topbar-height: 2.5rem; --dropdown-height: var(--topbar-height); --banner-height: 25rem; --header-ui-size: 3rem; --header-title-size: 1.8rem; --topbar-size: clamp(0.8rem, calc(0.4rem + 0.8vw), 1.2rem); --banner-title-size: clamp(2rem, calc(2rem + 3.5vw), 6rem); --banner-subtitle-size: 1rem; --banner-font: "Nixie One", "Noto Serif SC", Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, Arial, serif; --header-font: var(--banner-font); --title-font: "Outfit", "Noto Sans SC", "Noto Sans TC", Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, Arial, sans-serif; --body-font: "Atkinson Hyperlegible", "Noto Sans SC", "Noto Sans TC", Arimo, Verdana, Geneva, sans-serif; --ui-font: "Outfit", "Noto Sans SC", "Noto Sans TC", Arimo, Verdana, Geneva, sans-serif; } #extra-div-1 { position: fixed; width: 100%; height: 25vh; bottom: 0; left: 0; z-index: -1; background-image: var(--extra-bg-1); background-size: 20rem; background-repeat: repeat-x; background-position: center; opacity: var(--extra-opacity-1); } #extra-div-2 { position: fixed; width: 100%; height: 50vh; bottom: 0; left: 0; z-index: -2; background-image: var(--extra-bg-2); background-size: 40rem; background-repeat: repeat-x; background-position: center; opacity: var(--extra-opacity-2); } #extra-div-3 { position: fixed; width: 100%; height: 100vh; bottom: 0; left: 0; z-index: -3; background-image: var(--extra-bg-3); background-size: contain; background-repeat: repeat-x; background-position: bottom; opacity: var(--extra-opacity-3); } #container { display: grid; grid-template-columns: minmax(var(--sidebar-width), 1fr)auto 1fr; grid-template-rows: auto auto auto auto; } #extrac-div-1 { grid-column: 2 / 3; grid-row: 1 / 2; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: var(--banner-font); font-weight: 200; width: 100%; height: var(--banner-height); color: rgb(var(--header-txt)); order: -1; } #extrac-div-1::before { content: var(--banner-title); font-size: var(--banner-title-size); } #extrac-div-1::after { content: var(--banner-subtitle); font-size: var(--banner-subtitle-size); } #header { grid-column: 1 / 2; grid-row: 1 / 3; min-width: var(--sidebar-width); width: 100%; height: fit-content; grid-template-columns: var(--header-ui-size) 1fr auto auto; grid-template-rows: var(--header-ui-size) calc(var(--banner-height) - var(--header-ui-size)) auto; top: calc(0px - var(--banner-height)); order: -2; } #search-top-box { grid-column: 3 / 4; position: fixed; right: var(--header-ui-size); backdrop-filter: blur(1rem); } #login-status { grid-column: 4 / 5; position: fixed; right: 0; backdrop-filter: blur(1rem); } #header h1 { grid-column: 2 / 3; grid-row: 1 / 2; height: var(--header-height); position: static; } #header h1 a { justify-content: flex-start; padding: 0; padding-left: 0.5rem; transition: padding var(--global-duration); } #header h1 a:is(:hover, :focus) { padding-left: 1rem; transition: padding var(--global-hover-duration); } #header h2 { display: none; } #header-extra-div-1 { display: none; } #top-bar { grid-column: 1 / 5; grid-row: 3 / 4; height: auto; } #top-bar > div > ul { flex-direction: column; height: auto; margin-right: 0; } #top-bar > div > ul > li { flex-basis: unset; height: var(--topbar-height); } #top-bar > div > ul > li > a { justify-content: flex-end; padding: 0 1rem; } #top-bar > div > ul > :is(li, li:last-of-type) > ul { top: 0; left: 100%; width: 24em; max-width: max-content; min-width: auto; flex-direction: row; flex-wrap: wrap; } #top-bar > div > ul > li > ul > li { width: 10em; flex-grow: 1; } #top-bar > div > ul > :is(li, li:hover, li:focus, li.sfhover, li:focus-within) > ul > li > a { box-sizing: border-box; } #content-wrap { display: contents; } #side-bar { max-height: unset; overflow-y: auto; border: unset; box-shadow: 0 0 1.5rem -1rem rgb(var(--global-dark-color)); } #side-bar::after { backdrop-filter: blur(1rem); } #main-content { grid-column: 2 / 3; grid-row: 2 / 3; min-height: 100vh; box-sizing: border-box; margin: 0 auto 15vh; padding: 1.5rem; box-shadow: 0 0 2.5rem -1rem rgb(var(--global-dark-color)); position: relative; background: rgba(var(--content-bg), var(--bg-opacity)); } #main-content::after { content: "你曾经来过这里."; display: flex; align-items: center; justify-content: center; position: absolute; top: 100%; left: 0; width: 100%; height: 10vh; color: rgb(var(--header-txt)); font-family: var(--banner-font); font-weight: 200; } #page-title { padding: 0; } :is(blockquote, .blockquote, div.blockquote, [class*=blockquote]) { padding: 0.5rem 1rem; border-width: 0 0 0 0.3rem; background: rgba(var(--light-block-bg), 0.4); } #page-options-container { font-family: var(--ui-font); } #footer { grid-column: 1 / 4; grid-row: 3 / 4; box-sizing: border-box; justify-content: flex-end; margin-top: 0.5rem; border: unset; } #license-area { grid-column: 1 / 4; grid-row: 4 / 5; padding: 0.5rem; justify-content: flex-end; } #license-area a { color: rgb(var(--global-pale-color)); } @media only screen and (max-width: 1024px) { #container-wrap { perspective-origin: 49.5% 5rem; } #container { display: flex; } #header { min-width: var(--sidebar-width); grid-template-columns: var(--header-ui-size) 1fr auto auto; grid-template-rows: var(--header-ui-size) auto auto; top: 0; width: initial; position: static; } #content-wrap { display: block; margin: 0; } #login-status { position: relative; backdrop-filter: unset; } #search-top-box { position: static; backdrop-filter: unset; } #login-status #account-options { left: initial; right: 0; } #top-bar > div > ul { flex-direction: row; margin-right: auto; } #top-bar > div > ul > li { flex-basis: min-content; } #top-bar > div > ul > li > a { justify-content: center; padding: 0; } #top-bar > div > ul > :is(li, li:last-of-type) > ul { top: 100%; left: 0; width: auto; flex-direction: column; } #top-bar > div > ul > li:last-of-type > ul { left: initial; right: 0; } #top-bar > div > ul > li > ul > li { width: 100%; flex-grow: 1; } } @media only screen and (max-width: 768px) { #top-bar > div > ul > :is(li, li:last-of-type) > ul { flex-direction: row; } #top-bar > div > ul > li > ul > li { width: 50%; } }
由
dkk369绘制的
wild ghost377角色图像