SHA256
Merge origin/main into ui-artem
This commit is contained in:
+133
-265
@@ -222,288 +222,156 @@
|
||||
filter: drop-shadow(0 0 4px rgba(92, 190, 255, 0.46)) !important;
|
||||
}
|
||||
|
||||
/* ===== Dropdown menu polish: persistent overflow press + text-only glowing rows ===== */
|
||||
/* Menu rows stay visually transparent in every interaction state. The menu panel itself
|
||||
* remains translucent, while each action is represented only by its glowing label. */
|
||||
:root .dm-head-menu-item,
|
||||
:root .dm-head-menu-item:hover,
|
||||
:root .dm-head-menu-item:focus,
|
||||
:root .dm-head-menu-item:focus-visible,
|
||||
:root .dm-head-menu-item:active,
|
||||
:root .channel-menu-item,
|
||||
:root .channel-menu-item:hover,
|
||||
:root .channel-menu-item:focus,
|
||||
:root .channel-menu-item:focus-visible,
|
||||
:root .channel-menu-item:active,
|
||||
:root .channel-menu-item.destructive,
|
||||
:root .channel-menu-item.destructive:hover,
|
||||
:root .channel-menu-item.destructive:focus-visible,
|
||||
:root .channel-menu-item.destructive:active {
|
||||
color: #F7FBFF !important;
|
||||
background: transparent !important;
|
||||
background-image: none !important;
|
||||
border: 0 !important;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
transform: none !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.34)) !important;
|
||||
}
|
||||
|
||||
/* Hover/focus is expressed only by a slightly stronger glyph glow, never a row plate. */
|
||||
:root .dm-head-menu-item:hover,
|
||||
:root .dm-head-menu-item:focus-visible,
|
||||
:root .channel-menu-item:hover,
|
||||
:root .channel-menu-item:focus-visible {
|
||||
color: #FFFFFF !important;
|
||||
text-shadow:
|
||||
0 0 6px rgba(110, 205, 255, 0.86),
|
||||
0 0 15px rgba(72, 145, 255, 0.46) !important;
|
||||
filter: drop-shadow(0 0 5px rgba(92, 190, 255, 0.46)) !important;
|
||||
}
|
||||
|
||||
/* Keep the overflow trigger visibly pressed for exactly as long as its menu is open. */
|
||||
:root .topbar-slot .dm-head-menu-btn[aria-expanded='true'],
|
||||
:root .topbar-slot .channels-top-more-btn[aria-expanded='true'],
|
||||
:root .topbar-slot .network-top-more-btn[aria-expanded='true'],
|
||||
:root .network-header-overlay .network-top-more-btn[aria-expanded='true'] {
|
||||
color: #FFFFFF !important;
|
||||
background: rgba(0, 0, 0, 0.12) !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 3px 8px rgba(0, 0, 0, 0.58),
|
||||
inset 0 -1px 2px rgba(255, 255, 255, 0.08) !important;
|
||||
transform: translateY(1px) scale(0.97) !important;
|
||||
text-shadow:
|
||||
0 0 5px rgba(92, 190, 255, 0.72),
|
||||
0 0 12px rgba(72, 145, 255, 0.34) !important;
|
||||
filter: brightness(0.9) drop-shadow(0 0 4px rgba(92, 190, 255, 0.56)) !important;
|
||||
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;
|
||||
}
|
||||
|
||||
/* ===== Authoritative open-menu trigger state (2026-08-23) =====
|
||||
* A dedicated JS class, not :active/:focus, owns the pressed state while a menu is open.
|
||||
* Kept at the very end of the stylesheet so older compatibility rules cannot cancel it. */
|
||||
:root .dm-head-menu-btn.menu-open-pressed,
|
||||
:root .channels-top-more-btn.menu-open-pressed,
|
||||
:root .network-top-more-btn.menu-open-pressed,
|
||||
:root .topbar-slot .dm-head-menu-btn.menu-open-pressed,
|
||||
:root .topbar-slot .channels-top-more-btn.menu-open-pressed,
|
||||
:root .topbar-slot .network-top-more-btn.menu-open-pressed,
|
||||
:root .network-header-overlay .network-top-more-btn.menu-open-pressed {
|
||||
color: #FFFFFF !important;
|
||||
background: rgba(0, 0, 0, 0.14) !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 3px 8px rgba(0, 0, 0, 0.62),
|
||||
inset 0 -1px 2px rgba(255, 255, 255, 0.09) !important;
|
||||
transform: translateY(1px) scale(0.97) !important;
|
||||
text-shadow:
|
||||
0 0 5px rgba(92, 190, 255, 0.76),
|
||||
0 0 12px rgba(72, 145, 255, 0.38) !important;
|
||||
filter: brightness(0.9) drop-shadow(0 0 4px rgba(92, 190, 255, 0.58)) !important;
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
/* ===== Final dropdown behavior: truly transparent menu + persistent pressed trigger =====
|
||||
* The dropdown itself has no visual surface. Only the global dim layer affects content
|
||||
* behind it. The overflow trigger gets its own inset pseudo-layer so the pressed state
|
||||
* cannot be cancelled by the generic button reset after pointer release. */
|
||||
:root .dm-head-menu,
|
||||
:root .dm-head-menu--portal,
|
||||
:root .channel-menu-wrap,
|
||||
:root .channel-menu-wrap--portal {
|
||||
background: transparent !important;
|
||||
background-color: transparent !important;
|
||||
background-image: none !important;
|
||||
border: 0 !important;
|
||||
outline: 0 !important;
|
||||
box-shadow: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
:root .dm-head-menu::before,
|
||||
:root .dm-head-menu::after,
|
||||
:root .channel-menu-wrap::before,
|
||||
:root .channel-menu-wrap::after,
|
||||
:root .channel-menu-wrap--portal::before,
|
||||
:root .channel-menu-wrap--portal::after {
|
||||
content: none !important;
|
||||
display: none !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* No separator or hover plate: the dropdown is literally labels over faded content. */
|
||||
:root .channel-menu-divider {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:root .dm-head-menu-item,
|
||||
:root .dm-head-menu-item:hover,
|
||||
:root .dm-head-menu-item:focus,
|
||||
:root .dm-head-menu-item:focus-visible,
|
||||
:root .dm-head-menu-item:active,
|
||||
:root .channel-menu-item,
|
||||
:root .channel-menu-item:hover,
|
||||
:root .channel-menu-item:focus,
|
||||
:root .channel-menu-item:focus-visible,
|
||||
:root .channel-menu-item:active,
|
||||
:root .channel-menu-item.destructive,
|
||||
:root .channel-menu-item.destructive:hover,
|
||||
:root .channel-menu-item.destructive:focus-visible,
|
||||
:root .channel-menu-item.destructive:active {
|
||||
background: transparent !important;
|
||||
background-color: transparent !important;
|
||||
background-image: none !important;
|
||||
border: 0 !important;
|
||||
outline: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Keep the channels backdrop out of the toolbar itself, matching the other pages. */
|
||||
:root .channels-menu-overlay {
|
||||
top: calc(var(--topbar-height, 64px) + var(--call-minimized-bar-height, 0px)) !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
background: rgba(0, 0, 0, 0.49) !important;
|
||||
}
|
||||
|
||||
/* Authoritative pressed well. It is independent from :active/:focus and survives until
|
||||
* JS removes menu-open-pressed / aria-expanded=true on actual menu close. */
|
||||
:root .dm-head-menu-btn,
|
||||
:root .channels-top-more-btn,
|
||||
:root .network-top-more-btn {
|
||||
position: relative !important;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
:root .dm-head-menu-btn.menu-open-pressed::before,
|
||||
:root .channels-top-more-btn.menu-open-pressed::before,
|
||||
:root .network-top-more-btn.menu-open-pressed::before,
|
||||
:root .dm-head-menu-btn[aria-expanded='true']::before,
|
||||
:root .channels-top-more-btn[aria-expanded='true']::before,
|
||||
:root .network-top-more-btn[aria-expanded='true']::before {
|
||||
content: '' !important;
|
||||
display: block !important;
|
||||
position: absolute !important;
|
||||
inset: 2px !important;
|
||||
z-index: 0 !important;
|
||||
pointer-events: none !important;
|
||||
border: 0 !important;
|
||||
border-radius: 10px !important;
|
||||
background: rgba(0, 0, 0, 0.18) !important;
|
||||
background-image: none !important;
|
||||
box-shadow:
|
||||
inset 0 4px 10px rgba(0, 0, 0, 0.72),
|
||||
inset 0 -1px 2px rgba(255, 255, 255, 0.10) !important;
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
inset 0 1px 0 rgba(255,255,255,.25),
|
||||
0 10px 26px rgba(var(--shine-action-blue-rgb), .34) !important;
|
||||
filter: none !important;
|
||||
}
|
||||
|
||||
:root .dm-head-menu-btn.menu-open-pressed,
|
||||
:root .channels-top-more-btn.menu-open-pressed,
|
||||
:root .network-top-more-btn.menu-open-pressed,
|
||||
:root .dm-head-menu-btn[aria-expanded='true'],
|
||||
:root .channels-top-more-btn[aria-expanded='true'],
|
||||
:root .network-top-more-btn[aria-expanded='true'] {
|
||||
: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: translateY(1px) scale(0.97) !important;
|
||||
filter: brightness(0.90) drop-shadow(0 0 4px rgba(92, 190, 255, 0.58)) !important;
|
||||
animation: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
:root .dm-head-menu-btn.menu-open-pressed > *,
|
||||
:root .channels-top-more-btn.menu-open-pressed > *,
|
||||
:root .network-top-more-btn.menu-open-pressed > *,
|
||||
:root .dm-head-menu-btn[aria-expanded='true'] > *,
|
||||
:root .channels-top-more-btn[aria-expanded='true'] > *,
|
||||
:root .network-top-more-btn[aria-expanded='true'] > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
:root button.channel-menu-item.destructive,
|
||||
:root button.dm-message-action-btn--danger {
|
||||
color: #ffb7c5 !important;
|
||||
}
|
||||
|
||||
/* ===== Definitive open overflow state + lighter menu dim (2026-08-23) =====
|
||||
* The generic button reset above has specificity 0,4,1, so the persistent
|
||||
* menu state must beat it directly on the real button (not on ::before).
|
||||
* Keep this visually identical to the physical :active press until JS closes the menu. */
|
||||
:root body .topbar-slot button.dm-head-menu-btn.menu-open-pressed,
|
||||
:root body .topbar-slot button.dm-head-menu-btn[aria-expanded='true'],
|
||||
:root body .topbar-slot button.channels-top-more-btn.menu-open-pressed,
|
||||
:root body .topbar-slot button.channels-top-more-btn[aria-expanded='true'],
|
||||
:root body .topbar-slot button.network-top-more-btn.menu-open-pressed,
|
||||
:root body .topbar-slot button.network-top-more-btn[aria-expanded='true'],
|
||||
:root body .network-header-overlay button.network-top-more-btn.menu-open-pressed,
|
||||
:root body .network-header-overlay button.network-top-more-btn[aria-expanded='true'] {
|
||||
color: #ffffff !important;
|
||||
background: rgba(0, 0, 0, 0.12) !important;
|
||||
background-image: none !important;
|
||||
border: 0 !important;
|
||||
/* 2026-08-28: исключения из borderless-reset для явных выборов и действий настроек. */
|
||||
:root body .language-choice-grid button.language-choice-option,
|
||||
:root body .language-choice-grid button.language-choice-option:hover,
|
||||
:root body .language-choice-grid button.language-choice-option:focus {
|
||||
border: 1px solid rgba(210, 222, 241, 0.16) !important;
|
||||
border-radius: 16px !important;
|
||||
background: rgba(255, 255, 255, 0.035) !important;
|
||||
box-shadow: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
:root body .language-choice-grid button.language-choice-option.is-selected,
|
||||
:root body .language-choice-grid button.language-choice-option.is-selected:hover,
|
||||
:root body .language-choice-grid button.language-choice-option.is-selected:focus {
|
||||
border-color: rgba(92, 190, 255, 0.62) !important;
|
||||
background: rgba(39, 141, 255, 0.12) !important;
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 20px rgba(39,141,255,.10) !important;
|
||||
}
|
||||
|
||||
:root body button.pairing-approve-btn,
|
||||
:root body button.pairing-approve-btn:hover,
|
||||
:root body button.pairing-approve-btn:focus {
|
||||
background: linear-gradient(180deg, rgba(57, 180, 108, .92), rgba(22, 116, 69, .94)) !important;
|
||||
border: 1px solid rgba(126, 235, 170, .55) !important;
|
||||
border-radius: 14px !important;
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 22px rgba(22,116,69,.20) !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
:root body button.pairing-reject-btn,
|
||||
:root body button.pairing-reject-btn:hover,
|
||||
:root body button.pairing-reject-btn:focus {
|
||||
color: #fff1f3 !important;
|
||||
background: rgba(134, 31, 49, .28) !important;
|
||||
border: 1px solid rgba(255, 105, 128, .42) !important;
|
||||
border-radius: 14px !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
:root body .screen-content.settings-bordered-actions button:not(.icon-btn):not(.key-toggle-btn):not(.channel-toggle-btn):not(.fg-filter-chip):not(.toolbar-btn):not(.pairing-approve-btn):not(.pairing-reject-btn) {
|
||||
border: 1px solid rgba(183, 203, 235, 0.28) !important;
|
||||
border-radius: 14px !important;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255,255,255,.055), transparent 30%),
|
||||
rgba(8, 19, 42, .58) !important;
|
||||
box-shadow:
|
||||
inset 0 3px 8px rgba(0, 0, 0, 0.58),
|
||||
inset 0 -1px 2px rgba(255, 255, 255, 0.08) !important;
|
||||
transform: translateY(1px) scale(0.97) !important;
|
||||
filter: brightness(0.9) drop-shadow(0 0 4px rgba(92, 190, 255, 0.56)) !important;
|
||||
animation: none !important;
|
||||
inset 0 1px 0 rgba(255,255,255,.10),
|
||||
0 5px 16px rgba(0,0,0,.18) !important;
|
||||
padding-inline: 14px;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* The menu itself is still fully transparent; only the content below is dimmed.
|
||||
* Previous alpha was ~0.49. Reduce it by about 20% relatively -> ~0.39. */
|
||||
:root body .ui-menu-dim-layer,
|
||||
:root body .dm-head-menu-backdrop,
|
||||
:root body .channels-menu-overlay {
|
||||
background: rgba(0, 0, 0, 0.39) !important;
|
||||
}
|
||||
|
||||
/* ===== Round persistent overflow press + subtle background depth (2026-08-23) =====
|
||||
* The open overflow control is a circular recessed well. While a topbar menu is
|
||||
* present, only the content plane below the toolbar recedes slightly; the toolbar
|
||||
* and the fully transparent menu stay at full size. */
|
||||
:root body .topbar-slot button.dm-head-menu-btn.menu-open-pressed,
|
||||
:root body .topbar-slot button.dm-head-menu-btn[aria-expanded='true'],
|
||||
:root body .topbar-slot button.channels-top-more-btn.menu-open-pressed,
|
||||
:root body .topbar-slot button.channels-top-more-btn[aria-expanded='true'],
|
||||
:root body .topbar-slot button.network-top-more-btn.menu-open-pressed,
|
||||
:root body .topbar-slot button.network-top-more-btn[aria-expanded='true'],
|
||||
:root body .network-header-overlay button.network-top-more-btn.menu-open-pressed,
|
||||
:root body .network-header-overlay button.network-top-more-btn[aria-expanded='true'] {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
:root body .topbar-slot button.dm-head-menu-btn.menu-open-pressed::before,
|
||||
:root body .topbar-slot button.dm-head-menu-btn[aria-expanded='true']::before,
|
||||
:root body .topbar-slot button.channels-top-more-btn.menu-open-pressed::before,
|
||||
:root body .topbar-slot button.channels-top-more-btn[aria-expanded='true']::before,
|
||||
:root body .topbar-slot button.network-top-more-btn.menu-open-pressed::before,
|
||||
:root body .topbar-slot button.network-top-more-btn[aria-expanded='true']::before,
|
||||
:root body .network-header-overlay button.network-top-more-btn.menu-open-pressed::before,
|
||||
:root body .network-header-overlay button.network-top-more-btn[aria-expanded='true']::before {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
/* Depth cue: the feed/graph plane gently recedes while a topbar overflow menu is open.
|
||||
* Keep the scale small enough that opening the menu does not feel like a page jump. */
|
||||
@supports selector(body:has(*)) {
|
||||
:root body .app-shell > .screen-content {
|
||||
transform-origin: 50% 50%;
|
||||
transition: transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 180ms ease;
|
||||
}
|
||||
|
||||
:root body:has(> .ui-menu-dim-layer) .app-shell > .screen-content,
|
||||
:root body:has(> #modal-root #channels-top-menu-overlay) .app-shell > .screen-content {
|
||||
transform: scale(0.975);
|
||||
filter: brightness(0.97) saturate(0.96);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
:root body .app-shell > .screen-content {
|
||||
transition: none !important;
|
||||
}
|
||||
:root body .screen-content.settings-bordered-actions button:not(.icon-btn):not(.key-toggle-btn):not(.channel-toggle-btn):not(.fg-filter-chip):not(.toolbar-btn):not(.pairing-approve-btn):not(.pairing-reject-btn):hover {
|
||||
border-color: rgba(213, 225, 247, 0.42) !important;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255,255,255,.075), transparent 30%),
|
||||
rgba(10, 24, 52, .68) !important;
|
||||
}
|
||||
|
||||
+1193
-480
File diff suppressed because it is too large
Load Diff
@@ -11,6 +11,12 @@
|
||||
--accent-soft: rgba(217, 181, 111, 0.18);
|
||||
--danger: #ff718f;
|
||||
--ok: #84f4a1;
|
||||
/* Единый цвет основных действий: стартовые/регистрационные кнопки,
|
||||
* настройки и scroll-down. */
|
||||
--shine-action-blue: #1248a3;
|
||||
--shine-action-blue-hover: #1b62cf;
|
||||
--shine-action-blue-pressed: #0d3577;
|
||||
--shine-action-blue-rgb: 18, 72, 163;
|
||||
--radius-lg: 18px;
|
||||
--radius-md: 12px;
|
||||
--radius-sm: 9px;
|
||||
|
||||
@@ -531,79 +531,6 @@
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Нижний сниппет (bottom sheet) */
|
||||
.fg-sheet {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
right: 12px;
|
||||
bottom: calc(12px + env(safe-area-inset-bottom));
|
||||
z-index: 13;
|
||||
display: none;
|
||||
padding: 12px 14px 14px;
|
||||
background: rgba(16, 24, 40, 0.95);
|
||||
border: 1px solid rgba(166, 196, 245, 0.26);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.fg-sheet.is-open {
|
||||
display: block;
|
||||
animation: fg-sheet-in 200ms ease;
|
||||
}
|
||||
|
||||
@keyframes fg-sheet-in {
|
||||
from { transform: translateY(16px); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
.fg-sheet-close {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 10px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: #9fb6e0;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.fg-sheet-title {
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
color: #eaf1ff;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fg-sheet-badge {
|
||||
font-size: 10px;
|
||||
background: rgba(130, 235, 255, 0.2);
|
||||
color: #bff0ff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.fg-sheet-rel {
|
||||
font-size: 12px;
|
||||
color: #9fb6e0;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.fg-sheet-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.fg-sheet-actions > button {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* === Партия 2: бейдж-счётчик связей, поиск, хлебные крошки, цветовые кластеры ============ */
|
||||
|
||||
/* Бейдж числа связей — маленькая пилюля в правом-верхнем углу аватарки */
|
||||
|
||||
Reference in New Issue
Block a user