Improved lyrics view

pages/soundtrack/lyrics.pixy

@@ -1,28 +1,31 @@
 component SoundTrackLyricsPage(track *arn.SoundTrack, user *arn.User)
 	SoundTrackTabs(track, user)
 
-	.soundtrack-full-page
 	if track.Title.ByUser(user) == ""
 		h1.mountable untitled
 	else
 		h1.mountable= track.Title.ByUser(user)
 
-	.widget-form
+	.soundtrack-lyrics
 		if !track.HasLyrics()
 			p.no-data.mountable No lyrics available for this track.
 		else
-			if track.Lyrics.Romaji != ""
-				.widget
-					h3.widget-title.mountable Romaji
-					RenderLyrics(track.Lyrics.Romaji)
-			
 			if track.Lyrics.Native != ""
-				.widget
-					h3.widget-title.mountable Native
-					RenderLyrics(track.Lyrics.Native)
+				.lyrics-column
+					h3.widget-title.mountable(data-mountable-type="native") Native
+					RenderLyrics(track.Lyrics.Native, "native")
 			
-component RenderLyrics(text string)
+			if track.Lyrics.Romaji != ""
+				.lyrics-column
+					h3.widget-title.mountable(data-mountable-type="romaji") Romaji
+					RenderLyrics(track.Lyrics.Romaji, "romaji")
+
+component RenderLyrics(text string, mountType string)
 	each paragraph in strings.Split(text, "\n\n")
-		p.lyrics-paragraph.mountable
+		p.lyrics-paragraph
 			each line in strings.Split(paragraph, "\n")
-				span.lyrics-line= line
+				if mountType == "native"
+					.lyrics-line.mountable(data-mountable-type=mountType)
+						Japanese(line)
+				else
+					.lyrics-line.mountable(data-mountable-type=mountType)= line

pages/soundtrack/lyrics.scarlet

@@ -1,2 +1,16 @@
+.soundtrack-lyrics
+	horizontal-wrap
+	justify-content center
+
+.lyrics-column
+	flex 1
+	max-width 500px
+	padding calc(content-padding / 2)
+
+.lyrics-paragraph
+	margin 1rem 0
+
 .lyrics-line
-	display block
+	border-radius ui-element-border-radius
+	padding 0 0.25rem
+	height 1.9rem

styles/base.scarlet

@@ -39,6 +39,9 @@ img
 	backface-visibility hidden
 	color transparent
 
+rt
+	user-select none
+
 .hidden
 	display none !important