MediaWiki:Timeless.css
来自Mindustry中文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皮肤 */
/* MediaWiki:Timeless.css - MkDocs Material-ish (Mindustry) */
body.skin-timeless{
--mk-header-bg:#d4816b; /* 外网 style.css 里 md-header 用的颜色 */
--mk-header-fg:#fff;
--mk-accent:#526cfe; /* mkdocs-material 默认强调色 */
--mk-shadow:0 .2rem .5rem rgba(0,0,0,.08),0 0 .05rem
rgba(0,0,0,.12);
--mk-sidebar-w:16rem;
font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans
SC","Microsoft YaHei",Arial,sans-serif;
}
/* 顶部（Top bar） */
body.skin-timeless #mw-header-container{background:var(--mk-header-
bg);box-shadow:var(--mk-shadow)}
body.skin-timeless #mw-header-hack,
body.skin-timeless #mw-header-nav-hack{display:none}
body.skin-timeless #mw-header{align-items:center;gap:.75rem}
/* 顶部链接默认白色；但下拉菜单（登录/创建账号）要保持蓝色可读 */
body.skin-timeless #mw-header a,
body.skin-timeless #mw-header a:visited{color:var(--mk-header-fg)}
body.skin-timeless #mw-header .dropdown{color:rgba(0,0,0,.87)}
body.skin-timeless #mw-header .dropdown a,
body.skin-timeless #mw-header .dropdown a:visited{color:#0645ad}
/* 站点标题更接近外网（外网用 Audiowide；没装字体会自动回退） */
body.skin-timeless #p-logo-text #p-banner{
font-family:"Audiowide",Roboto,system-ui,sans-serif;
font-weight:700;
letter-spacing:.02em;
text-decoration:none;
}
/* 搜索框（做成 mkdocs 那种“胶囊”） */
body.skin-timeless #p-search h3{display:none}
body.skin-timeless #p-search{max-width:520px}
body.skin-timeless #simpleSearch{display:flex;align-
items:center;gap:.5rem}
body.skin-timeless #searchInput{
width:100%;
border:0;
border-radius:999px;
padding:.45rem .85rem;
background:rgba(255,255,255,.18);
color:#fff;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
body.skin-timeless
#searchInput::placeholder{color:rgba(255,255,255,.75)}
body.skin-timeless #searchInput:focus{
outline:none;
background:rgba(255,255,255,.26);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
body.skin-timeless #mw-searchButton,
body.skin-timeless #searchButton{
border:0;background:transparent;color:#fff;
padding:.35rem .6rem;border-radius:8px;
}
body.skin-timeless #mw-searchButton:hover,
body.skin-timeless #searchButton:hover{background:rgba(0,0,0,.12)}
/* 左侧导航（mw-site-navigation） */
body.skin-timeless #mw-site-navigation{width:var(--mk-sidebar-
w);flex:0 0 var(--mk-sidebar-w)}
body.skin-timeless #mw-site-navigation .sidebar-chunk{
background:#fff;border:0;box-shadow:none;
padding:.75rem .5rem;margin:0 0 1rem;
}
body.skin-timeless #mw-site-navigation .sidebar-chunk>h2{
margin:.25rem .5rem .5rem;
font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
color:rgba(0,0,0,.6);
}
body.skin-timeless #mw-site-navigation .mw-portlet-body ul{list-
style:none;margin:0;padding:0}
body.skin-timeless #mw-site-navigation .mw-portlet-body a{
display:block;
padding:.38rem .75rem;
border-radius:8px;
text-decoration:none;
color:rgba(0,0,0,.87);
box-shadow:inset 3px 0 0 transparent;
}
body.skin-timeless #mw-site-navigation .mw-portlet-body a:hover{
background:rgba(0,0,0,.06);
box-shadow:inset 3px 0 0 var(--mk-accent);
}
/* 桌面端：让侧栏像 mkdocs 一样“跟随滚动/可滚动” */
@media (min-width:1000px){
body.skin-timeless #mw-site-navigation{
position:sticky;top:4rem;align-self:flex-start;
max-height:calc(100vh - 4rem);overflow-y:auto;
}
}
/* ===== Timeless 头部/侧栏仿 MkDocs Material（按需改色） ===== */
body.skin-timeless{
--mdt-brand:#d4816b; /* 顶部背景色（外网同款） */
--mdt-brand-fg:#fff; /* 顶部文字色 */
--mdt-bar:var(--mdt-brand); /* “条条”的颜色（标题下划线/顶部彩条）
*/
--mdt-shadow:0 .2rem .5rem rgba(0,0,0,.08),0 0 .05rem
rgba(0,0,0,.12);
--mdt-sidebar-w:16rem;
}
/* ===== 顶部：Logo(左) + 搜索(右) + 账号(最右) ===== */
body.skin-timeless #mw-header-container{
background:var(--mdt-brand) !important;
color:var(--mdt-brand-fg);
box-shadow:var(--mdt-shadow);
}
/* 让标题参与 flex（Timeless 默认会 absolute，导致你截图里不对齐） */
body.skin-timeless #mw-header{display:flex;align-
items:center;gap:.75rem}
body.skin-timeless #p-logo-text{
position:static !important;
min-width:0 !important;
max-width:none !important;
order:1;
flex:0 0 auto;
text-align:left !important;
}
body.skin-timeless #p-logo-text #p-banner{
display:flex;align-items:center;gap:.5rem;
color:inherit;text-decoration:none;
font-weight:700;letter-spacing:.02em;line-height:1;
}
/* 把左侧大图标“贴到上面”：隐藏侧栏 logo，用标题前的图标代替 */
body.skin-timeless #mw-site-navigation #p-logo{display:none !
important;}
body.skin-timeless #p-logo-text #p-banner::before{
content:'';
width:32px;height:32px;
background:url(/resources/assets/logo.jpg) center/cover no-repeat;
border-radius:8px;
box-shadow:0 0 0 1px rgba(255,255,255,.25);
}
/* 搜索框移到右侧（靠近外网位置），账号贴最右 */
body.skin-timeless #p-search{
order:2;
margin-left:auto; /* 关键：把搜索推到右侧 */
flex:0 1 26rem;
max-width:42vw;
}
body.skin-timeless #p-search h3{display:none;}
body.skin-timeless #simpleSearch{display:flex;align-
items:center;gap:.5rem}
body.skin-timeless #searchInput{
width:100%;
border:0;
border-radius:999px;
padding:.45rem .85rem;
background:rgba(255,255,255,.18);
color:var(--mdt-brand-fg);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
body.skin-timeless
#searchInput::placeholder{color:rgba(255,255,255,.75)}
body.skin-timeless #searchInput:focus{
outline:none;
background:rgba(255,255,255,.26);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
body.skin-timeless #mw-searchButton,
body.skin-timeless #searchButton{
border:0;background:transparent;color:var(--mdt-brand-fg);
padding:.35rem .6rem;border-radius:8px;
}
body.skin-timeless #mw-searchButton:hover,
body.skin-timeless #searchButton:hover{background:rgba(0,0,0,.12)}
body.skin-timeless #user-tools{
order:3;
flex:0 0 auto;
white-space:nowrap;
}
/* 顶部链接统一白色，但下拉菜单保持可读 */
body.skin-timeless #mw-header a,
body.skin-timeless #mw-header a:visited{color:var(--mdt-brand-fg)}
body.skin-timeless #mw-header .dropdown{color:rgba(0,0,0,.87)}
body.skin-timeless #mw-header .dropdown a,
body.skin-timeless #mw-header .dropdown a:visited{color:#0645ad}
/* ===== 左侧导航更“干净” ===== */
body.skin-timeless #mw-site-navigation{
width:var(--mdt-sidebar-w) !important;
flex:0 0 var(--mdt-sidebar-w) !important;
}
body.skin-timeless #mw-site-navigation .sidebar-chunk{
background:transparent;
border:0;
box-shadow:none;
padding:.25rem 0;
margin:0 0 1rem;
}
body.skin-timeless #mw-site-navigation .sidebar-chunk > h2{
margin:.25rem .75rem .5rem;
font-size:.75rem;
letter-spacing:.06em;
text-transform:uppercase;
color:rgba(0,0,0,.55);
}
body.skin-timeless #mw-site-navigation .mw-portlet-body ul{list-
style:none;margin:0;padding:0}
body.skin-timeless #mw-site-navigation .mw-portlet-body a{
display:block;
padding:.38rem .85rem;
border-radius:10px;
text-decoration:none;
color:rgba(0,0,0,.87);
}
body.skin-timeless #mw-site-navigation .mw-portlet-body
a:hover{background:rgba(0,0,0,.06)}
/* （可选）如果你想更干净：隐藏左侧“wiki工具”整块
body.skin-timeless #site-tools{display:none !important;}
*/
/* ===== 你说的“上面这个条条”改色（两处都一起改） ===== */
/* 1) 页面标题“首页”下面那条蓝线 */
body.skin-timeless .mw-body h1.firstHeading{border-bottom-
color:var(--mdt-bar) !important;}
/* 2) 顶部下面那条 Timeless 彩条（如果你还保留它） */
body.skin-timeless #mw-header-hack .color-left,
body.skin-timeless #mw-header-hack .color-middle,
body.skin-timeless #mw-header-hack .color-right,
body.skin-timeless #mw-header-nav-hack .color-left,
body.skin-timeless #mw-header-nav-hack .color-middle,
body.skin-timeless #mw-header-nav-hack .color-right{
background:var(--mdt-bar) !important;
}
/* 小屏适配：搜索换行 */
@media (max-width:720px){
body.skin-timeless #mw-header{flex-wrap:wrap}
body.skin-timeless #p-search{flex:1 1 100%;max-width:none;margin-
left:0}
}
