MediaWiki:Common.css：修订间差异

2025年4月12日 (六) 19:32的版本

/* 千禧年数据库风格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://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");

/* ==== 基础变量 ==== */
:root {
    /* ==== 字体设置 ==== */
    --body-font: "IBM Plex Mono", "Roboto Mono", "Noto Sans SC", monospace;
    --UI-font: "IBM Plex Mono", "Noto Sans SC", "Microsoft YaHei", monospace;
    --title-font: "VT323", "IBM Plex Mono", "Noto Sans SC", monospace;
    --mono-font: "IBM Plex Mono", "Courier New", monospace;
    --base-font-size: 0.95rem;
    
    /* ==== 千禧年数据库浅色主题 ==== */
    --primary-bg: #f0f1f5;            /* 主背景色 - 浅灰蓝色 */
    --secondary-bg: #e2e3e7;          /* 次要背景色 */
    --header-bg: #d6dae0;             /* 标题背景色 */
    --panel-bg: #dfe5ec;              /* 面板背景色 */
    --dark-panel-bg: #cad0db;         /* 深色面板背景 */
    
    /* 主题元素颜色 */
    --primary-color: #336699;         /* 主要强调色 - 典型Windows蓝 */
    --secondary-color: #3a8eff;       /* 次要强调色 */
    --accent-color: #0055aa;          /* 重点强调色 */
    --highlight-color: #b8d8ff;       /* 高亮色 */
    --success-color: #008855;         /* 成功色 */
    --warning-color: #cc9900;         /* 警告色 */
    --error-color: #dd3333;           /* 错误色 */
    
    /* 文本颜色 */
    --text-color: #333333;            /* 主要文本色 */
    --secondary-text: #666666;        /* 次要文本色 */
    --light-text: #aaaaaa;            /* 浅色文本 */
    --link-color: #0066cc;            /* 链接色 */
    --link-hover: #0055aa;            /* 链接悬停色 */
    --visited-link: #551a8b;          /* 已访问链接色 - 经典紫色 */
    
    /* 边框和分隔线 */
    --border-color: #bbc3cd;          /* 边框色 */
    --border-light: #ccccdd;          /* 浅色边框 */
    --border-dark: #9aa2ad;           /* 深色边框 */
    
    /* 千禧年阴影效果 */
    --window-outer-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    --window-inner-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.8), inset -1px -1px 0px rgba(0, 0, 0, 0.1);
    --button-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.8), inset -1px -1px 0px rgba(0, 0, 0, 0.2);
    --inset-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1);
    
    /* 扫描线效果设置 */
    --scanline-color: rgba(0, 0, 0, 0.03);
    --scanline-size: 1px;
    --scanline-timing: 8s;
    --fade-in-delay: 0.1s;
    
    /* 图形样式元素 */
    --grid-color: rgba(0, 80, 170, 0.05);
    --grid-size: 20px;
    --pill-radius: 12px;
    --button-radius: 2px;
    
    /* MediaWiki 兼容颜色 */
    --link-color-active: #2a4b8d;
    --custom-background-blue: #d6e9ff;
    --custom-background-cyan: #d6f5ff;
    --custom-background-green: #d5f5e3;
    --custom-background-gray: #eeeeee;
    --custom-background-grey: var(--custom-background-gray);
    --custom-background-magenta: #ffd6f5;
    --custom-background-orange: #fff0d6;
    --custom-background-purple: #e9d6ff;
    --custom-background-red: #ffd6d6;
    --custom-background-yellow: #fffbd6;
    --custom-border-blue: #336699;
    --custom-border-cyan: #56c2e6;
    --custom-border-green: #55aa77;
    --custom-border-gray: #bbbbbb;
    --custom-border-grey: var(--custom-border-gray);
    --custom-border-magenta: #e655aa;
    --custom-border-orange: #ffaa22;
    --custom-border-purple: #9966cc;
    --custom-border-red: #dd5555;
    --custom-border-yellow: #ddcc55;
}

/* ==== 全局扫描线效果 ==== */
body::before {
    content: "";
    position: fixed;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    background: repeating-linear-gradient(
        180deg,
        rgba(0,0,0,0), 
        rgba(0,0,0,0) calc(var(--scanline-size) - 0.5px),
        var(--scanline-color) var(--scanline-size)
    );
    background-size: auto 4px;
    opacity: 0.4;
    z-index: 9999;
}

