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

refactor: optimize CSS for performance and responsiveness on mobile devices

Browse source
This commit is contained in:
fynks 2025-10-12 08:43:54 +05:00
parent 7bdb79d6fb
commit 2971f77133
1 changed files with 46 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
dist/css/styles.css vendored
View file

@ -365,6 +365,7 @@ button:focus-visible {
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
transition: all var(--transition-normal); transition: all var(--transition-normal);
z-index: -1; z-index: -1;
will-change: backdrop-filter, background, border-bottom;
} }
.site-header.is-scrolled .header-blur-bg { .site-header.is-scrolled .header-blur-bg {
@ -375,12 +376,14 @@ button:focus-visible {
box-shadow: 0 2px 8px rgba(15, 23, 42, .04), 0 1px 2px rgba(15, 23, 42, .06); box-shadow: 0 2px 8px rgba(15, 23, 42, .04), 0 1px 2px rgba(15, 23, 42, .06);
} }
/* Reduce backdrop blur on mobile for better performance */
@media (max-width:900px) { @media (max-width:900px) {
.header-blur-bg { .header-blur-bg {
backdrop-filter: none; backdrop-filter: none;
-webkit-backdrop-filter: none; -webkit-backdrop-filter: none;
background: rgba(255, 255, 255, .98); background: rgba(255, 255, 255, .98);
border-bottom: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary);
will-change: background, box-shadow;
} }
.site-header.is-scrolled .header-blur-bg { .site-header.is-scrolled .header-blur-bg {
@ -1356,11 +1359,12 @@ button:focus-visible {
min-width: 160px; min-width: 160px;
min-height: 48px; min-height: 48px;
justify-content: center; justify-content: center;
transition: all var(--transition-fast); transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
flex-shrink: 0; flex-shrink: 0;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
will-change: transform;
} }
.btn svg { .btn svg {
@ -1392,7 +1396,7 @@ button:focus-visible {
color: #fff; color: #fff;
border-color: transparent; border-color: transparent;
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2); box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
transition: all var(--transition-fast); transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
} }
.btn-primary:hover { .btn-primary:hover {
@ -1516,7 +1520,8 @@ table button:focus-visible {
min-height: 160px; min-height: 160px;
justify-content: center; justify-content: center;
position: relative; position: relative;
overflow: hidden overflow: hidden;
contain: layout style paint;
} }
.benefit-card::before { .benefit-card::before {
@ -1859,11 +1864,15 @@ table {
td, td,
th { th {
word-break: normal; word-break: break-word;
word-wrap: break-word;
hyphens: auto;
white-space: normal; white-space: normal;
padding: var(--space-lg) var(--space-xl); padding: var(--space-lg) var(--space-xl);
text-align: left; text-align: left;
border-bottom: 1px solid var(--border-primary) border-bottom: 1px solid var(--border-primary);
max-width: 300px;
overflow-wrap: break-word;
} }
th { th {
@ -2253,7 +2262,8 @@ th {
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;
position: relative; position: relative;
overflow: hidden overflow: hidden;
contain: layout style paint;
} }
.status-card::before { .status-card::before {
@ -2529,6 +2539,7 @@ th {
transition: border-color 0.2s ease, box-shadow 0.2s ease; transition: border-color 0.2s ease, box-shadow 0.2s ease;
position: relative; position: relative;
overflow: visible; overflow: visible;
contain: layout style;
} }
.enhanced-referral-card:hover { .enhanced-referral-card:hover {
@ -3979,11 +3990,17 @@ select:hover {
} }
.hero-actions { .hero-actions {
margin-bottom:var(--space-4xl); gap:var(--space-md) margin-bottom:var(--space-4xl); gap:var(--space-md);
flex-direction: column;
width: 100%;
} }
.btn { .btn {
padding:var(--space-md) var(--space-xl); min-width:120px; font-size:var(--text-sm) padding:var(--space-md) var(--space-xl);
min-width:100%;
width: 100%;
font-size:var(--text-sm);
justify-content: center;
} }
.section-header { .section-header {
@ -4159,6 +4176,27 @@ select:hover {
.data-table-container { .data-table-container {
font-size:.85rem font-size:.85rem
} }
/* Critical fixes for ultra-narrow screens */
.container {
min-width: 0;
overflow-x: hidden;
}
.hero-actions {
flex-direction: column;
width: 100%;
}
.btn {
width: 100%;
min-width: 100%;
justify-content: center;
}
table {
min-width: 450px;
}
} }
@media print { @media print {