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

Complete 2.4.2: Icon Size Variants Implementation

Browse source
This commit is contained in:
VinnyNC 2025-09-29 19:06:22 -04:00
parent 249d985f58
commit 370b7f7a59
3 changed files with 104 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

84
static/css/icons.css
View file

@ -89,3 +89,87 @@
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 16l-4-4m0 0l4-4m-4 4h18'%3E%3C/svg%3E") no-repeat center center;
background-size: contain;
}
/* =================================================================
ICON SIZE MODIFIERS
================================================================= */
/* Extra small icons (12px) */
.icon-xs {
width: var(--icon-size-xs);
height: var(--icon-size-xs);
}
/* Small icons (16px) - Default fallback */
.icon-sm {
width: var(--icon-size-sm);
height: var(--icon-size-sm);
}
/* Medium icons (20px) */
.icon-md {
width: var(--icon-size-md);
height: var(--icon-size-md);
}
/* Large icons (24px) */
.icon-lg {
width: var(--icon-size-lg);
height: var(--icon-size-lg);
}
/* Extra large icons (32px) */
.icon-xl {
width: var(--icon-size-xl);
height: var(--icon-size-xl);
}
/* =================================================================
RESPONSIVE ICON SCALING
================================================================= */
/* Responsive size variants that scale with viewport */
.icon-responsive {
--current-icon-size: var(--icon-size-sm);
width: var(--current-icon-size);
height: var(--current-icon-size);
}
.icon-responsive-xs {
--current-icon-size: var(--icon-size-responsive-xs);
width: var(--current-icon-size);
height: var(--current-icon-size);
}
.icon-responsive-sm {
--current-icon-size: var(--icon-size-responsive-sm);
width: var(--current-icon-size);
height: var(--current-icon-size);
}
.icon-responsive-md {
--current-icon-size: var(--icon-size-responsive-md);
width: var(--current-icon-size);
height: var(--current-icon-size);
}
.icon-responsive-lg {
--current-icon-size: var(--icon-size-responsive-lg);
width: var(--current-icon-size);
height: var(--current-icon-size);
}
.icon-responsive-xl {
--current-icon-size: var(--icon-size-responsive-xl);
width: var(--current-icon-size);
height: var(--current-icon-size);
}
/* Override defaults for specific icon types if needed */
/* Add icon-specific overrides here as needed */