diff --git a/README.md b/README.md index d86def3..3f1bc6f 100644 --- a/README.md +++ b/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). -2. Select `Preferences`, then `Preferences` again. -3. Go to `Advanced`, find the `Config Editor` button then press it. -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!** -6. Go to your Firefox profile located in `$HOME/.mozilla/firefox/XXXXXXX.default-XXXXXX/`. -7. Create a folder and name it **`chrome`**, then assuming that you already clone this repo, just copy the theme to `chrome` folder. -8. Finally, you can now change whatever colorscheme you want. +1. Open `about:config` page. +2. A dialog will warn you, but ignore it, ~~just do it~~ press the `I accept the risk!` button. +3. Search for these: + + + **`toolkit.legacyUserProfileCustomizations.stylesheets`** + + **`layers.acceleration.force-enabled`** + + **`gfx.webrender.all`** + + **`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 send help +- [ ] Hide `TabsToolbar` if tab bar is hidden - [ ] Fix inconsistencies - [ ] Better CSS diff --git a/install.sh b/install.sh index af344b7..70b6af9 100755 --- a/install.sh +++ b/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("layers.acceleration.force-enabled", true); - user_pref("gfx.webrender.all", true); - user_pref("gfx.webrender.enabled", true); - user_pref("svg.context-properties.content.enabled", true); +user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true); +user_pref("layers.acceleration.force-enabled", true); +user_pref("gfx.webrender.all", true); +user_pref("gfx.webrender.enabled", true); +user_pref("svg.context-properties.content.enabled", true); +user_pref("layout.css.backdrop-filter.enabled", true); EOL if [[ $? -eq 0 ]]; then diff --git a/scrot/dark.webp b/scrot/dark.webp index 6981da8..fc3d5a3 100644 Binary files a/scrot/dark.webp and b/scrot/dark.webp differ diff --git a/scrot/default.webp b/scrot/default.webp index aba5063..911604e 100644 Binary files a/scrot/default.webp and b/scrot/default.webp differ diff --git a/scrot/light.webp b/scrot/light.webp index 9913102..f496430 100644 Binary files a/scrot/light.webp and b/scrot/light.webp differ diff --git a/userChrome.css b/userChrome.css index 5d80816..313c385 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1,24 +1,25 @@ /* Dark Mode */ :root:-moz-lwtheme-brighttext { --bf-bg: #00000066; - --bf-color: #f2f2f2; - --bf-hover-bg: #fefefe20; - --bf-focused-color: #fefefe; + --bf-color: #F2F2F2; + --bf-hover-bg: #FEFEFE20; + --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-results-url-color: var(--bf-color);3 + --bf-urlbar-active-bg: var(--bf-bg); + --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-focused-color: #0a0a0a; + --bf-hover-bg: #1A1A1A20; + --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); @@ -63,54 +65,64 @@ /* Global/Default Variable */ /* Set variables regardless of color */ :root { - --bf-bg: #252525; - --bf-color: #f2f2f2; + --bf-bg: #252525; + --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-tab-font-weight: 500; - - --bf-navbar-padding: 4px; + --bf-navbar-padding: 6px; --bf-switch-tab-color: #6498EF; --bf-bookmark-color: #53E2AE; - --bf-tab-height: 32px; - --bf-tab-border-radius: 6px; + --bf-tab-font-size: 11pt; + --bf-tab-font-weight: 400; + --bf-tab-height: 36px; + --bf-tab-border-radius: 8px; --bf-tab-soundplaying-bg: #985EFFCC; - + --default-arrowpanel-color: #fefefa !important; --panel-disabled-color: #f9f9fa80; --toolbar-bgcolor: transparent !important; --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,36 +188,50 @@ 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; } .urlbar-icon:not([disabled]):hover, .urlbar-icon-wrapper:not([disabled]):hover { - background: var(--bf-hover-bg) !important; + background: var(--bf-hover-bg) !important; } .urlbar-icon[open], .urlbar-icon-wrapper[open], .urlbar-icon:not([disabled]):hover:active, .urlbar-icon-wrapper:hover:active { - background: var(--bf-hover-bg) !important; + 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 { - background: var(--bf-hover-bg) !important; + background: var(--bf-hover-bg) !important; } #urlbar[breakout-extend="true"]:not([open="true"]) > #urlbar-background { @@ -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; } @@ -279,7 +309,7 @@ toolbarbutton { /* Bookmark button - Star button */ #star-button { - /* URL bar bookmark button */ + /* URL bar bookmark button */ display: none !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: 3 !important; + -moz-box-ordinal-group: 1 !important; + + /* Uncomment the line below to move tabbar below navbar */ + /* -moz-box-ordinal-group: 3 !important; */ } #titlebar::after { @@ -358,7 +385,7 @@ The tabs container } /* Transparent tabs */ -.toolbar-items { +.toolbar-items { background-color: transparent !important; -moz-appearance: -moz-mac-vibrancy-dark !important; } @@ -372,13 +399,17 @@ The tabs container margin-right: 20px !important; } -/* Hide tab bar if there's only one tab */ -#tabbrowser-tabs tab:only-of-type, -#tabbrowser-tabs tab:only-of-type + #tabs-newtab-button { - display: none !important; +/* Hide solo tab */ +#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:only-of-type { + visibility: collapse; } -/* 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,9 +573,9 @@ 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; +} diff --git a/userContent.css b/userContent.css index 5c3bbe3..d7c50a4 100644 --- a/userContent.css +++ b/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,8 +12,9 @@ scrollbar-width: none !important; } +/* Hide incognito scrollbar */ @-moz-document url(about:privatebrowsing) { :root{ scrollbar-width: none !important; } -} \ No newline at end of file +}