mahdium/TBW
1
0
Fork 0
mirror of https://github.com/mmahdium/TBW.git synced 2025-12-20 04:33:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix coloring inconsistencies

Browse Source
This commit is contained in:
Mohammad Mahdi
2025-11-06 11:21:26 +03:30
parent 542484e8e6
commit 97174ff945
12 changed files with 76 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/AddMoreCard.vue
View File

@@ -3,12 +3,12 @@
<template>
<router-link
to="/add"
class="card relative w-full h-full flex items-center justify-center aspect-2/3 bg-white/40 backdrop-blur-md rounded-lg transition-all duration-300"
class="card relative w-full h-full flex items-center justify-center aspect-2/3 bg-base-300/40 backdrop-blur-md rounded-lg transition-all duration-300 hover:bg-base-200/50"
v-motion-fade-visible-once
>
<!-- Plus icon -->
<div
class="flex flex-col items-center justify-center text-gray-400 hover:text-gray-600 transition"
class="flex flex-col items-center justify-center text-base-content/50 hover:text-base-content/70 transition"
>
<svg
xmlns="http://www.w3.org/2000/svg"

4
src/components/ImageWithFallback.vue
View File

@@ -23,7 +23,7 @@ const imageSource = computed(() => {
</script>
<template>
<figure class="overflow-hidden flex items-center justify-center bg-gray-50 aspect-2/3">
<figure class="overflow-hidden flex items-center justify-center bg-base-300 aspect-2/3">
<span v-if="!loaded" class="loading loading-ring loading-lg text-primary"></span>
<div v-else-if="imageLoadFailed" class="flex items-center justify-center">
@@ -33,7 +33,7 @@ const imageSource = computed(() => {
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-12 h-12 text-gray-300"
class="w-12 h-12 text-base-content/40"
>
<path
stroke-linecap="round"

18
src/components/MediaFilters.vue
View File

@@ -50,36 +50,38 @@ watch(
</script>
<template>
<form class="flex gap-2 justify-center mb-8">
<label>
<form class="flex gap-2 justify-center mb-8 flex-wrap">
<label class="btn btn-outline" :class="local.includeAdult ? 'btn-error' : 'btn-ghost'">
<input
class="btn"
:class="local.includeAdult ? 'btn-error' : ''"
type="checkbox"
:checked="local.includeAdult"
@change="toggleIncludeAdult"
aria-label="Adult"
class="sr-only"
/>
Adult
</label>
<label>
<label class="btn btn-outline" :class="local.onlyMovies ? 'btn-primary' : 'btn-ghost'">
<input
class="btn"
type="checkbox"
:checked="local.onlyMovies"
@change="toggleOnlyMovies"
aria-label="Movies"
class="sr-only"
/>
Movies
</label>
<label>
<label class="btn btn-outline" :class="local.onlySeries ? 'btn-primary' : 'btn-ghost'">
<input
class="btn"
type="checkbox"
:checked="local.onlySeries"
@change="toggleOnlySeries"
aria-label="TV Series"
class="sr-only"
/>
TV Series
</label>
</form>
</template>

6
src/components/MediaList.vue
View File

@@ -31,10 +31,10 @@ window.addEventListener('scroll', () => {
<div>
<p
v-if="props.medias.length === 0"
class="text-center text-gray-500 py-12 bg-gray-50/60 rounded-lg border border-gray-200"
class="text-center text-base-content/60 py-12 bg-base-300/60 rounded-lg border border-base-content/20"
>
No media found.<br />
<RouterLink to="/add" class="text-gray-700 font-semibold hover:text-gray-900 transition">
<RouterLink to="/add" class="text-base-content/70 font-semibold hover:text-base-content transition">
Add media
</RouterLink>
</p>
@@ -62,7 +62,7 @@ window.addEventListener('scroll', () => {
<div v-if="props.isSearch && props.medias.length > 0" class="flex justify-center mt-8">
<button
class="btn px-6 bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900 disabled:opacity-50"
class="btn px-6 bg-gradient-to-r from-base-300 to-base-200 border border-base-content/30 text-base-content hover:from-base-200 hover:to-base-100 hover:text-base-content/90 disabled:opacity-50"
@click="emit('loadMore')"
:disabled="props.loadingMore"
>

2
src/components/MediaTypeBadge.vue
View File

@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<Props>(), {
<template>
<span
:class="`flex items-center w-max px-3 py-1 rounded-md text-sm bg-linear-to-r from-gray-100 to-gray-200 ${type ? 'badge-' + type : ''} text-gray-700 border border-gray-300`"
:class="`flex items-center w-max px-3 py-1 rounded-md text-sm bg-gradient-to-r from-base-300 to-base-200 ${type ? 'badge-' + type : ''} text-base-content border border-base-content/30`"
>
{{ props.text }}
</span>

40
src/components/MovieDetails.vue
View File

@@ -21,7 +21,7 @@ const alreadyAdded = computed(() =>
<template>
<!-- Hero -->
<div
class="flex flex-col lg:flex-row gap-12 items-center max-w-6xl w-full bg-white/70 border border-gray-200/60 rounded-xl p-8 transition"
class="flex flex-col lg:flex-row gap-12 items-center max-w-6xl w-full bg-base-200/70 border border-base-content/20 rounded-xl p-8 transition"
v-motion-fade-visible-once
>
<!-- Poster -->
@@ -34,18 +34,18 @@ const alreadyAdded = computed(() =>
<!-- Text -->
<div class="flex-1">
<h1 class="text-4xl font-bold text-gray-800 mb-2">
<h1 class="text-4xl font-bold text-base-content/95 mb-2">
{{ props.movie!.Title }}
<span class="text-gray-400 text-lg font-normal"
<span class="text-base-content/70 text-lg font-normal"
>({{ props.movie!.ReleaseDate?.slice(0, 4) }})</span
>
</h1>
<p v-if="props.movie!.Tagline" class="italic text-gray-500 mb-2">
<p v-if="props.movie!.Tagline" class="italic text-base-content/65 mb-2">
{{ props.movie!.Tagline }}
</p>
<p class="text-accent leading-relaxed mb-6">
<p class="text-base-content leading-relaxed mb-6">
{{ props.movie!.Overview }}
</p>
@@ -54,19 +54,21 @@ const alreadyAdded = computed(() =>
<MediaTypeBadge v-for="g in props.movie!.Genres" :key="g.id" :text="g.name" />
</div>
<div class="card bg-base-200 w-full lg:w-96 shadow-sm mb-6 mt-6">
<div class="card border border-accent bg-base-200 w-full lg:w-96 shadow-sm mb-6 mt-6">
<div class="card-body">
<p class="font-semibold text-gray-900">
Runtime: <span class="text-gray-600">{{ props.movie!.Runtime }} minutes</span>
<p class="font-semibold text-base-content/90">
Runtime: <span class="text-base-content/70">{{ props.movie!.Runtime }} minutes</span>
</p>
<p class="font-semibold text-gray-900">
<p class="font-semibold text-base-content/90">
Language:
<span class="text-gray-600">{{ props.movie!.SpokenLanguages[0]?.englishName }}</span>
<span class="text-base-content/70">{{
props.movie!.SpokenLanguages[0]?.englishName
}}</span>
</p>
<p class="font-semibold text-gray-900">
<p class="font-semibold text-base-content/90">
Release Date:
<time
class="text-sm font-semibold text-gray-600"
class="text-sm font-semibold text-base-content/70"
:datetime="
props.movie!.ReleaseDate === ''
? 'unknown'
@@ -90,9 +92,9 @@ const alreadyAdded = computed(() =>
:href="`https://www.themoviedb.org/movie/${props.movie?.Id}`"
target="_blank"
rel="noopener noreferrer"
class="btn btn-square btn-md bg-accent border-none"
class="btn btn-square btn-md bg-base-300 border border-base-content/30"
>
<img src="/logos/tmdb.svg" alt="TMDB" class="m-0.5" />
<img src="/logos/tmdb.svg" alt="TMDB" class="h-6 w-6" />
</a>
<!-- IMDB button -->
@@ -101,9 +103,9 @@ const alreadyAdded = computed(() =>
:href="`https://www.imdb.com/title/${props.movie.ImdbId}`"
target="_blank"
rel="noopener noreferrer"
class="btn btn-square btn-md bg-[#f5c518] border-none"
class="btn btn-square btn-md bg-[#f5c518] border border-[#f5c518]/30"
>
<img src="/logos/imdb.svg" alt="IMDB" class="m-0.5" />
<img src="/logos/imdb.svg" alt="IMDB" class="h-6 w-6" />
</a>
</div>
</div>
@@ -114,7 +116,7 @@ const alreadyAdded = computed(() =>
<template v-if="props.movie && props.media">
<button
v-if="!alreadyAdded"
class="btn btn-square bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300"
class="btn btn-square bg-gradient-to-r from-base-300 to-base-200 border border-base-content/30 text-base-content hover:from-base-200 hover:to-base-100"
@click="store.addMedia(props.media)"
>
<svg
@@ -134,7 +136,7 @@ const alreadyAdded = computed(() =>
</button>
<button
v-else
class="btn btn-square bg-linear-to-r from-red-50 to-red-100 border border-red-200 text-red-600 hover:from-red-100 hover:to-red-200"
class="btn btn-square bg-gradient-to-r from-error/10 to-error/20 border border-error/30 text-error hover:from-error/20 hover:to-error/30"
@click="store.removeMedia(props.media.Id)"
>
<svg
@@ -164,7 +166,7 @@ const alreadyAdded = computed(() =>
}"
>
<button
class="btn relative flex items-center gap-2 px-6 bg-linear-to-r from-indigo-500 to-violet-500 text-white border-0 shadow-md hover:opacity-90 transition"
class="btn relative flex items-center gap-2 px-6 bg-gradient-to-r from-primary to-secondary text-primary-content border-0 shadow-md hover:opacity-90 transition"
>
<svg
xmlns="http://www.w3.org/2000/svg"

6
src/components/SearchBar.vue
View File

@@ -15,10 +15,10 @@ function onSubmit() {
<template>
<form @submit.prevent="onSubmit" class="flex justify-center mb-3">
<div
class="flex items-center w-full max-w-md bg-white/70 backdrop-blur-md border border-gray-200/60 shadow-sm hover:shadow-md transition rounded-lg overflow-hidden"
class="flex items-center w-full max-w-md bg-base-200/70 backdrop-blur-md border border-base-content/20 shadow-sm hover:shadow-md transition rounded-lg overflow-hidden"
>
<!-- Icon -->
<span class="pl-3 text-gray-400">
<span class="pl-3 text-base-content/50">
<svg
class="h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
@@ -41,7 +41,7 @@ function onSubmit() {
required
:value="props.modelValue"
@input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
class="flex-1 px-3 py-2 bg-transparent outline-none text-gray-700 placeholder-gray-400"
class="flex-1 px-3 py-2 bg-transparent outline-none text-base-content/70 placeholder-base-content/50"
/>
<!-- Optional button -->

48
src/components/TVSeriesDetails.vue
View File

@@ -21,7 +21,7 @@ const alreadyAdded = computed(() =>
<template>
<!-- Hero -->
<div
class="flex flex-col lg:flex-row gap-12 items-center max-w-6xl w-full bg-white/70 border border-gray-200/60 rounded-xl p-8 transition"
class="flex flex-col lg:flex-row gap-12 items-center max-w-6xl w-full bg-base-200/70 border border-base-content/20 rounded-xl p-8 transition"
v-motion-fade-visible-once
>
<!-- Poster -->
@@ -34,18 +34,18 @@ const alreadyAdded = computed(() =>
<!-- Text -->
<div class="flex-1">
<h1 class="text-4xl font-bold text-gray-800 mb-2">
<h1 class="text-4xl font-bold text-base-content/95 mb-2">
{{ props.tvSeries!.Name }}
<span class="text-gray-400 text-lg font-normal"
<span class="text-base-content/70 text-lg font-normal"
>({{ props.tvSeries!.FirstAirDate?.slice(0, 4) }})</span
>
</h1>
<p v-if="props.tvSeries!.Tagline" class="italic text-gray-500 mb-2">
<p v-if="props.tvSeries!.Tagline" class="italic text-base-content/65 mb-2">
{{ props.tvSeries!.Tagline }}
</p>
<p class="text-accent leading-relaxed mb-6">
<p class="text-base-content leading-relaxed mb-6">
{{ props.tvSeries!.Overview }}
</p>
@@ -54,18 +54,18 @@ const alreadyAdded = computed(() =>
<MediaTypeBadge v-for="g in props.tvSeries!.Genres" :key="g.id" :text="g.name" />
</div>
<div class="card bg-base-200 w-full lg:w-96 shadow-sm mb-6 mt-6">
<div class="card bg-base-200 w-full lg:w-96 shadow-sm border border-accent mb-6 mt-6">
<div class="card-body">
<div class="inline-flex items-center gap-2">
<span class="flex items-center font-semibold text-gray-900">
<span class="flex items-center font-semibold text-base-content/90">
Seasons:
<span class="ml-1 text-gray-600">{{ props.tvSeries!.NumberOfSeasons }}</span>
<span class="ml-1 text-base-content/70">{{ props.tvSeries!.NumberOfSeasons }}</span>
</span>
<!-- SVG star separator -->
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 text-yellow-500 shrink-0"
class="w-4 h-4 text-warning shrink-0"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
@@ -75,24 +75,24 @@ const alreadyAdded = computed(() =>
/>
</svg>
<span class="flex items-center font-semibold text-gray-900">
<span class="flex items-center font-semibold text-base-content/90">
Episodes:
<span class="ml-1 text-gray-600">{{ props.tvSeries!.NumberOfEpisodes }}</span>
<span class="ml-1 text-base-content/70">{{ props.tvSeries!.NumberOfEpisodes }}</span>
</span>
</div>
<p class="font-semibold text-gray-900">
<p class="font-semibold text-base-content/90">
Last Episode:
<span class="text-gray-600">{{ props.tvSeries!.LastEpisodeToAir?.name }}</span>
<span class="text-base-content/70">{{ props.tvSeries!.LastEpisodeToAir?.name }}</span>
</p>
<p class="font-semibold text-gray-900">
<p class="font-semibold text-base-content/90">
Language:
<span class="text-gray-600">{{ props.tvSeries!.SpokenLanguages[0]?.englishName }}</span>
<span class="text-base-content/70">{{ props.tvSeries!.SpokenLanguages[0]?.englishName }}</span>
</p>
<p class="font-semibold text-gray-900">
<p class="font-semibold text-base-content/90">
First Air Date:
<time
class="text-sm font-semibold text-gray-600"
class="text-sm font-semibold text-base-content/70"
:datetime="
props.tvSeries!.FirstAirDate === ''
? 'unknown'
@@ -116,9 +116,9 @@ const alreadyAdded = computed(() =>
:href="`https://www.themoviedb.org/tv/${props.tvSeries?.Id}`"
target="_blank"
rel="noopener noreferrer"
class="btn btn-square btn-md bg-accent border-none"
class="btn btn-square btn-md bg-base-300 border border-base-content/30"
>
<img src="/logos/tmdb.svg" alt="TMDB" class="m-0.5" />
<img src="/logos/tmdb.svg" alt="TMDB" class="h-6 w-6" />
</a>
<!-- IMDB button -->
@@ -127,9 +127,9 @@ const alreadyAdded = computed(() =>
:href="props.tvSeries.Homepage"
target="_blank"
rel="noopener noreferrer"
class="btn btn-square btn-md bg-[#f5c518] border-none"
class="btn btn-square btn-md bg-[#f5c518] border border-[#f5c518]/30"
>
<img src="/logos/imdb.svg" alt="IMDB" class="m-0.5" />
<img src="/logos/imdb.svg" alt="IMDB" class="h-6 w-6" />
</a>
</div>
</div>
@@ -140,7 +140,7 @@ const alreadyAdded = computed(() =>
<template v-if="props.tvSeries && props.media">
<button
v-if="!alreadyAdded"
class="btn btn-square bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300"
class="btn btn-square bg-gradient-to-r from-base-300 to-base-200 border border-base-content/30 text-base-content hover:from-base-200 hover:to-base-100"
@click="store.addMedia(props.media)"
>
<svg
@@ -160,7 +160,7 @@ const alreadyAdded = computed(() =>
</button>
<button
v-else
class="btn btn-square bg-linear-to-r from-red-50 to-red-100 border border-red-200 text-red-600 hover:from-red-100 hover:to-red-200"
class="btn btn-square bg-gradient-to-r from-error/10 to-error/20 border border-error/30 text-error hover:from-error/20 hover:to-error/30"
@click="store.removeMedia(props.media.Id)"
>
<svg
@@ -190,7 +190,7 @@ const alreadyAdded = computed(() =>
}"
>
<button
class="btn relative flex items-center gap-2 px-6 bg-linear-to-r from-indigo-500 to-violet-500 text-white border-0 shadow-md hover:opacity-90 transition"
class="btn relative flex items-center gap-2 px-6 bg-gradient-to-r from-primary to-secondary text-primary-content border-0 shadow-md hover:opacity-90 transition"
>
<svg
xmlns="http://www.w3.org/2000/svg"

4
src/views/AddView.vue
View File

@@ -122,7 +122,7 @@ watch(filters, () => {
<div class="container mx-auto px-4 py-12" v-motion-fade-visible-once>
<!-- Title -->
<h1
class="text-4xl font-extrabold text-center mb-10 bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
class="text-4xl font-extrabold text-center mb-10 bg-gradient-to-r from-base-content to-base-content/70 bg-clip-text text-transparent"
>
Add Media
</h1>
@@ -151,7 +151,7 @@ watch(filters, () => {
<!-- Empty state -->
<p
v-else
class="text-center text-gray-500 mt-16 bg-gray-50/60 border border-gray-200 rounded-lg py-12"
class="text-center text-base-content/60 mt-16 bg-base-300/60 border border-base-content/20 rounded-lg py-12"
>
Search for a movie or TV Serie to add it to your list
</p>

2
src/views/ListView.vue
View File

@@ -17,7 +17,7 @@ const handleRemoveMedia = (mediaId: number) => {
<template>
<div class="container mx-auto px-4 py-12" v-motion-fade-visible-once>
<h1
class="text-4xl font-extrabold text-center mb-10 bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
class="text-4xl font-extrabold text-center mb-10 bg-gradient-to-r from-base-content to-base-content/70 bg-clip-text text-transparent"
>
Media Library
</h1>

8
src/views/NotFoundView.vue
View File

@@ -2,24 +2,24 @@
<template>
<div
class="min-h-screen flex flex-col items-center justify-center bg-linear-to-b from-gray-50 to-white px-4"
class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-base-300 to-base-100 px-4"
>
<!-- Big 404 -->
<h1
class="text-8xl font-extrabold mb-4 bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
class="text-8xl font-extrabold mb-4 bg-gradient-to-r from-base-content/70 to-base-content/50 bg-clip-text text-transparent"
>
404
</h1>
<!-- Message -->
<p class="text-xl text-gray-600 mb-8 text-center">
<p class="text-xl text-base-content/70 mb-8 text-center">
Oops! The page you’re looking for doesn’t exist.
</p>
<!-- Button back home -->
<RouterLink
to="/"
class="btn px-6 py-3 bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900 transition"
class="btn px-6 py-3 bg-gradient-to-r from-base-300 to-base-200 border border-base-content/30 text-base-content hover:from-base-200 hover:to-base-100 hover:text-base-content/90 transition"
>
Back to Home
</RouterLink>

6
src/views/WatchView.vue
View File

@@ -9,7 +9,7 @@ const isLoaded = ref(false)
</script>
<template>
<div class="flex flex-col items-center w-full min-h-screen bg-black text-white">
<div class="flex flex-col items-center w-full min-h-screen bg-base-100 text-base-content">
<!-- Title -->
<h1 class="text-2xl md:text-3xl font-bold my-4">
{{ mediaName }}
@@ -17,7 +17,7 @@ const isLoaded = ref(false)
<!-- Loading spinner -->
<div v-if="!isLoaded" class="flex justify-center items-center flex-1 w-full">
<span class="loading loading-ring loading-lg text-white"></span>
<span class="loading loading-ring loading-xl text-primary"></span>
</div>
<!-- Video player -->
@@ -32,7 +32,7 @@ const isLoaded = ref(false)
</div>
<!-- Disclaimer -->
<p class="mt-4 text-xs text-gray-400 text-center px-4 max-w-xl">
<p class="mt-4 text-xs text-base-content/60 text-center px-4 max-w-xl">
⚠️ This player is provided by a <span class="font-semibold">third‑party service</span>. Ads
and pop‑ups may appear, and I do not control or endorse them.
</p>