985 lines
19 KiB
CSS
985 lines
19 KiB
CSS
/* Utility classes and animations */
|
|
|
|
/* =================================================================
|
|
KEYFRAME ANIMATIONS
|
|
================================================================= */
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideOut {
|
|
to {
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes slideInFromBottom {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInFromTop {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes scaleIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@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 spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: -468px 0;
|
|
}
|
|
100% {
|
|
background-position: 468px 0;
|
|
}
|
|
}
|
|
|
|
/* =================================================================
|
|
TRANSITIONS UTILITY SYSTEM - Consistent transitions
|
|
================================================================= */
|
|
|
|
/* Transition duration constants */
|
|
.transition-none {
|
|
transition: none;
|
|
}
|
|
|
|
.transition-fast {
|
|
transition-duration: var(--transition-fast);
|
|
}
|
|
|
|
.transition-base {
|
|
transition-duration: var(--transition-base);
|
|
}
|
|
|
|
.transition-slow {
|
|
transition-duration: var(--transition-slow);
|
|
}
|
|
|
|
/* Transition properties - individual */
|
|
.transition-all {
|
|
transition-property: all;
|
|
transition-duration: var(--transition-base);
|
|
transition-timing-function: var(--ease-in-out);
|
|
}
|
|
|
|
.transition-colors {
|
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
|
transition-duration: var(--transition-base);
|
|
transition-timing-function: var(--ease-in-out);
|
|
}
|
|
|
|
.transition-transform {
|
|
transition-property: transform;
|
|
transition-duration: var(--transition-base);
|
|
transition-timing-function: var(--ease-in-out);
|
|
}
|
|
|
|
.transition-opacity {
|
|
transition-property: opacity;
|
|
transition-duration: var(--transition-base);
|
|
transition-timing-function: var(--ease-in-out);
|
|
}
|
|
|
|
.transition-shadow {
|
|
transition-property: box-shadow;
|
|
transition-duration: var(--transition-base);
|
|
transition-timing-function: var(--ease-in-out);
|
|
}
|
|
|
|
.transition-hover {
|
|
transition: all var(--transition-base) var(--ease-in-out);
|
|
}
|
|
|
|
/* Micro-interaction feedback */
|
|
.hover-lift {
|
|
transition: transform var(--transition-fast) var(--ease-out);
|
|
}
|
|
|
|
.hover-lift:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.interaction-press {
|
|
transition: transform var(--transition-fast) var(--ease-out);
|
|
}
|
|
|
|
.interaction-press:active {
|
|
transform: translateY(0) scale(0.98);
|
|
}
|
|
|
|
/* =================================================================
|
|
ANIMATION UTILITY CLASSES - Enter/exit animations
|
|
================================================================= */
|
|
|
|
/* Slide animations */
|
|
.animate-slide-in {
|
|
animation: slideIn var(--transition-slow) var(--ease-in-out);
|
|
}
|
|
|
|
.animate-slide-out {
|
|
animation: slideOut var(--transition-fast) var(--ease-in-out);
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fadeIn var(--transition-base) var(--ease-in-out);
|
|
}
|
|
|
|
.animate-fade-out {
|
|
animation: fadeOut var(--transition-fast) var(--ease-in-out);
|
|
}
|
|
|
|
.animate-slide-in-bottom {
|
|
animation: slideInFromBottom var(--transition-base) var(--ease-out);
|
|
}
|
|
|
|
.animate-slide-in-top {
|
|
animation: slideInFromTop var(--transition-base) var(--ease-out);
|
|
}
|
|
|
|
.animate-scale-in {
|
|
animation: scaleIn var(--transition-base) var(--ease-out);
|
|
}
|
|
|
|
/* Continuous animations */
|
|
.animate-pulse {
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
.animate-bounce {
|
|
animation: bounce 1s infinite;
|
|
}
|
|
|
|
.animate-spin {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
/* Delayed animations for staggered effects */
|
|
.animate-delay-1 {
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
.animate-delay-2 {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.animate-delay-3 {
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
/* =================================================================
|
|
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);
|
|
}
|
|
|
|
/* =================================================================
|
|
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);
|
|
}
|
|
|
|
/* =================================================================
|
|
CSS GRID UTILITY SYSTEM - 12-Column Based
|
|
================================================================= */
|
|
|
|
/* Grid display */
|
|
.grid {
|
|
display: grid;
|
|
}
|
|
|
|
/* Grid template columns - 12 column system */
|
|
.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 column 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-9 {
|
|
grid-column: span 9 / span 9;
|
|
}
|
|
|
|
.col-span-12 {
|
|
grid-column: span 12 / span 12;
|
|
}
|
|
|
|
/* Grid gap system */
|
|
.gap-1 {
|
|
gap: var(--spacing-1);
|
|
}
|
|
|
|
.gap-2 {
|
|
gap: var(--spacing-2);
|
|
}
|
|
|
|
.gap-3 {
|
|
gap: var(--spacing-3);
|
|
}
|
|
|
|
.gap-4 {
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.gap-5 {
|
|
gap: var(--spacing-5);
|
|
}
|
|
|
|
.gap-6 {
|
|
gap: var(--spacing-6);
|
|
}
|
|
|
|
/* Grid alignment */
|
|
.items-start {
|
|
align-items: start;
|
|
}
|
|
|
|
.items-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.items-end {
|
|
align-items: end;
|
|
}
|
|
|
|
.justify-start {
|
|
justify-items: start;
|
|
}
|
|
|
|
.justify-center {
|
|
justify-items: center;
|
|
}
|
|
|
|
.justify-end {
|
|
justify-items: end;
|
|
}
|
|
|
|
/* =================================================================
|
|
CONTAINER AND WRAPPER UTILITIES
|
|
================================================================= */
|
|
|
|
.container {
|
|
width: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-left: var(--spacing-4);
|
|
padding-right: var(--spacing-4);
|
|
}
|
|
|
|
.wrapper {
|
|
width: 100%;
|
|
max-width: var(--container-max);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* Responsive containers */
|
|
.container-fluid {
|
|
width: 100%;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
/* =================================================================
|
|
SPACING AND ALIGNMENT HELPERS
|
|
================================================================= */
|
|
|
|
/* Extended spacing utilities */
|
|
.p-1 {
|
|
padding: var(--spacing-1);
|
|
}
|
|
|
|
.p-2 {
|
|
padding: var(--spacing-2);
|
|
}
|
|
|
|
.p-3 {
|
|
padding: var(--spacing-3);
|
|
}
|
|
|
|
.p-5 {
|
|
padding: var(--spacing-5);
|
|
}
|
|
|
|
.p-6 {
|
|
padding: var(--spacing-6);
|
|
}
|
|
|
|
.px-2 {
|
|
padding-left: var(--spacing-2);
|
|
padding-right: var(--spacing-2);
|
|
}
|
|
|
|
.px-3 {
|
|
padding-left: var(--spacing-3);
|
|
padding-right: var(--spacing-3);
|
|
}
|
|
|
|
.py-2 {
|
|
padding-top: var(--spacing-2);
|
|
padding-bottom: var(--spacing-2);
|
|
}
|
|
|
|
.py-3 {
|
|
padding-top: var(--spacing-3);
|
|
padding-bottom: var(--spacing-3);
|
|
}
|
|
|
|
.py-5 {
|
|
padding-top: var(--spacing-5);
|
|
padding-bottom: var(--spacing-5);
|
|
}
|
|
|
|
.py-6 {
|
|
padding-top: var(--spacing-6);
|
|
padding-bottom: var(--spacing-6);
|
|
}
|
|
|
|
.m-1 {
|
|
margin: var(--spacing-1);
|
|
}
|
|
|
|
.m-2 {
|
|
margin: var(--spacing-2);
|
|
}
|
|
|
|
.m-3 {
|
|
margin: var(--spacing-3);
|
|
}
|
|
|
|
.m-5 {
|
|
margin: var(--spacing-5);
|
|
}
|
|
|
|
.m-6 {
|
|
margin: var(--spacing-6);
|
|
}
|
|
|
|
.mx-2 {
|
|
margin-left: var(--spacing-2);
|
|
margin-right: var(--spacing-2);
|
|
}
|
|
|
|
.mx-3 {
|
|
margin-left: var(--spacing-3);
|
|
margin-right: var(--spacing-3);
|
|
}
|
|
|
|
.my-2 {
|
|
margin-top: var(--spacing-2);
|
|
margin-bottom: var(--spacing-2);
|
|
}
|
|
|
|
.my-3 {
|
|
margin-top: var(--spacing-3);
|
|
margin-bottom: var(--spacing-3);
|
|
}
|
|
|
|
.my-5 {
|
|
margin-top: var(--spacing-5);
|
|
margin-bottom: var(--spacing-5);
|
|
}
|
|
|
|
.my-6 {
|
|
margin-top: var(--spacing-6);
|
|
margin-bottom: var(--spacing-6);
|
|
}
|
|
|
|
/* =================================================================
|
|
RESPONSIVE GRID UTILITIES - Based on breakpoints
|
|
================================================================= */
|
|
|
|
/* SM and up (640px+) */
|
|
@media (min-width: 640px) {
|
|
.sm\:grid {
|
|
display: grid;
|
|
}
|
|
|
|
.sm\:grid-cols-1 {
|
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
}
|
|
|
|
.sm\:grid-cols-2 {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.sm\:grid-cols-3 {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.sm\:grid-cols-4 {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
.sm\:grid-cols-6 {
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
}
|
|
|
|
.sm\:col-span-1 {
|
|
grid-column: span 1 / span 1;
|
|
}
|
|
|
|
.sm\:col-span-2 {
|
|
grid-column: span 2 / span 2;
|
|
}
|
|
}
|
|
|
|
/* MD and up (768px+) */
|
|
@media (min-width: 768px) {
|
|
.md\:grid {
|
|
display: grid;
|
|
}
|
|
|
|
.md\:grid-cols-1,
|
|
.md\:grid-cols-2 {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.md\:grid-cols-3 {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.md\:grid-cols-4 {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
.md\:grid-cols-6 {
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
}
|
|
|
|
.md\:grid-cols-12 {
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
}
|
|
|
|
.md\:col-span-1 {
|
|
grid-column: span 1 / span 1;
|
|
}
|
|
|
|
.md\:col-span-2 {
|
|
grid-column: span 2 / span 2;
|
|
}
|
|
|
|
.md\:col-span-3 {
|
|
grid-column: span 3 / span 3;
|
|
}
|
|
|
|
.md\:col-span-4 {
|
|
grid-column: span 4 / span 4;
|
|
}
|
|
|
|
.md\:col-span-6 {
|
|
grid-column: span 6 / span 6;
|
|
}
|
|
|
|
.md\:col-span-8 {
|
|
grid-column: span 8 / span 8;
|
|
}
|
|
}
|
|
|
|
/* LG and up (1024px+) */
|
|
@media (min-width: 1024px) {
|
|
.lg\:grid {
|
|
display: grid;
|
|
}
|
|
|
|
.lg\:grid-cols-1 {
|
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
}
|
|
|
|
.lg\:grid-cols-2 {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.lg\:grid-cols-3 {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.lg\:grid-cols-4 {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
.lg\:grid-cols-6 {
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
}
|
|
|
|
.lg\:grid-cols-12 {
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
}
|
|
|
|
.lg\:col-span-1 {
|
|
grid-column: span 1 / span 1;
|
|
}
|
|
|
|
.lg\:col-span-2 {
|
|
grid-column: span 2 / span 2;
|
|
}
|
|
|
|
.lg\:col-span-3 {
|
|
grid-column: span 3 / span 3;
|
|
}
|
|
|
|
.lg\:col-span-4 {
|
|
grid-column: span 4 / span 4;
|
|
}
|
|
|
|
.lg\:col-span-6 {
|
|
grid-column: span 6 / span 6;
|
|
}
|
|
|
|
.lg\:col-span-8 {
|
|
grid-column: span 8 / span 8;
|
|
}
|
|
}
|
|
|
|
/* Responsive spacing modifiers */
|
|
@media (min-width: 768px) {
|
|
.md\:gap-2 {
|
|
gap: var(--spacing-2);
|
|
}
|
|
|
|
.md\:gap-4 {
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.md\:gap-6 {
|
|
gap: var(--spacing-6);
|
|
}
|
|
}
|
|
|
|
/* =================================================================
|
|
RESPONSIVE CONTAINER SYSTEM
|
|
================================================================= */
|
|
|
|
@media (min-width: 640px) {
|
|
.container {
|
|
max-width: 640px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.container {
|
|
max-width: 768px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.container {
|
|
max-width: 1024px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1280px) {
|
|
.container {
|
|
max-width: 1280px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1536px) {
|
|
.container {
|
|
max-width: 1536px;
|
|
}
|
|
}
|
|
|
|
/* =================================================================
|
|
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;
|
|
}
|
|
}
|