diff --git a/README.md b/README.md index ffe4387e..405a3d02 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,7 @@ Dark Plex Nord +Maroon

Installation

diff --git a/css/addons/whisparr/whisparr-darker/whisparr-darker.css b/css/addons/whisparr/whisparr-darker/whisparr-darker.css new file mode 100644 index 00000000..454a5ef5 --- /dev/null +++ b/css/addons/whisparr/whisparr-darker/whisparr-darker.css @@ -0,0 +1,54 @@ +@import url("/css/defaults/servarr-darker-base.css"); +:root { + --main-bg-color: #202020; + + --modal-bg-color: #2a2a2a; + --modal-header-color: #2a2a2a; + --modal-footer-color: #2a2a2a; + + --drop-down-menu-bg: #333; + + --button-color: #5899eb; + --button-color-hover: #4b91ea; + --button-text: #eee; + --button-text-hover: #fff; + + --accent-color: 255, 105, 180; + --accent-color-hover: rgba(255, 105, 180, 0.8); + --link-color: #ff69b4; + --link-color-hover: rgb(255, 105, 180, .8); + --label-text-color: #333; + + --text: #ccc; + --text-hover: #fff; + --text-muted: #999; + + /*Specials*/ + --arr-queue-color: #5d9cec; + --side-menu-active: #333333; + --scroller-hover: #606060; + --scroller: #707070; + --border-color: #606060; + --label-color: #ff69b4; + --label-info: #5d9cec; + --header-color: #2a2a2a; + --toolbar-background: #262626; + --side-menu-color: #2a2a2a; + --side-menu-link-color: #ff69b4; +} + +/* SEARCH DROP DOWN */ + +[class*="MovieSearchInput-containerOpen-"] [class*="MovieSearchInput-movieContainer-"] { + border: 1px solid var(--drop-down-menu-bg); + background-color: var(--drop-down-menu-bg); + box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); + color: #e1e2e3; +} + +/* SERIES PAGE */ + +[class*="MovieIndexPoster-controls-"] { + background-color: var(--label-color) !important; + color: var(--label-text-color) !important; +} \ No newline at end of file diff --git a/css/defaults/servarr-base.css b/css/defaults/servarr-base.css index 1cafce54..fda00ea9 100644 --- a/css/defaults/servarr-base.css +++ b/css/defaults/servarr-base.css @@ -398,7 +398,7 @@ a:hover { color: var(--label-text-color); } -[class*="PageSidebarItem-status-"][class*="Label-info-"] { +[class*="PageSidebarItem-status-"] [class*="Label-info-"] { border-color: var(--arr-queue-color); background-color: var(--arr-queue-color); color: var(--label-text-color); diff --git a/css/defaults/servarr-darker-base.css b/css/defaults/servarr-darker-base.css index 867417fa..edcfe76d 100644 --- a/css/defaults/servarr-darker-base.css +++ b/css/defaults/servarr-darker-base.css @@ -79,6 +79,12 @@ color: #000; } +[class*="PageSidebarItem-status-"] [class*="Label-info-"] { + border-color: var(--arr-queue-color); + background-color: var(--arr-queue-color); + color: #fff; +} + /* SETTINGS */ [class*=Settings-link-] { diff --git a/css/theme-options/maroon.css b/css/theme-options/maroon.css index 7fcc03bd..2260540a 100644 --- a/css/theme-options/maroon.css +++ b/css/theme-options/maroon.css @@ -1,30 +1,31 @@ :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; - - --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; + --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; - --drop-down-menu-bg: #204c80; - - --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(150, 26, 94); - - --text:#dadada; - --text-hover: #fff; - --text-muted: #999; + --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; + --modal-footer-color: linear-gradient(-90deg, rgba(76,21,51,1) 0%, rgba(34,10,37,1) 90% ) center center/cover no-repeat fixed; - --arr-queue-color: rgb(0, 255, 157); - --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 */ - --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; + --drop-down-menu-bg: #220a25; + + --button-color: #7b154d; + --button-color-hover: rgb(150, 26, 94); + --button-text: #eee; + --button-text-hover: #FFF; + + --accent-color: 162, 28, 101; + --accent-color-hover: rgb(var(--accent-color),.8); + --link-color: rgb(162, 28, 101); + --link-color-hover: rgb(194, 36, 122); + --label-text-color: #fff; + + --text:#dadada; + --text-hover: #fff; + --text-muted: #999; + + /*Specials*/ + --arr-queue-color: #6b5; /* Servarr apps + Bazarr*/ + --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 */ + --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; } \ No newline at end of file diff --git a/css/theme-options/plex.css b/css/theme-options/plex.css index 1d475303..2c3d0660 100644 --- a/css/theme-options/plex.css +++ b/css/theme-options/plex.css @@ -31,5 +31,5 @@ --plex-poster-unwatched: #e5a00d; --petio-spinner: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%);/* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ --gitea-color-primary-dark-4: 255, 193, 7; - --overseerr-gradient: 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%) center center/cover no-repeat fixed , 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%) center center/cover no-repeat fixed , rgb(0, 0, 0,.9) center center/cover no-repeat fixed; - } \ No newline at end of file + --overseerr-gradient: 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; + } \ No newline at end of file diff --git a/resources/landing-page/assets/img/maroon-small.jpg b/resources/landing-page/assets/img/maroon-small.jpg new file mode 100644 index 00000000..279bfe73 Binary files /dev/null and b/resources/landing-page/assets/img/maroon-small.jpg differ diff --git a/resources/landing-page/assets/img/maroon.png b/resources/landing-page/assets/img/maroon.png new file mode 100644 index 00000000..2c065287 Binary files /dev/null and b/resources/landing-page/assets/img/maroon.png differ diff --git a/resources/landing-page/assets/img/plex-small.jpg b/resources/landing-page/assets/img/plex-small.jpg index 9da859a8..465f8863 100644 Binary files a/resources/landing-page/assets/img/plex-small.jpg and b/resources/landing-page/assets/img/plex-small.jpg differ diff --git a/resources/landing-page/assets/img/plex.png b/resources/landing-page/assets/img/plex.png index 9a6dda5f..9408aa82 100644 Binary files a/resources/landing-page/assets/img/plex.png and b/resources/landing-page/assets/img/plex.png differ diff --git a/resources/landing-page/css/custom.css b/resources/landing-page/css/custom.css index 4163e425..e9386f94 100644 --- a/resources/landing-page/css/custom.css +++ b/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 {