`;
}
@@ -1093,7 +1093,7 @@ class FolkCampaignPlanner extends HTMLElement {
});
if (platformMap.size === 0) {
- return '
';
}
const columns = Array.from(platformMap.entries()).map(([platform, items]) => {
@@ -1151,7 +1151,7 @@ class FolkCampaignPlanner extends HTMLElement {
});
if (posts.length === 0) {
- return '
';
}
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 `
+ return `
${icon}
- ${esc(d.label || preview || 'New Post')}
+ ${esc(d.label || preview || 'New Post')}
-
${esc(preview)}
+
${esc(preview)}
-
+
-
${charCount}/${charMax}
+
${charCount}/${charMax}
-
${dateStr}
+
${dateStr}
`;
}
@@ -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 `
+ return `
🧵
- ${esc(d.label || 'Thread')}
+ ${esc(d.label || 'Thread')}
-
${d.tweetCount} tweet${d.tweetCount === 1 ? '' : 's'}
-
${esc(d.preview || '')}
+
${d.tweetCount} tweet${d.tweetCount === 1 ? '' : 's'}
+
${esc(d.preview || '')}
`;
}
@@ -1404,11 +1404,11 @@ class FolkCampaignPlanner extends HTMLElement {
${icon}
-
${esc(d.label)}
-
${esc(d.handle)}
+
${esc(d.label)}
+
${esc(d.handle)}
-
${connectedCount} post${connectedCount === 1 ? '' : 's'} connected
+
${connectedCount} post${connectedCount === 1 ? '' : 's'} connected
`;
}
@@ -1420,11 +1420,11 @@ class FolkCampaignPlanner extends HTMLElement {
🎯
-
${esc(d.label)}
-
${esc(d.sizeEstimate)}
+
${esc(d.label)}
+
${esc(d.sizeEstimate)}
-
${connectedCount} targeted \u00b7 ${esc(d.description).substring(0, 40)}
+
${connectedCount} targeted \u00b7 ${esc(d.description).substring(0, 40)}
`;
}
diff --git a/modules/rsocials/components/folk-thread-gallery.ts b/modules/rsocials/components/folk-thread-gallery.ts
index 78767a3..9491b3d 100644
--- a/modules/rsocials/components/folk-thread-gallery.ts
+++ b/modules/rsocials/components/folk-thread-gallery.ts
@@ -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;
}
diff --git a/modules/rswag/components/folk-swag-designer.ts b/modules/rswag/components/folk-swag-designer.ts
index 781c134..5a2067f 100644
--- a/modules/rswag/components/folk-swag-designer.ts
+++ b/modules/rswag/components/folk-swag-designer.ts
@@ -578,34 +578,34 @@ class FolkSwagDesigner extends HTMLElement {
@@ -148,13 +148,13 @@ class FolkVideoPlayer extends HTMLElement {
-
${this.currentVideo}
-
${this.getExtension(this.currentVideo).toUpperCase()} · ${sizeStr}${durStr ? ` · ${durStr}` : ""}
- ${selectedVideo?.date ? `
Recorded ${selectedVideo.date}
` : ""}
-
Demo preview — connect rTube to stream real video
+
${this.currentVideo}
+
${this.getExtension(this.currentVideo).toUpperCase()} · ${sizeStr}${durStr ? ` · ${durStr}` : ""}
+ ${selectedVideo?.date ? `
Recorded ${selectedVideo.date}
` : ""}
+
Demo preview — connect rTube to stream real video
`;
} else if (!this.isPlayable(this.currentVideo)) {
- player = `
⚠️
${this.getExtension(this.currentVideo).toUpperCase()} files cannot play in browsers
Download to play locally
`;
+ player = `
⚠️
${this.getExtension(this.currentVideo).toUpperCase()} files cannot play in browsers
Download to play locally
`;
} else {
const base = window.location.pathname.replace(/\/$/, "");
player = `
`;
@@ -182,8 +182,8 @@ class FolkVideoPlayer extends HTMLElement {
return `
-
Watch a Live Stream
-
Enter the stream key to watch a live broadcast.
+
Watch a Live Stream
+
Enter the stream key to watch a live broadcast.
diff --git a/modules/rvote/components/folk-vote-dashboard.ts b/modules/rvote/components/folk-vote-dashboard.ts
index ce15434..044c385 100644
--- a/modules/rvote/components/folk-vote-dashboard.ts
+++ b/modules/rvote/components/folk-vote-dashboard.ts
@@ -383,46 +383,46 @@ class FolkVoteDashboard extends HTMLElement {
private render() {
this.shadow.innerHTML = `