style.css

* {
    font-size: inherit;
    box-sizing: border-box;
    margin: 0;
}

:root {
    font-family: "Roboto", sans-serif;
    
    --box-bg: hsla(0, 0%, 15%, 70%);
    
    --light-blue-color: hsl(203, 51%, 58%);
    
    --channel-text-color: hsl(0, 0%, 100%);
    --client-text-color: hsl(211, 100%, 90%);
    --local-client-text-color: limegreen;
    
    /* Dynamic Values (Changed by URL Parameters) */
    --scale: 1;
    --alignment-horizontal: start;
    --alignment-vertical: column;
    
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
    
    overflow: hidden;
}

body {
    display: flex;
    
    width: 100%;
    height: 100%;
    
    background-color: transparent;
    
    overflow: hidden;
}

body:has(#interface.active) {
    background-color: black;
}

main {
    flex-grow: 1;
}

main:not(.aligned_to_top) {
    margin-block-start: auto;
}

/* 
    Viewer
*/

#viewer {
    font-size: calc(var(--scale) * 1.2em);
    font-weight: bold;
    
    display: flex;
    flex-direction: var(--alignment-vertical);
    align-items: var(--alignment-horizontal);
    
    user-select: none;
}

#viewer .container {
    display: flex;
    flex-direction: var(--alignment-vertical);
    align-items: var(--alignment-horizontal);
}

#viewer > .container {
    margin-inline: 0;
}

.client_list, .channel_list {
    display: flex;
    flex-direction: column;
    align-items: var(--alignment-horizontal);
}

.channel_list {
    flex-direction: var(--alignment-vertical);
}

.client_list {
    margin-top: 0.025em;
}

#viewer > .channel > .client_list {
    margin-inline: 0;
}

#viewer:not(.show_subchannels) > .channel .channel_list {
    display: none;
}

.server {
    width: fit-content;
}

.channel, .client_list {
    margin-inline: 0.5em;
}

.channel {
    color: var(--channel-text-color);
}

#viewer:not(.show_spacers) .channel.spacer:not(.has_clients),
#viewer:not(.show_spacers):not(.show_query_clients) .channel.spacer:not(.has_regular_clients),

#viewer.hide_empty_channels .channel:not(.has_clients),
#viewer.hide_empty_channels.hide_local_client .channel:not(.has_nonlocal_clients),
#viewer.hide_empty_channels:not(.show_query_clients) .channel:not(.has_regular_clients) {
    display: none;
}

.client {
    display: flex;
    align-items: center;
    
    --height: 0;
    --avatar: url("");
    
    color: var(--client-text-color);
}

#viewer.hide_local_client .client.self,
#viewer:not(.show_query_clients) .client:not(.regular_client) {
    display: none;
}

.client:first-child {
    margin-top: 0;
}

.client.self {
    color: var(--local-client-text-color);
}

.client > .name {
    margin-inline-start: 0.5em;
}

#viewer.hide_status .client > .name {
    margin-inline-start: 0;
}

.server > .channel {
    margin: 0;
}

.channel > .name, .client {
    background-color: var(--box-bg);
    
    margin-block: 0.025em;
    --padding: 0.4em;
    padding: var(--padding);
    
    width: fit-content;
}

/* Client Statuses */
#viewer.hide_silent_clients .client:not(.talking) {
    display: none;
}

#viewer.hide_status .status {
    display: none;
}

.status {
    position: relative;
    
    display: flex;
    
    --calculated-height: calc(var(--height) - (var(--padding) * 2));
    
    height: var(--calculated-height);
    width: var(--calculated-height);
}

.client:not(.regular_client) .status {
    display: none;
}

.client:not(.regular_client) > .name {
    margin-inline-start: 0;
}

.status[status="hardware_muted"]::before {
    content: "";
    
    position: absolute;
    
    background-image: url("/resources/img/client_status/audio_input_muted_hardware.svg");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    
    inset: 0;
}

.status[status="sound_muted"]::before {
    content: "";
    
    position: absolute;
    
    background-image: url("/resources/img/client_status/audio_output_muted.svg");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    
    inset: 0;
}

