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

Change theme to forest and fix some inconsistencies

Browse Source
This commit is contained in:
Mohammad Mahdi
2025-11-06 10:53:51 +03:30
parent 4a19199fbb
commit 542484e8e6
4 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/MediaCard.vue
View File

@@ -21,13 +21,13 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
<template>
<div
class="card relative w-full h-full overflow-hidden bg-white/70 backdrop-blur-md border border-gray-200/60 shadow-xs hover:shadow-xl transition-all duration-300"
class="card relative w-full h-full overflow-hidden bg-base-200/70 backdrop-blur-md border border-base-content/20 shadow-xs hover:shadow-xl transition-all duration-300"
v-motion-fade-visible-once
>
<div class="relative w-full">
<router-link
:to="{ name: 'details', params: { type: props.media.MediaType, id: props.media.Id } }"
class="block w-full aspect-2/3 overflow-hidden bg-gray-100 relative"
class="block w-full aspect-2/3 overflow-hidden bg-base-300 relative"
>
<ImageWithFallback
:src="props.media.PosterPath"
@@ -37,7 +37,7 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
/>
<!-- Glassy gradient shadow overlay -->
<div
class="absolute bottom-0 left-0 right-0 h-16 bg-linear-to-t from-white/40 via-white/20 to-transparent backdrop-blur-[0.5px] pointer-events-none"
class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-base-100/40 via-base-100/20 to-transparent backdrop-blur-[0.5px] pointer-events-none"
></div>
</router-link>
@@ -54,12 +54,12 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
class="block"
>
<h2
class="card-title text-base font-semibold bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent break-words"
class="card-title text-base font-semibold bg-gradient-to-r from-base-content/70 to-base-content/50 bg-clip-text text-transparent break-words"
>
{{ props.media.Title }}
</h2>
<time
class="text-sm text-gray-400"
class="text-sm text-base-content/60"
:datetime="
props.media.ReleaseDate === '' && props.media.FirstAirDate === ''
? 'unknown'
@@ -93,7 +93,7 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
<!-- Type badge -->
<span
class="badge badge-outline text-xs font-medium px-2 py-1"
:class="props.media.Adult ? 'badge-error' : ''"
:class="props.media.Adult ? 'badge-error' : 'text-base-content'"
>
{{ props.media.MediaType === 'movie' ? 'Movie' : 'Show' }}
</span>
@@ -103,7 +103,7 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
<button
v-motion-fade-visible-once
v-if="!alreadyAdded"
class="btn btn-circle btn-md px-1.5 bg-linear-to-r from-gray-100 to-gray-200 border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900 transition"
class="btn btn-circle btn-md px-1.5 bg-gradient-to-r from-base-300 to-base-200 border-base-content/30 text-base-content hover:from-base-200 hover:to-base-100 hover:text-base-content/90 transition"
@click="emit('add-media', props.media)"
>
<svg
@@ -124,7 +124,7 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
<button
v-motion-fade-visible-once
v-else
class="btn btn-circle btn-md px-1.5 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 hover:text-red-700 transition"
class="btn btn-circle btn-md px-1.5 bg-gradient-to-r from-error/10 to-error/20 border border-error/30 text-error hover:from-error/20 hover:to-error/30 hover:text-error-content transition"
@click="emit('remove-media', props.media.Id)"
>
<svg

16
src/components/NavBar.vue
View File

@@ -1,6 +1,6 @@
<template>
<nav
class="navbar sticky top-0 z-30 bg-white/70 backdrop-blur-md border-b border-gray-200/60 shadow-sm"
class="navbar sticky top-0 z-30 bg-base-100/70 backdrop-blur-md border-b border-base-content/20 shadow-sm"
>
<!-- Left: Logo + Mobile Menu -->
<div class="navbar-start">
@@ -9,7 +9,7 @@
<label tabindex="0" class="btn btn-ghost p-2" aria-label="Menu">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-700"
class="h-6 w-6 text-base-content/70"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -24,7 +24,7 @@
</label>
<ul
tabindex="0"
class="menu menu-sm dropdown-content mt-3 w-52 rounded-md bg-white/90 backdrop-blur-md shadow-lg border border-gray-200/60"
class="menu menu-sm dropdown-content mt-3 w-52 rounded-md bg-base-200/90 backdrop-blur-md shadow-lg border border-base-content/20"
>
<li><RouterLink to="/" class="nav-link">Home</RouterLink></li>
<li><RouterLink to="/list" class="nav-link">Library</RouterLink></li>
@@ -35,7 +35,7 @@
<!-- Logo -->
<RouterLink
to="/"
class="text-2xl font-extrabold tracking-tight bg-linear-to-r from-gray-700 via-indigo-500 to-cyan-400 bg-clip-text text-transparent"
class="text-2xl font-extrabold tracking-tight bg-gradient-to-r from-base-content/70 via-primary to-secondary bg-clip-text text-transparent"
>
TBW
</RouterLink>
@@ -54,7 +54,7 @@
<div class="navbar-end">
<RouterLink
to="/list"
class="btn px-5 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-5 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"
>
Go to Library
</RouterLink>
@@ -63,11 +63,11 @@
</template>
<style scoped>
@reference "tailwindcss";
@reference "@/style.css";
.nav-link {
@apply text-gray-700 font-medium transition-colors hover:text-gray-900;
@apply text-base-content font-medium transition-colors hover:text-base-content;
}
.router-link-active.nav-link {
@apply text-indigo-600 font-semibold;
@apply text-primary font-semibold;
}
</style>

2
src/style.css
View File

@@ -1,4 +1,4 @@
@import 'tailwindcss';
@plugin "daisyui" {
themes: lofi --default;
themes: forest --default;
}

12
src/views/HomeView.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts"></script>
<template>
<div class="relative isolate bg-white px-6 pt-16 lg:px-8">
<div class="relative isolate bg-base-100 px-6 pt-16 lg:px-8">
<!-- Top blurred gradient background -->
<div
class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
@@ -42,13 +42,13 @@
<span class="text-6xl font-extrabold gradient-text"> To Be Watched </span>
</h1>
<p class="text-lg text-gray-600 max-w-2xl mx-auto mb-12">
<p class="text-lg text-base-content/70 max-w-2xl mx-auto mb-12">
A simple and beautiful media list app built with Vue&nbsp;3 and Tailwind&nbsp;CSS (daisyUI).
</p>
<RouterLink
to="/add"
class="btn px-8 py-3 text-lg font-medium 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-8 py-3 text-lg font-medium 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"
>
Get Started
</RouterLink>
@@ -90,9 +90,9 @@
.gradient-text {
background: linear-gradient(
90deg,
#6b7280 0%,
/* gray-500 */ #818cf8 50%,
/* indigo-400 */ #22d3ee 100% /* cyan-400 */
oklch(68.628% 0.185 148.958) 0%,
/* primary */ oklch(69.776% 0.135 168.327) 50%,
/* secondary */ oklch(70.628% 0.119 185.713) 100% /* accent */
);
-webkit-background-clip: text;
background-clip: text;