mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-12 20:16:15 -08:00
4grayandClaude Opus 4.7
a27a29fcf2
Swap M3 primary palette from violet to azure so checkboxes, radio buttons, raised CTAs, and active states read as the same blue used by the rail selection token. Cascading template + SCSS updates align the remaining hand-rolled surfaces (Add Playlist dialog, VOD play button, radio player, multi-EPG, empty-state CTAs) with the unified system. LIVE stays red (broadcast role), cyan stays on EPG "now" indicator, green stays on completed-download — semantic colors keep their meaning; only the indiscriminate accent uses get folded into the blue primary. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
129 lines
2.9 KiB
SCSS
129 lines
2.9 KiB
SCSS
@mixin play-button-copy($meta-color: currentColor) {
|
|
&__copy {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
line-height: 1.1;
|
|
text-align: left;
|
|
}
|
|
|
|
&__label {
|
|
display: block;
|
|
min-width: 0;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
&__meta {
|
|
display: block;
|
|
max-width: min(42vw, 360px);
|
|
overflow: hidden;
|
|
color: $meta-color;
|
|
font-size: 0.78rem;
|
|
font-weight: 500;
|
|
line-height: 1.2;
|
|
opacity: 0.72;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
// Secondary detail-view actions (Favorite, Download). Per UX audit: only Play
|
|
// should read as the primary CTA, so these stay ghost/neutral. State accents
|
|
// (favorite=red destructive, download=green completed) keep their semantic
|
|
// meaning but ride on transparent fills so they never out-shout Play.
|
|
@mixin secondary-action-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 64px;
|
|
padding: 0 24px;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: var(--text-primary, #fff);
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
border-radius: 16px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
|
|
&:hover {
|
|
background: rgba(255, 255, 255, 0.14);
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
mat-icon {
|
|
font-size: 24px;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
|
|
@mixin favorite-button-state {
|
|
&--active {
|
|
background: rgba(255, 91, 110, 0.16);
|
|
border-color: rgba(255, 91, 110, 0.4);
|
|
color: #ff8f8f;
|
|
|
|
&:hover {
|
|
background: rgba(255, 91, 110, 0.24);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin download-button-state {
|
|
// Idle download stays neutral — extends secondary-action-button.
|
|
|
|
&--completed {
|
|
background: rgba(74, 222, 128, 0.16);
|
|
border-color: rgba(74, 222, 128, 0.4);
|
|
color: #4ade80;
|
|
|
|
&:hover {
|
|
background: rgba(74, 222, 128, 0.24);
|
|
}
|
|
}
|
|
|
|
&--downloading {
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border-color: rgba(255, 255, 255, 0.08);
|
|
cursor: not-allowed;
|
|
opacity: 0.6;
|
|
|
|
&:hover {
|
|
background: rgba(255, 255, 255, 0.04);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin mobile-action-buttons {
|
|
.play-btn,
|
|
.favorite-btn,
|
|
.download-btn {
|
|
flex: 1;
|
|
justify-content: center;
|
|
min-height: 58px;
|
|
padding: 10px 16px;
|
|
}
|
|
|
|
.play-btn__meta {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
@mixin projected-mobile-action-buttons {
|
|
::ng-deep .play-btn,
|
|
::ng-deep .favorite-btn,
|
|
::ng-deep .download-btn {
|
|
flex: 1;
|
|
justify-content: center;
|
|
min-height: 58px;
|
|
padding: 10px 16px;
|
|
}
|
|
|
|
::ng-deep .play-btn__meta {
|
|
max-width: 100%;
|
|
}
|
|
}
|