MediaWiki:Timeless.css：修订间差异

2026年1月8日 (四) 11:48的版本

  /* MediaWiki:Timeless.css - Mindustry green header + clean sidebars */
  body.skin-timeless{
    --mdt-brand:#00af89;        /* Mindustry 风格绿 */
    --mdt-brand-fg:#fff;
    --mdt-accent:#00cfa0;
    --mdt-shadow:0 .2rem .5rem rgba(0,0,0,.08),0 0 .05rem
  rgba(0,0,0,.12);
    --mdt-sidebar-w:16rem;
  }

  /* ===== 顶部栏（绿） ===== */
  body.skin-timeless #mw-header-container{
    background:var(--mdt-brand) !important;
    color:var(--mdt-brand-fg);
    box-shadow:var(--mdt-shadow);
    border-bottom:1px solid rgba(0,0,0,.12);
  }
  body.skin-timeless #mw-header-hack,
  body.skin-timeless #mw-header-nav-hack{display:none !important;}

  body.skin-timeless #mw-header{
    display:flex;
    align-items:center;
    gap:.75rem;
  }

  /* 左侧站点标题参与 flex（避免错位） */
  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,.22);
  }

  /* ===== 搜索框：宽度减半 + 输入框深色 ===== */
  body.skin-timeless #p-search{
    order:2;
    margin-left:auto;
    flex:0 1 13rem;     /* 26rem -> 13rem（约减半） */
    min-width:12rem;
    max-width:22vw;
  }
  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:.35rem .75rem;
    background:rgba(0,0,0,.28); /* 外网那种“深色”质感 */
    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(0,0,0,.36);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  }
  body.skin-timeless #mw-searchButton,
  body.skin-timeless #searchButton{
    border:0;
    background:transparent;
    color:var(--mdt-brand-fg);
    padding:.25rem .5rem;
    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,
  body.skin-timeless #mw-related-navigation{
    width:var(--mdt-sidebar-w) !important;
    flex:0 0 var(--mdt-sidebar-w) !important;
  }

  body.skin-timeless #mw-site-navigation .sidebar-chunk,
  body.skin-timeless #mw-related-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,
  body.skin-timeless #mw-related-navigation .sidebar-chunk>h2{
    margin:.25rem .75rem .5rem;
    font-size:.8rem;
    letter-spacing:.06em;
    color:rgba(0,0,0,.55);
  }

  body.skin-timeless #mw-site-navigation .mw-portlet-body ul,
  body.skin-timeless #mw-related-navigation .mw-portlet-body ul{
    list-style:none;
    margin:0;
    padding:0;
  }

  body.skin-timeless #mw-site-navigation .mw-portlet-body a,
  body.skin-timeless #mw-related-navigation .mw-portlet-body a{
    display:block;
    padding:.38rem .85rem;
    border-radius:10px;
    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,
  body.skin-timeless #mw-related-navigation .mw-portlet-body a:hover{
    background:rgba(0,0,0,.06);
    box-shadow:inset 3px 0 0 var(--mdt-accent);
  }

  /* 桌面端：两侧栏都可滚动/跟随 */
  @media (min-width:1000px){
    body.skin-timeless #mw-site-navigation,
    body.skin-timeless #mw-related-navigation{
      position:sticky;
      top:4rem;
      align-self:flex-start;
      max-height:calc(100vh - 4rem);
      overflow-y:auto;
    }
  }

  /* 你截图里“首页”下面那条蓝线 -> 绿 */
  body.skin-timeless .mw-body h1.firstHeading{
    border-bottom-color:var(--mdt-brand) !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;
    }
  }