From cb6f4aa4770f14d9d4f0482d7cc4cca485e0f938 Mon Sep 17 00:00:00 2001
From: mohammedyh <mohammedyousufhamid@gmail.com>
Date: Tue, 27 May 2025 13:27:04 +0100
Subject: [PATCH] fix: change track color for media controls in all themes

This fixes an issue where the color of the track and progress bar were
the same, making it difficult to see the remaining playback time.

Normalise CSS formatting
---
 themes/Frappe/Blue/userChrome.css         | 18 +++++++++++++++---
 themes/Frappe/Flamingo/userChrome.css     | 18 +++++++++++++++---
 themes/Frappe/Green/userChrome.css        | 18 +++++++++++++++---
 themes/Frappe/Lavender/userChrome.css     | 18 +++++++++++++++---
 themes/Frappe/Maroon/userChrome.css       | 18 +++++++++++++++---
 themes/Frappe/Mauve/userChrome.css        | 18 +++++++++++++++---
 themes/Frappe/Peach/userChrome.css        | 18 +++++++++++++++---
 themes/Frappe/Pink/userChrome.css         | 18 +++++++++++++++---
 themes/Frappe/Red/userChrome.css          | 18 +++++++++++++++---
 themes/Frappe/Rosewater/userChrome.css    | 18 +++++++++++++++---
 themes/Frappe/Sapphire/userChrome.css     | 18 +++++++++++++++---
 themes/Frappe/Sky/userChrome.css          | 18 +++++++++++++++---
 themes/Frappe/Teal/userChrome.css         | 18 +++++++++++++++---
 themes/Frappe/Yellow/userChrome.css       | 18 +++++++++++++++---
 themes/Latte/Blue/userChrome.css          | 18 +++++++++++++++---
 themes/Latte/Flamingo/userChrome.css      | 18 +++++++++++++++---
 themes/Latte/Green/userChrome.css         | 18 +++++++++++++++---
 themes/Latte/Lavender/userChrome.css      | 18 +++++++++++++++---
 themes/Latte/Maroon/userChrome.css        | 18 +++++++++++++++---
 themes/Latte/Mauve/userChrome.css         | 18 +++++++++++++++---
 themes/Latte/Peach/userChrome.css         | 18 +++++++++++++++---
 themes/Latte/Pink/userChrome.css          | 18 +++++++++++++++---
 themes/Latte/Red/userChrome.css           | 18 +++++++++++++++---
 themes/Latte/Rosewater/userChrome.css     | 18 +++++++++++++++---
 themes/Latte/Sapphire/userChrome.css      | 18 +++++++++++++++---
 themes/Latte/Sky/userChrome.css           | 18 +++++++++++++++---
 themes/Latte/Teal/userChrome.css          | 18 +++++++++++++++---
 themes/Latte/Yellow/userChrome.css        | 18 +++++++++++++++---
 themes/Macchiato/Blue/userChrome.css      | 18 +++++++++++++++---
 themes/Macchiato/Flamingo/userChrome.css  | 18 +++++++++++++++---
 themes/Macchiato/Green/userChrome.css     | 18 +++++++++++++++---
 themes/Macchiato/Lavender/userChrome.css  | 18 +++++++++++++++---
 themes/Macchiato/Maroon/userChrome.css    | 18 +++++++++++++++---
 themes/Macchiato/Mauve/userChrome.css     | 18 +++++++++++++++---
 themes/Macchiato/Peach/userChrome.css     | 18 +++++++++++++++---
 themes/Macchiato/Pink/userChrome.css      | 18 +++++++++++++++---
 themes/Macchiato/Red/userChrome.css       | 18 +++++++++++++++---
 themes/Macchiato/Rosewater/userChrome.css | 18 +++++++++++++++---
 themes/Macchiato/Sapphire/userChrome.css  | 18 +++++++++++++++---
 themes/Macchiato/Sky/userChrome.css       | 18 +++++++++++++++---
 themes/Macchiato/Teal/userChrome.css      | 18 +++++++++++++++---
 themes/Macchiato/Yellow/userChrome.css    | 18 +++++++++++++++---
 themes/Mocha/Blue/userChrome.css          | 18 +++++++++++++++---
 themes/Mocha/Flamingo/userChrome.css      | 18 +++++++++++++++---
 themes/Mocha/Green/userChrome.css         | 18 +++++++++++++++---
 themes/Mocha/Lavender/userChrome.css      | 18 +++++++++++++++---
 themes/Mocha/Maroon/userChrome.css        | 18 +++++++++++++++---
 themes/Mocha/Mauve/userChrome.css         | 18 +++++++++++++++---
 themes/Mocha/Peach/userChrome.css         | 18 +++++++++++++++---
 themes/Mocha/Pink/userChrome.css          | 18 +++++++++++++++---
 themes/Mocha/Red/userChrome.css           | 18 +++++++++++++++---
 themes/Mocha/Rosewater/userChrome.css     | 18 +++++++++++++++---
 themes/Mocha/Sapphire/userChrome.css      | 18 +++++++++++++++---
 themes/Mocha/Sky/userChrome.css           | 18 +++++++++++++++---
 themes/Mocha/Teal/userChrome.css          | 18 +++++++++++++++---
 themes/Mocha/Yellow/userChrome.css        | 18 +++++++++++++++---
 56 files changed, 840 insertions(+), 168 deletions(-)

