html { margin-top: 0 !important; } body { background: #F8F8F8; } body.wpstream-broadcaster-page { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; background-color: #F8F8F8; margin: 0; color: #333; padding: 0 15px; } body.wpstream-broadcaster-page #wpadminbar { display: none; } .broadcaster-header { background-color: #f8f9fa!important; box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05); padding: 10px 0; top: 0; left: 0; right: 0; z-index: 100; } .header-container { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; padding: 0 20px; } .header-logo { padding: .3125rem 0; } .header-logo img { width: auto; } .header-nav { display: flex; align-items: center; } .nav-item { font-size: 16px; font-weight: 500; color: #333; } #messageContainer { display: flex; margin-top: 1rem; justify-content: center; } .broadcaster-container { margin-top: 70px; } .broadcaster-container { max-width: 1500px; margin: 0 auto; padding: 20px; } .broadcaster-container .video-live-indicator { position: absolute; top: 0.5em; left: 1.5em; opacity: 90%; } .broadcaster-container .video-live-indicator .badge { display: inline-block; padding: .25em .4em; font-size: 75%; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25rem; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; } .broadcaster-container .video-live-indicator .badge.badge-pill { padding-right: .6em; padding-left: .6em; border-radius: 10rem; } .broadcaster-container .video-live-indicator .badge.badge-danger { color: #fff; background-color: #d63638; } .broadcaster-container .video-live-indicator .badge.badge-warning { color: #212529; background-color: #ffc107; } .video-container { flex: 2; position: relative; width: 100%; height: auto; background-color: #EEEEEE; margin-bottom: 20px; border-radius: 4px; overflow: hidden; } #localVideo { width: 100%; height: 100%; background-color: #EEEEEE; } .controls-container { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 20px; } .button { background-color: #2271b1; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 4px; transition: background-color 0.3s; } .button:hover { background-color: #135e96; } .button.start-broadcast { background-color: #066AA6; width: 100%; } .button.stop-broadcast { background-color: #2c3338; width: 100%; } .status-container { display: none; padding: 15px; background-color: #fff; border-radius: 4px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .wrapper { display: flex; gap: 15px; } .status-indicator { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; background-color: #ccc; } .status-indicator.connected { background-color: #00a32a; } .status-indicator.disconnected { background-color: #d63638; } .status-indicator.connecting { background-color: #f0c33c; } .settings-panel { flex: 1; background-color: #fff; border-radius: 4px; padding: 15px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .settings-row { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 15px; } .settings-row .settings-group .input-group { display: flex; flex-direction: row; align-items: center; } .settings-row .settings-group .input-group #audioBitrate { border-top-right-radius: 0; border-bottom-right-radius: 0; } .settings-row .settings-group .input-group input { flex: 1; font-size: 1rem; } .settings-row.media-row { display: flex; flex-direction: column; gap: 10px; } .settings-row .settings-group .input-group .input-suffix { background-color: #e9ecef; padding: .375rem .75rem; border: 1px solid #ced4da; border-radius: .25rem; font-size: 1rem; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; } .settings-group { flex: 1; } .settings-group label { display: block; margin-bottom: 5px; font-weight: 500; font-size: 1rem; } .settings-group .controls-group { display: flex; gap: 10px; } .settings-group .controls-group button { background: #FFFFFF; border: 1px solid #B2B3B5; box-sizing: border-box; border-radius: 6px; } .hidden { display: none; } .info-message { color: #0056b3; background-color: #e9f5ff; padding: 10px; border-left: 4px solid #0056b3; margin-bottom: 15px; } .error-message { color: #d63638; background-color: #fcf0f1; padding: 10px; border-left: 4px solid #d63638; margin-bottom: 15px; max-width: 83.33%; flex: 0 0 83.333333%; } .error-message a { color: #d63638; text-decoration: underline; } .success-message { color: #00a32a; background-color: #edfaef; padding: 10px; border-left: 4px solid #00a32a; margin-bottom: 15px; } .stats-container { display: flex; flex-direction: column; gap: 10px; font-size: 14px; } .stat-item { background-color: #f0f0f1; padding: 5px 10px; border-radius: 4px; } .settings-group select { color: #495057; width: 100%; padding: 8px 12px; border-radius: 4px; border: 1px solid #ccc; background-color: #fff; font-size: 1rem; appearance: menulist; background-image: none; -webkit-appearance: menulist; } .settings-group select:focus { outline: none; border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; } .settings-group select:disabled { background-color: #f0f0f1; cursor: not-allowed; opacity: 0.7; }