MediaWiki:Common.css
来自Age Of History 2 Chinese Wiki
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
/* 这里放置的CSS将应用于所有皮肤 */
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
@import url("https://fastly.jsdelivr.net/gh/hoah2333/Fonts@main/Typeface-VonwaonBitmap-16px.css");
@import url("https://fastly.jsdelivr.net/gh/hoah2333/Fonts@main/Typeface-VonwaonBitmap-12px.css");
:root {
/* 保留原始配色变量 */
--link-color: #0645ad;
--link-color-active: #faa700;
--custom-background-blue: #ccf;
--custom-background-cyan: #cef;
--custom-background-green: #cfc;
--custom-background-gray: #d2d2d2;
--custom-background-grey: var(--custom-background-gray);
--custom-background-magenta: #fdf;
--custom-background-orange: #fdb;
--custom-background-purple: #ecf;
--custom-background-red: #fcc;
--custom-background-yellow: #ffc;
--custom-border-blue: #36e;
--custom-border-cyan: #9df;
--custom-border-green: #5d5;
--custom-border-gray: #bbb;
--custom-border-grey: var(--custom-border-gray);
--custom-border-magenta: #f9f;
--custom-border-orange: #f90;
--custom-border-purple: #96c;
--custom-border-red: #e44;
--custom-border-yellow: #fc3;
--custom-closed-topic-neutral: #eef;
--custom-closed-topic-no: #fee;
--custom-closed-topic-yes: #efe;
--custom-code-background: #f8f9fa;
--custom-load-page-button-color: #fff8;
--custom-main-page-background: #fcfcfc;
--custom-main-page-border: var(--custom-border-gray);
--custom-main-page-edition-subheader: #333;
--custom-mcwiki-header-color: #bcd4f5;
--custom-navbox-background: #fff;
--custom-navbox-top: #ccc;
--custom-navbox-middle: #ddd;
--custom-navbox-thru: #eee;
--custom-nbt-inherit-color: #e6e6fa;
--custom-table-background: #f8f9fa;
--custom-table-alternate-background: #f0f1f2;
--custom-table-choice-always: #003600;
--custom-table-choice-always-background: #80d080;
--custom-table-choice-default: #fff;
--custom-table-choice-in-off-background: #060;
--custom-table-choice-in-on-background: #0c0;
--custom-table-choice-na: #000;
--custom-table-choice-na-background: #fff;
--custom-table-choice-neutral: #634800;
--custom-table-choice-neutral-background: #ffeb9c;
--custom-table-choice-never: #3c0404;
--custom-table-choice-never-background: #ff8080;
--custom-table-choice-no: #840606;
--custom-table-choice-no-background: #ffc7ce;
--custom-table-choice-out-off-background: #900;
--custom-table-choice-out-on-background: #f00;
--custom-table-choice-partial: #665400;
--custom-table-choice-partial-background: #ffd;
--custom-table-choice-planned: #0131b7;
--custom-table-choice-planned-background: #dfdfff;
--custom-table-choice-rarely: #533400;
--custom-table-choice-rarely-background: #fdce5e;
--custom-table-choice-unknown: #222;
--custom-table-choice-unknown-background: #ccc;
--custom-table-choice-yes: #005600;
--custom-table-choice-yes-background: #c6efce;
--custom-table-header-background: #eaecf0;
--custom-topic-30-days: #bbb;
--custom-topic-7-days: #ddd;
/* 增强CRT效果相关变量 */
--crt-primary-scanline-alpha: 0.14; /* 主扫描线透明度 */
--crt-secondary-scanline-alpha: 0.08; /* 副扫描线透明度 */
--crt-fast-scanline-alpha: 0.3; /* 快速扫描线透明度 */
--crt-flicker-alpha: 0.04; /* 屏幕闪烁强度 */
--crt-noise-alpha: 0.04; /* 噪点强度 */
--crt-glow-radius: 0.08em;
--crt-glow-color: rgba(0, 255, 100, 0.2); /* 辉光颜色和强度 */
--crt-text-shadow: 0 0 var(--crt-glow-radius) var(--crt-glow-color);
--crt-vignette-opacity: 0.15; /* 暗角效果强度 */
--crt-rgb-shift-amount: 1px; /* RGB颜色偏移量 */
--crt-curvature: 8; /* CRT曲率（数值越大曲率越大）*/
/* 网格背景相关变量 */
--grid-color: rgba(0, 0, 0, 0.08);
--grid-size: 40px;
--grid-line-width: 1px;
/* 字体设置 - 保持不变 */
--pixel-font-16: 'VonwaonBitmap 16px', monospace;
--pixel-font-12: 'VonwaonBitmap 12px', monospace;
--title-font: var(--pixel-font-16);
--body-font: var(--pixel-font-16);
--small-font: var(--pixel-font-12);
--UI-font: var(--pixel-font-12);
/* 字体大小设置 */
--base-font-size: 15px;
--small-font-size: 13px;
--title-scale: 1.3;
--code-scale: 0.9;
/* 边框和内间距设置 */
--side-border-thickness: 0.1rem;
--main-border-thickness: 0.05rem;
/* 启用/禁用CRT效果 - 默认启用 */
--crt-effects-display: block;
/* 质感相关变量 */
--glass-opacity: 0.92;
--glass-blur: 0px; /* 模糊效果 - 如果浏览器支持 */
--inset-shadow-depth: 25px;
--border-shine: rgba(255, 255, 255, 0.1);
--box-depth: 1px 1px 3px rgba(0, 0, 0, 0.15);
/* 侧边栏相关变量 - 新增 */
--sidebar-max-height: 85vh; /* 侧边栏最大高度 */
--sidebar-width: 14rem; /* 侧边栏宽度 */
--sidebar-top-offset: 3rem; /* 侧边栏顶部偏移 */
/* 控制台相关变量 - 新增 */
--console-indicator-color: rgba(0, 255, 100, 0.8);
--console-text-color: rgba(0, 255, 0, 0.9);
--terminal-bg: rgba(16, 24, 32, 0.8);
}
/* CRT效果动画 - 增强版 */
@keyframes flicker {
0%, 100% { opacity: 0.98; }
25% { opacity: 0.94; }
50% { opacity: 0.99; }
75% { opacity: 0.95; }
83% { opacity: 0.98; }
90% { opacity: 0.91; }
93% { opacity: 0.99; }
97% { opacity: 0.93; }
}
/* 极微弱闪烁效果 - 用于文本和UI元素 */
@keyframes micro-flicker {
0%, 100% { opacity: 1; }
25% { opacity: 0.99; }
50% { opacity: 0.98; }
75% { opacity: 0.99; }
}
/* 主扫描线动画 - 更逼真 */
@keyframes primary-scanline {
0% { transform: translateY(-5vh); }
100% { transform: translateY(110vh); }
}
/* 副扫描线动画 - 较慢移动 */
@keyframes secondary-scanline {
0% { transform: translateY(-100vh); }
100% { transform: translateY(100vh); }
}
/* 快速扫描线动画 - 闪烁通过 */
@keyframes fast-scanline {
0%, 5% { opacity: 0; transform: translateY(-100vh); }
8% { opacity: var(--crt-fast-scanline-alpha); }
25% { opacity: var(--crt-fast-scanline-alpha); }
30% { opacity: 0; }
100% { opacity: 0; transform: translateY(100vh); }
}
/* 噪点效果动画 */
@keyframes noise {
0%, 100% { background-position: 0 0; }
25% { background-position: 100% 0; }
50% { background-position: 100% 100%; }
75% { background-position: 0 100%; }
}
/* RGB颜色偏移动画 */
@keyframes rgb-shift {
0%, 100% {
text-shadow:
var(--crt-rgb-shift-amount) 0 0 rgba(255, 0, 0, 0.3),
calc(-1 * var(--crt-rgb-shift-amount)) 0 0 rgba(0, 255, 255, 0.3);
}
25% {
text-shadow:
calc(0.8 * var(--crt-rgb-shift-amount)) 0 0 rgba(255, 0, 0, 0.3),
calc(-0.8 * var(--crt-rgb-shift-amount)) 0 0 rgba(0, 255, 255, 0.3);
}
50% {
text-shadow:
var(--crt-rgb-shift-amount) 0 0 rgba(255, 0, 0, 0.3),
calc(-1 * var(--crt-rgb-shift-amount)) 0 0 rgba(0, 255, 255, 0.3);
}
75% {
text-shadow:
calc(1.2 * var(--crt-rgb-shift-amount)) 0 0 rgba(255, 0, 0, 0.3),
calc(-1.2 * var(--crt-rgb-shift-amount)) 0 0 rgba(0, 255, 255, 0.3);
}
}
@keyframes crt-on {
0% { opacity: 0; filter: brightness(5) saturate(0); }
10% { opacity: 0.3; filter: brightness(3) saturate(0.2); }
30% { opacity: 0.7; filter: brightness(2) saturate(0.5); }
50% { opacity: 0.8; filter: brightness(1.5) saturate(0.8); }
100% { opacity: 1; filter: brightness(1) saturate(1); }
}
/* 控制台指示灯闪烁效果 */
@keyframes console-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* 打字机效果 */
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
/* 滚动指示动画 */
@keyframes scroll-indicator {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(10px); }
}
/* 光感效果 - 模拟CRT显示器对周围光线的反应 */
@keyframes light-response {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.03); }
}
/* 全局和背景样式 - 增强CRT显示器质感 */
html {
min-height: 100%;
background-color: #111; /* 更暗的背景，衬托CRT效果 */
background-image:
/* 网格线 */
linear-gradient(var(--grid-color) var(--grid-line-width), transparent var(--grid-line-width)),
linear-gradient(90deg, var(--grid-color) var(--grid-line-width), transparent var(--grid-line-width)),
/* 精细噪点纹理 */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%239C92AC' fill-opacity='0.08' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), auto;
background-position: center center;
animation: crt-on 2s ease-out;
position: relative;
overflow-x: hidden; /* 防止水平滚动条出现 */
padding: 0;
margin: 0;
}
/* CRT显示器边框模拟 */
.crt-monitor-frame {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10000;
background: transparent;
box-shadow: inset 0 0 100px 20px rgba(0, 0, 0, 0.7); /* 内阴影创造边框效果 */
border-radius: 15% / 8%; /* 创造CRT显示器的弧度 */
}
/* CRT面板反光效果 */
.crt-reflection {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.1) 0%,
transparent 40%
);
pointer-events: none;
z-index: 10001;
opacity: 0.3;
border-radius: 15% / 8%;
}
body {
font-family: var(--body-font);
font-size: var(--base-font-size);
line-height: 1.65;
color: #222;
position: relative;
width: 90%;
max-width: 1200px; /* 限制最大宽度 */
min-height: calc(100vh - 4rem);
margin: 2rem auto; /* 居中并增加上下边距 */
padding: 2rem;
background-color: rgba(255, 255, 255, var(--glass-opacity));
border-radius: 6px;
border: 1px solid var(--border-shine);
box-shadow:
var(--box-depth),
0 3px 12px rgba(0, 0, 0, 0.05),
inset 0 0 var(--inset-shadow-depth) rgba(0, 255, 100, 0.04);
animation: flicker 120s infinite alternate ease-in-out;
overflow: hidden; /* 隐藏超出部分，配合扫描线 */
backdrop-filter: blur(var(--glass-blur)); /* 支持的浏览器会有磨砂玻璃效果 */
-webkit-backdrop-filter: blur(var(--glass-blur));
transform-style: preserve-3d;
perspective: 1000px;
}
/* CRT曲面效果 - 使页面内容看起来像在CRT上显示 */
.crt-curve-effect {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9997;
background: transparent;
box-shadow: inset 0 0 calc(var(--crt-curvature) * 8px) rgba(0, 0, 0, 0.3);
border-radius: 50% / 10%;
opacity: 0.5;
}
/* 添加暗角效果 - 增强CRT显示器质感 */
body::before {
content: "";
display: var(--crt-effects-display);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9990;
background: radial-gradient(
circle at center,
transparent 40%,
rgba(0, 0, 0, var(--crt-vignette-opacity)) 140%
);
mix-blend-mode: multiply;
}
/* 添加纹理噪点 - 模拟CRT颗粒感 */
body::after {
content: "";
display: var(--crt-effects-display);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9991;
background-image: url("data:image/png;base64,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");
background-repeat: repeat;
background-size: 200px;
opacity: var(--crt-noise-alpha);
animation: noise 0.5s steps(2) infinite;
mix-blend-mode: overlay;
}
.console-input {
background-color: var(--terminal-bg);
padding: 10px 15px;
display: flex;
align-items: center;
border: 1px solid rgba(0, 255, 100, 0.5);
}
.console-prompt {
color: rgba(0, 255, 100, 0.9);
margin-right: 10px;
font-family: var(--pixel-font-12);
font-weight: bold;
animation: console-blink 1s infinite;
}
.console-command {
background: transparent;
border: none;
color: rgba(0, 255, 100, 0.9);
font-family: var(--pixel-font-12);
font-size: 16px;
width: 100%;
outline: none;
}
.console-command::placeholder {
color: rgba(0, 255, 100, 0.4);
}
/* CRT扫描线效果 - 更逼真 */
/* 1. 主扫描线 - 明显且速度和密度适中的扫描线 */
.crt-primary-scanline {
content: "";
display: var(--crt-effects-display);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 9px; /* 主扫描线较宽 */
background: linear-gradient(
to bottom,
transparent 0%,
rgba(0, 0, 0, var(--crt-primary-scanline-alpha)) 40%,
rgba(0, 0, 0, calc(var(--crt-primary-scanline-alpha) * 1.5)) 50%,
rgba(0, 0, 0, var(--crt-primary-scanline-alpha)) 60%,
transparent 100%
);
pointer-events: none;
z-index: 9995;
opacity: 0.85;
animation: primary-scanline 8s linear infinite;
}
/* 2. 副扫描线 - 持续存在的细小扫描线纹理 */
.crt-secondary-scanline {
content: "";
display: var(--crt-effects-display);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
to bottom,
transparent 0px,
transparent 3px,
rgba(0, 0, 0, var(--crt-secondary-scanline-alpha)) 4px,
rgba(0, 0, 0, var(--crt-secondary-scanline-alpha)) 4px
);
background-size: 100% 8px;
pointer-events: none;
z-index: 9994;
opacity: 0.7;
}
/* 3. 快速扫描线 - 闪烁通过的亮条 */
.crt-fast-scanline {
content: "";
display: var(--crt-effects-display);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 2px; /* 快速扫描线很窄 */
background: linear-gradient(
to bottom,
transparent 0%,
rgba(255, 255, 255, 0.5) 50%,
transparent 100%
);
pointer-events: none;
z-index: 9996;
opacity: 0;
animation: fast-scanline 4s cubic-bezier(0.15, 0.85, 0.5, 1) infinite;
}
/* 额外扫描线阴影 - 增强3D效果 */
.crt-scanline-shadow {
content: "";
display: var(--crt-effects-display);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9992;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.01) 0%,
rgba(0, 0, 0, 0.05) 50%,
rgba(0, 0, 0, 0.01) 100%
);
opacity: 0.4;
}
/* 标题样式 - 更精致的复古科幻风格 */
h1, h2, h3, h4, h5, h6 {
font-family: var(--title-font);
font-size: calc(var(--base-font-size) * var(--title-scale));
font-weight: normal;
text-shadow: var(--crt-text-shadow),
0 1px 1px rgba(0, 0, 0, 0.1);
letter-spacing: 0.03em;
position: relative;
margin-top: 1.8em;
margin-bottom: 1em;
padding-bottom: 0.5em;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
color: #111;
line-height: 1.5;
animation: micro-flicker 2s infinite alternate ease-in-out;
}
/* 标题光效底层 */
h1::after, h2::after, h3::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(
to right,
var(--crt-glow-color),
transparent 90%
);
}
/* 标题装饰线 */
h1::before, h2::before {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 30px;
height: 3px;
background: linear-gradient(
to right,
rgba(0, 255, 100, 0.8),
transparent
);
border-radius: 2px;
box-shadow: 0 0 8px var(--crt-glow-color);
}
body h1 {
font-size: calc(var(--base-font-size) * 1.7);
text-transform: uppercase;
padding-left: 14px;
border-left: 3px solid var(--crt-glow-color);
box-shadow: -3px 0 8px rgba(0, 255, 100, 0.2);
letter-spacing: 0.05em;
}
h2 {
font-size: calc(var(--base-font-size) * 1.5);
padding-left: 6px;
}
h3 {
font-size: calc(var(--base-font-size) * 1.3);
border-bottom-style: dashed;
border-bottom-width: 1px;
}
h4 {
font-size: calc(var(--base-font-size) * 1.2);
border-bottom: none;
border-left: 2px solid rgba(0, 255, 100, 0.4);
padding-left: 6px;
}
h5, h6 {
font-size: calc(var(--base-font-size) * 1.1);
border-bottom: none;
}
/* 链接样式 - 更精致的复古科幻风格 */
a {
color: var(--link-color);
text-decoration: none;
position: relative;
transition: all 0.25s ease;
padding: 1px 3px;
border-radius: 2px;
text-shadow: 0 0 3px rgba(0, 100, 255, 0.15);
font-family: var(--pixel-font-16);
}
/* 链接悬停效果 */
a:hover {
color: var(--link-color-active);
background-color: rgba(250, 167, 0, 0.1);
text-shadow: 0 0 var(--crt-glow-radius) rgba(250, 167, 0, 0.4);
transform: translateY(-1px);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
/* 链接点击效果 */
a:active {
transform: translateY(0);
box-shadow: none;
}
/* 标记链接是可交互的 - 添加小图标 */
a[href]:not(.mw-selflink)::before {
content: '>';
display: inline-block;
margin-right: 3px;
font-size: 0.8em;
opacity: 0.6;
transition: all 0.2s ease;
}
a[href]:not(.mw-selflink):hover::before {
opacity: 1;
transform: translateX(1px);
animation: console-blink 1s infinite;
}
/* 红色链接样式 */
a.new {
color: #ba0000;
text-shadow: 0 0 3px rgba(186, 0, 0, 0.2);
}
a.new:hover {
background-color: rgba(186, 0, 0, 0.1);
text-shadow: 0 0 var(--crt-glow-radius) rgba(186, 0, 0, 0.4);
}
/* 外部链接样式 */
a.external {
border-bottom: 1px dotted rgba(6, 69, 173, 0.3);
}
a.external::after {
content: "⎋";
font-size: 0.8em;
margin-left: 3px;
opacity: 0.7;
}
a.external:hover::after {
opacity: 1;
transform: translateY(-1px);
}
/* Infobox样式 - 更精致的复古科幻风格 */
.notaninfobox {
position: relative;
clear: right;
margin: 0 0 1em 1em;
width: 350px;
font-size: calc(var(--base-font-size) * 0.9);
font-family: var(--small-font);
background-color: rgba(248, 249, 250, 0.95);
float: right;
border: 1px solid rgba(0, 0, 0, 0.15);
padding: 0;
overflow: auto;
z-index: 1;
overflow-wrap: anywhere;
box-shadow:
2px 2px 5px rgba(0, 0, 0, 0.1),
inset 0 0 10px rgba(0, 255, 100, 0.04);
animation: flicker 80s infinite alternate;
border-radius: 3px;
}
/* Infobox标题 */
.notaninfobox > .infobox-title {
font-family: var(--title-font);
font-weight: normal;
text-align: center;
font-size: 110%;
background: linear-gradient(to bottom, #d5e5fb, var(--custom-mcwiki-header-color));
color: #333;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5), var(--crt-text-shadow);
padding: 10px 4px;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
position: relative;
overflow: hidden;
}
/* 给标题添加光泽效果 */
.notaninfobox > .infobox-title::after {
content: "";
position: absolute;
top: 0;
left: -150%;
width: 150%;
height: 100%;
background: linear-gradient(
to right,
transparent 0%,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: rotate(35deg);
animation: shine 6s infinite;
}
/* Infobox标签样式 */
.notaninfobox .infobox-row .infobox-row-label {
font-family: var(--UI-font);
font-weight: 600;
color: #444;
text-shadow: none;
letter-spacing: 0.03em;
padding: 5px 8px;
background-color: rgba(0, 0, 0, 0.03);
border-right: 2px solid rgba(0, 0, 0, 0.1);
}
/* Infobox内容样式 */
.notaninfobox .infobox-row .infobox-row-value {
padding: 5px 8px;
line-height: 1.4;
}
/* Infobox行交替背景 */
.notaninfobox .infobox-row:nth-child(even) {
background-color: rgba(0, 0, 0, 0.02);
}
/* Infobox行悬停效果 */
.notaninfobox .infobox-row:hover {
background-color: rgba(0, 255, 100, 0.03);
}
/* 表格样式 - 更精致的复古科幻风格 */
table {
border: 1px solid #ccc;
background-color: rgba(248, 249, 250, 0.95);
box-shadow:
var(--box-depth),
inset 0 0 15px rgba(240, 240, 240, 0.8);
border-radius: 3px;
margin: 1.2em 0;
font-family: var(--pixel-font-12);
border-collapse: separate;
border-spacing: 0;
overflow: hidden; /* 使圆角边框生效 */
}
/* 表格标题 */
table caption {
font-family: var(--title-font);
font-size: calc(var(--base-font-size) * 1.05);
padding: 10px;
font-weight: normal;
text-shadow: var(--crt-text-shadow);
margin-bottom: 5px;
color: #333;
border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}
/* 表头样式 */
table th {
background: linear-gradient(to bottom, #f8f9fa, var(--custom-table-header-background));
color: #333;
font-family: var(--title-font);
font-weight: normal;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5), var(--crt-text-shadow);
padding: 12px 14px;
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
position: relative;
}
/* 表头装饰效果 */
table th::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0.5),
transparent
);
}
/* 表格单元格 */
table td, table th {
border: 1px solid #e0e0e0;
padding: 8px 12px;
transition: all 0.2s ease;
font-size: calc(var(--base-font-size) * 0.95);
}
/* 表格交替行 */
table tr:nth-child(even) td {
background-color: rgba(240, 241, 242, 0.7);
}
/* 表格行悬停效果 */
table tr:hover td {
background-color: rgba(0, 255, 100, 0.08);
text-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
}
/* 代码样式 - 更精致的复古科幻风格 */
pre, code {
font-family: var(--pixel-font-12);
font-size: calc(var(--base-font-size) * var(--code-scale));
background-color: rgba(232, 232, 232, 0.8);
border: 1px solid #d0d0d0;
padding: 0.3em 0.5em;
text-shadow: none;
border-radius: 3px;
color: #1a1a1a;
position: relative;
}
/* 代码块样式 */
pre {
padding: 1em 1em 1em 3.5em; /* 左侧留出行号空间 */
overflow-x: auto;
background-color: rgba(228, 230, 232, 0.9);
box-shadow:
inset 0 1px 4px rgba(0,0,0,0.15),
0 1px 0 rgba(255,255,255,0.7);
counter-reset: line;
margin: 1.5em 0;
position: relative;
border-left: 3px solid rgba(0, 200, 100, 0.3);
}
/* 代码块背景 - 终端风格 */
pre::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(
to bottom,
transparent 0px,
transparent 19px,
rgba(0, 0, 0, 0.05) 19px,
rgba(0, 0, 0, 0.05) 20px
);
pointer-events: none;
}
/* 代码行号 */
pre code {
display: block;
position: relative;
background: transparent;
border: none;
box-shadow: none;
padding: 0;
counter-increment: line;
}
pre code::before {
content: counter(line);
display: inline-block;
width: 2em;
margin-right: 1em;
margin-left: -3em;
color: #888;
text-align: right;
user-select: none;
border-right: 1px solid rgba(0, 0, 0, 0.1);
padding-right: 0.5em;
}
/* 内联代码 */
p code, li code, td code {
padding: 0.15em 0.4em;
margin: 0 0.2em;
background-color: rgba(220, 220, 220, 0.5);
border: 1px solid #d8d8d8;
white-space: nowrap;
}
/* 控制台输出样式 */
.console-output {
background-color: var(--terminal-bg);
color: var(--console-text-color);
font-family: var(--pixel-font-12);
padding: 12px;
margin: 1em 0;
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
/* 控制台头部 */
.console-output::before {
content: "> terminal";
display: block;
color: rgba(255, 255, 255, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 5px;
margin-bottom: 8px;
font-size: 0.9em;
}
/* 控制台指示器闪烁 */
.console-indicator {
display: inline-block;
width: 0.8em;
height: 1em;
background-color: var(--console-indicator-color);
margin-left: 0.2em;
vertical-align: middle;
animation: console-blink 1s infinite;
}
/* 确保文本内容清晰可读 */
p, li, td, th, figcaption, blockquote, cite {
font-family: var(--body-font);
line-height: 1.65;
letter-spacing: 0.01em;
position: relative;
text-shadow: var(--crt-text-shadow);
}
/* 小字体元素 */
.small, small, .text-small, figcaption, .caption, .info, .note {
font-family: var(--small-font);
font-size: var(--small-font-size);
}
/* 注释、提示和警告样式 */
.note, .info, .warning, .tip {
position: relative;
margin: 1.5em 0;
padding: 1em 1em 1em 3em;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
font-family: var(--small-font);
}
.note::before, .info::before, .warning::before, .tip::before {
position: absolute;
left: 0.8em;
top: 50%;
transform: translateY(-50%);
font-size: 1.5em;
opacity: 0.8;
}
/* 注释样式 */
.note {
background-color: rgba(230, 230, 250, 0.4);
border-left: 3px solid #99c;
}
.note::before {
content: "※";
color: #99c;
}
/* 信息样式 */
.info {
background-color: rgba(220, 237, 255, 0.4);
border-left: 3px solid #69c;
}
.info::before {
content: "ℹ";
color: #69c;
}
/* 警告样式 */
.warning {
background-color: rgba(255, 240, 230, 0.4);
border-left: 3px solid #f93;
}
.warning::before {
content: "⚠";
color: #f93;
}
/* 提示样式 */
.tip {
background-color: rgba(230, 250, 230, 0.4);
border-left: 3px solid #6c6;
}
.tip::before {
content: "✓";
color: #6c6;
}
/* 图片效果 - 更精致的复古科幻风格 */
img {
max-width: 100%;
height: auto;
transition: all 0.3s ease;
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
filter: contrast(1.02) brightness(1.01); /* 轻微增强对比度 */
position: relative;
}
/* 图片悬停效果 */
img:hover {
box-shadow:
0 3px 8px rgba(0, 0, 0, 0.15),
0 0 10px var(--crt-glow-color);
transform: scale(1.02) translateY(-2px);
border-color: rgba(0, 255, 100, 0.3);
filter: contrast(1.05) brightness(1.02);
}
/* 图片装饰层 - 模拟CRT显示图片的效果 */
img::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(
to bottom,
transparent 0px,
transparent 3px,
rgba(0, 0, 0, 0.03) 4px,
rgba(0, 0, 0, 0.03) 4px
);
pointer-events: none;
z-index: 1;
}
/* 图片标题 */
figcaption {
margin-top: 0.5em;
color: #555;
font-style: italic;
text-align: center;
max-width: 100%;
}
/* 滚动条样式 - 更精致的复古科幻风格 */
::-webkit-scrollbar {
width: 14px;
height: 14px;
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.04);
border-radius: 0;
box-shadow: inset 0 0 4px rgba(0,0,0,0.1);
}
::-webkit-scrollbar-thumb {
background: repeating-linear-gradient(
to bottom,
#aaa 0px,
#aaa 2px,
#999 3px,
#999 5px
);
border-radius: 0;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
::-webkit-scrollbar-thumb:hover {
background: repeating-linear-gradient(
to bottom,
#bbb 0px,
#bbb 2px,
#aaa 3px,
#aaa 5px
);
}
::-webkit-scrollbar-button {
background-color: #ddd;
border: 1px solid #aaa;
border-radius: 0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
width: 14px;
height: 14px;
background-position: center;
background-repeat: no-repeat;
background-size: 6px;
}
::-webkit-scrollbar-button:vertical:decrement {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpolygon points='5,3 8,7 2,7' fill='%23666'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:vertical:increment {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpolygon points='5,7 8,3 2,3' fill='%23666'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:horizontal:decrement {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpolygon points='3,5 7,2 7,8' fill='%23666'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:horizontal:increment {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpolygon points='7,5 3,2 3,8' fill='%23666'/%3E%3C/svg%3E");
}
/* 滚动条拐角 */
::-webkit-scrollbar-corner {
background-color: #eee;
border: 1px solid #ccc;
}
/* 引用块样式 - 更精致的复古科幻风格 */
blockquote {
border-left: 3px solid var(--crt-glow-color);
margin: 1.2em 0;
padding: 0.8em 1.2em;
background: rgba(240, 240, 240, 0.5);
position: relative;
font-family: var(--body-font);
box-shadow:
inset 0 0 15px rgba(0, 255, 100, 0.03),
1px 1px 3px rgba(0, 0, 0, 0.05);
border-radius: 0 3px 3px 0;
}
blockquote::before {
content: """;
position: absolute;
top: 0;
left: 10px;
font-size: 2em;
color: rgba(0, 0, 0, 0.1);
font-family: serif;
}
blockquote p:first-child {
margin-top: 0;
}
blockquote p:last-child {
margin-bottom: 0;
}
/* 引用源 */
cite {
display: block;
margin-top: 0.5em;
color: #666;
font-size: 0.9em;
font-style: italic;
}
cite::before {
content: "— ";
}
/* 按钮样式 - 更精致的复古科幻风格 */
.collapseButton, button, .mw-ui-button, input[type="button"], input[type="submit"] {
font-family: var(--UI-font);
font-size: calc(var(--base-font-size) * 0.85);
padding: 6px 12px;
border: 2px solid #666;
border-bottom: 4px solid #444;
border-right: 4px solid #444;
border-radius: 0;
background: linear-gradient(to bottom, #eee, #ddd);
color: #333;
text-transform: uppercase;
cursor: pointer;
transition: all 0.15s ease;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
margin: 2px 4px;
position: relative;
text-align: center;
letter-spacing: 0.05em;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
/* 按钮悬停效果 */
.collapseButton:hover, button:hover, .mw-ui-button:hover, input[type="button"]:hover, input[type="submit"]:hover {
background: linear-gradient(to bottom, #f5f5f5, #eee);
border-color: #777;
border-bottom-color: #555;
border-right-color: #555;
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}
/* 按钮点击效果 */
.collapseButton:active, button:active, .mw-ui-button:active, input[type="button"]:active, input[type="submit"]:active {
background: linear-gradient(to bottom, #ccc, #ddd);
border: 2px solid #444;
border-top: 4px solid #666;
border-left: 4px solid #666;
transform: translateY(1px);
text-shadow: none;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* 按钮装饰效果 */
.collapseButton::after, button::after, .mw-ui-button::after, input[type="button"]::after, input[type="submit"]::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: calc(100% - 4px);
height: 8px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent);
pointer-events: none;
border-radius: 0;
}
.navbox .collapseButton {
width: 6em;
}
/* 主按钮样式 - 重要操作 */
.mw-ui-button.mw-ui-primary, button.primary, input[type="submit"].primary {
background: linear-gradient(to bottom, #6af, #39f);
border-color: #27e;
border-bottom-color: #05c;
border-right-color: #05c;
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.mw-ui-button.mw-ui-primary:hover, button.primary:hover, input[type="submit"].primary:hover {
background: linear-gradient(to bottom, #7bf, #49f);
border-color: #38f;
border-bottom-color: #16d;
border-right-color: #16d;
}
/* 继续22222.txt中断部分的CSS */
.mw-ui-button.mw-ui-primary:active, button.primary:active, input[type="submit"].primary:active {
background: linear-gradient(to bottom, #28e, #39f);
border: 2px solid #05c;
border-top: 4px solid #16d;
border-left: 4px solid #16d;
transform: translateY(1px);
text-shadow: none;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* 导航容器 - 更精致的复古科幻风格 */
.navbox {
background-color: rgba(255, 255, 255, 0.95);
border: 1px solid var(--custom-navbox-top);
border-radius: 3px;
color: #222;
margin: 1.5em 0;
padding: 4px;
font-family: var(--small-font);
font-size: var(--small-font-size);
box-shadow:
var(--box-depth),
inset 0 0 20px rgba(0, 255, 100, 0.02);
position: relative;
overflow: hidden;
}
/* 导航标题 */
.navbox-title {
background: linear-gradient(to bottom, #f8f9fa, var(--custom-navbox-top));
border: 1px solid var(--custom-navbox-top);
border-radius: 2px;
color: #222;
padding: 8px 12px;
font-family: var(--title-font);
font-weight: normal;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), var(--crt-text-shadow);
position: relative;
}
/* 导航组 */
.navbox-group {
background-color: var(--custom-navbox-middle);
border: 1px solid var(--custom-navbox-top);
color: #444;
font-weight: normal;
padding: 6px 10px;
text-align: right;
white-space: nowrap;
letter-spacing: 0.03em;
border-right: 2px solid rgba(0, 0, 0, 0.1);
}
/* 导航列表 */
.navbox-list {
background-color: var(--custom-navbox-thru);
border: 1px solid var(--custom-navbox-middle);
padding: 6px 10px;
text-align: left;
line-height: 1.5;
}
/* 导航行悬停效果 */
.navbox tr:hover td.navbox-list {
background-color: rgba(0, 255, 100, 0.05);
}
/* 导航装饰 */
.navbox::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(
to right,
transparent,
rgba(255, 255, 255, 0.8),
transparent
);
}
/* 提示框和消息样式 - 像素化科幻风格 */
.notice {
position: relative;
margin: 1.5em 0;
padding: 1em 1em 1em 4em;
border-radius: 3px;
border-left: 4px solid transparent;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
font-family: var(--small-font);
animation: micro-flicker 2s infinite alternate ease-in-out;
}
.notice::before {
font-family: var(--UI-font);
position: absolute;
left: 1em;
top: 50%;
transform: translateY(-50%);
font-size: 1.8em;
opacity: 0.8;
}
/* 成功消息 */
.notice-success {
background-color: rgba(230, 250, 230, 0.4);
border-color: #6c6;
}
.notice-success::before {
content: "✓";
color: #6c6;
}
/* 错误消息 */
.notice-error {
background-color: rgba(255, 230, 230, 0.4);
border-color: #c66;
}
.notice-error::before {
content: "✗";
color: #c66;
}
/* 警告消息 */
.notice-warning {
background-color: rgba(255, 240, 230, 0.4);
border-color: #f93;
}
.notice-warning::before {
content: "⚠";
color: #f93;
}
/* 信息消息 */
.notice-info {
background-color: rgba(220, 237, 255, 0.4);
border-color: #69c;
}
.notice-info::before {
content: "ℹ";
color: #69c;
}
/* 表单元素 - 复古科幻风格 */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
textarea,
select {
font-family: var(--pixel-font-12);
font-size: calc(var(--base-font-size) * 0.9);
color: #333;
background-color: rgba(240, 245, 250, 0.95);
border: 2px solid #aaa;
border-radius: 0;
padding: 6px 10px;
margin: 4px 0;
box-shadow:
inset 0 1px 3px rgba(0, 0, 0, 0.1),
0 1px 0 rgba(255, 255, 255, 0.7);
transition: all 0.2s ease;
}
/* 输入元素悬停状态 */
input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover {
border-color: #999;
background-color: rgba(245, 248, 250, 0.98);
}
/* 输入元素焦点状态 */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
outline: none;
border-color: rgba(0, 150, 255, 0.6);
box-shadow:
inset 0 1px 3px rgba(0, 0, 0, 0.05),
0 0 8px rgba(0, 150, 255, 0.3);
background-color: #fff;
}
/* 文本区域 */
textarea {
resize: vertical;
min-height: 80px;
line-height: 1.5;
}
/* 复选框和单选按钮 - 复古科幻风格 */
input[type="checkbox"],
input[type="radio"] {
position: relative;
width: 16px;
height: 16px;
margin: 3px 5px 3px 0;
vertical-align: middle;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
border: 1px solid #999;
background-color: rgba(240, 245, 250, 0.9);
transition: all 0.2s ease;
}
input[type="checkbox"] {
border-radius: 2px;
}
input[type="radio"] {
border-radius: 50%;
}
/* 复选框和单选按钮悬停状态 */
input[type="checkbox"]:hover,
input[type="radio"]:hover {
border-color: #666;
background-color: rgba(245, 248, 250, 0.95);
}
/* 复选框和单选按钮选中状态 */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
border-color: #0078d7;
background-color: rgba(0, 120, 215, 0.1);
}
/* 复选框选中状态图标 */
input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 4px;
top: 1px;
width: 5px;
height: 10px;
border: solid #0078d7;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* 单选按钮选中状态图标 */
input[type="radio"]:checked::after {
content: "";
position: absolute;
left: 3px;
top: 3px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #0078d7;
}
/* 标签样式 */
label {
font-family: var(--pixel-font-12);
font-size: calc(var(--base-font-size) * 0.9);
margin: 0 10px 0 2px;
vertical-align: middle;
cursor: pointer;
}
/* 分页导航 - 复古科幻风格 */
.pagination {
display: flex;
justify-content: center;
align-items: center;
margin: 2em 0;
font-family: var(--UI-font);
font-size: calc(var(--base-font-size) * 0.85);
}
.pagination a,
.pagination span {
display: inline-flex;
justify-content: center;
align-items: center;
min-width: 32px;
height: 32px;
margin: 0 3px;
padding: 0 10px;
text-align: center;
line-height: 1;
border: 1px solid #ccc;
border-radius: 0;
background-color: rgba(240, 245, 250, 0.8);
color: #444;
text-decoration: none;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
/* 分页导航悬停效果 */
.pagination a:hover {
border-color: #999;
background-color: rgba(0, 150, 255, 0.1);
color: var(--link-color-active);
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 当前页面 */
.pagination .current {
border-color: #666;
background-color: rgba(30, 30, 30, 0.8);
color: #fff;
font-weight: normal;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
/* 下拉菜单 - 复古科幻风格 */
.dropdown {
position: relative;
display: inline-block;
font-family: var(--UI-font);
font-size: calc(var(--base-font-size) * 0.9);
}
.dropdown-toggle {
display: inline-flex;
align-items: center;
padding: 6px 12px;
background-color: rgba(240, 245, 250, 0.9);
border: 1px solid #ccc;
border-radius: 0;
cursor: pointer;
transition: all 0.2s ease;
}
.dropdown-toggle::after {
content: "▼";
font-size: 0.7em;
margin-left: 8px;
transition: transform 0.2s ease;
}
.dropdown-toggle:hover {
background-color: rgba(245, 248, 250, 0.95);
border-color: #999;
}
.dropdown-toggle:hover::after {
transform: translateY(2px);
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
background-color: rgba(250, 252, 255, 0.95);
border: 1px solid #ccc;
border-radius: 0;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.dropdown-menu.show {
display: block;
animation: dropdown-fade 0.2s ease-in-out;
}
@keyframes dropdown-fade {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.dropdown-item {
display: block;
padding: 6px 15px;
clear: both;
text-decoration: none;
color: #333;
white-space: nowrap;
transition: all 0.15s ease;
position: relative;
}
.dropdown-item:hover {
background-color: rgba(0, 150, 255, 0.1);
color: var(--link-color-active);
padding-left: 18px;
}
.dropdown-divider {
height: 1px;
margin: 6px 0;
background-color: #eee;
}
/* 终端窗口 - 复古科幻风格 */
.terminal {
background-color: var(--terminal-bg);
color: var(--console-text-color);
font-family: var(--pixel-font-12);
padding: 15px;
margin: 1.5em 0;
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.3);
box-shadow:
inset 0 0 15px rgba(0, 0, 0, 0.3),
0 2px 5px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
/* 终端窗口标题栏 */
.terminal::before {
content: "TERMINAL";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 4px 10px;
background: linear-gradient(to bottom, #444, #333);
color: #ddd;
font-size: 0.8em;
text-align: center;
border-bottom: 1px solid #222;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
/* 终端内容 */
.terminal-content {
margin-top: 25px;
line-height: 1.4;
overflow-x: auto;
white-space: pre-wrap;
}
/* 终端命令提示符 */
.terminal-prompt {
color: #0f0;
margin-right: 5px;
}
/* 终端命令行 */
.terminal-line {
margin: 5px 0;
word-break: break-all;
}
/* 终端光标闪烁 */
.terminal-cursor {
display: inline-block;
width: 0.5em;
height: 1em;
background-color: var(--console-indicator-color);
vertical-align: middle;
animation: console-blink 1s infinite;
}
/* 加载指示器 - 复古科幻风格 */
.loading {
display: inline-block;
position: relative;
width: 80px;
height: 20px;
margin: 1em auto;
text-align: center;
}
.loading div {
display: inline-block;
width: 8px;
height: 8px;
margin: 0 3px;
background-color: rgba(0, 200, 100, 0.8);
border-radius: 0;
animation: loading 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.loading div:nth-child(1) {
animation-delay: -0.24s;
}
.loading div:nth-child(2) {
animation-delay: -0.12s;
}
.loading div:nth-child(3) {
animation-delay: 0;
}
@keyframes loading {
0% {
transform: scaleY(1);
background-color: rgba(0, 200, 100, 0.8);
}
50% {
transform: scaleY(2);
background-color: rgba(0, 255, 100, 0.8);
}
100% {
transform: scaleY(1);
background-color: rgba(0, 200, 100, 0.8);
}
}
/* 工具提示 - 复古科幻风格 */
.tooltip {
position: relative;
display: inline-block;
cursor: help;
}
.tooltip .tooltip-text {
visibility: hidden;
width: 200px;
background-color: rgba(20, 20, 20, 0.9);
color: #fff;
text-align: center;
border-radius: 0;
padding: 8px 12px;
position: absolute;
z-index: 1001;
bottom: 125%;
left: 50%;
margin-left: -100px;
font-family: var(--small-font);
font-size: var(--small-font-size);
line-height: 1.4;
opacity: 0;
transition: opacity 0.2s, transform 0.2s;
transform: translateY(10px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
border: 1px solid #444;
text-shadow: none;
}
/* 工具提示箭头 */
.tooltip .tooltip-text::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: rgba(20, 20, 20, 0.9) transparent transparent transparent;
}
/* 显示工具提示 */
.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
/* 徽章 - 复古科幻风格 */
.badge {
display: inline-block;
padding: 2px 6px;
font-size: 0.8em;
font-family: var(--UI-font);
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: #777;
color: #fff;
border-radius: 0;
margin: 0 3px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.badge-primary {
background-color: #0078d7;
}
.badge-success {
background-color: #5cb85c;
}
.badge-info {
background-color: #5bc0de;
}
.badge-warning {
background-color: #f0ad4e;
}
.badge-danger {
background-color: #d9534f;
}
/* 进度条 - 复古科幻风格 */
.progress {
height: 20px;
margin: 1em 0;
background-color: rgba(220, 225, 230, 0.8);
border-radius: 0;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
overflow: hidden;
border: 1px solid #ccc;
position: relative;
}
.progress-bar {
height: 100%;
background: repeating-linear-gradient(
45deg,
rgba(0, 200, 100, 0.8),
rgba(0, 200, 100, 0.8) 10px,
rgba(0, 220, 110, 0.9) 10px,
rgba(0, 220, 110, 0.9) 20px
);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
transition: width 0.6s ease;
position: relative;
animation: progress-animation 2s linear infinite;
}
@keyframes progress-animation {
0% {
background-position: 0 0;
}
100% {
background-position: 40px 0;
}
}
.progress-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-family: var(--UI-font);
font-size: 0.8em;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* 标签页 - 复古科幻风格 */
.tabs {
margin: 1.5em 0;
border-radius: 0;
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid #ccc;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.tabs-nav {
display: flex;
list-style: none;
padding: 0;
margin: 0;
background-color: rgba(240, 245, 250, 0.8);
border-bottom: 1px solid #ccc;
}
.tabs-nav li {
margin: 0;
}
.tabs-nav a {
display: block;
padding: 8px 15px;
text-decoration: none;
color: #555;
border-right: 1px solid #ddd;
font-family: var(--UI-font);
font-size: calc(var(--base-font-size) * 0.9);
transition: all 0.2s ease;
background: linear-gradient(to bottom, #f5f5f5, #e5e5e5);
border-bottom: 3px solid transparent;
}
.tabs-nav a:hover {
background: linear-gradient(to bottom, #fff, #f0f0f0);
color: #333;
transform: none;
box-shadow: none;
}
.tabs-nav a.active {
background: #fff;
color: #333;
border-bottom: 3px solid var(--crt-glow-color);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
}
.tabs-content {
padding: 15px;
border-radius: 0 0 3px 3px;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
animation: fade-in 0.3s ease-in-out;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 卡片 - 复古科幻风格 */
.card {
background-color: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0;
margin: 1em 0;
box-shadow:
var(--box-depth),
inset 0 0 10px rgba(0, 255, 100, 0.02);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-3px);
box-shadow:
0 5px 15px rgba(0, 0, 0, 0.1),
inset 0 0 10px rgba(0, 255, 100, 0.04);
}
.card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, transparent, var(--crt-glow-color), transparent);
}
.card-header {
background: linear-gradient(to bottom, #f8f9fa, #e8eaec);
padding: 10px 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
font-family: var(--title-font);
font-size: calc(var(--base-font-size) * 1.1);
color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), var(--crt-text-shadow);
position: relative;
}
.card-body {
padding: 15px;
font-family: var(--body-font);
}
.card-footer {
background-color: rgba(245, 248, 250, 0.7);
padding: 10px 15px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
/* 侧边栏 - 复古科幻风格 */
.sidebar {
width: var(--sidebar-width);
max-height: var(--sidebar-max-height);
margin-top: var(--sidebar-top-offset);
background:
linear-gradient(135deg, rgba(0, 255, 100, 0.05) 0%, transparent 100%),
linear-gradient(to bottom, rgba(220, 230, 240, 0.9), rgba(190, 210, 225, 0.95));
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 3px;
box-shadow:
var(--box-depth),
inset 0 0 20px rgba(0, 200, 255, 0.07);
overflow-y: auto;
position: sticky;
top: var(--sidebar-top-offset);
transition: all 0.3s ease;
}
.sidebar-header {
background: linear-gradient(to bottom, #445, #334);
color: #fff;
padding: 12px 15px;
font-family: var(--title-font);
font-size: calc(var(--base-font-size) * 1.1);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
text-align: center;
border-bottom: 1px solid #223;
letter-spacing: 0.05em;
position: relative;
}
.sidebar-header::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
}
.sidebar-section {
padding: 10px 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.sidebar-section:last-child {
border-bottom: none;
}
.sidebar-title {
font-family: var(--UI-font);
font-size: calc(var(--base-font-size) * 0.95);
color: #333;
margin: 0 0 8px 0;
padding-bottom: 5px;
border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.sidebar-list {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-list li {
margin: 5px 0;
padding: 0;
}
.sidebar-list a {
display: block;
padding: 5px 8px;
color: var(--link-color);
text-decoration: none;
font-size: calc(var(--base-font-size) * 0.9);
transition: all 0.2s ease;
text-shadow: 0 0 2px rgba(0, 100, 255, 0.1);
border-left: 2px solid transparent;
}
.sidebar-list a:hover {
background-color: rgba(0, 150, 255, 0.1);
color: var(--link-color-active);
text-shadow: 0 0 5px rgba(0, 150, 255, 0.3);
transform: translateX(2px);
border-left: 2px solid var(--crt-glow-color);
}
.sidebar-list a.active {
background-color: rgba(0, 200, 100, 0.1);
color: #008851;
border-left: 2px solid #008851;
font-weight: normal;
}
/* 弹窗对话框 - 复古科幻风格 */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1050;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.modal.show {
opacity: 1;
visibility: visible;
}
.modal-dialog {
width: 100%;
max-width: 500px;
margin: 1.75rem;
background-color: rgba(245, 250, 255, 0.95);
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0;
box-shadow:
0 10px 25px rgba(0, 0, 0, 0.3),
inset 0 0 30px rgba(0, 255, 100, 0.05);
transform: translateY(-50px);
transition: transform 0.3s ease;
position: relative;
overflow: hidden;
}
.modal.show .modal-dialog {
transform: translateY(0);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 15px;
border-bottom: 1px solid #e9ecef;
background: linear-gradient(to bottom, #f8f9fa, #e8eaec);
}
.modal-title {
margin: 0;
font-family: var(--title-font);
font-size: calc(var(--base-font-size) * 1.1);
color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), var(--crt-text-shadow);
}
.modal-close {
padding: 0;
background-color: transparent;
border: 0;
float: right;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: 0.5;
cursor: pointer;
}
.modal-close:hover {
opacity: 0.75;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.modal-body {
padding: 15px;
font-family: var(--body-font);
}
.modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 12px 15px;
border-top: 1px solid #e9ecef;
background-color: rgba(245, 248, 250, 0.7);
}
.modal-footer > button {
margin-left: 5px;
}
/* 自定义滚动条 */
.custom-scrollbar {
scrollbar-width: thin;
scrollbar-color: #999 #f5f5f5;
}
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.03);
border-radius: 0;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: repeating-linear-gradient(
to bottom,
#aaa 0px,
#aaa 2px,
#999 3px,
#999 5px
);
border-radius: 0;
border: 1px solid rgba(0, 0, 0, 0.1);
}
/* 打字机效果文本 */
.typewriter {
overflow: hidden;
white-space: nowrap;
border-right: 2px solid var(--console-text-color);
animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
display: inline-block;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: var(--console-text-color) }
}
/* 折叠面板 - 复古科幻风格 */
.accordion {
margin: 1.5em 0;
border: 1px solid #ccc;
border-radius: 0;
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.accordion-item {
border-bottom: 1px solid #ddd;
}
.accordion-item:last-child {
border-bottom: none;
}
.accordion-header {
padding: 0;
margin: 0;
}
.accordion-button {
display: block;
width: 100%;
padding: 12px 15px;
background: linear-gradient(to bottom, #f8f9fa, #e8eaec);
color: #333;
text-align: left;
border: none;
cursor: pointer;
font-family: var(--title-font);
font-size: calc(var(--base-font-size) * 1);
font-weight: normal;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
position: relative;
transition: all 0.3s ease;
}
.accordion-button::after {
content: "▼";
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
font-size: 0.7em;
transition: transform 0.3s ease;
}
.accordion-button.collapsed::after {
transform: translateY(-50%) rotate(-90deg);
}
.accordion-button:hover {
background: linear-gradient(to bottom, #fff, #f0f0f0);
}
.accordion-body {
padding: 15px;
display: none;
font-family: var(--body-font);
}
.accordion-body.show {
display: block;
}
/* 文章卡片 - 复古科幻风格 */
.article-card {
display: flex;
flex-direction: column;
margin: 1.5em 0;
background-color: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0;
box-shadow:
var(--box-depth),
inset 0 0 10px rgba(0, 255, 100, 0.02);
overflow: hidden;
transition: all 0.3s ease;
position: relative;
}
.article-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, transparent, var(--crt-glow-color), transparent);
}
.article-card:hover {
transform: translateY(-3px);
box-shadow:
0 5px 15px rgba(0, 0, 0, 0.1),
inset 0 0 10px rgba(0, 255, 100, 0.04);
}
.article-header {
padding: 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.article-title {
margin: 0 0 10px 0;
font-family: var(--title-font);
font-size: calc(var(--base-font-size) * 1.3);
color: #333;
text-shadow: var(--crt-text-shadow);
}
.article-meta {
display: flex;
align-items: center;
font-family: var(--small-font);
font-size: var(--small-font-size);
color: #777;
}
.article-author {
margin-right: 15px;
}
.article-date {
margin-right: 15px;
}
.article-thumbnail {
width: 100%;
height: 200px;
object-fit: cover;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.article-content {
padding: 15px;
flex: 1;
font-family: var(--body-font);
}
.article-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 15px;
background-color: rgba(245, 248, 250, 0.7);
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.article-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.article-tag {
display: inline-block;
padding: 2px 6px;
font-size: 0.8em;
font-family: var(--UI-font);
background-color: rgba(0, 150, 255, 0.1);
color: var(--link-color);
border-radius: 0;
border: 1px solid rgba(0, 150, 255, 0.2);
transition: all 0.2s ease;
}
.article-tag:hover {
background-color: rgba(0, 150, 255, 0.2);
color: var(--link-color-active);
transform: translateY(-1px);
}
/* 网格布局 - 复古科幻风格 */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
margin: 1.5em 0;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0;
padding: 15px;
box-shadow: var(--box-depth);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.grid-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, transparent, var(--crt-glow-color), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
.grid-item:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.grid-item:hover::before {
opacity: 1;
}
/* 按钮组 - 复古科幻风格 */
.btn-group {
display: inline-flex;
vertical-align: middle;
}
.btn-group button {
margin: 0;
border-radius: 0;
}
.btn-group button:not(:first-child) {
border-left: none;
}
.btn-group button:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group button:last-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
/* 通知横幅 - 复古科幻风格 */
.banner {
display: flex;
align-items: center;
margin: 1.5em 0;
padding: 12px 15px;
background-color: rgba(245, 248, 250, 0.9);
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0;
box-shadow: var(--box-depth);
position: relative;
overflow: hidden;
}
.banner::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, transparent, var(--crt-glow-color), transparent);
}
.banner-icon {
margin-right: 15px;
font-size: 1.5em;
color: #777;
}
.banner-content {
flex: 1;
font-family: var(--body-font);
}
.banner-title {
font-family: var(--title-font);
font-size: calc(var(--base-font-size) * 1.1);
margin: 0 0 5px 0;
color: #333;
}
.banner-text {
margin: 0;
color: #555;
}
.banner-close {
margin-left: 15px;
cursor: pointer;
color: #777;
font-size: 1.2em;
transition: all 0.2s ease;
}
.banner-close:hover {
color: #333;
transform: scale(1.1);
}
/* 主题变换按钮 - 复古科幻风格 */
.theme-switch {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
background-color: rgba(20, 20, 20, 0.8);
color: #fff;
border: none;
border-radius: 0;
padding: 8px 12px;
font-family: var(--UI-font);
font-size: calc(var(--base-font-size) * 0.8);
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 5px;
}
.theme-switch-icon {
font-size: 1.2em;
}
.theme-switch:hover {
background-color: rgba(30, 30, 30, 0.9);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
/* 页脚 - 复古科幻风格 */
.footer {
margin-top: 3rem;
padding: 2rem 0;
background-color: rgba(240, 245, 250, 0.9);
border-top: 1px solid rgba(0, 0, 0, 0.1);
font-family: var(--small-font);
font-size: var(--small-font-size);
text-align: center;
position: relative;
}
.footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8), transparent);
}
.footer-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 1rem;
}
.footer-link {
color: var(--link-color);
text-decoration: none;
transition: all 0.2s ease;
}
.footer-link:hover {
color: var(--link-color-active);
text-shadow: 0 0 3px rgba(0, 150, 255, 0.3);
}
.footer-copyright {
color: #777;
margin: 0;
}
/* 媒体查询 - 响应式布局 */
@media screen and (max-width: 768px) {
:root {
--base-font-size: 14px;
--small-font-size: 12px;
}
body {
padding: 1rem;
margin: 0.5rem;
}
.sidebar {
width: 100%;
max-height: none;
margin-top: 1rem;
position: static;
}
.grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.notaninfobox {
float: none;
width: 100%;
margin: 1em 0;
}
.modal-dialog {
margin: 1rem;
max-width: 100%;
}
}
@media screen and (min-width: 1440px) {
:root {
--base-font-size: 16px;
--small-font-size: 14px;
}
body {
width: 80%;
max-width: 1400px;
}
}
/* 打印样式优化 */
@media print {
:root {
--crt-effects-display: none;
}
html, body {
background: #fff !important;
color: #000 !important;
}
body::before,
body::after,
.crt-primary-scanline,
.crt-secondary-scanline,
.crt-fast-scanline,
.crt-scanline-shadow,
.crt-curve-effect,
.crt-monitor-frame,
.crt-reflection,
.theme-switch {
display: none !important;
}
* {
text-shadow: none !important;
box-shadow: none !important;
animation: none !important;
border-color: #ddd !important;
}
a {
color: #000 !important;
text-decoration: underline !important;
}
a::before {
display: none !important;
}
pre, code {
border: 1px solid #ddd;
background: #f8f8f8 !important;
}
.notaninfobox,
.card,
.article-card,
.sidebar,
.banner,
.modal {
box-shadow: none !important;
border: 1px solid #ddd !important;
}
}
/* 为JS操作预留的类 */
.hidden {
display: none !important;
}
.visible {
display: block !important;
}
.invisible {
visibility: hidden !important;
}
.transparent {
opacity: 0 !important;
}
.no-transitions {
transition: none !important;
}
/* 页面加载后自动添加CRT效果元素和功能性JS */
document.addEventListener('DOMContentLoaded', function() {
// 创建一个隐藏/显示CRT效果的按钮
var toggleButton = document.createElement('button');
toggleButton.innerHTML = '切换CRT效果';
toggleButton.className = 'theme-switch';
toggleButton.innerHTML = '<span class="theme-switch-icon">📺</span> CRT效果';
// 添加事件监听
toggleButton.addEventListener('click', function() {
var root = document.documentElement;
var currentDisplay = getComputedStyle(root).getPropertyValue('--crt-effects-display').trim();
if (currentDisplay === 'block' || currentDisplay === '') {
root.style.setProperty('--crt-effects-display', 'none');
toggleButton.innerHTML = '<span class="theme-switch-icon">📺</span> 显示CRT';
} else {
root.style.setProperty('--crt-effects-display', 'block');
toggleButton.innerHTML = '<span class="theme-switch-icon">📺</span> 隐藏CRT';
}
});
document.body.appendChild(toggleButton);
// 添加CRT效果元素
var body = document.querySelector('body');
// CRT曲面效果
var crtCurveEffect = document.createElement('div');
crtCurveEffect.className = 'crt-curve-effect';
body.appendChild(crtCurveEffect);
// CRT显示器边框
var crtMonitorFrame = document.createElement('div');
crtMonitorFrame.className = 'crt-monitor-frame';
body.appendChild(crtMonitorFrame);
// CRT反光效果
var crtReflection = document.createElement('div');
crtReflection.className = 'crt-reflection';
body.appendChild(crtReflection);
// 主扫描线
var primaryScanline = document.createElement('div');
primaryScanline.className = 'crt-primary-scanline';
body.appendChild(primaryScanline);
// 副扫描线
var secondaryScanline = document.createElement('div');
secondaryScanline.className = 'crt-secondary-scanline';
body.appendChild(secondaryScanline);
// 快速扫描线
var fastScanline = document.createElement('div');
fastScanline.className = 'crt-fast-scanline';
body.appendChild(fastScanline);
// 扫描线阴影
var scanlineShadow = document.createElement('div');
scanlineShadow.className = 'crt-scanline-shadow';
body.appendChild(scanlineShadow);
// 标签页功能
var tabLinks = document.querySelectorAll('.tabs-nav a');
tabLinks.forEach(function(link) {
link.addEventListener('click', function(e) {
e.preventDefault();
// 移除所有活动类
tabLinks.forEach(function(l) {
l.classList.remove('active');
});
// 添加活动类到当前链接
this.classList.add('active');
// 获取目标面板ID
var targetId = this.getAttribute('href').substring(1);
// 隐藏所有面板
var tabPanes = document.querySelectorAll('.tab-pane');
tabPanes.forEach(function(pane) {
pane.classList.remove('active');
});
// 显示目标面板
document.getElementById(targetId).classList.add('active');
});
});
// 折叠面板功能
var accordionButtons = document.querySelectorAll('.accordion-button');
accordionButtons.forEach(function(button) {
button.addEventListener('click', function() {
this.classList.toggle('collapsed');
var target = this.getAttribute('data-target');
var body = document.querySelector(target);
if (body.classList.contains('show')) {
body.classList.remove('show');
} else {
body.classList.add('show');
}
});
});
// 实现打字机效果
var typewriterElements = document.querySelectorAll('.typewriter');
typewriterElements.forEach(function(element) {
var text = element.textContent;
element.innerHTML = "";
element.style.width = "0";
var i = 0;
var speed = 50; // 打字速度，毫秒每字符
function typeWriter() {
if (i < text.length) {
element.innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
}
// 文本可见后开始打字效果
var observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
typeWriter();
observer.unobserve(element);
}
});
});
observer.observe(element);
});
});
/*
.colormu_toggle_on是为了黑幕开关(MediaWiki:Gadget-heimu-toggle.js)做适配。
.colormu-drk、.colormu-bri分别是暗色背景和亮色背景，
暗色背景的文字通常是浅色，在半隐背景后，颜色需要变成深色。
*/
.colormu-drk {
color: #FFF;
}
.colormu-bri {
color: #000;
}
.colormu-drk:not(.colormu_toggle_on) a {
color: #add8e6;
}
.colormu-drk:not(.colormu_toggle_on) a.new {
color: #FCC;
}
.colormu>span, .colormu a, .colormu a>span {
transition: color 0.2s;
}
.colormu:not(:hover):not(:active):not(.colormu_toggle_on)>span,
.colormu:not(:hover):not(:active):not(.colormu_toggle_on) a {
color: transparent;
}
/* for T:Coloredlink in T:彩幕 */
.colormu:not(:hover):not(:active):not(.colormu_toggle_on) a>span {
color: transparent !important;
}
/* for T:彩幕 in link */
a .colormu-bri {
color: inherit;
}
a:hover .colormu>span, a:active .colormu>span,
/* and for MediaWiki:Gadget-heimu-toggle.js */
.colormu-drk.colormu_toggle_on, .colormu_toggle_on>span, .colormu-drk.colormu_toggle_on a>span {
color: inherit !important;
}
/* [[Category:在模板名字空间下的CSS页面]] */
Loading comments...
