mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2026-01-01 06:50:33 -08:00
Clean: Separated to padding
This commit is contained in:
alstjr7375
parent
2f37ac0961
commit
9514ef3827
2 changed files with 425 additions and 424 deletions
424
src/padding/_index.scss
Normal file
424
src/padding/_index.scss
Normal file
|
|
@ -0,0 +1,424 @@
|
|||
/*= Root - Reduce Padding ====================================================*/
|
||||
:root {
|
||||
/* Tab Bar */
|
||||
--proton-tab-block-margin: 2px !important; /* Original: 4px, Legacy */
|
||||
--tab-block-margin: 2px !important; /* New version of --proton-tab-block-margin */
|
||||
--inline-tab-padding: 6px !important; /* Original: 8px */
|
||||
|
||||
/* Panel */
|
||||
--arrowpanel-menuicon-padding: 8px;
|
||||
--arrowpanel-menuitem-margin: 0 var(--arrowpanel-menuicon-padding) !important; /* Original: 0 8px */
|
||||
--arrowpanel-menuitem-padding: 5px !important; /* Original: 8px */
|
||||
--arrowpanel-padding: 0.8em !important; /* Original: 16px or .cui-widget-panel, .cui-widget-panel::part(arrowcontent) => 4px 0 */
|
||||
}
|
||||
|
||||
:root[uidensity="compact"] {
|
||||
/* Tool Bar */
|
||||
--toolbarbutton-outer-padding: 2px !important; /* Original: 3px, General is 2px */
|
||||
|
||||
/* Panel */
|
||||
--arrowpanel-menuitem-padding: 3px !important; /* Original: 8px */
|
||||
}
|
||||
|
||||
:root[uidensity="touch"] {
|
||||
/* Tab Bar - Like Original */
|
||||
--proton-tab-block-margin: 4px !important; /* Original: 4px */
|
||||
--tab-block-margin: 4px !important; /* New version of --proton-tab-block-margin */
|
||||
--inline-tab-padding: 8px !important; /* Original: 8px */
|
||||
|
||||
/* Panel - Like Original */
|
||||
--arrowpanel-menuitem-padding: 8px !important; /* Original: 8px */
|
||||
}
|
||||
|
||||
/*= Tab Bar - Reduce Width, Show more tabs ===================================*/
|
||||
/* for First Tab Space */
|
||||
:root {
|
||||
--space-left-tabbar: 0px; /* If you want drag space, set to 8px */
|
||||
}
|
||||
:root:not([tabsintitlebar]) #tabbrowser-tabs:not([positionpinnedtabs]),
|
||||
:root:is([sizemode="maximized"], [sizemode="fullscreen"]) #tabbrowser-tabs:not([positionpinnedtabs]) {
|
||||
padding-inline-start: var(--space-left-tabbar) !important;
|
||||
}
|
||||
|
||||
/* Titlebar Space */
|
||||
.titlebar-spacer[type="pre-tabs"] {
|
||||
width: 30px !important; /* Original: 40px */
|
||||
}
|
||||
.titlebar-spacer[type="post-tabs"] {
|
||||
width: 25px !important; /* Original: 40px */
|
||||
}
|
||||
|
||||
/* Tabbar Buttons */
|
||||
:root {
|
||||
--newtab-button-minus-width-padding: 2px;
|
||||
--newtab-button-width-padding: calc(var(--toolbarbutton-inner-padding) - var(--newtab-button-minus-width-padding));
|
||||
}
|
||||
#new-tab-button > .toolbarbutton-icon,
|
||||
#alltabs-button > .toolbarbutton-badge-stack {
|
||||
/* Original: calc(2 * var(--toolbarbutton-inner-padding) + 16px) */
|
||||
width: calc(2 * var(--newtab-button-width-padding) + 16px) !important;
|
||||
|
||||
/* Original: --toolbarbutton-inner-padding */
|
||||
padding-left: var(--newtab-button-width-padding) !important;
|
||||
padding-right: var(--newtab-button-width-padding) !important;
|
||||
}
|
||||
|
||||
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab[first-visible-unpinned-tab] {
|
||||
margin-inline-start: 1px !important;
|
||||
}
|
||||
|
||||
:root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox {
|
||||
--scrollbtn-inner-padding: 1px;
|
||||
--scrollbtn-outer-padding: 3px;
|
||||
}
|
||||
#scrollbutton-up {
|
||||
padding-left: var(--scrollbtn-inner-padding, 4px) !important; /* Original: 4px */
|
||||
padding-right: var(--scrollbtn-outer-padding, 4px) !important;
|
||||
}
|
||||
#scrollbutton-down {
|
||||
padding-left: var(--scrollbtn-outer-padding, 4px) !important; /* Original: 4px */
|
||||
padding-right: var(--scrollbtn-inner-padding, 4px) !important;
|
||||
}
|
||||
|
||||
:root:not([uidensity="touch"]) #new-tab-button,
|
||||
#alltabs-button {
|
||||
--toolbarbutton-outer-padding: 1px; /* Original: 2px*/
|
||||
}
|
||||
|
||||
/* Tab - Max Size */
|
||||
:root {
|
||||
--tab-max-width: 240px;
|
||||
}
|
||||
.tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
|
||||
max-width: var(--tab-max-width) !important; /* Original: 225px */
|
||||
}
|
||||
|
||||
/* neighbouring tabs should "pinch" together */
|
||||
.tabbrowser-tab {
|
||||
padding-inline: 1px !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab:not([last-visible-tab]) {
|
||||
margin-inline-end: -0.5px !important;
|
||||
}
|
||||
|
||||
/*= Tab Bar - Reduce Height, Show more contents ==============================*/
|
||||
/* for Extra Drag Space */
|
||||
:root {
|
||||
--space-above-tabbar: 0px; /* If you want drag space, set to 8px */
|
||||
}
|
||||
:root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] {
|
||||
height: calc(var(--tab-min-height) + var(--space-above-tabbar));
|
||||
}
|
||||
:root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items,
|
||||
:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
|
||||
padding-top: var(--space-above-tabbar) !important;
|
||||
}
|
||||
|
||||
/* Toolbar Height */
|
||||
:root:not([uidensity="touch"]) #TabsToolbar {
|
||||
--toolbarbutton-inner-padding: 9px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */
|
||||
}
|
||||
|
||||
.toolbar-items,
|
||||
.tabbrowser-tab {
|
||||
--tabbar-max-height: 38px;
|
||||
max-height: calc(var(--tabbar-max-height) + var(--space-above-tabbar));
|
||||
}
|
||||
:root[uidensity="compact"] .toolbar-items,
|
||||
:root[uidensity="compact"] .tabbrowser-tab {
|
||||
--tabbar-max-height: 36px;
|
||||
}
|
||||
:root[uidensity="touch"] .toolbar-items,
|
||||
:root[uidensity="touch"] .tabbrowser-tab {
|
||||
--tabbar-max-height: 45px;
|
||||
}
|
||||
|
||||
/* Scroll Button - Size Fix */
|
||||
:root #tabbrowser-arrowscrollbox {
|
||||
--scrollbtn-vertical-padding: 3px;
|
||||
--scrollbtn-vertical-border: 2px;
|
||||
--scrollbtn-border-radius: 7px;
|
||||
}
|
||||
#scrollbutton-up,
|
||||
#scrollbutton-down {
|
||||
/* Original: var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) - 6px) = 9px */
|
||||
/* https://github.com/mozilla/gecko-dev/blob/71b1259afd1cdaf41871ae675c2dadb967ea5b34/browser/themes/shared/toolbarbuttons.inc.css#L142 */
|
||||
padding-top: var(--scrollbtn-vertical-padding, var(--toolbarbutton-inner-padding)) !important;
|
||||
padding-bottom: var(--scrollbtn-vertical-padding, var(--toolbarbutton-inner-padding)) !important;
|
||||
|
||||
/* Original: 4px */
|
||||
border-top-width: var(--scrollbtn-vertical-border, 4px) !important;
|
||||
border-bottom-width: var(--scrollbtn-vertical-border, 4px) !important;
|
||||
/* Original: calc(var(--tab-border-radius) + 4px) = 8px */
|
||||
border-radius: var(--scrollbtn-border-radius, calc(var(--tab-border-radius) + 4px)) !important;
|
||||
}
|
||||
|
||||
:root[tabsintitlebar]:not([uidensity="compact"]) #toolbar-menubar[autohide="true"] {
|
||||
height: calc(
|
||||
var(--tab-min-height) - var(--tabs-navbar-shadow-size) - 2px
|
||||
); /* Compact: 28px, Normal: 33px, Touch: 38px */
|
||||
}
|
||||
|
||||
/* Pinned Tab - Titlechanged Indicator position fix */
|
||||
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
|
||||
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
|
||||
/* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
|
||||
background-position-y: bottom calc(2.5px + var(--tabs-navbar-shadow-size)) !important;
|
||||
}
|
||||
:root[uidensity="compact"]
|
||||
.tabbrowser-tab:is([image], [pinned])
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected="true"]),
|
||||
:root[uidensity="compact"] .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
|
||||
/* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
|
||||
background-position-y: bottom calc(0.5px + var(--tabs-navbar-shadow-size)) !important;
|
||||
}
|
||||
:root[uidensity="touch"]
|
||||
.tabbrowser-tab:is([image], [pinned])
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected="true"]),
|
||||
:root[uidensity="touch"] .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
|
||||
/* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
|
||||
background-position-y: bottom calc(4.5px + var(--tabs-navbar-shadow-size)) !important;
|
||||
}
|
||||
|
||||
/*= Nav Bar - Reduce Width ===================================================*/
|
||||
#nav-bar:not([customizing]) toolbarspring {
|
||||
min-width: 1px !important;
|
||||
max-width: 100px !important;
|
||||
}
|
||||
|
||||
/*= URL Bar - Reduce Padding =================================================*/
|
||||
:root:not([uidensity="touch"]) #urlbar-container,
|
||||
:root:not([uidensity="touch"]) #search-container {
|
||||
padding-block: 3px !important; /* Original: 4px */
|
||||
margin-inline: 5px !important; /* Original: 5px */
|
||||
}
|
||||
:root:not([uidensity="compact"]) #urlbar-container,
|
||||
:root:not([uidensity="compact"]) #search-container {
|
||||
padding-block: 2px !important;
|
||||
}
|
||||
|
||||
/* spread menu */
|
||||
:root:not([uidensity]) .urlbarView-row {
|
||||
padding-block: 1px !important; /* Original: 2px */
|
||||
}
|
||||
:root[uidensity="compact"] .urlbarView-row {
|
||||
padding-block: 0px !important;
|
||||
}
|
||||
|
||||
:root:not([uidensity]) #urlbar .search-one-offs:not([hidden]) {
|
||||
padding-block: 8px !important; /* Original: 10px */
|
||||
}
|
||||
:root[uidensity="compact"] #urlbar .search-one-offs:not([hidden]) {
|
||||
padding-block: 2px !important;
|
||||
}
|
||||
|
||||
/*= BookMark Bar - Reduce Height =============================================*/
|
||||
:root[uidensity="compact"] #PersonalToolbar toolbarbutton {
|
||||
margin-top: 0px; /* Original: 2px */
|
||||
}
|
||||
|
||||
/*= Info Bar - Reduce Padding ================================================*/
|
||||
:root:not([uidensity]) #tab-notification-deck {
|
||||
--infobar-message-margin: 0 4px 3px;
|
||||
}
|
||||
:root[uidensity="compact"] #tab-notification-deck {
|
||||
--infobar-message-margin: 0 4px 2px;
|
||||
}
|
||||
#tab-notification-deck notification-message[message-bar-type="infobar"]:not([style*="margin-top"]) {
|
||||
margin: var(--infobar-message-margin, 0 4px 4px) !important;
|
||||
}
|
||||
|
||||
:root:not([uidensity]) notification-message[message-bar-type="infobar"] {
|
||||
--infobar-vertical-margin: 7px;
|
||||
--infobar-button-vertical-margin: 3px;
|
||||
}
|
||||
:root[uidensity="compact"] notification-message[message-bar-type="infobar"] {
|
||||
--infobar-vertical-margin: 6px;
|
||||
--infobar-button-vertical-margin: 2px;
|
||||
}
|
||||
.infobar > .icon {
|
||||
margin-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */
|
||||
}
|
||||
.notification-message {
|
||||
padding-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */
|
||||
}
|
||||
.notification-button-container > .notification-button {
|
||||
margin-block: var(--infobar-button-vertical-margin, 4px) !important; /* Original: 4px */
|
||||
}
|
||||
.notification-close {
|
||||
margin: var(--infobar-button-vertical-margin, 4px) 8px !important; /* Original: 4px 8px */
|
||||
}
|
||||
|
||||
/* Hard coded for compatibility - Disappearing phenomenon */
|
||||
.container.infobar::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 2px;
|
||||
position: absolute;
|
||||
background-image: linear-gradient(0, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%);
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
height: 100%;
|
||||
border-start-start-radius: 4px;
|
||||
border-end-start-radius: 4px;
|
||||
}
|
||||
|
||||
/*= Menu - Reduce Padding ====================================================*/
|
||||
:root {
|
||||
--menu-padding: 0.35em; /* Win7, 8: 0px */
|
||||
}
|
||||
:root[uidensity="compact"] {
|
||||
--menu-padding: 0.25em;
|
||||
}
|
||||
:root[uidensity="touch"] {
|
||||
--menu-padding: 0.5em;
|
||||
}
|
||||
menupopup:not(.in-menulist) > menuitem,
|
||||
menupopup > menu {
|
||||
/* Original: 0.5em */
|
||||
padding-block: var(--menu-padding) !important;
|
||||
}
|
||||
|
||||
@include OS($mac) {
|
||||
:root:not([uidensity="touch"]) .menu-text,
|
||||
:root:not([uidensity="touch"]) .menu-iconic-text {
|
||||
padding-inline-end: 0 !important; /* Original: 2px */
|
||||
}
|
||||
:root:not([uidensity="touch"]) .menupopup-arrowscrollbox {
|
||||
padding-block: 1px !important; /* Original: 4px*/
|
||||
}
|
||||
:root:not([uidensity="touch"]) #context-navigation:not([hidden]) {
|
||||
padding: 0 0 1px !important; /* Original: 0 0 4px*/
|
||||
}
|
||||
:root:not([uidensity="touch"]) .menu-right {
|
||||
margin-right: 6px !important; /* Original: 12px */
|
||||
}
|
||||
}
|
||||
|
||||
@include OS($win7, $win8) {
|
||||
/* Remove border */
|
||||
menupopup > menuitem,
|
||||
menupopup > menu {
|
||||
padding-block: calc(var(--menu-padding) - 2px) !important;
|
||||
}
|
||||
|
||||
/* Make to original */
|
||||
:root:not([uidensity="touch"]) #context-navigation:not([hidden]) {
|
||||
padding: 0 0 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include OS($linux) {
|
||||
menupopup > menu {
|
||||
padding-inline-start: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Arrow Icon Align to Right */
|
||||
.bookmark-item.subviewbutton > .menu-right {
|
||||
margin-inline-end: 0 !important;
|
||||
}
|
||||
|
||||
/*= Bookmark Menu - Reduce Padding ===========================================*/
|
||||
:root {
|
||||
--bookmark-menu-padding: 3px;
|
||||
}
|
||||
:root[uidensity="compact"] {
|
||||
--bookmark-menu-padding: 1.5px;
|
||||
}
|
||||
|
||||
:root:not([uidensity="touch"]) #BMB_bookmarksPopup .subviewbutton,
|
||||
:root:not([uidensity="touch"]) #BMB_bookmarksPopup .subviewbutton,
|
||||
:root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .bookmark-item,
|
||||
:root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .openintabs-menuitem {
|
||||
padding-block: var(--bookmark-menu-padding) !important;
|
||||
}
|
||||
|
||||
/*= Global Menu - Set Padding ================================================*/
|
||||
/* Vertical Align - Center & Height: 100% */
|
||||
#main-menubar {
|
||||
-moz-box-flex: 1 !important;
|
||||
}
|
||||
|
||||
/* Rounding */
|
||||
#main-menubar > menu {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Menubar item padding */
|
||||
:root {
|
||||
--global-menubar-padding: 2px;
|
||||
}
|
||||
:root[uidensity="compact"] {
|
||||
--global-menubar-padding: 1px;
|
||||
}
|
||||
:root[uidensity="touch"] {
|
||||
--global-menubar-padding: 4px;
|
||||
}
|
||||
#main-menubar > menu {
|
||||
padding-block: var(--global-menubar-padding) !important;
|
||||
}
|
||||
|
||||
/* Reduce items */
|
||||
#main-menubar > menu > menupopup menuitem,
|
||||
#main-menubar > menu > menupopup menu {
|
||||
padding-block: var(--bookmark-menu-padding) !important;
|
||||
}
|
||||
|
||||
/*= Popup Panel - Reduce padding =============================================*/
|
||||
#protections-popup-main-header-label {
|
||||
height: unset !important; /* Original: 37.6px */
|
||||
}
|
||||
|
||||
#identity-popup,
|
||||
#permission-popup,
|
||||
#protections-popup {
|
||||
--vertical-section-padding: 0.8em; /* Original: 0.9em */
|
||||
}
|
||||
|
||||
.protections-popup-footer-button,
|
||||
.protections-popup-category {
|
||||
min-height: 24px; /* Original: 32px */
|
||||
height: unset !important;
|
||||
}
|
||||
|
||||
/** Popup panel - Compact mode */
|
||||
/* Footer Button Height */
|
||||
:root[uidensity="compact"] .panel-footer.panel-footer-menulike > button {
|
||||
padding: 3px 8px !important;
|
||||
}
|
||||
/* Footer Button Height */
|
||||
:root[uidensity="compact"] #protections-popup-trackersView-settings-button {
|
||||
margin: 4px 8px 0 !important;
|
||||
}
|
||||
/* not cut off for Protection popup Footer on windows */
|
||||
:root[uidensity="compact"] #protections-popup-multiView #protections-popup-footer {
|
||||
padding: 3px 0 20px !important;
|
||||
}
|
||||
/* Button and disabled category in Protection popup */
|
||||
:root[uidensity="compact"] #protections-popup-multiView .protections-popup-footer-button,
|
||||
:root[uidensity="compact"] #protections-popup-multiView .protections-popup-category {
|
||||
height: 20px !important;
|
||||
min-height: 20px !important;
|
||||
}
|
||||
/* Footer Button in Tracking Content Panel */
|
||||
:root[uidensity="compact"] #protections-popup-multiView .panel-footer.panel-footer-menulike {
|
||||
margin: 0 0 3px !important;
|
||||
}
|
||||
/* Identity popup header padding */
|
||||
:root[uidensity="compact"] #identity-popup-multiView #identity-popup-mainView-panel-header {
|
||||
padding: 2px 5px !important;
|
||||
}
|
||||
/* Text When There is no trackers */
|
||||
:root[uidensity="compact"] #protections-popup-no-trackers-found-description {
|
||||
margin: 2em 4em !important;
|
||||
}
|
||||
/* Download Item margin */
|
||||
:root[uidensity="compact"] #downloadsListBox {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
|
@ -35,430 +35,7 @@
|
|||
@import "theme/decoration";
|
||||
|
||||
/** Reduce Padding ************************************************************/
|
||||
/*= Root - Reduce Padding ====================================================*/
|
||||
:root {
|
||||
/* Tab Bar */
|
||||
--proton-tab-block-margin: 2px !important; /* Original: 4px, Legacy */
|
||||
--tab-block-margin: 2px !important; /* New version of --proton-tab-block-margin */
|
||||
--inline-tab-padding: 6px !important; /* Original: 8px */
|
||||
|
||||
/* Panel */
|
||||
--arrowpanel-menuicon-padding: 8px;
|
||||
--arrowpanel-menuitem-margin: 0 var(--arrowpanel-menuicon-padding) !important; /* Original: 0 8px */
|
||||
--arrowpanel-menuitem-padding: 5px !important; /* Original: 8px */
|
||||
--arrowpanel-padding: 0.8em !important; /* Original: 16px or .cui-widget-panel, .cui-widget-panel::part(arrowcontent) => 4px 0 */
|
||||
}
|
||||
|
||||
:root[uidensity="compact"] {
|
||||
/* Tool Bar */
|
||||
--toolbarbutton-outer-padding: 2px !important; /* Original: 3px, General is 2px */
|
||||
|
||||
/* Panel */
|
||||
--arrowpanel-menuitem-padding: 3px !important; /* Original: 8px */
|
||||
}
|
||||
|
||||
:root[uidensity="touch"] {
|
||||
/* Tab Bar - Like Original */
|
||||
--proton-tab-block-margin: 4px !important; /* Original: 4px */
|
||||
--tab-block-margin: 4px !important; /* New version of --proton-tab-block-margin */
|
||||
--inline-tab-padding: 8px !important; /* Original: 8px */
|
||||
|
||||
/* Panel - Like Original */
|
||||
--arrowpanel-menuitem-padding: 8px !important; /* Original: 8px */
|
||||
}
|
||||
|
||||
/*= Tab Bar - Reduce Width, Show more tabs ===================================*/
|
||||
/* for First Tab Space */
|
||||
:root {
|
||||
--space-left-tabbar: 0px; /* If you want drag space, set to 8px */
|
||||
}
|
||||
:root:not([tabsintitlebar]) #tabbrowser-tabs:not([positionpinnedtabs]),
|
||||
:root:is([sizemode="maximized"], [sizemode="fullscreen"]) #tabbrowser-tabs:not([positionpinnedtabs]) {
|
||||
padding-inline-start: var(--space-left-tabbar) !important;
|
||||
}
|
||||
|
||||
/* Titlebar Space */
|
||||
.titlebar-spacer[type="pre-tabs"] {
|
||||
width: 30px !important; /* Original: 40px */
|
||||
}
|
||||
.titlebar-spacer[type="post-tabs"] {
|
||||
width: 25px !important; /* Original: 40px */
|
||||
}
|
||||
|
||||
/* Tabbar Buttons */
|
||||
:root {
|
||||
--newtab-button-minus-width-padding: 2px;
|
||||
--newtab-button-width-padding: calc(var(--toolbarbutton-inner-padding) - var(--newtab-button-minus-width-padding));
|
||||
}
|
||||
#new-tab-button > .toolbarbutton-icon,
|
||||
#alltabs-button > .toolbarbutton-badge-stack {
|
||||
/* Original: calc(2 * var(--toolbarbutton-inner-padding) + 16px) */
|
||||
width: calc(2 * var(--newtab-button-width-padding) + 16px) !important;
|
||||
|
||||
/* Original: --toolbarbutton-inner-padding */
|
||||
padding-left: var(--newtab-button-width-padding) !important;
|
||||
padding-right: var(--newtab-button-width-padding) !important;
|
||||
}
|
||||
|
||||
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab[first-visible-unpinned-tab] {
|
||||
margin-inline-start: 1px !important;
|
||||
}
|
||||
|
||||
:root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox {
|
||||
--scrollbtn-inner-padding: 1px;
|
||||
--scrollbtn-outer-padding: 3px;
|
||||
}
|
||||
#scrollbutton-up {
|
||||
padding-left: var(--scrollbtn-inner-padding, 4px) !important; /* Original: 4px */
|
||||
padding-right: var(--scrollbtn-outer-padding, 4px) !important;
|
||||
}
|
||||
#scrollbutton-down {
|
||||
padding-left: var(--scrollbtn-outer-padding, 4px) !important; /* Original: 4px */
|
||||
padding-right: var(--scrollbtn-inner-padding, 4px) !important;
|
||||
}
|
||||
|
||||
:root:not([uidensity="touch"]) #new-tab-button,
|
||||
#alltabs-button {
|
||||
--toolbarbutton-outer-padding: 1px; /* Original: 2px*/
|
||||
}
|
||||
|
||||
/* Tab - Max Size */
|
||||
:root {
|
||||
--tab-max-width: 240px;
|
||||
}
|
||||
.tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
|
||||
max-width: var(--tab-max-width) !important; /* Original: 225px */
|
||||
}
|
||||
|
||||
/* neighbouring tabs should "pinch" together */
|
||||
.tabbrowser-tab {
|
||||
padding-inline: 1px !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab:not([last-visible-tab]) {
|
||||
margin-inline-end: -0.5px !important;
|
||||
}
|
||||
|
||||
/*= Tab Bar - Reduce Height, Show more contents ==============================*/
|
||||
/* for Extra Drag Space */
|
||||
:root {
|
||||
--space-above-tabbar: 0px; /* If you want drag space, set to 8px */
|
||||
}
|
||||
:root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] {
|
||||
height: calc(var(--tab-min-height) + var(--space-above-tabbar));
|
||||
}
|
||||
:root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items,
|
||||
:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
|
||||
padding-top: var(--space-above-tabbar) !important;
|
||||
}
|
||||
|
||||
/* Toolbar Height */
|
||||
:root:not([uidensity="touch"]) #TabsToolbar {
|
||||
--toolbarbutton-inner-padding: 9px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */
|
||||
}
|
||||
|
||||
.toolbar-items,
|
||||
.tabbrowser-tab {
|
||||
--tabbar-max-height: 38px;
|
||||
max-height: calc(var(--tabbar-max-height) + var(--space-above-tabbar));
|
||||
}
|
||||
:root[uidensity="compact"] .toolbar-items,
|
||||
:root[uidensity="compact"] .tabbrowser-tab {
|
||||
--tabbar-max-height: 36px;
|
||||
}
|
||||
:root[uidensity="touch"] .toolbar-items,
|
||||
:root[uidensity="touch"] .tabbrowser-tab {
|
||||
--tabbar-max-height: 45px;
|
||||
}
|
||||
|
||||
/* Scroll Button - Size Fix */
|
||||
:root #tabbrowser-arrowscrollbox {
|
||||
--scrollbtn-vertical-padding: 3px;
|
||||
--scrollbtn-vertical-border: 2px;
|
||||
--scrollbtn-border-radius: 7px;
|
||||
}
|
||||
#scrollbutton-up,
|
||||
#scrollbutton-down {
|
||||
/* Original: var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) - 6px) = 9px */
|
||||
/* https://github.com/mozilla/gecko-dev/blob/71b1259afd1cdaf41871ae675c2dadb967ea5b34/browser/themes/shared/toolbarbuttons.inc.css#L142 */
|
||||
padding-top: var(--scrollbtn-vertical-padding, var(--toolbarbutton-inner-padding)) !important;
|
||||
padding-bottom: var(--scrollbtn-vertical-padding, var(--toolbarbutton-inner-padding)) !important;
|
||||
|
||||
/* Original: 4px */
|
||||
border-top-width: var(--scrollbtn-vertical-border, 4px) !important;
|
||||
border-bottom-width: var(--scrollbtn-vertical-border, 4px) !important;
|
||||
/* Original: calc(var(--tab-border-radius) + 4px) = 8px */
|
||||
border-radius: var(--scrollbtn-border-radius, calc(var(--tab-border-radius) + 4px)) !important;
|
||||
}
|
||||
|
||||
:root[tabsintitlebar]:not([uidensity="compact"]) #toolbar-menubar[autohide="true"] {
|
||||
height: calc(
|
||||
var(--tab-min-height) - var(--tabs-navbar-shadow-size) - 2px
|
||||
); /* Compact: 28px, Normal: 33px, Touch: 38px */
|
||||
}
|
||||
|
||||
/* Pinned Tab - Titlechanged Indicator position fix */
|
||||
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
|
||||
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
|
||||
/* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
|
||||
background-position-y: bottom calc(2.5px + var(--tabs-navbar-shadow-size)) !important;
|
||||
}
|
||||
:root[uidensity="compact"]
|
||||
.tabbrowser-tab:is([image], [pinned])
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected="true"]),
|
||||
:root[uidensity="compact"] .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
|
||||
/* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
|
||||
background-position-y: bottom calc(0.5px + var(--tabs-navbar-shadow-size)) !important;
|
||||
}
|
||||
:root[uidensity="touch"]
|
||||
.tabbrowser-tab:is([image], [pinned])
|
||||
> .tab-stack
|
||||
> .tab-content[attention]:not([selected="true"]),
|
||||
:root[uidensity="touch"] .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
|
||||
/* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
|
||||
background-position-y: bottom calc(4.5px + var(--tabs-navbar-shadow-size)) !important;
|
||||
}
|
||||
|
||||
/*= Nav Bar - Reduce Width ===================================================*/
|
||||
#nav-bar:not([customizing]) toolbarspring {
|
||||
min-width: 1px !important;
|
||||
max-width: 100px !important;
|
||||
}
|
||||
|
||||
/*= URL Bar - Reduce Padding =================================================*/
|
||||
:root:not([uidensity="touch"]) #urlbar-container,
|
||||
:root:not([uidensity="touch"]) #search-container {
|
||||
padding-block: 3px !important; /* Original: 4px */
|
||||
margin-inline: 5px !important; /* Original: 5px */
|
||||
}
|
||||
:root:not([uidensity="compact"]) #urlbar-container,
|
||||
:root:not([uidensity="compact"]) #search-container {
|
||||
padding-block: 2px !important;
|
||||
}
|
||||
|
||||
/* spread menu */
|
||||
:root:not([uidensity]) .urlbarView-row {
|
||||
padding-block: 1px !important; /* Original: 2px */
|
||||
}
|
||||
:root[uidensity="compact"] .urlbarView-row {
|
||||
padding-block: 0px !important;
|
||||
}
|
||||
|
||||
:root:not([uidensity]) #urlbar .search-one-offs:not([hidden]) {
|
||||
padding-block: 8px !important; /* Original: 10px */
|
||||
}
|
||||
:root[uidensity="compact"] #urlbar .search-one-offs:not([hidden]) {
|
||||
padding-block: 2px !important;
|
||||
}
|
||||
|
||||
/*= BookMark Bar - Reduce Height =============================================*/
|
||||
:root[uidensity="compact"] #PersonalToolbar toolbarbutton {
|
||||
margin-top: 0px; /* Original: 2px */
|
||||
}
|
||||
|
||||
/*= Info Bar - Reduce Padding ================================================*/
|
||||
:root:not([uidensity]) #tab-notification-deck {
|
||||
--infobar-message-margin: 0 4px 3px;
|
||||
}
|
||||
:root[uidensity="compact"] #tab-notification-deck {
|
||||
--infobar-message-margin: 0 4px 2px;
|
||||
}
|
||||
#tab-notification-deck notification-message[message-bar-type="infobar"]:not([style*="margin-top"]) {
|
||||
margin: var(--infobar-message-margin, 0 4px 4px) !important;
|
||||
}
|
||||
|
||||
:root:not([uidensity]) notification-message[message-bar-type="infobar"] {
|
||||
--infobar-vertical-margin: 7px;
|
||||
--infobar-button-vertical-margin: 3px;
|
||||
}
|
||||
:root[uidensity="compact"] notification-message[message-bar-type="infobar"] {
|
||||
--infobar-vertical-margin: 6px;
|
||||
--infobar-button-vertical-margin: 2px;
|
||||
}
|
||||
.infobar > .icon {
|
||||
margin-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */
|
||||
}
|
||||
.notification-message {
|
||||
padding-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */
|
||||
}
|
||||
.notification-button-container > .notification-button {
|
||||
margin-block: var(--infobar-button-vertical-margin, 4px) !important; /* Original: 4px */
|
||||
}
|
||||
.notification-close {
|
||||
margin: var(--infobar-button-vertical-margin, 4px) 8px !important; /* Original: 4px 8px */
|
||||
}
|
||||
|
||||
/* Hard coded for compatibility - Disappearing phenomenon */
|
||||
.container.infobar::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 2px;
|
||||
position: absolute;
|
||||
background-image: linear-gradient(0, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%);
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
height: 100%;
|
||||
border-start-start-radius: 4px;
|
||||
border-end-start-radius: 4px;
|
||||
}
|
||||
|
||||
/*= Menu - Reduce Padding ====================================================*/
|
||||
:root {
|
||||
--menu-padding: 0.35em; /* Win7, 8: 0px */
|
||||
}
|
||||
:root[uidensity="compact"] {
|
||||
--menu-padding: 0.25em;
|
||||
}
|
||||
:root[uidensity="touch"] {
|
||||
--menu-padding: 0.5em;
|
||||
}
|
||||
menupopup:not(.in-menulist) > menuitem,
|
||||
menupopup > menu {
|
||||
/* Original: 0.5em */
|
||||
padding-block: var(--menu-padding) !important;
|
||||
}
|
||||
|
||||
@include OS($mac) {
|
||||
:root:not([uidensity="touch"]) .menu-text,
|
||||
:root:not([uidensity="touch"]) .menu-iconic-text {
|
||||
padding-inline-end: 0 !important; /* Original: 2px */
|
||||
}
|
||||
:root:not([uidensity="touch"]) .menupopup-arrowscrollbox {
|
||||
padding-block: 1px !important; /* Original: 4px*/
|
||||
}
|
||||
:root:not([uidensity="touch"]) #context-navigation:not([hidden]) {
|
||||
padding: 0 0 1px !important; /* Original: 0 0 4px*/
|
||||
}
|
||||
:root:not([uidensity="touch"]) .menu-right {
|
||||
margin-right: 6px !important; /* Original: 12px */
|
||||
}
|
||||
}
|
||||
|
||||
@include OS($win7, $win8) {
|
||||
/* Remove border */
|
||||
menupopup > menuitem,
|
||||
menupopup > menu {
|
||||
padding-block: calc(var(--menu-padding) - 2px) !important;
|
||||
}
|
||||
|
||||
/* Make to original */
|
||||
:root:not([uidensity="touch"]) #context-navigation:not([hidden]) {
|
||||
padding: 0 0 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include OS($linux) {
|
||||
menupopup > menu {
|
||||
padding-inline-start: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Arrow Icon Align to Right */
|
||||
.bookmark-item.subviewbutton > .menu-right {
|
||||
margin-inline-end: 0 !important;
|
||||
}
|
||||
|
||||
/*= Bookmark Menu - Reduce Padding ===========================================*/
|
||||
:root {
|
||||
--bookmark-menu-padding: 3px;
|
||||
}
|
||||
:root[uidensity="compact"] {
|
||||
--bookmark-menu-padding: 1.5px;
|
||||
}
|
||||
|
||||
:root:not([uidensity="touch"]) #BMB_bookmarksPopup .subviewbutton,
|
||||
:root:not([uidensity="touch"]) #BMB_bookmarksPopup .subviewbutton,
|
||||
:root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .bookmark-item,
|
||||
:root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .openintabs-menuitem {
|
||||
padding-block: var(--bookmark-menu-padding) !important;
|
||||
}
|
||||
|
||||
/*= Global Menu - Set Padding ================================================*/
|
||||
/* Vertical Align - Center & Height: 100% */
|
||||
#main-menubar {
|
||||
-moz-box-flex: 1 !important;
|
||||
}
|
||||
|
||||
/* Rounding */
|
||||
#main-menubar > menu {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Menubar item padding */
|
||||
:root {
|
||||
--global-menubar-padding: 2px;
|
||||
}
|
||||
:root[uidensity="compact"] {
|
||||
--global-menubar-padding: 1px;
|
||||
}
|
||||
:root[uidensity="touch"] {
|
||||
--global-menubar-padding: 4px;
|
||||
}
|
||||
#main-menubar > menu {
|
||||
padding-block: var(--global-menubar-padding) !important;
|
||||
}
|
||||
|
||||
/* Reduce items */
|
||||
#main-menubar > menu > menupopup menuitem,
|
||||
#main-menubar > menu > menupopup menu {
|
||||
padding-block: var(--bookmark-menu-padding) !important;
|
||||
}
|
||||
|
||||
/*= Popup Panel - Reduce padding =============================================*/
|
||||
#protections-popup-main-header-label {
|
||||
height: unset !important; /* Original: 37.6px */
|
||||
}
|
||||
|
||||
#identity-popup,
|
||||
#permission-popup,
|
||||
#protections-popup {
|
||||
--vertical-section-padding: 0.8em; /* Original: 0.9em */
|
||||
}
|
||||
|
||||
.protections-popup-footer-button,
|
||||
.protections-popup-category {
|
||||
min-height: 24px; /* Original: 32px */
|
||||
height: unset !important;
|
||||
}
|
||||
|
||||
/** Popup panel - Compact mode */
|
||||
/* Footer Button Height */
|
||||
:root[uidensity="compact"] .panel-footer.panel-footer-menulike > button {
|
||||
padding: 3px 8px !important;
|
||||
}
|
||||
/* Footer Button Height */
|
||||
:root[uidensity="compact"] #protections-popup-trackersView-settings-button {
|
||||
margin: 4px 8px 0 !important;
|
||||
}
|
||||
/* not cut off for Protection popup Footer on windows */
|
||||
:root[uidensity="compact"] #protections-popup-multiView #protections-popup-footer {
|
||||
padding: 3px 0 20px !important;
|
||||
}
|
||||
/* Button and disabled category in Protection popup */
|
||||
:root[uidensity="compact"] #protections-popup-multiView .protections-popup-footer-button,
|
||||
:root[uidensity="compact"] #protections-popup-multiView .protections-popup-category {
|
||||
height: 20px !important;
|
||||
min-height: 20px !important;
|
||||
}
|
||||
/* Footer Button in Tracking Content Panel */
|
||||
:root[uidensity="compact"] #protections-popup-multiView .panel-footer.panel-footer-menulike {
|
||||
margin: 0 0 3px !important;
|
||||
}
|
||||
/* Identity popup header padding */
|
||||
:root[uidensity="compact"] #identity-popup-multiView #identity-popup-mainView-panel-header {
|
||||
padding: 2px 5px !important;
|
||||
}
|
||||
/* Text When There is no trackers */
|
||||
:root[uidensity="compact"] #protections-popup-no-trackers-found-description {
|
||||
margin: 2em 4em !important;
|
||||
}
|
||||
/* Download Item margin */
|
||||
:root[uidensity="compact"] #downloadsListBox {
|
||||
margin: 0 !important;
|
||||
}
|
||||
@import "padding/index";
|
||||
|
||||
/** Tab Bar - Connect to window ***********************************************/
|
||||
.tab-background {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue