Fixed opacity influence on tooltips

pages/anime/episodes.pixy

@@ -22,7 +22,7 @@ component AnimeEpisodes(anime *arn.Anime, episodes []*arn.AnimeEpisode, user *ar
 								span -
 						
 						if validate.DateTime(episode.AiringDate.Start)
-							.episode-airing-date-start.utc-airing-date(data-start-date=episode.AiringDate.Start, data-end-date=episode.AiringDate.End, data-episode-number=episode.Number)= episode.AiringDate.StartDateHuman()
+							.episode-airing-date-start.utc-airing-date.no-tip(data-start-date=episode.AiringDate.Start, data-end-date=episode.AiringDate.End, data-episode-number=episode.Number)= episode.AiringDate.StartDateHuman()
 			
 			//- table.episodes
 			//- 	tbody

pages/animelist/animelist.scarlet

@@ -120,7 +120,7 @@
 		text-align right
 		flex-basis 150px
 		flex-shrink 1
-		opacity 0.8
+		color hsla(text-color-h, text-color-s, text-color-l, 0.8)
 		justify-content flex-end
 
 	.anime-list-item-episodes

pages/compare/animelist.pixy

@@ -56,9 +56,9 @@ component CompareAnimeList(a *arn.User, b *arn.User, countA int, countB int, com
 									if comparison.ItemA.Rating.Overall == comparison.ItemB.Rating.Overall
 										span.comparison-rating-equal= utils.FormatRating(comparison.ItemB.Rating.Overall)
 									else if comparison.ItemB.Rating.Overall > comparison.ItemA.Rating.Overall
-										span.comparison-rating-higher(title=utils.FormatRating(comparison.ItemB.Rating.Overall))= "+" + utils.FormatRating(comparison.ItemB.Rating.Overall - comparison.ItemA.Rating.Overall)
+										span.comparison-rating-higher.tip(aria-label=utils.FormatRating(comparison.ItemB.Rating.Overall))= "+" + utils.FormatRating(comparison.ItemB.Rating.Overall - comparison.ItemA.Rating.Overall)
 									else
-										span.comparison-rating-lower(title=utils.FormatRating(comparison.ItemB.Rating.Overall))= "-" + utils.FormatRating(comparison.ItemA.Rating.Overall - comparison.ItemB.Rating.Overall)
+										span.comparison-rating-lower.tip(aria-label=utils.FormatRating(comparison.ItemB.Rating.Overall))= "-" + utils.FormatRating(comparison.ItemA.Rating.Overall - comparison.ItemB.Rating.Overall)
 								else
 									span= utils.FormatRating(comparison.ItemB.Rating.Overall)
 							else

pages/episode/episode.scarlet

@@ -8,8 +8,8 @@
 
 .episode-view-airing-date
 	text-align center
-	opacity 0.5
 	font-size 0.9rem
+	half-opacity-text
 
 .episode-view-image-container
 	horizontal

scripts/Actions/Theme.ts

@@ -8,7 +8,7 @@ const dark = {
 	"hue": "45",
 	"saturation": "100%",
 
-	"text-color": "hsl(0, 0%, 90%)",
+	"text-color-l": "90%",
 	"bg-color": "hsl(0, 0%, 18%)",
 	"link-color": "hsl(var(--hue), var(--saturation), 66%)",
 	"link-hover-color": "hsl(var(--hue), var(--saturation), 76%)",

scripts/DateView.ts

@@ -92,8 +92,14 @@ export function displayAiringDate(element: HTMLElement, now: Date) {
 		airingVerb = "aired"
 	}
 
-	element.setAttribute("aria-label", "Episode " + element.dataset.episodeNumber + " " + airingVerb + " " + dayNames[startDate.getDay()] + " from " + startTime + " - " + endTime)
+	let tooltip = "Episode " + element.dataset.episodeNumber + " " + airingVerb + " " + dayNames[startDate.getDay()] + " from " + startTime + " - " + endTime
-	element.classList.add("tip")
+
+	if(element.classList.contains("no-tip")) {
+		element.title = tooltip
+	} else {
+		element.setAttribute("aria-label", tooltip)
+		element.classList.add("tip")
+	}
 }
 
 export function displayDate(element: HTMLElement, now: Date) {

styles/include/config.scarlet

@@ -1,5 +1,8 @@
 // Colors
-text-color = rgb(60, 60, 60)
+text-color-h = 0
+text-color-s = 0%
+text-color-l = 23.5%
+text-color = hsl(text-color-h, text-color-s, text-color-l)
 bg-color = rgb(246, 246, 246)
 main-color = rgb(248, 165, 130)
 link-color = rgb(215, 38, 15)

styles/mixins/half-opacity-text.scarlet

@@ -0,0 +1,2 @@
+mixin half-opacity-text
+	color hsla(text-color-h, text-color-s, text-color-l, 0.5)