Vivaldi GX Revisited (Updated Opera GX Mod)

nomadic

What?

Back in 2019, @gabevilela created a mod to make Vivaldi look similar to the browser Opera GX with help from @tam710562. It was a widely appreciated mod, but it hasn't been updated since 2021. This is modified version of that original mod, to bring it up to date with the current Vivaldi version
Original mod: https://forum.vivaldi.net/topic/39965/opera-gx-mod
Thanks to @beyxnd for testing this mod through development and helping out with finding bugs and making suggestions
There is a high likelihood that there could still be some bugs in this mod. Feel free to mention them here, as well as make suggestions for how you think this mod could be improved. Thanks

Demo

Installation

Enable CSS modifications (You need to do this only once)
Go in vivaldi://experiments and check Allow for using CSS modifications
Download the mod
On the mod GitHub page, click on Releases, select a version and download the specified ZIP
Extract the Mod folder to anywhere safe on your PC, like the Documents folder
Open Vivaldi Settings → Appearance and in Custom UI Modifications, select the downloaded Mod folder
Restart Vivaldi (you can easily do this by going in vivaldi://restart)

Configuration Options

You can find all the CSS variables for configuring this mod in the vars.css and modSettings.css files. Further instructions about their usage can be found in the README on GitHub here: https://github.com/ortiza5/Vivaldi-GX#configuration
This mod also has companion themes to make imitating Opera GX easier:
- Authentic Opera GX theme for those who like the classic GX look
  - Made by - @beyxnd
  - Link for regular windows - https://themes.vivaldi.net/themes/rwjvEVGpJAL
  - Link for private windows - https://themes.vivaldi.net/themes/NOb71q9371g
  - Preview -
    
    Regular Private
- GX inspired, but with transparency
  - Made by - @nomadic
  - Link - https://themes.vivaldi.net/themes/1LVJ2Z9xJx9
  - Preview -
    
    Regular Private

CSS

The current version can be found here: https://github.com/ortiza5/Vivaldi-GX/releases/

Edits

*(August 7th, 2023) - Initial Release of v2.0

VestalT

Looks Good!

Pathduck

@nomadic Looks great!

Although a bit dark and low contrast for my eyes. I guess the text/icon contrast can be personalised in the theme settings though.

On a geekout note - love the use of CSS imports to split things into subfolders - clever!

Themes like this really shows how we desperately need theming for menus/context-menus/dropdowns, even with a dark OS theme they just look out of place with this theme.

nomadic

@Pathduck @VestalT Thanks!

@Pathduck said in Vivaldi GX Revisited (Updated Opera GX Mod):

a bit dark and low contrast

Sort of comes with the style of Opera GX. I did make the icons thinner, so that definitely doesn't help. Theme settings can definitely improve it if you aren't trying to match the GX style too closely.

love the use of CSS imports to split things into subfolders

Yeah, I really like that too, so much so that I reorganized my CSS to follow the same structure. Can't take credit for the idea though, that goes to @gabevilela.

sjudenim

Unless things have changed, using @import in style sheets is kind of frowned upon since it increases load times.

CSS @import is notorious for loading every single imported file separately instead of paralleled. In other words, the browser of the visitor has to wait for every imported file to load instead of being able to load all your CSS files at once. This can heavily slow down your website, depending on the amount of CSS files you import. Also, when you use @import to include extra CSS files it creates extra HTTP requests, extra requests for the browser of your visitor to deal with.

If, on the other hand, both stylesheets are referenced in <link> elements in the main HTML page, both can be downloaded at the same time. If both stylesheets are always loaded together, it can also be helpful to simply combine them into a single file.
There are occasionally situations where @import is appropriate, but they are generally the exception, not the rule.

I generally have all my mods on separate files to write and organize but use a single file to load them into the browser, same as Vivaldi's own style sheet (which also use to be minified).

nomadic

@sjudenim I think that mostly is relevant in context of a webpage and CSS being loaded across the internet. With all the files locally on your machine, I don't think any difference in window startup times is noticeable.

And there isn't even a way to avoid imports entirely with custom CSS, as all CSS files in the Custom UI Modifications folder are added to the UI with imports:

ybjrepnfr

being comprehensibly clueless about Opera GX, it's hard for me to grasp the objective of this mod, hence these questions might be silly.

is this essentially "just" another custom theme for vivaldi, very pretty no doubt, but not more than that? or...
does it bring some actual functional changes to basic vivaldi?

sjudenim

@nomadic said in Vivaldi GX Revisited (Updated Opera GX Mod):

@sjudenim I think that mostly is relevant in context of a webpage and CSS being loaded across the internet. With all the files locally on your machine, I don't think any difference in window startup times is noticeable.

And there isn't even a way to avoid imports entirely with custom CSS, as all CSS files in the Custom UI Modifications folder are added to the UI with imports:

It certainly is more prevalent with web page experience.

But I don't think it matters where the files are located, it's just that they are loaded differently. The UI files are loaded by the html which loads them at the same time as opposed to one after another as in css

Might not be noticeable to most, but I thought I would just point that out

sjudenim

@ybjrepnfr

A theme alone would not be able to replicate all the features. You have to load the custom files to get most of the styling, the theme more or less just colours things for you (it can also change icons if included)

Ayespy

@sjudenim Still, it affects only appearance, yeah? Not functionality.

ybjrepnfr

@Ayespy thanks for correctly intuiting my meaning, phew. yes, that's my point, but i was seeking confirmation, otherwise correction & enlightenment.

i mean, if it's just another theme, then that's cool but i'm uninterested. otoh, if it changed functionality like, oh, i dunno, just reaching for something fanciful here, like provided tst, then i might know of someone who might be interested.

sjudenim

@Ayespy

It affects interaction which can be perceived as functionality. A theme and styling are not the same things though, that's what I was trying to clarify.

nomadic

@ybjrepnfr Technically any mod that uses CSS alone is purely a visual change rather than functional, but it can be argued that certain visual changes constitute functional changes. This mod is only CSS and I describe it as a reskin of Vivaldi to look like Opera GX, but it certainly changes many aspects of the browser.

Whether you determine if a CSS variable switch that allows you to change something like the color of the icons on the address bar or the width of the panel bar as a functional change is up to you.

You could probably use CSS alone to make a crude tst with some clever selectors.

ybjrepnfr

@nomadic ta. i was careful to specify in my op that i have no idea whatsoever about opera gx, by which i'd hoped to imply that i know nada of both its aesthetics and functionality. it was for that latter possibility i asked my question. for all i know maybe gx has tst, in which case any mod to v that might go some way to bringing that functionality here, where it remains sadly lacking, would have been of interest to me. anyway, now i know... still no better tabs management in v. oh well.

oh btw, in case it got lost in the wash, in no way were my posts here intended to belittle your fine work; i was simply focusing just on one point, is all.

Ayespy

@sjudenim said in Vivaldi GX Revisited (Updated Opera GX Mod):

affects interaction

Like, adds some animations or something?

sjudenim

@Ayespy

I'm not sure what your point of pursing this is and in such a patronizing way.

An animation does not change your interaction with the interface. Moving something from the left to the right or top to bottom, etc. can and yet it is technically just a styling change, which is how it differs from Vivaldi's themes.

Adding just the theme alone would not get the mod creators desired effect.

Ayespy

@sjudenim I'm trying to understand.

I don't know anything about Opera GX or why anyone would want to use a Vivaldi clone of it - what makes it attractive or desirable.

So what I'm getting is that an Opera GX user might have different muscle memory from most Vivaldi users, be accustomed to different visual cues, expect different reactions to certain mouse movement or action. Is that about right? Plus, I presume they might have acquired a taste for the aesthetic, and feel more at home with it, yes? I have seen several mentions of of Opera GX and "can Vivaldi be like..." or "...do (something) like" Opera GX? And knowing literally nothing about that UI or whether it's something that is actually functionally different from plain ol' Opera, I was curious what the draw was, and why someone would make an actual mod for it.

Not being patronizing.

ybjrepnfr

@Ayespy for the record, @sjudenim , me too. i suspect maybe those who do have both an existing awareness of gx looks / functions, AND this mod, might be struggling to understand the perspective of we who know neither.

sjudenim

@Ayespy

My misunderstanding then.

I too am not familiar with Opera Gx which is why my answer was more general and to just clarify the difference between a theme and styling as referenced by @ybjrepnfr

Adding functionality would be done with a java script file like the many examples in this sub-forum

Ayespy

@sjudenim So I looked up what Opera GX was all about. It has a UI that looks kind of like this mod, but it has functions to try to make it attractive to gamers. It has RAM and CPU limiters that the user can set (I suppose to leave resources available for gaming), built-in WhatsApp and Discord panels or something, some kind of hybrid speed dial to store downloaded online games or something, and a couple of other frills. But its main attractions appear to be its "Kewl" UI and its CPU and RAM limiters, which I don't suppose this mod could offer.