mirror of
https://github.com/davegallant/rfd-fyi.git
synced 2026-03-03 09:36:35 +00:00
Switch to a card-based view
This commit is contained in:
176
src/theme.css
176
src/theme.css
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user