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

Refactor spacing, border radius, and box shadow for improved consistency and aesthetics in styles

Browse source
This commit is contained in:
fynks 2025-09-30 19:01:10 +05:00
parent cacba81048
commit 3ff80ac2e3
1 changed files with 29 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
dist/css/styles.css vendored
View file

@ -1014,24 +1014,25 @@ th {
.section-header { .section-header {
text-align: center; text-align: center;
margin-bottom: var(--space-2xl) margin-bottom: var(--space-4xl)
} }
.section-title { .section-title {
font-size: clamp(var(--text-2xl), 5.5vw, var(--text-4xl)); font-size: clamp(var(--text-2xl), 5.5vw, var(--text-4xl));
font-weight: var(--font-extrabold); font-weight: var(--font-extrabold);
margin: 0 0 var(--space-xl); margin: 0 0 var(--space-lg);
color: var(--text-primary); color: var(--text-primary);
letter-spacing: -.02em letter-spacing: -.02em;
line-height: 1.2
} }
.section-description { .section-description {
font-size: clamp(var(--text-base), 2.8vw, var(--text-lg)); font-size: clamp(var(--text-base), 2.8vw, var(--text-lg));
color: var(--text-secondary); color: var(--text-secondary);
margin: 0; margin: 0;
max-width: 800px; max-width: 700px;
margin-inline: auto; margin-inline: auto;
line-height: 1.7 line-height: 1.6
} }
.meta-chips { .meta-chips {
@ -1063,7 +1064,7 @@ th {
gap: var(--space-sm); gap: var(--space-sm);
padding: var(--space-md) var(--space-2xl); padding: var(--space-md) var(--space-2xl);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: var(--radius-xl); border-radius: var(--radius-lg);
font-size: var(--text-base); font-size: var(--text-base);
font-weight: var(--font-semibold); font-weight: var(--font-semibold);
text-decoration: none; text-decoration: none;
@ -1105,7 +1106,7 @@ th {
.btn-primary:hover { .btn-primary:hover {
background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-dark) 100%); background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-dark) 100%);
color: #fff; color: #fff;
box-shadow: var(--shadow-md) box-shadow: var(--shadow-sm)
} }
.btn-primary::before { .btn-primary::before {
@ -1202,7 +1203,7 @@ tr:focus-within {
padding: var(--space-2xl); padding: var(--space-2xl);
background: var(--bg-primary); background: var(--bg-primary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: var(--radius-xl); border-radius: var(--radius-lg);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast); transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
min-height: 160px; min-height: 160px;
justify-content: center; justify-content: center;
@ -1222,7 +1223,7 @@ tr:focus-within {
.benefit-card:hover { .benefit-card:hover {
border-color: var(--primary); border-color: var(--primary);
box-shadow: var(--shadow-md) box-shadow: var(--shadow-sm)
} }
.benefit-card:hover::before { .benefit-card:hover::before {
@ -1345,7 +1346,7 @@ tr:focus-within {
padding: var(--space-xl); padding: var(--space-xl);
background: var(--bg-primary); background: var(--bg-primary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: var(--radius-xl); border-radius: var(--radius-lg);
text-decoration: none; text-decoration: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast); transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
min-height: 120px; min-height: 120px;
@ -1393,9 +1394,9 @@ tr:focus-within {
display: flex; display: flex;
gap: var(--space-lg); gap: var(--space-lg);
padding: var(--space-2xl); padding: var(--space-2xl);
background: var(--bg-elevated); background: var(--bg-primary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: var(--radius-xl); border-radius: var(--radius-lg);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast); transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
position: relative; position: relative;
overflow: hidden overflow: hidden
@ -1562,8 +1563,8 @@ tr:focus-within {
} }
.data-table-container { .data-table-container {
background: var(--bg-elevated); background: var(--bg-primary);
border-radius: var(--radius-xl); border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
margin: var(--space-3xl) 0; margin: var(--space-3xl) 0;
@ -1573,17 +1574,20 @@ tr:focus-within {
.table-wrapper { .table-wrapper {
overflow-x: auto; overflow-x: auto;
border-radius: var(--radius-2xl); border-radius: 0;
width: 100%; width: 100%;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain overscroll-behavior-x: contain;
border: none;
box-shadow: none
} }
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
font-size: var(--text-sm); font-size: var(--text-sm);
min-width: 600px c min-width: 600px;
background: var(--bg-primary)
} }
td, td,
@ -1771,9 +1775,7 @@ th {
background-color: var(--bg-tertiary) background-color: var(--bg-tertiary)
} }
tr:hover {
background: color-mix(in srgb, var(--bg-secondary) 80%, transparent)
}
.status-cell, .status-cell,
.support-status { .support-status {
@ -1853,12 +1855,14 @@ tr:hover {
} }
#file-hosts-table td:first-child { #file-hosts-table td:first-child {
background-color: var(--bg-primary) background-color: inherit
} }
.policies-table tbody tr th:first-child { .policies-table tbody tr th:first-child,
.pricing-table tbody tr th:first-child {
background-color: inherit; background-color: inherit;
color: inherit color: inherit;
font-weight: var(--font-medium)
} }
.filter-results { .filter-results {
@ -1948,7 +1952,7 @@ tr:hover {
padding: var(--space-xl); padding: var(--space-xl);
background: var(--bg-primary); background: var(--bg-primary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: var(--radius-xl); border-radius: var(--radius-lg);
text-decoration: none; text-decoration: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast); transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
min-height: 120px; min-height: 120px;
@ -2054,7 +2058,7 @@ tr:hover {
padding: var(--space-xl); padding: var(--space-xl);
background: var(--bg-primary); background: var(--bg-primary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: var(--radius-xl); border-radius: var(--radius-lg);
text-decoration: none; text-decoration: none;
width: 100%; width: 100%;
max-width: 200px; max-width: 200px;