diff --git a/apps/web/src/_settings-theme.scss b/apps/web/src/_settings-theme.scss
index 8a843b60ea..e2cdf20034 100644
--- a/apps/web/src/_settings-theme.scss
+++ b/apps/web/src/_settings-theme.scss
@@ -158,7 +158,7 @@
flex-direction: column;
gap: 14px;
padding: 18px;
- border-radius: 18px;
+ border-radius: var(--app-radius-2xl);
border: 1px solid color-mix(in srgb, #ff4d6d 26%, transparent);
background:
radial-gradient(
@@ -207,7 +207,7 @@
justify-content: center;
width: 44px;
height: 44px;
- border-radius: 14px;
+ border-radius: var(--app-radius-xl);
background: linear-gradient(135deg, #ff4d6d, #ff8b5e);
color: #fff;
box-shadow:
@@ -255,7 +255,7 @@
align-items: center;
gap: 12px;
padding: 10px 14px;
- border-radius: 14px;
+ border-radius: var(--app-radius-xl);
border: 1px solid transparent;
text-decoration: none;
color: #fff;
@@ -288,7 +288,7 @@
justify-content: center;
width: 34px;
height: 34px;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
background: rgba(255, 255, 255, 0.18);
color: #fff;
flex: 0 0 auto;
diff --git a/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.scss b/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.scss
index 9178d18065..36292d8537 100644
--- a/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.scss
+++ b/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.scss
@@ -44,7 +44,7 @@
padding: 10px 12px;
border: 1px solid
color-mix(in srgb, var(--mat-sys-outline) 46%, transparent);
- border-radius: 14px;
+ border-radius: var(--app-radius-xl);
background: color-mix(
in srgb,
var(--mat-sys-surface-container) 84%,
@@ -80,7 +80,7 @@
.settings-delete-dialog__hint {
padding: 12px 14px;
- border-radius: 14px;
+ border-radius: var(--app-radius-xl);
background: color-mix(
in srgb,
var(--app-selection-surface) 32%,
diff --git a/apps/web/src/app/settings/settings.component.scss b/apps/web/src/app/settings/settings.component.scss
index f3b7d22df8..186251f4cb 100644
--- a/apps/web/src/app/settings/settings.component.scss
+++ b/apps/web/src/app/settings/settings.component.scss
@@ -285,7 +285,7 @@
);
border: 1px solid
color-mix(in srgb, var(--mat-sys-outline-variant) 60%, transparent);
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
}
.theme-switcher__option {
@@ -501,7 +501,7 @@
padding: 12px 14px;
border: 1px solid
color-mix(in srgb, var(--mat-sys-outline-variant) 70%, transparent);
- border-radius: 16px;
+ border-radius: var(--app-radius-xl);
background: color-mix(
in srgb,
var(--mat-sys-surface-container-low) 88%,
@@ -550,7 +550,7 @@
justify-content: center;
width: 40px;
height: 40px;
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
background: color-mix(
in srgb,
var(--mat-sys-surface-container-high) 82%,
@@ -623,7 +623,7 @@
.settings-note {
margin: 12px 18px 18px;
padding: 10px 12px;
- border-radius: 14px;
+ border-radius: var(--app-radius-xl);
font-size: 0.84rem;
background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent);
border: 1px solid
@@ -642,7 +642,7 @@
padding: 14px 16px;
background: var(--settings-item-danger-bg);
border: 1px solid var(--settings-item-danger-border);
- border-radius: 16px;
+ border-radius: var(--app-radius-xl);
grid-template-columns: 1fr;
gap: 14px;
}
@@ -672,7 +672,7 @@
gap: 8px;
min-height: 34px;
padding: 4px 6px 4px 12px;
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
background: color-mix(
in srgb,
var(--mat-sys-surface-container-high) 78%,
@@ -704,7 +704,7 @@
min-width: 26px;
height: 22px;
padding: 0 8px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: color-mix(
in srgb,
var(--mat-sys-on-surface) 10%,
@@ -773,7 +773,7 @@
margin-top: 12px;
margin-bottom: 2px;
box-shadow: none;
- border-radius: 16px;
+ border-radius: var(--app-radius-xl);
padding: 12px;
border-top: 1px solid var(--settings-action-bar-border);
justify-content: space-between;
@@ -787,7 +787,7 @@
color: var(--app-selection-on-color, #fff);
font-weight: 500;
padding: 0 20px;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
box-shadow: 0 4px 14px
color-mix(in srgb, var(--app-selection-color) 28%, transparent);
transition:
@@ -835,7 +835,7 @@
.settings-page-header {
padding: 12px 14px;
- border-radius: 16px;
+ border-radius: var(--app-radius-xl);
}
.setting-item {
@@ -883,7 +883,7 @@
position: static;
flex-direction: column-reverse;
align-items: stretch;
- border-radius: 16px;
+ border-radius: var(--app-radius-xl);
box-shadow: none;
width: 100%;
margin-left: 0;
diff --git a/apps/web/src/m3-theme.scss b/apps/web/src/m3-theme.scss
index 4f8ac3325c..efca9e87f5 100644
--- a/apps/web/src/m3-theme.scss
+++ b/apps/web/src/m3-theme.scss
@@ -53,6 +53,17 @@ $dark-theme: mat.define-theme(
html {
@include mat.all-component-themes($light-theme);
+ // ── Shape scale (theme-independent) ───────────────────────────────────
+ // Central radius tokens so surfaces, list rows, inputs and the future
+ // advanced player control panel share one consistent rounding language.
+ --app-radius-xs: 6px;
+ --app-radius-sm: 8px;
+ --app-radius-md: 10px;
+ --app-radius-lg: 12px;
+ --app-radius-xl: 16px;
+ --app-radius-2xl: 20px;
+ --app-radius-pill: 999px;
+
// ── Light theme design tokens ─────────────────────────────────────────
--app-shell-bg: #eef0f3;
--app-rail-bg: #eef0f3;
@@ -92,6 +103,12 @@ html {
// Content area
--app-content-shadow: -2px 4px 12px rgba(0, 0, 0, 0.06);
+ // Soft elevation scale — modern, low-contrast shadows for cards & panels
+ --app-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04),
+ 0 4px 12px rgba(0, 0, 0, 0.05);
+ --app-shadow-raised: 0 2px 6px rgba(0, 0, 0, 0.06),
+ 0 6px 16px -8px rgba(0, 0, 0, 0.16);
+
// Widget surfaces — no borders, layered backgrounds
--app-widget-bg: #ffffff;
--app-widget-header-bg: #fafbfc;
@@ -167,6 +184,12 @@ html {
// Content area
--app-content-shadow: -4px 8px 20px rgba(0, 0, 0, 0.18);
+ // Soft elevation scale — deeper on dark graphite surfaces
+ --app-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.25),
+ 0 6px 16px rgba(0, 0, 0, 0.28);
+ --app-shadow-raised: 0 3px 8px rgba(0, 0, 0, 0.32),
+ 0 10px 24px -10px rgba(0, 0, 0, 0.5);
+
// Widget surfaces — NO border, surface contrast does the work
// Widgets sit on content-bg (#161a22), so widget-bg is notably lighter
--app-widget-bg: #1e2330;
@@ -213,7 +236,7 @@ html {
--mdc-outlined-text-field-outline-color: var(--app-widget-header-border);
--mdc-outlined-text-field-hover-outline-color: var(--app-muted-color);
--mdc-outlined-text-field-focus-outline-color: var(--app-selection-color);
- --mdc-outlined-text-field-container-shape: 10px;
+ --mdc-outlined-text-field-container-shape: var(--app-radius-md);
--mdc-outlined-text-field-label-text-color: var(--app-muted-color);
--mdc-outlined-text-field-input-text-color: var(--app-heading-color);
--mdc-outlined-text-field-caret-color: var(--app-selection-color);
@@ -227,7 +250,7 @@ html {
// locked to the light-mode value at html-level inheritance.
.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper {
background: color-mix(in srgb, var(--app-widget-bg) 85%, white 7%);
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
}
.mat-mdc-form-field .mat-mdc-input-element,
diff --git a/apps/web/src/nav-list.scss b/apps/web/src/nav-list.scss
index dfb6df1755..1188211d69 100644
--- a/apps/web/src/nav-list.scss
+++ b/apps/web/src/nav-list.scss
@@ -16,7 +16,7 @@
gap: 10px;
padding: 6px 4px;
border: 1px solid transparent;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
background: transparent;
color: var(--mat-sys-on-surface-variant);
text-align: left;
@@ -95,7 +95,7 @@
top: 7px;
bottom: 7px;
width: 2px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: var(--app-selection-color);
box-shadow: 0 0 10px var(--app-selection-glow);
} */
diff --git a/apps/web/src/styles.scss b/apps/web/src/styles.scss
index c4d00706e6..cf6379d252 100644
--- a/apps/web/src/styles.scss
+++ b/apps/web/src/styles.scss
@@ -58,7 +58,7 @@
var(--app-muted-color) 70%,
transparent
);
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
border: 2px solid transparent;
background-clip: content-box;
min-height: 32px;
@@ -83,7 +83,7 @@
color: var(--app-muted-color, #8891a4);
font-variant-numeric: tabular-nums;
padding: 2px 8px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: color-mix(
in srgb,
var(--app-muted-color, #8891a4) 18%,
@@ -172,7 +172,7 @@ textarea,
::-webkit-scrollbar-thumb {
background-color: var(--mat-sys-outline-variant);
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
&:hover {
background-color: var(--mat-sys-outline);
@@ -199,7 +199,7 @@ textarea,
.workspace-command-palette-overlay .mat-mdc-dialog-surface {
background: transparent;
box-shadow: none;
- border-radius: 14px;
+ border-radius: var(--app-radius-xl);
padding: 0;
overflow: visible;
}
@@ -213,7 +213,7 @@ textarea,
.workspace-shortcuts-overlay .mat-mdc-dialog-surface {
background: transparent;
box-shadow: none;
- border-radius: 14px;
+ border-radius: var(--app-radius-xl);
padding: 0;
overflow: visible;
}
diff --git a/libs/playlist/import/feature/src/lib/add-playlist-dialog/add-playlist-dialog.component.scss b/libs/playlist/import/feature/src/lib/add-playlist-dialog/add-playlist-dialog.component.scss
index 799fe67c0b..ca97d6f24b 100644
--- a/libs/playlist/import/feature/src/lib/add-playlist-dialog/add-playlist-dialog.component.scss
+++ b/libs/playlist/import/feature/src/lib/add-playlist-dialog/add-playlist-dialog.component.scss
@@ -65,7 +65,7 @@
appearance: none;
background: var(--apd-segment-track);
border: 1px solid var(--apd-border);
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
padding: 10px 11px 12px;
display: flex;
flex-direction: column;
@@ -130,7 +130,7 @@
height: 32px;
display: grid;
place-items: center;
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
background: color-mix(
in srgb,
var(--apd-surface-raised) 75%,
@@ -210,7 +210,7 @@
.cors-note {
margin: 6px 0 0;
padding: 10px 12px;
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
background: color-mix(
in srgb,
var(--apd-surface-raised) 50%,
diff --git a/libs/playlist/import/feature/src/lib/file-upload/file-upload.component.scss b/libs/playlist/import/feature/src/lib/file-upload/file-upload.component.scss
index a1f9c6b236..d6d534bc80 100644
--- a/libs/playlist/import/feature/src/lib/file-upload/file-upload.component.scss
+++ b/libs/playlist/import/feature/src/lib/file-upload/file-upload.component.scss
@@ -15,7 +15,7 @@
justify-content: center;
gap: 8px;
padding: 36px 24px 28px;
- border-radius: 16px;
+ border-radius: var(--app-radius-xl);
border: 1.5px dashed
color-mix(in srgb, var(--app-body-color) 30%, transparent);
background: color-mix(in srgb, var(--app-shell-bg) 55%, transparent);
@@ -111,7 +111,7 @@
align-items: center;
gap: 12px;
padding: 14px 14px 14px 16px;
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
background: color-mix(in srgb, var(--app-shell-bg) 85%, transparent);
box-shadow: inset 0 0 0 1px var(--app-widget-header-border);
@@ -122,7 +122,7 @@
display: inline-flex;
align-items: center;
justify-content: center;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
background: color-mix(
in srgb,
var(--app-selection-color) 16%,
@@ -166,7 +166,7 @@
background: transparent;
width: 32px;
height: 32px;
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
display: inline-flex;
align-items: center;
justify-content: center;
diff --git a/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.scss b/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.scss
index 2462266350..726eeb5e3d 100644
--- a/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.scss
+++ b/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.scss
@@ -85,7 +85,7 @@
min-width: 120px;
padding: 2rem 3rem;
border: 2px solid rgba(255, 255, 255, 0.1);
- border-radius: 16px;
+ border-radius: var(--app-radius-xl);
background: rgba(0, 0, 0, 0.85);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
color: #fff;
diff --git a/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.scss b/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.scss
index fdd6f4df91..0f07400e46 100644
--- a/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.scss
+++ b/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.scss
@@ -10,7 +10,7 @@
width: 100%;
box-sizing: border-box;
padding: 4px 8px 4px 4px;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
background: color-mix(in srgb, var(--app-on-surface) 5%, transparent);
@@ -52,7 +52,7 @@
.trigger-icon-container {
width: 30px;
height: 30px;
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
display: inline-flex;
align-items: center;
justify-content: center;
@@ -179,7 +179,7 @@
calc(100vw - 24px)
) !important;
margin-top: -1px !important;
- border-radius: 0 0 12px 12px !important;
+ border-radius: 0 0 var(--app-radius-lg) var(--app-radius-lg) !important;
border: 1px solid var(--mat-sys-outline) !important;
border-top: 0 !important;
overflow: hidden !important;
@@ -254,7 +254,7 @@
var(--app-on-surface) 6%,
transparent
);
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
border: 1px solid transparent;
transition: all 0.2s ease;
}
@@ -311,7 +311,7 @@
.type-filter-chip {
height: 24px;
padding: 0 10px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
border: 1px solid
color-mix(in srgb, var(--mat-sys-outline-variant) 72%, transparent);
background: color-mix(
@@ -448,7 +448,7 @@
justify-content: center;
width: 36px;
height: 36px;
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
background: color-mix(
in srgb,
var(--app-on-surface) 6%,
@@ -597,7 +597,7 @@
width: 100%;
padding: 8px 10px;
border: none;
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
background: transparent;
color: var(--mat-sys-on-surface-variant);
font: inherit;
diff --git a/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.component.scss b/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.component.scss
index a6ad6c6393..d2cf8d6b18 100644
--- a/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.component.scss
+++ b/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.component.scss
@@ -114,7 +114,7 @@
color: var(--app-selection-on-color, white);
font-weight: 500;
padding: 10px 24px;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
text-transform: none;
letter-spacing: 0.01em;
box-shadow: 0 4px 14px var(--app-selection-glow);
diff --git a/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.welcome-dashboard.scss b/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.welcome-dashboard.scss
index 154d51bba1..89ebe47fb3 100644
--- a/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.welcome-dashboard.scss
+++ b/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.welcome-dashboard.scss
@@ -154,7 +154,7 @@
font-weight: 500;
font-size: clamp(0.875rem, 1.8vh, 1rem);
padding: 10px 28px;
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
transition:
transform 0.2s ease,
@@ -204,7 +204,7 @@
rgba(37, 99, 235, 0.04)
);
border: 1px solid rgba(96, 165, 250, 0.18);
- border-radius: 14px;
+ border-radius: var(--app-radius-xl);
backdrop-filter: blur(8px);
transform: rotate(-2deg);
transform-origin: center;
diff --git a/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.welcome-sources.scss b/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.welcome-sources.scss
index 41e01a628a..6071b78852 100644
--- a/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.welcome-sources.scss
+++ b/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.welcome-sources.scss
@@ -81,7 +81,7 @@
rgba(37, 99, 235, 0.04)
);
border: 1px solid rgba(96, 165, 250, 0.2);
- border-radius: 16px;
+ border-radius: var(--app-radius-xl);
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
@@ -143,7 +143,7 @@
font-size: 0.7rem;
font-weight: 500;
padding: 3px 9px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: rgba(96, 165, 250, 0.14);
color: #93c5fd;
border: 1px solid rgba(96, 165, 250, 0.22);
@@ -159,7 +159,7 @@
font-weight: 500;
font-size: 0.875rem;
padding: 8px 18px;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
transition:
transform 0.2s ease,
diff --git a/libs/playlist/shared/ui/src/lib/recent-playlists/playlist-item/playlist-item.component.scss b/libs/playlist/shared/ui/src/lib/recent-playlists/playlist-item/playlist-item.component.scss
index b963935d62..fc20c3a47a 100644
--- a/libs/playlist/shared/ui/src/lib/recent-playlists/playlist-item/playlist-item.component.scss
+++ b/libs/playlist/shared/ui/src/lib/recent-playlists/playlist-item/playlist-item.component.scss
@@ -11,7 +11,7 @@
gap: 12px;
padding: 8px 10px 8px 12px;
border: 1px solid transparent;
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
background: transparent;
color: inherit;
cursor: pointer;
@@ -125,7 +125,7 @@
.cdk-drag-preview {
box-sizing: border-box;
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.25),
0 4px 12px rgba(0, 0, 0, 0.15),
@@ -162,7 +162,7 @@
button {
width: 34px;
height: 34px;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
color: inherit;
opacity: 0.76;
transition:
diff --git a/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.scss b/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.scss
index 36340c7158..5736c5b02a 100644
--- a/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.scss
+++ b/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.scss
@@ -72,7 +72,7 @@
gap: 6px;
flex-shrink: 0;
min-height: 32px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
color: var(--app-body-color, var(--mat-sys-on-surface-variant));
--mdc-text-button-label-text-color: currentColor;
--mat-text-button-state-layer-color: currentColor;
@@ -141,7 +141,7 @@
min-width: 18px;
height: 18px;
padding: 0 5px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
font-size: 0.68rem;
font-weight: 700;
line-height: 1;
diff --git a/libs/portal/downloads/feature/src/lib/downloads.component.scss b/libs/portal/downloads/feature/src/lib/downloads.component.scss
index 5ffd989e3c..1cd71d6800 100644
--- a/libs/portal/downloads/feature/src/lib/downloads.component.scss
+++ b/libs/portal/downloads/feature/src/lib/downloads.component.scss
@@ -95,7 +95,7 @@
background: var(--mat-sys-primary);
color: var(--mat-sys-on-primary);
padding: 0.125rem 0.5rem;
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
font-size: 0.75rem;
font-weight: 600;
}
@@ -112,7 +112,7 @@
transparent
);
border: 1px solid var(--mat-sys-outline-variant);
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
box-shadow: inset 0 1px 0
color-mix(in srgb, var(--mat-sys-on-surface) 8%, transparent);
@@ -209,7 +209,7 @@
min-width: 0;
min-height: 124px;
padding: 1rem;
- border-radius: 14px;
+ border-radius: var(--app-radius-xl);
background: color-mix(
in srgb,
var(--app-widget-bg, var(--mat-sys-surface-container-high)) 88%,
@@ -223,7 +223,7 @@
@extend %downloads-skeleton-shimmer;
width: 64px;
height: 90px;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
border: 1px solid var(--app-separator, var(--mat-sys-outline-variant));
}
@@ -239,7 +239,7 @@
@extend %downloads-skeleton-shimmer;
width: min(70%, 280px);
height: 13px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
&--short {
width: min(48%, 190px);
@@ -255,7 +255,7 @@
@extend %downloads-skeleton-shimmer;
width: 88px;
height: 20px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
&:last-child {
width: 132px;
@@ -267,7 +267,7 @@
@extend %downloads-skeleton-shimmer;
width: 100%;
height: 6px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
margin-top: 0.05rem;
}
@@ -304,7 +304,7 @@
--app-widget-bg,
var(--mat-sys-surface-container-high)
);
- border-radius: 14px;
+ border-radius: var(--app-radius-xl);
border: 1px solid var(--app-separator, var(--mat-sys-outline-variant));
box-shadow: var(--app-widget-shadow, none);
transition:
@@ -338,7 +338,7 @@
&-poster {
width: 64px;
height: 90px;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
overflow: hidden;
flex-shrink: 0;
background: var(
@@ -408,7 +408,7 @@
gap: 0.35rem;
font-weight: 500;
padding: 2px 8px;
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
background: var(
--app-widget-header-bg,
var(--mat-sys-surface-container-high)
@@ -450,7 +450,7 @@
monospace;
background: transparent;
padding: 2px 8px;
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
}
&-error {
@@ -462,7 +462,7 @@
transparent
);
padding: 2px 8px;
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
}
&-actions {
@@ -517,7 +517,7 @@
background: var(--mat-sys-primary);
color: var(--mat-sys-on-primary);
padding: 0.125rem 0.5rem;
- border-radius: 6px;
+ border-radius: var(--app-radius-xs);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
diff --git a/libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.scss b/libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.scss
index 66bb5cffb5..294cd2a06c 100644
--- a/libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.scss
+++ b/libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.scss
@@ -9,7 +9,7 @@
gap: 12px;
padding: 12px 0 0;
border: 1px solid transparent;
- border-radius: 16px;
+ border-radius: var(--app-radius-xl);
transition:
background 0.2s ease,
border-color 0.2s ease,
@@ -62,7 +62,7 @@
align-items: center;
gap: 2px;
padding: 4px 8px 4px 10px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
font-size: 0.78rem;
font-weight: 500;
line-height: 1;
diff --git a/libs/portal/shared/ui/src/lib/components/favorites-layout/favorites-layout.component.scss b/libs/portal/shared/ui/src/lib/components/favorites-layout/favorites-layout.component.scss
index 232c9e9014..823fc56e87 100644
--- a/libs/portal/shared/ui/src/lib/components/favorites-layout/favorites-layout.component.scss
+++ b/libs/portal/shared/ui/src/lib/components/favorites-layout/favorites-layout.component.scss
@@ -58,7 +58,7 @@
color: var(--mat-sys-primary);
background: color-mix(in srgb, var(--mat-sys-primary) 10%, var(--mat-sys-surface-container-high));
padding: 4px 10px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 30%, transparent),
0 1px 3px rgba(0, 0, 0, 0.18);
diff --git a/libs/portal/shared/ui/src/lib/components/global-favorites-list/global-favorites-list.component.scss b/libs/portal/shared/ui/src/lib/components/global-favorites-list/global-favorites-list.component.scss
index e22cb4a933..f71fde293a 100644
--- a/libs/portal/shared/ui/src/lib/components/global-favorites-list/global-favorites-list.component.scss
+++ b/libs/portal/shared/ui/src/lib/components/global-favorites-list/global-favorites-list.component.scss
@@ -22,7 +22,7 @@
}
:host ::ng-deep .search-bar div {
- border-radius: 20px;
+ border-radius: var(--app-radius-2xl);
}
:host ::ng-deep .search-bar div[matformfieldlineripple],
diff --git a/libs/portal/shared/ui/src/lib/components/grid-list/grid-list.component.scss b/libs/portal/shared/ui/src/lib/components/grid-list/grid-list.component.scss
index 4c5c043047..bb30c336c9 100644
--- a/libs/portal/shared/ui/src/lib/components/grid-list/grid-list.component.scss
+++ b/libs/portal/shared/ui/src/lib/components/grid-list/grid-list.component.scss
@@ -37,7 +37,7 @@ mat-card:hover {
position: relative;
width: 100%;
box-sizing: border-box;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
overflow: hidden;
aspect-ratio: 2 / 3; // maintain poster ratio
background: var(--mat-sys-surface-container-high);
@@ -47,7 +47,7 @@ mat-card:hover {
width: 100%;
height: 100%;
object-fit: cover;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
display: block;
// No hardcoded light bg — uses parent container bg
background: transparent;
@@ -60,7 +60,7 @@ mat-card:hover {
display: grid;
place-items: center;
color: var(--app-muted-color, var(--mat-sys-on-surface-variant));
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
mat-icon {
width: clamp(28px, 20%, 42px);
@@ -145,7 +145,7 @@ mat-card:hover {
color: #4ade80; // green-400, readable across themes
font-size: 0.72rem;
font-weight: 600;
- border-radius: 6px;
+ border-radius: var(--app-radius-xs);
display: flex;
justify-content: center;
align-items: center;
diff --git a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.scss b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.scss
index 9898557b49..87609b7036 100644
--- a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.scss
+++ b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.scss
@@ -55,7 +55,7 @@
.toggle-placeholder {
height: 43px;
width: 120px;
- border-radius: 18px;
+ border-radius: var(--app-radius-2xl);
background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent);
&--scope {
diff --git a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-grid-tab.component.scss b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-grid-tab.component.scss
index f4c45795d8..7be807fad0 100644
--- a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-grid-tab.component.scss
+++ b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-grid-tab.component.scss
@@ -24,7 +24,7 @@
}
:host ::ng-deep .search-bar div {
- border-radius: 20px;
+ border-radius: var(--app-radius-2xl);
}
:host ::ng-deep .search-bar div[matformfieldlineripple],
diff --git a/libs/portal/shared/ui/src/lib/navigation/navigation.component.scss b/libs/portal/shared/ui/src/lib/navigation/navigation.component.scss
index d12c17c3e9..1b84ad957d 100644
--- a/libs/portal/shared/ui/src/lib/navigation/navigation.component.scss
+++ b/libs/portal/shared/ui/src/lib/navigation/navigation.component.scss
@@ -19,7 +19,7 @@
min-height: 28px;
height: 28px;
padding: 0 !important;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
margin: 2px 0;
display: flex;
justify-content: center;
@@ -78,7 +78,7 @@ a.mat-mdc-list-item.mdc-list-item {
display: flex;
align-items: center;
justify-content: center;
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
background: var(--mat-sys-surface-container);
color: var(--mat-sys-on-surface-variant);
border: 1px solid var(--mat-sys-outline-variant);
diff --git a/libs/portal/shared/ui/src/lib/navigation/portal-rail-links.component.scss b/libs/portal/shared/ui/src/lib/navigation/portal-rail-links.component.scss
index dda2ea5199..b9fbb54aea 100644
--- a/libs/portal/shared/ui/src/lib/navigation/portal-rail-links.component.scss
+++ b/libs/portal/shared/ui/src/lib/navigation/portal-rail-links.component.scss
@@ -11,7 +11,7 @@
min-height: 28px;
height: 28px;
padding: 0 !important;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
margin: 2px 0;
display: flex;
justify-content: center;
@@ -45,7 +45,7 @@ nav.flex .portal-rail-link {
height: 44px;
padding: 0;
gap: 0;
- border-radius: 14px;
+ border-radius: var(--app-radius-xl);
position: relative;
display: inline-flex;
align-items: center;
@@ -88,7 +88,7 @@ nav.flex .portal-rail-link.active::after {
transform: translateY(-50%);
width: 4px;
height: 20px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: var(--app-selection-color);
box-shadow: 0 0 10px var(--app-selection-glow);
}
diff --git a/libs/portal/shared/ui/src/lib/styles/_skeleton.scss b/libs/portal/shared/ui/src/lib/styles/_skeleton.scss
index 2ac9351d51..1f4a92e4a1 100644
--- a/libs/portal/shared/ui/src/lib/styles/_skeleton.scss
+++ b/libs/portal/shared/ui/src/lib/styles/_skeleton.scss
@@ -11,7 +11,7 @@
position: relative;
width: 100%;
aspect-ratio: 2 / 3;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
overflow: hidden;
background: color-mix(
in srgb,
@@ -32,7 +32,7 @@
right: 8px;
width: 34px;
height: 14px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: color-mix(
in srgb,
var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 56%,
@@ -49,7 +49,7 @@
.grid-skeleton-line {
height: 9px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: color-mix(
in srgb,
var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 52%,
@@ -95,7 +95,7 @@
.list-skeleton-avatar {
width: 40px;
height: 40px;
- border-radius: 6px;
+ border-radius: var(--app-radius-xs);
flex-shrink: 0;
background: color-mix(
in srgb,
diff --git a/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.scss b/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.scss
index 1509296611..11017a0ad1 100644
--- a/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.scss
+++ b/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.scss
@@ -31,7 +31,7 @@
flex: 1;
width: 100%;
height: 36px;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
border: 1px solid rgba(127, 127, 127, 0.22);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)),
diff --git a/libs/portal/stalker/feature/src/lib/stalker-favorites-button/stalker-favorites-button.component.scss b/libs/portal/stalker/feature/src/lib/stalker-favorites-button/stalker-favorites-button.component.scss
index 8a45e41415..ddcbceaa5e 100644
--- a/libs/portal/stalker/feature/src/lib/stalker-favorites-button/stalker-favorites-button.component.scss
+++ b/libs/portal/stalker/feature/src/lib/stalker-favorites-button/stalker-favorites-button.component.scss
@@ -9,7 +9,7 @@
background: rgba(109, 109, 110, 0.7);
color: #fff;
border: none;
- border-radius: 16px;
+ border-radius: var(--app-radius-xl);
cursor: pointer;
transition: all 0.2s ease;
diff --git a/libs/portal/xtream/feature/src/lib/account-info/account-info.component.scss b/libs/portal/xtream/feature/src/lib/account-info/account-info.component.scss
index f553b6fb35..2d582be3df 100644
--- a/libs/portal/xtream/feature/src/lib/account-info/account-info.component.scss
+++ b/libs/portal/xtream/feature/src/lib/account-info/account-info.component.scss
@@ -35,7 +35,7 @@
.account-dialog__eyebrow-mark {
width: 8px;
height: 8px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: var(--app-provider-xtream, var(--mat-sys-primary));
box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-provider-xtream, var(--mat-sys-primary)) 14%, transparent);
}
@@ -43,7 +43,7 @@
.account-dialog__eyebrow-divider {
width: 3px;
height: 3px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: currentColor;
opacity: 0.5;
}
@@ -84,7 +84,7 @@
justify-content: center;
min-height: 28px;
padding: 0 10px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
border: 1px solid var(--app-separator);
background: var(--mat-sys-surface-container);
color: var(--app-body-color, var(--mat-sys-on-surface));
@@ -116,7 +116,7 @@
.account-dialog__message {
padding: 10px 14px;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
border: 1px solid var(--app-separator);
background: var(--mat-sys-surface-container);
line-height: 1.5;
@@ -134,7 +134,7 @@
display: grid;
gap: 6px;
padding: 12px 14px;
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
border: 1px solid var(--app-widget-border, transparent);
background: var(--app-widget-bg, var(--mat-sys-surface-container));
box-shadow: var(--app-widget-shadow, none);
@@ -149,7 +149,7 @@
display: inline-flex;
align-items: center;
justify-content: center;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
background: color-mix(in srgb, var(--app-provider-xtream, var(--mat-sys-primary)) 12%, transparent);
color: var(--app-provider-xtream, var(--mat-sys-primary));
@@ -179,7 +179,7 @@
position: relative;
overflow: hidden;
height: 4px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: var(--app-separator);
}
@@ -208,7 +208,7 @@
display: grid;
gap: 14px;
padding: 16px;
- border-radius: 16px;
+ border-radius: var(--app-radius-xl);
border: 1px solid var(--app-widget-border, transparent);
background: var(--app-widget-bg, var(--mat-sys-surface-container-low));
box-shadow: var(--app-widget-shadow, none);
@@ -319,7 +319,7 @@
align-items: center;
min-height: 28px;
padding: 0 10px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
border: 1px solid color-mix(in srgb, var(--app-provider-xtream, var(--mat-sys-primary)) 16%, transparent);
background: color-mix(in srgb, var(--app-provider-xtream, var(--mat-sys-primary)) 8%, transparent);
color: var(--app-body-color, var(--mat-sys-on-surface));
@@ -345,7 +345,7 @@
justify-items: center;
gap: 12px;
padding: 36px 20px;
- border-radius: 16px;
+ border-radius: var(--app-radius-xl);
border: 1px dashed var(--app-separator);
background: var(--app-widget-bg, var(--mat-sys-surface-container-low));
text-align: center;
@@ -369,7 +369,7 @@
display: inline-flex;
align-items: center;
justify-content: center;
- border-radius: 14px;
+ border-radius: var(--app-radius-xl);
background: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);
color: var(--mat-sys-error);
}
@@ -382,7 +382,7 @@
.account-skeleton {
position: relative;
overflow: hidden;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: var(--app-separator);
}
@@ -402,7 +402,7 @@
.account-skeleton--stat {
min-height: 110px;
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
}
.account-skeleton--heading {
@@ -431,7 +431,7 @@
.account-dialog__close {
min-width: 100px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
}
@keyframes account-dialog-shimmer {
diff --git a/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.scss b/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.scss
index 2f1944edf0..36f879ca02 100644
--- a/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.scss
+++ b/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.scss
@@ -49,7 +49,7 @@
gap: 8px;
padding: 0 10px;
min-height: 36px;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
border: 1px solid var(--app-search-border, var(--mat-sys-outline-variant));
background: var(--app-search-bg, var(--mat-sys-surface-container));
cursor: text;
@@ -113,7 +113,7 @@
min-height: 200px;
overflow-y: auto;
border: 1px solid var(--mat-sys-outline-variant);
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
}
.category-item {
diff --git a/libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.scss b/libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.scss
index ee772f77fd..56b4550f9a 100644
--- a/libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.scss
+++ b/libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.scss
@@ -89,7 +89,7 @@ app-grid-list.live-all-items-grid {
.archive-unavailable-banner {
margin: 12px 12px 0;
padding: 12px 14px;
- border-radius: 14px;
+ border-radius: var(--app-radius-xl);
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(
diff --git a/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.scss b/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.scss
index 0df50214bb..23e8a793ca 100644
--- a/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.scss
+++ b/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.scss
@@ -44,7 +44,7 @@
flex: 1;
width: 100%;
height: 36px;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
border: 1px solid rgba(127, 127, 127, 0.22);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)),
diff --git a/libs/portal/xtream/feature/src/lib/recently-added/recently-added.component.scss b/libs/portal/xtream/feature/src/lib/recently-added/recently-added.component.scss
index 1ea7b22f63..0c2044a636 100644
--- a/libs/portal/xtream/feature/src/lib/recently-added/recently-added.component.scss
+++ b/libs/portal/xtream/feature/src/lib/recently-added/recently-added.component.scss
@@ -46,7 +46,7 @@
.recently-added-page__skeleton-header {
width: 180px;
height: 22px;
- border-radius: 6px;
+ border-radius: var(--app-radius-xs);
}
.recently-added-page__skeleton-track {
@@ -60,7 +60,7 @@
flex: 0 0 var(--cover-rail-width, 160px);
width: var(--cover-rail-width, 160px);
aspect-ratio: 2 / 3;
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
}
.recently-added-page__skeleton-header,
diff --git a/libs/portal/xtream/feature/src/lib/vod-details/vod-details-route.component.scss b/libs/portal/xtream/feature/src/lib/vod-details/vod-details-route.component.scss
index c35099222b..71492caed5 100644
--- a/libs/portal/xtream/feature/src/lib/vod-details/vod-details-route.component.scss
+++ b/libs/portal/xtream/feature/src/lib/vod-details/vod-details-route.component.scss
@@ -20,7 +20,7 @@
margin-bottom: 4px;
padding: 14px 16px;
border: 1px solid color-mix(in srgb, var(--tag-border) 85%, transparent);
- border-radius: 14px;
+ border-radius: var(--app-radius-xl);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--surface-bg) 86%, transparent) 0%,
diff --git a/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.scss b/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.scss
index e74c10efbe..4d5840d818 100644
--- a/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.scss
+++ b/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.scss
@@ -92,7 +92,7 @@
}
:host ::ng-deep .search-bar div {
- border-radius: 20px;
+ border-radius: var(--app-radius-2xl);
}
:host ::ng-deep .search-bar div[matformfieldlineripple],
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-details-dialog/channel-details-dialog.component.scss b/libs/ui/components/src/lib/channel-list-container/channel-details-dialog/channel-details-dialog.component.scss
index 7b53595d4f..e8e59c6b91 100644
--- a/libs/ui/components/src/lib/channel-list-container/channel-details-dialog/channel-details-dialog.component.scss
+++ b/libs/ui/components/src/lib/channel-list-container/channel-details-dialog/channel-details-dialog.component.scss
@@ -35,7 +35,7 @@
.channel-dialog__eyebrow-mark {
width: 8px;
height: 8px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: var(--mat-sys-primary);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--mat-sys-primary) 14%, transparent);
}
@@ -57,7 +57,7 @@
.channel-dialog__logo {
width: 48px;
height: 48px;
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
object-fit: contain;
background: var(--mat-sys-surface-container);
border: 1px solid var(--app-separator);
@@ -94,7 +94,7 @@
justify-content: center;
min-height: 26px;
padding: 0 10px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
border: 1px solid var(--app-separator);
background: var(--mat-sys-surface-container);
color: var(--app-body-color, var(--mat-sys-on-surface));
@@ -133,7 +133,7 @@
display: grid;
gap: 4px;
padding: 12px 14px;
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
border: 1px solid var(--app-widget-border, transparent);
background: var(--app-widget-bg, var(--mat-sys-surface-container));
box-shadow: var(--app-widget-shadow, none);
@@ -147,7 +147,7 @@
display: inline-flex;
align-items: center;
justify-content: center;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
color: var(--mat-sys-primary);
@@ -207,7 +207,7 @@
align-items: flex-start;
gap: 8px;
padding: 10px 10px 10px 14px;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
border: 1px solid var(--app-separator);
background: var(--mat-sys-surface-container);
@@ -237,7 +237,7 @@
display: grid;
gap: 14px;
padding: 16px;
- border-radius: 16px;
+ border-radius: var(--app-radius-xl);
border: 1px solid var(--app-widget-border, transparent);
background: var(--app-widget-bg, var(--mat-sys-surface-container-low));
box-shadow: var(--app-widget-shadow, none);
@@ -347,7 +347,7 @@
.channel-dialog__close {
min-width: 100px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
}
// ─── Responsive breakpoints ─────────────────────────────────────────────────
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-container.component.scss b/libs/ui/components/src/lib/channel-list-container/channel-list-container.component.scss
index bf3560dc0f..89bd033fb0 100644
--- a/libs/ui/components/src/lib/channel-list-container/channel-list-container.component.scss
+++ b/libs/ui/components/src/lib/channel-list-container/channel-list-container.component.scss
@@ -31,7 +31,7 @@
.empty-source-state__icon-wrapper {
width: 64px;
height: 64px;
- border-radius: 20px;
+ border-radius: var(--app-radius-2xl);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
rgba(127, 127, 127, 0.1);
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-item-skeleton/channel-list-item-skeleton.component.scss b/libs/ui/components/src/lib/channel-list-container/channel-list-item-skeleton/channel-list-item-skeleton.component.scss
index 8deb39f911..1cc0a2a120 100644
--- a/libs/ui/components/src/lib/channel-list-container/channel-list-item-skeleton/channel-list-item-skeleton.component.scss
+++ b/libs/ui/components/src/lib/channel-list-container/channel-list-item-skeleton/channel-list-item-skeleton.component.scss
@@ -14,7 +14,7 @@
gap: 12px;
padding: 8px 10px 8px 12px;
border: 1px solid transparent;
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
background: transparent;
box-sizing: border-box;
overflow: hidden;
@@ -37,7 +37,7 @@
width: 44px;
height: 44px;
flex-shrink: 0;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
.compact & {
width: 38px;
@@ -56,20 +56,20 @@
.channel-name-skeleton {
height: 11px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
max-width: 100%;
}
.epg-title-skeleton {
height: 9px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
max-width: 100%;
}
.epg-progress-skeleton {
height: 6px;
width: 100%;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
}
.action-buttons-skeleton {
@@ -83,7 +83,7 @@
.action-button-skeleton {
width: 34px;
height: 34px;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
}
@container (max-width: 360px) {
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.html b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.html
index c215f2cb86..fcfdbdec3d 100644
--- a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.html
+++ b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.html
@@ -5,9 +5,15 @@
[cdkDragDisabled]="!isDraggable()"
cdkDragPreviewContainer="parent"
[class.active]="selected()"
+ role="button"
+ tabindex="0"
+ [attr.aria-label]="name()"
+ [attr.aria-current]="selected() || null"
(click)="onClick($event)"
(dblclick)="onDoubleClick()"
(contextmenu)="onContextMenu($event)"
+ (keydown.enter)="onKeydownActivate($event)"
+ (keydown.space)="onKeydownActivate($event)"
data-test-id="channel-item"
>
@if (isDraggable()) {
@@ -77,6 +83,9 @@
[matTooltip]="
'EPG.PROGRAM_DIALOG.SHOW_PROGRAM_DETAILS' | translate
"
+ [attr.aria-label]="
+ 'EPG.PROGRAM_DIALOG.SHOW_PROGRAM_DETAILS' | translate
+ "
(click)="showProgramDescription(program, $event)"
>
info
@@ -92,6 +101,12 @@
: 'CHANNELS.ADD_FAVORITE'
) | translate
"
+ [attr.aria-label]="
+ (isFavorite()
+ ? 'CHANNELS.REMOVE_FAVORITE'
+ : 'CHANNELS.ADD_FAVORITE'
+ ) | translate
+ "
(click)="onFavoriteClick($event)"
>
{{
@@ -104,6 +119,7 @@
mat-icon-button
class="favorite-button"
[matTooltip]="auxActionTooltip()"
+ [attr.aria-label]="auxActionTooltip()"
(click)="onAuxActionClick($event)"
>
{{ auxActionIcon() }}
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.scss b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.scss
index 4e7430ad3c..339b127c95 100644
--- a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.scss
+++ b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.scss
@@ -12,7 +12,7 @@
gap: 12px;
padding: 8px 10px 8px 12px;
border: 1px solid transparent;
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
background: transparent;
color: inherit;
cursor: pointer;
@@ -27,6 +27,14 @@
&:hover {
background: color-mix(in srgb, currentColor 8%, transparent);
+ border-color: color-mix(in srgb, currentColor 12%, transparent);
+ }
+
+ &:focus-visible {
+ outline: none;
+ border-color: var(--app-selection-border);
+ box-shadow: 0 0 0 2px
+ color-mix(in srgb, var(--app-selection-color) 45%, transparent);
}
&.active {
@@ -68,7 +76,7 @@
width: 44px;
height: 44px;
flex-shrink: 0;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
display: grid;
place-items: center;
overflow: hidden;
@@ -156,7 +164,7 @@
width: 100%;
height: 6px;
overflow: hidden;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background-color: rgba(127, 127, 127, 0.28);
background-image: linear-gradient(
180deg,
@@ -205,18 +213,25 @@
button {
width: 32px;
height: 32px;
- /* border-radius: 10px; */
+ border-radius: var(--app-radius-sm);
color: inherit;
opacity: 0.76;
transition:
opacity 0.15s ease,
background-color 0.15s ease,
+ box-shadow 0.15s ease,
transform 0.15s ease;
&:hover {
opacity: 1;
background: color-mix(in srgb, currentColor 10%, transparent);
- /* transform: translateY(-1px); */
+ }
+
+ &:focus-visible {
+ outline: none;
+ opacity: 1;
+ box-shadow: 0 0 0 2px
+ color-mix(in srgb, var(--app-selection-color) 45%, transparent);
}
}
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.spec.ts b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.spec.ts
index e101df1003..7b613409e8 100644
--- a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.spec.ts
+++ b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.spec.ts
@@ -112,6 +112,48 @@ describe('ChannelListItemComponent', () => {
expect(activated).toHaveBeenCalledTimes(1);
});
+ it('exposes a keyboard-focusable row with an accessible name', () => {
+ fixture.componentRef.setInput('name', 'Cartoon Network');
+ fixture.detectChanges();
+
+ const row: HTMLElement =
+ fixture.nativeElement.querySelector('.channel-list-item');
+
+ expect(row.getAttribute('role')).toBe('button');
+ expect(row.getAttribute('tabindex')).toBe('0');
+ expect(row.getAttribute('aria-label')).toBe('Cartoon Network');
+ });
+
+ it('activates on Enter/Space keydown like a click', () => {
+ const clicked = jest.fn();
+ fixture.componentInstance.clicked.subscribe(clicked);
+
+ const preventDefault = jest.fn();
+ fixture.componentInstance.onKeydownActivate({
+ preventDefault,
+ } as unknown as KeyboardEvent);
+
+ expect(preventDefault).toHaveBeenCalled();
+ expect(clicked).toHaveBeenCalledTimes(1);
+ });
+
+ it('does not activate the row when a keydown bubbles up from a descendant action button', () => {
+ fixture.componentRef.setInput('name', 'Cartoon Network');
+ fixture.componentRef.setInput('showFavoriteButton', true);
+ fixture.detectChanges();
+
+ const clicked = jest.fn();
+ fixture.componentInstance.clicked.subscribe(clicked);
+
+ const favoriteButton: HTMLElement =
+ fixture.nativeElement.querySelector('.favorite-button');
+ favoriteButton.dispatchEvent(
+ new KeyboardEvent('keydown', { key: ' ', bubbles: true })
+ );
+
+ expect(clicked).not.toHaveBeenCalled();
+ });
+
it('emits a context menu request on right click when details are enabled', () => {
fixture.componentRef.setInput('name', 'News One');
fixture.componentRef.setInput('showDetailsContextMenu', true);
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.ts b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.ts
index 06400bc0ac..0e356ea76f 100644
--- a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.ts
+++ b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.ts
@@ -96,6 +96,17 @@ export class ChannelListItemComponent {
this.clicked.emit();
}
+ onKeydownActivate(event: Event): void {
+ if (event.target !== event.currentTarget) {
+ // Ignore Enter/Space bubbling up from a descendant action button
+ // (favorite, info, aux) — it has its own click/keyboard handling.
+ return;
+ }
+
+ event.preventDefault();
+ this.clicked.emit();
+ }
+
onDoubleClick(): void {
this.activated.emit();
}
diff --git a/libs/ui/components/src/lib/channel-list-container/groups-view/group-management-dialog/group-management-dialog.component.scss b/libs/ui/components/src/lib/channel-list-container/groups-view/group-management-dialog/group-management-dialog.component.scss
index e4bfd5b2fc..26b7a557c6 100644
--- a/libs/ui/components/src/lib/channel-list-container/groups-view/group-management-dialog/group-management-dialog.component.scss
+++ b/libs/ui/components/src/lib/channel-list-container/groups-view/group-management-dialog/group-management-dialog.component.scss
@@ -40,7 +40,7 @@
gap: 8px;
padding: 0 10px;
min-height: 36px;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
border: 1px solid var(--app-search-border, var(--mat-sys-outline-variant));
background: var(--app-search-bg, var(--mat-sys-surface-container));
cursor: text;
@@ -104,7 +104,7 @@
min-height: 200px;
overflow-y: auto;
border: 1px solid var(--mat-sys-outline-variant);
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
}
.group-item {
diff --git a/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss
index 61c8f61b4f..30478e2f01 100644
--- a/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss
+++ b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss
@@ -95,7 +95,7 @@
gap: 8px;
padding: 0 10px;
min-height: 36px;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
border: 1px solid var(--app-search-border, var(--mat-sys-outline-variant));
background: var(--app-search-bg, var(--mat-sys-surface-container));
cursor: text;
diff --git a/libs/ui/components/src/lib/channel-list-loading-state/channel-list-loading-state.component.scss b/libs/ui/components/src/lib/channel-list-loading-state/channel-list-loading-state.component.scss
index 3292c762c3..222d35281f 100644
--- a/libs/ui/components/src/lib/channel-list-loading-state/channel-list-loading-state.component.scss
+++ b/libs/ui/components/src/lib/channel-list-loading-state/channel-list-loading-state.component.scss
@@ -97,7 +97,7 @@
gap: 10px;
min-height: 36px;
padding: 0 10px;
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
background: color-mix(
in srgb,
var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 88%,
@@ -115,7 +115,7 @@
.groups-loading-nav__count,
.groups-loading-content__title,
.groups-loading-content__subtitle {
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
}
.groups-loading-nav__label {
diff --git a/libs/ui/components/src/lib/content-hero/content-hero.component.scss b/libs/ui/components/src/lib/content-hero/content-hero.component.scss
index 4b01a2d767..7aff4153f7 100644
--- a/libs/ui/components/src/lib/content-hero/content-hero.component.scss
+++ b/libs/ui/components/src/lib/content-hero/content-hero.component.scss
@@ -225,7 +225,7 @@
width: 100%;
aspect-ratio: 2 / 3;
object-fit: cover;
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
box-shadow: var(--poster-shadow);
background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
transition: transform 0.3s ease;
@@ -234,7 +234,7 @@
&__placeholder {
width: 100%;
aspect-ratio: 2 / 3;
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
display: flex;
flex-direction: column;
@@ -436,7 +436,7 @@
background: #fff;
color: #141414;
border: none;
- border-radius: 16px;
+ border-radius: var(--app-radius-xl);
cursor: pointer;
transition: all 0.2s ease;
diff --git a/libs/ui/components/src/lib/external-playback-dock/external-playback-dock.component.scss b/libs/ui/components/src/lib/external-playback-dock/external-playback-dock.component.scss
index 29158fd717..b1b4dacb9d 100644
--- a/libs/ui/components/src/lib/external-playback-dock/external-playback-dock.component.scss
+++ b/libs/ui/components/src/lib/external-playback-dock/external-playback-dock.component.scss
@@ -36,7 +36,7 @@
min-height: 48px;
padding: 8px 10px;
gap: 10px;
- border-radius: 16px;
+ border-radius: var(--app-radius-xl);
box-shadow:
0 12px 28px rgba(15, 23, 42, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
@@ -44,7 +44,7 @@
.external-playback-dock__artwork {
width: 38px;
height: 38px;
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
}
.external-playback-dock__title {
@@ -61,7 +61,7 @@
height: 48px;
padding: 0;
border: 0;
- border-radius: 14px;
+ border-radius: var(--app-radius-xl);
overflow: hidden;
background: color-mix(in srgb, var(--mat-sys-surface-container-highest) 92%, transparent);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
@@ -113,7 +113,7 @@
display: inline-flex;
align-items: center;
height: 18px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: color-mix(
in srgb,
var(--mat-sys-surface-container-highest) 80%,
@@ -175,7 +175,7 @@
}
.external-playback-dock__button {
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
white-space: nowrap;
}
diff --git a/libs/ui/components/src/lib/season-container/season-container.component.html b/libs/ui/components/src/lib/season-container/season-container.component.html
index 7e7e97ce6a..837dd2674c 100644
--- a/libs/ui/components/src/lib/season-container/season-container.component.html
+++ b/libs/ui/components/src/lib/season-container/season-container.component.html
@@ -95,7 +95,15 @@ This season is empty
@let episodeInfo = getEpisodeInfo(episode);
@let episodeInfo = getEpisodeInfo(episode);
{
).toBeNull();
});
+ it('does not select the episode when a keydown bubbles up from a descendant action button', () => {
+ const episode = createEpisode();
+ setRequiredInputs({ '1': [episode] });
+ fixture.detectChanges();
+
+ fixture.nativeElement.querySelector('.season-card').click();
+ fixture.detectChanges();
+
+ const episodeClicked = jest.fn();
+ component.episodeClicked.subscribe(episodeClicked);
+
+ const toggleWatchedButton: HTMLElement =
+ fixture.nativeElement.querySelector('.toggle-watched-btn');
+ toggleWatchedButton.dispatchEvent(
+ new KeyboardEvent('keydown', { key: ' ', bubbles: true })
+ );
+
+ expect(episodeClicked).not.toHaveBeenCalled();
+ });
+
it('clears a stale selected season when the input seasons change', () => {
const episode = createEpisode();
diff --git a/libs/ui/components/src/lib/season-container/season-container.component.ts b/libs/ui/components/src/lib/season-container/season-container.component.ts
index 4c4a25fd01..222acfb327 100644
--- a/libs/ui/components/src/lib/season-container/season-container.component.ts
+++ b/libs/ui/components/src/lib/season-container/season-container.component.ts
@@ -153,6 +153,18 @@ export class SeasonContainerComponent implements OnInit, DoCheck {
this.episodeClicked.emit(episode);
}
+ onEpisodeKeydownActivate(event: Event, episode: XtreamSerieEpisode): void {
+ if (event.target !== event.currentTarget) {
+ // Ignore Enter/Space bubbling up from a descendant action button
+ // (download, play-local, toggle-watched) — it has its own click
+ // and keyboard handling.
+ return;
+ }
+
+ event.preventDefault();
+ this.selectEpisode(episode);
+ }
+
toggleWatched(event: Event, episode: XtreamSerieEpisode) {
event.stopPropagation();
if (!this.playlistId()) {
diff --git a/libs/ui/epg/src/lib/epg-list/epg-item-description/epg-item-description.component.scss b/libs/ui/epg/src/lib/epg-list/epg-item-description/epg-item-description.component.scss
index 210f93bdb6..9503964db0 100644
--- a/libs/ui/epg/src/lib/epg-list/epg-item-description/epg-item-description.component.scss
+++ b/libs/ui/epg/src/lib/epg-list/epg-item-description/epg-item-description.component.scss
@@ -1,272 +1,300 @@
-// Matches the EPG timeline design system (same tokens + fallbacks).
-$surface-1: var(--surface-1, #0f141c);
-$surface-2: var(--surface-2, #161d28);
-$surface-3: var(--surface-3, #1d2533);
-$text-primary: var(--text-primary, #e7ecf3);
-$text-secondary: var(--text-secondary, #9aa3b2);
-$text-tertiary: var(--text-tertiary, #6b7384);
-$accent-blue: var(--accent-blue, #4f8eff);
-$accent-cyan: var(--accent-cyan, #5cd6ff);
-$line: var(--line, rgba(255, 255, 255, 0.06));
-$line-strong: var(--line-strong, rgba(255, 255, 255, 0.1));
-$font-mono: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
-
-.epg-dialog {
- box-sizing: border-box;
- width: 540px;
- max-width: 100%;
- background: $surface-1;
+// Broadcast control room palette
+$bg-deep: #0a0a0f;
+$bg-surface: #12121a;
+$bg-elevated: #1a1a24;
+$accent-cyan: #00d4aa;
+$accent-purple: #8b5cf6;
+$text-primary: #f8fafc;
+$text-secondary: rgba(248, 250, 252, 0.7);
+$text-muted: rgba(248, 250, 252, 0.4);
+$border-subtle: rgba(255, 255, 255, 0.08);
+
+.program-dialog {
+ background: linear-gradient(180deg, $bg-surface 0%, $bg-deep 100%);
color: $text-primary;
- border: 1px solid $line-strong;
- border-radius: var(--r-lg, 14px);
+ min-width: 380px;
+ max-width: 800px;
+ border-radius: var(--app-radius-xl);
overflow: hidden;
- box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
+ position: relative;
- * {
- box-sizing: border-box;
+ // Ambient glow effect
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 120px;
+ background: radial-gradient(
+ ellipse at top center,
+ rgba($accent-cyan, 0.12) 0%,
+ transparent 70%
+ );
+ pointer-events: none;
}
}
-/* ── hero ── */
-.epg-dialog__hero {
+// Header with time and channel
+.program-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ padding: 24px 24px 16px;
position: relative;
- height: 132px;
- display: grid;
- place-items: center;
- border-bottom: 1px solid $line;
- background:
- radial-gradient(
- 120% 150% at 78% 22%,
- rgba(110, 60, 180, 0.4),
- transparent 60%
- ),
- radial-gradient(
- 130% 160% at 18% 18%,
- rgba(30, 40, 70, 0.55),
- transparent 55%
- ),
- #0b0e16;
-
-}
-
-.epg-dialog__hero-glyph {
- font-size: 40px;
- width: 40px;
- height: 40px;
- color: rgba(255, 255, 255, 0.16);
+ z-index: 1;
}
-.epg-dialog__logo {
- max-width: 56%;
- max-height: 76px;
- object-fit: contain;
- /* a soft plate so logos on transparent/white art stay legible on the
- dark gradient */
- padding: 8px 12px;
- border-radius: 10px;
- background: rgba(8, 11, 17, 0.42);
- backdrop-filter: blur(2px);
+.time-block {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
}
-.epg-dialog__chan {
- position: absolute;
- left: 14px;
- top: 12px;
- max-width: calc(100% - 64px);
- display: inline-flex;
+.time-display {
+ display: flex;
align-items: center;
- gap: 7px;
- padding: 5px 11px;
- border-radius: 999px;
- background: rgba(8, 11, 17, 0.72);
- border: 1px solid $line;
- font-size: 12px;
- color: $text-secondary;
- backdrop-filter: blur(6px);
-
- mat-icon {
- font-size: 15px;
- width: 15px;
- height: 15px;
- color: $accent-blue;
- flex: 0 0 auto;
- }
-}
+ gap: 8px;
+ font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
+ font-size: 28px;
+ font-weight: 600;
+ letter-spacing: -0.02em;
-.epg-dialog__chan-name {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
+ .time-start {
+ color: $accent-cyan;
+ text-shadow: 0 0 20px rgba($accent-cyan, 0.4);
+ }
-.epg-dialog__close {
- position: absolute;
- right: 12px;
- top: 12px;
- width: 30px;
- height: 30px;
- display: grid;
- place-items: center;
- border: none;
- border-radius: 8px;
- background: rgba(8, 11, 17, 0.72);
- color: $text-secondary;
- cursor: pointer;
- backdrop-filter: blur(6px);
- transition:
- color 120ms,
- background 120ms;
-
- mat-icon {
- font-size: 18px;
- width: 18px;
- height: 18px;
+ .time-separator {
+ color: $text-muted;
+ font-weight: 300;
}
- &:hover {
- color: $text-primary;
- background: $surface-3;
+ .time-end {
+ color: $text-secondary;
}
}
-/* ── body ── */
-.epg-dialog__body {
- padding: 18px 22px 22px;
+.date-display {
+ font-size: 13px;
+ color: $text-muted;
+ letter-spacing: 0.02em;
}
-.epg-dialog__meta {
+.channel-badge {
display: flex;
align-items: center;
- flex-wrap: wrap;
gap: 8px;
- font-family: $font-mono;
- font-size: 11.5px;
- color: $text-tertiary;
- margin-bottom: 10px;
+ padding: 8px 14px;
+ background: rgba($accent-purple, 0.15);
+ border: 1px solid rgba($accent-purple, 0.3);
+ border-radius: var(--app-radius-2xl);
+ font-size: 13px;
+ font-weight: 500;
+ color: $text-primary;
+
+ .channel-icon {
+ font-size: 14px;
+ }
+
+ .channel-name {
+ max-width: 140px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
}
-.epg-dialog__dot {
- width: 3px;
- height: 3px;
- border-radius: 50%;
- background: currentColor;
- opacity: 0.55;
+// Title section
+.program-title-section {
+ padding: 0 24px 20px;
+ border-bottom: 1px solid $border-subtle;
}
-.epg-dialog__title {
+.program-title {
margin: 0 0 12px;
- font-size: 21px;
+ font-size: 22px;
font-weight: 600;
- line-height: 1.25;
- letter-spacing: -0.01em;
+ line-height: 1.3;
color: $text-primary;
+ letter-spacing: -0.01em;
+}
+
+.category-tag {
+ display: inline-block;
+ padding: 6px 12px;
+ background: rgba($accent-cyan, 0.1);
+ border: 1px solid rgba($accent-cyan, 0.25);
+ border-radius: var(--app-radius-xs);
+ font-size: 11px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+ color: $accent-cyan;
+}
+
+// Content section
+.program-content {
+ padding: 20px 24px;
}
-.epg-dialog__desc {
- margin: 0 0 18px;
+.program-description {
+ margin: 0 0 24px;
font-size: 14px;
- line-height: 1.55;
+ line-height: 1.7;
color: $text-secondary;
}
-/* ── episode / rating tags ── */
-.epg-dialog__tags {
- display: flex;
- flex-wrap: wrap;
- gap: 8px;
- margin: 0 0 20px;
+// Meta grid
+.meta-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+ gap: 16px;
}
-.epg-dialog__tag {
- display: inline-flex;
+.meta-item {
+ display: flex;
flex-direction: column;
- gap: 2px;
- padding: 7px 11px;
- border-radius: 8px;
- background: $surface-2;
- border: 1px solid $line;
- font-size: 13px;
+ gap: 4px;
+ padding: 12px;
+ background: rgba(255, 255, 255, 0.03);
+ border-radius: var(--app-radius-sm);
+ border: 1px solid $border-subtle;
+}
+
+.meta-label {
+ font-size: 10px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ color: $text-muted;
+}
+
+.meta-value {
+ font-size: 14px;
font-weight: 500;
color: $text-primary;
- small {
- font-family: $font-mono;
- font-size: 9px;
- font-weight: 700;
- letter-spacing: 0.08em;
- text-transform: uppercase;
- color: $text-tertiary;
- }
-
- &--rating {
- color: $accent-cyan;
+ &.rating {
+ color: $accent-purple;
}
}
-/* ── actions ── */
-.epg-dialog__actions {
+// Footer
+.program-footer {
+ padding: 16px 24px 24px;
display: flex;
- align-items: center;
- gap: 10px;
+ justify-content: flex-end;
}
-.epg-dialog__spacer {
- flex: 1;
-}
+.close-button {
+ padding: 10px 24px;
+ background: transparent;
+ border: 1px solid rgba($accent-cyan, 0.4);
+ border-radius: var(--app-radius-sm);
+ font-size: 13px;
+ font-weight: 500;
+ color: $accent-cyan;
+ cursor: pointer;
+ transition: all 0.2s ease;
-.epg-dialog__note {
- font-size: 12.5px;
- color: $text-tertiary;
+ &:hover {
+ background: rgba($accent-cyan, 0.1);
+ border-color: $accent-cyan;
+ box-shadow: 0 0 20px rgba($accent-cyan, 0.2);
+ }
}
-.epg-dialog__btn {
- display: inline-flex;
- align-items: center;
- gap: 8px;
- height: 40px;
- padding: 0 16px;
- border-radius: 10px;
- border: 1px solid transparent;
- font: inherit;
- font-size: 13.5px;
- font-weight: 600;
- cursor: pointer;
+// Override Material dialog styling
+::ng-deep .mat-mdc-dialog-container {
+ --mdc-dialog-container-color: transparent;
+ --mdc-dialog-container-shape: 16px;
- mat-icon {
- font-size: 18px;
- width: 18px;
- height: 18px;
+ .mdc-dialog__surface {
+ background: transparent !important;
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6),
+ 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}
+}
- &--primary {
- background: $accent-blue;
- color: #fff;
+// Light theme adjustments
+::ng-deep .light-theme {
+ .program-dialog {
+ background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+ color: #1e293b;
+
+ &::before {
+ background: radial-gradient(
+ ellipse at top center,
+ rgba(#059669, 0.08) 0%,
+ transparent 70%
+ );
+ }
+ }
- &:hover {
- filter: brightness(1.06);
+ .time-display {
+ .time-start {
+ color: #059669;
+ text-shadow: none;
+ }
+ .time-end {
+ color: #64748b;
}
}
- &--ghost {
- background: transparent;
- color: $text-primary;
- border-color: $line-strong;
+ .date-display {
+ color: #94a3b8;
+ }
- &:hover {
- background: $surface-2;
+ .channel-badge {
+ background: rgba(#7c3aed, 0.08);
+ border-color: rgba(#7c3aed, 0.2);
+ color: #1e293b;
+ }
+
+ .program-title {
+ color: #0f172a;
+ }
+
+ .program-title-section {
+ border-bottom-color: rgba(0, 0, 0, 0.06);
+ }
+
+ .category-tag {
+ background: rgba(#059669, 0.08);
+ border-color: rgba(#059669, 0.2);
+ color: #059669;
+ }
+
+ .program-description {
+ color: #475569;
+ }
+
+ .meta-item {
+ background: rgba(0, 0, 0, 0.02);
+ border-color: rgba(0, 0, 0, 0.06);
+ }
+
+ .meta-label {
+ color: #94a3b8;
+ }
+
+ .meta-value {
+ color: #1e293b;
+
+ &.rating {
+ color: #7c3aed;
}
}
-}
-/* Let the dialog provide its own surface, border and shadow. */
-::ng-deep .mat-mdc-dialog-container {
- --mdc-dialog-container-color: transparent;
+ .close-button {
+ border-color: rgba(#059669, 0.4);
+ color: #059669;
- .mat-mdc-dialog-surface,
- .mdc-dialog__surface {
- background: transparent !important;
- box-shadow: none !important;
- border-radius: var(--r-lg, 14px) !important;
- overflow: visible;
+ &:hover {
+ background: rgba(#059669, 0.08);
+ border-color: #059669;
+ box-shadow: none;
+ }
}
}
diff --git a/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.scss b/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.scss
index 4b5787491c..3bf928e145 100644
--- a/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.scss
+++ b/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.scss
@@ -23,7 +23,7 @@
gap: 6px;
min-width: 42px;
padding: 2px 8px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
font-size: 0.68rem;
line-height: 1.35;
font-weight: 700;
@@ -94,7 +94,7 @@
display: inline-flex;
align-items: center;
justify-content: center;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
cursor: pointer;
opacity: 0.7;
transition:
diff --git a/libs/ui/epg/src/lib/epg-list/epg-list.component.scss b/libs/ui/epg/src/lib/epg-list/epg-list.component.scss
index 80928cf8c2..978538f17e 100644
--- a/libs/ui/epg/src/lib/epg-list/epg-list.component.scss
+++ b/libs/ui/epg/src/lib/epg-list/epg-list.component.scss
@@ -16,7 +16,7 @@
gap: 8px;
button {
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
opacity: 0.84;
transition:
opacity 0.15s ease,
@@ -62,7 +62,7 @@
gap: 5px;
padding: 10px 12px;
border: 1px solid transparent;
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
background: transparent;
transition:
background 0.15s ease,
@@ -142,7 +142,7 @@
inset-block: 12px;
inset-inline-start: 0;
width: 3px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: var(--app-selection-color);
opacity: 0.48;
transform: scaleY(0.68);
@@ -221,7 +221,7 @@
width: 100%;
height: 6px;
overflow: hidden;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background-color: rgba(127, 127, 127, 0.28);
background-image: linear-gradient(
180deg,
diff --git a/libs/ui/epg/src/lib/epg-progress-panel/epg-progress-panel.component.scss b/libs/ui/epg/src/lib/epg-progress-panel/epg-progress-panel.component.scss
index f3d46d3c2b..7fb5cedb1d 100644
--- a/libs/ui/epg/src/lib/epg-progress-panel/epg-progress-panel.component.scss
+++ b/libs/ui/epg/src/lib/epg-progress-panel/epg-progress-panel.component.scss
@@ -27,7 +27,7 @@
width: 300px;
max-width: calc(100vw - 96px);
background: var(--epg-panel-bg);
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
border: 1px solid var(--epg-separator);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
@@ -94,7 +94,7 @@
height: 28px;
padding: 0;
line-height: 28px;
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
color: var(--epg-text-tertiary);
mat-icon {
@@ -164,7 +164,7 @@
height: 24px;
padding: 0;
line-height: 24px;
- border-radius: 6px;
+ border-radius: var(--app-radius-xs);
opacity: 0;
transition:
opacity 0.15s ease,
@@ -198,7 +198,7 @@
min-width: 0;
height: 26px;
padding: 0 8px;
- border-radius: 6px;
+ border-radius: var(--app-radius-xs);
font-size: 0.72rem;
line-height: 24px;
white-space: nowrap;
@@ -307,7 +307,7 @@
align-items: center;
gap: 8px;
padding: 3px 6px;
- border-radius: 6px;
+ border-radius: var(--app-radius-xs);
color: var(--epg-text-tertiary);
.queue-position {
diff --git a/libs/ui/epg/src/lib/epg-source-status/epg-source-status.component.scss b/libs/ui/epg/src/lib/epg-source-status/epg-source-status.component.scss
index c18a19769b..7dea2b6dc7 100644
--- a/libs/ui/epg/src/lib/epg-source-status/epg-source-status.component.scss
+++ b/libs/ui/epg/src/lib/epg-source-status/epg-source-status.component.scss
@@ -16,7 +16,7 @@
align-items: center;
gap: 4px;
padding: 2px 8px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.03em;
diff --git a/libs/ui/epg/src/lib/multi-epg/multi-epg-container.component.scss b/libs/ui/epg/src/lib/multi-epg/multi-epg-container.component.scss
index 94bf9af24c..c266833950 100644
--- a/libs/ui/epg/src/lib/multi-epg/multi-epg-container.component.scss
+++ b/libs/ui/epg/src/lib/multi-epg/multi-epg-container.component.scss
@@ -142,7 +142,7 @@ $gradient-header: linear-gradient(
padding: 0 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid $border-subtle;
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
transition: all 0.2s ease;
&:focus-within {
@@ -245,7 +245,7 @@ $gradient-header: linear-gradient(
padding: 0 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid $border-subtle;
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
transition: all 0.2s ease;
&:focus-within {
@@ -323,7 +323,7 @@ $gradient-header: linear-gradient(
overflow-y: auto;
background: $bg-elevated;
border: 1px solid $border-medium;
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
z-index: 10000;
@@ -418,7 +418,7 @@ $gradient-header: linear-gradient(
padding: 24px 16px;
background: $bg-elevated;
border: 1px solid $border-medium;
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
z-index: 10000;
display: flex;
diff --git a/libs/ui/playback/src/lib/audio-player/audio-player.component.scss b/libs/ui/playback/src/lib/audio-player/audio-player.component.scss
index 148235b42e..86c8348db1 100644
--- a/libs/ui/playback/src/lib/audio-player/audio-player.component.scss
+++ b/libs/ui/playback/src/lib/audio-player/audio-player.component.scss
@@ -76,7 +76,7 @@
.artwork {
max-width: 220px;
max-height: 220px;
- border-radius: 18px;
+ border-radius: var(--app-radius-2xl);
overflow: hidden;
background: var(--mat-sys-surface-container);
box-shadow:
@@ -150,7 +150,7 @@
text-transform: uppercase;
color: var(--mat-sys-on-surface-variant);
padding: 3px 12px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
border: 1px solid var(--mat-sys-outline-variant);
background: color-mix(in srgb, var(--mat-sys-surface-container) 60%, transparent);
backdrop-filter: blur(6px);
@@ -278,7 +278,7 @@
.artwork {
max-width: 160px;
max-height: 160px;
- border-radius: 14px;
+ border-radius: var(--app-radius-xl);
img { max-width: 160px; max-height: 160px; }
}
@@ -292,7 +292,7 @@
.artwork {
max-width: 120px;
max-height: 120px;
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
img { max-width: 120px; max-height: 120px; }
}
diff --git a/libs/ui/playback/src/lib/embedded-mpv-player/embedded-mpv-player.component.scss b/libs/ui/playback/src/lib/embedded-mpv-player/embedded-mpv-player.component.scss
index 94e4fca2d7..1eeb8743e6 100644
--- a/libs/ui/playback/src/lib/embedded-mpv-player/embedded-mpv-player.component.scss
+++ b/libs/ui/playback/src/lib/embedded-mpv-player/embedded-mpv-player.component.scss
@@ -111,7 +111,7 @@
padding: 10px 18px;
color: var(--mat-sys-on-surface);
background: color-mix(in srgb, #000 65%, transparent);
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
font-size: 0.95rem;
font-variant-numeric: tabular-nums;
pointer-events: none;
@@ -153,7 +153,7 @@
color: var(--mat-sys-on-surface);
background: var(--embedded-mpv-glass);
border: 1px solid var(--embedded-mpv-border);
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
backdrop-filter: blur(14px);
font-size: 0.85rem;
line-height: 1.4;
@@ -313,7 +313,7 @@
/* WebKit / Chromium — track shows played portion via linear-gradient. */
.embedded-mpv-player__slider::-webkit-slider-runnable-track {
height: 4px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: linear-gradient(
to right,
var(--embedded-mpv-accent) var(--slider-progress),
@@ -352,13 +352,13 @@
/* Firefox — native ::-moz-range-progress for played portion. */
.embedded-mpv-player__slider::-moz-range-track {
height: 4px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: var(--embedded-mpv-track);
}
.embedded-mpv-player__slider::-moz-range-progress {
height: 4px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: var(--embedded-mpv-accent);
}
@@ -388,7 +388,7 @@
color: var(--mat-sys-on-surface);
background: var(--embedded-mpv-glass);
border: 1px solid var(--embedded-mpv-border);
- border-radius: 14px;
+ border-radius: var(--app-radius-xl);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(18px);
}
@@ -465,7 +465,7 @@
color: var(--mat-sys-on-surface);
background: transparent;
border: 0;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
cursor: pointer;
font: inherit;
text-align: left;
diff --git a/libs/ui/playback/src/lib/portal-inline-player/portal-inline-player.component.scss b/libs/ui/playback/src/lib/portal-inline-player/portal-inline-player.component.scss
index 725e9f6899..0e57b9732b 100644
--- a/libs/ui/playback/src/lib/portal-inline-player/portal-inline-player.component.scss
+++ b/libs/ui/playback/src/lib/portal-inline-player/portal-inline-player.component.scss
@@ -8,7 +8,7 @@
gap: 14px;
padding: 18px;
margin-top: 8px;
- border-radius: 18px;
+ border-radius: var(--app-radius-2xl);
border: 1px solid rgba(20, 20, 20, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 250, 245, 0.92)),
@@ -74,7 +74,7 @@
min-height: 320px;
max-height: min(70vh, 720px);
aspect-ratio: 16 / 9;
- border-radius: 14px;
+ border-radius: var(--app-radius-xl);
background: #000;
}
diff --git a/libs/ui/playback/src/lib/portal-inline-player/series-playback-navigation-controls.component.scss b/libs/ui/playback/src/lib/portal-inline-player/series-playback-navigation-controls.component.scss
index c8fd3ae5aa..db3a78fcb9 100644
--- a/libs/ui/playback/src/lib/portal-inline-player/series-playback-navigation-controls.component.scss
+++ b/libs/ui/playback/src/lib/portal-inline-player/series-playback-navigation-controls.component.scss
@@ -14,7 +14,7 @@
gap: 6px;
padding: 5px;
border: 1px solid var(--mat-sys-outline-variant, rgba(255, 255, 255, 0.16));
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: color-mix(
in srgb,
var(--mat-sys-surface, #101010) 76%,
diff --git a/libs/ui/playback/src/lib/web-player-view/web-player-view.component.scss b/libs/ui/playback/src/lib/web-player-view/web-player-view.component.scss
index c8ecd4a7c5..0357d7c1fe 100644
--- a/libs/ui/playback/src/lib/web-player-view/web-player-view.component.scss
+++ b/libs/ui/playback/src/lib/web-player-view/web-player-view.component.scss
@@ -52,7 +52,7 @@ app-html-video-player {
gap: 8px;
padding: 5px 11px;
border: 1px solid rgb(255 174 66 / 42%);
- border-radius: 6px;
+ border-radius: var(--app-radius-xs);
background: rgb(255 148 35 / 15%);
color: #ffb24c;
font-size: 0.78rem;
@@ -109,7 +109,7 @@ app-html-video-player {
margin-top: 12px;
padding: 4px 8px;
border: 1px solid rgb(255 255 255 / 12%);
- border-radius: 6px;
+ border-radius: var(--app-radius-xs);
background: rgb(255 255 255 / 5%);
color: rgb(255 255 255 / 68%);
font-size: 0.78rem;
@@ -133,7 +133,7 @@ app-html-video-player {
gap: 12px;
padding: 12px 16px;
border: 1px solid rgb(255 255 255 / 13%);
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
background: rgb(0 0 0 / 22%);
color: #f5f5f5;
cursor: pointer;
@@ -273,7 +273,7 @@ app-html-video-player {
margin: 12px 0 0;
padding: 12px;
border: 1px solid rgb(255 255 255 / 10%);
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
background: rgb(255 255 255 / 5%);
color: rgb(255 255 255 / 68%);
font-size: 0.78rem;
diff --git a/libs/ui/remote-control/src/lib/remote-control/remote-control.component.scss b/libs/ui/remote-control/src/lib/remote-control/remote-control.component.scss
index da772cebbc..54ef2d4307 100644
--- a/libs/ui/remote-control/src/lib/remote-control/remote-control.component.scss
+++ b/libs/ui/remote-control/src/lib/remote-control/remote-control.component.scss
@@ -1,4 +1,7 @@
:host {
+ // Self-contained tokens — this component ships inside apps/remote-control-web,
+ // a standalone bundle that never loads apps/web/src/m3-theme.scss, so it has
+ // no --app-* variables to read. Keep a fixed dark "device" skin here instead.
--bg-0: #0a1016;
--bg-1: #111c26;
--bg-2: #1c2d3b;
@@ -24,7 +27,11 @@
justify-content: center;
background:
radial-gradient(circle at 12% 8%, rgba(255, 200, 92, 0.18), transparent 35%),
- radial-gradient(circle at 85% 0%, rgba(46, 196, 255, 0.28), transparent 45%),
+ radial-gradient(
+ circle at 85% 0%,
+ color-mix(in srgb, var(--accent) 28%, transparent),
+ transparent 45%
+ ),
linear-gradient(145deg, var(--bg-0), var(--bg-1) 58%, var(--bg-2));
color: var(--ink);
font-family: 'Avenir Next', 'Trebuchet MS', 'Segoe UI', sans-serif;
@@ -42,7 +49,7 @@
height: 8px;
border-radius: 50%;
background: var(--danger);
- box-shadow: 0 0 10px rgba(255, 89, 109, 0.7);
+ box-shadow: 0 0 10px color-mix(in srgb, var(--danger) 70%, transparent);
}
.status-dot.is-active {
@@ -56,8 +63,8 @@
border: 1px solid var(--line);
background: linear-gradient(
155deg,
- rgba(17, 39, 56, 0.92),
- rgba(15, 29, 42, 0.86)
+ color-mix(in srgb, var(--bg-2) 92%, transparent),
+ color-mix(in srgb, var(--bg-1) 86%, transparent)
);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
@@ -103,14 +110,14 @@
.now-card__program {
margin-top: 8px;
font-size: 13px;
- color: #b6d5ea;
+ color: var(--ink-dim);
}
.cluster {
border: 1px solid var(--line);
border-radius: 18px;
padding: 10px;
- background: rgba(9, 21, 31, 0.72);
+ background: color-mix(in srgb, var(--bg-0) 72%, transparent);
}
.cluster__title {
@@ -128,9 +135,13 @@
position: relative;
border-radius: 50%;
overflow: hidden;
- border: 1px solid rgba(97, 166, 214, 0.38);
+ border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
background:
- radial-gradient(circle at 50% 32%, rgba(46, 196, 255, 0.24), transparent 56%),
+ radial-gradient(
+ circle at 50% 32%,
+ color-mix(in srgb, var(--accent) 24%, transparent),
+ transparent 56%
+ ),
linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.01));
}
@@ -157,6 +168,12 @@
opacity: 0.45;
}
+.touchpad__button:focus-visible {
+ outline: none;
+ background: var(--accent-soft);
+ box-shadow: inset 0 0 0 2px var(--accent);
+}
+
.touchpad__button--up {
top: 0;
}
@@ -173,8 +190,8 @@
width: 72px;
height: 72px;
border-radius: 50%;
- border: 1px solid rgba(167, 218, 255, 0.35);
- background: rgba(9, 23, 34, 0.9);
+ border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
+ background: color-mix(in srgb, var(--bg-0) 90%, transparent);
display: grid;
place-items: center;
font-size: 24px;
@@ -184,13 +201,13 @@
.digit-display {
margin-bottom: 8px;
border-radius: 12px;
- border: 1px dashed rgba(167, 218, 255, 0.5);
+ border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
padding: 10px;
text-align: center;
font-family: 'Courier New', monospace;
font-size: 20px;
letter-spacing: 0.16em;
- color: #d5eeff;
+ color: var(--ink);
}
.keypad {
@@ -202,8 +219,8 @@
.keypad__key {
height: 46px;
border-radius: 12px;
- border: 1px solid rgba(167, 218, 255, 0.34);
- background: rgba(15, 38, 55, 0.84);
+ border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
+ background: color-mix(in srgb, var(--bg-1) 84%, transparent);
color: var(--ink);
font-size: 16px;
font-weight: 700;
@@ -211,20 +228,29 @@
.keypad__key:active:not(:disabled) {
transform: translateY(1px);
- background: rgba(29, 67, 94, 0.94);
+ background: color-mix(in srgb, var(--bg-2) 94%, transparent);
}
.keypad__key:disabled {
opacity: 0.45;
}
+.keypad__key:focus-visible {
+ outline: none;
+ box-shadow: 0 0 0 2px var(--accent);
+}
+
.keypad__key--alt {
font-size: 12px;
letter-spacing: 0.06em;
}
.keypad__key--go {
- background: linear-gradient(140deg, #16a8df, #2ec4ff);
+ background: linear-gradient(
+ 140deg,
+ var(--accent),
+ color-mix(in srgb, var(--accent) 70%, white 30%)
+ );
color: #042130;
}
@@ -237,8 +263,8 @@
.volume-row__button {
min-height: 40px;
border-radius: 10px;
- border: 1px solid rgba(167, 218, 255, 0.34);
- background: rgba(15, 38, 55, 0.84);
+ border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
+ background: color-mix(in srgb, var(--bg-1) 84%, transparent);
color: var(--ink);
font-size: 12px;
font-weight: 700;
@@ -246,25 +272,34 @@
}
.volume-row__button--mute {
- border-color: rgba(255, 129, 143, 0.45);
+ border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}
.volume-row__button:disabled {
opacity: 0.45;
}
+.volume-row__button:focus-visible {
+ outline: none;
+ box-shadow: 0 0 0 2px var(--accent);
+}
+
.volume-meter {
margin-top: 10px;
height: 10px;
border-radius: 999px;
- background: rgba(255, 255, 255, 0.1);
+ background: color-mix(in srgb, var(--ink) 10%, transparent);
overflow: hidden;
}
.volume-meter__fill {
height: 100%;
border-radius: inherit;
- background: linear-gradient(90deg, #1fa8de, #42e8ff);
+ background: linear-gradient(
+ 90deg,
+ var(--accent),
+ color-mix(in srgb, var(--accent) 60%, white 40%)
+ );
transition: width 180ms ease;
}
@@ -276,16 +311,16 @@
.remote__error {
border-radius: 12px;
- border: 1px solid rgba(255, 117, 132, 0.5);
- background: rgba(78, 12, 24, 0.65);
- color: #ffd9de;
+ border: 1px solid color-mix(in srgb, var(--danger) 50%, transparent);
+ background: color-mix(in srgb, var(--danger) 18%, var(--bg-1));
+ color: var(--ink);
font-size: 13px;
padding: 10px 12px;
}
.remote__footer {
text-align: center;
- color: rgba(213, 238, 255, 0.72);
+ color: var(--ink-dim);
font-size: 12px;
padding-bottom: 10px;
}
diff --git a/libs/ui/shared-portals/src/lib/epg-view/epg-view.component.scss b/libs/ui/shared-portals/src/lib/epg-view/epg-view.component.scss
index df8a8aa08c..3ae7d5fcb7 100644
--- a/libs/ui/shared-portals/src/lib/epg-view/epg-view.component.scss
+++ b/libs/ui/shared-portals/src/lib/epg-view/epg-view.component.scss
@@ -36,7 +36,7 @@
gap: 10px;
padding: 10px 14px 16px;
border: 1px solid rgba(255, 255, 255, 0.06);
- border-radius: 14px;
+ border-radius: var(--app-radius-xl);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
rgba(127, 127, 127, 0.045);
@@ -93,7 +93,7 @@
.epg-item__badge {
padding: 2px 8px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
font-size: 0.68rem;
line-height: 1.4;
font-weight: 700;
@@ -108,7 +108,7 @@
margin-inline-start: auto;
width: 34px;
height: 34px;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
color: inherit;
opacity: 0.76;
transition:
@@ -149,7 +149,7 @@
width: 100%;
height: 6px;
overflow: hidden;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background-color: rgba(127, 127, 127, 0.28);
background-image: linear-gradient(
180deg,
@@ -181,7 +181,7 @@
.epg-empty {
padding: 22px;
border: 1px dashed rgba(255, 255, 255, 0.12);
- border-radius: 14px;
+ border-radius: var(--app-radius-xl);
text-align: center;
font-size: 0.88rem;
opacity: 0.66;
diff --git a/libs/ui/shared-portals/src/lib/live-epg-panel/live-epg-panel.component.scss b/libs/ui/shared-portals/src/lib/live-epg-panel/live-epg-panel.component.scss
index 42fa6a207a..a463c2cbbe 100644
--- a/libs/ui/shared-portals/src/lib/live-epg-panel/live-epg-panel.component.scss
+++ b/libs/ui/shared-portals/src/lib/live-epg-panel/live-epg-panel.component.scss
@@ -33,7 +33,7 @@
.live-epg-panel__toggle {
width: 40px;
height: 40px;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
color: var(--mat-sys-on-surface-variant);
app-region: no-drag;
@@ -99,7 +99,7 @@
min-width: 0;
height: 36px;
padding-inline: 10px 12px;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
color: var(--app-selection-color);
background: color-mix(
in srgb,
@@ -144,7 +144,7 @@
button {
width: 40px;
height: 40px;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
color: var(--mat-sys-on-surface-variant);
&:hover:not([disabled]) {
@@ -173,7 +173,7 @@
max-width: 150px;
height: 36px;
padding-inline: 10px;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
color: var(--mat-sys-on-surface-variant);
background: color-mix(in srgb, currentColor 7%, transparent);
app-region: no-drag;
@@ -201,7 +201,7 @@
bottom: 5px;
height: 4px;
overflow: hidden;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: color-mix(in srgb, var(--mat-sys-on-surface) 14%, transparent);
}
diff --git a/libs/ui/styles/_content-grid.scss b/libs/ui/styles/_content-grid.scss
index 096df6fb9b..4dd30f3423 100644
--- a/libs/ui/styles/_content-grid.scss
+++ b/libs/ui/styles/_content-grid.scss
@@ -16,7 +16,7 @@
@mixin content-card {
cursor: pointer;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
@@ -28,7 +28,7 @@
@mixin thumbnail-wrapper {
position: relative;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
overflow: hidden;
.poster {
diff --git a/libs/ui/styles/_detail-view-actions.scss b/libs/ui/styles/_detail-view-actions.scss
index 46cfe6e580..13c8d45d17 100644
--- a/libs/ui/styles/_detail-view-actions.scss
+++ b/libs/ui/styles/_detail-view-actions.scss
@@ -44,7 +44,7 @@
background: rgba(255, 255, 255, 0.08);
color: var(--text-primary, #fff);
border: 1px solid rgba(255, 255, 255, 0.12);
- border-radius: 16px;
+ border-radius: var(--app-radius-xl);
cursor: pointer;
transition: all 0.2s ease;
diff --git a/libs/ui/styles/_detail-view.scss b/libs/ui/styles/_detail-view.scss
index e4b248f005..7c4713fcaf 100644
--- a/libs/ui/styles/_detail-view.scss
+++ b/libs/ui/styles/_detail-view.scss
@@ -181,7 +181,7 @@
background-position: 0% 50%;
color: var(--play-btn-fg);
border: 1px solid var(--play-btn-border);
- border-radius: 16px;
+ border-radius: var(--app-radius-xl);
box-shadow: var(--play-btn-shadow);
cursor: pointer;
transition:
@@ -257,7 +257,7 @@
justify-content: center;
width: 34px;
height: 34px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: var(--play-icon-shell-bg);
border: 1px solid var(--play-icon-shell-border);
box-shadow:
@@ -490,7 +490,7 @@
width: 100%;
max-width: 560px;
aspect-ratio: 16 / 9;
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
diff --git a/libs/ui/styles/_panel-header.scss b/libs/ui/styles/_panel-header.scss
index 0738bf2447..fa4283c401 100644
--- a/libs/ui/styles/_panel-header.scss
+++ b/libs/ui/styles/_panel-header.scss
@@ -55,6 +55,6 @@
color: $color;
background: $background;
padding: $padding;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
flex-shrink: 0;
}
\ No newline at end of file
diff --git a/libs/ui/styles/_portal-sidebar.scss b/libs/ui/styles/_portal-sidebar.scss
index 44813b4277..51448cfc17 100644
--- a/libs/ui/styles/_portal-sidebar.scss
+++ b/libs/ui/styles/_portal-sidebar.scss
@@ -73,7 +73,7 @@
color: var(--mat-sys-on-surface-variant);
background: var(--mat-sys-surface-container);
padding: 2px 8px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
}
}
}
diff --git a/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.scss b/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.scss
index b459f7d29a..73eb09e6b7 100644
--- a/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.scss
+++ b/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.scss
@@ -2,7 +2,7 @@
display: block;
--rail-card-width: var(--cover-rail-width, 172px);
--rail-gap: var(--cover-gap, 14px);
- --rail-radius: 12px;
+ --rail-radius: var(--app-radius-lg);
}
.rail {
@@ -38,7 +38,7 @@
align-items: center;
gap: 2px;
padding: 4px 8px 4px 10px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
font-size: 0.78rem;
font-weight: 500;
line-height: 1;
@@ -544,7 +544,7 @@
flex: 0 0 auto;
width: 40px;
height: 40px;
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
background: var(--app-content-bg, #161a22);
display: flex;
align-items: center;
diff --git a/libs/workspace/dashboard/feature/src/lib/rails/workspace-dashboard-rails.component.scss b/libs/workspace/dashboard/feature/src/lib/rails/workspace-dashboard-rails.component.scss
index e5af99b7e9..8ff1e3e2dc 100644
--- a/libs/workspace/dashboard/feature/src/lib/rails/workspace-dashboard-rails.component.scss
+++ b/libs/workspace/dashboard/feature/src/lib/rails/workspace-dashboard-rails.component.scss
@@ -44,7 +44,7 @@
padding: 16px;
text-decoration: none;
color: inherit;
- border-radius: 18px;
+ border-radius: var(--app-radius-2xl);
overflow: hidden;
isolation: isolate;
background: var(--app-widget-header-bg, #232840);
@@ -188,7 +188,7 @@
z-index: 2;
width: var(--hero-poster-width);
aspect-ratio: 2 / 3;
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
overflow: hidden;
background: var(--app-widget-bg, #1e2330);
border: 1px solid var(--app-widget-header-border, rgba(255, 255, 255, 0.1));
@@ -380,7 +380,7 @@
display: block;
height: 4px;
overflow: hidden;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: color-mix(
in srgb,
var(--app-on-surface, #e6e1e5) 14%,
@@ -417,7 +417,7 @@
margin-top: 12px;
height: 4px;
width: min(320px, 70%);
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: color-mix(
in srgb,
var(--app-on-surface, #e6e1e5) 14%,
@@ -434,7 +434,7 @@
display: block;
height: 100%;
background: var(--app-selection-color, #78adff);
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
transition: width 0.4s ease;
}
@@ -465,7 +465,7 @@
align-items: center;
gap: 6px;
padding: 10px 20px 10px 14px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: var(--app-selection-color, #78adff);
color: var(--app-selection-on-color, #071225);
font-size: 0.875rem;
@@ -518,7 +518,7 @@
grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
gap: 24px;
padding: 20px;
- border-radius: 18px;
+ border-radius: var(--app-radius-2xl);
background: var(--app-widget-header-bg, #232840);
border: 1px solid var(--app-widget-header-border, rgba(255, 255, 255, 0.08));
}
@@ -527,7 +527,7 @@
@extend %skeleton-shimmer;
width: 160px;
aspect-ratio: 2 / 3;
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
align-self: center;
}
@@ -543,7 +543,7 @@
@extend %skeleton-shimmer;
width: 60%;
height: 28px;
- border-radius: 6px;
+ border-radius: var(--app-radius-xs);
}
.rails-page__skeleton-hero-title--short {
@@ -562,7 +562,7 @@
@extend %skeleton-shimmer;
width: 160px;
height: 36px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
margin-top: 14px;
}
@@ -578,7 +578,7 @@
@extend %skeleton-shimmer;
width: 180px;
height: 22px;
- border-radius: 6px;
+ border-radius: var(--app-radius-xs);
}
.rails-page__skeleton-track {
@@ -595,7 +595,7 @@
flex: 0 0 var(--cover-rail-width, 172px);
width: var(--cover-rail-width, 172px);
aspect-ratio: 2 / 3;
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
}
@media (prefers-reduced-motion: reduce) {
diff --git a/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites-list.component.scss b/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites-list.component.scss
index 6cb095d90c..eae77bd47f 100644
--- a/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites-list.component.scss
+++ b/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites-list.component.scss
@@ -24,7 +24,7 @@
}
:host ::ng-deep .search-bar div {
- border-radius: 20px;
+ border-radius: var(--app-radius-2xl);
}
:host ::ng-deep .search-bar div[matformfieldlineripple],
diff --git a/libs/workspace/shell/feature/src/lib/playlist-drop-overlay/playlist-drop-overlay.component.scss b/libs/workspace/shell/feature/src/lib/playlist-drop-overlay/playlist-drop-overlay.component.scss
index 7dd81dfe27..9100c269c8 100644
--- a/libs/workspace/shell/feature/src/lib/playlist-drop-overlay/playlist-drop-overlay.component.scss
+++ b/libs/workspace/shell/feature/src/lib/playlist-drop-overlay/playlist-drop-overlay.component.scss
@@ -38,7 +38,7 @@
rgba(37, 99, 235, 0.08)
);
border: 2px dashed rgba(96, 165, 250, 0.55);
- border-radius: 18px;
+ border-radius: var(--app-radius-2xl);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
color: #f1f5f9;
animation: drop-overlay-scale 0.18s ease-out;
@@ -64,7 +64,7 @@
justify-content: center;
width: 64px;
height: 64px;
- border-radius: 18px;
+ border-radius: var(--app-radius-2xl);
background: linear-gradient(135deg, #3b82f6, #2563eb);
box-shadow: 0 8px 22px rgba(59, 130, 246, 0.45);
margin-bottom: 4px;
diff --git a/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.scss b/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.scss
index d1ac130d1c..dcc6d6af98 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.scss
@@ -10,7 +10,7 @@
background: var(--app-widget-bg);
color: var(--mat-sys-on-surface);
border: 1px solid var(--app-separator);
- border-radius: 14px;
+ border-radius: var(--app-radius-xl);
box-shadow:
0 24px 48px -28px rgba(0, 0, 0, 0.5),
0 10px 24px -18px rgba(0, 0, 0, 0.35);
diff --git a/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.scss b/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.scss
index 01c9565452..8a6cb4b490 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.scss
@@ -13,7 +13,7 @@
.context-inline-status {
margin: 0 4px 8px;
padding: 8px 12px;
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
background: color-mix(
in srgb,
var(--app-selection-surface, var(--mat-sys-surface-container)) 72%,
@@ -49,7 +49,7 @@
overflow: hidden;
width: 22px;
height: 10px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: color-mix(
in srgb,
var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 52%,
diff --git a/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.scss b/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.scss
index e2e03a3f5c..2802e26eed 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.scss
@@ -32,6 +32,10 @@
font-weight: 600;
letter-spacing: -0.01em;
color: var(--mat-sys-on-surface);
+ min-width: 0;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
}
}
@@ -71,7 +75,7 @@
gap: 4px;
margin-top: 5px;
padding: 2px 0;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: var(--mat-sys-surface-container);
color: var(--mat-sys-on-surface-variant);
font-size: 0.72rem;
@@ -98,7 +102,7 @@
margin: 0 6px 6px;
padding: 0 10px;
min-height: 36px;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
border: 1px solid var(--app-search-border, var(--mat-sys-outline-variant));
background: var(--app-search-bg, var(--mat-sys-surface-container));
flex-shrink: 0;
@@ -194,7 +198,7 @@ app-workspace-context-category-view {
gap: 10px;
min-height: 36px;
padding: 0 10px;
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
background: color-mix(
in srgb,
var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 88%,
@@ -242,19 +246,19 @@ app-workspace-context-category-view {
.context-skeleton__dot {
width: 12px;
height: 12px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
}
.context-skeleton__label {
height: 9px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
}
.context-skeleton__count {
justify-self: end;
width: 22px;
height: 9px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
}
@keyframes context-skeleton-shimmer {
diff --git a/libs/workspace/shell/feature/src/lib/workspace-keyboard-shortcuts/workspace-keyboard-shortcuts-dialog.component.scss b/libs/workspace/shell/feature/src/lib/workspace-keyboard-shortcuts/workspace-keyboard-shortcuts-dialog.component.scss
index 84943135ca..1926ee7569 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-keyboard-shortcuts/workspace-keyboard-shortcuts-dialog.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-keyboard-shortcuts/workspace-keyboard-shortcuts-dialog.component.scss
@@ -40,7 +40,7 @@
),
var(--shortcut-surface);
border: 1px solid var(--shortcut-border);
- border-radius: 16px;
+ border-radius: var(--app-radius-xl);
box-shadow: 0 22px 70px color-mix(in srgb, black 34%, transparent);
overflow: hidden;
}
@@ -71,7 +71,7 @@
background: color-mix(in srgb, var(--shortcut-accent) 14%, transparent);
border: 1px solid
color-mix(in srgb, var(--shortcut-accent) 28%, transparent);
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
mat-icon {
width: 24px;
@@ -115,7 +115,7 @@
var(--shortcut-surface) 18%
);
border: 1px solid var(--shortcut-border);
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
font-size: 0.76rem;
font-weight: 650;
line-height: 1;
@@ -147,7 +147,7 @@
min-width: 0;
background: var(--shortcut-panel-bg);
border: 1px solid var(--shortcut-border);
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
overflow: hidden;
}
@@ -267,7 +267,7 @@
color: var(--shortcut-text);
background: var(--shortcut-key-bg);
border: 1px solid var(--shortcut-border);
- border-radius: 6px;
+ border-radius: var(--app-radius-xs);
box-shadow:
inset 0 -2px 0 var(--shortcut-key-shadow),
0 1px 0 color-mix(in srgb, white 28%, transparent);
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.scss b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.scss
index d71915cd30..19bf9d03c3 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.scss
@@ -57,3 +57,37 @@
min-height: 0;
overflow: hidden;
}
+
+// ─── Responsive behaviour ──────────────────────────────────────────────────
+// ResizableDirective writes the panel width as an inline style, which a plain
+// `width` rule can never override. `max-width` is NOT set inline, so it still
+// reins the panel in on narrow windows: the sidebar keeps its user-chosen
+// width until the window gets tight, then gracefully shrinks. Padding and gap
+// tighten in step so labels stay readable (nav rows already ellipsis-truncate).
+@media (max-width: 1024px) {
+ .context-panel {
+ max-width: 42vw;
+ }
+}
+
+@media (max-width: 780px) {
+ .context-panel {
+ max-width: 36vw;
+ padding: 10px 8px;
+ gap: 4px;
+ }
+
+ .context-panel--route,
+ .context-panel--sources {
+ padding: 10px 8px 8px 10px;
+ }
+}
+
+@media (max-width: 640px) {
+ // Shell stacks the rail/header/body vertically here; keep the sidebar
+ // usable but compact so the content pane keeps most of the width.
+ .context-panel {
+ max-width: 46vw;
+ padding: 8px;
+ }
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.scss b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.scss
index 83c610edcb..d85bf4ca60 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.scss
@@ -25,7 +25,7 @@
min-width: 160px;
max-width: 560px;
height: 36px;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
border: 1px solid var(--app-search-border, var(--mat-sys-outline-variant));
background: var(--app-search-bg, var(--mat-sys-surface-container));
display: flex;
@@ -56,7 +56,7 @@
max-width: 200px;
padding: 0 10px;
height: 24px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
display: inline-flex;
align-items: center;
justify-content: center;
@@ -171,7 +171,7 @@
button,
a {
color: var(--mat-sys-on-surface-variant);
- border-radius: 8px;
+ border-radius: var(--app-radius-sm);
transition:
color 0.15s ease,
background 0.15s ease;
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-import-overlay/workspace-shell-import-overlay.component.scss b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-import-overlay/workspace-shell-import-overlay.component.scss
index 2976f683ac..306ed0b742 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-import-overlay/workspace-shell-import-overlay.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-import-overlay/workspace-shell-import-overlay.component.scss
@@ -25,7 +25,7 @@
display: grid;
gap: 14px;
padding: 24px 24px 20px;
- border-radius: 24px;
+ border-radius: var(--app-radius-2xl);
border: 1px solid var(--app-separator, rgba(255, 255, 255, 0.12));
background:
linear-gradient(
@@ -60,7 +60,7 @@
align-items: center;
justify-content: center;
padding: 6px 12px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
border: 1px solid rgba(120, 220, 255, 0.24);
background: rgba(120, 220, 255, 0.08);
color: rgba(164, 233, 255, 1);
@@ -107,12 +107,12 @@
.workspace-loading-overlay__action {
justify-self: center;
min-width: 180px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
}
:host ::ng-deep .workspace-loading-overlay__card .mat-mdc-progress-bar {
overflow: hidden;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
}
@keyframes workspace-loading-overlay-enter {
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.scss b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.scss
index 802f2e6689..2f15efa988 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.scss
@@ -17,7 +17,7 @@
height: 44px;
padding: 0;
gap: 0;
- border-radius: 14px;
+ border-radius: var(--app-radius-xl);
position: relative;
display: inline-flex;
align-items: center;
@@ -93,7 +93,7 @@
transform: translateY(-50%);
width: 4px;
height: 20px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: var(--rail-link-active-icon, var(--app-selection-color));
box-shadow: 0 0 10px var(--rail-link-active-glow, var(--app-selection-glow));
}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.scss b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.scss
index eb6610c47c..bd06f6bf82 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.scss
@@ -41,7 +41,7 @@
.app-rail a {
width: 44px;
height: 44px;
- border-radius: 14px;
+ border-radius: var(--app-radius-xl);
position: relative;
display: inline-flex;
align-items: center;
@@ -92,7 +92,7 @@
transform: translateY(-50%);
width: 3px;
height: 18px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: var(--rail-link-active-icon);
box-shadow: 0 0 10px var(--rail-link-active-glow);
}
@@ -104,7 +104,7 @@
color: var(--mat-sys-on-primary-container);
width: 40px;
height: 40px;
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
display: inline-flex;
align-items: center;
justify-content: center;
@@ -126,7 +126,7 @@
max-width: 48px;
padding: 5px 2px;
margin: 4px 0;
- border-radius: 14px;
+ border-radius: var(--app-radius-xl);
background: color-mix(in srgb, var(--app-on-surface) 3%, transparent);
border: 1px solid color-mix(in srgb, var(--app-on-surface) 4%, transparent);
position: relative;
@@ -190,7 +190,7 @@
height: 44px;
padding: 0;
gap: 0;
- border-radius: 14px;
+ border-radius: var(--app-radius-xl);
position: relative;
display: inline-flex;
align-items: center;
@@ -217,7 +217,7 @@
transform: translateY(-50%);
width: 4px;
height: 20px;
- border-radius: 999px;
+ border-radius: var(--app-radius-pill);
background: var(--app-selection-color);
box-shadow: 0 0 10px var(--app-selection-glow);
}
@@ -248,7 +248,7 @@
flex-direction: row;
margin: 0;
padding: 2px 4px;
- border-radius: 10px;
+ border-radius: var(--app-radius-md);
&::before {
display: none;
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.scss b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.scss
index 39156e85df..a728277671 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.scss
@@ -61,7 +61,7 @@ app-workspace-shell-context-sidebar {
min-height: 0;
overflow: auto;
background: var(--app-content-bg, var(--mat-sys-surface));
- border-radius: 16px 0 0 0;
+ border-radius: var(--app-radius-xl) 0 0 0;
box-shadow: -4px 8px 20px var(--app-content-shadow, rgba(0, 0, 0, 0.18));
}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.scss b/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.scss
index 8c0df9dec0..7a4f7e5be5 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.scss
@@ -63,7 +63,7 @@
}
.option-row {
- border-radius: 12px;
+ border-radius: var(--app-radius-lg);
transition:
box-shadow 0.18s ease,
transform 0.18s ease;