UI: иконки управления звонком

This commit is contained in:
AidarKC
2026-07-24 15:02:56 +04:00
parent 4d9e42205f
commit 69faf55b2b
3 changed files with 184 additions and 33 deletions
+86 -8
View File
@@ -1749,29 +1749,106 @@
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
border: 0;
border-bottom: 1px solid rgba(159, 255, 196, 0.28);
background: linear-gradient(180deg, rgba(30, 138, 79, 0.98), rgba(18, 106, 60, 0.98));
box-shadow: 0 10px 24px rgba(5, 30, 16, 0.28);
pointer-events: auto;
}
.call-minimized-bar-text {
flex: 1 1 auto;
min-width: 0;
border: 0;
background: transparent;
color: #f3fff8;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
text-align: left;
pointer-events: auto;
padding: 0;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
white-space: nowrap;
}
.call-minimized-bar-text {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.call-minimized-bar-actions {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.call-icon-btn {
width: 40px;
min-width: 40px;
height: 40px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid rgba(132, 162, 228, 0.42);
background: linear-gradient(180deg, rgba(19, 35, 63, 0.9), rgba(14, 26, 50, 0.95));
color: #e7efff;
cursor: pointer;
transition: 0.2s ease;
}
.call-icon-btn:hover {
transform: translateY(-1px);
}
.call-icon-btn:disabled {
opacity: 1;
color: #93a6cc;
background: linear-gradient(180deg, rgba(18, 30, 54, 0.8), rgba(11, 20, 39, 0.86));
border-color: rgba(124, 145, 189, 0.28);
box-shadow: none;
cursor: not-allowed;
transform: none;
}
.call-icon-btn svg {
width: 20px;
height: 20px;
}
.call-icon-btn--secondary {
border-color: rgba(132, 162, 228, 0.42);
background: linear-gradient(180deg, rgba(19, 35, 63, 0.9), rgba(14, 26, 50, 0.95));
color: #e7efff;
}
.call-icon-btn--secondary:hover {
border-color: rgba(167, 195, 255, 0.76);
}
.call-icon-btn--danger {
border-color: rgba(255, 129, 147, 0.52);
background: linear-gradient(120deg, rgba(188, 42, 65, 0.96), rgba(142, 28, 47, 0.98));
color: #fff2f5;
}
.call-icon-btn--danger:hover {
border-color: rgba(255, 163, 176, 0.82);
}
.call-icon-btn--bar {
width: 34px;
min-width: 34px;
height: 34px;
border-radius: 10px;
}
.call-icon-btn--bar svg {
width: 18px;
height: 18px;
}
.call-overlay {
@@ -1823,6 +1900,7 @@
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.call-accept-btn {