SHA256
Обновить UI-ветку
This commit is contained in:
+331
-27
@@ -9476,19 +9476,16 @@ body.chat-topbar-overlay .composer-slot > * {
|
||||
}
|
||||
|
||||
|
||||
/* ===== Connections: restore canonical shared topbar (2026-08-22 14:00) =====
|
||||
* The toolbar itself is the standard renderHeader() mounted in #topbar-slot.
|
||||
* Network-specific positioning must never move .screen-content under it.
|
||||
* The graph fade lives inside .network-stage instead, so canvas layout cannot
|
||||
* change toolbar height/position or overlap its controls. */
|
||||
/* ===== Connections: shared topbar fade + edge fade (2026-08-23) =====
|
||||
* Header geometry stays canonical, but the graph itself now continues under the
|
||||
* shared topbar exactly like scrollable message content. The generic topbar
|
||||
* overlay is therefore the source of the upper fade. */
|
||||
.topbar-slot:has(> .network-topbar)::before {
|
||||
/* Keep the generic toolbar background/fade inside the toolbar bounds only. */
|
||||
height: 100% !important;
|
||||
height: calc(100% + 48px) !important;
|
||||
}
|
||||
|
||||
/* Undo the previous Connections-only full-bleed-under-toolbar geometry. */
|
||||
.screen-content.network-scroll-lock {
|
||||
top: calc(var(--call-minimized-bar-height, 0px) + var(--topbar-height, 0px)) !important;
|
||||
top: var(--call-minimized-bar-height, 0px) !important;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: calc(var(--toolbar-height, 78px) + var(--composer-height, 0px));
|
||||
@@ -9503,34 +9500,37 @@ body.chat-topbar-overlay .composer-slot > * {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Filters return to the same content offset they had before the toolbar-overlay experiment. */
|
||||
/* Filters stay below the visible topbar while the movable graph runs beneath it. */
|
||||
.network-stage > .fg-filter-bar.app-top-tabs {
|
||||
top: var(--app-primary-tabs-top-gap, 14px) !important;
|
||||
top: calc(var(--topbar-height, 64px) + var(--app-primary-tabs-top-gap, 14px)) !important;
|
||||
}
|
||||
|
||||
/* Fade belongs to the graph surface, not to the toolbar. It sits above graph
|
||||
* nodes/edges but below filter chips (filter bar z-index is 11). */
|
||||
/* The graph can be panned in every direction, so its side and bottom edges fade
|
||||
* into the app canvas as well. The top edge is intentionally omitted here: it
|
||||
* is handled by .topbar-slot::before, matching messages/chats. */
|
||||
.network-stage::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 58px;
|
||||
inset: 0;
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(5, 7, 10, 1) 0%,
|
||||
rgba(5, 7, 10, 0.86) 28%,
|
||||
rgba(5, 7, 10, 0.48) 58%,
|
||||
rgba(5, 7, 10, 0.16) 82%,
|
||||
rgba(5, 7, 10, 0) 100%
|
||||
);
|
||||
background:
|
||||
linear-gradient(to right,
|
||||
rgba(5, 7, 10, 0.98) 0%,
|
||||
rgba(5, 7, 10, 0.58) 3%,
|
||||
rgba(5, 7, 10, 0) 10%) left / 50% 100% no-repeat,
|
||||
linear-gradient(to left,
|
||||
rgba(5, 7, 10, 0.98) 0%,
|
||||
rgba(5, 7, 10, 0.58) 3%,
|
||||
rgba(5, 7, 10, 0) 10%) right / 50% 100% no-repeat,
|
||||
linear-gradient(to top,
|
||||
rgba(5, 7, 10, 1) 0%,
|
||||
rgba(5, 7, 10, 0.72) 4%,
|
||||
rgba(5, 7, 10, 0.28) 8%,
|
||||
rgba(5, 7, 10, 0) 14%) bottom / 100% 50% no-repeat;
|
||||
}
|
||||
|
||||
/* Explicitly keep the Connections header on the canonical topbar contract.
|
||||
* No network-only absolute positioning, dimensions or padding. */
|
||||
/* Explicitly keep the Connections header on the canonical shared topbar contract. */
|
||||
.topbar-slot > .page-header.app-topbar-shell.network-topbar {
|
||||
position: relative !important;
|
||||
inset: auto !important;
|
||||
@@ -9551,3 +9551,307 @@ body.chat-topbar-overlay .composer-slot > * {
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
/* Уведомления: без рамки должны быть не только реальные Ответы/События, но и
|
||||
* пустые/ошибочные состояния, потому что все они являются прямыми card-детьми списка. */
|
||||
.notifications-screen .notifications-list > .card,
|
||||
.notifications-screen .notifications-list > .card:hover,
|
||||
.notifications-screen .notifications-list > .card:focus,
|
||||
.notifications-screen .notifications-list > .card:focus-visible,
|
||||
.notifications-screen .notifications-list > .card:active {
|
||||
border: 0 !important;
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
/* ===== Connections: unified graph fade without overlay seams (2026-08-23) =====
|
||||
* Side/bottom fade is applied to the graph itself (including its nebula glow),
|
||||
* instead of painting dark gradients above it. This keeps the center glow and
|
||||
* the edge attenuation in one composited image, so no visible fade stripe can
|
||||
* cut through the nebula while the graph is panned. */
|
||||
.network-stage::before {
|
||||
content: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.screen-content.network-scroll-lock .network-board--full.fg-stage {
|
||||
-webkit-mask-image: radial-gradient(
|
||||
ellipse 62% 118% at 50% -4%,
|
||||
#000 0%,
|
||||
#000 68%,
|
||||
rgba(0, 0, 0, 0.96) 75%,
|
||||
rgba(0, 0, 0, 0.78) 82%,
|
||||
rgba(0, 0, 0, 0.48) 89%,
|
||||
rgba(0, 0, 0, 0.18) 95%,
|
||||
transparent 100%
|
||||
);
|
||||
mask-image: radial-gradient(
|
||||
ellipse 62% 118% at 50% -4%,
|
||||
#000 0%,
|
||||
#000 68%,
|
||||
rgba(0, 0, 0, 0.96) 75%,
|
||||
rgba(0, 0, 0, 0.78) 82%,
|
||||
rgba(0, 0, 0, 0.48) 89%,
|
||||
rgba(0, 0, 0, 0.18) 95%,
|
||||
transparent 100%
|
||||
);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: 100% 100%;
|
||||
mask-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* Connections uses the same compact overflow trigger as Contacts, Channels and Profile. */
|
||||
.topbar-slot .network-top-more-btn {
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
padding: 0;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
|
||||
/* ===== Unified top/dropdown menus (2026-08-23) ===== */
|
||||
.ui-menu-dim-layer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: calc(var(--topbar-height, 64px) + var(--call-minimized-bar-height, 0px));
|
||||
bottom: 0;
|
||||
z-index: 9998;
|
||||
background: rgba(0, 0, 0, 0.51);
|
||||
border: 0;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.dm-head-menu,
|
||||
.channel-menu-wrap,
|
||||
.channel-menu-wrap--portal {
|
||||
border: 0 !important;
|
||||
outline: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.dm-head-menu {
|
||||
min-width: 0;
|
||||
padding: 8px 10px;
|
||||
border-radius: 12px;
|
||||
background: rgba(5, 7, 10, 0.92);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.dm-head-menu::before { content: none !important; display: none !important; }
|
||||
|
||||
.dm-head-menu--portal { z-index: 10000; }
|
||||
|
||||
.dm-head-menu-item,
|
||||
.channel-menu-item {
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
padding: 7px 10px;
|
||||
border: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
outline: 0;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
color: rgba(255, 255, 255, 0.95) !important;
|
||||
font-family: var(--font-main);
|
||||
font-size: var(--app-topbar-title-size, 18px);
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dm-head-menu-item svg,
|
||||
.dm-head-menu-item img { display: none !important; }
|
||||
|
||||
.dm-head-menu-item:hover,
|
||||
.dm-head-menu-item:focus-visible,
|
||||
.dm-head-menu-item:active,
|
||||
.channel-menu-item:hover,
|
||||
.channel-menu-item:focus-visible,
|
||||
.channel-menu-item:active {
|
||||
background: transparent !important;
|
||||
color: #fff !important;
|
||||
text-shadow: 0 0 10px rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
.channel-menu-wrap {
|
||||
width: max-content;
|
||||
min-width: 180px;
|
||||
max-width: calc(100vw - 24px);
|
||||
padding: 8px 10px;
|
||||
gap: 0;
|
||||
background: rgba(5, 7, 10, 0.92);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.channels-menu-overlay {
|
||||
background: rgba(0, 0, 0, 0.51) !important;
|
||||
}
|
||||
|
||||
.channel-menu-divider {
|
||||
border: 0 !important;
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
|
||||
/* ===== Unified topbar dropdown menus cleanup (2026-08-23) =====
|
||||
* - no menu outline/contour
|
||||
* - dim lower layers ~51% while menu is open
|
||||
* - menu rows are text-only using the same core type rhythm as the topbar
|
||||
* - shared positioning helpers clamp menus to the viewport */
|
||||
.dm-head-menu-backdrop {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: calc(var(--topbar-height, 64px) + var(--call-minimized-bar-height, 0px));
|
||||
bottom: 0;
|
||||
z-index: 9998;
|
||||
background: rgba(5, 7, 10, 0.51);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.channels-menu-overlay {
|
||||
background: rgba(5, 7, 10, 0.51);
|
||||
}
|
||||
|
||||
.dm-head-menu,
|
||||
.channel-menu-wrap {
|
||||
border: 0 !important;
|
||||
outline: none !important;
|
||||
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34) !important;
|
||||
}
|
||||
|
||||
.dm-head-menu {
|
||||
min-width: 164px;
|
||||
max-width: min(240px, calc(100vw - 20px));
|
||||
padding: 8px 10px;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(180deg, rgba(12, 16, 24, 0.96), rgba(8, 11, 18, 0.96));
|
||||
backdrop-filter: blur(18px);
|
||||
-webkit-backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.dm-head-menu::before {
|
||||
content: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.dm-head-menu-item,
|
||||
.channel-menu-item {
|
||||
width: 100%;
|
||||
min-height: 42px;
|
||||
padding: 10px 12px;
|
||||
border: 0 !important;
|
||||
border-radius: 10px;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0;
|
||||
font-family: var(--font-main);
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--app-topbar-gold);
|
||||
text-shadow:
|
||||
0 0 5px var(--app-topbar-blue-glow),
|
||||
0 0 12px var(--app-topbar-blue-glow-soft);
|
||||
}
|
||||
|
||||
.dm-head-menu-item > svg,
|
||||
.dm-head-menu-item > img {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.dm-head-menu-item > span {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.dm-head-menu-item:hover,
|
||||
.dm-head-menu-item:focus-visible,
|
||||
.dm-head-menu-item:active,
|
||||
.channel-menu-item:hover,
|
||||
.channel-menu-item:focus-visible,
|
||||
.channel-menu-item:active {
|
||||
outline: none;
|
||||
background: rgba(255, 255, 255, 0.05) !important;
|
||||
}
|
||||
|
||||
.channel-menu-item.destructive {
|
||||
color: var(--app-topbar-gold);
|
||||
text-shadow:
|
||||
0 0 5px rgba(255, 124, 156, 0.35),
|
||||
0 0 12px rgba(255, 124, 156, 0.2);
|
||||
}
|
||||
|
||||
.channel-menu-divider {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
margin: 4px 0 !important;
|
||||
}
|
||||
|
||||
.dm-head-menu-wrap.is-open .dm-head-menu-btn,
|
||||
.dm-head-menu-btn:focus-visible,
|
||||
.topbar-slot .channels-top-more-btn:focus-visible,
|
||||
.topbar-slot .channels-top-more-btn[aria-expanded="true"] {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
|
||||
/* ===== Transparent topbar-like dropdown surface (2026-08-23) =====
|
||||
* The lower UI stays visible through the menu, just dimmed by the backdrop.
|
||||
* No opaque card/contour: labels float over the same faded content language as the top toolbar. */
|
||||
.ui-menu-dim-layer,
|
||||
.dm-head-menu-backdrop {
|
||||
background: rgba(0, 0, 0, 0.39) !important;
|
||||
}
|
||||
|
||||
.channels-menu-overlay {
|
||||
background: rgba(0, 0, 0, 0.39) !important;
|
||||
}
|
||||
|
||||
.dm-head-menu,
|
||||
.dm-head-menu--portal,
|
||||
.channel-menu-wrap,
|
||||
.channel-menu-wrap--portal {
|
||||
border: 0 !important;
|
||||
outline: 0 !important;
|
||||
box-shadow: none !important;
|
||||
background: rgba(5, 7, 10, 0.10) !important;
|
||||
background-image: none !important;
|
||||
-webkit-backdrop-filter: blur(8px) brightness(0.82) !important;
|
||||
backdrop-filter: blur(8px) brightness(0.82) !important;
|
||||
}
|
||||
|
||||
/* The panel itself must never become an opaque plate through legacy pseudo-elements. */
|
||||
.dm-head-menu::before,
|
||||
.channel-menu-wrap::before,
|
||||
.channel-menu-wrap--portal::before {
|
||||
content: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.dm-head-menu-item,
|
||||
.channel-menu-item,
|
||||
.dm-head-menu-item:hover,
|
||||
.dm-head-menu-item:focus,
|
||||
.dm-head-menu-item:focus-visible,
|
||||
.dm-head-menu-item:active,
|
||||
.channel-menu-item:hover,
|
||||
.channel-menu-item:focus,
|
||||
.channel-menu-item:focus-visible,
|
||||
.channel-menu-item:active {
|
||||
background: transparent !important;
|
||||
background-image: none !important;
|
||||
border: 0 !important;
|
||||
outline: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user