SHA256
Зафиксировали текущие изменения UI и документации
This commit is contained in:
AidarKC
@@ -221,3 +221,98 @@
|
||||
0 0 12px rgba(72, 145, 255, 0.34) !important;
|
||||
filter: drop-shadow(0 0 4px rgba(92, 190, 255, 0.46)) !important;
|
||||
}
|
||||
|
||||
/* Второй общий тип кнопок. Цвет меняется одной переменной --shine-action-blue
|
||||
* в main.css. Экран настройки сервера намеренно не получает этот класс. */
|
||||
:root .screen-content.filled-action-buttons button:not(.icon-btn):not(.shine-local-demo-btn),
|
||||
:root .screen-content.filled-action-buttons a.primary-btn,
|
||||
:root .screen-content.filled-action-buttons a.secondary-btn,
|
||||
:root .screen-content.filled-action-buttons a.ghost-btn,
|
||||
:root .screen-content.filled-action-buttons a.text-btn {
|
||||
color: #ffffff !important;
|
||||
background: var(--shine-action-blue) !important;
|
||||
background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)) !important;
|
||||
border: 0 !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255,255,255,.24),
|
||||
0 8px 22px rgba(var(--shine-action-blue-rgb), .24) !important;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,.18) !important;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
:root .screen-content.filled-action-buttons button:not(.icon-btn):not(.shine-local-demo-btn):hover,
|
||||
:root .screen-content.filled-action-buttons a.primary-btn:hover,
|
||||
:root .screen-content.filled-action-buttons a.secondary-btn:hover,
|
||||
:root .screen-content.filled-action-buttons a.ghost-btn:hover,
|
||||
:root .screen-content.filled-action-buttons a.text-btn:hover {
|
||||
background: var(--shine-action-blue-hover) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255,255,255,.28),
|
||||
0 10px 26px rgba(var(--shine-action-blue-rgb), .32) !important;
|
||||
}
|
||||
|
||||
:root .screen-content.filled-action-buttons button:not(.icon-btn):not(.shine-local-demo-btn):active,
|
||||
:root .screen-content.filled-action-buttons a.primary-btn:active,
|
||||
:root .screen-content.filled-action-buttons a.secondary-btn:active,
|
||||
:root .screen-content.filled-action-buttons a.ghost-btn:active,
|
||||
:root .screen-content.filled-action-buttons a.text-btn:active {
|
||||
background: var(--shine-action-blue-pressed) !important;
|
||||
box-shadow: inset 0 3px 8px rgba(0,0,0,.26) !important;
|
||||
}
|
||||
|
||||
:root .screen-content.filled-action-buttons button:not(.icon-btn):not(.shine-local-demo-btn):disabled {
|
||||
color: rgba(255,255,255,.58) !important;
|
||||
background: rgba(var(--shine-action-blue-rgb), .42) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Специальная системная кнопка должна сохранять синюю круглую подложку,
|
||||
* несмотря на глобальный borderless-reset выше. */
|
||||
:root button.scroll-to-bottom-btn,
|
||||
:root button.scroll-to-bottom-btn:hover,
|
||||
:root button.scroll-to-bottom-btn:focus,
|
||||
:root button.scroll-to-bottom-btn:focus-visible {
|
||||
color: #ffffff !important;
|
||||
background: var(--shine-action-blue) !important;
|
||||
border: 0 !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255,255,255,.25),
|
||||
0 10px 26px rgba(var(--shine-action-blue-rgb), .34) !important;
|
||||
filter: none !important;
|
||||
}
|
||||
|
||||
:root button.scroll-to-bottom-btn:hover {
|
||||
background: var(--shine-action-blue-hover) !important;
|
||||
}
|
||||
|
||||
:root button.scroll-to-bottom-btn:active {
|
||||
background: var(--shine-action-blue-pressed) !important;
|
||||
box-shadow: inset 0 3px 9px rgba(0,0,0,.28) !important;
|
||||
}
|
||||
|
||||
/* Пункты унифицированных выпадающих меню остаются без постоянной заливки,
|
||||
* но получают общую синюю реакцию при наведении/фокусе. */
|
||||
:root button.dm-head-menu-item,
|
||||
:root button.channel-menu-item,
|
||||
:root button.dm-message-action-btn {
|
||||
justify-content: flex-start !important;
|
||||
color: #f4f8ff !important;
|
||||
background: transparent !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
:root button.dm-head-menu-item:hover,
|
||||
:root button.dm-head-menu-item:focus-visible,
|
||||
:root button.channel-menu-item:hover,
|
||||
:root button.channel-menu-item:focus-visible,
|
||||
:root button.dm-message-action-btn:hover,
|
||||
:root button.dm-message-action-btn:focus-visible {
|
||||
background: rgba(var(--shine-action-blue-rgb), .12) !important;
|
||||
box-shadow: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
:root button.channel-menu-item.destructive,
|
||||
:root button.dm-message-action-btn--danger {
|
||||
color: #ffb7c5 !important;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,6 +11,11 @@
|
||||
--accent-soft: rgba(217, 181, 111, 0.18);
|
||||
--danger: #ff718f;
|
||||
--ok: #84f4a1;
|
||||
/* Единый цвет основных действий: стартовые/регистрационные кнопки и scroll-down. */
|
||||
--shine-action-blue: #278dff;
|
||||
--shine-action-blue-hover: #43a2ff;
|
||||
--shine-action-blue-pressed: #1973db;
|
||||
--shine-action-blue-rgb: 39, 141, 255;
|
||||
--radius-lg: 18px;
|
||||
--radius-md: 12px;
|
||||
--radius-sm: 9px;
|
||||
|
||||
Reference in New Issue
Block a user