Arc for Vivaldi



  • Here are a few custom themes and some custom css that will make Vivaldi's UI merge flawlessly with Arc. Which, if you're not aware, is a wildly popular theme for Linux.

    Features:

    • When the current theme is set to apply accent color to window, remove Vivaldi's header gradient.
    • Use custom fonts in Vivaldi's interface, by default AFV uses Roboto/
    • Dynamic 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.
    • Use Arc's window buttons even when Native Window is disabled in the settings.
    • Make tab stack indicators Arc-blue, like running application indicators.
    • Scrollbars are more minimal.
    • Use Arc's sidebar color even on light themes, unless using the opera panel addon.
    • Use Arc's toolbar color for start page navigation.

    Screenshots:

    Themes with AFV css installed:

    Arc
    Arc Dark
    Arc Darker

    Themes without AFV installed:

    Vivaldi default
    Arc
    Arc Dark
    Arc Darker

    Side by side comparisons of themes with and without AFV installed:

    Arc
    Arc Dark
    Arc Darker

    Installation:

    Because Vivaldi features a built-in theme editor, it is easier to create a custom Arc theme and then to use this CSS on top of that theme. This custom CSS is necessary to integrate with Arc because you cannot currently customize every aspect of Vivaldi from the editor.

    Arc theme settings:

    Background: #f9f9fa
    Foreground: #5c616c
    Highlight: #5294e2
    Accent: #e7e8eb
    ✔ Apply Accent Color to Window
    ✔ Transparent Tabs
    Corner Rounding: 2px

    Arc Dark theme settings:
    Background: #2f343f
    Foreground: #d3dae3
    Highlight: #5294e2
    Accent: #424959
    ✔ Transparent Tabs
    Corner Rounding: 2px

    Arc Darker theme settings:
    Background: #f5f6f7
    Foreground: #5c616c
    Highlight: #5294e2
    Accent: #2f343f
    ✔ Apply Accent Color to Window
    Corner Rounding: 2px

    The rest:

    1. Save this css as /resources/vivaldi/style/arc.css

    2. To use Arc's window controls without Native Window, download this zip.

      Alternatively, if you prefer, you could ignore this step and continue using Vivaldi's default window buttons. AFV removes their background, which makes them more minimal.

    3. To use the opera panel addon, save this css as /resources/vivaldi/style/opera-panel.css

    • Unzip window-controls.zip in /resources/vivaldi/style
    • Open /resources/vivaldi/browser.html
    • In the <head>, paste the following:
      <link rel="stylesheet" href="style/arc.css" />
      <link rel="stylesheet" href="style/opera-panel.css" />
    1. The scrollbars will only affect Vivaldi's UI and, as far as I know, there's nothing I can do about this. But I wrote a user style that will affect web pages as well, and you can install it here.
    2. Relaunch Vivaldi.

    changelog | current version: 3.0



  • :O 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.



  • @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.



  • 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.



  • @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.



  • 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:

    webpanel hover bug

    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.



  • @luetage Eureka! :D

    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.



  • @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;
    }
    


  • @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 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.



  • @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.



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

    See the changelog.



  • You removed the links to download the styles from OP :P


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.