Loop colors

Hey Daniel,

If you’re trying to visually highlight the built in loop button, you can do that using a small custom CSS animation.

You can place this in AbleSet’s Custom Styles file.
To access it, click on AbleSet’s Icon Tray → Gear Icon → Show Global Custom Styles, then paste this into the CSS file and save it.

@keyframes button-looping {
  from {
    background-color: #2f855a;
  }
  to {
    background-color: #48bb78;
  }
}

.performance .controls .loop.active,
.playback-controls .loop.active {
  animation: button-looping 0.3s alternate linear infinite;
}

.performance .controls .loop.active svg,
.playback-controls .loop.active svg {
  color: #fff;
}

Feel free to tweak the colors or animation speed if you’d like.

Hope that helps!

[1]High-Contrast Loop Toggle - #4 by leolabs


  1. Footnotes ↩︎