Opera GX Theme

tam710562

What?
I was quite impressed with the interface of Opera GX and tried to reproduce it on Vivaldi.

Demo

Installation
You can learn how to install here or use CSS modifications

CSS:

/*
 * Opera GX Theme
 * Written by Tam710562
 */

#browser #main,
#browser #tabs-container,
#browser .toolbar-statusbar {
  background: var(--colorBgDark);
}

#browser .bookmark-bar,
#browser .bookmark-bar button {
  background: var(--colorBgLight);
  color: var(--colorFg);
  fill: var(--colorAccentBg);
  stroke: var(--colorAccentFgFaded);
  border: unset;
}

#browser .toolbar-statusbar {
  border-top: 0;
}

#browser #tabs-container .tab-strip > .tab-position {
  width: 100%;
}

#browser #tabs-container .tab-position .tab.active,
#browser .toolbar-mainbar {
  background: var(--colorBgLight);
  color: var(--colorFg);
  fill: var(--colorFg);
}

#browser .toolbar-mainbar > .button-toolbar > button:hover,
#browser .toolbar-mainbar > .toolbar-group > .button-toolbar > button:hover,
#browser .toolbar-mainbar > .button-toolbar > button:active,
#browser .toolbar-mainbar > .toolbar-group > .button-toolbar > button:active,
#browser .bookmark-bar button:hover:not(.menubar),
#browser .bookmark-bar button.menuOpen {
  background: var(--colorAccentBgDark);
  color: var(--colorAccentFg);
  fill: var(--colorAccentFg);
}

#browser #tabs-container .tab-position .tab.active {
  background: var(--colorAccentBg);
  clip-path: polygon(6px 0%, 200% 0%, 0% 200%, 0% 6px);
}

#browser #tabs-container .tab-position .tab:not(.active) {
  color: var(--colorFg);
  border-bottom: 1px solid var(--colorAccentBg);
}

#browser.tabs-top .tab-position .tab {
  margin-right: 0px;
}

#browser.theme-dark .tab-position .tab.active .tab-header .favicon {
  filter: unset;
}

#browser.theme-dark #switch button.webviewbtn img {
  background-color: transparent;
}

#browser #tabs-container .tab-position .tab .tab-header .favicon,
#browser #tabs-container .tab-position .tab .tab-header .close {
  fill: var(--colorAccentBgFaded);
}

#browser #tabs-container .tab-position .tab .tab-header .favicon img[srcset^="/resources/"] {
  filter: invert(1) brightness(1) saturate(0) opacity(.5) drop-shadow(0px 0px 0px var(--colorAccentBgDarker)) drop-shadow(0px 0px 0px var(--colorAccentBgDarker)) drop-shadow(0px 0px 0px var(--colorAccentBgDarker));
}

#browser #tabs-container .tab-position .tab.active .tab-header {
  clip-path: polygon(7px 0%, 200% 0%, 0% 200%, 0% 7px);
  background: var(--colorBgLight);
  /*box-shadow: inset 0px 1px 0px 0px var(--colorAccentBg), inset 1px 1px 0px 0px var(--colorAccentBg), inset -1px 1px 0px 0px var(--colorAccentBg);*/
  border-top: 1px solid var(--colorAccentBg);
  border-right: 1px solid var(--colorAccentBg);
  border-left: 1px solid var(--colorAccentBg);
  padding-top: 5px;
  padding-left: 5px;
}

#browser #tabs-container .tab.active .tab-indicator.active {
  background-color: var(--colorAccentBg);
}

.vivaldi .application-icon svg path:nth-child(1) {
  fill: var(--colorAccentBg);
}
.vivaldi .application-icon svg path:nth-child(2) {
  fill: var(--colorBgDark);
}

.vivaldi .vivaldi-v,
.vivaldi .burger-icon {
  fill: var(--colorAccentBg);
}

.button-toolbar.newtab {
  position: relative;
  border-bottom: 1px solid var(--colorAccentBg);
  padding-right: 117px;
  top: -1px !important;
}

.button-toolbar.newtab:before {
  content: ' ';
  position: absolute;
  bottom: -1px;
  border-bottom: 1px solid var(--colorBgLight);
  height: 20%;
  width: 100%;
  border-bottom-left-radius: 100%;
}

.toolbar-tabbar:nth-child(2) .button-toolbar.newtab {
  padding-right: 70%;
}

.toolbar-tabbar:nth-child(3) .button-toolbar.newtab {
  padding-right: 50%;
}

.toolbar-tabbar:nth-child(4) .button-toolbar.newtab {
  padding-right: 30%;
}

.address-top .toolbar-mainbar:after {
  height: 0px;
}

#browser:not(.minimal-ui) #webview-container {
  position: relative;
  border-left: 1px solid var(--colorAccentBg);
}

