Add 2 new tweaks (Mica and Floating Tabs) (#21)

README.md

@@ -14,23 +14,42 @@ A Firefox userChrome.css theme that aims to recreate the look and feel of the Ch
    3. `layout.css.color-mix.enabled` = `true`
 
    ###### On macOS:
-   1. To use the Edge style context menu on macOS then set `widget.macos.native-context-menus` = `false` **(Not Implemented Yet!)**
+   ~~1. To use the Edge style context menu on macOS then set `widget.macos.native-context-menus` = `false`~~ **(Not Implemented Yet!)**
 
    ##### Recommended:
    1. `browser.tabs.tabMinWidth` = `66`
    2. `browser.tabs.tabClipWidth` = `66`
-
+
+   Additional tweaks can also be applied to the theme, such as Mica (Windows 11 Only), Floating Tabs and more. See [Tweaks](#tweaks).
+
 **Note: Most frequently tested on macOS**
 
+## Screenshots (Windows)
+|Theme|Light|Dark|
+|-|-|-|
+|Default|![Light](screenshots/light.png)|![Dark](screenshots/dark.png)|
+|Floating Tabs|![Light, Floating Tabs](screenshots/light-floating-tabs.png)|![Dark, Floating Tabs](screenshots/dark-floating-tabs.png)|
+|Mica|![Light, Mica](screenshots/light-mica.png)|![Dark, Mica](screenshots/dark-mica.png)|
+|Mica and Floating Tabs|![Light, Mica and Floating Tabs](screenshots/light-mica-floating-tabs.png)|![Dark, Mica and Floating Tabs](screenshots/dark-mica-floating-tabs.png)|
+
 ## Tweaks
-Certain tweaks can be applied to the theme, to enable them navigate to `about:config` and create a boolean key for each tweak and set it to `true` and restart the browser.
+Certain tweaks can be applied to the theme, to enable them navigate to `about:config` and create a boolean key for each tweak you want to use and set it to `true`, then restart the browser.
 
-To disable a tweak, set the key to false or delete it and restart the browser.
+To disable a tweak, set the key to `false` or delete it, then restart the browser.
 
 |disable drag space above tabs|
 |-|
 |`uc.tweak.disable-drag-space`|
 
+|enable Edge style floating tabs|
+|-|
+|`uc.tweak.floating-tabs`|
+
+|enable Mica toolbar background (Windows 11 only)|
+|-|
+|**See [Mica Tweak Instructions (Windows 11 Only)](#mica-tweak-instructions-windows-11-only) for installation instructions.**|
+|`uc.tweak.win11-mica`|
+
 |force tab background colour to `--toolbar-bg` (useful for Proton themes)|
 |-|
 |**NOTE: can cause readability issues with some themes! (eg. white text on white bg)**|
@@ -49,11 +68,22 @@ To disable a tweak, set the key to false or delete it and restart the browser.
 |-|
 |`uc.tweak.less-permissions-button-padding`|
 
+## Mica Tweak Instructions (Windows 11 Only)
+1. Download and install [Mica For Everyone](https://github.com/MicaForEveryone/MicaForEveryone).
+2. Create a custom process rule with the following:
+   1. Name: `firefox`
+   2. Titlebar Color: `System`
+   3. Backdrop Type: `Mica`
+3. Enable tweak in `about:config`: `uc.tweak.win11-mica`
+4. Restart Firefox.
+
 ## Acknowledgements
 [muckSponge](https://github.com/muckSponge) - [MaterialFox](https://github.com/muckSponge/MaterialFox)
 
 [Microsoft](https://github.com/microsoft) - [Fluent UI System Icons](https://github.com/microsoft/fluentui-system-icons)
 
+[KibSquib48](https://github.com/KibSquib48) - [MicaFox](https://github.com/KibSquib48/MicaFox)
+
 ---
 
 Old version can be found [here](https://github.com/bmFtZQ/edge-frfox/tree/v91.0-archive).

chrome/global/colors.css

@@ -138,14 +138,6 @@
   background-color: #252525 !important;
 }
 
-/* needed for theming the private browsing indicator  */
-/* :root:not([style*="--button-primary-bgcolor"]) {
-  --button-primary-bgcolor: unset !important;
-  --button-primary-hover-bgcolor: unset !important;
-  --button-primary-active-bgcolor: unset !important;
-  --button-primary-color: unset !important;
-} */
-
 /* make the titlebar buttons black/white on default themes */
 :root:not(:-moz-lwtheme)[tabsintitlebar] .titlebar-buttonbox {
   color: #000 !important;

chrome/global/tweaks.css

@@ -44,3 +44,153 @@ browsing indicator) */
     margin-inline-start: -8px !important;
   }
 }
+
+@supports -moz-bool-pref("uc.tweak.floating-tabs") {
+  :root:not(:-moz-lwtheme) {
+    --lwt-accent-color: #f3f3f3 !important;
+    --lwt-accent-color-inactive: unset !important;
+    --toolbar-bgcolor: #fff !important;
+  }
+
+  :root[lwt-default-theme-in-dark-mode="true"] {
+    --toolbar-bgcolor: #4D4D4D !important;
+    --lwt-accent-color-inactive: unset !important;
+    --chrome-content-separator-color: #535353 !important;
+  }
+
+  /* remove toolbar bg */
+  #nav-bar,
+  #PersonalToolbar {
+    background-color: transparent !important;
+  }
+
+  /* invert bottom corner radius for tabs */
+  .tab-background::before,
+  .tab-background::after {
+    display: none !important;
+  }
+
+  .tab-background {
+    border-radius: var(--tab-border-radius) !important;
+  }
+
+  /* adjust spacing of area above tabs */
+  @supports not -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
+    :root[sizemode="maximized"] #titlebar {
+      --tab-block-margin: 4px !important;
+    }
+  }
+
+  :root:is([inFullscreen], :not([tabsintitlebar])) #titlebar {
+    --tab-block-margin: 4px !important;
+  }
+
+  @supports -moz-bool-pref("uc.tweak.disable-drag-space") {
+    :root #titlebar {
+      --tab-block-margin: 4px !important;
+    }
+  }
+
+  :root #titlebar {
+    --tab-min-height: 33px !important;
+  }
+
+  /* remove navbar shadow */
+  #titlebar,
+  :root[lwtheme-brighttext="true"] #titlebar {
+    box-shadow: none !important;
+  }
+
+  /* move tab shadow behind urlbar */
+  .tabbrowser-tab[visuallyselected="true"],
+  #nav-bar {
+    z-index: 2 !important;
+  }
+
+  /* tab shadow adjustments */
+  .tabbrowser-tab {
+    overflow-clip-margin: 8px !important;
+  }
+
+  .tabbrowser-tab,
+  #TabsToolbar #tabs-newtab-button,
+  /* no ::part workaround - may have side effects */
+  #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton),
+  #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton) {
+    margin-bottom: 8px !important;
+  }
+
+  #tabbrowser-arrowscrollbox {
+    margin-bottom: -8px !important;
+  }
+
+  .tabbrowser-tab:is([visuallyselected="true"], [multiselected])>.tab-stack>.tab-background {
+    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.12), 0 0px 2px rgba(0, 0, 0, 0.1) !important;
+  }
+
+  :root[lwtheme-brighttext="true"] .tabbrowser-tab:is([visuallyselected="true"], [multiselected])>.tab-stack>.tab-background {
+    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.25), 0 0px 2px rgba(0, 0, 0, 0.1) !important;
+  }
+}
+
+@media (-moz-windows-compositor) {
+  @supports -moz-bool-pref("uc.tweak.win11-mica") {
+    /* enable mica appearance */
+    #main-window:not(:-moz-lwtheme),
+    #main-window[lwt-default-theme-in-dark-mode="true"] {
+      appearance: -moz-win-glass !important;
+      background: transparent !important;
+    }
+
+    #main-window[lwt-default-theme-in-dark-mode="true"] #navigator-toolbox:not(:-moz-window-inactive) {
+      background: transparent !important;
+    }
+
+    @supports -moz-bool-pref("uc.tweak.floating-tabs") {
+      #navigator-toolbox:not(:-moz-lwtheme),
+      #main-window[lwt-default-theme-in-dark-mode="true"] #navigator-toolbox:not(:-moz-window-inactive) {
+        background: transparent !important;
+      }
+    }
+
+    /* force tab color (for the tab transparency) */
+    .tab-background:is([selected], [multiselected]) {
+      background: var(--toolbar-bgcolor) !important;
+    }
+
+    /* color adjustments */
+    :root:not(:-moz-lwtheme):not(:-moz-window-inactive) {
+      --lwt-accent-color: #00000020 !important;
+    }
+
+    @supports -moz-bool-pref("uc.tweak.floating-tabs") {
+      :root:not(:-moz-lwtheme):not(:-moz-window-inactive) {
+        --toolbar-bgcolor: #ffffffcc !important;
+      }
+
+      :root[lwt-default-theme-in-dark-mode="true"]:not(:-moz-window-inactive) {
+        --toolbar-bgcolor: #ffffff20 !important;
+      }
+    }
+
+    /* line up buttons with duplicate icons from -moz-win-glass */
+    .titlebar-buttonbox-container {
+      --uc-titlebar-button-size: 30px;
+      --uc-titlebar-size: calc(var(--tab-min-height) + var(--tab-block-margin));
+      margin-bottom: calc(var(--uc-titlebar-size) - var(--uc-titlebar-button-size)) !important;
+    }
+
+    .titlebar-button:not(.titlebar-close:hover, :-moz-window-inactive) {
+      list-style-image: none !important;
+    }
+
+    :root:is([inFullscreen], [sizemode="maximized"]) .titlebar-button {
+      padding-block: 7px 9px !important;
+    }
+
+    :root:is([inFullscreen], [sizemode="maximized"]) .titlebar-close {
+      padding-block: 7px 9px !important;
+      padding-right: 19px !important;
+    }
+  }
+}