+
+
+
Plex Servers
+
+
+
+
+ dns
+ {{server.name}}
+
+
+
-
- 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
-
-
+
+
+
+ add_circle
+ Add Server
+
+
+
+
+
-
- If enabled then watchlist requests for TV Shows will request the whole
-
+
+
+
Sync Actions
+
+
+ sync
+ Full Sync
+
+
+ update
+ Partial Sync
+
+
+ cleaning_services
+ Clear & Resync
+
+
+ playlist_add
+ Run Watchlist Import
+
+
+
+
+
+
Plex Credentials
+
+
+
+ These fields are optional to automatically fill in your Plex server settings.
+
+
+ Username
+
-
+ Password
+
-
-
-
Servers
-
-
-
- {{server.name}}
-
-
+
+ key
+ Load Servers
+
-
-
- Manually Add Server
-
-
-
-
-
-
-
-
-
- Full
- Sync
-
- Partial Sync
-
-
-
- Clear Data And Resync
-
-
-
-
- Run Watchlist Import
-
-
-
-
-
-
-
+
-
-
-
- Plex Credentials
- These fields are optional to automatically fill in your Plex server settings.
-
-
-
-
-
-
-
-
-
-
- Please select the server:
-
-
-
-
+
+
+ save
+ Save Changes
+
+
+
-
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