Merge pull request #14 from greeeen-dev/dev

Natsumi 1.5.1
greeeen-dev · Dec 22, 2024 · adb0b63 · adb0b63
2 parents dbae0f2 + 4400a06
commit adb0b63
Show file tree

Hide file tree

Showing 8 changed files with 222 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -67,8 +67,9 @@ and delay, change the variables in the config.css file.
 - `natsumi.theme.clip-path-force-polygon`: Uses polygon instead of inset for URLbar and Zen Sidebar
   blurring. Enable this if you need this for compatibility with other userchromes/Mods like
   [Cohesion](https://github.com/TheBigWazz/ZenThemes/tree/main/Cohesion).
-- `natsumi.theme.disable-blur`: Disables blurring for Natsumi URLbar and Zen Sidebar. Use this if
-  Zen Browser lags too much.
+- `natsumi.theme.disable-blur`: Disables blurring for glass effects. Use this if Zen Browser lags
+  too much.
+- `natsumi.theme.disable-glass-shadow`: Disables shadow for glass effects.
 - `natsumi.theme.disable-loading-animations`: Disables loading animation for tabs.
 - `natsumi.theme.disable-urlbar-animation`: Disables URLbar loading animation for tabs.
 - `natsumi.theme.enable-border-animation`: Enables border loading animation for tabs. This may use up
@@ -101,6 +102,10 @@ and delay, change the variables in the config.css file.
   not recommend using custom CSS to implement Tab Groups at the moment.
 - `natsumi.sidebar.floating-panel`: Makes the Firefox sidebar panel float.
 - `natsumi.sidebar.panel-glass-effect`: Adds glass effect to Firefox sidebar panel.
+- `natsumi.sidebar.panel-position-center`: Vertically centers Firefox sidebar panel if it is floating.
+- `natsumi.sidebar.panel-position-bottom`: Moves Firefox sidebar panel to the bottom if it is floating.
+  Overrides `natsumi.sidebar.panel-position-center` if enabled.
+- `natsumi.sidebar.panel-position-right`: Moves the Firefox sidebar panel to the right if it is floating.
 - `natsumi.sidebar.panel-resizable`: Makes the Firefox sidebar panel resizable.
 - `natsumi.sidebar.right-gradient`: Moves tabs and containers indicator gradients to the right.
 - `natsumi.sidebar.tabs-glass-effect`: Adds glass effect for the sidebar on compact mode.
@@ -156,6 +161,12 @@ the right to create the config.
 
 Set `browser.tabs.groups.enabled` and `natsumi.sidebar.enable-tab-groups` to true.
 
+### "Something's bugged!"
+There may be Zen Mods or userchromes that you're using alongside Natsumi Browser that breaks things.
+Please disable these then try again.
+
+If the issue still persists, open an issue or report the bug to the developer through Discord.
+
 ## Acknowledgements
 Thank you to:
 - [asev](https://github.com/lunar-os) for ZenCss, which serves as the base for Natsumi Browser's base

diff --git a/natsumi-config.css b/natsumi-config.css
@@ -9,6 +9,11 @@ as they use the correct format.
   /* Accent color */
   --natsumi-accent-color: var(--zen-primary-color);
 
+  /* Natsumi Glass Effect */
+  --glass-blur-radius: 10px;
+  --glass-shadow-size: 10px;
+  --glass-shadow-opacity: 75%;
+
   /* Natsumi URLbar appear animations */
   --urlbar-appear-animation-duration: 0.25s;
   --urlbar-results-animation-duration: 0.5s;
@@ -30,4 +35,8 @@ as they use the correct format.
   /* Container tabs gradient */
   --container-tabs-normal-gradient-width: 25%;
   --container-tabs-expanded-gradient-width: 50%;
+
+  /* Floating Firefox sidebar panels */
+  --ff-sidebar-x-offset: 20px;
+  --ff-sidebar-y-offset: 20px;
 }
diff --git a/natsumi/modules/natsumi-findbar.css b/natsumi/modules/natsumi-findbar.css
@@ -41,6 +41,20 @@ their author(s) have been provided above the used code.
   }
 }
 
