MediaWiki:Common.css：修订间差异

2025年4月12日 (六) 21:25的版本

/* CRT复古显示器风格CSS - 浅色主题 - 结合荧光效果和扫描线 */

@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");
@import url("https://fastly.jsdelivr.net/gh/hoah2333/Fonts@main/Typeface-VonwaonBitmap-16px.css");

:root {
    /* === TYPEFACES === */
    --pixel-font: 'VonwaonBitmap 16px', 'VT323', monospace;
    --body-font: var(--pixel-font);
    --UI-font: var(--pixel-font);
    --title-font: var(--pixel-font);

    /* === BASE FONT SIZE & LINE HEIGHT === */
    --min-font-size: 0.9rem;
    --max-font-size: 1rem;
    --base-font-size: var(--max-font-size);
    --base-line-height: 1.5;

    /* === CRT DISPLAY COLORS === */
    --crt-bg-color: 245, 245, 240; /* 浅米色背景 */
    --crt-text-color: 60, 60, 60; /* 深灰色文字 */
    --crt-terminal-green: 0, 150, 80; /* 终端绿 */
    --crt-terminal-blue: 40, 100, 180; /* 终端蓝 */
    --crt-terminal-amber: 200, 120, 0; /* 终端琥珀色 */
    --crt-terminal-pink: 180, 60, 120; /* 终端粉色 */
    --crt-glow-color: var(--crt-terminal-green); /* 荧光颜色 */
    
    /* === SCANLINE EFFECTS === */
    --scanline-height: 2px;
    --scanline-color: rgba(0, 0, 0, 0.07);
    --interlace-opacity: 0.4;
    --flicker-intensity: 0.03;
    --noise-opacity: 0.02;
    --rgb-shift-amount: 0.5px;
    --vignette-opacity: 0.3;
    --screen-curvature: 3%; /* 屏幕弯曲程度 */

    /* === STANDARD THEME COLORS === */
    /* 浅色主题颜色变量 */
    --white-monochrome: 245, 245, 240; /* 浅米色 */
    --black-monochrome: 60, 60, 60; /* 深灰色 */
    --bright-accent: 0, 150, 80; /* 终端绿 */
    --medium-accent: 0, 120, 60;
    --dark-accent: 0, 90, 40;

    /* === PRIMARY COLORS === */
    --swatch-primary: var(--bright-accent);
    --swatch-primary-darker: var(--medium-accent);
    --swatch-primary-darkest: var(--dark-accent);
    --swatch-border-color: var(--bright-accent);

    /* === MENU COLORS === */
    --swatch-menutxt-dark-color: var(--black-monochrome);
    --swatch-menutxt-light-color: var(--white-monochrome);
    --swatch-menutxt-general-color: var(--white-monochrome);

    /* === SECONDARY & TERTIARY COLORS === */
    --swatch-text-secondary-color: var(--swatch-menutxt-light-color);

    /* === LINK COLORS === */
    --link-color: rgb(0, 100, 160);
    --link-color-active: rgb(180, 100, 0);
    --visited-link-color: rgb(100, 80, 160);
    --hover-link-color: rgb(0, 150, 100);
}

/* === GLOBAL STYLES === */
html {
    font-size: 1em;
    line-height: var(--base-line-height);
}

html, body {
    margin: 0;
    padding: 0;
    font-variant-ligatures: none;
    background-color: rgb(var(--crt-bg-color));
    color: rgb(var(--crt-text-color));
    font-family: var(--body-font);
    overflow-x: hidden; /* 防止水平溢出 */
    perspective: 1000px; /* 3D透视效果 */
    letter-spacing: 0.5px; /* 增加字母间距提高可读性 */
}

/* 添加CRT屏幕效果 - 浅色主题调整 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    pointer-events: none;
    /* 屏幕弯曲效果 */
    border-radius: 20% / 5%;
    box-shadow: 
        0 0 0 var(--screen-curvature) rgb(var(--crt-bg-color)),
        inset 0 0 40px rgba(0, 0, 0, 0.3); /* 降低阴影强度 */
    /* 暗角效果 */
    background: radial-gradient(
        ellipse at center,
        transparent 70%,
        rgba(0, 0, 0, calc(var(--vignette-opacity) * 0.6)) 100%
    );
}

