API tools faq
paste
Razor512

Firefox 149+ Compact UI (Density must be set to compact)

Razor512
May 6th, 2020 (edited)
409
0
Never
4
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 10.60 KB | None | 0 0
raw download clone embed print report
  1. :root {
  2.   --colored_menubar_background_image: linear-gradient(#f9f9fa,#f9f9fa);
  3.   --general_toolbar_color_toolbars: linear-gradient(#f9f9fa,#f9f9fa);
  4.   --general_toolbar_color_navbar: linear-gradient(to top,#cac7c1,#d5d2cc,#e8e6e2);
  5.   --tabs_toolbar_color_tabs_not_on_top: linear-gradient(to top,#aeaba5,#c1beb7,#c9c6be);
  6.   --tabs_toolbar_border-tnot_normal_mode_size: 1px;
  7.   --tabs_toolbar_border-tnot_normal_mode: var(--tabs-border-color);
  8.   --classic_squared_tabs_tab_text_color: black;
  9.   --classic_squared_tabs_new_tab_icon_color: black;
  10.   --classic_squared_tabs_tab_text_shadow: transparent;
  11. }
  12. }
  13. @media (-moz-os-version:windows-win10) {
  14. *.textbox-input,
  15. *.textbox-textarea {
  16.   margin-top: -3px !important;
  17. }  
  18. }
  19. @media (-moz-os-version:windows-win7) {
  20. *.textbox-input,
  21. *.textbox-textarea {
  22.   margin-top: -2px !important;
  23. }
  24. }
  25. #alltabs-button {
  26.     height: 8px !important;
  27.     padding: 0px !important;
  28.     margin: 0px !important;
  29. }
  30. #TabsToolbar:not(:-moz-lwtheme) .tabbrowser-tab {
  31.   color: var(--classic_squared_tabs_tab_text_color) !important;
  32.   text-shadow: 1px 1px 1px var(--classic_squared_tabs_tab_text_shadow) !important;
  33.     margin-top:-2px!important;
  34.     padding-right: 8px !important;
  35. }
  36. #TabsToolbar {
  37.   position: relative !important;
  38.   bottom: 0 !important;
  39.   width: 100vw !important;
  40. }
  41. #tabbrowser-tabs {
  42.   height: 18px !important;
  43. }
  44. #scrollbutton-up .toolbarbutton-icon, #scrollbutton-down .toolbarbutton-icon {
  45.     margin-top: -11px !important;
  46. }
  47. #tabs-newtab-button, #TabsToolbar #new-tab-button {
  48.     padding-top: 6px !important;
  49. }
  50.  
  51. .tab-content {
  52.     padding: 0 2px !important;
  53.     height: 18px !important;
  54. }
  55. .tabbrowser-tab[visuallyselected="true"] {
  56.     height: 18px !important;
  57.     z-index: 0 !important;
  58. }
  59. #nav-bar:not([tabs-hidden="true"]) {
  60.     position: relative;
  61.     z-index: 4 !important;
  62. }
  63. #TabsToolbar { -moz-box-ordinal-group: 2;
  64.     max-height: 18px !important;
  65.     position: 0px !important;
  66. }
  67. #toolbar-menubar {
  68.     min-height:9px!important;
  69.     height: 15px !important;
  70.     margin-top:-1px!important;
  71.     margin-bottom:2px!important;   
  72. }
  73. #nav-bar{ border-top-width: 0px !important;
  74.     border-top-width: 0px !important;
  75.     padding-top: 0px !important;
  76.     padding-bottom: 0px !important;
  77.     height: 12px !important;
  78.     margin-top: -1px !important;
  79.     margin-bottom: -1px !important;
  80. }
  81. #nav-bar .toolbarbutton-1 {
  82.   min-height: 22px !important;
  83.   height: 24px !important;
  84.   padding-top: 5px !important;
  85.   margin-top: 1px !important;
  86. }
  87. toolbar .toolbarbutton-1 {
  88.     scale: 80% !important;
  89.     margin-top: 1px !important;
  90.     appearance: auto !important;
  91. }
  92. #forward-button, #back-button, #reload-button, #home-button, #PlacesChevron, #nav-bar-overflow-button {
  93.     margin-top: 5px !important;
  94.     scale: 90% !important;
  95. }
  96. toolbar .toolbarbutton-1 > .toolbarbutton-icon {
  97.     margin-top: -13px !important;
  98. }
  99. #urlbar,
  100. .searchbar-textbox {
  101.   margin: 0px !important;
  102.   margin-top: -2px !important;
  103.   min-height: 0px !important;
  104. }
  105. &[uidensity="compact"] {
  106.     --urlbar-min-height: max(20px, 1.4em) !important;
  107. }
  108. #firefox-view-button {
  109.   padding-top: 9px !important;
  110. }
  111. #tracking-protection-icon-animatable-box {
  112.     height: 15px !important;
  113. }
  114. #searchbar {
  115.   margin: 0px !important;
  116.   margin-top: 0px !important;
  117.   min-height: 0px !important;
  118.   height: 18px !important;
  119. }
  120. #searchbar .searchbar-textbox {
  121.   padding: 7px 2px 3px !important;
  122. }
  123. #main-window:not([tabsintitlebar]) #nav-bar,
  124. #main-window:not([tabsintitlebar]) #navigator-toolbox {
  125.   border-top: 0 !important;
  126.   box-shadow: unset !important;
  127. }
  128. #main-window[uidensity=compact] #nav-bar #nav-bar-customization-target > toolbaritem{
  129.   margin: 0px !important;
  130.   padding: 0px !important;
  131. }
  132. #navigator-toolbox #TabsToolbar .close-icon > .toolbarbutton-icon {
  133.   min-width: 16px !important;
  134.   width: 16px !important;
  135.   min-height: 16px !important;
  136.   height: 16px !important;
  137.   padding: 0px !important;
  138. }
  139. #nav-bar:not(:-moz-lwtheme),
  140. toolbar:not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar):not(:-moz-lwtheme) {
  141.   -moz-appearance: none !important;
  142.   box-shadow: unset !important;
  143. }
  144. #tabbrowser-tabs,
  145. #tabbrowser-tabs > .tabbrowser-arrowscrollbox,
  146. .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  147.   min-height: 15px !important;
  148. }
  149. /*#context_bookmarkAllTabs, #context_openTabInWindow, #context_pinTab, #context_toggleMuteTab, #context_reloadTab, #context_duplicateTab {
  150.     display:none !important;
  151.     }*/
  152. #titlebar-close {
  153.     margin-top:10px !important;
  154.     padding-top: 0px !important;
  155.     padding-bottom: 0px !important;
  156. }
  157. #titlebar-max {
  158.     margin-top: 0px !important;
  159.     padding-top: 0px !important;
  160.     padding-bottom: 0px !important;
  161. }
  162. #titlebar-min {
  163.     margin-top:-1px !important;
  164.     padding-top: 0px !important;
  165.     padding-bottom: 0px !important;
  166. }
  167. .titlebar-min {
  168.         padding-bottom: 0px !important;
  169.         padding-top: 0px !important;
  170.       }
  171. .titlebar-max {
  172.         padding-bottom: 0px !important;
  173.         padding-top: 0px !important;
  174.       }
  175. :root[sizemode="maximized"] .titlebar-max {
  176.         padding-bottom: 0px !important;
  177.         padding-top: 0px !important;
  178.       }
  179. .titlebar-close {
  180.         padding-bottom: 0px !important;
  181.         padding-top: 0px !important;
  182.       }
  183. .titlebar-button {
  184.     padding: 2px 17px !important;
  185. }
  186. #navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  187.   padding-bottom: -1px !important;
  188. }
  189. #navigator-toolbox[movingtab] #tabbrowser-tabs {
  190.   padding-bottom: unset !important;
  191.   margin-bottom: unset !important;
  192. }
  193. #navigator-toolbox[movingtab] > #nav-bar {
  194.   margin-top: unset !important;
  195. }
  196. toolbar .toolbarbutton-1 > .toolbarbutton-icon > tabs-newtab-button {
  197.     width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
  198.     height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
  199.     margin-top: -11px !important;
  200. }
  201. #TabsToolbar .toolbarbutton-1 {
  202.   margin: -4px 0px -4px 0px !important;
  203. }
  204. #main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
  205.   padding-bottom: calc(1px + var(--tab-min-height_tnot)) !important;
  206. }
  207. @media (-moz-os-version:windows-win10), (-moz-os-version:windows-win8), (-moz-os-version:windows-win7) {
  208.     #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container   {
  209.       top: 1px !important;
  210.     }
  211.     #main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container {
  212.       top: 8px !important;
  213.     }
  214. }
  215. @media (-moz-os-version: windows-win7) {
  216.   @media all and (-moz-windows-compositor) {
  217.     #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container {
  218.       display: none !important;
  219.     }
  220.   }
  221.   @media not all and (-moz-windows-compositor) {
  222.     #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container {
  223.       top: -2px !important;
  224.     }
  225.     #main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container {
  226.       top: 0px !important;
  227.     }
  228.     #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar .titlebar-buttonbox-container {
  229.       display: none !important;
  230.     }
  231.   }
  232. }
  233. @media (-moz-os-version: windows-win10) {
  234.   #main-window:not([tabsintitlebar]) menubar > menu:not(:-moz-lwtheme):hover:not([disabled="true"]),
  235.   #main-window:not([tabsintitlebar]) menubar > menu:not(:-moz-lwtheme)[_moz-menuactive="true"]:not([disabled="true"]) {
  236.     background-color: Highlight !important;
  237.     color: HighlightText !important;
  238.   }
  239. }
  240. #main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container,
  241. #main-window[tabsintitlebar][sizemode="fullscreen"] #navigator-toolbox #PanelUI-button,
  242. #main-window #TabsToolbar #window-controls {
  243.   display: none !important;
  244. }
  245. #TabsToolbar .private-browsing-indicator,
  246. #TabsToolbar #window-controls,
  247. #TabsToolbar *[type="caption-buttons"],
  248. #TabsToolbar *[type="pre-tabs"],
  249. #TabsToolbar *[type="post-tabs"] {
  250.   display: none !important;
  251. }
  252. @media (-moz-windows-classic) {
  253.     #nav-bar:not(:-moz-lwtheme),
  254.     #PersonalToolbar:not(:-moz-lwtheme),
  255.     #main-window:not([tabsintitlebar])  #TabsToolbar:not(:-moz-lwtheme) {
  256.       border-left: unset !important;
  257.       border-right: unset !important;
  258.     }
  259.  
  260.     #main-window[sizemode="normal"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar) {
  261.       border-left: 0px !important;
  262.       border-right: 0px !important;
  263.     }
  264.  
  265.     #main-window:not([tabsintitlebar]) #toolbar-menubar:not(:-moz-lwtheme) {
  266.       background: unset !important;
  267.       box-shadow: unset !important;
  268.       border-bottom: unset !important;
  269.     }
  270.  
  271.     #main-window:not([tabsintitlebar]):not(:-moz-lwtheme) #navigator-toolbox,
  272.     #main-window:not([tabsintitlebar]):not(:-moz-lwtheme) #nav-bar,
  273.     #main-window:not([tabsintitlebar]):not(:-moz-lwtheme) #navigator-toolbox::before,
  274.     #main-window:not([tabsintitlebar]):not(:-moz-lwtheme) #nav-bar::before,
  275.     #main-window:not([tabsintitlebar]):not(:-moz-lwtheme) #navigator-toolbox::after,
  276.     #main-window:not([tabsintitlebar]):not(:-moz-lwtheme) #nav-bar::after {
  277.       box-shadow: unset !important;
  278.       border: unset !important;
  279.       border-image: unset !important;
  280.     }
  281. }
  282. .searchmode-switcher {
  283.     height: 20px !important;
  284. }
  285. #main-window:not([tabsintitlebar]) #toolbar-menubar:not(:-moz-lwtheme) {
  286.   background-image: var(--colored_menubar_background_image) !important;
  287.   border: 0px !important;
  288.   margin-bottom: -1px !important;
  289. }
  290. #nav-bar:not(:-moz-lwtheme) {
  291.   -moz-appearance: none !important;
  292.   background: var(--general_toolbar_color_navbar, inherit) !important;
  293. }
  294. toolbar:not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar):not(:-moz-lwtheme) {
  295.   -moz-appearance: none !important;
  296.   background: linear-gradient(#f9f9fa,#f9f9fa) !important;
  297. }
  298. #TabsToolbar:not(:-moz-lwtheme){
  299.   -moz-appearance: none !important;
  300.   background-image: var(--tabs_toolbar_color_tabs_not_on_top) !important;
  301. }
  302. #main-window[style*='--lwt-header-image'] :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar):-moz-lwtheme{
  303.   background: unset !important;
  304. }
  305. #main-window:not([style*='--lwt-header-image']) #TabsToolbar:-moz-lwtheme {
  306.   -moz-appearance: none !important;
  307.   background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)) !important;
  308. }
  309. #TabsToolbar:not(:-moz-lwtheme) .tabbrowser-tab .tab-content[selected="true"] {
  310.   background-image: linear-gradient(#f9f9fa,#f9f9fa) !important;
  311. }
  312. #TabsToolbar:not(:-moz-lwtheme),
  313. #TabsToolbar:not(:-moz-lwtheme)::before,
  314. #TabsToolbar:not(:-moz-lwtheme)::after {
  315.   box-shadow: unset !important;
  316. }
