Arc for Vivaldi

Tiamarth

Arc for Vivaldi is a custom css file that integrates Vivaldi's UI with Arc, a popular GTK theme.

Project moved to Github (05/31/17) https://github.com/Tiamarth/Arc-for-Vivaldi

Features:

Use Arc's window buttons even when Native Window is disabled in the settings
Make tab stack indicators Arc-blue, like running application indicators
Use Arc's scrollbars
Use Arc's sidebar color even on light themes, unless using the opera panel addon
Use Arc's toolbar color for start page navigation
When the current theme is set to apply accent color to window, remove Vivaldi's header gradient.
1px border around Vivaldi that persists even when Native Window is disabled in the settings
Hide Vivaldi's built-in titlebar when GUI is hidden
When tabs are not at the top of the window, merge address bar with header
Optionally make the panel appear to merge with the Vivaldi menu icon, similar to Opera's panel
Optionally integrate with Arc Grey instead of vanilla Arc

luetage

This is a mammoth project. Can't test this on linux, but the css works well on osx too after a bit of adaption -- looking good!

Just one question, despite you implementing code for transparent buttons on panels (when not hovered or active), I still can see the hover color over a webpanel button, which has first been selected then deselected.
We actually use the same code to address this, therefore I wonder why it works on my setup, but not when I'm using yours? Also I have no idea if this is actually an issue on other platforms, but this bug is present in Vivaldi for mac ever since the early versions.

Tiamarth

@luetage

Just one question, despite you implementing code for transparent buttons on panels (when not hovered or active), I still can see the hover color over a webpanel button, which has first been selected then deselected.

Hmmm.... I can't reproduce that here. I had noticed that, if I grab a panel button and drag, I end up with a grey colour in the background [edit: but the background only remained grey for as long as I was dragging], which might have been related. I just fixed that locally by adding an important modifier to the relevant class:

.theme-dark #switch button.webviewbtn img,
#switch .webviewbtn,
#switch button {
    background: transparent !important;
}

I'll be updating the live version in a minute with this fix.

Unfortunately I don't own a Mac, so I can't test it on your platform.

If you don't mind sharing, what changes did you make in order to get it to work on Mac? Or were they less functional problems and more tweaking to meet your preference?

Edit: just pushed out the update. Also includes a fix for a bug where the wrong window buttons were used when the current theme used both dark bg and dark accent colors.

luetage

I integrated this when I did the legacy panel, and we are using the exact same code for the issue. When I tried your css I noticed you had no !important (the only difference) so I added it, but it did not change anything interestingly.
#switch .webviewbtn, #switch button, #switch .webviewbtn img {background: transparent !important;}
You can see the rest of the code in the other thread. And yeah, if you can't recreate the bug with webpanels, then the issue is probably only present on osx.

Tiamarth

@luetage It would be my guess that there are Mac-specific styles in common.css that are overriding arc.css, but in terms of Mac-specific panel styles I was only able to find .mac #panels-container.button {min-width: 6px;} and .mac #switch {-webkit-app-region: drag;}, and there's no reason they should be breaking anything.

This might be causing something to break, though if it is, I'm not sure why it isn't affecting me as well: line 175: .theme-dark #switch #switch button.active repeating instance of #switch. Regardless of whether or not it's breaking something, that's incorrect.

Another thing you could try, and I would be most appreciative if you would, is use the same panel css but with Mac-specific classes:

#browser.mac #switch,#panels-container:after {background: #353945;}

#browser.mac #panels-container:after {border-right: 1px solid rgba(0,0,0,0.35) !important;}

#browser.mac #switch button svg {fill: #d3dae3;}

#browser.mac.theme-dark #switch button svg {fill: var(--colorFg);}  /* match button svg with fg color on dark theme */

#browser.mac.theme-dark #switch button.active svg,
#browser.mac #switch button.active svg {
    fill: var(--colorFg); /* match active button svg with fg color */
}

#browser.mac #switch button.active,
#browser.mac #switch button.active:hover {
    background: #fff !important;
}

