API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 11th, 2025
23
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.38 KB | None | 0 0
raw download clone embed print report
  1. /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_main_toolbar.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. /* This style hides the main toolbar and shows it when the cursor is over the tabs toolbar as well as whenever the focus is inside nav-bar, such as when urlbar is focused. */
  5.  
  6. :root{
  7. --uc-navbar-transform: -40px;
  8. --uc-autohide-toolbar-delay: 1.8s;
  9. --uc-autohide-toolbar-duration: 400ms;
  10. }
  11. :root[uidensity="compact"]{ --uc-navbar-transform: -34px }
  12.  
  13. #navigator-toolbox > div{ display: contents; }
  14. :root[sessionrestored] :where(#nav-bar,#PersonalToolbar,#tab-notification-deck,.global-notificationbox){
  15. transform: translateY(var(--uc-navbar-transform))
  16. }
  17. :root:is([customizing],[chromehidden*="toolbar"]) :where(#nav-bar,#PersonalToolbar,#tab-notification-deck,.global-notificationbox){
  18. transform: none !important;
  19. opacity: 1 !important;
  20. }
  21.  
  22. #nav-bar:not([customizing]){
  23. opacity: 0;
  24. transition: transform var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay), opacity var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay) !important;
  25. position: relative;
  26. z-index: 2;
  27. }
  28. #titlebar{ position: relative; z-index: 3 }
  29.  
  30. #navigator-toolbox,
  31. #sidebar-box,
  32. #sidebar-main,
  33. #sidebar-splitter,
  34. #tabbrowser-tabbox{
  35. z-index: auto !important;
  36. }
  37. /* Show when toolbox is focused, like when urlbar has received focus */
  38. #navigator-toolbox:focus-within > .browser-toolbar{
  39. transform: translateY(0);
  40. opacity: 1;
  41. transition-duration: var(--uc-autohide-toolbar-duration), var(--uc-autohide-toolbar-duration) !important;
  42. transition-delay: 0s !important;
  43. }
  44. /* Show when toolbox is hovered */
  45. #titlebar:hover ~ .browser-toolbar,
  46. .browser-titlebar:hover ~ :is(#nav-bar,#PersonalToolbar),
  47. #nav-bar:hover,
  48. #nav-bar:hover + #PersonalToolbar{
  49. transform: translateY(0);
  50. opacity: 1;
  51. transition-duration: var(--uc-autohide-toolbar-duration), var(--uc-autohide-toolbar-duration) !important;
  52. transition-delay: 0s !important;
  53. }
  54. :root[sessionrestored] #urlbar[popover]{
  55. opacity: 0;
  56. pointer-events: none;
  57. transition: transform var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay), opacity var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay);
  58. transform: translateY(var(--uc-navbar-transform));
  59. }
  60. #mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ toolbox #urlbar[popover],
  61. .browser-titlebar:is(:hover,:focus-within) ~ #nav-bar #urlbar[popover],
  62. #nav-bar:is(:hover,:focus-within) #urlbar[popover],
  63. #urlbar-container > #urlbar[popover]:is([focused],[open]){
  64. opacity: 1;
  65. pointer-events: auto;
  66. transition-delay: 0ms;
  67. transform: translateY(0);
  68. }
  69. #urlbar-container > #urlbar[popover]:is([focused],[open]){
  70. transition-duration: 100ms; /* Faster when focused */
  71. }
  72. /* This ruleset is separate, because not having :has support breaks other selectors as well */
  73. #mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ #navigator-toolbox > .browser-toolbar{
  74. transition-delay: 33ms !important;
  75. transform: translateY(0);
  76. opacity: 1;
  77. }
  78. /* If tabs are in sidebar then nav-bar doesn't normally have its own background - so we nee to add it back */
  79. #nav-bar.browser-titlebar{
  80. background: inherit;
  81. }
  82. #toolbar-menubar:not([autohide="true"]) ~ #nav-bar.browser-titlebar{
  83. background-position-y: -28px; /* best guess, could vary */
  84. border-top: none !important;
  85. }
  86.  
  87. /* Bookmarks toolbar needs so extra rules */
  88. #PersonalToolbar{ transition: transform var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay) !important; position: relative; z-index: 1 }
  89.  
  90. /* Move up the content view */
  91. :root[sessionrestored]:not([chromehidden~="toolbar"]) > body > #browser{
  92. margin-top: var(--uc-navbar-transform);
  93. }
  94. @media -moz-pref("browser.fullscreen.autohide"),
  95. (-moz-bool-pref: "browser.fullscreen.autohide"){
  96. :root[sessionrestored][sizemode="fullscreen"] > body > #browser{
  97. margin-top: revert;
  98. }
  99. }
  100.  
  101.  
  102.  
  103.  
  104.  
  105.  
  106.  
  107.  
  108.  
  109. /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/hide_tabs_toolbar_v2.css made available under Mozilla Public License v. 2.0
  110. See the above repository for updates as well as full license text. */
  111.  
  112. /* This requires Firefox 133+ to work */
  113.  
  114. @media (-moz-bool-pref: "sidebar.verticalTabs"){
  115. #sidebar-main{
  116. visibility: collapse;
  117. }
  118. }
  119. @media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"){
  120. #nav-bar > .titlebar-buttonbox-container{
  121. order: -1 !important;
  122. > .titlebar-buttonbox{
  123. flex-direction: row-reverse;
  124. }
  125. }
  126. }
  127. @media not (-moz-bool-pref: "sidebar.verticalTabs"){
  128. #TabsToolbar:not([customizing]){
  129. visibility: collapse;
  130. }
  131. :root[sizemode="fullscreen"] #nav-bar > .titlebar-buttonbox-container{
  132. display: flex !important;
  133. }
  134. :root:is([tabsintitlebar],[customtitlebar]) #toolbar-menubar:not([autohide="false"]) ~ #nav-bar{
  135. > .titlebar-buttonbox-container{
  136. display: flex !important;
  137. }
  138. :root[sizemode="normal"] & {
  139. > .titlebar-spacer{
  140. display: flex !important;
  141. }
  142. }
  143. :root[sizemode="maximized"] & {
  144. > .titlebar-spacer[type="post-tabs"]{
  145. display: flex !important;
  146. }
  147. @media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"),
  148. (-moz-gtk-csd-reversed-placement),
  149. (-moz-platform: macos){
  150. > .titlebar-spacer[type="post-tabs"]{
  151. display: none !important;
  152. }
  153. > .titlebar-spacer[type="pre-tabs"]{
  154. display: flex !important;
  155. }
  156. }
  157. }
  158. }
  159. }
  160.  
  161.  
  162.  
  163. /* Hide splitter line */
  164. #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] + #sidebar-splitter {
  165. display: none !important;
  166. }
  167.  
  168. /* Shrink sidebar until hovered */
  169. :root {
  170. --thin-tab-width: 31px;
  171. --wide-tab-width: 200px;
  172. }
  173. #sidebar-box:not([sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]) {
  174. min-width: var(--wide-tab-width) !important;
  175. max-width: none !important;
  176. }
  177. #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
  178. overflow: hidden !important;
  179. position: relative !important;
  180. transition: all 300ms !important;
  181. /*transition: all 0ms 0s !important;*/
  182. min-width: var(--thin-tab-width) !important;
  183. max-width: var(--thin-tab-width) !important;
  184. z-index: 9999;
  185. }
  186. #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover,
  187. #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar {
  188. /*transition-delay: 0s !important;*/
  189. transition: all 300ms !important;
  190. min-width: var(--wide-tab-width) !important;
  191. max-width: var(--wide-tab-width) !important;
  192. z-index: 9998;
  193. }
  194.  
  195.  
  196.  
  197.  
  198.  
  199.  
  200.  
  201. /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_tabstoolbar_v2.css made available under Mozilla Public License v. 2.0
  202. See the above repository for updates as well as full license text. */
  203.  
  204. /* Requires Firefox 133 */
  205.  
  206. :root{
  207. --uc-tabs-hide-animation-duration: 48ms;
  208. --uc-tabs-hide-animation-delay: 200ms;
  209. }
  210.  
  211. @media (-moz-bool-pref: "sidebar.verticalTabs"),
  212. -moz-pref("sidebar.verticalTabs"){
  213. #sidebar-main{
  214. overflow: visible !important;
  215. max-width: var(--tab-collapsed-width) !important;
  216. z-index: var(--browser-area-z-index-toolbox-while-animating);
  217. transition: z-index 0s linear var(--uc-tabs-hide-duration);
  218. background: inherit;
  219. }
  220. sidebar-main{
  221. --tab-pinned-horizontal-count: 5; /* This needs to match whatever is used in sidebar-main.css - currently 5 */
  222. background: inherit;
  223. overflow: hidden;
  224. min-width: var(--tab-collapsed-width);
  225. transition: min-width var(--uc-tabs-hide-animation-duration) ease-out var(--uc-tabs-hide-animation-delay);
  226. border-inline: 0.01px solid var(--chrome-content-separator-color);
  227. border-inline-width: 0 0.01px;
  228. &:is([sidebar-positionend],[positionend]){
  229. transition-property: min-width, transform;
  230. border-inline-width: 0.01px 0;
  231. }
  232. }
  233. sidebar-main:hover{
  234. min-width: calc(var(--tab-pinned-horizontal-count) * var(--tab-pinned-min-width-expanded) + 2 * var(--tab-pinned-container-margin-inline-expanded) + 1px);
  235. transition-delay: 0ms !important;
  236. &:is([sidebar-positionend],[positionend]){
  237. transform: translateX(calc(var(--tab-collapsed-width) - 100%));
  238. }
  239. }
  240. #sidebar-wrapper{
  241. background: inherit;
  242. }
  243. }
  244. @media not (-moz-bool-pref: "sidebar.verticalTabs"),
  245. not -moz-pref("sidebar.verticalTabs"){
  246. :root:not([customizing],[chromehidden~="menubar"]) #navigator-toolbox:hover,
  247. :root:not([customizing],[chromehidden~="menubar"]) #TabsToolbar{
  248. margin-bottom: calc(0px - 2 * var(--tab-block-margin) - var(--tab-min-height));
  249. }
  250. #navigator-toolbox{
  251. transition: margin-bottom var(--uc-tabs-hide-animation-duration) ease-out var(--uc-tabs-hide-animation-delay) !important;
  252. --browser-area-z-index-toolbox: 3;
  253. }
  254. #TabsToolbar:not([customizing]){
  255. visibility: hidden;
  256. transition: visibility 0ms linear var(--uc-tabs-hide-animation-delay),
  257. margin-bottom var(--uc-tabs-hide-animation-duration) ease-out var(--uc-tabs-hide-animation-delay) !important;
  258. }
  259. #navigator-toolbox:is(:hover,[movingtab]){
  260. transition-delay: 0s !important;
  261. > #TabsToolbar{
  262. visibility: visible;
  263. margin-bottom: 0px;
  264. transition-delay: 18ms, 0ms !important;
  265. }
  266. }
  267. @media (-moz-bool-pref: "userchrome.autohidetabs.show-while-inactive.enabled"),
  268. -moz-pref("userchrome.autohidetabs.show-while-inactive.enabled"){
  269. #navigator-toolbox:-moz-window-inactive{
  270. margin-bottom: calc(0px - 2 * var(--tab-block-margin) - var(--tab-min-height));
  271. > #TabsToolbar{
  272. visibility: visible;
  273. margin-bottom: 0px;
  274. }
  275. }
  276. }
  277. /* These rules make sure that height of tabs toolbar doesn't exceed tab-min-height */
  278. #tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container{
  279. max-height: var(--tab-min-height);
  280. }
  281. .tab-label{ line-height: 20px !important; }
  282. :root[uidensity="compact"] .tab-label{ line-height: 18px !important; }
  283. }
  284.  
  285.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!