Apparently it works now, I don't know why. I created another file with the code and it worked. Thanks for all you do to the Firefox Community!
Hello!
I'm using a custom script made by MrOtherGuy that serves to hide the whole toolbox. The code is this: https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/autohide_toolbox.css
``` /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_toolbox.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */
/* Hide the whole toolbar area unless urlbar is focused or cursor is over the toolbar
- Dimensions on non-Win10 OS probably needs to be adjusted. */
:root{ --uc-autohide-toolbox-delay: 200ms; /* Wait 0.1s before hiding toolbars / --uc-toolbox-rotation: 82deg; / This may need to be lower on mac - like 75 or so */ }
:root[sizemode="maximized"]{ --uc-toolbox-rotation: 88.5deg; }
u/media (-moz-platform: windows){ :root:not([lwtheme]) #navigator-toolbox{ background-color: -moz-dialog !important; } }
:root[sizemode="fullscreen"], :root[sizemode="fullscreen"] #navigator-toolbox{ margin-top: 0 !important; }
#navigator-toolbox{ --browser-area-z-index-toolbox: 3; position: fixed !important; background-color: var(--lwt-accent-color,black) !important; transition: transform 82ms linear, opacity 82ms linear !important; transition-delay: var(--uc-autohide-toolbox-delay) !important; transform-origin: top; transform: rotateX(var(--uc-toolbox-rotation)); opacity: 0; line-height: 0; z-index: 1; pointer-events: none; width: 100vw; } :root[sessionrestored] #urlbar[popover]{ pointer-events: none; opacity: 0; transition: transform 82ms linear var(--uc-autohide-toolbox-delay), opacity 0ms calc(var(--uc-autohide-toolbox-delay) + 82ms); transform-origin: 0px calc(0px - var(--tab-min-height) - var(--tab-block-margin) * 2); transform: rotateX(89.9deg); } #mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ toolbox #urlbar[popover], #navigator-toolbox:is(:hover,:focus-within,[movingtab]) #urlbar[popover], #urlbar-container > #urlbar[popover]:is([focused],[open]){ pointer-events: auto; opacity: 1; transition-delay: 33ms; transform: rotateX(0deg); } #mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ toolbox, #navigator-toolbox:has(#urlbar:is([open],[focus-within])), #navigator-toolbox:is(:hover,:focus-within,[movingtab]){ transition-delay: 33ms !important; transform: rotateX(0); opacity: 1; } /* This makes things like OS menubar/taskbar show the toolbox when hovered in maximized windows.
- Unfortunately it also means that other OS native surfaces (such as context menu on macos)
- and other always-on-top applications will trigger toolbox to show up. */ u/media (-moz-bool-pref: "userchrome.autohide-toolbox.unhide-by-native-ui.enabled"), -moz-pref("userchrome.autohide-toolbox.unhide-by-native-ui.enabled"){ :root[sizemode="maximized"]:not(:hover){ #navigator-toolbox:not(:-moz-window-inactive), #urlbar[popover]:not(:-moz-window-inactive){ transition-delay: 33ms !important; transform: rotateX(0); opacity: 1; } } }
#navigator-toolbox > *{ line-height: normal; pointer-events: auto }
/* Don't apply transform before window has been fully created */ :root:not([sessionrestored]) #navigator-toolbox{ transform:none !important }
:root[customizing] #navigator-toolbox{ position: relative !important; transform: none !important; opacity: 1 !important; }
#navigator-toolbox[inFullscreen] > #PersonalToolbar, #PersonalToolbar[collapsed="true"]{ display: none }
/* This is a bit hacky fix for an issue that will make urlbar zero pixels tall after you enter customize mode */ #urlbar[breakout][breakout-extend] > .urlbar-input-container{ padding-block: calc(min(4px,(var(--urlbar-container-height) - var(--urlbar-height)) / 2) + var(--urlbar-container-padding)) !important; }
/* Uncomment this if tabs toolbar is hidden with hide_tabs_toolbar.css / /#titlebar{ margin-bottom: -9px }*/
/* Uncomment the following for compatibility with tabs_on_bottom.css - this isn't well tested though / / #navigator-toolbox{ flex-direction: column; display: flex; } #titlebar{ order: 2 } */
``` It works great but what I'd like to do is to make it so that when I click a tab and drag it to change its place in the tabbar nothing disappears, this is because when I click and drag a tab the toolbox disappears and the tab goes to a new windows when I let go of it.
Thanks a lot!
Hello, I wanted to know how can I change the border that appears when dragging an item in about:preferences in the search section. In this part specifically:
Hope someone can help me, thanks!
Hello. When you open the browser toolbox theres a popup message that says if you want to allow the connection and there are three buttons: Accept, deactivate and Cancel. I'm trying to change the style of the deactivate button and I'm not being able to do it. I've tried with this:
button[dlgtype="accept"]:hover, button[dlgtype="deactivate"]:hover, button[dlgtype="cancel"]:hover { color: var(--color) !important; background-color: black !important; }
And it looks like this:
I don't know if there's a way to disable that message so that it always enters the browser toolbox.
Thanks for any help!
Hey!
I am trying to make a line that goes from one side of the screen to the other under the navbar or the tabs, I have a gradient I'd like to use. I've tried with border bottom but haven't been able to achieve it.
Any suggestions? Thanks!
I used this code:
/* 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. */
/* 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
Use tabs_on_bottom_menubar_on_top_patch.css if you
have menubar permanently enabled and want it on top
*/
#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
#TabsToolbar > .titlebar-buttonbox-container{
position: fixed;
display: block;
top: 0px;
right:0;
height: 40px;
}
@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"),
(-moz-gtk-csd-reversed-placement),
(-moz-platform: macos){
.titlebar-buttonbox-container{ left:0; right: unset !important; }
}
:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }
#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }
.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }
#titlebar{
order: 2;
-moz-appearance: none !important;
--tabs-navbar-shadow-size: 0px;
--uc-menubar-vertical-overlap: 19px; /* for hide_tabs_with_one_tab_w_window_controls.css compatibility */
}
/* Re-order window and tab notification boxes */
#navigator-toolbox > div{ display: contents }
.global-notificationbox,
#tab-notification-deck{
order: 2;
}
#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{
flex-direction: column;
}
}
/* At Activated Menubar */
:root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container {
display: block !important;
}
#toolbar-menubar:not([autohide="true"]) > .titlebar-buttonbox-container {
visibility: hidden;
}
/* 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 }
#TabsToolbar > .titlebar-buttonbox-container{ visibility: visible }
:root:not([lwtheme]) #navigator-toolbox{ background-color: -moz-dialog }
/* Uncomment the following if you want bookmarks toolbar to be below tabs */
/*
#PersonalToolbar{
order: 2;
}
*/
I think its one that you created actually
Hello! I am trying to move the windows buttons (min, max, close) in the top right corner. I changed my tabs to be under the urlbar. It looks like this:
Thanks for any help!
Perfect!
Thank you so much!
Hey I have an svg of a color animation, it's basically a gradient that loops around. And was wondering if it's possible to change the font color of the active tab to that svg animation.
I've been trying to do it with:
.tabbrowser-tab[selected] .tab-content{ text-color: url(../icons/animation.svg) !important; }
but can't get it to work.
Thanks for any help!
Perfect!
Thanks a lot!!
I see, this is for the highlighting, right?
And for the popup it would be the same? The other popups in my toolbox do look like they are intended to, its just that one that doesn't work.
Hello! I was wondering how can I change the colors that appear when you inspect an element. They look like this: And also was wondering how can I change the popup that appears when you right click the style sheets in the style editor in the toolbox. It looks like this: https://imgur.com/a/S47spyg
Thanks!