push
This commit is contained in:
4DBug
+138
-52
@@ -173,58 +173,6 @@ select.field {
|
||||
color: var(--color-accent-text);
|
||||
}
|
||||
|
||||
/* ---- toggle switch --------------------------------------------------------- */
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.switch__track {
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--color-surface-2);
|
||||
border: 1px solid var(--color-border-strong);
|
||||
transition: background 140ms ease, border-color 140ms ease;
|
||||
}
|
||||
|
||||
.switch__thumb {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--color-text-dim);
|
||||
transition: transform 140ms ease, background 140ms ease;
|
||||
}
|
||||
|
||||
.switch input:checked + .switch__track {
|
||||
background: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.switch input:checked + .switch__track .switch__thumb {
|
||||
transform: translateX(20px);
|
||||
background: var(--color-accent-text);
|
||||
}
|
||||
|
||||
.switch input:focus-visible + .switch__track {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ---- media cards (poster) --------------------------------------------------- */
|
||||
|
||||
.card {
|
||||
@@ -652,3 +600,141 @@ select.field {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* in-player source switcher (gear popup) */
|
||||
.player-sources {
|
||||
position: absolute;
|
||||
right: var(--space-3);
|
||||
bottom: calc(var(--space-4) + 64px);
|
||||
z-index: 7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: min(380px, calc(100% - var(--space-6)));
|
||||
max-height: calc(100% - 112px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(10, 10, 10, 0.94);
|
||||
backdrop-filter: blur(12px);
|
||||
box-shadow: var(--shadow-2);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.player-sources__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.player-sources__close {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
flex: 0 0 auto;
|
||||
border: none;
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transition: background 120ms ease;
|
||||
}
|
||||
|
||||
.player-sources__close:hover {
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
|
||||
.player-sources__close svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.player-sources__list {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
overflow-y: auto;
|
||||
padding: var(--space-2);
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--color-border-strong) transparent;
|
||||
}
|
||||
|
||||
.player-sources__group {
|
||||
padding: var(--space-2) var(--space-3) var(--space-1);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
.source-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
width: 100%;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.source-item:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.source-item--active {
|
||||
background: color-mix(in srgb, var(--color-accent) 20%, transparent);
|
||||
}
|
||||
|
||||
.source-item__rank {
|
||||
flex: 0 0 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
font-size: var(--text-xs);
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
.source-item--active .source-item__rank {
|
||||
background: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
color: var(--color-accent-text);
|
||||
}
|
||||
|
||||
.source-item__name {
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.source-item__meta {
|
||||
margin-left: auto;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: var(--text-xs);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.player-sources {
|
||||
left: var(--space-3);
|
||||
right: var(--space-3);
|
||||
bottom: calc(var(--space-3) + 64px);
|
||||
width: auto;
|
||||
max-height: calc(100% - 88px);
|
||||
}
|
||||
}
|
||||
|
||||
+16
-113
@@ -4,34 +4,6 @@
|
||||
page-level blocks and handles responsive behavior.
|
||||
*/
|
||||
|
||||
/* ---- home ------------------------------------------------------------------ */
|
||||
|
||||
.home-hero {
|
||||
margin: 0 0 var(--space-6);
|
||||
padding: var(--space-5);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
background:
|
||||
radial-gradient(80% 120% at 10% 0%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 60%),
|
||||
var(--color-surface);
|
||||
}
|
||||
|
||||
.home-hero h1 {
|
||||
font-size: var(--text-2xl);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.home-hero p {
|
||||
margin-top: var(--space-2);
|
||||
max-width: 56ch;
|
||||
color: var(--color-text-dim);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.home-hero .chips {
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
/* ---- search ------------------------------------------------------------------ */
|
||||
|
||||
.search-bar {
|
||||
@@ -183,7 +155,7 @@
|
||||
margin-bottom: var(--space-1);
|
||||
}
|
||||
|
||||
/* ---- watch: toolbar + sources ---------------------------------------------------- */
|
||||
/* ---- watch: toolbar (source popup lives in components.css with the player) ---------- */
|
||||
|
||||
.watch-toolbar {
|
||||
display: flex;
|
||||
@@ -204,78 +176,6 @@
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sources {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
margin-bottom: var(--space-6);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sources__head {
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.source-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
width: 100%;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.source-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.source-item:hover {
|
||||
background: var(--color-surface-hover);
|
||||
}
|
||||
|
||||
.source-item--active {
|
||||
background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
|
||||
}
|
||||
|
||||
.source-item__rank {
|
||||
flex: 0 0 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--color-surface-2);
|
||||
border: 1px solid var(--color-border);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--color-text-dim);
|
||||
}
|
||||
|
||||
.source-item--active .source-item__rank {
|
||||
background: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
color: var(--color-accent-text);
|
||||
}
|
||||
|
||||
.source-item__name {
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.source-item__meta {
|
||||
margin-left: auto;
|
||||
color: var(--color-text-faint);
|
||||
font-size: var(--text-xs);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.loading-cell {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
@@ -483,6 +383,7 @@
|
||||
|
||||
.provider-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
@@ -490,9 +391,8 @@
|
||||
.provider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface-2);
|
||||
@@ -504,14 +404,21 @@
|
||||
border-color: var(--color-border-strong);
|
||||
}
|
||||
|
||||
.provider input[type="checkbox"] {
|
||||
flex: 0 0 auto;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0;
|
||||
accent-color: var(--color-accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.provider__name {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.provider__note {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--color-text-faint);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ---- responsive ---------------------------------------------------------------- */
|
||||
@@ -536,10 +443,6 @@
|
||||
font-size: var(--text-2xl);
|
||||
}
|
||||
|
||||
.home-hero h1 {
|
||||
font-size: var(--text-xl);
|
||||
}
|
||||
|
||||
.search-bar__form {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
+4
-4
@@ -17,11 +17,11 @@
|
||||
--color-text: #f2f2f2; /* primary text */
|
||||
--color-text-dim: #9a9a9a; /* secondary text */
|
||||
--color-text-faint: #5c5c5c; /* tertiary text */
|
||||
--color-accent: #00e08b; /* brand / primary action color */
|
||||
--color-accent-hover: #33ecab;
|
||||
--color-accent-text: #04110a; /* text on accent buttons */
|
||||
--color-accent: #c084fc; /* brand / primary action color */
|
||||
--color-accent-hover: #d8b4fe;
|
||||
--color-accent-text: #12071f; /* text on accent buttons */
|
||||
--color-danger: #ff6b6b;
|
||||
--color-success: #00e08b;
|
||||
--color-success: #c084fc;
|
||||
--color-star: #ffc94d; /* rating stars */
|
||||
|
||||
/* ---- typography ------------------------------------------------------ */
|
||||
|
||||
Reference in New Issue
Block a user