MediaWiki:Timeless.css


/* 这里放置的CSS将应用于Timeless皮肤 */


/* 这里放置的CSS将应用于Timeless皮肤 */
/* Indefinite content width 
@media screen and (min-width: 851px) {
    .color-middle-container,
    .ts-inner { max-width: none; }
}
*/



/* Top bar font modernization */
#mw-header *,
#mw-site-navigation *,
#mw-related-navigation *  { font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif  }

/* Avoid cutting off letters with descenders: g,j,p,q,y */
#personal h2 span {
    height: 1.5em;
    position:relative;
    bottom:0.1em
}

/* Triangle position patch */
#personal h2::after {
   position: relative;
   bottom: 0.5em;
}




/* Highlight section title upon navigation */

.mw-headline:target {
  background-color: gold;
}


/*content font 

body { color: #5a7425; font-size: 14px; font-family: "Courier New"; }*/


#content h1 { color: #000000; font-size: 18px;}



/* ===== 游客隐藏 Special Pages ===== */

/* ===== Hide Special pages for anonymous users ===== */

/* Hide Special links in navigation only */
body.anonymous #mw-site-navigation a[href*="/wiki/Special:"],
body.anonymous #mw-related-navigation a[href*="/wiki/Special:"],
body.anonymous #p-personal a[href*="/wiki/Special:"],
body.anonymous a[href*="title=Special:"]{
    display:none!important;
}

/* Hide History tab */
body.anonymous #ca-history{
    display:none!important;
}

/* Hide Toolbox */
body.anonymous #p-tb{
    display:none!important;
}





/* ===================================================
   1. Timeless 专用页脚容器重置 (适配 .ts-inner 嵌套层)
   =================================================== */

/* 重置外层底线 */
.skin-timeless .mw-footer-container,
.skin-timeless #footer,
.skin-timeless .mw-footer {
    border-bottom: 4px solid #10b981 !important; /* 底部主题色地基线 */
    padding-bottom: 24px !important;
    box-sizing: border-box !important;
}

/* 🌟 核心修正：Timeless 真正的内层包裹容器是 .ts-inner */
.skin-timeless #footer .ts-inner,
.skin-timeless .mw-footer .ts-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important; /* 解除 Timeless 原生内宽限制 */
    margin: 0 auto !important;
    padding: 0 !important;
}

/* 彻底清除 Timeless 原生 float 浮动 */
.skin-timeless #footer *,
.skin-timeless .mw-footer * {
    float: none !important;
}


/* ===================================================
   2. 彻底隐藏最后编辑时间
   =================================================== */
.skin-timeless #footer-info-lastmod,
.skin-timeless .footer-info-lastmod,
.skin-timeless li#footer-info-lastmod,
.skin-timeless [id*="lastmod"] {
    display: none !important;
}


/* ===================================================
   3. 第一行 & 第二行：访问次数与版权声明 (垂直居中)
   =================================================== */
.skin-timeless #footer-info {
    order: 1 !important;
    font-size: 0.85em !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 2px !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
}

/* 强制子元素严格继承基准字号与行高 */
.skin-timeless #footer-info *,
.skin-timeless #footer-places * {
    font-size: inherit !important;
    line-height: 1.25 !important;
}

/* 第一行：访问次数 */
.skin-timeless #footer-info-viewcount {
    order: 1 !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    display: block !important;
    text-align: center !important;
}

/* 第二行：版权声明 */
.skin-timeless #footer-info-copyright {
    order: 2 !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    display: block !important;
    text-align: center !important;
}


/* ===================================================
   4. 第三行：隐私政策 / 关于 / 免责声明 (横向居中)
   =================================================== */
.skin-timeless #footer-places {
    order: 2 !important;
    font-size: 0.85em !important;
    display: flex !important;
    flex-direction: row !important;      /* 保持横向并排 */
    justify-content: center !important;  /* 水平居中 */
    align-items: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 4px auto !important;
    list-style: none !important;
    gap: 16px !important;                /* 横向链接间距 */
}

.skin-timeless #footer-places li {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

.skin-timeless #footer-places a,
.skin-timeless #footer-places li a {
    color: rgba(255, 255, 255, 0.95) !important;
    text-decoration: none !important;
}


/* ===================================================
   5. 第四行：图标容器与顶部渐变分割线 (居中)
   =================================================== */
.skin-timeless #footer-icons,
.skin-timeless #f-poweredbyico,
.skin-timeless .footer-icons {
    order: 3 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 35px !important;              /* PC端图标横向间距 */
    margin: 4px auto 0 auto !important;
    padding-top: 16px !important;
    position: relative !important;
    list-style: none !important;
    width: 100% !important;
}

/* 图标上方渐变过渡线 */
.skin-timeless #footer-icons::before,
.skin-timeless #f-poweredbyico::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 200px !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
}

/* 清除 li / a 的外层硬编码样式 */
.skin-timeless #footer-icons li, 
.skin-timeless #footer-icons a,
.skin-timeless #f-poweredbyico li, 
.skin-timeless #f-poweredbyico a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* ===================================================
   6. 图标基础外观与 Hover 动画
   =================================================== */
.skin-timeless #footer-icons img,
.skin-timeless #f-poweredbyico img,
.skin-timeless #footer-poweredbyico img {
    background-color: #ffffff !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    object-fit: contain !important;
    display: block !important;
    opacity: 0.88;
    transition: all 0.25s ease-in-out !important;
}

/* 图标悬停效果 */
.skin-timeless #footer-icons img:hover,
.skin-timeless #f-poweredbyico img:hover {
    opacity: 1 !important;
    transform: translateY(-2px) scale(1.04) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}


/* ===================================================
   7. 响应式适配（PC 端与手机端）
   =================================================== */

/* 💻 PC 端 (屏幕宽度 > 768px) */
@media screen and (min-width: 769px) {
    .skin-timeless #footer-icons img,
    .skin-timeless #f-poweredbyico img {
        height: 28px !important;
        padding: 3px 8px !important;
    }
}

/* 📱 手机端 (屏幕宽度 <= 768px) */
@media screen and (max-width: 768px) {
    .skin-timeless #footer-icons,
    .skin-timeless #f-poweredbyico {
        gap: 10px !important;
    }

    .skin-timeless #footer-icons img,
    .skin-timeless #f-poweredbyico img {
        height: 32px !important;
        padding: 4px 10px !important;
    }
}