/* 扫描线效果 - 浅色主题下降低不透明度 */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        0deg,
        var(--scanline-color) calc(var(--scanline-height) - 1px),
        var(--scanline-color) var(--scanline-height),
        transparent calc(var(--scanline-height) + 1px)
    );
    background-size: 100% calc(var(--scanline-height) * 2);
    opacity: calc(var(--interlace-opacity) * 0.7); /* 降低不透明度 */
    animation: scanline-flicker 0.1s infinite alternate-reverse;
}

/* 噪点效果 - 浅色主题下降低不透明度 */
.noise {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9997;
    opacity: calc(var(--noise-opacity) * 0.6); /* 降低不透明度 */
    background-image: url('data:image/png;base64,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');
}

/* 宽扫描线效果 - 浅色主题调整 */
.wide-scanline {
    position: fixed;
    width: 100%;
    height: 4rem;
    top: -4rem;
    left: 0;
    background: linear-gradient(to bottom, 
        rgba(100, 100, 100, 0) 0%,
        rgba(100, 100, 100, 0.02) 10%,
        rgba(100, 100, 100, 0.03) 20%,
        rgba(100, 100, 100, 0.06) 50%,
        rgba(100, 100, 100, 0.03) 80%,
        rgba(100, 100, 100, 0.02) 90%,
        rgba(100, 100, 100, 0) 100%);
    pointer-events: none;
    z-index: 9997;
    animation: scanline-move 8s cubic-bezier(0.1, 0.7, 0.7, 0.95) infinite;
    opacity: 0.2; /* 降低不透明度 */
}

/* 垂直同步扫描效果 - 浅色主题调整 */
.vsync-line {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(100, 100, 100, 0.3);
    box-shadow: 0 0 5px 1px rgba(100, 100, 100, 0.2);
    z-index: 10000;
    pointer-events: none;
    opacity: 0

/* 动画效果 */
@keyframes scanline-move {
    0% { top: -4rem; opacity: 0.2; }
    5% { opacity: 0.3; }
    30% { opacity: 0.2; }
    50% { opacity: 0.3; }
    75% { opacity: 0.2; }
    95% { opacity: 0.3; }
    100% { top: 100vh; opacity: 0.2; }
}

@keyframes scanline-flicker {
    0% { opacity: var(--interlace-opacity); }
    100% { opacity: calc(var(--interlace-opacity) - 0.1); }
}

@keyframes vsync-scan {
    0% { opacity: 0; transform: translateY(-1px); }
    1% { opacity: 0.5; transform: translateY(0); }
    1.5% { opacity: 0.3; transform: translateY(100vh); }
    2% { opacity: 0; transform: translateY(100vh); }
    100% { opacity: 0; transform: translateY(100vh); }
}

@keyframes text-flicker {
    0% { text-shadow: 0 0 3px rgba(var(--crt-glow-color), 0.4); }
    50% { text-shadow: 0 0 1px rgba(var(--crt-glow-color), 0.2); }
    100% { text-shadow: 0 0 3px rgba(var(--crt-glow-color), 0.4); }
}

/* 文本和链接样式 */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--title-font);
    color: rgb(var(--crt-terminal-green));
    text-shadow: 0 0 3px rgba(var(--crt-glow-color), 0.4);
    letter-spacing: 0.05em;
    animation: text-flicker 3s infinite alternate;
    position: relative;
}

h1 {
    font-size: 1.8rem;
    text-transform: uppercase;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.3rem;
}

a {
    color: rgb(var(--crt-terminal-blue));
    text-decoration: none;
    transition: all 0.2s ease;
    text-shadow: 0 0 2px rgba(var(--crt-terminal-blue), 0.3);
}

a:hover {
    color: rgb(var(--crt-terminal-amber));
    text-shadow: 0 0 3px rgba(var(--crt-terminal-amber), 0.4);
}

a:hover::before {
    content: "> ";
}

a:visited {
    color: rgb(var(--crt-terminal-pink));
    text-shadow: 0 0 2px rgba(var(--crt-terminal-pink), 0.3);
}

/* 按钮样式 - 浅色主题 */
button, input[type="submit"], input[type="button"] {
    background-color: rgba(var(--crt-bg-color), 0.8);
    color: rgb(var(--crt-terminal-green));
    border: 1px solid rgba(var(--crt-terminal-green), 0.5);
    font-family: var(--pixel-font);
    padding: 5px 10px;
    box-shadow: 0 0 3px rgba(var(--crt-glow-color), 0.3);
    transition: all 0.2s ease;
}

