204 lines
6.4 KiB
CSS
204 lines
6.4 KiB
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 (max-height: 300px) {
|
|
|
|
/* Density variables */
|
|
:root:not([uidensity="touch"]) {
|
|
--PanelUI-menu-button-position: 4px;
|
|
--alltabs-button-height: 32px;
|
|
--alltabs-button-width: 32px;
|
|
--alltabs-button-position: 4px;
|
|
--urlbar-width: calc(100vw - 205.5px);
|
|
}
|
|
:root[uidensity="touch"] {
|
|
--PanelUI-menu-button-position: 5px;
|
|
--alltabs-button-height: 34px;
|
|
--alltabs-button-width: 34px;
|
|
--alltabs-button-position: 5px;
|
|
--urlbar-width: calc(100vw - 209.5px);
|
|
}
|
|
|
|
/* Remove items from Main App Menu (≡) */
|
|
#appMenu-fxa-status2,
|
|
#appMenu-fxa-separator,
|
|
#appMenu-protonMainView toolbarseparator,
|
|
#appMenu-fullscreen-button2,
|
|
#appMenu-passwords-button,
|
|
.subviewbutton[shortcut]::after {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Remove extra space above zoom controls in Main App Menu (≡) */
|
|
#appMenu-zoom-controls {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
/* Fix flickering of Main App Menu (≡) */
|
|
#appMenu-popup {
|
|
width: 260px !important;
|
|
}
|
|
#appMenu-protonMainView vbox.panel-subview-body {
|
|
height: 253px !important;
|
|
max-height: 253px !important;
|
|
width: 250px !important;
|
|
}
|
|
|
|
/* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */
|
|
#PanelUI-menu-button {
|
|
position: absolute !important;
|
|
right: 0px !important;
|
|
bottom: var(--PanelUI-menu-button-position) !important;
|
|
}
|
|
|
|
/* Hide Tab Bar and Private Browsing indicator */
|
|
#tabbrowser-tabs,
|
|
#private-browsing-indicator-with-label {
|
|
visibility: collapse !important;
|
|
}
|
|
|
|
/* Edit Bookmark Panel */
|
|
#editBookmarkPanel {
|
|
background-color: var(--arrowpanel-background) !important;
|
|
max-height: 100vh !important;
|
|
max-width: 100vw !important;
|
|
width: 100vw !important;
|
|
}
|
|
#editBookmarkPanel box.panel-header,
|
|
#editBookmarkHeaderSeparator,
|
|
#editBookmarkPanelInfoArea,
|
|
#editBookmarkSeparator,
|
|
#editBMPanel_folderRow,
|
|
#editBMPanel_tagsRow {
|
|
display: none !important;
|
|
}
|
|
#editBookmarkPanelContent {
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
}
|
|
#editBookmarkPanelBottomButtons {
|
|
margin-top: -5px !important;
|
|
margin-left: -50px !important;
|
|
}
|
|
|
|
/* Remove items from Tab Manager Menu */
|
|
#allTabsMenu-searchTabs,
|
|
#allTabsMenu-tabsSeparator {
|
|
display: none;
|
|
}
|
|
|
|
/* Fix flickering of Tab Manager Menu and extension popups */
|
|
#customizationui-widget-panel,
|
|
#customizationui-widget-multiview box.panel-viewstack {
|
|
height: calc(100vh - 35px) !important;
|
|
max-height: calc(100vh - 35px) !important;
|
|
width: 100vw !important;
|
|
max-width: 100vw !important;
|
|
}
|
|
|
|
/* Move Tab Manager Menu button to right of URL Bar */
|
|
:root {
|
|
--tab-border-radius: var(--toolbarbutton-border-radius) !important;
|
|
}
|
|
#alltabs-button > .toolbarbutton-badge-stack {
|
|
height: var(--alltabs-button-height) !important;
|
|
width: var(--alltabs-button-width) !important;
|
|
}
|
|
#alltabs-button {
|
|
position: absolute;
|
|
top: var(--alltabs-button-position) !important;
|
|
right: 41.5px;
|
|
z-index: 2 !important;
|
|
}
|
|
#alltabs-button > .toolbarbutton-badge-stack::before {
|
|
bottom: calc(var(--toolbarbutton-inner-padding) * 0.7 ) !important;
|
|
}
|
|
|
|
/* Allow room for Tab Manager Menu button */
|
|
#nav-bar {
|
|
padding-right: 67px !important;
|
|
}
|
|
|
|
/* Reduce URL Bar width */
|
|
#urlbar-container {
|
|
max-width: var(--urlbar-width) !important;
|
|
}
|
|
|
|
/* Remove items from Unified Extensions Menu */
|
|
#unified-extensions-panel .panel-header,
|
|
#unified-extensions-panel toolbarseparator,
|
|
#unified-extensions-manage-extensions {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Adjust button padding and font size for secondary text in Unified Extensions Menu */
|
|
#unified-extensions-panel .subviewbutton {
|
|
padding: 6px !important;
|
|
}
|
|
.unified-extensions-item-message {
|
|
font-size: 75% !important;
|
|
}
|
|
|
|
/* Fix flickering of Unified Extensions Menu */
|
|
#unified-extensions-panel {
|
|
--uei-icon-size: 20px;
|
|
width: 360px !important;
|
|
}
|
|
#unified-extensions-view {
|
|
margin-top: 6px !important;
|
|
height: 230px !important;
|
|
max-height: 230px !important;
|
|
width: 350px !important;
|
|
}
|
|
|
|
/* Add padding to bottom of Unified Extensions Menu to look better */
|
|
#unified-extensions-area {
|
|
padding-bottom: 5px !important;
|
|
}
|
|
|
|
/* Allow extensions to use full display */
|
|
.webextension-popup-browser {
|
|
height: 100% !important;
|
|
min-height: 100% !important;
|
|
width: 100vw !important;
|
|
min-width: 100vw !important;
|
|
}
|
|
|
|
/* Adjust "Saved to Library!" popup notification */
|
|
#confirmation-hint {
|
|
padding: 10px !important;
|
|
width: 100vw !important;
|
|
}
|
|
|
|
}
|
|
|
|
/* Apply this customization only on smaller screens in portrait mode */
|
|
@media (max-width: 700px) {
|
|
|
|
/* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */
|
|
#appMenu-quit-button2 {
|
|
margin-bottom: 64px !important;
|
|
}
|
|
|
|
/* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */
|
|
#unified-extensions-area {
|
|
padding-bottom: 120px !important;
|
|
}
|
|
|
|
}
|