vinny/iptv-stream-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Complete 2.4.4-2.5.4: Phase 2 Visual Design Modernization components - accessibility icons, modern button/card/form systems, skeleton loading patterns

Browse source
This commit is contained in:
VinnyNC 2025-09-29 19:16:37 -04:00
parent 443797bfac
commit b8bf274731
3 changed files with 602 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

63
static/css/icons.css
View file

@ -207,6 +207,69 @@
height: var(--current-icon-size);
}
/* =================================================================
ACCESSIBILITY - Screen Reader Support
================================================================= */
/* Screen reader only text - hide visually but available to assistive tech */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Screen reader only - but show when focused for keyboard users */
.sr-only:focus {
position: static;
width: auto;
height: auto;
padding: 0.5rem;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
background: var(--color-surface);
color: var(--color-on-surface);
border-radius: var(--border-radius-md);
box-shadow: var(--elevation-3);
z-index: var(--z-tooltip);
}
/* =================================================================
FOCUS INDICATORS FOR ICON CONTROLS
================================================================= */
/* Base focus styles for interactive icons */
.icon-interactive:focus {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
border-radius: var(--border-radius-sm);
}
/* Enhanced focus ring that matches design system */
.icon-focus-ring {
position: relative;
}
.icon-focus-ring:focus::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border: 2px solid var(--color-focus);
border-radius: var(--border-radius-md);
z-index: 1;
pointer-events: none;
}
/* =================================================================
ANIMATED ICONS
================================================================= */