Reworked styling and theme CSS

dashboard.qmd

@@ -3,10 +3,10 @@ title: "dashboard"
 format: 
   dashboard:
     scrolling: true
+    css: style/dashboard.css
     theme:
       light: [litera, style/theme.scss]
     highlight-style: a11y-dark
-    css: styles.css
     code-copy: true
     code-overflow: wrap
     toc: true

style/dashboard.css

@@ -0,0 +1,110 @@
+/* Global Dashboard Styling */
+:root {
+    --primary-color: #3498db;
+    --secondary-color: #2ecc71;
+    --background-color: #f4f7f6;
+    --text-color: #2c3e50;
+    --card-background: #ffffff;
+}
+
+body {
+    font-family: 'Atkinson Hyperlegible', sans-serif !important;
+    background-color: var(--background-color);
+    color: var(--text-color);
+    line-height: 1.6;
+}
+
+/* Dashboard Container */
+.quarto-dashboard {
+    background-color: var(--background-color);
+    padding: 20px;
+}
+
+/* Card Styling */
+.card {
+    background-color: var(--card-background);
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+    margin-bottom: 20px;
+    transition: all 0.3s ease;
+}
+
+.card:hover {
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+    transform: translateY(-5px);
+}
+
+/* Value Box Styling */
+.value-box {
+    background-color: var(--primary-color);
+    color: white !important;
+    border-radius: 10px;
+    padding: 15px;
+    text-align: center;
+    transition: background-color 0.3s ease;
+}
+
+.value-box:hover {
+    background-color: color-mix(in srgb, var(--primary-color) 80%, white);
+}
+
+.value-box .icon {
+    font-size: 2rem;
+    opacity: 0.7;
+}
+
+/* Plot Styling */
+.plotly-graph-div {
+    width: 100% !important;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    .quarto-dashboard {
+        padding: 10px;
+    }
+}
+
+/* Specific Plot Enhancements */
+.ggplot-chart {
+    max-width: 100%;
+    height: auto;
+}
+
+/* Tables */
+.table {
+    width: 100%;
+    margin-bottom: 20px;
+    border-collapse: collapse;
+}
+
+.table th {
+    background-color: var(--primary-color);
+    color: white;
+    padding: 10px;
+    text-align: left;
+}
+
+.table td {
+    padding: 10px;
+    border: 1px solid #e0e0e0;
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--primary-color);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in srgb, var(--primary-color) 80%, black);
+}