OnelineProton VS firefox-csshacks

So I am using the oneline proton CSS

No problem, I've found the original github repo, here it is - https://github.com/lr-tech/OnelineProton

Features: - Minimal interface. - very Simple. - Features OneLine Design (Credits- Ir-tech/OnelineProton. - Keyboard Centered (More info below).

/*=============================================================================* * ONELINE PROTON * * * * description : An oneline userChrome.css theme for Firefox, which aims to * * keep the Proton experience. * * compatibility : Firefox 89+ * * repository : https://github.com/lr-tech/OnelineProton/ * * * * THANKS FOR USING MY USERCHROME! <3 * *============================================================================*/ /* S E T T I N G S */ :root { --navbarWidth : 400px; /* Set width of navbar. Use px or vw. */ --animationSpeed : 0.15s; } /* H I D I N G E L E M E N T S */ /* Comment or uncomment depending of what elements you want to hide */ /* Back button */ #back-button {display: none !important} /* Hide back button only when disabled */ /* #back-button[disabled="true"] {display: none !important} */ /* Forward button */ #forward-button {display: none !important} /* Hide forward button only when disabled */ /* #forward-button[disabled="true"] {display: none !important} */ /* "Shield" icon */ /* #tracking-protection-icon-container {display: none !important} */ /* Site information button */ /* #identity-box:not(:hover) {display: none !important} */ /* This is the "Search with" indicator on the urlbar */ #urlbar-search-mode-indicator {display: none !important} /* Zoom button */ #urlbar-zoom-button {display: none !important} /* Page action (right three dash button) */ #pageActionButton {display: none !important} /* These are the buttons on the right of the urlbar */ #page-action-buttons {display: none !important} /* #urlbar-label-box {display: none !important} */ /* This one is the hamburger menu! */ /* CAUTION: if you hide this some popups may be bugged */ /* #PanelUI-button {display: none !important} */ /* Tab close button */ /* .tab-close-button {display: none !important} */ /*============================================================================*/ /* Oneline tweak */ #TabsToolbar { margin-left : var(--navbarWidth) !important; } #nav-bar { margin-right : calc(100vw - var(--navbarWidth)) !important; background : transparent !important; box-shadow : none !important; } #urlbar-container { min-width : 0px !important; } :root[uidensity="compact"] #nav-bar { margin-top : -37px !important; height : 37px !important; } :root:not([uidensity="compact"]):not([uidensity="touch"]) #nav-bar { margin-top : -44px !important; height : 44px !important; } :root[uidensity="touch"] #nav-bar { margin-top : -49px !important; height : 49px !important; } #urlbar:not([breakout][breakout-extend]) > #urlbar-background { border : none !important; animation : 0.15s !important; } /* Hide urlbar elements when not active */ .urlbar-icon, #userContext-indicator, #userContext-label { fill : transparent !important; background-color : transparent !important; color : transparent !important; animation : var(--animationSpeed) !important; } #urlbar:hover .urlbar-icon, #urlbar:active .urlbar-icon, #urlbar[focused] .urlbar-icon { fill : var(--toolbar-color) !important; } /* animations */ toolbarbutton, .toolbarbutton-icon, .subviewbutton, .urlbar-input-box, #identity-box, #tracking-protection-icon-container, [anonid=urlbar-go-button], .urlbar-icon-wrapper, #tracking-protection-icon, #identity-box image, stack, vbox, tab:not(:active) .tab-background, tab:not([beforeselected-visible])::after, tab[visuallyselected] .tab-background::before, tab[visuallyselected] .tab-background::before, .tab-close-button { animation : var(--animationSpeed) !important; } /* A D D E D B Y T Y P K R F T */ /* A D D I T I O N A L S E T T I N G S */ /* Hide (x) (-) (+) on macOS */ hbox.titlebar-buttonbox-container:nth-child(4) {visibility: collapse !important;} /* Hide Spacer between URL and Tabs */ hbox.titlebar-spacer:nth-child(1) {visibility: collapse !important;} /* Hide Spacer after Tabs */ hbox.titlebar-spacer:nth-child(3) {visibility: collapse !important;} /* Hide Overflow Arrows on either side of the tabs section when not active */ #scrollbutton-up[disabled="true"] {opacity: 0 !important;} #scrollbutton-down[disabled="true"] {opacity: 0 !important;} /* Hide 'This time, search with:' Section */ .search-one-offs { visibility: collapse; margin: 0 !important; padding-top: 0px; border-top-style: solid; border-top-width: 1px; } #urlbar .search-one-offs:not([hidden]) {display: contents !important;} /* Keep Boarders Hidden on the Sides of the URL Bar */ #nav-bar{ border-left-width: 0px !important; border-right-width: 0px !important; } /* A U T O H I D E */ /* Uncomment relavent Sections */ /* Configuration 1 - START */ /* Hide Unless focused with CMD/Ctrl - L or In a New Tab */ /* Taken from https://superuser.com/a/1497982/1189696 */ /* @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); #navigator-toolbox { height: 0px !important; min-height: 0px !important; overflow: hidden !important; } #navigator-toolbox:focus, #navigator-toolbox:focus-within, #navigator-toolbox:active { height: auto !important; } */ /* Configuration 1 - END */ /* Tree Style Tabs Autohide START */ /* Hide splitter, when using Tree Style Tab. */ /* Take From https://www.reddit.com/r/FirefoxCSS/comments/emjqx2/autohide_tree_style_tabs/fdpck8l?utm_source=share&utm_medium=web2x&context=3 */ /* #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter { display: none !important; } */ /* Hide sidebar header, when using Tree Style Tab. */ /* #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header { visibility: collapse; } */ /* Shrink sidebar until hovered, when using Tree Style Tab. */ /* #sidebar-box:not([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]) { min-width: var(--wide-tab-width) !important; max-width: none !important; } #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] { overflow: hidden !important; position: relative !important; transition: all 200ms !important; min-width: var(--thin-tab-width) !important; max-width: var(--thin-tab-width) !important; z-index: 1; } #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover, #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar { transition: all 200ms !important; min-width: var(--wide-tab-width) !important; max-width: var(--wide-tab-width) !important; margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important; z-index: 1; } */ /* :root { --thin-tab-width: 10px; } :root { --wide-tab-width: 250px; } */ /* Tree Style Tabs Autohide END */

Check it out here

```CSS /============================================================================= * ONELINE PROTON * * * * description : An oneline userChrome.css theme for Firefox, which aims to * * keep the Proton experience. * * compatibility : Firefox 89+ * * repository : https://github.com/lr-tech/OnelineProton/ * * * * THANKS FOR USING MY USERCHROME! <3 * ============================================================================/

Not aware there was a "Mac version" of MrOtherGuy's 'tabs_on_bottom.css' userstyle... or are you using another userstyle from another author?

https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/autohide_toolbox.css (edited)

/* 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. */

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 can't figure out how to solve the issue even though I found a possible culprit, it might be related to the tabs full width code.

/* address bar on pop-ups - based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/show_toolbars_in_popup_windows.css */ :root[chromehidden~="toolbar"] :is( /* .browser-toolbar, */ #nav-bar, #urlbar-container, .chromeclass-toolbar-additional ) { display: flex !important; /* visibility: visible !important; */ }

You might want to check out styles that have been updated recently, like those.