#browser:not(.minimal-ui) #webview-container:before {
  content: ' ';
  position: absolute;
  left: -1px;
  border-left: 1px solid var(--colorBgDark);
  height: 100%;
  width: 1.5%;
  border-top-left-radius: 100%;
}

#browser:not(.minimal-ui) #panels-container.switcher + #webview-container:after {
  content: '';
  position: absolute;
  top: 0;
  height: 1px;
  width: 34px;
  background: var(--colorAccentBg);
}

#panels-container.left #switch {
  box-shadow: unset;
}

#panels-container:after {
  width: 0px;
}

#browser .addressfield:focus-within,
#browser .searchfield:focus-within {
  border-color: var(--colorAccentBg);
  box-shadow: unset;
}

/* #browser .toolbar-statusbar > .button-toolbar > button,
#browser .toolbar-statusbar > .page-zoom-controls, */
#switch .addwebpanel-wrapper > button,
#switch > button,
.button-toolbar.newtab,
.sync-and-trash-container > .button-toolbar > button,
#browser.win .window-buttongroup button,
#browser.win.win10 #header #titlebar .window-buttongroup button.window-close  {
  color: var(--colorAccentBgFaded);
  fill: var(--colorAccentBgFaded);
}

/* #browser .toolbar-statusbar > .page-zoom-controls .button-toolbar > button:disabled > .button-title {
  color: var(--colorAccentBgDark);
}

#browser .toolbar-statusbar > .page-zoom-controls > input[type=range] {
  background-color: var(--colorAccentBgFaded);
}

#browser .toolbar-statusbar > .page-zoom-controls > input[type=range]::-webkit-slider-thumb {
  border-color: var(--colorAccentBgFaded);
}

#browser .toolbar-statusbar > .page-zoom-controls > input[type=range]:focus::-webkit-slider-thumb {
  box-shadow: unset;
} */

.panel-group {
  border-top: 1px solid var(--colorAccentBg);
}

.button-toolbar.newtab svg path {
  d:path('M12 14H9C8.44772 14 8 13.5523 8 13V13C8 12.4477 8.44772 12 9 12H12V9C12 8.44772 12.4477 8 13 8V8C13.5523 8 14 8.44772 14 9V12H17C17.5523 12 18 12.4477 18 13V13C18 13.5523 17.5523 14 17 14H14V17C14 17.5523 13.5523 18 13 18V18C12.4477 18 12 17.5523 12 17V14Z')
}

#browser #tabs-container .resize {
  width: calc(100% - 3000px);
  height: calc(100% - 0px);
}

.window-buttongroup {
  z-index: 1;
}

#browser .UrlBar,
#browser .bookmark-bar {
  margin-left: 34px;
  border-left: 1px solid var(--colorAccentBg);
}

#browser:not(.ui-transparent-tabs).color-behind-tabs-on .tab-position .tab,
#browser:not(.ui-transparent-tabs).color-behind-tabs-on .tab-position .tab:hover:not(.active) {
  background: transparent;
}

/*-----Highlight to Accent-----*/
input[type=checkbox]:before,
input[type=checkbox]:after,
input[type=radio]:before,
input[type=radio]:focus:before,
input[type=checkbox]:focus:before,
input[type=radio]:focus:after,
input[type=checkbox]:focus:after,
input[type=radio]:active:focus:before,
input[type=checkbox]:active:focus:before,
input[type=radio]:active:focus:after,
input[type=checkbox]:active:focus:after {
  background-color: var(--colorAccentBg);
}

input[type=button][type=submit],
input[type=submit][type=submit],
input[type=color][type=submit],
.webpage-button[type=submit],
input[type=button].primary,
input[type=submit].primary,
input[type=color].primary,
.webpage-button.primary {
  color: var(--colorAccentBg);
  border: 1px solid var(--colorAccentBg);
}

input[type=range]:focus::-webkit-slider-thumb {
  border-color: var(--colorAccentBgFaded);
  box-shadow: unset;
}

select:focus {
  border-color: var(--colorAccentBg);
}

select[multiple]:focus option:checked,
select[size]:focus option:checked {
  color: var(--colorAccentFg);
  background: linear-gradient(var(--colorAccentBg), var(--colorAccentBg));
}

.multiinput .multiinput-item:focus:not([tabindex='-1']) {
  color: var(--colorAccentFg);
  fill: var(--colorAccentFg);
  background-color: var(--colorAccentBg);
}

.multiinput .multiinput-select .multiinput-option[data-selected],
.multiinput .multiinput-select .multiinput-option:hover {
  color: var(--colorHighlightFg);
  background-color: var(--colorAccentBg);
}

.vivaldi-tree .tree-row.dragoverAbove {
  box-shadow: 0 1px var(--colorAccentBgDarker) inset, 0 -1px var(--colorAccentBgDarker);
}

