+ +
+ +
+

Plex Servers

+
+ + + + + - - When a Plex User adds something to their watchlist in Plex, it will turn up in Ombi as a Request if enabled. This only applies to users that are logging in with their Plex Account -
Request limits if set are all still applied - - + + + + + +
+
- - If enabled then watchlist requests for TV Shows will request the whole show. If not enabled it will only request the latest season. - - + +
+

Sync Actions

+
+ + + + +
+
+
+ +
+
+

Plex Credentials

+ + +

+ These fields are optional to automatically fill in your Plex server settings. +
This will pass your username and password to the Plex.tv API to grab the servers associated with this user. +
If you have 2FA enabled on your account, you need to append the 2FA code to the end of your password. +

+ + Username + + -
+ + Password + + -
-
-

Servers

- - - - + - - - - - - -
- -
-
-
-
-
- -
-
- -
-
- -
-
- -
- -
-
-
- + + Select Server + + + {{s.name}} + + + + + +
-
- -
+ -
-
- -
- - - - -
-
- -
-
- -
-
- Please select the server: -
-
-
- - - -
- -
- - - - {{s.name}} - - -
-
-
-
+ + + +
- - -
- diff --git a/src/Ombi/ClientApp/src/app/settings/plex/plex.component.scss b/src/Ombi/ClientApp/src/app/settings/plex/plex.component.scss index 443e033a9..6449d548f 100644 --- a/src/Ombi/ClientApp/src/app/settings/plex/plex.component.scss +++ b/src/Ombi/ClientApp/src/app/settings/plex/plex.component.scss @@ -43,4 +43,258 @@ h3 { margin: 0; } - } \ No newline at end of file + } + +.plex-settings-container { + padding: 20px; + max-width: 1400px; + margin: 0 auto; +} + +.settings-card { + margin-bottom: 20px; + background: transparent; + box-shadow: 0 2px 12px 0 rgba(0,0,0,0.25); + border-radius: 12px; + border: 1px solid #353a45; +} + +.section-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; +} + +.settings-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + gap: 24px; + margin-bottom: 30px; +} + +.setting-card { + height: 100%; + background: transparent; + border-radius: 10px; + border: 1px solid #353a45; + box-shadow: 0 1px 6px 0 rgba(0,0,0,0.18); + color: #f1f3f6; +} + +.setting-card.disabled { + opacity: 0.6; +} + +.setting-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 10px; + font-weight: 600; + color: #fff; +} + +.setting-description { + color: #e0e3ea; + font-size: 15px; + margin: 0; + font-weight: 400; + line-height: 1.6; +} + +.main-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 36px; + margin-top: 36px; +} + +.servers-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + gap: 18px; +} + +.server-card { + text-align: center; + background: transparent; + border-radius: 10px; + border: 1px solid #353a45; + box-shadow: 0 1px 6px 0 rgba(0,0,0,0.18); + color: #f1f3f6; +} + +.server-card button { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 24px; + color: #f1f3f6; + font-weight: 500; +} + +.server-card mat-icon { + font-size: 32px; + height: 32px; + width: 32px; + margin-bottom: 10px; + color: #90caf9; +} + +.sync-actions-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 18px; +} + +.sync-actions-grid button { + display: flex; + flex-direction: column; + align-items: center; + padding: 24px; + color: #f1f3f6; + background: transparent; + border: 1px solid #353a45; + border-radius: 10px; + font-weight: 500; + box-shadow: 0 1px 6px 0 rgba(0,0,0,0.18); +} + +.sync-actions-grid mat-icon { + font-size: 32px; + height: 32px; + width: 32px; + margin-bottom: 10px; + color: #90caf9; +} + +.credentials-card { + padding: 24px; + background: transparent; + border-radius: 10px; + border: 1px solid #353a45; + box-shadow: 0 1px 6px 0 rgba(0,0,0,0.18); + color: #f1f3f6; +} + +.credentials-description { + color: #e0e3ea; + margin-bottom: 20px; + font-size: 15px; + font-weight: 400; +} + +mat-card-title, h2, h3 { + color: #fff !important; + font-weight: 700 !important; + letter-spacing: 0.5px; +} + +mat-card-header { + border-bottom: 1px solid #353a45; + margin-bottom: 16px; +} + +mat-form-field { + color: #f1f3f6 !important; +} + +mat-label, .mat-form-field-label { + color: #b0b6c3 !important; + font-weight: 500; +} + +input[matInput], .mat-input-element { + color: #f1f3f6 !important; + background: transparent !important; +} + +mat-select { + color: #f1f3f6 !important; + background: transparent !important; +} + +.full-width { + width: 100%; +} + +.mt-3 { + margin-top: 1rem; +} + +.mat-slide-toggle.mat-checked .mat-slide-toggle-bar { + background-color: #90caf9 !important; +} + +.mat-slide-toggle-thumb { + background-color: #2196f3 !important; +} + +button[mat-flat-button], button[mat-raised-button], button[mat-stroked-button], button[mat-button] { + font-weight: 600; + letter-spacing: 0.2px; + color: #f1f3f6; + background: #2196f3; + border-radius: 6px; + box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12); + transition: background 0.2s; +} +button[mat-flat-button]:hover, button[mat-raised-button]:hover, button[mat-stroked-button]:hover, button[mat-button]:hover { + background: #42a5f5; +} + +@media (max-width: 1200px) { + .main-content { + grid-template-columns: 1fr; + } +} + +@media (max-width: 768px) { + .settings-grid { + grid-template-columns: 1fr; + } + + .servers-grid { + grid-template-columns: 1fr; + } + + .sync-actions-grid { + grid-template-columns: 1fr; + } +} + +.watchlist-errors-btn-row { + display: flex; + justify-content: center; + margin-top: 18px; +} + +.info-banner { + display: flex; + align-items: center; + background: #23272f; + color: #e0e3ea; + border: 1px solid #1976d2; + box-shadow: 0 1px 6px 0 rgba(0,0,0,0.12); + border-radius: 8px; + padding: 16px 20px; + margin-top: 18px; + margin-bottom: 0; + font-size: 16px; + font-weight: 500; + gap: 12px; +} + +.info-banner mat-icon { + font-size: 28px; + color: #42a5f5; +} + +.info-banner button[mat-button] { + margin-left: 16px; + font-weight: 600; +} \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/settings/radarr/components/radarr-form.component.html b/src/Ombi/ClientApp/src/app/settings/radarr/components/radarr-form.component.html index 3857a22d2..8a73368c0 100644 --- a/src/Ombi/ClientApp/src/app/settings/radarr/components/radarr-form.component.html +++ b/src/Ombi/ClientApp/src/app/settings/radarr/components/radarr-form.component.html @@ -28,10 +28,12 @@ Hostname or IP + Please enter a valid hostname or ip address Port + Please enter a valid port number SSL @@ -42,6 +44,7 @@ API key + Please enter an API Key
@@ -65,6 +68,7 @@ {{quality.name}} + Please select a value
@@ -80,6 +84,7 @@ {{folder.path}} + Please select a value