413 lines
9 KiB
CSS
413 lines
9 KiB
CSS
/* Utility classes and animations */
|
|
|
|
/* =================================================================
|
|
KEYFRAME ANIMATIONS
|
|
================================================================= */
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
|
|
@keyframes slideOut {
|
|
to {
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
/* =================================================================
|
|
SCROLLBAR STYLING
|
|
================================================================= */
|
|
|
|
.chat-messages::-webkit-scrollbar {
|
|
width: var(--spacing-2);
|
|
}
|
|
|
|
.chat-messages::-webkit-scrollbar-track {
|
|
background: var(--bg-darker);
|
|
}
|
|
|
|
.chat-messages::-webkit-scrollbar-thumb {
|
|
background: var(--dodgers-blue-500);
|
|
border-radius: var(--border-radius-sm);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.chat-messages::-webkit-scrollbar-thumb:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* =================================================================
|
|
VIDEO.JS OVERRIDES
|
|
================================================================= */
|
|
|
|
/* Video player container */
|
|
#video-player {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
/* Video.js skin overrides */
|
|
.video-js {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
max-width: 100% !important;
|
|
max-height: 100% !important;
|
|
}
|
|
|
|
/* Override VideoJS fluid behavior to prevent overflow */
|
|
.video-js.vjs-fluid {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
max-width: 100% !important;
|
|
max-height: 100% !important;
|
|
padding-top: 0 !important;
|
|
}
|
|
|
|
/* Ensure the actual video element is properly constrained */
|
|
.video-js video {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
max-width: 100% !important;
|
|
max-height: 100% !important;
|
|
object-fit: contain !important;
|
|
}
|
|
|
|
/* Control bar styling */
|
|
.video-js .vjs-control-bar {
|
|
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
|
|
}
|
|
|
|
/* =================================================================
|
|
FOCUSABLE ELEMENTS (Accessibility)
|
|
================================================================= */
|
|
|
|
/* Focus ring utility - can be used on any focusable element */
|
|
.focus-ring:focus {
|
|
outline: 2px solid var(--dodgers-blue-500);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* =================================================================
|
|
VISIBLE ONLY TO SCREEN READERS
|
|
================================================================= */
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
/* =================================================================
|
|
FLEXBOX UTILITIES
|
|
================================================================= */
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.flex-col {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.items-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.justify-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
.justify-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.gap-2 {
|
|
gap: var(--spacing-2);
|
|
}
|
|
|
|
.gap-4 {
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
/* =================================================================
|
|
CSS GRID UTILITIES
|
|
================================================================= */
|
|
|
|
/* Grid containers */
|
|
.grid {
|
|
display: grid;
|
|
}
|
|
|
|
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
|
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
|
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
|
|
|
|
/* Grid row spans */
|
|
.col-span-1 { grid-column: span 1 / span 1; }
|
|
.col-span-2 { grid-column: span 2 / span 2; }
|
|
.col-span-3 { grid-column: span 3 / span 3; }
|
|
.col-span-4 { grid-column: span 4 / span 4; }
|
|
.col-span-6 { grid-column: span 6 / span 6; }
|
|
.col-span-8 { grid-column: span 8 / span 8; }
|
|
.col-span-12 { grid-column: span 12 / span 12; }
|
|
|
|
/* Grid row spans */
|
|
.row-span-1 { grid-row: span 1 / span 1; }
|
|
.row-span-2 { grid-row: span 2 / span 2; }
|
|
.row-span-3 { grid-row: span 3 / span 3; }
|
|
.row-span-4 { grid-row: span 4 / span 4; }
|
|
|
|
/* Grid alignment */
|
|
.place-items-center {
|
|
place-items: center;
|
|
}
|
|
|
|
.items-start { align-items: start; }
|
|
.items-end { align-items: end; }
|
|
.items-center { align-items: center; }
|
|
|
|
.justify-start { justify-content: start; }
|
|
.justify-end { justify-content: end; }
|
|
.justify-center { justify-content: center; }
|
|
.justify-between { justify-content: space-between; }
|
|
.justify-around { justify-content: space-around; }
|
|
.justify-evenly { justify-content: space-evenly; }
|
|
|
|
.place-content-center {
|
|
place-content: center;
|
|
}
|
|
|
|
/* Grid gap utilities */
|
|
.gap-2 { gap: var(--spacing-2); }
|
|
.gap-4 { gap: var(--spacing-4); }
|
|
.gap-6 { gap: var(--spacing-6); }
|
|
|
|
/* Grid auto-fit/auto-fill for responsive grids */
|
|
.grid-auto-fit-sm {
|
|
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
|
|
}
|
|
|
|
.grid-auto-fill-md {
|
|
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
|
|
}
|
|
|
|
.grid-auto-fit-lg {
|
|
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
|
|
}
|
|
|
|
/* =================================================================
|
|
SPACING UTILITIES
|
|
================================================================= */
|
|
|
|
.p-4 {
|
|
padding: var(--spacing-4);
|
|
}
|
|
|
|
.px-4 {
|
|
padding-left: var(--spacing-4);
|
|
padding-right: var(--spacing-4);
|
|
}
|
|
|
|
.py-4 {
|
|
padding-top: var(--spacing-4);
|
|
padding-bottom: var(--spacing-4);
|
|
}
|
|
|
|
.m-4 {
|
|
margin: var(--spacing-4);
|
|
}
|
|
|
|
.mx-4 {
|
|
margin-left: var(--spacing-4);
|
|
margin-right: var(--spacing-4);
|
|
}
|
|
|
|
.my-4 {
|
|
margin-top: var(--spacing-4);
|
|
margin-bottom: var(--spacing-4);
|
|
}
|
|
|
|
/* =================================================================
|
|
TEXT UTILITIES
|
|
================================================================= */
|
|
|
|
.text-sm {
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.text-base {
|
|
font-size: var(--font-size-base);
|
|
}
|
|
|
|
.text-lg {
|
|
font-size: var(--font-size-lg);
|
|
}
|
|
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.font-semibold {
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.font-bold {
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
/* =================================================================
|
|
BACKGROUND UTILITIES
|
|
================================================================= */
|
|
|
|
.bg-primary {
|
|
background-color: var(--dodgers-blue-500);
|
|
}
|
|
|
|
.bg-secondary {
|
|
background-color: var(--dodgers-red-500);
|
|
}
|
|
|
|
.bg-accent {
|
|
background-color: var(--dodgers-gold-500);
|
|
}
|
|
|
|
/* =================================================================
|
|
COLOR UTILITY CLASSES
|
|
================================================================= */
|
|
|
|
.text-primary {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* =================================================================
|
|
BG-NEUTRAL UTILITIES
|
|
================================================================= */
|
|
|
|
.bg-white {
|
|
background-color: white;
|
|
}
|
|
|
|
.bg-black {
|
|
background-color: black;
|
|
}
|
|
|
|
.bg-gray-50 {
|
|
background-color: var(--gray-50);
|
|
}
|
|
|
|
.bg-gray-100 {
|
|
background-color: var(--gray-100);
|
|
}
|
|
|
|
.bg-gray-200 {
|
|
background-color: var(--gray-200);
|
|
}
|
|
|
|
.bg-gray-800 {
|
|
background-color: var(--gray-800);
|
|
}
|
|
|
|
.bg-gray-900 {
|
|
background-color: var(--gray-900);
|
|
}
|
|
|
|
/* =================================================================
|
|
MOBILE RESPONSIVE OVERRIDES
|
|
================================================================= */
|
|
|
|
@media (max-width: 768px) {
|
|
.chat-section {
|
|
width: 100%;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
z-index: var(--z-modal);
|
|
}
|
|
|
|
.video-header {
|
|
padding: var(--spacing-3) var(--spacing-4);
|
|
}
|
|
|
|
.logo {
|
|
font-size: var(--font-size-base);
|
|
}
|
|
|
|
.stream-stats {
|
|
gap: var(--spacing-3);
|
|
}
|
|
|
|
.quality-selector {
|
|
display: none;
|
|
}
|
|
}
|