MediaWiki:Tgui.css: различия между версиями

/* RedStar TGUI fixes */

/* Header must always stay above the sticky sidebar. */
.tgui-header {
    z-index: 10 !important;
}

.tgui-sidebar-container,
.tgui-sidebar {
    z-index: 5 !important;
}

/* Hide TGUI page tabs/actions on RedStar */
.page-actions {
    display: none !important;
}

html.skin-tgui {
    --redstar-tgui-loaded: 1;
}

/* Hide article/talk tabs */
.page-actions__left {
    display: none !important;
}

/* ============================================================
   RedStar sidebar
   ============================================================ */

.tgui-sidebar {
    background:
        linear-gradient(
            180deg,
            rgba(14, 16, 22, 0.98) 0%,
            rgba(9, 11, 15, 0.98) 100%
        ) !important;

    border-right: 1px solid rgba(255, 255, 255, 0.055) !important;

    box-shadow:
        8px 0 26px rgba(0, 0, 0, 0.22),
        inset -1px 0 rgba(255, 59, 63, 0.025) !important;
}

.tgui-sidebar-content {
    padding: 8px 7px 12px 6px !important;
}


/* Category panel */

.tgui-sidebar-content .tgui-menu {
    margin: 0 0 8px 0 !important;

    border: 1px solid rgba(255, 59, 63, 0.11) !important;
    border-radius: 9px !important;

    background:
        linear-gradient(
            180deg,
            rgba(255, 59, 63, 0.030),
            rgba(255, 255, 255, 0.018)
        ) !important;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.16),
        inset 0 1px rgba(255, 255, 255, 0.025) !important;

    overflow: hidden !important;
}


/* Category heading */

.tgui-sidebar-content .tgui-menu__heading {
    position: relative !important;

    height: 34px !important;

    padding: 0 11px !important;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025),
            rgba(255, 255, 255, 0.008)
        ) !important;

    color: #d9dee8 !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;

    border: 0 !important;
}


/* Thin RedStar accent under category heading */

.tgui-sidebar-content .tgui-menu__heading::after {
    content: "" !important;

    position: absolute !important;

    left: 10px !important;
    right: 10px !important;
    bottom: 0 !important;

    height: 1px !important;

    background:
        linear-gradient(
            90deg,
            rgba(255, 59, 63, 0.62),
            rgba(255, 59, 63, 0.13) 65%,
            transparent
        ) !important;
}


/* Collapse arrow */

.tgui-sidebar-content .tgui-menu .tgui-menu__heading::before {
    content: "" !important;

    display: inline-block !important;
    flex: 0 0 auto !important;

    width: 5px !important;
    height: 5px !important;

    margin: 0 9px 1px 2px !important;

    border-right: 1px solid #8f98a8 !important;
    border-bottom: 1px solid #8f98a8 !important;

    opacity: 0.9 !important;

    transform: rotate(45deg) !important;
    transform-origin: center !important;

    transition:
        transform 0.14s ease,
        border-color 0.14s ease !important;
}

.tgui-sidebar-content .tgui-menu.collapsed .tgui-menu__heading::before {
    transform: rotate(-45deg) !important;
}

.tgui-sidebar-content .tgui-menu .tgui-menu__heading:hover::before {
    border-color: #c4cad4 !important;
}


/* Category content */


.tgui-sidebar-content .tgui-menu__content {
    background: transparent !important;
}

.tgui-sidebar-content .tgui-menu__content ul {
    gap: 2px !important;

    padding: 7px !important;
}


/* Navigation item */

.tgui-sidebar-content .tgui-menu__content li {
    position: relative !important;

    min-height: 28px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 6px !important;

    background: transparent !important;

    box-shadow: none !important;

    transition:
        background 0.14s ease,
        color 0.14s ease,
        transform 0.14s ease !important;
}


/* Kill old TGUI button treatment */

.tgui-sidebar-content .tgui-menu__content li::before,
.tgui-sidebar-content .tgui-menu__content li::after {
    box-shadow: none !important;
    border: 0 !important;
}


/* Link */

.tgui-sidebar-content .tgui-menu__content li > a {
    display: flex !important;
    align-items: center !important;

    box-sizing: border-box !important;

    width: 100% !important;
    height: 28px !important;

    padding: 0 9px !important;

    color: #aeb7c5 !important;

    font-size: 11px !important;
    font-weight: 550 !important;
    line-height: 28px !important;

    text-decoration: none !important;

    border-radius: 6px !important;
}


