Changing icons with CSS / part II
-
@Steffie For now we can just write :towel: and hope it works in the future
-
@hlehyaric Just to share the result with you...
-
@Ornorm Wow! Excellent!
-
@hlehyaric The little boy wanted to show his drawing to his father
-
@Ornorm OMZ, but you promised that swab was for Covid19 testing, not paternity testing. You sneak!
-
@Ornorm I'm not! Yes, I'm wearing a mask, but not that oneβ¦
-
@LonM I just re-used your mod for the Settings gear icon :
.preferences.panelbtn:hover svg { transform: rotateZ(30deg); }
-
@Ornorm Cool! We can even do infinite animation! :smiling_face_with_open_mouth_closed_eyes:
@keyframes rotate { to { transform: rotate(360deg); } } .preferences.panelbtn:hover svg { -webkit-animation: rotate 2s linear infinite; }
The sky's the limit with Vivaldi and CSS
-
Anyone know the selector for the
panel toggle
svg path?I've tried various combinations of
class
andtitle
and have yet to find one that works -
@sjudenim I don't know if the
toggle
you're mentioning is the small triangle hiding/showing the web panels?I found this :
#panel_switch svg polygon
-
Thanks, but no. I meant the one in the status bar that we can drag to the toolbar
-
@sjudenim
Maybe this? (I didn't test it).button-toolbar[title="Hide Panel Control click to toggle panel floating"] > button svg path
edit : tested... not working
-
Tried that one and the other state,
Show Panel
. I've tried so many combinations and looked through thebundle.js
. I'm out of ideas -
Seems to work with
.button-toolbar.panel-clickoutside-ignore svg path {color: red !important}
Also colors the pause button, but something likefirst-of-type
should handle that.@Ornorm donβt throw things around you havenβt tested, lol, sjudenim is a veteran.
-
Aye, they've not made this one easy to select.
The selector would be something like:
.toolbar-statusbar .panel-clickoutside-ignore svg
But that's a really st00pid class nameSomething like this works but it ain't pretty:
.toolbar-statusbar .button-toolbar:first-of-type button svg
Once you move it the selector will most likely change, so there's that, you'd need to use the Inspector.
-
@luetage I throw what I want!
-
@Ornorm That does it, I will eat all your pommes frites
-
Damnit! I had tried that with
button
andtitle
attached to it and failed miserably.Thanks a lot! This has helped remove your old panel toggle mod that I had forked until the dreaded
mail-bar
requires everything to be recalled. I've dragged this icon to both toolbars and moved the toolbar container to the right so it can be in the same location on both bars. Any idea on how to get theHide Panel
to work so I can have 2 different icons, like in your mod? -
@Ornorm Found something!!!! (and tested! - changed the svg to the flower I already use for the pause button)
Just add a
*
aftertitle
and useHide Panel
as title.
(as a present, I give you a beautiful svg code for a flower... Lovely, isn't it? )/* Toggle panel */ .button-toolbar > button[title*="Hide Panel"] svg path, .button-toolbar[title*="Hide Panel"] > button svg path { d: path("M9.892,8c0,1.045-0.848,1.892-1.893,1.892S6.107,9.046,6.107,8c0-1.044,0.847-1.892,1.892-1.892S9.892,6.956,9.892,8z M8,4.609c0.362,0,0.711,0.058,1.038,0.163C9.482,4.004,9.771,2.894,9.771,2.17C9.771,0.972,8.978,0,8,0C7.021,0,6.229,0.972,6.229,2.17c0,0.724,0.289,1.834,0.733,2.602C7.289,4.667,7.638,4.609,8,4.609z M4.983,6.452c0.324-0.629,0.838-1.144,1.467-1.469C6.222,4.127,5.64,3.137,5.129,2.626C4.282,1.779,3.034,1.652,2.343,2.343C1.651,3.035,1.778,4.282,2.625,5.13C3.137,5.641,4.126,6.222,4.983,6.452z M4.771,9.038C4.666,8.711,4.609,8.362,4.609,8c0-0.362,0.057-0.711,0.162-1.038C4.003,6.518,2.893,6.229,2.169,6.229C0.972,6.229,0,7.023,0,8c0,0.978,0.971,1.77,2.169,1.77C2.893,9.771,4.003,9.482,4.771,9.038z M4.983,9.549C4.126,9.778,3.137,10.36,2.625,10.87c-0.847,0.849-0.974,2.095-0.283,2.787c0.692,0.691,1.939,0.565,2.787-0.282c0.511-0.512,1.093-1.502,1.322-2.359C5.822,10.693,5.307,10.179,4.983,9.549z M8,11.391c-0.362,0-0.711-0.056-1.037-0.162c-0.445,0.768-0.733,1.879-0.733,2.602C6.229,15.029,7.021,16,8,16c0.979,0,1.771-0.971,1.771-2.17c0-0.723-0.289-1.834-0.733-2.602C8.711,11.334,8.362,11.391,8,11.391z M11.016,9.549c-0.324,0.629-0.838,1.144-1.467,1.467c0.229,0.857,0.81,1.847,1.322,2.359c0.847,0.847,2.095,0.973,2.786,0.282c0.691-0.692,0.565-1.938-0.282-2.787C12.863,10.36,11.873,9.778,11.016,9.549z M13.83,6.229c-0.723,0-1.834,0.289-2.602,0.733C11.333,7.289,11.391,7.638,11.391,8c0,0.361-0.057,0.71-0.162,1.038c0.768,0.443,1.878,0.732,2.602,0.732C15.028,9.771,16,8.979,16,8C16,7.023,15.028,6.229,13.83,6.229z M11.016,6.452c0.857-0.229,1.847-0.811,2.358-1.322c0.847-0.848,0.974-2.095,0.283-2.787c-0.692-0.69-1.939-0.563-2.787,0.283c-0.512,0.511-1.093,1.501-1.322,2.357C10.178,5.308,10.692,5.823,11.016,6.452z"); }
It's a kind of cheat because I used a wildcard to have that "Hide Panel" title part taken into account.
-
The wild card is what has done the trick, I didn't think of that. Thanks!