Add cross-site improvements across three phases
Phase 1 — Quick wins: - Image lazy-loading on series/resource cards - Newsletter signup added to Episodes page (before highlights) - Per-route meta tags via usePageMeta hook (title, og:title, og:description) - Breadcrumbs on study index, section, and notes pages - SVG completion checkmark badges on study section list - Analytics time-range filter (7d / 30d / 90d) in admin panel Phase 2 — Medium features: - Related episodes on archived series detail pages - Resource library two-tier filter (type + tag chips) - Global search (Fuse.js) moved below sticky header as full-width bar - Q&A anonymous upvoting with localStorage dedup + admin pin/unpin - Study enrollment funnel tracking (firstVisitAt, firstCompletionAt) with funnel chart in analytics Phase 3 — Larger features: - Study section comments (auto-approve for enrolled users, admin moderation panel) - Study completion certificate (canvas render, PNG download, shareable public URL) - Episode script full-text search (mammoth docx extraction, server-side search, admin upload UI) - Reflection questions renamed from Discussion Questions; quiz answers can be shared to section discussion - Public certificate route at /certificate/:token with og meta tags - Comment moderation panel added to admin under Manage > Study Comments Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmert
+734
@@ -26,8 +26,131 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* ── Global Search ── */
|
||||
/* Search bar strip below the sticky header */
|
||||
.site-search-bar {
|
||||
background: #13120d;
|
||||
border-bottom: 1px solid #28241a;
|
||||
position: sticky;
|
||||
top: 72px; /* sits flush below the header */
|
||||
z-index: 99;
|
||||
}
|
||||
.site-search-bar-inner {
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.global-search {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.global-search-input-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.global-search-icon {
|
||||
position: absolute;
|
||||
left: 0.65rem;
|
||||
color: #7a7060;
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.global-search-input {
|
||||
width: 100%;
|
||||
padding: 0.4rem 2rem 0.4rem 2.1rem;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid #2a2518;
|
||||
border-radius: 20px;
|
||||
color: #f0ead8;
|
||||
font-size: 0.82rem;
|
||||
font-family: var(--brand-font-body);
|
||||
outline: none;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
}
|
||||
.global-search-input::placeholder { color: #5a5440; }
|
||||
.global-search-input:focus {
|
||||
border-color: rgba(201,168,76,0.5);
|
||||
background: rgba(255,255,255,0.08);
|
||||
}
|
||||
.global-search-input::-webkit-search-cancel-button { display: none; }
|
||||
.global-search-clear {
|
||||
position: absolute;
|
||||
right: 0.55rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #7a7060;
|
||||
cursor: pointer;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1;
|
||||
padding: 0 0.2rem;
|
||||
}
|
||||
.global-search-clear:hover { color: #f0ead8; }
|
||||
.global-search-dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
min-width: 320px;
|
||||
background: #18170f;
|
||||
border: 1px solid #3a3320;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 12px 40px rgba(0,0,0,0.55);
|
||||
z-index: 200;
|
||||
overflow: hidden;
|
||||
}
|
||||
.global-search-result {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.7rem;
|
||||
padding: 0.7rem 1rem;
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 1px solid #25231a;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
.global-search-result:last-of-type { border-bottom: none; }
|
||||
.global-search-result:hover,
|
||||
.global-search-result--active { background: rgba(201,168,76,0.08); }
|
||||
.global-search-result-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
|
||||
.global-search-result-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
|
||||
.global-search-result-title {
|
||||
color: #f0ead8;
|
||||
font-size: 0.88rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.global-search-result-meta { display: flex; align-items: center; gap: 0; }
|
||||
.global-search-result-type {
|
||||
font-size: 0.72rem;
|
||||
color: #c9a84c;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.global-search-result-sub { font-size: 0.72rem; color: #7a7060; }
|
||||
.global-search-result-snippet {
|
||||
font-size: 0.72rem;
|
||||
color: #6a6050;
|
||||
line-height: 1.45;
|
||||
margin-top: 0.15rem;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.global-search-empty { padding: 0.85rem 1rem; color: #7a7060; font-size: 0.85rem; margin: 0; }
|
||||
.global-search-hint { padding: 0.4rem 1rem; color: #3a3320; font-size: 0.7rem; margin: 0; border-top: 1px solid #25231a; }
|
||||
|
||||
.header-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1661,6 +1784,35 @@
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.study-breadcrumbs {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.study-breadcrumbs-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.study-breadcrumbs-link {
|
||||
color: #7a7060;
|
||||
text-decoration: none;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.study-breadcrumbs-link:hover {
|
||||
color: var(--brand-gold);
|
||||
}
|
||||
.study-breadcrumbs-current {
|
||||
color: #b9b09b;
|
||||
}
|
||||
.study-breadcrumbs-sep {
|
||||
color: #3a3320;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.study-detail-back {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.9rem;
|
||||
@@ -1736,6 +1888,319 @@
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* ── Reflection Questions (quiz page) ───────────────────────────────────── */
|
||||
.quiz-question-block {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.quiz-question-label {
|
||||
margin: 0 0 0.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--brand-warm-white);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.quiz-question-textarea {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0.9rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #2a2518;
|
||||
background: #14130f;
|
||||
color: #f0ead8;
|
||||
font-family: var(--brand-font-body);
|
||||
font-size: 0.95rem;
|
||||
resize: vertical;
|
||||
}
|
||||
.quiz-question-textarea:focus {
|
||||
outline: none;
|
||||
border-color: #c8952a;
|
||||
}
|
||||
.quiz-share-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.quiz-share-toggle input[type="checkbox"] {
|
||||
accent-color: #e0b840;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.quiz-share-label {
|
||||
font-size: 0.82rem;
|
||||
color: #8a7f5a;
|
||||
}
|
||||
.quiz-share-label--done {
|
||||
color: #6fcf97;
|
||||
}
|
||||
|
||||
/* ── Study Section Comments ──────────────────────────────────────────────── */
|
||||
.study-comments {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.study-comments-heading {
|
||||
font-family: var(--brand-font-header);
|
||||
font-size: 1.15rem;
|
||||
color: var(--brand-gold);
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
.study-comments-loading,
|
||||
.study-comments-empty,
|
||||
.study-comments-enroll-note {
|
||||
font-family: var(--brand-font-body);
|
||||
color: #7a7060;
|
||||
font-size: 0.9rem;
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
.study-comments-enroll-note a {
|
||||
color: var(--brand-gold);
|
||||
text-decoration: underline;
|
||||
}
|
||||
.study-comments-list {
|
||||
list-style: none;
|
||||
margin: 0 0 1.25rem;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.study-comment {
|
||||
background: #14130f;
|
||||
border: 1px solid #2a2518;
|
||||
border-radius: 10px;
|
||||
padding: 0.85rem 1rem;
|
||||
position: relative;
|
||||
}
|
||||
.study-comment-header {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: baseline;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
.study-comment-author {
|
||||
font-family: var(--brand-font-header);
|
||||
font-size: 0.9rem;
|
||||
color: #e0c88a;
|
||||
}
|
||||
.study-comment-date {
|
||||
font-family: var(--brand-font-body);
|
||||
font-size: 0.78rem;
|
||||
color: #5a5040;
|
||||
}
|
||||
.study-comment-text {
|
||||
font-family: var(--brand-font-body);
|
||||
font-size: 0.9rem;
|
||||
color: #c8bfa8;
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
.study-comment-delete {
|
||||
margin-top: 0.5rem;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 0.78rem;
|
||||
color: #5a5040;
|
||||
padding: 0;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.study-comment-delete:hover { color: #e07a7a; }
|
||||
.study-comment-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.study-comment-form-label {
|
||||
font-family: var(--brand-font-body);
|
||||
font-size: 0.85rem;
|
||||
color: #8a7f5a;
|
||||
}
|
||||
.study-comment-textarea {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: #14130f;
|
||||
border: 1px solid #2a2518;
|
||||
border-radius: 10px;
|
||||
color: #f0ead8;
|
||||
font-family: var(--brand-font-body);
|
||||
font-size: 0.9rem;
|
||||
padding: 0.75rem 1rem;
|
||||
resize: vertical;
|
||||
}
|
||||
.study-comment-textarea:focus {
|
||||
outline: none;
|
||||
border-color: #c8952a;
|
||||
}
|
||||
.study-comment-form-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.study-comment-char-count {
|
||||
font-size: 0.78rem;
|
||||
color: #5a5040;
|
||||
margin-right: auto;
|
||||
}
|
||||
.study-comment-error {
|
||||
font-size: 0.85rem;
|
||||
color: #e07a7a;
|
||||
}
|
||||
.study-comment-success {
|
||||
font-size: 0.85rem;
|
||||
color: #6fcf97;
|
||||
}
|
||||
.study-comment-submit {
|
||||
background: var(--brand-gold);
|
||||
color: #14100a;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 0.5rem 1.25rem;
|
||||
font-family: var(--brand-font-header);
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
}
|
||||
.study-comment-submit:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ── Study Certificate Panel ──────────────────────────────────────────────── */
|
||||
.study-cert-panel {
|
||||
margin-top: 1.5rem;
|
||||
background: #14130f;
|
||||
border: 1px solid #2a2518;
|
||||
border-radius: 14px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.study-cert-heading {
|
||||
font-family: var(--brand-font-header);
|
||||
font-size: 1.1rem;
|
||||
color: var(--brand-gold);
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
.study-cert-loading {
|
||||
font-size: 0.9rem;
|
||||
color: #7a7060;
|
||||
}
|
||||
.study-cert-progress-label {
|
||||
font-size: 0.9rem;
|
||||
color: #8a7f5a;
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
.study-cert-progress-bar-wrap {
|
||||
background: #27231b;
|
||||
border-radius: 999px;
|
||||
height: 10px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.study-cert-progress-bar {
|
||||
height: 100%;
|
||||
background: #e0c070;
|
||||
border-radius: 999px;
|
||||
}
|
||||
.study-cert-note {
|
||||
font-size: 0.85rem;
|
||||
color: #5a5040;
|
||||
margin: 0;
|
||||
}
|
||||
.study-cert-eligible {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.study-cert-congrats {
|
||||
font-size: 0.95rem;
|
||||
color: #c8bfa8;
|
||||
margin: 0;
|
||||
}
|
||||
.study-cert-error {
|
||||
font-size: 0.85rem;
|
||||
color: #e07a7a;
|
||||
}
|
||||
.study-cert-btn {
|
||||
background: var(--brand-gold);
|
||||
color: #14100a;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 0.6rem 1.4rem;
|
||||
font-family: var(--brand-font-header);
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.study-cert-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.study-cert-btn--secondary {
|
||||
background: transparent;
|
||||
color: var(--brand-gold);
|
||||
border: 1px solid var(--brand-gold);
|
||||
}
|
||||
.study-cert-issued {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
.study-cert-issued-label {
|
||||
font-size: 0.85rem;
|
||||
color: #7a7060;
|
||||
margin: 0;
|
||||
}
|
||||
.study-cert-canvas {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.study-cert-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* ── Public Certificate Page ──────────────────────────────────────────────── */
|
||||
.public-cert-page .thanks-card {
|
||||
max-width: 540px;
|
||||
}
|
||||
.public-cert-title {
|
||||
font-size: 1.8rem;
|
||||
color: var(--brand-gold);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.public-cert-divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #2a2518;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.public-cert-label {
|
||||
font-size: 0.9rem;
|
||||
color: #7a7060;
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
.public-cert-name {
|
||||
font-family: var(--brand-font-header);
|
||||
font-size: 1.6rem;
|
||||
color: var(--brand-warm-white);
|
||||
margin: 0.25rem 0 0.75rem;
|
||||
}
|
||||
.public-cert-study {
|
||||
font-family: var(--brand-font-header);
|
||||
font-size: 1.2rem;
|
||||
color: #e0c88a;
|
||||
margin: 0.25rem 0 0.75rem;
|
||||
}
|
||||
.public-cert-date {
|
||||
font-size: 0.85rem;
|
||||
color: #7a7060;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.study-track-switcher {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
@@ -2853,6 +3318,61 @@
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.download-filter-bar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Related episodes on download detail pages */
|
||||
.download-related-episodes {
|
||||
margin-top: 2.5rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid #2a2518;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.download-related-heading {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #f0e9cc;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.download-related-list {
|
||||
display: grid;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.download-related-ep {
|
||||
display: block;
|
||||
padding: 0.7rem 0.9rem;
|
||||
border: 1px solid #2a2518;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
background: #11100d;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.download-related-ep:hover {
|
||||
border-color: rgba(201,168,76,0.4);
|
||||
background: rgba(201,168,76,0.05);
|
||||
}
|
||||
|
||||
.download-related-ep-meta {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.download-related-ep-title {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
color: #f0ead8;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.download-library-group {
|
||||
background: rgba(17, 17, 17, 0.82);
|
||||
border: 1px solid rgba(201, 168, 76, 0.14);
|
||||
@@ -3461,6 +3981,59 @@
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Enrollment Funnel */
|
||||
.admin-funnel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.admin-funnel-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
.admin-funnel-bar-wrap {
|
||||
flex: 1;
|
||||
background: #2a2620;
|
||||
border-radius: 4px;
|
||||
height: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.admin-funnel-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #e0b840, #c8952a);
|
||||
border-radius: 4px;
|
||||
transition: width 0.4s ease;
|
||||
min-width: 4px;
|
||||
}
|
||||
.admin-funnel-label {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
min-width: 260px;
|
||||
}
|
||||
.admin-funnel-step-name {
|
||||
font-family: var(--brand-font-body);
|
||||
color: var(--brand-warm-white);
|
||||
font-size: 0.9rem;
|
||||
flex: 1;
|
||||
}
|
||||
.admin-funnel-count {
|
||||
font-family: var(--brand-font-header);
|
||||
color: #e0b840;
|
||||
font-size: 1rem;
|
||||
min-width: 40px;
|
||||
text-align: right;
|
||||
}
|
||||
.admin-funnel-pct {
|
||||
font-family: var(--brand-font-body);
|
||||
color: #8a7f5a;
|
||||
font-size: 0.85rem;
|
||||
min-width: 36px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.admin-stats-lists {
|
||||
margin-top: 1rem;
|
||||
display: grid;
|
||||
@@ -4527,6 +5100,10 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.site-search-bar-inner {
|
||||
padding: 0.4rem 1rem;
|
||||
}
|
||||
|
||||
.header-menu-btn {
|
||||
display: inline-flex;
|
||||
margin-left: auto;
|
||||
@@ -4971,6 +5548,45 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.qa-card-scene--pinned {
|
||||
border-color: rgba(201, 168, 76, 0.4) !important;
|
||||
box-shadow: 0 0 0 1px rgba(201,168,76,0.15);
|
||||
}
|
||||
|
||||
.qa-pinned-badge {
|
||||
font-size: 0.85em;
|
||||
margin-right: 0.15rem;
|
||||
}
|
||||
|
||||
.qa-upvote-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
border-radius: 999px;
|
||||
padding: 0.28rem 0.65rem;
|
||||
font-size: 0.73rem;
|
||||
font-family: var(--brand-font-body);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(201,168,76,0.3);
|
||||
background: transparent;
|
||||
color: #c9a84c;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
.qa-upvote-btn:hover:not(:disabled) {
|
||||
background: rgba(201,168,76,0.12);
|
||||
border-color: #c9a84c;
|
||||
}
|
||||
|
||||
.qa-upvote-btn--voted {
|
||||
background: rgba(201,168,76,0.1);
|
||||
border-color: rgba(201,168,76,0.5);
|
||||
color: #a08030;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.qa-card-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -5725,6 +6341,124 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Study comments moderation panel */
|
||||
.admin-comment-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
.admin-comment-card {
|
||||
background: #14130f;
|
||||
border: 1px solid #2a2518;
|
||||
border-radius: 10px;
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
.admin-comment-card--pending {
|
||||
border-color: #5a3a1a;
|
||||
background: #160f08;
|
||||
}
|
||||
.admin-comment-card-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.admin-comment-card-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem 0.75rem;
|
||||
align-items: baseline;
|
||||
}
|
||||
.admin-comment-author {
|
||||
font-family: var(--brand-font-header);
|
||||
font-size: 0.9rem;
|
||||
color: var(--brand-warm-white);
|
||||
}
|
||||
.admin-comment-location {
|
||||
font-size: 0.78rem;
|
||||
color: #8a7f5a;
|
||||
}
|
||||
.admin-comment-date {
|
||||
font-size: 0.75rem;
|
||||
color: #5a5040;
|
||||
}
|
||||
.admin-comment-badge {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
padding: 0.2rem 0.55rem;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.admin-comment-badge--pending {
|
||||
background: #3a2010;
|
||||
color: #e0903a;
|
||||
}
|
||||
.admin-comment-badge--approved {
|
||||
background: #1a3a2a;
|
||||
color: #6fcf97;
|
||||
}
|
||||
.admin-comment-text {
|
||||
font-size: 0.9rem;
|
||||
color: #c8bfa8;
|
||||
margin: 0 0 0.75rem;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
.admin-comment-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Episode scripts admin panel */
|
||||
.admin-script-upload-form {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
max-width: 560px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.admin-script-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
.admin-script-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
background: #14130f;
|
||||
border: 1px solid #2a2518;
|
||||
border-radius: 8px;
|
||||
padding: 0.65rem 1rem;
|
||||
}
|
||||
.admin-script-row-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: baseline;
|
||||
}
|
||||
.admin-script-ep {
|
||||
font-family: var(--brand-font-header);
|
||||
font-size: 0.85rem;
|
||||
color: var(--brand-gold);
|
||||
min-width: 48px;
|
||||
}
|
||||
.admin-script-title {
|
||||
font-size: 0.9rem;
|
||||
color: var(--brand-warm-white);
|
||||
}
|
||||
.admin-script-meta {
|
||||
font-size: 0.78rem;
|
||||
color: #5a5040;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.admin-sidebar-backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user