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!

10

Hey Léo! Hope you are doin great!

Those two styles are working great to me, but I was wondering if it could be possible to force the active line color when a color attribute is added to a clip.

i.e.: white inactive lines with yellow active lines, I add [red] to a line and this line remains red even when active.

Dunno if that’s clear to you :slight_smile:

Let me know!

Thank you!!

11

Hey @mperaldo,

in that case, you could invert the rules, so to speak, and force all inactive lines to become white:

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

You can then add the [yellow] color attribute to your lyrics track’s name so active lines become yellow by default.

Let me know if this works for you :slight_smile:

1 Like
12

Thanks Léo! I will try that asap!

13

Hey Léo! Sorry for the delay…
I tried it, this way the active line will follow the behaviour, but I’d like the colour I assign to a specific clip to be visible even if the line is inactive.

I try to explain: I’d like the active line to be yellow and the inactive lines to be white by default, but if I modify the line colour on the clip (i.e.: [blue]) I want this colour to be visible both when that specific line is active or inactive.

Thanks!!