reworked dashboard

2025-05-25 12:07:42 +02:00
parent 6c37cb4ddd
commit f33b400df2
13 changed files with 523 additions and 310 deletions
--- a/static/css/dashboard.css
+++ b/static/css/dashboard.css
@@ -0,0 +1,139 @@
+:root {
+    --primary-color: #16767b;
+    --secondary-color: #741b5f;
+    --primary-light: #1a8a90;
+    --secondary-light: #8a2170;
+    --warning-color: #ffd700;
+    --danger-color: #dc3545;
+}
+
+/* Masonry Layout */
+.masonry {
+    column-count: 1;
+    column-gap: 1.5rem;
+}
+
+@media (min-width: 768px) {
+    .masonry { column-count: 2; }
+}
+
+@media (min-width: 1200px) {
+    .masonry { column-count: 3; }
+}
+
+.masonry-card {
+    display: inline-block;
+    width: 100%;
+    margin-bottom: 1.5rem;
+}
+
+/* Card Styles */
+.card {
+    border: none;
+    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.card-title {
+    color: var(--primary-color);
+}
+
+.card-title i {
+    color: var(--primary-color);
+}
+
+/* Button Styles */
+.btn-primary {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+}
+
+.btn-primary:hover {
+    background-color: var(--primary-light);
+    border-color: var(--primary-light);
+}
+
+/* Icon Colors */
+.icon-primary {
+    color: var(--primary-color);
+}
+
+.icon-danger {
+    color: var(--danger-color);
+}
+
+.icon-warning {
+    color: var(--warning-color);
+}
+
+/* Text Colors */
+.text-primary {
+    color: var(--primary-color) !important;
+}
+
+.text-danger {
+    color: var(--danger-color) !important;
+}
+
+/* Badge Styles */
+.badge-starred {
+    background-color: rgba(255, 215, 0, 0.15) !important;
+    color: var(--warning-color) !important;
+}
+
+.badge-trash {
+    background-color: rgba(220, 53, 69, 0.15) !important;
+    color: var(--danger-color) !important;
+}
+
+/* Contact Link Styles */
+.contact-link {
+    background-color: rgba(22, 118, 123, 0.08);
+    color: var(--primary-color);
+    transition: all 0.2s;
+}
+
+.contact-link:hover {
+    background-color: rgba(22, 118, 123, 0.12);
+    color: var(--primary-color);
+}
+
+/* Chart Container */
+.chart-container {
+    position: relative;
+    height: 200px;
+}
+
+/* Alert Styles */
+.alert-info {
+    background-color: rgba(22, 118, 123, 0.08);
+    border-color: rgba(22, 118, 123, 0.2);
+    color: var(--primary-color);
+}
+
+/* List Group Styles */
+.list-group-item {
+    border: none;
+    padding: 1rem 0;
+}
+
+.list-group-item:not(:last-child) {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+/* Download Button */
+.btn-download {
+    background-color: var(--primary-color);
+    border: none;
+    border-radius: 6px;
+    box-shadow: 0 1px 2px rgba(22, 118, 123, 0.08);
+    color: white;
+    transition: all 0.2s;
+}
+
+.btn-download:hover {
+    background-color: var(--primary-light);
+    color: white;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(22, 118, 123, 0.12);
+}