refactor(App): update vertical sidebar styling to a consistent dark theme, enhancing visual coherence and user experience
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 2m1s
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 2m1s
This commit is contained in:
@@ -6,6 +6,43 @@
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Сайдбар: всегда тёмный (как на референсе Tabler) */
|
||||
.navbar-vertical {
|
||||
--tblr-body-color: rgba(255, 255, 255, 0.9);
|
||||
--tblr-body-color-rgb: 255, 255, 255;
|
||||
--tblr-border-color: rgba(255, 255, 255, 0.1);
|
||||
--tblr-bg-surface: #1e293b;
|
||||
--tblr-bg-surface-hover: rgba(255, 255, 255, 0.05);
|
||||
--tblr-navbar-active-bg: rgba(255, 255, 255, 0.08);
|
||||
--tblr-navbar-active-color: #fff;
|
||||
--tblr-primary: #6ea8fe;
|
||||
--tblr-muted: rgba(255, 255, 255, 0.6);
|
||||
background-color: #1e293b !important;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.navbar-vertical .navbar-brand,
|
||||
.navbar-vertical .nav-link,
|
||||
.navbar-vertical .dropdown-item {
|
||||
color: inherit;
|
||||
}
|
||||
.navbar-vertical .navbar-brand:hover,
|
||||
.navbar-vertical .nav-link:hover,
|
||||
.navbar-vertical .dropdown-item:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.navbar-vertical .nav-link.active,
|
||||
.navbar-vertical .dropdown-item.active {
|
||||
background-color: var(--tblr-navbar-active-bg);
|
||||
color: var(--tblr-navbar-active-color);
|
||||
}
|
||||
.navbar-vertical .dropdown-toggle::after {
|
||||
border-top-color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.navbar-vertical .navbar-toggler {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
/* Сайдбар: у бренда убираем лишний отступ и стрелку (Tabler не должен добавлять caret к brand) */
|
||||
.navbar-vertical .navbar-brand {
|
||||
padding-left: 0;
|
||||
|
||||
@@ -400,8 +400,8 @@ function MainLayout() {
|
||||
Перейти к основному содержанию
|
||||
</a>
|
||||
|
||||
{/* Левая вертикальная навигация (Tabler navbar-vertical) */}
|
||||
<header className="navbar navbar-vertical navbar-expand-md d-print-none">
|
||||
{/* Левая вертикальная навигация — всегда тёмная (Tabler navbar-vertical) */}
|
||||
<header className="navbar navbar-vertical navbar-expand-md d-print-none" data-bs-theme="dark">
|
||||
<div className="container-fluid">
|
||||
<Link to="/" className="navbar-brand navbar-brand-autodark">
|
||||
<IconBrandTabler className="navbar-brand-icon" />
|
||||
|
||||
Reference in New Issue
Block a user