Skip to content

Instantly share code, notes, and snippets.

@magdesign

magdesign/gist:9d832dbffc2a2311224dd2cc8f3a454c

Last active February 26, 2024 07:19
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save magdesign/9d832dbffc2a2311224dd2cc8f3a454c to your computer and use it in GitHub Desktop.
Save magdesign/9d832dbffc2a2311224dd2cc8f3a454c to your computer and use it in GitHub Desktop.
Download ZIP
fenix_firefox.sh
Raw
gistfile1.txt
#!/bin/sh
# __ _
# / _| ___ _ __ (_)_ __
# | |_ / _ \ '_ \| \ \/ /
# | _| __/ | | | |> <
# |_| \___|_| |_|_/_/\_\
#
#
# Make firefox real mobile, find all the info here:
# https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313/61
# sadly its a bit tricky to keep track of all files/changes without using any kind of git sysytem, so please fix any bugs and redistribute
echo "fenix_fox.css is missing, but i can not find it anywhere"
echo "dynamic_popups_pro.css is missing, can not find it in this chaotic post"
echo "tell me where they are an this script would finally work"
# cd into your user folder
#cd ~/.mozilla/firefox/*.default/
# you might change this line to
# cd ~/.mozilla/firefox/*.default-release
# first check in your system
# Try to cd into the first folder
if cd ~/.mozilla/firefox/*.default/; then
echo "Successfully entered the default profile folder, creating all css now."
else
# If 'default' doesn't exist, try
if cd ~/.mozilla/firefox/*.default-release; then
echo "Successfully entered the default-release directory, creating all stuff there."
else
# If 'foo2' also doesn't exist, display an error and exit
echo "could not find firefox random default folders."
exit 1
fi
fi
#create user.js
echo "user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);
" > user.js
#create userfolder if no exist
if [ -d "chrome" ]; then
echo "Folder 'chrome' already exists."
else
mkdir "chrome"
echo "Folder 'chrome' created."
fi
#cd into it
cd chrome
##############################################################################
# create the userContent.css
cat <<-EOD >> userContent.css
/* 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;
}
}
}
EOD
############################################################
# create the userChrome.css
cat <<-EOD >> userChrome.css
/* 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";
*/
EOD
###########################################################
cat <<-EOD >> extensions_menu.css
/* 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;
}
}
EOD
###
cat <<-EOD >> alt-browser.css
/* Copyright 2022 plata
* SPDX-License-Identifier: MPL-2.0 */
/* Move navigation bar to bottom */
@media (max-width: 700px) {
#browser {
-moz-box-ordinal-group: 0 !important;
}
/* Hide navigation bar in kiosk mode (to prevent bug #29). We can assume FF
* is in kiosk mode when fullscreen and max-width conditions are met,
* because at this max-width the fullscreen button is hidden
* (see appMenu.css). */
#nav-bar[inFullscreen],
#TabsToolbar[inFullscreen] {
display: none;
}
/* https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/toolbars_below_content.css */
#TabsToolbar > .titlebar-buttonbox-container {
display: none;
}
/* Fix panels sizing */
.panel-viewstack {
max-height: unset !important;
}
/* Tabs below */
#titlebar {
-moz-box-ordinal-group: 2; /* Fx <112 compatibility */
order: 2;
}
/* Adjust menu popup spawn height */
#appMenu-popup {
margin-bottom: 20px !important;
}
/* Adjust all-tabs popup spawn height */
#customizationui-widget-panel {
margin-bottom: 60px !important;
}
}
EOD
###
cat <<-EOD >> browser.css
/* Copyright 2022 plata
* SPDX-License-Identifier: MPL-2.0 */
@media (max-width: 700px) {
/* Move navigation bar to bottom */
#browser {
-moz-box-ordinal-group: 0 !important; /* before FF 113 */
order: -1 !important; /* since FF 113 */
}
/* Hide navigation bar in kiosk mode (to prevent bug #29). We can assume FF
* is in kiosk mode when fullscreen and max-width conditions are met,
* because at this max-width the fullscreen button is hidden
* (see appMenu.css). */
#nav-bar[inFullscreen],
#TabsToolbar[inFullscreen] {
display: none;
}
/* Hide minimize/maximize/close buttons */
.titlebar-buttonbox-container {
display: none;
}
/* https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/toolbars_below_content.css */
#TabsToolbar > .titlebar-buttonbox-container {
display: none;
}
/* Fix panels sizing */
.panel-viewstack {
max-height: unset !important;
}
/* 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;
}
}
EOD
###
cat <<-EOD >> editBookmarkPanel.css
/* Copyright 2022 Oliver Smith
* SPDX-License-Identifier: MPL-2.0 */
@media (max-width: 700px) {
/* The only way I (ollieparanoid) found to make this not glitchy, was to
* reduce the bookmark panel to the minimum amount of useful controls and
* hardcode width and height. Patches to improve this welcome, but make
* sure that you don't introduce new UI glitches by doing extensive
* testing. */
#editBookmarkPanel {
/*margin-top: -390px !important;
height: 200px;
max-height: 200px;
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,
#editBookmarkHeaderSeparator {
display: none !important;
}
#editBookmarkPanelContent {
/*max-width: 250px !important;
width: 250px !important;
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
* you bring up the menu, no need for a screenshot. Also it has a glitch
* when taking the screenshot in mobile portrait view, half the screenshot
* is just black. Let's rather use the space to edit the bookmark
* information. */
#editBookmarkPanelInfoArea,
#editBookmarkSeparator {
display: none;
}
#editBMPanel_folderRow,
.editBMPanel_folderRow,
#editBMPanel_tagsRow,
.editBMPanel_tagsRow {
display: none;
}
#editBookmarkPanelBottomButtons {
/*width: 250px !important;
min-width: 250px !important;
padding: 0px !important;
justify-content: flex-start !important;
margin: 0px 0px 20px 0px !important;*/
margin-top: -5px !important;
margin-left: -50px !important;
}
}
EOD
###
cat <<-EOD >> findbar.css
/* Copyright 2022 Oliver Smith
* SPDX-License-Identifier: MPL-2.0 */
@media (max-width: 700px) {
.findbar-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
/*height: 150px !important;*/
height: 40px !important;
}
.findbar-textbox {
/* Overwrite fixed size, so the X on the right shows up */
width: 100% !important;
}
.findbar-container checkbox {
/* Add space around the buttons, looks nicer and makes it easier to hit
* them with the finger. */
padding: 10px 0px;
}
/* Save space */
.findbar-highlight,
.findbar-case-sensitive,
.findbar-match-diacritics,
.findbar-entire-word,
/*.found-matches,*/
.findbar-find-status,
.find-status-icon {
display: none;
}
}
EOD
###
cat <<-EOD >> popups.css
/* Copyright 2022 Oliver Smith
* SPDX-License-Identifier: MPL-2.0 */
@media (max-width: 700px) {
/* Now that the navbar is at the bottom, we need to set an offset to have
* the notifications (like the one for installing addons) displayed
* on-screen. */
#notification-popup {
/*margin-left: -200px !important;*/
margin-top: -500px !important;
margin-right: -500px !important;
height: calc(100vh - 250px) !important;
max-width: 100vw !important;
}
#downloadsPanel-mainView {
max-width: calc(100vw - 10px);
}
/* Menu that appears when long-pressing the back-button */
#backForwardMenu {
margin-top: -250px;
height: 200px;
min-height: 200px;
max-width: 100vw !important;
}
/* Hide some context menu items */
#context-inspect,
#context-inspect-a11y,
#context-savelinktopocket,
#context-searchselect,
#context-sendlinktodevice,
#context-viewpartialsource-selection,
#inspect-separator {
display: none !important
}
/* fix flickering of the protections, permissions,
* widget overflow and identity popups */
#protections-popup,
#permission-popup,
#widget-overflow,
#identity-popup {
max-width: 100vw !important;
}
/* fix the protections popup gettting
* too wide, making controls unaccessible */
#protections-popup-mainView {
min-width: 100vw !important;
max-width: 100vw !important;
}
/* fix flicker on extension menus.
* The compromise is that the overflow menu always use
* all available height.
* The -80px is here to prevent covering the main bars */
#widget-overflow,
#widget-overflow-mainView {
height: calc(100vh - 80px) !important;
}
/* Adjust Tab Manager Menu to fix flickering */
#customizationui-widget-panel {
width: 100vw !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;
}
}
EOD
###
cat <<-EOD >> root.css
/* Copyright 2022 Oliver Smith
* SPDX-License-Identifier: MPL-2.0 */
/* Reduce minimum window width */
:root {
min-width: 300px !important;
}
EOD
###
cat <<-EOD >> tabmenu.css
/* Copyright 2022 Peter Mack, Oliver Smith
* SPDX-License-Identifier: MPL-2.0 */
@media (max-width: 700px) {
/* Even when not in private browsing mode, reserve space to the right of
* the tab bar for the private-browsing-indicator (that mask icon). This
* gives the tab bar a consistent width in both the regular and the private
* browsing mode, so the increased width hack below looks good in both. */
/*#titlebar {
padding-right: 30px;
}
hbox.private-browsing-indicator {
position: fixed !important;
right: 0px;
bottom: 50px;
display: block;
}*/
/* Increase tab width, to have more space for displaying the title of the
* website and to make the "all tabs" button show up. */
/*#tabbrowser-tabs {
--tab-min-width: calc(100vw - 116px) !important;
}*/
/* Rotate the arrow on the "all tabs" button to point upwards, since the
* tabs and searchbar were moved to the bottom. */
/*#alltabs-button {
transform: rotate(180deg) !important;
}*/
/* All tabs menu: hide scroll buttons */
/*#scrollbutton-up,
#scrollbutton-down {
display: none !important;
}*/
/* All tabs menu: hide the search and the separator below it. */
#allTabsMenu-searchTabs,
#allTabsMenu-tabsSeparator {
display: none;
}
/* Similar hack to what's in appMenu.css to properly spawn the "all tabs"
* popup above the navigation menu */
#customizationui-widget-panel {
/* Further up than appmenu, because the "all tabs" button that spawns
* this menu is above the hamburger button that spawns the regular
* menu. */
/*margin-top: -360px !important;*/
padding-left: 10px !important;
padding-right: 10px !important;
/*height: 320px;*/
/*max-height: 320px;*/
}
/*#allTabsMenu-allTabsView vbox.panel-subview-body {
/* Use the whole height */
/*height: 300px !important;
/*max-height: 300px !important;
/* When messing around with tabs, it gets into a state where it does
* not use the whole height anymore, it becomes a tiny window. Removing
* this attribute fixes it. Since FF 113, this no longer has any
* effect, but it doesn't seem to be necessary either. */
/*-moz-box-flex: initial !important;
}*/
/*#allTabsMenu-allTabsView vbox.panel-subview-body:first-child {
/* the allTabsMenu has a vbox.panel-subview-body inside another one.
* With -moz-box-flex: initial, it will show a scroll bar in each, but
* we only want one scrollbar. */
/*overflow-y: hidden !important;
}*/
#allTabsMenu-multiView box.panel-viewstack { /* before FF 102 or earlier */
/* Use the whole height */
height: calc(100vh - 100px) !important;
max-height: calc(100vh - 100px) !important;
}
#customizationui-widget-multiview box.panel-viewstack { /* since FF 113 */
/* Use the whole height */
/*height: 300px !important;
max-height: 300px !important;*/
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 */
/*max-width: calc(100vw - 20px);*/
max-width: calc(100vw - 30px);
/* Fix padding */
padding-top: 2px !important;
}
}
EOD
###
cat <<-EOD >> urlbar.css
/* Copyright 2022 Oliver Smith
* SPDX-License-Identifier: MPL-2.0 */
/* Reduce minimum window width */
#urlbar-container {
min-width: 150px !important;
flex-shrink: 1 !important;
}
@media (max-width: 700px) {
/* Remove various buttons left and right of the URL bar:
- forward-button: also reachable via longpress of back button
- home-button: not important enough
- customizableui-special-spring: empty space
- library-button: also reachable via PanelUI-menu-button
- sidebar-button: not useful on mobile (we try to gain horizontal space)
- fxa-toolbar-menu-button: firefox cloud stuff, also reachable via
#PanelUI-menu-button
*/
/* #back-button */
#forward-button,
/* #reload-button */
/*#home-button,*/
#customizableui-special-spring1,
/* (urlbar) */
#customizableui-special-spring2,
#library-button,
#sidebar-button,
#fxa-toolbar-menu-button
/* #PanelUI-menu-button */ {
display: none !important;
}
#urlbar {
padding: 0px 5px;
}
/* Smaller font: show more of the URL */
#urlbar-input {
font-size: 9pt !important;
}
/* Focused urlbar: hide all icons around it, so we have more space to edit the URL */
#urlbar[focused] #remote-control-box,
#urlbar[focused] #identity-box,
#urlbar[focused] #tracking-protection-icon-container,
/* #urlbar-input */
#urlbar[focused] #reader-mode-button,
#urlbar[focused] #page-action-buttons {
display: none;
}
/* Label of "identity icons", e.g. firefox specific pages look weird
* when ellipsed, e.g. "F..x" instead of "Firefox". So just hide this
* label. The icon itself is still visible. */
#identity-icon-label {
display: none;
}
/* Move urlbar results to cover the whole displayed website, instead of
* being below the urlbar. */
.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;
}
/* Bookmarks toolbar. Firefox shows it for some reason when opening a
* private browsing window, even if it is not enabled in the normal
* window view. Hide it for mobile, it eats precious space and can't be
* organized properly on mobile anyway. Using the searchbar to filter
* through bookmarks is much more efficient. */
#PersonalToolbar {
display: none;
}
/* If the bookmarks toolbar is configured to only show on the new tab page,
* Firefox makes the toolbar overlap the browser. When it's then hidden by
* the rule above, the urlbar is pushed off the bottom of the window. To
* prevent this, set the height of the overlapped toolbar to 0. */
:root {
--bookmarks-toolbar-overlapping-browser-height: 0 !important;
}
}
/* Even though amazon is removed as search engine in policies.json, it gets
* installed when FF starts for the first time. Hide the button in "This time,
* search with" inside the urlbar. Match localizations like Amazon.de with this
* regex. */
button[id^='urlbar-engine-one-off-item-Amazon'] {
display: none !important;
}
EOD
###
cat <<-EOD >> hide_tabs_scrollbuttons.css
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/hide_tabs_scrollbuttons.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* This should hide tabs scrollbuttons in a manner that preserves the ability to move tab strip when reordering tabs */
#tabbrowser-arrowscrollbox {
--uc-compat-scrollbutton-margin: 1px; /* compatibility for non_floating_sharp_tabs.css */
--uc-scrollbutton-up-background: linear-gradient(-90deg,transparent,var(--lwt-accent-color) 35%);
--uc-scrollbutton-down-background: linear-gradient(90deg,transparent,var(--lwt-accent-color) 35%);
}
#tabbrowser-tabs:not([movingtab]) {
--uc-scroll-visibility: hidden;
}
#tabbrowser-tabs[overflow] {
--uc-scrollbox-base-margin: -31px;
--uc-scrollbox-margin: calc(var(--uc-scrollbox-base-margin) + var(--tab-shadow-max-size));
}
:root[uidensity="compact"] #tabbrowser-tabs[overflow] {
--uc-scrollbox-base-margin: -25px;
}
#tabbrowser-arrowscrollbox:not([scrolledtostart="true"]) {
--uc-scrollbox-overflow-start-margin: -1px;
}
#scrollbutton-up ~ spacer {
visibility: visible !important;
}
spacer[part="overflow-start-indicator"] {
-moz-box-ordinal-group: 0; /* Fx < 112 compatibility */
order: -1;
margin-inline-start: var(--uc-scrollbox-overflow-start-margin,-0.5px) !important;
}
spacer[part="overflow-end-indicator"] {
-moz-box-ordinal-group: 2; /* Fx < 112 compatibility */
order: 2;
}
#scrollbutton-down[disabled="true"] > .toolbarbutton-icon,
#scrollbutton-up[disabled="true"] > .toolbarbutton-icon {
opacity: 0.4;
}
#scrollbutton-up,
#scrollbutton-down {
position: relative;
z-index: 1;
visibility: var(--uc-scroll-visibility,visible);
background-clip: border-box !important;
background-origin: initial !important;
background-repeat: no-repeat !important;
opacity: 1 !important;
}
#scrollbutton-up {
margin-inline-start: calc(0px - var(--tab-shadow-max-size,0px)) !important;
background-image: var(--uc-scrollbutton-up-background);
}
#scrollbutton-down {
margin-inline-end: calc(0px - var(--tab-shadow-max-size,0px)) !important;
background-image: var(--uc-scrollbutton-down-background);
}
.scrollbox-clip {
margin-inline: var(--uc-scrollbox-margin,0px);
}
/* Need to reset some things for other scrollboxes */
.menupopup-arrowscrollbox {
--tab-shadow-max-size: 0;
}
EOD
###
cat <<-EOD >> tab_close_button_always_on_hover.css
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_close_button_always_on_hover.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Always show tab close button on hover and never otherwise */
.tabbrowser-tab .tab-close-button {
display: none;
}
.tabbrowser-tab:not([pinned]):hover .tab-close-button {
display: flex !important;
align-items: center;
}
EOD
###
cat <<-EOD >> tabs_fill_available_width.css
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_fill_available_width.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Why 100vw? Tab closing requires width animation to end and "none" can't be animated */
.tabbrowser-tab[fadein]:not([style^="max-width"]) {
max-width: 100vw !important;
}
}
EOD
###
cat <<-EOD >> iconized_main_menu.css
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/iconized_main_menu.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Adds icons to main menu items which were removed in Proton */
#appMenu-zoom-controls::before,
#appMenu-fxa-status2[fxastatus] > toolbarbutton::before,
#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image{
fill: currentColor;
-moz-context-properties: fill;
margin-inline: 0 8px !important;
}
#appMenu-zoom-controls::before,
#appMenu-fxa-status2[fxastatus] > toolbarbutton::before{
display: flex;
content: "";
width: 16px;
height: 16px;
}
#appMenu-new-tab-button2{ list-style-image: url("chrome://browser/skin/new-tab.svg") }
#appMenu-new-window-button2{ list-style-image: url("chrome://browser/skin/window.svg") }
#appMenu-new-private-window-button2{ list-style-image: url("chrome://browser/skin/privateBrowsing.svg") }
#appMenu-bookmarks-button{ list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg") }
#appMenu-history-button{ list-style-image: url("chrome://browser/skin/history.svg") }
#appMenu-downloads-button{ list-style-image: url("chrome://browser/skin/downloads/downloads.svg") }
#appMenu-passwords-button{ list-style-image: url("chrome://browser/skin/login.svg") }
#appMenu-extensions-themes-button{ list-style-image: url("chrome://mozapps/skin/extensions/extension.svg") }
#appMenu-print-button2{ list-style-image: url("chrome://global/skin/icons/print.svg") }
#appMenu-save-file-button2{ list-style-image: url("chrome://browser/skin/save.svg") }
#appMenu-find-button2{ list-style-image: url("chrome://global/skin/icons/search-glass.svg") }
#appMenu-settings-button{ list-style-image: url("chrome://global/skin/icons/settings.svg") }
#appMenu-more-button2{ list-style-image: url("chrome://global/skin/icons/developer.svg") }
#appMenu-help-button2{ list-style-image: url("chrome://global/skin/icons/info.svg") }
#appMenu-quit-button2{ list-style-image: url("chrome://devtools/skin/images/search-clear.svg") }
#appMenu-translate-button{ list-style-image: url("chrome://browser/skin/translations.svg") }
#appMenu-zoom-controls::before{ background-image: url("chrome://browser/skin/fullscreen.svg") }
/* Use account-button icon for signed in sync item */
/*#appMenu-fxa-status2[fxastatus] > toolbarbutton::before{ background-image: var(--avatar-image-url) }*/
/* Add somewhat hacky separator to zoom controls so it looks consistent */
/*#appMenu-protonMainView > .panel-subview-body::after{
content: "";
display: flex;
border-bottom: 1px solid var(--panel-separator-color);
margin: var(--panel-separator-margin);
}
#appMenu-find-button2 ~ *{
order: 2;
}*/
EOD
###
####??????
cat <<-EOD >> color_variable_template.css
EOD
###
cat <<-EOD >> round_ui_items.css
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/round_ui_items.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Make bunch of things in the main UI round */
:root {
--toolbarbutton-border-radius: 12px !important;
--tab-border-radius: 14px !important;
}
#urlbar-input-container > box:hover,
#urlbar-input-container > box[open],
#main-menubar > menu,
.titlebar-button:hover,
#scrollbutton-up,
#scrollbutton-down,
.tab-close-button,
.close-icon > image,
#page-action-buttons > :hover,
.panel-arrowcontent,
.urlbarView-row-inner,
.search-one-offs button,
.subviewbutton-back,
.toolbaritem-combined-buttons > toolbarbutton,
#PopupSearchAutoComplete,
menupopup {
border-radius: 10px;
}
button,
.tab-background {
border-radius: 14px !important;
}
.panel-arrowcontent {
margin-inline-end: 0 !important;
}
.panel-arrow {
margin-inline: 17px !important;
}
menupopup {
-moz-appearance: none !important;
overflow: -moz-hidden-unscrollable !important;
}
.tabbrowser-tab[selected]::after,
.tabbrowser-tab[beforeselected-visible]::after {
border-color: transparent !important;
}
/*#nav-bar {
box-shadow: none !important;
margin-top: 3px;
}*/
.tab-line {
display: none;
}
.tab-background[selected] {
border-top-width: 3px !important;
border-bottom-width: 3px !important;
border-left-width: 3px !important;
border-right-width: 3px !important;
border-radius: 14px !important;
}
.tabbrowser-tab[selected] {
z-index: auto !important;
}
/*.urlbar-icon,
toolbar toolbarbutton:not(#back-button):not(.bookmark-item):not(.titlebar-button) > .toolbarbutton-icon {
border-radius: 12px !important;
}*/
menugroup:hover > menuitem {
border-radius: 16px !important;
}
/* URL Bar and Search Bar shape */
#urlbar,
#searchbar,
#urlbar-input,
#urlbar-input-container {
border-radius: 12px !important;
}
#urlbar-background {
border: none !important;
border-radius: 12px !important;
}
/* Find Bar shape */
input.findbar-textbox {
border-radius: 9px !important;
font-size: 14px !important;
}
EOD
###
cat <<-EOD >> numbered_tabs.css
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/numbered_tabs.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Density variables */
:root:not([uidensity="touch"]) {
--tab-number-position: calc(var(--toolbarbutton-inner-padding) * 1.6 );
}
:root[uidensity="touch"] {
--tab-number-position: calc(var(--toolbarbutton-inner-padding) * 1.8 );
}
/* Show the tab number after tab content, right-align it, and fix its position directly on the tab close button */
#tabbrowser-tabs {
counter-reset: nth-tab 0; /* Change to -1 for 0-indexing */
}
.tabbrowser-tab .tab-content::after {
content: counter(nth-tab) " ";
counter-increment: nth-tab;
position: absolute !important;
position: fixed;
right: 24px;
bottom: var(--tab-number-position);
width: 0 !important;
}
/* Hide tab close button on unpinned tabs, and reserve space for tab number */
.tabbrowser-tab:not(:hover,[pinned]) .tab-close-button {
display: initial !important;
visibility: hidden !important;
}
/* Hide tab number on pinned tabs and when hovering on unpinned tabs so that tab close button is clickable */
.tabbrowser-tab[pinned] .tab-content::after,
.tabbrowser-tab:not([pinned]):hover .tab-content::after {
visibility: hidden !important;
}
/* Adjust tab close button opacity, border, and shape */
.tab-close-button {
position: absolute !important;
margin-right: -8px !important;
opacity: 0.5 !important;
border: 2px solid white !important;
height: 36px !important;
width: 36px !important;
}
}
EOD
###
cat <<-EOD >> tab_counter.css
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Source from reddit users /u/BatDogOnBatMobile, /u/moko1960, and /u/It_Was_The_Other_Guy
https://teddit.net/r/FirefoxCSS/comments/s4wsww/
https://teddit.net/r/FirefoxCSS/comments/yb8tr9/ */
/* 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;
}
EOD
###
cat <<-EOD >> custom_rules.css
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Disable tab loading burst
(because it's annoying) */
.tab-loading-burst {
display: none !important;
}
/* Tabs Toolbar and Container tab line color
(hides container tab line above tab by making it the same color as the Tabs Toolbar) */
#TabsToolbar,
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
background-color: var(--tab-bgcolor) !important;
}
/* Menubar color
(hides the line at the top of the screen when Menubar is hidden) */
toolbar[type=menubar] {
background-color: black !important;
color: var(--toolbar-color) !important;
}
/* Navbar bottom border color */
#navigator-toolbox {
border-bottom-color: black !important;
}
/* Resist Fingerprinting Letterbox background color */
:root {
--tabpanel-background-color: black !important;
}
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Remove Fullscreen popup */
.pointerlockfswarning {
display: none !important;
}
/* Remove tab overflow indicators */
spacer[part=overflow-start-indicator],
spacer[part=overflow-end-indicator] {
display: none !important;
}
/* Remove spacers on left and right of main tab view */
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
margin-inline-start: 0px !important;
}
.titlebar-spacer[type="post-tabs"] {
display: none !important;
}
/* Remove items from URL Bar */
#tracking-protection-icon-container,
#identity-permission-box,
#userContext-indicator,
/*#page-action-buttons,*/
#pageActionButton {
display: none !important;
}
/* URL Bar font resizing */
#urlbar-input {
font-size: 10pt !important;
}
#urlbar[focused] #urlbar-input {
font-size: calc(var(--urlbar-height) - 9px) !important;
}
/* Hide inactive tab close button (x)
to prevent accidentally closing tabs when selecting them */
.tab-close-button:not([selected]),
.tabbrowser-tab:not([selected]):hover .tab-close-button {
visibility: hidden !important;
}
}
EOD
###
cat <<-EOD >> colors.css
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Various items color */
arrowscrollbox,
findbar,
toolbar[type=menubar],
tooltip,
#TabsToolbar,
#navigator-toolbox,
#tabbrowser-arrowscrollbox {
background-color: var(--arrowpanel-background) !important;
color: var(--arrowpanel-color) !important;
}
/* Tab throbber color */
.tab-throbber[busy]::before {
fill: var(--lwt-text-color) !important;
}
/* Inactive Tab throbber color */
.tabbrowser-tab:not(:hover, [selected]) .tab-throbber[busy]::before {
fill: var(--lwt-accent-color) !important;
}
/* Inactive tab color on hover */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected]) {
background-color: var(--lwt-accent-color-inactive) !important;
}
/* Inactive tab text and close button (x) color */
.tab-text:not([selected]),
.tab-icon-image:not([selected]),
.tab-close-button:not([selected]) {
color: var(--lwt-accent-color) !important;
}
/* Inactive tab text and close button (x) color on hover */
.tabbrowser-tab:not([selected]):hover .tab-text,
.tabbrowser-tab:not([selected]):hover .tab-icon-image,
.tabbrowser-tab:not([selected]):hover .tab-close-button {
color: var(--lwt-text-color) !important;
}
/* Tab text and close button (x) color */
.tab-text,
.tab-icon-image,
.tab-close-button {
color: var(--lwt-text-color) !important;
}
/* Tab close button (x) color on hover */
.tab-close-button:hover,
.tab-close-button:not([selected]):hover {
background-color: var(--lwt-accent-color-inactive) !important;
}
/* Container tab line color */
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
background-color: var(--tab-bgcolor) !important;
}
/* Back button (←) color */
#back-button > .toolbarbutton-icon {
border: none !important;
background-color: var(--arrowpanel-dimmed) !important;
background-image: none !important;
}
/* Back button (←) color on hover */
#back-button:not([disabled]):hover > .toolbarbutton-icon {
background-color: var(--lwt-accent-color) !important;
color: var(--lwt-text-color) !important;
}
/* Forward button (→) color */
#forward-button > .toolbarbutton-icon {
border: none !important;
background-color: unset !important;
background-image: none !important;
}
/* Forward button (→) color on hover */
#forward-button:not([disabled]):hover > .toolbarbutton-icon {
background-color: var(--lwt-accent-color) !important;
color: var(--lwt-text-color) !important;
}
/* Urlbar color */
*::selection {
background-color: var(--urlbar-popup-url-color) !important;
color: var(--lwt-accent-color) !important;
}
#nav-bar {
background-color: var(--arrowpanel-dimmed) !important;
background-image: linear-gradient(#0e0e0e,#0e0e0e) !important;
}
#urlbar:not([focused]) #urlbar-input-container {
filter: saturate(3);
}
/* Bookmark button (★) post-animation color */
#star-button,
#star-button[starred] {
color: var(--lwt-text-color) !important;
}
/* "Saved to Library!" color */
#confirmation-hint {
--arrowpanel-border-color: var(--lwt-accent-color) !important;
--arrowpanel-color: var(--lwt-text-color) !important;
--arrowpanel-background: var(--lwt-accent-color) !important;
}
/* Navbar buttons color */
#navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton)):hover:not([disabled]),
#navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton)):-moz-any(:hover:active, [checked], [open]):not([disabled]) {
color: var(--lwt-text-color) !important;
}
/* Main App Menu button (≡) color on hover */
.subviewbutton:hover {
background-color: var(--arrowpanel-color) !important;
color: var(--lwt-text-color) !important;
}
/* Findbar color */
.browserContainer > findbar {
border: none !important;
background-color: var(--toolbar-bgcolor) !important;
color: var(--toolbar-color) !important;
box-shadow: none !important;
}
input.findbar-textbox {
border: 1px solid var(--toolbar-color) !important;
background-color: var(--toolbar-bgcolor) !important;
color: var(--toolbar-color) !important;
box-shadow: 0 0 3px var(--toolbar-color) !important;
}
.findbar-find-previous,
.findbar-find-next {
border: none !important;
background-color: transparent !important;
color: var(--toolbar-color) !important;
}
/* Status panel color */
#statuspanel #statuspanel-inner {
border: none !important;
height: 23x !important;
background-color: transparent !important;
}
#statuspanel #statuspanel-label {
border: none !important;
background-color: var(--arrowpanel-background) !important;
color: var(--arrowpanel-color) !important;
}
EOD
###
cat <<-EOD >> hide_newtab_+_new-tab_buttons.css
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Hide Newtab and New-tab buttons */
#new-tab-button,
#tabs-newtab-button {
display: none !important;
}
}
EOD
###
cat <<-EOD >> new-tab-button.css
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Hide non-overflow Newtab button */
#tabs-newtab-button {
display: none !important;
}
/* Display overflow New-tab button by default */
#new-tab-button {
display: initial !important;
}
}
EOD
###
cat <<-EOD >> tabs_larger_min-width.css
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Tab min-width resizing */
#tabbrowser-tabs {
--tab-min-width: 24vw !important;
}
EOD
###
cat <<-EOD >> single_tab_mode.css
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/******************************************/
/* IMPORTANT: */
/* */
/* This will move the Tab Manager button */
/* to the right side of the URL Bar. */
/* */
/* Move the Unified Extensions button */
/* to the left side of the URL Bar */
/* using the Customize Toolbar feature, */
/* or use a user.js file in your profile. */
/******************************************/
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Reduce urlbar width */
#urlbar {
width: calc(100vw - 166px) !important;
}
/* Adjust Tab Manager Menu spawn height */
#customizationui-widget-panel {
margin-bottom: 26px !important;
}
/* Move Tab Manager Menu button to right of urlbar */
:root {
--tab-border-radius: var(--toolbarbutton-border-radius) !important;
}
#alltabs-button > .toolbarbutton-badge-stack {
height: 32px;
width: 32px;
}
#alltabs-button {
position: absolute;
bottom: 48.5px;
right: 41.5px;
z-index: 1 !important;
}
/* Hide Newtab and New-tab buttons */
#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;
}
}
EOD
###
cat <<-EOD >> single_tab_mode_with_space_for_1_item.css
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/******************************************/
/* IMPORTANT: */
/* */
/* This will expand the active tab, with */
/* space for one item of your choice: */
/* */
/* New-tab, Tab Manager, or other button. */
/* */
/* In addition to your item of choice, */
/* the active tab will dynamically shrink */
/* in order to accommodate one pinned tab. */
/******************************************/
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Hide unpinned inactive tabs */
.tabbrowser-tab:not([pinned]):not([selected]) {
visibility: collapse !important;
min-width: 0 !important;
}
/* Expand unpinned active tab */
#tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] {
min-width: calc(100vw - 40px) !important;
}
#tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned])[selected] {
min-width: calc(100vw - 80px) !important;
}
}
EOD
###
cat <<-EOD >> single_tab_mode_with_space_for_2_items.css
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/******************************************/
/* IMPORTANT: */
/* */
/* This will expand the active tab, with */
/* space for two items of your choice: */
/* */
/* New-tab, Tab Manager, or other button. */
/* */
/* In addition to your item of choice, */
/* the active tab will dynamically shrink */
/* in order to accommodate one pinned tab. */
/******************************************/
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Hide unpinned inactive tabs */
.tabbrowser-tab:not([pinned]):not([selected]) {
visibility: collapse !important;
min-width: 0 !important;
}
/* Expand unpinned active tab */
#tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] {
min-width: calc(100vw - 80px) !important;
}
#tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned])[selected] {
min-width: calc(100vw - 120px) !important;
}
}
EOD
###
cat <<-EOD >> fenix_one.css
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/******************************************/
/* IMPORTANT: */
/* */
/* One of the things this code will do is */
/* to move the Tab Manager Menu button to */
/* the right side of the URL Bar. */
/* */
/* For the best results, consider moving */
/* the Unified Extensions Menu button to */
/* the left of the URL Bar and removing */
/* less important toolbar items by using */
/* the "Customize Toolbar" feature, or by */
/* using a user.js file in your profile. */
/******************************************/
/* Resist Fingerprinting Letterbox background color and minimum width for display and URL Bar */
:root {
--tabpanel-background-color: black !important;
min-width: 300px !important;
}
#urlbar-container {
min-width: 150px !important;
flex-shrink: 1 !important;
}
/* Menu Bar color
(hides the line at the top/bottom of the screen when Menubar is hidden) */
toolbar[type=menubar] {
background-color: black !important;
color: var(--toolbar-color) !important;
}
/* Nav Bar bottom border color */
#navigator-toolbox {
border-bottom-color: black !important;
}
/* Remove popup warning when enterimg Fullscreen */
.pointerlockfswarning {
display: none !important;
}
/* Fenix Colors */
:root {
/* Popup panels */
--arrowpanel-background: rgb(41,29,79) !important;
--arrowpanel-border-color: transparent !important;
--arrowpanel-color: white !important;
--arrowpanel-dimmed: rgb(97,84,124) !important;
--arrowpanel-dimmed-further: rgb(66,50,98) !important;
--panel-background: rgb(41,29,79) !important;
--panel-border-color: transparent !important;
--panel-color: white !important;
--panel-separator-color: transparent !important;
--panel-item-hover-bgcolor: rgba(255,255,255,0.2) !important;
--panel-item-active-bgcolor: rgba(255,255,255,0.2) !important;
--panel-banner-item-background-color: rgb(117,66,228) !important;
--panel-banner-item-hover-bgcolor: rgb(69,68,76) !important;
--panel-banner-item-active-bgcolor: rgb(69,68,76) !important;
--panel-banner-item-update-supported-bgcolor: rgb(117,66,228) !important;
--panel-banner-item-info-icon-bgcolor: rgb(117,66,228) !important;
--panel-banner-item-color: white !important;
--panel-description-color: white !important;
--panel-disabled-color: gray !important;
--menuitem-disabled-hover-background-color: transparent !important;
/* window and toolbar background */
--lwt-accent-color: rgb(117,66,228) !important;
--lwt-accent-color-inactive: rgba(117,66,228,0.3) !important;
--toolbar-non-lwt-bgcolor: rgb(41,29,79) !important;
--toolbar-non-lwt-textcolor: white !important;
--toolbar-bgcolor: rgb(43,42,51) !important;
--toolbar-color: rgb(171,113,255) !important;
--tabpanel-background-color: black !important;
/* tabs with system theme - text is not controlled by variable */
--tab-selected-bgcolor: rgb(117,66,228) !important;
/* tabs with any other theme */
--lwt-text-color: white !important;
--lwt-selected-tab-background-color: rgb(117,66,228) !important;
/* toolbar area */
--toolbarbutton-icon-fill: white !important;
--toolbarbutton-icon-fill-attention: white !important;
--toolbarbutton-hover-background: rgba(255,255,255,0.2) !important;
--toolbarbutton-active-background: rgba(255,255,255,0.2) !important;
--lwt-toolbarbutton-icon-fill-attention: white !important;
--lwt-toolbarbutton-hover-background: rgba(255,255,255,0.2) !important;
--lwt-toolbarbutton-active-background: rgba(255,255,255,0.2) !important;
--toolbarseparator-color: black !important;
/* urlbar */
--toolbar-field-border-color: rgb(28,27,34) !important;
--toolbar-field-focus-border-color: rgb(28,27,34) !important;
--urlbar-popup-url-color: white !important;
--urlbar-box-bgcolor: var(--button-bgcolor);
--urlbar-box-focus-bgcolor: var(--button-bgcolor);
--urlbar-box-hover-bgcolor: var(--button-hover-bgcolor);
--urlbar-box-active-bgcolor: var(--button-active-bgcolor);
--urlbar-box-text-color: inherit;
--urlbar-box-hover-text-color: var(--urlbar-box-text-color);
--lwt-brighttext-url-color: #00ddff;
/* urlbar Firefox < 92 */
--lwt-toolbar-field-background-color: rgb(28,27,34) !important;
--lwt-toolbar-field-focus: white !important;
--lwt-toolbar-field-color: white !important;
--lwt-toolbar-field-focus-color: white !important;
/* urlbar Firefox 92+ */
--toolbar-field-background-color: rgb(28,27,34) !important;
--toolbar-field-focus-background-color: rgb(28,27,34) !important;
--toolbar-field-icon-fill-attention: rgb(117,66,228) !important;
--toolbar-field-color: white !important;
--toolbar-field-focus-color: white !important;
/* sidebar - note the sidebar-box rule for the header-area */
--lwt-sidebar-background-color: rgb(41,29,79) !important;
--lwt-sidebar-text-color: white !important;
/* findbar */
--focus-outline-color: rgb(117,66,228) !important;
--input-border-color: rgb(117,66,228) !important;
/* buttons and checkboxes */
--button-bgcolor: rgb(117,66,228) !important;
--button-color: white !important;
--button-hover-bgcolor: rgb(144,89,255) !important;
--button-active-bgcolor: rgb(144,89,255) !important;
--button-primary-bgcolor: rgb(117,66,228) !important;
--button-primary-hover-bgcolor: rgb(144,89,255) !important;
--button-primary-active-bgcolor: rgb(144,89,255) !important;
--button-primary-color: white !important;
--in-content-primary-button-background: rgb(117,66,228) !important;
--in-content-primary-button-background-hover: rgb(144,89,255) !important;
--in-content-primary-button-background-active: rgb(144,89,255) !important;
--buttons-destructive-bgcolor: #e22850;
--buttons-destructive-hover-bgcolor: #c50042;
--buttons-destructive-active-bgcolor: #810220;
--buttons-destructive-color: #fbfbfe;
--checkbox-unchecked-bgcolor: rgb(41,29,79) !important;
--checkbox-unchecked-hover-bgcolor: rgb(144,89,255) !important;
--checkbox-unchecked-active-bgcolor: rgb(144,89,255) !important;
--checkbox-checked-border-color: rgb(117,66,228) !important;
--checkbox-checked-bgcolor: rgb(117,66,228) !important;
--checkbox-checked-color: white !important;
--checkbox-checked-hover-bgcolor: rgba(144,89,255) !important;
--checkbox-checked-active-bgcolor: rgba(144,89,255) !important;
--uc-checkbox-checked-bgcolor: rgb(117,66,228) !important;
/* icon glow */
--uc-icon-glow-primary: rgb(117,66,228);
--uc-icon-glow-secondary: white;
--uc-icon-glow-hover-primary: rgb(117,66,228);
--uc-icon-glow-hover-secondary: white;
}
/* line between nav-bar and tabs toolbar,
also fallback color for border around selected tab */
#navigator-toolbox {
--lwt-tabs-border-color: rgb(65,64,72) !important;
}
/* Line above tabs */
#tabbrowser-tabs {
--lwt-tab-line-color: none !important;
}
/* the header-area of sidebar needs this to work */
#sidebar-box {
--sidebar-background-color: rgb(41,29,79) !important;
}
/* Find Bar */
.findbar-find-previous,
.findbar-find-next,
input.findbar-textbox,
findbar {
border: none !important;
box-shadow: none !important;
background-color: var(--arrowpanel-background) !important;
color: var(--toolbar-field-color) !important;
}
/* Context Menus */
menupopup {
--panel-background: rgb(41,29,79) !important;
--panel-border-color: transparent !important;
--panel-color: white !important;
--panel-separator-color: transparent !important;
}
menuseparator {
display: none !important;
}
menu:hover,
menuitem:hover {
background-color: var(--panel-item-hover-bgcolor) !important;
color: var(--panel-color) !important;
}
/* Menu popup shadow */
.menupopup-arrowscrollbox {
box-shadow: 0 5px 5px -3px rgba(0,0,0,0.2),
0 8px 10px 1px rgba(0,0,0,0.14),
0 3px 14px 2px rgba(0,0,0,0.12) !important;
}
/* "Saved to Library!" popup notification */
#confirmation-hint {
--panel-background: var(--lwt-accent-color) !important;
--panel-border-color: var(--lwt-accent-color) !important;
--panel-color: var(--lwt-text-color) !important;
}
/* "Confirm before closing multiple tabs" popup checkboxes and dialog buttons */
.checkbox-check {
background-color: var(--buttons-destructive-bgcolor) !important;
color: var(--buttons-destructive-color) !important;
}
.dialog-button-box > button:nth-child(6) {
background-color: var(--buttons-destructive-bgcolor) !important;
color: var(--buttons-destructive-color) !important;
}
/* Main App Menu (≡), Tab Manager Menu, and Unified Extensions Menu */
panel {
--panel-background: black !important;
--panel-shadow: none !important;
}
.panel-viewstack {
background-color: var(--arrowpanel-background) !important;
border-color: var(--arrowpanel-background) !important;
}
/* Tab Manager Menu */
#allTabsMenu-allTabsView-tabs,
#allTabsMenu-allTabsView,
#allTabsMenu-containerTabsView {
background-color: var(--toolbar-bgcolor) !important;
}
#allTabsMenu-containerTabsButton,
#allTabsMenu-containerTabsView > .panel-header {
color: var(--toolbar-color) !important;
}
#allTabsMenu-containerTabsButton:hover {
background-color: var(--panel-banner-item-hover-bgcolor) !important;
}
.all-tabs-item[selected] {
background-color: var(--arrowpanel-dimmed-further) !important;
}
.all-tabs-item:hover[selected] {
--panel-item-active-bgcolor: transparent !important;
--panel-item-hover-bgcolor: transparent !important;
background-color: var(--arrowpanel-dimmed) !important;
}
.all-tabs-item:hover:not([selected]) {
--panel-item-active-bgcolor: transparent !important;
--panel-item-hover-bgcolor: transparent !important;
background-color: var(--panel-banner-item-hover-bgcolor) !important;
}
.all-tabs-close-button:hover {
background-color: var(--toolbarbutton-hover-background) !important;
}
/* Main App Menu (≡) item icons */
#appMenu-zoom-controls::before,
#appMenu-fxa-status2[fxastatus] > toolbarbutton::before,
#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image {
fill: currentColor;
-moz-context-properties: fill;
margin-inline: 0 20px !important;
}
#appMenu-zoom-controls::before,
#appMenu-fxa-status2[fxastatus] > toolbarbutton::before {
display: flex;
content: "";
width: 16px;
height: 16px;
}
#appMenu-new-tab-button2 {
order: 1 !important;
list-style-image: url("chrome://global/skin/icons/plus.svg");
}
#appMenu-bookmarks-button {
order: 2 !important;
list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
}
#appMenu-history-button {
order: 3 !important;
list-style-image: url("chrome://browser/skin/history.svg");
}
#appMenu-downloads-button {
order: 4 !important;
list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
}
#appMenu-extensions-themes-button {
order: 5 !important;
list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
}
#appMenu-passwords-button {
order: 6 !important;
list-style-image: url("chrome://browser/skin/login.svg");
}
#appMenu-find-button2 {
order: 7 !important;
list-style-image: url("chrome://global/skin/icons/search-glass.svg");
}
#appMenu-zoom-controls {
order: 8 !important;
}
#appMenu-zoom-controls::before {
background-image: url("chrome://browser/skin/fullscreen.svg");
}
#appMenu-new-window-button2 {
order: 9 !important;
list-style-image: url("chrome://browser/skin/window.svg");
}
#appMenu-new-private-window-button2 {
order: 10 !important;
list-style-image: url("chrome://browser/skin/privateBrowsing.svg");
}
#appMenu-save-file-button2 {
order: 11 !important;
list-style-image: url("chrome://browser/skin/save.svg");
}
#appMenu-print-button2 {
order: 12 !important;
list-style-image: url("chrome://global/skin/icons/print.svg");
}
#appMenu-help-button2 {
order: 13 !important;
list-style-image: url("chrome://global/skin/icons/help.svg");
}
#appMenu-more-button2 {
order: 14 !important;
list-style-image: url("chrome://global/skin/icons/developer.svg");
}
#appMenu-settings-button {
order: 15 !important;
list-style-image: url("chrome://global/skin/icons/settings.svg");
}
#appMenu-quit-button2 {
order: 16 !important;
list-style-image: url("chrome://devtools/skin/images/search-clear.svg");
}
/* Use account-button icon for signed in sync item */
#appMenu-fxa-status2[fxastatus] > toolbarbutton::before {
background-image: var(--avatar-image-url)
}
/* Tab Manager Menu button tab counter */
#alltabs-button {
display: -moz-box !important;
}
#TabsToolbar-customization-target {
counter-reset: tabCount;
}
.tabbrowser-tab {
counter-increment: tabCount;
}
#alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon {
visibility: collapse !important;
}
#alltabs-button > .toolbarbutton-badge-stack {
position: relative !important;
}
#alltabs-button > .toolbarbutton-badge-stack::before {
content: counter(tabCount);
color: var(--toolbarbutton-icon-fill);
opacity: var(--toolbarbutton-icon-fill-opacity);
position: absolute;
bottom: var(--toolbarbutton-inner-padding);
left: 50%;
transform: translateX(-50%);
}
#alltabs-button > .toolbarbutton-badge-stack {
border-radius: var(--toolbarbutton-border-radius);
}
/* Tab Manager Menu tab counter */
#allTabsMenu-allTabsViewTabs, /* before FF 106 */
#allTabsMenu-allTabsView-tabs { /* since FF 106 */
counter-reset: nn_tabs 0 !important;
}
.all-tabs-button::before {
display: -moz-inline-box !important;
-moz-padding-end: 8px !important;
content: counter(nn_tabs) !important;
font-size: 12px !important;
margin-top: -2px !important;
margin-right: -2px !important;
}
.all-tabs-item {
counter-increment: nn_tabs !important;
}
/* Apply this customization only on smaller screens in landscape mode */
@media (max-height: 300px) {
/* Density variables */
:root:not([uidensity="touch"]) {
--PanelUI-menu-button-position: 4px;
--alltabs-button-height: 32px;
--alltabs-button-width: 32px;
--alltabs-button-position: 3.5px;
--urlbar-width: calc(100vw - 188.5px);
}
:root[uidensity="touch"] {
--PanelUI-menu-button-position: 5px;
--alltabs-button-height: 34px;
--alltabs-button-width: 34px;
--alltabs-button-position: 4.5px;
--urlbar-width: calc(100vw - 196.5px);
}
/* Remove items from Main App Menu (≡) */
#appMenu-fxa-status2,
#appMenu-fxa-separator,
#appMenu-protonMainView toolbarseparator,
#appMenu-fullscreen-button2,
#appMenu-passwords-button,
.subviewbutton[shortcut]::after {
display: none !important;
}
/* Fix flickering of Main App Menu (≡) */
#appMenu-popup {
width: 260px !important;
}
#appMenu-protonMainView vbox.panel-subview-body {
height: 253px !important;
max-height: 253px !important;
width: 250px !important;
}
/* Change Main App Menu (≡) button to its mobile equivalent (⋮) */
#PanelUI-menu-button {
position: absolute !important;
right: 0px !important;
bottom: var(--PanelUI-menu-button-position) !important;
margin-right: -10px !important;
}
#PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon {
visibility: collapse !important;
}
#PanelUI-menu-button > .toolbarbutton-badge-stack {
position: relative !important;
width: 75% !important;
}
#PanelUI-menu-button > .toolbarbutton-badge-stack::before {
content: "⋮";
color: var(--toolbarbutton-icon-fill);
opacity: var(--toolbarbutton-icon-fill-opacity);
position: absolute;
bottom: calc(var(--toolbarbutton-inner-padding) * 0.9 );
left: 50%;
transform: translateX(-50%);
font-size: 18px !important;
font-weight: bold !important;
}
/* Hide Tab Bar and Private Browsing indicator */
#tabbrowser-tabs,
#private-browsing-indicator-with-label {
visibility: collapse !important;
}
/* Hide Nav Bar 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 */
: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;
}
/* Expand Tab Manager Menu */
#customizationui-widget-multiview panelview {
max-width: calc(100vw - 10px) !important;
width: calc(100vw - 10px) !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 - 18px) !important;
}
.all-tabs-item {
border-radius: 0 !important;
height: calc(var(--urlbar-min-height) * 2.25 ) !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 portrait 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 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 */
:root:not([uidensity="touch"],[inFullscreen]) {
--uc-bottom-toolbar-height: calc(39px + var(--toolbarbutton-outer-padding) )
}
:root[uidensity="touch"]:not([inFullscreen]){
--uc-bottom-toolbar-height: calc(43px + var(--toolbarbutton-outer-padding) )
}
#browser,
#customization-container {
margin-bottom: var(--uc-bottom-toolbar-height,0px)
}
#nav-bar{
position: fixed !important;
bottom: 0px;
width: 100%;
z-index: 1;
}
.panel-viewstack {
max-height: unset !important;
}
/* Adjust Widget Overflow Menu (») spawn height */
#widget-overflow {
margin-bottom: var(--widget-overflow-margin) !important;
}
/* Adjust Unified Extensions Menu spawn height */
#unified-extensions-panel {
margin-bottom: var(--unified-extensions-panel-margin) !important;
}
/* Adjust Tab Manager Menu spawn height */
#customizationui-widget-panel {
margin-bottom: var(--customizationui-widget-panel-margin) !important;
}
/* Adjust Main App Menu (≡) spawn height */
#appMenu-popup {
margin-bottom: var(--appMenu-popup-margin) !important;
}
/* Adjust Bookmarks Menu (★) spawn height */
#BMB_bookmarksPopup {
margin-bottom: var(--BMB_bookmarksPopup-margin) !important;
}
/* Edit Bookmark Panel */
#editBookmarkPanel {
background-color: var(--arrowpanel-background) !important;
margin-bottom: 225px !important;
max-height: 100vh !important;
max-width: 100vw !important;
width: 100vw !important;
}
#editBookmarkPanel box.panel-header,
#editBookmarkHeaderSeparator,
#editBookmarkPanelInfoArea,
#editBookmarkSeparator,
#editBMPanel_folderRow,
#editBMPanel_tagsRow {
display: none !important;
}
#editBookmarkPanelContent {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
#editBookmarkPanelBottomButtons {
margin-top: -5px !important;
margin-left: -50px !important;
}
/* Find Bar */
.findbar-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 40px !important;
}
.findbar-textbox {
width: 100% !important;
}
.findbar-container checkbox {
padding: 10px 0px;
}
.findbar-highlight,
.findbar-case-sensitive,
.findbar-match-diacritics,
.findbar-entire-word,
/*.found-matches,*/
.findbar-find-status,
.find-status-icon {
display: none;
}
input.findbar-textbox {
font-size: 12pt !important;
}
/* Fix Popups */
#notification-popup {
margin-top: -500px !important;
margin-right: -500px !important;
height: calc(100vh - 250px) !important;
max-width: 100vw !important;
}
#downloadsPanel-mainView {
max-width: calc(100vw - 10px);
}
#backForwardMenu {
margin-top: -250px;
height: 200px;
min-height: 200px;
max-width: 100vw !important;
}
#context-inspect,
#context-inspect-a11y,
#context-savelinktopocket,
#context-searchselect,
#context-sendlinktodevice,
#context-viewpartialsource-selection,
#inspect-separator {
display: none !important
}
#protections-popup,
#permission-popup,
#widget-overflow,
#identity-popup {
max-width: 100vw !important;
}
#protections-popup-mainView {
min-width: 100vw !important;
max-width: 100vw !important;
}
#widget-overflow,
#widget-overflow-mainView {
height: calc(100vh - 80px) !important;
}
#customizationui-widget-panel {
width: 100vw !important;
}
#BMB_bookmarksPopup {
padding-left: 10px !important;
padding-right: 10px !important;
width: 100vw !important;
}
/* Tab Manager Menu */
#allTabsMenu-searchTabs,
#allTabsMenu-tabsSeparator {
display: none;
}
#customizationui-widget-panel {
padding-left: 10px !important;
padding-right: 10px !important;
}
#allTabsMenu-multiView box.panel-viewstack {
height: calc(100vh - 100px) !important;
max-height: calc(100vh - 100px) !important;
}
#customizationui-widget-multiview box.panel-viewstack {
height: 330px !important;
max-height: 330px !important;
}
#allTabsMenu-allTabsViewTabs,
#allTabsMenu-allTabsView-tabs {
max-width: calc(100vw - 30px);
padding-top: 2px !important;
}
/* Tab Manager Menu inspired by Firefox for Android */
#allTabsMenu-containerTabsButton {
border-radius: 0 !important;
margin: 0 !important;
padding-left: 10px !important;
padding-right: 10px !important;
width: calc(100vw - 30px) !important;
}
.all-tabs-item {
border-radius: 0 !important;
height: calc(var(--urlbar-min-height) * 2.25 ) !important;
width: calc(100vw - 30px) !important;
}
.all-tabs-close-button {
border-radius: 100% !important;
margin-left: calc(var(--urlbar-min-height) * -0.6 ) !important;
margin-right: calc(var(--urlbar-min-height) * -0.6 ) !important;
height: calc(var(--urlbar-min-height) * 2.25 ) !important;
width: calc(var(--urlbar-min-height) * 2.25 ) !important;
}
.all-tabs-close-button > .toolbarbutton-icon {
margin-left: calc(var(--urlbar-min-height) * 0.625 ) !important;
height: calc(var(--urlbar-min-height) * 0.5 ) !important;
width: calc(var(--urlbar-min-height) * 0.5 ) !important;
}
/* Tab Manager Menu button inspired by Firefox for Android */
#alltabs-button > .toolbarbutton-badge-stack::before {
border: 1px solid var(--toolbarbutton-icon-fill);
border-radius: 2px;
bottom: calc(var(--toolbarbutton-inner-padding) * 0.85 ) !important;
padding: 0 5px 0 5px;
font-size: 8px !important;
font-weight: 600 !important;
font-family: "Noto Sans" !important;
}
/* Move Tab Manager Menu button to right of urlbar */
:root {
--tab-border-radius: var(--toolbarbutton-border-radius) !important;
}
#alltabs-button > .toolbarbutton-badge-stack {
height: var(--alltabs-button-height) !important;
width: var(--alltabs-button-width) !important;
}
#alltabs-button {
position: absolute;
bottom: var(--alltabs-button-position) !important;
right: 28.5px;
z-index: 2 !important;
}
/* Nav Bar */
#back-button,
#forward-button,
#customizableui-special-spring1,
#customizableui-special-spring2,
#library-button,
#sidebar-button,
#fxa-toolbar-menu-button {
display: none !important;
}
/* Allow room for Tab Manager Menu button */
#nav-bar {
padding-right: 67px !important;
}
/* URL Bar */
#urlbar-container {
max-width: var(--urlbar-width) !important;
}
#urlbar {
padding: 0px 5px;
}
#urlbar-input {
font-size: 10pt !important;
}
#urlbar[focused] #urlbar-input {
font-size: calc(var(--urlbar-height) - 9px) !important;
}
#urlbar[focused] #remote-control-box,
#urlbar[focused] #identity-box,
#urlbar[focused] #tracking-protection-icon-container,
#urlbar[focused] #reader-mode-button,
#urlbar[focused] #page-action-buttons,
#tracking-protection-icon-container,
#identity-permission-box,
#userContext-indicator,
#pageActionButton {
display: none;
}
#identity-icon-label {
display: none;
}
.urlbarView {
position: fixed !important;
inset: 0px 0px 84px 0px;
width: 100% !important;
background: var(--arrowpanel-background);
margin: 0px !important;
margin-inline: 0px !important;
border-inline: 0px !important;
overflow-y: auto !important;
overflow-x: none !important;
scrollbar-width: none;
}
#PersonalToolbar {
display: none;
}
:root {
--bookmarks-toolbar-overlapping-browser-height: 0 !important;
}
#urlbar,
#searchbar,
#urlbar-input,
#urlbar-input-container,
#urlbar-background {
border-radius: 7px !important;
}
/* Remove items from Unified Extensions Menu */
#unified-extensions-panel .panel-header,
#unified-extensions-panel toolbarseparator,
#unified-extensions-manage-extensions {
display: none !important;
}
/* Adjust button padding and font size for secondary text in Unified Extensions Menu */
#unified-extensions-panel .subviewbutton {
padding: 6px !important;
}
.unified-extensions-item-message {
font-size: 75% !important;
}
/* Fix flickering for Unified Extensions Menu */
#unified-extensions-panel {
--uei-icon-size: 20px;
padding-left: 10px !important;
padding-right: 10px !important;
width: 100vw !important;
}
#unified-extensions-view {
margin-top: 6px !important;
height: 325px !important;
max-height: 325px !important;
width: calc(100vw - 30px) !important;
}
/* Allow extensions to use full popup */
.webextension-popup-browser {
height: 100% !important;
min-height: 100% !important;
width: calc(100vw - 20px) !important;
min-width: calc(100vw - 20px) !important;
}
/* Change Unified Extensions Menu button icon to Home button icon */
#unified-extensions-button {
list-style-image: url("chrome://browser/skin/home.svg") !important;
}
/* Adjust "Saved to Library!" popup notification */
#confirmation-hint {
padding: 10px !important;
width: 100vw !important;
}
/* Adjust "Confirm before closing multiple tabs" popup */
.dialogFrame {
width: 100vw !important;
max-width: 100vw !important;
}
/* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */
#unified-extensions-area {
padding-bottom: 120px !important;
}
/* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */
#appMenu-quit-button2 {
margin-bottom: 64px !important;
}
}
/* Private Browsing Mode theme for URL Bar and Nav Bar */
:root {
--toolbar-field-border-color: var(--arrowpanel-background) !important;
--toolbar-field-focus-border-color: var(--arrowpanel-background) !important;
--lwt-toolbar-field-background-color: var(--arrowpanel-background) !important;
--toolbar-field-background-color: var(--arrowpanel-background) !important;
--toolbar-field-focus-background-color: var(--arrowpanel-background) !important;
}
#nav-bar {
background-image: -moz-linear-gradient(to right, rgb(112,34,145), rgb(57,52,115)) !important;
}
#navigator-toolbox {
--lwt-tabs-border-color: rgb(134,93,180) !important;
}
EOD
###
cat <<-EOD >> single_tab_mode_with_space_for_3_items.css
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Hide unpinned inactive tabs */
.tabbrowser-tab:not([pinned]):not([selected]) {
visibility: hidden !important;
min-width: 0 !important;
}
/* Expand first unpinned tab */
#tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
max-width: 100vw !important;
}
/* Expand unpinned active tab */
.tabbrowser-tab:not([pinned])[selected] {
min-width: calc(100vw - 120px) !important;
}
}
EOD
###
# create the fenix_fox.css
cat <<-EOD >> fenix_fox.css
/* 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 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 */
: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;
}
/* Expand Tab Manager Menu */
#customizationui-widget-multiview panelview {
max-width: calc(100vw - 10px) !important;
width: calc(100vw - 10px) !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 - 18px) !important;
}
.all-tabs-item {
border-radius: 0 !important;
height: calc(var(--urlbar-min-height) * 2.25 ) !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 portrait 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 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 */
: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;
}
}
EOD
###
# create the dynamic_popups.css
cat <<-EOD >> dynamic_popups.css
/* 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;
}
}
EOD
###
echo "hopefully everything is done as it should :) all credits go to user0 !!!! deploy script made be me. njoy life"
exit 0
@magdesign
Copy link
Author

magdesign commented Nov 18, 2023 •
edited

usage:

wget https://gist.githubusercontent.com/magdesign/9d832dbffc2a2311224dd2cc8f3a454c/raw/30ab5b884382d172b722089e60c18d43349d3730/gistfile1.txt
mv gistfile1.txt fenix_firefox.sh
chmod +x fenix_firefox.sh
./fenix_firefox.sh

you might edit these files and lock them:

cat ~/.mozilla/firefox/installs.ini

check the profiles:

cat ~/.mozilla/firefox/profiles.ini

@magdesign
Copy link
Author

magdesign commented Nov 19, 2023 •
edited

all files hosted here:

https://git.datenkastl.org/pmOS-tweaks/fenix-fox/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment