fix: #461 allow for gradient customization

ThaUnknown · Jun 30, 2024 · c344d54 · c344d54
1 parent ec9d9ab
commit c344d54
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 7 deletions.
diff --git a/common/components/Sidebar.svelte b/common/components/Sidebar.svelte
@@ -205,7 +205,7 @@
   .sidebar-overlay {
     width: var(--sidebar-width);
     transition: width .8s cubic-bezier(0.25, 0.8, 0.25, 1), left .8s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
-    background: linear-gradient(90deg, #17191D 15.62%, rgba(23, 25, 29, 0.92) 36.46%, rgba(23, 25, 29, 0.619632) 70.83%, rgba(23, 25, 29, 0) 100%);
+    background: var(--sidebar-gradient);
     backdrop-filter: blur(2px);
     z-index: -1;
   }

diff --git a/common/components/banner/Banner.svelte b/common/components/banner/Banner.svelte
@@ -33,7 +33,7 @@
 
 <style>
   .gradient {
-    background: linear-gradient(0deg, #17191D 0%, #0000 15%, #0000 100%), linear-gradient(90deg, #17191D 0%, rgba(23, 25, 29, 0.885417) 15%, rgba(25, 28, 32, 0) 72%);
+    background: var(--banner-gradient);
   }
   .opacity-0 {
     opacity: 0;

diff --git a/common/components/cards/EpisodeCard.svelte b/common/components/cards/EpisodeCard.svelte
@@ -91,7 +91,7 @@
     -webkit-box-orient: vertical;
   }
   .image:after {
-    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 77.08%, rgba(0, 0, 0, 0.7) 100%);
+    background: var(--episode-card-gradient);
     content:'';
     position:absolute;
     left:0; top:0;

diff --git a/common/components/cards/EpisodePreviewCard.svelte b/common/components/cards/EpisodePreviewCard.svelte
@@ -128,7 +128,7 @@
     position: absolute;
     left: 0 ; bottom: 0;
     width: 100%; height: 100%;
-    background: linear-gradient(180deg, #0000 0%, #25292f00 80%, #25292f 95%, #25292f 100%);
+    background: var(--episode-preview-card-gradient);
   }
   .list-status-circle {
     background: var(--statusColor);

diff --git a/common/components/cards/PreviewCard.svelte b/common/components/cards/PreviewCard.svelte
@@ -157,7 +157,7 @@
     left: 0 ; bottom: 0;
     margin-bottom: -1px;
     width: 100%; height: 100% ;
-    background: linear-gradient(180deg, #0000 0%, #25292f00 80%, #25292fe3 95%, #25292f 100%);
+    background: var(--preview-card-gradient);
   }
   @keyframes load-in {
     from {

diff --git a/common/css.css b/common/css.css
@@ -23,6 +23,13 @@
   --gray-color-base-hue: 216;
   --safe-area-top: 0px;
   --safe-area-left: 0px;
+  --sidebar-gradient: linear-gradient(90deg, #17191D 15.62%, rgba(23, 25, 29, 0.92) 36.46%, rgba(23, 25, 29, 0.619632) 70.83%, rgba(23, 25, 29, 0) 100%);
+  --banner-gradient: linear-gradient(0deg, #17191D 0%, #0000 15%, #0000 100%), linear-gradient(90deg, #17191D 0%, rgba(23, 25, 29, 0.885417) 15%, rgba(25, 28, 32, 0) 72%);
+  --torrent-card-gradient: linear-gradient(90deg, #17191C 32%, rgba(23, 25, 28, 0.90) 100%);
+  --episode-card-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 77.08%, rgba(0, 0, 0, 0.7) 100%);
+  --episode-preview-card-gradient: linear-gradient(180deg, #0000 0%, #25292f00 80%, #25292f 95%, #25292f 100%);
+  --preview-card-gradient: linear-gradient(180deg, #0000 0%, #25292f00 80%, #25292fe3 95%, #25292f 100%);
+  --section-end-gradient: linear-gradient(270deg, #17191cff 0%, #17191c00 100%);
   color-scheme: dark;
 }
 .dark-mode {

diff --git a/common/views/Home/Section.svelte b/common/views/Home/Section.svelte
@@ -59,7 +59,7 @@
     right: 0;
     height: 100%;
     width: 8rem;
-    background: linear-gradient(270deg, #17191cff 0%, #17191c00 100%);
+    background: var(--section-end-gradient);
     pointer-events: none;
   }
   .gallery {

diff --git a/common/views/TorrentSearch/TorrentCard.svelte b/common/views/TorrentSearch/TorrentCard.svelte
@@ -79,7 +79,7 @@
   {#if media.bannerImage}
     <div class='position-absolute top-0 left-0 w-full h-full'>
       <img src={media.bannerImage} alt='bannerImage' class='img-cover w-full h-full' style='border-radius: 5px;' />
-      <div class='position-absolute top-0 left-0 w-full h-full' style='background: linear-gradient(90deg, #17191C 32%, rgba(23, 25, 28, 0.90) 100%);' />
+      <div class='position-absolute top-0 left-0 w-full h-full' style='background: var(--torrent-card-gradient)' />
     </div>
   {/if}
   <div class='d-flex pl-10 flex-column justify-content-between w-full h-100 position-relative' style='min-width: 0;'>