SHA256
Обновить UI-ветку
This commit is contained in:
@@ -221,3 +221,289 @@
|
||||
0 0 12px rgba(72, 145, 255, 0.34) !important;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
/* ===== 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;
|
||||
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;
|
||||
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'] {
|
||||
background: transparent !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;
|
||||
}
|
||||
|
||||
: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;
|
||||
}
|
||||
|
||||
/* ===== 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;
|
||||
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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
+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;
|
||||
}
|
||||
|
||||
@@ -34,8 +34,8 @@ body::before {
|
||||
--toolbar-height: 78px;
|
||||
--keyboard-offset: 0px;
|
||||
background: transparent;
|
||||
border-left: 1px solid rgba(211, 170, 86, 0.2);
|
||||
border-right: 1px solid rgba(211, 170, 86, 0.2);
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user