Changing icons with CSS / part II
-
@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!
-
@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. -
@Ornorm Oh, I see now that the requirement was to have a different SVG for each state, which would indeed need to select for the title as it's the only thing changed. I guess I didn't read the spec properly as usual, being hung up on the original request for just the selector of the SVG
-
The problem with drag and drop on the toolbar is that buttons are locked to the left side. I like having the button on the same side as my panel (which is the right). That's why I kept updating the mod, but aside from getting some help from @nomadic I thought there might be an easier way if I could just get those selectors.
All is well now
Interestingly, the
toolbar-mailbar
spans across and has a spacertoolbar .toolbar-spacer-flexible
that allows us to move buttons to either side of it. I don't know why it isn't available on theUrlBar
. I would think many would like to move buttons to either side of theUrlField
-
@sjudenim Moving the actual button to the right side leads to trouble, since it’s missing when Vivaldi tries to move/remove it. One way to tackle this would be to hide the original button, make a new one on the right side that is being introduced on address bar creation and then simulate a click on the real button.
-
@luetage said in Changing icons with CSS / part II:
Moving the actual button to the right side leads to trouble, since it’s missing when Vivaldi tries to move/remove it.
One mod I helped @sjudenim update moves the window control buttons to the address bar. That issue came up as switching to the mail bar would effectively delete the buttons from the UI with Vivaldi not knowing it needs to bring it back when the URL bar version of the address bar came back (also the buttons would be missing on the mail bar).
The solution I used to get it working was to just store the windows buttons in a variable that could be added back later.
I wasn't sure the listeners would still work after doing that, but they did.
Here is that method:
(function () { function moveButtonsGroup() { function buttonsGroup(windowButtons) { let toolBar = document.querySelector(".toolbar-mainbar.UrlBar") || document.querySelector(".toolbar-mainbar.toolbar-mailbar"); // make sure the buttons are not already added if (toolBar.querySelector(".window-buttongroup")) return; toolBar.appendChild(windowButtons); } // save the window button group for later usage. const windowButtons = document.querySelector(".window-buttongroup"); let main = document.getElementById("main"); let observer = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { // only re-add on new nodes added. The list addedNodes will only have a length attribute when it contains added nodes if (mutation.addedNodes.length) { buttonsGroup(windowButtons); } }); }); // only need to check childList for added nodes observer.observe(main, { childList: true }); buttonsGroup(windowButtons); } let intervalID = setInterval(() => { const browser = document.getElementById("browser"); if (browser) { clearInterval(intervalID); moveButtonsGroup(); } }, 300); })();
-
LOL I can't delete my reply after he deleted his question...
-
I have sucessfully changed the Panel Toggle icon into the Download icon but now I want to change its title so that it says "Downloads" instead of "Show Panel".
https://streamable.com/7tq1unAny help would be appreciated.