SHA256
Зафиксировали текущие изменения UI и документации
This commit is contained in:
AidarKC
@@ -9695,3 +9695,243 @@ body.chat-topbar-overlay .composer-slot > * {
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
/* ===== Единая полировка меню, DM и управляющих кнопок (2026-08-26) ===== */
|
||||
|
||||
/* Центральная вкладка остаётся на прежней оси иконок, но имеет большую
|
||||
* интерактивную область; подпись опущена ниже и больше не заходит на логотип. */
|
||||
.toolbar-btn-network {
|
||||
width: calc(100% + 6px);
|
||||
min-height: 58px;
|
||||
margin-inline: -3px;
|
||||
}
|
||||
|
||||
.toolbar-btn-network > span:last-child {
|
||||
display: block;
|
||||
position: relative;
|
||||
transform: translateY(7px);
|
||||
}
|
||||
|
||||
/* Общая круглая кнопка прокрутки. Её цвет задаётся --shine-action-blue. */
|
||||
.scroll-to-bottom-btn {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
right: 16px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.scroll-to-bottom-btn__icon {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Один визуальный язык для меню профиля, чатов и каналов. */
|
||||
.dm-head-menu,
|
||||
.channel-menu-wrap,
|
||||
.dm-message-actions-menu {
|
||||
min-width: 196px;
|
||||
padding: 6px;
|
||||
gap: 2px;
|
||||
border: 1px solid rgba(92, 190, 255, 0.22);
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(155deg, rgba(19, 27, 42, 0.97), rgba(7, 12, 22, 0.98));
|
||||
box-shadow:
|
||||
0 18px 42px rgba(0, 0, 0, 0.48),
|
||||
0 0 24px rgba(39, 141, 255, 0.10),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
backdrop-filter: blur(20px) saturate(125%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(125%);
|
||||
}
|
||||
|
||||
/* У меню больше нет «облачного» треугольного хвостика. */
|
||||
.dm-head-menu::before {
|
||||
display: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
.dm-head-menu-item,
|
||||
.channel-menu-item,
|
||||
.dm-message-action-btn {
|
||||
width: 100%;
|
||||
min-height: 42px;
|
||||
padding: 0 11px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
color: #f4f8ff;
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dm-head-menu-item:hover,
|
||||
.dm-head-menu-item:focus-visible,
|
||||
.channel-menu-item:hover,
|
||||
.channel-menu-item:focus-visible,
|
||||
.dm-message-action-btn:hover,
|
||||
.dm-message-action-btn:focus-visible {
|
||||
outline: none;
|
||||
background: rgba(39, 141, 255, 0.12);
|
||||
}
|
||||
|
||||
.dm-head-menu-item svg,
|
||||
.dm-head-menu-item img,
|
||||
.channel-menu-icon,
|
||||
.dm-menu-icon,
|
||||
.dm-menu-image-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
min-width: 18px;
|
||||
flex: 0 0 18px;
|
||||
object-fit: contain;
|
||||
color: #65b7ff;
|
||||
filter: drop-shadow(0 0 5px rgba(39, 141, 255, 0.28));
|
||||
}
|
||||
|
||||
.profile-head-menu .profile-head-menu-item img {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
min-width: 17px;
|
||||
flex-basis: 17px;
|
||||
}
|
||||
|
||||
.channel-menu-wrap--portal {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.channel-menu-divider {
|
||||
margin: 4px 8px !important;
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
.channel-menu-item.destructive,
|
||||
.dm-message-action-btn--danger {
|
||||
color: #ffb7c5;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.channel-menu-toggle {
|
||||
min-height: 42px;
|
||||
padding: 0 11px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.channel-menu-toggle-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.dm-message-actions-menu {
|
||||
width: min(78vw, 240px);
|
||||
}
|
||||
|
||||
.dm-user-identity-menu {
|
||||
width: 196px;
|
||||
}
|
||||
|
||||
.dm-user-menu-layer {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.chat-header-login-btn {
|
||||
padding: 4px 7px;
|
||||
min-height: 34px;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Поле сообщения занимает почти всю ширину; действия прижаты к правому краю. */
|
||||
body.chat-topbar-overlay .composer-slot {
|
||||
padding-left: 0;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.dm-chat-input {
|
||||
gap: 4px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.dm-actions-col {
|
||||
grid-template-columns: repeat(2, 43px);
|
||||
grid-template-rows: 46px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.dm-chat-input--multiline .dm-actions-col {
|
||||
grid-template-columns: 43px;
|
||||
}
|
||||
|
||||
.dm-emoji-btn,
|
||||
.dm-send-icon-btn {
|
||||
min-width: 43px;
|
||||
width: 43px;
|
||||
}
|
||||
|
||||
/* Loader не имеет права участвовать в растяжении пустого flex-контейнера. */
|
||||
.dm-history-loader {
|
||||
flex: 0 0 34px;
|
||||
align-self: center;
|
||||
width: max-content;
|
||||
max-width: calc(100% - 24px);
|
||||
height: 34px;
|
||||
min-height: 34px;
|
||||
max-height: 34px;
|
||||
top: calc(var(--topbar-height, 64px) + 8px);
|
||||
margin: 0 auto -4px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.dm-history-loader__pill {
|
||||
flex: 0 0 auto;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
/* «Личные»: широкие, низкие и более плотные плитки. */
|
||||
.dm-list-screen .dm-list {
|
||||
width: calc(100% + 16px);
|
||||
margin-inline: -8px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.dm-list-screen .dm-dialog-card {
|
||||
grid-template-columns: 50px minmax(0, 1fr) auto;
|
||||
min-height: 54px;
|
||||
margin: 0;
|
||||
padding: 5px 6px 5px 4px;
|
||||
gap: 8px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.dm-list-screen .dm-av,
|
||||
.dm-list-screen .dm-av .avatar,
|
||||
.dm-list-screen .list-item .avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
min-width: 48px;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.dm-list-screen .dm-row-main,
|
||||
.dm-list-screen .dm-row-meta-col {
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
.dm-list-screen .dm-dialog-card {
|
||||
grid-template-columns: 50px minmax(0, 1fr) auto;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user