From 1891d366771061247e1d33058406d99436623cc7 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Thu, 13 Mar 2025 14:56:43 +0100
Subject: [PATCH] refactor media controls styling; update icon sizes and
 improve layout

---
 .../content/zen-styles/zen-media-controls.css | 43 ++++++++++++++-----
 .../shared/zen-icons/lin/media-next.svg       |  9 +---
 .../shared/zen-icons/lin/media-pause.svg      |  5 ++-
 .../shared/zen-icons/lin/media-play.svg       |  4 +-
 .../shared/zen-icons/lin/media-previous.svg   |  9 +---
 5 files changed, 41 insertions(+), 29 deletions(-)

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 @@
-<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M13.0502 2.74989C13.0502 2.44613 12.804 2.19989 12.5002 2.19989C12.1965 2.19989 11.9502 2.44613 11.9502 2.74989V7.2825C11.9046 7.18802 11.8295 7.10851 11.7334 7.05776L2.73338 2.30776C2.5784 2.22596 2.3919 2.23127 2.24182 2.32176C2.09175 2.41225 2 2.57471 2 2.74995V12.25C2 12.4252 2.09175 12.5877 2.24182 12.6781C2.3919 12.7686 2.5784 12.7739 2.73338 12.6921L11.7334 7.94214C11.8295 7.89139 11.9046 7.81188 11.9502 7.7174V12.2499C11.9502 12.5536 12.1965 12.7999 12.5002 12.7999C12.804 12.7999 13.0502 12.5536 13.0502 12.2499V2.74989ZM3 11.4207V3.5792L10.4288 7.49995L3 11.4207Z"
-    fill="currentColor"
-  />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M4.05,3.677l8.254,4.57c.595,.33,.595,1.177,0,1.506L4.05,14.323c-.582,.322-1.3-.094-1.3-.753V4.43c0-.66,.718-1.075,1.3-.753Z" fill="none" stroke="context-fill" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><line x1="15.25" y1="15.25" x2="15.25" y2="2.75" fill="none" stroke="context-fill" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-color="color-2"></line></svg>
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 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="context-fill" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="2.75" y="2.75" width="3.5" height="12.5" rx="1" ry="1"></rect><rect x="11.75" y="2.75" width="3.5" height="12.5" rx="1" ry="1" data-color="color-2"></rect></g></svg>
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.33333 2.22217H4.66667C3.59278 2.22217 2.72222 3.09273 2.72222 4.16661V15.8333C2.72222 16.9072 3.59278 17.7777 4.66667 17.7777H6.33333C7.40722 17.7777 8.27778 16.9072 8.27778 15.8333V4.16661C8.27778 3.09273 7.40722 2.22217 6.33333 2.22217Z" fill="context-fill" fill-opacity="context-fill-opacity"/>
+<path d="M16.3333 2.22217H14.6667C13.5928 2.22217 12.7222 3.09273 12.7222 4.16661V15.8333C12.7222 16.9072 13.5928 17.7777 14.6667 17.7777H16.3333C17.4072 17.7777 18.2778 16.9072 18.2778 15.8333V4.16661C18.2778 3.09273 17.4072 2.22217 16.3333 2.22217Z" fill="context-fill" fill-opacity="context-fill-opacity"/>
+</svg>
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 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="context-fill" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M11.652,8.568l-3.651-2.129c-.333-.194-.752,.046-.752,.432v4.259c0,.386,.419,.626,.752,.432l3.651-2.129c.331-.193,.331-.671,0-.864Z" data-color="color-2"></path><path d="M4.987,2.961c.778-.518,1.662-.89,2.612-1.075"></path><path d="M1.879,7.631c.185-.968,.562-1.867,1.091-2.657"></path><path d="M4.987,15.039c.778,.518,1.662,.89,2.612,1.075"></path><path d="M1.879,10.369c.185,.968,.562,1.867,1.091,2.657"></path><path d="M10.435,1.892c3.317,.666,5.815,3.595,5.815,7.108s-2.499,6.443-5.817,7.108"></path></g></svg>
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.2778 8.30893L6.73111 2.46893C6.11667 2.12893 5.39111 2.13893 4.78778 2.49448C4.19 2.84671 3.83334 3.46893 3.83334 4.16004V15.84C3.83334 16.5312 4.19 17.1534 4.78778 17.5056C5.09778 17.6878 5.43889 17.78 5.78222 17.78C6.10778 17.78 6.43334 17.6967 6.73111 17.5323L17.2767 11.6923C17.8944 11.3512 18.2778 10.7023 18.2778 10.0012C18.2778 9.30004 17.8944 8.65004 17.2778 8.30893Z" fill="context-fill" fill-opacity="context-fill-opacity"/>
+</svg>
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 @@
-<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M1.94976 2.74989C1.94976 2.44613 2.196 2.19989 2.49976 2.19989C2.80351 2.19989 3.04976 2.44613 3.04976 2.74989V7.2825C3.0954 7.18802 3.17046 7.10851 3.26662 7.05776L12.2666 2.30776C12.4216 2.22596 12.6081 2.23127 12.7582 2.32176C12.9083 2.41225 13 2.57471 13 2.74995V12.25C13 12.4252 12.9083 12.5877 12.7582 12.6781C12.6081 12.7686 12.4216 12.7739 12.2666 12.6921L3.26662 7.94214C3.17046 7.89139 3.0954 7.81188 3.04976 7.7174V12.2499C3.04976 12.5536 2.80351 12.7999 2.49976 12.7999C2.196 12.7999 1.94976 12.5536 1.94976 12.2499V2.74989ZM4.57122 7.49995L12 11.4207V3.5792L4.57122 7.49995Z"
-    fill="currentColor"
-  />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M13.95,14.323L5.697,9.753c-.595-.33-.595-1.177,0-1.506L13.95,3.677c.582-.322,1.3,.094,1.3,.753V13.57c0,.66-.718,1.075-1.3,.753Z" fill="none" stroke="context-fill" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><line x1="2.75" y1="2.75" x2="2.75" y2="15.25" fill="none" stroke="context-fill" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-color="color-2"></line></svg>