MediaWiki:Timeless.css：修订间差异

2026年1月8日 (四) 13:50的版本

  /* 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;
    }
  }
/* ===== 顶部搜索：外网那种深色 + 填充满（改的是 #simpleSearch 不是
  #searchInput） ===== */
  body.skin-timeless #user-tools{ margin-left:auto; } /* 账号贴最右 */

  body.skin-timeless #p-search{
    flex:0 1 13rem;     /* 宽度约减半：想更小就改 11rem/12rem */
    min-width:12rem;
    max-width:22vw;
    margin:0 1rem;
  }

  body.skin-timeless #mw-header-container #simpleSearch{
    background:rgba(0,0,0,.28) !important;  /* 外网那种深色半透明 */
    border:1px solid rgba(255,255,255,.14) !important;
    box-shadow:none !important;
    border-radius:.35rem !important;        /* 外网是小圆角，不是大胶
  囊 */
    height:2.4em;
    width:100%;
  }

  body.skin-timeless #mw-header-container #searchInput{
    height:100% !important;
    width:100% !important;
    background:transparent !important;      /* 关键：让深色“填充满”容
  器 */
    color:#fff !important;
    box-shadow:none !important;
    border-radius:0 !important;
    padding:.25em .75em .25em 2.25em !important; /* 给左侧放放大镜留空
  间 */
  }

  body.skin-timeless #mw-header-container #searchInput::placeholder{
    color:rgba(255,255,255,.75) !important;
  }

  /* 放大镜移到左侧，并变成白色（Timeless 默认在右侧且是深色图标） */
  body.skin-timeless #mw-header-container #mw-searchButton{
    left:.15em !important;
    right:auto !important;
    top:0 !important;
    height:100% !important;
    width:2.25em !important;
    background-position:center !important;
    filter:invert(1) brightness(1.2);
    opacity:.9;
  }
  body.skin-timeless #mw-header-container #searchButton{ display:none !
  important; } /* 避免两个按钮叠一起 */
 /* === FIX: 搜索回到右侧 + 减少左侧空白 === */
  body.skin-timeless #user-tools{ margin-left:0 !important; }

  @media (min-width:721px){
    body.skin-timeless #mw-header #p-search{
      margin:0 1rem 0 auto !important; /* 右对齐 */
      flex:0 1 13rem !important;
      max-width:22vw !important;
    }
  }

  body.skin-timeless #mw-header-container #mw-searchButton{
    left:.35em !important;
    right:auto !important;
    width:1.8em !important; /* 缩小图标占位 */
  }

  body.skin-timeless #mw-header-container #searchInput{
    padding-left:1.9em !important; /* 文字更靠左 */
  }
 * ===== Sidebar tree (MkDocs-ish) ===== */
  body.skin-timeless
  #mw-site-navigation
  #p-navigation
  .mw-portlet-body > ul{
    margin:0;
    padding:0;
  }

  body.skin-timeless
  #mw-site-navigation
  #p-navigation
  li.mdt-nav__group{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    min-width:0;
  }

  body.skin-timeless
  #mw-site-navigation
  #p-navigation
  .mdt-nav__toggle{
    width:2rem;
    height:2rem;
    margin-right:.25rem;
    border:0;
    background:transparent;
    color:rgba(0,0,0,.55);
    cursor:pointer;
    border-radius:10px;
  }

  body.skin-timeless
  #mw-site-navigation
  #p-navigation
  .mdt-nav__toggle:hover{
    background:rgba(0,0,0,.06);
  }

  body.skin-timeless
  #mw-site-navigation
  #p-navigation
  .mdt-nav__toggle::before{
    content:'›';
    display:block;
    font-size:20px;
    line-height:2rem;
    transition:transform .15s ease;
  }

  body.skin-timeless
  #mw-site-navigation
  #p-navigation
  li.mdt-nav__group.mdt-nav__group--open
  > .mdt-nav__toggle::before{
    transform:rotate(90deg);
  }

  body.skin-timeless
  #mw-site-navigation
  #p-navigation
  .mdt-nav__sublist{
    grid-column:1/-1;
    list-style:none;
    margin:.15rem 0 .35rem;
    padding:0 0 0 .75rem;
    border-left:1px solid rgba(0,0,0,.08);
    display:none;
  }

  body.skin-timeless
  #mw-site-navigation
  #p-navigation
  li.mdt-nav__group.mdt-nav__group--open
  > .mdt-nav__sublist{
    display:block;
  }

  body.skin-timeless
  #mw-site-navigation
  #p-navigation
  a.mdt-nav__link--active{
    color:var(--mdt-brand) !important;
    background:rgba(0,175,137,.10) !important;
    box-shadow:inset 3px 0 0 var(--mdt-brand) !important;
  }

  /* 右侧细滚动条（有溢出才会出现） */
  body.skin-timeless
  #mw-site-navigation{
    scrollbar-width:thin;
    scrollbar-color:rgba(0,207,160,.85) transparent;
  }
  body.skin-timeless
  #mw-site-navigation::-webkit-scrollbar{width:6px}
  body.skin-timeless
  #mw-site-navigation::-webkit-scrollbar-track{background:transparent}
  body.skin-timeless
  #mw-site-navigation::-webkit-scrollbar-thumb{
    background:rgba(0,207,160,.85);
    border-radius:999px;
  }