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.075) !important;
    border-radius: 9px !important;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.060),
            rgba(255, 255, 255, 0.025)
        ) !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;

    transition:
        border-color 0.14s ease,
        background 0.14s ease,
        box-shadow 0.14s ease !important;
}

/* Expanded category */
.tgui-sidebar-content .tgui-menu:not(.collapsed) {
    border-color: rgba(255, 59, 63, 0.16) !important;

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

    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.18),
        inset 0 1px rgba(255, 255, 255, 0.028) !important;
}

/* Collapsed category */
.tgui-sidebar-content .tgui-menu.collapsed {
    border-color: rgba(255, 255, 255, 0.095) !important;
}

/* Category hover */

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

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

    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.22),
        inset 2px 0 0 rgba(255, 59, 63, 0.42),
        inset 0 1px rgba(255, 255, 255, 0.035) !important;
}

.tgui-sidebar-content .tgui-menu.collapsed:hover > .tgui-menu__heading {
    color: #f0f2f6 !important;
}


/* Category heading */

/* Category heading */

/* 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;
}


/* 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;
}


/* 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 header
   ============================================================ */

.tgui-header {
    background:
        linear-gradient(
            180deg,
            rgba(46, 17, 22, 0.88) 0%,
            rgba(24, 15, 19, 0.82) 100%
        ) !important;

    border-bottom: 1px solid rgba(255, 59, 63, 0.16) !important;

    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.28),
        inset 0 -1px rgba(255, 255, 255, 0.025) !important;

    -webkit-backdrop-filter: blur(14px) saturate(115%);
    backdrop-filter: blur(14px) saturate(115%);
}

/* Disable the stock TGUI header shadow layer. */
.tgui-header::before {
    opacity: 0 !important;
}

/* Header buttons */
.tgui-header .tgui-header__button,
.tgui-header .tgui-dropdown-summary {
    border-radius: 7px !important;

    transition:
        color 0.14s ease,
        background 0.14s ease,
        box-shadow 0.14s ease !important;
}

.tgui-header .tgui-header__button:hover,
.tgui-header .tgui-dropdown-summary:hover {
    background:
        linear-gradient(
            180deg,
            rgba(255, 59, 63, 0.11),
            rgba(255, 59, 63, 0.045)
        ) !important;

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

/* Search field */
.tgui-header form[role="search"],
.tgui-header .search-box,
.tgui-header .search-form {
    border-radius: 8px !important;
}

/* Search input / combobox surface */
.tgui-header input[type="search"],
.tgui-header input[name="search"],
.tgui-header .cdx-text-input__input {
    background:
        linear-gradient(
            180deg,
            rgba(4, 6, 10, 0.62),
            rgba(8, 9, 13, 0.72)
        ) !important;

    border-color: rgba(255, 255, 255, 0.10) !important;

    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.35),
        0 1px rgba(255, 255, 255, 0.02) !important;

    transition:
        border-color 0.14s ease,
        box-shadow 0.14s ease,
        background 0.14s ease !important;
}

/* Search focus */
.tgui-header input[type="search"]:focus,
.tgui-header input[name="search"]:focus,
.tgui-header .cdx-text-input__input:focus {
    border-color: rgba(255, 59, 63, 0.42) !important;

    background:
        linear-gradient(
            180deg,
            rgba(18, 8, 11, 0.78),
            rgba(8, 9, 13, 0.78)
        ) !important;

    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(255, 59, 63, 0.10),
        0 0 12px rgba(255, 59, 63, 0.055) !important;

    outline: none !important;
}