With Love ⣠⣶⣶⣶⣦⠀⠀
⠀⠀⣠⣤⣤⣄⣀⣾⣿⠟⠛⠻⢿⣷⠀
⢰⣿⡿⠛⠙⠻⣿⣿⠁⠀⠀⠀⣶⢿⡇
⢿⣿⣇⠀⠀⠀⠈⠏⠀⠀⠀ By Junaid
⠀⠻⣿⣷⣦⣤⣀⠀⠀⠀⠀⣾⡿⠃⠀
⠀⠀⠀⠀⠉⠉⠻⣿⣄⣴⣿⠟⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⣿⡿⠟⠁⠀⠀⠀⠀A custom CSS theme for Vivaldi focused on a transparent-glassy interface inspired from iOS.
This theme adds:
- Frosted glass effects across the UI
- Transparent side panels
- Glassy active tabs
- Cleaner Speed Dial navigation
- Reduced borders and separators
- A more seamless desktop aesthetic
- Transparent main bar
- Blur applied using
backdrop-filter - Removes default borders and shadows
- Transparent Speed Dial navigation
- Custom active indicator styling
- Removes unnecessary separator lines
- Fully transparent panel container
- Frosted blur effect on side panels
- Cleaner icon bar appearance
- Active tabs receive:
- Black translucent tint
- Blur effect
- Subtle top highlight
Removes:
- Default borders
- Separator lines
- Shadow clutter
- Address bar bottom line
When hovering over Speed Dial navigation, the widget folder may appear unfocused.
Cause:
- Vivaldi internally applies an "inactive" state while hovering/editing navigation components.
Fix:
- Easiest fix is to turn theme blur down to zero (Settings -> Themes -> Select Your Theme -> Editor -> Settings)
- The CSS file already gives a blur to header
The mainbar, panel and header have been tried to make as seamless as possible but the seam will be more prominent depending on what wallpaper is used
Cause:
- Probably how vivaldi samples the wallpaper, I have tried to modify the brightness and tried using background:linear-gradient{to right ...}, but vivaldi samples panel, mainbar and header blur differently so it seems impossible to find a consistent fix for all wallpapers.
.
├── vivaldi_styling.css
└── README.md
Built by Junaid
Special thanks to a very special Moo who gave me an amazing playlist to listen to while debugging this CSS file, I'd have lost my mind without your help <3