#browser.mac.theme-dark #switch button.active,
#browser.mac.theme-dark #switch button.active,
#browser.mac #switch button.active:hover {
    background-color: var(--colorBgLightIntense) !important; /* match active button bg with open panel bg on dark theme */
}

#browser.mac #switch button:hover,
#browser.mac #switch button:hover:not(:disabled):not(.active),
#browser.mac #switch button:focus:not(.active) {
    background: #3C4351 !important;
}

#browser.mac.theme-dark #switch button.webviewbtn img,
#browser.mac #switch .webviewbtn,
#browser.mac #switch button {
    background: transparent !important;
}

Again, I unfortunately can't test it because I don't own a Mac. Let me know whether or not it works. If it does, I'll implement it in the live version.

luetage

No, this doesn't change anything. Even if i put my own code (which works on my standard theme) into your css, the bug stays. Again, this is only visible on webpanels, not regular ones. As a side note, in earlier versions of Vivaldi the bug was also present on normal panels, but you only really notice it in light themes because the hover is more apparent on them. I made the hover green on your theme and made a screenshot:

Above I have selected and deselected the webpanel and am currently hovering the bookmarks panel. This issue has nothing to do with modifications, it is present on standard Vivaldi and visible on any theme. The only thing I don't understand is why the fix works in my theme and not in yours. But I guess it's not important since your theme is for Linux anyway, and on dark panels with subtle hover you can barely notice it.

Tiamarth

@luetage Eureka!

Again, this is only visible on webpanels, not regular ones.

I had never noticed this bug before, whether with or without my modifications, but with that information I was able to reproduce the bug with arc.css applied. I've modified the skin a bit locally since my last post, so I'm no longer sure which lines this would be on for you, but:

#switch button:hover,
#switch button:hover:not(:disabled):not(.active),
#switch button:focus:not(.active) {
    background: #3C4351 !important;
}

#switch button:hover obviously styles the buttons on hover, but these: #switch button:hover:not(:disabled):not(.active),#switch button:focus:not(.active) style buttons that were active but are no longer active. Why such specific styles exist I don't know, but here's the fix, along with some additional changes I made to the panel while trying to figure out what was causing your problem:

#switch {box-shadow: inset -1px 0 #353945 !important;}

#switch,#panels-container:after {background: #353945;}

#panels-container:after {border-right: 1px solid rgba(0,0,0,0.35) !important;}

#switch button svg {fill: #d3dae3;}

.theme-dark #switch button svg {fill: var(--colorFg);}  /* match button svg with fg color on dark theme */

.theme-dark #switch button.active svg,
#switch button.active svg {
    fill: var(--colorFg); /* match active button svg with fg color */
}

#switch button.active,
#switch button.active:hover {
    background: #fff !important;
}

.theme-dark #switch button.active,
.theme-dark #switch button.active,
#switch button.active:hover {
    background-color: var(--colorBgLightIntense) !important; /* match active button bg with open panel bg on dark theme */
}

#switch button:hover {background: #3C4351 !important;}

#switch button:hover:not(:disabled):not(.active),
#switch button:focus:not(.active) {
    background: transparent;
}

.theme-dark #switch button.webviewbtn img,
#switch .webviewbtn,
#switch button {
    background: transparent !important;
}

I'll update the live version with these changes in just a moment.

Edit: the update is live.

luetage

@Tiamarth Yeah, very good find. This fixes the issue on your theme. So I understand you could reproduce it, this means it is not a macOS only issue, and you can also reproduce it without any modifications to the browser at all? If so I think I will report it. This should really be fixed for everyone, especially because the fix only works if you designate your own hover color with !important. If you try to just run the fix and nothing else all hovers will be transparent.

By the way, your code from above works, but I messed around with it and this works too, it's a simplification.

#switch button:hover:not(:disabled):not(.active),
#switch button:focus:not(.active), .theme-dark #switch button.webviewbtn img {
    background: transparent;
}

instead of

