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;
}
}