.vivaldi-tree .tree-row.dragoverBelow {
  box-shadow: 0 -1px var(--colorAccentBgDarker) inset, 0 1px var(--colorAccentBgDarker);
}
.vivaldi-tree .tree-row.dragover {
  color: var(--colorAccentFg);
  background-color: var(--colorAccentBgDarker);
}

.hasfocus .vivaldi-tree:focus-within .tree-row[data-selected] {
  background-color: var(--colorAccentBg);
  color: var(--colorAccentFg);
}

.selectbox.selectbox-selected .selectbox-image {
  border-color: var(--colorAccentBg);
}

.selectbox.selectbox-selected .selectbox-image:before {
  border-bottom-color: var(--colorAccentBg);
  border-right-color: var(--colorAccentBg);
}

.colorpicker .colorpicker-plot .colorpicker-plot-reticle:focus {
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px var(--colorAccentBg), 0 0 0 4px var(--colorAccentBgAlpha);
}

.button-badge {
  background-color: var(--colorAccentFg);
  color: var(--colorAccentBgDark);
}

input[type=button][type=submit]:hover:not([disabled]),
input[type=submit][type=submit]:hover:not([disabled]),
input[type=color][type=submit]:hover:not([disabled]),
.webpage-button[type=submit]:hover:not([disabled]),
input[type=button].primary:hover:not([disabled]),
input[type=submit].primary:hover:not([disabled]),
input[type=color].primary:hover:not([disabled]),
.webpage-button.primary:hover:not([disabled]) {
  color: var(--colorAccentFg);
  background: var(--colorAccentBg);
  border-color: var(--colorAccentBg);
}

button:focus:not([tabindex='-1']),
input:focus:not([tabindex='-1']),
select:focus:not([tabindex='-1']),
textarea:focus:not([tabindex='-1']),
input[type=text]:focus:not([tabindex='-1']),
input[type=search]:focus:not([tabindex='-1']),
input[type=password]:focus:not([tabindex='-1']),
input[type=email]:focus:not([tabindex='-1']),
input[type=url]:focus:not([tabindex='-1']),
input[type=number]:focus:not([tabindex='-1']),
input[type=radio]:focus:not([tabindex='-1']),
input[type=date]:focus:not([tabindex='-1']),
input[type=time]:focus:not([tabindex='-1']),
input[type=checkbox]:focus:not([tabindex='-1']),
input[type=button]:focus:not([tabindex='-1']),
input[type=submit]:focus:not([tabindex='-1']),
#notes-panel .notes-editor .editor:focus {
  border-color: var(--colorAccentBg);
  box-shadow: unset;
}

.vivaldi-settings .settings-sidebar .button-category.category-selected {
  fill: var(--colorAccentBgFaded);
  color: var(--colorAccentBgFaded);
}

.tilingtoggle .button-popup button.button-on {
  fill: var(--colorAccentBgFaded);
  color: var(--colorAccentBgFaded);
}

.active.tiled.webpageview {
  box-shadow: 0 0 0 1px var(--colorAccentBg), 0 0 0 2px var(--colorAccentBgAlpha);
}

.OmniLinkItem--Highlighted {
  color: var(--colorAccentFg);
  fill: var(--colorAccentFg);
  background-color: var(--colorAccentBg);
}

.hasfocus .quick-command-container .quick-commands .quick-command[data-selected] {
  color: var(--colorAccentFg);
  background-color: var(--colorAccentBg);
}

.quick-command-container .quick-commands .quick-command .quick-command-favicon[src^="chrome-extension://mpognobbkildjkofajifpdfhcoklimli/resources/"] {
  filter: invert(1) brightness(1) saturate(0) opacity(.5) drop-shadow(0px 0px 0px var(--colorAccentBgDarker)) drop-shadow(0px 0px 0px var(--colorAccentBgDarker)) drop-shadow(0px 0px 0px var(--colorAccentBgDarker));
}

.quick-command-container .quick-commands .quick-command[data-selected] .quick-command-favicon[src^="chrome-extension://mpognobbkildjkofajifpdfhcoklimli/resources/"] {
  filter: invert(1) brightness(1) saturate(0) opacity(.5) drop-shadow(0px 0px 0px var(--colorAccentFg)) drop-shadow(0px 0px 0px var(--colorAccentFg)) drop-shadow(0px 0px 0px var(--colorAccentFg));
}
/*-----Highlight to Accent-----*/

Theme:
This is the setting for this theme. You can use this mod to import theme

{
  "colors": {
    "accentBg": "#3a44d5",
    "baseBg": "#040213",
    "baseFg": "#cdc8c0",
    "highlightBg": "#4550f0"
  },
  "name": "Opera GX",
  "settings": {
    "accentFromPage": true,
    "accentOnWindow": false,
    "borderRadius": "1",
    "tabsTransparent": false
  },
  "version": 0.1
}

