Redesign (#15)

* redesign

* add more css var

* some changes i dont remember

* some minor changes

* add sidebar

* URL bar compact mode support

* install.sh: add backdrop filter

* install.sh: fix type

* README

* color changes

* README

* update scrot

README.md

@@ -14,11 +14,17 @@
 | --- |
 | ![screenshot](scrot/light.webp) |
 
+## Requirements
+
++ Latest stable Firefox
++ Compositor with blur shader (optional)
++ Linux machine - untested on macOS and Windows10
+
 ## How to
 
 ### Quick install for the linux lads
 
-1. Run
+1. Run:
   
   ```bash
   $ bash -c "$(curl -fsSL https://raw.githubusercontent.com/manilarome/blurredfox/master/install.sh)"
@@ -34,22 +40,29 @@
 + If you have a current chrome folder in your profile directory, the script will make a backup.
 + If the installation script is not working, a PR is welcome!
 
-### Manual Installation for linux lads
+### Manual Installation
 
-1. Open the Firefox Menu located on the top-right corner with a humburger menu(three horizontal lines).
+1. Open `about:config` page.
-2. Select `Preferences`, then `Preferences` again.
+2. A dialog will warn you, but ignore it, ~~just do it~~ press the `I accept the risk!` button.
-3. Go to `Advanced`, find the `Config Editor` button then press it.
+3. Search for these:
-4. A dialog will warn you, but ignore it, ~~just do it~~ press the `I accept the risk!` button.
+
-5. Search for **`toolkit.legacyUserProfileCustomizations.stylesheets`**, **`layers.acceleration.force-enabled`**, **`gfx.webrender.all`**, and **`svg.context-properties.content.enabled`**. Make sure to **enable them all!**
+	+ **`toolkit.legacyUserProfileCustomizations.stylesheets`**
-6. Go to your Firefox profile located in `$HOME/.mozilla/firefox/XXXXXXX.default-XXXXXX/`.
+	+ **`layers.acceleration.force-enabled`**
-7. Create a folder and name it **`chrome`**, then assuming that you already clone this repo, just copy the theme to `chrome` folder.
+	+ **`gfx.webrender.all`**
-8. Finally, you can now change whatever colorscheme you want.
+	+ **`gfx.webrender.enabled`**
+	+ **`layout.css.backdrop-filter.enabled`**
+	+ **`svg.context-properties.content.enabled`**
+
+	Then make sure to **enable them all!**
+4. Go to your Firefox profile. Linux distributions has it in `$HOME/.mozilla/firefox/XXXXXXX.default-XXXXXX/`.
+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. Finally, you can now change whatever colorscheme you want in the Cusomization Window.
 
 ## Note
 
 ### If you're using Windows or macOS and something's wrong
 
-1. **Sadly, I only have archlinux, so I cannot guarantee that it will work on Windows10 and macOS. A feedback is welcome if it works on your platform. PR is also welcome!**
+1. **I only have Archlinux, so I cannot guarantee that it will work on Windows10 and macOS without a problem. A feedback and PR is absolutely welcome!**
 
 ### If there's no blur effect
 
@@ -71,6 +84,6 @@
 
 PR's are welcome!
 
-- [ ] Move window controls to navbar <sup>send help</sup>
+- [ ] Hide `TabsToolbar` if tab bar is hidden
 - [ ] Fix inconsistencies
 - [ ] Better CSS

install.sh

@@ -18,11 +18,12 @@ download_bf() {
 		cp -r "${FF_THEME}"* "${CHROME_DIRECTORY}"
 
 		cat > "${CHROME_DIRECTORY}/../user.js" <<'EOL'
-		user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true); 
+user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true); 
-		user_pref("layers.acceleration.force-enabled", true);
+user_pref("layers.acceleration.force-enabled", true);
-		user_pref("gfx.webrender.all", true);
+user_pref("gfx.webrender.all", true);
-		user_pref("gfx.webrender.enabled", true);
+user_pref("gfx.webrender.enabled", true);
-		user_pref("svg.context-properties.content.enabled", true);
+user_pref("svg.context-properties.content.enabled", true);
+user_pref("layout.css.backdrop-filter.enabled", true);
 EOL
 		if [[ $? -eq 0 ]];
 		then

userChrome.css

@@ -1,24 +1,25 @@
 /* Dark Mode */
 :root:-moz-lwtheme-brighttext {
 	--bf-bg: #00000066;
-	--bf-color: #f2f2f2;
+	--bf-color: #F2F2F2;
-	--bf-hover-bg: #fefefe20;
+	--bf-hover-bg: #FEFEFE20;
-	--bf-focused-color: #fefefe;
+	--bf-focused-color: #FEFEFE;
 	
-	--bf-icon-color: #f2f2f2;
+	--bf-icon-color: #F2F2F2;
 	
+	--bf-navbar-bg: var(--bf-bg);
 	--bf-urlbar-bg: var(--bf-bg);
 	--bf-urlbar-color: var(--bf-color);
 	--bf-urlbar-focused-color: var(--bf-focused-color);
-	--bf-urlbar-active-bg: #000000BB;
+	--bf-urlbar-active-bg: var(--bf-bg);
-	--bf-urlbar-results-url-color: var(--bf-color);3
+	--bf-urlbar-results-url-color: var(--bf-color);
 	
+	--bf-tab-background: #000000AA;
 	--bf-tab-color: var(--bf-color);
 	--bf-tab-selected-bg: var(--bf-bg);
 	
 	--bf-sidebar-bg: var(--bf-bg);
 	--bf-sidebar-color: var(--bf-color);
-	
 	--bf-splitter-bg: var(--bf-bg);
 	
 	--bf-menupopup-bg: var(--bf-bg);
@@ -31,25 +32,26 @@
 
 /* Light Mode */
 :root:-moz-lwtheme-darktext {
-	--bf-bg: #f2f2f266;
+	--bf-bg: #F2F2F662;
 	--bf-color: #252525;
-	--bf-hover-bg: #1a1a1a20;
+	--bf-hover-bg: #1A1A1A20;
-	--bf-focused-color: #0a0a0a;
+	--bf-focused-color: #0A0A0A;
 	
-	--bf-icon-color: #0a0a0a;
+	--bf-icon-color: #0A0A0A;
 	
+	--bf-navbar-bg: var(--bf-bg);
 	--bf-urlbar-bg: var(--bf-bg);
 	--bf-urlbar-color: var(--bf-color);
 	--bf-urlbar-focused-color: var(--bf-focused-color);
-	--bf-urlbar-active-bg: #f2f2f2BB;
+	--bf-urlbar-active-bg: var(--bf-bg);
 	--bf-urlbar-results-url-color: var(--bf-color);
 	
+	--bf-tab-background: #F2F2F2AA;
 	--bf-tab-color: var(--bf-color);
 	--bf-tab-selected-bg: var(--bf-bg);
 	
 	--bf-sidebar-bg: var(--bf-bg);
 	--bf-sidebar-color: var(--bf-color);
-	
 	--bf-splitter-bg: var(--bf-bg);
 	
 	--bf-menupopup-bg: var(--bf-bg);
@@ -64,44 +66,55 @@
 /* Set variables regardless of color */
 :root {
 	--bf-bg: #252525;
-	--bf-color: #f2f2f2;
+	--bf-color: #F2F2F2;
 	--bf-hover-bg: #353535;
-	--bf-focused-color: #fefefe;
+	--bf-focused-color: #FEFEFE;
 	--bf-icon-color: var(--bf-color);
 	
-	--bf-urlbar-bg: #1a1a1a;
+	--bf-navbar-bg: #252525CC;
+	--bf-urlbar-bg: #252525;
 	--bf-urlbar-color: var(--bf-color);
 	--bf-urlbar-focused-color: var(--bf-focused-color);
 	--bf-urlbar-active-bg: var(--bf-urlbar-bg);
 	--bf-urlbar-results-url-color: var(--bf-color);
 	
+	--bf-tab-background: var(--bf-bg);
 	--bf-tab-color: var(--bf-color);
-	--bf-tab-selected-bg: #353535;
+	--bf-tab-selected-bg: #1A1A1A;
 	
 	--bf-sidebar-bg: var(--bf-bg);
 	--bf-sidebar-color: var(--bf-color);
-	
 	--bf-splitter-bg: var(--bf-bg);
+	--bf-sidebar-searchbar-bg: #1A1A1A;
 	
 	--bf-menupopup-bg: var(--bf-bg);
 	--bf-menupopup-color: var(--bf-color);
 
+	--autocomplete-popup-background: var(--bf-bg) !important;
+	--default-arrowpanel-background: var(--bf-bg) !important;
+	--lwt-toolbarbutton-icon-fill: var(--bf-icon-color) !important;
 	
+	/* All the CSS variables below are global */
+	/* These applies to all color schemes */
+	--bf-sidebar-searchbar-radius: 6px;
+
+	--bf-backdrop-blur: 6px;
 	--bf-accent-bg: #4C5FF9CC;
+	
+	--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-tab-font-size: 11pt;
+	--bf-navbar-padding: 6px;
-	--bf-tab-font-weight: 500;
-	
-	--bf-navbar-padding: 4px;
 	--bf-switch-tab-color: #6498EF;
 	--bf-bookmark-color: #53E2AE;
 	
-	--bf-tab-height: 32px;
+	--bf-tab-font-size: 11pt;
-	--bf-tab-border-radius: 6px;
+	--bf-tab-font-weight: 400;
+	--bf-tab-height: 36px;
+	--bf-tab-border-radius: 8px;
 	--bf-tab-soundplaying-bg: #985EFFCC;
 
 	--default-arrowpanel-color: #fefefa !important;
@@ -110,7 +123,6 @@
 	--urlbar-separator-color: transparent !important;
 }
 
-
 /*
 ░▀█▀░█▀▄░█▀█░█▀█░█▀▀░█▀█░█▀█░█▀▄░█▀▀░█▀█░█▀▀░█░█
 ░░█░░█▀▄░█▀█░█░█░▀▀█░█▀▀░█▀█░█▀▄░█▀▀░█░█░█░░░░█░
@@ -119,8 +131,8 @@
 Transparent Window
 */
 #main-window {
-	font-kerning: normal;
 	background: transparent !important;
+	font-kerning: normal;
 	border: none !important;
 	-moz-appearance: -moz-mac-vibrancy-dark !important;
 }
@@ -130,7 +142,7 @@ Transparent Window
 ░█▀▀░█░█░█░█░░█░
 ░▀░░░▀▀▀░▀░▀░░▀░
 
-I'm not sure if this does anything
+I'm not sure if this does something
 */
 
 * {
@@ -150,7 +162,7 @@ Contains navbar, urlbar, and etc.
 */
 
 .browser-toolbar {
-	background: var(--bf-bg) !important;
+	background: var(--bf-tab-background) !important;
 }
 
 toolbar {
@@ -158,8 +170,12 @@ toolbar {
 }
 
 toolbar#nav-bar {
-	background: var(--bf-bg) !important;
+	background: var(--bf-navbar-bg) !important;
 	padding: var(--bf-navbar-padding) !important;
+	
+	/* Remove horizontal line on navbar */
+	box-shadow: none !important;
+	border-top: none !important;
 }
 
 toolbarbutton {
@@ -172,17 +188,31 @@ toolbarbutton {
 	--toolbarbutton-active-background: var(--bf-hover-bg) !important;
 }
 
+/* URL bar max-width and centered hack */
 #urlbar {
 	max-width: 70% !important;
 	margin: 0 15% !important;
 }
 
+/* URL bar and toolbar height if not compact mode */
+:root:not([uidensity="compact"]) #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 {
 	color: var(--bf-urlbar-focused-color) !important;
 }
 
 #urlbar-background {
 	background: var(--bf-urlbar-bg) !important;
+	border-radius: var(--bf-urlbar-radius) !important;
 	border: none !important;
 }
 
@@ -213,6 +243,7 @@ toolbarbutton {
 
 #urlbar[open=true] > #urlbar-background {
 	background: var(--bf-urlbar-active-bg) !important;
+	backdrop-filter: blur(var(--bf-backdrop-blur)) !important;
 }
 
 .urlbar-icon {
@@ -237,9 +268,8 @@ toolbarbutton {
 	color: var(--bf-switch-tab-color) !important;
 }
 
-
 #urlbar-results {
-	font-weight: var(--bf-urlbar-results-font-weight);
+	-weight: var(--bf-urlbar-results-font-weight);
 	font-size: var(--bf-urlbar-results-font-size) !important;
 	color: var(--bf-urlbar-results-color) !important;
 }
@@ -292,7 +322,8 @@ toolbarbutton {
 	background: var(--bf-hover-bg) !important;
 }
 
-#navigator-toolbox, toolbaritem {
+#navigator-toolbox,
+toolbaritem {
 	border: none !important;
 }
 
@@ -300,12 +331,6 @@ toolbarbutton {
 	border-bottom: 0 !important;
 }
 
-/* Remove horizontal line on navbar */
-#nav-bar {
-	box-shadow: none !important;
-	border-top: none !important;
-}
-
 .toolbarbutton-text {
 	color: var(--bf-icon-color)  !important;
 }
@@ -349,8 +374,10 @@ The tabs container
 
 /* Move tab bar beneath the url bar */
 #titlebar {
-/* 	-moz-box-ordinal-group: 1 !important; */
+	-moz-box-ordinal-group: 1 !important;
-	-moz-box-ordinal-group: 3 !important;
+	
+	/* 	Uncomment the line below to move tabbar below navbar */
+	/* 	-moz-box-ordinal-group: 3 !important; */
 }
 
 #titlebar::after {
@@ -372,13 +399,17 @@ The tabs container
 	margin-right: 20px !important;
 }
 
-/* 	Hide tab bar if there's only one tab */
+/* Hide solo tab */
-#tabbrowser-tabs tab:only-of-type,
+#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:only-of-type {
-#tabbrowser-tabs tab:only-of-type + #tabs-newtab-button {
+  visibility: collapse;
-	display: none !important;
 }
 
-/* Stretch Tabs */
+/* 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;
 }
@@ -398,11 +429,27 @@ The tabs container
 	opacity: 0.5 !important;
 }
 
-/* Remove the "lines" in tab sides */
+/* 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;
@@ -526,7 +573,7 @@ hbox.tab-content[pinned=true] .tab-text {
 #tabbrowser-tabs {
   direction: ltr;
 }
- */
+*/
 
 /*
 ░█▀█░█▀▄░█▀▄░█▀█░█░█░█▀█░█▀█░█▀█░█▀▀░█░░
@@ -583,7 +630,6 @@ The findbar
 	background-color: var(--bf-bg) !important;
 }
 
-
 /* 
 ░█▀▀░█▀█░█▀█░▀█▀░█▀▀░█░█░▀█▀░█▄█░█▀▀░█▀█░█░█
 ░█░░░█░█░█░█░░█░░█▀▀░▄▀▄░░█░░█░█░█▀▀░█░█░█░█
@@ -670,3 +716,32 @@ The control buttons. Contains, close, minimize, and maximize buttons
 :root[tabsintitlebar][sizemode="maximized"] #nav-bar {
 	padding-left: 3px !important;
 }
+
+/*
+░█▀▀░▀█▀░█▀▄░█▀▀░█▀▄░█▀█░█▀▄
+░▀▀█░░█░░█░█░█▀▀░█▀▄░█▀█░█▀▄
+░▀▀▀░▀▀▀░▀▀░░▀▀▀░▀▀░░▀░▀░▀░▀
+
+Sidebar
+*/
+
+#sidebar-box {
+	--sidebar-background-color: var(--bf-sidebar-bg) !important;
+	--sidebar-text-color: var(--bf-sidebar-color) !important;
+}
+
+#sidebar,
+.sidebar-panel {
+	background: transparent !important;
+	color: var(--bf-sidebar-color) !important;
+}
+
+/* Sidebar searchbar */
+#sidebar-search-container #search-box{
+	-moz-appearance:none !important;
+	background-color: var(--bf-sidebar-searchbar-bg) !important;
+	border: none !important;
+	color: var(--bf-color) !important;
+	padding: 6px !important;
+	border-radius: var(--bf-sidebar-searchbar-radius) !important;
+}

userContent.css

@@ -1,6 +1,6 @@
-@import url("userChrome.css");
+@import url('userChrome.css');
 
-/* Removes white loading page */
+/* Removes the white loading page */
 @-moz-document url(about:blank), url(about:newtab), url(about:home) {
 	html:not(#ublock0-epicker), html:not(#ublock0-epicker) body, #newtab-customize-overlay {
 		background: var(--bf-bg) !important;
@@ -12,6 +12,7 @@
 	scrollbar-width: none !important;
 }
 
+/* Hide incognito scrollbar */
 @-moz-document url(about:privatebrowsing) {
 	:root{
 		scrollbar-width: none !important;