fc3g(ext): popup UI — platforms + sources tabs, export-all CTA, status indicator

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-23 23:35:55 -04:00
parent df82abe75e
commit b7832c941d
3 changed files with 380 additions and 0 deletions
@@ -0,0 +1,94 @@
+:root {
+  --bg: #14171A;
+  --surface: #1F2428;
+  --on-surface: #E8E4D8;
+  --on-surface-variant: rgba(232, 228, 216, 0.65);
+  --accent: #F4BA7A;
+  --error: #DC5050;
+  --success: #4CAF50;
+  --warning: #FFB300;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-width: 340px;
+  font: 14px/1.4 system-ui, sans-serif;
+  background: var(--bg);
+  color: var(--on-surface);
+}
+.hidden { display: none !important; }
+.topbar {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 10px 14px; background: var(--surface);
+}
+.brand { font-family: Georgia, serif; font-size: 16px; font-weight: 500; color: var(--accent); }
+.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--on-surface-variant); }
+.dot.connected { background: var(--success); }
+
+.setup { padding: 20px; text-align: center; }
+.alert {
+  background: var(--surface); padding: 12px; border-radius: 6px;
+  margin-bottom: 12px; border-left: 3px solid var(--accent);
+}
+.alert.alert-error { border-left-color: var(--error); }
+.alert strong { display: block; margin-bottom: 4px; }
+.alert p { margin: 0; color: var(--on-surface-variant); font-size: 13px; }
+
+.tabs { display: flex; border-bottom: 1px solid var(--surface); }
+.tab {
+  flex: 1; padding: 10px 0; background: none; border: none;
+  color: var(--on-surface-variant); cursor: pointer; font: inherit;
+  border-bottom: 2px solid transparent;
+}
+.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
+.tab-panel { padding: 10px; }
+
+.platform-card, .source-row {
+  display: flex; align-items: center; gap: 10px;
+  padding: 10px; margin-bottom: 6px; background: var(--surface);
+  border-radius: 6px; cursor: pointer;
+}
+.platform-card.disabled { opacity: 0.5; cursor: not-allowed; }
+.platform-card.loading { opacity: 0.6; cursor: wait; }
+.platform-icon {
+  width: 28px; height: 28px; border-radius: 50%;
+  display: grid; place-items: center; font-weight: 600; color: white;
+}
+.info { flex: 1; min-width: 0; }
+.info .name { font-weight: 500; }
+.info .status { font-size: 12px; color: var(--on-surface-variant); }
+.info .status.ready { color: var(--success); }
+.info .status.error { color: var(--error); }
+.info .status.no-cookies { color: var(--warning); }
+.action-icon { color: var(--on-surface-variant); }
+
+.btn {
+  padding: 10px 14px; border: none; border-radius: 6px; cursor: pointer;
+  font: 500 14px/1 system-ui, sans-serif;
+}
+.btn.primary { background: var(--accent); color: var(--bg); }
+.btn.primary:hover { filter: brightness(1.05); }
+.btn.primary:disabled { opacity: 0.5; cursor: not-allowed; }
+.btn.block { display: block; width: 100%; margin-top: 8px; }
+.btn.link { background: none; color: var(--on-surface-variant); padding: 4px; }
+.btn.link:hover { color: var(--accent); }
+
+.source-row .play {
+  background: none; border: none; color: var(--on-surface-variant);
+  cursor: pointer; padding: 4px;
+}
+.source-row .play:hover { color: var(--accent); }
+.source-row .url { font-size: 11px; color: var(--on-surface-variant); word-break: break-all; }
+
+.status-message {
+  padding: 10px 14px; margin: 8px 10px; border-radius: 6px;
+  background: var(--surface); border-left: 3px solid;
+}
+.status-message.success { border-left-color: var(--success); }
+.status-message.error { border-left-color: var(--error); }
+.status-message.warning { border-left-color: var(--warning); }
+
+.footer {
+  border-top: 1px solid var(--surface);
+  padding: 6px 10px; text-align: right;
+}