voice chat ui improvements
- better resize - better grid styling
This commit is contained in:
parent
bc91533262
commit
135fbf23ca
18 changed files with 1003 additions and 235 deletions
|
|
@ -1298,7 +1298,7 @@ input:checked + .toggle-slider:before {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
resize: both;
|
||||
touch-action: none;
|
||||
|
||||
opacity: 0;
|
||||
transform: translateY(1.5rem) scale(0.92);
|
||||
|
|
@ -1329,6 +1329,7 @@ input:checked + .toggle-slider:before {
|
|||
font-weight: bold;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
touch-action: none;
|
||||
border-bottom: var(--border-width) solid var(--light-border-color);
|
||||
}
|
||||
#voice-header:active {
|
||||
|
|
@ -1347,26 +1348,66 @@ input:checked + .toggle-slider:before {
|
|||
}
|
||||
|
||||
#voice-status {
|
||||
font-size: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--darker-text-color);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: var(--border-width) solid var(--light-border-color);
|
||||
padding: 0.15rem 0.6rem;
|
||||
border-radius: 50rem;
|
||||
opacity: 0.85;
|
||||
}
|
||||
#voice-status .status-dot {
|
||||
width: 0.55rem;
|
||||
height: 0.55rem;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--darker-text-color);
|
||||
}
|
||||
#voice-status.connecting .status-dot {
|
||||
animation: voice-dot-pulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
#voice-status.connected {
|
||||
opacity: 1;
|
||||
}
|
||||
#voice-status.connected .status-dot {
|
||||
background: var(--big-green);
|
||||
box-shadow: 0 0 0.35rem rgba(120, 200, 120, 0.45);
|
||||
}
|
||||
@keyframes voice-dot-pulse {
|
||||
50% { opacity: 0.25; }
|
||||
}
|
||||
|
||||
#voice-users {
|
||||
padding: 0.9375rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: flex-start;
|
||||
gap: 0.75rem;
|
||||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
.voice-resize-handle {
|
||||
position: absolute;
|
||||
z-index: 6;
|
||||
touch-action: none;
|
||||
}
|
||||
.voice-resize-n { top: 0; left: 0.6rem; right: 0.6rem; height: 0.45rem; cursor: ns-resize; }
|
||||
.voice-resize-s { bottom: 0; left: 0.6rem; right: 0.6rem; height: 0.45rem; cursor: ns-resize; }
|
||||
.voice-resize-e { right: 0; top: 0.6rem; bottom: 0.6rem; width: 0.45rem; cursor: ew-resize; }
|
||||
.voice-resize-w { left: 0; top: 0.6rem; bottom: 0.6rem; width: 0.45rem; cursor: ew-resize; }
|
||||
.voice-resize-ne, .voice-resize-nw, .voice-resize-se, .voice-resize-sw { width: 0.8rem; height: 0.8rem; }
|
||||
.voice-resize-ne { top: 0; right: 0; cursor: nesw-resize; }
|
||||
.voice-resize-nw { top: 0; left: 0; cursor: nwse-resize; }
|
||||
.voice-resize-se { bottom: 0; right: 0; cursor: nwse-resize; }
|
||||
.voice-resize-sw { bottom: 0; left: 0; cursor: nesw-resize; }
|
||||
|
||||
.voice-tile {
|
||||
position: relative;
|
||||
width: var(--voice-tile-w, 9rem);
|
||||
height: var(--voice-tile-h, 8rem);
|
||||
background: var(--light-border-color);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
|
@ -1375,18 +1416,17 @@ input:checked + .toggle-slider:before {
|
|||
cursor: pointer;
|
||||
border: var(--border-width) solid transparent;
|
||||
box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.3);
|
||||
animation: voice-tile-in 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
|
||||
transition: border-color 0.15s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.voice-tile:hover {
|
||||
transform: translateY(-0.125rem);
|
||||
.voice-tile.tile-enter {
|
||||
animation: voice-tile-in 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
.voice-tile video,
|
||||
.voice-tile canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-fit: contain;
|
||||
background: #000;
|
||||
}
|
||||
@keyframes voice-tile-in {
|
||||
|
|
@ -1502,9 +1542,12 @@ input:checked + .toggle-slider:before {
|
|||
/* Incoming Call Popup */
|
||||
#incoming-call-popup {
|
||||
position: fixed;
|
||||
top: 1.5rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(calc(-100% - 3rem));
|
||||
top: calc(env(safe-area-inset-top, 0rem) + 4.5rem);
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-inline: auto;
|
||||
width: fit-content;
|
||||
max-width: calc(100vw - 2rem);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
|
@ -1518,39 +1561,22 @@ input:checked + .toggle-slider:before {
|
|||
z-index: 9999;
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity 0.25s ease,
|
||||
transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
opacity 0.2s ease,
|
||||
transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
#incoming-call-popup.show {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
#incoming-call-popup.hide {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(calc(-100% - 2rem));
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.incoming-call-icon {
|
||||
.incoming-call-avatar {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--big-green);
|
||||
color: white !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: voice-call-pulse 1.5s ease-out infinite;
|
||||
}
|
||||
.incoming-call-icon svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
@keyframes voice-call-pulse {
|
||||
0% { box-shadow: 0 0 0 0 hsla(120, 60%, 55%, 0.45); }
|
||||
70% { box-shadow: 0 0 0 0.8rem hsla(120, 60%, 55%, 0); }
|
||||
100% { box-shadow: 0 0 0 0 hsla(120, 60%, 55%, 0); }
|
||||
border-radius: 0.65rem;
|
||||
border: var(--border-width) solid rgba(255, 255, 255, 0.2);
|
||||
object-fit: cover;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
.incoming-call-info {
|
||||
|
|
@ -1558,8 +1584,15 @@ input:checked + .toggle-slider:before {
|
|||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
text-align: left;
|
||||
min-width: 0;
|
||||
}
|
||||
.incoming-call-title {
|
||||
.incoming-call-name,
|
||||
.incoming-call-subtitle {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.incoming-call-name {
|
||||
font-weight: bold;
|
||||
font-size: 1.05rem;
|
||||
color: var(--text-color);
|
||||
|
|
@ -1603,15 +1636,13 @@ input:checked + .toggle-slider:before {
|
|||
color: white !important;
|
||||
}
|
||||
.voice-call-btn.decline {
|
||||
background: rgba(255, 255, 255, 0.05) !important;
|
||||
border: var(--border-width) solid var(--light-border-color) !important;
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
.voice-call-btn.accept:hover {
|
||||
filter: brightness(1.12);
|
||||
background: var(--big-red) !important;
|
||||
border: none !important;
|
||||
color: white !important;
|
||||
}
|
||||
.voice-call-btn.accept:hover,
|
||||
.voice-call-btn.decline:hover {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
filter: brightness(0.85);
|
||||
}
|
||||
.voice-call-btn:active, .voice-call-btn.is-pressed {
|
||||
transform: var(--press-scale);
|
||||
|
|
@ -1672,13 +1703,16 @@ input:checked + .toggle-slider:before {
|
|||
|
||||
@media (max-width: 55rem) {
|
||||
#voice-call-popup {
|
||||
width: calc(100vw - 2rem);
|
||||
height: 60vh;
|
||||
left: 1rem;
|
||||
right: unset;
|
||||
width: 16rem;
|
||||
height: 17rem;
|
||||
min-width: 13rem;
|
||||
min-height: 12rem;
|
||||
}
|
||||
#incoming-call-popup {
|
||||
width: calc(100vw - 2rem);
|
||||
box-sizing: border-box;
|
||||
gap: 0.75rem;
|
||||
padding: 0.6rem 0.6rem 0.6rem 0.8rem;
|
||||
}
|
||||
.voice-call-btn {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue