Hi Sharptools people, I have noticed that glowing effect for lights devices tiles is limited by tile edge display while glowing effect in Virtual or Simulated Switches are not cut by tile edges. Is there any CSS way or something to adjust glowing effect for lights devices tiles to keep it inside tile borders?
Thanks !!
Are the top two Color Control tiles? If I remember correctly, they cast a slightly wider glow than normal âSwitchâ tiles.
(The shape of the icon thatâs used also has some role in the appearance.)
Hi my friend @josh, 4 of them are control tiles, 2 of in the top âColor control lightâ (1 per 1 bedroom light) and 2 in the bottom are virtual control switches âControl Switchâ tiles that on/off a group of lights each one (Garage and Backyard). Thanks again !
Pd: I have noticed also that in the browser display this difference does not happen, but in mobiles displays do.
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:
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:
.tile.color-control {
overflow: visible;
}
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.
Coool, thanks very muchâŚIm being a little more expert each time !..
If you wanted the reverse effect where the glow on the regular switch tiles was a bit longer so itâs more likely to get cutoff by the tile, you could also use a CSS snippet like:
.icon.glow-yellow, svg.glow-yellow {
-webkit-filter: drop-shadow(0 0 3px #ff0)drop-shadow(0 0 10px #ff0)drop-shadow(0 0 20px #ff0);;
filter: drop-shadow(0 0 3px yellow)drop-shadow(0 0 10px yellow)drop-shadow(0 0 20px yellow);
}
Hi @josh, hoping everything is going great! Its a cool stuff playing around with overflow and glowing effects with sample of CSS snippet you shared for .tile.color-control and .icon.glow-yellow. Hope you can guide me with 2 issues:
a) How can replicate âoverflow: visibleâ set to Simulated Switch devices with Switch Tile layout
Note: I had a longshot testing with â.tile.switch-level { overflow: visible; }â and works for a Light device in a Switch Tile layout, but is not working for Simulated Switches.
b) How can I play around with glowing for Lights devices with Color Control Tile Layout, I had make some improvement for â.icon.glow-yellowâ and love learning more âŚ
Thanks for your kindly help !
Can you take a screenshot of this Switch Tile? The Switch Tileâs glowing effect is shorter than Color Control and Color Temperature Tile, so I think you shouldnât need to use overflow:visible; in this case. See screenshot below where tile size is 80px, and the glow is short enough without being cut.
For selecting the icon class in Color Control Tile, you can use .tile.color-control .icon, because it doesnât have the glow-yellow class in the <div> element where the icon class is located.
This is how the Switch Tileâs HTML elements look like.
Tanks for your assistant my friend, you are right, glowing is not cut by the tile, just to play around I have found that when tapping in a glowing tile a cool âflash effectâ is displayed when active and inactive and glow is set, for color-control tiles this flash effect goes really cool outside of the tile, but for the switch tiles the âflash effectâ is cut and limited by the tile, not a big issue, just to go deeper and play with Sharptools âŚ
For .tile.color-control .icon Im totally lost, trying to longshot how to do the CSS snippet, but nothing has worked and I am really ignorant to get about HTML you posted, Im just keeping playing around âŚ
Thanks again âŚ
