refactor(styles): streamline transition properties and enhance accessibility support
This commit is contained in:
fynks
parent
09dbd77cc0
commit
6e2af5717e
1 changed files with 34 additions and 97 deletions
131
dist/css/styles.css
vendored
131
dist/css/styles.css
vendored
|
|
@ -137,7 +137,6 @@
|
|||
box-shadow: 0 0 0 6px rgba(99, 102, 241, .25);
|
||||
}
|
||||
|
||||
.nav-link,
|
||||
.btn,
|
||||
.status-card,
|
||||
.benefit-card {
|
||||
|
|
@ -145,18 +144,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* ===== REDUCED MOTION SUPPORT ===== */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important
|
||||
}
|
||||
}
|
||||
|
||||
@supports (content-visibility:auto) {
|
||||
|
||||
.section,
|
||||
|
|
@ -337,7 +324,7 @@ button:focus-visible {
|
|||
backdrop-filter: blur(12px) saturate(140%);
|
||||
-webkit-backdrop-filter: blur(12px) saturate(140%);
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
transition: all var(--transition-normal);
|
||||
transition: background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), backdrop-filter var(--transition-normal), -webkit-backdrop-filter var(--transition-normal);
|
||||
z-index: -1;
|
||||
will-change: backdrop-filter, background, border-bottom;
|
||||
}
|
||||
|
|
@ -578,7 +565,7 @@ button:focus-visible {
|
|||
color: var(--text-secondary);
|
||||
border-radius: var(--radius-lg);
|
||||
white-space: nowrap;
|
||||
transition: all var(--transition-fast);
|
||||
transition: color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -670,7 +657,7 @@ button:focus-visible {
|
|||
color: var(--text-primary);
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
|
||||
|
|
@ -707,7 +694,7 @@ button:focus-visible {
|
|||
width: 24px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
transition: all var(--transition-normal);
|
||||
transition: opacity var(--transition-normal), transform var(--transition-normal);
|
||||
}
|
||||
|
||||
.sun-icon {
|
||||
|
|
@ -740,7 +727,7 @@ button:focus-visible {
|
|||
border-radius: var(--radius-full);
|
||||
background: var(--bg-primary);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
|
@ -776,7 +763,7 @@ button:focus-visible {
|
|||
height: 2px;
|
||||
background: var(--text-primary);
|
||||
border-radius: var(--radius-full);
|
||||
transition: all var(--transition-fast);
|
||||
transition: transform var(--transition-fast), opacity var(--transition-fast), background-color var(--transition-fast);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
|
|
@ -902,7 +889,7 @@ button:focus-visible {
|
|||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius-md);
|
||||
transition: all var(--transition-fast);
|
||||
transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-medium);
|
||||
white-space: nowrap;
|
||||
|
|
@ -2557,7 +2544,7 @@ th {
|
|||
font-weight: var(--font-semibold);
|
||||
font-size: var(--text-sm);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
|
||||
|
|
@ -2737,7 +2724,7 @@ select:hover {
|
|||
color: var(--text-secondary)
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
.loading-state .loading-spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid var(--border-primary);
|
||||
|
|
@ -3291,7 +3278,7 @@ select:hover {
|
|||
font-size: var(--text-xs);
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--text-secondary);
|
||||
transition: all var(--transition-fast);
|
||||
transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
|
||||
}
|
||||
|
||||
.footer-stat:hover {
|
||||
|
|
@ -3340,7 +3327,7 @@ select:hover {
|
|||
font-size: var(--text-sm);
|
||||
line-height: 1.5;
|
||||
padding: var(--space-xs) 0;
|
||||
transition: all var(--transition-fast);
|
||||
transition: color var(--transition-fast), transform var(--transition-fast);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -3481,7 +3468,7 @@ select:hover {
|
|||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
color: var(--text-secondary);
|
||||
transition: all var(--transition-fast);
|
||||
transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
|
||||
}
|
||||
|
||||
.github-link:hover {
|
||||
|
|
@ -3588,10 +3575,6 @@ select:hover {
|
|||
}
|
||||
|
||||
@media (max-width:768px) {
|
||||
.header-nav {
|
||||
display:flex
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
flex-direction:column; align-items:center
|
||||
}
|
||||
|
|
@ -3764,14 +3747,6 @@ select:hover {
|
|||
min-width:auto
|
||||
}
|
||||
|
||||
.header-nav .nav-link.active {
|
||||
color:var(--primary)
|
||||
}
|
||||
|
||||
.header-nav .nav-link.active::after {
|
||||
content:''; display:block; height:2px; background:currentColor; border-radius:2px; margin-top:6px
|
||||
}
|
||||
|
||||
.comparison-header {
|
||||
padding:var(--space-md)
|
||||
}
|
||||
|
|
@ -3997,10 +3972,6 @@ select:hover {
|
|||
font-size:var(--text-lg); padding:var(--space-xs) var(--space-md)
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding:var(--space-sm) var(--space-md); font-size:.75rem
|
||||
}
|
||||
|
||||
.dark-mode-toggle {
|
||||
width:38px; height:38px
|
||||
}
|
||||
|
|
@ -4112,22 +4083,12 @@ select:hover {
|
|||
}
|
||||
|
||||
@media (pointer:coarse) {
|
||||
.nav-link:hover, .btn:hover, .status-card:hover, .benefit-card:hover, .speed-card:hover, .referral-card:hover, .note-card:hover, .resource-item:hover {
|
||||
.btn:hover, .status-card:hover, .benefit-card:hover, .speed-card:hover, .referral-card:hover, .note-card:hover, .resource-item:hover {
|
||||
transform:none
|
||||
}
|
||||
}/* ===== ACCESSIBILITY ENHANCEMENTS ===== */
|
||||
.visually-hidden {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
overflow: hidden !important;
|
||||
clip: rect(0, 0, 0, 0) !important;
|
||||
white-space: nowrap !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== ACCESSIBILITY ENHANCEMENTS ===== */
|
||||
#a11y-announcer {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
|
|
@ -4136,24 +4097,6 @@ select:hover {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Enhanced focus styles for keyboard navigation */
|
||||
*:focus-visible {
|
||||
outline: 3px solid var(--primary);
|
||||
outline-offset: 2px;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: outline-offset 0.15s ease;
|
||||
}
|
||||
|
||||
button:focus-visible,
|
||||
a:focus-visible,
|
||||
input:focus-visible,
|
||||
select:focus-visible,
|
||||
textarea:focus-visible {
|
||||
outline: 3px solid var(--primary);
|
||||
outline-offset: 3px;
|
||||
box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.15);
|
||||
}
|
||||
|
||||
/* Keyboard navigation for tables */
|
||||
table tbody tr:focus {
|
||||
outline: 3px solid var(--primary);
|
||||
|
|
@ -4247,6 +4190,25 @@ table tbody tr[tabindex="0"] {
|
|||
.table-wrapper.mobile-view .status-indicator {
|
||||
font-size: var(--text-xl);
|
||||
}
|
||||
|
||||
.comparison-table {
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.comparison-header {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comparison-stats {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.stat {
|
||||
width: 100%;
|
||||
padding: var(--space-md);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet optimizations */
|
||||
|
|
@ -4276,10 +4238,6 @@ table tbody tr[tabindex="0"] {
|
|||
min-width: 44px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: var(--space-lg) var(--space-xl);
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: var(--space-lg) var(--space-2xl);
|
||||
}
|
||||
|
|
@ -4363,24 +4321,3 @@ table tbody tr[tabindex="0"] {
|
|||
margin-top: var(--space-lg);
|
||||
}
|
||||
|
||||
/* ===== COMPARISON TABLE MOBILE IMPROVEMENTS ===== */
|
||||
@media (max-width: 767px) {
|
||||
.comparison-table {
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.comparison-header {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comparison-stats {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.stat {
|
||||
width: 100%;
|
||||
padding: var(--space-md);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue