iptv-stream-web/static/css/icons.css

/* SVG Icon System */

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
}

.icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* Icon Definitions */
.icon-refresh {
    display: inline-block;
    width: 1em;
    height: 1em;
}

.icon-refresh::before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    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='M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11.356 2a8.001 8.001 0 01-15.356 2M4 4v5h.582M4.582 9A8.003 8.003 0 019.582 9'%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
}

.icon-baseball {
    display: inline-block;
    width: 1em;
    height: 1em;
}

.icon-baseball::before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    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='M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z'%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
}

.icon-chat {
    display: inline-block;
    width: 1em;
    height: 1em;
}

.icon-chat::before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    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='M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z'%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
}

.icon-users {
    display: inline-block;
    width: 1em;
    height: 1em;
}

.icon-users::before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    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='M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zM6.5 9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z'%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
}

.icon-wave {
    display: inline-block;
    width: 1em;
    height: 1em;
}

.icon-wave::before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    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 */