restitux
2fcb853c30
Build Mumble Web 2 / windows_build (push) Successful in 2m41s
Build Mumble Web 2 / linux_build (push) Successful in 1m25s
Build Mumble Web 2 / android_build (push) Successful in 5m58s
Build android container / android-release-builder-container-build (push) Successful in 9s
Build Mumble Web 2 release builder containers / windows-release-builder-container-build (push) Successful in 13s
# Summary This change improves the channel selection behavior to be more similar to the official client and generally more usable. It's currently mildly broken due to the details element grabbing click events from the whole row and the row text being selectable. This change also makes it more obvious that the channel title can be clicked. I'm not sure how this works on mobile, so we might need to make more changes there in the future to work better with touchscreens. # Changes - Channels can only be expanded or collapsed by clicking on the adjacent arrow - Expand/collapse arrows are only displayed on channels with children or users - Channel can only be joined by double clicking to the right of the collapse/expand arrow - The channel title background (and the empty space to the right) display a highlight when the user hovers over them. - All text inside the channel view is no longer selectable. # Testing I tested on the desktop client. I didn't test on mobile but I'll give it a shot after I merge and maybe come back with another PR to make this behavior more intuitive over there. Reviewed-on: #21
434 lines
7.5 KiB
SCSS
434 lines
7.5 KiB
SCSS
:root {
|
|
--txt-color: oklch(0.9 0 99);
|
|
--bg-color: oklch(0.15 0.01 338.64);
|
|
--light-bg-color: oklch(0.25 0.01 338.64);
|
|
--login-bg-color: #5d7680;
|
|
--primary-btn-color: #7bad9f;
|
|
--accent-normal: #7bad9f;
|
|
--accent-muted: #ff746c;
|
|
--accent-deafened: #464459;
|
|
--line-width: 2px;
|
|
--line-color: oklch(0.7 0 0.99);
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
#main {
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
background-color: var(--bg-color);
|
|
overflow: auto;
|
|
color: var(--txt-color);
|
|
|
|
font-family: Nunito;
|
|
font-size: 15pt;
|
|
font-weight: 600;
|
|
}
|
|
|
|
hr {
|
|
color: var(--line-color);
|
|
background-color: var(--line-color);
|
|
height: var(--line-width);
|
|
border: none;
|
|
}
|
|
|
|
button {
|
|
font-weight: bold;
|
|
font-size: medium;
|
|
border: none;
|
|
border-radius: 4px;
|
|
color: var(--txt-color);
|
|
background-color: var(--primary-btn-color);
|
|
cursor: pointer;
|
|
}
|
|
|
|
input {
|
|
border: none;
|
|
border-radius: 4px;
|
|
background-color: white;
|
|
color: black;
|
|
}
|
|
|
|
input:focus,
|
|
input:focus-visible {
|
|
border: none;
|
|
outline: solid var(--line-width) var(--accent-normal);
|
|
outline-offset: -3px;
|
|
}
|
|
|
|
a:link {
|
|
color: var(--accent-normal);
|
|
}
|
|
|
|
a:visited {
|
|
color: var(--accent-muted);
|
|
}
|
|
|
|
.userpil {
|
|
border-radius: 100px;
|
|
padding: 4px 8px;
|
|
width: fit-content;
|
|
|
|
img {
|
|
height: 1em;
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
&.is_self {
|
|
font-weight: bolder;
|
|
}
|
|
}
|
|
|
|
|
|
.channel_header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.channel_arrow {
|
|
width: 1em;
|
|
text-align: center;
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
.channel_arrow--placeholder {
|
|
pointer-events: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* The whole right side of the row is the dblclick target */
|
|
.channel_row_click {
|
|
flex: 1;
|
|
padding: 0.1rem 0.25rem 0.1rem 0.5rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Hover highlight for whole row area (title + blank space) */
|
|
.channel_row_click:hover {
|
|
background-color: var(--channel-hover-bg, #222); /* pick your color */
|
|
}
|
|
|
|
|
|
/* still keep text non-selectable if desired */
|
|
.channel_details {
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.channel {
|
|
&_details {
|
|
flex: 0 0 100%;
|
|
|
|
summary {
|
|
cursor: pointer;
|
|
}
|
|
|
|
summary:focus-visible {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
&_children {
|
|
border-left: solid var(--line-color) var(--line-width);
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-left: 5px;
|
|
padding-left: 11px;
|
|
padding-top: 4px;
|
|
}
|
|
}
|
|
|
|
.chat {
|
|
&_panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
&_history {
|
|
overflow-y: auto;
|
|
flex: 1 0 0;
|
|
}
|
|
|
|
&_message {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: 16px;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
&_box_wrapper {
|
|
padding: 16px;
|
|
border-top: solid var(--line-color) var(--line-width);
|
|
}
|
|
|
|
&_box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 16px;
|
|
|
|
background-color: var(--light-bg-color);
|
|
|
|
padding-top: 16px;
|
|
padding-bottom: 16px;
|
|
|
|
padding-left: 8px;
|
|
padding-right: 16px;
|
|
|
|
border-radius: 8px;
|
|
|
|
input {
|
|
color: white;
|
|
background-color: var(--light-bg-color);
|
|
|
|
font-size: larger;
|
|
|
|
flex-grow: 1;
|
|
|
|
border: none;
|
|
}
|
|
|
|
input:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.user_edit_button {
|
|
background-color: oklch(0.53 0.1431 264.18);
|
|
border-radius: 50%;
|
|
aspect-ratio: 1 / 1;
|
|
flex-shrink: 0;
|
|
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
|
|
}
|
|
}
|
|
|
|
.button_row {
|
|
display: flex;
|
|
gap: clamp(4px, 1vw, 10px);
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
min-height: 0;
|
|
|
|
.spacer {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.connection_status {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
flex-shrink: 1;
|
|
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.user_info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
flex-shrink: 1;
|
|
|
|
.user_name {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.user_data {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
|
|
.toggle_button {
|
|
padding: clamp(4px, 0.5vw, 8px);
|
|
aspect-ratio: 1 / 1;
|
|
flex-shrink: 0;
|
|
|
|
background-color: unset;
|
|
|
|
border: solid rgb(255 255 255 / 0.1) clamp(1px, 0.3vw, 3px);
|
|
border-radius: clamp(4px, 0.8vw, 10px);
|
|
color: rgb(255 255 255 / 50%);
|
|
|
|
transition: all 0.5s ease-in-out;
|
|
|
|
&.is_on {
|
|
background-color: oklch(0.5 0.1381 21.71 / 20.12%);
|
|
color: oklch(0.53 0.1505 21.71 / 89.38%);
|
|
}
|
|
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.server {
|
|
&_grid {
|
|
display: grid;
|
|
height: 100%;
|
|
background-color: var(--bg-color);
|
|
|
|
grid-template-rows: 1fr auto;
|
|
grid-template-columns: 1fr 2fr;
|
|
grid-template-areas:
|
|
"tree chat"
|
|
"control chat";
|
|
|
|
@media screen and (max-width: 720px) {
|
|
grid-template-rows: auto 1fr 1fr;
|
|
grid-template-columns: 1fr;
|
|
grid-template-areas:
|
|
"tree"
|
|
"control"
|
|
"chat";
|
|
}
|
|
}
|
|
|
|
&_channel_box {
|
|
padding: 16px;
|
|
overflow: auto;
|
|
grid-area: tree;
|
|
}
|
|
|
|
&_chat_box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
grid-area: chat;
|
|
border-left: solid var(--line-color) var(--line-width);
|
|
|
|
@media screen and (max-width: 720px) {
|
|
border-left: unset;
|
|
border-top: solid var(--line-color) var(--line-width);
|
|
}
|
|
}
|
|
|
|
&_control_box {
|
|
padding: clamp(6px, 0.8vw, 12px);
|
|
margin: clamp(6px, 0.8vw, 12px);
|
|
background-color: var(--light-bg-color);
|
|
border-radius: clamp(6px, 1vw, 10px);
|
|
overflow: hidden;
|
|
grid-area: control;
|
|
|
|
display: flex;
|
|
gap: clamp(4px, 0.8vw, 8px);
|
|
flex-direction: column;
|
|
|
|
// Dynamic font sizing for control elements
|
|
--control-icon-size: clamp(16px, 2.5vw, 30px);
|
|
--control-text-size: clamp(12px, 2vw, 25px);
|
|
--control-small-text-size: clamp(10px, 1.5vw, 20px);
|
|
--user-icon-size: clamp(24px, 4vw, 45px);
|
|
--toggle-icon-size: clamp(18px, 3vw, 35px);
|
|
|
|
.connection_status {
|
|
.material-symbols-outlined {
|
|
font-size: var(--control-icon-size);
|
|
}
|
|
.status_text {
|
|
font-size: var(--control-text-size);
|
|
}
|
|
.channel_text {
|
|
font-size: var(--control-small-text-size);
|
|
}
|
|
}
|
|
|
|
.user_edit_button {
|
|
.material-symbols-outlined {
|
|
font-size: var(--user-icon-size);
|
|
}
|
|
}
|
|
|
|
.user_info {
|
|
.user_name {
|
|
font-size: var(--control-text-size);
|
|
}
|
|
.user_data {
|
|
font-size: var(--control-small-text-size);
|
|
}
|
|
}
|
|
|
|
.toggle_button {
|
|
.material-symbols-outlined {
|
|
font-size: var(--toggle-icon-size);
|
|
}
|
|
}
|
|
|
|
hr {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.login {
|
|
max-width: 50vw;
|
|
align-self: center;
|
|
padding: 32px;
|
|
border-radius: 16px;
|
|
background-color: var(--login-bg-color);
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
|
|
input,
|
|
button {
|
|
padding: 8px;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
color: #b3c6b4;
|
|
}
|
|
|
|
&_version {
|
|
color: var(--txt-color);
|
|
font-weight: normal;
|
|
}
|
|
|
|
&_bttn {
|
|
font-weight: bold;
|
|
font-size: large;
|
|
}
|
|
|
|
&_error {
|
|
|
|
background-color: white;
|
|
border-radius: 4px;
|
|
overflow: auto;
|
|
padding: 4px;
|
|
color: red;
|
|
|
|
pre {
|
|
color: black;
|
|
}
|
|
}
|
|
|
|
&_status {
|
|
&.is_error {
|
|
color: red;
|
|
}
|
|
}
|
|
}
|