+@keyframes glass-disappear {
+  0% {
+    backdrop-filter: blur(var(--natsumi-glass-blur-radius));
+  }
+
+  99% {
+    backdrop-filter: blur(var(--natsumi-glass-blur-radius));
+  }
+
+  100% {
+    backdrop-filter: none;
+  }
+}
+
 @media not (-moz-bool-pref: "natsumi.findbar.disabled") {
   /*noinspection CssInvalidFunction*/
   findbar {
@@ -53,13 +67,17 @@ their author(s) have been provided above the used code.
     flex-wrap: wrap;
     border-radius: var(--zen-border-radius);
     background: var(--natsumi-glass-background) !important;
-    backdrop-filter: blur(10px);
+    backdrop-filter: blur(var(--natsumi-glass-blur-radius));
     border: 1px solid light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.3)) !important;
     opacity: 1;
     transition: background 0.2s ease, opacity 0.2s ease, visibility 0.2s ease, top 0.2s ease, box-shadow 0.2s ease !important;
-    box-shadow: 0 0 10px color-mix(in srgb, var(--natsumi-colors-secondary) 75%, light-dark(black, white)) !important;
     animation: initial-animation 0.2s ease;
 
+    /*noinspection CssInvalidFunction*/
+    @media not (-moz-bool-pref: "natsumi.theme.disable-glass-shadow") {
+      box-shadow: 0 0 var(--natsumi-glass-shadow-size) color-mix(in srgb, var(--natsumi-colors-secondary) var(--natsumi-glass-shadow-opacity), light-dark(black, white)) !important;
+    }
+
     /* Restore old width */
     @media (-moz-bool-pref: "natsumi.findbar.wider-findbar") {
       width: min(720px, 90%);
@@ -71,13 +89,19 @@ their author(s) have been provided above the used code.
       pointer-events: none !important;
       opacity: 0 !important;
       top: 0 !important;
+      animation: glass-disappear 0.2s linear !important;
+      animation-fill-mode: forwards !important;
     }
 
     /*noinspection CssInvalidFunction*/
     &:has(.findbar-textbox:is([status="notfound"])) {
       @media not (-moz-bool-pref: "natsumi.findbar.disable-not-found-bg") {
         background: color-mix(in srgb, light-dark(rgb(255, 146, 146), rgb(255, 100, 100)) 75%, transparent) !important;
-        box-shadow: 0 0 10px color-mix(in srgb, light-dark(rgb(255, 146, 146), rgb(255, 100, 100)) 75%, light-dark(black, white)) !important;
+
+        /*noinspection CssInvalidFunction*/
+        @media not (-moz-bool-pref: "natsumi.theme.disable-glass-shadow") {
+          box-shadow: 0 0 10px color-mix(in srgb, light-dark(rgb(255, 146, 146), rgb(255, 100, 100)) 75%, light-dark(black, white)) !important;
+        }
       }
     }
 
@@ -136,6 +160,7 @@ their author(s) have been provided above the used code.
           justify-content: space-between !important;
           padding: 4px !important;
           margin-left: 4px !important;
+          margin-right: 0 !important;
         }
       }
 
@@ -153,13 +178,56 @@ their author(s) have been provided above the used code.
         }
       }
 
+      .found-matches {
+        font-size: 14px !important;
+        margin-top: 10px !important;
+
+        &:not([hidden]) {
+          &::before {
+            background-image: url('chrome://browser/skin/zen-icons/search-page.svg') !important;
+            background-repeat: no-repeat !important;
+            padding-left: 25px !important;
+            color: black !important;
+
+            @media (prefers-color-scheme: dark) {
+              filter: invert();
+            }
+          }
+        }
+      }
+
       .findbar-find-status {
         display: none;
+        margin-left: 29px !important;
+
+        &:is([status="notfound"]) {
+          margin-left: 4px !important;
+          margin-top: 10px !important;
+          font-size: 14px !important;
+          font-weight: normal !important;
+          flex-basis: 100% !important;
+
+          &::before {
+            content: "";
+            min-width: 17px !important;
+            min-height: 17px !important;
+            background-image: url(chrome://global/skin/icons/close.svg) !important;
+            margin-right: 8px !important;
+
+            @media (prefers-color-scheme: dark) {
+              filter: invert();
+            }
+          }
+        }
 
         &:is([data-l10n-id]) {
           display: flex;
         }
       }
+
+      .checkbox-label {
+        font-size: 12px !important;
+      }
     }
   }
 }
