diff --git a/README.md b/README.md
index a1d922d..acc6955 100644
--- a/README.md
+++ b/README.md
@@ -2,13 +2,19 @@
### A modern Firefox CSS Theme
-
Firefox with blurredfox CSS theme
+
Firefox with blurredfox CSS theme
+
blurredfox's layout with solid colors
## Requirements
+ The latest Firefox
-+ Compositor with blur shader (optional)
-+ Linux machine - untested on macOS and Windows 10 - might work though (optional)
++ Compositor with blur support (optional)
+
+## Notes
+
++ 100% working on linux.
++ Untested on macOS.
++ Transparency is broken on Windows 10 (has graphical glitches like flickering). The [solid color scheme](https://github.com/manilarome/blurredfox/blob/master/colors/solid.css) *may* work.
## How to
@@ -60,39 +66,35 @@
+ **`layout.css.backdrop-filter.enabled`**
+ **`svg.context-properties.content.enabled`**
- Then make sure to **enable them all!**
+ Then make sure to **enable them all!**. Or you can just copy the `user.js` file to your profile.
4. Go to your Firefox profile.
+
+ Linux - `$HOME/.mozilla/firefox/XXXXXXX.default-XXXXXX/`.
+ Windows 10 - `C:\Users\\AppData\Roaming\Mozilla\Firefox\Profiles\XXXXXXX.default-XXXXXX`.
+ macOS - `Users//Library/Application Support/Firefox/Profiles/XXXXXXX.default-XXXXXXX`.
5. Create a folder and name it **`chrome`**, then assuming that you already have cloned this repo, just copy the theme to `chrome` folder.
6. Restart Firefox.
-7. Finally, you can now change whatever colorscheme you want in the Cusomization Window.
+7. Finally, you can now change whatever color mode you want in the Cusomization Window.
+ Default - Uses system colors, but uses the theme's layout.
+ Dark - Dark colorscheme. Good for the night.
+ Light - Bright colorscheme. Good for killing the eyes.
-### Uninstall
+## User Support
-1. Go to your profile directory.
-2. Delete the `chrome` folder.
-3. If you used the installation script, you can also delete the `user.js` inside your profile directory.
-
-## Note
-
-### Some UI are broken!
+### Some UIs are broken!
1. Check if you're using the latest version of Firefox.
-2. If you're not using Linux check the next note below.
+2. It's broken because you're using Windows 10 and macOS or you're using an ancient version of Firefox.
### If you're using Windows or macOS and something's wrong
-1. I only have Archlinux, so I cannot guarantee that it will work on Windows 10 and macOS without a problem. A feedback and a PR is absolutely welcome! All you can do or try is to install the theme, then change the value of `--bf-moz-appearance` variable to either `-moz-win-glass` if Windows 10 and `-moz-mac-vibrancy-dark` if macOS. Still, do not expect that it will work without a problem. The theme's untested on these platforms!
+1. I only have Archlinux, macOS' untested while the theme is broken on Windows 10.
+2. If the transparency is broken, use the [solid color scheme](https://github.com/manilarome/blurredfox/blob/master/colors/solid.css). Edit the `userChrome.css` to switch.
-### Liar! Your theme's name is `blurredfox`, ***where is the blur***?!
+### Liar! The theme's name is `blurredfox`, ***where is the blur***?!
1. Yeah, the name `blurredfox` is a lie, just like the cake. I named it blurredfox because it's designed to look gorgeous with a blur effect. You can, however, have the blur effect by:
@@ -113,14 +115,24 @@
1. You can adjust the value of `scrollbar-width` in `userContent.css`.
2. Restart Firefox.
+### How can I set or change the colors for the Default color mode?
+
+1. The default mode are from Firefox and it uses the system colors. Although I only tried and tested it with `GTK3`, it should work with any platforms or environment as long as Firefox can detect your system colors.
+
+
### I hate the colors! Why is everything transparent?!
-1. You can change the colors in `userChrome.css`.
-2. The transparency is only applied to `Dark` and `Light` colorschemes. `No transparency == No blur`.
+1. Use the [solid color scheme](https://github.com/manilarome/blurredfox/blob/master/colors/solid.css) by editing the `userChrome.css`.
+2. You can change the colors yourself.
+3. The transparency is only applied to `Dark` and `Light` mode under the blurred color scheme. `No transparency == No blur`.
+4. You can read the next point.
-### How can I set or change the colors for the Default colorscheme?
+### Uninstall this now!
-1. The default colorscheme are from Firefox and it uses the system colors. Although I only tried and tested it with `GTK3`, it should work with any platforms or environment as long as Firefox can detect your system colors. So all you can do is to switch theme to change its colorscheme.
+1. Go to your profile directory.
+2. Delete the `chrome` folder.
+3. If you used the installation script or copied the `user.js` to your profile, delete it.
+4. Sayonara.
## Got a problem?
diff --git a/colors/blurred.css b/colors/blurred.css
new file mode 100644
index 0000000..6c62743
--- /dev/null
+++ b/colors/blurred.css
@@ -0,0 +1,83 @@
+:root {
+ /* All the CSS variables here are global */
+ /* These applies to all colorschemes */
+
+ /* If windows - `-moz-win-glass`, if macOS - `-moz-mac-vibrancy-dark` */
+ --bf-moz-appearance: -moz-win-glass !important;
+
+ --bf-backdrop-blur: 6px;
+
+ --bf-sidebar-searchbar-radius: 6px;
+
+ --bf-accent-bg: #4C5FF9CC;
+ --bf-blank-page-bg: #252525;
+
+ --bf-urlbar-hightlight-bg: var(--bf-accent-bg);
+ --bf-urlbar-radius: 9px;
+ --bf-urlbar-results-font-size: 12pt;
+ --bf-urlbar-results-font-weight: 550;
+ --bf-urlbar-font-size: 12pt;
+ --bf-urlbar-font-weight: 500;
+ --bf-urlbar-switch-tab-color: #6498EF;
+ --bf-urlbar-bookmark-color: #53E2AE;
+
+ --bf-navbar-padding: 6px;
+
+ --bf-tab-selected-bg: #77777788;
+ --bf-tab-font-size: 11pt;
+ --bf-tab-font-weight: 400;
+ --bf-tab-height: 36px;
+ --bf-tab-border-radius: 6px;
+ --bf-tab-soundplaying-bg: #985EFFCC;
+
+ --toolbar-bgcolor: transparent !important;
+ --urlbar-separator-color: transparent !important;
+}
+
+/* Light Mode */
+:root:-moz-lwtheme-darktext {
+ --bf-main-window: transparent;
+ --bf-bg: #F2F2F266;
+ --bf-color: #0A0A0A;
+
+ --bf-hover-bg: #1A1A1A33;
+ --bf-active-bg: #1A1A1A66;
+
+ --bf-icon-color: #0A0A0A;
+ --bf-tab-toolbar-bg: #F2F2F2AA;
+ --bf-tab-selected-bg: #00000022;
+ --bf-navbar-bg: var(--bf-bg);
+ --bf-urlbar-bg: var(--bf-bg);
+ --bf-urlbar-active-bg: var(--bf-bg);
+ --bf-urlbar-focused-color: var(--bf-color);
+
+ --bf-sidebar-bg: var(--bf-bg);
+ --bf-sidebar-color: var(--bf-color);
+
+ --bf-menupopup-bg: #F2F2F2AA;
+ --bf-menupopup-color: var(--bf-color);
+}
+
+/* Dark Mode */
+:root:-moz-lwtheme-brighttext {
+ --bf-main-window: transparent;
+ --bf-bg: #00000066;
+ --bf-color: #F2F2F2;
+
+ --bf-hover-bg: #F2F2F233;
+ --bf-active-bg: #F2F2F266;
+
+ --bf-icon-color: #F2F2F2;
+ --bf-tab-toolbar-bg: #000000AA;
+ --bf-tab-selected-bg: #F2F2F210;
+ --bf-navbar-bg: var(--bf-bg);
+ --bf-urlbar-bg: var(--bf-bg);
+ --bf-urlbar-active-bg: var(--bf-bg);
+ --bf-urlbar-focused-color: var(--bf-color);
+
+ --bf-sidebar-bg: var(--bf-bg);
+ --bf-sidebar-color: var(--bf-color);
+
+ --bf-menupopup-bg: #000000AA;
+ --bf-menupopup-color: var(--bf-color);
+}
diff --git a/colors/solid.css b/colors/solid.css
new file mode 100644
index 0000000..be46abd
--- /dev/null
+++ b/colors/solid.css
@@ -0,0 +1,83 @@
+:root {
+ /* All the CSS variables here are global */
+ /* These applies to all colorschemes */
+
+ /* If windows - `-moz-win-glass`, if macOS - `-moz-mac-vibrancy-dark` */
+ --bf-moz-appearance: -moz-win-glass !important;
+
+ --bf-backdrop-blur: 6px;
+
+ --bf-sidebar-searchbar-radius: 6px;
+
+ --bf-accent-bg: #4C5FF9CC;
+ --bf-blank-page-bg: #252525;
+
+ --bf-urlbar-hightlight-bg: var(--bf-accent-bg);
+ --bf-urlbar-radius: 9px;
+ --bf-urlbar-results-font-size: 12pt;
+ --bf-urlbar-results-font-weight: 550;
+ --bf-urlbar-font-size: 12pt;
+ --bf-urlbar-font-weight: 500;
+ --bf-urlbar-switch-tab-color: #6498EF;
+ --bf-urlbar-bookmark-color: #53E2AE;
+
+ --bf-navbar-padding: 6px;
+
+ --bf-tab-selected-bg: #77777788;
+ --bf-tab-font-size: 11pt;
+ --bf-tab-font-weight: 400;
+ --bf-tab-height: 36px;
+ --bf-tab-border-radius: 6px;
+ --bf-tab-soundplaying-bg: #985EFFCC;
+
+ --toolbar-bgcolor: transparent !important;
+ --urlbar-separator-color: transparent !important;
+}
+
+/* Light Mode */
+:root:-moz-lwtheme-darktext {
+ --bf-main-window: #F2F2F2;
+ --bf-bg: var(--bf-main-window);
+ --bf-color: #0A0A0A;
+
+ --bf-hover-bg: #1A1A1A33;
+ --bf-active-bg: #1A1A1A66;
+
+ --bf-icon-color: #0A0A0A;
+ --bf-tab-toolbar-bg: #F2F2F2;
+ --bf-tab-selected-bg: #CFCFCF;
+ --bf-navbar-bg: #E6E6E6;
+ --bf-urlbar-bg: var(--bf-bg);
+ --bf-urlbar-active-bg: var(--bf-bg);
+ --bf-urlbar-focused-color: var(--bf-color);
+
+ --bf-sidebar-bg: var(--bf-bg);
+ --bf-sidebar-color: var(--bf-color);
+
+ --bf-menupopup-bg: #F2F2F2EE;
+ --bf-menupopup-color: var(--bf-color);
+}
+
+/* Dark Mode */
+:root:-moz-lwtheme-brighttext {
+ --bf-main-window: #0A0A0A;
+ --bf-bg: var(--bf-main-window);
+ --bf-color: #F2F2F2;
+
+ --bf-hover-bg: #F2F2F233;
+ --bf-active-bg: #F2F2F266;
+
+ --bf-icon-color: #F2F2F2;
+ --bf-tab-toolbar-bg: var(--base-bg);
+ --bf-tab-selected-bg: #252525;
+ --bf-navbar-bg: #252525;
+ --bf-urlbar-bg: #353535;
+ --bf-urlbar-active-bg: #353535;
+ --bf-urlbar-focused-color: var(--bf-color);
+
+ --bf-sidebar-bg: var(--bf-bg);
+ --bf-sidebar-color: var(--bf-color);
+
+ --bf-menupopup-bg: #0A0A0AEE;
+ --bf-menupopup-color: var(--bf-color);
+}
diff --git a/install.sh b/install.sh
index 3374e6f..8753775 100755
--- a/install.sh
+++ b/install.sh
@@ -50,7 +50,8 @@ function check_profile() {
# Check OSTYPE
case "$OSTYPE" in
msys*)
- FF_USER_DIRECTORY="$(find "${HOME}AppData\Roaming\Mozilla\firefox" -maxdepth 1 -type d -regextype egrep -regex '.*[a-zA-Z0-9]+.'${1})"
+ # Untested on WSL
+ # FF_USER_DIRECTORY="$(find "${HOME}AppData\Roaming\Mozilla\firefox" -maxdepth 1 -type d -regextype egrep -regex '.*[a-zA-Z0-9]+.'${1})"
;;
*)
FF_USER_DIRECTORY="$(find "${HOME}/.mozilla/firefox/" -maxdepth 1 -type d -regextype egrep -regex '.*[a-zA-Z0-9]+.'${1})"
diff --git a/parts/arrow-panel.css b/parts/arrow-panel.css
new file mode 100644
index 0000000..9475981
--- /dev/null
+++ b/parts/arrow-panel.css
@@ -0,0 +1,25 @@
+/*
+░█▀█░█▀▄░█▀▄░█▀█░█░█░█▀█░█▀█░█▀█░█▀▀░█░░
+░█▀█░█▀▄░█▀▄░█░█░█▄█░█▀▀░█▀█░█░█░█▀▀░█░░
+░▀░▀░▀░▀░▀░▀░▀▀▀░▀░▀░▀░░░▀░▀░▀░▀░▀▀▀░▀▀▀
+
+The dropdown menus
+*/
+
+.panel-arrowcontent {
+ padding: 0 !important;
+ margin: 0 !important;
+}
+
+toolbarseparator {
+ display: none !important;
+}
+
+box.panel-arrowbox {
+ display: none;
+}
+
+box.panel-arrowcontent {
+ border-radius: 8px !important;
+ border: none !important;
+}
diff --git a/parts/context-menu.css b/parts/context-menu.css
new file mode 100644
index 0000000..497d512
--- /dev/null
+++ b/parts/context-menu.css
@@ -0,0 +1,44 @@
+
+/*
+░█▀▀░█▀█░█▀█░▀█▀░█▀▀░█░█░▀█▀░█▄█░█▀▀░█▀█░█░█
+░█░░░█░█░█░█░░█░░█▀▀░▄▀▄░░█░░█░█░█▀▀░█░█░█░█
+░▀▀▀░▀▀▀░▀░▀░░▀░░▀▀▀░▀░▀░░▀░░▀░▀░▀▀▀░▀░▀░▀▀▀
+
+Right-click menu
+*/
+
+menupopup,
+popup,
+popup > menu > menupopup,
+menupopup > menu > menupopup {
+ border: 0 !important;
+ border-radius: 4px !important;
+ padding: 2px 0 2px 0 !important;
+}
+
+menupopup:-moz-lwtheme-darktext,
+menupopup:-moz-lwtheme-brighttext,
+popup:-moz-lwtheme-darktext,
+popup:-moz-lwtheme-brighttext,
+popup > menu > menupopup:-moz-lwtheme-darktext,
+popup > menu > menupopup:-moz-lwtheme-brighttext,
+menupopup > menu > menupopup:-moz-lwtheme-darktext,
+menupopup > menu > menupopup:-moz-lwtheme-brighttext {
+ -moz-appearance: none !important;
+ background: var(--bf-menupopup-bg) !important;
+ color: var(--bf-menupopup-color) !important;
+}
+
+menupopup menuseparator {
+/* -moz-appearance: none !important; */
+ margin: 2px 0 2px 0 !important;
+ padding: 0 !important;
+ border-top: none !important;
+ border-color: transparent !important;
+}
+
+menupopup menuseparator:-moz-lwtheme-darktext,
+menupopup menuseparator:-moz-lwtheme-brighttext {
+ -moz-appearance: none !important;
+ background: #525A6D !important;
+}
diff --git a/parts/customization-window.css b/parts/customization-window.css
new file mode 100644
index 0000000..915970e
--- /dev/null
+++ b/parts/customization-window.css
@@ -0,0 +1,34 @@
+
+/*
+░█▀▀░█░█░█▀▀░▀█▀░█▀█░█▄█░▀█▀░▀▀█░█▀█░▀█▀░▀█▀░█▀█░█▀█░█░█░▀█▀░█▀█░█▀▄░█▀█░█░█
+░█░░░█░█░▀▀█░░█░░█░█░█░█░░█░░▄▀░░█▀█░░█░░░█░░█░█░█░█░█▄█░░█░░█░█░█░█░█░█░█▄█
+░▀▀▀░▀▀▀░▀▀▀░░▀░░▀▀▀░▀░▀░▀▀▀░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░▀░▀░▀░▀░▀▀▀░▀░▀░▀▀░░▀▀▀░▀░▀
+
+The customization window
+*/
+
+#customization-container {
+}
+
+#customization-container:-moz-lwtheme-darktext,
+#customization-container:-moz-lwtheme-brighttext {
+ background: var(--bf-bg) !important;
+}
+
+.customizationmode-button {
+ padding: 5px !important;
+ border-radius: 6px !important;
+}
+
+.customizationmode-button:-moz-lwtheme-darktext,
+.customizationmode-button:-moz-lwtheme-brighttext {
+ color: var(--bf-color) !important;;
+}
+
+.customizationmode-button:hover {
+ padding: 5px !important;
+ border-radius: 6px !important;
+}
+
+.customizationmode-button label {
+}
diff --git a/parts/findbar.css b/parts/findbar.css
new file mode 100644
index 0000000..4712c0c
--- /dev/null
+++ b/parts/findbar.css
@@ -0,0 +1,43 @@
+
+/*
+░█▀▀░▀█▀░█▀█░█▀▄░█▀▄░█▀█░█▀▄
+░█▀▀░░█░░█░█░█░█░█▀▄░█▀█░█▀▄
+░▀░░░▀▀▀░▀░▀░▀▀░░▀▀░░▀░▀░▀░▀
+
+The findbar
+*/
+
+#browser #appcontent #tabbrowser-tabbox findbar,
+#browser #appcontent #tabbrowser-tabbox tabpanels {
+ -moz-appearance: none !important;
+ border: none !important;
+}
+
+#browser #appcontent #tabbrowser-tabbox findbar:-moz-lwtheme-darktext,
+#browser #appcontent #tabbrowser-tabbox findbar:-moz-lwtheme-brighttext,
+#browser #appcontent #tabbrowser-tabbox tabpanels:-moz-lwtheme-darktext,
+#browser #appcontent #tabbrowser-tabbox tabpanels:-moz-lwtheme-brighttext {
+ background: transparent !important;
+}
+
+#browser #appcontent #tabbrowser-tabbox findbar {
+}
+
+#browser #appcontent #tabbrowser-tabbox findbar:-moz-lwtheme-darktext,
+#browser #appcontent #tabbrowser-tabbox findbar:-moz-lwtheme-brighttext {
+ background-color: var(--bf-bg) !important;
+}
+
+.findbar-find-previous,
+.findbar-find-next {
+ margin: 0 !important;
+ border: none !important;
+}
+
+#browser #appcontent #tabbrowser-tabbox .findbar-find-fast {
+}
+
+#browser #appcontent #tabbrowser-tabbox .findbar-find-fast:not([status="notfound"]):-moz-lwtheme-darktext,
+#browser #appcontent #tabbrowser-tabbox .findbar-find-fast:not([status="notfound"]):-moz-lwtheme-brighttext {
+ background-color: var(--bf-bg) !important;
+}
diff --git a/parts/main-window.css b/parts/main-window.css
new file mode 100644
index 0000000..7bbf841
--- /dev/null
+++ b/parts/main-window.css
@@ -0,0 +1,34 @@
+/*
+░▀█▀░█▀▄░█▀█░█▀█░█▀▀░█▀█░█▀█░█▀▄░█▀▀░█▀█░█▀▀░█░█
+░░█░░█▀▄░█▀█░█░█░▀▀█░█▀▀░█▀█░█▀▄░█▀▀░█░█░█░░░░█░
+░░▀░░▀░▀░▀░▀░▀░▀░▀▀▀░▀░░░▀░▀░▀░▀░▀▀▀░▀░▀░▀▀▀░░▀░
+
+Main window
+*/
+#main-window {
+ font-kerning: normal;
+ border: none !important;
+}
+
+/* Add transparency to light and dark color schemes */
+#main-window:-moz-lwtheme-brighttext,
+#main-window:-moz-lwtheme-darktext {
+ background: var(--bf-main-window) !important;
+ -moz-appearance: var(--bf-moz-appearance) !important;
+}
+
+/*
+░█▀▀░█▀█░█▀█░▀█▀
+░█▀▀░█░█░█░█░░█░
+░▀░░░▀▀▀░▀░▀░░▀░
+
+I'm not sure if this does something
+*/
+
+* {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-rendering: optimizeLegibility;
+ font-variant-ligatures: none;
+ font-kerning: normal;
+}
diff --git a/parts/sidebar.css b/parts/sidebar.css
new file mode 100644
index 0000000..80c42d2
--- /dev/null
+++ b/parts/sidebar.css
@@ -0,0 +1,28 @@
+/*
+░█▀▀░▀█▀░█▀▄░█▀▀░█▀▄░█▀█░█▀▄
+░▀▀█░░█░░█░█░█▀▀░█▀▄░█▀█░█▀▄
+░▀▀▀░▀▀▀░▀▀░░▀▀▀░▀▀░░▀░▀░▀░▀
+
+Sidebar
+*/
+
+#sidebar-box {
+}
+
+#sidebar-box:-moz-lwtheme-darktext,
+#sidebar-box:-moz-lwtheme-brighttext {
+ --sidebar-background-color: var(--bf-sidebar-bg) !important;
+ --sidebar-text-color: var(--bf-sidebar-color) !important;
+}
+
+#sidebar,
+.sidebar-panel {
+ background: transparent !important;
+}
+
+/* Sidebar searchbar */
+#sidebar-search-container #search-box {
+ border: none !important;
+ padding: 6px !important;
+ border-radius: var(--bf-sidebar-searchbar-radius) !important;
+}
diff --git a/parts/tabbar.css b/parts/tabbar.css
new file mode 100644
index 0000000..c6cf2b8
--- /dev/null
+++ b/parts/tabbar.css
@@ -0,0 +1,240 @@
+/*
+░▀█▀░█▀█░█▀▄░█▀▄░█▀█░█▀▄
+░░█░░█▀█░█▀▄░█▀▄░█▀█░█▀▄
+░░▀░░▀░▀░▀▀░░▀▀░░▀░▀░▀░▀
+
+The tabs container
+*/
+
+/* Move tab bar beneath the url bar */
+#titlebar {
+ /*
+ Set the value to 3 to move the tabbar below the navbar
+ */
+ -moz-box-ordinal-group: 1 !important;
+}
+
+#titlebar::after {
+ border-bottom: 0 !important;
+}
+
+.toolbar-items {
+}
+
+/* Transparent tabs */
+.toolbar-items:-moz-lwtheme-darktext,
+.toolbar-items:-moz-lwtheme-brighttext {
+ background-color: transparent !important;
+ -moz-appearance: var(--bf-moz-appearance) !important;
+}
+
+/* Set minimum height for tab bar */
+#tabbrowser-tabs {
+ --tab-min-height: 0;
+ margin: 6px 5px 6px 5px;
+}
+
+/* Compact mode */
+:root[uidensity="compact"] #tabbrowser-tabs {
+ margin: 0 !important;
+}
+
+/* Hide solo tab */
+/*
+#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:only-of-type {
+ visibility: collapse;
+}
+*/
+
+/* Hide New Tab Button immediately next to solo tab */
+/*
+#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:only-of-type + toolbarbutton {
+ visibility: collapse;
+}
+*/
+
+ /* Stretch Tabs */
+.tabbrowser-tab[fadein]:not([pinned]) {
+ max-width: none !important;
+}
+
+.tab-background {
+ border: none !important;
+}
+
+.tab-background:-moz-lwtheme-darktext,
+.tab-background:-moz-lwtheme-brighttext {
+ background: transparent !important;
+ -moz-appearance: var(--bf-moz-appearance) !important;
+}
+
+.tab-background[selected="true"] {
+ background: var(--bf-tab-selected-bg) !important;
+}
+
+.tab-background:not[visuallyselected] {
+ background: var(--bf-tab-selected-bg) !important;
+ opacity: 0.5 !important;
+}
+
+/* Remove the all the "lines" in tab sides */
+/*
+.tabbrowser-tab::after,
+.tabbrowser-tab::before {
+ border-left: none !important;
+}
+*/
+
+/* Remove the lines on the side of the selected tab */
+.tabbrowser-tab[beforeselected-visible="true"]::after,
+.tabbrowser-tab[beforeselected-visible="true"]::before,
+.tabbrowser-tab[selected="true"]::after,
+.tabbrowser-tab[selected="true"]::before {
+ border-left: none !important;
+}
+
+/* Style all the lines before and after selected tab */
+.tabbrowser-tab::after,
+.tabbrowser-tab::before {
+ border-width: 1px !important;
+}
+
+.tabbrowser-arrowscrollbox {
+ margin-inline-start: 4px !important;
+ margin-inline-end: 0 !important;
+}
+
+.tab-text {
+ font-weight: var(--bf-tab-font-weight);
+ font-size: var(--bf-tab-font-size) !important;
+}
+
+/* Center all content */
+.tab-content {
+ justify-content: center;
+ align-items: center;
+ margin-top: -1px;
+ min-width: 100% !important;
+ padding: 0 10px !important;
+}
+
+/* A way to center the label and icon while
+the close button is positioned to the far right */
+.tab-content::before{
+ content: "";
+ display: -moz-box;
+ -moz-box-flex: 1
+}
+
+/* Tab close button */
+.tab-close-button {
+ opacity: 1 !important;
+}
+
+/* Prevent tab icons size breaking */
+.tab-icon-image, .tab-icon-sound,
+.tab-throbber, .tab-throbber-fallback,
+.tab-close-button {
+ min-width: 16px;
+}
+
+/* Adjust tab label width */
+.tab-label-container {
+ min-width: 3px !important;
+}
+
+/* If tab close button is not present, don't force favicon to the center */
+#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected="true"]) .tab-throbber,
+#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected="true"]) .tab-throbber-fallback,
+#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected="true"]):not([busy]) .tab-icon-image,
+#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected="true"]):not([image]) .tab-label-container {
+ margin-left: 0 !important;
+}
+
+/* Tab icon */
+hbox.tab-content .tab-icon-image {
+ display: initial !important;
+}
+
+/* Show the icon of pinned tabs */
+hbox.tab-content[pinned=true] .tab-icon-image {
+ display: initial !important;
+}
+
+/* Hide text of pinned tabs */
+hbox.tab-content[pinned=true] .tab-text {
+ display: none !important;
+}
+
+/* Hide the blue line on top of tab */
+.tab-line {
+ display: none !important;
+}
+
+.tab-bottom-line {
+}
+
+.tabbrowser-tab {
+ border-radius: var(--bf-tab-border-radius) !important;
+ border-width: 0;
+ height: var(--bf-tab-height) !important;
+ overflow: hidden;
+ margin-top: 0 !important;
+ margin-bottom: 0 !important;
+}
+
+:root[uidensity="compact"] .tabbrowser-tab {
+ border-radius: 0 !important;
+}
+
+.tabbrowser-tab:hover {
+ box-shadow: 0 1px 4px rgba(0,0,0,.05);
+}
+
+/* Set color scheme */
+.tabbrowser-tab:hover:-moz-lwtheme-darktext,
+.tabbrowser-tab:hover:-moz-lwtheme-brighttext {
+ background: var(--bf-hover-bg) !important;
+}
+
+/* Audio playing background */
+.tabbrowser-tab[soundplaying="true"] {
+ background-color: var(--bf-tab-soundplaying-bg) !important;
+}
+
+#tabbrowser-tabs {
+}
+
+/* Audio Icon */
+.tab-icon-sound {
+}
+
+/* Center pinned tab stack(Contains icon) if #tabbrowser-tabs[positionpinnedtabs=true] */
+#tabbrowser-tabs[positionpinnedtabs=true] .tabbrowser-tab[pinned=true] .tab-stack {
+ position: relative !important;
+ top: 50% !important;
+ transform: translateY(-50%) !important;
+}
+
+
+.private-browsing-indicator {
+ display: block;
+ background: transparent;
+}
+
+/* Remove hover effects on tab bar buttons */
+#TabsToolbar {
+ --toolbarbutton-active-background: transparent !important;
+ --toolbarbutton-hover-background: transparent !important;
+ -moz-appearance: none !important;
+}
+
+/* Left to Right Alignment of tabs toolbar */
+/* #TabsToolbar {
+ direction: rtl;
+}
+
+#tabbrowser-tabs {
+ direction: ltr;
+}
+*/
diff --git a/parts/toolbar.css b/parts/toolbar.css
new file mode 100644
index 0000000..f552ab3
--- /dev/null
+++ b/parts/toolbar.css
@@ -0,0 +1,87 @@
+/*
+░▀█▀░█▀█░█▀█░█░░░█▀▄░█▀█░█▀▄
+░░█░░█░█░█░█░█░░░█▀▄░█▀█░█▀▄
+░░▀░░▀▀▀░▀▀▀░▀▀▀░▀▀░░▀░▀░▀░▀
+
+Contains navbar, urlbar, and etc.
+*/
+
+.browser-toolbar {
+}
+
+.browser-toolbar:-moz-lwtheme-darktext,
+.browser-toolbar:-moz-lwtheme-brighttext {
+ background: var(--bf-tab-toolbar-bg) !important;
+}
+
+toolbar {
+ background-image: none !important;
+}
+
+toolbar#nav-bar {
+ padding: var(--bf-navbar-padding) !important;
+
+ /* Remove horizontal line on navbar */
+ box-shadow: none !important;
+ border-top: none !important;
+}
+
+/* Set color schemes for #nav-bar */
+toolbar#nav-bar:-moz-lwtheme-darktext,
+toolbar#nav-bar:-moz-lwtheme-brighttext {
+ background: var(--bf-navbar-bg) !important;
+}
+
+toolbarbutton {
+ box-shadow: none !important;
+ margin-left: 2px !important;
+}
+
+.toolbarbutton-1 {
+}
+
+/* Set color schemes for #nav-bar */
+.toolbarbutton-1:-moz-lwtheme-darktext,
+.toolbarbutton-1:-moz-lwtheme-brighttext {
+ --toolbarbutton-hover-background: var(--bf-hover-bg) !important;
+ --toolbarbutton-active-background: var(--bf-active-bg) !important;
+}
+
+#searchbar {
+ border: none !important;
+}
+
+/* Set color scheme */
+#searchbar:-moz-lwtheme-darktext,
+#searchbar:-moz-lwtheme-brighttext {
+ background: var(--bf-bg) !important;
+}
+
+.searchbar-textbox {
+ font-weight: 700 !important;
+}
+
+#navigator-toolbox,
+toolbaritem {
+ border: none !important;
+}
+
+#navigator-toolbox::after {
+ border-bottom: 0 !important;
+}
+
+.toolbarbutton-text {
+}
+
+/* Set color scheme */
+.toolbarbutton-text:-moz-lwtheme-darktext,
+.toolbarbutton-text:-moz-lwtheme-brighttext {
+ color: var(--bf-icon-color) !important;
+}
+
+/* Back button */
+#back-button > .toolbarbutton-icon {
+ --backbutton-background: transparent !important;
+ border: none !important;
+ -moz-appearance: var(--bf-moz-appearance) !important;
+}
diff --git a/parts/urlbar.css b/parts/urlbar.css
new file mode 100644
index 0000000..4d26da5
--- /dev/null
+++ b/parts/urlbar.css
@@ -0,0 +1,228 @@
+/*
+░█░█░█▀▄░█░░░█▀▄░█▀█░█▀▄
+░█░█░█▀▄░█░░░█▀▄░█▀█░█▀▄
+░▀▀▀░▀░▀░▀▀▀░▀▀░░▀░▀░▀░▀
+
+URL bar
+*/
+
+/* URL bar max-width and centered hack */
+#urlbar {
+ max-width: 70% !important;
+ margin: 0 15% !important;
+
+ /* URL bar and toolbar height */
+ --urlbar-height: 36px !important;
+ --urlbar-toolbar-height: 40px !important;
+}
+
+/* URL bar and toolbar height if compact mode */
+:root[uidensity="compact"] #urlbar {
+ --urlbar-height: 30px !important;
+ --urlbar-toolbar-height: 34px !important;
+}
+
+#urlbar-input:focus {
+}
+
+/* Set color scheme */
+#urlbar-input:focus:-moz-lwtheme-darktext,
+#urlbar-input:focus:-moz-lwtheme-brighttext {
+ color: var(--bf-urlbar-focused-color) !important;
+}
+
+#urlbar-background {
+ border-radius: var(--bf-urlbar-radius) !important;
+ border: none !important
+}
+
+/* Set color scheme */
+#urlbar-background:-moz-lwtheme-darktext,
+#urlbar-background:-moz-lwtheme-brighttext {
+ background: var(--bf-urlbar-bg) !important;
+}
+
+.urlbar-icon:not([disabled]):hover,
+.urlbar-icon-wrapper:not([disabled]):hover {
+}
+
+/* Set color scheme */
+.urlbar-icon:not([disabled]):hover:-moz-lwtheme-darktext,
+.urlbar-icon:not([disabled]):hover:-moz-lwtheme-brighttext,
+.urlbar-icon-wrapper:not([disabled]):hover:-moz-lwtheme-darktext,
+.urlbar-icon-wrapper:not([disabled]):hover:-moz-lwtheme-brighttext {
+ background: var(--bf-hover-bg) !important;
+}
+
+.urlbar-icon[open],
+.urlbar-icon-wrapper[open],
+.urlbar-icon:not([disabled]):hover:active,
+.urlbar-icon-wrapper:hover:active {
+}
+
+/* Set color scheme */
+.urlbar-icon[open]:-moz-lwtheme-darktext,
+.urlbar-icon[open]:-moz-lwtheme-brighttext,
+.urlbar-icon-wrapper[open]:-moz-lwtheme-darktext,
+.urlbar-icon-wrapper[open]:-moz-lwtheme-brighttext,
+.urlbar-icon:not([disabled]):hover:active:-moz-lwtheme-darktext,
+.urlbar-icon:not([disabled]):hover:active:-moz-lwtheme-brighttext,
+.urlbar-icon-wrapper:hover:active:-moz-lwtheme-darktext,
+.urlbar-icon-wrapper:hover:active:-moz-lwtheme-brighttext {
+ background: var(--bf-hover-bg) !important;
+}
+
+.urlbar-icon-wrapper[open] > .urlbar-icon,
+.urlbar-icon-wrapper > .urlbar-icon:hover,
+.urlbar-icon-wrapper > .urlbar-icon:hover:active {
+}
+
+/* Set color scheme */
+.urlbar-icon-wrapper[open] > .urlbar-icon:-moz-lwtheme-darktext,
+.urlbar-icon-wrapper[open] > .urlbar-icon:-moz-lwtheme-brighttext,
+.urlbar-icon-wrapper > .urlbar-icon:hover:-moz-lwtheme-darktext,
+.urlbar-icon-wrapper > .urlbar-icon:hover:-moz-lwtheme-brighttext,
+.urlbar-icon-wrapper > .urlbar-icon:hover:active:-moz-lwtheme-darktext,
+.urlbar-icon-wrapper > .urlbar-icon:hover:active:-moz-lwtheme-brighttext{
+ background: var(--bf-hover-bg) !important;
+}
+
+#urlbar[breakout-extend="true"]:not([open="true"]) > #urlbar-background {
+ box-shadow: none !important;
+ display: none !important;
+ -moz-appearance: var(--bf-moz-appearance) !important;
+}
+
+#urlbar[open="true"] > #urlbar-background {
+}
+
+/* Set color scheme */
+#urlbar[open="true"] > #urlbar-background:-moz-lwtheme-darktext,
+#urlbar[open="true"] > #urlbar-background:-moz-lwtheme-brighttext {
+ background: var(--bf-urlbar-active-bg) !important;
+ backdrop-filter: blur(var(--bf-backdrop-blur)) !important;
+}
+
+.urlbar-icon {
+}
+
+/* Set color scheme */
+.urlbar-icon:-moz-lwtheme-darktext,
+.urlbar-icon:-moz-lwtheme-brighttext {
+ color: var(--bf-icon-color) !important;
+}
+
+.urlbar-icon > image {
+ fill: #ff00ff !important;
+ color: #ff00ff !important;
+}
+
+.urlbarView-favicon,
+.urlbarView-type-icon {
+ display: none !important;
+}
+
+.urlbarView-row[type="bookmark"] > span {
+ color: var(--bf-urlbar-bookmark-color) !important;
+}
+
+.urlbarView-row[type="switchtab"] > span .urlbarView-url {
+ color: var(--bf-urlbar-switch-tab-color) !important;
+}
+
+#urlbar-results {
+ font-weight: var(--bf-urlbar-results-font-weight);
+ font-size: var(--bf-urlbar-results-font-size) !important;
+}
+
+/* Hover background color */
+.urlbarView-row-inner:hover {
+ background: var(--bf-accent-bg) !important;
+}
+
+.urlbarView-url, .search-panel-one-offs-container {
+ font-weight: var(--bf-urlbar-results-font-weight);
+ font-size: var(--bf-urlbar-font-size) !important;
+}
+
+#urlbar-input {
+ font-size: var(--bf-urlbar-font-size) !important;
+ font-weight: var(--bf-urlbar-font-weight)!important;
+ text-align: center !important;
+}
+
+/* Urlbar buttons */
+.urlbar-icon,
+.urlbar-page-action {
+ border-radius: 6px;
+}
+
+/* URL bar hightlight color */
+::-moz-selection {
+ background-color: var(--bf-urlbar-hightlight-bg) !important;
+}
+
+/* Bookmark button - Star button */
+#star-button {
+ /* URL bar bookmark button */
+ display: block !important;
+}
+
+#star-button:hover:not(.no-hover):not([open=true]) {
+}
+
+/* Set color scheme */
+#star-button:hover:not(.no-hover):not([open=true]):-moz-lwtheme-darktext,
+#star-button:hover:not(.no-hover):not([open=true]):-moz-lwtheme-brighttext {
+ background: var(--bf-hover-bg) !important;
+}
+
+#star-button:hover:active:not(.no-hover),
+#star-button[open=true] {
+}
+
+/* Set color scheme */
+#star-button:hover:active:not(.no-hover):-moz-lwtheme-darktext,
+#star-button:hover:active:not(.no-hover):-moz-lwtheme-brighttext,
+#star-button[open=true]:-moz-lwtheme-darktext,
+#star-button[open=true]:-moz-lwtheme-brighttext {
+ background: var(--bf-hover-bg) !important;
+}
+
+/* Tracking */
+#tracking-protection-icon-container {
+ display: none !important;
+}
+
+/* Identity */
+#identity-box {
+ display: none !important;
+}
+
+#identity-box:hover:not(.no-hover):not([open=true]),
+#tracking-protection-icon-container:hover:not(.no-hover):not([open=true]) {
+}
+
+#identity-box:hover:not(.no-hover):not([open=true]):-moz-lwtheme-darktext,
+#identity-box:hover:not(.no-hover):not([open=true]):-moz-lwtheme-brighttext,
+#tracking-protection-icon-container:hover:not(.no-hover):not([open=true]):-moz-lwtheme-darktext,
+#tracking-protection-icon-container:hover:not(.no-hover):not([open=true]):-moz-lwtheme-brighttext {
+ background: var(--bf-hover-bg) !important;
+}
+
+#identity-box:hover:active:not(.no-hover),
+#identity-box[open=true],
+#tracking-protection-icon-container:hover:active:not(.no-hover),
+#tracking-protection-icon-container[open=true] {
+}
+
+#identity-box:hover:active:not(.no-hover):-moz-lwtheme-darktext,
+#identity-box:hover:active:not(.no-hover):-moz-lwtheme-brighttext,
+#identity-box[open=true]:-moz-lwtheme-darktext,
+#identity-box[open=true]:-moz-lwtheme-brighttext,
+#tracking-protection-icon-container:hover:active:not(.no-hover):-moz-lwtheme-darktext,
+#tracking-protection-icon-container:hover:active:not(.no-hover):-moz-lwtheme-brighttext,
+#tracking-protection-icon-container[open=true]:-moz-lwtheme-darktext,
+#tracking-protection-icon-container[open=true]:-moz-lwtheme-brighttext {
+ background: var(--bf-hover-bg) !important;
+}
\ No newline at end of file
diff --git a/parts/window-controls.css b/parts/window-controls.css
new file mode 100644
index 0000000..1c38ac2
--- /dev/null
+++ b/parts/window-controls.css
@@ -0,0 +1,28 @@
+
+
+/*
+░█░█░▀█▀░█▀█░█▀▄░█▀█░█░█░█▀▄░█░█░▀█▀░▀█▀░█▀█░█▀█░█▀▀
+░█▄█░░█░░█░█░█░█░█░█░█▄█░█▀▄░█░█░░█░░░█░░█░█░█░█░▀▀█
+░▀░▀░▀▀▀░▀░▀░▀▀░░▀▀▀░▀░▀░▀▀░░▀▀▀░░▀░░░▀░░▀▀▀░▀░▀░▀▀▀
+
+The control buttons. Contains, close, minimize, and maximize buttons
+*/
+
+#autohide-context {
+ display: none !important;
+}
+
+#window-controls[hidden="true"] {
+ display: none !important;
+}
+
+#window-controls[hidden="false"] {
+ display: inline-flex !important;
+}
+
+/* Hide titlebar-buttonbox if there's single tab */
+/*
+:root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-buttonbox-container {
+ display: none !important;
+}
+*/
diff --git a/scrot.webp b/scrots/blurred.webp
similarity index 100%
rename from scrot.webp
rename to scrots/blurred.webp
diff --git a/scrots/solid.webp b/scrots/solid.webp
new file mode 100644
index 0000000..d604369
Binary files /dev/null and b/scrots/solid.webp differ
diff --git a/userChrome.css b/userChrome.css
index 5860c5d..999e3d5 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -1,868 +1,34 @@
-:root {
- /* All the CSS variables here are global */
- /* These applies to all colorschemes */
-
- /* If windows - `-moz-win-glass`, if macOS - `-moz-mac-vibrancy-dark` */
- --bf-moz-appearance: -moz-win-glass !important;
-
- --bf-backdrop-blur: 6px;
-
- --bf-sidebar-searchbar-radius: 6px;
-
- --bf-accent-bg: #4C5FF9CC;
- --bf-blank-page-bg: #252525;
-
- --bf-urlbar-hightlight-bg: var(--bf-accent-bg);
- --bf-urlbar-radius: 9px;
- --bf-urlbar-results-font-size: 12pt;
- --bf-urlbar-results-font-weight: 550;
- --bf-urlbar-font-size: 12pt;
- --bf-urlbar-font-weight: 500;
- --bf-urlbar-switch-tab-color: #6498EF;
- --bf-urlbar-bookmark-color: #53E2AE;
-
- --bf-navbar-padding: 6px;
-
- --bf-tab-selected-bg: #77777788;
- --bf-tab-font-size: 11pt;
- --bf-tab-font-weight: 400;
- --bf-tab-height: 36px;
- --bf-tab-border-radius: 6px;
- --bf-tab-soundplaying-bg: #985EFFCC;
-
- --toolbar-bgcolor: transparent !important;
- --urlbar-separator-color: transparent !important;
-}
-
-/* Light Mode */
-:root:-moz-lwtheme-darktext {
- --bf-main-window: transparent;
- --bf-bg: #F2F2F266;
- --bf-color: #0A0A0A;
-
- --bf-hover-bg: #1A1A1A33;
- --bf-active-bg: #1A1A1A66;
-
- --bf-icon-color: #0A0A0A;
- --bf-tab-toolbar-bg: #F2F2F2AA;
- --bf-tab-selected-bg: #00000022;
- --bf-navbar-bg: var(--bf-bg);
- --bf-urlbar-bg: var(--bf-bg);
- --bf-urlbar-active-bg: var(--bf-bg);
- --bf-urlbar-focused-color: var(--bf-color);
-
- --bf-sidebar-bg: var(--bf-bg);
- --bf-sidebar-color: var(--bf-color);
-
- --bf-menupopup-bg: #F2F2F2AA;
- --bf-menupopup-color: var(--bf-color);
-}
-
-/* Dark Mode */
-:root:-moz-lwtheme-brighttext {
- --bf-main-window: transparent;
- --bf-bg: #00000066;
- --bf-color: #F2F2F2;
-
- --bf-hover-bg: #F2F2F233;
- --bf-active-bg: #F2F2F266;
-
- --bf-icon-color: #F2F2F2;
- --bf-tab-toolbar-bg: #000000AA;
- --bf-tab-selected-bg: #F2F2F210;
- --bf-navbar-bg: var(--bf-bg);
- --bf-urlbar-bg: var(--bf-bg);
- --bf-urlbar-active-bg: var(--bf-bg);
- --bf-urlbar-focused-color: var(--bf-color);
-
- --bf-sidebar-bg: var(--bf-bg);
- --bf-sidebar-color: var(--bf-color);
-
- --bf-menupopup-bg: #000000AA;
- --bf-menupopup-color: var(--bf-color);
-}
-
/*
-░▀█▀░█▀▄░█▀█░█▀█░█▀▀░█▀█░█▀█░█▀▄░█▀▀░█▀█░█▀▀░█░█
-░░█░░█▀▄░█▀█░█░█░▀▀█░█▀▀░█▀█░█▀▄░█▀▀░█░█░█░░░░█░
-░░▀░░▀░▀░▀░▀░▀░▀░▀▀▀░▀░░░▀░▀░▀░▀░▀▀▀░▀░▀░▀▀▀░░▀░
+░█▀▀░█▀█░█░░░█▀█░█▀▄░█▀▀
+░█░░░█░█░█░░░█░█░█▀▄░▀▀█
+░▀▀▀░▀▀▀░▀▀▀░▀▀▀░▀░▀░▀▀▀
-Main window
+Load preferred colorscheme
*/
-#main-window {
- font-kerning: normal;
- border: none !important;
-}
-/* Add transparency to light and dark color schemes */
-#main-window:-moz-lwtheme-brighttext,
-#main-window:-moz-lwtheme-darktext {
- background: var(--bf-main-window) !important;
- -moz-appearance: var(--bf-moz-appearance) !important;
-}
+/* Blurred Color Scheme */
+@import url('colors/blurred.css');
+/* Solid Color Scheme */
/*
-░█▀▀░█▀█░█▀█░▀█▀
-░█▀▀░█░█░█░█░░█░
-░▀░░░▀▀▀░▀░▀░░▀░
-
-I'm not sure if this does something
-*/
-
-* {
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-rendering: optimizeLegibility;
- font-variant-ligatures: none;
- font-kerning: normal;
-}
-
-/*
-░▀█▀░█▀█░█▀█░█░░░█▀▄░█▀█░█▀▄
-░░█░░█░█░█░█░█░░░█▀▄░█▀█░█▀▄
-░░▀░░▀▀▀░▀▀▀░▀▀▀░▀▀░░▀░▀░▀░▀
-
-Contains navbar, urlbar, and etc.
-*/
-
-.browser-toolbar {
-}
-
-.browser-toolbar:-moz-lwtheme-darktext,
-.browser-toolbar:-moz-lwtheme-brighttext {
- background: var(--bf-tab-toolbar-bg) !important;
-}
-
-toolbar {
- background-image: none !important;
-}
-
-toolbar#nav-bar {
- padding: var(--bf-navbar-padding) !important;
-
- /* Remove horizontal line on navbar */
- box-shadow: none !important;
- border-top: none !important;
-}
-
-/* Set color schemes for #nav-bar */
-toolbar#nav-bar:-moz-lwtheme-darktext,
-toolbar#nav-bar:-moz-lwtheme-brighttext {
- background: var(--bf-navbar-bg) !important;
-}
-
-toolbarbutton {
- box-shadow: none !important;
- margin-left: 2px !important;
-}
-
-.toolbarbutton-1 {
-}
-
-/* Set color schemes for #nav-bar */
-.toolbarbutton-1:-moz-lwtheme-darktext,
-.toolbarbutton-1:-moz-lwtheme-brighttext {
- --toolbarbutton-hover-background: var(--bf-hover-bg) !important;
- --toolbarbutton-active-background: var(--bf-active-bg) !important;
-}
-
-/* URL bar max-width and centered hack */
-#urlbar {
- max-width: 70% !important;
- margin: 0 15% !important;
-}
-
-/* URL bar and toolbar height */
-#urlbar {
- --urlbar-height: 36px !important;
- --urlbar-toolbar-height: 40px !important;
-}
-
-/* URL bar and toolbar height if compact mode */
-:root[uidensity="compact"] #urlbar {
- --urlbar-height: 30px !important;
- --urlbar-toolbar-height: 34px !important;
-}
-
-#urlbar-input:focus {
-}
-
-/* Set color scheme */
-#urlbar-input:focus:-moz-lwtheme-darktext,
-#urlbar-input:focus:-moz-lwtheme-brighttext {
- color: var(--bf-urlbar-focused-color) !important;
-}
-
-#urlbar-background {
- border-radius: var(--bf-urlbar-radius) !important;
- border: none !important
-}
-
-/* Set color scheme */
-#urlbar-background:-moz-lwtheme-darktext,
-#urlbar-background:-moz-lwtheme-brighttext {
- background: var(--bf-urlbar-bg) !important;
-}
-
-.urlbar-icon:not([disabled]):hover,
-.urlbar-icon-wrapper:not([disabled]):hover {
-}
-
-/* Set color scheme */
-.urlbar-icon:not([disabled]):hover:-moz-lwtheme-darktext,
-.urlbar-icon:not([disabled]):hover:-moz-lwtheme-brighttext,
-.urlbar-icon-wrapper:not([disabled]):hover:-moz-lwtheme-darktext,
-.urlbar-icon-wrapper:not([disabled]):hover:-moz-lwtheme-brighttext {
- background: var(--bf-hover-bg) !important;
-}
-
-.urlbar-icon[open],
-.urlbar-icon-wrapper[open],
-.urlbar-icon:not([disabled]):hover:active,
-.urlbar-icon-wrapper:hover:active {
-}
-
-/* Set color scheme */
-.urlbar-icon[open]:-moz-lwtheme-darktext,
-.urlbar-icon[open]:-moz-lwtheme-brighttext,
-.urlbar-icon-wrapper[open]:-moz-lwtheme-darktext,
-.urlbar-icon-wrapper[open]:-moz-lwtheme-brighttext,
-.urlbar-icon:not([disabled]):hover:active:-moz-lwtheme-darktext,
-.urlbar-icon:not([disabled]):hover:active:-moz-lwtheme-brighttext,
-.urlbar-icon-wrapper:hover:active:-moz-lwtheme-darktext,
-.urlbar-icon-wrapper:hover:active:-moz-lwtheme-brighttext {
- background: var(--bf-hover-bg) !important;
-}
-
-.urlbar-icon-wrapper[open] > .urlbar-icon,
-.urlbar-icon-wrapper > .urlbar-icon:hover,
-.urlbar-icon-wrapper > .urlbar-icon:hover:active {
-}
-
-/* Set color scheme */
-.urlbar-icon-wrapper[open] > .urlbar-icon:-moz-lwtheme-darktext,
-.urlbar-icon-wrapper[open] > .urlbar-icon:-moz-lwtheme-brighttext,
-.urlbar-icon-wrapper > .urlbar-icon:hover:-moz-lwtheme-darktext,
-.urlbar-icon-wrapper > .urlbar-icon:hover:-moz-lwtheme-brighttext,
-.urlbar-icon-wrapper > .urlbar-icon:hover:active:-moz-lwtheme-darktext,
-.urlbar-icon-wrapper > .urlbar-icon:hover:active:-moz-lwtheme-brighttext{
- background: var(--bf-hover-bg) !important;
-}
-
-#urlbar[breakout-extend="true"]:not([open="true"]) > #urlbar-background {
- box-shadow: none !important;
- display: none !important;
- -moz-appearance: var(--bf-moz-appearance) !important;
-}
-
-#urlbar[open="true"] > #urlbar-background {
-}
-
-/* Set color scheme */
-#urlbar[open="true"] > #urlbar-background:-moz-lwtheme-darktext,
-#urlbar[open="true"] > #urlbar-background:-moz-lwtheme-brighttext {
- background: var(--bf-urlbar-active-bg) !important;
- backdrop-filter: blur(var(--bf-backdrop-blur)) !important;
-}
-
-.urlbar-icon {
-}
-
-/* Set color scheme */
-.urlbar-icon:-moz-lwtheme-darktext,
-.urlbar-icon:-moz-lwtheme-brighttext {
- color: var(--bf-icon-color) !important;
-}
-
-.urlbar-icon > image {
- fill: #ff00ff !important;
- color: #ff00ff !important;
-}
-
-.urlbarView-favicon,
-.urlbarView-type-icon {
- display: none !important;
-}
-
-.urlbarView-row[type="bookmark"] > span {
- color: var(--bf-urlbar-bookmark-color) !important;
-}
-
-.urlbarView-row[type="switchtab"] > span .urlbarView-url {
- color: var(--bf-urlbar-switch-tab-color) !important;
-}
-
-#urlbar-results {
- font-weight: var(--bf-urlbar-results-font-weight);
- font-size: var(--bf-urlbar-results-font-size) !important;
-}
-
-/* Hover background color */
-.urlbarView-row-inner:hover {
- background: var(--bf-accent-bg) !important;
-}
-
-.urlbarView-url, .search-panel-one-offs-container {
- font-weight: var(--bf-urlbar-results-font-weight);
- font-size: var(--bf-urlbar-font-size) !important;
-}
-
-#urlbar-input {
- font-size: var(--bf-urlbar-font-size) !important;
- font-weight: var(--bf-urlbar-font-weight)!important;
- text-align: center !important;
-}
-
-/* Urlbar buttons */
-.urlbar-icon,
-.urlbar-page-action {
- border-radius: 6px;
-}
-
-#searchbar {
- border: none !important;
-}
-
-/* Set color scheme */
-#searchbar:-moz-lwtheme-darktext,
-#searchbar:-moz-lwtheme-brighttext {
- background: var(--bf-bg) !important;
-}
-
-.searchbar-textbox {
- font-weight: 700 !important;
-}
-
-/* URL bar hightlight color */
-::-moz-selection {
- background-color: var(--bf-urlbar-hightlight-bg) !important;
-}
-
-/* Bookmark button - Star button */
-#star-button {
- /* URL bar bookmark button */
- display: block !important;
-}
-
-#star-button:hover:not(.no-hover):not([open=true]) {
-}
-
-/* Set color scheme */
-#star-button:hover:not(.no-hover):not([open=true]):-moz-lwtheme-darktext,
-#star-button:hover:not(.no-hover):not([open=true]):-moz-lwtheme-brighttext {
- background: var(--bf-hover-bg) !important;
-}
-
-#star-button:hover:active:not(.no-hover),
-#star-button[open=true] {
-}
-
-/* Set color scheme */
-#star-button:hover:active:not(.no-hover):-moz-lwtheme-darktext,
-#star-button:hover:active:not(.no-hover):-moz-lwtheme-brighttext,
-#star-button[open=true]:-moz-lwtheme-darktext,
-#star-button[open=true]:-moz-lwtheme-brighttext {
- background: var(--bf-hover-bg) !important;
-}
-
-#navigator-toolbox,
-toolbaritem {
- border: none !important;
-}
-
-#navigator-toolbox::after {
- border-bottom: 0 !important;
-}
-
-.toolbarbutton-text {
-}
-
-/* Set color scheme */
-.toolbarbutton-text:-moz-lwtheme-darktext,
-.toolbarbutton-text:-moz-lwtheme-brighttext {
- color: var(--bf-icon-color) !important;
-}
-
-/* Back button */
-#back-button > .toolbarbutton-icon {
- --backbutton-background: transparent !important;
- border: none !important;
- -moz-appearance: var(--bf-moz-appearance) !important;
-}
-
-/* Tracking */
-#tracking-protection-icon-container {
- display: none !important;
-}
-
-/* Identity */
-#identity-box {
- display: none !important;
-}
-
-#identity-box:hover:not(.no-hover):not([open=true]),
-#tracking-protection-icon-container:hover:not(.no-hover):not([open=true]) {
-}
-
-#identity-box:hover:not(.no-hover):not([open=true]):-moz-lwtheme-darktext,
-#identity-box:hover:not(.no-hover):not([open=true]):-moz-lwtheme-brighttext,
-#tracking-protection-icon-container:hover:not(.no-hover):not([open=true]):-moz-lwtheme-darktext,
-#tracking-protection-icon-container:hover:not(.no-hover):not([open=true]):-moz-lwtheme-brighttext {
- background: var(--bf-hover-bg) !important;
-}
-
-#identity-box:hover:active:not(.no-hover),
-#identity-box[open=true],
-#tracking-protection-icon-container:hover:active:not(.no-hover),
-#tracking-protection-icon-container[open=true] {
-}
-
-#identity-box:hover:active:not(.no-hover):-moz-lwtheme-darktext,
-#identity-box:hover:active:not(.no-hover):-moz-lwtheme-brighttext,
-#identity-box[open=true]:-moz-lwtheme-darktext,
-#identity-box[open=true]:-moz-lwtheme-brighttext,
-#tracking-protection-icon-container:hover:active:not(.no-hover):-moz-lwtheme-darktext,
-#tracking-protection-icon-container:hover:active:not(.no-hover):-moz-lwtheme-brighttext,
-#tracking-protection-icon-container[open=true]:-moz-lwtheme-darktext,
-#tracking-protection-icon-container[open=true]:-moz-lwtheme-brighttext {
- background: var(--bf-hover-bg) !important;
-}
-
-/*
-░▀█▀░█▀█░█▀▄░█▀▄░█▀█░█▀▄
-░░█░░█▀█░█▀▄░█▀▄░█▀█░█▀▄
-░░▀░░▀░▀░▀▀░░▀▀░░▀░▀░▀░▀
-
-The tabs container
-*/
-
-/* Move tab bar beneath the url bar */
-#titlebar {
- /*
- Set the value to 3 to move the tabbar below the navbar
- */
- -moz-box-ordinal-group: 1 !important;
-}
-
-#titlebar::after {
- border-bottom: 0 !important;
-}
-
-.toolbar-items {
-}
-
-/* Transparent tabs */
-.toolbar-items:-moz-lwtheme-darktext,
-.toolbar-items:-moz-lwtheme-brighttext {
- background-color: transparent !important;
- -moz-appearance: var(--bf-moz-appearance) !important;
-}
-
-/* Set minimum height for tab bar */
-#tabbrowser-tabs {
- --tab-min-height: 0;
- margin: 6px 5px 6px 5px;
-}
-
-/* Compact mode */
-:root[uidensity="compact"] #tabbrowser-tabs {
- margin: 0 !important;
-}
-
-/* Hide solo tab */
-/*
-#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:only-of-type {
- visibility: collapse;
-}
-*/
-
-/* Hide New Tab Button immediately next to solo tab */
-/*
-#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:only-of-type + toolbarbutton {
- visibility: collapse;
-}
-*/
-
- /* Stretch Tabs */
-.tabbrowser-tab[fadein]:not([pinned]) {
- max-width: none !important;
-}
-
-.tab-background {
- border: none !important;
-}
-
-.tab-background:-moz-lwtheme-darktext,
-.tab-background:-moz-lwtheme-brighttext {
- background: transparent !important;
- -moz-appearance: var(--bf-moz-appearance) !important;
-}
-
-.tab-background[selected="true"] {
- background: var(--bf-tab-selected-bg) !important;
-}
-
-.tab-background:not[visuallyselected] {
- background: var(--bf-tab-selected-bg) !important;
- opacity: 0.5 !important;
-}
-
-/* Remove the all the "lines" in tab sides */
-/*
-.tabbrowser-tab::after,
-.tabbrowser-tab::before {
- border-left: none !important;
-}
-*/
-
-/* Remove the lines on the side of the selected tab */
-.tabbrowser-tab[beforeselected-visible="true"]::after,
-.tabbrowser-tab[beforeselected-visible="true"]::before,
-.tabbrowser-tab[selected="true"]::after,
-.tabbrowser-tab[selected="true"]::before {
- border-left: none !important;
-}
-
-/* Style all the lines before and after selected tab */
-.tabbrowser-tab::after,
-.tabbrowser-tab::before {
- border-width: 1px !important;
-}
-
-.tabbrowser-arrowscrollbox {
- margin-inline-start: 4px !important;
- margin-inline-end: 0 !important;
-}
-
-.tab-text {
- font-weight: var(--bf-tab-font-weight);
- font-size: var(--bf-tab-font-size) !important;
-}
-
-/* Center all content */
-.tab-content {
- justify-content: center;
- align-items: center;
- margin-top: -1px;
- min-width: 100% !important;
- padding: 0 10px !important;
-}
-
-/* A way to center the label and icon while
-the close button is positioned to the far right */
-.tab-content::before{
- content: "";
- display: -moz-box;
- -moz-box-flex: 1
-}
-
-/* Tab close button */
-.tab-close-button {
- opacity: 1 !important;
-}
-
-/* Prevent tab icons size breaking */
-.tab-icon-image, .tab-icon-sound,
-.tab-throbber, .tab-throbber-fallback,
-.tab-close-button {
- min-width: 16px;
-}
-
-/* Adjust tab label width */
-.tab-label-container {
- min-width: 3px !important;
-}
-
-/* If tab close button is not present, don't force favicon to the center */
-#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected="true"]) .tab-throbber,
-#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected="true"]) .tab-throbber-fallback,
-#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected="true"]):not([busy]) .tab-icon-image,
-#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected="true"]):not([image]) .tab-label-container {
- margin-left: 0 !important;
-}
-
-/* Tab icon */
-hbox.tab-content .tab-icon-image {
- display: initial !important;
-}
-
-/* Show the icon of pinned tabs */
-hbox.tab-content[pinned=true] .tab-icon-image {
- display: initial !important;
-}
-
-/* Hide text of pinned tabs */
-hbox.tab-content[pinned=true] .tab-text {
- display: none !important;
-}
-
-/* Hide the blue line on top of tab */
-.tab-line {
- display: none !important;
-}
-
-.tab-bottom-line {
-}
-
-.tabbrowser-tab {
- border-radius: var(--bf-tab-border-radius) !important;
- border-width: 0;
- height: var(--bf-tab-height) !important;
- overflow: hidden;
- margin-top: 0 !important;
- margin-bottom: 0 !important;
-}
-
-:root[uidensity="compact"] .tabbrowser-tab {
- border-radius: 0 !important;
-}
-
-.tabbrowser-tab:hover {
- box-shadow: 0 1px 4px rgba(0,0,0,.05);
-}
-
-/* Set color scheme */
-.tabbrowser-tab:hover:-moz-lwtheme-darktext,
-.tabbrowser-tab:hover:-moz-lwtheme-brighttext {
- background: var(--bf-hover-bg) !important;
-}
-
-/* Audio playing background */
-.tabbrowser-tab[soundplaying="true"] {
- background-color: var(--bf-tab-soundplaying-bg) !important;
-}
-
-#tabbrowser-tabs {
-}
-
-/* Audio Icon */
-.tab-icon-sound {
-}
-
-/* Center pinned tab stack(Contains icon) if #tabbrowser-tabs[positionpinnedtabs=true] */
-#tabbrowser-tabs[positionpinnedtabs=true] .tabbrowser-tab[pinned=true] .tab-stack {
- position: relative !important;
- top: 50% !important;
- transform: translateY(-50%) !important;
-}
-
-
-.private-browsing-indicator {
- display: block;
- background: transparent;
-}
-
-/* Remove hover effects on tab bar buttons */
-#TabsToolbar {
- --toolbarbutton-active-background: transparent !important;
- --toolbarbutton-hover-background: transparent !important;
- -moz-appearance: none !important;
-}
-
-/* Left to Right Alignment of tabs toolbar */
-/* #TabsToolbar {
- direction: rtl;
-}
-
-#tabbrowser-tabs {
- direction: ltr;
-}
+@import url('colors/solid.css');
*/
/*
-░█▀▀░▀█▀░█▀▄░█▀▀░█▀▄░█▀█░█▀▄
-░▀▀█░░█░░█░█░█▀▀░█▀▄░█▀█░█▀▄
-░▀▀▀░▀▀▀░▀▀░░▀▀▀░▀▀░░▀░▀░▀░▀
+░█░█░▀█▀░░░█▀▀░█░░░█▀▀░█▄█░█▀▀░█▀█░▀█▀░█▀▀
+░█░█░░█░░░░█▀▀░█░░░█▀▀░█░█░█▀▀░█░█░░█░░▀▀█
+░▀▀▀░▀▀▀░░░▀▀▀░▀▀▀░▀▀▀░▀░▀░▀▀▀░▀░▀░░▀░░▀▀▀
-Sidebar
+Load Customized Firefox's UI Elements
*/
-#sidebar-box {
-}
-
-#sidebar-box:-moz-lwtheme-darktext,
-#sidebar-box:-moz-lwtheme-brighttext {
- --sidebar-background-color: var(--bf-sidebar-bg) !important;
- --sidebar-text-color: var(--bf-sidebar-color) !important;
-}
-
-#sidebar,
-.sidebar-panel {
- background: transparent !important;
-}
-
-/* Sidebar searchbar */
-#sidebar-search-container #search-box {
- border: none !important;
- padding: 6px !important;
- border-radius: var(--bf-sidebar-searchbar-radius) !important;
-}
-
-/*
-░█▀█░█▀▄░█▀▄░█▀█░█░█░█▀█░█▀█░█▀█░█▀▀░█░░
-░█▀█░█▀▄░█▀▄░█░█░█▄█░█▀▀░█▀█░█░█░█▀▀░█░░
-░▀░▀░▀░▀░▀░▀░▀▀▀░▀░▀░▀░░░▀░▀░▀░▀░▀▀▀░▀▀▀
-
-The dropdown menus
-*/
-
-.panel-arrowcontent {
- padding: 0 !important;
- margin: 0 !important;
-}
-
-toolbarseparator {
- display: none !important;
-}
-
-box.panel-arrowbox {
- display: none;
-}
-
-box.panel-arrowcontent {
- border-radius: 8px !important;
- border: none !important;
-}
-
-/*
-░█▀▀░▀█▀░█▀█░█▀▄░█▀▄░█▀█░█▀▄
-░█▀▀░░█░░█░█░█░█░█▀▄░█▀█░█▀▄
-░▀░░░▀▀▀░▀░▀░▀▀░░▀▀░░▀░▀░▀░▀
-
-The findbar
-*/
-
-#browser #appcontent #tabbrowser-tabbox findbar,
-#browser #appcontent #tabbrowser-tabbox tabpanels {
- -moz-appearance: none !important;
- border: none !important;
-}
-
-#browser #appcontent #tabbrowser-tabbox findbar:-moz-lwtheme-darktext,
-#browser #appcontent #tabbrowser-tabbox findbar:-moz-lwtheme-brighttext,
-#browser #appcontent #tabbrowser-tabbox tabpanels:-moz-lwtheme-darktext,
-#browser #appcontent #tabbrowser-tabbox tabpanels:-moz-lwtheme-brighttext {
- background: transparent !important;
-}
-
-#browser #appcontent #tabbrowser-tabbox findbar {
-}
-
-#browser #appcontent #tabbrowser-tabbox findbar:-moz-lwtheme-darktext,
-#browser #appcontent #tabbrowser-tabbox findbar:-moz-lwtheme-brighttext {
- background-color: var(--bf-bg) !important;
-}
-
-.findbar-find-previous,
-.findbar-find-next {
- margin: 0 !important;
- border: none !important;
-}
-
-#browser #appcontent #tabbrowser-tabbox .findbar-find-fast {
-}
-
-#browser #appcontent #tabbrowser-tabbox .findbar-find-fast:not([status="notfound"]):-moz-lwtheme-darktext,
-#browser #appcontent #tabbrowser-tabbox .findbar-find-fast:not([status="notfound"]):-moz-lwtheme-brighttext {
- background-color: var(--bf-bg) !important;
-}
-
-/*
-░█▀▀░█▀█░█▀█░▀█▀░█▀▀░█░█░▀█▀░█▄█░█▀▀░█▀█░█░█
-░█░░░█░█░█░█░░█░░█▀▀░▄▀▄░░█░░█░█░█▀▀░█░█░█░█
-░▀▀▀░▀▀▀░▀░▀░░▀░░▀▀▀░▀░▀░░▀░░▀░▀░▀▀▀░▀░▀░▀▀▀
-
-Right-click menu
-*/
-
-menupopup,
-popup,
-popup > menu > menupopup,
-menupopup > menu > menupopup {
- border: 0 !important;
- border-radius: 4px !important;
- padding: 2px 0 2px 0 !important;
-}
-
-menupopup:-moz-lwtheme-darktext,
-menupopup:-moz-lwtheme-brighttext,
-popup:-moz-lwtheme-darktext,
-popup:-moz-lwtheme-brighttext,
-popup > menu > menupopup:-moz-lwtheme-darktext,
-popup > menu > menupopup:-moz-lwtheme-brighttext,
-menupopup > menu > menupopup:-moz-lwtheme-darktext,
-menupopup > menu > menupopup:-moz-lwtheme-brighttext {
- -moz-appearance: none !important;
- background: var(--bf-menupopup-bg) !important;
- color: var(--bf-menupopup-color) !important;
-}
-
-menupopup menuseparator {
-/* -moz-appearance: none !important; */
- margin: 2px 0 2px 0 !important;
- padding: 0 !important;
- border-top: none !important;
- border-color: transparent !important;
-}
-
-menupopup menuseparator:-moz-lwtheme-darktext,
-menupopup menuseparator:-moz-lwtheme-brighttext {
- -moz-appearance: none !important;
- background: #525A6D !important;
-}
-
-/*
-░█▀▀░█░█░█▀▀░▀█▀░█▀█░█▄█░▀█▀░▀▀█░█▀█░▀█▀░▀█▀░█▀█░█▀█░█░█░▀█▀░█▀█░█▀▄░█▀█░█░█
-░█░░░█░█░▀▀█░░█░░█░█░█░█░░█░░▄▀░░█▀█░░█░░░█░░█░█░█░█░█▄█░░█░░█░█░█░█░█░█░█▄█
-░▀▀▀░▀▀▀░▀▀▀░░▀░░▀▀▀░▀░▀░▀▀▀░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░▀░▀░▀░▀░▀▀▀░▀░▀░▀▀░░▀▀▀░▀░▀
-
-The customization window
-*/
-
-#customization-container {
-}
-
-#customization-container:-moz-lwtheme-darktext,
-#customization-container:-moz-lwtheme-brighttext {
- background: var(--bf-bg) !important;
-}
-
-.customizationmode-button {
- padding: 5px !important;
- border-radius: 6px !important;
-}
-
-.customizationmode-button:hover {
- padding: 5px !important;
- border-radius: 6px !important;
-}
-
-.customizationmode-button label {
-}
-
-/*
-░█░█░▀█▀░█▀█░█▀▄░█▀█░█░█░█▀▄░█░█░▀█▀░▀█▀░█▀█░█▀█░█▀▀
-░█▄█░░█░░█░█░█░█░█░█░█▄█░█▀▄░█░█░░█░░░█░░█░█░█░█░▀▀█
-░▀░▀░▀▀▀░▀░▀░▀▀░░▀▀▀░▀░▀░▀▀░░▀▀▀░░▀░░░▀░░▀▀▀░▀░▀░▀▀▀
-
-The control buttons. Contains, close, minimize, and maximize buttons
-*/
-
-#autohide-context {
- display: none !important;
-}
-
-#window-controls[hidden="true"] {
- display: none !important;
-}
-
-#window-controls[hidden="false"] {
- display: inline-flex !important;
-}
-
-/* Hide titlebar-buttonbox if there's single tab */
-/*
-:root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-buttonbox-container {
- display: none !important;
-}
-*/
+@import url('parts/main-window.css');
+@import url('parts/toolbar.css');
+@import url('parts/tabbar.css');
+@import url('parts/urlbar.css');
+@import url('parts/sidebar.css');
+@import url('parts/arrow-panel.css');
+@import url('parts/findbar.css');
+@import url('parts/context-menu.css');
+@import url('parts/customization-window.css');
+@import url('parts/window-controls.css');
diff --git a/userContent.css b/userContent.css
deleted file mode 100644
index 2639c8c..0000000
--- a/userContent.css
+++ /dev/null
@@ -1,24 +0,0 @@
-@import url('userChrome.css');
-
-/* Removes the white loading page */
-/* url(about:newtab), url(about:home) */
-@-moz-document url(about:blank) {
- html:not(#ublock0-epicker),
- html:not(#ublock0-epicker)
- body,
- #newtab-customize-overlay {
- background: var(--bf-blank-page-bg) !important;
- }
-}
-
-/* Hide scrollbar */
-:root{
- scrollbar-width: none !important;
-}
-
-/* Hide incognito scrollbar */
-@-moz-document url(about:privatebrowsing) {
- :root{
- scrollbar-width: none !important;
- }
-}