update @zen-browser/surfer dependency to version 1.10.4 and adjust media controls styling

package-lock.json

@@ -9,7 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "@zen-browser/surfer": "^1.10.2"
+        "@zen-browser/surfer": "^1.10.4"
       },
       "devDependencies": {
         "husky": "^9.1.7",
@@ -288,10 +288,9 @@
       "license": "MIT"
     },
     "node_modules/@zen-browser/surfer": {
-      "version": "1.10.3",
-      "resolved": "https://registry.npmjs.org/@zen-browser/surfer/-/surfer-1.10.3.tgz",
-      "integrity": "sha512-hr3JerUktpZsINrUbu66ARgnh/DxNZK0k9Ukl+z8Pac0JUbcQwho31wlomAshcPQ0Z3Pg7j+KvUB+GQA8VL0BQ==",
-      "license": "MPL-2.0",
+      "version": "1.10.4",
+      "resolved": "https://registry.npmjs.org/@zen-browser/surfer/-/surfer-1.10.4.tgz",
+      "integrity": "sha512-xDXJYgbJTfNpM+LsJDJ81VCotwIBY3CItrD7Y1hPqf84Ino/sTqy/QuHQCVqZU3StewAvVuV68MWnaiY9ytlMA==",
       "dependencies": {
         "@resvg/resvg-js": "^1.4.0",
         "async-icns": "^1.0.2",

package.json

@@ -41,7 +41,7 @@
   },
   "homepage": "https://github.com/zen-browser/core#readme",
   "dependencies": {
-    "@zen-browser/surfer": "^1.10.2"
+    "@zen-browser/surfer": "^1.10.4"
   },
   "devDependencies": {
     "husky": "^9.1.7",

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

@@ -73,16 +73,18 @@
   }
 
   &:not(:hover) {
-    #zen-media-focus-button::after {
+    &.playing:not([muted]) #zen-media-focus-button::after {
       content: '';
       position: absolute;
       width: 100%;
       height: 100%;
       background-repeat: no-repeat;
       opacity: 1;
-      background: url('note-indicator.svg') no-repeat;
-      top: -20px;
-      left: 8px;
+      background: url('chrome://browser/content/zen-images/note-indicator.svg') no-repeat;
+      top: -50%;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: -1;
     }
   }
 
@@ -219,7 +221,6 @@
 #zen-media-main-vbox {
   height: 100%;
   justify-content: space-between;
-  overflow: hidden;
   transition: gap 0.1s ease-out;
   transition-delay: 0.1s;
   gap: 0px;
@@ -235,7 +236,6 @@
   align-items: flex-end;
   justify-content: space-between;
   max-width: 100%;
-  overflow: hidden;
   --toolbarbutton-outer-padding: 0;
 }