/* 像素网格背景 */
body {
    background-image: 
        linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
    background-position: 0 0;
    background-attachment: fixed;
}

/* 经典CRT闪烁效果 */
body::after {
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0) 0%,
        rgba(200, 220, 255, 0.15) 85%,
        rgba(180, 210, 255, 0.3) 100%
    );
    z-index: 9990;
    opacity: 0.4;
    animation: crt-flicker 5s infinite;
}

@keyframes crt-flicker {
    0% { opacity: 0.4; }
    92% { opacity: 0.4; }
    93% { opacity: 0.35; }
    94% { opacity: 0.4; }
    98% { opacity: 0.4; }
    99% { opacity: 0.33; }
    100% { opacity: 0.4; }
}

/* ==== 全局基础设置 ==== */
html, body {
    margin: 0;
    padding: 0;
    font-family: var(--body-font);
    font-size: var(--base-font-size);
    line-height: 1.5;
    background-color: var(--primary-bg);
    color: var(--text-color);
}

/* 主内容区域 */
#content, .mw-body, #bodyContent {
    background-color: var(--primary-bg);
    padding: 1.5rem;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    box-shadow: var(--window-outer-shadow);
}

/* 千禧年风格窗口样式 */
.millennium-window {
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-dark);
    border-radius: 2px;
    box-shadow: var(--window-outer-shadow);
    padding: 1px;
    margin-bottom: 1rem;
}

.millennium-window-header {
    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
    color: white;
    padding: 0.25rem 0.5rem;
    font-weight: bold;
    font-family: var(--title-font);
    display: flex;
    align-items: center;
}

.millennium-window-content {
    background-color: var(--panel-bg);
    padding: 0.75rem;
    box-shadow: var(--inset-shadow);
}

/* 淡入动画效果 */
@media screen and (prefers-reduced-motion: no-preference) {
    #content > *, #mw-content-text > * {
        animation-name: fadeIn;
        animation-duration: 0.5s;
        animation-iteration-count: 1;
        animation-timing-function: ease-out;
        animation-fill-mode: backwards;
    }
}

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

/* 内容逐项淡入 */
#mw-content-text > :nth-child(1) { animation-delay: calc(1 * var(--fade-in-delay)); }
#mw-content-text > :nth-child(2) { animation-delay: calc(2 * var(--fade-in-delay)); }
#mw-content-text > :nth-child(3) { animation-delay: calc(3 * var(--fade-in-delay)); }
#mw-content-text > :nth-child(4) { animation-delay: calc(4 * var(--fade-in-delay)); }
#mw-content-text > :nth-child(5) { animation-delay: calc(5 * var(--fade-in-delay)); }
#mw-content-text > :nth-child(6) { animation-delay: calc(6 * var(--fade-in-delay)); }
#mw-content-text > :nth-child(7) { animation-delay: calc(7 * var(--fade-in-delay)); }
#mw-content-text > :nth-child(8) { animation-delay: calc(8 * var(--fade-in-delay)); }
#mw-content-text > :nth-child(n+9) { animation-delay: calc(9 * var(--fade-in-delay)); }

/* ==== 链接样式 ==== */
a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

a:hover, a:focus {
    color: var(--link-hover);
    text-decoration: underline;
}

a:visited {
    color: var(--visited-link);
}

a.new {
    color: #cc2200;
}

a.new:visited {
    color: #a55858;
}

/* 千禧年按钮风格 */
.mw-ui-button, 
.oo-ui-buttonElement-button,
input[type="submit"],
input[type="button"],
button {
    background: linear-gradient(to bottom, #f0f3f8, #d8dbe0);
    border: 1px solid var(--border-dark);
    border-radius: var(--button-radius);
    color: var(--text-color);
    padding: 0.25rem 0.75rem;
    font-family: var(--UI-font);
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: var(--button-shadow);
    transition: background-color 0.2s;
}

.mw-ui-button:hover,
.oo-ui-buttonElement-button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
    background: linear-gradient(to bottom, #e9ecf1, #c6cad0);
}

.mw-ui-button:active,
.oo-ui-buttonElement-button:active,
input[type="submit"]:active,
input[type="button"]:active,
button:active {
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.2);
    background: #d8dbe0;
}