Note
Currently only tested on Windows so there may be problems on other platforms

A Former User

Another Opera mod? Looks good.

remi.flores

i'm very glad that someone did that !! I love the design of GX but no Qwant by default is a shame and all those pre install thing are just arghhhhh.

I noticed some bug on the interface :

first of all and i don't know why my top of the bar isn't working (i mean it doesn't follow the theme line around the tab the same way as your capture show ; see capture)
also this theme is not very beautiful with the bookmark bar because the bookmark bar takes the color of the accent color theme, it would be better if it was the background color theme
and your mod isn't compatible with auto-hide bookmark bar (see also the capture) : is there any way to fix this ?

Overall really great job man

PS : how do you have the calendar icon on your panel ?

tam710562

@remi-flores

@remi-flores said in Opera GX Theme:

first of all and i don't know why my top of the bar isn't working (i mean it doesn't follow the theme line around the tab the same way as your capture show ; see capture)

I don't know what happened, so I am not sure if I can fix it

@remi-flores said in Opera GX Theme:

also this theme is not very beautiful with the bookmark bar because the bookmark bar takes the color of the accent color theme, it would be better if it was the background color theme

Yes, I know this. Because I didn't use the bookmarks bar and my laziness, I didn't fix it. Will consider in the future
I am using Vivaldi Snapshot. The calendar icon has been there since the update for 2.8. It's there but nothing but an empty page
@remi-flores said in Opera GX Theme:

and your mod isn't compatible with auto-hide bookmark bar (see also the capture) : is there any way to fix this ?

You talk about this mod. I think it will be possible to fix the same way with the 2nd question, hopefully

@remi-flores said in Opera GX Theme:

PS : how do you have the calendar icon on your panel ?

I am using Vivaldi Snapshot. The calendar icon has been there since the update for 2.8. It's there but nothing but an empty page

remi.flores

I am using Vivaldi Snapshot. The calendar icon has been there since the update for 2.8. It's there but nothing but an empty page

well i am using Vivaldi snapshot 2.8.1650 too this is why i asked you about that calendar icon. Weird i don't have one

Yes, I know this. Because I didn't use the bookmarks bar and my laziness, I didn't fix it. Will consider in the future

I look forward to it !!! thanks for your job

I think i'll have to do a clean re install, for this calendar icon bug and your mod with this weird visual bug above the tab bar

EDIT : i found the visual bug above tabs : an option must be uncheck in the settings : "display tabs as thumbnail" (i don't if this is the exact option in english cause my vivaldi is in french)
anyway after a clean reinstall i don't have the calendar icon

A Former User

@remi-flores said:

anyway after a clean reinstall i don't have the calendar icon

@ruario wrote that only people who had a crash with the not-settings-backwards-compatible snapshot see this bug (but I used that version only with test profiles, so… )

tam710562

@potmeklecbohdan said in Opera GX Theme:

@ruario wrote that only people who had a crash with the not-settings-backwards-compatible snapshot see this bug (but I used that version only with test profiles, so… )

My settings are faulty. Wow, It is a good news

tam710562

Added a new update.
@remi-flores
I fixed bug 2 and bug 3.
Tried a bit with bug 1, i hope it works.

remi.flores

@tam710562
OH OH this is perfect !!!! it works really fine for now even with the bookmark auto-hide mod !

just a tiny problem wich is reaaaaly not that important : the Vivaldi windows background image doesn't work as it should be

anyway thanks bor for your work !!

mib2berlin

@tam710562
Very nice, thank you.

Cheers, mib

tam710562

@amrbashir I've updated the code. I hope it can solve your problem

ShlomiYahbes

@tam710562
Well Done !
looks great !!

embryo626

I hope you can update the code for Vivaldi 3.3

EpixyDaksh11

In the newest version, they have moved that address bar or something. Now, there's a break in the bar.

Can you fix it? It's a really good theme. Thanks!

mib2berlin

@tam710562
Hi, I am using your mod for a long time now but after latest update to snapshot Vivaldi 3.6.2165.3 the mod is broken.
The horizontal line fade out in tabs are not showing anymore.
I can make small changes to .css scripts but I have no idea what to change here.
May you can look in to if you have time?

Thanks, mib

tam710562

@EpixyDaksh11 @mib2berlin I updated the code to fix the problem.

mib2berlin

@tam710562
Thank you very much, it is working again.

Cheers, mib

mib2berlin

@tam710562
Hi, may I can ask you for help again but I get one feature of your mod not working correctly.

The fading out work vertical but not horizontal.
I try to find the setting with developer tools but cant.

Cheers, mib

tam710562

@mib2berlin I have updated the code. I hope it will help you

mib2berlin

@tam710562
Yeah, it work.
Now I will try to diff the files to get an idea what had to change.

Thank you for the high speed service, I really like the mod.

Mib