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:

7

Hi there! New to Ableset but this is EXACTLY what I came here to look for!

I’ve got both the background flash and the loop button flasher going, however the smaller bottom loop button does stop flashing once the loop is disabled (the background does!) – am i missing something in the .css ?

Thank you so much!!

8

Hey @totpband,

Could you send me the content of your CSS file along with a video of what it looks like on your end when you disable the loop?

I’m sure we’ll find a solution :slight_smile:

9

Sure this! Video and code below – i have the css that allows for loop button flashing in setlist view as well as performance!

Video: Dropbox

/*

@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;
}

@keyframes performance-looping {
from {
background-color: rgba(0, 0, 0, 0);
}
to {
background-color: #4a271b;
}
}

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

10

Ah, I think that’s a different indicator. When you escape a loop defined by +LOOP, the loop button flashes until Live jumps to the end of the loop, which usually happens by the next full bar, depending on your quantization settings.

To work around this, you can define your loops with +LOOPFULL instead. This will just disable Live’s loop bracket without jumping to the end of the loop when you escape it.

I hope this helps :slight_smile:

11

oh interesting! I hadnt tried +LOOPFULL yet – got it working though!

1 Like