Accordion tabs modification

Sparrows

@mib2berlin
Accordion in Vivialdi doesn't have that somewhat cleaner grouping; compare the two, you'll see what I mean. It would be nice to modify Vivialdi Accordian to look like this ?

I don't know how to modify the collapsed accordion colors as well ?

luetage

@sparrows Make a new topic, describe exactly what you want to achieve and then someone might have a look at it.

Sparrows

@luetage
This is the border, around an accordion when tabs are vertical; the border looks somewhat like a gradient border. And it is this, which I want to customize ?
border

Sparrows

@guigirl Says you ?

A Former User

@sparrows Please do make a new topic for it, in order not to mix it with zillions of other mods. And upload the picture to the forum (or use a host that doesn’t block it behind login).

// Yay, a moderator was so kind to move these posts. Now your task is only to describe what you want and/or let us see the picture.

Sparrows

@potmeklecbohdan I posted two messages above.

sjudenim

@sparrows

I can't see them. Just upload your images to the forum using the right most icon in the toolbar

Sparrows

This is the border, around an accordion when tabs are vertical; the border looks somewhat like a gradient border. And it is this, which I want to customize ?

dude99

This control the outline color

:is(.tabs-left, .tabs-right) .svg-tab-stack .stack-frame {stroke: lime;}

This control the outline thickness, (can be merge with above code if u r too lazy to write extra code)

.svg-tab-stack line, .svg-tab-selection line, .svg-tab-stack rect, .svg-tab-selection rect {stroke-width: 4px;}

This control the background of accordion tabs

:is(.tabs-left, .tabs-right) .tab.tab-in-accordion:not(.active) {background: pink;}

This control the background of accordion button (add .expanded, .closed, or .active at the end for different state)

:is(.tabs-left, .tabs-right) .accordion-toggle-arrow {background: red;}

All these data can be extracted from Vivaldi with devtool, or source from C:\Users\User\AppData\Local\Vivaldi\Application\4.1.2369.21\resources\vivaldi\style\common.css file inside Vivaldi installed folder (location probably slightly different than yours).

If you want different outline/background color for each separate stack, you gotta combine CSS with JS, cuz the CSS hierarchy for accordion tabs are not designed with this in mind. I didn't test these code, I just dig 'em up cuz I'm curious of how accordion tabs CSS code works. IMHO it's a big mess & poorly designed... cuz it's very confusing to work with. LOL

Sparrows

@dude99 You were able to get devTools to inspect tab styles, how ?

luetage

@sparrows https://forum.vivaldi.net/topic/16684/inspecting-the-vivaldi-ui-with-devtools

barbudo2005

@Sparrows

Something like this?

Sparrows

@barbudo2005 said in Accordion tabs modification:

@Sparrows

Something like this?

No.

Sparrows

@dude99 said in Accordion tabs modification:

This control the outline color
:is(.tabs-left, .tabs-right) .svg-tab-stack .stack-frame {stroke: lime;}
This control the outline thickness, (can be merge with above code if u r too lazy to write extra code)
.svg-tab-stack line, .svg-tab-selection line, .svg-tab-stack rect, .svg-tab-selection rect {stroke-width: 4px;}
This control the background of accordion tabs
:is(.tabs-left, .tabs-right) .tab.tab-in-accordion:not(.active) {background: pink;}
This control the background of accordion button (add .expanded, .closed, or .active at the end for different state)
:is(.tabs-left, .tabs-right) .accordion-toggle-arrow {background: red;}
All these data can be extracted from Vivaldi with devtool, or source from C:\Users\User\AppData\Local\Vivaldi\Application\4.1.2369.21\resources\vivaldi\style\common.css file inside Vivaldi installed folder (location probably slightly different than yours).

If you want different outline/background color for each separate stack, you gotta combine CSS with JS, cuz the CSS hierarchy for accordion tabs are not designed with this in mind. I didn't test these code, I just dig 'em up cuz I'm curious of how accordion tabs CSS code works. IMHO it's a big mess & poorly designed... cuz it's very confusing to work with. LOL

It is this style, which I want to change; ```
#browser .tab-position .tab.active

Sparrows

Is it possible to have the accordion collapsible arrow instead of below; rather to the left ?

guigirl

One of the things i dislike about Accordion-mode [apart, ofc, from its lack of nesting; duh!] is its unfortunate profligacy wrt vertical space waste for vertical tabs. Put simply, there's just excessive vertical space separating each tab, which severely limits the maximum number of tabs that fit in the tabstrip before the overflow scrollbar appears.

I've looked through /opt/vivaldi-snapshot/resources/vivaldi/style/common.css & located each mention of accordion, then tried to understand each of those containing some reference to height, eg:

.tabs-top .tab-accordion.active .svg-tab-stack,
.tabs-top .tab-in-accordion.tab-first-in-group .svg-tab-stack,
.tabs-bottom .tab-accordion.active .svg-tab-stack,
.tabs-bottom .tab-in-accordion.tab-first-in-group .svg-tab-stack {
  height: calc(100% + 6px);
}

There's simply heaps of them, but i lack the understanding of whether any of them pertain to my objective. Can anyone pls advise?

Note: I'm not proposing actually modifying this file; this was merely my investigative starting point.

Accordion tabs modification

Sorry, I'm currently hiatus from updating any of my CSS mod until further notice...