diff --git a/src/zen/common/modules/ZenStartup.mjs b/src/zen/common/modules/ZenStartup.mjs index e9c7fa1c6..bfa20f596 100644 --- a/src/zen/common/modules/ZenStartup.mjs +++ b/src/zen/common/modules/ZenStartup.mjs @@ -46,14 +46,13 @@ class ZenStartup { } newContainer.appendChild(node); } - // Fix notification deck - const deckTemplate = document.getElementById( - "tab-notification-deck-template" - ); - if (deckTemplate) { - document.getElementById("zen-appcontent-wrapper").prepend(deckTemplate); - } + const deckTemplate = + document.getElementById("tab-notification-deck-template") || + document.getElementById("tab-notification-deck"); + + // overlap and interaction issues with vertical tabs + document.getElementById("browser").prepend(deckTemplate); gZenWorkspaces.init(); setTimeout(() => { diff --git a/src/zen/common/styles/zen-omnibox.css b/src/zen/common/styles/zen-omnibox.css index ba321e429..fa6171568 100644 --- a/src/zen/common/styles/zen-omnibox.css +++ b/src/zen/common/styles/zen-omnibox.css @@ -404,32 +404,6 @@ min-width: 26px; } -/* Notification Stack */ - -.notificationbox-stack { - background: transparent; - - &[notificationside="top"] { - position: fixed; - bottom: calc(var(--zen-element-separation) * 1.5); - right: calc(var(--zen-element-separation) * 1.5); - width: fit-content; - max-width: 30rem !important; - z-index: 9999; - - & notification-message { - background: color-mix(in srgb, var(--zen-colors-tertiary) 70%, transparent 30%); - backdrop-filter: blur(10px); - border: 1px solid var(--arrowpanel-border-color); - border-radius: var(--zen-border-radius); - - &::before { - display: none; - } - } - } -} - #nav-bar, #zen-sidebar-top-buttons { min-height: var(--zen-toolbar-height) !important; diff --git a/src/zen/common/styles/zen-single-components.css b/src/zen/common/styles/zen-single-components.css index 8d7d17f0f..f40e64210 100644 --- a/src/zen/common/styles/zen-single-components.css +++ b/src/zen/common/styles/zen-single-components.css @@ -650,3 +650,36 @@ gap: 4px; } } + + +/* Notification Stack */ + +.notificationbox-stack { + background: transparent; + + &[notificationside="top"] { + position: fixed; + bottom: calc(var(--zen-element-separation) * 1.5); + right: calc(var(--zen-element-separation) * 1.5); + + :root[zen-right-side="true"] & { + right: auto; + left: calc(var(--zen-element-separation) * 1.5); + } + + width: fit-content; + max-width: 30rem !important; + z-index: 9999; + + & notification-message { + background: color-mix(in srgb, var(--zen-colors-tertiary) 70%, transparent 30%); + backdrop-filter: blur(10px); + border: 1px solid var(--arrowpanel-border-color); + border-radius: var(--zen-border-radius); + + &::before { + display: none; + } + } + } +}