gavindiaz/quantumbotx
1
0
Fork 0
mirror of https://github.com/chrisnov-it/quantumbotx.git synced 2026-07-27 18:57:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI-006: Polish cards, typography, spacing

Browse Source 
- 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>
This commit is contained in:
chrisnov-it
2026-06-23 13:55:50 +08:00
parent 2784317f7f
commit 7e61e507d0
2 changed files with 44 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/style.css
+38 -1
View File
@@ -30,4 +30,41 @@
/* 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; }
.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);
}
templates/index.html
+6 -22
View File
@@ -9,28 +9,6 @@
border-radius: 12px;
}
.stat-card {
transition: transform 0.2s ease;
}
.stat-card:hover {
transform: translateY(-2px);
}
.activity-item {
border-left: 4px solid #3b82f6;
transition: background-color 0.2s ease;
}
.activity-item:hover {
background-color: #f8fafc;
}
.chart-container {
position: relative;
height: 300px;
}
.floating-ai-btn {
position: fixed;
bottom: 2rem;
@@ -189,6 +167,9 @@
</div>
</div>
<!-- Section Divider -->
<div class="section-divider my-6"></div>
<!-- Three Column Layout -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
<!-- Charts Column (2/3 width) -->
@@ -254,6 +235,9 @@
</div>
</div>
<!-- Section Divider -->
<div class="section-divider my-6"></div>
<!-- BOT AKTIF -->
<div class="bg-white dark:bg-slate-800 rounded-lg shadow dark:shadow-slate-900/50">
<div class="p-6 border-b dark:border-slate-700">