• Browser
  • Mail
  • News
  • Community
  • About
Register Login
HomeBlogsForumThemesContributeSocial

Vivaldi

  • Browser
  • Mail
  • News
  • Community
  • About

Navigation

    • Home
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    1. Home
    2. Desktop
    3. Customizations & Extensions
    4. Modifications
    5. Automate Floating Vertical Tabbar for Mouse & Keyboard

    Automate Floating Vertical Tabbar for Mouse & Keyboard

    Modifications
    51
    154
    27.8k
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • P
      PatStar15 @barkocak
      last edited by

      This post is deleted!
      1 Reply Last reply Reply Quote 0
      • P
        PatStar15 @barkocak
        last edited by

        @barkocak said in Automate Floating Vertical Tabbar for Mouse & Keyboard:

        here's an updated version of my edit. tested on mac with vivaldi 6.5.3206.48. should work with workspaces and tabs on left/right. hope it fixes all issues.

        workspace working great. Can u do one for option A?

        1 Reply Last reply Reply Quote 0
        • supra107
          S
          supra107
          last edited by

          I've done a rewrite of my current mod that keeps the tab bar completely hidden and only shows it when I flick my mouse over the main bar, so be wary of that. I also took some time and adapted it to work with the workspace switcher, just to see if I could do it.

          Note that all of this is based on "borrowed" code from this thread, and I didn't keep track of what I "borrowed", what I modified and what I wrote from scratch. 😉

          :root {
    --tabbarHoveroutTimeout: .5s
}

/*----- Scrollbar -----*/

/* Wider scrollbar */
#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar {
    --scrollbarWidth: 18px !important;
    padding: 0 2px !important;
}

/* No buttons */
#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-button {
    display: none !important;
}

/* Scrollbar rounding */
#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-thumb {
    border: 3px solid transparent !important;
    border-radius: 8px !important;
}

/*----- Vertical Tabbar -----*/

/* z-index */
#browser.tabs-left .tabbar-wrapper, #browser.tabs-right .tabbar-wrapper {
    z-index: 1;
}

/* hover out timeout */
#tabs-tabbar-container:is(.left, .right) {
    transition: clip-path 0s var(--tabbarHoveroutTimeout) !important;
}

/* Right side tab bar fixes */
#tabs-tabbar-container:is(.right) {
    right: 0;
    position: fixed;
    height: -webkit-fill-available !important;
}

/* Remove reserved tab bar space */
#main > .inner > div:has(#tabs-tabbar-container.left) {
    width: 0px !important;
}

/* Resize the tab bar to 0px width when not in use */
#tabs-tabbar-container.left {
    clip-path: inset(0 100% 0 0);
}

#tabs-tabbar-container.right {
    clip-path: inset(0 0 0 100%);
}

/* Show tab bar on inactive windows when moving tabs */
#browser.isblurred:where(:has(div.tab-yield-space, .tab-acceptsdrop)) #tabs-tabbar-container.left {
    clip-path: initial;
}

#browser.isblurred:where(:has(div.tab-yield-space, .tab-acceptsdrop)) #tabs-tabbar-container.right {
    clip-path: initial;
}

/* Show tab bar when hovering on main bar and prevent tab bar hiding when in use */
#browser:where(:has(.mainbar:is(:hover))) #tabs-tabbar-container:is(.left, .right), #tabs-tabbar-container:is(.left, .right):is(:hover, :focus-within) {
    clip-path: inset(0 -40px 0 -40px);
    transition: clip-path 0s !important;
}

/* Move new tab icon to the left for left side tab bar */
#tabs-tabbar-container:is(.left) .button-toolbar.newtab {
    left: 0px !important;
}

/* Add background color for transparent tab bar */
#browser.transparent-tabbar #tabs-tabbar-container:is(.left, .right) {
    background-color: var(--colorBgAlpha) !important;
}

