mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-08-19 05:01:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

gh-14843: Fix media players height looking off if they differ from each other (gh-14853)

Browse Source
This commit is contained in:
mr. m
2026-08-05 16:19:13 +02:00
committed by GitHub
parent c0ade4d063
commit 0e5f2dcd11
5 changed files with 30 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
locales/en-US/browser/browser/zen-general.ftl
View File

@@ -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

5
src/zen/common/modules/ZenUpdates.mjs
View File

@@ -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",
},
{

2
src/zen/common/styles/zen-sidebar-notification.css
View File

@@ -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;
}

1
src/zen/common/styles/zen-theme.css
View File

@@ -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));

32
src/zen/media/zen-media-controls.css
View File

@@ -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)