Merge branch 'media-control' into media-control

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,
+      max-height 0.1s ease-in-out,
-      opacity 0.15s ease-in-out,
+      opacity 0.1s ease-in-out,
-      transform 0.05s 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;
+  }
+}

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">
+<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>
-  <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>

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>

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>

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">
+<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>
-  <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>