Last active
March 8, 2024 00:09
-
-
Save lucaspar/cfd063ae03088ac4c6374444a437135e to your computer and use it in GitHub Desktop.
Stylesheets for collapsible vertical tabs for Firefox. Tabs expand horizontally when hovered, similar to Edge's.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| How to use this CSS: | |
| 0. Install the Sidebery extension: https://addons.mozilla.org/en-US/firefox/addon/sidebery/. | |
| 1. In Sidebery settings: | |
| a. Set the title preface must as "[S] " (without quotes). | |
| This is used by CSS rules below to identify when Sidebery is active. | |
| b. Set 'Tabs tree structure' to false -- this stylesheet doesn't adapt to | |
| multiple tab levels, but feel free to tweak it! | |
| c. Copy and paste the "SIDEBERY STYLES" section below in | |
| Sidebery's Styles Editor -> Sidebar. | |
| d. Optionally sync Sidebery settings to Firefox account to get other customizations. | |
| 2. Go to about:support -> copy 'user folder' location, setting it as the variable $FF_USER_DIR. | |
| 3. Move CSS files to FF user location: | |
| mv userChrome.css $FF_USER_DIR/userChrome.css | |
| mv userContent.css $FF_USER_DIR/userContent.css | |
| 4. Go to about:config -> `toolkit.legacyUserProfileCustomizations.stylesheets` to TRUE. | |
| 5. Restart Firefox ( about:restartrequired to reopen your current tabs ). | |
| =================================================================== | |
| TWEAKING AND DEBUGGING: | |
| A. How to inspect browser interface: | |
| Source: https://superuser.com/questions/1608096/how-to-inspect-firefoxs-ui | |
| 1. Enable the Browser Toolbox | |
| Press F12 to open the Page Inspector. | |
| Alternate: Right click the page then "Inspect Element (Q)". | |
| Press F1 to open the Page Inspector Settings. | |
| Alternate: In the top right of the Page Inspector next to the close button; press the "⋯" button then "Settings". | |
| Ensure the following settings are checked: | |
| "Enable Browser chrome and add-on debugging toolbox" | |
| "Enable remote debugging" | |
| 2. Open the Browser Toolbox | |
| Press alt, "Tools", "Web Developer" then "Browser Toolbox". | |
| Alternate: Press ctrl+alt+shift+i | |
| B. How to inspect extensions interface: | |
| Source: https://superuser.com/questions/1608096/how-to-inspect-firefoxs-ui | |
| You can use the Browser Toolbox to inspect extensions. Additionally you can inspect extensions through about:debugging. | |
| 1. Navigate to about:debugging. | |
| 2. Go to the "This Firefox" page. | |
| 3. Find the extension you want to inspect. | |
| 4. Press "Inspect" and a console window should open. | |
| 5. Change *targeted iframe* if needed by clicking the blue "layout" icon | |
| in the upper right corner, close to the ellipsis menu icon. | |
| */ | |
| /* | |
| ==================================================================== | |
| SECTION: SIDEBERY STYLES | |
| => PLACE THIS SECTION MANUALLY IN SIDEBERY'S "CUSTOM STYLES" | |
| #root.root {--ctx-menu-padding: 0.3em;} | |
| #root.root {--ctx-menu-opt-padding: 0.3em;} | |
| #root.root {--ctx-menu-icon-opt-height: 30px;} | |
| #root.root {--d-swift: 0.1s;} | |
| #root.root {--nav-btn-fg: #ccc;} | |
| #root.root {--nav-delimiter-size: 1em;} | |
| #root.root {--nav-hidden-btn-border-radius: 0.5em;} | |
| #root.root {--nav-btn-width: 36px;} | |
| #root.root {--tabs-height: 36px;} | |
| #root.root {--tabs-font: 0.9375rem system-ui;} | |
| #root.root {--tabs-count-font: 0.5625rem system-ui;} | |
| #root.root {--tabs-pinned-width: 32px;} | |
| #root.root {--tabs-inner-gap: 10px;} | |
| #root.root {--tabs-close-btn-margin: 3px;} | |
| #root.root {--tabs-lvl-opacity: 0.01;} | |
| #root.root {--tabs-activated-bg: rgba(255,255,255,0.141);} | |
| #root.root {--tabs-normal-fg: #ccc;} | |
| #root.root {--tabs-border-radius: 0.5em;} | |
| END OF SIDEBERY STYLES SECTION | |
| ==================================================================== | |
| */ | |
| /* | |
| ============================= | |
| SECTION: BLURRED TRANSPARENCY | |
| (and monospace font for urlbar) | |
| ============================= | |
| */ | |
| @import url('blurredfox/parts/customization-window.css'); | |
| #urlbar-input { | |
| font-family: monospace !important; | |
| } | |
| #urlbar[breakout][breakout-extend][open] { | |
| /* border: 1px dotted orangered !important; */ | |
| background-color: #0d1320d3; | |
| background-image: url(./image/noise-512x512.png); | |
| /* | |
| attempt of blurring the background of the expanded | |
| tab area - unfortunately it does not blur the page | |
| contents in the back, even though the backdrop filter | |
| now works in Firefox. | |
| */ | |
| -webkit-backdrop-filter: blur(6px) !important; | |
| -moz-backdrop-filter: blur(6px) !important; | |
| -ms-backdrop-filter: blur(6px) !important; | |
| -o-backdrop-filter: blur(6px) !important; | |
| backdrop-filter: blur(6px) !important; | |
| font-family: monospace !important; | |
| border-radius: 0 0 2em 2em; | |
| transition: all 0.2s ease-in-out; | |
| height: 0; | |
| margin: 0 !important; | |
| padding: 0 !important | |
| } | |
| .menupopup { | |
| /* border: 2px dashed rgb(194, 133, 41) !important; */ | |
| background-image: url(image/noise-512x512.png) !important; | |
| -webkit-backdrop-filter: blur(32px) !important; | |
| backdrop-filter: saturate(180%) blur(35px); | |
| } | |
| .urlbarView-body-inner { | |
| /* border: 1px solid royalblue !important; */ | |
| /* background-color: transparent; */ | |
| color: white; | |
| padding: var(--s4); | |
| animation-duration: 1s; | |
| animation-delay: 2s; | |
| animation-fill-mode: both; | |
| transition: 0.2s; | |
| box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.192); | |
| box-shadow: 2px 2px 8px #00000021; | |
| } | |
| #urlbar-background { | |
| border: 0 !important; | |
| /* border: 1px solid cyan !important; */ | |
| /* enable eased transitions */ | |
| display: none !important; | |
| transition: all 0.2s ease-in-out; | |
| } | |
| /* | |
| =============================== | |
| SECTION: SIDEBERY MINIMAL STYLE | |
| =============================== | |
| Based on: https://github.com/ongots/firefox-sidebery-minimal-style | |
| */ | |
| @media (prefers-color-scheme: dark), | |
| (prefers-color-scheme: no-preference) { | |
| * { | |
| --bg: rgb(9, 9, 9); | |
| --menu: #151515; | |
| --hover: #10201b8e; | |
| --active: #7a00c096; | |
| --text: #ddd; | |
| --text-hover: #eee; | |
| --text-active: #fff; | |
| --url-color: #8F94D2; | |
| --tab-line-color: rgb(41, 248, 158); | |
| --lwt-toolbarbutton-icon-fill: rgb(176, 255, 217) !important; | |
| } | |
| .menu-right, | |
| #screenshots_mozilla_org-menuitem-_create-screenshot>hbox:nth-child(1)>image:nth-child(1) { | |
| filter: contrast(0%) | |
| } | |
| [checked="true"] .menu-iconic-left { | |
| filter: contrast(300%) | |
| } | |
| } | |
| @media (prefers-color-scheme: light) { | |
| * { | |
| --bg: #fafafa; | |
| --menu: #fafafa; | |
| --hover: #11533c7c; | |
| --active: #7a00c096; | |
| --text: #111; | |
| --text-hover: rgba(37, 181, 124, 0.408); | |
| --url-color: #4353B6; | |
| --tab-line-color: #FF1B00; | |
| --lwt-toolbarbutton-icon-fill: #222 !important; | |
| } | |
| spacer { | |
| filter: invert(100%) | |
| } | |
| } | |
| * { | |
| scrollbar-width: thin; | |
| scrollbar-color: #80808060 transparent; | |
| --toolbarbutton-border-radius: 0; | |
| --arrowpanel-dimmed: var(--hover) !important; | |
| --arrowpanel-dimmed-further: var(--active) !important; | |
| --lwt-accent-color: var(--bg) !important; | |
| --lwt-background-tab-separator-color: transparent; | |
| --tabs-border-color: transparent; | |
| --tab-min-width: 84px; | |
| --toolbar-bgcolor: var(--bg) !important; | |
| --toolbar-bgimage: none; | |
| --toolbar-color: var(--text) !important; | |
| --toolbarbutton-outer-padding: 0; | |
| --toolbarbutton-hover-background: var(--hover) !important; | |
| --toolbarbutton-active-background: var(--hover) !important; | |
| /* urlbar */ | |
| --autocomplete-popup-highlight-background: var(--hover) !important; | |
| --autocomplete-popup-highlight-color: var(--url-color) !important; | |
| --urlbar-popup-action-color: var(--url-color) !important; | |
| --urlbar-popup-url-color: var(--url-color) !important; | |
| /* searchbar */ | |
| --autocomplete-popup-background: var(--bg); | |
| --autocomplete-popup-color: var(--text); | |
| --lwt-sidebar-background-color: var(--bg) !important; | |
| --lwt-sidebar-text-color: var(--text) !important; | |
| } | |
| :root[uidensity="compact"] * { | |
| font-size: 10pt !important | |
| } | |
| :root[tabsintitlebar] { | |
| background-color: var(--bg) !important; | |
| color: var(--text) !important | |
| } | |
| /* ______ TABS ______ */ | |
| .titlebar-color { | |
| background-color: var(--bg) | |
| } | |
| hbox.titlebar-spacer:nth-child(1) { | |
| display: none !important | |
| } | |
| .tabbrowser-tab[pinned] { | |
| background-color: var(--bg) !important; | |
| z-index: 3 !important | |
| } | |
| .tab-line:not([selected]) { | |
| height: 0 !important | |
| } | |
| .tab-background[multiselected] { | |
| background: #223B82 !important | |
| } | |
| .tabbrowser-tab[multiselected] :hover .tab-background:not([selected]) { | |
| background-color: #2C4890 !important | |
| } | |
| @media (prefers-color-scheme: light) { | |
| .tab-background[multiselected] { | |
| background-color: #4B7CFC !important | |
| } | |
| .tabbrowser-tab[multiselected] :hover .tab-background:not([selected]) { | |
| background-color: #3E6AE5 !important | |
| } | |
| .tab-background[selected]:not([multiselected]) { | |
| background: var(--hover) !important | |
| } | |
| } | |
| .tab-background[multiselected]>.tab-background-inner { | |
| background-color: transparent !important | |
| } | |
| .tabbrowser-tab:hover .tab-background:not([selected]) { | |
| background-color: var(--hover) !important | |
| } | |
| .all-tabs-item { | |
| opacity: .8 | |
| } | |
| .all-tabs-item[selected] { | |
| opacity: 1; | |
| box-shadow: none !important; | |
| background-color: var(--active) !important | |
| } | |
| .panel-viewstack { | |
| max-height: 100% !important | |
| } | |
| .tabbrowser-tab::after { | |
| border-left: 0 !important | |
| } | |
| .tab-content { | |
| padding: 0 4px !important | |
| } | |
| /* Container indicator */ | |
| .tab-bottom-line { | |
| background: var(--identity-tab-color) !important; | |
| margin-bottom: 0 !important | |
| } | |
| @media (prefers-color-scheme: dark), | |
| (prefers-color-scheme: no-preference) { | |
| .tab-bottom-line { | |
| height: 1px !important | |
| } | |
| } | |
| /* Discard tabs */ | |
| .tabbrowser-tab:not([selected="false"])[pending] .tab-content { | |
| opacity: .7 !important | |
| } | |
| .tabbrowser-tab[pending]:hover .tab-content, | |
| .tab-label:-moz-window-inactive { | |
| opacity: .8 !important | |
| } | |
| .titlebar-spacer { | |
| width: 14px !important | |
| } | |
| /* Hide Tab bar if Sidebery is Active */ | |
| @media(-moz-windows-default-theme) { | |
| [sizemode="maximized"][titlepreface*="[S]"] #navigator-toolbox { | |
| margin: 8px 0 0 | |
| } | |
| [uidensity="compact"][sizemode="normal"]:root { | |
| --tab-min-height: 31px !important; | |
| --tabs-navbar-shadow-size: 0 !important | |
| } | |
| [uidensity="normal"][sizemode="normal"]:root { | |
| --tab-min-height: 32px !important | |
| } | |
| } | |
| [titlepreface*="[S]"] #titlebar, | |
| [titlepreface*="[S]"] #tabbrowser-tabs, | |
| [titlepreface*="[S]"] #tabContextMenu, | |
| [titlepreface*="[S]"] #sidebar-header, | |
| [hidden]#sidebar-box { | |
| display: none | |
| } | |
| /* Dynamic sidebar */ | |
| [titlepreface*="[S]"] #sidebar-box { | |
| max-width: 40px | |
| } | |
| #sidebar-box { | |
| /* CHANGE COLLAPSED SIDEBAR HERE */ | |
| /* border: 2px dashed orangered !important; */ | |
| overflow: hidden; | |
| position: fixed; | |
| display: inherit; | |
| opacity: 0.95; | |
| transition: 0.2s; | |
| transition-timing-function: ease-in-out; | |
| backdrop-filter: blur(5px); | |
| z-index: 3; | |
| /* width of collapsed sidebar */ | |
| min-width: calc(40px * 1) !important; | |
| max-width: 40px !important; | |
| width: calc(40px * 1) !important; | |
| /* default sidebar height */ | |
| min-height: 100%; | |
| } | |
| /* => Sidebar with reduced height | |
| Commenting this block out makes the sidebar | |
| use the entire viewport height. | |
| */ | |
| #sidebar-box { | |
| min-height: 50vh; | |
| max-height: calc(100% - 40px); | |
| border-radius: 0 0 2em 0; | |
| } | |
| /* End of sidebar with reduced height */ | |
| [inFullscreen] #sidebar-box { | |
| max-width: 5px; | |
| height: 100%; | |
| top: 1px | |
| } | |
| #sidebar-box:hover { | |
| /* border: 2px dashed rgb(183, 20, 131) !important; */ | |
| /* expanded width */ | |
| min-width: unset !important; | |
| max-width: calc(40px * 6) !important; | |
| width: calc(40px * 6) !important; | |
| } | |
| #sidebar { | |
| /* THIS IS THE SIDEBAR */ | |
| /* border: 2px dotted blue !important; */ | |
| max-width: 50vw !important; | |
| width: calc(40px * 6) !important; | |
| height: 100%; | |
| background-color: transparent; | |
| background-image: none !important; | |
| } | |
| .ScrollBox>.scroll-container>.scrollable { | |
| background-color: transparent !important; | |
| background-image: none !important; | |
| } | |
| #sidebar .container { | |
| background-color: var(--bg) !important; | |
| } | |
| [titlepreface*="[S]"] #appcontent { | |
| /* margin-left: 28px; */ | |
| margin-left: 34px; | |
| /* border: 1px solid green !important; */ | |
| } | |
| [inFullscreen] #appcontent { | |
| margin-left: -20px; | |
| /* border: 1px solid aqua !important; */ | |
| } | |
| @media(-moz-windows-default-theme) { | |
| [titlepreface*="[S]"] #appcontent { | |
| margin-left: 100px; | |
| /* border: 1px solid darkmagenta !important; */ | |
| } | |
| [inFullscreen] #appcontent { | |
| /* border: 1px solid magenta !important; */ | |
| margin-left: 0 | |
| } | |
| } | |
| /* Firefox sidebar */ | |
| #sidebar-header { | |
| width: 100% !important | |
| } | |
| #sidebar-header, | |
| #search-box { | |
| -moz-appearance: none !important; | |
| appearance: none !important; | |
| background-color: var(--bg) !important; | |
| color: var(--text) !important | |
| } | |
| treechildren::-moz-tree-separator { | |
| border: 0 !important | |
| } | |
| /* Show window buttons - + x */ | |
| /* @media(-moz-windows-default-theme){[sizemode="maximized"][titlepreface*="[S]"] #navigator-toolbox {margin: inherit}} | |
| [sizemode="maximized"][titlepreface*="[S]"] #titlebar, | |
| [sizemode="normal"][titlepreface*="[S]"] #titlebar {display: inherit !important; margin-bottom: -29px} | |
| [inFullscreen][titlepreface*="[S]"] #titlebar {display: inherit !important; margin-bottom: -24px} | |
| [sizemode="maximized"][titlepreface*="[S]"] #nav-bar, | |
| [sizemode="normal"][titlepreface*="[S]"] #nav-bar {margin-right: 138px} | |
| [inFullscreen][titlepreface*="[S]"] #nav-bar {margin-right: 108px} | |
| [inFullscreen][titlepreface*="[S]"] #TabsToolbar-customization-target {display:none} */ | |
| /* ______ NAVBAR ______ */ | |
| :root:not([uidensity="compact"]) .browser-toolbar #back-button { | |
| padding-block: 0 !important; | |
| padding-inline: 0 !important; | |
| border-radius: 0 !important | |
| } | |
| :root:not([uidensity="compact"]) .browser-toolbar #back-button>.toolbarbutton-icon { | |
| background-color: var(--bg) !important; | |
| border-radius: 0 !important; | |
| width: 32px !important; | |
| height: 32px !important; | |
| padding: 8px !important | |
| } | |
| :root:not([uidensity="compact"]) .browser-toolbar #back-button:hover>.toolbarbutton-icon { | |
| background-color: var(--hover) !important | |
| } | |
| :root:not([uidensity="compact"]) .browser-toolbar #back-button:active>.toolbarbutton-icon { | |
| background-color: var(--active) !important | |
| } | |
| :root:not([uidensity="compact"]) { | |
| --toolbarbutton-inner-padding: 8px !important | |
| } | |
| /* Bookmarks */ | |
| .openintabs-menuitem, | |
| .bookmarks-actions-menuseparator { | |
| display: none | |
| } | |
| .bookmark-item menuseparator { | |
| height: 8px | |
| } | |
| /* Urlbar, Searchbar */ | |
| #PlacesToolbarItems>toolbarbutton>label, | |
| #identity-box, | |
| #urlbar-input { | |
| margin-bottom: 1px !important; | |
| color: var(--text) !important | |
| } | |
| .searchbar-textbox { | |
| margin-bottom: 2px !important; | |
| color: var(--text) !important | |
| } | |
| #PlacesToolbarItems>toolbarbutton:hover>label { | |
| color: var(--text-hover) !important | |
| } | |
| #urlbar-input::-moz-selection { | |
| background-color: var(--text) !important; | |
| color: var(--bg) | |
| } | |
| @media (prefers-color-scheme: light) { | |
| #urlbar-input::-moz-selection { | |
| background-color: #444 !important | |
| } | |
| } | |
| #identity-popup { | |
| --popup-width: auto !important | |
| } | |
| #urlbar-container { | |
| --urlbar-container-height: 40px !important | |
| } | |
| :root[uidensity="compact"] #urlbar-container { | |
| --urlbar-container-height: 26px !important | |
| } | |
| #search-container { | |
| margin: -2px 0 !important | |
| } | |
| #urlbar { | |
| color: var(--lwt-toolbarbutton-icon-fill) !important; | |
| top: 1px !important | |
| } | |
| #urlbar-background, | |
| #navigator-toolbox #searchbar { | |
| background-color: var(--bg) !important | |
| } | |
| /* background of urlbar when it's closed */ | |
| #urlbar:not([open]) #urlbar-background, | |
| #searchbar { | |
| box-shadow: none !important; | |
| border: 0; | |
| border-radius: 0; | |
| opacity: 1; | |
| filter: blur(0); | |
| -webkit-filter: blur(0); | |
| } | |
| /* background of urlbar when it's open */ | |
| #urlbar[breakout][breakout-extend][open]>#urlbar-background { | |
| box-shadow: 0 0 0 1px var(--hover) !important; | |
| border: 0; | |
| border-radius: 0 0 2em 2em; | |
| opacity: 0.5; | |
| filter: blur(2px); | |
| -webkit-filter: blur(2px); | |
| } | |
| .urlbarView-row { | |
| color: var(--text) | |
| } | |
| .urlbarView-row[selected] .urlbarView-title { | |
| color: var(--text-hover) | |
| } | |
| #urlbar[breakout][breakout-extend] { | |
| left: 0 !important; | |
| width: 100% !important | |
| } | |
| #urlbar[breakout][breakout-extend]>#urlbar-input-container { | |
| padding-inline: 0 !important; | |
| padding-block: 0 !important; | |
| height: 40px !important | |
| } | |
| [uidensity="compact"] #urlbar[breakout][breakout-extend]>#urlbar-input-container { | |
| height: 26px !important | |
| } | |
| #urlbar .search-one-offs:not([hidden]) { | |
| font-family: monospace !important; | |
| ; | |
| padding-block: 4px !important | |
| } | |
| #tracking-protection-icon-container { | |
| padding: 0 2px !important | |
| } | |
| #identity-box { | |
| margin: 0 3px 0 0 !important; | |
| padding: 0 2px !important | |
| } | |
| #identity-icon, | |
| #identity-icon-label { | |
| margin-bottom: 2px !important | |
| } | |
| #urlbar[pageproxystate="invalid"] #identity-box { | |
| margin: 0 6px 0 11px !important | |
| } | |
| #pageActionButton, | |
| #editBookmarkPanelImage, | |
| .search-one-offs>hbox:nth-child(1), | |
| #urlbar-anon-search-settings-compact, | |
| #searchbar-anon-search-settings { | |
| display: none !important | |
| } | |
| /* ______ Notifications ______ */ | |
| :root .toolbarbutton-badge { | |
| background-color: transparent !important; | |
| box-shadow: none !important; | |
| padding: 0 0 4px !important; | |
| color: var(--text) !important; | |
| font-size: 7.5pt !important; | |
| opacity: .9; | |
| text-shadow: -1px 2px 3px var(--bg), -2px 1px 3px var(--bg), -2px 1px 4px var(--bg), -2px 2px 4px var(--bg) !important | |
| } | |
| .toolbarbutton-badge:hover { | |
| text-shadow: -1px 2px 3px var(--hover), -2px 1px 3px var(--hover), -2px 1px 4px var(--hover), -2px 2px 4px var(--hover) !important | |
| } | |
| #PanelUI-button, | |
| #PanelUI-menu-button { | |
| padding-inline: 0 !important; | |
| margin-inline: 0 !important | |
| } | |
| /* ______ MENU ______ */ | |
| #appMenu-addons-button, | |
| #appMenu-preferences-button { | |
| -moz-box-ordinal-group: 0 | |
| } | |
| .panel-arrow, | |
| #appMenu-edit-controls, | |
| #appMenu-open-file-button, | |
| #appMenu-fxa-label, | |
| .PanelUI-subView toolbarseparator, | |
| #appMenu-protection-report-button, | |
| #appMenu-private-window-button, | |
| #appMenu-new-window-button, | |
| #appMenu-zoom-controls, | |
| #appMenu-find-button, | |
| #appMenu-customize-button, | |
| #appMenu-whatsnew-button, | |
| #appMenu-more-button, | |
| #appMenu_menu_HelpPopup_reportPhishingtoolmenu[disabled], | |
| [oncommand="openHelpLink('firefox-help')"], | |
| [oncommand="openTourPage();"], | |
| .panel-subview-footer, | |
| .panel-footer { | |
| background-color: var(--menu) !important | |
| } | |
| .panel-subview-footer:not([disabled]):hover { | |
| background-color: var(--hover) !important | |
| } | |
| .panel-subview-body { | |
| padding: 0 !important | |
| } | |
| .panel-arrowcontent { | |
| background-color: var(--menu) !important; | |
| margin-top: 6px !important; | |
| margin-right: 0 !important | |
| } | |
| panel { | |
| margin-inline: -16px !important | |
| } | |
| :root[uidensity="compact"] panel { | |
| margin-inline: -14px !important | |
| } | |
| menupopup, | |
| menuseparator, | |
| menuitem:not([active]), | |
| menucaption, | |
| menupopup menu, | |
| tooltip, | |
| panelview { | |
| -moz-appearance: none !important; | |
| appearance: none !important; | |
| background-color: var(--menu) !important; | |
| color: var(--text) !important; | |
| padding: 3px | |
| } | |
| #appMenu-popup toolbarbutton, | |
| #widget-overflow-mainView toolbarbutton { | |
| padding: 6px !important | |
| } | |
| menuitem>label { | |
| margin-bottom: 2px !important | |
| } | |
| menupopup { | |
| padding: 0 !important | |
| } | |
| menupopup>menu>menupopup { | |
| margin-inline-start: 0 !important; | |
| margin-top: 0 !important | |
| } | |
| menuitem:hover, | |
| menupopup menu:hover, | |
| toolbarbutton:hover:not([disabled], .titlebar-close, .close-icon, #nav-bar #back-button, toolbaritem.all-tabs-item[selected] > toolbarbutton), | |
| .menu-iconic:hover, | |
| .menu-iconic[open], | |
| .downloadMainArea:hover, | |
| .downloadButton:hover, | |
| #downloadsHistory:hover { | |
| background-color: var(--hover) !important; | |
| color: var(--text-hover) !important | |
| } | |
| #identity-box:hover, | |
| #identity-box[open], | |
| #tracking-protection-icon-container:hover, | |
| #tracking-protection-icon-container[open], | |
| .urlbar-icon-wrapper:hover, | |
| .urlbar-icon-wrapper[open] { | |
| background-color: var(--hover) !important | |
| } | |
| .downloadsPanelFooterButton:hover { | |
| outline: 0 !important | |
| } | |
| #statuspanel-label { | |
| background-color: var(--bg) !important; | |
| color: var(--text) !important; | |
| opacity: .7 | |
| } | |
| #alertBox { | |
| background-color: var(--bg) !important; | |
| color: var(--text) !important; | |
| border: 1px solid var(--text) !important | |
| } | |
| /* ______ 'Find' (search) bar (Ctrl + F) ______ */ | |
| /* Move the "Find" Bar to the top of the page */ | |
| .browserContainer>findbar { | |
| -moz-box-ordinal-group: 0; | |
| /* -moz-box-ordinal-group seemingly stopped working, | |
| on v112 or v113 so I changed it to an absolute position below. */ | |
| transition: cubic-bezier(0.455, 0.03, 0.515, 0.955); | |
| transition-duration: 200ms; | |
| /* extra styling - move it to top right, narrower, and rounded */ | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| margin: 1em; | |
| width: 100%; | |
| border-radius: 1em; | |
| /* this is a vertical list now */ | |
| max-width: 20em; | |
| /* unfortunately this blur doesn't work - left as example */ | |
| background-image: none; | |
| -webkit-backdrop-filter: blur(6px); | |
| -moz-backdrop-filter: blur(6px); | |
| -ms-backdrop-filter: blur(6px); | |
| -o-backdrop-filter: blur(6px); | |
| backdrop-filter: blur(6px); | |
| /* animate opacity change */ | |
| /* background-color: rgba(0, 0, 0, 1); */ | |
| transition: opacity 200ms ease-in-out; | |
| opacity: 0.6; | |
| } | |
| /* make it opaque when hovered */ | |
| .browserContainer>findbar:hover { | |
| /* animate opacity change */ | |
| transition: opacity 200ms ease-in-out; | |
| opacity: 1; | |
| } | |
| findbar>.findbar-container { | |
| /* this is a horizontal list by default - make it a vertical list and left align */ | |
| display: flex !important; | |
| flex-direction: column !important; | |
| width: 100% !important; | |
| height: auto !important; | |
| align-items: flex-start !important; | |
| /* that is not aligning left. Try this: */ | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| /* inherit background */ | |
| background-color: inherit !important; | |
| } | |
| /* pad all children e.g. text input, buttons */ | |
| findbar>.findbar-container>* { | |
| padding: 1em !important; | |
| background-color: inherit !important; | |
| width: 100%; | |
| max-width: 100%; | |
| margin-left: 0 !important; | |
| } | |
| findbar>.findbar-closebutton { | |
| position: absolute; | |
| bottom: 1em; | |
| right: 0; | |
| cursor: pointer; | |
| } | |
| /* text input for search */ | |
| /* findbar>.findbar-container>hbox {} */ | |
| .findbar-container, | |
| .findbar-textbox:not([status="notfound"]), | |
| .findbar-closebutton.close-icon { | |
| background-color: var(--bg) !important; | |
| padding: 0 0.5em !important | |
| } | |
| .findbar-find-previous:not(:hover), | |
| .findbar-find-next:not(:hover) { | |
| background: var(--bg) !important; | |
| } | |
| /* ______ Library ______ */ | |
| #placesToolbar { | |
| padding: 0 4px 0 0 !important | |
| } | |
| #placesToolbar>toolbarbutton { | |
| padding: 7px !important | |
| } | |
| #placesMenu>menu { | |
| padding: 4px !important | |
| } | |
| #placesMenu>menu>.menubar-text { | |
| color: var(--text) | |
| } | |
| :root { | |
| --organizer-text-secondary-color: transparent !important | |
| } | |
| #searchFilter { | |
| background-color: var(--hover) !important | |
| } | |
| /* ______ About Firefox ______ */ | |
| #aboutDialogContainer { | |
| background-color: #171227 !important | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* =============================== */ | |
| /* START OF SIDEBERY MINIMAL STYLE */ | |
| /* =============================== */ | |
| /* Based on https://github.com/ongots/firefox-sidebery-minimal-style */ | |
| * { | |
| scrollbar-width: thin; | |
| scrollbar-color: #80808060 transparent !important | |
| } | |
| /* Newtab */ | |
| @-moz-document url("about:home"), | |
| url("about:newtab") { | |
| body { | |
| background-color: #fafafa !important; | |
| background-size: 30px 30px | |
| } | |
| @media (prefers-color-scheme: dark), | |
| (prefers-color-scheme: no-preference) { | |
| body { | |
| background-color: #0f0f0f !important; | |
| } | |
| /* set body before with a tiled image */ | |
| /* body::before { | |
| content: ""; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==); | |
| background-size: 200px 200px; | |
| z-index: -1; | |
| } */ | |
| /* Alternative noise generator: https://jsfiddle.net/osserpse/6SZQY/ */ | |
| } | |
| .prefs-button { | |
| display: none | |
| } | |
| } | |
| /* Addons */ | |
| button.category:nth-child(1), | |
| #help-button, | |
| #helpButton, | |
| .addon-badge-recommended, | |
| .addon-description, | |
| .back-button, | |
| .header-name, | |
| .list-section-heading, | |
| .search-label, | |
| #sidebar::after, | |
| .navigation::after { | |
| display: none !important | |
| } | |
| :root { | |
| --addon-icon-size: 26px !important; | |
| --card-padding: 14px !important; | |
| --in-content-box-border-color: #333 !important | |
| } | |
| .addon.card { | |
| margin-bottom: 5px !important | |
| } | |
| .addon-name { | |
| font-weight: 400 !important | |
| } | |
| .addon-name-container { | |
| margin-top: 0 !important | |
| } | |
| .main-search { | |
| margin: -15px 0 -41px -364px !important | |
| } | |
| .page-options-menu, | |
| #updates-message { | |
| margin: -22px 0 -10px 0 !important | |
| } | |
| .sticky-container { | |
| position: static !important | |
| } | |
| .more-options-button { | |
| background-color: transparent !important | |
| } | |
| .more-options-button:hover { | |
| background-color: #80808040 !important | |
| } | |
| /* ============================= */ | |
| /* END OF SIDEBERY MINIMAL STYLE */ | |
| /* ============================= */ |
Hey dude, Very cool!!!
Any chance of changing the side the sidebar shows? WIth this enabled I can no longer move my sidebar to the right, Also I like to make use of the history and arrow menu, but when i re-enabled it it made the visuals all wonky.
this does not work on latest ff for me :(
@ameeno I'm still using it in the latest version. You can try following the "how to use" comment at the top, and if it still doesn't work but you're able to find a solution I can edit the file or update that comment. Also note that there are 2 files: userChrome.css and userContent.css and that Sidebery requires some tweaking too, as it's written.
As for changing sides, I don't know how to go about it, but I'm sure there's a way.
Sure thanks, I will look at it again. It didn't work for me
This is really cool! I wonder if there is a way to implement Firefox Color such that the theme gets emulated using this layout. Maybe it's not possible and it will take some manual tinkering.
@digital-mystik that'd be nice too! I don't know if it's possible or how to do it, but feel free to try something out. If it works I can merge it.
Not working on the latest version of Firefox after following the instructions in the userChrome.css file above.
Running version 120.0.1 (64-bit) on Windows 10
@SoccerNerd see if that looks better now.
@SoccerNerd see if that looks better now.
No difference after following the directions. I have multiple profiles, not sure if that makes a difference. I have put the two .css files in the folder for the active profile only at this point.
@SoccerNerd see if that looks better now.
No difference after following the directions. I have multiple profiles, not sure if that makes a difference. I have put the two .css files in the folder for the active profile only at this point.
OK, user error on my part. I was able to get it working. A few comments questions:
- The auto hide is working, but the vertical tabs does not extend all the way down. Also,
- When the vertical tabs unhide it covers the current screen
- Top tabs are not hidden
Is this the expected behavior? (see screenshot)
The auto hide is working, but the vertical tabs does not extend all the way down
That's intended behavior, as the bottom half is usually empty in my use case, and you should be able to scroll the tabs panel when it overflows. You can change this by commenting out the "Sidebar with reduced height" block in the userChrome.css.
When the vertical tabs unhide it covers the current screen
Top tabs are not hidden
I think these two are related. Check again if your preface is set correctly (step 1.a., see screenshot below). The CSS uses it to automatically detect when Sidebery is active, then it hides the default tabs, and makes room for the vertical ones so they don't cover the page content.
Btw, you should be able to toggle native and vertical tabs with Ctrl+E, or whatever Sidebery shortcut you have set in about:addons:
Thanks you for the additional tips, I have commented out the "reduced height" section of the CSS. I also realized that I had added the "Preface Value" but forgot to turn it on (DOH!).
One more question, I have a theme that I prefer to the theme you've included in the CSS. Is it possible to disable (comment out) the theme? I would really just like the side bar auto-hide and top tab hide functionality?
I've been playing around with the CSS but I can't seem to disable all the theme components you've included.
Good to know it's working now 🙂
I've been wanting to simplify the whole thing too and isolate things that are not necessarily tied to the vertical tabs - including theming. This userChrome.css is actually a bit of a patchwork: a result of multiple stylesheets written by many and not necessarily with cohesive rules. I don't have the full scope of many of those rules either, which makes it a bit complicated to figure out what's important just by reading the CSS.
But if you're willing to try and disentangle the theme from the vertical tabs and make some progress, maybe we can even upgrade this gist into a proper repo.
I'll continue to poke at it, if I get something useable I'm happy to share.
A repo would be good, I'd love to try and get tree tabs working with this nicely and reduce the CSS down to what's important.
Created the repository.
PRs welcome - we can also continue the conversation in the discussions tab.
Hey first of all thank you for the theme!, I have followed all the steps but the sidebery is overflowing all the way to the top, is there any fix for this? Thanks!
@Varad30 any chance the browser is in full screen mode in this screenshot (F11)?
If not, I don't know what may be causing this, but I'd try inspecting it to figure it out: see the comment on "A. How to inspect browser interface" above.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
CSS moved to this repository.
Demo
Video.
Setup
Read the top comment of the
userChrome.cssabove.Changelog
2023-12-19
2023-04-16
2022-11-22
2021-11-13
about:flagsabout:config2021-09-15