feat: migrate hardcoded colors to --rs-* CSS variables across 18 modules
Replace structural UI colors with theme-aware CSS custom properties so all rApp modules respond correctly to light/dark theme switching. Covers: folk-social-post, folk-forum-dashboard, folk-video-player, folk-video-chat, folk-thread-gallery, folk-campaign-manager, folk-wallet-viewer, folk-vote-dashboard, folk-swag-designer, folk-cart-shop, folk-workflow-block, folk-choices-dashboard, folk-pubs-editor, folk-book-shelf, folk-flows-app, folk-analytics-view, folk-campaign-planner, and flows.css canvas background. Intentionally preserved: platform brand colors, chain colors, data-viz/chart colors, video player black, call action buttons. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
a7063d24f5
commit
72100c0922
|
|
@ -6,7 +6,7 @@ const styles = css`
|
|||
background: var(--rs-bg-surface, #fff);
|
||||
color: var(--rs-text-primary, #1e293b);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--rs-shadow-sm);
|
||||
min-width: 280px;
|
||||
min-height: 140px;
|
||||
overflow: hidden;
|
||||
|
|
@ -14,19 +14,19 @@ const styles = css`
|
|||
}
|
||||
|
||||
:host(:hover) {
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: var(--rs-shadow-md);
|
||||
}
|
||||
|
||||
:host([data-status="posted"]) {
|
||||
box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.4), 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.4), var(--rs-shadow-sm);
|
||||
}
|
||||
|
||||
:host([data-status="scheduled"]) {
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4), 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4), var(--rs-shadow-sm);
|
||||
}
|
||||
|
||||
:host([data-status="failed"]) {
|
||||
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.4), 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.4), var(--rs-shadow-sm);
|
||||
}
|
||||
|
||||
.header {
|
||||
|
|
@ -97,15 +97,15 @@ const styles = css`
|
|||
letter-spacing: 0.5px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
background: var(--rs-bg-surface-raised);
|
||||
color: var(--rs-text-muted);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.content-preview {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
@ -117,13 +117,13 @@ const styles = css`
|
|||
width: 100%;
|
||||
height: 100px;
|
||||
border-radius: 8px;
|
||||
background: #f1f5f9;
|
||||
background: var(--rs-bg-surface-raised);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e2e8f0;
|
||||
border: 1px solid var(--rs-border);
|
||||
}
|
||||
|
||||
.media-preview img {
|
||||
|
|
@ -133,7 +133,7 @@ const styles = css`
|
|||
}
|
||||
|
||||
.media-placeholder {
|
||||
color: #94a3b8;
|
||||
color: var(--rs-text-secondary);
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -154,8 +154,8 @@ const styles = css`
|
|||
|
||||
.hashtag {
|
||||
font-size: 11px;
|
||||
color: #3b82f6;
|
||||
background: #eff6ff;
|
||||
color: var(--rs-primary);
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
|
@ -165,8 +165,8 @@ const styles = css`
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 14px;
|
||||
background: #f8fafc;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
background: var(--rs-bg-surface-raised);
|
||||
border-top: 1px solid var(--rs-border);
|
||||
border-radius: 0 0 12px 12px;
|
||||
}
|
||||
|
||||
|
|
@ -175,7 +175,7 @@ const styles = css`
|
|||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted);
|
||||
}
|
||||
|
||||
.schedule-icon {
|
||||
|
|
@ -184,7 +184,7 @@ const styles = css`
|
|||
|
||||
.schedule-time {
|
||||
font-weight: 500;
|
||||
color: #475569;
|
||||
color: var(--rs-text-secondary);
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
|
|
@ -197,23 +197,23 @@ const styles = css`
|
|||
}
|
||||
|
||||
.status-badge.draft {
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
background: var(--rs-bg-surface-raised);
|
||||
color: var(--rs-text-muted);
|
||||
}
|
||||
|
||||
.status-badge.scheduled {
|
||||
background: #dbeafe;
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.status-badge.posted {
|
||||
background: #dcfce7;
|
||||
color: #16a34a;
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
color: var(--rs-success);
|
||||
}
|
||||
|
||||
.status-badge.failed {
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
color: var(--rs-error);
|
||||
}
|
||||
|
||||
.step-number {
|
||||
|
|
@ -223,23 +223,23 @@ const styles = css`
|
|||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: #1e293b;
|
||||
color: white;
|
||||
background: var(--rs-bg-surface-raised);
|
||||
color: var(--rs-text-primary);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
|
||||
border: 2px solid var(--rs-bg-surface);
|
||||
box-shadow: var(--rs-shadow-sm);
|
||||
}
|
||||
|
||||
.edit-overlay {
|
||||
display: none;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: white;
|
||||
background: var(--rs-bg-surface);
|
||||
z-index: 10;
|
||||
border-radius: 12px;
|
||||
flex-direction: column;
|
||||
|
|
@ -254,13 +254,13 @@ const styles = css`
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
border-bottom: 1px solid var(--rs-border);
|
||||
}
|
||||
|
||||
.edit-header span {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary);
|
||||
}
|
||||
|
||||
.edit-body {
|
||||
|
|
@ -279,7 +279,7 @@ const styles = css`
|
|||
.edit-field label {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
|
@ -288,18 +288,20 @@ const styles = css`
|
|||
.edit-field textarea,
|
||||
.edit-field select {
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border: 1px solid var(--rs-input-border);
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
background: var(--rs-input-bg);
|
||||
color: var(--rs-input-text);
|
||||
}
|
||||
|
||||
.edit-field input:focus,
|
||||
.edit-field textarea:focus,
|
||||
.edit-field select:focus {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
border-color: var(--rs-primary);
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
.edit-field textarea {
|
||||
|
|
@ -311,7 +313,7 @@ const styles = css`
|
|||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
border-top: 1px solid var(--rs-border);
|
||||
}
|
||||
|
||||
.edit-actions button {
|
||||
|
|
@ -321,26 +323,26 @@ const styles = css`
|
|||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: 1px solid #e2e8f0;
|
||||
border: 1px solid var(--rs-border);
|
||||
}
|
||||
|
||||
.edit-actions .save-btn {
|
||||
background: #3b82f6;
|
||||
background: var(--rs-primary);
|
||||
color: white;
|
||||
border-color: #3b82f6;
|
||||
border-color: var(--rs-primary);
|
||||
}
|
||||
|
||||
.edit-actions .save-btn:hover {
|
||||
background: #2563eb;
|
||||
background: var(--rs-primary-hover);
|
||||
}
|
||||
|
||||
.edit-actions .cancel-btn {
|
||||
background: white;
|
||||
color: #64748b;
|
||||
background: var(--rs-bg-surface);
|
||||
color: var(--rs-text-muted);
|
||||
}
|
||||
|
||||
.edit-actions .cancel-btn:hover {
|
||||
background: #f1f5f9;
|
||||
background: var(--rs-bg-surface-raised);
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ import { css, html } from "./tags";
|
|||
|
||||
const styles = css`
|
||||
:host {
|
||||
background: #1e1e1e;
|
||||
background: var(--rs-bg-surface);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--rs-shadow-sm);
|
||||
min-width: 400px;
|
||||
min-height: 350px;
|
||||
}
|
||||
|
|
@ -52,7 +52,7 @@ const styles = css`
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 36px);
|
||||
background: #1e1e1e;
|
||||
background: var(--rs-bg-surface);
|
||||
border-radius: 0 0 8px 8px;
|
||||
}
|
||||
|
||||
|
|
@ -62,11 +62,11 @@ const styles = css`
|
|||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
background: #0a0a0a;
|
||||
background: var(--rs-bg-page);
|
||||
}
|
||||
|
||||
.video-slot {
|
||||
background: #2d2d2d;
|
||||
background: var(--rs-bg-surface-raised);
|
||||
border-radius: 8px;
|
||||
aspect-ratio: 16/9;
|
||||
display: flex;
|
||||
|
|
@ -88,7 +88,7 @@ const styles = css`
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #6b7280;
|
||||
color: var(--rs-text-muted);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -114,8 +114,8 @@ const styles = css`
|
|||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: #1e1e1e;
|
||||
border-top: 1px solid #2d2d2d;
|
||||
background: var(--rs-bg-surface);
|
||||
border-top: 1px solid var(--rs-border);
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
|
|
@ -141,12 +141,12 @@ const styles = css`
|
|||
}
|
||||
|
||||
.control-btn.secondary {
|
||||
background: #374151;
|
||||
background: var(--rs-bg-surface-raised);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.control-btn.secondary:hover {
|
||||
background: #4b5563;
|
||||
background: var(--rs-toolbar-btn-hover);
|
||||
}
|
||||
|
||||
.control-btn.danger {
|
||||
|
|
@ -177,23 +177,23 @@ const styles = css`
|
|||
}
|
||||
|
||||
.join-title {
|
||||
color: white;
|
||||
color: var(--rs-text-primary);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.join-subtitle {
|
||||
color: #9ca3af;
|
||||
color: var(--rs-text-secondary);
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.room-input {
|
||||
padding: 10px 16px;
|
||||
border: 2px solid #374151;
|
||||
border: 2px solid var(--rs-input-border);
|
||||
border-radius: 8px;
|
||||
background: #2d2d2d;
|
||||
color: white;
|
||||
background: var(--rs-input-bg);
|
||||
color: var(--rs-input-text);
|
||||
font-size: 14px;
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
|
|
@ -201,7 +201,7 @@ const styles = css`
|
|||
}
|
||||
|
||||
.room-input:focus {
|
||||
border-color: #10b981;
|
||||
border-color: var(--rs-accent);
|
||||
}
|
||||
|
||||
.join-btn {
|
||||
|
|
@ -230,9 +230,9 @@ const styles = css`
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 12px;
|
||||
background: #0a0a0a;
|
||||
background: var(--rs-bg-page);
|
||||
font-size: 11px;
|
||||
color: #9ca3af;
|
||||
color: var(--rs-text-secondary);
|
||||
}
|
||||
|
||||
.recording-indicator {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ const styles = css`
|
|||
background: var(--rs-bg-surface, #fff);
|
||||
color: var(--rs-text-primary, #1e293b);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: var(--rs-shadow-md);
|
||||
min-width: 200px;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
|
@ -28,9 +28,9 @@ const styles = css`
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 12px;
|
||||
background: #f8fafc;
|
||||
background: var(--rs-bg-surface-raised);
|
||||
border-radius: 12px 12px 0 0;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
border-bottom: 1px solid var(--rs-border);
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
|
|
@ -58,7 +58,7 @@ const styles = css`
|
|||
.block-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary);
|
||||
}
|
||||
|
||||
.header-actions button {
|
||||
|
|
@ -66,12 +66,12 @@ const styles = css`
|
|||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.header-actions button:hover {
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary);
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
@ -120,13 +120,13 @@ const styles = css`
|
|||
.port-handle.trigger { border-color: #ef4444; background: #fee2e2; }
|
||||
|
||||
.port-label {
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted);
|
||||
}
|
||||
|
||||
.port-value {
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary);
|
||||
font-family: "Monaco", "Consolas", monospace;
|
||||
background: #f1f5f9;
|
||||
background: var(--rs-bg-surface-raised);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
max-width: 100px;
|
||||
|
|
@ -138,7 +138,7 @@ const styles = css`
|
|||
.config-area {
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
border-top: 1px solid var(--rs-border);
|
||||
}
|
||||
|
||||
.config-field {
|
||||
|
|
@ -151,13 +151,13 @@ const styles = css`
|
|||
.config-field label {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted);
|
||||
}
|
||||
|
||||
.config-field input,
|
||||
.config-field select {
|
||||
padding: 6px 8px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border: 1px solid var(--rs-input-border);
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
|
|
@ -165,7 +165,7 @@ const styles = css`
|
|||
|
||||
.config-field input:focus,
|
||||
.config-field select:focus {
|
||||
border-color: #3b82f6;
|
||||
border-color: var(--rs-primary);
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
|
|
@ -173,9 +173,9 @@ const styles = css`
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 6px 12px;
|
||||
background: #f8fafc;
|
||||
background: var(--rs-bg-surface-raised);
|
||||
border-radius: 0 0 12px 12px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
border-top: 1px solid var(--rs-border);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
|
|
@ -203,7 +203,7 @@ const styles = css`
|
|||
|
||||
.run-btn {
|
||||
padding: 4px 8px;
|
||||
background: #3b82f6;
|
||||
background: var(--rs-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
|
|
@ -213,7 +213,7 @@ const styles = css`
|
|||
}
|
||||
|
||||
.run-btn:hover {
|
||||
background: #2563eb;
|
||||
background: var(--rs-primary-hover);
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -163,10 +163,10 @@ export class FolkBookShelf extends HTMLElement {
|
|||
}
|
||||
|
||||
.rapp-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; min-height: 36px; }
|
||||
.rapp-nav__title { font-size: 15px; font-weight: 600; color: #e2e8f0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.rapp-nav__title { font-size: 15px; font-weight: 600; color: var(--rs-text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.rapp-nav__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
|
||||
.rapp-nav__btn { padding: 6px 14px; border-radius: 6px; border: none; background: #4f46e5; color: #fff; font-weight: 600; cursor: pointer; font-size: 13px; }
|
||||
.rapp-nav__btn:hover { background: #6366f1; }
|
||||
.rapp-nav__btn { padding: 6px 14px; border-radius: 6px; border: none; background: var(--rs-primary); color: #fff; font-weight: 600; cursor: pointer; font-size: 13px; }
|
||||
.rapp-nav__btn:hover { background: var(--rs-primary-hover); }
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
|
|
@ -180,13 +180,13 @@ export class FolkBookShelf extends HTMLElement {
|
|||
flex: 1;
|
||||
min-width: 200px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid #334155;
|
||||
border: 1px solid var(--rs-input-border);
|
||||
border-radius: 0.5rem;
|
||||
background: #1e293b;
|
||||
color: #f1f5f9;
|
||||
background: var(--rs-input-bg);
|
||||
color: var(--rs-input-text);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.search-input::placeholder { color: #64748b; }
|
||||
.search-input::placeholder { color: var(--rs-text-muted); }
|
||||
.search-input:focus { outline: none; border-color: #60a5fa; }
|
||||
|
||||
.tags {
|
||||
|
|
@ -198,28 +198,28 @@ export class FolkBookShelf extends HTMLElement {
|
|||
.tag {
|
||||
padding: 0.25rem 0.625rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #334155;
|
||||
background: #1e293b;
|
||||
color: #94a3b8;
|
||||
border: 1px solid var(--rs-border);
|
||||
background: var(--rs-bg-surface);
|
||||
color: var(--rs-text-secondary);
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.tag:hover { border-color: #60a5fa; color: #e2e8f0; }
|
||||
.tag:hover { border-color: #60a5fa; color: var(--rs-text-primary); }
|
||||
.tag.active { background: #1e3a5f; border-color: #60a5fa; color: #60a5fa; }
|
||||
|
||||
.upload-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
background: #2563eb;
|
||||
background: var(--rs-primary);
|
||||
color: #fff;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.upload-btn:hover { background: #1d4ed8; }
|
||||
.upload-btn:hover { background: var(--rs-primary-hover); }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
|
|
@ -232,8 +232,8 @@ export class FolkBookShelf extends HTMLElement {
|
|||
flex-direction: column;
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
background: #1e293b;
|
||||
border: 1px solid #334155;
|
||||
background: var(--rs-bg-surface);
|
||||
border: 1px solid var(--rs-border);
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s, border-color 0.15s;
|
||||
text-decoration: none;
|
||||
|
|
@ -289,7 +289,7 @@ export class FolkBookShelf extends HTMLElement {
|
|||
.book-title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: #e2e8f0;
|
||||
color: var(--rs-text-primary);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
@ -298,7 +298,7 @@ export class FolkBookShelf extends HTMLElement {
|
|||
|
||||
.book-author {
|
||||
font-size: 0.75rem;
|
||||
color: #94a3b8;
|
||||
color: var(--rs-text-secondary);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
@ -309,7 +309,7 @@ export class FolkBookShelf extends HTMLElement {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.7rem;
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted);
|
||||
margin-top: auto;
|
||||
padding-top: 0.375rem;
|
||||
}
|
||||
|
|
@ -317,9 +317,9 @@ export class FolkBookShelf extends HTMLElement {
|
|||
.empty {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted);
|
||||
}
|
||||
.empty h3 { margin: 0 0 0.5rem; color: #94a3b8; }
|
||||
.empty h3 { margin: 0 0 0.5rem; color: var(--rs-text-secondary); }
|
||||
|
||||
/* Upload modal */
|
||||
.modal-overlay {
|
||||
|
|
@ -334,8 +334,8 @@ export class FolkBookShelf extends HTMLElement {
|
|||
.modal-overlay[hidden] { display: none; }
|
||||
|
||||
.modal {
|
||||
background: #1e293b;
|
||||
border: 1px solid #334155;
|
||||
background: var(--rs-bg-surface);
|
||||
border: 1px solid var(--rs-border);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
width: 90%;
|
||||
|
|
@ -346,7 +346,7 @@ export class FolkBookShelf extends HTMLElement {
|
|||
|
||||
.modal h3 {
|
||||
margin: 0 0 1rem;
|
||||
color: #f1f5f9;
|
||||
color: var(--rs-text-primary);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
|
|
@ -354,7 +354,7 @@ export class FolkBookShelf extends HTMLElement {
|
|||
display: block;
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: 0.8rem;
|
||||
color: #94a3b8;
|
||||
color: var(--rs-text-secondary);
|
||||
}
|
||||
|
||||
.modal input,
|
||||
|
|
@ -362,10 +362,10 @@ export class FolkBookShelf extends HTMLElement {
|
|||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
border: 1px solid #334155;
|
||||
border: 1px solid var(--rs-input-border);
|
||||
border-radius: 0.5rem;
|
||||
background: #0f172a;
|
||||
color: #f1f5f9;
|
||||
background: var(--rs-input-bg);
|
||||
color: var(--rs-input-text);
|
||||
font-size: 0.875rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -382,41 +382,41 @@ export class FolkBookShelf extends HTMLElement {
|
|||
|
||||
.btn-cancel {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #334155;
|
||||
border: 1px solid var(--rs-border);
|
||||
border-radius: 0.5rem;
|
||||
background: transparent;
|
||||
color: #94a3b8;
|
||||
color: var(--rs-text-secondary);
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-cancel:hover { border-color: #64748b; }
|
||||
.btn-cancel:hover { border-color: var(--rs-text-muted); }
|
||||
|
||||
.btn-submit {
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
background: #2563eb;
|
||||
background: var(--rs-primary);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
}
|
||||
.btn-submit:hover { background: #1d4ed8; }
|
||||
.btn-submit:hover { background: var(--rs-primary-hover); }
|
||||
.btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
.drop-zone {
|
||||
border: 2px dashed #334155;
|
||||
border: 2px dashed var(--rs-border);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted);
|
||||
margin-bottom: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.drop-zone:hover, .drop-zone.dragover { border-color: #60a5fa; color: #94a3b8; }
|
||||
.drop-zone:hover, .drop-zone.dragover { border-color: #60a5fa; color: var(--rs-text-secondary); }
|
||||
.drop-zone .selected { color: #60a5fa; font-weight: 500; }
|
||||
|
||||
.error-msg {
|
||||
color: #f87171;
|
||||
color: var(--rs-error);
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -631,25 +631,25 @@ class FolkCartShop extends HTMLElement {
|
|||
:host { display: block; padding: 1.5rem; }
|
||||
* { box-sizing: border-box; }
|
||||
.rapp-nav { display: flex; gap: 8px; align-items: center; margin-bottom: 1rem; min-height: 36px; flex-wrap: wrap; }
|
||||
.rapp-nav__title { font-size: 15px; font-weight: 600; flex: 1; color: #e2e8f0; }
|
||||
.rapp-nav__title { font-size: 15px; font-weight: 600; flex: 1; color: var(--rs-text-primary); }
|
||||
.tabs { display: flex; gap: 0.5rem; }
|
||||
.tab { padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid #334155; background: #1e293b; color: #94a3b8; cursor: pointer; font-size: 0.875rem; }
|
||||
.tab:hover { border-color: #475569; color: #f1f5f9; }
|
||||
.tab.active { background: #4f46e5; border-color: #6366f1; color: #fff; }
|
||||
.tab { padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--rs-border); background: var(--rs-bg-surface); color: var(--rs-text-secondary); cursor: pointer; font-size: 0.875rem; }
|
||||
.tab:hover { border-color: var(--rs-border-strong); color: var(--rs-text-primary); }
|
||||
.tab.active { background: var(--rs-primary-hover); border-color: var(--rs-primary); color: #fff; }
|
||||
|
||||
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
|
||||
.card { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 1.25rem; }
|
||||
.card:hover { border-color: #475569; }
|
||||
.card { background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 12px; padding: 1.25rem; }
|
||||
.card:hover { border-color: var(--rs-border-strong); }
|
||||
.card-clickable { cursor: pointer; transition: border-color 0.15s, transform 0.1s; }
|
||||
.card-clickable:hover { border-color: #6366f1; transform: translateY(-1px); }
|
||||
.card-title { color: #f1f5f9; font-weight: 600; font-size: 1rem; margin: 0 0 0.5rem; }
|
||||
.card-meta { color: #94a3b8; font-size: 0.8125rem; margin-bottom: 0.5rem; }
|
||||
.section-title { color: #f1f5f9; font-weight: 700; font-size: 1.25rem; margin: 0 0 0.5rem; }
|
||||
.card-clickable:hover { border-color: var(--rs-primary); transform: translateY(-1px); }
|
||||
.card-title { color: var(--rs-text-primary); font-weight: 600; font-size: 1rem; margin: 0 0 0.5rem; }
|
||||
.card-meta { color: var(--rs-text-secondary); font-size: 0.8125rem; margin-bottom: 0.5rem; }
|
||||
.section-title { color: var(--rs-text-primary); font-weight: 700; font-size: 1.25rem; margin: 0 0 0.5rem; }
|
||||
|
||||
.tag { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 4px; font-size: 0.6875rem; margin-right: 0.25rem; }
|
||||
.tag-type { background: rgba(99,102,241,0.1); color: #818cf8; }
|
||||
.tag-type { background: rgba(99,102,241,0.1); color: var(--rs-primary-hover); }
|
||||
.tag-cap { background: rgba(34,197,94,0.1); color: #4ade80; }
|
||||
.dims { color: #64748b; font-size: 0.75rem; margin-top: 0.5rem; }
|
||||
.dims { color: var(--rs-text-muted); font-size: 0.75rem; margin-top: 0.5rem; }
|
||||
|
||||
.status { padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 500; white-space: nowrap; }
|
||||
.status-pending, .status-open { background: rgba(251,191,36,0.15); color: #fbbf24; }
|
||||
|
|
@ -659,23 +659,23 @@ class FolkCartShop extends HTMLElement {
|
|||
.status-cancelled, .status-closed { background: rgba(239,68,68,0.15); color: #f87171; }
|
||||
.status-shipped { background: rgba(56,189,248,0.15); color: #38bdf8; }
|
||||
|
||||
.price { color: #f1f5f9; font-weight: 600; font-size: 1rem; margin-top: 0.5rem; }
|
||||
.price { color: var(--rs-text-primary); font-weight: 600; font-size: 1rem; margin-top: 0.5rem; }
|
||||
.text-green { color: #4ade80; }
|
||||
|
||||
.progress-bar { background: #334155; border-radius: 999px; height: 8px; overflow: hidden; }
|
||||
.progress-fill { background: linear-gradient(90deg, #6366f1, #8b5cf6); height: 100%; border-radius: 999px; transition: width 0.3s; }
|
||||
.progress-bar { background: var(--rs-bg-surface-raised); border-radius: 999px; height: 8px; overflow: hidden; }
|
||||
.progress-fill { background: linear-gradient(90deg, var(--rs-primary), #8b5cf6); height: 100%; border-radius: 999px; transition: width 0.3s; }
|
||||
|
||||
.btn { padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid #334155; background: #1e293b; color: #e2e8f0; cursor: pointer; font-size: 0.875rem; }
|
||||
.btn:hover { border-color: #475569; }
|
||||
.btn-primary { background: #4f46e5; border-color: #6366f1; color: #fff; }
|
||||
.btn { padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--rs-border); background: var(--rs-bg-surface); color: var(--rs-text-primary); cursor: pointer; font-size: 0.875rem; }
|
||||
.btn:hover { border-color: var(--rs-border-strong); }
|
||||
.btn-primary { background: var(--rs-primary-hover); border-color: var(--rs-primary); color: #fff; }
|
||||
.btn-primary:hover { background: #4338ca; }
|
||||
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
|
||||
.btn-icon { background: none; border: none; color: #64748b; cursor: pointer; padding: 4px; font-size: 0.875rem; border-radius: 4px; }
|
||||
.btn-icon { background: none; border: none; color: var(--rs-text-muted); cursor: pointer; padding: 4px; font-size: 0.875rem; border-radius: 4px; }
|
||||
.btn-icon:hover { color: #f87171; background: rgba(239,68,68,0.1); }
|
||||
|
||||
.input { padding: 0.5rem 0.75rem; border-radius: 8px; border: 1px solid #334155; background: #0f172a; color: #e2e8f0; font-size: 0.875rem; }
|
||||
.input:focus { outline: none; border-color: #6366f1; }
|
||||
.input { padding: 0.5rem 0.75rem; border-radius: 8px; border: 1px solid var(--rs-input-border); background: var(--rs-input-bg); color: var(--rs-input-text); font-size: 0.875rem; }
|
||||
.input:focus { outline: none; border-color: var(--rs-primary); }
|
||||
.input-sm { max-width: 160px; }
|
||||
|
||||
.new-cart-form, .contribute-form { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; flex-wrap: wrap; }
|
||||
|
|
@ -686,35 +686,35 @@ class FolkCartShop extends HTMLElement {
|
|||
@media (max-width: 768px) { .detail-layout { grid-template-columns: 1fr; } }
|
||||
|
||||
.vendor-group { margin-bottom: 1rem; }
|
||||
.vendor-header { color: #94a3b8; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.5rem 0; border-bottom: 1px solid #1e293b; margin-bottom: 0.5rem; }
|
||||
.item-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid #1e293b; }
|
||||
.item-thumb { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; background: #334155; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
|
||||
.item-thumb-placeholder { width: 40px; height: 40px; border-radius: 6px; background: #334155; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
|
||||
.vendor-header { color: var(--rs-text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.5rem 0; border-bottom: 1px solid var(--rs-border-subtle); margin-bottom: 0.5rem; }
|
||||
.item-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rs-border-subtle); }
|
||||
.item-thumb { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; background: var(--rs-bg-surface-raised); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
|
||||
.item-thumb-placeholder { width: 40px; height: 40px; border-radius: 6px; background: var(--rs-bg-surface-raised); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
|
||||
.item-info { flex: 1; min-width: 0; }
|
||||
.item-name { color: #e2e8f0; font-size: 0.875rem; text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.item-name:hover { color: #818cf8; }
|
||||
.item-meta { color: #64748b; font-size: 0.75rem; }
|
||||
.item-name { color: var(--rs-text-primary); font-size: 0.875rem; text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.item-name:hover { color: var(--rs-primary-hover); }
|
||||
.item-meta { color: var(--rs-text-muted); font-size: 0.75rem; }
|
||||
|
||||
.summary-row { display: flex; justify-content: space-between; padding: 0.375rem 0; color: #cbd5e1; font-size: 0.875rem; }
|
||||
.summary-row { display: flex; justify-content: space-between; padding: 0.375rem 0; color: var(--rs-text-primary); font-size: 0.875rem; }
|
||||
|
||||
.contrib-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0; font-size: 0.8125rem; }
|
||||
.contrib-name { color: #e2e8f0; flex: 1; }
|
||||
.contrib-name { color: var(--rs-text-primary); flex: 1; }
|
||||
.contrib-amount { color: #4ade80; font-weight: 600; }
|
||||
|
||||
.order-card { display: flex; justify-content: space-between; align-items: center; }
|
||||
.order-info { flex: 1; }
|
||||
.order-price { color: #f1f5f9; font-weight: 600; font-size: 1.125rem; }
|
||||
.order-price { color: var(--rs-text-primary); font-weight: 600; font-size: 1.125rem; }
|
||||
|
||||
.ext-banner { position: relative; background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.25); border-radius: 12px; padding: 1rem 2.5rem 1rem 1.25rem; margin-bottom: 1rem; }
|
||||
.ext-banner-dismiss { position: absolute; top: 0.5rem; right: 0.75rem; background: none; border: none; color: #94a3b8; font-size: 1.25rem; cursor: pointer; padding: 0 4px; line-height: 1; }
|
||||
.ext-banner-dismiss:hover { color: #e2e8f0; }
|
||||
.ext-banner-dismiss { position: absolute; top: 0.5rem; right: 0.75rem; background: none; border: none; color: var(--rs-text-secondary); font-size: 1.25rem; cursor: pointer; padding: 0 4px; line-height: 1; }
|
||||
.ext-banner-dismiss:hover { color: var(--rs-text-primary); }
|
||||
.ext-banner-title { color: #a5b4fc; font-weight: 600; font-size: 0.9375rem; margin-bottom: 0.25rem; }
|
||||
.ext-banner-text { color: #94a3b8; font-size: 0.8125rem; margin-bottom: 0.75rem; line-height: 1.4; }
|
||||
.ext-banner-cta { display: inline-block; padding: 0.375rem 1rem; border-radius: 6px; background: #4f46e5; color: #fff; font-size: 0.8125rem; font-weight: 600; text-decoration: none; }
|
||||
.ext-banner-text { color: var(--rs-text-secondary); font-size: 0.8125rem; margin-bottom: 0.75rem; line-height: 1.4; }
|
||||
.ext-banner-cta { display: inline-block; padding: 0.375rem 1rem; border-radius: 6px; background: var(--rs-primary-hover); color: #fff; font-size: 0.8125rem; font-weight: 600; text-decoration: none; }
|
||||
.ext-banner-cta:hover { background: #4338ca; }
|
||||
|
||||
.empty { text-align: center; padding: 3rem; color: #64748b; font-size: 0.875rem; }
|
||||
.loading { text-align: center; padding: 3rem; color: #94a3b8; }
|
||||
.empty { text-align: center; padding: 3rem; color: var(--rs-text-muted); font-size: 0.875rem; }
|
||||
.loading { text-align: center; padding: 3rem; color: var(--rs-text-secondary); }
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.grid { grid-template-columns: 1fr; }
|
||||
|
|
|
|||
|
|
@ -77,22 +77,22 @@ class FolkChoicesDashboard extends HTMLElement {
|
|||
<style>
|
||||
:host { display: block; padding: 1.5rem; }
|
||||
.rapp-nav { display: flex; gap: 8px; align-items: center; margin-bottom: 1rem; min-height: 36px; }
|
||||
.rapp-nav__title { font-size: 15px; font-weight: 600; flex: 1; color: #e2e8f0; }
|
||||
.rapp-nav__title { font-size: 15px; font-weight: 600; flex: 1; color: var(--rs-text-primary); }
|
||||
.create-btns { display: flex; gap: 0.5rem; }
|
||||
.create-btn { padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid #334155; background: #1e293b; color: #94a3b8; cursor: pointer; font-size: 0.875rem; text-decoration: none; }
|
||||
.create-btn:hover { border-color: #6366f1; color: #f1f5f9; }
|
||||
.create-btn { padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--rs-border); background: var(--rs-bg-surface); color: var(--rs-text-secondary); cursor: pointer; font-size: 0.875rem; text-decoration: none; }
|
||||
.create-btn:hover { border-color: var(--rs-primary); color: var(--rs-text-primary); }
|
||||
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
|
||||
.card { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 1.25rem; cursor: pointer; text-decoration: none; display: block; }
|
||||
.card:hover { border-color: #6366f1; }
|
||||
.card { background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 12px; padding: 1.25rem; cursor: pointer; text-decoration: none; display: block; }
|
||||
.card:hover { border-color: var(--rs-primary); }
|
||||
.card-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
|
||||
.card-title { color: #f1f5f9; font-weight: 600; font-size: 1rem; margin: 0 0 0.25rem; }
|
||||
.card-type { color: #818cf8; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
|
||||
.card-meta { color: #94a3b8; font-size: 0.8125rem; }
|
||||
.card-title { color: var(--rs-text-primary); font-weight: 600; font-size: 1rem; margin: 0 0 0.25rem; }
|
||||
.card-type { color: var(--rs-primary-hover); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
|
||||
.card-meta { color: var(--rs-text-secondary); font-size: 0.8125rem; }
|
||||
.stat { display: inline-block; margin-right: 1rem; }
|
||||
.empty { text-align: center; padding: 3rem; color: #64748b; }
|
||||
.empty { text-align: center; padding: 3rem; color: var(--rs-text-muted); }
|
||||
.empty-icon { font-size: 3rem; margin-bottom: 1rem; }
|
||||
.empty p { margin: 0.5rem 0; font-size: 0.875rem; }
|
||||
.loading { text-align: center; padding: 3rem; color: #94a3b8; }
|
||||
.loading { text-align: center; padding: 3rem; color: var(--rs-text-secondary); }
|
||||
.info { background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.2); border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem; color: #a5b4fc; font-size: 0.8125rem; }
|
||||
</style>
|
||||
|
||||
|
|
@ -193,55 +193,55 @@ class FolkChoicesDashboard extends HTMLElement {
|
|||
<style>
|
||||
:host { display: block; padding: 1.5rem; }
|
||||
.rapp-nav { display: flex; gap: 8px; align-items: center; margin-bottom: 1rem; min-height: 36px; }
|
||||
.rapp-nav__title { font-size: 15px; font-weight: 600; flex: 1; color: #e2e8f0; }
|
||||
.demo-badge { font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; background: #6366f1; color: #fff; font-weight: 500; }
|
||||
.rapp-nav__title { font-size: 15px; font-weight: 600; flex: 1; color: var(--rs-text-primary); }
|
||||
.demo-badge { font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; background: var(--rs-primary); color: #fff; font-weight: 500; }
|
||||
|
||||
/* Tabs */
|
||||
.demo-tabs { display: flex; gap: 4px; margin-bottom: 1.5rem; background: #0f172a; border-radius: 10px; padding: 4px; }
|
||||
.demo-tab { flex: 1; text-align: center; padding: 0.6rem 0.75rem; border-radius: 8px; border: none; background: transparent; color: #94a3b8; cursor: pointer; font-size: 0.875rem; font-family: inherit; transition: all 0.15s; }
|
||||
.demo-tab:hover { color: #e2e8f0; background: #1e293b; }
|
||||
.demo-tab.active { background: #1e293b; color: #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
|
||||
.demo-tabs { display: flex; gap: 4px; margin-bottom: 1.5rem; background: var(--rs-bg-page); border-radius: 10px; padding: 4px; }
|
||||
.demo-tab { flex: 1; text-align: center; padding: 0.6rem 0.75rem; border-radius: 8px; border: none; background: transparent; color: var(--rs-text-secondary); cursor: pointer; font-size: 0.875rem; font-family: inherit; transition: all 0.15s; }
|
||||
.demo-tab:hover { color: var(--rs-text-primary); background: var(--rs-bg-surface); }
|
||||
.demo-tab.active { background: var(--rs-bg-surface); color: var(--rs-text-primary); box-shadow: var(--rs-shadow-sm); }
|
||||
.demo-tab-icon { margin-right: 6px; }
|
||||
|
||||
/* Spider chart */
|
||||
.spider-wrap { display: flex; flex-direction: column; align-items: center; }
|
||||
.spider-svg { width: 100%; max-width: 420px; }
|
||||
.spider-legend { display: flex; gap: 1.25rem; margin-top: 1rem; justify-content: center; flex-wrap: wrap; }
|
||||
.spider-legend-item { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px 10px; border-radius: 6px; transition: background 0.15s; font-size: 0.875rem; color: #e2e8f0; }
|
||||
.spider-legend-item:hover { background: #1e293b; }
|
||||
.spider-legend-item { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px 10px; border-radius: 6px; transition: background 0.15s; font-size: 0.875rem; color: var(--rs-text-primary); }
|
||||
.spider-legend-item:hover { background: var(--rs-bg-hover); }
|
||||
.spider-legend-dot { width: 10px; height: 10px; border-radius: 50%; }
|
||||
.spider-axis-label { fill: #94a3b8; font-size: 13px; font-family: inherit; }
|
||||
.spider-axis-label { fill: var(--rs-text-secondary); font-size: 13px; font-family: inherit; }
|
||||
|
||||
/* Ranking */
|
||||
.rank-list { list-style: none; padding: 0; margin: 0; max-width: 440px; margin-inline: auto; }
|
||||
.rank-item { display: flex; align-items: center; gap: 12px; padding: 0.75rem 1rem; margin-bottom: 6px; background: #1e293b; border: 1px solid #334155; border-radius: 10px; cursor: grab; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; user-select: none; }
|
||||
.rank-item { display: flex; align-items: center; gap: 12px; padding: 0.75rem 1rem; margin-bottom: 6px; background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 10px; cursor: grab; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; user-select: none; }
|
||||
.rank-item:active { cursor: grabbing; }
|
||||
.rank-item.dragging { opacity: 0.4; transform: scale(0.97); }
|
||||
.rank-item.drag-over { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,0.3); }
|
||||
.rank-pos { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; color: #0f172a; flex-shrink: 0; }
|
||||
.rank-item.drag-over { border-color: var(--rs-primary); box-shadow: 0 0 0 2px rgba(99,102,241,0.3); }
|
||||
.rank-pos { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; color: var(--rs-bg-page); flex-shrink: 0; }
|
||||
.rank-pos.gold { background: #f59e0b; }
|
||||
.rank-pos.silver { background: #94a3b8; }
|
||||
.rank-pos.bronze { background: #cd7f32; }
|
||||
.rank-pos.plain { background: #334155; color: #94a3b8; }
|
||||
.rank-pos.plain { background: var(--rs-bg-surface-raised); color: var(--rs-text-secondary); }
|
||||
.rank-emoji { font-size: 1.5rem; flex-shrink: 0; }
|
||||
.rank-name { flex: 1; color: #f1f5f9; font-weight: 600; font-size: 1rem; }
|
||||
.rank-grip { color: #475569; font-size: 1.1rem; flex-shrink: 0; letter-spacing: 2px; }
|
||||
.rank-name { flex: 1; color: var(--rs-text-primary); font-weight: 600; font-size: 1rem; }
|
||||
.rank-grip { color: var(--rs-text-secondary); font-size: 1.1rem; flex-shrink: 0; letter-spacing: 2px; }
|
||||
|
||||
/* Voting */
|
||||
.vote-wrap { max-width: 480px; margin-inline: auto; }
|
||||
.vote-option { display: flex; align-items: center; gap: 12px; padding: 0.75rem 1rem; margin-bottom: 8px; background: #1e293b; border: 1px solid #334155; border-radius: 10px; cursor: pointer; position: relative; overflow: hidden; transition: border-color 0.15s; }
|
||||
.vote-option:hover { border-color: #6366f1; }
|
||||
.vote-option.voted { border-color: #6366f1; }
|
||||
.vote-option { display: flex; align-items: center; gap: 12px; padding: 0.75rem 1rem; margin-bottom: 8px; background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 10px; cursor: pointer; position: relative; overflow: hidden; transition: border-color 0.15s; }
|
||||
.vote-option:hover { border-color: var(--rs-primary); }
|
||||
.vote-option.voted { border-color: var(--rs-primary); }
|
||||
.vote-fill { position: absolute; left: 0; top: 0; bottom: 0; opacity: 0.12; transition: width 0.7s ease-out; pointer-events: none; }
|
||||
.vote-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; position: relative; z-index: 1; }
|
||||
.vote-name { flex: 1; color: #f1f5f9; font-weight: 600; font-size: 1rem; position: relative; z-index: 1; }
|
||||
.vote-count { color: #94a3b8; font-weight: 400; font-size: 0.8rem; min-width: 24px; text-align: right; position: relative; z-index: 1; font-variant-numeric: tabular-nums; }
|
||||
.vote-name { flex: 1; color: var(--rs-text-primary); font-weight: 600; font-size: 1rem; position: relative; z-index: 1; }
|
||||
.vote-count { color: var(--rs-text-secondary); font-weight: 400; font-size: 0.8rem; min-width: 24px; text-align: right; position: relative; z-index: 1; font-variant-numeric: tabular-nums; }
|
||||
.vote-pct { font-weight: 600; font-size: 0.8rem; min-width: 40px; text-align: right; position: relative; z-index: 1; font-variant-numeric: tabular-nums; }
|
||||
.vote-badge { font-size: 0.625rem; padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,0.05); color: #94a3b8; margin-left: 6px; position: relative; z-index: 1; font-weight: 400; }
|
||||
.vote-badge { font-size: 0.625rem; padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,0.05); color: var(--rs-text-secondary); margin-left: 6px; position: relative; z-index: 1; font-weight: 400; }
|
||||
.vote-actions { display: flex; justify-content: center; margin-top: 1rem; }
|
||||
.vote-reset { padding: 0.5rem 1.25rem; border-radius: 8px; border: 1px solid #334155; background: #1e293b; color: #94a3b8; cursor: pointer; font-size: 0.875rem; font-family: inherit; transition: all 0.15s; }
|
||||
.vote-reset:hover { border-color: #ef4444; color: #fca5a5; }
|
||||
.vote-status { text-align: center; margin-bottom: 1rem; font-size: 0.8rem; color: #64748b; }
|
||||
.vote-reset { padding: 0.5rem 1.25rem; border-radius: 8px; border: 1px solid var(--rs-border); background: var(--rs-bg-surface); color: var(--rs-text-secondary); cursor: pointer; font-size: 0.875rem; font-family: inherit; transition: all 0.15s; }
|
||||
.vote-reset:hover { border-color: var(--rs-error); color: #fca5a5; }
|
||||
.vote-status { text-align: center; margin-bottom: 1rem; font-size: 0.8rem; color: var(--rs-text-muted); }
|
||||
</style>
|
||||
|
||||
<div class="rapp-nav">
|
||||
|
|
|
|||
|
|
@ -51,26 +51,26 @@ class FolkAnalyticsView extends HTMLElement {
|
|||
|
||||
this.shadow.innerHTML = `
|
||||
<style>
|
||||
:host { display: block; min-height: 60vh; font-family: system-ui, sans-serif; color: #e2e8f0; }
|
||||
:host { display: block; min-height: 60vh; font-family: system-ui, sans-serif; color: var(--rs-text-primary); }
|
||||
.container { max-width: 800px; margin: 0 auto; }
|
||||
.desc { color: #94a3b8; font-size: 14px; line-height: 1.6; max-width: 600px; margin-bottom: 1.5rem; }
|
||||
.desc { color: var(--rs-text-secondary); font-size: 14px; line-height: 1.6; max-width: 600px; margin-bottom: 1.5rem; }
|
||||
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
|
||||
.stat { text-align: center; background: rgba(15,23,42,0.5); border: 1px solid #1e293b; border-radius: 12px; padding: 1.25rem; }
|
||||
.stat { text-align: center; background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 12px; padding: 1.25rem; }
|
||||
.stat-value { font-size: 1.75rem; font-weight: 700; color: #22d3ee; }
|
||||
.stat-label { font-size: 0.75rem; color: #64748b; margin-top: 0.25rem; }
|
||||
.stat-label { font-size: 0.75rem; color: var(--rs-text-muted); margin-top: 0.25rem; }
|
||||
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
|
||||
.pillar { background: rgba(15,23,42,0.5); border: 1px solid #1e293b; border-radius: 12px; padding: 1.5rem; }
|
||||
.pillar { background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 12px; padding: 1.5rem; }
|
||||
.pillar-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; margin-bottom: 0.75rem; }
|
||||
.pillar-icon.zk { background: rgba(34,211,238,0.1); color: #22d3ee; }
|
||||
.pillar-icon.lf { background: rgba(129,140,248,0.1); color: #818cf8; }
|
||||
.pillar-icon.sh { background: rgba(52,211,153,0.1); color: #34d399; }
|
||||
.pillar h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; }
|
||||
.pillar p { font-size: 0.85rem; color: #94a3b8; line-height: 1.5; }
|
||||
.pillar p { font-size: 0.85rem; color: var(--rs-text-secondary); line-height: 1.5; }
|
||||
.apps-section { margin-bottom: 2rem; }
|
||||
.apps-title { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }
|
||||
.apps-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
|
||||
.app-chip { padding: 0.35rem 0.75rem; background: rgba(15,23,42,0.5); border: 1px solid #1e293b; border-radius: 20px; font-size: 0.8rem; color: #94a3b8; }
|
||||
.cta { padding: 1.5rem 0; border-top: 1px solid #1e293b; }
|
||||
.app-chip { padding: 0.35rem 0.75rem; background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 20px; font-size: 0.8rem; color: var(--rs-text-secondary); }
|
||||
.cta { padding: 1.5rem 0; border-top: 1px solid var(--rs-border); }
|
||||
.cta a { display: inline-block; padding: 0.6rem 1.5rem; background: #22d3ee; color: #0f172a; border-radius: 8px; font-weight: 600; text-decoration: none; font-size: 0.85rem; }
|
||||
.cta a:hover { opacity: 0.85; }
|
||||
@media (max-width: 768px) {
|
||||
|
|
|
|||
|
|
@ -240,8 +240,8 @@
|
|||
.flows-canvas-svg {
|
||||
width: 100%; height: 100%; display: block;
|
||||
cursor: grab;
|
||||
background-color: #f8fafc;
|
||||
background-image: radial-gradient(circle, #e2e8f0 1px, transparent 1px);
|
||||
background-color: var(--rs-canvas-bg);
|
||||
background-image: radial-gradient(circle, var(--rs-canvas-grid) 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
.flows-canvas-svg.panning { cursor: grabbing; }
|
||||
|
|
|
|||
|
|
@ -1762,15 +1762,15 @@ class FolkFlowsApp extends HTMLElement {
|
|||
|
||||
return `<g class="flow-node ${selected ? "selected" : ""}" data-node-id="${n.id}" transform="translate(${x},${y})">
|
||||
<rect class="node-bg" x="0" y="0" width="${w}" height="${h}" rx="8" fill="transparent" stroke="none"/>
|
||||
<rect class="faucet-pipe" x="0" y="${pipeY}" width="${w}" height="${pipeH}" rx="${pipeRx}" fill="url(#faucet-pipe-grad)" stroke="${selected ? "var(--rflows-selected)" : "#475569"}" stroke-width="${selected ? 2 : 1}"/>
|
||||
<rect class="faucet-pipe" x="0" y="${pipeY}" width="${w}" height="${pipeH}" rx="${pipeRx}" fill="url(#faucet-pipe-grad)" stroke="${selected ? "var(--rflows-selected)" : "var(--rs-text-secondary)"}" stroke-width="${selected ? 2 : 1}"/>
|
||||
<text x="${w / 2}" y="${pipeY + pipeH / 2 + 1}" text-anchor="middle" dominant-baseline="central" fill="white" font-size="11" font-weight="600" pointer-events="none">${this.esc(d.label)}</text>
|
||||
<circle class="faucet-valve" cx="${valveCx}" cy="${valveCy}" r="${valveR}" fill="${valveColor}" stroke="${selected ? "var(--rflows-selected)" : "#1e293b"}" stroke-width="${selected ? 2.5 : 1.5}" style="cursor:pointer"/>
|
||||
<circle class="faucet-valve" cx="${valveCx}" cy="${valveCy}" r="${valveR}" fill="${valveColor}" stroke="${selected ? "var(--rflows-selected)" : "var(--rs-bg-surface)"}" stroke-width="${selected ? 2.5 : 1.5}" style="cursor:pointer"/>
|
||||
<g transform="rotate(${handleAngle},${valveCx},${valveCy})">
|
||||
<rect class="faucet-handle" x="${valveCx - 3}" y="${valveCy - valveR - 6}" width="6" height="${valveR * 2 + 12}" rx="3" fill="#1e293b" opacity="0.7"/>
|
||||
<rect class="faucet-handle" x="${valveCx - 3}" y="${valveCy - valveR - 6}" width="6" height="${valveR * 2 + 12}" rx="3" fill="var(--rs-bg-surface)" opacity="0.7"/>
|
||||
</g>
|
||||
<path class="faucet-spigot" d="${spigotPath}" fill="url(#faucet-pipe-grad)" stroke="#475569" stroke-width="1"/>
|
||||
<path class="faucet-spigot" d="${spigotPath}" fill="url(#faucet-pipe-grad)" stroke="var(--rs-text-secondary)" stroke-width="1"/>
|
||||
<rect class="faucet-stream" x="${valveCx - streamW / 2}" y="${streamY}" width="${streamW}" height="${Math.max(streamH, 4)}" rx="3" fill="#10b981" opacity="${isConfigured ? 0.45 : 0.15}"/>
|
||||
<text x="${valveCx}" y="${amountY}" text-anchor="middle" fill="#e2e8f0" font-size="13" font-weight="700" font-family="ui-monospace,monospace" pointer-events="none">$${d.flowRate.toLocaleString()}/mo</text>
|
||||
<text x="${valveCx}" y="${amountY}" text-anchor="middle" fill="var(--rs-text-primary)" font-size="13" font-weight="700" font-family="ui-monospace,monospace" pointer-events="none">$${d.flowRate.toLocaleString()}/mo</text>
|
||||
${allocBar}
|
||||
${this.renderPortsSvg(n)}
|
||||
</g>`;
|
||||
|
|
@ -1925,14 +1925,14 @@ class FolkFlowsApp extends HTMLElement {
|
|||
<div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;position:relative;font-family:system-ui,-apple-system,sans-serif;pointer-events:none">
|
||||
<div style="position:absolute;top:0;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:500;color:#10b981;opacity:0.9">\u2193 ${inflowLabel}</div>
|
||||
<div style="position:absolute;top:38px;left:${pipeW + 10}px;right:${pipeW + 10}px;display:flex;align-items:center;justify-content:space-between">
|
||||
<span style="font-size:14px;font-weight:600;color:#1e293b">${this.esc(d.label)}</span>
|
||||
<span style="font-size:14px;font-weight:600;color:var(--rs-text-primary)">${this.esc(d.label)}</span>
|
||||
<span style="font-size:10px;font-weight:600;padding:2px 8px;border-radius:9999px;background:${statusBadgeBg};color:${statusBadgeColor}">${statusLabel}</span>
|
||||
</div>
|
||||
<div style="position:absolute;top:${satBarY + 18 + 28}px;left:${pipeW + 10}px;right:${pipeW + 10}px;text-align:center;font-size:10px;color:#94a3b8">${satLabel}</div>
|
||||
<div style="position:absolute;top:${satBarY + 18 + 28}px;left:${pipeW + 10}px;right:${pipeW + 10}px;text-align:center;font-size:10px;color:var(--rs-text-secondary)">${satLabel}</div>
|
||||
${criticalH > 20 ? `<div style="position:absolute;top:${zoneTop + overflowH + sufficientH + criticalH / 2 + 28 - 6}px;width:100%;text-align:center;font-size:10px;font-weight:600;color:#ef4444;opacity:0.5">CRITICAL</div>` : ""}
|
||||
${sufficientH > 20 ? `<div style="position:absolute;top:${zoneTop + overflowH + sufficientH / 2 + 28 - 6}px;width:100%;text-align:center;font-size:10px;font-weight:600;color:#f59e0b;opacity:0.5">SUFFICIENT</div>` : ""}
|
||||
${overflowH > 20 ? `<div style="position:absolute;top:${zoneTop + overflowH / 2 + 28 - 6}px;width:100%;text-align:center;font-size:10px;font-weight:600;color:#f59e0b;opacity:0.5">OVERFLOW</div>` : ""}
|
||||
<div class="funnel-value-text" data-node-id="${n.id}" style="position:absolute;bottom:${insetPx + 56}px;width:100%;text-align:center;font-size:13px;font-weight:500;color:#64748b">$${Math.floor(d.currentValue).toLocaleString()} / $${Math.floor(d.maxThreshold).toLocaleString()}</div>
|
||||
<div class="funnel-value-text" data-node-id="${n.id}" style="position:absolute;bottom:${insetPx + 56}px;width:100%;text-align:center;font-size:13px;font-weight:500;color:var(--rs-text-muted)">$${Math.floor(d.currentValue).toLocaleString()} / $${Math.floor(d.maxThreshold).toLocaleString()}</div>
|
||||
<div style="position:absolute;bottom:10px;width:100%;text-align:center;font-size:12px;font-weight:600;color:#34d399">${this.formatDollar(outflow)}/mo \u25BE</div>
|
||||
${isOverflow ? `<div style="position:absolute;top:${pipeY + pipeH / 2 + 28 - 6}px;left:0;font-size:11px;font-weight:500;color:#6ee7b7;opacity:0.8">${overflowLabel}</div>
|
||||
<div style="position:absolute;top:${pipeY + pipeH / 2 + 28 - 6}px;right:0;font-size:11px;font-weight:500;color:#6ee7b7;opacity:0.8">${overflowLabel}</div>` : ""}
|
||||
|
|
@ -1957,27 +1957,27 @@ class FolkFlowsApp extends HTMLElement {
|
|||
const unlockedCount = d.phases.filter((p) => d.fundingReceived >= p.fundingThreshold).length;
|
||||
const phaseSegs = d.phases.map((p, i) => {
|
||||
const unlocked = d.fundingReceived >= p.fundingThreshold;
|
||||
return `<div style="flex:1;height:4px;border-radius:2px;background:${unlocked ? "#10b981" : "#e2e8f0"}"></div>`;
|
||||
return `<div style="flex:1;height:4px;border-radius:2px;background:${unlocked ? "#10b981" : "var(--rs-border)"}"></div>`;
|
||||
}).join("");
|
||||
phaseHtml = `<div style="display:flex;gap:2px;margin:6px 0">${phaseSegs}</div>
|
||||
<div style="font-size:10px;color:#94a3b8;text-align:center">${unlockedCount}/${d.phases.length} phases unlocked</div>`;
|
||||
<div style="font-size:10px;color:var(--rs-text-secondary);text-align:center">${unlockedCount}/${d.phases.length} phases unlocked</div>`;
|
||||
}
|
||||
|
||||
const dollarLabel = `${this.formatDollar(d.fundingReceived)} / ${this.formatDollar(d.fundingTarget)}`;
|
||||
|
||||
return `<g class="flow-node ${selected ? "selected" : ""}" data-node-id="${n.id}" transform="translate(${x},${y})">
|
||||
<rect class="node-bg" x="0" y="0" width="${w}" height="${h}" rx="12" fill="white" stroke="${selected ? "var(--rflows-selected)" : statusColor}" stroke-width="${selected ? 3 : 2}"/>
|
||||
<rect class="node-bg" x="0" y="0" width="${w}" height="${h}" rx="12" fill="var(--rs-bg-surface)" stroke="${selected ? "var(--rflows-selected)" : statusColor}" stroke-width="${selected ? 3 : 2}"/>
|
||||
<foreignObject x="0" y="0" width="${w}" height="${h}">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" class="node-card outcome-card ${selected ? "selected" : ""}">
|
||||
<div class="card-header" style="background:linear-gradient(to right,#fdf2f8,#faf5ff);padding:8px 12px;border-bottom:1px solid #e2e8f0">
|
||||
<div class="card-header" style="background:var(--rs-bg-surface-raised);padding:8px 12px;border-bottom:1px solid var(--rs-border)">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between">
|
||||
<span style="font-size:13px;font-weight:600;color:#1e293b">${this.esc(d.label)}</span>
|
||||
<span style="font-size:13px;font-weight:600;color:var(--rs-text-primary)">${this.esc(d.label)}</span>
|
||||
<span style="font-size:10px;font-weight:600;padding:2px 8px;border-radius:9999px;background:${statusColor}20;color:${statusColor}">${statusLabel}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:8px 12px">
|
||||
<div style="font-size:11px;color:#64748b;margin-bottom:4px">${Math.round(fillPct * 100)}% funded — ${dollarLabel}</div>
|
||||
<div style="height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden">
|
||||
<div style="font-size:11px;color:var(--rs-text-muted);margin-bottom:4px">${Math.round(fillPct * 100)}% funded — ${dollarLabel}</div>
|
||||
<div style="height:6px;background:var(--rs-border);border-radius:3px;overflow:hidden">
|
||||
<div style="width:${fillPct * 100}%;height:100%;background:${statusColor};border-radius:3px;transition:width 0.3s"></div>
|
||||
</div>
|
||||
${phaseHtml}
|
||||
|
|
@ -3601,7 +3601,7 @@ class FolkFlowsApp extends HTMLElement {
|
|||
const detailEl = modal.querySelector(".spm-method-detail") as HTMLElement;
|
||||
if (!detailEl) return;
|
||||
if (sd.sourceType === "card") {
|
||||
detailEl.innerHTML = `<button class="spm-action-btn" data-spm-action="fund-card" style="width:100%;padding:10px;border:none;border-radius:8px;background:#3b82f6;color:white;font-weight:600;cursor:pointer;margin-top:8px">Fund with Card</button>`;
|
||||
detailEl.innerHTML = `<button class="spm-action-btn" data-spm-action="fund-card" style="width:100%;padding:10px;border:none;border-radius:8px;background:var(--rs-primary);color:white;font-weight:600;cursor:pointer;margin-top:8px">Fund with Card</button>`;
|
||||
} else if (sd.sourceType === "metamask") {
|
||||
const addr = sd.walletAddress ? `<div style="margin-top:8px;font-size:12px;color:var(--rs-text-muted, #94a3b8);word-break:break-all">Connected: ${sd.walletAddress}</div>` : "";
|
||||
detailEl.innerHTML = `<button class="spm-action-btn" data-spm-action="connect-metamask" style="width:100%;padding:10px;border:none;border-radius:8px;background:#f6851b;color:white;font-weight:600;cursor:pointer;margin-top:8px">${sd.walletAddress ? "Reconnect MetaMask" : "Connect MetaMask"}</button>${addr}`;
|
||||
|
|
@ -3673,7 +3673,7 @@ class FolkFlowsApp extends HTMLElement {
|
|||
<div class="spm-method-detail"></div>
|
||||
${allocHtml}
|
||||
<div style="display:flex;gap:8px;margin-top:20px;align-items:center">
|
||||
<button class="spm-delete-btn" style="padding:8px 14px;border:1px solid #ef4444;border-radius:8px;background:none;color:#ef4444;cursor:pointer;font-size:13px">Delete</button>
|
||||
<button class="spm-delete-btn" style="padding:8px 14px;border:1px solid var(--rs-error);border-radius:8px;background:none;color:var(--rs-error);cursor:pointer;font-size:13px">Delete</button>
|
||||
<div style="flex:1"></div>
|
||||
<button class="spm-close-btn" style="padding:10px 20px;border:none;border-radius:8px;background:var(--rs-primary, #10b981);color:white;font-weight:600;cursor:pointer;font-size:14px">Save & Close</button>
|
||||
</div>
|
||||
|
|
@ -3772,7 +3772,7 @@ class FolkFlowsApp extends HTMLElement {
|
|||
Check your email to claim your funds via EncryptID.<br>
|
||||
No wallet keys or seed phrases needed.
|
||||
</p>
|
||||
<div style="background:rgba(255,255,255,0.05);border-radius:8px;padding:12px 16px;font-size:13px;color:var(--rs-text-secondary)">
|
||||
<div style="background:var(--rs-bg-hover);border-radius:8px;padding:12px 16px;font-size:13px;color:var(--rs-text-secondary)">
|
||||
📧 A claim link has been sent to your email
|
||||
</div>
|
||||
<button id="onramp-done" style="margin-top:20px;padding:12px 32px;background:linear-gradient(90deg,#00d4ff,#7c3aed);color:#fff;border:none;border-radius:8px;font-weight:600;font-size:15px;cursor:pointer;width:100%">Done</button>
|
||||
|
|
|
|||
|
|
@ -218,16 +218,16 @@ class FolkForumDashboard extends HTMLElement {
|
|||
|
||||
private statusBadge(status: string): string {
|
||||
const colors: Record<string, string> = {
|
||||
pending: "#ffa726",
|
||||
provisioning: "#42a5f5",
|
||||
installing: "#42a5f5",
|
||||
configuring: "#42a5f5",
|
||||
active: "#66bb6a",
|
||||
error: "#ef5350",
|
||||
destroying: "#ffa726",
|
||||
destroyed: "#888",
|
||||
pending: "#fbbf24",
|
||||
provisioning: "#4f46e5",
|
||||
installing: "#4f46e5",
|
||||
configuring: "#4f46e5",
|
||||
active: "#22c55e",
|
||||
error: "#ef4444",
|
||||
destroying: "#fbbf24",
|
||||
destroyed: "#64748b",
|
||||
};
|
||||
const color = colors[status] || "#888";
|
||||
const color = colors[status] || "#64748b";
|
||||
const pulse = ["provisioning", "installing", "configuring"].includes(status)
|
||||
? "animation: pulse 1.5s ease-in-out infinite;"
|
||||
: "";
|
||||
|
|
@ -244,68 +244,68 @@ class FolkForumDashboard extends HTMLElement {
|
|||
private render() {
|
||||
this.shadow.innerHTML = `
|
||||
<style>
|
||||
:host { display: block; font-family: system-ui, -apple-system, sans-serif; color: #e0e0e0; }
|
||||
:host { display: block; font-family: system-ui, -apple-system, sans-serif; color: var(--rs-text-primary); }
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
|
||||
|
||||
.rapp-nav { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; min-height: 36px; }
|
||||
.rapp-nav__back { padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); background: transparent; color: #94a3b8; cursor: pointer; font-size: 13px; }
|
||||
.rapp-nav__back:hover { color: #e2e8f0; border-color: rgba(255,255,255,0.2); }
|
||||
.rapp-nav__title { font-size: 15px; font-weight: 600; flex: 1; color: #e2e8f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.rapp-nav__btn { padding: 6px 14px; border-radius: 6px; border: none; background: #4f46e5; color: #fff; font-weight: 600; cursor: pointer; font-size: 13px; }
|
||||
.rapp-nav__btn:hover { background: #6366f1; }
|
||||
.rapp-nav__back { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--rs-border); background: transparent; color: var(--rs-text-secondary); cursor: pointer; font-size: 13px; }
|
||||
.rapp-nav__back:hover { color: var(--rs-text-primary); border-color: var(--rs-border-strong); }
|
||||
.rapp-nav__title { font-size: 15px; font-weight: 600; flex: 1; color: var(--rs-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.rapp-nav__btn { padding: 6px 14px; border-radius: 6px; border: none; background: var(--rs-primary); color: #fff; font-weight: 600; cursor: pointer; font-size: 13px; }
|
||||
.rapp-nav__btn:hover { background: var(--rs-primary-hover); }
|
||||
button {
|
||||
padding: 6px 14px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1);
|
||||
background: transparent; color: #94a3b8; cursor: pointer; font-size: 13px;
|
||||
padding: 6px 14px; border-radius: 6px; border: 1px solid var(--rs-border);
|
||||
background: transparent; color: var(--rs-text-secondary); cursor: pointer; font-size: 13px;
|
||||
}
|
||||
button:hover { color: #e2e8f0; border-color: rgba(255,255,255,0.2); }
|
||||
button.danger { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.3); color: #ef4444; }
|
||||
button:hover { color: var(--rs-text-primary); border-color: var(--rs-border-strong); }
|
||||
button.danger { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.3); color: var(--rs-error); }
|
||||
button.danger:hover { background: rgba(239,68,68,0.25); }
|
||||
|
||||
input, select {
|
||||
background: #2a2a3e; border: 1px solid #444; color: #e0e0e0;
|
||||
background: var(--rs-input-bg); border: 1px solid var(--rs-input-border); color: var(--rs-input-text);
|
||||
padding: 8px 12px; border-radius: 4px; font-size: 13px; width: 100%;
|
||||
}
|
||||
label { display: block; font-size: 12px; color: #aaa; margin-bottom: 4px; }
|
||||
label { display: block; font-size: 12px; color: var(--rs-text-muted); margin-bottom: 4px; }
|
||||
.form-group { margin-bottom: 14px; }
|
||||
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||||
|
||||
.instance-list { display: flex; flex-direction: column; gap: 10px; }
|
||||
.instance-card {
|
||||
background: #1e1e2e; border: 1px solid #333; border-radius: 8px;
|
||||
background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 8px;
|
||||
padding: 16px; cursor: pointer; transition: border-color 0.2s;
|
||||
}
|
||||
.instance-card:hover { border-color: #64b5f6; }
|
||||
.instance-card:hover { border-color: var(--rs-primary); }
|
||||
.instance-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.instance-name { font-size: 16px; font-weight: 600; }
|
||||
.instance-meta { font-size: 12px; color: #888; }
|
||||
.instance-meta { font-size: 12px; color: var(--rs-text-muted); }
|
||||
|
||||
.detail-panel { background: #1e1e2e; border: 1px solid #333; border-radius: 8px; padding: 20px; }
|
||||
.detail-panel { background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 8px; padding: 20px; }
|
||||
.detail-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 16px; }
|
||||
.detail-title { font-size: 20px; font-weight: 600; }
|
||||
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
|
||||
.detail-item label { font-size: 11px; color: #888; text-transform: uppercase; }
|
||||
.detail-item label { font-size: 11px; color: var(--rs-text-muted); text-transform: uppercase; }
|
||||
.detail-item .value { font-size: 14px; margin-top: 2px; }
|
||||
|
||||
.logs-section h3 { font-size: 14px; color: #aaa; margin: 0 0 12px; }
|
||||
.log-entry { display: flex; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid #2a2a3e; }
|
||||
.logs-section h3 { font-size: 14px; color: var(--rs-text-secondary); margin: 0 0 12px; }
|
||||
.log-entry { display: flex; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--rs-border-subtle); }
|
||||
.log-icon { font-size: 16px; flex-shrink: 0; }
|
||||
.log-step { font-size: 13px; font-weight: 500; }
|
||||
.log-msg { font-size: 12px; color: #888; margin-top: 2px; }
|
||||
.log-msg { font-size: 12px; color: var(--rs-text-muted); margin-top: 2px; }
|
||||
|
||||
.empty { text-align: center; color: #666; padding: 40px 20px; }
|
||||
.loading { text-align: center; color: #888; padding: 40px; }
|
||||
.empty { text-align: center; color: var(--rs-text-muted); padding: 40px 20px; }
|
||||
.loading { text-align: center; color: var(--rs-text-muted); padding: 40px; }
|
||||
|
||||
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
|
||||
.price-card {
|
||||
background: #1e1e2e; border: 1px solid #333; border-radius: 8px; padding: 14px;
|
||||
background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 8px; padding: 14px;
|
||||
text-align: center; cursor: pointer; transition: border-color 0.2s;
|
||||
}
|
||||
.price-card:hover, .price-card.selected { border-color: #64b5f6; }
|
||||
.price-card:hover, .price-card.selected { border-color: var(--rs-primary); }
|
||||
.price-name { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
|
||||
.price-cost { font-size: 18px; color: #64b5f6; font-weight: 700; }
|
||||
.price-specs { font-size: 11px; color: #888; margin-top: 4px; }
|
||||
.price-cost { font-size: 18px; color: var(--rs-primary); font-weight: 700; }
|
||||
.price-specs { font-size: 11px; color: var(--rs-text-muted); margin-top: 4px; }
|
||||
@media (max-width: 768px) {
|
||||
.pricing { grid-template-columns: 1fr; }
|
||||
.form-row { grid-template-columns: 1fr; }
|
||||
|
|
@ -364,10 +364,10 @@ class FolkForumDashboard extends HTMLElement {
|
|||
<div class="detail-title">${this.esc(inst.name)}</div>
|
||||
<div style="margin-top:4px">${this.statusBadge(inst.status)}</div>
|
||||
</div>
|
||||
${inst.status === "active" ? `<a href="https://${inst.domain}" target="_blank" style="color:#64b5f6;font-size:13px">↗ Open Forum</a>` : ""}
|
||||
${inst.status === "active" ? `<a href="https://${inst.domain}" target="_blank" style="color:var(--rs-primary);font-size:13px">↗ Open Forum</a>` : ""}
|
||||
</div>
|
||||
|
||||
${inst.errorMessage ? `<div style="background:#7a2a2a33;border:1px solid #7a2a2a;padding:10px;border-radius:6px;margin-bottom:16px;font-size:13px;color:#ef5350">${this.esc(inst.errorMessage)}</div>` : ""}
|
||||
${inst.errorMessage ? `<div style="background:#7a2a2a33;border:1px solid #7a2a2a;padding:10px;border-radius:6px;margin-bottom:16px;font-size:13px;color:var(--rs-error)">${this.esc(inst.errorMessage)}</div>` : ""}
|
||||
|
||||
<div class="detail-grid">
|
||||
<div class="detail-item"><label>Domain</label><div class="value">${inst.domain}</div></div>
|
||||
|
|
@ -380,7 +380,7 @@ class FolkForumDashboard extends HTMLElement {
|
|||
|
||||
<div class="logs-section">
|
||||
<h3>Provision Log</h3>
|
||||
${this.selectedLogs.length === 0 ? '<div style="color:#666;font-size:13px">No logs yet</div>' : ""}
|
||||
${this.selectedLogs.length === 0 ? '<div style="color:var(--rs-text-muted);font-size:13px">No logs yet</div>' : ""}
|
||||
${this.selectedLogs.map((log) => `
|
||||
<div class="log-entry">
|
||||
<span class="log-icon">${this.logStepIcon(log.status)}</span>
|
||||
|
|
@ -433,7 +433,7 @@ class FolkForumDashboard extends HTMLElement {
|
|||
<label>Subdomain</label>
|
||||
<div style="display:flex;align-items:center;gap:4px">
|
||||
<input name="subdomain" placeholder="my-community" required style="flex:1">
|
||||
<span style="font-size:12px;color:#888;white-space:nowrap">.rforum.online</span>
|
||||
<span style="font-size:12px;color:var(--rs-text-muted);white-space:nowrap">.rforum.online</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -273,8 +273,8 @@ export class FolkPubsEditor extends HTMLElement {
|
|||
:host {
|
||||
display: block;
|
||||
height: calc(100vh - 52px);
|
||||
background: #0f172a;
|
||||
color: #f1f5f9;
|
||||
background: var(--rs-bg-page);
|
||||
color: var(--rs-text-primary);
|
||||
}
|
||||
|
||||
.editor-layout {
|
||||
|
|
@ -295,7 +295,7 @@ export class FolkPubsEditor extends HTMLElement {
|
|||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: 1px solid #1e293b;
|
||||
border-bottom: 1px solid var(--rs-border-subtle);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
|
|
@ -312,51 +312,51 @@ export class FolkPubsEditor extends HTMLElement {
|
|||
|
||||
.title-input, .author-input {
|
||||
padding: 0.375rem 0.625rem;
|
||||
border: 1px solid #334155;
|
||||
border: 1px solid var(--rs-input-border);
|
||||
border-radius: 0.375rem;
|
||||
background: #1e293b;
|
||||
color: #f1f5f9;
|
||||
background: var(--rs-input-bg);
|
||||
color: var(--rs-input-text);
|
||||
font-size: 0.8rem;
|
||||
min-width: 120px;
|
||||
}
|
||||
.title-input { flex: 1; max-width: 240px; }
|
||||
.author-input { flex: 0.7; max-width: 180px; }
|
||||
.title-input::placeholder, .author-input::placeholder { color: #64748b; }
|
||||
.title-input:focus, .author-input:focus { outline: none; border-color: #60a5fa; }
|
||||
.title-input::placeholder, .author-input::placeholder { color: var(--rs-text-muted); }
|
||||
.title-input:focus, .author-input:focus { outline: none; border-color: var(--rs-primary); }
|
||||
|
||||
.btn-sample, .btn-upload {
|
||||
padding: 0.375rem 0.75rem;
|
||||
border: 1px solid #334155;
|
||||
border: 1px solid var(--rs-border);
|
||||
border-radius: 0.375rem;
|
||||
background: #1e293b;
|
||||
color: #94a3b8;
|
||||
background: var(--rs-bg-surface);
|
||||
color: var(--rs-text-secondary);
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-sample:hover, .btn-upload:hover { border-color: #60a5fa; color: #f1f5f9; }
|
||||
.btn-sample:hover, .btn-upload:hover { border-color: var(--rs-primary); color: var(--rs-text-primary); }
|
||||
|
||||
.content-area {
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
border: none;
|
||||
background: #0f172a;
|
||||
color: #e2e8f0;
|
||||
background: var(--rs-bg-page);
|
||||
color: var(--rs-text-primary);
|
||||
font-family: "JetBrains Mono", "Fira Code", monospace;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.6;
|
||||
resize: none;
|
||||
}
|
||||
.content-area::placeholder { color: #475569; }
|
||||
.content-area::placeholder { color: var(--rs-text-secondary); }
|
||||
.content-area:focus { outline: none; }
|
||||
.content-area.dragover {
|
||||
background: #1e293b;
|
||||
outline: 2px dashed #60a5fa;
|
||||
background: var(--rs-bg-surface);
|
||||
outline: 2px dashed var(--rs-primary);
|
||||
outline-offset: -4px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 280px;
|
||||
border-left: 1px solid #1e293b;
|
||||
border-left: 1px solid var(--rs-border-subtle);
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
|
|
@ -368,7 +368,7 @@ export class FolkPubsEditor extends HTMLElement {
|
|||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: #94a3b8;
|
||||
color: var(--rs-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
|
@ -381,10 +381,10 @@ export class FolkPubsEditor extends HTMLElement {
|
|||
|
||||
.format-btn {
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #334155;
|
||||
border: 1px solid var(--rs-border);
|
||||
border-radius: 0.5rem;
|
||||
background: #1e293b;
|
||||
color: #f1f5f9;
|
||||
background: var(--rs-bg-surface);
|
||||
color: var(--rs-text-primary);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
|
|
@ -392,9 +392,9 @@ export class FolkPubsEditor extends HTMLElement {
|
|||
gap: 0.125rem;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.format-btn:hover { border-color: #60a5fa; }
|
||||
.format-btn:hover { border-color: var(--rs-primary); }
|
||||
.format-btn.active {
|
||||
border-color: #60a5fa;
|
||||
border-color: var(--rs-primary);
|
||||
background: #1e3a5f;
|
||||
}
|
||||
|
||||
|
|
@ -405,21 +405,21 @@ export class FolkPubsEditor extends HTMLElement {
|
|||
|
||||
.format-desc {
|
||||
font-size: 0.65rem;
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted);
|
||||
}
|
||||
|
||||
.btn-generate {
|
||||
padding: 0.625rem 1rem;
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
background: #2563eb;
|
||||
background: var(--rs-primary);
|
||||
color: #fff;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.btn-generate:hover { background: #1d4ed8; }
|
||||
.btn-generate:hover { background: var(--rs-primary-hover); }
|
||||
.btn-generate:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
.error {
|
||||
|
|
@ -438,14 +438,14 @@ export class FolkPubsEditor extends HTMLElement {
|
|||
|
||||
.result-info {
|
||||
font-size: 0.8rem;
|
||||
color: #94a3b8;
|
||||
color: var(--rs-text-secondary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pdf-preview {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
border: 1px solid #334155;
|
||||
border: 1px solid var(--rs-border);
|
||||
border-radius: 0.375rem;
|
||||
background: #fff;
|
||||
}
|
||||
|
|
@ -454,9 +454,9 @@ export class FolkPubsEditor extends HTMLElement {
|
|||
display: block;
|
||||
text-align: center;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #22c55e;
|
||||
border: 1px solid var(--rs-success);
|
||||
border-radius: 0.375rem;
|
||||
color: #22c55e;
|
||||
color: var(--rs-success);
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
|
|
@ -464,7 +464,7 @@ export class FolkPubsEditor extends HTMLElement {
|
|||
.btn-download:hover { background: rgba(34, 197, 94, 0.1); }
|
||||
|
||||
.placeholder {
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted);
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
|
@ -477,8 +477,8 @@ export class FolkPubsEditor extends HTMLElement {
|
|||
gap: 0.125rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.format-detail strong { color: #e2e8f0; }
|
||||
.format-detail .pages { color: #60a5fa; }
|
||||
.format-detail strong { color: var(--rs-text-primary); }
|
||||
.format-detail .pages { color: var(--rs-primary); }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
:host { height: auto; min-height: calc(100vh - 92px); }
|
||||
|
|
@ -487,7 +487,7 @@ export class FolkPubsEditor extends HTMLElement {
|
|||
.sidebar {
|
||||
width: 100%;
|
||||
border-left: none;
|
||||
border-top: 1px solid #1e293b;
|
||||
border-top: 1px solid var(--rs-border-subtle);
|
||||
max-height: none;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -169,7 +169,7 @@ export class FolkCampaignManager extends HTMLElement {
|
|||
background: var(--rs-bg-surface, #1e293b); border: 1px solid var(--rs-input-border, #334155); border-radius: 0.75rem; padding: 1rem;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.post:hover { border-color: #6366f1; }
|
||||
.post:hover { border-color: var(--rs-primary); }
|
||||
.post__header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
|
||||
.post__platform {
|
||||
width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
|
||||
|
|
@ -178,22 +178,22 @@ export class FolkCampaignManager extends HTMLElement {
|
|||
.post__meta { flex: 1; min-width: 0; }
|
||||
.post__meta strong { display: block; font-size: 0.8rem; color: var(--rs-text-primary, #f1f5f9); text-transform: capitalize; }
|
||||
.post__date { font-size: 0.7rem; color: var(--rs-text-muted, #64748b); }
|
||||
.post__step { font-size: 0.65rem; color: #6366f1; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
|
||||
.post__step { font-size: 0.65rem; color: var(--rs-primary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
|
||||
.status { font-size: 0.6rem; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; white-space: nowrap; }
|
||||
.status--scheduled { background: rgba(16,185,129,0.15); color: #34d399; }
|
||||
.status--draft { background: rgba(251,191,36,0.15); color: #fbbf24; }
|
||||
.post__content { font-size: 0.8rem; color: var(--rs-text-secondary, #94a3b8); line-height: 1.5; margin: 0 0 0.5rem; }
|
||||
.post__tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
|
||||
.tag { font-size: 0.65rem; color: #7dd3fc; }
|
||||
.tag { font-size: 0.65rem; color: var(--rs-primary); }
|
||||
.actions { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; }
|
||||
.btn {
|
||||
padding: 0.5rem 1rem; border-radius: 8px; font-size: 0.85rem; font-weight: 600;
|
||||
cursor: pointer; transition: all 0.15s; text-decoration: none; display: inline-flex; align-items: center;
|
||||
}
|
||||
.btn--primary { background: #6366f1; color: white; border: none; }
|
||||
.btn--primary:hover { background: #818cf8; }
|
||||
.btn--primary { background: var(--rs-primary); color: white; border: none; }
|
||||
.btn--primary:hover { background: var(--rs-primary-hover); }
|
||||
.btn--outline { background: transparent; color: var(--rs-text-secondary, #94a3b8); border: 1px solid var(--rs-input-border, #334155); }
|
||||
.btn--outline:hover { border-color: #6366f1; color: #c4b5fd; }
|
||||
.btn--outline:hover { border-color: var(--rs-primary); color: #c4b5fd; }
|
||||
|
||||
/* Import modal */
|
||||
.modal-overlay {
|
||||
|
|
@ -217,14 +217,14 @@ export class FolkCampaignManager extends HTMLElement {
|
|||
border-radius: 8px; padding: 0.75rem; font-family: inherit; font-size: 0.85rem; resize: vertical;
|
||||
line-height: 1.5; box-sizing: border-box;
|
||||
}
|
||||
.modal__textarea:focus { outline: none; border-color: #6366f1; }
|
||||
.modal__textarea:focus { outline: none; border-color: var(--rs-primary); }
|
||||
.modal__textarea::placeholder { color: var(--rs-text-muted, #64748b); }
|
||||
.modal__row { display: flex; gap: 0.75rem; align-items: center; }
|
||||
.modal__select {
|
||||
flex: 1; background: var(--rs-input-bg, #0f172a); color: var(--rs-input-text, #f1f5f9); border: 1px solid var(--rs-input-border, #334155);
|
||||
border-radius: 8px; padding: 0.5rem 0.75rem; font-size: 0.85rem;
|
||||
}
|
||||
.modal__select:focus { outline: none; border-color: #6366f1; }
|
||||
.modal__select:focus { outline: none; border-color: var(--rs-primary); }
|
||||
</style>
|
||||
<div class="container">
|
||||
${campaignHTML}
|
||||
|
|
@ -295,7 +295,7 @@ export class FolkCampaignManager extends HTMLElement {
|
|||
const preview = text.length > 180 ? this.esc(text.substring(0, 180)) + '...' : this.esc(text);
|
||||
html += `<div class="post">
|
||||
<div class="post__header">
|
||||
<span class="post__platform" style="background:#6366f1">${this.esc(platform.charAt(0).toUpperCase())}</span>
|
||||
<span class="post__platform" style="background:var(--rs-primary)">${this.esc(platform.charAt(0).toUpperCase())}</span>
|
||||
<div class="post__meta"><strong>${this.esc(platform)}</strong></div>
|
||||
<span class="status status--draft">imported</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -977,7 +977,7 @@ class FolkCampaignPlanner extends HTMLElement {
|
|||
// Determine date range for columns
|
||||
const allDates = dated.filter(d => d.date).map(d => d.date!);
|
||||
if (allDates.length === 0) {
|
||||
return '<div class="cp-timeline"><div style="padding:40px;color:#94a3b8;text-align:center">No scheduled posts yet. Add dates in canvas view.</div></div>';
|
||||
return '<div class="cp-timeline"><div style="padding:40px;color:var(--rs-text-secondary);text-align:center">No scheduled posts yet. Add dates in canvas view.</div></div>';
|
||||
}
|
||||
|
||||
const minDate = new Date(Math.min(...allDates.map(d => d.getTime())));
|
||||
|
|
@ -1048,8 +1048,8 @@ class FolkCampaignPlanner extends HTMLElement {
|
|||
<span class="cp-tl-card__dot" style="background:#f59e0b"></span>
|
||||
</div>`;
|
||||
}).join('');
|
||||
unscheduledHtml = `<div style="padding:12px 16px;border-top:1px solid #2d2d44">
|
||||
<div style="font-size:11px;color:#94a3b8;margin-bottom:8px;font-weight:600">Unscheduled</div>
|
||||
unscheduledHtml = `<div style="padding:12px 16px;border-top:1px solid var(--rs-border)">
|
||||
<div style="font-size:11px;color:var(--rs-text-secondary);margin-bottom:8px;font-weight:600">Unscheduled</div>
|
||||
<div style="display:flex;gap:8px;flex-wrap:wrap">${cards}</div>
|
||||
</div>`;
|
||||
}
|
||||
|
|
@ -1093,7 +1093,7 @@ class FolkCampaignPlanner extends HTMLElement {
|
|||
});
|
||||
|
||||
if (platformMap.size === 0) {
|
||||
return '<div class="cp-platform-view"><div style="padding:40px;color:#94a3b8;text-align:center">No posts yet. Add posts in canvas view.</div></div>';
|
||||
return '<div class="cp-platform-view"><div style="padding:40px;color:var(--rs-text-secondary);text-align:center">No posts yet. Add posts in canvas view.</div></div>';
|
||||
}
|
||||
|
||||
const columns = Array.from(platformMap.entries()).map(([platform, items]) => {
|
||||
|
|
@ -1151,7 +1151,7 @@ class FolkCampaignPlanner extends HTMLElement {
|
|||
});
|
||||
|
||||
if (posts.length === 0) {
|
||||
return '<div class="cp-table-view"><div style="padding:40px;color:#94a3b8;text-align:center">No posts yet.</div></div>';
|
||||
return '<div class="cp-table-view"><div style="padding:40px;color:var(--rs-text-secondary);text-align:center">No posts yet.</div></div>';
|
||||
}
|
||||
|
||||
const rows = posts.map(node => {
|
||||
|
|
@ -1358,22 +1358,22 @@ class FolkCampaignPlanner extends HTMLElement {
|
|||
const charPct = Math.min(1, charCount / charMax) * 100;
|
||||
const dateStr = d.scheduledAt ? new Date(d.scheduledAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' }) : 'Unscheduled';
|
||||
|
||||
return `<div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;background:#1a1a2e;border:1px solid #2d2d44;border-radius:10px;overflow:hidden;font-family:system-ui,sans-serif;display:flex">
|
||||
return `<div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;background:var(--rs-bg-surface);border:1px solid var(--rs-border);border-radius:10px;overflow:hidden;font-family:system-ui,sans-serif;display:flex">
|
||||
<div style="width:4px;background:${color};flex-shrink:0"></div>
|
||||
<div style="flex:1;padding:10px 12px;display:flex;flex-direction:column;gap:4px;min-width:0">
|
||||
<div style="display:flex;align-items:center;gap:6px">
|
||||
<span style="font-size:12px;width:20px;height:20px;border-radius:4px;background:${color}22;color:${color};display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0">${icon}</span>
|
||||
<span style="font-size:12px;font-weight:600;color:#e2e8f0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(d.label || preview || 'New Post')}</span>
|
||||
<span style="font-size:12px;font-weight:600;color:var(--rs-text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(d.label || preview || 'New Post')}</span>
|
||||
<span style="width:7px;height:7px;border-radius:50%;background:${statusColor};flex-shrink:0" title="${d.status}"></span>
|
||||
</div>
|
||||
<div style="font-size:10px;color:#94a3b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(preview)}</div>
|
||||
<div style="font-size:10px;color:var(--rs-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(preview)}</div>
|
||||
<div style="display:flex;align-items:center;gap:6px;margin-top:auto">
|
||||
<div style="flex:1;height:3px;background:#1e293b;border-radius:2px;overflow:hidden">
|
||||
<div style="flex:1;height:3px;background:var(--rs-bg-surface-raised);border-radius:2px;overflow:hidden">
|
||||
<div style="width:${charPct}%;height:100%;background:${charPct > 90 ? '#ef4444' : color};border-radius:2px"></div>
|
||||
</div>
|
||||
<span style="font-size:9px;color:#64748b">${charCount}/${charMax}</span>
|
||||
<span style="font-size:9px;color:var(--rs-text-muted)">${charCount}/${charMax}</span>
|
||||
</div>
|
||||
<div style="font-size:9px;color:#64748b">${dateStr}</div>
|
||||
<div style="font-size:9px;color:var(--rs-text-muted)">${dateStr}</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
|
@ -1382,14 +1382,14 @@ class FolkCampaignPlanner extends HTMLElement {
|
|||
const d = node.data as ThreadNodeData;
|
||||
const statusColor = d.status === 'published' ? '#22c55e' : d.status === 'ready' ? '#3b82f6' : '#f59e0b';
|
||||
|
||||
return `<div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;background:#1a1a2e;border:1px solid #2d2d44;border-radius:10px;overflow:hidden;font-family:system-ui,sans-serif;padding:10px 14px;display:flex;flex-direction:column;gap:6px">
|
||||
return `<div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;background:var(--rs-bg-surface);border:1px solid var(--rs-border);border-radius:10px;overflow:hidden;font-family:system-ui,sans-serif;padding:10px 14px;display:flex;flex-direction:column;gap:6px">
|
||||
<div style="display:flex;align-items:center;gap:6px">
|
||||
<span style="font-size:14px">🧵</span>
|
||||
<span style="font-size:12px;font-weight:600;color:#e2e8f0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(d.label || 'Thread')}</span>
|
||||
<span style="font-size:12px;font-weight:600;color:var(--rs-text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(d.label || 'Thread')}</span>
|
||||
<span style="width:7px;height:7px;border-radius:50%;background:${statusColor};flex-shrink:0" title="${d.status}"></span>
|
||||
</div>
|
||||
<div style="font-size:10px;color:#94a3b8">${d.tweetCount} tweet${d.tweetCount === 1 ? '' : 's'}</div>
|
||||
<div style="font-size:10px;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(d.preview || '')}</div>
|
||||
<div style="font-size:10px;color:var(--rs-text-secondary)">${d.tweetCount} tweet${d.tweetCount === 1 ? '' : 's'}</div>
|
||||
<div style="font-size:10px;color:var(--rs-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(d.preview || '')}</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
|
|
@ -1404,11 +1404,11 @@ class FolkCampaignPlanner extends HTMLElement {
|
|||
<div style="display:flex;align-items:center;gap:8px">
|
||||
<span style="font-size:18px;width:30px;height:30px;border-radius:6px;background:${color}22;color:${color};display:flex;align-items:center;justify-content:center;font-weight:700">${icon}</span>
|
||||
<div>
|
||||
<div style="font-size:12px;font-weight:600;color:#e2e8f0">${esc(d.label)}</div>
|
||||
<div style="font-size:10px;color:#94a3b8">${esc(d.handle)}</div>
|
||||
<div style="font-size:12px;font-weight:600;color:var(--rs-text-primary)">${esc(d.label)}</div>
|
||||
<div style="font-size:10px;color:var(--rs-text-secondary)">${esc(d.handle)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:9px;color:#64748b;margin-top:auto">${connectedCount} post${connectedCount === 1 ? '' : 's'} connected</div>
|
||||
<div style="font-size:9px;color:var(--rs-text-muted);margin-top:auto">${connectedCount} post${connectedCount === 1 ? '' : 's'} connected</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
|
|
@ -1420,11 +1420,11 @@ class FolkCampaignPlanner extends HTMLElement {
|
|||
<div style="display:flex;align-items:center;gap:8px">
|
||||
<span style="font-size:16px">🎯</span>
|
||||
<div>
|
||||
<div style="font-size:12px;font-weight:600;color:#e2e8f0">${esc(d.label)}</div>
|
||||
<div style="font-size:10px;color:#94a3b8">${esc(d.sizeEstimate)}</div>
|
||||
<div style="font-size:12px;font-weight:600;color:var(--rs-text-primary)">${esc(d.label)}</div>
|
||||
<div style="font-size:10px;color:var(--rs-text-secondary)">${esc(d.sizeEstimate)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:9px;color:#64748b">${connectedCount} targeted \u00b7 ${esc(d.description).substring(0, 40)}</div>
|
||||
<div style="font-size:9px;color:var(--rs-text-muted)">${connectedCount} targeted \u00b7 ${esc(d.description).substring(0, 40)}</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -142,9 +142,9 @@ export class FolkThreadGallery extends HTMLElement {
|
|||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||
}
|
||||
.btn { padding: 0.5rem 1rem; border-radius: 8px; border: none; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.15s; text-decoration: none; display: inline-flex; align-items: center; }
|
||||
.btn--primary { background: #6366f1; color: white; }
|
||||
.btn--primary:hover { background: #818cf8; }
|
||||
.btn--success { background: #10b981; color: white; }
|
||||
.btn--primary { background: var(--rs-primary); color: white; }
|
||||
.btn--primary:hover { background: var(--rs-primary-hover); }
|
||||
.btn--success { background: var(--rs-success); color: white; }
|
||||
.btn--success:hover { background: #34d399; }
|
||||
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
|
||||
.empty { color: var(--rs-text-muted, #64748b); text-align: center; padding: 3rem 1rem; font-size: 0.9rem; }
|
||||
|
|
@ -154,7 +154,7 @@ export class FolkThreadGallery extends HTMLElement {
|
|||
display: flex; flex-direction: column; gap: 0.75rem;
|
||||
text-decoration: none; color: inherit;
|
||||
}
|
||||
.card:hover { border-color: #6366f1; transform: translateY(-2px); }
|
||||
.card:hover { border-color: var(--rs-primary); transform: translateY(-2px); }
|
||||
.card__title { font-size: 1rem; font-weight: 700; color: var(--rs-text-primary, #f1f5f9); margin: 0; line-height: 1.3; }
|
||||
.card__preview {
|
||||
font-size: 0.85rem; color: var(--rs-text-secondary, #94a3b8); line-height: 1.5;
|
||||
|
|
@ -163,7 +163,7 @@ export class FolkThreadGallery extends HTMLElement {
|
|||
.card__meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.75rem; color: var(--rs-text-muted, #64748b); margin-top: auto; }
|
||||
.card__author { display: flex; align-items: center; gap: 0.4rem; }
|
||||
.card__avatar {
|
||||
width: 20px; height: 20px; border-radius: 50%; background: #6366f1;
|
||||
width: 20px; height: 20px; border-radius: 50%; background: var(--rs-primary);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: white; font-weight: 700; font-size: 0.55rem; flex-shrink: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -578,34 +578,34 @@ class FolkSwagDesigner extends HTMLElement {
|
|||
<style>
|
||||
:host { display: block; padding: 1.5rem; max-width: 900px; margin: 0 auto; }
|
||||
.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
|
||||
.product { padding: 1rem; border-radius: 12px; border: 2px solid #334155; background: #1e293b; cursor: pointer; text-align: center; transition: all 0.15s; }
|
||||
.product:hover { border-color: #475569; }
|
||||
.product.active { border-color: #6366f1; background: rgba(99,102,241,0.1); }
|
||||
.product { padding: 1rem; border-radius: 12px; border: 2px solid var(--rs-border); background: var(--rs-bg-surface); cursor: pointer; text-align: center; transition: all 0.15s; }
|
||||
.product:hover { border-color: var(--rs-border-strong); }
|
||||
.product.active { border-color: var(--rs-primary); background: rgba(99,102,241,0.1); }
|
||||
.product-icon { font-size: 2rem; margin-bottom: 0.375rem; }
|
||||
.product-name { color: #f1f5f9; font-weight: 600; font-size: 0.875rem; }
|
||||
.product-desc { color: #64748b; font-size: 0.75rem; margin-top: 0.25rem; }
|
||||
.upload-area { border: 2px dashed #334155; border-radius: 12px; padding: 2rem; text-align: center; margin-bottom: 1rem; cursor: pointer; transition: border-color 0.15s; background: #1e293b; }
|
||||
.upload-area:hover { border-color: #6366f1; }
|
||||
.upload-area.has-image { border-style: solid; border-color: #475569; }
|
||||
.upload-label { color: #94a3b8; font-size: 0.875rem; }
|
||||
.product-name { color: var(--rs-text-primary); font-weight: 600; font-size: 0.875rem; }
|
||||
.product-desc { color: var(--rs-text-muted); font-size: 0.75rem; margin-top: 0.25rem; }
|
||||
.upload-area { border: 2px dashed var(--rs-border); border-radius: 12px; padding: 2rem; text-align: center; margin-bottom: 1rem; cursor: pointer; transition: border-color 0.15s; background: var(--rs-bg-surface); }
|
||||
.upload-area:hover { border-color: var(--rs-primary); }
|
||||
.upload-area.has-image { border-style: solid; border-color: var(--rs-border-strong); }
|
||||
.upload-label { color: var(--rs-text-secondary); font-size: 0.875rem; }
|
||||
.preview-img { max-width: 200px; max-height: 200px; border-radius: 8px; }
|
||||
.title-input { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid #334155; border-radius: 8px; background: #1e293b; color: #f1f5f9; font-size: 0.875rem; margin-bottom: 1rem; box-sizing: border-box; }
|
||||
.title-input:focus { outline: none; border-color: #6366f1; }
|
||||
.generate-btn { width: 100%; padding: 0.75rem; border: none; border-radius: 8px; background: #4f46e5; color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; margin-bottom: 1rem; }
|
||||
.title-input { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid var(--rs-input-border); border-radius: 8px; background: var(--rs-input-bg); color: var(--rs-input-text); font-size: 0.875rem; margin-bottom: 1rem; box-sizing: border-box; }
|
||||
.title-input:focus { outline: none; border-color: var(--rs-primary); }
|
||||
.generate-btn { width: 100%; padding: 0.75rem; border: none; border-radius: 8px; background: var(--rs-primary-hover); color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; margin-bottom: 1rem; }
|
||||
.generate-btn:hover { background: #4338ca; }
|
||||
.generate-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.error { background: rgba(239,68,68,0.1); border: 1px solid #ef4444; border-radius: 8px; padding: 0.75rem; color: #fca5a5; font-size: 0.875rem; margin-bottom: 1rem; }
|
||||
.result { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 1.25rem; }
|
||||
.result-title { color: #f1f5f9; font-weight: 600; margin: 0 0 0.5rem; }
|
||||
.result-meta { color: #94a3b8; font-size: 0.8125rem; margin-bottom: 1rem; }
|
||||
.error { background: rgba(239,68,68,0.1); border: 1px solid var(--rs-error); border-radius: 8px; padding: 0.75rem; color: #fca5a5; font-size: 0.875rem; margin-bottom: 1rem; }
|
||||
.result { background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 12px; padding: 1.25rem; }
|
||||
.result-title { color: var(--rs-text-primary); font-weight: 600; margin: 0 0 0.5rem; }
|
||||
.result-meta { color: var(--rs-text-secondary); font-size: 0.8125rem; margin-bottom: 1rem; }
|
||||
.result-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
|
||||
.result-btn { padding: 0.5rem 1rem; border-radius: 8px; font-size: 0.875rem; text-decoration: none; font-weight: 500; cursor: pointer; border: none; }
|
||||
.result-btn-primary { background: #4f46e5; color: #fff; }
|
||||
.result-btn-primary { background: var(--rs-primary-hover); color: #fff; }
|
||||
.result-btn-primary:hover { background: #4338ca; }
|
||||
.result-btn-secondary { background: #334155; color: #f1f5f9; }
|
||||
.result-btn-secondary:hover { background: #475569; }
|
||||
.json-toggle { color: #818cf8; cursor: pointer; font-size: 0.75rem; margin-top: 0.75rem; display: inline-block; }
|
||||
.json-pre { background: #0f172a; border-radius: 8px; padding: 0.75rem; overflow-x: auto; font-size: 0.6875rem; color: #94a3b8; margin-top: 0.5rem; max-height: 300px; display: none; }
|
||||
.result-btn-secondary { background: var(--rs-bg-surface-raised); color: var(--rs-text-primary); }
|
||||
.result-btn-secondary:hover { background: var(--rs-bg-hover); }
|
||||
.json-toggle { color: var(--rs-primary-hover); cursor: pointer; font-size: 0.75rem; margin-top: 0.75rem; display: inline-block; }
|
||||
.json-pre { background: var(--rs-bg-page); border-radius: 8px; padding: 0.75rem; overflow-x: auto; font-size: 0.6875rem; color: var(--rs-text-secondary); margin-top: 0.5rem; max-height: 300px; display: none; }
|
||||
.json-pre.visible { display: block; }
|
||||
input[type="file"] { display: none; }
|
||||
@media (max-width: 768px) {
|
||||
|
|
@ -701,22 +701,22 @@ class FolkSwagDesigner extends HTMLElement {
|
|||
/* Step bar */
|
||||
.steps-bar { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 2rem; }
|
||||
.step-dot { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
|
||||
.step-num { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; border: 2px solid #334155; color: #64748b; background: #1e293b; transition: all 0.2s; }
|
||||
.step-dot.active .step-num { border-color: #6366f1; color: #fff; background: #4f46e5; }
|
||||
.step-num { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; border: 2px solid var(--rs-border); color: var(--rs-text-muted); background: var(--rs-bg-surface); transition: all 0.2s; }
|
||||
.step-dot.active .step-num { border-color: var(--rs-primary); color: #fff; background: var(--rs-primary-hover); }
|
||||
.step-dot.current .step-num { box-shadow: 0 0 0 3px rgba(99,102,241,0.3); }
|
||||
.step-label { font-size: 0.6875rem; color: #64748b; }
|
||||
.step-label { font-size: 0.6875rem; color: var(--rs-text-muted); }
|
||||
.step-dot.active .step-label { color: #a5b4fc; }
|
||||
.step-line { width: 40px; height: 2px; background: #334155; margin: 0 0.5rem; margin-bottom: 1rem; }
|
||||
.step-line { width: 40px; height: 2px; background: var(--rs-border); margin: 0 0.5rem; margin-bottom: 1rem; }
|
||||
|
||||
/* Product grid */
|
||||
.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
|
||||
.product { padding: 0.875rem 0.5rem; border-radius: 12px; border: 2px solid #334155; background: #1e293b; cursor: pointer; text-align: center; transition: all 0.15s; }
|
||||
.product:hover { border-color: #475569; }
|
||||
.product.active { border-color: #6366f1; background: rgba(99,102,241,0.1); }
|
||||
.product { padding: 0.875rem 0.5rem; border-radius: 12px; border: 2px solid var(--rs-border); background: var(--rs-bg-surface); cursor: pointer; text-align: center; transition: all 0.15s; }
|
||||
.product:hover { border-color: var(--rs-border-strong); }
|
||||
.product.active { border-color: var(--rs-primary); background: rgba(99,102,241,0.1); }
|
||||
.product-icon { margin-bottom: 0.375rem; display: flex; justify-content: center; }
|
||||
.product-name { color: #f1f5f9; font-weight: 600; font-size: 0.8125rem; }
|
||||
.product-specs { color: #64748b; font-size: 0.6875rem; margin-top: 0.125rem; }
|
||||
.product-cost { color: #94a3b8; font-size: 0.75rem; margin-top: 0.25rem; }
|
||||
.product-name { color: var(--rs-text-primary); font-weight: 600; font-size: 0.8125rem; }
|
||||
.product-specs { color: var(--rs-text-muted); font-size: 0.6875rem; margin-top: 0.125rem; }
|
||||
.product-cost { color: var(--rs-text-secondary); font-size: 0.75rem; margin-top: 0.25rem; }
|
||||
|
||||
/* Badges */
|
||||
.badge { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.625rem; font-weight: 600; margin-top: 0.375rem; }
|
||||
|
|
@ -728,30 +728,30 @@ class FolkSwagDesigner extends HTMLElement {
|
|||
|
||||
/* Options */
|
||||
.option-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
|
||||
.option-label { color: #94a3b8; font-size: 0.8125rem; font-weight: 500; min-width: 40px; }
|
||||
.option-label { color: var(--rs-text-secondary); font-size: 0.8125rem; font-weight: 500; min-width: 40px; }
|
||||
.pills { display: flex; gap: 0.375rem; flex-wrap: wrap; }
|
||||
.pill { padding: 0.375rem 0.75rem; border-radius: 999px; border: 1px solid #334155; background: #1e293b; color: #94a3b8; font-size: 0.75rem; cursor: pointer; transition: all 0.15s; }
|
||||
.pill:hover { border-color: #475569; color: #f1f5f9; }
|
||||
.pill.active { border-color: #6366f1; background: rgba(99,102,241,0.15); color: #fff; }
|
||||
.pill { padding: 0.375rem 0.75rem; border-radius: 999px; border: 1px solid var(--rs-border); background: var(--rs-bg-surface); color: var(--rs-text-secondary); font-size: 0.75rem; cursor: pointer; transition: all 0.15s; }
|
||||
.pill:hover { border-color: var(--rs-border-strong); color: var(--rs-text-primary); }
|
||||
.pill.active { border-color: var(--rs-primary); background: rgba(99,102,241,0.15); color: #fff; }
|
||||
.color-swatches { display: flex; gap: 0.5rem; }
|
||||
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #334155; cursor: pointer; transition: all 0.15s; }
|
||||
.swatch:hover { border-color: #475569; }
|
||||
.swatch.active { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.3); }
|
||||
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--rs-border); cursor: pointer; transition: all 0.15s; }
|
||||
.swatch:hover { border-color: var(--rs-border-strong); }
|
||||
.swatch.active { border-color: var(--rs-primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.3); }
|
||||
|
||||
/* Mockup */
|
||||
.mockup-area { display: flex; gap: 1.5rem; align-items: center; background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; }
|
||||
.mockup-area { display: flex; gap: 1.5rem; align-items: center; background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; }
|
||||
.mockup-svg { flex-shrink: 0; }
|
||||
.mockup-svg svg { width: 180px; height: auto; }
|
||||
.mockup-info { flex: 1; }
|
||||
.mockup-title { color: #f1f5f9; font-weight: 600; font-size: 1rem; margin: 0 0 0.25rem; }
|
||||
.mockup-meta { color: #94a3b8; font-size: 0.8125rem; margin-bottom: 0.75rem; }
|
||||
.mockup-title { color: var(--rs-text-primary); font-weight: 600; font-size: 1rem; margin: 0 0 0.25rem; }
|
||||
.mockup-meta { color: var(--rs-text-secondary); font-size: 0.8125rem; margin-bottom: 0.75rem; }
|
||||
|
||||
/* Buttons */
|
||||
.btn { padding: 0.625rem 1.25rem; border-radius: 8px; font-size: 0.875rem; font-weight: 600; cursor: pointer; border: none; text-decoration: none; display: inline-block; transition: all 0.15s; }
|
||||
.btn-primary { background: #4f46e5; color: #fff; }
|
||||
.btn-primary { background: var(--rs-primary-hover); color: #fff; }
|
||||
.btn-primary:hover { background: #4338ca; }
|
||||
.btn-secondary { background: #334155; color: #f1f5f9; }
|
||||
.btn-secondary:hover { background: #475569; }
|
||||
.btn-secondary { background: var(--rs-bg-surface-raised); color: var(--rs-text-primary); }
|
||||
.btn-secondary:hover { background: var(--rs-bg-hover); }
|
||||
.generate-row { text-align: center; margin-bottom: 1.5rem; }
|
||||
|
||||
/* Step sections */
|
||||
|
|
@ -759,41 +759,41 @@ class FolkSwagDesigner extends HTMLElement {
|
|||
.step-section:not(.visible) { display: none; }
|
||||
|
||||
/* Progress bar */
|
||||
.progress-bar { height: 6px; background: #1e293b; border-radius: 3px; overflow: hidden; margin-bottom: 0.5rem; }
|
||||
.progress-fill { height: 100%; background: linear-gradient(90deg, #6366f1, #818cf8); border-radius: 3px; transition: width 0.3s ease; }
|
||||
.progress-bar { height: 6px; background: var(--rs-bg-surface); border-radius: 3px; overflow: hidden; margin-bottom: 0.5rem; }
|
||||
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--rs-primary), var(--rs-primary-hover)); border-radius: 3px; transition: width 0.3s ease; }
|
||||
.progress-steps { display: flex; justify-content: space-between; margin-bottom: 1.5rem; }
|
||||
.prog-label { font-size: 0.6875rem; color: #475569; transition: color 0.2s; }
|
||||
.prog-label.active { color: #818cf8; font-weight: 600; }
|
||||
.prog-label { font-size: 0.6875rem; color: var(--rs-text-muted); transition: color 0.2s; }
|
||||
.prog-label.active { color: var(--rs-primary-hover); font-weight: 600; }
|
||||
.prog-label.done { color: #4ade80; }
|
||||
|
||||
/* Artifact card */
|
||||
.artifact-card { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; }
|
||||
.artifact-heading { color: #f1f5f9; font-weight: 600; font-size: 0.9375rem; margin: 0 0 0.75rem; }
|
||||
.artifact-card { background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; }
|
||||
.artifact-heading { color: var(--rs-text-primary); font-weight: 600; font-size: 0.9375rem; margin: 0 0 0.75rem; }
|
||||
.artifact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
|
||||
.artifact-field { display: flex; flex-direction: column; }
|
||||
.af-label { color: #64748b; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; }
|
||||
.af-value { color: #e2e8f0; font-size: 0.8125rem; }
|
||||
.af-label { color: var(--rs-text-muted); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; }
|
||||
.af-value { color: var(--rs-text-primary); font-size: 0.8125rem; }
|
||||
.artifact-targets { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
|
||||
.target-chip { background: rgba(99,102,241,0.1); color: #a5b4fc; padding: 0.25rem 0.625rem; border-radius: 6px; font-size: 0.6875rem; }
|
||||
.artifact-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
|
||||
.action-chip { background: #0f172a; color: #94a3b8; padding: 0.25rem 0.625rem; border-radius: 6px; font-size: 0.6875rem; border: 1px solid #334155; }
|
||||
.action-chip { background: var(--rs-bg-page); color: var(--rs-text-secondary); padding: 0.25rem 0.625rem; border-radius: 6px; font-size: 0.6875rem; border: 1px solid var(--rs-border); }
|
||||
|
||||
/* Provider table */
|
||||
.provider-section { margin-bottom: 1rem; }
|
||||
.provider-heading { color: #f1f5f9; font-weight: 600; font-size: 0.9375rem; margin: 0 0 0.75rem; }
|
||||
.buyer-loc { color: #64748b; font-weight: 400; font-size: 0.75rem; }
|
||||
.provider-table { background: #1e293b; border: 1px solid #334155; border-radius: 12px; overflow: hidden; }
|
||||
.provider-heading { color: var(--rs-text-primary); font-weight: 600; font-size: 0.9375rem; margin: 0 0 0.75rem; }
|
||||
.buyer-loc { color: var(--rs-text-muted); font-weight: 400; font-size: 0.75rem; }
|
||||
.provider-table { background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 12px; overflow: hidden; }
|
||||
.pt-header, .pt-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr 0.8fr 1fr; padding: 0.625rem 1rem; font-size: 0.8125rem; align-items: center; }
|
||||
.pt-header { background: #0f172a; color: #64748b; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
|
||||
.pt-row { color: #e2e8f0; border-top: 1px solid #1e293b; }
|
||||
.pt-row.nearest { background: rgba(99,102,241,0.05); border-left: 3px solid #6366f1; }
|
||||
.pt-header { background: var(--rs-bg-page); color: var(--rs-text-muted); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
|
||||
.pt-row { color: var(--rs-text-primary); border-top: 1px solid var(--rs-border-subtle); }
|
||||
.pt-row.nearest { background: rgba(99,102,241,0.05); border-left: 3px solid var(--rs-primary); }
|
||||
.pt-name { font-weight: 500; }
|
||||
.pt-cost { color: #4ade80; font-weight: 600; }
|
||||
|
||||
/* Split bar */
|
||||
.split-section { margin-bottom: 1.5rem; }
|
||||
.split-heading { color: #94a3b8; font-size: 0.8125rem; font-weight: 500; margin: 0 0 0.5rem; }
|
||||
.split-total { color: #64748b; font-weight: 400; }
|
||||
.split-heading { color: var(--rs-text-secondary); font-size: 0.8125rem; font-weight: 500; margin: 0 0 0.5rem; }
|
||||
.split-total { color: var(--rs-text-muted); font-weight: 400; }
|
||||
.split-bar { display: flex; height: 32px; border-radius: 8px; overflow: hidden; font-size: 0.6875rem; font-weight: 600; }
|
||||
.split-seg { display: flex; align-items: center; justify-content: center; gap: 0.25rem; color: #fff; }
|
||||
.split-provider { background: #16a34a; }
|
||||
|
|
@ -801,23 +801,23 @@ class FolkSwagDesigner extends HTMLElement {
|
|||
.split-community { background: #d97706; }
|
||||
.split-amt { opacity: 0.85; }
|
||||
.split-legend { text-align: right; margin-top: 0.25rem; }
|
||||
.split-legend span { color: #64748b; font-size: 0.6875rem; }
|
||||
.split-legend span { color: var(--rs-text-muted); font-size: 0.6875rem; }
|
||||
|
||||
/* Pipeline */
|
||||
.pipeline-heading { color: #f1f5f9; font-weight: 600; font-size: 0.9375rem; margin: 0 0 1rem; text-align: center; }
|
||||
.pipeline-heading { color: var(--rs-text-primary); font-weight: 600; font-size: 0.9375rem; margin: 0 0 1rem; text-align: center; }
|
||||
.pipeline { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; margin-bottom: 1.5rem; }
|
||||
.pipe-node { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem; background: #1e293b; border: 1px solid #334155; border-radius: 10px; position: relative; min-width: 90px; }
|
||||
.pipe-node { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem; background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 10px; position: relative; min-width: 90px; }
|
||||
.pipe-node.done { border-color: #22c55e; }
|
||||
.pipe-icon { display: flex; align-items: center; justify-content: center; }
|
||||
.pipe-label { color: #e2e8f0; font-size: 0.6875rem; font-weight: 500; text-align: center; }
|
||||
.pipe-label { color: var(--rs-text-primary); font-size: 0.6875rem; font-weight: 500; text-align: center; }
|
||||
.pipe-check { position: absolute; top: -6px; right: -6px; background: #16a34a; color: #fff; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.5625rem; }
|
||||
.pipe-arrow { color: #475569; font-size: 1.25rem; margin: 0 0.25rem; margin-bottom: 0.75rem; }
|
||||
.pipe-arrow { color: var(--rs-text-muted); font-size: 1.25rem; margin: 0 0.25rem; margin-bottom: 0.75rem; }
|
||||
|
||||
/* Pipeline actions */
|
||||
.pipeline-actions { display: flex; gap: 0.75rem; justify-content: center; margin-bottom: 1rem; }
|
||||
|
||||
/* JSON */
|
||||
.json-pre { background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 0.75rem; overflow-x: auto; font-size: 0.6875rem; color: #94a3b8; max-height: 300px; display: none; white-space: pre-wrap; word-break: break-all; }
|
||||
.json-pre { background: var(--rs-bg-page); border: 1px solid var(--rs-border); border-radius: 8px; padding: 0.75rem; overflow-x: auto; font-size: 0.6875rem; color: var(--rs-text-secondary); max-height: 300px; display: none; white-space: pre-wrap; word-break: break-all; }
|
||||
.json-pre.visible { display: block; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
|
|
|||
|
|
@ -70,41 +70,41 @@ class FolkVideoPlayer extends HTMLElement {
|
|||
private render() {
|
||||
this.shadow.innerHTML = `
|
||||
<style>
|
||||
:host { display: block; min-height: 60vh; font-family: system-ui, sans-serif; color: #e2e8f0; }
|
||||
:host { display: block; min-height: 60vh; font-family: system-ui, sans-serif; color: var(--rs-text-primary); }
|
||||
.container { max-width: 1200px; margin: 0 auto; }
|
||||
.rapp-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; min-height: 36px; }
|
||||
.rapp-nav__title { font-size: 13px; font-weight: 500; color: #64748b; flex: 1; text-align: right; }
|
||||
.tab { padding: 0.5rem 1.25rem; border-radius: 8px; border: 1px solid #334155; background: transparent; color: #94a3b8; cursor: pointer; font-size: 0.875rem; }
|
||||
.rapp-nav__title { font-size: 13px; font-weight: 500; color: var(--rs-text-muted); flex: 1; text-align: right; }
|
||||
.tab { padding: 0.5rem 1.25rem; border-radius: 8px; border: 1px solid var(--rs-border); background: transparent; color: var(--rs-text-secondary); cursor: pointer; font-size: 0.875rem; }
|
||||
.tab.active { background: #ef4444; color: white; border-color: #ef4444; }
|
||||
.layout { display: grid; grid-template-columns: 300px 1fr; gap: 1.5rem; }
|
||||
.sidebar { background: rgba(15,23,42,0.5); border: 1px solid #1e293b; border-radius: 12px; padding: 1rem; max-height: 70vh; overflow-y: auto; }
|
||||
.sidebar { background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 12px; padding: 1rem; max-height: 70vh; overflow-y: auto; }
|
||||
.video-item { padding: 0.75rem; border-radius: 8px; cursor: pointer; border: 1px solid transparent; margin-bottom: 0.25rem; }
|
||||
.video-item:hover { background: rgba(51,65,85,0.5); }
|
||||
.video-item:hover { background: var(--rs-bg-hover); }
|
||||
.video-item.active { background: rgba(239,68,68,0.1); border-color: #ef4444; }
|
||||
.video-name { font-size: 0.875rem; font-weight: 500; word-break: break-all; }
|
||||
.video-meta { font-size: 0.75rem; color: #64748b; margin-top: 0.25rem; }
|
||||
.video-meta { font-size: 0.75rem; color: var(--rs-text-muted); margin-top: 0.25rem; }
|
||||
.player-area { background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; }
|
||||
video { width: 100%; height: 100%; }
|
||||
.placeholder { text-align: center; color: #64748b; }
|
||||
.placeholder { text-align: center; color: var(--rs-text-muted); }
|
||||
.placeholder-icon { font-size: 3rem; margin-bottom: 1rem; }
|
||||
.info-bar { margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
|
||||
.info-name { font-weight: 500; }
|
||||
.actions { display: flex; gap: 0.5rem; }
|
||||
.btn { padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid #334155; background: rgba(51,65,85,0.5); color: #e2e8f0; cursor: pointer; font-size: 0.8rem; text-decoration: none; }
|
||||
.btn:hover { background: rgba(51,65,85,0.8); }
|
||||
.btn { padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--rs-border); background: var(--rs-btn-secondary-bg); color: var(--rs-text-primary); cursor: pointer; font-size: 0.8rem; text-decoration: none; }
|
||||
.btn:hover { background: var(--rs-bg-surface-raised); }
|
||||
.live-section { max-width: 640px; margin: 0 auto; }
|
||||
.live-card { background: rgba(15,23,42,0.5); border: 1px solid #1e293b; border-radius: 12px; padding: 2rem; }
|
||||
input { width: 100%; padding: 0.75rem; background: rgba(0,0,0,0.3); border: 1px solid #334155; border-radius: 8px; color: white; font-size: 0.875rem; margin-bottom: 1rem; box-sizing: border-box; }
|
||||
.live-card { background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 12px; padding: 2rem; }
|
||||
input { width: 100%; padding: 0.75rem; background: var(--rs-input-bg); border: 1px solid var(--rs-input-border); border-radius: 8px; color: var(--rs-input-text); font-size: 0.875rem; margin-bottom: 1rem; box-sizing: border-box; }
|
||||
.btn-primary { padding: 0.75rem 1.5rem; background: #ef4444; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 500; width: 100%; font-size: 0.875rem; }
|
||||
.btn-primary:disabled { background: #334155; color: #64748b; cursor: not-allowed; }
|
||||
.btn-primary:disabled { background: var(--rs-bg-surface-raised); color: var(--rs-text-muted); cursor: not-allowed; }
|
||||
.live-badge { display: inline-flex; align-items: center; gap: 0.5rem; }
|
||||
.live-dot { width: 10px; height: 10px; background: #ef4444; border-radius: 50%; animation: pulse 2s infinite; }
|
||||
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
|
||||
.empty { text-align: center; padding: 3rem; color: #64748b; }
|
||||
.setup { margin-top: 1.5rem; padding: 1.5rem; background: rgba(15,23,42,0.3); border: 1px solid #1e293b; border-radius: 12px; }
|
||||
.empty { text-align: center; padding: 3rem; color: var(--rs-text-muted); }
|
||||
.setup { margin-top: 1.5rem; padding: 1.5rem; background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 12px; }
|
||||
.setup h3 { font-size: 0.875rem; color: #ef4444; margin-bottom: 0.5rem; }
|
||||
.setup code { display: block; background: rgba(0,0,0,0.3); padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.75rem; color: #94a3b8; margin-top: 0.5rem; overflow-x: auto; }
|
||||
.setup ol { padding-left: 1.25rem; color: #94a3b8; font-size: 0.8rem; line-height: 1.8; }
|
||||
.setup code { display: block; background: var(--rs-input-bg); padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.75rem; color: var(--rs-text-secondary); margin-top: 0.5rem; overflow-x: auto; }
|
||||
.setup ol { padding-left: 1.25rem; color: var(--rs-text-secondary); font-size: 0.8rem; line-height: 1.8; }
|
||||
@media (max-width: 768px) { .layout { grid-template-columns: 1fr; } }
|
||||
</style>
|
||||
<div class="container">
|
||||
|
|
@ -148,13 +148,13 @@ class FolkVideoPlayer extends HTMLElement {
|
|||
<div style="width:80px;height:80px;border-radius:50%;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||||
</div>
|
||||
<p style="font-size:1.1rem;font-weight:600;margin-bottom:0.5rem;color:#e2e8f0">${this.currentVideo}</p>
|
||||
<p style="font-size:0.85rem;color:#94a3b8">${this.getExtension(this.currentVideo).toUpperCase()} · ${sizeStr}${durStr ? ` · ${durStr}` : ""}</p>
|
||||
${selectedVideo?.date ? `<p style="font-size:0.8rem;color:#64748b;margin-top:0.5rem">Recorded ${selectedVideo.date}</p>` : ""}
|
||||
<p style="font-size:0.7rem;color:#475569;margin-top:1.5rem;opacity:0.7">Demo preview — connect rTube to stream real video</p>
|
||||
<p style="font-size:1.1rem;font-weight:600;margin-bottom:0.5rem;color:var(--rs-text-primary)">${this.currentVideo}</p>
|
||||
<p style="font-size:0.85rem;color:var(--rs-text-secondary)">${this.getExtension(this.currentVideo).toUpperCase()} · ${sizeStr}${durStr ? ` · ${durStr}` : ""}</p>
|
||||
${selectedVideo?.date ? `<p style="font-size:0.8rem;color:var(--rs-text-muted);margin-top:0.5rem">Recorded ${selectedVideo.date}</p>` : ""}
|
||||
<p style="font-size:0.7rem;color:var(--rs-text-secondary);margin-top:1.5rem;opacity:0.7">Demo preview — connect rTube to stream real video</p>
|
||||
</div>`;
|
||||
} else if (!this.isPlayable(this.currentVideo)) {
|
||||
player = `<div class="placeholder"><div class="placeholder-icon">⚠️</div><p><strong>${this.getExtension(this.currentVideo).toUpperCase()}</strong> files cannot play in browsers</p><p style="font-size:0.8rem;color:#475569;margin-top:0.5rem">Download to play locally</p></div>`;
|
||||
player = `<div class="placeholder"><div class="placeholder-icon">⚠️</div><p><strong>${this.getExtension(this.currentVideo).toUpperCase()}</strong> files cannot play in browsers</p><p style="font-size:0.8rem;color:var(--rs-text-secondary);margin-top:0.5rem">Download to play locally</p></div>`;
|
||||
} else {
|
||||
const base = window.location.pathname.replace(/\/$/, "");
|
||||
player = `<video controls autoplay><source src="${base}/api/v/${encodeURIComponent(this.currentVideo)}" type="${this.getExtension(this.currentVideo) === "webm" ? "video/webm" : "video/mp4"}"></video>`;
|
||||
|
|
@ -182,8 +182,8 @@ class FolkVideoPlayer extends HTMLElement {
|
|||
return `
|
||||
<div class="live-section">
|
||||
<div class="live-card">
|
||||
<h3 style="font-size:1rem;margin:0 0 0.5rem;color:#e2e8f0">Watch a Live Stream</h3>
|
||||
<p style="font-size:0.85rem;color:#94a3b8;margin-bottom:1.5rem">Enter the stream key to watch a live broadcast.</p>
|
||||
<h3 style="font-size:1rem;margin:0 0 0.5rem;color:var(--rs-text-primary)">Watch a Live Stream</h3>
|
||||
<p style="font-size:0.85rem;color:var(--rs-text-secondary);margin-bottom:1.5rem">Enter the stream key to watch a live broadcast.</p>
|
||||
<input type="text" placeholder="Stream key (e.g. community-meeting)" data-input="streamkey" />
|
||||
<button class="btn-primary" data-action="watch">Watch Stream</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -383,46 +383,46 @@ class FolkVoteDashboard extends HTMLElement {
|
|||
private render() {
|
||||
this.shadow.innerHTML = `
|
||||
<style>
|
||||
:host { display: block; font-family: system-ui, -apple-system, sans-serif; color: #e2e8f0; }
|
||||
:host { display: block; font-family: system-ui, -apple-system, sans-serif; color: var(--rs-text-primary); }
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
.header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
|
||||
.header-back { padding: 6px 12px; border-radius: 8px; border: 1px solid #334155; background: transparent; color: #94a3b8; cursor: pointer; font-size: 13px; transition: all 0.15s; }
|
||||
.header-back:hover { color: #e2e8f0; border-color: #818cf8; }
|
||||
.header-title { font-size: 18px; font-weight: 700; flex: 1; color: #e2e8f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.header-sub { font-size: 13px; color: #64748b; }
|
||||
.header-back { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--rs-border); background: transparent; color: var(--rs-text-secondary); cursor: pointer; font-size: 13px; transition: all 0.15s; }
|
||||
.header-back:hover { color: var(--rs-text-primary); border-color: var(--rs-primary-hover); }
|
||||
.header-title { font-size: 18px; font-weight: 700; flex: 1; color: var(--rs-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.header-sub { font-size: 13px; color: var(--rs-text-muted); }
|
||||
|
||||
/* Space cards */
|
||||
.space-card {
|
||||
background: #0f172a; border: 1px solid #1e293b; border-radius: 12px;
|
||||
background: var(--rs-bg-page); border: 1px solid var(--rs-border-subtle); border-radius: 12px;
|
||||
padding: 20px; margin-bottom: 12px; cursor: pointer; transition: all 0.2s;
|
||||
}
|
||||
.space-card:hover { border-color: #818cf8; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.1); }
|
||||
.space-card:hover { border-color: var(--rs-primary-hover); transform: translateY(-1px); box-shadow: var(--rs-shadow-md); }
|
||||
.space-name { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
|
||||
.space-desc { font-size: 13px; color: #94a3b8; margin-bottom: 12px; }
|
||||
.space-desc { font-size: 13px; color: var(--rs-text-secondary); margin-bottom: 12px; }
|
||||
.space-meta { display: flex; gap: 16px; flex-wrap: wrap; }
|
||||
.space-stat { display: flex; flex-direction: column; gap: 2px; }
|
||||
.space-stat-value { font-size: 15px; font-weight: 600; color: #818cf8; }
|
||||
.space-stat-label { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
.space-stat-value { font-size: 15px; font-weight: 600; color: var(--rs-primary-hover); }
|
||||
.space-stat-label { font-size: 11px; color: var(--rs-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
|
||||
/* Proposal cards — Reddit layout */
|
||||
.proposal {
|
||||
background: #0f172a; border: 1px solid #1e293b; border-radius: 12px;
|
||||
background: var(--rs-bg-page); border: 1px solid var(--rs-border-subtle); border-radius: 12px;
|
||||
margin-bottom: 10px; transition: border-color 0.2s;
|
||||
display: flex; overflow: hidden;
|
||||
}
|
||||
.proposal:hover { border-color: #334155; }
|
||||
.proposal:hover { border-color: var(--rs-border); }
|
||||
|
||||
/* Reddit-style vote column */
|
||||
.vote-col {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
padding: 12px 6px; gap: 2px; flex-shrink: 0; width: 56px;
|
||||
background: rgba(30,41,59,0.5); border-right: 1px solid #1e293b;
|
||||
background: var(--rs-bg-surface); border-right: 1px solid var(--rs-border-subtle);
|
||||
}
|
||||
.vote-chevron {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
width: 32px; height: 28px; border: none; border-radius: 6px;
|
||||
background: transparent; cursor: pointer; color: #475569;
|
||||
background: transparent; cursor: pointer; color: var(--rs-text-muted);
|
||||
transition: all 0.15s; padding: 0;
|
||||
}
|
||||
.vote-chevron:hover { background: rgba(129,140,248,0.1); }
|
||||
|
|
@ -430,23 +430,23 @@ class FolkVoteDashboard extends HTMLElement {
|
|||
.vote-chevron.down:hover { color: #3b82f6; }
|
||||
.vote-chevron:active { transform: scale(0.9); }
|
||||
.vote-score {
|
||||
font-size: 16px; font-weight: 800; color: #e2e8f0;
|
||||
font-size: 16px; font-weight: 800; color: var(--rs-text-primary);
|
||||
font-variant-numeric: tabular-nums; line-height: 1;
|
||||
padding: 2px 0;
|
||||
}
|
||||
.vote-score.positive { color: #f97316; }
|
||||
.vote-score.negative { color: #3b82f6; }
|
||||
.qv-cost {
|
||||
font-size: 9px; color: #475569; text-align: center;
|
||||
font-size: 9px; color: var(--rs-text-muted); text-align: center;
|
||||
white-space: nowrap; margin-top: 2px;
|
||||
}
|
||||
|
||||
/* Right content area */
|
||||
.proposal-body { flex: 1; padding: 14px 16px; min-width: 0; }
|
||||
.proposal-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
|
||||
.proposal-title { font-size: 15px; font-weight: 600; color: #e2e8f0; cursor: pointer; line-height: 1.4; }
|
||||
.proposal-title:hover { color: #818cf8; }
|
||||
.proposal-desc { font-size: 13px; color: #64748b; margin-bottom: 8px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
.proposal-title { font-size: 15px; font-weight: 600; color: var(--rs-text-primary); cursor: pointer; line-height: 1.4; }
|
||||
.proposal-title:hover { color: var(--rs-primary-hover); }
|
||||
.proposal-desc { font-size: 13px; color: var(--rs-text-muted); margin-bottom: 8px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
|
||||
/* Status badge */
|
||||
.badge {
|
||||
|
|
@ -458,19 +458,19 @@ class FolkVoteDashboard extends HTMLElement {
|
|||
|
||||
/* Score / progress */
|
||||
.score-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
|
||||
.score-label { font-size: 13px; color: #94a3b8; white-space: nowrap; }
|
||||
.score-label { font-size: 13px; color: var(--rs-text-secondary); white-space: nowrap; }
|
||||
.score-value { font-weight: 700; font-variant-numeric: tabular-nums; }
|
||||
.score-bar { flex: 1; height: 8px; border-radius: 4px; background: #1e293b; overflow: hidden; min-width: 100px; }
|
||||
.score-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--rs-bg-surface); overflow: hidden; min-width: 100px; }
|
||||
.score-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
|
||||
|
||||
/* Vote buttons */
|
||||
.vote-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
|
||||
.vote-btn {
|
||||
padding: 6px 14px; border-radius: 8px; border: 1px solid #334155;
|
||||
background: #1e293b; color: #94a3b8; cursor: pointer; font-size: 13px;
|
||||
padding: 6px 14px; border-radius: 8px; border: 1px solid var(--rs-border);
|
||||
background: var(--rs-bg-surface); color: var(--rs-text-secondary); cursor: pointer; font-size: 13px;
|
||||
font-weight: 500; transition: all 0.15s; white-space: nowrap;
|
||||
}
|
||||
.vote-btn:hover { border-color: #818cf8; color: #e2e8f0; background: rgba(129,140,248,0.1); }
|
||||
.vote-btn:hover { border-color: var(--rs-primary-hover); color: var(--rs-text-primary); background: rgba(129,140,248,0.1); }
|
||||
.vote-btn:active { transform: scale(0.97); }
|
||||
.vote-btn.yes { border-color: rgba(34,197,94,0.4); color: #22c55e; }
|
||||
.vote-btn.yes:hover { background: rgba(34,197,94,0.1); border-color: #22c55e; }
|
||||
|
|
@ -478,79 +478,79 @@ class FolkVoteDashboard extends HTMLElement {
|
|||
.vote-btn.no:hover { background: rgba(239,68,68,0.1); border-color: #ef4444; }
|
||||
.vote-btn.abstain { border-color: rgba(245,158,11,0.4); color: #f59e0b; }
|
||||
.vote-btn.abstain:hover { background: rgba(245,158,11,0.1); border-color: #f59e0b; }
|
||||
.vote-sep { color: #334155; font-size: 12px; }
|
||||
.vote-sep { color: var(--rs-border); font-size: 12px; }
|
||||
|
||||
/* Tally */
|
||||
.tally { display: flex; gap: 20px; margin: 10px 0 8px; }
|
||||
.tally-item { text-align: center; }
|
||||
.tally-value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
|
||||
.tally-label { font-size: 11px; color: #64748b; text-transform: uppercase; }
|
||||
.tally-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: #1e293b; margin-top: 6px; }
|
||||
.tally-label { font-size: 11px; color: var(--rs-text-muted); text-transform: uppercase; }
|
||||
.tally-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--rs-bg-surface); margin-top: 6px; }
|
||||
.tally-bar-yes { background: #22c55e; transition: width 0.3s; }
|
||||
.tally-bar-no { background: #ef4444; transition: width 0.3s; }
|
||||
.tally-bar-abstain { background: #f59e0b; transition: width 0.3s; }
|
||||
|
||||
/* Meta row */
|
||||
.meta { display: flex; gap: 16px; font-size: 12px; color: #475569; margin-top: 8px; flex-wrap: wrap; }
|
||||
.meta { display: flex; gap: 16px; font-size: 12px; color: var(--rs-text-muted); margin-top: 8px; flex-wrap: wrap; }
|
||||
.meta span { white-space: nowrap; }
|
||||
|
||||
/* Create form */
|
||||
.create-form { background: #0f172a; border: 2px solid #818cf8; border-radius: 12px; padding: 20px; margin-bottom: 16px; }
|
||||
.create-form h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: #818cf8; }
|
||||
.create-form { background: var(--rs-bg-page); border: 2px solid var(--rs-primary-hover); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
|
||||
.create-form h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--rs-primary-hover); }
|
||||
.form-field { margin-bottom: 12px; }
|
||||
.form-label { display: block; font-size: 12px; color: #94a3b8; margin-bottom: 4px; font-weight: 500; }
|
||||
.form-label { display: block; font-size: 12px; color: var(--rs-text-secondary); margin-bottom: 4px; font-weight: 500; }
|
||||
.form-input, .form-textarea {
|
||||
width: 100%; padding: 10px 12px; border-radius: 8px;
|
||||
border: 1px solid #334155; background: #1e293b; color: #e2e8f0;
|
||||
border: 1px solid var(--rs-input-border); background: var(--rs-input-bg); color: var(--rs-input-text);
|
||||
font-size: 14px; font-family: inherit; transition: border-color 0.15s;
|
||||
}
|
||||
.form-input:focus, .form-textarea:focus { outline: none; border-color: #818cf8; }
|
||||
.form-input:focus, .form-textarea:focus { outline: none; border-color: var(--rs-primary-hover); }
|
||||
.form-textarea { resize: vertical; min-height: 80px; }
|
||||
.form-actions { display: flex; gap: 8px; }
|
||||
.btn-primary {
|
||||
padding: 8px 20px; border-radius: 8px; border: none;
|
||||
background: linear-gradient(to right, #818cf8, #6366f1); color: white;
|
||||
background: linear-gradient(to right, var(--rs-primary-hover), var(--rs-primary)); color: white;
|
||||
font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.15s;
|
||||
}
|
||||
.btn-primary:hover { opacity: 0.9; }
|
||||
.btn-ghost {
|
||||
padding: 8px 16px; border-radius: 8px; border: 1px solid #334155;
|
||||
background: transparent; color: #94a3b8; cursor: pointer; font-size: 13px;
|
||||
padding: 8px 16px; border-radius: 8px; border: 1px solid var(--rs-border);
|
||||
background: transparent; color: var(--rs-text-secondary); cursor: pointer; font-size: 13px;
|
||||
}
|
||||
.btn-ghost:hover { border-color: #475569; color: #e2e8f0; }
|
||||
.btn-ghost:hover { border-color: var(--rs-border-strong); color: var(--rs-text-primary); }
|
||||
.btn-new {
|
||||
padding: 8px 16px; border-radius: 8px; border: 1px dashed #334155;
|
||||
background: transparent; color: #818cf8; cursor: pointer; font-size: 13px;
|
||||
padding: 8px 16px; border-radius: 8px; border: 1px dashed var(--rs-border);
|
||||
background: transparent; color: var(--rs-primary-hover); cursor: pointer; font-size: 13px;
|
||||
font-weight: 500; transition: all 0.15s;
|
||||
}
|
||||
.btn-new:hover { border-color: #818cf8; background: rgba(129,140,248,0.05); }
|
||||
.btn-new:hover { border-color: var(--rs-primary-hover); background: rgba(129,140,248,0.05); }
|
||||
|
||||
/* Detail view */
|
||||
.detail { background: #0f172a; border: 1px solid #1e293b; border-radius: 12px; padding: 24px; }
|
||||
.detail { background: var(--rs-bg-page); border: 1px solid var(--rs-border-subtle); border-radius: 12px; padding: 24px; }
|
||||
.detail-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
|
||||
.detail-desc { font-size: 14px; color: #94a3b8; line-height: 1.6; margin-bottom: 16px; }
|
||||
.detail-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid #1e293b; }
|
||||
.detail-section-title { font-size: 12px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }
|
||||
.detail-desc { font-size: 14px; color: var(--rs-text-secondary); line-height: 1.6; margin-bottom: 16px; }
|
||||
.detail-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rs-border-subtle); }
|
||||
.detail-section-title { font-size: 12px; font-weight: 600; color: var(--rs-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }
|
||||
|
||||
.empty { text-align: center; color: #475569; padding: 48px 20px; }
|
||||
.empty { text-align: center; color: var(--rs-text-muted); padding: 48px 20px; }
|
||||
.empty-icon { font-size: 2.5rem; margin-bottom: 8px; }
|
||||
.empty-text { font-size: 14px; }
|
||||
.loading { text-align: center; color: #64748b; padding: 48px 20px; }
|
||||
.error { text-align: center; color: #ef4444; padding: 16px; background: rgba(239,68,68,0.05); border-radius: 8px; margin-bottom: 12px; font-size: 13px; }
|
||||
.loading { text-align: center; color: var(--rs-text-muted); padding: 48px 20px; }
|
||||
.error { text-align: center; color: var(--rs-error); padding: 16px; background: rgba(239,68,68,0.05); border-radius: 8px; margin-bottom: 12px; font-size: 13px; }
|
||||
|
||||
.demo-banner {
|
||||
background: linear-gradient(135deg, rgba(129,140,248,0.08), rgba(192,132,252,0.05));
|
||||
border: 1px solid rgba(129,140,248,0.2); border-radius: 10px;
|
||||
padding: 12px 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
|
||||
font-size: 13px; color: #94a3b8;
|
||||
font-size: 13px; color: var(--rs-text-secondary);
|
||||
}
|
||||
.demo-banner strong { color: #818cf8; }
|
||||
.demo-banner strong { color: var(--rs-primary-hover); }
|
||||
|
||||
/* Quadratic weight picker (compact inline) */
|
||||
.qv-weights { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
|
||||
.qv-weight {
|
||||
padding: 3px 8px; border-radius: 6px; border: 1px solid #334155;
|
||||
background: #1e293b; color: #94a3b8; cursor: pointer; font-size: 11px;
|
||||
padding: 3px 8px; border-radius: 6px; border: 1px solid var(--rs-border);
|
||||
background: var(--rs-bg-surface); color: var(--rs-text-secondary); cursor: pointer; font-size: 11px;
|
||||
font-weight: 600; transition: all 0.12s; white-space: nowrap;
|
||||
}
|
||||
.qv-weight:hover { border-color: #f97316; color: #fb923c; background: rgba(249,115,22,0.08); }
|
||||
|
|
@ -560,26 +560,26 @@ class FolkVoteDashboard extends HTMLElement {
|
|||
|
||||
/* Trend chart */
|
||||
.trend-section {
|
||||
background: #0f172a; border: 1px solid #1e293b; border-radius: 12px;
|
||||
background: var(--rs-bg-page); border: 1px solid var(--rs-border-subtle); border-radius: 12px;
|
||||
padding: 16px 20px; margin-bottom: 16px;
|
||||
}
|
||||
.trend-header {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.trend-title { font-size: 13px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
.trend-title { font-size: 13px; font-weight: 600; color: var(--rs-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
.trend-toggle {
|
||||
font-size: 11px; color: #64748b; cursor: pointer; background: none;
|
||||
border: 1px solid #334155; border-radius: 6px; padding: 3px 8px;
|
||||
font-size: 11px; color: var(--rs-text-muted); cursor: pointer; background: none;
|
||||
border: 1px solid var(--rs-border); border-radius: 6px; padding: 3px 8px;
|
||||
}
|
||||
.trend-toggle:hover { border-color: #818cf8; color: #818cf8; }
|
||||
.trend-toggle:hover { border-color: var(--rs-primary-hover); color: var(--rs-primary-hover); }
|
||||
.trend-chart { position: relative; }
|
||||
.trend-chart svg { display: block; width: 100%; }
|
||||
.trend-legend {
|
||||
display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px;
|
||||
}
|
||||
.trend-legend-item {
|
||||
display: flex; align-items: center; gap: 5px; font-size: 11px; color: #94a3b8;
|
||||
display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--rs-text-secondary);
|
||||
}
|
||||
.trend-legend-dot {
|
||||
width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
|
||||
|
|
@ -615,7 +615,7 @@ class FolkVoteDashboard extends HTMLElement {
|
|||
<div class="space-card" data-space="${s.slug}">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">
|
||||
<div class="space-name">${this.esc(s.name)}</div>
|
||||
<span class="badge" style="background:rgba(129,140,248,0.1);color:#818cf8">
|
||||
<span class="badge" style="background:rgba(129,140,248,0.1);color:var(--rs-primary-hover)">
|
||||
${s.visibility === "public" ? "Public" : s.visibility === "permissioned" ? "Permissioned" : "Private"}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -689,7 +689,7 @@ class FolkVoteDashboard extends HTMLElement {
|
|||
` : ""}
|
||||
|
||||
${decided.length > 0 ? `
|
||||
<div style="font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:0.05em;margin:16px 0 8px;display:flex;align-items:center;gap:6px">
|
||||
<div style="font-size:12px;font-weight:600;color:var(--rs-text-muted);text-transform:uppercase;letter-spacing:0.05em;margin:16px 0 8px;display:flex;align-items:center;gap:6px">
|
||||
<span>📋</span> Decided (${decided.length})
|
||||
</div>
|
||||
${decided.map(p => this.renderProposalCard(p, threshold)).join("")}
|
||||
|
|
@ -911,7 +911,7 @@ class FolkVoteDashboard extends HTMLElement {
|
|||
<span class="score-label"><span class="score-value" style="color:#3b82f6;font-size:24px">${Math.round(p.score)}</span> / ${threshold}</span>
|
||||
<div class="score-bar" style="height:10px"><div class="score-fill" style="width:${pct}%;background:linear-gradient(90deg,#3b82f6,#818cf8)"></div></div>
|
||||
</div>
|
||||
<div style="font-size:12px;color:#475569;margin:8px 0 12px">
|
||||
<div style="font-size:12px;color:var(--rs-text-muted);margin:8px 0 12px">
|
||||
Needs ${Math.max(0, Math.round(threshold - p.score))} more to advance to final vote. Cost: weight² credits.
|
||||
</div>
|
||||
<div class="vote-row">
|
||||
|
|
@ -956,7 +956,7 @@ class FolkVoteDashboard extends HTMLElement {
|
|||
<div class="tally-bar-no" style="width:${(p.final_no/totalFinal)*100}%"></div>
|
||||
<div class="tally-bar-abstain" style="width:${(p.final_abstain/totalFinal)*100}%"></div>
|
||||
</div>` : ""}
|
||||
<div style="font-size:13px;color:#475569;margin-top:8px">
|
||||
<div style="font-size:13px;color:var(--rs-text-muted);margin-top:8px">
|
||||
Conviction score was <strong style="color:${this.getStatusColor(p.status)}">${Math.round(p.score)}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -721,7 +721,7 @@ class FolkWalletViewer extends HTMLElement {
|
|||
}
|
||||
.hero-title {
|
||||
font-size: 28px; font-weight: 700; margin: 0 0 6px;
|
||||
background: linear-gradient(135deg, #00d4ff, #4ade80);
|
||||
background: linear-gradient(135deg, var(--rs-accent), #4ade80);
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
|
@ -734,10 +734,10 @@ class FolkWalletViewer extends HTMLElement {
|
|||
border: 1px solid var(--rs-input-border); background: var(--rs-bg-surface); color: var(--rs-text-primary);
|
||||
font-family: monospace; font-size: 14px;
|
||||
}
|
||||
.address-bar input:focus { border-color: #00d4ff; outline: none; box-shadow: 0 0 0 2px rgba(0,212,255,0.15); }
|
||||
.address-bar input:focus { border-color: var(--rs-accent); outline: none; box-shadow: 0 0 0 2px rgba(20,184,166,0.15); }
|
||||
.address-bar button {
|
||||
padding: 12px 24px; border-radius: 10px; border: none;
|
||||
background: linear-gradient(135deg, #00d4ff, #00b8d9); color: #000;
|
||||
background: linear-gradient(135deg, var(--rs-accent), var(--rs-accent-hover)); color: #000;
|
||||
font-weight: 600; cursor: pointer; font-size: 14px; transition: opacity 0.2s;
|
||||
}
|
||||
.address-bar button:hover { opacity: 0.9; }
|
||||
|
|
@ -768,7 +768,7 @@ class FolkWalletViewer extends HTMLElement {
|
|||
text-transform: uppercase; letter-spacing: 0.5px;
|
||||
}
|
||||
.wallet-badge.safe { background: rgba(74,222,128,0.12); color: #4ade80; border: 1px solid rgba(74,222,128,0.25); }
|
||||
.wallet-badge.eoa { background: rgba(0,212,255,0.12); color: #00d4ff; border: 1px solid rgba(0,212,255,0.25); }
|
||||
.wallet-badge.eoa { background: rgba(20,184,166,0.12); color: var(--rs-accent); border: 1px solid rgba(20,184,166,0.25); }
|
||||
.wallet-badge.encryptid { background: rgba(168,85,247,0.12); color: #a855f7; border: 1px solid rgba(168,85,247,0.25); }
|
||||
|
||||
/* ── My Wallets section ── */
|
||||
|
|
@ -786,7 +786,7 @@ class FolkWalletViewer extends HTMLElement {
|
|||
background: transparent; color: var(--rs-text-secondary); cursor: pointer; font-size: 12px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.link-wallet-btn:hover { border-color: #00d4ff; color: #00d4ff; background: rgba(0,212,255,0.05); }
|
||||
.link-wallet-btn:hover { border-color: var(--rs-accent); color: var(--rs-accent); background: rgba(20,184,166,0.05); }
|
||||
.wallet-list { display: flex; flex-direction: column; gap: 6px; }
|
||||
.wallet-item {
|
||||
display: flex; align-items: center; gap: 10px; padding: 10px 12px;
|
||||
|
|
@ -817,7 +817,7 @@ class FolkWalletViewer extends HTMLElement {
|
|||
border-radius: 8px; border: 1px solid var(--rs-border); background: var(--rs-bg-surface);
|
||||
cursor: pointer; transition: all 0.2s; font-size: 13px; color: var(--rs-text-primary);
|
||||
}
|
||||
.provider-item:hover { border-color: #00d4ff; background: rgba(0,212,255,0.05); }
|
||||
.provider-item:hover { border-color: var(--rs-accent); background: rgba(20,184,166,0.05); }
|
||||
.provider-item img { width: 20px; height: 20px; border-radius: 4px; }
|
||||
.provider-cancel {
|
||||
margin-top: 8px; padding: 4px 10px; border-radius: 6px; border: none;
|
||||
|
|
@ -862,7 +862,7 @@ class FolkWalletViewer extends HTMLElement {
|
|||
background: var(--rs-bg-surface); border: 1px solid var(--rs-border-subtle); border-radius: 10px;
|
||||
cursor: pointer; transition: all 0.2s;
|
||||
}
|
||||
.example-item:hover { border-color: #00d4ff; background: var(--rs-bg-hover); }
|
||||
.example-item:hover { border-color: var(--rs-accent); background: var(--rs-bg-hover); }
|
||||
.example-name { font-size: 13px; font-weight: 500; color: var(--rs-text-primary); }
|
||||
.example-addr { font-size: 11px; color: var(--rs-text-muted); font-family: monospace; }
|
||||
.example-type {
|
||||
|
|
@ -870,7 +870,7 @@ class FolkWalletViewer extends HTMLElement {
|
|||
padding: 2px 8px; border-radius: 4px; text-transform: uppercase;
|
||||
}
|
||||
.example-type.safe { background: rgba(74,222,128,0.1); color: #4ade80; }
|
||||
.example-type.eoa { background: rgba(0,212,255,0.1); color: #00d4ff; }
|
||||
.example-type.eoa { background: rgba(20,184,166,0.1); color: var(--rs-accent); }
|
||||
|
||||
/* ── Dashboard: chains ── */
|
||||
.chains { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
|
||||
|
|
@ -890,7 +890,7 @@ class FolkWalletViewer extends HTMLElement {
|
|||
padding: 14px; text-align: center;
|
||||
}
|
||||
.stat-label { font-size: 11px; color: var(--rs-text-secondary); text-transform: uppercase; margin-bottom: 6px; }
|
||||
.stat-value { font-size: 20px; font-weight: 700; color: #00d4ff; }
|
||||
.stat-value { font-size: 20px; font-weight: 700; color: var(--rs-accent); }
|
||||
|
||||
/* ── View Tabs ── */
|
||||
.view-tabs {
|
||||
|
|
@ -904,7 +904,7 @@ class FolkWalletViewer extends HTMLElement {
|
|||
}
|
||||
.view-tab:hover { color: var(--rs-text-primary); background: var(--rs-bg-hover); }
|
||||
.view-tab.active {
|
||||
color: #00d4ff; border-bottom-color: #00d4ff;
|
||||
color: var(--rs-accent); border-bottom-color: var(--rs-accent);
|
||||
}
|
||||
|
||||
/* ── Viz container ── */
|
||||
|
|
@ -928,7 +928,7 @@ class FolkWalletViewer extends HTMLElement {
|
|||
.loading { text-align: center; color: var(--rs-text-secondary); padding: 40px; }
|
||||
.loading .spinner {
|
||||
display: inline-block; width: 20px; height: 20px;
|
||||
border: 2px solid var(--rs-border); border-top-color: #00d4ff; border-radius: 50%;
|
||||
border: 2px solid var(--rs-border); border-top-color: var(--rs-accent); border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite; margin-right: 8px; vertical-align: middle;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
|
|
|||
|
|
@ -1452,7 +1452,7 @@ const STYLES = `
|
|||
}
|
||||
|
||||
.tab-close {
|
||||
display: flex;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
|
|
@ -1468,8 +1468,8 @@ const STYLES = `
|
|||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
.tab:hover .tab-close { opacity: 0.6; }
|
||||
.tab-close:hover { opacity: 1 !important; background: rgba(239,68,68,0.2); color: #ef4444; }
|
||||
.tab.active .tab-close { display: flex; opacity: 0.6; }
|
||||
.tab.active .tab-close:hover { opacity: 1; background: rgba(239,68,68,0.2); color: #ef4444; }
|
||||
|
||||
/* Space layer tab styling */
|
||||
.tab--space-layer {
|
||||
|
|
|
|||
Loading…
Reference in New Issue