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

update @zen-browser/surfer dependency to version 1.10.5 and refine media controls styling

Browse Source
This commit is contained in:
mr. M
2025-03-14 18:29:22 +01:00
parent 2e1354cdb9
commit 8afb8ee204
8 changed files with 29 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,30 +5,18 @@
hidden="true">
<toolbaritem>
<vbox id="zen-media-main-vbox">
<hbox id="zen-media-service-hbox" class="show-on-hover">
<hbox id="zen-media-service-button">
<image/>
</hbox>
<hbox id="zen-media-service-title" fadein="true">
<label class="service" />
<label class="tld" />
</hbox>
</hbox>
<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"
<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"

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

@@ -60,32 +60,32 @@
&:hover {
& #zen-media-main-vbox {
transition-delay: 0s;
gap: 6px;
gap: 8px;
}
.show-on-hover {
max-height: 50px;
padding: 2px 6px;
padding-top: 4px;
margin-bottom: 0;
opacity: 1;
transform: translateY(0);
}
}
&:not(:hover) {
&.playing:not([muted]) #zen-media-focus-button::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
opacity: 1;
background: url('chrome://browser/content/zen-images/note-indicator.svg') no-repeat;
top: -50%;
left: 50%;
transform: translateX(-50%);
z-index: -1;
}
&.playing:not([muted]) #zen-media-focus-button:not(:hover)::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
opacity: 1;
background: url('chrome://browser/content/zen-images/note-indicator.svg') no-repeat;
top: -50%;
left: 50%;
transform: translateX(-50%);
z-index: -1;
pointer-events: none;
}
#zen-media-focus-button {
@@ -130,10 +130,10 @@
transform: translateY(5px);
padding: 0 6px;
transition:
max-height 0.1s ease-in-out,
opacity 0.1s ease-in-out,
transform 0.05s ease-in-out,
padding 0.15s ease-in-out;
max-height 0.15s ease-in-out,
opacity 0.15s ease-in-out,
transform 0.1s ease-in-out,
padding 0.1s ease-in-out;
}
#zen-media-current-time,
@@ -159,7 +159,6 @@
}
}
#zen-media-service-title,
#zen-media-title,
#zen-media-artist {
white-space: nowrap;
@@ -167,20 +166,6 @@
margin-left: 0;
}
#zen-media-service-title {
align-self: center;
font-size: math;
margin-left: 6px;
& label {
margin: 0;
}
& .tld {
opacity: 0.5;
}
}
#zen-media-title,
#zen-media-artist {
align-self: start;
@@ -199,16 +184,11 @@
}
#zen-media-main-vbox,
#zen-media-service-hbox,
#zen-media-info-vbox,
#zen-media-progress-hbox {
width: 100%;
}
#zen-media-service-hbox {
padding-top: 6px;
}
#zen-media-info-vbox {
& label {
width: 100%;
@@ -239,16 +219,6 @@
--toolbarbutton-outer-padding: 0;
}
#zen-media-service-button {
align-items: center;
& image {
width: 16px;
height: 16px;
border-radius: 4px;
}
}
:root:not([zen-sidebar-expanded='true']) {
#zen-media-controls-toolbar {
display: none;