MediaWiki:Timeless.css
来自高堡奇驹Wiki|The Pony in The High Castle Wiki
注意:在发布之后,您可能需要清除浏览器缓存才能看到所作出的变更的影响。
- Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5或Ctrl-R(Mac为⌘-R)
- Google Chrome:按Ctrl-Shift-R(Mac为⌘-Shift-R)
- Internet Explorer或Edge:按住Ctrl的同时单击刷新,或按Ctrl-F5
- Opera:按 Ctrl-F5。
/* 这里放置的CSS将应用于Timeless皮肤 */ /* 更改Timeless皮肤的默认背景图片 */ /* /* ============================================================ HOI4 Theme for MediaWiki Timeless - v5.0 VICTORIAN STEAMPUNK 维多利亚蒸汽朋克艺术升级版 ============================================================ */ /* --- 1. 核心颜色与字体变量 --- */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Stalinist+One&family=Cinzel+Decorative:wght@700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap'); :root { --sp-bg-dark-wood: #3d342a; /* 深色木纹/皮革背景 */ --sp-bg-panel: #4a4238; /* 侧边栏面板背景 */ --sp-bg-paper: #e6d8b1; /* 纸张背景 */ --sp-text-light: #dcdcdc; /* 亮色文字 */ --sp-text-dark: #3c342a; /* 暗色文字 */ --sp-border-brass: #8c7853; /* 黄铜边框 */ --sp-border-brass-light: #ab9873; /* 黄铜高光 */ --sp-border-brass-dark: #5c4823; /* 黄铜阴影 */ --sp-link-color: #6e8ca6; /* 带有维多利亚蓝的链接色 */ --sp-link-hover: #8eacb6; /* 链接悬停 */ --font-heading-main: 'Stalinist One', 'Impact', sans-serif; /* 主标题:工业感 */ --font-heading-decorative: 'Cinzel Decorative', serif; /* 装饰性标题:维多利亚风 */ --font-body: 'Roboto', sans-serif; --font-mono: 'Roboto Mono', monospace; } /* --- 2. 整体布局与背景纹理 --- */ body { background-color: var(--sp-bg-dark-wood) !important; /* 华丽的维多利亚背景纹理 */ background-image: url('https://www.transparenttextures.com/patterns/dark-denim-3.png') !important; color: var(--sp-text-light) !important; font-family: var(--font-body) !important; } /* --- 3. 【模块化核心】内容区、侧边栏、头部 --- */ /* 内容区:黄铜镶边的主面板 */ #content { background-color: var(--sp-bg-paper) !important; color: var(--sp-text-dark) !important; padding: 2em 3em !important; border-radius: 0 !important; /* 营造金属镶边效果 */ border: 1px solid var(--sp-border-brass-dark) !important; box-shadow: inset 0 0 0 1px var(--sp-border-brass), /* 内圈亮线 */ inset 0 0 15px rgba(0,0,0,0.3), /* 轻微内阴影 */ 5px 5px 2px 0px rgba(0,0,0,0.4) !important; /* 硬朗外投影 */ } /* 头部 */ #mw-head { background: linear-gradient(to bottom, #4a4238, #3d342a) !important; border-bottom: 2px solid #1a1a1a !important; } /* 侧边栏:皮革/木质面板 */ #mw-site-navigation, #mw-related-navigation { background-color: var(--sp-bg-panel) !important; /* 深色皮革纹理 */ background-image: url('https://www.transparenttextures.com/patterns/leather.png') !important; border: 1px solid #1e1f1c !important; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); } /* 用户菜单 */ #personal { background-color: var(--sp-bg-panel) !important; } #personal .dropdown { background: var(--sp-bg-panel) !important; border-color: var(--sp-border-brass) !important; } #personal .dropdown::after { border-bottom-color: var(--sp-bg-panel) !important; } #personal .dropdown::before { border-bottom-color: var(--sp-border-brass) !important; } /* 侧边栏模块和链接 */ #mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk { background: transparent !important; border: none !important; border-top: 1px solid rgba(140, 120, 83, 0.3) !important; /* 半透明黄铜分割线 */ margin: 0 !important; padding: 1.5em !important; box-shadow: none !important; } #mw-site-navigation .sidebar-chunk:first-child { border-top: none !important; } #mw-site-navigation h3, #mw-related-navigation h3 { font-family: var(--font-heading-decorative) !important; /* 使用装饰性字体 */ color: var(--sp-border-brass-light) !important; border-bottom-color: rgba(140, 120, 83, 0.5) !important; text-transform: none !important; /* 装饰性字体通常不需要大写 */ font-size: 1.2em; font-weight: bold; } #mw-site-navigation a, #mw-related-navigation a, #personal a { color: var(--sp-text-light) !important; } #mw-site-navigation a:hover, #mw-related-navigation a:hover, #personal a:hover { color: var(--sp-border-brass-light) !important; background: none !important; } /* --- 4. 【艺术加工】内容排版与装饰 --- */ /* 主标题:工业感 */ #firstHeading, .mw-first-heading { font-family: var(--font-heading-main) !important; color: var(--sp-text-dark) !important; border-bottom: 3px double var(--sp-border-brass) !important; /* 双线边框 */ padding-bottom: 0.2em !important; text-shadow: 1px 1px 0px #fff !important; text-transform: uppercase !important; } /* 次级标题:维多利亚感 */ h2, .mw-parser-output .mw-heading2 { font-family: var(--font-heading-decorative) !important; text-align: center; border-bottom: none !important; margin-top: 2em !important; margin-bottom: 1em !important; } /* 华丽的标题装饰线 */ h2::before, h2::after { content: ''; display: inline-block; vertical-align: middle; width: 20%; height: 1px; background: linear-gradient(to right, transparent, var(--sp-border-brass), transparent); margin: 0 1em; } h3,h4,h5,h6 { font-family: var(--font-body) !important; font-weight: bold !important; text-transform: none !important;} /* 链接 */ #mw-content-text a:not(.image) { color: var(--sp-link-color) !important; } #mw-content-text a:hover { color: var(--sp-link-hover) !important; } #mw-content-text a.new { color: var(--hoi4-accent-red) !important; } /* --- 5. 【模块化升级】信息框与导航框 --- */ /* 通用模块样式:带铆钉的黄铜铭牌 */ .infobox, .navbox, .toc, .wikitable { background-color: rgba(0,0,0,0.05) !important; border: 1px solid var(--sp-border-brass-dark) !important; border-radius: 0 !important; padding: 2px !important; /* 为双边框留出空间 */ /* 模拟铆钉背景 */ background-image: radial-gradient(var(--sp-border-brass-dark) 15%, transparent 16%), radial-gradient(var(--sp-border-brass-dark) 15%, transparent 16%); background-size: 10px 10px; background-position: 0 0, 5px 5px; box-shadow: inset 0 0 0 2px var(--sp-bg-paper) !important; /* 制造内框 */ } /* 模块标题 */ .infobox-title, .navbox > tbody > tr:first-child > td, .toctitle { background: linear-gradient(to bottom, var(--sp-border-brass-light), var(--sp-border-brass)) !important; color: var(--sp-text-dark) !important; font-family: var(--font-heading-main) !important; text-align: center !important; text-shadow: 1px 1px 0 rgba(255,255,255,0.3); border-bottom: 1px solid var(--sp-border-brass-dark) !important; } /* 表格标题行 */ .wikitable > tr > th, .wikitable > * > tr > th { background-color: rgba(140, 120, 83, 0.4) !important; color: var(--sp-text-dark) !important; font-family: var(--font-body) !important; font-weight: bold; }