|
|
| 第1行： |
第1行： |
| /* 这里放置的CSS将应用于所有皮肤 */ | | /* 这里放置的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); }
| |
| }
| |