[CSS] Auto-hide vertical tab bar?

brakck29u491

Hello folks. I'm not experienced with CSS and have been searching the net for a while without much luck.

I'm looking for CSS to auto-hide the tab bar when it's in vertical view (Left or Right instead of Top). I found code to hide only horizontal tab bars.

Any pointers would be appreciated

For context I work on a small 13" macbook whilst mobile, I struggle with productivity and ability to focus when too many things are on the screen. So I try to optimize where possible. I use the tab bar constantly, so it's not convenient to toggle it on and off with keyboard shortcut every second or two

Wyverns

This will have to be a .js file if you want it to hide the vertical tab bar (css is for purely appearance; to make the vertical tab bar hide after some time / interaction you need to detect that using Javascript) + integration with keyboard shortcuts.

If you want a CSS version that I'm pretty sure doesn't work with keyboard shortcuts, but does work with the sidebar: https://forum.vivaldi.net/topic/108251/rounded-tabs-auto-hide-side-panel-in-vivaldi-custom-css-all-window-sizes-supported/13

Are you comfortable installing scripts? If so, I can try.

mib2berlin

@brakck29u491
Hi, you can search in the modification section only to get results only for modifications.

But I know this one and could find it quickly:

https://forum.vivaldi.net/topic/107983/fixed-arc-like-ui?_=1749222468418

brakck29u491

@Wyverns Thanks for the explanation. Yes JS would be fine too.

Btw I'm using CSS from this forum that auto-hides the panel, is the tab bar technically different and thus needs JS?

sjudenim

This can be done with just css and there are many examples already on this forum.

Here's a basic auto hide that is triggered when you put your cursor to the tab bar side. It has an animation and a delay time that you can adjust to your liking.

.tabs-left #main { margin-left: 0; }

.tabs-right #main { margin-right: 0; }
  
#tabs-tabbar-container.left, #tabs-tabbar-container.right {
  position: absolute;
  z-index: 1;
  height: 100%;
  transition: transform .3s .3s !important
}
  
#tabs-tabbar-container.left::after, #tabs-tabbar-container.right::before {
  content: '';
  display: block;
  position: absolute;
  background-color: transparent;
  height: 100%;
  width: 8px
}
  
#tabs-tabbar-container.left::after { margin-left: 100%; }
  
#tabs-tabbar-container.right::before { margin-left: -8px; }
  
#tabs-tabbar-container.left:not(:hover) { transform: translateX(-100%); transition: transform .7s .7s !important }
  
#tabs-tabbar-container.right { right: 0; }
  
#tabs-tabbar-container.right:not(:hover) { transform: translateX(100%); transition: transform .7s .7s !important }

There are also built in options. You can use a mouse gesture and/or a keyboard shortcut to toggle the tab bar or if you prefer you can create a toggle button by creating a command chain and then add that button to any toolbar.

Wyverns

@sjudenim Oh nice, I didn't think of that. I forgot delays existed; these days CSS is really powerful. Thanks!

brakck29u491

@mib2berlin ty very much. I tried the code but it didn't work, it just caused the tabs to dissapear

brakck29u491

@sjudenim said in [CSS] Auto-hide vertical tab bar?:

This can be done with just css and there are many examples already on this forum.

Here's a basic auto hide that is triggered when you put your cursor to the tab bar side. It has an animation and a delay time that you can adjust to your liking.
.tabs-left #main { margin-left: 0; }

.tabs-right #main { margin-right: 0; }
  
#tabs-tabbar-container.left, #tabs-tabbar-container.right {
  position: absolute;
  z-index: 1;
  height: 100%;
  transition: transform .3s .3s !important
}
  
#tabs-tabbar-container.left::after, #tabs-tabbar-container.right::before {
  content: '';
  display: block;
  position: absolute;
  background-color: transparent;
  height: 100%;
  width: 8px
}
  
#tabs-tabbar-container.left::after { margin-left: 100%; }
  
#tabs-tabbar-container.right::before { margin-left: -8px; }
  
#tabs-tabbar-container.left:not(:hover) { transform: translateX(-100%); transition: transform .7s .7s !important }
  
#tabs-tabbar-container.right { right: 0; }
  
#tabs-tabbar-container.right:not(:hover) { transform: translateX(100%); transition: transform .7s .7s !important }
There are also built in options. You can use a mouse gesture and/or a keyboard shortcut to toggle the tab bar or if you prefer you can create a toggle button by creating a command chain and then add that button to any toolbar.

WOW thanks so much for this code!!! I wish I knew this was possible 2 years ago when I moved to Vivaldi

Just one thing, is it possible to have it correctly handle "Show workspaces in tab bar" setting?
Currently a big rectangle placeholder remains on the screen underneath the auto-hidden tabs

mib2berlin

@brakck29u491
I guess a Vivaldi update break it, was working for me as I tested it.
This can always happen with mods if the modder don't have the time to update or lost interest.

brakck29u491

@mib2berlin Fair enough, that's good to know. I need to learn some modern CSS I guess. It changed so much from the time I last used it, like 10 years ago lol. but chatGPT helped me understand it hehe

sjudenim

@brakck29u491

So here's the thing, that Workspace button has it's own container in the Stable (7.4), but (and this is a big but) it will be obsoleted in the very next release (7.5). The Workspace will be just another customizable button in the new builds and you will be able to add it directly to the tab bar (I think it's defaulted there but you can also add it to any other toolbar) therefore not needing it's own container.

It can be done with just css but would be a little messy. Java would be cleaner to move it but that script will be useless in the next build.

So rather than write that up I would suggest just using a mouse gesture(or keyboard shortcut) for the Tab Bar in the meantime

brakck29u491

@sjudenim aah thanks so much for the detailed explanation, that makes sense!
Cool for now I disabled the workspace selector on the tab bar, in order to use the nice auto-hide code.
Then I added a workspace selector button to the side panel. I eagerly await release 7.5 to add it back to tab bar

Have a nice Sunday!