Update Theme: SuperGradient (#502)

* Update theme.json * Update chrome.css * Update chrome.css * Update theme.json * Update preferences.json * Update readme.md
zen-browser · Oct 2, 2024 · 539d1e5 · 539d1e5
1 parent 314f7f8
commit 539d1e5
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 7 deletions.
diff --git a/themes/af7ee14f-e9d4-4806-8438-c59b02b77715/chrome.css b/themes/af7ee14f-e9d4-4806-8438-c59b02b77715/chrome.css
@@ -137,6 +137,41 @@
   --switched-accent-color: hsla(310, 50%, var(--accent-color-lightness), 0.4);
 }
 
+:root:has(#theme-SuperGradient[theme-supergradient-preset="GalaxyDream"]) {
+
+  --zen-main-browser-background: radial-gradient(ellipse, var(--zen-browser-gradient-base, #1B1E27) 20%, light-dark(#ffffff, #1b1b1b) 100%) !important;
+
+  /* Makes the gradient work in compact mode */
+  @media (-moz-bool-pref:"zen.view.compact.hide-toolbar") and (-moz-bool-pref: "zen.view.compact") {
+    #nav-bar::before, #nav-bar { /* Attribute "data-l10n-id" makes the gradient work with floating toolbar mod bookmarks toolbar */
+      background: radial-gradient(ellipse at bottom, var(--zen-browser-gradient-base, #1B1E27) 2%, light-dark(#ffffff, #1b1b1b) 100%) !important;
+    }
+    #PersonalToolbar[data-l10n-id="bookmarks-toolbar"] {
+      background: radial-gradient(ellipse at top, var(--zen-browser-gradient-base, #1B1E27) 2%, light-dark(#ffffff, #1b1b1b) 100%) !important;
+    }
+  }    
+  @media (-moz-bool-pref:"zen.view.compact.hide-tabbar") and (-moz-bool-pref: "zen.view.compact") {
+    #navigator-toolbox {
+      --zen-themed-toolbar-bg: radial-gradient(ellipse at right, var(--zen-browser-gradient-base, #1B1E27) 1%, light-dark(#ffffff, #1b1b1b) 95%) !important;
+    }
+  }
+
+  /* Make gradient work when "Expand on hover" is enabled */
+  @media (-moz-bool-pref: "zen.view.sidebar-expanded") and (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover") {
+    #navigator-toolbox[zen-has-hover],
+    #navigator-toolbox:focus-within,
+    #navigator-toolbox[movingtab],
+    #navigator-toolbox[flash-popup],
+    #navigator-toolbox[has-popup-menu],
+    #navigator-toolbox:has(.tabbrowser-tab:active),
+    #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
+      #TabsToolbar {
+        background: radial-gradient(ellipse at right, var(--zen-browser-gradient-base, #1B1E27) 1%, light-dark(#ffffff, #1b1b1b) 95%) !important;
+      }
+    }
+  }
+}
+
 :root:has(#theme-SuperGradient[theme-supergradient-preset="CustomGradient"]) {
   --gradient-color1: var(--uc-supergradient-custom-colors-1);
   --gradient-color2: var(--uc-supergradient-custom-colors-2);
@@ -173,13 +208,13 @@
 
 /* Makes the gradient work in compact mode */
 @media (-moz-bool-pref:"zen.view.compact.hide-toolbar") and (-moz-bool-pref: "zen.view.compact") {
-  #nav-bar {
+  #nav-bar::before, #nav-bar, #PersonalToolbar[data-l10n-id="bookmarks-toolbar"] { /* Attribute "data-l10n-id" makes the gradient work with floating toolbar mod bookmarks toolbar */
     background: radial-gradient(var(--gradient-start), var(--gradient-color1), var(--gradient-color2), var(--gradient-color3), var(--gradient-color4)) !important;
   }
 }    
 @media (-moz-bool-pref:"zen.view.compact.hide-tabbar") and (-moz-bool-pref: "zen.view.compact") {
   #navigator-toolbox {
-    background: radial-gradient(var(--gradient-start), var(--gradient-color1), var(--gradient-color2), var(--gradient-color3), var(--gradient-color4)) !important;
+    --zen-themed-toolbar-bg: radial-gradient(var(--gradient-start), var(--gradient-color1), var(--gradient-color2), var(--gradient-color3), var(--gradient-color4)) !important;
   }
 }
 
@@ -312,7 +347,7 @@
       top: 0px;
       left: 0px;
 
-      border-top-right-radius: 5px;
+      border-bottom-left-radius: 5px;
       border-bottom-right-radius: 5px;
       z-index: 0;
     }

diff --git a/themes/af7ee14f-e9d4-4806-8438-c59b02b77715/preferences.json b/themes/af7ee14f-e9d4-4806-8438-c59b02b77715/preferences.json
@@ -26,6 +26,10 @@
                 "label": "Midnight Majesty",
                 "value": "MidnightMajesty"
             },
+            {
+                "label": "Zen Galaxy/Dream Legacy Theme",
+                "value": "GalaxyDream"
+            },
             {
                 "label": "Custom Gradient: Use your own colors!",
                 "value": "CustomGradient"
@@ -119,4 +123,4 @@
         "label": "Switches the colors orders in the gradient.",
         "type": "checkbox"
     }
-]
+]
diff --git a/themes/af7ee14f-e9d4-4806-8438-c59b02b77715/readme.md b/themes/af7ee14f-e9d4-4806-8438-c59b02b77715/readme.md
@@ -3,13 +3,13 @@
 This **Zen Mod** gives you powerful and good looking gradients with many options to customize it to your liking.
 It automatically adapts to light or dark mode, adjusts the accent color to the gradient and works flawlessly with compact mode.
 
-
 ## Available Gradients (Need to be enabled in the Zen Mods Settings):
   - "Northern Horizen": A blue-green'ish gradient
   - "Scarlet Dusk": A red-yellow'ish gradient
   - "Amethyst Claret": A blue/purple-red'ish gradient (Depicted in the picture)
   - "Olive Sunset": A green-red'ish gradient
   - "Midnight Majesty": A yellow-purple'ish gradient
+  - "Zen Galaxy/Dream Legacy Theme"
   - Custom Colors: Use your own colors to created your very own personal SuperGradient!
 
 ## Optional Features (toggle in Zen's Mods settings):

diff --git a/themes/af7ee14f-e9d4-4806-8438-c59b02b77715/theme.json b/themes/af7ee14f-e9d4-4806-8438-c59b02b77715/theme.json
@@ -7,6 +7,6 @@
     "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/af7ee14f-e9d4-4806-8438-c59b02b77715/readme.md",
     "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/af7ee14f-e9d4-4806-8438-c59b02b77715/image.png",
     "author": "JLBlk",
-    "version": "1.1.1",
+    "version": "1.2.0",
     "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/af7ee14f-e9d4-4806-8438-c59b02b77715/preferences.json"
-}
+}