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 {
border-radius: var(--border-radius-base);
.text-primary {
color: var(--text-primary);
}
.rounded-full {
border-radius: var(--border-radius-full);
.text-secondary {
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 {
transition: all var(--transition-base);
.bg-white {
background-color: white;
}
.transition-fast {
transition: all var(--transition-fast);
.bg-black {
background-color: black;
}
.transition-slow {
transition: all var(--transition-slow);
.bg-gray-50 {
background-color: var(--gray-50);
}
/* =================================================================
RESPONSIVE UTILITIES
================================================================= */
/* Hide elements at different breakpoints */
@media (max-width: 767px) {
.hidden-mobile {
display: none !important;
}
.bg-gray-100 {
background-color: var(--gray-100);
}
@media (min-width: 768px) {
.hidden-tablet {
display: none !important;
}
.bg-gray-200 {
background-color: var(--gray-200);
}
@media (max-width: 1023px) {
.hidden-tablet-up {
display: none !important;
}
.bg-gray-800 {
background-color: var(--gray-800);
}
@media (min-width: 1024px) {
.hidden-desktop {
display: none !important;
}
}
/* =================================================================
.bg-gray-900 {
background-color: var(--gray-900);
MOBILE RESPONSIVE OVERRIDES
================================================================= */