#browser.transparent-tabbar:is(.tabs-left.color-behind-tabs-on, .tabs-right.color-behind-tabs-on) #tabs-tabbar-container:is(.left, .right) {
    background-color: color-mix(in srgb, var(--colorAccentBg) 80%, var(--colorAccentBgAlpha)) !important;
}

/*----- Workspace switcher -----*/

/*--- Left tab bar ---*/

/* hover out timeout */
#browser.tabs-left .tabbar-workspace-button {
    transition: clip-path 0s var(--tabbarHoveroutTimeout) !important;
}

/* Hide by default */
#browser.tabs-left .tabbar-workspace-button {
    clip-path: inset(0 100% 0 0);
}

/* Show with tab bar */
#browser.tabs-left:where(:has(.mainbar:is(:hover)), :has(#tabs-tabbar-container:is(.left):is(:hover, :focus-within))) .tabbar-workspace-button, #browser.tabs-left .tabbar-workspace-button:is(:hover, :focus-within), #browser.tabs-left.isblurred:where(:has(div.tab-yield-space, .tab-acceptsdrop)) .tabbar-workspace-button {
    clip-path: inset(0 0 0 0);
    transition: clip-path 0s !important;
}
/* Don't hide tab bar when using workspace selector */
#browser:where(:has(.tabbar-workspace-button:is(:hover, :focus-within))) #tabs-tabbar-container:is(.left) {
    clip-path: inset(0 -40px 0 -40px);
    transition: clip-path 0s !important;
}

/* Add background color for transparent tab bar */
#browser.transparent-tabbar.tabs-left .tabbar-workspace-button {
    background-color: var(--colorBgAlpha) !important;
}

#browser.transparent-tabbar.tabs-left.color-behind-tabs-on .tabbar-workspace-button {
    background-color: color-mix(in srgb, var(--colorAccentBg) 80%, var(--colorAccentBgAlpha)) !important;
}

/*--- Right tab bar ---*/

/* z-index behind sidebar and hover out timeout */
#browser.tabs-right .tabbar-workspace-button {
    z-index: 2;
    transition: clip-path 0s var(--tabbarHoveroutTimeout) !important;
}

/* Hide by default */
#browser.tabs-right .tabbar-workspace-button {
    clip-path: inset(0 100% 0 0);
    right: 0;
}

#browser.tabs-right .tabbar-workspace-button:not(:focus-within) {
    position: fixed;
}

/* Show with tab bar */
#browser.tabs-right:where(:has(.mainbar:is(:hover)), :has(#tabs-tabbar-container:is(.right):is(:hover, :focus-within))) .tabbar-workspace-button, #browser.tabs-right .tabbar-workspace-button:is(:hover, :focus-within), #browser.tabs-right.isblurred:where(:has(div.tab-yield-space, .tab-acceptsdrop)) .tabbar-workspace-button {
    clip-path: inset(0 0 0 0);
    transition: clip-path 0s !important;
}
/* Add padding for selector */
#browser:where(:has(.tabbar-workspace-button)) #tabs-tabbar-container:is(.right) {
    padding-top: 40px;
}

/* Don't hide tab bar when using workspace selector */
#browser:where(:has(.tabbar-workspace-button:is(:hover, :focus-within))) #tabs-tabbar-container:is(.right) {
    clip-path: inset(0 -40px 0 -40px);
    transition: clip-path 0s !important;
}

/* Add background color for transparent tab bar */
#browser.transparent-tabbar.tabs-right .tabbar-workspace-button {
    background-color: var(--colorBgAlpha) !important;
}