button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    background-color: rgba(var(--crt-terminal-green), 0.1);
    box-shadow: 
        0 0 3px rgba(var(--crt-glow-color), 0.4),
        0 0 6px rgba(var(--crt-glow-color), 0.3);
    cursor: pointer;
}

/* 侧边栏样式 - 浅色主题 */
.side-block {
    --sideblock-bg-color: var(--crt-bg-color);
    --sideblock-heading-border-color: var(--crt-terminal-green);
    --sideblock-heading-bg-color: var(--crt-bg-color);
    --sideblock-heading-text-color: var(--crt-terminal-green);
    --sidebar-border-color: var(--crt-terminal-green);
    --sidebar-links-text: var(--crt-text-color);
    --sidebar-links-bg-color: var(--crt-bg-color);
    --sidebar-links-hover-bg-color: var(--crt-terminal-green);
    --sidebar-links-hover-text-color: var(--black-monochrome);

    display: grid;
    grid-template-rows: repeat(auto-fit, minmax(1.3125rem, 1fr));
    margin: 0.5rem 0.5rem 0 0;
    border: 1px solid rgba(var(--crt-terminal-green), 0.3);
    background: rgba(var(--sideblock-bg-color), 0.9);
    font-family: var(--UI-font);
    box-shadow: 0 0 6px rgba(var(--crt-glow-color), 0.2);
}

.side-block .heading {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    min-height: 1.5rem;
    margin: 0;
    background-color: rgba(var(--sideblock-heading-bg-color), 0.7);
    box-shadow: 0 0.0625rem 0 0 rgba(var(--sideblock-heading-border-color), 0.7);
}

.side-block .heading p {
    margin: 0;
    color: rgb(var(--sideblock-heading-text-color));
    font-family: var(--title-font);
    font-size: calc((var(--base-font-size) * (14 / 15)) * 0.9);
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1.15;
    text-indent: 0.25rem;
    text-transform: uppercase;
    text-shadow: 0 0 3px rgba(var(--crt-glow-color), 0.4);
}

.side-block div.menu-item {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    height: 1.5rem;
    min-height: 1.5rem;
    margin: 0;
    padding: 0;
    box-shadow: inset 0 -1px 0 0 rgba(var(--sidebar-border-color), 0.3);
}

.side-block div.menu-item a {
    display: flex;
    flex-grow: 2;
    justify-content: flex-start;
    height: 1.5em;
    margin: 0;
    padding: 0 0.6em;
    transition: all 0.2s ease;
    background-color: rgba(var(--sidebar-links-bg-color), 0.9);
    color: rgb(var(--sidebar-links-text));
    font-size: calc(var(--base-font-size) * (14 / 15));
    letter-spacing: 0.04em;
    line-height: 1.5;
    text-decoration: none;
    text-shadow: 0 0 2px rgba(var(--crt-text-color), 0.3);
}

.side-block div.menu-item a:hover,
.side-block div.menu-item a:active,
.side-block div.menu-item a:focus-within {
    background-color: rgba(var(--sidebar-links-hover-bg-color), 0.2);
    color: rgb(var(--sidebar-links-hover-text-color));
    text-shadow: 0 0 3px rgba(var(--crt-glow-color), 0.4);
}

/* 表格样式 - 浅色主题 */
table {
    border-collapse: collapse;
    margin: 1em 0;
    background-color: rgba(var(--crt-bg-color), 0.9);
    border: 1px solid rgba(var(--crt-terminal-green), 0.4);
    box-shadow: 
        0 0 3px rgba(var(--crt-glow-color), 0.2),
        0 0 6px rgba(var(--crt-glow-color), 0.1);
    border-radius: 3px;
}

