| @@ -79,9 +79,8 @@ | ||
| 79 | 79 | position: absolute; |
| 80 | 80 | top: 0.5em; |
| 81 | 81 | left: 1.5em; |
| 82 | 82 | opacity: 90%; |
| 83 | - z-index: 3; | |
| 84 | 83 | } |
| 85 | 84 | |
| 86 | 85 | .broadcaster-container .video-live-indicator .badge { |
| 87 | 86 | display: inline-block; |
| @@ -122,21 +121,11 @@ | ||
| 122 | 121 | border-radius: 4px; |
| 123 | 122 | overflow: hidden; |
| 124 | 123 | } |
| 125 | 124 | |
| 126 | -@media screen and (max-width: 600px) { | |
| 127 | - .video-container { | |
| 128 | - display: flex; | |
| 129 | - flex-direction: column; | |
| 130 | - justify-content: center; | |
| 131 | - max-height: 60vh; | |
| 132 | - } | |
| 133 | -} | |
| 134 | - | |
| 135 | 125 | #localVideo { |
| 136 | - position: relative; | |
| 137 | - z-index: 2; | |
| 138 | 126 | width: 100%; |
| 127 | + height: 100%; | |
| 139 | 128 | background-color: #EEEEEE; |
| 140 | 129 | } |
| 141 | 130 | |
| 142 | 131 | .controls-container { |
| @@ -188,14 +177,8 @@ | ||
| 188 | 177 | display: flex; |
| 189 | 178 | gap: 15px; |
| 190 | 179 | } |
| 191 | 180 | |
| 192 | -@media screen and (max-width: 768px) { | |
| 193 | - .wrapper { | |
| 194 | - flex-direction: column; | |
| 195 | - } | |
| 196 | -} | |
| 197 | - | |
| 198 | 181 | .status-indicator { |
| 199 | 182 | display: inline-block; |
| 200 | 183 | width: 12px; |
| 201 | 184 | height: 12px; |
| @@ -315,35 +298,8 @@ | ||
| 315 | 298 | color: #d63638; |
| 316 | 299 | text-decoration: underline; |
| 317 | 300 | } |
| 318 | 301 | |
| 319 | -.info-message, | |
| 320 | -.error-message { | |
| 321 | - position: relative; | |
| 322 | - padding: 1rem; | |
| 323 | - padding-right: 2.5rem; /* Make space for the close button */ | |
| 324 | -} | |
| 325 | - | |
| 326 | -.error-message .dismiss-message { | |
| 327 | - position: absolute; | |
| 328 | - top: 50%; | |
| 329 | - right: 0.5rem; | |
| 330 | - transform: translateY(-50%); | |
| 331 | - background: none; | |
| 332 | - border: none; | |
| 333 | - font-size: 1.5rem; | |
| 334 | - line-height: 1; | |
| 335 | - color: inherit; | |
| 336 | - cursor: pointer; | |
| 337 | - opacity: 0.7; | |
| 338 | - padding: 0.5rem; | |
| 339 | -} | |
| 340 | - | |
| 341 | -.error-message .dismiss-message:hover { | |
| 342 | - opacity: 1; | |
| 343 | -} | |
| 344 | - | |
| 345 | - | |
| 346 | 302 | .success-message { |
| 347 | 303 | color: #00a32a; |
| 348 | 304 | background-color: #edfaef; |
| 349 | 305 | padding: 10px; |
| @@ -382,42 +338,9 @@ | ||
| 382 | 338 | border-color: #2271b1; |
| 383 | 339 | box-shadow: 0 0 0 1px #2271b1; |
| 384 | 340 | } |
| 385 | 341 | |
| 386 | -/* Code to expand portrait video on mobile */ | |
| 387 | 342 | .settings-group select:disabled { |
| 388 | 343 | background-color: #f0f0f1; |
| 389 | 344 | cursor: not-allowed; |
| 390 | 345 | opacity: 0.7; |
| 391 | -} | |
| 392 | - | |
| 393 | -/* Mobile Expand/Collapse Button */ | |
| 394 | -.video-expand-toggle { | |
| 395 | - display: none; | |
| 396 | - position: absolute; | |
| 397 | - top: 10px; | |
| 398 | - right: 10px; | |
| 399 | - z-index: 10; | |
| 400 | - background: rgba(0, 0, 0, 0.5); | |
| 401 | - border: none; | |
| 402 | - border-radius: 4px; | |
| 403 | - color: white; | |
| 404 | - padding: 6px; | |
| 405 | - cursor: pointer; | |
| 406 | - line-height: 0; | |
| 407 | - transition: background 0.3s; | |
| 408 | -} | |
| 409 | - | |
| 410 | -.video-expand-toggle:hover { | |
| 411 | - background: rgba(0, 0, 0, 0.8); | |
| 412 | -} | |
| 413 | - | |
| 414 | -@media screen and (max-width: 600px) { | |
| 415 | - .video-expand-toggle { | |
| 416 | - display: block; | |
| 417 | - } | |
| 418 | - | |
| 419 | - .video-container.expanded { | |
| 420 | - max-height: none !important; | |
| 421 | - height: auto; | |
| 422 | - } | |
| 423 | 346 | } |
