SHA256
Доработать аватары и меню UI
This commit is contained in:
@@ -204,3 +204,20 @@
|
||||
drop-shadow(0 0 5px rgba(110, 205, 255, 0.82))
|
||||
drop-shadow(0 0 10px rgba(72, 145, 255, 0.42)) !important;
|
||||
}
|
||||
|
||||
/* Личный чат: нижние иконки используют ту же бело-голубую роль, что и верхний toolbar. */
|
||||
:root .dm-chat-input button.dm-emoji-btn,
|
||||
:root .dm-chat-input button.dm-send-btn,
|
||||
:root .dm-chat-input button.dm-edit-banner__close,
|
||||
:root .dm-chat-input button.dm-emoji-btn:hover,
|
||||
:root .dm-chat-input button.dm-send-btn:hover,
|
||||
:root .dm-chat-input button.dm-edit-banner__close:hover,
|
||||
:root .dm-chat-input button.dm-emoji-btn:focus,
|
||||
:root .dm-chat-input button.dm-send-btn:focus,
|
||||
:root .dm-chat-input button.dm-edit-banner__close:focus {
|
||||
color: #F7FBFF !important;
|
||||
text-shadow:
|
||||
0 0 5px rgba(92, 190, 255, 0.72),
|
||||
0 0 12px rgba(72, 145, 255, 0.34) !important;
|
||||
filter: drop-shadow(0 0 4px rgba(92, 190, 255, 0.46)) !important;
|
||||
}
|
||||
|
||||
@@ -8728,3 +8728,407 @@ body.chat-topbar-overlay .app-shell.keyboard-open .scroll-to-bottom-btn {
|
||||
.notifications-screen .notification-feed-tabs .notification-tab-btn {
|
||||
min-width: 92px;
|
||||
}
|
||||
|
||||
/* ===== Единый шаблон аватаров (2026-08-22) =====
|
||||
* Базовая аватарка повторяет принцип орбов экрана «Связи»:
|
||||
* - fallback: нейтральный серый круг + белые инициалы;
|
||||
* - фото занимает тот же внутренний круг;
|
||||
* - стеклянный внешний круг остаётся поверх всегда, независимо от наличия фото;
|
||||
* - усиленное свечение включается модификатором .avatar-glow, не меняя геометрию аватара.
|
||||
*/
|
||||
.avatar.avatar-image.avatar-framed {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
isolation: isolate;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #ffffff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.avatar.avatar-image.avatar-framed > .avatar-fallback,
|
||||
.avatar.avatar-image.avatar-framed > .avatar-photo {
|
||||
grid-area: 1 / 1;
|
||||
place-self: center;
|
||||
width: 92.5%;
|
||||
height: 92.5%;
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.avatar.avatar-image.avatar-framed > .avatar-fallback {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
background: #454b55;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
||||
inset 0 -8px 16px rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
.avatar.avatar-image.avatar-framed > .avatar-photo {
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
opacity: 0;
|
||||
transition: opacity 120ms ease;
|
||||
}
|
||||
|
||||
.avatar.avatar-image.avatar-framed.has-image > .avatar-photo {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.avatar.avatar-image.avatar-framed.has-image > .avatar-fallback {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Второй круг — тот же стеклянный overlay, который используется в «Связях». */
|
||||
.avatar.avatar-image.avatar-framed::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 50% auto auto 50%;
|
||||
width: 119%;
|
||||
height: 119%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: url('../assets/glass_overlay_faithful.png') center / contain no-repeat;
|
||||
box-shadow: none;
|
||||
opacity: 1;
|
||||
pointer-events: none;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* Опциональный усиленный ореол для состояний «сияющий» и будущих экранов. */
|
||||
.avatar.avatar-image.avatar-framed.avatar-glow::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -16%;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(139, 232, 255, 0.36) 0%, rgba(116, 217, 255, 0.14) 48%, rgba(116, 217, 255, 0) 74%);
|
||||
filter: blur(3px);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
/* ===== UI cleanup: main tabs, shared overflow menu and DM list (2026-08-22) ===== */
|
||||
/* Единое вертикальное троеточие для всех overflow/menu-кнопок. */
|
||||
.app-overflow-dots {
|
||||
width: 8px;
|
||||
height: 24px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3.5px;
|
||||
color: inherit;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.app-overflow-dots i {
|
||||
display: block;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
flex: 0 0 4px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
box-shadow:
|
||||
0 0 5px rgba(92, 190, 255, 0.72),
|
||||
0 0 10px rgba(72, 145, 255, 0.34);
|
||||
}
|
||||
|
||||
.channel-menu-trigger .app-overflow-dots,
|
||||
.arweave-uploads-menu-btn .app-overflow-dots {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/* Пустые каналы: больше никакой золотой вставки/рамки. Сообщение оформлено
|
||||
* как спокойный матовый chip из панели фильтров «Связей». */
|
||||
.channels-screen--list .channels-empty-state.channels-empty-state--silent {
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
margin: 12px 0 !important;
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
border-radius: 0;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.channels-screen--list .channels-empty-state.channels-empty-state--silent .meta-muted {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: auto;
|
||||
max-width: calc(100% - 24px);
|
||||
min-height: 30px;
|
||||
margin: 0;
|
||||
padding: 7px 14px;
|
||||
border: 0.5px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
|
||||
color: #cfe0ff;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* «Личные»: вместо жёлтого шестиугольника — текущий аватар пользователя. */
|
||||
.dm-head-avatar-slot {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
min-width: 38px;
|
||||
min-height: 38px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.dm-head-avatar.avatar,
|
||||
.dm-head-avatar.avatar-image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Список личных чатов: без цветной границы карточки, компактная ава как в шапке
|
||||
* самого чата (28px), а дата/время стоит на строке превью. */
|
||||
.dm-list-screen .dm-dialog-card {
|
||||
grid-template-columns: 38px minmax(0, 1fr) auto;
|
||||
gap: 10px;
|
||||
min-height: 58px;
|
||||
padding: 8px 10px;
|
||||
border: 0;
|
||||
border-radius: 18px;
|
||||
box-shadow: none;
|
||||
background: rgba(7, 10, 18, 0.42);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.dm-list-screen .dm-card--family,
|
||||
.dm-list-screen .dm-card--shining {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.dm-list-screen .dm-av {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
min-width: 34px;
|
||||
min-height: 34px;
|
||||
}
|
||||
|
||||
.dm-list-screen .dm-av .avatar,
|
||||
.dm-list-screen .list-item .avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
min-width: 28px;
|
||||
min-height: 28px;
|
||||
font-size: 10px;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.dm-list-screen .dm-row-main,
|
||||
.dm-list-screen .dm-row-meta-col {
|
||||
display: grid;
|
||||
grid-template-rows: 22px 20px;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
min-height: 42px;
|
||||
}
|
||||
|
||||
.dm-list-screen .dm-row-titlewrap {
|
||||
flex-wrap: nowrap;
|
||||
min-height: 22px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dm-list-screen .dm-row-last-message {
|
||||
align-self: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.dm-list-screen .dm-row-meta-col {
|
||||
align-self: center;
|
||||
justify-items: end;
|
||||
justify-content: initial;
|
||||
}
|
||||
|
||||
.dm-list-screen .dm-unread-badge,
|
||||
.dm-list-screen .dm-row-meta-spacer {
|
||||
grid-row: 1;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.dm-list-screen .dm-row-time {
|
||||
grid-row: 2;
|
||||
align-self: center;
|
||||
line-height: 20px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dm-list-screen .dm-row-meta-line {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.dm-list-screen .dm-chevron {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
.dm-list-screen .dm-dialog-card {
|
||||
grid-template-columns: 38px minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.dm-list-screen .dm-row-meta-col {
|
||||
grid-column: 3;
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Личные сообщения: финальная чистка чата ===== */
|
||||
/* В списке «Личные» слева в шапке остаётся только аватар текущего пользователя. */
|
||||
.topbar-slot .dm-list-screen .dm-head-brand {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
/* Пузырям сообщений не нужна отдельная обводка: направление читается по фону и геометрии. */
|
||||
.dm-chat-screen .bubble,
|
||||
.dm-chat-screen .bubble.in,
|
||||
.dm-chat-screen .bubble.out,
|
||||
.dm-chat-screen .bubble.call-tech {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.dm-chat-screen .bubble-reply-preview {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Нижняя панель чата повторяет бело-голубую цветовую роль верхнего toolbar вместо золота. */
|
||||
.dm-chat-input {
|
||||
border-top: 1px solid rgba(92, 190, 255, 0.12);
|
||||
}
|
||||
|
||||
.dm-chat-input .dm-input {
|
||||
border-color: rgba(247, 251, 255, 0.12);
|
||||
color: var(--app-topbar-gold);
|
||||
text-shadow:
|
||||
0 0 4px rgba(92, 190, 255, 0.34),
|
||||
0 0 10px rgba(72, 145, 255, 0.16);
|
||||
caret-color: var(--app-topbar-gold);
|
||||
}
|
||||
|
||||
.dm-chat-input .dm-input:focus {
|
||||
border-color: rgba(92, 190, 255, 0.28);
|
||||
box-shadow: 0 0 0 1px rgba(92, 190, 255, 0.08);
|
||||
}
|
||||
|
||||
.dm-chat-input .dm-input::placeholder {
|
||||
color: rgba(247, 251, 255, 0.46);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.dm-chat-input .dm-emoji-btn,
|
||||
.dm-chat-input .dm-send-btn,
|
||||
.dm-chat-input .dm-edit-banner__close {
|
||||
color: var(--app-topbar-gold) !important;
|
||||
text-shadow:
|
||||
0 0 5px var(--app-topbar-blue-glow),
|
||||
0 0 12px var(--app-topbar-blue-glow-soft) !important;
|
||||
filter: drop-shadow(0 0 4px rgba(92, 190, 255, 0.42));
|
||||
}
|
||||
|
||||
.dm-chat-input .dm-send-btn {
|
||||
border-color: rgba(247, 251, 255, 0.12);
|
||||
background: rgba(92, 190, 255, 0.08);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.dm-chat-input .dm-edit-banner {
|
||||
border-color: rgba(92, 190, 255, 0.18);
|
||||
background: rgba(92, 190, 255, 0.08);
|
||||
color: var(--app-topbar-gold);
|
||||
}
|
||||
|
||||
.dm-chat-input .emoji-picker-tab.is-active {
|
||||
background: rgba(92, 190, 255, 0.12);
|
||||
}
|
||||
|
||||
|
||||
/* ===== DM + Channels polish (2026-08-22 13:22) ===== */
|
||||
/* «Личные»: аватар основной вкладки стоит ровно на той же горизонтальной позиции,
|
||||
* что и аватар собеседника в открытом чате: после 40px back-slot + 8px gap. */
|
||||
.topbar-slot .dm-list-screen .dm-head-brand {
|
||||
margin-left: 48px;
|
||||
}
|
||||
|
||||
.dm-head-avatar-slot,
|
||||
.dm-head-avatar.avatar,
|
||||
.dm-head-avatar.avatar-image {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
min-width: 28px;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.dm-head-avatar.avatar,
|
||||
.dm-head-avatar.avatar-image {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* Composer должен быть продолжением основного фона: без верхнего разделителя
|
||||
* и без отдельной затемнённой/стеклянной подложки. */
|
||||
.dm-chat-input {
|
||||
border-top: 0 !important;
|
||||
background: transparent !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
/* Каналы: счётчик непрочитанных — целиком голубой светящийся овал,
|
||||
* цифра остаётся обычной белой, без собственного glow. */
|
||||
.channel-row-count {
|
||||
background: rgba(92, 190, 255, 0.16);
|
||||
border: 1px solid rgba(92, 190, 255, 0.56);
|
||||
color: #FFFFFF;
|
||||
box-shadow:
|
||||
0 0 7px rgba(92, 190, 255, 0.58),
|
||||
0 0 15px rgba(72, 145, 255, 0.28),
|
||||
inset 0 0 8px rgba(92, 190, 255, 0.10);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* Каналы: логин/техническая подпись и overflow-троеточие используют
|
||||
* тот же основной белый + голубое свечение, что верхний toolbar. */
|
||||
.channel-row-technical {
|
||||
font-family: var(--font-main);
|
||||
font-weight: 600;
|
||||
color: var(--app-topbar-gold);
|
||||
text-shadow:
|
||||
0 0 5px var(--app-topbar-blue-glow),
|
||||
0 0 12px var(--app-topbar-blue-glow-soft);
|
||||
}
|
||||
|
||||
.channel-menu-trigger {
|
||||
color: var(--app-topbar-gold);
|
||||
text-shadow:
|
||||
0 0 5px var(--app-topbar-blue-glow),
|
||||
0 0 12px var(--app-topbar-blue-glow-soft);
|
||||
}
|
||||
|
||||
@@ -198,7 +198,7 @@
|
||||
}
|
||||
.fg-orb-host .fg-pngorb-init {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: #26344a; color: #cfe0ff; font-weight: 600; font-size: 20px;
|
||||
background: #454b55; color: #ffffff; font-weight: 600; font-size: 20px;
|
||||
}
|
||||
|
||||
.fg-node.is-family .node-dot {
|
||||
|
||||
Reference in New Issue
Block a user