Merge pull request #686 from JLBlk/UpdateSuperUrlBar

Update Theme: Super Url Bar
zen-browser · Nov 3, 2024 · 07fc851 · 07fc851
2 parents 6b9e007 + 0e6dfd7
commit 07fc851
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 17 deletions.
diff --git a/themes/d93e67f8-e5e1-401e-9b82-f9d5bab231e6/chrome.css b/themes/d93e67f8-e5e1-401e-9b82-f9d5bab231e6/chrome.css
@@ -79,28 +79,38 @@
     position: fixed;
     pointer-events: none;
 
-    width: 100vw;
+    width: 200vw;
     height: 100vh;
 
     top: 0px;
-    left: 0px;
+    left: -50px;
 
     background-color: rgba(0, 0, 0, 0.3);
     backdrop-filter: blur(var(--blur-intensity));
 
     z-index: -1;
   }
-
-  /* Scuffed af solution to make blur work (need to find better solution) */
-  clip-path: content-box;
 }
 
 /* Custom Colors for Url Bar */
-@media (-moz-bool-pref: "uc.urlbar.custom-bg-color.enabled") {
-  #urlbar-background {
-    background-color: var(--uc-urlbar-custom-bg-color) !important;
-  }
+:root:has(#theme-Super-Url-Bar[uc-urlbar-custom-bg-color-mode="noFocus"]) {
+    #urlbar:not([focused="true"]):not([breakout-extend="true"]) > #urlbar-background {
+        background: var(--uc-urlbar-custom-bg-color) !important;
+    }
+}
+:root:has(#theme-Super-Url-Bar[uc-urlbar-custom-bg-color-mode="Focus"]) {
+    #urlbar:is([focused], [open]) > #urlbar-background {
+        background: var(--uc-urlbar-custom-bg-color) !important;
+    }
+}
+:root:has(#theme-Super-Url-Bar[uc-urlbar-custom-bg-color-mode="AlwaysColor"]) {
+    #urlbar-background {
+        background: var(--uc-urlbar-custom-bg-color) !important;
+    }
+}
 
+:root:has(#theme-Super-Url-Bar[uc-urlbar-custom-bg-color-mode="AlwaysColor"],
+          #theme-Super-Url-Bar[uc-urlbar-custom-bg-color-mode="noFocus"]) {
   #identity-icon-box, #identity-permission-box {
     background-color: color-mix(in srgb, var(--uc-urlbar-custom-bg-color) 90%, light-dark(black, white)) !important;
   }
@@ -111,7 +121,7 @@
   }
 }
 
-/* Adds a border of the url bar when toggled */
+/* Adds a border to the url bar when toggled */
 @media (-moz-bool-pref: "uc.urlbar.border") {
   #urlbar {
     border: 1px solid var(--zen-colors-border) !important;

diff --git a/themes/d93e67f8-e5e1-401e-9b82-f9d5bab231e6/preferences.json b/themes/d93e67f8-e5e1-401e-9b82-f9d5bab231e6/preferences.json
@@ -63,13 +63,29 @@
         ]
     },
     {
-        "property": "uc.urlbar.custom-bg-color.enabled",
+        "property": "uc.urlbar.custom-bg-color.mode",
         "label": "Enables Custom Colors for the Url Bar",
-        "type": "checkbox"
+        "placeholder": "Disabled",
+        "type": "dropdown",
+        "disabledOn": [],
+        "options": [
+            {
+                "label": "Coloring when url bar is in focus",
+                "value": "Focus"
+            },
+            {
+                "label": "Coloring when url bar is NOT in focus",
+                "value": "noFocus"
+            },
+            {
+                "label": "Always color url bar",
+                "value": "AlwaysColor"
+            }
+        ]
     },
     {
         "property": "uc.urlbar.custom-bg-color",
-        "label": "Custom Color for the Url Bar (Checkbox above needs to be active)",
+        "label": "Custom Color for the Url Bar (Dropdown above needs to be enabled)",
         "placeholder": "Enter Color Code",
         "type": "string"
     },
@@ -146,4 +162,4 @@
         "label": "Make all the hidden icons show when hovering the url bar",
         "type": "checkbox"
     }
-]
+]
diff --git a/themes/d93e67f8-e5e1-401e-9b82-f9d5bab231e6/readme.md b/themes/d93e67f8-e5e1-401e-9b82-f9d5bab231e6/readme.md
@@ -7,7 +7,7 @@
   - Move 1 button that's directly next to the url bar (you can do that by using 'Customize Toolbar') into the url bar (Credit: [YouCanTouCan](https://github.com/YouCanTouCan))
   - Blur the background when the url bar is in focus (5 Levels of Intensity)
   - Always open Websites in a New Tab from Url Bar
-  - Custom Colors for your url bar
+  - Custom Colors for your url bar (option to color when in focus/not in focus or both)
   - Hide icons inside the url bar:
     - Zoom icon
     - Shield icon

diff --git a/themes/d93e67f8-e5e1-401e-9b82-f9d5bab231e6/theme.json b/themes/d93e67f8-e5e1-401e-9b82-f9d5bab231e6/theme.json
@@ -7,11 +7,11 @@
     "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/d93e67f8-e5e1-401e-9b82-f9d5bab231e6/readme.md",
     "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/d93e67f8-e5e1-401e-9b82-f9d5bab231e6/image.png",
     "author": "JLBlk",
-    "version": "1.4.1",
+    "version": "1.4.2",
     "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/d93e67f8-e5e1-401e-9b82-f9d5bab231e6/preferences.json",
     "tags": [
         "urlbar"
     ],
     "createdAt": "2024-08-31",
     "updatedAt": "2024-10-19"
-}
+}