Changing icons with CSS / part II
-
@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
-
-
@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!
-
@Ornorm Problem is the Title attribute changes
And your 2nd selector would not trigger because the Title is not on the
button-toolbar
element, at least I think not... -
@sjudenim Thatโs a very old mod, I just took a look at it and it depends on checking a classlist in the panel itself, not useable for CSS. The mod is obsolete anyway nowadays, since we can move buttons to the Url-bar by drag&drop. Why Vivaldi hasnโt introduced 2 states for the button is anyoneโs guess. A javascript mod would still be needed in case you want to display it correctly depending on which side the panel is being displayed (left/right).
-
@Pathduck TBH, I don't remember why I have them both and I'm too lazy to update all my custom CSS (I didn't play with it since...). I know that it works like that even if one isn't used. Not really orthodox I know but...
Regarding the Title attribute changing. Yes, it's the risk of using them as selectors but it was, for me, the only way to go that deep in the code to be able to change each svg code to my own taste.