OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

feat: Enhance comparison card styles for dark mode and improve hover effects

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-26 06:33:16 -05:00
parent 0c556e176b
commit 9039bdb70b
1 changed files with 43 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
theme/assets/css/main.css
View File

@@ -1655,18 +1655,31 @@ p:last-child { margin-bottom: 0; }
padding-inline: 1rem;
border-radius: var(--radius-sm);
}
@media (prefers-color-scheme: dark) {
.oribi-card.comparison-row:hover {
background: rgba(var(--color-primary-rgb), .1);
}
}
.oribi-card.comparison-row .comparison-check {
width: 28px;
height: 28px;
background: var(--color-primary-lt);
color: var(--color-primary);
width: 32px;
height: 32px;
background: var(--color-accent);
color: var(--color-bg);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: .85rem;
font-weight: 700;
font-size: .9rem;
font-weight: 800;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
}
@media (prefers-color-scheme: dark) {
.oribi-card.comparison-row .comparison-check {
background: var(--color-accent-dk);
color: var(--color-accent-lt);
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}
}
.oribi-card.comparison-row h3 {
font-size: 1rem;
@@ -3549,6 +3562,12 @@ p:last-child { margin-bottom: 0; }
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--card-bg);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
@media (prefers-color-scheme: dark) {
.comparison-table-wrap {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
}
.comparison-table {
width: 100%;
@@ -3570,6 +3589,12 @@ p:last-child { margin-bottom: 0; }
top: 0;
z-index: 1;
}
@media (prefers-color-scheme: dark) {
.comparison-table thead th {
background: var(--color-bg-alt);
border-bottom-color: var(--color-border);
}
}
.comparison-table thead th:first-child {
text-align: left;
min-width: 220px;
@@ -3596,7 +3621,7 @@ p:last-child { margin-bottom: 0; }
font-size: .82rem;
text-transform: uppercase;
letter-spacing: .08em;
color: #fff;
color: var(--color-bg);
text-align: left !important;
padding: .85rem 1.25rem;
border-bottom-color: var(--color-primary) !important;
@@ -3604,6 +3629,12 @@ p:last-child { margin-bottom: 0; }
.comparison-group-row td:first-child {
border-left: 4px solid var(--color-accent);
}
@media (prefers-color-scheme: dark) {
.comparison-group-row td {
background: var(--color-primary-dk);
border-bottom-color: var(--color-primary-dk) !important;
}
}
.comparison-yes {
color: var(--color-accent);
font-size: 1.1rem;
@@ -3616,6 +3647,11 @@ p:last-child { margin-bottom: 0; }
.comparison-table tbody tr:hover td {
background: rgba(var(--color-primary-rgb), .03);
}
@media (prefers-color-scheme: dark) {
.comparison-table tbody tr:hover td {
background: rgba(var(--color-primary-rgb), .08);
}
}
@media (max-width: 640px) {
.comparison-table-wrap { margin-inline: calc(var(--container-pad) * -1); border-radius: 0; border-left: none; border-right: none; }
}