Changing icons with CSS / part II
-
My latest changes to the toolbar:
button.button-toolbar.back svg path { d: path("M 19.477778,22.044444 17.522222,24 6.522222,13 17.522222,2 19.477778,3.9555556 10.677778,13 Z"); fill: var(--colorBg); } button.button-toolbar.back:hover svg path { d: path("M 19.477778,22.044444 17.522222,24 6.522222,13 17.522222,2 19.477778,3.9555556 10.677778,13 Z"); fill: var(--colorFg); } button.button-toolbar.rewind:hover svg path { fill: var(--colorFg); } button.button-toolbar.forward svg path { d: path("M 6.522222,22.044444 8.477778,24 19.477778,13 8.477778,2 6.522222,3.9555556 15.322222,13 Z"); fill: var(--colorBg); } button.button-toolbar.next:hover svg path { fill: var(--colorFg); } button.button-toolbar.forward:hover svg path { d: path("M 6.522222,22.044444 8.477778,24 19.477778,13 8.477778,2 6.522222,3.9555556 15.322222,13 Z"); fill: var(--colorFg); } .toolbar-addressbar button.button-toolbar.home::after { content: " Build: 2.1.1337.20 "; font-weight: bold; padding-left: 3px; padding-right: 3px; color: var(--colorBg); } .toolbar-addressbar button.button-toolbar.home:hover::after { content: " Build: 2.1.1337.20 "; font-weight: bold; padding-left: 3px; padding-right: 3px; color: var(--colorFg); }
Note: You have to change the version number manually.
-
@luetage you inspired me with the "Sthomehenge" icon meaning (bridge). What about this?
Note: You have to put the code into one line.M0 16c1 0, 3 -1, 4 -4c1 -3, 6 -5, 7 -5 c1 -0.25, 3 -0.25, 4 0 c1 0, 6 2, 7 5c1 3, 3 4, 4 4 v1h-5 v-3c0 -3, -4 -3, -4 0v3 h-1v-5c0 -4, -6 -4, -6 0v5h-1 v-3c0 -3, -4 -3, -4 0v3 h-5v-1z
Now something for Christmas:
M13 1l5 6h-2l4 6h-3l5 6h-3l5 6h-22l5 -6h-3l5 -6h-3l4 -6h-2l5 -6z
And an arrow (meaning: quick way to home):
M0 0l8 3l-4.5 0 l15 15 h4l0.5 0.5h-4l0.5 0.5 h4l0.5 0.5h-4l0.5 0.5 h4l0.5 0.5h-4l0.5 0.5 h4l0.5 0.5h-4l0.5 0.5 -0.5 0.5 l-0.5 -0.5v4l-0.5 -0.5v-4 l-0.5 -0.5v4l-0.5 -0.5v-4 l-0.5 -0.5v4l-0.5 -0.5v-4 l-0.5 -0.5v4l-0.5 -0.5v-4 l-15 -15 l0 4.5l-3 -8z
And results:
-
Very festive!
-
I see, you use mine reload button
-
The arrow collection grows:
Rewind (only doubled back):M0 7l8 -3.875, -3.5 3.5h12.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5v0.75l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-12.5l3.5 3.5, -8 -3.875zM0 19l8 -3.875, -3.5 3.5h12.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5v0.75l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-12.5l3.5 3.5, -8 -3.875z
Back:
M0 13l8 -3.875, -3.5 3.5h12.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5v0.75l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-12.5l3.5 3.5, -8 -3.875z
Forward (reversed back):
M26 13l-8 -3.875, 3.5 3.5h-12.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5v0.75l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h12.5l-3.5 3.5, 8 -3.875z
Next (doubled forward):
M26 7l-8 -3.875, 3.5 3.5h-12.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5v0.75l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h12.5l-3.5 3.5, 8 -3.875zM26 19l-8 -3.875, 3.5 3.5h-12.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5v0.75l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h12.5l-3.5 3.5, 8 -3.875z
For rew. and next I use also this mod:
.toolbar-addressbar.toolbar .button-toolbar.rewind, .toolbar-addressbar.toolbar .button-toolbar.next { min-width: 34px !important; }
And Home (because arrow wasn't the best choice among arrows):
M6 6c1 2 1 12 0 14c2 -1 12 -1 14 0c-1 -2 -1 -12 0 -14c-2 1 -12 1 -14 0zm1 1c2 1 10 1 12 0c-1 2 -1 10 0 12c-2 -1 -10 -1 -12 0c1 -2 1 -10 0 -12zm12 0c14 1 -1 -14 0 0m0 12c-1 14 14 -1 0 0m-12 0c-14 -1 1 14 0 0m0 -12c1 -14 -14 1 0 0zm13 -1c-0.5 -9.5 9.5 0.5 0 0m0 14c9.5 -0.5 -0.5 9.5 0 0m-14 0c0.5 9.5 -9.5 -0.5 0 0m0 -14c-9.5 0.5 0.5 -9.5 0 0z
Result:
Btw. can anybody tell me how domain navigation buttons (rew., next) work? I'll be maybe able to get better icons for them. -
@raed I'm not talking about the icons, but about the functionality of the buttons.
-
@potmeklecbohdan The rewind button goes back to where you started. This means it functions as if you were pressing the back button repeatedly until you arrive at the first page you visited on the current domain. The next button goes to a page not present in history. In Vivaldi Forum this would be the next page in a topic or in category overview. Next doesn't work reliably on Vivaldi Forum though.
-
@raed To change the size you can change the viewbox. What you need is an icon with transparency, like this:
<svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <path d="M16,32.0001433 C23.0111818,32.0001433 26.909069,32.0001433 29.4542934,29.4544367 C32,26.90873 32,23.0108428 32,16.0001433 C32,8.98896151 32,5.09107429 29.4542934,2.54584991 C26.909069,0.000143283582 23.0111818,0.000143283582 16,0.000143283582 C8.98881823,0.000143283582 5.09141324,0.000143283582 2.54570662,2.54584991 C0,5.09107429 0,8.98896151 0,16.0001433 C0,23.0108428 0,26.90873 2.54570662,29.4544367 C5.09141324,32.0001433 8.98881823,32.0001433 16,32.0001433" fill="#EF3939"></path> <path d="M23.5468657,12.9424478 C21.5896119,16.3482985 19.6304478,19.7517612 17.6760597,23.1590448 C17.3130746,23.7918806 16.7853134,24.1749254 16.0612537,24.2274627 C15.249791,24.286209 14.6126567,23.9437612 14.2038209,23.2397612 C12.9653731,21.1053134 11.7407761,18.9622687 10.5109254,16.8230448 C9.76298507,15.5210746 9.0121791,14.2210149 8.26758209,12.9176119 C7.51629851,11.6027463 8.36358209,10.0046567 9.87092537,9.92728358 C10.6671045,9.88620896 11.2808358,10.2534925 11.6848955,10.9460299 C12.2370149,11.8931343 12.7791045,12.8459701 13.3254925,13.7959403 C13.7195224,14.4803582 14.1054328,15.1695522 14.5109254,15.846806 C15.0974328,16.8297313 15.96,17.3842388 17.1077015,17.4530149 C18.7325373,17.5499701 20.2413134,16.3717015 20.4357015,14.6408358 C20.4505075,14.5109254 20.4600597,14.3819701 20.465791,14.3155821 C20.457194,13.7553433 20.352597,13.2834627 20.1305075,12.8383284 C19.5239403,11.6208955 20.1701493,10.2568358 21.4893134,9.9640597 C22.5634627,9.72620896 23.6748657,10.5171343 23.817194,11.6094328 C23.8792836,12.0894328 23.7847164,12.5293134 23.5468657,12.9424478 M24.2575522,7.47856716 C19.6232836,2.84047761 12.1099701,2.84047761 7.47570149,7.47856716 C2.84143284,12.1166567 2.84143284,19.6366567 7.47570149,24.2742687 C12.1099701,28.9123582 19.6232836,28.9123582 24.2575522,24.2742687 C28.8918209,19.6366567 28.8918209,12.1166567 24.2575522,7.47856716" fill="#FFFFFF"></path> </g> </svg>
-
@raed In inkscapes options you have to change absolute to relative pathes and save changes.
button.button-toolbar.home svg path { d: path("m 19.356327,10.639013 c -1.608929,2.799724 -3.219429,5.597486 -4.826002,8.398389 -0.298386,0.520213 -0.732224,0.835088 -1.327425,0.878276 -0.66705,0.04829 -1.190796,-0.233213 -1.526873,-0.811925 -1.018046,-1.754588 -2.0247067,-3.516243 -3.0356857,-5.274758 -0.614832,-1.070263 -1.23202,-2.138956 -1.8441036,-3.210398 -0.6175806,-1.0808639 0.078915,-2.3945479 1.3180026,-2.4581509 0.654487,-0.03376 1.158994,0.268155 1.491144,0.837444 0.4538617,0.778551 0.8994777,1.5618149 1.3486267,2.3427219 0.323906,0.562615 0.641138,1.129156 0.974466,1.685882 0.482129,0.807997 1.191189,1.263822 2.134639,1.320358 1.335669,0.0797 2.575934,-0.888876 2.735728,-2.311706 0.01217,-0.106792 0.02003,-0.212797 0.02473,-0.26737 -0.0071,-0.460536 -0.09305,-0.848437 -0.275614,-1.214353 -0.498619,-1.0007709 0.03259,-2.1220739 1.116984,-2.3627459 0.882988,-0.195521 1.796599,0.454646 1.913597,1.352553 0.05104,0.394576 -0.0267,0.7561719 -0.222219,1.0957829 m 0.584208,-4.491495 c -3.809525,-3.8126669 -9.9857237,-3.8126669 -13.7952492,0 -3.8095259,3.8126671 -3.8095259,9.994362 0,13.806636 3.8095255,3.812666 9.9857242,3.812666 13.7952492,0 3.809527,-3.812274 3.809527,-9.9939689 0,-13.806636 m -6.787988,20.157566 c 5.763429,0 8.967624,0 11.059885,-2.092656 2.092657,-2.092658 2.092657,-5.296853 2.092657,-11.059886 0,-5.7634289 0,-8.9676241 -2.092657,-11.0598849 -2.092261,-2.0926571 -5.296456,-2.0926571 -11.059885,-2.0926571 -5.7634287,0 -8.9672278,0 -11.0598849,2.0926571 -2.0926571,2.0922608 -2.0926571,5.296456 -2.0926571,11.0598849 0,5.763033 0,8.967228 2.0926571,11.059886 2.0926571,2.092656 5.2964562,2.092656 11.0598849,2.092656"); fill: none; stroke: var(--colorBg); stroke-width: 2px; }
I have resized the image, so that no scalling is not needed and combined the pathes, because it has to be one single path. This is the best I could do :
Here the source svg:<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="26.305084" width="26.305084" id="svg8" version="1.1" viewBox="0 0 26.305084 26.305084"> <metadata id="metadata14"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> <defs id="defs12" /> <path d="m 19.356327,10.639013 c -1.608929,2.799724 -3.219429,5.597486 -4.826002,8.398389 -0.298386,0.520213 -0.732224,0.835088 -1.327425,0.878276 -0.66705,0.04829 -1.190796,-0.233213 -1.526873,-0.811925 -1.018046,-1.754588 -2.0247067,-3.516243 -3.0356857,-5.274758 -0.614832,-1.070263 -1.23202,-2.138956 -1.8441036,-3.210398 -0.6175806,-1.0808639 0.078915,-2.3945479 1.3180026,-2.4581509 0.654487,-0.03376 1.158994,0.268155 1.491144,0.837444 0.4538617,0.778551 0.8994777,1.5618149 1.3486267,2.3427219 0.323906,0.562615 0.641138,1.129156 0.974466,1.685882 0.482129,0.807997 1.191189,1.263822 2.134639,1.320358 1.335669,0.0797 2.575934,-0.888876 2.735728,-2.311706 0.01217,-0.106792 0.02003,-0.212797 0.02473,-0.26737 -0.0071,-0.460536 -0.09305,-0.848437 -0.275614,-1.214353 -0.498619,-1.0007709 0.03259,-2.1220739 1.116984,-2.3627459 0.882988,-0.195521 1.796599,0.454646 1.913597,1.352553 0.05104,0.394576 -0.0267,0.7561719 -0.222219,1.0957829 m 0.584208,-4.491495 c -3.809525,-3.8126669 -9.9857237,-3.8126669 -13.7952492,0 -3.8095259,3.8126671 -3.8095259,9.994362 0,13.806636 3.8095255,3.812666 9.9857242,3.812666 13.7952492,0 3.809527,-3.812274 3.809527,-9.9939689 0,-13.806636 m -6.787988,20.157566 c 5.763429,0 8.967624,0 11.059885,-2.092656 2.092657,-2.092658 2.092657,-5.296853 2.092657,-11.059886 0,-5.7634289 0,-8.9676241 -2.092657,-11.0598849 -2.092261,-2.0926571 -5.296456,-2.0926571 -11.059885,-2.0926571 -5.7634287,0 -8.9672278,0 -11.0598849,2.0926571 -2.0926571,2.0922608 -2.0926571,5.296456 -2.0926571,11.0598849 0,5.763033 0,8.967228 2.0926571,11.059886 2.0926571,2.092656 5.2964562,2.092656 11.0598849,2.092656" style="fill:#ff0000;fill-rule:evenodd;stroke:none;stroke-width:0.82203388" id="path4" /> </svg>
-
May be a better version:
button.button-toolbar.home svg path { d: path("m 3.2039589,0.00947894 c -0.641236,0.032915 -1.2124526,0.2266687 -1.6883381,0.5350843 -0.4758854,0.308414 -0.85606693,0.73173576 -1.11669603,1.21972306 -0.260629,0.4879872 -0.4033533,1.0402638 -0.39881999506,1.6118981 0.004529995,0.5716344 0.15565849506,1.1622181 0.47526049506,1.7215734 1.26703013,2.2179126 2.54598303,4.4282026 3.81870203,6.6436762 2.0927538,3.640172 4.1740323,7.288975 6.2814147,10.92102 0.347845,0.598975 0.795473,1.043148 1.326077,1.326077 0.530605,0.282928 1.144166,0.402277 1.834572,0.35229 0.61604,-0.0447 1.149517,-0.229674 1.60525,-0.538406 0.455733,-0.308731 0.834451,-0.741121 1.143284,-1.279548 3.325649,-5.797943 6.659915,-11.586402 9.990442,-17.3819047 0.404729,-0.7030038 0.564296,-1.4531665 0.458642,-2.2699499 -0.121095,-0.9293446 -0.654349,-1.7317985 -1.385899,-2.25001006 -0.731549,-0.5182098 -1.658486,-0.7507441 -2.57239,-0.5483768 -1.122365,0.2490988 -1.959798,0.95300436 -2.386271,1.85451376 -0.426475,0.9015076 -0.442962,1.9985429 0.07312,3.0343553 0.377914,0.7574557 0.553686,1.5625678 0.56832,2.5158888 -0.0098,0.112968 -0.02465,0.33064 -0.04985,0.551701 -0.16539,1.472649 -0.888857,2.7106856 -1.917659,3.5594686 -1.028802,0.848782 -2.36315,1.308858 -3.745585,1.226371 -0.976483,-0.05852 -1.829926,-0.324753 -2.565743,-0.784345 -0.735816,-0.459594 -1.352178,-1.111283 -1.851188,-1.947572 -0.689998,-1.1524366 -1.3468714,-2.3250466 -2.0173654,-3.4896746 -0.929749,-1.6164993 -1.8522349,-3.2406884 -2.79174,-4.8523108 -0.3437807,-0.5892208 -0.7764598,-1.03790876 -1.2928422,-1.33272326 -0.5163806,-0.2948137 -1.1172864,-0.4337666 -1.7946895,-0.3988194 z"); fill: var(--colorFg); stroke: none; }
Original svg:
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="24.351908" width="26.965475" id="svg8" version="1.1" viewBox="0 0 26.965475 24.351908"> <metadata id="metadata14"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> <defs id="defs12" /> <path id="path2999" d="m 3.2039589,0.00947894 c -0.641236,0.032915 -1.2124526,0.2266687 -1.6883381,0.5350843 -0.4758854,0.308414 -0.85606693,0.73173576 -1.11669603,1.21972306 -0.260629,0.4879872 -0.4033533,1.0402638 -0.39881999506,1.6118981 0.004529995,0.5716344 0.15565849506,1.1622181 0.47526049506,1.7215734 1.26703013,2.2179126 2.54598303,4.4282026 3.81870203,6.6436762 2.0927538,3.640172 4.1740323,7.288975 6.2814147,10.92102 0.347845,0.598975 0.795473,1.043148 1.326077,1.326077 0.530605,0.282928 1.144166,0.402277 1.834572,0.35229 0.61604,-0.0447 1.149517,-0.229674 1.60525,-0.538406 0.455733,-0.308731 0.834451,-0.741121 1.143284,-1.279548 3.325649,-5.797943 6.659915,-11.586402 9.990442,-17.3819047 0.404729,-0.7030038 0.564296,-1.4531665 0.458642,-2.2699499 -0.121095,-0.9293446 -0.654349,-1.7317985 -1.385899,-2.25001006 -0.731549,-0.5182098 -1.658486,-0.7507441 -2.57239,-0.5483768 -1.122365,0.2490988 -1.959798,0.95300436 -2.386271,1.85451376 -0.426475,0.9015076 -0.442962,1.9985429 0.07312,3.0343553 0.377914,0.7574557 0.553686,1.5625678 0.56832,2.5158888 -0.0098,0.112968 -0.02465,0.33064 -0.04985,0.551701 -0.16539,1.472649 -0.888857,2.7106856 -1.917659,3.5594686 -1.028802,0.848782 -2.36315,1.308858 -3.745585,1.226371 -0.976483,-0.05852 -1.829926,-0.324753 -2.565743,-0.784345 -0.735816,-0.459594 -1.352178,-1.111283 -1.851188,-1.947572 -0.689998,-1.1524366 -1.3468714,-2.3250466 -2.0173654,-3.4896746 -0.929749,-1.6164993 -1.8522349,-3.2406884 -2.79174,-4.8523108 -0.3437807,-0.5892208 -0.7764598,-1.03790876 -1.2928422,-1.33272326 -0.5163806,-0.2948137 -1.1172864,-0.4337666 -1.7946895,-0.3988194 z" style="fill:#000000;fill-rule:evenodd;stroke:none;stroke-width:1.70163202" /> </svg>
-
@raed Sure, but for this you have to know javascript, which I dont do.
-
@raed And what about using
background-color
of thesvg
orbutton
and changing thepath
to the white circle? -
@raed There is a way, put it there as png ...
-
@raed I'm almost sorry for posting that svg, it didn't make much sense. The icons all only have one path, therefore you can only change one path with css. And you should really go for one path, because this will ensure compatibility with Vivaldi's theme setup. If you want a squircle I would go for the svg displayed on Windows and Linux (menu), set the menu to show the horizontal lines and use that svg in the address bar. But you can also go for the "V" only: https://forum.vivaldi.net/topic/28047/vivaldi-icon.
But yeah, if you want the full squircle with 2 colors, javascript is the only solution.
-
@raed You want to replace the svg icon with an image? That you can do, look at part I: https://forum.vivaldi.net/topic/16955/changing-icons-with-css
-
.button-toolbar.home svg { display: none; }
no highlighting no idea why
button.button-toolbar.home { background-image: url(data:image/png;base64,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%0A6GcV/h+l9Ec9UXSGDQAAAABJRU5ErkJggg==); }
-
@raed I have copyright for my pakman-like avatar
-
@raed Try this, I did not:
button-toolbar.rewind svg, button-toolbar.rewind svg * { display: none; }
-
@raed I dont get, why it works with the home button n/either. ?
-
@raed The first code - the path - don't seem to work here, while the second one is fine. Awkard