Window background across the whole window
-
@DarylO Glad you got the panel how you wanted it!
Sorry the
.tabless
selector didn't work. Did you try adding an!important
after thewhite
?If that doesn't work, what CSS classes do you see when you inspect the UI for the window controls on the settings window?
For the other tweaks, I am a bit confused what you are referring to. Could you provide some screenshots describing what you want to change?
-
@nomadic Yes, I had, and it still didn't work. I played around with the script, however, and came up with something that did work:
#browser.linux .tabless .window-buttongroup button { background-color: rgba(255, 255, 255, 0.15) !important; fill: var(--colorImageForeground, inherit); }
As for the panel button, here's a screencap showing you what I'm talking about:
I want the background of the highlighted panel button (in this case, Mail) to match with the panel. I'm also curious about how one would customise the panel to match the Settings sidebar:
According to the modified CSS, the .settings-sidebar appears to share the same customisation as the Switch, but it looks different for some reason.
-
@DarylO Thanks for the pictures, helps a lot.
The issue with using all these colors with partial transparency is that if elements stack on top of each other, the colors add up, resulting in more opaque colors. The
.settings-sidebar
and the active panel button both have this issue.Fixing Settings Sidebar:
-
Added
.vivaldi-settings
and.vivaldi-settings .settings-sidebar
to the transparent background selector. -
Removed
.vivaldi-settings
and.vivaldi-settings .settings-sidebar
from thevar(--colorBgAlpha)
background selector. -
Added
.vivaldi-settings .settings-content
to thevar(--colorBgAlpha)
background selector. -
Added this:
/* Needed to place the :after pseudo element behind sidebar*/ .vivaldi-settings .settings-sidebar { position: relative; }
-
And added onto the
.panel-group:after
selector and decreased the z-index like so (changed to match previous post where modification was made to this segment):.panel-group:after, .settings-sidebar:after { content: ""; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); backdrop-filter: brightness(1.1) blur(5px); z-index: -1; position: absolute; }
Here is the compiled changes using my version of
.panel-group:after
:Expand for CSS
#tabs-container, .toolbar, .inner, #main, .vivaldi-settings, .vivaldi-settings .settings-sidebar, .vivaldi-settings .settings-content, .startpage, .startpage .manager, .active.internal.visible.webpageview, #webview-container, .color-behind-tabs-on .tab.active .tab-indicator.active, #header, .bookmark-bar .observer, .color-behind-tabs-on .bookmark-bar button, .color-behind-tabs-off .bookmark-bar button, .ExtensionIcon--Hidden { background: transparent !important; } .tab.active, .UrlBar, #switch, #footer, .vivaldi-settings .settings-content, .startpage .manager > div, .button-toolbar:hover button, #switch button:hover, .startpage-navigation, .toolbar-statusbar, .toolbar-mailbar, .bookmark-bar { background: var(--colorBgAlpha) !important; background-color: var(--colorBgAlpha) !important; } .private-intro { background: var(--colorBgAlphaHeavy); } /* Remove border between address bar and bookmark bar */ .address-top .toolbar-mainbar:after { content: unset; } /* Remove startpage nav borders */ button.button-startpage:after { content: unset; } .startpage .startpage-navigation .startpage-navigation-group:last-of-type { border-left: unset; } /* Add "acrylic" effect to panel (slight blur) */ .panel-group { background-color: transparent; } .vivaldi-settings .settings-sidebar { position: relative; } .panel-group:after, .settings-sidebar:after { content: ""; width: 100%; height: 100%; background-color: var(--colorBgAlpha); backdrop-filter: brightness(1.1) blur(11px); z-index: -1; position: absolute; }
Fixing Active Panel Button:
This one is harder to fix...
Best you can probably do is mess with the color until it sort of looks like it matches. I don't think there is a good way to make the background color not appear only under the active button.
-
So, you would add
#switch .addwebpanel-wrapper > button.active
and#switch > button.active
to the transparent background chunk to clear out the old coloring. -
And then add this and mess with the
background-color
andbrightness()
values:#switch .addwebpanel-wrapper > button.active:after, #switch > button.active:after { content: ""; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); backdrop-filter: brightness(1.1) blur(5px); z-index: -1; position: absolute; left: 0; /* I also needed to add this to get the pseudo element to line up better, but I don't know if it is necessary for everyone */ /* top: -0.1px; */ }
I basically made
background-color
transparent and increased thebrightness()
to1.15
to try and get my colors to match.
-
-
@nomadic Thank you very much for your efforts, but these changes really messed things up, so I had to return to my configuration file from yesterday. I need to get to bed now so I can't work any more on troubleshooting this. I guess I'll just leave things as is.
-
@DarylO Did you go through and make the changes or just copy the bulk hidden CSS? Because I left the combined CSS with my styling for the panel because it is more general for other people that want to us this mod in the future.
Only difference should be the background color and blur for the settings sidebar.
Or what sort of issues did you see? It looked like your settings were in a tab, so that is what I tested. I can test the windowed settings option tomorrow.
-
@nomadic I had copied and pasted the changes and guessed on how you would add "#switch .addwebpanel-wrapper > button.active and #switch > button.active to the transparent background chunk to clear out the old coloring", but maybe I messed something up. Anyway, it didn't have the desired effect, and upon simulating a browser restart, I noticed a bunch of weird chrome extension text in the settings sidebar, too.
-
@nomadic I updated my Vivaldi installation and it broke my CSS. Might you know what changed between versions?
-
@DarylO Sorry, I don't use this, so I am not too sure what changed. What exactly is broken?
The panel toolbar lost it's transparency, so I added it back. Vivaldi might have added a blur to it also, but I don't remember if that was there before or not.
You will have to tweak the CSS to fit what you want. That is the only change I noticed.
I tested on a standalone install of
Snapshot 3.8.2238.3
.Changed from this:
.tab.active, .UrlBar, #switch, #footer, .vivaldi-settings .settings-content, .startpage .manager > div, .button-toolbar:hover button, #switch button:hover, .startpage-navigation, .toolbar-statusbar, .toolbar-mailbar, .bookmark-bar { background: var(--colorBgAlpha) !important; background-color: var(--colorBgAlpha) !important; }
To this:
.tab.active, .UrlBar, #panels-container, /* Change Here */ #footer, .vivaldi-settings .settings-content, .startpage .manager > div, .button-toolbar:hover button, #switch button:hover, .startpage-navigation, .toolbar-statusbar, .toolbar-mailbar, .bookmark-bar { background: var(--colorBgAlpha) !important; background-color: var(--colorBgAlpha) !important; }
-
@nomadic Thank you. That somewhat fixed the switch (it still doesn't look quite the same), but the mail panel no longer has the same transparency that it once had. I wish I had known to do a screencap of how the browser looked most recently. Below was my original custom.css:
* { font-family: system-ui, sans-serif !important; } #browser.linux .tabless .window-buttongroup button { margin-top: 2px; background-color: rgba(255, 255, 255, 0.15) !important; fill: var(--colorImageForeground, inherit); } #tabs-container, .toolbar, .inner, #main, .vivaldi-settings, .vivaldi-settings .settings-sidebar, .vivaldi-settings .settings-content, .startpage, .startpage .manager, .active.internal.visible.webpageview, #webview-container, .color-behind-tabs-on .tab.active .tab-indicator.active, #header, .bookmark-bar .observer, .color-behind-tabs-on .bookmark-bar button, .color-behind-tabs-off .bookmark-bar button, .ExtensionIcon--Hidden { background: transparent !important; } .tab.active, .UrlBar, #switch, #footer, .vivaldi-settings .settings-content, .startpage .manager > div, .button-toolbar:hover button, #switch button:hover, .startpage-navigation, .toolbar-statusbar, .toolbar-mailbar, .bookmark-bar { background: var(--colorBgAlpha) !important; background-color: var(--colorBgAlpha) !important; } .private-intro { background: var(--colorBgAlphaHeavy); } /* Remove border between address bar and bookmark bar */ .address-top .toolbar-mainbar:after { content: unset; } .menubar { font-size: 12px; } .bookmark-bar { font-size: 13px; } /* Remove startpage nav borders */ button.button-startpage:after { content: unset; } .startpage .startpage-navigation .startpage-navigation-group:last-of-type { border-left: unset; } /* Add "acrylic" effect to panel (slight blur) */ .panel-group { background-color: transparent; } .vivaldi-settings .settings-sidebar { position: relative; } .panel-group:after, .settings-sidebar:after { content: ""; width: 100%; height: 100%; background-color: rgba(251, 251, 251, 0.9); backdrop-filter: brightness(1.1) blur(5px); z-index: -1; position: absolute; } .topmenu .horizontal-menu-pagetitle { display: flex; margin-top: 0px; font-size: 14px; font-weight: 600; } .menubar button { padding: 3px 7px; } .sortselector .SlideBar--FullHeight.alternate { background-color: transparent !important; } .webpageview #mail_view.vertical .mail_entry { grid-row-gap: 1px !important; } .mail_entry.mail_entry.unread .subject, .mail_entry.mail_entry.unseen .subject { font-weight: 400; .mail_entry.mail_entry.unread .from, .mail_entry.mail_entry.unseen .from { font-weight: 700; }
-
@DarylO Maybe that blur is new and is what is making the
#switch
look different. It seems like this update brought some of the changes that this mod was trying to do.I didn't go through and refactor it to see what isn't needed anymore, but I might have returned the panels to their old behavior?
Give this a try
* { font-family: system-ui, sans-serif !important; } #browser.linux .tabless .window-buttongroup button { margin-top: 2px; background-color: rgba(255, 255, 255, 0.15) !important; fill: var(--colorImageForeground, inherit); } #tabs-container, .toolbar, .inner, #main, .vivaldi-settings, .vivaldi-settings .settings-sidebar, .vivaldi-settings .settings-content, .startpage, .startpage .manager, .active.internal.visible.webpageview, #webview-container, .color-behind-tabs-on .tab.active .tab-indicator.active, #header, .bookmark-bar .observer, .color-behind-tabs-on .bookmark-bar button, .color-behind-tabs-off .bookmark-bar button, .ExtensionIcon--Hidden { background: transparent !important; } .tab.active, .UrlBar, #panels-container, #footer, .vivaldi-settings .settings-content, .startpage .manager > div, .button-toolbar:hover button, #switch button:hover, .startpage-navigation, .toolbar-statusbar, .toolbar-mailbar, .bookmark-bar { background: var(--colorBgAlpha) !important; background-color: var(--colorBgAlpha) !important; } .private-intro { background: var(--colorBgAlphaHeavy); } /* Remove border between address bar and bookmark bar */ .address-top .toolbar-mainbar:after { content: unset; } .menubar { font-size: 12px; } .bookmark-bar { font-size: 13px; } /* Remove startpage nav borders */ button.button-startpage:after { content: unset; } .startpage .startpage-navigation .startpage-navigation-group:last-of-type { border-left: unset; } /* Add "acrylic" effect to panel (slight blur) */ .panel-group { background-color: transparent; } .vivaldi-settings .settings-sidebar { position: relative; } .settings-sidebar:after { content: ""; width: 100%; height: 100%; background-color: rgba(251, 251, 251, 0.9); backdrop-filter: brightness(1.1) blur(5px); z-index: -1; position: absolute; } .topmenu .horizontal-menu-pagetitle { display: flex; margin-top: 0px; font-size: 14px; font-weight: 600; } .menubar button { padding: 3px 7px; } .sortselector .SlideBar--FullHeight.alternate { background-color: transparent !important; } .webpageview #mail_view.vertical .mail_entry { grid-row-gap: 1px !important; } .mail_entry.mail_entry.unread .subject, .mail_entry.mail_entry.unseen .subject { font-weight: 400; } /* Fixed bad formatting */ .mail_entry.mail_entry.unread .from, .mail_entry.mail_entry.unseen .from { font-weight: 700; } /* Fixes for update */ .panel-group { backdrop-filter: blur(5px); } #switch { backdrop-filter: unset; box-shadow: -1px 0 var(--colorBorder) inset; }
-
Thanks. That's a lot better, but now, the panel is looking just like the switch and URL bar (whereas before the latter two weren't as transparent).
-
@DarylO You could change the
.panel-group
'sbackdrop-filter
to something like this:backdrop-filter: brightness(1.1) blur(5px);
The best solution is for you to play around with the UI inspector and make something you are happy with. I can't make the perfect version for what you want, so hopefully you can go from here and work it out.
Feel free to direct message me if you are having issues.
-
@nomadic Thanks. That didn't seem to do anything, though. I'd just like it to look like how it did before the update.
-
@DarylO Just mess with the brightness value or add a background color until it looks good.
Send me a message if you can't figure it out. I don't think these posts are going to help anyone else, so messaging is better.
-
[EDIT: Seem to have made a mistake when fixing mods that no longer work in latest stable v3.8.2259.37. Ignore previous comment.]