+
- DODGERS STREAM
-
WAITING...
- 0 viewers
+ WAITING...
+ 0 viewers
-
+
-
-
Live Chat
-
-
+
-
-
-
+
+
+
diff --git a/static/css/components.css b/static/css/components.css
index c04a0b2..54c346c 100644
--- a/static/css/components.css
+++ b/static/css/components.css
@@ -4,7 +4,7 @@
VIDEO HEADER - Top section of video area
================================================================= */
-.video-header {
+.video-player__header {
background: linear-gradient(135deg, var(--dodgers-blue-700) 0%, var(--dodgers-blue-500) 100%);
padding: var(--spacing-3) var(--spacing-5);
display: flex;
@@ -14,13 +14,13 @@
z-index: 10;
}
-.header-left {
+.video-player__header-left {
display: flex;
align-items: center;
gap: var(--spacing-5);
}
-.logo {
+.stream-logo {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: white;
@@ -30,7 +30,7 @@
gap: var(--spacing-2);
}
-.logo::before {
+.stream-logo::before {
content: "âš¾";
font-size: var(--font-size-2xl);
}
@@ -45,7 +45,18 @@
gap: var(--spacing-4);
}
-.viewer-count {
+.stream-stats__status {
+ background: var(--dodgers-red);
+ color: white;
+ padding: var(--spacing-2) var(--spacing-4);
+ border-radius: var(--border-radius-2xl);
+ font-size: var(--font-size-xs);
+ font-weight: var(--font-weight-bold);
+ text-transform: uppercase;
+ animation: pulse 2s infinite;
+}
+
+.stream-stats__viewer-count {
background: rgba(255,255,255,0.2);
padding: var(--spacing-2) var(--spacing-4);
border-radius: var(--border-radius-2xl);
@@ -58,33 +69,22 @@
backdrop-filter: blur(10px);
}
-.viewer-count::before {
+.stream-stats__viewer-count::before {
content: "👥";
}
-.stream-badge {
- background: var(--dodgers-red);
- color: white;
- padding: var(--spacing-2) var(--spacing-4);
- border-radius: var(--border-radius-2xl);
- font-size: var(--font-size-xs);
- font-weight: var(--font-weight-bold);
- text-transform: uppercase;
- animation: pulse 2s infinite;
-}
-
/* =================================================================
HEADER CONTROLS - Buttons and selectors
================================================================= */
-.header-controls {
+.video-player__header-controls {
display: flex;
gap: var(--spacing-3);
align-items: center;
}
/* Ensure all header control buttons have identical dimensions */
-.header-controls > * {
+.video-player__header-controls > * {
height: 35px;
display: flex;
align-items: center;
@@ -94,7 +94,7 @@
line-height: 1;
}
-.quality-selector {
+.video-player__quality-selector {
background: rgba(255,255,255,0.2);
border: none;
color: white;
@@ -111,7 +111,7 @@
min-height: auto;
}
-.toggle-chat-btn {
+.video-player__toggle-chat-btn {
background: rgba(255,255,255,0.2);
border: none;
color: white;
@@ -125,12 +125,12 @@
position: relative;
}
-.toggle-chat-btn:hover {
+.video-player__toggle-chat-btn:hover {
background: rgba(255,255,255,0.3);
transform: translateY(-1px);
}
-.manual-refresh-btn {
+.stream-stats__refresh-btn {
background: rgba(255,255,255,0.2);
border: none;
color: white;
@@ -144,7 +144,7 @@
position: relative;
}
-.manual-refresh-btn:hover {
+.stream-stats__refresh-btn:hover {
background: rgba(255,255,255,0.3);
transform: translateY(-1px);
}
@@ -153,7 +153,7 @@
CHAT HEADER
================================================================= */
-.chat-header {
+.chat__header {
background: linear-gradient(135deg, var(--dodgers-blue-500) 0%, var(--dodgers-blue-300) 100%);
padding: var(--spacing-4) var(--spacing-5);
color: white;
@@ -165,23 +165,23 @@
justify-content: space-between;
}
-.chat-header-left {
+.chat__header-title {
display: flex;
align-items: center;
gap: var(--spacing-2);
}
-.chat-header-left::before {
+.chat__header-title::before {
content: "💬";
font-size: var(--font-size-lg);
}
-.admin-controls {
+.chat__admin-controls {
display: flex;
gap: var(--spacing-2);
}
-.admin-btn {
+.chat__admin-btn {
background: rgba(255,215,0,0.3);
border: 1px solid var(--dodgers-gold);
color: white;
@@ -192,7 +192,7 @@
transition: all var(--transition-fast);
}
-.admin-btn:hover {
+.chat__admin-btn:hover {
background: rgba(255,215,0,0.5);
}
@@ -200,13 +200,13 @@
USER INFO SECTION
================================================================= */
-.user-info {
+.chat__user-info {
padding: var(--spacing-3) var(--spacing-4);
background: var(--card-bg);
border-bottom: 1px solid var(--border-color);
}
-.user-id-display {
+.chat__user-id-display {
font-size: var(--font-size-xs);
color: var(--text-muted);
margin-bottom: var(--spacing-2);
@@ -215,7 +215,7 @@
gap: var(--spacing-2);
}
-.id-badge {
+.chat__user-id-badge {
background: var(--dodgers-blue-500);
color: white;
padding: var(--spacing-1) var(--spacing-2);
@@ -224,16 +224,16 @@
font-family: var(--font-family-mono);
}
-.id-badge.admin {
+.chat__user-id-badge.admin {
background: linear-gradient(135deg, var(--dodgers-gold), #FFB700);
color: #333;
}
-.nickname-input {
+.chat__nickname-input {
position: relative;
}
-.nickname-input input {
+.chat__nickname-input input {
width: 100%;
padding: var(--spacing-3) var(--spacing-3);
border: 2px solid var(--border-color);
@@ -244,11 +244,11 @@
color: var(--text-primary);
}
-.nickname-input input::placeholder {
+.chat__nickname-input input::placeholder {
color: var(--text-muted);
}
-.nickname-input input:focus {
+.chat__nickname-input input:focus {
outline: none;
border-color: var(--dodgers-blue-500);
box-shadow: 0 0 0 3px var(--focus-ring);
@@ -258,7 +258,7 @@
CHAT MESSAGES CONTAINER
================================================================= */
-.chat-messages {
+.chat__messages {
flex: 1;
overflow-y: auto;
padding: var(--spacing-4);
@@ -378,7 +378,7 @@
border-radius: var(--border-radius-md);
}
-.typing-indicator {
+.chat__typing-indicator {
padding: 0 var(--spacing-4) var(--spacing-2);
font-size: var(--font-size-xs);
color: var(--text-muted);
@@ -386,19 +386,19 @@
display: none;
}
-.typing-indicator.active {
+.chat__typing-indicator.active {
display: block;
}
-.typing-indicator span {
+.chat__typing-indicator span {
animation: blink 1.4s infinite;
}
-.typing-indicator span:nth-child(2) {
+.chat__typing-indicator span:nth-child(2) {
animation-delay: 0.2s;
}
-.typing-indicator span:nth-child(3) {
+.chat__typing-indicator span:nth-child(3) {
animation-delay: 0.4s;
}
@@ -406,18 +406,18 @@
CHAT INPUT AREA
================================================================= */
-.chat-input {
+.chat__input {
padding: var(--spacing-3) var(--spacing-4);
background: var(--card-bg);
border-top: 1px solid var(--border-color);
}
-.input-group {
+.chat__input-group {
display: flex;
gap: var(--spacing-2);
}
-.chat-input input {
+.chat__input input {
flex: 1;
padding: var(--spacing-3) var(--spacing-4);
border: 2px solid var(--border-color);
@@ -428,17 +428,17 @@
color: var(--text-primary);
}
-.chat-input input::placeholder {
+.chat__input input::placeholder {
color: var(--text-muted);
}
-.chat-input input:focus {
+.chat__input input:focus {
outline: none;
border-color: var(--dodgers-blue-500);
box-shadow: 0 0 0 3px var(--focus-ring);
}
-.chat-input button {
+.chat__input button {
padding: var(--spacing-3) var(--spacing-5);
background: linear-gradient(135deg, var(--dodgers-blue-500), var(--dodgers-blue-300));
color: white;
@@ -451,16 +451,16 @@
box-shadow: var(--shadow-dodgers-sm);
}
-.chat-input button:hover {
+.chat__input button:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-dodgers-md);
}
-.chat-input button:active {
+.chat__input button:active {
transform: translateY(0);
}
-.empty-chat {
+.chat__empty-state {
text-align: center;
color: var(--text-muted);
padding: var(--spacing-12) var(--spacing-5);
@@ -471,7 +471,7 @@
CONNECTION STATUS
================================================================= */
-.connection-status {
+.chat__connection-status {
padding: var(--spacing-2);
background: var(--bg-darker);
text-align: center;
@@ -484,7 +484,7 @@
border-top: 1px solid var(--border-color);
}
-.status-dot {
+.chat__connection-indicator {
width: var(--spacing-2);
height: var(--spacing-2);
border-radius: 50%;
@@ -492,7 +492,7 @@
animation: blink 2s infinite;
}
-.status-dot.offline {
+.chat__connection-indicator.offline {
background: #f44336;
animation: none;
}
@@ -520,7 +520,7 @@
opacity: 1;
}
-.notification-badge {
+.video-player__notification-badge {
position: absolute;
top: calc(var(--spacing-2) * -1);
right: calc(var(--spacing-2) * -1);
@@ -534,7 +534,7 @@
animation: bounce 0.5s;
}
-.notification-badge.show {
+.video-player__notification-badge.show {
display: block;
}
- Your ID: Loading...
+
+
+
+
+ User Information
+
+ Your ID: Loading...
-
-
+
-
-
+
-
-
+
+
+
-
+
Connected
-
-
-
-
- No messages yet. Be the first to say hello! 👋
-
+
+
+
+
+
- No messages yet. Be the first to say hello! 👋
+
Someone is typing...
-
-
-
-
-
-
-
- Send Message
+
+
+
+
+