mirror of
https://codeberg.org/claui/mobile-config-firefox.git
synced 2025-04-04 19:08:29 +00:00
8cbf7c9e30
Without this fix, the tab menu is only tall enough for 2 or 3 entries. This is an update of the rule directly above it, changing the ID and changing from a calculated height to a fixed height matching its child #allTabsMenu-allTabsView. With the calculated height, the menu entries were offset above the top of the menu. The previous rule no longer seems to be necessary, at least in Firefox 102 and newer, since #allTabsMenu-multiView does not exist.
85 lines
3 KiB
CSS
85 lines
3 KiB
CSS
/* Copyright 2022 Peter Mack, Oliver Smith
|
|
* SPDX-License-Identifier: MPL-2.0 */
|
|
|
|
@media (max-width: 700px) {
|
|
/* Even when not in private browsing mode, reserve space to the right of
|
|
* the tab bar for the private-browsing-indicator (that mask icon). This
|
|
* gives the tab bar a consistent width in both the regular and the private
|
|
* browsing mode, so the increased width hack below looks good in both. */
|
|
#titlebar {
|
|
padding-right: 30px;
|
|
}
|
|
hbox.private-browsing-indicator {
|
|
position: fixed !important;
|
|
right: 0px;
|
|
bottom: 50px;
|
|
display: block;
|
|
}
|
|
|
|
/* Increase tab width, to have more space for displaying the title of the
|
|
* website and to make the "all tabs" button show up. */
|
|
#tabbrowser-tabs {
|
|
--tab-min-width: calc(100vw - 116px) !important;
|
|
}
|
|
|
|
/* Rotate the arrow on the "all tabs" button to point upwards, since the
|
|
* tabs and searchbar were moved to the bottom. */
|
|
#alltabs-button {
|
|
transform: rotate(180deg) !important;
|
|
}
|
|
|
|
/* All tabs menu: hide scroll buttons */
|
|
#scrollbutton-up, #scrollbutton-down {
|
|
display: none !important;
|
|
}
|
|
|
|
/* All tabs menu: hide the search and the separator below it. */
|
|
#allTabsMenu-searchTabs,
|
|
#allTabsMenu-tabsSeparator {
|
|
display: none;
|
|
}
|
|
|
|
/* Similar hack to what's in appMenu.css to properly spawn the "all tabs"
|
|
* popup above the navigation menu */
|
|
#customizationui-widget-panel {
|
|
/* Further up than appmenu, because the "all tabs" button that spawns
|
|
* this menu is above the hamburger button that spawns the regular
|
|
* menu. */
|
|
margin-top: -360px !important;
|
|
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. */
|
|
-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;
|
|
}
|
|
|
|
#allTabsMenu-allTabsViewTabs {
|
|
/* Make sure tabs with long titles don't exceed the all tabs menu */
|
|
max-width: calc(100vw - 20px);
|
|
}
|
|
}
|