diff --git a/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/chrome.css b/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/chrome.css new file mode 100644 index 00000000..09d36c9a --- /dev/null +++ b/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/chrome.css @@ -0,0 +1,90 @@ + +/** +* Zen Mod: Better CtrlTab Panel +* Re-style and add customization options for the Ctrl+Tab panel. +* Pontus Sundén +*/ + :root { + /** + --psu-better_ctrltab-width: 75vw; + --psu-better_ctrltab-background: light-dark(rgba(144, 144, 144, 0.94), rgba(22, 22, 22, 0.92)); + --psu-better_ctrltab-roundness: 32px; + --psu-better_ctrltab-padding: 16px; + --psu-better_ctrltab-shadow_size: 18px; + --psu-better_ctrltab-preview_border_width: 1px; + --psu-better_ctrltab-preview_border_color: light-dark(rgba(255, 255, 255, 0.1), rgba(1, 1, 1, 0.1)); + --psu-better_ctrltab-preview_focus_background: light-dark(rgba(77, 77, 77, 0.8), rgba(204, 204, 204, 0.33)); + --psu-better_ctrltab-preview_focus_border_color: light-dark(rgba(255, 255, 255, 0.1), rgba(1, 1, 1, 0.1)); + --psu-better_ctrltab-preview_font_size: 13px; + --psu-better_ctrltab-preview_letter_spacing: 0px; + --psu-better_ctrltab-preview_favicon_size: 18px; + /**/ + --psu-better_ctrltab-preview_count: 7; + --psu-better_ctrltab-space: calc(var(--psu-better_ctrltab-padding) + var(--psu-better_ctrltab-preview_border_width)); + --psu-better_ctrltab-innerspace: calc(var(--psu-better_ctrltab-space) * 0.75); + } + +#ctrlTab-panel { + position: absolute !important; + margin-left: calc(calc(calc(100vw - var(--psu-better_ctrltab-width)) * 0.5) - calc(var(--psu-better_ctrltab-shadow_size) * 0.5)) !important; + width: calc(var(--psu-better_ctrltab-width) + 2px) !important; + --panel-background: var(--psu-better_ctrltab-background) !important; + --panel-border-radius: calc(var(--psu-better_ctrltab-roundness) * 1) !important; + --panel-shadow: calc(var(--psu-better_ctrltab-shadow_size) * 0.1) calc(var(--psu-better_ctrltab-shadow_size) * 0.1) var(--psu-better_ctrltab-shadow_size) + calc(var(--psu-better_ctrltab-shadow_size) * 0.3) rgba(1, 1, 1, 0.25) !important; + --panel-shadow-margin: calc(var(--psu-better_ctrltab-shadow_size) * 1.5) !important; + --panel-padding: 0 var(--psu-better_ctrltab-padding) !important; + +.ctrlTab-preview { + margin: 0 !important; + padding: var(--psu-better_ctrltab-padding) !important; + +.ctrlTab-preview-inner { + border-radius: calc(var(--psu-better_ctrltab-roundness) * 0.6) !important; + border: 0 !important; + margin: 0 !important; + padding: var(--psu-better_ctrltab-innerspace) !important; + padding-bottom: calc(var(--psu-better_ctrltab-innerspace) * 0.9) !important; + } + +&:focus { + .ctrlTab-preview-inner { + background: var(--psu-better_ctrltab-preview_focus_background) !important; + } + .ctrlTab-canvas { + box-shadow: 0px 0px 0px var(--psu-better_ctrltab-preview_border_width) var(--psu-better_ctrltab-preview_focus_border_color) !important; + } + } + } + .ctrlTab-canvas { + --width_raw: calc(calc(var(--psu-better_ctrltab-width) / var(--psu-better_ctrltab-preview_count)) - calc(calc(var(--psu-better_ctrltab-space) * 0.7) + 10px)); + --width: calc(var(--width_raw) - calc(var(--psu-better_ctrltab-space) * 1.5)); + --height: calc(var(--width) * 0.67); + min-width: var(--width) !important; + max-width: var(--width) !important; + min-height: var(--height) !important; + max-height: var(--height) !important; + box-shadow: 0px 0px 0px var(--psu-better_ctrltab-preview_border_width) var(--psu-better_ctrltab-preview_border_color) !important; + } + .ctrlTab-canvas, + img, + canvas { + border-radius: calc(var(--psu-better_ctrltab-roundness) * 0.45) !important; + } + .ctrlTab-label { + text-shadow: 0.5px 0.5px 0px light-dark(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); + font-size: var(--psu-better_ctrltab-preview_font_size); + margin: calc(var(--psu-better_ctrltab-innerspace) - calc(var(--psu-better_ctrltab-preview_font_size) * 0.85)) -2px calc(var(--psu-better_ctrltab-preview_font_size) * -0.15) -1px !important; + padding: 0 !important; + letter-spacing: var(--psu-better_ctrltab-preview_letter_spacing) !important; + } + .ctrlTab-favicon-container image { + height: var(--psu-better_ctrltab-preview_favicon_size) !important; + width: var(--psu-better_ctrltab-preview_favicon_size) !important; + background: none !important; + padding: 0 !important; + margin-right: calc(var(--psu-better_ctrltab-preview_favicon_size) * -0.33) !important; + margin-top: calc(calc(var(--psu-better_ctrltab-preview_favicon_size) * -1.3) + calc(var(--psu-better_ctrltab-preview_favicon_size) * 0.15)) !important; + box-shadow: none !important; + } + } diff --git a/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/image.png b/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/image.png new file mode 100644 index 00000000..a2954cfc Binary files /dev/null and b/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/image.png differ diff --git a/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/preferences.json b/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/preferences.json new file mode 100644 index 00000000..0deb4d55 --- /dev/null +++ b/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/preferences.json @@ -0,0 +1,86 @@ +[ + { + "label": "General - Padding", + "defaultValue": "16px", + "placeholder": "20px", + "property": "psu.better_ctrltab.padding", + "type": "string" + }, + { + "label": "General - Corners Roundness", + "defaultValue": "28px", + "placeholder": "5px", + "property": "psu.better_ctrltab.roundness", + "type": "string" + }, + { + "label": "Panel - Width", + "defaultValue": "85vw", + "placeholder": "100vw", + "property": "psu.better_ctrltab.width", + "type": "string" + }, + { + "label": "Panel - Background", + "defaultValue": "light-dark(rgba(144, 144, 144, 0.94), rgba(22, 22, 22, 0.92))", + "placeholder": "light-dark(rgba(144,144,144,0.96), rgba(99,99,99,0.96))", + "property": "psu.better_ctrltab.background", + "type": "string" + }, + { + "label": "Panel - Shadow Size", + "defaultValue": "18px", + "placeholder": "10px", + "property": "psu.better_ctrltab.shadow_size", + "type": "string" + }, + { + "label": "Focused Item - Background", + "defaultValue": "light-dark(rgba(77, 77, 77, 0.8), rgba(204, 204, 204, 0.33))", + "placeholder": "light-dark(rgba(77,77,77,0.8), rgba(1,1,1,0.6))", + "property": "psu.better_ctrltab.preview_focus_background", + "type": "string" + }, + { + "label": "Focused Item - Border Color", + "defaultValue": "light-dark(rgba(255, 255, 255, 0.1), rgba(1, 1, 1, 0.1))", + "placeholder": "light-dark(rgba(200,200,200,0.1), rgba(77,77,77,0.5))", + "property": "psu.better_ctrltab.preview_focus_border_color", + "type": "string" + }, + { + "label": "Item - Border Color", + "defaultValue": "light-dark(rgba(255, 255, 255, 0.1), rgba(1, 1, 1, 0.1))", + "placeholder": "light-dark(rgba(255,255,255,0.1), rgba(88,88,88,0.6))", + "property": "psu.better_ctrltab.preview_border_color", + "type": "string" + }, + { + "label": "Item - Border Width", + "defaultValue": "1px", + "placeholder": "2px", + "property": "psu.better_ctrltab.preview_border_width", + "type": "string" + }, + { + "label": "Item - Label Font Size", + "defaultValue": "13px", + "placeholder": "11px", + "property": "psu.better_ctrltab.preview_font_size", + "type": "string" + }, + { + "label": "Item - Favicon Size", + "defaultValue": "18px", + "placeholder": "40px", + "property": "psu.better_ctrltab.preview_favicon_size", + "type": "string" + }, + { + "label": "Item - Label Letter Spacing", + "defaultValue": "0px", + "placeholder": "0px", + "property": "psu.better_ctrltab.preview_letter_spacing", + "type": "string" + } +] \ No newline at end of file diff --git a/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/readme.md b/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/readme.md new file mode 100644 index 00000000..fb1474a8 --- /dev/null +++ b/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/readme.md @@ -0,0 +1,8 @@ + +# Zen Mod: Better CtrlTab Panel + +Re-style and add customization options for the CtrlTab panel. + +![screenshot](./better-ctrltab-panel.png) + +[Source code at GitHub](https://github.com/psu/zen-mods) diff --git a/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/theme.json b/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/theme.json new file mode 100644 index 00000000..1d7113a5 --- /dev/null +++ b/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/theme.json @@ -0,0 +1,15 @@ +{ + "id": "72f8f48d-86b9-4487-acea-eb4977b18f21", + "name": "Better CtrlTab Panel", + "description": "Re-style and add customization options for the CtrlTab panel.", + "homepage": "https://github.com/psu/zen-mods", + "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/chrome.css", + "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/readme.md", + "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/image.png", + "author": "psu", + "version": "1.0.0", + "tags": [], + "createdAt": "2025-03-28", + "updatedAt": "2025-03-28", + "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/preferences.json" +} \ No newline at end of file