MediaWiki:Timeless.css

来自Mindustry中文wiki
绿豆留言 | 贡献2026年1月8日 (四) 02:56的版本 (创建页面,内容为“→‎这里放置的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…”
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)

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

  • Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5Ctrl-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;
    }
  }