Merge pull request zen-browser#642 from JLBlk/UpateSuperUrlBar

Update Theme: Super Url Bar
KiKaraage · Oct 28, 2024 · 0a17258 · 0a17258
2 parents 6df57e0 + 5cbc683
commit 0a17258
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 40 deletions.
diff --git a/themes/d93e67f8-e5e1-401e-9b82-f9d5bab231e6/chrome.css b/themes/d93e67f8-e5e1-401e-9b82-f9d5bab231e6/chrome.css
@@ -96,44 +96,57 @@
 }
 
 /* Custom Colors for Url Bar */
-:root:has(#theme-Super-Url-Bar[uc-urlbar-custom-bg-color-enabled="Normal"]) {
-  --zen-colors-input-bg: var(--uc-urlbar-custom-bg-color) !important;
-}
-
-:root:has(#theme-Super-Url-Bar[uc-urlbar-custom-bg-color-enabled="Advanced"]) {
-  --zen-urlbar-background: var(--uc-urlbar-custom-bg-color) !important;
-  --zen-colors-input-bg: var(--uc-urlbar-custom-bg-color) !important;
-}
+@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-enabled="Normal"],
-          #theme-Super-Url-Bar[uc-urlbar-custom-bg-color-enabled="Advanced"]) {
   #identity-icon-box, #identity-permission-box {
     background-color: color-mix(in srgb, var(--uc-urlbar-custom-bg-color) 90%, light-dark(black, white)) !important;
   }
-  #tracking-protection-icon-container, .urlbar-page-action, #picture-in-picture-button, #reader-mode-button {
+  #tracking-protection-icon-container, .urlbar-page-action, #picture-in-picture-button, #reader-mode-button, #zen-split-views-box {
     &:hover:not([open="true"]) {
       background-color: color-mix(in srgb, var(--uc-urlbar-custom-bg-color) 90%, light-dark(black, white)) !important;
     }
   }
 }
 
-/* Removes the border of the url bar when toggled */
-@media (-moz-bool-pref: "uc.urlbar.border.removed") {
+/* Adds a border of the url bar when toggled */
+@media (-moz-bool-pref: "uc.urlbar.border") {
   #urlbar {
-    border: none !important;
+    border: 1px solid var(--zen-colors-border) !important;
+  }
+}
+
+/* Hides the container info in url-bar */
+:root:has(#theme-Super-Url-Bar[uc-urlbar-hide-container-info="hideLabel"]) {
+  #userContext-label {
+    display: none;
+  }
+}
+:root:has(#theme-Super-Url-Bar[uc-urlbar-hide-container-info="hideIcon"]) {
+  #userContext-indicator {
+    display: none;
+  }
+}
+:root:has(#theme-Super-Url-Bar[uc-urlbar-hide-container-info="hideIconLabel"]) {
+  #userContext-icons {
+    display: none;
   }
 }
 
 /* Makes all the hidden icons appear on hover */
 @media not (-moz-bool-pref: "uc.urlbar.icon.show-on-hover") {
   :root {
     --position-var: absolute;
+    --pointer-events: none;
   }
 }
 @media (-moz-bool-pref: "uc.urlbar.icon.show-on-hover") {
 
   :root {
     --position-var: relative;
+    --pointer-events: all;
   }
 
   @media (-moz-bool-pref: "uc.urlbar.icon.zoom.removed") {
@@ -166,11 +179,11 @@
       opacity: 1;
     } 
   }
-  @media (-moz-bool-pref: "uc.urlbar.icon.container.removed") {
-    #urlbar:hover #userContext-icons {
+  @media (-moz-bool-pref: "uc.urlbar.icon.split-view.removed") {
+    #urlbar:hover #zen-split-views-box {
       position: relative;
       opacity: 1;
-    } 
+    }
   }
   @media (-moz-bool-pref: "uc.urlbar.icon.left-side.removed") {
     #urlbar:hover #identity-box {
@@ -184,48 +197,55 @@
 @media (-moz-bool-pref: "uc.urlbar.icon.zoom.removed") {
   #urlbar-zoom-button {
     opacity: 0;
+    pointer-events: var(--pointer-events) !important;
     position: var(--position-var);
     transition: 100ms linear, opacity 200ms linear;
   }
 }
 @media (-moz-bool-pref: "uc.urlbar.icon.shield.removed") {
   #tracking-protection-icon-container {
     opacity: 0;
+    pointer-events: var(--pointer-events) !important;
     position: var(--position-var);
     transition: 100ms linear, opacity 200ms linear;
   }
 }
 @media (-moz-bool-pref: "uc.urlbar.icon.bookmark.removed") {
   #star-button-box {
     opacity: 0;
+    pointer-events: var(--pointer-events) !important;
     position: var(--position-var);
     transition: 100ms linear, opacity 200ms linear;
   }
 }
 @media (-moz-bool-pref: "uc.urlbar.icon.reader-mode.removed") {
   #reader-mode-button {
     opacity: 0;
+    pointer-events: var(--pointer-events) !important;
     position: var(--position-var);
     transition: 100ms linear, opacity 200ms linear;
   }
 }
 @media (-moz-bool-pref: "uc.urlbar.icon.pip.removed") {
   #picture-in-picture-button {
     opacity: 0;
+    pointer-events: var(--pointer-events) !important;
     position: var(--position-var);
     transition: 100ms linear, opacity 200ms linear;
   }
 }
