MediaWiki:Common.css

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。

• Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
• Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
• Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。

/* 这里放置的CSS将应用于所有皮肤 */
/* ============================================================
   机械 · 科幻风主题  —  MediaWiki:Common.css
   使用方法：
   1. 用管理员账号登录你的 wiki
   2. 在搜索框输入 MediaWiki:Common.css 并打开该页面
   3. 点击编辑，把下面全部内容粘贴进去并保存
   4. 刷新页面（如果没变化，试试 Ctrl+F5 强制刷新缓存）

   风格说明：深色背景 + 青色霓虹高光 + 等宽科技字体 +
   电路网格纹理 + 发光边框 + 扫描线细节
   ============================================================ */

/* ---------- 字体引入 ---------- */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Share+Tech+Mono&display=swap');

/* ---------- 全局变量（部分浏览器可直接用 CSS 变量） ---------- */
:root {
    --scifi-bg: #0a0e14;
    --scifi-bg-panel: rgba(13, 20, 28, 0.9);
    --scifi-accent: #00e5ff;
    --scifi-accent-dim: #0f8fa8;
    --scifi-accent-warn: #ff6b3d;
    --scifi-text: #c9e8f0;
    --scifi-text-dim: #6f8e98;
    --scifi-border: #1d4d5c;
}

/* ---------- 全局背景：深空底色 + 电路网格纹理 ---------- */
html {
    background-color: var(--scifi-bg);
}

body {
    background-color: var(--scifi-bg);
    background-image:
        linear-gradient(rgba(0, 229, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, 0.05) 1px, transparent 1px),
        radial-gradient(circle at 50% 0%, rgba(0, 229, 255, 0.08) 0%, rgba(10, 14, 20, 0) 60%);
    background-size: 40px 40px, 40px 40px, 100% 100%;
    background-attachment: fixed;
    color: var(--scifi-text);
    font-family: 'Share Tech Mono', 'Consolas', monospace;
}

/* ---------- 主内容区域：玻璃面板效果 ---------- */
#content,
.mw-body,
.vector-body {
    background: var(--scifi-bg-panel);
    border: 1px solid var(--scifi-border);
    border-radius: 4px;
    box-shadow:
        0 0 25px rgba(0, 229, 255, 0.12),
        inset 0 0 40px rgba(0, 229, 255, 0.03);
    color: var(--scifi-text);
    position: relative;
}

/* 内容区顶部装饰扫描线 */
#content::before,
.mw-body::before {
    content: "";
    display: block;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, transparent, var(--scifi-accent), transparent);
    position: absolute;
    top: 0;
    left: 0;
    animation: scifi-scan 4s linear infinite;
    opacity: 0.6;
}

@keyframes scifi-scan {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ---------- 标题：发光科技字体 ---------- */
h1, h2, h3, h4, h5, h6,
.mw-body h1, .mw-body h2, .mw-body h3 {
    font-family: 'Orbitron', 'Share Tech Mono', monospace;
    color: var(--scifi-accent);
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.6), 0 0 2px rgba(0, 229, 255, 0.8);
    letter-spacing: 1px;
    border-bottom: 1px solid var(--scifi-border);
    text-transform: uppercase;
}

#firstHeading,
.firstHeading {
    font-family: 'Orbitron', monospace;
    font-weight: 900;
    color: var(--scifi-accent);
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.7);
    border-bottom: 2px solid var(--scifi-accent-dim);
    padding-bottom: 8px;
}

/* ---------- 链接 ---------- */
a {
    color: #4ce0ff;
    text-decoration: none;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

a:hover {
    color: #ffffff;
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.9);
    text-decoration: underline;
}

a.new {
    color: var(--scifi-accent-warn);
}

a.external {
    color: #7fffd4;
}

/* ---------- 侧边栏 / 导航面板 ---------- */
#mw-panel,
.vector-menu-content,
.mw-portlet {
    background: rgba(8, 12, 18, 0.6);
    border: 1px solid var(--scifi-border);
    border-radius: 3px;
}

.vector-menu-heading,
.mw-portlet-header {
    font-family: 'Orbitron', monospace;
    color: var(--scifi-accent-dim);
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 2px;
    border-bottom: 1px solid var(--scifi-border);
}

.vector-menu-content li a,
.mw-portlet li a {
    color: var(--scifi-text);
}