/* Hover */

.tgui-sidebar-content .tgui-menu__content li:hover {
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.022)
        ) !important;
}

.tgui-sidebar-content .tgui-menu__content li:hover > a {
    color: #eef1f6 !important;
}


/* Active/current page */

.tgui-sidebar-content .tgui-menu__content li.selected,
.tgui-sidebar-content .tgui-menu__content li.active,
.tgui-sidebar-content .tgui-menu__content li.current,
.tgui-sidebar-content .tgui-menu__content li:has(> a[aria-current="page"]) {
    background:
        linear-gradient(
            90deg,
            rgba(255, 59, 63, 0.15),
            rgba(255, 59, 63, 0.055)
        ) !important;

    box-shadow:
        inset 2px 0 0 rgba(255, 59, 63, 0.78) !important;
}

.tgui-sidebar-content .tgui-menu__content li.selected > a,
.tgui-sidebar-content .tgui-menu__content li.active > a,
.tgui-sidebar-content .tgui-menu__content li.current > a,
.tgui-sidebar-content .tgui-menu__content li:has(> a[aria-current="page"]) > a {
    color: #f5dfe0 !important;
    font-weight: 650 !important;
}


/* First menu uses the same treatment as every other category */

.tgui-sidebar-content .tgui-menu.first {
    border-color: rgba(255, 59, 63, 0.11) !important;

    background:
        linear-gradient(
            180deg,
            rgba(255, 59, 63, 0.030),
            rgba(255, 255, 255, 0.018)
        ) !important;
}

.tgui-sidebar-content .tgui-menu.first .tgui-menu__heading {
    color: #d9dee8 !important;
}


/* Remove inherited TGUI blue accent */

.tgui-sidebar-content .tgui-menu,
.tgui-sidebar-content .tgui-menu.collapsed,
.tgui-sidebar-content .tgui-menu__heading,
.tgui-sidebar-content .tgui-menu__heading:hover,
.tgui-sidebar-content .tgui-menu__heading:focus,
.tgui-sidebar-content .tgui-menu__heading:focus-visible {
    border-bottom-color: transparent !important;
    outline: none !important;
}

.tgui-sidebar-content .tgui-menu__heading {
    box-shadow: none !important;
}


/* Scrollbar */


.tgui-sidebar-content {
    scrollbar-width: thin !important;
    scrollbar-color:
        rgba(255, 255, 255, 0.12)
        transparent !important;
}

.tgui-sidebar-content::-webkit-scrollbar {
    width: 6px !important;
}

.tgui-sidebar-content::-webkit-scrollbar-track {
    background: transparent !important;
}

.tgui-sidebar-content::-webkit-scrollbar-thumb {
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

.tgui-sidebar-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.20) !important;
}



/* RedStar first-menu collapse fix */

/*
 * TGUI intentionally excludes .first from its collapsible-menu styles.
 * JS now handles every .tgui-menu, so give the first menu the same
 * collapse behaviour here.
 */
.tgui-sidebar-content .tgui-menu.first .tgui-menu__heading {
    cursor: pointer !important;
    user-select: none !important;
}

.tgui-sidebar-content .tgui-menu.first .tgui-menu__content {
    display: grid !important;
    grid-template-rows: 1fr !important;

    transition:
        grid-template-rows 0.2s ease !important;
}

.tgui-sidebar-content .tgui-menu.first.collapsed .tgui-menu__content {
    grid-template-rows: 0fr !important;
}

.tgui-sidebar-content .tgui-menu.first.collapsed .tgui-menu__content ul {
    opacity: 0 !important;
    visibility: hidden !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    transform: scale(0.75) !important;
}


/*
 * TGUI's MenuPortal.less adds .border-animation(@top: true)
 * to menu content. That is the blue line showing beneath expanded
 * categories. RedStar already draws its own red accent on the heading.
 */
.tgui-sidebar-content .tgui-menu__content::before,
.tgui-sidebar-content .tgui-menu__content::after {
    display: none !important;

    content: none !important;

    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* Ensure the menu content can actually collapse inside the grid row. */
.tgui-sidebar-content .tgui-menu__content > ul {
    min-height: 0 !important;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        padding 0.2s ease !important;
}