v3.8 Semi-transparent Vertical Tabbar temporary fix
-
Not sure if they didn't finish the transparency function for vertical tabbar yet, or simply doesn't care... Anyway, here are my temporary fix for semi-transparent vertical tabbar until Vivaldi dev fix this officially.
Step 1: Responsive transparency base background color
Currently, the transparent base background color aren't affect by the theme color palette, & to be honest it look kinda bad in most website. Then, it doesn't respond to Themes > Color > Opacity setting either. This code will kinda fix that:
#browser.transparent-tabbar #tabs-tabbar-container.left, #browser.transparent-tabbar #tabs-tabbar-container.right { background-color: var(--colorBgAlphaBlur) !important;}
Step 2: Accent colors
Next, accent color for transparent tabbar are completely missing in v3.8?! This code restore this function, it's not perfect solution but I think this is what it will look like if implemented. Optionally, you can combined below hack with above code to add website accent colors back into tabbar, or use 'em separately (for more glassy feel), whichever you feel better for your setup.
#browser.transparent-tabbar.color-behind-tabs-on #tabs-tabbar-container.left, #browser.transparent-tabbar.color-behind-tabs-on #tabs-tabbar-container.right {background-image: linear-gradient(var(--colorAccentBgAlpha), var(--colorAccentBgAlpha));}
That's all. It seems vertical tabbar is always getting the shorter end of the stick, & vertical tabbar related problems are snowballing as more features added into Vivaldi, this is really sad for vertical tabbar users.
-
Update: version 2, more vibrant translucent Accent colors
#browser.transparent-tabbar:not(.color-behind-tabs-on) #tabs-tabbar-container.left, #browser.transparent-tabbar:not(.color-behind-tabs-on) #tabs-tabbar-container.right {background-color: var(--colorBgAlphaBlur) !important;} #browser.transparent-tabbar.color-behind-tabs-on #tabs-tabbar-container.left, #browser.transparent-tabbar.color-behind-tabs-on #tabs-tabbar-container.right {background-color: var(--colorAccentBgAlphaHeavy) !important; background-image: linear-gradient(var(--colorAccentBgAlpha), var(--colorAccentBgAlpha));} #browser.transparent-tabbar.color-behind-tabs-on.theme-light #tabs-tabbar-container.left, #browser.transparent-tabbar.color-behind-tabs-on.theme-light #tabs-tabbar-container.right {backdrop-filter: contrast(0.5) var(--backgroundBlur);}
The flaw of version 2 is
Dark theme will look kinda washed out in dark theme website; so use the 1st version if you use Dark theme with this specific setup.NOTE: accent colors aren't responsive to opacity setting, cuz there are no responsive opacity setting for accent color.
There are no unique CSS selector for Accent Color from Active Page option, so there are no way to made exclusive CSS mod for this setup.
-
update: patch to reverse poor contrast from default inverted title color of transparent tabbar. Add this to above codes, it should also fix the dark theme problem too.
.transparent-tabbar.color-behind-tabs-off #tabs-tabbar-container:is(.left, .right) .tab-position:not(:hover) .tab:not(.active) {color: var(--colorFg);} .transparent-tabbar.color-behind-tabs-on.acc-light.ui-transparent-tabs #tabs-tabbar-container:is(.left, .right) .tab-position:not(:hover) .tab:not(.active) {color: var(--colorFg);} .transparent-tabbar.color-behind-tabs-on.acc-light.ui-transparent-tabs.theme-dark #tabs-tabbar-container:is(.left, .right) .tab-position:not(:hover) .tab:not(.active) {color: var(--colorBgIntenser);}
-
Last Update? Probably, this is the final version I come up with within 24hours of marathon coding...-
Super ultra vibrant transparent accent colors, although you can't change it's opacity via settings, it will looks brilliant in most situation.
-
Add option to sharpen the tabs title with accent color, enabled by default.
-
Add optional dimmed transparent accent background color for dark theme, for night time when you don't want flashy vibrant accent colors burning your eyes out.
-
Restore the opaque transparent light theme (version 1) as option, I call it Responsive Pastel Light Theme.
V3 Code
Don't combine below code with above one, they aren't compatible...
/* vibrant transparent tabbar */ .transparent-tabbar.color-behind-tabs-off #tabs-tabbar-container:is(.left, .right) {background-color: var(--colorBgAlphaBlur) !important; color: currentColor;} .transparent-tabbar.color-behind-tabs-on #tabs-tabbar-container:is(.left, .right) {background-image: linear-gradient(var(--colorAccentBgAlpha), var(--colorAccentBgAlpha)), linear-gradient(var(--colorAccentBgAlpha), var(--colorAccentBgAlpha)), linear-gradient(var(--colorAccentBgAlpha), var(--colorAccentBgAlpha)); background-blend-mode: color-burn; color: currentColor;} /* optional: enhanced tabs' title contrast */ .transparent-tabbar.color-behind-tabs-on.acc-light #tabs-tabbar-container:is(.left, .right) .tab-position:not(:hover) .tab:not(.active) {text-shadow: 0 0, 0 0 1px var(--colorAccentBgFadedMost), 0 0 3px var(--colorAccentBgFadedMost);} .transparent-tabbar.color-behind-tabs-on.acc-dark #tabs-tabbar-container:is(.left, .right) .tab-position:not(:hover) .tab:not(.active) {text-shadow: 0 0, 0 0 1px var(--colorAccentBgDarker), 0 0 3px var(--colorAccentBgDarker);} /* option: dimmed transparent dark theme */ /.transparent-tabbar.color-behind-tabs-on.theme-dark #tabs-tabbar-container:is(.left, .right) {background-blend-mode: difference;} /* responsive pastel transparent light theme */ /.transparent-tabbar.color-behind-tabs-on.theme-light #tabs-tabbar-container:is(.left, .right) {background-image: linear-gradient(var(--colorAccentBgAlpha), var(--colorAccentBgAlpha)), linear-gradient(var(--colorAccentBgAlpha), var(--colorAccentBgAlpha)), linear-gradient(var(--colorBgAlphaBlur), var(--colorBgAlphaBlur)) !important;} /.transparent-tabbar.color-behind-tabs-on.theme-light #tabs-tabbar-container:is(.left, .right) .tab-position:not(:hover) .tab:not(.active) {color: var(--colorFg) !important; text-shadow: 0 0 !important;}
Changing Opacity
If you want to reduce the opacity of transparent accent color, you can replace proper pair of
var(--colorAccentBgAlpha)
withvar(--colorAccentBgAlphaHeavy)
in line 3. Don't recommended if you don't understand CSS.
Dear Vivaldi Developer
Im not sure why u need to fuss with the default theme tabs' title color in transparent mode, I have to search all over the place just to find a hack to reverse the text color for transparent mode. As you can see in the ss, they can work together beautifully! /rant
Anyway, it's night time, I'm going to sleep now... -