- - - - -
-
@@ -413,9 +325,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
- @@ -492,35 +401,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
- - - diff --git a/static/css/components.css b/static/css/components.css index 900e42d..6f5dace 100644 --- a/static/css/components.css +++ b/static/css/components.css @@ -806,246 +806,6 @@ .video-responsive-tablet .video-player__header { padding: var(--spacing-3) var(--spacing-4) !important; } .video-responsive-desktop .video-player__header { padding: var(--spacing-4) var(--spacing-6) !important; } -/* ================================================================= - DASHBOARD COMPONENTS - ================================================================= */ - -/* Dashboard header */ -.dashboard__header { - background: linear-gradient(135deg, var(--dodgers-blue-600) 0%, var(--dodgers-blue-400) 100%); - padding: var(--spacing-4) var(--spacing-5); - color: white; - display: flex; - align-items: center; - justify-content: space-between; - box-shadow: var(--elevation-2); - z-index: 5; - border-bottom: 1px solid var(--dodgers-blue-300); -} - -.dashboard__title { - font-size: var(--font-size-lg); - font-weight: var(--font-weight-semibold); - display: flex; - align-items: center; - gap: var(--spacing-2); -} - -.dashboard__title::before { - content: ''; - display: inline-block; - width: 1em; - height: 1em; - 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='M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'%3E%3C/svg%3E") no-repeat center center; - background-size: contain; - margin-right: var(--spacing-2); -} - -.dashboard__controls { - display: flex; - gap: var(--spacing-2); -} - -.dashboard__toggle-btn { - background: rgba(255,255,255,0.2); - border: 1px solid rgba(255,255,255,0.3); - color: white; - padding: var(--spacing-2) var(--spacing-3); - border-radius: var(--border-radius-lg); - cursor: pointer; - font-size: var(--font-size-sm); - transition: all var(--transition-fast); - backdrop-filter: blur(10px); -} - -.dashboard__toggle-btn:hover { - background: rgba(255,255,255,0.3); - transform: translateY(-1px); -} - -/* Stats grid */ -.dashboard__stats-grid { - display: grid; - gap: var(--spacing-3); - padding: var(--spacing-4) var(--spacing-5) var(--spacing-3); - grid-template-columns: 1fr; -} - -.stats-card { - background: var(--color-surface); - border-radius: var(--border-radius-lg); - padding: var(--spacing-4); - border: 1px solid var(--color-outline-variant); - display: flex; - align-items: center; - gap: var(--spacing-3); - transition: all var(--transition-fast); - box-shadow: var(--elevation-1); -} - -.stats-card:hover { - transform: translateY(-2px); - box-shadow: var(--elevation-3); -} - -.stats-card__icon { - width: 48px; - height: 48px; - background: linear-gradient(135deg, var(--dodgers-blue-500), var(--dodgers-blue-300)); - border-radius: var(--border-radius-lg); - display: flex; - align-items: center; - justify-content: center; - color: white; - flex-shrink: 0; -} - -.stats-card__content { - flex: 1; - min-width: 0; -} - -.stats-card__value { - font-size: var(--font-size-2xl); - font-weight: var(--font-weight-bold); - color: var(--text-primary); - margin-bottom: var(--spacing-1); -} - -.stats-card__label { - font-size: var(--font-size-sm); - color: var(--text-muted); - font-weight: var(--font-weight-medium); -} - -/* Dashboard widgets */ -.dashboard__widgets { - flex: 1; - overflow-y: auto; - padding: var(--spacing-4) var(--spacing-5); - display: flex; - flex-direction: column; - gap: var(--spacing-4); -} - -.widget { - background: var(--color-surface); - border-radius: var(--border-radius-lg); - border: 1px solid var(--color-outline-variant); - box-shadow: var(--elevation-1); - overflow: hidden; -} - -.widget__header { - padding: var(--spacing-4); - border-bottom: 1px solid var(--color-outline-variant); - background: var(--color-surface-variant); -} - -.widget__title { - font-size: var(--font-size-base); - font-weight: var(--font-weight-semibold); - color: var(--text-primary); - margin: 0; -} - -.widget__content { - padding: var(--spacing-4); -} - -/* Activity items */ -.activity-item, -.user-item { - display: flex; - align-items: center; - gap: var(--spacing-3); - padding: var(--spacing-2) 0; - border-bottom: 1px solid var(--color-outline-variant); -} - -.activity-item:last-child, -.user-item:last-child { - border-bottom: none; -} - -.activity-item__avatar { - width: 32px; - height: 32px; - background: var(--dodgers-blue-500); - color: white; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-size: var(--font-size-sm); - flex-shrink: 0; -} - -.activity-item__content { - flex: 1; - min-width: 0; -} - -.activity-item__text { - font-size: var(--font-size-sm); - color: var(--text-primary); - margin-bottom: var(--spacing-1); -} - -.activity-item__time { - font-size: var(--font-size-xs); - color: var(--text-muted); -} - -/* User items */ -.user-item__status { - width: 8px; - height: 8px; - border-radius: 50%; - flex-shrink: 0; -} - -.user-item__status.online { - background: var(--color-success); - box-shadow: 0 0 6px rgba(var(--color-success-rgb), 0.5); -} - -.user-item__status.offline { - background: var(--color-outline); -} - -.user-item__nickname { - font-size: var(--font-size-sm); - color: var(--text-primary); - font-weight: var(--font-weight-medium); -} - -/* Responsive dashboard */ -@media (min-width: var(--breakpoint-lg)) and (max-width: calc(var(--breakpoint-2xl) - 1px)) { - .dashboard__stats-grid { - grid-template-columns: 1fr 1fr; - } -} - -@media (min-width: var(--breakpoint-2xl)) { - .dashboard__stats-grid { - grid-template-columns: 1fr; - } - - .stats-card { - padding: var(--spacing-3); - } - - .stats-card__icon { - width: 40px; - height: 40px; - } - - .stats-card__value { - font-size: var(--font-size-xl); - } -} - /* ================================================================= VIDEO HEADER - Top section of video area ================================================================= */ @@ -1066,21 +826,6 @@ gap: var(--spacing-5); } -/* Tablet-specific video header adjustments */ -@media (min-width: calc(var(--breakpoint-md))) and (max-width: calc(var(--breakpoint-lg) - 1px)) { - .video-player__header:not(.video-responsive-preserve) { - padding: var(--spacing-4) var(--spacing-6); - } - - .video-player__header-left:not(.video-responsive-preserve) { - gap: var(--spacing-6); - } - - .stream-logo { - font-size: var(--font-size-2xl); - } -} - .stream-logo { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); @@ -1237,23 +982,6 @@ justify-content: space-between; } -/* Tablet-specific chat header adjustments */ -@media (min-width: calc(var(--breakpoint-md))) and (max-width: calc(var(--breakpoint-lg) - 1px)) { - .chat__header:not(.chat-responsive-preserve) { - padding: var(--spacing-5) var(--spacing-6); - font-size: var(--font-size-lg); - } - - .chat__header-title { - gap: var(--spacing-3); - } - - .chat__header-title::before { - width: 1.5em; - height: 1.5em; - } -} - .chat__header-title { display: flex; align-items: center; @@ -1673,122 +1401,3 @@ font-size: 20px; background: rgba(0,90,156,0.9); } - -/* ================================================================= - MOBILE BOTTOM NAVIGATION - ================================================================= */ - -.mobile-nav { - position: fixed; - bottom: 0; - left: 0; - right: 0; - background: linear-gradient(135deg, var(--dodgers-blue-700), var(--dodgers-blue-600)); - border-top: 1px solid rgba(255,255,255,0.2); - box-shadow: var(--elevation-8); - backdrop-filter: blur(10px); - padding: var(--spacing-3) var(--spacing-4); - display: none; /* Hidden by default, shown only on mobile */ - z-index: var(--z-fixed); - flex-wrap: wrap; - justify-content: space-around; - align-items: center; -} - -.mobile-nav.active { - display: flex; -} - -.mobile-nav-btn { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: var(--spacing-1); - padding: var(--spacing-2) var(--spacing-1); - min-height: var(--min-tap-target-size, 44px); - min-width: var(--min-tap-target-size, 44px); - border: none; - background: transparent; - color: rgba(255,255,255,0.9); - border-radius: var(--border-radius-lg); - cursor: pointer; - transition: all var(--transition-fast); - font-size: var(--font-size-xs); - font-weight: var(--font-weight-medium); - text-align: center; -} - -.mobile-nav-btn:active { - transform: scale(0.95); - background: rgba(255,255,255,0.1); -} - -.mobile-nav-btn:hover { - color: white; - background: rgba(255,255,255,0.15); -} - -.mobile-nav-btn.active { - background: rgba(255,255,255,0.2); - color: white; -} - -.mobile-nav-btn .icon { - font-size: 20px; - width: 24px; - height: 24px; -} - -.mobile-nav-btn span { - font-size: 10px; - line-height: 1; - opacity: 0.9; -} - -/* Mobile navigation responsive behavior */ -@media (max-width: calc(var(--breakpoint-md) - 1px)) { - .mobile-nav { - display: flex; - } -} - -@media (max-width: calc(var(--breakpoint-sm) - 1px)) { - .mobile-nav { - padding: var(--spacing-2) var(--spacing-3); - gap: var(--spacing-3); - } - - .mobile-nav-btn { - padding: var(--spacing-1); - gap: 2px; - min-width: 48px; - } - - .mobile-nav-btn .icon { - width: 20px; - height: 20px; - font-size: 18px; - } - - .mobile-nav-btn span { - font-size: 9px; - } -} - -/* Safe area support for devices with notches */ -@supports (padding-bottom: max(0px)) { - .mobile-nav { - padding-bottom: max(var(--spacing-3), env(safe-area-inset-bottom)); - } - - body.mobile-nav-active { - padding-bottom: 80px; /* Space for bottom nav */ - } - - @media (max-width: calc(var(--breakpoint-md) - 1px)) { - body.mobile-nav-active { - padding-bottom: max(70px, calc(70px + env(safe-area-inset-bottom))); - } - } -} diff --git a/static/css/layout.css b/static/css/layout.css index ba0446f..5ed05f0 100644 --- a/static/css/layout.css +++ b/static/css/layout.css @@ -11,14 +11,6 @@ transition: all var(--transition-slow); } -/* Tablet-specific theater layout */ -@media (min-width: var(--breakpoint-md)) and (max-width: calc(var(--breakpoint-lg) - 1px)) { - .theater { - flex-direction: row; - /* Optimized for tablet: more balanced split */ - } -} - /* Mobile-first responsive layout */ @media (max-width: calc(var(--breakpoint-md) - 1px)) { .theater { @@ -68,19 +60,6 @@ width: 100%; } -/* Tablet-specific video section adjustments */ -@media (min-width: var(--breakpoint-md)) and (max-width: calc(var(--breakpoint-lg) - 1px)) { - .theater__video-section { - flex-basis: 0; /* Allow flex-grow to control sizing */ - flex-grow: 1; - min-width: 0; /* Prevent flex item from exceeding container */ - } - - .theater__video-section.expanded { - flex-grow: 2; /* When chat is collapsed, video takes more space */ - } -} - /* ================================================================= VIDEO WRAPPER - Contains the video element ================================================================= */ @@ -128,151 +107,3 @@ width: 320px; } } - -/* ================================================================= - DASHBOARD SECTION - Left sidebar for desktop enhancements - ================================================================= */ - -.theater__dashboard-section { - width: 280px; - background: var(--color-surface); - color: var(--text-primary); - display: flex; - flex-direction: column; - border-right: 1px solid var(--border-color); - box-shadow: var(--shadow-dodgers-lg); - transition: transform var(--transition-slow); - position: relative; -} - -.theater__dashboard-section.collapsed { - transform: translateX(-100%); - position: absolute; - left: 0; - height: 100%; -} - -/* Desktop dashboard visibility */ -@media (min-width: var(--breakpoint-2xl)) { - .theater__dashboard-section { - display: flex; - } -} - -/* Hide dashboard on smaller screens */ -@media (max-width: calc(var(--breakpoint-2xl) - 1px)) { - .theater__dashboard-section { - display: none; - } -} - -/* ================================================================= - DASHBOARD TOGGLE CONTROLS - ================================================================= */ - -.dashboard-toggle { - position: absolute; - top: 50%; - transform: translateY(-50%); - background: var(--color-surface); - color: var(--text-primary); - border: 1px solid var(--border-color); - border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0; - width: 40px; - height: 80px; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - box-shadow: var(--elevation-3); - z-index: 5; -} - -.dashboard-toggle.right { - right: -40px; - border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg); - border-left: none; -} - -.dashboard-toggle.left { - left: -40px; - border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0; - border-right: none; -} - -/* ================================================================= - RESIZE HANDLES - ================================================================= */ - -.resize-handle { - position: absolute; - width: 4px; - background: var(--color-outline); - cursor: col-resize; - opacity: 0; - transition: opacity var(--transition-fast); - z-index: 10; -} - -.resize-handle:hover, -.resize-handle.active { - opacity: 1; - background: var(--color-primary); -} - -/* Video/Dashboard resize handle */ -.theater__dashboard-section + .resize-handle { - right: -2px; - top: 0; - bottom: 0; - width: 4px; -} - -/* Video/Chat resize handle */ -.theater__video-section + .resize-handle { - right: -2px; - top: 0; - bottom: 0; - width: 4px; -} - -/* ================================================================= - DASHBOARD LAYOUT MODES - ================================================================= */ - -/* Dashboard enabled - 3-column layout */ -.theater.dashboard-enabled { - display: grid; - grid-template-columns: 280px 1fr 350px; - grid-template-areas: "dashboard video chat"; -} - -.theater.dashboard-enabled .theater__dashboard-section { - grid-area: dashboard; -} - -.theater.dashboard-enabled .theater__video-section { - grid-area: video; -} - -.theater.dashboard-enabled .theater__chat-section { - grid-area: chat; -} - -/* Dashboard disabled - Standard 2-column layout */ -.theater:not(.dashboard-enabled) .theater__dashboard-section { - display: none; -} - -/* Responsive dashboard behavior */ -@media (min-width: var(--breakpoint-2xl)) { - .theater.dashboard-enabled { - grid-template-columns: auto 1fr 350px; - } -} - -@media (min-width: var(--breakpoint-lg)) and (max-width: calc(var(--breakpoint-2xl) - 1px)) { - .theater.dashboard-enabled { - grid-template-columns: 250px 1fr 350px; - } -} diff --git a/static/css/variables.css b/static/css/variables.css index 1f9d341..246ddc0 100644 --- a/static/css/variables.css +++ b/static/css/variables.css @@ -297,10 +297,6 @@ --mq-lg-only: (min-width: var(--breakpoint-lg)) and (max-width: calc(var(--breakpoint-xl) - 1px)); --mq-xl-only: (min-width: var(--breakpoint-xl)) and (max-width: calc(var(--breakpoint-2xl) - 1px)); - /* Dashboard visibility breakpoints */ - --mq-dashboard-mobile: (max-width: calc(var(--breakpoint-2xl) - 1px)); - --mq-dashboard-enabled: (min-width: var(--breakpoint-2xl)); - /* ================================================================= Z-INDEX SCALE ================================================================= */