.status[status="away"]::before {
    content: "";
    
    position: absolute;
    
    background-image: url("/resources/img/client_status/away.svg");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    
    inset: 0;
}

.status[status="away_and_sound_muted"]::before {
    content: "";
    
    position: absolute;
    
    background-image: url("/resources/img/client_status/away_and_sound_muted.svg");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    
    inset: 0;
}

.status[status="mic_muted"]::before {
    content: "";
    
    position: absolute;
    
    background-image: url("/resources/img/client_status/audio_input_muted.svg");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    
    inset: 0;
}

.status[status="muted_local"]::before {
    content: "";
    
    position: absolute;
    
    background-image: url("/resources/img/client_status/audio_input_muted_local.svg");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    
    inset: 0;
}

.status[status="not_talking"] {
    background-image: linear-gradient(#21303A, #365369);
    
    border: 0.11em solid var(--light-blue-color);
    border-radius: 50%;
}

.status[status="talking"] {
    background-image: linear-gradient(#177CA1, #22B0E4);
    
    border: 0.11em solid hsl(200, 53%, 55%);
    border-radius: 50%;
}

#viewer.show_avatars .client.has_avatar :where(.status[status="not_talking"], .status[status="talking"]) {
    background-image: var(--avatar);
    background-size: cover;
}

#viewer.show_avatars .client.has_avatar .status[status="talking"] {
    border: 0.2em solid hsl(200, 63%, 65%);
}

.away_message {
    color: #F65D21;
    
    margin-inline-start: 0.25em;
}

#viewer.hide_away_message .away_message {
    display: none;
}

.away_message::before {
    content: "[";
}

.away_message::after {
    content: "]";
}

/* 
    Hint Screen
*/
#hint_screen p {
    font-size: 2rem;
    
    color: black;
    background-color: white;
}

#hint_screen p:first-child {
    font-weight: bold;
}

#hint_screen img {
    min-width: 30rem;
}

/* 
    Interface
*/
#interface {
    display: none;
    
    --alignment-horizontal: end;
    
    overflow: auto;
}

#interface.active {
    position: fixed;
    
    display: flex;
    flex-direction: column;
    
    inset: 0;
}

#interface_box {
    font-size: 1.2rem;
    
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    align-self: var(--alignment-horizontal, end);
    text-align: center;
    
    padding: 0.5em;
    
    background-color: hsla(0, 0%, 80%, 85%);
}

#interface_box section {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

#interface_box > section > section {
    border: 0.1em dashed hsl(0, 0%, 100%);
    border-radius: 0.2em;
    
    padding-block: 0.2em;
    padding-inline-end: 0.2em;
}

#interface h2 {
    font-size: 1.4em;
}

#interface h3 {
    font-size: 1.2em;
}

#interface h4 {
    font-size: 1.05em;
    
    text-align: start;
    
    margin-inline-start: 0.2em;
}

#interface .line {
    position: relative;
    
    display: flex;
    gap: 0.3em;
    align-items: center;
    
    margin-inline-start: 0.5em;
}

#interface .line :first-child {
    margin-inline-end: auto;
}

#interface .line > .hint {
    position: absolute;
    z-index: 1;
    
    top: calc(100% + 0.25em);
    left: 0;
    right: 0;
    
    background-color: white;
    
    border: 0.1em solid black;
    
    visibility: hidden;
    
    pointer-events: none;
}

#interface .line:hover > .hint {
    visibility: visible;
}

#interface .line label {
    user-select: none;
}

#interface input,
#interface select {
    text-align: end;
}

input[type="checkbox"] {
    width: 1em;
    height: 1em;
}

:disabled {
    cursor: not-allowed;
}

#interface_url_wrapper {
    position: relative;
    
    background-color: white;
    
    padding: 0.1em;
    
    margin-inline: auto;
    
    width: 100%;
    height: 2em;
}

#interface_generated_url {
    position: absolute;
    
    inset: 0;
    
    overflow-x: scroll;
    
    white-space: nowrap;
    user-select: all;
}

/* 
    Utility
*/

body:not(.environment_browser) .browser_only {
    display: none;
}

.hidden {
    display: none !important;
}