Refactor HTML structure and CSS classes for video player and chat components to improve accessibility and maintainability
This commit is contained in:
Vincent
parent
14bc8e6f44
commit
9ca65f3c62
2 changed files with 103 additions and 103 deletions
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue