SHA256
Улучшить раскладку чата при клавиатуре
This commit is contained in:
+164
-22
@@ -6268,6 +6268,37 @@ html, body { overflow-x: hidden; }
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dm-chat-screen {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dm-chat-screen > .dm-chat-wrap {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dm-chat-composer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 12;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.screen-content:has(> .dm-chat-screen) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.screen-content:has(> .dm-chat-screen) > .dm-chat-screen {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.screen-content:has(> .dm-screen) {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
@@ -6282,27 +6313,14 @@ html, body { overflow-x: hidden; }
|
||||
.screen-content:has(> .dm-chat-screen) {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(212, 175, 55, 0.65) rgba(255, 255, 255, 0.06);
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.screen-content:has(> .dm-chat-screen)::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.screen-content:has(> .dm-chat-screen)::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.screen-content:has(> .dm-chat-screen)::-webkit-scrollbar-thumb {
|
||||
background: rgba(212, 175, 55, 0.7);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.screen-content:has(> .dm-chat-screen)::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(240, 198, 76, 0.9);
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dm-messages-log {
|
||||
@@ -6401,11 +6419,10 @@ html, body { overflow-x: hidden; }
|
||||
gap: 10px;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: end;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
margin-inline: -14px;
|
||||
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
|
||||
margin-inline: 0;
|
||||
padding: 10px 0;
|
||||
border-top: 1px solid rgba(212, 175, 55, 0.22);
|
||||
background: rgba(8, 12, 20, 0.9);
|
||||
backdrop-filter: blur(12px);
|
||||
@@ -7900,3 +7917,128 @@ html, body { overflow-x: hidden; }
|
||||
color: #D4AF37;
|
||||
text-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
|
||||
}
|
||||
|
||||
/* Contacts header overflow menu — vertical ellipsis + glass dropdown. */
|
||||
.dm-head-menu-wrap {
|
||||
position: relative;
|
||||
justify-self: end;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
z-index: 40;
|
||||
}
|
||||
.dm-head-menu-btn {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 16px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #FFD98A;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition: background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
|
||||
}
|
||||
.dm-head-menu-btn:active { transform: scale(0.94); }
|
||||
.dm-head-menu-wrap.is-open .dm-head-menu-btn,
|
||||
.dm-head-menu-btn:focus-visible {
|
||||
outline: none;
|
||||
background: rgba(240, 184, 46, 0.08);
|
||||
box-shadow: inset 0 0 0 1px rgba(240, 184, 46, 0.24), 0 0 18px rgba(240, 184, 46, 0.12);
|
||||
}
|
||||
.dm-head-menu-dots {
|
||||
width: 6px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3.5px;
|
||||
}
|
||||
.dm-head-menu-dots i {
|
||||
display: block;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
box-shadow: 0 0 7px rgba(240, 184, 46, 0.45);
|
||||
}
|
||||
.dm-head-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 7px);
|
||||
right: 0;
|
||||
width: max-content;
|
||||
min-width: 190px;
|
||||
padding: 6px;
|
||||
border: 1px solid rgba(240, 184, 46, 0.26);
|
||||
border-radius: 15px;
|
||||
background: linear-gradient(155deg, rgba(22, 24, 31, 0.97), rgba(10, 12, 18, 0.97));
|
||||
box-shadow: 0 16px 38px rgba(0, 0, 0, 0.42), 0 0 20px rgba(240, 184, 46, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
backdrop-filter: blur(18px);
|
||||
-webkit-backdrop-filter: blur(18px);
|
||||
transform-origin: top right;
|
||||
animation: dm-head-menu-in 140ms ease-out both;
|
||||
}
|
||||
.dm-head-menu[hidden] { display: none; }
|
||||
.dm-head-menu::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: 18px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
transform: rotate(45deg);
|
||||
border-left: 1px solid rgba(240, 184, 46, 0.22);
|
||||
border-top: 1px solid rgba(240, 184, 46, 0.22);
|
||||
background: rgba(19, 21, 28, 0.98);
|
||||
}
|
||||
.dm-head-menu-item {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
min-height: 44px;
|
||||
padding: 0 12px;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #FCEAC0;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
.dm-head-menu-item svg {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
flex: 0 0 auto;
|
||||
color: #E7B83D;
|
||||
filter: drop-shadow(0 0 5px rgba(240, 184, 46, 0.22));
|
||||
}
|
||||
.dm-head-menu-item:hover,
|
||||
.dm-head-menu-item:focus-visible,
|
||||
.dm-head-menu-item:active {
|
||||
outline: none;
|
||||
background: rgba(240, 184, 46, 0.09);
|
||||
}
|
||||
@keyframes dm-head-menu-in {
|
||||
from { opacity: 0; transform: translateY(-5px) scale(0.97); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.dm-head-menu { animation: none; }
|
||||
.dm-head-menu-btn { transition: none; }
|
||||
}
|
||||
|
||||
/* Contacts overflow menu body portal: avoids topbar overflow hit-testing on desktop/Android. */
|
||||
.dm-head-menu--portal {
|
||||
position: fixed;
|
||||
right: auto;
|
||||
z-index: 10000;
|
||||
pointer-events: auto;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
+53
-22
@@ -2,7 +2,7 @@ body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: #05070A;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -22,12 +22,11 @@ body::before {
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
width: min(100vw, 430px);
|
||||
height: 100vh;
|
||||
height: 100svh;
|
||||
width: min(var(--app-viewport-width, 100vw), 430px);
|
||||
height: var(--app-viewport-height, 100vh);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
top: var(--app-viewport-offset-top, 0px);
|
||||
left: calc(50% + var(--app-viewport-offset-left, 0px) / 2);
|
||||
transform: translateX(-50%);
|
||||
--call-minimized-bar-height: 0px;
|
||||
--topbar-height: 0px;
|
||||
@@ -94,10 +93,11 @@ body::before {
|
||||
|
||||
.composer-slot {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
left: 50%;
|
||||
width: min(var(--app-viewport-width, 100vw), 430px);
|
||||
transform: translateX(-50%);
|
||||
bottom: calc(var(--toolbar-height, 78px) + env(safe-area-inset-bottom));
|
||||
padding: 0 12px 8px;
|
||||
padding: 0 12px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -115,20 +115,42 @@ body::before {
|
||||
transition: opacity 0.18s ease, transform 0.18s ease;
|
||||
}
|
||||
|
||||
body.chat-keyboard-open .screen-content {
|
||||
bottom: calc(var(--composer-height, 0px) + max(var(--toolbar-height, 78px), var(--keyboard-offset, 0px)));
|
||||
padding-bottom: calc(14px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
body.chat-keyboard-open .composer-slot {
|
||||
bottom: max(var(--toolbar-height, 78px), var(--keyboard-offset, 0px));
|
||||
padding-bottom: calc(8px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
body.chat-keyboard-open .toolbar-slot {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
body.chat-topbar-overlay .topbar-slot {
|
||||
position: fixed;
|
||||
top: var(--call-minimized-bar-height, 0px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: min(100vw, 430px);
|
||||
margin: 0 auto;
|
||||
transform: none;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
body.chat-topbar-overlay .screen-content {
|
||||
top: calc(var(--call-minimized-bar-height, 0px) + var(--topbar-height, 0px));
|
||||
bottom: calc(var(--toolbar-height, 78px) + var(--composer-height, 0px));
|
||||
}
|
||||
|
||||
body.chat-topbar-overlay .composer-slot {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: min(var(--app-viewport-width, 100vw), 430px);
|
||||
bottom: calc(var(--toolbar-height, 78px) + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
/* При открытой клавиатуре toolbar остаётся на физическом дне экрана и
|
||||
перекрывается клавиатурой. Composer прижимается ровно к верхней границе
|
||||
visualViewport, а область сообщений заканчивается прямо над composer. */
|
||||
.app-shell.keyboard-open .toolbar-slot {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
body.chat-topbar-overlay .app-shell.keyboard-open .composer-slot {
|
||||
bottom: var(--keyboard-offset, 0px);
|
||||
}
|
||||
|
||||
body.chat-topbar-overlay .app-shell.keyboard-open .screen-content {
|
||||
bottom: calc(var(--keyboard-offset, 0px) + var(--composer-height, 0px));
|
||||
}
|
||||
|
||||
.connection-retry-banner {
|
||||
@@ -177,3 +199,12 @@ body.chat-keyboard-open .toolbar-slot {
|
||||
border-radius: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Android keyboard: composer touches the keyboard edge; only the composer moves. */
|
||||
body.chat-topbar-overlay .app-shell.keyboard-open .composer-slot {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
body.chat-topbar-overlay .app-shell.keyboard-open .composer-slot .dm-chat-input {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user