mats/gibbz
1
0 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(ui): compact user panel with status icon and room indicator
Build and Publish / Metadata (push) Successful in 2s
Details
Build and Publish / BuildAndDeployAmd64 (push) Successful in 22s
Details

Browse Source
This commit is contained in:
mats committed 2026-09-22 10:06:01 +02:00
1 parent a2be7cf6a5
commit e687d41574
3 files changed
+51 -17
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/style.css
+24 -9
View File
@@ -66,25 +66,40 @@ body {
#user-panel {
margin-top: auto; background: var(--bg-0); padding: 8px;
display: flex; align-items: center; gap: 8px;
display: flex; align-items: center; justify-content: space-between; gap: 6px;
min-height: 52px;
}
.me { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.me-meta { display: flex; flex-direction: column; min-width: 0; }
.me { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.me-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; overflow: hidden; }
#nick {
background: transparent; border: none; color: var(--text-0); font: inherit;
font-weight: 600; width: 100%; padding: 0; outline: none; border-bottom: 1px dashed transparent;
font-weight: 600; font-size: 13px; width: 100%; padding: 0; outline: none; border-bottom: 1px dashed transparent;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#nick:hover, #nick:focus { border-bottom-color: var(--text-2); }
#voice-status { font-size: 11px; color: var(--text-2); }
.user-buttons { display: flex; gap: 2px; }
.status-row {
display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-2);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
}
.status-indicator {
width: 7px; height: 7px; border-radius: 50%; background: var(--text-2); flex-shrink: 0;
}
.status-indicator.online { background: var(--green); }
.status-indicator.connecting { background: var(--yellow); }
.status-indicator.error { background: var(--red); }
#voice-status {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-buttons { display: flex; gap: 2px; flex-shrink: 0; }
.ctl {
background: transparent; border: none; color: var(--text-1); font-size: 16px;
width: 32px; height: 32px; border-radius: 6px; cursor: pointer; position: relative;
background: transparent; border: none; color: var(--text-1); font-size: 15px;
width: 28px; height: 28px; border-radius: 6px; cursor: pointer; position: relative;
display: grid; place-items: center; padding: 0;
}
.ctl:hover { background: var(--bg-3); color: var(--text-0); }
.ctl.off { color: var(--red); }
.ctl.off::after {
content: ""; position: absolute; left: 7px; top: 15px; width: 18px; height: 2px;
content: ""; position: absolute; left: 5px; top: 13px; width: 18px; height: 2px;
background: var(--red); transform: rotate(-40deg); border-radius: 1px;
}
.ctl:disabled { opacity: .35; cursor: not-allowed; }