MediaWiki:Timeless.css

来自開源之海

注意:在发布之后,您可能需要清除浏览器缓存才能看到所作出的更改的影响。

  • Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5Ctrl-R(Mac为⌘-R
  • Google Chrome:Ctrl-Shift-R(Mac为⌘-Shift-R
  • Edge:按住Ctrl的同时单击刷新,或按Ctrl-F5
/* 这里放置的CSS将应用于Timeless皮肤 */
/* 當螢幕寬度足夠時(寬於 1100px,避開 Timeless 的折疊狀態) */
/* 針對 Timeless 寬螢幕環境下的目錄優化 */
/* 當螢幕夠寬,Timeless 顯示右側欄時(通常為 1100px 以上) */
@media screen and (min-width: 1100px) {
    /* 1. 移除正文區的目錄佔位 */
    #toc {
        position: absolute;
        /* 將目錄推到右側預留的欄位空間 */
        right: -17em; 
        top: 0;
        
        /* 寬度與 Timeless 右欄對齊 */
        width: 15.5em;
        box-sizing: border-box;
        
        /* 外觀與間距微調 */
        margin: 0 !important;
        padding: 1.2em;
        background: #f8f9fa;
        border: 1px solid #eaecf0;
        font-size: 0.85em;
        z-index: 1;
    }

    /* 2. 確保容器父元素是定位基準 */
    #content {
        position: relative;
    }
}

/* 在中等或小螢幕下,讓目錄回到正文頂部正常顯示 */
@media screen and (max-width: 1099px) {
    #toc {
        position: static;
        width: auto;
        right: auto;
        margin: 1em 0;
    }
}

/* 隱藏原本目錄的邊框和背景,因為 sidebar-chunk 已經有了 */
#p-toc-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.9em;
}

#p-toc-sidebar .sidebar-inner {
    max-height: 70vh; /* 避免目錄太長 */
    overflow-y: auto;
}

/* 調整目錄階層的縮排 */
#p-toc-sidebar .toclevel-1 { margin-top: 0.3em; }
#p-toc-sidebar .toclevel-2 { margin-left: 1em; font-size: 0.95em; }
#p-toc-sidebar .toclevel-3 { margin-left: 2em; font-size: 0.9em; }

/* 隱藏編號(如果覺得太擠的話,選用) */
/* #p-toc-sidebar .tocnumber { display: none; } */

#p-toc-sidebar .sidebar-inner::after {
    content: "";
    display: block;
    height: 2.0em; /* 這裡精確控制方塊底部的留白高度 */
    width: 100%;
}