Mirrors/SqlDatabaseVectorSearch
1
0
Fork 0
mirror of https://github.com/marcominerva/SqlDatabaseVectorSearch.git synced 2026-08-04 09:48:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Revamp sidebar with modern color palette and styles

Browse Source 
Updated sidebar CSS to use a blue and neutral color palette, added vertical gradient backgrounds and box-shadows, and enhanced navigation item styles with rounded corners, transitions, and bold active states. Adjusted icon colors and updated comments for new color inheritance approach.
This commit is contained in:
Marco Minerva
2026-07-28 16:10:33 +02:00
parent 96c81b7dc3
commit 832d21ec9e
1 changed files with 40 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SqlDatabaseVectorSearch/wwwroot/css/app.css
+37 -19
View File
@@ -7,43 +7,61 @@ body, html {
:root { :root {
--bb-sidebar2-width: 270px; --bb-sidebar2-width: 270px;
--bb-sidebar2-collapsed-width: 50px; --bb-sidebar2-collapsed-width: 50px;
--bb-sidebar2-background-color: rgba(234, 234, 234, 1); --bb-sidebar2-background-color: transparent;
--bb-sidebar2-top-row-background-color: rgba(0,0,0,0.08); --bb-sidebar2-top-row-background-color: transparent;
--bb-sidebar2-top-row-border-color: rgb(194,192,192); --bb-sidebar2-top-row-border-color: rgba(13,110,253,0.12);
--bb-sidebar2-title-text-color: rgb(0,0,0); --bb-sidebar2-title-text-color: #1b2436;
--bb-sidebar2-brand-icon-color: #0d6efd; --bb-sidebar2-brand-icon-color: #0d6efd;
--bb-sidebar2-brand-image-width: 24px; --bb-sidebar2-brand-image-width: 24px;
--bb-sidebar2-brand-image-height: 24px; --bb-sidebar2-brand-image-height: 24px;
--bb-sidebar2-title-badge-text-color: rgb(255,255,255); --bb-sidebar2-title-badge-text-color: rgb(255,255,255);
--bb-sidebar2-title-badge-background-color: rgba(25,135,84,var(--bs-bg-opacity,1)); --bb-sidebar2-title-badge-background-color: rgba(25,135,84,var(--bs-bg-opacity,1));
--bb-sidebar2-navbar-toggler-icon-color: rgb(0,0,0); --bb-sidebar2-navbar-toggler-icon-color: #1b2436;
--bb-sidebar2-navbar-toggler-background-color: rgba(0,0,0,0.08); --bb-sidebar2-navbar-toggler-background-color: rgba(13,110,253,0.08);
--bb-sidebar2-content-border-color: rgb(194,192,192); --bb-sidebar2-content-border-color: rgba(13,110,253,0.12);
--bb-sidebar2-nav-item-text-color: rgba(0,0,0,0.9); --bb-sidebar2-nav-item-text-color: #495867;
--bb-sidebar2-nav-item-text-active-color-rgb: 0,0,0; --bb-sidebar2-nav-item-text-active-color-rgb: 27,36,54;
--bb-sidebar2-nav-item-text-hover-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.9); --bb-sidebar2-nav-item-text-hover-color: #0d6efd;
--bb-sidebar2-nav-item-text-active-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.9); --bb-sidebar2-nav-item-text-active-color: #0d6efd;
--bb-sidebar2-nav-item-background-hover-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.08); --bb-sidebar2-nav-item-background-hover-color: rgba(13,110,253,0.08);
--bb-sidebar2-nav-item-group-background-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.08); --bb-sidebar2-nav-item-group-background-color: rgba(13,110,253,0.06);
}
/* A soft light gradient gives the sidebar a modern look while keeping the content area in focus. */
.bb-sidebar2 {
background: linear-gradient(180deg, #ffffff 0%, #eef2f8 100%);
border-right: 1px solid rgba(13,110,253,0.1);
box-shadow: 2px 0 12px rgba(27,36,54,0.06);
}
.bb-sidebar2 nav .nav-item {
margin: 0.125rem 0.5rem;
}
.bb-sidebar2 nav .nav-item a {
border-radius: 0.5rem;
transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
} }
.bb-sidebar2 nav .nav-item a:hover { .bb-sidebar2 nav .nav-item a:hover {
background-color: rgba(0,0,0,0.08) !important; background-color: rgba(13,110,253,0.08) !important;
color: rgba(0,0,0,0.9) !important; color: #0d6efd !important;
} }
.bb-sidebar2 nav .nav-item a.active { .bb-sidebar2 nav .nav-item a.active {
background-color: rgb(194,192,192) !important; background: linear-gradient(90deg, rgba(13,110,253,0.16) 0%, rgba(13,110,253,0.04) 100%) !important;
color: rgba(0,0,0,0.9) !important; color: #0d6efd !important;
font-weight: 600;
box-shadow: inset 3px 0 0 #0d6efd;
} }
/* The nav item icons inherit the black link color, so they are colored individually. */ /* The nav item icons inherit the link color, so they are colored individually. */
.bb-sidebar2 nav .nav-item a .bi-house-door-fill { .bb-sidebar2 nav .nav-item a .bi-house-door-fill {
color: #0d6efd; color: #0d6efd;
} }
.bb-sidebar2 nav .nav-item a .bi-file-earmark-text-fill { .bb-sidebar2 nav .nav-item a .bi-file-earmark-text-fill {
color: #0dcaf0; color: #0aa2c0;
} }
.bb-sidebar2 nav .nav-item a .bi-chat-dots-fill { .bb-sidebar2 nav .nav-item a .bi-chat-dots-fill {