diff options
Diffstat (limited to 'index.css')
| -rw-r--r-- | index.css | 777 |
1 files changed, 777 insertions, 0 deletions
@@ -374,6 +374,757 @@ body { transition: none; } +/* --------------------------------------------------------------------------- + Web voice + --------------------------------------------------------------------------- */ + +body.voice-live { + padding-bottom: 6.5rem; +} + +/* Top login bar (left = status, right = [ login ]) */ + +.voice-topbar { + border-bottom: 2px solid var(--cl-gray-2); + background-color: var(--cl-gray-1); +} + +.voice-topbar-bar { + padding: 0.65rem 1.25rem; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; +} + +.voice-topbar-identity { + color: var(--cl-gray-7); + font-size: 0.85rem; + font-weight: bold; + text-transform: uppercase; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.voice-topbar-identity[data-ready="1"] { + color: var(--cl-green-6); +} + +.voice-login-btn { + padding: 4px 10px; + color: var(--cl-orange-6); + font-family: inherit; + font-size: 0.85rem; + font-weight: bold; + text-transform: uppercase; + border: 2px solid var(--cl-orange-6); + background-color: var(--cl-gray-0); + cursor: pointer; + flex-shrink: 0; +} + +.voice-login-btn::before { + content: "[ "; +} + +.voice-login-btn::after { + content: " ]"; +} + +.voice-login-btn:hover { + color: var(--cl-black); + background-color: var(--cl-magenta-7); + border-color: transparent; +} + +.voice-topbar-hint { + margin: 0; + padding: 0.5rem 1.25rem 0.75rem; + color: var(--cl-gray-7); + font-size: 0.85rem; + border-top: 2px solid var(--cl-gray-2); + background-color: var(--cl-gray-0); +} + +.voice-topbar-hint[data-kind="error"] { + color: var(--cl-red-6); +} + +/* Join buttons on every channel card */ + +.channel-actions { + display: flex; + align-items: center; + gap: 0.75rem; + flex-shrink: 0; +} + +.channel-join, +.channel-here { + padding: 4px 10px; + font-family: inherit; + font-size: 0.85rem; + font-weight: bold; + text-transform: uppercase; + border: 2px solid; + background-color: transparent; +} + +.channel-join { + color: var(--cl-orange-6); + border-color: var(--cl-orange-6); + background-color: var(--cl-gray-0); + cursor: pointer; +} + +.channel-join::before, +.channel-here::before { + content: "[ "; +} + +.channel-join::after, +.channel-here::after { + content: " ]"; +} + +.channel-join:hover, +.channel-join:focus-visible { + color: var(--cl-black); + background-color: var(--cl-magenta-7); + border-color: transparent; + outline: none; +} + +.voice-connecting .channel-join { + opacity: 0.5; + pointer-events: none; +} + +.channel-here { + color: var(--cl-green-6); + border-color: var(--cl-green-6); + background-color: var(--cl-gray-0); +} + +.channel-lock { + margin-left: 0.75rem; + padding: 0 4px; + color: var(--cl-yellow); + font-size: 0.75rem; + font-weight: bold; + text-transform: uppercase; + border: 2px solid var(--cl-yellow); +} + +.channel.is-current { + border-color: var(--cl-green-6); +} + +.channel.is-current .channel-header { + border-bottom-color: var(--cl-green-6); +} + +/* Live clients, per-user volume controls & direct message buttons */ + +.voice-live #refresh-bar { + display: none; +} + +.client.is-self .client-name { + color: var(--cl-white); + font-weight: bold; +} + +.client-you { + color: var(--cl-gray-6); + font-size: 0.85rem; + margin-left: 0.5rem; +} + +.client.is-talking::before { + content: ">"; + color: var(--cl-green-6); +} + +.client.is-talking .client-name { + color: var(--cl-green-6); +} + +.client-muted { + color: var(--cl-gray-6); + font-size: 0.85rem; + margin-left: 0.5rem; +} + +.client-controls { + margin-left: auto; + display: flex; + align-items: center; + gap: 0.65rem; + flex-shrink: 0; +} + +.client-volume { + display: inline-flex; + align-items: center; + gap: 0.4rem; + color: var(--cl-gray-6); + font-size: 0.75rem; + font-weight: bold; +} + +.client-volume-slider { + width: 80px; + margin: 0; + accent-color: var(--cl-orange-6); + cursor: pointer; +} + +.client-volume-value { + min-width: 3.1rem; + text-align: right; + color: var(--cl-gray-7); + font-variant-numeric: tabular-nums; +} + +.client-msg-btn { + padding: 2px 6px; + color: var(--cl-gray-6); + font-family: inherit; + font-size: 0.75rem; + font-weight: bold; + text-transform: uppercase; + border: 2px solid var(--cl-gray-3); + background-color: var(--cl-gray-0); + cursor: pointer; +} + +.client-msg-btn::before { + content: "[ "; +} + +.client-msg-btn::after { + content: " ]"; +} + +.client-msg-btn:hover { + color: var(--cl-black); + background-color: var(--cl-magenta-7); + border-color: transparent; +} + +.client-msg-btn.is-active { + color: var(--cl-cyan-6); + border-color: var(--cl-cyan-6); +} + +.client-msg-btn.has-unread { + color: var(--cl-orange-6); + border-color: var(--cl-orange-6); +} + +/* Inline channel & private message chat underneath the joined channel */ + +.channel-chat { + border-top: 2px solid var(--cl-gray-2); + background-color: var(--cl-gray-0); +} + +.channel-chat-header { + padding: 0.45rem 0.75rem; + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.5rem; + border-bottom: 2px solid var(--cl-gray-2); + background-color: var(--cl-gray-1); +} + +.channel-chat-tabs { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 0.45rem; +} + +.channel-chat-tab { + padding: 2px 8px; + color: var(--cl-gray-6); + font-family: inherit; + font-size: 0.78rem; + font-weight: bold; + text-transform: uppercase; + border: 2px solid var(--cl-gray-3); + background-color: var(--cl-gray-0); + cursor: pointer; +} + +.channel-chat-tab::before { + content: "[ "; +} + +.channel-chat-tab::after { + content: " ]"; +} + +.channel-chat-tab:hover { + color: var(--cl-black); + background-color: var(--cl-magenta-7); + border-color: transparent; +} + +.channel-chat-tab.is-active { + color: var(--cl-cyan-6); + border-color: var(--cl-cyan-6); +} + +.channel-chat-tab.is-dm.is-active { + color: var(--cl-magenta-7); + border-color: var(--cl-magenta-7); +} + +.channel-chat-tab.has-unread { + color: var(--cl-orange-6); + border-color: var(--cl-orange-6); +} + +.channel-chat-messages { + max-height: 190px; + overflow-y: auto; + padding: 0.65rem 1rem; + display: flex; + flex-direction: column; + gap: 0.35rem; +} + +.channel-chat-empty { + color: var(--cl-gray-5); + font-size: 0.85rem; +} + +.channel-chat-msg { + display: flex; + align-items: baseline; + flex-wrap: wrap; + gap: 0.45rem; + font-size: 0.88rem; + line-height: 1.4; + word-break: break-word; +} + +.channel-chat-time { + color: var(--cl-gray-5); + font-size: 0.75rem; + flex-shrink: 0; +} + +.channel-chat-author { + color: var(--cl-orange-6); + font-weight: bold; + flex-shrink: 0; +} + +.channel-chat-msg.is-self .channel-chat-author { + color: var(--cl-green-6); +} + +.channel-chat-msg.is-private .channel-chat-author { + color: var(--cl-magenta-7); +} + +.channel-chat-msg.is-server .channel-chat-author { + color: var(--cl-cyan-6); +} + +.channel-chat-text { + color: var(--cl-white); +} + +.channel-chat-form { + padding: 0.55rem 0.75rem; + display: flex; + align-items: stretch; + gap: 0.5rem; + border-top: 2px solid var(--cl-gray-2); + background-color: var(--cl-gray-1); +} + +.channel-chat-input { + flex: 1 1 auto; + min-width: 0; + padding: 0.45rem 0.65rem; + color: var(--cl-white); + font-family: inherit; + font-size: 0.9rem; + border: 2px solid var(--cl-gray-3); + background-color: var(--cl-gray-0); + outline: none; +} + +.channel-chat-input:focus { + border-color: var(--cl-orange-6); +} + +.channel-chat-send { + padding: 0.45rem 0.85rem; + color: var(--cl-orange-6); + font-family: inherit; + font-size: 0.85rem; + font-weight: bold; + text-transform: uppercase; + border: 2px solid var(--cl-orange-6); + background-color: var(--cl-gray-0); + cursor: pointer; +} + +.channel-chat-send::before { + content: "[ "; +} + +.channel-chat-send::after { + content: " ]"; +} + +.channel-chat-send:hover { + color: var(--cl-black); + background-color: var(--cl-magenta-7); + border-color: transparent; +} + +/* Fixed voice controls bar at the bottom of the screen while connected */ + +.voice-bar { + position: fixed; + left: 0; + right: 0; + bottom: 0; + z-index: 50; + border-top: 2px solid var(--cl-green-6); + background-color: var(--cl-gray-0); + box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.65); +} + +.voice-bar-main { + max-width: 760px; + margin: 0 auto; + padding: 0.75rem 1.5rem; + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: 1rem; +} + +.voice-bar-info { + display: flex; + align-items: center; + gap: 1rem; + min-width: 0; +} + +.voice-live-badge { + display: inline-flex; + align-items: center; + padding: 4px 10px; + color: var(--cl-green-6); + font-size: 0.8rem; + font-weight: bold; + text-transform: uppercase; + border: 2px solid var(--cl-green-6); +} + +.voice-live-badge .pulse-dot { + width: 8px; + height: 8px; + margin-right: 0.6rem; +} + +.voice-where { + display: flex; + align-items: baseline; + gap: 0.6rem; + min-width: 0; + font-weight: bold; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.voice-where #voice-channel::before { + content: "> "; + color: var(--cl-orange-6); +} + +.voice-as { + color: var(--cl-gray-6); + font-weight: normal; +} + +.voice-buttons { + display: flex; + flex-wrap: wrap; + gap: 0.6rem; +} + +.btn-voice { + padding: 6px 12px; + color: var(--cl-gray-8); + font-family: inherit; + font-size: 0.85rem; + font-weight: bold; + text-transform: uppercase; + border: 2px solid var(--cl-gray-4); + background-color: transparent; + cursor: pointer; + user-select: none; + touch-action: none; +} + +.btn-voice::before { + content: "[ "; +} + +.btn-voice::after { + content: " ]"; +} + +.btn-voice:hover { + color: var(--cl-black); + background-color: var(--cl-magenta-7); + border-color: transparent; +} + +.btn-voice[aria-pressed="true"] { + color: var(--cl-red-6); + border-color: var(--cl-red-6); +} + +.btn-voice[aria-expanded="true"] { + color: var(--cl-orange-6); + border-color: var(--cl-orange-6); +} + +.btn-voice.is-active { + color: var(--cl-black); + background-color: var(--cl-green-6); + border-color: var(--cl-green-6); +} + +.btn-voice-talk { + color: var(--cl-green-6); + border-color: var(--cl-green-6); +} + +.btn-voice-danger { + color: var(--cl-red-6); + border-color: var(--cl-red-6); +} + +.voice-meter { + position: relative; + height: 4px; + background-color: var(--cl-gray-2); +} + +.voice-meter-fill { + width: 0%; + height: 100%; + background-color: var(--cl-gray-5); +} + +.voice-meter-fill.is-open { + background-color: var(--cl-green-6); +} + +.voice-meter-threshold { + position: absolute; + top: -3px; + bottom: -3px; + width: 2px; + background-color: var(--cl-orange-6); +} + +.voice-settings { + max-width: 760px; + margin: 0 auto; + padding: 1rem 1.5rem; + display: grid; + grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); + align-items: end; + gap: 1.5rem; + border-bottom: 2px solid var(--cl-gray-2); + background-color: var(--cl-gray-1); +} + +.voice-setting { + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.voice-setting input[type="range"] { + width: 100%; + margin: 0.35rem 0; + accent-color: var(--cl-orange-6); +} + +.voice-bar-message { + max-width: 760px; + margin: 0 auto; + padding: 0.5rem 1.5rem; + color: var(--cl-gray-7); + font-size: 0.85rem; + border-bottom: 2px solid var(--cl-gray-2); +} + +.voice-bar-message[data-kind="error"] { + color: var(--cl-red-6); +} + +/* Notice shown above the channel list after a call ends */ + +.voice-notice { + margin: 0 0 1.5rem; + padding: 0.75rem 1rem; + color: var(--cl-gray-8); + font-size: 0.9rem; + border: 2px solid var(--cl-gray-4); + background-color: var(--cl-gray-1); +} + +.voice-notice::before { + content: "! "; + color: var(--cl-orange-6); + font-weight: bold; +} + +.voice-notice[data-kind="error"] { + color: var(--cl-red-6); + border-color: var(--cl-red-6); +} + +/* Login modal ([ login ] button dialog) */ + +.voice-dialog { + width: min(460px, calc(100vw - 2rem)); + padding: 0; + color: var(--cl-white); + font-family: inherit; + border: 2px solid var(--cl-orange-6); + background-color: var(--cl-gray-0); +} + +.voice-dialog::backdrop { + background-color: hsla(140, 1%, 6%, 0.82); +} + +.voice-dialog-header { + padding: 0.85rem 1.25rem; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + border-bottom: 2px solid var(--cl-gray-2); + background-color: var(--cl-gray-2); +} + +.voice-dialog-header h2 { + margin: 0; + font-size: 0.95rem; + text-transform: uppercase; +} + +.voice-dialog-header h2::before { + content: "> "; + color: var(--cl-orange-6); +} + +.voice-dialog-target { + padding: 3px 8px; + color: var(--cl-cyan-6); + font-size: 0.8rem; + font-weight: bold; + text-transform: uppercase; + border: 2px solid var(--cl-cyan-6); + max-width: 55%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.voice-dialog-body { + padding: 1.25rem; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.voice-field { + display: flex; + flex-direction: column; + gap: 0.4rem; +} + +.voice-field-tag { + color: var(--cl-orange-6); + font-size: 0.85rem; + font-weight: bold; + text-transform: uppercase; +} + +.voice-field input { + width: 100%; + padding: 0.65rem 0.8rem; + color: var(--cl-white); + font-family: inherit; + font-size: 0.95rem; + border: 2px solid var(--cl-gray-3); + background-color: var(--cl-gray-1); + outline: none; +} + +.voice-field input:focus { + border-color: var(--cl-orange-6); +} + +.voice-dialog-message { + margin: 0; + color: var(--cl-gray-7); + font-size: 0.85rem; +} + +.voice-dialog-message[data-kind="error"] { + color: var(--cl-red-6); +} + +.voice-dialog-actions { + padding: 0.85rem 1.25rem 1.25rem; + display: flex; + justify-content: flex-end; + align-items: stretch; + gap: 0.75rem; +} + +.voice-dialog-actions .voice-submit { + width: auto; + min-width: 8rem; + margin: 0; + font-family: inherit; + cursor: pointer; +} + +.voice-dialog-actions .voice-submit:disabled { + color: var(--cl-gray-5); + border-color: var(--cl-gray-4); + background-color: transparent; + cursor: wait; +} + +[hidden] { + display: none !important; +} + @media (max-width: 640px) { body { margin: 2vh 4vw; @@ -392,4 +1143,30 @@ body { flex-direction: column; gap: 0.75rem; } + + .channel-actions { + width: 100%; + justify-content: space-between; + } + + .client { + flex-wrap: wrap; + gap: 0.4rem; + } + + .voice-settings { + grid-template-columns: 1fr; + gap: 1rem; + } + + .voice-bar-main, + .voice-settings, + .voice-bar-message { + padding-left: 1rem; + padding-right: 1rem; + } + + .voice-buttons { + width: 100%; + } } |