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

Improve sidebar card contrast
Move main page chrome integration to TGUI skin styles
 
(не показаны 4 промежуточные версии этого же участника)
Строка 12: Строка 12:


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


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


/* Hide article/talk tabs */
/* Main page chrome */
.page-actions__left {
body.page-Заглавная_страница .mw-first-heading,
body.page-Заглавная_страница .tgui-page-header,
body.page-Заглавная_страница .page-info,
body.page-Заглавная_страница #siteSub,
body.page-Заглавная_страница .mw-indicators {
     display: none !important;
     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;
}
}

Текущая версия от 21:13, 29 сентября 2026

/* 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,
.page-actions__left {
    display: none !important;
}


/* Main page chrome */
body.page-Заглавная_страница .mw-first-heading,
body.page-Заглавная_страница .tgui-page-header,
body.page-Заглавная_страница .page-info,
body.page-Заглавная_страница #siteSub,
body.page-Заглавная_страница .mw-indicators {
    display: none !important;
}