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, 255, 255, 0.065) !important;
    border-radius: 9px !important;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.032),
            rgba(255, 255, 255, 0.014)
        ) !important;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.13),
        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:not(.first) .tgui-menu__heading::before {
    margin-right: 7px !important;

    color: #8f98a8 !important;

    opacity: 0.9 !important;

    transform: rotate(0deg) scale(0.68) !important;
}

.tgui-sidebar-content .tgui-menu:not(.first).collapsed .tgui-menu__heading::before {
    transform: rotate(-90deg) scale(0.68) !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 / main menu slightly more prominent */

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

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

.tgui-sidebar-content .tgui-menu.first .tgui-menu__heading {
    color: #f1f3f7 !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;
}