Merge mobile-config-firefox
This commit is contained in:
commit
1ab8dad512
GPG key ID:
E2221D5FE4656B6A
53 changed files with 8114 additions and 205 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
/out
|
||||||
17
.gitlab-ci.yml
Normal file
17
.gitlab-ci.yml
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
image: alpine:latest
|
||||||
|
|
||||||
|
build:
|
||||||
|
before_script:
|
||||||
|
- apk -q add make
|
||||||
|
script:
|
||||||
|
- make
|
||||||
|
- make DESTDIR=mobile-config-firefox install
|
||||||
|
artifacts:
|
||||||
|
paths:
|
||||||
|
- mobile-config-firefox
|
||||||
|
|
||||||
|
lint:
|
||||||
|
before_script:
|
||||||
|
- apk -q add grep
|
||||||
|
script:
|
||||||
|
- .ci/lint.sh
|
||||||
37
src/mobile-config-prefs.js
Normal file
37
src/mobile-config-prefs.js
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
// Copyright 2022 Oliver Smith, Martijn Braam
|
||||||
|
// SPDX-License-Identifier: MPL-2.0
|
||||||
|
|
||||||
|
// Set up autoconfig (we use it to copy/update userChrome.css into profile dir)
|
||||||
|
pref('general.config.filename', "mobile-config-autoconfig.js");
|
||||||
|
pref('general.config.obscure_value', 0);
|
||||||
|
pref('general.config.sandbox_enabled', false);
|
||||||
|
|
||||||
|
// Enable android-style pinch-to-zoom
|
||||||
|
pref('dom.w3c.touch_events.enabled', true);
|
||||||
|
pref('apz.allow_zooming', true);
|
||||||
|
pref('apz.allow_double_tap_zooming', true);
|
||||||
|
|
||||||
|
// Enable legacy touch event APIs, as some websites use this to check for mobile compatibility
|
||||||
|
// and Firefox on Android behaves the same way
|
||||||
|
pref('dom.w3c_touch_events.legacy_apis.enabled', true);
|
||||||
|
|
||||||
|
// Save vertical space by hiding the titlebar
|
||||||
|
pref('browser.tabs.inTitlebar', 1);
|
||||||
|
|
||||||
|
// Disable search suggestions
|
||||||
|
pref('browser.search.suggest.enabled', false);
|
||||||
|
|
||||||
|
// Empty new tab page: faster, less distractions
|
||||||
|
pref('browser.newtabpage.enabled', false);
|
||||||
|
|
||||||
|
// Allow UI customizations with userChrome.css and userContent.css
|
||||||
|
pref('toolkit.legacyUserProfileCustomizations.stylesheets', true);
|
||||||
|
|
||||||
|
// Select the entire URL with one click
|
||||||
|
pref('browser.urlbar.clickSelectsAll', true);
|
||||||
|
|
||||||
|
// Disable cosmetic animations, save CPU
|
||||||
|
pref('toolkit.cosmeticAnimations.enabled', false);
|
||||||
|
|
||||||
|
// Disable download animations, save CPU
|
||||||
|
pref('browser.download.animateNotifications', false);
|
||||||
144
src/policies.json
Normal file
144
src/policies.json
Normal file
|
|
@ -0,0 +1,144 @@
|
||||||
|
{
|
||||||
|
"policies": {
|
||||||
|
"DisableFirefoxScreenshots": true,
|
||||||
|
"DisableFirefoxStudies": true,
|
||||||
|
"DisableTelemetry": true,
|
||||||
|
"DisablePocket": true,
|
||||||
|
"NoDefaultBookmarks": true,
|
||||||
|
"OverrideFirstRunPage": "",
|
||||||
|
"OverridePostUpdatePage": "",
|
||||||
|
|
||||||
|
"Homepage": {
|
||||||
|
"URL": "about:home",
|
||||||
|
"Locked": false,
|
||||||
|
"StartPage": "homepage"
|
||||||
|
},
|
||||||
|
|
||||||
|
"FirefoxHome": {
|
||||||
|
"Search": true,
|
||||||
|
"TopSites": false,
|
||||||
|
"Highlights": false,
|
||||||
|
"Pocket": false,
|
||||||
|
"Snippets": false,
|
||||||
|
"Locked": false
|
||||||
|
},
|
||||||
|
|
||||||
|
"SearchEngines": {
|
||||||
|
"Default": "DuckDuckGo",
|
||||||
|
"Remove": [
|
||||||
|
"1&1 Suche",
|
||||||
|
"Allaannonser",
|
||||||
|
"Allegro",
|
||||||
|
"Am Faclair Beag",
|
||||||
|
"Amazon.ca",
|
||||||
|
"Amazon.co.jp",
|
||||||
|
"Amazon.co.uk",
|
||||||
|
"Amazon.com",
|
||||||
|
"Amazon.com.au",
|
||||||
|
"Amazon.de",
|
||||||
|
"Amazon.es",
|
||||||
|
"Amazon.fr",
|
||||||
|
"Amazon.in",
|
||||||
|
"Amazon.it",
|
||||||
|
"Amazon.nl",
|
||||||
|
"Amazon.se",
|
||||||
|
"Atlas",
|
||||||
|
"Azerdict",
|
||||||
|
"Azet",
|
||||||
|
"BBC ┐ BBC Alba",
|
||||||
|
"Bing",
|
||||||
|
"Ceneje.si",
|
||||||
|
"Chambers (UK)",
|
||||||
|
"Cốc Cốc",
|
||||||
|
"DIEC2",
|
||||||
|
"Diccionario RAE",
|
||||||
|
"EUdict Eng->Cro",
|
||||||
|
"Ecosia",
|
||||||
|
"Encyklopedia PWN",
|
||||||
|
"Freelang (br)",
|
||||||
|
"GMX - Búsqueda web",
|
||||||
|
"GMX - Recherche web",
|
||||||
|
"GMX Search",
|
||||||
|
"GMX Shopping",
|
||||||
|
"GMX Suche",
|
||||||
|
"Google",
|
||||||
|
"Gule sider",
|
||||||
|
"Heureka",
|
||||||
|
"Hotline",
|
||||||
|
"Kannada Store",
|
||||||
|
"LEO Eng-Deu",
|
||||||
|
"List.am",
|
||||||
|
"Mapy.cz",
|
||||||
|
"Marktplaats.nl",
|
||||||
|
"MercadoLibre Argentina",
|
||||||
|
"MercadoLibre Chile",
|
||||||
|
"MercadoLibre Mexico",
|
||||||
|
"MercadoLivre",
|
||||||
|
"Najdi.si",
|
||||||
|
"Neti",
|
||||||
|
"OLX.ba",
|
||||||
|
"OZON.ru",
|
||||||
|
"Odpiralni Časi",
|
||||||
|
"Ordbok",
|
||||||
|
"Osta",
|
||||||
|
"Palas Print",
|
||||||
|
"Pazaruvaj",
|
||||||
|
"Priberam",
|
||||||
|
"Price.ru",
|
||||||
|
"Prisjakt",
|
||||||
|
"QXL",
|
||||||
|
"Qwant",
|
||||||
|
"Qwant Junior",
|
||||||
|
"Readmoo 讀墨電子書",
|
||||||
|
"SS.lv",
|
||||||
|
"Salidzini.lv",
|
||||||
|
"Seznam",
|
||||||
|
"Tyda.se",
|
||||||
|
"Vatera.hu",
|
||||||
|
"WEB.DE Suche",
|
||||||
|
"Wikiccionari (oc)",
|
||||||
|
"Wolne Lektury",
|
||||||
|
"Yahoo! JAPAN",
|
||||||
|
"Yandex",
|
||||||
|
"Zoznam",
|
||||||
|
"bol.com",
|
||||||
|
"channel",
|
||||||
|
"clid",
|
||||||
|
"eBay",
|
||||||
|
"flip.kz",
|
||||||
|
"mail.com",
|
||||||
|
"mail.com search",
|
||||||
|
"tearma.ie",
|
||||||
|
"Õigekeelsussõnaraamat",
|
||||||
|
"Погодак",
|
||||||
|
"Поиск Mail.Ru",
|
||||||
|
"Яндекс",
|
||||||
|
"מילון מורפיקס",
|
||||||
|
"విక్షనరీ (te)",
|
||||||
|
"พจนานุกรม ลองดู",
|
||||||
|
"ヤフオク!",
|
||||||
|
"亚马逊",
|
||||||
|
"教えて！goo",
|
||||||
|
"楽天市場",
|
||||||
|
"百度",
|
||||||
|
"네이버",
|
||||||
|
"다음"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
"UserMessaging": {
|
||||||
|
"WhatsNew": false,
|
||||||
|
"ExtensionRecommendations": false,
|
||||||
|
"FeatureRecommendations": false,
|
||||||
|
"UrlbarInterventions": false,
|
||||||
|
"SkipOnboarding": false
|
||||||
|
},
|
||||||
|
|
||||||
|
"ExtensionSettings": {
|
||||||
|
"uBlock0@raymondhill.net": {
|
||||||
|
"installation_mode": "normal_installed",
|
||||||
|
"install_url": "https://addons.mozilla.org/firefox/downloads/latest/ublock-origin/latest.xpi"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
78
src/userChrome/alt-browser-alt.css
Normal file
78
src/userChrome/alt-browser-alt.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
98
src/userChrome/alt-single_tab_mode-alt.css
Normal file
98
src/userChrome/alt-single_tab_mode-alt.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -8,19 +8,22 @@
|
||||||
* the HTML, which we can't override via CSS. */
|
* the HTML, which we can't override via CSS. */
|
||||||
#appMenu-popup {
|
#appMenu-popup {
|
||||||
/*margin-top: -390px !important;*/
|
/*margin-top: -390px !important;*/
|
||||||
margin-bottom: 62px !important;
|
|
||||||
padding-left: 10px !important;
|
|
||||||
padding-right: 10px !important;
|
|
||||||
/*height: 310px;*/
|
/*height: 310px;*/
|
||||||
/*max-height: 310px;*/
|
/*max-height: 310px;*/
|
||||||
height: 330px;
|
height: 340px;
|
||||||
max-height: 330px;
|
max-height: 340px;
|
||||||
|
padding-left: 10px !important;
|
||||||
|
padding-right: 10px !important;
|
||||||
|
|
||||||
}
|
}
|
||||||
#appMenu-protonMainView vbox.panel-subview-body {
|
#appMenu-protonMainView vbox.panel-subview-body {
|
||||||
/*height: 300px !important;*/
|
/*height: 300px !important;*/
|
||||||
/*max-height: 300px !important;*/
|
/*max-height: 300px !important;*/
|
||||||
height: 318px !important;
|
height: 318px !important;
|
||||||
max-height: 318px !important;
|
max-height: 318px !important;
|
||||||
|
margin-top: 4px !important;
|
||||||
|
|
||||||
}
|
}
|
||||||
#appMenu-multiView box.panel-viewstack:first-child {
|
#appMenu-multiView box.panel-viewstack:first-child {
|
||||||
/* Use the whole space in the menu, instead of slowly increasing the
|
/* Use the whole space in the menu, instead of slowly increasing the
|
||||||
|
|
@ -55,7 +58,7 @@
|
||||||
#appMenu-fullscreen-button2,
|
#appMenu-fullscreen-button2,
|
||||||
#appMenu-passwords-button, /* accessible from settings */
|
#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-bookmarks-button, /* submenu */
|
||||||
/*#appMenu-history-button, /* submenu */
|
/*#appMenu-history-button, /* submenu */
|
||||||
/*#appMenu-more-button2, /* submenu */
|
/*#appMenu-more-button2, /* submenu */
|
||||||
/*#appMenu-help-button2, /* submenu */
|
/*#appMenu-help-button2, /* submenu */
|
||||||
|
|
|
||||||
12
src/userChrome/borderless_transparent_active_tab.css
Normal file
12
src/userChrome/borderless_transparent_active_tab.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -1,10 +1,13 @@
|
||||||
/* Copyright 2022 plata
|
/* Copyright 2022 plata
|
||||||
* SPDX-License-Identifier: MPL-2.0 */
|
* SPDX-License-Identifier: MPL-2.0 */
|
||||||
|
|
||||||
/* Move navigation bar to bottom */
|
|
||||||
@media (max-width: 700px) {
|
@media (max-width: 700px) {
|
||||||
|
/* Move navigation bar to bottom */
|
||||||
#browser {
|
#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
|
/* Hide navigation bar in kiosk mode (to prevent bug #29). We can assume FF
|
||||||
|
|
@ -16,6 +19,12 @@
|
||||||
display: none;
|
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 */
|
/* https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/toolbars_below_content.css */
|
||||||
#TabsToolbar > .titlebar-buttonbox-container {
|
#TabsToolbar > .titlebar-buttonbox-container {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -25,4 +34,46 @@
|
||||||
max-height: unset !important;
|
max-height: unset !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 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-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;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
31
src/userChrome/colorful_inactive_tabs.css
Normal file
31
src/userChrome/colorful_inactive_tabs.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -1,11 +1,41 @@
|
||||||
/* custom rules */
|
/* 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 */
|
/* Apply this customization only on smaller screens */
|
||||||
@media (max-width: 700px) {
|
@media (max-width: 700px) {
|
||||||
|
|
||||||
/* Remove Tab Manager button
|
/* Remove Fullscreen popup */
|
||||||
(overridden by tab_counter.css) */
|
.pointerlockfswarning {
|
||||||
#alltabs-button {
|
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -23,15 +53,18 @@
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Remove items from urlbar */
|
|
||||||
|
/* Remove items from URL Bar */
|
||||||
#tracking-protection-icon-container,
|
#tracking-protection-icon-container,
|
||||||
#identity-permission-box,
|
#identity-permission-box,
|
||||||
#userContext-indicator,
|
#userContext-indicator,
|
||||||
#page-action-buttons {
|
/*#page-action-buttons,*/
|
||||||
|
#pageActionButton {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Urlbar font resizing */
|
/* URL Bar font resizing */
|
||||||
|
|
||||||
#urlbar-input {
|
#urlbar-input {
|
||||||
font-size: 10pt !important;
|
font-size: 10pt !important;
|
||||||
}
|
}
|
||||||
|
|
@ -39,36 +72,13 @@
|
||||||
font-size: calc(var(--urlbar-height) - 9px) !important;
|
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 */
|
to prevent accidentally closing tabs when selecting them */
|
||||||
.tab-close-button:not([selected]),
|
.tab-close-button:not([selected]),
|
||||||
.tabbrowser-tab:not([selected]):hover .tab-close-button {
|
.tabbrowser-tab:not([selected]):hover .tab-close-button {
|
||||||
visibility: hidden !important;
|
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
86
src/userChrome/dynamic_popups.css
Normal file
86
src/userChrome/dynamic_popups.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
88
src/userChrome/dynamic_popups_max.css
Normal file
88
src/userChrome/dynamic_popups_max.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
71
src/userChrome/dynamic_popups_plus.css
Normal file
71
src/userChrome/dynamic_popups_plus.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
83
src/userChrome/dynamic_popups_pro.css
Normal file
83
src/userChrome/dynamic_popups_pro.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
97
src/userChrome/dynamic_popups_pro_max.css
Normal file
97
src/userChrome/dynamic_popups_pro_max.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -9,10 +9,16 @@
|
||||||
* testing. */
|
* testing. */
|
||||||
|
|
||||||
#editBookmarkPanel {
|
#editBookmarkPanel {
|
||||||
margin-top: -390px !important;
|
|
||||||
|
/*margin-top: -390px !important;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
max-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,
|
#editBookmarkPanel box.panel-header,
|
||||||
|
|
@ -21,9 +27,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#editBookmarkPanelContent {
|
#editBookmarkPanelContent {
|
||||||
max-width: 250px !important;
|
/*max-width: 250px !important;
|
||||||
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
|
/* Hide the screenshot and the line below it. The page is right there when
|
||||||
|
|
@ -44,10 +52,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#editBookmarkPanelBottomButtons {
|
#editBookmarkPanelBottomButtons {
|
||||||
width: 250px !important;
|
/*width: 250px !important;
|
||||||
min-width: 250px !important;
|
min-width: 250px !important;
|
||||||
padding: 0px !important;
|
padding: 0px !important;
|
||||||
justify-content: flex-start !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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
44
src/userChrome/extensions_menu.css
Normal file
44
src/userChrome/extensions_menu.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
364
src/userChrome/fenix-alt.css
Normal file
364
src/userChrome/fenix-alt.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
364
src/userChrome/fenix.css
Normal file
364
src/userChrome/fenix.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
242
src/userChrome/fenix_colors.css
Normal file
242
src/userChrome/fenix_colors.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
818
src/userChrome/fenix_fox-alt.css
Normal file
818
src/userChrome/fenix_fox-alt.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
895
src/userChrome/fenix_fox.css
Normal file
895
src/userChrome/fenix_fox.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
1054
src/userChrome/fenix_one-alt.css
Normal file
1054
src/userChrome/fenix_one-alt.css
Normal file
File diff suppressed because it is too large
Load diff
1131
src/userChrome/fenix_one.css
Normal file
1131
src/userChrome/fenix_one.css
Normal file
File diff suppressed because it is too large
Load diff
44
src/userChrome/glow.css
Normal file
44
src/userChrome/glow.css
Normal file
|
|
@ -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 (v) 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));
|
||||||
|
}
|
||||||
|
|
@ -1,3 +1,7 @@
|
||||||
|
/* Copyright 2023 user0
|
||||||
|
* SPDX-License-Identifier: MPL-2.0 */
|
||||||
|
|
||||||
|
|
||||||
/* Apply this customization only on smaller screens */
|
/* Apply this customization only on smaller screens */
|
||||||
@media (max-width: 700px) {
|
@media (max-width: 700px) {
|
||||||
|
|
||||||
|
|
|
||||||
12
src/userChrome/hide_tab_counter.css
Normal file
12
src/userChrome/hide_tab_counter.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -2,74 +2,47 @@
|
||||||
See the above repository for updates as well as full license text. */
|
See the above repository for updates as well as full license text. */
|
||||||
|
|
||||||
/* Adds icons to main menu items which were removed in Proton */
|
/* Adds icons to main menu items which were removed in Proton */
|
||||||
|
#appMenu-zoom-controls::before,
|
||||||
#appMenu-fxa-status2[fxastatus] > toolbarbutton::before,
|
#appMenu-fxa-status2[fxastatus] > toolbarbutton::before,
|
||||||
#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image {
|
#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image{
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
-moz-context-properties: fill;
|
-moz-context-properties: fill;
|
||||||
margin-inline: 0 8px !important;
|
margin-inline: 0 8px !important;
|
||||||
}
|
}
|
||||||
#appMenu-new-tab-button2 {
|
#appMenu-zoom-controls::before,
|
||||||
list-style-image: url("chrome://browser/skin/new-tab.svg");
|
#appMenu-fxa-status2[fxastatus] > toolbarbutton::before{
|
||||||
}
|
display: flex;
|
||||||
#appMenu-new-window-button2 {
|
content: "";
|
||||||
list-style-image: url("chrome://browser/skin/window.svg");
|
width: 16px;
|
||||||
}
|
height: 16px;
|
||||||
#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") }
|
||||||
|
#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 */
|
/* Use account-button icon for signed in sync item */
|
||||||
#appMenu-fxa-status2[fxastatus] > toolbarbutton::before {
|
/*#appMenu-fxa-status2[fxastatus] > toolbarbutton::before{ background-image: var(--avatar-image-url) }*/
|
||||||
display: flex;
|
|
||||||
content: "";
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
background-image: var(--avatar-image-url);
|
|
||||||
}
|
|
||||||
/* Add somewhat hacky separator to zoom controls so it looks consistent */
|
/* Add somewhat hacky separator to zoom controls so it looks consistent */
|
||||||
#appMenu-protonMainView > .panel-subview-body::after {
|
/*#appMenu-protonMainView > .panel-subview-body::after{
|
||||||
content: "";
|
content: "";
|
||||||
display: flex;
|
display: flex;
|
||||||
border-bottom: 1px solid var(--panel-separator-color);
|
border-bottom: 1px solid var(--panel-separator-color);
|
||||||
margin: var(--panel-separator-margin);
|
margin: var(--panel-separator-margin);
|
||||||
}
|
}
|
||||||
|
#appMenu-find-button2 ~ *{
|
||||||
|
order: 2;
|
||||||
|
}*/
|
||||||
|
|
||||||
#appMenu-find-button2 ~ * {
|
|
||||||
-moz-box-ordinal-group: 2; /* Fx < 112 compatibility */
|
|
||||||
order: 2;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,6 @@
|
||||||
|
/* Copyright 2023 user0
|
||||||
|
* SPDX-License-Identifier: MPL-2.0 */
|
||||||
|
|
||||||
/* Apply this customization only on smaller screens */
|
/* Apply this customization only on smaller screens */
|
||||||
@media (max-width: 700px) {
|
@media (max-width: 700px) {
|
||||||
|
|
||||||
|
|
@ -6,9 +9,10 @@
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Display overflow New-tab button by default */
|
/* Display overflow New-tab button by default and fix alignment */
|
||||||
#new-tab-button {
|
#new-tab-button {
|
||||||
display: initial !important;
|
display: initial !important;
|
||||||
|
margin-top: 4px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,28 +4,36 @@ See the above repository for updates as well as full license text. */
|
||||||
/* Apply this customization only on smaller screens */
|
/* Apply this customization only on smaller screens */
|
||||||
@media (max-width: 700px) {
|
@media (max-width: 700px) {
|
||||||
|
|
||||||
/* Show a number before tab text */
|
/* Density variables */
|
||||||
/* Actually, let's show the tab number after tab content, right-align it,
|
:root:not([uidensity="touch"]) {
|
||||||
and fix its position directly on the tab close button */
|
--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 {
|
#tabbrowser-tabs {
|
||||||
counter-reset: nth-tab 0; /* Change to -1 for 0-indexing */
|
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) " ";
|
content: counter(nth-tab) " ";
|
||||||
counter-increment: nth-tab;
|
counter-increment: nth-tab;
|
||||||
position: absolute !important;
|
position: absolute !important;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 24px;
|
right: 24px;
|
||||||
top: 12px;
|
bottom: var(--tab-number-position);
|
||||||
width: 0 !important;
|
width: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Shorten tab content width so that tab number is more visible */
|
/* Hide tab close button on unpinned tabs, and reserve space for tab number */
|
||||||
.tabbrowser-tab[selected]:not(:hover,[pinned]) > .tab-stack > .tab-content {
|
.tabbrowser-tab:not(:hover,[pinned]) .tab-close-button {
|
||||||
width: calc(100vw - 150px) !important;
|
display: initial !important;
|
||||||
|
visibility: hidden !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hide tab number when hovering so that tab close button is clickable */
|
/* 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 {
|
.tabbrowser-tab:not([pinned]):hover .tab-content::after {
|
||||||
visibility: hidden !important;
|
visibility: hidden !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,7 @@
|
||||||
#notification-popup {
|
#notification-popup {
|
||||||
/*margin-left: -200px !important;*/
|
/*margin-left: -200px !important;*/
|
||||||
margin-top: -500px !important;
|
margin-top: -500px !important;
|
||||||
|
margin-right: -500px !important;
|
||||||
height: calc(100vh - 250px) !important;
|
height: calc(100vh - 250px) !important;
|
||||||
max-width: 100vw !important;
|
max-width: 100vw !important;
|
||||||
}
|
}
|
||||||
|
|
@ -45,7 +46,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* fix the protections popup getting
|
/* fix the protections popup getting
|
||||||
* too wide, making controls naccessible */
|
* too wide, making controls unaccessible */
|
||||||
#protections-popup-mainView {
|
#protections-popup-mainView {
|
||||||
min-width: 100vw !important;
|
min-width: 100vw !important;
|
||||||
max-width: 100vw !important;
|
max-width: 100vw !important;
|
||||||
|
|
@ -60,12 +61,28 @@
|
||||||
height: calc(100vh - 80px) !important;
|
height: calc(100vh - 80px) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Fix widget overflow to fit ublock0_raymondhill_net-browser-action */
|
/* Adjust Tab Manager Menu to fix flickering */
|
||||||
#widget-overflow {
|
#customizationui-widget-panel {
|
||||||
padding-bottom: 25px !important;
|
width: 100vw !important;
|
||||||
}
|
}
|
||||||
#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;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -48,10 +48,11 @@ menupopup {
|
||||||
border-color: transparent !important;
|
border-color: transparent !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#nav-bar {
|
/*#nav-bar {
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
margin-top: 3px;
|
margin-top: 3px;
|
||||||
}
|
}*/
|
||||||
|
|
||||||
.tab-line {
|
.tab-line {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -76,7 +77,8 @@ menugroup:hover > menuitem {
|
||||||
border-radius: 16px !important;
|
border-radius: 16px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Urlbar and searchbar shape */
|
|
||||||
|
/* URL Bar and Search Bar shape */
|
||||||
#urlbar,
|
#urlbar,
|
||||||
#searchbar,
|
#searchbar,
|
||||||
#urlbar-input,
|
#urlbar-input,
|
||||||
|
|
@ -88,7 +90,9 @@ menugroup:hover > menuitem {
|
||||||
border-radius: 12px !important;
|
border-radius: 12px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Findbar shape */
|
|
||||||
|
/* Find Bar shape */
|
||||||
|
|
||||||
input.findbar-textbox {
|
input.findbar-textbox {
|
||||||
border-radius: 9px !important;
|
border-radius: 9px !important;
|
||||||
font-size: 14px !important;
|
font-size: 14px !important;
|
||||||
|
|
|
||||||
98
src/userChrome/single_tab_mode-alt.css
Normal file
98
src/userChrome/single_tab_mode-alt.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -1,21 +1,99 @@
|
||||||
|
/* 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 */
|
/* Apply this customization only on smaller screens */
|
||||||
@media (max-width: 700px) {
|
@media (max-width: 700px) {
|
||||||
|
|
||||||
/* Hide unpinned inactive tabs */
|
/* Density variables */
|
||||||
.tabbrowser-tab:not([pinned]):not([selected]) {
|
:root:not([uidensity="touch"]) {
|
||||||
visibility: hidden !important;
|
--PanelUI-menu-button-position: 4px;
|
||||||
min-width: 0 !important;
|
--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);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Expand unpinned active tab */
|
/* Hide Nav Bar and Tab Bar when in Fullscreen mode and hide Title Bar, Newtab button, and New-tab button */
|
||||||
.tabbrowser-tab:not([pinned])[selected] {
|
#nav-bar[inFullscreen],
|
||||||
min-width: 100vw !important;
|
#TabsToolbar[inFullscreen],
|
||||||
}
|
.titlebar-buttonbox-container,
|
||||||
|
|
||||||
/* Hide Newtab and New-tab buttons */
|
|
||||||
#new-tab-button,
|
#new-tab-button,
|
||||||
#tabs-newtab-button {
|
#tabs-newtab-button {
|
||||||
display: none !important;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
39
src/userChrome/tab_animated_active_border.css
Normal file
39
src/userChrome/tab_animated_active_border.css
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_animated_active_border.css made available under Mozilla Public License v. 2.0
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.tab-background[selected] {
|
||||||
|
border: 1px solid transparent !important;
|
||||||
|
outline: none !important;
|
||||||
|
background-clip: padding-box !important;
|
||||||
|
}
|
||||||
|
|
@ -1,57 +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
|
/* 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/s4wsww/
|
||||||
https://teddit.net/r/FirefoxCSS/comments/yb8tr9/ */
|
https://teddit.net/r/FirefoxCSS/comments/yb8tr9/ */
|
||||||
|
|
||||||
/* Apply this customization only on smaller screens */
|
/* Show Tab Manager Menu button */
|
||||||
@media (max-width: 700px) {
|
#alltabs-button {
|
||||||
|
display: -moz-box !important;
|
||||||
/* 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 */
|
/* Tab Manager Menu button tab counter */
|
||||||
#alltabs-button {
|
#TabsToolbar-customization-target {
|
||||||
display: -moz-box !important;
|
counter-reset: tabCount;
|
||||||
}
|
}
|
||||||
|
.tabbrowser-tab {
|
||||||
/* Tab Manager button (v) tab counter */
|
counter-increment: tabCount;
|
||||||
#TabsToolbar-customization-target {
|
}
|
||||||
counter-reset: tabCount;
|
#alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon {
|
||||||
}
|
visibility: collapse !important;
|
||||||
.tabbrowser-tab:not([pinned]) {
|
}
|
||||||
counter-increment: tabCount;
|
#alltabs-button > .toolbarbutton-badge-stack {
|
||||||
}
|
position: relative !important;
|
||||||
#alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon {
|
}
|
||||||
visibility: collapse !important;
|
#alltabs-button > .toolbarbutton-badge-stack::before {
|
||||||
}
|
content: counter(tabCount);
|
||||||
#alltabs-button > .toolbarbutton-badge-stack {
|
color: var(--toolbarbutton-icon-fill);
|
||||||
position: relative !important;
|
opacity: var(--toolbarbutton-icon-fill-opacity);
|
||||||
}
|
position: absolute;
|
||||||
#alltabs-button > .toolbarbutton-badge-stack::before {
|
bottom: var(--toolbarbutton-inner-padding);
|
||||||
content: counter(tabCount);
|
left: 50%;
|
||||||
border-bottom: 1px solid var(--toolbarbutton-icon-fill);
|
transform: translateX(-50%);
|
||||||
color: var(--toolbarbutton-icon-fill);
|
}
|
||||||
opacity: var(--toolbarbutton-icon-fill-opacity);
|
#alltabs-button > .toolbarbutton-badge-stack {
|
||||||
position: absolute;
|
border-radius: var(--toolbarbutton-border-radius);
|
||||||
bottom: var(--toolbarbutton-inner-padding);
|
}
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
/* Tab Manager Menu tab counter */
|
||||||
padding: 0 3px;
|
#allTabsMenu-allTabsViewTabs, /* before FF 106 */
|
||||||
}
|
#allTabsMenu-allTabsView-tabs { /* since FF 106 */
|
||||||
|
counter-reset: nn_tabs 0 !important;
|
||||||
/* Tab Manager menu tab counter */
|
}
|
||||||
#allTabsMenu-allTabsViewTabs {
|
.all-tabs-button::before {
|
||||||
counter-reset: nn_tabs 0 !important;
|
display: -moz-inline-box !important;
|
||||||
}
|
-moz-padding-end: 8px !important;
|
||||||
.all-tabs-button::before {
|
content: counter(nn_tabs) !important;
|
||||||
display: -moz-inline-box !important;
|
font-size: 12px !important;
|
||||||
-moz-padding-end: 8px !important;
|
margin-top: -2px !important;
|
||||||
content: counter(nn_tabs) !important;
|
margin-right: -2px !important;
|
||||||
/*font-weight: bold !important; */
|
}
|
||||||
font-size: 12px !important;
|
.all-tabs-item {
|
||||||
margin-top: -2px !important;
|
counter-increment: nn_tabs !important;
|
||||||
margin-right: -2px !important;
|
|
||||||
}
|
|
||||||
.all-tabs-item {
|
|
||||||
counter-increment: nn_tabs !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -47,13 +47,10 @@
|
||||||
* this menu is above the hamburger button that spawns the regular
|
* this menu is above the hamburger button that spawns the regular
|
||||||
* menu. */
|
* menu. */
|
||||||
/*margin-top: -360px !important;*/
|
/*margin-top: -360px !important;*/
|
||||||
margin-bottom: 15px !important;
|
|
||||||
padding-left: 10px !important;
|
padding-left: 10px !important;
|
||||||
padding-right: 10px !important;
|
padding-right: 10px !important;
|
||||||
/*height: 320px;*/
|
/*height: 320px;*/
|
||||||
/*max-height: 320px;*/
|
/*max-height: 320px;*/
|
||||||
height: 333px;
|
|
||||||
max-height: 333px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*#allTabsMenu-allTabsView vbox.panel-subview-body {
|
/*#allTabsMenu-allTabsView vbox.panel-subview-body {
|
||||||
|
|
@ -62,7 +59,8 @@
|
||||||
/*max-height: 300px !important;
|
/*max-height: 300px !important;
|
||||||
/* When messing around with tabs, it gets into a state where it does
|
/* 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
|
* 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;
|
/*-moz-box-flex: initial !important;
|
||||||
}*/
|
}*/
|
||||||
|
|
||||||
|
|
@ -73,15 +71,28 @@
|
||||||
/*overflow-y: hidden !important;
|
/*overflow-y: hidden !important;
|
||||||
}*/
|
}*/
|
||||||
|
|
||||||
#allTabsMenu-multiView box.panel-viewstack {
|
|
||||||
|
#allTabsMenu-multiView box.panel-viewstack { /* before FF 102 or earlier */
|
||||||
|
|
||||||
/* Use the whole height */
|
/* Use the whole height */
|
||||||
height: calc(100vh - 100px) !important;
|
height: calc(100vh - 100px) !important;
|
||||||
max-height: calc(100vh - 100px) !important;
|
max-height: calc(100vh - 100px) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#allTabsMenu-allTabsViewTabs {
|
#customizationui-widget-multiview box.panel-viewstack { /* since FF 113 */
|
||||||
|
/* Use the whole height */
|
||||||
|
/*height: 300px !important;
|
||||||
|
max-height: 300px !important;*/
|
||||||
|
height: 330px !important;
|
||||||
|
max-height: 330px !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 */
|
/* 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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,7 @@
|
||||||
|
/* Copyright 2023 user0
|
||||||
|
* SPDX-License-Identifier: MPL-2.0 */
|
||||||
|
|
||||||
/* Tab min-width resizing */
|
/* Tab min-width resizing */
|
||||||
#tabbrowser-tabs .tabbrowser-tab[fadein]:not([pinned]) {
|
#tabbrowser-tabs {
|
||||||
min-width: 90px !important;
|
--tab-min-width: 24vw !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
204
src/userChrome/true_mobile_landscape-alt.css
Normal file
204
src/userChrome/true_mobile_landscape-alt.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
230
src/userChrome/true_mobile_landscape.css
Normal file
230
src/userChrome/true_mobile_landscape.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
79
src/userChrome/true_mobile_mode-alt.css
Normal file
79
src/userChrome/true_mobile_mode-alt.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
79
src/userChrome/true_mobile_mode.css
Normal file
79
src/userChrome/true_mobile_mode.css
Normal file
|
|
@ -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: 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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: 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
/* Reduce minimum window width */
|
/* Reduce minimum window width */
|
||||||
#urlbar-container {
|
#urlbar-container {
|
||||||
min-width: 150px !important;
|
min-width: 150px !important;
|
||||||
|
flex-shrink: 1 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 700px) {
|
@media (max-width: 700px) {
|
||||||
|
|
@ -19,7 +20,7 @@
|
||||||
/* #back-button */
|
/* #back-button */
|
||||||
#forward-button,
|
#forward-button,
|
||||||
/* #reload-button */
|
/* #reload-button */
|
||||||
#home-button,
|
/*#home-button,*/
|
||||||
#customizableui-special-spring1,
|
#customizableui-special-spring1,
|
||||||
/* (urlbar) */
|
/* (urlbar) */
|
||||||
#customizableui-special-spring2,
|
#customizableui-special-spring2,
|
||||||
|
|
@ -82,6 +83,14 @@
|
||||||
#PersonalToolbar {
|
#PersonalToolbar {
|
||||||
display: none;
|
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
|
/* Even though amazon is removed as search engine in policies.json, it gets
|
||||||
|
|
|
||||||
66
src/userChrome/userChrome-desktop.css
Normal file
66
src/userChrome/userChrome-desktop.css
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
/* 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 "hide_tabs_scrollbuttons.css";
|
||||||
|
|
||||||
|
@import "tab_close_button_always_on_hover.css";
|
||||||
|
|
||||||
|
@import "iconized_main_menu.css";
|
||||||
|
|
||||||
|
@import "round_ui_items.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";
|
||||||
|
|
||||||
|
@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";
|
||||||
|
*/
|
||||||
58
src/userChrome/userChrome-fenix.css
Normal file
58
src/userChrome/userChrome-fenix.css
Normal file
|
|
@ -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";
|
||||||
|
*/
|
||||||
26
src/userChrome/userChrome-fenix_fox.css
Normal file
26
src/userChrome/userChrome-fenix_fox.css
Normal file
|
|
@ -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";
|
||||||
|
*/
|
||||||
24
src/userChrome/userChrome-fenix_one.css
Normal file
24
src/userChrome/userChrome-fenix_one.css
Normal file
|
|
@ -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";
|
||||||
|
*/
|
||||||
64
src/userChrome/userChrome-mobile.css
Normal file
64
src/userChrome/userChrome-mobile.css
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
/* 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 "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-alt.css";
|
||||||
|
|
||||||
|
@import "alt-single_tab_mode-alt.css";
|
||||||
|
*/
|
||||||
|
@import "single_tab_mode.css";
|
||||||
|
|
||||||
|
@import "numbered_tabs.css";
|
||||||
|
|
||||||
|
@import "tab_counter.css";
|
||||||
|
/*
|
||||||
|
@import "glow.css";
|
||||||
|
|
||||||
|
@import "colorful_inactive_tabs.css";
|
||||||
|
|
||||||
|
@import "tab_animated_active_border.css";
|
||||||
|
|
||||||
|
@import "borderless_transparent_active_tab.css";
|
||||||
|
*/
|
||||||
60
src/userChrome/userChrome-true-mobile.css
Normal file
60
src/userChrome/userChrome-true-mobile.css
Normal file
|
|
@ -0,0 +1,60 @@
|
||||||
|
/* 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 "iconized_main_menu.css";
|
||||||
|
|
||||||
|
@import "round_ui_items.css";
|
||||||
|
|
||||||
|
@import "numbered_tabs.css";
|
||||||
|
|
||||||
|
@import "tab_counter.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";
|
||||||
|
*/
|
||||||
518
src/userContent/theme-fenix.css
Normal file
518
src/userContent/theme-fenix.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
371
src/userContent/theme-non-colorized.css
Normal file
371
src/userContent/theme-non-colorized.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue