one-line-firefox VS OnelineProton

It all started off when I decided I wanted to try the one-line-firefox: https://github.com/khuedoan/one-line-firefox

https://github.com/khuedoan/one-line-firefox with this one you can open infinite tabs but you might need to change margins to stop visible ui elements from overlapping

The wm is xfce and the theme is b5. I got the walpapers from here(and I set the bg to a vertical gradient). This is the firefox theme, and this is the css I used.

/* One Line Code adapted from https://github.com/khuedoan/one-line-firefox/blob/master/userChrome.css*/ /* Title bar */ .titlebar-buttonbox { display: none !important; } .titlebar-spacer { display: none !important; } /* Tab bar */ #navigator-toolbox { border: 0px !important; } #TabsToolbar { margin-left: 61vw !important; width: 100% !important; } /* Nav bar*/ #urlbar-container { margin-right: 10vw !important; } /* Nav bar*/ #nav-bar { background: transparent !important; margin-top: -36px !important; margin-right: 50vw !important; /*! width 100% !important */ width: 100vw !important; } #urlbar { width: 48vw; } /* URL bar */ #back-button { display: none !important; } #forward-button { display: none !important; } #tracking-protection-icon-container { display: none !important; } #urlbar-container { min-width: 100px !important; } #urlbar { background: transparent !important; border: none !important; box-shadow: none !important; } #page-action-buttons { display: none !important; } #PanelUI-button { display: none !important; } /* User Added */ :root[uidensity="compact"] { --bookmark-block-padding: 3px !important; } :root { --toolbarbutton-border-radius: 0px !important; --toolbarbutton-inner-padding: 0px !important; } #urlbar { --urlbar-height: 36px !important; --urlbar-toolbar-height: 36px !important; } #tabbrowser-arrowscrollbox::part(scrollbutton-up), #tabbrowser-arrowscrollbox::part(scrollbutton-down) { border-radius: 0px; } #scrollbutton-up[disabled="true"] image { opacity: 0%; } #scrollbutton-down[disabled="true"] image { opacity: 0%; } #urlbar[open="true"] { width: 100vw !important; transition: width 50ms !important; } :root { --tab-border-radius: 0px !important; } #urlbar[breakout] { left: -3px !important; } /* AUTOHIDE */ /* Adapted from https://github.com/marmmaz/FirefoxCSS/blob/master/userChrome.css */ /*Auto Hide Top Bar - to disable auto-hide feature delete rows 1 - 86*/ :root { --uc-autohide-toolbox-delay: 200ms; /* Wait 0.1s before hiding toolbars */ --uc-toolbox-rotation: 65deg; /* This may need to be lower on mac - like 75 or so */ } :root[sizemode="maximized"] { --uc-toolbox-rotation: 63deg; } :root[sizemode="fullscreen"] { margin-top: 0px !important; } #navigator-toolbox { position: fixed !important; display: -webkit-box; transition: height 50ms; transform-origin: top; transform: rotateX(var(--uc-toolbox-rotation)); opacity: 0; line-height: 0; z-index: 1; pointer-events: none; } /* #mainPopupSet:hover ~ box > toolbox, /* Uncomment the above line to make toolbar visible if some popup is hovered */ #navigator-toolbox:hover, #navigator-toolbox:focus-within { transition-delay: 50ms !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; }

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