Right click Menus and Bookmark folders spacing
Hi, I've just spent all day trying to follow all the different suggestions here regarding these issues. Adding all sorts of things to the userChrome CSS but 95% of the suggestions have no effect at all [I'm seriously non-technical, so I have no idea if I'm doing it correctly though...probably not] The only thing that I can change is the Tab Height...nothing else changes regardless of what numbers I put in there. The only way I've been able to make the Bookmarks folders usable at all is to enable Compact mode via about:config. But that actually makes it way too compact now...from one extreme to the other. At least it's usable now...so not the end of the world, but the right click menu still has way too much space between every entry [Compact mode made no difference to that at all]. I don't know how to make a screenshot of those menus :) so I took a couple of pics of the screen...can someone please show me what to add to the CSS file to make these ridiculously big spaces between the menu items way smaller...like they used to be before this Proton came in? I tried tons of things that people said to add to the CSS to fix this menu spacing thing but none of them changed anything. I'll include the CSS file that I have below. Thanks a lot
ps: for some reason the pics always come out sideways here
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /* Modify to change window drag space width */ /* Use tabs_on_bottom_menubar_on_top_patch.css if you have menubar permanently enabled and want it on top */ /* IMPORTANT */ /* Get window_control_placeholder_support.css Window controls will be all wrong without it. Additionally on Linux, you may need to get: linux_gtk_window_control_patch.css */ :root{ --uc-titlebar-padding: 0px; } @media (-moz-os-version: windows-win10){ :root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px } } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, #TabsToolbar > .titlebar-buttonbox-container{ position: fixed; display: block; top: var(--uc-titlebar-padding,0px); right:0; height: 36px; } /* Mac specific. You should set that font-smoothing pref to true if you are on any platform where window controls are on left */ @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){ :root{ --uc-titlebar-padding: 0px !important } .titlebar-buttonbox-container{ left:0; right: unset !important; } } :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 24px } #toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 } #navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; } .titlebar-buttonbox-container > .titlebar-buttonbox{ height: 60%; } #titlebar{ -moz-box-ordinal-group: 2; -moz-appearance: none !important; --tabs-navbar-shadow-size: 0px; } .titlebar-placeholder, #TabsToolbar .titlebar-spacer{ display: none; } /* Also hide the toolbox bottom border which isn't at bottom with this setup */ #navigator-toolbox::after{ display: none !important; } @media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } } /* These exist only for compatibility with autohide-tabstoolbar.css */ toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; } #navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 } /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /* Menubar on top patch - use with tabs_on_bottom.css */ /* Only really useful if menubar is ALWAYS visible */ :root{ --uc-window-control-width: 0px !important } #navigator-toolbox{ padding-top: calc(24px + var(--uc-titlebar-padding,0px)) !important } #toolbar-menubar{ position: fixed; display: flex; top: var(--uc-titlebar-padding,0px); height: 24px; width: 100%; overflow: hidden; } #toolbar-menubar > .titlebar-buttonbox-container{ height: 24px; order: 100; } #toolbar-menubar > [flex]{ flex-grow: 100; } #toolbar-menubar > spacer[flex]{ order: 99; flex-grow: 1; min-width: var(--uc-window-drag-space-width,20px); } #toolbar-menubar .titlebar-button{ padding: 2px 17px !important; } #toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px } /* TABS: height */*|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 24px !important; --tab-min-width: 80px !important; #tabbrowser-tabs { width: 100vw !important; } #main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;} .tab-background { border-radius: 8px 8px 0px 0px !important; border-image: none !important; } .tab-line { display: none; } .tab-close-button { color: red!important; } #nav-bar{ height:20px; } /*** Tighten up drop-down/context/popup menu spacing ***/ menupopup > menuitem, menupopup > menu { padding-block: 4px !important; } :root { --arrowpanel-menuitem-padding: 4px 8px !important; }
Hi,
I've just spent all day trying to follow all the different suggestions here regarding these issues. Adding all sorts of things to the userChrome CSS but 95% of the suggestions have no effect at all [I'm seriously non-technical, so I have no idea if I'm doing it correctly though...probably not] The only thing that I can change is the Tab Height...nothing else changes regardless of what numbers I put in there.
The only way I've been able to make the Bookmarks folders usable at all is to enable Compact mode via about:config. But that actually makes it way too compact now...from one extreme to the other. At least it's usable now...so not the end of the world, but the right click menu still has way too much space between every entry [Compact mode made no difference to that at all]. I don't know how to make a screenshot of those menus :) so I took a couple of pics of the screen...can someone please show me what to add to the CSS file to make these ridiculously big spaces between the menu items way smaller...like they used to be before this Proton came in? I tried tons of things that people said to add to the CSS to fix this menu spacing thing but none of them changed anything.
I'll include the CSS file that I have below.
Thanks a lot
ps: for some reason the pics always come out sideways here
<pre><nowiki>/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Modify to change window drag space width */
/*
Use tabs_on_bottom_menubar_on_top_patch.css if you
have menubar permanently enabled and want it on top
*/
/* IMPORTANT */
/*
Get window_control_placeholder_support.css
Window controls will be all wrong without it.
Additionally on Linux, you may need to get:
linux_gtk_window_control_patch.css
*/
:root{ --uc-titlebar-padding: 0px; }
@media (-moz-os-version: windows-win10){
:root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px }
}
#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
#TabsToolbar > .titlebar-buttonbox-container{
position: fixed;
display: block;
top: var(--uc-titlebar-padding,0px);
right:0;
height: 36px;
}
/* Mac specific. You should set that font-smoothing pref to true if you are on any platform where window controls are on left */
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
:root{ --uc-titlebar-padding: 0px !important }
.titlebar-buttonbox-container{ left:0; right: unset !important; }
}
:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 24px }
#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }
#navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }
.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 60%; }
#titlebar{
-moz-box-ordinal-group: 2;
-moz-appearance: none !important;
--tabs-navbar-shadow-size: 0px;
}
.titlebar-placeholder,
#TabsToolbar .titlebar-spacer{ display: none; }
/* Also hide the toolbox bottom border which isn't at bottom with this setup */
#navigator-toolbox::after{ display: none !important; }
@media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } }
/* These exist only for compatibility with autohide-tabstoolbar.css */
toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }
#navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Menubar on top patch - use with tabs_on_bottom.css */
/* Only really useful if menubar is ALWAYS visible */
:root{ --uc-window-control-width: 0px !important }
#navigator-toolbox{ padding-top: calc(24px + var(--uc-titlebar-padding,0px)) !important }
#toolbar-menubar{
position: fixed;
display: flex;
top: var(--uc-titlebar-padding,0px);
height: 24px;
width: 100%;
overflow: hidden;
}
#toolbar-menubar > .titlebar-buttonbox-container{ height: 24px; order: 100; }
#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
order: 99;
flex-grow: 1;
min-width: var(--uc-window-drag-space-width,20px);
}
#toolbar-menubar .titlebar-button{ padding: 2px 17px !important; }
#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }
/* TABS: height */*|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 24px !important;
--tab-min-width: 80px !important;
#tabbrowser-tabs {
width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}
.tab-background {
border-radius: 8px 8px 0px 0px !important; border-image: none !important;
}
.tab-line {
display: none;
}
.tab-close-button {
color: red!important;
}
#nav-bar{ height:20px; }
/*** Tighten up drop-down/context/popup menu spacing ***/
menupopup > menuitem, menupopup > menu {
padding-block: 4px !important;
}
:root {
--arrowpanel-menuitem-padding: 4px 8px !important;
}</nowiki></pre><br>
Bewerkt door cor-el op
Alle antwoorden (2)
The main reason I even have a CSS file is to have the Tabs on the bottom, so probably a lot of that CSS is unnecessary, I don't know. The screenshot below is how I have the toolbars. By the way, on that right click menu for the Twitter pic/link I also want to somehow remove most of those entries if that's at all possible. The only ones I've ever used in that list are
Open Link In New Tab
Copy Link
Save Image As
Copy Image
Plus 3 or 4 addons that I use are at the bottom of the list. One of the guys here once made a CSS file that removed most of those things in that menu...would that also be possible? Thanks
It seems there is no way to delete a question so I'll reply that I managed to fix this by replacing that CSS with two other ones joined together [one for the menu spacing and one for tabs on bottom]. Menu spacing is back to like it always was, it's still got the Compact bookmarks whether it's set to Normal or Compact for some reason but at least it's usable like this I suppose.
menupopup > menuitem, menupopup > menu {padding-block: 0px !important;}
:root {--arrowpanel-menuitem-padding: 0px 0px !important;}
/* TABS: bottom - Firefox 65 and later - updated for 89+ */
/* https://searchfox.org/mozilla-release/source/browser/themes/shared/tabs.inc.css */
/* https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_below_navigation_toolbar_fx89.css */
/* https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox */
/* ROOT - VARS */
/* you can adjust the CSS variables until it looks correct */
*|*:root {
--tab-toolbar-navbar-overlap: 0px !important;
--tab-min-height: 36px !important;
--tab-min-width: 60px !important;
--tab-adjust: 0px; /* adjust tab bar - only for 68-73 */
--tab-caption: 5px; /* caption buttons on tab bar */
}
/* TAB BAR - below nav-bar */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10 !important;}
#TabsToolbar {-moz-box-ordinal-group:1000 !important;}
#TabsToolbar {
display: block !important;
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;
}
#tabbrowser-tabs {
width: 100vw !important;
}
/* navigator-toolbox - PADDING */
*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
position: relative !important; /*89+*/
padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*ADJUST*/
background-color: var(--toolbar-bgcolor) !important;
}
/* TabsToolbar with menubar and titlebar hidden - rules for Firefox 65-73 */
*|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"]) #toolbar-menubar[autohide="true"] ~
#TabsToolbar{
bottom: var(--tab-adjust); /*ADJUST*/
}
/* TABS: height */
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
min-height: var(--tab-min-height) !important;
max-height: var(--tab-min-height) !important;
}
#TabsToolbar {
height: var(--tab-min-height) !important;
margin-bottom: 1px !important;
box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*OPTIONAL*/
background-color: var(--toolbar-bgcolor) !important;
color: var(--toolbar-color) !important;
}
/* indicators *//*
*|*:root[privatebrowsingmode=temporary] .private-browsing-indicator {
position: absolute !important;
display: block !important;
right: 0px !important;
bottom: 0px !important;
width: 14px !important;
pointer-events: none !important;
}
*/
.private-browsing-indicator {display: none !important;}
.accessibility-indicator {display: none !important;}
/* Indicators - HIDE *//*
*|*:root:not([accessibilitymode]) .accessibility-indicator {display: none !important}
*|*:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {display: none !important}
*/
/* Drag Space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
width: 20px !important;
}
/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
padding-bottom: unset !important;
margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
margin-top: unset !important;
}
/* Hide window-controls and caption buttons on Tab Bar */
#TabsToolbar #window-controls {display: none !important;}
#TabsToolbar .titlebar-buttonbox-container {display: none !important;}
Bewerkt door cor-el op