5414 lines
118 KiB
CSS
5414 lines
118 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);
|
|
|
|
/* 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;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
.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;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* ── 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 ─────────────────────────────────────────────────────────── */
|
|
|
|
.queue-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.queue-header h2 {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ── Stats bar ────────────────────────────────────────────────────────────── */
|
|
|
|
.stats-bar {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.stats-card {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 0.75rem;
|
|
border-radius: 0.5rem;
|
|
background: var(--color-bg-surface);
|
|
border: 1px solid var(--color-border);
|
|
box-shadow: 0 1px 3px var(--color-shadow);
|
|
}
|
|
|
|
.stats-card__count {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
.stats-card__label {
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--color-text-secondary);
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.stats-card--pending .stats-card__count { color: var(--color-badge-pending-text); }
|
|
.stats-card--approved .stats-card__count { color: var(--color-badge-approved-text); }
|
|
.stats-card--edited .stats-card__count { color: var(--color-badge-edited-text); }
|
|
.stats-card--rejected .stats-card__count { color: var(--color-badge-rejected-text); }
|
|
|
|
/* ── 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-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.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 ───────────────────────────────────────────────────────────── */
|
|
|
|
.pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
margin-top: 1.25rem;
|
|
padding: 0.75rem 0;
|
|
}
|
|
|
|
.pagination__info {
|
|
font-size: 0.8125rem;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* ── 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: var(--color-text-primary);
|
|
}
|
|
|
|
.detail-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.detail-header h2 {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.detail-card {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.detail-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.125rem;
|
|
}
|
|
|
|
.detail-field label {
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.detail-field span,
|
|
.detail-field p {
|
|
font-size: 0.875rem;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.detail-field--full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.detail-transcript {
|
|
background: var(--color-bg-transcript);
|
|
padding: 0.75rem;
|
|
border-radius: 0.375rem;
|
|
font-size: 0.8125rem;
|
|
line-height: 1.6;
|
|
white-space: pre-wrap;
|
|
max-height: 20rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* ── Action bar ───────────────────────────────────────────────────────────── */
|
|
|
|
.action-bar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.action-error {
|
|
background: var(--color-error-bg);
|
|
border: 1px solid var(--color-error-border);
|
|
border-radius: 0.375rem;
|
|
padding: 0.5rem 0.75rem;
|
|
color: var(--color-badge-rejected-text);
|
|
font-size: 0.8125rem;
|
|
margin-top: 0.75rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
/* ── Edit form ────────────────────────────────────────────────────────────── */
|
|
|
|
.edit-form {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.edit-form h3 {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.edit-field {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.edit-field label {
|
|
display: block;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--color-text-secondary);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.edit-field input,
|
|
.edit-field textarea,
|
|
.edit-field select {
|
|
width: 100%;
|
|
padding: 0.5rem 0.75rem;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 0.375rem;
|
|
font-size: 0.875rem;
|
|
font-family: inherit;
|
|
line-height: 1.5;
|
|
color: var(--color-text-primary);
|
|
background: var(--color-bg-input);
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
.edit-field input:focus,
|
|
.edit-field textarea:focus,
|
|
.edit-field select:focus {
|
|
outline: none;
|
|
border-color: var(--color-accent);
|
|
box-shadow: 0 0 0 2px var(--color-accent-focus);
|
|
}
|
|
|
|
.edit-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/* ── Dialogs (modal overlays) ─────────────────────────────────────────────── */
|
|
|
|
.dialog-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: var(--color-overlay);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 100;
|
|
}
|
|
|
|
.dialog {
|
|
background: var(--color-bg-surface);
|
|
border-radius: 0.75rem;
|
|
padding: 1.5rem;
|
|
width: 90%;
|
|
max-width: 28rem;
|
|
box-shadow: 0 10px 40px var(--color-shadow-heavy);
|
|
}
|
|
|
|
.dialog h3 {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.dialog__hint {
|
|
font-size: 0.8125rem;
|
|
color: var(--color-text-secondary);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.dialog__actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/* ── 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;
|
|
}
|
|
|
|
.stats-card {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.detail-card {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.queue-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.action-bar {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.action-bar .btn {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* ── 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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* ── Home / Hero ──────────────────────────────────────────────────────────── */
|
|
|
|
.home-hero {
|
|
text-align: center;
|
|
padding: 2rem 1rem 2.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: 1.5rem 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: 1.25rem;
|
|
max-width: 42rem;
|
|
margin: 2rem 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 {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--color-text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.home-popular-topics__list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
max-width: 36rem;
|
|
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: 36rem;
|
|
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;
|
|
}
|
|
|
|
/* ── Recently Added section ───────────────────────────────────────────────── */
|
|
|
|
/* ── Featured technique spotlight ──────────────────────────────────────── */
|
|
|
|
.home-featured {
|
|
max-width: 42rem;
|
|
margin: 0 auto 1.5rem;
|
|
padding: 1.25rem 1.5rem;
|
|
background: var(--color-bg-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 0.5rem;
|
|
text-align: left;
|
|
position: relative;
|
|
border-image: linear-gradient(135deg, var(--color-accent), #a855f7) 1;
|
|
border-image-slice: 1;
|
|
box-shadow:
|
|
0 0 20px rgba(34, 211, 238, 0.15),
|
|
0 0 40px rgba(34, 211, 238, 0.05);
|
|
}
|
|
|
|
.home-featured__label {
|
|
font-size: 0.6875rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--color-accent);
|
|
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 {
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.pill-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.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 22rem;
|
|
gap: 2rem;
|
|
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: 1.5rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.technique-columns {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.technique-columns__sidebar {
|
|
position: static;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* ── Table of Contents ────────────────────────────────────────────────────── */
|
|
|
|
.technique-toc {
|
|
background: var(--color-bg-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 0.5rem;
|
|
padding: 1rem 1.25rem;
|
|
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;
|
|
counter-reset: toc-section;
|
|
}
|
|
|
|
.technique-toc__item {
|
|
counter-increment: toc-section;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.technique-toc__link {
|
|
color: var(--color-accent);
|
|
text-decoration: none;
|
|
font-size: 0.875rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.technique-toc__link::before {
|
|
content: counter(toc-section) ". ";
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.technique-toc__link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.technique-toc__sublist {
|
|
list-style: none;
|
|
padding-left: 1.25rem;
|
|
margin: 0.125rem 0 0.25rem;
|
|
counter-reset: toc-sub;
|
|
}
|
|
|
|
.technique-toc__subitem {
|
|
counter-increment: toc-sub;
|
|
}
|
|
|
|
.technique-toc__sublink {
|
|
color: var(--color-text-secondary);
|
|
text-decoration: none;
|
|
font-size: 0.8125rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.technique-toc__sublink::before {
|
|
content: counter(toc-section) "." counter(toc-sub) " ";
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.technique-toc__sublink:hover {
|
|
color: var(--color-accent);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ── 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 list ─────────────────────────────────────────────────────── */
|
|
|
|
.technique-moments {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.technique-moments h2 {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.technique-moments__list {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.technique-moment {
|
|
padding: 0.875rem 1rem;
|
|
background: var(--color-bg-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.technique-moment__title {
|
|
display: block;
|
|
margin: 0 0 0.25rem 0;
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.technique-moment__meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.25rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.technique-moment__time {
|
|
font-size: 0.75rem;
|
|
color: var(--color-text-secondary);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.technique-moment__source {
|
|
font-size: 0.75rem;
|
|
color: var(--color-text-muted);
|
|
font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
|
|
max-width: 20rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.technique-moment__summary {
|
|
font-size: 0.8125rem;
|
|
color: var(--color-text-secondary);
|
|
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 ──────────────────────────────────────────────────────────────── */
|
|
|
|
.technique-plugins {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.technique-plugins h2 {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* ── 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;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
@media (min-width: 600px) {
|
|
.technique-related__grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
.related-card {
|
|
background: var(--color-surface-card);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 0.5rem;
|
|
padding: 0.875rem 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.related-card__title {
|
|
color: var(--color-link-accent);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
font-size: 0.9375rem;
|
|
}
|
|
|
|
.related-card__title:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.related-card__creator {
|
|
font-size: 0.8125rem;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.related-card__badge {
|
|
display: inline-block;
|
|
align-self: flex-start;
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: 999px;
|
|
background: var(--color-badge-bg, rgba(255, 255, 255, 0.08));
|
|
color: var(--color-badge-text, var(--color-text-muted));
|
|
}
|
|
|
|
.related-card__reason {
|
|
font-size: 0.75rem;
|
|
font-style: italic;
|
|
color: var(--color-text-muted);
|
|
margin: 0;
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════════════════════════
|
|
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 DETAIL
|
|
══════════════════════════════════════════════════════════════════════════════ */
|
|
|
|
.creator-detail {
|
|
max-width: 64rem;
|
|
}
|
|
|
|
.creator-detail__header {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.creator-detail__name {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
font-size: 1.75rem;
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 0.5rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.creator-detail__meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.creator-detail__genres {
|
|
display: inline-flex;
|
|
gap: 0.25rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.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-technique-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;
|
|
box-shadow: 0 1px 3px var(--color-shadow);
|
|
transition: border-color 0.15s, box-shadow 0.15s, transform 0.2s;
|
|
will-change: transform;
|
|
}
|
|
|
|
.creator-technique-card:hover {
|
|
border-color: var(--color-accent-hover);
|
|
box-shadow: 0 2px 8px var(--color-accent-subtle);
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.creator-technique-card__title {
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.creator-technique-card__meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.creator-technique-card__tags {
|
|
display: inline-flex;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.creator-technique-card__summary {
|
|
font-size: 0.8125rem;
|
|
color: var(--color-text-secondary);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════════════════════════
|
|
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%;
|
|
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-detail__name {
|
|
font-size: 1.375rem;
|
|
}
|
|
|
|
.topics-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.topic-card__desc {
|
|
display: none;
|
|
}
|
|
|
|
.topic-subtopic {
|
|
padding-left: 1rem;
|
|
}
|
|
}
|
|
|
|
/* ── 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;
|
|
}
|
|
|
|
.report-issue-btn {
|
|
margin-top: 0.5rem;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
/* ── Buttons ────────────────────────────────────────────────────────────── */
|
|
|
|
.btn {
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 6px;
|
|
font-size: 0.85rem;
|
|
cursor: pointer;
|
|
border: 1px solid var(--color-border);
|
|
transition: background 0.15s, border-color 0.15s;
|
|
}
|
|
|
|
.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--warning {
|
|
background: var(--color-warning, #f0ad4e);
|
|
color: #1a1a1a;
|
|
border-color: var(--color-warning, #f0ad4e);
|
|
}
|
|
|
|
.btn--warning: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 0.5rem;
|
|
}
|
|
|
|
/* ── 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__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 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;
|
|
}
|
|
|
|
@keyframes stagePulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.4; }
|
|
}
|
|
|
|
/* Connector line between dots */
|
|
.stage-timeline__step + .stage-timeline__step::before {
|
|
content: "";
|
|
display: block;
|
|
width: 8px;
|
|
height: 1px;
|
|
background: var(--color-border);
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.stage-timeline__step--done + .stage-timeline__step::before {
|
|
background: #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__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 {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
font-size: 0.8rem;
|
|
color: var(--color-text-secondary);
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ── 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;
|
|
}
|
|
|
|
/* ── 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;
|
|
}
|
|
}
|