MediaWiki:Common.css:修订间差异
来自Age Of History 2 Chinese Wiki
无编辑摘要 |
无编辑摘要 |
||
第3行: | 第3行: | ||
@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=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://fonts.googleapis.com/css2?family=VT323&display=swap"); | ||
@import url("https:// | @import url("https://fastly.jsdelivr.net/gh/hoah2333/Fonts@main/Typeface-VonwaonBitmap-16px.css"); | ||
@ | |||
/* ==== 基础变量 ==== */ | /* ==== 基础变量 ==== */ | ||
:root { | :root { | ||
/* ==== 字体设置 ==== */ | /* ==== 字体设置 ==== */ | ||
--body-font: " | --body-font: "VonwaonBitmap 16px", VT323, monospace; | ||
--UI-font: " | --UI-font: "VonwaonBitmap 16px", VT323, monospace; | ||
--title-font: " | --title-font: "VonwaonBitmap 16px", "Noto Sans SC", VT323, monospace; | ||
--mono-font: " | --mono-font: "VonwaonBitmap 16px", VT323, monospace; | ||
--base-font-size: 0.95rem; | --base-font-size: 0.95rem; | ||
/* === | |||
-- | :root { | ||
-- | /* ===TYPEFACES=== */ | ||
-- | --pixel-font: 'VT323', 'Press Start 2P', 'Silkscreen', 'Share Tech Mono', monospace; | ||
-- | --body-font: var(--pixel-font), "Noto Sans SC", "Microsoft YaHei", "微软雅黑", monospace; | ||
-- | --UI-font: var(--pixel-font), "Noto Sans SC", "方体", "PingFang SC", "黑体", "Heiti SC", monospace; | ||
--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.4; | |||
/* ===CRT COLORS=== */ | |||
--crt-bg-color: 0, 10, 20; | |||
--crt-grid-color: 42, 57, 80; | |||
--crt-text-color: 176, 255, 188; | |||
--crt-glow-color: 0, 255, 60; | |||
--crt-terminal-green: 76, 255, 117; | |||
--crt-terminal-blue: 62, 164, 255; | |||
--crt-terminal-amber: 255, 190, 56; | |||
--crt-terminal-pink: 255, 109, 255; | |||
/* | /* ===STANDARD THEME COLORS=== */ | ||
-- | --white-monochrome: 220, 255, 223; | ||
-- | --black-monochrome: 10, 20, 15; | ||
--accent-color: | --bright-accent: 0, 255, 60; | ||
-- | --medium-accent: 0, 215, 80; | ||
-- | --dark-accent: 0, 165, 70; | ||
-- | |||
-- | /* ===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); | |||
/* | /* ===SIDEBAR MEASUREMENTS=== */ | ||
-- | --sidebar-internal-border-thickness: 0.125rem; | ||
} | |||
/* ===全局CRT效果=== */ | |||
@keyframes flicker { | |||
0% { opacity: 0.97; } | |||
5% { opacity: 0.95; } | |||
10% { opacity: 0.9; } | |||
15% { opacity: 0.95; } | |||
20% { opacity: 0.97; } | |||
25% { opacity: 0.95; } | |||
30% { opacity: 0.9; } | |||
35% { opacity: 0.95; } | |||
40% { opacity: 0.97; } | |||
45% { opacity: 0.95; } | |||
50% { opacity: 0.94; } | |||
55% { opacity: 0.95; } | |||
60% { opacity: 0.97; } | |||
65% { opacity: 0.95; } | |||
70% { opacity: 0.91; } | |||
75% { opacity: 0.95; } | |||
80% { opacity: 0.97; } | |||
85% { opacity: 0.95; } | |||
90% { opacity: 0.93; } | |||
95% { opacity: 0.95; } | |||
100% { opacity: 0.97; } | |||
} | |||
@keyframes scanlines { | |||
0% { transform: translateY(0); } | |||
100% { transform: translateY(3px); } | |||
} | |||
-- | |||
@keyframes noise { | |||
0%, 100% { background-position: 0 0; } | |||
10% { background-position: -5% -10%; } | |||
20% { background-position: -15% 5%; } | |||
30% { background-position: 7% -25%; } | |||
40% { background-position: 20% 25%; } | |||
50% { background-position: -25% 10%; } | |||
60% { background-position: 15% 5%; } | |||
- | 70% { background-position: 0% 15%; } | ||
-- | 80% { background-position: 25% 35%; } | ||
90% { background-position: -10% 10%; } | |||
} | |||
-- | |||
html { | |||
-- | font-size: 1em; | ||
- | line-height: var(--base-line-height); | ||
- | } | ||
html, | |||
body { | |||
margin: 0; | |||
padding: 0; | |||
background-color: rgb(var(--crt-bg-color)); | |||
color: rgb(var(--crt-text-color)); | |||
font-family: var(--body-font); | |||
letter-spacing: 0.05em; | |||
overflow-x: hidden; | |||
perspective: 1000px; | |||
position: relative; | |||
} | } | ||
/* | /* CRT屏幕效果 */ | ||
body::before { | body::before { | ||
content: ""; | content: ""; | ||
position: fixed; | position: fixed; | ||
width: | top: 0; | ||
height: | left: 0; | ||
width: 100%; | |||
height: 100%; | |||
background: | |||
linear-gradient(rgba(var(--crt-bg-color), 0.1) 50%, rgba(var(--crt-bg-color), 0.2) 50%), | |||
linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.03)); | |||
background-size: 100% 2px, 3px 100%; | |||
pointer-events: none; | pointer-events: none; | ||
z-index: 10000; | |||
animation: scanlines 0.5s linear infinite; | |||
opacity: 0.4; | opacity: 0.4; | ||
} | } | ||
/* | /* 噪点效果 */ | ||
body::after { | body::after { | ||
content: ""; | content: ""; | ||
position: fixed; | position: fixed; | ||
top: 0; | |||
left: 0; | |||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAh1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD3YishAAAALXRSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYnKCkqKywtMaffUTIAAAGDSURBVFjD7dfbcoIwFIXhFRAVDyh4Vu3Rc9vl/R+wD+IDQNO9k+ma4b8DzJeEQEIAjnx+UMwN+CDa/bKLY0TIZOevjBiRMVtgJIoRsVxgREwRfflMYBSfEdl8HiJ4F4zhuWA8HYzxTDA+FUyHCJZgpVPB5FgwFYzNBSO1YlwbzHSCcYEBHwaTXDCDCQaXghmQVlYw5JOYUNvj8YPW3gFm/PyatYBpF7/SLbDxw5tUMGrcpAXWfnijC+Z6yCfBkC93lQXGfvhT+ILJ5fuNLDAJRJhpl5+GeZVfsRJM/PCJfi2Y5F5GVjCA2V+C4QO8GgzuBTO8FgxyL5jdW0CY6etgqOkF88i8YNa9YBKIRd8xJ39wRCKYeEB+Ee6CAffIbDCF5wHA4YJhnkHEYMhnMRmMz/kY/Q5GR4Ix6W9gRDAuGCMYEYwLxgQjgtkcGXWEIZ/FaGJE8pDNYjwyCgkzjlG/4LE/bWZa44aRCLxQB5cWX6rDHnspZOKUbpHJE3rMH1eH7NxUJOWUAAAAAElFTkSuQmCC"); | |||
background-size: 300px 300px; | |||
pointer-events: none; | pointer-events: none; | ||
opacity: 0.02; | |||
z-index: 10001; | |||
animation: noise 0.2s steps(1) infinite; | |||
z-index: | |||
} | } | ||
/* CRT屏幕弯曲效果 */ | |||
#mw-content-text { | |||
position: relative; | |||
border-radius: 15px; | |||
overflow: hidden; | |||
box-shadow: | |||
0 0 10px rgba(var(--crt-glow-color), 0.2), | |||
0 0 20px rgba(var(--crt-glow-color), 0.1), | |||
0 0 30px rgba(var(--crt-glow-color), 0.05), | |||
inset 0 0 15px rgba(var(--crt-glow-color), 0.1); | |||
animation: flicker 8s infinite linear; | |||
background: linear-gradient( | |||
to bottom, | |||
rgba(var(--crt-bg-color), 0.7) 0%, | |||
rgba(var(--crt-bg-color), 0.3) 50%, | |||
rgba(var(--crt-bg-color), 0.7) 100% | |||
); | |||
transform-style: preserve-3d; | |||
} | } | ||
#mw-content-text::before { | |||
content: ""; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
bottom: 0; | |||
background: | |||
repeating-linear-gradient( | |||
0deg, | |||
rgba(var(--crt-grid-color), 0.07) 0, | |||
rgba(var(--crt-grid-color), 0.07) 1px, | |||
rgba(var(--crt-grid-color), 0) 1px, | |||
rgba(var(--crt-grid-color), 0) 2px | |||
), | |||
repeating-linear-gradient( | |||
90deg, | |||
rgba(var(--crt-grid-color), 0.07) 0, | |||
rgba(var(--crt-grid-color), 0.07) 1px, | |||
rgba(var(--crt-grid-color), 0) 1px, | |||
rgba(var(--crt-grid-color), 0) 2px | |||
); | |||
background-size: 2px 2px; | |||
pointer-events: none; | |||
z-index: 1; | |||
} | } | ||
/* | /* CRT文字发光效果 */ | ||
h1, h2, h3, h4, h5, h6, .mw-headline, .side-block .heading p { | |||
font-family: var(--title-font); | |||
color: rgb(var(--crt-terminal-green)); | |||
text-shadow: | |||
0 0 5px rgba(var(--crt-glow-color), 0.7), | |||
0 0 10px rgba(var(--crt-glow-color), 0.5), | |||
0 0 15px rgba(var(--crt-glow-color), 0.3), | |||
0 0 20px rgba(var(--crt-glow-color), 0.2); | |||
letter-spacing: 0.1em; | |||
font-weight: normal; | |||
} | } | ||
/* | /* 链接样式 */ | ||
a { | |||
color: rgb(var(--crt-terminal-blue)); | |||
text-decoration: none; | |||
position: relative; | |||
transition: all 0.2s ease; | |||
text-shadow: 0 0 5px 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), | |||
0 0 10px rgba(var(--crt-terminal-amber), 0.5); | |||
} | } | ||
a:active, a:focus { | |||
color: rgb(var(--crt-terminal-pink)); | |||
text-shadow: | |||
0 0 5px rgba(var(--crt-terminal-pink), 0.7), | |||
0 0 10px rgba(var(--crt-terminal-pink), 0.5); | |||
} | } | ||
a.new { | |||
color: rgb(var(--crt-terminal-pink)); | |||
text-shadow: 0 0 5px rgba(var(--crt-terminal-pink), 0.5); | |||
} | } | ||
/* 按钮和输入框样式 */ | |||
input, button, select, textarea { | |||
font-family: var(--pixel-font); | |||
background-color: rgba(var(--crt-bg-color), 0.8); | |||
color: rgb(var(--crt-text-color)); | |||
border: 1px solid rgb(var(--crt-terminal-green)); | |||
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; | |||
} | } | ||
/* 侧边栏样式 - 保留兼容原有布局 */ | |||
color: var(-- | .side-block { | ||
text- | --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; | |||
color: var(-- | 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.5); | |||
background: rgb(var(--sideblock-bg-color)); | |||
font-family: var(--UI-font); | |||
direction: ltr; | |||
border-radius: 5px; | |||
box-shadow: | |||
0 0 5px rgba(var(--crt-glow-color), 0.3), | |||
0 0 10px rgba(var(--crt-glow-color), 0.1); | |||
} | } | ||
.side-block .heading { | |||
color: | 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.5); | |||
box-shadow: 0 2px 0 0 rgba(var(--sideblock-heading-border-color), 0.7); | |||
padding: 5px 0; | |||
} | } | ||
.side-block .heading p { | |||
color: | margin: 0; | ||
color: rgb(var(--sideblock-heading-text-color)); | |||
font-family: var(--title-font); | |||
font-size: calc((var(--base-font-size) * (14 / 15)) * 1.1); | |||
letter-spacing: 0.05em; | |||
line-height: 1.15; | |||
text-indent: 0.25rem; | |||
text-transform: uppercase; | |||
cursor: pointer; | |||
} | } | ||
.side-block div.menu-item { | |||
. | display: flex; | ||
. | flex-flow: row wrap; | ||
align-items: center; | |||
justify-content: flex-start; | |||
height: 1.7rem; | |||
min-height: 1.7rem; | |||
margin: 0; | |||
padding: 0; | |||
box-shadow: inset 0 calc(var(--sidebar-internal-border-thickness) * -1) 0 0 rgba(var(--sidebar-border-color), 0.3); | |||
font-size: 0; | |||
transition: background-color 0.2s ease; | |||
box-shadow: var(-- | |||
transition: background-color 0.2s; | |||
} | } | ||
. | .side-block div.menu-item:hover { | ||
. | background-color: rgba(var(--crt-terminal-green), 0.1); | ||
background: | |||
} | } | ||
. | .side-block div.menu-item a { | ||
. | position: relative; | ||
z-index: 2; | |||
overflow: hidden; | |||
} | } | ||
.side-block div.menu-item a { | |||
display: flex; | |||
flex-grow: 2; | |||
justify-content: flex-start; | |||
height: 1.7em; | |||
margin: | margin: 0; | ||
color: var(-- | padding: 0 0.8em; | ||
transition: all 0.2s ease; | |||
background-clip: padding-box; | |||
background-color: transparent; | |||
color: rgb(var(--sidebar-links-text)); | |||
font-size: calc(var(--base-font-size) * (14 / 15)); | |||
letter-spacing: 0.05em; | |||
line-height: 1.7; | |||
text-decoration: none; | |||
} | } | ||
.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.15); | |||
color: rgb(var(--crt-terminal-amber)); | |||
text-shadow: | |||
0 0 5px rgba(var(--crt-terminal-amber), 0.7), | |||
0 0 10px rgba(var(--crt-terminal-amber), 0.3); | |||
text-decoration: none; | |||
} | } | ||
.side-block div.menu-item a::before { | |||
--clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); | |||
content: " "; | |||
position: absolute; | |||
z-index: -1; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
transition: all 0.3s ease; | |||
opacity: 0; | |||
background-color: rgba(var(--sidebar-links-hover-bg-color), 0.3); | |||
pointer-events: none; | |||
clip-path: var(--clip-path); | |||
} | } | ||
.side-block div.menu-item a:hover::before, | |||
.side-block div.menu-item a:active::before, | |||
.side-block div.menu-item a:focus-within::before { | |||
--clip-path: polygon(-15% 0, 115% 0, 100% 100%, 0 100%); | |||
opacity: 1; | |||
} | } | ||
/* | /* Infobox样式 */ | ||
.notaninfobox { | |||
position: relative; | |||
clear: right; | |||
margin: 1em | margin: 0 0 1em 1em; | ||
background-color: var(-- | width: 350px; | ||
border: 1px solid var(--border-color); | 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; | |||
border-radius: 5px; | |||
box-shadow: | |||
0 0 5px rgba(var(--crt-glow-color), 0.5), | |||
0 0 10px rgba(var(--crt-glow-color), 0.2), | |||
inset 0 0 5px rgba(var(--crt-glow-color), 0.2); | |||
} | } | ||
.notaninfobox::before { | |||
background: linear-gradient( | content: ''; | ||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
bottom: 0; | |||
background: | |||
repeating-linear-gradient( | |||
0deg, | |||
rgba(var(--crt-grid-color), 0.05) 0, | |||
rgba(var(--crt-grid-color), 0.05) 1px, | |||
rgba(var(--crt-grid-color), 0) 1px, | |||
rgba(var(--crt-grid-color), 0) 2px | |||
), | |||
repeating-linear-gradient( | |||
90deg, | |||
rgba(var(--crt-grid-color), 0.05) 0, | |||
rgba(var(--crt-grid-color), 0.05) 1px, | |||
rgba(var(--crt-grid-color), 0) 1px, | |||
rgba(var(--crt-grid-color), 0) 2px | |||
); | |||
background-size: 2px 2px; | |||
pointer-events: none; | |||
border-radius: 4px; | |||
z-index: -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; | |||
border-radius: 0; | |||
} | |||
} | } | ||
.notaninfobox > .infobox-title { | |||
background-color: rgba( | font-family: var(--pixel-font); | ||
font-weight: normal; | |||
text-align: center; | |||
font-size: 120%; | |||
background-color: rgba(var(--crt-terminal-blue), 0.2); | |||
color: rgb(var(--crt-terminal-blue)); | |||
text-shadow: | |||
0 0 5px rgba(var(--crt-terminal-blue), 0.7), | |||
0 0 10px rgba(var(--crt-terminal-blue), 0.3); | |||
padding: 5px; | |||
border-bottom: 1px solid rgba(var(--crt-terminal-blue), 0.5); | |||
} | } | ||
.infobox-imagearea { | |||
. | text-align: center; | ||
padding: 8px 4px; | |||
} | } | ||
. | .infobox-imagearea > div:not(:first-child) { | ||
padding-top: 1em; | |||
padding | |||
} | } | ||
. | .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: 6px; | |||
} | } | ||
.notaninfobox .infobox-row .infobox-row-label { | |||
font-weight: normal; | |||
display: flex; | |||
align-items: center; | |||
color: rgb(var(--crt-terminal-amber)); | |||
text-shadow: 0 0 5px rgba(var(--crt-terminal-amber), 0.5); | |||
letter-spacing: 0.05em; | |||
} | } | ||
.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-bg-color), 0.3); | |||
background-color: | |||
} | } | ||
.infobox-footer { | |||
text-align: center; | |||
font-style: italic; | |||
padding: 5px; | |||
color: rgba(var(--crt-text-color), 0.8); | |||
} | } | ||
/* | /* 表格样式 */ | ||
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); | |||
margin: | 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; | |||
border: 1px solid rgba(var(--crt-terminal-green), 0.5); | |||
} | } | ||
table td { | |||
padding: 6px 8px; | |||
border: 1px solid rgba(var(--crt-terminal-green), 0.3); | |||
transition: background-color 0.2s ease; | |||
} | } | ||
table tr:nth-child(odd) td { | |||
background-color: rgba(var(--crt-bg-color), 0.5); | |||
} | } | ||
table tr:hover td { | |||
background-color: rgba(var(--crt-terminal-green), 0.1); | |||
background-color: | |||
} | } | ||
. | /* Navbox样式 */ | ||
table.navbox { | |||
border: 1px solid rgba(var(--crt-terminal-blue), 0.5); | |||
padding: | clear: both; | ||
margin: 1em auto; | |||
padding: 1px; | |||
text-align: center; | text-align: center; | ||
width: 100%; | |||
background-color: rgba(var(--crt-bg-color), 0.7); | |||
} | } | ||
. | table.navbox + table.navbox { | ||
margin-top: -1px; | |||
} | } | ||
. | .navbox-title, | ||
.navbox-abovebelow, | |||
table.navbox th { | |||
padding: 0.5em 1em; | |||
text-align: center; | |||
background-color: rgba(var(--crt-terminal-blue), 0.2); | |||
color: rgb(var(--crt-terminal-blue)); | |||
text-shadow: 0 0 5px rgba(var(--crt-terminal-blue), 0.5); | |||
font-family: var(--pixel-font); | |||
letter-spacing: 0.05em; | |||
} | } | ||
. | .navbox-group { | ||
font-weight: normal; | |||
white-space: nowrap; | |||
color: rgb(var(--crt-terminal-amber)); | |||
background-color: rgba( | text-shadow: 0 0 5px rgba(var(--crt-terminal-amber), 0.5); | ||
background-color: rgba(var(--crt-terminal-amber), 0.1); | |||
padding: 0.5em; | |||
font-family: var(--pixel-font); | |||
letter-spacing: 0.05em; | |||
} | } | ||
. | .navbox-even { | ||
background-color: rgba(var(--crt-bg-color), 0.5); | |||
} | } | ||
.navbox-odd { | |||
. | background-color: rgba(var(--crt-bg-color), 0.7); | ||
} | } | ||
. | /* 模块盒子样式 */ | ||
background-color: var(-- | .modulebox { | ||
border- | border: 1px solid rgba(var(--crt-terminal-pink), 0.5); | ||
padding: 15px; | |||
margin: 15px 0; | |||
background-color: rgba(var(--crt-bg-color), 0.7); | |||
border-radius: 5px; | |||
box-shadow: | |||
0 0 5px rgba(var(--crt-terminal-pink), 0.3), | |||
0 0 10px rgba(var(--crt-terminal-pink), 0.1); | |||
position: relative; | |||
overflow: hidden; | |||
} | } | ||
. | .modulebox::before { | ||
background- | content: ''; | ||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
bottom: 0; | |||
background: | |||
repeating-linear-gradient( | |||
45deg, | |||
rgba(var(--crt-terminal-pink), 0.05) 0, | |||
rgba(var(--crt-terminal-pink), 0.05) 10px, | |||
rgba(var(--crt-terminal-pink), 0) 10px, | |||
rgba(var(--crt-terminal-pink), 0) 20px | |||
); | |||
pointer-events: none; | |||
z-index: 0; | |||
} | } | ||
. | /* 特殊效果 - 黑幕效果 */ | ||
.heimu, | |||
.heimu rt { | |||
--heimu-color: 20, 30, 25; | |||
--heimu-text-color: var(--crt-text-color); | |||
--heimu-link-color: var(--crt-terminal-blue); | |||
--heimu-visited-link-color: var(--crt-terminal-blue); | |||
--heimu-new-link-color: var(--crt-terminal-pink); | |||
--heimu-new-visited-link-color: var(--crt-terminal-pink); | |||
--heimu-extiw-visited-link-color: var(--crt-terminal-blue); | |||
background-color: rgb(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.2s linear; | |||
color: rgb(var(--heimu-color)); | |||
text-shadow: none; | |||
} | } | ||
span.heimu:hover, | |||
. | span.heimu:active { | ||
color: rgb(var(--heimu-text-color)); | |||
} | } | ||
. | span.heimu:hover a, | ||
a:hover span.heimu { | |||
color: rgb(var(--heimu-link-color)); | |||
text-shadow: 0 0 5px rgba(var(--heimu-link-color), 0.5); | |||
} | } | ||
. | span.heimu:hover a:visited, | ||
a:visited:hover span.heimu { | |||
color: rgb(var(--heimu-visited-link-color)); | |||
text-shadow: 0 0 5px rgba(var(--heimu-visited-link-color), 0.5); | |||
} | } | ||
span.heimu:hover a.new, | |||
. | a.new:hover span.heimu { | ||
color: rgb(var(--heimu-new-link-color)); | |||
text-shadow: 0 0 5px rgba(var(--heimu-new-link-color), 0.5); | |||
} | } | ||
/* | /* 彩幕效果 */ | ||
. | .colormu-drk { | ||
color: rgb(var(--crt-text-color)); | |||
} | } | ||
. | .colormu-bri { | ||
color: rgb(var(--black-monochrome)); | |||
} | } | ||
. | .colormu-drk:not(.colormu_toggle_on) a { | ||
color: rgb(var(--crt-terminal-blue)); | |||
} | } | ||
. | .colormu-drk:not(.colormu_toggle_on) a.new { | ||
color: rgb(var(--crt-terminal-pink)); | |||
} | } | ||
. | /* 特殊元素样式 */ | ||
pre, code, .mw-code, .pn, .mw-highlight { | |||
border: 1px solid var(-- | font-family: var(--pixel-font); | ||
border- | 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)); | |||
white-space: pre-wrap; | |||
word-break: break-all; | |||
overflow-x: auto; | |||
border-radius: 3px; | |||
box-shadow: inset 0 0 5px rgba(var(--crt-bg-color), 0.8); | |||
text-shadow: 0 0 3px rgba(var(--crt-terminal-amber), 0.5); | |||
} | } | ||
code { | |||
padding: 0.1em 0.3em; | |||
} | } | ||
blockquote { | |||
border-left: 3px solid rgba(var(--crt-terminal-amber), 0.7); | |||
padding-left: 1em; | |||
margin-left: 0.5em; | |||
color: rgba(var(--crt-text-color), 0.9); | |||
color: var(-- | font-style: italic; | ||
} | } | ||
hr { | |||
border: none; | |||
height: 1px; | |||
background: linear-gradient( | |||
to right, | |||
rgba(var(--crt-terminal-green), 0), | |||
rgba(var(--crt-terminal-green), 0.7) 50%, | |||
rgba(var(--crt-terminal-green), 0) | |||
); | |||
margin: 1.5em 0; | |||
} | } | ||
/* | /* 列表样式 */ | ||
ul { | |||
list-style-type: none; | |||
padding-left: 1.5em; | |||
} | } | ||
ul li::before { | |||
content: '> '; | |||
color: rgb(var(--crt-terminal-green)); | |||
width: | font-weight: bold; | ||
display: inline-block; | |||
width: 1em; | |||
margin-left: -1em; | |||
} | } | ||
ol { | |||
padding-left: 1.5em; | |||
} | } | ||
ol li::marker { | |||
color: rgb(var(--crt-terminal-green)); | |||
font-family: var(--pixel-font); | |||
} | } | ||
/* 图片和媒体处理 */ | |||
img, video, audio { | |||
max-width: 100%; | |||
height: auto; | |||
border-radius: 3px; | |||
transition: all 0.3s ease; | |||
} | } | ||
img:hover, video:hover { | |||
box-shadow: | |||
0 0 5px rgba(var(--crt-glow-color), 0.7), | |||
0 0 10px rgba(var(--crt-glow-color), 0.5); | |||
} | } | ||
. | .thumbinner { | ||
border: 1px solid rgba(var(--crt-terminal-green), 0.5); | |||
padding: 8px; | |||
background-color: rgba(var(--crt-bg-color), 0.7); | |||
border-radius: 3px; | |||
box-shadow: 0 0 5px rgba(var(--crt-glow-color), 0.3); | |||
} | } | ||
. | .thumbcaption { | ||
padding: | padding-top: 5px; | ||
font-size: 90%; | |||
text-align: center; | |||
color: rgba(var(--crt-text-color), 0.9); | |||
} | } | ||
/* | /* Tabber适配 */ | ||
. | .tabber .tabbertab { | ||
background-color: rgba(var(--crt-bg-color), 0.7) !important; | |||
border: 1px solid rgba(var(--crt-terminal-blue), 0.5) !important; | |||
padding: | border-top: none !important; | ||
padding: 10px !important; | |||
border-bottom-left-radius: 3px; | |||
border-bottom-right-radius: 3px; | |||
} | } | ||
. | ul.tabbernav { | ||
border-bottom: 1px solid rgba(var(--crt-terminal-blue), 0.5) !important; | |||
padding-left: 0 !important; | |||
margin-left: 0 !important; | |||
padding: 0 | |||
} | } | ||
ul.tabbernav li { | |||
margin-right: 5px !important; | |||
} | } | ||
:: | ul.tabbernav li::before { | ||
content: none !important; | |||
} | } | ||
::- | ul.tabbernav li a { | ||
background-color: rgba(var(--crt-bg-color), 0.5) !important; | |||
border: | border: 1px solid rgba(var(--crt-terminal-blue), 0.5) !important; | ||
border-radius: | padding: 3px 8px !important; | ||
border-bottom: none !important; | |||
border-top-left-radius: 3px; | |||
border-top-right-radius: 3px; | |||
color: rgb(var(--crt-terminal-blue)) !important; | |||
transition: all 0.2s ease; | |||
} | } | ||
ul.tabbernav li a:hover { | |||
background: | background-color: rgba(var(--crt-terminal-blue), 0.2) !important; | ||
} | } | ||
::- | ul.tabbernav li.tabberactive a { | ||
background-color: rgba(var(--crt-terminal-blue), 0.2) !important; | |||
color: rgb(var(--crt-text-color)) !important; | |||
font-weight: normal !important; | |||
text-shadow: 0 0 5px rgba(var(--crt-text-color), 0.5); | |||
} | } | ||
/* | /* 文件卡片 */ | ||
. | .fileCardBound { | ||
border: 1px solid rgba(var(--crt-terminal-blue), 0.5); | |||
background-color: rgba(var(--crt-bg-color), 0.7); | |||
border- | border-radius: 3px; | ||
box-shadow: | |||
0 0 5px rgba(var(--crt-terminal-blue), 0.3), | |||
0 0 10px rgba(var(--crt-terminal-blue), 0.1); | |||
overflow: hidden; | |||
} | } | ||
. | /* 编辑器和工具条 */ | ||
#toolbar, #editpage-copywarn, #wpSummary, .mw-summary-preview { | |||
background-color: rgba(var(--crt-bg-color), 0.7) !important; | |||
background-color: | color: rgb(var(--crt-text-color)) !important; | ||
color: var(--text-color) | border: 1px solid rgba(var(--crt-terminal-green), 0.5) !important; | ||
border-radius: 3px; | |||
border: 1px solid var(-- | |||
border-radius: | |||
} | } | ||
. | #wpTextbox1 { | ||
background-color: rgba(var(--crt-bg-color), 0.9) !important; | |||
color: rgb(var(--crt-text-color)) !important; | |||
border: 1px solid rgba(var(--crt-terminal-green), 0.7) !important; | |||
font-family: var(--pixel-font) !important; | |||
line-height: 1.5; | |||
padding: 10px; | |||
box-shadow: | |||
inset 0 0 10px rgba(var(--crt-bg-color), 1), | |||
0 0 5px rgba(var(--crt-glow-color), 0.3); | |||
} | } | ||
/* | /* 打印样式覆盖 */ | ||
@media | @media print { | ||
body::before, | |||
body::after, | |||
#mw-content-text::before { | |||
display: none !important; | |||
} | } | ||
body { | |||
background-color: white !important; | |||
color: black !important; | |||
text-shadow: none !important; | |||
} | } | ||
a, a:link, a:visited { | |||
color: #0645ad !important; | |||
text-shadow: none !important; | |||
-- | text-decoration: underline !important; | ||
} | } | ||
h1, h2, h3, h4, h5, h6, .mw-headline { | |||
color: black !important; | |||
text-shadow: none !important; | |||
} | } | ||
.notaninfobox, table { | |||
background: none; | background-color: white !important; | ||
box-shadow: none !important; | |||
border: 1px solid #aaa !important; | |||
} | } | ||
table th { | |||
background-color: #f8f9fa !important; | |||
color: black !important; | |||
text-shadow: none !important; | |||
} | } | ||
} | } |
2025年4月12日 (六) 20:57的版本
/* 千禧年数据库风格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: 0.95rem;
:root {
/* ===TYPEFACES=== */
--pixel-font: 'VT323', 'Press Start 2P', 'Silkscreen', 'Share Tech Mono', monospace;
--body-font: var(--pixel-font), "Noto Sans SC", "Microsoft YaHei", "微软雅黑", monospace;
--UI-font: var(--pixel-font), "Noto Sans SC", "方体", "PingFang SC", "黑体", "Heiti SC", monospace;
--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.4;
/* ===CRT COLORS=== */
--crt-bg-color: 0, 10, 20;
--crt-grid-color: 42, 57, 80;
--crt-text-color: 176, 255, 188;
--crt-glow-color: 0, 255, 60;
--crt-terminal-green: 76, 255, 117;
--crt-terminal-blue: 62, 164, 255;
--crt-terminal-amber: 255, 190, 56;
--crt-terminal-pink: 255, 109, 255;
/* ===STANDARD THEME COLORS=== */
--white-monochrome: 220, 255, 223;
--black-monochrome: 10, 20, 15;
--bright-accent: 0, 255, 60;
--medium-accent: 0, 215, 80;
--dark-accent: 0, 165, 70;
/* ===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);
/* ===SIDEBAR MEASUREMENTS=== */
--sidebar-internal-border-thickness: 0.125rem;
}
/* ===全局CRT效果=== */
@keyframes flicker {
0% { opacity: 0.97; }
5% { opacity: 0.95; }
10% { opacity: 0.9; }
15% { opacity: 0.95; }
20% { opacity: 0.97; }
25% { opacity: 0.95; }
30% { opacity: 0.9; }
35% { opacity: 0.95; }
40% { opacity: 0.97; }
45% { opacity: 0.95; }
50% { opacity: 0.94; }
55% { opacity: 0.95; }
60% { opacity: 0.97; }
65% { opacity: 0.95; }
70% { opacity: 0.91; }
75% { opacity: 0.95; }
80% { opacity: 0.97; }
85% { opacity: 0.95; }
90% { opacity: 0.93; }
95% { opacity: 0.95; }
100% { opacity: 0.97; }
}
@keyframes scanlines {
0% { transform: translateY(0); }
100% { transform: translateY(3px); }
}
@keyframes noise {
0%, 100% { background-position: 0 0; }
10% { background-position: -5% -10%; }
20% { background-position: -15% 5%; }
30% { background-position: 7% -25%; }
40% { background-position: 20% 25%; }
50% { background-position: -25% 10%; }
60% { background-position: 15% 5%; }
70% { background-position: 0% 15%; }
80% { background-position: 25% 35%; }
90% { background-position: -10% 10%; }
}
html {
font-size: 1em;
line-height: var(--base-line-height);
}
html,
body {
margin: 0;
padding: 0;
background-color: rgb(var(--crt-bg-color));
color: rgb(var(--crt-text-color));
font-family: var(--body-font);
letter-spacing: 0.05em;
overflow-x: hidden;
perspective: 1000px;
position: relative;
}
/* CRT屏幕效果 */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
linear-gradient(rgba(var(--crt-bg-color), 0.1) 50%, rgba(var(--crt-bg-color), 0.2) 50%),
linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.03));
background-size: 100% 2px, 3px 100%;
pointer-events: none;
z-index: 10000;
animation: scanlines 0.5s linear infinite;
opacity: 0.4;
}
/* 噪点效果 */
body::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAh1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD3YishAAAALXRSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYnKCkqKywtMaffUTIAAAGDSURBVFjD7dfbcoIwFIXhFRAVDyh4Vu3Rc9vl/R+wD+IDQNO9k+ma4b8DzJeEQEIAjnx+UMwN+CDa/bKLY0TIZOevjBiRMVtgJIoRsVxgREwRfflMYBSfEdl8HiJ4F4zhuWA8HYzxTDA+FUyHCJZgpVPB5FgwFYzNBSO1YlwbzHSCcYEBHwaTXDCDCQaXghmQVlYw5JOYUNvj8YPW3gFm/PyatYBpF7/SLbDxw5tUMGrcpAXWfnijC+Z6yCfBkC93lQXGfvhT+ILJ5fuNLDAJRJhpl5+GeZVfsRJM/PCJfi2Y5F5GVjCA2V+C4QO8GgzuBTO8FgxyL5jdW0CY6etgqOkF88i8YNa9YBKIRd8xJ39wRCKYeEB+Ee6CAffIbDCF5wHA4YJhnkHEYMhnMRmMz/kY/Q5GR4Ix6W9gRDAuGCMYEYwLxgQjgtkcGXWEIZ/FaGJE8pDNYjwyCgkzjlG/4LE/bWZa44aRCLxQB5cWX6rDHnspZOKUbpHJE3rMH1eH7NxUJOWUAAAAAElFTkSuQmCC");
background-size: 300px 300px;
pointer-events: none;
opacity: 0.02;
z-index: 10001;
animation: noise 0.2s steps(1) infinite;
}
/* CRT屏幕弯曲效果 */
#mw-content-text {
position: relative;
border-radius: 15px;
overflow: hidden;
box-shadow:
0 0 10px rgba(var(--crt-glow-color), 0.2),
0 0 20px rgba(var(--crt-glow-color), 0.1),
0 0 30px rgba(var(--crt-glow-color), 0.05),
inset 0 0 15px rgba(var(--crt-glow-color), 0.1);
animation: flicker 8s infinite linear;
background: linear-gradient(
to bottom,
rgba(var(--crt-bg-color), 0.7) 0%,
rgba(var(--crt-bg-color), 0.3) 50%,
rgba(var(--crt-bg-color), 0.7) 100%
);
transform-style: preserve-3d;
}
#mw-content-text::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
repeating-linear-gradient(
0deg,
rgba(var(--crt-grid-color), 0.07) 0,
rgba(var(--crt-grid-color), 0.07) 1px,
rgba(var(--crt-grid-color), 0) 1px,
rgba(var(--crt-grid-color), 0) 2px
),
repeating-linear-gradient(
90deg,
rgba(var(--crt-grid-color), 0.07) 0,
rgba(var(--crt-grid-color), 0.07) 1px,
rgba(var(--crt-grid-color), 0) 1px,
rgba(var(--crt-grid-color), 0) 2px
);
background-size: 2px 2px;
pointer-events: none;
z-index: 1;
}
/* CRT文字发光效果 */
h1, h2, h3, h4, h5, h6, .mw-headline, .side-block .heading p {
font-family: var(--title-font);
color: rgb(var(--crt-terminal-green));
text-shadow:
0 0 5px rgba(var(--crt-glow-color), 0.7),
0 0 10px rgba(var(--crt-glow-color), 0.5),
0 0 15px rgba(var(--crt-glow-color), 0.3),
0 0 20px rgba(var(--crt-glow-color), 0.2);
letter-spacing: 0.1em;
font-weight: normal;
}
/* 链接样式 */
a {
color: rgb(var(--crt-terminal-blue));
text-decoration: none;
position: relative;
transition: all 0.2s ease;
text-shadow: 0 0 5px 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),
0 0 10px rgba(var(--crt-terminal-amber), 0.5);
}
a:active, a:focus {
color: rgb(var(--crt-terminal-pink));
text-shadow:
0 0 5px rgba(var(--crt-terminal-pink), 0.7),
0 0 10px rgba(var(--crt-terminal-pink), 0.5);
}
a.new {
color: rgb(var(--crt-terminal-pink));
text-shadow: 0 0 5px rgba(var(--crt-terminal-pink), 0.5);
}
/* 按钮和输入框样式 */
input, button, select, textarea {
font-family: var(--pixel-font);
background-color: rgba(var(--crt-bg-color), 0.8);
color: rgb(var(--crt-text-color));
border: 1px solid rgb(var(--crt-terminal-green));
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.5);
background: rgb(var(--sideblock-bg-color));
font-family: var(--UI-font);
direction: ltr;
border-radius: 5px;
box-shadow:
0 0 5px rgba(var(--crt-glow-color), 0.3),
0 0 10px rgba(var(--crt-glow-color), 0.1);
}
.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.5);
box-shadow: 0 2px 0 0 rgba(var(--sideblock-heading-border-color), 0.7);
padding: 5px 0;
}
.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)) * 1.1);
letter-spacing: 0.05em;
line-height: 1.15;
text-indent: 0.25rem;
text-transform: uppercase;
cursor: pointer;
}
.side-block div.menu-item {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: flex-start;
height: 1.7rem;
min-height: 1.7rem;
margin: 0;
padding: 0;
box-shadow: inset 0 calc(var(--sidebar-internal-border-thickness) * -1) 0 0 rgba(var(--sidebar-border-color), 0.3);
font-size: 0;
transition: background-color 0.2s ease;
}
.side-block div.menu-item:hover {
background-color: rgba(var(--crt-terminal-green), 0.1);
}
.side-block div.menu-item a {
position: relative;
z-index: 2;
overflow: hidden;
}
.side-block div.menu-item a {
display: flex;
flex-grow: 2;
justify-content: flex-start;
height: 1.7em;
margin: 0;
padding: 0 0.8em;
transition: all 0.2s ease;
background-clip: padding-box;
background-color: transparent;
color: rgb(var(--sidebar-links-text));
font-size: calc(var(--base-font-size) * (14 / 15));
letter-spacing: 0.05em;
line-height: 1.7;
text-decoration: none;
}
.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.15);
color: rgb(var(--crt-terminal-amber));
text-shadow:
0 0 5px rgba(var(--crt-terminal-amber), 0.7),
0 0 10px rgba(var(--crt-terminal-amber), 0.3);
text-decoration: none;
}
.side-block div.menu-item a::before {
--clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
content: " ";
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 0.3s ease;
opacity: 0;
background-color: rgba(var(--sidebar-links-hover-bg-color), 0.3);
pointer-events: none;
clip-path: var(--clip-path);
}
.side-block div.menu-item a:hover::before,
.side-block div.menu-item a:active::before,
.side-block div.menu-item a:focus-within::before {
--clip-path: polygon(-15% 0, 115% 0, 100% 100%, 0 100%);
opacity: 1;
}
/* Infobox样式 */
.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;
border-radius: 5px;
box-shadow:
0 0 5px rgba(var(--crt-glow-color), 0.5),
0 0 10px rgba(var(--crt-glow-color), 0.2),
inset 0 0 5px rgba(var(--crt-glow-color), 0.2);
}
.notaninfobox::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
repeating-linear-gradient(
0deg,
rgba(var(--crt-grid-color), 0.05) 0,
rgba(var(--crt-grid-color), 0.05) 1px,
rgba(var(--crt-grid-color), 0) 1px,
rgba(var(--crt-grid-color), 0) 2px
),
repeating-linear-gradient(
90deg,
rgba(var(--crt-grid-color), 0.05) 0,
rgba(var(--crt-grid-color), 0.05) 1px,
rgba(var(--crt-grid-color), 0) 1px,
rgba(var(--crt-grid-color), 0) 2px
);
background-size: 2px 2px;
pointer-events: none;
border-radius: 4px;
z-index: -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;
border-radius: 0;
}
}
.notaninfobox > .infobox-title {
font-family: var(--pixel-font);
font-weight: normal;
text-align: center;
font-size: 120%;
background-color: rgba(var(--crt-terminal-blue), 0.2);
color: rgb(var(--crt-terminal-blue));
text-shadow:
0 0 5px rgba(var(--crt-terminal-blue), 0.7),
0 0 10px rgba(var(--crt-terminal-blue), 0.3);
padding: 5px;
border-bottom: 1px solid rgba(var(--crt-terminal-blue), 0.5);
}
.infobox-imagearea {
text-align: center;
padding: 8px 4px;
}
.infobox-imagearea > div:not(:first-child) {
padding-top: 1em;
}
.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: 6px;
}
.notaninfobox .infobox-row .infobox-row-label {
font-weight: normal;
display: flex;
align-items: center;
color: rgb(var(--crt-terminal-amber));
text-shadow: 0 0 5px rgba(var(--crt-terminal-amber), 0.5);
letter-spacing: 0.05em;
}
.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-bg-color), 0.3);
}
.infobox-footer {
text-align: center;
font-style: italic;
padding: 5px;
color: rgba(var(--crt-text-color), 0.8);
}
/* 表格样式 */
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;
border: 1px solid rgba(var(--crt-terminal-green), 0.5);
}
table td {
padding: 6px 8px;
border: 1px solid rgba(var(--crt-terminal-green), 0.3);
transition: background-color 0.2s ease;
}
table tr:nth-child(odd) td {
background-color: rgba(var(--crt-bg-color), 0.5);
}
table tr:hover td {
background-color: rgba(var(--crt-terminal-green), 0.1);
}
/* Navbox样式 */
table.navbox {
border: 1px solid rgba(var(--crt-terminal-blue), 0.5);
clear: both;
margin: 1em auto;
padding: 1px;
text-align: center;
width: 100%;
background-color: rgba(var(--crt-bg-color), 0.7);
}
table.navbox + table.navbox {
margin-top: -1px;
}
.navbox-title,
.navbox-abovebelow,
table.navbox th {
padding: 0.5em 1em;
text-align: center;
background-color: rgba(var(--crt-terminal-blue), 0.2);
color: rgb(var(--crt-terminal-blue));
text-shadow: 0 0 5px rgba(var(--crt-terminal-blue), 0.5);
font-family: var(--pixel-font);
letter-spacing: 0.05em;
}
.navbox-group {
font-weight: normal;
white-space: nowrap;
color: rgb(var(--crt-terminal-amber));
text-shadow: 0 0 5px rgba(var(--crt-terminal-amber), 0.5);
background-color: rgba(var(--crt-terminal-amber), 0.1);
padding: 0.5em;
font-family: var(--pixel-font);
letter-spacing: 0.05em;
}
.navbox-even {
background-color: rgba(var(--crt-bg-color), 0.5);
}
.navbox-odd {
background-color: rgba(var(--crt-bg-color), 0.7);
}
/* 模块盒子样式 */
.modulebox {
border: 1px solid rgba(var(--crt-terminal-pink), 0.5);
padding: 15px;
margin: 15px 0;
background-color: rgba(var(--crt-bg-color), 0.7);
border-radius: 5px;
box-shadow:
0 0 5px rgba(var(--crt-terminal-pink), 0.3),
0 0 10px rgba(var(--crt-terminal-pink), 0.1);
position: relative;
overflow: hidden;
}
.modulebox::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
repeating-linear-gradient(
45deg,
rgba(var(--crt-terminal-pink), 0.05) 0,
rgba(var(--crt-terminal-pink), 0.05) 10px,
rgba(var(--crt-terminal-pink), 0) 10px,
rgba(var(--crt-terminal-pink), 0) 20px
);
pointer-events: none;
z-index: 0;
}
/* 特殊效果 - 黑幕效果 */
.heimu,
.heimu rt {
--heimu-color: 20, 30, 25;
--heimu-text-color: var(--crt-text-color);
--heimu-link-color: var(--crt-terminal-blue);
--heimu-visited-link-color: var(--crt-terminal-blue);
--heimu-new-link-color: var(--crt-terminal-pink);
--heimu-new-visited-link-color: var(--crt-terminal-pink);
--heimu-extiw-visited-link-color: var(--crt-terminal-blue);
background-color: rgb(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.2s linear;
color: rgb(var(--heimu-color));
text-shadow: none;
}
span.heimu:hover,
span.heimu:active {
color: rgb(var(--heimu-text-color));
}
span.heimu:hover a,
a:hover span.heimu {
color: rgb(var(--heimu-link-color));
text-shadow: 0 0 5px rgba(var(--heimu-link-color), 0.5);
}
span.heimu:hover a:visited,
a:visited:hover span.heimu {
color: rgb(var(--heimu-visited-link-color));
text-shadow: 0 0 5px rgba(var(--heimu-visited-link-color), 0.5);
}
span.heimu:hover a.new,
a.new:hover span.heimu {
color: rgb(var(--heimu-new-link-color));
text-shadow: 0 0 5px rgba(var(--heimu-new-link-color), 0.5);
}
/* 彩幕效果 */
.colormu-drk {
color: rgb(var(--crt-text-color));
}
.colormu-bri {
color: rgb(var(--black-monochrome));
}
.colormu-drk:not(.colormu_toggle_on) a {
color: rgb(var(--crt-terminal-blue));
}
.colormu-drk:not(.colormu_toggle_on) a.new {
color: rgb(var(--crt-terminal-pink));
}
/* 特殊元素样式 */
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));
white-space: pre-wrap;
word-break: break-all;
overflow-x: auto;
border-radius: 3px;
box-shadow: inset 0 0 5px rgba(var(--crt-bg-color), 0.8);
text-shadow: 0 0 3px rgba(var(--crt-terminal-amber), 0.5);
}
code {
padding: 0.1em 0.3em;
}
blockquote {
border-left: 3px solid rgba(var(--crt-terminal-amber), 0.7);
padding-left: 1em;
margin-left: 0.5em;
color: rgba(var(--crt-text-color), 0.9);
font-style: italic;
}
hr {
border: none;
height: 1px;
background: linear-gradient(
to right,
rgba(var(--crt-terminal-green), 0),
rgba(var(--crt-terminal-green), 0.7) 50%,
rgba(var(--crt-terminal-green), 0)
);
margin: 1.5em 0;
}
/* 列表样式 */
ul {
list-style-type: none;
padding-left: 1.5em;
}
ul li::before {
content: '> ';
color: rgb(var(--crt-terminal-green));
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
}
ol {
padding-left: 1.5em;
}
ol li::marker {
color: rgb(var(--crt-terminal-green));
font-family: var(--pixel-font);
}
/* 图片和媒体处理 */
img, video, audio {
max-width: 100%;
height: auto;
border-radius: 3px;
transition: all 0.3s ease;
}
img:hover, video:hover {
box-shadow:
0 0 5px rgba(var(--crt-glow-color), 0.7),
0 0 10px rgba(var(--crt-glow-color), 0.5);
}
.thumbinner {
border: 1px solid rgba(var(--crt-terminal-green), 0.5);
padding: 8px;
background-color: rgba(var(--crt-bg-color), 0.7);
border-radius: 3px;
box-shadow: 0 0 5px rgba(var(--crt-glow-color), 0.3);
}
.thumbcaption {
padding-top: 5px;
font-size: 90%;
text-align: center;
color: rgba(var(--crt-text-color), 0.9);
}
/* Tabber适配 */
.tabber .tabbertab {
background-color: rgba(var(--crt-bg-color), 0.7) !important;
border: 1px solid rgba(var(--crt-terminal-blue), 0.5) !important;
border-top: none !important;
padding: 10px !important;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
ul.tabbernav {
border-bottom: 1px solid rgba(var(--crt-terminal-blue), 0.5) !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
ul.tabbernav li {
margin-right: 5px !important;
}
ul.tabbernav li::before {
content: none !important;
}
ul.tabbernav li a {
background-color: rgba(var(--crt-bg-color), 0.5) !important;
border: 1px solid rgba(var(--crt-terminal-blue), 0.5) !important;
padding: 3px 8px !important;
border-bottom: none !important;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
color: rgb(var(--crt-terminal-blue)) !important;
transition: all 0.2s ease;
}
ul.tabbernav li a:hover {
background-color: rgba(var(--crt-terminal-blue), 0.2) !important;
}
ul.tabbernav li.tabberactive a {
background-color: rgba(var(--crt-terminal-blue), 0.2) !important;
color: rgb(var(--crt-text-color)) !important;
font-weight: normal !important;
text-shadow: 0 0 5px rgba(var(--crt-text-color), 0.5);
}
/* 文件卡片 */
.fileCardBound {
border: 1px solid rgba(var(--crt-terminal-blue), 0.5);
background-color: rgba(var(--crt-bg-color), 0.7);
border-radius: 3px;
box-shadow:
0 0 5px rgba(var(--crt-terminal-blue), 0.3),
0 0 10px rgba(var(--crt-terminal-blue), 0.1);
overflow: hidden;
}
/* 编辑器和工具条 */
#toolbar, #editpage-copywarn, #wpSummary, .mw-summary-preview {
background-color: rgba(var(--crt-bg-color), 0.7) !important;
color: rgb(var(--crt-text-color)) !important;
border: 1px solid rgba(var(--crt-terminal-green), 0.5) !important;
border-radius: 3px;
}
#wpTextbox1 {
background-color: rgba(var(--crt-bg-color), 0.9) !important;
color: rgb(var(--crt-text-color)) !important;
border: 1px solid rgba(var(--crt-terminal-green), 0.7) !important;
font-family: var(--pixel-font) !important;
line-height: 1.5;
padding: 10px;
box-shadow:
inset 0 0 10px rgba(var(--crt-bg-color), 1),
0 0 5px rgba(var(--crt-glow-color), 0.3);
}
/* 打印样式覆盖 */
@media print {
body::before,
body::after,
#mw-content-text::before {
display: none !important;
}
body {
background-color: white !important;
color: black !important;
text-shadow: none !important;
}
a, a:link, a:visited {
color: #0645ad !important;
text-shadow: none !important;
text-decoration: underline !important;
}
h1, h2, h3, h4, h5, h6, .mw-headline {
color: black !important;
text-shadow: none !important;
}
.notaninfobox, table {
background-color: white !important;
box-shadow: none !important;
border: 1px solid #aaa !important;
}
table th {
background-color: #f8f9fa !important;
color: black !important;
text-shadow: none !important;
}
}