From 5402fa0f521b06bc5806bb9ac81d1bf22993a3fc Mon Sep 17 00:00:00 2001 From: Oliver Smith Date: Sun, 28 May 2023 20:25:35 +0200 Subject: [PATCH 01/21] README: log file: add tail -F to example --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 954cb0f..a8eac08 100644 --- a/README.md +++ b/README.md @@ -98,10 +98,10 @@ changes are applied. The `src/mobile-config-autoconfig.js` script generates `userChrome.css` and `userContent.css` while Firefox starts. It logs to your Firefox profile -directory, find the log file with: +directory, follow the log file with: ``` -$ find ~/.mozilla -name mobile-config-firefox.log +$ tail -F $(find ~/.mozilla -name mobile-config-firefox.log) ``` ## Coding guidelines From 3dcfd01d09a7311f8b0d74b78e158d1ae1ee4a43 Mon Sep 17 00:00:00 2001 From: Ulrik de Muelenaere Date: Wed, 17 May 2023 17:31:43 -0400 Subject: [PATCH 02/21] userChrome/browser: Fix bottom navigation bar in FF 113 (MR 31) Firefox 113 changes from 'display: -moz-box' to 'display: flex', so we need to use the order property instead of -moz-box-ordinal-group. --- src/userChrome/browser.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/userChrome/browser.css b/src/userChrome/browser.css index feafa8f..f4c628a 100644 --- a/src/userChrome/browser.css +++ b/src/userChrome/browser.css @@ -4,7 +4,8 @@ /* Move navigation bar to bottom */ @media (max-width: 700px) { #browser { - -moz-box-ordinal-group: 0 !important; + -moz-box-ordinal-group: 0 !important; /* before FF 113 */ + order: -1 !important; /* since FF 113 */ } /* Hide navigation bar in kiosk mode (to prevent bug #29). We can assume FF From 8cbf7c9e309583e7d8e96748d7747c2d53572562 Mon Sep 17 00:00:00 2001 From: Ulrik de Muelenaere Date: Wed, 17 May 2023 18:20:36 -0400 Subject: [PATCH 03/21] userChrome/tabmenu: Fix height of tab menu in FF 113 (MR 31) Without this fix, the tab menu is only tall enough for 2 or 3 entries. This is an update of the rule directly above it, changing the ID and changing from a calculated height to a fixed height matching its child #allTabsMenu-allTabsView. With the calculated height, the menu entries were offset above the top of the menu. The previous rule no longer seems to be necessary, at least in Firefox 102 and newer, since #allTabsMenu-multiView does not exist. --- src/userChrome/tabmenu.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/userChrome/tabmenu.css b/src/userChrome/tabmenu.css index ec6d0ed..f78405e 100644 --- a/src/userChrome/tabmenu.css +++ b/src/userChrome/tabmenu.css @@ -67,11 +67,16 @@ overflow-y: hidden !important; } - #allTabsMenu-multiView box.panel-viewstack { + #allTabsMenu-multiView box.panel-viewstack { /* before FF 102 or earlier */ /* Use the whole height */ height: calc(100vh - 100px) !important; max-height: calc(100vh - 100px) !important; } + #customizationui-widget-multiview box.panel-viewstack { /* since FF 113 */ + /* Use the whole height */ + height: 300px !important; + max-height: 300px !important; + } #allTabsMenu-allTabsViewTabs { /* Make sure tabs with long titles don't exceed the all tabs menu */ From 4a53e32a5cfd23a5cfe4c1e18a558b1d6ef61d57 Mon Sep 17 00:00:00 2001 From: Ulrik de Muelenaere Date: Wed, 17 May 2023 18:39:23 -0400 Subject: [PATCH 04/21] userChrome/tabmenu: Fix max width of tab menu in FF >= 106 (MR 31) --- src/userChrome/tabmenu.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/userChrome/tabmenu.css b/src/userChrome/tabmenu.css index f78405e..903d985 100644 --- a/src/userChrome/tabmenu.css +++ b/src/userChrome/tabmenu.css @@ -78,7 +78,8 @@ max-height: 300px !important; } - #allTabsMenu-allTabsViewTabs { + #allTabsMenu-allTabsViewTabs, /* before FF 106 */ + #allTabsMenu-allTabsView-tabs { /* since FF 106 */ /* Make sure tabs with long titles don't exceed the all tabs menu */ max-width: calc(100vw - 20px); } From 3959e7c4760728aa318028863b82d4d035e9006d Mon Sep 17 00:00:00 2001 From: Ulrik de Muelenaere Date: Wed, 17 May 2023 18:42:31 -0400 Subject: [PATCH 05/21] userChrome/tabmenu: Add note to a declaration obsoleted in FF 113 (MR 31) Firefox 113 changes from 'display: -moz-box' to 'display: flex', so the -moz-box-flex property should be changed to flex-grow. However, that breaks the tab menu, and it doesn't seem to be necessary anyway. --- src/userChrome/tabmenu.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/userChrome/tabmenu.css b/src/userChrome/tabmenu.css index 903d985..7927539 100644 --- a/src/userChrome/tabmenu.css +++ b/src/userChrome/tabmenu.css @@ -56,7 +56,8 @@ max-height: 300px !important; /* When messing around with tabs, it gets into a state where it does * not use the whole height anymore, it becomes a tiny window. Removing - * this attribute fixes it. */ + * this attribute fixes it. Since FF 113, this no longer has any + * effect, but it doesn't seem to be necessary either. */ -moz-box-flex: initial !important; } From cc4a4a791bb2969bcb301b190078d4c95d4e9a00 Mon Sep 17 00:00:00 2001 From: Ulrik de Muelenaere Date: Mon, 3 Jul 2023 15:49:49 +0200 Subject: [PATCH 06/21] autoconfig: Fix version detection on first start (MR 32) Previously the Firefox version would be detected as 0 on the first start, causing popups.before-ff-108.css to be included even on newer versions, which breaks touch input. --- src/mobile-config-autoconfig.js | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/src/mobile-config-autoconfig.js b/src/mobile-config-autoconfig.js index 5d9691d..3b0fce9 100644 --- a/src/mobile-config-autoconfig.js +++ b/src/mobile-config-autoconfig.js @@ -71,12 +71,7 @@ function log_obj(obj) { } function get_firefox_version() { - try { - return Services.appinfo.lastAppVersion.split(".")[0]; - } catch(e) { - log("Couldn't get Firefox version (expected on first start): " + e); - return 0; - } + return Services.appinfo.version.split(".")[0]; } function get_firefox_version_previous() { @@ -250,10 +245,7 @@ function css_files_update() { var file = css_file_get(name); if (file.exists()) { - /* During the very first start, ff_previous is first "unknown", - * then the files get installed and Firefox gets restarted. - * Then ff_previous is 0. Don't restart it again. */ - if (ff_previous != 0 && g_ff_version != ff_previous) { + if (g_ff_version != ff_previous) { log("Removing outdated file: " + file.path + " (Firefox" + " version changed)"); file.remove(false); From e1c533d84e124126782e7554a71691f604c22be7 Mon Sep 17 00:00:00 2001 From: Seth Falco Date: Sun, 23 Jul 2023 21:52:36 +0100 Subject: [PATCH 07/21] fix: don't override user-agent (MR 34) --- README.md | 1 - src/mobile-config-autoconfig.js | 3 --- 2 files changed, 4 deletions(-) diff --git a/README.md b/README.md index a8eac08..b314381 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,6 @@ This does not replace a proper implementation in * Adapt UI elements and "about:" pages to small screen sizes (when opened on small screen) * Enable mobile gestures -* User agent set to same as Tor Browser for Android * Privacy tweaks: * Disable search suggestions * Disable Firefox studies diff --git a/src/mobile-config-autoconfig.js b/src/mobile-config-autoconfig.js index 3b0fce9..f7f4dd7 100644 --- a/src/mobile-config-autoconfig.js +++ b/src/mobile-config-autoconfig.js @@ -265,9 +265,6 @@ function css_files_update() { function set_default_prefs() { log("Setting default preferences"); - // Select a mobile user agent for firefox (same as tor browser on android) - defaultPref('general.useragent.override', 'Mozilla/5.0 (Android 10; Mobile; rv:110.0) Gecko/110.0 Firefox/110.0'); - // Do not suggest facebook, ebay, reddit etc. in the urlbar. Same as // Settings -> Privacy & Security -> Address Bar -> Shortcuts. As // side-effect, the urlbar results are not immediatelly opened once From 9c780dabb83b8857cb3700bd7fdd729400ee88e6 Mon Sep 17 00:00:00 2001 From: Seth Falco Date: Fri, 1 Sep 2023 15:58:24 +0200 Subject: [PATCH 08/21] fix: add mobile to user-agent (MR 35) --- src/mobile-config-autoconfig.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/mobile-config-autoconfig.js b/src/mobile-config-autoconfig.js index f7f4dd7..9abca3d 100644 --- a/src/mobile-config-autoconfig.js +++ b/src/mobile-config-autoconfig.js @@ -263,8 +263,31 @@ function css_files_update() { set_firefox_version_previous(g_ff_version); } +/** + * Builds a user-agent as similar to the default as possible, but with "Mobile" + * inserted into the platforms section. + * + * @returns {string} + */ +function build_user_agent() { + var appinfo = Services.appinfo; + var vendor = appinfo.vendor || "Mozilla"; + var os = appinfo.OS || "Linux"; + var version = get_firefox_version() + ".0"; + var name = appinfo.name || "Firefox"; + var arch = (appinfo.XPCOMABI && appinfo.XPCOMABI.includes("-")) + ? appinfo.XPCOMABI.split("-")[0] + : "aarch64"; + + return `${vendor}/5.0 (X11; ${os} ${arch}; Mobile; rv:${version}) Gecko/20100101 ${name}/${version}`; +} + function set_default_prefs() { log("Setting default preferences"); + + var user_agent = build_user_agent(); + defaultPref('general.useragent.override', user_agent); + // Do not suggest facebook, ebay, reddit etc. in the urlbar. Same as // Settings -> Privacy & Security -> Address Bar -> Shortcuts. As // side-effect, the urlbar results are not immediatelly opened once From 21163be169793fca4fbbaffe1ba595303a722aba Mon Sep 17 00:00:00 2001 From: Ulrik de Muelenaere Date: Mon, 4 Sep 2023 23:29:18 -0400 Subject: [PATCH 09/21] autoconfig: Fix error due to Services import in FF 117 (MR 36) Since Firefox 104 the Services global is available automatically and no longer needs to be imported, and since Firefox 117 importing it is an error. --- src/mobile-config-autoconfig.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mobile-config-autoconfig.js b/src/mobile-config-autoconfig.js index 9abca3d..97adaab 100644 --- a/src/mobile-config-autoconfig.js +++ b/src/mobile-config-autoconfig.js @@ -18,7 +18,7 @@ // https://web.archive.org/web/20201018211550/https://developer.mozilla.org/en-US/docs/Archive/Add-ons/Code_snippets/File_I_O const {classes: Cc, interfaces: Ci, utils: Cu} = Components; -Cu.import("resource://gre/modules/Services.jsm"); +const Services = globalThis.Services || Cu.import("resource://gre/modules/Services.jsm").Services; // for compatibility with FF < 104 Cu.import("resource://gre/modules/FileUtils.jsm"); var g_ff_version; From 9a34fe3e954486da10608486ace28d69a726d54a Mon Sep 17 00:00:00 2001 From: Ulrik de Muelenaere Date: Mon, 4 Sep 2023 23:33:53 -0400 Subject: [PATCH 10/21] userChrome/urlbar: Prevent urlbar from going past window bottom in FF 117 (MR 36) --- src/userChrome/urlbar.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/userChrome/urlbar.css b/src/userChrome/urlbar.css index d71fd30..4ad5cf7 100644 --- a/src/userChrome/urlbar.css +++ b/src/userChrome/urlbar.css @@ -82,6 +82,14 @@ #PersonalToolbar { display: none; } + + /* If the bookmarks toolbar is configured to only show on the new tab page, + * Firefox makes the toolbar overlap the browser. When it's then hidden by + * the rule above, the urlbar is pushed off the bottom of the window. To + * prevent this, set the height of the overlapped toolbar to 0. */ + :root { + --bookmarks-toolbar-overlapping-browser-height: 0 !important; + } } /* Even though amazon is removed as search engine in policies.json, it gets From 94cbe0452dc520ec8e8f8f62f4af40d3f24a53cf Mon Sep 17 00:00:00 2001 From: Ulrik de Muelenaere Date: Mon, 4 Sep 2023 23:57:41 -0400 Subject: [PATCH 11/21] userChrome/urlbar: Allow urlbar to shrink down to its min width (MR 37) This fixes one of the issues from #52, but I have not been able to reproduce the others on Phosh. --- src/userChrome/urlbar.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/userChrome/urlbar.css b/src/userChrome/urlbar.css index 4ad5cf7..2f94380 100644 --- a/src/userChrome/urlbar.css +++ b/src/userChrome/urlbar.css @@ -4,6 +4,7 @@ /* Reduce minimum window width */ #urlbar-container { min-width: 150px !important; + flex-shrink: 1 !important; } @media (max-width: 700px) { From 0187c6c605e08af76b7dbf10c58c833e8f168afc Mon Sep 17 00:00:00 2001 From: Oliver Smith Date: Tue, 12 Sep 2023 09:43:14 +0200 Subject: [PATCH 12/21] README: update supported versions Thanks to plata-gl for pointing this out. Fix #61. --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index b314381..372e29e 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@ # mobile-config-firefox -Mobile and privacy friendly configuration for Firefox >= 91. +Mobile and privacy friendly configuration for current standard and extended +support releases of Firefox. This does not replace a proper implementation in [Firefox upstream](https://bugzilla.mozilla.org/show_bug.cgi?id=1579348) From 4116b6663b32f67846a6ec3c37cfcfda896b889c Mon Sep 17 00:00:00 2001 From: plata Date: Mon, 11 Sep 2023 09:42:40 +0000 Subject: [PATCH 13/21] Hide minimize/maximize/close buttons (MR 39) --- src/userChrome/browser.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/userChrome/browser.css b/src/userChrome/browser.css index f4c628a..2110179 100644 --- a/src/userChrome/browser.css +++ b/src/userChrome/browser.css @@ -1,8 +1,8 @@ /* Copyright 2022 plata * SPDX-License-Identifier: MPL-2.0 */ -/* Move navigation bar to bottom */ @media (max-width: 700px) { + /* Move navigation bar to bottom */ #browser { -moz-box-ordinal-group: 0 !important; /* before FF 113 */ order: -1 !important; /* since FF 113 */ @@ -16,4 +16,9 @@ #TabsToolbar[inFullscreen] { display: none; } + + /* Hide minimize/maximize/close buttons */ + .titlebar-buttonbox-container { + display: none; + } } From a205c5fa6407ea53313e728f19e413a77ab39d51 Mon Sep 17 00:00:00 2001 From: Oliver Smith Date: Fri, 8 Sep 2023 09:51:45 +0200 Subject: [PATCH 14/21] autoconfig: set media.webrtc.camera.allow-pipewire (MR 38) As suggested by Robert Mader in issue 57, thanks. --- src/mobile-config-autoconfig.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/mobile-config-autoconfig.js b/src/mobile-config-autoconfig.js index 97adaab..5693847 100644 --- a/src/mobile-config-autoconfig.js +++ b/src/mobile-config-autoconfig.js @@ -309,6 +309,12 @@ function set_default_prefs() { // shows recently closed tabs. The always pinned tab takes up screen estate // and it's slightly annoying if you do not want to register an account. defaultPref('browser.tabs.firefox-view', false); + + // FF >= 116 allows to use cameras via Pipewire. While it will likely still + // take a while until this is made the default, on most mobile devices it + // makes a lot of sense to enable it unconditionally, as cameras usually + // only work with libcamera, not via plain v4l2. + defaultPref('media.webrtc.camera.allow-pipewire', true); } function main() { From e40b13098d8e5f9dfc40e027d67512c62b734fc9 Mon Sep 17 00:00:00 2001 From: Claudia Pellegrino Date: Sun, 12 Nov 2023 14:02:00 +0100 Subject: [PATCH 15/21] =?UTF-8?q?Start=20mirror=20of=20@user0=E2=80=99s=20?= =?UTF-8?q?contributions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 954cb0f..41524e6 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,22 @@ -# mobile-config-firefox +# Mobile-Friendly Firefox Customizations for Librem 5 (mirror) Mobile and privacy friendly configuration for Firefox >= 91. -This does not replace a proper implementation in +This **read-only mirror** is tracking all changes posted by `@user0` in the thread [Mobile-Friendly Firefox Customizations for Librem 5](https://forums.puri.sm/t/20313) on Purism’s forums. + +This repository is maintained by Claudia Pellegrino (`@claui`). + +As a read-only mirror, it’s not accepting pull requests. The code in this +repository also does not replace a proper implementation in [Firefox upstream](https://bugzilla.mozilla.org/show_bug.cgi?id=1579348) *(interesting stuff happens in issues linked in "References")*. +--- + +**Note:** Below follows a copy of the original `README.md` file from the upstream project [postmarketOS/mobile-config-firefox](https://gitlab.com/postmarketOS/mobile-config-firefox/). + +--- + ## What this config does * Adapt UI elements and "about:" pages to small screen sizes (when opened on From ad06da486870f5032bc74fd100f5fc4814106e1d Mon Sep 17 00:00:00 2001 From: "@user0" <> Date: Sun, 21 May 2023 09:50:32 +0200 Subject: [PATCH 16/21] =?UTF-8?q?Add=20@user0=E2=80=99s=20contributions=20?= =?UTF-8?q?as=20of=202023-05-21?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/userChrome/alt-browser.css | 43 +++ src/userChrome/appMenu.css | 29 +- src/userChrome/browser.css | 10 + src/userChrome/color_variable_template.css | 289 +++++++++++++++--- src/userChrome/colors.css | 154 ++++++++++ src/userChrome/custom_rules.css | 74 +++++ src/userChrome/findbar.css | 15 +- .../hide_newtab_+_new-tab_buttons.css | 10 + src/userChrome/hide_tabs_scrollbuttons.css | 86 +++--- src/userChrome/iconized_main_menu.css | 98 +++--- src/userChrome/new-tab-button.css | 14 + src/userChrome/numbered_tabs.css | 42 ++- src/userChrome/popups.css | 17 +- src/userChrome/round_ui_items.css | 86 ++++-- src/userChrome/single_tab_mode.css | 21 ++ .../single_tab_mode_with_space_for_1_item.css | 20 ++ ...single_tab_mode_with_space_for_2_items.css | 20 ++ ...single_tab_mode_with_space_for_3_items.css | 20 ++ .../tab_close_button_always_on_hover.css | 12 +- src/userChrome/tab_counter.css | 57 ++++ src/userChrome/tabmenu.css | 45 +-- src/userChrome/tabs_fill_available_width.css | 11 +- src/userChrome/tabs_larger_min-width.css | 4 + src/userChrome/userChrome-desktop.css | 61 ++++ src/userChrome/userChrome-hybrid.css | 61 ++++ src/userChrome/userChrome-mobile.css | 61 ++++ 26 files changed, 1180 insertions(+), 180 deletions(-) create mode 100644 src/userChrome/alt-browser.css create mode 100644 src/userChrome/colors.css create mode 100644 src/userChrome/custom_rules.css create mode 100644 src/userChrome/hide_newtab_+_new-tab_buttons.css create mode 100644 src/userChrome/new-tab-button.css create mode 100644 src/userChrome/single_tab_mode.css create mode 100644 src/userChrome/single_tab_mode_with_space_for_1_item.css create mode 100644 src/userChrome/single_tab_mode_with_space_for_2_items.css create mode 100644 src/userChrome/single_tab_mode_with_space_for_3_items.css create mode 100644 src/userChrome/tab_counter.css create mode 100644 src/userChrome/tabs_larger_min-width.css create mode 100644 src/userChrome/userChrome-desktop.css create mode 100644 src/userChrome/userChrome-hybrid.css create mode 100644 src/userChrome/userChrome-mobile.css diff --git a/src/userChrome/alt-browser.css b/src/userChrome/alt-browser.css new file mode 100644 index 0000000..5de7edc --- /dev/null +++ b/src/userChrome/alt-browser.css @@ -0,0 +1,43 @@ +/* Copyright 2022 plata + * SPDX-License-Identifier: MPL-2.0 */ + +/* Move navigation bar to bottom */ +@media (max-width: 700px) { + #browser { + -moz-box-ordinal-group: 0 !important; + } + + /* Hide navigation bar in kiosk mode (to prevent bug #29). We can assume FF + * is in kiosk mode when fullscreen and max-width conditions are met, + * because at this max-width the fullscreen button is hidden + * (see appMenu.css). */ + #nav-bar[inFullscreen], + #TabsToolbar[inFullscreen] { + display: none; + } + + /* https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/toolbars_below_content.css */ + #TabsToolbar > .titlebar-buttonbox-container { + display: none; + } + /* Fix panels sizing */ + .panel-viewstack { + max-height: unset !important; + } + /* Tabs below */ + #titlebar { + -moz-box-ordinal-group: 2; /* Fx <112 compatibility */ + order: 2; + } + + /* Adjust menu popup spawn height */ + #appMenu-popup { + margin-bottom: 20px !important; + } + + /* Adjust all-tabs popup spawn height */ + #customizationui-widget-panel { + margin-bottom: 60px !important; + } + +} diff --git a/src/userChrome/appMenu.css b/src/userChrome/appMenu.css index 9d966b7..a1e9e38 100644 --- a/src/userChrome/appMenu.css +++ b/src/userChrome/appMenu.css @@ -7,13 +7,20 @@ * height. This is due to the position="bottomcenter topright" attribute in * the HTML, which we can't override via CSS. */ #appMenu-popup { - margin-top: -390px !important; - height: 310px; - max-height: 310px; + /*margin-top: -390px !important;*/ + margin-bottom: 62px !important; + padding-left: 10px !important; + padding-right: 10px !important; + /*height: 310px;*/ + /*max-height: 310px;*/ + height: 330px; + max-height: 330px; } #appMenu-protonMainView vbox.panel-subview-body { - height: 300px !important; - max-height: 300px !important; + /*height: 300px !important;*/ + /*max-height: 300px !important;*/ + height: 318px !important; + max-height: 318px !important; } #appMenu-multiView box.panel-viewstack:first-child { /* Use the whole space in the menu, instead of slowly increasing the @@ -42,16 +49,16 @@ * are over the FF in fullscreen) */ #appMenu-fxa-status2, /* FF login */ #appMenu-fxa-separator, /* FF login */ - #appMenu-new-window-button2, + /*#appMenu-new-window-button2,*/ #appMenu-protonMainView toolbarseparator, /* all separators */ - #appMenu-save-file-button2, /* Save file can be done from Print too */ + /*#appMenu-save-file-button2, /* Save file can be done from Print too */ #appMenu-fullscreen-button2, #appMenu-passwords-button, /* accessible from settings */ - #appMenu-extensions-themes-button, /* accessible from settings */ + /*#appMenu-extensions-themes-button, /* accessible from settings */ #appMenu-bookmarks-button, /* submenu */ - #appMenu-history-button, /* submenu */ - #appMenu-more-button2, /* submenu */ - #appMenu-help-button2, /* submenu */ + /*#appMenu-history-button, /* submenu */ + /*#appMenu-more-button2, /* submenu */ + /*#appMenu-help-button2, /* submenu */ .subviewbutton[shortcut]::after { /* menu shortcuts ("Ctrl+T" etc.) */ display: none !important; } diff --git a/src/userChrome/browser.css b/src/userChrome/browser.css index feafa8f..ef9e0ff 100644 --- a/src/userChrome/browser.css +++ b/src/userChrome/browser.css @@ -15,4 +15,14 @@ #TabsToolbar[inFullscreen] { display: none; } + + /* https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/toolbars_below_content.css */ + #TabsToolbar > .titlebar-buttonbox-container { + display: none; + } + /* Fix panels sizing */ + .panel-viewstack { + max-height: unset !important; + } + } diff --git a/src/userChrome/color_variable_template.css b/src/userChrome/color_variable_template.css index d7d0f7c..2b790e7 100644 --- a/src/userChrome/color_variable_template.css +++ b/src/userChrome/color_variable_template.css @@ -2,47 +2,256 @@ See the above repository for updates as well as full license text. */ /* You should enable any non-default theme for these to apply properly. Built-in dark and light themes should work */ -:root{ - /* Popup panels */ - --arrowpanel-background: olive !important; - --arrowpanel-border-color: green !important; - --arrowpanel-color: cyan !important; - --arrowpanel-dimmed: rgba(0,0,0,0.4) !important; - /* window and toolbar background */ - --lwt-accent-color: red !important; - --lwt-accent-color-inactive: green !important; - --toolbar-bgcolor: rgba(0,0,0,0.4) !important; - /* tabs with system theme - text is not controlled by variable */ - --tab-selected-bgcolor: powderblue !important; - /* tabs with any other theme */ - --lwt-text-color: cyan !important; - --lwt-selected-tab-background-color: cornflowerblue !important; - /* toolbar area */ - --toolbarbutton-icon-fill: white !important; - --lwt-toolbarbutton-hover-background: orange !important; - --lwt-toolbarbutton-active-background: red !important; - /* urlbar */ - --toolbar-field-border-color: green !important; - --toolbar-field-focus-border-color: pink !important; - --urlbar-popup-url-color: cyan !important; - /* urlbar Firefox < 92 */ - --lwt-toolbar-field-background-color: olive !important; - --lwt-toolbar-field-focus: grey !important; - --lwt-toolbar-field-color: red !important; - --lwt-toolbar-field-focus-color: white !important; - /* urlbar Firefox 92+ */ - --toolbar-field-background-color: olive !important; - --toolbar-field-focus-background-color: grey !important; - --toolbar-field-color: red !important; - --toolbar-field-focus-color: white !important; - /* sidebar - note the sidebar-box rule for the header-area */ - --lwt-sidebar-background-color: purple !important; - --lwt-sidebar-text-color: yellow !important; +:root { + /* Popup panels */ + --arrowpanel-background: black !important; + --arrowpanel-border-color: #dc8add !important; + --arrowpanel-color: #dc8add !important; + --arrowpanel-dimmed: rgba(220,138,221,0.6) !important; + --arrowpanel-dimmed-further: rgba(220,138,221,0.3) !important; +/* + --panel-background: black !important; + --panel-border-color: #dc8add !important; + --panel-color: white !important; + --panel-separator-color: #dc8add !important; +*/ + --panel-item-hover-bgcolor: rgba(220,138,221,0.5) !important; + --panel-item-active-bgcolor: #dc8add !important; + --panel-banner-item-background-color: #dc8add !important; + --panel-banner-item-hover-bgcolor: #dc8add !important; + --panel-banner-item-active-bgcolor: #dc8add !important; + --panel-banner-item-update-supported-bgcolor: #dc8add !important; + --panel-banner-item-info-icon-bgcolor: #dc8add !important; + --panel-banner-item-color: #dc8add !important; + --panel-description-color: #dc8add !important; + --panel-disabled-color: rgba(220,138,221,0.6) !important; + --uc-menu-bkgnd: transparent !important; + --uc-menu-color: #dc8add !important; + --uc-menu-dimmed: #dc8add !important; + --uc-menu-disabled: #dc8add !important; + --menuitem-disabled-hover-background-color: #dc8add !important; + + /* window and toolbar background */ + --lwt-accent-color: #dc8add !important; + --lwt-accent-color-inactive: #e8b1e8 !important; + --toolbar-non-lwt-bgcolor: black !important; + --toolbar-non-lwt-textcolor: #dc8add !important; + --toolbar-bgcolor: black !important; + --toolbar-color: #dc8add !important; + --tabpanel-background-color: black !important; + + /* tabs with system theme - text is not controlled by variable */ + --tab-selected-bgcolor: #dc8add !important; + + /* tabs with any other theme */ + --lwt-text-color: white !important; + --lwt-selected-tab-background-color: #dc8add !important; + + /* toolbar area */ +/* + --toolbarbutton-icon-fill: #dc8add !important; +*/ + --toolbarbutton-icon-fill-attention: white !important; + --toolbarbutton-hover-background: #dc8add !important; + --toolbarbutton-active-background: #dc8add !important; + --lwt-toolbarbutton-icon-fill-attention: white !important; + --lwt-toolbarbutton-hover-background: #dc8add !important; + --lwt-toolbarbutton-active-background: #dc8add !important; + --toolbarseparator-color: black !important; + + /* urlbar */ + --toolbar-field-border-color: #dc8add !important; + --toolbar-field-focus-border-color: #dc8add !important; + --urlbar-popup-url-color: white !important; +/* + --urlbar-box-bgcolor: var(--button-bgcolor); + --urlbar-box-focus-bgcolor: var(--button-bgcolor); + --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor); + --urlbar-box-active-bgcolor: var(--button-active-bgcolor); + --urlbar-box-text-color: inherit; + --urlbar-box-hover-text-color: var(--urlbar-box-text-color); + --lwt-brighttext-url-color: #00ddff; +*/ + + /* urlbar Firefox < 92 */ + --lwt-toolbar-field-background-color: #dc8add !important; + --lwt-toolbar-field-focus: white !important; + --lwt-toolbar-field-color: white !important; + --lwt-toolbar-field-focus-color: white !important; + + /* urlbar Firefox 92+ */ + --toolbar-field-background-color: #dc8add !important; + --toolbar-field-focus-background-color: #dc8add !important; + --toolbar-field-icon-fill-attention: #dc8add !important; + --toolbar-field-color: white !important; + --toolbar-field-focus-color: white !important; + + /* sidebar - note the sidebar-box rule for the header-area */ + --lwt-sidebar-background-color: black !important; + --lwt-sidebar-text-color: black !important; + + /* findbar */ + --focus-outline-color: #dc8add !important; + --input-border-color: #dc8add !important; + +/* buttons and checkboxes */ +/* + --button-bgcolor: black !important; + --button-color: white !important; + --button-hover-bgcolor: #dc8add !important; + --button-active-bgcolor: #dc8add !important; +*/ + --button-primary-bgcolor: #dc8add !important; + --button-primary-hover-bgcolor: #dc8add !important; + --button-primary-active-bgcolor: #dc8add !important; + --button-primary-color: white !important; + --in-content-primary-button-background: #dc8add !important; + --in-content-primary-button-background-hover: #dc8add !important; + --in-content-primary-button-background-active: #dc8add !important; +/* + --buttons-destructive-bgcolor: #e22850; + --buttons-destructive-hover-bgcolor: #c50042; + --buttons-destructive-active-bgcolor: #810220; + --buttons-destructive-color: #fbfbfe; +*/ + --checkbox-unchecked-bgcolor: black !important; + --checkbox-unchecked-hover-bgcolor: black !important; + --checkbox-unchecked-active-bgcolor: black !important; + --checkbox-checked-border-color: transparent !important; + --checkbox-checked-bgcolor: #dc8add !important; + --checkbox-checked-color: white !important; + --checkbox-checked-hover-bgcolor: rgba(220,138,221,0.9) !important; + --checkbox-checked-active-bgcolor: rgba(220,138,221,0.9) !important; + --uc-checkbox-checked-bgcolor: #dc8add !important; + + /* icon glow */ + --uc-icon-glow-primary: #dc8add; + --uc-icon-glow-secondary: white; + --uc-icon-glow-hover-primary: #dc8add; + --uc-icon-glow-hover-secondary: white; } + /* line between nav-bar and tabs toolbar, - also fallback color for border around selected tab */ -#navigator-toolbox{ --lwt-tabs-border-color: cyan !important; } + also fallback color for border around selected tab */ +#navigator-toolbox { + --lwt-tabs-border-color: none !important; +} + /* Line above tabs */ -#tabbrowser-tabs{ --lwt-tab-line-color: white !important; } +#tabbrowser-tabs { + --lwt-tab-line-color: none !important; +} + /* the header-area of sidebar needs this to work */ -#sidebar-box{ --sidebar-background-color: purple !important; } +#sidebar-box { + --sidebar-background-color: black !important; +} + +/* (context_menus_more_proton.css) */ + +/* OPTIONAL Set custom context menu colors below */ + +menupopup:not(.in-menulist) { + --panel-background: black !important; + --panel-color: white !important; + --panel-separator-color: #dc8add !important; + --panel-border-color: #dc8add !important; +} +menupopup > menuseparator { + border-color: var(--panel-separator-color,ThreeDShadow) !important; +} + +menupopup { + --panel-item-hover-bgcolor: var(--button-hover-bgcolor) !important; +} +menupopup > menuitem, +menupopup > menu { + appearance: none !important; + background-color: transparent !important; +} + +#context-navigation > menuitem[_moz-menuactive]:not([disabled]) .menu-iconic-icon, +menupopup > menuitem[_moz-menuactive], +menupopup > menu[_moz-menuactive] { + background-color: var(--panel-border-color) !important; + color: var(--panel-color,inherit) !important; +} +menupopup > menuitem[disabled][_moz-menuactive], +menupopup > menu[disabled][_moz-menuactive] { + background-color: var(--menuitem-disabled-hover-background-color) !important; +} + +/* (dark_context_menus.css) */ + +panel richlistbox, +panel tree, +panel button, +panel menulist, +panel textbox, +panel input, +menupopup, +menu, +menuitem { + -moz-appearance: none !important; +} + +panel menulist { + border: 1px solid transparent; +} + +panel richlistbox, +panel tree, +panel button, +panel menulist, +panel textbox, +panel input, +panel #searchbar, +menupopup:not(#BMB_bookmarksPopup), +#main-menubar > menu > menupopup, +#context-navigation { + color: var(--uc-menu-color) !important; + background-color: var(--uc-menu-bkgnd) !important; + border-color: var(--uc-menu-disabled) !important; +} + +panel input { + background-color: rgba(0,0,0,0.1) !important; +} +panel #searchbar { + background-color: rgba(0,0,0,0.1) !important; + padding: 0 !important; +} +panel #searchbar input { + background-color: transparent !important; +} + +panel menulist:hover, +panel menulist[open] { + border-color: Highlight !important; +} + +#editBMPanel_folderMenuList > menupopup > menuitem { + color: var(--uc-menu-color) !important; +} + +panel treechildren::-moz-tree-row(selected), +panel button:hover, +menu:hover, +menu[_moz-menuactive], +menuitem:hover, +menuitem[_moz-menuactive] { + background-color: var(--uc-menu-dimmed) !important; color: var(--lwt-text-color) !important; +} +menu[open] { + background-color: transparent !important; color: inherit !important; +} + +menu[disabled="true"], +menuitem[disabled="true"] { + color: var(--uc-menu-disabled) !important; +} + +menu[disabled="true"]:hover, +menuitem[disabled="true"]:hover { + color: var(--lwt-text-color) !important; +} diff --git a/src/userChrome/colors.css b/src/userChrome/colors.css new file mode 100644 index 0000000..165a404 --- /dev/null +++ b/src/userChrome/colors.css @@ -0,0 +1,154 @@ +/* Various items color */ +arrowscrollbox, +findbar, +toolbar[type=menubar], +tooltip, +#TabsToolbar, +#navigator-toolbox, +#tabbrowser-arrowscrollbox { + background-color: var(--arrowpanel-background) !important; + color: var(--arrowpanel-color) !important; +} + +/* Tab throbber color */ +.tab-throbber[busy]::before { + fill: var(--lwt-text-color) !important; +} + +/* Inactive Tab throbber color */ +.tabbrowser-tab:not(:hover, [selected]) .tab-throbber[busy]::before { + fill: var(--lwt-accent-color) !important; +} + +/* Inactive tab color on hover */ +.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected]) { + background-color: var(--lwt-accent-color-inactive) !important; +} + +/* Inactive tab text and close button (x) color */ +.tab-text:not([selected]), +.tab-icon-image:not([selected]), +.tab-close-button:not([selected]) { + color: var(--lwt-accent-color) !important; +} + +/* Inactive tab text and close button (x) color on hover */ +.tabbrowser-tab:not([selected]):hover .tab-text, +.tabbrowser-tab:not([selected]):hover .tab-icon-image, +.tabbrowser-tab:not([selected]):hover .tab-close-button { + color: var(--lwt-text-color) !important; +} + +/* Tab text and close button (x) color */ +.tab-text, +.tab-icon-image, +.tab-close-button { + color: var(--lwt-text-color) !important; +} + +/* Tab close button (x) color on hover */ +.tab-close-button:hover, +.tab-close-button:not([selected]):hover { + background-color: var(--lwt-accent-color-inactive) !important; +} + +/* Container tab line color */ +.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line { + background-color: var(--tab-bgcolor) !important; +} + +/* Back button (←) color */ +#back-button > .toolbarbutton-icon { + border: none !important; + background-color: var(--arrowpanel-dimmed) !important; + background-image: none !important; +} + +/* Back button (←) color on hover */ +#back-button:not([disabled]):hover > .toolbarbutton-icon { + background-color: var(--lwt-accent-color) !important; + color: var(--lwt-text-color) !important; +} + +/* Forward button (→) color */ +#forward-button > .toolbarbutton-icon { + border: none !important; + background-color: unset !important; + background-image: none !important; +} + +/* Forward button (→) color on hover */ +#forward-button:not([disabled]):hover > .toolbarbutton-icon { + background-color: var(--lwt-accent-color) !important; + color: var(--lwt-text-color) !important; +} + +/* Urlbar color */ +*::selection { + background-color: var(--urlbar-popup-url-color) !important; + color: var(--lwt-accent-color) !important; +} +#nav-bar { + background-color: var(--arrowpanel-dimmed) !important; + background-image: linear-gradient(#0e0e0e,#0e0e0e) !important; +} +#urlbar:not([focused]) #urlbar-input-container { + filter: saturate(3); +} + +/* Bookmark button (★) post-animation color */ +#star-button, +#star-button[starred] { + color: var(--lwt-text-color) !important; +} + +/* "Saved to Library!" color */ +#confirmation-hint { + --arrowpanel-border-color: var(--lwt-accent-color) !important; + --arrowpanel-color: var(--lwt-text-color) !important; + --arrowpanel-background: var(--lwt-accent-color) !important; +} + +/* Navbar buttons color */ +#navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton)):hover:not([disabled]), +#navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton)):-moz-any(:hover:active, [checked], [open]):not([disabled]) { + color: var(--lwt-text-color) !important; +} + +/* Main menu button (≡) color on hover */ +.subviewbutton:hover { + background-color: var(--arrowpanel-color) !important; + color: var(--lwt-text-color) !important; +} + +/* Findbar color */ +.browserContainer > findbar { + border: none !important; + background-color: var(--toolbar-bgcolor) !important; + color: var(--toolbar-color) !important; + box-shadow: none !important; +} +input.findbar-textbox { + border: 1px solid var(--toolbar-color) !important; + background-color: var(--toolbar-bgcolor) !important; + color: var(--toolbar-color) !important; + box-shadow: 0 0 3px var(--toolbar-color) !important; +} +.findbar-find-previous, +.findbar-find-next { + border: none !important; + background-color: transparent !important; + color: var(--toolbar-color) !important; +} + +/* Status panel color */ +#statuspanel #statuspanel-inner { + border: none !important; + height: 23x !important; + background-color: transparent !important; +} +#statuspanel #statuspanel-label { + border: none !important; + background-color: var(--arrowpanel-background) !important; + color: var(--arrowpanel-color) !important; +} diff --git a/src/userChrome/custom_rules.css b/src/userChrome/custom_rules.css new file mode 100644 index 0000000..a4076c1 --- /dev/null +++ b/src/userChrome/custom_rules.css @@ -0,0 +1,74 @@ +/* custom rules */ + +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Remove Tab Manager button + (overridden by tab_counter.css) */ + #alltabs-button { + display: none !important; + } + + /* Remove tab overflow indicators */ + spacer[part=overflow-start-indicator], + spacer[part=overflow-end-indicator] { + display: none !important; + } + + /* Remove spacers on left and right of main tab view */ + #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { + margin-inline-start: 0px !important; + } + .titlebar-spacer[type="post-tabs"] { + display: none !important; + } + + /* Remove items from urlbar */ + #tracking-protection-icon-container, + #identity-permission-box, + #userContext-indicator, + #page-action-buttons { + display: none !important; + } + + /* Urlbar font resizing */ + #urlbar-input { + font-size: 10pt !important; + } + #urlbar[focused] #urlbar-input { + font-size: calc(var(--urlbar-height) - 9px) !important; + } + + /* Hide Inactive tab close button (x) + to prevent accidentally closing tabs when selecting them */ + .tab-close-button:not([selected]), + .tabbrowser-tab:not([selected]):hover .tab-close-button { + visibility: hidden !important; + } + + /* Disable tab loading burst + (because it's annoying) */ + .tab-loading-burst { + display: none !important; + } + + /* Tabs Toolbar and Container tab line color + (hides container tab line above tab by making it the same color as the Tabs Toolbar) */ + #TabsToolbar, + .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line { + background-color: var(--tab-bgcolor) !important; + } + + /* Menubar color + (hides the line at the top of the screen when Menubar is hidden) */ + toolbar[type=menubar] { + background-color: black !important; + color: var(--toolbar-color) !important; + } + + /* Navbar bottom border color */ + #navigator-toolbox { + border-bottom-color: black !important; + } + +} diff --git a/src/userChrome/findbar.css b/src/userChrome/findbar.css index 96805d5..462348a 100644 --- a/src/userChrome/findbar.css +++ b/src/userChrome/findbar.css @@ -6,7 +6,8 @@ display: flex; flex-direction: row; flex-wrap: wrap; - height: 150px !important; + /*height: 150px !important;*/ + height: 40px !important; } .findbar-textbox { @@ -19,4 +20,16 @@ * them with the finger. */ padding: 10px 0px; } + + /* Save space */ + .findbar-highlight, + .findbar-case-sensitive, + .findbar-match-diacritics, + .findbar-entire-word, + /*.found-matches,*/ + .findbar-find-status, + .find-status-icon { + display: none; + } + } diff --git a/src/userChrome/hide_newtab_+_new-tab_buttons.css b/src/userChrome/hide_newtab_+_new-tab_buttons.css new file mode 100644 index 0000000..7aec6ce --- /dev/null +++ b/src/userChrome/hide_newtab_+_new-tab_buttons.css @@ -0,0 +1,10 @@ +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Hide Newtab and New-tab buttons */ + #new-tab-button, + #tabs-newtab-button { + display: none !important; + } + +} diff --git a/src/userChrome/hide_tabs_scrollbuttons.css b/src/userChrome/hide_tabs_scrollbuttons.css index 9c65593..5612d60 100644 --- a/src/userChrome/hide_tabs_scrollbuttons.css +++ b/src/userChrome/hide_tabs_scrollbuttons.css @@ -3,63 +3,65 @@ See the above repository for updates as well as full license text. */ /* This should hide tabs scrollbuttons in a manner that preserves the ability to move tab strip when reordering tabs */ -#tabbrowser-arrowscrollbox{ - --uc-compat-scrollbutton-margin: 1px; /* compatibility for non_floating_sharp_tabs.css */ - --uc-scrollbutton-up-background: linear-gradient(-90deg,transparent,var(--lwt-accent-color) 35%); - --uc-scrollbutton-down-background: linear-gradient(90deg,transparent,var(--lwt-accent-color) 35%); +#tabbrowser-arrowscrollbox { + --uc-compat-scrollbutton-margin: 1px; /* compatibility for non_floating_sharp_tabs.css */ + --uc-scrollbutton-up-background: linear-gradient(-90deg,transparent,var(--lwt-accent-color) 35%); + --uc-scrollbutton-down-background: linear-gradient(90deg,transparent,var(--lwt-accent-color) 35%); } -#tabbrowser-tabs:not([movingtab]){ - --uc-scroll-visibility: hidden; +#tabbrowser-tabs:not([movingtab]) { + --uc-scroll-visibility: hidden; } -#tabbrowser-tabs[overflow]{ - --uc-scrollbox-base-margin: -31px; - --uc-scrollbox-margin: calc(var(--uc-scrollbox-base-margin) + var(--tab-shadow-max-size)); +#tabbrowser-tabs[overflow] { + --uc-scrollbox-base-margin: -31px; + --uc-scrollbox-margin: calc(var(--uc-scrollbox-base-margin) + var(--tab-shadow-max-size)); } -:root[uidensity="compact"] #tabbrowser-tabs[overflow]{ - --uc-scrollbox-base-margin: -25px; +:root[uidensity="compact"] #tabbrowser-tabs[overflow] { + --uc-scrollbox-base-margin: -25px; } -#tabbrowser-arrowscrollbox:not([scrolledtostart="true"]){ - --uc-scrollbox-overflow-start-margin: -1px; +#tabbrowser-arrowscrollbox:not([scrolledtostart="true"]) { + --uc-scrollbox-overflow-start-margin: -1px; } -#scrollbutton-up ~ spacer{ - visibility: visible !important; +#scrollbutton-up ~ spacer { + visibility: visible !important; } -spacer[part="overflow-start-indicator"]{ - -moz-box-ordinal-group: 0; /* Fx < 112 compatibility */ - order: -1; - margin-inline-start: var(--uc-scrollbox-overflow-start-margin,-0.5px) !important; +spacer[part="overflow-start-indicator"] { + -moz-box-ordinal-group: 0; /* Fx < 112 compatibility */ + order: -1; + margin-inline-start: var(--uc-scrollbox-overflow-start-margin,-0.5px) !important; } -spacer[part="overflow-end-indicator"]{ - -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */ - order: 2; +spacer[part="overflow-end-indicator"] { + -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */ + order: 2; } #scrollbutton-down[disabled="true"] > .toolbarbutton-icon, -#scrollbutton-up[disabled="true"] > .toolbarbutton-icon{ - opacity: 0.4; -} +#scrollbutton-up[disabled="true"] > .toolbarbutton-icon { + opacity: 0.4; +} #scrollbutton-up, -#scrollbutton-down{ - position: relative; - z-index: 1; - visibility: var(--uc-scroll-visibility,visible); - background-clip: border-box !important; - background-origin: initial !important; - background-repeat: no-repeat !important; - opacity: 1 !important; +#scrollbutton-down { + position: relative; + z-index: 1; + visibility: var(--uc-scroll-visibility,visible); + background-clip: border-box !important; + background-origin: initial !important; + background-repeat: no-repeat !important; + opacity: 1 !important; } -#scrollbutton-up{ - margin-inline-start: calc(0px - var(--tab-shadow-max-size,0px)) !important; - background-image: var(--uc-scrollbutton-up-background); +#scrollbutton-up { + margin-inline-start: calc(0px - var(--tab-shadow-max-size,0px)) !important; + background-image: var(--uc-scrollbutton-up-background); } -#scrollbutton-down{ - margin-inline-end: calc(0px - var(--tab-shadow-max-size,0px)) !important; - background-image: var(--uc-scrollbutton-down-background); +#scrollbutton-down { + margin-inline-end: calc(0px - var(--tab-shadow-max-size,0px)) !important; + background-image: var(--uc-scrollbutton-down-background); +} +.scrollbox-clip { + margin-inline: var(--uc-scrollbox-margin,0px); } -.scrollbox-clip{ margin-inline: var(--uc-scrollbox-margin,0px); } /* Need to reset some things for other scrollboxes */ -.menupopup-arrowscrollbox{ - --tab-shadow-max-size: 0; +.menupopup-arrowscrollbox { + --tab-shadow-max-size: 0; } diff --git a/src/userChrome/iconized_main_menu.css b/src/userChrome/iconized_main_menu.css index d419a90..990516f 100644 --- a/src/userChrome/iconized_main_menu.css +++ b/src/userChrome/iconized_main_menu.css @@ -3,43 +3,73 @@ See the above repository for updates as well as full license text. */ /* Adds icons to main menu items which were removed in Proton */ #appMenu-fxa-status2[fxastatus] > toolbarbutton::before, -#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image{ - fill: currentColor; - -moz-context-properties: fill; - margin-inline: 0 8px !important; +#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image { + fill: currentColor; + -moz-context-properties: fill; + margin-inline: 0 8px !important; +} +#appMenu-new-tab-button2 { + list-style-image: url("chrome://browser/skin/new-tab.svg"); +} +#appMenu-new-window-button2 { + list-style-image: url("chrome://browser/skin/window.svg"); +} +#appMenu-new-private-window-button2 { + list-style-image: url("chrome://browser/skin/privateBrowsing.svg"); +} +#appMenu-bookmarks-button { + list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); +} +#appMenu-history-button { + list-style-image: url("chrome://browser/skin/history.svg"); +} +#appMenu-downloads-button { + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} +#appMenu-passwords-button { + list-style-image: url("chrome://browser/skin/login.svg"); +} +#appMenu-extensions-themes-button { + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); +} +#appMenu-print-button2 { + list-style-image: url("chrome://global/skin/icons/print.svg"); +} +#appMenu-save-file-button2 { + list-style-image: url("chrome://browser/skin/save.svg"); +} +#appMenu-find-button2 { + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); +} +#appMenu-settings-button { + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} +#appMenu-more-button2 { + list-style-image: url("chrome://global/skin/icons/developer.svg"); +} +#appMenu-help-button2 { + list-style-image: url("chrome://global/skin/icons/info.svg"); +} +#appMenu-quit-button2 { + list-style-image: url("chrome://devtools/skin/images/search-clear.svg"); } -#appMenu-new-tab-button2{ list-style-image: url("chrome://browser/skin/new-tab.svg") } -#appMenu-new-window-button2{ list-style-image: url("chrome://browser/skin/window.svg") } -#appMenu-new-private-window-button2{ list-style-image: url("chrome://browser/skin/privateBrowsing.svg") } -#appMenu-bookmarks-button{ list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg") } -#appMenu-history-button{ list-style-image: url("chrome://browser/skin/history.svg") } -#appMenu-downloads-button{ list-style-image: url("chrome://browser/skin/downloads/downloads.svg") } -#appMenu-passwords-button{ list-style-image: url("chrome://browser/skin/login.svg") } -#appMenu-extensions-themes-button{ list-style-image: url("chrome://mozapps/skin/extensions/extension.svg") } -#appMenu-print-button2{ list-style-image: url("chrome://global/skin/icons/print.svg") } -#appMenu-save-file-button2{ list-style-image: url("chrome://browser/skin/save.svg") } -#appMenu-find-button2{ list-style-image: url("chrome://global/skin/icons/search-glass.svg") } -#appMenu-settings-button{ list-style-image: url("chrome://global/skin/icons/settings.svg") } -#appMenu-more-button2{ list-style-image: url("chrome://global/skin/icons/developer.svg") } -#appMenu-help-button2{ list-style-image: url("chrome://global/skin/icons/info.svg") } -#appMenu-quit-button2{ list-style-image: url("chrome://devtools/skin/images/search-clear.svg") } /* Use account-button icon for signed in sync item */ -#appMenu-fxa-status2[fxastatus] > toolbarbutton::before{ - display: flex; - content: ""; - width: 16px; - height: 16px; - background-image: var(--avatar-image-url) +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { + display: flex; + content: ""; + width: 16px; + height: 16px; + background-image: var(--avatar-image-url); } /* Add somewhat hacky separator to zoom controls so it looks consistent */ -#appMenu-protonMainView > .panel-subview-body::after{ - content: ""; - display: flex; - border-bottom: 1px solid var(--panel-separator-color); - margin: var(--panel-separator-margin); +#appMenu-protonMainView > .panel-subview-body::after { + content: ""; + display: flex; + border-bottom: 1px solid var(--panel-separator-color); + margin: var(--panel-separator-margin); } -#appMenu-find-button2 ~ *{ - -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */ - order: 2; -} \ No newline at end of file +#appMenu-find-button2 ~ * { + -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */ + order: 2; +} diff --git a/src/userChrome/new-tab-button.css b/src/userChrome/new-tab-button.css new file mode 100644 index 0000000..5b50563 --- /dev/null +++ b/src/userChrome/new-tab-button.css @@ -0,0 +1,14 @@ +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Hide non-overflow Newtab button */ + #tabs-newtab-button { + display: none !important; + } + + /* Display overflow New-tab button by default */ + #new-tab-button { + display: initial !important; + } + +} diff --git a/src/userChrome/numbered_tabs.css b/src/userChrome/numbered_tabs.css index 0710e7d..33852a9 100644 --- a/src/userChrome/numbered_tabs.css +++ b/src/userChrome/numbered_tabs.css @@ -1,7 +1,43 @@ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/numbered_tabs.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ -/* Show a number before tab text*/ +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { -.tabbrowser-tab:first-child{ counter-reset: nth-tab 0 } /* Change to -1 for 0-indexing */ -.tab-text::before{ content: counter(nth-tab) " "; counter-increment: nth-tab } \ No newline at end of file + /* Show a number before tab text */ + /* Actually, let's show the tab number after tab content, right-align it, + and fix its position directly on the tab close button */ + #tabbrowser-tabs { + counter-reset: nth-tab 0; /* Change to -1 for 0-indexing */ + } + .tabbrowser-tab:not([pinned]) .tab-content::after { + content: counter(nth-tab) " "; + counter-increment: nth-tab; + position: absolute !important; + position: fixed; + right: 24px; + top: 12px; + width: 0 !important; + } + + /* Shorten tab content width so that tab number is more visible */ + .tabbrowser-tab[selected]:not(:hover,[pinned]) > .tab-stack > .tab-content { + width: calc(100vw - 150px) !important; + } + + /* Hide tab number when hovering so that tab close button is clickable */ + .tabbrowser-tab:not([pinned]):hover .tab-content::after { + visibility: hidden !important; + } + + /* Adjust tab close button opacity, border, and shape */ + .tab-close-button { + position: absolute !important; + margin-right: -8px !important; + opacity: 0.5 !important; + border: 2px solid white !important; + height: 36px !important; + width: 36px !important; + } + +} diff --git a/src/userChrome/popups.css b/src/userChrome/popups.css index 09c253b..eb40c72 100644 --- a/src/userChrome/popups.css +++ b/src/userChrome/popups.css @@ -6,8 +6,10 @@ * the notifications (like the one for installing addons) displayed * on-screen. */ #notification-popup { - margin-left: -200px !important; + /*margin-left: -200px !important;*/ margin-top: -500px !important; + height: calc(100vh - 250px) !important; + max-width: 100vw !important; } #downloadsPanel-mainView { @@ -42,8 +44,8 @@ max-width: 100vw !important; } - /* fix the protections popup gettting - * too wide, making controls unaccessible */ + /* fix the protections popup getting + * too wide, making controls naccessible */ #protections-popup-mainView { min-width: 100vw !important; max-width: 100vw !important; @@ -57,4 +59,13 @@ #widget-overflow-mainView { height: calc(100vh - 80px) !important; } + + /* Fix widget overflow to fit ublock0_raymondhill_net-browser-action */ + #widget-overflow { + padding-bottom: 25px !important; + } + #widget-overflow-mainView { + height: 357px !important; + } + } diff --git a/src/userChrome/round_ui_items.css b/src/userChrome/round_ui_items.css index 2ecbab6..d6e760e 100644 --- a/src/userChrome/round_ui_items.css +++ b/src/userChrome/round_ui_items.css @@ -3,10 +3,13 @@ See the above repository for updates as well as full license text. */ /* Make bunch of things in the main UI round */ -:root{ --toolbarbutton-border-radius: 24px !important } +:root { + --toolbarbutton-border-radius: 12px !important; + --tab-border-radius: 14px !important; +} #urlbar-input-container > box:hover, #urlbar-input-container > box[open], -#main-menubar > menu, +#main-menubar > menu, .titlebar-button:hover, #scrollbutton-up, #scrollbutton-down, @@ -19,29 +22,74 @@ See the above repository for updates as well as full license text. */ .subviewbutton-back, .toolbaritem-combined-buttons > toolbarbutton, #PopupSearchAutoComplete, -menupopup{ border-radius: 18px } +menupopup { + border-radius: 10px; +} button, -.tab-background{ border-radius: 30px !important; } +.tab-background { + border-radius: 14px !important; +} -.panel-arrowcontent{ margin-inline-end: 0 !important; } -.panel-arrow{ margin-inline: 17px !important; } +.panel-arrowcontent { + margin-inline-end: 0 !important; +} +.panel-arrow { + margin-inline: 17px !important; +} -menupopup{ -moz-appearance: none !important; overflow: -moz-hidden-unscrollable !important; } +menupopup { + -moz-appearance: none !important; + overflow: -moz-hidden-unscrollable !important; +} .tabbrowser-tab[selected]::after, -.tabbrowser-tab[beforeselected-visible]::after{ border-color: transparent !important; } - -#nav-bar{ box-shadow: none !important; margin-top: 3px } -.tab-line{ display: none } - -.tab-background[selected]{ - border-top-width: 2px !important; - border-top-color: var(--lwt-tab-line-color) !important; +.tabbrowser-tab[beforeselected-visible]::after { + border-color: transparent !important; } -.tabbrowser-tab[selected]{ z-index: auto !important; } -.urlbar-icon, -toolbar toolbarbutton:not(#back-button):not(.bookmark-item):not(.titlebar-button) > .toolbarbutton-icon{ border-radius: 0px !important; clip-path: circle() } +#nav-bar { + box-shadow: none !important; + margin-top: 3px; +} +.tab-line { + display: none; +} -menugroup:hover > menuitem{ clip-path: circle() } \ No newline at end of file +.tab-background[selected] { + border-top-width: 3px !important; + border-bottom-width: 3px !important; + border-left-width: 3px !important; + border-right-width: 3px !important; + border-radius: 14px !important; +} +.tabbrowser-tab[selected] { + z-index: auto !important; +} + +/*.urlbar-icon, +toolbar toolbarbutton:not(#back-button):not(.bookmark-item):not(.titlebar-button) > .toolbarbutton-icon { + border-radius: 12px !important; +}*/ + +menugroup:hover > menuitem { + border-radius: 16px !important; +} + +/* Urlbar and searchbar shape */ +#urlbar, +#searchbar, +#urlbar-input, +#urlbar-input-container { + border-radius: 12px !important; +} +#urlbar-background { + border: none !important; + border-radius: 12px !important; +} + +/* Findbar shape */ +input.findbar-textbox { + border-radius: 9px !important; + font-size: 14px !important; +} diff --git a/src/userChrome/single_tab_mode.css b/src/userChrome/single_tab_mode.css new file mode 100644 index 0000000..5740de2 --- /dev/null +++ b/src/userChrome/single_tab_mode.css @@ -0,0 +1,21 @@ +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Hide unpinned inactive tabs */ + .tabbrowser-tab:not([pinned]):not([selected]) { + visibility: hidden !important; + min-width: 0 !important; + } + + /* Expand unpinned active tab */ + .tabbrowser-tab:not([pinned])[selected] { + min-width: 100vw !important; + } + + /* Hide Newtab and New-tab buttons */ + #new-tab-button, + #tabs-newtab-button { + display: none !important; + } + +} diff --git a/src/userChrome/single_tab_mode_with_space_for_1_item.css b/src/userChrome/single_tab_mode_with_space_for_1_item.css new file mode 100644 index 0000000..56366f4 --- /dev/null +++ b/src/userChrome/single_tab_mode_with_space_for_1_item.css @@ -0,0 +1,20 @@ +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Hide unpinned inactive tabs */ + .tabbrowser-tab:not([pinned]):not([selected]) { + visibility: hidden !important; + min-width: 0 !important; + } + + /* Expand first unpinned tab */ + #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { + max-width: 100vw !important; + } + + /* Expand unpinned active tab */ + .tabbrowser-tab:not([pinned])[selected] { + min-width: calc(100vw - 40px) !important; + } + +} diff --git a/src/userChrome/single_tab_mode_with_space_for_2_items.css b/src/userChrome/single_tab_mode_with_space_for_2_items.css new file mode 100644 index 0000000..52086e1 --- /dev/null +++ b/src/userChrome/single_tab_mode_with_space_for_2_items.css @@ -0,0 +1,20 @@ +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Hide unpinned inactive tabs */ + .tabbrowser-tab:not([pinned]):not([selected]) { + visibility: hidden !important; + min-width: 0 !important; + } + + /* Expand first unpinned tab */ + #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { + max-width: 100vw !important; + } + + /* Expand unpinned active tab */ + .tabbrowser-tab:not([pinned])[selected] { + min-width: calc(100vw - 80px) !important; + } + +} diff --git a/src/userChrome/single_tab_mode_with_space_for_3_items.css b/src/userChrome/single_tab_mode_with_space_for_3_items.css new file mode 100644 index 0000000..32dec54 --- /dev/null +++ b/src/userChrome/single_tab_mode_with_space_for_3_items.css @@ -0,0 +1,20 @@ +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Hide unpinned inactive tabs */ + .tabbrowser-tab:not([pinned]):not([selected]) { + visibility: hidden !important; + min-width: 0 !important; + } + + /* Expand first unpinned tab */ + #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { + max-width: 100vw !important; + } + + /* Expand unpinned active tab */ + .tabbrowser-tab:not([pinned])[selected] { + min-width: calc(100vw - 120px) !important; + } + +} diff --git a/src/userChrome/tab_close_button_always_on_hover.css b/src/userChrome/tab_close_button_always_on_hover.css index 22add02..d80bd77 100644 --- a/src/userChrome/tab_close_button_always_on_hover.css +++ b/src/userChrome/tab_close_button_always_on_hover.css @@ -2,10 +2,10 @@ See the above repository for updates as well as full license text. */ /* Always show tab close button on hover and never otherwise */ -.tabbrowser-tab .tab-close-button{ - display:none; +.tabbrowser-tab .tab-close-button { + display: none; +} +.tabbrowser-tab:not([pinned]):hover .tab-close-button { + display: flex !important; + align-items: center; } -.tabbrowser-tab:not([pinned]):hover .tab-close-button{ - display: flex !important; - align-items: center; -} \ No newline at end of file diff --git a/src/userChrome/tab_counter.css b/src/userChrome/tab_counter.css new file mode 100644 index 0000000..7d853d2 --- /dev/null +++ b/src/userChrome/tab_counter.css @@ -0,0 +1,57 @@ +/* Source from reddit users /u/BatDogOnBatMobile, /u/moko1960, and /u/It_Was_The_Other_Guy + https://teddit.net/r/FirefoxCSS/comments/s4wsww/ + https://teddit.net/r/FirefoxCSS/comments/yb8tr9/ */ + +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Show Tab Manager button even when tabs aren't overflowing - + can instead use browser.tabs.tabmanager.enabled;true as well + or skip this part if you want to retain the default behaviour */ + #alltabs-button { + display: -moz-box !important; + } + + /* Tab Manager button (v) tab counter */ + #TabsToolbar-customization-target { + counter-reset: tabCount; + } + .tabbrowser-tab:not([pinned]) { + counter-increment: tabCount; + } + #alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + position: relative !important; + } + #alltabs-button > .toolbarbutton-badge-stack::before { + content: counter(tabCount); + border-bottom: 1px solid var(--toolbarbutton-icon-fill); + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: var(--toolbarbutton-inner-padding); + left: 50%; + transform: translateX(-50%); + padding: 0 3px; + } + + /* Tab Manager menu tab counter */ + #allTabsMenu-allTabsViewTabs { + counter-reset: nn_tabs 0 !important; + } + .all-tabs-button::before { + display: -moz-inline-box !important; + -moz-padding-end: 8px !important; + content: counter(nn_tabs) !important; + /*font-weight: bold !important; */ + font-size: 12px !important; + margin-top: -2px !important; + margin-right: -2px !important; + } + .all-tabs-item { + counter-increment: nn_tabs !important; + } + +} diff --git a/src/userChrome/tabmenu.css b/src/userChrome/tabmenu.css index ec6d0ed..d71053a 100644 --- a/src/userChrome/tabmenu.css +++ b/src/userChrome/tabmenu.css @@ -6,7 +6,7 @@ * the tab bar for the private-browsing-indicator (that mask icon). This * gives the tab bar a consistent width in both the regular and the private * browsing mode, so the increased width hack below looks good in both. */ - #titlebar { + /*#titlebar { padding-right: 30px; } hbox.private-browsing-indicator { @@ -14,24 +14,25 @@ right: 0px; bottom: 50px; display: block; - } + }*/ /* Increase tab width, to have more space for displaying the title of the * website and to make the "all tabs" button show up. */ - #tabbrowser-tabs { + /*#tabbrowser-tabs { --tab-min-width: calc(100vw - 116px) !important; - } + }*/ /* Rotate the arrow on the "all tabs" button to point upwards, since the * tabs and searchbar were moved to the bottom. */ - #alltabs-button { + /*#alltabs-button { transform: rotate(180deg) !important; - } + }*/ /* All tabs menu: hide scroll buttons */ - #scrollbutton-up, #scrollbutton-down { + /*#scrollbutton-up, + #scrollbutton-down { display: none !important; - } + }*/ /* All tabs menu: hide the search and the separator below it. */ #allTabsMenu-searchTabs, @@ -45,27 +46,32 @@ /* Further up than appmenu, because the "all tabs" button that spawns * this menu is above the hamburger button that spawns the regular * menu. */ - margin-top: -360px !important; - height: 320px; - max-height: 320px; + /*margin-top: -360px !important;*/ + margin-bottom: 15px !important; + padding-left: 10px !important; + padding-right: 10px !important; + /*height: 320px;*/ + /*max-height: 320px;*/ + height: 333px; + max-height: 333px; } - #allTabsMenu-allTabsView vbox.panel-subview-body { + /*#allTabsMenu-allTabsView vbox.panel-subview-body { /* Use the whole height */ - height: 300px !important; - max-height: 300px !important; + /*height: 300px !important; + /*max-height: 300px !important; /* When messing around with tabs, it gets into a state where it does * not use the whole height anymore, it becomes a tiny window. Removing * this attribute fixes it. */ - -moz-box-flex: initial !important; - } + /*-moz-box-flex: initial !important; + }*/ - #allTabsMenu-allTabsView vbox.panel-subview-body:first-child { + /*#allTabsMenu-allTabsView vbox.panel-subview-body:first-child { /* the allTabsMenu has a vbox.panel-subview-body inside another one. * With -moz-box-flex: initial, it will show a scroll bar in each, but * we only want one scrollbar. */ - overflow-y: hidden !important; - } + /*overflow-y: hidden !important; + }*/ #allTabsMenu-multiView box.panel-viewstack { /* Use the whole height */ @@ -75,6 +81,7 @@ #allTabsMenu-allTabsViewTabs { /* Make sure tabs with long titles don't exceed the all tabs menu */ + width: 0; max-width: calc(100vw - 20px); } } diff --git a/src/userChrome/tabs_fill_available_width.css b/src/userChrome/tabs_fill_available_width.css index f7a3094..cc6fe4b 100644 --- a/src/userChrome/tabs_fill_available_width.css +++ b/src/userChrome/tabs_fill_available_width.css @@ -1,5 +1,12 @@ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_fill_available_width.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ -/* Why 100vw? Tab closing requires width animation to end and "none" can't be animated */ -.tabbrowser-tab[fadein]:not([style^="max-width"]){ max-width: 100vw !important } \ No newline at end of file +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Why 100vw? Tab closing requires width animation to end and "none" can't be animated */ + .tabbrowser-tab[fadein]:not([style^="max-width"]) { + max-width: 100vw !important; + } + +} diff --git a/src/userChrome/tabs_larger_min-width.css b/src/userChrome/tabs_larger_min-width.css new file mode 100644 index 0000000..56c91d6 --- /dev/null +++ b/src/userChrome/tabs_larger_min-width.css @@ -0,0 +1,4 @@ +/* Tab min-width resizing */ +#tabbrowser-tabs .tabbrowser-tab[fadein]:not([pinned]) { + min-width: 90px !important; +} diff --git a/src/userChrome/userChrome-desktop.css b/src/userChrome/userChrome-desktop.css new file mode 100644 index 0000000..f711893 --- /dev/null +++ b/src/userChrome/userChrome-desktop.css @@ -0,0 +1,61 @@ +/* Source files available here: + https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip + https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/ + https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313 + +*/ + +/* +@import "color_variable_template.css"; + +@import "colors.css"; +*/ +@import "appMenu.css"; + +@import "browser.css"; + +@import "editBookmarkPanel.css"; + +@import "findbar.css"; + +@import "popups.before-ff-108.css"; + +@import "popups.css"; + +@import "root.css"; + +@import "tabmenu.css"; + +@import "urlbar.css"; + +@import "alt-browser.css"; + +@import "custom_rules.css"; + +@import "hide_tabs_scrollbuttons.css"; + +@import "tab_close_button_always_on_hover.css"; + +@import "iconized_main_menu.css"; +/* +@import "round_ui_items.css"; + +@import "single_tab_mode.css"; + +@import "single_tab_mode_with_space_for_1_item.css"; + +@import "single_tab_mode_with_space_for_2_items.css"; + +@import "single_tab_mode_with_space_for_3_items.css"; + +@import "hide_newtab_+_new-tab_buttons.css"; + +@import "numbered_tabs.css"; + +@import "tab_counter.css"; +*/ +@import "new-tab-button.css"; + +@import "tabs_larger_min-width.css"; + +@import "tabs_fill_available_width.css"; diff --git a/src/userChrome/userChrome-hybrid.css b/src/userChrome/userChrome-hybrid.css new file mode 100644 index 0000000..62e591d --- /dev/null +++ b/src/userChrome/userChrome-hybrid.css @@ -0,0 +1,61 @@ +/* Source files available here: + https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip + https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/ + https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313 + +*/ + +/* +@import "color_variable_template.css"; + +@import "colors.css"; +*/ +@import "appMenu.css"; + +@import "browser.css"; + +@import "editBookmarkPanel.css"; + +@import "findbar.css"; + +@import "popups.before-ff-108.css"; + +@import "popups.css"; + +@import "root.css"; + +@import "tabmenu.css"; + +@import "urlbar.css"; + +@import "alt-browser.css"; + +@import "custom_rules.css"; + +@import "hide_tabs_scrollbuttons.css"; + +@import "tab_close_button_always_on_hover.css"; + +@import "iconized_main_menu.css"; + +@import "round_ui_items.css"; +/* +@import "single_tab_mode.css"; + +@import "single_tab_mode_with_space_for_1_item.css"; + +@import "single_tab_mode_with_space_for_2_items.css"; + +@import "single_tab_mode_with_space_for_3_items.css"; +*/ +@import "hide_newtab_+_new-tab_buttons.css"; +/* +@import "numbered_tabs.css"; +*/ +@import "tab_counter.css"; +/* +@import "new-tab-button.css"; +*/ +@import "tabs_larger_min-width.css"; + +@import "tabs_fill_available_width.css"; diff --git a/src/userChrome/userChrome-mobile.css b/src/userChrome/userChrome-mobile.css new file mode 100644 index 0000000..92ca4a9 --- /dev/null +++ b/src/userChrome/userChrome-mobile.css @@ -0,0 +1,61 @@ +/* Source files available here: + https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip + https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/ + https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313 +*/ + +/* +@import "color_variable_template.css"; + +@import "colors.css"; +*/ +@import "appMenu.css"; + +@import "browser.css"; + +@import "editBookmarkPanel.css"; + +@import "findbar.css"; + +@import "popups.before-ff-108.css"; + +@import "popups.css"; + +@import "root.css"; + +@import "tabmenu.css"; + +@import "urlbar.css"; + +@import "alt-browser.css"; + +@import "custom_rules.css"; + +@import "hide_tabs_scrollbuttons.css"; + +@import "tab_close_button_always_on_hover.css"; + +@import "iconized_main_menu.css"; + +@import "round_ui_items.css"; +/* +@import "single_tab_mode.css"; + +@import "single_tab_mode_with_space_for_1_item.css"; +*/ +@import "single_tab_mode_with_space_for_2_items.css"; +/* +@import "single_tab_mode_with_space_for_3_items.css"; + +@import "hide_newtab_+_new-tab_buttons.css"; +*/ +@import "numbered_tabs.css"; + +@import "tab_counter.css"; +/* +@import "new-tab-button.css"; + +@import "tabs_larger_min-width.css"; + +@import "tabs_fill_available_width.css"; +*/ From b436b28843201dc9a1adec570f5ac5c879e7f597 Mon Sep 17 00:00:00 2001 From: "@user0" <> Date: Mon, 22 May 2023 21:17:11 +0200 Subject: [PATCH 17/21] =?UTF-8?q?Add=20@user0=E2=80=99s=20contributions=20?= =?UTF-8?q?as=20of=202023-05-22?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/userChrome/numbered_tabs.css | 5 ----- src/userChrome/single_tab_mode.css | 5 +++++ src/userChrome/single_tab_mode_with_space_for_1_item.css | 5 +++++ src/userChrome/single_tab_mode_with_space_for_2_items.css | 5 +++++ src/userChrome/single_tab_mode_with_space_for_3_items.css | 5 +++++ 5 files changed, 20 insertions(+), 5 deletions(-) diff --git a/src/userChrome/numbered_tabs.css b/src/userChrome/numbered_tabs.css index 33852a9..43fdbec 100644 --- a/src/userChrome/numbered_tabs.css +++ b/src/userChrome/numbered_tabs.css @@ -20,11 +20,6 @@ See the above repository for updates as well as full license text. */ width: 0 !important; } - /* Shorten tab content width so that tab number is more visible */ - .tabbrowser-tab[selected]:not(:hover,[pinned]) > .tab-stack > .tab-content { - width: calc(100vw - 150px) !important; - } - /* Hide tab number when hovering so that tab close button is clickable */ .tabbrowser-tab:not([pinned]):hover .tab-content::after { visibility: hidden !important; diff --git a/src/userChrome/single_tab_mode.css b/src/userChrome/single_tab_mode.css index 5740de2..c3908f8 100644 --- a/src/userChrome/single_tab_mode.css +++ b/src/userChrome/single_tab_mode.css @@ -12,6 +12,11 @@ min-width: 100vw !important; } + /* Shorten tab content width so that tab number is more visible */ + .tabbrowser-tab[selected]:not(:hover,[pinned]) > .tab-stack > .tab-content { + width: calc(100vw - 30px) !important; + } + /* Hide Newtab and New-tab buttons */ #new-tab-button, #tabs-newtab-button { diff --git a/src/userChrome/single_tab_mode_with_space_for_1_item.css b/src/userChrome/single_tab_mode_with_space_for_1_item.css index 56366f4..c52e0c1 100644 --- a/src/userChrome/single_tab_mode_with_space_for_1_item.css +++ b/src/userChrome/single_tab_mode_with_space_for_1_item.css @@ -17,4 +17,9 @@ min-width: calc(100vw - 40px) !important; } + /* Shorten tab content width so that tab number is more visible */ + .tabbrowser-tab[selected]:not(:hover,[pinned]) > .tab-stack > .tab-content { + width: calc(100vw - 70px) !important; + } + } diff --git a/src/userChrome/single_tab_mode_with_space_for_2_items.css b/src/userChrome/single_tab_mode_with_space_for_2_items.css index 52086e1..425b2d3 100644 --- a/src/userChrome/single_tab_mode_with_space_for_2_items.css +++ b/src/userChrome/single_tab_mode_with_space_for_2_items.css @@ -17,4 +17,9 @@ min-width: calc(100vw - 80px) !important; } + /* Shorten tab content width so that tab number is more visible */ + .tabbrowser-tab[selected]:not(:hover,[pinned]) > .tab-stack > .tab-content { + width: calc(100vw - 110px) !important; + } + } diff --git a/src/userChrome/single_tab_mode_with_space_for_3_items.css b/src/userChrome/single_tab_mode_with_space_for_3_items.css index 32dec54..2480250 100644 --- a/src/userChrome/single_tab_mode_with_space_for_3_items.css +++ b/src/userChrome/single_tab_mode_with_space_for_3_items.css @@ -17,4 +17,9 @@ min-width: calc(100vw - 120px) !important; } + /* Shorten tab content width so that tab number is more visible */ + .tabbrowser-tab[selected]:not(:hover,[pinned]) > .tab-stack > .tab-content { + width: calc(100vw - 150px) !important; + } + } From 53808dc807556db5bccc9e3979e234c2d3e9566b Mon Sep 17 00:00:00 2001 From: "@user0" <> Date: Mon, 14 Aug 2023 21:34:16 +0200 Subject: [PATCH 18/21] =?UTF-8?q?Add=20@user0=E2=80=99s=20contributions=20?= =?UTF-8?q?as=20of=202023-08-14?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/userChrome/alt-browser.css | 21 +++-- src/userChrome/appMenu.css | 1 - src/userChrome/browser.css | 21 +++++ src/userChrome/popups.css | 5 +- src/userChrome/tabmenu.css | 3 +- src/userChrome/urlbar.css | 2 +- src/userContent/theme-color-1.css | 95 ++++++++++++++++++++++ src/userContent/theme-color-2.css | 95 ++++++++++++++++++++++ src/userContent/theme-dark.css | 128 ++++++++++++++++++++++++++++++ src/userContent/theme-light.css | 15 ++++ 10 files changed, 374 insertions(+), 12 deletions(-) create mode 100644 src/userContent/theme-color-1.css create mode 100644 src/userContent/theme-color-2.css create mode 100644 src/userContent/theme-dark.css create mode 100644 src/userContent/theme-light.css diff --git a/src/userChrome/alt-browser.css b/src/userChrome/alt-browser.css index 5de7edc..dc6aade 100644 --- a/src/userChrome/alt-browser.css +++ b/src/userChrome/alt-browser.css @@ -30,14 +30,25 @@ order: 2; } - /* Adjust menu popup spawn height */ - #appMenu-popup { - margin-bottom: 20px !important; + /* Adjust Bookmarks Menu Popup spawn height and fix flickering */ + #BMB_bookmarksPopup { + margin-bottom: 22px !important; + width: 100vw; } - /* Adjust all-tabs popup spawn height */ + /* Adjust Widget Overflow spawn height */ + #widget-overflow { + padding-bottom: 30px !important; + } + + /* Adjust App Menu Popup spawn height */ + #appMenu-popup { + margin-bottom: 26px !important; + } + + /* Adjust All-Tabs Popup spawn height */ #customizationui-widget-panel { - margin-bottom: 60px !important; + margin-bottom: 66px !important; } } diff --git a/src/userChrome/appMenu.css b/src/userChrome/appMenu.css index a1e9e38..15f5b40 100644 --- a/src/userChrome/appMenu.css +++ b/src/userChrome/appMenu.css @@ -8,7 +8,6 @@ * the HTML, which we can't override via CSS. */ #appMenu-popup { /*margin-top: -390px !important;*/ - margin-bottom: 62px !important; padding-left: 10px !important; padding-right: 10px !important; /*height: 310px;*/ diff --git a/src/userChrome/browser.css b/src/userChrome/browser.css index ef9e0ff..e84c874 100644 --- a/src/userChrome/browser.css +++ b/src/userChrome/browser.css @@ -25,4 +25,25 @@ max-height: unset !important; } + /* Adjust Bookmarks Menu Popup spawn height and fix flickering */ + #BMB_bookmarksPopup { + margin-bottom: 52px !important; + width: 100vw; + } + + /* Adjust Widget Overflow spawn height */ + #widget-overflow { + padding-bottom: 60px !important; + } + + /* Adjust App Menu Popup spawn height */ + #appMenu-popup { + margin-bottom: 56px !important; + } + + /* Adjust All-Tabs Popup spawn height */ + #customizationui-widget-panel { + margin-bottom: 20px !important; + } + } diff --git a/src/userChrome/popups.css b/src/userChrome/popups.css index eb40c72..f4a14fd 100644 --- a/src/userChrome/popups.css +++ b/src/userChrome/popups.css @@ -60,10 +60,7 @@ height: calc(100vh - 80px) !important; } - /* Fix widget overflow to fit ublock0_raymondhill_net-browser-action */ - #widget-overflow { - padding-bottom: 25px !important; - } + /* fix widget overflow to fit ublock0_raymondhill_net-browser-action */ #widget-overflow-mainView { height: 357px !important; } diff --git a/src/userChrome/tabmenu.css b/src/userChrome/tabmenu.css index d71053a..298c334 100644 --- a/src/userChrome/tabmenu.css +++ b/src/userChrome/tabmenu.css @@ -47,7 +47,6 @@ * this menu is above the hamburger button that spawns the regular * menu. */ /*margin-top: -360px !important;*/ - margin-bottom: 15px !important; padding-left: 10px !important; padding-right: 10px !important; /*height: 320px;*/ @@ -83,5 +82,7 @@ /* Make sure tabs with long titles don't exceed the all tabs menu */ width: 0; max-width: calc(100vw - 20px); + /* Fix padding */ + padding-top: 2px !important; } } diff --git a/src/userChrome/urlbar.css b/src/userChrome/urlbar.css index d71fd30..da669a1 100644 --- a/src/userChrome/urlbar.css +++ b/src/userChrome/urlbar.css @@ -19,7 +19,7 @@ /* #back-button */ #forward-button, /* #reload-button */ - #home-button, + /*#home-button,*/ #customizableui-special-spring1, /* (urlbar) */ #customizableui-special-spring2, diff --git a/src/userContent/theme-color-1.css b/src/userContent/theme-color-1.css new file mode 100644 index 0000000..9757e61 --- /dev/null +++ b/src/userContent/theme-color-1.css @@ -0,0 +1,95 @@ +@-moz-document url("about:addons"), +url("about:blank"), +url("about:config"), +url("about:home"), +url("about:newtab"), +url("about:preferences"), +url("about:privatebrowsing"), +url("about:profiles") { + :root { + --card-outline-color: #dc8add !important; + --card-shadow: var(--shadow-10); + --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color); + --checkbox-border-color: var(--in-content-box-border-color); + --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active); + --checkbox-checked-bgcolor: var(--in-content-primary-button-background); + --checkbox-checked-border-color: transparent; + --checkbox-checked-color: var(--in-content-primary-button-text-color); + --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover); + --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active); + --checkbox-unchecked-bgcolor: var(--in-content-button-background); + --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover); + --dialog-warning-text-color: #dc8add !important; + --in-content-accent-color: #dc8add !important; + --in-content-accent-color-active: #dc8add !important; + --in-content-border-color: #dc8add !important; + --in-content-border-active: #dc8add !important; + --in-content-border-active-shadow: #dc8add !important; + --in-content-border-hover: #dc8add !important; + --in-content-border-invalid: #dc8add !important; + --in-content-box-background: black !important; + --in-content-box-background-active: rgba(220,138,221,0.6) !important; + --in-content-box-background-hover: rgba(220,138,221,0.4) !important; + --in-content-box-background-odd: black !important; + --in-content-box-border-color: #dc8add !important; + --in-content-box-info-background: black !important; + --in-content-button-background: rgba(220,138,221,0.5) !important; + --in-content-button-background-active: rgba(220,138,221,0.4) !important; + --in-content-button-background-hover: rgba(220,138,221,0.6) !important; + --in-content-button-border-color: #dc8add !important; + --in-content-button-border-color-active: #dc8add !important; + --in-content-button-border-color-hover: #dc8add !important; + --in-content-button-text-color: #dc8add !important; + --in-content-button-text-color-active: #dc8add !important; + --in-content-button-text-color-hover: white !important; + --in-content-category-background: rgba(220,138,221,0.5) !important; + --in-content-category-background-hover: rgba(220,138,221,0.5) !important; + --in-content-category-background-selected: rgba(220,138,221,0.4) !important; + --in-content-category-background-selected-hover: rgba(220,138,221,0.5) !important; + --in-content-category-text: #dc8add !important; + --in-content-category-text-selected: #dc8add !important; + --in-content-danger-button-background: #dc8add !important; + --in-content-danger-button-background-active: #dc8add !important; + --in-content-danger-button-background-hover: #dc8add !important; + --in-content-deemphasized-text: #dc8add !important; + --in-content-error-text-color: #dc8add !important; + --in-content-focus-outline-color: #dc8add !important; + --in-content-icon-color: #dc8add !important; + --in-content-item-hover: #dc8add !important; + --in-content-item-hover-text: white !important; + --in-content-item-selected: #dc8add !important; + --in-content-item-selected-text: white !important; + --in-content-link-color: #dc8add !important; + --in-content-link-color-active: #dc8add !important; + --in-content-link-color-hover: #dc8add !important; + --in-content-link-color-visited: #dc8add !important; + --in-content-page-background: black !important; + --in-content-page-color: #dc8add !important; + --in-content-primary-button-background: rgba(220,138,221,0.666) !important; + --in-content-primary-button-background-active: rgba(220,138,221,0.666) !important; + --in-content-primary-button-background-hover: black !important; + --in-content-primary-button-border-color: #dc8add !important; + --in-content-primary-button-border-hover: #dc8add !important; + --in-content-primary-button-text-color: white !important; + --in-content-primary-button-text-color-hover: white !important; + --in-content-selected-text: #dc8add !important; + --in-content-table-background: black !important; + --in-content-table-border-color: #dc8add !important; + --in-content-table-border-dark-color: #dc8add !important; + --in-content-table-header-background: rgba(220,138,221,0.5) !important; + --in-content-table-header-color: #dc8add !important; + --in-content-text-color: #dc8add !important; + --in-content-warning-container: rgba(220,138,221,0.3) !important; + --shadow-10: 0 1px 4px #dc8add !important; + --shadow-30: 0 4px 16px #dc8add !important; + color: #dc8add !important; + } + ::selection { + background: #dc8add !important; + color: white !important; + } + #prefs>tr:hover { + background-color: rgba(220,138,221,0.6) !important; + color: #dc8add !important; + } +} diff --git a/src/userContent/theme-color-2.css b/src/userContent/theme-color-2.css new file mode 100644 index 0000000..c791df4 --- /dev/null +++ b/src/userContent/theme-color-2.css @@ -0,0 +1,95 @@ +@-moz-document url("about:addons"), +url("about:blank"), +url("about:config"), +url("about:home"), +url("about:newtab"), +url("about:preferences"), +url("about:privatebrowsing"), +url("about:profiles") { + :root { + --card-outline-color: #dc8add !important; + --card-shadow: var(--shadow-10); + --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color); + --checkbox-border-color: var(--in-content-box-border-color); + --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active); + --checkbox-checked-bgcolor: var(--in-content-primary-button-background); + --checkbox-checked-border-color: var(--in-content-box-border-color); + --checkbox-checked-color: var(--in-content-primary-button-text-color); + --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover); + --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active); + --checkbox-unchecked-bgcolor: var(--in-content-button-background); + --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover); + --dialog-warning-text-color: #dc8add !important; + --in-content-accent-color: #dc8add !important; + --in-content-accent-color-active: white !important; + --in-content-border-color: #dc8add !important; + --in-content-border-active: #dc8add !important; + --in-content-border-active-shadow: #dc8add !important; + --in-content-border-hover: #dc8add !important; + --in-content-border-invalid: #dc8add !important; + --in-content-box-background: black !important; + --in-content-box-background-active: #dc8add !important; + --in-content-box-background-hover: #dc8add !important; + --in-content-box-background-odd: black !important; + --in-content-box-border-color: #dc8add !important; + --in-content-box-info-background: black !important; + --in-content-button-background: black !important; + --in-content-button-background-active: #dc8add !important; + --in-content-button-background-hover: #dc8add !important; + --in-content-button-border-color: #dc8add !important; + --in-content-button-border-color-active: #dc8add !important; + --in-content-button-border-color-hover: #dc8add !important; + --in-content-button-text-color: #dc8add !important; + --in-content-button-text-color-active: white !important; + --in-content-button-text-color-hover: white !important; + --in-content-category-background: black !important; + --in-content-category-background-hover: #dc8add !important; + --in-content-category-background-selected: #dc8add !important; + --in-content-category-background-selected-hover: #dc8add !important; + --in-content-category-text: white !important; + --in-content-category-text-selected: white !important; + --in-content-danger-button-background: #dc8add !important; + --in-content-danger-button-background-active: #dc8add !important; + --in-content-danger-button-background-hover: #dc8add !important; + --in-content-deemphasized-text: #dc8add !important; + --in-content-error-text-color: #dc8add !important; + --in-content-focus-outline-color: #dc8add !important; + --in-content-icon-color: #dc8add !important; + --in-content-item-hover: #dc8add !important; + --in-content-item-hover-text: white !important; + --in-content-item-selected: #dc8add !important; + --in-content-item-selected-text: white !important; + --in-content-link-color: #dc8add !important; + --in-content-link-color-active: #dc8add !important; + --in-content-link-color-hover: #dc8add !important; + --in-content-link-color-visited: #dc8add !important; + --in-content-page-background: black !important; + --in-content-page-color: #dc8add !important; + --in-content-primary-button-background: #dc8add !important; + --in-content-primary-button-background-active: #dc8add !important; + --in-content-primary-button-background-hover: black !important; + --in-content-primary-button-border-color: #dc8add !important; + --in-content-primary-button-border-hover: #dc8add !important; + --in-content-primary-button-text-color: white !important; + --in-content-primary-button-text-color-hover: white !important; + --in-content-selected-text: white !important; + --in-content-table-background: black !important; + --in-content-table-border-color: #dc8add !important; + --in-content-table-border-dark-color: #dc8add !important; + --in-content-table-header-background: black !important; + --in-content-table-header-color: #dc8add !important; + --in-content-text-color: #dc8add !important; + --in-content-warning-container: black !important; + --shadow-10: 0 1px 4px #dc8add !important; + --shadow-30: 0 4px 16px #dc8add !important; + color: #dc8add !important; + } + ::selection { + background: #dc8add !important; + color: white !important; + } + #prefs>tr:hover { + background-color: #dc8add !important; + color: white !important; + } +} diff --git a/src/userContent/theme-dark.css b/src/userContent/theme-dark.css new file mode 100644 index 0000000..ccfc126 --- /dev/null +++ b/src/userContent/theme-dark.css @@ -0,0 +1,128 @@ +@-moz-document url("about:addons"), +url("about:blank"), +url("about:config"), +url("about:home"), +url("about:newtab"), +url("about:preferences"), +url("about:privatebrowsing"), +url("about:profiles") { + body { + background-color:black!important + } + a,a:visited,a:hover { + color:black!important + } + #categories > .category[selected], + #categories > .category.selected { + color: white !important; + } + checkbox:not([disabled="true"]):hover > .checkbox-check, + input[type="checkbox"]:not(:disabled):hover { + border-color: white !important; + } + radio:not([disabled="true"]):hover > .radio-check { + border-color: white !important; + } + .text-link { + color: white !important; + } + .content-blocking-category.selected { + border: 1px solid white !important; + background-color: rgba(255,255,255,0.4) !important; + } + .content-blocking-category { + border: 1px solid var(--in-content-border-color) !important; + background-color: rgba(255,255,255,0.2) !important; /* bkg of default unselected*/ + } + .content-blocking-warning { + background-color: rgba(255,255,255,0.3) !important; + } + .checkbox-check{ + fill: white !important; + } + .radio-check{ + fill: white !important; + } + .addon-card:not([expanded]) > .addon.card:hover { + box-shadow: white !important; + } + .card { + border: 1px solid white !important; + } + :root { + --card-outline-color: white !important; + --in-content-border-color: white !important; + --in-content-border-active: white !important; + --in-content-border-active-shadow: white !important; + --in-content-border-hover: white !important; + --in-content-box-background: black !important; + --in-content-box-background-active: rgba(255,255,255,0.6) !important; + --in-content-box-background-hover: rgba(255,255,255,0.4) !important; + --in-content-box-border-color: white !important; + --in-content-box-info-background: black !important; + --in-content-button-background: rgba(255,255,255,0.5) !important; + --in-content-button-background-active: rgba(255,255,255,0.4) !important; + --in-content-button-background-hover: rgba(255,255,255,0.6) !important; + --in-content-category-background: rgba(255,255,255,0.5) !important; + --in-content-category-background-hover: rgba(255,255,255,0.5) !important; + --in-content-category-background-selected: rgba(255,255,255,0.4) !important; + --in-content-category-background-selected-hover: rgba(255,255,255,0.5) !important; + --in-content-category-text: white !important; + --in-content-category-text-selected: white !important; + --in-content-page-background: black !important; + --in-content-selected-text: white !important; + --in-content-table-background: black !important; + --in-content-table-border-dark-color: white !important; + --in-content-table-header-background: rgba(255,255,255,0.5) !important; + --in-content-text-color: white !important; + --in-content-warning-container: rgba(255,255,255,0.3) !important; + --shadow-10: 0 1px 4px white !important; + --shadow-30: 0 4px 16px white !important; + color: white !important; + } +} +:root { + --card-outline-color: white !important; + --in-content-box-background: black !important; + --in-content-page-background: black !important; + --in-content-text-color: white !important; + --shadow-10: 0 1px 4px white !important; + --shadow-30: 0 4px 16px white !important; + color: white !important; +} +.card { + border: 1px solid white !important; +} +#learnMoreLink { + color: white !important; +} +#errorCode { + color: white !important; +} +#viewCertificate { + color: white !important; +} +#advancedButton { + color: white !important; + background-color: rgba(0,62,170,1) !important; +} +#advancedButton:hover { + color: white !important; + background-color: rgba(0,62,170,0.7) !important; +} +#advancedButton:active { + color: white !important; + background-color: rgba(0,62,170,0.5) !important; +} +#exceptionDialogButton { + color: white !important; + background-color: rgba(0,62,170,1) !important; +} +#exceptionDialogButton:hover { + color: white !important; + background-color: rgba(0,62,170,0.7) !important; +} +#exceptionDialogButton:active { + color: white !important; + background-color: rgba(0,62,170,0.5) !important; +} diff --git a/src/userContent/theme-light.css b/src/userContent/theme-light.css new file mode 100644 index 0000000..b3166be --- /dev/null +++ b/src/userContent/theme-light.css @@ -0,0 +1,15 @@ +@-moz-document url("about:addons"), +url("about:blank"), +url("about:config"), +url("about:home"), +url("about:newtab"), +url("about:preferences"), +url("about:privatebrowsing"), +url("about:profiles") { + body { + background-color:rgb(249, 249, 255)!important + } + a,a:visited,a:hover { + color:rgb(249, 249, 255)!important + } +} From eda407cae9f26d266aab0c2fa5f566adc9c33370 Mon Sep 17 00:00:00 2001 From: Claudia Pellegrino Date: Sun, 12 Nov 2023 22:33:27 +0100 Subject: [PATCH 19/21] Remove unused userContent files --- src/userContent/addons.css | 8 ----- src/userContent/config.css | 37 ---------------------- src/userContent/home.css | 18 ----------- src/userContent/license.css | 11 ------- src/userContent/logins.css | 24 -------------- src/userContent/policies.css | 11 ------- src/userContent/preferences.css | 23 -------------- src/userContent/protections.css | 49 ----------------------------- src/userContent/reader.css | 55 --------------------------------- src/userContent/rights.css | 11 ------- src/userContent/sidebar.css | 42 ------------------------- 11 files changed, 289 deletions(-) delete mode 100644 src/userContent/addons.css delete mode 100644 src/userContent/config.css delete mode 100644 src/userContent/home.css delete mode 100644 src/userContent/license.css delete mode 100644 src/userContent/logins.css delete mode 100644 src/userContent/policies.css delete mode 100644 src/userContent/preferences.css delete mode 100644 src/userContent/protections.css delete mode 100644 src/userContent/reader.css delete mode 100644 src/userContent/rights.css delete mode 100644 src/userContent/sidebar.css diff --git a/src/userContent/addons.css b/src/userContent/addons.css deleted file mode 100644 index faabfdc..0000000 --- a/src/userContent/addons.css +++ /dev/null @@ -1,8 +0,0 @@ -/* Copyright 2022 Anri Dellal - * SPDX-License-Identifier: MPL-2.0 */ - -@-moz-document url("about:addons"), url-prefix("about:addons") { - :root { - --section-width: min(664px, 100%) !important; - } -} diff --git a/src/userContent/config.css b/src/userContent/config.css deleted file mode 100644 index 5e767cd..0000000 --- a/src/userContent/config.css +++ /dev/null @@ -1,37 +0,0 @@ -/* Copyright 2022 Anri Dellal - * SPDX-License-Identifier: MPL-2.0 */ - -@-moz-document url("about:config") { - #search-container, - #toolbar, #prefs { - min-width: 300px !important; - } - - @media (max-width: 644px) { - #toolbar { - flex-direction: column; - } - - #about-config-search { - max-width: 100%; - } - - #prefs { - word-wrap: anywhere; - } - - .checkbox-container { - margin-top: 5px; - } - } - - @media (max-width: 500px) { - tr { - font-size: 12px; - } - - th { - padding-left: 8px !important; - } - } -} diff --git a/src/userContent/home.css b/src/userContent/home.css deleted file mode 100644 index 697e7bd..0000000 --- a/src/userContent/home.css +++ /dev/null @@ -1,18 +0,0 @@ -/* Copyright 2022 Oliver Smith - * SPDX-License-Identifier: MPL-2.0 */ - -@namespace url("http://www.w3.org/1999/xhtml"); - -@-moz-document url("about:home"), url("about:blank"), url("about:newtab") { - @media (max-width: 700px) { - - .outer-wrapper.only-search { - padding-top: 50px !important; - } - - .customize-menu { - width: 100% !important; - } - - } -} diff --git a/src/userContent/license.css b/src/userContent/license.css deleted file mode 100644 index f7db008..0000000 --- a/src/userContent/license.css +++ /dev/null @@ -1,11 +0,0 @@ -/* Copyright 2022 Anri Dellal - * SPDX-License-Identifier: MPL-2.0 */ - -@-moz-document url("about:license") { - @media (max-width: 500px) { - .license-header { - background-image: none !important; - padding-inline-end: unset !important; - } - } -} diff --git a/src/userContent/logins.css b/src/userContent/logins.css deleted file mode 100644 index 7e5fb24..0000000 --- a/src/userContent/logins.css +++ /dev/null @@ -1,24 +0,0 @@ -/* Copyright 2022 Anri Dellal - * SPDX-License-Identifier: MPL-2.0 */ - -@-moz-document url("about:logins") { - .container { - min-width: 300px !important; - } - - @media (max-width: 700px) { - body { - --sidebar-width: 200px !important; - grid-template-columns: var(--sidebar-width) 1fr !important; - } - - .edit-button, .delete-button { - font-size: 0 !important; - background-position: center; - } - - #branding-logo { - display: none; - } - } -} diff --git a/src/userContent/policies.css b/src/userContent/policies.css deleted file mode 100644 index 24c92fd..0000000 --- a/src/userContent/policies.css +++ /dev/null @@ -1,11 +0,0 @@ -/* Copyright 2022 Anri Dellal - * SPDX-License-Identifier: MPL-2.0 */ - -@-moz-document url("about:policies"), url-prefix("about:policies") { - @media (max-width: 830px) { - tbody.collapsible td, - .active-policies td { - word-wrap: anywhere; - } - } -} diff --git a/src/userContent/preferences.css b/src/userContent/preferences.css deleted file mode 100644 index aeffa99..0000000 --- a/src/userContent/preferences.css +++ /dev/null @@ -1,23 +0,0 @@ -/* Copyright 2022 Anri Dellal - * SPDX-License-Identifier: MPL-2.0 */ - -@-moz-document regexp("about:preferences.*") { - .sticky-container { - display: flex; - } - - #policies-container { - display: none; - } - - /* #sync page */ - .fxaMobilePromo { - display: none; - } - - @media (max-width: 700px) { - .fxaSyncIllustration { - display: none; - } - } -} diff --git a/src/userContent/protections.css b/src/userContent/protections.css deleted file mode 100644 index bb7e872..0000000 --- a/src/userContent/protections.css +++ /dev/null @@ -1,49 +0,0 @@ -/* Copyright 2022 Anri Dellal - * SPDX-License-Identifier: MPL-2.0 */ - -@-moz-document url("about:protections") { - #report-content { - width: calc(100% - 16px) !important; - max-width: 800px !important; - } - - /* hide element with Firefox for Android and iOS ad */ - .lockwise-card .card-body, - #mobile-hanger { - display: none !important; - } - - @media (max-width: 800px) { - #report-content { - margin: 16px 8px !important; - } - - .icon { - width: 32px !important; - height: 32px !important; - } - - .body-wrapper { - /* make trackers report to fill the entire card width */ - grid-column-start: 1 !important; - grid-column-end: -1 !important; - } - - #manage-protections, - #sign-up-for-monitor-link, - #save-passwords-button, - #get-proxy-extension-link { - /* move button on a separate row */ - grid-area: 2 / 1 / 2 / 6 !important; - } - - .card-header .wrapper { - grid-row-gap: 8px !important; - } - - .card:not(.has-logins) .wrapper div:nth-child(1) { - /* make card title to use more width */ - grid-column-end: -1 !important; - } - } -} diff --git a/src/userContent/reader.css b/src/userContent/reader.css deleted file mode 100644 index 916254d..0000000 --- a/src/userContent/reader.css +++ /dev/null @@ -1,55 +0,0 @@ -/* Copyright 2022 Tim Magee - * SPDX-License-Identifier: MPL-2.0 */ - -@-moz-document url-prefix("about:reader") { - @media (max-width: 800px) { - .toolbar-container { - margin-inline-start: 0px !important; - position: fixed !important; - top: 0px !important; - height: 74px !important; - width: 100% !important; - left: 0px !important; - background-color: rgba(255,255,255,1); - } - - .dark .toolbar-container { - background-color: rgba(3,3,3,1); - } - - .sepia .toolbar-container { - background-color: rgba(244,236,216,1); - } - - .toolbar { - margin-inline-start: unset !important; - width: unset !important; - } - - .dropdown li { - display: inline !important; - } - - .dropdown { - display: inline; - } - - body { - padding: 74px 0px !important; - margin: 15px 15px 0px !important; - --content-width: unset !important; - } - - .header > h1 { - margin: 10px 0 !important; - } - - .header > .meta-data { - margin: 0 0 5px !important; - } - - .header > .credits { - margin: 0 0 5px !important; - } - } -} diff --git a/src/userContent/rights.css b/src/userContent/rights.css deleted file mode 100644 index 5bfd91a..0000000 --- a/src/userContent/rights.css +++ /dev/null @@ -1,11 +0,0 @@ -/* Copyright 2022 Anri Dellal - * SPDX-License-Identifier: MPL-2.0 */ - -@-moz-document url("about:rights") { - @media (max-width: 500px) { - .rights-header { - background-image: none !important; - padding-inline-end: unset !important; - } - } -} diff --git a/src/userContent/sidebar.css b/src/userContent/sidebar.css deleted file mode 100644 index 80c5d62..0000000 --- a/src/userContent/sidebar.css +++ /dev/null @@ -1,42 +0,0 @@ -/* Copyright 2022 plata, Anri Dellal - * SPDX-License-Identifier: MPL-2.0 */ - -@-moz-document regexp("about:(preferences|addons|policies).*") { - .category-icon { - user-select: none !important; - } - - @media (max-width: 700px) { - /* avoid that sidebar is too wide */ - :root { - --in-content-sidebar-width: 50px !important; - --sidebar-width: 50px !important; - } - - /* reduce space around category icons */ - #categories > .category { - margin-inline-start: auto !important; - padding-inline: auto !important; - } - - .category-name { - display: none !important; - } - - /* reduce space around footer icons (addons, help) */ - .sidebar-footer-list { - margin-inline: auto !important; - padding-inline: auto !important; - } - - .sidebar-footer-label { - display: none !important; - } - } - - @media (max-height: 400px) { - #categories { - margin-top: 8px !important; - } - } -} From 4f58859466fa18d31ead2a1cc3734c985c13f003 Mon Sep 17 00:00:00 2001 From: "@user0" <@user0> Date: Sat, 30 Sep 2023 20:41:00 +0200 Subject: [PATCH 20/21] =?UTF-8?q?Add=20@user0=E2=80=99s=20contributions=20?= =?UTF-8?q?as=20of=202023-09-30?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/userChrome/alt-browser.css | 24 +++++-- .../borderless_transparent_active_tab.css | 12 ++++ src/userChrome/browser.css | 19 +++-- src/userChrome/colorful_inactive_tabs.css | 31 ++++++++ src/userChrome/colors.css | 5 +- src/userChrome/custom_rules.css | 11 +-- src/userChrome/glow.css | 44 ++++++++++++ .../hide_newtab_+_new-tab_buttons.css | 3 + src/userChrome/hide_tab_counter.css | 12 ++++ src/userChrome/new-tab-button.css | 3 + src/userChrome/numbered_tabs.css | 11 ++- src/userChrome/popups.css | 5 +- src/userChrome/single_tab_mode.css | 58 ++++++++++++--- .../single_tab_mode_with_space_for_1_item.css | 31 +++++--- ...single_tab_mode_with_space_for_2_items.css | 31 +++++--- ...single_tab_mode_with_space_for_3_items.css | 25 ------- src/userChrome/tab_animated_active_border.css | 59 ++++++++------- src/userChrome/tab_counter.css | 7 +- src/userChrome/tabmenu.css | 10 +-- src/userChrome/tabs_larger_min-width.css | 7 +- src/userChrome/true_mobile_mode.css | 49 +++++++++++++ src/userChrome/userChrome-desktop.css | 21 ++++-- src/userChrome/userChrome-hybrid.css | 21 ++++-- .../userChrome-mobile+color+glow+rainbow.css | 71 ++++++++++++++++++ src/userChrome/userChrome-mobile.css | 27 ++++--- .../userChrome-true-mobile+color+glow.css | 72 +++++++++++++++++++ .../userChrome-true-mobile+color.css | 72 +++++++++++++++++++ src/userChrome/userChrome-true-mobile.css | 72 +++++++++++++++++++ src/userContent/theme-color-1.css | 3 + src/userContent/theme-color-2.css | 3 + src/userContent/theme-dark.css | 3 + src/userContent/theme-light.css | 3 + 32 files changed, 696 insertions(+), 129 deletions(-) create mode 100644 src/userChrome/borderless_transparent_active_tab.css create mode 100644 src/userChrome/colorful_inactive_tabs.css create mode 100644 src/userChrome/glow.css create mode 100644 src/userChrome/hide_tab_counter.css delete mode 100644 src/userChrome/single_tab_mode_with_space_for_3_items.css create mode 100644 src/userChrome/true_mobile_mode.css create mode 100644 src/userChrome/userChrome-mobile+color+glow+rainbow.css create mode 100644 src/userChrome/userChrome-true-mobile+color+glow.css create mode 100644 src/userChrome/userChrome-true-mobile+color.css create mode 100644 src/userChrome/userChrome-true-mobile.css diff --git a/src/userChrome/alt-browser.css b/src/userChrome/alt-browser.css index dc6aade..abfe616 100644 --- a/src/userChrome/alt-browser.css +++ b/src/userChrome/alt-browser.css @@ -1,10 +1,11 @@ /* Copyright 2022 plata * SPDX-License-Identifier: MPL-2.0 */ -/* Move navigation bar to bottom */ @media (max-width: 700px) { + /* Move navigation bar to bottom */ #browser { - -moz-box-ordinal-group: 0 !important; + -moz-box-ordinal-group: 0 !important; /* before FF 113 */ + order: -1 !important; /* since FF 113 */ } /* Hide navigation bar in kiosk mode (to prevent bug #29). We can assume FF @@ -16,6 +17,11 @@ display: none; } + /* Hide minimize/maximize/close buttons */ + .titlebar-buttonbox-container { + display: none; + } + /* https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/toolbars_below_content.css */ #TabsToolbar > .titlebar-buttonbox-container { display: none; @@ -30,23 +36,29 @@ order: 2; } - /* Adjust Bookmarks Menu Popup spawn height and fix flickering */ + /* Adjust Bookmarks Menu (★) spawn height and fix flickering */ #BMB_bookmarksPopup { margin-bottom: 22px !important; width: 100vw; } - /* Adjust Widget Overflow spawn height */ + /* Adjust Unified Extensions Menu spawn height */ + #unified-extensions-view { + margin-top: -44px !important; + margin-bottom: -44px !important; + } + + /* Adjust Widget Overflow Menu (≫) spawn height */ #widget-overflow { padding-bottom: 30px !important; } - /* Adjust App Menu Popup spawn height */ + /* Adjust Main App Menu (≡) spawn height */ #appMenu-popup { margin-bottom: 26px !important; } - /* Adjust All-Tabs Popup spawn height */ + /* Adjust Tab Manager Menu spawn height */ #customizationui-widget-panel { margin-bottom: 66px !important; } diff --git a/src/userChrome/borderless_transparent_active_tab.css b/src/userChrome/borderless_transparent_active_tab.css new file mode 100644 index 0000000..3643739 --- /dev/null +++ b/src/userChrome/borderless_transparent_active_tab.css @@ -0,0 +1,12 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Tab color */ +.tab-background { + background-color: transparent !important; +} + +/* Tab border */ +.tab-background[selected] { + border: 0 transparent !important; +} diff --git a/src/userChrome/browser.css b/src/userChrome/browser.css index 28cfcb2..17d153c 100644 --- a/src/userChrome/browser.css +++ b/src/userChrome/browser.css @@ -17,6 +17,11 @@ display: none; } + /* Hide minimize/maximize/close buttons */ + .titlebar-buttonbox-container { + display: none; + } + /* https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/toolbars_below_content.css */ #TabsToolbar > .titlebar-buttonbox-container { display: none; @@ -26,23 +31,29 @@ max-height: unset !important; } - /* Adjust Bookmarks Menu Popup spawn height and fix flickering */ + /* Adjust Bookmarks Menu (★) spawn height and fix flickering */ #BMB_bookmarksPopup { margin-bottom: 52px !important; width: 100vw; } - /* Adjust Widget Overflow spawn height */ + /* Adjust Unified Extensions Menu spawn height */ + #unified-extensions-view { + margin-top: -44px !important; + margin-bottom: -44px !important; + } + + /* Adjust Widget Overflow Menu (≫) spawn height */ #widget-overflow { padding-bottom: 60px !important; } - /* Adjust App Menu Popup spawn height */ + /* Adjust Main App Menu (≡) spawn height */ #appMenu-popup { margin-bottom: 56px !important; } - /* Adjust All-Tabs Popup spawn height */ + /* Adjust Tab Manager Menu spawn height */ #customizationui-widget-panel { margin-bottom: 20px !important; } diff --git a/src/userChrome/colorful_inactive_tabs.css b/src/userChrome/colorful_inactive_tabs.css new file mode 100644 index 0000000..cda498c --- /dev/null +++ b/src/userChrome/colorful_inactive_tabs.css @@ -0,0 +1,31 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Inactive tab color */ +.tabbrowser-tab:not(:hover,[pinned], [selected]) > .tab-stack > .tab-background { + background-color: var(--lwt-selected-tab-background-color) !important; +} + +/* Inactive tab color on hover */ +.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected]) { + background-color: var(--lwt-accent-color-inactive) !important; +} + +/* Inactive pinned tab icon color */ +.tab-icon-image[pinned]:not([selected]) { + color: var(--lwt-accent-color) !important; +} + +/* Inactive tab text and close button (x) color */ +.tab-text:not([pinned]):not([selected]), +.tab-icon-image:not([pinned]):not([selected]), +.tab-close-button:not([pinned]):not([selected]) { + color: var(--lwt-text-color) !important; +} + +/* Inactive tab text and close button (x) color on hover */ +.tabbrowser-tab:not([selected]):hover .tab-text, +.tabbrowser-tab:not([selected]):hover .tab-icon-image, +.tabbrowser-tab:not([selected]):hover .tab-close-button { + color: var(--lwt-accent-color) !important; +} diff --git a/src/userChrome/colors.css b/src/userChrome/colors.css index 165a404..f1eaa35 100644 --- a/src/userChrome/colors.css +++ b/src/userChrome/colors.css @@ -1,3 +1,6 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + /* Various items color */ arrowscrollbox, findbar, @@ -115,7 +118,7 @@ tooltip, color: var(--lwt-text-color) !important; } -/* Main menu button (≡) color on hover */ +/* Main App Menu button (≡) color on hover */ .subviewbutton:hover { background-color: var(--arrowpanel-color) !important; color: var(--lwt-text-color) !important; diff --git a/src/userChrome/custom_rules.css b/src/userChrome/custom_rules.css index a4076c1..c463f1d 100644 --- a/src/userChrome/custom_rules.css +++ b/src/userChrome/custom_rules.css @@ -1,11 +1,11 @@ -/* custom rules */ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ /* Apply this customization only on smaller screens */ @media (max-width: 700px) { - /* Remove Tab Manager button - (overridden by tab_counter.css) */ - #alltabs-button { + /* Remove Fullscreen popup */ + .pointerlockfswarning { display: none !important; } @@ -27,7 +27,8 @@ #tracking-protection-icon-container, #identity-permission-box, #userContext-indicator, - #page-action-buttons { + /*#page-action-buttons,*/ + #pageActionButton { display: none !important; } diff --git a/src/userChrome/glow.css b/src/userChrome/glow.css new file mode 100644 index 0000000..e0e41c6 --- /dev/null +++ b/src/userChrome/glow.css @@ -0,0 +1,44 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Inactive tab glow on hover */ +.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected]) { + filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary)); +} + +/* Newtab buttons (+) and Tab Manager button glow on hover */ +#alltabs-button:hover > .toolbarbutton-badge-stack, +#new-tab-button:hover, +#tabs-newtab-button:hover { + filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary)); +} + +/* Back button glow on hover */ +#back-button:not([disabled]):hover > .toolbarbutton-icon { + filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary)); +} + +/* Forward button glow on hover */ +#forward-button:not([disabled]):hover > .toolbarbutton-icon { + filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary)); +} + +/* Urlbar glow */ +#urlbar { + filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary)); +} +/* Urlbar glow on focus */ +#urlbar[focused] { + filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary)); + box-shadow: 0 0 3px var(--uc-icon-glow-secondary) !important; +} +/* Urlbar glow on hover */ +#urlbar:hover { + filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary)); + box-shadow: 0 0 3px var(--uc-icon-glow-secondary) !important; +} + +/* Navbar buttons glow */ +#nav-bar toolbarbutton:hover:not(#back-button):not(#forward-button) { + filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary)); +} diff --git a/src/userChrome/hide_newtab_+_new-tab_buttons.css b/src/userChrome/hide_newtab_+_new-tab_buttons.css index 7aec6ce..42613d1 100644 --- a/src/userChrome/hide_newtab_+_new-tab_buttons.css +++ b/src/userChrome/hide_newtab_+_new-tab_buttons.css @@ -1,3 +1,6 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + /* Apply this customization only on smaller screens */ @media (max-width: 700px) { diff --git a/src/userChrome/hide_tab_counter.css b/src/userChrome/hide_tab_counter.css new file mode 100644 index 0000000..8a2cb83 --- /dev/null +++ b/src/userChrome/hide_tab_counter.css @@ -0,0 +1,12 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Remove Tab Manager button */ + #alltabs-button { + display: none !important; + } + +} diff --git a/src/userChrome/new-tab-button.css b/src/userChrome/new-tab-button.css index 5b50563..76abc7c 100644 --- a/src/userChrome/new-tab-button.css +++ b/src/userChrome/new-tab-button.css @@ -1,3 +1,6 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + /* Apply this customization only on smaller screens */ @media (max-width: 700px) { diff --git a/src/userChrome/numbered_tabs.css b/src/userChrome/numbered_tabs.css index 43fdbec..409cc18 100644 --- a/src/userChrome/numbered_tabs.css +++ b/src/userChrome/numbered_tabs.css @@ -10,7 +10,7 @@ See the above repository for updates as well as full license text. */ #tabbrowser-tabs { counter-reset: nth-tab 0; /* Change to -1 for 0-indexing */ } - .tabbrowser-tab:not([pinned]) .tab-content::after { + .tabbrowser-tab .tab-content::after { content: counter(nth-tab) " "; counter-increment: nth-tab; position: absolute !important; @@ -20,7 +20,14 @@ See the above repository for updates as well as full license text. */ width: 0 !important; } - /* Hide tab number when hovering so that tab close button is clickable */ + /* Hide tab close button on unpinned tabs, and reserve space for tab number */ + .tabbrowser-tab:not(:hover,[pinned]) .tab-close-button { + display: initial !important; + visibility: hidden !important; + } + + /* Hide tab number on pinned tabs and when hovering on unpinned tabs so that tab close button is clickable */ + .tabbrowser-tab[pinned] .tab-content::after, .tabbrowser-tab:not([pinned]):hover .tab-content::after { visibility: hidden !important; } diff --git a/src/userChrome/popups.css b/src/userChrome/popups.css index f4a14fd..7ce9b69 100644 --- a/src/userChrome/popups.css +++ b/src/userChrome/popups.css @@ -45,7 +45,7 @@ } /* fix the protections popup getting - * too wide, making controls naccessible */ + * too wide, making controls unaccessible */ #protections-popup-mainView { min-width: 100vw !important; max-width: 100vw !important; @@ -59,6 +59,9 @@ #widget-overflow-mainView { height: calc(100vh - 80px) !important; } + #unified-extensions-view { + width: calc(100vw - 10px) !important; + } /* fix widget overflow to fit ublock0_raymondhill_net-browser-action */ #widget-overflow-mainView { diff --git a/src/userChrome/single_tab_mode.css b/src/userChrome/single_tab_mode.css index c3908f8..1054f1d 100644 --- a/src/userChrome/single_tab_mode.css +++ b/src/userChrome/single_tab_mode.css @@ -1,20 +1,44 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/******************************************/ +/* IMPORTANT: */ +/* */ +/* This will move the Tab Manager button */ +/* to the right side of the URL Bar. */ +/* */ +/* Move the Unified Extensions button */ +/* to the left side of the URL Bar */ +/* using the Customize Toolbar feature, */ +/* or use a user.js file in your profile. */ +/******************************************/ + /* Apply this customization only on smaller screens */ @media (max-width: 700px) { - /* Hide unpinned inactive tabs */ - .tabbrowser-tab:not([pinned]):not([selected]) { - visibility: hidden !important; - min-width: 0 !important; + /* Reduce urlbar width */ + #urlbar { + width: calc(100vw - 166px) !important; } - /* Expand unpinned active tab */ - .tabbrowser-tab:not([pinned])[selected] { - min-width: 100vw !important; + /* Adjust Tab Manager Menu spawn height */ + #customizationui-widget-panel { + margin-bottom: 26px !important; } - /* Shorten tab content width so that tab number is more visible */ - .tabbrowser-tab[selected]:not(:hover,[pinned]) > .tab-stack > .tab-content { - width: calc(100vw - 30px) !important; + /* Move Tab Manager Menu button to right of urlbar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: 32px; + width: 32px; + } + #alltabs-button { + position: absolute; + bottom: 48.5px; + right: 41.5px; + z-index: 1 !important; } /* Hide Newtab and New-tab buttons */ @@ -23,4 +47,18 @@ display: none !important; } + /* Hide unpinned inactive tabs */ + .tabbrowser-tab:not([pinned]):not([selected]) { + visibility: collapse !important; + min-width: 0 !important; + } + + /* Expand unpinned active tab */ + #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] { + min-width: 100vw !important; + } + #tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned])[selected] { + min-width: calc(100vw - 40px) !important; + } + } diff --git a/src/userChrome/single_tab_mode_with_space_for_1_item.css b/src/userChrome/single_tab_mode_with_space_for_1_item.css index c52e0c1..4f7f469 100644 --- a/src/userChrome/single_tab_mode_with_space_for_1_item.css +++ b/src/userChrome/single_tab_mode_with_space_for_1_item.css @@ -1,25 +1,34 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/******************************************/ +/* IMPORTANT: */ +/* */ +/* This will expand the active tab, with */ +/* space for one item of your choice: */ +/* */ +/* New-tab, Tab Manager, or other button. */ +/* */ +/* In addition to your item of choice, */ +/* the active tab will dynamically shrink */ +/* in order to accommodate one pinned tab. */ +/******************************************/ + /* Apply this customization only on smaller screens */ @media (max-width: 700px) { /* Hide unpinned inactive tabs */ .tabbrowser-tab:not([pinned]):not([selected]) { - visibility: hidden !important; + visibility: collapse !important; min-width: 0 !important; } - /* Expand first unpinned tab */ - #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { - max-width: 100vw !important; - } - /* Expand unpinned active tab */ - .tabbrowser-tab:not([pinned])[selected] { + #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] { min-width: calc(100vw - 40px) !important; } - - /* Shorten tab content width so that tab number is more visible */ - .tabbrowser-tab[selected]:not(:hover,[pinned]) > .tab-stack > .tab-content { - width: calc(100vw - 70px) !important; + #tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned])[selected] { + min-width: calc(100vw - 80px) !important; } } diff --git a/src/userChrome/single_tab_mode_with_space_for_2_items.css b/src/userChrome/single_tab_mode_with_space_for_2_items.css index 425b2d3..9a5f1c5 100644 --- a/src/userChrome/single_tab_mode_with_space_for_2_items.css +++ b/src/userChrome/single_tab_mode_with_space_for_2_items.css @@ -1,25 +1,34 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/******************************************/ +/* IMPORTANT: */ +/* */ +/* This will expand the active tab, with */ +/* space for two items of your choice: */ +/* */ +/* New-tab, Tab Manager, or other button. */ +/* */ +/* In addition to your item of choice, */ +/* the active tab will dynamically shrink */ +/* in order to accommodate one pinned tab. */ +/******************************************/ + /* Apply this customization only on smaller screens */ @media (max-width: 700px) { /* Hide unpinned inactive tabs */ .tabbrowser-tab:not([pinned]):not([selected]) { - visibility: hidden !important; + visibility: collapse !important; min-width: 0 !important; } - /* Expand first unpinned tab */ - #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { - max-width: 100vw !important; - } - /* Expand unpinned active tab */ - .tabbrowser-tab:not([pinned])[selected] { + #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] { min-width: calc(100vw - 80px) !important; } - - /* Shorten tab content width so that tab number is more visible */ - .tabbrowser-tab[selected]:not(:hover,[pinned]) > .tab-stack > .tab-content { - width: calc(100vw - 110px) !important; + #tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned])[selected] { + min-width: calc(100vw - 120px) !important; } } diff --git a/src/userChrome/single_tab_mode_with_space_for_3_items.css b/src/userChrome/single_tab_mode_with_space_for_3_items.css deleted file mode 100644 index 2480250..0000000 --- a/src/userChrome/single_tab_mode_with_space_for_3_items.css +++ /dev/null @@ -1,25 +0,0 @@ -/* Apply this customization only on smaller screens */ -@media (max-width: 700px) { - - /* Hide unpinned inactive tabs */ - .tabbrowser-tab:not([pinned]):not([selected]) { - visibility: hidden !important; - min-width: 0 !important; - } - - /* Expand first unpinned tab */ - #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { - max-width: 100vw !important; - } - - /* Expand unpinned active tab */ - .tabbrowser-tab:not([pinned])[selected] { - min-width: calc(100vw - 120px) !important; - } - - /* Shorten tab content width so that tab number is more visible */ - .tabbrowser-tab[selected]:not(:hover,[pinned]) > .tab-stack > .tab-content { - width: calc(100vw - 150px) !important; - } - -} diff --git a/src/userChrome/tab_animated_active_border.css b/src/userChrome/tab_animated_active_border.css index a4e8a53..62d1e4d 100644 --- a/src/userChrome/tab_animated_active_border.css +++ b/src/userChrome/tab_animated_active_border.css @@ -3,30 +3,37 @@ See the above repository for updates as well as full license text. */ /* Creates a colorful animated border around active tab */ -@keyframes filter{from{ filter: hue-rotate(0deg) } to { filter: hue-rotate(360deg) }} - -.tabbrowser-tab[selected] > .tab-stack::before{ - grid-area: 1/1; - content: ""; - display: inherit; - margin-block: var(--tab-block-margin); - border-radius: var(--tab-border-radius); - z-index: 0; - background-image: conic-gradient( - hsl(0 100% 70%), - hsl(60 100% 45%) 70deg, - hsl(120 100% 55%) 105deg, - hsl(160 100% 60%) 160deg, - hsl(200 100% 60%) 200deg, - hsl(240 100% 65%) 255deg, - hsl(300 100% 60%) 290deg, - hsl(360 100% 70%) 360deg); - background-size: cover; - background-position: center; - animation: filter steps(30) 2s infinite; +@keyframes filter { + from { + filter: hue-rotate(0deg) + } + to { + filter: hue-rotate(360deg) + } +} + +.tabbrowser-tab[selected] > .tab-stack::before { + grid-area: 1/1; + content: ""; + display: inherit; + margin-block: var(--tab-block-margin); + border-radius: var(--tab-border-radius); + z-index: 0; + background-image: conic-gradient( + hsl(0 100% 70%), + hsl(60 100% 45%) 70deg, + hsl(120 100% 55%) 105deg, + hsl(160 100% 60%) 160deg, + hsl(200 100% 60%) 200deg, + hsl(240 100% 65%) 255deg, + hsl(300 100% 60%) 290deg, + hsl(360 100% 70%) 360deg); + background-size: cover; + background-position: center; + animation: filter steps(30) 2s infinite; +} +.tab-background[selected] { + border: 1px solid transparent !important; + outline: none !important; + background-clip: padding-box !important; } -.tab-background[selected]{ - border: 1px solid transparent !important; - outline: none !important; - background-clip: padding-box !important; -} \ No newline at end of file diff --git a/src/userChrome/tab_counter.css b/src/userChrome/tab_counter.css index 7d853d2..1e08602 100644 --- a/src/userChrome/tab_counter.css +++ b/src/userChrome/tab_counter.css @@ -12,11 +12,11 @@ display: -moz-box !important; } - /* Tab Manager button (v) tab counter */ + /* Tab Manager button tab counter */ #TabsToolbar-customization-target { counter-reset: tabCount; } - .tabbrowser-tab:not([pinned]) { + .tabbrowser-tab { counter-increment: tabCount; } #alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { @@ -38,7 +38,8 @@ } /* Tab Manager menu tab counter */ - #allTabsMenu-allTabsViewTabs { + #allTabsMenu-allTabsViewTabs, /* before FF 106 */ + #allTabsMenu-allTabsView-tabs { /* since FF 106 */ counter-reset: nn_tabs 0 !important; } .all-tabs-button::before { diff --git a/src/userChrome/tabmenu.css b/src/userChrome/tabmenu.css index c3ca01a..fd72e88 100644 --- a/src/userChrome/tabmenu.css +++ b/src/userChrome/tabmenu.css @@ -80,15 +80,17 @@ } #customizationui-widget-multiview box.panel-viewstack { /* since FF 113 */ /* Use the whole height */ - height: 300px !important; - max-height: 300px !important; + /*height: 300px !important;*/ + /*max-height: 300px !important;*/ + height: 333px !important; + max-height: 333px !important; } #allTabsMenu-allTabsViewTabs, /* before FF 106 */ #allTabsMenu-allTabsView-tabs { /* since FF 106 */ /* Make sure tabs with long titles don't exceed the all tabs menu */ - width: 0; - max-width: calc(100vw - 20px); + /*max-width: calc(100vw - 20px);*/ + max-width: calc(100vw - 30px); /* Fix padding */ padding-top: 2px !important; } diff --git a/src/userChrome/tabs_larger_min-width.css b/src/userChrome/tabs_larger_min-width.css index 56c91d6..e98df49 100644 --- a/src/userChrome/tabs_larger_min-width.css +++ b/src/userChrome/tabs_larger_min-width.css @@ -1,4 +1,7 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + /* Tab min-width resizing */ -#tabbrowser-tabs .tabbrowser-tab[fadein]:not([pinned]) { - min-width: 90px !important; +#tabbrowser-tabs { + --tab-min-width: 24vw !important; } diff --git a/src/userChrome/true_mobile_mode.css b/src/userChrome/true_mobile_mode.css new file mode 100644 index 0000000..dd4031d --- /dev/null +++ b/src/userChrome/true_mobile_mode.css @@ -0,0 +1,49 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/******************************************/ +/* IMPORTANT: */ +/* */ +/* This will move the Tab Manager button */ +/* to the right side of the URL Bar. */ +/* */ +/* Move the Unified Extensions button */ +/* to the left side of the URL Bar */ +/* using the "Customize Toolbar" feature, */ +/* or use a user.js file in your profile. */ +/******************************************/ + +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Hide Tabbar */ + #tabbrowser-tabs { + visibility: collapse !important; + } + + /* Reduce urlbar width */ + #urlbar { + width: calc(100vw - 166px) !important; + } + + /* Adjust Tab Manager Menu spawn height */ + #customizationui-widget-panel { + margin-bottom: 26px !important; + } + + /* Move Tab Manager button to right of urlbar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: 32px; + width: 32px; + } + #alltabs-button { + position: absolute; + bottom: 4.5px; + right: 41.5px; + z-index: 1 !important; + } + +} diff --git a/src/userChrome/userChrome-desktop.css b/src/userChrome/userChrome-desktop.css index f711893..782e5c6 100644 --- a/src/userChrome/userChrome-desktop.css +++ b/src/userChrome/userChrome-desktop.css @@ -1,8 +1,10 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + /* Source files available here: https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/ https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313 - */ /* @@ -18,8 +20,6 @@ @import "findbar.css"; -@import "popups.before-ff-108.css"; - @import "popups.css"; @import "root.css"; @@ -40,22 +40,33 @@ /* @import "round_ui_items.css"; +@import "true_mobile_mode.css"; + @import "single_tab_mode.css"; @import "single_tab_mode_with_space_for_1_item.css"; @import "single_tab_mode_with_space_for_2_items.css"; -@import "single_tab_mode_with_space_for_3_items.css"; - @import "hide_newtab_+_new-tab_buttons.css"; @import "numbered_tabs.css"; @import "tab_counter.css"; */ +@import "hide_tab_counter.css"; + @import "new-tab-button.css"; @import "tabs_larger_min-width.css"; @import "tabs_fill_available_width.css"; +/* +@import "glow.css"; + +@import "colorful_inactive_tabs.css"; + +@import "tab_animated_active_border.css"; + +@import "borderless_transparent_active_tab.css"; +*/ diff --git a/src/userChrome/userChrome-hybrid.css b/src/userChrome/userChrome-hybrid.css index 62e591d..4125954 100644 --- a/src/userChrome/userChrome-hybrid.css +++ b/src/userChrome/userChrome-hybrid.css @@ -1,8 +1,10 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + /* Source files available here: https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/ https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313 - */ /* @@ -18,8 +20,6 @@ @import "findbar.css"; -@import "popups.before-ff-108.css"; - @import "popups.css"; @import "root.css"; @@ -40,13 +40,13 @@ @import "round_ui_items.css"; /* +@import "true_mobile_mode.css"; + @import "single_tab_mode.css"; @import "single_tab_mode_with_space_for_1_item.css"; @import "single_tab_mode_with_space_for_2_items.css"; - -@import "single_tab_mode_with_space_for_3_items.css"; */ @import "hide_newtab_+_new-tab_buttons.css"; /* @@ -54,8 +54,19 @@ */ @import "tab_counter.css"; /* +@import "hide_tab_counter.css"; + @import "new-tab-button.css"; */ @import "tabs_larger_min-width.css"; @import "tabs_fill_available_width.css"; +/* +@import "glow.css"; + +@import "colorful_inactive_tabs.css"; + +@import "tab_animated_active_border.css"; + +@import "borderless_transparent_active_tab.css"; +*/ diff --git a/src/userChrome/userChrome-mobile+color+glow+rainbow.css b/src/userChrome/userChrome-mobile+color+glow+rainbow.css new file mode 100644 index 0000000..87aee20 --- /dev/null +++ b/src/userChrome/userChrome-mobile+color+glow+rainbow.css @@ -0,0 +1,71 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Source files available here: + https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip + https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/ + https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313 +*/ + + +@import "color_variable_template.css"; + +@import "colors.css"; + +@import "appMenu.css"; + +@import "browser.css"; + +@import "editBookmarkPanel.css"; + +@import "findbar.css"; + +@import "popups.css"; + +@import "root.css"; + +@import "tabmenu.css"; + +@import "urlbar.css"; + +@import "alt-browser.css"; + +@import "custom_rules.css"; + +@import "hide_tabs_scrollbuttons.css"; + +@import "tab_close_button_always_on_hover.css"; + +@import "iconized_main_menu.css"; + +@import "round_ui_items.css"; +/* +@import "true_mobile_mode.css"; + +@import "single_tab_mode.css"; +*/ +@import "single_tab_mode_with_space_for_1_item.css"; +/* +@import "single_tab_mode_with_space_for_2_items.css"; +*/ +@import "hide_newtab_+_new-tab_buttons.css"; + +@import "numbered_tabs.css"; + +@import "tab_counter.css"; +/* +@import "hide_tab_counter.css"; + +@import "new-tab-button.css"; + +@import "tabs_larger_min-width.css"; + +@import "tabs_fill_available_width.css"; +*/ +@import "glow.css"; + +@import "colorful_inactive_tabs.css"; + +@import "tab_animated_active_border.css"; + +@import "borderless_transparent_active_tab.css"; diff --git a/src/userChrome/userChrome-mobile.css b/src/userChrome/userChrome-mobile.css index 92ca4a9..b6de437 100644 --- a/src/userChrome/userChrome-mobile.css +++ b/src/userChrome/userChrome-mobile.css @@ -1,3 +1,6 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + /* Source files available here: https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/ @@ -17,8 +20,6 @@ @import "findbar.css"; -@import "popups.before-ff-108.css"; - @import "popups.css"; @import "root.css"; @@ -39,23 +40,33 @@ @import "round_ui_items.css"; /* +@import "true_mobile_mode.css"; + @import "single_tab_mode.css"; - +*/ @import "single_tab_mode_with_space_for_1_item.css"; -*/ -@import "single_tab_mode_with_space_for_2_items.css"; /* -@import "single_tab_mode_with_space_for_3_items.css"; - -@import "hide_newtab_+_new-tab_buttons.css"; +@import "single_tab_mode_with_space_for_2_items.css"; */ +@import "hide_newtab_+_new-tab_buttons.css"; + @import "numbered_tabs.css"; @import "tab_counter.css"; /* +@import "hide_tab_counter.css"; + @import "new-tab-button.css"; @import "tabs_larger_min-width.css"; @import "tabs_fill_available_width.css"; + +@import "glow.css"; + +@import "colorful_inactive_tabs.css"; + +@import "tab_animated_active_border.css"; + +@import "borderless_transparent_active_tab.css"; */ diff --git a/src/userChrome/userChrome-true-mobile+color+glow.css b/src/userChrome/userChrome-true-mobile+color+glow.css new file mode 100644 index 0000000..679d0ac --- /dev/null +++ b/src/userChrome/userChrome-true-mobile+color+glow.css @@ -0,0 +1,72 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Source files available here: + https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip + https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/ + https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313 +*/ + + +@import "color_variable_template.css"; + +@import "colors.css"; + +@import "appMenu.css"; + +@import "browser.css"; + +@import "editBookmarkPanel.css"; + +@import "findbar.css"; + +@import "popups.css"; + +@import "root.css"; + +@import "tabmenu.css"; + +@import "urlbar.css"; + +@import "alt-browser.css"; + +@import "custom_rules.css"; + +@import "hide_tabs_scrollbuttons.css"; + +@import "tab_close_button_always_on_hover.css"; + +@import "iconized_main_menu.css"; + +@import "round_ui_items.css"; + +@import "true_mobile_mode.css"; +/* +@import "single_tab_mode.css"; + +@import "single_tab_mode_with_space_for_1_item.css"; + +@import "single_tab_mode_with_space_for_2_items.css"; + +@import "hide_newtab_+_new-tab_buttons.css"; + +@import "numbered_tabs.css"; +*/ +@import "tab_counter.css"; +/* +@import "hide_tab_counter.css"; + +@import "new-tab-button.css"; + +@import "tabs_larger_min-width.css"; + +@import "tabs_fill_available_width.css"; +*/ +@import "glow.css"; +/* +@import "colorful_inactive_tabs.css"; + +@import "tab_animated_active_border.css"; + +@import "borderless_transparent_active_tab.css"; +*/ diff --git a/src/userChrome/userChrome-true-mobile+color.css b/src/userChrome/userChrome-true-mobile+color.css new file mode 100644 index 0000000..959ba2e --- /dev/null +++ b/src/userChrome/userChrome-true-mobile+color.css @@ -0,0 +1,72 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Source files available here: + https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip + https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/ + https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313 +*/ + + +@import "color_variable_template.css"; + +@import "colors.css"; + +@import "appMenu.css"; + +@import "browser.css"; + +@import "editBookmarkPanel.css"; + +@import "findbar.css"; + +@import "popups.css"; + +@import "root.css"; + +@import "tabmenu.css"; + +@import "urlbar.css"; + +@import "alt-browser.css"; + +@import "custom_rules.css"; + +@import "hide_tabs_scrollbuttons.css"; + +@import "tab_close_button_always_on_hover.css"; + +@import "iconized_main_menu.css"; + +@import "round_ui_items.css"; + +@import "true_mobile_mode.css"; +/* +@import "single_tab_mode.css"; + +@import "single_tab_mode_with_space_for_1_item.css"; + +@import "single_tab_mode_with_space_for_2_items.css"; + +@import "hide_newtab_+_new-tab_buttons.css"; + +@import "numbered_tabs.css"; +*/ +@import "tab_counter.css"; +/* +@import "hide_tab_counter.css"; + +@import "new-tab-button.css"; + +@import "tabs_larger_min-width.css"; + +@import "tabs_fill_available_width.css"; + +@import "glow.css"; + +@import "colorful_inactive_tabs.css"; + +@import "tab_animated_active_border.css"; + +@import "borderless_transparent_active_tab.css"; +*/ diff --git a/src/userChrome/userChrome-true-mobile.css b/src/userChrome/userChrome-true-mobile.css new file mode 100644 index 0000000..3628e4c --- /dev/null +++ b/src/userChrome/userChrome-true-mobile.css @@ -0,0 +1,72 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Source files available here: + https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip + https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/ + https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313 +*/ + +/* +@import "color_variable_template.css"; + +@import "colors.css"; +*/ +@import "appMenu.css"; + +@import "browser.css"; + +@import "editBookmarkPanel.css"; + +@import "findbar.css"; + +@import "popups.css"; + +@import "root.css"; + +@import "tabmenu.css"; + +@import "urlbar.css"; + +@import "alt-browser.css"; + +@import "custom_rules.css"; + +@import "hide_tabs_scrollbuttons.css"; + +@import "tab_close_button_always_on_hover.css"; + +@import "iconized_main_menu.css"; + +@import "round_ui_items.css"; + +@import "true_mobile_mode.css"; +/* +@import "single_tab_mode.css"; + +@import "single_tab_mode_with_space_for_1_item.css"; + +@import "single_tab_mode_with_space_for_2_items.css"; + +@import "hide_newtab_+_new-tab_buttons.css"; + +@import "numbered_tabs.css"; +*/ +@import "tab_counter.css"; +/* +@import "hide_tab_counter.css"; + +@import "new-tab-button.css"; + +@import "tabs_larger_min-width.css"; + +@import "tabs_fill_available_width.css"; + +@import "glow.css"; + +@import "colorful_inactive_tabs.css"; + +@import "tab_animated_active_border.css"; + +@import "borderless_transparent_active_tab.css"; +*/ diff --git a/src/userContent/theme-color-1.css b/src/userContent/theme-color-1.css index 9757e61..82ad9f8 100644 --- a/src/userContent/theme-color-1.css +++ b/src/userContent/theme-color-1.css @@ -1,3 +1,6 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + @-moz-document url("about:addons"), url("about:blank"), url("about:config"), diff --git a/src/userContent/theme-color-2.css b/src/userContent/theme-color-2.css index c791df4..54db2d6 100644 --- a/src/userContent/theme-color-2.css +++ b/src/userContent/theme-color-2.css @@ -1,3 +1,6 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + @-moz-document url("about:addons"), url("about:blank"), url("about:config"), diff --git a/src/userContent/theme-dark.css b/src/userContent/theme-dark.css index ccfc126..a92b630 100644 --- a/src/userContent/theme-dark.css +++ b/src/userContent/theme-dark.css @@ -1,3 +1,6 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + @-moz-document url("about:addons"), url("about:blank"), url("about:config"), diff --git a/src/userContent/theme-light.css b/src/userContent/theme-light.css index b3166be..e7dc0f3 100644 --- a/src/userContent/theme-light.css +++ b/src/userContent/theme-light.css @@ -1,3 +1,6 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + @-moz-document url("about:addons"), url("about:blank"), url("about:config"), From bb7659dfdaf4d59e6d6477a206fba101875d67fd Mon Sep 17 00:00:00 2001 From: "@user0" <> Date: Mon, 30 Oct 2023 09:04:54 +0100 Subject: [PATCH 21/21] =?UTF-8?q?Add=20@user0=E2=80=99s=20contributions=20?= =?UTF-8?q?as=20of=202023-10-30?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/userChrome/alt-browser-alt.css | 78 ++ src/userChrome/alt-browser.css | 66 - src/userChrome/alt-single_tab_mode-alt.css | 98 ++ src/userChrome/appMenu.css | 11 +- src/userChrome/browser.css | 50 +- src/userChrome/color_variable_template.css | 257 ---- src/userChrome/colors.css | 157 --- src/userChrome/custom_rules.css | 61 +- src/userChrome/dynamic_popups.css | 86 ++ src/userChrome/dynamic_popups_max.css | 88 ++ src/userChrome/dynamic_popups_plus.css | 71 ++ src/userChrome/dynamic_popups_pro.css | 83 ++ src/userChrome/dynamic_popups_pro_max.css | 97 ++ src/userChrome/editBookmarkPanel.css | 21 +- src/userChrome/extensions_menu.css | 44 + src/userChrome/fenix-alt.css | 364 ++++++ src/userChrome/fenix.css | 364 ++++++ src/userChrome/fenix_colors.css | 242 ++++ src/userChrome/fenix_fox-alt.css | 818 ++++++++++++ src/userChrome/fenix_fox.css | 895 +++++++++++++ src/userChrome/fenix_one-alt.css | 1054 +++++++++++++++ src/userChrome/fenix_one.css | 1131 +++++++++++++++++ src/userChrome/glow.css | 2 +- src/userChrome/iconized_main_menu.css | 102 +- src/userChrome/new-tab-button.css | 3 +- src/userChrome/numbered_tabs.css | 14 +- src/userChrome/popups.before-ff-108.css | 15 - src/userChrome/popups.css | 27 +- src/userChrome/round_ui_items.css | 8 +- src/userChrome/single_tab_mode-alt.css | 98 ++ src/userChrome/single_tab_mode.css | 94 +- .../single_tab_mode_with_space_for_1_item.css | 34 - ...single_tab_mode_with_space_for_2_items.css | 34 - src/userChrome/tab_counter.css | 102 +- src/userChrome/tabmenu.css | 10 +- src/userChrome/true_mobile_landscape-alt.css | 204 +++ src/userChrome/true_mobile_landscape.css | 230 ++++ src/userChrome/true_mobile_mode-alt.css | 79 ++ src/userChrome/true_mobile_mode.css | 76 +- src/userChrome/userChrome-desktop.css | 38 +- src/userChrome/userChrome-fenix.css | 58 + src/userChrome/userChrome-fenix_fox.css | 26 + src/userChrome/userChrome-fenix_one.css | 24 + src/userChrome/userChrome-hybrid.css | 72 -- .../userChrome-mobile+color+glow+rainbow.css | 71 -- src/userChrome/userChrome-mobile.css | 30 +- .../userChrome-true-mobile+color+glow.css | 72 -- .../userChrome-true-mobile+color.css | 72 -- src/userChrome/userChrome-true-mobile.css | 58 +- src/userContent/theme-color-1.css | 98 -- src/userContent/theme-color-2.css | 98 -- src/userContent/theme-dark.css | 131 -- src/userContent/theme-fenix.css | 518 ++++++++ src/userContent/theme-light.css | 18 - src/userContent/theme-non-colorized.css | 371 ++++++ 55 files changed, 7503 insertions(+), 1520 deletions(-) create mode 100644 src/userChrome/alt-browser-alt.css delete mode 100644 src/userChrome/alt-browser.css create mode 100644 src/userChrome/alt-single_tab_mode-alt.css delete mode 100644 src/userChrome/color_variable_template.css delete mode 100644 src/userChrome/colors.css create mode 100644 src/userChrome/dynamic_popups.css create mode 100644 src/userChrome/dynamic_popups_max.css create mode 100644 src/userChrome/dynamic_popups_plus.css create mode 100644 src/userChrome/dynamic_popups_pro.css create mode 100644 src/userChrome/dynamic_popups_pro_max.css create mode 100644 src/userChrome/extensions_menu.css create mode 100644 src/userChrome/fenix-alt.css create mode 100644 src/userChrome/fenix.css create mode 100644 src/userChrome/fenix_colors.css create mode 100644 src/userChrome/fenix_fox-alt.css create mode 100644 src/userChrome/fenix_fox.css create mode 100644 src/userChrome/fenix_one-alt.css create mode 100644 src/userChrome/fenix_one.css delete mode 100644 src/userChrome/popups.before-ff-108.css create mode 100644 src/userChrome/single_tab_mode-alt.css delete mode 100644 src/userChrome/single_tab_mode_with_space_for_1_item.css delete mode 100644 src/userChrome/single_tab_mode_with_space_for_2_items.css create mode 100644 src/userChrome/true_mobile_landscape-alt.css create mode 100644 src/userChrome/true_mobile_landscape.css create mode 100644 src/userChrome/true_mobile_mode-alt.css create mode 100644 src/userChrome/userChrome-fenix.css create mode 100644 src/userChrome/userChrome-fenix_fox.css create mode 100644 src/userChrome/userChrome-fenix_one.css delete mode 100644 src/userChrome/userChrome-hybrid.css delete mode 100644 src/userChrome/userChrome-mobile+color+glow+rainbow.css delete mode 100644 src/userChrome/userChrome-true-mobile+color+glow.css delete mode 100644 src/userChrome/userChrome-true-mobile+color.css delete mode 100644 src/userContent/theme-color-1.css delete mode 100644 src/userContent/theme-color-2.css delete mode 100644 src/userContent/theme-dark.css create mode 100644 src/userContent/theme-fenix.css delete mode 100644 src/userContent/theme-light.css create mode 100644 src/userContent/theme-non-colorized.css diff --git a/src/userChrome/alt-browser-alt.css b/src/userChrome/alt-browser-alt.css new file mode 100644 index 0000000..c038c1b --- /dev/null +++ b/src/userChrome/alt-browser-alt.css @@ -0,0 +1,78 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --alltabs-button-position: 3.5px !important; + --widget-overflow-margin: 22px; + --unified-extensions-panel-margin: 22px; + --customizationui-widget-panel-margin: 22px; + --appMenu-popup-margin: 22px; + --BMB_bookmarksPopup-margin: 22px; + } + :root[uidensity="touch"] { + --alltabs-button-position: 4.5px !important; + --widget-overflow-margin: 23px; + --unified-extensions-panel-margin: 23px; + --customizationui-widget-panel-margin: 23px; + --appMenu-popup-margin: 23px; + --BMB_bookmarksPopup-margin: 23px; + } + :root:not([uidensity="touch"],[inFullscreen]) { + --uc-bottom-toolbar-height: calc(39px + var(--toolbarbutton-outer-padding) ) + } + :root[uidensity="touch"]:not([inFullscreen]){ + --uc-bottom-toolbar-height: calc(43px + var(--toolbarbutton-outer-padding) ) + } + + /* Hide Nav Bar and Tab Bar when in Fullscreen mode and hide and Title Bar */ + #nav-bar[inFullscreen], + #TabsToolbar[inFullscreen], + .titlebar-buttonbox-container { + display: none; + } + + /* Move Nav Bar to bottom */ + #browser, + #customization-container { + margin-bottom: var(--uc-bottom-toolbar-height,0px) + } + #nav-bar{ + position: fixed !important; + bottom: 0px; + width: 100%; + z-index: 1; + } + .panel-viewstack { + max-height: unset !important; + } + + /* Adjust Widget Overflow Menu (») spawn height */ + #widget-overflow { + margin-bottom: var(--widget-overflow-margin) !important; + } + + /* Adjust Unified Extensions Menu spawn height */ + #unified-extensions-panel { + margin-bottom: var(--unified-extensions-panel-margin) !important; + } + + /* Adjust Tab Manager Menu spawn height */ + #customizationui-widget-panel { + margin-bottom: var(--customizationui-widget-panel-margin) !important; + } + + /* Adjust Main App Menu (≡) spawn height */ + #appMenu-popup { + margin-bottom: var(--appMenu-popup-margin) !important; + } + + /* Adjust Bookmarks Menu (★) spawn height */ + #BMB_bookmarksPopup { + margin-bottom: var(--BMB_bookmarksPopup-margin) !important; + } + +} diff --git a/src/userChrome/alt-browser.css b/src/userChrome/alt-browser.css deleted file mode 100644 index abfe616..0000000 --- a/src/userChrome/alt-browser.css +++ /dev/null @@ -1,66 +0,0 @@ -/* Copyright 2022 plata - * SPDX-License-Identifier: MPL-2.0 */ - -@media (max-width: 700px) { - /* Move navigation bar to bottom */ - #browser { - -moz-box-ordinal-group: 0 !important; /* before FF 113 */ - order: -1 !important; /* since FF 113 */ - } - - /* Hide navigation bar in kiosk mode (to prevent bug #29). We can assume FF - * is in kiosk mode when fullscreen and max-width conditions are met, - * because at this max-width the fullscreen button is hidden - * (see appMenu.css). */ - #nav-bar[inFullscreen], - #TabsToolbar[inFullscreen] { - display: none; - } - - /* Hide minimize/maximize/close buttons */ - .titlebar-buttonbox-container { - display: none; - } - - /* https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/toolbars_below_content.css */ - #TabsToolbar > .titlebar-buttonbox-container { - display: none; - } - /* Fix panels sizing */ - .panel-viewstack { - max-height: unset !important; - } - /* Tabs below */ - #titlebar { - -moz-box-ordinal-group: 2; /* Fx <112 compatibility */ - order: 2; - } - - /* Adjust Bookmarks Menu (★) spawn height and fix flickering */ - #BMB_bookmarksPopup { - margin-bottom: 22px !important; - width: 100vw; - } - - /* Adjust Unified Extensions Menu spawn height */ - #unified-extensions-view { - margin-top: -44px !important; - margin-bottom: -44px !important; - } - - /* Adjust Widget Overflow Menu (≫) spawn height */ - #widget-overflow { - padding-bottom: 30px !important; - } - - /* Adjust Main App Menu (≡) spawn height */ - #appMenu-popup { - margin-bottom: 26px !important; - } - - /* Adjust Tab Manager Menu spawn height */ - #customizationui-widget-panel { - margin-bottom: 66px !important; - } - -} diff --git a/src/userChrome/alt-single_tab_mode-alt.css b/src/userChrome/alt-single_tab_mode-alt.css new file mode 100644 index 0000000..0ffcaea --- /dev/null +++ b/src/userChrome/alt-single_tab_mode-alt.css @@ -0,0 +1,98 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/******************************************/ +/* IMPORTANT: */ +/* */ +/* One of the things this code will do is */ +/* to move the Tab Manager Menu button to */ +/* the right side of the URL Bar. */ +/* */ +/* For the best results, consider moving */ +/* the Unified Extensions Menu button to */ +/* the left of the URL Bar and removing */ +/* less important toolbar items by using */ +/* the "Customize Toolbar" feature, or by */ +/* using a user.js file in your profile. */ +/******************************************/ + +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 3.5px; + --alltabs-number-position: calc(var(--toolbarbutton-inner-padding) * 1.5 ); + --urlbar-width: calc(100vw - 166px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 4.5px; + --alltabs-number-position: calc(var(--toolbarbutton-inner-padding) * 1.5 ); + --urlbar-width: calc(100vw - 171.5px); + } + + /* Hide Nav Bar and Tab Bar when in Fullscreen mode and hide Title Bar, Newtab button, and New-tab button */ + #nav-bar[inFullscreen], + #TabsToolbar[inFullscreen], + .titlebar-buttonbox-container, + #new-tab-button, + #tabs-newtab-button { + display: none !important; + } + + /* Hide unpinned inactive tabs */ + .tabbrowser-tab:not([pinned]):not([selected]) { + visibility: collapse !important; + min-width: 0 !important; + } + + /* Expand unpinned active tab */ + #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] { + min-width: 100vw !important; + } + #tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned])[selected] { + min-width: calc(100vw - 40px) !important; + } + + /* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + } + + /* Move Tab Manager Menu button to right of URL Bar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + bottom: var(--alltabs-button-position) !important; + right: 41.5px; + z-index: 2 !important; + } + #alltabs-button > .toolbarbutton-badge-stack::before { + bottom: calc(var(--toolbarbutton-inner-padding) * 0.7 ) !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* Reduce URL Bar width */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + +} diff --git a/src/userChrome/appMenu.css b/src/userChrome/appMenu.css index 15f5b40..6619281 100644 --- a/src/userChrome/appMenu.css +++ b/src/userChrome/appMenu.css @@ -8,18 +8,19 @@ * the HTML, which we can't override via CSS. */ #appMenu-popup { /*margin-top: -390px !important;*/ - padding-left: 10px !important; - padding-right: 10px !important; /*height: 310px;*/ /*max-height: 310px;*/ - height: 330px; - max-height: 330px; + height: 340px; + max-height: 340px; + padding-left: 10px !important; + padding-right: 10px !important; } #appMenu-protonMainView vbox.panel-subview-body { /*height: 300px !important;*/ /*max-height: 300px !important;*/ height: 318px !important; max-height: 318px !important; + margin-top: 4px !important; } #appMenu-multiView box.panel-viewstack:first-child { /* Use the whole space in the menu, instead of slowly increasing the @@ -54,7 +55,7 @@ #appMenu-fullscreen-button2, #appMenu-passwords-button, /* accessible from settings */ /*#appMenu-extensions-themes-button, /* accessible from settings */ - #appMenu-bookmarks-button, /* submenu */ + /*#appMenu-bookmarks-button, /* submenu */ /*#appMenu-history-button, /* submenu */ /*#appMenu-more-button2, /* submenu */ /*#appMenu-help-button2, /* submenu */ diff --git a/src/userChrome/browser.css b/src/userChrome/browser.css index 17d153c..52ab55b 100644 --- a/src/userChrome/browser.css +++ b/src/userChrome/browser.css @@ -31,31 +31,45 @@ max-height: unset !important; } - /* Adjust Bookmarks Menu (★) spawn height and fix flickering */ - #BMB_bookmarksPopup { - margin-bottom: 52px !important; - width: 100vw; + /* Density variables */ + :root:not([uidensity="touch"]) { + --widget-overflow-margin: 66px; + --unified-extensions-panel-margin: 66px; + --customizationui-widget-panel-margin: 66px; + --appMenu-popup-margin: 66px; + --BMB_bookmarksPopup-margin: 66px; + } + :root[uidensity="touch"] { + --widget-overflow-margin: 72px; + --unified-extensions-panel-margin: 72px; + --customizationui-widget-panel-margin: 72px; + --appMenu-popup-margin: 72px; + --BMB_bookmarksPopup-margin: 72px; + } + + /* Adjust Widget Overflow Menu (») spawn height */ + #widget-overflow { + margin-bottom: var(--widget-overflow-margin) !important; } /* Adjust Unified Extensions Menu spawn height */ - #unified-extensions-view { - margin-top: -44px !important; - margin-bottom: -44px !important; - } - - /* Adjust Widget Overflow Menu (≫) spawn height */ - #widget-overflow { - padding-bottom: 60px !important; - } - - /* Adjust Main App Menu (≡) spawn height */ - #appMenu-popup { - margin-bottom: 56px !important; + #unified-extensions-panel { + margin-bottom: var(--unified-extensions-panel-margin) !important; } /* Adjust Tab Manager Menu spawn height */ #customizationui-widget-panel { - margin-bottom: 20px !important; + margin-bottom: var(--customizationui-widget-panel-margin) !important; + } + + /* Adjust Main App Menu (≡) spawn height */ + #appMenu-popup { + margin-bottom: var(--appMenu-popup-margin) !important; + } + + /* Adjust Bookmarks Menu (★) spawn height */ + #BMB_bookmarksPopup { + margin-bottom: var(--BMB_bookmarksPopup-margin) !important; } } diff --git a/src/userChrome/color_variable_template.css b/src/userChrome/color_variable_template.css deleted file mode 100644 index 2b790e7..0000000 --- a/src/userChrome/color_variable_template.css +++ /dev/null @@ -1,257 +0,0 @@ -/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/color_variable_template.css made available under Mozilla Public License v. 2.0 -See the above repository for updates as well as full license text. */ - -/* You should enable any non-default theme for these to apply properly. Built-in dark and light themes should work */ -:root { - /* Popup panels */ - --arrowpanel-background: black !important; - --arrowpanel-border-color: #dc8add !important; - --arrowpanel-color: #dc8add !important; - --arrowpanel-dimmed: rgba(220,138,221,0.6) !important; - --arrowpanel-dimmed-further: rgba(220,138,221,0.3) !important; -/* - --panel-background: black !important; - --panel-border-color: #dc8add !important; - --panel-color: white !important; - --panel-separator-color: #dc8add !important; -*/ - --panel-item-hover-bgcolor: rgba(220,138,221,0.5) !important; - --panel-item-active-bgcolor: #dc8add !important; - --panel-banner-item-background-color: #dc8add !important; - --panel-banner-item-hover-bgcolor: #dc8add !important; - --panel-banner-item-active-bgcolor: #dc8add !important; - --panel-banner-item-update-supported-bgcolor: #dc8add !important; - --panel-banner-item-info-icon-bgcolor: #dc8add !important; - --panel-banner-item-color: #dc8add !important; - --panel-description-color: #dc8add !important; - --panel-disabled-color: rgba(220,138,221,0.6) !important; - --uc-menu-bkgnd: transparent !important; - --uc-menu-color: #dc8add !important; - --uc-menu-dimmed: #dc8add !important; - --uc-menu-disabled: #dc8add !important; - --menuitem-disabled-hover-background-color: #dc8add !important; - - /* window and toolbar background */ - --lwt-accent-color: #dc8add !important; - --lwt-accent-color-inactive: #e8b1e8 !important; - --toolbar-non-lwt-bgcolor: black !important; - --toolbar-non-lwt-textcolor: #dc8add !important; - --toolbar-bgcolor: black !important; - --toolbar-color: #dc8add !important; - --tabpanel-background-color: black !important; - - /* tabs with system theme - text is not controlled by variable */ - --tab-selected-bgcolor: #dc8add !important; - - /* tabs with any other theme */ - --lwt-text-color: white !important; - --lwt-selected-tab-background-color: #dc8add !important; - - /* toolbar area */ -/* - --toolbarbutton-icon-fill: #dc8add !important; -*/ - --toolbarbutton-icon-fill-attention: white !important; - --toolbarbutton-hover-background: #dc8add !important; - --toolbarbutton-active-background: #dc8add !important; - --lwt-toolbarbutton-icon-fill-attention: white !important; - --lwt-toolbarbutton-hover-background: #dc8add !important; - --lwt-toolbarbutton-active-background: #dc8add !important; - --toolbarseparator-color: black !important; - - /* urlbar */ - --toolbar-field-border-color: #dc8add !important; - --toolbar-field-focus-border-color: #dc8add !important; - --urlbar-popup-url-color: white !important; -/* - --urlbar-box-bgcolor: var(--button-bgcolor); - --urlbar-box-focus-bgcolor: var(--button-bgcolor); - --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor); - --urlbar-box-active-bgcolor: var(--button-active-bgcolor); - --urlbar-box-text-color: inherit; - --urlbar-box-hover-text-color: var(--urlbar-box-text-color); - --lwt-brighttext-url-color: #00ddff; -*/ - - /* urlbar Firefox < 92 */ - --lwt-toolbar-field-background-color: #dc8add !important; - --lwt-toolbar-field-focus: white !important; - --lwt-toolbar-field-color: white !important; - --lwt-toolbar-field-focus-color: white !important; - - /* urlbar Firefox 92+ */ - --toolbar-field-background-color: #dc8add !important; - --toolbar-field-focus-background-color: #dc8add !important; - --toolbar-field-icon-fill-attention: #dc8add !important; - --toolbar-field-color: white !important; - --toolbar-field-focus-color: white !important; - - /* sidebar - note the sidebar-box rule for the header-area */ - --lwt-sidebar-background-color: black !important; - --lwt-sidebar-text-color: black !important; - - /* findbar */ - --focus-outline-color: #dc8add !important; - --input-border-color: #dc8add !important; - -/* buttons and checkboxes */ -/* - --button-bgcolor: black !important; - --button-color: white !important; - --button-hover-bgcolor: #dc8add !important; - --button-active-bgcolor: #dc8add !important; -*/ - --button-primary-bgcolor: #dc8add !important; - --button-primary-hover-bgcolor: #dc8add !important; - --button-primary-active-bgcolor: #dc8add !important; - --button-primary-color: white !important; - --in-content-primary-button-background: #dc8add !important; - --in-content-primary-button-background-hover: #dc8add !important; - --in-content-primary-button-background-active: #dc8add !important; -/* - --buttons-destructive-bgcolor: #e22850; - --buttons-destructive-hover-bgcolor: #c50042; - --buttons-destructive-active-bgcolor: #810220; - --buttons-destructive-color: #fbfbfe; -*/ - --checkbox-unchecked-bgcolor: black !important; - --checkbox-unchecked-hover-bgcolor: black !important; - --checkbox-unchecked-active-bgcolor: black !important; - --checkbox-checked-border-color: transparent !important; - --checkbox-checked-bgcolor: #dc8add !important; - --checkbox-checked-color: white !important; - --checkbox-checked-hover-bgcolor: rgba(220,138,221,0.9) !important; - --checkbox-checked-active-bgcolor: rgba(220,138,221,0.9) !important; - --uc-checkbox-checked-bgcolor: #dc8add !important; - - /* icon glow */ - --uc-icon-glow-primary: #dc8add; - --uc-icon-glow-secondary: white; - --uc-icon-glow-hover-primary: #dc8add; - --uc-icon-glow-hover-secondary: white; -} - -/* line between nav-bar and tabs toolbar, - also fallback color for border around selected tab */ -#navigator-toolbox { - --lwt-tabs-border-color: none !important; -} - -/* Line above tabs */ -#tabbrowser-tabs { - --lwt-tab-line-color: none !important; -} - -/* the header-area of sidebar needs this to work */ -#sidebar-box { - --sidebar-background-color: black !important; -} - -/* (context_menus_more_proton.css) */ - -/* OPTIONAL Set custom context menu colors below */ - -menupopup:not(.in-menulist) { - --panel-background: black !important; - --panel-color: white !important; - --panel-separator-color: #dc8add !important; - --panel-border-color: #dc8add !important; -} -menupopup > menuseparator { - border-color: var(--panel-separator-color,ThreeDShadow) !important; -} - -menupopup { - --panel-item-hover-bgcolor: var(--button-hover-bgcolor) !important; -} -menupopup > menuitem, -menupopup > menu { - appearance: none !important; - background-color: transparent !important; -} - -#context-navigation > menuitem[_moz-menuactive]:not([disabled]) .menu-iconic-icon, -menupopup > menuitem[_moz-menuactive], -menupopup > menu[_moz-menuactive] { - background-color: var(--panel-border-color) !important; - color: var(--panel-color,inherit) !important; -} -menupopup > menuitem[disabled][_moz-menuactive], -menupopup > menu[disabled][_moz-menuactive] { - background-color: var(--menuitem-disabled-hover-background-color) !important; -} - -/* (dark_context_menus.css) */ - -panel richlistbox, -panel tree, -panel button, -panel menulist, -panel textbox, -panel input, -menupopup, -menu, -menuitem { - -moz-appearance: none !important; -} - -panel menulist { - border: 1px solid transparent; -} - -panel richlistbox, -panel tree, -panel button, -panel menulist, -panel textbox, -panel input, -panel #searchbar, -menupopup:not(#BMB_bookmarksPopup), -#main-menubar > menu > menupopup, -#context-navigation { - color: var(--uc-menu-color) !important; - background-color: var(--uc-menu-bkgnd) !important; - border-color: var(--uc-menu-disabled) !important; -} - -panel input { - background-color: rgba(0,0,0,0.1) !important; -} -panel #searchbar { - background-color: rgba(0,0,0,0.1) !important; - padding: 0 !important; -} -panel #searchbar input { - background-color: transparent !important; -} - -panel menulist:hover, -panel menulist[open] { - border-color: Highlight !important; -} - -#editBMPanel_folderMenuList > menupopup > menuitem { - color: var(--uc-menu-color) !important; -} - -panel treechildren::-moz-tree-row(selected), -panel button:hover, -menu:hover, -menu[_moz-menuactive], -menuitem:hover, -menuitem[_moz-menuactive] { - background-color: var(--uc-menu-dimmed) !important; color: var(--lwt-text-color) !important; -} -menu[open] { - background-color: transparent !important; color: inherit !important; -} - -menu[disabled="true"], -menuitem[disabled="true"] { - color: var(--uc-menu-disabled) !important; -} - -menu[disabled="true"]:hover, -menuitem[disabled="true"]:hover { - color: var(--lwt-text-color) !important; -} diff --git a/src/userChrome/colors.css b/src/userChrome/colors.css deleted file mode 100644 index f1eaa35..0000000 --- a/src/userChrome/colors.css +++ /dev/null @@ -1,157 +0,0 @@ -/* Copyright 2023 user0 - * SPDX-License-Identifier: MPL-2.0 */ - -/* Various items color */ -arrowscrollbox, -findbar, -toolbar[type=menubar], -tooltip, -#TabsToolbar, -#navigator-toolbox, -#tabbrowser-arrowscrollbox { - background-color: var(--arrowpanel-background) !important; - color: var(--arrowpanel-color) !important; -} - -/* Tab throbber color */ -.tab-throbber[busy]::before { - fill: var(--lwt-text-color) !important; -} - -/* Inactive Tab throbber color */ -.tabbrowser-tab:not(:hover, [selected]) .tab-throbber[busy]::before { - fill: var(--lwt-accent-color) !important; -} - -/* Inactive tab color on hover */ -.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected]) { - background-color: var(--lwt-accent-color-inactive) !important; -} - -/* Inactive tab text and close button (x) color */ -.tab-text:not([selected]), -.tab-icon-image:not([selected]), -.tab-close-button:not([selected]) { - color: var(--lwt-accent-color) !important; -} - -/* Inactive tab text and close button (x) color on hover */ -.tabbrowser-tab:not([selected]):hover .tab-text, -.tabbrowser-tab:not([selected]):hover .tab-icon-image, -.tabbrowser-tab:not([selected]):hover .tab-close-button { - color: var(--lwt-text-color) !important; -} - -/* Tab text and close button (x) color */ -.tab-text, -.tab-icon-image, -.tab-close-button { - color: var(--lwt-text-color) !important; -} - -/* Tab close button (x) color on hover */ -.tab-close-button:hover, -.tab-close-button:not([selected]):hover { - background-color: var(--lwt-accent-color-inactive) !important; -} - -/* Container tab line color */ -.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line { - background-color: var(--tab-bgcolor) !important; -} - -/* Back button (←) color */ -#back-button > .toolbarbutton-icon { - border: none !important; - background-color: var(--arrowpanel-dimmed) !important; - background-image: none !important; -} - -/* Back button (←) color on hover */ -#back-button:not([disabled]):hover > .toolbarbutton-icon { - background-color: var(--lwt-accent-color) !important; - color: var(--lwt-text-color) !important; -} - -/* Forward button (→) color */ -#forward-button > .toolbarbutton-icon { - border: none !important; - background-color: unset !important; - background-image: none !important; -} - -/* Forward button (→) color on hover */ -#forward-button:not([disabled]):hover > .toolbarbutton-icon { - background-color: var(--lwt-accent-color) !important; - color: var(--lwt-text-color) !important; -} - -/* Urlbar color */ -*::selection { - background-color: var(--urlbar-popup-url-color) !important; - color: var(--lwt-accent-color) !important; -} -#nav-bar { - background-color: var(--arrowpanel-dimmed) !important; - background-image: linear-gradient(#0e0e0e,#0e0e0e) !important; -} -#urlbar:not([focused]) #urlbar-input-container { - filter: saturate(3); -} - -/* Bookmark button (★) post-animation color */ -#star-button, -#star-button[starred] { - color: var(--lwt-text-color) !important; -} - -/* "Saved to Library!" color */ -#confirmation-hint { - --arrowpanel-border-color: var(--lwt-accent-color) !important; - --arrowpanel-color: var(--lwt-text-color) !important; - --arrowpanel-background: var(--lwt-accent-color) !important; -} - -/* Navbar buttons color */ -#navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton)):hover:not([disabled]), -#navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton)):-moz-any(:hover:active, [checked], [open]):not([disabled]) { - color: var(--lwt-text-color) !important; -} - -/* Main App Menu button (≡) color on hover */ -.subviewbutton:hover { - background-color: var(--arrowpanel-color) !important; - color: var(--lwt-text-color) !important; -} - -/* Findbar color */ -.browserContainer > findbar { - border: none !important; - background-color: var(--toolbar-bgcolor) !important; - color: var(--toolbar-color) !important; - box-shadow: none !important; -} -input.findbar-textbox { - border: 1px solid var(--toolbar-color) !important; - background-color: var(--toolbar-bgcolor) !important; - color: var(--toolbar-color) !important; - box-shadow: 0 0 3px var(--toolbar-color) !important; -} -.findbar-find-previous, -.findbar-find-next { - border: none !important; - background-color: transparent !important; - color: var(--toolbar-color) !important; -} - -/* Status panel color */ -#statuspanel #statuspanel-inner { - border: none !important; - height: 23x !important; - background-color: transparent !important; -} -#statuspanel #statuspanel-label { - border: none !important; - background-color: var(--arrowpanel-background) !important; - color: var(--arrowpanel-color) !important; -} diff --git a/src/userChrome/custom_rules.css b/src/userChrome/custom_rules.css index c463f1d..000a65a 100644 --- a/src/userChrome/custom_rules.css +++ b/src/userChrome/custom_rules.css @@ -1,6 +1,36 @@ /* Copyright 2023 user0 * SPDX-License-Identifier: MPL-2.0 */ +/* Disable tab loading burst + (because it's annoying) */ + .tab-loading-burst { + display: none !important; +} + +/* Tabs Toolbar and Container tab line color + (hides container tab line above tab by making it the same color as the Tabs Toolbar) */ +#TabsToolbar, +.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line { + background-color: var(--tab-bgcolor) !important; +} + +/* Menubar color + (hides the line at the top of the screen when Menubar is hidden) */ +toolbar[type=menubar] { + background-color: black !important; + color: var(--toolbar-color) !important; +} + +/* Navbar bottom border color */ +#navigator-toolbox { + border-bottom-color: black !important; +} + +/* Resist Fingerprinting Letterbox background color */ +:root { + --tabpanel-background-color: black !important; +} + /* Apply this customization only on smaller screens */ @media (max-width: 700px) { @@ -23,7 +53,7 @@ display: none !important; } - /* Remove items from urlbar */ + /* Remove items from URL Bar */ #tracking-protection-icon-container, #identity-permission-box, #userContext-indicator, @@ -32,7 +62,7 @@ display: none !important; } - /* Urlbar font resizing */ + /* URL Bar font resizing */ #urlbar-input { font-size: 10pt !important; } @@ -40,36 +70,11 @@ font-size: calc(var(--urlbar-height) - 9px) !important; } - /* Hide Inactive tab close button (x) + /* Hide inactive tab close button (x) to prevent accidentally closing tabs when selecting them */ .tab-close-button:not([selected]), .tabbrowser-tab:not([selected]):hover .tab-close-button { visibility: hidden !important; } - /* Disable tab loading burst - (because it's annoying) */ - .tab-loading-burst { - display: none !important; - } - - /* Tabs Toolbar and Container tab line color - (hides container tab line above tab by making it the same color as the Tabs Toolbar) */ - #TabsToolbar, - .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line { - background-color: var(--tab-bgcolor) !important; - } - - /* Menubar color - (hides the line at the top of the screen when Menubar is hidden) */ - toolbar[type=menubar] { - background-color: black !important; - color: var(--toolbar-color) !important; - } - - /* Navbar bottom border color */ - #navigator-toolbox { - border-bottom-color: black !important; - } - } diff --git a/src/userChrome/dynamic_popups.css b/src/userChrome/dynamic_popups.css new file mode 100644 index 0000000..de375fe --- /dev/null +++ b/src/userChrome/dynamic_popups.css @@ -0,0 +1,86 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --unified-extensions-panel-padding: 112px; + --customizationui-widget-panel-padding: 112px; + } + :root[uidensity="touch"] { + --unified-extensions-panel-padding: 110px; + --customizationui-widget-panel-padding: 110px; + } + + /* Dynamically expand popups */ + #unified-extensions-view { + height: calc(100vh - 171px) !important; + max-height: calc(100vh - 171px) !important; + } + #customizationui-widget-multiview box.panel-viewstack { + height: calc(100vh - 165px) !important; + max-height: calc(100vh - 165px) !important; + } + #appMenu-popup, + #appMenu-protonMainView vbox.panel-subview-body { + margin-top: 0 !important; + height: calc(100vh - 107px) !important; + max-height: calc(100vh - 107px) !important; + } + + /* Adjust Unified Extensions Menu and Tab Manager Menu to fill screen width */ + #unified-extensions-panel, + #customizationui-widget-panel { + padding: 0 !important; + } + #customizationui-widget-multiview { + width: 100vw !important; + } + #allTabsMenu-allTabsView-tabs { + max-width: calc(100vw - 10px) !important; + } + #unified-extensions-view, + #allTabsMenu-containerTabsButton, + .all-tabs-item { + width: calc(100vw - 10px) !important; + } + + /* Adjust Unified Extensions Menu spawn height */ + #unified-extensions-panel { + margin-bottom: 6px !important; + padding-top: var(--unified-extensions-panel-padding) !important; + } + + /* Adjust Tab Manager Menu spawn height */ + #customizationui-widget-panel { + margin-bottom: 6px !important; + padding-top: var(--customizationui-widget-panel-padding) !important; + } + + /* Blend panels into background */ + #unified-extensions-panel, + #customizationui-widget-panel { + background-color: black !important; + } + + /* Allow extensions to use full popup */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: 100vw !important; + min-width: 100vw !important; + } + + /* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */ + #unified-extensions-area { + padding-bottom: 350px !important; + } + + /* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */ + #appMenu-quit-button2 { + margin-bottom: 300px !important; + } + +} diff --git a/src/userChrome/dynamic_popups_max.css b/src/userChrome/dynamic_popups_max.css new file mode 100644 index 0000000..0076fc2 --- /dev/null +++ b/src/userChrome/dynamic_popups_max.css @@ -0,0 +1,88 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --unified-extensions-view-height: calc(100vh - 57px); + --customizationui-widget-height: calc(100vh - 51px); + --unified-extensions-panel-margin: 5px; + --customizationui-widget-panel-margin: 5px; + } + :root[uidensity="touch"] { + --unified-extensions-view-height: calc(100vh - 61px); + --customizationui-widget-height: calc(100vh - 55px); + --unified-extensions-panel-margin: 6px; + --customizationui-widget-panel-margin: 6px; + } + + /* Dynamically expand popups */ + #unified-extensions-view { + height: var(--unified-extensions-view-height) !important; + max-height: var(--unified-extensions-view-height) !important; + } + #customizationui-widget-multiview box.panel-viewstack { + height: var(--customizationui-widget-height) !important; + max-height: var(--customizationui-widget-height) !important; + } + #appMenu-popup, + #appMenu-protonMainView vbox.panel-subview-body { + margin-top: 0 !important; + height: calc(100vh - 107px) !important; + max-height: calc(100vh - 107px) !important; + } + + /* Adjust Unified Extensions Menu and Tab Manager Menu to fill screen width */ + #unified-extensions-panel, + #customizationui-widget-panel { + padding: 0 !important; + } + #customizationui-widget-multiview { + width: 100vw !important; + } + #allTabsMenu-allTabsView-tabs { + max-width: calc(100vw - 10px) !important; + } + #unified-extensions-view, + #allTabsMenu-containerTabsButton, + .all-tabs-item { + width: calc(100vw - 10px) !important; + } + + /* Adjust Unified Extensions Menu spawn height */ + #unified-extensions-panel { + margin-bottom: var(--unified-extensions-panel-margin) !important; + } + + /* Adjust Tab Manager Menu spawn height */ + #customizationui-widget-panel { + margin-bottom: var(--customizationui-widget-panel-margin) !important; + } + + /* Blend panels into background */ + #unified-extensions-panel, + #customizationui-widget-panel { + background-color: black !important; + } + + /* Allow extensions to use full popup */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: 100vw !important; + min-width: 100vw !important; + } + + /* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */ + #unified-extensions-area { + padding-bottom: 370px !important; + } + + /* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */ + #appMenu-quit-button2 { + margin-bottom: 300px !important; + } + +} diff --git a/src/userChrome/dynamic_popups_plus.css b/src/userChrome/dynamic_popups_plus.css new file mode 100644 index 0000000..ae1cf00 --- /dev/null +++ b/src/userChrome/dynamic_popups_plus.css @@ -0,0 +1,71 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --unified-extensions-panel-padding: 25px; + --customizationui-widget-panel-padding: 25px; + } + :root[uidensity="touch"] { + --unified-extensions-panel-padding: 22px; + --customizationui-widget-panel-padding: 22px; + } + + /* Dynamically expand popups */ + #unified-extensions-view { + height: calc(100vh - 100px) !important; + max-height: calc(100vh - 100px) !important; + } + #customizationui-widget-multiview box.panel-viewstack { + height: calc(100vh - 95px) !important; + max-height: calc(100vh - 95px) !important; + } + #appMenu-popup, + #appMenu-protonMainView vbox.panel-subview-body { + margin-top: 0 !important; + height: calc(100vh - 107px) !important; + max-height: calc(100vh - 107px) !important; + } + + /* Adjust Unified Extensions Menu spawn height */ + #unified-extensions-panel { + margin-bottom: 6px !important; + padding-top: var(--unified-extensions-panel-padding) !important; + padding-bottom: 17px !important; + } + + /* Adjust Tab Manager Menu spawn height */ + #customizationui-widget-panel { + margin-bottom: 6px !important; + padding-top: var(--customizationui-widget-panel-padding) !important; + padding-bottom: 17px !important; + } + + /* Blend panels into background */ + #unified-extensions-panel, + #customizationui-widget-panel { + background-color: black !important; + } + + /* Allow extensions to use full popup */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: calc(100vw - 20px) !important; + min-width: calc(100vw - 20px) !important; + } + + /* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */ + #unified-extensions-area { + padding-bottom: 350px !important; + } + + /* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */ + #appMenu-quit-button2 { + margin-bottom: 300px !important; + } + +} diff --git a/src/userChrome/dynamic_popups_pro.css b/src/userChrome/dynamic_popups_pro.css new file mode 100644 index 0000000..fffffd3 --- /dev/null +++ b/src/userChrome/dynamic_popups_pro.css @@ -0,0 +1,83 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Dynamically expand popups */ + #unified-extensions-view { + height: calc(100vh - 171px) !important; + max-height: calc(100vh - 171px) !important; + } + #customizationui-widget-multiview box.panel-viewstack { + height: calc(100vh - 165px) !important; + max-height: calc(100vh - 165px) !important; + } + #appMenu-popup, + #appMenu-protonMainView vbox.panel-subview-body { + margin-top: 0 !important; + height: calc(100vh - 107px) !important; + max-height: calc(100vh - 107px) !important; + } + + /* Adjust Unified Extensions Menu and Tab Manager Menu to fill screen width */ + #unified-extensions-panel, + #customizationui-widget-panel { + padding: 0 !important; + } + #customizationui-widget-multiview { + width: 100vw !important; + } + #allTabsMenu-allTabsView-tabs { + max-width: calc(100vw - 10px) !important; + } + #unified-extensions-view, + #allTabsMenu-containerTabsButton, + .all-tabs-item { + width: calc(100vw - 10px) !important; + } + + /* Adjust Unified Extensions Menu spawn height */ + #unified-extensions-panel { + margin-bottom: 6px !important; + } + + /* Adjust Tab Manager Menu spawn height */ + #customizationui-widget-panel { + margin-bottom: 6px !important; + } + + /* Blend panels with views */ + panel { + --panel-background: none !important; + --panel-shadow: none !important; + } + #unified-extensions-panel { + background-color: var(--arrowpanel-background) !important; + } + #customizationui-widget-panel { + /* Default color: */ + /*background-color: var(--arrowpanel-background) !important;*/ + /* Fenix color: */ + background-color: var(--toolbar-bgcolor) !important; + } + + /* Allow extensions to use full popup */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: 100vw !important; + min-width: 100vw !important; + } + + /* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */ + #unified-extensions-area { + padding-bottom: 350px !important; + } + + /* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */ + #appMenu-quit-button2 { + margin-bottom: 300px !important; + } + +} diff --git a/src/userChrome/dynamic_popups_pro_max.css b/src/userChrome/dynamic_popups_pro_max.css new file mode 100644 index 0000000..146fa04 --- /dev/null +++ b/src/userChrome/dynamic_popups_pro_max.css @@ -0,0 +1,97 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --unified-extensions-view-height: calc(100vh - 57px); + --customizationui-widget-height: calc(100vh - 51px); + --unified-extensions-panel-margin: 5px; + --customizationui-widget-panel-margin: 5px; + } + :root[uidensity="touch"] { + --unified-extensions-view-height: calc(100vh - 61px); + --customizationui-widget-height: calc(100vh - 55px); + --unified-extensions-panel-margin: 6px; + --customizationui-widget-panel-margin: 6px; + } + + /* Dynamically expand popups */ + #unified-extensions-view { + height: var(--unified-extensions-view-height) !important; + max-height: var(--unified-extensions-view-height) !important; + } + #customizationui-widget-multiview box.panel-viewstack { + height: var(--customizationui-widget-height) !important; + max-height: var(--customizationui-widget-height) !important; + } + #appMenu-popup, + #appMenu-protonMainView vbox.panel-subview-body { + margin-top: 0 !important; + height: calc(100vh - 107px) !important; + max-height: calc(100vh - 107px) !important; + } + + /* Adjust Unified Extensions Menu and Tab Manager Menu to fill screen width */ + #unified-extensions-panel, + #customizationui-widget-panel { + padding: 0 !important; + } + #customizationui-widget-multiview { + width: 100vw !important; + } + #allTabsMenu-allTabsView-tabs { + max-width: calc(100vw - 10px) !important; + } + #unified-extensions-view, + #allTabsMenu-containerTabsButton, + .all-tabs-item { + width: calc(100vw - 10px) !important; + } + + /* Adjust Unified Extensions Menu spawn height */ + #unified-extensions-panel { + margin-bottom: var(--unified-extensions-panel-margin) !important; + } + + /* Adjust Tab Manager Menu spawn height */ + #customizationui-widget-panel { + margin-bottom: var(--customizationui-widget-panel-margin) !important; + } + + /* Blend panels with views */ + panel { + --panel-background: none !important; + --panel-shadow: none !important; + } + #unified-extensions-panel { + background-color: var(--arrowpanel-background) !important; + } + #customizationui-widget-panel { + /* Default color: */ + /*background-color: var(--arrowpanel-background) !important;*/ + /* Fenix color: */ + background-color: var(--toolbar-bgcolor) !important; + } + + /* Allow extensions to use full popup */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: 100vw !important; + min-width: 100vw !important; + } + + /* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */ + #unified-extensions-area { + padding-bottom: 370px !important; + } + + /* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */ + #appMenu-quit-button2 { + margin-bottom: 300px !important; + } + +} diff --git a/src/userChrome/editBookmarkPanel.css b/src/userChrome/editBookmarkPanel.css index d0844b0..c60e110 100644 --- a/src/userChrome/editBookmarkPanel.css +++ b/src/userChrome/editBookmarkPanel.css @@ -9,10 +9,15 @@ * testing. */ #editBookmarkPanel { - margin-top: -390px !important; + /*margin-top: -390px !important; height: 200px; max-height: 200px; - max-width: calc(100vw - 100px); + max-width: calc(100vw - 100px);*/ + background-color: var(--arrowpanel-background) !important; + margin-bottom: 225px !important; + max-height: 100vh !important; + max-width: 100vw !important; + width: 100vw !important; } #editBookmarkPanel box.panel-header, @@ -21,9 +26,11 @@ } #editBookmarkPanelContent { - max-width: 250px !important; + /*max-width: 250px !important; width: 250px !important; - padding-right: 20px; + padding-right: 20px;*/ + padding-top: 0 !important; + padding-bottom: 0 !important; } /* Hide the screenshot and the line below it. The page is right there when @@ -44,10 +51,12 @@ } #editBookmarkPanelBottomButtons { - width: 250px !important; + /*width: 250px !important; min-width: 250px !important; padding: 0px !important; justify-content: flex-start !important; - margin: 0px 0px 20px 0px !important; + margin: 0px 0px 20px 0px !important;*/ + margin-top: -5px !important; + margin-left: -50px !important; } } diff --git a/src/userChrome/extensions_menu.css b/src/userChrome/extensions_menu.css new file mode 100644 index 0000000..f896671 --- /dev/null +++ b/src/userChrome/extensions_menu.css @@ -0,0 +1,44 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Remove header, separators, and manage-extensions button */ + #unified-extensions-panel .panel-header, + #unified-extensions-panel toolbarseparator, + #unified-extensions-manage-extensions { + display: none !important; + } + + /* Adjust button padding and font size for secondary text */ + #unified-extensions-panel .subviewbutton { + padding: 6px !important; + } + .unified-extensions-item-message { + font-size: 75% !important; + } + + /* Fix flickering */ + #unified-extensions-panel { + --uei-icon-size: 20px; + padding-left: 10px !important; + padding-right: 10px !important; + width: 100vw !important; + } + #unified-extensions-view { + margin-top: 6px !important; + height: 325px !important; + max-height: 325px !important; + width: calc(100vw - 30px) !important; + } + + /* Allow extensions to use full popup */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: calc(100vw - 20px) !important; + min-width: calc(100vw - 20px) !important; + } + +} diff --git a/src/userChrome/fenix-alt.css b/src/userChrome/fenix-alt.css new file mode 100644 index 0000000..49d07ba --- /dev/null +++ b/src/userChrome/fenix-alt.css @@ -0,0 +1,364 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/******************************************/ +/* IMPORTANT: */ +/* */ +/* One of the things this code will do is */ +/* to move the Tab Manager Menu button to */ +/* the right side of the URL Bar. */ +/* */ +/* For the best results, consider moving */ +/* the Unified Extensions Menu button to */ +/* the left of the URL Bar and removing */ +/* less important toolbar items by using */ +/* the "Customize Toolbar" feature, or by */ +/* using a user.js file in your profile. */ +/******************************************/ + +/* Main App Menu (≡) item icons */ +#appMenu-zoom-controls::before, +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before, +#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image { + fill: currentColor; + -moz-context-properties: fill; + margin-inline: 0 20px !important; +} +#appMenu-zoom-controls::before, +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { + display: flex; + content: ""; + width: 16px; + height: 16px; +} +#appMenu-new-tab-button2 { + order: 1 !important; + list-style-image: url("chrome://global/skin/icons/plus.svg"); +} +#appMenu-bookmarks-button { + order: 2 !important; + list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); +} +#appMenu-history-button { + order: 3 !important; + list-style-image: url("chrome://browser/skin/history.svg"); +} +#appMenu-downloads-button { + order: 4 !important; + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} +#appMenu-extensions-themes-button { + order: 5 !important; + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); +} +#appMenu-passwords-button { + order: 6 !important; + list-style-image: url("chrome://browser/skin/login.svg"); +} +#appMenu-find-button2 { + order: 7 !important; + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); +} +#appMenu-zoom-controls { + order: 8 !important; +} +#appMenu-zoom-controls::before { + background-image: url("chrome://browser/skin/fullscreen.svg"); +} +#appMenu-new-window-button2 { + order: 9 !important; + list-style-image: url("chrome://browser/skin/window.svg"); +} +#appMenu-new-private-window-button2 { + order: 10 !important; + list-style-image: url("chrome://browser/skin/privateBrowsing.svg"); +} +#appMenu-save-file-button2 { + order: 11 !important; + list-style-image: url("chrome://browser/skin/save.svg"); +} +#appMenu-print-button2 { + order: 12 !important; + list-style-image: url("chrome://global/skin/icons/print.svg"); +} +#appMenu-help-button2 { + order: 13 !important; + list-style-image: url("chrome://global/skin/icons/help.svg"); +} +#appMenu-more-button2 { + order: 14 !important; + list-style-image: url("chrome://global/skin/icons/developer.svg"); +} +#appMenu-settings-button { + order: 15 !important; + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} +#appMenu-quit-button2 { + order: 16 !important; + list-style-image: url("chrome://devtools/skin/images/search-clear.svg"); +} +/* Use account-button icon for signed in sync item */ +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { + background-image: var(--avatar-image-url) +} + +/* Apply this customization only on smaller screens in landscape mode */ +@media (max-height: 300px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --urlbar-width: calc(100vw - 188.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --urlbar-width: calc(100vw - 196.5px); + } + + /* Change Main App Menu (≡) button to its mobile equivalent (⋮) */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + margin-right: -10px !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack { + position: relative !important; + width: 75% !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack::before { + content: "⋮"; + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.9 ); + left: 50%; + transform: translateX(-50%); + font-size: 18px !important; + font-weight: bold !important; + } + + /* Find Bar */ + input.findbar-textbox { + font-size: 12pt !important; + } + + /* Tab Manager Menu inspired by Firefox for Android */ + #allTabsMenu-containerTabsButton { + border-radius: 0 !important; + margin: 0 !important; + padding-left: 10px !important; + padding-right: 10px !important; + width: calc(100vw - 207px) !important; + } + .all-tabs-item { + border-radius: 0 !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(100vw - 207px) !important; + } + .all-tabs-close-button { + border-radius: 100% !important; + margin-left: calc(var(--urlbar-min-height) * -0.6 ) !important; + margin-right: calc(var(--urlbar-min-height) * -0.6 ) !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(var(--urlbar-min-height) * 2.25 ) !important; + } + .all-tabs-close-button > .toolbarbutton-icon { + margin-left: calc(var(--urlbar-min-height) * 0.625 ) !important; + height: calc(var(--urlbar-min-height) * 0.5 ) !important; + width: calc(var(--urlbar-min-height) * 0.5 ) !important; + } + + /* Tab Manager Menu button inspired by Firefox for Android */ + #alltabs-button > .toolbarbutton-badge-stack::before { + border: 1px solid var(--toolbarbutton-icon-fill); + border-radius: 2px; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.85 ) !important; + padding: 0 5px 0 5px; + font-size: 8px !important; + font-weight: 600 !important; + font-family: "Noto Sans" !important; + } + + /* Move Tab Manager Menu button to right of URL Bar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + top: var(--alltabs-button-position) !important; + right: 28.5px; + z-index: 2 !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* URL Bar */ + #urlbar { + width: var(--urlbar-width) !important; + } + #urlbar, + #searchbar, + #urlbar-input, + #urlbar-input-container, + #urlbar-background { + border-radius: 7px !important; + } + + /* Change Unified Extensions Menu button icon to Home button icon */ + #unified-extensions-button { + list-style-image: url("chrome://browser/skin/home.svg") !important; + } + +} + +/* Apply this customization only on smaller screens in portait mode */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 4px; + --urlbar-width: calc(100vw - 110.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 5px; + --urlbar-width: calc(100vw - 114.5px); + } + + /* Main App Menu (≡) */ + #appMenu-popup { + width: 260px !important; + } + #appMenu-protonMainView vbox.panel-subview-body { + padding-top: 8px !important; + width: 230px !important; + } + + /* Change Main App Menu (≡) button to its mobile equivalent (⋮) */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + margin-right: -10px !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack { + position: relative !important; + width: 75% !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack::before { + content: "⋮"; + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.9 ); + left: 50%; + transform: translateX(-50%); + font-size: 18px !important; + font-weight: bold !important; + } + + /* Hide Back button, Tab Bar, and Private Browsing Indicator */ + #back-button, + #tabbrowser-tabs, + #private-browsing-indicator-with-label { + visibility: collapse !important; + } + + /* Find Bar */ + input.findbar-textbox { + font-size: 12pt !important; + } + + /* Tab Manager Menu inspired by Firefox for Android */ + #allTabsMenu-containerTabsButton { + border-radius: 0 !important; + margin: 0 !important; + padding-left: 10px !important; + padding-right: 10px !important; + width: calc(100vw - 30px) !important; + } + .all-tabs-item { + border-radius: 0 !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(100vw - 30px) !important; + } + .all-tabs-close-button { + border-radius: 100% !important; + margin-left: calc(var(--urlbar-min-height) * -0.6 ) !important; + margin-right: calc(var(--urlbar-min-height) * -0.6 ) !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(var(--urlbar-min-height) * 2.25 ) !important; + } + .all-tabs-close-button > .toolbarbutton-icon { + margin-left: calc(var(--urlbar-min-height) * 0.625 ) !important; + height: calc(var(--urlbar-min-height) * 0.5 ) !important; + width: calc(var(--urlbar-min-height) * 0.5 ) !important; + } + + /* Tab Manager Menu button inspired by Firefox for Android */ + #alltabs-button > .toolbarbutton-badge-stack::before { + border: 1px solid var(--toolbarbutton-icon-fill); + border-radius: 2px; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.85 ) !important; + padding: 0 5px 0 5px; + font-size: 9px !important; + font-weight: 600 !important; + } + + /* Move Tab Manager Menu button to right of urlbar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + top: var(--alltabs-button-position) !important; + right: 28.5px; + z-index: 2 !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* URL Bar */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + #urlbar, + #searchbar, + #urlbar-input, + #urlbar-input-container, + #urlbar-background { + border-radius: 7px !important; + } + + /* Change Unified Extensions Menu button icon to Home button icon */ + #unified-extensions-button { + list-style-image: url("chrome://browser/skin/home.svg") !important; + } + +} diff --git a/src/userChrome/fenix.css b/src/userChrome/fenix.css new file mode 100644 index 0000000..a31431b --- /dev/null +++ b/src/userChrome/fenix.css @@ -0,0 +1,364 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/******************************************/ +/* IMPORTANT: */ +/* */ +/* One of the things this code will do is */ +/* to move the Tab Manager Menu button to */ +/* the right side of the URL Bar. */ +/* */ +/* For the best results, consider moving */ +/* the Unified Extensions Menu button to */ +/* the left of the URL Bar and removing */ +/* less important toolbar items by using */ +/* the "Customize Toolbar" feature, or by */ +/* using a user.js file in your profile. */ +/******************************************/ + +/* Main App Menu (≡) item icons */ +#appMenu-zoom-controls::before, +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before, +#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image { + fill: currentColor; + -moz-context-properties: fill; + margin-inline: 0 20px !important; +} +#appMenu-zoom-controls::before, +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { + display: flex; + content: ""; + width: 16px; + height: 16px; +} +#appMenu-new-tab-button2 { + order: 1 !important; + list-style-image: url("chrome://global/skin/icons/plus.svg"); +} +#appMenu-bookmarks-button { + order: 2 !important; + list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); +} +#appMenu-history-button { + order: 3 !important; + list-style-image: url("chrome://browser/skin/history.svg"); +} +#appMenu-downloads-button { + order: 4 !important; + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} +#appMenu-extensions-themes-button { + order: 5 !important; + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); +} +#appMenu-passwords-button { + order: 6 !important; + list-style-image: url("chrome://browser/skin/login.svg"); +} +#appMenu-find-button2 { + order: 7 !important; + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); +} +#appMenu-zoom-controls { + order: 8 !important; +} +#appMenu-zoom-controls::before { + background-image: url("chrome://browser/skin/fullscreen.svg"); +} +#appMenu-new-window-button2 { + order: 9 !important; + list-style-image: url("chrome://browser/skin/window.svg"); +} +#appMenu-new-private-window-button2 { + order: 10 !important; + list-style-image: url("chrome://browser/skin/privateBrowsing.svg"); +} +#appMenu-save-file-button2 { + order: 11 !important; + list-style-image: url("chrome://browser/skin/save.svg"); +} +#appMenu-print-button2 { + order: 12 !important; + list-style-image: url("chrome://global/skin/icons/print.svg"); +} +#appMenu-help-button2 { + order: 13 !important; + list-style-image: url("chrome://global/skin/icons/help.svg"); +} +#appMenu-more-button2 { + order: 14 !important; + list-style-image: url("chrome://global/skin/icons/developer.svg"); +} +#appMenu-settings-button { + order: 15 !important; + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} +#appMenu-quit-button2 { + order: 16 !important; + list-style-image: url("chrome://devtools/skin/images/search-clear.svg"); +} +/* Use account-button icon for signed in sync item */ +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { + background-image: var(--avatar-image-url) +} + +/* Apply this customization only on smaller screens in landscape mode */ +@media (max-height: 300px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --urlbar-width: calc(100vw - 188.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --urlbar-width: calc(100vw - 196.5px); + } + + /* Change Main App Menu (≡) button to its mobile equivalent (⋮) */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + margin-right: -10px !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack { + position: relative !important; + width: 75% !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack::before { + content: "⋮"; + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.9 ); + left: 50%; + transform: translateX(-50%); + font-size: 18px !important; + font-weight: bold !important; + } + + /* Find Bar */ + input.findbar-textbox { + font-size: 12pt !important; + } + + /* Tab Manager Menu inspired by Firefox for Android */ + #allTabsMenu-containerTabsButton { + border-radius: 0 !important; + margin: 0 !important; + padding-left: 10px !important; + padding-right: 10px !important; + width: calc(100vw - 207px) !important; + } + .all-tabs-item { + border-radius: 0 !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(100vw - 207px) !important; + } + .all-tabs-close-button { + border-radius: 100% !important; + margin-left: calc(var(--urlbar-min-height) * -0.6 ) !important; + margin-right: calc(var(--urlbar-min-height) * -0.6 ) !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(var(--urlbar-min-height) * 2.25 ) !important; + } + .all-tabs-close-button > .toolbarbutton-icon { + margin-left: calc(var(--urlbar-min-height) * 0.625 ) !important; + height: calc(var(--urlbar-min-height) * 0.5 ) !important; + width: calc(var(--urlbar-min-height) * 0.5 ) !important; + } + + /* Tab Manager Menu button inspired by Firefox for Android */ + #alltabs-button > .toolbarbutton-badge-stack::before { + border: 1px solid var(--toolbarbutton-icon-fill); + border-radius: 2px; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.85 ) !important; + padding: 0 5px 0 5px; + font-size: 8px !important; + font-weight: 600 !important; + font-family: "Noto Sans" !important; + } + + /* Move Tab Manager Menu button to right of URL Bar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + bottom: var(--alltabs-button-position) !important; + right: 28.5px; + z-index: 2 !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* URL Bar */ + #urlbar { + width: var(--urlbar-width) !important; + } + #urlbar, + #searchbar, + #urlbar-input, + #urlbar-input-container, + #urlbar-background { + border-radius: 7px !important; + } + + /* Change Unified Extensions Menu button icon to Home button icon */ + #unified-extensions-button { + list-style-image: url("chrome://browser/skin/home.svg") !important; + } + +} + +/* Apply this customization only on smaller screens in portait mode */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 3.5px; + --urlbar-width: calc(100vw - 110.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 4.5px; + --urlbar-width: calc(100vw - 114.5px); + } + + /* Main App Menu (≡) */ + #appMenu-popup { + width: 260px !important; + } + #appMenu-protonMainView vbox.panel-subview-body { + padding-top: 8px !important; + width: 230px !important; + } + + /* Change Main App Menu (≡) button to its mobile equivalent (⋮) */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + margin-right: -10px !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack { + position: relative !important; + width: 75% !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack::before { + content: "⋮"; + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.9 ); + left: 50%; + transform: translateX(-50%); + font-size: 18px !important; + font-weight: bold !important; + } + + /* Hide Back button, Tab Bar, and Private Browsing Indicator */ + #back-button, + #tabbrowser-tabs, + #private-browsing-indicator-with-label { + visibility: collapse !important; + } + + /* Find Bar */ + input.findbar-textbox { + font-size: 12pt !important; + } + + /* Tab Manager Menu inspired by Firefox for Android */ + #allTabsMenu-containerTabsButton { + border-radius: 0 !important; + margin: 0 !important; + padding-left: 10px !important; + padding-right: 10px !important; + width: calc(100vw - 30px) !important; + } + .all-tabs-item { + border-radius: 0 !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(100vw - 30px) !important; + } + .all-tabs-close-button { + border-radius: 100% !important; + margin-left: calc(var(--urlbar-min-height) * -0.6 ) !important; + margin-right: calc(var(--urlbar-min-height) * -0.6 ) !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(var(--urlbar-min-height) * 2.25 ) !important; + } + .all-tabs-close-button > .toolbarbutton-icon { + margin-left: calc(var(--urlbar-min-height) * 0.625 ) !important; + height: calc(var(--urlbar-min-height) * 0.5 ) !important; + width: calc(var(--urlbar-min-height) * 0.5 ) !important; + } + + /* Tab Manager Menu button inspired by Firefox for Android */ + #alltabs-button > .toolbarbutton-badge-stack::before { + border: 1px solid var(--toolbarbutton-icon-fill); + border-radius: 2px; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.85 ) !important; + padding: 0 5px 0 5px; + font-size: 9px !important; + font-weight: 600 !important; + } + + /* Move Tab Manager Menu button to right of urlbar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + bottom: var(--alltabs-button-position) !important; + right: 28.5px; + z-index: 2 !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* URL Bar */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + #urlbar, + #searchbar, + #urlbar-input, + #urlbar-input-container, + #urlbar-background { + border-radius: 7px !important; + } + + /* Change Unified Extensions Menu button icon to Home button icon */ + #unified-extensions-button { + list-style-image: url("chrome://browser/skin/home.svg") !important; + } + +} diff --git a/src/userChrome/fenix_colors.css b/src/userChrome/fenix_colors.css new file mode 100644 index 0000000..d573fe3 --- /dev/null +++ b/src/userChrome/fenix_colors.css @@ -0,0 +1,242 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/color_variable_template.css made available under Mozilla Public License v. 2.0 +See the above repository for updates as well as full license text. */ + +:root { + /* Popup panels */ + --arrowpanel-background: rgb(41,29,79) !important; + --arrowpanel-border-color: transparent !important; + --arrowpanel-color: white !important; + --arrowpanel-dimmed: rgb(97,84,124) !important; + --arrowpanel-dimmed-further: rgb(66,50,98) !important; + --panel-background: rgb(41,29,79) !important; + --panel-border-color: transparent !important; + --panel-color: white !important; + --panel-separator-color: transparent !important; + --panel-item-hover-bgcolor: rgba(255,255,255,0.2) !important; + --panel-item-active-bgcolor: rgba(255,255,255,0.2) !important; + --panel-banner-item-background-color: rgb(117,66,228) !important; + --panel-banner-item-hover-bgcolor: rgb(69,68,76) !important; + --panel-banner-item-active-bgcolor: rgb(69,68,76) !important; + --panel-banner-item-update-supported-bgcolor: rgb(117,66,228) !important; + --panel-banner-item-info-icon-bgcolor: rgb(117,66,228) !important; + --panel-banner-item-color: white !important; + --panel-description-color: white !important; + --panel-disabled-color: gray !important; + --menuitem-disabled-hover-background-color: transparent !important; + + /* window and toolbar background */ + --lwt-accent-color: rgb(117,66,228) !important; + --lwt-accent-color-inactive: rgba(117,66,228,0.3) !important; + --toolbar-non-lwt-bgcolor: rgb(41,29,79) !important; + --toolbar-non-lwt-textcolor: white !important; + --toolbar-bgcolor: rgb(43,42,51) !important; + --toolbar-color: rgb(171,113,255) !important; + --tabpanel-background-color: black !important; + + /* tabs with system theme - text is not controlled by variable */ + --tab-selected-bgcolor: rgb(117,66,228) !important; + + /* tabs with any other theme */ + --lwt-text-color: white !important; + --lwt-selected-tab-background-color: rgb(117,66,228) !important; + + /* toolbar area */ + --toolbarbutton-icon-fill: white !important; + --toolbarbutton-icon-fill-attention: white !important; + --toolbarbutton-hover-background: rgba(255,255,255,0.2) !important; + --toolbarbutton-active-background: rgba(255,255,255,0.2) !important; + --lwt-toolbarbutton-icon-fill-attention: white !important; + --lwt-toolbarbutton-hover-background: rgba(255,255,255,0.2) !important; + --lwt-toolbarbutton-active-background: rgba(255,255,255,0.2) !important; + --toolbarseparator-color: black !important; + + /* urlbar */ + --toolbar-field-border-color: rgb(28,27,34) !important; + --toolbar-field-focus-border-color: rgb(28,27,34) !important; + --urlbar-popup-url-color: white !important; + --urlbar-box-bgcolor: var(--button-bgcolor); + --urlbar-box-focus-bgcolor: var(--button-bgcolor); + --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor); + --urlbar-box-active-bgcolor: var(--button-active-bgcolor); + --urlbar-box-text-color: inherit; + --urlbar-box-hover-text-color: var(--urlbar-box-text-color); + --lwt-brighttext-url-color: #00ddff; + + /* urlbar Firefox < 92 */ + --lwt-toolbar-field-background-color: rgb(28,27,34) !important; + --lwt-toolbar-field-focus: white !important; + --lwt-toolbar-field-color: white !important; + --lwt-toolbar-field-focus-color: white !important; + + /* urlbar Firefox 92+ */ + --toolbar-field-background-color: rgb(28,27,34) !important; + --toolbar-field-focus-background-color: rgb(28,27,34) !important; + --toolbar-field-icon-fill-attention: rgb(117,66,228) !important; + --toolbar-field-color: white !important; + --toolbar-field-focus-color: white !important; + + /* sidebar - note the sidebar-box rule for the header-area */ + --lwt-sidebar-background-color: rgb(41,29,79) !important; + --lwt-sidebar-text-color: white !important; + + /* findbar */ + --focus-outline-color: rgb(117,66,228) !important; + --input-border-color: rgb(117,66,228) !important; + +/* buttons and checkboxes */ + --button-bgcolor: rgb(117,66,228) !important; + --button-color: white !important; + --button-hover-bgcolor: rgb(144,89,255) !important; + --button-active-bgcolor: rgb(144,89,255) !important; + --button-primary-bgcolor: rgb(117,66,228) !important; + --button-primary-hover-bgcolor: rgb(144,89,255) !important; + --button-primary-active-bgcolor: rgb(144,89,255) !important; + --button-primary-color: white !important; + --in-content-primary-button-background: rgb(117,66,228) !important; + --in-content-primary-button-background-hover: rgb(144,89,255) !important; + --in-content-primary-button-background-active: rgb(144,89,255) !important; + --buttons-destructive-bgcolor: #e22850; + --buttons-destructive-hover-bgcolor: #c50042; + --buttons-destructive-active-bgcolor: #810220; + --buttons-destructive-color: #fbfbfe; + --checkbox-unchecked-bgcolor: rgb(41,29,79) !important; + --checkbox-unchecked-hover-bgcolor: rgb(144,89,255) !important; + --checkbox-unchecked-active-bgcolor: rgb(144,89,255) !important; + --checkbox-checked-border-color: rgb(117,66,228) !important; + --checkbox-checked-bgcolor: rgb(117,66,228) !important; + --checkbox-checked-color: white !important; + --checkbox-checked-hover-bgcolor: rgba(144,89,255) !important; + --checkbox-checked-active-bgcolor: rgba(144,89,255) !important; + --uc-checkbox-checked-bgcolor: rgb(117,66,228) !important; + + /* icon glow */ + --uc-icon-glow-primary: rgb(117,66,228); + --uc-icon-glow-secondary: white; + --uc-icon-glow-hover-primary: rgb(117,66,228); + --uc-icon-glow-hover-secondary: white; +} + +/* line between nav-bar and tabs toolbar, + also fallback color for border around selected tab */ +#navigator-toolbox { + --lwt-tabs-border-color: rgb(65,64,72) !important; +} + +/* Line above tabs */ +#tabbrowser-tabs { + --lwt-tab-line-color: none !important; +} + +/* the header-area of sidebar needs this to work */ +#sidebar-box { + --sidebar-background-color: rgb(41,29,79) !important; +} + +/* Find Bar */ +.findbar-find-previous, +.findbar-find-next, +input.findbar-textbox, +findbar { + border: none !important; + box-shadow: none !important; + background-color: var(--arrowpanel-background) !important; + color: var(--toolbar-field-color) !important; +} + +/* Context Menus */ +menupopup { + --panel-background: rgb(41,29,79) !important; + --panel-border-color: transparent !important; + --panel-color: white !important; + --panel-separator-color: transparent !important; +} +menuseparator { + display: none !important; +} +menu:hover, +menuitem:hover { + background-color: var(--panel-item-hover-bgcolor) !important; + color: var(--panel-color) !important; +} + +/* Menu popup shadow */ +.menupopup-arrowscrollbox { + box-shadow: 0 5px 5px -3px rgba(0,0,0,0.2), + 0 8px 10px 1px rgba(0,0,0,0.14), + 0 3px 14px 2px rgba(0,0,0,0.12) !important; +} + +/* "Saved to Library!" popup notification */ +#confirmation-hint { + --panel-background: var(--lwt-accent-color) !important; + --panel-border-color: var(--lwt-accent-color) !important; + --panel-color: var(--lwt-text-color) !important; +} + +/* "Confirm before closing multiple tabs" popup checkboxes and dialog buttons */ +.checkbox-check { + background-color: var(--buttons-destructive-bgcolor) !important; + color: var(--buttons-destructive-color) !important; +} +.dialog-button-box > button:nth-child(6) { + background-color: var(--buttons-destructive-bgcolor) !important; + color: var(--buttons-destructive-color) !important; +} + +/* Main App Menu (≡), Tab Manager Menu, and Unified Extensions Menu */ +panel { + --panel-background: black !important; + --panel-shadow: none !important; +} +.panel-viewstack { + background-color: var(--arrowpanel-background) !important; + border-color: var(--arrowpanel-background) !important; +} + +/* Tab Manager Menu */ +#allTabsMenu-allTabsView-tabs, +#allTabsMenu-allTabsView, +#allTabsMenu-containerTabsView { + background-color: var(--toolbar-bgcolor) !important; +} +#allTabsMenu-containerTabsButton, +#allTabsMenu-containerTabsView > .panel-header { + color: var(--toolbar-color) !important; +} +#allTabsMenu-containerTabsButton:hover { + background-color: var(--panel-banner-item-hover-bgcolor) !important; +} +.all-tabs-item[selected] { + background-color: var(--arrowpanel-dimmed-further) !important; +} +.all-tabs-item:hover[selected] { + --panel-item-active-bgcolor: transparent !important; + --panel-item-hover-bgcolor: transparent !important; + background-color: var(--arrowpanel-dimmed) !important; +} +.all-tabs-item:hover:not([selected]) { + --panel-item-active-bgcolor: transparent !important; + --panel-item-hover-bgcolor: transparent !important; + background-color: var(--panel-banner-item-hover-bgcolor) !important; +} +.all-tabs-close-button:hover { + background-color: var(--toolbarbutton-hover-background) !important; +} + +/* Private Browsing Mode theme for URL Bar and Nav Bar */ +:root { + --toolbar-field-border-color: var(--arrowpanel-background) !important; + --toolbar-field-focus-border-color: var(--arrowpanel-background) !important; + --lwt-toolbar-field-background-color: var(--arrowpanel-background) !important; + --toolbar-field-background-color: var(--arrowpanel-background) !important; + --toolbar-field-focus-background-color: var(--arrowpanel-background) !important; +} +#nav-bar { + background-image: -moz-linear-gradient(to right, rgb(112,34,145), rgb(57,52,115)) !important; +} +#navigator-toolbox { + --lwt-tabs-border-color: rgb(134,93,180) !important; +} diff --git a/src/userChrome/fenix_fox-alt.css b/src/userChrome/fenix_fox-alt.css new file mode 100644 index 0000000..e20e475 --- /dev/null +++ b/src/userChrome/fenix_fox-alt.css @@ -0,0 +1,818 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/******************************************/ +/* IMPORTANT: */ +/* */ +/* One of the things this code will do is */ +/* to move the Tab Manager Menu button to */ +/* the right side of the URL Bar. */ +/* */ +/* For the best results, consider moving */ +/* the Unified Extensions Menu button to */ +/* the left of the URL Bar and removing */ +/* less important toolbar items by using */ +/* the "Customize Toolbar" feature, or by */ +/* using a user.js file in your profile. */ +/******************************************/ + +/* Resist Fingerprinting Letterbox background color and minimum width for display and URL Bar */ +:root { + --tabpanel-background-color: black !important; + min-width: 300px !important; +} +#urlbar-container { + min-width: 150px !important; + flex-shrink: 1 !important; +} + +/* Menu Bar color + (hides the line at the top/bottom of the screen when Menubar is hidden) */ +toolbar[type=menubar] { + background-color: black !important; + color: var(--toolbar-color) !important; +} + +/* Nav Bar bottom border color */ +#navigator-toolbox { + border-bottom-color: black !important; +} + +/* Remove popup warning when enterimg Fullscreen */ +.pointerlockfswarning { + display: none !important; +} + +/* Main App Menu (≡) item icons */ +#appMenu-zoom-controls::before, +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before, +#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image { + fill: currentColor; + -moz-context-properties: fill; + margin-inline: 0 20px !important; +} +#appMenu-zoom-controls::before, +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { + display: flex; + content: ""; + width: 16px; + height: 16px; +} +#appMenu-new-tab-button2 { + order: 1 !important; + list-style-image: url("chrome://global/skin/icons/plus.svg"); +} +#appMenu-bookmarks-button { + order: 2 !important; + list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); +} +#appMenu-history-button { + order: 3 !important; + list-style-image: url("chrome://browser/skin/history.svg"); +} +#appMenu-downloads-button { + order: 4 !important; + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} +#appMenu-extensions-themes-button { + order: 5 !important; + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); +} +#appMenu-passwords-button { + order: 6 !important; + list-style-image: url("chrome://browser/skin/login.svg"); +} +#appMenu-find-button2 { + order: 7 !important; + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); +} +#appMenu-zoom-controls { + order: 8 !important; +} +#appMenu-zoom-controls::before { + background-image: url("chrome://browser/skin/fullscreen.svg"); +} +#appMenu-new-window-button2 { + order: 9 !important; + list-style-image: url("chrome://browser/skin/window.svg"); +} +#appMenu-new-private-window-button2 { + order: 10 !important; + list-style-image: url("chrome://browser/skin/privateBrowsing.svg"); +} +#appMenu-save-file-button2 { + order: 11 !important; + list-style-image: url("chrome://browser/skin/save.svg"); +} +#appMenu-print-button2 { + order: 12 !important; + list-style-image: url("chrome://global/skin/icons/print.svg"); +} +#appMenu-help-button2 { + order: 13 !important; + list-style-image: url("chrome://global/skin/icons/help.svg"); +} +#appMenu-more-button2 { + order: 14 !important; + list-style-image: url("chrome://global/skin/icons/developer.svg"); +} +#appMenu-settings-button { + order: 15 !important; + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} +#appMenu-quit-button2 { + order: 16 !important; + list-style-image: url("chrome://devtools/skin/images/search-clear.svg"); +} +/* Use account-button icon for signed in sync item */ +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { + background-image: var(--avatar-image-url) +} + +/* Show Tab Manager Menu button */ +#alltabs-button { + display: -moz-box !important; +} + +/* Tab Manager Menu button tab counter */ +#TabsToolbar-customization-target { + counter-reset: tabCount; +} +.tabbrowser-tab { + counter-increment: tabCount; +} +#alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; +} +#alltabs-button > .toolbarbutton-badge-stack { + position: relative !important; +} +#alltabs-button > .toolbarbutton-badge-stack::before { + content: counter(tabCount); + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: var(--toolbarbutton-inner-padding); + left: 50%; + transform: translateX(-50%); +} +#alltabs-button > .toolbarbutton-badge-stack { + border-radius: var(--toolbarbutton-border-radius); +} + +/* Tab Manager Menu tab counter */ +#allTabsMenu-allTabsViewTabs, /* before FF 106 */ +#allTabsMenu-allTabsView-tabs { /* since FF 106 */ + counter-reset: nn_tabs 0 !important; +} +.all-tabs-button::before { + display: -moz-inline-box !important; + -moz-padding-end: 8px !important; + content: counter(nn_tabs) !important; + font-size: 12px !important; + margin-top: -2px !important; + margin-right: -2px !important; +} +.all-tabs-item { + counter-increment: nn_tabs !important; +} + +/* Apply this customization only on smaller screens in landscape mode */ +@media (max-height: 300px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 4px; + --urlbar-width: calc(100vw - 188.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 5px; + --urlbar-width: calc(100vw - 196.5px); + } + + /* Remove items from Main App Menu (≡) */ + #appMenu-fxa-status2, + #appMenu-fxa-separator, + #appMenu-protonMainView toolbarseparator, + #appMenu-fullscreen-button2, + #appMenu-passwords-button, + .subviewbutton[shortcut]::after { + display: none !important; + } + + /* Fix flickering of Main App Menu (≡) */ + #appMenu-popup { + width: 260px !important; + } + #appMenu-protonMainView vbox.panel-subview-body { + height: 253px !important; + max-height: 253px !important; + width: 250px !important; + } + + /* Change Main App Menu (≡) button to its mobile equivalent (⋮) */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + margin-right: -10px !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack { + position: relative !important; + width: 75% !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack::before { + content: "⋮"; + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.9 ); + left: 50%; + transform: translateX(-50%); + font-size: 18px !important; + font-weight: bold !important; + } + + /* Hide Tab Bar and Private Browsing indicator */ + #tabbrowser-tabs, + #private-browsing-indicator-with-label { + visibility: collapse !important; + } + + /* Hide Nav Bar when in Fullscreen mode */ + #nav-bar[inFullscreen] { + display: none; + } + + /* Edit Bookmark Panel */ + #editBookmarkPanel { + background-color: var(--arrowpanel-background) !important; + max-height: 100vh !important; + max-width: 100vw !important; + width: 100vw !important; + } + #editBookmarkPanel box.panel-header, + #editBookmarkHeaderSeparator, + #editBookmarkPanelInfoArea, + #editBookmarkSeparator, + #editBMPanel_folderRow, + #editBMPanel_tagsRow { + display: none !important; + } + #editBookmarkPanelContent { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + #editBookmarkPanelBottomButtons { + margin-top: -5px !important; + margin-left: -50px !important; + } + + /* Find Bar*/ + input.findbar-textbox { + font-size: 12pt !important; + } + + /* Remove items from Tab Manager Menu */ + #allTabsMenu-searchTabs, + #allTabsMenu-tabsSeparator { + display: none; + } + + /* Fix flickering of Tab Manager Menu and extension popups */ + #customizationui-widget-panel, + #customizationui-widget-multiview box.panel-viewstack { + height: calc(100vh - 35px) !important; + max-height: calc(100vh - 35px) !important; + width: 100vw !important; + max-width: 100vw !important; + } + + /* Tab Manager Menu inspired by Firefox for Android */ + #allTabsMenu-containerTabsButton { + border-radius: 0 !important; + margin: 0 !important; + padding-left: 10px !important; + padding-right: 10px !important; + width: calc(100vw - 207px) !important; + } + .all-tabs-item { + border-radius: 0 !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(100vw - 207px) !important; + } + .all-tabs-close-button { + border-radius: 100% !important; + margin-left: calc(var(--urlbar-min-height) * -0.6 ) !important; + margin-right: calc(var(--urlbar-min-height) * -0.6 ) !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(var(--urlbar-min-height) * 2.25 ) !important; + } + .all-tabs-close-button > .toolbarbutton-icon { + margin-left: calc(var(--urlbar-min-height) * 0.625 ) !important; + height: calc(var(--urlbar-min-height) * 0.5 ) !important; + width: calc(var(--urlbar-min-height) * 0.5 ) !important; + } + + /* Tab Manager Menu button inspired by Firefox for Android */ + #alltabs-button > .toolbarbutton-badge-stack::before { + border: 1px solid var(--toolbarbutton-icon-fill); + border-radius: 2px; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.85 ) !important; + padding: 0 5px 0 5px; + font-size: 8px !important; + font-weight: 600 !important; + font-family: "Noto Sans" !important; + } + + /* Move Tab Manager Menu button to right of URL Bar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + top: var(--alltabs-button-position) !important; + right: 28.5px; + z-index: 2 !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* URL Bar */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + #urlbar, + #searchbar, + #urlbar-input, + #urlbar-input-container, + #urlbar-background { + border-radius: 7px !important; + } + + /* Remove items from Unified Extensions Menu */ + #unified-extensions-panel .panel-header, + #unified-extensions-panel toolbarseparator, + #unified-extensions-manage-extensions { + display: none !important; + } + + /* Adjust button padding and font size for secondary text in Unified Extensions Menu */ + #unified-extensions-panel .subviewbutton { + padding: 6px !important; + } + .unified-extensions-item-message { + font-size: 75% !important; + } + + /* Fix flickering of Unified Extensions Menu */ + #unified-extensions-panel { + --uei-icon-size: 20px; + width: 360px !important; + } + #unified-extensions-view { + margin-top: 6px !important; + height: 230px !important; + max-height: 230px !important; + width: 350px !important; + } + + /* Add padding to bottom of Unified Extensions Menu to look better */ + #unified-extensions-area { + padding-bottom: 5px !important; + } + + /* Allow extensions to use full display */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: 100vw !important; + min-width: 100vw !important; + } + + /* Change Unified Extensions Menu button icon to Home button icon */ + #unified-extensions-button { + list-style-image: url("chrome://browser/skin/home.svg") !important; + } + + /* Adjust "Saved to Library!" popup notification */ + #confirmation-hint { + padding: 10px !important; + width: 100vw !important; + } + + /* Adjust "Confirm before closing multiple tabs" popup */ + .dialogFrame { + width: 100vw !important; + max-width: 100vw !important; + } + +} + +/* Apply this customization only on smaller screens in portait mode */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 4px; + --urlbar-width: calc(100vw - 110.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 5px; + --urlbar-width: calc(100vw - 114.5px); + } + + /* Main App Menu (≡) */ + #appMenu-popup { + padding-left: 10px !important; + padding-right: 10px !important; + height: 340px; + max-height: 340px; + width: 260px !important; + } + #appMenu-protonMainView vbox.panel-subview-body { + margin-top: 4px !important; + height: 318px !important; + max-height: 318px !important; + width: 230px !important; + } + #appMenu-multiView box.panel-viewstack:first-child { + height: calc(100vh - 100px) !important; + max-height: calc(100vh - 100px) !important; + } + #appMenu-fxa-status2, + #appMenu-fxa-separator, + #appMenu-protonMainView toolbarseparator, + #appMenu-fullscreen-button2, + #appMenu-passwords-button, + .subviewbutton[shortcut]::after { + display: none !important; + } + + /* Change Main App Menu (≡) button to its mobile equivalent (⋮) */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + margin-right: -10px !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack { + position: relative !important; + width: 75% !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack::before { + content: "⋮"; + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.9 ); + left: 50%; + transform: translateX(-50%); + font-size: 18px !important; + font-weight: bold !important; + } + + /* Hide Tab Bar and Private Browsing Indicator */ + #tabbrowser-tabs, + #private-browsing-indicator-with-label { + visibility: collapse !important; + } + + /* Hide Nav Bar when in Fullscreen mode */ + #nav-bar[inFullscreen] { + display: none; + } + + /* Edit Bookmark Panel */ + #editBookmarkPanel { + background-color: var(--arrowpanel-background) !important; + margin-bottom: 225px !important; + max-height: 100vh !important; + max-width: 100vw !important; + width: 100vw !important; + } + #editBookmarkPanel box.panel-header, + #editBookmarkHeaderSeparator, + #editBookmarkPanelInfoArea, + #editBookmarkSeparator, + #editBMPanel_folderRow, + #editBMPanel_tagsRow { + display: none !important; + } + #editBookmarkPanelContent { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + #editBookmarkPanelBottomButtons { + margin-top: -5px !important; + margin-left: -50px !important; + } + + /* Find Bar */ + .findbar-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + height: 40px !important; + } + .findbar-textbox { + width: 100% !important; + } + .findbar-container checkbox { + padding: 10px 0px; + } + .findbar-highlight, + .findbar-case-sensitive, + .findbar-match-diacritics, + .findbar-entire-word, + /*.found-matches,*/ + .findbar-find-status, + .find-status-icon { + display: none; + } + input.findbar-textbox { + font-size: 12pt !important; + } + + /* Fix Popups */ + #notification-popup { + margin-top: -500px !important; + margin-right: -500px !important; + height: calc(100vh - 250px) !important; + max-width: 100vw !important; + } + #downloadsPanel-mainView { + max-width: calc(100vw - 10px); + } + #backForwardMenu { + margin-top: -250px; + height: 200px; + min-height: 200px; + max-width: 100vw !important; + } + #context-inspect, + #context-inspect-a11y, + #context-savelinktopocket, + #context-searchselect, + #context-sendlinktodevice, + #context-viewpartialsource-selection, + #inspect-separator { + display: none !important + } + #protections-popup, + #permission-popup, + #widget-overflow, + #identity-popup { + max-width: 100vw !important; + } + #protections-popup-mainView { + min-width: 100vw !important; + max-width: 100vw !important; + } + #widget-overflow, + #widget-overflow-mainView { + height: calc(100vh - 80px) !important; + } + #customizationui-widget-panel { + width: 100vw !important; + } + #BMB_bookmarksPopup { + padding-left: 10px !important; + padding-right: 10px !important; + width: 100vw !important; + } + + /* Tab Manager Menu */ + #allTabsMenu-searchTabs, + #allTabsMenu-tabsSeparator { + display: none; + } + #customizationui-widget-panel { + padding-left: 10px !important; + padding-right: 10px !important; + } + #allTabsMenu-multiView box.panel-viewstack { + height: calc(100vh - 100px) !important; + max-height: calc(100vh - 100px) !important; + } + #customizationui-widget-multiview box.panel-viewstack { + height: 330px !important; + max-height: 330px !important; + } + #allTabsMenu-allTabsViewTabs, + #allTabsMenu-allTabsView-tabs { + max-width: calc(100vw - 30px); + padding-top: 2px !important; + } + + /* Tab Manager Menu inspired by Firefox for Android */ + #allTabsMenu-containerTabsButton { + border-radius: 0 !important; + margin: 0 !important; + padding-left: 10px !important; + padding-right: 10px !important; + width: calc(100vw - 30px) !important; + } + .all-tabs-item { + border-radius: 0 !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(100vw - 30px) !important; + } + .all-tabs-close-button { + border-radius: 100% !important; + margin-left: calc(var(--urlbar-min-height) * -0.6 ) !important; + margin-right: calc(var(--urlbar-min-height) * -0.6 ) !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(var(--urlbar-min-height) * 2.25 ) !important; + } + .all-tabs-close-button > .toolbarbutton-icon { + margin-left: calc(var(--urlbar-min-height) * 0.625 ) !important; + height: calc(var(--urlbar-min-height) * 0.5 ) !important; + width: calc(var(--urlbar-min-height) * 0.5 ) !important; + } + + /* Tab Manager Menu button inspired by Firefox for Android */ + #alltabs-button > .toolbarbutton-badge-stack::before { + border: 1px solid var(--toolbarbutton-icon-fill); + border-radius: 2px; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.85 ) !important; + padding: 0 5px 0 5px; + font-size: 8px !important; + font-weight: 600 !important; + font-family: "Noto Sans" !important; + } + + /* Move Tab Manager Menu button to right of urlbar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + top: var(--alltabs-button-position) !important; + right: 28.5px; + z-index: 2 !important; + } + + /* Nav Bar */ + #back-button, + #forward-button, + #customizableui-special-spring1, + #customizableui-special-spring2, + #library-button, + #sidebar-button, + #fxa-toolbar-menu-button { + display: none !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* URL Bar */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + #urlbar { + padding: 0px 5px; + } + #urlbar-input { + font-size: 10pt !important; + } + #urlbar[focused] #urlbar-input { + font-size: calc(var(--urlbar-height) - 9px) !important; + } + #urlbar[focused] #remote-control-box, + #urlbar[focused] #identity-box, + #urlbar[focused] #tracking-protection-icon-container, + #urlbar[focused] #reader-mode-button, + #urlbar[focused] #page-action-buttons, + #tracking-protection-icon-container, + #identity-permission-box, + #userContext-indicator, + #pageActionButton { + display: none; + } + #identity-icon-label { + display: none; + } + .urlbarView { + position: fixed !important; + inset: 0px 0px 84px 0px; + width: 100% !important; + background: var(--arrowpanel-background); + margin: 0px !important; + margin-inline: 0px !important; + border-inline: 0px !important; + overflow-y: auto !important; + overflow-x: none !important; + scrollbar-width: none; + } + #PersonalToolbar { + display: none; + } + :root { + --bookmarks-toolbar-overlapping-browser-height: 0 !important; + } + #urlbar, + #searchbar, + #urlbar-input, + #urlbar-input-container, + #urlbar-background { + border-radius: 7px !important; + } + + /* Remove items from Unified Extensions Menu */ + #unified-extensions-panel .panel-header, + #unified-extensions-panel toolbarseparator, + #unified-extensions-manage-extensions { + display: none !important; + } + + /* Adjust button padding and font size for secondary text in Unified Extensions Menu */ + #unified-extensions-panel .subviewbutton { + padding: 6px !important; + } + .unified-extensions-item-message { + font-size: 75% !important; + } + + /* Fix flickering for Unified Extensions Menu */ + #unified-extensions-panel { + --uei-icon-size: 20px; + padding-left: 10px !important; + padding-right: 10px !important; + width: 100vw !important; + } + #unified-extensions-view { + margin-top: 6px !important; + height: 325px !important; + max-height: 325px !important; + width: calc(100vw - 30px) !important; + } + + /* Allow extensions to use full popup */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: calc(100vw - 20px) !important; + min-width: calc(100vw - 20px) !important; + } + + /* Change Unified Extensions Menu button icon to Home button icon */ + #unified-extensions-button { + list-style-image: url("chrome://browser/skin/home.svg") !important; + } + + /* Adjust "Saved to Library!" popup notification */ + #confirmation-hint { + padding: 10px !important; + width: 100vw !important; + } + + /* Adjust "Confirm before closing multiple tabs" popup */ + .dialogFrame { + width: 100vw !important; + max-width: 100vw !important; + } + + /* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */ + #unified-extensions-area { + padding-bottom: 120px !important; + } + + /* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */ + #appMenu-quit-button2 { + margin-bottom: 64px !important; + } + +} diff --git a/src/userChrome/fenix_fox.css b/src/userChrome/fenix_fox.css new file mode 100644 index 0000000..fd7335c --- /dev/null +++ b/src/userChrome/fenix_fox.css @@ -0,0 +1,895 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/******************************************/ +/* IMPORTANT: */ +/* */ +/* One of the things this code will do is */ +/* to move the Tab Manager Menu button to */ +/* the right side of the URL Bar. */ +/* */ +/* For the best results, consider moving */ +/* the Unified Extensions Menu button to */ +/* the left of the URL Bar and removing */ +/* less important toolbar items by using */ +/* the "Customize Toolbar" feature, or by */ +/* using a user.js file in your profile. */ +/******************************************/ + +/* Resist Fingerprinting Letterbox background color and minimum width for display and URL Bar */ +:root { + --tabpanel-background-color: black !important; + min-width: 300px !important; +} +#urlbar-container { + min-width: 150px !important; + flex-shrink: 1 !important; +} + +/* Menu Bar color + (hides the line at the top/bottom of the screen when Menubar is hidden) */ +toolbar[type=menubar] { + background-color: black !important; + color: var(--toolbar-color) !important; +} + +/* Nav Bar bottom border color */ +#navigator-toolbox { + border-bottom-color: black !important; +} + +/* Remove popup warning when enterimg Fullscreen */ +.pointerlockfswarning { + display: none !important; +} + +/* Main App Menu (≡) item icons */ +#appMenu-zoom-controls::before, +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before, +#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image { + fill: currentColor; + -moz-context-properties: fill; + margin-inline: 0 20px !important; +} +#appMenu-zoom-controls::before, +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { + display: flex; + content: ""; + width: 16px; + height: 16px; +} +#appMenu-new-tab-button2 { + order: 1 !important; + list-style-image: url("chrome://global/skin/icons/plus.svg"); +} +#appMenu-bookmarks-button { + order: 2 !important; + list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); +} +#appMenu-history-button { + order: 3 !important; + list-style-image: url("chrome://browser/skin/history.svg"); +} +#appMenu-downloads-button { + order: 4 !important; + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} +#appMenu-extensions-themes-button { + order: 5 !important; + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); +} +#appMenu-passwords-button { + order: 6 !important; + list-style-image: url("chrome://browser/skin/login.svg"); +} +#appMenu-find-button2 { + order: 7 !important; + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); +} +#appMenu-zoom-controls { + order: 8 !important; +} +#appMenu-zoom-controls::before { + background-image: url("chrome://browser/skin/fullscreen.svg"); +} +#appMenu-new-window-button2 { + order: 9 !important; + list-style-image: url("chrome://browser/skin/window.svg"); +} +#appMenu-new-private-window-button2 { + order: 10 !important; + list-style-image: url("chrome://browser/skin/privateBrowsing.svg"); +} +#appMenu-save-file-button2 { + order: 11 !important; + list-style-image: url("chrome://browser/skin/save.svg"); +} +#appMenu-print-button2 { + order: 12 !important; + list-style-image: url("chrome://global/skin/icons/print.svg"); +} +#appMenu-help-button2 { + order: 13 !important; + list-style-image: url("chrome://global/skin/icons/help.svg"); +} +#appMenu-more-button2 { + order: 14 !important; + list-style-image: url("chrome://global/skin/icons/developer.svg"); +} +#appMenu-settings-button { + order: 15 !important; + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} +#appMenu-quit-button2 { + order: 16 !important; + list-style-image: url("chrome://devtools/skin/images/search-clear.svg"); +} +/* Use account-button icon for signed in sync item */ +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { + background-image: var(--avatar-image-url) +} + +/* Show Tab Manager Menu button */ +#alltabs-button { + display: -moz-box !important; +} + +/* Tab Manager Menu button tab counter */ +#TabsToolbar-customization-target { + counter-reset: tabCount; +} +.tabbrowser-tab { + counter-increment: tabCount; +} +#alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; +} +#alltabs-button > .toolbarbutton-badge-stack { + position: relative !important; +} +#alltabs-button > .toolbarbutton-badge-stack::before { + content: counter(tabCount); + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: var(--toolbarbutton-inner-padding); + left: 50%; + transform: translateX(-50%); +} +#alltabs-button > .toolbarbutton-badge-stack { + border-radius: var(--toolbarbutton-border-radius); +} + +/* Tab Manager Menu tab counter */ +#allTabsMenu-allTabsViewTabs, /* before FF 106 */ +#allTabsMenu-allTabsView-tabs { /* since FF 106 */ + counter-reset: nn_tabs 0 !important; +} +.all-tabs-button::before { + display: -moz-inline-box !important; + -moz-padding-end: 8px !important; + content: counter(nn_tabs) !important; + font-size: 12px !important; + margin-top: -2px !important; + margin-right: -2px !important; +} +.all-tabs-item { + counter-increment: nn_tabs !important; +} + +/* Apply this customization only on smaller screens in landscape mode */ +@media (max-height: 300px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 3.5px; + --urlbar-width: calc(100vw - 188.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 4.5px; + --urlbar-width: calc(100vw - 196.5px); + } + + /* Remove items from Main App Menu (≡) */ + #appMenu-fxa-status2, + #appMenu-fxa-separator, + #appMenu-protonMainView toolbarseparator, + #appMenu-fullscreen-button2, + #appMenu-passwords-button, + .subviewbutton[shortcut]::after { + display: none !important; + } + + /* Fix flickering of Main App Menu (≡) */ + #appMenu-popup { + width: 260px !important; + } + #appMenu-protonMainView vbox.panel-subview-body { + height: 253px !important; + max-height: 253px !important; + width: 250px !important; + } + + /* Change Main App Menu (≡) button to its mobile equivalent (⋮) */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + margin-right: -10px !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack { + position: relative !important; + width: 75% !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack::before { + content: "⋮"; + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.9 ); + left: 50%; + transform: translateX(-50%); + font-size: 18px !important; + font-weight: bold !important; + } + + /* Hide Tab Bar and Private Browsing indicator */ + #tabbrowser-tabs, + #private-browsing-indicator-with-label { + visibility: collapse !important; + } + + /* Hide Nav Bar when in Fullscreen mode */ + #nav-bar[inFullscreen] { + display: none; + } + + /* Move Nav Bar to bottom */ + :root:not([uidensity="touch"],[inFullscreen]) { + --uc-bottom-toolbar-height: calc(39px + var(--toolbarbutton-outer-padding) ) + } + :root[uidensity="touch"]:not([inFullscreen]){ + --uc-bottom-toolbar-height: calc(43px + var(--toolbarbutton-outer-padding) ) + } + #browser, + #customization-container { + margin-bottom: var(--uc-bottom-toolbar-height,0px) + } + #nav-bar{ + position: fixed !important; + bottom: 0px; + width: 100%; + z-index: 1; + } + .panel-viewstack { + max-height: unset !important; + } + + /* Edit Bookmark Panel */ + #editBookmarkPanel { + background-color: var(--arrowpanel-background) !important; + max-height: 100vh !important; + max-width: 100vw !important; + width: 100vw !important; + } + #editBookmarkPanel box.panel-header, + #editBookmarkHeaderSeparator, + #editBookmarkPanelInfoArea, + #editBookmarkSeparator, + #editBMPanel_folderRow, + #editBMPanel_tagsRow { + display: none !important; + } + #editBookmarkPanelContent { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + #editBookmarkPanelBottomButtons { + margin-top: -5px !important; + margin-left: -50px !important; + } + + /* Find Bar*/ + input.findbar-textbox { + font-size: 12pt !important; + } + + /* Remove items from Tab Manager Menu */ + #allTabsMenu-searchTabs, + #allTabsMenu-tabsSeparator { + display: none; + } + + /* Fix flickering of Tab Manager Menu and extension popups */ + #customizationui-widget-panel, + #customizationui-widget-multiview box.panel-viewstack { + height: calc(100vh - 35px) !important; + max-height: calc(100vh - 35px) !important; + width: 100vw !important; + max-width: 100vw !important; + } + + /* Tab Manager Menu inspired by Firefox for Android */ + #allTabsMenu-containerTabsButton { + border-radius: 0 !important; + margin: 0 !important; + padding-left: 10px !important; + padding-right: 10px !important; + width: calc(100vw - 207px) !important; + } + .all-tabs-item { + border-radius: 0 !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(100vw - 207px) !important; + } + .all-tabs-close-button { + border-radius: 100% !important; + margin-left: calc(var(--urlbar-min-height) * -0.6 ) !important; + margin-right: calc(var(--urlbar-min-height) * -0.6 ) !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(var(--urlbar-min-height) * 2.25 ) !important; + } + .all-tabs-close-button > .toolbarbutton-icon { + margin-left: calc(var(--urlbar-min-height) * 0.625 ) !important; + height: calc(var(--urlbar-min-height) * 0.5 ) !important; + width: calc(var(--urlbar-min-height) * 0.5 ) !important; + } + + /* Tab Manager Menu button inspired by Firefox for Android */ + #alltabs-button > .toolbarbutton-badge-stack::before { + border: 1px solid var(--toolbarbutton-icon-fill); + border-radius: 2px; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.85 ) !important; + padding: 0 5px 0 5px; + font-size: 8px !important; + font-weight: 600 !important; + font-family: "Noto Sans" !important; + } + + /* Move Tab Manager Menu button to right of URL Bar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + bottom: var(--alltabs-button-position) !important; + right: 28.5px; + z-index: 2 !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* URL Bar */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + #urlbar, + #searchbar, + #urlbar-input, + #urlbar-input-container, + #urlbar-background { + border-radius: 7px !important; + } + + /* Remove items from Unified Extensions Menu */ + #unified-extensions-panel .panel-header, + #unified-extensions-panel toolbarseparator, + #unified-extensions-manage-extensions { + display: none !important; + } + + /* Adjust button padding and font size for secondary text in Unified Extensions Menu */ + #unified-extensions-panel .subviewbutton { + padding: 6px !important; + } + .unified-extensions-item-message { + font-size: 75% !important; + } + + /* Fix flickering of Unified Extensions Menu */ + #unified-extensions-panel { + --uei-icon-size: 20px; + width: 360px !important; + } + #unified-extensions-view { + margin-top: 6px !important; + height: 230px !important; + max-height: 230px !important; + width: 350px !important; + } + + /* Add padding to bottom of Unified Extensions Menu to look better */ + #unified-extensions-area { + padding-bottom: 5px !important; + } + + /* Allow extensions to use full display */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: 100vw !important; + min-width: 100vw !important; + } + + /* Change Unified Extensions Menu button icon to Home button icon */ + #unified-extensions-button { + list-style-image: url("chrome://browser/skin/home.svg") !important; + } + + /* Adjust "Saved to Library!" popup notification */ + #confirmation-hint { + padding: 10px !important; + width: 100vw !important; + } + + /* Adjust "Confirm before closing multiple tabs" popup */ + .dialogFrame { + width: 100vw !important; + max-width: 100vw !important; + } + +} + +/* Apply this customization only on smaller screens in portait mode */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --widget-overflow-margin: 22px; + --unified-extensions-panel-margin: 22px; + --customizationui-widget-panel-margin: 22px; + --appMenu-popup-margin: 22px; + --BMB_bookmarksPopup-margin: 22px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 3.5px; + --urlbar-width: calc(100vw - 110.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --widget-overflow-margin: 23px; + --unified-extensions-panel-margin: 23px; + --customizationui-widget-panel-margin: 23px; + --appMenu-popup-margin: 23px; + --BMB_bookmarksPopup-margin: 23px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 4.5px; + --urlbar-width: calc(100vw - 114.5px); + } + + /* Main App Menu (≡) */ + #appMenu-popup { + padding-left: 10px !important; + padding-right: 10px !important; + height: 340px; + max-height: 340px; + width: 260px !important; + } + #appMenu-protonMainView vbox.panel-subview-body { + margin-top: 4px !important; + height: 318px !important; + max-height: 318px !important; + width: 230px !important; + } + #appMenu-multiView box.panel-viewstack:first-child { + height: calc(100vh - 100px) !important; + max-height: calc(100vh - 100px) !important; + } + #appMenu-fxa-status2, + #appMenu-fxa-separator, + #appMenu-protonMainView toolbarseparator, + #appMenu-fullscreen-button2, + #appMenu-passwords-button, + .subviewbutton[shortcut]::after { + display: none !important; + } + + /* Change Main App Menu (≡) button to its mobile equivalent (⋮) */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + margin-right: -10px !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack { + position: relative !important; + width: 75% !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack::before { + content: "⋮"; + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.9 ); + left: 50%; + transform: translateX(-50%); + font-size: 18px !important; + font-weight: bold !important; + } + + /* Hide Tab Bar and Private Browsing Indicator */ + #tabbrowser-tabs, + #private-browsing-indicator-with-label { + visibility: collapse !important; + } + + /* Hide Nav Bar when in Fullscreen mode */ + #nav-bar[inFullscreen] { + display: none; + } + + /* Move Nav Bar to bottom */ + :root:not([uidensity="touch"],[inFullscreen]) { + --uc-bottom-toolbar-height: calc(39px + var(--toolbarbutton-outer-padding) ) + } + :root[uidensity="touch"]:not([inFullscreen]){ + --uc-bottom-toolbar-height: calc(43px + var(--toolbarbutton-outer-padding) ) + } + #browser, + #customization-container { + margin-bottom: var(--uc-bottom-toolbar-height,0px) + } + #nav-bar{ + position: fixed !important; + bottom: 0px; + width: 100%; + z-index: 1; + } + .panel-viewstack { + max-height: unset !important; + } + + /* Adjust Widget Overflow Menu (») spawn height */ + #widget-overflow { + margin-bottom: var(--widget-overflow-margin) !important; + } + + /* Adjust Unified Extensions Menu spawn height */ + #unified-extensions-panel { + margin-bottom: var(--unified-extensions-panel-margin) !important; + } + + /* Adjust Tab Manager Menu spawn height */ + #customizationui-widget-panel { + margin-bottom: var(--customizationui-widget-panel-margin) !important; + } + + /* Adjust Main App Menu (≡) spawn height */ + #appMenu-popup { + margin-bottom: var(--appMenu-popup-margin) !important; + } + + /* Adjust Bookmarks Menu (★) spawn height */ + #BMB_bookmarksPopup { + margin-bottom: var(--BMB_bookmarksPopup-margin) !important; + } + + /* Edit Bookmark Panel */ + #editBookmarkPanel { + background-color: var(--arrowpanel-background) !important; + margin-bottom: 225px !important; + max-height: 100vh !important; + max-width: 100vw !important; + width: 100vw !important; + } + #editBookmarkPanel box.panel-header, + #editBookmarkHeaderSeparator, + #editBookmarkPanelInfoArea, + #editBookmarkSeparator, + #editBMPanel_folderRow, + #editBMPanel_tagsRow { + display: none !important; + } + #editBookmarkPanelContent { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + #editBookmarkPanelBottomButtons { + margin-top: -5px !important; + margin-left: -50px !important; + } + + /* Find Bar */ + .findbar-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + height: 40px !important; + } + .findbar-textbox { + width: 100% !important; + } + .findbar-container checkbox { + padding: 10px 0px; + } + .findbar-highlight, + .findbar-case-sensitive, + .findbar-match-diacritics, + .findbar-entire-word, + /*.found-matches,*/ + .findbar-find-status, + .find-status-icon { + display: none; + } + input.findbar-textbox { + font-size: 12pt !important; + } + + /* Fix Popups */ + #notification-popup { + margin-top: -500px !important; + margin-right: -500px !important; + height: calc(100vh - 250px) !important; + max-width: 100vw !important; + } + #downloadsPanel-mainView { + max-width: calc(100vw - 10px); + } + #backForwardMenu { + margin-top: -250px; + height: 200px; + min-height: 200px; + max-width: 100vw !important; + } + #context-inspect, + #context-inspect-a11y, + #context-savelinktopocket, + #context-searchselect, + #context-sendlinktodevice, + #context-viewpartialsource-selection, + #inspect-separator { + display: none !important + } + #protections-popup, + #permission-popup, + #widget-overflow, + #identity-popup { + max-width: 100vw !important; + } + #protections-popup-mainView { + min-width: 100vw !important; + max-width: 100vw !important; + } + #widget-overflow, + #widget-overflow-mainView { + height: calc(100vh - 80px) !important; + } + #customizationui-widget-panel { + width: 100vw !important; + } + #BMB_bookmarksPopup { + padding-left: 10px !important; + padding-right: 10px !important; + width: 100vw !important; + } + + /* Tab Manager Menu */ + #allTabsMenu-searchTabs, + #allTabsMenu-tabsSeparator { + display: none; + } + #customizationui-widget-panel { + padding-left: 10px !important; + padding-right: 10px !important; + } + #allTabsMenu-multiView box.panel-viewstack { + height: calc(100vh - 100px) !important; + max-height: calc(100vh - 100px) !important; + } + #customizationui-widget-multiview box.panel-viewstack { + height: 330px !important; + max-height: 330px !important; + } + #allTabsMenu-allTabsViewTabs, + #allTabsMenu-allTabsView-tabs { + max-width: calc(100vw - 30px); + padding-top: 2px !important; + } + + /* Tab Manager Menu inspired by Firefox for Android */ + #allTabsMenu-containerTabsButton { + border-radius: 0 !important; + margin: 0 !important; + padding-left: 10px !important; + padding-right: 10px !important; + width: calc(100vw - 30px) !important; + } + .all-tabs-item { + border-radius: 0 !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(100vw - 30px) !important; + } + .all-tabs-close-button { + border-radius: 100% !important; + margin-left: calc(var(--urlbar-min-height) * -0.6 ) !important; + margin-right: calc(var(--urlbar-min-height) * -0.6 ) !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(var(--urlbar-min-height) * 2.25 ) !important; + } + .all-tabs-close-button > .toolbarbutton-icon { + margin-left: calc(var(--urlbar-min-height) * 0.625 ) !important; + height: calc(var(--urlbar-min-height) * 0.5 ) !important; + width: calc(var(--urlbar-min-height) * 0.5 ) !important; + } + + /* Tab Manager Menu button inspired by Firefox for Android */ + #alltabs-button > .toolbarbutton-badge-stack::before { + border: 1px solid var(--toolbarbutton-icon-fill); + border-radius: 2px; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.85 ) !important; + padding: 0 5px 0 5px; + font-size: 8px !important; + font-weight: 600 !important; + font-family: "Noto Sans" !important; + } + + /* Move Tab Manager Menu button to right of urlbar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + bottom: var(--alltabs-button-position) !important; + right: 28.5px; + z-index: 2 !important; + } + + /* Nav Bar */ + #back-button, + #forward-button, + #customizableui-special-spring1, + #customizableui-special-spring2, + #library-button, + #sidebar-button, + #fxa-toolbar-menu-button { + display: none !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* URL Bar */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + #urlbar { + padding: 0px 5px; + } + #urlbar-input { + font-size: 10pt !important; + } + #urlbar[focused] #urlbar-input { + font-size: calc(var(--urlbar-height) - 9px) !important; + } + #urlbar[focused] #remote-control-box, + #urlbar[focused] #identity-box, + #urlbar[focused] #tracking-protection-icon-container, + #urlbar[focused] #reader-mode-button, + #urlbar[focused] #page-action-buttons, + #tracking-protection-icon-container, + #identity-permission-box, + #userContext-indicator, + #pageActionButton { + display: none; + } + #identity-icon-label { + display: none; + } + .urlbarView { + position: fixed !important; + inset: 0px 0px 84px 0px; + width: 100% !important; + background: var(--arrowpanel-background); + margin: 0px !important; + margin-inline: 0px !important; + border-inline: 0px !important; + overflow-y: auto !important; + overflow-x: none !important; + scrollbar-width: none; + } + #PersonalToolbar { + display: none; + } + :root { + --bookmarks-toolbar-overlapping-browser-height: 0 !important; + } + #urlbar, + #searchbar, + #urlbar-input, + #urlbar-input-container, + #urlbar-background { + border-radius: 7px !important; + } + + /* Remove items from Unified Extensions Menu */ + #unified-extensions-panel .panel-header, + #unified-extensions-panel toolbarseparator, + #unified-extensions-manage-extensions { + display: none !important; + } + + /* Adjust button padding and font size for secondary text in Unified Extensions Menu */ + #unified-extensions-panel .subviewbutton { + padding: 6px !important; + } + .unified-extensions-item-message { + font-size: 75% !important; + } + + /* Fix flickering for Unified Extensions Menu */ + #unified-extensions-panel { + --uei-icon-size: 20px; + padding-left: 10px !important; + padding-right: 10px !important; + width: 100vw !important; + } + #unified-extensions-view { + margin-top: 6px !important; + height: 325px !important; + max-height: 325px !important; + width: calc(100vw - 30px) !important; + } + + /* Allow extensions to use full popup */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: calc(100vw - 20px) !important; + min-width: calc(100vw - 20px) !important; + } + + /* Change Unified Extensions Menu button icon to Home button icon */ + #unified-extensions-button { + list-style-image: url("chrome://browser/skin/home.svg") !important; + } + + /* Adjust "Saved to Library!" popup notification */ + #confirmation-hint { + padding: 10px !important; + width: 100vw !important; + } + + /* Adjust "Confirm before closing multiple tabs" popup */ + .dialogFrame { + width: 100vw !important; + max-width: 100vw !important; + } + + /* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */ + #unified-extensions-area { + padding-bottom: 120px !important; + } + + /* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */ + #appMenu-quit-button2 { + margin-bottom: 64px !important; + } + +} diff --git a/src/userChrome/fenix_one-alt.css b/src/userChrome/fenix_one-alt.css new file mode 100644 index 0000000..558cb91 --- /dev/null +++ b/src/userChrome/fenix_one-alt.css @@ -0,0 +1,1054 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/******************************************/ +/* IMPORTANT: */ +/* */ +/* One of the things this code will do is */ +/* to move the Tab Manager Menu button to */ +/* the right side of the URL Bar. */ +/* */ +/* For the best results, consider moving */ +/* the Unified Extensions Menu button to */ +/* the left of the URL Bar and removing */ +/* less important toolbar items by using */ +/* the "Customize Toolbar" feature, or by */ +/* using a user.js file in your profile. */ +/******************************************/ + +/* Resist Fingerprinting Letterbox background color and minimum width for display and URL Bar */ +:root { + --tabpanel-background-color: black !important; + min-width: 300px !important; +} +#urlbar-container { + min-width: 150px !important; + flex-shrink: 1 !important; +} + +/* Menu Bar color + (hides the line at the top/bottom of the screen when Menubar is hidden) */ +toolbar[type=menubar] { + background-color: black !important; + color: var(--toolbar-color) !important; +} + +/* Nav Bar bottom border color */ +#navigator-toolbox { + border-bottom-color: black !important; +} + +/* Remove popup warning when enterimg Fullscreen */ +.pointerlockfswarning { + display: none !important; +} + +/* Fenix Colors */ +:root { + /* Popup panels */ + --arrowpanel-background: rgb(41,29,79) !important; + --arrowpanel-border-color: transparent !important; + --arrowpanel-color: white !important; + --arrowpanel-dimmed: rgb(97,84,124) !important; + --arrowpanel-dimmed-further: rgb(66,50,98) !important; + --panel-background: rgb(41,29,79) !important; + --panel-border-color: transparent !important; + --panel-color: white !important; + --panel-separator-color: transparent !important; + --panel-item-hover-bgcolor: rgba(255,255,255,0.2) !important; + --panel-item-active-bgcolor: rgba(255,255,255,0.2) !important; + --panel-banner-item-background-color: rgb(117,66,228) !important; + --panel-banner-item-hover-bgcolor: rgb(69,68,76) !important; + --panel-banner-item-active-bgcolor: rgb(69,68,76) !important; + --panel-banner-item-update-supported-bgcolor: rgb(117,66,228) !important; + --panel-banner-item-info-icon-bgcolor: rgb(117,66,228) !important; + --panel-banner-item-color: white !important; + --panel-description-color: white !important; + --panel-disabled-color: gray !important; + --menuitem-disabled-hover-background-color: transparent !important; + + /* window and toolbar background */ + --lwt-accent-color: rgb(117,66,228) !important; + --lwt-accent-color-inactive: rgba(117,66,228,0.3) !important; + --toolbar-non-lwt-bgcolor: rgb(41,29,79) !important; + --toolbar-non-lwt-textcolor: white !important; + --toolbar-bgcolor: rgb(43,42,51) !important; + --toolbar-color: rgb(171,113,255) !important; + --tabpanel-background-color: black !important; + + /* tabs with system theme - text is not controlled by variable */ + --tab-selected-bgcolor: rgb(117,66,228) !important; + + /* tabs with any other theme */ + --lwt-text-color: white !important; + --lwt-selected-tab-background-color: rgb(117,66,228) !important; + + /* toolbar area */ + --toolbarbutton-icon-fill: white !important; + --toolbarbutton-icon-fill-attention: white !important; + --toolbarbutton-hover-background: rgba(255,255,255,0.2) !important; + --toolbarbutton-active-background: rgba(255,255,255,0.2) !important; + --lwt-toolbarbutton-icon-fill-attention: white !important; + --lwt-toolbarbutton-hover-background: rgba(255,255,255,0.2) !important; + --lwt-toolbarbutton-active-background: rgba(255,255,255,0.2) !important; + --toolbarseparator-color: black !important; + + /* urlbar */ + --toolbar-field-border-color: rgb(28,27,34) !important; + --toolbar-field-focus-border-color: rgb(28,27,34) !important; + --urlbar-popup-url-color: white !important; + --urlbar-box-bgcolor: var(--button-bgcolor); + --urlbar-box-focus-bgcolor: var(--button-bgcolor); + --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor); + --urlbar-box-active-bgcolor: var(--button-active-bgcolor); + --urlbar-box-text-color: inherit; + --urlbar-box-hover-text-color: var(--urlbar-box-text-color); + --lwt-brighttext-url-color: #00ddff; + + /* urlbar Firefox < 92 */ + --lwt-toolbar-field-background-color: rgb(28,27,34) !important; + --lwt-toolbar-field-focus: white !important; + --lwt-toolbar-field-color: white !important; + --lwt-toolbar-field-focus-color: white !important; + + /* urlbar Firefox 92+ */ + --toolbar-field-background-color: rgb(28,27,34) !important; + --toolbar-field-focus-background-color: rgb(28,27,34) !important; + --toolbar-field-icon-fill-attention: rgb(117,66,228) !important; + --toolbar-field-color: white !important; + --toolbar-field-focus-color: white !important; + + /* sidebar - note the sidebar-box rule for the header-area */ + --lwt-sidebar-background-color: rgb(41,29,79) !important; + --lwt-sidebar-text-color: white !important; + + /* findbar */ + --focus-outline-color: rgb(117,66,228) !important; + --input-border-color: rgb(117,66,228) !important; + +/* buttons and checkboxes */ + --button-bgcolor: rgb(117,66,228) !important; + --button-color: white !important; + --button-hover-bgcolor: rgb(144,89,255) !important; + --button-active-bgcolor: rgb(144,89,255) !important; + --button-primary-bgcolor: rgb(117,66,228) !important; + --button-primary-hover-bgcolor: rgb(144,89,255) !important; + --button-primary-active-bgcolor: rgb(144,89,255) !important; + --button-primary-color: white !important; + --in-content-primary-button-background: rgb(117,66,228) !important; + --in-content-primary-button-background-hover: rgb(144,89,255) !important; + --in-content-primary-button-background-active: rgb(144,89,255) !important; + --buttons-destructive-bgcolor: #e22850; + --buttons-destructive-hover-bgcolor: #c50042; + --buttons-destructive-active-bgcolor: #810220; + --buttons-destructive-color: #fbfbfe; + --checkbox-unchecked-bgcolor: rgb(41,29,79) !important; + --checkbox-unchecked-hover-bgcolor: rgb(144,89,255) !important; + --checkbox-unchecked-active-bgcolor: rgb(144,89,255) !important; + --checkbox-checked-border-color: rgb(117,66,228) !important; + --checkbox-checked-bgcolor: rgb(117,66,228) !important; + --checkbox-checked-color: white !important; + --checkbox-checked-hover-bgcolor: rgba(144,89,255) !important; + --checkbox-checked-active-bgcolor: rgba(144,89,255) !important; + --uc-checkbox-checked-bgcolor: rgb(117,66,228) !important; + + /* icon glow */ + --uc-icon-glow-primary: rgb(117,66,228); + --uc-icon-glow-secondary: white; + --uc-icon-glow-hover-primary: rgb(117,66,228); + --uc-icon-glow-hover-secondary: white; +} + +/* line between nav-bar and tabs toolbar, + also fallback color for border around selected tab */ +#navigator-toolbox { + --lwt-tabs-border-color: rgb(65,64,72) !important; +} + +/* Line above tabs */ +#tabbrowser-tabs { + --lwt-tab-line-color: none !important; +} + +/* the header-area of sidebar needs this to work */ +#sidebar-box { + --sidebar-background-color: rgb(41,29,79) !important; +} + +/* Find Bar */ +.findbar-find-previous, +.findbar-find-next, +input.findbar-textbox, +findbar { + border: none !important; + box-shadow: none !important; + background-color: var(--arrowpanel-background) !important; + color: var(--toolbar-field-color) !important; +} + +/* Context Menus */ +menupopup { + --panel-background: rgb(41,29,79) !important; + --panel-border-color: transparent !important; + --panel-color: white !important; + --panel-separator-color: transparent !important; +} +menuseparator { + display: none !important; +} +menu:hover, +menuitem:hover { + background-color: var(--panel-item-hover-bgcolor) !important; + color: var(--panel-color) !important; +} + +/* Menu popup shadow */ +.menupopup-arrowscrollbox { + box-shadow: 0 5px 5px -3px rgba(0,0,0,0.2), + 0 8px 10px 1px rgba(0,0,0,0.14), + 0 3px 14px 2px rgba(0,0,0,0.12) !important; +} + +/* "Saved to Library!" popup notification */ +#confirmation-hint { + --panel-background: var(--lwt-accent-color) !important; + --panel-border-color: var(--lwt-accent-color) !important; + --panel-color: var(--lwt-text-color) !important; +} + +/* "Confirm before closing multiple tabs" popup checkboxes and dialog buttons */ +.checkbox-check { + background-color: var(--buttons-destructive-bgcolor) !important; + color: var(--buttons-destructive-color) !important; +} +.dialog-button-box > button:nth-child(6) { + background-color: var(--buttons-destructive-bgcolor) !important; + color: var(--buttons-destructive-color) !important; +} + +/* Main App Menu (≡), Tab Manager Menu, and Unified Extensions Menu */ +panel { + --panel-background: black !important; + --panel-shadow: none !important; +} +.panel-viewstack { + background-color: var(--arrowpanel-background) !important; + border-color: var(--arrowpanel-background) !important; +} + +/* Tab Manager Menu */ +#allTabsMenu-allTabsView-tabs, +#allTabsMenu-allTabsView, +#allTabsMenu-containerTabsView { + background-color: var(--toolbar-bgcolor) !important; +} +#allTabsMenu-containerTabsButton, +#allTabsMenu-containerTabsView > .panel-header { + color: var(--toolbar-color) !important; +} +#allTabsMenu-containerTabsButton:hover { + background-color: var(--panel-banner-item-hover-bgcolor) !important; +} +.all-tabs-item[selected] { + background-color: var(--arrowpanel-dimmed-further) !important; +} +.all-tabs-item:hover[selected] { + --panel-item-active-bgcolor: transparent !important; + --panel-item-hover-bgcolor: transparent !important; + background-color: var(--arrowpanel-dimmed) !important; +} +.all-tabs-item:hover:not([selected]) { + --panel-item-active-bgcolor: transparent !important; + --panel-item-hover-bgcolor: transparent !important; + background-color: var(--panel-banner-item-hover-bgcolor) !important; +} +.all-tabs-close-button:hover { + background-color: var(--toolbarbutton-hover-background) !important; +} + +/* Main App Menu (≡) item icons */ +#appMenu-zoom-controls::before, +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before, +#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image { + fill: currentColor; + -moz-context-properties: fill; + margin-inline: 0 20px !important; +} +#appMenu-zoom-controls::before, +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { + display: flex; + content: ""; + width: 16px; + height: 16px; +} +#appMenu-new-tab-button2 { + order: 1 !important; + list-style-image: url("chrome://global/skin/icons/plus.svg"); +} +#appMenu-bookmarks-button { + order: 2 !important; + list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); +} +#appMenu-history-button { + order: 3 !important; + list-style-image: url("chrome://browser/skin/history.svg"); +} +#appMenu-downloads-button { + order: 4 !important; + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} +#appMenu-extensions-themes-button { + order: 5 !important; + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); +} +#appMenu-passwords-button { + order: 6 !important; + list-style-image: url("chrome://browser/skin/login.svg"); +} +#appMenu-find-button2 { + order: 7 !important; + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); +} +#appMenu-zoom-controls { + order: 8 !important; +} +#appMenu-zoom-controls::before { + background-image: url("chrome://browser/skin/fullscreen.svg"); +} +#appMenu-new-window-button2 { + order: 9 !important; + list-style-image: url("chrome://browser/skin/window.svg"); +} +#appMenu-new-private-window-button2 { + order: 10 !important; + list-style-image: url("chrome://browser/skin/privateBrowsing.svg"); +} +#appMenu-save-file-button2 { + order: 11 !important; + list-style-image: url("chrome://browser/skin/save.svg"); +} +#appMenu-print-button2 { + order: 12 !important; + list-style-image: url("chrome://global/skin/icons/print.svg"); +} +#appMenu-help-button2 { + order: 13 !important; + list-style-image: url("chrome://global/skin/icons/help.svg"); +} +#appMenu-more-button2 { + order: 14 !important; + list-style-image: url("chrome://global/skin/icons/developer.svg"); +} +#appMenu-settings-button { + order: 15 !important; + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} +#appMenu-quit-button2 { + order: 16 !important; + list-style-image: url("chrome://devtools/skin/images/search-clear.svg"); +} +/* Use account-button icon for signed in sync item */ +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { + background-image: var(--avatar-image-url) +} + +/* Tab Manager Menu button tab counter */ +#alltabs-button { + display: -moz-box !important; +} +#TabsToolbar-customization-target { + counter-reset: tabCount; +} +.tabbrowser-tab { + counter-increment: tabCount; +} +#alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; +} +#alltabs-button > .toolbarbutton-badge-stack { + position: relative !important; +} +#alltabs-button > .toolbarbutton-badge-stack::before { + content: counter(tabCount); + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: var(--toolbarbutton-inner-padding); + left: 50%; + transform: translateX(-50%); +} +#alltabs-button > .toolbarbutton-badge-stack { + border-radius: var(--toolbarbutton-border-radius); +} + +/* Tab Manager Menu tab counter */ +#allTabsMenu-allTabsViewTabs, /* before FF 106 */ +#allTabsMenu-allTabsView-tabs { /* since FF 106 */ + counter-reset: nn_tabs 0 !important; +} +.all-tabs-button::before { + display: -moz-inline-box !important; + -moz-padding-end: 8px !important; + content: counter(nn_tabs) !important; + font-size: 12px !important; + margin-top: -2px !important; + margin-right: -2px !important; +} +.all-tabs-item { + counter-increment: nn_tabs !important; +} + +/* Apply this customization only on smaller screens in landscape mode */ +@media (max-height: 300px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 4px; + --urlbar-width: calc(100vw - 188.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 5px; + --urlbar-width: calc(100vw - 196.5px); + } + + /* Remove items from Main App Menu (≡) */ + #appMenu-fxa-status2, + #appMenu-fxa-separator, + #appMenu-protonMainView toolbarseparator, + #appMenu-fullscreen-button2, + #appMenu-passwords-button, + .subviewbutton[shortcut]::after { + display: none !important; + } + + /* Fix flickering of Main App Menu (≡) */ + #appMenu-popup { + width: 260px !important; + } + #appMenu-protonMainView vbox.panel-subview-body { + height: 253px !important; + max-height: 253px !important; + width: 250px !important; + } + + /* Change Main App Menu (≡) button to its mobile equivalent (⋮) */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + margin-right: -10px !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack { + position: relative !important; + width: 75% !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack::before { + content: "⋮"; + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.9 ); + left: 50%; + transform: translateX(-50%); + font-size: 18px !important; + font-weight: bold !important; + } + + /* Hide Tab Bar and Private Browsing indicator */ + #tabbrowser-tabs, + #private-browsing-indicator-with-label { + visibility: collapse !important; + } + + /* Hide Nav Bar when in Fullscreen mode */ + #nav-bar[inFullscreen] { + display: none; + } + + /* Edit Bookmark Panel */ + #editBookmarkPanel { + background-color: var(--arrowpanel-background) !important; + max-height: 100vh !important; + max-width: 100vw !important; + width: 100vw !important; + } + #editBookmarkPanel box.panel-header, + #editBookmarkHeaderSeparator, + #editBookmarkPanelInfoArea, + #editBookmarkSeparator, + #editBMPanel_folderRow, + #editBMPanel_tagsRow { + display: none !important; + } + #editBookmarkPanelContent { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + #editBookmarkPanelBottomButtons { + margin-top: -5px !important; + margin-left: -50px !important; + } + + /* Find Bar*/ + input.findbar-textbox { + font-size: 12pt !important; + } + + /* Remove items from Tab Manager Menu */ + #allTabsMenu-searchTabs, + #allTabsMenu-tabsSeparator { + display: none; + } + + /* Fix flickering of Tab Manager Menu and extension popups */ + #customizationui-widget-panel, + #customizationui-widget-multiview box.panel-viewstack { + height: calc(100vh - 35px) !important; + max-height: calc(100vh - 35px) !important; + width: 100vw !important; + max-width: 100vw !important; + } + + /* Tab Manager Menu inspired by Firefox for Android */ + #allTabsMenu-containerTabsButton { + border-radius: 0 !important; + margin: 0 !important; + padding-left: 10px !important; + padding-right: 10px !important; + width: calc(100vw - 207px) !important; + } + .all-tabs-item { + border-radius: 0 !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(100vw - 207px) !important; + } + .all-tabs-close-button { + border-radius: 100% !important; + margin-left: calc(var(--urlbar-min-height) * -0.6 ) !important; + margin-right: calc(var(--urlbar-min-height) * -0.6 ) !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(var(--urlbar-min-height) * 2.25 ) !important; + } + .all-tabs-close-button > .toolbarbutton-icon { + margin-left: calc(var(--urlbar-min-height) * 0.625 ) !important; + height: calc(var(--urlbar-min-height) * 0.5 ) !important; + width: calc(var(--urlbar-min-height) * 0.5 ) !important; + } + + /* Tab Manager Menu button inspired by Firefox for Android */ + #alltabs-button > .toolbarbutton-badge-stack::before { + border: 1px solid var(--toolbarbutton-icon-fill); + border-radius: 2px; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.85 ) !important; + padding: 0 5px 0 5px; + font-size: 8px !important; + font-weight: 600 !important; + font-family: "Noto Sans" !important; + } + + /* Move Tab Manager Menu button to right of URL Bar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + top: var(--alltabs-button-position) !important; + right: 28.5px; + z-index: 2 !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* URL Bar */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + #urlbar, + #searchbar, + #urlbar-input, + #urlbar-input-container, + #urlbar-background { + border-radius: 7px !important; + } + + /* Remove items from Unified Extensions Menu */ + #unified-extensions-panel .panel-header, + #unified-extensions-panel toolbarseparator, + #unified-extensions-manage-extensions { + display: none !important; + } + + /* Adjust button padding and font size for secondary text in Unified Extensions Menu */ + #unified-extensions-panel .subviewbutton { + padding: 6px !important; + } + .unified-extensions-item-message { + font-size: 75% !important; + } + + /* Fix flickering of Unified Extensions Menu */ + #unified-extensions-panel { + --uei-icon-size: 20px; + width: 360px !important; + } + #unified-extensions-view { + margin-top: 6px !important; + height: 230px !important; + max-height: 230px !important; + width: 350px !important; + } + + /* Add padding to bottom of Unified Extensions Menu to look better */ + #unified-extensions-area { + padding-bottom: 5px !important; + } + + /* Allow extensions to use full display */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: 100vw !important; + min-width: 100vw !important; + } + + /* Change Unified Extensions Menu button icon to Home button icon */ + #unified-extensions-button { + list-style-image: url("chrome://browser/skin/home.svg") !important; + } + + /* Adjust "Saved to Library!" popup notification */ + #confirmation-hint { + padding: 10px !important; + width: 100vw !important; + } + + /* Adjust "Confirm before closing multiple tabs" popup */ + .dialogFrame { + width: 100vw !important; + max-width: 100vw !important; + } + +} + +/* Apply this customization only on smaller screens in portait mode */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 4px; + --urlbar-width: calc(100vw - 110.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 5px; + --urlbar-width: calc(100vw - 114.5px); + } + + /* Main App Menu (≡) */ + #appMenu-popup { + padding-left: 10px !important; + padding-right: 10px !important; + height: 340px; + max-height: 340px; + width: 260px !important; + } + #appMenu-protonMainView vbox.panel-subview-body { + margin-top: 4px !important; + height: 318px !important; + max-height: 318px !important; + width: 230px !important; + } + #appMenu-multiView box.panel-viewstack:first-child { + height: calc(100vh - 100px) !important; + max-height: calc(100vh - 100px) !important; + } + #appMenu-fxa-status2, + #appMenu-fxa-separator, + #appMenu-protonMainView toolbarseparator, + #appMenu-fullscreen-button2, + #appMenu-passwords-button, + .subviewbutton[shortcut]::after { + display: none !important; + } + + /* Change Main App Menu (≡) button to its mobile equivalent (⋮) */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + margin-right: -10px !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack { + position: relative !important; + width: 75% !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack::before { + content: "⋮"; + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.9 ); + left: 50%; + transform: translateX(-50%); + font-size: 18px !important; + font-weight: bold !important; + } + + /* Hide Tab Bar and Private Browsing Indicator */ + #tabbrowser-tabs, + #private-browsing-indicator-with-label { + visibility: collapse !important; + } + + /* Hide Nav Bar when in Fullscreen mode */ + #nav-bar[inFullscreen] { + display: none; + } + + /* Edit Bookmark Panel */ + #editBookmarkPanel { + background-color: var(--arrowpanel-background) !important; + margin-bottom: 225px !important; + max-height: 100vh !important; + max-width: 100vw !important; + width: 100vw !important; + } + #editBookmarkPanel box.panel-header, + #editBookmarkHeaderSeparator, + #editBookmarkPanelInfoArea, + #editBookmarkSeparator, + #editBMPanel_folderRow, + #editBMPanel_tagsRow { + display: none !important; + } + #editBookmarkPanelContent { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + #editBookmarkPanelBottomButtons { + margin-top: -5px !important; + margin-left: -50px !important; + } + + /* Find Bar */ + .findbar-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + height: 40px !important; + } + .findbar-textbox { + width: 100% !important; + } + .findbar-container checkbox { + padding: 10px 0px; + } + .findbar-highlight, + .findbar-case-sensitive, + .findbar-match-diacritics, + .findbar-entire-word, + /*.found-matches,*/ + .findbar-find-status, + .find-status-icon { + display: none; + } + input.findbar-textbox { + font-size: 12pt !important; + } + + /* Fix Popups */ + #notification-popup { + margin-top: -500px !important; + margin-right: -500px !important; + height: calc(100vh - 250px) !important; + max-width: 100vw !important; + } + #downloadsPanel-mainView { + max-width: calc(100vw - 10px); + } + #backForwardMenu { + margin-top: -250px; + height: 200px; + min-height: 200px; + max-width: 100vw !important; + } + #context-inspect, + #context-inspect-a11y, + #context-savelinktopocket, + #context-searchselect, + #context-sendlinktodevice, + #context-viewpartialsource-selection, + #inspect-separator { + display: none !important + } + #protections-popup, + #permission-popup, + #widget-overflow, + #identity-popup { + max-width: 100vw !important; + } + #protections-popup-mainView { + min-width: 100vw !important; + max-width: 100vw !important; + } + #widget-overflow, + #widget-overflow-mainView { + height: calc(100vh - 80px) !important; + } + #customizationui-widget-panel { + width: 100vw !important; + } + #BMB_bookmarksPopup { + padding-left: 10px !important; + padding-right: 10px !important; + width: 100vw !important; + } + + /* Tab Manager Menu */ + #allTabsMenu-searchTabs, + #allTabsMenu-tabsSeparator { + display: none; + } + #customizationui-widget-panel { + padding-left: 10px !important; + padding-right: 10px !important; + } + #allTabsMenu-multiView box.panel-viewstack { + height: calc(100vh - 100px) !important; + max-height: calc(100vh - 100px) !important; + } + #customizationui-widget-multiview box.panel-viewstack { + height: 330px !important; + max-height: 330px !important; + } + #allTabsMenu-allTabsViewTabs, + #allTabsMenu-allTabsView-tabs { + max-width: calc(100vw - 30px); + padding-top: 2px !important; + } + + /* Tab Manager Menu inspired by Firefox for Android */ + #allTabsMenu-containerTabsButton { + border-radius: 0 !important; + margin: 0 !important; + padding-left: 10px !important; + padding-right: 10px !important; + width: calc(100vw - 30px) !important; + } + .all-tabs-item { + border-radius: 0 !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(100vw - 30px) !important; + } + .all-tabs-close-button { + border-radius: 100% !important; + margin-left: calc(var(--urlbar-min-height) * -0.6 ) !important; + margin-right: calc(var(--urlbar-min-height) * -0.6 ) !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(var(--urlbar-min-height) * 2.25 ) !important; + } + .all-tabs-close-button > .toolbarbutton-icon { + margin-left: calc(var(--urlbar-min-height) * 0.625 ) !important; + height: calc(var(--urlbar-min-height) * 0.5 ) !important; + width: calc(var(--urlbar-min-height) * 0.5 ) !important; + } + + /* Tab Manager Menu button inspired by Firefox for Android */ + #alltabs-button > .toolbarbutton-badge-stack::before { + border: 1px solid var(--toolbarbutton-icon-fill); + border-radius: 2px; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.85 ) !important; + padding: 0 5px 0 5px; + font-size: 8px !important; + font-weight: 600 !important; + font-family: "Noto Sans" !important; + } + + /* Move Tab Manager Menu button to right of urlbar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + top: var(--alltabs-button-position) !important; + right: 28.5px; + z-index: 2 !important; + } + + /* Nav Bar */ + #back-button, + #forward-button, + #customizableui-special-spring1, + #customizableui-special-spring2, + #library-button, + #sidebar-button, + #fxa-toolbar-menu-button { + display: none !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* URL Bar */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + #urlbar { + padding: 0px 5px; + } + #urlbar-input { + font-size: 10pt !important; + } + #urlbar[focused] #urlbar-input { + font-size: calc(var(--urlbar-height) - 9px) !important; + } + #urlbar[focused] #remote-control-box, + #urlbar[focused] #identity-box, + #urlbar[focused] #tracking-protection-icon-container, + #urlbar[focused] #reader-mode-button, + #urlbar[focused] #page-action-buttons, + #tracking-protection-icon-container, + #identity-permission-box, + #userContext-indicator, + #pageActionButton { + display: none; + } + #identity-icon-label { + display: none; + } + .urlbarView { + position: fixed !important; + inset: 0px 0px 84px 0px; + width: 100% !important; + background: var(--arrowpanel-background); + margin: 0px !important; + margin-inline: 0px !important; + border-inline: 0px !important; + overflow-y: auto !important; + overflow-x: none !important; + scrollbar-width: none; + } + #PersonalToolbar { + display: none; + } + :root { + --bookmarks-toolbar-overlapping-browser-height: 0 !important; + } + #urlbar, + #searchbar, + #urlbar-input, + #urlbar-input-container, + #urlbar-background { + border-radius: 7px !important; + } + + /* Remove items from Unified Extensions Menu */ + #unified-extensions-panel .panel-header, + #unified-extensions-panel toolbarseparator, + #unified-extensions-manage-extensions { + display: none !important; + } + + /* Adjust button padding and font size for secondary text in Unified Extensions Menu */ + #unified-extensions-panel .subviewbutton { + padding: 6px !important; + } + .unified-extensions-item-message { + font-size: 75% !important; + } + + /* Fix flickering for Unified Extensions Menu */ + #unified-extensions-panel { + --uei-icon-size: 20px; + padding-left: 10px !important; + padding-right: 10px !important; + width: 100vw !important; + } + #unified-extensions-view { + margin-top: 6px !important; + height: 325px !important; + max-height: 325px !important; + width: calc(100vw - 30px) !important; + } + + /* Allow extensions to use full popup */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: calc(100vw - 20px) !important; + min-width: calc(100vw - 20px) !important; + } + + /* Change Unified Extensions Menu button icon to Home button icon */ + #unified-extensions-button { + list-style-image: url("chrome://browser/skin/home.svg") !important; + } + + /* Adjust "Saved to Library!" popup notification */ + #confirmation-hint { + padding: 10px !important; + width: 100vw !important; + } + + /* Adjust "Confirm before closing multiple tabs" popup */ + .dialogFrame { + width: 100vw !important; + max-width: 100vw !important; + } + + /* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */ + #unified-extensions-area { + padding-bottom: 120px !important; + } + + /* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */ + #appMenu-quit-button2 { + margin-bottom: 64px !important; + } + +} + +/* Private Browsing Mode theme for URL Bar and Nav Bar */ +:root { + --toolbar-field-border-color: var(--arrowpanel-background) !important; + --toolbar-field-focus-border-color: var(--arrowpanel-background) !important; + --lwt-toolbar-field-background-color: var(--arrowpanel-background) !important; + --toolbar-field-background-color: var(--arrowpanel-background) !important; + --toolbar-field-focus-background-color: var(--arrowpanel-background) !important; +} +#nav-bar { + background-image: -moz-linear-gradient(to right, rgb(112,34,145), rgb(57,52,115)) !important; +} +#navigator-toolbox { + --lwt-tabs-border-color: rgb(134,93,180) !important; +} diff --git a/src/userChrome/fenix_one.css b/src/userChrome/fenix_one.css new file mode 100644 index 0000000..4e071a3 --- /dev/null +++ b/src/userChrome/fenix_one.css @@ -0,0 +1,1131 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/******************************************/ +/* IMPORTANT: */ +/* */ +/* One of the things this code will do is */ +/* to move the Tab Manager Menu button to */ +/* the right side of the URL Bar. */ +/* */ +/* For the best results, consider moving */ +/* the Unified Extensions Menu button to */ +/* the left of the URL Bar and removing */ +/* less important toolbar items by using */ +/* the "Customize Toolbar" feature, or by */ +/* using a user.js file in your profile. */ +/******************************************/ + +/* Resist Fingerprinting Letterbox background color and minimum width for display and URL Bar */ +:root { + --tabpanel-background-color: black !important; + min-width: 300px !important; +} +#urlbar-container { + min-width: 150px !important; + flex-shrink: 1 !important; +} + +/* Menu Bar color + (hides the line at the top/bottom of the screen when Menubar is hidden) */ +toolbar[type=menubar] { + background-color: black !important; + color: var(--toolbar-color) !important; +} + +/* Nav Bar bottom border color */ +#navigator-toolbox { + border-bottom-color: black !important; +} + +/* Remove popup warning when enterimg Fullscreen */ +.pointerlockfswarning { + display: none !important; +} + +/* Fenix Colors */ +:root { + /* Popup panels */ + --arrowpanel-background: rgb(41,29,79) !important; + --arrowpanel-border-color: transparent !important; + --arrowpanel-color: white !important; + --arrowpanel-dimmed: rgb(97,84,124) !important; + --arrowpanel-dimmed-further: rgb(66,50,98) !important; + --panel-background: rgb(41,29,79) !important; + --panel-border-color: transparent !important; + --panel-color: white !important; + --panel-separator-color: transparent !important; + --panel-item-hover-bgcolor: rgba(255,255,255,0.2) !important; + --panel-item-active-bgcolor: rgba(255,255,255,0.2) !important; + --panel-banner-item-background-color: rgb(117,66,228) !important; + --panel-banner-item-hover-bgcolor: rgb(69,68,76) !important; + --panel-banner-item-active-bgcolor: rgb(69,68,76) !important; + --panel-banner-item-update-supported-bgcolor: rgb(117,66,228) !important; + --panel-banner-item-info-icon-bgcolor: rgb(117,66,228) !important; + --panel-banner-item-color: white !important; + --panel-description-color: white !important; + --panel-disabled-color: gray !important; + --menuitem-disabled-hover-background-color: transparent !important; + + /* window and toolbar background */ + --lwt-accent-color: rgb(117,66,228) !important; + --lwt-accent-color-inactive: rgba(117,66,228,0.3) !important; + --toolbar-non-lwt-bgcolor: rgb(41,29,79) !important; + --toolbar-non-lwt-textcolor: white !important; + --toolbar-bgcolor: rgb(43,42,51) !important; + --toolbar-color: rgb(171,113,255) !important; + --tabpanel-background-color: black !important; + + /* tabs with system theme - text is not controlled by variable */ + --tab-selected-bgcolor: rgb(117,66,228) !important; + + /* tabs with any other theme */ + --lwt-text-color: white !important; + --lwt-selected-tab-background-color: rgb(117,66,228) !important; + + /* toolbar area */ + --toolbarbutton-icon-fill: white !important; + --toolbarbutton-icon-fill-attention: white !important; + --toolbarbutton-hover-background: rgba(255,255,255,0.2) !important; + --toolbarbutton-active-background: rgba(255,255,255,0.2) !important; + --lwt-toolbarbutton-icon-fill-attention: white !important; + --lwt-toolbarbutton-hover-background: rgba(255,255,255,0.2) !important; + --lwt-toolbarbutton-active-background: rgba(255,255,255,0.2) !important; + --toolbarseparator-color: black !important; + + /* urlbar */ + --toolbar-field-border-color: rgb(28,27,34) !important; + --toolbar-field-focus-border-color: rgb(28,27,34) !important; + --urlbar-popup-url-color: white !important; + --urlbar-box-bgcolor: var(--button-bgcolor); + --urlbar-box-focus-bgcolor: var(--button-bgcolor); + --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor); + --urlbar-box-active-bgcolor: var(--button-active-bgcolor); + --urlbar-box-text-color: inherit; + --urlbar-box-hover-text-color: var(--urlbar-box-text-color); + --lwt-brighttext-url-color: #00ddff; + + /* urlbar Firefox < 92 */ + --lwt-toolbar-field-background-color: rgb(28,27,34) !important; + --lwt-toolbar-field-focus: white !important; + --lwt-toolbar-field-color: white !important; + --lwt-toolbar-field-focus-color: white !important; + + /* urlbar Firefox 92+ */ + --toolbar-field-background-color: rgb(28,27,34) !important; + --toolbar-field-focus-background-color: rgb(28,27,34) !important; + --toolbar-field-icon-fill-attention: rgb(117,66,228) !important; + --toolbar-field-color: white !important; + --toolbar-field-focus-color: white !important; + + /* sidebar - note the sidebar-box rule for the header-area */ + --lwt-sidebar-background-color: rgb(41,29,79) !important; + --lwt-sidebar-text-color: white !important; + + /* findbar */ + --focus-outline-color: rgb(117,66,228) !important; + --input-border-color: rgb(117,66,228) !important; + +/* buttons and checkboxes */ + --button-bgcolor: rgb(117,66,228) !important; + --button-color: white !important; + --button-hover-bgcolor: rgb(144,89,255) !important; + --button-active-bgcolor: rgb(144,89,255) !important; + --button-primary-bgcolor: rgb(117,66,228) !important; + --button-primary-hover-bgcolor: rgb(144,89,255) !important; + --button-primary-active-bgcolor: rgb(144,89,255) !important; + --button-primary-color: white !important; + --in-content-primary-button-background: rgb(117,66,228) !important; + --in-content-primary-button-background-hover: rgb(144,89,255) !important; + --in-content-primary-button-background-active: rgb(144,89,255) !important; + --buttons-destructive-bgcolor: #e22850; + --buttons-destructive-hover-bgcolor: #c50042; + --buttons-destructive-active-bgcolor: #810220; + --buttons-destructive-color: #fbfbfe; + --checkbox-unchecked-bgcolor: rgb(41,29,79) !important; + --checkbox-unchecked-hover-bgcolor: rgb(144,89,255) !important; + --checkbox-unchecked-active-bgcolor: rgb(144,89,255) !important; + --checkbox-checked-border-color: rgb(117,66,228) !important; + --checkbox-checked-bgcolor: rgb(117,66,228) !important; + --checkbox-checked-color: white !important; + --checkbox-checked-hover-bgcolor: rgba(144,89,255) !important; + --checkbox-checked-active-bgcolor: rgba(144,89,255) !important; + --uc-checkbox-checked-bgcolor: rgb(117,66,228) !important; + + /* icon glow */ + --uc-icon-glow-primary: rgb(117,66,228); + --uc-icon-glow-secondary: white; + --uc-icon-glow-hover-primary: rgb(117,66,228); + --uc-icon-glow-hover-secondary: white; +} + +/* line between nav-bar and tabs toolbar, + also fallback color for border around selected tab */ +#navigator-toolbox { + --lwt-tabs-border-color: rgb(65,64,72) !important; +} + +/* Line above tabs */ +#tabbrowser-tabs { + --lwt-tab-line-color: none !important; +} + +/* the header-area of sidebar needs this to work */ +#sidebar-box { + --sidebar-background-color: rgb(41,29,79) !important; +} + +/* Find Bar */ +.findbar-find-previous, +.findbar-find-next, +input.findbar-textbox, +findbar { + border: none !important; + box-shadow: none !important; + background-color: var(--arrowpanel-background) !important; + color: var(--toolbar-field-color) !important; +} + +/* Context Menus */ +menupopup { + --panel-background: rgb(41,29,79) !important; + --panel-border-color: transparent !important; + --panel-color: white !important; + --panel-separator-color: transparent !important; +} +menuseparator { + display: none !important; +} +menu:hover, +menuitem:hover { + background-color: var(--panel-item-hover-bgcolor) !important; + color: var(--panel-color) !important; +} + +/* Menu popup shadow */ +.menupopup-arrowscrollbox { + box-shadow: 0 5px 5px -3px rgba(0,0,0,0.2), + 0 8px 10px 1px rgba(0,0,0,0.14), + 0 3px 14px 2px rgba(0,0,0,0.12) !important; +} + +/* "Saved to Library!" popup notification */ +#confirmation-hint { + --panel-background: var(--lwt-accent-color) !important; + --panel-border-color: var(--lwt-accent-color) !important; + --panel-color: var(--lwt-text-color) !important; +} + +/* "Confirm before closing multiple tabs" popup checkboxes and dialog buttons */ +.checkbox-check { + background-color: var(--buttons-destructive-bgcolor) !important; + color: var(--buttons-destructive-color) !important; +} +.dialog-button-box > button:nth-child(6) { + background-color: var(--buttons-destructive-bgcolor) !important; + color: var(--buttons-destructive-color) !important; +} + +/* Main App Menu (≡), Tab Manager Menu, and Unified Extensions Menu */ +panel { + --panel-background: black !important; + --panel-shadow: none !important; +} +.panel-viewstack { + background-color: var(--arrowpanel-background) !important; + border-color: var(--arrowpanel-background) !important; +} + +/* Tab Manager Menu */ +#allTabsMenu-allTabsView-tabs, +#allTabsMenu-allTabsView, +#allTabsMenu-containerTabsView { + background-color: var(--toolbar-bgcolor) !important; +} +#allTabsMenu-containerTabsButton, +#allTabsMenu-containerTabsView > .panel-header { + color: var(--toolbar-color) !important; +} +#allTabsMenu-containerTabsButton:hover { + background-color: var(--panel-banner-item-hover-bgcolor) !important; +} +.all-tabs-item[selected] { + background-color: var(--arrowpanel-dimmed-further) !important; +} +.all-tabs-item:hover[selected] { + --panel-item-active-bgcolor: transparent !important; + --panel-item-hover-bgcolor: transparent !important; + background-color: var(--arrowpanel-dimmed) !important; +} +.all-tabs-item:hover:not([selected]) { + --panel-item-active-bgcolor: transparent !important; + --panel-item-hover-bgcolor: transparent !important; + background-color: var(--panel-banner-item-hover-bgcolor) !important; +} +.all-tabs-close-button:hover { + background-color: var(--toolbarbutton-hover-background) !important; +} + +/* Main App Menu (≡) item icons */ +#appMenu-zoom-controls::before, +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before, +#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image { + fill: currentColor; + -moz-context-properties: fill; + margin-inline: 0 20px !important; +} +#appMenu-zoom-controls::before, +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { + display: flex; + content: ""; + width: 16px; + height: 16px; +} +#appMenu-new-tab-button2 { + order: 1 !important; + list-style-image: url("chrome://global/skin/icons/plus.svg"); +} +#appMenu-bookmarks-button { + order: 2 !important; + list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); +} +#appMenu-history-button { + order: 3 !important; + list-style-image: url("chrome://browser/skin/history.svg"); +} +#appMenu-downloads-button { + order: 4 !important; + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} +#appMenu-extensions-themes-button { + order: 5 !important; + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); +} +#appMenu-passwords-button { + order: 6 !important; + list-style-image: url("chrome://browser/skin/login.svg"); +} +#appMenu-find-button2 { + order: 7 !important; + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); +} +#appMenu-zoom-controls { + order: 8 !important; +} +#appMenu-zoom-controls::before { + background-image: url("chrome://browser/skin/fullscreen.svg"); +} +#appMenu-new-window-button2 { + order: 9 !important; + list-style-image: url("chrome://browser/skin/window.svg"); +} +#appMenu-new-private-window-button2 { + order: 10 !important; + list-style-image: url("chrome://browser/skin/privateBrowsing.svg"); +} +#appMenu-save-file-button2 { + order: 11 !important; + list-style-image: url("chrome://browser/skin/save.svg"); +} +#appMenu-print-button2 { + order: 12 !important; + list-style-image: url("chrome://global/skin/icons/print.svg"); +} +#appMenu-help-button2 { + order: 13 !important; + list-style-image: url("chrome://global/skin/icons/help.svg"); +} +#appMenu-more-button2 { + order: 14 !important; + list-style-image: url("chrome://global/skin/icons/developer.svg"); +} +#appMenu-settings-button { + order: 15 !important; + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} +#appMenu-quit-button2 { + order: 16 !important; + list-style-image: url("chrome://devtools/skin/images/search-clear.svg"); +} +/* Use account-button icon for signed in sync item */ +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { + background-image: var(--avatar-image-url) +} + +/* Tab Manager Menu button tab counter */ +#alltabs-button { + display: -moz-box !important; +} +#TabsToolbar-customization-target { + counter-reset: tabCount; +} +.tabbrowser-tab { + counter-increment: tabCount; +} +#alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; +} +#alltabs-button > .toolbarbutton-badge-stack { + position: relative !important; +} +#alltabs-button > .toolbarbutton-badge-stack::before { + content: counter(tabCount); + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: var(--toolbarbutton-inner-padding); + left: 50%; + transform: translateX(-50%); +} +#alltabs-button > .toolbarbutton-badge-stack { + border-radius: var(--toolbarbutton-border-radius); +} + +/* Tab Manager Menu tab counter */ +#allTabsMenu-allTabsViewTabs, /* before FF 106 */ +#allTabsMenu-allTabsView-tabs { /* since FF 106 */ + counter-reset: nn_tabs 0 !important; +} +.all-tabs-button::before { + display: -moz-inline-box !important; + -moz-padding-end: 8px !important; + content: counter(nn_tabs) !important; + font-size: 12px !important; + margin-top: -2px !important; + margin-right: -2px !important; +} +.all-tabs-item { + counter-increment: nn_tabs !important; +} + +/* Apply this customization only on smaller screens in landscape mode */ +@media (max-height: 300px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 3.5px; + --urlbar-width: calc(100vw - 188.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 4.5px; + --urlbar-width: calc(100vw - 196.5px); + } + + /* Remove items from Main App Menu (≡) */ + #appMenu-fxa-status2, + #appMenu-fxa-separator, + #appMenu-protonMainView toolbarseparator, + #appMenu-fullscreen-button2, + #appMenu-passwords-button, + .subviewbutton[shortcut]::after { + display: none !important; + } + + /* Fix flickering of Main App Menu (≡) */ + #appMenu-popup { + width: 260px !important; + } + #appMenu-protonMainView vbox.panel-subview-body { + height: 253px !important; + max-height: 253px !important; + width: 250px !important; + } + + /* Change Main App Menu (≡) button to its mobile equivalent (⋮) */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + margin-right: -10px !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack { + position: relative !important; + width: 75% !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack::before { + content: "⋮"; + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.9 ); + left: 50%; + transform: translateX(-50%); + font-size: 18px !important; + font-weight: bold !important; + } + + /* Hide Tab Bar and Private Browsing indicator */ + #tabbrowser-tabs, + #private-browsing-indicator-with-label { + visibility: collapse !important; + } + + /* Hide Nav Bar when in Fullscreen mode */ + #nav-bar[inFullscreen] { + display: none; + } + + /* Move Nav Bar to bottom */ + :root:not([uidensity="touch"],[inFullscreen]) { + --uc-bottom-toolbar-height: calc(39px + var(--toolbarbutton-outer-padding) ) + } + :root[uidensity="touch"]:not([inFullscreen]){ + --uc-bottom-toolbar-height: calc(43px + var(--toolbarbutton-outer-padding) ) + } + #browser, + #customization-container { + margin-bottom: var(--uc-bottom-toolbar-height,0px) + } + #nav-bar{ + position: fixed !important; + bottom: 0px; + width: 100%; + z-index: 1; + } + .panel-viewstack { + max-height: unset !important; + } + + /* Edit Bookmark Panel */ + #editBookmarkPanel { + background-color: var(--arrowpanel-background) !important; + max-height: 100vh !important; + max-width: 100vw !important; + width: 100vw !important; + } + #editBookmarkPanel box.panel-header, + #editBookmarkHeaderSeparator, + #editBookmarkPanelInfoArea, + #editBookmarkSeparator, + #editBMPanel_folderRow, + #editBMPanel_tagsRow { + display: none !important; + } + #editBookmarkPanelContent { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + #editBookmarkPanelBottomButtons { + margin-top: -5px !important; + margin-left: -50px !important; + } + + /* Find Bar*/ + input.findbar-textbox { + font-size: 12pt !important; + } + + /* Remove items from Tab Manager Menu */ + #allTabsMenu-searchTabs, + #allTabsMenu-tabsSeparator { + display: none; + } + + /* Fix flickering of Tab Manager Menu and extension popups */ + #customizationui-widget-panel, + #customizationui-widget-multiview box.panel-viewstack { + height: calc(100vh - 35px) !important; + max-height: calc(100vh - 35px) !important; + width: 100vw !important; + max-width: 100vw !important; + } + + /* Tab Manager Menu inspired by Firefox for Android */ + #allTabsMenu-containerTabsButton { + border-radius: 0 !important; + margin: 0 !important; + padding-left: 10px !important; + padding-right: 10px !important; + width: calc(100vw - 207px) !important; + } + .all-tabs-item { + border-radius: 0 !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(100vw - 207px) !important; + } + .all-tabs-close-button { + border-radius: 100% !important; + margin-left: calc(var(--urlbar-min-height) * -0.6 ) !important; + margin-right: calc(var(--urlbar-min-height) * -0.6 ) !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(var(--urlbar-min-height) * 2.25 ) !important; + } + .all-tabs-close-button > .toolbarbutton-icon { + margin-left: calc(var(--urlbar-min-height) * 0.625 ) !important; + height: calc(var(--urlbar-min-height) * 0.5 ) !important; + width: calc(var(--urlbar-min-height) * 0.5 ) !important; + } + + /* Tab Manager Menu button inspired by Firefox for Android */ + #alltabs-button > .toolbarbutton-badge-stack::before { + border: 1px solid var(--toolbarbutton-icon-fill); + border-radius: 2px; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.85 ) !important; + padding: 0 5px 0 5px; + font-size: 8px !important; + font-weight: 600 !important; + font-family: "Noto Sans" !important; + } + + /* Move Tab Manager Menu button to right of URL Bar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + bottom: var(--alltabs-button-position) !important; + right: 28.5px; + z-index: 2 !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* URL Bar */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + #urlbar, + #searchbar, + #urlbar-input, + #urlbar-input-container, + #urlbar-background { + border-radius: 7px !important; + } + + /* Remove items from Unified Extensions Menu */ + #unified-extensions-panel .panel-header, + #unified-extensions-panel toolbarseparator, + #unified-extensions-manage-extensions { + display: none !important; + } + + /* Adjust button padding and font size for secondary text in Unified Extensions Menu */ + #unified-extensions-panel .subviewbutton { + padding: 6px !important; + } + .unified-extensions-item-message { + font-size: 75% !important; + } + + /* Fix flickering of Unified Extensions Menu */ + #unified-extensions-panel { + --uei-icon-size: 20px; + width: 360px !important; + } + #unified-extensions-view { + margin-top: 6px !important; + height: 230px !important; + max-height: 230px !important; + width: 350px !important; + } + + /* Add padding to bottom of Unified Extensions Menu to look better */ + #unified-extensions-area { + padding-bottom: 5px !important; + } + + /* Allow extensions to use full display */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: 100vw !important; + min-width: 100vw !important; + } + + /* Change Unified Extensions Menu button icon to Home button icon */ + #unified-extensions-button { + list-style-image: url("chrome://browser/skin/home.svg") !important; + } + + /* Adjust "Saved to Library!" popup notification */ + #confirmation-hint { + padding: 10px !important; + width: 100vw !important; + } + + /* Adjust "Confirm before closing multiple tabs" popup */ + .dialogFrame { + width: 100vw !important; + max-width: 100vw !important; + } + +} + +/* Apply this customization only on smaller screens in portait mode */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --widget-overflow-margin: 22px; + --unified-extensions-panel-margin: 22px; + --customizationui-widget-panel-margin: 22px; + --appMenu-popup-margin: 22px; + --BMB_bookmarksPopup-margin: 22px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 3.5px; + --urlbar-width: calc(100vw - 110.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --widget-overflow-margin: 23px; + --unified-extensions-panel-margin: 23px; + --customizationui-widget-panel-margin: 23px; + --appMenu-popup-margin: 23px; + --BMB_bookmarksPopup-margin: 23px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 4.5px; + --urlbar-width: calc(100vw - 114.5px); + } + + /* Main App Menu (≡) */ + #appMenu-popup { + padding-left: 10px !important; + padding-right: 10px !important; + height: 340px; + max-height: 340px; + width: 260px !important; + } + #appMenu-protonMainView vbox.panel-subview-body { + margin-top: 4px !important; + height: 318px !important; + max-height: 318px !important; + width: 230px !important; + } + #appMenu-multiView box.panel-viewstack:first-child { + height: calc(100vh - 100px) !important; + max-height: calc(100vh - 100px) !important; + } + #appMenu-fxa-status2, + #appMenu-fxa-separator, + #appMenu-protonMainView toolbarseparator, + #appMenu-fullscreen-button2, + #appMenu-passwords-button, + .subviewbutton[shortcut]::after { + display: none !important; + } + + /* Change Main App Menu (≡) button to its mobile equivalent (⋮) */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + margin-right: -10px !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack { + position: relative !important; + width: 75% !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack::before { + content: "⋮"; + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.9 ); + left: 50%; + transform: translateX(-50%); + font-size: 18px !important; + font-weight: bold !important; + } + + /* Hide Tab Bar and Private Browsing Indicator */ + #tabbrowser-tabs, + #private-browsing-indicator-with-label { + visibility: collapse !important; + } + + /* Hide Nav Bar when in Fullscreen mode */ + #nav-bar[inFullscreen] { + display: none; + } + + /* Move Nav Bar to bottom */ + :root:not([uidensity="touch"],[inFullscreen]) { + --uc-bottom-toolbar-height: calc(39px + var(--toolbarbutton-outer-padding) ) + } + :root[uidensity="touch"]:not([inFullscreen]){ + --uc-bottom-toolbar-height: calc(43px + var(--toolbarbutton-outer-padding) ) + } + #browser, + #customization-container { + margin-bottom: var(--uc-bottom-toolbar-height,0px) + } + #nav-bar{ + position: fixed !important; + bottom: 0px; + width: 100%; + z-index: 1; + } + .panel-viewstack { + max-height: unset !important; + } + + /* Adjust Widget Overflow Menu (») spawn height */ + #widget-overflow { + margin-bottom: var(--widget-overflow-margin) !important; + } + + /* Adjust Unified Extensions Menu spawn height */ + #unified-extensions-panel { + margin-bottom: var(--unified-extensions-panel-margin) !important; + } + + /* Adjust Tab Manager Menu spawn height */ + #customizationui-widget-panel { + margin-bottom: var(--customizationui-widget-panel-margin) !important; + } + + /* Adjust Main App Menu (≡) spawn height */ + #appMenu-popup { + margin-bottom: var(--appMenu-popup-margin) !important; + } + + /* Adjust Bookmarks Menu (★) spawn height */ + #BMB_bookmarksPopup { + margin-bottom: var(--BMB_bookmarksPopup-margin) !important; + } + + /* Edit Bookmark Panel */ + #editBookmarkPanel { + background-color: var(--arrowpanel-background) !important; + margin-bottom: 225px !important; + max-height: 100vh !important; + max-width: 100vw !important; + width: 100vw !important; + } + #editBookmarkPanel box.panel-header, + #editBookmarkHeaderSeparator, + #editBookmarkPanelInfoArea, + #editBookmarkSeparator, + #editBMPanel_folderRow, + #editBMPanel_tagsRow { + display: none !important; + } + #editBookmarkPanelContent { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + #editBookmarkPanelBottomButtons { + margin-top: -5px !important; + margin-left: -50px !important; + } + + /* Find Bar */ + .findbar-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + height: 40px !important; + } + .findbar-textbox { + width: 100% !important; + } + .findbar-container checkbox { + padding: 10px 0px; + } + .findbar-highlight, + .findbar-case-sensitive, + .findbar-match-diacritics, + .findbar-entire-word, + /*.found-matches,*/ + .findbar-find-status, + .find-status-icon { + display: none; + } + input.findbar-textbox { + font-size: 12pt !important; + } + + /* Fix Popups */ + #notification-popup { + margin-top: -500px !important; + margin-right: -500px !important; + height: calc(100vh - 250px) !important; + max-width: 100vw !important; + } + #downloadsPanel-mainView { + max-width: calc(100vw - 10px); + } + #backForwardMenu { + margin-top: -250px; + height: 200px; + min-height: 200px; + max-width: 100vw !important; + } + #context-inspect, + #context-inspect-a11y, + #context-savelinktopocket, + #context-searchselect, + #context-sendlinktodevice, + #context-viewpartialsource-selection, + #inspect-separator { + display: none !important + } + #protections-popup, + #permission-popup, + #widget-overflow, + #identity-popup { + max-width: 100vw !important; + } + #protections-popup-mainView { + min-width: 100vw !important; + max-width: 100vw !important; + } + #widget-overflow, + #widget-overflow-mainView { + height: calc(100vh - 80px) !important; + } + #customizationui-widget-panel { + width: 100vw !important; + } + #BMB_bookmarksPopup { + padding-left: 10px !important; + padding-right: 10px !important; + width: 100vw !important; + } + + /* Tab Manager Menu */ + #allTabsMenu-searchTabs, + #allTabsMenu-tabsSeparator { + display: none; + } + #customizationui-widget-panel { + padding-left: 10px !important; + padding-right: 10px !important; + } + #allTabsMenu-multiView box.panel-viewstack { + height: calc(100vh - 100px) !important; + max-height: calc(100vh - 100px) !important; + } + #customizationui-widget-multiview box.panel-viewstack { + height: 330px !important; + max-height: 330px !important; + } + #allTabsMenu-allTabsViewTabs, + #allTabsMenu-allTabsView-tabs { + max-width: calc(100vw - 30px); + padding-top: 2px !important; + } + + /* Tab Manager Menu inspired by Firefox for Android */ + #allTabsMenu-containerTabsButton { + border-radius: 0 !important; + margin: 0 !important; + padding-left: 10px !important; + padding-right: 10px !important; + width: calc(100vw - 30px) !important; + } + .all-tabs-item { + border-radius: 0 !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(100vw - 30px) !important; + } + .all-tabs-close-button { + border-radius: 100% !important; + margin-left: calc(var(--urlbar-min-height) * -0.6 ) !important; + margin-right: calc(var(--urlbar-min-height) * -0.6 ) !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(var(--urlbar-min-height) * 2.25 ) !important; + } + .all-tabs-close-button > .toolbarbutton-icon { + margin-left: calc(var(--urlbar-min-height) * 0.625 ) !important; + height: calc(var(--urlbar-min-height) * 0.5 ) !important; + width: calc(var(--urlbar-min-height) * 0.5 ) !important; + } + + /* Tab Manager Menu button inspired by Firefox for Android */ + #alltabs-button > .toolbarbutton-badge-stack::before { + border: 1px solid var(--toolbarbutton-icon-fill); + border-radius: 2px; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.85 ) !important; + padding: 0 5px 0 5px; + font-size: 8px !important; + font-weight: 600 !important; + font-family: "Noto Sans" !important; + } + + /* Move Tab Manager Menu button to right of urlbar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + bottom: var(--alltabs-button-position) !important; + right: 28.5px; + z-index: 2 !important; + } + + /* Nav Bar */ + #back-button, + #forward-button, + #customizableui-special-spring1, + #customizableui-special-spring2, + #library-button, + #sidebar-button, + #fxa-toolbar-menu-button { + display: none !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* URL Bar */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + #urlbar { + padding: 0px 5px; + } + #urlbar-input { + font-size: 10pt !important; + } + #urlbar[focused] #urlbar-input { + font-size: calc(var(--urlbar-height) - 9px) !important; + } + #urlbar[focused] #remote-control-box, + #urlbar[focused] #identity-box, + #urlbar[focused] #tracking-protection-icon-container, + #urlbar[focused] #reader-mode-button, + #urlbar[focused] #page-action-buttons, + #tracking-protection-icon-container, + #identity-permission-box, + #userContext-indicator, + #pageActionButton { + display: none; + } + #identity-icon-label { + display: none; + } + .urlbarView { + position: fixed !important; + inset: 0px 0px 84px 0px; + width: 100% !important; + background: var(--arrowpanel-background); + margin: 0px !important; + margin-inline: 0px !important; + border-inline: 0px !important; + overflow-y: auto !important; + overflow-x: none !important; + scrollbar-width: none; + } + #PersonalToolbar { + display: none; + } + :root { + --bookmarks-toolbar-overlapping-browser-height: 0 !important; + } + #urlbar, + #searchbar, + #urlbar-input, + #urlbar-input-container, + #urlbar-background { + border-radius: 7px !important; + } + + /* Remove items from Unified Extensions Menu */ + #unified-extensions-panel .panel-header, + #unified-extensions-panel toolbarseparator, + #unified-extensions-manage-extensions { + display: none !important; + } + + /* Adjust button padding and font size for secondary text in Unified Extensions Menu */ + #unified-extensions-panel .subviewbutton { + padding: 6px !important; + } + .unified-extensions-item-message { + font-size: 75% !important; + } + + /* Fix flickering for Unified Extensions Menu */ + #unified-extensions-panel { + --uei-icon-size: 20px; + padding-left: 10px !important; + padding-right: 10px !important; + width: 100vw !important; + } + #unified-extensions-view { + margin-top: 6px !important; + height: 325px !important; + max-height: 325px !important; + width: calc(100vw - 30px) !important; + } + + /* Allow extensions to use full popup */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: calc(100vw - 20px) !important; + min-width: calc(100vw - 20px) !important; + } + + /* Change Unified Extensions Menu button icon to Home button icon */ + #unified-extensions-button { + list-style-image: url("chrome://browser/skin/home.svg") !important; + } + + /* Adjust "Saved to Library!" popup notification */ + #confirmation-hint { + padding: 10px !important; + width: 100vw !important; + } + + /* Adjust "Confirm before closing multiple tabs" popup */ + .dialogFrame { + width: 100vw !important; + max-width: 100vw !important; + } + + /* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */ + #unified-extensions-area { + padding-bottom: 120px !important; + } + + /* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */ + #appMenu-quit-button2 { + margin-bottom: 64px !important; + } + +} + +/* Private Browsing Mode theme for URL Bar and Nav Bar */ +:root { + --toolbar-field-border-color: var(--arrowpanel-background) !important; + --toolbar-field-focus-border-color: var(--arrowpanel-background) !important; + --lwt-toolbar-field-background-color: var(--arrowpanel-background) !important; + --toolbar-field-background-color: var(--arrowpanel-background) !important; + --toolbar-field-focus-background-color: var(--arrowpanel-background) !important; +} +#nav-bar { + background-image: -moz-linear-gradient(to right, rgb(112,34,145), rgb(57,52,115)) !important; +} +#navigator-toolbox { + --lwt-tabs-border-color: rgb(134,93,180) !important; +} diff --git a/src/userChrome/glow.css b/src/userChrome/glow.css index e0e41c6..6b15e21 100644 --- a/src/userChrome/glow.css +++ b/src/userChrome/glow.css @@ -6,7 +6,7 @@ filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary)); } -/* Newtab buttons (+) and Tab Manager button glow on hover */ +/* Newtab buttons (+) and Tab Manager button (v) glow on hover */ #alltabs-button:hover > .toolbarbutton-badge-stack, #new-tab-button:hover, #tabs-newtab-button:hover { diff --git a/src/userChrome/iconized_main_menu.css b/src/userChrome/iconized_main_menu.css index 990516f..0ebf7c3 100644 --- a/src/userChrome/iconized_main_menu.css +++ b/src/userChrome/iconized_main_menu.css @@ -2,74 +2,46 @@ See the above repository for updates as well as full license text. */ /* Adds icons to main menu items which were removed in Proton */ +#appMenu-zoom-controls::before, #appMenu-fxa-status2[fxastatus] > toolbarbutton::before, -#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image { - fill: currentColor; - -moz-context-properties: fill; - margin-inline: 0 8px !important; +#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image{ + fill: currentColor; + -moz-context-properties: fill; + margin-inline: 0 8px !important; } -#appMenu-new-tab-button2 { - list-style-image: url("chrome://browser/skin/new-tab.svg"); -} -#appMenu-new-window-button2 { - list-style-image: url("chrome://browser/skin/window.svg"); -} -#appMenu-new-private-window-button2 { - list-style-image: url("chrome://browser/skin/privateBrowsing.svg"); -} -#appMenu-bookmarks-button { - list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); -} -#appMenu-history-button { - list-style-image: url("chrome://browser/skin/history.svg"); -} -#appMenu-downloads-button { - list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); -} -#appMenu-passwords-button { - list-style-image: url("chrome://browser/skin/login.svg"); -} -#appMenu-extensions-themes-button { - list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); -} -#appMenu-print-button2 { - list-style-image: url("chrome://global/skin/icons/print.svg"); -} -#appMenu-save-file-button2 { - list-style-image: url("chrome://browser/skin/save.svg"); -} -#appMenu-find-button2 { - list-style-image: url("chrome://global/skin/icons/search-glass.svg"); -} -#appMenu-settings-button { - list-style-image: url("chrome://global/skin/icons/settings.svg"); -} -#appMenu-more-button2 { - list-style-image: url("chrome://global/skin/icons/developer.svg"); -} -#appMenu-help-button2 { - list-style-image: url("chrome://global/skin/icons/info.svg"); -} -#appMenu-quit-button2 { - list-style-image: url("chrome://devtools/skin/images/search-clear.svg"); +#appMenu-zoom-controls::before, +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before{ + display: flex; + content: ""; + width: 16px; + height: 16px; } +#appMenu-new-tab-button2{ list-style-image: url("chrome://browser/skin/new-tab.svg") } +#appMenu-new-window-button2{ list-style-image: url("chrome://browser/skin/window.svg") } +#appMenu-new-private-window-button2{ list-style-image: url("chrome://browser/skin/privateBrowsing.svg") } +#appMenu-bookmarks-button{ list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg") } +#appMenu-history-button{ list-style-image: url("chrome://browser/skin/history.svg") } +#appMenu-downloads-button{ list-style-image: url("chrome://browser/skin/downloads/downloads.svg") } +#appMenu-passwords-button{ list-style-image: url("chrome://browser/skin/login.svg") } +#appMenu-extensions-themes-button{ list-style-image: url("chrome://mozapps/skin/extensions/extension.svg") } +#appMenu-print-button2{ list-style-image: url("chrome://global/skin/icons/print.svg") } +#appMenu-save-file-button2{ list-style-image: url("chrome://browser/skin/save.svg") } +#appMenu-find-button2{ list-style-image: url("chrome://global/skin/icons/search-glass.svg") } +#appMenu-settings-button{ list-style-image: url("chrome://global/skin/icons/settings.svg") } +#appMenu-more-button2{ list-style-image: url("chrome://global/skin/icons/developer.svg") } +#appMenu-help-button2{ list-style-image: url("chrome://global/skin/icons/info.svg") } +#appMenu-quit-button2{ list-style-image: url("chrome://devtools/skin/images/search-clear.svg") } +#appMenu-translate-button{ list-style-image: url("chrome://browser/skin/translations.svg") } +#appMenu-zoom-controls::before{ background-image: url("chrome://browser/skin/fullscreen.svg") } /* Use account-button icon for signed in sync item */ -#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { - display: flex; - content: ""; - width: 16px; - height: 16px; - background-image: var(--avatar-image-url); -} +/*#appMenu-fxa-status2[fxastatus] > toolbarbutton::before{ background-image: var(--avatar-image-url) }*/ /* Add somewhat hacky separator to zoom controls so it looks consistent */ -#appMenu-protonMainView > .panel-subview-body::after { - content: ""; - display: flex; - border-bottom: 1px solid var(--panel-separator-color); - margin: var(--panel-separator-margin); -} - -#appMenu-find-button2 ~ * { - -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */ - order: 2; +/*#appMenu-protonMainView > .panel-subview-body::after{ + content: ""; + display: flex; + border-bottom: 1px solid var(--panel-separator-color); + margin: var(--panel-separator-margin); } +#appMenu-find-button2 ~ *{ + order: 2; +}*/ diff --git a/src/userChrome/new-tab-button.css b/src/userChrome/new-tab-button.css index 76abc7c..a2b0073 100644 --- a/src/userChrome/new-tab-button.css +++ b/src/userChrome/new-tab-button.css @@ -9,9 +9,10 @@ display: none !important; } - /* Display overflow New-tab button by default */ + /* Display overflow New-tab button by default and fix alignment */ #new-tab-button { display: initial !important; + margin-top: 4px !important; } } diff --git a/src/userChrome/numbered_tabs.css b/src/userChrome/numbered_tabs.css index 409cc18..0c8e011 100644 --- a/src/userChrome/numbered_tabs.css +++ b/src/userChrome/numbered_tabs.css @@ -4,9 +4,15 @@ See the above repository for updates as well as full license text. */ /* Apply this customization only on smaller screens */ @media (max-width: 700px) { - /* Show a number before tab text */ - /* Actually, let's show the tab number after tab content, right-align it, - and fix its position directly on the tab close button */ + /* Density variables */ + :root:not([uidensity="touch"]) { + --tab-number-position: calc(var(--toolbarbutton-inner-padding) * 1.6 ); + } + :root[uidensity="touch"] { + --tab-number-position: calc(var(--toolbarbutton-inner-padding) * 1.8 ); + } + + /* Show the tab number after tab content, right-align it, and fix its position directly on the tab close button */ #tabbrowser-tabs { counter-reset: nth-tab 0; /* Change to -1 for 0-indexing */ } @@ -16,7 +22,7 @@ See the above repository for updates as well as full license text. */ position: absolute !important; position: fixed; right: 24px; - top: 12px; + bottom: var(--tab-number-position); width: 0 !important; } diff --git a/src/userChrome/popups.before-ff-108.css b/src/userChrome/popups.before-ff-108.css deleted file mode 100644 index c4e6166..0000000 --- a/src/userChrome/popups.before-ff-108.css +++ /dev/null @@ -1,15 +0,0 @@ -/* Copyright 2022 Oliver Smith - * SPDX-License-Identifier: MPL-2.0 */ - -@media (max-width: 700px) { - /* Hack to prevent popups from flickering around. It looks like e.g. the - * editBookmarkPanel has two heights otherwise, and draws one frame with a - * short height and one frame with the proper one. */ - #mainPopupSet { - position: fixed !important; - top: 0px; - left: 0px; - right: 0px; - bottom: 100px; - } -} diff --git a/src/userChrome/popups.css b/src/userChrome/popups.css index 7ce9b69..76713a4 100644 --- a/src/userChrome/popups.css +++ b/src/userChrome/popups.css @@ -8,6 +8,7 @@ #notification-popup { /*margin-left: -200px !important;*/ margin-top: -500px !important; + margin-right: -500px !important; height: calc(100vh - 250px) !important; max-width: 100vw !important; } @@ -59,13 +60,29 @@ #widget-overflow-mainView { height: calc(100vh - 80px) !important; } - #unified-extensions-view { - width: calc(100vw - 10px) !important; + + /* Adjust Tab Manager Menu to fix flickering */ + #customizationui-widget-panel { + width: 100vw !important; } - /* fix widget overflow to fit ublock0_raymondhill_net-browser-action */ - #widget-overflow-mainView { - height: 357px !important; + /* Adjust Bookmarks Menu (★) and fix flickering */ + #BMB_bookmarksPopup { + padding-left: 10px !important; + padding-right: 10px !important; + width: 100vw !important; + } + + /* Adjust "Saved to Library!" popup notification */ + #confirmation-hint { + padding: 10px !important; + width: 100vw !important; + } + + /* Adjust "Confirm before closing multiple tabs" popup */ + .dialogFrame { + width: 100vw !important; + max-width: 100vw !important; } } diff --git a/src/userChrome/round_ui_items.css b/src/userChrome/round_ui_items.css index d6e760e..61e99b9 100644 --- a/src/userChrome/round_ui_items.css +++ b/src/userChrome/round_ui_items.css @@ -48,10 +48,10 @@ menupopup { border-color: transparent !important; } -#nav-bar { +/*#nav-bar { box-shadow: none !important; margin-top: 3px; -} +}*/ .tab-line { display: none; } @@ -76,7 +76,7 @@ menugroup:hover > menuitem { border-radius: 16px !important; } -/* Urlbar and searchbar shape */ +/* URL Bar and Search Bar shape */ #urlbar, #searchbar, #urlbar-input, @@ -88,7 +88,7 @@ menugroup:hover > menuitem { border-radius: 12px !important; } -/* Findbar shape */ +/* Find Bar shape */ input.findbar-textbox { border-radius: 9px !important; font-size: 14px !important; diff --git a/src/userChrome/single_tab_mode-alt.css b/src/userChrome/single_tab_mode-alt.css new file mode 100644 index 0000000..a70659c --- /dev/null +++ b/src/userChrome/single_tab_mode-alt.css @@ -0,0 +1,98 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/******************************************/ +/* IMPORTANT: */ +/* */ +/* One of the things this code will do is */ +/* to move the Tab Manager Menu button to */ +/* the right side of the URL Bar. */ +/* */ +/* For the best results, consider moving */ +/* the Unified Extensions Menu button to */ +/* the left of the URL Bar and removing */ +/* less important toolbar items by using */ +/* the "Customize Toolbar" feature, or by */ +/* using a user.js file in your profile. */ +/******************************************/ + +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 48px; + --alltabs-number-position: calc(var(--toolbarbutton-inner-padding) * 1.5 ); + --urlbar-width: calc(100vw - 166px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 54px; + --alltabs-number-position: calc(var(--toolbarbutton-inner-padding) * 1.5 ); + --urlbar-width: calc(100vw - 171.5px); + } + + /* Hide Nav Bar and Tab Bar when in Fullscreen mode and hide Title Bar, Newtab button, and New-tab button */ + #nav-bar[inFullscreen], + #TabsToolbar[inFullscreen], + .titlebar-buttonbox-container, + #new-tab-button, + #tabs-newtab-button { + display: none !important; + } + + /* Hide unpinned inactive tabs */ + .tabbrowser-tab:not([pinned]):not([selected]) { + visibility: collapse !important; + min-width: 0 !important; + } + + /* Expand unpinned active tab */ + #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] { + min-width: 100vw !important; + } + #tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned])[selected] { + min-width: calc(100vw - 40px) !important; + } + + /* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + } + + /* Move Tab Manager Menu button to right of URL Bar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + top: var(--alltabs-button-position) !important; + right: 41.5px; + z-index: 2 !important; + } + #alltabs-button > .toolbarbutton-badge-stack::before { + bottom: calc(var(--toolbarbutton-inner-padding) * 0.7 ) !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* Reduce URL Bar width */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + +} diff --git a/src/userChrome/single_tab_mode.css b/src/userChrome/single_tab_mode.css index 1054f1d..038d849 100644 --- a/src/userChrome/single_tab_mode.css +++ b/src/userChrome/single_tab_mode.css @@ -4,44 +4,43 @@ /******************************************/ /* IMPORTANT: */ /* */ -/* This will move the Tab Manager button */ -/* to the right side of the URL Bar. */ +/* One of the things this code will do is */ +/* to move the Tab Manager Menu button to */ +/* the right side of the URL Bar. */ /* */ -/* Move the Unified Extensions button */ -/* to the left side of the URL Bar */ -/* using the Customize Toolbar feature, */ -/* or use a user.js file in your profile. */ +/* For the best results, consider moving */ +/* the Unified Extensions Menu button to */ +/* the left of the URL Bar and removing */ +/* less important toolbar items by using */ +/* the "Customize Toolbar" feature, or by */ +/* using a user.js file in your profile. */ /******************************************/ /* Apply this customization only on smaller screens */ @media (max-width: 700px) { - /* Reduce urlbar width */ - #urlbar { - width: calc(100vw - 166px) !important; + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 4.5px; + --alltabs-number-position: calc(var(--toolbarbutton-inner-padding) * 1.5 ); + --urlbar-width: calc(100vw - 166px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 5.5px; + --alltabs-number-position: calc(var(--toolbarbutton-inner-padding) * 1.5 ); + --urlbar-width: calc(100vw - 171.5px); } - /* Adjust Tab Manager Menu spawn height */ - #customizationui-widget-panel { - margin-bottom: 26px !important; - } - - /* Move Tab Manager Menu button to right of urlbar */ - :root { - --tab-border-radius: var(--toolbarbutton-border-radius) !important; - } - #alltabs-button > .toolbarbutton-badge-stack { - height: 32px; - width: 32px; - } - #alltabs-button { - position: absolute; - bottom: 48.5px; - right: 41.5px; - z-index: 1 !important; - } - - /* Hide Newtab and New-tab buttons */ + /* Hide Nav Bar and Tab Bar when in Fullscreen mode and hide Title Bar, Newtab button, and New-tab button */ + #nav-bar[inFullscreen], + #TabsToolbar[inFullscreen], + .titlebar-buttonbox-container, #new-tab-button, #tabs-newtab-button { display: none !important; @@ -61,4 +60,39 @@ min-width: calc(100vw - 40px) !important; } + /* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + } + + /* Move Tab Manager Menu button to right of URL Bar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + bottom: var(--alltabs-button-position) !important; + right: 41.5px; + z-index: 2 !important; + } + #alltabs-button > .toolbarbutton-badge-stack::before { + bottom: calc(var(--toolbarbutton-inner-padding) * 0.7 ) !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* Reduce URL Bar width */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + } diff --git a/src/userChrome/single_tab_mode_with_space_for_1_item.css b/src/userChrome/single_tab_mode_with_space_for_1_item.css deleted file mode 100644 index 4f7f469..0000000 --- a/src/userChrome/single_tab_mode_with_space_for_1_item.css +++ /dev/null @@ -1,34 +0,0 @@ -/* Copyright 2023 user0 - * SPDX-License-Identifier: MPL-2.0 */ - -/******************************************/ -/* IMPORTANT: */ -/* */ -/* This will expand the active tab, with */ -/* space for one item of your choice: */ -/* */ -/* New-tab, Tab Manager, or other button. */ -/* */ -/* In addition to your item of choice, */ -/* the active tab will dynamically shrink */ -/* in order to accommodate one pinned tab. */ -/******************************************/ - -/* Apply this customization only on smaller screens */ -@media (max-width: 700px) { - - /* Hide unpinned inactive tabs */ - .tabbrowser-tab:not([pinned]):not([selected]) { - visibility: collapse !important; - min-width: 0 !important; - } - - /* Expand unpinned active tab */ - #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] { - min-width: calc(100vw - 40px) !important; - } - #tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned])[selected] { - min-width: calc(100vw - 80px) !important; - } - -} diff --git a/src/userChrome/single_tab_mode_with_space_for_2_items.css b/src/userChrome/single_tab_mode_with_space_for_2_items.css deleted file mode 100644 index 9a5f1c5..0000000 --- a/src/userChrome/single_tab_mode_with_space_for_2_items.css +++ /dev/null @@ -1,34 +0,0 @@ -/* Copyright 2023 user0 - * SPDX-License-Identifier: MPL-2.0 */ - -/******************************************/ -/* IMPORTANT: */ -/* */ -/* This will expand the active tab, with */ -/* space for two items of your choice: */ -/* */ -/* New-tab, Tab Manager, or other button. */ -/* */ -/* In addition to your item of choice, */ -/* the active tab will dynamically shrink */ -/* in order to accommodate one pinned tab. */ -/******************************************/ - -/* Apply this customization only on smaller screens */ -@media (max-width: 700px) { - - /* Hide unpinned inactive tabs */ - .tabbrowser-tab:not([pinned]):not([selected]) { - visibility: collapse !important; - min-width: 0 !important; - } - - /* Expand unpinned active tab */ - #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] { - min-width: calc(100vw - 80px) !important; - } - #tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned])[selected] { - min-width: calc(100vw - 120px) !important; - } - -} diff --git a/src/userChrome/tab_counter.css b/src/userChrome/tab_counter.css index 1e08602..4e9795f 100644 --- a/src/userChrome/tab_counter.css +++ b/src/userChrome/tab_counter.css @@ -1,58 +1,54 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + /* Source from reddit users /u/BatDogOnBatMobile, /u/moko1960, and /u/It_Was_The_Other_Guy https://teddit.net/r/FirefoxCSS/comments/s4wsww/ https://teddit.net/r/FirefoxCSS/comments/yb8tr9/ */ -/* Apply this customization only on smaller screens */ -@media (max-width: 700px) { - - /* Show Tab Manager button even when tabs aren't overflowing - - can instead use browser.tabs.tabmanager.enabled;true as well - or skip this part if you want to retain the default behaviour */ - #alltabs-button { - display: -moz-box !important; - } - - /* Tab Manager button tab counter */ - #TabsToolbar-customization-target { - counter-reset: tabCount; - } - .tabbrowser-tab { - counter-increment: tabCount; - } - #alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { - visibility: collapse !important; - } - #alltabs-button > .toolbarbutton-badge-stack { - position: relative !important; - } - #alltabs-button > .toolbarbutton-badge-stack::before { - content: counter(tabCount); - border-bottom: 1px solid var(--toolbarbutton-icon-fill); - color: var(--toolbarbutton-icon-fill); - opacity: var(--toolbarbutton-icon-fill-opacity); - position: absolute; - bottom: var(--toolbarbutton-inner-padding); - left: 50%; - transform: translateX(-50%); - padding: 0 3px; - } - - /* Tab Manager menu tab counter */ - #allTabsMenu-allTabsViewTabs, /* before FF 106 */ - #allTabsMenu-allTabsView-tabs { /* since FF 106 */ - counter-reset: nn_tabs 0 !important; - } - .all-tabs-button::before { - display: -moz-inline-box !important; - -moz-padding-end: 8px !important; - content: counter(nn_tabs) !important; - /*font-weight: bold !important; */ - font-size: 12px !important; - margin-top: -2px !important; - margin-right: -2px !important; - } - .all-tabs-item { - counter-increment: nn_tabs !important; - } - +/* Show Tab Manager Menu button */ +#alltabs-button { + display: -moz-box !important; +} + +/* Tab Manager Menu button tab counter */ +#TabsToolbar-customization-target { + counter-reset: tabCount; +} +.tabbrowser-tab { + counter-increment: tabCount; +} +#alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; +} +#alltabs-button > .toolbarbutton-badge-stack { + position: relative !important; +} +#alltabs-button > .toolbarbutton-badge-stack::before { + content: counter(tabCount); + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: var(--toolbarbutton-inner-padding); + left: 50%; + transform: translateX(-50%); +} +#alltabs-button > .toolbarbutton-badge-stack { + border-radius: var(--toolbarbutton-border-radius); +} + +/* Tab Manager Menu tab counter */ +#allTabsMenu-allTabsViewTabs, /* before FF 106 */ +#allTabsMenu-allTabsView-tabs { /* since FF 106 */ + counter-reset: nn_tabs 0 !important; +} +.all-tabs-button::before { + display: -moz-inline-box !important; + -moz-padding-end: 8px !important; + content: counter(nn_tabs) !important; + font-size: 12px !important; + margin-top: -2px !important; + margin-right: -2px !important; +} +.all-tabs-item { + counter-increment: nn_tabs !important; } diff --git a/src/userChrome/tabmenu.css b/src/userChrome/tabmenu.css index fd72e88..8e54e3b 100644 --- a/src/userChrome/tabmenu.css +++ b/src/userChrome/tabmenu.css @@ -51,8 +51,6 @@ padding-right: 10px !important; /*height: 320px;*/ /*max-height: 320px;*/ - height: 333px; - max-height: 333px; } /*#allTabsMenu-allTabsView vbox.panel-subview-body { @@ -80,10 +78,10 @@ } #customizationui-widget-multiview box.panel-viewstack { /* since FF 113 */ /* Use the whole height */ - /*height: 300px !important;*/ - /*max-height: 300px !important;*/ - height: 333px !important; - max-height: 333px !important; + /*height: 300px !important; + max-height: 300px !important;*/ + height: 330px !important; + max-height: 330px !important; } #allTabsMenu-allTabsViewTabs, /* before FF 106 */ diff --git a/src/userChrome/true_mobile_landscape-alt.css b/src/userChrome/true_mobile_landscape-alt.css new file mode 100644 index 0000000..e75c56a --- /dev/null +++ b/src/userChrome/true_mobile_landscape-alt.css @@ -0,0 +1,204 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/******************************************/ +/* IMPORTANT: */ +/* */ +/* One of the things this code will do is */ +/* to move the Tab Manager Menu button to */ +/* the right side of the URL Bar. */ +/* */ +/* For the best results, consider moving */ +/* the Unified Extensions Menu button to */ +/* the left of the URL Bar and removing */ +/* less important toolbar items by using */ +/* the "Customize Toolbar" feature, or by */ +/* using a user.js file in your profile. */ +/******************************************/ + +/* Apply this customization only on smaller screens in landscape mode */ +@media (max-height: 300px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 4px; + --urlbar-width: calc(100vw - 205.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 5px; + --urlbar-width: calc(100vw - 209.5px); + } + + /* Remove items from Main App Menu (≡) */ + #appMenu-fxa-status2, + #appMenu-fxa-separator, + #appMenu-protonMainView toolbarseparator, + #appMenu-fullscreen-button2, + #appMenu-passwords-button, + .subviewbutton[shortcut]::after { + display: none !important; + } + + /* Remove extra space above zoom controls in Main App Menu (≡) */ + #appMenu-zoom-controls { + margin-top: 0 !important; + } + + /* Fix flickering of Main App Menu (≡) */ + #appMenu-popup { + width: 260px !important; + } + #appMenu-protonMainView vbox.panel-subview-body { + height: 253px !important; + max-height: 253px !important; + width: 250px !important; + } + + /* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + } + + /* Hide Tab Bar and Private Browsing indicator */ + #tabbrowser-tabs, + #private-browsing-indicator-with-label { + visibility: collapse !important; + } + + /* Edit Bookmark Panel */ + #editBookmarkPanel { + background-color: var(--arrowpanel-background) !important; + max-height: 100vh !important; + max-width: 100vw !important; + width: 100vw !important; + } + #editBookmarkPanel box.panel-header, + #editBookmarkHeaderSeparator, + #editBookmarkPanelInfoArea, + #editBookmarkSeparator, + #editBMPanel_folderRow, + #editBMPanel_tagsRow { + display: none !important; + } + #editBookmarkPanelContent { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + #editBookmarkPanelBottomButtons { + margin-top: -5px !important; + margin-left: -50px !important; + } + + /* Remove items from Tab Manager Menu */ + #allTabsMenu-searchTabs, + #allTabsMenu-tabsSeparator { + display: none; + } + + /* Fix flickering of Tab Manager Menu and extension popups */ + #customizationui-widget-panel, + #customizationui-widget-multiview box.panel-viewstack { + height: calc(100vh - 35px) !important; + max-height: calc(100vh - 35px) !important; + width: 100vw !important; + max-width: 100vw !important; + } + + /* Move Tab Manager Menu button to right of URL Bar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + top: var(--alltabs-button-position) !important; + right: 41.5px; + z-index: 2 !important; + } + #alltabs-button > .toolbarbutton-badge-stack::before { + bottom: calc(var(--toolbarbutton-inner-padding) * 0.7 ) !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* Reduce URL Bar width */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + + /* Remove items from Unified Extensions Menu */ + #unified-extensions-panel .panel-header, + #unified-extensions-panel toolbarseparator, + #unified-extensions-manage-extensions { + display: none !important; + } + + /* Adjust button padding and font size for secondary text in Unified Extensions Menu */ + #unified-extensions-panel .subviewbutton { + padding: 6px !important; + } + .unified-extensions-item-message { + font-size: 75% !important; + } + + /* Fix flickering of Unified Extensions Menu */ + #unified-extensions-panel { + --uei-icon-size: 20px; + width: 360px !important; + } + #unified-extensions-view { + margin-top: 6px !important; + height: 230px !important; + max-height: 230px !important; + width: 350px !important; + } + + /* Add padding to bottom of Unified Extensions Menu to look better */ + #unified-extensions-area { + padding-bottom: 5px !important; + } + + /* Allow extensions to use full display */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: 100vw !important; + min-width: 100vw !important; + } + + /* Adjust "Saved to Library!" popup notification */ + #confirmation-hint { + padding: 10px !important; + width: 100vw !important; + } + +} + +/* Apply this customization only on smaller screens in portrait mode */ +@media (max-width: 700px) { + + /* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */ + #appMenu-quit-button2 { + margin-bottom: 64px !important; + } + + /* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */ + #unified-extensions-area { + padding-bottom: 120px !important; + } + +} diff --git a/src/userChrome/true_mobile_landscape.css b/src/userChrome/true_mobile_landscape.css new file mode 100644 index 0000000..47836d5 --- /dev/null +++ b/src/userChrome/true_mobile_landscape.css @@ -0,0 +1,230 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/******************************************/ +/* IMPORTANT: */ +/* */ +/* One of the things this code will do is */ +/* to move the Tab Manager Menu button to */ +/* the right side of the URL Bar. */ +/* */ +/* For the best results, consider moving */ +/* the Unified Extensions Menu button to */ +/* the left of the URL Bar and removing */ +/* less important toolbar items by using */ +/* the "Customize Toolbar" feature, or by */ +/* using a user.js file in your profile. */ +/******************************************/ + +/* Apply this customization only on smaller screens in landscape mode */ +@media (max-height: 300px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 3.5px; + --urlbar-width: calc(100vw - 205.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 4.5px; + --urlbar-width: calc(100vw - 209.5px); + } + + /* Remove items from Main App Menu (≡) */ + #appMenu-fxa-status2, + #appMenu-fxa-separator, + #appMenu-protonMainView toolbarseparator, + #appMenu-fullscreen-button2, + #appMenu-passwords-button, + .subviewbutton[shortcut]::after { + display: none !important; + } + + /* Remove extra space above zoom controls in Main App Menu (≡) */ + #appMenu-zoom-controls { + margin-top: 0 !important; + } + + /* Fix flickering of Main App Menu (≡) */ + #appMenu-popup { + width: 260px !important; + } + #appMenu-protonMainView vbox.panel-subview-body { + height: 253px !important; + max-height: 253px !important; + width: 250px !important; + } + + /* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + } + + /* Hide Tab Bar and Private Browsing indicator */ + #tabbrowser-tabs, + #private-browsing-indicator-with-label { + visibility: collapse !important; + } + + /* Move Nav Bar to bottom */ + :root:not([uidensity="touch"],[inFullscreen]) { + --uc-bottom-toolbar-height: calc(39px + var(--toolbarbutton-outer-padding) ) + } + :root[uidensity="touch"]:not([inFullscreen]){ + --uc-bottom-toolbar-height: calc(43px + var(--toolbarbutton-outer-padding) ) + } + #browser, + #customization-container { + margin-bottom: var(--uc-bottom-toolbar-height,0px) + } + #nav-bar{ + position: fixed !important; + bottom: 0px; + width: 100%; + z-index: 1; + } + #nav-bar[inFullscreen], + #TabsToolbar[inFullscreen], + .titlebar-buttonbox-container { + display: none; + } + .panel-viewstack { + max-height: unset !important; + } + + /* Edit Bookmark Panel */ + #editBookmarkPanel { + background-color: var(--arrowpanel-background) !important; + max-height: 100vh !important; + max-width: 100vw !important; + width: 100vw !important; + } + #editBookmarkPanel box.panel-header, + #editBookmarkHeaderSeparator, + #editBookmarkPanelInfoArea, + #editBookmarkSeparator, + #editBMPanel_folderRow, + #editBMPanel_tagsRow { + display: none !important; + } + #editBookmarkPanelContent { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + #editBookmarkPanelBottomButtons { + margin-top: -5px !important; + margin-left: -50px !important; + } + + /* Remove items from Tab Manager Menu */ + #allTabsMenu-searchTabs, + #allTabsMenu-tabsSeparator { + display: none; + } + + /* Fix flickering of Tab Manager Menu and extension popups */ + #customizationui-widget-panel, + #customizationui-widget-multiview box.panel-viewstack { + height: calc(100vh - 35px) !important; + max-height: calc(100vh - 35px) !important; + width: 100vw !important; + max-width: 100vw !important; + } + + /* Move Tab Manager Menu button to right of URL Bar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + bottom: var(--alltabs-button-position) !important; + right: 41.5px; + z-index: 2 !important; + } + #alltabs-button > .toolbarbutton-badge-stack::before { + bottom: calc(var(--toolbarbutton-inner-padding) * 0.7 ) !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* Reduce URL Bar width */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + + /* Remove items from Unified Extensions Menu */ + #unified-extensions-panel .panel-header, + #unified-extensions-panel toolbarseparator, + #unified-extensions-manage-extensions { + display: none !important; + } + + /* Adjust button padding and font size for secondary text in Unified Extensions Menu */ + #unified-extensions-panel .subviewbutton { + padding: 6px !important; + } + .unified-extensions-item-message { + font-size: 75% !important; + } + + /* Fix flickering of Unified Extensions Menu */ + #unified-extensions-panel { + --uei-icon-size: 20px; + width: 360px !important; + } + #unified-extensions-view { + margin-top: 6px !important; + height: 230px !important; + max-height: 230px !important; + width: 350px !important; + } + + /* Add padding to bottom of Unified Extensions Menu to look better */ + #unified-extensions-area { + padding-bottom: 5px !important; + } + + /* Allow extensions to use full display */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: 100vw !important; + min-width: 100vw !important; + } + + /* Adjust "Saved to Library!" popup notification */ + #confirmation-hint { + padding: 10px !important; + width: 100vw !important; + } + +} + +/* Apply this customization only on smaller screens in portrait mode */ +@media (max-width: 700px) { + + /* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */ + #appMenu-quit-button2 { + margin-bottom: 64px !important; + } + + /* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */ + #unified-extensions-area { + padding-bottom: 120px !important; + } + +} diff --git a/src/userChrome/true_mobile_mode-alt.css b/src/userChrome/true_mobile_mode-alt.css new file mode 100644 index 0000000..d7755a7 --- /dev/null +++ b/src/userChrome/true_mobile_mode-alt.css @@ -0,0 +1,79 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/******************************************/ +/* IMPORTANT: */ +/* */ +/* One of the things this code will do is */ +/* to move the Tab Manager Menu button to */ +/* the right side of the URL Bar. */ +/* */ +/* For the best results, consider moving */ +/* the Unified Extensions Menu button to */ +/* the left of the URL Bar and removing */ +/* less important toolbar items by using */ +/* the "Customize Toolbar" feature, or by */ +/* using a user.js file in your profile. */ +/******************************************/ + +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 4px; + --urlbar-width: calc(100vw - 166px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 5px; + --urlbar-width: calc(100vw - 171.5px); + } + + /* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + } + + /* Hide Tab Bar and Private Browsing Indicator */ + #tabbrowser-tabs, + #private-browsing-indicator-with-label { + visibility: collapse !important; + } + + /* Move Tab Manager Menu button to right of urlbar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + top: var(--alltabs-button-position) !important; + right: 41.5px; + z-index: 2 !important; + } + #alltabs-button > .toolbarbutton-badge-stack::before { + bottom: calc(var(--toolbarbutton-inner-padding) * 0.7 ) !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* Reduce URL Bar width */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + +} diff --git a/src/userChrome/true_mobile_mode.css b/src/userChrome/true_mobile_mode.css index dd4031d..cdb5430 100644 --- a/src/userChrome/true_mobile_mode.css +++ b/src/userChrome/true_mobile_mode.css @@ -4,46 +4,76 @@ /******************************************/ /* IMPORTANT: */ /* */ -/* This will move the Tab Manager button */ -/* to the right side of the URL Bar. */ +/* One of the things this code will do is */ +/* to move the Tab Manager Menu button to */ +/* the right side of the URL Bar. */ /* */ -/* Move the Unified Extensions button */ -/* to the left side of the URL Bar */ -/* using the "Customize Toolbar" feature, */ -/* or use a user.js file in your profile. */ +/* For the best results, consider moving */ +/* the Unified Extensions Menu button to */ +/* the left of the URL Bar and removing */ +/* less important toolbar items by using */ +/* the "Customize Toolbar" feature, or by */ +/* using a user.js file in your profile. */ /******************************************/ /* Apply this customization only on smaller screens */ @media (max-width: 700px) { - /* Hide Tabbar */ - #tabbrowser-tabs { + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 3.5px; + --urlbar-width: calc(100vw - 166px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 4.5px; + --urlbar-width: calc(100vw - 171.5px); + } + + /* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + } + + /* Hide Tab Bar and Private Browsing Indicator */ + #tabbrowser-tabs, + #private-browsing-indicator-with-label { visibility: collapse !important; } - /* Reduce urlbar width */ - #urlbar { - width: calc(100vw - 166px) !important; - } - - /* Adjust Tab Manager Menu spawn height */ - #customizationui-widget-panel { - margin-bottom: 26px !important; - } - - /* Move Tab Manager button to right of urlbar */ + /* Move Tab Manager Menu button to right of urlbar */ :root { --tab-border-radius: var(--toolbarbutton-border-radius) !important; } #alltabs-button > .toolbarbutton-badge-stack { - height: 32px; - width: 32px; + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; } #alltabs-button { position: absolute; - bottom: 4.5px; + bottom: var(--alltabs-button-position) !important; right: 41.5px; - z-index: 1 !important; + z-index: 2 !important; + } + #alltabs-button > .toolbarbutton-badge-stack::before { + bottom: calc(var(--toolbarbutton-inner-padding) * 0.7 ) !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* Reduce URL Bar width */ + #urlbar-container { + max-width: var(--urlbar-width) !important; } } diff --git a/src/userChrome/userChrome-desktop.css b/src/userChrome/userChrome-desktop.css index 782e5c6..42a192e 100644 --- a/src/userChrome/userChrome-desktop.css +++ b/src/userChrome/userChrome-desktop.css @@ -8,14 +8,16 @@ */ /* -@import "color_variable_template.css"; - -@import "colors.css"; +@import "fenix_colors.css"; +*/ +@import "true_mobile_landscape-alt.css"; +/* +@import "true_mobile_landscape.css"; */ @import "appMenu.css"; - +/* @import "browser.css"; - +*/ @import "editBookmarkPanel.css"; @import "findbar.css"; @@ -28,8 +30,10 @@ @import "urlbar.css"; -@import "alt-browser.css"; - +@import "extensions_menu.css"; +/* +@import "alt-browser-alt.css"; +*/ @import "custom_rules.css"; @import "hide_tabs_scrollbuttons.css"; @@ -37,25 +41,15 @@ @import "tab_close_button_always_on_hover.css"; @import "iconized_main_menu.css"; -/* + @import "round_ui_items.css"; - -@import "true_mobile_mode.css"; - -@import "single_tab_mode.css"; - -@import "single_tab_mode_with_space_for_1_item.css"; - -@import "single_tab_mode_with_space_for_2_items.css"; - -@import "hide_newtab_+_new-tab_buttons.css"; - -@import "numbered_tabs.css"; - +/* @import "tab_counter.css"; */ @import "hide_tab_counter.css"; - +/* +@import "hide_newtab_+_new-tab_buttons.css"; +*/ @import "new-tab-button.css"; @import "tabs_larger_min-width.css"; diff --git a/src/userChrome/userChrome-fenix.css b/src/userChrome/userChrome-fenix.css new file mode 100644 index 0000000..300d93e --- /dev/null +++ b/src/userChrome/userChrome-fenix.css @@ -0,0 +1,58 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Source files available here: + https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip + https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/ + https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313 +*/ + + +@import "fenix_colors.css"; +/* +@import "true_mobile_landscape-alt.css"; +*/ +@import "true_mobile_landscape.css"; + +@import "appMenu.css"; +/* +@import "browser.css"; +*/ +@import "editBookmarkPanel.css"; + +@import "findbar.css"; + +@import "popups.css"; + +@import "root.css"; + +@import "tabmenu.css"; + +@import "urlbar.css"; + +@import "extensions_menu.css"; + +@import "alt-browser-alt.css"; + +@import "custom_rules.css"; +/* +@import "round_ui_items.css"; +*/ +@import "numbered_tabs.css"; + +@import "tab_counter.css"; +/* +@import "fenix-alt.css"; +*/ +@import "fenix.css"; +/* +@import "dynamic_popups.css"; + +@import "dynamic_popups_plus.css"; + +@import "dynamic_popups_max.css"; +*/ +@import "dynamic_popups_pro.css"; +/* +@import "dynamic_popups_pro_max.css"; +*/ diff --git a/src/userChrome/userChrome-fenix_fox.css b/src/userChrome/userChrome-fenix_fox.css new file mode 100644 index 0000000..1aeec33 --- /dev/null +++ b/src/userChrome/userChrome-fenix_fox.css @@ -0,0 +1,26 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Source files available here: + https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip + https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/ + https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313 +*/ + +/* +@import "fenix_colors.css"; + +@import "fenix_fox-alt.css"; +*/ +@import "fenix_fox.css"; +/* +@import "dynamic_popups.css"; + +@import "dynamic_popups_plus.css"; + +@import "dynamic_popups_max.css"; +*/ +@import "dynamic_popups_pro.css"; +/* +@import "dynamic_popups_pro_max.css"; +*/ diff --git a/src/userChrome/userChrome-fenix_one.css b/src/userChrome/userChrome-fenix_one.css new file mode 100644 index 0000000..127325e --- /dev/null +++ b/src/userChrome/userChrome-fenix_one.css @@ -0,0 +1,24 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Source files available here: + https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip + https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/ + https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313 +*/ + +/* +@import "fenix_one-alt.css"; +*/ +@import "fenix_one.css"; +/* +@import "dynamic_popups.css"; + +@import "dynamic_popups_plus.css"; + +@import "dynamic_popups_max.css"; +*/ +@import "dynamic_popups_pro.css"; +/* +@import "dynamic_popups_pro_max.css"; +*/ diff --git a/src/userChrome/userChrome-hybrid.css b/src/userChrome/userChrome-hybrid.css deleted file mode 100644 index 4125954..0000000 --- a/src/userChrome/userChrome-hybrid.css +++ /dev/null @@ -1,72 +0,0 @@ -/* Copyright 2023 user0 - * SPDX-License-Identifier: MPL-2.0 */ - -/* Source files available here: - https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip - https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/ - https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313 -*/ - -/* -@import "color_variable_template.css"; - -@import "colors.css"; -*/ -@import "appMenu.css"; - -@import "browser.css"; - -@import "editBookmarkPanel.css"; - -@import "findbar.css"; - -@import "popups.css"; - -@import "root.css"; - -@import "tabmenu.css"; - -@import "urlbar.css"; - -@import "alt-browser.css"; - -@import "custom_rules.css"; - -@import "hide_tabs_scrollbuttons.css"; - -@import "tab_close_button_always_on_hover.css"; - -@import "iconized_main_menu.css"; - -@import "round_ui_items.css"; -/* -@import "true_mobile_mode.css"; - -@import "single_tab_mode.css"; - -@import "single_tab_mode_with_space_for_1_item.css"; - -@import "single_tab_mode_with_space_for_2_items.css"; -*/ -@import "hide_newtab_+_new-tab_buttons.css"; -/* -@import "numbered_tabs.css"; -*/ -@import "tab_counter.css"; -/* -@import "hide_tab_counter.css"; - -@import "new-tab-button.css"; -*/ -@import "tabs_larger_min-width.css"; - -@import "tabs_fill_available_width.css"; -/* -@import "glow.css"; - -@import "colorful_inactive_tabs.css"; - -@import "tab_animated_active_border.css"; - -@import "borderless_transparent_active_tab.css"; -*/ diff --git a/src/userChrome/userChrome-mobile+color+glow+rainbow.css b/src/userChrome/userChrome-mobile+color+glow+rainbow.css deleted file mode 100644 index 87aee20..0000000 --- a/src/userChrome/userChrome-mobile+color+glow+rainbow.css +++ /dev/null @@ -1,71 +0,0 @@ -/* Copyright 2023 user0 - * SPDX-License-Identifier: MPL-2.0 */ - -/* Source files available here: - https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip - https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/ - https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313 -*/ - - -@import "color_variable_template.css"; - -@import "colors.css"; - -@import "appMenu.css"; - -@import "browser.css"; - -@import "editBookmarkPanel.css"; - -@import "findbar.css"; - -@import "popups.css"; - -@import "root.css"; - -@import "tabmenu.css"; - -@import "urlbar.css"; - -@import "alt-browser.css"; - -@import "custom_rules.css"; - -@import "hide_tabs_scrollbuttons.css"; - -@import "tab_close_button_always_on_hover.css"; - -@import "iconized_main_menu.css"; - -@import "round_ui_items.css"; -/* -@import "true_mobile_mode.css"; - -@import "single_tab_mode.css"; -*/ -@import "single_tab_mode_with_space_for_1_item.css"; -/* -@import "single_tab_mode_with_space_for_2_items.css"; -*/ -@import "hide_newtab_+_new-tab_buttons.css"; - -@import "numbered_tabs.css"; - -@import "tab_counter.css"; -/* -@import "hide_tab_counter.css"; - -@import "new-tab-button.css"; - -@import "tabs_larger_min-width.css"; - -@import "tabs_fill_available_width.css"; -*/ -@import "glow.css"; - -@import "colorful_inactive_tabs.css"; - -@import "tab_animated_active_border.css"; - -@import "borderless_transparent_active_tab.css"; diff --git a/src/userChrome/userChrome-mobile.css b/src/userChrome/userChrome-mobile.css index b6de437..e73dd76 100644 --- a/src/userChrome/userChrome-mobile.css +++ b/src/userChrome/userChrome-mobile.css @@ -8,10 +8,12 @@ */ /* -@import "color_variable_template.css"; +@import "fenix_colors.css"; -@import "colors.css"; +@import "true_mobile_landscape-alt.css"; */ +@import "true_mobile_landscape.css"; + @import "appMenu.css"; @import "browser.css"; @@ -28,8 +30,10 @@ @import "urlbar.css"; -@import "alt-browser.css"; - +@import "extensions_menu.css"; +/* +@import "alt-browser-alt.css"; +*/ @import "custom_rules.css"; @import "hide_tabs_scrollbuttons.css"; @@ -40,28 +44,16 @@ @import "round_ui_items.css"; /* -@import "true_mobile_mode.css"; +@import "single_tab_mode-alt.css"; +@import "alt-single_tab_mode-alt.css"; +*/ @import "single_tab_mode.css"; -*/ -@import "single_tab_mode_with_space_for_1_item.css"; -/* -@import "single_tab_mode_with_space_for_2_items.css"; -*/ -@import "hide_newtab_+_new-tab_buttons.css"; @import "numbered_tabs.css"; @import "tab_counter.css"; /* -@import "hide_tab_counter.css"; - -@import "new-tab-button.css"; - -@import "tabs_larger_min-width.css"; - -@import "tabs_fill_available_width.css"; - @import "glow.css"; @import "colorful_inactive_tabs.css"; diff --git a/src/userChrome/userChrome-true-mobile+color+glow.css b/src/userChrome/userChrome-true-mobile+color+glow.css deleted file mode 100644 index 679d0ac..0000000 --- a/src/userChrome/userChrome-true-mobile+color+glow.css +++ /dev/null @@ -1,72 +0,0 @@ -/* Copyright 2023 user0 - * SPDX-License-Identifier: MPL-2.0 */ - -/* Source files available here: - https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip - https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/ - https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313 -*/ - - -@import "color_variable_template.css"; - -@import "colors.css"; - -@import "appMenu.css"; - -@import "browser.css"; - -@import "editBookmarkPanel.css"; - -@import "findbar.css"; - -@import "popups.css"; - -@import "root.css"; - -@import "tabmenu.css"; - -@import "urlbar.css"; - -@import "alt-browser.css"; - -@import "custom_rules.css"; - -@import "hide_tabs_scrollbuttons.css"; - -@import "tab_close_button_always_on_hover.css"; - -@import "iconized_main_menu.css"; - -@import "round_ui_items.css"; - -@import "true_mobile_mode.css"; -/* -@import "single_tab_mode.css"; - -@import "single_tab_mode_with_space_for_1_item.css"; - -@import "single_tab_mode_with_space_for_2_items.css"; - -@import "hide_newtab_+_new-tab_buttons.css"; - -@import "numbered_tabs.css"; -*/ -@import "tab_counter.css"; -/* -@import "hide_tab_counter.css"; - -@import "new-tab-button.css"; - -@import "tabs_larger_min-width.css"; - -@import "tabs_fill_available_width.css"; -*/ -@import "glow.css"; -/* -@import "colorful_inactive_tabs.css"; - -@import "tab_animated_active_border.css"; - -@import "borderless_transparent_active_tab.css"; -*/ diff --git a/src/userChrome/userChrome-true-mobile+color.css b/src/userChrome/userChrome-true-mobile+color.css deleted file mode 100644 index 959ba2e..0000000 --- a/src/userChrome/userChrome-true-mobile+color.css +++ /dev/null @@ -1,72 +0,0 @@ -/* Copyright 2023 user0 - * SPDX-License-Identifier: MPL-2.0 */ - -/* Source files available here: - https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip - https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/ - https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313 -*/ - - -@import "color_variable_template.css"; - -@import "colors.css"; - -@import "appMenu.css"; - -@import "browser.css"; - -@import "editBookmarkPanel.css"; - -@import "findbar.css"; - -@import "popups.css"; - -@import "root.css"; - -@import "tabmenu.css"; - -@import "urlbar.css"; - -@import "alt-browser.css"; - -@import "custom_rules.css"; - -@import "hide_tabs_scrollbuttons.css"; - -@import "tab_close_button_always_on_hover.css"; - -@import "iconized_main_menu.css"; - -@import "round_ui_items.css"; - -@import "true_mobile_mode.css"; -/* -@import "single_tab_mode.css"; - -@import "single_tab_mode_with_space_for_1_item.css"; - -@import "single_tab_mode_with_space_for_2_items.css"; - -@import "hide_newtab_+_new-tab_buttons.css"; - -@import "numbered_tabs.css"; -*/ -@import "tab_counter.css"; -/* -@import "hide_tab_counter.css"; - -@import "new-tab-button.css"; - -@import "tabs_larger_min-width.css"; - -@import "tabs_fill_available_width.css"; - -@import "glow.css"; - -@import "colorful_inactive_tabs.css"; - -@import "tab_animated_active_border.css"; - -@import "borderless_transparent_active_tab.css"; -*/ diff --git a/src/userChrome/userChrome-true-mobile.css b/src/userChrome/userChrome-true-mobile.css index 3628e4c..4060f28 100644 --- a/src/userChrome/userChrome-true-mobile.css +++ b/src/userChrome/userChrome-true-mobile.css @@ -8,14 +8,16 @@ */ /* -@import "color_variable_template.css"; +@import "fenix_colors.css"; -@import "colors.css"; +@import "true_mobile_landscape-alt.css"; */ +@import "true_mobile_landscape.css"; + @import "appMenu.css"; - +/* @import "browser.css"; - +*/ @import "editBookmarkPanel.css"; @import "findbar.css"; @@ -28,45 +30,31 @@ @import "urlbar.css"; -@import "alt-browser.css"; +@import "extensions_menu.css"; + +@import "alt-browser-alt.css"; @import "custom_rules.css"; -@import "hide_tabs_scrollbuttons.css"; - -@import "tab_close_button_always_on_hover.css"; - @import "iconized_main_menu.css"; @import "round_ui_items.css"; -@import "true_mobile_mode.css"; -/* -@import "single_tab_mode.css"; - -@import "single_tab_mode_with_space_for_1_item.css"; - -@import "single_tab_mode_with_space_for_2_items.css"; - -@import "hide_newtab_+_new-tab_buttons.css"; - @import "numbered_tabs.css"; -*/ + @import "tab_counter.css"; /* -@import "hide_tab_counter.css"; - -@import "new-tab-button.css"; - -@import "tabs_larger_min-width.css"; - -@import "tabs_fill_available_width.css"; - -@import "glow.css"; - -@import "colorful_inactive_tabs.css"; - -@import "tab_animated_active_border.css"; - -@import "borderless_transparent_active_tab.css"; +@import "true_mobile_mode-alt.css"; +*/ +@import "true_mobile_mode.css"; +/* +@import "dynamic_popups.css"; + +@import "dynamic_popups_plus.css"; + +@import "dynamic_popups_max.css"; +*/ +@import "dynamic_popups_pro.css"; +/* +@import "dynamic_popups_pro_max.css"; */ diff --git a/src/userContent/theme-color-1.css b/src/userContent/theme-color-1.css deleted file mode 100644 index 82ad9f8..0000000 --- a/src/userContent/theme-color-1.css +++ /dev/null @@ -1,98 +0,0 @@ -/* Copyright 2023 user0 - * SPDX-License-Identifier: MPL-2.0 */ - -@-moz-document url("about:addons"), -url("about:blank"), -url("about:config"), -url("about:home"), -url("about:newtab"), -url("about:preferences"), -url("about:privatebrowsing"), -url("about:profiles") { - :root { - --card-outline-color: #dc8add !important; - --card-shadow: var(--shadow-10); - --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color); - --checkbox-border-color: var(--in-content-box-border-color); - --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active); - --checkbox-checked-bgcolor: var(--in-content-primary-button-background); - --checkbox-checked-border-color: transparent; - --checkbox-checked-color: var(--in-content-primary-button-text-color); - --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover); - --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active); - --checkbox-unchecked-bgcolor: var(--in-content-button-background); - --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover); - --dialog-warning-text-color: #dc8add !important; - --in-content-accent-color: #dc8add !important; - --in-content-accent-color-active: #dc8add !important; - --in-content-border-color: #dc8add !important; - --in-content-border-active: #dc8add !important; - --in-content-border-active-shadow: #dc8add !important; - --in-content-border-hover: #dc8add !important; - --in-content-border-invalid: #dc8add !important; - --in-content-box-background: black !important; - --in-content-box-background-active: rgba(220,138,221,0.6) !important; - --in-content-box-background-hover: rgba(220,138,221,0.4) !important; - --in-content-box-background-odd: black !important; - --in-content-box-border-color: #dc8add !important; - --in-content-box-info-background: black !important; - --in-content-button-background: rgba(220,138,221,0.5) !important; - --in-content-button-background-active: rgba(220,138,221,0.4) !important; - --in-content-button-background-hover: rgba(220,138,221,0.6) !important; - --in-content-button-border-color: #dc8add !important; - --in-content-button-border-color-active: #dc8add !important; - --in-content-button-border-color-hover: #dc8add !important; - --in-content-button-text-color: #dc8add !important; - --in-content-button-text-color-active: #dc8add !important; - --in-content-button-text-color-hover: white !important; - --in-content-category-background: rgba(220,138,221,0.5) !important; - --in-content-category-background-hover: rgba(220,138,221,0.5) !important; - --in-content-category-background-selected: rgba(220,138,221,0.4) !important; - --in-content-category-background-selected-hover: rgba(220,138,221,0.5) !important; - --in-content-category-text: #dc8add !important; - --in-content-category-text-selected: #dc8add !important; - --in-content-danger-button-background: #dc8add !important; - --in-content-danger-button-background-active: #dc8add !important; - --in-content-danger-button-background-hover: #dc8add !important; - --in-content-deemphasized-text: #dc8add !important; - --in-content-error-text-color: #dc8add !important; - --in-content-focus-outline-color: #dc8add !important; - --in-content-icon-color: #dc8add !important; - --in-content-item-hover: #dc8add !important; - --in-content-item-hover-text: white !important; - --in-content-item-selected: #dc8add !important; - --in-content-item-selected-text: white !important; - --in-content-link-color: #dc8add !important; - --in-content-link-color-active: #dc8add !important; - --in-content-link-color-hover: #dc8add !important; - --in-content-link-color-visited: #dc8add !important; - --in-content-page-background: black !important; - --in-content-page-color: #dc8add !important; - --in-content-primary-button-background: rgba(220,138,221,0.666) !important; - --in-content-primary-button-background-active: rgba(220,138,221,0.666) !important; - --in-content-primary-button-background-hover: black !important; - --in-content-primary-button-border-color: #dc8add !important; - --in-content-primary-button-border-hover: #dc8add !important; - --in-content-primary-button-text-color: white !important; - --in-content-primary-button-text-color-hover: white !important; - --in-content-selected-text: #dc8add !important; - --in-content-table-background: black !important; - --in-content-table-border-color: #dc8add !important; - --in-content-table-border-dark-color: #dc8add !important; - --in-content-table-header-background: rgba(220,138,221,0.5) !important; - --in-content-table-header-color: #dc8add !important; - --in-content-text-color: #dc8add !important; - --in-content-warning-container: rgba(220,138,221,0.3) !important; - --shadow-10: 0 1px 4px #dc8add !important; - --shadow-30: 0 4px 16px #dc8add !important; - color: #dc8add !important; - } - ::selection { - background: #dc8add !important; - color: white !important; - } - #prefs>tr:hover { - background-color: rgba(220,138,221,0.6) !important; - color: #dc8add !important; - } -} diff --git a/src/userContent/theme-color-2.css b/src/userContent/theme-color-2.css deleted file mode 100644 index 54db2d6..0000000 --- a/src/userContent/theme-color-2.css +++ /dev/null @@ -1,98 +0,0 @@ -/* Copyright 2023 user0 - * SPDX-License-Identifier: MPL-2.0 */ - -@-moz-document url("about:addons"), -url("about:blank"), -url("about:config"), -url("about:home"), -url("about:newtab"), -url("about:preferences"), -url("about:privatebrowsing"), -url("about:profiles") { - :root { - --card-outline-color: #dc8add !important; - --card-shadow: var(--shadow-10); - --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color); - --checkbox-border-color: var(--in-content-box-border-color); - --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active); - --checkbox-checked-bgcolor: var(--in-content-primary-button-background); - --checkbox-checked-border-color: var(--in-content-box-border-color); - --checkbox-checked-color: var(--in-content-primary-button-text-color); - --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover); - --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active); - --checkbox-unchecked-bgcolor: var(--in-content-button-background); - --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover); - --dialog-warning-text-color: #dc8add !important; - --in-content-accent-color: #dc8add !important; - --in-content-accent-color-active: white !important; - --in-content-border-color: #dc8add !important; - --in-content-border-active: #dc8add !important; - --in-content-border-active-shadow: #dc8add !important; - --in-content-border-hover: #dc8add !important; - --in-content-border-invalid: #dc8add !important; - --in-content-box-background: black !important; - --in-content-box-background-active: #dc8add !important; - --in-content-box-background-hover: #dc8add !important; - --in-content-box-background-odd: black !important; - --in-content-box-border-color: #dc8add !important; - --in-content-box-info-background: black !important; - --in-content-button-background: black !important; - --in-content-button-background-active: #dc8add !important; - --in-content-button-background-hover: #dc8add !important; - --in-content-button-border-color: #dc8add !important; - --in-content-button-border-color-active: #dc8add !important; - --in-content-button-border-color-hover: #dc8add !important; - --in-content-button-text-color: #dc8add !important; - --in-content-button-text-color-active: white !important; - --in-content-button-text-color-hover: white !important; - --in-content-category-background: black !important; - --in-content-category-background-hover: #dc8add !important; - --in-content-category-background-selected: #dc8add !important; - --in-content-category-background-selected-hover: #dc8add !important; - --in-content-category-text: white !important; - --in-content-category-text-selected: white !important; - --in-content-danger-button-background: #dc8add !important; - --in-content-danger-button-background-active: #dc8add !important; - --in-content-danger-button-background-hover: #dc8add !important; - --in-content-deemphasized-text: #dc8add !important; - --in-content-error-text-color: #dc8add !important; - --in-content-focus-outline-color: #dc8add !important; - --in-content-icon-color: #dc8add !important; - --in-content-item-hover: #dc8add !important; - --in-content-item-hover-text: white !important; - --in-content-item-selected: #dc8add !important; - --in-content-item-selected-text: white !important; - --in-content-link-color: #dc8add !important; - --in-content-link-color-active: #dc8add !important; - --in-content-link-color-hover: #dc8add !important; - --in-content-link-color-visited: #dc8add !important; - --in-content-page-background: black !important; - --in-content-page-color: #dc8add !important; - --in-content-primary-button-background: #dc8add !important; - --in-content-primary-button-background-active: #dc8add !important; - --in-content-primary-button-background-hover: black !important; - --in-content-primary-button-border-color: #dc8add !important; - --in-content-primary-button-border-hover: #dc8add !important; - --in-content-primary-button-text-color: white !important; - --in-content-primary-button-text-color-hover: white !important; - --in-content-selected-text: white !important; - --in-content-table-background: black !important; - --in-content-table-border-color: #dc8add !important; - --in-content-table-border-dark-color: #dc8add !important; - --in-content-table-header-background: black !important; - --in-content-table-header-color: #dc8add !important; - --in-content-text-color: #dc8add !important; - --in-content-warning-container: black !important; - --shadow-10: 0 1px 4px #dc8add !important; - --shadow-30: 0 4px 16px #dc8add !important; - color: #dc8add !important; - } - ::selection { - background: #dc8add !important; - color: white !important; - } - #prefs>tr:hover { - background-color: #dc8add !important; - color: white !important; - } -} diff --git a/src/userContent/theme-dark.css b/src/userContent/theme-dark.css deleted file mode 100644 index a92b630..0000000 --- a/src/userContent/theme-dark.css +++ /dev/null @@ -1,131 +0,0 @@ -/* Copyright 2023 user0 - * SPDX-License-Identifier: MPL-2.0 */ - -@-moz-document url("about:addons"), -url("about:blank"), -url("about:config"), -url("about:home"), -url("about:newtab"), -url("about:preferences"), -url("about:privatebrowsing"), -url("about:profiles") { - body { - background-color:black!important - } - a,a:visited,a:hover { - color:black!important - } - #categories > .category[selected], - #categories > .category.selected { - color: white !important; - } - checkbox:not([disabled="true"]):hover > .checkbox-check, - input[type="checkbox"]:not(:disabled):hover { - border-color: white !important; - } - radio:not([disabled="true"]):hover > .radio-check { - border-color: white !important; - } - .text-link { - color: white !important; - } - .content-blocking-category.selected { - border: 1px solid white !important; - background-color: rgba(255,255,255,0.4) !important; - } - .content-blocking-category { - border: 1px solid var(--in-content-border-color) !important; - background-color: rgba(255,255,255,0.2) !important; /* bkg of default unselected*/ - } - .content-blocking-warning { - background-color: rgba(255,255,255,0.3) !important; - } - .checkbox-check{ - fill: white !important; - } - .radio-check{ - fill: white !important; - } - .addon-card:not([expanded]) > .addon.card:hover { - box-shadow: white !important; - } - .card { - border: 1px solid white !important; - } - :root { - --card-outline-color: white !important; - --in-content-border-color: white !important; - --in-content-border-active: white !important; - --in-content-border-active-shadow: white !important; - --in-content-border-hover: white !important; - --in-content-box-background: black !important; - --in-content-box-background-active: rgba(255,255,255,0.6) !important; - --in-content-box-background-hover: rgba(255,255,255,0.4) !important; - --in-content-box-border-color: white !important; - --in-content-box-info-background: black !important; - --in-content-button-background: rgba(255,255,255,0.5) !important; - --in-content-button-background-active: rgba(255,255,255,0.4) !important; - --in-content-button-background-hover: rgba(255,255,255,0.6) !important; - --in-content-category-background: rgba(255,255,255,0.5) !important; - --in-content-category-background-hover: rgba(255,255,255,0.5) !important; - --in-content-category-background-selected: rgba(255,255,255,0.4) !important; - --in-content-category-background-selected-hover: rgba(255,255,255,0.5) !important; - --in-content-category-text: white !important; - --in-content-category-text-selected: white !important; - --in-content-page-background: black !important; - --in-content-selected-text: white !important; - --in-content-table-background: black !important; - --in-content-table-border-dark-color: white !important; - --in-content-table-header-background: rgba(255,255,255,0.5) !important; - --in-content-text-color: white !important; - --in-content-warning-container: rgba(255,255,255,0.3) !important; - --shadow-10: 0 1px 4px white !important; - --shadow-30: 0 4px 16px white !important; - color: white !important; - } -} -:root { - --card-outline-color: white !important; - --in-content-box-background: black !important; - --in-content-page-background: black !important; - --in-content-text-color: white !important; - --shadow-10: 0 1px 4px white !important; - --shadow-30: 0 4px 16px white !important; - color: white !important; -} -.card { - border: 1px solid white !important; -} -#learnMoreLink { - color: white !important; -} -#errorCode { - color: white !important; -} -#viewCertificate { - color: white !important; -} -#advancedButton { - color: white !important; - background-color: rgba(0,62,170,1) !important; -} -#advancedButton:hover { - color: white !important; - background-color: rgba(0,62,170,0.7) !important; -} -#advancedButton:active { - color: white !important; - background-color: rgba(0,62,170,0.5) !important; -} -#exceptionDialogButton { - color: white !important; - background-color: rgba(0,62,170,1) !important; -} -#exceptionDialogButton:hover { - color: white !important; - background-color: rgba(0,62,170,0.7) !important; -} -#exceptionDialogButton:active { - color: white !important; - background-color: rgba(0,62,170,0.5) !important; -} diff --git a/src/userContent/theme-fenix.css b/src/userContent/theme-fenix.css new file mode 100644 index 0000000..83e5f63 --- /dev/null +++ b/src/userContent/theme-fenix.css @@ -0,0 +1,518 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +@-moz-document +regexp("^(about:).*") { + + /* Fenix Colors */ + :root { + --addon-card-background: rgba(171,113,255,0.1) !important; + --brand-color-accent: rgb(80,54,132) !important; + --brand-color-accent-active: rgb(80,54,132) !important; + --brand-color-accent-hover: rgb(80,54,132) !important; + --color-canvas: rgb(167,111,250) !important; + --card-outline-color: rgb(171,113,255) !important; + --card-shadow: var(--shadow-10) !important; + --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color) !important; + --checkbox-border-color: white !important; + --checkbox-checked-active-bgcolor: var(--in-content-box-background-active) !important; + --checkbox-checked-bgcolor: var(--in-content-box-border-color) !important; + --checkbox-checked-border-color: var(--in-content-box-border-color) !important; + --checkbox-checked-color: var(--in-content-box-text-color) !important; + --checkbox-checked-hover-bgcolor: var(--in-content-box-background-hover) !important; + --checkbox-unchecked-active-bgcolor: var(--in-content-box-background-active) !important; + --checkbox-unchecked-bgcolor: var(--in-content-box-background) !important; + --checkbox-unchecked-hover-bgcolor: var(--in-content-box-background-hover) !important; + --dialog-warning-text-color: white !important; + --in-content-accent-color: rgb(171,113,255) !important; + --in-content-accent-color-active: rgb(203,158,255) !important; + --in-content-border-color: rgb(171,113,255) !important; + --in-content-border-active: rgb(203,158,255) !important; + --in-content-border-active-shadow: rgb(203,158,255) !important; + --in-content-border-hover: rgb(203,158,255) !important; + --in-content-border-invalid: rgb(171,113,255) !important; + --in-content-box-background: rgb(41,29,79) !important; + --in-content-box-background-active: rgb(203,158,255) !important; + --in-content-box-background-hover: rgb(203,158,255) !important; + --in-content-box-background-odd: var(--in-content-box-info-background) !important; + --in-content-box-border-color: rgb(171,113,255) !important; + --in-content-box-text-color: white !important; + --in-content-box-info-background: rgba(171,113,255,0.2) !important; + --in-content-button-background: rgb(171,113,255) !important; + --in-content-button-background-active: rgb(203,158,255) !important; + --in-content-button-background-hover: rgb(203,158,255) !important; + --in-content-button-border-color: rgb(171,113,255) !important; + --in-content-button-border-color-active: rgb(203,158,255) !important; + --in-content-button-border-color-hover: rgb(203,158,255) !important; + --in-content-button-text-color: white !important; + --in-content-button-text-color-active: white !important; + --in-content-button-text-color-hover: white !important; + --in-content-category-background: rgb(41,29,79) !important; + --in-content-category-background-hover: rgb(171,113,255) !important; + --in-content-category-background-selected: rgb(171,113,255) !important; + --in-content-category-background-selected-hover: rgb(171,113,255) !important; + --in-content-category-text: white !important; + --in-content-category-text-selected: white !important; + --in-content-danger-button-background: darkred !important; + --in-content-danger-button-background-active: red !important; + --in-content-danger-button-background-hover: red !important; + --in-content-deemphasized-text: lightgray !important; + --in-content-error-text-color: white !important; + --in-content-focus-outline-color: rgb(171,113,255) !important; + --in-content-icon-color: white !important; + --in-content-item-hover: rgb(203,158,255) !important; + --in-content-item-hover-text: white !important; + --in-content-item-selected: rgb(203,158,255) !important; + --in-content-item-selected-text: white !important; + --in-content-link-color: rgb(171,113,255) !important; + --in-content-link-color-active: rgb(203,158,255) !important; + --in-content-link-color-hover: rgb(203,158,255) !important; + --in-content-link-color-visited: rgb(171,113,255) !important; + --in-content-page-background: rgb(41,29,79) !important; + --in-content-page-color: rgb(171,113,255) !important; + --in-content-primary-button-background: rgb(171,113,255) !important; + --in-content-primary-button-background-active: rgb(203,158,255) !important; + --in-content-primary-button-background-hover: rgb(203,158,255) !important; + --in-content-primary-button-border-color: rgb(171,113,255) !important; + --in-content-primary-button-border-hover: rgb(203,158,255) !important; + --in-content-primary-button-text-color: white !important; + --in-content-primary-button-text-color-hover: white !important; + --in-content-selected-text: white !important; + --in-content-table-background: rgb(41,29,79) !important; + --in-content-table-border-color: rgb(171,113,255) !important; + --in-content-table-border-dark-color: rgb(144,89,255) !important; + --in-content-table-header-background: rgb(41,29,79) !important; + --in-content-table-header-color: white !important; + --in-content-text-color: white !important; + --in-content-warning-container: darkorange !important; + --shadow-10: 0 1px 4px black !important; + --shadow-30: 0 4px 16px black !important; + color: white !important; + } + ::selection { + background: rgb(171,113,255) !important; + color: white !important; + } + + /* About:Addons */ + #categories > .category[selected], #categories > .category.selected { + background-color: var(--in-content-button-background) !important; + color: var(--in-content-button-text-color) !important; + } + .addon.card { + background-color: var(--addon-card-background) !important; + } + .radio-container-with-text > input { + border: 2px solid !important; + background-color: var(--in-content-page-background) !important; + color: var(--in-content-page-color) !important; + } + .radio-container-with-text > input:hover { + background-color: var(--in-content-button-background-hover) !important; + } + .radio-container-with-text > input:active { + background-color: var(--in-content-button-background-active) !important; + } + + /* About:Preferences */ + .radio-check { + border: 2px solid !important; + border-color: white !important; + background-color: var(--in-content-page-background) !important; + } + .radio-check[selected] { + border-color: var(--in-content-page-color) !important; + color: var(--in-content-page-color) !important; + } + .web-appearance-choice-image-container { + background-color: var(--in-content-page-background) !important; + } + .web-appearance-choice-image-container:hover { + background-color: var(--in-content-button-background-hover) !important; + } + .web-appearance-choice-image-container:active { + background-color: var(--in-content-button-background-active) !important; + } + .web-appearance-choice input { + background-color: var(--in-content-page-background) !important; + border: 2px solid !important; + border-color: var(--in-content-page-color) !important; + color: var(--in-content-page-color) !important; + } + .web-appearance-choice input:hover { + background-color: var(--in-content-button-background-hover) !important; + } + .web-appearance-choice input:active { + background-color: var(--in-content-button-background-active) !important; + } + label.web-appearance-choice:nth-child(1) > div:nth-child(2) > span:nth-child(2) { + display: none !important; + } + label.web-appearance-choice:nth-child(1) > div:nth-child(2)::after { + content: "Auto" !important; + } + +} + +@-moz-document +regexp("^(?!about:).*") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* Table font size (prevents horizontal scroll on web pages) */ + tr { + font-size: 13px; + } + + } + +} + +@-moz-document +url("about:addons"), +url-prefix("about:addons") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* Page width */ + :root { + --in-content-sidebar-width: 50px !important; + --sidebar-width: 50px !important; + } + body { + min-width: 100vw !important; + max-width:100vw !important; + width: 100vw !important; + } + + /* About:Addons */ + .search-label, + .textbox-search-icons { + display: none !important; + } + input::placeholder { + color: white !important; + opacity: 100% !important; + } + search-addons > search-textbox { + background-color: var(--in-content-button-background) !important; + color: var(--in-content-button-text-color) !important; + position: fixed !important; + top: 0 !important; + left: 0 !important; + padding: 0 !important; + width: 49px !important; + } + search-addons > search-textbox:hover { + background-color: var(--in-content-button-background-hover) !important; + } + search-addons > search-textbox:active { + background-color: var(--in-content-button-background-active) !important; + } + search-addons > search-textbox[focused] { + background-color: var(--in-content-page-background) !important; + border: 2px solid var(--card-outline-color) !important; + width: 100vw !important; + z-index: 2 !important; + } + .main-search { + padding-top: 18px !important; + padding-bottom: 18px !important; + } + .main-heading { + position: fixed !important; + top: 0 !important; + padding: 0 !important; + } + .page-options-menu { + position: fixed !important; + top: 0 !important; + right: 0 !important; + } + #categories > .category { + margin-left: 0px !important; + } + .sidebar-footer-list { + margin-inline-start: 0 !important; + } + .list-section-heading { + margin-top: 0 !important; + } + .addon-description { + padding-right: 40px !important; + } + .addon-badge-recommended { + margin-right: 10px !important; + } + .more-options-button { + margin-inline-start: -6px !important; + min-width: 36px !important; + } + .toggle-button { + margin-right: -60px !important; + margin-bottom: -60px !important; + height: 12px !important; + width: 24px !important; + } + .toggle-button:before { + margin-top: -4px !important; + margin-left: -6px !important; + height: 18px !important; + width: 18px !important; + } + + } + + /* Apply this customization only on smaller screens in portrait mode */ + @media (max-width: 700px) { + + /* Reduce addon cards width and font to fit display without horizontal scrolling */ + .card { + max-width: 250px !important; + font-size: 8pt !important; + } + + } + +} + +@-moz-document +url("about:config") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* About:Config */ + #search-container, + #toolbar, + #prefs { + min-width: calc(100vw - 20px) !important; + } + #toolbar { + flex-direction: column; + } + #prefs { + word-wrap: anywhere; + } + .checkbox-container { + margin-top: 6px; + padding-bottom: 3px; + } + tr { + font-size: 12px; + } + th { + padding-left: 8px !important; + } + + } + +} + +@-moz-document +url("about:license") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* About:License */ + .license-header { + background-image: none !important; + padding-inline-end: unset !important; + } + #lic-info > pre { + font-size: 4pt !important; + } + + } + +} + +@-moz-document +url("about:policies"), +url-prefix("about:policies") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* Page width */ + :root { + --in-content-sidebar-width: 50px !important; + --sidebar-width: 50px !important; + } + + /* About:Policies */ + #categories > .category { + margin-left: 0px !important; + } + td { + font-size: 9px; + padding-left: 5px !important; + padding-right: 5px !important; + word-wrap: anywhere; + } + + } + +} + +@-moz-document +regexp("about:preferences.*") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* Page width */ + :root { + --in-content-sidebar-width: 50px !important; + --sidebar-width: 50px !important; + } + + /* About:Preferences */ + #searchInput { + display: none !important; + } + .pane-container { + margin-inline-start: 10px !important; + margin-inline-end: 10px !important; + width: calc(100vw - 70px) !important; + min-width: calc(100vw - 70px) !important; + } + #category-general, + #category-home, + #category-search, + #category-privacy, + #category-more-from-mozilla { + width: 48px !important; + } + #categories > .category { + margin-left: 0px !important; + } + .sidebar-footer-list { + margin-inline-start: 0 !important; + } + .accessory-button { + min-width: 100px !important; + } + #defaultFont, + #advancedFonts { + max-width: 100px !important; + width: 100px !important; + } + #defaultFontSizeLabel { + margin-left: -196px !important; + } + #defaultFontSizeLabel, + #defaultFontSize { + margin-bottom: -80px !important; + } + #primaryBrowserLocale { + min-width: 20px !important; + } + + /* About:Preferences#Privacy */ + #contentBlockingHeader { + padding-left: 28px !important; + } + #trackingProtectionShield { + margin-inline-end: 0 !important; + margin-top: -34px !important; + max-height: 20px !important; + max-width: 20px !important; + height: 20px !important; + width: 20px !important; + } + #contentBlockingDescription { + font-size: 9pt !important; + } + #trackingProtectionExceptions { + padding-left: 0 !important; + padding-right: 0 !important; + max-width: 30px !important; + width: 30px !important; + } + #historyMode { + max-width: 235.5px !important; + width: 235.5px !important; + } + + /* About:Preferences#MoreFromMozilla */ + .simple .qr-code-box-title { + max-width: 235px !important; + width: 235px !important; + } + + } + +} + +@-moz-document +url("about:protections") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* About:Protections */ + #report-content { + margin: 0 !important; + padding: 50px !important; + max-width: 100vw !important; + width: 100vw !important; + } + #mobile-hanger { + display: none !important; + } + .body-wrapper { + grid-column-start: 1 !important; + grid-column-end: -1 !important; + } + #manage-protections, + #sign-up-for-monitor-link, + #save-passwords-button, + #get-proxy-extension-link { + grid-area: 2 / 1 / 2 / 6 !important; + } + .card-header .wrapper { + grid-row-gap: 8px !important; + } + .card:not(.has-logins) .wrapper div:nth-child(1) { + grid-column-end: -1 !important; + } + + } + +} + +@-moz-document +url("about:rights") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* About:Rights */ + .rights-header { + background-image: none !important; + padding-inline-end: unset !important; + } + + } + +} diff --git a/src/userContent/theme-light.css b/src/userContent/theme-light.css deleted file mode 100644 index e7dc0f3..0000000 --- a/src/userContent/theme-light.css +++ /dev/null @@ -1,18 +0,0 @@ -/* Copyright 2023 user0 - * SPDX-License-Identifier: MPL-2.0 */ - -@-moz-document url("about:addons"), -url("about:blank"), -url("about:config"), -url("about:home"), -url("about:newtab"), -url("about:preferences"), -url("about:privatebrowsing"), -url("about:profiles") { - body { - background-color:rgb(249, 249, 255)!important - } - a,a:visited,a:hover { - color:rgb(249, 249, 255)!important - } -} diff --git a/src/userContent/theme-non-colorized.css b/src/userContent/theme-non-colorized.css new file mode 100644 index 0000000..2a4fed5 --- /dev/null +++ b/src/userContent/theme-non-colorized.css @@ -0,0 +1,371 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +@-moz-document +regexp("^(?!about:).*") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* Table font size (prevents horizontal scroll on web pages) */ + tr { + font-size: 13px; + } + + } + +} + +@-moz-document +url("about:addons"), +url-prefix("about:addons") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* Page width */ + :root { + --in-content-sidebar-width: 50px !important; + --sidebar-width: 50px !important; + } + body { + min-width: 100vw !important; + max-width:100vw !important; + width: 100vw !important; + } + + /* About:Addons */ + .search-label, + .textbox-search-icons { + display: none !important; + } + input::placeholder { + color: white !important; + opacity: 100% !important; + } + search-addons > search-textbox { + background-color: var(--in-content-button-background) !important; + color: var(--in-content-button-text-color) !important; + position: fixed !important; + top: 0 !important; + left: 0 !important; + padding: 0 !important; + width: 49px !important; + } + search-addons > search-textbox:hover { + background-color: var(--in-content-button-background-hover) !important; + } + search-addons > search-textbox:active { + background-color: var(--in-content-button-background-active) !important; + } + search-addons > search-textbox[focused] { + background-color: var(--in-content-page-background) !important; + border: 2px solid var(--card-outline-color) !important; + width: 100vw !important; + z-index: 2 !important; + } + .main-search { + padding-top: 18px !important; + padding-bottom: 18px !important; + } + .main-heading { + position: fixed !important; + top: 0 !important; + padding: 0 !important; + } + .page-options-menu { + position: fixed !important; + top: 0 !important; + right: 0 !important; + } + #categories > .category { + margin-left: 0px !important; + } + .sidebar-footer-list { + margin-inline-start: 0 !important; + } + .list-section-heading { + margin-top: 0 !important; + } + .addon-description { + padding-right: 40px !important; + } + .addon-badge-recommended { + margin-right: 10px !important; + } + .more-options-button { + margin-inline-start: -6px !important; + min-width: 36px !important; + } + .toggle-button { + margin-right: -60px !important; + margin-bottom: -60px !important; + height: 12px !important; + width: 24px !important; + } + .toggle-button:before { + margin-top: -4px !important; + margin-left: -6px !important; + height: 18px !important; + width: 18px !important; + } + + } + + /* Apply this customization only on smaller screens in portrait mode */ + @media (max-width: 700px) { + + /* Reduce addon cards width and font to fit display without horizontal scrolling */ + .card { + max-width: 250px !important; + font-size: 8pt !important; + } + + } + +} + +@-moz-document +url("about:config") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* About:Config */ + #search-container, + #toolbar, + #prefs { + min-width: calc(100vw - 20px) !important; + } + #toolbar { + flex-direction: column; + } + #prefs { + word-wrap: anywhere; + } + .checkbox-container { + margin-top: 6px; + padding-bottom: 3px; + } + tr { + font-size: 12px; + } + th { + padding-left: 8px !important; + } + + } + +} + +@-moz-document +url("about:license") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* About:License */ + .license-header { + background-image: none !important; + padding-inline-end: unset !important; + } + #lic-info > pre { + font-size: 4pt !important; + } + + } + +} + +@-moz-document +url("about:policies"), +url-prefix("about:policies") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* Page width */ + :root { + --in-content-sidebar-width: 50px !important; + --sidebar-width: 50px !important; + } + + /* About:Policies */ + #categories > .category { + margin-left: 0px !important; + } + td { + font-size: 9px; + padding-left: 5px !important; + padding-right: 5px !important; + word-wrap: anywhere; + } + + } + +} + +@-moz-document +regexp("about:preferences.*") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* Page width */ + :root { + --in-content-sidebar-width: 50px !important; + --sidebar-width: 50px !important; + } + + /* About:Preferences */ + #searchInput { + display: none !important; + } + .pane-container { + margin-inline-start: 10px !important; + margin-inline-end: 10px !important; + width: calc(100vw - 70px) !important; + min-width: calc(100vw - 70px) !important; + } + #category-general, + #category-home, + #category-search, + #category-privacy, + #category-more-from-mozilla { + width: 48px !important; + } + #categories > .category { + margin-left: 0px !important; + } + .sidebar-footer-list { + margin-inline-start: 0 !important; + } + label.web-appearance-choice:nth-child(1) > div:nth-child(2) > span:nth-child(2) { + display: none !important; + } + label.web-appearance-choice:nth-child(1) > div:nth-child(2)::after { + content: "Auto" !important; + } + .accessory-button { + min-width: 100px !important; + } + #defaultFont, + #advancedFonts { + max-width: 100px !important; + width: 100px !important; + } + #defaultFontSizeLabel { + margin-left: -196px !important; + } + #defaultFontSizeLabel, + #defaultFontSize { + margin-bottom: -80px !important; + } + #primaryBrowserLocale { + min-width: 20px !important; + } + + /* About:Preferences#Privacy */ + #contentBlockingHeader { + padding-left: 28px !important; + } + #trackingProtectionShield { + margin-inline-end: 0 !important; + margin-top: -34px !important; + max-height: 20px !important; + max-width: 20px !important; + height: 20px !important; + width: 20px !important; + } + #contentBlockingDescription { + font-size: 9pt !important; + } + #trackingProtectionExceptions { + padding-left: 0 !important; + padding-right: 0 !important; + max-width: 30px !important; + width: 30px !important; + } + #historyMode { + max-width: 235.5px !important; + width: 235.5px !important; + } + + /* About:Preferences#MoreFromMozilla */ + .simple .qr-code-box-title { + max-width: 235px !important; + width: 235px !important; + } + + } + +} + +@-moz-document +url("about:protections") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* About:Protections */ + #report-content { + margin: 0 !important; + padding: 50px !important; + max-width: 100vw !important; + width: 100vw !important; + } + #mobile-hanger { + display: none !important; + } + .body-wrapper { + grid-column-start: 1 !important; + grid-column-end: -1 !important; + } + #manage-protections, + #sign-up-for-monitor-link, + #save-passwords-button, + #get-proxy-extension-link { + grid-area: 2 / 1 / 2 / 6 !important; + } + .card-header .wrapper { + grid-row-gap: 8px !important; + } + .card:not(.has-logins) .wrapper div:nth-child(1) { + grid-column-end: -1 !important; + } + + } + +} + +@-moz-document +url("about:rights") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* About:Rights */ + .rights-header { + background-image: none !important; + padding-inline-end: unset !important; + } + + } + +}