18e9a4dce1
- "frontend/src/App.tsx" - "frontend/src/pages/WatchPage.tsx" - "frontend/src/App.css" GSD-Task: S03/T02
6613 lines
144 KiB
CSS
6613 lines
144 KiB
CSS
/* ── Theme tokens ──────────────────────────────────────────────────────────── */
|
||
|
||
:root {
|
||
/* Backgrounds */
|
||
--color-bg-page: #0f0f14;
|
||
--color-bg-surface: #1a1a24;
|
||
--color-bg-surface-hover: #22222e;
|
||
--color-bg-input: #1a1a24;
|
||
--color-bg-header: #0a0a12;
|
||
--color-bg-header-alt: #14141e;
|
||
--color-bg-transcript: #12121a;
|
||
|
||
/* Text */
|
||
--color-text-primary: #e2e2ea;
|
||
--color-text-secondary: #8b8b9a;
|
||
--color-text-muted: #828291;
|
||
--color-text-active: #e2e2ea;
|
||
--color-text-on-header: rgba(255, 255, 255, 0.8);
|
||
--color-text-on-header-hover: #fff;
|
||
--color-text-on-header-label: rgba(255, 255, 255, 0.9);
|
||
|
||
/* Borders */
|
||
--color-border: #2a2a38;
|
||
--color-border-active: #22d3ee;
|
||
|
||
/* Accent (cyan) */
|
||
--color-accent: #22d3ee;
|
||
--color-accent-hover: #67e8f9;
|
||
--color-accent-subtle: rgba(34, 211, 238, 0.1);
|
||
--color-accent-focus: rgba(34, 211, 238, 0.15);
|
||
|
||
/* Content-type pin colors */
|
||
--color-pin-technique: #22d3ee; /* cyan */
|
||
--color-pin-settings: #f59e0b; /* amber */
|
||
--color-pin-reasoning: #a855f7; /* purple */
|
||
--color-pin-workflow: #22c55e; /* green */
|
||
|
||
/* Shadows / overlays */
|
||
--color-shadow: rgba(0, 0, 0, 0.2);
|
||
--color-shadow-heavy: rgba(0, 0, 0, 0.4);
|
||
--color-overlay: rgba(0, 0, 0, 0.6);
|
||
|
||
/* Status badges */
|
||
--color-badge-pending-bg: #422006;
|
||
--color-badge-pending-text: #fcd34d;
|
||
--color-badge-approved-bg: #052e16;
|
||
--color-badge-approved-text: #6ee7b7;
|
||
--color-badge-edited-bg: #1e1b4b;
|
||
--color-badge-edited-text: #93c5fd;
|
||
--color-badge-rejected-bg: #450a0a;
|
||
--color-badge-rejected-text: #fca5a5;
|
||
|
||
/* Semantic buttons */
|
||
--color-btn-approve: #059669;
|
||
--color-btn-approve-hover: #047857;
|
||
--color-btn-reject: #dc2626;
|
||
--color-btn-reject-hover: #b91c1c;
|
||
|
||
/* Toggle colors */
|
||
--color-toggle-track: #6b7280;
|
||
--color-toggle-track-active: #059669;
|
||
--color-toggle-thumb: #fff;
|
||
|
||
/* Error */
|
||
--color-error: #f87171;
|
||
--color-error-bg: #450a0a;
|
||
--color-error-border: #7f1d1d;
|
||
|
||
/* Fallback / warning banners */
|
||
--color-banner-amber-bg: #422006;
|
||
--color-banner-amber-border: #854d0e;
|
||
--color-banner-amber-text: #fcd34d;
|
||
|
||
/* Pills / special badges */
|
||
--color-pill-bg: #22222e;
|
||
--color-pill-text: #e2e2ea;
|
||
--color-pill-plugin-bg: #3b1f06;
|
||
--color-pill-plugin-text: #f6ad55;
|
||
--color-badge-category-bg: #1e1b4b;
|
||
--color-badge-category-text: #93c5fd;
|
||
--color-badge-type-technique-bg: #1e1b4b;
|
||
--color-badge-type-technique-text: #93c5fd;
|
||
--color-badge-type-moment-bg: #422006;
|
||
--color-badge-type-moment-text: #fcd34d;
|
||
--color-badge-content-type-bg: #22222e;
|
||
--color-badge-content-type-text: #e2e2ea;
|
||
--color-badge-quality-structured-bg: #052e16;
|
||
--color-badge-quality-structured-text: #6ee7b7;
|
||
--color-badge-quality-unstructured-bg: #422006;
|
||
--color-badge-quality-unstructured-text: #fcd34d;
|
||
|
||
/* Per-category badge colors */
|
||
--color-badge-cat-sound-design-bg: #0d3b3b;
|
||
--color-badge-cat-sound-design-text: #5eead4;
|
||
--color-badge-cat-mixing-bg: #0f2942;
|
||
--color-badge-cat-mixing-text: #7dd3fc;
|
||
--color-badge-cat-synthesis-bg: #0c2461;
|
||
--color-badge-cat-synthesis-text: #93c5fd;
|
||
--color-badge-cat-arrangement-bg: #422006;
|
||
--color-badge-cat-arrangement-text: #fcd34d;
|
||
--color-badge-cat-workflow-bg: #052e16;
|
||
--color-badge-cat-workflow-text: #6ee7b7;
|
||
--color-badge-cat-mastering-bg: #4a1035;
|
||
--color-badge-cat-mastering-text: #f9a8d4;
|
||
--color-badge-cat-music-theory-bg: #3b2506;
|
||
--color-badge-cat-music-theory-text: #fdba74;
|
||
|
||
/* Genre pills */
|
||
--color-genre-pill-bg: #1a1a24;
|
||
--color-genre-pill-text: #e2e2ea;
|
||
--color-genre-pill-border: #2a2a38;
|
||
--color-genre-pill-hover-bg: #22222e;
|
||
--color-genre-pill-hover-border: #67e8f9;
|
||
--color-genre-pill-active-bg: #22d3ee;
|
||
--color-genre-pill-active-text: #0f0f14;
|
||
--color-genre-pill-active-border: #22d3ee;
|
||
--color-genre-pill-active-hover-bg: #67e8f9;
|
||
|
||
/* Sort toggle */
|
||
--color-sort-btn-bg: #1a1a24;
|
||
--color-sort-btn-text: #8b8b9a;
|
||
--color-sort-btn-border: #2a2a38;
|
||
--color-sort-btn-hover-bg: #22222e;
|
||
--color-sort-btn-hover-text: #e2e2ea;
|
||
--color-sort-btn-active-bg: #22d3ee;
|
||
--color-sort-btn-active-text: #0f0f14;
|
||
--color-sort-btn-active-hover-bg: #67e8f9;
|
||
|
||
/* Technique page creator link */
|
||
--color-link-accent: #22d3ee;
|
||
|
||
/* Search btn (dark variant) */
|
||
--color-btn-search-bg: #22d3ee;
|
||
--color-btn-search-text: #0f0f14;
|
||
--color-btn-search-hover-bg: #67e8f9;
|
||
|
||
/* Typeahead see-all link */
|
||
--color-typeahead-see-all: #22d3ee;
|
||
}
|
||
|
||
/* ── Base ─────────────────────────────────────────────────────────────────── */
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||
"Helvetica Neue", Arial, sans-serif;
|
||
line-height: 1.5;
|
||
color: var(--color-text-primary);
|
||
background: var(--color-bg-page);
|
||
}
|
||
|
||
/* ── Utility ──────────────────────────────────────────────────────────────── */
|
||
|
||
.sr-only {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
padding: 0;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
clip: rect(0, 0, 0, 0);
|
||
white-space: nowrap;
|
||
border: 0;
|
||
}
|
||
|
||
/* ── App shell ────────────────────────────────────────────────────────────── */
|
||
|
||
.app {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* ── Skip-to-content link ─────────────────────────────────────────────────── */
|
||
|
||
.skip-link {
|
||
position: absolute;
|
||
left: -9999px;
|
||
top: 0;
|
||
z-index: 999;
|
||
padding: 0.5rem 1rem;
|
||
background: var(--color-accent);
|
||
color: var(--color-bg-page);
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
border-radius: 0 0 0.375rem 0;
|
||
}
|
||
|
||
.skip-link:focus {
|
||
left: 0;
|
||
}
|
||
|
||
.app-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0.75rem 1.5rem;
|
||
background: var(--color-bg-header);
|
||
color: var(--color-text-on-header-hover);
|
||
border-bottom: 2px solid var(--color-accent);
|
||
}
|
||
|
||
.app-header__brand span {
|
||
font-size: 1.125rem;
|
||
font-weight: 600;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
.app-header__right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.app-header nav a {
|
||
color: var(--color-text-on-header);
|
||
text-decoration: none;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.app-header nav a:hover {
|
||
color: var(--color-text-on-header-hover);
|
||
}
|
||
|
||
.app-main {
|
||
flex: 1;
|
||
width: 100%;
|
||
max-width: 72rem;
|
||
margin: 1.5rem auto;
|
||
padding: 0 1.5rem;
|
||
box-sizing: border-box;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
/* ── App footer ───────────────────────────────────────────────────────────── */
|
||
|
||
.app-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.5rem;
|
||
padding: 1rem 1.5rem;
|
||
font-size: 0.6875rem;
|
||
color: var(--color-text-muted);
|
||
border-top: 1px solid var(--color-border);
|
||
}
|
||
|
||
.app-footer__sep {
|
||
opacity: 0.4;
|
||
}
|
||
|
||
.app-footer__commit,
|
||
.app-footer__repo {
|
||
color: var(--color-text-muted);
|
||
text-decoration: none;
|
||
transition: color 0.15s;
|
||
}
|
||
|
||
a.app-footer__commit:hover,
|
||
a.app-footer__repo:hover {
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
/* ── Queue header ─────────────────────────────────────────────────────────── */
|
||
|
||
|
||
/* ── Stats bar ────────────────────────────────────────────────────────────── */
|
||
|
||
.stats-bar {
|
||
display: flex;
|
||
gap: 0.75rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
|
||
/* ── Filter tabs ──────────────────────────────────────────────────────────── */
|
||
|
||
.filter-tabs {
|
||
display: flex;
|
||
gap: 0;
|
||
border-bottom: 2px solid var(--color-border);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.filter-tab {
|
||
padding: 0.5rem 1rem;
|
||
border: none;
|
||
background: none;
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
color: var(--color-text-secondary);
|
||
cursor: pointer;
|
||
border-bottom: 2px solid transparent;
|
||
margin-bottom: -2px;
|
||
transition: color 0.15s, border-color 0.15s;
|
||
}
|
||
|
||
.filter-tab:hover {
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
.filter-tab--active {
|
||
color: var(--color-text-active);
|
||
border-bottom-color: var(--color-border-active);
|
||
}
|
||
|
||
/* ── Cards ────────────────────────────────────────────────────────────────── */
|
||
|
||
.card {
|
||
background: var(--color-bg-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 0.5rem;
|
||
padding: 1.25rem;
|
||
margin-bottom: 1rem;
|
||
box-shadow: 0 1px 3px var(--color-shadow);
|
||
}
|
||
|
||
.card h2 {
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.card p {
|
||
font-size: 0.875rem;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
/* ── Queue cards ──────────────────────────────────────────────────────────── */
|
||
|
||
|
||
.queue-card {
|
||
display: block;
|
||
background: var(--color-bg-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 0.5rem;
|
||
padding: 1rem 1.25rem;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
box-shadow: 0 1px 3px var(--color-shadow);
|
||
transition: border-color 0.15s, box-shadow 0.15s;
|
||
}
|
||
|
||
.queue-card:hover {
|
||
border-color: var(--color-accent-hover);
|
||
box-shadow: 0 2px 8px var(--color-accent-subtle);
|
||
}
|
||
|
||
.queue-card__header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 0.375rem;
|
||
}
|
||
|
||
.queue-card__title {
|
||
font-size: 0.9375rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.queue-card__summary {
|
||
font-size: 0.8125rem;
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: 0.375rem;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.queue-card__meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.375rem;
|
||
font-size: 0.75rem;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.queue-card__separator {
|
||
color: var(--color-border);
|
||
}
|
||
|
||
/* ── Status badges ────────────────────────────────────────────────────────── */
|
||
|
||
.badge {
|
||
display: inline-block;
|
||
padding: 0.125rem 0.5rem;
|
||
border-radius: 9999px;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
text-transform: capitalize;
|
||
}
|
||
|
||
.badge--pending {
|
||
background: var(--color-badge-pending-bg);
|
||
color: var(--color-badge-pending-text);
|
||
}
|
||
|
||
.badge--approved {
|
||
background: var(--color-badge-approved-bg);
|
||
color: var(--color-badge-approved-text);
|
||
}
|
||
|
||
.badge--edited {
|
||
background: var(--color-badge-edited-bg);
|
||
color: var(--color-badge-edited-text);
|
||
}
|
||
|
||
.badge--rejected {
|
||
background: var(--color-badge-rejected-bg);
|
||
color: var(--color-badge-rejected-text);
|
||
}
|
||
|
||
/* ── Buttons ──────────────────────────────────────────────────────────────── */
|
||
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.375rem;
|
||
padding: 0.5rem 1rem;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 0.375rem;
|
||
font-size: 0.8125rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
background: var(--color-bg-surface);
|
||
color: var(--color-text-primary);
|
||
transition: background 0.15s, border-color 0.15s, opacity 0.15s;
|
||
}
|
||
|
||
.btn:hover {
|
||
background: var(--color-bg-surface-hover);
|
||
border-color: var(--color-text-muted);
|
||
}
|
||
|
||
.btn:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.btn--approve {
|
||
background: var(--color-btn-approve);
|
||
color: var(--color-text-on-header-hover);
|
||
border-color: var(--color-btn-approve);
|
||
}
|
||
|
||
.btn--approve:hover {
|
||
background: var(--color-btn-approve-hover);
|
||
}
|
||
|
||
.btn--reject {
|
||
background: var(--color-btn-reject);
|
||
color: var(--color-text-on-header-hover);
|
||
border-color: var(--color-btn-reject);
|
||
}
|
||
|
||
.btn--reject:hover {
|
||
background: var(--color-btn-reject-hover);
|
||
}
|
||
|
||
/* ── Mode toggle ──────────────────────────────────────────────────────────── */
|
||
|
||
/* ── Debug Mode Toggle ────────────────────────────────────────────────────── */
|
||
|
||
.debug-toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
.debug-toggle__label {
|
||
color: var(--color-text-on-header-label);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.debug-toggle__switch {
|
||
position: relative;
|
||
width: 2.5rem;
|
||
height: 1.25rem;
|
||
background: var(--color-toggle-track);
|
||
border: none;
|
||
border-radius: 9999px;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.debug-toggle__switch--active {
|
||
background: #10b981;
|
||
}
|
||
|
||
.debug-toggle__switch::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0.125rem;
|
||
left: 0.125rem;
|
||
width: 1rem;
|
||
height: 1rem;
|
||
background: var(--color-toggle-thumb);
|
||
border-radius: 50%;
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.debug-toggle__switch--active::after {
|
||
transform: translateX(1.25rem);
|
||
}
|
||
|
||
.debug-toggle__switch:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* ── Pagination ───────────────────────────────────────────────────────────── */
|
||
|
||
|
||
/* ── Detail page ──────────────────────────────────────────────────────────── */
|
||
|
||
.back-link {
|
||
display: inline-block;
|
||
font-size: 0.875rem;
|
||
color: var(--color-text-secondary);
|
||
text-decoration: none;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.back-link:hover {
|
||
color: #c084fc;
|
||
}
|
||
|
||
|
||
/* ── Action bar ───────────────────────────────────────────────────────────── */
|
||
|
||
|
||
/* ── Edit form ────────────────────────────────────────────────────────────── */
|
||
|
||
.edit-form {
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.edit-form h3 {
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
|
||
/* ── Dialogs (modal overlays) ─────────────────────────────────────────────── */
|
||
|
||
|
||
/* ── Loading / empty states ───────────────────────────────────────────────── */
|
||
|
||
.loading {
|
||
text-align: center;
|
||
padding: 3rem 1rem;
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: 3rem 1rem;
|
||
color: var(--color-text-muted);
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
/* ── Partial match fallback ─────────────────────────────────────────── */
|
||
|
||
.partial-match-banner {
|
||
text-align: center;
|
||
padding: 1rem;
|
||
margin-bottom: 1rem;
|
||
color: var(--color-text-muted);
|
||
font-size: 0.875rem;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-md, 8px);
|
||
background: var(--color-surface-raised, var(--color-surface));
|
||
}
|
||
|
||
.partial-match-results__header {
|
||
font-size: 0.8125rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
color: var(--color-text-muted);
|
||
margin-bottom: 0.75rem;
|
||
padding-bottom: 0.5rem;
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
.partial-match-results .search-result-card {
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.error-text {
|
||
color: var(--color-error);
|
||
}
|
||
|
||
/* ── Hamburger button ─────────────────────────────────────────────────────── */
|
||
|
||
.hamburger-btn {
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 44px;
|
||
height: 44px;
|
||
padding: 0;
|
||
border: none;
|
||
background: none;
|
||
color: var(--color-text-on-header);
|
||
cursor: pointer;
|
||
-webkit-tap-highlight-color: transparent;
|
||
transition: color 0.15s;
|
||
}
|
||
|
||
.hamburger-btn:hover {
|
||
color: var(--color-text-on-header-hover);
|
||
}
|
||
|
||
/* ── Mobile nav search inside hamburger menu ──────────────────────────────── */
|
||
|
||
.mobile-nav-search {
|
||
display: none;
|
||
}
|
||
|
||
/* ── Mobile breakpoint (768px) ────────────────────────────────────────────── */
|
||
|
||
@media (max-width: 768px) {
|
||
.hamburger-btn {
|
||
display: flex;
|
||
}
|
||
|
||
.app-header {
|
||
flex-wrap: wrap;
|
||
position: relative;
|
||
}
|
||
|
||
/* Hide the nav search bar in header on mobile — it goes inside the menu */
|
||
.app-header > .search-container--nav {
|
||
display: none;
|
||
}
|
||
|
||
.app-header__right {
|
||
/* Keep the hamburger button visible; nav collapses */
|
||
order: 0;
|
||
}
|
||
|
||
.app-nav {
|
||
display: none;
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
right: 0;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
background: var(--color-bg-header);
|
||
border-top: 1px solid var(--color-border);
|
||
box-shadow: 0 8px 24px var(--color-shadow-heavy);
|
||
z-index: 200;
|
||
overflow: hidden;
|
||
max-height: 0;
|
||
opacity: 0;
|
||
transition: max-height 0.25s ease, opacity 0.2s ease;
|
||
}
|
||
|
||
.app-nav--open {
|
||
display: flex;
|
||
max-height: 24rem;
|
||
opacity: 1;
|
||
}
|
||
|
||
.app-nav a,
|
||
.app-nav .admin-dropdown__trigger {
|
||
min-height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0.75rem 1.5rem;
|
||
font-size: 1rem;
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
.app-nav .admin-dropdown {
|
||
width: 100%;
|
||
}
|
||
|
||
.app-nav .admin-dropdown__trigger {
|
||
width: 100%;
|
||
text-align: left;
|
||
}
|
||
|
||
.app-nav .admin-dropdown__menu {
|
||
position: static;
|
||
box-shadow: none;
|
||
border: none;
|
||
border-radius: 0;
|
||
background: var(--color-bg-header-alt);
|
||
}
|
||
|
||
.app-nav .admin-dropdown__item {
|
||
padding-left: 2.5rem;
|
||
min-height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.mobile-nav-search {
|
||
display: block;
|
||
padding: 0.75rem 1.5rem;
|
||
border-top: 1px solid var(--color-border);
|
||
}
|
||
|
||
.mobile-nav-search .search-container--nav {
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
|
||
/* ── Responsive ───────────────────────────────────────────────────────────── */
|
||
|
||
@media (max-width: 640px) {
|
||
.stats-bar {
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
|
||
.app-header {
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.app-header__right {
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
}
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════════
|
||
PUBLIC PAGES
|
||
══════════════════════════════════════════════════════════════════════════════ */
|
||
|
||
/* ── Header brand link ────────────────────────────────────────────────────── */
|
||
|
||
.app-header__brand {
|
||
text-decoration: none;
|
||
color: inherit;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.app-header__logo {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
width: 24px;
|
||
height: 24px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.app-header__logo svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.app-nav {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.app-nav a {
|
||
color: var(--color-text-on-header);
|
||
text-decoration: none;
|
||
font-size: 0.875rem;
|
||
transition: color 0.15s;
|
||
}
|
||
|
||
.app-nav a:hover {
|
||
color: var(--color-text-on-header-hover);
|
||
}
|
||
|
||
/* ── Auth nav ─────────────────────────────────────────────────────────────── */
|
||
|
||
.auth-nav__user {
|
||
color: var(--color-accent);
|
||
text-decoration: none;
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
transition: color 0.15s;
|
||
}
|
||
|
||
.auth-nav__user:hover {
|
||
color: var(--color-accent-hover);
|
||
}
|
||
|
||
.auth-nav__logout {
|
||
font-family: inherit;
|
||
font-size: 0.8125rem;
|
||
color: var(--color-text-secondary);
|
||
background: none;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 6px;
|
||
padding: 0.25rem 0.625rem;
|
||
cursor: pointer;
|
||
transition: color 0.15s, border-color 0.15s;
|
||
}
|
||
|
||
.auth-nav__logout:hover {
|
||
color: var(--color-text-primary);
|
||
border-color: var(--color-text-secondary);
|
||
}
|
||
|
||
.auth-nav__login {
|
||
color: var(--color-text-on-header);
|
||
text-decoration: none;
|
||
font-size: 0.875rem;
|
||
transition: color 0.15s;
|
||
}
|
||
|
||
.auth-nav__login:hover {
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
/* ── Admin dropdown ───────────────────────────────────────────────────────── */
|
||
|
||
.admin-dropdown {
|
||
position: relative;
|
||
}
|
||
|
||
.admin-dropdown__trigger {
|
||
font-family: inherit;
|
||
font-size: 0.875rem;
|
||
color: var(--color-text-on-header);
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
padding: 0;
|
||
transition: color 0.15s;
|
||
}
|
||
|
||
.admin-dropdown__trigger:hover {
|
||
color: var(--color-text-on-header-hover);
|
||
}
|
||
|
||
.admin-dropdown__menu {
|
||
position: absolute;
|
||
top: calc(100% + 0.5rem);
|
||
right: 0;
|
||
min-width: 10rem;
|
||
background: var(--color-bg-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 0.5rem;
|
||
box-shadow: 0 4px 16px var(--color-shadow-heavy);
|
||
z-index: 100;
|
||
padding: 0.375rem 0;
|
||
}
|
||
|
||
/* Bridge the gap between trigger and menu so hover doesn't break */
|
||
.admin-dropdown__menu::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -0.5rem;
|
||
right: 0;
|
||
width: 100%;
|
||
height: 0.5rem;
|
||
}
|
||
|
||
.admin-dropdown__item {
|
||
display: block;
|
||
padding: 0.5rem 1rem;
|
||
color: var(--color-text-primary);
|
||
text-decoration: none;
|
||
font-size: 0.875rem;
|
||
transition: background 0.12s;
|
||
}
|
||
|
||
.admin-dropdown__item:hover {
|
||
background: var(--color-bg-surface-hover);
|
||
}
|
||
|
||
/* ── Section Heading Utility ───────────────────────────────────────────────── */
|
||
|
||
.section-heading {
|
||
font-size: 0.8125rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
color: var(--color-text-muted);
|
||
margin: 0 0 0.75rem;
|
||
}
|
||
|
||
.section-heading--accent {
|
||
color: #c084fc;
|
||
}
|
||
|
||
/* ── Home / Hero ──────────────────────────────────────────────────────────── */
|
||
|
||
.home-hero {
|
||
text-align: center;
|
||
padding: 1.5rem 1rem 1.5rem;
|
||
}
|
||
|
||
.home-hero__title {
|
||
font-size: 2.25rem;
|
||
font-weight: 800;
|
||
letter-spacing: -0.02em;
|
||
margin-bottom: 0.375rem;
|
||
}
|
||
|
||
.home-hero__subtitle {
|
||
font-size: 1rem;
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.home-hero__value-prop {
|
||
max-width: 32rem;
|
||
margin: 1rem auto 0;
|
||
font-size: 1.0625rem;
|
||
line-height: 1.6;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
/* ── How It Works ─────────────────────────────────────────────────────────── */
|
||
|
||
.home-how-it-works {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 0.75rem;
|
||
max-width: 42rem;
|
||
margin: 1.25rem auto 0;
|
||
}
|
||
|
||
.home-how-it-works__step {
|
||
padding: 1.25rem 1rem;
|
||
background: var(--color-bg-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 0.625rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.home-how-it-works__number {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 2rem;
|
||
height: 2rem;
|
||
border-radius: 50%;
|
||
background: var(--color-accent);
|
||
color: var(--color-bg-page);
|
||
font-weight: 700;
|
||
font-size: 0.875rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.home-how-it-works__title {
|
||
font-size: 0.9375rem;
|
||
font-weight: 600;
|
||
margin-bottom: 0.375rem;
|
||
}
|
||
|
||
.home-how-it-works__desc {
|
||
font-size: 0.8125rem;
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* ── CTA Button ───────────────────────────────────────────────────────────── */
|
||
|
||
.home-cta {
|
||
display: inline-block;
|
||
margin-top: 2rem;
|
||
padding: 0.75rem 2rem;
|
||
background: var(--color-accent);
|
||
color: var(--color-bg-page);
|
||
font-weight: 700;
|
||
font-size: 1rem;
|
||
border-radius: 0.5rem;
|
||
text-decoration: none;
|
||
transition: background 0.15s, transform 0.15s;
|
||
}
|
||
|
||
.home-cta:hover {
|
||
background: var(--color-accent-hover);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* ── Popular topics quick-links ───────────────────────────────────────────── */
|
||
|
||
.home-popular-topics {
|
||
margin-top: 2.5rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.home-popular-topics__title {
|
||
/* inherits .section-heading — section-specific overrides only */
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.home-popular-topics__list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 0.5rem;
|
||
max-width: 42rem;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.pill--topic-quick {
|
||
display: inline-block;
|
||
padding: 0.375rem 0.875rem;
|
||
border-radius: 9999px;
|
||
font-size: 0.8125rem;
|
||
font-weight: 500;
|
||
background: var(--color-pill-bg);
|
||
color: var(--color-pill-text);
|
||
border: 1px solid var(--color-border);
|
||
text-decoration: none;
|
||
transition: border-color 0.15s, background 0.15s, color 0.15s;
|
||
}
|
||
|
||
.pill--topic-quick:hover {
|
||
border-color: var(--color-accent);
|
||
background: var(--color-accent-subtle);
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
/* ── Search form ──────────────────────────────────────────────────────────── */
|
||
|
||
.search-container {
|
||
position: relative;
|
||
max-width: 36rem;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.search-form {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.search-form--hero {
|
||
justify-content: center;
|
||
}
|
||
|
||
.search-form--inline {
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
padding: 0.625rem 1rem;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 0.5rem;
|
||
font-size: 0.9375rem;
|
||
font-family: inherit;
|
||
color: var(--color-text-primary);
|
||
background: var(--color-bg-input);
|
||
transition: border-color 0.15s, box-shadow 0.15s;
|
||
}
|
||
|
||
.search-input:focus {
|
||
outline: none;
|
||
border-color: var(--color-accent);
|
||
box-shadow: 0 0 0 3px var(--color-accent-focus);
|
||
}
|
||
|
||
.search-input--hero {
|
||
padding: 0.75rem 1.25rem;
|
||
font-size: 1.0625rem;
|
||
border-radius: 0.625rem;
|
||
}
|
||
|
||
/* ── Nav search variant ───────────────────────────────────────────────────── */
|
||
|
||
.search-container--nav {
|
||
position: relative;
|
||
max-width: 16rem;
|
||
margin: 0;
|
||
}
|
||
|
||
.search-form--nav {
|
||
gap: 0;
|
||
position: relative;
|
||
}
|
||
|
||
.search-input--nav {
|
||
padding: 0.375rem 2.75rem 0.375rem 0.75rem;
|
||
font-size: 0.8125rem;
|
||
border-radius: 0.375rem;
|
||
background: var(--color-bg-input);
|
||
border-color: var(--color-border);
|
||
}
|
||
|
||
.search-input--nav::placeholder {
|
||
color: var(--color-text-muted);
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.search-nav__shortcut {
|
||
position: absolute;
|
||
right: 0.5rem;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
font-size: 0.625rem;
|
||
font-family: inherit;
|
||
color: var(--color-text-muted);
|
||
background: var(--color-bg-page);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 0.25rem;
|
||
padding: 0.0625rem 0.3125rem;
|
||
line-height: 1.4;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.search-container--nav .typeahead-dropdown {
|
||
z-index: 200;
|
||
min-width: 20rem;
|
||
}
|
||
|
||
.btn--search {
|
||
background: var(--color-btn-search-bg);
|
||
color: var(--color-btn-search-text);
|
||
border-color: var(--color-btn-search-bg);
|
||
border-radius: 0.5rem;
|
||
padding: 0.625rem 1.25rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.btn--search:hover {
|
||
background: var(--color-btn-search-hover-bg);
|
||
}
|
||
|
||
/* ── Typeahead dropdown ───────────────────────────────────────────────────── */
|
||
|
||
.typeahead-dropdown {
|
||
position: absolute;
|
||
top: calc(100% + 0.25rem);
|
||
left: 0;
|
||
right: 0;
|
||
background: var(--color-bg-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 0.5rem;
|
||
box-shadow: 0 8px 24px var(--color-shadow-heavy);
|
||
z-index: 50;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.typeahead-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0.625rem 1rem;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
transition: background 0.1s;
|
||
}
|
||
|
||
.typeahead-item:hover {
|
||
background: var(--color-bg-surface-hover);
|
||
}
|
||
|
||
.typeahead-item__title {
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.typeahead-item__meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
font-size: 0.75rem;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.typeahead-item__type {
|
||
padding: 0.0625rem 0.375rem;
|
||
border-radius: 0.25rem;
|
||
font-size: 0.6875rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
.typeahead-item__type--technique_page {
|
||
background: var(--color-badge-type-technique-bg);
|
||
color: var(--color-badge-type-technique-text);
|
||
}
|
||
|
||
.typeahead-item__type--key_moment {
|
||
background: var(--color-badge-type-moment-bg);
|
||
color: var(--color-badge-type-moment-text);
|
||
}
|
||
|
||
.typeahead-see-all {
|
||
display: block;
|
||
padding: 0.5rem 1rem;
|
||
text-align: center;
|
||
font-size: 0.8125rem;
|
||
color: var(--color-typeahead-see-all);
|
||
text-decoration: none;
|
||
border-top: 1px solid var(--color-border);
|
||
transition: background 0.1s;
|
||
}
|
||
|
||
.typeahead-see-all:hover {
|
||
background: var(--color-bg-surface-hover);
|
||
}
|
||
|
||
/* Popular suggestions (shown on empty focus) */
|
||
.typeahead-suggestions-header {
|
||
padding: 0.5rem 1rem 0.25rem;
|
||
font-size: 0.6875rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.typeahead-suggestion {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 0.75rem;
|
||
width: 100%;
|
||
padding: 0.5rem 1rem;
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
text-align: left;
|
||
font-size: 0.875rem;
|
||
color: var(--color-text);
|
||
transition: background 0.1s;
|
||
}
|
||
|
||
.typeahead-suggestion:hover {
|
||
background: var(--color-bg-surface-hover);
|
||
}
|
||
|
||
.typeahead-suggestion__text {
|
||
flex: 1;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.typeahead-item__type--technique {
|
||
background: var(--color-badge-technique-bg, rgba(34, 211, 238, 0.15));
|
||
color: var(--color-badge-technique-text, #22d3ee);
|
||
}
|
||
|
||
.typeahead-item__type--topic {
|
||
background: var(--color-badge-topic-bg, rgba(168, 85, 247, 0.15));
|
||
color: var(--color-badge-topic-text, #a855f7);
|
||
}
|
||
|
||
.typeahead-item__type--creator {
|
||
background: var(--color-badge-creator-bg, rgba(251, 146, 60, 0.15));
|
||
color: var(--color-badge-creator-text, #fb923c);
|
||
}
|
||
|
||
/* ── Navigation cards ─────────────────────────────────────────────────────── */
|
||
|
||
.nav-cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 1rem;
|
||
max-width: 42rem;
|
||
margin: 0 auto 2rem;
|
||
}
|
||
|
||
.nav-card {
|
||
display: block;
|
||
padding: 1.5rem;
|
||
background: var(--color-bg-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 0.625rem;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
box-shadow: 0 1px 3px var(--color-shadow);
|
||
transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
|
||
}
|
||
|
||
.nav-card:hover {
|
||
border-color: var(--color-accent-hover);
|
||
box-shadow: 0 4px 12px var(--color-accent-subtle);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.nav-card__title {
|
||
font-size: 1.0625rem;
|
||
font-weight: 700;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.nav-card__desc {
|
||
font-size: 0.8125rem;
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* ── Stats scorecard ──────────────────────────────────────────────────── */
|
||
|
||
.home-stats {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 2.5rem;
|
||
max-width: 42rem;
|
||
margin: 0 auto 2rem;
|
||
padding: 1rem 1.5rem;
|
||
background: var(--color-bg-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 0.625rem;
|
||
}
|
||
|
||
.home-stats__metric {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.125rem;
|
||
}
|
||
|
||
.home-stats__number {
|
||
font-size: 1.75rem;
|
||
font-weight: 700;
|
||
color: var(--color-accent);
|
||
font-variant-numeric: tabular-nums;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.home-stats__label {
|
||
font-size: 0.75rem;
|
||
color: var(--color-text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
/* ── Recently Added section ───────────────────────────────────────────────── */
|
||
|
||
/* ── Featured technique spotlight ──────────────────────────────────────── */
|
||
|
||
.home-featured {
|
||
max-width: 42rem;
|
||
margin: 0 auto 2rem;
|
||
padding: 1.25rem 1.5rem;
|
||
background: var(--color-bg-surface);
|
||
border: 1px solid transparent;
|
||
border-image: linear-gradient(135deg, #22d3ee, #a855f7) 1;
|
||
text-align: left;
|
||
position: relative;
|
||
}
|
||
|
||
.home-featured__label {
|
||
/* inherits .section-heading + .section-heading--accent — section-specific overrides only */
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.home-featured__title {
|
||
display: block;
|
||
font-size: 1.25rem;
|
||
font-weight: 700;
|
||
color: var(--color-text);
|
||
text-decoration: none;
|
||
margin-bottom: 0.5rem;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.home-featured__title:hover {
|
||
color: var(--color-accent-hover);
|
||
}
|
||
|
||
.home-featured__summary {
|
||
font-size: 0.875rem;
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.5;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.home-featured__meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.home-featured__moments {
|
||
font-size: 0.75rem;
|
||
color: var(--color-text-tertiary);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.home-featured__creator {
|
||
display: block;
|
||
font-size: 0.8125rem;
|
||
color: var(--color-text-secondary);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.home-featured__creator:hover {
|
||
color: var(--color-accent-hover);
|
||
}
|
||
|
||
/* ── Recently added ───────────────────────────────────────────────────── */
|
||
|
||
.recent-section {
|
||
max-width: 42rem;
|
||
margin: 0 auto 2rem;
|
||
}
|
||
|
||
.recent-section__title {
|
||
/* inherits .section-heading — no section-specific overrides */
|
||
}
|
||
|
||
.recent-list {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.recent-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.25rem;
|
||
padding: 0.875rem 1rem;
|
||
background: var(--color-bg-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 0.5rem;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
transition: border-color 0.15s, box-shadow 0.15s;
|
||
}
|
||
|
||
.recent-card:hover {
|
||
border-color: var(--color-accent-hover);
|
||
box-shadow: 0 2px 8px var(--color-accent-subtle);
|
||
}
|
||
|
||
.recent-card__title {
|
||
font-size: 0.9375rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.recent-card__meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
flex-wrap: wrap;
|
||
flex: 1;
|
||
}
|
||
|
||
.recent-card__summary {
|
||
font-size: 0.8125rem;
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.recent-card__moments {
|
||
font-size: 0.75rem;
|
||
color: var(--color-text-tertiary);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.pill--tag {
|
||
font-size: 0.625rem;
|
||
padding: 0 0.375rem;
|
||
}
|
||
|
||
/* ── Search results page ──────────────────────────────────────────────────── */
|
||
|
||
.search-results-page {
|
||
max-width: 64rem;
|
||
}
|
||
|
||
.search-group {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.search-group__title {
|
||
font-size: 1rem;
|
||
font-weight: 700;
|
||
margin-bottom: 0.5rem;
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
.search-group__list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.search-result-card {
|
||
display: block;
|
||
padding: 1rem 1.25rem;
|
||
background: var(--color-bg-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 0.5rem;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
box-shadow: 0 1px 3px var(--color-shadow);
|
||
transition: border-color 0.15s, box-shadow 0.15s;
|
||
}
|
||
|
||
.search-result-card:hover {
|
||
border-color: var(--color-accent-hover);
|
||
box-shadow: 0 2px 8px var(--color-accent-subtle);
|
||
}
|
||
|
||
.search-result-card__header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.search-result-card__title {
|
||
font-size: 0.9375rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.search-result-card__summary {
|
||
font-size: 0.8125rem;
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.4;
|
||
margin-bottom: 0.375rem;
|
||
}
|
||
|
||
.search-result-card__match-context {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.375rem;
|
||
font-size: 0.75rem;
|
||
color: var(--color-accent);
|
||
margin-bottom: 0.375rem;
|
||
padding: 0.25rem 0.5rem;
|
||
background: rgba(0, 255, 255, 0.06);
|
||
border-radius: 4px;
|
||
border-left: 2px solid var(--color-accent);
|
||
}
|
||
|
||
.match-context__icon {
|
||
flex-shrink: 0;
|
||
font-size: 0.625rem;
|
||
}
|
||
|
||
.match-context__text {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.search-result-card__meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.375rem;
|
||
font-size: 0.75rem;
|
||
color: var(--color-text-muted);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.search-result-card__tags {
|
||
display: inline-flex;
|
||
gap: 0.25rem;
|
||
margin-left: 0.25rem;
|
||
}
|
||
|
||
/* ── Pills / tags ─────────────────────────────────────────────────────────── */
|
||
|
||
.pill {
|
||
display: inline-block;
|
||
padding: 0.0625rem 0.5rem;
|
||
border-radius: 9999px;
|
||
font-size: 0.6875rem;
|
||
font-weight: 500;
|
||
background: var(--color-pill-bg);
|
||
color: var(--color-pill-text);
|
||
}
|
||
|
||
.pill--plugin {
|
||
background: var(--color-pill-plugin-bg);
|
||
color: var(--color-pill-plugin-text);
|
||
}
|
||
|
||
.pill--overflow {
|
||
background: var(--color-surface-2);
|
||
color: var(--color-text-secondary);
|
||
font-style: italic;
|
||
}
|
||
|
||
.pill--coming-soon {
|
||
font-size: 0.65rem;
|
||
background: var(--color-surface-2);
|
||
color: var(--color-text-secondary);
|
||
font-style: italic;
|
||
}
|
||
|
||
|
||
.badge--category {
|
||
background: var(--color-badge-category-bg);
|
||
color: var(--color-badge-category-text);
|
||
}
|
||
|
||
.badge--cat-sound-design { background: var(--color-badge-cat-sound-design-bg); color: var(--color-badge-cat-sound-design-text); }
|
||
.badge--cat-mixing { background: var(--color-badge-cat-mixing-bg); color: var(--color-badge-cat-mixing-text); }
|
||
.badge--cat-synthesis { background: var(--color-badge-cat-synthesis-bg); color: var(--color-badge-cat-synthesis-text); }
|
||
.badge--cat-arrangement { background: var(--color-badge-cat-arrangement-bg); color: var(--color-badge-cat-arrangement-text); }
|
||
.badge--cat-workflow { background: var(--color-badge-cat-workflow-bg); color: var(--color-badge-cat-workflow-text); }
|
||
.badge--cat-mastering { background: var(--color-badge-cat-mastering-bg); color: var(--color-badge-cat-mastering-text); }
|
||
.badge--cat-music-theory { background: var(--color-badge-cat-music-theory-bg); color: var(--color-badge-cat-music-theory-text); }
|
||
|
||
.badge--type {
|
||
font-size: 0.6875rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
.badge--type-technique_page {
|
||
background: var(--color-badge-type-technique-bg);
|
||
color: var(--color-badge-type-technique-text);
|
||
}
|
||
|
||
.badge--type-key_moment {
|
||
background: var(--color-badge-type-moment-bg);
|
||
color: var(--color-badge-type-moment-text);
|
||
}
|
||
|
||
.badge--content-type {
|
||
background: var(--color-badge-content-type-bg);
|
||
color: var(--color-badge-content-type-text);
|
||
font-size: 0.6875rem;
|
||
}
|
||
|
||
.badge--quality {
|
||
font-size: 0.6875rem;
|
||
text-transform: capitalize;
|
||
}
|
||
|
||
.badge--quality-structured {
|
||
background: var(--color-badge-quality-structured-bg);
|
||
color: var(--color-badge-quality-structured-text);
|
||
}
|
||
|
||
.badge--quality-unstructured {
|
||
background: var(--color-badge-quality-unstructured-bg);
|
||
color: var(--color-badge-quality-unstructured-text);
|
||
}
|
||
|
||
/* ── Technique page ───────────────────────────────────────────────────────── */
|
||
|
||
.technique-page {
|
||
max-width: 64rem;
|
||
width: 100%;
|
||
overflow-wrap: break-word;
|
||
word-wrap: break-word;
|
||
}
|
||
|
||
.technique-columns {
|
||
display: grid;
|
||
grid-template-columns: 1fr 16rem;
|
||
gap: 1.5rem;
|
||
align-items: start;
|
||
}
|
||
|
||
.technique-columns__main {
|
||
min-width: 0; /* prevent grid blowout */
|
||
overflow-wrap: break-word;
|
||
word-wrap: break-word;
|
||
}
|
||
|
||
.technique-columns__sidebar {
|
||
position: sticky;
|
||
top: 3.5rem; /* below sticky title bar */
|
||
max-height: calc(100vh - 4rem);
|
||
overflow-y: auto;
|
||
margin-left: auto; /* right-align within column */
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.technique-columns {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.technique-columns__sidebar {
|
||
display: none; /* ToC hidden on mobile — single-column reading */
|
||
}
|
||
}
|
||
|
||
.technique-404 {
|
||
text-align: center;
|
||
padding: 3rem 1rem;
|
||
}
|
||
|
||
.technique-404 h2 {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.technique-404 p {
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.technique-banner {
|
||
padding: 0.625rem 1rem;
|
||
border-radius: 0.375rem;
|
||
font-size: 0.8125rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.technique-banner--amber {
|
||
background: var(--color-banner-amber-bg);
|
||
border: 1px solid var(--color-banner-amber-border);
|
||
color: var(--color-banner-amber-text);
|
||
}
|
||
|
||
|
||
.technique-header__title-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 1rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.technique-header__title-row .badge--category {
|
||
flex-shrink: 0;
|
||
margin-top: 0.35rem;
|
||
}
|
||
|
||
.technique-header__title {
|
||
font-size: 1.75rem;
|
||
font-weight: 800;
|
||
letter-spacing: -0.02em;
|
||
margin-bottom: 0;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.technique-header__meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.technique-header__tags {
|
||
display: inline-flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.25rem;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.technique-header__creator-genres {
|
||
display: inline-flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.25rem;
|
||
}
|
||
|
||
.technique-header__creator-block {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.technique-header__creator-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.35rem;
|
||
font-size: 1.125rem;
|
||
font-weight: 600;
|
||
color: var(--color-link-accent);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.technique-header__creator-link:hover {
|
||
text-decoration: underline;
|
||
color: var(--color-accent-hover);
|
||
}
|
||
|
||
.pill--genre-small {
|
||
font-size: 0.625rem;
|
||
padding: 0.0625rem 0.375rem;
|
||
background: var(--color-pill-bg);
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.technique-header__stats {
|
||
font-size: 0.8125rem;
|
||
color: var(--color-text-secondary);
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
/* ── Technique prose / sections ───────────────────────────────────────────── */
|
||
|
||
.technique-main__tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.25rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.technique-summary {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.technique-summary p {
|
||
font-size: 1rem;
|
||
color: var(--color-text-primary);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* ── Inline player (collapsible) ─────────────────────────────────────────── */
|
||
|
||
.technique-player {
|
||
margin-bottom: 1.5rem;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
background: var(--color-surface-raised, var(--color-bg-primary));
|
||
}
|
||
|
||
.technique-player__toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
width: 100%;
|
||
padding: 0.625rem 0.875rem;
|
||
border: none;
|
||
background: transparent;
|
||
color: var(--color-text-primary);
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
text-align: left;
|
||
transition: background 0.15s;
|
||
}
|
||
|
||
.technique-player__toggle:hover {
|
||
background: var(--color-surface-hover, rgba(255, 255, 255, 0.05));
|
||
}
|
||
|
||
.technique-player__toggle-icon {
|
||
font-size: 0.7rem;
|
||
opacity: 0.7;
|
||
width: 1em;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.technique-player__collapse {
|
||
display: grid;
|
||
grid-template-rows: 0fr;
|
||
transition: grid-template-rows 0.3s ease;
|
||
}
|
||
|
||
.technique-player__collapse--open {
|
||
grid-template-rows: 1fr;
|
||
}
|
||
|
||
.technique-player__inner {
|
||
overflow: hidden;
|
||
min-height: 0;
|
||
}
|
||
|
||
.technique-player__video-select {
|
||
display: block;
|
||
margin: 0 0.875rem 0.5rem;
|
||
padding: 0.35rem 0.5rem;
|
||
border-radius: 4px;
|
||
border: 1px solid var(--color-border);
|
||
background: var(--color-bg-primary);
|
||
color: var(--color-text-primary);
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.technique-player__video {
|
||
max-height: 400px;
|
||
width: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.technique-player__video .video-player {
|
||
max-height: 400px;
|
||
}
|
||
|
||
.technique-player__video .video-player__video {
|
||
max-height: 400px;
|
||
width: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
/* Seek button in bibliography */
|
||
.technique-source__time--seek {
|
||
border: none;
|
||
background: none;
|
||
padding: 0;
|
||
font: inherit;
|
||
cursor: pointer;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.technique-player__video {
|
||
max-height: 260px;
|
||
}
|
||
.technique-player__video .video-player,
|
||
.technique-player__video .video-player__video {
|
||
max-height: 260px;
|
||
}
|
||
}
|
||
|
||
.technique-prose {
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.technique-prose__section {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.technique-prose__section h2 {
|
||
font-size: 1.25rem;
|
||
font-weight: 700;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.technique-prose__section p {
|
||
font-size: 0.9375rem;
|
||
color: var(--color-text-primary);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.technique-prose__json {
|
||
background: var(--color-bg-transcript);
|
||
padding: 0.75rem;
|
||
border-radius: 0.375rem;
|
||
font-size: 0.8125rem;
|
||
overflow-x: auto;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* ── Sticky Reading Header ────────────────────────────────────────────────── */
|
||
|
||
/* ── Sticky title bar (within article content area) ───────────────────── */
|
||
|
||
.technique-title-bar {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 50;
|
||
background: var(--color-bg-page);
|
||
border-bottom: 1px solid var(--color-border);
|
||
padding: 0.75rem 0;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.technique-title-bar__inner {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 1rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.technique-title-bar__title {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: var(--color-text-primary);
|
||
margin: 0;
|
||
line-height: 1.3;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.625rem;
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.technique-title-bar__back {
|
||
color: var(--color-text-secondary);
|
||
text-decoration: none;
|
||
font-size: 1.125rem;
|
||
flex-shrink: 0;
|
||
transition: color 150ms ease;
|
||
}
|
||
|
||
.technique-title-bar__back:hover {
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
.technique-title-bar__meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.technique-title-bar__creator {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.375rem;
|
||
font-size: 0.8125rem;
|
||
color: var(--color-text-secondary);
|
||
text-decoration: none;
|
||
transition: color 150ms ease;
|
||
}
|
||
|
||
.technique-title-bar__creator:hover {
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.technique-title-bar__title {
|
||
font-size: 1.25rem;
|
||
}
|
||
.technique-title-bar__inner {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 0.375rem;
|
||
}
|
||
}
|
||
|
||
/* ── Table of Contents ────────────────────────────────────────────────────── */
|
||
|
||
.technique-toc {
|
||
border-left: 2px solid var(--color-accent);
|
||
padding: 0 0 0 1rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.technique-toc__title {
|
||
font-size: 0.8125rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.technique-toc__list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.technique-toc__item {
|
||
margin-bottom: 0.125rem;
|
||
}
|
||
|
||
.technique-toc__link {
|
||
display: block;
|
||
color: var(--color-text-secondary);
|
||
text-decoration: none;
|
||
font-size: 0.875rem;
|
||
line-height: 1.6;
|
||
padding: 0.125rem 0.5rem;
|
||
border-radius: 0.25rem;
|
||
transition: background 150ms ease, color 150ms ease;
|
||
}
|
||
|
||
.technique-toc__link:hover {
|
||
background: var(--color-accent-subtle);
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
.technique-toc__sublist {
|
||
list-style: none;
|
||
padding-left: 1rem;
|
||
margin: 0.125rem 0 0.25rem;
|
||
}
|
||
|
||
.technique-toc__subitem {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.technique-toc__sublink {
|
||
display: block;
|
||
color: var(--color-text-muted);
|
||
text-decoration: none;
|
||
font-size: 0.8125rem;
|
||
line-height: 1.6;
|
||
padding: 0.125rem 0.5rem;
|
||
border-radius: 0.25rem;
|
||
transition: background 150ms ease, color 150ms ease;
|
||
}
|
||
|
||
.technique-toc__sublink:hover {
|
||
background: var(--color-accent-subtle);
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
/* Active section highlighting (IntersectionObserver) */
|
||
.technique-toc__link--active {
|
||
color: var(--color-accent);
|
||
font-weight: 500;
|
||
background: var(--color-accent-focus);
|
||
}
|
||
|
||
.technique-toc__sublink--active {
|
||
color: var(--color-accent);
|
||
font-weight: 500;
|
||
background: var(--color-accent-focus);
|
||
}
|
||
|
||
/* ── V2 subsections ───────────────────────────────────────────────────────── */
|
||
|
||
.technique-prose__subsection {
|
||
margin-left: 0.75rem;
|
||
margin-bottom: 1rem;
|
||
padding-left: 0.75rem;
|
||
border-left: 2px solid var(--color-border);
|
||
}
|
||
|
||
.technique-prose__subsection h3 {
|
||
font-size: 1.0625rem;
|
||
font-weight: 600;
|
||
margin-bottom: 0.375rem;
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
.technique-prose__subsection p {
|
||
font-size: 0.9375rem;
|
||
color: var(--color-text-primary);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/* ── Citation links ───────────────────────────────────────────────────────── */
|
||
|
||
.citation-group {
|
||
font-size: 0.75em;
|
||
line-height: 1;
|
||
vertical-align: super;
|
||
}
|
||
|
||
.citation-link {
|
||
color: var(--color-accent);
|
||
text-decoration: none;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.citation-link:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* ── Scroll margin for section anchors ────────────────────────────────────── */
|
||
|
||
.technique-prose__section[id],
|
||
.technique-prose__subsection[id] {
|
||
scroll-margin-top: 5rem;
|
||
}
|
||
|
||
/* ── Key Moments — bibliography/sources style ─────────────────────────── */
|
||
|
||
.technique-sources {
|
||
margin-top: 2.5rem;
|
||
margin-bottom: 2rem;
|
||
padding-top: 1.5rem;
|
||
border-top: 1px solid var(--color-border);
|
||
}
|
||
|
||
.technique-sources h2 {
|
||
font-size: 1.125rem;
|
||
font-weight: 700;
|
||
margin-bottom: 1rem;
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
.technique-sources__list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.125rem;
|
||
}
|
||
|
||
.technique-source {
|
||
display: flex;
|
||
gap: 0.625rem;
|
||
padding: 0.5rem 0;
|
||
align-items: flex-start;
|
||
font-size: 0.8125rem;
|
||
line-height: 1.5;
|
||
border-bottom: 1px solid var(--color-border-subtle, rgba(255,255,255,0.04));
|
||
}
|
||
|
||
.technique-source:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.technique-source__index {
|
||
color: var(--color-accent);
|
||
font-weight: 600;
|
||
font-size: 0.75rem;
|
||
flex-shrink: 0;
|
||
min-width: 1.5rem;
|
||
font-variant-numeric: tabular-nums;
|
||
padding-top: 0.0625rem;
|
||
}
|
||
|
||
.technique-source__body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.125rem;
|
||
min-width: 0;
|
||
}
|
||
|
||
.technique-source__title {
|
||
font-weight: 600;
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
.technique-source__detail {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
flex-wrap: wrap;
|
||
color: var(--color-text-muted);
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.technique-source__file {
|
||
font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
|
||
max-width: 24rem;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.technique-source__time {
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.technique-source__type {
|
||
color: var(--color-accent);
|
||
font-size: 0.6875rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.03em;
|
||
}
|
||
|
||
.technique-source__summary {
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.8125rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* ── Signal chains ────────────────────────────────────────────────────────── */
|
||
|
||
.technique-chains {
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.technique-chains h2 {
|
||
font-size: 1.25rem;
|
||
font-weight: 700;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.technique-chain {
|
||
margin-bottom: 1rem;
|
||
padding: 1rem;
|
||
background: var(--color-bg-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 0.5rem;
|
||
}
|
||
|
||
.technique-chain h3 {
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.technique-chain__flow {
|
||
font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
|
||
font-size: 0.875rem;
|
||
line-height: 1.8;
|
||
color: var(--color-text-primary);
|
||
background: var(--color-bg-transcript);
|
||
padding: 0.75rem 1rem;
|
||
border-radius: 0.375rem;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
}
|
||
|
||
.technique-chain__arrow {
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
.technique-chain__step {
|
||
display: inline;
|
||
}
|
||
|
||
/* ── Plugins ──────────────────────────────────────────────────────────────── */
|
||
|
||
|
||
/* ── Related techniques ───────────────────────────────────────────────────── */
|
||
|
||
.technique-related {
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.technique-related h2 {
|
||
font-size: 1.25rem;
|
||
font-weight: 700;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.technique-related__grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.technique-related__grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════════
|
||
CREATORS BROWSE
|
||
══════════════════════════════════════════════════════════════════════════════ */
|
||
|
||
.creators-browse {
|
||
max-width: 56rem;
|
||
}
|
||
|
||
.creators-browse__title {
|
||
font-size: 1.75rem;
|
||
font-weight: 800;
|
||
letter-spacing: -0.02em;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.creators-browse__subtitle {
|
||
font-size: 0.9375rem;
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
/* ── Controls row ─────────────────────────────────────────────────────────── */
|
||
|
||
.creators-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
margin-bottom: 1rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.sort-toggle {
|
||
display: inline-flex;
|
||
border: 1px solid var(--color-sort-btn-border);
|
||
border-radius: 0.375rem;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.sort-toggle__btn {
|
||
padding: 0.375rem 0.75rem;
|
||
border: none;
|
||
background: var(--color-sort-btn-bg);
|
||
font-size: 0.8125rem;
|
||
font-weight: 500;
|
||
color: var(--color-sort-btn-text);
|
||
cursor: pointer;
|
||
transition: background 0.15s, color 0.15s;
|
||
}
|
||
|
||
.sort-toggle__btn + .sort-toggle__btn {
|
||
border-left: 1px solid var(--color-sort-btn-border);
|
||
}
|
||
|
||
.sort-toggle__btn:hover {
|
||
background: var(--color-sort-btn-hover-bg);
|
||
color: var(--color-sort-btn-hover-text);
|
||
}
|
||
|
||
.sort-toggle__btn--active {
|
||
background: var(--color-sort-btn-active-bg);
|
||
color: var(--color-sort-btn-active-text);
|
||
}
|
||
|
||
.sort-toggle__btn--active:hover {
|
||
background: var(--color-sort-btn-active-hover-bg);
|
||
}
|
||
|
||
.creators-filter-input {
|
||
flex: 1;
|
||
min-width: 12rem;
|
||
padding: 0.5rem 0.75rem;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 0.375rem;
|
||
font-size: 0.875rem;
|
||
font-family: inherit;
|
||
color: var(--color-text-primary);
|
||
background: var(--color-bg-input);
|
||
transition: border-color 0.15s, box-shadow 0.15s;
|
||
}
|
||
|
||
.creators-filter-input:focus {
|
||
outline: none;
|
||
border-color: var(--color-accent);
|
||
box-shadow: 0 0 0 2px var(--color-accent-focus);
|
||
}
|
||
|
||
/* ── Genre pills ──────────────────────────────────────────────────────────── */
|
||
|
||
.genre-pills {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.375rem;
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
.genre-pill {
|
||
display: inline-block;
|
||
padding: 0.25rem 0.75rem;
|
||
border: 1px solid var(--color-genre-pill-border);
|
||
border-radius: 9999px;
|
||
font-size: 0.75rem;
|
||
font-weight: 500;
|
||
background: var(--color-genre-pill-bg);
|
||
color: var(--color-genre-pill-text);
|
||
cursor: pointer;
|
||
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
||
}
|
||
|
||
.genre-pill:hover {
|
||
border-color: var(--color-genre-pill-hover-border);
|
||
background: var(--color-genre-pill-hover-bg);
|
||
}
|
||
|
||
.genre-pill--active {
|
||
background: var(--color-genre-pill-active-bg);
|
||
color: var(--color-genre-pill-active-text);
|
||
border-color: var(--color-genre-pill-active-border);
|
||
}
|
||
|
||
.genre-pill--active:hover {
|
||
background: var(--color-genre-pill-active-hover-bg);
|
||
}
|
||
|
||
/* ── Creator list ─────────────────────────────────────────────────────────── */
|
||
|
||
.creators-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.creator-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
padding: 0.875rem 1.25rem;
|
||
background: var(--color-bg-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 0.5rem;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
box-shadow: 0 1px 3px var(--color-shadow);
|
||
transition: border-color 0.15s, box-shadow 0.15s;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.creator-row:hover {
|
||
border-color: var(--color-accent-hover);
|
||
box-shadow: 0 2px 8px var(--color-accent-subtle);
|
||
}
|
||
|
||
.creator-row__name {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
font-size: 0.9375rem;
|
||
font-weight: 600;
|
||
min-width: 10rem;
|
||
}
|
||
|
||
.creator-row__genres {
|
||
display: inline-flex;
|
||
gap: 0.25rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.creator-row__stats {
|
||
margin-left: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.375rem;
|
||
font-size: 0.75rem;
|
||
color: var(--color-text-secondary);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.creator-row__stat {
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.creator-row__separator {
|
||
color: var(--color-border);
|
||
}
|
||
|
||
.creator-row__updated {
|
||
color: var(--color-text-secondary);
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════════
|
||
CREATOR DETAIL
|
||
══════════════════════════════════════════════════════════════════════════════ */
|
||
|
||
.creator-detail {
|
||
max-width: 64rem;
|
||
}
|
||
|
||
/* Creator Hero */
|
||
.creator-hero {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 1.5rem;
|
||
margin-bottom: 1.5rem;
|
||
padding-bottom: 1.5rem;
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
.creator-hero__info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
min-width: 0;
|
||
}
|
||
|
||
.creator-hero__name {
|
||
font-size: 2rem;
|
||
font-weight: 800;
|
||
letter-spacing: -0.02em;
|
||
line-height: 1.2;
|
||
margin: 0;
|
||
}
|
||
|
||
.creator-hero__bio {
|
||
color: var(--color-text-secondary);
|
||
font-size: 1rem;
|
||
line-height: 1.6;
|
||
max-width: 48rem;
|
||
margin: 0;
|
||
}
|
||
|
||
.creator-hero__genres {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.375rem;
|
||
}
|
||
|
||
.creator-hero__socials {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
margin: 0.5rem 0;
|
||
}
|
||
|
||
.creator-hero__social-link {
|
||
color: var(--color-text-muted);
|
||
transition: color 0.15s ease;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.creator-hero__social-link:hover {
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
.creator-hero__social-link svg {
|
||
width: 1.25rem;
|
||
height: 1.25rem;
|
||
}
|
||
|
||
/* Creator Hero — Edit Mode */
|
||
.creator-hero__name-row {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.creator-hero__follow-btn {
|
||
background: transparent;
|
||
border: 1px solid var(--color-accent);
|
||
color: var(--color-accent);
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
padding: 0.3rem 0.85rem;
|
||
border-radius: 20px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
white-space: nowrap;
|
||
}
|
||
.creator-hero__follow-btn:hover {
|
||
background: var(--color-accent);
|
||
color: var(--color-bg-page);
|
||
}
|
||
.creator-hero__follow-btn--following {
|
||
background: var(--color-accent-subtle);
|
||
border-color: var(--color-accent);
|
||
color: var(--color-accent);
|
||
}
|
||
.creator-hero__follow-btn--following:hover {
|
||
background: var(--color-error-bg);
|
||
border-color: var(--color-error);
|
||
color: var(--color-error);
|
||
}
|
||
.creator-hero__follow-btn:disabled {
|
||
opacity: 0.5;
|
||
cursor: default;
|
||
}
|
||
|
||
.creator-hero__edit-btn {
|
||
background: none;
|
||
border: 1px solid var(--color-border);
|
||
color: var(--color-text-muted);
|
||
font-size: 0.75rem;
|
||
padding: 0.25rem 0.5rem;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: color 0.15s ease, border-color 0.15s ease;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.creator-hero__edit-btn:hover {
|
||
color: var(--color-accent);
|
||
border-color: var(--color-accent);
|
||
}
|
||
|
||
.creator-edit-form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
max-width: 36rem;
|
||
}
|
||
|
||
.creator-edit-form__label {
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--color-text-muted);
|
||
margin-bottom: -0.375rem;
|
||
}
|
||
|
||
.creator-edit-form__bio {
|
||
width: 100%;
|
||
min-height: 5rem;
|
||
padding: 0.5rem 0.75rem;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 6px;
|
||
background: var(--color-surface);
|
||
color: var(--color-text);
|
||
font-family: inherit;
|
||
font-size: 0.9375rem;
|
||
line-height: 1.6;
|
||
resize: vertical;
|
||
}
|
||
|
||
.creator-edit-form__bio:focus {
|
||
outline: none;
|
||
border-color: var(--color-accent);
|
||
box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb, 99, 102, 241), 0.15);
|
||
}
|
||
|
||
.creator-edit-form__links {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.creator-edit-form__link-row {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.creator-edit-form__platform-select {
|
||
flex: 0 0 8rem;
|
||
padding: 0.375rem 0.5rem;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 4px;
|
||
background: var(--color-surface);
|
||
color: var(--color-text);
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.creator-edit-form__url-input {
|
||
flex: 1;
|
||
min-width: 0;
|
||
padding: 0.375rem 0.5rem;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 4px;
|
||
background: var(--color-surface);
|
||
color: var(--color-text);
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.creator-edit-form__url-input:focus,
|
||
.creator-edit-form__platform-select:focus {
|
||
outline: none;
|
||
border-color: var(--color-accent);
|
||
}
|
||
|
||
.creator-edit-form__remove-btn {
|
||
background: none;
|
||
border: none;
|
||
color: var(--color-text-muted);
|
||
cursor: pointer;
|
||
font-size: 1rem;
|
||
padding: 0.25rem;
|
||
line-height: 1;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.creator-edit-form__remove-btn:hover {
|
||
color: var(--color-danger, #ef4444);
|
||
}
|
||
|
||
.creator-edit-form__add-btn {
|
||
align-self: flex-start;
|
||
background: none;
|
||
border: 1px dashed var(--color-border);
|
||
color: var(--color-text-muted);
|
||
font-size: 0.8125rem;
|
||
padding: 0.375rem 0.75rem;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.creator-edit-form__add-btn:hover {
|
||
border-color: var(--color-accent);
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
.creator-edit-form__error {
|
||
color: var(--color-danger, #ef4444);
|
||
font-size: 0.8125rem;
|
||
padding: 0.375rem 0;
|
||
}
|
||
|
||
.creator-edit-form__actions {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
margin-top: 0.25rem;
|
||
}
|
||
|
||
.creator-detail__stats-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.creator-detail__stats-sep {
|
||
color: var(--color-text-muted);
|
||
margin: 0 0.125rem;
|
||
}
|
||
|
||
.creator-detail__stats {
|
||
font-size: 0.875rem;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.creator-detail__topic-pills {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.375rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.creator-techniques {
|
||
margin-top: 1.5rem;
|
||
}
|
||
|
||
.creator-techniques__title {
|
||
font-size: 1.25rem;
|
||
font-weight: 700;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.creator-techniques__list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
|
||
/* ── Creator Featured Technique ─────────────────────────────────────── */
|
||
|
||
.creator-featured {
|
||
display: block;
|
||
max-width: 100%;
|
||
margin-bottom: 1.25rem;
|
||
padding: 1.25rem 1.5rem;
|
||
background: var(--color-bg-surface);
|
||
border: 1px solid transparent;
|
||
border-image: linear-gradient(135deg, #22d3ee, #a855f7) 1;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
position: relative;
|
||
}
|
||
|
||
.creator-featured__label {
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.creator-featured__title {
|
||
display: block;
|
||
font-size: 1.25rem;
|
||
font-weight: 700;
|
||
color: var(--color-text);
|
||
margin-bottom: 0.5rem;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.creator-featured:hover .creator-featured__title {
|
||
color: var(--color-accent-hover);
|
||
}
|
||
|
||
.creator-featured__summary {
|
||
font-size: 0.875rem;
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.5;
|
||
margin-bottom: 0.75rem;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.creator-featured__meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.creator-featured__moments {
|
||
font-size: 0.75rem;
|
||
color: var(--color-text-tertiary);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════════
|
||
TOPICS BROWSE — Card Grid Layout
|
||
══════════════════════════════════════════════════════════════════════════════ */
|
||
|
||
.topics-browse {
|
||
max-width: 64rem;
|
||
}
|
||
|
||
.topics-browse__title {
|
||
font-size: 1.75rem;
|
||
font-weight: 800;
|
||
letter-spacing: -0.02em;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.topics-browse__subtitle {
|
||
font-size: 0.9375rem;
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
.topics-filter-input {
|
||
width: 100%;
|
||
max-width: 24rem;
|
||
padding: 0.5rem 0.75rem;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 0.375rem;
|
||
font-size: 0.875rem;
|
||
font-family: inherit;
|
||
color: var(--color-text-primary);
|
||
background: var(--color-bg-input);
|
||
margin-bottom: 1.5rem;
|
||
transition: border-color 0.15s, box-shadow 0.15s;
|
||
}
|
||
|
||
.topics-filter-input:focus {
|
||
outline: none;
|
||
border-color: var(--color-accent);
|
||
box-shadow: 0 0 0 2px var(--color-accent-focus);
|
||
}
|
||
|
||
/* ── Card grid ────────────────────────────────────────────────────────────── */
|
||
|
||
.topics-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 1rem;
|
||
}
|
||
|
||
.topic-card {
|
||
background: var(--color-bg-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-left: 3px solid var(--color-border);
|
||
border-radius: 0.5rem;
|
||
overflow: hidden;
|
||
box-shadow: 0 1px 3px var(--color-shadow);
|
||
display: flex;
|
||
flex-direction: column;
|
||
transition: box-shadow 0.15s, transform 0.2s;
|
||
will-change: transform;
|
||
}
|
||
|
||
.topic-card:hover {
|
||
box-shadow: 0 4px 12px var(--color-shadow);
|
||
transform: scale(1.02);
|
||
}
|
||
|
||
.topic-card__body {
|
||
padding: 1rem 1.25rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.375rem;
|
||
}
|
||
|
||
.topic-card__name {
|
||
font-size: 1.0625rem;
|
||
font-weight: 700;
|
||
color: var(--color-text-primary);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
margin: 0;
|
||
}
|
||
|
||
.topic-card__glyph {
|
||
flex-shrink: 0;
|
||
line-height: 1;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.topic-card__desc {
|
||
font-size: 0.8125rem;
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.45;
|
||
margin: 0;
|
||
}
|
||
|
||
.topic-card__stats {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.375rem;
|
||
font-size: 0.75rem;
|
||
color: var(--color-text-muted);
|
||
font-variant-numeric: tabular-nums;
|
||
margin-top: 0.25rem;
|
||
}
|
||
|
||
.topic-card__stats-sep {
|
||
color: var(--color-border);
|
||
}
|
||
|
||
.topic-card__toggle {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.25rem;
|
||
margin-top: 0.375rem;
|
||
padding: 0.25rem 0;
|
||
border: none;
|
||
background: none;
|
||
font-family: inherit;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
color: var(--color-accent);
|
||
cursor: pointer;
|
||
transition: color 0.15s;
|
||
}
|
||
|
||
.topic-card__toggle:hover {
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
/* ── Sub-topics inside card ───────────────────────────────────────────────── */
|
||
|
||
.topic-subtopics-wrapper {
|
||
display: grid;
|
||
grid-template-rows: 0fr;
|
||
transition: grid-template-rows 300ms ease;
|
||
}
|
||
|
||
.topic-subtopics-wrapper[data-expanded="true"] {
|
||
grid-template-rows: 1fr;
|
||
}
|
||
|
||
.topic-subtopics {
|
||
overflow: hidden;
|
||
min-height: 0;
|
||
border-top: 1px solid var(--color-border);
|
||
}
|
||
|
||
.topic-subtopic {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0.5rem 1.25rem;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
font-size: 0.8125rem;
|
||
transition: background 0.1s;
|
||
}
|
||
|
||
.topic-subtopic:hover {
|
||
background: var(--color-bg-surface-hover);
|
||
}
|
||
|
||
.topic-subtopic--empty {
|
||
opacity: 0.5;
|
||
cursor: default;
|
||
}
|
||
|
||
.topic-subtopic--empty:hover {
|
||
background: transparent;
|
||
}
|
||
|
||
.topic-subtopic + .topic-subtopic {
|
||
border-top: 1px solid var(--color-bg-surface-hover);
|
||
}
|
||
|
||
.topic-subtopic__name {
|
||
font-weight: 500;
|
||
color: var(--color-text-primary);
|
||
text-transform: capitalize;
|
||
}
|
||
|
||
.topic-subtopic__counts {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.375rem;
|
||
font-size: 0.6875rem;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.topic-subtopic__count {
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.topic-subtopic__separator {
|
||
color: var(--color-border);
|
||
}
|
||
|
||
/* ── Breadcrumbs ──────────────────────────────────────────────────────────── */
|
||
|
||
.breadcrumbs {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
font-size: 0.875rem;
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.breadcrumbs__link {
|
||
color: var(--color-accent);
|
||
text-decoration: none;
|
||
transition: color 0.15s;
|
||
}
|
||
|
||
.breadcrumbs__link:hover {
|
||
color: var(--color-accent-hover);
|
||
}
|
||
|
||
.breadcrumbs__sep {
|
||
color: var(--color-border);
|
||
user-select: none;
|
||
}
|
||
|
||
.breadcrumbs__text {
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.breadcrumbs__current {
|
||
color: var(--color-text-primary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* ── Sub-topic page ──────────────────────────────────────────────────────── */
|
||
|
||
.subtopic-page {
|
||
max-width: 56rem;
|
||
margin: 0 auto;
|
||
padding: 1rem 0;
|
||
border-left: 4px solid transparent;
|
||
padding-left: 1.25rem;
|
||
}
|
||
|
||
.subtopic-page__title {
|
||
font-size: 1.75rem;
|
||
font-weight: 700;
|
||
color: var(--color-text-primary);
|
||
margin: 0 0 0.25rem;
|
||
}
|
||
|
||
.subtopic-page__subtitle {
|
||
font-size: 0.95rem;
|
||
color: var(--color-text-secondary);
|
||
margin: 0 0 2rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.subtopic-page__subtitle-sep {
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.subtopic-groups {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.subtopic-group__creator {
|
||
font-size: 1.15rem;
|
||
font-weight: 600;
|
||
color: var(--color-text-primary);
|
||
margin: 0 0 0.75rem;
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.subtopic-group__creator-link {
|
||
color: var(--color-accent);
|
||
text-decoration: none;
|
||
transition: color 0.15s;
|
||
}
|
||
|
||
.subtopic-group__creator-link:hover {
|
||
color: var(--color-accent-hover);
|
||
}
|
||
|
||
.subtopic-group__count {
|
||
font-size: 0.8rem;
|
||
font-weight: 400;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.subtopic-group__list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.subtopic-technique-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.25rem;
|
||
padding: 0.75rem 1rem;
|
||
background: var(--color-bg-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 0.5rem;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
transition: border-color 0.15s, box-shadow 0.15s;
|
||
}
|
||
|
||
.subtopic-technique-card:hover {
|
||
border-color: var(--color-accent);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.subtopic-technique-card__title {
|
||
font-weight: 600;
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
.subtopic-technique-card__tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.25rem;
|
||
}
|
||
|
||
.subtopic-technique-card__summary {
|
||
font-size: 0.875rem;
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* ── Public responsive (extended) ─────────────────────────────────────────── */
|
||
|
||
@media (max-width: 640px) {
|
||
.home-hero__title {
|
||
font-size: 1.75rem;
|
||
}
|
||
|
||
.home-how-it-works {
|
||
grid-template-columns: 1fr;
|
||
max-width: 20rem;
|
||
}
|
||
|
||
.home-cta {
|
||
width: 100%;
|
||
max-width: 20rem;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
text-align: center;
|
||
}
|
||
|
||
.nav-cards {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.recent-list {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.home-featured {
|
||
padding: 1rem 1.25rem;
|
||
}
|
||
|
||
.technique-header__title {
|
||
font-size: 1.375rem;
|
||
}
|
||
|
||
.search-form {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.search-input--hero {
|
||
width: 100%;
|
||
}
|
||
|
||
.app-nav {
|
||
gap: 0.75rem;
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
.creators-controls {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.creator-row {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 0.375rem;
|
||
}
|
||
|
||
.creator-row__stats {
|
||
margin-left: 0;
|
||
white-space: normal;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.creators-browse__title,
|
||
.topics-browse__title,
|
||
.creator-hero__name {
|
||
font-size: 1.375rem;
|
||
}
|
||
|
||
.creator-hero {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.creator-hero__genres {
|
||
justify-content: center;
|
||
}
|
||
|
||
.topics-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.topic-card__desc {
|
||
display: none;
|
||
}
|
||
|
||
.topic-subtopic {
|
||
padding-left: 1rem;
|
||
}
|
||
}
|
||
|
||
/* ── Mobile narrow (≤480px) — Creator detail page ─────────────────────── */
|
||
|
||
@media (max-width: 480px) {
|
||
/* Stats bar: smaller text, tighter spacing */
|
||
.creator-detail__stats-bar {
|
||
gap: 0.25rem 0.375rem;
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
.creator-detail__stats {
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.creator-detail__stats-sep {
|
||
margin: 0;
|
||
}
|
||
|
||
/* Topic pills: ensure wrap, smaller badges */
|
||
.creator-detail__topic-pills {
|
||
gap: 0.25rem;
|
||
}
|
||
|
||
.creator-detail__topic-pills .badge {
|
||
font-size: 0.6875rem;
|
||
padding: 0.125rem 0.375rem;
|
||
}
|
||
|
||
/* Hero: tighter on very narrow screens */
|
||
.creator-hero__name {
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
.creator-hero__bio {
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.creator-hero__socials {
|
||
gap: 0.375rem;
|
||
}
|
||
|
||
.creator-hero__genres {
|
||
gap: 0.25rem;
|
||
}
|
||
|
||
/* Featured card: reduce padding, contain text */
|
||
.creator-featured {
|
||
padding: 0.875rem 1rem;
|
||
}
|
||
|
||
.creator-featured__title {
|
||
font-size: 1.0625rem;
|
||
}
|
||
|
||
.creator-featured__summary {
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
/* Techniques header: wrap title + sort */
|
||
.creator-techniques__header {
|
||
flex-wrap: wrap;
|
||
gap: 0.375rem;
|
||
}
|
||
|
||
.creator-techniques__title {
|
||
font-size: 1.0625rem;
|
||
}
|
||
|
||
/* Technique cards: smaller padding */
|
||
|
||
|
||
/* Edit form: full width, stacked link rows */
|
||
.creator-edit-form {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.creator-edit-form__link-row {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.creator-edit-form__platform-select {
|
||
flex: 1 1 100%;
|
||
}
|
||
|
||
.creator-edit-form__url-input {
|
||
flex: 1 1 100%;
|
||
}
|
||
|
||
.creator-edit-form__actions {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.creator-edit-form__actions .btn {
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
/* ── Report Issue Modal ─────────────────────────────────────────────────── */
|
||
|
||
.modal-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: var(--color-overlay);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.modal-content {
|
||
background: var(--color-bg-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 12px;
|
||
padding: 1.5rem;
|
||
width: 90%;
|
||
max-width: 480px;
|
||
max-height: 90vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.modal-subtitle {
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.85rem;
|
||
margin: 0.25rem 0 1rem;
|
||
}
|
||
|
||
.modal-field {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.modal-field label {
|
||
display: block;
|
||
margin-bottom: 0.35rem;
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
.modal-field select,
|
||
.modal-field textarea {
|
||
width: 100%;
|
||
background: var(--color-bg);
|
||
color: var(--color-text-primary);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 6px;
|
||
padding: 0.5rem;
|
||
font-family: inherit;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.modal-field textarea {
|
||
resize: vertical;
|
||
min-height: 80px;
|
||
}
|
||
|
||
.modal-optional {
|
||
font-weight: 400;
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.modal-actions {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.report-modal__title {
|
||
margin: 0 0 0.75rem;
|
||
color: var(--color-text-primary);
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.report-modal__context {
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.85rem;
|
||
margin: 0 0 1rem;
|
||
}
|
||
|
||
.report-modal__context strong {
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
.report-modal__success {
|
||
color: var(--color-accent);
|
||
margin: 0.5rem 0 1.5rem;
|
||
}
|
||
|
||
.report-modal__label {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.35rem;
|
||
margin-bottom: 1rem;
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.report-modal__select {
|
||
background: var(--color-bg-input);
|
||
color: var(--color-text-primary);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 6px;
|
||
padding: 0.5rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.report-modal__textarea {
|
||
background: var(--color-bg-input);
|
||
color: var(--color-text-primary);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 6px;
|
||
padding: 0.5rem;
|
||
font-size: 0.9rem;
|
||
resize: vertical;
|
||
min-height: 80px;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.report-modal__textarea:focus,
|
||
.report-modal__select:focus {
|
||
outline: none;
|
||
border-color: var(--color-accent);
|
||
}
|
||
|
||
.report-modal__error {
|
||
color: var(--color-error);
|
||
font-size: 0.85rem;
|
||
margin: 0 0 0.75rem;
|
||
}
|
||
|
||
.report-modal__actions {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
|
||
/* ── Buttons ────────────────────────────────────────────────────────────── */
|
||
|
||
.btn--small {
|
||
padding: 0.3rem 0.7rem;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.btn--primary {
|
||
background: var(--color-accent);
|
||
color: var(--color-bg-page);
|
||
border-color: var(--color-accent);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.btn--primary:hover:not(:disabled) {
|
||
background: var(--color-accent-hover);
|
||
}
|
||
|
||
.btn--primary:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.btn--secondary {
|
||
background: var(--color-bg-input);
|
||
color: var(--color-text-primary);
|
||
border-color: var(--color-border);
|
||
}
|
||
|
||
.btn--secondary:hover:not(:disabled) {
|
||
background: var(--color-border);
|
||
}
|
||
|
||
.btn--danger {
|
||
background: var(--color-badge-rejected-bg);
|
||
color: var(--color-badge-rejected-text);
|
||
border-color: var(--color-badge-rejected-bg);
|
||
}
|
||
|
||
.btn--danger:hover:not(:disabled) {
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.btn--random {
|
||
background: var(--color-bg-input);
|
||
color: var(--color-text-primary);
|
||
border-color: var(--color-border);
|
||
font-size: 0.95rem;
|
||
padding: 0.6rem 1.4rem;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
transition: background 0.15s, border-color 0.15s, transform 0.15s;
|
||
}
|
||
|
||
.btn--random:hover:not(:disabled) {
|
||
background: var(--color-border);
|
||
transform: scale(1.04);
|
||
}
|
||
|
||
.btn--random:disabled {
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.home-random {
|
||
text-align: center;
|
||
margin: 1.5rem 0 2rem;
|
||
}
|
||
|
||
/* ── Trending Searches ──────────────────────────────────────────────────── */
|
||
|
||
.home-trending {
|
||
max-width: 42rem;
|
||
margin: 0 auto 2rem;
|
||
padding: 1rem 1.5rem;
|
||
background: var(--color-bg-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 0.625rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.home-trending__title {
|
||
/* inherits .section-heading — no section-specific overrides */
|
||
}
|
||
|
||
.home-trending__list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.pill--trending {
|
||
display: inline-block;
|
||
padding: 0.375rem 0.875rem;
|
||
border-radius: 9999px;
|
||
font-size: 0.8125rem;
|
||
font-weight: 500;
|
||
background: var(--color-pill-bg);
|
||
color: var(--color-pill-text);
|
||
border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
|
||
text-decoration: none;
|
||
transition: border-color 0.15s, background 0.15s, color 0.15s;
|
||
}
|
||
|
||
.pill--trending:hover {
|
||
border-color: var(--color-accent);
|
||
background: var(--color-accent-subtle);
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
/* ── Admin Reports ──────────────────────────────────────────────────────── */
|
||
|
||
.admin-reports {
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
padding: 2rem 1rem;
|
||
}
|
||
|
||
.admin-reports__title {
|
||
color: var(--color-text-primary);
|
||
margin: 0 0 0.25rem;
|
||
}
|
||
|
||
.admin-reports__subtitle {
|
||
color: var(--color-text-muted);
|
||
margin: 0 0 1.5rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.admin-reports__filters {
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
.admin-reports__list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.report-card {
|
||
background: var(--color-bg-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.report-card--open {
|
||
border-left: 3px solid var(--color-accent);
|
||
}
|
||
|
||
.report-card--acknowledged {
|
||
border-left: 3px solid var(--color-badge-pending-text);
|
||
}
|
||
|
||
.report-card--resolved {
|
||
border-left: 3px solid var(--color-badge-approved-text);
|
||
}
|
||
|
||
.report-card--dismissed {
|
||
border-left: 3px solid var(--color-text-muted);
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.report-card__header {
|
||
padding: 0.75rem 1rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.report-card__header:hover {
|
||
background: var(--color-bg-input);
|
||
}
|
||
|
||
.report-card__meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
margin-bottom: 0.35rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.report-card__date {
|
||
color: var(--color-text-muted);
|
||
font-size: 0.8rem;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.report-card__summary {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.15rem;
|
||
}
|
||
|
||
.report-card__content-title {
|
||
color: var(--color-text-primary);
|
||
font-weight: 500;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.report-card__description {
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.report-card__detail {
|
||
padding: 0.75rem 1rem 1rem;
|
||
border-top: 1px solid var(--color-border);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.report-card__full-description {
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.report-card__full-description strong {
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
.report-card__full-description p {
|
||
margin: 0.25rem 0 0;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
.report-card__url {
|
||
font-size: 0.8rem;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.report-card__url a {
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
.report-card__info-row {
|
||
display: flex;
|
||
gap: 1rem;
|
||
font-size: 0.8rem;
|
||
color: var(--color-text-muted);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.report-card__notes-label {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.25rem;
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.report-card__notes {
|
||
background: var(--color-bg-input);
|
||
color: var(--color-text-primary);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 6px;
|
||
padding: 0.5rem;
|
||
font-size: 0.85rem;
|
||
font-family: inherit;
|
||
resize: vertical;
|
||
}
|
||
|
||
.report-card__notes:focus {
|
||
outline: none;
|
||
border-color: var(--color-accent);
|
||
}
|
||
|
||
.report-card__actions {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* Status pill colors */
|
||
.pill--open {
|
||
background: var(--color-accent-subtle);
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
.pill--acknowledged {
|
||
background: var(--color-badge-pending-bg);
|
||
color: var(--color-badge-pending-text);
|
||
}
|
||
|
||
.pill--resolved {
|
||
background: var(--color-badge-approved-bg);
|
||
color: var(--color-badge-approved-text);
|
||
}
|
||
|
||
.pill--dismissed {
|
||
background: var(--color-bg-input);
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
/* ── Version Switcher ───────────────────────────────────────────────────── */
|
||
|
||
.technique-header__actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
margin-top: 0.5rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.version-switcher {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
}
|
||
|
||
.version-switcher__label {
|
||
color: var(--color-text-muted);
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.version-switcher__select {
|
||
background: var(--color-bg-input);
|
||
color: var(--color-text-primary);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 6px;
|
||
padding: 0.3rem 0.5rem;
|
||
font-size: 0.8rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.version-switcher__select:focus {
|
||
outline: none;
|
||
border-color: var(--color-accent);
|
||
}
|
||
|
||
.version-switcher__loading {
|
||
color: var(--color-text-muted);
|
||
font-size: 0.75rem;
|
||
font-style: italic;
|
||
}
|
||
|
||
.technique-banner--version {
|
||
background: var(--color-accent-subtle);
|
||
border: 1px solid var(--color-accent);
|
||
border-radius: 8px;
|
||
padding: 0.6rem 1rem;
|
||
color: var(--color-accent);
|
||
font-size: 0.85rem;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
/* ── Version Metadata ───────────────────────────────────────────────────── */
|
||
|
||
.version-metadata {
|
||
background: var(--color-bg-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 8px;
|
||
padding: 0.75rem 1rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.version-metadata__title {
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
margin: 0 0 0.5rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.version-metadata__grid {
|
||
display: flex;
|
||
gap: 1.5rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.version-metadata__item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.15rem;
|
||
}
|
||
|
||
.version-metadata__item--wide {
|
||
flex-basis: 100%;
|
||
}
|
||
|
||
.version-metadata__key {
|
||
color: var(--color-text-muted);
|
||
font-size: 0.75rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.03em;
|
||
}
|
||
|
||
.version-metadata__value {
|
||
color: var(--color-text-primary);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.version-metadata__hashes {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.2rem;
|
||
margin-top: 0.15rem;
|
||
}
|
||
|
||
.version-metadata__hash {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.version-metadata__hash-file {
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.version-metadata__hash-value {
|
||
font-family: "SF Mono", "Fira Code", monospace;
|
||
color: var(--color-text-muted);
|
||
font-size: 0.75rem;
|
||
background: var(--color-bg-input);
|
||
padding: 0.1rem 0.35rem;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
/* ── Pipeline Admin ─────────────────────────────────────────────────────── */
|
||
|
||
.admin-pipeline {
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
padding: 2rem 1rem;
|
||
}
|
||
|
||
.admin-pipeline__header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
gap: 1rem;
|
||
margin-bottom: 1.5rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.admin-pipeline__header-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.admin-pipeline__title {
|
||
color: var(--color-text-primary);
|
||
margin: 0 0 0.25rem;
|
||
}
|
||
|
||
.admin-pipeline__subtitle {
|
||
color: var(--color-text-muted);
|
||
margin: 0;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.admin-pipeline__list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.admin-pipeline__filters {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.admin-pipeline__select-all {
|
||
padding: 0.5rem 0;
|
||
font-size: 0.85rem;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.admin-pipeline__select-all label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* ── Creator Filter ───────────────────────────────────────────────────────── */
|
||
|
||
.creator-filter {
|
||
margin-left: auto;
|
||
}
|
||
|
||
.creator-filter__select {
|
||
padding: 0.4rem 0.75rem;
|
||
border-radius: 6px;
|
||
border: 1px solid var(--color-border);
|
||
background: var(--color-surface);
|
||
color: var(--color-text);
|
||
font-size: 0.85rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.creator-filter__select:focus {
|
||
outline: 2px solid var(--color-accent);
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
/* ── Pipeline Search ──────────────────────────────────────────────────────── */
|
||
|
||
.pipeline-search {
|
||
position: relative;
|
||
flex: 1;
|
||
min-width: 180px;
|
||
max-width: 320px;
|
||
}
|
||
|
||
.pipeline-search__input {
|
||
width: 100%;
|
||
padding: 0.4rem 2rem 0.4rem 0.75rem;
|
||
border-radius: 6px;
|
||
border: 1px solid var(--color-border);
|
||
background: var(--color-surface);
|
||
color: var(--color-text);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.pipeline-search__input:focus {
|
||
outline: 2px solid var(--color-accent);
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
.pipeline-search__input::placeholder {
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.pipeline-search__clear {
|
||
position: absolute;
|
||
right: 0.4rem;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
background: none;
|
||
border: none;
|
||
color: var(--color-text-muted);
|
||
cursor: pointer;
|
||
font-size: 0.8rem;
|
||
padding: 0.2rem;
|
||
line-height: 1;
|
||
}
|
||
|
||
.pipeline-search__clear:hover {
|
||
color: var(--color-text);
|
||
}
|
||
|
||
/* ── Checkbox in video rows ───────────────────────────────────────────────── */
|
||
|
||
.pipeline-video__checkbox {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-right: 0.5rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.pipeline-video__checkbox input[type="checkbox"],
|
||
.auto-refresh-toggle input[type="checkbox"],
|
||
.admin-pipeline__select-all input[type="checkbox"] {
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
appearance: none;
|
||
width: 16px;
|
||
height: 16px;
|
||
border: 1.5px solid var(--color-text-muted);
|
||
border-radius: 3px;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
position: relative;
|
||
flex-shrink: 0;
|
||
transition: border-color 0.15s, background-color 0.15s;
|
||
}
|
||
|
||
.pipeline-video__checkbox input[type="checkbox"]:hover,
|
||
.auto-refresh-toggle input[type="checkbox"]:hover,
|
||
.admin-pipeline__select-all input[type="checkbox"]:hover {
|
||
border-color: var(--color-accent);
|
||
}
|
||
|
||
.pipeline-video__checkbox input[type="checkbox"]:checked,
|
||
.auto-refresh-toggle input[type="checkbox"]:checked,
|
||
.admin-pipeline__select-all input[type="checkbox"]:checked {
|
||
background: var(--color-accent);
|
||
border-color: var(--color-accent);
|
||
}
|
||
|
||
.pipeline-video__checkbox input[type="checkbox"]:checked::after,
|
||
.auto-refresh-toggle input[type="checkbox"]:checked::after,
|
||
.admin-pipeline__select-all input[type="checkbox"]:checked::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 4px;
|
||
top: 1px;
|
||
width: 5px;
|
||
height: 9px;
|
||
border: solid var(--color-bg-page);
|
||
border-width: 0 2px 2px 0;
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
.pipeline-video__checkbox input[type="checkbox"]:disabled,
|
||
.admin-pipeline__select-all input[type="checkbox"]:disabled {
|
||
opacity: 0.4;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* ── Bulk Toolbar ─────────────────────────────────────────────────────────── */
|
||
|
||
.bulk-toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
padding: 0.75rem 1rem;
|
||
background: var(--color-surface);
|
||
border: 1px solid var(--color-accent);
|
||
border-radius: 8px;
|
||
margin-bottom: 0.75rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.bulk-toolbar__count {
|
||
font-weight: 600;
|
||
color: var(--color-accent);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.bulk-toolbar__progress {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
flex: 1;
|
||
min-width: 200px;
|
||
}
|
||
|
||
.bulk-toolbar__progress-bar {
|
||
flex: 1;
|
||
height: 6px;
|
||
background: var(--color-bg);
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.bulk-toolbar__progress-fill {
|
||
height: 100%;
|
||
background: var(--color-accent);
|
||
border-radius: 3px;
|
||
transition: width 300ms ease;
|
||
}
|
||
|
||
.bulk-toolbar__progress-text {
|
||
font-size: 0.85rem;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.bulk-toolbar__current {
|
||
font-size: 0.8rem;
|
||
color: var(--color-text-muted);
|
||
max-width: 200px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.bulk-toolbar__done {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 8px;
|
||
margin-bottom: 0.75rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.bulk-toolbar__done--ok {
|
||
background: rgba(0, 200, 83, 0.1);
|
||
border: 1px solid rgba(0, 200, 83, 0.3);
|
||
color: #00c853;
|
||
}
|
||
|
||
.bulk-toolbar__done--warn {
|
||
background: rgba(255, 152, 0, 0.1);
|
||
border: 1px solid rgba(255, 152, 0, 0.3);
|
||
color: #ff9800;
|
||
}
|
||
|
||
.bulk-toolbar__dismiss {
|
||
margin-left: auto;
|
||
background: none;
|
||
border: none;
|
||
color: inherit;
|
||
cursor: pointer;
|
||
font-size: 1rem;
|
||
padding: 0.2rem;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.bulk-toolbar__dismiss:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
.btn--warning {
|
||
background: rgba(255, 152, 0, 0.15);
|
||
color: #ff9800;
|
||
border: 1px solid rgba(255, 152, 0, 0.3);
|
||
}
|
||
|
||
/* ── Auto-refresh toggle ──────────────────────────────────────────────────── */
|
||
|
||
.auto-refresh-toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
font-size: 0.8rem;
|
||
color: var(--color-text-muted);
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* auto-refresh checkbox: styled via shared checkbox rules above */
|
||
|
||
/* ── Video row change highlight ───────────────────────────────────────────── */
|
||
|
||
@keyframes statusChange {
|
||
0% { box-shadow: 0 0 0 2px var(--color-accent); }
|
||
100% { box-shadow: 0 0 0 0 transparent; }
|
||
}
|
||
|
||
.pipeline-video--changed {
|
||
animation: statusChange 2s ease-out;
|
||
}
|
||
|
||
/* ── Stage Tabs (expanded run detail) ─────────────────────────────────────── */
|
||
|
||
.stage-tabs {
|
||
padding: 0.5rem 0;
|
||
}
|
||
|
||
.stage-tabs__bar {
|
||
display: flex;
|
||
gap: 2px;
|
||
border-bottom: 2px solid var(--color-border);
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.stage-tabs__tab {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
padding: 0.5rem 1rem 0.625rem;
|
||
border: none;
|
||
background: transparent;
|
||
color: var(--color-text-muted);
|
||
font-size: 0.8rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
position: relative;
|
||
border-bottom: 2px solid transparent;
|
||
margin-bottom: -2px;
|
||
transition: color 150ms ease, border-color 150ms ease;
|
||
}
|
||
|
||
.stage-tabs__tab:hover:not(:disabled) {
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
.stage-tabs__tab:disabled {
|
||
opacity: 0.35;
|
||
cursor: default;
|
||
}
|
||
|
||
.stage-tabs__tab--active {
|
||
color: var(--color-text-primary);
|
||
border-bottom-color: var(--color-accent);
|
||
}
|
||
|
||
.stage-tabs__indicator {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.stage-tabs__tab--idle .stage-tabs__indicator {
|
||
background: var(--color-border);
|
||
}
|
||
|
||
.stage-tabs__tab--running .stage-tabs__indicator {
|
||
background: var(--color-accent);
|
||
animation: stagePulse 1.5s ease-in-out infinite;
|
||
}
|
||
|
||
.stage-tabs__tab--done .stage-tabs__indicator {
|
||
background: var(--color-badge-approved-text);
|
||
}
|
||
|
||
.stage-tabs__tab--error .stage-tabs__indicator {
|
||
background: var(--color-badge-rejected-text);
|
||
}
|
||
|
||
@keyframes stagePulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.4; }
|
||
}
|
||
|
||
.stage-tabs__label {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.stage-tabs__panel {
|
||
padding: 0.75rem 0;
|
||
}
|
||
|
||
.stage-tabs__panel--empty {
|
||
color: var(--color-text-muted);
|
||
font-size: 0.8rem;
|
||
padding: 1.5rem 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.stage-tabs__summary {
|
||
display: flex;
|
||
gap: 1rem;
|
||
padding: 0.5rem 0 0.75rem;
|
||
border-bottom: 1px solid rgba(42, 42, 56, 0.5);
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.stage-tabs__stat {
|
||
color: var(--color-text-muted);
|
||
font-size: 0.75rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.stage-tabs__events {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.375rem;
|
||
}
|
||
|
||
.stage-tabs__error-detail {
|
||
margin: 0.375rem 0 0 1.5rem;
|
||
padding: 0.5rem 0.75rem;
|
||
background: var(--color-badge-rejected-bg);
|
||
color: var(--color-badge-rejected-text);
|
||
border-radius: 4px;
|
||
font-size: 0.75rem;
|
||
font-family: monospace;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
max-height: 200px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* ── Stage Timeline ───────────────────────────────────────────────────────── */
|
||
|
||
.stage-timeline {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 2px;
|
||
}
|
||
|
||
.stage-timeline__step {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
}
|
||
|
||
.stage-timeline__dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: var(--color-border);
|
||
flex-shrink: 0;
|
||
transition: background 300ms, box-shadow 300ms;
|
||
}
|
||
|
||
.stage-timeline__label {
|
||
font-size: 0.65rem;
|
||
color: var(--color-text-muted);
|
||
display: none;
|
||
}
|
||
|
||
.stage-timeline__step--done .stage-timeline__dot {
|
||
background: #00c853;
|
||
}
|
||
|
||
.stage-timeline__step--active .stage-timeline__dot {
|
||
background: var(--color-accent);
|
||
box-shadow: 0 0 6px var(--color-accent);
|
||
animation: stagePulse 1.5s ease-in-out infinite;
|
||
}
|
||
|
||
.stage-timeline__step--active .stage-timeline__label {
|
||
display: inline;
|
||
color: var(--color-accent);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.stage-timeline__step--error .stage-timeline__dot {
|
||
background: #f44336;
|
||
}
|
||
|
||
.stage-timeline__step--error .stage-timeline__label {
|
||
display: inline;
|
||
color: #f44336;
|
||
}
|
||
|
||
/* Connector chevron between dots */
|
||
.stage-timeline__step + .stage-timeline__step::before {
|
||
content: "›";
|
||
display: block;
|
||
font-size: 0.9rem;
|
||
color: var(--color-text-muted);
|
||
margin-right: 2px;
|
||
}
|
||
|
||
.stage-timeline__step--done + .stage-timeline__step::before {
|
||
color: #00c853;
|
||
}
|
||
.stage-timeline__elapsed {
|
||
font-size: 0.7rem;
|
||
font-weight: 600;
|
||
color: var(--color-accent);
|
||
margin-left: 6px;
|
||
font-variant-numeric: tabular-nums;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.stage-timeline__tokens {
|
||
font-size: 0.65rem;
|
||
color: var(--color-text-muted);
|
||
margin-left: 4px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
/* ── Recent Activity Feed ─────────────────────────────────────────────────── */
|
||
|
||
.recent-activity {
|
||
margin-bottom: 1rem;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.recent-activity__toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
padding: 0.6rem 1rem;
|
||
background: var(--color-surface);
|
||
border: none;
|
||
color: var(--color-text);
|
||
cursor: pointer;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.recent-activity__toggle:hover {
|
||
background: var(--color-bg-input);
|
||
}
|
||
|
||
.recent-activity__title {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.recent-activity__arrow {
|
||
flex-shrink: 0;
|
||
width: 1rem;
|
||
text-align: center;
|
||
color: var(--color-text-muted);
|
||
transition: color 200ms;
|
||
}
|
||
|
||
.recent-activity__toggle:hover .recent-activity__arrow {
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.recent-activity__list {
|
||
max-height: 200px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.recent-activity__item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.35rem 1rem;
|
||
font-size: 0.8rem;
|
||
border-top: 1px solid var(--color-border);
|
||
}
|
||
|
||
.recent-activity__item--complete {
|
||
color: #00c853;
|
||
}
|
||
|
||
.recent-activity__item--error {
|
||
color: #f44336;
|
||
}
|
||
|
||
.recent-activity__icon {
|
||
flex-shrink: 0;
|
||
width: 1rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.recent-activity__stage {
|
||
flex-shrink: 0;
|
||
width: 6rem;
|
||
font-family: monospace;
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.recent-activity__file {
|
||
flex: 1;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.recent-activity__creator {
|
||
flex-shrink: 0;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.recent-activity__duration {
|
||
flex-shrink: 0;
|
||
color: var(--color-text-muted);
|
||
font-family: monospace;
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.recent-activity__time {
|
||
flex-shrink: 0;
|
||
color: var(--color-text-muted);
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
/* ── Bulk Log ─────────────────────────────────────────────────────────────── */
|
||
|
||
.bulk-log {
|
||
margin-bottom: 0.75rem;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.bulk-log__list {
|
||
max-height: 150px;
|
||
overflow-y: auto;
|
||
padding: 0.25rem 0;
|
||
}
|
||
|
||
.bulk-log__entry {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.2rem 1rem;
|
||
font-size: 0.8rem;
|
||
font-family: monospace;
|
||
}
|
||
|
||
.bulk-log__entry--ok .bulk-log__icon {
|
||
color: #00c853;
|
||
}
|
||
|
||
.bulk-log__entry--err .bulk-log__icon {
|
||
color: #f44336;
|
||
}
|
||
|
||
.bulk-log__file {
|
||
flex: 1;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.bulk-log__msg {
|
||
color: var(--color-text-muted);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ── Run List & Cards ─────────────────────────────────────────────────────── */
|
||
|
||
.run-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.run-card {
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.run-card--running {
|
||
border-color: var(--color-accent);
|
||
}
|
||
|
||
.run-card--error {
|
||
border-color: rgba(244, 67, 54, 0.4);
|
||
}
|
||
|
||
.run-card--cancelled {
|
||
border-color: rgba(158, 158, 158, 0.3);
|
||
}
|
||
|
||
.run-card__header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
width: 100%;
|
||
padding: 0.6rem 1rem;
|
||
background: var(--color-surface);
|
||
border: none;
|
||
color: var(--color-text);
|
||
cursor: pointer;
|
||
font-size: 0.85rem;
|
||
text-align: left;
|
||
}
|
||
|
||
.run-card__header:hover {
|
||
background: var(--color-bg-input);
|
||
}
|
||
|
||
.run-card__arrow {
|
||
flex-shrink: 0;
|
||
width: 1rem;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.run-card__number {
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.run-card__trigger {
|
||
color: var(--color-text-muted);
|
||
font-size: 0.8rem;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.run-card__time {
|
||
color: var(--color-text-muted);
|
||
font-size: 0.8rem;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.run-card__duration {
|
||
color: var(--color-text-muted);
|
||
font-size: 0.75rem;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.run-card__tokens {
|
||
color: var(--color-text-muted);
|
||
font-size: 0.8rem;
|
||
white-space: nowrap;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.run-card__events {
|
||
color: var(--color-text-muted);
|
||
font-size: 0.8rem;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.run-card__error-stage {
|
||
color: #f44336;
|
||
font-size: 0.8rem;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.run-card__body {
|
||
border-top: 1px solid var(--color-border);
|
||
padding: 0.5rem;
|
||
}
|
||
|
||
.run-card--legacy .run-card__header {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* ── Worker Status Indicator ────────────────────────────────────────────── */
|
||
|
||
.worker-status {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
font-size: 0.8125rem;
|
||
color: var(--color-text-secondary);
|
||
padding: 0.35rem 0.75rem;
|
||
background: var(--color-bg-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 6px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.worker-status__dot {
|
||
display: inline-block;
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.worker-status__dot--online {
|
||
background: var(--color-badge-approved-text);
|
||
box-shadow: 0 0 6px var(--color-badge-approved-text);
|
||
}
|
||
|
||
.worker-status__dot--offline {
|
||
background: var(--color-error);
|
||
box-shadow: 0 0 6px var(--color-error);
|
||
}
|
||
|
||
.worker-status__dot--unknown {
|
||
background: var(--color-text-muted);
|
||
}
|
||
|
||
.worker-status__label {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.worker-status__detail {
|
||
color: var(--color-text-muted);
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.worker-status--error {
|
||
border-color: var(--color-error-border);
|
||
}
|
||
|
||
/* ── Pipeline Video Row ─────────────────────────────────────────────────── */
|
||
|
||
.pipeline-video {
|
||
background: var(--color-bg-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.pipeline-video__header {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr auto auto;
|
||
gap: 0.75rem;
|
||
align-items: center;
|
||
padding: 0.75rem 1rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.pipeline-video__header:hover {
|
||
background: var(--color-bg-input);
|
||
}
|
||
|
||
.pipeline-video__info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.1rem;
|
||
min-width: 0;
|
||
}
|
||
|
||
.pipeline-video__filename {
|
||
color: var(--color-text-primary);
|
||
font-weight: 500;
|
||
font-size: 0.9rem;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.pipeline-video__creator {
|
||
color: var(--color-text-muted);
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.pipeline-video__meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.625rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.pipeline-video__stat {
|
||
color: var(--color-text-muted);
|
||
font-size: 0.8rem;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.pipeline-video__time {
|
||
color: var(--color-text-muted);
|
||
font-size: 0.75rem;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.pipeline-video__actions {
|
||
display: flex;
|
||
gap: 0.375rem;
|
||
}
|
||
|
||
.pipeline-video__message {
|
||
padding: 0.375rem 1rem;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.pipeline-video__message--ok {
|
||
background: var(--color-badge-approved-bg);
|
||
color: var(--color-badge-approved-text);
|
||
}
|
||
|
||
.pipeline-video__message--err {
|
||
background: var(--color-error-bg);
|
||
color: var(--color-error);
|
||
}
|
||
|
||
.pipeline-video__detail {
|
||
padding: 0.75rem 1rem 1rem;
|
||
border-top: 1px solid var(--color-border);
|
||
}
|
||
|
||
.pipeline-video__detail-meta {
|
||
display: flex;
|
||
gap: 1.25rem;
|
||
font-size: 0.8rem;
|
||
color: var(--color-text-muted);
|
||
margin-bottom: 1rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* ── Chunking Inspector ───────────────────────────────────────────────── */
|
||
|
||
.chunking-inspector {
|
||
margin-top: 0.75rem;
|
||
}
|
||
|
||
.chunking-inspector__toggle {
|
||
background: none;
|
||
border: none;
|
||
color: var(--color-text-secondary);
|
||
cursor: pointer;
|
||
font-size: 0.85rem;
|
||
padding: 0.25rem 0;
|
||
}
|
||
|
||
.chunking-inspector__toggle:hover {
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
.chunking-inspector__loading,
|
||
.chunking-inspector__error {
|
||
font-size: 0.8rem;
|
||
color: var(--color-text-muted);
|
||
padding: 0.5rem 0;
|
||
}
|
||
|
||
.chunking-inspector__error {
|
||
color: var(--color-danger);
|
||
}
|
||
|
||
.chunking-inspector__body {
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
.chunking-inspector__summary {
|
||
display: flex;
|
||
gap: 1rem;
|
||
font-size: 0.8rem;
|
||
color: var(--color-text-secondary);
|
||
padding: 0.5rem;
|
||
background: var(--color-bg);
|
||
border-radius: 6px;
|
||
margin-bottom: 0.75rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.chunking-inspector__section {
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.chunking-inspector__section h4 {
|
||
font-size: 0.8rem;
|
||
color: var(--color-text-secondary);
|
||
margin: 0 0 0.35rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.chunking-inspector__topics {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.25rem;
|
||
}
|
||
|
||
.chunking-topic {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0.3rem 0.5rem;
|
||
background: var(--color-bg);
|
||
border-radius: 4px;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.chunking-topic__label {
|
||
color: var(--color-text-primary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.chunking-topic__meta {
|
||
color: var(--color-text-muted);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.chunking-inspector__groups {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.chunking-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0.5rem 0.75rem;
|
||
background: var(--color-bg);
|
||
border-radius: 6px;
|
||
border-left: 3px solid var(--color-accent);
|
||
font-size: 0.8rem;
|
||
min-width: 140px;
|
||
}
|
||
|
||
.chunking-group--split {
|
||
border-left-color: var(--color-warning, #f0ad4e);
|
||
}
|
||
|
||
.chunking-group__category {
|
||
font-weight: 600;
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
.chunking-group__count {
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.chunking-group__warn {
|
||
color: var(--color-warning, #f0ad4e);
|
||
font-size: 0.75rem;
|
||
margin-top: 0.15rem;
|
||
}
|
||
|
||
/* ── Pipeline Badges ────────────────────────────────────────────────────── */
|
||
|
||
.pipeline-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 0.15rem 0.5rem;
|
||
border-radius: 4px;
|
||
font-size: 0.75rem;
|
||
font-weight: 500;
|
||
background: var(--color-pill-bg);
|
||
color: var(--color-pill-text);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.pipeline-badge--success {
|
||
background: var(--color-badge-approved-bg);
|
||
color: var(--color-badge-approved-text);
|
||
}
|
||
|
||
.pipeline-badge--active {
|
||
background: var(--color-badge-edited-bg);
|
||
color: var(--color-badge-edited-text);
|
||
}
|
||
|
||
.pipeline-badge--error {
|
||
background: var(--color-badge-rejected-bg);
|
||
color: var(--color-badge-rejected-text);
|
||
}
|
||
|
||
.pipeline-badge--pending {
|
||
background: var(--color-badge-pending-bg);
|
||
color: var(--color-badge-pending-text);
|
||
}
|
||
|
||
.pipeline-badge--event-start {
|
||
background: var(--color-badge-edited-bg);
|
||
color: var(--color-badge-edited-text);
|
||
}
|
||
|
||
.pipeline-badge--event-complete {
|
||
background: var(--color-badge-approved-bg);
|
||
color: var(--color-badge-approved-text);
|
||
}
|
||
|
||
.pipeline-badge--event-error {
|
||
background: var(--color-badge-rejected-bg);
|
||
color: var(--color-badge-rejected-text);
|
||
}
|
||
|
||
.pipeline-badge--event-llm_call {
|
||
background: var(--color-pill-plugin-bg);
|
||
color: var(--color-pill-plugin-text);
|
||
}
|
||
|
||
/* ── Pipeline Events ────────────────────────────────────────────────────── */
|
||
|
||
.pipeline-events__header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.pipeline-events__count {
|
||
font-size: 0.85rem;
|
||
color: var(--color-text-secondary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.pipeline-events__view-toggle {
|
||
display: inline-flex;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.pipeline-events__view-btn {
|
||
background: transparent;
|
||
border: none;
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.75rem;
|
||
font-weight: 500;
|
||
padding: 0.25rem 0.625rem;
|
||
cursor: pointer;
|
||
font-family: inherit;
|
||
transition: background 0.15s, color 0.15s;
|
||
}
|
||
|
||
.pipeline-events__view-btn:hover {
|
||
color: var(--color-text-primary);
|
||
background: var(--color-accent-subtle);
|
||
}
|
||
|
||
.pipeline-events__view-btn--active {
|
||
background: var(--color-accent);
|
||
color: var(--color-bg-page);
|
||
}
|
||
|
||
.pipeline-events__view-btn--active:hover {
|
||
background: var(--color-accent-hover);
|
||
color: var(--color-bg-page);
|
||
}
|
||
|
||
.pipeline-events__empty {
|
||
font-size: 0.85rem;
|
||
color: var(--color-text-muted);
|
||
padding: 0.5rem 0;
|
||
}
|
||
|
||
.pipeline-events__list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.25rem;
|
||
}
|
||
|
||
.pipeline-event {
|
||
background: var(--color-bg-page);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 6px;
|
||
padding: 0.5rem 0.75rem;
|
||
}
|
||
|
||
.pipeline-event--error {
|
||
border-left: 3px solid var(--color-error);
|
||
}
|
||
|
||
.pipeline-event__row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.pipeline-event__icon {
|
||
font-size: 0.85rem;
|
||
flex-shrink: 0;
|
||
width: 1.25rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.pipeline-event__stage {
|
||
color: var(--color-text-primary);
|
||
font-size: 0.8125rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.pipeline-event__context {
|
||
color: var(--color-accent);
|
||
font-size: 0.75rem;
|
||
font-style: italic;
|
||
max-width: 150px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.pipeline-event__model {
|
||
color: var(--color-text-muted);
|
||
font-size: 0.75rem;
|
||
font-family: monospace;
|
||
}
|
||
|
||
.pipeline-event__tokens {
|
||
color: var(--color-pill-plugin-text);
|
||
font-size: 0.75rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.pipeline-event__duration {
|
||
color: var(--color-text-muted);
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.pipeline-event__time {
|
||
color: var(--color-text-muted);
|
||
font-size: 0.75rem;
|
||
margin-left: auto;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* ── Pipeline Events Pager ──────────────────────────────────────────────── */
|
||
|
||
.pipeline-events__pager {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.75rem;
|
||
margin-top: 0.75rem;
|
||
}
|
||
|
||
.pipeline-events__pager-info {
|
||
font-size: 0.8rem;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
/* ── Collapsible JSON ───────────────────────────────────────────────────── */
|
||
|
||
.json-viewer {
|
||
margin-top: 0.375rem;
|
||
}
|
||
|
||
.json-viewer__toggle {
|
||
background: none;
|
||
border: none;
|
||
color: var(--color-accent);
|
||
font-size: 0.75rem;
|
||
cursor: pointer;
|
||
padding: 0;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.json-viewer__toggle:hover {
|
||
color: var(--color-accent-hover);
|
||
}
|
||
|
||
.json-viewer__content {
|
||
margin: 0.375rem 0 0;
|
||
padding: 0.5rem 0.75rem;
|
||
background: var(--color-bg-transcript);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 4px;
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.75rem;
|
||
line-height: 1.5;
|
||
overflow-x: auto;
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* ── Debug Payload Viewer ───────────────────────────────────────────────── */
|
||
|
||
.debug-viewer {
|
||
margin-top: 0.375rem;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 4px;
|
||
background: var(--color-bg-surface);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.debug-viewer__header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0.375rem 0.625rem;
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
.debug-viewer__label {
|
||
font-size: 0.7rem;
|
||
font-weight: 600;
|
||
color: var(--color-accent);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.03em;
|
||
}
|
||
|
||
.debug-viewer__export {
|
||
background: none;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 3px;
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.7rem;
|
||
cursor: pointer;
|
||
padding: 0.125rem 0.5rem;
|
||
font-family: inherit;
|
||
transition: color 0.15s, border-color 0.15s;
|
||
}
|
||
|
||
.debug-viewer__export:hover {
|
||
color: var(--color-accent);
|
||
border-color: var(--color-accent);
|
||
}
|
||
|
||
.debug-viewer__section {
|
||
border-top: 1px solid var(--color-border);
|
||
}
|
||
|
||
.debug-viewer__section:first-of-type {
|
||
border-top: none;
|
||
}
|
||
|
||
.debug-viewer__section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0.25rem 0.625rem;
|
||
}
|
||
|
||
.debug-viewer__section-toggle {
|
||
background: none;
|
||
border: none;
|
||
color: var(--color-text-primary);
|
||
font-size: 0.75rem;
|
||
cursor: pointer;
|
||
padding: 0;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.debug-viewer__section-toggle:hover {
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
.debug-viewer__copy {
|
||
background: none;
|
||
border: none;
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.675rem;
|
||
cursor: pointer;
|
||
padding: 0.125rem 0.375rem;
|
||
font-family: inherit;
|
||
border-radius: 3px;
|
||
transition: color 0.15s, background 0.15s;
|
||
}
|
||
|
||
.debug-viewer__copy:hover {
|
||
color: var(--color-accent);
|
||
background: var(--color-accent-subtle);
|
||
}
|
||
|
||
.debug-viewer__content {
|
||
margin: 0;
|
||
padding: 0.5rem 0.75rem;
|
||
background: var(--color-bg-transcript);
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.75rem;
|
||
line-height: 1.5;
|
||
overflow-x: auto;
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
}
|
||
|
||
/* ── Ghost button ─────────────────────────────────────────────────────── */
|
||
|
||
.btn--ghost {
|
||
background: transparent;
|
||
color: var(--color-text-muted);
|
||
border-color: transparent;
|
||
}
|
||
|
||
.btn--ghost:hover:not(:disabled) {
|
||
color: var(--color-text-secondary);
|
||
background: var(--color-bg-surface);
|
||
border-color: var(--color-border);
|
||
}
|
||
|
||
/* ── Technique page footer ────────────────────────────────────────────── */
|
||
|
||
.technique-footer {
|
||
margin-top: 2rem;
|
||
padding-top: 1rem;
|
||
border-top: 1px solid var(--color-border);
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
/* ── Creator avatar ───────────────────────────────────────────────────── */
|
||
|
||
.creator-avatar {
|
||
border-radius: 4px;
|
||
flex-shrink: 0;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.creator-avatar--img {
|
||
object-fit: cover;
|
||
}
|
||
|
||
/* ── Copy link button ─────────────────────────────────────────────────── */
|
||
|
||
.copy-link-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
background: none;
|
||
border: none;
|
||
color: var(--color-text-muted);
|
||
cursor: pointer;
|
||
padding: 0.15rem;
|
||
border-radius: 4px;
|
||
opacity: 0;
|
||
transition: opacity 0.15s, color 0.15s, background 0.15s;
|
||
vertical-align: middle;
|
||
margin-left: 0.25rem;
|
||
}
|
||
|
||
.technique-header__title:hover .copy-link-btn,
|
||
.copy-link-btn:focus-visible {
|
||
opacity: 1;
|
||
}
|
||
|
||
.copy-link-btn:hover {
|
||
opacity: 1;
|
||
color: var(--color-accent);
|
||
background: var(--color-bg-surface);
|
||
}
|
||
|
||
.copy-link-btn__tooltip {
|
||
position: absolute;
|
||
top: -1.75rem;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: var(--color-bg-surface);
|
||
color: var(--color-accent);
|
||
font-size: 0.7rem;
|
||
padding: 0.15rem 0.5rem;
|
||
border-radius: 4px;
|
||
border: 1px solid var(--color-border);
|
||
white-space: nowrap;
|
||
pointer-events: none;
|
||
animation: fadeInUp 0.15s ease-out;
|
||
}
|
||
|
||
@keyframes fadeInUp {
|
||
from { opacity: 0; transform: translateX(-50%) translateY(4px); }
|
||
to { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||
}
|
||
|
||
/* ── Card stagger entrance animation ──────────────────────────────────── */
|
||
|
||
@keyframes cardEnter {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(12px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.card-stagger {
|
||
animation: cardEnter 0.3s ease-out both;
|
||
animation-delay: calc(var(--stagger-index, 0) * 60ms);
|
||
}
|
||
|
||
/* ── Recent card with creator ─────────────────────────────────────────── */
|
||
|
||
.recent-card__header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.recent-card__creator {
|
||
font-size: 0.8rem;
|
||
color: var(--color-text-secondary);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.recent-card__header-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: 0.15rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.recent-card__footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 0.5rem;
|
||
margin-top: 0.25rem;
|
||
padding-top: 0.375rem;
|
||
border-top: 1px solid var(--color-border);
|
||
}
|
||
|
||
.recent-card__date {
|
||
font-size: 0.7rem;
|
||
color: var(--color-text-secondary);
|
||
opacity: 0.65;
|
||
white-space: nowrap;
|
||
margin-left: auto;
|
||
}
|
||
|
||
/* ── Search result card creator ───────────────────────────────────────── */
|
||
|
||
.search-result-card__creator {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.3rem;
|
||
}
|
||
|
||
/* ── Technique footer inspect link ────────────────────────────────────── */
|
||
|
||
.technique-footer__inspect {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.3rem;
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* ── About page ───────────────────────────────────────────────────────────── */
|
||
|
||
.about {
|
||
max-width: 44rem;
|
||
margin: 0 auto;
|
||
padding: 2rem 1.5rem 3rem;
|
||
}
|
||
|
||
.about-hero {
|
||
text-align: center;
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
|
||
.about-hero__title {
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
color: var(--color-text-primary);
|
||
margin: 0 0 0.5rem;
|
||
}
|
||
|
||
.about-hero__subtitle {
|
||
font-size: 1.05rem;
|
||
color: var(--color-text-secondary);
|
||
margin: 0;
|
||
}
|
||
|
||
.about-section {
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.about-section__heading {
|
||
font-size: 1.25rem;
|
||
font-weight: 600;
|
||
color: var(--color-text-primary);
|
||
margin: 0 0 0.75rem;
|
||
}
|
||
|
||
.about-section__text {
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.7;
|
||
margin: 0 0 0.75rem;
|
||
}
|
||
|
||
.about-pipeline {
|
||
list-style: none;
|
||
counter-reset: pipeline;
|
||
padding: 0;
|
||
margin: 1rem 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.about-pipeline__step {
|
||
counter-increment: pipeline;
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 0.75rem;
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.6;
|
||
padding: 0.75rem 1rem;
|
||
background: var(--color-bg-surface);
|
||
border-radius: 0.5rem;
|
||
border: 1px solid var(--color-border);
|
||
}
|
||
|
||
.about-pipeline__step::before {
|
||
content: counter(pipeline);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 1.5rem;
|
||
height: 1.5rem;
|
||
font-size: 0.75rem;
|
||
font-weight: 700;
|
||
color: var(--color-accent);
|
||
background: var(--color-accent-subtle);
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.about-pipeline__step strong {
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
.about-link {
|
||
color: var(--color-accent);
|
||
text-decoration: none;
|
||
transition: color 0.15s;
|
||
}
|
||
|
||
.about-link:hover {
|
||
color: var(--color-accent-hover);
|
||
}
|
||
|
||
.about-cta {
|
||
text-align: center;
|
||
margin-top: 2.5rem;
|
||
}
|
||
|
||
.about-cta__btn {
|
||
display: inline-block;
|
||
}
|
||
|
||
/* Footer about link */
|
||
|
||
.app-footer__about {
|
||
color: var(--color-text-muted);
|
||
text-decoration: none;
|
||
transition: color 0.15s;
|
||
}
|
||
|
||
a.app-footer__about:hover,
|
||
.app-footer__about:hover {
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.about-hero__title {
|
||
font-size: 1.5rem;
|
||
}
|
||
}
|
||
|
||
/* ── Page-enter transition ────────────────────────────────────────────────── */
|
||
|
||
/* ── Sort Dropdown ───────────────────────────────────────────────── */
|
||
|
||
.sort-dropdown {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.sort-dropdown__label {
|
||
font-size: 0.8125rem;
|
||
color: var(--color-text-muted);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.sort-dropdown__select {
|
||
appearance: none;
|
||
background: var(--color-bg-input);
|
||
color: var(--color-text-primary);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 6px;
|
||
padding: 0.375rem 2rem 0.375rem 0.625rem;
|
||
font-size: 0.8125rem;
|
||
font-family: inherit;
|
||
cursor: pointer;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b8b9a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: right 0.625rem center;
|
||
transition: border-color 150ms ease;
|
||
}
|
||
|
||
.sort-dropdown__select:hover {
|
||
border-color: var(--color-text-secondary);
|
||
}
|
||
|
||
.sort-dropdown__select:focus {
|
||
outline: none;
|
||
border-color: var(--color-accent);
|
||
box-shadow: 0 0 0 2px var(--color-accent-focus);
|
||
}
|
||
|
||
.sort-dropdown__select option {
|
||
background: var(--color-bg-surface);
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
/* Creator techniques section header with sort */
|
||
.creator-techniques__header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.creator-techniques__header .creator-techniques__title {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.creator-techniques__header .sort-dropdown {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
@keyframes pageEnter {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(8px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.home,
|
||
.topics-browse,
|
||
.subtopic-page,
|
||
.search-results-page,
|
||
.creators-browse,
|
||
.creator-detail,
|
||
.technique-page {
|
||
animation: pageEnter 250ms ease-out;
|
||
}
|
||
|
||
/* ── Personality Profile ───────────────────────────────────────────────────── */
|
||
|
||
.personality-profile {
|
||
margin: 1.5rem 0;
|
||
}
|
||
|
||
.personality-profile__toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
background: none;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 8px;
|
||
padding: 0.75rem 1rem;
|
||
width: 100%;
|
||
cursor: pointer;
|
||
color: var(--color-text-primary);
|
||
transition: background 150ms ease;
|
||
}
|
||
|
||
.personality-profile__toggle:hover {
|
||
background: var(--color-bg-surface-hover);
|
||
}
|
||
|
||
.personality-profile__heading {
|
||
margin: 0;
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.personality-profile__chevron {
|
||
margin-left: auto;
|
||
font-size: 0.9rem;
|
||
transition: transform 250ms ease;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.personality-profile__chevron--open {
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
.personality-profile__collapse {
|
||
display: grid;
|
||
transition: grid-template-rows 300ms ease;
|
||
}
|
||
|
||
.personality-profile__inner {
|
||
overflow: hidden;
|
||
min-height: 0;
|
||
}
|
||
|
||
.personality-profile__summary {
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.95rem;
|
||
line-height: 1.6;
|
||
margin: 1rem 0;
|
||
padding: 0 0.25rem;
|
||
}
|
||
|
||
.personality-profile__cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
gap: 1rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.personality-profile__card {
|
||
background: var(--color-bg-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 8px;
|
||
padding: 1rem;
|
||
}
|
||
|
||
.personality-profile__card-title {
|
||
margin: 0 0 0.75rem;
|
||
font-size: 0.95rem;
|
||
font-weight: 600;
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
.personality-profile__dl {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 0.25rem 0.75rem;
|
||
margin: 0 0 0.75rem;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.personality-profile__dl dt {
|
||
color: var(--color-text-muted);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.personality-profile__dl dd {
|
||
margin: 0;
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
.personality-profile__pill-label {
|
||
display: block;
|
||
font-size: 0.8rem;
|
||
color: var(--color-text-muted);
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.personality-profile__pills {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.375rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.personality-profile__booleans {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.375rem;
|
||
font-size: 0.85rem;
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
.personality-profile__bool {
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.personality-profile__bool--yes {
|
||
color: var(--color-badge-approved-text);
|
||
}
|
||
|
||
.personality-profile__meta {
|
||
color: var(--color-text-muted);
|
||
font-size: 0.8rem;
|
||
padding: 0 0.25rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
/* ── Admin Technique Pages ────────────────────────────────────────────────── */
|
||
|
||
.admin-page {
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
padding: 2rem 1rem;
|
||
}
|
||
|
||
.admin-page__header {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 0.75rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.admin-page__header h1 {
|
||
color: var(--color-text-primary);
|
||
margin: 0;
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.admin-page__stats {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.admin-page__stat {
|
||
color: var(--color-text-muted);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.admin-page__stat-sep {
|
||
color: var(--color-text-muted);
|
||
font-size: 0.9rem;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.admin-page__description {
|
||
color: var(--color-text-muted);
|
||
font-size: 0.85rem;
|
||
margin: 0 0 1.5rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.admin-page__filters {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
margin-bottom: 1.25rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.admin-page__checkbox {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.85rem;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.admin-page__checkbox input[type="checkbox"] {
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
width: 16px;
|
||
height: 16px;
|
||
border: 1.5px solid var(--color-text-muted);
|
||
border-radius: 3px;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
position: relative;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.admin-page__checkbox input[type="checkbox"]:hover {
|
||
border-color: var(--color-accent);
|
||
}
|
||
|
||
.admin-page__checkbox input[type="checkbox"]:checked {
|
||
background: var(--color-accent);
|
||
border-color: var(--color-accent);
|
||
}
|
||
|
||
.admin-page__checkbox input[type="checkbox"]:checked::after {
|
||
content: "✓";
|
||
position: absolute;
|
||
top: -1px;
|
||
left: 2px;
|
||
font-size: 12px;
|
||
color: var(--color-bg-page);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.admin-page__search {
|
||
padding: 0.4rem 0.75rem;
|
||
border-radius: 6px;
|
||
border: 1px solid var(--color-border);
|
||
background: var(--color-bg-input);
|
||
color: var(--color-text-primary);
|
||
font-size: 0.85rem;
|
||
min-width: 180px;
|
||
}
|
||
|
||
.admin-page__search::placeholder {
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.admin-page__search:focus {
|
||
outline: 2px solid var(--color-accent);
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
.admin-page__select {
|
||
padding: 0.4rem 0.75rem;
|
||
border-radius: 6px;
|
||
border: 1px solid var(--color-border);
|
||
background: var(--color-bg-input);
|
||
color: var(--color-text-primary);
|
||
font-size: 0.85rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.admin-page__select:focus {
|
||
outline: 2px solid var(--color-accent);
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
.admin-page__error {
|
||
background: var(--color-badge-rejected-bg);
|
||
color: var(--color-badge-rejected-text);
|
||
padding: 0.75rem 1rem;
|
||
border-radius: 8px;
|
||
margin-bottom: 1rem;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.admin-page__loading,
|
||
.admin-page__empty {
|
||
color: var(--color-text-muted);
|
||
text-align: center;
|
||
padding: 3rem 1rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.admin-page__table-wrap {
|
||
background: var(--color-bg-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.admin-page__table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.admin-page__table thead th {
|
||
text-align: left;
|
||
padding: 0.625rem 0.75rem;
|
||
color: var(--color-text-muted);
|
||
font-weight: 500;
|
||
font-size: 0.75rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
border-bottom: 1px solid var(--color-border);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.admin-page__table tbody td {
|
||
padding: 0.625rem 0.75rem;
|
||
color: var(--color-text-secondary);
|
||
border-bottom: 1px solid rgba(42, 42, 56, 0.5);
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.admin-page__table tbody tr:last-child td {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.admin-page__row {
|
||
transition: background 150ms ease;
|
||
}
|
||
|
||
.admin-page__row:hover {
|
||
background: var(--color-bg-surface-hover);
|
||
}
|
||
|
||
.admin-page__row--expanded {
|
||
background: var(--color-bg-surface-hover);
|
||
}
|
||
|
||
.admin-page__expand-toggle {
|
||
width: 1.5rem;
|
||
text-align: center;
|
||
color: var(--color-text-muted);
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.admin-page__table a {
|
||
color: var(--color-accent);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.admin-page__table a:hover {
|
||
color: var(--color-accent-hover);
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.admin-page__detail-row td {
|
||
padding: 0 !important;
|
||
border-bottom: 1px solid var(--color-border) !important;
|
||
}
|
||
|
||
.admin-page__detail-panel {
|
||
padding: 1rem 1.25rem 1.25rem 2.75rem;
|
||
background: rgba(15, 15, 20, 0.4);
|
||
border-top: 1px solid rgba(42, 42, 56, 0.5);
|
||
}
|
||
|
||
.admin-page__detail-panel h4 {
|
||
color: var(--color-text-primary);
|
||
font-size: 0.8rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
margin: 0.75rem 0 0.5rem;
|
||
}
|
||
|
||
.admin-page__detail-links {
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.admin-page__detail-links a {
|
||
color: var(--color-accent);
|
||
font-size: 0.8rem;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.admin-page__detail-links a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.admin-page__source-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.35rem;
|
||
}
|
||
|
||
.admin-page__source-list li {
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.admin-page__source-list a {
|
||
color: var(--color-accent);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.admin-page__source-list a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.admin-page__muted {
|
||
color: var(--color-text-muted);
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
/* Responsive: stack table on narrow viewports */
|
||
@media (max-width: 768px) {
|
||
.admin-page__table-wrap {
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
.admin-page__table {
|
||
min-width: 700px;
|
||
}
|
||
|
||
.admin-page__filters {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.admin-page__search {
|
||
min-width: unset;
|
||
}
|
||
}
|
||
|
||
/* Responsive: pipeline admin cards on narrow viewports */
|
||
@media (max-width: 768px) {
|
||
.pipeline-video__header {
|
||
grid-template-columns: 1fr;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.pipeline-video__header > * {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.run-card__header {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.admin-pipeline__filters {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.creator-filter {
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
|
||
/* ── Video Player ──────────────────────────────────────────────────────────── */
|
||
|
||
.video-player {
|
||
position: relative;
|
||
width: 100%;
|
||
aspect-ratio: 16 / 9;
|
||
background: #000;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.video-player__video {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.video-player__unavailable {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--color-bg-surface);
|
||
border: 1px solid var(--color-border);
|
||
}
|
||
|
||
.video-player__unavailable-content {
|
||
text-align: center;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.video-player__unavailable-content svg {
|
||
margin-bottom: 0.75rem;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.video-player__unavailable-content p {
|
||
font-size: 1.125rem;
|
||
font-weight: 600;
|
||
color: var(--color-text-secondary);
|
||
margin: 0 0 0.25rem;
|
||
}
|
||
|
||
.video-player__unavailable-content span {
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
/* ── Player Controls ───────────────────────────────────────────────────────── */
|
||
|
||
/* ── Audio Waveform (wavesurfer.js) ────────────────────────────────────────── */
|
||
|
||
.audio-waveform {
|
||
background: #000;
|
||
border-radius: 8px;
|
||
padding: 1rem;
|
||
min-height: 160px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
border: 1px solid var(--color-border);
|
||
}
|
||
|
||
.audio-waveform__canvas {
|
||
width: 100%;
|
||
}
|
||
|
||
/* ── Player Controls (continued) ───────────────────────────────────────────── */
|
||
|
||
.player-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.5rem 0.75rem;
|
||
background: var(--color-bg-header);
|
||
border-radius: 0 0 8px 8px;
|
||
}
|
||
|
||
.player-controls__btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: none;
|
||
border: none;
|
||
color: var(--color-text-primary);
|
||
cursor: pointer;
|
||
padding: 0.25rem;
|
||
border-radius: 4px;
|
||
transition: background 0.15s;
|
||
}
|
||
|
||
.player-controls__btn:hover {
|
||
background: var(--color-bg-surface-hover);
|
||
}
|
||
|
||
.player-controls__time {
|
||
font-size: 0.8125rem;
|
||
font-variant-numeric: tabular-nums;
|
||
color: var(--color-text-secondary);
|
||
white-space: nowrap;
|
||
min-width: 5.5rem;
|
||
}
|
||
|
||
/* Range input shared styles */
|
||
.player-controls__seek,
|
||
.player-controls__volume {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
height: 4px;
|
||
border-radius: 2px;
|
||
background: linear-gradient(
|
||
to right,
|
||
var(--color-accent) 0%,
|
||
var(--color-accent) var(--progress, 0%),
|
||
var(--color-border) var(--progress, 0%),
|
||
var(--color-border) 100%
|
||
);
|
||
cursor: pointer;
|
||
outline: none;
|
||
}
|
||
|
||
.player-controls__seek {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.player-controls__seek:disabled {
|
||
opacity: 0.4;
|
||
cursor: default;
|
||
}
|
||
|
||
.player-controls__volume {
|
||
width: 5rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Thumb styling */
|
||
.player-controls__seek::-webkit-slider-thumb,
|
||
.player-controls__volume::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
background: var(--color-accent);
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.player-controls__seek::-moz-range-thumb,
|
||
.player-controls__volume::-moz-range-thumb {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
background: var(--color-accent);
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Speed button group */
|
||
.player-controls__speed {
|
||
display: flex;
|
||
gap: 2px;
|
||
margin: 0 0.25rem;
|
||
}
|
||
|
||
.player-controls__speed-btn {
|
||
font-size: 0.6875rem;
|
||
font-weight: 500;
|
||
padding: 0.15rem 0.35rem;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 3px;
|
||
background: transparent;
|
||
color: var(--color-text-muted);
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
line-height: 1;
|
||
}
|
||
|
||
.player-controls__speed-btn:hover {
|
||
border-color: var(--color-accent);
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
.player-controls__speed-btn--active {
|
||
background: var(--color-accent);
|
||
border-color: var(--color-accent);
|
||
color: #000;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* ── Seek container + Chapter markers ──────────────────────────────────────── */
|
||
|
||
.player-controls__seek-container {
|
||
position: relative;
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.player-controls__seek-container .player-controls__seek {
|
||
width: 100%;
|
||
}
|
||
|
||
.chapter-markers {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.chapter-marker__pin {
|
||
position: absolute;
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
background: var(--color-accent, #22d3ee);
|
||
opacity: 0.7;
|
||
pointer-events: all;
|
||
cursor: pointer;
|
||
transform: translate(-50%, -50%);
|
||
top: 50%;
|
||
border: 2px solid rgba(0, 0, 0, 0.4);
|
||
padding: 0;
|
||
font: inherit;
|
||
transition: transform 150ms ease, opacity 150ms ease;
|
||
/* Ensure touch-friendly hit area */
|
||
min-width: 12px;
|
||
min-height: 12px;
|
||
}
|
||
|
||
.chapter-marker__pin::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -6px;
|
||
}
|
||
|
||
.chapter-marker__pin--technique { background: var(--color-pin-technique); }
|
||
.chapter-marker__pin--settings { background: var(--color-pin-settings); }
|
||
.chapter-marker__pin--reasoning { background: var(--color-pin-reasoning); }
|
||
.chapter-marker__pin--workflow { background: var(--color-pin-workflow); }
|
||
|
||
.chapter-marker__pin--active {
|
||
opacity: 1;
|
||
transform: translate(-50%, -50%) scale(1.3);
|
||
z-index: 2;
|
||
}
|
||
|
||
.chapter-marker__pin:hover {
|
||
opacity: 1;
|
||
transform: translate(-50%, -50%) scale(1.2);
|
||
}
|
||
|
||
.chapter-marker__pin--active:hover {
|
||
transform: translate(-50%, -50%) scale(1.3);
|
||
}
|
||
|
||
.chapter-marker__tooltip {
|
||
position: absolute;
|
||
bottom: calc(100% + 4px);
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: var(--color-bg-surface, #1e293b);
|
||
color: var(--text-primary, #e2e8f0);
|
||
padding: 4px 10px;
|
||
border-radius: 4px;
|
||
font-size: 0.75rem;
|
||
white-space: nowrap;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 150ms;
|
||
}
|
||
|
||
.chapter-marker__pin:hover .chapter-marker__tooltip {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* ── Responsive: player controls ───────────────────────────────────────────── */
|
||
|
||
@media (max-width: 640px) {
|
||
.player-controls {
|
||
flex-wrap: wrap;
|
||
gap: 0.375rem;
|
||
padding: 0.375rem 0.5rem;
|
||
}
|
||
|
||
.player-controls__seek {
|
||
order: -1;
|
||
width: 100%;
|
||
flex-basis: 100%;
|
||
}
|
||
|
||
.player-controls__speed {
|
||
gap: 1px;
|
||
}
|
||
|
||
.player-controls__speed-btn {
|
||
font-size: 0.625rem;
|
||
padding: 0.125rem 0.25rem;
|
||
}
|
||
|
||
.player-controls__volume {
|
||
width: 3.5rem;
|
||
}
|
||
}
|
||
|
||
/* ── Watch Page ──────────────────────────────────────────────────────────── */
|
||
|
||
.watch-page {
|
||
max-width: 90rem;
|
||
margin: 0 auto;
|
||
padding: 1.5rem var(--page-gutter, 1.5rem);
|
||
}
|
||
|
||
.watch-page__header {
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
.watch-page__header-top {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 1rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.watch-page__title {
|
||
font-size: 1.25rem;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin: 0 0 0.25rem;
|
||
}
|
||
|
||
.watch-page__embed-btn {
|
||
font-size: 0.8rem;
|
||
padding: 0.3rem 0.75rem;
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
background: var(--surface-alt, var(--surface));
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||
}
|
||
|
||
.watch-page__embed-btn:hover {
|
||
border-color: var(--accent);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.watch-page__embed-btn--copied {
|
||
background: var(--accent);
|
||
color: var(--surface);
|
||
border-color: var(--accent);
|
||
}
|
||
|
||
.watch-page__creator {
|
||
font-size: 0.9rem;
|
||
color: var(--accent);
|
||
text-decoration: none;
|
||
}
|
||
.watch-page__creator:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.watch-page__content {
|
||
display: grid;
|
||
grid-template-columns: 1fr 22rem;
|
||
gap: 1.5rem;
|
||
align-items: start;
|
||
}
|
||
|
||
.watch-page__player-area {
|
||
min-width: 0; /* prevent grid blowout */
|
||
}
|
||
|
||
.watch-page__transcript-error {
|
||
margin-top: 1rem;
|
||
font-size: 0.85rem;
|
||
color: var(--text-secondary);
|
||
font-style: italic;
|
||
}
|
||
|
||
/* ── Transcript Sidebar ──────────────────────────────────────────────────── */
|
||
|
||
.transcript-sidebar {
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-md, 0.5rem);
|
||
background: var(--surface-secondary, var(--surface));
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
max-height: calc(100vh - 10rem);
|
||
}
|
||
|
||
.transcript-sidebar__title {
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--text-secondary);
|
||
padding: 0.75rem 1rem 0.5rem;
|
||
margin: 0;
|
||
border-bottom: 1px solid var(--border);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.transcript-sidebar__empty {
|
||
padding: 2rem 1rem;
|
||
text-align: center;
|
||
color: var(--text-secondary);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.transcript-sidebar__list {
|
||
overflow-y: auto;
|
||
flex: 1 1 auto;
|
||
scrollbar-width: thin;
|
||
scrollbar-color: var(--border) transparent;
|
||
}
|
||
|
||
.transcript-segment {
|
||
display: flex;
|
||
gap: 0.75rem;
|
||
padding: 0.5rem 1rem;
|
||
border: none;
|
||
border-left: 3px solid transparent;
|
||
background: none;
|
||
width: 100%;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
font: inherit;
|
||
color: var(--text-primary);
|
||
transition: background-color 150ms ease, border-color 150ms ease;
|
||
}
|
||
|
||
.transcript-segment:hover {
|
||
background: var(--surface-hover, rgba(255, 255, 255, 0.04));
|
||
}
|
||
|
||
.transcript-segment--active {
|
||
border-left-color: var(--accent);
|
||
background: var(--surface-hover, rgba(255, 255, 255, 0.04));
|
||
}
|
||
|
||
.transcript-segment__time {
|
||
font-family: var(--font-mono, "JetBrains Mono", monospace);
|
||
font-size: 0.78rem;
|
||
color: var(--text-secondary);
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
padding-top: 0.1em;
|
||
}
|
||
|
||
.transcript-segment__text {
|
||
font-size: 0.88rem;
|
||
line-height: 1.45;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
/* ── Technique timestamp links ───────────────────────────────────────────── */
|
||
|
||
.technique-source__time--link {
|
||
color: var(--accent);
|
||
text-decoration: none;
|
||
}
|
||
.technique-source__time--link:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* ── Watch Page responsive ───────────────────────────────────────────────── */
|
||
|
||
@media (max-width: 768px) {
|
||
.watch-page__content {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.transcript-sidebar {
|
||
max-height: 20rem;
|
||
}
|
||
}
|