danvics/debrid-services-comparison
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor table styles for improved consistency and clarity, including sticky headers and alternating row colors

Browse source
This commit is contained in:
fynks 2025-10-11 10:47:29 +05:00
parent fc134297e1
commit b70a908985
1 changed files with 28 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
dist/css/styles.css vendored
View file

@ -340,19 +340,6 @@ a:focus-visible {
box-shadow: 0 1px 0 0 rgba(30, 41, 59, .1), 0 1px 3px 0 rgba(0, 0, 0, .1), 0 4px 8px 0 rgba(0, 0, 0, .15)
}
th {
background: var(--bg-secondary);
color: var(--text-primary);
font-weight: var(--font-semibold);
text-transform: uppercase;
letter-spacing: .05em;
font-size: var(--text-xs);
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid var(--border-primary)
}
.main-content {
flex: 1;
position: relative;
@ -1558,6 +1545,7 @@ tr:focus-within {
opacity: .35
}
/* ===== TABLE BASE STYLES ===== */
.data-table-container {
background: var(--bg-primary);
border-radius: var(--radius-lg);
@ -1589,7 +1577,22 @@ table {
td,
th {
word-break: normal;
white-space: normal
white-space: normal;
padding: var(--space-lg) var(--space-xl);
text-align: left;
border-bottom: 1px solid var(--border-primary)
}
th {
background: var(--primary);
color: #fff;
font-weight: var(--font-semibold);
text-transform: uppercase;
letter-spacing: .05em;
font-size: var(--text-xs);
position: sticky;
top: 0;
z-index: 100
}
.table-toolbar {
@ -1745,34 +1748,16 @@ th {
font-size: 12px
}
th,
td {
padding: var(--space-lg) var(--space-xl);
text-align: left;
border-bottom: 1px solid var(--border-primary)
}
th {
background: var(--primary);
color: #fff;
font-weight: var(--font-semibold);
text-transform: uppercase;
letter-spacing: .05em;
font-size: var(--text-xs);
position: sticky;
top: 0;
z-index: 100
}
/* ===== TABLE ALTERNATING ROWS ===== */
#file-hosts-table tr:nth-child(even),
.enhanced-table tr:nth-child(even),
.pricing-table tr:nth-child(even),
.policies-table tr:nth-child(even) {
.policies-table tr:nth-child(even),
.comparison-table tr:nth-child(even) {
background-color: var(--bg-tertiary)
}
/* ===== TABLE STATUS & INTERACTION ===== */
.status-cell,
.support-status {
text-align: center;
@ -1802,7 +1787,7 @@ th {
color: inherit
}
/* Sticky first column for all tables */
/* ===== STICKY FIRST COLUMN - ALL TABLES ===== */
#file-hosts-table th:first-child,
#file-hosts-table td:first-child,
.enhanced-table th:first-child,
@ -1817,15 +1802,16 @@ th {
box-shadow: 2px 0 6px -4px rgba(0, 0, 0, .06)
}
/* Ensure header cells in first column have higher z-index */
/* Header cells in first column - higher z-index */
#file-hosts-table th:first-child,
.enhanced-table th:first-child,
.pricing-table th:first-child,
.policies-table th:first-child {
z-index: 101;
background: var(--primary);
}
/* Default background for first column cells */
/* Default background for first column data cells */
#file-hosts-table td:first-child,
.enhanced-table td:first-child,
.pricing-table td:first-child,
@ -1833,7 +1819,7 @@ th {
background-color: var(--bg-primary)
}
/* Alternating row background for first column in even rows */
/* Alternating row background for first column */
#file-hosts-table tr:nth-child(even) td:first-child,
.enhanced-table tr:nth-child(even) td:first-child,
.pricing-table tr:nth-child(even) td:first-child,
@ -1841,14 +1827,7 @@ th {
background-color: var(--bg-tertiary)
}
/* Ensure first column header cells match other headers */
#file-hosts-table th:first-child,
.enhanced-table th:first-child,
.pricing-table th:first-child,
.policies-table th:first-child {
background: var(--primary);
}
/* First column tbody headers (pricing/policies tables) */
.policies-table tbody tr th:first-child,
.pricing-table tbody tr th:first-child {
background-color: var(--bg-primary);
@ -2502,6 +2481,7 @@ select:hover {
font-weight: var(--font-semibold)
}
/* ===== COMPARISON TABLE ===== */
.comparison-table {
width: 100%;
border-collapse: collapse;
@ -2557,10 +2537,6 @@ select:hover {
box-shadow: 2px 0 6px -4px rgba(0, 0, 0, .06)
}
.comparison-table tr:nth-child(even) {
background-color: var(--bg-tertiary)
}
.comparison-table tr:nth-child(even) td:first-child {
background-color: var(--bg-tertiary)
}