mirror of
https://github.com/chrisnov-it/quantumbotx.git
synced 2026-07-28 19:27:44 +00:00
chrisnov-it
7e61e507d0
- Consolidated card/activity styles into style.css - Added hover effects with box-shadow for stat cards - Indigo accent border on activity items - Gradient section dividers between dashboard blocks - Removed duplicate inline CSS from index.html - Full dark mode support for all new styles Co-Authored-By: Claude <noreply@anthropic.com>
70 lines
2.7 KiB
CSS
70 lines
2.7 KiB
CSS
.sidebar { transition: all 0.3s ease; }
|
|
.sidebar.collapsed { width: 70px; }
|
|
.sidebar.collapsed .sidebar-text, .sidebar.collapsed .logo-text { display: none; }
|
|
.sidebar.collapsed .nav-item { justify-content: center; }
|
|
.sidebar.collapsed .nav-item i.w-5 { width: auto; }
|
|
|
|
/* Mobile sidebar: hidden by default, slides in from left */
|
|
@media (max-width: 767px) {
|
|
.sidebar {
|
|
position: fixed;
|
|
left: -256px;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 50;
|
|
transition: left 0.3s ease;
|
|
width: 256px !important;
|
|
height: 100vh;
|
|
}
|
|
.sidebar.mobile-open { left: 0; }
|
|
.sidebar.mobile-closed { left: -256px; }
|
|
.flex-1.overflow-auto { margin-left: 0 !important; }
|
|
}
|
|
|
|
/* Desktop collapsed sidebar adjustment */
|
|
@media (min-width: 768px) {
|
|
.sidebar.collapsed + .flex-1.overflow-auto { margin-left: 70px; }
|
|
.sidebar:not(.collapsed) + .flex-1.overflow-auto { margin-left: 0; }
|
|
}
|
|
|
|
/* Dark mode scrollbar */
|
|
.dark .overflow-auto::-webkit-scrollbar { width: 6px; }
|
|
.dark .overflow-auto::-webkit-scrollbar-track { background: #1e293b; }
|
|
.dark .overflow-auto::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
|
|
|
|
/* Card & UI Polish */
|
|
.stat-card {
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
.stat-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -5px rgba(0, 0, 0, 0.05);
|
|
}
|
|
.dark .stat-card:hover {
|
|
box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.3), 0 4px 10px -5px rgba(0, 0, 0, 0.2);
|
|
}
|
|
.chart-container {
|
|
position: relative;
|
|
height: 300px;
|
|
}
|
|
.activity-item {
|
|
border-left: 4px solid #6366f1;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
.activity-item:hover {
|
|
background-color: #f8fafc;
|
|
}
|
|
.dark .activity-item:hover {
|
|
background-color: rgba(51, 65, 85, 0.5);
|
|
}
|
|
.gradient-border {
|
|
border-left: 4px solid;
|
|
border-image: linear-gradient(to bottom, #6366f1, #8b5cf6) 1;
|
|
}
|
|
.section-divider {
|
|
height: 1px;
|
|
background: linear-gradient(to right, transparent, rgba(99, 102, 241, 0.3), transparent);
|
|
}
|
|
.dark .section-divider {
|
|
background: linear-gradient(to right, transparent, rgba(99, 102, 241, 0.15), transparent);
|
|
} |