#browser.transparent-tabbar.tabs-right.color-behind-tabs-on .tabbar-workspace-button {
    background-color: color-mix(in srgb, var(--colorAccentBg) 80%, var(--colorAccentBgAlpha)) !important;
}

          Things of note:
          -the implementation of the workspace switcher with the right side tab bar is a bit wonky (as is everything related to it) and I didn't put too much effort into it since I use the left side switcher
          -the 40px inset margin is there for the tab bar buttons on the side CSS mod that should be available somewhere on the forum
          -the tabbarHoverTimeout is there to adjust for how long the tab bar is meant to linger once it's no longer in focus, so if it disappears too fast, just adjust that
          -it's fully compatible with the automated two stack tab bar mod, since they don't collide with each other in any way
          -it has zero animations because it's meant to be quick and practical 😛
          -it was done for 100% 1080p scaling so there's a possibility it won't scale on higher DPI's well
          -if you wish, you could modify it to always show a bit of it on the left by adding back some reserved tab bar space and then changing the 100% values in all the inset clip-paths to calc(100% - ?px), with ? being the width you wish to dedicate for the tab bar. You can modify it however you like to suit your needs, that's the whole idea of it isn't it? 😉

          D
                     1 Reply Last reply           Reply Quote 1
          • D
            drabspirit @supra107
            last edited by

            @supra107 Heyo! currently trying to use this but it seems to not allow me to open the workspace switcher. Just quickly opens and closes before I can even make out my workspaces. Would love a fix, I tried to poke around but css is foreign to me ahh

            supra107
            S
                         1 Reply Last reply             Reply Quote 0
            • supra107
              S
              supra107 @drabspirit
              last edited by

              @drabspirit In an attempt to fix this one odd issue, I ended up rewriting the entire mod to be more elegant. 😛

              :root {
    --tabbarHoveroutTimeout: .5s
}

/*----- Scrollbar -----*/

/* Wider scrollbar */
#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar {
    --scrollbarWidth: 18px !important;
    padding: 0 2px !important;
}

/* No buttons */
#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-button {
    display: none !important;
}

/* Scrollbar rounding */
#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-thumb {
    border: 3px solid transparent !important;
    border-radius: 8px !important;
}

/*----- Vertical Tabbar -----*/

/* Set z-index and hide when not in use */
#browser.tabs-left .tabbar-wrapper, #browser.tabs-right .tabbar-wrapper {
    z-index: 1;
    position: absolute;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0s var(--tabbarHoveroutTimeout) !important;
}

/* Right side tab bar fix */
#browser.tabs-right .tabbar-wrapper {
    right: 0;
}

/* Show tab bar on inactive windows when moving tabs */
#browser.tabs-left.isblurred:where(:has(div.tab-yield-space, .tab-acceptsdrop)) .tabbar-wrapper {
    clip-path: initial;
}

/* Show tab bar when hovering on main bar and prevent tab bar hiding when in use */
#browser:is(.tabs-left, .tabs-right):where(:has(.mainbar:is(:hover))) .tabbar-wrapper, #browser:is(.tabs-left, .tabs-right) .tabbar-wrapper:is(:hover, :focus-within) {
    clip-path: inset(0 -400px 0 -400px);
    transition: clip-path 0s !important;
}

/* Add background color for transparent tab bar */
#browser.transparent-tabbar #tabs-tabbar-container:is(.left, .right) {
    background-color: var(--colorBgAlpha) !important;
}

#browser.transparent-tabbar:is(.tabs-left.color-behind-tabs-on, .tabs-right.color-behind-tabs-on) #tabs-tabbar-container:is(.left, .right) {
    background-color: color-mix(in srgb, var(--colorAccentBg) 80%, var(--colorAccentBgAlpha)) !important;
}

/*----- Workspace switcher -----*/

/* Add background color for transparent tab bar */
#browser.transparent-tabbar.tabs-left .tabbar-workspace-button, #browser.transparent-tabbar.tabs-right .tabbar-workspace-button {
    background-color: var(--colorBgAlpha) !important;
}

#browser.transparent-tabbar.tabs-left.color-behind-tabs-on .tabbar-workspace-button {
    background-color: color-mix(in srgb, var(--colorAccentBg) 80%, var(--colorAccentBgAlpha)) !important;
}