table th {
    background-color: rgba(var(--crt-terminal-green), 0.1);
    color: rgb(var(--crt-terminal-green));
    text-shadow: 0 0 2px rgba(var(--crt-terminal-green), 0.3);
    padding: 8px;
    font-family: var(--pixel-font);
    font-weight: normal;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

table td {
    padding: 8px;
    border: 1px solid rgba(var(--crt-terminal-green), 0.2);
    color: rgb(var(--crt-text-color));
}

table tr:nth-child(even) {
    background-color: rgba(var(--crt-terminal-green), 0.05);
}

/* 代码块样式 - 浅色主题 */
pre, code, .mw-code, .pn, .mw-highlight {
    font-family: var(--pixel-font);
    background-color: rgba(var(--crt-bg-color), 0.7);
    border: 1px solid rgba(var(--crt-terminal-green), 0.3);
    padding: 0.5em;
    color: rgb(var(--crt-terminal-amber));
    text-shadow: 0 0 2px rgba(var(--crt-terminal-amber), 0.3);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

/* 引用块样式 - 浅色主题 */
blockquote {
    border-left: 3px solid rgba(var(--crt-terminal-blue), 0.5);
    margin: 1em 0;
    padding: 0.5em 1em;
    background-color: rgba(var(--crt-bg-color), 0.7);
    color: rgba(var(--crt-text-color), 0.9);
    box-shadow: 
        0 0 3px rgba(var(--crt-terminal-blue), 0.2),
        0 0 6px rgba(var(--crt-terminal-blue), 0.1);
}

/* 特殊样式引用块 - 浅色主题 */
.lightstyled-quote {
    background-color: rgba(var(--crt-terminal-green), 0.08);
    color: rgb(var(--crt-text-color));
    border-left: 0.5rem solid rgba(var(--crt-terminal-blue), 0.5);
    padding: 0.1rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 
        0 0 3px rgba(var(--crt-terminal-blue), 0.2),
        0 0 6px rgba(var(--crt-terminal-blue), 0.1);
}

.darkstyled-quote {
    background-color: rgba(220, 220, 220, 0.5);
    border-left: 0.5rem solid rgba(var(--crt-terminal-green), 0.5);
    color: rgb(var(--crt-text-color));
    padding: 0.1rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 
        0 0 3px rgba(var(--crt-terminal-green), 0.2),
        0 0 6px rgba(var(--crt-terminal-green), 0.1);
}

.darkstyled-quote a {
    color: rgb(var(--crt-terminal-blue));
    text-shadow: 0 0 3px rgba(var(--crt-terminal-blue), 0.5);
}

/* 信息框样式 - 浅色主题 */
.notaninfobox {
    position: relative;
    clear: right;
    margin: 0 0 1em 1em;
    width: 350px;
    font-size: 90%;
    background-color: rgba(var(--crt-bg-color), 0.9);
    float: right;
    border: 1px solid rgba(var(--crt-terminal-green), 0.4);
    padding: 2px;
    overflow: auto;
    z-index: 1;
    overflow-wrap: anywhere;
    box-shadow: 
        0 0 3px rgba(var(--crt-glow-color), 0.2),
        0 0 6px rgba(var(--crt-glow-color), 0.1);
}

@media all and (max-width: 511px) {
    .notaninfobox {
        float: none;
        margin-left: 0;
        width: auto;
    }
}

@media all and (max-width: 337px) {
    .notaninfobox {
        margin-left: -16px;
        margin-right: -16px;
        border-left: none;
        border-right: none;
    }
}

.notaninfobox > .infobox-title {
    font-weight: bold;
    text-align: center;
    font-size: 120%;
    background-color: rgba(var(--crt-terminal-green), 0.15);
    color: rgb(var(--crt-terminal-green));
    text-shadow: 0 0 2px rgba(var(--crt-terminal-green), 0.3);
    padding: 4px;
}

.infobox-imagearea {
    text-align: center;
    padding: 4px;
}

.infobox-imagearea > div:not(:first-child) {
    padding-top: 1em;
}

/* Horizontally centre animated images */
.infobox-imagearea .animated {
    display: inline-flex;
    align-items: center;
}

.notaninfobox .infobox-rows {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 1px;
}

.notaninfobox .infobox-rows .infobox-row {
    display: contents;
}

.notaninfobox .infobox-row .infobox-row-label,
.notaninfobox .infobox-row .infobox-row-field {
    padding: 4px;
}

.notaninfobox .infobox-row .infobox-row-label {
    font-weight: bold;
    display: flex;
    align-items: center;
    color: rgb(var(--crt-terminal-green));
    text-shadow: 0 0 2px rgba(var(--crt-terminal-green), 0.3);
}

.notaninfobox .infobox-rows .infobox-row:nth-child(2n) .infobox-row-label,
.notaninfobox .infobox-rows .infobox-row:nth-child(2n) .infobox-row-field {
    background-color: rgba(var(--crt-terminal-green), 0.03);
}

.infobox-footer {
    text-align: center;
}

/* 特殊样式块 - 浅色主题 */
.lightblock {
    background-color: rgba(var(--crt-terminal-green), 0.08);
    color: rgb(var(--crt-text-color));
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(var(--crt-terminal-green), 0.2);
    text-shadow: 0 0 2px rgba(var(--crt-text-color), 0.3);
}

.darkblock {
    background-color: rgba(220, 220, 220, 0.5);
    color: rgb(var(--crt-text-color));
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(var(--crt-terminal-green), 0.2);
    text-shadow: 0 0 2px rgba(var(--crt-text-color), 0.3);
}

.dark-borderblock {
    background-color: rgba(var(--crt-bg-color), 0.8);
    color: rgb(var(--crt-text-color));
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.25);
    border: solid 0.3rem rgba(var(--crt-terminal-green), 0.7);
    text-shadow: 0 0 3px rgba(var(--crt-text-color), 0.5);
}

.light-borderblock {
    background-color: rgba(var(--crt-terminal-green), 0.15);
    color: rgb(var(--crt-text-color));
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.25);
    border: solid 0.3rem rgba(var(--crt-bg-color), 0.8);
    text-shadow: 0 0 3px rgba(var(--crt-text-color), 0.5);
}

