Beautify your pre-loading (white)screen CSS mod

[dude99]

Previously, I introduced a fix for the annoying preloading whitescreen before Vivaldi "kinda" fixed it... Now, I will teach you how make it pretty to stare at while waiting for the very slow webpage from loading... or maybe you simply want to hide the ugly stuff happening behind the scene! LOL

Screenshots

Dark theme

Light theme

CSS Code

#browser:not(:has(.startpage)), .webpageview.active.visible:not(.internal) .webpage {background: repeating-conic-gradient( var(--colorBorder) 0deg  90deg, var(--colorBorderIntense) 0 180deg) 0 0/ 1.78vmax 1.78vmax !important;}

Basically, you can replace the boring var(--colorBg) background with something more exotic, especially during light theme, the default background color might be still too bright to your liking. You can change the pattern by playing with the 1.78vmax value & colors, or use other formula like linear-gradient or radial-gradient to create interesting patterns. You can also pick theme related colors from: vivaldi://themecolors/

---

Inspirational Sources

https://projects.verou.me/css3patterns/ (just pick a pattern, change it's colors & copy-paste to replace my code)
https://24ways.org/2011/css3-patterns-explained
https://css-tricks.com/a-complete-guide-to-css-gradients/
https://css-tricks.com/creative-background-patterns-using-gradients-css-shapes-and-even-emojis/
https://www.w3.org/TR/SVG11/pservers.html
https://duckduckgo.com/?q=patterns+linear+radial+conic+gradient&ia=web

Let your inner creativity flow & feel free to share your CSS pattern over here!

[stardepp]

[dude99]

@stardepp u can also try other pattern here: https://projects.verou.me/css3patterns/

[stardepp]

@dude99 said in Beautify your pre-loading (white)screen CSS mod:

@stardepp u can also try other pattern here: https://projects.verou.me/css3patterns/

Thanks for this tip, there are beautiful designs among them

[dude99]

@stardepp I'm currently using this custom made V logo:

.webpageview.active.visible:not(.internal) .webpage {background-color: var(--colorAccentBgDarker); background-size: 49px; background-position: center; background-blend-mode: soft-light;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><g fill="rgb(0 0 0 /33%)"><path d="M111.84 16.33c-9.05-9-22.91-9-47.84-9s-38.79 0-47.84 9S7.11 39.16 7.11 64s0 38.65 9.05 47.67 22.91 9 47.84 9 38.79 0 47.84-9 9.05-22.83 9.05-47.67 0-38.65-9.05-47.67zM94 94.09A42.54 42.54 0 1 1 94 34a42.68 42.68 0 0 1 0 60.09z"/><path d="M84 42.89a7.07 7.07 0 0 0-4.88 10.28 11.84 11.84 0 0 1 1.2 5.28c0 .24-.06.7-.11 1.16a11.34 11.34 0 0 1-11.92 10.08A11.13 11.13 0 0 1 59 63.94c-1.45-2.42-2.84-4.89-4.26-7.34-2-3.4-3.91-6.81-5.89-10.19a6.79 6.79 0 0 0-6.51-3.65 7.06 7.06 0 0 0-5.76 10.7q4 7 8.05 14c4.42 7.65 8.81 15.32 13.26 23a6.72 6.72 0 0 0 6.67 3.53 7 7 0 0 0 5.8-3.82q10.49-18.36 21.05-36.62a7.36 7.36 0 0 0 1-4.77A7.08 7.08 0 0 0 84 42.89z"/></g></svg>');}

u can have up to 2 different pattern base on dark/light theme, just add .theme-dark or .theme-light in front of the code to add another pattern. Then setup schedule to change between light/dark theme.

[stardepp]

How do you like it?:

[stardepp]

@dude99 said in Beautify your pre-loading (white)screen CSS mod:

@stardepp I'm currently using this custom made V logo:

.webpageview.active.visible:not(.internal) .webpage {background-color: var(--colorAccentBgDarker); background-size: 49px; background-position: center; background-blend-mode: soft-light;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><g fill="rgb(0 0 0 /33%)"><path d="M111.84 16.33c-9.05-9-22.91-9-47.84-9s-38.79 0-47.84 9S7.11 39.16 7.11 64s0 38.65 9.05 47.67 22.91 9 47.84 9 38.79 0 47.84-9 9.05-22.83 9.05-47.67 0-38.65-9.05-47.67zM94 94.09A42.54 42.54 0 1 1 94 34a42.68 42.68 0 0 1 0 60.09z"/><path d="M84 42.89a7.07 7.07 0 0 0-4.88 10.28 11.84 11.84 0 0 1 1.2 5.28c0 .24-.06.7-.11 1.16a11.34 11.34 0 0 1-11.92 10.08A11.13 11.13 0 0 1 59 63.94c-1.45-2.42-2.84-4.89-4.26-7.34-2-3.4-3.91-6.81-5.89-10.19a6.79 6.79 0 0 0-6.51-3.65 7.06 7.06 0 0 0-5.76 10.7q4 7 8.05 14c4.42 7.65 8.81 15.32 13.26 23a6.72 6.72 0 0 0 6.67 3.53 7 7 0 0 0 5.8-3.82q10.49-18.36 21.05-36.62a7.36 7.36 0 0 0 1-4.77A7.08 7.08 0 0 0 84 42.89z"/></g></svg>');}

u can have up to 2 different pattern base on dark/light theme, just add .theme-dark or .theme-light in front of the code to add another pattern. Then setup schedule to change between light/dark theme.

@dude99 Where exactly and how do I install this code?

[dude99]

@stardepp The same as OP code, & if you want to use both then choose one for light theme & the other for dark theme as explained in the post.

example, I add it to light theme with this:

.theme-light .webpageview.active.visible:not(.internal) .webpage {
background-color: var(--colorAccentBgDarker); background-size: 49px; background-position: center; background-blend-mode: soft-light;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><g fill="rgb(0 0 0 /33%)"><path d="M111.84 16.33c-9.05-9-22.91-9-47.84-9s-38.79 0-47.84 9S7.11 39.16 7.11 64s0 38.65 9.05 47.67 22.91 9 47.84 9 38.79 0 47.84-9 9.05-22.83 9.05-47.67 0-38.65-9.05-47.67zM94 94.09A42.54 42.54 0 1 1 94 34a42.68 42.68 0 0 1 0 60.09z"/><path d="M84 42.89a7.07 7.07 0 0 0-4.88 10.28 11.84 11.84 0 0 1 1.2 5.28c0 .24-.06.7-.11 1.16a11.34 11.34 0 0 1-11.92 10.08A11.13 11.13 0 0 1 59 63.94c-1.45-2.42-2.84-4.89-4.26-7.34-2-3.4-3.91-6.81-5.89-10.19a6.79 6.79 0 0 0-6.51-3.65 7.06 7.06 0 0 0-5.76 10.7q4 7 8.05 14c4.42 7.65 8.81 15.32 13.26 23a6.72 6.72 0 0 0 6.67 3.53 7 7 0 0 0 5.8-3.82q10.49-18.36 21.05-36.62a7.36 7.36 0 0 0 1-4.77A7.08 7.08 0 0 0 84 42.89z"/></g></svg>');} 

Then, dark theme will have squares & light theme will have V logos.

[stardepp]

@dude99 I have inserted it like this:

But the Vivaldi logo at the start of Vivaldi does not change yet, what did I do wrong?

[dude99]

@stardepp it doesn't alter the big gray logo, it replace the pre-loading screen during light theme. So you will have to switch to light theme to see it's effect.

[stardepp]

@dude99 said in Beautify your pre-loading (white)screen CSS mod:

@stardepp it doesn't alter the big gray logo, it replace the pre-loading screen during light theme. So you will have to switch to light theme to see it's effect.

Hello @dude99,

I'm very interested in your custom V-Logo, but I'm still a beginner in Vivaldi modifications. Friendly asked: Could you program me a ready .css modification for your custom V-Logo?

[dude99]

@stardepp This is how it looks like in different theme:

/* dark theme preloading squares  */
.theme-dark .webpageview.active.visible:not(.internal) .webpage {background: repeating-conic-gradient( var(--colorBorder) 0deg  90deg, var(--colorBorderIntense) 0 180deg) 0 0/ 1.78vmax 1.78vmax !important;}

/* light theme preloading v logo */
.theme-light .webpageview.active.visible:not(.internal) .webpage {
background-color: var(--colorAccentBgDarker); background-size: 49px; background-position: center; background-blend-mode: soft-light;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><g fill="rgb(0 0 0 /33%)"><path d="M111.84 16.33c-9.05-9-22.91-9-47.84-9s-38.79 0-47.84 9S7.11 39.16 7.11 64s0 38.65 9.05 47.67 22.91 9 47.84 9 38.79 0 47.84-9 9.05-22.83 9.05-47.67 0-38.65-9.05-47.67zM94 94.09A42.54 42.54 0 1 1 94 34a42.68 42.68 0 0 1 0 60.09z"/><path d="M84 42.89a7.07 7.07 0 0 0-4.88 10.28 11.84 11.84 0 0 1 1.2 5.28c0 .24-.06.7-.11 1.16a11.34 11.34 0 0 1-11.92 10.08A11.13 11.13 0 0 1 59 63.94c-1.45-2.42-2.84-4.89-4.26-7.34-2-3.4-3.91-6.81-5.89-10.19a6.79 6.79 0 0 0-6.51-3.65 7.06 7.06 0 0 0-5.76 10.7q4 7 8.05 14c4.42 7.65 8.81 15.32 13.26 23a6.72 6.72 0 0 0 6.67 3.53 7 7 0 0 0 5.8-3.82q10.49-18.36 21.05-36.62a7.36 7.36 0 0 0 1-4.77A7.08 7.08 0 0 0 84 42.89z"/></g></svg>');}

Again, you can switch the dark/light theme pattern around via .theme-light & .theme-dark in the beginning of each line of code.

[stardepp]

@dude99 Thanks for your effort, you are a .css modifications master

[dude99]

@stardepp Nah... Im just a script kitty. LOL

There are much about CSS I still don't know of, especially the newer features... Im falling behind a lot lately, but too lazy to get back into learning new stuff.

[Swashbuckler]

Is there an alternative or update to this code? It works but half of the time I still see the white screen.

[dude99]

@Swashbuckler Sorry, i can't fix this CSS mod, cuz I don't have access to latest build.

[Zalex108]

@Swashbuckler

Hi,
Try the Switch

[Swashbuckler]

@Zalex108 unfortunately that is old guide, vivaldi now ignores chrome dark mode flag, and I can't use "dark mode for websites" setting cause it looks very bad compared to dark reader addon.

[Zalex108]

@Swashbuckler

The link points to the Menu option using a Switch, not related to the Flag.
Look for Menu

[Swashbuckler]

@Zalex108
i did try "--force-dark-mode" launch option, it also did nothing to the white screen.