Current line color in Lyrics

Feature Requests
1

Hey Leo!
I love how lyrics works on AbleSet, but, do you think it could be possible in the future to set the color for the current active line while keeping previous and next lines white/faded? That could be a general setting (i.e. Vocals +LYRICS [yellow]).

Thank you!

2

Hey @mperaldo,

This is something you can do using custom styles. Just paste the following into your styles.css file:

.lyrics .line:not(.active) .lyrics-line p {
  color: white;
}

This makes all lyrics lines other than the current one white. You can then define the color of the highlighted line either per clip or for the entire track by adding it like in your example.

I hope this helps! :slight_smile:

2 Likes
3

That’s it!
Thank you @leolabs !!

I should learn something more about css :slight_smile:

1 Like
4

I’m glad I could help! :slight_smile:

And I can definitely recommend learning more about CSS, it gives you lots of customizability options.

1 Like
5

Hey Léo! This is working great, but I wonder if it could be possible to modify the script so that active line will always be the [colour] in the track name, inactive lines will be white unless you modify the [colour] in the clip name.

i.e.: we have a guest singer and I am able to assign a different colour to his inactive lines while keeping the active line let’s say yellow. So that: active line is yellow, main singer inactive lines are white, guest singer inactive lines are blue.

Hope that’s clear enough :slight_smile:

Thank you!!

6

Hey @mperaldo,

That’s also possible. Here’s the corresponding CSS:

.lyrics .line.active .lyrics-line p {
  color: var(--color-yellow-400);
}

If you’re using chords and would like to have them colored in yellow as well, you can use these styles instead:

.lyrics .line.active .lyrics-line p,
.lyrics .line.active .lyrics-line .chord {
  color: var(--color-yellow-400);
}

.lyrics .line .lyrics-line .chord {
  transition: color var(--transition-time);
}

Let me know if this works for you! :slight_smile:

1 Like
7

Seems great!!

Another question (last one, I promise! ;P): is it already possible to capitalize the text (all caps)?

Thanks Léo!

8

Would you want to all-caps all lines or only the current line?

If you’d only like to apply it to the current line, you could use these styles:

.lyrics .line.active .lyrics-line p {
  color: var(--color-yellow-400);
  text-transform: uppercase;
}

Otherwise, this should do the trick:

.lyrics .line.active .lyrics-line p {
  color: var(--color-yellow-400);
}

.lyrics .line .lyrics-line p {
  text-transform: uppercase;
}

I hope this helps! :slight_smile:

1 Like
9

you are the best, Léo!!

Thank you!