refactor: global opacity class

13 files changed, 27 insertions, 21 deletions

diff --git a/src/lib/Landing.svelte b/src/lib/Landing.svelte
index ab9ab4e2..52648748 100644
--- a/src/lib/Landing.svelte
+++ b/src/lib/Landing.svelte
@@ -85,8 +85,8 @@
 						>
 							<MediaTitleDisplay title={manga.title} />
 						</a>
-						<span style="opacity: 50%;">|</span>
-						{readChapters}<span style="opacity: 50%;">/{manga.chapters || '?'}</span>
+						<span class="opaque">|</span>
+						{readChapters}<span class="opaque">/{manga.chapters || '?'}</span>
 						<button class="button-square button-action">+</button>
 						[{Math.floor(Math.random() * ((manga.chapters ?? 0) - readChapters)) +
 							readChapters +
@@ -176,8 +176,8 @@
 						>
 							<MediaTitleDisplay title={anime.title} />
 						</a>
-						<span style="opacity: 50%;">|</span>
-						{watchedEpisodes}<span style="opacity: 50%;">/{anime.episodes || '?'}</span>
+						<span class="opaque">|</span>
+						{watchedEpisodes}<span class="opaque">/{anime.episodes || '?'}</span>
 						<button class="button-square button-action">+</button>
 						[{Math.floor(Math.random() * ((anime.episodes ?? 0) - watchedEpisodes)) +
 							watchedEpisodes +
diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 271c8991..32d9edd7 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -179,7 +179,7 @@
 							[<a href={`https://anilist.co/anime/${anime.id}/social`} target="_blank">S</a>]
 						{/if}
 						{#if !upcoming || notYetReleased || !$settings.displayCountdownRightAligned}
-							<span style="opacity: 50%;">|</span>
+							<span class="opaque">|</span>
 						{/if}
 						{#if !upcoming || notYetReleased}
 							<!-- {anime.mediaListEntry?.progress || 0}{@html totalEpisodes(anime)} -->
diff --git a/src/lib/List/ListTitle.svelte b/src/lib/List/ListTitle.svelte
index 59f52ea7..4af60acb 100644
--- a/src/lib/List/ListTitle.svelte
+++ b/src/lib/List/ListTitle.svelte
@@ -16,7 +16,7 @@
 	<span title={title.hint || undefined} use:tooltip>{title.title}</span>
 	[{count === -1337 ? '...' : count}]
 	{#if !hideTime}
-		<small style="opacity: 50%">{time ? time.toFixed(3) : '...'}s</small>
+		<small class="opaque">{time ? time.toFixed(3) : '...'}s</small>
 	{/if}
 	<slot />
 	{#if progress !== undefined}
diff --git a/src/lib/Media/Anime/Airing/AiringTime.svelte b/src/lib/Media/Anime/Airing/AiringTime.svelte
index da61ea11..8ab9e754 100644
--- a/src/lib/Media/Anime/Airing/AiringTime.svelte
+++ b/src/lib/Media/Anime/Airing/AiringTime.svelte
@@ -41,7 +41,7 @@
 				(anime as unknown as MediaPrequel).startDate.day
 			) < new Date()
 		)
-			return `<span style="opacity: 50%">on ${new Date(
+			return `<span class="opaque">on ${new Date(
 				anime.startDate.year,
 				(anime as unknown as MediaPrequel).startDate.month,
 				(anime as unknown as MediaPrequel).startDate.day
diff --git a/src/lib/Media/Anime/Airing/time.ts b/src/lib/Media/Anime/Airing/time.ts
index 2936f1b6..83642687 100644
--- a/src/lib/Media/Anime/Airing/time.ts
+++ b/src/lib/Media/Anime/Airing/time.ts
@@ -31,7 +31,7 @@ export const airingTime = (
 			(anime as unknown as MediaPrequel).startDate.day
 		) < new Date()
 	)
-		return `<span style="opacity: 50%">on ${new Date(
+		return `<span class="opaque">on ${new Date(
 			anime.startDate.year,
 			(anime as unknown as MediaPrequel).startDate.month,
 			(anime as unknown as MediaPrequel).startDate.day
@@ -108,7 +108,7 @@ export const airingTime = (
 		if (upcoming)
 			return `<span title="${dateString}" style="opacity: ${opacity}%;">${nextEpisode}${totalEpisodes(
 				anime
-			)} in ${timeFrame} <span style="opacity: 50%">${
+			)} in ${timeFrame} <span class="opaque">${
 				few && get(settings).displayCoverMode ? '<br>' : ''
 			}${few ? `(${time})` : ''}</span></span>`;
 		else
diff --git a/src/lib/Media/Anime/episodes.ts b/src/lib/Media/Anime/episodes.ts
index 65a5d873..cbcfb7ad 100644
--- a/src/lib/Media/Anime/episodes.ts
+++ b/src/lib/Media/Anime/episodes.ts
@@ -1,4 +1,4 @@
 import type { Media } from '$lib/AniList/media';
 
 export const totalEpisodes = (anime: Media) =>
-	anime.episodes === null ? '' : `<span style="opacity: 50%">/${anime.episodes}</span>`;
+	anime.episodes === null ? '' : `<span class="opaque">/${anime.episodes}</span>`;
diff --git a/src/lib/Schedule/Days.svelte b/src/lib/Schedule/Days.svelte
index 32721bdc..ebef62f2 100644
--- a/src/lib/Schedule/Days.svelte
+++ b/src/lib/Schedule/Days.svelte
@@ -106,7 +106,7 @@
 							<CoverBypass {media} {entry} cover={false} />
 							<span class:countdown={$settings.displayCountdownRightAligned}>
 								{#if media && media.nextAiringEpisode}
-									<span style="opacity: 50%;">
+									<span class="opaque">
 										{episode(media, day)}{media.episodes ? `/${media.episodes}` : ''} at
 									</span>
 								{/if}
@@ -124,11 +124,11 @@
 					<li class="entry">
 						<CoverBypass {media} {entry} />
 						{#if !$settings.displayCountdownRightAligned}
-							<span style="opacity: 50%;">|</span>
+							<span class="opaque">|</span>
 						{/if}
 						<span class:countdown={$settings.displayCountdownRightAligned}>
 							{#if media && media.nextAiringEpisode}
-								<span style="opacity: 50%;">
+								<span class="opaque">
 									{episode(media, day)}{media.episodes ? `/${media.episodes}` : ''} at
 								</span>
 							{/if}
diff --git a/src/lib/Settings/Categories/Cache.svelte b/src/lib/Settings/Categories/Cache.svelte
index eaa14063..04b0f232 100644
--- a/src/lib/Settings/Categories/Cache.svelte
+++ b/src/lib/Settings/Categories/Cache.svelte
@@ -3,7 +3,7 @@
 	import settings from '$stores/settings';
 </script>
 
-<small style="opacity: 50%;">
+<small class="opaque">
 	All caches are stored in your browser's <code
 		title="Local browser key/value pair store"
 		use:tooltip>localStorage</code
diff --git a/src/lib/Tools/SequelSpy.svelte b/src/lib/Tools/SequelSpy.svelte
index 0c923a75..5f2a64a4 100644
--- a/src/lib/Tools/SequelSpy.svelte
+++ b/src/lib/Tools/SequelSpy.svelte
@@ -89,8 +89,8 @@
 						>
 							<MediaTitle title={prequel.title} />
 						</a>
-						<span style="opacity: 50%;">|</span>
-						{prequel.seen}<span style="opacity: 50%;">/{prequel.episodes}</span>
+						<span class="opaque">|</span>
+						{prequel.seen}<span class="opaque">/{prequel.episodes}</span>
 						{@html prequelAiringTime(prequel)}
 					</li>
 				{/each}
diff --git a/src/lib/Tools/Wrapped/Media.svelte b/src/lib/Tools/Wrapped/Media.svelte
index 08092a28..927cbfd4 100644
--- a/src/lib/Tools/Wrapped/Media.svelte
+++ b/src/lib/Tools/Wrapped/Media.svelte
@@ -48,7 +48,7 @@
 							{/each}
 						{:else}
 							<li>
-								<p style="opacity: 50%;">(⌣_⌣”)</p>
+								<p class="opaque">(⌣_⌣”)</p>
 							</li>
 						{/if}
 					</ol>
@@ -87,7 +87,7 @@
 							{/each}
 						{:else}
 							<li>
-								<p style="opacity: 50%;">(⌣_⌣”)</p>
+								<p class="opaque">(⌣_⌣”)</p>
 							</li>
 						{/if}
 					</ol>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b77ae58f..924757e6 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -121,7 +121,7 @@
 			<a href={root('/tools')} class="header-item">{$locale().navigation.tools}</a>
 			<a href={root('/settings')} class="header-item">{$locale().navigation.settings}</a>
 
-			<span style="opacity: 50%;" class="header-item">|</span>
+			<span class="header-item true-opaque">|</span>
 
 			{#if data.user}
 				<a href={root(`/user/${$userIdentity.name}`)} class="header-item">
diff --git a/src/routes/updates/+page.svelte b/src/routes/updates/+page.svelte
index b4e95081..b97b9272 100644
--- a/src/routes/updates/+page.svelte
+++ b/src/routes/updates/+page.svelte
@@ -59,7 +59,7 @@
 	<details open class="list">
 		<summary>
 			Manga
-			<small style="opacity: 50%">{mangaEndTime ? mangaEndTime / 1000 : '...'}s</small>
+			<small class="opaque">{mangaEndTime ? mangaEndTime / 1000 : '...'}s</small>
 		</summary>
 
 		{#if feed === null}
@@ -93,7 +93,7 @@
 	<details open class="list">
 		<summary>
 			Novels
-			<small style="opacity: 50%">{novelEndTime ? novelEndTime / 1000 : '...'}s</small>
+			<small class="opaque">{novelEndTime ? novelEndTime / 1000 : '...'}s</small>
 		</summary>
 
 		{#if novelFeed === null}
diff --git a/src/styles/typography.css b/src/styles/typography.css
index caf65724..c1eefbd5 100644
--- a/src/styles/typography.css
+++ b/src/styles/typography.css
@@ -25,3 +25,9 @@ body {
 	position: relative;
 	z-index: -1;
 }
+
+.true-opaque {
+	opacity: 0.5;
+	position: relative;
+	z-index: -1;
+}