/* ==== 标题样式 ==== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--title-font);
    font-weight: 700;
    line-height: 1.3;
    margin: 1.5em 0 0.8em;
    color: var(--primary-color);
}

h1 { 
    font-size: 1.8rem; 
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.3em;
}

h2 { 
    font-size: 1.5rem; 
    border-bottom: 1px solid var(--border-light);
    color: var(--accent-color);
}

h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9rem; }

/* 千禧年标题风格 */
.millennium-header {
    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: var(--button-radius);
    margin: 1.5em 0 1em;
    font-family: var(--title-font);
    font-size: 1.2rem;
    box-shadow: var(--window-outer-shadow);
}

/* ==== 表格样式 ==== */
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 1em 0;
    background-color: var(--panel-bg);
    border: 1px solid var(--border-color);
}

table th {
    background: linear-gradient(to bottom, #e0e8f5, #c8d0e0);
    font-weight: bold;
    text-align: center;
    padding: 0.5em;
    border: 1px solid var(--border-color);
}

table td {
    padding: 0.4em 0.6em;
    border: 1px solid var(--border-light);
}

table tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.3);
}

table tr:nth-child(even) {
    background-color: rgba(240, 244, 250, 0.3);
}

/* 数据表格样式 */
.data-table {
    width: 100%;
    font-family: var(--mono-font);
    font-size: 0.9rem;
}

.data-table th {
    background: linear-gradient(to bottom, var(--primary-color), var(--accent-color));
    color: white;
    padding: 0.5rem;
    text-align: left;
}

.data-table td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--border-light);
}

.data-table tr:hover {
    background-color: var(--highlight-color);
}

/* ==== 表单元素 ==== */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
textarea,
select {
    font-family: var(--UI-font);
    font-size: 0.95rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--button-radius);
    background-color: white;
    box-shadow: var(--inset-shadow);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 3px rgba(51, 102, 153, 0.5);
}

/* ==== 代码和预格式化文本 ==== */
pre, code, tt, kbd, samp {
    font-family: var(--mono-font);
    background-color: #f5f5f5;
    border: 1px solid #dddddd;
    padding: 1px 3px;
    border-radius: 2px;
    font-size: 0.9em;
}

pre {
    padding: 0.6rem;
    overflow-x: auto;
    line-height: 1.4;
    background-color: #f8f8f8;
    box-shadow: var(--inset-shadow);
    border-radius: 4px;
    margin: 1rem 0;
}

/* 代码特殊样式 */
.code-block {
    display: block;
    background-color: #f0f0f0;
    border: 1px solid #cccccc;
    padding: 0.8rem;
    margin: 1rem 0;
    font-family: var(--mono-font);
    font-size: 0.9rem;
    line-height: 1.5;
    overflow-x: auto;
    box-shadow: var(--inset-shadow);
}

.code-line-numbers {
    counter-reset: line;
}

.code-line {
    counter-increment: line;
    position: relative;
}

.code-line::before {
    content: counter(line);
    display: inline-block;
    width: 2rem;
    margin-right: 0.5rem;
    color: var(--light-text);
    text-align: right;
    user-select: none;
}

/* ==== 特殊区块样式 ==== */
/* 信息框 */
.infobox {
    float: right;
    clear: right;
    margin: 0 0 1em 1em;
    padding: 0;
    width: 22em;
    font-size: 0.9em;
    border: 1px solid var(--border-color);
    background-color: var(--panel-bg);
    box-shadow: var(--window-outer-shadow);
    border-radius: 4px;
    overflow: hidden;
}

.infobox-header {
    background: linear-gradient(to bottom, var(--primary-color), var(--accent-color));
    color: white;
    padding: 0.4rem;
    text-align: center;
    font-weight: bold;
}

.infobox-content {
    padding: 0.6rem;
}

.infobox-row {
    display: flex;
    border-bottom: 1px solid var(--border-light);
}

.infobox-label {
    flex: 1;
    padding: 0.3rem 0.5rem;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.05);
}

.infobox-data {
    flex: 2;
    padding: 0.3rem 0.5rem;
}

/* 警告和提示框 */
.alert-box {
    padding: 0.8rem;
    margin: 1rem 0;
    border-radius: 4px;
    border-left: 4px solid transparent;
}

.alert-info {
    background-color: var(--custom-background-blue);
    border-left-color: var(--primary-color);
}

.alert-success {
    background-color: var(--custom-background-green);
    border-left-color: var(--success-color);
}

.alert-warning {
    background-color: var(--custom-background-yellow);
    border-left-color: var(--warning-color);
}

.alert-error {
    background-color: var(--custom-background-red);
    border-left-color: var(--error-color);
}

