Fullscreen Loop Indicator

User Styles
,
1

Description

This snippet works with AbleSet 2.3.0 and newer and makes the entire background flash amber while the playhead is in an active loop, making it hard to miss, even from a distance.

Screenshots

Code

@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;
}
1 Like
2

how to get bg.jpg “flashing “ in lyrics-page

.lyrics-page, .performance {
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
      url("/custom-styles/bg.jpg");
    background-position: center;
    background-size: cover;
  }

  @keyframes performance-looping {
    from 
    .lyrics-page, .performance {
        background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
          url("/custom-styles/bg.jpg");
        background-position: center;
        background-size: cover;
      }
    to {background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url("/custom-styles/bg.jpg");
      background-position: center;
      background-size: cover;
    }
  }
  
  .performance.looping {
    /* change the duration here if you'd like the animation to be slower */
    animation: performance-looping 0.3s alternate linear infinite;
  }
2 Likes