/* Don't hide tab bar when using workspace selector */
#browser.tabs-left:where(:has(div.WorkspacePopup:is(:hover, :focus-within))) .tabbar-wrapper, #browser.tabs-right:where(:has(div.WorkspacePopup:is(:hover, :focus-within))) .tabbar-wrapper {
    clip-path: inset(0 -400px 0 -400px);
    transition: clip-path 0s !important;
}

              Somewhere between me posting the previous mod and now I've edited it so that it would clip-path the wrapper for the transparent tab bar blur, and while trying to diagnose why Vivaldi v6.7 doesn't respect the :hover. :focus-within for the workspace switcher, I realized something I should've realized long ago.

              The way Vivaldi deals with the workspace switcher in the vertical tab bar is that it adds a new div right before the one for the tabs, but both of those are in the .tabbar-wrapper element I've been crudely working with just to add the backdrop. But everything is in this div, so why not just target that?

              This is the result. A much shorter, cleaner and more reliable CSS mod. It now targets the div that contains all the tab bar elements, and it works reliably on all elements within it. No more weird hacks for the tab bar whether it's on the left or right side, or weird hacks for the workspace selector. The only addition for the workspace selector that I had to add was to add the bit at the very end, so that it keeps the tab bar visible when the selector popup is present.

              Note that the -400px clip-path isn't the cleanest value for it, but I chose it and it works. At 100% scaling, the maximum width the vertical tab bar can get to is 330px. Clipping .tabbar-wrapper also means clipping the external tab bar buttons that another CSS mod adds, so I gave it the margin of 400px to take that into account. It works fine and the browser only cares if you hover within the elements contained within .tabbar-wrapper and not any invisible margins so it works just fine.

              D
              R
              J
                             3 Replies Last reply               Reply Quote 4
              • D
                drabspirit @supra107
                last edited by drabspirit

                @supra107 Wow ty! Works amazingly, ended up adding 'VivalArc' to my setup and it works perfectly with it too so seems like you did a perfect job ⭐ alt text alt text

                1 Reply Last reply Reply Quote 1
                • EFA2021
                  E
                  EFA2021
                  last edited by

                  Does this still work in version latest version? (6.7.3329.41)

                  1 Reply Last reply Reply Quote 0
                  • R
                    R0STEFAN @supra107
                    last edited by R0STEFAN

                    @supra107 I modified this code somewhat to bring panel hiding closer to the Arc browser.
                    But it only works properly if the vertical panel is on the left edge.
                    What was done

                    • changed the code to show tab bar when hovering on left edge
                    • added animation for beauty and aesthetics.
                    • made a slightly thinner scrollbar

                    Working on 6.8 version for me.

                    :root {
    --tabbarHoveroutTimeout: .5s
}

/*----- Scrollbar -----*/

/* Wider scrollbar */
#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar {
    --scrollbarWidth: 10px !important;
	border: 1px solid #9fb0cb !important;
	border-radius: 8px !important;
    padding: 0 2px !important;
}

/* No buttons */
#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-button {
    display: none !important;
}

/* Scrollbar rounding */
#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-thumb {
    border: 2px solid transparent !important;
    border-radius: 8px !important;
}

/*----- Vertical Tabbar -----*/

/* Set z-index and hide when not in use */
#browser.tabs-left .tabbar-wrapper, #browser.tabs-right .tabbar-wrapper {
    z-index: 1;
    position: absolute;
	transform: translateX(calc(-100% + 3px));
	opacity: 0;
    /*clip-path: inset(0 100% 0 0); */
    transition: .1s ease-out .15s !important;
  --HoverWidth: calc(100%);
}


/* Right side tab bar fix */
#browser.tabs-right .tabbar-wrapper {
    right: 0;
}


/* Show tab bar on inactive windows when moving tabs */
#browser.tabs-left.isblurred:where(:has(div.tab-yield-space, .tab-acceptsdrop)) .tabbar-wrapper {
    clip-path: initial;
}

