查看“MediaWiki:Timeless.css”的源代码

/* 这里放置的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;
    }
  }