x15904151985/iptvnator
1
0 Fork 0
mirror of https://github.com/4gray/iptvnator.git synced 2026-10-14 21:26:15 -08:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): restore detail surface boundaries in light theme

Browse Source
This commit is contained in:
4gray committed 2026-09-05 22:17:50 +02:00
1 parent 812ec69fd4
commit 3cdbb2bcff
9 files changed
+261 -32
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

libs/ui/components/src/lib/content-hero/content-hero.component.scss
+1 -3
View File
@@ -486,9 +486,7 @@
@include detail-actions.secondary-action-button;
}
// Theme-aware surface for the chip only: the shared mixin's white-alpha
// fill vanishes over a bright light-theme hero, and the chip now sits
// beside icon buttons that already wear the tag vars. The chip's own
// Match the chip to its neighbouring icon buttons' tag surfaces. Its own
// pressed state (.sources-chip--open) is more specific and still wins.
::ng-deep app-vod-sources-chip .sources-chip {
background: var(--tag-bg);
libs/ui/components/src/lib/season-container/season-container.component.scss
+9 -9
View File
@@ -84,12 +84,12 @@ app-season-tabs {
// Episode Card
.episode-card {
background: rgba(255, 255, 255, 0.03);
background: var(--app-widget-bg);
border-radius: 6px;
overflow: hidden;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid rgba(255, 255, 255, 0.05);
border: 1px solid color-mix(in srgb, var(--app-on-surface) 14%, transparent);
position: relative;
// In-progress state
@@ -203,8 +203,8 @@ app-season-tabs {
&:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.1);
background: var(--app-card-hover-bg);
border-color: color-mix(in srgb, var(--app-on-surface) 22%, transparent);
.episode-card__overlay {
opacity: 1;
@@ -469,15 +469,15 @@ app-season-tabs {
align-items: center;
gap: 16px;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.02);
background: color-mix(in srgb, var(--app-on-surface) 3%, transparent);
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
border: 1px solid transparent;
border: 1px solid color-mix(in srgb, var(--app-on-surface) 14%, transparent);
&:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.08);
background: var(--app-card-hover-bg);
border-color: color-mix(in srgb, var(--app-on-surface) 22%, transparent);
.episode-list-item__actions {
opacity: 1;
@@ -508,7 +508,7 @@ app-season-tabs {
justify-content: center;
min-width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.06);
background: var(--app-hover-overlay);
border-radius: 6px;
font-size: 0.875rem;
font-weight: 600;
libs/ui/components/src/lib/season-container/season-header.component.scss
+16 -6
View File
@@ -35,10 +35,15 @@
.view-toggle {
mat-button-toggle-group {
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid
color-mix(in srgb, var(--app-on-surface) 14%, transparent);
border-radius: 6px;
overflow: hidden;
background: rgba(255, 255, 255, 0.03);
background: color-mix(
in srgb,
var(--app-on-surface) 3%,
transparent
);
::ng-deep {
.mat-button-toggle {
@@ -57,15 +62,15 @@
}
&.mat-button-toggle-checked {
background: rgba(255, 255, 255, 0.1);
background: var(--app-selection-surface);
mat-icon {
color: var(--accent-color);
color: var(--app-selection-color);
}
}
&:hover:not(.mat-button-toggle-checked) {
background: rgba(255, 255, 255, 0.05);
background: var(--app-hover-overlay);
}
}
@@ -77,7 +82,12 @@
}
.mat-button-toggle + .mat-button-toggle {
border-left: 1px solid rgba(255, 255, 255, 0.1);
border-left: 1px solid
color-mix(
in srgb,
var(--app-on-surface) 14%,
transparent
);
}
}
}