Firefox

20446 readers

6 users here now

/c/firefox

A place to discuss the news and latest developments on the open-source browser Firefox.

Rules

1. Adhere to the instance rules

2. Be kind to one another

3. Communicate in a civil manner

Reporting

If you would like to bring an issue to the moderators attention, please use the "Create Report" feature on the offending comment or post and it will be reviewed as time allows.

founded 5 years ago

MODERATORS

k_o_t@lemmy.ml

golden_zealot@lemmy.ml

How to use disappearing sidebar with pinned tabs? (lemmy.world)

submitted 2 years ago by mulcahey@lemmy.world to c/firefox@lemmy.ml

5 comments fedilink hide all child comments

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!

you are viewing a single comment's thread
view the rest of the comments

[–] JDubbleu@programming.dev 4 points 2 years ago (1 children)

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@programming.dev 4 points 2 years ago (1 children)

Found a config on the internet:

:root {
  --sidebar-hover-width: 52px;
  --sidebar-visible-width: 320px;
}

#TabsToolbar, #sidebar-header {
  display: none !important;
}

#sidebar-box {
  position: relative !important;
  overflow:hidden;
  max-width: var(--sidebar-hover-width) !important;
}

#sidebar-box:hover {
  transition: all 200ms !important;
  max-width: var(--sidebar-visible-width) !important;
}

Source is reddit

[–] mulcahey@lemmy.world 2 points 2 years ago* (last edited 2 years ago)

Here's the one I used:

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Show sidebar only when the cursor is over it  */
/* The border controlling sidebar width will be removed so you'll need to modify these values to change width */

#sidebar-box {
 --uc-sidebar-width: 60px;
 --uc-sidebar-hover-width: 210px;
 --uc-autohide-sidebar-delay: 100ms; /* Wait 0.6s before hiding sidebar */
 position: relative;
 min-width: var(--uc-sidebar-width) !important;
 width: var(--uc-sidebar-width) !important;
 max-width: var(--uc-sidebar-width) !important;
 z-index: 1;
 background-color: #110a0d !important;
}

#sidebar-box[positionend] {
 direction: rtl;
}
#sidebar-box[positionend] > * {
 direction: ltr;
}

#sidebar-box[positionend]:-moz-locale-dir(rtl) {
 direction: ltr;
}
#sidebar-box[positionend]:-moz-locale-dir(rtl) > * {
 direction: rtl;
}

#main-window[sizemode="fullscreen"] #sidebar-box {
 --uc-sidebar-width: 1px;
}

#sidebar-splitter {
 display: none;
}

#sidebar-header {
 overflow: hidden;
 /* color: var(--chrome-color, inherit) !important; */
 padding-inline: 0 !important;
}

#sidebar-header::before,
#sidebar-header::after {
 content: "";
 display: flex;
 padding-left: 8px;
}

#sidebar-header,
#sidebar {
 transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important;
 min-width: var(--uc-sidebar-width) !important;
 will-change: min-width;
}
#sidebar-box:hover > #sidebar-header,
#sidebar-box:hover > #sidebar {
 min-width: var(--uc-sidebar-hover-width) !important;
 transition-delay: 0ms !important;
}

.sidebar-panel {
 /* background-color: transparent !important; */
 /* color: var(--newtab-text-primary-color) !important; */
}

.sidebar-panel #search-box {
 -moz-appearance: none !important;
 /* background-color: rgba(249, 249, 250, 0.1) !important; */
 color: inherit !important;
}

/* Add sidebar divider and give it background */

#sidebar,
#sidebar-header {
 background-color: inherit !important;
 border-inline: 1px solid rgb(80, 80, 80);
 border-inline-width: 0px 1px;
}

#sidebar-box:not([positionend]) > :-moz-locale-dir(rtl),
#sidebar-box[positionend] > * {
 border-inline-width: 1px 0px;
}

/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */

#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel {
 inset-inline: auto 0px !important;
}
#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label {
 margin-inline: 0px !important;
 border-left-style: solid !important;
}`___`