Putting navbar and menu bar on the same level, proton UI edition

This page summarizes the projects mentioned and recommended in the original post on /r/FirefoxCSS

InfluxDB - Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com
featured
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com
featured
  • UserChrome-Tweaks

    Discontinued A community maintained repository of userChrome.css tweaks for Firefox

  • /* TABS: on bottom - Firefox 65 and later */ #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) { -moz-box-ordinal-group: 10 !important; } #TabsToolbar { -moz-box-ordinal-group: 1000 !important; display: block !important; position: absolute !important; bottom: 0 !important; /* width: 100vw !important; */ } :root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar{ bottom: var(--tab-min-height) !important; padding-top: calc(var(--tab-min-height) - 20px) !important; /* may need adjustment */ } #tabbrowser-tabs { width: 100vw !important; } :root:not([chromehidden*="toolbar"]) #navigator-toolbox { padding-bottom: calc(var(--tab-min-height) + 1px); /* may need adjustment */ } /* TABS: height */ :root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 25px !important; /* adjust */ } :root #tabbrowser-tabs { --tab-min-width: 80px !important; /* adjust */ } #tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox, .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] { min-height: var(--tab-min-height) !important; max-height: var(--tab-min-height) !important; } #TabsToolbar { height: var(--tab-min-height) !important; margin-bottom: 1px !important; box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /* omit */ background-color: var(--toolbar-bgcolor) !important; color: var(--toolbar-color) !important; } /* indicators */ .private-browsing-indicator {display: none !important;} .accessibility-indicator {display: none !important;} /* drag space */ .titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"] { width: 20px !important; } /* Override vertical shifts when moving a tab */ #navigator-toolbox[movingtab] > #titlebar > #TabsToolbar { padding-bottom: unset !important; } #navigator-toolbox[movingtab] #tabbrowser-tabs { padding-bottom: unset !important; margin-bottom: unset !important; } #navigator-toolbox[movingtab] > #nav-bar { margin-top: unset !important; } /* windows controls - hide */ #TabsToolbar #window-controls {display: none !important;} /* caption box - hide */ :root[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container {display: none !important;} /* move caption buttons to right of Tab bar */ #main-window[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container { position: fixed !important; right: 0 !important; top: calc(6px + var(--tab-min-height)) !important; display: block !important; visibility: visible !important; } #toolbar-menubar[autohide="true"] ~ #TabsToolbar {padding-right: 100px !important;} /* URL bar on same level as Menu Bar */ :root{ --uc-navbar-height: 32px; } #TabsToolbar{-moz-box-ordinal-group: 2;} #toolbar-menubar{ height: var(--uc-navbar-height); background-color: var(--toolbar-bgcolor); } #nav-bar{ padding-right: 144px; margin-top: calc(var(--uc-navbar-height) * -1); margin-left: 300px; background-color: transparent !important; } /* Black background when loading new page */ browser { background-color: #000 !important; } /* tabs on bottom #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10} #TabsToolbar {-moz-box-ordinal-group:1000!important} */ /* Change the tab-bar height tab {height: 20px !important; } .tabbrowser-strip { height: 20px !important; } */ #PanelUI-menu-button { display: none; } #nav-bar-overflow-button { display: none !important;} #back-button, #forward-button { display: none; } /* * Make the toolbar extra-compact (similar to v56 with CTR) * Applies to Compact density * Contributor(s): Alex Vallat * https://github.com/Timvde/UserChrome-Tweaks/blob/master/toolbars/compact-toolbars.css */ :root[uidensity=compact] #urlbar, :root[uidensity=compact] .searchbar-textbox { font-size: unset !important; min-height: 24px !important; } :root[uidensity=compact] #identity-box { max-height: 22px; } :root[uidensity=compact] #nav-bar .toolbarbutton-1 { padding: 0px !important; } /* Compatibility with auto-hide.css */ :root[uidensity=compact] #navigator-toolbox { --nav-bar-height: 31px !important; }

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • NFT Preview Card Component Challenge from Frontend Mentor

    1 project | dev.to | 1 May 2024
  • Programming VTuber Logos

    1 project | news.ycombinator.com | 24 Apr 2024
  • Mastering Component Styling: Elevate Your CSS with Layering and Dynamic Class Management, No ng:deep needed!

    1 project | dev.to | 1 May 2024
  • CSS Flags – Flags of the world in pure CSS

    1 project | news.ycombinator.com | 1 May 2024
  • Blue Star: Free Tailwind Landing Page Template

    1 project | news.ycombinator.com | 30 Apr 2024