diff --git a/apps/web/src/m3-theme.scss b/apps/web/src/m3-theme.scss index 660b64d84..60b860acc 100644 --- a/apps/web/src/m3-theme.scss +++ b/apps/web/src/m3-theme.scss @@ -80,6 +80,9 @@ html { transparent ); + // Live / on-air accent (broadcast indicator) + --app-live-color: #d12c2c; + // Content area --app-content-shadow: -2px 4px 12px rgba(0, 0, 0, 0.06); @@ -152,6 +155,9 @@ html { transparent ); + // Live / on-air accent (broadcast indicator) + --app-live-color: #ff8f8f; + // Content area --app-content-shadow: -4px 8px 20px rgba(0, 0, 0, 0.18); 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 32015d2c5..3439f4892 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 @@ -33,9 +33,9 @@ } .live { - color: #ff8f8f; - background: rgba(255, 95, 95, 0.12); - border-color: rgba(255, 95, 95, 0.28); + color: var(--app-live-color); + background: color-mix(in srgb, var(--app-live-color) 14%, transparent); + border-color: color-mix(in srgb, var(--app-live-color) 32%, transparent); text-transform: uppercase; letter-spacing: 0.08em; } @@ -76,18 +76,17 @@ .description-icon { margin-inline-start: auto; - width: 30px; - height: 30px; + width: 32px; + height: 32px; display: inline-flex; align-items: center; justify-content: center; - border-radius: 9px; + border-radius: 10px; cursor: pointer; opacity: 0.7; transition: opacity 0.15s ease, - background-color 0.15s ease, - transform 0.15s ease; + background-color 0.15s ease; mat-icon { width: 18px; @@ -98,6 +97,5 @@ &:hover { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); - transform: translateY(-1px); } } 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 4ba1c56e9..4c23ddd3a 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 @@ -49,40 +49,48 @@ flex: 1; overflow-y: auto; overflow-x: hidden; - padding: 10px 10px 14px; + padding: 8px 8px 12px; display: flex; flex-direction: column; - gap: 6px; + gap: 4px; } .program-item { display: flex; flex-direction: column; - gap: 8px; - padding: 12px 14px; - border: 1px solid rgba(255, 255, 255, 0.06); - border-radius: 14px; - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)), - rgba(127, 127, 127, 0.045); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.04), - 0 10px 20px -20px rgba(0, 0, 0, 0.35); + gap: 6px; + padding: 10px 12px; + border: 1px solid transparent; + border-radius: 12px; + background: transparent; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.18s ease, - transform 0.18s ease; + color 0.15s ease; cursor: default; + &.current-program { + background: color-mix( + in srgb, + var(--app-selection-color) 6%, + transparent + ); + } + &.clickable { cursor: pointer; &:hover { - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)), - rgba(127, 127, 127, 0.065); - transform: translateY(-1px); + background: color-mix(in srgb, currentColor 6%, transparent); + } + + &.current-program:hover { + background: color-mix( + in srgb, + var(--app-selection-color) 10%, + transparent + ); } } @@ -112,8 +120,8 @@ .program-title { font-size: 0.94rem; line-height: 1.4; - font-weight: 560; - letter-spacing: 0.005em; + font-weight: 600; + text-wrap: balance; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; @@ -124,7 +132,8 @@ .epg-item__description { font-size: 0.82rem; line-height: 1.4; - opacity: 0.74; + color: var(--app-muted-color); + text-wrap: pretty; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; @@ -172,9 +181,9 @@ .epg-not-available { margin: auto 10px; padding: 22px; - border: 1px dashed rgba(255, 255, 255, 0.12); - border-radius: 14px; + border: 1px dashed var(--app-separator); + border-radius: 12px; text-align: center; font-size: 0.88rem; - opacity: 0.66; + color: var(--app-muted-color); }