API tools faq
paste
Guest User

Custom CSS Firefox - Hide Tabs and AutoHide SideBar

a guest
Aug 21st, 2025
60
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.37 KB | Software | 0 0
raw download clone embed print report
  1. /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/hide_tabs_toolbar_osx.css made available under Mozilla Public License v. 2.0
  2. See the above repository for updates as well as full license text. */
  3.  
  4. /* Hides tabs toolbar - OSX only */
  5.  
  6. /* IMPORTANT */
  7. /*
  8. Get window_control_placeholder_support.css
  9. Window controls will be all wrong without it
  10. */
  11.  
  12. :root{ --uc-toolbar-height: 32px; }
  13. :root:not([uidensity="compact"]){ --uc-toolbar-height: 34px }
  14.  
  15. #TabsToolbar > *{ visibility: collapse !important }
  16. #TabsToolbar > .titlebar-buttonbox-container{
  17. visibility: visible !important;
  18. height:var(--uc-toolbar-height) !important;
  19. }
  20.  
  21. #nav-bar{
  22. margin-top: calc(0px - var(--uc-toolbar-height));
  23. }
  24. :root[inFullscreen] #navigator-toolbox{ margin-top: 11px }
  25.  
  26. /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_tabstoolbar_v2.css made available under Mozilla Public License v. 2.0
  27. See the above repository for updates as well as full license text. */
  28.  
  29. /* Requires Firefox 133 */
  30.  
  31. :root{
  32. --uc-tabs-hide-animation-duration: 48ms;
  33. --uc-tabs-hide-animation-delay: 48ms;
  34. }
  35.  
  36. @media (-moz-bool-pref: "sidebar.verticalTabs"),
  37. -moz-pref("sidebar.verticalTabs"){
  38. #sidebar-main{
  39. overflow: visible !important;
  40. max-width: var(--tab-collapsed-width) !important;
  41. z-index: var(--browser-area-z-index-toolbox-while-animating);
  42. transition: z-index 0s linear var(--uc-tabs-hide-duration);
  43. background: inherit;
  44. }
  45. sidebar-main{
  46. --tab-pinned-horizontal-count: 5; /* This needs to match whatever is used in sidebar-main.css - currently 5 */
  47. background: inherit;
  48. overflow: hidden;
  49. min-width: var(--tab-collapsed-width);
  50. transition: min-width var(--uc-tabs-hide-animation-duration) ease-out var(--uc-tabs-hide-animation-delay);
  51. border-inline: 0.01px solid var(--chrome-content-separator-color);
  52. border-inline-width: 0 0.01px;
  53. &[positionend]{
  54. transition-property: min-width, transform;
  55. border-inline-width: 0.01px 0;
  56. }
  57. }
  58. sidebar-main:hover{
  59. min-width: calc(var(--tab-pinned-horizontal-count) * var(--tab-pinned-min-width-expanded) + 2 * var(--tab-pinned-container-margin-inline-expanded) + 1px);
  60. transition-delay: 0ms !important;
  61. &[positionend]{
  62. transform: translateX(calc(var(--tab-collapsed-width) - 100%));
  63. }
  64. }
  65. }
  66. @media not (-moz-bool-pref: "sidebar.verticalTabs"),
  67. not -moz-pref("sidebar.verticalTabs"){
  68. :root:not([customizing],[chromehidden~="menubar"]) #navigator-toolbox:hover,
  69. :root:not([customizing],[chromehidden~="menubar"]) #TabsToolbar{
  70. margin-bottom: calc(0px - 2 * var(--tab-block-margin) - var(--tab-min-height));
  71. }
  72. #navigator-toolbox{
  73. transition: margin-bottom var(--uc-tabs-hide-animation-duration) ease-out var(--uc-tabs-hide-animation-delay) !important;
  74. --browser-area-z-index-toolbox: 3;
  75. }
  76. #TabsToolbar:not([customizing]){
  77. visibility: hidden;
  78. transition: visibility 0ms linear var(--uc-tabs-hide-animation-delay),
  79. margin-bottom var(--uc-tabs-hide-animation-duration) ease-out var(--uc-tabs-hide-animation-delay) !important;
  80. }
  81. #navigator-toolbox:is(:hover,[movingtab]){
  82. transition-delay: 0s !important;
  83. > #TabsToolbar{
  84. visibility: visible;
  85. margin-bottom: 0px;
  86. transition-delay: 18ms, 0ms !important;
  87. }
  88. }
  89. @media (-moz-bool-pref: "userchrome.autohidetabs.show-while-inactive.enabled"),
  90. -moz-pref("userchrome.autohidetabs.show-while-inactive.enabled"){
  91. #navigator-toolbox:-moz-window-inactive{
  92. margin-bottom: calc(0px - 2 * var(--tab-block-margin) - var(--tab-min-height));
  93. > #TabsToolbar{
  94. visibility: visible;
  95. margin-bottom: 0px;
  96. }
  97. }
  98. }
  99. /* These rules make sure that height of tabs toolbar doesn't exceed tab-min-height */
  100. #tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container{
  101. max-height: var(--tab-min-height);
  102. }
  103. .tab-label{ line-height: 20px !important; }
  104. :root[uidensity="compact"] .tab-label{ line-height: 18px !important; }
  105. }
  106.  
  107.  
  108. /* Hide sidebar */
  109.  
  110. /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0
  111. See the above repository for updates as well as full license text. */
  112.  
  113. /* Show sidebar only when the cursor is over it.
  114. The border controlling sidebar width will be removed so you'll need to modify
  115. these values to change width.
  116. By default the internal layout of sidebar changes when hovered, but this can
  117. be changed by setting pref "userchrome.autohide-sidebar.static-layout.enabled" to true
  118. */
  119.  
  120. /* Note: If you want only *some* sidebar to be auto-hidden, then you can use [sidebarcommand] attribute selector.
  121. For example, to only affect Sidebery's sidebar replace all instances of #sidebar-box with
  122. #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"].
  123. To find the sidebarcommand value for any other sidebar, open that sidebar and use Browser Toolbox to inspect it.
  124. See: https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html
  125. */
  126. :where(#main-window) #browser{
  127. --uc-sidebar-width: 5px;
  128. --uc-sidebar-hover-width: 350px;
  129. }
  130. #main-window[sizemode="fullscreen"] #browser{
  131. --uc-sidebar-width: 1px;
  132. }
  133. #sidebar-box{
  134. --uc-autohide-sidebar-delay: 100ms; /* Wait 0.1s before hiding sidebar */
  135. --uc-autohide-transition-duration: 30ms;
  136. --uc-autohide-transition-type: linear;
  137. --browser-area-z-index-sidebar: 3;
  138. position: relative;
  139. min-width: var(--uc-sidebar-width) !important;
  140. width: var(--uc-sidebar-width) !important;
  141. max-width: var(--uc-sidebar-width) !important;
  142. z-index: var(--browser-area-z-index-sidebar,3);
  143. background-color: inherit;
  144. /* This directionality flipper is played so that sidebar "grows" into the right direction */
  145. direction: ltr;
  146. &:is([positionend],[sidebar-positionend]):not(:-moz-locale-dir(rtl)){
  147. direction: rtl;
  148. }
  149. }
  150. .sidebar-browser-stack{
  151. background: inherit;
  152. }
  153. #main-window[sizemode="fullscreen"] #browser{ --uc-sidebar-width: 1px; }
  154.  
  155. #sidebar-splitter{ display: none }
  156.  
  157. #sidebar-header{
  158. overflow: hidden;
  159. color: var(--chrome-color, inherit) !important;
  160. padding-inline: 0 !important;
  161. }
  162.  
  163. #sidebar-header::before,
  164. #sidebar-header::after{
  165. content: "";
  166. display: flex;
  167. padding-left: 8px;
  168. }
  169.  
  170. #sidebar-header,
  171. #sidebar{
  172. transition: min-width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important;
  173. min-width: var(--uc-sidebar-width) !important;
  174. will-change: min-width;
  175. direction: ltr;
  176. &:-moz-locale-dir(rtl){
  177. direction: rtl;
  178. }
  179. }
  180. #sidebar-box:hover > #sidebar-header,
  181. #sidebar-box:hover > #sidebar,
  182. #sidebar-box:hover > .sidebar-browser-stack > #sidebar{
  183. min-width: var(--uc-sidebar-hover-width) !important;
  184. transition-delay: 0ms !important;
  185. }
  186.  
  187. .sidebar-panel{
  188. background-color: transparent !important;
  189. color: var(--newtab-text-primary-color) !important;
  190. }
  191.  
  192. .sidebar-panel #search-box{
  193. -moz-appearance: none !important;
  194. background-color: rgba(249,249,250,0.1) !important;
  195. color: inherit !important;
  196. }
  197.  
  198. /* Add sidebar divider and give it background */
  199.  
  200. #sidebar,
  201. #sidebar-header{
  202. background-color: inherit !important;
  203. border-inline: 1px solid rgb(80,80,80);
  204. border-inline-width: 0px 1px;
  205. }
  206.  
  207. #sidebar-box:not([positionend],[sidebar-positionend]) > :-moz-locale-dir(rtl),
  208. #sidebar-box:is([positionend],[sidebar-positionend]) > *{
  209. border-inline-width: 1px 0px;
  210. }
  211. @media -moz-pref("sidebar.revamp") {
  212. #sidebar, #sidebar-header{ border-style: none }
  213. #sidebar-box{ padding: 0 !important; }
  214. }
  215. /* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */
  216.  
  217. #sidebar-box:not([positionend],[sidebar-positionend]):hover ~ #appcontent #statuspanel{
  218. inset-inline: auto 0px !important;
  219. }
  220. #sidebar-box:not([positionend],[sidebar-positionend]):hover ~ #appcontent #statuspanel-label{
  221. margin-inline: 0px !important;
  222. border-left-style: solid !important;
  223. }
  224. @media -moz-pref("userchrome.autohide-sidebar.static-layout.enabled"){
  225. #sidebar-box{
  226. min-width: var(--uc-sidebar-width) !important;
  227. contain: size;
  228. box-shadow: var(--content-area-shadow);
  229. }
  230. #sidebar{
  231. min-width: var(--uc-sidebar-hover-width) !important;
  232. }
  233. .sidebar-browser-stack{
  234. overflow: hidden;
  235. width: 100%;
  236. transition: width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay);
  237. direction: ltr;
  238. &:hover{
  239. transition-delay: 0ms;
  240. width: var(--uc-sidebar-hover-width);
  241. }
  242. &:-moz-locale-dir(rtl){
  243. transition-property: transform,width !important;
  244. }
  245. }
  246. #sidebar-box[sidebar-positionend]:hover :is(#sidebar-header,#sidebar):-moz-locale-dir(ltr){
  247. transform: translateX(0);
  248. transition-delay: 0ms !important;
  249. }
  250. #sidebar-box:not([sidebar-positionend]):hover .sidebar-browser-stack:-moz-locale-dir(rtl){
  251. transform: translateX(calc(-1 * var(--uc-sidebar-hover-width) + var(--uc-sidebar-width)));
  252. }
  253. #sidebar-box[sidebar-positionend]:hover > .sidebar-browser-stack:-moz-locale-dir(rtl){
  254. transform: translateX(calc(var(--uc-sidebar-hover-width) - var(--uc-sidebar-width)));
  255. transition-delay: 0ms !important;
  256. }
  257. }
  258.  
Tags: CSS
Advertisement
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!