High-Contrast Loop Toggle

User Styles
,
1

Description

This snippet add a flashing background to the loop button while the current section is being looped. This makes it easier to see this from a distance.

Screenshots

CleanShot 2023-06-27 at 13.19.32

Code

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

.performance .controls :nth-child(3).active,
.performance .controls :nth-child(3).playing {
  /* change the duration here if you'd like the animation to be slower */
  animation: button-looping 0.3s alternate linear infinite;
}

.performance .controls :nth-child(3).active svg,
.performance .controls :nth-child(3).playing svg {
  color: #fff;
}

If you’re using AbleSet 2.3.0 or newer, you can use a simplified version:

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

.performance .controls .loop.active {
  /* change the duration here if you'd like the animation to be slower */
  animation: button-looping 0.3s alternate linear infinite;
}

.performance .controls .loop.active svg {
  color: #fff;
}
2

Could this be done for setlist view too @leolabs?

3

The playback controls in the setlist view don’t have enough class names to write proper styles for them yet, but I’ll make sure to fix that in the next beta :slight_smile:

1 Like
4

With the latest beta, this is possible in the setlist view as well:

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

.performance .controls .loop.active, 
.playback-controls .loop.active {
  /* change the duration here if you'd like the animation to be slower */
  animation: button-looping 0.3s alternate linear infinite;
}

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

This shows the high-contrast loop button in both the setlist and performance view.

5

New to ablest and I just have to say you are the best! I can’t believe I’m so late to this tool. It’s changed the game for me! Thank you so much!

6

Thank you for your kind words, I appreciate it! Glad you like the app :slight_smile: