diff --git a/frontend/.stylelintrc b/frontend/.stylelintrc
index fb0d550bf..019d72ae1 100644
--- a/frontend/.stylelintrc
+++ b/frontend/.stylelintrc
@@ -4,6 +4,7 @@
],
"ignoreFiles": [
"frontend/src/Styles/scaffolding.css",
+ "**/Theme.Park/**/*.css",
"**/*.js"
],
"rules": {
diff --git a/frontend/build/webpack.config.js b/frontend/build/webpack.config.js
index 6f324ac95..1c44380f1 100644
--- a/frontend/build/webpack.config.js
+++ b/frontend/build/webpack.config.js
@@ -124,6 +124,20 @@ module.exports = (env) => {
{
source: 'frontend/src/Content/robots.txt',
destination: path.join(distFolder, 'Content/robots.txt')
+ },
+
+ // Theme.Park
+ {
+ source: 'frontend/src/Content/Theme.Park/*',
+ destination: path.join(distFolder, 'Content/Theme.Park')
+ },
+ {
+ source: 'frontend/src/Content/Theme.Park/Themes/*',
+ destination: path.join(distFolder, 'Content/Theme.Park/Themes')
+ },
+ {
+ source: 'frontend/src/Content/Theme.Park/Resources/*',
+ destination: path.join(distFolder, 'Content/Theme.Park/Resources')
}
]
}
@@ -243,6 +257,19 @@ module.exports = (env) => {
}
}
]
+ },
+
+ {
+ test: /\.(png)?$/,
+ use: [
+ {
+ loader: 'file-loader',
+ options: {
+ emitFile: false,
+ name: 'Content/Theme.Park/Resources/[name].[ext]'
+ }
+ }
+ ]
}
]
}
diff --git a/frontend/src/App/ThemeSelector.js b/frontend/src/App/ThemeSelector.js
new file mode 100644
index 000000000..f60e2da0f
--- /dev/null
+++ b/frontend/src/App/ThemeSelector.js
@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const theme = window.Radarr.theme;
+
+function ThemeSelector({ children }) {
+ return (
+ <>
+ {
+ theme !== 'default' &&
+ <>
+
+
+
+ }
+ {children}
+
+ );
+}
+
+ThemeSelector.propTypes = {
+ children: PropTypes.object.isRequired
+};
+
+export default ThemeSelector;
diff --git a/frontend/src/Components/Form/FormInputGroup.js b/frontend/src/Components/Form/FormInputGroup.js
index 1c50e3398..c097624dd 100644
--- a/frontend/src/Components/Form/FormInputGroup.js
+++ b/frontend/src/Components/Form/FormInputGroup.js
@@ -113,6 +113,8 @@ function FormInputGroup(props) {
helpTexts,
helpTextWarning,
helpLink,
+ inlineLink,
+ tooltip,
pending,
errors,
warnings,
@@ -182,6 +184,9 @@ function FormInputGroup(props) {
!checkInput && helpText &&
}
@@ -263,6 +268,8 @@ FormInputGroup.propTypes = {
helpTexts: PropTypes.arrayOf(PropTypes.string),
helpTextWarning: PropTypes.string,
helpLink: PropTypes.string,
+ inlineLink: PropTypes.string,
+ tooltip: PropTypes.string,
pending: PropTypes.bool,
errors: PropTypes.arrayOf(PropTypes.object),
warnings: PropTypes.arrayOf(PropTypes.object)
diff --git a/frontend/src/Content/Theme.Park/Resources/blur-noise.png b/frontend/src/Content/Theme.Park/Resources/blur-noise.png
new file mode 100644
index 000000000..45e676186
Binary files /dev/null and b/frontend/src/Content/Theme.Park/Resources/blur-noise.png differ
diff --git a/frontend/src/Content/Theme.Park/Themes/aquamarine.css b/frontend/src/Content/Theme.Park/Themes/aquamarine.css
new file mode 100644
index 000000000..88dd6fe68
--- /dev/null
+++ b/frontend/src/Content/Theme.Park/Themes/aquamarine.css
@@ -0,0 +1,30 @@
+:root {
+ --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
+
+ --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
+ --modal-header-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
+ --modal-footer-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
+
+ --drop-down-menu-bg: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
+
+ --button-color: #009688;
+ --button-color-hover: #12afa0;
+ --button-text: #eee;
+ --button-text-hover: #FFF;
+
+ --accent-color: 18, 175, 160;
+ --accent-color-hover: rgb(var(--accent-color),.8);
+ --link-color: #0ed2bf;
+ --link-color-hover: #36e7d6;
+ --label-text-color: #fff;
+
+ --text:#ddd;
+ --text-hover: #fff;
+ --text-muted: #999;
+
+ /*Specials*/
+ --arr-queue-color: #009688; /* Servarr apps + Bazarr*/
+ --plex-poster-unwatched: rgb(21, 213, 194);
+ --petio-spinner: invert(39%) sepia(98%) saturate(527%) hue-rotate(129deg) brightness(94%) contrast(101%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */
+ --gitea-color-primary-dark-4: 18, 175, 160;
+}
diff --git a/frontend/src/Content/Theme.Park/Themes/dark.css b/frontend/src/Content/Theme.Park/Themes/dark.css
new file mode 100644
index 000000000..d3ecc7ac6
--- /dev/null
+++ b/frontend/src/Content/Theme.Park/Themes/dark.css
@@ -0,0 +1,30 @@
+:root {
+ --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
+
+ --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
+ --modal-header-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
+ --modal-footer-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
+
+ --drop-down-menu-bg: #2d2d2d;
+
+ --button-color: #7a7a7a;
+ --button-color-hover: #9b9b9b;
+ --button-text: #eee;
+ --button-text-hover: #FFF;
+
+ --accent-color: 170, 170, 170;
+ --accent-color-hover: rgba(255, 255, 255, 0.45);
+ --link-color: #7a7a7a;
+ --link-color-hover: #fff;
+ --label-text-color: black;
+
+ --text:#ddd;
+ --text-hover: #fff;
+ --text-muted: #999;
+
+ /*Specials*/
+ --arr-queue-color: #6b5; /* Servarr apps + Bazarr*/
+ --plex-poster-unwatched: #e5a00d;
+ --petio-spinner: invert(35%) sepia(12%) saturate(4%) hue-rotate(2deg) brightness(104%) contrast(86%);/* Made with https://codepen.io/jsm91/embed/ZEEawyZ */
+ --gitea-color-primary-dark-4: 255, 255, 255;
+}
\ No newline at end of file
diff --git a/frontend/src/Content/Theme.Park/Themes/dracula.css b/frontend/src/Content/Theme.Park/Themes/dracula.css
new file mode 100644
index 000000000..f7fbf04f6
--- /dev/null
+++ b/frontend/src/Content/Theme.Park/Themes/dracula.css
@@ -0,0 +1,30 @@
+:root {
+ --main-bg-color: #282a36;
+
+ --modal-bg-color: #1e2029;
+ --modal-header-color: #1e2029;
+ --modal-footer-color: #1e2029;
+
+ --drop-down-menu-bg: #1e2029;
+
+ --button-color: #bd93f9;
+ --button-color-hover: #ff79c6;
+ --button-text: #eee;
+ --button-text-hover: #FFF;
+
+ --accent-color: 80, 250, 123;
+ --accent-color-hover: rgb(var(--accent-color),.8);
+ --link-color: #ff79c6;
+ --link-color-hover: #8be9fd;
+ --label-text-color: #282a36;
+
+ --text:#6272a4;
+ --text-hover: #95adfa;
+ --text-muted: #999;
+
+ /*Specials*/
+ --arr-queue-color: #50fa7b; /* Servarr apps + Bazarr*/
+ --plex-poster-unwatched: #bd93f9;
+ --petio-spinner: invert(79%) sepia(27%) saturate(1033%) hue-rotate(74deg) brightness(104%) contrast(96%);/* Made with https://codepen.io/jsm91/embed/ZEEawyZ */
+ --gitea-color-primary-dark-4: 80, 250, 123;
+ }
\ No newline at end of file
diff --git a/frontend/src/Content/Theme.Park/Themes/hotline.css b/frontend/src/Content/Theme.Park/Themes/hotline.css
new file mode 100644
index 000000000..f576a9d6c
--- /dev/null
+++ b/frontend/src/Content/Theme.Park/Themes/hotline.css
@@ -0,0 +1,30 @@
+:root {
+ --main-bg-color: linear-gradient(0deg, rgba(247,101,184,1) 0%, rgb(21, 95, 165) 100%) center center/cover no-repeat fixed;
+
+ --modal-bg-color: linear-gradient(0deg, rgba(247,101,184,1) 0%, rgb(21, 95, 165) 100%) center center/cover no-repeat fixed;
+ --modal-header-color: linear-gradient(0deg, rgba(247,101,184,1) 0%, rgb(21, 95, 165) 100%) center center/cover no-repeat fixed;
+ --modal-footer-color: linear-gradient(0deg, rgba(247,101,184,1) 0%, rgb(21, 95, 165) 100%) center center/cover no-repeat fixed;
+
+ --drop-down-menu-bg: linear-gradient(90deg, rgba(247,101,184,1) 0%, rgba(21, 95, 165) 100%) center center/cover no-repeat fixed;
+
+ --button-color: #f98dc9;
+ --button-color-hover: #ff4cb1;
+ --button-text: #eee;
+ --button-text-hover: #fff;
+
+ --accent-color: 249, 141, 201;
+ --accent-color-hover: rgb(var(--accent-color),.8);
+ --link-color:rgb(255, 179, 222);
+ --link-color-hover: #d7fffe;
+ --label-text-color: #fff;
+
+ --text:#ddd;
+ --text-hover: #fff;
+ --text-muted: #999;
+
+ /*Specials*/
+ --arr-queue-color: #f98dc9; /* Servarr apps + Bazarr*/
+ --plex-poster-unwatched: #f765b8;
+ --petio-spinner: invert(78%) sepia(17%) saturate(4447%) hue-rotate(290deg) brightness(109%) contrast(95%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */
+ --gitea-color-primary-dark-4: 215,255,254;
+}
\ No newline at end of file
diff --git a/frontend/src/Content/Theme.Park/Themes/hotpink.css b/frontend/src/Content/Theme.Park/Themes/hotpink.css
new file mode 100644
index 000000000..864dc7f67
--- /dev/null
+++ b/frontend/src/Content/Theme.Park/Themes/hotpink.css
@@ -0,0 +1,30 @@
+:root {
+ --main-bg-color: linear-gradient(45deg, #fb3f62 0%, #204c80 37%, #004249 97%) center center/cover no-repeat fixed;
+
+ --modal-bg-color: radial-gradient(circle, #204c80 0%, #000 100%) center center/cover no-repeat fixed;
+ --modal-header-color: radial-gradient(circle, #204c80 0%, #000 100%) center center/cover no-repeat fixed;
+ --modal-footer-color: radial-gradient(circle, #204c80 0%, #000 100%) center center/cover no-repeat fixed;
+
+ --drop-down-menu-bg: #204c80;
+
+ --button-color: #fb3f62;
+ --button-color-hover: #cd4164;
+ --button-text: #eee;
+ --button-text-hover: #FFF;
+
+ --accent-color: 251, 63, 98;
+ --accent-color-hover: rgba(var(--accent-color), .8);
+ --link-color: rgb(0, 255, 157);
+ --link-color-hover: rgba(0, 255, 157, 0.8);
+ --label-text-color: #282a36;
+
+ --text:#eee;
+ --text-hover: #fff;
+ --text-muted: #999;
+
+ --arr-queue-color: rgb(0, 255, 157);
+ --plex-poster-unwatched: #fb3f62;
+ --petio-spinner: invert(29%) sepia(87%) saturate(2199%) hue-rotate(331deg) brightness(115%) contrast(97%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */
+ --gitea-color-primary-dark-4: 251, 63, 98;
+ }
+
diff --git a/frontend/src/Content/Theme.Park/Themes/nord.css b/frontend/src/Content/Theme.Park/Themes/nord.css
new file mode 100644
index 000000000..2de36393c
--- /dev/null
+++ b/frontend/src/Content/Theme.Park/Themes/nord.css
@@ -0,0 +1,30 @@
+:root {
+ --main-bg-color: #2E3440;
+
+ --modal-bg-color: #3B4252;
+ --modal-header-color: #434C5E;
+ --modal-footer-color: #434C5E;
+
+ --drop-down-menu-bg: #3B4252;
+
+ --button-color: #79b8ca;
+ --button-color-hover: #6a9daf;
+ --button-text: #2E3440;
+ --button-text-hover: #D8DEE9;
+
+ --accent-color: 121, 184, 202;
+ --accent-color-hover: rgb(var(--accent-color),.8);
+ --link-color: #81A1C1;
+ --link-color-hover: #88C0D0;
+ --label-text-color: #222730;
+
+ --text:#D8DEE9;
+ --text-hover: #ECEFF4;
+ --text-muted: #81A1C1;
+
+ /*Specials*/
+ --arr-queue-color: #A3BE8C; /* Servarr apps + Bazarr*/
+ --plex-poster-unwatched: #D08770;
+ --petio-spinner: invert(83%) sepia(9%) saturate(1787%) hue-rotate(156deg) brightness(85%) contrast(83%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */
+ --gitea-color-primary-dark-4: 121, 184, 202;
+ }
\ No newline at end of file
diff --git a/frontend/src/Content/Theme.Park/Themes/organizr.css b/frontend/src/Content/Theme.Park/Themes/organizr.css
new file mode 100644
index 000000000..279336e25
--- /dev/null
+++ b/frontend/src/Content/Theme.Park/Themes/organizr.css
@@ -0,0 +1,30 @@
+:root {
+ --main-bg-color: #1f1f1f;
+
+ --modal-bg-color: #333;
+ --modal-header-color: #232323;
+ --modal-footer-color: #232323;
+
+ --drop-down-menu-bg: #1b1b1b;
+
+ --button-color: #2cabe3;
+ --button-color-hover: #298fbc;
+ --button-text: #eee;
+ --button-text-hover: #fff;
+
+ --accent-color: 44, 171, 227;
+ --accent-color-hover: rgb(var(--accent-color),.8);
+ --link-color: #2cabe3;
+ --link-color-hover: #3cc5ff;
+ --label-text-color: #fff;
+
+ --text:#96a2b4;
+ --text-hover: #fff;
+ --text-muted: #999;
+
+ /*Specials*/
+ --arr-queue-color: #2cabe3; /* Servarr apps + Bazarr*/
+ --plex-poster-unwatched: #2cabe3;
+ --petio-spinner: invert(65%) sepia(83%) saturate(2026%) hue-rotate(167deg) brightness(90%) contrast(97%);/* Made with https://codepen.io/jsm91/embed/ZEEawyZ */
+ --gitea-color-primary-dark-4: 44, 171, 227;
+}
\ No newline at end of file
diff --git a/frontend/src/Content/Theme.Park/Themes/overseerr.css b/frontend/src/Content/Theme.Park/Themes/overseerr.css
new file mode 100644
index 000000000..7cffcc5ed
--- /dev/null
+++ b/frontend/src/Content/Theme.Park/Themes/overseerr.css
@@ -0,0 +1,30 @@
+:root {
+ --main-bg-color: linear-gradient(360deg, hsl(221, 39%, 11%) 65%, hsl(215, 28%, 17%) 100%);
+
+ --modal-bg-color: #1f2937;
+ --modal-header-color: #1f2937;
+ --modal-footer-color: #1f2937;
+
+ --drop-down-menu-bg: #374151;
+
+ --button-color: #4f46e5;
+ --button-color-hover: #6366f1;
+ --button-text: #e5e7eb;
+ --button-text-hover: #fff;
+
+ --accent-color: 167, 139, 250;
+ --accent-color-hover: rgb(var(--accent-color),.8);
+ --link-color: #6366f1;
+ --link-color-hover: #a78bfa;
+ --label-text-color: #000;
+
+ --text: #d1d5db;
+ --text-hover: #fff;
+ --text-muted: #9ca3af;
+
+ /*Specials*/
+ --arr-queue-color: #6366f1; /* Servarr apps + Bazarr*/
+ --plex-poster-unwatched: #6366f1;
+ --petio-spinner: invert(24%) sepia(59%) saturate(3411%) hue-rotate(237deg) brightness(91%) contrast(96%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */
+ --gitea-color-primary-dark-4: 98, 116, 145;
+}
\ No newline at end of file
diff --git a/frontend/src/Content/Theme.Park/Themes/plex.css b/frontend/src/Content/Theme.Park/Themes/plex.css
new file mode 100644
index 000000000..4dfde0f1f
--- /dev/null
+++ b/frontend/src/Content/Theme.Park/Themes/plex.css
@@ -0,0 +1,28 @@
+:root {
+ --main-bg-color: 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) center center/cover no-repeat fixed;
+
+ --modal-bg-color: #1f2326;
+ --modal-header-color: #1f2326;
+ --modal-footer-color: #323232;
+
+ --drop-down-menu-bg: #191a1c;
+
+ --button-color: #cc7b19;
+ --button-color-hover: #e59029;
+ --button-text: #eee;
+ --button-text-hover: #fff;
+
+ --accent-color: 229, 160, 13;
+ --accent-color-hover: #ffc107;
+ --link-color: #e5a00d;
+ --link-color-hover: #fff;
+ --label-text-color: #fff;
+
+ --text:#ddd;
+ --text-hover: #fff;
+ --text-muted: #999;
+
+ --arr-queue-color: #27c24c;
+ --petio-spinner: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%);
+ --gitea-color-primary-dark-4: 255, 193, 7;
+}
diff --git a/frontend/src/Content/Theme.Park/Themes/radarr-darker.css b/frontend/src/Content/Theme.Park/Themes/radarr-darker.css
new file mode 100644
index 000000000..1b7f3bca4
--- /dev/null
+++ b/frontend/src/Content/Theme.Park/Themes/radarr-darker.css
@@ -0,0 +1,124 @@
+:root {
+ --main-bg-color: #454545;
+
+ --modal-bg-color: #595959;
+ --modal-header-color: #595959;
+ --modal-footer-color: #595959;
+
+ --drop-down-menu-bg: #606060;
+
+ --button-color: #5899eb;
+ --button-color-hover: #4b91ea;
+ --button-text: #eee;
+ --button-text-hover: #fff;
+
+ --accent-color: 255, 194, 48;
+ --accent-color-hover: rgb(255, 194, 48, .8);
+ --link-color: rgb(255, 194, 48);
+ --link-color-hover: rgb(255, 194, 48, .8);
+ --label-text-color: #eee;
+
+ --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: #707070;
+ --label-info: #5d9cec;
+ --header-color: #464b51;
+ --side-menu-color: #595959;
+}
+
+/* HEADER */
+
+[class*="PageHeader-header-"] {
+ background-color: var(--header-color);
+ color: #fff;
+}
+
+[class*="PageToolbar-toolbar-"] {
+ background-color: #707070;
+ color: var(--text);
+}
+
+/* SIDE MENU */
+
+[class*="PageSidebar-sidebar-"] {
+ background-color: var(--side-menu-color);
+ color: #fff;
+}
+
+[class*=PageSidebarItem-link-]:focus {
+ color: rgb(var(--accent-color)) !important;
+}
+
+[class*=PageSidebarItem-isActiveLink-] {
+ color: var(--link-color) !important;
+}
+
+[class*=PageSidebarItem-isActiveParentLink-] {
+ background-color: var(--side-menu-active);
+}
+
+/* SCROLLER */
+[class*=ImportSeriesSelectSeries-results-]::-webkit-scrollbar-thumb:hover,
+[class*=OverlayScroller-thumb-]:hover {
+ background-color: var(--scroller-hover) !important;
+}
+
+[class*="OverlayScroller-thumb-"],
+[class*=Scroller-scroller-]::-webkit-scrollbar-thumb {
+ background-color: var(--scroller) !important;
+}
+
+/* MODALS */
+
+[class*=ModalHeader-modalHeader-],
+[class*=FieldSet-legend-] {
+ border-bottom: 1px solid var(--border-color);
+}
+
+[class*=ModalFooter-modalFooter-] {
+ border-top: 1px solid var(--border-color);
+}
+
+/* LABLES */
+
+[class*="Label-default-"] {
+ border-color: var(--label-color);
+ background-color: var(--label-color);
+ color: white;
+}
+
+[class*="Label-info-"]:not([class*="PageSidebarItem-status-"] [class*="Label-info-"]) {
+ border-color: var(--label-info);
+ background-color: var(--label-info);
+ color: #fff;
+}
+
+/* SETTINGS */
+
+[class*=Settings-link-] {
+ border-bottom: 1px solid var(--border-color);
+}
+
+/* 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: #fff !important;
+}
\ No newline at end of file
diff --git a/frontend/src/Content/Theme.Park/Themes/space-gray.css b/frontend/src/Content/Theme.Park/Themes/space-gray.css
new file mode 100644
index 000000000..bcfda52b0
--- /dev/null
+++ b/frontend/src/Content/Theme.Park/Themes/space-gray.css
@@ -0,0 +1,30 @@
+:root {
+ --main-bg-color: radial-gradient(ellipse at center, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed;
+
+ --modal-bg-color: radial-gradient(ellipse at top, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed;
+ --modal-header-color: radial-gradient(ellipse at top, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed;
+ --modal-footer-color: radial-gradient(ellipse at top, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed;
+
+ --drop-down-menu-bg: radial-gradient(ellipse at top, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed;
+
+ --button-color: #607D8B;
+ --button-color-hover: #81a6b7;
+ --button-text: #eee;
+ --button-text-hover: #fff;
+
+ --accent-color: 129, 166, 183;
+ --accent-color-hover: rgb(var(--accent-color),.8);
+ --link-color: #81a6b7;
+ --link-color-hover: #9adfff;
+ --label-text-color: #fff;
+
+ --text:#bbb;
+ --text-hover: #fff;
+ --text-muted: #999;
+
+ /*Specials*/
+ --arr-queue-color: #81a6b7; /* Servarr apps + Bazarr*/
+ --plex-poster-unwatched: #70aeca;
+ --petio-spinner: invert(50%) sepia(31%) saturate(341%) hue-rotate(155deg) brightness(88%) contrast(85%);/* Made with https://codepen.io/jsm91/embed/ZEEawyZ */
+ --gitea-color-primary-dark-4: 129, 166, 183;
+}
\ No newline at end of file
diff --git a/frontend/src/Content/Theme.Park/radarr-base.css b/frontend/src/Content/Theme.Park/radarr-base.css
new file mode 100644
index 000000000..7e122cbc4
--- /dev/null
+++ b/frontend/src/Content/Theme.Park/radarr-base.css
@@ -0,0 +1,1101 @@
+/* dP dP dP */
+/* 88 88 88 */
+/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
+/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */
+/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */
+/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */
+/* 88 */
+/* dP */
+
+/* Made by @gilbN */
+/* https://github.com/gilbN/theme.park */
+:root {
+ --calendar-in-cinemas: 53, 197, 244;
+ --calendar-downloading: 122 67 182;
+ --calendar-unmonitored: 173 173 173;
+ --calendar-unaired: 93 156 236;
+ --calendar-missing: 240 80 80;
+ --calendar-available: 39 194 76;
+ }
+
+body {
+ background: var(--main-bg-color);
+ background-repeat: repeat, no-repeat;
+ background-attachment: fixed, fixed;
+ background-position: center center, center center;
+ background-size: auto, cover;
+ -webkit-background-size: auto, cover;
+ -moz-background-size: auto, cover;
+ -o-background-size: auto, cover;
+ color: var(--text);
+}
+
+/* Froms */
+
+[class*="FormInputHelpText-helpText-"] {
+ color: var(--text);
+}
+
+[class*="FormInputGroup-inputUnit-"] {
+ color: var(--text) !important;
+}
+
+/* LINKS */
+[class*="Link-to-"] {
+ color: var(--text);
+}
+
+[class*="Link-to-"]:hover {
+ color: var(--text-hover);
+ text-decoration: none;
+}
+
+a {
+ color: var(--link-color);
+}
+
+a:hover {
+ color: var(--link-color-hover);
+}
+
+[class*="TableRowCell-cell-"] [class*="Link-to-"] {
+ color: var(--link-color) !important;
+}
+
+[class*="TableRowCell-cell-"] [class*="Link-to-"]:hover {
+ color: var(--link-color-hover) !important;
+}
+
+/* Buttons */
+
+[class*="Button-default-"] {
+ color: var(--button-text);
+ background-color: var(--button-color);
+ border-color: transparent;
+}
+
+[class*="Button-default-"]:hover {
+ border-color: transparent;
+ background-color: var(--button-color-hover) !important;
+ color: var(--button-text-hover);
+}
+
+[class*="Button-primary-"] {
+ border-color: transparent;
+ background-color: var(--button-color);
+ color: var(--button-text);
+}
+
+[class*="Button-primary-"]:hover {
+ border-color: transparent;
+ background-color: var(--button-color-hover) !important;
+ color: var(--button-text-hover);
+}
+
+[class*="Button-success-"] {
+ border-color: var(--button-color);
+ background-color: var(--button-color);
+ color: var(--button-text);
+}
+
+[class*="Button-success-"]:hover {
+ border-color: var(--button-color-hover);
+ background-color: var(--button-color-hover);
+ color: var(--button-text-hover);
+}
+
+/* LOADING PAGE */
+[class*="ErrorPage-page-"],
+[class*="ErrorPage-version-"],
+[class*="LoadingMessage-loadingMessage-"] {
+ color: var(--text);
+}
+
+[class*="LoadingIndicator-ripple-"] {
+ border: 2px solid #fff;
+}
+
+/* MODAL */
+[class*="ModalHeader-modalHeader-"] {
+ background: var(--modal-header-color);
+ background-repeat: repeat, no-repeat;
+ background-attachment: fixed, fixed;
+ background-position: center center, center center;
+ background-size: auto, cover;
+ -webkit-background-size: auto, cover;
+ -moz-background-size: auto, cover;
+ -o-background-size: auto, cover;
+ color: var(--text-hover);
+ border-bottom: 1px solid rgb(var(--accent-color));
+}
+
+[class*="ModalContent-modalContent-"] {
+ background: var(--modal-bg-color);
+ background-repeat: repeat, no-repeat;
+ background-attachment: fixed, fixed;
+ background-position: center center, center center;
+ background-size: auto, cover;
+ -webkit-background-size: auto, cover;
+ -moz-background-size: auto, cover;
+ -o-background-size: auto, cover;
+ color: var(--text);
+}
+
+[class*="ModalFooter-modalFooter-"] {
+ background: var(--modal-footer-color);
+ background-repeat: repeat, no-repeat;
+ background-attachment: fixed, fixed;
+ background-position: center center, center center;
+ background-size: auto, cover;
+ -webkit-background-size: auto, cover;
+ -moz-background-size: auto, cover;
+ -o-background-size: auto, cover;
+ color: #fff;
+ border-top: 1px solid rgb(var(--accent-color));
+}
+
+[class*="ModalContent-closeButton-"]:hover {
+ color: #fff;
+}
+
+/* INPUT */
+[class*="TagInput-internalInput-"] {
+ background-color: transparent;
+ color: #fff;
+}
+
+[class*="SelectInput-select-"] {
+ background-color: rgba(0, 0, 0, 0.25) !important;
+}
+
+[class*="SelectInput-select-"]:active,
+[class*="SelectInput-select-"]:focus {
+ background: #1e1e1e !important;
+}
+
+[class*="AutoSuggestInput-suggestionsList-"],
+[class*="AutoSuggestInput-suggestionsContainerOpen-"],
+[class*="AutoSuggestInput-suggestionsContainer-"] {
+ background-color: #323232 !important;
+ color: white;
+ border: none !important;
+}
+
+[class*="AutoSuggestInput-suggestionHighlighted-"] {
+ background-color: hsla(0, 0%, 100%, .08);
+}
+
+[class*="CheckInput-primaryIsChecked-"] {
+ border-color: rgb(var(--accent-color)) !important;
+ background-color: rgb(var(--accent-color)) !important;
+ color: var(--label-text-color) !important;
+}
+
+[class*="CheckInput-input-"][class*="CheckInput-isNotChecked-"] {
+ background: #fff;
+}
+
+/* HEADER */
+
+[class*="PageHeader-header-"] {
+ background-color: rgba(0, 0, 0, .35);
+}
+
+/* SEARCH DROPDOWN HEADER */
+
+[class*="PageHeader-donate-"] {
+ color: #c4273c !important;
+}
+
+/* RADARR SPECIFIC */
+[class*="MovieSearchInput-sectionTitle-"] {
+ color: #fff;
+}
+
+[class*="MovieSearchInput-containerOpen-"] [class*="MovieSearchInput-movieContainer-"] {
+ border: none !important;
+ background: var(--modal-bg-color);
+ background-repeat: repeat, no-repeat;
+ background-attachment: fixed, fixed;
+ background-position: center center, center center;
+ background-size: auto, cover;
+ -webkit-background-size: auto, cover;
+ -moz-background-size: auto, cover;
+ -o-background-size: auto, cover;
+ color: #fff !important;
+ box-shadow: 0 0 10px 1px transparent !important;
+}
+
+[class*="MovieSearchInput-highlighted-"] {
+ background-color: hsla(0, 0%, 100%, .08);
+}
+
+[class*="MovieSearchInput-movieContainer-"]::-webkit-scrollbar-thumb {
+ background-color: rgba(255, 255, 255, 0.25);
+}
+
+/* SIDE MENU */
+[class*="PageSidebar-sidebarContainer-"] {
+ background-color: rgba(0, 0, 0, .25);
+}
+
+[class*="PageSidebar-sidebar-"] {
+ background-color: transparent;
+}
+
+[class*="PageSidebarItem-link-"]:hover {
+ color: rgb(var(--accent-color));
+ text-decoration: none;
+}
+
+[class*="PageSidebarItem-isActiveLink-"],
+[class*="PageSidebarItem-isActiveLink-"]:hover,
+[class*="PageSidebarItem-link-"]:focus {
+ color: rgb(var(--accent-color)) !important;
+}
+
+[class*="PageSidebarItem-isActiveParentLink-"] {
+ background-color: rgba(0, 0, 0, 0.15);
+}
+
+@media only screen and (max-width: 768px) {
+ [class*="PageSidebar-sidebarContainer-"] {
+ background: var(--main-bg-color) !important;
+ background-repeat: repeat, no-repeat;
+ background-attachment: fixed, fixed;
+ background-position: center center, center center;
+ background-size: auto, cover;
+ -webkit-background-size: auto, cover;
+ -moz-background-size: auto, cover;
+ -o-background-size: auto, cover;
+ }
+}
+
+[class*="PageSidebarItem-isActiveItem-"] {
+ border-left: 3px solid rgb(var(--accent-color));
+}
+
+/* MOVIES PAGE */
+/* RADARR SPECIFIC */
+[class*="MovieIndexPoster-controls-"] {
+ background-color: rgb(var(--accent-color)) !important;
+}
+
+[class*="MovieTitlesTableContent-blankpad-"],
+[class*="ExtraFileTableContent-blankpad-"],
+[class*="MovieHistoryTableContent-blankpad-"] {
+ color: var(--text);
+}
+
+/* OVERVIEW PAGE */
+
+[class*="MovieIndexOverviews-container-"],
+[class*="MovieIndexOverviews-container-"]:hover {
+ background-color: transparent !important;
+}
+
+[class*="MovieIndexOverview-container-"]:hover [class*="MovieIndexOverview-content-"] {
+ background-color: transparent;
+}
+
+[class*="AddListMovieOverview-container-"]:hover [class*="AddListMovieOverview-content-"] {
+ background-color: rgba(255, 255, 255, 0.08);
+}
+
+[class*="AddListMoviePoster-title-"] {
+ background-color: rgba(255, 255, 255, 0.08);
+}
+
+[class*="MovieIndexOverview-content-"]:hover {
+ background-color: hsla(0, 0%, 100%, .08) !important;
+}
+
+[class*="MovieIndexOverview-link-"]:hover {
+ text-decoration: none;
+}
+
+[class*="ProgressBar-container-"] {
+ background-color: rgba(0, 0, 0, 0.25);
+}
+
+[class*=".ProgressBar-purple-"] {
+ background-color: rgb(var(--accent-color));
+}
+
+/* MOVIE PAGE */
+[class*="MovieDetailsSeason-season-"],
+[class*="MovieDetailsSeason-collapseButtonContainer-"] {
+ border: none !important;
+ background-color: rgba(0, 0, 0, .25) !important;
+}
+
+[class*="MovieDetailsSeason-actionButton-"],
+[class*="MovieDetailsSeason-collapseButtonIcon-"] {
+ color: var(--text) !important;
+}
+
+.fa-search:hover {
+ color: var(--text-hover) !important;
+}
+
+[class*="Icon-default-"]:hover:not([class*="Label-large-"] [class*="Icon-default-"], [class*="PathInput-fileBrowserButton-"]svg) {
+ color: var(--text-hover);
+}
+
+[class*="MonitorToggleButton-toggleButton-"] {
+ color: #dadada;
+}
+
+
+[class*="ProtocolLabel-torrent-"] {
+ border-color: #00853d !important;
+ background-color: #00853d !important;
+ color: #fff !important;
+}
+
+[class*="ProtocolLabel-usenet-"] {
+ border-color: #17b1d9 !important;
+ background-color: #17b1d9 !important;
+ color: #fff !important;
+}
+
+[class*="MovieDetailsSeason-seasonNumber-"] {
+ color: #fff;
+}
+
+[class*="MovieDetailsSeason-collapseButtonContainer-"] {
+ border: none !important;
+ background-color: rgba(0, 0, 0, .25) !important;
+}
+
+[class*="MovieFileEditorTable-container-"] {
+ border: 1px solid transparent;
+ background-color: rgba(0, 0, 0, 0.25);
+}
+
+[class*="ExtraFileTable-container-"] {
+ border: 1px solid transparent;
+ background-color: rgba(0, 0, 0, .25);
+}
+
+[class*="Popover-title-"],
+[class*="SeasonInfo-title-"],
+[class*="Popover-body-"],
+[class*="Tooltip-body-"] {
+ background: var(--modal-bg-color) !important;
+ background-repeat: repeat, no-repeat;
+ background-attachment: fixed, fixed;
+ background-position: center center, center center;
+ background-size: auto, cover;
+ -webkit-background-size: auto, cover;
+ -moz-background-size: auto, cover;
+ -o-background-size: auto, cover;
+}
+
+[class*="Tooltip-tooltipContainer-"] {
+ color: #fff;
+}
+
+[class*="Tooltip-bottom-"][class*="Tooltip-default-"] {
+ border-bottom-color: var(--text);
+}
+
+[class*="Tooltip-right-"][class*="Tooltip-default-"] {
+ border-right-color: var(--text);
+}
+
+[class*="EpisodeTitleLink-link-"]:hover {
+ color: #fff;
+ text-decoration: none;
+}
+
+[class*="IconButton-button-"] {
+ color: var(--text);
+}
+
+[class*="Label-default-"] [class*="IconButton-button-"],
+[class*="Label-small-"] [class*="IconButton-button-"]:hover {
+ color: var(--label-text-color);
+}
+
+[class*="IconButton-button-"]:hover {
+ background-color: transparent;
+ color: var(--text-hover);
+}
+
+[class*="Table-tableContainer-"] [class*="IconButton-button-"]:hover {
+ background-color: transparent;
+ color: var(--text-hover);
+}
+
+[class*="Label-default-"] {
+ border-color: rgb(var(--accent-color));
+ background-color: rgb(var(--accent-color));
+ color: var(--label-text-color);
+}
+
+[class*="Label-info-"] {
+ border-color: rgb(var(--accent-color));
+ background-color: rgb(var(--accent-color));
+ color: var(--label-text-color);
+}
+
+[class*="PageSidebarItem-status-"][class*="Label-info-"] {
+ border-color: var(--arr-queue-color);
+ background-color: var(--arr-queue-color);
+ color: var(--label-text-color);
+}
+
+[class*="MovieDetails-selectedTab-"] {
+ border-bottom: 4px solid rgb(var(--accent-color));
+}
+
+[class*="MovieDetails-tabList-"] {
+ color: var(--text-hover);
+}
+
+/* Table options*/
+[class*="TableOptionsColumn-column-"] {
+ background: rgba(0, 0, 0, .25);
+ color: var(--text-hover);
+ border: none;
+}
+
+[class*="TableHeaderCell-headerCell-"] {
+ color: var(--text-hover);
+}
+
+[class*="Table-table-"] {
+ color: var(--text);
+}
+
+[class*="TableRow-row-"]:hover {
+ background-color: hsla(0, 0%, 100%, .08);
+ color: var(--text-hover);
+}
+
+[class*="TableRowCell-cell-"] {
+ border-top: 1px solid rgb(255 255 255 / 25%);
+}
+
+/* TOP MENU SERIES */
+[class*="PageToolbar-toolbar-"] {
+ background-color: rgba(0, 0, 0, .25);
+ color: var(--text);
+}
+
+[class*="PageToolbarButton-label-"] {
+ color: var(--text);
+}
+
+[class*="PageToolbarButton-toolbarButton-"][class*="PageToolbarButton-isDisabled-"] {
+ opacity: .5;
+ color: var(--text);
+}
+
+[class*="PageToolbarButton-toolbarButton-"][class*="PageToolbarButton-isDisabled-"]:hover,
+[class*="PageToolbarButton-isDisabled-"]:hover {
+ color: var(--text) !important;
+}
+
+[class*="PageToolbarButton-label-"] {
+ color: var(--text);
+}
+
+[class*="PageToolbarButton-toolbarButton-"]:hover {
+ color: rgb(var(--accent-color));
+}
+
+[class*="MenuButton-menuButton-"]:hover {
+ color: rgb(var(--accent-color));
+}
+
+/* POSTERS */
+[class*="MovieIndexPoster-title-"],
+[class*="MovieIndexPoster-nextAiring-"],
+[class*="MovieIndexPosterInfo-info-"],
+[class*="MovieIndexPosterInfo-info-"],
+[class*="MovieCreditPoster-title-"] {
+ background-color: rgba(255, 255, 255, 0.08);
+ color: var(--text-hover);
+}
+
+/* LIBRARY TOP HEADER DROPDOWN */
+[class*="MenuItem-menuItem-"],
+[class*="MenuContent-menuContent-"] {
+ background: var(--drop-down-menu-bg);
+ background-repeat: repeat, no-repeat;
+ background-attachment: fixed, fixed;
+ background-position: center center, center center;
+ background-size: auto, cover;
+ -webkit-background-size: auto, cover;
+ -moz-background-size: auto, cover;
+ -o-background-size: auto, cover;
+ color: var(--text);
+}
+
+[class*="MenuContent-scroller-"] {
+ box-shadow: black 0 0 5px 0px;
+}
+
+[class*="MenuItem-menuItem-"]:hover,
+[class*="MenuItem-menuItem-"]:focus {
+ background: hsla(0, 0%, 100%, .08) !important;
+ color: var(--text-hover);
+ text-decoration: none;
+}
+
+[class*="MenuItemSeparator-separator-"] {
+ background-color: hsla(0, 0%, 100%, .08) !important;
+}
+
+/* ALPHABET JUMP BAR */
+[class*="PageJumpBar-jumpBar-"] {
+ color: #FFF;
+}
+
+/* MINI RIGHT SCROLL BAR */
+[class*="OverlayScroller-thumb-"],
+[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb {
+ background-color: hsla(0, 0%, 100%, .08) !important;
+}
+
+[class*="OverlayScroller-thumb-"]:hover,
+[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover {
+ background-color: rgba(255, 255, 255, 0.25) !important;
+}
+
+/* ADD NEW */
+
+[class*="EnhancedSelectInput-options-"] {
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 4px;
+ background: var(--drop-down-menu-bg);
+ background-repeat: repeat, no-repeat;
+ background-attachment: fixed, fixed;
+ background-position: center center, center center;
+ background-size: auto, cover;
+ -webkit-background-size: auto, cover;
+ -moz-background-size: auto, cover;
+ -o-background-size: auto, cover;
+ color: var(--text);
+}
+
+[class*="EnhancedSelectInputOption-isSelected-"],
+[class*="EnhancedSelectInputOption-isSelected-"]:hover {
+ background-color: rgba(255, 255, 255, 0.20) !important;
+ color: var(--text-hover);
+}
+
+[class*="EnhancedSelectInputOption-option-"]:hover {
+ background-color: rgba(255, 255, 255, 0.08);
+}
+
+[class*="HintedSelectInputOption-hintText-"] {
+ color: var(--text);
+}
+
+/* SEARCH BAR */
+[class*="Input-input-"],
+[class*="AddNewMovie-searchIconContainer-"],
+[class*="CheckInput-isIndeterminate-"] {
+ border: none;
+ background-color: rgba(255, 255, 255, 0.08);
+ color: #fff;
+}
+
+[class*="MovieSearchInput-container-"] [class*="Input-input-"] {
+ background: transparent;
+ border-bottom: solid 1px #fff;
+}
+
+[class*="MovieSearchInput-container-"] [class*="Input-input-"]:focus {
+ border-bottom: none;
+ background: transparent;
+}
+
+[class*="MovieSearchResult-alternateTitle-"] {
+ color: #fff;
+ font-size: 12px;
+}
+
+[class*="AddNewMovieSearchResult-year-"] {
+ color: #fff !important;
+}
+
+[class*="Input-input-"]:focus {
+ outline: 0;
+ border-color: #fff;
+ box-shadow: none;
+ background-color: rgba(255, 255, 255, 0.25);
+}
+
+[class*="TagInput-input-"][class*="TagInput-isFocused-"] {
+ outline: 0;
+ border-color: #fff;
+ box-shadow: none;
+}
+
+/* TEXT COLOR */
+
+[class*="PageContentBody-innerContentBody-"],
+[class*="PageContentBody-contentBody-"],
+.react-tabs__tab-panel .react-tabs__tab-panel--selected>div {
+ color: var(--text);
+}
+
+/* SEARCH RESULTS */
+[class*="AddNewMovieSearchResult-searchResult-"],
+[class*="AddNewMovieSearchResult-underlay-"] {
+ background-color: transparent !important;
+}
+
+[class*="AddNewMovieSearchResult-searchResult-"]:hover,
+[class*="AddNewMovieSearchResult-underlay-"]:hover {
+ background-color: hsla(0, 0%, 100%, .08) !important;
+}
+
+[class*="AddNewmovieModalContent-year-"] {
+ color: #fff;
+}
+
+[class*="RootFolderSelectInputSelectedValue-movieFolder-"],
+[class*="RootFolderSelectInputSelectedValue-freeSpace-"] {
+ color: #fff;
+}
+
+[class*="RootFolderSelectInputOption-freeSpace-"],
+[class*="RootFolderSelectInputOption-movieFolder-"] {
+ color: var(--text-muted);
+}
+
+/* MOVE THIS */
+input::-webkit-input-placeholder {
+ color: var(--text);
+}
+
+input:focus::-webkit-input-placeholder {
+ color: var(--text-hover);
+}
+
+/* Firefox < 19 */
+input:-moz-placeholder {
+ color: var(--text);
+}
+
+input:focus:-moz-placeholder {
+ color: var(--text-hover);
+}
+
+/* Firefox > 19 */
+input::-moz-placeholder {
+ color: var(--text);
+}
+
+input:focus::-moz-placeholder {
+ color: var(--text-hover);
+}
+
+/* Internet Explorer 10 */
+input:-ms-input-placeholder {
+ color: var(--text);
+}
+
+input:focus:-ms-input-placeholder {
+ color: var(--text-hover);
+}
+
+/* IMPORT */
+
+[class*="FieldSet-legend-"] {
+ color: var(--text-hover);
+ border-bottom: 1px solid rgb(var(--accent-color));
+}
+
+[class*="VirtualTableRow-row-"]:hover {
+ background-color: rgba(255, 255, 255, 0.08);
+}
+
+/* Drop down menu/button*/
+[class*="ImportMovieSelectMovie-button-"] {
+ border: none !important;
+ background-color: rgba(0, 0, 0, 0.25) !important;
+}
+
+[class*="ImportMovieSelectMovie-content-"],
+[class*="ImportMovieSelectMovie-searchIconContainer-"] {
+ border: none;
+ background: var(--modal-bg-color);
+ background-repeat: repeat, no-repeat;
+ background-attachment: fixed, fixed;
+ background-position: center center, center center;
+ background-size: auto, cover;
+ -webkit-background-size: auto, cover;
+ -moz-background-size: auto, cover;
+ -o-background-size: auto, cover;
+ color: white;
+}
+
+[class*="ImportMovieSearchResult-movie-"]:hover {
+ background-color: rgba(255, 255, 255, 0.08);
+}
+
+[class*="ImportMovieTitle-year-"] {
+ color: var(--text-muted);
+}
+
+/* DISCOVER */
+[class*="DiscoverMovieOverview-link-"] {
+ color: var(--text);
+}
+
+[class*="DiscoverMovieOverview-link-"]:hover {
+ color: var(--text-hover);
+ text-decoration: none;
+}
+
+[class*="DiscoverMoviePoster-title-"],
+[class*="DiscoverMoviePosterInfo-info-"] {
+ background-color: rgba(255, 255, 255, 0.08);
+ color: var(--text-hover);
+}
+
+/*Title*/
+[class*="AddListMovieOverview-link-"] {
+ color: var(--text);
+}
+
+[class*="AddListMovieOverview-link-"]:hover {
+ color: #fff;
+}
+
+[class*="AddListMovieOverview-content-"]:hover {
+ background-color: hsla(0, 0%, 100%, .08) !important;
+}
+
+[class*="PageJumpBarItem-jumpBarItem-"]:hover {
+ color: #fff;
+ background: hsla(0, 0%, 100%, .08);
+}
+
+/*Posters*/
+[class*="AddListMoviePoster-title-"] {
+ background-color: rgba(255, 255, 255, 0.08);
+ color: #fff;
+}
+
+/* MASS EDITOR */
+/* FOOTER */
+[class*="PageContentFooter-contentFooter-"] {
+ border: none;
+ background-color: rgba(0, 0, 0, .25);
+ color: #FFF;
+}
+
+/* CALENDAR */
+[class*="CalendarEvent-downloaded-"] {
+ background: rgb(var(--calendar-available) / .7) !important;
+ border-left-color: transparent !important;
+}
+
+[class*="Calendar-calendar-"] [class*="CalendarEvent-downloaded-"]:hover {
+ background: rgb(var(--calendar-available) / .5) !important;
+ border-left-color: transparent !important;
+}
+
+[class*="CalendarEvent-missing-"] {
+ background: rgb(var(--calendar-missing) / .7) !important;
+ border-left-color: transparent !important;
+}
+
+[class*="Calendar-calendar-"] [class*="CalendarEvent-missing-"]:hover {
+ background: rgba(var(--calendar-missing) / .5) !important;
+ border-left-color: transparent !important;
+}
+
+[class*="CalendarEvent-unreleased-"] {
+ background: rgb(var(--calendar-unaired) / .7) !important;
+ border-left-color: transparent !important;
+}
+
+[class*="Calendar-calendar-"] [class*="CalendarEvent-unreleased-"]:hover {
+ background: rgb(var(--calendar-unaired) / .5) !important;
+ border-left-color: transparent !important;
+}
+
+[class*="CalendarEvent-unmonitored-"] {
+ background: rgb(var(--calendar-unmonitored) / .7) !important;
+ border-left-color: transparent !important;
+}
+
+[class*="Calendar-calendar-"] [class*="CalendarEvent-unmonitored-"]:hover {
+ background: rgb(var(--calendar-unmonitored) / .5) !important;
+ border-left-color: transparent !important;
+}
+
+[class*="CalendarEvent-downloading-"] {
+ background: rgb(var(--calendar-downloading) / .7) !important;
+ border-left-color: transparent !important;
+}
+
+[class*="Calendar-calendar-"] [class*="CalendarEvent-downloading-"]:hover {
+ background: rgb(var(--calendar-downloading) / .5) !important;
+ border-left-color: transparent !important;
+}
+
+[class*="DayOfWeek-dayOfWeek-"] {
+ background-color: hsla(0, 0%, 100%, .08);
+}
+
+[class*="CalendarDay-dayOfMonth-"] {
+ border-bottom: 1px solid hsla(0, 0%, 100%, .08);
+ background-color: rgba(0, 0, 0, .25);
+}
+
+[class*="CalendarDay-isToday-"],
+[class*="DayOfWeek-isToday-"] {
+ background-color: hsla(0, 0%, 100%, .25) !important;
+}
+
+[class*="CalendarDay-day-"],
+[class*="CalendarDays-days-"] {
+ -webkit-box-flex: 1;
+ -webkit-flex: 1 0 14.28%;
+ flex: 1 0 14.28%;
+ overflow: hidden;
+ min-height: 70px;
+ border-bottom: 1px solid hsla(0, 0%, 100%, .08);
+ border-left: 1px solid hsla(0, 0%, 100%, .08);
+ border-right: 1px solid hsla(0, 0%, 100%, .08);
+}
+
+[class*="CalendarEvent-movieTitle-"],
+[class*="CalendarEvent-movieInfo-"],
+[class*="CalendarEvent-episodeInfo-"],
+[class*="CalendarEvent-airTime-"] {
+ color: #fff !important;
+}
+
+[class*="CalendarEvent-event-"] {
+ border-bottom: 1px solid transparent;
+}
+
+[class*="CalendarEventGroup-eventGroup-"] {
+ border-bottom: 1px solid hsla(0, 0%, 100%, .08) !important;
+}
+
+[class*="CalendarEventGroup-movieTitle-"] {
+ color: #fff !important;
+}
+
+[class*="CalendarEventGroup-airTime-"] {
+ color: var(--text);
+}
+
+[class*="CalendarEventGroup-episodeInfo-"] {
+ color: var(--text);
+}
+
+/* calendar agenda */
+[class*="AgendaEvent-event-"]:hover {
+ background-color: hsla(0, 0%, 100%, .08) !important;
+}
+
+/* SETTINGS */
+[class*="Settings-link-"] {
+ color: var(--text-hover);
+ border-bottom: 1px solid rgb(var(--accent-color));
+}
+
+[class*="Settings-summary-"] {
+ color: var(--text);
+}
+
+[class*="FormLabel-large-"] {
+ color: var(--text-hover);
+}
+
+[class*="FormLabel-isAdvanced-"] {
+ color: #ff902b;
+}
+
+/* MEDIA MANAGEMENT - FILE NAME TOKENS */
+[class*="NamingOption-small-"] {
+ border: 1px solid transparent;
+}
+
+[class*="NamingOption-token-"] {
+ background-color: rgba(255, 255, 255, 0.15);
+}
+
+[class*="NamingOption-token-"] {
+ background-color: rgba(255, 255, 255, 0.15);
+}
+
+[class*="NamingOption-example-"] {
+ background-color: rgba(255, 255, 255, 0.25);
+}
+
+[class*="NamingOption-option-"] {
+ border: 1px solid transparent;
+}
+
+[class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] {
+ background-color: rgba(255, 255, 2550, 0.25);
+}
+
+[class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] {
+ background-color: rgba(255, 255, 2550, 0.35);
+}
+
+/* PROFILES */
+[class*="Card-card-"],
+[class*="QualityProfiles-addQualityProfile-"] {
+ background-color: rgba(0, 0, 0, .45);
+ box-shadow: 0 0 10px 1px #000000;
+ color: var(--text);
+}
+
+[class*="Card-card-"]:hover {
+ color: var(--text-hover);
+}
+
+[class*="QualityProfiles-center-"],
+[class*="LanguageProfiles-center-"],
+[class*="ReleaseProfiles-center-"] {
+ background-color: transparent;
+ border: none;
+}
+
+[class*="QualityProfileItem-qualityProfileItem-"],
+[class*="QualityProfileItemGroup-qualityProfileItemGroup-"],
+[class*="LanguageProfileItem-languageProfileItem-"] {
+ border: none;
+ background-color: rgba(0, 0, 0, .25);
+ color: #FFF;
+}
+
+[class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] {
+ background: rgba(0, 0, 0, 0.25);
+}
+
+[class*="KeyValueListInputItem-keyInput-"],
+[class*="KeyValueListInputItem-valueInput-"] {
+ border: none;
+ background: transparent;
+ color: white;
+}
+
+[class*="QualityProfileFormatItem-qualityProfileFormatItem-"] {
+ border: 1px solid transparent;
+ background: rgba(0, 0, 0, .25);
+}
+
+[class*="QualityDefinitions-sizeLimitHelpText-"] {
+ color: var(--text);
+}
+
+/* PROFILES */
+[class*="Indexers-center-"] {
+ background-color: transparent;
+ border: none;
+}
+
+/* DOWNLOAD CLIENTS */
+[class*="DownloadClients-center-"] {
+ background-color: transparent;
+ border: none;
+}
+
+/* CONNECTIONS */
+[class*="Notifications-center-"] {
+ background-color: transparent;
+ border: none;
+}
+
+/* LISTS */
+[class*="ImportLists-center-"] {
+ background-color: transparent;
+ border: none;
+}
+
+/* LOG */
+[class*="Alert-info-"] {
+ border-color: transparent;
+ background-color: rgba(0, 0, 0, 0.25);
+ color: #FFC107;
+}
+
+/* INDEXER */
+[class*="Restrictions-center-"] {
+ border: 1px solid transparent;
+ background-color: transparent;
+}
+
+/* LISTS */
+[class*="NetImports-center-"] {
+ border: 1px solid transparent;
+ background-color: transparent;
+}
+
+/* CUSTOM FORMAT */
+[class*="CustomFormats-center-"],
+[class*="EditCustomFormatModalContent-center-"] {
+ border: 1px solid transparent;
+ background-color: transparent;
+}
+
+/* Login Page */
+
+.panel-body {
+ background-color: rgba(0, 0, 0, 0.25);
+ color: var(--text);
+}
+
+.panel-header {
+ background-color: rgba(0, 0, 0, 0.45);
+}
+
+.forgot-password {
+ color: var(--text) !important;
+}
+
+input[type=email],
+input[type=password] {
+ border: none;
+ background-color: rgba(255, 255, 255, 0.08);
+ color: #FFF;
+}
+
+.button {
+ border-color: var(--button-color);
+ background-color: var(--button-color);
+ cursor: pointer;
+}
+
+.button:hover {
+ border-color: var(--button-color-hover);
+ background-color: var(--button-color-hover);
+ color: #fff;
+ text-decoration: none;
+}
+
+.form-input:focus {
+ outline: 0;
+ border-color: #fff;
+ box-shadow: none;
+ background-color: rgba(255, 255, 255, 0.25);
+}
+
+/* Custom filter */
+[class*="FilterBuilderRow-filterRow-"]:hover {
+ background-color: transparent;
+}
+
+[class*="CustomFilter-customFilter-"]:hover {
+ background-color: hsla(0, 0%, 100%, .08);
+}
+
+[class*="SelectMovieModalContent-path-"] {
+ color: var(--text);
+}
\ No newline at end of file
diff --git a/frontend/src/Settings/UI/UISettings.js b/frontend/src/Settings/UI/UISettings.js
index 65462863c..1fda7c4b8 100644
--- a/frontend/src/Settings/UI/UISettings.js
+++ b/frontend/src/Settings/UI/UISettings.js
@@ -48,6 +48,21 @@ export const movieRuntimeFormatOptions = [
{ key: 'minutes', value: '75 mins' }
];
+export const themeOptions = [
+ { key: 'default', value: 'Default' },
+ { key: 'aquamarine', value: 'Aquamarine' },
+ { key: 'dark', value: 'Dark' },
+ { key: 'dracula', value: 'Dracula' },
+ { key: 'hotline', value: 'Hotline' },
+ { key: 'hotpink', value: 'Hotpink' },
+ { key: 'nord', value: 'Nord' },
+ { key: 'organizr', value: 'Organizr' },
+ { key: 'overseerr', value: 'Overseerr' },
+ { key: 'plex', value: 'Plex' },
+ { key: 'radarr-darker', value: 'Radarr Darker' },
+ { key: 'space-gray', value: 'Space Gray' }
+];
+
class UISettings extends Component {
//
@@ -184,6 +199,21 @@ class UISettings extends Component {