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

← Предыдущая правка

Maintenance script (обсуждение | вклад)

290 правок
Fix first sidebar collapse and remove TGUI blue accent
Move main page chrome integration to TGUI skin styles
 
(не показано 8 промежуточных версий этого же участника)
Строка 12: Строка 12:


/* Hide TGUI page tabs/actions on RedStar */
/* Hide TGUI page tabs/actions on RedStar */
.page-actions {
.page-actions,
    display: none !important;
}
 
html.skin-tgui {
    --redstar-tgui-loaded: 1;
}
 
/* Hide article/talk tabs */
.page-actions__left {
.page-actions__left {
     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;
/* Main page chrome */
 
body.page-Заглавная_страница .mw-first-heading,
    box-shadow:
body.page-Заглавная_страница .tgui-page-header,
        8px 0 26px rgba(0, 0, 0, 0.22),
body.page-Заглавная_страница .page-info,
        inset -1px 0 rgba(255, 59, 63, 0.025) !important;
body.page-Заглавная_страница #siteSub,
}
body.page-Заглавная_страница .mw-indicators {
 
.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;
     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;
}
}

Текущая версия от 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;
}
Источник — https://redstar14.com/index.php?title=MediaWiki:Tgui.css&oldid=240