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=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap");
@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 {
/* ==== 字体设置 ==== */
--body-font: "VonwaonBitmap 16px", VT323, monospace;
--UI-font: "VonwaonBitmap 16px", VT323, monospace;
--title-font: "VonwaonBitmap 16px", "Noto Sans SC", VT323, monospace;
--mono-font: "VonwaonBitmap 16px", VT323, monospace;
/* === 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: 10, 15, 20; /* 深蓝黑色背景 */
--crt-text-color: 180, 255, 180; /* 荧光绿文字 */
--crt-terminal-green: 0, 255, 100; /* 终端绿 */
--crt-terminal-blue: 80, 170, 255; /* 终端蓝 */
--crt-terminal-amber: 255, 176, 0; /* 终端琥珀色 */
--crt-terminal-pink: 255, 100, 200; /* 终端粉色 */
--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: 180, 255, 180; /* 改为荧光绿 */
--black-monochrome: 10, 15, 20; /* 改为深蓝黑 */
--bright-accent: 0, 255, 100; /* 改为终端绿 */
--medium-accent: 0, 200, 80;
--dark-accent: 0, 150, 60;
/* === 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(80, 200, 255);
--link-color-active: rgb(255, 176, 0);
--visited-link-color: rgb(180, 160, 255);
--hover-link-color: rgb(0, 255, 200);
}
/* === 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透视效果 */
}
/* 添加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.6);
/* 暗角效果 */
background: radial-gradient(
ellipse at center,
transparent 60%,
rgba(0, 0, 0, var(--vignette-opacity)) 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: var(--interlace-opacity);
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: var(--noise-opacity);
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(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.03) 10%,
rgba(255, 255, 255, 0.05) 20%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0.05) 80%,
rgba(255, 255, 255, 0.03) 90%,
rgba(255, 255, 255, 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.3;
}
/* 垂直同步扫描效果 */
.vsync-line {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.3);
z-index: 10000;
pointer-events: none;
opacity: 0;
transform: translateY(-1px);
animation: vsync-scan 10s linear infinite;
}
/* 动画效果 */
@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 5px rgba(var(--crt-glow-color), 0.7); }
50% { text-shadow: 0 0 2px rgba(var(--crt-glow-color), 0.4); }
100% { text-shadow: 0 0 5px rgba(var(--crt-glow-color), 0.7); }
}
/* 文本和链接样式 */
h1, h2, h3, h4, h5, h6 {
font-family: var(--title-font);
color: rgb(var(--crt-terminal-green));
text-shadow: 0 0 5px rgba(var(--crt-glow-color), 0.7);
letter-spacing: 0.05em;
animation: text-flicker 2s 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 3px rgba(var(--crt-terminal-blue), 0.5);
}
a:hover {
color: rgb(var(--crt-terminal-amber));
text-shadow: 0 0 5px rgba(var(--crt-terminal-amber), 0.7);
}
a:hover::before {
content: "> ";
}
a:visited {
color: rgb(var(--crt-terminal-pink));
text-shadow: 0 0 3px rgba(var(--crt-terminal-pink), 0.5);
}
/* 按钮样式 */
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.7);
font-family: var(--pixel-font);
padding: 5px 10px;
box-shadow: 0 0 5px rgba(var(--crt-glow-color), 0.5);
transition: all 0.2s ease;
}
button:hover, input[type="submit"]:hover, input[type="button"]:hover {
background-color: rgba(var(--crt-terminal-green), 0.2);
box-shadow:
0 0 5px rgba(var(--crt-glow-color), 0.7),
0 0 10px rgba(var(--crt-glow-color), 0.5);
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.7);
font-family: var(--UI-font);
box-shadow: 0 0 10px rgba(var(--crt-glow-color), 0.3);
}
.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 5px rgba(var(--crt-glow-color), 0.7);
}
.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.7);
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 3px rgba(var(--crt-text-color), 0.5);
}
.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.3);
color: rgb(var(--sidebar-links-hover-text-color));
text-shadow: 0 0 5px rgba(var(--crt-glow-color), 0.7);
}
/* 表格样式 */
table {
border-collapse: collapse;
margin: 1em 0;
background-color: rgba(var(--crt-bg-color), 0.7);
border: 1px solid rgba(var(--crt-terminal-green), 0.7);
box-shadow:
0 0 5px rgba(var(--crt-glow-color), 0.3),
0 0 10px rgba(var(--crt-glow-color), 0.1);
border-radius: 3px;
}
table th {
background-color: rgba(var(--crt-terminal-green), 0.2);
color: rgb(var(--crt-terminal-green));
text-shadow: 0 0 5px rgba(var(--crt-terminal-green), 0.5);
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.3);
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.5);
border: 1px solid rgba(var(--crt-terminal-green), 0.5);
padding: 0.5em;
color: rgb(var(--crt-terminal-amber));
text-shadow: 0 0 3px rgba(var(--crt-terminal-amber), 0.5);
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
border-radius: 3px;
}
/* 引用块样式 */
blockquote {
border-left: 3px solid rgba(var(--crt-terminal-blue), 0.7);
margin: 1em 0;
padding: 0.5em 1em;
background-color: rgba(var(--crt-bg-color), 0.5);
color: rgba(var(--crt-text-color), 0.8);
box-shadow:
0 0 5px rgba(var(--crt-terminal-blue), 0.3),
0 0 10px rgba(var(--crt-terminal-blue), 0.1);
}
/* 特殊样式引用块 */
.lightstyled-quote {
background-color: rgba(var(--crt-terminal-green), 0.15);
color: rgb(var(--crt-text-color));
border-left: 0.5rem solid rgba(var(--crt-terminal-blue), 0.7);
padding: 0.1rem 1rem;
margin: 0.5rem 0 0.5rem 0.25rem;
box-shadow:
0 0 5px rgba(var(--crt-terminal-blue), 0.3),
0 0 10px rgba(var(--crt-terminal-blue), 0.1);
}
.darkstyled-quote {
background-color: rgba(var(--crt-bg-color), 0.8);
border-left: 0.5rem solid rgba(var(--crt-terminal-green), 0.7);
color: rgb(var(--crt-text-color));
padding: 0.1rem 1rem;
margin: 0.5rem 0 0.5rem 0.25rem;
box-shadow:
0 0 5px rgba(var(--crt-terminal-green), 0.3),
0 0 10px 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.7);
float: right;
border: 1px solid rgba(var(--crt-terminal-green), 0.7);
padding: 2px;
overflow: auto;
z-index: 1;
overflow-wrap: anywhere;
box-shadow:
0 0 5px rgba(var(--crt-glow-color), 0.3),
0 0 10px 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.3);
color: rgb(var(--crt-terminal-green));
text-shadow: 0 0 5px rgba(var(--crt-terminal-green), 0.5);
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 3px rgba(var(--crt-terminal-green), 0.5);
}
.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.05);
}
.infobox-footer {
text-align: center;
}
/* 特殊样式块 */
.lightblock {
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: 1px solid rgba(var(--crt-terminal-green), 0.3);
text-shadow: 0 0 3px rgba(var(--crt-text-color), 0.5);
}
.darkblock {
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: 1px solid rgba(var(--crt-terminal-green), 0.3);
text-shadow: 0 0 3px rgba(var(--crt-text-color), 0.5);
}
.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效果已加载');
});
*/
Loading comments...
