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

Refactor color utility classes - added text and background color utilities for primary, secondary, muted, accent, error, and success states

Browse source
This commit is contained in:
Vincent 2025-09-28 23:23:39 -04:00
parent 9541765fbd
commit 128d339f32
1 changed files with 36 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

72
static/css/utilities.css
View file

@ -253,63 +253,63 @@
} }
/* ================================================================= /* =================================================================
BORDER UTILITIES COLOR UTILITY CLASSES
================================================================= */ ================================================================= */
.rounded { .text-primary {
border-radius: var(--border-radius-base); color: var(--text-primary);
} }
.rounded-full { .text-secondary {
border-radius: var(--border-radius-full); color: var(--text-secondary);
}
.text-muted {
color: var(--text-muted);
}
.text-accent {
color: var(--dodgers-gold-500);
}
.text-error {
color: var(--dodgers-red-500);
}
.text-success {
color: var(--dodgers-blue-500);
} }
/* ================================================================= /* =================================================================
TRANSITIONS UTILITIES BG-NEUTRAL UTILITIES
================================================================= */ ================================================================= */
.transition { .bg-white {
transition: all var(--transition-base); background-color: white;
} }
.transition-fast { .bg-black {
transition: all var(--transition-fast); background-color: black;
} }
.transition-slow { .bg-gray-50 {
transition: all var(--transition-slow); background-color: var(--gray-50);
} }
/* ================================================================= .bg-gray-100 {
RESPONSIVE UTILITIES background-color: var(--gray-100);
================================================================= */
/* Hide elements at different breakpoints */
@media (max-width: 767px) {
.hidden-mobile {
display: none !important;
}
} }
@media (min-width: 768px) { .bg-gray-200 {
.hidden-tablet { background-color: var(--gray-200);
display: none !important;
}
} }
@media (max-width: 1023px) { .bg-gray-800 {
.hidden-tablet-up { background-color: var(--gray-800);
display: none !important;
}
} }
@media (min-width: 1024px) { .bg-gray-900 {
.hidden-desktop { background-color: var(--gray-900);
display: none !important;
}
}
/* =================================================================
MOBILE RESPONSIVE OVERRIDES MOBILE RESPONSIVE OVERRIDES
================================================================= */ ================================================================= */