:root {
--accent-color: 40, 110, 255;
--header-title: "OUR Backrooms";
--header-subtitle: "我们在一片天空下";
--background-image: url("https://s41.ax1x.com/2026/04/26/pehbehV.jpg");
--background-color: 245, 247, 252;
--text-color: 28, 32, 40;
--light-color-1: 255, 255, 255;
--light-color-2: 248, 250, 255;
--dark-color-1: 40, 110, 255;
--dark-color-2: 30, 80, 200;
--dark-color-3: 20, 60, 160;
--dark-color-4: 10, 40, 120;
--link-color: 40, 110, 255;
--hover-link-color: 40, 110, 255, 0.7;
--visited-link-color: 90, 120, 200;
--selected-background-color: 40, 110, 255, 0.15;
--topbar-background-color: 255, 255, 255, 0.85;
--topbar-hover-background-color: 40, 110, 255, 0.08;
--general-button-background-color: 240, 244, 255;
--general-hover-button-text-color: 40, 110, 255;
--table-background-color: 255, 255, 255;
--table-text-color: 30, 35, 45;
--note-background-color: 220, 235, 255;
--sidebar-title-background-color: 235, 240, 255;
}
#side-bar .heading {
position: relative;
overflow: hidden;
}
#side-bar .heading::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
120deg,
transparent,
rgba(40,110,255,0.2),
transparent
);
opacity: 0;
transition: opacity 0.4s ease;
}
#side-bar .heading:hover::after {
opacity: 1;
}
#side-bar .menu-item a {
position: relative;
display: block;
padding: 0.45rem 0.8rem;
border-radius: 0.8rem;
transition: all 0.3s ease;
}
#side-bar .menu-item a:hover {
background: rgba(40,110,255,0.08);
transform: translateX(6px);
box-shadow: 0 0.3rem 0.8rem rgba(40,110,255,0.15);
}
#side-bar .menu-item a::before {
content: "";
position: absolute;
left: -6px;
top: 20%;
width: 3px;
height: 60%;
border-radius: 2px;
background: rgb(var(--accent-color));
opacity: 0;
transform: scaleY(0);
transition: all 0.3s ease;
}
#side-bar .menu-item a:hover::before {
opacity: 1;
transform: scaleY(1);
}
#top-bar div[class*=top-bar] > ul > li > a {
transition: transform 0.25s cubic-bezier(.2,.8,.2,1),
color 0.2s ease;
}
#top-bar div[class*=top-bar] > ul > li > a:hover {
transform: translateY(-2px) scale(1.06);
color: rgb(var(--accent-color));
}
#top-bar div[class*=top-bar] > ul > li > a:active {
transform: translateY(0) scale(0.98);
}
#top-bar div[class*=top-bar] > ul > li > ul {
opacity: 0;
transform: translateY(6px);
transition: all 0.25s ease;
}
#top-bar div[class*=top-bar] > ul > li:hover > ul {
opacity: 1;
transform: translateY(0);
}
#top-bar div[class*=top-bar] > ul > li > ul {
opacity: 0;
transform: translateY(6px);
transition: all 0.25s ease;
}
#top-bar div[class*=top-bar] > ul > li:hover > ul {
opacity: 1;
transform: translateY(0);
}
#top-bar div[class*=top-bar] > ul > li > ul > li > a {
background: transparent !important;
border: none !important;
box-shadow: none !important;
transition: transform 0.22s cubic-bezier(.2,.8,.2,1),
color 0.2s ease;
}
#top-bar div[class*=top-bar] > ul > li > ul > li > a:hover {
transform: translateX(4px) scale(1.05);
color: rgb(var(--accent-color));
}
#top-bar div[class*=top-bar] > ul > li > ul > li > a:active {
transform: translateX(0) scale(0.97);
}
@keyframes smooth-fade {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#main-content,
#side-bar,
#top-bar {
animation: smooth-fade 0.6s cubic-bezier(.2,.8,.2,1);
}
#page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href*="#u-credit-view"]),
#page-content .avatarhover,
.hovertip a,
.classic-collap a.collapsible-block-link {
padding: 0.15em;
margin: -0.15em;
color: rgb(var(--text-color));
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
box-shadow: inset 0 -0.12rem 0 0 rgba(var(--accent-color), 0.8);
transition:
box-shadow 260ms cubic-bezier(.2,.8,.2,1),
color 220ms ease;
}
#page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href*="#u-credit-view"]):hover,
#page-content .avatarhover:hover,
.hovertip a:hover,
.classic-collap a.collapsible-block-link:hover {
box-shadow: inset 0 -1.4em 0 0 rgba(var(--accent-color), 0.18);
color: rgb(var(--accent-color));
text-decoration: none;
}
a.collapsible-block-link:not(.classic-collap *):not(.styled-collap *) {
padding-right: 0.4em;
color: rgb(var(--text-color));
transition: color 0.25s ease, background-color 0.25s ease;
}
.collapsible-block {
margin: 1em 0;
}
#toc-action-bar > a {
width: 100%;
color: rgb(var(--text-color));
transition: color 0.25s ease, background-color 0.25s ease;
}
#toc-action-bar > a:hover,
a.collapsible-block-link:not(.classic-collap *):not(.styled-collap *):hover {
color: rgb(var(--accent-color));
background-color: rgba(var(--accent-color), 0.12);
text-decoration: none;
}
#toc-action-bar > a:nth-child(1)::before,
#toc-action-bar > a:nth-child(2)::before,
.collapsible-block-folded a.collapsible-block-link:not(.classic-collap *):not(.styled-collap *)::before,
.collapsible-block-unfolded-link a.collapsible-block-link:not(.classic-collap *):not(.styled-collap *)::before {
margin: 0 0.2em 0 0.4em;
content: "▼";
color: rgba(var(--accent-color), 0.85);
background-color: transparent;
display: inline-block;
transition: transform 0.3s cubic-bezier(.2,.8,.2,1),
color 0.25s ease;
}
#toc-action-bar > a:hover::before,
.collapsible-block-link:hover::before {
color: rgb(var(--accent-color));
}
#toc-action-bar > a:nth-child(2)::before,
.collapsible-block-folded a.collapsible-block-link:not(.classic-collap *):not(.styled-collap *)::before {
animation: collapsible-arrow-spin 0.3s cubic-bezier(.25,.8,.25,1) forwards;
}
#toc-action-bar > a:nth-child(1)::before,
.collapsible-block-unfolded-link a.collapsible-block-link:not(.classic-collap *):not(.styled-collap *)::before {
animation: collapsible-arrow-spin-back 0.3s cubic-bezier(.25,.8,.25,1) forwards;
}
a.collapsible-block-link:not(.classic-collap *):not(.styled-collap *) {
padding-right: 0.4em;
color: rgb(var(--text-color));
transition: color 0.25s ease, background-color 0.25s ease;
}
.collapsible-block {
margin: 1em 0;
}
#toc-action-bar > a {
width: 100%;
color: rgb(var(--text-color));
transition: color 0.25s ease, background-color 0.25s ease;
}
#toc-action-bar > a:hover,
a.collapsible-block-link:not(.classic-collap *):not(.styled-collap *):hover {
color: rgb(var(--accent-color));
background-color: rgba(var(--accent-color), 0.12);
text-decoration: none;
}
#toc-action-bar > a:nth-child(1)::before,
#toc-action-bar > a:nth-child(2)::before,
.collapsible-block-folded a.collapsible-block-link:not(.classic-collap *):not(.styled-collap *)::before,
.collapsible-block-unfolded-link a.collapsible-block-link:not(.classic-collap *):not(.styled-collap *)::before {
margin: 0 0.2em 0 0.4em;
content: "▼";
color: rgba(var(--accent-color), 0.85);
background-color: transparent;
display: inline-block;
transition: transform 0.3s cubic-bezier(.2,.8,.2,1),
color 0.25s ease;
}
#toc-action-bar > a:hover::before,
.collapsible-block-link:hover::before {
color: rgb(var(--accent-color));
}
#toc-action-bar > a:nth-child(2)::before,
.collapsible-block-folded a.collapsible-block-link:not(.classic-collap *):not(.styled-collap *)::before {
animation: collapsible-arrow-spin 0.3s cubic-bezier(.25,.8,.25,1) forwards;
}
#toc-action-bar > a:nth-child(1)::before,
.collapsible-block-unfolded-link a.collapsible-block-link:not(.classic-collap *):not(.styled-collap *)::before {
animation: collapsible-arrow-spin-back 0.3s cubic-bezier(.25,.8,.25,1) forwards;
}
@keyframes collapsible-arrow-spin {
from { transform: rotate(0deg); }
to { transform: rotate(-90deg); }
}
@keyframes collapsible-arrow-spin-back {
from { transform: rotate(-90deg); }
to { transform: rotate(0deg); }
}
#header h1 a span {
background: radial-gradient(
ellipse at center,
#A0B8FF 0%,
#80D0FF 35%,
#8A80FF 70%,
#C0A0FF 100%
);
background-size: 200% 200%;
background-position: center;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
-webkit-text-stroke: 2px rgba(40, 40, 60, 0.2);
text-shadow:
0 0 2px rgba(120,160,255,0.9),
0 0 6px rgba(120,160,255,0.7),
0 0 12px rgba(120,160,255,0.5),
0 0 20px rgba(120,160,255,0.35);
transition: all 0.35s ease;
animation: radial-breath 4.5s ease-in-out infinite;
}
#header h1 a span:hover {
text-shadow:
0 0 8px rgba(130,170,255,0.9),
0 0 20px rgba(130,170,255,0.7),
0 0 36px rgba(130,170,255,0.5);
transform: scale(1.03);
}
@keyframes radial-breath {
0%, 100% {
background-size: 180% 180%;
text-shadow:
0 0 2px rgba(120,160,255,0.9),
0 0 6px rgba(120,160,255,0.7),
0 0 12px rgba(120,160,255,0.5),
0 0 20px rgba(120,160,255,0.35);
}
50% {
background-size: 220% 220%;
text-shadow:
0 0 4px rgba(120,160,255,0.9),
0 0 10px rgba(120,160,255,0.7),
0 0 18px rgba(120,160,255,0.5),
0 0 28px rgba(120,160,255,0.35);
}
}
/* 修正 */
#side-bar .heading, #side-bar .collapsible-block-unfolded-link a, #side-bar .collapsible-block-folded a {
background: rgb(20 60 160);
}
