MediaWiki:Tgui.css
Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
- Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
- Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
- Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
- Opera: Нажмите Ctrl+F5.
/* 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.038),
rgba(255, 255, 255, 0.017)
) !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.065) !important;
}
/* Subtle response on hover */
.tgui-sidebar-content .tgui-menu.collapsed:hover {
border-color: rgba(255, 59, 63, 0.13) !important;
background:
linear-gradient(
180deg,
rgba(255, 59, 63, 0.028),
rgba(255, 255, 255, 0.018)
) !important;
}
/* 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;
}