better vc ui
This commit is contained in:
parent
dd08cc88ae
commit
bc91533262
6 changed files with 826 additions and 270 deletions
|
|
@ -1022,35 +1022,43 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
|
|||
}
|
||||
|
||||
/* Custom Zoom Slider Styling */
|
||||
#cropper-zoom {
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
#cropper-zoom::-webkit-slider-thumb {
|
||||
#cropper-zoom,
|
||||
.voice-setting-row input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 100%;
|
||||
height: 0.375rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 0.1875rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#cropper-zoom {
|
||||
margin: 0.625rem 0;
|
||||
}
|
||||
|
||||
#cropper-zoom::-webkit-slider-thumb,
|
||||
.voice-setting-row input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
background: var(--text-color);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, background 0.2s;
|
||||
}
|
||||
|
||||
#cropper-zoom::-webkit-slider-thumb:hover {
|
||||
#cropper-zoom::-webkit-slider-thumb:hover,
|
||||
.voice-setting-row input[type="range"]::-webkit-slider-thumb:hover {
|
||||
transform: scale(1.2);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#cropper-zoom::-moz-range-thumb {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
#cropper-zoom::-moz-range-thumb,
|
||||
.voice-setting-row input[type="range"]::-moz-range-thumb {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
background: var(--text-color);
|
||||
cursor: pointer;
|
||||
|
|
@ -1058,7 +1066,8 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
|
|||
border: none;
|
||||
}
|
||||
|
||||
#cropper-zoom::-moz-range-thumb:hover {
|
||||
#cropper-zoom::-moz-range-thumb:hover,
|
||||
.voice-setting-row input[type="range"]::-moz-range-thumb:hover {
|
||||
transform: scale(1.2);
|
||||
background: #fff;
|
||||
}
|
||||
|
|
@ -1234,9 +1243,9 @@ input:checked + .toggle-slider:before {
|
|||
z-index: 100;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-10px);
|
||||
transform: translateY(-0.625rem);
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
|
||||
box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.5);
|
||||
padding: 0.4rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -1277,8 +1286,10 @@ input:checked + .toggle-slider:before {
|
|||
/* Voice UI Styles */
|
||||
#voice-call-popup {
|
||||
position: fixed;
|
||||
width: 600px;
|
||||
height: 450px;
|
||||
width: 37.5rem;
|
||||
height: 28.125rem;
|
||||
min-width: 20rem;
|
||||
min-height: 14rem;
|
||||
background-color: var(--main-bg-color);
|
||||
border: var(--border-width) solid var(--light-border-color);
|
||||
border-radius: 0.9rem;
|
||||
|
|
@ -1288,25 +1299,68 @@ input:checked + .toggle-slider:before {
|
|||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
resize: both;
|
||||
|
||||
opacity: 0;
|
||||
transform: translateY(1.5rem) scale(0.92);
|
||||
pointer-events: none;
|
||||
transition:
|
||||
opacity 0.2s ease,
|
||||
transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
#voice-call-popup.show {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
pointer-events: auto;
|
||||
}
|
||||
#voice-call-popup.hide {
|
||||
opacity: 0;
|
||||
transform: translateY(1rem) scale(0.95);
|
||||
}
|
||||
|
||||
#voice-header {
|
||||
height: 3rem;
|
||||
background: var(--light-border-color);
|
||||
flex-shrink: 0;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 15px;
|
||||
justify-content: space-between;
|
||||
padding: 0 0.9375rem;
|
||||
cursor: grab;
|
||||
font-weight: bold;
|
||||
user-select: none;
|
||||
border-bottom: var(--border-width) solid rgba(255,255,255,0.05);
|
||||
-webkit-user-select: none;
|
||||
border-bottom: var(--border-width) solid var(--light-border-color);
|
||||
}
|
||||
#voice-header:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
.voice-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
.voice-title svg {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
#voice-status {
|
||||
font-size: 0.75rem;
|
||||
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;
|
||||
}
|
||||
|
||||
#voice-users {
|
||||
padding: 15px;
|
||||
padding: 0.9375rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
||||
gap: 12px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
|
||||
gap: 0.75rem;
|
||||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
|
@ -1314,94 +1368,253 @@ input:checked + .toggle-slider:before {
|
|||
.voice-tile {
|
||||
position: relative;
|
||||
background: var(--light-border-color);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
.voice-tile.speaking {
|
||||
border-color: #4cd137;
|
||||
box-shadow: 0 0 8px 2px #4cd137;
|
||||
}
|
||||
|
||||
.voice-tile-name {
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
left: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 2px 6px;
|
||||
background: rgba(0,0,0,0.6);
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
max-width: calc(100% - 12px);
|
||||
border-radius: 0.65rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
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;
|
||||
}
|
||||
|
||||
.voice-tile-icons {
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
right: 6px;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
.voice-tile:hover {
|
||||
transform: translateY(-0.125rem);
|
||||
}
|
||||
|
||||
.voice-tile video {
|
||||
.voice-tile video,
|
||||
.voice-tile canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
background: #000;
|
||||
}
|
||||
@keyframes voice-tile-in {
|
||||
from { opacity: 0; transform: scale(0.85); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
.voice-tile.speaking {
|
||||
border-color: var(--big-green);
|
||||
box-shadow: 0 0 0.3rem rgba(120, 200, 120, 0.45);
|
||||
}
|
||||
|
||||
.voice-tile-name {
|
||||
position: absolute;
|
||||
bottom: 0.375rem;
|
||||
left: 0.375rem;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
padding: 0.125rem 0.5rem;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
backdrop-filter: blur(0.5rem);
|
||||
-webkit-backdrop-filter: blur(0.5rem);
|
||||
border-radius: 50rem;
|
||||
color: #fff;
|
||||
max-width: calc(100% - 0.75rem);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.voice-tile-icons {
|
||||
position: absolute;
|
||||
bottom: 0.375rem;
|
||||
right: 0.375rem;
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.voice-tile-icons svg {
|
||||
filter: drop-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.6));
|
||||
}
|
||||
|
||||
.voice-mic-meter {
|
||||
height: 0.25rem;
|
||||
flex-shrink: 0;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
width: 100%;
|
||||
}
|
||||
#voice-mic-level {
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
transition: width 0.1s linear, background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.voice-controls {
|
||||
height: 4rem;
|
||||
background: var(--main-bg-color);
|
||||
flex-shrink: 0;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border-top: var(--border-width) solid var(--light-border-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
gap: 0.9375rem;
|
||||
padding: 0 0.9375rem;
|
||||
}
|
||||
|
||||
.voice-btn {
|
||||
border: var(--border-width) solid var(--light-border-color);
|
||||
background: var(--main-bg-color);
|
||||
color: var(--fg-1);
|
||||
border-radius: 0.6rem;
|
||||
padding: 0.6rem 1rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: var(--text-color) !important;
|
||||
width: 2.6rem;
|
||||
height: 2.6rem;
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 0.8rem;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
backface-visibility: hidden;
|
||||
transform: translateZ(0);
|
||||
will-change: transform;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
.voice-btn svg {
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
.voice-btn:hover {
|
||||
background: var(--light-border-color);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.voice-btn:active, .voice-btn.is-pressed {
|
||||
transform: var(--press-scale);
|
||||
}
|
||||
|
||||
.voice-btn.voice-btn-active {
|
||||
background: #27ae60;
|
||||
color: #fff;
|
||||
border-color: #27ae60;
|
||||
}
|
||||
|
||||
.voice-btn-danger {
|
||||
background: #e74c3c !important;
|
||||
background: var(--big-green) !important;
|
||||
border-color: transparent !important;
|
||||
color: white !important;
|
||||
}
|
||||
.voice-btn.voice-btn-active:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
.voice-btn.voice-btn-danger {
|
||||
background: var(--big-red) !important;
|
||||
border-color: transparent !important;
|
||||
color: white !important;
|
||||
border-color: #e74c3c !important;
|
||||
}
|
||||
|
||||
.voice-btn-danger:hover {
|
||||
background: #c0392b !important;
|
||||
border-color: #c0392b !important;
|
||||
/* Incoming Call Popup */
|
||||
#incoming-call-popup {
|
||||
position: fixed;
|
||||
top: 1.5rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(calc(-100% - 3rem));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.7rem 0.7rem 0.7rem 1rem;
|
||||
background: rgba(255, 255, 255, 0.015);
|
||||
backdrop-filter: blur(1.2rem);
|
||||
-webkit-backdrop-filter: blur(1.2rem);
|
||||
border: var(--border-width) solid var(--big-green);
|
||||
border-radius: 0.9rem;
|
||||
box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.4);
|
||||
z-index: 9999;
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity 0.25s ease,
|
||||
transform 0.35s 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));
|
||||
}
|
||||
|
||||
.incoming-call-icon {
|
||||
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); }
|
||||
}
|
||||
|
||||
.incoming-call-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
text-align: left;
|
||||
}
|
||||
.incoming-call-title {
|
||||
font-weight: bold;
|
||||
font-size: 1.05rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
.incoming-call-subtitle {
|
||||
font-size: 0.85rem;
|
||||
color: var(--darker-text-color);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.incoming-call-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
.voice-call-btn {
|
||||
height: 2.4rem;
|
||||
padding: 0 0.9375rem;
|
||||
margin: 0;
|
||||
border-radius: 0.8rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.375rem;
|
||||
font-weight: 700;
|
||||
|
||||
backface-visibility: hidden;
|
||||
transform: translateZ(0);
|
||||
will-change: transform;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
.voice-call-btn svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
.voice-call-btn.accept {
|
||||
background: var(--big-green) !important;
|
||||
border: none !important;
|
||||
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);
|
||||
}
|
||||
.voice-call-btn.decline:hover {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
.voice-call-btn:active, .voice-call-btn.is-pressed {
|
||||
transform: var(--press-scale);
|
||||
}
|
||||
|
||||
/* Voice User Settings Popup */
|
||||
|
|
@ -1409,39 +1622,63 @@ input:checked + .toggle-slider:before {
|
|||
position: fixed;
|
||||
background: var(--main-bg-color);
|
||||
border: var(--border-width) solid var(--light-border-color);
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.5);
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.8rem;
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
|
||||
z-index: 10000;
|
||||
min-width: 13rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
transform-origin: top left;
|
||||
transform: scale(0.9);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition:
|
||||
opacity 0.15s ease,
|
||||
transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
#voice-user-settings.open {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.voice-setting-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 10px;
|
||||
gap: 0.3rem;
|
||||
margin-bottom: 0;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.65rem;
|
||||
}
|
||||
.voice-setting-row:hover {
|
||||
background-color: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.voice-setting-row label {
|
||||
font-size: 11px;
|
||||
color: var(--fg-1);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--darker-text-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.voice-setting-row input[type="range"] {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
appearance: none;
|
||||
background: var(--bg-2);
|
||||
-webkit-appearance: none;
|
||||
outline: none;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.voice-setting-row input[type="range"]::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: var(--accent);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
@media (max-width: 55rem) {
|
||||
#voice-call-popup {
|
||||
width: calc(100vw - 2rem);
|
||||
height: 60vh;
|
||||
left: 1rem;
|
||||
right: unset;
|
||||
}
|
||||
#incoming-call-popup {
|
||||
width: calc(100vw - 2rem);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue