MediaWiki:Citizen.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.

/* All CSS here will be loaded for users of the Citizen skin */
:root {
    /* Pink is the new black */
    --color-primary__h: 75;
}

/* Sidebar Toggle Button */
.citizen-sidebar-toggle {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    background-color: var(--color-surface-2, #f8f9fa);
    border: 1px solid var(--color-surface-3, #eaecf0);
    border-left: none;
    border-radius: 0 4px 4px 0;
    color: var(--color-base, #202122);
    padding: 8px 5px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Parent item with submenu styling */
.menu-parent {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
}

/* Styling for the preserved parent link */
.menu-parent-text {
    flex: 1;
    color: var(--color-base, #202122);
}

/* Submenu Toggle Button */
.submenu-toggle {
    color: var(--color-primary, #3366cc);
    background: none;
    border: none;
    padding: 0;
    margin-left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.submenu-toggle svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transition: transform 0.2s ease;
}

/* Rotate the icon when expanded */
.expanded .submenu-toggle svg {
    transform: rotate(90deg);
}

/* Submenu container */
.submenu-items {
    display: none;
    padding-left: 1.5em;
    margin: 0;
}

/* Show submenu container when expanded */
.expanded + .submenu-items {
    display: block;
}

/* Submenu item styling */
.submenu-items li {
    margin: 0;
}

/* Sidebar transition effects */
.citizen-page-sidebar {
    transition: transform 0.3s ease, margin-left 0.3s ease, opacity 0.3s ease;
}

.citizen-sidebar-closed .citizen-page-sidebar {
    transform: translateX(-100%);
    margin-left: -16em;
    opacity: 0;
}

.citizen-body-container {
    transition: grid-template-columns 0.3s ease;
}

.citizen-sidebar-closed .citizen-body-container {
    grid-template-columns: 0 1fr !important;
}