diff --git a/natsumi/modules/natsumi-urlbar.css b/natsumi/modules/natsumi-urlbar.css
@@ -426,11 +426,15 @@ their author(s) have been provided above the used code.
 
       /*noinspection CssInvalidFunction*/
       #urlbar-background {
-        backdrop-filter: blur(10px);
-        box-shadow: 0 0 10px color-mix(in srgb, var(--natsumi-colors-secondary) 75%, light-dark(black, white)) !important;
+        backdrop-filter: blur(var(--natsumi-glass-blur-radius));
         background: var(--natsumi-glass-background) !important;
         transition: backdrop-filter 0.5s ease, background 0.5s ease;
 
+        /*noinspection CssInvalidFunction*/
+        @media not (-moz-bool-pref: "natsumi.theme.disable-glass-shadow") {
+          box-shadow: 0 0 var(--natsumi-glass-shadow-size) color-mix(in srgb, var(--natsumi-colors-secondary) var(--natsumi-glass-shadow-opacity), light-dark(black, white)) !important;
+        }
+
         @media (-moz-bool-pref: "natsumi.urlbar.disable-transparency") {
           transition: none;
           backdrop-filter: none;

diff --git a/natsumi/modules/navbar.css b/natsumi/modules/navbar.css
@@ -28,6 +28,21 @@ their author(s) have been provided above the used code.
 */
 
 /* ==== Navbar tweaks ==== */
+
+@keyframes glass-disappear {
+  0% {
+    backdrop-filter: blur(var(--natsumi-glass-blur-radius));
+  }
+
+  99% {
+    backdrop-filter: blur(var(--natsumi-glass-blur-radius));
+  }
+
+  100% {
+    backdrop-filter: none;
+  }
+}
+
 @media (-moz-bool-pref: "zen.view.compact") {
   @media (-moz-bool-pref: "zen.view.compact.hide-toolbar") {
     @media (-moz-bool-pref: "natsumi.navbar.floating-navbar") {
@@ -45,7 +60,16 @@ their author(s) have been provided above the used code.
       #zen-appcontent-navbar-container {
         background: var(--natsumi-glass-background) !important;
         border: 1px solid light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.3)) !important;
-        box-shadow: 0 0 10px color-mix(in srgb, var(--natsumi-colors-secondary) 75%, light-dark(black, white)) !important;
+        backdrop-filter: blur(var(--natsumi-glass-blur-radius)) !important;
+
+        &:not([zen-has-hover]):not([zen-user-show]) {
+          backdrop-filter: none !important;
+        }
+
+        /*noinspection CssInvalidFunction*/
+        @media not (-moz-bool-pref: "natsumi.theme.disable-glass-shadow") {
+          box-shadow: 0 0 var(--natsumi-glass-shadow-size) color-mix(in srgb, var(--natsumi-colors-secondary) var(--natsumi-glass-shadow-opacity), light-dark(black, white)) !important;
+        }
 
         @media not (-moz-bool-pref: "natsumi.navbar.floating-navbar") {
           padding: 0 !important;

diff --git a/natsumi/modules/preload.css b/natsumi/modules/preload.css
@@ -60,6 +60,9 @@ Edit the natsumi-config.css file instead.
 
   /* Glass effect */
   --natsumi-glass-background: color-mix(in srgb, var(--natsumi-colors-secondary) 75%, transparent);
+  --natsumi-glass-blur-radius: var(--glass-blur-radius, 10px);
+  --natsumi-glass-shadow-size: var(--glass-shadow-size, 10px);
+  --natsumi-glass-shadow-opacity: var(--glass-shadow-opacity, 75%);
 }
 
 /* URL bar appear animation */
@@ -99,4 +102,9 @@ browser, .browserSidebarContainer.deck-selected {
 .tabbrowser-tab {
   --container-gradient-width: var(--container-tabs-normal-gradient-width, 25%);
   --container-gradient-width-expanded: var(--container-tabs-expanded-gradient-width, 50%);
+}
+
+#sidebar-box {
+  --natsumi-sidebar-x-offset: var(--ff-sidebar-x-offset, 20px);
+  --natsumi-sidebar-y-offset: var(--ff-sidebar-y-offset, 20px);
 }