jlkruger/catcher-of-tabs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: jlkruger:f6507c5c16adc4653db4becb56ef11214128a21f
Branches Tags
jlkruger:main jlkruger:public
..
compare: jlkruger:37e3a5a9153f48a7db8893c4ffb87ef58194901c
Branches Tags
jlkruger:public jlkruger:main

2 Commits
f6507c5c16 ... 37e3a5a915

Author SHA1 Message Date
JL Kruger
37e3a5a915 publish next public version to github 2026-04-01 19:53:08 +02:00
JL Kruger
ed6612f9e8 asked the machines to make some improvement. window select. other browser support. I think. I haven't tested it yet. YOLO. 2026-04-01 19:49:33 +02:00
5 changed files with 548 additions and 204 deletions
Expand all files Collapse all files

39
README.md
View File

@@ -2,7 +2,7 @@
> *A browser extension for people who open 47 tabs and call it "research".* > *A browser extension for people who open 47 tabs and call it "research".*
TabCatcher is a tiny Microsoft Edge (and Chrome-compatible) extension that rounds up all your feral open tabs and herds them into a neat Markdown file — titles, URLs, descriptions, and all. TabCatcher is a tiny browser extension that rounds up all your feral open tabs and herds them into a neat Markdown file — titles, URLs, descriptions, and all. Works on Chrome, Chromium, Firefox, and Edge.
--- ---
@@ -13,6 +13,7 @@ You click a button. Your tabs become a `.md` file. That's it. That's the whole t
More specifically: More specifically:
- Counts your open tabs and windows so you can feel something - Counts your open tabs and windows so you can feel something
- **Lets you choose** which windows or tab groups to catch — ignore the noise, export the signal
- Fetches `<meta>` descriptions from each page (optional — it does slow things down a smidge) - Fetches `<meta>` descriptions from each page (optional — it does slow things down a smidge)
- Groups tabs by window if you're the type who organizes chaos into labeled chaos - Groups tabs by window if you're the type who organizes chaos into labeled chaos
- Stamps the export with a timestamp so future-you knows exactly when past-you had 74 tabs open at 2am - Stamps the export with a timestamp so future-you knows exactly when past-you had 74 tabs open at 2am
@@ -21,22 +22,44 @@ More specifically:
## Installation ## Installation
This extension isn't on the store (yet). Load it manually: This extension isn't on the stores (yet). Load it manually:
1. Clone or download this repo 1. Clone or download this repo
2. Open Edge and go to `edge://extensions/`
Then follow the steps for your browser:
### Chrome / Chromium
2. Go to `chrome://extensions/`
3. Enable **Developer mode** (toggle, top-right) 3. Enable **Developer mode** (toggle, top-right)
4. Click **Load unpacked** and point it at this folder 4. Click **Load unpacked** and select this folder
5. Pin the extension and marvel at that little icon 5. Pin the extension to your toolbar
### Microsoft Edge
2. Go to `edge://extensions/`
3. Enable **Developer mode** (toggle, left sidebar)
4. Click **Load unpacked** and select this folder
5. Pin the extension to your toolbar
### Firefox
2. Go to `about:debugging#/runtime/this-firefox`
3. Click **Load Temporary Add-on...**
4. Navigate into this folder and select `manifest.json`
5. The extension loads until Firefox restarts — for a permanent install, [sign and submit it to AMO](https://addons.mozilla.org/developers/)
> **Note:** Tab group selection is a Chrome/Edge feature. On Firefox you'll see windows only — that's expected.
--- ---
## Usage ## Usage
1. Click the TabCatcher icon in your toolbar 1. Click the TabCatcher icon in your toolbar
2. Pick your export options 2. Check or uncheck which **windows** (and tab groups, on Chrome/Edge) to include
3. Hit **Export Tabs** 3. Pick your export options
4. Save the `.md` file somewhere you'll definitely find it later 4. Hit **Export Tabs**
5. Save the `.md` file somewhere you'll definitely find it later
### Export options ### Export options

15
manifest.json
View File

@@ -1,13 +1,14 @@
{ {
"manifest_version": 3, "manifest_version": 3,
"name": "Edge Tab Catcher", "name": "Tab Catcher",
"version": "1.0.0", "version": "2.0.0",
"description": "Export all open tabs with their URLs, titles, and descriptions to a Markdown file", "description": "Export selected tabs, windows, or tab groups to a Markdown file",
"permissions": [ "permissions": [
"tabs", "tabs",
"activeTab", "activeTab",
"scripting", "scripting",
"downloads" "downloads",
"tabGroups"
], ],
"action": { "action": {
"default_popup": "popup.html", "default_popup": "popup.html",
@@ -22,6 +23,12 @@
"48": "icon48.png", "48": "icon48.png",
"128": "icon128.png" "128": "icon128.png"
}, },
"browser_specific_settings": {
"gecko": {
"id": "tabcatcher@tabcatcher",
"strict_min_version": "109.0"
}
},
"author": "Your Name", "author": "Your Name",
"homepage_url": "https://github.com/yourusername/tab-exporter" "homepage_url": "https://github.com/yourusername/tab-exporter"
} }

25
popup.html
View File

@@ -3,14 +3,17 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tab Exporter</title> <title>Tab Catcher</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Share+Tech+Mono&display=swap">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body>
<main class="container" role="main"> <main class="container" role="main">
<header> <header>
<h1 id="main-heading">Tab Exporter</h1> <h1 id="main-heading">Tab Catcher</h1>
<p class="subtitle">Export all your open tabs to a Markdown file</p> <p class="subtitle">Export selected tabs to a Markdown file</p>
</header> </header>
<section class="stats" aria-labelledby="stats-heading"> <section class="stats" aria-labelledby="stats-heading">
@@ -25,6 +28,22 @@
</div> </div>
</section> </section>
<section class="selector" aria-labelledby="selector-heading">
<h2 id="selector-heading" class="section-heading">Select Windows &amp; Groups</h2>
<div
id="selector-list"
role="group"
aria-label="Windows and tab groups to export"
aria-live="polite"
>
<div class="selector-loading">Scanning windows...</div>
</div>
<div class="selector-actions">
<button type="button" id="select-all-btn" class="btn-link">Select all</button>
<button type="button" id="deselect-all-btn" class="btn-link">Deselect all</button>
</div>
</section>
<section class="options" aria-labelledby="options-heading"> <section class="options" aria-labelledby="options-heading">
<h2 id="options-heading" class="section-heading">Export Options</h2> <h2 id="options-heading" class="section-heading">Export Options</h2>

217
popup.js
View File

@@ -1,30 +1,129 @@
// Browser API compatibility shim (Chrome uses chrome.*, Firefox exposes browser.*)
const api = (typeof browser !== 'undefined' && browser.tabs) ? browser : chrome;
// Cached window/tab/group data built at load time
let windowSelectorData = []; // [{windowId, focused, tabs, groups}]
// Tab group color lookup (Chrome's string enum → CSS hex)
const GROUP_COLORS = {
grey: '#5f6368', blue: '#1a73e8', red: '#d93025',
yellow: '#f9ab00', green: '#1e8e3e', pink: '#d01884',
purple: '#a142f4', cyan: '#007b83', orange: '#fa903e'
};
// Initialize extension // Initialize extension
document.addEventListener('DOMContentLoaded', async () => { document.addEventListener('DOMContentLoaded', async () => {
await updateStats(); await buildSelectorData();
renderSelector();
updateStats();
setupEventListeners(); setupEventListeners();
}); });
// Update tab and window count statistics // Fetch and cache all window/tab/group data
async function updateStats() { async function buildSelectorData() {
try { try {
const tabs = await chrome.tabs.query({}); const [allTabs, allWindows] = await Promise.all([
const windows = await chrome.windows.getAll(); api.tabs.query({}),
api.windows.getAll()
]);
document.getElementById('tab-count').textContent = tabs.length; windowSelectorData = await Promise.all(allWindows.map(async (win) => {
document.getElementById('window-count').textContent = windows.length; const tabs = allTabs.filter(t => t.windowId === win.id);
let groups = [];
if (api.tabGroups && typeof api.tabGroups.query === 'function') {
try {
groups = await api.tabGroups.query({ windowId: win.id });
} catch (_) {
// tabGroups API present but query failed — treat as no groups
}
}
return { windowId: win.id, focused: win.focused, tabs, groups };
}));
} catch (error) { } catch (error) {
console.error('Error updating stats:', error); console.error('Error building selector data:', error);
} }
} }
// Update tab and window count statistics from cached data
function updateStats() {
const totalTabs = windowSelectorData.reduce((sum, w) => sum + w.tabs.length, 0);
document.getElementById('tab-count').textContent = totalTabs;
document.getElementById('window-count').textContent = windowSelectorData.length;
}
// Render window/group checkboxes into #selector-list
function renderSelector() {
const list = document.getElementById('selector-list');
if (windowSelectorData.length === 0) {
list.innerHTML = '<div class="selector-loading">No windows found.</div>';
return;
}
let html = '';
windowSelectorData.forEach((win, index) => {
const label = `Window ${index + 1}${win.focused ? ' (active)' : ''}`;
const tabCount = win.tabs.length;
html += `
<div class="selector-item" data-type="window" data-id="${win.windowId}">
<label class="checkbox-label">
<input type="checkbox" class="window-checkbox"
data-window-id="${win.windowId}" checked
aria-describedby="win-meta-${win.windowId}">
<span class="selector-item-title">${label}</span>
<span class="selector-item-meta" id="win-meta-${win.windowId}">${tabCount} tab${tabCount !== 1 ? 's' : ''}</span>
</label>`;
if (win.groups.length > 0) {
win.groups.forEach(group => {
const color = GROUP_COLORS[group.color] || '#888888';
const groupTitle = group.title || 'Unnamed group';
const groupTabCount = win.tabs.filter(t => t.groupId === group.id).length;
html += `
<div class="selector-item selector-item--group" data-type="group" data-id="${group.id}">
<label class="checkbox-label">
<input type="checkbox" class="group-checkbox"
data-group-id="${group.id}" data-window-id="${win.windowId}" checked
aria-describedby="grp-meta-${group.id}">
<span class="selector-item-dot" style="background:${color};" aria-hidden="true"></span>
<span class="selector-item-title">${escapeHtml(groupTitle)}</span>
<span class="selector-item-meta" id="grp-meta-${group.id}">${groupTabCount} tab${groupTabCount !== 1 ? 's' : ''}</span>
</label>
</div>`;
});
}
html += '</div>';
});
list.innerHTML = html;
// Stagger animation delays on rendered items
list.querySelectorAll('.selector-item:not(.selector-item--group)').forEach((el, i) => {
el.style.animationDelay = `${i * 50}ms`;
});
}
// Setup event listeners // Setup event listeners
function setupEventListeners() { function setupEventListeners() {
const exportBtn = document.getElementById('export-btn'); document.getElementById('export-btn').addEventListener('click', handleExport);
exportBtn.addEventListener('click', handleExport);
// Keyboard accessibility for options document.getElementById('select-all-btn').addEventListener('click', () => {
const checkboxes = document.querySelectorAll('input[type="checkbox"]'); document.querySelectorAll('.window-checkbox, .group-checkbox')
checkboxes.forEach(checkbox => { .forEach(cb => { cb.checked = true; });
});
document.getElementById('deselect-all-btn').addEventListener('click', () => {
document.querySelectorAll('.window-checkbox, .group-checkbox')
.forEach(cb => { cb.checked = false; });
});
// Keyboard accessibility for option checkboxes
document.querySelectorAll('.options input[type="checkbox"]').forEach(checkbox => {
checkbox.addEventListener('keydown', (e) => { checkbox.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') { if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault(); e.preventDefault();
@@ -34,6 +133,34 @@ function setupEventListeners() {
}); });
} }
// Return only the tabs from selected windows/groups
function getSelectedTabs() {
const checkedWindowIds = new Set(
[...document.querySelectorAll('.window-checkbox:checked')]
.map(cb => parseInt(cb.dataset.windowId))
);
const checkedGroupIds = new Set(
[...document.querySelectorAll('.group-checkbox:checked')]
.map(cb => parseInt(cb.dataset.groupId))
);
const result = [];
for (const win of windowSelectorData) {
if (!checkedWindowIds.has(win.windowId)) continue;
for (const tab of win.tabs) {
if (win.groups.length > 0 && tab.groupId && tab.groupId > 0) {
// Grouped tab: only include if its group is checked
if (checkedGroupIds.has(tab.groupId)) result.push(tab);
} else {
// Ungrouped tab (Chrome sentinel -1 or Firefox undefined): always include
result.push(tab);
}
}
}
return result;
}
// Main export handler // Main export handler
async function handleExport() { async function handleExport() {
const exportBtn = document.getElementById('export-btn'); const exportBtn = document.getElementById('export-btn');
@@ -44,6 +171,15 @@ async function handleExport() {
const groupByWindow = document.getElementById('group-by-window').checked; const groupByWindow = document.getElementById('group-by-window').checked;
const includeTimestamp = document.getElementById('include-timestamp').checked; const includeTimestamp = document.getElementById('include-timestamp').checked;
// Get filtered tabs
const tabs = getSelectedTabs();
if (tabs.length === 0) {
statusEl.textContent = '! Select at least one window to export.';
statusEl.className = 'status-message error';
return;
}
// Disable button and show loading state // Disable button and show loading state
exportBtn.disabled = true; exportBtn.disabled = true;
const originalContent = exportBtn.innerHTML; const originalContent = exportBtn.innerHTML;
@@ -53,27 +189,20 @@ async function handleExport() {
statusEl.className = 'status-message loading'; statusEl.className = 'status-message loading';
try { try {
// Get all tabs
const tabs = await chrome.tabs.query({});
// Fetch descriptions if needed
if (includeDescriptions) { if (includeDescriptions) {
statusEl.textContent = `Fetching descriptions (0/${tabs.length})...`; statusEl.textContent = `Fetching descriptions (0/${tabs.length})...`;
await fetchDescriptions(tabs, statusEl); await fetchDescriptions(tabs, statusEl);
} }
// Generate markdown content
const markdown = await generateMarkdown(tabs, { const markdown = await generateMarkdown(tabs, {
includeDescriptions, includeDescriptions,
groupByWindow, groupByWindow,
includeTimestamp includeTimestamp
}); });
// Trigger download
downloadMarkdown(markdown); downloadMarkdown(markdown);
// Show success message statusEl.textContent = '✓ Exported ' + tabs.length + ' tabs successfully.';
statusEl.textContent = '✓ Successfully exported ' + tabs.length + ' tabs!';
statusEl.className = 'status-message success'; statusEl.className = 'status-message success';
} catch (error) { } catch (error) {
@@ -81,7 +210,6 @@ async function handleExport() {
statusEl.textContent = '✗ Error: ' + error.message; statusEl.textContent = '✗ Error: ' + error.message;
statusEl.className = 'status-message error'; statusEl.className = 'status-message error';
} finally { } finally {
// Re-enable button
exportBtn.disabled = false; exportBtn.disabled = false;
exportBtn.innerHTML = originalContent; exportBtn.innerHTML = originalContent;
} }
@@ -94,8 +222,7 @@ async function fetchDescriptions(tabs, statusEl) {
statusEl.textContent = `Fetching descriptions (${i + 1}/${tabs.length})...`; statusEl.textContent = `Fetching descriptions (${i + 1}/${tabs.length})...`;
try { try {
// Try to execute script to get description const results = await api.scripting.executeScript({
const results = await chrome.scripting.executeScript({
target: { tabId: tab.id }, target: { tabId: tab.id },
func: extractDescription func: extractDescription
}); });
@@ -104,13 +231,13 @@ async function fetchDescriptions(tabs, statusEl) {
tab.description = results[0].result; tab.description = results[0].result;
} }
} catch (error) { } catch (error) {
// Tab might not support script injection (e.g., chrome:// pages) // Tab doesn't support script injection (e.g. about:, chrome://, moz:// pages)
tab.description = null; tab.description = null;
} }
} }
} }
// Function to extract description (runs in tab context) // Function to extract description — runs in tab context
function extractDescription() { function extractDescription() {
const metaDesc = document.querySelector('meta[name="description"]'); const metaDesc = document.querySelector('meta[name="description"]');
const ogDesc = document.querySelector('meta[property="og:description"]'); const ogDesc = document.querySelector('meta[property="og:description"]');
@@ -136,14 +263,10 @@ async function generateMarkdown(tabs, options) {
markdown += '---\n\n'; markdown += '---\n\n';
if (options.groupByWindow) { if (options.groupByWindow) {
// Group tabs by window // Group selected tabs by their window, using cached window data order
const windows = await chrome.windows.getAll();
const tabsByWindow = {}; const tabsByWindow = {};
tabs.forEach(tab => { tabs.forEach(tab => {
if (!tabsByWindow[tab.windowId]) { if (!tabsByWindow[tab.windowId]) tabsByWindow[tab.windowId] = [];
tabsByWindow[tab.windowId] = [];
}
tabsByWindow[tab.windowId].push(tab); tabsByWindow[tab.windowId].push(tab);
}); });
@@ -155,23 +278,20 @@ async function generateMarkdown(tabs, options) {
windowIndex++; windowIndex++;
} }
} else { } else {
// List all tabs together
markdown += formatTabs(tabs, options.includeDescriptions); markdown += formatTabs(tabs, options.includeDescriptions);
} }
return markdown; return markdown;
} }
// Format tabs as markdown // Format tabs as markdown list
function formatTabs(tabs, includeDescriptions) { function formatTabs(tabs, includeDescriptions) {
let content = ''; let content = '';
tabs.forEach((tab, index) => { tabs.forEach(tab => {
// List item with title and URL
content += `- **${escapeMarkdown(tab.title)}**\n`; content += `- **${escapeMarkdown(tab.title)}**\n`;
content += ` - URL: ${tab.url}\n`; content += ` - URL: ${tab.url}\n`;
// Description if available
if (includeDescriptions && tab.description) { if (includeDescriptions && tab.description) {
content += ` - Description: ${escapeMarkdown(tab.description)}\n`; content += ` - Description: ${escapeMarkdown(tab.description)}\n`;
} }
@@ -188,20 +308,25 @@ function escapeMarkdown(text) {
return text.replace(/[\\`*_{}[\]()#+\-.!]/g, '\\$&'); return text.replace(/[\\`*_{}[\]()#+\-.!]/g, '\\$&');
} }
// Escape HTML for safe DOM injection
function escapeHtml(text) {
if (!text) return '';
return text
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;');
}
// Download markdown file // Download markdown file
function downloadMarkdown(content) { function downloadMarkdown(content) {
const blob = new Blob([content], { type: 'text/markdown;charset=utf-8' }); const blob = new Blob([content], { type: 'text/markdown;charset=utf-8' });
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-'); const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
const filename = `tabs-export-${timestamp}.md`; const filename = `tabs-export-${timestamp}.md`;
chrome.downloads.download({ api.downloads.download({ url, filename, saveAs: true });
url: url,
filename: filename, // Always clean up — Firefox's browser.downloads returns a Promise and ignores callbacks
saveAs: true setTimeout(() => URL.revokeObjectURL(url), 100);
}, (downloadId) => {
// Cleanup object URL after download starts
setTimeout(() => URL.revokeObjectURL(url), 100);
});
} }

374
styles.css
View File

@@ -1,20 +1,21 @@
:root { :root {
--primary-color: #2d8659; --neon-green: #00ff88;
--primary-hover: #36a169; --neon-cyan: #00e5ff;
--primary-active: #236b47; --neon-pink: #ff007f;
--secondary-color: #0d9488; --neon-purple: #bf5fff;
--alternate-color: #c4b5fd; --bg: #080810;
--success-color: #2d8659; --bg-card: rgba(0, 255, 136, 0.04);
--error-color: #ef4444; --text-primary: #e0e0e0;
--text-primary: #bfdbfe; --text-muted: #5a7a6a;
--text-secondary: #93c5fd; --border: rgba(0, 255, 136, 0.25);
--bg-primary: linear-gradient(135deg, #1e1b4b 0%, #1e3a8a 100%); --border-cyan: rgba(0, 229, 255, 0.2);
--bg-secondary: rgba(255, 255, 255, 0.05); --glow-green: 0 0 8px #00ff88, 0 0 20px rgba(0, 255, 136, 0.3);
--border-color: rgba(191, 219, 254, 0.2); --glow-cyan: 0 0 8px #00e5ff, 0 0 20px rgba(0, 229, 255, 0.3);
--shadow: 0 2px 8px rgba(0, 0, 0, 0.3); --glow-pink: 0 0 8px #ff007f, 0 0 20px rgba(255, 0, 127, 0.3);
--shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4); --radius: 2px;
--radius: 8px; --font-mono: 'Share Tech Mono', monospace;
--transition: all 0.2s ease; --font-display: 'Orbitron', sans-serif;
--transition: all 0.15s ease;
} }
* { * {
@@ -24,11 +25,18 @@
} }
body { body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; font-family: var(--font-mono);
font-size: 14px; font-size: 13px;
line-height: 1.5; line-height: 1.5;
color: var(--text-primary); color: var(--text-primary);
background: var(--bg-primary); background-color: var(--bg);
background-image: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 255, 136, 0.015) 2px,
rgba(0, 255, 136, 0.015) 4px
);
width: 380px; width: 380px;
min-height: 400px; min-height: 400px;
} }
@@ -50,118 +58,265 @@ body {
padding: 20px; padding: 20px;
} }
/* Header */
header { header {
text-align: center; text-align: center;
margin-bottom: 24px; margin-bottom: 20px;
padding-bottom: 16px; padding-bottom: 16px;
border-bottom: 2px solid rgba(196, 181, 253, 0.3); border-bottom: 1px solid var(--border);
} }
h1 { h1 {
font-size: 24px; font-family: var(--font-display);
font-weight: 600; font-size: 22px;
color: var(--alternate-color); font-weight: 700;
color: var(--neon-green);
text-shadow: var(--glow-green);
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 4px; margin-bottom: 4px;
} }
.subtitle { .subtitle {
font-size: 13px; font-size: 11px;
color: var(--text-secondary); color: var(--text-muted);
letter-spacing: 1px;
text-transform: uppercase;
} }
/* Stats Section */ /* Stats Section */
.stats { .stats {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 12px; gap: 10px;
margin-bottom: 24px; margin-bottom: 20px;
} }
.stat-card { .stat-card {
background: var(--bg-secondary); background: var(--bg-card);
border-radius: var(--radius); border-radius: var(--radius);
padding: 16px; padding: 14px;
text-align: center; text-align: center;
border: 1px solid var(--border);
transition: var(--transition); transition: var(--transition);
border: 1px solid var(--border-color); animation: fadeSlideIn 0.3s ease both;
} }
.stat-card:nth-child(1) { animation-delay: 0ms; }
.stat-card:nth-child(2) { animation-delay: 60ms; }
.stat-card:hover { .stat-card:hover {
transform: translateY(-2px); border-color: var(--neon-cyan);
box-shadow: var(--shadow); box-shadow: var(--glow-cyan);
} }
.stat-number { .stat-number {
display: block; display: block;
font-size: 28px; font-family: var(--font-display);
font-size: 26px;
font-weight: 700; font-weight: 700;
color: var(--secondary-color); color: var(--neon-cyan);
text-shadow: var(--glow-cyan);
line-height: 1; line-height: 1;
margin-bottom: 4px; margin-bottom: 4px;
} }
.stat-label { .stat-label {
display: block; display: block;
font-size: 12px; font-size: 10px;
color: var(--text-secondary); color: var(--text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px;
}
/* Selector Section */
.selector {
margin-bottom: 20px;
}
.section-heading {
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--neon-green);
margin-bottom: 10px;
}
#selector-list {
max-height: 200px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 4px;
padding-right: 2px;
}
#selector-list::-webkit-scrollbar {
width: 4px;
}
#selector-list::-webkit-scrollbar-track {
background: transparent;
}
#selector-list::-webkit-scrollbar-thumb {
background: var(--neon-green);
border-radius: 2px;
}
.selector-loading {
color: var(--text-muted);
font-size: 12px;
padding: 8px;
letter-spacing: 1px;
}
.selector-item {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 6px 8px;
transition: var(--transition);
animation: fadeSlideIn 0.3s ease both;
}
.selector-item:hover {
border-color: var(--neon-green);
}
.selector-item--group {
margin-left: 20px;
border-color: var(--border-cyan);
}
.selector-item--group:hover {
border-color: var(--neon-cyan);
}
.selector-item .checkbox-label {
display: flex;
align-items: center;
gap: 8px;
padding: 0;
border-radius: 0;
cursor: pointer;
user-select: none;
}
.selector-item .checkbox-label:hover {
background: none;
}
.selector-item-title {
font-size: 12px;
color: var(--text-primary);
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.selector-item-meta {
font-size: 11px;
color: var(--text-muted);
margin-left: auto;
white-space: nowrap;
flex-shrink: 0;
}
.selector-item-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.selector-actions {
display: flex;
gap: 16px;
margin-top: 8px;
}
.btn-link {
background: none;
border: none;
padding: 0;
font-family: var(--font-mono);
font-size: 11px;
color: var(--neon-cyan);
cursor: pointer;
letter-spacing: 0.5px; letter-spacing: 0.5px;
transition: var(--transition);
text-decoration: underline;
text-underline-offset: 2px;
}
.btn-link:hover {
color: var(--neon-green);
text-shadow: var(--glow-green);
}
.btn-link:focus {
outline: 2px solid var(--neon-cyan);
outline-offset: 2px;
} }
/* Options Section */ /* Options Section */
.options { .options {
margin-bottom: 24px; margin-bottom: 20px;
}
.section-heading {
font-size: 16px;
font-weight: 600;
margin-bottom: 12px;
color: var(--text-primary);
} }
.option-group { .option-group {
margin-bottom: 16px; margin-bottom: 10px;
animation: fadeSlideIn 0.3s ease both;
} }
.option-group:nth-child(2) { animation-delay: 0ms; }
.option-group:nth-child(3) { animation-delay: 60ms; }
.option-group:nth-child(4) { animation-delay: 120ms; }
.checkbox-label { .checkbox-label {
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
padding: 8px; padding: 7px 8px;
border-radius: 6px; border-radius: var(--radius);
transition: var(--transition); transition: var(--transition);
border: 1px solid transparent;
} }
.checkbox-label:hover { .checkbox-label:hover {
background: rgba(255, 255, 255, 0.08); background: rgba(0, 255, 136, 0.05);
border-color: var(--border);
} }
.checkbox-label input[type="checkbox"] { .checkbox-label input[type="checkbox"] {
width: 18px; width: 16px;
height: 18px; height: 16px;
margin-right: 10px; margin-right: 10px;
cursor: pointer; cursor: pointer;
accent-color: var(--primary-color); accent-color: var(--neon-green);
border: 1px solid var(--border-color); flex-shrink: 0;
} }
.checkbox-label input[type="checkbox"]:focus { .checkbox-label input[type="checkbox"]:focus {
outline: 2px solid var(--alternate-color); outline: 2px solid var(--neon-green);
outline-offset: 2px; outline-offset: 2px;
} }
.checkbox-label span { .checkbox-label span {
font-size: 14px; font-size: 13px;
font-weight: 500;
} }
.help-text { .help-text {
font-size: 12px; font-size: 11px;
color: var(--text-secondary); color: var(--text-muted);
margin-top: 4px; margin-top: 2px;
margin-left: 28px; margin-left: 26px;
} }
/* Actions Section */ /* Actions Section */
@@ -171,105 +326,120 @@ h1 {
.btn { .btn {
width: 100%; width: 100%;
padding: 14px 20px; padding: 12px 20px;
font-size: 15px; font-family: var(--font-display);
font-weight: 600; font-size: 13px;
border: none; font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
border-radius: var(--radius); border-radius: var(--radius);
cursor: pointer; cursor: pointer;
transition: var(--transition); transition: var(--transition);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 10px;
} }
.btn:focus { .btn:focus {
outline: 2px solid var(--alternate-color); outline: 2px solid var(--neon-green);
outline-offset: 2px; outline-offset: 2px;
} }
.btn-primary { .btn-primary {
background: var(--primary-color); background: transparent;
color: white; color: var(--neon-green);
box-shadow: var(--shadow); border: 1px solid var(--neon-green);
box-shadow: inset 0 0 12px rgba(0, 255, 136, 0.05);
} }
.btn-primary:hover:not(:disabled) { .btn-primary:hover:not(:disabled) {
background: var(--primary-hover); background: rgba(0, 255, 136, 0.08);
box-shadow: var(--shadow-hover); box-shadow: var(--glow-green);
transform: translateY(-1px);
} }
.btn-primary:active:not(:disabled) { .btn-primary:active:not(:disabled) {
background: var(--primary-active); background: rgba(0, 255, 136, 0.15);
transform: translateY(0); box-shadow: none;
} }
.btn-primary:disabled { .btn-primary:disabled {
opacity: 0.6; opacity: 0.4;
cursor: not-allowed; cursor: not-allowed;
} }
.btn-icon { .btn-icon {
font-size: 18px; font-size: 16px;
} }
.status-message { .status-message {
margin-top: 12px; margin-top: 10px;
padding: 12px; padding: 10px;
border-radius: 6px; border-radius: var(--radius);
font-size: 13px; font-size: 12px;
text-align: center; text-align: center;
min-height: 40px; min-height: 38px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
letter-spacing: 0.5px;
} }
.status-message.success { .status-message.success {
background: rgba(45, 134, 89, 0.2); background: rgba(0, 255, 136, 0.07);
color: #6ee7b7; color: var(--neon-green);
border: 1px solid var(--success-color); border: 1px solid var(--neon-green);
text-shadow: var(--glow-green);
} }
.status-message.error { .status-message.error {
background: rgba(239, 68, 68, 0.2); background: rgba(255, 0, 127, 0.07);
color: #fca5a5; color: var(--neon-pink);
border: 1px solid var(--error-color); border: 1px solid var(--neon-pink);
text-shadow: var(--glow-pink);
} }
.status-message.loading { .status-message.loading {
background: rgba(13, 148, 136, 0.2); background: rgba(0, 229, 255, 0.07);
color: var(--secondary-color); color: var(--neon-cyan);
border: 1px solid var(--secondary-color); border: 1px solid var(--neon-cyan);
} }
/* Footer */ /* Footer */
.footer { .footer {
padding-top: 16px; padding-top: 14px;
border-top: 1px solid rgba(196, 181, 253, 0.3); border-top: 1px solid var(--border);
} }
.footer-text { .footer-text {
font-size: 12px; font-size: 11px;
color: var(--text-secondary); color: var(--text-muted);
text-align: center; text-align: center;
} }
kbd { kbd {
display: inline-block; display: inline-block;
padding: 2px 6px; padding: 1px 5px;
font-family: monospace; font-family: var(--font-mono);
font-size: 11px; font-size: 11px;
background: var(--bg-secondary); background: var(--bg-card);
border: 1px solid var(--border-color); border: 1px solid var(--border);
border-radius: 4px; border-radius: var(--radius);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); color: var(--neon-cyan);
color: var(--alternate-color); }
/* Animations */
@keyframes fadeSlideIn {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
} }
/* Loading spinner animation */
@keyframes spin { @keyframes spin {
to { transform: rotate(360deg); } to { transform: rotate(360deg); }
} }