Các câu trả lời gần đây cho How to adjust/reduce hight of menu-bar using userChrome.css in Firefox 65?https://support.mozilla.org/vi/questions/12503332019-03-03T03:19:52-08:00To: "'cor-el
I spent some time trying and have had some success in setting firefox to show ta page 2019-03-03T03:19:52-08:00Vulehttps://support.mozilla.org/vi/questions/1250333#answer-1202007<p>To: "'cor-el<strong>
</strong>
</p><p>I spent some time trying and have had some success in setting firefox to show ta page as i liked, but never managed to reduce height of the menu line below 20px. It seams to me that there are some parameters that are preset and not change-able.
I couldn't find simple and straightforward instructions how that all works.
My "CSS" file looks like this:
</p>
<hr>
<p>@namespace url("<a href="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" rel="nofollow">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</a>");
</p><pre>#TabsToolbar {
</pre>
<p> position: absolute &nbsp;!important;
bottom: 0&nbsp;!important;
width: 100vw&nbsp;!important;
-moz-box-ordinal-group: 3&nbsp;!important;
border-bottom: 3px solid blue&nbsp;!important;
background-color: #f6f6f6&nbsp;!important;
}
</p>
<ol><li>main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
</li></ol>
<p> padding-bottom: 35px&nbsp;!important;
}
</p><pre>#TabsToolbar .private-browsing-indicator,
#TabsToolbar #window-controls,
#TabsToolbar *[type="caption-buttons"],
#TabsToolbar *[type="pre-tabs"],
#TabsToolbar *[type="post-tabs"] {
display: none&nbsp;!important;
</pre>
<p>}
</p><p>.tabbrowser-tab:not([pinned]) {
min-width: 80px&nbsp;!important;
}
</p>
<ol><li>navigator-toolbox {
</li></ol>
<pre> border-bottom: 0px solid #000&nbsp;!important;
}
</pre>
<p>/** "Light" Theme (Dark Text) **/
</p><p>/* Border the background tabs (10% gray) for greater visibility */
</p>
<ol><li>main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab:not([selected="true"]) {
</li></ol>
<pre> border: 1px solid green&nbsp;!important;
border-bottom: 2px solid blue&nbsp;!important;
margin-right: 0px&nbsp;!important;
background-color: white&nbsp;!important;
</pre>
<p>}
</p><p>toolbar[type="menubar"] {
</p><pre> /* -moz-appearance: menubar; */
</pre>
<p> /* color: -moz-menubartext; */
min-width: 10px&nbsp;!important;
min-height: 10px&nbsp;!important;
padding: 0px 0px&nbsp;!important;
}
</p><p><br>
/* Remove short vertical lines between background tabs */
</p>
<ol><li>main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab::before,
</li><li>main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab::after {
</li></ol>
<pre> border: none&nbsp;!important;
</pre>
<p>}
</p><p>/* Curve the background tabs at the upper left and right corners
</p><pre> May not work on add-on themes. */
</pre>
<p>.tabbrowser-tab {
</p><pre> border-radius: 5px 5px 5px 5px / 5px 5px 5px 5px&nbsp;!important;
background-color: #FFFF00&nbsp;!important;
margin-bottom: 0px&nbsp;!important;
tabbrowser-tab height: 10px&nbsp;!important;
</pre>
<p>}
/* Curve active tab and slightly overlap neighboring tabs */
.tabbrowser-tab .tab-background[selected="true"] {
</p><pre> margin-left: 3px solid blue&nbsp;!important;
margin-right: 3px solid blue&nbsp;!important;
margin-bottom: 0px&nbsp;!important;
border-radius: 5px 5px 5px 5px / 5px 5px 5px 5px&nbsp;!important;
border: 2px solid red&nbsp;!important;
background-color: #FFFF00&nbsp;!important;
}
</pre>
<hr>
<p>which is mix of couple of other files I found with some changes I did.
</p><p>It needs some cleaning and some more work.....but to me is "good enough".
I will spend now time on learning it all before i attempt to refine it further.
</p><p>Thank you for your help&nbsp;!!! .
</p><p>Your references to web sites with informations were specially worth.
It was worth trying to learn it all.
I will have to spend more time reading - there are no shortcuts.
</p>The height of the menu bar would be this selector:
#toolbar-menubar { height: 17px !important; 2019-02-24T01:38:04-08:00cor-elhttps://support.mozilla.org/vi/questions/1250333#answer-1199833<p>The height of the menu bar would be this selector:
</p><pre>#toolbar-menubar { height: 17px&nbsp;!important; min-height: 20px&nbsp;!important; }
</pre>
<p>Make sure you use the&nbsp;!important flag.
You may have to add a min-height settings.
</p><p>See also:
</p>
<ul><li> chrome://global/skin/toolbar.css
</li><li> chrome://browser/skin/browser.css
</li></ul>
<pre>toolbar[type="menubar"] {
-moz-appearance: menubar;
color: -moz-menubartext;
min-width: 1px;
min-height: 20px;
padding: 1px 0px;
}</pre>I tried to find answer and nothing i did would do the trick. Whatever changes i tried had surprising2019-02-24T00:46:48-08:00Vulehttps://support.mozilla.org/vi/questions/1250333#answer-1199807<p>I tried to find answer and nothing i did would do the trick. Whatever changes i tried had surprising results.
I could not resolve a problem by changing parameters in "css" file (I could not figure out how "css" works.)
Any change I did just messed up css that worked (at least partially).
</p><p>But, on a bright side, I am not one who easily give up!
</p>You can use the Browser Toolbox to find these selectors.
https://developer.mozilla.org/en-US/Tools/2019-02-15T13:56:08-08:00cor-elhttps://support.mozilla.org/vi/questions/1250333#answer-1197553<p>You can use the Browser Toolbox to find these selectors.
</p>
<ul><li><a href="https://developer.mozilla.org/en-US/Tools/Browser_Toolbox" rel="nofollow">https://developer.mozilla.org/en-US/Tools/Browser_Toolbox</a>
</li></ul>
<p>See also this Reddit forum.
</p>
<ul><li><a href="https://www.reddit.com/r/FirefoxCSS/" rel="nofollow">https://www.reddit.com/r/FirefoxCSS/</a>
</li></ul>