#switch button:hover:not(:disabled):not(.active),
#switch button:focus:not(.active) {
    background: transparent;
}

.theme-dark #switch button.webviewbtn img,
#switch .webviewbtn,
#switch button {
    background: transparent !important;
}

Tiamarth

@luetage Thanks, that code is a lot more visually pleasing, I'll merge it. Though, just one change: it still needs the important modifier otherwise the bug I described in this post would be reintroduced. [Edit: Actually, it's reintroduced with that code either way. Here's the problem:

This .theme-dark #switch button.webviewbtn img only affects the favicons of web panels when a dark theme is being used. It makes their background transparent to remove the white box that would otherwise be behind each of them. It looks like this: #switch button:hover:not(:disabled):not(.active) is unnecessary and made redundant with the line of code that follows it. These #switch .webviewbtn, #switch button can probably be condensed into just #switch button, but, together, they affect all of the buttons on the panel. Here is what the code should be:

.theme-dark #switch button.webviewbtn img,
#switch button,
#switch button:focus:not(.active) {
    background: transparent !important;
}

/edit ]

Also, yes, I was able to reproduce it in Vivaldi with no modifications, it was necessary to do that before I was able to understand what the problem was, because as you said: it's easier to see with a light theme. It's definitely affecting multiple platforms.

Edit#2: I actually just condensed the panel css a lot in various other places as well, there were several other redundancies. Here's the updated panel css:

#switch {box-shadow: inset -1px 0 #353945 !important;}

#switch,#panels-container:after {background: #353945;}

#panels-container:after {border-right: 1px solid rgba(0,0,0,0.35) !important;}

#switch button svg {fill: #d3dae3;}

.theme-dark #switch button svg,
#switch button.active svg {
    fill: var(--colorFg); /* match button svg with fg color */
}

#switch button.active,
#switch button.active:hover {
  background-color: var(--colorBgLightIntense) !important; /* match active button bg with open panel */
}

#switch button:hover {background: #3C4351 !important;}

.theme-dark #switch button.webviewbtn img,
#switch button {
    background: transparent !important;
}

Thanks for your help in working out the kinks with this, btw.

luetage

@luetage said in Arc for Vivaldi:

#switch .webviewbtn, #switch button, #switch .webviewbtn img {background: transparent !important;}

Lol, with this we are back to the original code used in the legacy panel. I think in truth #switch button is redundant and too general, we only want to fix the webpanel buttons. Therefore

#switch .webviewbtn, .theme-dark #switch .webviewbtn img {
        background: transparent !important;
}

is sufficient. This only works with #switch .webviewbtn, but not with #switch button.webviewbtn. For the background of the image the code works with or without the additional button.

Anyway, thank you for confirming the bug, all Vivaldi really needs to do is set the webpanels to transparent and reinforce the hover. It's a really easy fix and I don't know why they haven't noticed yet. It annoyed me ever since the introduction of webpanels... I'm going to report it now.

Tiamarth

@luetage

Lol, with this we are back to the original code used in the legacy panel.

They're as similar as they are because I implemented parts of your code in order to deal with the edge of the panel being a white strip, as I mentioned in another thread. You're right that button isn't necessary, but I'm afraid #switch button is because the issue where the button background turns grey on drag affects both regular panels and web panels.

To be fair to the devs, we're talking about a very subtle cosmetic bug that generally isn't easy to spot. I'm sure they probably would have fixed it if they had noticed it.

Tiamarth

Updated. Among some other changes, this should now be a lot easier to use with non-Arc related Vivaldi themes.

See the changelog.

luetage

You removed the links to download the styles from OP

Tiamarth

@luetage Ha, oops! Thanks for the heads up, fixed now.

Tiamarth

I don't know if there's a rule against bumping old threads, but I poked around in the forums and couldn't find any such rule, so I'm going to post in this thread again.

I thought I'd just post here to say I've recently pushed a couple of quite large updates to AFV, and I'm now considering this project "complete." I'll probably only update it in the future if a Vivaldi update breaks something, or if someone finds a bug in AFV that I didn't know about.