Maroon theme option screenshots

css/theme-options/maroon.css

@@ -1,30 +1,30 @@
 :root {
-    --main-bg-color: radial-gradient( circle farthest-corner at 48.4% 47.5%,  rgba(76,21,51,1) 0%, rgba(34,10,37,1) 90% ) center center/cover no-repeat fixed;
+  --main-bg-color: radial-gradient( circle farthest-corner at 48.4% 47.5%,  rgba(76,21,51,1) 0%, rgba(34,10,37,1) 90% ) center center/cover no-repeat fixed;
-    
-    --modal-bg-color: radial-gradient( circle farthest-corner at 48.4% 47.5%,  rgba(76,21,51,1) 0%, rgba(34,10,37,1) 90% ) center center/cover no-repeat fixed;
-    --modal-header-color: radial-gradient( circle farthest-corner at 48.4% 47.5%,  rgba(76,21,51,1) 0%, rgba(34,10,37,1) 90% ) center center/cover no-repeat fixed;
-    --modal-footer-color: radial-gradient( circle farthest-corner at 48.4% 47.5%,  rgba(76,21,51,1) 0%, rgba(34,10,37,1) 90% ) center center/cover no-repeat fixed;
   
-    --drop-down-menu-bg: #204c80;
+  --modal-bg-color: linear-gradient(-90deg, rgba(76,21,51,1) 0%, rgba(34,10,37,1) 90% ) center center/cover no-repeat fixed;
-    
+  --modal-header-color: linear-gradient(-90deg, rgba(76,21,51,1) 0%, rgba(34,10,37,1) 90% ) center center/cover no-repeat fixed;
-    --button-color: #7b154d;
+  --modal-footer-color: linear-gradient(-90deg, rgba(76,21,51,1) 0%, rgba(34,10,37,1) 90% ) center center/cover no-repeat fixed;
-    --button-color-hover: rgb(150, 26, 94);
+
-    --button-text: #eee;
+  --drop-down-menu-bg: #220a25;
-    --button-text-hover: #FFF;
+  
+  --button-color: #7b154d;
+  --button-color-hover: rgb(150, 26, 94);
+  --button-text: #eee;
+  --button-text-hover: #FFF;
+  
+  --accent-color: 208, 103, 160;
+  --accent-color-hover: rgb(var(--accent-color),.8);
+  --queue-color: #6b5;
+  --link-color: rgb(162, 28, 101);
+  --link-color-hover: rgb(194, 36, 122);
     
-    --accent-color: 208, 103, 160;
+  --text:#dadada;
-    --accent-color-hover: rgb(var(--accent-color),.8);
+  --text-hover: #fff;
-    --queue-color: #6b5;
+  --text-muted: #999;
-    --link-color: rgb(162, 28, 101);
-    --link-color-hover: rgb(150, 26, 94);
-      
-    --text:#dadada;
-    --text-hover: #fff;
-    --text-muted: #999;
 
-    --arr-queue-color: rgb(0, 255, 157);
+  --arr-queue-color: rgb(0, 255, 157);
-    --plex-poster-unwatched: rgb(123, 21, 77);
+  --plex-poster-unwatched: rgb(123, 21, 77);
-    --petio-spinner: invert(13%) sepia(77%) saturate(2418%) hue-rotate(306deg) brightness(94%) contrast(98%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */
+  --petio-spinner: invert(13%) sepia(77%) saturate(2418%) hue-rotate(306deg) brightness(94%) contrast(98%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */
-    --gitea-color-primary-dark-4: 150, 26, 94;
+  --gitea-color-primary-dark-4: 150, 26, 94;
-    --overseerr-gradient: linear-gradient(0deg, rgba(76,21,51,.9) 0%, rgb(34,10,37,.9) 100%) center center/cover no-repeat fixed;
+  --overseerr-gradient: linear-gradient(0deg, rgba(76,21,51,.9) 0%, rgb(34,10,37,.9) 100%) center center/cover no-repeat fixed;
   }

resources/landing-page/css/custom.css

@@ -360,7 +360,7 @@ p {
 }
 
 #portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.plex-hover {
-    background: url(/resources/blur-noise.png) repeat scroll 0% 0%, radial-gradient(circle at 0% 100%, rgba(54, 66, 84, 0.55) 0%, rgba(54, 66, 84, 0.043) 70%, rgba(54, 66, 84, 0) 80%), radial-gradient(circle at 100% 100%, rgba(113, 135, 153, 0.55) 0%, rgba(113, 135, 153, 0.043) 70%, rgba(113, 135, 153, 0) 80%), radial-gradient(circle at 100% 0%, rgba(54, 66, 84, 0.55) 0%, rgba(54, 66, 84, 0.043) 70%, rgba(54, 66, 84, 0) 80%), radial-gradient(circle at 0% 0%, rgba(91, 114, 135, 0.55) 0%, rgba(91, 114, 135, 0.043) 70%, rgba(91, 114, 135, 0) 80%), rgb(0, 0, 0);
+    background:  radial-gradient(circle farthest-side at 0% 100%, rgb(47, 47, 47) 0%, rgba(47, 47, 47, 0) 100%), radial-gradient(circle farthest-side at 100% 100%, rgb(63, 63, 63) 0%, rgba(63, 63, 63, 0) 100%), radial-gradient(circle farthest-side at 100% 0%, rgb(76, 76, 76) 0%, rgba(76, 76, 76, 0) 100%), radial-gradient(circle farthest-side at 0% 0%, rgb(58, 58, 58) 0%, rgba(58, 58, 58, 0) 100%), rgba(0, 0, 0, 0.5) center center/cover no-repeat fixed;
 }
 
 #portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.dracula-hover {
@@ -379,6 +379,10 @@ p {
     background: #2E3440;
 }
 
+#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.maroon-hover {
+    background: linear-gradient(0deg, rgba(76,21,51,.9) 0%, rgb(34,10,37,.9) 100%) center center/cover no-repeat fixed;;
+}
+
 
 @keyframes fadein {
     from {