.vector-menu-content li a:hover,
.mw-portlet li a:hover {
    color: var(--scifi-accent);
    background: rgba(0, 229, 255, 0.08);
}

/* ---------- 顶部导航栏 / 页头 ---------- */
#p-personal,
.vector-header,
.mw-header {
    background: rgba(6, 10, 16, 0.85);
    border-bottom: 1px solid var(--scifi-accent-dim);
}

/* ---------- 表格 ---------- */
table.wikitable {
    background: rgba(10, 16, 22, 0.7);
    border: 1px solid var(--scifi-border);
    color: var(--scifi-text);
}

table.wikitable > tr > th,
table.wikitable > * > tr > th {
    background: rgba(0, 229, 255, 0.1);
    color: var(--scifi-accent);
    font-family: 'Orbitron', monospace;
    text-transform: uppercase;
    font-size: 0.9em;
    border: 1px solid var(--scifi-border);
}

table.wikitable > tr > td,
table.wikitable > * > tr > td {
    border: 1px solid var(--scifi-border);
}

/* ---------- 信息框 / infobox 常见类 ---------- */
.infobox {
    background: rgba(10, 16, 22, 0.85);
    border: 1px solid var(--scifi-accent-dim);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.15);
    color: var(--scifi-text);
}

/* ---------- 按钮 / 标签页 ---------- */
.mw-ui-button,
input[type="submit"],
input[type="button"],
button {
    background: linear-gradient(180deg, #123039, #0a1a20);
    color: var(--scifi-accent);
    border: 1px solid var(--scifi-accent-dim);
    font-family: 'Share Tech Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 2px;
    transition: all 0.2s ease;
}

.mw-ui-button:hover,
input[type="submit"]:hover,
button:hover {
    background: rgba(0, 229, 255, 0.15);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
    color: #ffffff;
}

.vector-tab-noicon a,
#p-views li a,
.mw-portlet-views li a {
    background: rgba(10, 16, 22, 0.6);
    border: 1px solid transparent;
    color: var(--scifi-text-dim);
}

.selected a,
li.selected a {
    color: var(--scifi-accent) !important;
    border-color: var(--scifi-accent-dim) !important;
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.6);
}

/* ---------- 输入框 / 搜索框 ---------- */
input[type="text"],
input[type="search"],
textarea,
.cdx-text-input__input {
    background: rgba(5, 8, 12, 0.8);
    border: 1px solid var(--scifi-border);
    color: var(--scifi-accent);
    font-family: 'Share Tech Mono', monospace;
}

input[type="text"]:focus,
textarea:focus {
    outline: none;
    border-color: var(--scifi-accent);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}

/* ---------- 引用块 / code / pre ---------- */
blockquote {
    border-left: 3px solid var(--scifi-accent-dim);
    background: rgba(0, 229, 255, 0.04);
    color: var(--scifi-text-dim);
}

code, pre, tt {
    background: rgba(5, 10, 15, 0.9);
    color: #7fffd4;
    border: 1px solid var(--scifi-border);
    font-family: 'Share Tech Mono', monospace;
}

/* ---------- 分类标签 / 页脚 ---------- */
#catlinks,
.mw-footer,
#footer {
    background: rgba(6, 10, 16, 0.7);
    border-top: 1px solid var(--scifi-border);
    color: var(--scifi-text-dim);
    font-size: 0.85em;
}

#catlinks a,
.mw-footer a,
#footer a {
    color: var(--scifi-accent-dim);
}

/* ---------- 选中文字颜色 ---------- */
::selection {
    background: rgba(0, 229, 255, 0.35);
    color: #ffffff;
}

/* ---------- 滚动条（Webkit 内核浏览器） ---------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #0a0e14;
}

::-webkit-scrollbar-thumb {
    background: var(--scifi-accent-dim);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scifi-accent);
}

/* ============================================================
   可选彩蛋：给页面加一层极细的“故障感”闪烁边框
   如果觉得太花，删掉下面这一段即可
   ============================================================ */
.mw-body {
    animation: scifi-flicker 6s ease-in-out infinite;
}

@keyframes scifi-flicker {
    0%, 97%, 100% { box-shadow: 0 0 25px rgba(0, 229, 255, 0.12); }
    98% { box-shadow: 0 0 25px rgba(0, 229, 255, 0.25); }
    99% { box-shadow: 0 0 15px rgba(0, 229, 255, 0.08); }
}