Tags: firefox
Advertisement
Comments
  • Razor512
    Razor512
    3 years (edited)
    Comment was deleted
  • Razor512
    Razor512
    3 years
    # text 0.24 KB | 0 0
    view report reply
    1. In about:config the following preference must be set to true in order to enable the compact mode setting:
    2. browser.compactmode.show
    3. More detailed instructions can be found in https://support.mozilla.org/en-US/kb/compact-mode-workaround-firefox
  • Razor512
    Razor512
    2 years (edited)
    Comment was deleted
  • Razor512
    Razor512
    2 years
    # text 1.04 KB | 0 0
    view report reply
    1. If you have not used the user chrome function in Firefox before, then you may need to enable the ability to load the CSS file.
    2. To enable it:
    3. 1: Go to about:config
    4. 2: In the search bar on the config page, enter the following text
    5. toolkit.legacyUserProfileCustomizations.stylesheets
    6. 3: There should be one result that you can change its value to "True".
    7.  
    8. After that, restart firefox, and it should load the css file (without the quotation makes, named "userChrome.css")
    9.  
    10. The default location for it is C:\Users\your user name\AppData\Roaming\Mozilla\Firefox\Profiles\randomly generated name will be here.default-release\chrome
    11.  
    12. Once that is done, the compact UI css should load find and if the UI density is set to "Compact" in the toolbar settings menu (found by right clicking on a tool bar such as the tabs toolbar, and then clicking on "Customize Toolbar" and then changing the density to "Compact".
    13.  
    14. Also make sure that Menu Bar is enabled in the Toolbars dropdown menu (located in the lower left hand corner of the Customize Firefox page).
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!