From 0e5f2dcd1116b87227e7f64d3a617bf114053b34 Mon Sep 17 00:00:00 2001 From: "mr. m" <91018726+mr-cheffy@users.noreply.github.com> Date: Wed, 5 Aug 2026 16:19:13 +0200 Subject: [PATCH] gh-14843: Fix media players height looking off if they differ from each other (gh-14853) --- locales/en-US/browser/browser/zen-general.ftl | 3 ++ src/zen/common/modules/ZenUpdates.mjs | 5 +++ .../styles/zen-sidebar-notification.css | 2 ++ src/zen/common/styles/zen-theme.css | 1 + src/zen/media/zen-media-controls.css | 32 +++++++++++-------- 5 files changed, 30 insertions(+), 13 deletions(-) diff --git a/locales/en-US/browser/browser/zen-general.ftl b/locales/en-US/browser/browser/zen-general.ftl index 93bf074f1..d0ebc5f9d 100644 --- a/locales/en-US/browser/browser/zen-general.ftl +++ b/locales/en-US/browser/browser/zen-general.ftl @@ -151,6 +151,9 @@ zen-sidebar-notification-updated-heading = Update Complete! zen-sidebar-notification-updated-label = What's new in { -brand-short-name } zen-sidebar-notification-updated-tooltip = .title = View Release Notes +zen-sidebar-notification-donate-label = Support { -brand-short-name } +zen-sidebar-notification-donate-tooltip = + .title = Donate to the project zen-sidebar-notification-restart-safe-mode-label = Something broke? zen-sidebar-notification-restart-safe-mode-tooltip = .title = Restart in Safe Mode diff --git a/src/zen/common/modules/ZenUpdates.mjs b/src/zen/common/modules/ZenUpdates.mjs index 76c08aa2a..c1f512fd6 100644 --- a/src/zen/common/modules/ZenUpdates.mjs +++ b/src/zen/common/modules/ZenUpdates.mjs @@ -32,6 +32,11 @@ export default function checkForZenUpdates() { ), l10nId: "zen-sidebar-notification-updated", special: true, + icon: "chrome://browser/skin/zen-icons/sparkles.svg", + }, + { + url: "https://www.zen-browser.app/donate", + l10nId: "zen-sidebar-notification-donate", icon: "chrome://browser/skin/zen-icons/heart-circle-fill.svg", }, { diff --git a/src/zen/common/styles/zen-sidebar-notification.css b/src/zen/common/styles/zen-sidebar-notification.css index b80f94e9b..a5e15194d 100644 --- a/src/zen/common/styles/zen-sidebar-notification.css +++ b/src/zen/common/styles/zen-sidebar-notification.css @@ -19,6 +19,8 @@ flex-direction: column; min-width: 0; border-radius: var(--border-radius-medium); + outline: var(--zen-sidebar-notification-outline); + outline-offset: -1.5px; box-shadow: var(--zen-sidebar-notification-shadow); font-size: 12px; } diff --git a/src/zen/common/styles/zen-theme.css b/src/zen/common/styles/zen-theme.css index cdf47e71e..345453e5b 100644 --- a/src/zen/common/styles/zen-theme.css +++ b/src/zen/common/styles/zen-theme.css @@ -262,6 +262,7 @@ light-dark(white, black) ); --zen-sidebar-notification-shadow: 0 0 6px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)); + --zen-sidebar-notification-outline: 1px solid light-dark(transparent, rgba(255, 255, 255, 0.15)); --zen-sidebar-themed-icon-fill: light-dark(color-mix(in srgb, var(--zen-primary-color) 50%, black), color-mix(in srgb, var(--zen-colors-primary) 15%, #ebebeb)); diff --git a/src/zen/media/zen-media-controls.css b/src/zen/media/zen-media-controls.css index 910f0f506..cd99f79d8 100644 --- a/src/zen/media/zen-media-controls.css +++ b/src/zen/media/zen-media-controls.css @@ -89,9 +89,7 @@ } & .zen-media-card { - transform: translateY( - calc(var(--zen-media-card-index, 0) * (-100% - var(--zen-media-stack-gap))) - ); + transform: none; opacity: 1; } @@ -133,21 +131,25 @@ } .zen-media-card { - flex-grow: 1; - position: absolute; - left: 0; - bottom: 0; + position: relative; + flex-shrink: 0; + order: var(--zen-media-card-index, 0); width: 100%; padding: 4px 6px; border-radius: var(--border-radius-medium); + outline: var(--zen-sidebar-notification-outline); + outline-offset: -1.5px; box-shadow: var(--zen-sidebar-notification-shadow); background-color: var(--zen-sidebar-notification-bg); transform-origin: top center; - /* Collapsed stack: cards behind the front card peek out at the top, - fading the deeper they sit */ - transform: translateY(calc(-1 * var(--zen-media-stack-peek) * var(--zen-media-card-peek-level, 0))) + transform: translateY( + calc( + var(--zen-media-card-index, 0) * (100% + var(--zen-media-stack-gap)) - + var(--zen-media-stack-peek) * var(--zen-media-card-peek-level, 0) + ) + ) scale(calc(1 - 0.04 * var(--zen-media-card-peek-level, 0))); - opacity: calc(1 - 0.2 * var(--zen-media-card-peek-level, 0)); + opacity: calc(1 - 0.4 * var(--zen-media-card-peek-level, 0)); transition: transform 0.1s ease-out, opacity 0.2s ease-out, @@ -234,8 +236,12 @@ &:not([hidden]) { display: flex; - /* The collapsed height includes the room for the peeking stacked - cards, so the stack never shifts the surrounding UI */ + flex-direction: column-reverse; + gap: var(--zen-media-stack-gap); + /* The toolbar keeps its collapsed height even while expanded: the + cards' flow positions overflow above the box, so the expanded stack + floats over the sidebar instead of pushing it around. The collapsed + height includes the room for the peeking stacked cards. */ height: calc( var(--zen-media-collapsed-height, 2.5rem) + var(--zen-media-stack-peek) * var(--zen-media-stack-behind, 0)