True Mobile Modes & Dynamic Popups:
true_mobile_landscape-alt.css
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/******************************************/
/* IMPORTANT: */
/* */
/* One of the things this code will do is */
/* to move the Tab Manager Menu button to */
/* the right side of the URL Bar. */
/* */
/* For the best results, consider moving */
/* the Unified Extensions Menu button to */
/* the left of the URL Bar and removing */
/* less important toolbar items by using */
/* the "Customize Toolbar" feature, or by */
/* using a user.js file in your profile. */
/******************************************/
/* Apply this customization only on smaller screens in landscape mode */
@media (orientation: landscape) and (max-height: 650px) {
/* Density variables */
:root:not([uidensity="touch"]) {
--PanelUI-menu-button-position: 4px;
--alltabs-button-height: 32px;
--alltabs-button-width: 32px;
--alltabs-button-position: 4px;
--urlbar-width: calc(100vw - 205.5px);
}
:root[uidensity="touch"] {
--PanelUI-menu-button-position: 5px;
--alltabs-button-height: 34px;
--alltabs-button-width: 34px;
--alltabs-button-position: 5px;
--urlbar-width: calc(100vw - 209.5px);
}
/* Remove items from Main App Menu (≡) */
#appMenu-fxa-status2,
#appMenu-fxa-separator,
#appMenu-protonMainView toolbarseparator,
#appMenu-fullscreen-button2,
#appMenu-passwords-button,
.subviewbutton[shortcut]::after {
display: none !important;
}
/* Remove extra space above zoom controls in Main App Menu (≡) */
#appMenu-zoom-controls {
margin-top: 0 !important;
}
/* Fix flickering of Main App Menu (≡) */
#appMenu-popup {
width: 260px !important;
}
#appMenu-protonMainView vbox.panel-subview-body {
height: 253px !important;
max-height: 253px !important;
width: 250px !important;
}
/* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */
#PanelUI-menu-button {
position: absolute !important;
right: 0px !important;
bottom: var(--PanelUI-menu-button-position) !important;
}
/* Hide Tab Bar and Private Browsing indicator */
#tabbrowser-tabs,
#private-browsing-indicator-with-label {
visibility: collapse !important;
}
/* Edit Bookmark Panel */
#editBookmarkPanel {
background-color: var(--arrowpanel-background) !important;
max-height: 100vh !important;
max-width: 100vw !important;
width: 100vw !important;
}
#editBookmarkPanel box.panel-header,
#editBookmarkHeaderSeparator,
#editBookmarkPanelInfoArea,
#editBookmarkSeparator,
#editBMPanel_folderRow,
#editBMPanel_tagsRow {
display: none !important;
}
#editBookmarkPanelContent {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
#editBookmarkPanelBottomButtons {
margin-top: -5px !important;
margin-left: -50px !important;
}
/* Remove items from Tab Manager Menu */
#allTabsMenu-searchTabs,
#allTabsMenu-tabsSeparator {
display: none;
}
/* Fix flickering of Tab Manager Menu and extension popups */
#customizationui-widget-panel,
#customizationui-widget-multiview box.panel-viewstack {
height: calc(100vh - 35px) !important;
max-height: calc(100vh - 35px) !important;
width: 100vw !important;
max-width: 100vw !important;
}
/* Expand Tab Manager Menu */
#customizationui-widget-multiview panelview {
max-width: 100% !important;
width: 100% !important;
}
/* Move Tab Manager Menu button to right of URL Bar */
:root {
--tab-border-radius: var(--toolbarbutton-border-radius) !important;
}
#alltabs-button > .toolbarbutton-badge-stack {
height: var(--alltabs-button-height) !important;
width: var(--alltabs-button-width) !important;
}
#alltabs-button {
position: absolute;
top: var(--alltabs-button-position) !important;
right: 41.5px;
z-index: 2 !important;
}
#alltabs-button > .toolbarbutton-badge-stack::before {
bottom: calc(var(--toolbarbutton-inner-padding) * 0.7 ) !important;
}
/* Allow room for Tab Manager Menu button */
#nav-bar {
padding-right: 67px !important;
}
/* Reduce URL Bar width */
#urlbar-container {
max-width: var(--urlbar-width) !important;
}
/* Remove items from Unified Extensions Menu */
#unified-extensions-panel .panel-header,
#unified-extensions-panel toolbarseparator,
#unified-extensions-manage-extensions {
display: none !important;
}
/* Adjust button padding and font size for secondary text in Unified Extensions Menu */
#unified-extensions-panel .subviewbutton {
padding: 6px !important;
}
.unified-extensions-item-message {
font-size: 75% !important;
}
/* Fix flickering of Unified Extensions Menu */
#unified-extensions-panel {
--uei-icon-size: 20px;
width: 360px !important;
}
#unified-extensions-view {
margin-top: 6px !important;
height: 230px !important;
max-height: 230px !important;
width: 350px !important;
}
/* Add padding to bottom of Unified Extensions Menu to look better */
#unified-extensions-area {
padding-bottom: 5px !important;
}
/* Allow extensions to use full display */
.webextension-popup-browser {
height: 100% !important;
min-height: 100% !important;
width: 100vw !important;
min-width: 100vw !important;
}
/* Adjust "Saved to Library!" popup notification */
#confirmation-hint {
padding: 10px !important;
width: 100vw !important;
}
}
/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {
/* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */
#appMenu-quit-button2 {
margin-bottom: 64px !important;
}
/* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */
#unified-extensions-area {
padding-bottom: 120px !important;
}
}
true_mobile_landscape.css
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/******************************************/
/* IMPORTANT: */
/* */
/* One of the things this code will do is */
/* to move the Tab Manager Menu button to */
/* the right side of the URL Bar. */
/* */
/* For the best results, consider moving */
/* the Unified Extensions Menu button to */
/* the left of the URL Bar and removing */
/* less important toolbar items by using */
/* the "Customize Toolbar" feature, or by */
/* using a user.js file in your profile. */
/******************************************/
/* Apply this customization only on smaller screens in landscape mode */
@media (orientation: landscape) and (max-height: 650px) {
/* Density variables */
:root:not([uidensity="touch"]) {
--PanelUI-menu-button-position: 4px;
--alltabs-button-height: 32px;
--alltabs-button-width: 32px;
--alltabs-button-position: 3.5px;
--urlbar-width: calc(100vw - 205.5px);
}
:root[uidensity="touch"] {
--PanelUI-menu-button-position: 5px;
--alltabs-button-height: 34px;
--alltabs-button-width: 34px;
--alltabs-button-position: 4.5px;
--urlbar-width: calc(100vw - 209.5px);
}
/* Remove items from Main App Menu (≡) */
#appMenu-fxa-status2,
#appMenu-fxa-separator,
#appMenu-protonMainView toolbarseparator,
#appMenu-fullscreen-button2,
#appMenu-passwords-button,
.subviewbutton[shortcut]::after {
display: none !important;
}
/* Remove extra space above zoom controls in Main App Menu (≡) */
#appMenu-zoom-controls {
margin-top: 0 !important;
}
/* Fix flickering of Main App Menu (≡) */
#appMenu-popup {
width: 260px !important;
}
#appMenu-protonMainView vbox.panel-subview-body {
height: 253px !important;
max-height: 253px !important;
width: 250px !important;
}
/* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */
#PanelUI-menu-button {
position: absolute !important;
right: 0px !important;
bottom: var(--PanelUI-menu-button-position) !important;
}
/* Hide Tab Bar and Private Browsing indicator */
#tabbrowser-tabs,
#private-browsing-indicator-with-label {
visibility: collapse !important;
}
/* Move Nav Bar to bottom */
:root:not([uidensity="touch"],[inFullscreen]) {
--uc-bottom-toolbar-height: calc(39px + var(--toolbarbutton-outer-padding) )
}
:root[uidensity="touch"]:not([inFullscreen]){
--uc-bottom-toolbar-height: calc(43px + var(--toolbarbutton-outer-padding) )
}
#browser,
#customization-container {
margin-bottom: var(--uc-bottom-toolbar-height,0px)
}
#nav-bar{
position: fixed !important;
bottom: 0px;
width: 100%;
z-index: 1;
}
#nav-bar[inFullscreen],
#TabsToolbar[inFullscreen],
.titlebar-buttonbox-container {
display: none;
}
.panel-viewstack {
max-height: unset !important;
}
/* Edit Bookmark Panel */
#editBookmarkPanel {
background-color: var(--arrowpanel-background) !important;
max-height: 100vh !important;
max-width: 100vw !important;
width: 100vw !important;
}
#editBookmarkPanel box.panel-header,
#editBookmarkHeaderSeparator,
#editBookmarkPanelInfoArea,
#editBookmarkSeparator,
#editBMPanel_folderRow,
#editBMPanel_tagsRow {
display: none !important;
}
#editBookmarkPanelContent {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
#editBookmarkPanelBottomButtons {
margin-top: -5px !important;
margin-left: -50px !important;
}
/* Remove items from Tab Manager Menu */
#allTabsMenu-searchTabs,
#allTabsMenu-tabsSeparator {
display: none;
}
/* Fix flickering of Tab Manager Menu and extension popups */
#customizationui-widget-panel,
#customizationui-widget-multiview box.panel-viewstack {
height: calc(100vh - 35px) !important;
max-height: calc(100vh - 35px) !important;
width: 100vw !important;
max-width: 100vw !important;
}
/* Expand Tab Manager Menu */
#customizationui-widget-multiview panelview {
max-width: 100% !important;
width: 100% !important;
}
/* Move Tab Manager Menu button to right of URL Bar */
:root {
--tab-border-radius: var(--toolbarbutton-border-radius) !important;
}
#alltabs-button > .toolbarbutton-badge-stack {
height: var(--alltabs-button-height) !important;
width: var(--alltabs-button-width) !important;
}
#alltabs-button {
position: absolute;
bottom: var(--alltabs-button-position) !important;
right: 41.5px;
z-index: 2 !important;
}
#alltabs-button > .toolbarbutton-badge-stack::before {
bottom: calc(var(--toolbarbutton-inner-padding) * 0.7 ) !important;
}
/* Allow room for Tab Manager Menu button */
#nav-bar {
padding-right: 67px !important;
}
/* Reduce URL Bar width */
#urlbar-container {
max-width: var(--urlbar-width) !important;
}
/* Remove items from Unified Extensions Menu */
#unified-extensions-panel .panel-header,
#unified-extensions-panel toolbarseparator,
#unified-extensions-manage-extensions {
display: none !important;
}
/* Adjust button padding and font size for secondary text in Unified Extensions Menu */
#unified-extensions-panel .subviewbutton {
padding: 6px !important;
}
.unified-extensions-item-message {
font-size: 75% !important;
}
/* Fix flickering of Unified Extensions Menu */
#unified-extensions-panel {
--uei-icon-size: 20px;
width: 360px !important;
}
#unified-extensions-view {
margin-top: 6px !important;
height: 230px !important;
max-height: 230px !important;
width: 350px !important;
}
/* Add padding to bottom of Unified Extensions Menu to look better */
#unified-extensions-area {
padding-bottom: 5px !important;
}
/* Allow extensions to use full display */
.webextension-popup-browser {
height: 100% !important;
min-height: 100% !important;
width: 100vw !important;
min-width: 100vw !important;
}
/* Adjust "Saved to Library!" popup notification */
#confirmation-hint {
padding: 10px !important;
width: 100vw !important;
}
}
/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {
/* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */
#appMenu-quit-button2 {
margin-bottom: 64px !important;
}
/* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */
#unified-extensions-area {
padding-bottom: 120px !important;
}
}
true_mobile_mode-alt.css
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/******************************************/
/* IMPORTANT: */
/* */
/* One of the things this code will do is */
/* to move the Tab Manager Menu button to */
/* the right side of the URL Bar. */
/* */
/* For the best results, consider moving */
/* the Unified Extensions Menu button to */
/* the left of the URL Bar and removing */
/* less important toolbar items by using */
/* the "Customize Toolbar" feature, or by */
/* using a user.js file in your profile. */
/******************************************/
/* 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: 4px;
--urlbar-width: calc(100vw - 166px);
}
:root[uidensity="touch"] {
--PanelUI-menu-button-position: 5px;
--alltabs-button-height: 34px;
--alltabs-button-width: 34px;
--alltabs-button-position: 5px;
--urlbar-width: calc(100vw - 171.5px);
}
/* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */
#PanelUI-menu-button {
position: absolute !important;
right: 0px !important;
bottom: var(--PanelUI-menu-button-position) !important;
}
/* Hide Tab Bar and Private Browsing Indicator */
#tabbrowser-tabs,
#private-browsing-indicator-with-label {
visibility: collapse !important;
}
/* Move Tab Manager Menu button to right of urlbar */
:root {
--tab-border-radius: var(--toolbarbutton-border-radius) !important;
}
#alltabs-button > .toolbarbutton-badge-stack {
height: var(--alltabs-button-height) !important;
width: var(--alltabs-button-width) !important;
}
#alltabs-button {
position: absolute;
top: var(--alltabs-button-position) !important;
right: 41.5px;
z-index: 2 !important;
}
#alltabs-button > .toolbarbutton-badge-stack::before {
bottom: calc(var(--toolbarbutton-inner-padding) * 0.7 ) !important;
}
/* Allow room for Tab Manager Menu button */
#nav-bar {
padding-right: 67px !important;
}
/* Reduce URL Bar width */
#urlbar-container {
max-width: var(--urlbar-width) !important;
}
}
true_mobile_mode.css
/* Copyright 2023 user0
* SPDX-License-Identifier: MPL-2.0 */
/******************************************/
/* IMPORTANT: */
/* */
/* One of the things this code will do is */
/* to move the Tab Manager Menu button to */
/* the right side of the URL Bar. */
/* */
/* For the best results, consider moving */
/* the Unified Extensions Menu button to */
/* the left of the URL Bar and removing */
/* less important toolbar items by using */
/* the "Customize Toolbar" feature, or by */
/* using a user.js file in your profile. */
/******************************************/
/* 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;
--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;
--urlbar-width: calc(100vw - 171.5px);
}
/* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */
#PanelUI-menu-button {
position: absolute !important;
right: 0px !important;
bottom: var(--PanelUI-menu-button-position) !important;
}
/* Hide Tab Bar and Private Browsing Indicator */
#tabbrowser-tabs,
#private-browsing-indicator-with-label {
visibility: collapse !important;
}
/* Move Tab Manager Menu button to right of urlbar */
:root {
--tab-border-radius: var(--toolbarbutton-border-radius) !important;
}
#alltabs-button > .toolbarbutton-badge-stack {
height: var(--alltabs-button-height) !important;
width: var(--alltabs-button-width) !important;
}
#alltabs-button {
position: absolute;
bottom: var(--alltabs-button-position) !important;
right: 41.5px;
z-index: 2 !important;
}
#alltabs-button > .toolbarbutton-badge-stack::before {
bottom: calc(var(--toolbarbutton-inner-padding) * 0.7 ) !important;
}
/* Allow room for Tab Manager Menu button */
#nav-bar {
padding-right: 67px !important;
}
/* Reduce URL Bar width */
#urlbar-container {
max-width: var(--urlbar-width) !important;
}
}
dynamic_popups.css
/* 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"]) {
--unified-extensions-panel-padding: 112px;
--customizationui-widget-panel-padding: 112px;
}
:root[uidensity="touch"] {
--unified-extensions-panel-padding: 110px;
--customizationui-widget-panel-padding: 110px;
}
/* Dynamically expand popups */
#unified-extensions-view {
height: calc(100vh - 171px) !important;
max-height: calc(100vh - 171px) !important;
}
#customizationui-widget-multiview box.panel-viewstack {
height: calc(100vh - 165px) !important;
max-height: calc(100vh - 165px) !important;
}
#appMenu-popup,
#appMenu-protonMainView vbox.panel-subview-body {
margin-top: 0 !important;
height: calc(100vh - 107px) !important;
max-height: calc(100vh - 107px) !important;
}
/* Adjust Unified Extensions Menu and Tab Manager Menu to fill screen width */
#unified-extensions-panel,
#customizationui-widget-panel {
padding: 0 !important;
}
#customizationui-widget-multiview {
width: 100vw !important;
}
#allTabsMenu-allTabsView-tabs {
max-width: calc(100vw - 10px) !important;
}
#unified-extensions-view,
#allTabsMenu-containerTabsButton,
.all-tabs-item {
width: calc(100vw - 10px) !important;
}
/* Adjust Unified Extensions Menu spawn height */
#unified-extensions-panel {
margin-bottom: 6px !important;
padding-top: var(--unified-extensions-panel-padding) !important;
}
/* Adjust Tab Manager Menu spawn height */
#customizationui-widget-panel {
margin-bottom: 6px !important;
padding-top: var(--customizationui-widget-panel-padding) !important;
}
/* Blend panels into background */
#unified-extensions-panel,
#customizationui-widget-panel {
background-color: black !important;
}
/* Allow extensions to use full popup */
.webextension-popup-browser {
height: 100% !important;
min-height: 100% !important;
width: 100vw !important;
min-width: 100vw !important;
}
/* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */
#unified-extensions-area {
padding-bottom: 350px !important;
}
/* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */
#appMenu-quit-button2 {
margin-bottom: 300px !important;
}
}
dynamic_popups_plus.css
/* 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"]) {
--unified-extensions-panel-padding: 25px;
--customizationui-widget-panel-padding: 25px;
}
:root[uidensity="touch"] {
--unified-extensions-panel-padding: 22px;
--customizationui-widget-panel-padding: 22px;
}
/* Dynamically expand popups */
#unified-extensions-view {
height: calc(100vh - 100px) !important;
max-height: calc(100vh - 100px) !important;
}
#customizationui-widget-multiview box.panel-viewstack {
height: calc(100vh - 95px) !important;
max-height: calc(100vh - 95px) !important;
}
#appMenu-popup,
#appMenu-protonMainView vbox.panel-subview-body {
margin-top: 0 !important;
height: calc(100vh - 107px) !important;
max-height: calc(100vh - 107px) !important;
}
/* Adjust Unified Extensions Menu spawn height */
#unified-extensions-panel {
margin-bottom: 6px !important;
padding-top: var(--unified-extensions-panel-padding) !important;
padding-bottom: 17px !important;
}
/* Adjust Tab Manager Menu spawn height */
#customizationui-widget-panel {
margin-bottom: 6px !important;
padding-top: var(--customizationui-widget-panel-padding) !important;
padding-bottom: 17px !important;
}
/* Blend panels into background */
#unified-extensions-panel,
#customizationui-widget-panel {
background-color: black !important;
}
/* Allow extensions to use full popup */
.webextension-popup-browser {
height: 100% !important;
min-height: 100% !important;
width: calc(100vw - 20px) !important;
min-width: calc(100vw - 20px) !important;
}
/* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */
#unified-extensions-area {
padding-bottom: 350px !important;
}
/* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */
#appMenu-quit-button2 {
margin-bottom: 300px !important;
}
}
dynamic_popups_max.css
/* 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"]) {
--unified-extensions-view-height: calc(100vh - 57px);
--customizationui-widget-height: calc(100vh - 51px);
--unified-extensions-panel-margin: 5px;
--customizationui-widget-panel-margin: 5px;
}
:root[uidensity="touch"] {
--unified-extensions-view-height: calc(100vh - 61px);
--customizationui-widget-height: calc(100vh - 55px);
--unified-extensions-panel-margin: 6px;
--customizationui-widget-panel-margin: 6px;
}
/* Dynamically expand popups */
#unified-extensions-view {
height: var(--unified-extensions-view-height) !important;
max-height: var(--unified-extensions-view-height) !important;
}
#customizationui-widget-multiview box.panel-viewstack {
height: var(--customizationui-widget-height) !important;
max-height: var(--customizationui-widget-height) !important;
}
#appMenu-popup,
#appMenu-protonMainView vbox.panel-subview-body {
margin-top: 0 !important;
height: calc(100vh - 107px) !important;
max-height: calc(100vh - 107px) !important;
}
/* Adjust Unified Extensions Menu and Tab Manager Menu to fill screen width */
#unified-extensions-panel,
#customizationui-widget-panel {
padding: 0 !important;
}
#customizationui-widget-multiview {
width: 100vw !important;
}
#allTabsMenu-allTabsView-tabs {
max-width: calc(100vw - 10px) !important;
}
#unified-extensions-view,
#allTabsMenu-containerTabsButton,
.all-tabs-item {
width: calc(100vw - 10px) !important;
}
/* Adjust Unified Extensions Menu spawn height */
#unified-extensions-panel {
margin-bottom: var(--unified-extensions-panel-margin) !important;
}
/* Adjust Tab Manager Menu spawn height */
#customizationui-widget-panel {
margin-bottom: var(--customizationui-widget-panel-margin) !important;
}
/* Blend panels into background */
#unified-extensions-panel,
#customizationui-widget-panel {
background-color: black !important;
}
/* Allow extensions to use full popup */
.webextension-popup-browser {
height: 100% !important;
min-height: 100% !important;
width: 100vw !important;
min-width: 100vw !important;
}
/* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */
#unified-extensions-area {
padding-bottom: 370px !important;
}
/* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */
#appMenu-quit-button2 {
margin-bottom: 300px !important;
}
}
dynamic_popups_pro.css
/* 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) {
/* Dynamically expand popups */
#unified-extensions-view {
height: calc(100vh - 171px) !important;
max-height: calc(100vh - 171px) !important;
}
#customizationui-widget-multiview box.panel-viewstack {
height: calc(100vh - 165px) !important;
max-height: calc(100vh - 165px) !important;
}
#appMenu-popup,
#appMenu-protonMainView vbox.panel-subview-body {
margin-top: 0 !important;
height: calc(100vh - 107px) !important;
max-height: calc(100vh - 107px) !important;
}
/* Adjust Unified Extensions Menu and Tab Manager Menu to fill screen width */
#unified-extensions-panel,
#customizationui-widget-panel {
padding: 0 !important;
}
#customizationui-widget-multiview {
width: 100vw !important;
}
#allTabsMenu-allTabsView-tabs {
max-width: calc(100vw - 10px) !important;
}
#unified-extensions-view,
#allTabsMenu-containerTabsButton,
.all-tabs-item {
width: calc(100vw - 10px) !important;
}
/* Adjust Unified Extensions Menu spawn height */
#unified-extensions-panel {
margin-bottom: 6px !important;
}
/* Adjust Tab Manager Menu spawn height */
#customizationui-widget-panel {
margin-bottom: 6px !important;
}
/* Blend panels with views */
panel {
/* Default color: */
/*--panel-background: var(--arrowpanel-background) !important;*/
/* Fenix color: */
--panel-background: var(--toolbar-bgcolor) !important;
--panel-shadow: none !important;
}
#unified-extensions-panel {
background-color: var(--arrowpanel-background) !important;
}
#customizationui-widget-panel {
/* Default color: */
/*background-color: var(--arrowpanel-background) !important;*/
/* Fenix color: */
background-color: var(--toolbar-bgcolor) !important;
}
/* Allow extensions to use full popup */
.webextension-popup-browser {
height: 100% !important;
min-height: 100% !important;
width: 100vw !important;
min-width: 100vw !important;
}
/* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */
#unified-extensions-area {
padding-bottom: 350px !important;
}
/* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */
#appMenu-quit-button2 {
margin-bottom: 300px !important;
}
}
dynamic_popups_pro_max.css
/* 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"]) {
--unified-extensions-view-height: calc(100vh - 57px);
--customizationui-widget-height: calc(100vh - 51px);
--unified-extensions-panel-margin: 5px;
--customizationui-widget-panel-margin: 5px;
}
:root[uidensity="touch"] {
--unified-extensions-view-height: calc(100vh - 61px);
--customizationui-widget-height: calc(100vh - 55px);
--unified-extensions-panel-margin: 6px;
--customizationui-widget-panel-margin: 6px;
}
/* Dynamically expand popups */
#unified-extensions-view {
height: var(--unified-extensions-view-height) !important;
max-height: var(--unified-extensions-view-height) !important;
}
#customizationui-widget-multiview box.panel-viewstack {
height: var(--customizationui-widget-height) !important;
max-height: var(--customizationui-widget-height) !important;
}
#appMenu-popup,
#appMenu-protonMainView vbox.panel-subview-body {
margin-top: 0 !important;
height: calc(100vh - 107px) !important;
max-height: calc(100vh - 107px) !important;
}
/* Adjust Unified Extensions Menu and Tab Manager Menu to fill screen width */
#unified-extensions-panel,
#customizationui-widget-panel {
padding: 0 !important;
}
#customizationui-widget-multiview {
width: 100vw !important;
}
#allTabsMenu-allTabsView-tabs {
max-width: calc(100vw - 10px) !important;
}
#unified-extensions-view,
#allTabsMenu-containerTabsButton,
.all-tabs-item {
width: calc(100vw - 10px) !important;
}
/* Adjust Unified Extensions Menu spawn height */
#unified-extensions-panel {
margin-bottom: var(--unified-extensions-panel-margin) !important;
}
/* Adjust Tab Manager Menu spawn height */
#customizationui-widget-panel {
margin-bottom: var(--customizationui-widget-panel-margin) !important;
}
/* Blend panels with views */
panel {
/* Default color: */
/*--panel-background: var(--arrowpanel-background) !important;*/
/* Fenix color: */
--panel-background: var(--toolbar-bgcolor) !important;
--panel-shadow: none !important;
}
#unified-extensions-panel {
background-color: var(--arrowpanel-background) !important;
}
#customizationui-widget-panel {
/* Default color: */
/*background-color: var(--arrowpanel-background) !important;*/
/* Fenix color: */
background-color: var(--toolbar-bgcolor) !important;
}
/* Allow extensions to use full popup */
.webextension-popup-browser {
height: 100% !important;
min-height: 100% !important;
width: 100vw !important;
min-width: 100vw !important;
}
/* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */
#unified-extensions-area {
padding-bottom: 370px !important;
}
/* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */
#appMenu-quit-button2 {
margin-bottom: 300px !important;
}
}
Note:
-
true_mobile_landscape-alt.css= No Tab Bar + Nav Bar at top of screen -
true_mobile_landscape.css= No Tab Bar + Nav Bar at bottom of screen -
true_mobile_mode-alt.css= No Tab Bar + Nav Bar at top of screen -
true_mobile_mode.css= No Tab Bar + Nav Bar at bottom of screen -
dynamic_popups.css= black screen + max-width popup at bottom -
dynamic_popups_plus.css= black screen + tall floating popup -
dynamic_popups_max.css= black screen + maximized popup -
dynamic_popups_pro.css= max-width popup at bottom + no curves -
dynamic_popups_pro_max.css= maximized popup + no curves
