Switch to a card-based view

This commit is contained in:
2026-02-14 22:04:19 -05:00
parent 640feea592
commit ca58af6a57
2 changed files with 370 additions and 371 deletions

View File

@@ -15,16 +15,12 @@
/* Theme-aware CSS variables */
:root {
/* Light theme (default) */
--bg-primary: #ffffff;
--bg-secondary: #f5f5f5;
--bg-primary: #dddddd;
--bg-secondary: #eeeeee;
--text-primary: #212529;
--text-secondary: #6c757d;
--border-color: #dee2e6;
--tooltip-bg: #f8f9fa;
--tooltip-border: #dee2e6;
--tooltip-text: #212529;
--link-color: #0d6efd;
--link-visited: #990000;
--border-color: #d0d0d0;
--link-color: #212529;
--footer-bg: #f8f9fa;
--footer-text: #212529;
}
@@ -37,11 +33,7 @@
--text-primary: #e0e0e0;
--text-secondary: #a0a0a0;
--border-color: #3a3a3a;
--tooltip-bg: #2a2a2a;
--tooltip-border: #444444;
--tooltip-text: #e0e0e0;
--link-color: #5b9cf5;
--link-visited: #990000;
--link-color: #212529;
--footer-bg: #1a1a1a;
--footer-text: #e0e0e0;
}
@@ -54,42 +46,39 @@ html[data-bs-theme="dark"] {
--text-primary: #e0e0e0;
--text-secondary: #a0a0a0;
--border-color: #3a3a3a;
--tooltip-bg: #2a2a2a;
--tooltip-border: #444444;
--tooltip-text: #e0e0e0;
--link-color: #e8e8e8;
--link-visited: #990000;
--link-color: ##e0e0e0;
--footer-bg: #1a1a1a;
--footer-text: #e0e0e0;
}
html[data-bs-theme="light"] {
--bg-primary: #ffffff;
--bg-secondary: #f5f5f5;
html[data-bs-theme="light"],
html.light-theme {
--bg-primary: #dddddd;
--bg-secondary: #eeeeee;
--text-primary: #212529;
--text-secondary: #6c757d;
--border-color: #dee2e6;
--tooltip-bg: #f8f9fa;
--tooltip-border: #dee2e6;
--tooltip-text: #212529;
--link-color: #333333;
--link-visited: #990000;
--border-color: #d0d0d0;
--link-color: #212529;
--footer-bg: #f8f9fa;
--footer-text: #212529;
}
body {
max-width: 100%;
background-color: var(--bg-primary);
color: var(--text-primary);
transition: background-color 0.3s ease, color 0.3s ease;
}
html {
font-family: sans-serif;
min-width: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
background-color: var(--bg-primary);
color: var(--text-primary);
}
body {
max-width: 100%;
background-color: var(--bg-primary);
color: var(--text-primary);
transition: background-color 0.3s ease, color 0.3s ease;
margin: 0;
padding: 0;
}
footer {
@@ -130,10 +119,8 @@ a {
transition: color 0.2s ease;
}
a:visited {
color: var(--link-visited);
color: var(--link-color);
}
@media (min-width: 769px) {
@@ -144,89 +131,70 @@ a:visited {
}
}
/* Tooltip theme support */
.deal-tooltip {
pointer-events: none;
max-width: 400px;
/* Vuetify table dark theme overrides */
html.dark-theme .v-data-table {
background-color: #1a1a1a !important;
color: #e0e0e0 !important;
}
.tooltip-content {
background: var(--tooltip-bg);
border: 2px solid var(--tooltip-border);
border-radius: 8px;
padding: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
font-size: 13px;
color: var(--tooltip-text);
text-align: left;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
html.dark-theme .v-data-table__tr {
background-color: #1a1a1a !important;
color: #e0e0e0 !important;
}
.tooltip-header {
font-weight: bold;
font-size: 14px;
color: var(--text-primary);
margin-bottom: 8px;
white-space: normal;
word-wrap: break-word;
html.dark-theme .v-data-table__td {
background-color: #1a1a1a !important;
color: #e0e0e0 !important;
border-color: #888888 !important;
}
.tooltip-dealer {
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 8px;
html.dark-theme .v-data-table-header {
background-color: #2a2a2a !important;
}
.tooltip-stats {
display: flex;
gap: 12px;
margin-bottom: 8px;
font-size: 12px;
color: var(--text-secondary);
html.dark-theme .v-data-table-header th {
background-color: #2a2a2a !important;
color: #e0e0e0 !important;
border-color: #888888 !important;
}
.stat-item {
display: flex;
align-items: center;
gap: 4px;
html.dark-theme .v-data-footer {
background-color: #2a2a2a !important;
color: #e0e0e0 !important;
border-color: #888888 !important;
}
.stat-item .material-symbols-outlined {
font-size: 16px;
html.dark-theme .v-data-table__divider {
border-color: #888888 !important;
}
.tooltip-description {
margin-bottom: 8px;
padding: 8px;
background: var(--bg-secondary);
border-left: 2px solid var(--tooltip-border);
border-radius: 2px;
font-size: 12px;
white-space: normal;
word-wrap: break-word;
max-height: 60px;
overflow-y: auto;
color: var(--text-primary);
html.dark-theme .v-table__wrapper {
background-color: #1a1a1a !important;
}
.tooltip-first-post {
margin-bottom: 8px;
padding: 8px;
background: var(--bg-secondary);
border-left: 2px solid var(--tooltip-border);
border-radius: 2px;
font-size: 12px;
white-space: normal;
word-wrap: break-word;
max-height: 60px;
overflow-y: auto;
color: var(--text-primary);
/* Light theme table overrides */
html.light-theme .v-data-table {
background-color: #ffffff !important;
color: #212529 !important;
}
.tooltip-times {
font-size: 11px;
color: var(--text-secondary);
border-top: 1px solid var(--border-color);
padding-top: 8px;
margin-top: 8px;
html.light-theme .v-data-table__tr {
background-color: #ffffff !important;
color: #212529 !important;
}
html.light-theme .v-data-table__td {
background-color: #ffffff !important;
color: #212529 !important;
border-color: #dee2e6 !important;
}
html.light-theme .v-data-table-header {
background-color: #f5f5f5 !important;
}
html.light-theme .v-data-table-header th {
background-color: #f5f5f5 !important;
color: #212529 !important;
border-color: #dee2e6 !important;
}