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

Merge branch 'media-control' into media-control

Browse Source
This commit is contained in:
mr. m
2025-03-13 14:57:02 +01:00
committed by GitHub
parent 2bf5c98b5f 1891d36677
commit b0a432ce78
5 changed files with 41 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -59,19 +59,19 @@
&:hover {
& #zen-media-main-vbox {
gap: 8px;
gap: 6px;
}
.show-on-hover {
max-height: 50px;
margin: 2px 6px;
margin-bottom: 0;
opacity: 1;
transform: translateY(0);
}
}
#zen-media-focus-button {
width: 34px;
height: 26px;
align-self: center;
transition:
opacity 0.2s ease,
@@ -98,27 +98,32 @@
position: absolute;
left: 0;
bottom: 0;
padding: 5px;
padding: 4px;
border-radius: var(--border-radius-medium);
background: var(--zen-toolbar-element-bg) !important;
background: light-dark(rgb(255, 255, 255), rgb(11, 11, 11)) !important;
width: 100%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}
.show-on-hover {
padding-inline: 4px;
max-height: 0;
opacity: 0;
overflow: hidden;
transform: translateY(5px);
margin: 0 6px;
transition:
max-height 0.15s ease-in-out,
opacity 0.15s ease-in-out,
transform 0.05s ease-in-out;
max-height 0.1s ease-in-out,
opacity 0.1s ease-in-out,
transform 0.05s ease-in-out,
margin 0.15s ease-in-out;
}
#zen-media-current-time,
#zen-media-duration {
margin: 0 0 0 1px;
font-size: x-small;
opacity: 0.7;
font-weight: 500;
}
}
@@ -141,9 +146,10 @@
&:not([hidden]) {
animation: zen-media-controls-show 0.2s ease-out;
display: flex;
height: 3.5rem;
height: 2.5rem;
overflow: visible;
position: relative;
z-index: 2;
}
}
@@ -176,11 +182,13 @@
#zen-media-artist {
opacity: 0.7;
font-weight: 500;
font-size: smaller;
}
#zen-media-title {
height: 16px;
font-size: 16px;
font-size: math;
font-weight: bold;
}
@@ -191,6 +199,10 @@
width: 100%;
}
#zen-media-service-hbox {
margin-top: 6px;
}
#zen-media-info-vbox {
& label {
width: 100%;
@@ -206,10 +218,12 @@
overflow: hidden;
transition: gap 0.1s ease-out;
transition-delay: 0.1s;
gap: 0px;
}
#zen-media-progress-hbox {
flex-grow: 1;
height: 1.1rem;
align-items: center;
}
@@ -218,6 +232,7 @@
justify-content: space-between;
max-width: 100%;
overflow: hidden;
--toolbarbutton-outer-padding: 0;
}
#zen-media-service-button {
@@ -229,3 +244,9 @@
border-radius: 4px;
}
}
:root:not([zen-sidebar-expanded='true']) {
#zen-media-controls-toolbar {
display: none;
}
}