fenix-fox/src/userChrome/true_mobile_mode-alt.css

79 lines
2.5 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 */
@media (max-width: 700px) {
/* 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;
}
}