MediaWiki:Timeless.css:修订间差异

来自開源之海
Johnson留言 | 贡献
创建页面,内容为“这里放置的CSS将应用于Timeless皮肤:​ 當螢幕寬度足夠時(寬於 1100px,避開 Timeless 的折疊狀態):​ @media screen and (min-width: 1100px) { #toc { float: right; position: sticky; 讓目錄跟隨捲動:​ top: 20px; 距離頂部的距離:​ margin: 0 0 1em 1em; max-width: 250px; max-height: 80vh; 防止目錄太長超出螢幕:​ overflow-y: auto; /* 長…”
 
Johnson留言 | 贡献
无编辑摘要
第1行: 第1行:
/* 这里放置的CSS将应用于Timeless皮肤 */
/* 这里放置的CSS将应用于Timeless皮肤 */
/* 當螢幕寬度足夠時(寬於 1100px,避開 Timeless 的折疊狀態) */
/* 當螢幕寬度足夠時(寬於 1100px,避開 Timeless 的折疊狀態) */
/* 針對 Timeless 寬螢幕環境下的目錄優化 */
@media screen and (min-width: 1100px) {
@media screen and (min-width: 1100px) {
     #toc {
     #toc {
        /* 設定為右側浮動並使用 Sticky 效果 */
         float: right;
         float: right;
         position: sticky; /* 讓目錄跟隨捲動 */
         position: sticky;
         top: 20px;       /* 距離頂部的距離 */
        top: 1em;
         margin: 0 0 1em 1em;
       
         max-width: 250px;
        /* 寬度調整:與 Timeless 右側欄塊一致 */
         max-height: 80vh; /* 防止目錄太長超出螢幕 */
         width: 15.5em;
         overflow-y: auto; /* 長目錄可內部捲動 */
        box-sizing: border-box;
       
        /* 間距調整:左邊距與下方工具欄對齊,底邊距拉開 */
         margin: 0 0 1.5em 1.5em;
       
        /* 內距與邊框:模仿 Timeless 的 sidebar-chunk 風格 */
        padding: 1em;
         background-color: #f8f9fa;
        border: 1px solid #eaecf0;
         border-radius: 2px;
       
        /* 處理內容過長 */
        max-height: 85vh;
         overflow-y: auto;
         z-index: 10;
         z-index: 10;
         background: #f8f9fa;
         font-size: 0.9em;
         border: 1px solid #a2a9b1;
    }
         padding: 5px;
 
    /* 隱藏目錄內的「顯示/隱藏」切換按鈕(選用,可讓介面更簡潔) */
    .toctogglecheck:checked ~ .toctitle + ul,
    .toctogglecheck ~ .toctitle + ul {
        display: block !important;
    }
    .toctogglespan {
        display: none;
    }
}
 
/* 確保正文不會被目錄壓到(在極窄螢幕寬度時) */
@media screen and (max-width: 1099px) {
    #toc {
        float: none;
         width: auto;
         margin: 1em 0;
     }
     }
}
}

2026年4月29日 (三) 22:34的版本

/* 这里放置的CSS将应用于Timeless皮肤 */
/* 當螢幕寬度足夠時(寬於 1100px,避開 Timeless 的折疊狀態) */
/* 針對 Timeless 寬螢幕環境下的目錄優化 */
@media screen and (min-width: 1100px) {
    #toc {
        /* 設定為右側浮動並使用 Sticky 效果 */
        float: right;
        position: sticky;
        top: 1em;
        
        /* 寬度調整:與 Timeless 右側欄塊一致 */
        width: 15.5em; 
        box-sizing: border-box;
        
        /* 間距調整:左邊距與下方工具欄對齊,底邊距拉開 */
        margin: 0 0 1.5em 1.5em; 
        
        /* 內距與邊框:模仿 Timeless 的 sidebar-chunk 風格 */
        padding: 1em;
        background-color: #f8f9fa;
        border: 1px solid #eaecf0;
        border-radius: 2px;
        
        /* 處理內容過長 */
        max-height: 85vh;
        overflow-y: auto;
        z-index: 10;
        font-size: 0.9em;
    }

    /* 隱藏目錄內的「顯示/隱藏」切換按鈕(選用,可讓介面更簡潔) */
    .toctogglecheck:checked ~ .toctitle + ul,
    .toctogglecheck ~ .toctitle + ul {
        display: block !important;
    }
    .toctogglespan {
        display: none;
    }
}

/* 確保正文不會被目錄壓到(在極窄螢幕寬度時) */
@media screen and (max-width: 1099px) {
    #toc {
        float: none;
        width: auto;
        margin: 1em 0;
    }
}