See also:
Created
June 10, 2023 12:59
-
-
Save hylophile/e72628eff973d6012e9170164db7661e to your computer and use it in GitHub Desktop.
Sidebery expand on hover (with tab drag'n'drop working) & scrolling long tab titles
This file contains hidden or 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
| /** tab title scrolling | |
| * | |
| * inspired by https://github.com/Redundakitties/colorful-minimalist/ | |
| * (add in sidebery settings) | |
| */ | |
| :root { | |
| --nav-width: 40px; | |
| --fav-horiz-margin: 13px; | |
| --fav-width: 16px; | |
| --close-width: 28px; | |
| --min-tab-offset: calc(var(--nav-width) | |
| + var(--fav-horiz-margin) | |
| + var(--fav-width)); | |
| --min-margin-correction: calc(100vw | |
| - var(--min-tab-offset) | |
| - 100%); | |
| } | |
| div.NavigationBar { | |
| width: var(--nav-width); | |
| } | |
| div.panel-btn { | |
| width: var(--nav-width) !important; | |
| height: var(--nav-width) !important; | |
| } | |
| .Tab .t-box { | |
| min-width: fit-content; | |
| } | |
| .Tab .t-box .title { | |
| transition: all 1.5s ease; | |
| display: inline-block; | |
| padding-right: var(--close-width); | |
| } | |
| .Tab:hover .title { | |
| margin-left: min(var(--min-margin-correction) , 0px); | |
| } | |
| .Tab[data-lvl="1"]:hover .title { | |
| --margin-correction: calc(var(--min-margin-correction) | |
| - var(--tabs-indent)); | |
| margin-left: min(var(--margin-correction) , 0px); | |
| } | |
| .Tab[data-lvl="2"]:hover .title { | |
| --margin-correction: calc(var(--min-margin-correction) | |
| - (var(--tabs-indent) * 2)); | |
| margin-left: min(var(--margin-correction) , 0px); | |
| } | |
This file contains hidden or 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
| /* Set variables for sidebar widths and margins */ | |
| :root { | |
| --sidebery-retracted-width: 40px; | |
| --sidebery-extended-width: 33vw; | |
| --sidebery-extended-margin-correction: calc( | |
| ( var(--sidebery-extended-width) | |
| - var(--sidebery-retracted-width) | |
| ) * -1); | |
| --transparent-color: rgba(1, 1, 1, 0); | |
| --transition-duration: 0.1s; | |
| --transition-smoothing-function: ease-in-out; | |
| } | |
| /* Extend sidebar normally, when not using SideBery. */ | |
| #sidebar-box:not([sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]) { | |
| min-width: var(--sidebery-extended-width) !important; | |
| max-width: none !important; | |
| } | |
| /* Retract sidebar, when using SideBery. */ | |
| #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] { | |
| min-width: var(--sidebery-retracted-width) !important; | |
| max-width: var(--sidebery-retracted-width) !important; | |
| /* Set explicit z-index, to enable sidebar displaying over app content. */ | |
| z-index: 1; | |
| /* Margin zero, instead of auto, suppresses jittering. */ | |
| margin-left: 0; | |
| margin-right: 0; | |
| /* Fix for sidebar closing on tab drop. */ | |
| transition: all var(--transition-duration) var(--transition-smoothing-function); | |
| } | |
| /* Extend sidebar on hover, when using SideBery. */ | |
| #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover { | |
| min-width: var(--sidebery-extended-width) !important; | |
| max-width: var(--sidebery-extended-width) !important; | |
| /* Correct right-margin to keep page from being pushed to the side. */ | |
| margin-right: var(--sidebery-extended-margin-correction); | |
| margin-left: 0; | |
| opacity: 0.8; | |
| /* Fix for sidebar closing on tab drop. */ | |
| transition: all var(--transition-duration) var(--transition-smoothing-function); | |
| } | |
| /** Set negative margins for SideBery on hover, so that the page stays static. | |
| * | |
| * Where we want to apply the negative margin depends on whether the sidebar is on the right, or on the left. | |
| * When sidebar displays on the right, it has positionend="true" set, and when on the left it does not. | |
| */ | |
| /** | |
| * Transparent sidebar, when using SideBery. | |
| * | |
| * Can unfortunately not be selectively overwritten in the SideBery CSS. | |
| * Neither can the userChrome.css select for child elements in the Sidebar, | |
| * and set opacity on those directly. | |
| * | |
| * Setting the about:config values gfx.webrender.all and gfx.webrender.enabled set to true | |
| * *could* be needed, according to anecdotal evidence, but are not for me. | |
| */ | |
| /* | |
| #sidebar-box, | |
| #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] *, | |
| #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #browser, | |
| #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #webextpanels-window { | |
| background: transparent !important; | |
| } | |
| */ | |
| /** Clean up unneeded stuff | |
| * | |
| * Hide native tab bar, | |
| * sidebar title, switcher arrow and splitter, when using SideBery. | |
| */ | |
| tabs, | |
| #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-title, | |
| #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-switcher-arrow, | |
| #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-spacer, | |
| #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-throbber, | |
| #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-close, | |
| #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] + #sidebar-splitter { | |
| visibility: collapse; | |
| } | |
| /* in SideBery */ | |
| /* | |
| div.NavigationBar { | |
| width: 40px; | |
| } | |
| div.panel-btn { | |
| width: 40px !important; | |
| height: 40px !important; | |
| } | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment