Hi all, I’m brand new to this CSS messing with this CSS feature and it really doesn’t come naturally to me, but despite that I’ve somehow very nearly got everything how I like it by copying other people’s code and tweaking the variables of that. I was wondering if I could get some help with one of a few final tweaks I wasn’t able to find an existing solution for.
I’m trying to create a flexible status text toolbar item like used to exist (here’s an example from my current setup in Pale Moon), which I can place into the “status bar” that I created using MrOtherGuy’s “fake status bar w bookmarkbar” code. I asked on the Reddit’s r/FirefoxCSS and someone recommended I come here and I might be able to get a hold of MrOtherGuy himself (though obviously other people can help too).
There’s actually already a provision for that in MrOtherGuy’s code for something like that, but it uses a flexible space and only works if you place it on the far left. I want it to be the third item from the left. Also, it doesn’t seem to play very well with a second bit of code I’ve inserted to limit the size of the flexible spaces (because they’re just too wide by default). Still, it seems likely to me that we should be able to get what I want by modifying what MrOtherGuy already added.
Also, I’ve already tweaked one variable a to make the status bar a little thinner, and that seems to have knocked the status text a little off-center. I’m not sure if that’s because I did it wrong, or because I need to do something else in addition to what I’ve already done.
Here’s what I’ve got so far:
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/fake_statusbar_w_bookmarksbar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Creates a statusbar at the bottom of the window by using bookmarks toolbar */
/* Since it's really the bookmarks toolbar you should move bookmarks away from bookmarks toolbar - for example to menubar. You can do that with Customize Firefox mode */
/* If you want to show the page-loading status in the statusbar then put a single flexible space as the leftmost item in the bookmarks toolbar */
/* By default this flex-space will take 50% window width to show the loading status bar */
/* Toolbar buttons/items will be aligned to the right edge of the loading bar. If you wish to align them to the right edge, then add another flex-space after the first one */
:root:not([inFullscreen]) > body{
--uc-browser-base-padding: calc(2 * var(--toolbarbutton-inner-padding) + 6px);
--uc-statusbar-text-vertical-position: 5px;
}
:root[uidensity="compact"]:not([inFullscreen]) > body{
--uc-statusbar-text-vertical-position: 3px;
}
:root:not([inFullscreen]) > body::after{
content: "";
display: flex;
margin-bottom: calc(1px + var(--uc-browser-base-padding)) !important;
}
#PersonalToolbar{
position: fixed;
display: flex;
bottom: 0;
width: 100vw;
border-top: 1px solid var(--chrome-content-separator-color);
}
#personal-toolbar-empty + toolbarspring,
#PersonalToolbar > :first-child + toolbarspring{
background-position: left var(--uc-statusbar-text-vertical-position);
background-repeat: no-repeat;
background-image: -moz-element(#statuspanel);
max-width: 50vw !important; /* Modify this to let the status bar grow larger than 50% of window width */
min-width: 60ch;
flex-grow: 10;
}
#personal-toolbar-empty{ visibility: hidden; }
#PersonalToolbar .toolbarbutton-1{
-moz-box-align: center !important; /* Fx <112 compatibility */
align-items: center !important;
}
#PersonalToolbar > toolbarspring{
flex-grow: 1;
max-width: none !important;
min-height: var(--uc-browser-base-padding) !important;
}
/* Using -moz-element() causes some problems after Firefox has been running several hours such as long tab switch times. For this reason the background image is removed on hover and focused states which appears to clear the state. */
#PersonalToolbar > toolbarspring:first-of-type:hover{ background-image: none }
#statuspanel{
padding-top: 0 !important;
text-shadow: none !important;
}
#statuspanel-label{
height:3em;
min-width: 1000px;
background-color: transparent !important;
border: none !important;
font-size: inherit;
color: inherit !important;
margin-inline: 0px !important;
padding-inline: 0 !important;
}
/* If you use a theme where urlbar is partially transparent you should edit this color to something that closely matches the perceived color of urlbar. Or perhaps use background-image - linear-gradient() can work well here. But keep the color or image opaque or otherwise you'll face an issue where urlbar text bleeds through */
#statuspanel-inner{ background-color: var(--toolbar-accent-color) }
/*#statuspanel-inner{ background-color: var(--toolbar-non-lwt-bgcolor) }*/
#statuspanel{
color: lightpink; /* color used to indicate insecure http:// links */
z-index: -1;
visibility: visible !important;
opacity: 1 !important;
}
#statuspanel[inactive] #statuspanel-label{ visibility: hidden }
.browserStack > #statuspanel[inactive]::before,
#statuspanel[inactive] > #statuspanel-inner::before{
content: "Done";
display: flex;
margin-top: 2px;
color: var(--toolbar-field-color, black) !important;
}
#statuspanel[type="status"] { color: skyblue }
#statuspanel-label[value^="https"]{ color: var(--toolbar-field-color, black) !important; }
/* These should make sure that there is some opaque color covering the real statuspanel - necessary when RFP letterboxing is enabled */
.browserContainer,
.browserSidebarContainer{
background-color: inherit;
}
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/compact_proton.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Small changes to make proton roughly as compact as the old compact mode */
:root{
--toolbarbutton-inner-padding: 6px !important;
--tab-block-margin: 2px !important;
--tabs-shadow-size: 0px !important;
--arrowpanel-menuitem-padding-block: 5px !important;
--panel-font-size: inherit !important;
--arrowpanel-padding: 0.8em !important;
--inline-tab-padding: 8px !important; /* 8px is default value since it looks good - lower values compactify tabs horizontally */
}
.subviewbutton.bookmark-item{ padding-block: 4px !important; }
.subview-subheader{ display: block }
menupopup > menuitem,
menupopup > menu{ padding-block: 0.3em !important; }
/* This is kinda weird, but it makes the horizontal line between tabs and nav-bar render "inside" nav-bar thus tabs are more visibily separated even if there is less space there */
#nav-bar{
box-shadow: inset 0 var(--tabs-shadow-size) 0 var(--lwt-tabs-border-color) !important;
}
.tab-close-button{
margin-inline-start: 0px !important;
width: 20px !important;
height: 20px !important;
padding: 5px !important;
}
#tabbrowser-tabs{ --uc-tabs-scrollbutton-border: 2px }
#scrollbutton-up,
#scrollbutton-down{ border-block-width: var(--uc-tabs-scrollbutton-border,0px) !important; }
/* OPTIONAL - show audio label in compact mode and make the audio icon behavior match non-compact mode */
/*
.tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]){ display: flex !important; margin-bottom: 1px }
#TabsToolbar:not(:hover) .tab-icon-image{ opacity: 1 !important; }
#TabsToolbar:not(:hover) .tab-icon-overlay:not([pinned]){ opacity: 0 !important; }
*/
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/non_floating_sharp_tabs.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* This style makes tabs and related items non-rounded and connects tabs to toolbars like in previous Firefox versions.
* You should set layout.css.color-mix.enabled to true in about:config to make colors apply properly.
* It's not strictly a requirement, but this style expects compact_proton.css to be loaded before it. */
:root[id]{
--tab-block-margin: 0px !important;
--tabs-shadow-size: 1px !important;
/* Remove next line if you want selected tab to have color other than toolbar background - then it follows your theme color */
--lwt-selected-tab-background-color: var(--toolbar-bgcolor) !important;
}
/* Uncomment next line to force specific color for tab top line */
/* #tabbrowser-tabs{ --lwt-tab-line-color: blue !important; } */
/* These next two rules set a color for border around tabs and between tabs & navigation toolbars. Set to transparent to remove the border.*/
#nav-bar{
/* This overrides value in compact_proton.css */
box-shadow: 0 -1px 0 0 color-mix(in srgb, currentcolor 30%, transparent) !important;
}
.tab-background[selected]{
border-inline: 1px solid color-mix(in srgb, currentcolor 30%, transparent) !important;
border-bottom-color: transparent !important;
}
#TabsToolbar{
--toolbarbutton-inner-padding: 7px !important;
}
/* Few exceptions for default light theme */
#navigator-toolbox:not([movingtab]):-moz-lwtheme > #titlebar > #TabsToolbar{
--toolbar-bgcolor: transparent;
}
.tab-background[selected]:not(:-moz-lwtheme){ background: var(--toolbar-bgcolor) !important; }
#TabsToolbar-customization-target > .toolbarbutton-1 > .toolbarbutton-badge-stack,
#TabsToolbar-customization-target > .toolbarbutton-1 > .toolbarbutton-icon{ border-radius: 2px !important; }
/* tabs newtab button needs some special styling... */
#tabs-newtab-button{
padding-inline: 0 !important;
-moz-box-align: stretch !important; /* Fx < 112 compatibility */
align-items: stretch !important;
}
/* We draw the icon as background-image to get correct scaling regardless of toolbar height */
#tabs-newtab-button > .toolbarbutton-icon{
border-radius: 0 !important;
width: var(--tab-min-height) !important;
height: initial !important;
list-style-image: none;
background-image: url(chrome://global/skin/icons/plus.svg);
background-position: center;
background-repeat: no-repeat;
}
#scrollbutton-up,
#scrollbutton-down{
border-radius: 0 !important;
border-width: 0 !important;
padding-inline: 3px !important;
margin-bottom: var(--uc-compat-scrollbutton-margin,0px) !important; /* set in hide_tabs_scrollbuttons.css */
}
/* This is for hide_tabs_scrollbuttons.css compatibility since we modify scrollbutton width */
#tabbrowser-tabs[overflow]{
--uc-scrollbox-base-margin: -22px !important;
}
/* Selected tab needs to be relative so it gets drawn over nav-bar top "border" */
.tabbrowser-tab[selected]{
position: relative;
z-index: 1;
}
/* tab shaping */
.tabbrowser-tab{ padding-inline: 0 !important; }
:root[uidensity="compact"] #tabbrowser-tabs[positionpinnedtabs] .tabbrowser-tab[pinned]{
min-height: calc(var(--tab-min-height) + 2px) !important;
}
.tab-content[pinned]{ padding-inline: 11px !important; }
.tab-background{
border-radius: 0 !important;
box-shadow: none !important;
border-top: 0 !important;
outline: none !important;
}
.tab-background:not([selected])[multiselected]{
background: color-mix(in srgb, currentColor 11%, transparent) !important;
margin-inline-start: -1px;
}
/* Line to mark selected tab */
.tab-background[selected]::before,
.tabbrowser-tab:hover > stack > .tab-background::before{
display: flex;
height: 2px;
content: "";
}
.tab-stack:hover > .tab-background::before{
background-color: inherit;
}
.tab-stack > .tab-background[selected]::before{
background-color: highlight;
background-image: linear-gradient(var(--lwt-tab-line-color),var(--lwt-tab-line-color));
}
/* Photon-like tab on hover animation for the top line */
u/keyframes tab-onhover-line-anim{ from{ margin-inline: 20px } to { margin-inline: 0 } }
.tab-stack:hover > .tab-background::before{ animation: tab-onhover-line-anim 160ms }
/* Disable animation for selected and pinned tabs */
.tabbrowser-tab:is([pinned],[selected]) > .tab-stack > .tab-background::before{ animation: none }
/* moves context-line to the bottom */
.tab-context-line{
-moz-box-ordinal-group: 2; /* Fx < 112 compatibility */
order: 2;
margin-inline: 10px !important;
}
/* 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;
}
u/media (-moz-gtk-csd-reversed-placement),
(-moz-platform: macos){
.titlebar-buttonbox-container{ left:0; right: unset !important; }
}
u/supports -moz-bool-pref("userchrome.force-window-controls-on-left.enabled"){
.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{
-moz-box-ordinal-group: 2; /* Fx <112 compatibility */
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{
-moz-box-ordinal-group: 2; /* Fx <112 compatibility */
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; }
u/media (-moz-gtk-csd-close-button){
.titlebar-button{
-moz-box-orient: vertical; /* Fx <112 compatibility */
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 }
#navigator-toolbox:not(:-moz-lwtheme){ background-color: -moz-dialog }
/* Uncomment the following if you want bookmarks toolbar to be below tabs */
/*
#PersonalToolbar{
-moz-box-ordinal-group: 2;
order: 2;
}
*/
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Menubar on top patch - use with tabs_on_bottom.css */
/* Only really useful if menubar is ALWAYS visible */
:root:not([sizemode="fullscreen"]){ --uc-window-control-width: 0px !important }
:root{
/* height if native titlebar is enabled, assumes empty menubar */
--uc-menubar-height: 20px;
}
:root[tabsintitlebar]{
/* height when native titlebar is disabled, more roomy so can fit buttons etc. */
--uc-menubar-height: 29px;
}
:root:is([sizemode="fullscreen"],[chromehidden~="menubar"]){
--uc-menubar-height: 0px;
}
/* Since menubar is statically at top, remove fake drag-space that might be set by window_control_placeholder_support.css */
:root:not([sizemode="fullscreen"]) #nav-bar{ border-inline-width: 0 }
#navigator-toolbox{
-moz-window-dragging: drag;
padding-top: var(--uc-menubar-height) !important;
}
/* Remove window dragging from notification boxes */
#tab-notification-deck,
.global-notificationbox{
-moz-window-dragging: no-drag;
}
:root:not([chromehidden~="menubar"]) #toolbar-menubar{
position: fixed;
display: flex;
top: 0px;
height: var(--uc-menubar-height);
width: 100%;
overflow: hidden;
}
#toolbar-menubar > .titlebar-buttonbox-container{ height: 100%; order: 100; }
#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
order: 99;
flex-grow: 1;
min-width: var(--uc-window-drag-space-post,20px);
}
#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }
:root:not([sizemode="fullscreen"]) #toolbar-menubar.browser-toolbar > .titlebar-buttonbox-container{
visibility: visible;
}
:root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #TabsToolbar#TabsToolbar#TabsToolbar > .titlebar-buttonbox-container {
display: none !important;
}
toolbarspring {
min-width: 10px !important;
max-width: 20px !important;
}
#PersonalToolbar {height: 4px !important;}
#BookmarksToolbar {height: 4px !important;}
I haven’t made many modifications to any of the bits of code I added, but feel free to let me know if you spot any, like, conflicts or redundancies or things like that that you think it’d be a good idea for me to clean up.
You must log in or register to comment.
I would think you can just replace line 36 with this:
#PersonalToolbar > toolbarspring:nth-child(5),- it would then make the status show up in a flexible space that is the “third” item in the toolbar - it’s really the fifth child since there’s two invisible nodes preceding all others in the toolbar.Hey, speak of the devil. Also thanks, because that seems to have worked.
Any idea what to do about the off-centerness of the text? Right now it looks like this, justified so far to the bottom that it’s actually touching the taskbar. Might actually be a few pixels overlap. I think I did that when I made it narrower.
I think for you purposes it might be enough to decrease the value of the two
--uc-statusbar-text-vertical-positionvariables near the top of the file. They are3pxand5pxfor compact and normal densities, but you could make them 0px or even negative. That should move the text upwards I believe.Well, I’d be lying if I said I was starting to get the hang of this, but whatever we just did worked. -2px for both puts it in either exactly the right place or somewhere close enough that I’m not able to tell the difference. Thanks again.
The thing I was worried about with limiting the size of the flexible spaces does seem to be a problem, though, as seen here (ignore the duplicated status text. I was using the Link Status Redux addon before and I haven’t gotten rid of it yet). How would I go about working around that? Can I create an exception for just that one flexible space? Is there some way of re-enabling non-flexible spaces so that I don’t have to limit the flexible spaces?
Nice. But yes, you can exclude that specific one from your styles limiting toolbarspring width. But, you shouldn’t have to - because as far as I can tell, your style (the one you posted) already uses wide width for that flexible space (after you had done the changes discussed previously). You do indeed set min and max-width for all toolbarsprings at the end of your userchrome file, but those should be overridden by the properties set in the fake-statusbar section because they have higher specificity. So, I think the only other thing that could cause the width to be limited is if there are other elements to the right of the space in question - that would mean that there simply isn’t space for it to grow, but there just isn’t space to do so.
Oh but, if that image is actually from Pale Moon then it’s no wonder it doesn’t work. PM is ancient and you or anyone else shouldn’t use it.
I’m sorry, I should’ve included more information. I had to add additional flexible spaces between it an the icons on the far right to get it in proportion with this other flexible space on that end, and those are what it’s being cutting off by, but for some reason it’s still the same size as all the others instead of being longer. I probably wouldn’t even have this issue if I could just stick a fixed space on the right instead of a flexible space.
And no, only the first image showing an example of what I wanted was from Pale Moon. The rest are all Firefox. The reason I’m getting into the CSS is that I’m thinking of switching back to Firefox full time.
Alright, in that case just slap
!importanttag here so that flex grow proportionality for that one flexible space is 10x that of other flexible spaces (which have default 1).Actually I should just make that one have !important tag there by default.
Well crap. I just accidentally screwed up the dimensions of that status bar I went to all that trouble for while trying to find the variable that would change the dimensions of my tab headers, and then immediately forgot what variable I’d just changed. Could I get some help changing it back?
Alright, that seems to have worked. Thank you for all your help.
FWIW, and somewhat OT: I can only read your posting on this fedia sub, if I go to your username and log in on lemmy.world, then go to the Lemmy posting.
Fedia fives me a
404 Not Founderror if I try and open the topic directly. If this goes through, I have posted it via lemmy.My own topic, which I’ve posted a few days ago, might be inaccessible on this fedia sub as well.
For what it’s worth, you comment shows up fine in lemmy.world, but indeed the post you seem to have created does not, I have no clue why though.
But I don’t think issue you describe in that post can be fixed - really, it seems to do exactly what you wanted. See:
- text becomes wide enough -> textoverflow is set
- close button disappear, making more space available for text
- text doesn’t overflow anymore because there is more space -> textoverflow is removed
- close button is shown again -> less space available
- text can’t fit again -> textoverflow is set
- repeat
Thanks very much, that’s what I thought.