.border-logoblock {
    padding: 0.01rem 1rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.25);
    color: rgb(var(--crt-text-color));
    margin: 0.5rem 0 0.5rem 0.25rem;
    display: block;
    position: relative;
    background-color: rgba(var(--crt-bg-color), 0.8);
    border: solid 0.3rem rgba(var(--crt-terminal-green), 0.7);
    text-shadow: 0 0 3px rgba(var(--crt-text-color), 0.5);
}

.border-logoblock::after {
    content: "";
    float: center;
    border: solid 2px transparent;
    opacity: 0.25;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.logoblock {
    padding: 0.01rem 1rem;
    color: rgb(var(--crt-text-color));
    box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.25);
    margin: 0.5rem 0 0.5rem 0.25rem;
    display: block;
    position: relative;
    background-color: rgba(var(--crt-bg-color), 0.8);
    text-shadow: 0 0 3px rgba(var(--crt-text-color), 0.5);
}

.logoblock::after {
    content: "";
    float: center;
    border: solid 2px transparent;
    opacity: 0.25;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.titleblock {
    background-color: rgba(var(--crt-bg-color), 0.8);
    color: rgb(var(--crt-text-color));
    padding: 0.5rem 1rem 0.10rem;
    margin: 1.5rem 0rem 0.5rem 0rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.5);
    border: solid rgba(var(--crt-terminal-green), 0.7) 2px;
    text-shadow: 0 0 3px rgba(var(--crt-text-color), 0.5);
}

.titlebox {
    color: rgba(var(--crt-bg-color), 0.8);
    position: relative;
    top: -1.6rem;
    background-color: rgba(var(--crt-terminal-green), 0.7);
    padding: 0.25rem 1rem;
    line-height: 0.1rem;
    text-shadow: 0 0 3px rgba(var(--crt-bg-color), 0.5);
}

.borderblock {
    background-color: rgba(var(--crt-bg-color), 0.8);
    color: rgb(var(--crt-text-color));
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.25);
    border: solid 0.3rem rgba(var(--crt-terminal-green), 0.7);
    text-shadow: 0 0 3px rgba(var(--crt-text-color), 0.5);
}

/* 导航框样式 */
table.navbox {
    border: 1px solid rgba(var(--crt-terminal-green), 0.7);
    clear: both;
    margin: auto;
    padding: 1px;
    text-align: center;
    width: 100%;
    background-color: rgba(var(--crt-bg-color), 0.7);
    box-shadow: 
        0 0 5px rgba(var(--crt-glow-color), 0.3),
        0 0 10px rgba(var(--crt-glow-color), 0.1);
}

table.navbox + table.navbox {
    margin-top: -1px;
}

