MediaWiki:Timeless.css:修订间差异

来自開源之海
Johnson留言 | 贡献
无编辑摘要
Johnson留言 | 贡献
无编辑摘要
第2行: 第2行:
/* 當螢幕寬度足夠時(寬於 1100px,避開 Timeless 的折疊狀態) */
/* 當螢幕寬度足夠時(寬於 1100px,避開 Timeless 的折疊狀態) */
/* 針對 Timeless 寬螢幕環境下的目錄優化 */
/* 針對 Timeless 寬螢幕環境下的目錄優化 */
/* 當螢幕夠寬,Timeless 顯示右側欄時(通常為 1100px 以上) */
@media screen and (min-width: 1100px) {
@media screen and (min-width: 1100px) {
    /* 1. 移除正文區的目錄佔位 */
     #toc {
     #toc {
         /* 設定為右側浮動並使用 Sticky 效果 */
        position: absolute;
         float: right;
         /* 將目錄推到右側預留的欄位空間 */
        position: sticky;
         right: -17em;  
         top: 1em;
         top: 0;
          
          
         /* 寬度調整:與 Timeless 右側欄塊一致 */
         /* 寬度與 Timeless 右欄對齊 */
         width: 15.5em;  
         width: 15.5em;
         box-sizing: border-box;
         box-sizing: border-box;
          
          
         /* 間距調整:左邊距與下方工具欄對齊,底邊距拉開 */
         /* 外觀與間距微調 */
         margin: 0 0 1.5em 1.5em;  
         margin: 0 !important;
       
         padding: 1.2em;
        /* 內距與邊框:模仿 Timeless 的 sidebar-chunk 風格 */
         background: #f8f9fa;
         padding: 1em;
         background-color: #f8f9fa;
         border: 1px solid #eaecf0;
         border: 1px solid #eaecf0;
         border-radius: 2px;
         font-size: 0.85em;
       
         z-index: 1;
        /* 處理內容過長 */
        max-height: 85vh;
        overflow-y: auto;
         z-index: 10;
        font-size: 0.9em;
     }
     }


     /* 隱藏目錄內的「顯示/隱藏」切換按鈕(選用,可讓介面更簡潔) */
     /* 2. 確保容器父元素是定位基準 */
     .toctogglecheck:checked ~ .toctitle + ul,
     #content {
    .toctogglecheck ~ .toctitle + ul {
         position: relative;
        display: block !important;
    }
    .toctogglespan {
         display: none;
     }
     }
}
}


/* 確保正文不會被目錄壓到(在極窄螢幕寬度時) */
/* 在中等或小螢幕下,讓目錄回到正文頂部正常顯示 */
@media screen and (max-width: 1099px) {
@media screen and (max-width: 1099px) {
     #toc {
     #toc {
         float: none;
         position: static;
         width: auto;
         width: auto;
        right: auto;
         margin: 1em 0;
         margin: 1em 0;
     }
     }
}
}

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

/* 这里放置的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;
    }
}