/* 特殊风格区块 */
.y2k-section {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin: 1.5rem 0;
    background-color: var(--secondary-bg);
    overflow: hidden;
}

.y2k-section-header {
    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
    color: white;
    padding: 0.4rem 0.8rem;
    font-weight: bold;
    font-family: var(--title-font);
}

.y2k-section-content {
    padding: 1rem;
    background-color: var(--panel-bg);
}

/* 圆角内容块 */
.pill-container {
    background-color: var(--secondary-bg);
    border-radius: var(--pill-radius);
    padding: 0.8rem 1.2rem;
    margin: 1rem 0;
    box-shadow: var(--window-outer-shadow);
}

/* 标签页 */
.tabs {
    margin: 1.5rem 0;
}

.tabs-nav {
    display: flex;
    border-bottom: 1px solid var(--border-color);
}

.tab-button {
    padding: 0.5rem 1rem;
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    margin-right: 0.2rem;
    cursor: pointer;
}

.tab-button.active {
    background-color: var(--panel-bg);
    border-bottom: 1px solid var(--panel-bg);
    margin-bottom: -1px;
    font-weight: bold;
}

.tab-content {
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-top: none;
    background-color: var(--panel-bg);
}

/* ==== 黑幕效果 ==== */
.heimu, 
.heimu rt {
    --heimu-color: #252525;
    --heimu-text-color: #fff;
    background-color: var(--heimu-color);
    transition: color 0.2s ease-in-out;
}

.heimu,
.heimu a,
a .heimu,
a.new .heimu,
span.heimu a:visited {
    color: var(--heimu-color);
    text-shadow: none;
}

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

/* ==== 千禧年界面元素 ==== */
/* 进度条 */
.progress-container {
    height: 16px;
    background-color: white;
    border: 1px solid var(--border-dark);
    box-shadow: var(--inset-shadow);
    margin: 0.5rem 0;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    width: 0;
    animation: progress-animation 2s linear forwards;
}

@keyframes progress-animation {
    from { width: 0; }
    to { width: 100%; }
}

/* 折叠面板 */
.collapsible {
    margin: 1rem 0;
}

.collapsible-header {
    background: linear-gradient(to bottom, #f0f3f8, #d8dbe0);
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    font-weight: bold;
}

.collapsible-header::before {
    content: "+";
    display: inline-block;
    width: 1rem;
    margin-right: 0.5rem;
}

.collapsible.open .collapsible-header::before {
    content: "-";
}

.collapsible-content {
    padding: 0.8rem;
    border: 1px solid var(--border-color);
    border-top: none;
    background-color: var(--panel-bg);
}

/* 带边框的笔记 */
.note-container {
    border: 1px solid var(--border-color);
    background-color: var(--panel-bg);
    padding: 0.8rem;
    margin: 1rem 0;
    position: relative;
}

.note-header {
    position: absolute;
    top: -0.75rem;
    left: 0.8rem;
    background-color: var(--primary-bg);
    padding: 0 0.5rem;
    font-weight: bold;
    color: var(--primary-color);
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-track {
    background-color: #f0f0f0;
    border: 1px solid #cccccc;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #e0e0e0, #c0c0c0);
    border: 1px solid #999999;
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #d0d0d0, #a0a0a0);
}

::-webkit-scrollbar-corner {
    background-color: #f0f0f0;
}

/* 工具提示 */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted var(--border-color);
    cursor: help;
}

.tooltip .tooltip-text {
    visibility: hidden;
    width: 200px;
    background-color: #fffef0;
    color: var(--text-color);
    text-align: center;
    border: 1px solid var(--border-dark);
    border-radius: 4px;
    padding: 0.5rem;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: var(--window-outer-shadow);
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* 响应式设计 */
@media all and (max-width: 768px) {
    .infobox {
        float: none;
        margin: 1rem 0;
        width: 100%;
    }
    
    .tab-button {
        padding: 0.4rem 0.6rem;
        font-size: 0.9rem;
    }
    
    /* 在小屏幕上减弱扫描线效果 */
    :root {
        --scanline-color: rgba(0, 0, 0, 0.02);
        --scanline-size: 2px;
    }
}

/* 打印样式 */
@media print {
    body::before, body::after, #content::before {
        display: none;
    }
    
    body {
        background: none;
    }
    
    .millennium-window, 
    .infobox,
    .y2k-section,
    .pill-container {
        box-shadow: none;
        border: 1px solid #999;
    }
}