The new style don't put the menubar (Alt) into the navbar, there is no possible?
thanks, I will try that v2.
Tested in Firefox developer edition
Hi, I used this two files (window_control_placeholder_support.css + hide_tabs_toolbar.css) for tree-tabs but seems like they will need an update. The window controls only shows when press Alt and the menubar shows behind the urlbar.
ooooh, I wonder if I give a higher zindex to all the navigator-toolbox it could cause random problems but I will try.
Edit: Sadly changing the z-index to all navigator-toolbox cause other issues in my theme and I should change a lot of code, hate this Firefox change jeje.
Edit2: I tried this code and seems to work in some cases, I wonder what damage this could cause but the time will say:
#navigator-toolbox{
z-index: unset !important;
}
Issue in Firefox beta
hi, I set a z-index in 2 elements but don't work and I can't solve it.
I have this code to move the hamburger menu to left top side:
:root:not([chromehidden~="toolbar"]) #PanelUI-button {
position: fixed;
display: flex;
top: var(--windowed-top-padding, 0px);
left: 0px !important;
z-index: 3 !important;
}
and I have this code to move higher the Firefox Sidebar:
:root:not([sizemode="fullscreen"]):has(sidebar-main:not([expanded])) {
& #sidebar-main {
/* Bakground-color necessary for gradient line color */
background-color: var(--lwt-frame) !important;
/* Top-bottom margins */
padding-top: var(--padding-top-left-sidebar) !important;
/* Gradient line */
margin-top: calc( -1px - var(--bookmarksbar-height-personal, 0px) - var(--toolbar-height-personal) -
var(--Space-before-gradient-line)) !important;
border-inline-end: 1px solid red !important;
z-index: 2 !important;
}
}
the problem is the hamburger menu stay behind the Sidebar, I wonder why the z-index don't work.
@[email protected] I'm gonna need your help again, sorry. I used your code to gradient border around selected tab and works fine but I see a little flash in certain situations that makes me nuts; this is the code:
.tabbrowser-tab[selected] > .tab-stack::before{
content: "";
display: flex;
min-height: inherit;
border-radius: var(--tab-border-radius);
grid-area: 1/1;
margin-block: var(--tab-block-margin);
/* Edit gradient colors here */
background: var(--general-color) !important;
border-radius: 0px 2px 0px 0px !important;
}
When I click to select the tab, sometimes the tab is first colored with the border color and then it displays correctly, Here is a SS with the problem, there is a way to delay the colored after the tab is completely charged or some trick?
Information that heals, thanks for all. 💙
ooh, I notice a rare behavior when use this in horizontal tabs, so the issue is that min-max width cause problems, I understand.
/* Horizontal tab size */
.tabbrowser-tab[fadein]:not([style^="max-width"]) {
max-width: 200px !important;
}
in Vertical tabs I noticed that the property of the tab that don't close has fadein property, I tried this code to delete that empty space, but visually works but in the background the tab is still stuck.
/* Important! bug fix for tabs that keep space after close them */
.tabbrowser-tab {
&:not([pinned], [fadein]) {
visibility: collapse !important;
}
}
@[email protected] hi, I wanted to bother you with another question, If you use the new feature of Vertical-tabs you maybe notice that if you have the Sidebar expanded the tabs is like they stuck in some way, I'll show you this with new-tab pages but is the same with webpages: https://imgur.com/a/BbECuIp
I think this is not a behavior caused by a CSS or it is possible?
toggle: devtools.debugger.prompt-connection
Thanks, this open a lot of possibilities. 🖤
hi, I would like to know how to Apply margin to web content but not when a video is in fullscreen? and keep the margin when Firefox is in fullscreen. I mean I would like to apply a margin to web content that not affect when a video is in fullscreen. I used this code:
:root:not([chromehidden~="toolbar"]) {
/* Web content */
& #appcontent{
margin-inline-start: var(--my-vertical-toolbar-width) !important;
}
/* Sidebar + sidebar content */
& #sidebar-box[checked="true"] {
margin-inline-start: var(--my-vertical-toolbar-width) !important;
}
/* Sidebar + sidebar content + web content */
& #sidebar-box[checked="true"] ~ #appcontent {
margin-inline-start: 0px !important;
}
}
but that applies a margin when a video is in fullscreen, I tried too this code but removes the margin when Firefox is in fullscreen:
:root:not([chromehidden~="toolbar"],[sizemode="fullscreen"]) {
...
}
I updated the code and check the rest of my code and all is good now, sorry for the lost time.
I will check again...
Hi, I used this code and it used to work perfectly, but I tried it just now and I'm having some visual issues like in the screenshot.
1.- the url border (not open, not focus) display 1px inside the url default border.
2.- when urlbar is open the border don't expand properly.
hi,
I wonder if is possible to fix this rare behavior when I apply the next css in the new-tab:
body{
backdrop-filter: brightness(99%);
}
if I don't add the filter there isn't a scroll.
hi, I'm asking for help to solve this inconvenient when I try to replace the default wallpapers in newtab page. Fist of all I'm using the developer Firefox version that use beta version to do this.
I have activated this preference in about:config page:
browser.newtabpage.activity-stream.newtabWallpapers.enabled to true
after that I replaced the wallpapers thumbnails successfully with the next code:
/* Miniaturas de wallpapers */
/* Dark */
.wallpaper-input.dark-landscape { background-image: url("../newtab/wallpaper-dark.png") !important; }
.wallpaper-input.dark-panda { background-image: url("../newtab/wallpaper-dark2.png") !important; }
.wallpaper-input.dark-color { background-image: url("../newtab/wallpaper-dark3.png") !important; }
.wallpaper-input.dark-sky { background-image: url("../newtab/wallpaper-dark4.png") !important; }
.wallpaper-input.dark-mountain { background-image: url("../newtab/wallpaper-dark5.png") !important; }
.wallpaper-input.dark-beach { background-image: url("../newtab/wallpaper-dark6.png") !important; }
but when I try to replace the wallpaper for the first image in newtab page it don't work with the path I used to use, for example this code:
body:has(#dark-landscape[aria-checked="true"]){
--newtab-wallpaper-dark: url("../newtab/wallpaper-dark.png") !important;
}
and only works when I use a url for the new image like this:
body:has(#dark-landscape[aria-checked="true"]){
--newtab-wallpaper-dark: url(https://i.imgur.com/It1Ugaa.png) !important;
}
so I wonder if is my mistake or is a Firefox bug, or maybe there is a trick to solve it? cause I would like to use local images and not urls.
Ty, I'll do that.