-@media (-moz-bool-pref: "uc.urlbar.icon.container.removed") {
-  #userContext-icons {
+@media (-moz-bool-pref: "uc.urlbar.icon.split-view.removed") {
+  #zen-split-views-box {
     opacity: 0;
+    pointer-events: var(--pointer-events) !important;
     position: var(--position-var);
     transition: 100ms linear, opacity 200ms linear;
   }
 }
 @media (-moz-bool-pref: "uc.urlbar.icon.left-side.removed") {
   #identity-box {
     opacity: 0;
+    pointer-events: var(--pointer-events) !important;
     position: var(--position-var);
     transition: 100ms linear, opacity 200ms linear;
   }

diff --git a/themes/d93e67f8-e5e1-401e-9b82-f9d5bab231e6/preferences.json b/themes/d93e67f8-e5e1-401e-9b82-f9d5bab231e6/preferences.json
@@ -23,8 +23,8 @@
         ]
     },
     {
-        "property": "uc.urlbar.border.removed",
-        "label": "Removes the border of the url bar",
+        "property": "uc.urlbar.border",
+        "label": "Adds a border to the url bar",
         "type": "checkbox",
         "disabledOn": []
     },
@@ -62,34 +62,43 @@
             }
         ]
     },
+    {
+        "property": "uc.urlbar.custom-bg-color.enabled",
+        "label": "Enables Custom Colors for the Url Bar",
+        "type": "checkbox"
+    },
+    {
+        "property": "uc.urlbar.custom-bg-color",
+        "label": "Custom Color for the Url Bar (Checkbox above needs to be active)",
+        "placeholder": "Enter Color Code",
+        "type": "string"
+    },
     {
         "property": "browser.urlbar.openintab",
         "label": "Always open websites in a new tab when using url bar",
         "type": "checkbox"
     },
     {
-        "property": "uc.urlbar.custom-bg-color.enabled",
-        "label": "Enables Custom Colors for the Url Bar",
+        "property": "uc.urlbar.hide.container-info",
+        "label": "Hides the container info",
         "type": "dropdown",
         "placeholder": "Disabled",
         "disabledOn": [],
         "options": [
             {
-                "label": "Only color url bar when not in focus",
-                "value": "Normal"
+                "label": "Only hide the label",
+                "value": "hideLabel"
             },
             {
-                "label": "Always color url bar (not focused + focused)",
-                "value": "Advanced"
+                "label": "Only hide the icon",
+                "value": "hideIcon"
+            },
+            {
+                "label": "Hide both, icon and label",
+                "value": "hideIconLabel"
             }
         ]
     },
-    {
-        "property": "uc.urlbar.custom-bg-color",
-        "label": "Custom Color for the Url Bar (Checkbox above needs to be active)",
-        "placeholder": "Enter Color Code",
-        "type": "string"
-    },
     {
         "property": "uc.urlbar.icon.zoom.removed",
         "label": "Hides the Zoom icon",
@@ -121,8 +130,8 @@
         "disabledOn": []
     },
     {
-        "property": "uc.urlbar.icon.container.removed",
-        "label": "Hides the Container Tab icon and text",
+        "property": "uc.urlbar.icon.split-view.removed",
+        "label": "Hides the Split View icon",
         "type": "checkbox",
         "disabledOn": []
     },
@@ -137,4 +146,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
@@ -1,6 +1,6 @@
 # Super Url Bar
 
-## This **Zen theme** gives you 4 optional settings (in Zen's theme settings):
+## Settings:
   - Adjust border radius of the url bar (Circle like corners)
   - Center url text
   - Remove the border of the url bar
@@ -14,6 +14,7 @@
     - Bookmark (Star) icon
     - Reader-Mode icon
     - PiP icon
-    - Container Tab icon and text
+    - Container Tab icon and/or text
+    - Split-View icon
     - Left side icons
   - Show hidden icons when hovering the url bar
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.0",
+    "version": "1.4.1",
     "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"
-}
+}