MediaWiki:Timeless.css

Chú ý: Sau khi lưu trang, có thể bạn sẽ phải xóa bộ nhớ đệm của trình duyệt để xem các thay đổi.

• Firefox / Safari: Nhấn giữ phím Shift trong khi nhấn Tải lại (Reload), hoặc nhấn tổ hợp Ctrl-F5 hay Ctrl-R (⌘R trên Mac).
• Google Chrome: Nhấn tổ hợp Ctrl-Shift-R (⇧⌘R trên Mac).
• Edge: Nhấn giữ phím Ctrl trong khi nhấn Làm tươi (Refresh), hoặc nhấn tổ hợp Ctrl-F5.

/* Tất cả mã CSS tại đây sẽ được tải khi người dùng sử dụng giao diện Vượt thời gian */
/* Tăng kích thước logo cho skin Timeless */
#p-logo a {
    display: block;
    max-width: none;
    height: auto;
}

#p-logo img {
    max-height: 200px; /* Hoặc 80px, tuỳ bạn */
    width: auto;
}

/* Ẩn infobox trên điện thoại */
@media (max-width: 768px) {
    .infobox {
        display: none !important;
    }
}

/* Floating TOC on the left for Timeless skin */
/* Tùy chỉnh mục lục để nằm trong sidebar */
#toc {
    position: relative;
    margin-top: 1em;
    padding: 0.5em;
    background-color: #f8f9fa;
    border: 1px solid #a2a9b1;
    border-radius: 4px;
    font-size: 0.9em;
}

/* Khi được sticky, sẽ có lớp này thêm vào */
#toc.sticky-toc {
    position: fixed !important;
    top: 80px !important; /* Điều chỉnh theo chiều cao header */
    left: 10px !important;
    width: 220px !important;
    max-height: 80vh !important;
    background-color: #f8f9fa !important;
    border: 1px solid #a2a9b1 !important;
    border-radius: 4px !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important; /* Ẩn scroll ngoài, chỉ scroll nội dung */
}

/* Scroll riêng phần danh sách trong TOC */
#toc.sticky-toc > ul {
    overflow-y: auto !important;
    max-height: calc(80vh - 3em) !important; /* Giảm chiều cao phần tiêu đề */
    padding-right: 0.5em !important; /* Để không che nội dung với scrollbar */
}

/* Đảm bảo TOC nằm trong #mw-site-navigation */
#mw-site-navigation {
    position: relative !important; /* Đảm bảo khu vực này có thể chứa TOC */
}

/* Khi màn hình nhỏ: TOC về lại đầu nội dung */
@media (max-width: 1000px) {
    #toc {
        position: relative !important;
        width: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 1em auto !important;
        left: auto !important;
        top: auto !important;
    }

    #toc.sticky-toc {
        position: relative !important;
        display: block !important;
    }

    #toc > ul {
        max-height: none !important;
        overflow: visible !important;
    }

    #mw-content {
        margin-left: 0 !important;
    }
}

/* Đảm bảo #mw-content-container có position relative */
#mw-content-container {
    position: relative !important; /* Giúp TOC bám vào vị trí chính xác trong nội dung */
}

/* Cập nhật #mw-content-wrapper để tạo không gian cho TOC */
#mw-content-wrapper {
    display: flex !important; /* Dùng flexbox để bố trí TOC và nội dung */
    flex-wrap: wrap !important; /* Cho phép phần tử linh hoạt trong không gian */
}

#mw-content {
    flex: 1 !important; /* Nội dung chính chiếm toàn bộ không gian còn lại */
}