Khác biệt giữa bản sửa đổi của “MediaWiki:Timeless.css”

Phiên bản lúc 17:47, ngày 21 tháng 4 năm 2025

/* 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; /* Điều chỉnh theo chiều cao header */
    left: 10px;
    width: 220px;
    max-height: 80vh;
    background-color: #f8f9fa;
    border: 1px solid #a2a9b1;
    border-radius: 4px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Ẩ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;
    max-height: calc(80vh - 3em); /* Giảm chiều cao phần tiêu đề */
    padding-right: 0.5em; /* Để không che nội dung với scrollbar */
}

/* 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ục lục TOC cho các heading */
#toc ul ul {
    display: block; /* Luôn hiển thị các heading con */
    padding-left: 20px; /* Đẩy lùi các heading con */
}

/* Cập nhật khi một mục lục được collapse */
#toc .collapsed > ul {
    display: none; /* Ẩn các heading con khi mục lục bị đóng */
}