Arc for Vivaldi

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.