Colored border tab
-
How i can made this on Vivaldi by css?
--
ModEdit: Image Fix
-
@royelon Try
#tabs-container .tab-position .tab {border: 1px groove var(--colorHighlightBgDark);}
-
& for Active Tab Only | Stack
Thx to @Hadden89
I just picked the.tab.active
from another Mod./* ---------------------------------------------------------------- HTML | CSS | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Description: Colourize Tab Border | https://forum.vivaldi.net/post/727303 Filename: Version: Date: 2024-01-21 00:00:00 Author: Hadden89 + Zalex108 (Just the .tab.active) Topic: https://forum.vivaldi.net/topic/94466/colored-border-tab/ ----------------------------------------------------------------- */ #tabs-container .tab-position .tab.active {border: 1px groove var(--colorHighlightBgDark);}
It's possible to mark just the Active tab on the Stack too?
With.tab.active
marks just Tab or Parent Stack -
Hi,
Just made a very small Modifications on that
border position and pixel size + Active TabStill needs some revision for Stacked Tabs
Hadden89's Original
#tabs-container .tab-position .tab {border: 1px groove var(--colorHighlightBgDark);}
--
Modifications || They would already exist in the forum
- Top | border-top
#tabs-container .tab.active {border-top: 3px groove var(--colorHighlightBgDark);}
- Bottom | border-bottom
#tabs-container .tab.active {border-bottom: 3px groove var(--colorHighlightBgDark);}
- Left | border-left
#tabs-container .tab.active {border-left: 3px groove var(--colorHighlightBgDark);}
I put this here since related with the original.
-
@Zalex108 said in Colored border tab:
Still needs some revision for Stacked Tabs
#tabs-subcontainer
#tabs-subcontainer .tab-position .tab.active {border-top: 3px groove var(--colorHighlightBgDark);}
/* ---------------------------------------------------------------- HTML | CSS | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Description: Colourize Tab Border | https://forum.vivaldi.net/post/727303 Filename: Version: Date: 2024-02-17 00:00:00 Author: Hadden89 + Zalex108 (.tab.active + position + Stacks) Topic: https://forum.vivaldi.net/topic/94466/colored-border-tab/ ----------------------------------------------------------------- */ /* Original | #tabs-container .tab-position .tab.active {border-bottom: 1px groove var(--colorHighlightBgDark);} */ #tabs-container .tab-position .tab.active {border-top: 3px groove var(--colorHighlightBgDark);} #tabs-subcontainer .tab-position .tab.active {border-top: 3px groove var(--colorHighlightBgDark);}
Could be a better way to link it instead of using 2 lines, each one per bar
-
-
Yes,
Maybe is already around there https://lonmcgregor.github.io/VivaldiFeatureRequests/#tag=&req=Themes&minscore=0&tagsEnabled=Or could add if you like.
At the moment,
Your Codes are very nice for me -
Colourful borders