* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { --bg: #0e0e10; --panel: #18181b; --muted: #adadb8; --accent: #9147ff; --text: #efeff1; background-color: var(--bg); color: var(--text); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } /* Theme classes applied to */ body.theme-blue { --bg: #071428; --panel: #0c2940; --accent: #3aa4ff; --text: #e6f6ff; } body.theme-green { --bg: #071609; --panel: #0b2a12; --accent: #2ecc71; --text: #ecfff2; } body.theme-red { --bg: #140707; --panel: #2a0b0b; --accent: #ff4d4d; --text: #fff0f0; } body.theme-orange { --bg: #1a0f03; --panel: #3a1d05; --accent: #f39c12; --text: #fff7ec; } body.theme-white { --bg: #f7f7f7; --panel: #ffffff; --accent: #2b2b2b; --text: #0b0b0b; } /* Use variables for major UI elements to adapt to theme */ .container { background-color: var(--panel); } .chat-panel { background-color: var(--panel); } .btn { background-color: rgba(0,0,0,0.12); color: var(--text); } .btn:hover:not(:disabled) { filter: brightness(1.05); } .tip-link { background-color: var(--accent); color: var(--panel); } .system-message { color: var(--text); } .main-header h1 svg { fill: var(--accent); } .container { background-color: #18181b; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); padding: 20px; width: 95%; max-width: 1200px; display: grid; grid-template-columns: 1fr 300px; gap: 20px; min-height: 80vh; } .main-header { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } h1 { text-align: left; color: #efeff1; font-size: 1.8rem; display: flex; align-items: center; } h1 svg { margin-right: 10px; fill: #9147ff; } .recorder-panel { margin-bottom: 20px; } .main-content { display: flex; flex-direction: column; } .controls { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; order: -1; } .btn { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; flex: 1; min-width: 120px; transition: all 0.2s ease; background-color: #2a2a2d; color: #efeff1; } .btn:hover:not(:disabled) { background-color: #3a3a3d; } #startBtn { order: 1; background-color: #9147ff; color: white; } #startBtn:hover:not(:disabled) { background-color: #772ce8; } #stopBtn { order: 2; background-color: #eb0400; color: white; } #stopBtn:hover:not(:disabled) { background-color: #c00; } #streamVideoBtn { order: 3; background-color: #2a2a2d; color: #efeff1; } #streamVideoBtn:hover:not(:disabled) { background-color: #3a3a3d; } #downloadBtn { order: 4; background-color: #2a2a2d; color: #efeff1; } #downloadBtn:hover:not(:disabled) { background-color: #3a3a3d; } #brbBtn { order: 5; background-color: #3498db; color: white; } #brbBtn:hover:not(:disabled) { background-color: #d35400; } button:disabled { opacity: 0.5; cursor: not-allowed; } .status { display: flex; justify-content: space-between; margin-bottom: 15px; padding: 8px 12px; background-color: #1f1f23; border-radius: 4px; font-size: 0.9rem; } .preview-container { width: 100%; background-color: #0e0e10; border-radius: 4px; overflow: hidden; aspect-ratio: 16/9; margin-bottom: 15px; position: relative; } /* Donation overlay on the stream preview */ .donation-overlay { position: absolute; bottom: 10px; left: 10px; max-width: 60%; z-index: 25; pointer-events: none; } .donation-overlay-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; background: rgba(0, 0, 0, 0.85); border-radius: 6px; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7); } .donation-overlay-image-wrapper { max-width: 56px; max-height: 56px; overflow: hidden; border-radius: 4px; flex-shrink: 0; } .donation-overlay-image-wrapper img { width: 100%; height: 100%; object-fit: contain; display: block; } .donation-overlay-text { color: #ffea7a; font-weight: 600; font-size: 0.9rem; text-shadow: 0 0 4px rgba(0, 0, 0, 0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .donation-overlay-show { animation: donationOverlayIn 0.2s ease-out forwards; } .donation-overlay-hide { animation: donationOverlayOut 0.25s ease-in forwards; } @keyframes donationOverlayIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes donationOverlayOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(8px); } } /* Viewer count overlay on top of the stream preview */ .preview-viewer-count { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background-color: rgba(0, 0, 0, 0.7); border-radius: 12px; font-size: 0.8rem; color: #efeff1; z-index: 5; } .preview-viewer-count svg { width: 14px; height: 14px; fill: #ff4d4d; } .preview-viewer-count span { font-weight: 600; } #timer { font-weight: bold; color: #eb0400; } #recordingStatus { color: #adadb8; } #preview { width: 100%; height: 100%; object-fit: contain; background-color: #0e0e10; } .mute-chat-container { background-color: #2a2a2d; padding: 10px 15px; border-radius: 4px; margin-bottom: 15px; display: flex; align-items: center; } .mute-chat-label { display: flex; align-items: center; cursor: pointer; width: 100%; font-weight: bold; } .mute-chat-label input[type="checkbox"] { margin-right: 10px; width: 18px; height: 18px; } .mute-text { color: #ff0000; font-size: 1.1rem; } .toggle-switch { position: relative; display: inline-block; width: 60px; height: 30px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #3a3a3d; transition: .4s; border-radius: 34px; } .toggle-slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .toggle-slider { background-color: #9147ff; } input:checked + .toggle-slider:before { transform: translateX(30px); } .ai-interval-container, .toggle-container { background-color: #1f1f23; padding: 10px 15px; border-radius: 4px; margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between; } .ai-interval-container label, .toggle-container .toggle-label { margin-right: 10px; color: #adadb8; } /* Chat Settings */ .chat-settings { background-color: #1f1f23; padding: 15px; border-radius: 4px; margin-bottom: 15px; } .chat-settings h3 { margin-bottom: 12px; color: #efeff1; font-size: 1rem; } .checkbox-container { display: flex; flex-wrap: wrap; gap: 10px; } .checkbox-wrapper { display: flex; align-items: center; } .checkbox-wrapper input[type="checkbox"] { display: none; } .checkbox-wrapper label { display: flex; align-items: center; cursor: pointer; padding: 6px 12px; background-color: #2a2a2d; border-radius: 20px; font-size: 0.9rem; transition: all 0.2s ease; color: #adadb8; } .checkbox-wrapper input[type="checkbox"]:checked + label { background-color: #9147ff; color: white; } .checkbox-wrapper label:hover { background-color: #3a3a3d; } .checkbox-wrapper input[type="checkbox"]:checked + label:hover { background-color: #772ce8; } .custom-style-container { margin-top: 15px; } .custom-style-container label { display: block; margin-bottom: 8px; font-size: 0.9rem; color: #adadb8; font-weight: 500; } .custom-style-container textarea { width: 100%; background: #2a2a2d; border: 1px solid #3a3a3d; border-radius: 4px; color: #efeff1; padding: 10px; font-size: 0.9rem; resize: vertical; min-height: 80px; transition: border-color 0.2s ease; } .custom-style-container textarea:focus { border-color: #9147ff; outline: none; box-shadow: 0 0 0 2px rgba(145, 71, 255, 0.2); } .instructions { background-color: #1f1f23; padding: 15px; border-radius: 4px; } h2 { margin-bottom: 12px; color: #efeff1; font-size: 1.2rem; } ol { padding-left: 20px; color: #adadb8; } li { margin-bottom: 8px; font-size: 0.9rem; } .settings-note { margin-top: 10px; font-size: 0.8rem; color: #adadb8; } /* Chat Panel Styles */ .chat-panel { background-color: #1f1f23; border-radius: 4px; display: flex; flex-direction: column; height: calc(100% - 35px); position: relative; } .chat-header { padding: 10px 15px; border-bottom: 1px solid #2a2a2d; display: flex; align-items: center; justify-content: space-between; } .chat-header-content { display: flex; align-items: center; gap: 10px; } .popout-btn { background: none; border: none; color: #9147ff; cursor: pointer; display: flex; align-items: center; font-size: 0.9rem; } .popout-btn svg { width: 16px; height: 16px; margin-left: 5px; fill: currentColor; } .popout-btn:hover { color: #772ce8; } .chat-messages { flex: 1; overflow-y: auto; padding: 10px 15px; display: flex; flex-direction: column; gap: 8px; max-height: 500px; } /* Top-of-chat poll container */ #chatPollContainer { padding: 10px 15px; background-color: #1f1f23; } /* Reuse poll visual styles inside chat poll container */ #chatPollContainer .active-poll { padding: 10px; background-color: #2a2a2d; border-radius: 4px; } #chatPollContainer .active-poll-title { font-weight: bold; margin-bottom: 10px; font-size: 1rem; } #chatPollContainer .poll-options { display: flex; flex-direction: column; gap: 8px; } #chatPollContainer .poll-option { position: relative; background-color: #3a3a3d; border-radius: 4px; padding: 8px 10px; cursor: pointer; overflow: hidden; } #chatPollContainer .poll-option:hover { background-color: #4a4a4d; } #chatPollContainer .poll-option-text { display: flex; justify-content: space-between; position: relative; z-index: 1; } #chatPollContainer .poll-option-bar { position: absolute; top: 0; left: 0; height: 100%; background-color: rgba(145, 71, 255, 0.3); border-radius: 4px; transition: width 0.5s ease; } #chatPollContainer .poll-timer { height: 4px; background-color: #4a4a4d; border-radius: 2px; margin-top: 15px; overflow: hidden; } #chatPollContainer .poll-timer-bar { height: 100%; background-color: #9147ff; width: 100%; transition: width linear 1s; } #chatPollContainer .poll-votes { display: flex; justify-content: space-between; margin-top: 10px; font-size: 0.8rem; color: #adadb8; } #chatPollContainer .poll-status { margin-top: 10px; text-align: center; font-weight: bold; color: #9147ff; } #chatPollContainer .poll-close-btn { margin-top: 10px; padding: 6px 12px; background-color: #eb0400; color: white; border: none; border-radius: 4px; cursor: pointer; width: 100%; font-size: 0.9rem; } #chatPollContainer .poll-close-btn:hover { background-color: #c00; } .popup-chat { background-color: #1f1f23; border-radius: 4px; display: flex; flex-direction: column; height: 100%; width: 100%; } .popup-chat .chat-messages { max-height: none; } .message { display: flex; margin-bottom: 8px; } .username { font-weight: bold; margin-right: 6px; } .chat-input-container { padding: 10px; border-top: 1px solid #2a2a2d; display: flex; } #chatInput { flex: 1; padding: 8px 12px; border-radius: 4px; border: none; background-color: #2a2a2d; color: #efeff1; margin-right: 8px; } #sendBtn { padding: 8px 12px; background-color: #9147ff; color: white; border: none; border-radius: 4px; cursor: pointer; } #sendBtn:hover { background-color: #772ce8; } .message-content { color: #dedee3; word-break: break-word; } .chat-emote { height: 1em; width: auto; vertical-align: middle; margin: 0 2px; } .chat-info { margin-top: 10px; padding: 10px; background-color: #2a2a2d; border-radius: 4px; font-size: 0.8rem; color: #adadb8; line-height: 1.4; } /* Suggestion Box */ .suggestion-box-toggle { margin-top: 10px; width: 100%; padding: 8px 12px; background-color: #9147ff; color: #ffffff; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9rem; font-weight: 500; text-align: center; transition: background-color 0.2s ease, box-shadow 0.1s ease, transform 0.05s ease; } .suggestion-box-toggle:hover { background-color: #772ce8; box-shadow: 0 2px 6px rgba(0,0,0,0.35); } .suggestion-box-toggle:active { transform: translateY(1px); box-shadow: none; } .suggestion-box-container { margin-top: 10px; padding: 15px; background-color: #1f1f23; border-radius: 4px; border-top: 1px solid #2a2a2d; max-height: 380px; overflow-y: auto; display: none; flex-direction: column; gap: 8px; } .suggestion-box-container.open { display: flex; } .suggestion-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; } .suggestion-form-row { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: #adadb8; } .suggestion-form-row input, .suggestion-form-row textarea { background-color: #2a2a2d; border: 1px solid #3a3a3d; border-radius: 4px; padding: 6px 8px; color: #efeff1; font-size: 0.85rem; } .suggestion-form-row textarea { min-height: 46px; resize: vertical; } .suggestion-form-row input:focus, .suggestion-form-row textarea:focus { border-color: #9147ff; outline: none; box-shadow: 0 0 0 2px rgba(145, 71, 255, 0.2); } .suggestion-list-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: #adadb8; margin-bottom: 2px; } .suggestion-list { border-top: 1px solid #2a2a2d; padding-top: 6px; max-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; } .suggestion-item { background-color: #2a2a2d; border-radius: 4px; padding: 6px 8px; font-size: 0.8rem; } .suggestion-item-title { font-weight: 600; color: #efeff1; } .suggestion-item-meta { font-size: 0.7rem; color: #7f7f88; margin-top: 2px; } .suggestion-item-description { margin-top: 4px; color: #cfcfd5; } .suggestion-empty { font-size: 0.8rem; color: #7f7f88; } .suggestion-actions { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; } .suggestion-action { border: none; border-radius: 4px; padding: 3px 8px; font-size: 0.75rem; cursor: pointer; background-color: #2a2a2d; color: #efeff1; transition: background-color 0.15s ease, color 0.15s ease; } .suggestion-action-accept { background-color: #00a94f; color: #ffffff; } .suggestion-action-accept:hover { background-color: #00853e; } .suggestion-action-delete { background-color: #eb0400; color: #ffffff; } .suggestion-action-delete:hover { background-color: #c00; } .suggestion-item--accepted { border: 1px solid #00a94f; box-shadow: 0 0 0 1px rgba(0, 169, 79, 0.25); } .chat-info h3 { color: #9147ff; margin-bottom: 5px; font-size: 0.9rem; } /* Add Viewers button */ .add-viewers-btn { margin-top: 10px; width: 100%; padding: 8px 12px; background-color: #2a2a2d; color: #efeff1; border: 1px solid #3a3a3d; border-radius: 4px; cursor: pointer; font-size: 0.9rem; font-weight: 500; text-align: center; transition: background-color 0.2s ease, box-shadow 0.1s ease, transform 0.05s ease, border-color 0.2s ease; } .add-viewers-btn:hover { background-color: #3a3a3d; border-color: #9147ff; box-shadow: 0 2px 6px rgba(0,0,0,0.35); } .add-viewers-btn:active { transform: translateY(1px); box-shadow: none; } /* Poll Feature Styles */ .poll-container { background-color: #1f1f23; padding: 15px; border-radius: 4px; margin-bottom: 15px; } .poll-container h3 { margin-bottom: 12px; color: #efeff1; font-size: 1rem; display: flex; justify-content: space-between; align-items: center; } .poll-container h3 button { background-color: #9147ff; color: white; border: none; border-radius: 4px; padding: 4px 8px; font-size: 0.8rem; cursor: pointer; } .poll-container h3 button:hover { background-color: #772ce8; } .poll-form { margin-bottom: 15px; } .poll-form input { width: 100%; padding: 8px 12px; margin-bottom: 10px; border: none; border-radius: 4px; background-color: #2a2a2d; color: #efeff1; } .poll-form .option-container { display: flex; margin-bottom: 10px; } .poll-form .option-container input { flex: 1; margin-bottom: 0; margin-right: 10px; } .poll-form .option-container button { background-color: #eb0400; color: white; border: none; border-radius: 4px; width: 30px; cursor: pointer; } .add-option-btn { padding: 8px 12px; background-color: #2a2a2d; color: #efeff1; border: none; border-radius: 4px; cursor: pointer; margin-bottom: 10px; display: flex; align-items: center; width: 100%; justify-content: center; } .add-option-btn:hover { background-color: #3a3a3d; } .create-poll-btn { padding: 8px 12px; background-color: #9147ff; color: white; border: none; border-radius: 4px; cursor: pointer; width: 100%; } .create-poll-btn:hover { background-color: #772ce8; } .active-poll { padding: 10px; background-color: #2a2a2d; border-radius: 4px; } .active-poll-title { font-weight: bold; margin-bottom: 10px; font-size: 1rem; } .poll-options { display: flex; flex-direction: column; gap: 8px; } .poll-option { position: relative; background-color: #3a3a3d; border-radius: 4px; padding: 8px 10px; cursor: pointer; overflow: hidden; } .poll-option:hover { background-color: #4a4a4d; } .poll-option-text { display: flex; justify-content: space-between; position: relative; z-index: 1; } .poll-option-bar { position: absolute; top: 0; left: 0; height: 100%; background-color: rgba(145, 71, 255, 0.3); border-radius: 4px; transition: width 0.5s ease; } .poll-timer { height: 4px; background-color: #4a4a4d; border-radius: 2px; margin-top: 15px; overflow: hidden; } .poll-timer-bar { height: 100%; background-color: #9147ff; width: 100%; transition: width linear 1s; } .poll-votes { display: flex; justify-content: space-between; margin-top: 10px; font-size: 0.8rem; color: #adadb8; } .poll-close-btn { margin-top: 10px; padding: 6px 12px; background-color: #eb0400; color: white; border: none; border-radius: 4px; cursor: pointer; width: 100%; font-size: 0.9rem; } .poll-close-btn:hover { background-color: #c00; } .poll-status { margin-top: 10px; text-align: center; font-weight: bold; color: #9147ff; } /* Chat Memory Styles */ .memory-container { background-color: #1f1f23; padding: 15px; border-radius: 4px; margin-bottom: 15px; } .memory-container h3 { margin-bottom: 12px; color: #efeff1; font-size: 1rem; } .memory-content { display: flex; flex-direction: column; gap: 10px; } .memory-group { display: flex; flex-direction: column; gap: 5px; } .memory-label { color: #9147ff; font-weight: bold; font-size: 0.9rem; } .memory-items { display: flex; flex-wrap: wrap; gap: 6px; } .memory-item { background-color: #2a2a2d; color: #efeff1; padding: 3px 8px; border-radius: 12px; font-size: 0.85rem; cursor: pointer; transition: background-color 0.2s ease; } .memory-item:hover { background-color: #eb0400; } .add-memory-input { display: flex; margin-top: 5px; } .add-memory-input input { flex: 1; background-color: #2a2a2d; border: 1px solid #3a3a3d; color: #efeff1; padding: 5px 8px; border-radius: 4px 0 0 4px; font-size: 0.85rem; } .add-memory-input button { background-color: #9147ff; color: white; border: none; border-radius: 0 4px 4px 0; width: 30px; cursor: pointer; font-weight: bold; } .add-memory-input button:hover { background-color: #772ce8; } #activePollContainer { margin-bottom: 15px; position: sticky; top: 0; z-index: 10; background-color: #1f1f23; } #aiIntervalSelect { padding: 6px 10px; background-color: #2a2a2d; color: #efeff1; border: none; border-radius: 4px; flex: 0.7; cursor: pointer; } #aiIntervalSelect:hover { background-color: #3a3a3d; } .brb-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 20; font-size: 1.5rem; color: white; text-align: center; } .brb-overlay h3 { font-size: 2rem; margin-bottom: 10px; color: #e67e22; } .brb-timer { margin-top: 15px; font-size: 1.2rem; color: #adadb8; } /* Banned Topics */ .banned-topics-container { background-color: #1f1f23; padding: 15px; border-radius: 4px; margin-bottom: 15px; } .banned-topics-container h3 { margin-bottom: 12px; color: #efeff1; font-size: 1rem; } .banned-topics-content { display: flex; flex-direction: column; gap: 10px; } .banned-topic-item { background-color: #eb0400; color: #efeff1; padding: 3px 8px; border-radius: 12px; font-size: 0.85rem; cursor: pointer; transition: background-color 0.2s ease; } .banned-topic-item:hover { background-color: #c00; } .banned-users-container { background-color: #1f1f23; padding: 15px; border-radius: 4px; margin-bottom: 15px; } .banned-users-container h3 { margin-bottom: 12px; color: #efeff1; font-size: 1rem; } .banned-users-content { display: flex; flex-direction: column; gap: 10px; } .banned-user-item { background-color: #eb0400; color: #efeff1; padding: 3px 8px; border-radius: 12px; font-size: 0.85rem; cursor: pointer; transition: background-color 0.2s ease; } .banned-user-item:hover { background-color: #c00; } /* Moderator Users */ .moderator-users-container { background-color: #1f1f23; padding: 15px; border-radius: 4px; margin-bottom: 15px; } .moderator-users-container h3 { margin-bottom: 12px; color: #efeff1; font-size: 1rem; } .moderator-users-content { display: flex; flex-direction: column; gap: 10px; } .moderator-user-item { background-color: #9147ff; color: #efeff1; padding: 3px 8px; border-radius: 12px; font-size: 0.85rem; cursor: pointer; transition: background-color 0.2s ease; } .moderator-user-item:hover { background-color: #772ce8; } /* Information for AI Viewers */ .information-container { background-color: #1f1f23; padding: 15px; border-radius: 4px; margin-bottom: 15px; } /* Settings Preset Export/Import */ .settings-preset-container { background-color: #1f1f23; padding: 15px; border-radius: 4px; margin-bottom: 0; margin-top: 10px; } .settings-preset-container h3 { margin-bottom: 10px; color: #efeff1; font-size: 1rem; } .settings-preset-content { display: flex; flex-direction: column; gap: 8px; } #settingsIdOutput, #settingsIdInput { width: 100%; min-height: 50px; padding: 8px 10px; background-color: #2a2a2d; border: 1px solid #3a3a3d; border-radius: 4px; color: #efeff1; font-size: 0.85rem; resize: vertical; } #settingsIdOutput { background-color: #222225; } .settings-preset-buttons { display: flex; gap: 8px; } .information-container h3 { margin-bottom: 12px; color: #efeff1; font-size: 1rem; } .information-content { display: flex; flex-direction: column; gap: 10px; } #aiInfoText { width: 100%; padding: 8px 12px; background-color: #2a2a2d; border: 1px solid #3a3a3d; border-radius: 4px; color: #efeff1; font-size: 0.9rem; min-height: 80px; resize: vertical; transition: border-color 0.2s ease; } #aiInfoText:focus { border-color: #9147ff; outline: none; box-shadow: 0 0 0 2px rgba(145, 71, 255, 0.2); } /* Emojis tab */ .emoji-container { background-color: #1f1f23; padding: 15px; border-radius: 4px; margin-bottom: 15px; } .emoji-container h3 { margin-bottom: 12px; color: #efeff1; font-size: 1rem; } .emoji-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .emoji-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background-color: #2a2a2d; border-radius: 4px; font-size: 0.85rem; } .emoji-item img { width: 24px; height: 24px; object-fit: contain; border-radius: 3px; } .emoji-item-main { display: flex; flex-direction: column; gap: 2px; flex: 1; } .emoji-item-name { font-weight: 600; color: #efeff1; } .emoji-item-description { font-size: 0.8rem; color: #adadb8; } .emoji-item-delete { background: none; border: none; color: #eb0400; font-size: 0.8rem; cursor: pointer; padding: 2px 4px; border-radius: 3px; flex-shrink: 0; } .emoji-item-delete:hover { background-color: rgba(235, 4, 0, 0.15); } .emoji-add { padding-top: 8px; border-top: 1px solid #2a2a2d; display: flex; flex-direction: column; gap: 8px; } .emoji-add h4 { font-size: 0.9rem; color: #efeff1; } .emoji-add-row { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: #adadb8; } .emoji-add-row label { font-weight: 500; } .emoji-add-row input[type="file"], .emoji-add-row input[type="text"], .emoji-add-row textarea { width: 100%; padding: 8px 10px; background-color: #2a2a2d; border: 1px solid #3a3a3d; border-radius: 4px; color: #efeff1; font-size: 0.9rem; resize: vertical; } .emoji-add-row input[type="file"] { padding: 6px 0; border: none; } .emoji-add-row input[type="text"]:focus, .emoji-add-row textarea:focus { border-color: #9147ff; outline: none; box-shadow: 0 0 0 2px rgba(145, 71, 255, 0.2); } /* Moderator Badge */ .mod-badge { background-color: transparent; color: #9147ff; padding: 0; border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; margin-right: 4px; vertical-align: middle; } .mod-badge svg { width: 14px; height: 14px; fill: currentColor; } /* Streamer Badge */ .streamer-badge { background-color: transparent; color: #ffd700; padding: 0; border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; margin-right: 4px; vertical-align: middle; } .streamer-badge svg { width: 14px; height: 14px; fill: currentColor; } /* Poll Form Input Styles */ #pollFormContainer input[type="text"], #pollFormContainer input[type="number"] { background-color: #2a2a2d; border: 1px solid #3a3a3d; border-radius: 4px; padding: 8px 12px; margin-bottom: 10px; width: 100%; color: #efeff1; font-size: 0.95rem; transition: border-color 0.2s ease; } #pollFormContainer input[type="text"]:focus, #pollFormContainer input[type="number"]:focus { border-color: #9147ff; outline: none; box-shadow: 0 0 0 2px rgba(145, 71, 255, 0.2); } #pollFormContainer .option-container { margin-bottom: 8px; } #pollFormContainer .option-container button { background-color: #3a3a3d; transition: background-color 0.2s ease; } #pollFormContainer .option-container button:hover { background-color: #eb0400; } #pollFormContainer .create-poll-btn { margin-top: 5px; font-weight: 500; } .create-poll-btn { padding: 8px 12px; background-color: #9147ff; color: white; border: none; border-radius: 4px; cursor: pointer; width: 100%; } .create-poll-btn:hover { background-color: #772ce8; } /* Stream Info Container */ .stream-info-container { background-color: #1f1f23; padding: 15px; border-radius: 4px; margin-bottom: 15px; } /* Collapsible sections */ .collapsible-section h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .section-toggle { background: none; border: none; color: #adadb8; cursor: pointer; font-size: 0.9rem; padding: 2px 6px; border-radius: 3px; flex-shrink: 0; } .section-toggle:hover { background-color: #2a2a2d; color: #efeff1; } .collapsible-section.collapsed .collapsible-body { display: none; } .stream-info-container h3 { margin-bottom: 12px; color: #efeff1; font-size: 1rem; } .stream-info-content { display: flex; flex-direction: column; gap: 10px; } .info-row { width: 100%; } #streamTitle { width: 100%; padding: 8px 12px; background-color: #2a2a2d; border: 1px solid #3a3a3d; border-radius: 4px; color: #efeff1; font-size: 1rem; } #streamDescription { width: 100%; padding: 8px 12px; background-color: #2a2a2d; border: 1px solid #3a3a3d; border-radius: 4px; color: #efeff1; font-size: 0.9rem; min-height: 80px; resize: vertical; } .update-info-btn { padding: 8px 12px; background-color: #9147ff; color: white; border: none; border-radius: 4px; cursor: pointer; margin-top: 5px; font-weight: 500; } .update-info-btn:hover { background-color: #772ce8; } /* Donation Styles */ .donation-message { background-color: rgba(145, 71, 255, 0.1); border-left: 3px solid #9147ff; padding: 8px 10px; margin-bottom: 12px; border-radius: 0 4px 4px 0; } /* Disco jump overlay animation */ .disco-jump-overlay { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); z-index: 999; pointer-events: none; display: flex; align-items: center; justify-content: center; will-change: transform, opacity; animation: discoEntrance 0.35s ease-out forwards; } .disco-jump-overlay img { width: 220px; max-width: 60vw; height: auto; display: block; animation: discoJump 1s ease-in-out infinite; transform-origin: 50% 80%; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.5)); } /* subtle horizontal hop + scale to feel like 'jump' */ @keyframes discoJump { 0% { transform: translateY(0) scale(1); } 25% { transform: translateY(-18px) scale(1.06); } 50% { transform: translateY(0) scale(1); } 75% { transform: translateY(-10px) scale(1.03); } 100% { transform: translateY(0) scale(1); } } @keyframes discoEntrance { from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.96); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } .disco-jump-hide { animation: discoExit 0.4s ease-in forwards; } @keyframes discoExit { from { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } to { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.98); } } .bits-donation { border-left: 3px solid #9147ff; background-color: rgba(145, 71, 255, 0.1); } .dollars-donation { border-left: 3px solid #00b5ad; background-color: rgba(0, 181, 173, 0.1); } .bits-donation .donation-amount { color: #9147ff; } .dollars-donation .donation-amount { color: #00b5ad; } .donation-amount { color: #9147ff; font-weight: bold; margin-right: 5px; } .donation-username { font-weight: bold; } .donation-text { color: #efeff1; margin-top: 4px; } /* Stream Settings Container */ .stream-settings-container { background-color: #1f1f23; padding: 15px; border-radius: 4px; margin-bottom: 15px; } .stream-settings-container h3 { margin-bottom: 12px; color: #efeff1; font-size: 1rem; } /* Donation overlay settings UI */ .donation-overlay-row { margin-top: 4px; } .donation-overlay-settings { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; font-size: 0.8rem; color: #adadb8; } .donation-overlay-field { display: flex; flex-direction: column; gap: 4px; } .donation-overlay-field label { font-weight: 500; } .donation-overlay-field input[type="file"] { background-color: transparent; border: none; color: #efeff1; font-size: 0.8rem; } .donation-overlay-hint { font-size: 0.75rem; color: #7f7f88; } .setting-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #2a2a2d; } .setting-row:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .setting-label { color: #adadb8; } /* Custom color variations for usernames */ .color-1 { color: #ff4500; } .color-2 { color: #0e9dd9; } .color-3 { color: #00a94f; } .color-4 { color: #9147ff; } .color-5 { color: #f36895; } .color-6 { color: #eb0400; } /* System Messages and Ban Messages */ .system-message { text-align: center; padding: 5px 10px; margin-bottom: 8px; font-size: 0.9rem; color: #efeff1; background-color: #1f1f23; border-radius: 4px; } .ban-message { color: #eb0400; background-color: rgba(235, 4, 0, 0.1); border-left: 3px solid #eb0400; padding-left: 7px; } .clickable-username { cursor: pointer; } .clickable-username:hover { text-decoration: underline; } .pinned-message-container { background-color: rgba(145, 71, 255, 0.1); border-left: 3px solid #9147ff; margin: 0 0 15px; border-radius: 0 4px 4px 0; } .pinned-message-header { display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; font-size: 0.8rem; color: #9147ff; font-weight: bold; } .pinned-message-header button { background: none; border: none; color: #efeff1; font-size: 0.8rem; cursor: pointer; padding: 2px 5px; border-radius: 2px; } .pinned-message-header button:hover { background-color: rgba(255, 255, 255, 0.1); } .pinned-message { padding: 5px 10px 8px; font-size: 0.9rem; } .clickable-message { cursor: pointer; } .clickable-message:hover { text-decoration: underline; } .streamer-name-container { display: flex; gap: 10px; margin-bottom: 15px; order: -2; } .streamer-name-container input { flex: 1; padding: 8px 12px; background-color: #2a2a2d; border: 1px solid #3a3a3d; border-radius: 4px; color: #efeff1; font-size: 1rem; } .streamer-name-container .btn { background-color: #9147ff; color: white; } .streamer-name-container .btn:hover { background-color: #772ce8; } .header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } /* Square banner slot under the logo for 1:1 image block ads */ #adUnderLogo { width: 120px; height: 120px; min-width: 80px; min-height: 80px; max-width: 140px; max-height: 140px; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.03); margin-top: 8px; } /* New visible top banner area placed beneath the preview for paid sponsored spots. Keep it unmistakably 1:1 for the Image Block ad format and give a subtle border/label feel. */ #adTopVisibleWrapper { width: 100%; display: flex; justify-content: center; margin-top: 12px; } #adTopVisibleSquare { width: 120px; height: 120px; min-width: 80px; min-height: 80px; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 6px 18px rgba(0,0,0,0.45); } /* Add a small 'sponsored' label when the ad is present to improve clarity */ #adTopVisibleSquare[data-has-ad="true"]::after { content: "Sponsored"; position: absolute; bottom: 6px; right: 8px; font-size: 11px; color: rgba(255,255,255,0.85); background: rgba(0,0,0,0.25); padding: 2px 6px; border-radius: 6px; pointer-events: none; } /* Ensure any dynamic ad placeholders used for Image Block banners are strictly 1:1 */ #adContainerTopSquare, #adContainerSidebarSquare { aspect-ratio: 1 / 1; width: 100%; height: auto; max-width: 120px; max-height: 120px; min-width: 40px; min-height: 40px; border-radius: 8px; overflow: hidden; display:flex; align-items:center; justify-content:center; background: transparent; margin: 0; } /* Make sure the top container centers the internal square placeholder */ #adContainerTop { display:flex; align-items:center; justify-content:center; } /* Sidebar host (if dynamically inserted) should not itself be used for banner rendering; the 1:1 square child with id #adContainerSidebarSquare is the actual target. */ #adContainerSidebar { display:flex; align-items:center; justify-content:center; padding: 0; margin-top: 8px; } /* Money counter in header */ .money-counter { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.25)); padding: 6px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.04); font-weight: 700; color: #ffd700; font-size: 0.9rem; min-width: 120px; justify-content: center; } #moneyCounter { color: #00b5ad; margin-left: 6px; } .original-link { font-size: 0.7rem; color: #adadb8; text-align: right; } .original-link a { color: #9147ff; text-decoration: underline; } .rip-text { font-size: 0.7rem; color: #eb0400; font-style: italic; text-align: right; opacity: 0.8; } .tip-link { align-self: flex-end; background-color: #ffd700; color: #18181b; font-weight: 600; cursor: pointer; font-size: 0.9rem; border: none; border-radius: 4px; padding: 6px 10px; transition: background-color 0.2s, transform 0.1s, box-shadow 0.1s; text-align: center; max-width: 260px; line-height: 1.2; white-space: normal; } .tip-link:hover { background-color: #ffea7a; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.3); } .tip-link:active { transform: translateY(0); box-shadow: none; } @media (max-width: 800px) { .container { grid-template-columns: 1fr; padding: 15px; width: 100%; min-height: auto; } .controls { flex-direction: row; } .btn { width: auto; padding: 10px; font-size: 0.9rem; } .chat-panel { max-height: 400px; } h1 { font-size: 1.5rem; } .chat-settings .checkbox-container { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; } .checkbox-wrapper { flex: 0 0 48%; margin-bottom: 6px; } .checkbox-wrapper label { padding: 8px 10px; font-size: 0.8rem; width: 100%; justify-content: center; } .preview-container { aspect-ratio: 4/3; } } @media (max-width: 480px) { .controls { flex-direction: column; } .btn { width: 100%; margin-bottom: 5px; } h1 { font-size: 1.3rem; } .chat-settings .checkbox-container { flex-direction: row; flex-wrap: wrap; } .checkbox-wrapper { flex: 0 0 100%; margin-bottom: 5px; } .preview-container { aspect-ratio: 1/1; } }