.navbox-title,
.navbox-abovebelow,
table.navbox th {
    padding-left: 1em;
    padding-right: 1em;
    text-align: center;
}

.navbox-group {
    font-weight: 700;
    white-space: nowrap;
}

.navbox,
.navbox-subgroup {
    background: none repeat scroll 0 0 rgba(var(--crt-bg-color), 0.7);
}

.navbox-list {
    border-color: rgba(var(--crt-bg-color), 0.7);
}

.navbox-title,
table.navbox th {
    background: none repeat scroll 0 0 rgba(var(--crt-terminal-green), 0.3);
    color: rgb(var(--crt-terminal-green));
    text-shadow: 0 0 5px rgba(var(--crt-terminal-green), 0.5);
}

.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
    background: none repeat scroll 0 0 rgba(var(--crt-terminal-green), 0.2);
    color: rgb(var(--crt-terminal-green));
    text-shadow: 0 0 3px rgba(var(--crt-terminal-green), 0.5);
}

.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
    background: none repeat scroll 0 0 rgba(var(--crt-terminal-green), 0.1);
}

.navbox-even {
    background: none repeat scroll 0 0 rgba(var(--crt-bg-color), 0.8);
}

.navbox-odd {
    background: none repeat scroll 0 0 rgba(var(--crt-bg-color), 0.7);
}

/* 黑幕效果 */
.heimu,
.heimu rt {
    --heimu-color: rgba(var(--crt-bg-color), 0.9);
    --heimu-text-color: rgb(var(--crt-text-color));
    --heimu-link-color: rgb(var(--crt-terminal-blue));
    --heimu-visited-link-color: rgb(var(--crt-terminal-pink));
    --heimu-new-link-color: rgb(var(--crt-terminal-amber));
    --heimu-new-visited-link-color: rgb(255, 150, 100);
    --heimu-extiw-visited-link-color: rgb(180, 160, 255);

    background-color: var(--heimu-color);
}

.heimu,
.heimu a,
a .heimu,
a.new .heimu,
span.heimu a:visited,
span.heimu a.new,
span.heimu a.external,
span.heimu a.external:visited,
span.heimu a.extiw,
span.heimu a.extiw:visited,
span.heimu a.mw-disambig,
span.heimu a.mw-redirect {
    transition: color 0.13s linear;
    color: var(--heimu-color);
    text-shadow: none;
}

span.heimu:hover,
span.heimu:active {
    color: var(--heimu-text-color);
}

span.heimu:hover a,
a:hover span.heimu {
    color: var(--heimu-link-color);
    text-shadow: 0 0 3px rgba(var(--crt-terminal-blue), 0.5);
}

span.heimu:hover a:visited,
a:visited:hover span.heimu {
    color: var(--heimu-visited-link-color);
    text-shadow: 0 0 3px rgba(var(--crt-terminal-pink), 0.5);
}

span.heimu:hover a.new,
a.new:hover span.heimu {
    color: var(--heimu-new-link-color);
    text-shadow: 0 0 3px rgba(var(--crt-terminal-amber), 0.5);
}

/* 额外的CRT效果 */
#extrac-div-1 {
    position: fixed;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0));
    background-size: auto 8px;
    opacity: 0.7;
    z-index: 9996;
}

#extrac-div-2 {
    position: fixed;
    width: 100vw;
    height: 1rem;
    top: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, 
        rgba(var(--crt-terminal-green)) 0%,
        rgba(var(--crt-terminal-green), 1) 50%,
        rgba(var(--crt-terminal-green), 0.98) 51%,
        rgba(var(--crt-terminal-green)) 100%);
    opacity: 0.1;
    animation: scanm 6s linear infinite;
    z-index: 9995;
}

@keyframes scanm {
    0% { top: -1rem; opacity: 0.05; }
    25% { top: 50%; opacity: 0.03; }
    37.5% { top: 75%; opacity: 0.06; }
    50% { top: 100%; opacity: 0.03; }
    100% { top: 100%; }
}

#extrac-div-3 {
    position: fixed;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    background-image: radial-gradient(circle, 
        rgba(var(--crt-terminal-green), 0.2) 4%, 
        rgba(var(--crt-bg-color), 0.2) 45%, 
        rgba(var(--crt-terminal-green), 0.2) 95%);
    opacity: 0.25;
    mix-blend-mode: color-dodge;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 30;
}

