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

Refactor transition properties for improved performance and consistency across styles

Browse source
This commit is contained in:
fynks 2025-09-30 18:50:26 +05:00
parent 9c9169ed0f
commit cacba81048
1 changed files with 66 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

153
dist/css/styles.css vendored
View file

@ -214,7 +214,7 @@ canvas {
a { a {
color: var(--primary); color: var(--primary);
text-decoration: none; text-decoration: none;
transition: all var(--transition-normal) transition: color var(--transition-fast)
} }
a:hover { a:hover {
@ -303,7 +303,7 @@ a:focus-visible {
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
height: var(--header-height); height: var(--header-height);
width: 100%; width: 100%;
transition: all var(--transition-normal); transition: background-color var(--transition-fast), backdrop-filter var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
will-change: background, backdrop-filter, border-color, box-shadow will-change: background, backdrop-filter, border-color, box-shadow
} }
@ -372,8 +372,7 @@ th {
justify-content: space-between; justify-content: space-between;
position: relative; position: relative;
height: var(--header-height); height: var(--header-height);
gap: var(--space-4xl); gap: var(--space-4xl)
transition: all var(--transition-normal)
} }
@media (max-width:1200px) { @media (max-width:1200px) {
@ -418,7 +417,7 @@ th {
text-decoration: none; text-decoration: none;
padding: var(--space-sm) var(--space-lg); padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
transition: all var(--transition-normal); transition: color var(--transition-fast);
min-width: 0; min-width: 0;
white-space: nowrap; white-space: nowrap;
position: relative; position: relative;
@ -469,21 +468,19 @@ th {
} }
.site-title:hover { .site-title:hover {
color: var(--primary); color: var(--primary)
transform: translateY(-1px)
} }
.logo-icon { .logo-icon {
width: 28px; width: 28px;
height: 28px; height: 28px;
color: var(--primary); color: var(--primary);
transition: all var(--transition-normal); transition: color var(--transition-fast);
filter: drop-shadow(0 2px 4px rgba(99, 102, 241, .1)) filter: drop-shadow(0 2px 4px rgba(99, 102, 241, .1))
} }
.site-title:hover .logo-icon { .site-title:hover .logo-icon {
transform: scale(1.05); filter: drop-shadow(0 3px 6px rgba(99, 102, 241, .15))
filter: drop-shadow(0 4px 8px rgba(99, 102, 241, .2))
} }
.header-nav { .header-nav {
@ -518,7 +515,7 @@ th {
color: var(--text-secondary); color: var(--text-secondary);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
white-space: nowrap; white-space: nowrap;
transition: all var(--transition-normal); transition: color var(--transition-fast), background-color var(--transition-fast);
text-decoration: none; text-decoration: none;
overflow: hidden overflow: hidden
} }
@ -532,7 +529,7 @@ th {
height: 2px; height: 2px;
border-radius: var(--radius-full); border-radius: var(--radius-full);
transform: translateX(-50%); transform: translateX(-50%);
transition: all var(--transition-normal); transition: width var(--transition-fast), opacity var(--transition-fast);
opacity: 0 opacity: 0
} }
@ -543,14 +540,13 @@ th {
background: linear-gradient(135deg, rgba(99, 102, 241, .03) 0%, rgba(139, 92, 246, .02) 100%); background: linear-gradient(135deg, rgba(99, 102, 241, .03) 0%, rgba(139, 92, 246, .02) 100%);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
opacity: 0; opacity: 0;
transition: opacity var(--transition-normal); transition: opacity var(--transition-fast);
z-index: -1 z-index: -1
} }
.nav-link:hover { .nav-link:hover {
color: var(--primary); color: var(--primary);
background: var(--bg-secondary); background: var(--bg-secondary)
transform: translateY(-1px)
} }
.nav-link:hover::before { .nav-link:hover::before {
@ -597,7 +593,7 @@ th {
color: var(--text-primary); color: var(--text-primary);
flex-shrink: 0; flex-shrink: 0;
cursor: pointer; cursor: pointer;
transition: all var(--transition-normal); transition: background-color var(--transition-fast), border-color var(--transition-fast);
position: relative; position: relative;
overflow: hidden overflow: hidden
} }
@ -609,7 +605,7 @@ th {
background: linear-gradient(135deg, rgba(99, 102, 241, .05) 0%, rgba(139, 92, 246, .03) 100%); background: linear-gradient(135deg, rgba(99, 102, 241, .05) 0%, rgba(139, 92, 246, .03) 100%);
border-radius: var(--radius-full); border-radius: var(--radius-full);
opacity: 0; opacity: 0;
transition: opacity var(--transition-normal); transition: opacity var(--transition-fast);
z-index: -1 z-index: -1
} }
@ -629,9 +625,7 @@ th {
.dark-mode-toggle:hover { .dark-mode-toggle:hover {
background: var(--bg-secondary); background: var(--bg-secondary);
border-color: var(--primary); border-color: var(--primary)
transform: translateY(-2px);
box-shadow: var(--shadow-md)
} }
.dark-mode-toggle:hover::before { .dark-mode-toggle:hover::before {
@ -642,7 +636,7 @@ th {
.moon-icon { .moon-icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
transition: all var(--transition-normal) transition: opacity var(--transition-fast), transform var(--transition-fast)
} }
.sun-icon { .sun-icon {
@ -677,7 +671,7 @@ th {
border-radius: var(--radius-full); border-radius: var(--radius-full);
cursor: pointer; cursor: pointer;
position: relative; position: relative;
transition: all var(--transition-normal); transition: background-color var(--transition-fast), border-color var(--transition-fast);
flex-shrink: 0; flex-shrink: 0;
z-index: 110; z-index: 110;
overflow: hidden overflow: hidden
@ -690,7 +684,7 @@ th {
background: linear-gradient(135deg, rgba(99, 102, 241, .05) 0%, rgba(139, 92, 246, .03) 100%); background: linear-gradient(135deg, rgba(99, 102, 241, .05) 0%, rgba(139, 92, 246, .03) 100%);
border-radius: var(--radius-full); border-radius: var(--radius-full);
opacity: 0; opacity: 0;
transition: opacity var(--transition-normal); transition: opacity var(--transition-fast);
z-index: -1 z-index: -1
} }
@ -699,9 +693,8 @@ th {
} }
.nav-toggle:hover { .nav-toggle:hover {
transform: translateY(-2px); border-color: var(--primary);
box-shadow: var(--shadow-md); background: var(--bg-secondary)
border-color: var(--primary)
} }
@media (max-width:600px) { @media (max-width:600px) {
@ -723,7 +716,7 @@ th {
height: 2px; height: 2px;
background: var(--text-primary); background: var(--text-primary);
border-radius: 2px; border-radius: 2px;
transition: all var(--transition-normal); transition: transform var(--transition-fast), opacity var(--transition-fast);
margin: 0 auto; margin: 0 auto;
transform-origin: center transform-origin: center
} }
@ -891,13 +884,13 @@ th {
max-width: 900px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
animation: fadeInUp .8s ease-out animation: fadeInUp .5s ease-out
} }
@keyframes fadeInUp { @keyframes fadeInUp {
from { from {
opacity: 0; opacity: 0;
transform: translateY(30px) transform: translateY(15px)
} }
to { to {
@ -1078,7 +1071,7 @@ th {
overflow: hidden; overflow: hidden;
min-width: 160px; min-width: 160px;
justify-content: center; justify-content: center;
transition: all var(--transition-normal); transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
flex-shrink: 0; flex-shrink: 0;
white-space: nowrap; white-space: nowrap;
cursor: pointer cursor: pointer
@ -1090,7 +1083,7 @@ th {
inset: 0; inset: 0;
background: linear-gradient(135deg, rgba(99, 102, 241, .05) 0%, rgba(139, 92, 246, .03) 100%); background: linear-gradient(135deg, rgba(99, 102, 241, .05) 0%, rgba(139, 92, 246, .03) 100%);
opacity: 0; opacity: 0;
transition: opacity var(--transition-normal); transition: opacity var(--transition-fast);
z-index: -1 z-index: -1
} }
@ -1099,8 +1092,7 @@ th {
} }
.btn:hover { .btn:hover {
transform: translateY(-2px); box-shadow: var(--shadow-md)
box-shadow: var(--shadow-lg)
} }
.btn-primary { .btn-primary {
@ -1113,7 +1105,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-lg) box-shadow: var(--shadow-md)
} }
.btn-primary::before { .btn-primary::before {
@ -1170,7 +1162,7 @@ input[type="text"],
input[type="email"], input[type="email"],
select, select,
textarea { textarea {
transition: all var(--transition-normal); transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
border-radius: var(--radius-lg) border-radius: var(--radius-lg)
} }
@ -1211,7 +1203,7 @@ tr:focus-within {
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-xl);
transition: all var(--transition-normal); transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
min-height: 160px; min-height: 160px;
justify-content: center; justify-content: center;
position: relative; position: relative;
@ -1224,14 +1216,13 @@ tr:focus-within {
inset: 0; inset: 0;
background: linear-gradient(135deg, rgba(99, 102, 241, .03) 0%, rgba(139, 92, 246, .02) 100%); background: linear-gradient(135deg, rgba(99, 102, 241, .03) 0%, rgba(139, 92, 246, .02) 100%);
opacity: 0; opacity: 0;
transition: opacity var(--transition-normal); transition: opacity var(--transition-fast);
z-index: -1 z-index: -1
} }
.benefit-card:hover { .benefit-card:hover {
border-color: var(--primary); border-color: var(--primary);
transform: translateY(-4px); box-shadow: var(--shadow-md)
box-shadow: var(--shadow-lg)
} }
.benefit-card:hover::before { .benefit-card:hover::before {
@ -1242,12 +1233,11 @@ tr:focus-within {
width: 40px; width: 40px;
height: 40px; height: 40px;
color: var(--primary); color: var(--primary);
margin-bottom: var(--space-lg); margin-bottom: var(--space-lg)
transition: transform var(--transition-normal)
} }
.benefit-card:hover .icon-badge { .benefit-card:hover .icon-badge {
transform: scale(1.05) color: var(--primary-hover)
} }
.benefit-card h3 { .benefit-card h3 {
@ -1357,7 +1347,7 @@ tr:focus-within {
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
text-decoration: none; text-decoration: none;
transition: all var(--transition-normal); 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
@ -1369,14 +1359,13 @@ tr:focus-within {
inset: 0; inset: 0;
background: linear-gradient(135deg, rgba(99, 102, 241, .03) 0%, rgba(139, 92, 246, .02) 100%); background: linear-gradient(135deg, rgba(99, 102, 241, .03) 0%, rgba(139, 92, 246, .02) 100%);
opacity: 0; opacity: 0;
transition: opacity var(--transition-normal); transition: opacity var(--transition-fast);
z-index: -1 z-index: -1
} }
.speed-card:hover { .speed-card:hover {
border-color: var(--primary); border-color: var(--primary);
transform: translateY(-3px); box-shadow: var(--shadow-sm)
box-shadow: var(--shadow-md)
} }
.speed-card:hover::before { .speed-card:hover::before {
@ -1407,7 +1396,7 @@ tr:focus-within {
background: var(--bg-elevated); background: var(--bg-elevated);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
transition: all var(--transition-normal); transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
position: relative; position: relative;
overflow: hidden overflow: hidden
} }
@ -1418,7 +1407,7 @@ tr:focus-within {
inset: 0; inset: 0;
background: linear-gradient(135deg, rgba(99, 102, 241, .02) 0%, rgba(139, 92, 246, .01) 100%); background: linear-gradient(135deg, rgba(99, 102, 241, .02) 0%, rgba(139, 92, 246, .01) 100%);
opacity: 0; opacity: 0;
transition: opacity var(--transition-normal); transition: opacity var(--transition-fast);
z-index: -1 z-index: -1
} }
@ -1436,8 +1425,7 @@ tr:focus-within {
.note-card:hover { .note-card:hover {
border-color: var(--primary); border-color: var(--primary);
transform: translateY(-2px); box-shadow: var(--shadow-sm)
box-shadow: var(--shadow-md)
} }
.note-card:hover::before { .note-card:hover::before {
@ -1517,12 +1505,11 @@ tr:focus-within {
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
text-decoration: none; text-decoration: none;
transition: all var(--transition-normal) transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast)
} }
.resource-item:hover { .resource-item:hover {
transform: translateY(-2px); box-shadow: var(--shadow-sm);
box-shadow: var(--shadow-md);
border-color: var(--primary); border-color: var(--primary);
background: var(--bg-primary) background: var(--bg-primary)
} }
@ -1684,18 +1671,16 @@ th {
font-size: var(--text-sm); font-size: var(--text-sm);
border-radius: var(--radius-md); border-radius: var(--radius-md);
cursor: pointer; cursor: pointer;
transition: transform var(--transition-fast), background var(--transition-fast) transition: background-color var(--transition-fast)
} }
.newsletter-form button:hover { .newsletter-form button:hover {
background: var(--primary-hover); background: var(--primary-hover)
transform: translateY(-1px)
} }
.newsletter-form button:disabled { .newsletter-form button:disabled {
opacity: .6; opacity: .6;
cursor: not-allowed; cursor: not-allowed
transform: none
} }
.social-links { .social-links {
@ -1716,15 +1701,14 @@ th {
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: var(--radius-full); border-radius: var(--radius-full);
color: var(--text-secondary); color: var(--text-secondary);
transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast) transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast)
} }
.social-btn:hover, .social-btn:hover,
.github-link:hover { .github-link:hover {
background: var(--primary); background: var(--primary);
border-color: var(--primary); border-color: var(--primary);
color: #fff; color: #fff
transform: translateY(-2px)
} }
.social-btn:focus-visible, .social-btn:focus-visible,
@ -1845,7 +1829,7 @@ tr:hover {
.status-cell:hover .status-indicator, .status-cell:hover .status-indicator,
.support-status:hover .status-indicator { .support-status:hover .status-indicator {
transform: scale(1.05); opacity: 0.9;
} }
.empty-state-row { .empty-state-row {
@ -1914,7 +1898,7 @@ tr:hover {
background: var(--bg-primary); background: var(--bg-primary);
color: var(--text-primary); color: var(--text-primary);
outline: none; outline: none;
transition: all var(--transition-fast); transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
padding-inline: var(--space-5xl); padding-inline: var(--space-5xl);
padding-block: var(--space-lg) padding-block: var(--space-lg)
} }
@ -1937,7 +1921,7 @@ tr:hover {
border-radius: var(--radius-md); border-radius: var(--radius-md);
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: all var(--transition-fast); transition: opacity var(--transition-fast), visibility var(--transition-fast);
width: 20px; width: 20px;
height: 20px height: 20px
} }
@ -1966,7 +1950,7 @@ tr:hover {
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
text-decoration: none; text-decoration: none;
transition: all var(--transition-normal); 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
@ -1978,14 +1962,13 @@ tr:hover {
inset: 0; inset: 0;
background: linear-gradient(135deg, rgba(99, 102, 241, .03) 0%, rgba(139, 92, 246, .02) 100%); background: linear-gradient(135deg, rgba(99, 102, 241, .03) 0%, rgba(139, 92, 246, .02) 100%);
opacity: 0; opacity: 0;
transition: opacity var(--transition-normal); transition: opacity var(--transition-fast);
z-index: -1 z-index: -1
} }
.status-card:hover { .status-card:hover {
border-color: var(--primary); border-color: var(--primary);
transform: translateY(-3px); box-shadow: var(--shadow-sm)
box-shadow: var(--shadow-md)
} }
.status-card:hover::before { .status-card:hover::before {
@ -2075,7 +2058,7 @@ tr:hover {
text-decoration: none; text-decoration: none;
width: 100%; width: 100%;
max-width: 200px; max-width: 200px;
transition: all var(--transition-normal); transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
min-height: 100px; min-height: 100px;
position: relative; position: relative;
overflow: hidden overflow: hidden
@ -2087,14 +2070,13 @@ tr:hover {
inset: 0; inset: 0;
background: linear-gradient(135deg, rgba(99, 102, 241, .03) 0%, rgba(139, 92, 246, .02) 100%); background: linear-gradient(135deg, rgba(99, 102, 241, .03) 0%, rgba(139, 92, 246, .02) 100%);
opacity: 0; opacity: 0;
transition: opacity var(--transition-normal); transition: opacity var(--transition-fast);
z-index: -1 z-index: -1
} }
.referral-card:hover { .referral-card:hover {
border-color: var(--primary); border-color: var(--primary);
transform: translateY(-3px); box-shadow: var(--shadow-sm)
box-shadow: var(--shadow-md)
} }
.referral-card:hover::before { .referral-card:hover::before {
@ -2159,7 +2141,7 @@ select {
font-size: var(--text-base); font-size: var(--text-base);
cursor: pointer; cursor: pointer;
appearance: none; appearance: none;
transition: all var(--transition-fast); transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
min-height: 48px min-height: 48px
} }
@ -2213,7 +2195,7 @@ select:hover {
text-transform: uppercase; text-transform: uppercase;
letter-spacing: .1em; letter-spacing: .1em;
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
transition: all var(--transition-fast); transition: box-shadow var(--transition-fast);
position: relative; position: relative;
overflow: hidden overflow: hidden
} }
@ -2232,9 +2214,7 @@ select:hover {
} }
.compare-select-group:focus-within label { .compare-select-group:focus-within label {
color: var(--primary); color: var(--primary)
transform: translateY(-2px);
transition: all var(--transition-fast)
} }
.empty-state { .empty-state {
@ -2468,7 +2448,7 @@ select:hover {
font-size: var(--text-sm); font-size: var(--text-sm);
min-width: auto; min-width: auto;
border-radius: var(--radius-md); border-radius: var(--radius-md);
transition: all var(--transition-fast) transition: background-color var(--transition-fast), border-color var(--transition-fast)
} }
.comparison-filters { .comparison-filters {
@ -2599,8 +2579,8 @@ select:hover {
.comparison-hiding { .comparison-hiding {
opacity: 0; opacity: 0;
transform: scale(.95); transform: scale(.98);
transition: all var(--transition-normal) transition: opacity var(--transition-fast), transform var(--transition-fast)
} }
.comparison-table .table-check, .comparison-table .table-check,
@ -2615,7 +2595,7 @@ select:hover {
#compare-table-container { #compare-table-container {
min-height: 200px; min-height: 200px;
transition: all var(--transition-normal); transition: opacity var(--transition-fast);
background: var(--bg-primary); background: var(--bg-primary);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
position: relative; position: relative;
@ -2912,15 +2892,14 @@ select:hover {
border-radius: var(--radius-md); border-radius: var(--radius-md);
color: var(--text-secondary); color: var(--text-secondary);
text-decoration: none; text-decoration: none;
transition: all var(--transition-fast) transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast)
} }
.github-link:hover { .github-link:hover {
background: var(--primary); background: var(--primary);
color: #fff; color: #fff;
border-color: var(--primary); border-color: var(--primary);
transform: translateY(-1px); box-shadow: var(--shadow-sm)
box-shadow: var(--shadow-md)
} }
.back-to-top { .back-to-top {
@ -2939,10 +2918,10 @@ select:hover {
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transform: translateY(20px); transform: translateY(10px);
z-index: 50; z-index: 50;
transition: all var(--transition-normal); transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
will-change: transform will-change: opacity, transform
} }
.back-to-top.visible { .back-to-top.visible {