SHA256
Обновить UI профиля и навигации
This commit is contained in:
@@ -0,0 +1,316 @@
|
||||
/* Bottom toolbar component styles. */
|
||||
|
||||
.toolbar-item,
|
||||
.toolbar-action,
|
||||
.toolbar-button {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
/* Базовая поверхность toolbar: финальные effective declarations Этапа 3.1. */
|
||||
.toolbar {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 4px;
|
||||
min-height: 82px;
|
||||
padding: 9px 9px 6px;
|
||||
align-items: end;
|
||||
overflow: visible;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 18px 32px rgba(2, 6, 13, 0.62);
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
min-height: 52px;
|
||||
padding: 4px 3px 2px;
|
||||
display: grid;
|
||||
align-content: end;
|
||||
justify-items: center;
|
||||
gap: 2px;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
background: transparent;
|
||||
color: #b8c7ea;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 90ms ease,
|
||||
box-shadow 90ms ease,
|
||||
background-color 90ms ease,
|
||||
color 120ms ease;
|
||||
}
|
||||
|
||||
.toolbar-btn.active {
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
color: #D4AF37;
|
||||
}
|
||||
|
||||
.toolbar-btn.active span:first-child {
|
||||
color: #D4AF37;
|
||||
filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.6));
|
||||
}
|
||||
|
||||
.toolbar-btn.active span:last-child {
|
||||
color: #D4AF37;
|
||||
text-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
|
||||
}
|
||||
|
||||
.toolbar-btn:active {
|
||||
transform: translateY(1px) scale(0.96);
|
||||
background: rgba(0, 0, 0, 0.14);
|
||||
box-shadow:
|
||||
inset 0 4px 10px rgba(0, 0, 0, 0.62),
|
||||
inset 0 -1px 2px rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.toolbar-btn-network {
|
||||
position: relative;
|
||||
width: calc(100% + 6px);
|
||||
min-height: 72px;
|
||||
margin-inline: -3px;
|
||||
padding-bottom: 2px;
|
||||
align-content: end;
|
||||
overflow: visible;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
.toolbar-label-wrap {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
|
||||
.toolbar-btn-profile {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.toolbar-btn-messages {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.toolbar-unread-badge {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 6px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 999px;
|
||||
padding: 0 5px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f07f8a;
|
||||
color: #fff2f4;
|
||||
border: 1px solid rgba(255, 222, 227, 0.55);
|
||||
box-shadow: 0 4px 10px rgba(152, 36, 52, 0.35);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
.toolbar-btn-profile .toolbar-label-wrap {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
.toolbar-btn-profile .toolbar-connection-indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.toolbar-connection-indicator {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
min-height: 9px;
|
||||
}
|
||||
|
||||
|
||||
.toolbar-connection-text {
|
||||
display: none;
|
||||
font-size: 8px;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: lowercase;
|
||||
color: rgba(191, 213, 255, 0.8);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
|
||||
.toolbar-connection-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 999px;
|
||||
background: rgba(148, 162, 195, 0.65);
|
||||
box-shadow: 0 0 0 2px rgba(97, 116, 156, 0.25);
|
||||
transition: 0.2s ease;
|
||||
}
|
||||
|
||||
|
||||
.toolbar-connection-indicator.is-connected .toolbar-connection-text {
|
||||
opacity: 1;
|
||||
color: rgba(145, 255, 192, 0.9);
|
||||
}
|
||||
|
||||
|
||||
.toolbar-connection-indicator.is-connected .toolbar-connection-dot {
|
||||
background: #71e9a5;
|
||||
box-shadow: 0 0 0 2px rgba(72, 201, 134, 0.28);
|
||||
}
|
||||
|
||||
|
||||
.toolbar-connection-indicator.is-connecting .toolbar-connection-dot {
|
||||
background: #f0c56b;
|
||||
}
|
||||
|
||||
|
||||
.toolbar-connection-indicator.is-disconnected .toolbar-connection-dot {
|
||||
background: #e48792;
|
||||
box-shadow: 0 0 0 2px rgba(228, 135, 146, 0.24);
|
||||
}
|
||||
|
||||
|
||||
/* Неоновые PNG-иконки вкладок (свечение запечено в PNG). Цвет доп.свечения — var --tab-glow (инлайн на img). */
|
||||
.toolbar-icon-img {
|
||||
--tab-icon-size: 27px; /* крупнее (бар-иконки); герой ниже ещё больше */
|
||||
width: var(--tab-icon-size);
|
||||
height: var(--tab-icon-size);
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
transition: transform .12s ease, filter .15s ease;
|
||||
}
|
||||
|
||||
/* Активная вкладка — лёгкое доп. свечение (подпись подсвечивается правилом .active span:last-child выше). */
|
||||
.toolbar-btn.active .toolbar-icon-img {
|
||||
filter: drop-shadow(0 0 5px var(--tab-glow)) brightness(1.08);
|
||||
}
|
||||
|
||||
/* Нажатие — вдавливание + краткая вспышка свечения; на отпускании возврат. */
|
||||
.toolbar-btn:active .toolbar-icon-img {
|
||||
transform: scale(0.9);
|
||||
filter: drop-shadow(0 0 9px var(--tab-glow)) brightness(1.2);
|
||||
}
|
||||
|
||||
/* «Связи» — герой: крупнее и всегда чуть светится сильнее остальных; press-feedback ярче. */
|
||||
.toolbar-btn-hero .toolbar-icon-img {
|
||||
/* Крупнее ВИЗУАЛЬНО через transform (origin center) — раскладочный размер как у остальных (27px),
|
||||
поэтому иконка остаётся на одной линии с другими, а не задирается вверх. */
|
||||
transform: scale(1.63); /* ≈44px при базовых 27px */
|
||||
filter: brightness(1.05); /* CSS-ореол убран — светится только сама PNG (логотип не тронут) */
|
||||
}
|
||||
|
||||
.toolbar-btn-hero.active .toolbar-icon-img {
|
||||
filter: brightness(1.12);
|
||||
}
|
||||
|
||||
.toolbar-btn-hero:active .toolbar-icon-img {
|
||||
transform: scale(1.47); /* 1.63 × 0.9 (нажатие) */
|
||||
filter: brightness(1.25); /* нажатие — только подсветление, без ореола */
|
||||
}
|
||||
|
||||
|
||||
.toolbar-channels-hold-overlay {
|
||||
position: fixed;
|
||||
z-index: 1200;
|
||||
transform: translate(-50%, -100%);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(68px, 1fr));
|
||||
gap: 6px;
|
||||
padding: 8px;
|
||||
border-radius: 10px;
|
||||
background: rgba(15, 18, 31, 0.94);
|
||||
border: 1px solid rgba(160, 175, 220, 0.35);
|
||||
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
|
||||
.toolbar-channels-hold-item {
|
||||
border: 1px solid rgba(160, 175, 220, 0.35);
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: #e9efff;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
min-height: 34px;
|
||||
padding: 6px 8px;
|
||||
transition: background-color 0.12s ease, border-color 0.12s ease;
|
||||
}
|
||||
|
||||
|
||||
.toolbar-channels-hold-item.is-active {
|
||||
background: rgba(133, 170, 255, 0.34);
|
||||
border-color: rgba(197, 219, 255, 0.75);
|
||||
}
|
||||
|
||||
|
||||
/* Cosmic styling for the "Связи" toolbar button */
|
||||
/* нет рамки/подсветки фокуса ВОКРУГ кнопки — светится только сама иконка (её drop-shadow) */
|
||||
.toolbar-btn-network:focus,
|
||||
.toolbar-btn-network:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
.toolbar-btn-network::before {
|
||||
content: "";
|
||||
display: none; /* подсветка-подложка вокруг иконки «Связи» убрана по запросу (иконка и её drop-shadow-ореол не тронуты) */
|
||||
position: absolute;
|
||||
inset: 6px;
|
||||
border-radius: 10px;
|
||||
pointer-events: none;
|
||||
opacity: 0.42;
|
||||
background:
|
||||
radial-gradient(circle at 24% 24%, rgba(112, 170, 255, 0.35), transparent 56%),
|
||||
radial-gradient(circle at 78% 72%, rgba(197, 132, 255, 0.24), transparent 60%);
|
||||
filter: blur(8px);
|
||||
}
|
||||
|
||||
|
||||
.toolbar-btn-network span:first-child {
|
||||
color: #9eb3e8;
|
||||
filter: drop-shadow(0 0 5px rgba(123, 170, 255, 0.24));
|
||||
}
|
||||
|
||||
|
||||
/* ===== Единая полировка меню, DM и управляющих кнопок (2026-08-26) ===== */
|
||||
|
||||
/* Центральная вкладка остаётся на прежней оси иконок, но имеет большую
|
||||
* интерактивную область; подпись опущена ниже и больше не заходит на логотип. */
|
||||
.toolbar-btn-network > span:last-child {
|
||||
display: block;
|
||||
position: relative;
|
||||
transform: translateY(-2px);
|
||||
line-height: 1.05;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
|
||||
/* Toolbar: reserve enough vertical room for the Connections label and safe area. */
|
||||
:root { --toolbar-height: 88px; }
|
||||
|
||||
.toolbar-slot {
|
||||
min-height: calc(88px + env(safe-area-inset-bottom));
|
||||
overflow: visible;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.toolbar-btn-network .toolbar-icon-img {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
Reference in New Issue
Block a user