/* 页面内容淡入效果 */
@media screen and (prefers-reduced-motion: no-preference) {
    #page-title, #breadcrumbs, #page-content > * {
        animation-name: fadeIn;
        animation-duration: 1s;
        animation-iteration-count: 1;
        animation-timing-function: ease-out;
        animation-fill-mode: backwards;
    }
}

#page-title { animation-delay: 0s; }

#page-content > :nth-child(1) { animation-delay: calc(1 * var(--fade-in-delay)); }
#page-content > :nth-child(2) { animation-delay: calc(2 * var(--fade-in-delay)); }
#page-content > :nth-child(3) { animation-delay: calc(3 * var(--fade-in-delay)); }
#page-content > :nth-child(4) { animation-delay: calc(4 * var(--fade-in-delay)); }
#page-content > :nth-child(5) { animation-delay: calc(5 * var(--fade-in-delay)); }
#page-content > :nth-child(6) { animation-delay: calc(6 * var(--fade-in-delay)); }
#page-content > :nth-child(7) { animation-delay: calc(7 * var(--fade-in-delay)); }
#page-content > :nth-child(8) { animation-delay: calc(8 * var(--fade-in-delay)); }
#page-content > :nth-child(9) { animation-delay: calc(9 * var(--fade-in-delay)); }
#page-content > :nth-child(10) { animation-delay: calc(10 * var(--fade-in-delay)); }
#page-content > :nth-child(11) { animation-delay: calc(11 * var(--fade-in-delay)); }
#page-content > :nth-child(12) { animation-delay: calc(12 * var(--fade-in-delay)); }
#page-content > :nth-child(13) { animation-delay: calc(13 * var(--fade-in-delay)); }
#page-content > :nth-child(14) { animation-delay: calc(14 * var(--fade-in-delay)); }
#page-content > :nth-child(15) { animation-delay: calc(15 * var(--fade-in-delay)); }
#page-content > :nth-child(n+15) { animation-delay: calc(16 * var(--fade-in-delay)); }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate(0, 30px);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

/* 网格背景 */
#skrollr-body {
    background-image: radial-gradient(circle, rgba(var(--crt-terminal-green), 0.05) 1px, transparent 1px);
    background-repeat: repeat;
    background-size: 20px 20px;
    width: 100%;
    height: 7.5rem;
}

#container {
    background-image: radial-gradient(circle, rgba(var(--crt-terminal-green), 0.03) 1px, transparent 1px);
    background-size: 15px 15px;
    background-repeat: repeat;
    background-attachment: fixed;
}

/* 确保图片不会溢出 */
img {
    max-width: 100%;
    height: auto;
}

/* 添加JavaScript代码以创建扫描线元素 */
/* 需要在页面加载时执行以下JavaScript代码:

document.addEventListener('DOMContentLoaded', function() {
    // 创建噪点效果元素
    const noise = document.createElement('div');
    noise.className = 'noise';
    document.body.appendChild(noise);
    
    // 创建宽扫描线元素
    const wideScanline = document.createElement('div');
    wideScanline.className = 'wide-scanline';
    document.body.appendChild(wideScanline);
    
    // 添加垂直同步扫描效果
    const vsyncLine = document.createElement('div');
    vsyncLine.className = 'vsync-line';
    document.body.appendChild(vsyncLine);
    
    // 添加第二条扫描线，错开时间，增加真实感
    const wideScanline2 = document.createElement('div');
    wideScanline2.className = 'wide-scanline';
    wideScanline2.style.animationDelay = '4s'; // 错开动画时间
    wideScanline2.style.opacity = '0.2'; // 降低不透明度
    document.body.appendChild(wideScanline2);
    
    // 添加额外的CRT效果元素
    const extracDiv1 = document.createElement('div');
    extracDiv1.id = 'extrac-div-1';
    document.body.appendChild(extracDiv1);
    
    const extracDiv2 = document.createElement('div');
    extracDiv2.id = 'extrac-div-2';
    document.body.appendChild(extracDiv2);
    
    const extracDiv3 = document.createElement('div');
    extracDiv3.id = 'extrac-div-3';
    document.body.appendChild(extracDiv3);
    
    console.log('CRT效果已加载');
});
*/