I was just digging into debugging/inspecting the firefox UI and extensions. Still can’t seem to find the popup class.
in example: the appmenu i can inspect and find in the browsers html, but the extensions like ublock do not seem to be in there. I can inspect the extension html but that doesn’t show the outer popup element.
Does anybody know which class the extension popup window has?
i copied that bit in the previous post including the overflow menu.
But i’m not sure if that’s what you mean with ‘using the overflow menu’
Also my ublock menu is more expansive because i’m using the advanced mode:
(screenshot from pc to show the full menu)
on the phone it get to the first red bar and thats about it
The overflow menu is what you can see on my screenshot of my last post. It is a container where you can add all your addons. This way you save space on address bar but also give your addons a new box where they will be opened inside (that’s the real fix against flickering addons). If you still don’t know how to use it, click here.
What you copied about overflow menu is the adjustment for that container box to give addons the maximum of space.
I tested it again, this time with advanced mode. I realized that on first time I open uBlock it needs long time to be loaded. After loading it looks similar to my screenshot above with a lot of free space inside the box. On 2nd time I opened it, it filled the whole horizontal space. The left list with red buttons (advanced mode) will be displayed below. When it would run out of the box (bottom) I could scroll to access everything. So for me it works very well.
If you still have any issues, please share a screenshot from your whole phone screen and how it looks with uBlock. It’s easier to see where’s the issue.
Thanks i’ll look into that overflow menu, and see if that fixes the issue. I don’t remember doing that step so that might be it
Fix the Bookmark Menu popup so that it does not flicker when there are bookmarks with a name longer than the width of the Librem 5 display. The Bookmark Menu Button is the star button that can be added to the toolbar menu, shown in the screenshots at the top of this thread.
Slightly adjusted the spawn height of the Widget Overflow (≫), App Menu (≡), and Tab Menu (v) popups. By spawn height, I mean the space between the bottom of the display and the bottom of a popup.
Moved these sections to the browser.css and alt-browser.css files and removed them from appMenu.css, tabmenu.css, and popups.css.
Unhide the Home menu item in urlbar.css. It can be useful and can easily be removed from the toolbar by the user. I have mine in the Widget Overflow (≫) along with my extensions like uBlock Origin.
New userContent.css files that I had forgotten to add until now. You only need one userContent.css file in order for the userChrome.css file to work, and it can be blank. But it can also be used to theme default pages in the browser, like the Addons page (about:addons) and the Profiles page (about:profiles). I have four userContent.css files: Light, Dark, and two Color variations.
/* 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;
}
/* Adjust Bookmarks Menu Popup spawn height and fix flickering */
#BMB_bookmarksPopup {
margin-bottom: 52px !important;
width: 100vw;
}
/* Adjust Widget Overflow spawn height */
#widget-overflow {
padding-bottom: 60px !important;
}
/* Adjust App Menu Popup spawn height */
#appMenu-popup {
margin-bottom: 56px !important;
}
/* Adjust All-Tabs Popup spawn height */
#customizationui-widget-panel {
margin-bottom: 20px !important;
}
}
/* 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 Bookmarks Menu Popup spawn height and fix flickering */
#BMB_bookmarksPopup {
margin-bottom: 22px !important;
width: 100vw;
}
/* Adjust Widget Overflow spawn height */
#widget-overflow {
padding-bottom: 30px !important;
}
/* Adjust App Menu Popup spawn height */
#appMenu-popup {
margin-bottom: 26px !important;
}
/* Adjust All-Tabs Popup spawn height */
#customizationui-widget-panel {
margin-bottom: 66px !important;
}
}
/* Copyright 2022 Oliver Smith
* SPDX-License-Identifier: MPL-2.0 */
@media (max-width: 700px) {
/* Spawn the menu above the navigation bar (now that we've moved it to the
* bottom). Without this, it still spawns above, but only with a small
* height. This is due to the position="bottomcenter topright" attribute in
* the HTML, which we can't override via CSS. */
#appMenu-popup {
/*margin-top: -390px !important;*/
padding-left: 10px !important;
padding-right: 10px !important;
/*height: 310px;*/
/*max-height: 310px;*/
height: 330px;
max-height: 330px;
}
#appMenu-protonMainView vbox.panel-subview-body {
/*height: 300px !important;*/
/*max-height: 300px !important;*/
height: 318px !important;
max-height: 318px !important;
}
#appMenu-multiView box.panel-viewstack:first-child {
/* Use the whole space in the menu, instead of slowly increasing the
* height via animation. This animation is broken anyway due to the
* above menu size hack */
height: calc(100vh - 100px) !important;
max-height: calc(100vh - 100px) !important;
}
/* Menu content
* - configure it to have most important functions for mobile
* on one page, without scrolling. (Scrolling was only possible with the
* scrollbar on the right anyway, which is awkward when expecting to be
* able to scroll with fingers.)
* - submenus are hidden, because attempting to scroll inside them with the
* finger causes firefox to segfault. This is likely due to the menu
* positioning hack above, looks like FF can't determine the height
* properly. Help with fixing this is appreciated, the bookmarks and
* history submenus would be useful. However even without the submenus,
* the history and saved bookmarks can at least be accessed conveniently
* through the navigation search.
* - fullscreen is hidden: not available in FF for android either, the
* screen is almost used completely already, causes problems with UIs
* that don't expect apps to go fullscreen (i.e. in Phosh, as soon as
* the on screen keyboard is triggered, the top and bottom bars of Phosh
* are over the FF in fullscreen) */
#appMenu-fxa-status2, /* FF login */
#appMenu-fxa-separator, /* FF login */
/*#appMenu-new-window-button2,*/
#appMenu-protonMainView toolbarseparator, /* all separators */
/*#appMenu-save-file-button2, /* Save file can be done from Print too */
#appMenu-fullscreen-button2,
#appMenu-passwords-button, /* accessible from settings */
/*#appMenu-extensions-themes-button, /* accessible from settings */
#appMenu-bookmarks-button, /* submenu */
/*#appMenu-history-button, /* submenu */
/*#appMenu-more-button2, /* submenu */
/*#appMenu-help-button2, /* submenu */
.subviewbutton[shortcut]::after { /* menu shortcuts ("Ctrl+T" etc.) */
display: none !important;
}
}
/* 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;*/
height: 333px;
max-height: 333px;
}
/*#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. */
/*-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 {
/* Use the whole height */
height: calc(100vh - 100px) !important;
max-height: calc(100vh - 100px) !important;
}
#allTabsMenu-allTabsViewTabs {
/* Make sure tabs with long titles don't exceed the all tabs menu */
width: 0;
max-width: calc(100vw - 20px);
/* Fix padding */
padding-top: 2px !important;
}
}
/* 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;
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;
}
/* fix widget overflow to fit ublock0_raymondhill_net-browser-action */
#widget-overflow-mainView {
height: 357px !important;
}
}
/* Copyright 2022 Oliver Smith
* SPDX-License-Identifier: MPL-2.0 */
/* Reduce minimum window width */
#urlbar-container {
min-width: 150px !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;
}
}
/* 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;
}
@-moz-document url("about:addons"),
url("about:blank"),
url("about:config"),
url("about:home"),
url("about:newtab"),
url("about:preferences"),
url("about:privatebrowsing"),
url("about:profiles") {
body {
background-color:rgb(249, 249, 255)!important
}
a,a:visited,a:hover {
color:rgb(249, 249, 255)!important
}
}
@-moz-document url("about:addons"),
url("about:blank"),
url("about:config"),
url("about:home"),
url("about:newtab"),
url("about:preferences"),
url("about:privatebrowsing"),
url("about:profiles") {
body {
background-color:black!important
}
a,a:visited,a:hover {
color:black!important
}
#categories > .category[selected],
#categories > .category.selected {
color: white !important;
}
checkbox:not([disabled="true"]):hover > .checkbox-check,
input[type="checkbox"]:not(:disabled):hover {
border-color: white !important;
}
radio:not([disabled="true"]):hover > .radio-check {
border-color: white !important;
}
.text-link {
color: white !important;
}
.content-blocking-category.selected {
border: 1px solid white !important;
background-color: rgba(255,255,255,0.4) !important;
}
.content-blocking-category {
border: 1px solid var(--in-content-border-color) !important;
background-color: rgba(255,255,255,0.2) !important; /* bkg of default unselected*/
}
.content-blocking-warning {
background-color: rgba(255,255,255,0.3) !important;
}
.checkbox-check{
fill: white !important;
}
.radio-check{
fill: white !important;
}
.addon-card:not([expanded]) > .addon.card:hover {
box-shadow: white !important;
}
.card {
border: 1px solid white !important;
}
:root {
--card-outline-color: white !important;
--in-content-border-color: white !important;
--in-content-border-active: white !important;
--in-content-border-active-shadow: white !important;
--in-content-border-hover: white !important;
--in-content-box-background: black !important;
--in-content-box-background-active: rgba(255,255,255,0.6) !important;
--in-content-box-background-hover: rgba(255,255,255,0.4) !important;
--in-content-box-border-color: white !important;
--in-content-box-info-background: black !important;
--in-content-button-background: rgba(255,255,255,0.5) !important;
--in-content-button-background-active: rgba(255,255,255,0.4) !important;
--in-content-button-background-hover: rgba(255,255,255,0.6) !important;
--in-content-category-background: rgba(255,255,255,0.5) !important;
--in-content-category-background-hover: rgba(255,255,255,0.5) !important;
--in-content-category-background-selected: rgba(255,255,255,0.4) !important;
--in-content-category-background-selected-hover: rgba(255,255,255,0.5) !important;
--in-content-category-text: white !important;
--in-content-category-text-selected: white !important;
--in-content-page-background: black !important;
--in-content-selected-text: white !important;
--in-content-table-background: black !important;
--in-content-table-border-dark-color: white !important;
--in-content-table-header-background: rgba(255,255,255,0.5) !important;
--in-content-text-color: white !important;
--in-content-warning-container: rgba(255,255,255,0.3) !important;
--shadow-10: 0 1px 4px white !important;
--shadow-30: 0 4px 16px white !important;
color: white !important;
}
}
:root {
--card-outline-color: white !important;
--in-content-box-background: black !important;
--in-content-page-background: black !important;
--in-content-text-color: white !important;
--shadow-10: 0 1px 4px white !important;
--shadow-30: 0 4px 16px white !important;
color: white !important;
}
.card {
border: 1px solid white !important;
}
#learnMoreLink {
color: white !important;
}
#errorCode {
color: white !important;
}
#viewCertificate {
color: white !important;
}
#advancedButton {
color: white !important;
background-color: rgba(0,62,170,1) !important;
}
#advancedButton:hover {
color: white !important;
background-color: rgba(0,62,170,0.7) !important;
}
#advancedButton:active {
color: white !important;
background-color: rgba(0,62,170,0.5) !important;
}
#exceptionDialogButton {
color: white !important;
background-color: rgba(0,62,170,1) !important;
}
#exceptionDialogButton:hover {
color: white !important;
background-color: rgba(0,62,170,0.7) !important;
}
#exceptionDialogButton:active {
color: white !important;
background-color: rgba(0,62,170,0.5) !important;
}
@-moz-document url("about:addons"),
url("about:blank"),
url("about:config"),
url("about:home"),
url("about:newtab"),
url("about:preferences"),
url("about:privatebrowsing"),
url("about:profiles") {
:root {
--card-outline-color: #dc8add !important;
--card-shadow: var(--shadow-10);
--card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color);
--checkbox-border-color: var(--in-content-box-border-color);
--checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active);
--checkbox-checked-bgcolor: var(--in-content-primary-button-background);
--checkbox-checked-border-color: transparent;
--checkbox-checked-color: var(--in-content-primary-button-text-color);
--checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover);
--checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active);
--checkbox-unchecked-bgcolor: var(--in-content-button-background);
--checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover);
--dialog-warning-text-color: #dc8add !important;
--in-content-accent-color: #dc8add !important;
--in-content-accent-color-active: #dc8add !important;
--in-content-border-color: #dc8add !important;
--in-content-border-active: #dc8add !important;
--in-content-border-active-shadow: #dc8add !important;
--in-content-border-hover: #dc8add !important;
--in-content-border-invalid: #dc8add !important;
--in-content-box-background: black !important;
--in-content-box-background-active: rgba(220,138,221,0.6) !important;
--in-content-box-background-hover: rgba(220,138,221,0.4) !important;
--in-content-box-background-odd: black !important;
--in-content-box-border-color: #dc8add !important;
--in-content-box-info-background: black !important;
--in-content-button-background: rgba(220,138,221,0.5) !important;
--in-content-button-background-active: rgba(220,138,221,0.4) !important;
--in-content-button-background-hover: rgba(220,138,221,0.6) !important;
--in-content-button-border-color: #dc8add !important;
--in-content-button-border-color-active: #dc8add !important;
--in-content-button-border-color-hover: #dc8add !important;
--in-content-button-text-color: #dc8add !important;
--in-content-button-text-color-active: #dc8add !important;
--in-content-button-text-color-hover: white !important;
--in-content-category-background: rgba(220,138,221,0.5) !important;
--in-content-category-background-hover: rgba(220,138,221,0.5) !important;
--in-content-category-background-selected: rgba(220,138,221,0.4) !important;
--in-content-category-background-selected-hover: rgba(220,138,221,0.5) !important;
--in-content-category-text: #dc8add !important;
--in-content-category-text-selected: #dc8add !important;
--in-content-danger-button-background: #dc8add !important;
--in-content-danger-button-background-active: #dc8add !important;
--in-content-danger-button-background-hover: #dc8add !important;
--in-content-deemphasized-text: #dc8add !important;
--in-content-error-text-color: #dc8add !important;
--in-content-focus-outline-color: #dc8add !important;
--in-content-icon-color: #dc8add !important;
--in-content-item-hover: #dc8add !important;
--in-content-item-hover-text: white !important;
--in-content-item-selected: #dc8add !important;
--in-content-item-selected-text: white !important;
--in-content-link-color: #dc8add !important;
--in-content-link-color-active: #dc8add !important;
--in-content-link-color-hover: #dc8add !important;
--in-content-link-color-visited: #dc8add !important;
--in-content-page-background: black !important;
--in-content-page-color: #dc8add !important;
--in-content-primary-button-background: rgba(220,138,221,0.666) !important;
--in-content-primary-button-background-active: rgba(220,138,221,0.666) !important;
--in-content-primary-button-background-hover: black !important;
--in-content-primary-button-border-color: #dc8add !important;
--in-content-primary-button-border-hover: #dc8add !important;
--in-content-primary-button-text-color: white !important;
--in-content-primary-button-text-color-hover: white !important;
--in-content-selected-text: #dc8add !important;
--in-content-table-background: black !important;
--in-content-table-border-color: #dc8add !important;
--in-content-table-border-dark-color: #dc8add !important;
--in-content-table-header-background: rgba(220,138,221,0.5) !important;
--in-content-table-header-color: #dc8add !important;
--in-content-text-color: #dc8add !important;
--in-content-warning-container: rgba(220,138,221,0.3) !important;
--shadow-10: 0 1px 4px #dc8add !important;
--shadow-30: 0 4px 16px #dc8add !important;
color: #dc8add !important;
}
::selection {
background: #dc8add !important;
color: white !important;
}
#prefs>tr:hover {
background-color: rgba(220,138,221,0.6) !important;
color: #dc8add !important;
}
}
@-moz-document url("about:addons"),
url("about:blank"),
url("about:config"),
url("about:home"),
url("about:newtab"),
url("about:preferences"),
url("about:privatebrowsing"),
url("about:profiles") {
:root {
--card-outline-color: #dc8add !important;
--card-shadow: var(--shadow-10);
--card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color);
--checkbox-border-color: var(--in-content-box-border-color);
--checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active);
--checkbox-checked-bgcolor: var(--in-content-primary-button-background);
--checkbox-checked-border-color: var(--in-content-box-border-color);
--checkbox-checked-color: var(--in-content-primary-button-text-color);
--checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover);
--checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active);
--checkbox-unchecked-bgcolor: var(--in-content-button-background);
--checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover);
--dialog-warning-text-color: #dc8add !important;
--in-content-accent-color: #dc8add !important;
--in-content-accent-color-active: white !important;
--in-content-border-color: #dc8add !important;
--in-content-border-active: #dc8add !important;
--in-content-border-active-shadow: #dc8add !important;
--in-content-border-hover: #dc8add !important;
--in-content-border-invalid: #dc8add !important;
--in-content-box-background: black !important;
--in-content-box-background-active: #dc8add !important;
--in-content-box-background-hover: #dc8add !important;
--in-content-box-background-odd: black !important;
--in-content-box-border-color: #dc8add !important;
--in-content-box-info-background: black !important;
--in-content-button-background: black !important;
--in-content-button-background-active: #dc8add !important;
--in-content-button-background-hover: #dc8add !important;
--in-content-button-border-color: #dc8add !important;
--in-content-button-border-color-active: #dc8add !important;
--in-content-button-border-color-hover: #dc8add !important;
--in-content-button-text-color: #dc8add !important;
--in-content-button-text-color-active: white !important;
--in-content-button-text-color-hover: white !important;
--in-content-category-background: black !important;
--in-content-category-background-hover: #dc8add !important;
--in-content-category-background-selected: #dc8add !important;
--in-content-category-background-selected-hover: #dc8add !important;
--in-content-category-text: white !important;
--in-content-category-text-selected: white !important;
--in-content-danger-button-background: #dc8add !important;
--in-content-danger-button-background-active: #dc8add !important;
--in-content-danger-button-background-hover: #dc8add !important;
--in-content-deemphasized-text: #dc8add !important;
--in-content-error-text-color: #dc8add !important;
--in-content-focus-outline-color: #dc8add !important;
--in-content-icon-color: #dc8add !important;
--in-content-item-hover: #dc8add !important;
--in-content-item-hover-text: white !important;
--in-content-item-selected: #dc8add !important;
--in-content-item-selected-text: white !important;
--in-content-link-color: #dc8add !important;
--in-content-link-color-active: #dc8add !important;
--in-content-link-color-hover: #dc8add !important;
--in-content-link-color-visited: #dc8add !important;
--in-content-page-background: black !important;
--in-content-page-color: #dc8add !important;
--in-content-primary-button-background: #dc8add !important;
--in-content-primary-button-background-active: #dc8add !important;
--in-content-primary-button-background-hover: black !important;
--in-content-primary-button-border-color: #dc8add !important;
--in-content-primary-button-border-hover: #dc8add !important;
--in-content-primary-button-text-color: white !important;
--in-content-primary-button-text-color-hover: white !important;
--in-content-selected-text: white !important;
--in-content-table-background: black !important;
--in-content-table-border-color: #dc8add !important;
--in-content-table-border-dark-color: #dc8add !important;
--in-content-table-header-background: black !important;
--in-content-table-header-color: #dc8add !important;
--in-content-text-color: #dc8add !important;
--in-content-warning-container: black !important;
--shadow-10: 0 1px 4px #dc8add !important;
--shadow-30: 0 4px 16px #dc8add !important;
color: #dc8add !important;
}
::selection {
background: #dc8add !important;
color: white !important;
}
#prefs>tr:hover {
background-color: #dc8add !important;
color: white !important;
}
}
Firefox-ESR will update from version 102 to version 115 very soon. Some of the code from the CSS files in this thread may need to be updated when that happens. As with all major Firefox-ESR updates, I will test my CSS files and work to fix any code that needs fixing. Whether I will need to fix anything or not, I do not yet know.
I recommend reading the arkenfox wiki if you have not yet done so and consider adding the arkenfox user.js file to your Firefox-ESR profile.
Direct link to plaintext arkenfox user.js for Firefox 115 (soon-to-be latest ESR)
My previous comment linked to the arkenfox user.js version 115.0 for Firefox 115.
This new url here is to the updated arkenfox user.js version 115.1 for Firefox-ESR 115:
Direct link to plaintext arkenfox user.js for Firefox-ESR 115 (latest ESR)
New CSS files:
true_mobile_mode.csshide_tab_counter.cssglow.csscolorful_inactive_tabs.csstab_animated_active_border.cssborderless_transparent_active_tab.cssUpdated CSS files:
browser.csstabmenu.cssurlbar.cssalt-browser.csscustom_rules.csssingle_tab_mode.csssingle_tab_mode_with_space_for_1_item.csssingle_tab_mode_with_space_for_2_items.cssnumbered_tabs.csstab_counter.cssmobile-config-firefox by postmarketOS and edited by me:
/* Copyright 2022 Oliver Smith
* SPDX-License-Identifier: MPL-2.0 */
@media (max-width: 700px) {
/* Spawn the menu above the navigation bar (now that we've moved it to the
* bottom). Without this, it still spawns above, but only with a small
* height. This is due to the position="bottomcenter topright" attribute in
* the HTML, which we can't override via CSS. */
#appMenu-popup {
/*margin-top: -390px !important;*/
padding-left: 10px !important;
padding-right: 10px !important;
/*height: 310px;*/
/*max-height: 310px;*/
height: 330px;
max-height: 330px;
}
#appMenu-protonMainView vbox.panel-subview-body {
/*height: 300px !important;*/
/*max-height: 300px !important;*/
height: 318px !important;
max-height: 318px !important;
}
#appMenu-multiView box.panel-viewstack:first-child {
/* Use the whole space in the menu, instead of slowly increasing the
* height via animation. This animation is broken anyway due to the
* above menu size hack */
height: calc(100vh - 100px) !important;
max-height: calc(100vh - 100px) !important;
}
/* Menu content
* - configure it to have most important functions for mobile
* on one page, without scrolling. (Scrolling was only possible with the
* scrollbar on the right anyway, which is awkward when expecting to be
* able to scroll with fingers.)
* - submenus are hidden, because attempting to scroll inside them with the
* finger causes firefox to segfault. This is likely due to the menu
* positioning hack above, looks like FF can't determine the height
* properly. Help with fixing this is appreciated, the bookmarks and
* history submenus would be useful. However even without the submenus,
* the history and saved bookmarks can at least be accessed conveniently
* through the navigation search.
* - fullscreen is hidden: not available in FF for android either, the
* screen is almost used completely already, causes problems with UIs
* that don't expect apps to go fullscreen (i.e. in Phosh, as soon as
* the on screen keyboard is triggered, the top and bottom bars of Phosh
* are over the FF in fullscreen) */
#appMenu-fxa-status2, /* FF login */
#appMenu-fxa-separator, /* FF login */
/*#appMenu-new-window-button2,*/
#appMenu-protonMainView toolbarseparator, /* all separators */
/*#appMenu-save-file-button2, /* Save file can be done from Print too */
#appMenu-fullscreen-button2,
#appMenu-passwords-button, /* accessible from settings */
/*#appMenu-extensions-themes-button, /* accessible from settings */
#appMenu-bookmarks-button, /* submenu */
/*#appMenu-history-button, /* submenu */
/*#appMenu-more-button2, /* submenu */
/*#appMenu-help-button2, /* submenu */
.subviewbutton[shortcut]::after { /* menu shortcuts ("Ctrl+T" etc.) */
display: none !important;
}
}
/* 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;
}
/* Adjust Bookmarks Menu (★) spawn height and fix flickering */
#BMB_bookmarksPopup {
margin-bottom: 52px !important;
width: 100vw;
}
/* Adjust Unified Extensions Menu spawn height */
#unified-extensions-view {
margin-top: -44px !important;
margin-bottom: -44px !important;
}
/* Adjust Widget Overflow Menu (≫) spawn height */
#widget-overflow {
padding-bottom: 60px !important;
}
/* Adjust Main App Menu (≡) spawn height */
#appMenu-popup {
margin-bottom: 56px !important;
}
/* Adjust Tab Manager Menu spawn height */
#customizationui-widget-panel {
margin-bottom: 20px !important;
}
}
/* 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);
}
#editBookmarkPanel box.panel-header,
#editBookmarkHeaderSeparator {
display: none !important;
}
#editBookmarkPanelContent {
max-width: 250px !important;
width: 250px !important;
padding-right: 20px;
}
/* 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;
}
}
/* 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;
}
}
/* 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;
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;
}
#unified-extensions-view {
width: calc(100vw - 10px) !important;
}
/* fix widget overflow to fit ublock0_raymondhill_net-browser-action */
#widget-overflow-mainView {
height: 357px !important;
}
}
/* Copyright 2022 Oliver Smith
* SPDX-License-Identifier: MPL-2.0 */
/* Reduce minimum window width */
:root {
min-width: 300px !important;
}
/* 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;*/
height: 333px;
max-height: 333px;
}
/*#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: 333px !important;
max-height: 333px !important;
}
#allTabsMenu-allTabsViewTabs, /* before FF 106 */
#allTabsMenu-allTabsView-tabs { /* since FF 106 */
/* Make sure tabs with long titles don't exceed the all tabs menu */
/*max-width: calc(100vw - 20px);*/
max-width: calc(100vw - 30px);
/* Fix padding */
padding-top: 2px !important;
}
}
/* 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;
}
my altered version of the browser.css file that moves the tabs to the bottom:
/* Copyright 2022 plata
* SPDX-License-Identifier: MPL-2.0 */
@media (max-width: 700px) {
/* Move navigation bar to bottom */
#browser {
-moz-box-ordinal-group: 0 !important; /* before FF 113 */
order: -1 !important; /* since FF 113 */
}
/* Hide navigation bar in kiosk mode (to prevent bug #29). We can assume FF
* is in kiosk mode when fullscreen and max-width conditions are met,
* because at this max-width the fullscreen button is hidden
* (see appMenu.css). */
#nav-bar[inFullscreen],
#TabsToolbar[inFullscreen] {
display: none;
}
/* Hide minimize/maximize/close buttons */
.titlebar-buttonbox-container {
display: none;
}
/* https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/toolbars_below_content.css */
#TabsToolbar > .titlebar-buttonbox-container {
display: none;
}
/* Fix panels sizing */
.panel-viewstack {
max-height: unset !important;
}
/* Tabs below */
#titlebar {
-moz-box-ordinal-group: 2; /* Fx <112 compatibility */
order: 2;
}
/* Adjust Bookmarks Menu (★) spawn height and fix flickering */
#BMB_bookmarksPopup {
margin-bottom: 22px !important;
width: 100vw;
}
/* Adjust Unified Extensions Menu spawn height */
#unified-extensions-view {
margin-top: -44px !important;
margin-bottom: -44px !important;
}
/* Adjust Widget Overflow Menu (≫) spawn height */
#widget-overflow {
padding-bottom: 30px !important;
}
/* Adjust Main App Menu (≡) spawn height */
#appMenu-popup {
margin-bottom: 26px !important;
}
/* Adjust Tab Manager Menu spawn height */
#customizationui-widget-panel {
margin-bottom: 66px !important;
}
}
some code by MrOtherGuy:
/* 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;
}
/* 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;
}
/* 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-fxa-status2[fxastatus] > toolbarbutton::before,
#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image {
fill: currentColor;
-moz-context-properties: fill;
margin-inline: 0 8px !important;
}
#appMenu-new-tab-button2 {
list-style-image: url("chrome://browser/skin/new-tab.svg");
}
#appMenu-new-window-button2 {
list-style-image: url("chrome://browser/skin/window.svg");
}
#appMenu-new-private-window-button2 {
list-style-image: url("chrome://browser/skin/privateBrowsing.svg");
}
#appMenu-bookmarks-button {
list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
}
#appMenu-history-button {
list-style-image: url("chrome://browser/skin/history.svg");
}
#appMenu-downloads-button {
list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
}
#appMenu-passwords-button {
list-style-image: url("chrome://browser/skin/login.svg");
}
#appMenu-extensions-themes-button {
list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
}
#appMenu-print-button2 {
list-style-image: url("chrome://global/skin/icons/print.svg");
}
#appMenu-save-file-button2 {
list-style-image: url("chrome://browser/skin/save.svg");
}
#appMenu-find-button2 {
list-style-image: url("chrome://global/skin/icons/search-glass.svg");
}
#appMenu-settings-button {
list-style-image: url("chrome://global/skin/icons/settings.svg");
}
#appMenu-more-button2 {
list-style-image: url("chrome://global/skin/icons/developer.svg");
}
#appMenu-help-button2 {
list-style-image: url("chrome://global/skin/icons/info.svg");
}
#appMenu-quit-button2 {
list-style-image: url("chrome://devtools/skin/images/search-clear.svg");
}
/* Use account-button icon for signed in sync item */
#appMenu-fxa-status2[fxastatus] > toolbarbutton::before {
display: flex;
content: "";
width: 16px;
height: 16px;
background-image: var(--avatar-image-url);
}
/* Add somewhat hacky separator to zoom controls so it looks consistent */
#appMenu-protonMainView > .panel-subview-body::after {
content: "";
display: flex;
border-bottom: 1px solid var(--panel-separator-color);
margin: var(--panel-separator-margin);
}
#appMenu-find-button2 ~ * {
-moz-box-ordinal-group: 2; /* Fx < 112 compatibility */
order: 2;
}
/* 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;
}
}
some code by MrOtherGuy and edited by me:
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/color_variable_template.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* You should enable any non-default theme for these to apply properly. Built-in dark and light themes should work */
:root {
/* Popup panels */
--arrowpanel-background: black !important;
--arrowpanel-border-color: #dc8add !important;
--arrowpanel-color: #dc8add !important;
--arrowpanel-dimmed: rgba(220,138,221,0.6) !important;
--arrowpanel-dimmed-further: rgba(220,138,221,0.3) !important;
/*
--panel-background: black !important;
--panel-border-color: #dc8add !important;
--panel-color: white !important;
--panel-separator-color: #dc8add !important;
*/
--panel-item-hover-bgcolor: rgba(220,138,221,0.5) !important;
--panel-item-active-bgcolor: #dc8add !important;
--panel-banner-item-background-color: #dc8add !important;
--panel-banner-item-hover-bgcolor: #dc8add !important;
--panel-banner-item-active-bgcolor: #dc8add !important;
--panel-banner-item-update-supported-bgcolor: #dc8add !important;
--panel-banner-item-info-icon-bgcolor: #dc8add !important;
--panel-banner-item-color: #dc8add !important;
--panel-description-color: #dc8add !important;
--panel-disabled-color: rgba(220,138,221,0.6) !important;
--uc-menu-bkgnd: transparent !important;
--uc-menu-color: #dc8add !important;
--uc-menu-dimmed: #dc8add !important;
--uc-menu-disabled: #dc8add !important;
--menuitem-disabled-hover-background-color: #dc8add !important;
/* window and toolbar background */
--lwt-accent-color: #dc8add !important;
--lwt-accent-color-inactive: #e8b1e8 !important;
--toolbar-non-lwt-bgcolor: black !important;
--toolbar-non-lwt-textcolor: #dc8add !important;
--toolbar-bgcolor: black !important;
--toolbar-color: #dc8add !important;
--tabpanel-background-color: black !important;
/* tabs with system theme - text is not controlled by variable */
--tab-selected-bgcolor: #dc8add !important;
/* tabs with any other theme */
--lwt-text-color: white !important;
--lwt-selected-tab-background-color: #dc8add !important;
/* toolbar area */
/*
--toolbarbutton-icon-fill: #dc8add !important;
*/
--toolbarbutton-icon-fill-attention: white !important;
--toolbarbutton-hover-background: #dc8add !important;
--toolbarbutton-active-background: #dc8add !important;
--lwt-toolbarbutton-icon-fill-attention: white !important;
--lwt-toolbarbutton-hover-background: #dc8add !important;
--lwt-toolbarbutton-active-background: #dc8add !important;
--toolbarseparator-color: black !important;
/* urlbar */
--toolbar-field-border-color: #dc8add !important;
--toolbar-field-focus-border-color: #dc8add !important;
--urlbar-popup-url-color: white !important;
/*
--urlbar-box-bgcolor: var(--button-bgcolor);
--urlbar-box-focus-bgcolor: var(--button-bgcolor);
--urlbar-box-hover-bgcolor: var(--button-hover-bgcolor);
--urlbar-box-active-bgcolor: var(--button-active-bgcolor);
--urlbar-box-text-color: inherit;
--urlbar-box-hover-text-color: var(--urlbar-box-text-color);
--lwt-brighttext-url-color: #00ddff;
*/
/* urlbar Firefox < 92 */
--lwt-toolbar-field-background-color: #dc8add !important;
--lwt-toolbar-field-focus: white !important;
--lwt-toolbar-field-color: white !important;
--lwt-toolbar-field-focus-color: white !important;
/* urlbar Firefox 92+ */
--toolbar-field-background-color: #dc8add !important;
--toolbar-field-focus-background-color: #dc8add !important;
--toolbar-field-icon-fill-attention: #dc8add !important;
--toolbar-field-color: white !important;
--toolbar-field-focus-color: white !important;
/* sidebar - note the sidebar-box rule for the header-area */
--lwt-sidebar-background-color: black !important;
--lwt-sidebar-text-color: black !important;
/* findbar */
--focus-outline-color: #dc8add !important;
--input-border-color: #dc8add !important;
/* buttons and checkboxes */
/*
--button-bgcolor: black !important;
--button-color: white !important;
--button-hover-bgcolor: #dc8add !important;
--button-active-bgcolor: #dc8add !important;
*/
--button-primary-bgcolor: #dc8add !important;
--button-primary-hover-bgcolor: #dc8add !important;
--button-primary-active-bgcolor: #dc8add !important;
--button-primary-color: white !important;
--in-content-primary-button-background: #dc8add !important;
--in-content-primary-button-background-hover: #dc8add !important;
--in-content-primary-button-background-active: #dc8add !important;
/*
--buttons-destructive-bgcolor: #e22850;
--buttons-destructive-hover-bgcolor: #c50042;
--buttons-destructive-active-bgcolor: #810220;
--buttons-destructive-color: #fbfbfe;
*/
--checkbox-unchecked-bgcolor: black !important;
--checkbox-unchecked-hover-bgcolor: black !important;
--checkbox-unchecked-active-bgcolor: black !important;
--checkbox-checked-border-color: transparent !important;
--checkbox-checked-bgcolor: #dc8add !important;
--checkbox-checked-color: white !important;
--checkbox-checked-hover-bgcolor: rgba(220,138,221,0.9) !important;
--checkbox-checked-active-bgcolor: rgba(220,138,221,0.9) !important;
--uc-checkbox-checked-bgcolor: #dc8add !important;
/* icon glow */
--uc-icon-glow-primary: #dc8add;
--uc-icon-glow-secondary: white;
--uc-icon-glow-hover-primary: #dc8add;
--uc-icon-glow-hover-secondary: white;
}
/* line between nav-bar and tabs toolbar,
also fallback color for border around selected tab */
#navigator-toolbox {
--lwt-tabs-border-color: none !important;
}
/* Line above tabs */
#tabbrowser-tabs {
--lwt-tab-line-color: none !important;
}
/* the header-area of sidebar needs this to work */
#sidebar-box {
--sidebar-background-color: black !important;
}
/* (context_menus_more_proton.css) */
/* OPTIONAL Set custom context menu colors below */
menupopup:not(.in-menulist) {
--panel-background: black !important;
--panel-color: white !important;
--panel-separator-color: #dc8add !important;
--panel-border-color: #dc8add !important;
}
menupopup > menuseparator {
border-color: var(--panel-separator-color,ThreeDShadow) !important;
}
menupopup {
--panel-item-hover-bgcolor: var(--button-hover-bgcolor) !important;
}
menupopup > menuitem,
menupopup > menu {
appearance: none !important;
background-color: transparent !important;
}
#context-navigation > menuitem[_moz-menuactive]:not([disabled]) .menu-iconic-icon,
menupopup > menuitem[_moz-menuactive],
menupopup > menu[_moz-menuactive] {
background-color: var(--panel-border-color) !important;
color: var(--panel-color,inherit) !important;
}
menupopup > menuitem[disabled][_moz-menuactive],
menupopup > menu[disabled][_moz-menuactive] {
background-color: var(--menuitem-disabled-hover-background-color) !important;
}
/* (dark_context_menus.css) */
panel richlistbox,
panel tree,
panel button,
panel menulist,
panel textbox,
panel input,
menupopup,
menu,
menuitem {
-moz-appearance: none !important;
}
panel menulist {
border: 1px solid transparent;
}
panel richlistbox,
panel tree,
panel button,
panel menulist,
panel textbox,
panel input,
panel #searchbar,
menupopup:not(#BMB_bookmarksPopup),
#main-menubar > menu > menupopup,
#context-navigation {
color: var(--uc-menu-color) !important;
background-color: var(--uc-menu-bkgnd) !important;
border-color: var(--uc-menu-disabled) !important;
}
panel input {
background-color: rgba(0,0,0,0.1) !important;
}
panel #searchbar {
background-color: rgba(0,0,0,0.1) !important;
padding: 0 !important;
}
panel #searchbar input {
background-color: transparent !important;
}
panel menulist:hover,
panel menulist[open] {
border-color: Highlight !important;
}
#editBMPanel_folderMenuList > menupopup > menuitem {
color: var(--uc-menu-color) !important;
}
panel treechildren::-moz-tree-row(selected),
panel button:hover,
menu:hover,
menu[_moz-menuactive],
menuitem:hover,
menuitem[_moz-menuactive] {
background-color: var(--uc-menu-dimmed) !important; color: var(--lwt-text-color) !important;
}
menu[open] {
background-color: transparent !important; color: inherit !important;
}
menu[disabled="true"],
menuitem[disabled="true"] {
color: var(--uc-menu-disabled) !important;
}
menu[disabled="true"]:hover,
menuitem[disabled="true"]:hover {
color: var(--lwt-text-color) !important;
}
/* 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;
}
/* Urlbar and searchbar shape */
#urlbar,
#searchbar,
#urlbar-input,
#urlbar-input-container {
border-radius: 12px !important;
}
#urlbar-background {
border: none !important;
border-radius: 12px !important;
}
/* Findbar shape */
input.findbar-textbox {
border-radius: 9px !important;
font-size: 14px !important;
}
/* 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) {
/* Show a number before tab text */
/* Actually, let's show the tab number after tab content, right-align it,
and fix its position directly on the tab close button */
#tabbrowser-tabs {
counter-reset: nth-tab 0; /* Change to -1 for 0-indexing */
}
.tabbrowser-tab .tab-content::after {
content: counter(nth-tab) " ";
counter-increment: nth-tab;
position: absolute !important;
position: fixed;
right: 24px;
top: 12px;
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;
}
}
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_animated_active_border.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Creates a colorful animated border around active tab */
@keyframes filter {
from {
filter: hue-rotate(0deg)
}
to {
filter: hue-rotate(360deg)
}
}
.tabbrowser-tab[selected] > .tab-stack::before {
grid-area: 1/1;
content: "";
display: inherit;
margin-block: var(--tab-block-margin);
border-radius: var(--tab-border-radius);
z-index: 0;
background-image: conic-gradient(
hsl(0 100% 70%),
hsl(60 100% 45%) 70deg,
hsl(120 100% 55%) 105deg,
hsl(160 100% 60%) 160deg,
hsl(200 100% 60%) 200deg,
hsl(240 100% 65%) 255deg,
hsl(300 100% 60%) 290deg,
hsl(360 100% 70%) 360deg);
background-size: cover;
background-position: center;
animation: filter steps(30) 2s infinite;
}
.tab-background[selected] {
border: 1px solid transparent !important;
outline: none !important;
background-clip: padding-box !important;
}
some code by reddit users /u/BatDogOnBatMobile, /u/moko1960, and /u/It_Was_The_Other_Guy and edited by me:
/* Source from reddit users /u/BatDogOnBatMobile, /u/moko1960, and /u/It_Was_The_Other_Guy
https://teddit.net/r/FirefoxCSS/comments/s4wsww/
https://teddit.net/r/FirefoxCSS/comments/yb8tr9/ */
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Show Tab Manager button even when tabs aren't overflowing -
can instead use browser.tabs.tabmanager.enabled;true as well
or skip this part if you want to retain the default behaviour */
#alltabs-button {
display: -moz-box !important;
}
/* Tab Manager button tab counter */
#TabsToolbar-customization-target {
counter-reset: tabCount;
}
.tabbrowser-tab {
counter-increment: tabCount;
}
#alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon {
visibility: collapse !important;
}
#alltabs-button > .toolbarbutton-badge-stack {
position: relative !important;
}
#alltabs-button > .toolbarbutton-badge-stack::before {
content: counter(tabCount);
border-bottom: 1px solid var(--toolbarbutton-icon-fill);
color: var(--toolbarbutton-icon-fill);
opacity: var(--toolbarbutton-icon-fill-opacity);
position: absolute;
bottom: var(--toolbarbutton-inner-padding);
left: 50%;
transform: translateX(-50%);
padding: 0 3px;
}
/* Tab Manager menu tab counter */
#allTabsMenu-allTabsViewTabs, /* before FF 106 */
#allTabsMenu-allTabsView-tabs { /* since FF 106 */
counter-reset: nn_tabs 0 !important;
}
.all-tabs-button::before {
display: -moz-inline-box !important;
-moz-padding-end: 8px !important;
content: counter(nn_tabs) !important;
/*font-weight: bold !important; */
font-size: 12px !important;
margin-top: -2px !important;
margin-right: -2px !important;
}
.all-tabs-item {
counter-increment: nn_tabs !important;
}
}
some code by me:
/* 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;
}
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* 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 urlbar */
#tracking-protection-icon-container,
#identity-permission-box,
#userContext-indicator,
/*#page-action-buttons,*/
#pageActionButton {
display: none !important;
}
/* Urlbar font resizing */
#urlbar-input {
font-size: 10pt !important;
}
#urlbar[focused] #urlbar-input {
font-size: calc(var(--urlbar-height) - 9px) !important;
}
/* Hide Inactive tab close button (x)
to prevent accidentally closing tabs when selecting them */
.tab-close-button:not([selected]),
.tabbrowser-tab:not([selected]):hover .tab-close-button {
visibility: hidden !important;
}
/* Disable tab loading burst
(because it's annoying) */
.tab-loading-burst {
display: none !important;
}
/* Tabs Toolbar and Container tab line color
(hides container tab line above tab by making it the same color as the Tabs Toolbar) */
#TabsToolbar,
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
background-color: var(--tab-bgcolor) !important;
}
/* Menubar color
(hides the line at the top of the screen when Menubar is hidden) */
toolbar[type=menubar] {
background-color: black !important;
color: var(--toolbar-color) !important;
}
/* Navbar bottom border color */
#navigator-toolbox {
border-bottom-color: black !important;
}
}
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/******************************************/
/* IMPORTANT: */
/* */
/* This will move the Tab Manager button */
/* to the right side of the URL Bar. */
/* */
/* Move the Unified Extensions button */
/* to the left side of the URL Bar */
/* using the "Customize Toolbar" feature, */
/* or use a user.js file in your profile. */
/******************************************/
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Hide Tabbar */
#tabbrowser-tabs {
visibility: collapse !important;
}
/* Reduce urlbar width */
#urlbar {
width: calc(100vw - 166px) !important;
}
/* Adjust Tab Manager Menu spawn height */
#customizationui-widget-panel {
margin-bottom: 26px !important;
}
/* Move Tab Manager button to right of urlbar */
:root {
--tab-border-radius: var(--toolbarbutton-border-radius) !important;
}
#alltabs-button > .toolbarbutton-badge-stack {
height: 32px;
width: 32px;
}
#alltabs-button {
position: absolute;
bottom: 4.5px;
right: 41.5px;
z-index: 1 !important;
}
}
/* 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;
}
}
/* 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;
}
}
/* 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;
}
}
/* 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;
}
}
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Remove Tab Manager button */
#alltabs-button {
display: none !important;
}
}
/* 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;
}
}
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Tab min-width resizing */
#tabbrowser-tabs {
--tab-min-width: 24vw !important;
}
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Inactive tab glow on hover */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected]) {
filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
}
/* Newtab buttons (+) and Tab Manager button glow on hover */
#alltabs-button:hover > .toolbarbutton-badge-stack,
#new-tab-button:hover,
#tabs-newtab-button:hover {
filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
}
/* Back button glow on hover */
#back-button:not([disabled]):hover > .toolbarbutton-icon {
filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
}
/* Forward button glow on hover */
#forward-button:not([disabled]):hover > .toolbarbutton-icon {
filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
}
/* Urlbar glow */
#urlbar {
filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
}
/* Urlbar glow on focus */
#urlbar[focused] {
filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
box-shadow: 0 0 3px var(--uc-icon-glow-secondary) !important;
}
/* Urlbar glow on hover */
#urlbar:hover {
filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
box-shadow: 0 0 3px var(--uc-icon-glow-secondary) !important;
}
/* Navbar buttons glow */
#nav-bar toolbarbutton:hover:not(#back-button):not(#forward-button) {
filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
}
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Inactive tab color */
.tabbrowser-tab:not(:hover,[pinned], [selected]) > .tab-stack > .tab-background {
background-color: var(--lwt-selected-tab-background-color) !important;
}
/* Inactive tab color on hover */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected]) {
background-color: var(--lwt-accent-color-inactive) !important;
}
/* Inactive pinned tab icon color */
.tab-icon-image[pinned]:not([selected]) {
color: var(--lwt-accent-color) !important;
}
/* Inactive tab text and close button (x) color */
.tab-text:not([pinned]):not([selected]),
.tab-icon-image:not([pinned]):not([selected]),
.tab-close-button:not([pinned]):not([selected]) {
color: var(--lwt-text-color) !important;
}
/* Inactive tab text and close button (x) color on hover */
.tabbrowser-tab:not([selected]):hover .tab-text,
.tabbrowser-tab:not([selected]):hover .tab-icon-image,
.tabbrowser-tab:not([selected]):hover .tab-close-button {
color: var(--lwt-accent-color) !important;
}
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Tab color */
.tab-background {
background-color: transparent !important;
}
/* Tab border */
.tab-background[selected] {
border: 0 transparent !important;
}
New CSS file:
true_mobile_mode.cssUpdated CSS files:
single_tab_mode.csssingle_tab_mode_with_space_for_1_item.csssingle_tab_mode_with_space_for_2_items.cssnumbered_tabs.csstrue_mobile_mode.css).After creating the CSS files listed above, choose one of the userChrome.css files below or make your own variation:
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Source files available here:
https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip
https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/
https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313
*/
/*
@import "color_variable_template.css";
@import "colors.css";
*/
@import "appMenu.css";
@import "browser.css";
@import "editBookmarkPanel.css";
@import "findbar.css";
@import "popups.css";
@import "root.css";
@import "tabmenu.css";
@import "urlbar.css";
@import "alt-browser.css";
@import "custom_rules.css";
@import "hide_tabs_scrollbuttons.css";
@import "tab_close_button_always_on_hover.css";
@import "iconized_main_menu.css";
/*
@import "round_ui_items.css";
@import "true_mobile_mode.css";
@import "single_tab_mode.css";
@import "single_tab_mode_with_space_for_1_item.css";
@import "single_tab_mode_with_space_for_2_items.css";
@import "hide_newtab_+_new-tab_buttons.css";
@import "numbered_tabs.css";
@import "tab_counter.css";
*/
@import "hide_tab_counter.css";
@import "new-tab-button.css";
@import "tabs_larger_min-width.css";
@import "tabs_fill_available_width.css";
/*
@import "glow.css";
@import "colorful_inactive_tabs.css";
@import "tab_animated_active_border.css";
@import "borderless_transparent_active_tab.css";
*/
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Source files available here:
https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip
https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/
https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313
*/
/*
@import "color_variable_template.css";
@import "colors.css";
*/
@import "appMenu.css";
@import "browser.css";
@import "editBookmarkPanel.css";
@import "findbar.css";
@import "popups.css";
@import "root.css";
@import "tabmenu.css";
@import "urlbar.css";
@import "alt-browser.css";
@import "custom_rules.css";
@import "hide_tabs_scrollbuttons.css";
@import "tab_close_button_always_on_hover.css";
@import "iconized_main_menu.css";
@import "round_ui_items.css";
/*
@import "true_mobile_mode.css";
@import "single_tab_mode.css";
@import "single_tab_mode_with_space_for_1_item.css";
@import "single_tab_mode_with_space_for_2_items.css";
*/
@import "hide_newtab_+_new-tab_buttons.css";
/*
@import "numbered_tabs.css";
*/
@import "tab_counter.css";
/*
@import "hide_tab_counter.css";
@import "new-tab-button.css";
*/
@import "tabs_larger_min-width.css";
@import "tabs_fill_available_width.css";
/*
@import "glow.css";
@import "colorful_inactive_tabs.css";
@import "tab_animated_active_border.css";
@import "borderless_transparent_active_tab.css";
*/
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Source files available here:
https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip
https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/
https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313
*/
/*
@import "color_variable_template.css";
@import "colors.css";
*/
@import "appMenu.css";
@import "browser.css";
@import "editBookmarkPanel.css";
@import "findbar.css";
@import "popups.css";
@import "root.css";
@import "tabmenu.css";
@import "urlbar.css";
@import "alt-browser.css";
@import "custom_rules.css";
@import "hide_tabs_scrollbuttons.css";
@import "tab_close_button_always_on_hover.css";
@import "iconized_main_menu.css";
@import "round_ui_items.css";
/*
@import "true_mobile_mode.css";
@import "single_tab_mode.css";
*/
@import "single_tab_mode_with_space_for_1_item.css";
/*
@import "single_tab_mode_with_space_for_2_items.css";
*/
@import "hide_newtab_+_new-tab_buttons.css";
@import "numbered_tabs.css";
@import "tab_counter.css";
/*
@import "hide_tab_counter.css";
@import "new-tab-button.css";
@import "tabs_larger_min-width.css";
@import "tabs_fill_available_width.css";
@import "glow.css";
@import "colorful_inactive_tabs.css";
@import "tab_animated_active_border.css";
@import "borderless_transparent_active_tab.css";
*/
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Source files available here:
https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip
https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/
https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313
*/
@import "color_variable_template.css";
@import "colors.css";
@import "appMenu.css";
@import "browser.css";
@import "editBookmarkPanel.css";
@import "findbar.css";
@import "popups.css";
@import "root.css";
@import "tabmenu.css";
@import "urlbar.css";
@import "alt-browser.css";
@import "custom_rules.css";
@import "hide_tabs_scrollbuttons.css";
@import "tab_close_button_always_on_hover.css";
@import "iconized_main_menu.css";
@import "round_ui_items.css";
/*
@import "true_mobile_mode.css";
@import "single_tab_mode.css";
*/
@import "single_tab_mode_with_space_for_1_item.css";
/*
@import "single_tab_mode_with_space_for_2_items.css";
*/
@import "hide_newtab_+_new-tab_buttons.css";
@import "numbered_tabs.css";
@import "tab_counter.css";
/*
@import "hide_tab_counter.css";
@import "new-tab-button.css";
@import "tabs_larger_min-width.css";
@import "tabs_fill_available_width.css";
*/
@import "glow.css";
@import "colorful_inactive_tabs.css";
@import "tab_animated_active_border.css";
@import "borderless_transparent_active_tab.css";
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Source files available here:
https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip
https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/
https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313
*/
/*
@import "color_variable_template.css";
@import "colors.css";
*/
@import "appMenu.css";
@import "browser.css";
@import "editBookmarkPanel.css";
@import "findbar.css";
@import "popups.css";
@import "root.css";
@import "tabmenu.css";
@import "urlbar.css";
@import "alt-browser.css";
@import "custom_rules.css";
@import "hide_tabs_scrollbuttons.css";
@import "tab_close_button_always_on_hover.css";
@import "iconized_main_menu.css";
@import "round_ui_items.css";
@import "true_mobile_mode.css";
/*
@import "single_tab_mode.css";
@import "single_tab_mode_with_space_for_1_item.css";
@import "single_tab_mode_with_space_for_2_items.css";
@import "hide_newtab_+_new-tab_buttons.css";
@import "numbered_tabs.css";
*/
@import "tab_counter.css";
/*
@import "hide_tab_counter.css";
@import "new-tab-button.css";
@import "tabs_larger_min-width.css";
@import "tabs_fill_available_width.css";
@import "glow.css";
@import "colorful_inactive_tabs.css";
@import "tab_animated_active_border.css";
@import "borderless_transparent_active_tab.css";
*/
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Source files available here:
https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip
https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/
https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313
*/
@import "color_variable_template.css";
@import "colors.css";
@import "appMenu.css";
@import "browser.css";
@import "editBookmarkPanel.css";
@import "findbar.css";
@import "popups.css";
@import "root.css";
@import "tabmenu.css";
@import "urlbar.css";
@import "alt-browser.css";
@import "custom_rules.css";
@import "hide_tabs_scrollbuttons.css";
@import "tab_close_button_always_on_hover.css";
@import "iconized_main_menu.css";
@import "round_ui_items.css";
@import "true_mobile_mode.css";
/*
@import "single_tab_mode.css";
@import "single_tab_mode_with_space_for_1_item.css";
@import "single_tab_mode_with_space_for_2_items.css";
@import "hide_newtab_+_new-tab_buttons.css";
@import "numbered_tabs.css";
*/
@import "tab_counter.css";
/*
@import "hide_tab_counter.css";
@import "new-tab-button.css";
@import "tabs_larger_min-width.css";
@import "tabs_fill_available_width.css";
@import "glow.css";
@import "colorful_inactive_tabs.css";
@import "tab_animated_active_border.css";
@import "borderless_transparent_active_tab.css";
*/
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Source files available here:
https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip
https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/
https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313
*/
@import "color_variable_template.css";
@import "colors.css";
@import "appMenu.css";
@import "browser.css";
@import "editBookmarkPanel.css";
@import "findbar.css";
@import "popups.css";
@import "root.css";
@import "tabmenu.css";
@import "urlbar.css";
@import "alt-browser.css";
@import "custom_rules.css";
@import "hide_tabs_scrollbuttons.css";
@import "tab_close_button_always_on_hover.css";
@import "iconized_main_menu.css";
@import "round_ui_items.css";
@import "true_mobile_mode.css";
/*
@import "single_tab_mode.css";
@import "single_tab_mode_with_space_for_1_item.css";
@import "single_tab_mode_with_space_for_2_items.css";
@import "hide_newtab_+_new-tab_buttons.css";
@import "numbered_tabs.css";
*/
@import "tab_counter.css";
/*
@import "hide_tab_counter.css";
@import "new-tab-button.css";
@import "tabs_larger_min-width.css";
@import "tabs_fill_available_width.css";
*/
@import "glow.css";
/*
@import "colorful_inactive_tabs.css";
@import "tab_animated_active_border.css";
@import "borderless_transparent_active_tab.css";
*/
Remember to disable files that you don’t want by commenting them out in the userChrome.css file.
For instance, if you do not want the toolbars to be moved to the bottom of the screen, then disable the following files by adding slashes and asterisks like this:
/*
@import "browser.css";
*/
/*
@import "alt-browser.css";
*/
Remember to enable files that you do want by uncommenting them in the userChrome.css file.
For instance, if you want to apply my color style, then enable the following files by deleting the slashes and asterisks directly above and below them:
@import "color_variable_template.css";
@import "colors.css";
Now choose one of the userContent.css files below:
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
@-moz-document url("about:addons"),
url("about:blank"),
url("about:config"),
url("about:home"),
url("about:newtab"),
url("about:preferences"),
url("about:privatebrowsing"),
url("about:profiles") {
body {
background-color:rgb(249, 249, 255)!important
}
a,a:visited,a:hover {
color:rgb(249, 249, 255)!important
}
}
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
@-moz-document url("about:addons"),
url("about:blank"),
url("about:config"),
url("about:home"),
url("about:newtab"),
url("about:preferences"),
url("about:privatebrowsing"),
url("about:profiles") {
body {
background-color:black!important
}
a,a:visited,a:hover {
color:black!important
}
#categories > .category[selected],
#categories > .category.selected {
color: white !important;
}
checkbox:not([disabled="true"]):hover > .checkbox-check,
input[type="checkbox"]:not(:disabled):hover {
border-color: white !important;
}
radio:not([disabled="true"]):hover > .radio-check {
border-color: white !important;
}
.text-link {
color: white !important;
}
.content-blocking-category.selected {
border: 1px solid white !important;
background-color: rgba(255,255,255,0.4) !important;
}
.content-blocking-category {
border: 1px solid var(--in-content-border-color) !important;
background-color: rgba(255,255,255,0.2) !important; /* bkg of default unselected*/
}
.content-blocking-warning {
background-color: rgba(255,255,255,0.3) !important;
}
.checkbox-check{
fill: white !important;
}
.radio-check{
fill: white !important;
}
.addon-card:not([expanded]) > .addon.card:hover {
box-shadow: white !important;
}
.card {
border: 1px solid white !important;
}
:root {
--card-outline-color: white !important;
--in-content-border-color: white !important;
--in-content-border-active: white !important;
--in-content-border-active-shadow: white !important;
--in-content-border-hover: white !important;
--in-content-box-background: black !important;
--in-content-box-background-active: rgba(255,255,255,0.6) !important;
--in-content-box-background-hover: rgba(255,255,255,0.4) !important;
--in-content-box-border-color: white !important;
--in-content-box-info-background: black !important;
--in-content-button-background: rgba(255,255,255,0.5) !important;
--in-content-button-background-active: rgba(255,255,255,0.4) !important;
--in-content-button-background-hover: rgba(255,255,255,0.6) !important;
--in-content-category-background: rgba(255,255,255,0.5) !important;
--in-content-category-background-hover: rgba(255,255,255,0.5) !important;
--in-content-category-background-selected: rgba(255,255,255,0.4) !important;
--in-content-category-background-selected-hover: rgba(255,255,255,0.5) !important;
--in-content-category-text: white !important;
--in-content-category-text-selected: white !important;
--in-content-page-background: black !important;
--in-content-selected-text: white !important;
--in-content-table-background: black !important;
--in-content-table-border-dark-color: white !important;
--in-content-table-header-background: rgba(255,255,255,0.5) !important;
--in-content-text-color: white !important;
--in-content-warning-container: rgba(255,255,255,0.3) !important;
--shadow-10: 0 1px 4px white !important;
--shadow-30: 0 4px 16px white !important;
color: white !important;
}
}
:root {
--card-outline-color: white !important;
--in-content-box-background: black !important;
--in-content-page-background: black !important;
--in-content-text-color: white !important;
--shadow-10: 0 1px 4px white !important;
--shadow-30: 0 4px 16px white !important;
color: white !important;
}
.card {
border: 1px solid white !important;
}
#learnMoreLink {
color: white !important;
}
#errorCode {
color: white !important;
}
#viewCertificate {
color: white !important;
}
#advancedButton {
color: white !important;
background-color: rgba(0,62,170,1) !important;
}
#advancedButton:hover {
color: white !important;
background-color: rgba(0,62,170,0.7) !important;
}
#advancedButton:active {
color: white !important;
background-color: rgba(0,62,170,0.5) !important;
}
#exceptionDialogButton {
color: white !important;
background-color: rgba(0,62,170,1) !important;
}
#exceptionDialogButton:hover {
color: white !important;
background-color: rgba(0,62,170,0.7) !important;
}
#exceptionDialogButton:active {
color: white !important;
background-color: rgba(0,62,170,0.5) !important;
}
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
@-moz-document url("about:addons"),
url("about:blank"),
url("about:config"),
url("about:home"),
url("about:newtab"),
url("about:preferences"),
url("about:privatebrowsing"),
url("about:profiles") {
:root {
--card-outline-color: #dc8add !important;
--card-shadow: var(--shadow-10);
--card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color);
--checkbox-border-color: var(--in-content-box-border-color);
--checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active);
--checkbox-checked-bgcolor: var(--in-content-primary-button-background);
--checkbox-checked-border-color: transparent;
--checkbox-checked-color: var(--in-content-primary-button-text-color);
--checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover);
--checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active);
--checkbox-unchecked-bgcolor: var(--in-content-button-background);
--checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover);
--dialog-warning-text-color: #dc8add !important;
--in-content-accent-color: #dc8add !important;
--in-content-accent-color-active: #dc8add !important;
--in-content-border-color: #dc8add !important;
--in-content-border-active: #dc8add !important;
--in-content-border-active-shadow: #dc8add !important;
--in-content-border-hover: #dc8add !important;
--in-content-border-invalid: #dc8add !important;
--in-content-box-background: black !important;
--in-content-box-background-active: rgba(220,138,221,0.6) !important;
--in-content-box-background-hover: rgba(220,138,221,0.4) !important;
--in-content-box-background-odd: black !important;
--in-content-box-border-color: #dc8add !important;
--in-content-box-info-background: black !important;
--in-content-button-background: rgba(220,138,221,0.5) !important;
--in-content-button-background-active: rgba(220,138,221,0.4) !important;
--in-content-button-background-hover: rgba(220,138,221,0.6) !important;
--in-content-button-border-color: #dc8add !important;
--in-content-button-border-color-active: #dc8add !important;
--in-content-button-border-color-hover: #dc8add !important;
--in-content-button-text-color: #dc8add !important;
--in-content-button-text-color-active: #dc8add !important;
--in-content-button-text-color-hover: white !important;
--in-content-category-background: rgba(220,138,221,0.5) !important;
--in-content-category-background-hover: rgba(220,138,221,0.5) !important;
--in-content-category-background-selected: rgba(220,138,221,0.4) !important;
--in-content-category-background-selected-hover: rgba(220,138,221,0.5) !important;
--in-content-category-text: #dc8add !important;
--in-content-category-text-selected: #dc8add !important;
--in-content-danger-button-background: #dc8add !important;
--in-content-danger-button-background-active: #dc8add !important;
--in-content-danger-button-background-hover: #dc8add !important;
--in-content-deemphasized-text: #dc8add !important;
--in-content-error-text-color: #dc8add !important;
--in-content-focus-outline-color: #dc8add !important;
--in-content-icon-color: #dc8add !important;
--in-content-item-hover: #dc8add !important;
--in-content-item-hover-text: white !important;
--in-content-item-selected: #dc8add !important;
--in-content-item-selected-text: white !important;
--in-content-link-color: #dc8add !important;
--in-content-link-color-active: #dc8add !important;
--in-content-link-color-hover: #dc8add !important;
--in-content-link-color-visited: #dc8add !important;
--in-content-page-background: black !important;
--in-content-page-color: #dc8add !important;
--in-content-primary-button-background: rgba(220,138,221,0.666) !important;
--in-content-primary-button-background-active: rgba(220,138,221,0.666) !important;
--in-content-primary-button-background-hover: black !important;
--in-content-primary-button-border-color: #dc8add !important;
--in-content-primary-button-border-hover: #dc8add !important;
--in-content-primary-button-text-color: white !important;
--in-content-primary-button-text-color-hover: white !important;
--in-content-selected-text: #dc8add !important;
--in-content-table-background: black !important;
--in-content-table-border-color: #dc8add !important;
--in-content-table-border-dark-color: #dc8add !important;
--in-content-table-header-background: rgba(220,138,221,0.5) !important;
--in-content-table-header-color: #dc8add !important;
--in-content-text-color: #dc8add !important;
--in-content-warning-container: rgba(220,138,221,0.3) !important;
--shadow-10: 0 1px 4px #dc8add !important;
--shadow-30: 0 4px 16px #dc8add !important;
color: #dc8add !important;
}
::selection {
background: #dc8add !important;
color: white !important;
}
#prefs>tr:hover {
background-color: rgba(220,138,221,0.6) !important;
color: #dc8add !important;
}
}
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
@-moz-document url("about:addons"),
url("about:blank"),
url("about:config"),
url("about:home"),
url("about:newtab"),
url("about:preferences"),
url("about:privatebrowsing"),
url("about:profiles") {
:root {
--card-outline-color: #dc8add !important;
--card-shadow: var(--shadow-10);
--card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color);
--checkbox-border-color: var(--in-content-box-border-color);
--checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active);
--checkbox-checked-bgcolor: var(--in-content-primary-button-background);
--checkbox-checked-border-color: var(--in-content-box-border-color);
--checkbox-checked-color: var(--in-content-primary-button-text-color);
--checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover);
--checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active);
--checkbox-unchecked-bgcolor: var(--in-content-button-background);
--checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover);
--dialog-warning-text-color: #dc8add !important;
--in-content-accent-color: #dc8add !important;
--in-content-accent-color-active: white !important;
--in-content-border-color: #dc8add !important;
--in-content-border-active: #dc8add !important;
--in-content-border-active-shadow: #dc8add !important;
--in-content-border-hover: #dc8add !important;
--in-content-border-invalid: #dc8add !important;
--in-content-box-background: black !important;
--in-content-box-background-active: #dc8add !important;
--in-content-box-background-hover: #dc8add !important;
--in-content-box-background-odd: black !important;
--in-content-box-border-color: #dc8add !important;
--in-content-box-info-background: black !important;
--in-content-button-background: black !important;
--in-content-button-background-active: #dc8add !important;
--in-content-button-background-hover: #dc8add !important;
--in-content-button-border-color: #dc8add !important;
--in-content-button-border-color-active: #dc8add !important;
--in-content-button-border-color-hover: #dc8add !important;
--in-content-button-text-color: #dc8add !important;
--in-content-button-text-color-active: white !important;
--in-content-button-text-color-hover: white !important;
--in-content-category-background: black !important;
--in-content-category-background-hover: #dc8add !important;
--in-content-category-background-selected: #dc8add !important;
--in-content-category-background-selected-hover: #dc8add !important;
--in-content-category-text: white !important;
--in-content-category-text-selected: white !important;
--in-content-danger-button-background: #dc8add !important;
--in-content-danger-button-background-active: #dc8add !important;
--in-content-danger-button-background-hover: #dc8add !important;
--in-content-deemphasized-text: #dc8add !important;
--in-content-error-text-color: #dc8add !important;
--in-content-focus-outline-color: #dc8add !important;
--in-content-icon-color: #dc8add !important;
--in-content-item-hover: #dc8add !important;
--in-content-item-hover-text: white !important;
--in-content-item-selected: #dc8add !important;
--in-content-item-selected-text: white !important;
--in-content-link-color: #dc8add !important;
--in-content-link-color-active: #dc8add !important;
--in-content-link-color-hover: #dc8add !important;
--in-content-link-color-visited: #dc8add !important;
--in-content-page-background: black !important;
--in-content-page-color: #dc8add !important;
--in-content-primary-button-background: #dc8add !important;
--in-content-primary-button-background-active: #dc8add !important;
--in-content-primary-button-background-hover: black !important;
--in-content-primary-button-border-color: #dc8add !important;
--in-content-primary-button-border-hover: #dc8add !important;
--in-content-primary-button-text-color: white !important;
--in-content-primary-button-text-color-hover: white !important;
--in-content-selected-text: white !important;
--in-content-table-background: black !important;
--in-content-table-border-color: #dc8add !important;
--in-content-table-border-dark-color: #dc8add !important;
--in-content-table-header-background: black !important;
--in-content-table-header-color: #dc8add !important;
--in-content-text-color: #dc8add !important;
--in-content-warning-container: black !important;
--shadow-10: 0 1px 4px #dc8add !important;
--shadow-30: 0 4px 16px #dc8add !important;
color: #dc8add !important;
}
::selection {
background: #dc8add !important;
color: white !important;
}
#prefs>tr:hover {
background-color: #dc8add !important;
color: white !important;
}
}
All CSS code for Firefox must be placed in a folder named chrome which must be placed in your Firefox profile:
~/.mozilla/firefox/PROFILE.default-esr/chrome/
Note: Tab Manager Menu and Main App Menu (≡) can be scrolled with a scrollbar on the right side of the menu popups, and the Main App Menu (≡) has a New-Tab menu option, which makes the New-Tab button in the Tab Bar unnecessary.
Backup the gtk.css file located in ~/.config/gtk-3.0/ before replacing it with this file:
@define-color accent_color #dc8add;
@define-color accent_bg_color #dc8add;
@define-color accent_fg_color #ffffff;
@define-color destructive_color #f66151;
@define-color destructive_bg_color #f66151;
@define-color destructive_fg_color #ffffff;
@define-color success_color #8ff0a4;
@define-color success_bg_color #8ff0a4;
@define-color success_fg_color #ffffff;
@define-color warning_color #f9f06b;
@define-color warning_bg_color #f9f06b;
@define-color warning_fg_color rgba(0, 0, 0, 0.8);
@define-color error_color #f66151;
@define-color error_bg_color #f66151;
@define-color error_fg_color #ffffff;
@define-color window_bg_color #241f31;
@define-color window_fg_color #ffffff;
@define-color view_bg_color #000000;
@define-color view_fg_color #ffffff;
@define-color headerbar_bg_color #241f31;
@define-color headerbar_fg_color #ffffff;
@define-color headerbar_border_color #ffffff;
@define-color headerbar_backdrop_color @window_bg_color;
@define-color headerbar_shade_color rgba(0, 0, 0, 0.36);
@define-color card_bg_color rgba(255, 255, 255, 0.08);
@define-color card_fg_color #ffffff;
@define-color card_shade_color rgba(0, 0, 0, 0.36);
@define-color dialog_bg_color #241f31;
@define-color dialog_fg_color #ffffff;
@define-color popover_bg_color #241f31;
@define-color popover_fg_color #dc8add;
@define-color shade_color rgba(0, 0, 0, 0.36);
@define-color scrollbar_outline_color rgba(0, 0, 0, 0.5);
@define-color blue_1 #99c1f1;
@define-color blue_2 #62a0ea;
@define-color blue_3 #3584e4;
@define-color blue_4 #1c71d8;
@define-color blue_5 #1a5fb4;
@define-color green_1 #8ff0a4;
@define-color green_2 #57e389;
@define-color green_3 #33d17a;
@define-color green_4 #2ec27e;
@define-color green_5 #26a269;
@define-color yellow_1 #f9f06b;
@define-color yellow_2 #f8e45c;
@define-color yellow_3 #f6d32d;
@define-color yellow_4 #f5c211;
@define-color yellow_5 #e5a50a;
@define-color orange_1 #ffbe6f;
@define-color orange_2 #ffa348;
@define-color orange_3 #ff7800;
@define-color orange_4 #e66100;
@define-color orange_5 #c64600;
@define-color red_1 #f66151;
@define-color red_2 #ed333b;
@define-color red_3 #e01b24;
@define-color red_4 #c01c28;
@define-color red_5 #a51d2d;
@define-color purple_1 #dc8add;
@define-color purple_2 #c061cb;
@define-color purple_3 #9141ac;
@define-color purple_4 #813d9c;
@define-color purple_5 #613583;
@define-color brown_1 #cdab8f;
@define-color brown_2 #b5835a;
@define-color brown_3 #986a44;
@define-color brown_4 #865e3c;
@define-color brown_5 #63452c;
@define-color light_1 #ffffff;
@define-color light_2 #f6f5f4;
@define-color light_3 #deddda;
@define-color light_4 #c0bfbc;
@define-color light_5 #9a9996;
@define-color dark_1 #77767b;
@define-color dark_2 #5e5c64;
@define-color dark_3 #3d3846;
@define-color dark_4 #241f31;
@define-color dark_5 #000000;
sq_button.sp1_3,
sq_button.sp2_3,
sq_button.sp4_3,
sq_button.sp5_3,
sq_button.vert_spacer,
sq_button.sp1_3:active,
sq_button.sp2_3:active,
sq_button.sp4_3:active,
sq_button.sp5_3:active,
sq_button.vert_spacer
{
background: #000000;
border-color: #000000;
color: #000000;
}
sq_button
{
color: mix(@theme_fg_color, #ffffff, 1.0);
border-color: mix(@borders, #dc8add, 1.0);
background: mix(@theme_bg_color, #dc8add, 1.0);
}
sq_button:active
{
color: mix(@theme_fg_color, #ffffff, 1.0);
border-color: mix(@borders, #dc8add, 1.0);
background: mix(@theme_bg_color, #ff00ff, 1.0);
}
sq_button.default_punct
{
color: mix(@theme_fg_color, #ffffff, 1.0);
border-color: mix(@borders, #dc8add, 1.0);
background: mix(@theme_bg_color, #dc8add, 1.0);
}
sq_button.default_punct:active
{
color: mix(@theme_fg_color, #ffffff, 1.0);
border-color: mix(@borders, #dc8add, 1.0);
background: mix(@theme_bg_color, #ff00ff, 1.0);
}
sq_button.default_foreign
{
color: mix(@theme_fg_color, #ffffff, 1.0);
border-color: mix(@borders, #dc8add, 1.0);
background: mix(@theme_bg_color, #dc8add, 1.0);
}
sq_button.default_foreign:active
{
color: mix(@theme_fg_color, #ffffff, 1.0);
border-color: mix(@borders, #dc8add, 1.0);
background: mix(@theme_bg_color, #ff00ff, 1.0);
}
sq_button.default_calc
{
color: mix(@theme_fg_color, #ffffff, 1.0);
border-color: mix(@borders, #dc8add, 1.0);
background: mix(@theme_bg_color, #dc8add, 1.0);
}
sq_button.default_calc:active
{
color: mix(@theme_fg_color, #ffffff, 1.0);
border-color: mix(@borders, #dc8add, 1.0);
background: mix(@theme_bg_color, #ff00ff, 1.0);
}
sq_button.default_prgm
{
color: mix(@theme_fg_color, #ffffff, 1.0);
border-color: mix(@borders, #dc8add, 1.0);
background: mix(@theme_bg_color, #dc8add, 1.0);
}
sq_button.default_prgm:active
{
color: mix(@theme_fg_color, #ffffff, 1.0);
border-color: mix(@borders, #dc8add, 1.0);
background: mix(@theme_bg_color, #ff00ff, 1.0);
}
sq_button.default_curr
{
color: mix(@theme_fg_color, #ffffff, 1.0);
border-color: mix(@borders, #dc8add, 1.0);
background: mix(@theme_bg_color, #dc8add, 1.0);
}
sq_button.default_curr:active
{
color: mix(@theme_fg_color, #ffffff, 1.0);
border-color: mix(@borders, #dc8add, 1.0);
background: mix(@theme_bg_color, #ff00ff, 1.0);
}
sq_button.default_misc
{
color: mix(@theme_fg_color, #ffffff, 1.0);
border-color: mix(@borders, #dc8add, 1.0);
background: mix(@theme_bg_color, #dc8add, 1.0);
}
sq_button.default_misc:active
{
color: mix(@theme_fg_color, #ffffff, 1.0);
border-color: mix(@borders, #dc8add, 1.0);
background: mix(@theme_bg_color, #ff00ff, 1.0);
}
sq_button.altline,
sq_button.special,
sq_button.wide {
color: mix(@theme_fg_color, #ffffff, 1.0);
border-color: mix(@borders, #dc8add, 1.0);
background: mix(@theme_bg_color, #dc8add, 1.0);
}
sq_button:active,
sq_button.altline:active,
sq_button.special:active,
sq_button.wide:active {
color: mix(@theme_fg_color, #ffffff, 1.0);
border-color: mix(@borders, #dc8add, 1.0);
background: mix(@theme_bg_color, #ff00ff, 1.0);
}
sq_button.latched,
sq_button.altline.latched
{
color: mix(@theme_fg_color, #ffffff, 1.0);
background: mix(@theme_bg_color, #ff00ff, 1.0);
}
sq_button.locked,
sq_button.altline.locked
{
color: mix(@theme_fg_color, #ffffff, 1.0);
background: mix(@theme_selected_bg_color, #ff00ff, 1.0);
}
#Return {
color: mix(@theme_fg_color, #ffffff, 1.0);
border-color: mix(@borders, #dc8add, 1.0);
background: mix(@theme_bg_color, #dc8add, 1.0);
}
#Return:active {
color: mix(@theme_fg_color, #ffffff, 1.0);
border-color: mix(@borders, #dc8add, 1.0);
background: mix(@theme_bg_color, #ff00ff, 1.0);
}
phosh-top-panel {
color: #dc8add;
}
phosh-home {
color: #dc8add;
}
phosh-lockscreen {
color: #dc8add;
}
Backup the us.yaml and us_wide.yaml files located in ~/.local/share/squeekboard/keyboards/ before replacing them with these files:
---
outlines:
default: { width: 48, height: 55 }
default_punct: { width: 48, height: 55 }
default_foreign: { width: 48, height: 55 }
default_calc: { width: 48, height: 55 }
default_prgm: { width: 48, height: 55 }
default_curr: { width: 48, height: 55 }
default_misc: { width: 48, height: 55 }
sp1_3: { width: 16, height: 55 }
sp2_3: { width: 32, height: 55 }
action: { width: 64, height: 55 }
wide: { width: 80, height: 55 }
sp5_3: { width: 80, height: 52 }
action_short: { width: 64, height: 52 }
altline: { width: 80, height: 52 }
spaceline: { width: 244, height: 52 }
special: { width: 60, height: 52 }
return_bsp: { width: 64, height: 52 }
vert_spacer: { width: 100, height: 0 }
views:
base:
- "Shift_b_ls Ctrl Alt ↑ ↓ ← → BackSpace"
- " 1 2 3 4 5 6 7 8 9 0 -"
- "sp1_3 q w e r t y u i o p sp2_3"
- "sp2_3 a s d f g h j k l ; sp1_3"
- " ' z x c v b n m , . /"
- "Shift_L preferences space show_actions Return"
- "vert_spacer"
upper:
- "Shift_u_us Ctrl Alt ↑ ↓ ← → BackSpace"
- " ! @ # $ % ^ & * ( ) _"
- "sp1_3 Q W E R T Y U I O P sp2_3"
- "sp2_3 A S D F G H J K L : sp1_3"
- " \" Z X C V B N M < > ?"
- "Shift_L preferences space show_actions Return"
- "vert_spacer"
lsyms:
- "Shift_b_ls Ctrl Alt ↑ ↓ ← → BackSpace"
- " ` à â á é î ü ô ö û ó"
- "sp1_3 þ ð č ĵ š ž ǧ ß ʒ ğ sp2_3"
- "sp2_3 θ μ π σ τ φ = · + minus sp1_3"
- " \\ | bang pct amp caret mulsplat divslash √ × ÷"
- "Shift_S preferences space show_actions Return"
- "vert_spacer"
usyms:
- "Shift_u_us Ctrl Alt ↑ ↓ ← → BackSpace"
- " ~ À Â Á É Î Ü Ô Ö Û Ó"
- "sp1_3 Þ Đ Č Ĵ Š Ž Ǧ ʃ Ʒ Ğ sp2_3"
- "sp2_3 « » Σ Δ ¶ ° ® © dollar £ sp1_3"
- " lst gtt lparen rparen [ ] { } hash € ¥"
- "Shift_S preferences space show_actions Return"
- "vert_spacer"
actions:
- "sp5_3 Ctrl Alt ↑ ↓ ← → BackSpace"
- "show_lower F1 F2 F3 F4 Insert Home PgUp"
- "show_upper F5 F6 F7 F8 Del End PgDn"
- "show_lsyms F9 F10 F11 F12 Esc Up Pause"
- "show_usyms Menu Esc Tab Break Left Down Right"
- "sp5_3 preferences space show_actions Return"
- "vert_spacer"
buttons:
sp1_3:
outline: "sp1_3"
keysym: " "
text: " "
sp2_3:
outline: "sp2_3"
keysym: " "
text: " "
sp5_3:
outline: "sp5_3"
keysym: " "
text: " "
vert_spacer:
outline: "vert_spacer"
text: " "
keysym: " "
Shift_L:
action:
locking:
lock_view: "upper"
unlock_view: "base"
outline: "altline"
icon: "key-shift"
Shift_S:
action:
locking:
lock_view: "usyms"
unlock_view: "lsyms"
outline: "altline"
icon: "key-shift"
Shift_b_ls:
action:
locking:
lock_view: "lsyms"
unlock_view: "base"
outline: "altline"
label: "àτ÷"
Shift_u_us:
action:
locking:
lock_view: "usyms"
unlock_view: "upper"
outline: "altline"
label: "ÀΣ€"
show_actions:
action:
locking:
lock_view: "actions"
unlock_view: "base"
outline: "altline"
label: "Fn"
preferences:
action: "show_prefs"
outline: "special"
icon: "keyboard-mode-symbolic"
space:
outline: "spaceline"
text: " "
Return:
outline: "return_bsp"
icon: "key-enter"
keysym: "Return"
BackSpace:
outline: "return_bsp"
icon: "edit-clear-symbolic"
action: erase
Ctrl:
modifier: "Control"
outline: "action_short"
label: "Ctrl"
Alt:
modifier: "Alt"
outline: "action_short"
label: "Alt"
"↑":
outline: "action_short"
keysym: "Up"
"↓":
outline: "action_short"
keysym: "Down"
"←":
outline: "action_short"
keysym: "Left"
"→":
outline: "action_short"
keysym: "Right"
"-":
outline: "default_punct"
";":
outline: "default_punct"
"'":
outline: "default_punct"
",":
outline: "default_punct"
".":
outline: "default_punct"
"?":
outline: "default_punct"
"!":
outline: "default_punct"
"@":
outline: "default_punct"
"#":
outline: "default_punct"
"$":
outline: "default_punct"
"%":
outline: "default_punct"
"^":
outline: "default_punct"
"&":
outline: "default_punct"
"*":
outline: "default_punct"
"(":
outline: "default_punct"
")":
outline: "default_punct"
"_":
outline: "default_punct"
":":
outline: "default_punct"
"\"":
outline: "default_punct"
"<":
outline: "default_punct"
">":
outline: "default_punct"
"/":
outline: "default_punct"
"`":
outline: "default_punct"
"à":
outline: "default_foreign"
"â":
outline: "default_foreign"
"á":
outline: "default_foreign"
"é":
outline: "default_foreign"
"î":
outline: "default_foreign"
"ü":
outline: "default_foreign"
"ô":
outline: "default_foreign"
"ö":
outline: "default_foreign"
"û":
outline: "default_foreign"
"ó":
outline: "default_foreign"
"þ":
outline: "default_foreign"
"ð":
outline: "default_foreign"
"č":
outline: "default_foreign"
"ĵ":
outline: "default_foreign"
"š":
outline: "default_foreign"
"ž":
outline: "default_foreign"
"ǧ":
outline: "default_foreign"
"ß":
outline: "default_foreign"
"ʒ":
outline: "default_foreign"
"ğ":
outline: "default_foreign"
"θ":
outline: "default_foreign"
"μ":
outline: "default_foreign"
"π":
outline: "default_foreign"
"σ":
outline: "default_foreign"
"τ":
outline: "default_foreign"
"φ":
outline: "default_foreign"
"=":
outline: "default_calc"
"·":
outline: "default_calc"
"+":
outline: "default_calc"
minus:
outline: "default_calc"
text: "-"
"\\":
outline: "default_prgm"
"|":
outline: "default_prgm"
bang:
outline: "default_prgm"
text: "!"
pct:
outline: "default_prgm"
text: "%"
amp:
outline: "default_prgm"
text: "&"
caret:
outline: "default_prgm"
text: "^"
mulsplat:
outline: "default_calc"
text: "*"
divslash:
outline: "default_calc"
text: "/"
"√":
outline: "default_calc"
"×":
outline: "default_calc"
"÷":
outline: "default_calc"
"~":
outline: "default_punct"
"À":
outline: "default_foreign"
"Â":
outline: "default_foreign"
"Á":
outline: "default_foreign"
"É":
outline: "default_foreign"
"Î":
outline: "default_foreign"
"Ü":
outline: "default_foreign"
"Ô":
outline: "default_foreign"
"Ö":
outline: "default_foreign"
"Û":
outline: "default_foreign"
"Ó":
outline: "default_foreign"
"Þ":
outline: "default_foreign"
"Đ":
outline: "default_foreign"
"Č":
outline: "default_foreign"
"Ĵ":
outline: "default_foreign"
"Š":
outline: "default_foreign"
"Ž":
outline: "default_foreign"
"Ǧ":
outline: "default_foreign"
"ʃ":
outline: "default_foreign"
"Ʒ":
outline: "default_foreign"
"Ğ":
outline: "default_foreign"
"Σ":
outline: "default_foreign"
"Δ":
outline: "default_foreign"
"«":
outline: "default_foreign"
"»":
outline: "default_foreign"
hash:
outline: "default_prgm"
text: "#"
"°":
outline: "default_misc"
"®":
outline: "default_misc"
"©":
outline: "default_misc"
dollar:
outline: "default_curr"
text: "$"
"£":
outline: "default_curr"
lst:
outline: "default_prgm"
text: "<"
gtt:
outline: "default_prgm"
text: ">"
lparen:
label: "("
outline: "default_prgm"
text: "("
rparen:
outline: "default_prgm"
text: ")"
"[":
outline: "default_prgm"
"]":
outline: "default_prgm"
"{":
outline: "default_prgm"
"}":
outline: "default_prgm"
"¶":
outline: "default_misc"
"€":
outline: "default_curr"
"¥":
outline: "default_curr"
show_lower:
action:
set_view: "base"
outline: "wide"
label: "abc"
show_upper:
action:
set_view: "upper"
outline: "wide"
label: "ABC"
show_lsyms:
action:
set_view: "lsyms"
outline: "wide"
label: "àτ÷"
show_usyms:
action:
set_view: "usyms"
outline: "wide"
label: "ÀΣ€"
F1:
outline: "action"
keysym: "F1"
F2:
outline: "action"
keysym: "F2"
F3:
outline: "action"
keysym: "F3"
F4:
outline: "action"
keysym: "F4"
F5:
outline: "action"
keysym: "F5"
F6:
outline: "action"
keysym: "F6"
F7:
outline: "action"
keysym: "F7"
F8:
outline: "action"
keysym: "F8"
F9:
outline: "action"
keysym: "F9"
F10:
outline: "action"
keysym: "F10"
F11:
outline: "action"
keysym: "F11"
F12:
outline: "action"
keysym: "F12"
Esc:
outline: "action"
keysym: "Escape"
Tab:
outline: "action"
keysym: "Tab"
Del:
outline: "action"
keysym: "Delete"
Insert:
outline: "action"
keysym: "Insert"
Menu:
outline: "action"
keysym: "Menu"
Pause:
outline: "action"
keysym: "Pause"
Break:
outline: "action"
keysym: "Break"
Home:
outline: "action"
keysym: "Home"
End:
outline: "action"
keysym: "End"
PgUp:
outline: "action"
keysym: "Page_Up"
PgDn:
outline: "action"
keysym: "Page_Down"
Up:
label: "↑"
outline: "action"
keysym: "Up"
Left:
label: "←"
outline: "action"
keysym: "Left"
Down:
label: "↓"
outline: "action"
keysym: "Down"
Right:
label: "→"
outline: "action"
keysym: "Right"
---
outlines:
default: { width: 48, height: 70 }
default_punct: { width: 48, height: 70 }
default_foreign: { width: 48, height: 70 }
default_calc: { width: 48, height: 70 }
default_prgm: { width: 48, height: 70 }
default_curr: { width: 48, height: 70 }
default_misc: { width: 48, height: 70 }
sp1_3: { width: 16, height: 70 }
sp2_3: { width: 32, height: 70 }
sp4_3: { width: 64, height: 70 }
action: { width: 64, height: 70 }
altline: { width: 80, height: 70 }
double: { width: 96, height: 70 }
wide5: { width: 80, height: 70 }
spaceline: { width: 212, height: 70 }
widespaceline: { width: 292, height: 70 }
special: { width: 60, height: 70 }
views:
base:
- "q w e r t y u i o p [ ] BackSpace sp2_3 Insert Home PgUp sp2_3 7 8 9 minus ="
- "sp1_3 a s d f g h j k l ; ' Return sp2_3 Del End PgDn sp2_3 4 5 6 + ·"
- " sp2_3 z x c v b n m , . / ` \\ sp2_3 sp2_3 sp4_3 ↑ sp4_3 sp2_3 1 2 3 ÷ √"
- "Shift_L preferences Ctrl space Alt Shift_b_ls show_actions sp2_3 ← ↓ → sp2_3 Zero DecimalPt × percent"
upper:
- "Q W E R T Y U I O P { } BackSpace sp2_3 Insert Home PgUp sp2_3 7 8 9 minus ="
- "sp1_3 A S D F G H J K L : \" Return sp2_3 Del End PgDn sp2_3 4 5 6 + ·"
- " sp2_3 Z X C V B N M < > ? ~ | sp2_3 sp2_3 sp4_3 ↑ sp4_3 sp2_3 1 2 3 ÷ √"
- "Shift_L preferences Ctrl space Alt Shift_u_us show_actions sp2_3 ← ↓ → sp2_3 Zero DecimalPt × percent"
lsyms:
- "à â á é î ü ô ö û ó & * BackSpace sp2_3 Insert Home PgUp sp2_3 7 8 9 minus ="
- "sp1_3 þ ð č ĵ š ž ǧ ß ʒ ğ - Return sp2_3 Del End PgDn sp2_3 4 5 6 + ·"
- "sp2_3 θ μ π σ τ φ ! @ # $ % ^ sp2_3 sp2_3 sp4_3 ↑ sp4_3 sp2_3 1 2 3 ÷ √"
- "Shift_S preferences Ctrl space Alt Shift_b_ls show_actions sp2_3 ← ↓ → sp2_3 Zero DecimalPt × percent"
usyms:
- "À Â Á É Î Ü Ô Ö Û Ó ( ) BackSpace sp2_3 Insert Home PgUp sp2_3 7 8 9 minus ="
- "sp1_3 Þ Đ Č Ĵ Š Ž Ǧ ʃ Ʒ Ğ _ Return sp2_3 Del End PgDn sp2_3 4 5 6 + ·"
- "sp2_3 « » Σ Δ ¶ ° ® © dollar £ € ¥ sp2_3 sp2_3 sp4_3 ↑ sp4_3 sp2_3 1 2 3 ÷ √"
- "Shift_S preferences Ctrl space Alt Shift_u_us show_actions sp2_3 ← ↓ → sp2_3 Zero DecimalPt × percent"
actions:
- "show_lower sp1_3 Esc sp2_3 F1 F2 F3 F4 sp2_3 WideBackSpace sp2_3 Insert Home PgUp sp2_3 7 8 9 minus ="
- "show_upper sp1_3 Tab sp2_3 F5 F6 F7 F8 sp2_3 Pause sp2_3 Del End PgDn sp2_3 4 5 6 + ·"
- "show_lsyms sp1_3 Menu sp2_3 F9 F10 F11 F12 sp2_3 Break sp2_3 sp4_3 ↑ sp4_3 sp2_3 1 2 3 ÷ √"
- "show_usyms preferences Ctrl widespace Alt show_actions sp2_3 ← ↓ → sp2_3 Zero DecimalPt × percent"
buttons:
sp1_3:
outline: "sp1_3"
keysym: " "
text: " "
sp2_3:
outline: "sp2_3"
keysym: " "
text: " "
sp4_3:
outline: "sp4_3"
keysym: " "
text: " "
Shift_L:
action:
locking:
lock_view: "upper"
unlock_view: "base"
outline: "altline"
icon: "key-shift"
Shift_S:
action:
locking:
lock_view: "usyms"
unlock_view: "lsyms"
outline: "altline"
icon: "key-shift"
Shift_b_ls:
action:
locking:
lock_view: "lsyms"
unlock_view: "base"
outline: "altline"
label: "àτ÷"
Shift_u_us:
action:
locking:
lock_view: "usyms"
unlock_view: "upper"
outline: "altline"
label: "ÀΣ€"
show_actions:
action:
locking:
lock_view: "actions"
unlock_view: "base"
outline: "altline"
label: "Fn"
preferences:
action: "show_prefs"
outline: "special"
icon: "keyboard-mode-symbolic"
space:
outline: "spaceline"
text: " "
widespace:
outline: "widespaceline"
text: " "
Return:
outline: "double"
icon: "key-enter"
keysym: "Return"
BackSpace:
outline: "action"
icon: "edit-clear-symbolic"
action: erase
Ctrl:
modifier: "Control"
outline: "action"
label: "Ctrl"
Alt:
modifier: "Alt"
outline: "action"
label: "Alt"
"↑":
outline: "action"
keysym: "Up"
"↓":
outline: "action"
keysym: "Down"
"←":
outline: "action"
keysym: "Left"
"→":
outline: "action"
keysym: "Right"
"-":
outline: "default_punct"
";":
outline: "default_punct"
"'":
outline: "default_punct"
",":
outline: "default_punct"
".":
outline: "default_punct"
"?":
outline: "default_punct"
"!":
outline: "default_punct"
"@":
outline: "default_punct"
"#":
outline: "default_punct"
"$":
outline: "default_punct"
"%":
outline: "default_punct"
"^":
outline: "default_punct"
"&":
outline: "default_punct"
"*":
outline: "default_punct"
"(":
outline: "default_punct"
")":
outline: "default_punct"
"_":
outline: "default_punct"
":":
outline: "default_punct"
"\"":
outline: "default_punct"
"<":
outline: "default_punct"
">":
outline: "default_punct"
"/":
outline: "default_punct"
"`":
outline: "default_punct"
"à":
outline: "default_foreign"
"â":
outline: "default_foreign"
"á":
outline: "default_foreign"
"é":
outline: "default_foreign"
"î":
outline: "default_foreign"
"ü":
outline: "default_foreign"
"ô":
outline: "default_foreign"
"ö":
outline: "default_foreign"
"û":
outline: "default_foreign"
"ó":
outline: "default_foreign"
"þ":
outline: "default_foreign"
"ð":
outline: "default_foreign"
"č":
outline: "default_foreign"
"ĵ":
outline: "default_foreign"
"š":
outline: "default_foreign"
"ž":
outline: "default_foreign"
"ǧ":
outline: "default_foreign"
"ß":
outline: "default_foreign"
"ʒ":
outline: "default_foreign"
"ğ":
outline: "default_foreign"
"θ":
outline: "default_foreign"
"μ":
outline: "default_foreign"
"π":
outline: "default_foreign"
"σ":
outline: "default_foreign"
"τ":
outline: "default_foreign"
"φ":
outline: "default_foreign"
"=":
outline: "default_calc"
"·":
outline: "default_calc"
"+":
outline: "default_calc"
minus:
outline: "default_calc"
text: "-"
percent:
outline: "default_calc"
text: "%"
"\\":
outline: "default_punct"
"|":
outline: "default_punct"
bang:
outline: "default_punct"
text: "!"
pct:
outline: "default_punct"
text: "%"
amp:
outline: "default_punct"
text: "&"
caret:
outline: "default_punct"
text: "^"
mulsplat:
outline: "default_calc"
text: "*"
divslash:
outline: "default_calc"
text: "/"
"√":
outline: "default_calc"
"×":
outline: "default_calc"
"÷":
outline: "default_calc"
"~":
outline: "default_punct"
"À":
outline: "default_foreign"
"Â":
outline: "default_foreign"
"Á":
outline: "default_foreign"
"É":
outline: "default_foreign"
"Î":
outline: "default_foreign"
"Ü":
outline: "default_foreign"
"Ô":
outline: "default_foreign"
"Ö":
outline: "default_foreign"
"Û":
outline: "default_foreign"
"Ó":
outline: "default_foreign"
"Þ":
outline: "default_foreign"
"Đ":
outline: "default_foreign"
"Č":
outline: "default_foreign"
"Ĵ":
outline: "default_foreign"
"Š":
outline: "default_foreign"
"Ž":
outline: "default_foreign"
"Ǧ":
outline: "default_foreign"
"ʃ":
outline: "default_foreign"
"Ʒ":
outline: "default_foreign"
"Ğ":
outline: "default_foreign"
"Σ":
outline: "default_foreign"
"Δ":
outline: "default_foreign"
"«":
outline: "default_foreign"
"»":
outline: "default_foreign"
hash:
outline: "default_punct"
text: "#"
"°":
outline: "default_misc"
"®":
outline: "default_misc"
"©":
outline: "default_misc"
dollar:
outline: "default_curr"
text: "$"
"£":
outline: "default_curr"
lst:
outline: "default_punct"
text: "<"
gtt:
outline: "default_punct"
text: ">"
lparen:
label: "("
outline: "default_punct"
text: "("
rparen:
outline: "default_punct"
text: ")"
"[":
outline: "default_punct"
"]":
outline: "default_punct"
"{":
outline: "default_punct"
"}":
outline: "default_punct"
"¶":
outline: "default_misc"
"€":
outline: "default_curr"
"¥":
outline: "default_curr"
show_lower:
action:
set_view: "base"
outline: "altline"
label: "abc"
show_upper:
action:
set_view: "upper"
outline: "altline"
label: "ABC"
show_lsyms:
action:
set_view: "lsyms"
outline: "altline"
label: "àτ÷"
show_usyms:
action:
set_view: "usyms"
outline: "altline"
label: "ÀΣ€"
F1:
outline: "wide5"
keysym: "F1"
F2:
outline: "wide5"
keysym: "F2"
F3:
outline: "wide5"
keysym: "F3"
F4:
outline: "wide5"
keysym: "F4"
F5:
outline: "wide5"
keysym: "F5"
F6:
outline: "wide5"
keysym: "F6"
F7:
outline: "wide5"
keysym: "F7"
F8:
outline: "wide5"
keysym: "F8"
F9:
outline: "wide5"
keysym: "F9"
F10:
outline: "wide5"
keysym: "F10"
F11:
outline: "wide5"
keysym: "F11"
F12:
outline: "wide5"
keysym: "F12"
Esc:
outline: "wide5"
keysym: "Escape"
WideBackSpace:
outline: "wide5"
icon: "edit-clear-symbolic"
action: erase
Tab:
outline: "wide5"
keysym: "Tab"
Del:
outline: "action"
keysym: "Delete"
Insert:
outline: "action"
keysym: "Insert"
Menu:
outline: "wide5"
keysym: "Menu"
Pause:
outline: "wide5"
keysym: "Pause"
Break:
outline: "wide5"
keysym: "Break"
Home:
outline: "action"
keysym: "Home"
End:
outline: "action"
keysym: "End"
PgUp:
outline: "action"
keysym: "Page_Up"
PgDn:
outline: "action"
keysym: "Page_Down"
Up:
label: "↑"
outline: "action"
keysym: "Up"
Left:
label: "←"
outline: "action"
keysym: "Left"
Down:
label: "↓"
outline: "action"
keysym: "Down"
Right:
label: "→"
outline: "action"
keysym: "Right"
Zero:
outline: "double"
text: "0"
DecimalPt:
text: "."
period:
outline: "altline"
text: "."
colon:
text: ":"
Mozilla Public License Version 2.0
==================================
1. Definitions
--------------
1.1. "Contributor"
means each individual or legal entity that creates, contributes to
the creation of, or owns Covered Software.
1.2. "Contributor Version"
means the combination of the Contributions of others (if any) used
by a Contributor and that particular Contributor's Contribution.
1.3. "Contribution"
means Covered Software of a particular Contributor.
1.4. "Covered Software"
means Source Code Form to which the initial Contributor has attached
the notice in Exhibit A, the Executable Form of such Source Code
Form, and Modifications of such Source Code Form, in each case
including portions thereof.
1.5. "Incompatible With Secondary Licenses"
means
(a) that the initial Contributor has attached the notice described
in Exhibit B to the Covered Software; or
(b) that the Covered Software was made available under the terms of
version 1.1 or earlier of the License, but not also under the
terms of a Secondary License.
1.6. "Executable Form"
means any form of the work other than Source Code Form.
1.7. "Larger Work"
means a work that combines Covered Software with other material, in
a separate file or files, that is not Covered Software.
1.8. "License"
means this document.
1.9. "Licensable"
means having the right to grant, to the maximum extent possible,
whether at the time of the initial grant or subsequently, any and
all of the rights conveyed by this License.
1.10. "Modifications"
means any of the following:
(a) any file in Source Code Form that results from an addition to,
deletion from, or modification of the contents of Covered
Software; or
(b) any new file in Source Code Form that contains any Covered
Software.
1.11. "Patent Claims" of a Contributor
means any patent claim(s), including without limitation, method,
process, and apparatus claims, in any patent Licensable by such
Contributor that would be infringed, but for the grant of the
License, by the making, using, selling, offering for sale, having
made, import, or transfer of either its Contributions or its
Contributor Version.
1.12. "Secondary License"
means either the GNU General Public License, Version 2.0, the GNU
Lesser General Public License, Version 2.1, the GNU Affero General
Public License, Version 3.0, or any later versions of those
licenses.
1.13. "Source Code Form"
means the form of the work preferred for making modifications.
1.14. "You" (or "Your")
means an individual or a legal entity exercising rights under this
License. For legal entities, "You" includes any entity that
controls, is controlled by, or is under common control with You. For
purposes of this definition, "control" means (a) the power, direct
or indirect, to cause the direction or management of such entity,
whether by contract or otherwise, or (b) ownership of more than
fifty percent (50%) of the outstanding shares or beneficial
ownership of such entity.
2. License Grants and Conditions
--------------------------------
2.1. Grants
Each Contributor hereby grants You a world-wide, royalty-free,
non-exclusive license:
(a) under intellectual property rights (other than patent or trademark)
Licensable by such Contributor to use, reproduce, make available,
modify, display, perform, distribute, and otherwise exploit its
Contributions, either on an unmodified basis, with Modifications, or
as part of a Larger Work; and
(b) under Patent Claims of such Contributor to make, use, sell, offer
for sale, have made, import, and otherwise transfer either its
Contributions or its Contributor Version.
2.2. Effective Date
The licenses granted in Section 2.1 with respect to any Contribution
become effective for each Contribution on the date the Contributor first
distributes such Contribution.
2.3. Limitations on Grant Scope
The licenses granted in this Section 2 are the only rights granted under
this License. No additional rights or licenses will be implied from the
distribution or licensing of Covered Software under this License.
Notwithstanding Section 2.1(b) above, no patent license is granted by a
Contributor:
(a) for any code that a Contributor has removed from Covered Software;
or
(b) for infringements caused by: (i) Your and any other third party's
modifications of Covered Software, or (ii) the combination of its
Contributions with other software (except as part of its Contributor
Version); or
(c) under Patent Claims infringed by Covered Software in the absence of
its Contributions.
This License does not grant any rights in the trademarks, service marks,
or logos of any Contributor (except as may be necessary to comply with
the notice requirements in Section 3.4).
2.4. Subsequent Licenses
No Contributor makes additional grants as a result of Your choice to
distribute the Covered Software under a subsequent version of this
License (see Section 10.2) or under the terms of a Secondary License (if
permitted under the terms of Section 3.3).
2.5. Representation
Each Contributor represents that the Contributor believes its
Contributions are its original creation(s) or it has sufficient rights
to grant the rights to its Contributions conveyed by this License.
2.6. Fair Use
This License is not intended to limit any rights You have under
applicable copyright doctrines of fair use, fair dealing, or other
equivalents.
2.7. Conditions
Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted
in Section 2.1.
3. Responsibilities
-------------------
3.1. Distribution of Source Form
All distribution of Covered Software in Source Code Form, including any
Modifications that You create or to which You contribute, must be under
the terms of this License. You must inform recipients that the Source
Code Form of the Covered Software is governed by the terms of this
License, and how they can obtain a copy of this License. You may not
attempt to alter or restrict the recipients' rights in the Source Code
Form.
3.2. Distribution of Executable Form
If You distribute Covered Software in Executable Form then:
(a) such Covered Software must also be made available in Source Code
Form, as described in Section 3.1, and You must inform recipients of
the Executable Form how they can obtain a copy of such Source Code
Form by reasonable means in a timely manner, at a charge no more
than the cost of distribution to the recipient; and
(b) You may distribute such Executable Form under the terms of this
License, or sublicense it under different terms, provided that the
license for the Executable Form does not attempt to limit or alter
the recipients' rights in the Source Code Form under this License.
3.3. Distribution of a Larger Work
You may create and distribute a Larger Work under terms of Your choice,
provided that You also comply with the requirements of this License for
the Covered Software. If the Larger Work is a combination of Covered
Software with a work governed by one or more Secondary Licenses, and the
Covered Software is not Incompatible With Secondary Licenses, this
License permits You to additionally distribute such Covered Software
under the terms of such Secondary License(s), so that the recipient of
the Larger Work may, at their option, further distribute the Covered
Software under the terms of either this License or such Secondary
License(s).
3.4. Notices
You may not remove or alter the substance of any license notices
(including copyright notices, patent notices, disclaimers of warranty,
or limitations of liability) contained within the Source Code Form of
the Covered Software, except that You may alter any license notices to
the extent required to remedy known factual inaccuracies.
3.5. Application of Additional Terms
You may choose to offer, and to charge a fee for, warranty, support,
indemnity or liability obligations to one or more recipients of Covered
Software. However, You may do so only on Your own behalf, and not on
behalf of any Contributor. You must make it absolutely clear that any
such warranty, support, indemnity, or liability obligation is offered by
You alone, and You hereby agree to indemnify every Contributor for any
liability incurred by such Contributor as a result of warranty, support,
indemnity or liability terms You offer. You may include additional
disclaimers of warranty and limitations of liability specific to any
jurisdiction.
4. Inability to Comply Due to Statute or Regulation
---------------------------------------------------
If it is impossible for You to comply with any of the terms of this
License with respect to some or all of the Covered Software due to
statute, judicial order, or regulation then You must: (a) comply with
the terms of this License to the maximum extent possible; and (b)
describe the limitations and the code they affect. Such description must
be placed in a text file included with all distributions of the Covered
Software under this License. Except to the extent prohibited by statute
or regulation, such description must be sufficiently detailed for a
recipient of ordinary skill to be able to understand it.
5. Termination
--------------
5.1. The rights granted under this License will terminate automatically
if You fail to comply with any of its terms. However, if You become
compliant, then the rights granted under this License from a particular
Contributor are reinstated (a) provisionally, unless and until such
Contributor explicitly and finally terminates Your grants, and (b) on an
ongoing basis, if such Contributor fails to notify You of the
non-compliance by some reasonable means prior to 60 days after You have
come back into compliance. Moreover, Your grants from a particular
Contributor are reinstated on an ongoing basis if such Contributor
notifies You of the non-compliance by some reasonable means, this is the
first time You have received notice of non-compliance with this License
from such Contributor, and You become compliant prior to 30 days after
Your receipt of the notice.
5.2. If You initiate litigation against any entity by asserting a patent
infringement claim (excluding declaratory judgment actions,
counter-claims, and cross-claims) alleging that a Contributor Version
directly or indirectly infringes any patent, then the rights granted to
You by any and all Contributors for the Covered Software under Section
2.1 of this License shall terminate.
5.3. In the event of termination under Sections 5.1 or 5.2 above, all
end user license agreements (excluding distributors and resellers) which
have been validly granted by You or Your distributors under this License
prior to termination shall survive termination.
************************************************************************
* *
* 6. Disclaimer of Warranty *
* ------------------------- *
* *
* Covered Software is provided under this License on an "as is" *
* basis, without warranty of any kind, either expressed, implied, or *
* statutory, including, without limitation, warranties that the *
* Covered Software is free of defects, merchantable, fit for a *
* particular purpose or non-infringing. The entire risk as to the *
* quality and performance of the Covered Software is with You. *
* Should any Covered Software prove defective in any respect, You *
* (not any Contributor) assume the cost of any necessary servicing, *
* repair, or correction. This disclaimer of warranty constitutes an *
* essential part of this License. No use of any Covered Software is *
* authorized under this License except under this disclaimer. *
* *
************************************************************************
************************************************************************
* *
* 7. Limitation of Liability *
* -------------------------- *
* *
* Under no circumstances and under no legal theory, whether tort *
* (including negligence), contract, or otherwise, shall any *
* Contributor, or anyone who distributes Covered Software as *
* permitted above, be liable to You for any direct, indirect, *
* special, incidental, or consequential damages of any character *
* including, without limitation, damages for lost profits, loss of *
* goodwill, work stoppage, computer failure or malfunction, or any *
* and all other commercial damages or losses, even if such party *
* shall have been informed of the possibility of such damages. This *
* limitation of liability shall not apply to liability for death or *
* personal injury resulting from such party's negligence to the *
* extent applicable law prohibits such limitation. Some *
* jurisdictions do not allow the exclusion or limitation of *
* incidental or consequential damages, so this exclusion and *
* limitation may not apply to You. *
* *
************************************************************************
8. Litigation
-------------
Any litigation relating to this License may be brought only in the
courts of a jurisdiction where the defendant maintains its principal
place of business and such litigation shall be governed by laws of that
jurisdiction, without reference to its conflict-of-law provisions.
Nothing in this Section shall prevent a party's ability to bring
cross-claims or counter-claims.
9. Miscellaneous
----------------
This License represents the complete agreement concerning the subject
matter hereof. If any provision of this License is held to be
unenforceable, such provision shall be reformed only to the extent
necessary to make it enforceable. Any law or regulation which provides
that the language of a contract shall be construed against the drafter
shall not be used to construe this License against a Contributor.
10. Versions of the License
---------------------------
10.1. New Versions
Mozilla Foundation is the license steward. Except as provided in Section
10.3, no one other than the license steward has the right to modify or
publish new versions of this License. Each version will be given a
distinguishing version number.
10.2. Effect of New Versions
You may distribute the Covered Software under the terms of the version
of the License under which You originally received the Covered Software,
or under the terms of any subsequent version published by the license
steward.
10.3. Modified Versions
If you create software not governed by this License, and you want to
create a new license for such software, you may create and use a
modified version of this License if you rename the license and remove
any references to the name of the license steward (except to note that
such modified license differs from this License).
10.4. Distributing Source Code Form that is Incompatible With Secondary
Licenses
If You choose to distribute Source Code Form that is Incompatible With
Secondary Licenses under the terms of this version of the License, the
notice described in Exhibit B of this License must be attached.
Exhibit A - Source Code Form License Notice
-------------------------------------------
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
If it is not possible or desirable to put the notice in a particular
file, then You may include the notice in a location (such as a LICENSE
file in a relevant directory) where a recipient would be likely to look
for such a notice.
You may add additional accurate notices of copyright ownership.
Exhibit B - "Incompatible With Secondary Licenses" Notice
---------------------------------------------------------
This Source Code Form is "Incompatible With Secondary Licenses", as
defined by the Mozilla Public License, v. 2.0.
Which one puts the “x” marks on the tabs in the menu?
That’s actually something that was added into Firefox-ESR 115, so there is no CSS needed for this feature.
Interestingly, this feature makes the Tab Bar itself unnecessary. Because of this, I have created a new CSS file for a true mobile mode, and it is working very well so far. Once I have tested this new code some more, I will post it here.
Edit:
I’ve decided to add true_mobile_mode.css to my September update posts above, while I can still edit the posts.
Wow, thanks a lot for your work on making FF work better on mobile!
Given how nice this looks, I actually have a few questions:
firefox-esr-mobile-config (e.g. a firefox-esr-true-mobile-config, etc) with the Purism folks? That could enable more people to benefit from your hard workMaybe I miss an important detail. I have the firefox-esr-mobile-config installed at the latest version.
However I’m pretty sure that my Firefox is not using it. Is there something active I need to do?
Edit: Seems that I missed the very first thing in the OP 
I’ll try it out later today.
If you read higher @Emma fields your question.
Ah, yes, I found a post about Codeberg, then maybe Sourcehut would suit you @Emma (I you want to give it a try), it does not require javascript and does not use any captcha, tracking, or anything really.
Thank you for the appreciation!
While I don’t have a repo and currently don’t want one, I do have a kbin account and am considering posting updates and uploading files there will be posting updates there. So follow me for updates:
This kbin instance is also the new home of the FirefoxCSS community from reddit:
I have not discussed anything with Purism directly, but I am posting FOSS code to their forum and give them explicit permission to take any and all of my work here and package it into PureOS so that everyone may benefit.
Just in time for Halloween! Dress up the Firefox app on your Librem 5 to look like Firefox for Android!
Added userContent.css (fenix) to fix Firefox about pages to be better fit for Librem 5 as well as a color theme to match Firefox for Android, code-named Fenix.
Added fenix_colors.css for a color theme to match Firefox for Android, (Fenix). If you do not want the Private Browsing Mode theme for the URL Bar and Nav Bar, comment out that section of code at the bottom of the file.
Added fenix.css as an alternative to true_mobile_mode.css that more closely resembles Firefox for Android (Fenix).
Added extensions_menu.css to fix the Unified Extensions Menu.
Added dynamic_popups.css and several variations so that extensions expand into a big enough popup which also supports horizontal scrolling. Works best with true_mobile_mode.css or fenix.css.
Added alt-browser-alt.css to be used with true_mobile_mode.css or fenix.css instead of browser.css. It can also be used with other styles like alt-single_tab_mode-alt.css to have the Tab Bar at the top of the screen and the Nav Bar at the bottom.
Added single_tab_mode-alt.css, true_mobile_mode-alt.css, and fenix-alt.css, to be used without alt-browser-alt.css or browser.css in order to have the Nav Bar at the top of the screen.
Added true_mobile_landscape.css and true_mobile_landscape-alt.css to have a nice landscape mode that maximizes usable space and fixes flickering popups.
Added fenix_fox.css to have a single standalone userChrome file containing all necessary code except fenix_colors.css. You can add dynamic_popups.css or another variation. fenix_fox-alt.css is the version that has the Nav Bar at the top of the screen. You will still need userContent.css (fenix).
Added fenix_one.css to have a single standalone userChrome file containing all necessary code, including fenix_colors.css. If you do not want the Private Browsing Mode theme for the URL Bar and Nav Bar, comment out that section of code at the bottom of the file. You can add dynamic_popups.css or another variation. fenix_one-alt.css is the version that has the Nav Bar at the top of the screen. You will still need userContent.css (fenix).
Added variables into many files so that they work in “Normal” and “Touch” density modes.
New CSS files:
alt-browser-alt.cssextensions_menu.csssingle_tab_mode-alt.cssalt-single_tab_mode-alt.csstrue_mobile_landscape-alt.csstrue_mobile_landscape.csstrue_mobile_mode-alt.cssdynamic_popups.cssdynamic_popups_plus.cssdynamic_popups_max.cssdynamic_popups_pro.cssdynamic_popups_pro_max.cssuserContent.css (fenix)fenix_colors.cssfenix-alt.cssfenix.cssfenix_fox-alt.cssfenix_fox.cssfenix_one-alt.cssfenix_one.cssUpdated CSS files:
appMenu.cssbrowser.csseditBookmarkPanel.csspopups.csstabmenu.cssiconized_main_menu.cssround_ui_items.cssnumbered_tabs.csstab_counter.csscustom_rules.csssingle_tab_mode.cssnew-tab-button.csstrue_mobile_mode.cssThe final post from this multi-post update is the Styles & Screenshots (post 61).
All of my most recent code is in the posts from this update (posts 55-61); ignore earlier posts.
For a summary of the updates that were applied to the October 2023 Halloween Update, see the Final Updates (post 70).
Remember that you don’t need to save all of the files in this thread; you only need the ones for the styles that you intend to use.
browser.css places Tab Bar & Nav Bar at bottom of screen.
alt-browser-alt.css places Tab Bar at top of screen and Nav Bar at bottom of screen.
Files that end with alt are to be used without any browser file, to keep Tab Bar & Nav Bar at top of screen:
single_tab_mode-alt.csstrue_mobile_mode-alt.cssfenix-alt.cssThe following files are to be used with alt-browser-alt.css, to place Tab Bar at top of screen and Nav Bar at bottom of screen:
alt-single_tab_mode-alt.csstrue_mobile_mode.cssfenix.csstrue_mobile and fenix files hide Tab Bar.
The following files can be renamed to userChrome.css, if you prefer having a single userChrome file:
fenix_fox-alt.cssfenix_fox.cssfenix_one-alt.cssfenix_one.cssWhichever userChrome file or files you decide to use, you will still need a userContent.css file.
/* Copyright 2022 Oliver Smith
* SPDX-License-Identifier: MPL-2.0 */
/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {
/*@media (max-width: 700px) {*/
/* Spawn the menu above the navigation bar (now that we've moved it to the
* bottom). Without this, it still spawns above, but only with a small
* height. This is due to the position="bottomcenter topright" attribute in
* the HTML, which we can't override via CSS. */
#appMenu-popup {
/*margin-top: -390px !important;*/
padding-left: 10px !important;
padding-right: 10px !important;
/*height: 310px;*/
/*max-height: 310px;*/
height: 330px;
max-height: 330px;
}
#appMenu-protonMainView vbox.panel-subview-body {
/*height: 300px !important;*/
/*max-height: 300px !important;*/
height: 318px !important;
max-height: 318px !important;
}
#appMenu-multiView box.panel-viewstack:first-child {
/* Use the whole space in the menu, instead of slowly increasing the
* height via animation. This animation is broken anyway due to the
* above menu size hack */
height: calc(100vh - 100px) !important;
max-height: calc(100vh - 100px) !important;
}
/* Menu content
* - configure it to have most important functions for mobile
* on one page, without scrolling. (Scrolling was only possible with the
* scrollbar on the right anyway, which is awkward when expecting to be
* able to scroll with fingers.)
* - submenus are hidden, because attempting to scroll inside them with the
* finger causes firefox to segfault. This is likely due to the menu
* positioning hack above, looks like FF can't determine the height
* properly. Help with fixing this is appreciated, the bookmarks and
* history submenus would be useful. However even without the submenus,
* the history and saved bookmarks can at least be accessed conveniently
* through the navigation search.
* - fullscreen is hidden: not available in FF for android either, the
* screen is almost used completely already, causes problems with UIs
* that don't expect apps to go fullscreen (i.e. in Phosh, as soon as
* the on screen keyboard is triggered, the top and bottom bars of Phosh
* are over the FF in fullscreen) */
#appMenu-fxa-status2, /* FF login */
#appMenu-fxa-separator, /* FF login */
/*#appMenu-new-window-button2,*/
#appMenu-protonMainView toolbarseparator, /* all separators */
/*#appMenu-save-file-button2, /* Save file can be done from Print too */
#appMenu-fullscreen-button2,
#appMenu-passwords-button, /* accessible from settings */
/*#appMenu-extensions-themes-button, /* accessible from settings */
/*#appMenu-bookmarks-button, /* submenu */
/*#appMenu-history-button, /* submenu */
/*#appMenu-more-button2, /* submenu */
/*#appMenu-help-button2, /* submenu */
.subviewbutton[shortcut]::after { /* menu shortcuts ("Ctrl+T" etc.) */
display: none !important;
}
}
/* Copyright 2022 plata
* SPDX-License-Identifier: MPL-2.0 */
/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {
/*@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;
}
}
/* Copyright 2022 Oliver Smith
* SPDX-License-Identifier: MPL-2.0 */
/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {
/*@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;
}
}
/* Copyright 2022 Oliver Smith
* SPDX-License-Identifier: MPL-2.0 */
/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {
/*@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;
}
}
/* Copyright 2022 Oliver Smith
* SPDX-License-Identifier: MPL-2.0 */
/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {
/*@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;
}
}
/* Copyright 2022 Oliver Smith
* SPDX-License-Identifier: MPL-2.0 */
/* Reduce minimum window width */
:root {
min-width: 300px !important;
}
/* Copyright 2022 Peter Mack, Oliver Smith
* SPDX-License-Identifier: MPL-2.0 */
/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {
/*@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;
}
/* Expand Tab Manager Menu */
#customizationui-widget-multiview panelview {
max-width: 100% !important;
width: 100% !important;
}
}
/* Copyright 2022 Oliver Smith
* SPDX-License-Identifier: MPL-2.0 */
/* Reduce minimum window width */
#urlbar-container {
min-width: 150px !important;
flex-shrink: 1 !important;
}
/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {
/*@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;
}
browser.css file to place the Tab Bar at the top of the screen and the Nav Bar at the bottom of the screen:/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {
/* Density variables */
:root:not([uidensity="touch"]) {
--alltabs-button-position: 3.5px !important;
--widget-overflow-margin: 22px;
--unified-extensions-panel-margin: 22px;
--customizationui-widget-panel-margin: 22px;
--appMenu-popup-margin: 22px;
--BMB_bookmarksPopup-margin: 22px;
}
:root[uidensity="touch"] {
--alltabs-button-position: 4.5px !important;
--widget-overflow-margin: 23px;
--unified-extensions-panel-margin: 23px;
--customizationui-widget-panel-margin: 23px;
--appMenu-popup-margin: 23px;
--BMB_bookmarksPopup-margin: 23px;
}
:root:not([uidensity="touch"],[inFullscreen]) {
--uc-bottom-toolbar-height: calc(39px + var(--toolbarbutton-outer-padding) )
}
:root[uidensity="touch"]:not([inFullscreen]){
--uc-bottom-toolbar-height: calc(43px + var(--toolbarbutton-outer-padding) )
}
/* Hide Nav Bar and Tab Bar when in Fullscreen mode and hide and Title Bar */
#nav-bar[inFullscreen],
#TabsToolbar[inFullscreen],
.titlebar-buttonbox-container {
display: none;
}
/* Move Nav Bar to bottom */
#browser,
#customization-container {
margin-bottom: var(--uc-bottom-toolbar-height,0px)
}
#nav-bar{
position: fixed !important;
bottom: 0px;
width: 100%;
z-index: 1;
}
.panel-viewstack {
max-height: unset !important;
}
/* Adjust Widget Overflow Menu (») spawn height */
#widget-overflow {
margin-bottom: var(--widget-overflow-margin) !important;
}
/* Adjust Unified Extensions Menu spawn height */
#unified-extensions-panel {
margin-bottom: var(--unified-extensions-panel-margin) !important;
}
/* Adjust Tab Manager Menu spawn height */
#customizationui-widget-panel {
margin-bottom: var(--customizationui-widget-panel-margin) !important;
}
/* Adjust Main App Menu (≡) spawn height */
#appMenu-popup {
margin-bottom: var(--appMenu-popup-margin) !important;
}
/* Adjust Bookmarks Menu (★) spawn height */
#BMB_bookmarksPopup {
margin-bottom: var(--BMB_bookmarksPopup-margin) !important;
}
}
/* 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;
}
/* 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;
}
/* 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 in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {
/* 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;
}
}
/* 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;
}*/
/* 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;
}
/* 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 in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {
/* 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;
}
}
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_animated_active_border.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Creates a colorful animated border around active tab */
@keyframes filter {
from {
filter: hue-rotate(0deg)
}
to {
filter: hue-rotate(360deg)
}
}
.tabbrowser-tab[selected] > .tab-stack::before {
grid-area: 1/1;
content: "";
display: inherit;
margin-block: var(--tab-block-margin);
border-radius: var(--tab-border-radius);
z-index: 0;
background-image: conic-gradient(
hsl(0 100% 70%),
hsl(60 100% 45%) 70deg,
hsl(120 100% 55%) 105deg,
hsl(160 100% 60%) 160deg,
hsl(200 100% 60%) 200deg,
hsl(240 100% 65%) 255deg,
hsl(300 100% 60%) 290deg,
hsl(360 100% 70%) 360deg);
background-size: cover;
background-position: center;
animation: filter steps(30) 2s infinite;
}
.tab-background[selected] {
border: 1px solid transparent !important;
outline: none !important;
background-clip: padding-box !important;
}
/* 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;
}
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {
/* 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;
}
}
/* 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 in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {
/* 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;
}
}
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/******************************************/
/* IMPORTANT: */
/* */
/* One of the things this code will do is */
/* to move the Tab Manager Menu button to */
/* the right side of the URL Bar. */
/* */
/* For the best results, consider moving */
/* the Unified Extensions Menu button to */
/* the left of the URL Bar and removing */
/* less important toolbar items by using */
/* the "Customize Toolbar" feature, or by */
/* using a user.js file in your profile. */
/******************************************/
/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {
/* Density variables */
:root:not([uidensity="touch"]) {
--PanelUI-menu-button-position: 4px;
--alltabs-button-height: 32px;
--alltabs-button-width: 32px;
--alltabs-button-position: 48px;
--alltabs-number-position: calc(var(--toolbarbutton-inner-padding) * 1.5 );
--urlbar-width: calc(100vw - 166px);
}
:root[uidensity="touch"] {
--PanelUI-menu-button-position: 5px;
--alltabs-button-height: 34px;
--alltabs-button-width: 34px;
--alltabs-button-position: 54px;
--alltabs-number-position: calc(var(--toolbarbutton-inner-padding) * 1.5 );
--urlbar-width: calc(100vw - 171.5px);
}
/* Hide Nav Bar and Tab Bar when in Fullscreen mode and hide Title Bar, Newtab button, and New-tab button */
#nav-bar[inFullscreen],
#TabsToolbar[inFullscreen],
.titlebar-buttonbox-container,
#new-tab-button,
#tabs-newtab-button {
display: none !important;
}
/* Hide unpinned inactive tabs */
.tabbrowser-tab:not([pinned]):not([selected]) {
visibility: collapse !important;
min-width: 0 !important;
}
/* Expand unpinned active tab */
#tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] {
min-width: 100% !important;
}
#tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned])[selected] {
min-width: 83.5% !important;
}
/* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */
#PanelUI-menu-button {
position: absolute !important;
right: 0px !important;
bottom: var(--PanelUI-menu-button-position) !important;
}
/* Move Tab Manager Menu button to right of URL Bar */
:root {
--tab-border-radius: var(--toolbarbutton-border-radius) !important;
}
#alltabs-button > .toolbarbutton-badge-stack {
height: var(--alltabs-button-height) !important;
width: var(--alltabs-button-width) !important;
}
#alltabs-button {
position: absolute;
top: var(--alltabs-button-position) !important;
right: 41.5px;
z-index: 2 !important;
}
#alltabs-button > .toolbarbutton-badge-stack::before {
bottom: calc(var(--toolbarbutton-inner-padding) * 0.7 ) !important;
}
/* Allow room for Tab Manager Menu button */
#nav-bar {
padding-right: 67px !important;
}
/* Reduce URL Bar width */
#urlbar-container {
max-width: var(--urlbar-width) !important;
}
}
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/******************************************/
/* IMPORTANT: */
/* */
/* One of the things this code will do is */
/* to move the Tab Manager Menu button to */
/* the right side of the URL Bar. */
/* */
/* For the best results, consider moving */
/* the Unified Extensions Menu button to */
/* the left of the URL Bar and removing */
/* less important toolbar items by using */
/* the "Customize Toolbar" feature, or by */
/* using a user.js file in your profile. */
/******************************************/
/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {
/* Density variables */
:root:not([uidensity="touch"]) {
--PanelUI-menu-button-position: 4px;
--alltabs-button-height: 32px;
--alltabs-button-width: 32px;
--alltabs-button-position: 3.5px;
--alltabs-number-position: calc(var(--toolbarbutton-inner-padding) * 1.5 );
--urlbar-width: calc(100vw - 166px);
}
:root[uidensity="touch"] {
--PanelUI-menu-button-position: 5px;
--alltabs-button-height: 34px;
--alltabs-button-width: 34px;
--alltabs-button-position: 4.5px;
--alltabs-number-position: calc(var(--toolbarbutton-inner-padding) * 1.5 );
--urlbar-width: calc(100vw - 171.5px);
}
/* Hide Nav Bar and Tab Bar when in Fullscreen mode and hide Title Bar, Newtab button, and New-tab button */
#nav-bar[inFullscreen],
#TabsToolbar[inFullscreen],
.titlebar-buttonbox-container,
#new-tab-button,
#tabs-newtab-button {
display: none !important;
}
/* Hide unpinned inactive tabs */
.tabbrowser-tab:not([pinned]):not([selected]) {
visibility: collapse !important;
min-width: 0 !important;
}
/* Expand unpinned active tab */
#tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] {
min-width: 100% !important;
}
#tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned])[selected] {
min-width: 83.5% !important;
}
/* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */
#PanelUI-menu-button {
position: absolute !important;
right: 0px !important;
bottom: var(--PanelUI-menu-button-position) !important;
}
/* Move Tab Manager Menu button to right of URL Bar */
:root {
--tab-border-radius: var(--toolbarbutton-border-radius) !important;
}
#alltabs-button > .toolbarbutton-badge-stack {
height: var(--alltabs-button-height) !important;
width: var(--alltabs-button-width) !important;
}
#alltabs-button {
position: absolute;
bottom: var(--alltabs-button-position) !important;
right: 41.5px;
z-index: 2 !important;
}
#alltabs-button > .toolbarbutton-badge-stack::before {
bottom: calc(var(--toolbarbutton-inner-padding) * 0.7 ) !important;
}
/* Allow room for Tab Manager Menu button */
#nav-bar {
padding-right: 67px !important;
}
/* Reduce URL Bar width */
#urlbar-container {
max-width: var(--urlbar-width) !important;
}
}
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/******************************************/
/* IMPORTANT: */
/* */
/* One of the things this code will do is */
/* to move the Tab Manager Menu button to */
/* the right side of the URL Bar. */
/* */
/* For the best results, consider moving */
/* the Unified Extensions Menu button to */
/* the left of the URL Bar and removing */
/* less important toolbar items by using */
/* the "Customize Toolbar" feature, or by */
/* using a user.js file in your profile. */
/******************************************/
/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {
/* Density variables */
:root:not([uidensity="touch"]) {
--PanelUI-menu-button-position: 4px;
--alltabs-button-height: 32px;
--alltabs-button-width: 32px;
--alltabs-button-position: 4.5px;
--alltabs-number-position: calc(var(--toolbarbutton-inner-padding) * 1.5 );
--urlbar-width: calc(100vw - 166px);
}
:root[uidensity="touch"] {
--PanelUI-menu-button-position: 5px;
--alltabs-button-height: 34px;
--alltabs-button-width: 34px;
--alltabs-button-position: 5.5px;
--alltabs-number-position: calc(var(--toolbarbutton-inner-padding) * 1.5 );
--urlbar-width: calc(100vw - 171.5px);
}
/* Hide Nav Bar and Tab Bar when in Fullscreen mode and hide Title Bar, Newtab button, and New-tab button */
#nav-bar[inFullscreen],
#TabsToolbar[inFullscreen],
.titlebar-buttonbox-container,
#new-tab-button,
#tabs-newtab-button {
display: none !important;
}
/* Hide unpinned inactive tabs */
.tabbrowser-tab:not([pinned]):not([selected]) {
visibility: collapse !important;
min-width: 0 !important;
}
/* Expand unpinned active tab */
#tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] {
min-width: 100% !important;
}
#tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned])[selected] {
min-width: 83.5% !important;
}
/* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */
#PanelUI-menu-button {
position: absolute !important;
right: 0px !important;
bottom: var(--PanelUI-menu-button-position) !important;
}
/* Move Tab Manager Menu button to right of URL Bar */
:root {
--tab-border-radius: var(--toolbarbutton-border-radius) !important;
}
#alltabs-button > .toolbarbutton-badge-stack {
height: var(--alltabs-button-height) !important;
width: var(--alltabs-button-width) !important;
}
#alltabs-button {
position: absolute;
bottom: var(--alltabs-button-position) !important;
right: 41.5px;
z-index: 2 !important;
}
#alltabs-button > .toolbarbutton-badge-stack::before {
bottom: calc(var(--toolbarbutton-inner-padding) * 0.7 ) !important;
}
/* Allow room for Tab Manager Menu button */
#nav-bar {
padding-right: 67px !important;
}
/* Reduce URL Bar width */
#urlbar-container {
max-width: var(--urlbar-width) !important;
}
}
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {
/* Remove Tab Manager Menu button */
#alltabs-button {
display: none !important;
}
}
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {
/* Hide Newtab and New-tab buttons */
#new-tab-button,
#tabs-newtab-button {
display: none !important;
}
}
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {
/* Hide non-overflow Newtab button */
#tabs-newtab-button {
display: none !important;
}
/* Display overflow New-tab button by default and fix alignment */
#new-tab-button {
display: initial !important;
margin-top: 4px !important;
}
}
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Tab min-width resizing */
#tabbrowser-tabs {
--tab-min-width: 24vw !important;
}
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Inactive tab glow on hover */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected]) {
filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
}
/* Newtab buttons (+) and Tab Manager button (v) glow on hover */
#alltabs-button:hover > .toolbarbutton-badge-stack,
#new-tab-button:hover,
#tabs-newtab-button:hover {
filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
}
/* Back button glow on hover */
#back-button:not([disabled]):hover > .toolbarbutton-icon {
filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
}
/* Forward button glow on hover */
#forward-button:not([disabled]):hover > .toolbarbutton-icon {
filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
}
/* Urlbar glow */
#urlbar {
filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
}
/* Urlbar glow on focus */
#urlbar[focused] {
filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
box-shadow: 0 0 3px var(--uc-icon-glow-secondary) !important;
}
/* Urlbar glow on hover */
#urlbar:hover {
filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
box-shadow: 0 0 3px var(--uc-icon-glow-secondary) !important;
}
/* Navbar buttons glow */
#nav-bar toolbarbutton:hover:not(#back-button):not(#forward-button) {
filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
}
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Inactive tab color */
.tabbrowser-tab:not(:hover,[pinned], [selected]) > .tab-stack > .tab-background {
background-color: var(--lwt-selected-tab-background-color) !important;
}
/* Inactive tab color on hover */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected]) {
background-color: var(--lwt-accent-color-inactive) !important;
}
/* Inactive pinned tab icon color */
.tab-icon-image[pinned]:not([selected]) {
color: var(--lwt-accent-color) !important;
}
/* Inactive tab text and close button (x) color */
.tab-text:not([pinned]):not([selected]),
.tab-icon-image:not([pinned]):not([selected]),
.tab-close-button:not([pinned]):not([selected]) {
color: var(--lwt-text-color) !important;
}
/* Inactive tab text and close button (x) color on hover */
.tabbrowser-tab:not([selected]):hover .tab-text,
.tabbrowser-tab:not([selected]):hover .tab-icon-image,
.tabbrowser-tab:not([selected]):hover .tab-close-button {
color: var(--lwt-accent-color) !important;
}
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/* Tab color */
.tab-background {
background-color: transparent !important;
}
/* Tab border */
.tab-background[selected] {
border: 0 transparent !important;
}
single_tab_mode-alt.css = Tab Bar & Nav Bar at top of screen
alt-single_tab_mode-alt.css = Tab Bar at top of screen + Nav Bar at bottom of screen
single_tab_mode.css = Tab Bar & Nav Bar at bottom of screen