diff --git a/themes/4782a555-3dbf-4fbd-91f4-fb41ba512076/chrome.css b/themes/4782a555-3dbf-4fbd-91f4-fb41ba512076/chrome.css new file mode 100644 index 00000000..d4e32318 --- /dev/null +++ b/themes/4782a555-3dbf-4fbd-91f4-fb41ba512076/chrome.css @@ -0,0 +1,193 @@ + +/* --- Group label header: match native tab dimensions --- */ +tab-group .tab-group-label-container { + min-height: var(--tab-min-height, 36px) !important; + margin-block: var(--tab-block-margin, 2px) 0 !important; + padding: 0 var(--tab-inline-padding, 8px) 0 0 !important; + display: flex !important; + flex-direction: row !important; + align-items: center !important; + justify-content: flex-start !important; + background: color-mix(in srgb, var(--tab-group-color, gray) 10%, transparent) !important; + border-radius: var(--border-radius-medium, 6px) var(--border-radius-medium, 6px) 0 0 !important; + border-left: 3px solid color-mix(in srgb, var(--tab-group-color, gray) 40%, transparent) !important; + transition: background 0.2s ease, border-radius 0.3s ease !important; +} + +tab-group[collapsed] .tab-group-label-container { + border-left-color: transparent !important; +} + +tab-group .tab-group-label-container:hover { + background: color-mix(in srgb, var(--tab-group-color, gray) 15%, transparent) !important; +} + +/* Close button: hidden, shown on hover */ +tab-group .tab-group-label-container .tab-close-button { + display: none !important; +} +tab-group .tab-group-label-container:hover .tab-close-button { + display: flex !important; + visibility: visible !important; +} + +/* --- Tab container: colored background bottom part --- */ +tab-group .tab-group-container { + margin-inline-start: 0 !important; + padding-inline-start: 0 !important; + background: color-mix(in srgb, var(--tab-group-color, gray) 10%, transparent) !important; + border-radius: 0 0 var(--border-radius-medium, 6px) var(--border-radius-medium, 6px) !important; + padding-bottom: var(--tab-block-margin, 2px) !important; + margin-bottom: var(--tab-block-margin, 2px) !important; + border-left: 3px solid color-mix(in srgb, var(--tab-group-color, gray) 40%, transparent) !important; + transition: background 0.3s ease, padding-bottom 0.3s ease !important; +} + +/* --- Icon container --- */ +.tab-group-icon-container { + margin: 0 6px 0 10px; + display: flex; + align-items: center; + justify-content: center; +} + +/* Icon square */ +tab-group .tab-group-icon { + list-style-image: none !important; + display: flex !important; + justify-content: center !important; + align-items: center !important; + width: 16px; + height: 16px; + border-radius: 4px; + position: relative; + background: rgba(255, 255, 255, 0.12) !important; +} + +tab-group .tab-group-icon .group-icon, +tab-group .tab-group-icon image { + display: block; + width: 10px; + height: 10px; + -moz-context-properties: fill, stroke, color !important; + fill: white !important; + color: white !important; +} + +tab-group .tab-group-icon label { + transform: translate(0, -1px); +} + +/* --- Group label text --- */ +tab-group .tab-group-label { + direction: ltr; + mask-image: linear-gradient(to left, transparent, black 1em); + margin-right: auto !important; + width: 100%; + height: 100% !important; + padding: 0 4px !important; + background: transparent !important; + color: var(--tab-selected-textcolor) !important; + font-weight: 500 !important; + text-align: start !important; + display: flex; + flex-direction: row; + align-items: center; + gap: 5px; +} + +/* Hide native Zen tab-group-line and grain */ +tab-group .tab-group-line, +tab-group .tab-group-container .grain { + display: none !important; +} + +/* --- Expand/Collapse animation --- */ +tab-group .tab-group-container { + overflow: hidden !important; +} + +tab-group .tab-group-label-container { + transition: background 0.2s ease, border-radius 0.3s ease !important; +} + +/* Tabs wave animation — each tab has a staggered delay */ +tab-group .tab-group-container tab { + transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.25s ease !important; + max-height: 100px !important; + opacity: 1 !important; + transform: translateY(0) !important; +} + +tab-group .tab-group-container tab:nth-child(1) { transition-delay: 0s !important; } +tab-group .tab-group-container tab:nth-child(2) { transition-delay: 0.03s !important; } +tab-group .tab-group-container tab:nth-child(3) { transition-delay: 0.06s !important; } +tab-group .tab-group-container tab:nth-child(4) { transition-delay: 0.09s !important; } +tab-group .tab-group-container tab:nth-child(5) { transition-delay: 0.12s !important; } +tab-group .tab-group-container tab:nth-child(6) { transition-delay: 0.15s !important; } +tab-group .tab-group-container tab:nth-child(7) { transition-delay: 0.18s !important; } +tab-group .tab-group-container tab:nth-child(8) { transition-delay: 0.21s !important; } +tab-group .tab-group-container tab:nth-child(9) { transition-delay: 0.24s !important; } +tab-group .tab-group-container tab:nth-child(10) { transition-delay: 0.27s !important; } +tab-group .tab-group-container tab:nth-child(n+11) { transition-delay: 0.3s !important; } + +/* Collapsed: tabs slide up and fade out */ +tab-group[collapsed] .tab-group-container tab { + max-height: 0 !important; + opacity: 0 !important; + transform: translateY(-6px) !important; + padding: 0 !important; + margin: 0 !important; +} + +tab-group[collapsed] .tab-group-container { + margin: 0 !important; + padding-bottom: 0 !important; + background: transparent !important; + border-left-color: transparent !important; +} + +tab-group[collapsed] { + outline: none !important; + border: none !important; + box-shadow: none !important; +} +tab-group[collapsed] > .tab-group-label-container .tab-group-label { + outline: none !important; + outline-offset: 0 !important; +} + +/* When collapsed, make header fully rounded */ +tab-group[collapsed] .tab-group-label-container { + border-radius: var(--border-radius-medium, 6px) !important; +} + +/* --- Group creation animation --- */ +@keyframes zenGroupAppear { + from { + opacity: 0; + transform: translateY(-8px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +tab-group .tab-group-label-container { + animation: zenGroupAppear 0.35s ease-out !important; +} + +tab-group .tab-group-container { + animation: zenGroupAppear 0.35s ease-out 0.1s both !important; +} + +/* --- Hide group start divider --- */ +.zen-tab-group-start { + display: none !important; +} + +/* --- Hide Zen native Clear button --- */ +.zen-workspace-close-unpinned-tabs-button { + display: none !important; +} diff --git a/themes/4782a555-3dbf-4fbd-91f4-fb41ba512076/image.png b/themes/4782a555-3dbf-4fbd-91f4-fb41ba512076/image.png new file mode 100644 index 00000000..cbe7dace Binary files /dev/null and b/themes/4782a555-3dbf-4fbd-91f4-fb41ba512076/image.png differ diff --git a/themes/4782a555-3dbf-4fbd-91f4-fb41ba512076/preferences.json b/themes/4782a555-3dbf-4fbd-91f4-fb41ba512076/preferences.json new file mode 100644 index 00000000..3e5b214f --- /dev/null +++ b/themes/4782a555-3dbf-4fbd-91f4-fb41ba512076/preferences.json @@ -0,0 +1,72 @@ +[ + { + "property": "zen-tabs-organiser.enable_sort", + "label": "Sort button", + "type": "checkbox", + "defaultValue": true + }, + { + "property": "zen-tabs-organiser.enable_clear", + "label": "Clear button", + "type": "checkbox", + "defaultValue": true + }, + { + "property": "zen-tabs-organiser.auto_colors", + "label": "Auto-assign colors to groups", + "type": "checkbox", + "defaultValue": true + }, + { + "property": "zen-tabs-organiser.auto_icons", + "label": "Auto-assign icons to groups", + "type": "checkbox", + "defaultValue": true + }, + { + "property": "zen-tabs-organiser.ai_model", + "label": "AI Provider", + "type": "dropdown", + "defaultValue": "0", + "options": [ + { + "value": "0", + "label": "None" + }, + { + "value": "1", + "label": "Gemini" + }, + { + "value": "2", + "label": "Ollama" + }, + { + "value": "3", + "label": "Mistral" + }, + { + "value": "4", + "label": "OpenAI" + } + ] + }, + { + "property": "zen-tabs-organiser.ai_api_key", + "label": "API Key", + "type": "string", + "placeholder": "Required for Gemini, Mistral, OpenAI" + }, + { + "property": "zen-tabs-organiser.ai_model_name", + "label": "Model", + "type": "string", + "placeholder": "gpt-4o-mini, gemini-2.0-flash, llama3.2" + }, + { + "property": "zen-tabs-organiser.ai_endpoint", + "label": "Endpoint", + "type": "string", + "placeholder": "Only for Ollama or OpenAI-compatible" + } +] \ No newline at end of file diff --git a/themes/4782a555-3dbf-4fbd-91f4-fb41ba512076/readme.md b/themes/4782a555-3dbf-4fbd-91f4-fb41ba512076/readme.md new file mode 100644 index 00000000..fc7691dc --- /dev/null +++ b/themes/4782a555-3dbf-4fbd-91f4-fb41ba512076/readme.md @@ -0,0 +1,25 @@ + +# Zen Tabs Organiser + +Sort your browser tabs into groups using AI or domain-based grouping in one click. + +## Features + +- Sort: Groups all open tabs via AI (OpenAI, Gemini, Ollama, Mistral) or by domain +- Clear: Closes ungrouped, unpinned tabs with animation +- Auto-colors: 12-color curated palette +- Auto-icons: Contextual icons (requires Advanced Tab Groups) +- Workspace-aware: Only affects the active workspace +- Collapse animation: Smooth wave effect +- Settings UI: Full configuration in Zen Mods preferences + +## AI Configuration + +1. Open about:preferences, select Zen Tabs Organiser +2. Pick an AI Provider (Gemini, Ollama, Mistral, or OpenAI) +3. Enter your API Key +4. Optionally set a custom Model name + +## License + +MIT diff --git a/themes/4782a555-3dbf-4fbd-91f4-fb41ba512076/theme.json b/themes/4782a555-3dbf-4fbd-91f4-fb41ba512076/theme.json new file mode 100644 index 00000000..050bd296 --- /dev/null +++ b/themes/4782a555-3dbf-4fbd-91f4-fb41ba512076/theme.json @@ -0,0 +1,15 @@ +{ + "id": "4782a555-3dbf-4fbd-91f4-fb41ba512076", + "name": "Zen Tabs Organiser", + "description": "Sort your browser tabs into groups using AI or domain-based grouping in one click.", + "homepage": "https://github.com/alexiscrocilla/Zen-Tabs-Organiser", + "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/4782a555-3dbf-4fbd-91f4-fb41ba512076/chrome.css", + "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/4782a555-3dbf-4fbd-91f4-fb41ba512076/readme.md", + "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/4782a555-3dbf-4fbd-91f4-fb41ba512076/image.png", + "author": "alexiscrocilla", + "version": "1.0.0", + "tags": [], + "createdAt": "2026-03-30", + "updatedAt": "2026-03-30", + "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/4782a555-3dbf-4fbd-91f4-fb41ba512076/preferences.json" +} \ No newline at end of file