From 783c73275e9d6674e3b35ebf640f514ffcc8e634 Mon Sep 17 00:00:00 2001 From: euzu <33094714+euzu@users.noreply.github.com> Date: Sat, 28 Mar 2026 21:57:13 +0100 Subject: [PATCH] theme refactor, added new themes (#679) - Theme refactor, added new themes - Fixed user session cleanup 3h problem - Fixed sequence sorting with order none --- backend/src/api/model/active_user_manager.rs | 50 +- backend/src/api/model/provider_config.rs | 4 +- backend/src/processing/processor/sort.rs | 118 +- frontend/public/assets/i18n/en.json | 2 +- frontend/scss/_default.scss | 3 +- frontend/scss/_theme.scss | 1198 ++++++++--------- frontend/scss/app/_component.scss | 3 +- .../scss/app/components/_custom_dialog.scss | 4 +- frontend/scss/app/components/_dialog.scss | 4 +- .../app/components/_field_explanation.scss | 8 +- frontend/scss/app/components/_input.scss | 2 +- frontend/scss/app/components/_login.scss | 2 +- .../scss/app/components/_mapper_script.scss | 10 +- frontend/scss/app/components/_popup_menu.scss | 14 +- frontend/scss/app/components/_tabset.scss | 2 +- .../scss/app/components/_theme_picker.scss | 4 + .../scss/app/components/_titled_card.scss | 2 +- frontend/scss/app/components/_toastr.scss | 2 +- .../scss/app/components/_toggle_switch.scss | 4 +- .../playlist/_playlist_explorer.scss | 20 +- .../playlist/_playlist_explorer_view.scss | 4 + .../playlist/target/_target_output.scss | 28 +- .../scss/app/components/setup/_setup.scss | 4 +- .../source_editor/_source_editor_block.scss | 4 +- frontend/scss/themes/_theme-aurora.scss | 268 ++++ .../scss/themes/_theme-banana-yellow.scss | 277 ++++ frontend/scss/themes/_theme-bright.scss | 277 ++++ .../scss/themes/_theme-clubroom-contrast.scss | 267 ++++ .../scss/themes/_theme-cool-elegance.scss | 277 ++++ frontend/scss/themes/_theme-dark.scss | 267 ++++ frontend/scss/themes/_theme-dopamine.scss | 267 ++++ frontend/scss/themes/_theme-dracula.scss | 267 ++++ .../scss/themes/_theme-graperoot-dark.scss | 267 ++++ frontend/scss/themes/_theme-mermaidcore.scss | 268 ++++ frontend/scss/themes/_theme-monokai.scss | 267 ++++ frontend/scss/themes/_theme-nature-pure.scss | 277 ++++ frontend/scss/themes/_theme-nord.scss | 268 ++++ frontend/scss/themes/_theme-paper.scss | 277 ++++ frontend/scss/themes/_theme-refined-dark.scss | 267 ++++ .../scss/themes/_theme-sun-washed-soft.scss | 277 ++++ .../scss/themes/_theme-vibrant-elegance.scss | 267 ++++ .../scss/themes/_theme-vintage-neutral.scss | 277 ++++ .../app/components/api_user/api_user_view.rs | 9 +- frontend/src/app/components/home.rs | 13 +- frontend/src/app/components/mod.rs | 4 +- frontend/src/app/components/popup_menu.rs | 17 +- frontend/src/app/components/theme.rs | 134 +- frontend/src/app/components/theme_picker.rs | 73 + 48 files changed, 5960 insertions(+), 665 deletions(-) create mode 100644 frontend/scss/app/components/_theme_picker.scss create mode 100644 frontend/scss/themes/_theme-aurora.scss create mode 100644 frontend/scss/themes/_theme-banana-yellow.scss create mode 100644 frontend/scss/themes/_theme-bright.scss create mode 100644 frontend/scss/themes/_theme-clubroom-contrast.scss create mode 100644 frontend/scss/themes/_theme-cool-elegance.scss create mode 100644 frontend/scss/themes/_theme-dark.scss create mode 100644 frontend/scss/themes/_theme-dopamine.scss create mode 100644 frontend/scss/themes/_theme-dracula.scss create mode 100644 frontend/scss/themes/_theme-graperoot-dark.scss create mode 100644 frontend/scss/themes/_theme-mermaidcore.scss create mode 100644 frontend/scss/themes/_theme-monokai.scss create mode 100644 frontend/scss/themes/_theme-nature-pure.scss create mode 100644 frontend/scss/themes/_theme-nord.scss create mode 100644 frontend/scss/themes/_theme-paper.scss create mode 100644 frontend/scss/themes/_theme-refined-dark.scss create mode 100644 frontend/scss/themes/_theme-sun-washed-soft.scss create mode 100644 frontend/scss/themes/_theme-vibrant-elegance.scss create mode 100644 frontend/scss/themes/_theme-vintage-neutral.scss create mode 100644 frontend/src/app/components/theme_picker.rs diff --git a/backend/src/api/model/active_user_manager.rs b/backend/src/api/model/active_user_manager.rs index c73d9e41a..64ef6ced5 100644 --- a/backend/src/api/model/active_user_manager.rs +++ b/backend/src/api/model/active_user_manager.rs @@ -1052,9 +1052,9 @@ impl ActiveUserManager { { if let Ok(mut user_connections) = self.connections.try_write() { user_connections.kicked.retain(|_, (expires_at, _)| *expires_at > now); - user_connections - .by_key - .retain(|_k, v| now.saturating_sub(v.ts) < USER_CON_TTL && (v.connections > 0 || !v.streams.is_empty())); + user_connections.by_key.retain(|_k, v| { + v.connections > 0 || !v.streams.is_empty() || now.saturating_sub(v.ts) < USER_CON_TTL + }); for connection_data in user_connections.by_key.values_mut() { connection_data.sessions.retain(|s| now.saturating_sub(s.ts) < USER_CON_TTL); } @@ -1722,6 +1722,50 @@ mod tests { assert!(!connections.key_by_addr.contains_key(&stale_addr)); assert!(connections.key_by_addr.contains_key(&fresh_addr)); } + + #[tokio::test] + async fn gc_keeps_active_ts_streams_even_when_user_timestamp_is_stale() { + let config = Config::default(); + let geoip = Arc::new(ArcSwapOption::::default()); + let event_manager = Arc::new(EventManager::new()); + let manager = ActiveUserManager::new(&config, &geoip, &event_manager); + + let addr: SocketAddr = "127.0.0.1:55013".parse().unwrap(); + let fingerprint = Fingerprint::new("fp-key-ts".to_string(), "127.0.0.1".to_string(), addr); + + manager.add_connection(&addr).await; + manager + .update_connection(ActiveUserConnectionParams { + uid: 144, + meter_uid: 244, + username: "user1", + max_connections: 1, + fingerprint: &fingerprint, + provider: "provider-a", + stream_channel: &test_channel(9001), + user_agent: Cow::Borrowed("ua"), + session_token: None, + }) + .await + .expect("ts stream should register"); + + { + let mut connections = manager.connections.write().await; + let connection_data = connections.by_key.get_mut("user1").expect("user entry should exist"); + connection_data.ts = connection_data.ts.saturating_sub(USER_CON_TTL + 1); + } + + if let Some(gc_ts) = &manager.gc_ts { + gc_ts.store(current_time_secs().saturating_sub(USER_GC_TTL + 1), Ordering::Release); + } + + manager.active_streams().await; + + let connections = manager.connections.read().await; + let connection_data = connections.by_key.get("user1").expect("active user entry must survive gc"); + assert_eq!(connection_data.connections, 1); + assert_eq!(connection_data.streams.len(), 1); + } } // diff --git a/backend/src/api/model/provider_config.rs b/backend/src/api/model/provider_config.rs index 640f3216c..77112123d 100644 --- a/backend/src/api/model/provider_config.rs +++ b/backend/src/api/model/provider_config.rs @@ -303,7 +303,9 @@ impl ProviderConfig { pub async fn release(&self) { let mut guard = self.connection.write().await; - if guard.current_connections == 1 || guard.current_connections > self.max_connections { + // Don't reset grace tracking when current_connections == 1 - this happens during + // last connection release and should preserve grace state until after decrement + if guard.current_connections > self.max_connections { guard.granted_grace = false; guard.grace_ts = 0; } diff --git a/backend/src/processing/processor/sort.rs b/backend/src/processing/processor/sort.rs index af81db91a..240af30e3 100644 --- a/backend/src/processing/processor/sort.rs +++ b/backend/src/processing/processor/sort.rs @@ -231,7 +231,7 @@ fn playlist_comparator( value_a: &str, value_b: &str, ) -> Ordering { - if matches!(order, SortOrder::None) { + if matches!(order, SortOrder::None) && sequence.is_none() { return Ordering::Equal; } @@ -291,6 +291,10 @@ fn compare_cached_rule_entries( Ordering::Equal } +fn is_effective_rule(rule: &ConfigSortRule) -> bool { + rule.order != SortOrder::None || rule.sequence.as_ref().is_some_and(|sequence| !sequence.is_empty()) +} + pub(in crate::processing::processor) fn sort_playlist( target: &ConfigTarget, playlist: &mut Vec, @@ -317,7 +321,7 @@ fn sort_groups(groups: &mut Vec, rules: &[ConfigSortRule], match_ let group_rules: Vec<_> = rules .iter() .filter(|r| matches!(r.target, SortTarget::Group)) - .filter(|r| r.order != SortOrder::None) + .filter(|r| is_effective_rule(r)) .map(PreparedRule::new) .collect(); @@ -354,7 +358,7 @@ fn sort_channels_in_groups(groups: &mut [PlaylistGroup], rules: &[ConfigSortRule let channel_rules: Vec<_> = rules .iter() .filter(|r| matches!(r.target, SortTarget::Channel)) - .filter(|r| r.order != SortOrder::None) + .filter(|r| is_effective_rule(r)) .map(PreparedRule::new) .collect(); @@ -747,4 +751,112 @@ mod tests { assert_eq!(groups[1].title.as_ref(), "zero"); assert_eq!(groups[1].channels[0].header.source_ordinal, 0); } + + #[test] + fn test_channel_sequence_applies_even_when_order_is_none() { + let channels: Vec = vec!["HD", "UHD", "FHD", "SD"] + .into_iter() + .enumerate() + .map(|(i, title)| PlaylistItem { + header: PlaylistItemHeader { + title: title.to_string().into(), + source_ordinal: u32::try_from(i).unwrap(), + ..Default::default() + }, + }) + .collect(); + + let channel_sort = ConfigSortRule { + target: SortTarget::Channel, + field: ItemField::Caption, + order: SortOrder::None, + sequence: Some(vec![ + shared::model::REGEX_CACHE.get_or_compile(r"^UHD$").unwrap(), + shared::model::REGEX_CACHE.get_or_compile(r"^FHD$").unwrap(), + shared::model::REGEX_CACHE.get_or_compile(r"^HD$").unwrap(), + ]), + filter: Filter::default(), + }; + + let mut groups = vec![make_group(1, "G1", channels)]; + sort_channels_in_groups(groups.as_mut_slice(), &[channel_sort], false); + + let sorted = groups[0].channels.iter().map(|pli| pli.header.title.clone()).collect::>(); + let expected = vec!["UHD", "FHD", "HD", "SD"].into_iter().map(Into::into).collect::>>(); + assert_eq!(expected, sorted); + } + + #[test] + fn test_group_sequence_applies_even_when_order_is_none() { + let group_hd = make_group( + 1, + "hd", + vec![PlaylistItem { + header: PlaylistItemHeader { title: Arc::from("HD"), source_ordinal: 2, ..Default::default() }, + }], + ); + let group_uhd = make_group( + 2, + "uhd", + vec![PlaylistItem { + header: PlaylistItemHeader { title: Arc::from("UHD"), source_ordinal: 3, ..Default::default() }, + }], + ); + let group_fhd = make_group( + 3, + "fhd", + vec![PlaylistItem { + header: PlaylistItemHeader { title: Arc::from("FHD"), source_ordinal: 1, ..Default::default() }, + }], + ); + + let group_sort = ConfigSortRule { + target: SortTarget::Group, + field: ItemField::Caption, + order: SortOrder::None, + sequence: Some(vec![ + shared::model::REGEX_CACHE.get_or_compile(r"^UHD$").unwrap(), + shared::model::REGEX_CACHE.get_or_compile(r"^FHD$").unwrap(), + shared::model::REGEX_CACHE.get_or_compile(r"^HD$").unwrap(), + ]), + filter: Filter::default(), + }; + + let mut groups = vec![group_hd, group_uhd, group_fhd]; + sort_groups(&mut groups, &[group_sort], false); + + let sorted = groups.iter().map(|group| group.channels[0].header.title.clone()).collect::>(); + let expected = vec!["UHD", "FHD", "HD"].into_iter().map(Into::into).collect::>>(); + assert_eq!(expected, sorted); + } + + #[test] + fn test_empty_sequence_with_none_order_is_ignored() { + let channels: Vec = vec!["B", "A"] + .into_iter() + .enumerate() + .map(|(i, title)| PlaylistItem { + header: PlaylistItemHeader { + title: title.to_string().into(), + source_ordinal: u32::try_from(i + 1).unwrap(), + ..Default::default() + }, + }) + .collect(); + + let channel_sort = ConfigSortRule { + target: SortTarget::Channel, + field: ItemField::Caption, + order: SortOrder::None, + sequence: Some(vec![]), + filter: Filter::default(), + }; + + let mut groups = vec![make_group(1, "G1", channels)]; + sort_channels_in_groups(groups.as_mut_slice(), &[channel_sort], false); + + let sorted = groups[0].channels.iter().map(|pli| pli.header.title.clone()).collect::>(); + let expected = vec!["B", "A"].into_iter().map(Into::into).collect::>>(); + assert_eq!(expected, sorted); + } } diff --git a/frontend/public/assets/i18n/en.json b/frontend/public/assets/i18n/en.json index 6a7f60e01..6867d973a 100644 --- a/frontend/public/assets/i18n/en.json +++ b/frontend/public/assets/i18n/en.json @@ -663,7 +663,7 @@ "ENABLED": "Enables or disables authentication for the Web-UI.", "ISSUER": "The issuer name embedded in JWT auth tokens.", "SECRET": "The secret key used to sign and verify JWT auth tokens. Changing this logs out everyone.", - "TOKEN_TTL_MINS": "How many minutes a login session remains valid (default 3600).", + "TOKEN_TTL_MINS": "How many minutes a login session remains valid (default 30).", "USERFILE": "Path to the text file containing WebUI users (default user.txt).", "GROUPFILE": "Path to the text file containing WebUI groups and permissions (default groups.txt)." }, diff --git a/frontend/scss/_default.scss b/frontend/scss/_default.scss index 3e4663105..f7ecc2dd2 100644 --- a/frontend/scss/_default.scss +++ b/frontend/scss/_default.scss @@ -22,7 +22,7 @@ } ::-webkit-scrollbar-track { - -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + -webkit-box-shadow: var(--scrollbar-track-shadow); border-radius: var(--scrollbar-border-radius); background-color: var(--scrollbar-track-color); } @@ -35,7 +35,6 @@ ::-webkit-scrollbar-thumb { border-radius: var(--scrollbar-width); - //-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); background-color: var(--scrollbar-handle-color); } diff --git a/frontend/scss/_theme.scss b/frontend/scss/_theme.scss index ec0edc027..b24cb441b 100644 --- a/frontend/scss/_theme.scss +++ b/frontend/scss/_theme.scss @@ -1,6 +1,25 @@ @use './size'; +@use './themes/theme-dark'; +@use './themes/theme-refined-dark'; +@use './themes/theme-graperoot-dark'; +@use './themes/theme-bright'; +@use './themes/theme-aurora'; +@use './themes/theme-monokai'; +@use './themes/theme-paper'; +@use './themes/theme-nature-pure'; +@use './themes/theme-dopamine'; +@use './themes/theme-mermaidcore'; +@use './themes/theme-cool-elegance'; +@use './themes/theme-banana-yellow'; +@use './themes/theme-clubroom-contrast'; +@use './themes/theme-sun-washed-soft'; +@use './themes/theme-vintage-neutral'; +@use './themes/theme-dracula'; +@use './themes/theme-nord'; -:root { + +:root, +body { --mobile-size: size.$mobile-breakpoint; --dashboard-mobile-size: size.$dashboard-mobile-breakpoint; --sidebar-width-expaned: 270px; @@ -35,14 +54,18 @@ --epg-row-height: 4rem; --epg-header-height: 2rem; --epg-channels-width: 300px; - - --epg-past-background: rgba(0, 0, 0, 0.1); - --epg-now-line-color: red; - + --border-radius: 8px; + --border-radius-small: 6px; + --tag-padding: 0.3rem 0.5rem; + --tag-border-radius: 0.5rem; + --icon-button-border-radius: 4px; + --theme-palette-contrast-base: #000000; + --theme-palette-contrast-inverse: #ffffff; } @media (max-width: size.$mobile-breakpoint) { - :root { + :root, + body { --gap-small: 0.2rem; --gap-default: 0.3rem; --gap-large: 0.5rem; @@ -66,627 +89,604 @@ } } -:root { - --primary-color: rgba(96, 165, 250, 0.4); - /* Icy Blue */ - --secondary-color: rgba(251, 113, 133, 0.62); - /* Soft Coral Red */ +:root, +body { + --theme-palette-surface: var(--theme-palette-neutral-surface-940); + --theme-palette-surface-soft: var(--theme-palette-neutral-surface-920); + --theme-palette-surface-muted: var(--theme-palette-neutral-surface-900); + --theme-palette-surface-strong: var(--theme-palette-neutral-surface-880); + --theme-palette-surface-header: var(--theme-palette-neutral-surface-980); + --theme-palette-surface-tooltip: var(--theme-palette-neutral-surface-960); + --theme-palette-surface-menu: var(--theme-palette-neutral-surface-840); + --theme-palette-surface-tabset: var(--theme-palette-neutral-surface-820); + --theme-palette-surface-tab: var(--theme-palette-neutral-surface-620); + --theme-palette-surface-breadcrumbs: var(--theme-palette-neutral-surface-600); + --theme-palette-surface-breadcrumb: var(--theme-palette-neutral-surface-580); + --theme-palette-surface-showcase: var(--theme-palette-neutral-surface-560); + --theme-palette-surface-toolbar: var(--theme-palette-neutral-surface-540); + --theme-palette-surface-toolbar-alt: var(--theme-palette-neutral-surface-520); + --theme-palette-surface-card-gradient: var(--theme-palette-neutral-surface-700); + --theme-palette-surface-input: var(--theme-palette-neutral-surface-700); + --theme-palette-surface-option-active: var(--theme-palette-state-surface-option-active); + --theme-palette-surface-dialog-backdrop: var(--theme-palette-neutral-surface-640); + --theme-palette-surface-modal-backdrop: var(--theme-palette-neutral-surface-660); + --theme-palette-surface-setup-hover: var(--theme-palette-neutral-surface-780); + --theme-palette-surface-setup-active: var(--theme-palette-neutral-surface-800); + --theme-palette-surface-code: var(--theme-palette-neutral-surface-code); + --theme-palette-surface-code-solid: var(--theme-palette-neutral-surface-code-solid); + --theme-palette-surface-code-compare: var(--theme-palette-neutral-surface-code-compare); + --theme-palette-surface-glass: var(--theme-palette-neutral-surface-760); + --theme-palette-surface-glass-gradient-1: var(--theme-palette-neutral-surface-700); + --theme-palette-surface-glass-gradient-2: var(--theme-palette-neutral-surface-740); + --theme-palette-surface-glass-input: var(--theme-palette-neutral-surface-680); - --action-item-background-color: rgba(37, 99, 235, 0.18); - --action-item-color: #ffffff; + --theme-palette-border: var(--theme-palette-accent-border-500); + --theme-palette-border-strong: var(--theme-palette-accent-border-500); + --theme-palette-border-hover: var(--theme-palette-accent-border-460); + --theme-palette-border-focus: var(--theme-palette-accent-border-380); + --theme-palette-border-popup: var(--theme-palette-accent-border-340); + --theme-palette-border-soft: var(--theme-palette-neutral-border-460); + --theme-palette-border-tabset: var(--theme-palette-neutral-border-560); + --theme-palette-border-table: var(--theme-palette-neutral-border-520); + --theme-palette-border-muted: var(--theme-palette-neutral-border-500); + --theme-palette-border-input: var(--theme-palette-neutral-border-420); + --theme-palette-border-selection: var(--theme-palette-neutral-border-380); - --text-color: #e6edf7; - --modest-text-color: #9aa9bf; - --background-color: #0b1220; - --particle-flow-background-color: #070f1d; - --particle-flow-background-accent-color-1: #6ea8ff; - --particle-flow-background-accent-color-2: #273240; - --particle-flow-background-alpha-boost: 1.0; - --border-color: rgba(96, 165, 250, 0.24); - --input-background-color: rgba(15, 23, 42, 0.0); - --input-border-color: var(--border-color); - --input-focus-border-color: rgba(96, 165, 250, 0.88); - --button-background-color: var(--primary-color); - --menu-text-color: #d8e1ef; - --menu-icon-color: #8ea2bf; - --menu-item-hover-background-color: rgba(59, 130, 246, 0.16); - --menu-item-hover-color: #ffffff; - --menu-text-active-color: var(--primary-color); - --menu-item-active-background-color: rgba(59, 130, 246, 0.24); - --icon-button-hover-color: #e6edf7; - --card-background-color: rgba(15, 23, 42, 0.78); - --card-color: var(--modest-text-color); - --sub-card-background-color: rgba(15, 23, 42, 0.62); + --theme-palette-text: var(--theme-palette-neutral-text-900); + --theme-palette-text-muted: var(--theme-palette-neutral-text-620); + --theme-palette-text-soft: var(--theme-palette-neutral-text-580); + --theme-palette-text-menu: var(--theme-palette-neutral-text-760); + --theme-palette-text-inverse: var(--theme-palette-contrast-inverse); + --theme-palette-text-title: var(--theme-palette-neutral-text-580); + --theme-palette-text-card: var(--theme-palette-neutral-text-700); + --theme-palette-text-rating: var(--theme-palette-contrast-inverse); + --theme-palette-text-breadcrumb: var(--theme-palette-neutral-text-560); + --theme-palette-text-disabled: var(--theme-palette-neutral-text-500); + --theme-palette-text-disabled-border: var(--theme-palette-neutral-text-460); + --theme-palette-text-disabled-surface: var(--theme-palette-neutral-text-420); - --tertiary-background-color: rgba(168, 85, 247, 0.1); - --tertiary-border-color: rgba(168, 85, 247, 0.4); - --tertiary-text-color: rgb(244, 244, 245); - --tertiary-title-text-color: rgb(216, 180, 254); + --theme-brand-primary: var(--theme-palette-primary); + --theme-brand-primary-soft: var(--theme-palette-primary-soft); + --theme-brand-primary-hover-soft: var(--theme-palette-primary-hover-soft); + --theme-brand-primary-active-soft: var(--theme-palette-primary-active-soft); + --theme-brand-primary-hover: var(--theme-palette-primary-hover); + --theme-brand-primary-hover-strong: var(--theme-palette-primary-hover-strong); + --theme-brand-primary-border: var(--theme-palette-primary-border); + --theme-brand-primary-menu-hover: var(--theme-palette-primary-menu-hover); + --theme-brand-primary-tool-hover: var(--theme-palette-primary-tool-hover); + --theme-brand-primary-tree-hover: var(--theme-palette-primary-tree-hover); + --theme-brand-primary-tab-hover: var(--theme-palette-primary-tab-hover); + --theme-brand-primary-tab-active: var(--theme-palette-primary-tab-active); + --theme-brand-primary-tab-border: var(--theme-palette-primary-tab-border); + --theme-brand-primary-spinner: var(--theme-palette-primary-spinner); - --quaternary-background-color: rgba(34, 197, 94, 0.2); - --quaternary-border-color: rgba(34, 197, 94, 0.4); - --quaternary-text-color: rgb(244, 244, 245); - --quaternary-title-text-color: rgb(110, 231, 183); - --quaternary-hover-background-color: rgb(14, 169, 71, 0.3); + --theme-brand-secondary: var(--theme-palette-secondary); + --theme-brand-secondary-soft: var(--theme-palette-secondary-soft); + --theme-brand-secondary-hover: var(--theme-palette-secondary-hover); + --theme-brand-secondary-border: var(--theme-palette-secondary-border); - --text-button-background-color: rgba(30, 64, 175, 0.28); - --text-button-color: #ffffff; - --text-button-border-color: rgba(96, 165, 250, 0.28); - --text-button-hover-color: #ffffff; - --text-button-hover-background-color: rgba(37, 99, 235, 0.42); - --text-button-primary-background-color: var(--primary-color); - --text-button-primary-color: #ffffff; - --text-button-primary-hover-background-color: rgba(59, 130, 246, 0.9); - --text-button-primary-hover-color: #ffffff; - --text-button-primary-border-color: rgba(80, 150, 255, 0.8); - --text-button-secondary-background-color: rgba(220, 70, 70, 0.25); - --text-button-secondary-color: #ffffff; - --text-button-secondary-hover-background-color: rgba(220, 70, 70, 0.55); - --text-button-secondary-hover-color: #ffffff; - --text-button-secondary-border-color: rgba(220, 70, 70, 0.5); - --text-button-tertiary-background-color: var(--tertiary-background-color); - --text-button-tertiary-color: var(--tertiary-title-text-color); - --text-button-tertiary-hover-background-color: rgba(168, 85, 247, 0.2); - --text-button-tertiary-hover-color: rgb(233, 213, 255); - --text-button-tertiary-border-color: var(--tertiary-border-color); + --theme-brand-text: var(--theme-palette-text); + --theme-brand-text-muted: var(--theme-palette-text-muted); + --theme-brand-text-soft: var(--theme-palette-text-soft); + --theme-brand-text-menu: var(--theme-palette-text-menu); + --theme-brand-text-inverse: var(--theme-palette-text-inverse); + --theme-brand-text-header: var(--theme-palette-text-header); + --theme-brand-text-label: var(--theme-palette-text-label); + --theme-brand-text-title: var(--theme-palette-text-title); + --theme-brand-text-card: var(--theme-palette-text-card); + --theme-brand-text-rating: var(--theme-palette-text-rating); + --theme-brand-text-option-active: var(--theme-palette-text-option-active); + --theme-brand-text-breadcrumb: var(--theme-palette-text-breadcrumb); + --theme-brand-text-menu-warn: var(--theme-palette-text-menu-warn); + --theme-brand-text-menu-warn-strong: var(--theme-palette-text-menu-warn-strong); + --theme-brand-text-disabled: var(--theme-palette-text-disabled); + --theme-brand-text-disabled-border: var(--theme-palette-text-disabled-border); + --theme-brand-text-disabled-surface: var(--theme-palette-text-disabled-surface); - --text-button-active-background-color: var(--quaternary-hover-background-color); - --text-button-active-color: var(--quaternary-title-text-color); - --text-button-active-hover-background-color: var(--quaternary-background-color); - --text-button-active-hover-color: var(--quaternary-text-color); - --text-button-active-border-color: var(--quaternary-border-color); + --theme-brand-page: var(--theme-palette-page); + --theme-brand-page-alt: var(--theme-palette-page-alt); + --theme-brand-surface: var(--theme-palette-surface); + --theme-brand-surface-soft: var(--theme-palette-surface-soft); + --theme-brand-surface-muted: var(--theme-palette-surface-muted); + --theme-brand-surface-strong: var(--theme-palette-surface-strong); + --theme-brand-surface-header: var(--theme-palette-surface-header); + --theme-brand-surface-tooltip: var(--theme-palette-surface-tooltip); + --theme-brand-surface-menu: var(--theme-palette-surface-menu); + --theme-brand-surface-tabset: var(--theme-palette-surface-tabset); + --theme-brand-surface-tab: var(--theme-palette-surface-tab); + --theme-brand-surface-breadcrumbs: var(--theme-palette-surface-breadcrumbs); + --theme-brand-surface-breadcrumb: var(--theme-palette-surface-breadcrumb); + --theme-brand-surface-showcase: var(--theme-palette-surface-showcase); + --theme-brand-surface-toolbar: var(--theme-palette-surface-toolbar); + --theme-brand-surface-toolbar-alt: var(--theme-palette-surface-toolbar-alt); + --theme-brand-surface-card-gradient: var(--theme-palette-surface-card-gradient); + --theme-brand-surface-input: var(--theme-palette-surface-input); + --theme-brand-surface-option-active: var(--theme-palette-surface-option-active); + --theme-brand-surface-dialog-backdrop: var(--theme-palette-surface-dialog-backdrop); + --theme-brand-surface-modal-backdrop: var(--theme-palette-surface-modal-backdrop); + --theme-brand-surface-setup-hover: var(--theme-palette-surface-setup-hover); + --theme-brand-surface-setup-active: var(--theme-palette-surface-setup-active); + --theme-brand-surface-code: var(--theme-palette-surface-code); + --theme-brand-surface-code-solid: var(--theme-palette-surface-code-solid); + --theme-brand-surface-code-compare: var(--theme-palette-surface-code-compare); + --theme-brand-surface-glass: var(--theme-palette-surface-glass); + --theme-brand-surface-glass-gradient-1: var(--theme-palette-surface-glass-gradient-1); + --theme-brand-surface-glass-gradient-2: var(--theme-palette-surface-glass-gradient-2); + --theme-brand-surface-glass-input: var(--theme-palette-surface-glass-input); - --text-button-disabled-border-color: #717171; - --text-button-disabled-background-color: #494949; - --text-button-disabled-color: #9b9b9b; + --theme-brand-border: var(--theme-palette-border); + --theme-brand-border-strong: var(--theme-palette-border-strong); + --theme-brand-border-hover: var(--theme-palette-border-hover); + --theme-brand-border-focus: var(--theme-palette-border-focus); + --theme-brand-border-popup: var(--theme-palette-border-popup); + --theme-brand-border-soft: var(--theme-palette-border-soft); + --theme-brand-border-tabset: var(--theme-palette-border-tabset); + --theme-brand-border-table: var(--theme-palette-border-table); + --theme-brand-border-muted: var(--theme-palette-border-muted); + --theme-brand-border-input: var(--theme-palette-border-input); + --theme-brand-border-selection: var(--theme-palette-border-selection); - --toggle-switch-on-background-color: rgba(34, 197, 94, 0.72); - --toggle-switch-off-background-color: rgba(51, 65, 85, 0.9); - --toggle-switch-toggle-color: #ffffff; + --theme-brand-tertiary-surface: var(--theme-palette-accent-tone-soft-surface); + --theme-brand-tertiary-border: var(--theme-palette-accent-tone-soft-border); + --theme-brand-tertiary-text: var(--theme-palette-accent-tone-text); + --theme-brand-tertiary-title: var(--theme-palette-accent-tone-text); + --theme-brand-tertiary-hover: var(--theme-palette-accent-tone-soft-hover); + --theme-brand-tertiary-hover-text: var(--theme-palette-accent-tone-text-soft); - --table-header-background-color: #1E293B; - --table-card-background-color: rgba(15, 23, 42, 0.56); - --table-alternate-background-color: rgba(30, 41, 59, 0.42); - --stream-tech-chip-container-color: #74c0fc; - --stream-tech-chip-container-background-color: #263645; + --theme-brand-positive: var(--theme-palette-success-tone-520); + --theme-brand-positive-soft: var(--theme-palette-success-tone-soft-200); + --theme-brand-positive-border: var(--theme-palette-success-tone-border); + --theme-brand-positive-strong: var(--theme-palette-success-tone-strong); + --theme-brand-positive-hover: var(--theme-palette-success-tone-hover); + --theme-brand-positive-text: var(--theme-palette-success-tone-text); + --theme-brand-positive-title: var(--theme-palette-success-tone-500); + + --theme-brand-warning: var(--theme-palette-warning-tone-420); + --theme-brand-warning-strong: var(--theme-palette-warning-tone-520); + --theme-brand-warning-base: var(--theme-palette-warning-tone-500); + --theme-brand-danger: var(--theme-palette-danger-tone-520); + --theme-brand-danger-strong: var(--theme-palette-danger-tone-500); + --theme-brand-danger-deep: var(--theme-palette-danger-tone-480); + --theme-brand-active: var(--theme-palette-success-tone-540); + --theme-brand-info: var(--theme-palette-info-tone-500); + --theme-brand-info-strong: var(--theme-palette-info-tone-520); + --theme-brand-info-surface: var(--theme-palette-info-tone-surface); + --theme-brand-info-border: var(--theme-palette-info-tone-border); + --theme-brand-success-alt: var(--theme-palette-success-tone-500); + --theme-brand-success-soft-alt: var(--theme-palette-success-tone-380); + --theme-brand-quaternary: var(--theme-palette-quaternary-tone-500); + --theme-brand-emphasis: var(--theme-palette-emphasis-tone-500); + --theme-brand-accent: var(--theme-palette-accent-tone-500); + + --theme-brand-tag-surface: var(--theme-palette-status-tag-surface); + --theme-brand-tag-active-text: var(--theme-palette-status-tag-active-text); + --theme-brand-tag-active-surface: var(--theme-palette-status-tag-active-surface); + --theme-brand-tag-active-border: var(--theme-palette-status-tag-active-border); + --theme-brand-tag-alt-text: var(--theme-palette-status-tag-alt-text); + --theme-brand-tag-alt-surface: var(--theme-palette-status-tag-alt-surface); + --theme-brand-tag-alt-border: var(--theme-palette-status-tag-alt-border); + --theme-brand-tag-expired-text: var(--theme-palette-status-tag-expired-text); + --theme-brand-tag-expired-surface: var(--theme-palette-status-tag-expired-surface); + --theme-brand-tag-expired-border: var(--theme-palette-status-tag-expired-border); + --theme-brand-tag-banned-text: var(--theme-palette-status-tag-banned-text); + --theme-brand-tag-banned-surface: var(--theme-palette-status-tag-banned-surface); + --theme-brand-tag-banned-border: var(--theme-palette-status-tag-banned-border); + --theme-brand-live-surface: var(--theme-palette-status-live-surface); + --theme-brand-video-surface: var(--theme-palette-status-video-surface); + --theme-brand-series-surface: var(--theme-palette-status-series-surface); + + --theme-brand-popup-shadow: var(--theme-palette-shadow-popup); + --theme-brand-card-shadow: var(--theme-palette-shadow-card); + --theme-brand-scrollbar-track-shadow: var(--theme-palette-shadow-scrollbar-track); + --theme-brand-tab-header-shadow: var(--theme-palette-shadow-tab-header); + --theme-brand-field-code-shadow: var(--theme-palette-shadow-field-code); + --theme-brand-toggle-shadow: var(--theme-palette-shadow-toggle); + --theme-brand-toast-shadow: var(--theme-palette-shadow-toast); + --theme-brand-source-block-shadow: var(--theme-palette-shadow-source-block); + --theme-brand-glass-shadow: var(--theme-palette-shadow-glass); + + --theme-brand-menu-icon-update: var(--theme-palette-menu-icon-update); + --theme-brand-menu-icon-user: var(--theme-palette-menu-icon-user); + --theme-brand-menu-icon-api-server: var(--theme-palette-menu-icon-api-server); + --theme-brand-menu-icon-main-config: var(--theme-palette-menu-icon-main-config); + --theme-brand-menu-icon-status: var(--theme-palette-menu-icon-status); + + --theme-brand-code-identifier: var(--theme-palette-code-identifier); + --theme-brand-code-var-access: var(--theme-palette-code-var-access); + --theme-brand-code-field: var(--theme-palette-code-field); + --theme-brand-code-property: var(--theme-palette-code-property); + --theme-brand-code-literal: var(--theme-palette-code-literal); + --theme-brand-code-num: var(--theme-palette-code-num); + --theme-brand-code-builtin: var(--theme-palette-code-builtin); + --theme-brand-code-reserved: var(--theme-palette-code-reserved); + --theme-brand-code-regex: var(--theme-palette-code-regex); + --theme-brand-code-enum: var(--theme-palette-code-enum); + --theme-brand-code-range: var(--theme-palette-code-range); + --theme-brand-code-op: var(--theme-palette-code-op); + --theme-brand-code-compare-text: var(--theme-palette-code-compare-text); + --theme-brand-code-bracket-1: var(--theme-palette-code-bracket-1); + --theme-brand-code-bracket-2: var(--theme-palette-code-bracket-2); + --theme-brand-code-bracket-3: var(--theme-palette-code-bracket-3); + --theme-brand-code-any-match: var(--theme-palette-code-any-match); + + --theme-brand-epg-program-surface: var(--theme-palette-epg-program-surface); + --theme-brand-epg-program-active-surface: var(--theme-palette-epg-program-active-surface); + --theme-brand-epg-program-text: var(--theme-palette-epg-program-text); + --theme-brand-epg-program-time: var(--theme-palette-epg-program-time); + --theme-brand-epg-program-time-active: var(--theme-palette-epg-program-time-active); + --theme-brand-epg-past-surface: var(--theme-palette-epg-past-surface); + --theme-brand-epg-now-line: var(--theme-palette-epg-now-line); + + --theme-brand-particle-1: var(--theme-palette-particle-1); + --theme-brand-particle-2: var(--theme-palette-particle-2); + --theme-brand-particle-alpha-boost: var(--theme-palette-particle-alpha-boost); + + --theme-brand-chip-container-text: var(--theme-palette-chip-container-text); + --theme-brand-chip-container-surface: var(--theme-palette-chip-container-surface); + --theme-brand-chip-video-text: var(--theme-palette-chip-video-text); + --theme-brand-chip-video-surface: var(--theme-palette-chip-video-surface); + --theme-brand-chip-resolution-text: var(--theme-palette-chip-resolution-text); + --theme-brand-chip-resolution-surface: var(--theme-palette-chip-resolution-surface); + --theme-brand-chip-fps-text: var(--theme-palette-chip-fps-text); + --theme-brand-chip-fps-surface: var(--theme-palette-chip-fps-surface); + --theme-brand-chip-audio-text: var(--theme-palette-chip-audio-text); + --theme-brand-chip-audio-surface: var(--theme-palette-chip-audio-surface); + --theme-brand-chip-audio-channels-text: var(--theme-palette-chip-audio-channels-text); + + --theme-brand-brick-input-xtream: var(--theme-palette-graph-input-xtream); + --theme-brand-brick-input-m3u: var(--theme-palette-graph-input-m3u); + --theme-brand-brick-input-library: var(--theme-palette-graph-input-library); + --theme-brand-brick-target: var(--theme-palette-graph-target); + --theme-brand-brick-output: var(--theme-palette-graph-output); + --theme-brand-brick-output-xtream: var(--theme-palette-graph-output-xtream); + --theme-brand-brick-output-m3u: var(--theme-palette-graph-output-m3u); + --theme-brand-brick-output-hdhomerun: var(--theme-palette-graph-output-hdhomerun); + --theme-brand-brick-output-strm: var(--theme-palette-graph-output-strm); + --theme-brand-brick-port: var(--theme-palette-graph-port); + --theme-brand-brick-port-border: var(--theme-palette-graph-port-border); + --theme-brand-brick-port-hover: var(--theme-palette-graph-port-hover); + --theme-brand-graph-grid-1: var(--theme-palette-graph-grid-1); + --theme-brand-graph-grid-2: var(--theme-palette-graph-grid-2); + + --theme-brand-login-logo: var(--theme-palette-login-logo); + --theme-brand-series-title: var(--theme-palette-series-title); + --theme-brand-series-backdrop-overlay: var(--theme-palette-series-backdrop-overlay); + + --primary-color: var(--theme-brand-primary); + --secondary-color: var(--theme-brand-secondary); + --theme-color: var(--theme-brand-primary); + + --background-color: var(--theme-brand-page); + --particle-flow-background-color: var(--theme-brand-page-alt); + --particle-flow-background-accent-color-1: var(--theme-brand-particle-1); + --particle-flow-background-accent-color-2: var(--theme-brand-particle-2); + --particle-flow-background-alpha-boost: var(--theme-brand-particle-alpha-boost); + + --text-color: var(--theme-brand-text); + --modest-text-color: var(--theme-brand-text-muted); + --menu-text-color: var(--theme-brand-text-menu); + --menu-icon-color: var(--theme-brand-text-muted); + --menu-text-active-color: var(--theme-brand-primary); + --card-color: var(--theme-brand-text-card); + --action-item-color: var(--theme-brand-text-inverse); + --menu-item-hover-color: var(--theme-brand-text); + --icon-button-hover-color: var(--theme-brand-text); + --toggle-switch-toggle-color: var(--theme-brand-text-inverse); + --tool-button-color: var(--theme-brand-text-inverse); + --tool-button-hover-color: var(--theme-brand-text-inverse); + --toolbar-button-hover-color: var(--theme-brand-text-inverse); + --tree-hover-color: var(--theme-brand-text-inverse); + --tree-expander-hover-color: var(--theme-brand-text-inverse); + --tooltip-color: var(--theme-brand-text); + --popup-color: var(--theme-brand-text); + --playlist-color: var(--theme-brand-text-card); + --playlist-rating-color: var(--theme-brand-text-rating); + --sidebar-toggle-color: var(--theme-brand-text); + --sidebar-toggle-hover-color: var(--theme-brand-text-muted); + --hint-color: var(--theme-brand-text-soft); + --tree-count-color: var(--theme-brand-text-soft); + --label-color: var(--theme-brand-text-label); + --title-label-color: var(--theme-brand-text-title); + --menu-button-color: var(--theme-brand-text-menu); + --menu-button-hover-color: var(--theme-brand-text-header); + --menu-button-warn-color: var(--theme-brand-text-menu-warn); + --menu-button-warn-hover-color: var(--theme-brand-text-menu-warn-strong); + --app-header-color: var(--theme-brand-text-header); + --table-header-background-color: var(--theme-brand-surface-toolbar); + --table-card-background-color: var(--theme-brand-surface-muted); + --table-alternate-background-color: var(--theme-brand-surface-toolbar); + --table-border-color: var(--theme-brand-border-table); + --playlist-rating-background-color: var(--theme-brand-surface-toolbar-alt); + --scrollbar-track-color: var(--theme-brand-surface-toolbar-alt); + --scrollbar-handle-color: var(--theme-brand-text-muted); + --scrollbar-track-shadow: var(--theme-brand-scrollbar-track-shadow); + + --border-color: var(--theme-brand-border); + --hover-border-color: var(--theme-brand-border-hover); + --input-border-color: var(--theme-brand-border); + --input-focus-border-color: var(--theme-brand-border-focus); + --popup-border-color: var(--theme-brand-border-popup); + --card-border-color: var(--theme-brand-border-strong); + --tag-border-color: var(--theme-brand-border-soft); + --tabset-border-color: var(--theme-brand-border-tabset); + --icon-button-hover-border-color: var(--theme-brand-text-header); + --text-button-border-color: var(--theme-brand-primary-soft); + --text-button-primary-border-color: var(--theme-brand-primary-border); + --text-button-secondary-border-color: var(--theme-brand-secondary-border); + --text-button-disabled-border-color: var(--theme-brand-text-disabled-border); + --checkbox-border-radius: 4px; + + --action-item-background-color: var(--theme-brand-primary-soft); + --input-background-color: var(--theme-brand-surface-input); + --button-background-color: var(--theme-brand-primary); + --menu-item-hover-background-color: var(--theme-brand-primary-hover-soft); + --menu-item-active-background-color: var(--theme-brand-primary-active-soft); + --card-background-color: var(--theme-brand-surface); + --sub-card-background-color: var(--theme-brand-surface-soft); + --card-background-color-darker: var(--theme-brand-surface-strong); + --popup-background-color: var(--theme-brand-surface); + --tooltip-background-color: var(--theme-brand-surface-tooltip); + --app-header-background-color: var(--theme-brand-surface-header); + --menu-button-background-color: var(--theme-brand-surface-menu); + --menu-button-hover-background-color: var(--theme-brand-primary-menu-hover); + --menu-button-warn-hover-background-color: var(--theme-brand-tag-banned-surface); + --icon-button-background-color: var(--button-background-color); + --icon-button-color: var(--theme-brand-text); + --icon-button-hover-background-color: var(--theme-brand-primary-tool-hover); + --tool-button-background-color: var(--theme-brand-surface-toolbar); + --tool-button-hover-background-color: var(--theme-brand-primary-tool-hover); + --toolbar-background-color: var(--theme-brand-surface-toolbar); + --toolbar-bg-color: var(--theme-brand-surface-toolbar-alt); + --toolbar-button-hover-background-color: var(--theme-brand-primary-tool-hover); + --tabset-background-color: var(--theme-brand-surface-tabset); + --tab-background-color: var(--theme-brand-surface-tab); + --tab-hover-background-color: var(--theme-brand-primary-tab-hover); + --tab-active-background-color: var(--theme-brand-primary-tab-active); + --tab-active-border-color: var(--theme-brand-primary-tab-border); + --tab-hover-color: var(--theme-brand-text-inverse); + --tab-active-color: var(--theme-brand-text-inverse); + --checkbox-background-color: var(--theme-brand-surface-tab); + --checkbox-hover-background-color: var(--theme-brand-primary-tool-hover); + --checkbox-checked-background-color: var(--theme-brand-primary-tool-hover); + --option-active-background-color: var(--theme-brand-surface-option-active); + --option-active-color: var(--theme-brand-text-option-active); + --showcase-card-background: var(--theme-brand-surface-showcase); + --breadcrumbs-background-color: var(--theme-brand-surface-breadcrumbs); + --breadcrumb-background-color: var(--theme-brand-surface-breadcrumb); + --breadcrumb-active-background-color: var(--theme-brand-positive-soft); + --breadcrumb-color: var(--theme-brand-text-breadcrumb); + --breadcrumb-active-color: var(--theme-brand-text-option-active); + --tree-hover-background-color: var(--theme-brand-primary-tree-hover); + + --tertiary-background-color: var(--theme-brand-tertiary-surface); + --tertiary-border-color: var(--theme-brand-tertiary-border); + --tertiary-text-color: var(--theme-brand-tertiary-text); + --tertiary-title-text-color: var(--theme-brand-tertiary-title); + --quaternary-background-color: var(--theme-brand-positive-soft); + --quaternary-border-color: var(--theme-brand-positive-border); + --quaternary-text-color: var(--theme-brand-positive-text); + --quaternary-title-text-color: var(--theme-brand-positive-title); + --quaternary-hover-background-color: var(--theme-brand-positive-hover); + + --text-button-background-color: var(--theme-brand-surface-menu); + --text-button-color: var(--theme-brand-text-menu); + --text-button-hover-color: var(--theme-brand-text); + --text-button-hover-background-color: var(--theme-brand-primary-hover); + --text-button-primary-background-color: var(--theme-brand-primary); + --text-button-primary-color: var(--theme-brand-text-inverse); + --text-button-primary-hover-background-color: var(--theme-brand-primary-hover-strong); + --text-button-primary-hover-color: var(--theme-brand-text-inverse); + --text-button-secondary-background-color: var(--theme-brand-secondary-soft); + --text-button-secondary-color: color-mix( + in srgb, + var(--theme-brand-danger) 72%, + var(--theme-brand-text-inverse) + ); + --text-button-secondary-hover-background-color: var(--theme-brand-secondary-hover); + --text-button-secondary-hover-color: color-mix( + in srgb, + var(--theme-brand-danger-strong) 74%, + var(--theme-brand-text-inverse) + ); + --text-button-tertiary-background-color: var(--theme-brand-tertiary-surface); + --text-button-tertiary-color: var(--theme-brand-tertiary-title); + --text-button-tertiary-hover-background-color: var(--theme-brand-tertiary-hover); + --text-button-tertiary-hover-color: var(--theme-brand-tertiary-hover-text); + --text-button-tertiary-border-color: var(--theme-brand-tertiary-border); + --text-button-active-background-color: var(--theme-brand-positive-hover); + --text-button-active-color: var(--theme-brand-positive-text); + --text-button-active-hover-background-color: var(--theme-brand-positive-soft); + --text-button-active-hover-color: var(--theme-brand-positive-title); + --text-button-active-border-color: var(--theme-brand-positive-border); + --text-button-disabled-background-color: var(--theme-brand-text-disabled-surface); + --text-button-disabled-color: var(--theme-brand-text-disabled); + + --toggle-switch-on-background-color: var(--theme-brand-positive-strong); + --toggle-switch-off-background-color: var(--theme-brand-border-soft); + --toggle-switch-toggle-shadow: var(--theme-brand-toggle-shadow); + + --stream-tech-chip-container-color: var(--theme-brand-chip-container-text); + --stream-tech-chip-container-background-color: var(--theme-brand-chip-container-surface); --stream-tech-chip-container-border-color: transparent; - --stream-tech-chip-video-codec-color: #83da91; - --stream-tech-chip-video-codec-background-color: #2b3e30; + --stream-tech-chip-video-codec-color: var(--theme-brand-chip-video-text); + --stream-tech-chip-video-codec-background-color: var(--theme-brand-chip-video-surface); --stream-tech-chip-video-codec-border-color: transparent; - --stream-tech-chip-resolution-color: #e09393; - --stream-tech-chip-resolution-background-color: #462d2f; + --stream-tech-chip-resolution-color: var(--theme-brand-chip-resolution-text); + --stream-tech-chip-resolution-background-color: var(--theme-brand-chip-resolution-surface); --stream-tech-chip-resolution-border-color: transparent; - --stream-tech-chip-fps-color: #ffc078; - --stream-tech-chip-fps-background-color: #473426; + --stream-tech-chip-fps-color: var(--theme-brand-chip-fps-text); + --stream-tech-chip-fps-background-color: var(--theme-brand-chip-fps-surface); --stream-tech-chip-fps-border-color: transparent; - --stream-tech-chip-audio-codec-color: #faa2c1; - --stream-tech-chip-audio-codec-background-color: #432c36; + --stream-tech-chip-audio-codec-color: var(--theme-brand-chip-audio-text); + --stream-tech-chip-audio-codec-background-color: var(--theme-brand-chip-audio-surface); --stream-tech-chip-audio-codec-border-color: transparent; - --stream-tech-chip-audio-channels-color: #ea97b5; - --stream-tech-chip-audio-channels-background-color: #432c36; + --stream-tech-chip-audio-channels-color: var(--theme-brand-chip-audio-channels-text); + --stream-tech-chip-audio-channels-background-color: var(--theme-brand-chip-audio-surface); --stream-tech-chip-audio-channels-border-color: transparent; --discord-color: #5865f2; - --documentation-color: #2bbf5a; - --github-color: #ffffff; + --documentation-color: var(--theme-brand-success-alt); + --github-color: var(--theme-brand-text-inverse); - --app-header-background-color: rgba(7, 12, 24, 0.82); - --app-header-color: #93c5fd; + --pulse-color-1: var(--theme-brand-text-muted); + --pulse-color-2: var(--theme-brand-surface-toolbar-alt); + --tag-color: var(--theme-brand-text-card); + --tag-background-color: var(--theme-brand-tag-surface); + --tag-active-color: var(--theme-brand-tag-active-text); + --tag-active-background-color: var(--theme-brand-tag-active-surface); + --tag-active-border-color: var(--theme-brand-tag-active-border); + --tag-inactive-color: var(--theme-brand-text-soft); + --tag-inactive-background-color: var(--theme-brand-surface-breadcrumb); + --tag-inactive-border-color: var(--theme-brand-border-muted); + --tag-alt-active-color: var(--theme-brand-tag-alt-text); + --tag-alt-active-background-color: var(--theme-brand-tag-alt-surface); + --tag-alt-active-border-color: var(--theme-brand-tag-alt-border); + --tag-status-expired-color: var(--theme-brand-tag-expired-text); + --tag-status-expired-background-color: var(--theme-brand-tag-expired-surface); + --tag-status-expired-border-color: var(--theme-brand-tag-expired-border); + --tag-status-banned-color: var(--theme-brand-tag-banned-text); + --tag-status-banned-background-color: var(--theme-brand-tag-banned-surface); + --tag-status-banned-border-color: var(--theme-brand-tag-banned-border); + --tag-status-trial-color: var(--theme-brand-info-strong); + --tag-status-trial-background-color: var(--theme-brand-info-surface); + --tag-status-trial-border-color: var(--theme-brand-info-border); + --tag-status-pending-color: var(--theme-brand-info-strong); + --tag-status-pending-background-color: var(--theme-brand-info-surface); + --tag-status-pending-border-color: var(--theme-brand-info-border); - --pulse-color-1: #64748b; - --pulse-color-2: #334155; + --attention-color: var(--theme-brand-danger); + --warn-color: var(--theme-brand-warning); + --active-color: var(--theme-brand-active); + --ok-color: var(--theme-brand-positive); + --output-xtream-color: var(--theme-brand-info); + --output-m3u-color: var(--theme-brand-success-alt); + --output-hdhomerun-color: var(--theme-brand-quaternary); + --output-strm-color: var(--theme-brand-emphasis); + --tag-live-background-color: var(--theme-brand-live-surface); + --tag-live-border-color: var(--theme-brand-success-alt); + --tag-video-background-color: var(--theme-brand-video-surface); + --tag-video-border-color: var(--theme-brand-info); + --tag-series-background-color: var(--theme-brand-series-surface); + --tag-series-border-color: var(--theme-brand-quaternary); - --tag-padding: 0.3rem 0.5rem; - --tag-border-radius: 0.5rem; - --tag-border-color: #3a3a3a; - --tag-color: #e0e0e0; - --tag-background-color: #2b2e3688; + --toastr-success-color: var(--theme-brand-text-inverse); + --toastr-success-background-color: color-mix(in srgb, var(--theme-brand-positive) 40%, transparent); + --toastr-error-color: var(--theme-brand-text-inverse); + --toastr-error-background-color: color-mix(in srgb, var(--theme-brand-danger-strong) 40%, transparent); + --toastr-info-color: var(--theme-brand-text-inverse); + --toastr-info-background-color: color-mix(in srgb, var(--theme-brand-primary-border) 40%, transparent); + --toastr-warning-color: var(--theme-brand-text-inverse); + --toastr-warning-background-color: color-mix(in srgb, var(--theme-brand-warning-strong) 40%, transparent); + --toastr-shadow: var(--theme-brand-toast-shadow); - --tag-active-color: #49dc7f; - --tag-active-background-color: #1e2d2588; - --tag-active-border-color: #2b6140; + --spinner-color: color-mix(in srgb, var(--theme-brand-text-inverse) 40%, transparent); + --spinner-highlight-color: var(--theme-brand-primary-spinner); + --popup-shadow: var(--theme-brand-popup-shadow); + --card-shadow: var(--theme-brand-card-shadow); - --tag-inactive-color: #6f6f6f; - --tag-inactive-background-color: #3a3a3a88; - --tag-inactive-border-color: #555; + --menu-icon-color-update: var(--theme-brand-menu-icon-update); + --menu-icon-color-user: var(--theme-brand-menu-icon-user); + --menu-icon-color-api_server: var(--theme-brand-menu-icon-api-server); + --menu-icon-color-main_config: var(--theme-brand-menu-icon-main-config); + --menu-icon-color-status: var(--theme-brand-menu-icon-status); - --tag-alt-active-color: #d070e7; - --tag-alt-active-background-color: #311a3888; - --tag-alt-active-border-color: #5d2f69; + --code-identifier-color: var(--theme-brand-code-identifier); + --code-var-access-color: var(--theme-brand-code-var-access); + --code-field-color: var(--theme-brand-code-field); + --code-property-color: var(--theme-brand-code-property); + --code-literal-color: var(--theme-brand-code-literal); + --code-num-literal-color: var(--theme-brand-code-num); + --code-built-in-function-color: var(--theme-brand-code-builtin); + --code-reserved-color: var(--theme-brand-code-reserved); + --code-regex-color: var(--theme-brand-code-regex); + --code-enum-color: var(--theme-brand-code-enum); + --code-range-color: var(--theme-brand-code-range); + --code-op-color: var(--theme-brand-code-op); + --code-comparison-background-color: var(--theme-brand-surface-code-compare); + --code-comparison-color: var(--theme-brand-code-compare-text); + --code-bracket-1-color: var(--theme-brand-code-bracket-1); + --code-bracket-2-color: var(--theme-brand-code-bracket-2); + --code-bracket-3-color: var(--theme-brand-code-bracket-3); + --code-editor-background-color: var(--theme-brand-surface-code); + --code-editor-color: var(--theme-brand-text); + --code-any-match-color: var(--theme-brand-code-any-match); + --code-null-literal-color: var(--theme-brand-code-any-match); - --tag-status-expired-color: #efda8f; - --tag-status-expired-background-color: #39332088; - --tag-status-expired-border-color: #b69e5c; + --epg-program-background-color: var(--theme-brand-epg-program-surface); + --epg-program-color: var(--theme-brand-epg-program-text); + --epg-program-active-background-color: var(--theme-brand-epg-program-active-surface); + --epg-program-active-color: var(--theme-brand-epg-program-text); + --epg-program-time-color: var(--theme-brand-epg-program-time); + --epg-program-active-time-color: var(--theme-brand-epg-program-time-active); + --epg-past-background: var(--theme-brand-epg-past-surface); + --epg-now-line-color: var(--theme-brand-epg-now-line); - --tag-status-banned-color: #dd7573; - --tag-status-banned-background-color: #4c343488; - --tag-status-banned-border-color: #755252; + --glass-border-color: var(--theme-brand-border-input); + --glass-background-color: var(--theme-brand-surface-glass); + --glass-shadow-color: var(--theme-brand-glass-shadow); + --glass-background-gradient-color-1: var(--theme-brand-surface-glass-gradient-1); + --glass-background-gradient-color-2: var(--theme-brand-surface-glass-gradient-2); + --glass-input-border-color: var(--theme-brand-border-input); + --glass-input-background-color: var(--theme-brand-surface-glass-input); - --tag-status-trial-color: #49dcdc; - --tag-status-trial-background-color: #1e252d88; - --tag-status-trial-border-color: #2b4c61; + --graph-paper-line-color-1: var(--theme-brand-graph-grid-1); + --graph-paper-line-color-2: var(--theme-brand-graph-grid-2); - --tag-status-pending-color: #49dcdc; - --tag-status-pending-background-color: #1e252d88; - --tag-status-pending-border-color: #2b4c61; + --brick-input-xtream-border-color: color-mix(in srgb, var(--theme-brand-brick-input-xtream) 80%, transparent); + --brick-input-xtream-background-color: color-mix(in srgb, var(--theme-brand-brick-input-xtream) 53%, transparent); + --brick-input-xtream-shadow-color: color-mix(in srgb, var(--theme-brand-brick-input-xtream) 50%, transparent); + --brick-input-m3u-border-color: color-mix(in srgb, var(--theme-brand-brick-input-m3u) 80%, transparent); + --brick-input-m3u-background-color: color-mix(in srgb, var(--theme-brand-brick-input-m3u) 53%, transparent); + --brick-input-m3u-shadow-color: color-mix(in srgb, var(--theme-brand-brick-input-m3u) 50%, transparent); + --brick-input-library-border-color: color-mix(in srgb, var(--theme-brand-brick-input-library) 80%, transparent); + --brick-input-library-background-color: color-mix(in srgb, var(--theme-brand-brick-input-library) 53%, transparent); + --brick-input-library-shadow-color: color-mix(in srgb, var(--theme-brand-brick-input-library) 50%, transparent); + --brick-target-border-color: color-mix(in srgb, var(--theme-brand-brick-target) 80%, transparent); + --brick-target-background-color: color-mix(in srgb, var(--theme-brand-brick-target) 53%, transparent); + --brick-target-shadow-color: color-mix(in srgb, var(--theme-brand-brick-target) 50%, transparent); + --brick-output-border-color: color-mix(in srgb, var(--theme-brand-brick-output) 80%, transparent); + --brick-output-background-color: color-mix(in srgb, var(--theme-brand-brick-output) 53%, transparent); + --brick-output-shadow-color: color-mix(in srgb, var(--theme-brand-brick-output) 50%, transparent); + --brick-output-xtream-border-color: color-mix(in srgb, var(--theme-brand-brick-output-xtream) 80%, transparent); + --brick-output-xtream-background-color: color-mix(in srgb, var(--theme-brand-brick-output-xtream) 53%, transparent); + --brick-output-xtream-shadow-color: color-mix(in srgb, var(--theme-brand-brick-output-xtream) 50%, transparent); + --brick-output-m3u-border-color: color-mix(in srgb, var(--theme-brand-brick-output-m3u) 80%, transparent); + --brick-output-m3u-background-color: color-mix(in srgb, var(--theme-brand-brick-output-m3u) 53%, transparent); + --brick-output-m3u-shadow-color: color-mix(in srgb, var(--theme-brand-brick-output-m3u) 50%, transparent); + --brick-output-hdhomerun-border-color: color-mix(in srgb, var(--theme-brand-brick-output-hdhomerun) 80%, transparent); + --brick-output-hdhomerun-background-color: color-mix(in srgb, var(--theme-brand-brick-output-hdhomerun) 53%, transparent); + --brick-output-hdhomerun-shadow-color: color-mix(in srgb, var(--theme-brand-brick-output-hdhomerun) 50%, transparent); + --brick-output-strm-border-color: color-mix(in srgb, var(--theme-brand-brick-output-strm) 80%, transparent); + --brick-output-strm-background-color: color-mix(in srgb, var(--theme-brand-brick-output-strm) 53%, transparent); + --brick-output-strm-shadow-color: color-mix(in srgb, var(--theme-brand-brick-output-strm) 50%, transparent); + --brick-port-background-color: var(--theme-brand-brick-port); + --brick-port-border-color: var(--theme-brand-brick-port-border); + --brick-port-valid-background-color: var(--theme-brand-positive); + --brick-port-invalid-background-color: var(--theme-brand-danger-deep); + --brick-port-hover-color: var(--theme-brand-brick-port-hover); - --popup-background-color: rgba(15, 23, 42, 0.78); - --popup-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), - inset 0 0 10px rgba(255, 255, 255, 0.08); + --source-editor-delete-color: var(--theme-brand-danger-strong); + --source-editor-line-color: var(--theme-brand-text-inverse); + --source-editor-active-line-color: var(--theme-brand-positive); + --source-editor-pending-line-color: var(--theme-brand-warning-strong); + --source-editor-block-shadow: var(--theme-brand-source-block-shadow); - --popup-border-color: rgba(96, 165, 250, 0.26); - --popup-color: #e6edf7; - - --tooltip-background-color: rgba(15, 23, 42, 0.94); - --tooltip-color: #e6edf7; - - --attention-color: #f57170; - --warn-color: #e1b842; - --active-color: #3ae093; - - --output-xtream-color: #06b6d4; - --output-m3u-color: #10b981; - --output-hdhomerun-color: #6366f1; - --output-strm-color: #f43f5e; - - --tag-live-background-color: #075b4188; - --tag-live-border-color: #10b981; - --tag-video-background-color: #035b6e88; - --tag-video-border-color: #06b6d4; - --tag-series-background-color: #3c3f9f88; - --tag-series-border-color: #6366f1; - - --toastr-success-color: #ffffff; - --toastr-success-background-color: #22c55e66; - --toastr-error-color: #ffffff; - --toastr-error-background-color: #ef444466; - --toastr-info-color: #ffffff; - --toastr-info-background-color: #3b82f666; - --toastr-warning-color: #ffffff; - --toastr-warning-background-color: #f59e0b66; - - --hint-color: #7f8ea5; - --label-color: #8ec5ff; - - --playlist-color: #aeb0b2; - --playlist-rating-color: #ffffff; - --playlist-rating-background-color: #121621; - - --sidebar-toggle-color: #ffffff; - --sidebar-toggle-hover-color: #8ea2bf; - --hover-border-color: rgba(96, 165, 250, 0.46); - --spinner-color: rgba(255, 255, 255, 0.4); - --spinner-highlight-color: #60a5fa; - - --tree-count-color: #7f8ea5; - --tree-hover-background-color: #2563eb66; - --tree-hover-color: white; - --tree-expander-hover-color: white; - --tool-button-background-color: #33415588; - --tool-button-color: #fff; - --tool-button-hover-color: #ffffff; - --tool-button-hover-background-color: #2563eb88; - - --toolbar-background-color: #1e293b88; - --toolbar-button-hover-color: #ffffff; - --toolbar-button-hover-background-color: #2563eb88; - - --ok-color: #22c55e; - - --card-background-color-darker: rgba(22, 26, 36, 0.55); - --card-border-color: rgba(80, 130, 255, 0.2); - - --title-label-color: #6495b1; - - --border-radius: 8px; - - --icon-button-border-radius: 4px; - --icon-button-background-color: var(--button-background-color); - --icon-button-color: #ffffff; - --icon-button-hover-background-color: #2563eb88; - - --icon-button-hover-border-color: #93c5fd; - - --menu-button-color: #d8e1ef; - --menu-button-background-color: rgba(30, 41, 59, 0.45); - - --menu-button-hover-color: #93c5fd; - --menu-button-hover-background-color: rgba(37, 99, 235, 0.3); - - --menu-button-warn-color: #b96665; - --menu-button-warn-hover-color: #dd7573; - --menu-button-warn-hover-background-color: #4c3434; - - --scrollbar-track-color: #334155; - --scrollbar-handle-color: #64748b; - - --tabset-background-color: rgba(68, 71, 90, 0.3); - --tabset-border-color: #535353; - --tab-background-color: #44475A88; - --tab-hover-background-color: #2f6db788; - --tab-hover-color: #fdfdfd; - --tab-active-background-color: #1f4f8f88; - --tab-active-color: #fdfdfd; - --tab-active-border-color: #4f8ffb; - - --table-border-color: #44475a; - - --checkbox-background-color: #44475A88; - --checkbox-hover-background-color: #006fee88; - --checkbox-checked-background-color: #006fee88; - --checkbox-border-radius: 4px; - - --option-active-background-color: #50FA7B88; - --option-active-color: #000; - - --shocase-card-background: #4b4b4b; - - --breadcrumbs-background-color: #20273388; - --breadcrumb-background-color: #4e545d88; - --breadcrumb-color: #c4c4c4; - --breadcrumb-active-background-color: #4ad96e88; - --breadcrumb-active-color: #000; - - --menu-icon-color-update: #A3D8FF; - --menu-icon-color-user: #0ABAB5; - --menu-icon-color-api_server: #FF9D23; - --menu-icon-color-main_config: #FF2DF1; - --menu-icon-color-status: #F9E400; - - --code-identifier-color: #569cd6; - --code-var-access-color: #9cdcfe; - --code-field-color: #bb8953; - --code-property-color: #9a652f; - --code-literal-color: #65a181; - --code-num-literal-color: #6796ba; - --code-built-in-function-color: #fac46c; - --code-reserved-color: #e98863; - --code-regex-color: #bb8953; - --code-enum-color: #65a181; - --code-range-color: #6796ba; - --code-op-color: #569cd6; - --code-comparison-background-color: #20242988; - --code-comparison-color: #ffffff; - --code-bracket-1-color: #569CD6; - --code-bracket-2-color: #C586C0; - --code-bracket-3-color: #B5CEA8; - --code-editor-background-color: #1e1e1e88; - --code-editor-color: #d4d4d4; - --code-any-match-color: #fa5f2d; - --code-null-literal-color: #fa5f2d; - - --toolbar-bg-color: #161b25; - - --epg-program-background-color: #1a222b; - --epg-program-color: #ffffff; - --epg-program-active-background-color: #263140; - --epg-program-active-color: #ffffff; - --epg-program-time-color: #707f99; - --epg-program-active-time-color: #778295; - - --glass-border-color: rgba(255, 255, 255, 0.15); - --glass-background-color: rgba(255, 255, 255, 0.1); - --glass-shadow-color: rgba(0, 0, 0, 0.1); - --glass-background-gradient-color-1: rgba(255, 255, 255, 0); - --glass-background-gradient-color-2: rgba(255, 255, 255, 0.1); - --glass-input-border-color: rgba(255, 255, 255, 0.15); - --glass-input-background-color: rgba(0, 0, 0, 0.15); - - --graph-paper-line-color-1: #e0e0e030; - --graph-paper-line-color-2: #c0c0c030; - - - /* INPUT BLOCKS — cool blues (distinct per type) */ - - --brick-input-xtream-border-color: #1565c0cc; - --brick-input-xtream-background-color: #1565c088; - --brick-input-xtream-shadow-color: #1565c080; - - --brick-input-m3u-border-color: #409affcc; - --brick-input-m3u-background-color: #409aff88; - --brick-input-m3u-shadow-color: #409aff80; - - --brick-input-library-border-color: #64b5f6cc; - --brick-input-library-background-color: #64b5f688; - --brick-input-library-shadow-color: #64b5f680; - - /* TARGET BLOCKS — balanced green/teal */ - --brick-target-border-color: #2aa198cc; - /* Solarized teal */ - --brick-target-background-color: #2aa19888; - --brick-target-shadow-color: #2aa19880; - - /* GENERIC OUTPUT — warm amber */ - --brick-output-border-color: #f39c12cc; - --brick-output-background-color: #f39c1288; - --brick-output-shadow-color: #f39c1280; - - /* INDIVIDUAL OUTPUT TYPES — distinct but cohesive */ - --brick-output-xtream-border-color: #0099ffcc; - /* vivid sky blue */ - --brick-output-xtream-background-color: #0099ff88; - --brick-output-xtream-shadow-color: #0099ff80; - - --brick-output-m3u-border-color: #8bc34acc; - /* light green */ - --brick-output-m3u-background-color: #8bc34a88; - --brick-output-m3u-shadow-color: #8bc34a80; - - --brick-output-hdhomerun-border-color: #9b59b6cc; - /* purple */ - --brick-output-hdhomerun-background-color: #9b59b688; - --brick-output-hdhomerun-shadow-color: #9b59b680; - - --brick-output-strm-border-color: #e74c3ccc; - /* strong red */ - --brick-output-strm-background-color: #e74c3c88; - --brick-output-strm-shadow-color: #e74c3c80; - - --brick-port-background-color: #587293; - --brick-port-border-color: #ffffff; - --brick-port-valid-background-color: #22c55e; - --brick-port-invalid-background-color: #e74c3c; - --source-editor-delete-color: #ef4444; - - --source-editor-line-color: #ffffff; - --source-editor-active-line-color: #22c55e; - - --source-editor-pending-line-color: #f59e0b; - --brick-port-hover-color: #f59e0b; - - --selection-area-border-color: rgba(0, 120, 215, 0.9); - --selection-area-background-color: rgba(0, 120, 215, 0.12); -} - -body[data-theme="bright"] { - - --primary-color: #2f6fa8; - --secondary-color: #d46a6a; - --background-color: #e9eff4; - --particle-flow-background-color: #477fad; - --particle-flow-background-accent-color-1: #154679; - --particle-flow-background-accent-color-2: #9bb8cf; - --particle-flow-background-alpha-boost: 1.45; - - --text-color: #1f2f3f; - --modest-text-color: #5a7084; - --border-color: #cfdbe6; - - - --card-color: #475569; - --card-background-color: #f7fbff; - --sub-card-background-color: #f1f6fb; - --card-background-color-darker: #eaf1f8; - --card-border-color: #cfdae6; - - /* Shadows & Depth */ - --popup-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05); - --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05); - - /* Menu & Navigation */ - --menu-text-color: #30465b; - --menu-icon-color: #597286; - --menu-item-hover-background-color: rgba(47, 111, 168, 0.1); - --menu-item-hover-color: #2b5f8a; - --menu-item-active-background-color: rgba(47, 111, 168, 0.16); - --menu-text-active-color: #2f6fa8; - - --sidebar-toggle-color: #475569; - --sidebar-toggle-hover-color: #3b82f6; - - /* UI Components */ - --action-item-background-color: rgba(37, 99, 235, 0.06); - --action-item-color: #0f172a; - - --input-background-color: transparent; - --input-border-color: #cbd5e1; - --input-focus-border-color: #3b82f6; - - --button-background-color: #2f6fa8; - --icon-button-background-color: #2f6fa8; - --icon-button-hover-background-color: #25597e; - --icon-button-hover-border-color: #8fb0cb; - --icon-button-color: #121525; - --icon-button-hover-color: #0046ff; - - --text-button-background-color: #e6eef6; - --text-button-border-color: #c7d7e5; - --text-button-hover-background-color: #d8e5f1; - --text-button-color: #3c5368; - --text-button-hover-color: #2c4256; - --text-button-primary-background-color: #2f6fa8; - --text-button-primary-hover-background-color: #275f90; - --text-button-primary-color: #ffffff; - --text-button-primary-hover-color: #ffffff; - --text-button-primary-border-color: #3b82f6; - - --text-button-secondary-background-color: #fee2e2; - --text-button-secondary-color: #ef4444; - --text-button-secondary-hover-background-color: #fecaca; - --text-button-secondary-hover-color: #dc2626; - --text-button-secondary-border-color: #fca5a5; - - --text-button-active-background-color: #dcfce7; - --text-button-active-color: #166534; - --text-button-active-hover-background-color: #bbf7d0; - --text-button-active-hover-color: #15803d; - --text-button-active-border-color: #86efac; - - --text-button-disabled-border-color: #434343; - --text-button-disabled-background-color: #717171; - --text-button-disabled-color: #9b9b9b; - - /* Form Elements */ - --toggle-switch-on-background-color: #22c55e; - --toggle-switch-off-background-color: #e2e8f0; - --toggle-switch-toggle-color: #ffffff; - - --checkbox-background-color: #f8fafc; - --checkbox-hover-background-color: #eff6ff; - --checkbox-checked-background-color: #3b82f6; - - /* Tables */ - --table-header-background-color: #e4ecf4; - --table-card-background-color: #f7fbff; - --table-alternate-background-color: #f0f6fc; - --table-border-color: #cfdae6; - - /* Tags & Statuses */ - --tag-background-color: #f1f5f9; - --tag-color: #475569; - --tag-border-color: #e2e8f0; - - --tag-active-background-color: #f0fdf4; - --tag-active-color: #166534; - --tag-active-border-color: #bbf7d0; - - --tag-inactive-background-color: #f8fafc; - --tag-inactive-color: #94a3b8; - --tag-inactive-border-color: #e2e8f0; - - --tag-alt-active-background-color: #faf5ff; - --tag-alt-active-color: #6b21a8; - --tag-alt-active-border-color: #e9d5ff; - - --tag-status-expired-background-color: #fffbeb; - --tag-status-expired-color: #92400e; - --tag-status-expired-border-color: #fde68a; - - --tag-status-banned-background-color: #fef2f2; - --tag-status-banned-color: #991b1b; - --tag-status-banned-border-color: #fecaca; - - --tag-status-trial-background-color: #ecfeff; - --tag-status-trial-color: #155e75; - --tag-status-trial-border-color: #a5f3fc; - - --tag-status-pending-background-color: #eff6ff; - --tag-status-pending-color: #1e40af; - --tag-status-pending-border-color: #bfdbfe; - - --tag-live-background-color: #f0fdf4; - --tag-live-border-color: #22c55e; - --tag-video-background-color: #ecfeff; - --tag-video-border-color: #06b6d4; - --tag-series-background-color: #eef2ff; - --tag-series-border-color: #6366f1; - - /* Toastr Notifications */ - --toastr-success-background-color: #d7eadf; - --toastr-error-background-color: #f1dcdc; - --toastr-info-background-color: #dbe8f3; - --toastr-warning-background-color: #f3ead4; - - --toastr-success-color: #166534; - --toastr-error-color: #991b1b; - --toastr-info-color: #1e40af; - --toastr-warning-color: #92400e; - - /* Popups & Tooltips */ - --popup-background-color: #f6fafeef; - --popup-color: #1e293b; - --popup-border-color: #cfdae6; - --tooltip-background-color: #2a3f54; - --tooltip-color: #eff5fb; - - /* Header */ - --app-header-background-color: #ffffffdd; - --app-header-color: #2563eb; - - /* Utilities */ - --pulse-color-1: #e2e8f0; - --pulse-color-2: #edf2f7; - --hint-color: #94a3b8; - --label-color: #3b82f6; - --title-label-color: #64748b; - --ok-color: #16a34a; - --warn-color: #eab308; - --attention-color: #ef4444; - --active-color: #22c55e; - - /* EPG */ - --epg-program-background-color: #ffffff; - --epg-program-color: #334155; - --epg-program-active-background-color: #f1f5f9; - --epg-program-active-color: #1e293b; - --epg-program-time-color: #94a3b8; - --epg-program-active-time-color: #475569; - - /* Tabs */ - --tabset-background-color: #e6edf4; - --tab-background-color: #f3f8fd; - --tab-hover-background-color: #dce8f3; - --tab-hover-color: #2f6fa8; - --tab-active-background-color: #d1e1ef; - --tab-active-color: #25557e; - --tab-active-border-color: #4f81ad; - - --tabset-border-color: #e2e8f0; - - /* Code Editor (Fancy Light) */ - --code-editor-background-color: #fdfdfd; - --code-editor-color: #334155; - --code-identifier-color: #0366d6; - --code-var-access-color: #005cc5; - --code-field-color: #e36209; - --code-property-color: #24292e; - --code-literal-color: #28a745; - --code-num-literal-color: #005cc5; - --code-built-in-function-color: #6f42c1; - --code-reserved-color: #d73a49; - --code-regex-color: #032f62; - --code-enum-color: #e36209; - --code-range-color: #005cc5; - --code-op-color: #d73a49; - --code-comparison-background-color: rgba(200, 200, 200, 0.6); - --code-comparison-color: #1e293b; - --code-bracket-1-color: #005cc5; - --code-bracket-2-color: #6f42c1; - --code-bracket-3-color: #e36209; - - /* Glassmorphism Refined */ - --glass-border-color: rgba(0, 0, 0, 0.08); - --glass-background-color: rgba(255, 255, 255, 0.4); - --glass-shadow-color: rgba(0, 0, 0, 0.05); - --glass-background-gradient-color-1: rgba(255, 255, 255, 0.5); - --glass-background-gradient-color-2: rgba(255, 255, 255, 0.2); - --glass-input-border-color: rgba(0, 0, 0, 0.1); - --glass-input-background-color: rgba(255, 255, 255, 0.3); - - /* Brick Blocks (Node Graph Aesthetic) */ - --brick-input-xtream-background-color: #dbeafe; - --brick-input-xtream-border-color: #3b82f6; - --brick-input-m3u-background-color: #f0f9ff; - --brick-input-m3u-border-color: #0ea5e9; - --brick-input-library-background-color: #f5f3ff; - --brick-input-library-border-color: #8b5cf6; - - --brick-target-background-color: #f0fdf4; - --brick-target-border-color: #22c55e; - - --brick-output-background-color: #fffbeb; - --brick-output-border-color: #f59e0b; - - --brick-output-xtream-background-color: #ecfeff; - --brick-output-xtream-border-color: #06b6d4; - --brick-output-m3u-background-color: #f0fdfa; - --brick-output-m3u-border-color: #14b8a6; - --brick-output-hdhomerun-background-color: #f5f3ff; - --brick-output-hdhomerun-border-color: #8b5cf6; - --brick-output-strm-background-color: #fff1f2; - --brick-output-strm-border-color: #f43f5e; - - /* Scrollbar */ - --scrollbar-track-color: #f1f5f9; - --scrollbar-handle-color: #cbd5e1; - - /* Misc */ - --source-editor-line-color: #334155; - --source-editor-active-line-color: #16a34a; - --source-editor-pending-line-color: #eab308; - --breadcrumb-background-color: #f1f5f9; - --breadcrumb-color: #64748b; - --breadcrumb-active-background-color: #dcfce7; - --breadcrumb-active-color: #166534; + --selection-area-border-color: var(--theme-brand-border-selection); + --selection-area-background-color: color-mix(in srgb, var(--theme-brand-border-selection) 12%, transparent); + --custom-dialog-backdrop-color: var(--theme-brand-surface-modal-backdrop); + --dialog-backdrop-color: var(--theme-brand-surface-dialog-backdrop); + --input-autofill-background-color: transparent; + --tab-header-shadow: var(--theme-brand-tab-header-shadow); + --setup-sidebar-item-hover-background-color: var(--theme-brand-surface-setup-hover); + --setup-sidebar-item-active-background-color: var(--theme-brand-surface-setup-active); + --field-explanation-code-background-color: var(--theme-brand-surface-code-solid); + --field-explanation-code-color: var(--theme-brand-text); + --field-explanation-code-border-color: var(--theme-brand-border-soft); + --field-explanation-code-shadow: var(--theme-brand-field-code-shadow); + --mapper-script-background-color: var(--theme-brand-surface-code-solid); + --login-logo-color: var(--theme-brand-login-logo); + --series-info-title-color: var(--theme-brand-series-title); + --series-backdrop-overlay-gradient: var(--theme-brand-series-backdrop-overlay); + --titled-card-title-background: linear-gradient(to bottom, var(--theme-brand-surface-card-gradient) 50%, var(--card-background-color) 50%); } diff --git a/frontend/scss/app/_component.scss b/frontend/scss/app/_component.scss index c29e28ae4..22403338a 100644 --- a/frontend/scss/app/_component.scss +++ b/frontend/scss/app/_component.scss @@ -62,6 +62,7 @@ @forward "components/no_content"; @forward "components/search"; @forward "components/loading_indicator"; +@forward "components/theme_picker"; @forward "components/toastr"; @forward "components/drop_down_icon_button"; @forward "components/accordion"; @@ -90,4 +91,4 @@ @forward "components/filter_input"; @forward "components/filter_editor"; @forward "components/field_explanation"; -@forward "components/rbac/user_management"; \ No newline at end of file +@forward "components/rbac/user_management"; diff --git a/frontend/scss/app/components/_custom_dialog.scss b/frontend/scss/app/components/_custom_dialog.scss index 2968a5b79..014898d72 100644 --- a/frontend/scss/app/components/_custom_dialog.scss +++ b/frontend/scss/app/components/_custom_dialog.scss @@ -8,7 +8,7 @@ display: flex; align-items: flex-start; justify-content: center; - background-color: rgba(0, 0, 0, 0.5); + background-color: var(--custom-dialog-backdrop-color); z-index: 1000; animation: fadeIn 0.2s ease-out; } @@ -92,4 +92,4 @@ justify-content: flex-end; gap: var(--gap-default); } -} \ No newline at end of file +} diff --git a/frontend/scss/app/components/_dialog.scss b/frontend/scss/app/components/_dialog.scss index 34f0aeb57..1a8db7cca 100644 --- a/frontend/scss/app/components/_dialog.scss +++ b/frontend/scss/app/components/_dialog.scss @@ -9,7 +9,7 @@ dialog { border-radius: var(--border-radius); box-shadow: var(--popup-shadow); &::backdrop { - background: rgba(0, 0, 0, 0.3); + background: var(--dialog-backdrop-color); } max-width: 80vw; max-height: 80vh; @@ -23,4 +23,4 @@ dialog { flex-flow: row nowrap; justify-content: space-between; } -} \ No newline at end of file +} diff --git a/frontend/scss/app/components/_field_explanation.scss b/frontend/scss/app/components/_field_explanation.scss index 6e9843f15..e7414f936 100644 --- a/frontend/scss/app/components/_field_explanation.scss +++ b/frontend/scss/app/components/_field_explanation.scss @@ -5,16 +5,16 @@ } pre { - background: var(--bg-secondary, #1e1e1e); - color: var(--text-secondary, #d4d4d4); + background: var(--field-explanation-code-background-color); + color: var(--field-explanation-code-color); padding: 1rem; border-radius: 8px; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.9rem; overflow-x: auto; margin: 1rem 0; - border: 1px solid var(--border-color, #333); - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + border: 1px solid var(--field-explanation-code-border-color); + box-shadow: var(--field-explanation-code-shadow); code { display: block; diff --git a/frontend/scss/app/components/_input.scss b/frontend/scss/app/components/_input.scss index e49a5c102..20b87038c 100644 --- a/frontend/scss/app/components/_input.scss +++ b/frontend/scss/app/components/_input.scss @@ -69,7 +69,7 @@ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { - -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0) inset !important; + -webkit-box-shadow: 0 0 0 1000px var(--input-autofill-background-color) inset !important; -webkit-text-fill-color: var(--text-color) !important; transition: background-color 5000s ease-in-out 0s; background-color: transparent !important; diff --git a/frontend/scss/app/components/_login.scss b/frontend/scss/app/components/_login.scss index bfbfab853..8187c0571 100644 --- a/frontend/scss/app/components/_login.scss +++ b/frontend/scss/app/components/_login.scss @@ -78,7 +78,7 @@ svg { height: 100%; width: 100%; - color: color-mix(in srgb, var(--background-color) 80%, black 10%); + color: var(--login-logo-color); } } diff --git a/frontend/scss/app/components/_mapper_script.scss b/frontend/scss/app/components/_mapper_script.scss index bf0a913db..fa58a5b0d 100644 --- a/frontend/scss/app/components/_mapper_script.scss +++ b/frontend/scss/app/components/_mapper_script.scss @@ -5,7 +5,7 @@ .tp__mapper-script__code { font-family: monospace; - background: #1e1e1e; + background: var(--mapper-script-background-color); color: var(--modest-text-color); padding: var(--padding-default); border-radius: var(--border-radius); @@ -65,13 +65,13 @@ font-size: 1.1rem; } - .bracket-1 { color: #569CD6; } - .bracket-2 { color: #C586C0; } - .bracket-3 { color: #B5CEA8; } + .bracket-1 { color: var(--code-bracket-1-color); } + .bracket-2 { color: var(--code-bracket-2-color); } + .bracket-3 { color: var(--code-bracket-3-color); } } .tp__mapper-script__inline { .tp__mapper-script__code { padding: 0; margin-block: 0; } -} \ No newline at end of file +} diff --git a/frontend/scss/app/components/_popup_menu.scss b/frontend/scss/app/components/_popup_menu.scss index d31dfff32..918ba6346 100644 --- a/frontend/scss/app/components/_popup_menu.scss +++ b/frontend/scss/app/components/_popup_menu.scss @@ -4,16 +4,28 @@ position: fixed; top: var(--popup-top); left: var(--popup-left); + max-width: min(24rem, calc(100vw - 1rem)); + max-height: min(70vh, calc(100vh - 1rem)); padding: var(--padding-mini); border: 1px solid var(--border-color); border-radius: var(--border-radius); background-color: var(--popup-background-color); color: var(--popup-color); box-shadow: var(--popup-shadow); + overflow: hidden; z-index: 9999; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); + ul { + margin: 0; + padding: 0; + max-height: inherit; + overflow-y: auto; + overscroll-behavior: contain; + list-style: none; + } + hr { border: none; height: 2px; @@ -23,4 +35,4 @@ .tp__popup-menu.hidden { display: none !important; -} \ No newline at end of file +} diff --git a/frontend/scss/app/components/_tabset.scss b/frontend/scss/app/components/_tabset.scss index f94678754..3349c7b38 100644 --- a/frontend/scss/app/components/_tabset.scss +++ b/frontend/scss/app/components/_tabset.scss @@ -85,7 +85,7 @@ background-color: var(--card-background-color); border-radius: 8px 8px 0 0; overflow: hidden; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + box-shadow: var(--tab-header-shadow); } .tp__tab-button { diff --git a/frontend/scss/app/components/_theme_picker.scss b/frontend/scss/app/components/_theme_picker.scss new file mode 100644 index 000000000..5ca5bb216 --- /dev/null +++ b/frontend/scss/app/components/_theme_picker.scss @@ -0,0 +1,4 @@ +.tp__theme-picker__item.active { + background-color: var(--menu-item-hover-background-color); + color: var(--menu-item-hover-color); +} diff --git a/frontend/scss/app/components/_titled_card.scss b/frontend/scss/app/components/_titled_card.scss index 9996a2d24..c34800d2e 100644 --- a/frontend/scss/app/components/_titled_card.scss +++ b/frontend/scss/app/components/_titled_card.scss @@ -11,7 +11,7 @@ z-index: 2; font-size: 14px; line-height: 1.2; - background: linear-gradient(to bottom, #00000000 50%, var(--card-background-color) 50%); + background: var(--titled-card-title-background); } &__content { diff --git a/frontend/scss/app/components/_toastr.scss b/frontend/scss/app/components/_toastr.scss index d30a0c346..dc6422915 100644 --- a/frontend/scss/app/components/_toastr.scss +++ b/frontend/scss/app/components/_toastr.scss @@ -16,7 +16,7 @@ padding: var(--padding-default) var(--padding-large); border-radius: var(--border-radius); font-size: 1.1rem; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); + box-shadow: var(--toastr-shadow); animation: fadeIn 0.3s ease-out; &__message { diff --git a/frontend/scss/app/components/_toggle_switch.scss b/frontend/scss/app/components/_toggle_switch.scss index 6c8e0bac2..8184f3cc4 100644 --- a/frontend/scss/app/components/_toggle_switch.scss +++ b/frontend/scss/app/components/_toggle_switch.scss @@ -46,7 +46,7 @@ $toggle-switch-toggle-end-pos: calc($toggle-switch-width - ($toggle-switch-toggl border-radius: 50%; transition: 0.3s; transform: translateX(0); - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8); + box-shadow: var(--toggle-switch-toggle-shadow); } &__active { @@ -55,4 +55,4 @@ $toggle-switch-toggle-end-pos: calc($toggle-switch-width - ($toggle-switch-toggl &:focus-within { border-color: var(--input-focus-border-color); } -} \ No newline at end of file +} diff --git a/frontend/scss/app/components/playlist/_playlist_explorer.scss b/frontend/scss/app/components/playlist/_playlist_explorer.scss index 6aea01bbf..d5c61a69e 100644 --- a/frontend/scss/app/components/playlist/_playlist_explorer.scss +++ b/frontend/scss/app/components/playlist/_playlist_explorer.scss @@ -283,7 +283,16 @@ $series-backdrop-mobile-height: 150px; height: 100%; overflow: hidden; pointer-events: none; - background-image: linear-gradient(to right, rgba(0, 0, 0, 1.0) 30%, rgba(0, 0, 0, 0.85) 50%, rgba(0, 0, 0, 0.75) 60%, rgba(0, 0, 0, 0.35) 70%, rgba(0, 0, 0, 0.0) 85%); + background-image: var( + --series-backdrop-overlay-gradient, + linear-gradient( + to right, + rgb(0 0 0 / 88%) 24%, + rgb(0 0 0 / 72%) 48%, + rgb(0 0 0 / 48%) 66%, + rgb(0 0 0 / 0%) 86% + ) + ); } &-content { @@ -295,7 +304,7 @@ $series-backdrop-mobile-height: 150px; background-size: cover; background-position: center; font-size: 1.2rem; - color: var(--series-info-title-color, white); + color: var(--series-info-title-color); z-index: 1; } } @@ -308,7 +317,8 @@ $series-backdrop-mobile-height: 150px; @media (max-width: size.$mobile-breakpoint) { font-size: 1.1rem; } - color: var(--series-info-title-color, white); + + color: var(--series-info-title-color); } &__infos { @@ -318,7 +328,7 @@ $series-backdrop-mobile-height: 150px; } &__season { - color: var(--series-info-title-color, white); + color: var(--series-info-title-color); display: flex; flex-flow: column; gap: var(--gap-default); @@ -402,4 +412,4 @@ $series-backdrop-mobile-height: 150px; } } } -} \ No newline at end of file +} diff --git a/frontend/scss/app/components/playlist/_playlist_explorer_view.scss b/frontend/scss/app/components/playlist/_playlist_explorer_view.scss index d74b1b7e6..c948e1921 100644 --- a/frontend/scss/app/components/playlist/_playlist_explorer_view.scss +++ b/frontend/scss/app/components/playlist/_playlist_explorer_view.scss @@ -6,10 +6,14 @@ > :nth-child(even) { border-left: 2px solid var(--output-xtream-color); + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); } > :nth-child(odd) { border-left: 2px solid var(--output-hdhomerun-color); + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); } } diff --git a/frontend/scss/app/components/playlist/target/_target_output.scss b/frontend/scss/app/components/playlist/target/_target_output.scss index de48a7d6e..a86f78628 100644 --- a/frontend/scss/app/components/playlist/target/_target_output.scss +++ b/frontend/scss/app/components/playlist/target/_target_output.scss @@ -12,41 +12,57 @@ } .tp__target-output__xtream.tp__target-output__has_options { - color: var(--output-xtream-color); + color: var(--output-xtream-color); } + .tp__target-output__m3u.tp__target-output__has_options { color: var(--output-m3u-color); } + .tp__target-output__strm { color: var(--output-strm-color); } -.tp__target-output__hdhomerun { + +.tp__target-output__hdhomerun { color: var(--output-hdhomerun-color); } + .tp__target-output__xtream, .tp__target-output__m3u, .tp__target-output__strm, -.tp__target-output__hdhomerun{ +.tp__target-output__hdhomerun { &:hover { color: var(--menu-button-hover-color); } } .tp__xtream-output { - border-right: 3px solid var(--output-xtream-color); - padding-right: 1px; + border-right: 3px solid var(--output-xtream-color); + padding-right: 1px; + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); + } + .tp__m3u-output { border-right: 3px solid var(--output-m3u-color); - padding-right: 1px; + padding-right: 1px; + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); } + .tp__hdhomerun-output { border-right: 3px solid var(--output-hdhomerun-color); padding-right: 1px; + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); } + .tp__strm-output { border-right: 3px solid var(--output-strm-color); padding-right: 1px; + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); .tp__target-output__output__section { diff --git a/frontend/scss/app/components/setup/_setup.scss b/frontend/scss/app/components/setup/_setup.scss index 3792cf2d4..042bc659d 100644 --- a/frontend/scss/app/components/setup/_setup.scss +++ b/frontend/scss/app/components/setup/_setup.scss @@ -55,12 +55,12 @@ transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; &:hover:enabled { - background: rgba(127, 127, 127, 0.12); + background: var(--setup-sidebar-item-hover-background-color); } &.active { border-color: var(--theme-color); - background: rgba(127, 127, 127, 0.2); + background: var(--setup-sidebar-item-active-background-color); } &.locked { diff --git a/frontend/scss/app/components/source_editor/_source_editor_block.scss b/frontend/scss/app/components/source_editor/_source_editor_block.scss index 57721fb01..7877a4c33 100644 --- a/frontend/scss/app/components/source_editor/_source_editor_block.scss +++ b/frontend/scss/app/components/source_editor/_source_editor_block.scss @@ -75,7 +75,7 @@ $port-size: 10px; background-color: var(--card-background-color); border-radius: 6px; border-top-left-radius: 0 !important; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); + box-shadow: var(--source-editor-block-shadow); cursor: pointer; padding: 0 var(--padding-small); box-sizing: border-box; @@ -317,4 +317,4 @@ $port-size: 10px; cursor: grabbing; } } -} \ No newline at end of file +} diff --git a/frontend/scss/themes/_theme-aurora.scss b/frontend/scss/themes/_theme-aurora.scss new file mode 100644 index 000000000..390186767 --- /dev/null +++ b/frontend/scss/themes/_theme-aurora.scss @@ -0,0 +1,268 @@ +body[data-theme="aurora"] { + --theme-palette-page: #06151b; + --theme-palette-page-alt: #0b2230; + --theme-palette-neutral-surface-980: rgba(4, 20, 28, 0.9); + --theme-palette-neutral-surface-960: rgba(9, 33, 44, 0.96); + --theme-palette-neutral-surface-940: rgba(12, 44, 54, 0.78); + --theme-palette-neutral-surface-920: rgba(12, 44, 54, 0.68); + --theme-palette-neutral-surface-900: rgba(15, 52, 62, 0.62); + --theme-palette-neutral-surface-880: rgba(20, 66, 76, 0.56); + --theme-palette-neutral-surface-840: rgba(25, 80, 90, 0.44); + --theme-palette-neutral-surface-820: rgba(38, 103, 114, 0.28); + --theme-palette-neutral-surface-800: rgba(115, 203, 188, 0.22); + --theme-palette-neutral-surface-780: rgba(115, 203, 188, 0.12); + --theme-palette-neutral-surface-760: rgba(182, 244, 216, 0.14); + --theme-palette-neutral-surface-740: rgba(182, 244, 216, 0.08); + --theme-palette-neutral-surface-720: rgba(221, 255, 244, 0.16); + --theme-palette-neutral-surface-700: rgba(255, 255, 255, 0); + --theme-palette-neutral-surface-680: rgba(0, 0, 0, 0.2); + --theme-palette-neutral-surface-660: rgba(0, 0, 0, 0.56); + --theme-palette-neutral-surface-640: rgba(0, 0, 0, 0.34); + --theme-palette-neutral-surface-620: #21505b88; + --theme-palette-neutral-surface-600: #17394388; + --theme-palette-neutral-surface-580: #3e707788; + --theme-palette-neutral-surface-560: #20454b; + --theme-palette-neutral-surface-540: #10323c88; + --theme-palette-neutral-surface-520: #0d252d; + --theme-palette-neutral-surface-code: #071d23cc; + --theme-palette-neutral-surface-code-solid: #071d23; + --theme-palette-neutral-surface-code-compare: #14343b99; + --theme-palette-state-surface-option-active: #8ef6c688; + + --theme-palette-accent-border-500: rgba(94, 234, 212, 0.26); + --theme-palette-accent-border-460: rgba(94, 234, 212, 0.44); + --theme-palette-accent-border-420: rgba(45, 212, 191, 0.82); + --theme-palette-accent-border-380: rgba(94, 234, 212, 0.9); + --theme-palette-accent-border-340: rgba(94, 234, 212, 0.3); + --theme-palette-neutral-border-560: #3b6168; + --theme-palette-neutral-border-520: #2f565d; + --theme-palette-neutral-border-500: #477178; + --theme-palette-neutral-border-460: #21474e; + --theme-palette-neutral-border-420: rgba(226, 255, 247, 0.18); + --theme-palette-neutral-border-380: rgba(56, 189, 248, 0.9); + + --theme-palette-neutral-text-900: #ecfff8; + --theme-palette-neutral-text-760: #d3f7ef; + --theme-palette-neutral-text-700: #afdbd3; + --theme-palette-neutral-text-620: #8bb8b2; + --theme-palette-neutral-text-580: #6e9995; + --theme-palette-neutral-text-560: #9dc5bf; + --theme-palette-neutral-text-500: #7ea19b; + --theme-palette-neutral-text-460: #5d7f7a; + --theme-palette-neutral-text-420: #36504d; + + --theme-palette-text-header: #7ef9e2; + --theme-palette-text-label: #7dd3fc; + --theme-palette-text-option-active: #042f2e; + --theme-palette-text-menu-warn: #f7a072; + --theme-palette-text-menu-warn-strong: #ff8f6b; + + --theme-palette-primary: rgba(45, 212, 191, 0.42); + --theme-palette-primary-soft: rgba(45, 212, 191, 0.2); + --theme-palette-primary-hover-soft: rgba(34, 211, 238, 0.18); + --theme-palette-primary-active-soft: rgba(34, 211, 238, 0.28); + --theme-palette-primary-hover: rgba(13, 148, 136, 0.44); + --theme-palette-primary-hover-strong: rgba(45, 212, 191, 0.92); + --theme-palette-primary-border: rgba(45, 212, 191, 0.84); + --theme-palette-primary-menu-hover: rgba(13, 148, 136, 0.34); + --theme-palette-primary-tool-hover: #0f766e99; + --theme-palette-primary-tree-hover: #0d948888; + --theme-palette-primary-tab-hover: #155e7588; + --theme-palette-primary-tab-active: #164e6388; + --theme-palette-primary-tab-border: #22d3ee; + --theme-palette-primary-spinner: #5eead4; + + --theme-palette-secondary: rgba(255, 143, 107, 0.68); + --theme-palette-secondary-soft: rgba(255, 143, 107, 0.24); + --theme-palette-secondary-hover: rgba(255, 143, 107, 0.46); + --theme-palette-secondary-border: rgba(255, 143, 107, 0.56); + + --theme-palette-neutral-dark-950: #06151b; + --theme-palette-neutral-dark-900: #0b2230; + --theme-palette-neutral-dark-850: #0d252d; + --theme-palette-neutral-dark-800: #071d23; + --theme-palette-neutral-dark-780: #14343b99; + --theme-palette-neutral-dark-760: #10323c88; + --theme-palette-neutral-dark-740: #17394388; + --theme-palette-neutral-dark-720: #1a4950; + --theme-palette-neutral-dark-700: #204f57; + --theme-palette-neutral-dark-680: #2d6970; + --theme-palette-neutral-dark-660: #21505b88; + --theme-palette-neutral-dark-640: #2f565d; + --theme-palette-neutral-dark-620: #20454b; + --theme-palette-neutral-dark-600: #3e707788; + --theme-palette-neutral-dark-580: #3b6168; + --theme-palette-neutral-dark-560: #477178; + --theme-palette-neutral-dark-540: #36504d; + --theme-palette-neutral-dark-520: #21474e; + + --theme-palette-primary-tone-500: #5eead4; + --theme-palette-primary-tone-450: #7ef9e2; + --theme-palette-primary-tone-420: #7dd3fc; + --theme-palette-primary-tone-380: #67e8f9; + --theme-palette-primary-tone-340: #54b7c3; + --theme-palette-primary-tone-300: #4fd1c5; + --theme-palette-primary-tone-260: #22d3ee; + --theme-palette-primary-tone-220: #22c55e; + --theme-palette-primary-tone-200: #0f766e; + --theme-palette-primary-tone-180: #155e75; + --theme-palette-primary-tone-160: #164e63; + --theme-palette-primary-tone-140: #0e7490; + + --theme-palette-danger-tone-520: #ff8f6b; + --theme-palette-danger-tone-500: #ff6b6b; + --theme-palette-danger-tone-480: #f97360; + --theme-palette-danger-tone-420: #f59e8b; + --theme-palette-danger-tone-360: #c97b71; + --theme-palette-danger-tone-surface-250: rgba(249, 115, 96, 0.22); + --theme-palette-danger-tone-surface-550: rgba(249, 115, 96, 0.44); + --theme-palette-danger-tone-border: rgba(249, 115, 96, 0.5); + + --theme-palette-success-tone-540: #6ee7b7; + --theme-palette-success-tone-520: #34d399; + --theme-palette-success-tone-500: #10b981; + --theme-palette-success-tone-460: #8ef6c6; + --theme-palette-success-tone-420: #4ade80; + --theme-palette-success-tone-380: #14b8a6; + --theme-palette-success-tone-340: #0f766e; + --theme-palette-success-tone-soft-200: rgba(52, 211, 153, 0.2); + --theme-palette-success-tone-border: rgba(52, 211, 153, 0.38); + --theme-palette-success-tone-strong: rgba(52, 211, 153, 0.74); + --theme-palette-success-tone-hover: rgba(16, 185, 129, 0.28); + --theme-palette-success-tone-text: #a7f3d0; + --theme-palette-success-tone-surface: #0b3b3488; + + --theme-palette-warning-tone-520: #fbbf24; + --theme-palette-warning-tone-500: #f59e0b; + --theme-palette-warning-tone-460: #ffd166; + --theme-palette-warning-tone-420: #f4b942; + --theme-palette-warning-tone-surface: #4b371d88; + --theme-palette-warning-tone-border: #c28f38; + + --theme-palette-info-tone-520: #67e8f9; + --theme-palette-info-tone-500: #22d3ee; + --theme-palette-info-tone-460: #38bdf8; + --theme-palette-info-tone-surface: #12374588; + --theme-palette-info-tone-border: #2e788c; + + --theme-palette-accent-tone-540: #f472b6; + --theme-palette-accent-tone-520: #e879f9; + --theme-palette-accent-tone-500: #c084fc; + --theme-palette-accent-tone-460: #d8b4fe; + --theme-palette-accent-tone-surface: #3d214888; + --theme-palette-accent-tone-border: #7c3aed; + --theme-palette-accent-tone-soft-surface: rgba(192, 132, 252, 0.1); + --theme-palette-accent-tone-soft-hover: rgba(192, 132, 252, 0.2); + --theme-palette-accent-tone-soft-border: rgba(192, 132, 252, 0.36); + --theme-palette-accent-tone-text: #f0abfc; + --theme-palette-accent-tone-text-soft: #f5d0fe; + + --theme-palette-quaternary-tone-500: #818cf8; + --theme-palette-quaternary-tone-surface: #312e8188; + --theme-palette-emphasis-tone-500: #fb7185; + --theme-palette-highlight-tone-500: #fde047; + + --theme-palette-status-tag-surface: #1b394088; + --theme-palette-status-tag-active-text: #4ade80; + --theme-palette-status-tag-active-surface: #0b3b3488; + --theme-palette-status-tag-active-border: #0f766e; + --theme-palette-status-tag-alt-text: #e879f9; + --theme-palette-status-tag-alt-surface: #3d214888; + --theme-palette-status-tag-alt-border: #7c3aed; + --theme-palette-status-tag-expired-text: #ffd166; + --theme-palette-status-tag-expired-surface: #4b371d88; + --theme-palette-status-tag-expired-border: #c28f38; + --theme-palette-status-tag-banned-text: #ff8f6b; + --theme-palette-status-tag-banned-surface: #4a262188; + --theme-palette-status-tag-banned-border: #a95f55; + + --theme-palette-status-live-surface: #0b3b3488; + --theme-palette-status-video-surface: #12374588; + --theme-palette-status-series-surface: #312e8188; + + --theme-palette-shadow-popup: 0 10px 28px rgba(0, 0, 0, 0.42), inset 0 0 12px rgba(147, 197, 253, 0.08); + --theme-palette-shadow-card: 0 8px 20px rgba(0, 0, 0, 0.24); + --theme-palette-shadow-scrollbar-track: inset 0 0 6px rgba(0, 0, 0, 0.26); + --theme-palette-shadow-tab-header: 0 2px 4px rgba(0, 0, 0, 0.08); + --theme-palette-shadow-field-code: 0 4px 6px rgba(0, 0, 0, 0.14); + --theme-palette-shadow-toggle: 0 2px 6px rgba(0, 0, 0, 0.72); + --theme-palette-shadow-toast: 0 2px 5px rgba(0, 0, 0, 0.28); + --theme-palette-shadow-source-block: 0 1px 2px rgba(0, 0, 0, 0.18); + --theme-palette-shadow-glass: rgba(0, 0, 0, 0.12); + + --theme-palette-menu-icon-update: #7ef9e2; + --theme-palette-menu-icon-user: #38bdf8; + --theme-palette-menu-icon-api-server: #fbbf24; + --theme-palette-menu-icon-main-config: #f472b6; + --theme-palette-menu-icon-status: #fde047; + + --theme-palette-code-identifier: #67e8f9; + --theme-palette-code-var-access: #a5f3fc; + --theme-palette-code-field: #f7b267; + --theme-palette-code-property: #ff9f6e; + --theme-palette-code-literal: #6ee7b7; + --theme-palette-code-num: #7dd3fc; + --theme-palette-code-builtin: #f9e27d; + --theme-palette-code-reserved: #ff8f6b; + --theme-palette-code-regex: #f7b267; + --theme-palette-code-enum: #34d399; + --theme-palette-code-range: #7dd3fc; + --theme-palette-code-op: #67e8f9; + --theme-palette-code-compare-text: #ffffff; + --theme-palette-code-bracket-1: #67e8f9; + --theme-palette-code-bracket-2: #c084fc; + --theme-palette-code-bracket-3: #fde68a; + --theme-palette-code-any-match: #fb7185; + + --theme-palette-epg-program-surface: #0c2732; + --theme-palette-epg-program-active-surface: #113847; + --theme-palette-epg-program-text: #ffffff; + --theme-palette-epg-program-time: #84a9b0; + --theme-palette-epg-program-time-active: #b8f6ec; + --theme-palette-epg-past-surface: rgba(0, 0, 0, 0.14); + --theme-palette-epg-now-line: #ff8f6b; + + --theme-palette-graph-grid-1: #a7f3d030; + --theme-palette-graph-grid-2: #67e8f930; + + --theme-palette-particle-1: #7ef9e2; + --theme-palette-particle-2: #1b3940; + --theme-palette-particle-alpha-boost: 1.2; + + --theme-palette-chip-container-text: #7dd3fc; + --theme-palette-chip-container-surface: #133742; + --theme-palette-chip-video-text: #8ef6c6; + --theme-palette-chip-video-surface: #14342d; + --theme-palette-chip-resolution-text: #ffb4a2; + --theme-palette-chip-resolution-surface: #4a2621; + --theme-palette-chip-fps-text: #ffd166; + --theme-palette-chip-fps-surface: #46371d; + --theme-palette-chip-audio-text: #f0abfc; + --theme-palette-chip-audio-surface: #3d2148; + --theme-palette-chip-audio-channels-text: #f5d0fe; + + --theme-palette-graph-input-xtream: #22d3ee; + --theme-palette-graph-input-m3u: #38bdf8; + --theme-palette-graph-input-library: #c084fc; + --theme-palette-graph-target: #14b8a6; + --theme-palette-graph-output: #f59e0b; + --theme-palette-graph-output-xtream: #5eead4; + --theme-palette-graph-output-m3u: #34d399; + --theme-palette-graph-output-hdhomerun: #818cf8; + --theme-palette-graph-output-strm: #fb7185; + --theme-palette-graph-port: #5f8b93; + --theme-palette-graph-port-border: #ffffff; + --theme-palette-graph-port-hover: #fbbf24; + + --theme-palette-login-logo: color-mix(in srgb, #06151b 78%, #5eead4 10%); + --theme-palette-series-title: #ffffff; + --theme-palette-series-backdrop-overlay: linear-gradient( + to right, + rgba(6, 21, 27, 1) 28%, + rgba(6, 21, 27, 0.9) 48%, + rgba(6, 21, 27, 0.76) 60%, + rgba(6, 21, 27, 0.4) 72%, + rgba(6, 21, 27, 0) 86% + ); +} + diff --git a/frontend/scss/themes/_theme-banana-yellow.scss b/frontend/scss/themes/_theme-banana-yellow.scss new file mode 100644 index 000000000..9e1c123c5 --- /dev/null +++ b/frontend/scss/themes/_theme-banana-yellow.scss @@ -0,0 +1,277 @@ +body[data-theme="banana-yellow"] { + --theme-palette-page: #fff6bf; + --theme-palette-page-alt: #f0dd73; + --theme-palette-neutral-surface-980: #fffaf2e6; + --theme-palette-neutral-surface-960: #e7dccb; + --theme-palette-neutral-surface-940: #faf5ec; + --theme-palette-neutral-surface-920: #f4ede1; + --theme-palette-neutral-surface-900: #f6f0e6; + --theme-palette-neutral-surface-880: #efe4d4; + --theme-palette-neutral-surface-840: #eadfce; + --theme-palette-neutral-surface-820: #e5d8c6; + --theme-palette-neutral-surface-800: rgba(186, 163, 127, 0.2); + --theme-palette-neutral-surface-780: rgba(186, 163, 127, 0.12); + --theme-palette-neutral-surface-760: rgba(255, 255, 255, 0.45); + --theme-palette-neutral-surface-740: rgba(255, 255, 255, 0.55); + --theme-palette-neutral-surface-720: rgba(255, 255, 255, 0.35); + --theme-palette-neutral-surface-700: transparent; + --theme-palette-neutral-surface-680: rgba(204, 193, 173, 0.7); + --theme-palette-neutral-surface-660: rgba(0, 0, 0, 0.46); + --theme-palette-neutral-surface-640: rgba(0, 0, 0, 0.24); + --theme-palette-neutral-surface-620: #f7efe1; + --theme-palette-neutral-surface-600: #f0e7db; + --theme-palette-neutral-surface-580: #f0e7db; + --theme-palette-neutral-surface-560: #f8f1e7; + --theme-palette-neutral-surface-540: #efe4d4; + --theme-palette-neutral-surface-520: #e1d4c1; + --theme-palette-neutral-surface-code: #fff9f0; + --theme-palette-neutral-surface-code-solid: #fff9f0; + --theme-palette-neutral-surface-code-compare: rgba(214, 198, 173, 0.55); + --theme-palette-state-surface-option-active: #f4f7cf; + + --theme-palette-accent-border-500: #d8c8b1; + --theme-palette-accent-border-460: #b8a17c; + --theme-palette-accent-border-420: #7c5f36; + --theme-palette-accent-border-380: #7c5f36; + --theme-palette-accent-border-340: #d8c8b1; + --theme-palette-neutral-border-560: #dfd3c3; + --theme-palette-neutral-border-520: #d8c8b1; + --theme-palette-neutral-border-500: #dfd3c3; + --theme-palette-neutral-border-460: #dfd3c3; + --theme-palette-neutral-border-420: rgba(72, 54, 34, 0.12); + --theme-palette-neutral-border-380: rgba(124, 95, 54, 0.84); + + --theme-palette-neutral-text-900: #4a3f1f; + --theme-palette-neutral-text-760: #66562f; + --theme-palette-neutral-text-700: #867549; + --theme-palette-neutral-text-620: #97865b; + --theme-palette-neutral-text-580: #a99a69; + --theme-palette-neutral-text-560: #8f7a67; + --theme-palette-neutral-text-500: #b0a97b; + --theme-palette-neutral-text-460: #6e6052; + --theme-palette-neutral-text-420: #c1b2a3; + + --theme-palette-text-header: #7c5f36; + --theme-palette-text-label: #9b7b4f; + --theme-palette-text-option-active: #23452a; + --theme-palette-text-menu-warn: #e08b47; + --theme-palette-text-menu-warn-strong: #a3483d; + + --theme-palette-primary: #d5ab20; + --theme-palette-primary-soft: rgba(140, 107, 63, 0.08); + --theme-palette-primary-hover-soft: rgba(140, 107, 63, 0.14); + --theme-palette-primary-active-soft: rgba(140, 107, 63, 0.2); + --theme-palette-primary-hover: #e8dcc8; + --theme-palette-primary-hover-strong: #6d5230; + --theme-palette-primary-border: #d5ab20; + --theme-palette-primary-menu-hover: #6d5230; + --theme-palette-primary-tool-hover: #6d5230; + --theme-palette-primary-tree-hover: rgba(140, 107, 63, 0.1); + --theme-palette-primary-tab-hover: #ebdfcf; + --theme-palette-primary-tab-active: #e2d3bf; + --theme-palette-primary-tab-border: #a78456; + --theme-palette-primary-spinner: #d5ab20; + + --theme-palette-secondary: #e08b47; + --theme-palette-secondary-soft: #f5ddd3; + --theme-palette-secondary-hover: #edc2b2; + --theme-palette-secondary-border: #de9f8a; + + --theme-palette-neutral-light-980: #fffaf2e6; + --theme-palette-neutral-light-960: #fff9f0; + --theme-palette-neutral-light-940: #faf5ec; + --theme-palette-neutral-light-920: #f4ede1; + --theme-palette-neutral-light-900: #efe4d4; + --theme-palette-neutral-light-880: #eadfce; + --theme-palette-neutral-light-860: #e5d8c6; + --theme-palette-neutral-light-840: #e1d4c1; + --theme-palette-neutral-light-820: #f7efe1; + --theme-palette-neutral-light-800: #f0e7db; + --theme-palette-neutral-light-780: #f4f7cf; + --theme-palette-neutral-light-760: rgba(255, 255, 255, 0.45); + --theme-palette-neutral-light-740: rgba(255, 255, 255, 0.55); + --theme-palette-neutral-light-720: rgba(255, 255, 255, 0.35); + --theme-palette-neutral-light-700: rgba(255, 255, 255, 0.2); + --theme-palette-neutral-light-680: rgba(214, 198, 173, 0.55); + + --theme-palette-neutral-mid-900: #4a3f1f; + --theme-palette-neutral-mid-760: #66562f; + --theme-palette-neutral-mid-700: #867549; + --theme-palette-neutral-mid-660: #97865b; + --theme-palette-neutral-mid-620: #a99a69; + --theme-palette-neutral-mid-580: #a99888; + --theme-palette-neutral-mid-520: #c1b2a3; + + --theme-palette-primary-tone-600: #5f4728; + --theme-palette-primary-tone-560: #6d5230; + --theme-palette-primary-tone-540: #d5ab20; + --theme-palette-primary-tone-520: #a78456; + --theme-palette-primary-tone-500: #e7c74b; + --theme-palette-primary-tone-460: #f0dd73; + --theme-palette-primary-tone-420: #ccb28b; + --theme-palette-primary-tone-380: #d8c8b1; + --theme-palette-primary-tone-340: #e2d3bf; + --theme-palette-primary-tone-300: #e8dcc8; + --theme-palette-primary-tone-260: #ebdfcf; + --theme-palette-primary-tone-220: #f4f7cf; + --theme-palette-primary-tone-200: rgba(140, 107, 63, 0.1); + --theme-palette-primary-tone-180: rgba(140, 107, 63, 0.2); + --theme-palette-primary-tone-160: rgba(140, 107, 63, 0.08); + --theme-palette-primary-tone-140: #c1b2a3; + + --theme-palette-danger-tone-520: #c75b4c; + --theme-palette-danger-tone-500: #a3483d; + --theme-palette-danger-tone-480: #d16a55; + --theme-palette-danger-tone-420: #e08b47; + --theme-palette-danger-tone-360: #9a6c5e; + --theme-palette-danger-tone-surface-250: #f5ddd3; + --theme-palette-danger-tone-surface-550: #edc2b2; + --theme-palette-danger-tone-border: #de9f8a; + + --theme-palette-success-tone-540: #759851; + --theme-palette-success-tone-520: #4d7c4c; + --theme-palette-success-tone-500: #3f6b3e; + --theme-palette-success-tone-460: #8db08a; + --theme-palette-success-tone-420: #588657; + --theme-palette-success-tone-380: #58aaa2; + --theme-palette-success-tone-340: #23452a; + --theme-palette-success-tone-soft-200: #f4f7cf; + --theme-palette-success-tone-border: #b8d5b5; + --theme-palette-success-tone-strong: #4d7c4c; + --theme-palette-success-tone-hover: #cde7ca; + --theme-palette-success-tone-text: #23452a; + --theme-palette-success-tone-surface: #f7f9df; + + --theme-palette-warning-tone-520: #d0943c; + --theme-palette-warning-tone-500: #d09126; + --theme-palette-warning-tone-460: #e5bb76; + --theme-palette-warning-tone-420: #b88746; + --theme-palette-warning-tone-surface: #fff8d8; + --theme-palette-warning-tone-border: #efcf9d; + + --theme-palette-info-tone-520: #4b7b83; + --theme-palette-info-tone-500: #58aaa2; + --theme-palette-info-tone-460: #6aaea6; + --theme-palette-info-tone-surface: #ecfbf8; + --theme-palette-info-tone-border: #bfded8; + + --theme-palette-accent-tone-540: #ba82b2; + --theme-palette-accent-tone-520: #946091; + --theme-palette-accent-tone-500: #d49aca; + --theme-palette-accent-tone-460: #dbc2d7; + --theme-palette-accent-tone-surface: #fff0f6; + --theme-palette-accent-tone-border: #e5cfe0; + --theme-palette-accent-tone-soft-surface: #fff0f6; + --theme-palette-accent-tone-soft-hover: #f1e4ef; + --theme-palette-accent-tone-soft-border: #e5cfe0; + --theme-palette-accent-tone-text: #946091; + --theme-palette-accent-tone-text-soft: #744a73; + + --theme-palette-quaternary-tone-500: #8f82b0; + --theme-palette-quaternary-tone-surface: #f6efff; + --theme-palette-emphasis-tone-500: #d16a55; + --theme-palette-highlight-tone-500: #e3c56a; + + --theme-palette-status-tag-surface: #f0e7db; + --theme-palette-status-tag-active-text: #23452a; + --theme-palette-status-tag-active-surface: #f7f9df; + --theme-palette-status-tag-active-border: #b8d5b5; + --theme-palette-status-tag-alt-text: #946091; + --theme-palette-status-tag-alt-surface: #fff0f6; + --theme-palette-status-tag-alt-border: #e5cfe0; + --theme-palette-status-tag-expired-text: #8f5e1d; + --theme-palette-status-tag-expired-surface: #fff8d8; + --theme-palette-status-tag-expired-border: #efcf9d; + --theme-palette-status-tag-banned-text: #8c332e; + --theme-palette-status-tag-banned-surface: #ffe9d8; + --theme-palette-status-tag-banned-border: #edc2b2; + + --theme-palette-status-live-surface: #f7f9df; + --theme-palette-status-video-surface: #ecfbf8; + --theme-palette-status-series-surface: #f6efff; + + --theme-palette-shadow-popup: 0 10px 24px rgba(99, 82, 57, 0.14), 0 8px 10px rgba(99, 82, 57, 0.08); + --theme-palette-shadow-card: 0 4px 6px rgba(99, 82, 57, 0.08), 0 2px 4px rgba(99, 82, 57, 0.06); + --theme-palette-shadow-scrollbar-track: inset 0 0 6px rgba(99, 82, 57, 0.08); + --theme-palette-shadow-tab-header: 0 2px 4px rgba(99, 82, 57, 0.06); + --theme-palette-shadow-field-code: 0 4px 6px rgba(99, 82, 57, 0.08); + --theme-palette-shadow-toggle: 0 2px 6px rgba(52, 43, 35, 0.18); + --theme-palette-shadow-toast: 0 2px 5px rgba(99, 82, 57, 0.1); + --theme-palette-shadow-source-block: 0 1px 2px rgba(99, 82, 57, 0.08); + --theme-palette-shadow-glass: rgba(99, 82, 57, 0.05); + + --theme-palette-menu-icon-update: #d5ab20; + --theme-palette-menu-icon-user: #58aaa2; + --theme-palette-menu-icon-api-server: #d09126; + --theme-palette-menu-icon-main-config: #ba82b2; + --theme-palette-menu-icon-status: #759851; + + --theme-palette-code-identifier: #5a7ca5; + --theme-palette-code-var-access: #3f6b3e; + --theme-palette-code-field: #b88746; + --theme-palette-code-property: #d5ab20; + --theme-palette-code-literal: #759851; + --theme-palette-code-num: #ba82b2; + --theme-palette-code-builtin: #d09126; + --theme-palette-code-reserved: #a3483d; + --theme-palette-code-regex: #8f82b0; + --theme-palette-code-enum: #e08b47; + --theme-palette-code-range: #58aaa2; + --theme-palette-code-op: #a3483d; + --theme-palette-code-compare-text: #4a3f1f; + --theme-palette-code-bracket-1: #5a7ca5; + --theme-palette-code-bracket-2: #ba82b2; + --theme-palette-code-bracket-3: #b88746; + --theme-palette-code-any-match: #d16a55; + + --theme-palette-epg-program-surface: #fff9f0; + --theme-palette-epg-program-active-surface: #f0e7db; + --theme-palette-epg-program-text: #4a3b2d; + --theme-palette-epg-program-time: #a99a69; + --theme-palette-epg-program-time-active: #d5ab20; + --theme-palette-epg-past-surface: rgba(52, 43, 35, 0.06); + --theme-palette-epg-now-line: #c75b4c; + + --theme-palette-graph-grid-1: #d9cdbd55; + --theme-palette-graph-grid-2: #c6b49d55; + + --theme-palette-particle-1: #e7c74b; + --theme-palette-particle-2: #f0dd73; + --theme-palette-particle-alpha-boost: 1.28; + + --theme-palette-chip-container-text: #d5ab20; + --theme-palette-chip-container-surface: #efe4d4; + --theme-palette-chip-video-text: #3f6b3e; + --theme-palette-chip-video-surface: #f7f9df; + --theme-palette-chip-resolution-text: #8c332e; + --theme-palette-chip-resolution-surface: #ffe9d8; + --theme-palette-chip-fps-text: #8f5e1d; + --theme-palette-chip-fps-surface: #fff8d8; + --theme-palette-chip-audio-text: #946091; + --theme-palette-chip-audio-surface: #fff0f6; + --theme-palette-chip-audio-channels-text: #744a73; + + --theme-palette-graph-input-xtream: #d5ab20; + --theme-palette-graph-input-m3u: #58aaa2; + --theme-palette-graph-input-library: #d49aca; + --theme-palette-graph-target: #4d7c4c; + --theme-palette-graph-output: #d09126; + --theme-palette-graph-output-xtream: #6aaea6; + --theme-palette-graph-output-m3u: #759851; + --theme-palette-graph-output-hdhomerun: #8f82b0; + --theme-palette-graph-output-strm: #d16a55; + --theme-palette-graph-port: #a99a69; + --theme-palette-graph-port-border: #ffffff; + --theme-palette-graph-port-hover: #d0943c; + + --theme-palette-login-logo: color-mix(in srgb, #fff6bf 84%, #d5ab20 8%); + --theme-palette-series-title: #4a3b2d; + --theme-palette-series-backdrop-overlay: linear-gradient( + to right, + rgba(245, 239, 229, 0.98) 28%, + rgba(245, 239, 229, 0.9) 48%, + rgba(245, 239, 229, 0.76) 60%, + rgba(245, 239, 229, 0.4) 72%, + rgba(245, 239, 229, 0) 86% + ); +} diff --git a/frontend/scss/themes/_theme-bright.scss b/frontend/scss/themes/_theme-bright.scss new file mode 100644 index 000000000..bfbc9fa76 --- /dev/null +++ b/frontend/scss/themes/_theme-bright.scss @@ -0,0 +1,277 @@ +body[data-theme="bright"] { + --theme-palette-page: #eaf1f8; + --theme-palette-page-alt: #4f81ad; + --theme-palette-neutral-surface-980: #ffffffdd; + --theme-palette-neutral-surface-960: #2a3f54; + --theme-palette-neutral-surface-940: #f7fbff; + --theme-palette-neutral-surface-920: #f1f6fb; + --theme-palette-neutral-surface-900: #f7fbff; + --theme-palette-neutral-surface-880: #eaf1f8; + --theme-palette-neutral-surface-840: #e6eef6; + --theme-palette-neutral-surface-820: #e6edf4; + --theme-palette-neutral-surface-800: rgba(127, 127, 127, 0.2); + --theme-palette-neutral-surface-780: rgba(127, 127, 127, 0.12); + --theme-palette-neutral-surface-760: rgba(255, 255, 255, 0.4); + --theme-palette-neutral-surface-740: rgba(255, 255, 255, 0.5); + --theme-palette-neutral-surface-720: rgba(255, 255, 255, 0.3); + --theme-palette-neutral-surface-700: transparent; + --theme-palette-neutral-surface-680: rgba(200, 200, 200, 0.6); + --theme-palette-neutral-surface-660: rgba(0, 0, 0, 0.5); + --theme-palette-neutral-surface-640: rgba(0, 0, 0, 0.3); + --theme-palette-neutral-surface-620: #f3f8fd; + --theme-palette-neutral-surface-600: #f1f5f9; + --theme-palette-neutral-surface-580: #f1f5f9; + --theme-palette-neutral-surface-560: #f7fbff; + --theme-palette-neutral-surface-540: #f1f5f9; + --theme-palette-neutral-surface-520: #e4ecf4; + --theme-palette-neutral-surface-code: #fdfdfd; + --theme-palette-neutral-surface-code-solid: #fdfdfd; + --theme-palette-neutral-surface-code-compare: rgba(200, 200, 200, 0.6); + --theme-palette-state-surface-option-active: #dcfce7; + + --theme-palette-accent-border-500: #cfdbe6; + --theme-palette-accent-border-460: #8fb0cb; + --theme-palette-accent-border-420: #3b82f6; + --theme-palette-accent-border-380: #3b82f6; + --theme-palette-accent-border-340: #cfdbe6; + --theme-palette-neutral-border-560: #e2e8f0; + --theme-palette-neutral-border-520: #cfdbe6; + --theme-palette-neutral-border-500: #e2e8f0; + --theme-palette-neutral-border-460: #e2e8f0; + --theme-palette-neutral-border-420: rgba(0, 0, 0, 0.1); + --theme-palette-neutral-border-380: rgba(0, 120, 215, 0.9); + + --theme-palette-neutral-text-900: #1f2f3f; + --theme-palette-neutral-text-760: #30465b; + --theme-palette-neutral-text-700: #475569; + --theme-palette-neutral-text-620: #5a7084; + --theme-palette-neutral-text-580: #64748b; + --theme-palette-neutral-text-560: #64748b; + --theme-palette-neutral-text-500: #9b9b9b; + --theme-palette-neutral-text-460: #434343; + --theme-palette-neutral-text-420: #717171; + + --theme-palette-text-header: #2563eb; + --theme-palette-text-label: #3b82f6; + --theme-palette-text-option-active: #166534; + --theme-palette-text-menu-warn: #b96665; + --theme-palette-text-menu-warn-strong: #dc2626; + + --theme-palette-primary: #2f6fa8; + --theme-palette-primary-soft: rgba(37, 99, 235, 0.06); + --theme-palette-primary-hover-soft: rgba(47, 111, 168, 0.1); + --theme-palette-primary-active-soft: rgba(47, 111, 168, 0.16); + --theme-palette-primary-hover: #d8e5f1; + --theme-palette-primary-hover-strong: #25597e; + --theme-palette-primary-border: #3b82f6; + --theme-palette-primary-menu-hover: #25597e; + --theme-palette-primary-tool-hover: #25597e; + --theme-palette-primary-tree-hover: rgba(47, 111, 168, 0.1); + --theme-palette-primary-tab-hover: #dce8f3; + --theme-palette-primary-tab-active: #d1e1ef; + --theme-palette-primary-tab-border: #4f81ad; + --theme-palette-primary-spinner: #3b82f6; + + --theme-palette-secondary: #d46a6a; + --theme-palette-secondary-soft: #fee2e2; + --theme-palette-secondary-hover: #fecaca; + --theme-palette-secondary-border: #fca5a5; + + --theme-palette-neutral-light-980: #ffffffdd; + --theme-palette-neutral-light-960: #fdfdfd; + --theme-palette-neutral-light-940: #f7fbff; + --theme-palette-neutral-light-920: #f1f6fb; + --theme-palette-neutral-light-900: #eaf1f8; + --theme-palette-neutral-light-880: #e6eef6; + --theme-palette-neutral-light-860: #e6edf4; + --theme-palette-neutral-light-840: #e4ecf4; + --theme-palette-neutral-light-820: #f3f8fd; + --theme-palette-neutral-light-800: #f1f5f9; + --theme-palette-neutral-light-780: #dcfce7; + --theme-palette-neutral-light-760: rgba(255, 255, 255, 0.4); + --theme-palette-neutral-light-740: rgba(255, 255, 255, 0.5); + --theme-palette-neutral-light-720: rgba(255, 255, 255, 0.3); + --theme-palette-neutral-light-700: rgba(255, 255, 255, 0.2); + --theme-palette-neutral-light-680: rgba(200, 200, 200, 0.6); + + --theme-palette-neutral-mid-900: #1f2f3f; + --theme-palette-neutral-mid-760: #2a3f54; + --theme-palette-neutral-mid-700: #30465b; + --theme-palette-neutral-mid-660: #475569; + --theme-palette-neutral-mid-620: #5a7084; + --theme-palette-neutral-mid-580: #64748b; + --theme-palette-neutral-mid-520: #94a3b8; + + --theme-palette-primary-tone-600: #154679; + --theme-palette-primary-tone-560: #25597e; + --theme-palette-primary-tone-540: #2f6fa8; + --theme-palette-primary-tone-520: #2563eb; + --theme-palette-primary-tone-500: #3b82f6; + --theme-palette-primary-tone-460: #4f81ad; + --theme-palette-primary-tone-420: #8fb0cb; + --theme-palette-primary-tone-380: #cfdbe6; + --theme-palette-primary-tone-340: #cfdae6; + --theme-palette-primary-tone-300: #d8e5f1; + --theme-palette-primary-tone-260: #dce8f3; + --theme-palette-primary-tone-220: #d1e1ef; + --theme-palette-primary-tone-200: rgba(47, 111, 168, 0.1); + --theme-palette-primary-tone-180: rgba(47, 111, 168, 0.16); + --theme-palette-primary-tone-160: rgba(37, 99, 235, 0.06); + --theme-palette-primary-tone-140: #9bb8cf; + + --theme-palette-danger-tone-520: #ef4444; + --theme-palette-danger-tone-500: #dc2626; + --theme-palette-danger-tone-480: #f43f5e; + --theme-palette-danger-tone-420: #d46a6a; + --theme-palette-danger-tone-360: #b96665; + --theme-palette-danger-tone-surface-250: #fee2e2; + --theme-palette-danger-tone-surface-550: #fecaca; + --theme-palette-danger-tone-border: #fca5a5; + + --theme-palette-success-tone-540: #22c55e; + --theme-palette-success-tone-520: #22c55e; + --theme-palette-success-tone-500: #15803d; + --theme-palette-success-tone-460: #86efac; + --theme-palette-success-tone-420: #16a34a; + --theme-palette-success-tone-380: #14b8a6; + --theme-palette-success-tone-340: #166534; + --theme-palette-success-tone-soft-200: #dcfce7; + --theme-palette-success-tone-border: #86efac; + --theme-palette-success-tone-strong: #22c55e; + --theme-palette-success-tone-hover: #bbf7d0; + --theme-palette-success-tone-text: #166534; + --theme-palette-success-tone-surface: #f0fdf4; + + --theme-palette-warning-tone-520: #f59e0b; + --theme-palette-warning-tone-500: #f59e0b; + --theme-palette-warning-tone-460: #fbbf24; + --theme-palette-warning-tone-420: #eab308; + --theme-palette-warning-tone-surface: #fffbeb; + --theme-palette-warning-tone-border: #fde68a; + + --theme-palette-info-tone-520: #155e75; + --theme-palette-info-tone-500: #06b6d4; + --theme-palette-info-tone-460: #0abab5; + --theme-palette-info-tone-surface: #ecfeff; + --theme-palette-info-tone-border: #a5f3fc; + + --theme-palette-accent-tone-540: #a855f7; + --theme-palette-accent-tone-520: #6b21a8; + --theme-palette-accent-tone-500: #8b5cf6; + --theme-palette-accent-tone-460: #c4b5fd; + --theme-palette-accent-tone-surface: #faf5ff; + --theme-palette-accent-tone-border: #e9d5ff; + --theme-palette-accent-tone-soft-surface: #faf5ff; + --theme-palette-accent-tone-soft-hover: #f3e8ff; + --theme-palette-accent-tone-soft-border: #e9d5ff; + --theme-palette-accent-tone-text: #6b21a8; + --theme-palette-accent-tone-text-soft: #581c87; + + --theme-palette-quaternary-tone-500: #6366f1; + --theme-palette-quaternary-tone-surface: #eef2ff; + --theme-palette-emphasis-tone-500: #f43f5e; + --theme-palette-highlight-tone-500: #f59e0b; + + --theme-palette-status-tag-surface: #f1f5f9; + --theme-palette-status-tag-active-text: #166534; + --theme-palette-status-tag-active-surface: #f0fdf4; + --theme-palette-status-tag-active-border: #86efac; + --theme-palette-status-tag-alt-text: #6b21a8; + --theme-palette-status-tag-alt-surface: #faf5ff; + --theme-palette-status-tag-alt-border: #e9d5ff; + --theme-palette-status-tag-expired-text: #92400e; + --theme-palette-status-tag-expired-surface: #fffbeb; + --theme-palette-status-tag-expired-border: #fde68a; + --theme-palette-status-tag-banned-text: #991b1b; + --theme-palette-status-tag-banned-surface: #fee2e2; + --theme-palette-status-tag-banned-border: #fecaca; + + --theme-palette-status-live-surface: #f0fdf4; + --theme-palette-status-video-surface: #ecfeff; + --theme-palette-status-series-surface: #eef2ff; + + --theme-palette-shadow-popup: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05); + --theme-palette-shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05); + --theme-palette-shadow-scrollbar-track: inset 0 0 6px rgba(0, 0, 0, 0.08); + --theme-palette-shadow-tab-header: 0 2px 4px rgba(0, 0, 0, 0.05); + --theme-palette-shadow-field-code: 0 4px 6px rgba(0, 0, 0, 0.08); + --theme-palette-shadow-toggle: 0 2px 6px rgba(15, 23, 42, 0.18); + --theme-palette-shadow-toast: 0 2px 5px rgba(0, 0, 0, 0.12); + --theme-palette-shadow-source-block: 0 1px 2px rgba(15, 23, 42, 0.1); + --theme-palette-shadow-glass: rgba(0, 0, 0, 0.05); + + --theme-palette-menu-icon-update: #2f6fa8; + --theme-palette-menu-icon-user: #0abab5; + --theme-palette-menu-icon-api-server: #ff9d23; + --theme-palette-menu-icon-main-config: #a855f7; + --theme-palette-menu-icon-status: #eab308; + + --theme-palette-code-identifier: #0366d6; + --theme-palette-code-var-access: #005cc5; + --theme-palette-code-field: #e36209; + --theme-palette-code-property: #24292e; + --theme-palette-code-literal: #28a745; + --theme-palette-code-num: #005cc5; + --theme-palette-code-builtin: #6f42c1; + --theme-palette-code-reserved: #d73a49; + --theme-palette-code-regex: #032f62; + --theme-palette-code-enum: #e36209; + --theme-palette-code-range: #005cc5; + --theme-palette-code-op: #d73a49; + --theme-palette-code-compare-text: #1e293b; + --theme-palette-code-bracket-1: #005cc5; + --theme-palette-code-bracket-2: #6f42c1; + --theme-palette-code-bracket-3: #e36209; + --theme-palette-code-any-match: #f43f5e; + + --theme-palette-epg-program-surface: #ffffff; + --theme-palette-epg-program-active-surface: #f1f5f9; + --theme-palette-epg-program-text: #334155; + --theme-palette-epg-program-time: #94a3b8; + --theme-palette-epg-program-time-active: #475569; + --theme-palette-epg-past-surface: rgba(15, 23, 42, 0.06); + --theme-palette-epg-now-line: #ef4444; + + --theme-palette-graph-grid-1: #d9e3ec55; + --theme-palette-graph-grid-2: #c7d5e255; + + --theme-palette-particle-1: #154679; + --theme-palette-particle-2: #9bb8cf; + --theme-palette-particle-alpha-boost: 1.45; + + --theme-palette-chip-container-text: #2563eb; + --theme-palette-chip-container-surface: #dbeafe; + --theme-palette-chip-video-text: #15803d; + --theme-palette-chip-video-surface: #dcfce7; + --theme-palette-chip-resolution-text: #b91c1c; + --theme-palette-chip-resolution-surface: #fee2e2; + --theme-palette-chip-fps-text: #b45309; + --theme-palette-chip-fps-surface: #fef3c7; + --theme-palette-chip-audio-text: #be185d; + --theme-palette-chip-audio-surface: #fce7f3; + --theme-palette-chip-audio-channels-text: #9d174d; + + --theme-palette-graph-input-xtream: #3b82f6; + --theme-palette-graph-input-m3u: #0ea5e9; + --theme-palette-graph-input-library: #8b5cf6; + --theme-palette-graph-target: #22c55e; + --theme-palette-graph-output: #f59e0b; + --theme-palette-graph-output-xtream: #06b6d4; + --theme-palette-graph-output-m3u: #14b8a6; + --theme-palette-graph-output-hdhomerun: #8b5cf6; + --theme-palette-graph-output-strm: #f43f5e; + --theme-palette-graph-port: #64748b; + --theme-palette-graph-port-border: #ffffff; + --theme-palette-graph-port-hover: #f59e0b; + + --theme-palette-login-logo: color-mix(in srgb, #eaf1f8 82%, black 8%); + --theme-palette-series-title: #ffffff; + --theme-palette-series-backdrop-overlay: linear-gradient( + to right, + rgba(255, 255, 255, 0.95) 28%, + rgba(255, 255, 255, 0.88) 48%, + rgba(255, 255, 255, 0.75) 60%, + rgba(255, 255, 255, 0.38) 72%, + rgba(255, 255, 255, 0) 86% + ); +} diff --git a/frontend/scss/themes/_theme-clubroom-contrast.scss b/frontend/scss/themes/_theme-clubroom-contrast.scss new file mode 100644 index 000000000..5a323f4b4 --- /dev/null +++ b/frontend/scss/themes/_theme-clubroom-contrast.scss @@ -0,0 +1,267 @@ +body[data-theme="clubroom-contrast"] { + --theme-palette-page: #0d0b09; + --theme-palette-page-alt: #17120f; + --theme-palette-neutral-surface-980: rgba(20, 18, 20, 0.92); + --theme-palette-neutral-surface-960: rgba(28, 25, 30, 0.96); + --theme-palette-neutral-surface-940: rgba(39, 36, 41, 0.82); + --theme-palette-neutral-surface-920: rgba(39, 36, 41, 0.72); + --theme-palette-neutral-surface-900: rgba(48, 44, 51, 0.68); + --theme-palette-neutral-surface-880: rgba(57, 53, 60, 0.6); + --theme-palette-neutral-surface-840: rgba(71, 66, 75, 0.48); + --theme-palette-neutral-surface-820: rgba(94, 88, 99, 0.32); + --theme-palette-neutral-surface-800: rgba(166, 226, 46, 0.18); + --theme-palette-neutral-surface-780: rgba(166, 226, 46, 0.1); + --theme-palette-neutral-surface-760: rgba(253, 151, 31, 0.14); + --theme-palette-neutral-surface-740: rgba(253, 151, 31, 0.08); + --theme-palette-neutral-surface-720: rgba(255, 255, 255, 0.16); + --theme-palette-neutral-surface-700: rgba(255, 255, 255, 0); + --theme-palette-neutral-surface-680: rgba(0, 0, 0, 0.18); + --theme-palette-neutral-surface-660: rgba(0, 0, 0, 0.56); + --theme-palette-neutral-surface-640: rgba(0, 0, 0, 0.34); + --theme-palette-neutral-surface-620: #3b354088; + --theme-palette-neutral-surface-600: #2f2a3388; + --theme-palette-neutral-surface-580: #57505d88; + --theme-palette-neutral-surface-560: #3a353d; + --theme-palette-neutral-surface-540: #27222988; + --theme-palette-neutral-surface-520: #17120f; + --theme-palette-neutral-surface-code: #171517cc; + --theme-palette-neutral-surface-code-solid: #171517; + --theme-palette-neutral-surface-code-compare: #241d1899; + --theme-palette-state-surface-option-active: #7d995088; + + --theme-palette-accent-border-500: rgba(102, 217, 239, 0.22); + --theme-palette-accent-border-460: rgba(102, 217, 239, 0.42); + --theme-palette-accent-border-420: rgba(102, 217, 239, 0.82); + --theme-palette-accent-border-380: rgba(102, 217, 239, 0.92); + --theme-palette-accent-border-340: rgba(102, 217, 239, 0.3); + --theme-palette-neutral-border-560: #5c5562; + --theme-palette-neutral-border-520: #4a434f; + --theme-palette-neutral-border-500: #6a6271; + --theme-palette-neutral-border-460: #39333d; + --theme-palette-neutral-border-420: rgba(255, 255, 255, 0.14); + --theme-palette-neutral-border-380: rgba(102, 217, 239, 0.88); + + --theme-palette-neutral-text-900: #f5ebcf; + --theme-palette-neutral-text-760: #e6dbcf; + --theme-palette-neutral-text-700: #cfc6bb; + --theme-palette-neutral-text-620: #b6ada3; + --theme-palette-neutral-text-580: #9d958d; + --theme-palette-neutral-text-560: #b8b1aa; + --theme-palette-neutral-text-500: #8d8680; + --theme-palette-neutral-text-460: #6f6761; + --theme-palette-neutral-text-420: #4b4541; + + --theme-palette-text-header: #d4af37; + --theme-palette-text-label: #6eaab0; + --theme-palette-text-option-active: #272822; + --theme-palette-text-menu-warn: #c18a42; + --theme-palette-text-menu-warn-strong: #b65c47; + + --theme-palette-primary: rgba(102, 217, 239, 0.34); + --theme-palette-primary-soft: rgba(102, 217, 239, 0.16); + --theme-palette-primary-hover-soft: rgba(120, 220, 232, 0.18); + --theme-palette-primary-active-soft: rgba(120, 220, 232, 0.26); + --theme-palette-primary-hover: rgba(102, 217, 239, 0.4); + --theme-palette-primary-hover-strong: rgba(120, 220, 232, 0.9); + --theme-palette-primary-border: rgba(102, 217, 239, 0.8); + --theme-palette-primary-menu-hover: rgba(120, 220, 232, 0.26); + --theme-palette-primary-tool-hover: #588c9388; + --theme-palette-primary-tree-hover: #588c9366; + --theme-palette-primary-tab-hover: #31535d88; + --theme-palette-primary-tab-active: #263f4688; + --theme-palette-primary-tab-border: #6eaab0; + --theme-palette-primary-spinner: #6eaab0; + + --theme-palette-secondary: rgba(255, 97, 136, 0.64); + --theme-palette-secondary-soft: rgba(255, 97, 136, 0.24); + --theme-palette-secondary-hover: rgba(255, 97, 136, 0.46); + --theme-palette-secondary-border: rgba(255, 97, 136, 0.56); + + --theme-palette-neutral-dark-950: #141214; + --theme-palette-neutral-dark-900: #0d0b09; + --theme-palette-neutral-dark-850: #17120f; + --theme-palette-neutral-dark-800: #171517; + --theme-palette-neutral-dark-780: #241d1899; + --theme-palette-neutral-dark-760: #27222988; + --theme-palette-neutral-dark-740: #2f2a3388; + --theme-palette-neutral-dark-720: #343039; + --theme-palette-neutral-dark-700: #3a353d; + --theme-palette-neutral-dark-680: #46414a; + --theme-palette-neutral-dark-660: #3b354088; + --theme-palette-neutral-dark-640: #4a434f; + --theme-palette-neutral-dark-620: #57505d; + --theme-palette-neutral-dark-600: #57505d88; + --theme-palette-neutral-dark-580: #5c5562; + --theme-palette-neutral-dark-560: #6a6271; + --theme-palette-neutral-dark-540: #4b4541; + --theme-palette-neutral-dark-520: #39333d; + + --theme-palette-primary-tone-500: #6eaab0; + --theme-palette-primary-tone-450: #8be9fd; + --theme-palette-primary-tone-420: #4f8790; + --theme-palette-primary-tone-380: #588c93; + --theme-palette-primary-tone-340: #4aa5b3; + --theme-palette-primary-tone-300: #5ac8c8; + --theme-palette-primary-tone-260: #2bbbd8; + --theme-palette-primary-tone-220: #7d9950; + --theme-palette-primary-tone-200: #2d8c9f; + --theme-palette-primary-tone-180: #31535d; + --theme-palette-primary-tone-160: #263f46; + --theme-palette-primary-tone-140: #1e7488; + + --theme-palette-danger-tone-520: #b65c47; + --theme-palette-danger-tone-500: #ff5c7a; + --theme-palette-danger-tone-480: #f7768e; + --theme-palette-danger-tone-420: #ff9cae; + --theme-palette-danger-tone-360: #c87b88; + --theme-palette-danger-tone-surface-250: rgba(255, 97, 136, 0.22); + --theme-palette-danger-tone-surface-550: rgba(255, 97, 136, 0.42); + --theme-palette-danger-tone-border: rgba(255, 97, 136, 0.5); + + --theme-palette-success-tone-540: #7d9950; + --theme-palette-success-tone-520: #7d9950; + --theme-palette-success-tone-500: #91a968; + --theme-palette-success-tone-460: #b9f27c; + --theme-palette-success-tone-420: #9de24c; + --theme-palette-success-tone-380: #6eaab0; + --theme-palette-success-tone-340: #618c3d; + --theme-palette-success-tone-soft-200: rgba(166, 226, 46, 0.18); + --theme-palette-success-tone-border: rgba(166, 226, 46, 0.36); + --theme-palette-success-tone-strong: rgba(166, 226, 46, 0.72); + --theme-palette-success-tone-hover: rgba(166, 226, 46, 0.28); + --theme-palette-success-tone-text: #d6f58c; + --theme-palette-success-tone-surface: #3f3b1a88; + + --theme-palette-warning-tone-520: #d4af37; + --theme-palette-warning-tone-500: #c18a42; + --theme-palette-warning-tone-460: #ffd98e; + --theme-palette-warning-tone-420: #ffc15e; + --theme-palette-warning-tone-surface: #4f392088; + --theme-palette-warning-tone-border: #b88746; + + --theme-palette-info-tone-520: #6eaab0; + --theme-palette-info-tone-500: #4f8790; + --theme-palette-info-tone-460: #588c93; + --theme-palette-info-tone-surface: #1f3d4588; + --theme-palette-info-tone-border: #467d89; + + --theme-palette-accent-tone-540: #8c6b2b; + --theme-palette-accent-tone-520: #8f6d58; + --theme-palette-accent-tone-500: #7b5d48; + --theme-palette-accent-tone-460: #d6b4ff; + --theme-palette-accent-tone-surface: #3f284888; + --theme-palette-accent-tone-border: #8a63d2; + --theme-palette-accent-tone-soft-surface: rgba(171, 157, 242, 0.1); + --theme-palette-accent-tone-soft-hover: rgba(171, 157, 242, 0.2); + --theme-palette-accent-tone-soft-border: rgba(171, 157, 242, 0.34); + --theme-palette-accent-tone-text: #e1c8ff; + --theme-palette-accent-tone-text-soft: #f0defe; + + --theme-palette-quaternary-tone-500: #7b5d48; + --theme-palette-quaternary-tone-surface: #372f5688; + --theme-palette-emphasis-tone-500: #b65c47; + --theme-palette-highlight-tone-500: #d4af37; + + --theme-palette-status-tag-surface: #312c3388; + --theme-palette-status-tag-active-text: #7d9950; + --theme-palette-status-tag-active-surface: #3f3b1a88; + --theme-palette-status-tag-active-border: #618c3d; + --theme-palette-status-tag-alt-text: #8f6d58; + --theme-palette-status-tag-alt-surface: #3f284888; + --theme-palette-status-tag-alt-border: #8a63d2; + --theme-palette-status-tag-expired-text: #d4af37; + --theme-palette-status-tag-expired-surface: #4f392088; + --theme-palette-status-tag-expired-border: #b88746; + --theme-palette-status-tag-banned-text: #ff9cae; + --theme-palette-status-tag-banned-surface: #3f241788; + --theme-palette-status-tag-banned-border: #9f4c5d; + + --theme-palette-status-live-surface: #3f3b1a88; + --theme-palette-status-video-surface: #1f3d4588; + --theme-palette-status-series-surface: #372f5688; + + --theme-palette-shadow-popup: 0 10px 28px rgba(0, 0, 0, 0.46), inset 0 0 10px rgba(255, 216, 102, 0.08); + --theme-palette-shadow-card: 0 8px 20px rgba(0, 0, 0, 0.26); + --theme-palette-shadow-scrollbar-track: inset 0 0 6px rgba(0, 0, 0, 0.28); + --theme-palette-shadow-tab-header: 0 2px 4px rgba(0, 0, 0, 0.08); + --theme-palette-shadow-field-code: 0 4px 6px rgba(0, 0, 0, 0.16); + --theme-palette-shadow-toggle: 0 2px 6px rgba(0, 0, 0, 0.78); + --theme-palette-shadow-toast: 0 2px 5px rgba(0, 0, 0, 0.3); + --theme-palette-shadow-source-block: 0 1px 2px rgba(0, 0, 0, 0.22); + --theme-palette-shadow-glass: rgba(0, 0, 0, 0.12); + + --theme-palette-menu-icon-update: #d4af37; + --theme-palette-menu-icon-user: #4f8790; + --theme-palette-menu-icon-api-server: #c18a42; + --theme-palette-menu-icon-main-config: #8c6b2b; + --theme-palette-menu-icon-status: #7d9950; + + --theme-palette-code-identifier: #4f8790; + --theme-palette-code-var-access: #a1efe4; + --theme-palette-code-field: #d4af37; + --theme-palette-code-property: #c18a42; + --theme-palette-code-literal: #7d9950; + --theme-palette-code-num: #ae81ff; + --theme-palette-code-builtin: #d4af37; + --theme-palette-code-reserved: #8b3f3f; + --theme-palette-code-regex: #dfc67a; + --theme-palette-code-enum: #7d9950; + --theme-palette-code-range: #6eaab0; + --theme-palette-code-op: #8b3f3f; + --theme-palette-code-compare-text: #f5ebcf; + --theme-palette-code-bracket-1: #4f8790; + --theme-palette-code-bracket-2: #b57c38; + --theme-palette-code-bracket-3: #7d9950; + --theme-palette-code-any-match: #b65c47; + + --theme-palette-epg-program-surface: #211d24; + --theme-palette-epg-program-active-surface: #2f2a33; + --theme-palette-epg-program-text: #f5ebcf; + --theme-palette-epg-program-time: #9d958d; + --theme-palette-epg-program-time-active: #d4af37; + --theme-palette-epg-past-surface: rgba(0, 0, 0, 0.12); + --theme-palette-epg-now-line: #b65c47; + + --theme-palette-graph-grid-1: #f5ebcf30; + --theme-palette-graph-grid-2: #d4af3724; + + --theme-palette-particle-1: #d4af37; + --theme-palette-particle-2: #241d18; + --theme-palette-particle-alpha-boost: 1.18; + + --theme-palette-chip-container-text: #6eaab0; + --theme-palette-chip-container-surface: #1e2e30; + --theme-palette-chip-video-text: #7d9950; + --theme-palette-chip-video-surface: #323119; + --theme-palette-chip-resolution-text: #ff9cae; + --theme-palette-chip-resolution-surface: #4d232d; + --theme-palette-chip-fps-text: #d4af37; + --theme-palette-chip-fps-surface: #4b3821; + --theme-palette-chip-audio-text: #8c6b2b; + --theme-palette-chip-audio-surface: #3b2b1d; + --theme-palette-chip-audio-channels-text: #f0defe; + + --theme-palette-graph-input-xtream: #4f8790; + --theme-palette-graph-input-m3u: #6eaab0; + --theme-palette-graph-input-library: #7b5d48; + --theme-palette-graph-target: #7d9950; + --theme-palette-graph-output: #c18a42; + --theme-palette-graph-output-xtream: #588c93; + --theme-palette-graph-output-m3u: #91a968; + --theme-palette-graph-output-hdhomerun: #7b5d48; + --theme-palette-graph-output-strm: #b65c47; + --theme-palette-graph-port: #6d6257; + --theme-palette-graph-port-border: #ffffff; + --theme-palette-graph-port-hover: #d4af37; + + --theme-palette-login-logo: color-mix(in srgb, #0d0b09 80%, #d4af37 10%); + --theme-palette-series-title: #ffffff; + --theme-palette-series-backdrop-overlay: linear-gradient( + to right, + rgba(25, 24, 26, 1) 28%, + rgba(25, 24, 26, 0.92) 48%, + rgba(25, 24, 26, 0.78) 60%, + rgba(25, 24, 26, 0.42) 72%, + rgba(25, 24, 26, 0) 86% + ); +} diff --git a/frontend/scss/themes/_theme-cool-elegance.scss b/frontend/scss/themes/_theme-cool-elegance.scss new file mode 100644 index 000000000..7666a1535 --- /dev/null +++ b/frontend/scss/themes/_theme-cool-elegance.scss @@ -0,0 +1,277 @@ +body[data-theme="cool-elegance"] { + --theme-palette-page: #eef6fb; + --theme-palette-page-alt: #d7c6b0; + --theme-palette-neutral-surface-980: #fffaf2e6; + --theme-palette-neutral-surface-960: #e7dccb; + --theme-palette-neutral-surface-940: #faf5ec; + --theme-palette-neutral-surface-920: #f4ede1; + --theme-palette-neutral-surface-900: #f6f0e6; + --theme-palette-neutral-surface-880: #efe4d4; + --theme-palette-neutral-surface-840: #eadfce; + --theme-palette-neutral-surface-820: #e5d8c6; + --theme-palette-neutral-surface-800: rgba(186, 163, 127, 0.2); + --theme-palette-neutral-surface-780: rgba(186, 163, 127, 0.12); + --theme-palette-neutral-surface-760: rgba(255, 255, 255, 0.45); + --theme-palette-neutral-surface-740: rgba(255, 255, 255, 0.55); + --theme-palette-neutral-surface-720: rgba(255, 255, 255, 0.35); + --theme-palette-neutral-surface-700: transparent; + --theme-palette-neutral-surface-680: rgba(204, 193, 173, 0.7); + --theme-palette-neutral-surface-660: rgba(0, 0, 0, 0.46); + --theme-palette-neutral-surface-640: rgba(0, 0, 0, 0.24); + --theme-palette-neutral-surface-620: #f7efe1; + --theme-palette-neutral-surface-600: #f0e7db; + --theme-palette-neutral-surface-580: #f0e7db; + --theme-palette-neutral-surface-560: #f8f1e7; + --theme-palette-neutral-surface-540: #efe4d4; + --theme-palette-neutral-surface-520: #e1d4c1; + --theme-palette-neutral-surface-code: #fff9f0; + --theme-palette-neutral-surface-code-solid: #fff9f0; + --theme-palette-neutral-surface-code-compare: rgba(214, 198, 173, 0.55); + --theme-palette-state-surface-option-active: #e6f3ef; + + --theme-palette-accent-border-500: #d8c8b1; + --theme-palette-accent-border-460: #b8a17c; + --theme-palette-accent-border-420: #7c5f36; + --theme-palette-accent-border-380: #7c5f36; + --theme-palette-accent-border-340: #d8c8b1; + --theme-palette-neutral-border-560: #dfd3c3; + --theme-palette-neutral-border-520: #d8c8b1; + --theme-palette-neutral-border-500: #dfd3c3; + --theme-palette-neutral-border-460: #dfd3c3; + --theme-palette-neutral-border-420: rgba(72, 54, 34, 0.12); + --theme-palette-neutral-border-380: rgba(124, 95, 54, 0.84); + + --theme-palette-neutral-text-900: #22343c; + --theme-palette-neutral-text-760: #48626c; + --theme-palette-neutral-text-700: #667f89; + --theme-palette-neutral-text-620: #7896a1; + --theme-palette-neutral-text-580: #8da8b1; + --theme-palette-neutral-text-560: #8f7a67; + --theme-palette-neutral-text-500: #9fb0b8; + --theme-palette-neutral-text-460: #6e6052; + --theme-palette-neutral-text-420: #c1b2a3; + + --theme-palette-text-header: #7c5f36; + --theme-palette-text-label: #9b7b4f; + --theme-palette-text-option-active: #23452a; + --theme-palette-text-menu-warn: #c9a783; + --theme-palette-text-menu-warn-strong: #a3483d; + + --theme-palette-primary: #6c90ab; + --theme-palette-primary-soft: rgba(140, 107, 63, 0.08); + --theme-palette-primary-hover-soft: rgba(140, 107, 63, 0.14); + --theme-palette-primary-active-soft: rgba(140, 107, 63, 0.2); + --theme-palette-primary-hover: #e8dcc8; + --theme-palette-primary-hover-strong: #6d5230; + --theme-palette-primary-border: #6c90ab; + --theme-palette-primary-menu-hover: #6d5230; + --theme-palette-primary-tool-hover: #6d5230; + --theme-palette-primary-tree-hover: rgba(140, 107, 63, 0.1); + --theme-palette-primary-tab-hover: #ebdfcf; + --theme-palette-primary-tab-active: #e2d3bf; + --theme-palette-primary-tab-border: #a78456; + --theme-palette-primary-spinner: #6c90ab; + + --theme-palette-secondary: #c9a783; + --theme-palette-secondary-soft: #f5ddd3; + --theme-palette-secondary-hover: #edc2b2; + --theme-palette-secondary-border: #de9f8a; + + --theme-palette-neutral-light-980: #fffaf2e6; + --theme-palette-neutral-light-960: #fff9f0; + --theme-palette-neutral-light-940: #faf5ec; + --theme-palette-neutral-light-920: #f4ede1; + --theme-palette-neutral-light-900: #efe4d4; + --theme-palette-neutral-light-880: #eadfce; + --theme-palette-neutral-light-860: #e5d8c6; + --theme-palette-neutral-light-840: #e1d4c1; + --theme-palette-neutral-light-820: #f7efe1; + --theme-palette-neutral-light-800: #f0e7db; + --theme-palette-neutral-light-780: #e6f3ef; + --theme-palette-neutral-light-760: rgba(255, 255, 255, 0.45); + --theme-palette-neutral-light-740: rgba(255, 255, 255, 0.55); + --theme-palette-neutral-light-720: rgba(255, 255, 255, 0.35); + --theme-palette-neutral-light-700: rgba(255, 255, 255, 0.2); + --theme-palette-neutral-light-680: rgba(214, 198, 173, 0.55); + + --theme-palette-neutral-mid-900: #22343c; + --theme-palette-neutral-mid-760: #48626c; + --theme-palette-neutral-mid-700: #667f89; + --theme-palette-neutral-mid-660: #7896a1; + --theme-palette-neutral-mid-620: #8da8b1; + --theme-palette-neutral-mid-580: #a99888; + --theme-palette-neutral-mid-520: #c1b2a3; + + --theme-palette-primary-tone-600: #5f4728; + --theme-palette-primary-tone-560: #6d5230; + --theme-palette-primary-tone-540: #6c90ab; + --theme-palette-primary-tone-520: #a78456; + --theme-palette-primary-tone-500: #7fa6bc; + --theme-palette-primary-tone-460: #d7c6b0; + --theme-palette-primary-tone-420: #ccb28b; + --theme-palette-primary-tone-380: #d8c8b1; + --theme-palette-primary-tone-340: #e2d3bf; + --theme-palette-primary-tone-300: #e8dcc8; + --theme-palette-primary-tone-260: #ebdfcf; + --theme-palette-primary-tone-220: #e6f3ef; + --theme-palette-primary-tone-200: rgba(140, 107, 63, 0.1); + --theme-palette-primary-tone-180: rgba(140, 107, 63, 0.2); + --theme-palette-primary-tone-160: rgba(140, 107, 63, 0.08); + --theme-palette-primary-tone-140: #c1b2a3; + + --theme-palette-danger-tone-520: #c75b4c; + --theme-palette-danger-tone-500: #a3483d; + --theme-palette-danger-tone-480: #c69174; + --theme-palette-danger-tone-420: #c9a783; + --theme-palette-danger-tone-360: #9a6c5e; + --theme-palette-danger-tone-surface-250: #f5ddd3; + --theme-palette-danger-tone-surface-550: #edc2b2; + --theme-palette-danger-tone-border: #de9f8a; + + --theme-palette-success-tone-540: #6f9d8d; + --theme-palette-success-tone-520: #4d7c4c; + --theme-palette-success-tone-500: #3f6b3e; + --theme-palette-success-tone-460: #8db08a; + --theme-palette-success-tone-420: #588657; + --theme-palette-success-tone-380: #5f99b8; + --theme-palette-success-tone-340: #23452a; + --theme-palette-success-tone-soft-200: #e6f3ef; + --theme-palette-success-tone-border: #b8d5b5; + --theme-palette-success-tone-strong: #4d7c4c; + --theme-palette-success-tone-hover: #cde7ca; + --theme-palette-success-tone-text: #23452a; + --theme-palette-success-tone-surface: #edf6f3; + + --theme-palette-warning-tone-520: #d0943c; + --theme-palette-warning-tone-500: #b99563; + --theme-palette-warning-tone-460: #e5bb76; + --theme-palette-warning-tone-420: #b88746; + --theme-palette-warning-tone-surface: #f7efe1; + --theme-palette-warning-tone-border: #efcf9d; + + --theme-palette-info-tone-520: #4b7b83; + --theme-palette-info-tone-500: #5f99b8; + --theme-palette-info-tone-460: #6aaea6; + --theme-palette-info-tone-surface: #e6f3fb; + --theme-palette-info-tone-border: #bfded8; + + --theme-palette-accent-tone-540: #8aa0d6; + --theme-palette-accent-tone-520: #6f82b8; + --theme-palette-accent-tone-500: #aebce4; + --theme-palette-accent-tone-460: #dbc2d7; + --theme-palette-accent-tone-surface: #edf1fb; + --theme-palette-accent-tone-border: #e5cfe0; + --theme-palette-accent-tone-soft-surface: #edf1fb; + --theme-palette-accent-tone-soft-hover: #f1e4ef; + --theme-palette-accent-tone-soft-border: #e5cfe0; + --theme-palette-accent-tone-text: #6f82b8; + --theme-palette-accent-tone-text-soft: #576a99; + + --theme-palette-quaternary-tone-500: #7f92c2; + --theme-palette-quaternary-tone-surface: #edf1fb; + --theme-palette-emphasis-tone-500: #c69174; + --theme-palette-highlight-tone-500: #e3c56a; + + --theme-palette-status-tag-surface: #f0e7db; + --theme-palette-status-tag-active-text: #23452a; + --theme-palette-status-tag-active-surface: #edf6f3; + --theme-palette-status-tag-active-border: #b8d5b5; + --theme-palette-status-tag-alt-text: #6f82b8; + --theme-palette-status-tag-alt-surface: #edf1fb; + --theme-palette-status-tag-alt-border: #e5cfe0; + --theme-palette-status-tag-expired-text: #8f5e1d; + --theme-palette-status-tag-expired-surface: #f7efe1; + --theme-palette-status-tag-expired-border: #efcf9d; + --theme-palette-status-tag-banned-text: #8c332e; + --theme-palette-status-tag-banned-surface: #f7ebe4; + --theme-palette-status-tag-banned-border: #edc2b2; + + --theme-palette-status-live-surface: #edf6f3; + --theme-palette-status-video-surface: #e6f3fb; + --theme-palette-status-series-surface: #edf1fb; + + --theme-palette-shadow-popup: 0 10px 24px rgba(99, 82, 57, 0.14), 0 8px 10px rgba(99, 82, 57, 0.08); + --theme-palette-shadow-card: 0 4px 6px rgba(99, 82, 57, 0.08), 0 2px 4px rgba(99, 82, 57, 0.06); + --theme-palette-shadow-scrollbar-track: inset 0 0 6px rgba(99, 82, 57, 0.08); + --theme-palette-shadow-tab-header: 0 2px 4px rgba(99, 82, 57, 0.06); + --theme-palette-shadow-field-code: 0 4px 6px rgba(99, 82, 57, 0.08); + --theme-palette-shadow-toggle: 0 2px 6px rgba(52, 43, 35, 0.18); + --theme-palette-shadow-toast: 0 2px 5px rgba(99, 82, 57, 0.1); + --theme-palette-shadow-source-block: 0 1px 2px rgba(99, 82, 57, 0.08); + --theme-palette-shadow-glass: rgba(99, 82, 57, 0.05); + + --theme-palette-menu-icon-update: #6c90ab; + --theme-palette-menu-icon-user: #5f99b8; + --theme-palette-menu-icon-api-server: #b99563; + --theme-palette-menu-icon-main-config: #8aa0d6; + --theme-palette-menu-icon-status: #6f9d8d; + + --theme-palette-code-identifier: #5d90b4; + --theme-palette-code-var-access: #3f6b3e; + --theme-palette-code-field: #b88746; + --theme-palette-code-property: #6c90ab; + --theme-palette-code-literal: #6f9d8d; + --theme-palette-code-num: #8aa0d6; + --theme-palette-code-builtin: #b99563; + --theme-palette-code-reserved: #a3483d; + --theme-palette-code-regex: #7f92c2; + --theme-palette-code-enum: #c9a783; + --theme-palette-code-range: #5f99b8; + --theme-palette-code-op: #a3483d; + --theme-palette-code-compare-text: #22343c; + --theme-palette-code-bracket-1: #5d90b4; + --theme-palette-code-bracket-2: #8aa0d6; + --theme-palette-code-bracket-3: #b88746; + --theme-palette-code-any-match: #c69174; + + --theme-palette-epg-program-surface: #fff9f0; + --theme-palette-epg-program-active-surface: #f0e7db; + --theme-palette-epg-program-text: #4a3b2d; + --theme-palette-epg-program-time: #8da8b1; + --theme-palette-epg-program-time-active: #6c90ab; + --theme-palette-epg-past-surface: rgba(52, 43, 35, 0.06); + --theme-palette-epg-now-line: #c75b4c; + + --theme-palette-graph-grid-1: #d9cdbd55; + --theme-palette-graph-grid-2: #c6b49d55; + + --theme-palette-particle-1: #7fa6bc; + --theme-palette-particle-2: #d7c6b0; + --theme-palette-particle-alpha-boost: 1.28; + + --theme-palette-chip-container-text: #6c90ab; + --theme-palette-chip-container-surface: #efe4d4; + --theme-palette-chip-video-text: #3f6b3e; + --theme-palette-chip-video-surface: #edf6f3; + --theme-palette-chip-resolution-text: #8c332e; + --theme-palette-chip-resolution-surface: #f7ebe4; + --theme-palette-chip-fps-text: #8f5e1d; + --theme-palette-chip-fps-surface: #f7efe1; + --theme-palette-chip-audio-text: #6f82b8; + --theme-palette-chip-audio-surface: #edf1fb; + --theme-palette-chip-audio-channels-text: #576a99; + + --theme-palette-graph-input-xtream: #6c90ab; + --theme-palette-graph-input-m3u: #5f99b8; + --theme-palette-graph-input-library: #aebce4; + --theme-palette-graph-target: #4d7c4c; + --theme-palette-graph-output: #b99563; + --theme-palette-graph-output-xtream: #6aaea6; + --theme-palette-graph-output-m3u: #6f9d8d; + --theme-palette-graph-output-hdhomerun: #7f92c2; + --theme-palette-graph-output-strm: #c69174; + --theme-palette-graph-port: #8da8b1; + --theme-palette-graph-port-border: #ffffff; + --theme-palette-graph-port-hover: #d0943c; + + --theme-palette-login-logo: color-mix(in srgb, #eef6fb 84%, #6c90ab 8%); + --theme-palette-series-title: #4a3b2d; + --theme-palette-series-backdrop-overlay: linear-gradient( + to right, + rgba(245, 239, 229, 0.98) 28%, + rgba(245, 239, 229, 0.9) 48%, + rgba(245, 239, 229, 0.76) 60%, + rgba(245, 239, 229, 0.4) 72%, + rgba(245, 239, 229, 0) 86% + ); +} diff --git a/frontend/scss/themes/_theme-dark.scss b/frontend/scss/themes/_theme-dark.scss new file mode 100644 index 000000000..75d63975c --- /dev/null +++ b/frontend/scss/themes/_theme-dark.scss @@ -0,0 +1,267 @@ +body[data-theme="dark"] { + --theme-palette-page: #0b1220; + --theme-palette-page-alt: #070f1d; + --theme-palette-neutral-surface-980: rgba(7, 12, 24, 0.82); + --theme-palette-neutral-surface-960: rgba(15, 23, 42, 0.94); + --theme-palette-neutral-surface-940: rgba(15, 23, 42, 0.78); + --theme-palette-neutral-surface-920: rgba(15, 23, 42, 0.62); + --theme-palette-neutral-surface-900: rgba(15, 23, 42, 0.56); + --theme-palette-neutral-surface-880: rgba(22, 26, 36, 0.55); + --theme-palette-neutral-surface-840: rgba(30, 64, 175, 0.28); + --theme-palette-neutral-surface-820: rgba(68, 71, 90, 0.3); + --theme-palette-neutral-surface-800: rgba(127, 127, 127, 0.2); + --theme-palette-neutral-surface-780: rgba(127, 127, 127, 0.12); + --theme-palette-neutral-surface-760: rgba(255, 255, 255, 0.1); + --theme-palette-neutral-surface-740: rgba(255, 255, 255, 0.08); + --theme-palette-neutral-surface-720: rgba(255, 255, 255, 0.15); + --theme-palette-neutral-surface-700: rgba(255, 255, 255, 0); + --theme-palette-neutral-surface-680: rgba(0, 0, 0, 0.15); + --theme-palette-neutral-surface-660: rgba(0, 0, 0, 0.5); + --theme-palette-neutral-surface-640: rgba(0, 0, 0, 0.3); + --theme-palette-neutral-surface-620: #44475a88; + --theme-palette-neutral-surface-600: #20273388; + --theme-palette-neutral-surface-580: #4e545d88; + --theme-palette-neutral-surface-560: #4b4b4b; + --theme-palette-neutral-surface-540: #1e293b88; + --theme-palette-neutral-surface-520: #161b25; + --theme-palette-neutral-surface-code: #1e1e1e88; + --theme-palette-neutral-surface-code-solid: #1e1e1e; + --theme-palette-neutral-surface-code-compare: #20242988; + --theme-palette-state-surface-option-active: #50fa7b88; + + --theme-palette-accent-border-500: rgba(96, 165, 250, 0.24); + --theme-palette-accent-border-460: rgba(96, 165, 250, 0.46); + --theme-palette-accent-border-420: rgba(80, 150, 255, 0.8); + --theme-palette-accent-border-380: rgba(96, 165, 250, 0.88); + --theme-palette-accent-border-340: rgba(96, 165, 250, 0.26); + --theme-palette-neutral-border-560: #535353; + --theme-palette-neutral-border-520: #44475a; + --theme-palette-neutral-border-500: #555555; + --theme-palette-neutral-border-460: #3a3a3a; + --theme-palette-neutral-border-420: rgba(255, 255, 255, 0.15); + --theme-palette-neutral-border-380: rgba(0, 120, 215, 0.9); + + --theme-palette-neutral-text-900: #e6edf7; + --theme-palette-neutral-text-760: #d8e1ef; + --theme-palette-neutral-text-700: #aeb0b2; + --theme-palette-neutral-text-620: #9aa9bf; + --theme-palette-neutral-text-580: #7f8ea5; + --theme-palette-neutral-text-560: #c4c4c4; + --theme-palette-neutral-text-500: #9b9b9b; + --theme-palette-neutral-text-460: #717171; + --theme-palette-neutral-text-420: #494949; + + --theme-palette-text-header: #93c5fd; + --theme-palette-text-label: #8ec5ff; + --theme-palette-text-option-active: #000000; + --theme-palette-text-menu-warn: #b96665; + --theme-palette-text-menu-warn-strong: #dd7573; + + --theme-palette-primary: rgba(96, 165, 250, 0.4); + --theme-palette-primary-soft: rgba(37, 99, 235, 0.18); + --theme-palette-primary-hover-soft: rgba(59, 130, 246, 0.16); + --theme-palette-primary-active-soft: rgba(59, 130, 246, 0.24); + --theme-palette-primary-hover: rgba(37, 99, 235, 0.42); + --theme-palette-primary-hover-strong: rgba(59, 130, 246, 0.9); + --theme-palette-primary-border: rgba(80, 150, 255, 0.8); + --theme-palette-primary-menu-hover: rgba(37, 99, 235, 0.3); + --theme-palette-primary-tool-hover: #2563eb88; + --theme-palette-primary-tree-hover: #2563eb66; + --theme-palette-primary-tab-hover: #2f6db788; + --theme-palette-primary-tab-active: #1f4f8f88; + --theme-palette-primary-tab-border: #4f8ffb; + --theme-palette-primary-spinner: #3b82f6; + + --theme-palette-secondary: rgba(251, 113, 133, 0.62); + --theme-palette-secondary-soft: rgba(220, 70, 70, 0.25); + --theme-palette-secondary-hover: rgba(220, 70, 70, 0.55); + --theme-palette-secondary-border: rgba(220, 70, 70, 0.5); + + --theme-palette-neutral-dark-950: #070f1d; + --theme-palette-neutral-dark-900: #0b1220; + --theme-palette-neutral-dark-850: #161b25; + --theme-palette-neutral-dark-800: #1e1e1e; + --theme-palette-neutral-dark-780: #20242988; + --theme-palette-neutral-dark-760: #1e293b88; + --theme-palette-neutral-dark-740: #20273388; + --theme-palette-neutral-dark-720: #263645; + --theme-palette-neutral-dark-700: #273240; + --theme-palette-neutral-dark-680: #334155; + --theme-palette-neutral-dark-660: #44475a88; + --theme-palette-neutral-dark-640: #44475a; + --theme-palette-neutral-dark-620: #4b4b4b; + --theme-palette-neutral-dark-600: #4e545d88; + --theme-palette-neutral-dark-580: #535353; + --theme-palette-neutral-dark-560: #555555; + --theme-palette-neutral-dark-540: #494949; + --theme-palette-neutral-dark-520: #3a3a3a; + + --theme-palette-primary-tone-500: #60a5fa; + --theme-palette-primary-tone-450: #93c5fd; + --theme-palette-primary-tone-420: #8ec5ff; + --theme-palette-primary-tone-380: #74c0fc; + --theme-palette-primary-tone-340: #6495b1; + --theme-palette-primary-tone-300: #6ea8ff; + --theme-palette-primary-tone-260: #4f8ffb; + --theme-palette-primary-tone-220: #0099ff; + --theme-palette-primary-tone-200: #2563eb; + --theme-palette-primary-tone-180: #2f6db7; + --theme-palette-primary-tone-160: #1f4f8f; + --theme-palette-primary-tone-140: #1565c0; + + --theme-palette-danger-tone-520: #f57170; + --theme-palette-danger-tone-500: #ef4444; + --theme-palette-danger-tone-480: #e74c3c; + --theme-palette-danger-tone-420: #dd7573; + --theme-palette-danger-tone-360: #b96665; + --theme-palette-danger-tone-surface-250: rgba(220, 70, 70, 0.25); + --theme-palette-danger-tone-surface-550: rgba(220, 70, 70, 0.55); + --theme-palette-danger-tone-border: rgba(220, 70, 70, 0.5); + + --theme-palette-success-tone-540: #3ae093; + --theme-palette-success-tone-520: #22c55e; + --theme-palette-success-tone-500: #10b981; + --theme-palette-success-tone-460: #83da91; + --theme-palette-success-tone-420: #49dc7f; + --theme-palette-success-tone-380: #2aa198; + --theme-palette-success-tone-340: #2b6140; + --theme-palette-success-tone-soft-200: rgba(34, 197, 94, 0.2); + --theme-palette-success-tone-border: rgba(34, 197, 94, 0.4); + --theme-palette-success-tone-strong: rgba(34, 197, 94, 0.72); + --theme-palette-success-tone-hover: rgb(14 169 71 / 30%); + --theme-palette-success-tone-text: rgb(110, 231, 183); + --theme-palette-success-tone-surface: #1e2d2588; + + --theme-palette-warning-tone-520: #f59e0b; + --theme-palette-warning-tone-500: #f39c12; + --theme-palette-warning-tone-460: #ffc078; + --theme-palette-warning-tone-420: #e1b842; + --theme-palette-warning-tone-surface: #39332088; + --theme-palette-warning-tone-border: #b69e5c; + + --theme-palette-info-tone-520: #49dcdc; + --theme-palette-info-tone-500: #06b6d4; + --theme-palette-info-tone-460: #0abab5; + --theme-palette-info-tone-surface: #1e252d88; + --theme-palette-info-tone-border: #2b4c61; + + --theme-palette-accent-tone-540: #ff2df1; + --theme-palette-accent-tone-520: #d070e7; + --theme-palette-accent-tone-500: #9b59b6; + --theme-palette-accent-tone-460: #c586c0; + --theme-palette-accent-tone-surface: #311a3888; + --theme-palette-accent-tone-border: #5d2f69; + --theme-palette-accent-tone-soft-surface: rgba(168, 85, 247, 0.1); + --theme-palette-accent-tone-soft-hover: rgba(168, 85, 247, 0.2); + --theme-palette-accent-tone-soft-border: rgba(168, 85, 247, 0.4); + --theme-palette-accent-tone-text: rgb(216, 180, 254); + --theme-palette-accent-tone-text-soft: rgb(233, 213, 255); + + --theme-palette-quaternary-tone-500: #6366f1; + --theme-palette-quaternary-tone-surface: #3c3f9f88; + --theme-palette-emphasis-tone-500: #f43f5e; + --theme-palette-highlight-tone-500: #f9e400; + + --theme-palette-status-tag-surface: #2b2e3688; + --theme-palette-status-tag-active-text: #49dc7f; + --theme-palette-status-tag-active-surface: #1e2d2588; + --theme-palette-status-tag-active-border: #2b6140; + --theme-palette-status-tag-alt-text: #d070e7; + --theme-palette-status-tag-alt-surface: #311a3888; + --theme-palette-status-tag-alt-border: #5d2f69; + --theme-palette-status-tag-expired-text: #efda8f; + --theme-palette-status-tag-expired-surface: #39332088; + --theme-palette-status-tag-expired-border: #b69e5c; + --theme-palette-status-tag-banned-text: #dd7573; + --theme-palette-status-tag-banned-surface: #4c343488; + --theme-palette-status-tag-banned-border: #755252; + + --theme-palette-status-live-surface: #075b4188; + --theme-palette-status-video-surface: #035b6e88; + --theme-palette-status-series-surface: #3c3f9f88; + + --theme-palette-shadow-popup: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.08); + --theme-palette-shadow-card: 0 6px 18px rgba(0, 0, 0, 0.24); + --theme-palette-shadow-scrollbar-track: inset 0 0 6px rgba(0, 0, 0, 0.3); + --theme-palette-shadow-tab-header: 0 2px 4px rgba(0, 0, 0, 0.05); + --theme-palette-shadow-field-code: 0 4px 6px rgba(0, 0, 0, 0.1); + --theme-palette-shadow-toggle: 0 2px 6px rgba(0, 0, 0, 0.8); + --theme-palette-shadow-toast: 0 2px 5px rgba(0, 0, 0, 0.3); + --theme-palette-shadow-source-block: 0 1px 2px rgba(0, 0, 0, 0.2); + --theme-palette-shadow-glass: rgba(0, 0, 0, 0.1); + + --theme-palette-menu-icon-update: #a3d8ff; + --theme-palette-menu-icon-user: #0abab5; + --theme-palette-menu-icon-api-server: #ff9d23; + --theme-palette-menu-icon-main-config: #a855f7; + --theme-palette-menu-icon-status: #f9e400; + + --theme-palette-code-identifier: #569cd6; + --theme-palette-code-var-access: #9cdcfe; + --theme-palette-code-field: #bb8953; + --theme-palette-code-property: #9a652f; + --theme-palette-code-literal: #65a181; + --theme-palette-code-num: #6796ba; + --theme-palette-code-builtin: #fac46c; + --theme-palette-code-reserved: #e98863; + --theme-palette-code-regex: #bb8953; + --theme-palette-code-enum: #65a181; + --theme-palette-code-range: #6796ba; + --theme-palette-code-op: #569cd6; + --theme-palette-code-compare-text: #ffffff; + --theme-palette-code-bracket-1: #569cd6; + --theme-palette-code-bracket-2: #c586c0; + --theme-palette-code-bracket-3: #b5cea8; + --theme-palette-code-any-match: #fa5f2d; + + --theme-palette-epg-program-surface: #1a222b; + --theme-palette-epg-program-active-surface: #263140; + --theme-palette-epg-program-text: #ffffff; + --theme-palette-epg-program-time: #707f99; + --theme-palette-epg-program-time-active: #778295; + --theme-palette-epg-past-surface: rgba(0, 0, 0, 0.1); + --theme-palette-epg-now-line: #ef4444; + + --theme-palette-graph-grid-1: #e0e0e030; + --theme-palette-graph-grid-2: #c0c0c030; + + --theme-palette-particle-1: #6ea8ff; + --theme-palette-particle-2: #273240; + --theme-palette-particle-alpha-boost: 1; + + --theme-palette-chip-container-text: #74c0fc; + --theme-palette-chip-container-surface: #263645; + --theme-palette-chip-video-text: #83da91; + --theme-palette-chip-video-surface: #2b3e30; + --theme-palette-chip-resolution-text: #e09393; + --theme-palette-chip-resolution-surface: #462d2f; + --theme-palette-chip-fps-text: #ffc078; + --theme-palette-chip-fps-surface: #473426; + --theme-palette-chip-audio-text: #faa2c1; + --theme-palette-chip-audio-surface: #432c36; + --theme-palette-chip-audio-channels-text: #ea97b5; + + --theme-palette-graph-input-xtream: #1565c0; + --theme-palette-graph-input-m3u: #409aff; + --theme-palette-graph-input-library: #64b5f6; + --theme-palette-graph-target: #2aa198; + --theme-palette-graph-output: #f39c12; + --theme-palette-graph-output-xtream: #0099ff; + --theme-palette-graph-output-m3u: #8bc34a; + --theme-palette-graph-output-hdhomerun: #8b5cf6; + --theme-palette-graph-output-strm: #e74c3c; + --theme-palette-graph-port: #587293; + --theme-palette-graph-port-border: #ffffff; + --theme-palette-graph-port-hover: #f59e0b; + + --theme-palette-login-logo: color-mix(in srgb, #0b1220 80%, black 10%); + --theme-palette-series-title: #ffffff; + --theme-palette-series-backdrop-overlay: linear-gradient( + to right, + rgba(0, 0, 0, 1) 30%, + rgba(0, 0, 0, 0.85) 50%, + rgba(0, 0, 0, 0.75) 60%, + rgba(0, 0, 0, 0.35) 70%, + rgba(0, 0, 0, 0) 85% + ); +} diff --git a/frontend/scss/themes/_theme-dopamine.scss b/frontend/scss/themes/_theme-dopamine.scss new file mode 100644 index 000000000..21142c48b --- /dev/null +++ b/frontend/scss/themes/_theme-dopamine.scss @@ -0,0 +1,267 @@ +body[data-theme="dopamine"] { + --theme-palette-page: #120818; + --theme-palette-page-alt: #1d1024; + --theme-palette-neutral-surface-980: rgba(20, 18, 20, 0.92); + --theme-palette-neutral-surface-960: rgba(28, 25, 30, 0.96); + --theme-palette-neutral-surface-940: rgba(39, 36, 41, 0.82); + --theme-palette-neutral-surface-920: rgba(39, 36, 41, 0.72); + --theme-palette-neutral-surface-900: rgba(48, 44, 51, 0.68); + --theme-palette-neutral-surface-880: rgba(57, 53, 60, 0.6); + --theme-palette-neutral-surface-840: rgba(71, 66, 75, 0.48); + --theme-palette-neutral-surface-820: rgba(94, 88, 99, 0.32); + --theme-palette-neutral-surface-800: rgba(166, 226, 46, 0.18); + --theme-palette-neutral-surface-780: rgba(166, 226, 46, 0.1); + --theme-palette-neutral-surface-760: rgba(253, 151, 31, 0.14); + --theme-palette-neutral-surface-740: rgba(253, 151, 31, 0.08); + --theme-palette-neutral-surface-720: rgba(255, 255, 255, 0.16); + --theme-palette-neutral-surface-700: rgba(255, 255, 255, 0); + --theme-palette-neutral-surface-680: rgba(0, 0, 0, 0.18); + --theme-palette-neutral-surface-660: rgba(0, 0, 0, 0.56); + --theme-palette-neutral-surface-640: rgba(0, 0, 0, 0.34); + --theme-palette-neutral-surface-620: #3b354088; + --theme-palette-neutral-surface-600: #2f2a3388; + --theme-palette-neutral-surface-580: #57505d88; + --theme-palette-neutral-surface-560: #3a353d; + --theme-palette-neutral-surface-540: #27222988; + --theme-palette-neutral-surface-520: #1d1024; + --theme-palette-neutral-surface-code: #171517cc; + --theme-palette-neutral-surface-code-solid: #171517; + --theme-palette-neutral-surface-code-compare: #2a113599; + --theme-palette-state-surface-option-active: #c6ff0088; + + --theme-palette-accent-border-500: rgba(102, 217, 239, 0.22); + --theme-palette-accent-border-460: rgba(102, 217, 239, 0.42); + --theme-palette-accent-border-420: rgba(102, 217, 239, 0.82); + --theme-palette-accent-border-380: rgba(102, 217, 239, 0.92); + --theme-palette-accent-border-340: rgba(102, 217, 239, 0.3); + --theme-palette-neutral-border-560: #5c5562; + --theme-palette-neutral-border-520: #4a434f; + --theme-palette-neutral-border-500: #6a6271; + --theme-palette-neutral-border-460: #39333d; + --theme-palette-neutral-border-420: rgba(255, 255, 255, 0.14); + --theme-palette-neutral-border-380: rgba(102, 217, 239, 0.88); + + --theme-palette-neutral-text-900: #fffdf7; + --theme-palette-neutral-text-760: #e6dbcf; + --theme-palette-neutral-text-700: #cfc6bb; + --theme-palette-neutral-text-620: #b6ada3; + --theme-palette-neutral-text-580: #9d958d; + --theme-palette-neutral-text-560: #b8b1aa; + --theme-palette-neutral-text-500: #8d8680; + --theme-palette-neutral-text-460: #6f6761; + --theme-palette-neutral-text-420: #4b4541; + + --theme-palette-text-header: #ffe600; + --theme-palette-text-label: #59fff7; + --theme-palette-text-option-active: #272822; + --theme-palette-text-menu-warn: #ff9f1c; + --theme-palette-text-menu-warn-strong: #ff2fb3; + + --theme-palette-primary: rgba(102, 217, 239, 0.34); + --theme-palette-primary-soft: rgba(102, 217, 239, 0.16); + --theme-palette-primary-hover-soft: rgba(120, 220, 232, 0.18); + --theme-palette-primary-active-soft: rgba(120, 220, 232, 0.26); + --theme-palette-primary-hover: rgba(102, 217, 239, 0.4); + --theme-palette-primary-hover-strong: rgba(120, 220, 232, 0.9); + --theme-palette-primary-border: rgba(102, 217, 239, 0.8); + --theme-palette-primary-menu-hover: rgba(120, 220, 232, 0.26); + --theme-palette-primary-tool-hover: #00d9ff88; + --theme-palette-primary-tree-hover: #00d9ff66; + --theme-palette-primary-tab-hover: #31535d88; + --theme-palette-primary-tab-active: #263f4688; + --theme-palette-primary-tab-border: #59fff7; + --theme-palette-primary-spinner: #59fff7; + + --theme-palette-secondary: rgba(255, 97, 136, 0.64); + --theme-palette-secondary-soft: rgba(255, 97, 136, 0.24); + --theme-palette-secondary-hover: rgba(255, 97, 136, 0.46); + --theme-palette-secondary-border: rgba(255, 97, 136, 0.56); + + --theme-palette-neutral-dark-950: #141214; + --theme-palette-neutral-dark-900: #120818; + --theme-palette-neutral-dark-850: #1d1024; + --theme-palette-neutral-dark-800: #171517; + --theme-palette-neutral-dark-780: #2a113599; + --theme-palette-neutral-dark-760: #27222988; + --theme-palette-neutral-dark-740: #2f2a3388; + --theme-palette-neutral-dark-720: #343039; + --theme-palette-neutral-dark-700: #3a353d; + --theme-palette-neutral-dark-680: #46414a; + --theme-palette-neutral-dark-660: #3b354088; + --theme-palette-neutral-dark-640: #4a434f; + --theme-palette-neutral-dark-620: #57505d; + --theme-palette-neutral-dark-600: #57505d88; + --theme-palette-neutral-dark-580: #5c5562; + --theme-palette-neutral-dark-560: #6a6271; + --theme-palette-neutral-dark-540: #4b4541; + --theme-palette-neutral-dark-520: #39333d; + + --theme-palette-primary-tone-500: #59fff7; + --theme-palette-primary-tone-450: #8be9fd; + --theme-palette-primary-tone-420: #00f5ff; + --theme-palette-primary-tone-380: #00d9ff; + --theme-palette-primary-tone-340: #4aa5b3; + --theme-palette-primary-tone-300: #5ac8c8; + --theme-palette-primary-tone-260: #2bbbd8; + --theme-palette-primary-tone-220: #c6ff00; + --theme-palette-primary-tone-200: #2d8c9f; + --theme-palette-primary-tone-180: #31535d; + --theme-palette-primary-tone-160: #263f46; + --theme-palette-primary-tone-140: #1e7488; + + --theme-palette-danger-tone-520: #ff2fb3; + --theme-palette-danger-tone-500: #ff5c7a; + --theme-palette-danger-tone-480: #f7768e; + --theme-palette-danger-tone-420: #ff9cae; + --theme-palette-danger-tone-360: #c87b88; + --theme-palette-danger-tone-surface-250: rgba(255, 97, 136, 0.22); + --theme-palette-danger-tone-surface-550: rgba(255, 97, 136, 0.42); + --theme-palette-danger-tone-border: rgba(255, 97, 136, 0.5); + + --theme-palette-success-tone-540: #c6ff00; + --theme-palette-success-tone-520: #c6ff00; + --theme-palette-success-tone-500: #99ff4d; + --theme-palette-success-tone-460: #b9f27c; + --theme-palette-success-tone-420: #9de24c; + --theme-palette-success-tone-380: #59fff7; + --theme-palette-success-tone-340: #618c3d; + --theme-palette-success-tone-soft-200: rgba(166, 226, 46, 0.18); + --theme-palette-success-tone-border: rgba(166, 226, 46, 0.36); + --theme-palette-success-tone-strong: rgba(166, 226, 46, 0.72); + --theme-palette-success-tone-hover: rgba(166, 226, 46, 0.28); + --theme-palette-success-tone-text: #d6f58c; + --theme-palette-success-tone-surface: #5f7a0088; + + --theme-palette-warning-tone-520: #ffe600; + --theme-palette-warning-tone-500: #ff9f1c; + --theme-palette-warning-tone-460: #ffd98e; + --theme-palette-warning-tone-420: #ffc15e; + --theme-palette-warning-tone-surface: #4f392088; + --theme-palette-warning-tone-border: #b88746; + + --theme-palette-info-tone-520: #59fff7; + --theme-palette-info-tone-500: #00f5ff; + --theme-palette-info-tone-460: #00d9ff; + --theme-palette-info-tone-surface: #1f3d4588; + --theme-palette-info-tone-border: #467d89; + + --theme-palette-accent-tone-540: #ff66d6; + --theme-palette-accent-tone-520: #d38bff; + --theme-palette-accent-tone-500: #8b5cf6; + --theme-palette-accent-tone-460: #d6b4ff; + --theme-palette-accent-tone-surface: #3f284888; + --theme-palette-accent-tone-border: #8a63d2; + --theme-palette-accent-tone-soft-surface: rgba(171, 157, 242, 0.1); + --theme-palette-accent-tone-soft-hover: rgba(171, 157, 242, 0.2); + --theme-palette-accent-tone-soft-border: rgba(171, 157, 242, 0.34); + --theme-palette-accent-tone-text: #e1c8ff; + --theme-palette-accent-tone-text-soft: #f0defe; + + --theme-palette-quaternary-tone-500: #8b5cf6; + --theme-palette-quaternary-tone-surface: #372f5688; + --theme-palette-emphasis-tone-500: #ff2fb3; + --theme-palette-highlight-tone-500: #ffe600; + + --theme-palette-status-tag-surface: #312c3388; + --theme-palette-status-tag-active-text: #c6ff00; + --theme-palette-status-tag-active-surface: #5f7a0088; + --theme-palette-status-tag-active-border: #618c3d; + --theme-palette-status-tag-alt-text: #d38bff; + --theme-palette-status-tag-alt-surface: #3f284888; + --theme-palette-status-tag-alt-border: #8a63d2; + --theme-palette-status-tag-expired-text: #ffe600; + --theme-palette-status-tag-expired-surface: #4f392088; + --theme-palette-status-tag-expired-border: #b88746; + --theme-palette-status-tag-banned-text: #ff9cae; + --theme-palette-status-tag-banned-surface: #4a073088; + --theme-palette-status-tag-banned-border: #9f4c5d; + + --theme-palette-status-live-surface: #5f7a0088; + --theme-palette-status-video-surface: #1f3d4588; + --theme-palette-status-series-surface: #372f5688; + + --theme-palette-shadow-popup: 0 10px 28px rgba(0, 0, 0, 0.46), inset 0 0 10px rgba(255, 216, 102, 0.08); + --theme-palette-shadow-card: 0 8px 20px rgba(0, 0, 0, 0.26); + --theme-palette-shadow-scrollbar-track: inset 0 0 6px rgba(0, 0, 0, 0.28); + --theme-palette-shadow-tab-header: 0 2px 4px rgba(0, 0, 0, 0.08); + --theme-palette-shadow-field-code: 0 4px 6px rgba(0, 0, 0, 0.16); + --theme-palette-shadow-toggle: 0 2px 6px rgba(0, 0, 0, 0.78); + --theme-palette-shadow-toast: 0 2px 5px rgba(0, 0, 0, 0.3); + --theme-palette-shadow-source-block: 0 1px 2px rgba(0, 0, 0, 0.22); + --theme-palette-shadow-glass: rgba(0, 0, 0, 0.12); + + --theme-palette-menu-icon-update: #ffe600; + --theme-palette-menu-icon-user: #00f5ff; + --theme-palette-menu-icon-api-server: #ff9f1c; + --theme-palette-menu-icon-main-config: #ff66d6; + --theme-palette-menu-icon-status: #c6ff00; + + --theme-palette-code-identifier: #00f5ff; + --theme-palette-code-var-access: #a1efe4; + --theme-palette-code-field: #ffe600; + --theme-palette-code-property: #ff9f1c; + --theme-palette-code-literal: #c6ff00; + --theme-palette-code-num: #ae81ff; + --theme-palette-code-builtin: #ffe600; + --theme-palette-code-reserved: #ff006e; + --theme-palette-code-regex: #fff36d; + --theme-palette-code-enum: #c6ff00; + --theme-palette-code-range: #59fff7; + --theme-palette-code-op: #ff006e; + --theme-palette-code-compare-text: #fffdf7; + --theme-palette-code-bracket-1: #00f5ff; + --theme-palette-code-bracket-2: #ffb000; + --theme-palette-code-bracket-3: #c6ff00; + --theme-palette-code-any-match: #ff2fb3; + + --theme-palette-epg-program-surface: #211d24; + --theme-palette-epg-program-active-surface: #2f2a33; + --theme-palette-epg-program-text: #fffdf7; + --theme-palette-epg-program-time: #9d958d; + --theme-palette-epg-program-time-active: #ffe600; + --theme-palette-epg-past-surface: rgba(0, 0, 0, 0.12); + --theme-palette-epg-now-line: #ff2fb3; + + --theme-palette-graph-grid-1: #fffdf730; + --theme-palette-graph-grid-2: #ffe60024; + + --theme-palette-particle-1: #ffe600; + --theme-palette-particle-2: #2a1135; + --theme-palette-particle-alpha-boost: 1.18; + + --theme-palette-chip-container-text: #59fff7; + --theme-palette-chip-container-surface: #10283f; + --theme-palette-chip-video-text: #c6ff00; + --theme-palette-chip-video-surface: #355300; + --theme-palette-chip-resolution-text: #ff9cae; + --theme-palette-chip-resolution-surface: #4d232d; + --theme-palette-chip-fps-text: #ffe600; + --theme-palette-chip-fps-surface: #4b3821; + --theme-palette-chip-audio-text: #ff66d6; + --theme-palette-chip-audio-surface: #4d0d4d; + --theme-palette-chip-audio-channels-text: #f0defe; + + --theme-palette-graph-input-xtream: #00f5ff; + --theme-palette-graph-input-m3u: #59fff7; + --theme-palette-graph-input-library: #8b5cf6; + --theme-palette-graph-target: #c6ff00; + --theme-palette-graph-output: #ff9f1c; + --theme-palette-graph-output-xtream: #00d9ff; + --theme-palette-graph-output-m3u: #99ff4d; + --theme-palette-graph-output-hdhomerun: #8b5cf6; + --theme-palette-graph-output-strm: #ff2fb3; + --theme-palette-graph-port: #8a5cf6; + --theme-palette-graph-port-border: #ffffff; + --theme-palette-graph-port-hover: #ffe600; + + --theme-palette-login-logo: color-mix(in srgb, #120818 80%, #ffe600 10%); + --theme-palette-series-title: #ffffff; + --theme-palette-series-backdrop-overlay: linear-gradient( + to right, + rgba(25, 24, 26, 1) 28%, + rgba(25, 24, 26, 0.92) 48%, + rgba(25, 24, 26, 0.78) 60%, + rgba(25, 24, 26, 0.42) 72%, + rgba(25, 24, 26, 0) 86% + ); +} diff --git a/frontend/scss/themes/_theme-dracula.scss b/frontend/scss/themes/_theme-dracula.scss new file mode 100644 index 000000000..f81f85968 --- /dev/null +++ b/frontend/scss/themes/_theme-dracula.scss @@ -0,0 +1,267 @@ +body[data-theme="dracula"] { + --theme-palette-page: #282a36; + --theme-palette-page-alt: #232530; + --theme-palette-neutral-surface-980: rgba(20, 18, 20, 0.92); + --theme-palette-neutral-surface-960: rgba(28, 25, 30, 0.96); + --theme-palette-neutral-surface-940: rgba(39, 36, 41, 0.82); + --theme-palette-neutral-surface-920: rgba(39, 36, 41, 0.72); + --theme-palette-neutral-surface-900: rgba(48, 44, 51, 0.68); + --theme-palette-neutral-surface-880: rgba(57, 53, 60, 0.6); + --theme-palette-neutral-surface-840: rgba(71, 66, 75, 0.48); + --theme-palette-neutral-surface-820: rgba(94, 88, 99, 0.32); + --theme-palette-neutral-surface-800: rgba(166, 226, 46, 0.18); + --theme-palette-neutral-surface-780: rgba(166, 226, 46, 0.1); + --theme-palette-neutral-surface-760: rgba(253, 151, 31, 0.14); + --theme-palette-neutral-surface-740: rgba(253, 151, 31, 0.08); + --theme-palette-neutral-surface-720: rgba(255, 255, 255, 0.16); + --theme-palette-neutral-surface-700: rgba(255, 255, 255, 0); + --theme-palette-neutral-surface-680: rgba(0, 0, 0, 0.18); + --theme-palette-neutral-surface-660: rgba(0, 0, 0, 0.56); + --theme-palette-neutral-surface-640: rgba(0, 0, 0, 0.34); + --theme-palette-neutral-surface-620: #5b607888; + --theme-palette-neutral-surface-600: #44475a88; + --theme-palette-neutral-surface-580: #57505d88; + --theme-palette-neutral-surface-560: #3b3f54; + --theme-palette-neutral-surface-540: #34374688; + --theme-palette-neutral-surface-520: #232530; + --theme-palette-neutral-surface-code: #1f2230cc; + --theme-palette-neutral-surface-code-solid: #1f2230; + --theme-palette-neutral-surface-code-compare: #2d314099; + --theme-palette-state-surface-option-active: #50fa7b88; + + --theme-palette-accent-border-500: rgba(102, 217, 239, 0.22); + --theme-palette-accent-border-460: rgba(102, 217, 239, 0.42); + --theme-palette-accent-border-420: rgba(102, 217, 239, 0.82); + --theme-palette-accent-border-380: rgba(102, 217, 239, 0.92); + --theme-palette-accent-border-340: rgba(102, 217, 239, 0.3); + --theme-palette-neutral-border-560: #4b5268; + --theme-palette-neutral-border-520: #44475a; + --theme-palette-neutral-border-500: #6a6271; + --theme-palette-neutral-border-460: #343746; + --theme-palette-neutral-border-420: rgba(255, 255, 255, 0.14); + --theme-palette-neutral-border-380: rgba(102, 217, 239, 0.88); + + --theme-palette-neutral-text-900: #fff2b8; + --theme-palette-neutral-text-760: #f0e0ff; + --theme-palette-neutral-text-700: #dcc5ff; + --theme-palette-neutral-text-620: #c3a7f0; + --theme-palette-neutral-text-580: #a98cd8; + --theme-palette-neutral-text-560: #ead7ff; + --theme-palette-neutral-text-500: #8d74b3; + --theme-palette-neutral-text-460: #76609c; + --theme-palette-neutral-text-420: #44475a; + + --theme-palette-text-header: #fff0a6; + --theme-palette-text-label: #d7b6ff; + --theme-palette-text-option-active: #272822; + --theme-palette-text-menu-warn: #ffb86c; + --theme-palette-text-menu-warn-strong: #ff79c6; + + --theme-palette-primary: rgba(102, 217, 239, 0.34); + --theme-palette-primary-soft: rgba(102, 217, 239, 0.16); + --theme-palette-primary-hover-soft: rgba(120, 220, 232, 0.18); + --theme-palette-primary-active-soft: rgba(120, 220, 232, 0.26); + --theme-palette-primary-hover: rgba(102, 217, 239, 0.4); + --theme-palette-primary-hover-strong: rgba(120, 220, 232, 0.9); + --theme-palette-primary-border: rgba(102, 217, 239, 0.8); + --theme-palette-primary-menu-hover: rgba(120, 220, 232, 0.26); + --theme-palette-primary-tool-hover: #8be9fd88; + --theme-palette-primary-tree-hover: #8be9fd66; + --theme-palette-primary-tab-hover: #31535d88; + --theme-palette-primary-tab-active: #263f4688; + --theme-palette-primary-tab-border: #8be9fd; + --theme-palette-primary-spinner: #8be9fd; + + --theme-palette-secondary: rgba(255, 97, 136, 0.64); + --theme-palette-secondary-soft: rgba(255, 97, 136, 0.24); + --theme-palette-secondary-hover: rgba(255, 97, 136, 0.46); + --theme-palette-secondary-border: rgba(255, 97, 136, 0.56); + + --theme-palette-neutral-dark-950: #141214; + --theme-palette-neutral-dark-900: #282a36; + --theme-palette-neutral-dark-850: #232530; + --theme-palette-neutral-dark-800: #1f2230; + --theme-palette-neutral-dark-780: #2d314099; + --theme-palette-neutral-dark-760: #34374688; + --theme-palette-neutral-dark-740: #44475a88; + --theme-palette-neutral-dark-720: #343039; + --theme-palette-neutral-dark-700: #3b3f54; + --theme-palette-neutral-dark-680: #46414a; + --theme-palette-neutral-dark-660: #5b607888; + --theme-palette-neutral-dark-640: #44475a; + --theme-palette-neutral-dark-620: #57505d; + --theme-palette-neutral-dark-600: #57505d88; + --theme-palette-neutral-dark-580: #4b5268; + --theme-palette-neutral-dark-560: #6a6271; + --theme-palette-neutral-dark-540: #44475a; + --theme-palette-neutral-dark-520: #343746; + + --theme-palette-primary-tone-500: #8be9fd; + --theme-palette-primary-tone-450: #8be9fd; + --theme-palette-primary-tone-420: #8be9fd; + --theme-palette-primary-tone-380: #8be9fd; + --theme-palette-primary-tone-340: #4aa5b3; + --theme-palette-primary-tone-300: #5ac8c8; + --theme-palette-primary-tone-260: #2bbbd8; + --theme-palette-primary-tone-220: #50fa7b; + --theme-palette-primary-tone-200: #2d8c9f; + --theme-palette-primary-tone-180: #31535d; + --theme-palette-primary-tone-160: #263f46; + --theme-palette-primary-tone-140: #1e7488; + + --theme-palette-danger-tone-520: #ff6e6e; + --theme-palette-danger-tone-500: #ff5555; + --theme-palette-danger-tone-480: #ff6b6b; + --theme-palette-danger-tone-420: #ff8a8a; + --theme-palette-danger-tone-360: #d66a6a; + --theme-palette-danger-tone-surface-250: rgba(255, 85, 85, 0.24); + --theme-palette-danger-tone-surface-550: rgba(255, 85, 85, 0.44); + --theme-palette-danger-tone-border: rgba(255, 85, 85, 0.54); + + --theme-palette-success-tone-540: #50fa7b; + --theme-palette-success-tone-520: #50fa7b; + --theme-palette-success-tone-500: #50fa7b; + --theme-palette-success-tone-460: #7afca3; + --theme-palette-success-tone-420: #67ff93; + --theme-palette-success-tone-380: #8be9fd; + --theme-palette-success-tone-340: #618c3d; + --theme-palette-success-tone-soft-200: rgba(80, 250, 123, 0.22); + --theme-palette-success-tone-border: rgba(80, 250, 123, 0.42); + --theme-palette-success-tone-strong: rgba(80, 250, 123, 0.84); + --theme-palette-success-tone-hover: rgba(80, 250, 123, 0.32); + --theme-palette-success-tone-text: #a4ffbe; + --theme-palette-success-tone-surface: #20453099; + + --theme-palette-warning-tone-520: #f1fa8c; + --theme-palette-warning-tone-500: #f1fa8c; + --theme-palette-warning-tone-460: #fff0a6; + --theme-palette-warning-tone-420: #ffe97a; + --theme-palette-warning-tone-surface: #4b492688; + --theme-palette-warning-tone-border: #c9d36f; + + --theme-palette-info-tone-520: #8be9fd; + --theme-palette-info-tone-500: #8be9fd; + --theme-palette-info-tone-460: #8be9fd; + --theme-palette-info-tone-surface: #1f3d4588; + --theme-palette-info-tone-border: #467d89; + + --theme-palette-accent-tone-540: #ff79c6; + --theme-palette-accent-tone-520: #bd93f9; + --theme-palette-accent-tone-500: #bd93f9; + --theme-palette-accent-tone-460: #d6b4ff; + --theme-palette-accent-tone-surface: #3f284888; + --theme-palette-accent-tone-border: #8a63d2; + --theme-palette-accent-tone-soft-surface: rgba(171, 157, 242, 0.1); + --theme-palette-accent-tone-soft-hover: rgba(171, 157, 242, 0.2); + --theme-palette-accent-tone-soft-border: rgba(171, 157, 242, 0.34); + --theme-palette-accent-tone-text: #e1c8ff; + --theme-palette-accent-tone-text-soft: #f5eaff; + + --theme-palette-quaternary-tone-500: #bd93f9; + --theme-palette-quaternary-tone-surface: #372f5688; + --theme-palette-emphasis-tone-500: #ff79c6; + --theme-palette-highlight-tone-500: #f1fa8c; + + --theme-palette-status-tag-surface: #312c3388; + --theme-palette-status-tag-active-text: #50fa7b; + --theme-palette-status-tag-active-surface: #24412f88; + --theme-palette-status-tag-active-border: #50fa7b; + --theme-palette-status-tag-alt-text: #bd93f9; + --theme-palette-status-tag-alt-surface: #3f284888; + --theme-palette-status-tag-alt-border: #8a63d2; + --theme-palette-status-tag-expired-text: #f1fa8c; + --theme-palette-status-tag-expired-surface: #4f392088; + --theme-palette-status-tag-expired-border: #c9d36f; + --theme-palette-status-tag-banned-text: #ff8a8a; + --theme-palette-status-tag-banned-surface: #4a222288; + --theme-palette-status-tag-banned-border: #ff5555; + + --theme-palette-status-live-surface: #24412f88; + --theme-palette-status-video-surface: #1f3d4588; + --theme-palette-status-series-surface: #372f5688; + + --theme-palette-shadow-popup: 0 10px 28px rgba(0, 0, 0, 0.46), inset 0 0 10px rgba(255, 216, 102, 0.08); + --theme-palette-shadow-card: 0 8px 20px rgba(0, 0, 0, 0.26); + --theme-palette-shadow-scrollbar-track: inset 0 0 6px rgba(0, 0, 0, 0.28); + --theme-palette-shadow-tab-header: 0 2px 4px rgba(0, 0, 0, 0.08); + --theme-palette-shadow-field-code: 0 4px 6px rgba(0, 0, 0, 0.16); + --theme-palette-shadow-toggle: 0 2px 6px rgba(0, 0, 0, 0.78); + --theme-palette-shadow-toast: 0 2px 5px rgba(0, 0, 0, 0.3); + --theme-palette-shadow-source-block: 0 1px 2px rgba(0, 0, 0, 0.22); + --theme-palette-shadow-glass: rgba(0, 0, 0, 0.12); + + --theme-palette-menu-icon-update: #f1fa8c; + --theme-palette-menu-icon-user: #8be9fd; + --theme-palette-menu-icon-api-server: #f1fa8c; + --theme-palette-menu-icon-main-config: #ff79c6; + --theme-palette-menu-icon-status: #50fa7b; + + --theme-palette-code-identifier: #8be9fd; + --theme-palette-code-var-access: #c4fff9; + --theme-palette-code-field: #f1fa8c; + --theme-palette-code-property: #f1fa8c; + --theme-palette-code-literal: #50fa7b; + --theme-palette-code-num: #bd93f9; + --theme-palette-code-builtin: #f1fa8c; + --theme-palette-code-reserved: #ff5555; + --theme-palette-code-regex: #fff0a6; + --theme-palette-code-enum: #50fa7b; + --theme-palette-code-range: #8be9fd; + --theme-palette-code-op: #ff5555; + --theme-palette-code-compare-text: #f8f8f2; + --theme-palette-code-bracket-1: #8be9fd; + --theme-palette-code-bracket-2: #ffb86c; + --theme-palette-code-bracket-3: #50fa7b; + --theme-palette-code-any-match: #ff79c6; + + --theme-palette-epg-program-surface: #211d24; + --theme-palette-epg-program-active-surface: #2f2a33; + --theme-palette-epg-program-text: #f8f8f2; + --theme-palette-epg-program-time: #8b86b2; + --theme-palette-epg-program-time-active: #f1fa8c; + --theme-palette-epg-past-surface: rgba(0, 0, 0, 0.12); + --theme-palette-epg-now-line: #ff79c6; + + --theme-palette-graph-grid-1: #f8f8f230; + --theme-palette-graph-grid-2: #f1fa8c24; + + --theme-palette-particle-1: #f1fa8c; + --theme-palette-particle-2: #2d3140; + --theme-palette-particle-alpha-boost: 1.18; + + --theme-palette-chip-container-text: #8be9fd; + --theme-palette-chip-container-surface: #263145; + --theme-palette-chip-video-text: #50fa7b; + --theme-palette-chip-video-surface: #253d2f; + --theme-palette-chip-resolution-text: #ff8a8a; + --theme-palette-chip-resolution-surface: #4d232d; + --theme-palette-chip-fps-text: #fff0a6; + --theme-palette-chip-fps-surface: #4b3821; + --theme-palette-chip-audio-text: #ff79c6; + --theme-palette-chip-audio-surface: #4a2958; + --theme-palette-chip-audio-channels-text: #f5eaff; + + --theme-palette-graph-input-xtream: #8be9fd; + --theme-palette-graph-input-m3u: #8be9fd; + --theme-palette-graph-input-library: #bd93f9; + --theme-palette-graph-target: #50fa7b; + --theme-palette-graph-output: #ffb86c; + --theme-palette-graph-output-xtream: #8be9fd; + --theme-palette-graph-output-m3u: #50fa7b; + --theme-palette-graph-output-hdhomerun: #bd93f9; + --theme-palette-graph-output-strm: #ff79c6; + --theme-palette-graph-port: #7b79a1; + --theme-palette-graph-port-border: #ffffff; + --theme-palette-graph-port-hover: #f1fa8c; + + --theme-palette-login-logo: color-mix(in srgb, #282a36 80%, #f1fa8c 10%); + --theme-palette-series-title: #ffffff; + --theme-palette-series-backdrop-overlay: linear-gradient( + to right, + rgba(25, 24, 26, 1) 28%, + rgba(25, 24, 26, 0.92) 48%, + rgba(25, 24, 26, 0.78) 60%, + rgba(25, 24, 26, 0.42) 72%, + rgba(25, 24, 26, 0) 86% + ); +} diff --git a/frontend/scss/themes/_theme-graperoot-dark.scss b/frontend/scss/themes/_theme-graperoot-dark.scss new file mode 100644 index 000000000..10200d092 --- /dev/null +++ b/frontend/scss/themes/_theme-graperoot-dark.scss @@ -0,0 +1,267 @@ +body[data-theme="graperoot-dark"] { + --theme-palette-page: #0b0a12; + --theme-palette-page-alt: #08070f; + --theme-palette-neutral-surface-980: rgba(10, 8, 18, 0.94); + --theme-palette-neutral-surface-960: rgba(16, 13, 28, 0.97); + --theme-palette-neutral-surface-940: rgba(22, 18, 38, 0.86); + --theme-palette-neutral-surface-920: rgba(27, 22, 46, 0.74); + --theme-palette-neutral-surface-900: rgba(31, 26, 53, 0.68); + --theme-palette-neutral-surface-880: rgba(36, 30, 61, 0.62); + --theme-palette-neutral-surface-840: rgba(168, 85, 247, 0.1); + --theme-palette-neutral-surface-820: rgba(88, 53, 125, 0.34); + --theme-palette-neutral-surface-800: rgba(216, 180, 254, 0.16); + --theme-palette-neutral-surface-780: rgba(216, 180, 254, 0.08); + --theme-palette-neutral-surface-760: rgba(255, 255, 255, 0.08); + --theme-palette-neutral-surface-740: rgba(255, 255, 255, 0.05); + --theme-palette-neutral-surface-720: rgba(255, 255, 255, 0.12); + --theme-palette-neutral-surface-700: rgba(255, 255, 255, 0); + --theme-palette-neutral-surface-680: rgba(0, 0, 0, 0.18); + --theme-palette-neutral-surface-660: rgba(0, 0, 0, 0.58); + --theme-palette-neutral-surface-640: rgba(0, 0, 0, 0.34); + --theme-palette-neutral-surface-620: #4c3a6a88; + --theme-palette-neutral-surface-600: #1d182a88; + --theme-palette-neutral-surface-580: #66538088; + --theme-palette-neutral-surface-560: #2a2237; + --theme-palette-neutral-surface-540: #211b2f88; + --theme-palette-neutral-surface-520: #15111e; + --theme-palette-neutral-surface-code: #17132299; + --theme-palette-neutral-surface-code-solid: #171322; + --theme-palette-neutral-surface-code-compare: #20192d88; + --theme-palette-state-surface-option-active: #d8b4fe88; + + --theme-palette-accent-border-500: rgba(168, 85, 247, 0.24); + --theme-palette-accent-border-460: rgba(168, 85, 247, 0.4); + --theme-palette-accent-border-420: rgba(192, 132, 252, 0.74); + --theme-palette-accent-border-380: rgba(216, 180, 254, 0.86); + --theme-palette-accent-border-340: rgba(168, 85, 247, 0.22); + --theme-palette-neutral-border-560: #74618f; + --theme-palette-neutral-border-520: #4f4361; + --theme-palette-neutral-border-500: #5d5072; + --theme-palette-neutral-border-460: #392f48; + --theme-palette-neutral-border-420: rgba(255, 255, 255, 0.11); + --theme-palette-neutral-border-380: rgba(168, 85, 247, 0.76); + + --theme-palette-neutral-text-900: #f1ebfb; + --theme-palette-neutral-text-760: #e6dbf7; + --theme-palette-neutral-text-700: #cab8df; + --theme-palette-neutral-text-620: #b39bcd; + --theme-palette-neutral-text-580: #947fb0; + --theme-palette-neutral-text-560: #d8c9ea; + --theme-palette-neutral-text-500: #ad98c2; + --theme-palette-neutral-text-460: #7f6f96; + --theme-palette-neutral-text-420: #534b61; + + --theme-palette-text-header: #e9d5ff; + --theme-palette-text-label: rgb(216 180 254); + --theme-palette-text-option-active: #000000; + --theme-palette-text-menu-warn: #d2a1d8; + --theme-palette-text-menu-warn-strong: #ebbbef; + + --theme-palette-primary: rgba(168, 85, 247, 0.28); + --theme-palette-primary-soft: rgba(168, 85, 247, 0.1); + --theme-palette-primary-hover-soft: rgba(192, 132, 252, 0.14); + --theme-palette-primary-active-soft: rgba(192, 132, 252, 0.22); + --theme-palette-primary-hover: rgba(168, 85, 247, 0.34); + --theme-palette-primary-hover-strong: rgba(192, 132, 252, 0.76); + --theme-palette-primary-border: rgba(168, 85, 247, 0.4); + --theme-palette-primary-menu-hover: rgba(168, 85, 247, 0.18); + --theme-palette-primary-tool-hover: #8b5cf670; + --theme-palette-primary-tree-hover: #8b5cf655; + --theme-palette-primary-tab-hover: #5f3f8f80; + --theme-palette-primary-tab-active: #4a317088; + --theme-palette-primary-tab-border: #a855f7; + --theme-palette-primary-spinner: #c084fc; + + --theme-palette-secondary: rgba(216, 180, 254, 0.4); + --theme-palette-secondary-soft: rgba(216, 180, 254, 0.16); + --theme-palette-secondary-hover: rgba(216, 180, 254, 0.3); + --theme-palette-secondary-border: rgba(216, 180, 254, 0.34); + + --theme-palette-neutral-dark-950: #08070f; + --theme-palette-neutral-dark-900: #0b0a12; + --theme-palette-neutral-dark-850: #15111e; + --theme-palette-neutral-dark-800: #171322; + --theme-palette-neutral-dark-780: #20192d88; + --theme-palette-neutral-dark-760: #211b2f88; + --theme-palette-neutral-dark-740: #1d182a88; + --theme-palette-neutral-dark-720: #2b233d; + --theme-palette-neutral-dark-700: #342b48; + --theme-palette-neutral-dark-680: #403457; + --theme-palette-neutral-dark-660: #4c3a6a88; + --theme-palette-neutral-dark-640: #4f4361; + --theme-palette-neutral-dark-620: #2a2237; + --theme-palette-neutral-dark-600: #66538088; + --theme-palette-neutral-dark-580: #74618f; + --theme-palette-neutral-dark-560: #8a76a3; + --theme-palette-neutral-dark-540: #534b61; + --theme-palette-neutral-dark-520: #392f48; + + --theme-palette-primary-tone-500: #c084fc; + --theme-palette-primary-tone-450: #e9d5ff; + --theme-palette-primary-tone-420: rgb(216 180 254); + --theme-palette-primary-tone-380: #d8b4fe; + --theme-palette-primary-tone-340: #b996d7; + --theme-palette-primary-tone-300: #c89cfb; + --theme-palette-primary-tone-260: #a855f7; + --theme-palette-primary-tone-220: #9333ea; + --theme-palette-primary-tone-200: #8b5cf6; + --theme-palette-primary-tone-180: #7c3aed; + --theme-palette-primary-tone-160: #6d28d9; + --theme-palette-primary-tone-140: #581c87; + + --theme-palette-danger-tone-520: #fb7185; + --theme-palette-danger-tone-500: #f43f5e; + --theme-palette-danger-tone-480: #ef476f; + --theme-palette-danger-tone-420: #f08ea0; + --theme-palette-danger-tone-360: #b96374; + --theme-palette-danger-tone-surface-250: rgba(244, 63, 94, 0.2); + --theme-palette-danger-tone-surface-550: rgba(244, 63, 94, 0.4); + --theme-palette-danger-tone-border: rgba(244, 63, 94, 0.38); + + --theme-palette-success-tone-540: #d8b4fe; + --theme-palette-success-tone-520: #c084fc; + --theme-palette-success-tone-500: #a855f7; + --theme-palette-success-tone-460: #e9d5ff; + --theme-palette-success-tone-420: rgb(216 180 254); + --theme-palette-success-tone-380: #c084fc; + --theme-palette-success-tone-340: #4d3263; + --theme-palette-success-tone-soft-200: rgba(168, 85, 247, 0.2); + --theme-palette-success-tone-border: rgba(168, 85, 247, 0.34); + --theme-palette-success-tone-strong: rgba(168, 85, 247, 0.68); + --theme-palette-success-tone-hover: rgb(168 85 247 / 28%); + --theme-palette-success-tone-text: rgb(233, 213, 255); + --theme-palette-success-tone-surface: #2f1d4288; + + --theme-palette-warning-tone-520: #facc15; + --theme-palette-warning-tone-500: #eab308; + --theme-palette-warning-tone-460: #fde68a; + --theme-palette-warning-tone-420: #f4d35e; + --theme-palette-warning-tone-surface: #43391588; + --theme-palette-warning-tone-border: #baa24f; + + --theme-palette-info-tone-520: #93c5fd; + --theme-palette-info-tone-500: #60a5fa; + --theme-palette-info-tone-460: #bfdbfe; + --theme-palette-info-tone-surface: #1f2f4b88; + --theme-palette-info-tone-border: #3b82f6; + + --theme-palette-accent-tone-540: #e9d5ff; + --theme-palette-accent-tone-520: #d8b4fe; + --theme-palette-accent-tone-500: rgb(216 180 254); + --theme-palette-accent-tone-460: #f3e8ff; + --theme-palette-accent-tone-surface: rgba(168, 85, 247, 0.1); + --theme-palette-accent-tone-border: rgba(168, 85, 247, 0.4); + --theme-palette-accent-tone-soft-surface: rgba(168, 85, 247, 0.1); + --theme-palette-accent-tone-soft-hover: rgba(168, 85, 247, 0.2); + --theme-palette-accent-tone-soft-border: rgba(168, 85, 247, 0.4); + --theme-palette-accent-tone-text: rgb(216 180 254); + --theme-palette-accent-tone-text-soft: rgb(233, 213, 255); + + --theme-palette-quaternary-tone-500: #8b5cf6; + --theme-palette-quaternary-tone-surface: #4b3a7b88; + --theme-palette-emphasis-tone-500: #f43f5e; + --theme-palette-highlight-tone-500: #facc15; + + --theme-palette-status-tag-surface: #2b233d88; + --theme-palette-status-tag-active-text: rgb(216 180 254); + --theme-palette-status-tag-active-surface: rgba(168, 85, 247, 0.1); + --theme-palette-status-tag-active-border: rgba(168, 85, 247, 0.4); + --theme-palette-status-tag-alt-text: #f3e8ff; + --theme-palette-status-tag-alt-surface: #3b285288; + --theme-palette-status-tag-alt-border: #7c3aed; + --theme-palette-status-tag-expired-text: #fde68a; + --theme-palette-status-tag-expired-surface: #43391588; + --theme-palette-status-tag-expired-border: #baa24f; + --theme-palette-status-tag-banned-text: #fda4af; + --theme-palette-status-tag-banned-surface: #4c233188; + --theme-palette-status-tag-banned-border: #9d3950; + + --theme-palette-status-live-surface: #33234b88; + --theme-palette-status-video-surface: #2d204188; + --theme-palette-status-series-surface: #4b3a7b88; + + --theme-palette-shadow-popup: 0 12px 30px rgba(0, 0, 0, 0.48), inset 0 0 16px rgba(216, 180, 254, 0.05); + --theme-palette-shadow-card: 0 10px 24px rgba(0, 0, 0, 0.3); + --theme-palette-shadow-scrollbar-track: inset 0 0 6px rgba(0, 0, 0, 0.3); + --theme-palette-shadow-tab-header: 0 2px 4px rgba(0, 0, 0, 0.05); + --theme-palette-shadow-field-code: 0 4px 6px rgba(0, 0, 0, 0.1); + --theme-palette-shadow-toggle: 0 2px 6px rgba(0, 0, 0, 0.8); + --theme-palette-shadow-toast: 0 2px 5px rgba(0, 0, 0, 0.3); + --theme-palette-shadow-source-block: 0 1px 2px rgba(0, 0, 0, 0.2); + --theme-palette-shadow-glass: rgba(0, 0, 0, 0.14); + + --theme-palette-menu-icon-update: #e9d5ff; + --theme-palette-menu-icon-user: #c4b5fd; + --theme-palette-menu-icon-api-server: #facc15; + --theme-palette-menu-icon-main-config: #d8b4fe; + --theme-palette-menu-icon-status: rgb(216 180 254); + + --theme-palette-code-identifier: #d8b4fe; + --theme-palette-code-var-access: #f3e8ff; + --theme-palette-code-field: #f4d35e; + --theme-palette-code-property: #c89f3d; + --theme-palette-code-literal: #c4b5fd; + --theme-palette-code-num: #e9d5ff; + --theme-palette-code-builtin: #fde68a; + --theme-palette-code-reserved: #fb7185; + --theme-palette-code-regex: #f4d35e; + --theme-palette-code-enum: #c084fc; + --theme-palette-code-range: #e9d5ff; + --theme-palette-code-op: #d8b4fe; + --theme-palette-code-compare-text: #f1ebfb; + --theme-palette-code-bracket-1: #d8b4fe; + --theme-palette-code-bracket-2: #fde68a; + --theme-palette-code-bracket-3: #c4b5fd; + --theme-palette-code-any-match: #facc15; + + --theme-palette-epg-program-surface: #1b1527; + --theme-palette-epg-program-active-surface: #2a213c; + --theme-palette-epg-program-text: #f1ebfb; + --theme-palette-epg-program-time: #9381ab; + --theme-palette-epg-program-time-active: #e9d5ff; + --theme-palette-epg-past-surface: rgba(0, 0, 0, 0.16); + --theme-palette-epg-now-line: #facc15; + + --theme-palette-graph-grid-1: #e6dbf730; + --theme-palette-graph-grid-2: #a855f724; + + --theme-palette-particle-1: #c084fc; + --theme-palette-particle-2: #2a213c; + --theme-palette-particle-alpha-boost: 1.08; + + --theme-palette-chip-container-text: #e9d5ff; + --theme-palette-chip-container-surface: #2a213c; + --theme-palette-chip-video-text: #bfdbfe; + --theme-palette-chip-video-surface: #1f2f4b; + --theme-palette-chip-resolution-text: #fda4af; + --theme-palette-chip-resolution-surface: #432531; + --theme-palette-chip-fps-text: #fde68a; + --theme-palette-chip-fps-surface: #47361f; + --theme-palette-chip-audio-text: #f3e8ff; + --theme-palette-chip-audio-surface: #3b2852; + --theme-palette-chip-audio-channels-text: #faf5ff; + + --theme-palette-graph-input-xtream: #60a5fa; + --theme-palette-graph-input-m3u: #c084fc; + --theme-palette-graph-input-library: #e9d5ff; + --theme-palette-graph-target: #facc15; + --theme-palette-graph-output: #facc15; + --theme-palette-graph-output-xtream: #38bdf8; + --theme-palette-graph-output-m3u: #d8b4fe; + --theme-palette-graph-output-hdhomerun: #8b5cf6; + --theme-palette-graph-output-strm: #f43f5e; + --theme-palette-graph-port: #8f7aa8; + --theme-palette-graph-port-border: #f1ebfb; + --theme-palette-graph-port-hover: #fde68a; + + --theme-palette-login-logo: color-mix(in srgb, #0b0a12 78%, #d8b4fe 10%); + --theme-palette-series-title: #f1ebfb; + --theme-palette-series-backdrop-overlay: linear-gradient( + to right, + rgba(0, 0, 0, 1) 30%, + rgba(0, 0, 0, 0.86) 50%, + rgba(0, 0, 0, 0.74) 60%, + rgba(0, 0, 0, 0.35) 70%, + rgba(0, 0, 0, 0) 85% + ); +} diff --git a/frontend/scss/themes/_theme-mermaidcore.scss b/frontend/scss/themes/_theme-mermaidcore.scss new file mode 100644 index 000000000..ed1d3f780 --- /dev/null +++ b/frontend/scss/themes/_theme-mermaidcore.scss @@ -0,0 +1,268 @@ +body[data-theme="mermaidcore"] { + --theme-palette-page: #08161f; + --theme-palette-page-alt: #0f2433; + --theme-palette-neutral-surface-980: rgba(4, 20, 28, 0.9); + --theme-palette-neutral-surface-960: rgba(9, 33, 44, 0.96); + --theme-palette-neutral-surface-940: rgba(12, 44, 54, 0.78); + --theme-palette-neutral-surface-920: rgba(12, 44, 54, 0.68); + --theme-palette-neutral-surface-900: rgba(15, 52, 62, 0.62); + --theme-palette-neutral-surface-880: rgba(20, 66, 76, 0.56); + --theme-palette-neutral-surface-840: rgba(25, 80, 90, 0.44); + --theme-palette-neutral-surface-820: rgba(38, 103, 114, 0.28); + --theme-palette-neutral-surface-800: rgba(115, 203, 188, 0.22); + --theme-palette-neutral-surface-780: rgba(115, 203, 188, 0.12); + --theme-palette-neutral-surface-760: rgba(182, 244, 216, 0.14); + --theme-palette-neutral-surface-740: rgba(182, 244, 216, 0.08); + --theme-palette-neutral-surface-720: rgba(221, 255, 244, 0.16); + --theme-palette-neutral-surface-700: rgba(255, 255, 255, 0); + --theme-palette-neutral-surface-680: rgba(0, 0, 0, 0.2); + --theme-palette-neutral-surface-660: rgba(0, 0, 0, 0.56); + --theme-palette-neutral-surface-640: rgba(0, 0, 0, 0.34); + --theme-palette-neutral-surface-620: #21505b88; + --theme-palette-neutral-surface-600: #17394388; + --theme-palette-neutral-surface-580: #3e707788; + --theme-palette-neutral-surface-560: #20454b; + --theme-palette-neutral-surface-540: #10323c88; + --theme-palette-neutral-surface-520: #0d252d; + --theme-palette-neutral-surface-code: #071d23cc; + --theme-palette-neutral-surface-code-solid: #071d23; + --theme-palette-neutral-surface-code-compare: #14343b99; + --theme-palette-state-surface-option-active: #8ef6c688; + + --theme-palette-accent-border-500: rgba(94, 234, 212, 0.26); + --theme-palette-accent-border-460: rgba(94, 234, 212, 0.44); + --theme-palette-accent-border-420: rgba(45, 212, 191, 0.82); + --theme-palette-accent-border-380: rgba(94, 234, 212, 0.9); + --theme-palette-accent-border-340: rgba(94, 234, 212, 0.3); + --theme-palette-neutral-border-560: #3b6168; + --theme-palette-neutral-border-520: #2f565d; + --theme-palette-neutral-border-500: #477178; + --theme-palette-neutral-border-460: #21474e; + --theme-palette-neutral-border-420: rgba(226, 255, 247, 0.18); + --theme-palette-neutral-border-380: rgba(56, 189, 248, 0.9); + + --theme-palette-neutral-text-900: #f7fbff; + --theme-palette-neutral-text-760: #d3f7ef; + --theme-palette-neutral-text-700: #afdbd3; + --theme-palette-neutral-text-620: #8bb8b2; + --theme-palette-neutral-text-580: #6e9995; + --theme-palette-neutral-text-560: #9dc5bf; + --theme-palette-neutral-text-500: #7ea19b; + --theme-palette-neutral-text-460: #5d7f7a; + --theme-palette-neutral-text-420: #36504d; + + --theme-palette-text-header: #9ff6ea; + --theme-palette-text-label: #8fd7ff; + --theme-palette-text-option-active: #042f2e; + --theme-palette-text-menu-warn: #ffb7c8; + --theme-palette-text-menu-warn-strong: #ff9eb8; + + --theme-palette-primary: rgba(45, 212, 191, 0.42); + --theme-palette-primary-soft: rgba(45, 212, 191, 0.2); + --theme-palette-primary-hover-soft: rgba(34, 211, 238, 0.18); + --theme-palette-primary-active-soft: rgba(34, 211, 238, 0.28); + --theme-palette-primary-hover: rgba(13, 148, 136, 0.44); + --theme-palette-primary-hover-strong: rgba(45, 212, 191, 0.92); + --theme-palette-primary-border: rgba(45, 212, 191, 0.84); + --theme-palette-primary-menu-hover: rgba(13, 148, 136, 0.34); + --theme-palette-primary-tool-hover: #0f766e99; + --theme-palette-primary-tree-hover: #0d948888; + --theme-palette-primary-tab-hover: #155e7588; + --theme-palette-primary-tab-active: #164e6388; + --theme-palette-primary-tab-border: #5ccfe6; + --theme-palette-primary-spinner: #8ae9df; + + --theme-palette-secondary: rgba(255, 143, 107, 0.68); + --theme-palette-secondary-soft: rgba(255, 143, 107, 0.24); + --theme-palette-secondary-hover: rgba(255, 143, 107, 0.46); + --theme-palette-secondary-border: rgba(255, 143, 107, 0.56); + + --theme-palette-neutral-dark-950: #08161f; + --theme-palette-neutral-dark-900: #0f2433; + --theme-palette-neutral-dark-850: #0d252d; + --theme-palette-neutral-dark-800: #071d23; + --theme-palette-neutral-dark-780: #14343b99; + --theme-palette-neutral-dark-760: #10323c88; + --theme-palette-neutral-dark-740: #17394388; + --theme-palette-neutral-dark-720: #1a4950; + --theme-palette-neutral-dark-700: #204f57; + --theme-palette-neutral-dark-680: #2d6970; + --theme-palette-neutral-dark-660: #21505b88; + --theme-palette-neutral-dark-640: #2f565d; + --theme-palette-neutral-dark-620: #20454b; + --theme-palette-neutral-dark-600: #3e707788; + --theme-palette-neutral-dark-580: #3b6168; + --theme-palette-neutral-dark-560: #477178; + --theme-palette-neutral-dark-540: #36504d; + --theme-palette-neutral-dark-520: #21474e; + + --theme-palette-primary-tone-500: #8ae9df; + --theme-palette-primary-tone-450: #9ff6ea; + --theme-palette-primary-tone-420: #8fd7ff; + --theme-palette-primary-tone-380: #67e8f9; + --theme-palette-primary-tone-340: #54b7c3; + --theme-palette-primary-tone-300: #4fd1c5; + --theme-palette-primary-tone-260: #5ccfe6; + --theme-palette-primary-tone-220: #7be7c7; + --theme-palette-primary-tone-200: #0f766e; + --theme-palette-primary-tone-180: #155e75; + --theme-palette-primary-tone-160: #164e63; + --theme-palette-primary-tone-140: #0e7490; + + --theme-palette-danger-tone-520: #ff9eb8; + --theme-palette-danger-tone-500: #ff6b6b; + --theme-palette-danger-tone-480: #f97360; + --theme-palette-danger-tone-420: #f59e8b; + --theme-palette-danger-tone-360: #c97b71; + --theme-palette-danger-tone-surface-250: rgba(249, 115, 96, 0.22); + --theme-palette-danger-tone-surface-550: rgba(249, 115, 96, 0.44); + --theme-palette-danger-tone-border: rgba(249, 115, 96, 0.5); + + --theme-palette-success-tone-540: #6ee7b7; + --theme-palette-success-tone-520: #34d399; + --theme-palette-success-tone-500: #10b981; + --theme-palette-success-tone-460: #8ef6c6; + --theme-palette-success-tone-420: #4ade80; + --theme-palette-success-tone-380: #14b8a6; + --theme-palette-success-tone-340: #0f766e; + --theme-palette-success-tone-soft-200: rgba(52, 211, 153, 0.2); + --theme-palette-success-tone-border: rgba(52, 211, 153, 0.38); + --theme-palette-success-tone-strong: rgba(52, 211, 153, 0.74); + --theme-palette-success-tone-hover: rgba(16, 185, 129, 0.28); + --theme-palette-success-tone-text: #a7f3d0; + --theme-palette-success-tone-surface: #1c4f4d88; + + --theme-palette-warning-tone-520: #ffd59e; + --theme-palette-warning-tone-500: #ffc887; + --theme-palette-warning-tone-460: #ffd166; + --theme-palette-warning-tone-420: #f4b942; + --theme-palette-warning-tone-surface: #4b371d88; + --theme-palette-warning-tone-border: #c28f38; + + --theme-palette-info-tone-520: #67e8f9; + --theme-palette-info-tone-500: #5ccfe6; + --theme-palette-info-tone-460: #7ed7ff; + --theme-palette-info-tone-surface: #1e4a5d88; + --theme-palette-info-tone-border: #2e788c; + + --theme-palette-accent-tone-540: #d9a6ff; + --theme-palette-accent-tone-520: #c99cff; + --theme-palette-accent-tone-500: #a893ff; + --theme-palette-accent-tone-460: #d8b4fe; + --theme-palette-accent-tone-surface: #4a325d88; + --theme-palette-accent-tone-border: #7c3aed; + --theme-palette-accent-tone-soft-surface: rgba(192, 132, 252, 0.1); + --theme-palette-accent-tone-soft-hover: rgba(192, 132, 252, 0.2); + --theme-palette-accent-tone-soft-border: rgba(192, 132, 252, 0.36); + --theme-palette-accent-tone-text: #f0abfc; + --theme-palette-accent-tone-text-soft: #f5d0fe; + + --theme-palette-quaternary-tone-500: #818cf8; + --theme-palette-quaternary-tone-surface: #45388a88; + --theme-palette-emphasis-tone-500: #fb7185; + --theme-palette-highlight-tone-500: #fde047; + + --theme-palette-status-tag-surface: #1b394088; + --theme-palette-status-tag-active-text: #4ade80; + --theme-palette-status-tag-active-surface: #1c4f4d88; + --theme-palette-status-tag-active-border: #0f766e; + --theme-palette-status-tag-alt-text: #c99cff; + --theme-palette-status-tag-alt-surface: #4a325d88; + --theme-palette-status-tag-alt-border: #7c3aed; + --theme-palette-status-tag-expired-text: #ffd166; + --theme-palette-status-tag-expired-surface: #4b371d88; + --theme-palette-status-tag-expired-border: #c28f38; + --theme-palette-status-tag-banned-text: #ff9eb8; + --theme-palette-status-tag-banned-surface: #4a262188; + --theme-palette-status-tag-banned-border: #a95f55; + + --theme-palette-status-live-surface: #1c4f4d88; + --theme-palette-status-video-surface: #1e4a5d88; + --theme-palette-status-series-surface: #45388a88; + + --theme-palette-shadow-popup: 0 10px 28px rgba(0, 0, 0, 0.42), inset 0 0 12px rgba(147, 197, 253, 0.08); + --theme-palette-shadow-card: 0 8px 20px rgba(0, 0, 0, 0.24); + --theme-palette-shadow-scrollbar-track: inset 0 0 6px rgba(0, 0, 0, 0.26); + --theme-palette-shadow-tab-header: 0 2px 4px rgba(0, 0, 0, 0.08); + --theme-palette-shadow-field-code: 0 4px 6px rgba(0, 0, 0, 0.14); + --theme-palette-shadow-toggle: 0 2px 6px rgba(0, 0, 0, 0.72); + --theme-palette-shadow-toast: 0 2px 5px rgba(0, 0, 0, 0.28); + --theme-palette-shadow-source-block: 0 1px 2px rgba(0, 0, 0, 0.18); + --theme-palette-shadow-glass: rgba(0, 0, 0, 0.12); + + --theme-palette-menu-icon-update: #9ff6ea; + --theme-palette-menu-icon-user: #7ed7ff; + --theme-palette-menu-icon-api-server: #ffd59e; + --theme-palette-menu-icon-main-config: #d9a6ff; + --theme-palette-menu-icon-status: #fde047; + + --theme-palette-code-identifier: #67e8f9; + --theme-palette-code-var-access: #a5f3fc; + --theme-palette-code-field: #f7b267; + --theme-palette-code-property: #ff9f6e; + --theme-palette-code-literal: #6ee7b7; + --theme-palette-code-num: #8fd7ff; + --theme-palette-code-builtin: #f9e27d; + --theme-palette-code-reserved: #ff9eb8; + --theme-palette-code-regex: #f7b267; + --theme-palette-code-enum: #34d399; + --theme-palette-code-range: #8fd7ff; + --theme-palette-code-op: #67e8f9; + --theme-palette-code-compare-text: #ffffff; + --theme-palette-code-bracket-1: #67e8f9; + --theme-palette-code-bracket-2: #a893ff; + --theme-palette-code-bracket-3: #fde68a; + --theme-palette-code-any-match: #fb7185; + + --theme-palette-epg-program-surface: #0c2732; + --theme-palette-epg-program-active-surface: #113847; + --theme-palette-epg-program-text: #ffffff; + --theme-palette-epg-program-time: #84a9b0; + --theme-palette-epg-program-time-active: #b8f6ec; + --theme-palette-epg-past-surface: rgba(0, 0, 0, 0.14); + --theme-palette-epg-now-line: #ff9eb8; + + --theme-palette-graph-grid-1: #a7f3d030; + --theme-palette-graph-grid-2: #67e8f930; + + --theme-palette-particle-1: #9ff6ea; + --theme-palette-particle-2: #1b3940; + --theme-palette-particle-alpha-boost: 1.2; + + --theme-palette-chip-container-text: #8fd7ff; + --theme-palette-chip-container-surface: #133742; + --theme-palette-chip-video-text: #8ef6c6; + --theme-palette-chip-video-surface: #14342d; + --theme-palette-chip-resolution-text: #ffb4a2; + --theme-palette-chip-resolution-surface: #4a2621; + --theme-palette-chip-fps-text: #ffd166; + --theme-palette-chip-fps-surface: #46371d; + --theme-palette-chip-audio-text: #f0abfc; + --theme-palette-chip-audio-surface: #3d2148; + --theme-palette-chip-audio-channels-text: #f5d0fe; + + --theme-palette-graph-input-xtream: #5ccfe6; + --theme-palette-graph-input-m3u: #7ed7ff; + --theme-palette-graph-input-library: #a893ff; + --theme-palette-graph-target: #14b8a6; + --theme-palette-graph-output: #ffc887; + --theme-palette-graph-output-xtream: #8ae9df; + --theme-palette-graph-output-m3u: #34d399; + --theme-palette-graph-output-hdhomerun: #818cf8; + --theme-palette-graph-output-strm: #fb7185; + --theme-palette-graph-port: #5f8b93; + --theme-palette-graph-port-border: #ffffff; + --theme-palette-graph-port-hover: #ffd59e; + + --theme-palette-login-logo: color-mix(in srgb, #08161f 78%, #8ae9df 10%); + --theme-palette-series-title: #ffffff; + --theme-palette-series-backdrop-overlay: linear-gradient( + to right, + rgba(6, 21, 27, 1) 28%, + rgba(6, 21, 27, 0.9) 48%, + rgba(6, 21, 27, 0.76) 60%, + rgba(6, 21, 27, 0.4) 72%, + rgba(6, 21, 27, 0) 86% + ); +} + diff --git a/frontend/scss/themes/_theme-monokai.scss b/frontend/scss/themes/_theme-monokai.scss new file mode 100644 index 000000000..23286cafe --- /dev/null +++ b/frontend/scss/themes/_theme-monokai.scss @@ -0,0 +1,267 @@ +body[data-theme="monokai"] { + --theme-palette-page: #19181a; + --theme-palette-page-alt: #221f22; + --theme-palette-neutral-surface-980: rgba(20, 18, 20, 0.92); + --theme-palette-neutral-surface-960: rgba(28, 25, 30, 0.96); + --theme-palette-neutral-surface-940: rgba(39, 36, 41, 0.82); + --theme-palette-neutral-surface-920: rgba(39, 36, 41, 0.72); + --theme-palette-neutral-surface-900: rgba(48, 44, 51, 0.68); + --theme-palette-neutral-surface-880: rgba(57, 53, 60, 0.6); + --theme-palette-neutral-surface-840: rgba(71, 66, 75, 0.48); + --theme-palette-neutral-surface-820: rgba(94, 88, 99, 0.32); + --theme-palette-neutral-surface-800: rgba(166, 226, 46, 0.18); + --theme-palette-neutral-surface-780: rgba(166, 226, 46, 0.1); + --theme-palette-neutral-surface-760: rgba(253, 151, 31, 0.14); + --theme-palette-neutral-surface-740: rgba(253, 151, 31, 0.08); + --theme-palette-neutral-surface-720: rgba(255, 255, 255, 0.16); + --theme-palette-neutral-surface-700: rgba(255, 255, 255, 0); + --theme-palette-neutral-surface-680: rgba(0, 0, 0, 0.18); + --theme-palette-neutral-surface-660: rgba(0, 0, 0, 0.56); + --theme-palette-neutral-surface-640: rgba(0, 0, 0, 0.34); + --theme-palette-neutral-surface-620: #3b354088; + --theme-palette-neutral-surface-600: #2f2a3388; + --theme-palette-neutral-surface-580: #57505d88; + --theme-palette-neutral-surface-560: #3a353d; + --theme-palette-neutral-surface-540: #27222988; + --theme-palette-neutral-surface-520: #221f22; + --theme-palette-neutral-surface-code: #171517cc; + --theme-palette-neutral-surface-code-solid: #171517; + --theme-palette-neutral-surface-code-compare: #2b263099; + --theme-palette-state-surface-option-active: #a6e22e88; + + --theme-palette-accent-border-500: rgba(102, 217, 239, 0.22); + --theme-palette-accent-border-460: rgba(102, 217, 239, 0.42); + --theme-palette-accent-border-420: rgba(102, 217, 239, 0.82); + --theme-palette-accent-border-380: rgba(102, 217, 239, 0.92); + --theme-palette-accent-border-340: rgba(102, 217, 239, 0.3); + --theme-palette-neutral-border-560: #5c5562; + --theme-palette-neutral-border-520: #4a434f; + --theme-palette-neutral-border-500: #6a6271; + --theme-palette-neutral-border-460: #39333d; + --theme-palette-neutral-border-420: rgba(255, 255, 255, 0.14); + --theme-palette-neutral-border-380: rgba(102, 217, 239, 0.88); + + --theme-palette-neutral-text-900: #f8f8f2; + --theme-palette-neutral-text-760: #e6dbcf; + --theme-palette-neutral-text-700: #cfc6bb; + --theme-palette-neutral-text-620: #b6ada3; + --theme-palette-neutral-text-580: #9d958d; + --theme-palette-neutral-text-560: #b8b1aa; + --theme-palette-neutral-text-500: #8d8680; + --theme-palette-neutral-text-460: #6f6761; + --theme-palette-neutral-text-420: #4b4541; + + --theme-palette-text-header: #ffd866; + --theme-palette-text-label: #78dce8; + --theme-palette-text-option-active: #272822; + --theme-palette-text-menu-warn: #ffb86c; + --theme-palette-text-menu-warn-strong: #ff6188; + + --theme-palette-primary: rgba(102, 217, 239, 0.34); + --theme-palette-primary-soft: rgba(102, 217, 239, 0.16); + --theme-palette-primary-hover-soft: rgba(120, 220, 232, 0.18); + --theme-palette-primary-active-soft: rgba(120, 220, 232, 0.26); + --theme-palette-primary-hover: rgba(102, 217, 239, 0.4); + --theme-palette-primary-hover-strong: rgba(120, 220, 232, 0.9); + --theme-palette-primary-border: rgba(102, 217, 239, 0.8); + --theme-palette-primary-menu-hover: rgba(120, 220, 232, 0.26); + --theme-palette-primary-tool-hover: #5ad4e088; + --theme-palette-primary-tree-hover: #5ad4e066; + --theme-palette-primary-tab-hover: #31535d88; + --theme-palette-primary-tab-active: #263f4688; + --theme-palette-primary-tab-border: #78dce8; + --theme-palette-primary-spinner: #78dce8; + + --theme-palette-secondary: rgba(255, 97, 136, 0.64); + --theme-palette-secondary-soft: rgba(255, 97, 136, 0.24); + --theme-palette-secondary-hover: rgba(255, 97, 136, 0.46); + --theme-palette-secondary-border: rgba(255, 97, 136, 0.56); + + --theme-palette-neutral-dark-950: #141214; + --theme-palette-neutral-dark-900: #19181a; + --theme-palette-neutral-dark-850: #221f22; + --theme-palette-neutral-dark-800: #171517; + --theme-palette-neutral-dark-780: #2b263099; + --theme-palette-neutral-dark-760: #27222988; + --theme-palette-neutral-dark-740: #2f2a3388; + --theme-palette-neutral-dark-720: #343039; + --theme-palette-neutral-dark-700: #3a353d; + --theme-palette-neutral-dark-680: #46414a; + --theme-palette-neutral-dark-660: #3b354088; + --theme-palette-neutral-dark-640: #4a434f; + --theme-palette-neutral-dark-620: #57505d; + --theme-palette-neutral-dark-600: #57505d88; + --theme-palette-neutral-dark-580: #5c5562; + --theme-palette-neutral-dark-560: #6a6271; + --theme-palette-neutral-dark-540: #4b4541; + --theme-palette-neutral-dark-520: #39333d; + + --theme-palette-primary-tone-500: #78dce8; + --theme-palette-primary-tone-450: #8be9fd; + --theme-palette-primary-tone-420: #66d9ef; + --theme-palette-primary-tone-380: #5ad4e0; + --theme-palette-primary-tone-340: #4aa5b3; + --theme-palette-primary-tone-300: #5ac8c8; + --theme-palette-primary-tone-260: #2bbbd8; + --theme-palette-primary-tone-220: #a6e22e; + --theme-palette-primary-tone-200: #2d8c9f; + --theme-palette-primary-tone-180: #31535d; + --theme-palette-primary-tone-160: #263f46; + --theme-palette-primary-tone-140: #1e7488; + + --theme-palette-danger-tone-520: #ff6188; + --theme-palette-danger-tone-500: #ff5c7a; + --theme-palette-danger-tone-480: #f7768e; + --theme-palette-danger-tone-420: #ff9cae; + --theme-palette-danger-tone-360: #c87b88; + --theme-palette-danger-tone-surface-250: rgba(255, 97, 136, 0.22); + --theme-palette-danger-tone-surface-550: rgba(255, 97, 136, 0.42); + --theme-palette-danger-tone-border: rgba(255, 97, 136, 0.5); + + --theme-palette-success-tone-540: #a6e22e; + --theme-palette-success-tone-520: #a6e22e; + --theme-palette-success-tone-500: #7fd962; + --theme-palette-success-tone-460: #b9f27c; + --theme-palette-success-tone-420: #9de24c; + --theme-palette-success-tone-380: #78dce8; + --theme-palette-success-tone-340: #618c3d; + --theme-palette-success-tone-soft-200: rgba(166, 226, 46, 0.18); + --theme-palette-success-tone-border: rgba(166, 226, 46, 0.36); + --theme-palette-success-tone-strong: rgba(166, 226, 46, 0.72); + --theme-palette-success-tone-hover: rgba(166, 226, 46, 0.28); + --theme-palette-success-tone-text: #d6f58c; + --theme-palette-success-tone-surface: #3d4f1c88; + + --theme-palette-warning-tone-520: #ffd866; + --theme-palette-warning-tone-500: #ffb86c; + --theme-palette-warning-tone-460: #ffd98e; + --theme-palette-warning-tone-420: #ffc15e; + --theme-palette-warning-tone-surface: #4f392088; + --theme-palette-warning-tone-border: #b88746; + + --theme-palette-info-tone-520: #78dce8; + --theme-palette-info-tone-500: #66d9ef; + --theme-palette-info-tone-460: #5ad4e0; + --theme-palette-info-tone-surface: #1f3d4588; + --theme-palette-info-tone-border: #467d89; + + --theme-palette-accent-tone-540: #ff79c6; + --theme-palette-accent-tone-520: #c792ea; + --theme-palette-accent-tone-500: #ab9df2; + --theme-palette-accent-tone-460: #d6b4ff; + --theme-palette-accent-tone-surface: #3f284888; + --theme-palette-accent-tone-border: #8a63d2; + --theme-palette-accent-tone-soft-surface: rgba(171, 157, 242, 0.1); + --theme-palette-accent-tone-soft-hover: rgba(171, 157, 242, 0.2); + --theme-palette-accent-tone-soft-border: rgba(171, 157, 242, 0.34); + --theme-palette-accent-tone-text: #e1c8ff; + --theme-palette-accent-tone-text-soft: #f0defe; + + --theme-palette-quaternary-tone-500: #ab9df2; + --theme-palette-quaternary-tone-surface: #372f5688; + --theme-palette-emphasis-tone-500: #ff6188; + --theme-palette-highlight-tone-500: #ffd866; + + --theme-palette-status-tag-surface: #312c3388; + --theme-palette-status-tag-active-text: #a6e22e; + --theme-palette-status-tag-active-surface: #3d4f1c88; + --theme-palette-status-tag-active-border: #618c3d; + --theme-palette-status-tag-alt-text: #c792ea; + --theme-palette-status-tag-alt-surface: #3f284888; + --theme-palette-status-tag-alt-border: #8a63d2; + --theme-palette-status-tag-expired-text: #ffd866; + --theme-palette-status-tag-expired-surface: #4f392088; + --theme-palette-status-tag-expired-border: #b88746; + --theme-palette-status-tag-banned-text: #ff9cae; + --theme-palette-status-tag-banned-surface: #4d232d88; + --theme-palette-status-tag-banned-border: #9f4c5d; + + --theme-palette-status-live-surface: #3d4f1c88; + --theme-palette-status-video-surface: #1f3d4588; + --theme-palette-status-series-surface: #372f5688; + + --theme-palette-shadow-popup: 0 10px 28px rgba(0, 0, 0, 0.46), inset 0 0 10px rgba(255, 216, 102, 0.08); + --theme-palette-shadow-card: 0 8px 20px rgba(0, 0, 0, 0.26); + --theme-palette-shadow-scrollbar-track: inset 0 0 6px rgba(0, 0, 0, 0.28); + --theme-palette-shadow-tab-header: 0 2px 4px rgba(0, 0, 0, 0.08); + --theme-palette-shadow-field-code: 0 4px 6px rgba(0, 0, 0, 0.16); + --theme-palette-shadow-toggle: 0 2px 6px rgba(0, 0, 0, 0.78); + --theme-palette-shadow-toast: 0 2px 5px rgba(0, 0, 0, 0.3); + --theme-palette-shadow-source-block: 0 1px 2px rgba(0, 0, 0, 0.22); + --theme-palette-shadow-glass: rgba(0, 0, 0, 0.12); + + --theme-palette-menu-icon-update: #ffd866; + --theme-palette-menu-icon-user: #66d9ef; + --theme-palette-menu-icon-api-server: #ffb86c; + --theme-palette-menu-icon-main-config: #ff79c6; + --theme-palette-menu-icon-status: #a6e22e; + + --theme-palette-code-identifier: #66d9ef; + --theme-palette-code-var-access: #a1efe4; + --theme-palette-code-field: #ffd866; + --theme-palette-code-property: #ffb86c; + --theme-palette-code-literal: #a6e22e; + --theme-palette-code-num: #ae81ff; + --theme-palette-code-builtin: #ffd866; + --theme-palette-code-reserved: #f92672; + --theme-palette-code-regex: #e6db74; + --theme-palette-code-enum: #a6e22e; + --theme-palette-code-range: #78dce8; + --theme-palette-code-op: #f92672; + --theme-palette-code-compare-text: #f8f8f2; + --theme-palette-code-bracket-1: #66d9ef; + --theme-palette-code-bracket-2: #fd971f; + --theme-palette-code-bracket-3: #a6e22e; + --theme-palette-code-any-match: #ff6188; + + --theme-palette-epg-program-surface: #211d24; + --theme-palette-epg-program-active-surface: #2f2a33; + --theme-palette-epg-program-text: #f8f8f2; + --theme-palette-epg-program-time: #9d958d; + --theme-palette-epg-program-time-active: #ffd866; + --theme-palette-epg-past-surface: rgba(0, 0, 0, 0.12); + --theme-palette-epg-now-line: #ff6188; + + --theme-palette-graph-grid-1: #f8f8f230; + --theme-palette-graph-grid-2: #ffd86624; + + --theme-palette-particle-1: #ffd866; + --theme-palette-particle-2: #2b2630; + --theme-palette-particle-alpha-boost: 1.18; + + --theme-palette-chip-container-text: #78dce8; + --theme-palette-chip-container-surface: #24333b; + --theme-palette-chip-video-text: #a6e22e; + --theme-palette-chip-video-surface: #33401f; + --theme-palette-chip-resolution-text: #ff9cae; + --theme-palette-chip-resolution-surface: #4d232d; + --theme-palette-chip-fps-text: #ffd866; + --theme-palette-chip-fps-surface: #4b3821; + --theme-palette-chip-audio-text: #ff79c6; + --theme-palette-chip-audio-surface: #47253e; + --theme-palette-chip-audio-channels-text: #f0defe; + + --theme-palette-graph-input-xtream: #66d9ef; + --theme-palette-graph-input-m3u: #78dce8; + --theme-palette-graph-input-library: #ab9df2; + --theme-palette-graph-target: #a6e22e; + --theme-palette-graph-output: #ffb86c; + --theme-palette-graph-output-xtream: #5ad4e0; + --theme-palette-graph-output-m3u: #7fd962; + --theme-palette-graph-output-hdhomerun: #ab9df2; + --theme-palette-graph-output-strm: #ff6188; + --theme-palette-graph-port: #6b6472; + --theme-palette-graph-port-border: #ffffff; + --theme-palette-graph-port-hover: #ffd866; + + --theme-palette-login-logo: color-mix(in srgb, #19181a 80%, #ffd866 10%); + --theme-palette-series-title: #ffffff; + --theme-palette-series-backdrop-overlay: linear-gradient( + to right, + rgba(25, 24, 26, 1) 28%, + rgba(25, 24, 26, 0.92) 48%, + rgba(25, 24, 26, 0.78) 60%, + rgba(25, 24, 26, 0.42) 72%, + rgba(25, 24, 26, 0) 86% + ); +} diff --git a/frontend/scss/themes/_theme-nature-pure.scss b/frontend/scss/themes/_theme-nature-pure.scss new file mode 100644 index 000000000..8b960044c --- /dev/null +++ b/frontend/scss/themes/_theme-nature-pure.scss @@ -0,0 +1,277 @@ +body[data-theme="nature-pure"] { + --theme-palette-page: #e7decb; + --theme-palette-page-alt: #a89271; + --theme-palette-neutral-surface-980: #fffaf2e6; + --theme-palette-neutral-surface-960: #ddd3be; + --theme-palette-neutral-surface-940: #f0eadc; + --theme-palette-neutral-surface-920: #e8dfce; + --theme-palette-neutral-surface-900: #e2d7c3; + --theme-palette-neutral-surface-880: #d8ccb6; + --theme-palette-neutral-surface-840: #d0c3ad; + --theme-palette-neutral-surface-820: #c7b89f; + --theme-palette-neutral-surface-800: rgba(186, 163, 127, 0.2); + --theme-palette-neutral-surface-780: rgba(186, 163, 127, 0.12); + --theme-palette-neutral-surface-760: rgba(255, 255, 255, 0.45); + --theme-palette-neutral-surface-740: rgba(255, 255, 255, 0.55); + --theme-palette-neutral-surface-720: rgba(255, 255, 255, 0.35); + --theme-palette-neutral-surface-700: transparent; + --theme-palette-neutral-surface-680: rgba(204, 193, 173, 0.7); + --theme-palette-neutral-surface-660: rgba(0, 0, 0, 0.46); + --theme-palette-neutral-surface-640: rgba(0, 0, 0, 0.24); + --theme-palette-neutral-surface-620: #f7efe1; + --theme-palette-neutral-surface-600: #f0e7db; + --theme-palette-neutral-surface-580: #f0e7db; + --theme-palette-neutral-surface-560: #f8f1e7; + --theme-palette-neutral-surface-540: #efe4d4; + --theme-palette-neutral-surface-520: #e1d4c1; + --theme-palette-neutral-surface-code: #fff9f0; + --theme-palette-neutral-surface-code-solid: #fff9f0; + --theme-palette-neutral-surface-code-compare: rgba(214, 198, 173, 0.55); + --theme-palette-state-surface-option-active: #dce4cc; + + --theme-palette-accent-border-500: #d8c8b1; + --theme-palette-accent-border-460: #b8a17c; + --theme-palette-accent-border-420: #7c5f36; + --theme-palette-accent-border-380: #7c5f36; + --theme-palette-accent-border-340: #d8c8b1; + --theme-palette-neutral-border-560: #dfd3c3; + --theme-palette-neutral-border-520: #d8c8b1; + --theme-palette-neutral-border-500: #dfd3c3; + --theme-palette-neutral-border-460: #dfd3c3; + --theme-palette-neutral-border-420: rgba(72, 54, 34, 0.12); + --theme-palette-neutral-border-380: rgba(124, 95, 54, 0.84); + + --theme-palette-neutral-text-900: #31291f; + --theme-palette-neutral-text-760: #524838; + --theme-palette-neutral-text-700: #6d6450; + --theme-palette-neutral-text-620: #807762; + --theme-palette-neutral-text-580: #938975; + --theme-palette-neutral-text-560: #8f7a67; + --theme-palette-neutral-text-500: #a09786; + --theme-palette-neutral-text-460: #6e6052; + --theme-palette-neutral-text-420: #c1b2a3; + + --theme-palette-text-header: #6f6e3b; + --theme-palette-text-label: #9a6b3f; + --theme-palette-text-option-active: #23452a; + --theme-palette-text-menu-warn: #b96f43; + --theme-palette-text-menu-warn-strong: #a3483d; + + --theme-palette-primary: #6e7440; + --theme-palette-primary-soft: rgba(140, 107, 63, 0.08); + --theme-palette-primary-hover-soft: rgba(140, 107, 63, 0.14); + --theme-palette-primary-active-soft: rgba(140, 107, 63, 0.2); + --theme-palette-primary-hover: #d8cfb8; + --theme-palette-primary-hover-strong: #566031; + --theme-palette-primary-border: #6e7440; + --theme-palette-primary-menu-hover: #566031; + --theme-palette-primary-tool-hover: #566031; + --theme-palette-primary-tree-hover: rgba(140, 107, 63, 0.1); + --theme-palette-primary-tab-hover: #ebdfcf; + --theme-palette-primary-tab-active: #e2d3bf; + --theme-palette-primary-tab-border: #a78456; + --theme-palette-primary-spinner: #6e7440; + + --theme-palette-secondary: #b86a45; + --theme-palette-secondary-soft: #efd6ca; + --theme-palette-secondary-hover: #e2b7a5; + --theme-palette-secondary-border: #cc9b83; + + --theme-palette-neutral-light-980: #fffaf2e6; + --theme-palette-neutral-light-960: #fff9f0; + --theme-palette-neutral-light-940: #faf5ec; + --theme-palette-neutral-light-920: #f4ede1; + --theme-palette-neutral-light-900: #efe4d4; + --theme-palette-neutral-light-880: #eadfce; + --theme-palette-neutral-light-860: #e5d8c6; + --theme-palette-neutral-light-840: #e1d4c1; + --theme-palette-neutral-light-820: #f7efe1; + --theme-palette-neutral-light-800: #f0e7db; + --theme-palette-neutral-light-780: #e6edd5; + --theme-palette-neutral-light-760: rgba(255, 255, 255, 0.45); + --theme-palette-neutral-light-740: rgba(255, 255, 255, 0.55); + --theme-palette-neutral-light-720: rgba(255, 255, 255, 0.35); + --theme-palette-neutral-light-700: rgba(255, 255, 255, 0.2); + --theme-palette-neutral-light-680: rgba(214, 198, 173, 0.55); + + --theme-palette-neutral-mid-900: #2f291f; + --theme-palette-neutral-mid-760: #4e4538; + --theme-palette-neutral-mid-700: #6a6250; + --theme-palette-neutral-mid-660: #7c7462; + --theme-palette-neutral-mid-620: #908675; + --theme-palette-neutral-mid-580: #a99888; + --theme-palette-neutral-mid-520: #c1b2a3; + + --theme-palette-primary-tone-600: #5f4728; + --theme-palette-primary-tone-560: #6d5230; + --theme-palette-primary-tone-540: #6e7440; + --theme-palette-primary-tone-520: #a78456; + --theme-palette-primary-tone-500: #7c8450; + --theme-palette-primary-tone-460: #b8aa8b; + --theme-palette-primary-tone-420: #ccb28b; + --theme-palette-primary-tone-380: #d8c8b1; + --theme-palette-primary-tone-340: #e2d3bf; + --theme-palette-primary-tone-300: #e8dcc8; + --theme-palette-primary-tone-260: #ebdfcf; + --theme-palette-primary-tone-220: #dce4cc; + --theme-palette-primary-tone-200: rgba(140, 107, 63, 0.1); + --theme-palette-primary-tone-180: rgba(140, 107, 63, 0.2); + --theme-palette-primary-tone-160: rgba(140, 107, 63, 0.08); + --theme-palette-primary-tone-140: #c1b2a3; + + --theme-palette-danger-tone-520: #c75b4c; + --theme-palette-danger-tone-500: #a3483d; + --theme-palette-danger-tone-480: #b86a45; + --theme-palette-danger-tone-420: #c07a51; + --theme-palette-danger-tone-360: #9a6c5e; + --theme-palette-danger-tone-surface-250: #f5ddd3; + --theme-palette-danger-tone-surface-550: #edc2b2; + --theme-palette-danger-tone-border: #de9f8a; + + --theme-palette-success-tone-540: #6e7440; + --theme-palette-success-tone-520: #4d7c4c; + --theme-palette-success-tone-500: #637044; + --theme-palette-success-tone-460: #8db08a; + --theme-palette-success-tone-420: #588657; + --theme-palette-success-tone-380: #6a8e7c; + --theme-palette-success-tone-340: #23452a; + --theme-palette-success-tone-soft-200: #e6edd5; + --theme-palette-success-tone-border: #b8d5b5; + --theme-palette-success-tone-strong: #4d7c4c; + --theme-palette-success-tone-hover: #cde7ca; + --theme-palette-success-tone-text: #23452a; + --theme-palette-success-tone-surface: #edf2e6; + + --theme-palette-warning-tone-520: #d0943c; + --theme-palette-warning-tone-500: #ba7a3a; + --theme-palette-warning-tone-460: #e5bb76; + --theme-palette-warning-tone-420: #b88746; + --theme-palette-warning-tone-surface: #f7ecd9; + --theme-palette-warning-tone-border: #efcf9d; + + --theme-palette-info-tone-520: #4b7b83; + --theme-palette-info-tone-500: #788e72; + --theme-palette-info-tone-460: #6aaea6; + --theme-palette-info-tone-surface: #e4ebe3; + --theme-palette-info-tone-border: #bfded8; + + --theme-palette-accent-tone-540: #8b7359; + --theme-palette-accent-tone-520: #8d745d; + --theme-palette-accent-tone-500: #9b8670; + --theme-palette-accent-tone-460: #dbc2d7; + --theme-palette-accent-tone-surface: #efe7e0; + --theme-palette-accent-tone-border: #e5cfe0; + --theme-palette-accent-tone-soft-surface: #efe7e0; + --theme-palette-accent-tone-soft-hover: #f1e4ef; + --theme-palette-accent-tone-soft-border: #e5cfe0; + --theme-palette-accent-tone-text: #8c6d5a; + --theme-palette-accent-tone-text-soft: #705544; + + --theme-palette-quaternary-tone-500: #8a8473; + --theme-palette-quaternary-tone-surface: #ece7dd; + --theme-palette-emphasis-tone-500: #b96f43; + --theme-palette-highlight-tone-500: #e3c56a; + + --theme-palette-status-tag-surface: #f0e7db; + --theme-palette-status-tag-active-text: #23452a; + --theme-palette-status-tag-active-surface: #edf2e6; + --theme-palette-status-tag-active-border: #b8d5b5; + --theme-palette-status-tag-alt-text: #8c6d5a; + --theme-palette-status-tag-alt-surface: #efe7e0; + --theme-palette-status-tag-alt-border: #e5cfe0; + --theme-palette-status-tag-expired-text: #8f5e1d; + --theme-palette-status-tag-expired-surface: #f7ecd9; + --theme-palette-status-tag-expired-border: #efcf9d; + --theme-palette-status-tag-banned-text: #8c332e; + --theme-palette-status-tag-banned-surface: #f2e0d4; + --theme-palette-status-tag-banned-border: #edc2b2; + + --theme-palette-status-live-surface: #edf2e6; + --theme-palette-status-video-surface: #e4ebe3; + --theme-palette-status-series-surface: #ece7dd; + + --theme-palette-shadow-popup: 0 10px 24px rgba(99, 82, 57, 0.14), 0 8px 10px rgba(99, 82, 57, 0.08); + --theme-palette-shadow-card: 0 4px 6px rgba(99, 82, 57, 0.08), 0 2px 4px rgba(99, 82, 57, 0.06); + --theme-palette-shadow-scrollbar-track: inset 0 0 6px rgba(99, 82, 57, 0.08); + --theme-palette-shadow-tab-header: 0 2px 4px rgba(99, 82, 57, 0.06); + --theme-palette-shadow-field-code: 0 4px 6px rgba(99, 82, 57, 0.08); + --theme-palette-shadow-toggle: 0 2px 6px rgba(52, 43, 35, 0.18); + --theme-palette-shadow-toast: 0 2px 5px rgba(99, 82, 57, 0.1); + --theme-palette-shadow-source-block: 0 1px 2px rgba(99, 82, 57, 0.08); + --theme-palette-shadow-glass: rgba(99, 82, 57, 0.05); + + --theme-palette-menu-icon-update: #6e7440; + --theme-palette-menu-icon-user: #788e72; + --theme-palette-menu-icon-api-server: #ba7a3a; + --theme-palette-menu-icon-main-config: #8b7359; + --theme-palette-menu-icon-status: #637044; + + --theme-palette-code-identifier: #6b8472; + --theme-palette-code-var-access: #677b4b; + --theme-palette-code-field: #b88746; + --theme-palette-code-property: #7c6a3f; + --theme-palette-code-literal: #677b4b; + --theme-palette-code-num: #8b6f63; + --theme-palette-code-builtin: #ba7a3a; + --theme-palette-code-reserved: #a3483d; + --theme-palette-code-regex: #8a8473; + --theme-palette-code-enum: #b96f43; + --theme-palette-code-range: #6a8e7c; + --theme-palette-code-op: #a3483d; + --theme-palette-code-compare-text: #2f291f; + --theme-palette-code-bracket-1: #6b8472; + --theme-palette-code-bracket-2: #8b6f63; + --theme-palette-code-bracket-3: #b88746; + --theme-palette-code-any-match: #b96f43; + + --theme-palette-epg-program-surface: #fff9f0; + --theme-palette-epg-program-active-surface: #f0e7db; + --theme-palette-epg-program-text: #4a3b2d; + --theme-palette-epg-program-time: #908675; + --theme-palette-epg-program-time-active: #7c6a3f; + --theme-palette-epg-past-surface: rgba(52, 43, 35, 0.06); + --theme-palette-epg-now-line: #c75b4c; + + --theme-palette-graph-grid-1: #d9cdbd55; + --theme-palette-graph-grid-2: #c6b49d55; + + --theme-palette-particle-1: #9f8450; + --theme-palette-particle-2: #b8aa8b; + --theme-palette-particle-alpha-boost: 1.28; + + --theme-palette-chip-container-text: #7c6a3f; + --theme-palette-chip-container-surface: #efe4d4; + --theme-palette-chip-video-text: #677b4b; + --theme-palette-chip-video-surface: #edf2e6; + --theme-palette-chip-resolution-text: #8c332e; + --theme-palette-chip-resolution-surface: #f2e0d4; + --theme-palette-chip-fps-text: #8f5e1d; + --theme-palette-chip-fps-surface: #f7ecd9; + --theme-palette-chip-audio-text: #8c6d5a; + --theme-palette-chip-audio-surface: #efe7e0; + --theme-palette-chip-audio-channels-text: #705544; + + --theme-palette-graph-input-xtream: #7c6a3f; + --theme-palette-graph-input-m3u: #6a8e7c; + --theme-palette-graph-input-library: #9e8778; + --theme-palette-graph-target: #4d7c4c; + --theme-palette-graph-output: #ba7a3a; + --theme-palette-graph-output-xtream: #6aaea6; + --theme-palette-graph-output-m3u: #677b4b; + --theme-palette-graph-output-hdhomerun: #8a8473; + --theme-palette-graph-output-strm: #b96f43; + --theme-palette-graph-port: #908675; + --theme-palette-graph-port-border: #ffffff; + --theme-palette-graph-port-hover: #d0943c; + + --theme-palette-login-logo: color-mix(in srgb, #ede6d6 84%, #7c6a3f 8%); + --theme-palette-series-title: #4a3b2d; + --theme-palette-series-backdrop-overlay: linear-gradient( + to right, + rgba(245, 239, 229, 0.98) 28%, + rgba(245, 239, 229, 0.9) 48%, + rgba(245, 239, 229, 0.76) 60%, + rgba(245, 239, 229, 0.4) 72%, + rgba(245, 239, 229, 0) 86% + ); +} diff --git a/frontend/scss/themes/_theme-nord.scss b/frontend/scss/themes/_theme-nord.scss new file mode 100644 index 000000000..9ee132641 --- /dev/null +++ b/frontend/scss/themes/_theme-nord.scss @@ -0,0 +1,268 @@ +:root, +body[data-theme="nord"] { + --theme-palette-page: #2e3440; + --theme-palette-page-alt: #242933; + --theme-palette-neutral-surface-980: rgba(46, 52, 64, 0.9); + --theme-palette-neutral-surface-960: rgba(59, 66, 82, 0.96); + --theme-palette-neutral-surface-940: rgba(59, 66, 82, 0.82); + --theme-palette-neutral-surface-920: rgba(67, 76, 94, 0.72); + --theme-palette-neutral-surface-900: rgba(67, 76, 94, 0.64); + --theme-palette-neutral-surface-880: rgba(76, 86, 106, 0.58); + --theme-palette-neutral-surface-840: rgba(94, 129, 172, 0.24); + --theme-palette-neutral-surface-820: rgba(94, 129, 172, 0.18); + --theme-palette-neutral-surface-800: rgba(129, 161, 193, 0.18); + --theme-palette-neutral-surface-780: rgba(129, 161, 193, 0.1); + --theme-palette-neutral-surface-760: rgba(236, 239, 244, 0.08); + --theme-palette-neutral-surface-740: rgba(236, 239, 244, 0.05); + --theme-palette-neutral-surface-720: rgba(236, 239, 244, 0.12); + --theme-palette-neutral-surface-700: rgba(255, 255, 255, 0); + --theme-palette-neutral-surface-680: rgba(36, 41, 51, 0.28); + --theme-palette-neutral-surface-660: rgba(36, 41, 51, 0.56); + --theme-palette-neutral-surface-640: rgba(36, 41, 51, 0.34); + --theme-palette-neutral-surface-620: #4c566a88; + --theme-palette-neutral-surface-600: #3b425288; + --theme-palette-neutral-surface-580: #5f6d8488; + --theme-palette-neutral-surface-560: #4c566a; + --theme-palette-neutral-surface-540: #434c5e88; + --theme-palette-neutral-surface-520: #3b4252; + --theme-palette-neutral-surface-code: #2b313dcc; + --theme-palette-neutral-surface-code-solid: #2b313d; + --theme-palette-neutral-surface-code-compare: #3b425288; + --theme-palette-state-surface-option-active: #a3be8c88; + + --theme-palette-accent-border-500: rgba(129, 161, 193, 0.24); + --theme-palette-accent-border-460: rgba(129, 161, 193, 0.4); + --theme-palette-accent-border-420: rgba(129, 161, 193, 0.7); + --theme-palette-accent-border-380: rgba(136, 192, 208, 0.84); + --theme-palette-accent-border-340: rgba(129, 161, 193, 0.24); + --theme-palette-neutral-border-560: #5b657a; + --theme-palette-neutral-border-520: #4c566a; + --theme-palette-neutral-border-500: #616e88; + --theme-palette-neutral-border-460: #434c5e; + --theme-palette-neutral-border-420: rgba(236, 239, 244, 0.12); + --theme-palette-neutral-border-380: rgba(136, 192, 208, 0.72); + + --theme-palette-neutral-text-900: #eceff4; + --theme-palette-neutral-text-760: #e5e9f0; + --theme-palette-neutral-text-700: #d8dee9; + --theme-palette-neutral-text-620: #cdd6e3; + --theme-palette-neutral-text-580: #a7b3c7; + --theme-palette-neutral-text-560: #c4c4c4; + --theme-palette-neutral-text-500: #93a1b8; + --theme-palette-neutral-text-460: #6b7c93; + --theme-palette-neutral-text-420: #4c566a; + + --theme-palette-text-header: #88c0d0; + --theme-palette-text-label: #81a1c1; + --theme-palette-text-option-active: #2e3440; + --theme-palette-text-menu-warn: #d08770; + --theme-palette-text-menu-warn-strong: #bf616a; + + --theme-palette-primary: rgba(94, 129, 172, 0.44); + --theme-palette-primary-soft: rgba(94, 129, 172, 0.18); + --theme-palette-primary-hover-soft: rgba(129, 161, 193, 0.18); + --theme-palette-primary-active-soft: rgba(129, 161, 193, 0.24); + --theme-palette-primary-hover: rgba(94, 129, 172, 0.42); + --theme-palette-primary-hover-strong: rgba(129, 161, 193, 0.84); + --theme-palette-primary-border: rgba(129, 161, 193, 0.7); + --theme-palette-primary-menu-hover: rgba(94, 129, 172, 0.3); + --theme-palette-primary-tool-hover: #5e81ac88; + --theme-palette-primary-tree-hover: #5e81ac66; + --theme-palette-primary-tab-hover: #4c6c8f88; + --theme-palette-primary-tab-active: #434c5e88; + --theme-palette-primary-tab-border: #81a1c1; + --theme-palette-primary-spinner: #88c0d0; + + --theme-palette-secondary: rgba(191, 97, 106, 0.62); + --theme-palette-secondary-soft: rgba(191, 97, 106, 0.22); + --theme-palette-secondary-hover: rgba(191, 97, 106, 0.44); + --theme-palette-secondary-border: rgba(191, 97, 106, 0.42); + + --theme-palette-neutral-dark-950: #242933; + --theme-palette-neutral-dark-900: #2e3440; + --theme-palette-neutral-dark-850: #3b4252; + --theme-palette-neutral-dark-800: #434c5e; + --theme-palette-neutral-dark-780: #3b425288; + --theme-palette-neutral-dark-760: #434c5e88; + --theme-palette-neutral-dark-740: #4c566a88; + --theme-palette-neutral-dark-720: #525b70; + --theme-palette-neutral-dark-700: #3b4252; + --theme-palette-neutral-dark-680: #5b657a; + --theme-palette-neutral-dark-660: #4c566a88; + --theme-palette-neutral-dark-640: #4c566a; + --theme-palette-neutral-dark-620: #616e88; + --theme-palette-neutral-dark-600: #5f6d8488; + --theme-palette-neutral-dark-580: #6b7c93; + --theme-palette-neutral-dark-560: #7d8ca1; + --theme-palette-neutral-dark-540: #4c566a; + --theme-palette-neutral-dark-520: #3a3a3a; + + --theme-palette-primary-tone-500: #81a1c1; + --theme-palette-primary-tone-450: #88c0d0; + --theme-palette-primary-tone-420: #81a1c1; + --theme-palette-primary-tone-380: #88c0d0; + --theme-palette-primary-tone-340: #5e81ac; + --theme-palette-primary-tone-300: #81a1c1; + --theme-palette-primary-tone-260: #81a1c1; + --theme-palette-primary-tone-220: #88c0d0; + --theme-palette-primary-tone-200: #5e81ac; + --theme-palette-primary-tone-180: #4c6c8f; + --theme-palette-primary-tone-160: #434c5e; + --theme-palette-primary-tone-140: #5e81ac; + + --theme-palette-danger-tone-520: #d08770; + --theme-palette-danger-tone-500: #bf616a; + --theme-palette-danger-tone-480: #bf616a; + --theme-palette-danger-tone-420: #bf616a; + --theme-palette-danger-tone-360: #d08770; + --theme-palette-danger-tone-surface-250: rgba(191, 97, 106, 0.22); + --theme-palette-danger-tone-surface-550: rgba(191, 97, 106, 0.44); + --theme-palette-danger-tone-border: rgba(191, 97, 106, 0.42); + + --theme-palette-success-tone-540: #a3be8c; + --theme-palette-success-tone-520: #a3be8c; + --theme-palette-success-tone-500: #8fbcbb; + --theme-palette-success-tone-460: #b5d19c; + --theme-palette-success-tone-420: #a3be8c; + --theme-palette-success-tone-380: #88c0d0; + --theme-palette-success-tone-340: #3b5b52; + --theme-palette-success-tone-soft-200: rgba(34, 197, 94, 0.2); + --theme-palette-success-tone-border: rgba(34, 197, 94, 0.4); + --theme-palette-success-tone-strong: rgba(34, 197, 94, 0.72); + --theme-palette-success-tone-hover: rgb(14 169 71 / 30%); + --theme-palette-success-tone-text: rgb(110, 231, 183); + --theme-palette-success-tone-surface: #1e2d2588; + + --theme-palette-warning-tone-520: #ebcb8b; + --theme-palette-warning-tone-500: #d8b66f; + --theme-palette-warning-tone-460: #ebcb8b; + --theme-palette-warning-tone-420: #d8b66f; + --theme-palette-warning-tone-surface: #4c566a88; + --theme-palette-warning-tone-border: #d8b66f; + + --theme-palette-info-tone-520: #88c0d0; + --theme-palette-info-tone-500: #88c0d0; + --theme-palette-info-tone-460: #81a1c1; + --theme-palette-info-tone-surface: #3b425288; + --theme-palette-info-tone-border: #5e81ac; + + --theme-palette-accent-tone-540: #b48ead; + --theme-palette-accent-tone-520: #b48ead; + --theme-palette-accent-tone-500: #b48ead; + --theme-palette-accent-tone-460: #c0a4cc; + --theme-palette-accent-tone-surface: #4a405888; + --theme-palette-accent-tone-border: #7b6694; + --theme-palette-accent-tone-soft-surface: rgba(168, 85, 247, 0.1); + --theme-palette-accent-tone-soft-hover: rgba(168, 85, 247, 0.2); + --theme-palette-accent-tone-soft-border: rgba(168, 85, 247, 0.4); + --theme-palette-accent-tone-text: #e6d8f1; + --theme-palette-accent-tone-text-soft: #f2e9fb; + + --theme-palette-quaternary-tone-500: #81a1c1; + --theme-palette-quaternary-tone-surface: #434c5e88; + --theme-palette-emphasis-tone-500: #bf616a; + --theme-palette-highlight-tone-500: #ebcb8b; + + --theme-palette-status-tag-surface: #2b2e3688; + --theme-palette-status-tag-active-text: #a3be8c; + --theme-palette-status-tag-active-surface: #1e2d2588; + --theme-palette-status-tag-active-border: #3b5b52; + --theme-palette-status-tag-alt-text: #b48ead; + --theme-palette-status-tag-alt-surface: #4a405888; + --theme-palette-status-tag-alt-border: #7b6694; + --theme-palette-status-tag-expired-text: #efda8f; + --theme-palette-status-tag-expired-surface: #4c566a88; + --theme-palette-status-tag-expired-border: #d8b66f; + --theme-palette-status-tag-banned-text: #bf616a; + --theme-palette-status-tag-banned-surface: #4c343488; + --theme-palette-status-tag-banned-border: #755252; + + --theme-palette-status-live-surface: #075b4188; + --theme-palette-status-video-surface: #035b6e88; + --theme-palette-status-series-surface: #434c5e88; + + --theme-palette-shadow-popup: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.08); + --theme-palette-shadow-card: 0 6px 18px rgba(0, 0, 0, 0.24); + --theme-palette-shadow-scrollbar-track: inset 0 0 6px rgba(0, 0, 0, 0.3); + --theme-palette-shadow-tab-header: 0 2px 4px rgba(0, 0, 0, 0.05); + --theme-palette-shadow-field-code: 0 4px 6px rgba(0, 0, 0, 0.1); + --theme-palette-shadow-toggle: 0 2px 6px rgba(0, 0, 0, 0.8); + --theme-palette-shadow-toast: 0 2px 5px rgba(0, 0, 0, 0.3); + --theme-palette-shadow-source-block: 0 1px 2px rgba(0, 0, 0, 0.2); + --theme-palette-shadow-glass: rgba(0, 0, 0, 0.1); + + --theme-palette-menu-icon-update: #88c0d0; + --theme-palette-menu-icon-user: #81a1c1; + --theme-palette-menu-icon-api-server: #ebcb8b; + --theme-palette-menu-icon-main-config: #b48ead; + --theme-palette-menu-icon-status: #ebcb8b; + + --theme-palette-code-identifier: #81a1c1; + --theme-palette-code-var-access: #8fbcbb; + --theme-palette-code-field: #d8b66f; + --theme-palette-code-property: #d08770; + --theme-palette-code-literal: #a3be8c; + --theme-palette-code-num: #81a1c1; + --theme-palette-code-builtin: #ebcb8b; + --theme-palette-code-reserved: #d08770; + --theme-palette-code-regex: #d8b66f; + --theme-palette-code-enum: #a3be8c; + --theme-palette-code-range: #81a1c1; + --theme-palette-code-op: #81a1c1; + --theme-palette-code-compare-text: #eceff4; + --theme-palette-code-bracket-1: #81a1c1; + --theme-palette-code-bracket-2: #c0a4cc; + --theme-palette-code-bracket-3: #b5cea8; + --theme-palette-code-any-match: #fa5f2d; + + --theme-palette-epg-program-surface: #3b4252; + --theme-palette-epg-program-active-surface: #434c5e; + --theme-palette-epg-program-text: #eceff4; + --theme-palette-epg-program-time: #a7b3c7; + --theme-palette-epg-program-time-active: #cdd6e3; + --theme-palette-epg-past-surface: rgba(0, 0, 0, 0.1); + --theme-palette-epg-now-line: #bf616a; + + --theme-palette-graph-grid-1: #e0e0e030; + --theme-palette-graph-grid-2: #c0c0c030; + + --theme-palette-particle-1: #81a1c1; + --theme-palette-particle-2: #3b4252; + --theme-palette-particle-alpha-boost: 1; + + --theme-palette-chip-container-text: #88c0d0; + --theme-palette-chip-container-surface: #263645; + --theme-palette-chip-video-text: #b5d19c; + --theme-palette-chip-video-surface: #2b3e30; + --theme-palette-chip-resolution-text: #e09393; + --theme-palette-chip-resolution-surface: #462d2f; + --theme-palette-chip-fps-text: #ebcb8b; + --theme-palette-chip-fps-surface: #473426; + --theme-palette-chip-audio-text: #faa2c1; + --theme-palette-chip-audio-surface: #432c36; + --theme-palette-chip-audio-channels-text: #ea97b5; + + --theme-palette-graph-input-xtream: #5e81ac; + --theme-palette-graph-input-m3u: #409aff; + --theme-palette-graph-input-library: #64b5f6; + --theme-palette-graph-target: #88c0d0; + --theme-palette-graph-output: #d8b66f; + --theme-palette-graph-output-xtream: #88c0d0; + --theme-palette-graph-output-m3u: #8bc34a; + --theme-palette-graph-output-hdhomerun: #8b5cf6; + --theme-palette-graph-output-strm: #bf616a; + --theme-palette-graph-port: #81a1c1; + --theme-palette-graph-port-border: #eceff4; + --theme-palette-graph-port-hover: #ebcb8b; + + --theme-palette-login-logo: color-mix(in srgb, #2e3440 80%, black 10%); + --theme-palette-series-title: #eceff4; + --theme-palette-series-backdrop-overlay: linear-gradient( + to right, + rgba(0, 0, 0, 1) 30%, + rgba(0, 0, 0, 0.85) 50%, + rgba(0, 0, 0, 0.75) 60%, + rgba(0, 0, 0, 0.35) 70%, + rgba(0, 0, 0, 0) 85% + ); +} diff --git a/frontend/scss/themes/_theme-paper.scss b/frontend/scss/themes/_theme-paper.scss new file mode 100644 index 000000000..a9ed880aa --- /dev/null +++ b/frontend/scss/themes/_theme-paper.scss @@ -0,0 +1,277 @@ +body[data-theme="paper"] { + --theme-palette-page: #f5efe5; + --theme-palette-page-alt: #d6c6ad; + --theme-palette-neutral-surface-980: #fffaf2e6; + --theme-palette-neutral-surface-960: #e7dccb; + --theme-palette-neutral-surface-940: #faf5ec; + --theme-palette-neutral-surface-920: #f4ede1; + --theme-palette-neutral-surface-900: #f6f0e6; + --theme-palette-neutral-surface-880: #efe4d4; + --theme-palette-neutral-surface-840: #eadfce; + --theme-palette-neutral-surface-820: #e5d8c6; + --theme-palette-neutral-surface-800: rgba(186, 163, 127, 0.2); + --theme-palette-neutral-surface-780: rgba(186, 163, 127, 0.12); + --theme-palette-neutral-surface-760: rgba(255, 255, 255, 0.45); + --theme-palette-neutral-surface-740: rgba(255, 255, 255, 0.55); + --theme-palette-neutral-surface-720: rgba(255, 255, 255, 0.35); + --theme-palette-neutral-surface-700: transparent; + --theme-palette-neutral-surface-680: rgba(204, 193, 173, 0.7); + --theme-palette-neutral-surface-660: rgba(0, 0, 0, 0.46); + --theme-palette-neutral-surface-640: rgba(0, 0, 0, 0.24); + --theme-palette-neutral-surface-620: #f7efe1; + --theme-palette-neutral-surface-600: #f0e7db; + --theme-palette-neutral-surface-580: #f0e7db; + --theme-palette-neutral-surface-560: #f8f1e7; + --theme-palette-neutral-surface-540: #efe4d4; + --theme-palette-neutral-surface-520: #e1d4c1; + --theme-palette-neutral-surface-code: #fff9f0; + --theme-palette-neutral-surface-code-solid: #fff9f0; + --theme-palette-neutral-surface-code-compare: rgba(214, 198, 173, 0.55); + --theme-palette-state-surface-option-active: #dff2dc; + + --theme-palette-accent-border-500: #d8c8b1; + --theme-palette-accent-border-460: #b8a17c; + --theme-palette-accent-border-420: #7c5f36; + --theme-palette-accent-border-380: #7c5f36; + --theme-palette-accent-border-340: #d8c8b1; + --theme-palette-neutral-border-560: #dfd3c3; + --theme-palette-neutral-border-520: #d8c8b1; + --theme-palette-neutral-border-500: #dfd3c3; + --theme-palette-neutral-border-460: #dfd3c3; + --theme-palette-neutral-border-420: rgba(72, 54, 34, 0.12); + --theme-palette-neutral-border-380: rgba(124, 95, 54, 0.84); + + --theme-palette-neutral-text-900: #342b23; + --theme-palette-neutral-text-760: #5d4c3d; + --theme-palette-neutral-text-700: #786656; + --theme-palette-neutral-text-620: #8c7968; + --theme-palette-neutral-text-580: #9c8a78; + --theme-palette-neutral-text-560: #8f7a67; + --theme-palette-neutral-text-500: #a29586; + --theme-palette-neutral-text-460: #6e6052; + --theme-palette-neutral-text-420: #c1b2a3; + + --theme-palette-text-header: #7c5f36; + --theme-palette-text-label: #9b7b4f; + --theme-palette-text-option-active: #23452a; + --theme-palette-text-menu-warn: #b86f52; + --theme-palette-text-menu-warn-strong: #a3483d; + + --theme-palette-primary: #8c6b3f; + --theme-palette-primary-soft: rgba(140, 107, 63, 0.08); + --theme-palette-primary-hover-soft: rgba(140, 107, 63, 0.14); + --theme-palette-primary-active-soft: rgba(140, 107, 63, 0.2); + --theme-palette-primary-hover: #e8dcc8; + --theme-palette-primary-hover-strong: #6d5230; + --theme-palette-primary-border: #8c6b3f; + --theme-palette-primary-menu-hover: #6d5230; + --theme-palette-primary-tool-hover: #6d5230; + --theme-palette-primary-tree-hover: rgba(140, 107, 63, 0.1); + --theme-palette-primary-tab-hover: #ebdfcf; + --theme-palette-primary-tab-active: #e2d3bf; + --theme-palette-primary-tab-border: #a78456; + --theme-palette-primary-spinner: #8c6b3f; + + --theme-palette-secondary: #b86f52; + --theme-palette-secondary-soft: #f5ddd3; + --theme-palette-secondary-hover: #edc2b2; + --theme-palette-secondary-border: #de9f8a; + + --theme-palette-neutral-light-980: #fffaf2e6; + --theme-palette-neutral-light-960: #fff9f0; + --theme-palette-neutral-light-940: #faf5ec; + --theme-palette-neutral-light-920: #f4ede1; + --theme-palette-neutral-light-900: #efe4d4; + --theme-palette-neutral-light-880: #eadfce; + --theme-palette-neutral-light-860: #e5d8c6; + --theme-palette-neutral-light-840: #e1d4c1; + --theme-palette-neutral-light-820: #f7efe1; + --theme-palette-neutral-light-800: #f0e7db; + --theme-palette-neutral-light-780: #dff2dc; + --theme-palette-neutral-light-760: rgba(255, 255, 255, 0.45); + --theme-palette-neutral-light-740: rgba(255, 255, 255, 0.55); + --theme-palette-neutral-light-720: rgba(255, 255, 255, 0.35); + --theme-palette-neutral-light-700: rgba(255, 255, 255, 0.2); + --theme-palette-neutral-light-680: rgba(214, 198, 173, 0.55); + + --theme-palette-neutral-mid-900: #342b23; + --theme-palette-neutral-mid-760: #5d4c3d; + --theme-palette-neutral-mid-700: #786656; + --theme-palette-neutral-mid-660: #8c7968; + --theme-palette-neutral-mid-620: #9c8a78; + --theme-palette-neutral-mid-580: #a99888; + --theme-palette-neutral-mid-520: #c1b2a3; + + --theme-palette-primary-tone-600: #5f4728; + --theme-palette-primary-tone-560: #6d5230; + --theme-palette-primary-tone-540: #8c6b3f; + --theme-palette-primary-tone-520: #a78456; + --theme-palette-primary-tone-500: #b99563; + --theme-palette-primary-tone-460: #d6c6ad; + --theme-palette-primary-tone-420: #ccb28b; + --theme-palette-primary-tone-380: #d8c8b1; + --theme-palette-primary-tone-340: #e2d3bf; + --theme-palette-primary-tone-300: #e8dcc8; + --theme-palette-primary-tone-260: #ebdfcf; + --theme-palette-primary-tone-220: #dff2dc; + --theme-palette-primary-tone-200: rgba(140, 107, 63, 0.1); + --theme-palette-primary-tone-180: rgba(140, 107, 63, 0.2); + --theme-palette-primary-tone-160: rgba(140, 107, 63, 0.08); + --theme-palette-primary-tone-140: #c1b2a3; + + --theme-palette-danger-tone-520: #c75b4c; + --theme-palette-danger-tone-500: #a3483d; + --theme-palette-danger-tone-480: #d16a55; + --theme-palette-danger-tone-420: #b86f52; + --theme-palette-danger-tone-360: #9a6c5e; + --theme-palette-danger-tone-surface-250: #f5ddd3; + --theme-palette-danger-tone-surface-550: #edc2b2; + --theme-palette-danger-tone-border: #de9f8a; + + --theme-palette-success-tone-540: #5b8a5a; + --theme-palette-success-tone-520: #4d7c4c; + --theme-palette-success-tone-500: #3f6b3e; + --theme-palette-success-tone-460: #8db08a; + --theme-palette-success-tone-420: #588657; + --theme-palette-success-tone-380: #5a9b89; + --theme-palette-success-tone-340: #23452a; + --theme-palette-success-tone-soft-200: #dff2dc; + --theme-palette-success-tone-border: #b8d5b5; + --theme-palette-success-tone-strong: #4d7c4c; + --theme-palette-success-tone-hover: #cde7ca; + --theme-palette-success-tone-text: #23452a; + --theme-palette-success-tone-surface: #eef7eb; + + --theme-palette-warning-tone-520: #d0943c; + --theme-palette-warning-tone-500: #c0822f; + --theme-palette-warning-tone-460: #e5bb76; + --theme-palette-warning-tone-420: #b88746; + --theme-palette-warning-tone-surface: #fff3e0; + --theme-palette-warning-tone-border: #efcf9d; + + --theme-palette-info-tone-520: #4b7b83; + --theme-palette-info-tone-500: #5a9b89; + --theme-palette-info-tone-460: #6aaea6; + --theme-palette-info-tone-surface: #e7f3f1; + --theme-palette-info-tone-border: #bfded8; + + --theme-palette-accent-tone-540: #a56c9e; + --theme-palette-accent-tone-520: #8e5d88; + --theme-palette-accent-tone-500: #b989b2; + --theme-palette-accent-tone-460: #dbc2d7; + --theme-palette-accent-tone-surface: #f7eef6; + --theme-palette-accent-tone-border: #e5cfe0; + --theme-palette-accent-tone-soft-surface: #f7eef6; + --theme-palette-accent-tone-soft-hover: #f1e4ef; + --theme-palette-accent-tone-soft-border: #e5cfe0; + --theme-palette-accent-tone-text: #8e5d88; + --theme-palette-accent-tone-text-soft: #74496f; + + --theme-palette-quaternary-tone-500: #7c739d; + --theme-palette-quaternary-tone-surface: #f1eef8; + --theme-palette-emphasis-tone-500: #d16a55; + --theme-palette-highlight-tone-500: #e3c56a; + + --theme-palette-status-tag-surface: #f0e7db; + --theme-palette-status-tag-active-text: #23452a; + --theme-palette-status-tag-active-surface: #eef7eb; + --theme-palette-status-tag-active-border: #b8d5b5; + --theme-palette-status-tag-alt-text: #8e5d88; + --theme-palette-status-tag-alt-surface: #f7eef6; + --theme-palette-status-tag-alt-border: #e5cfe0; + --theme-palette-status-tag-expired-text: #8f5e1d; + --theme-palette-status-tag-expired-surface: #fff3e0; + --theme-palette-status-tag-expired-border: #efcf9d; + --theme-palette-status-tag-banned-text: #8c332e; + --theme-palette-status-tag-banned-surface: #f9e6df; + --theme-palette-status-tag-banned-border: #edc2b2; + + --theme-palette-status-live-surface: #eef7eb; + --theme-palette-status-video-surface: #e7f3f1; + --theme-palette-status-series-surface: #f1eef8; + + --theme-palette-shadow-popup: 0 10px 24px rgba(99, 82, 57, 0.14), 0 8px 10px rgba(99, 82, 57, 0.08); + --theme-palette-shadow-card: 0 4px 6px rgba(99, 82, 57, 0.08), 0 2px 4px rgba(99, 82, 57, 0.06); + --theme-palette-shadow-scrollbar-track: inset 0 0 6px rgba(99, 82, 57, 0.08); + --theme-palette-shadow-tab-header: 0 2px 4px rgba(99, 82, 57, 0.06); + --theme-palette-shadow-field-code: 0 4px 6px rgba(99, 82, 57, 0.08); + --theme-palette-shadow-toggle: 0 2px 6px rgba(52, 43, 35, 0.18); + --theme-palette-shadow-toast: 0 2px 5px rgba(99, 82, 57, 0.1); + --theme-palette-shadow-source-block: 0 1px 2px rgba(99, 82, 57, 0.08); + --theme-palette-shadow-glass: rgba(99, 82, 57, 0.05); + + --theme-palette-menu-icon-update: #8c6b3f; + --theme-palette-menu-icon-user: #5a9b89; + --theme-palette-menu-icon-api-server: #c0822f; + --theme-palette-menu-icon-main-config: #a56c9e; + --theme-palette-menu-icon-status: #5b8a5a; + + --theme-palette-code-identifier: #5a7ca5; + --theme-palette-code-var-access: #3f6b3e; + --theme-palette-code-field: #b88746; + --theme-palette-code-property: #8c6b3f; + --theme-palette-code-literal: #5b8a5a; + --theme-palette-code-num: #a56c9e; + --theme-palette-code-builtin: #c0822f; + --theme-palette-code-reserved: #a3483d; + --theme-palette-code-regex: #7c739d; + --theme-palette-code-enum: #b86f52; + --theme-palette-code-range: #5a9b89; + --theme-palette-code-op: #a3483d; + --theme-palette-code-compare-text: #342b23; + --theme-palette-code-bracket-1: #5a7ca5; + --theme-palette-code-bracket-2: #a56c9e; + --theme-palette-code-bracket-3: #b88746; + --theme-palette-code-any-match: #d16a55; + + --theme-palette-epg-program-surface: #fff9f0; + --theme-palette-epg-program-active-surface: #f0e7db; + --theme-palette-epg-program-text: #4a3b2d; + --theme-palette-epg-program-time: #9c8a78; + --theme-palette-epg-program-time-active: #8c6b3f; + --theme-palette-epg-past-surface: rgba(52, 43, 35, 0.06); + --theme-palette-epg-now-line: #c75b4c; + + --theme-palette-graph-grid-1: #d9cdbd55; + --theme-palette-graph-grid-2: #c6b49d55; + + --theme-palette-particle-1: #b99563; + --theme-palette-particle-2: #d6c6ad; + --theme-palette-particle-alpha-boost: 1.28; + + --theme-palette-chip-container-text: #8c6b3f; + --theme-palette-chip-container-surface: #efe4d4; + --theme-palette-chip-video-text: #3f6b3e; + --theme-palette-chip-video-surface: #eef7eb; + --theme-palette-chip-resolution-text: #8c332e; + --theme-palette-chip-resolution-surface: #f9e6df; + --theme-palette-chip-fps-text: #8f5e1d; + --theme-palette-chip-fps-surface: #fff3e0; + --theme-palette-chip-audio-text: #8e5d88; + --theme-palette-chip-audio-surface: #f7eef6; + --theme-palette-chip-audio-channels-text: #74496f; + + --theme-palette-graph-input-xtream: #8c6b3f; + --theme-palette-graph-input-m3u: #5a9b89; + --theme-palette-graph-input-library: #b989b2; + --theme-palette-graph-target: #4d7c4c; + --theme-palette-graph-output: #c0822f; + --theme-palette-graph-output-xtream: #6aaea6; + --theme-palette-graph-output-m3u: #5b8a5a; + --theme-palette-graph-output-hdhomerun: #7c739d; + --theme-palette-graph-output-strm: #d16a55; + --theme-palette-graph-port: #9c8a78; + --theme-palette-graph-port-border: #ffffff; + --theme-palette-graph-port-hover: #d0943c; + + --theme-palette-login-logo: color-mix(in srgb, #f5efe5 84%, #8c6b3f 8%); + --theme-palette-series-title: #4a3b2d; + --theme-palette-series-backdrop-overlay: linear-gradient( + to right, + rgba(245, 239, 229, 0.98) 28%, + rgba(245, 239, 229, 0.9) 48%, + rgba(245, 239, 229, 0.76) 60%, + rgba(245, 239, 229, 0.4) 72%, + rgba(245, 239, 229, 0) 86% + ); +} diff --git a/frontend/scss/themes/_theme-refined-dark.scss b/frontend/scss/themes/_theme-refined-dark.scss new file mode 100644 index 000000000..198cffc8d --- /dev/null +++ b/frontend/scss/themes/_theme-refined-dark.scss @@ -0,0 +1,267 @@ +body[data-theme="refined-dark"] { + --theme-palette-page: #08111f; + --theme-palette-page-alt: #060c17; + --theme-palette-neutral-surface-980: rgba(6, 13, 25, 0.9); + --theme-palette-neutral-surface-960: rgba(11, 22, 38, 0.96); + --theme-palette-neutral-surface-940: rgba(13, 27, 46, 0.82); + --theme-palette-neutral-surface-920: rgba(14, 31, 50, 0.68); + --theme-palette-neutral-surface-900: rgba(18, 36, 58, 0.62); + --theme-palette-neutral-surface-880: rgba(20, 40, 64, 0.58); + --theme-palette-neutral-surface-840: rgba(37, 99, 235, 0.22); + --theme-palette-neutral-surface-820: rgba(56, 89, 138, 0.28); + --theme-palette-neutral-surface-800: rgba(103, 157, 246, 0.18); + --theme-palette-neutral-surface-780: rgba(103, 157, 246, 0.1); + --theme-palette-neutral-surface-760: rgba(255, 255, 255, 0.09); + --theme-palette-neutral-surface-740: rgba(255, 255, 255, 0.06); + --theme-palette-neutral-surface-720: rgba(255, 255, 255, 0.12); + --theme-palette-neutral-surface-700: rgba(255, 255, 255, 0); + --theme-palette-neutral-surface-680: rgba(0, 0, 0, 0.18); + --theme-palette-neutral-surface-660: rgba(0, 0, 0, 0.56); + --theme-palette-neutral-surface-640: rgba(0, 0, 0, 0.34); + --theme-palette-neutral-surface-620: #44567388; + --theme-palette-neutral-surface-600: #1a243388; + --theme-palette-neutral-surface-580: #55657d88; + --theme-palette-neutral-surface-560: #2d374a; + --theme-palette-neutral-surface-540: #1b2b4288; + --theme-palette-neutral-surface-520: #121a27; + --theme-palette-neutral-surface-code: #171e2a99; + --theme-palette-neutral-surface-code-solid: #171e2a; + --theme-palette-neutral-surface-code-compare: #1d283888; + --theme-palette-state-surface-option-active: #34d39988; + + --theme-palette-accent-border-500: rgba(96, 165, 250, 0.2); + --theme-palette-accent-border-460: rgba(96, 165, 250, 0.38); + --theme-palette-accent-border-420: rgba(103, 157, 246, 0.72); + --theme-palette-accent-border-380: rgba(125, 175, 255, 0.84); + --theme-palette-accent-border-340: rgba(96, 165, 250, 0.22); + --theme-palette-neutral-border-560: #60708b; + --theme-palette-neutral-border-520: #43516a; + --theme-palette-neutral-border-500: #53627d; + --theme-palette-neutral-border-460: #334154; + --theme-palette-neutral-border-420: rgba(255, 255, 255, 0.12); + --theme-palette-neutral-border-380: rgba(96, 165, 250, 0.76); + + --theme-palette-neutral-text-900: #edf4ff; + --theme-palette-neutral-text-760: #d9e6fb; + --theme-palette-neutral-text-700: #b8c7df; + --theme-palette-neutral-text-620: #9eb0cd; + --theme-palette-neutral-text-580: #8396b6; + --theme-palette-neutral-text-560: #cad5e8; + --theme-palette-neutral-text-500: #9caecc; + --theme-palette-neutral-text-460: #7383a0; + --theme-palette-neutral-text-420: #4c5870; + + --theme-palette-text-header: #b8d6ff; + --theme-palette-text-label: #93c5fd; + --theme-palette-text-option-active: #000000; + --theme-palette-text-menu-warn: #b96665; + --theme-palette-text-menu-warn-strong: #dd7573; + + --theme-palette-primary: rgba(96, 165, 250, 0.32); + --theme-palette-primary-soft: rgba(59, 130, 246, 0.14); + --theme-palette-primary-hover-soft: rgba(96, 165, 250, 0.16); + --theme-palette-primary-active-soft: rgba(96, 165, 250, 0.22); + --theme-palette-primary-hover: rgba(59, 130, 246, 0.34); + --theme-palette-primary-hover-strong: rgba(96, 165, 250, 0.74); + --theme-palette-primary-border: rgba(96, 165, 250, 0.72); + --theme-palette-primary-menu-hover: rgba(59, 130, 246, 0.24); + --theme-palette-primary-tool-hover: #2563eb70; + --theme-palette-primary-tree-hover: #2563eb55; + --theme-palette-primary-tab-hover: #315e9c80; + --theme-palette-primary-tab-active: #22457488; + --theme-palette-primary-tab-border: #6aa7ff; + --theme-palette-primary-spinner: #60a5fa; + + --theme-palette-secondary: rgba(244, 114, 182, 0.54); + --theme-palette-secondary-soft: rgba(244, 114, 182, 0.2); + --theme-palette-secondary-hover: rgba(244, 114, 182, 0.4); + --theme-palette-secondary-border: rgba(244, 114, 182, 0.42); + + --theme-palette-neutral-dark-950: #060c17; + --theme-palette-neutral-dark-900: #08111f; + --theme-palette-neutral-dark-850: #121a27; + --theme-palette-neutral-dark-800: #171e2a; + --theme-palette-neutral-dark-780: #1d283888; + --theme-palette-neutral-dark-760: #1b2b4288; + --theme-palette-neutral-dark-740: #1a243388; + --theme-palette-neutral-dark-720: #23354d; + --theme-palette-neutral-dark-700: #2a3b56; + --theme-palette-neutral-dark-680: #324563; + --theme-palette-neutral-dark-660: #44567388; + --theme-palette-neutral-dark-640: #43516a; + --theme-palette-neutral-dark-620: #2d374a; + --theme-palette-neutral-dark-600: #55657d88; + --theme-palette-neutral-dark-580: #60708b; + --theme-palette-neutral-dark-560: #6f819f; + --theme-palette-neutral-dark-540: #4c5870; + --theme-palette-neutral-dark-520: #334154; + + --theme-palette-primary-tone-500: #7db8ff; + --theme-palette-primary-tone-450: #b8d6ff; + --theme-palette-primary-tone-420: #93c5fd; + --theme-palette-primary-tone-380: #7db8ff; + --theme-palette-primary-tone-340: #6e98ca; + --theme-palette-primary-tone-300: #84bbff; + --theme-palette-primary-tone-260: #6aa7ff; + --theme-palette-primary-tone-220: #38bdf8; + --theme-palette-primary-tone-200: #2563eb; + --theme-palette-primary-tone-180: #2f6db7; + --theme-palette-primary-tone-160: #1f4f8f; + --theme-palette-primary-tone-140: #1565c0; + + --theme-palette-danger-tone-520: #fb7185; + --theme-palette-danger-tone-500: #f43f5e; + --theme-palette-danger-tone-480: #ef476f; + --theme-palette-danger-tone-420: #e07a8b; + --theme-palette-danger-tone-360: #b96374; + --theme-palette-danger-tone-surface-250: rgba(244, 63, 94, 0.22); + --theme-palette-danger-tone-surface-550: rgba(244, 63, 94, 0.44); + --theme-palette-danger-tone-border: rgba(244, 63, 94, 0.42); + + --theme-palette-success-tone-540: #5eead4; + --theme-palette-success-tone-520: #34d399; + --theme-palette-success-tone-500: #14b8a6; + --theme-palette-success-tone-460: #86efac; + --theme-palette-success-tone-420: #4ade80; + --theme-palette-success-tone-380: #22c55e; + --theme-palette-success-tone-340: #245548; + --theme-palette-success-tone-soft-200: rgba(20, 184, 166, 0.2); + --theme-palette-success-tone-border: rgba(52, 211, 153, 0.34); + --theme-palette-success-tone-strong: rgba(52, 211, 153, 0.68); + --theme-palette-success-tone-hover: rgb(20 184 166 / 28%); + --theme-palette-success-tone-text: rgb(153, 246, 228); + --theme-palette-success-tone-surface: #14373288; + + --theme-palette-warning-tone-520: #fbbf24; + --theme-palette-warning-tone-500: #f59e0b; + --theme-palette-warning-tone-460: #ffc078; + --theme-palette-warning-tone-420: #f6c453; + --theme-palette-warning-tone-surface: #42341888; + --theme-palette-warning-tone-border: #c49b4a; + + --theme-palette-info-tone-520: #67e8f9; + --theme-palette-info-tone-500: #22d3ee; + --theme-palette-info-tone-460: #38bdf8; + --theme-palette-info-tone-surface: #132c3a88; + --theme-palette-info-tone-border: #2f6280; + + --theme-palette-accent-tone-540: #f472b6; + --theme-palette-accent-tone-520: #d946ef; + --theme-palette-accent-tone-500: #a855f7; + --theme-palette-accent-tone-460: #d8b4fe; + --theme-palette-accent-tone-surface: #341b4588; + --theme-palette-accent-tone-border: #6d28d9; + --theme-palette-accent-tone-soft-surface: rgba(168, 85, 247, 0.12); + --theme-palette-accent-tone-soft-hover: rgba(168, 85, 247, 0.22); + --theme-palette-accent-tone-soft-border: rgba(168, 85, 247, 0.34); + --theme-palette-accent-tone-text: rgb(228, 198, 255); + --theme-palette-accent-tone-text-soft: rgb(243, 224, 255); + + --theme-palette-quaternary-tone-500: #818cf8; + --theme-palette-quaternary-tone-surface: #313b7b88; + --theme-palette-emphasis-tone-500: #fb7185; + --theme-palette-highlight-tone-500: #fde047; + + --theme-palette-status-tag-surface: #26324688; + --theme-palette-status-tag-active-text: #5eead4; + --theme-palette-status-tag-active-surface: #14373288; + --theme-palette-status-tag-active-border: #245548; + --theme-palette-status-tag-alt-text: #d8b4fe; + --theme-palette-status-tag-alt-surface: #341b4588; + --theme-palette-status-tag-alt-border: #6d28d9; + --theme-palette-status-tag-expired-text: #efda8f; + --theme-palette-status-tag-expired-surface: #39332088; + --theme-palette-status-tag-expired-border: #c49b4a; + --theme-palette-status-tag-banned-text: #fda4af; + --theme-palette-status-tag-banned-surface: #4c233188; + --theme-palette-status-tag-banned-border: #9d3950; + + --theme-palette-status-live-surface: #0f4f4a88; + --theme-palette-status-video-surface: #16486a88; + --theme-palette-status-series-surface: #313b7b88; + + --theme-palette-shadow-popup: 0 12px 30px rgba(0, 0, 0, 0.46), inset 0 0 16px rgba(125, 184, 255, 0.06); + --theme-palette-shadow-card: 0 10px 24px rgba(0, 0, 0, 0.28); + --theme-palette-shadow-scrollbar-track: inset 0 0 6px rgba(0, 0, 0, 0.3); + --theme-palette-shadow-tab-header: 0 2px 4px rgba(0, 0, 0, 0.05); + --theme-palette-shadow-field-code: 0 4px 6px rgba(0, 0, 0, 0.1); + --theme-palette-shadow-toggle: 0 2px 6px rgba(0, 0, 0, 0.8); + --theme-palette-shadow-toast: 0 2px 5px rgba(0, 0, 0, 0.3); + --theme-palette-shadow-source-block: 0 1px 2px rgba(0, 0, 0, 0.2); + --theme-palette-shadow-glass: rgba(0, 0, 0, 0.14); + + --theme-palette-menu-icon-update: #b8d6ff; + --theme-palette-menu-icon-user: #22d3ee; + --theme-palette-menu-icon-api-server: #fbbf24; + --theme-palette-menu-icon-main-config: #d946ef; + --theme-palette-menu-icon-status: #5eead4; + + --theme-palette-code-identifier: #7db8ff; + --theme-palette-code-var-access: #b8ecff; + --theme-palette-code-field: #f0bf73; + --theme-palette-code-property: #d89a5a; + --theme-palette-code-literal: #65d6c1; + --theme-palette-code-num: #93c5fd; + --theme-palette-code-builtin: #fde68a; + --theme-palette-code-reserved: #fb7185; + --theme-palette-code-regex: #f0bf73; + --theme-palette-code-enum: #5eead4; + --theme-palette-code-range: #93c5fd; + --theme-palette-code-op: #7db8ff; + --theme-palette-code-compare-text: #edf4ff; + --theme-palette-code-bracket-1: #7db8ff; + --theme-palette-code-bracket-2: #d8b4fe; + --theme-palette-code-bracket-3: #99f6e4; + --theme-palette-code-any-match: #fb7185; + + --theme-palette-epg-program-surface: #16212f; + --theme-palette-epg-program-active-surface: #203147; + --theme-palette-epg-program-text: #edf4ff; + --theme-palette-epg-program-time: #7c8dad; + --theme-palette-epg-program-time-active: #b8d6ff; + --theme-palette-epg-past-surface: rgba(0, 0, 0, 0.14); + --theme-palette-epg-now-line: #fb7185; + + --theme-palette-graph-grid-1: #cdd6f630; + --theme-palette-graph-grid-2: #7db8ff24; + + --theme-palette-particle-1: #7db8ff; + --theme-palette-particle-2: #203147; + --theme-palette-particle-alpha-boost: 1.08; + + --theme-palette-chip-container-text: #93c5fd; + --theme-palette-chip-container-surface: #203147; + --theme-palette-chip-video-text: #99f6e4; + --theme-palette-chip-video-surface: #1d3a37; + --theme-palette-chip-resolution-text: #fda4af; + --theme-palette-chip-resolution-surface: #432531; + --theme-palette-chip-fps-text: #fde68a; + --theme-palette-chip-fps-surface: #47361f; + --theme-palette-chip-audio-text: #e9d5ff; + --theme-palette-chip-audio-surface: #3c284a; + --theme-palette-chip-audio-channels-text: #f3e8ff; + + --theme-palette-graph-input-xtream: #2563eb; + --theme-palette-graph-input-m3u: #60a5fa; + --theme-palette-graph-input-library: #93c5fd; + --theme-palette-graph-target: #14b8a6; + --theme-palette-graph-output: #f59e0b; + --theme-palette-graph-output-xtream: #38bdf8; + --theme-palette-graph-output-m3u: #34d399; + --theme-palette-graph-output-hdhomerun: #a855f7; + --theme-palette-graph-output-strm: #f43f5e; + --theme-palette-graph-port: #6b86aa; + --theme-palette-graph-port-border: #edf4ff; + --theme-palette-graph-port-hover: #fbbf24; + + --theme-palette-login-logo: color-mix(in srgb, #08111f 78%, #7db8ff 10%); + --theme-palette-series-title: #edf4ff; + --theme-palette-series-backdrop-overlay: linear-gradient( + to right, + rgba(0, 0, 0, 1) 30%, + rgba(0, 0, 0, 0.85) 50%, + rgba(0, 0, 0, 0.75) 60%, + rgba(0, 0, 0, 0.35) 70%, + rgba(0, 0, 0, 0) 85% + ); +} diff --git a/frontend/scss/themes/_theme-sun-washed-soft.scss b/frontend/scss/themes/_theme-sun-washed-soft.scss new file mode 100644 index 000000000..379af16f5 --- /dev/null +++ b/frontend/scss/themes/_theme-sun-washed-soft.scss @@ -0,0 +1,277 @@ +body[data-theme="sun-washed-soft"] { + --theme-palette-page: #f7f1ed; + --theme-palette-page-alt: #e6d8cb; + --theme-palette-neutral-surface-980: #fffaf2e6; + --theme-palette-neutral-surface-960: #e7dccb; + --theme-palette-neutral-surface-940: #faf5ec; + --theme-palette-neutral-surface-920: #f4ede1; + --theme-palette-neutral-surface-900: #f6f0e6; + --theme-palette-neutral-surface-880: #efe4d4; + --theme-palette-neutral-surface-840: #eadfce; + --theme-palette-neutral-surface-820: #e5d8c6; + --theme-palette-neutral-surface-800: rgba(186, 163, 127, 0.2); + --theme-palette-neutral-surface-780: rgba(186, 163, 127, 0.12); + --theme-palette-neutral-surface-760: rgba(255, 255, 255, 0.45); + --theme-palette-neutral-surface-740: rgba(255, 255, 255, 0.55); + --theme-palette-neutral-surface-720: rgba(255, 255, 255, 0.35); + --theme-palette-neutral-surface-700: transparent; + --theme-palette-neutral-surface-680: rgba(204, 193, 173, 0.7); + --theme-palette-neutral-surface-660: rgba(0, 0, 0, 0.46); + --theme-palette-neutral-surface-640: rgba(0, 0, 0, 0.24); + --theme-palette-neutral-surface-620: #f7efe1; + --theme-palette-neutral-surface-600: #f0e7db; + --theme-palette-neutral-surface-580: #f0e7db; + --theme-palette-neutral-surface-560: #f8f1e7; + --theme-palette-neutral-surface-540: #efe4d4; + --theme-palette-neutral-surface-520: #e1d4c1; + --theme-palette-neutral-surface-code: #fff9f0; + --theme-palette-neutral-surface-code-solid: #fff9f0; + --theme-palette-neutral-surface-code-compare: rgba(214, 198, 173, 0.55); + --theme-palette-state-surface-option-active: #edf6e8; + + --theme-palette-accent-border-500: #d8c8b1; + --theme-palette-accent-border-460: #b8a17c; + --theme-palette-accent-border-420: #7c5f36; + --theme-palette-accent-border-380: #7c5f36; + --theme-palette-accent-border-340: #d8c8b1; + --theme-palette-neutral-border-560: #dfd3c3; + --theme-palette-neutral-border-520: #d8c8b1; + --theme-palette-neutral-border-500: #dfd3c3; + --theme-palette-neutral-border-460: #dfd3c3; + --theme-palette-neutral-border-420: rgba(72, 54, 34, 0.12); + --theme-palette-neutral-border-380: rgba(124, 95, 54, 0.84); + + --theme-palette-neutral-text-900: #5b5551; + --theme-palette-neutral-text-760: #746d69; + --theme-palette-neutral-text-700: #8d8580; + --theme-palette-neutral-text-620: #9c948f; + --theme-palette-neutral-text-580: #ada49d; + --theme-palette-neutral-text-560: #8f7a67; + --theme-palette-neutral-text-500: #b7aea7; + --theme-palette-neutral-text-460: #6e6052; + --theme-palette-neutral-text-420: #c1b2a3; + + --theme-palette-text-header: #7c5f36; + --theme-palette-text-label: #9b7b4f; + --theme-palette-text-option-active: #23452a; + --theme-palette-text-menu-warn: #d99a8e; + --theme-palette-text-menu-warn-strong: #a3483d; + + --theme-palette-primary: #d5b28d; + --theme-palette-primary-soft: rgba(140, 107, 63, 0.08); + --theme-palette-primary-hover-soft: rgba(140, 107, 63, 0.14); + --theme-palette-primary-active-soft: rgba(140, 107, 63, 0.2); + --theme-palette-primary-hover: #e8dcc8; + --theme-palette-primary-hover-strong: #6d5230; + --theme-palette-primary-border: #d5b28d; + --theme-palette-primary-menu-hover: #6d5230; + --theme-palette-primary-tool-hover: #6d5230; + --theme-palette-primary-tree-hover: rgba(140, 107, 63, 0.1); + --theme-palette-primary-tab-hover: #ebdfcf; + --theme-palette-primary-tab-active: #e2d3bf; + --theme-palette-primary-tab-border: #a78456; + --theme-palette-primary-spinner: #d5b28d; + + --theme-palette-secondary: #d99a8e; + --theme-palette-secondary-soft: #f5ddd3; + --theme-palette-secondary-hover: #edc2b2; + --theme-palette-secondary-border: #de9f8a; + + --theme-palette-neutral-light-980: #fffaf2e6; + --theme-palette-neutral-light-960: #fff9f0; + --theme-palette-neutral-light-940: #faf5ec; + --theme-palette-neutral-light-920: #f4ede1; + --theme-palette-neutral-light-900: #efe4d4; + --theme-palette-neutral-light-880: #eadfce; + --theme-palette-neutral-light-860: #e5d8c6; + --theme-palette-neutral-light-840: #e1d4c1; + --theme-palette-neutral-light-820: #f7efe1; + --theme-palette-neutral-light-800: #f0e7db; + --theme-palette-neutral-light-780: #edf6e8; + --theme-palette-neutral-light-760: rgba(255, 255, 255, 0.45); + --theme-palette-neutral-light-740: rgba(255, 255, 255, 0.55); + --theme-palette-neutral-light-720: rgba(255, 255, 255, 0.35); + --theme-palette-neutral-light-700: rgba(255, 255, 255, 0.2); + --theme-palette-neutral-light-680: rgba(214, 198, 173, 0.55); + + --theme-palette-neutral-mid-900: #5b5551; + --theme-palette-neutral-mid-760: #746d69; + --theme-palette-neutral-mid-700: #8d8580; + --theme-palette-neutral-mid-660: #9c948f; + --theme-palette-neutral-mid-620: #ada49d; + --theme-palette-neutral-mid-580: #a99888; + --theme-palette-neutral-mid-520: #c1b2a3; + + --theme-palette-primary-tone-600: #5f4728; + --theme-palette-primary-tone-560: #6d5230; + --theme-palette-primary-tone-540: #d5b28d; + --theme-palette-primary-tone-520: #a78456; + --theme-palette-primary-tone-500: #dfc19e; + --theme-palette-primary-tone-460: #e6d8cb; + --theme-palette-primary-tone-420: #ccb28b; + --theme-palette-primary-tone-380: #d8c8b1; + --theme-palette-primary-tone-340: #e2d3bf; + --theme-palette-primary-tone-300: #e8dcc8; + --theme-palette-primary-tone-260: #ebdfcf; + --theme-palette-primary-tone-220: #edf6e8; + --theme-palette-primary-tone-200: rgba(140, 107, 63, 0.1); + --theme-palette-primary-tone-180: rgba(140, 107, 63, 0.2); + --theme-palette-primary-tone-160: rgba(140, 107, 63, 0.08); + --theme-palette-primary-tone-140: #c1b2a3; + + --theme-palette-danger-tone-520: #c75b4c; + --theme-palette-danger-tone-500: #a3483d; + --theme-palette-danger-tone-480: #d59085; + --theme-palette-danger-tone-420: #d99a8e; + --theme-palette-danger-tone-360: #9a6c5e; + --theme-palette-danger-tone-surface-250: #f5ddd3; + --theme-palette-danger-tone-surface-550: #edc2b2; + --theme-palette-danger-tone-border: #de9f8a; + + --theme-palette-success-tone-540: #9bb89a; + --theme-palette-success-tone-520: #4d7c4c; + --theme-palette-success-tone-500: #3f6b3e; + --theme-palette-success-tone-460: #8db08a; + --theme-palette-success-tone-420: #588657; + --theme-palette-success-tone-380: #8cbec2; + --theme-palette-success-tone-340: #23452a; + --theme-palette-success-tone-soft-200: #edf6e8; + --theme-palette-success-tone-border: #b8d5b5; + --theme-palette-success-tone-strong: #4d7c4c; + --theme-palette-success-tone-hover: #cde7ca; + --theme-palette-success-tone-text: #23452a; + --theme-palette-success-tone-surface: #eef6ec; + + --theme-palette-warning-tone-520: #d0943c; + --theme-palette-warning-tone-500: #d6a474; + --theme-palette-warning-tone-460: #e5bb76; + --theme-palette-warning-tone-420: #b88746; + --theme-palette-warning-tone-surface: #fff1e8; + --theme-palette-warning-tone-border: #efcf9d; + + --theme-palette-info-tone-520: #4b7b83; + --theme-palette-info-tone-500: #8cbec2; + --theme-palette-info-tone-460: #6aaea6; + --theme-palette-info-tone-surface: #e9f4f5; + --theme-palette-info-tone-border: #bfded8; + + --theme-palette-accent-tone-540: #c8a6c9; + --theme-palette-accent-tone-520: #ad7ba8; + --theme-palette-accent-tone-500: #d4b3d2; + --theme-palette-accent-tone-460: #dbc2d7; + --theme-palette-accent-tone-surface: #f7eef7; + --theme-palette-accent-tone-border: #e5cfe0; + --theme-palette-accent-tone-soft-surface: #f7eef7; + --theme-palette-accent-tone-soft-hover: #f1e4ef; + --theme-palette-accent-tone-soft-border: #e5cfe0; + --theme-palette-accent-tone-text: #ad7ba8; + --theme-palette-accent-tone-text-soft: #8e647f; + + --theme-palette-quaternary-tone-500: #9c95b9; + --theme-palette-quaternary-tone-surface: #f2eef8; + --theme-palette-emphasis-tone-500: #d59085; + --theme-palette-highlight-tone-500: #e3c56a; + + --theme-palette-status-tag-surface: #f0e7db; + --theme-palette-status-tag-active-text: #23452a; + --theme-palette-status-tag-active-surface: #eef6ec; + --theme-palette-status-tag-active-border: #b8d5b5; + --theme-palette-status-tag-alt-text: #ad7ba8; + --theme-palette-status-tag-alt-surface: #f7eef7; + --theme-palette-status-tag-alt-border: #e5cfe0; + --theme-palette-status-tag-expired-text: #8f5e1d; + --theme-palette-status-tag-expired-surface: #fff1e8; + --theme-palette-status-tag-expired-border: #efcf9d; + --theme-palette-status-tag-banned-text: #8c332e; + --theme-palette-status-tag-banned-surface: #faebe7; + --theme-palette-status-tag-banned-border: #edc2b2; + + --theme-palette-status-live-surface: #eef6ec; + --theme-palette-status-video-surface: #e9f4f5; + --theme-palette-status-series-surface: #f2eef8; + + --theme-palette-shadow-popup: 0 10px 24px rgba(99, 82, 57, 0.14), 0 8px 10px rgba(99, 82, 57, 0.08); + --theme-palette-shadow-card: 0 4px 6px rgba(99, 82, 57, 0.08), 0 2px 4px rgba(99, 82, 57, 0.06); + --theme-palette-shadow-scrollbar-track: inset 0 0 6px rgba(99, 82, 57, 0.08); + --theme-palette-shadow-tab-header: 0 2px 4px rgba(99, 82, 57, 0.06); + --theme-palette-shadow-field-code: 0 4px 6px rgba(99, 82, 57, 0.08); + --theme-palette-shadow-toggle: 0 2px 6px rgba(52, 43, 35, 0.18); + --theme-palette-shadow-toast: 0 2px 5px rgba(99, 82, 57, 0.1); + --theme-palette-shadow-source-block: 0 1px 2px rgba(99, 82, 57, 0.08); + --theme-palette-shadow-glass: rgba(99, 82, 57, 0.05); + + --theme-palette-menu-icon-update: #d5b28d; + --theme-palette-menu-icon-user: #8cbec2; + --theme-palette-menu-icon-api-server: #d6a474; + --theme-palette-menu-icon-main-config: #c8a6c9; + --theme-palette-menu-icon-status: #9bb89a; + + --theme-palette-code-identifier: #5a7ca5; + --theme-palette-code-var-access: #3f6b3e; + --theme-palette-code-field: #b88746; + --theme-palette-code-property: #d5b28d; + --theme-palette-code-literal: #9bb89a; + --theme-palette-code-num: #c8a6c9; + --theme-palette-code-builtin: #d6a474; + --theme-palette-code-reserved: #a3483d; + --theme-palette-code-regex: #9c95b9; + --theme-palette-code-enum: #d99a8e; + --theme-palette-code-range: #8cbec2; + --theme-palette-code-op: #a3483d; + --theme-palette-code-compare-text: #5b5551; + --theme-palette-code-bracket-1: #5a7ca5; + --theme-palette-code-bracket-2: #c8a6c9; + --theme-palette-code-bracket-3: #b88746; + --theme-palette-code-any-match: #d59085; + + --theme-palette-epg-program-surface: #fff9f0; + --theme-palette-epg-program-active-surface: #f0e7db; + --theme-palette-epg-program-text: #4a3b2d; + --theme-palette-epg-program-time: #ada49d; + --theme-palette-epg-program-time-active: #d5b28d; + --theme-palette-epg-past-surface: rgba(52, 43, 35, 0.06); + --theme-palette-epg-now-line: #c75b4c; + + --theme-palette-graph-grid-1: #d9cdbd55; + --theme-palette-graph-grid-2: #c6b49d55; + + --theme-palette-particle-1: #dfc19e; + --theme-palette-particle-2: #e6d8cb; + --theme-palette-particle-alpha-boost: 1.28; + + --theme-palette-chip-container-text: #d5b28d; + --theme-palette-chip-container-surface: #efe4d4; + --theme-palette-chip-video-text: #3f6b3e; + --theme-palette-chip-video-surface: #eef6ec; + --theme-palette-chip-resolution-text: #8c332e; + --theme-palette-chip-resolution-surface: #faebe7; + --theme-palette-chip-fps-text: #8f5e1d; + --theme-palette-chip-fps-surface: #fff1e8; + --theme-palette-chip-audio-text: #ad7ba8; + --theme-palette-chip-audio-surface: #f7eef7; + --theme-palette-chip-audio-channels-text: #8e647f; + + --theme-palette-graph-input-xtream: #d5b28d; + --theme-palette-graph-input-m3u: #8cbec2; + --theme-palette-graph-input-library: #d4b3d2; + --theme-palette-graph-target: #4d7c4c; + --theme-palette-graph-output: #d6a474; + --theme-palette-graph-output-xtream: #6aaea6; + --theme-palette-graph-output-m3u: #9bb89a; + --theme-palette-graph-output-hdhomerun: #9c95b9; + --theme-palette-graph-output-strm: #d59085; + --theme-palette-graph-port: #ada49d; + --theme-palette-graph-port-border: #ffffff; + --theme-palette-graph-port-hover: #d0943c; + + --theme-palette-login-logo: color-mix(in srgb, #f7f1ed 84%, #d5b28d 8%); + --theme-palette-series-title: #4a3b2d; + --theme-palette-series-backdrop-overlay: linear-gradient( + to right, + rgba(245, 239, 229, 0.98) 28%, + rgba(245, 239, 229, 0.9) 48%, + rgba(245, 239, 229, 0.76) 60%, + rgba(245, 239, 229, 0.4) 72%, + rgba(245, 239, 229, 0) 86% + ); +} diff --git a/frontend/scss/themes/_theme-vibrant-elegance.scss b/frontend/scss/themes/_theme-vibrant-elegance.scss new file mode 100644 index 000000000..69b6e4887 --- /dev/null +++ b/frontend/scss/themes/_theme-vibrant-elegance.scss @@ -0,0 +1,267 @@ +body[data-theme="vibrant-elegance"] { + --theme-palette-page: #091317; + --theme-palette-page-alt: #10242b; + --theme-palette-neutral-surface-980: rgba(4, 20, 28, 0.9); + --theme-palette-neutral-surface-960: rgba(12, 31, 38, 0.96); + --theme-palette-neutral-surface-940: rgba(18, 49, 58, 0.8); + --theme-palette-neutral-surface-920: rgba(18, 49, 58, 0.7); + --theme-palette-neutral-surface-900: rgba(22, 58, 68, 0.64); + --theme-palette-neutral-surface-880: rgba(20, 66, 76, 0.56); + --theme-palette-neutral-surface-840: rgba(25, 80, 90, 0.44); + --theme-palette-neutral-surface-820: rgba(38, 103, 114, 0.28); + --theme-palette-neutral-surface-800: rgba(115, 203, 188, 0.22); + --theme-palette-neutral-surface-780: rgba(115, 203, 188, 0.12); + --theme-palette-neutral-surface-760: rgba(182, 244, 216, 0.14); + --theme-palette-neutral-surface-740: rgba(182, 244, 216, 0.08); + --theme-palette-neutral-surface-720: rgba(221, 255, 244, 0.16); + --theme-palette-neutral-surface-700: rgba(255, 255, 255, 0); + --theme-palette-neutral-surface-680: rgba(0, 0, 0, 0.2); + --theme-palette-neutral-surface-660: rgba(0, 0, 0, 0.56); + --theme-palette-neutral-surface-640: rgba(0, 0, 0, 0.34); + --theme-palette-neutral-surface-620: #21505b88; + --theme-palette-neutral-surface-600: #17394388; + --theme-palette-neutral-surface-580: #3e707788; + --theme-palette-neutral-surface-560: #20454b; + --theme-palette-neutral-surface-540: #10323c88; + --theme-palette-neutral-surface-520: #0d252d; + --theme-palette-neutral-surface-code: #071d23cc; + --theme-palette-neutral-surface-code-solid: #071d23; + --theme-palette-neutral-surface-code-compare: #14343b99; + --theme-palette-state-surface-option-active: #8ef6c688; + + --theme-palette-accent-border-500: rgba(94, 234, 212, 0.26); + --theme-palette-accent-border-460: rgba(94, 234, 212, 0.44); + --theme-palette-accent-border-420: rgba(45, 212, 191, 0.82); + --theme-palette-accent-border-380: rgba(94, 234, 212, 0.9); + --theme-palette-accent-border-340: rgba(94, 234, 212, 0.3); + --theme-palette-neutral-border-560: #3b6168; + --theme-palette-neutral-border-520: #2f565d; + --theme-palette-neutral-border-500: #477178; + --theme-palette-neutral-border-460: #21474e; + --theme-palette-neutral-border-420: rgba(226, 255, 247, 0.18); + --theme-palette-neutral-border-380: rgba(56, 189, 248, 0.9); + + --theme-palette-neutral-text-900: #fff7df; + --theme-palette-neutral-text-760: #f3e7bb; + --theme-palette-neutral-text-700: #afdbd3; + --theme-palette-neutral-text-620: #8bb8b2; + --theme-palette-neutral-text-580: #6e9995; + --theme-palette-neutral-text-560: #9dc5bf; + --theme-palette-neutral-text-500: #7ea19b; + --theme-palette-neutral-text-460: #5d7f7a; + --theme-palette-neutral-text-420: #36504d; + + --theme-palette-text-header: #ffd166; + --theme-palette-text-label: #5de1d8; + --theme-palette-text-option-active: #042f2e; + --theme-palette-text-menu-warn: #f4c55e; + --theme-palette-text-menu-warn-strong: #f0a33b; + + --theme-palette-primary: rgba(255, 209, 102, 0.46); + --theme-palette-primary-soft: rgba(255, 209, 102, 0.18); + --theme-palette-primary-hover-soft: rgba(34, 211, 238, 0.18); + --theme-palette-primary-active-soft: rgba(34, 211, 238, 0.28); + --theme-palette-primary-hover: rgba(255, 209, 102, 0.28); + --theme-palette-primary-hover-strong: rgba(255, 209, 102, 0.9); + --theme-palette-primary-border: rgba(255, 209, 102, 0.82); + --theme-palette-primary-menu-hover: rgba(255, 209, 102, 0.26); + --theme-palette-primary-tool-hover: #b8872d99; + --theme-palette-primary-tree-hover: #0d948888; + --theme-palette-primary-tab-hover: #155e7588; + --theme-palette-primary-tab-active: #164e6388; + --theme-palette-primary-tab-border: #ffd166; + --theme-palette-primary-spinner: #ffd166; + + --theme-palette-secondary: rgba(93, 225, 216, 0.72); + --theme-palette-secondary-soft: rgba(93, 225, 216, 0.18); + --theme-palette-secondary-hover: rgba(93, 225, 216, 0.34); + --theme-palette-secondary-border: rgba(93, 225, 216, 0.54); + + --theme-palette-neutral-dark-950: #07161a; + --theme-palette-neutral-dark-900: #0b1f28; + --theme-palette-neutral-dark-850: #0d252d; + --theme-palette-neutral-dark-800: #071d23; + --theme-palette-neutral-dark-780: #14343b99; + --theme-palette-neutral-dark-760: #10323c88; + --theme-palette-neutral-dark-740: #17394388; + --theme-palette-neutral-dark-720: #1a4950; + --theme-palette-neutral-dark-700: #204f57; + --theme-palette-neutral-dark-680: #2d6970; + --theme-palette-neutral-dark-660: #21505b88; + --theme-palette-neutral-dark-640: #2f565d; + --theme-palette-neutral-dark-620: #20454b; + --theme-palette-neutral-dark-600: #3e707788; + --theme-palette-neutral-dark-580: #3b6168; + --theme-palette-neutral-dark-560: #477178; + --theme-palette-neutral-dark-540: #36504d; + --theme-palette-neutral-dark-520: #21474e; + + --theme-palette-primary-tone-500: #ffd166; + --theme-palette-primary-tone-450: #ffe08f; + --theme-palette-primary-tone-420: #5de1d8; + --theme-palette-primary-tone-380: #67e8f9; + --theme-palette-primary-tone-340: #54b7c3; + --theme-palette-primary-tone-300: #4fd1c5; + --theme-palette-primary-tone-260: #26c9c4; + --theme-palette-primary-tone-220: #a7c957; + --theme-palette-primary-tone-200: #0f766e; + --theme-palette-primary-tone-180: #155e75; + --theme-palette-primary-tone-160: #164e63; + --theme-palette-primary-tone-140: #0e7490; + + --theme-palette-danger-tone-520: #f0a33b; + --theme-palette-danger-tone-500: #e8982e; + --theme-palette-danger-tone-480: #f97360; + --theme-palette-danger-tone-420: #f59e8b; + --theme-palette-danger-tone-360: #c97b71; + --theme-palette-danger-tone-surface-250: rgba(249, 115, 96, 0.22); + --theme-palette-danger-tone-surface-550: rgba(249, 115, 96, 0.44); + --theme-palette-danger-tone-border: rgba(249, 115, 96, 0.5); + + --theme-palette-success-tone-540: #6de4d2; + --theme-palette-success-tone-520: #36cfc9; + --theme-palette-success-tone-500: #10b981; + --theme-palette-success-tone-460: #8ef6c6; + --theme-palette-success-tone-420: #4ade80; + --theme-palette-success-tone-380: #14b8a6; + --theme-palette-success-tone-340: #0f766e; + --theme-palette-success-tone-soft-200: rgba(52, 211, 153, 0.2); + --theme-palette-success-tone-border: rgba(52, 211, 153, 0.38); + --theme-palette-success-tone-strong: rgba(52, 211, 153, 0.74); + --theme-palette-success-tone-hover: rgba(16, 185, 129, 0.28); + --theme-palette-success-tone-text: #a7f3d0; + --theme-palette-success-tone-surface: #193d3388; + + --theme-palette-warning-tone-520: #f2c14e; + --theme-palette-warning-tone-500: #e9b949; + --theme-palette-warning-tone-460: #ffd166; + --theme-palette-warning-tone-420: #f4b942; + --theme-palette-warning-tone-surface: #4b371d88; + --theme-palette-warning-tone-border: #c28f38; + + --theme-palette-info-tone-520: #67e8f9; + --theme-palette-info-tone-500: #26c9c4; + --theme-palette-info-tone-460: #40c4d8; + --theme-palette-info-tone-surface: #11374488; + --theme-palette-info-tone-border: #2e788c; + + --theme-palette-accent-tone-540: #5de1d8; + --theme-palette-accent-tone-520: #40c4d8; + --theme-palette-accent-tone-500: #7ad9de; + --theme-palette-accent-tone-460: #d8b4fe; + --theme-palette-accent-tone-surface: #21414a88; + --theme-palette-accent-tone-border: #7c3aed; + --theme-palette-accent-tone-soft-surface: rgba(192, 132, 252, 0.1); + --theme-palette-accent-tone-soft-hover: rgba(192, 132, 252, 0.2); + --theme-palette-accent-tone-soft-border: rgba(192, 132, 252, 0.36); + --theme-palette-accent-tone-text: #f0abfc; + --theme-palette-accent-tone-text-soft: #f5d0fe; + + --theme-palette-quaternary-tone-500: #818cf8; + --theme-palette-quaternary-tone-surface: #13383f88; + --theme-palette-emphasis-tone-500: #fb7185; + --theme-palette-highlight-tone-500: #fde047; + + --theme-palette-status-tag-surface: #1b394088; + --theme-palette-status-tag-active-text: #4ade80; + --theme-palette-status-tag-active-surface: #193d3388; + --theme-palette-status-tag-active-border: #0f766e; + --theme-palette-status-tag-alt-text: #34d6c8; + --theme-palette-status-tag-alt-surface: #21414a88; + --theme-palette-status-tag-alt-border: #7c3aed; + --theme-palette-status-tag-expired-text: #ffd166; + --theme-palette-status-tag-expired-surface: #4b371d88; + --theme-palette-status-tag-expired-border: #c28f38; + --theme-palette-status-tag-banned-text: #f0a33b; + --theme-palette-status-tag-banned-surface: #4a262188; + --theme-palette-status-tag-banned-border: #a95f55; + + --theme-palette-status-live-surface: #193d3388; + --theme-palette-status-video-surface: #11374488; + --theme-palette-status-series-surface: #13383f88; + + --theme-palette-shadow-popup: 0 10px 28px rgba(0, 0, 0, 0.42), inset 0 0 12px rgba(147, 197, 253, 0.08); + --theme-palette-shadow-card: 0 8px 20px rgba(0, 0, 0, 0.24); + --theme-palette-shadow-scrollbar-track: inset 0 0 6px rgba(0, 0, 0, 0.26); + --theme-palette-shadow-tab-header: 0 2px 4px rgba(0, 0, 0, 0.08); + --theme-palette-shadow-field-code: 0 4px 6px rgba(0, 0, 0, 0.14); + --theme-palette-shadow-toggle: 0 2px 6px rgba(0, 0, 0, 0.72); + --theme-palette-shadow-toast: 0 2px 5px rgba(0, 0, 0, 0.28); + --theme-palette-shadow-source-block: 0 1px 2px rgba(0, 0, 0, 0.18); + --theme-palette-shadow-glass: rgba(0, 0, 0, 0.12); + + --theme-palette-menu-icon-update: #ffd166; + --theme-palette-menu-icon-user: #40c4d8; + --theme-palette-menu-icon-api-server: #f0a33b; + --theme-palette-menu-icon-main-config: #5de1d8; + --theme-palette-menu-icon-status: #fde047; + + --theme-palette-code-identifier: #67e8f9; + --theme-palette-code-var-access: #a5f3fc; + --theme-palette-code-field: #f7b267; + --theme-palette-code-property: #ff9f6e; + --theme-palette-code-literal: #6ee7b7; + --theme-palette-code-num: #5de1d8; + --theme-palette-code-builtin: #f9e27d; + --theme-palette-code-reserved: #f0a33b; + --theme-palette-code-regex: #f7b267; + --theme-palette-code-enum: #34d399; + --theme-palette-code-range: #5de1d8; + --theme-palette-code-op: #67e8f9; + --theme-palette-code-compare-text: #ffffff; + --theme-palette-code-bracket-1: #67e8f9; + --theme-palette-code-bracket-2: #7ed7c9; + --theme-palette-code-bracket-3: #fde68a; + --theme-palette-code-any-match: #fb7185; + + --theme-palette-epg-program-surface: #0c2732; + --theme-palette-epg-program-active-surface: #113847; + --theme-palette-epg-program-text: #ffffff; + --theme-palette-epg-program-time: #84a9b0; + --theme-palette-epg-program-time-active: #b8f6ec; + --theme-palette-epg-past-surface: rgba(0, 0, 0, 0.14); + --theme-palette-epg-now-line: #f0a33b; + + --theme-palette-graph-grid-1: #a7f3d030; + --theme-palette-graph-grid-2: #67e8f930; + + --theme-palette-particle-1: #ffd166; + --theme-palette-particle-2: #1b3940; + --theme-palette-particle-alpha-boost: 1.2; + + --theme-palette-chip-container-text: #5de1d8; + --theme-palette-chip-container-surface: #133742; + --theme-palette-chip-video-text: #8ef6c6; + --theme-palette-chip-video-surface: #14342d; + --theme-palette-chip-resolution-text: #ffb4a2; + --theme-palette-chip-resolution-surface: #4a2621; + --theme-palette-chip-fps-text: #ffd166; + --theme-palette-chip-fps-surface: #46371d; + --theme-palette-chip-audio-text: #f0abfc; + --theme-palette-chip-audio-surface: #3d2148; + --theme-palette-chip-audio-channels-text: #f5d0fe; + + --theme-palette-graph-input-xtream: #26c9c4; + --theme-palette-graph-input-m3u: #40c4d8; + --theme-palette-graph-input-library: #7ed7c9; + --theme-palette-graph-target: #14b8a6; + --theme-palette-graph-output: #e9b949; + --theme-palette-graph-output-xtream: #6de4d2; + --theme-palette-graph-output-m3u: #34d399; + --theme-palette-graph-output-hdhomerun: #818cf8; + --theme-palette-graph-output-strm: #fb7185; + --theme-palette-graph-port: #5f8b93; + --theme-palette-graph-port-border: #ffffff; + --theme-palette-graph-port-hover: #f2c14e; + + --theme-palette-login-logo: color-mix(in srgb, #07161a 78%, #6de4d2 10%); + --theme-palette-series-title: #ffffff; + --theme-palette-series-backdrop-overlay: linear-gradient( + to right, + rgba(6, 21, 27, 1) 28%, + rgba(6, 21, 27, 0.9) 48%, + rgba(6, 21, 27, 0.76) 60%, + rgba(6, 21, 27, 0.4) 72%, + rgba(6, 21, 27, 0) 86% + ); +} diff --git a/frontend/scss/themes/_theme-vintage-neutral.scss b/frontend/scss/themes/_theme-vintage-neutral.scss new file mode 100644 index 000000000..901ef53c6 --- /dev/null +++ b/frontend/scss/themes/_theme-vintage-neutral.scss @@ -0,0 +1,277 @@ +body[data-theme="vintage-neutral"] { + --theme-palette-page: #efe7d9; + --theme-palette-page-alt: #c7b89c; + --theme-palette-neutral-surface-980: #fffaf2e6; + --theme-palette-neutral-surface-960: #ddd4c7; + --theme-palette-neutral-surface-940: #f4efe6; + --theme-palette-neutral-surface-920: #ece4d8; + --theme-palette-neutral-surface-900: #e5dccf; + --theme-palette-neutral-surface-880: #efe4d4; + --theme-palette-neutral-surface-840: #eadfce; + --theme-palette-neutral-surface-820: #e5d8c6; + --theme-palette-neutral-surface-800: rgba(186, 163, 127, 0.2); + --theme-palette-neutral-surface-780: rgba(186, 163, 127, 0.12); + --theme-palette-neutral-surface-760: rgba(255, 255, 255, 0.45); + --theme-palette-neutral-surface-740: rgba(255, 255, 255, 0.55); + --theme-palette-neutral-surface-720: rgba(255, 255, 255, 0.35); + --theme-palette-neutral-surface-700: transparent; + --theme-palette-neutral-surface-680: rgba(204, 193, 173, 0.7); + --theme-palette-neutral-surface-660: rgba(0, 0, 0, 0.46); + --theme-palette-neutral-surface-640: rgba(0, 0, 0, 0.24); + --theme-palette-neutral-surface-620: #f7efe1; + --theme-palette-neutral-surface-600: #f0e7db; + --theme-palette-neutral-surface-580: #f0e7db; + --theme-palette-neutral-surface-560: #f8f1e7; + --theme-palette-neutral-surface-540: #efe4d4; + --theme-palette-neutral-surface-520: #e1d4c1; + --theme-palette-neutral-surface-code: #fff9f0; + --theme-palette-neutral-surface-code-solid: #fff9f0; + --theme-palette-neutral-surface-code-compare: rgba(214, 198, 173, 0.55); + --theme-palette-state-surface-option-active: #e7eee0; + + --theme-palette-accent-border-500: #d8c8b1; + --theme-palette-accent-border-460: #b8a17c; + --theme-palette-accent-border-420: #7c5f36; + --theme-palette-accent-border-380: #7c5f36; + --theme-palette-accent-border-340: #d8c8b1; + --theme-palette-neutral-border-560: #dfd3c3; + --theme-palette-neutral-border-520: #d8c8b1; + --theme-palette-neutral-border-500: #dfd3c3; + --theme-palette-neutral-border-460: #dfd3c3; + --theme-palette-neutral-border-420: rgba(72, 54, 34, 0.12); + --theme-palette-neutral-border-380: rgba(124, 95, 54, 0.84); + + --theme-palette-neutral-text-900: #433a31; + --theme-palette-neutral-text-760: #665b50; + --theme-palette-neutral-text-700: #7e7367; + --theme-palette-neutral-text-620: #918477; + --theme-palette-neutral-text-580: #a09282; + --theme-palette-neutral-text-560: #8f7a67; + --theme-palette-neutral-text-500: #aba091; + --theme-palette-neutral-text-460: #6e6052; + --theme-palette-neutral-text-420: #c1b2a3; + + --theme-palette-text-header: #6d6b52; + --theme-palette-text-label: #7f8a73; + --theme-palette-text-option-active: #23452a; + --theme-palette-text-menu-warn: #b27c5d; + --theme-palette-text-menu-warn-strong: #a3483d; + + --theme-palette-primary: #7b8565; + --theme-palette-primary-soft: rgba(140, 107, 63, 0.08); + --theme-palette-primary-hover-soft: rgba(140, 107, 63, 0.14); + --theme-palette-primary-active-soft: rgba(140, 107, 63, 0.2); + --theme-palette-primary-hover: #d8d0c2; + --theme-palette-primary-hover-strong: #626b4d; + --theme-palette-primary-border: #7b8565; + --theme-palette-primary-menu-hover: #626b4d; + --theme-palette-primary-tool-hover: #626b4d; + --theme-palette-primary-tree-hover: rgba(140, 107, 63, 0.1); + --theme-palette-primary-tab-hover: #ebdfcf; + --theme-palette-primary-tab-active: #e2d3bf; + --theme-palette-primary-tab-border: #a78456; + --theme-palette-primary-spinner: #7b8565; + + --theme-palette-secondary: #b28b68; + --theme-palette-secondary-soft: #eee0d3; + --theme-palette-secondary-hover: #e1ccbc; + --theme-palette-secondary-border: #d0b39a; + + --theme-palette-neutral-light-980: #fffaf2e6; + --theme-palette-neutral-light-960: #fff9f0; + --theme-palette-neutral-light-940: #faf5ec; + --theme-palette-neutral-light-920: #f4ede1; + --theme-palette-neutral-light-900: #efe4d4; + --theme-palette-neutral-light-880: #eadfce; + --theme-palette-neutral-light-860: #e5d8c6; + --theme-palette-neutral-light-840: #e1d4c1; + --theme-palette-neutral-light-820: #f7efe1; + --theme-palette-neutral-light-800: #f0e7db; + --theme-palette-neutral-light-780: #e7eee0; + --theme-palette-neutral-light-760: rgba(255, 255, 255, 0.45); + --theme-palette-neutral-light-740: rgba(255, 255, 255, 0.55); + --theme-palette-neutral-light-720: rgba(255, 255, 255, 0.35); + --theme-palette-neutral-light-700: rgba(255, 255, 255, 0.2); + --theme-palette-neutral-light-680: rgba(214, 198, 173, 0.55); + + --theme-palette-neutral-mid-900: #3f352b; + --theme-palette-neutral-mid-760: #62564a; + --theme-palette-neutral-mid-700: #7b6f62; + --theme-palette-neutral-mid-660: #918477; + --theme-palette-neutral-mid-620: #a09282; + --theme-palette-neutral-mid-580: #a99888; + --theme-palette-neutral-mid-520: #c1b2a3; + + --theme-palette-primary-tone-600: #5f4728; + --theme-palette-primary-tone-560: #6d5230; + --theme-palette-primary-tone-540: #7b8565; + --theme-palette-primary-tone-520: #a78456; + --theme-palette-primary-tone-500: #8f9978; + --theme-palette-primary-tone-460: #cdc0a8; + --theme-palette-primary-tone-420: #ccb28b; + --theme-palette-primary-tone-380: #d8c8b1; + --theme-palette-primary-tone-340: #e2d3bf; + --theme-palette-primary-tone-300: #e8dcc8; + --theme-palette-primary-tone-260: #ebdfcf; + --theme-palette-primary-tone-220: #dde6d7; + --theme-palette-primary-tone-200: rgba(140, 107, 63, 0.1); + --theme-palette-primary-tone-180: rgba(140, 107, 63, 0.2); + --theme-palette-primary-tone-160: rgba(140, 107, 63, 0.08); + --theme-palette-primary-tone-140: #c1b2a3; + + --theme-palette-danger-tone-520: #c75b4c; + --theme-palette-danger-tone-500: #a3483d; + --theme-palette-danger-tone-480: #d16a55; + --theme-palette-danger-tone-420: #b27c5d; + --theme-palette-danger-tone-360: #9a6c5e; + --theme-palette-danger-tone-surface-250: #f5ddd3; + --theme-palette-danger-tone-surface-550: #edc2b2; + --theme-palette-danger-tone-border: #de9f8a; + + --theme-palette-success-tone-540: #7b8565; + --theme-palette-success-tone-520: #4d7c4c; + --theme-palette-success-tone-500: #3f6b3e; + --theme-palette-success-tone-460: #8db08a; + --theme-palette-success-tone-420: #588657; + --theme-palette-success-tone-380: #8b9a8b; + --theme-palette-success-tone-340: #23452a; + --theme-palette-success-tone-soft-200: #e7eee0; + --theme-palette-success-tone-border: #b8d5b5; + --theme-palette-success-tone-strong: #4d7c4c; + --theme-palette-success-tone-hover: #cde7ca; + --theme-palette-success-tone-text: #23452a; + --theme-palette-success-tone-surface: #edf2e9; + + --theme-palette-warning-tone-520: #d0943c; + --theme-palette-warning-tone-500: #b28b68; + --theme-palette-warning-tone-460: #e5bb76; + --theme-palette-warning-tone-420: #b88746; + --theme-palette-warning-tone-surface: #f7efdf; + --theme-palette-warning-tone-border: #efcf9d; + + --theme-palette-info-tone-520: #4b7b83; + --theme-palette-info-tone-500: #8b9a8b; + --theme-palette-info-tone-460: #6aaea6; + --theme-palette-info-tone-surface: #e7eeeb; + --theme-palette-info-tone-border: #bfded8; + + --theme-palette-accent-tone-540: #8d8272; + --theme-palette-accent-tone-520: #7c7468; + --theme-palette-accent-tone-500: #aba091; + --theme-palette-accent-tone-460: #dbc2d7; + --theme-palette-accent-tone-surface: #efeaf2; + --theme-palette-accent-tone-border: #e5cfe0; + --theme-palette-accent-tone-soft-surface: #efeaf2; + --theme-palette-accent-tone-soft-hover: #f1e4ef; + --theme-palette-accent-tone-soft-border: #e5cfe0; + --theme-palette-accent-tone-text: #7b7696; + --theme-palette-accent-tone-text-soft: #5f5a77; + + --theme-palette-quaternary-tone-500: #8f8aa7; + --theme-palette-quaternary-tone-surface: #ece9f1; + --theme-palette-emphasis-tone-500: #d16a55; + --theme-palette-highlight-tone-500: #e3c56a; + + --theme-palette-status-tag-surface: #f0e7db; + --theme-palette-status-tag-active-text: #23452a; + --theme-palette-status-tag-active-surface: #edf2e9; + --theme-palette-status-tag-active-border: #b8d5b5; + --theme-palette-status-tag-alt-text: #7b7696; + --theme-palette-status-tag-alt-surface: #efeaf2; + --theme-palette-status-tag-alt-border: #e5cfe0; + --theme-palette-status-tag-expired-text: #8f5e1d; + --theme-palette-status-tag-expired-surface: #f7efdf; + --theme-palette-status-tag-expired-border: #efcf9d; + --theme-palette-status-tag-banned-text: #8c332e; + --theme-palette-status-tag-banned-surface: #f1e5dd; + --theme-palette-status-tag-banned-border: #edc2b2; + + --theme-palette-status-live-surface: #edf2e9; + --theme-palette-status-video-surface: #e7eeeb; + --theme-palette-status-series-surface: #ece9f1; + + --theme-palette-shadow-popup: 0 10px 24px rgba(99, 82, 57, 0.14), 0 8px 10px rgba(99, 82, 57, 0.08); + --theme-palette-shadow-card: 0 4px 6px rgba(99, 82, 57, 0.08), 0 2px 4px rgba(99, 82, 57, 0.06); + --theme-palette-shadow-scrollbar-track: inset 0 0 6px rgba(99, 82, 57, 0.08); + --theme-palette-shadow-tab-header: 0 2px 4px rgba(99, 82, 57, 0.06); + --theme-palette-shadow-field-code: 0 4px 6px rgba(99, 82, 57, 0.08); + --theme-palette-shadow-toggle: 0 2px 6px rgba(52, 43, 35, 0.18); + --theme-palette-shadow-toast: 0 2px 5px rgba(99, 82, 57, 0.1); + --theme-palette-shadow-source-block: 0 1px 2px rgba(99, 82, 57, 0.08); + --theme-palette-shadow-glass: rgba(99, 82, 57, 0.05); + + --theme-palette-menu-icon-update: #7b8565; + --theme-palette-menu-icon-user: #8b9a8b; + --theme-palette-menu-icon-api-server: #b28b68; + --theme-palette-menu-icon-main-config: #8d8272; + --theme-palette-menu-icon-status: #7b8565; + + --theme-palette-code-identifier: #5a7ca5; + --theme-palette-code-var-access: #3f6b3e; + --theme-palette-code-field: #b88746; + --theme-palette-code-property: #8d7a53; + --theme-palette-code-literal: #6e8566; + --theme-palette-code-num: #8f8aa7; + --theme-palette-code-builtin: #b08548; + --theme-palette-code-reserved: #a3483d; + --theme-palette-code-regex: #8f8aa7; + --theme-palette-code-enum: #b27c5d; + --theme-palette-code-range: #78958d; + --theme-palette-code-op: #a3483d; + --theme-palette-code-compare-text: #3f352b; + --theme-palette-code-bracket-1: #5a7ca5; + --theme-palette-code-bracket-2: #8f8aa7; + --theme-palette-code-bracket-3: #b88746; + --theme-palette-code-any-match: #d16a55; + + --theme-palette-epg-program-surface: #fff9f0; + --theme-palette-epg-program-active-surface: #f0e7db; + --theme-palette-epg-program-text: #4a3b2d; + --theme-palette-epg-program-time: #a09282; + --theme-palette-epg-program-time-active: #8d7a53; + --theme-palette-epg-past-surface: rgba(52, 43, 35, 0.06); + --theme-palette-epg-now-line: #c75b4c; + + --theme-palette-graph-grid-1: #d9cdbd55; + --theme-palette-graph-grid-2: #c6b49d55; + + --theme-palette-particle-1: #aa9367; + --theme-palette-particle-2: #cdc0a8; + --theme-palette-particle-alpha-boost: 1.28; + + --theme-palette-chip-container-text: #8d7a53; + --theme-palette-chip-container-surface: #efe4d4; + --theme-palette-chip-video-text: #3f6b3e; + --theme-palette-chip-video-surface: #edf2e9; + --theme-palette-chip-resolution-text: #8c332e; + --theme-palette-chip-resolution-surface: #f1e5dd; + --theme-palette-chip-fps-text: #8f5e1d; + --theme-palette-chip-fps-surface: #f7efdf; + --theme-palette-chip-audio-text: #7b7696; + --theme-palette-chip-audio-surface: #efeaf2; + --theme-palette-chip-audio-channels-text: #5f5a77; + + --theme-palette-graph-input-xtream: #8d7a53; + --theme-palette-graph-input-m3u: #78958d; + --theme-palette-graph-input-library: #a9a4c0; + --theme-palette-graph-target: #4d7c4c; + --theme-palette-graph-output: #b08548; + --theme-palette-graph-output-xtream: #6aaea6; + --theme-palette-graph-output-m3u: #6e8566; + --theme-palette-graph-output-hdhomerun: #8f8aa7; + --theme-palette-graph-output-strm: #d16a55; + --theme-palette-graph-port: #a09282; + --theme-palette-graph-port-border: #ffffff; + --theme-palette-graph-port-hover: #d0943c; + + --theme-palette-login-logo: color-mix(in srgb, #f3ebdf 84%, #8d7a53 8%); + --theme-palette-series-title: #4a3b2d; + --theme-palette-series-backdrop-overlay: linear-gradient( + to right, + rgba(245, 239, 229, 0.98) 28%, + rgba(245, 239, 229, 0.9) 48%, + rgba(245, 239, 229, 0.76) 60%, + rgba(245, 239, 229, 0.4) 72%, + rgba(245, 239, 229, 0) 86% + ); +} diff --git a/frontend/src/app/components/api_user/api_user_view.rs b/frontend/src/app/components/api_user/api_user_view.rs index 4185a9ac3..102cb2995 100644 --- a/frontend/src/app/components/api_user/api_user_view.rs +++ b/frontend/src/app/components/api_user/api_user_view.rs @@ -1,7 +1,7 @@ use crate::{ app::components::{ api_user::playlist::ApiUserPlaylist, loading_indicator::BusyIndicator, theme::Theme, AppIcon, IconButton, - ToastrView, WebsocketStatus, + ThemePicker, ToastrView, WebsocketStatus, }, hooks::use_service_context, provider::DialogProvider, @@ -13,10 +13,9 @@ pub fn ApiUserView() -> Html { let services = use_service_context(); let theme = use_state(Theme::get_current_theme); - let handle_theme_switch = { + let handle_theme_select = { let set_theme = theme.clone(); - Callback::from(move |_| { - let new_theme = if *set_theme == Theme::Dark { Theme::Bright } else { Theme::Dark }; + Callback::from(move |new_theme: Theme| { new_theme.switch_theme(); set_theme.set(new_theme); }) @@ -46,7 +45,7 @@ pub fn ApiUserView() -> Html {
- +
diff --git a/frontend/src/app/components/home.rs b/frontend/src/app/components/home.rs index 780e0c655..3022719cf 100644 --- a/frontend/src/app/components/home.rs +++ b/frontend/src/app/components/home.rs @@ -3,8 +3,8 @@ use crate::{ components::{ config::ConfigView, loading_indicator::BusyIndicator, theme::Theme, AppIcon, DashboardView, EpgView, IconButton, InputRow, NoAccess, Panel, ParticleFlowBackground, PlaylistExplorerView, PlaylistSettingsView, - PlaylistUpdateView, RbacView, Setup, Sidebar, SourceEditor, StatsView, StreamsView, ToastrView, - UserlistView, WebsocketStatus, + PlaylistUpdateView, RbacView, Setup, Sidebar, SourceEditor, StatsView, StreamsView, ThemePicker, + ToastrView, UserlistView, WebsocketStatus, }, context::{ConfigContext, PlaylistContext, StatusContext}, }, @@ -35,10 +35,9 @@ pub fn Home() -> Html { let view_visible = use_state(|| if setup_mode { ViewType::Config } else { ViewType::Dashboard }); let theme = use_state(Theme::get_current_theme); - let handle_theme_switch = { + let handle_theme_select = { let set_theme = theme.clone(); - Callback::from(move |_| { - let new_theme = if *set_theme == Theme::Dark { Theme::Bright } else { Theme::Dark }; + Callback::from(move |new_theme: Theme| { new_theme.switch_theme(); set_theme.set(new_theme); }) @@ -197,7 +196,7 @@ pub fn Home() -> Html { }
- +
@@ -251,7 +250,7 @@ pub fn Home() -> Html { html! {
- +
} diff --git a/frontend/src/app/components/mod.rs b/frontend/src/app/components/mod.rs index 0111cedf6..0a9041030 100644 --- a/frontend/src/app/components/mod.rs +++ b/frontend/src/app/components/mod.rs @@ -45,6 +45,7 @@ mod tag_list; mod text_button; mod textarea; mod theme; +mod theme_picker; mod toastr; mod toggle_switch; mod userlist; @@ -72,6 +73,7 @@ pub(crate) use self::{ home::*, icon_button::*, key_value_editor::*, loading_screen::*, login::*, no_access::*, no_content::*, panel::*, particle_flow_background::*, playlist::*, radio_button_group::*, rbac::*, reveal_content::*, role_based_content::*, search::*, select::*, setup::*, sidebar::*, source_editor::*, svg_icon::*, table::*, tabset::*, tag_list::*, - text_button::*, textarea::*, title_card::*, toastr::*, toggle_switch::*, userlist::*, websocket_status::*, + text_button::*, textarea::*, theme_picker::*, title_card::*, toastr::*, toggle_switch::*, userlist::*, + websocket_status::*, }; pub use self::{confirm_dialog::*, content_dialog::*}; diff --git a/frontend/src/app/components/popup_menu.rs b/frontend/src/app/components/popup_menu.rs index 36ea66ac4..250a346cb 100644 --- a/frontend/src/app/components/popup_menu.rs +++ b/frontend/src/app/components/popup_menu.rs @@ -47,15 +47,22 @@ pub fn PopupMenu(props: &PopupMenuProps) -> Html { let rect = anchor.get_bounding_client_rect(); let inner_width = window.inner_width().ok().and_then(|w| w.as_f64()).unwrap_or_default(); let inner_height = window.inner_height().ok().and_then(|h| h.as_f64()).unwrap_or_default(); + let popup_width = f64::from(popup.offset_width()); + let popup_height = f64::from(popup.offset_height()); + let gutter = 8.0; - let mut top = rect.bottom(); + let mut top = rect.bottom() + gutter; let mut left = rect.left(); - if left + 200.0 > inner_width { - left = inner_width - 200.0; + + if left + popup_width > inner_width - gutter { + left = inner_width - popup_width - gutter; } - if top + 150.0 > inner_height { - top = rect.top() - 150.0; + if top + popup_height > inner_height - gutter { + let top_above = rect.top() - popup_height - gutter; + top = if top_above >= gutter { top_above } else { inner_height - popup_height - gutter }; } + left = left.max(gutter); + top = top.max(gutter); let _ = popup.style().set_property("--popup-top", &format!("{top}px")); let _ = popup.style().set_property("--popup-left", &format!("{left}px")); diff --git a/frontend/src/app/components/theme.rs b/frontend/src/app/components/theme.rs index 1b477b49d..6d6cb06ff 100644 --- a/frontend/src/app/components/theme.rs +++ b/frontend/src/app/components/theme.rs @@ -9,12 +9,42 @@ use web_sys::window; pub const TP_THEME_KEY: &str = "tp-theme"; const THEME_DARK: &str = "dark"; +const THEME_REFINED_DARK: &str = "refined-dark"; const THEME_BRIGHT: &str = "bright"; +const THEME_AURORA: &str = "aurora"; +const THEME_MONOKAI: &str = "monokai"; +const THEME_PAPER: &str = "paper"; +const THEME_NATURE_PURE: &str = "nature-pure"; +const THEME_DOPAMINE: &str = "dopamine"; +const THEME_MERMAIDCORE: &str = "mermaidcore"; +const THEME_COOL_ELEGANCE: &str = "cool-elegance"; +const THEME_BANANA_YELLOW: &str = "banana-yellow"; +const THEME_CLUBROOM_CONTRAST: &str = "clubroom-contrast"; +const THEME_SUN_WASHED_SOFT: &str = "sun-washed-soft"; +const THEME_VINTAGE_NEUTRAL: &str = "vintage-neutral"; +const THEME_DRACULA: &str = "dracula"; +const THEME_NORD: &str = "nord"; +const THEME_GRAPEROOT_DARK: &str = "graperoot-dark"; #[derive(Debug, Copy, Clone, serde::Serialize, serde::Deserialize, PartialEq, Eq)] pub enum Theme { Dark, + RefinedDark, + GraperootDark, + Nord, + Dracula, + Aurora, + Monokai, + Dopamine, + Mermaidcore, + ClubroomContrast, Bright, + Paper, + NaturePure, + CoolElegance, + BananaYellow, + SunWashedSoft, + VintageNeutral, } impl Display for Theme { @@ -24,7 +54,22 @@ impl Display for Theme { "{}", match self { Theme::Dark => THEME_DARK, + Theme::RefinedDark => THEME_REFINED_DARK, + Theme::GraperootDark => THEME_GRAPEROOT_DARK, + Theme::Nord => THEME_NORD, + Theme::Dracula => THEME_DRACULA, + Theme::Aurora => THEME_AURORA, + Theme::Monokai => THEME_MONOKAI, + Theme::Dopamine => THEME_DOPAMINE, + Theme::Mermaidcore => THEME_MERMAIDCORE, + Theme::ClubroomContrast => THEME_CLUBROOM_CONTRAST, Theme::Bright => THEME_BRIGHT, + Theme::Paper => THEME_PAPER, + Theme::NaturePure => THEME_NATURE_PURE, + Theme::CoolElegance => THEME_COOL_ELEGANCE, + Theme::BananaYellow => THEME_BANANA_YELLOW, + Theme::SunWashedSoft => THEME_SUN_WASHED_SOFT, + Theme::VintageNeutral => THEME_VINTAGE_NEUTRAL, } ) } @@ -36,13 +81,85 @@ impl FromStr for Theme { fn from_str(s: &str) -> Result { match s.to_lowercase().as_str() { THEME_DARK => Ok(Theme::Dark), + THEME_REFINED_DARK => Ok(Theme::RefinedDark), + THEME_GRAPEROOT_DARK => Ok(Theme::GraperootDark), + THEME_NORD => Ok(Theme::Nord), + THEME_DRACULA => Ok(Theme::Dracula), + THEME_AURORA => Ok(Theme::Aurora), + THEME_MONOKAI => Ok(Theme::Monokai), + THEME_DOPAMINE => Ok(Theme::Dopamine), + THEME_MERMAIDCORE => Ok(Theme::Mermaidcore), + THEME_CLUBROOM_CONTRAST => Ok(Theme::ClubroomContrast), THEME_BRIGHT => Ok(Theme::Bright), + THEME_PAPER => Ok(Theme::Paper), + THEME_NATURE_PURE => Ok(Theme::NaturePure), + THEME_COOL_ELEGANCE => Ok(Theme::CoolElegance), + THEME_BANANA_YELLOW => Ok(Theme::BananaYellow), + THEME_SUN_WASHED_SOFT => Ok(Theme::SunWashedSoft), + THEME_VINTAGE_NEUTRAL => Ok(Theme::VintageNeutral), _ => info_err_res!("Unknown theme: {s}"), } } } impl Theme { + pub const ALL: [Self; 17] = [ + Theme::Dark, + Theme::RefinedDark, + Theme::GraperootDark, + Theme::Nord, + Theme::Dracula, + Theme::Aurora, + Theme::Monokai, + Theme::Dopamine, + Theme::Mermaidcore, + Theme::ClubroomContrast, + Theme::Bright, + Theme::Paper, + Theme::NaturePure, + Theme::CoolElegance, + Theme::BananaYellow, + Theme::SunWashedSoft, + Theme::VintageNeutral, + ]; + + pub const fn all() -> &'static [Self] { &Self::ALL } + + pub const fn label(self) -> &'static str { + match self { + Theme::Dark => "Dark", + Theme::RefinedDark => "Refined Dark", + Theme::GraperootDark => "GrapeRoot Dark", + Theme::Dracula => "Dracula", + Theme::Nord => "Nord", + Theme::Monokai => "Monokai", + Theme::Dopamine => "Dopamine", + Theme::Mermaidcore => "Mermaidcore", + Theme::ClubroomContrast => "Clubroom Contrast", + Theme::Bright => "Bright", + Theme::Aurora => "Aurora", + Theme::Paper => "Paper", + Theme::NaturePure => "Nature Pure", + Theme::CoolElegance => "Cool Elegance", + Theme::BananaYellow => "Banana Yellow", + Theme::SunWashedSoft => "Sun-Washed Soft", + Theme::VintageNeutral => "Vintage Neutral", + } + } + + pub const fn is_light(self) -> bool { + matches!( + self, + Theme::Bright + | Theme::Paper + | Theme::NaturePure + | Theme::CoolElegance + | Theme::BananaYellow + | Theme::SunWashedSoft + | Theme::VintageNeutral + ) + } + pub fn get_current_theme() -> Theme { let theme = get_local_storage_item(TP_THEME_KEY).map_or(Theme::Dark, |t| Theme::from_str(&t).unwrap_or(Theme::Dark)); @@ -58,7 +175,22 @@ impl Theme { fn save_to_local_storage(&self) { match self { Theme::Dark => remove_local_storage_item(TP_THEME_KEY), - Theme::Bright => set_local_storage_item(TP_THEME_KEY, &self.to_string()), + Theme::RefinedDark + | Theme::GraperootDark + | Theme::Nord + | Theme::Dracula + | Theme::Aurora + | Theme::Monokai + | Theme::Paper + | Theme::NaturePure + | Theme::Dopamine + | Theme::Mermaidcore + | Theme::CoolElegance + | Theme::BananaYellow + | Theme::ClubroomContrast + | Theme::SunWashedSoft + | Theme::VintageNeutral + | Theme::Bright => set_local_storage_item(TP_THEME_KEY, &self.to_string()), } } diff --git a/frontend/src/app/components/theme_picker.rs b/frontend/src/app/components/theme_picker.rs new file mode 100644 index 000000000..e51ce8918 --- /dev/null +++ b/frontend/src/app/components/theme_picker.rs @@ -0,0 +1,73 @@ +use crate::app::components::{menu_item::MenuItem, popup_menu::PopupMenu, theme::Theme, IconButton}; +use web_sys::MouseEvent; +use yew::{component, html, use_state, Callback, Html, NodeRef, Properties}; + +#[derive(Properties, Clone, PartialEq)] +pub struct ThemePickerProps { + pub theme: Theme, + pub on_select: Callback, +} + +#[component] +pub fn ThemePicker(props: &ThemePickerProps) -> Html { + let button_ref = NodeRef::default(); + let popup_anchor_ref = use_state(|| None::); + let popup_is_open = use_state(|| false); + + let handle_popup_open = { + let button_ref = button_ref.clone(); + let popup_anchor_ref = popup_anchor_ref.clone(); + let popup_is_open = popup_is_open.clone(); + Callback::from(move |(_name, event): (String, MouseEvent)| { + event.prevent_default(); + event.stop_propagation(); + if let Some(button) = button_ref.cast::() { + popup_anchor_ref.set(Some(button)); + popup_is_open.set(true); + } + }) + }; + + let handle_popup_close = { + let popup_is_open = popup_is_open.clone(); + Callback::from(move |()| popup_is_open.set(false)) + }; + + let handle_theme_select = { + let popup_is_open = popup_is_open.clone(); + let on_select = props.on_select.clone(); + Callback::from(move |(theme_name, event): (String, MouseEvent)| { + event.prevent_default(); + event.stop_propagation(); + if let Ok(theme) = theme_name.parse::() { + on_select.emit(theme); + popup_is_open.set(false); + } + }) + }; + + html! { + <> + + + { + for Theme::all().iter().copied().map(|theme| html! { + + }) + } + + + } +}