Changing icons with css
-
Now that we have a new addition to the addressfield (that works and looks good), I noticed that they've changed the icon for non secure pages
But I don't think that emphasises the issue. Simply flipping it does (by default it uses
red
instead of the highlight colour in the image)
.SiteInfoButton.warning { transform: rotate(180deg); }
Secure pages still features the padlock though which looks inconsistent now, so let's try this
.SiteInfoButton.secure svg path, .SiteInfoButton.certified svg path { d: path('M8 1C4.131 1 1 4.131 1 8s3.131 7 7 7 7-3.131 7-7-3.131-7-7-7zm0 1.094A5.903 5.903 0 0113.906 8 5.902 5.902 0 018 13.906 5.904 5.904 0 012.094 8 5.904 5.904 0 018 2.094zm3.035 2.908c-.12 0-.239.054-.33.164L6.99 9.645 5.297 7.602a.414.414 0 00-.66 0 .644.644 0 000 .794l2.021 2.44a.43.43 0 00.33.164c.12 0 .24-.054.332-.164l4.043-4.875a.647.647 0 000-.795.422.422 0 00-.328-.164z') }
-
@sjudenim I'm curious, what kind of tools do you use to generate nice paths?
-
I use a combination of things as some seem to be easier (for me) for some tasks than the other: an older Adobe Illustrator (CS6) with Inkscape. I then load them into this site https://jakearchibald.github.io/svgomg/ to help compress the path
This site is a good resource for pre-made svg icons https://www.flaticon.com. You can load them into your editor and work off of them rather than starting from scratch.
-
@sjudenim Thanks, I already have inkscape portable.
Very happy a tool exist to remove a lot of (not need for modding) metadata it adds to svg files -
I feel like such a noob, the icons I made myself I either used simple geometrical shapes like circles, or I drew them on graph paper by hand and translated the points to code, lol.
-
Some really good tips here!
Personally I really dislike the new style of padlock so I reverted to the old, IMO it looks much better:.SiteInfoButton.secure, .SiteInfoButton.certified { border-radius: var(--radius); background-color: #004400; fill: #00a100; }
But messed around a bit just now using the tip given for using SVG and decided to just use the standard Vivaldi icon for "insecure" sites. In my opinion, not all sites absolutely need SSL and I'm perfectly capable of seeing whether a site is secure or not without being having a "oooh this is scary" icon in my face
.SiteInfoButton.warning svg path { d: path("M 10.4 5 c -0.4 -0.8 0 -1.8 1 -2 c 0.7 0 1.5 0.4 1.6 1.2 a 1.4 1.4 0 0 1 -0.2 1 l -4 7 c -0.3 0.5 -0.7 0.8 -1.2 0.8 c -0.6 0 -1 -0.2 -1.3 -0.7 L 3.8 7.8 L 2.2 5 c -0.5 -0.8 0 -2 1 -2 c 0.7 0 1 0.2 1.4 0.7 l 1 2 l 1 1.4 a 2 2 0 0 0 1.7 1.5 a 2.2 2.2 0 0 0 2.3 -2 V 6 c 0 -0.3 0 -0.6 -0.2 -1 Z"); }
For those who feel they need it maybe something like this will work:
.SiteInfoButton.warning { border-radius: var(--radius); background-color: darkred; }
I need the
border-radius
otherwise it looks fuglyI've also removed the EV text because there's no need for that extra information taking up space in the address bar, and some sites have really long text there. It's still available in the dropdown anyway.
/* Hide EV certificate text */ .siteinfo-text { display: none; }
-
@luetage Still better than what happens when I have to edit a bigger SVGโI open it in Inkscape, select the path I need and then edit it from the XML editorโฆ (and sometimes I get angry that IS tries to reduce the paths to the shortest possible form).
-