Just to clarify, I’m talking about the Tile Layout. The Color Control and Color Temperature tile layouts cast the glow a bit further.
So in the following screenshot, all three tiles are using the same color capable device, but the first one is using the Color Control layout, the second is using the Color Temperature layout, and the third is using the Switch layout.
The tile size is set to 80px to exaggerate the issue:
If I return the tiles back to their 160px default, the issue isn’t noticeable as there’s enough room for the glow to cast:
The point being that depending on how you have your dashboards sizing, the effective tile size might be different between a desktop and mobile device. (Additionally, different browsers might render things slightly differently)
The glow is a layered effect with each ‘glow layer’ casting the glow out a certain number of pixels out from each icon. In the case of the Color Control layout, there’s an extra 20px glow layer to make the effect more pronounced across the various colors that can be displayed:
- Switch: 3px, 10px
- Color: 3px, 10px, 20px
If you want to allow the glow on the Color Control layout to extend beyond the tile (and not get cutoff), you could use a CSS snippet like the following:
Here’s the same 80px tiles with that snippet showing the difference:
As usual, any CSS snippets provided are not officially supported and may need to be updated with future SharpTools releases.