#browser.tabs-left.isblurred:is(:active, :focus) .tabbar-wrapper:is(:active, :focus) {
    clip-path: initial;
}

/* Show tab bar when hovering on left edge and prevent tab bar hiding when in use */
/*#browser:is(.tabs-left, .tabs-right):where(:has(.mainbar:is(:hover))) .tabbar-wrapper,*/ #browser:is(.tabs-left, .tabs-right) .tabbar-wrapper:is(:hover, :focus-within) {
	opacity: 1;
   transform: translateX(calc(0%));
    /*clip-path: inset(0 100% 0 0); */
    transition: .1s ease-out .15s !important;
  --HoverWidth: calc(100%);
}


}




/* Don't hide tab bar when using workspace selector */
#browser.tabs-left:where(:has(div.WorkspacePopup:is(:hover, :focus-within))) .tabbar-wrapper, #browser.tabs-right:where(:has(div.WorkspacePopup:is(:hover, :focus-within))) .tabbar-wrapper {
    clip-path: inset(0 -400px 0 -400px);
    transition: clip-path 0s !important;
}

#browser:not(.fullscreen) .mainbar > *,
.mainbar .window-buttongroup.on-mainbar,
.mainbar .window-buttongroup.on-mainbar > button{
    min-height: 34px !important;
	max-height: 34px !important;
	height: 34px !important;
	scale: 1 !important;
}
                    J
                    S
                    TheFlyingCelt
                    T
                                         3 Replies Last reply                     Reply Quote 4
                    • cncaps
                      C
                      cncaps
                      last edited by cncaps

                      @R0STEFAN Great job, but the background is transparent when adding these code. can you help it out?

                      alt text

                      1 Reply Last reply Reply Quote 0
                      • J
                        JediBrooker @R0STEFAN
                        last edited by

                        This post is deleted!
                        1 Reply Last reply Reply Quote 0
                        • J
                          JediBrooker @supra107
                          last edited by

                          @supra107 how can we do this with favicons showing?

                          1 Reply Last reply Reply Quote 1
                          • C
                            charlbur @barkocak
                            last edited by

                            @barkocak , thanks so much for this update, it works perfectly on my Linux and Windows 11 systems.
                            A quick question, where would you add a padding property to the script to have some padding on the left and right of the closed tab icons? It would just give a feeling of a little more space to the closed tab bar.
                            34641f65-62f6-44d7-992e-e4b5e9c44751-image.png

                            1 Reply Last reply Reply Quote 0
                            • S
                              shailantani @R0STEFAN
                              last edited by

                              @R0STEFAN Could you please try to recreate this for the right edge tabs too!
                              It works very smoothly for left edge, and would love it it could be done for the right edge too! Thanks😁

                              1 Reply Last reply Reply Quote 1
                              • TheFlyingCelt
                                T
                                TheFlyingCelt @R0STEFAN
                                last edited by

                                @R0STEFAN Hi and thanks for the time you put into this!

                                Is there any way for me to set a different (darker) color for the background of the tab labels, please? Light grey is not very readable for me. I have tried to analyze your code - although I know nothing about coding - and the only thing I managed to fix for me was the address bar that was being horizontally cut out and not visible, but I really have no idea on how to change the background color for the tabs.

                                Thanks in advance!

                                1 Reply Last reply Reply Quote 0
                                Loading More Posts
                                • Oldest to Newest
                                • Newest to Oldest
                                • Most Votes
                                Reply
                                • Reply as topic
                                Log in to reply
                                • 1
                                • 2
                                • 3
                                • 4
                                • 5
                                • 6
                                • 7
                                • 8
                                • 8 / 8
                                • First post
                                  Last post

                                Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.

                                Copyright © Vivaldi Technologies™ — All rights reserved. Privacy Policy | Code of conduct | Terms of use | Vivaldi Status