How to use disappearing sidebar with pinned tabs?

I’m a big user of Tree Style Tabs. And I LOVE using pinned tabs.

Recently, I modified my CSS so that my sidebar will shrink/expand on hover. I really like getting this screen real estate back.

But there’s a problem: My pinned tabs keep moving every time the sidebar changes width, causing the entire tab tree to slide up. (GIF) This means I have to hover, wait for the tabs, find the one I want, and finally click on it, rather than - y’know- just mousing over there and clicking.

Is there any way to change this, such that my pinned tabs stay in the “wide” configuration, and are just “revealed” when the sidebar expands?

Thanks Lemmy folks!

JDubbleu,

Woah, I didn’t even know you could do that. What CSS did you use for this? I use SideBerry and would like to do the same thing.

JDubbleu,

Found a config on the internet:


<span style="color:#323232;">:root {
</span><span style="color:#323232;">  --sidebar-hover-width: 52px;
</span><span style="color:#323232;">  --sidebar-visible-width: 320px;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">#TabsToolbar, #sidebar-header {
</span><span style="color:#323232;">  display: none !important;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">#sidebar-box {
</span><span style="color:#323232;">  position: relative !important;
</span><span style="color:#323232;">  overflow:hidden;
</span><span style="color:#323232;">  max-width: var(--sidebar-hover-width) !important;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">#sidebar-box:hover {
</span><span style="color:#323232;">  transition: all 200ms !important;
</span><span style="color:#323232;">  max-width: var(--sidebar-visible-width) !important;
</span><span style="color:#323232;">}
</span>

Source is reddit

mulcahey,

Here’s the one I used:


<span style="color:#323232;">/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0
</span><span style="color:#323232;">See the above repository for updates as well as full license text. */
</span><span style="color:#323232;">
</span><span style="color:#323232;">/* Show sidebar only when the cursor is over it  */
</span><span style="color:#323232;">/* The border controlling sidebar width will be removed so you'll need to modify these values to change width */
</span><span style="color:#323232;">
</span><span style="color:#323232;">#sidebar-box {
</span><span style="color:#323232;"> --uc-sidebar-width: 60px;
</span><span style="color:#323232;"> --uc-sidebar-hover-width: 210px;
</span><span style="color:#323232;"> --uc-autohide-sidebar-delay: 100ms; /* Wait 0.6s before hiding sidebar */
</span><span style="color:#323232;"> position: relative;
</span><span style="color:#323232;"> min-width: var(--uc-sidebar-width) !important;
</span><span style="color:#323232;"> width: var(--uc-sidebar-width) !important;
</span><span style="color:#323232;"> max-width: var(--uc-sidebar-width) !important;
</span><span style="color:#323232;"> z-index: 1;
</span><span style="color:#323232;"> background-color: #110a0d !important;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">#sidebar-box[positionend] {
</span><span style="color:#323232;"> direction: rtl;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">#sidebar-box[positionend] > * {
</span><span style="color:#323232;"> direction: ltr;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">#sidebar-box[positionend]:-moz-locale-dir(rtl) {
</span><span style="color:#323232;"> direction: ltr;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">#sidebar-box[positionend]:-moz-locale-dir(rtl) > * {
</span><span style="color:#323232;"> direction: rtl;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">#main-window[sizemode="fullscreen"] #sidebar-box {
</span><span style="color:#323232;"> --uc-sidebar-width: 1px;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">#sidebar-splitter {
</span><span style="color:#323232;"> display: none;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">#sidebar-header {
</span><span style="color:#323232;"> overflow: hidden;
</span><span style="color:#323232;"> /* color: var(--chrome-color, inherit) !important; */
</span><span style="color:#323232;"> padding-inline: 0 !important;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">#sidebar-header::before,
</span><span style="color:#323232;">#sidebar-header::after {
</span><span style="color:#323232;"> content: "";
</span><span style="color:#323232;"> display: flex;
</span><span style="color:#323232;"> padding-left: 8px;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">#sidebar-header,
</span><span style="color:#323232;">#sidebar {
</span><span style="color:#323232;"> transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important;
</span><span style="color:#323232;"> min-width: var(--uc-sidebar-width) !important;
</span><span style="color:#323232;"> will-change: min-width;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">#sidebar-box:hover > #sidebar-header,
</span><span style="color:#323232;">#sidebar-box:hover > #sidebar {
</span><span style="color:#323232;"> min-width: var(--uc-sidebar-hover-width) !important;
</span><span style="color:#323232;"> transition-delay: 0ms !important;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">.sidebar-panel {
</span><span style="color:#323232;"> /* background-color: transparent !important; */
</span><span style="color:#323232;"> /* color: var(--newtab-text-primary-color) !important; */
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">.sidebar-panel #search-box {
</span><span style="color:#323232;"> -moz-appearance: none !important;
</span><span style="color:#323232;"> /* background-color: rgba(249, 249, 250, 0.1) !important; */
</span><span style="color:#323232;"> color: inherit !important;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">/* Add sidebar divider and give it background */
</span><span style="color:#323232;">
</span><span style="color:#323232;">#sidebar,
</span><span style="color:#323232;">#sidebar-header {
</span><span style="color:#323232;"> background-color: inherit !important;
</span><span style="color:#323232;"> border-inline: 1px solid rgb(80, 80, 80);
</span><span style="color:#323232;"> border-inline-width: 0px 1px;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">#sidebar-box:not([positionend]) > :-moz-locale-dir(rtl),
</span><span style="color:#323232;">#sidebar-box[positionend] > * {
</span><span style="color:#323232;"> border-inline-width: 1px 0px;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */
</span><span style="color:#323232;">
</span><span style="color:#323232;">#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel {
</span><span style="color:#323232;"> inset-inline: auto 0px !important;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label {
</span><span style="color:#323232;"> margin-inline: 0px !important;
</span><span style="color:#323232;"> border-left-style: solid !important;
</span><span style="color:#323232;">}`___`
</span>
mulcahey,

Never mind, I fixed it! For anyone who wants to do the same: Inside the Tree Style Tab / All Configs menu, I had to uncheck “FaviconizePinned Tabs”.

Now all my pinned tabs are stacked on top of each other. Not quite what I was going for, but acceptable.

JDubbleu,

Ended up with a similar issue in SideBerry. The option there is “Show titles of pinned tabs”. Turning it on is the fix.

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • random
  • uselessserver093
  • Food
  • [email protected]
  • aaaaaaacccccccce
  • test
  • CafeMeta
  • testmag
  • MUD
  • RhythmGameZone
  • RSS
  • dabs
  • oklahoma
  • Socialism
  • KbinCafe
  • TheResearchGuardian
  • Ask_kbincafe
  • SuperSentai
  • feritale
  • KamenRider
  • All magazines
    •