From 04790fc2c2f000c34adb0eb9ea04c1e7b533122c Mon Sep 17 00:00:00 2001 From: vinceliuice Date: Mon, 2 Dec 2024 21:54:38 +0800 Subject: [PATCH] Fixed #877 --- README.md | 4 +- libs/lib-install.sh | 9 +- .../firefox/Monterey/colors/dark-nord.css | 172 +++++++++++++++++ src/other/firefox/Monterey/colors/dark.css | 5 +- src/other/firefox/Monterey/colors/darker.css | 5 +- .../Monterey/colors/light-adaptive.css | 4 + .../firefox/Monterey/colors/light-nord.css | 169 +++++++++++++++++ src/other/firefox/Monterey/colors/light.css | 5 +- .../firefox/WhiteSur/colors/dark-adaptive.css | 4 + .../firefox/WhiteSur/colors/dark-nord.css | 176 ++++++++++++++++++ src/other/firefox/WhiteSur/colors/dark.css | 4 + src/other/firefox/WhiteSur/colors/darker.css | 4 + .../WhiteSur/colors/light-adaptive.css | 4 + .../firefox/WhiteSur/colors/light-nord.css | 173 +++++++++++++++++ src/other/firefox/WhiteSur/colors/light.css | 4 + src/other/firefox/WhiteSur/theme-nord.css | 36 ++++ src/other/firefox/common/pages/common.css | 17 +- .../firefox/userChrome-WhiteSur-nord.css | 42 +++++ .../firefox/userContent-WhiteSur-nord.css | 7 + tweaks.sh | 7 +- 20 files changed, 836 insertions(+), 15 deletions(-) create mode 100644 src/other/firefox/Monterey/colors/dark-nord.css create mode 100644 src/other/firefox/Monterey/colors/light-nord.css create mode 100644 src/other/firefox/WhiteSur/colors/dark-nord.css create mode 100644 src/other/firefox/WhiteSur/colors/light-nord.css create mode 100644 src/other/firefox/WhiteSur/theme-nord.css create mode 100644 src/other/firefox/userChrome-WhiteSur-nord.css create mode 100644 src/other/firefox/userContent-WhiteSur-nord.css diff --git a/README.md b/README.md index 254be791..738ed63b 100644 --- a/README.md +++ b/README.md @@ -240,7 +240,9 @@ OPTIONS: 4. darker Darker Firefox theme version Darker Firefox theme version - 5. adaptive Adaptive color version You need install adaptive-tab-bar-colour plugin first https://addons.mozilla.org/firefox/addon/adaptive-tab-bar-colour/ + 5. nord Nord Firefox colorscheme version Nord Firefox colorscheme version + + 6. adaptive Adaptive color version You need install adaptive-tab-bar-colour plugin first https://addons.mozilla.org/firefox/addon/adaptive-tab-bar-colour/ -e, --edit-firefox [(monterey|flat)|alt|(darker|adaptive)] Edit 'WhiteSur' theme for Firefox settings and also connect the theme to the current Firefox profiles. diff --git a/libs/lib-install.sh b/libs/lib-install.sh index e8ccfedc..04f6da8e 100755 --- a/libs/lib-install.sh +++ b/libs/lib-install.sh @@ -670,7 +670,10 @@ install_firefox_theme() { local TARGET_DIR="${FIREFOX_THEME_DIR}" fi + local theme_type="${darker}${adaptive}${colorscheme}" + remove_firefox_theme + udo mkdir -p "${TARGET_DIR}" udo cp -rf "${FIREFOX_SRC_DIR}"/customChrome.css "${TARGET_DIR}" @@ -682,12 +685,12 @@ install_firefox_theme() { cp -rf "${FIREFOX_SRC_DIR}"/common/*.css "${TARGET_DIR}/${theme_name}" cp -rf "${FIREFOX_SRC_DIR}"/common/parts/*.css "${TARGET_DIR}/${theme_name}"/parts [[ -f "${TARGET_DIR}"/userChrome.css ]] && mv "${TARGET_DIR}"/userChrome.css "${TARGET_DIR}"/userChrome.css.bak - cp -rf "${FIREFOX_SRC_DIR}"/userChrome-"${theme_name}${darker}${adaptive}".css "${TARGET_DIR}"/userChrome.css + cp -rf "${FIREFOX_SRC_DIR}"/userChrome-"${theme_name}${theme_type}".css "${TARGET_DIR}"/userChrome.css [[ -f "${TARGET_DIR}"/userContent.css ]] && mv "${TARGET_DIR}"/userContent.css "${TARGET_DIR}"/userContent.css.bak - cp -rf "${FIREFOX_SRC_DIR}"/userContent-"${theme_name}${darker}${adaptive}".css "${TARGET_DIR}"/userContent.css + cp -rf "${FIREFOX_SRC_DIR}"/userContent-"${theme_name}${theme_type}".css "${TARGET_DIR}"/userContent.css if [[ "${firefoxtheme}" == 'Flat' && "${theme_name}" == 'Monterey' ]]; then - cp -rf "${FIREFOX_SRC_DIR}"/userChrome-Monterey-alt"${darker}${adaptive}".css "${TARGET_DIR}"/userChrome.css + cp -rf "${FIREFOX_SRC_DIR}"/userChrome-Monterey-alt"${theme_type}".css "${TARGET_DIR}"/userChrome.css cp -rf "${FIREFOX_SRC_DIR}"/WhiteSur/parts/headerbar-urlbar.css "${TARGET_DIR}"/Monterey/parts/headerbar-urlbar-alt.css fi diff --git a/src/other/firefox/Monterey/colors/dark-nord.css b/src/other/firefox/Monterey/colors/dark-nord.css new file mode 100644 index 00000000..0d896c47 --- /dev/null +++ b/src/other/firefox/Monterey/colors/dark-nord.css @@ -0,0 +1,172 @@ +@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* Variables that start with --gnome- are added by me and are assigned + * to elements somewhere in this code. The rest of the variables are + * built-in in Firefox, so you need to add an !important if you wanna + * override them. */ + +@media (prefers-color-scheme: dark) { + :root { + /* Browser area before a page starts loading */ + --gnome-browser-before-load-background: #252932; + --gnome-content-page-dialog-background: #313742; + --gnome-content-page-background: #15181d; + --gnome-content-box-background: #20242b; + --gnome-content-page-color: #eef3fd; + --theme-primary-color: #5271ad; + --theme-primary-hover-color: #6085cc; + --theme-primary-active-color: #73a0f5; + + /* Toolbars */ + --gnome-toolbar-background: #2e3440; + --gnome-tabstoolbar-background: #191c23; + --gnome-findbar-background: #2b303b; + --gnome-toolbar-color: #fbfcfd; + --gnome-toolbar-icon-fill: #fbfcfd; + --gnome-toolbar-border-color: #0e0f0f; + --gnome-inactive-toolbar-color: rgba(255, 255, 255, 0.35); + --gnome-inactive-toolbar-background: #242931; + --gnome-inactive-toolbar-border-color: #0d0f12; + + /* Sidebar */ + --sidebar-background-color: #252932; + --gnome-sidebar-background: #2c313b; + --gnome-inactive-sidebar-background: #2f343f; + --gnome-sidebar-border-color: color-mix(in srgb, #000000 75%, var(--gnome-sidebar-background)); + + /* Popups */ + --gnome-menu-background: rgba(43, 48, 59, 0.95); + --gnome-menu-border-color: rgba(0, 0, 0, 0.75); + --gnome-popover-background: rgba(43, 48, 59, 0.95); + --gnome-popover-border-color: rgba(0, 0, 0, 0.75); + --gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.3); + --gnome-popover-button-hover-background: rgba(255, 255, 255, 0.1); + --gnome-popover-button-active-background: rgba(255, 255, 255, 0.15); + --gnome-popover-separator-color: rgba(255, 255, 255, 0.08); + + /* Header bar */ + --gnome-headerbar-background: #2e3440; + --gnome-headerbar-border-color: #0e0f0f; + --gnome-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15); + --gnome-inactive-headerbar-background: #242931; + --gnome-inactive-headerbar-border-color: #0d0f12; + --gnome-inactive-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);); + + /* Buttons */ + --gnome-button-background: linear-gradient(to top, #495263 0%, #4e5769 100%); + --gnome-button-border-color: rgba(0, 0, 0, 0.2); + --gnome-button-border-bottom-color: rgba(0, 0, 0, 0.25); + --gnome-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + --gnome-button-hover-color: rgba(255, 255, 255, 0.1); + --gnome-button-active-color: rgba(255, 255, 255, 0.2); + --gnome-button-hover-background: linear-gradient(to top, #535d70 0%, #555f73 100%); + --gnome-button-active-background: linear-gradient(to top, #5f6a80 0%, #626e85 100%); + --gnome-button-active-border-color: rgba(0, 0, 0, 0.25); + --gnome-button-active-border-bottom-color: rgba(0, 0, 0, 0.25); + --gnome-button-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + --gnome-button-disabled-background: linear-gradient(to top, #323743 0%, #363c49 100%); + --gnome-button-disabled-border-color: rgba(0, 0, 0, 0.2); + --gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0.03); + --gnome-inactive-button-background: linear-gradient(#292e38, #292e38); + --gnome-inactive-button-border-color: rgba(0, 0, 0, 0.12); + --gnome-inactive-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.0); + --gnome-button-suggested-action-background: linear-gradient(to top, #155099 2px, #15539e); + --gnome-button-suggested-action-border-color: rgba(0, 0, 0, 0.2); + --gnome-button-suggested-action-border-bottom-color: rgba(0, 0, 0, 0.3); + --gnome-button-suggested-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08); + --gnome-button-suggested-action-hover-background: linear-gradient(to top, #155099, #1655a2 1px); + --gnome-button-suggested-action-active-background: linear-gradient(to top, #103e75, #103e75 1px); + --gnome-button-suggested-action-active-border-color: rgba(0, 0, 0, 0.3); + --gnome-button-suggested-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); + --gnome-button-destructive-action-background: linear-gradient(to top, #ae151c 2px, #b2161d); + --gnome-button-destructive-action-border-color: rgba(0, 0, 0, 0.2); + --gnome-button-destructive-action-border-bottom-color: rgba(0, 0, 0, 0.3); + --gnome-button-destructive-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); + --gnome-button-destructive-action-hover-background: linear-gradient(to top, #ae151c, #b7161d 1px); + --gnome-button-destructive-action-active-background: linear-gradient(to top, #8a1116, #8a1116 1px); + --gnome-button-destructive-action-active-border-color: rgba(0, 0, 0, 0.3); + --gnome-button-destructive-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0); + + --gnome-headerbar-button-combined-background: rgba(255, 255, 255, 0.05); + --gnome-headerbar-button-hover-background: rgba(255, 255, 255, 0.1); + --gnome-headerbar-button-active-background: rgba(255, 255, 255, 0.15); + + /* URL bar */ + --gnome-urlbar-background: #323946; + --gnome-urlbar-border-color: rgba(0, 0, 0, 0.2); + --gnome-urlbar-box-shadow: 0 3px 6px 1px rgba(0,0,0, .2), 0 5px 16px 3px rgba(0,0,0, .15), 0 0 0 1px rgba(0, 0, 0, 0.75); + --gnome-urlbar-color: #f0f5ff; + --gnome-hover-urlbar-border-color: #414958; + --gnome-inactive-urlbar-background: #292e38; + --gnome-inactive-urlbar-border-color: #1e2128; + --gnome-inactive-urlbar-box-shadow: none; + --gnome-inactive-urlbar-color: #c9cdd6; + --gnome-focused-urlbar-border-color: #338CBE; + --gnome-focused-urlbar-highlight-color: #006EA0; + --gnome-private-urlbar-background: #25003e; + + /* Tabs */ + --gnome-tabbar-tab-background: rgba(255, 255, 255, 0.06); + --gnome-tabbar-tab-color: #828690; + --gnome-tabbar-tab-hover-background: rgba(255, 255, 255, 0.12); + --gnome-tabbar-tab-hover-color: #b4bbc8; + --gnome-tabbar-tab-active-background: rgba(255, 255, 255, 0.16); + --gnome-tabbar-tab-active-color: #fbfcfd; + --gnome-tabbar-tab-active-hover-background: rgba(255, 255, 255, 0.16); + --gnome-inactive-tabbar-tab-color: #5e6168; + --gnome-inactive-tabbar-tab-background: rgba(255, 255, 255, 0.03); + --gnome-inactive-tabbar-tab-active-background: rgba(255, 255, 255, 0.1); + --gnome-inactive-tabbar-tab-active-color: #7b8089; + --gnome-tab-attention-icon-color: #8694c4; + + /* Switch */ + --gnome-switch-background: #343a46; + --gnome-switch-hover-background: #3d4452; + --gnome-switch-active-background: #474f60; + --gnome-switch-border-color: transparent; + --gnome-switch-slider-background: #fbfcfd; + --gnome-switch-slider-border-color: transparent; + --gnome-switch-slider-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); + --gnome-switch-pressed-background: var(--theme-primary-color); + --gnome-switch-pressed-hover-background: var(--theme-primary-hover-color); + --gnome-switch-pressed-active-background: var(--theme-primary-active-color); + --gnome-switch-active-border-color: transparent; + --gnome-switch-active-slider-border-color: transparent; + + /* Dirty hacks for replaced symbolic icons, they load from + * /usr/share/icons// and on some systems they need to be + * inverted, on others they don't, adjusts the filters below to your + * needs (you may also adjust icon brightness here). */ + --gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%); + --gnome-icons-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(200%); /* without invert: none */ + --gnome-window-icons-hack-filter: invert(90%); /* without invert: none */ + + /* Private window colors */ + --gnome-private-accent: #78aeed; + + /* Toolbars */ + --gnome-private-toolbar-background: var(--gnome-headerbar-background); + --gnome-private-inactive-toolbar-background: var(--gnome-inactive-headerbar-background); + /* Menus */ + --gnome-private-menu-background: #292e38; + /* Header bar */ + --gnome-private-headerbar-background: #252F49; + --gnome-private-inactive-headerbar-background: var(--gnome-private-toolbar-background); + /* Tabs */ + --gnome-private-tabbar-tab-hover-background: #343e56; /* Hardcoded color */ + --gnome-private-tabbar-tab-active-background: #343e56; /* Hardcoded color */ + --gnome-private-tabbar-tab-active-background-contrast: #495675; /* Hardcoded color */ + --gnome-private-tabbar-tab-active-hover-background: #414a61; /* Hardcoded color */ + --gnome-private-inactive-tabbar-tab-hover-background: #242c3f; /* Hardcoded color */ + --gnome-private-inactive-tabbar-tab-active-background: #272e41; /* Hardcoded color */ + + /* Text color for Firefox Logo in new private tab */ + --gnome-private-wordmark: #FBFBFE; + + /* New private tab background */ + --gnome-private-in-content-page-background: #1b1e24; + + /* Private browsing info box */ + --gnome-private-text-primary-color: #FBFBFE; + } +} diff --git a/src/other/firefox/Monterey/colors/dark.css b/src/other/firefox/Monterey/colors/dark.css index e21bc34e..488841c7 100644 --- a/src/other/firefox/Monterey/colors/dark.css +++ b/src/other/firefox/Monterey/colors/dark.css @@ -9,7 +9,10 @@ :root { /* Browser area before a page starts loading */ --gnome-browser-before-load-background: #242424; - --gnome-browser-content-box-background: #323232; + --gnome-content-page-dialog-background: #424242; + --gnome-content-page-background: #1d1d1d; + --gnome-content-box-background: #2b2b2b; + --gnome-content-page-color: #fdfdfd; --theme-primary-color: #315bef; --theme-primary-hover-color: #5073f1; --theme-primary-active-color: #6584f3; diff --git a/src/other/firefox/Monterey/colors/darker.css b/src/other/firefox/Monterey/colors/darker.css index 6aee5e72..5ae8beaa 100644 --- a/src/other/firefox/Monterey/colors/darker.css +++ b/src/other/firefox/Monterey/colors/darker.css @@ -9,7 +9,10 @@ :root { /* Browser area before a page starts loading */ --gnome-browser-before-load-background: #1f1f1f; - --gnome-browser-content-box-background: #323232; + --gnome-content-page-dialog-background: #242424; + --gnome-content-page-background: #101010; + --gnome-content-box-background: #1b1b1b; + --gnome-content-page-color: #dddddd; --theme-primary-color: #315bef; --theme-primary-hover-color: #5073f1; --theme-primary-active-color: #6584f3; diff --git a/src/other/firefox/Monterey/colors/light-adaptive.css b/src/other/firefox/Monterey/colors/light-adaptive.css index 4c49eaa1..b0a374a7 100644 --- a/src/other/firefox/Monterey/colors/light-adaptive.css +++ b/src/other/firefox/Monterey/colors/light-adaptive.css @@ -9,6 +9,10 @@ /* Browser area before a page starts loading */ --gnome-browser-before-load-background: var(--lwt-accent-color, #ffffff); --gnome-browser-content-box-background: var(--lwt-accent-color, #ffffff); + --gnome-content-page-dialog-background: #ffffff; + --gnome-content-page-background: #f2f2f2; + --gnome-content-box-background: #ffffff; + --gnome-content-page-color: #242424; --theme-primary-color: #315bef; --theme-primary-hover-color: #5073f1; --theme-primary-active-color: #6584f3; diff --git a/src/other/firefox/Monterey/colors/light-nord.css b/src/other/firefox/Monterey/colors/light-nord.css new file mode 100644 index 00000000..45deecc4 --- /dev/null +++ b/src/other/firefox/Monterey/colors/light-nord.css @@ -0,0 +1,169 @@ +@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* Variables that start with --gnome- are added by me and are assigned + * to elements somewhere in this code. The rest of the variables are + * built-in in Firefox, so you need to add an !important if you wanna + * override them. */ + +:root { + /* Browser area before a page starts loading */ + --gnome-browser-before-load-background: #f3f4f6; + --gnome-content-page-dialog-background: #fbfcfd; + --gnome-content-page-background: #e3e8f2; + --gnome-content-box-background: #fbfcfd; + --gnome-content-page-color: #1b1e24; + --theme-primary-color: #5271ad; + --theme-primary-hover-color: #6085cc; + --theme-primary-active-color: #73a0f5; + + /* Toolbars */ + --gnome-toolbar-background: #fbfcfd; + --gnome-tabstoolbar-background: #d7dce5; + --gnome-findbar-background: #f3f4f6; + --gnome-toolbar-color: #22262e; + --gnome-toolbar-icon-fill: #22262e; + --gnome-toolbar-border-color: #c3c7cf; + --gnome-inactive-toolbar-color: rgba(34, 38, 46, 0.45); + --gnome-inactive-toolbar-background: #f6f5f4; + --gnome-inactive-toolbar-border-color: #cdd1da; + + /* Sidebar */ + --gnome-sidebar-background: #f3f4f6; + --gnome-inactive-sidebar-background: #f2f4f9; + --gnome-sidebar-border-color: color-mix(in srgb, #000000 12%, var(--gnome-sidebar-background)); + + /* Popups */ + --gnome-menu-background: rgba(255, 255, 255, 0.95); + --gnome-menu-border-color: rgba(0, 0, 0, 0.12); + --gnome-popover-background: rgba(255, 255, 255, 0.95); + --gnome-popover-border-color: rgba(0, 0, 0, 0.12); + --gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.15); + --gnome-popover-button-hover-background: rgba(0, 0, 0, 0.1); + --gnome-popover-button-active-background: rgba(0, 0, 0, 0.2); + --gnome-popover-separator-color: rgba(0, 0, 0, 0.1); + + /* Header bar */ + --gnome-headerbar-background: #fbfcfd; + --gnome-headerbar-border-color: #c3c7cf; + --gnome-headerbar-box-shadow: 0 1px rgba(255, 255, 255, 0.65) inset; + --gnome-inactive-headerbar-background: #f3f4f6; + --gnome-inactive-headerbar-border-color: #cdd1da; + --gnome-inactive-headerbar-box-shadow: 0 1px #fff inset; + + /* Buttons */ + --gnome-button-background: linear-gradient(to top, #eaecf1 0%, #f5f8fd 95%, #f6f9fe 100%); + --gnome-button-border-color: #c3c7cf; + --gnome-button-border-bottom-color: #c3c7cf; + --gnome-button-box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.03); + --gnome-button-hover-color: rgba(0, 0, 0, 0.1); + --gnome-button-active-color: rgba(0, 0, 0, 0.2); + --gnome-button-hover-background: linear-gradient(to top, #f5f8fd 0%, #eef3fd 100%); + --gnome-button-active-background: #c3c7cf; + --gnome-button-active-border-color: #a7abb2; + --gnome-button-active-border-bottom-color: #a7abb2; + --gnome-button-active-box-shadow: 0 1px rgba(255, 255, 255, 0) inset; + --gnome-button-disabled-background: #faf9f8; + --gnome-button-disabled-border-color: #c3c7cf; + --gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0); + --gnome-inactive-button-background: #f6f5f4; + --gnome-inactive-button-border-color: #cdd1da; + --gnome-inactive-button-box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(255, 255, 255, 0); + --gnome-button-suggested-action-background: linear-gradient(to top, #2379e2 2px, #3584e4); + --gnome-button-suggested-action-border-color: #1b6acb; + --gnome-button-suggested-action-border-bottom-color: #15539e; + --gnome-button-suggested-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); + --gnome-button-suggested-action-hover-background: linear-gradient(to top, #3584e4, #3987e5 1px); + --gnome-button-suggested-action-active-background: linear-gradient(to top, #1961b9, #1961b9 1px); + --gnome-button-suggested-action-active-border-color: #1b6acb; + --gnome-button-suggested-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0); + --gnome-button-destructive-action-background: linear-gradient(to top, #ce1921 2px, #e01b24); + --gnome-button-destructive-action-border-color: #b2161d; + --gnome-button-destructive-action-border-bottom-color: #851015; + --gnome-button-destructive-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); + --gnome-button-destructive-action-hover-background: linear-gradient(to top, #e01b24, #e41c26 1px); + --gnome-button-destructive-action-active-background: linear-gradient(to top, #a0131a, #a0131a 1px); + --gnome-button-destructive-action-active-border-color: #b2161d; + --gnome-button-destructive-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0); + + --gnome-headerbar-button-combined-background: rgba(0, 0, 0, 0.05); + --gnome-headerbar-button-hover-background: rgba(0, 0, 0, 0.1); + --gnome-headerbar-button-active-background: rgba(0, 0, 0, 0.15); + + /* URL bar */ + --gnome-urlbar-background: #f3f4f6; + --gnome-urlbar-border-color: #abafb6; + --gnome-urlbar-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08), 0 5px 8px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(0,0,0, 0.12); + --gnome-urlbar-color: #020202; + --gnome-hover-urlbar-border-color: #d7dce5; + --gnome-inactive-urlbar-background: #e9ebf0; + --gnome-inactive-urlbar-border-color: #cdd1da; + --gnome-inactive-urlbar-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05); + --gnome-inactive-urlbar-color: #252932; + --gnome-focused-urlbar-border-color: #5683DA; + --gnome-focused-urlbar-highlight-color: #6592E9; + --gnome-private-urlbar-background: #e6c2ff; + + /* Tabs */ + --gnome-tabbar-tab-background: #e6ebf5; + --gnome-tabbar-tab-color: rgb(141, 144, 145); + --gnome-tabbar-tab-hover-background: #f0f0f0; + --gnome-tabbar-tab-hover-color: rgb(93, 98, 99); + --gnome-tabbar-tab-active-background: #e8e8e8; + --gnome-tabbar-tab-active-color: rgb(46, 52, 54); + --gnome-tabbar-tab-active-hover-background: #f0f0f0; + --gnome-inactive-tabbar-tab-color: #8b8e8f; + --gnome-inactive-tabbar-tab-background: #f0f0f0; + --gnome-inactive-tabbar-tab-active-background: #eeeeee; + --gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color); + --gnome-tab-attention-icon-color: #718be8; + + /* Switch */ + --gnome-switch-background: #a7abb2; + --gnome-switch-hover-background: #969aa0; + --gnome-switch-active-background: #7b8292; + --gnome-switch-border-color: transparent; + --gnome-switch-slider-background: #fbfcfd; + --gnome-switch-slider-border-color: transparent; + --gnome-switch-slider-box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); + --gnome-switch-active-border-color: transparent; + --gnome-switch-active-slider-border-color: transparent; + --gnome-switch-pressed-background: #315bef; + --gnome-switch-pressed-hover-background: #5073f1; + --gnome-switch-pressed-active-background: #6584f3; + + /* Dirty hacks for replaced symbolic icons, they load from + * /usr/share/icons// and on some systems they need to be + * inverted, on others they don't, adjusts the filters below to your + * needs (you may also adjust icon brightness here). */ + --gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%) invert(100%); + --gnome-icons-hack-filter: none; + --gnome-window-icons-hack-filter: invert(30%); + + /* Private window colors */ + --gnome-private-accent: #1c71d8; + + /* Toolbars */ + --gnome-private-toolbar-background: var(--gnome-headerbar-background); + --gnome-private-inactive-toolbar-background: var(--gnome-inactive-headerbar-background); + /* Menus */ + --gnome-private-menu-background: #fbfcfd; + /* Header bar */ + --gnome-private-headerbar-background: #D7E3F0; + --gnome-private-inactive-headerbar-background: var(--gnome-private-toolbar-background); + /* Tabs */ + --gnome-private-tabbar-tab-hover-background: #cbd7e3; /* Hardcoded color */ + --gnome-private-tabbar-tab-active-background: #c6d1dd; /* Hardcoded color */ + --gnome-private-tabbar-tab-active-background-contrast: #a9b6c4; /* Hardcoded color */ + --gnome-private-tabbar-tab-active-hover-background: #c0cbd7; /* Hardcoded color */ + --gnome-private-inactive-tabbar-tab-hover-background: #e4e9f0; /* Hardcoded color */ + --gnome-private-inactive-tabbar-tab-active-background: #e1e7ed; /* Hardcoded color */ + + /* Text color for Firefox Logo in new private tab */ + --gnome-private-wordmark: #20123A; + + /* New private tab background */ + --gnome-private-in-content-page-background: #ebf0fa; + + /* Private browsing info box */ + --gnome-private-text-primary-color: #15141A; +} diff --git a/src/other/firefox/Monterey/colors/light.css b/src/other/firefox/Monterey/colors/light.css index 09331b77..2b55a020 100644 --- a/src/other/firefox/Monterey/colors/light.css +++ b/src/other/firefox/Monterey/colors/light.css @@ -8,7 +8,10 @@ :root { /* Browser area before a page starts loading */ --gnome-browser-before-load-background: #f5f5f5; - --gnome-browser-content-box-background: #ffffff; + --gnome-content-page-dialog-background: #ffffff; + --gnome-content-page-background: #f2f2f2; + --gnome-content-box-background: #ffffff; + --gnome-content-page-color: #242424; --theme-primary-color: #315bef; --theme-primary-hover-color: #5073f1; --theme-primary-active-color: #6584f3; diff --git a/src/other/firefox/WhiteSur/colors/dark-adaptive.css b/src/other/firefox/WhiteSur/colors/dark-adaptive.css index d67e64cb..c849d3f7 100644 --- a/src/other/firefox/WhiteSur/colors/dark-adaptive.css +++ b/src/other/firefox/WhiteSur/colors/dark-adaptive.css @@ -9,6 +9,10 @@ :root { /* Browser area before a page starts loading */ --gnome-browser-before-load-background: var(--lwt-accent-color, #282828); + --gnome-content-page-dialog-background: #424242; + --gnome-content-page-background: #1d1d1d; + --gnome-content-box-background: #2b2b2b; + --gnome-content-page-color: #fdfdfd; --theme-primary-color: #315bef; --theme-primary-hover-color: #5073f1; --theme-primary-active-color: #6584f3; diff --git a/src/other/firefox/WhiteSur/colors/dark-nord.css b/src/other/firefox/WhiteSur/colors/dark-nord.css new file mode 100644 index 00000000..35dc5ef1 --- /dev/null +++ b/src/other/firefox/WhiteSur/colors/dark-nord.css @@ -0,0 +1,176 @@ +@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* Variables that start with --gnome- are added by me and are assigned + * to elements somewhere in this code. The rest of the variables are + * built-in in Firefox, so you need to add an !important if you wanna + * override them. */ + +@media (prefers-color-scheme: dark) { + :root { + /* Browser area before a page starts loading */ + --gnome-browser-before-load-background: #252932; + --gnome-content-page-dialog-background: #313742; + --gnome-content-page-background: #15181d; + --gnome-content-box-background: #20242b; + --gnome-content-page-color: #eef3fd; + --theme-primary-color: #5271ad; + --theme-primary-hover-color: #6085cc; + --theme-primary-active-color: #73a0f5; + + /* Toolbars */ + --gnome-toolbar-background: #2e3440; + --gnome-tabstoolbar-background: #191c23; + --gnome-findbar-background: #2b303b; + --gnome-toolbar-color: #fbfcfd; + --gnome-toolbar-icon-fill: #fbfcfd; + --gnome-toolbar-border-color: #0e0f0f; + --gnome-inactive-toolbar-color: rgba(255, 255, 255, 0.35); + --gnome-inactive-toolbar-background: #242931; + --gnome-inactive-toolbar-border-color: #0d0f12; + + /* Sidebar */ + --sidebar-background-color: #252932; + --gnome-sidebar-background: #2c313b; + --gnome-inactive-sidebar-background: #2f343f; + --gnome-sidebar-border-color: color-mix(in srgb, #000000 75%, var(--gnome-sidebar-background)); + + /* Popups */ + --gnome-menu-background: rgba(43, 48, 59, 0.95); + --gnome-menu-border-color: rgba(0, 0, 0, 0.75); + --gnome-popover-background: rgba(43, 48, 59, 0.95); + --gnome-popover-border-color: rgba(0, 0, 0, 0.75); + --gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.3); + --gnome-popover-button-hover-background: rgba(255, 255, 255, 0.1); + --gnome-popover-button-active-background: rgba(255, 255, 255, 0.15); + --gnome-popover-separator-color: rgba(255, 255, 255, 0.08); + + /* Header bar */ + --gnome-headerbar-background: #2e3440; + --gnome-headerbar-border-color: #0e0f0f; + --gnome-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15); + --gnome-inactive-headerbar-background: #242931; + --gnome-inactive-headerbar-border-color: #0d0f12; + --gnome-inactive-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08); + + /* Buttons */ + --gnome-button-background: linear-gradient(to top, #495263 0%, #4e5769 100%); + --gnome-button-border-color: rgba(0, 0, 0, 0.2); + --gnome-button-border-bottom-color: rgba(0, 0, 0, 0.25); + --gnome-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + --gnome-button-hover-color: rgba(255, 255, 255, 0.1); + --gnome-button-active-color: rgba(255, 255, 255, 0.2); + --gnome-button-hover-background: linear-gradient(to top, #535d70 0%, #555f73 100%); + --gnome-button-active-background: linear-gradient(to top, #5f6a80 0%, #626e85 100%); + --gnome-button-active-border-color: rgba(0, 0, 0, 0.25); + --gnome-button-active-border-bottom-color: rgba(0, 0, 0, 0.25); + --gnome-button-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + --gnome-button-disabled-background: linear-gradient(to top, #323743 0%, #363c49 100%); + --gnome-button-disabled-border-color: rgba(0, 0, 0, 0.2); + --gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0.03); + --gnome-inactive-button-background: linear-gradient(#292e38, #292e38); + --gnome-inactive-button-border-color: rgba(0, 0, 0, 0.12); + --gnome-inactive-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.0); + --gnome-button-suggested-action-background: linear-gradient(to top, #155099 2px, #15539e); + --gnome-button-suggested-action-border-color: rgba(0, 0, 0, 0.2); + --gnome-button-suggested-action-border-bottom-color: rgba(0, 0, 0, 0.3); + --gnome-button-suggested-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08); + --gnome-button-suggested-action-hover-background: linear-gradient(to top, #155099, #1655a2 1px); + --gnome-button-suggested-action-active-background: linear-gradient(to top, #103e75, #103e75 1px); + --gnome-button-suggested-action-active-border-color: rgba(0, 0, 0, 0.3); + --gnome-button-suggested-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); + --gnome-button-destructive-action-background: linear-gradient(to top, #ae151c 2px, #b2161d); + --gnome-button-destructive-action-border-color: rgba(0, 0, 0, 0.2); + --gnome-button-destructive-action-border-bottom-color: rgba(0, 0, 0, 0.3); + --gnome-button-destructive-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); + --gnome-button-destructive-action-hover-background: linear-gradient(to top, #ae151c, #b7161d 1px); + --gnome-button-destructive-action-active-background: linear-gradient(to top, #8a1116, #8a1116 1px); + --gnome-button-destructive-action-active-border-color: rgba(0, 0, 0, 0.3); + --gnome-button-destructive-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0); + + --gnome-headerbar-button-combined-background: rgba(255, 255, 255, 0.05); + --gnome-headerbar-button-hover-background: rgba(255, 255, 255, 0.1); + --gnome-headerbar-button-active-background: rgba(255, 255, 255, 0.15); + + /* URL bar */ + --gnome-urlbar-background: #323946; + --gnome-urlbar-border-color: rgba(0, 0, 0, 0.2); + --gnome-urlbar-box-shadow: 0 3px 6px 1px rgba(0,0,0, .2), 0 5px 16px 3px rgba(0,0,0, .15), 0 0 0 1px rgba(0, 0, 0, 0.75); + --gnome-urlbar-color: #f0f5ff; + --gnome-hover-urlbar-border-color: #414958; + --gnome-inactive-urlbar-background: #292e38; + --gnome-inactive-urlbar-border-color: #1e2128; + --gnome-inactive-urlbar-box-shadow: none; + --gnome-inactive-urlbar-color: #c9cdd6; + --gnome-focused-urlbar-border-color: #338CBE; + --gnome-focused-urlbar-highlight-color: #006EA0; + --gnome-private-urlbar-background: #25003e; + + /* Tabs */ + --gnome-tabbar-tab-background: #1c1f26; + --gnome-tabbar-tab-color: #828690; + --gnome-tabbar-tab-border-color: #0b0c0f; + --gnome-tabbar-tab-hover-background: #20242b; + --gnome-tabbar-tab-hover-border-color: #0b0c0f; + --gnome-tabbar-tab-hover-color: #b4bbc8; + --gnome-tabbar-tab-active-background: #2e3440; + --gnome-tabbar-tab-active-border-color: #0e0f0f; + --gnome-tabbar-tab-active-color: #fbfcfd; + --gnome-tabbar-tab-active-hover-background: #242931; + --gnome-inactive-tabbar-tab-color: #5e6168; + --gnome-inactive-tabbar-tab-background: #181a20; + --gnome-inactive-tabbar-tab-active-background: #242931; + --gnome-inactive-tabbar-tab-active-border-color: var(--gnome-tabbar-tab-active-border-bottom-color); + --gnome-inactive-tabbar-tab-active-color: #657189; + --gnome-tab-attention-icon-color: #8694c4; + + /* Switch */ + --gnome-switch-background: #343a46; + --gnome-switch-hover-background: #3d4452; + --gnome-switch-active-background: #474f60; + --gnome-switch-border-color: transparent; + --gnome-switch-slider-background: #fbfcfd; + --gnome-switch-slider-border-color: transparent; + --gnome-switch-slider-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); + --gnome-switch-pressed-background: var(--theme-primary-color); + --gnome-switch-pressed-hover-background: var(--theme-primary-hover-color); + --gnome-switch-pressed-active-background: var(--theme-primary-active-color); + --gnome-switch-active-border-color: transparent; + --gnome-switch-active-slider-border-color: transparent; + + /* Dirty hacks for replaced symbolic icons, they load from + * /usr/share/icons// and on some systems they need to be + * inverted, on others they don't, adjusts the filters below to your + * needs (you may also adjust icon brightness here). */ + --gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%); + --gnome-icons-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(200%); /* without invert: none */ + --gnome-window-icons-hack-filter: invert(90%); /* without invert: none */ + + /* Private window colors */ + --gnome-private-accent: #78aeed; + + /* Toolbars */ + --gnome-private-toolbar-background: var(--gnome-headerbar-background); + --gnome-private-inactive-toolbar-background: var(--gnome-inactive-headerbar-background); + /* Menus */ + --gnome-private-menu-background: #292e38; + /* Header bar */ + --gnome-private-headerbar-background: #252F49; + --gnome-private-inactive-headerbar-background: var(--gnome-private-toolbar-background); + /* Tabs */ + --gnome-private-tabbar-tab-hover-background: #343e56; /* Hardcoded color */ + --gnome-private-tabbar-tab-active-background: #343e56; /* Hardcoded color */ + --gnome-private-tabbar-tab-active-background-contrast: #495675; /* Hardcoded color */ + --gnome-private-tabbar-tab-active-hover-background: #414a61; /* Hardcoded color */ + --gnome-private-inactive-tabbar-tab-hover-background: #242c3f; /* Hardcoded color */ + --gnome-private-inactive-tabbar-tab-active-background: #272e41; /* Hardcoded color */ + + /* Text color for Firefox Logo in new private tab */ + --gnome-private-wordmark: #FBFBFE; + + /* New private tab background */ + --gnome-private-in-content-page-background: #1b1e24; + + /* Private browsing info box */ + --gnome-private-text-primary-color: #FBFBFE; + } +} diff --git a/src/other/firefox/WhiteSur/colors/dark.css b/src/other/firefox/WhiteSur/colors/dark.css index 670c078d..7afec300 100644 --- a/src/other/firefox/WhiteSur/colors/dark.css +++ b/src/other/firefox/WhiteSur/colors/dark.css @@ -9,6 +9,10 @@ :root { /* Browser area before a page starts loading */ --gnome-browser-before-load-background: #242424; + --gnome-content-page-dialog-background: #424242; + --gnome-content-page-background: #1d1d1d; + --gnome-content-box-background: #2b2b2b; + --gnome-content-page-color: #fdfdfd; --theme-primary-color: #315bef; --theme-primary-hover-color: #5073f1; --theme-primary-active-color: #6584f3; diff --git a/src/other/firefox/WhiteSur/colors/darker.css b/src/other/firefox/WhiteSur/colors/darker.css index c86ac329..df518dd3 100644 --- a/src/other/firefox/WhiteSur/colors/darker.css +++ b/src/other/firefox/WhiteSur/colors/darker.css @@ -9,6 +9,10 @@ :root { /* Browser area before a page starts loading */ --gnome-browser-before-load-background: #1f1f1f; + --gnome-content-page-dialog-background: #242424; + --gnome-content-page-background: #101010; + --gnome-content-box-background: #1b1b1b; + --gnome-content-page-color: #dddddd; --theme-primary-color: #315bef; --theme-primary-hover-color: #5073f1; --theme-primary-active-color: #6584f3; diff --git a/src/other/firefox/WhiteSur/colors/light-adaptive.css b/src/other/firefox/WhiteSur/colors/light-adaptive.css index 34488a94..cfbbe45c 100644 --- a/src/other/firefox/WhiteSur/colors/light-adaptive.css +++ b/src/other/firefox/WhiteSur/colors/light-adaptive.css @@ -8,6 +8,10 @@ :root { /* Browser area before a page starts loading */ --gnome-browser-before-load-background: var(--lwt-accent-color, #ffffff); + --gnome-content-page-dialog-background: #ffffff; + --gnome-content-page-background: #f2f2f2; + --gnome-content-box-background: #ffffff; + --gnome-content-page-color: #242424; --theme-primary-color: #315bef; --theme-primary-hover-color: #5073f1; --theme-primary-active-color: #6584f3; diff --git a/src/other/firefox/WhiteSur/colors/light-nord.css b/src/other/firefox/WhiteSur/colors/light-nord.css new file mode 100644 index 00000000..8a0ed6cd --- /dev/null +++ b/src/other/firefox/WhiteSur/colors/light-nord.css @@ -0,0 +1,173 @@ +@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* Variables that start with --gnome- are added by me and are assigned + * to elements somewhere in this code. The rest of the variables are + * built-in in Firefox, so you need to add an !important if you wanna + * override them. */ + +:root { + /* Browser area before a page starts loading */ + --gnome-browser-before-load-background: #f3f4f6; + --gnome-content-page-dialog-background: #fbfcfd; + --gnome-content-page-background: #e3e8f2; + --gnome-content-box-background: #fbfcfd; + --gnome-content-page-color: #1b1e24; + --theme-primary-color: #5271ad; + --theme-primary-hover-color: #6085cc; + --theme-primary-active-color: #73a0f5; + + /* Toolbars */ + --gnome-toolbar-background: #fbfcfd; + --gnome-tabstoolbar-background: #d7dce5; + --gnome-findbar-background: #f3f4f6; + --gnome-toolbar-color: #22262e; + --gnome-toolbar-icon-fill: #22262e; + --gnome-toolbar-border-color: #c3c7cf; + --gnome-inactive-toolbar-color: rgba(34, 38, 46, 0.45); + --gnome-inactive-toolbar-background: #f6f5f4; + --gnome-inactive-toolbar-border-color: #cdd1da; + + /* Sidebar */ + --gnome-sidebar-background: #f3f4f6; + --gnome-inactive-sidebar-background: #f2f4f9; + --gnome-sidebar-border-color: color-mix(in srgb, #000000 12%, var(--gnome-sidebar-background)); + + /* Popups */ + --gnome-menu-background: rgba(255, 255, 255, 0.95); + --gnome-menu-border-color: rgba(0, 0, 0, 0.12); + --gnome-popover-background: rgba(255, 255, 255, 0.95); + --gnome-popover-border-color: rgba(0, 0, 0, 0.12); + --gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.15); + --gnome-popover-button-hover-background: rgba(0, 0, 0, 0.1); + --gnome-popover-button-active-background: rgba(0, 0, 0, 0.2); + --gnome-popover-separator-color: rgba(0, 0, 0, 0.1); + + /* Header bar */ + --gnome-headerbar-background: #fbfcfd; + --gnome-headerbar-border-color: #c3c7cf; + --gnome-headerbar-box-shadow: 0 1px rgba(255, 255, 255, 0.65) inset; + --gnome-inactive-headerbar-background: #f3f4f6; + --gnome-inactive-headerbar-border-color: #cdd1da; + --gnome-inactive-headerbar-box-shadow: 0 1px #fff inset; + + /* Buttons */ + --gnome-button-background: linear-gradient(to top, #eaecf1 0%, #f5f8fd 95%, #f6f9fe 100%); + --gnome-button-border-color: #c3c7cf; + --gnome-button-border-bottom-color: #c3c7cf; + --gnome-button-box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.03); + --gnome-button-hover-color: rgba(0, 0, 0, 0.1); + --gnome-button-active-color: rgba(0, 0, 0, 0.2); + --gnome-button-hover-background: linear-gradient(to top, #f5f8fd 0%, #eef3fd 100%); + --gnome-button-active-background: #c3c7cf; + --gnome-button-active-border-color: #a7abb2; + --gnome-button-active-border-bottom-color: #a7abb2; + --gnome-button-active-box-shadow: 0 1px rgba(255, 255, 255, 0) inset; + --gnome-button-disabled-background: #faf9f8; + --gnome-button-disabled-border-color: #c3c7cf; + --gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0); + --gnome-inactive-button-background: #f6f5f4; + --gnome-inactive-button-border-color: #cdd1da; + --gnome-inactive-button-box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(255, 255, 255, 0); + --gnome-button-suggested-action-background: linear-gradient(to top, #2379e2 2px, #3584e4); + --gnome-button-suggested-action-border-color: #1b6acb; + --gnome-button-suggested-action-border-bottom-color: #15539e; + --gnome-button-suggested-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); + --gnome-button-suggested-action-hover-background: linear-gradient(to top, #3584e4, #3987e5 1px); + --gnome-button-suggested-action-active-background: linear-gradient(to top, #1961b9, #1961b9 1px); + --gnome-button-suggested-action-active-border-color: #1b6acb; + --gnome-button-suggested-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0); + --gnome-button-destructive-action-background: linear-gradient(to top, #ce1921 2px, #e01b24); + --gnome-button-destructive-action-border-color: #b2161d; + --gnome-button-destructive-action-border-bottom-color: #851015; + --gnome-button-destructive-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); + --gnome-button-destructive-action-hover-background: linear-gradient(to top, #e01b24, #e41c26 1px); + --gnome-button-destructive-action-active-background: linear-gradient(to top, #a0131a, #a0131a 1px); + --gnome-button-destructive-action-active-border-color: #b2161d; + --gnome-button-destructive-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0); + + --gnome-headerbar-button-combined-background: rgba(0, 0, 0, 0.05); + --gnome-headerbar-button-hover-background: rgba(0, 0, 0, 0.1); + --gnome-headerbar-button-active-background: rgba(0, 0, 0, 0.15); + + /* URL bar */ + --gnome-urlbar-background: #f3f4f6; + --gnome-urlbar-border-color: #abafb6; + --gnome-urlbar-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08), 0 5px 8px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(0,0,0, 0.12); + --gnome-urlbar-color: #020202; + --gnome-hover-urlbar-border-color: #d7dce5; + --gnome-inactive-urlbar-background: #e9ebf0; + --gnome-inactive-urlbar-border-color: #cdd1da; + --gnome-inactive-urlbar-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05); + --gnome-inactive-urlbar-color: #252932; + --gnome-focused-urlbar-border-color: #5683DA; + --gnome-focused-urlbar-highlight-color: #6592E9; + --gnome-private-urlbar-background: #e6c2ff; + + /* Tabs */ + --gnome-tabbar-tab-background: #d7dce5; + --gnome-tabbar-tab-color: rgb(141, 144, 145); + --gnome-tabbar-tab-border-color: #c3c7cf; + --gnome-tabbar-tab-hover-background: #c8ccd5; + --gnome-tabbar-tab-hover-border-color: #c3c7cf; + --gnome-tabbar-tab-hover-color: rgb(93, 98, 99); + --gnome-tabbar-tab-active-background: #fbfcfd; + --gnome-tabbar-tab-active-border-color: #c3c7cf; + --gnome-tabbar-tab-active-color: rgb(46, 52, 54); + --gnome-tabbar-tab-active-hover-background: #f3f4f6; + --gnome-inactive-tabbar-tab-color: #8b8c8f; + --gnome-inactive-tabbar-tab-background: #dfdfdf; + --gnome-inactive-tabbar-tab-active-background: #f3f4f6; + --gnome-inactive-tabbar-tab-active-border-color: var(--gnome-tabbar-tab-active-border-bottom-color); + --gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color); + --gnome-tab-attention-icon-color: #718be8; + + /* Switch */ + --gnome-switch-background: #a7abb2; + --gnome-switch-hover-background: #969aa0; + --gnome-switch-active-background: #7b8292; + --gnome-switch-border-color: transparent; + --gnome-switch-slider-background: #fbfcfd; + --gnome-switch-slider-border-color: transparent; + --gnome-switch-slider-box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); + --gnome-switch-active-border-color: transparent; + --gnome-switch-active-slider-border-color: transparent; + --gnome-switch-pressed-background: #315bef; + --gnome-switch-pressed-hover-background: #5073f1; + --gnome-switch-pressed-active-background: #6584f3; + + /* Dirty hacks for replaced symbolic icons, they load from + * /usr/share/icons// and on some systems they need to be + * inverted, on others they don't, adjusts the filters below to your + * needs (you may also adjust icon brightness here). */ + --gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%) invert(100%); + --gnome-icons-hack-filter: none; + --gnome-window-icons-hack-filter: invert(30%); + + /* Private window colors */ + --gnome-private-accent: #1c71d8; + + /* Toolbars */ + --gnome-private-toolbar-background: var(--gnome-headerbar-background); + --gnome-private-inactive-toolbar-background: var(--gnome-inactive-headerbar-background); + /* Menus */ + --gnome-private-menu-background: #fbfcfd; + /* Header bar */ + --gnome-private-headerbar-background: #D7E3F0; + --gnome-private-inactive-headerbar-background: var(--gnome-private-toolbar-background); + /* Tabs */ + --gnome-private-tabbar-tab-hover-background: #cbd7e3; /* Hardcoded color */ + --gnome-private-tabbar-tab-active-background: #c6d1dd; /* Hardcoded color */ + --gnome-private-tabbar-tab-active-background-contrast: #a9b6c4; /* Hardcoded color */ + --gnome-private-tabbar-tab-active-hover-background: #c0cbd7; /* Hardcoded color */ + --gnome-private-inactive-tabbar-tab-hover-background: #e4e9f0; /* Hardcoded color */ + --gnome-private-inactive-tabbar-tab-active-background: #e1e7ed; /* Hardcoded color */ + + /* Text color for Firefox Logo in new private tab */ + --gnome-private-wordmark: #20123A; + + /* New private tab background */ + --gnome-private-in-content-page-background: #ebf0fa; + + /* Private browsing info box */ + --gnome-private-text-primary-color: #15141A; +} diff --git a/src/other/firefox/WhiteSur/colors/light.css b/src/other/firefox/WhiteSur/colors/light.css index 71e3214d..2db4a115 100644 --- a/src/other/firefox/WhiteSur/colors/light.css +++ b/src/other/firefox/WhiteSur/colors/light.css @@ -8,6 +8,10 @@ :root { /* Browser area before a page starts loading */ --gnome-browser-before-load-background: #f5f5f5; + --gnome-content-page-dialog-background: #ffffff; + --gnome-content-page-background: #f2f2f2; + --gnome-content-box-background: #ffffff; + --gnome-content-page-color: #242424; --theme-primary-color: #315bef; --theme-primary-hover-color: #5073f1; --theme-primary-active-color: #6584f3; diff --git a/src/other/firefox/WhiteSur/theme-nord.css b/src/other/firefox/WhiteSur/theme-nord.css new file mode 100644 index 00000000..2c3b66b8 --- /dev/null +++ b/src/other/firefox/WhiteSur/theme-nord.css @@ -0,0 +1,36 @@ +@import "parts/toolbox.css"; +@import "parts/buttons.css"; +@import "parts/entries.css"; +@import "parts/controls.css"; +@import "parts/headerbar-urlbar.css"; +@import "parts/headerbar-private-urlbar.css"; +@import "parts/headerbar.css"; +@import "parts/csd.css"; +@import "parts/titlebutton-light.css"; +@import "parts/titlebutton-dark.css"; +@import "parts/popups.css"; +@import "parts/tabsbar.css"; +@import "parts/findbar.css"; +@import "parts/sidebar.css"; +@import "parts/dialogs.css"; +@import "parts/notification.css"; +@import "parts/video-player.css"; +@import "parts/remove-white-flash.css"; +@import "parts/icons.css"; +@import "colors/light-nord.css"; +@import "colors/dark-nord.css"; +@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; + +/* Set theme version text in customization panel */ +#customization-footer::before { + background: url("icons/icon.svg") no-repeat; + background-size: contain; + content: "Firefox WhiteSur theme"; + padding: 10px 10px 10px 50px; +} + +#customization-container { + background-color: var(--gnome-browser-before-load-background) !important; + color: var(--gnome-toolbar-color) !important; + background-image: none !important; +} diff --git a/src/other/firefox/common/pages/common.css b/src/other/firefox/common/pages/common.css index 6acd186e..49ba8c98 100644 --- a/src/other/firefox/common/pages/common.css +++ b/src/other/firefox/common/pages/common.css @@ -1,24 +1,26 @@ @media (prefers-color-scheme: dark) { :host, + :host(.anonymous-content-host), :root { - --in-content-page-background: rgb(29,29,29) !important; - --in-content-page-color: rgb(253,253,253) !important; + --color-accent-primary: var(--theme-primary-active-color) !important; + --in-content-page-color: var(--gnome-content-page-color) !important; + --in-content-page-background: var(--gnome-content-page-background) !important; - --in-content-box-background: rgb(36, 36, 36) !important; + --in-content-box-background: var(--gnome-browser-before-load-background) !important; --in-content-box-background-odd: rgba(250,250,250,0.05) !important; --in-content-box-info-background: rgba(250,250,250,0.15) !important; --in-content-border-color: rgba(250,250,250,0.2) !important; --in-content-border-hover: rgba(250,250,250,0.3) !important; - --in-content-icon-color: rgb(252,252,252) !important; + --in-content-icon-color: var(--gnome-content-page-color) !important; - --in-content-primary-button-text-color: rgb(255,255,255) !important; + --in-content-primary-button-text-color: var(--gnome-toolbar-color) !important; --in-content-primary-button-background: var(--theme-primary-color) !important; --in-content-primary-button-background-hover: var(--theme-primary-hover-color) !important; --in-content-primary-button-background-active: var(--theme-primary-active-color) !important; - --in-content-table-background: rgb(35, 35, 35) !important; + --in-content-table-background: var(--gnome-browser-before-load-background) !important; --newtab-background-color: var(--gnome-browser-before-load-background) !important; --newtab-background-color-secondary: var(--gnome-menu-background) !important; @@ -26,12 +28,13 @@ --fxview-background-color: var(--gnome-browser-before-load-background) !important; --fxview-background-color-secondary: var(--gnome-menu-background) !important; scrollbar-color: rgba(250,250,250,.4) rgba(22,22,22,.3) !important; + --background-color-box: var(--gnome-content-box-background) !important; } @media not (prefers-contrast) { :root[dialogroot], :host(dialog) { - --in-content-page-background: #424242 !important; + --in-content-page-background: var(--gnome-content-page-dialog-background) !important; } } } diff --git a/src/other/firefox/userChrome-WhiteSur-nord.css b/src/other/firefox/userChrome-WhiteSur-nord.css new file mode 100644 index 00000000..61a86263 --- /dev/null +++ b/src/other/firefox/userChrome-WhiteSur-nord.css @@ -0,0 +1,42 @@ +/*------------------------USAGE---------------------------- + * Remove "/*" at the begining of "@import" line to ENABLE. + * Add "/*" at the begining of "@import" line to DISABLE. + */ + +@import "WhiteSur/theme-nord.css"; /**/ + +/*--------------Configure common theme features--------------*/ + +/* Move tab close button to left. */ +/*@import "WhiteSur/left-tab-close-button.css"; /**/ + +/* Hide the tab bar when only one tab is open (GNOMISH) + * You should move the new tab button somewhere else for this to work, because by + * default it is on the tab bar too. */ +/*@import "WhiteSur/hide-single-tab.css"; /**/ + +/* Limit the URL bar's autocompletion popup's width to the URL bar's width (GNOMISH) + * This feature is included by default for Firefox 70+ */ +/*@import "WhiteSur/matching-autocomplete-width.css"; /**/ + +/* Rounded window even when it gets maximized */ +/*@import "WhiteSur/rounded-window-maximized.css"; /**/ + +/* Active tab high contrast */ +/*@import "WhiteSur/active-tab-contrast.css"; /**/ + +/* Use system theme icons instead of Adwaita icons included by theme [BUGGED] */ +/*@import "WhiteSur/system-icons.css"; /**/ + +/* Allow drag window from headerbar buttons (GNOMISH) [BUGGED] */ +/* It can activate button action, with unpleasant behavior. */ +/*@import "WhiteSur/drag-window-headerbar-buttons.css"; /**/ + +/* Make all tab icons look kinda like symbolic icons */ +/*@import "WhiteSur/symbolic-tab-icons.css"; /**/ + +/* Hide window buttons (close/min/max) in maximized windows */ +/*@import "WhiteSur/hide-window-buttons.css"; /**/ + +/* Import your custom stylesheet */ +@import "customChrome.css"; /**/ diff --git a/src/other/firefox/userContent-WhiteSur-nord.css b/src/other/firefox/userContent-WhiteSur-nord.css new file mode 100644 index 00000000..f6c47ddd --- /dev/null +++ b/src/other/firefox/userContent-WhiteSur-nord.css @@ -0,0 +1,7 @@ +@import "WhiteSur/colors/light-nord.css"; +@import "WhiteSur/colors/dark-nord.css"; + +@import "WhiteSur/pages/common.css"; +@import "WhiteSur/pages/newtab.css"; +@import "WhiteSur/pages/reader.css"; +@import "WhiteSur/pages/privatebrowsing.css"; diff --git a/tweaks.sh b/tweaks.sh index 1914d698..9307ca2a 100755 --- a/tweaks.sh +++ b/tweaks.sh @@ -51,7 +51,8 @@ usage() { sec_helpify "2. flat" " Monterey alt version" "" " Flat round tabs..." sec_helpify "3. alt" " Alt windows button version" "" " Alt windows button style like gtk theme" sec_helpify "4. darker" " Darker Firefox theme version" "" " Darker Firefox theme version" - sec_helpify "5. adaptive" " Adaptive color version" " You need install adaptive-tab-bar-colour plugin first" " https://addons.mozilla.org/firefox/addon/adaptive-tab-bar-colour/" + sec_helpify "5. nord" " Nord Firefox colorscheme version" "" " Nord Firefox colorscheme version" + sec_helpify "6. adaptive" " Adaptive color version" " You need install adaptive-tab-bar-colour plugin first" " https://addons.mozilla.org/firefox/addon/adaptive-tab-bar-colour/" helpify "-e, --edit-firefox" "[(monterey|flat)|alt|(darker|adaptive)]" " Edit '${THEME_NAME}' theme for Firefox settings and also connect the theme to the current Firefox profiles" "" @@ -174,6 +175,10 @@ while [[ $# -gt 0 ]]; do darker="-darker" prompt -i "Darker Firefox theme version...\n" shift ;; + nord) + colorscheme="-nord" + prompt -i "Nord Firefox colorscheme version...\n" + shift ;; adaptive) adaptive="-adaptive" prompt -i "Firefox adaptive color version...\n"