diff --git a/src/browser/base/content/zen-styles/zen-media-controls.css b/src/browser/base/content/zen-styles/zen-media-controls.css
index a1504daaa..cd256a8cd 100644
--- a/src/browser/base/content/zen-styles/zen-media-controls.css
+++ b/src/browser/base/content/zen-styles/zen-media-controls.css
@@ -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;
+ }
+}
diff --git a/src/browser/themes/shared/zen-icons/lin/media-next.svg b/src/browser/themes/shared/zen-icons/lin/media-next.svg
index 24fd40e36..0bf9db593 100644
--- a/src/browser/themes/shared/zen-icons/lin/media-next.svg
+++ b/src/browser/themes/shared/zen-icons/lin/media-next.svg
@@ -1,8 +1 @@
-
+
diff --git a/src/browser/themes/shared/zen-icons/lin/media-pause.svg b/src/browser/themes/shared/zen-icons/lin/media-pause.svg
index 298a939d0..75e535bf0 100644
--- a/src/browser/themes/shared/zen-icons/lin/media-pause.svg
+++ b/src/browser/themes/shared/zen-icons/lin/media-pause.svg
@@ -1 +1,4 @@
-
+
diff --git a/src/browser/themes/shared/zen-icons/lin/media-play.svg b/src/browser/themes/shared/zen-icons/lin/media-play.svg
index eec6a8e93..4ebc76933 100644
--- a/src/browser/themes/shared/zen-icons/lin/media-play.svg
+++ b/src/browser/themes/shared/zen-icons/lin/media-play.svg
@@ -1 +1,3 @@
-
+
diff --git a/src/browser/themes/shared/zen-icons/lin/media-previous.svg b/src/browser/themes/shared/zen-icons/lin/media-previous.svg
index d99e7ab53..1175b9c3f 100644
--- a/src/browser/themes/shared/zen-icons/lin/media-previous.svg
+++ b/src/browser/themes/shared/zen-icons/lin/media-previous.svg
@@ -1,8 +1 @@
-
+