commit bbfbabe631022584f42297f819118796de906695 Author: Gerome Matilla Date: Wed May 20 13:34:10 2020 +0800 first commit diff --git a/.directory b/.directory new file mode 100644 index 0000000..2d5072c --- /dev/null +++ b/.directory @@ -0,0 +1,4 @@ +[Dolphin] +Timestamp=2020,5,20,12,26,12 +Version=4 +ViewMode=2 diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..42f6576 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2020 Gerome Matilla + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..6ccfafc --- /dev/null +++ b/README.md @@ -0,0 +1,53 @@ +# Blurred fox + +### A ~~blurred~~ transparent safari-like firefox CSS theme + +| blurredfox | +| --- | +| ![screenshot](screenshot.png) | + + +## How to + +### Quick install for the linux lads + +1. Run + + ```bash + $ sh -c "$(curl -fsSL https://raw.githubusercontent.com/manilarome/blurredfox/master/install.sh)" + ``` + +2. After the confirmation message that the theme is successfully installed, open firefox. You'll notice that it is still not transparent. To fix this, **`Open Menu > Customize > Change the theme to Dark`**. + +#### NOTE: + +It is advisible to check the script first before running it. + +### 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-release/`. +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, change the Firefox theme from default to dark. **This is important!** + +## Note + +### If there's no blur effect + +1. **The theme does not provide the blur effect!** Make sure you have a compositor with blur support running! KDE Plasma, macOS, and Windows 10 have this by default, but you need to enable it! If you're using linux, use tryone144's [feature/dual_kawase](https://github.com/tryone144/picom/tree/feature/dual_kawase) branch of picom. It includes the dual kawase shader. + +### If you're using Plasma and there's no blur effect, + +1. Enable the blur in your compositor. Go to `System Settings > Desktop Effects > Enable Blur`. Note that this will not enable the blur effect on all applications. + +2. Enable the blur effect on all applications by installing a KWin script called [Force Blur](https://store.kde.org/p/1294604/). + +3. Go to `System Settings > KWin Scripts > Enable Force Blur`. + +### If you're using Windows or Mac and something's wrong + +1. Sadly, I only have archlinux, so a feedback is welcome if it works on your platform. diff --git a/add.svg b/add.svg new file mode 100644 index 0000000..311eb1c --- /dev/null +++ b/add.svg @@ -0,0 +1,56 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/install.sh b/install.sh new file mode 100755 index 0000000..8130ab1 --- /dev/null +++ b/install.sh @@ -0,0 +1,92 @@ +#!/usr/bin/env bash + +message() { printf "%s\n" "$*" >&2; } + +download_bf() { + + message "[>>] Downloading theme..." + + curl -LJ0 https://github.com/manilarome/blurredfox/archive/master.tar.gz | tar -xz -C /tmp/ + + if [[ $? -eq 0 ]]; + then + message "[>>] Copying..." + + FF_THEME="/tmp/blurredfox-master/" + 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); +EOL + if [[ $? -eq 0 ]]; + then + rm -rf "/tmp/blurredfox-master" + else + message " [!!] There was a problem while copying the files. Terminating..." + return 1 + fi + else + message " [!!] Problem detected while downloading the theme. Terminating..." + return 1 + fi + cat <<-'EOF' +░█▀▄░█░░░█░█░█▀▄░█▀▄░█▀▀░█▀▄ +░█▀▄░█░░░█░█░█▀▄░█▀▄░█▀▀░█░█ +░▀▀░░▀▀▀░▀▀▀░▀░▀░▀░▀░▀▀▀░▀▀░ +┏━┛┏━┃┃ ┃ +┏━┛┃ ┃ ┛ +┛ ━━┛┛ ┛ +EOF + message "blurredfox successfully installed! To enable the transparency change the theme to Dark in preferences! Enjoy!" +} + + +FF_USER_DIRECTORY="$(find "${HOME}/.mozilla/firefox/" -maxdepth 1 -type d -regextype egrep -regex '.*[a-zA-Z0-9]+.default-release')" + +if [[ -n $FF_USER_DIRECTORY ]]; +then + message "[>>] Firefox user profile directory located..." + + CHROME_DIRECTORY="$(find "$FF_USER_DIRECTORY" -maxdepth 1 -type d -name 'chrome')" + + if [[ -n $CHROME_DIRECTORY ]]; + then + + # Check if the chrome folder contains files + shopt -s nullglob dotglob + content="${CHROME_DIRECTORY}/" + + # If there's a current theme, make a backup + if [ ${#content[@]} -gt 0 ]; + then + message "[>>] Current chrome folder is not empty. Creating a backup in the same directory..." + mv "${CHROME_DIRECTORY}" "${CHROME_DIRECTORY}.backup" + mkdir "${CHROME_DIRECTORY}" + fi + + + download_bf + else + + message "[>>] Chrome directory does not exist! Creating one..." + mkdir "${FF_USER_DIRECTORY}/chrome" + + if [[ $? -eq 0 ]]; + then + CHROME_DIRECTORY="${FF_USER_DIRECTORY}/chrome" + + download_bf + else + message "[!!] There was a problem creating the directory. Terminating..." + exit 1; + fi + fi + +else + message "[!!] No firefox user profile directory found. Make sure to run firefox atleast once! Terminating..." + exit 1; +fi diff --git a/left-arrow.svg b/left-arrow.svg new file mode 100644 index 0000000..a0e434a --- /dev/null +++ b/left-arrow.svg @@ -0,0 +1,56 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/right-arrow.svg b/right-arrow.svg new file mode 100644 index 0000000..d38f7b4 --- /dev/null +++ b/right-arrow.svg @@ -0,0 +1,56 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/screenshot.png b/screenshot.png new file mode 100644 index 0000000..8e7b58b Binary files /dev/null and b/screenshot.png differ diff --git a/userChrome.css b/userChrome.css new file mode 100644 index 0000000..ec3806b --- /dev/null +++ b/userChrome.css @@ -0,0 +1,452 @@ +:root { + --bf-bg: #00000039; + --bf-bg-hover: #fefefe20; + --bf-color: #f2f2f2; + --bf-focused-color: #fefefe; + + --bf-icon-color: #f2f2f2; + --bf-switch-tab-color: orange; + --bf-bookmark-color: green; + + --bf-tab-font-size: 11pt; + --bf-tab-font-weight: 500; + --bf-tab-color: var(--bf-color); + --bf-tab-selected-bg: #00000060; + + --bf-tab-height: 32px; + --bf-tab-border-radius: 6px; + + --bf-tab-soundplaying-bg: var(--bf-bg-hover); + + --bf-navbar-padding: 4px; + + --bf-urlbar-color: var(--bf-color); + --bf-urlbar-focused-color: var(--bf-focused-color); + --bf-urlbar-font-size: 12pt; + --bf-urlbar-font-weight: 500; + + --bf-urlbar-results-font-size: 12pt; + --bf-urlbar-results-font-weight: 350; + --bf-urlbar-results-url-color: var(--bf-color); + + --bf-sidebar-bg: transparent; + --bf-sidebar-color: var(--bf-color); + + --bf-menupopup-bg: #00000090; + --bf-menupopup-color: var(--bf-color); + + --autocomplete-popup-background: var(--bf-bg) !important; + --default-arrowpanel-background: var(--bf-bg) !important; + --default-arrowpanel-color: #fefefa !important; + --lwt-toolbarbutton-icon-fill: var(--bf-icon-color) !important; + --panel-disabled-color: #f9f9fa80; + --toolbar-bgcolor: transparent !important; + --urlbar-separator-color: transparent !important; +} + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* +░▀█▀░█▀▄░█▀█░█▀█░█▀▀░█▀█░█▀█░█▀▄░█▀▀░█▀█░█▀▀░█░█ +░░█░░█▀▄░█▀█░█░█░▀▀█░█▀▀░█▀█░█▀▄░█▀▀░█░█░█░░░░█░ +░░▀░░▀░▀░▀░▀░▀░▀░▀▀▀░▀░░░▀░▀░▀░▀░▀▀▀░▀░▀░▀▀▀░░▀░ + +Transparent Window +*/ + +#main-window { + background: var(--bf-bg) !important; + border: none !important; +} + +/* +░▀█▀░█▀█░█▀█░█░░░█▀▄░█▀█░█▀▄ +░░█░░█░█░█░█░█░░░█▀▄░█▀█░█▀▄ +░░▀░░▀▀▀░▀▀▀░▀▀▀░▀▀░░▀░▀░▀░▀ + +Contains navbar, urlbar, and etc. +*/ + +toolbar { + background-image: none !important; +} + +toolbar#nav-bar { + background: var(--bf-bg) !important; + padding: var(--bf-navbar-padding) !important; +} + +.toolbar-items { + background-color: var(--bf-bg) !important; +} + +toolbarbutton { + box-shadow: none !important; + margin-left: 2px !important; +} + +#urlbar { + max-width: 70% !important; + margin: 0 15% !important; +} + +#urlbar-input:focus { + color: var(--bf-urlbar-focused-color) !important; +} + +#urlbar-background { + background-color: var(--bf-bg) !important; + border: none !important; +} + +.megabar[breakout-extend="true"]:not([open="true"]) > #urlbar-background { + box-shadow: none !important; + background-color: transparent !important; +} + +#navigator-toolbox, toolbaritem { + border: none !important; +} + +.urlbar-icon { + color: var(--bf-icon-color) !important; +} + +.urlbar-icon > image { + fill: var(--bf-icon-color) !important; + color: var(--bf-icon-color) !important; +} + +.urlbarView-favicon, .urlbarView-type-icon { + display: none !important; +} + +image #star-button { + display: none; +} + +.toolbarbutton-text { + color: var(--bf-icon-color) !important; +} + +.urlbarView-row[type="bookmark"] > span{ + color: var(--bf-bookmark-color) !important; +} + +.urlbarView-row[type="switchtab"] > span{ + color: var(--bf-switch-tab-color) !important; +} + +#urlbar-results { + font-weight: var(--bf-urlbar-results-font-weight); + font-size: var(--bf-urlbar-results-font-size) !important; + color: var(--bf-urlbar-results-color) !important; +} + +.urlbarView-url, .search-panel-one-offs-container { + color: var(--bf-urlbar-results-url-color) !important; + 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; + color: var(--bf-urlbar-color) !important; + font-weight: var(--bf-urlbar-font-weight)!important; + text-align: center !important; +} + +#tracking-protection-icon-container, #identity- +{ + display: none !important; +} + +#back-button > .toolbarbutton-icon { + --backbutton-background: transparent !important; + border: none !important; +} + +#back-button { + list-style-image: url("left-arrow.svg") !important; +} + +#forward-button { + list-style-image: url("right-arrow.svg") !important; +} + + +/* +░▀█▀░█▀█░█▀▄░█▀▄░█▀█░█▀▄ +░░█░░█▀█░█▀▄░█▀▄░█▀█░█▀▄ +░░▀░░▀░▀░▀▀░░▀▀░░▀░▀░▀░▀ + +The tabs container +*/ + +#titlebar { + /* Move tab bar beneath the url bar */ + -moz-box-ordinal-group: 3 !important; +} + +.tabbrowser-tab[fadein]:not([pinned]) { + /* Stretch Tabs */ + max-width: none !important; +} + +.tab-background { + border: none !important; + background: transparent !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; +} + +.tabbrowser-tab::after, +.tabbrowser-tab::before { + /* Remove the "lines" in tabs */ + border-left: none !important; +} + +.tabbrowser-arrowscrollbox { + margin-inline-start: 4px !important; + margin-inline-end: 0px !important; +} + +.tab-text { + font-weight: var(--bf-tab-font-weight); + font-size: var(--bf-tab-font-size) !important; + color: var(--bf-tab-color); +} + +.tab-label-container:not([textoverflow]) { + /* Center tab text */ + width: 50% !important; + max-width: 50% !important; + min-width: 50% !important; + display: flex; + overflow: hidden; + justify-content: center; +} + +.tab-close-button { + /* Hide close tab button */ + display: none !important; +} + +hbox.tab-content .tab-icon-image { + /* Hide tab icon */ + display: initial !important; +} + +hbox.tab-content[pinned=true] .tab-icon-image { + /* Show the icon of pinned tabs */ + display: initial !important; +} + +hbox.tab-content[pinned=true] .tab-text { + display: none !important; +} + +.tab-line { + /* Hide the tab line */ + display: none !important; +} + +.tabbrowser-tab { + border-radius: var(--bf-tab-border-radius) !important; + border-width: 0; + height: var(--bf-tab-height) !important; + margin-top: 0 !important; + margin-bottom: 4px !important; + margin-inline-start: 2px !important; + margin-inline-end: 2px !important; +} + +.tabbrowser-tab[soundplaying="true"] { + /* Audio playing background */ + background-color: var(--bf-tab-soundplaying-bg) !important; +} + +.tab-icon-sound { + /* Hide icon of audio */ + display: none !important; +} + +#tabs-newtab-button { + padding-bottom: 4px !important; +} + +#tabs-newtab-button { + list-style-image: url("add.svg") !important; + opacity: 1; +} + +tab.tabbrowser-tab { + overflow: hidden; +} + +tab.tabbrowser-tab:hover { + background: var(--bf-bg-hover) !important; + box-shadow: 0 1px 4px rgba(0,0,0,.05); +} + +#tabbrowser-tabs { + --tab-loading-fill: var(--bf-color) !important; +} + + +/* +░█▀▀░▀█▀░█▀█░█▀▄░█▀▄░█▀█░█▀▄ +░█▀▀░░█░░█░█░█░█░█▀▄░█▀█░█▀▄ +░▀░░░▀▀▀░▀░▀░▀▀░░▀▀░░▀░▀░▀░▀ + +The findbar +*/ + +#browser #appcontent #tabbrowser-tabbox findbar, +#browser #appcontent #tabbrowser-tabbox tabpanels { + -moz-appearance: none !important; + background-color: transparent !important; + background-image: none !important; +} + +#browser #appcontent #tabbrowser-tabbox .findbar-find-fast { + background-color: var(--bf-bg) !important; +} + +/* +░█▀▀░▀█▀░█▀▄░█▀▀░█▀▄░█▀█░█▀▄ +░▀▀█░░█░░█░█░█▀▀░█▀▄░█▀█░█▀▄ +░▀▀▀░▀▀▀░▀▀░░▀▀▀░▀▀░░▀░▀░▀░▀ + +Contains history, bookmarks, and etc. +*/ + +#history-panel, #sidebar-search-container { + background: var(--bf-bg) !important; +} + +#search-box { + -moz-appearance: none !important; + background: var(--bf-bg) !important; + border-radius: 6px !important; +} + +#sidebar-search-container { + background-color: var(--bf-sidebar-bg) !important; +} + +.close-icon, .urlbar-icon { + fill: var(--bf-icon-color) !important; +} + +image #sidebar-icon { + display: none; +} + +.sidebar-placesTree { + color: var(--bf-sidebar-color) !important; +} + +#sidebar-switcher-target { + color: var(--bf-sidebar-color) !important; +} + +#sidebar-header { + background: var(--bf-bg) !important; +} + +#sidebar-box { + --sidebar-background-color: var(--bf-sidebar-bg) !important; +} + +splitter #sidebar-splitter { + opacity: 1 !important; +} + +splitter #sidebar-splitter { + border: none !important; + background-color: var(--bf-bg) !important; +} + +/* +░█▀█░█▀▄░█▀▄░█▀█░█░█░█▀█░█▀█░█▀█░█▀▀░█░░ +░█▀█░█▀▄░█▀▄░█░█░█▄█░█▀▀░█▀█░█░█░█▀▀░█░░ +░▀░▀░▀░▀░▀░▀░▀▀▀░▀░▀░▀░░░▀░▀░▀░▀░▀▀▀░▀▀▀ + +The dropdown menus +*/ + +.panel-arrowcontent { + padding: 0px !important; + margin: 0px !important; +} + +toolbarseparator { + display: none !important; +} + +box.panel-arrowbox { + display: none; +} + +box.panel-arrowcontent { + border-radius: 8px !important; + border: none !important; +} + +/* +░█▀▀░█▀█░█▀█░▀█▀░█▀▀░█░█░▀█▀░█▄█░█▀▀░█▀█░█░█ +░█░░░█░█░█░█░░█░░█▀▀░▄▀▄░░█░░█░█░█▀▀░█░█░█░█ +░▀▀▀░▀▀▀░▀░▀░░▀░░▀▀▀░▀░▀░░▀░░▀░▀░▀▀▀░▀░▀░▀▀▀ + +Right-click menu +*/ + + +menupopup { + -moz-appearance: none !important; + background: var(--bf-menupopup-bg) !important; + border: none !important; + border-radius: 4px !important; + padding: 4px 0 !important; +} + +menupopup label { + color: var(--bf-menupopup-color) !important; +} + +menupopup menupopup { + margin: -5px 0 0 -4px; +} + +menubar > menu > menupopup { + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; +} + +menuitem[type="checkbox"] image, menuitem[type="radio"] image { + visibility: visible !important; +} + +menuitem[disabled="true"]:hover, menupopup menu[disabled="true"]:hover { + background: transparent !important; +} + +/* +░█░█░▀█▀░█▀█░█▀▄░█▀█░█░█░█▀▄░█░█░▀█▀░▀█▀░█▀█░█▀█░█▀▀ +░█▄█░░█░░█░█░█░█░█░█░█▄█░█▀▄░█░█░░█░░░█░░█░█░█░█░▀▀█ +░▀░▀░▀▀▀░▀░▀░▀▀░░▀▀▀░▀░▀░▀▀░░▀▀▀░░▀░░░▀░░▀▀▀░▀░▀░▀▀▀ + +The control buttons. Contains, close, minimize, and maximize buttons +*/ + +#autohide-context, #window-controls { + display:none!important; +} diff --git a/userContent.css b/userContent.css new file mode 100644 index 0000000..826998d --- /dev/null +++ b/userContent.css @@ -0,0 +1,23 @@ +@import url("userChrome.css"); + +/* Removes 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(--mff-bg) !important; + } + } + + + /* Hide scrollbar */ + + :root{ + scrollbar-width: none !important; + } + + + @-moz-document url(about:privatebrowsing) { + + :root{ + scrollbar-width: none !important; + } + } \ No newline at end of file