Window background across the whole window
-
@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.]