Window background across the whole window
-
@nomadic Thank you! This is really a horribly ugly fix. I suspect the reason the mod doesn't work in private windows after the update to v3.3 is related to the bug that Window Background Image does not work for private windows. I received a reply from the developers that they're aware of the bug and working on it - hopefully fixing that bug makes this mod work again (at least with a less ugly fix).
-
@nomadic Thank you. It doesn't work right when I switch to my mail view, though. (I would provide screenshots of that, but I don't want to go through the bother of blurring my personal email.) I'm thinking the navigation bar or 'URLbar' in the mail view has a different name. Anyway, here's what the regular browser view looks with your modifications using native window decorations and without:
As you can see, the menubar and the extensions toolbar are not translucent like the Switch bar. If I were to display the tab bar as it is below, would it be possible to omit the page title from the title bar?
-
@nomadic I was able to fix the issue with the mail view, by the way, by adding '.toolbar-mailbar' to the left of '.UrlBar' (and I figured out how to hide the pagetitle from the topbar).
-
@nomadic By the way, I'd also like the bookmark bar to match the Switch bar. How would I do that?
-
@DarylO Ok, I tried to match your setup as close as possible other than the theme.
I chose this background for testing because it has lots of contrast across its entire area, so it is easy to see if the mod is working. You might need to choose a similar image to help diagnose issues.
Expand for screenshot
I added the acrylic style to the side panel and removed some borders, look at comments for details:
Expand for CSS
#tabs-container, .toolbar, .inner, #main, .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 { background: transparent !important; } .tab.active, .UrlBar, #switch, #footer, .vivaldi-settings, .vivaldi-settings .settings-sidebar, .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; } .panel-group:after { content: ""; width: 100%; height: 100%; background-color: var(--colorBgAlpha); backdrop-filter: brightness(1.1) blur(11px); z-index: 0; position: absolute; } .panel-collapse-guard { z-index: 1; }
And here are the theme settings I used for this CSS:
Accent Color from Active Page
Apply Accent Color to Window ← Might want to turn off for clearer view of background
Transparent TabsAnd Native Window is off
Use Native Window
@DarylO said:
(and I figured out how to hide the pagetitle from the topbar)
Just in case others want this too, this is the CSS:
/* Remove page title for horizontal menu */ .topmenu .horizontal-menu-pagetitle { display: none; }
-
@nomadic Thank you! I applied your changes, but the extensions toolbar is still not translucent (I'm talking about the drawer that pulls out). Also, the window buttons for the Settings window are no longer visible. As for the side panel, I'd prefer that it not match the Switch bar exactly. Would it be possible to adapt that script to keep the panel white but just faintly transparent?
-
By the way, I've also made the following changes to my custom .css:
.bookmark-bar { font-size: 13px; }
The above restores the font size of the bookmarks. The script below modifies the pagetitle text but leaves in the display script in case I were to want to change it to 'none' at a later date.
.topmenu .horizontal-menu-pagetitle { display: flex; margin-top: 0px; font-size: 13px; font-weight: 600; }
This script tightens the padding between the menu items:
.menubar button { padding: 3px 6px; }
The following removes the unsightly column lines in certain mailviews in Linux:
.sortselector .SlideBar--FullHeight.alternate { background-color: transparent !important; }
And lastly, the following script modification adjusts the fonts in the email list more to my liking. Now, if I could only add Gravatars, it would be perfect!
.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 said in Window background across the whole window:
the extensions toolbar is still not translucent (I'm talking about the drawer that pulls out)
Just add
.ExtensionIcon--Hidden
to the selector for thebackground: transparent
chunk of CSS.Also, the window buttons for the Settings window are no longer visible.
This is really going to depend on your theme. I prefer to have settings open in a tab rather than a popup window. This can be found in:
Settings
→Appearance
→Window Appearance
→Open Settings in a Tab
. This also has the benefit of being translucent and showing the background image behind settings with this mod.If you still want the windowed settings, you could change their color with this:
.tabless .window-buttongroup { --colorFg: black; }
As for the side panel, I'd prefer that it not match the Switch bar exactly. Would it be possible to adapt that script to keep the panel white but just faintly transparent?
The acrylic effect was supposed to serve this purpose by blurring the background slightly. You could increase the
blur()
orbrightness()
value or hard code a color with an alpha value with a transparency of your choosing. This is too dependent on different themes, so you will have to create this one on your own.Just hard code it to a color value like
rgba(255, 255, 255, 0.7);
rather than using a CSS variable.
As @LonM alluded to in the first post of this thread, it is sort of hard to make a polished version of this mod that will work with all settings and themes, so it requires some amount of tweaking for each particular instance.
For this reason, I suggest you familiarize yourself with inspecting the UI (if you aren't already aware, seems you might be), so you can make the tweaks that are necessary for your setup.
Some good resources for CSS are:
I normally just use my search engine of choice and type something like "
css blur
" and click on the relevant result from those 2 sources. It isn't worth trying to memorize all CSS properties when you can quickly find reference documentation.Hopefully this helps you tweak this mod to your liking
-
@nomadic Sad about selector removal. Wouldn't be better to have a js mod to have it back like the one for toolbar buttons?
-
@nomadic Thanks, but the .tabless script you had given me didn't work. I've tried to move it around and I've also tried 'white', but it doesn't do anything. I have a translucent extension toolbar now, though! I'll look into the CSS for the panel, but I want to adjust the transparency, not the blur.
-
@nomadic Thanks for the tip about the CSS. I've modified the script for the panel to my liking:
.panel-group:after { content: ""; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); backdrop-filter: brightness(1.1) blur(5px); z-index: 0; position: absolute; }
I'd like to have this match the active button background on the Switch, however, and I'm not sure how I would do that. Would you happen to know? Also, how is the menu panel in Vivaldi Settings configured? I couldn't figure out how to duplicate that appearance in the panel, for instance. The settings-sidebar appears to have the same configuration as the Switch, but it looks different, and I don't understand why. Thanks!
-
@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; }