spacegorilla , Spanish

Help toggling top tab bar on firefox.

A while ago someone helped me to eliminate the top tab bar so i could just have my Tree Style Tab on the side. It works great but i was wondering if there was any way to make that a toggle? Cause sometimes I move my computer to a smaller monitor and the horizontal space that it takes can be inconvinient.

Here's the snippet for removing it in the first place:

/* hides the native tabs */ #TabsToolbar { visibility: collapse; }/* leaves space for the window buttons */ #nav-bar { margin-top: -30px; margin-right: 0px; margin-bottom: -4px; }

Also, since i have you here, i couldn´t manage to create a floating o just an existing "three buttons" (like the minimize maximize and close buttons). So if you know about any one of those it´d be really helpful.

Thanks in advance !

Falmarri ,
@Falmarri@lemmy.world avatar

I suggest switching to sidebery. Use the 5.x version from github, but if you do that they have a recipe.

github.com/…/Firefox-Styles-Snippets-(via-userChr…

IMO the default styles look kinda ugly. I made one that looks very similar to treestyletabs

<pre style="background-color:#ffffff;">
<span style="color:#323232;">#root.root {--tabs-activated-shadow: 0px 1px 4px -1px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,0.133);}
</span><span style="color:#323232;">#root.root {--tabs-activated-bg: #d3ebffff;}
</span><span style="color:#323232;">#root.root {--tabs-inner-gap: 6px;}
</span><span style="color:#323232;">#root.root {--tabs-indent: 8px;}
</span><span style="color:#323232;">#root.root {--tabs-font: .9rem sans-serif;}
</span><span style="color:#323232;">#root.root {--tabs-height: 25px;}
</span><span style="color:#323232;">#root.root {--popup-bg: rgb(244, 245, 246);}
</span><span style="color:#323232;">#root.root {--general-margin: 0px;}
</span><span style="color:#323232;">#root.root {--frame-bg: #9a9996ff;}
</span><span style="color:#323232;">
</span><span style="color:#323232;">#root.root {--status-active: #146fd9;}
</span><span style="color:#323232;">
</span><span style="color:#323232;">#root.root {--tabs-border-radius: 4px 0 0 4px;}
</span><span style="color:#323232;">
</span><span style="color:#323232;">
</span><span style="color:#323232;">/* OLD CSS VARS
</span><span style="color:#323232;">
</span><span style="color:#323232;">*/
</span><span style="color:#323232;">
</span><span style="color:#323232;">.Tab .body{
</span><span style="color:#323232;">  border-style: solid;
</span><span style="color:#323232;">  border-width: 0px 0px 1px;
</span><span style="color:#323232;">  border-color: rgba(154, 153, 150,0.55);
</span><span style="color:#323232;">	background-color: #FCFCFC;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">.Tab[data-discarded="true"] > .body > .fav,
</span><span style="color:#323232;">.Tab[data-discarded="true"] > .body > .t-box, 
</span><span style="color:#323232;">.Tab[data-discarded="true"] > .body > .ctx {
</span><span style="color:#323232;">  opacity: 1.00;
</span><span style="color:#323232;">	--frame-fg: red;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">.TabsPanel .bottom-space {
</span><span style="color:#323232;">	height: 0;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">.TabsPanel .bottom-bar {
</span><span style="color:#323232;">	display: none;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">.Tab .progress-spinner {
</span><span style="color:#323232;">	right: 1px;
</span><span style="color:#323232;">	bottom: 1px;
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">.Tab[data-loading="true"] .fav-icon {
</span><span style="color:#323232;">  mask: radial-gradient(circle at calc(100% - 8px) calc(100% - 8px),rgba(0,0,0,.141),rgba(0,0,0,.141) 8px,#000 8px,#000);
</span><span style="color:#323232;">}
</span>
spacegorilla OP ,

@Falmarri hey thanks man! if you dont mind I can´t manage to make the animation for the tabbar work. It seems to be something with the unicode values for the titlepreface* values but i dont really get along with css and/or unicode values so it´s not really going anywhere. Currently i have it set on U+200B wich seems to be the 'empty' value o smth but with that value the top bar just barely moves up when i activate Sidebery..

edit: typo

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • random
  • [email protected]
  • All magazines
    •