Addressfield theming

  • This CSS customization changes the color of the certified site info button, the private window indicator, the icons for blocked content and the bookmark button. Additionally the design of the address field and search field in private windows is reverted to the standard (non-private) default theme, thereby fixing a ton of design issues introduced by the former.

    The only fixed color in the address field not being touched by this mod is the red broken padlock icon indicating unsafe sites.

    Screenshot from 2020-03-27 19-23-49.png

    Screenshot from 2020-03-27 19-26-38.png

    /* Addressfield theming */
    .siteinfobutton.certified, {
        fill: var(--colorhighlightbgdark);
        color: var(--colorhighlightbg);
    .siteinfobutton.certified:hover, .siteinfobutton.certified:focus:not([tabindex='-1']), .siteinfobutton.certified:active,,[tabindex='-1']), {
        fill: var(--colorhighlightbg);
    .bookmark-animated-fill, .theme-dark .bookmark-animated-fill {
        fill: var(--colorfg);
    .permission-denied circle {
        fill: var(--colorhighlightbg);
    .permission-denied path {
        fill: var(--colorhighlightfg);

    2020-07-25 Updated addressfield colors for snapshot.
    2020-08-14 Fix for snapshot 3.3.2009.3
    2020-08-20 Snapshot 3.3.2022.6, no more private window fixes needed.

  • Nice ๐Ÿ™‚

    Why not the too?

  • @Hadden89 Because it's already a non-fixed color, but you can of course color it with highlight by adding to the first 2 commands.

  • Pretty sure they've changed the unlocked padlock by the way, but I'll address that in the appropriate thread

    The default addressfield definitely needs some reworking, thanks for sharing

  • @sjudenim To my knowledge there are four possible states right now

    • secure
    • secure certified
    • not secure
    • insecure(eg invalid certificate)

    Screenshot from 2020-03-27 22-00-42.png

    As you can see the broken padlock is still being used. .SiteInfoButton.insecure

  • @luetage

    I see. I guess they've changed the rules for the icons because the few sites that I visit that had the unlocked padlock now show the info icon.

    Thanks for the clarification

  • @sjudenim You can test it here:
    It's a completely safe site with a pgg (pretty good guide) to using gpg that won't load, because the certificate expired. Gladly still available through wayback machine.

  • @luetage

    Ah, I was (also) thrown by the message in the pop up, it's exactly the same for both Your connection to this site is not secure.

  • Moderator

    @luetage @sjudenim For testing different connection states I recommend or vivaldi://interstitials/ instead of actually putting yourself at a risk ๐Ÿ˜‰

  • @madiso You can be โ€œat a riskโ€ on a perfectly valid https site too. Just the fact that a site is encrypted, doesn't mean it's safe. The thing you need to be vary of is inputting credentials, sending any form of data. A little icon in the address field can't protect you from your own stupidity.

  • Moderator

    @luetage My point was about seeking random pages with connection errors or misconfiguration - better to use tools made for that.

  • @madiso Nobody here sought out a random site though.

  • @Hadden89 I took your advice and colored the standard siteinfo button now, because I noticed the unhovered version can become invisible on some themes on unmodified Vivaldi. By the way, somebody noticed this?

    Screenshot from 2020-04-04 17-36-10.png

    The โ€œManage Cookiesโ€ button should have the lighter background of the close button, but does so only in one place, because somehow the background image gradient gets messed up.

  • @luetage

    mmh.. same is on CGA theme.

    For padlock I opted for the minimalism.

    secure.PNG Secure | Certified Https

    not_secure.PNG NOT Secure [Http|Broken Https?] (Flipped info, tnx sjudenim)

    broken.PNG VERY unsecure (Broken Https: Invalid certs, mixed sources and so on).

  • @luetage "Color glitch" is still present in latest snapshot.
    Did you report that?

  • @Hadden89 No, stuff like this is most likely already reported. It's a shame, but I don't deem bugs like this worth the time reporting, since the bugtracker is closed and I cannot check whether it's a duplicate.

    But go on and issue it if you'd like ^^

  • @luetage VB-65870
    I still hope we'll see a "read-only-auto-mirrored-text-only-bug-tracker-report-summary" one day.
    In most cases having the essential (and un-disclosed) infos will be fine; no need to something like chr. monorail (which is quite ugly to browse). But this won't probably happen. Sad ๐Ÿ˜ž
    It is of course a "low priority issue" for a snapshot but bad to see on a stable (I think we are almost in stabilization)

  • @Hadden89 said in Addressfield theming:

    @luetage VB-65870

    I had a mail about this. Confirmed but low priority - being mainly an "aesthetic" issue. ๐Ÿ˜‰

  • @Hadden89 This seems to be fixed now, on my side the button has the right background color, both hovered and normal.

  • The newest snapshot makes the addressfield unreadable in private windows, made an update to fix this. I adjusted the faded colors in the urlfragment wrapper too, to make them slightly more visible compared to the main address.

Log in to reply

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