mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-16 14:56:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor media controls layout and styles; improve visibility and responsiveness

Browse Source
This commit is contained in:
mr. M
2025-03-15 13:40:09 +01:00
parent e780eee207
commit d234e6a701
8 changed files with 169 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/browser/base/content/zen-media-player.inc.xhtml
View File

@@ -5,18 +5,20 @@
hidden="true">
<toolbaritem>
<vbox id="zen-media-main-vbox">
<vbox id="zen-media-info-vbox" class="show-on-hover">
<label id="zen-media-title" fadein="true"/>
<label id="zen-media-artist" fadein="true"/>
<vbox>
<vbox id="zen-media-info-vbox" class="show-on-hover">
<label id="zen-media-title" fadein="true"/>
<label id="zen-media-artist" fadein="true"/>
</vbox>
<hbox id="zen-media-progress-hbox" class="show-on-hover">
<label id="zen-media-current-time">0:00</label>
<html:input type="range" id="zen-media-progress-bar"
value="0" min="0" max="100" step="0.1"
oninput="gZenMediaController.onMediaSeekDrag(event);"
onchange="gZenMediaController.onMediaSeekComplete(event);"/>
<label id="zen-media-duration">0:00</label>
</hbox>
</vbox>
<hbox id="zen-media-progress-hbox" class="show-on-hover">
<label id="zen-media-current-time">0:00</label>
<html:input type="range" id="zen-media-progress-bar"
value="0" min="0" max="100" step="0.1"
oninput="gZenMediaController.onMediaSeekDrag(event);"
onchange="gZenMediaController.onMediaSeekComplete(event);"/>
<label id="zen-media-duration">0:00</label>
</hbox>
<hbox id="zen-media-controls-hbox">
<toolbarbutton id="zen-media-focus-button"
class="toolbarbutton-1"

48
src/browser/base/content/zen-styles/zen-media-controls.css
View File

@@ -60,13 +60,12 @@
&:hover {
& #zen-media-main-vbox {
transition-delay: 0s;
gap: 8px;
gap: 6px;
}
.show-on-hover {
max-height: 50px;
padding: 2px 6px;
padding-top: 6px;
padding: 5px;
margin-bottom: 0;
opacity: 1;
transform: translateY(0) !important;
@@ -74,7 +73,7 @@
}
}
&.playing:not([muted]) #zen-media-focus-button:not(:hover)::after {
& #zen-media-focus-button::after {
content: '';
position: absolute;
width: 100%;
@@ -87,6 +86,12 @@
transform: translateX(-50%);
z-index: 0;
pointer-events: none;
transition: opacity .8s ease;
opacity: 1;
}
&:is(:not(.playing:not([muted])), :hover) #zen-media-focus-button::after {
opacity: 0;
}
#zen-media-focus-button {
@@ -105,12 +110,11 @@
position: absolute;
left: 0;
bottom: 0;
padding: 4px;
padding: 5px;
border-radius: var(--border-radius-medium);
background: var(--zen-media-control-bg) !important;
width: 100%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.show-on-hover {
@@ -156,14 +160,16 @@
#zen-media-artist {
opacity: 0.7;
font-weight: 500;
font-size: smaller;
&:empty {
display: none;
}
}
#zen-media-title {
height: 16px;
font-size: math;
font-weight: bold;
}
#zen-media-main-vbox,
@@ -173,15 +179,32 @@
}
#zen-media-info-vbox {
transition-delay: 0.01s !important;
transform: translateY(-0.4rem) !important;
#zen-media-controls-toolbar:not([media-position-hidden='true']) & {
transition-delay: 0.01s !important;
transform: translateY(-0.4rem);
}
overflow-x: hidden;
overflow-x: visible;
white-space: nowrap;
/* Overflow inner box shadow from the left to simulate overflow */
mask-image: linear-gradient(to left, transparent, var(--zen-media-control-bg) 0.6em);
&::before {
content: '';
position: absolute;
width: 0.6em;
background: linear-gradient(to right, var(--zen-media-control-bg) 0%, transparent 100%);
pointer-events: none;
top: 6px;
left: -2px;
height: calc(100% - 6px);
z-index: 1;
}
& label {
min-height: 16px;
margin-left: 0;
font-weight: 500;
animation: zen-marquee-h 10s ease-in-out infinite;
}
}
@@ -191,7 +214,6 @@
justify-content: space-between;
transition: gap 0.3s ease;
gap: 0px;
mask-image: linear-gradient(to right, transparent, var(--zen-media-control-bg) 0.6em);
}
#zen-media-progress-hbox {
@@ -199,6 +221,10 @@
height: 1.1rem;
align-items: center;
padding-top: 0px !important;
#zen-media-controls-toolbar[media-position-hidden='true'] & {
display: none;
}
}
#zen-media-controls-hbox {