diff --git a/themes/Frappe/Blue/userChrome.css b/themes/Frappe/Blue/userChrome.css
index 532f2e6..863b0bc 100644
--- a/themes/Frappe/Blue/userChrome.css
+++ b/themes/Frappe/Blue/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Blue userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #8caaee !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #292c3c !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #292c3c !important;
   }
 
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Frappe/Flamingo/userChrome.css b/themes/Frappe/Flamingo/userChrome.css
index c2fe894..ef1fac8 100644
--- a/themes/Frappe/Flamingo/userChrome.css
+++ b/themes/Frappe/Flamingo/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Flamingo userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #eebebe !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #292c3c !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #292c3c !important;
   }
 
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Frappe/Green/userChrome.css b/themes/Frappe/Green/userChrome.css
index 99d3a17..4d41aa1 100644
--- a/themes/Frappe/Green/userChrome.css
+++ b/themes/Frappe/Green/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Green userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #a6d189 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #292c3c !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #292c3c !important;
   }
 
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Frappe/Lavender/userChrome.css b/themes/Frappe/Lavender/userChrome.css
index 87e2524..dbc3426 100644
--- a/themes/Frappe/Lavender/userChrome.css
+++ b/themes/Frappe/Lavender/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Lavender userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #babbf1 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #292c3c !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #292c3c !important;
   }
 
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Frappe/Maroon/userChrome.css b/themes/Frappe/Maroon/userChrome.css
index 9af6acb..a46b072 100644
--- a/themes/Frappe/Maroon/userChrome.css
+++ b/themes/Frappe/Maroon/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Maroon userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #ea999c !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #292c3c !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #292c3c !important;
   }
 
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Frappe/Mauve/userChrome.css b/themes/Frappe/Mauve/userChrome.css
index b8295af..577f481 100644
--- a/themes/Frappe/Mauve/userChrome.css
+++ b/themes/Frappe/Mauve/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Mauve userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #ca9ee6 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #292c3c !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #292c3c !important;
   }
 
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Frappe/Peach/userChrome.css b/themes/Frappe/Peach/userChrome.css
index 222573c..f045eb4 100644
--- a/themes/Frappe/Peach/userChrome.css
+++ b/themes/Frappe/Peach/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Peach userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #ef9f76 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #292c3c !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #292c3c !important;
   }
 
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Frappe/Pink/userChrome.css b/themes/Frappe/Pink/userChrome.css
index a4f372c..f494596 100644
--- a/themes/Frappe/Pink/userChrome.css
+++ b/themes/Frappe/Pink/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Pink userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #f4b8e4 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #292c3c !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #292c3c !important;
   }
 
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Frappe/Red/userChrome.css b/themes/Frappe/Red/userChrome.css
index eab1738..4ceb39a 100644
--- a/themes/Frappe/Red/userChrome.css
+++ b/themes/Frappe/Red/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Red userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #e78284 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #292c3c !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #292c3c !important;
   }
 
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Frappe/Rosewater/userChrome.css b/themes/Frappe/Rosewater/userChrome.css
index 6c0c54e..d6b16ee 100644
--- a/themes/Frappe/Rosewater/userChrome.css
+++ b/themes/Frappe/Rosewater/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Rosewater userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #f2d5cf !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #292c3c !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #292c3c !important;
   }
 
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Frappe/Sapphire/userChrome.css b/themes/Frappe/Sapphire/userChrome.css
index 663f900..f49af2a 100644
--- a/themes/Frappe/Sapphire/userChrome.css
+++ b/themes/Frappe/Sapphire/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Sapphire userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #85c1dc !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #292c3c !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #292c3c !important;
   }
 
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Frappe/Sky/userChrome.css b/themes/Frappe/Sky/userChrome.css
index 49bb89d..47e9d9b 100644
--- a/themes/Frappe/Sky/userChrome.css
+++ b/themes/Frappe/Sky/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Sky userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #99d1db !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #292c3c !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #292c3c !important;
   }
 
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Frappe/Teal/userChrome.css b/themes/Frappe/Teal/userChrome.css
index 06c5e47..602da83 100644
--- a/themes/Frappe/Teal/userChrome.css
+++ b/themes/Frappe/Teal/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Teal userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #81c8be !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #292c3c !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #292c3c !important;
   }
 
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Frappe/Yellow/userChrome.css b/themes/Frappe/Yellow/userChrome.css
index f49f83e..6b49169 100644
--- a/themes/Frappe/Yellow/userChrome.css
+++ b/themes/Frappe/Yellow/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Yellow userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #e5c890 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #292c3c !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #292c3c !important;
   }
 
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Latte/Blue/userChrome.css b/themes/Latte/Blue/userChrome.css
index 5a8d861..bfc1d22 100644
--- a/themes/Latte/Blue/userChrome.css
+++ b/themes/Latte/Blue/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Blue userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #1e66f5 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #e6e9ef !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #e6e9ef !important;
   }
 
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Latte/Flamingo/userChrome.css b/themes/Latte/Flamingo/userChrome.css
index aff617f..8f4432b 100644
--- a/themes/Latte/Flamingo/userChrome.css
+++ b/themes/Latte/Flamingo/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Flamingo userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #dd7878 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #e6e9ef !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #e6e9ef !important;
   }
 
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Latte/Green/userChrome.css b/themes/Latte/Green/userChrome.css
index ad2e7ad..e4b7573 100644
--- a/themes/Latte/Green/userChrome.css
+++ b/themes/Latte/Green/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Green userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #40a02b !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #e6e9ef !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #e6e9ef !important;
   }
 
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Latte/Lavender/userChrome.css b/themes/Latte/Lavender/userChrome.css
index 3a89410..338e797 100644
--- a/themes/Latte/Lavender/userChrome.css
+++ b/themes/Latte/Lavender/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Lavender userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #7287fd !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #e6e9ef !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #e6e9ef !important;
   }
 
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Latte/Maroon/userChrome.css b/themes/Latte/Maroon/userChrome.css
index 4cc854c..83c1e6f 100644
--- a/themes/Latte/Maroon/userChrome.css
+++ b/themes/Latte/Maroon/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Maroon userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #e64553 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #e6e9ef !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #e6e9ef !important;
   }
 
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Latte/Mauve/userChrome.css b/themes/Latte/Mauve/userChrome.css
index f4120fc..fc00f00 100644
--- a/themes/Latte/Mauve/userChrome.css
+++ b/themes/Latte/Mauve/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Mauve userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #8839ef !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #e6e9ef !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #e6e9ef !important;
   }
 
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Latte/Peach/userChrome.css b/themes/Latte/Peach/userChrome.css
index f8f7b01..a24c74f 100644
--- a/themes/Latte/Peach/userChrome.css
+++ b/themes/Latte/Peach/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Peach userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #fe640b !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #e6e9ef !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #e6e9ef !important;
   }
 
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Latte/Pink/userChrome.css b/themes/Latte/Pink/userChrome.css
index 43128f6..2bb2d23 100644
--- a/themes/Latte/Pink/userChrome.css
+++ b/themes/Latte/Pink/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Pink userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #ea76cb !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #e6e9ef !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #e6e9ef !important;
   }
 
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Latte/Red/userChrome.css b/themes/Latte/Red/userChrome.css
index de8358b..4e473dd 100644
--- a/themes/Latte/Red/userChrome.css
+++ b/themes/Latte/Red/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Red userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #d20f39 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #e6e9ef !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #e6e9ef !important;
   }
 
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Latte/Rosewater/userChrome.css b/themes/Latte/Rosewater/userChrome.css
index 128e444..bad7f7c 100644
--- a/themes/Latte/Rosewater/userChrome.css
+++ b/themes/Latte/Rosewater/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Rosewater userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #dc8a78 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #e6e9ef !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #e6e9ef !important;
   }
 
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Latte/Sapphire/userChrome.css b/themes/Latte/Sapphire/userChrome.css
index fcf11c4..83d34f5 100644
--- a/themes/Latte/Sapphire/userChrome.css
+++ b/themes/Latte/Sapphire/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Sapphire userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #209fb5 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #e6e9ef !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #e6e9ef !important;
   }
 
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Latte/Sky/userChrome.css b/themes/Latte/Sky/userChrome.css
index 9fa141d..90118dd 100644
--- a/themes/Latte/Sky/userChrome.css
+++ b/themes/Latte/Sky/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Sky userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #04a5e5 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #e6e9ef !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #e6e9ef !important;
   }
 
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Latte/Teal/userChrome.css b/themes/Latte/Teal/userChrome.css
index 6b97945..2cedccf 100644
--- a/themes/Latte/Teal/userChrome.css
+++ b/themes/Latte/Teal/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Teal userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #179299 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #e6e9ef !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #e6e9ef !important;
   }
 
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Latte/Yellow/userChrome.css b/themes/Latte/Yellow/userChrome.css
index 10424f9..690c90d 100644
--- a/themes/Latte/Yellow/userChrome.css
+++ b/themes/Latte/Yellow/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Yellow userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #df8e1d !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #e6e9ef !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #e6e9ef !important;
   }
 
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Macchiato/Blue/userChrome.css b/themes/Macchiato/Blue/userChrome.css
index 854612d..a397041 100644
--- a/themes/Macchiato/Blue/userChrome.css
+++ b/themes/Macchiato/Blue/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Blue userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #8aadf4 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #1e2030 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #1e2030 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Macchiato/Flamingo/userChrome.css b/themes/Macchiato/Flamingo/userChrome.css
index 51b6025..d603522 100644
--- a/themes/Macchiato/Flamingo/userChrome.css
+++ b/themes/Macchiato/Flamingo/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Flamingo userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #f0c6c6 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #1e2030 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #1e2030 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Macchiato/Green/userChrome.css b/themes/Macchiato/Green/userChrome.css
index c870312..786c72c 100644
--- a/themes/Macchiato/Green/userChrome.css
+++ b/themes/Macchiato/Green/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Green userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #a6da95 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #1e2030 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #1e2030 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Macchiato/Lavender/userChrome.css b/themes/Macchiato/Lavender/userChrome.css
index 22137bb..bccd895 100644
--- a/themes/Macchiato/Lavender/userChrome.css
+++ b/themes/Macchiato/Lavender/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Lavender userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #b7bdf8 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #1e2030 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #1e2030 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Macchiato/Maroon/userChrome.css b/themes/Macchiato/Maroon/userChrome.css
index e1b6e4e..79ddc28 100644
--- a/themes/Macchiato/Maroon/userChrome.css
+++ b/themes/Macchiato/Maroon/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Maroon userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #ee99a0 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #1e2030 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #1e2030 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Macchiato/Mauve/userChrome.css b/themes/Macchiato/Mauve/userChrome.css
index 7420424..4b1918f 100644
--- a/themes/Macchiato/Mauve/userChrome.css
+++ b/themes/Macchiato/Mauve/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Mauve userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #c6a0f6 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #1e2030 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #1e2030 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Macchiato/Peach/userChrome.css b/themes/Macchiato/Peach/userChrome.css
index 91e78b2..b914f92 100644
--- a/themes/Macchiato/Peach/userChrome.css
+++ b/themes/Macchiato/Peach/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Peach userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #f5a97f !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #1e2030 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #1e2030 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Macchiato/Pink/userChrome.css b/themes/Macchiato/Pink/userChrome.css
index 6449a97..8899893 100644
--- a/themes/Macchiato/Pink/userChrome.css
+++ b/themes/Macchiato/Pink/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Pink userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #f5bde6 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #1e2030 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #1e2030 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Macchiato/Red/userChrome.css b/themes/Macchiato/Red/userChrome.css
index eb8c896..d35e4e3 100644
--- a/themes/Macchiato/Red/userChrome.css
+++ b/themes/Macchiato/Red/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Red userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #ed8796 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #1e2030 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #1e2030 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Macchiato/Rosewater/userChrome.css b/themes/Macchiato/Rosewater/userChrome.css
index 6126534..eaee6b8 100644
--- a/themes/Macchiato/Rosewater/userChrome.css
+++ b/themes/Macchiato/Rosewater/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Rosewater userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #f4dbd6 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #1e2030 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #1e2030 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Macchiato/Sapphire/userChrome.css b/themes/Macchiato/Sapphire/userChrome.css
index efcd862..c1e107c 100644
--- a/themes/Macchiato/Sapphire/userChrome.css
+++ b/themes/Macchiato/Sapphire/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Sapphire userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #7dc4e4 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #1e2030 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #1e2030 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Macchiato/Sky/userChrome.css b/themes/Macchiato/Sky/userChrome.css
index b0ff575..4f94774 100644
--- a/themes/Macchiato/Sky/userChrome.css
+++ b/themes/Macchiato/Sky/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Sky userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #91d7e3 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #1e2030 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #1e2030 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Macchiato/Teal/userChrome.css b/themes/Macchiato/Teal/userChrome.css
index 7705bde..90140be 100644
--- a/themes/Macchiato/Teal/userChrome.css
+++ b/themes/Macchiato/Teal/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Teal userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #8bd5ca !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #1e2030 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #1e2030 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Macchiato/Yellow/userChrome.css b/themes/Macchiato/Yellow/userChrome.css
index 77197a7..73a8004 100644
--- a/themes/Macchiato/Yellow/userChrome.css
+++ b/themes/Macchiato/Yellow/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Yellow userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #eed49f !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #1e2030 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #1e2030 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Mocha/Blue/userChrome.css b/themes/Mocha/Blue/userChrome.css
index c387c36..06c2b24 100644
--- a/themes/Mocha/Blue/userChrome.css
+++ b/themes/Mocha/Blue/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Blue userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #89b4fa !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #181825 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #181825 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }
diff --git a/themes/Mocha/Flamingo/userChrome.css b/themes/Mocha/Flamingo/userChrome.css
index f4cae92..8bf284b 100644
--- a/themes/Mocha/Flamingo/userChrome.css
+++ b/themes/Mocha/Flamingo/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Flamingo userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #f2cdcd !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #181825 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #181825 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }
diff --git a/themes/Mocha/Green/userChrome.css b/themes/Mocha/Green/userChrome.css
index 1b57c03..26ed009 100644
--- a/themes/Mocha/Green/userChrome.css
+++ b/themes/Mocha/Green/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Green userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #a6e3a1 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #181825 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #181825 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }
diff --git a/themes/Mocha/Lavender/userChrome.css b/themes/Mocha/Lavender/userChrome.css
index 1018e50..158991b 100644
--- a/themes/Mocha/Lavender/userChrome.css
+++ b/themes/Mocha/Lavender/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Lavender userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #b4befe !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #181825 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #181825 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }
diff --git a/themes/Mocha/Maroon/userChrome.css b/themes/Mocha/Maroon/userChrome.css
index 5a4b0ca..149205a 100644
--- a/themes/Mocha/Maroon/userChrome.css
+++ b/themes/Mocha/Maroon/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Maroon userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #eba0ac !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #181825 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #181825 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }
diff --git a/themes/Mocha/Mauve/userChrome.css b/themes/Mocha/Mauve/userChrome.css
index 33972de..d872e53 100644
--- a/themes/Mocha/Mauve/userChrome.css
+++ b/themes/Mocha/Mauve/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Mauve userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #cba6f7 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #181825 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #181825 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }
diff --git a/themes/Mocha/Peach/userChrome.css b/themes/Mocha/Peach/userChrome.css
index ec687f3..140209d 100644
--- a/themes/Mocha/Peach/userChrome.css
+++ b/themes/Mocha/Peach/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Peach userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #fab387 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #181825 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #181825 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }
diff --git a/themes/Mocha/Pink/userChrome.css b/themes/Mocha/Pink/userChrome.css
index 40e3e95..72236ac 100644
--- a/themes/Mocha/Pink/userChrome.css
+++ b/themes/Mocha/Pink/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Pink userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #f5c2e7 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #181825 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #181825 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }
diff --git a/themes/Mocha/Red/userChrome.css b/themes/Mocha/Red/userChrome.css
index c6954d0..1bb488e 100644
--- a/themes/Mocha/Red/userChrome.css
+++ b/themes/Mocha/Red/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Red userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #f38ba8 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #181825 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #181825 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }
diff --git a/themes/Mocha/Rosewater/userChrome.css b/themes/Mocha/Rosewater/userChrome.css
index 1901d96..cf43da3 100644
--- a/themes/Mocha/Rosewater/userChrome.css
+++ b/themes/Mocha/Rosewater/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Rosewater userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #f5e0dc !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #181825 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #181825 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }
diff --git a/themes/Mocha/Sapphire/userChrome.css b/themes/Mocha/Sapphire/userChrome.css
index ef942e8..fe9f997 100644
--- a/themes/Mocha/Sapphire/userChrome.css
+++ b/themes/Mocha/Sapphire/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Sapphire userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #74c7ec !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #181825 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #181825 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }
diff --git a/themes/Mocha/Sky/userChrome.css b/themes/Mocha/Sky/userChrome.css
index e075b87..6d53720 100644
--- a/themes/Mocha/Sky/userChrome.css
+++ b/themes/Mocha/Sky/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Sky userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #89dceb !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #181825 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #181825 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }
diff --git a/themes/Mocha/Teal/userChrome.css b/themes/Mocha/Teal/userChrome.css
index db4c090..101fd9e 100644
--- a/themes/Mocha/Teal/userChrome.css
+++ b/themes/Mocha/Teal/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Teal userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #94e2d5 !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #181825 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #181825 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }
diff --git a/themes/Mocha/Yellow/userChrome.css b/themes/Mocha/Yellow/userChrome.css
index 8222a18..452278a 100644
--- a/themes/Mocha/Yellow/userChrome.css
+++ b/themes/Mocha/Yellow/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Yellow userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #f9e2af !important;
@@ -27,7 +26,7 @@
     --toolbox-bgcolor-inactive: #181825 !important;
   }
 
-  #permissions-granted-icon{
+  #permissions-granted-icon {
     color: #181825 !important;
   }
 
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }