MediaWiki:Timeless.css：修订间差异

2026年1月8日 (四) 10:58的版本

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