Fixed opacity influence on tooltips

This commit is contained in:
Eduard Urbach 2018-04-18 14:34:33 +02:00
parent 2302dbad31
commit d25ad77715
8 changed files with 20 additions and 9 deletions

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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%)",

View File

@ -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)
element.classList.add("tip")
let tooltip = "Episode " + element.dataset.episodeNumber + " " + airingVerb + " " + dayNames[startDate.getDay()] + " from " + startTime + " - " + endTime
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) {

View File

@ -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)

View File

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