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

4
index.php
View file

@ -326,7 +326,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
</div>
<div class="video-player__header-controls">
<button class="stream-stats__refresh-btn" data-action="manual-refresh" title="Manual Stream Refresh" aria-label="Refresh stream">
<span class="icon-refresh"></span> Refresh
<span class="icon-refresh icon-sm"></span> Refresh
</button>
<select class="video-player__quality-selector" id="qualitySelector" style="display:none;" aria-label="Video quality">
<option value="auto">Auto Quality</option>
@ -381,7 +381,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
</div>
<section class="chat__messages" id="chatMessages" aria-live="polite" aria-label="Chat messages" role="log" aria-atomic="false">
<div class="chat__empty-state">No messages yet. Be the first to say hello! <span class="icon-wave"></span></div>
<div class="chat__empty-state">No messages yet. Be the first to say hello! <span class="icon-wave icon-md"></span></div>
</section>
<div class="chat__typing-indicator" id="typingIndicator" aria-live="assertive">

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 */

18
static/css/variables.css
View file

@ -277,6 +277,24 @@
--z-tooltip: 1070;
--z-toast: 1080;
/* =================================================================
ICON SIZE SCALE
================================================================= */
/* Icon Size Scale - Consistent scaling for SVG icons */
--icon-size-xs: 0.75rem; /* 12px - Small indicators */
--icon-size-sm: 1rem; /* 16px - Default size */
--icon-size-md: 1.25rem; /* 20px - Button icons */
--icon-size-lg: 1.5rem; /* 24px - Navigation elements */
--icon-size-xl: 2rem; /* 32px - Hero elements */
/* Responsive icon sizes based on viewport */
--icon-size-responsive-xs: clamp(0.625rem, 2vw, var(--icon-size-xs));
--icon-size-responsive-sm: clamp(0.875rem, 2.5vw, var(--icon-size-sm));
--icon-size-responsive-md: clamp(1rem, 3vw, var(--icon-size-md));
--icon-size-responsive-lg: clamp(1.25rem, 3.5vw, var(--icon-size-lg));
--icon-size-responsive-xl: clamp(1.5rem, 4vw, var(--icon-size-xl));
/* =================================================================
TRANSITIONS & ANIMATIONS
================================================================= */