Customizing icon hover and focus styles

[verkvieto]

I'd like to be able to customize the style of the "box" that's shown around an icon when hovered over or focused. Currently, it shows as a translucent white box that's more opaque when focused.

It would be nice to able to change the colors for hovering and focused, as well as being able to disable it entirely (same effect could be achieved by setting both colors to transparent).

Also being able to change the shape of the box to something else (such as a circle) would be nice.

[camwright]

If you mean the style of the icon when it's the active window, that actually is configurable. Ditto on the hovered style though.

[verkvieto]

It is? In the configuration window, I only see a setting to change the indicator below the icon. I'm referring to the translucent white box around the icon when focused/hovering.

Here, the box is shown on the settings window icon:

[camwright]

Perhaps it's not labeled as clearly as it could be, but you can change the color or turn it off completely, so it looks like this.

[verkvieto]

"Highlight focused application" does at least get rid of the box on focused applications, but the box still appears while hovering over the icon. Doesn't seem like the color of the box can be changed either; the colors on that settings menu only affects the running indicator color.

[camwright]

Indeed, which is why I said ditto on the hovering options. :)

[verkvieto]

Any idea what part of the code controls this? I could see about opening a PR.

[jderose9]

@brandon-schumann For the focused application: Check out appIcons.js in _setIconStyle(). It's currently an SVG though.. this is to handle the stacked appearance for the "metro" style indicator. I'm not sure if you can re-color the background SVG. If not, the background SVG could possibly be altered to contain a dark segment that would shade the background color and still provide the stacked look.

For the hovered application: I can't quite remember but I'm pretty sure this actually just comes from the shell theme CSS. This gets tricky because some themes specifically have customized the hover appearance for this extension (for example, plano) so you don't always want to override them. (In some instances I have attempted to check if the running indicator is styled by the theme, for example in _isThemeProvidingIndicator())

[verkvieto]

@jderose9 As far as I can tell from the highlight_bg.svg, it just draws a 1x1 square with a color of #eeeeec and an opacity of 0.25? (Inkscape creates some pretty ugly SVG output)

As for highlight_stacked_bg.svg, it creates a 45x1, a 1x1, and a 2x1 rectangle, in a line (48x1), with an opacity of 0.25, 0.05, and 0.15 respectively, all with a fill color of #eeeeec.

Correct me if I'm wrong, but if this is what they should be drawing, both of these files can be simplified greatly. Doing so would probably make it easier to customize these. I can open a separate PR with just these 2 files simplified if you'd like.

You can set SVG attributes with CSS (fill and fill-opacity being the relevant ones here), so it shouldn't be too difficult to set these from a setting. The color should be fairly easy as there's only 1 color used in both images; however, I'm not sure how to make setting the opacity work, as the stacked SVG uses 3 different opacities to give the stacked look. Perhaps just having an overall opacity set at the top level that defaults to 0.25 that can be customized (when adding this to the stacked SVG, you would want to change the 3 opacities of the rectangles to 1.0, 0.2, and 0.6 to keep the current appearance).

As for the hover styles, perhaps there can be a checkbox to override the shell theme CSS; similarly to how there's one to override the colors for the indicator.

[verkvieto]

Just changing the SVG I'm able to customize the style of it. Here's an example using a blue circle:

[ckrzen]

@brandon-schumann what icon set are you using?

[verkvieto]

@ckrzen papirus

[jderose9]

@brandon-schumann Any improvements are welcome. If I remember correctly, the SVG attributes which can be assigned to a background SVG with CSS are fewer than the attributes which can be assigned to a foreground image. But the bigger issue was that the GJS implementation of those CSS styles is incomplete - some of them just flat out don't work. Another path that might be viable is just to draw it with a StDrawingArea.

Anyway, as I mentioned, feel free to open a PR for any improvements to the current implementation. Thank you!

[jderose9]

This has been completed by @charlesg99 . Thank you so much!

[fr0gdude]

Let me preface with I have no idea why this worked because the fields seem unrelated...

I installed Orchid theme and those highlights when hovered appeared. Orchid replaces Dash-To-Panel's stylesheet.css.

I compared the two to see what changed between them and slowly added each back in. Here is the only change I didn't put back in (so I expect to be the cause, again I don't know how).

 .dashtopanelMainPanel.vertical .panel-button > *,
 .dashtopanelMainPanel.vertical .panel-button.vertical > *,
 .dashtopanelMainPanel.vertical .panel-button.vertical .system-status-icon,
 .dashtopanelMainPanel.vertical .panel-button.clock-display > *,
 .dashtopanelMainPanel.vertical .panel-button.clock-display .clock {
     padding: 8px 0; 
 }
 .dashtopanelMainPanel.vertical .panel-button.clock-display {
     -natural-hpadding: 0;
     -minimum-hpadding: 0;
 }
/*^^ Dash-To-Panel Code ^^*/

.dashtopanelMainPanel.vertical .panel-button > *,
.dashtopanelMainPanel.vertical .panel-button.vertical > *,
.dashtopanelMainPanel.vertical .panel-button.clock-display > * {
    padding: 8px 0; 
}
/*^^ Orchid Code ^^*/

Hope this helps others...