From 2340f2d6b5acb1959070223bb2f6032155bd5de0 Mon Sep 17 00:00:00 2001 From: psu Date: Thu, 22 May 2025 01:00:13 +0200 Subject: [PATCH 1/2] Better CtrlTab Panel 2.0 --- .../chrome.css | 183 +++++++++++------- .../preferences.json | 168 ++++++++-------- 2 files changed, 200 insertions(+), 151 deletions(-) diff --git a/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/chrome.css b/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/chrome.css index 09d36c9a..3f889fea 100644 --- a/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/chrome.css +++ b/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/chrome.css @@ -1,90 +1,139 @@ - /** * Zen Mod: Better CtrlTab Panel * Re-style and add customization options for the Ctrl+Tab panel. * Pontus Sundén */ +@-moz-document url-prefix("chrome:") { :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-roundness: 50px; + --psu-better_ctrltab-padding: 35px; + --psu-better_ctrltab-zoom: .8; + + --psu-better_ctrltab-background: light-dark(rgba(146, 145, 144, 0.94), rgba(24, 23, 22, 0.94)); + --psu-better_ctrltab-shadow_size: 20px; + + --psu-better_ctrltab-preview_padding: 30px; --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_border_color: light-dark(rgba(253, 255, 254, 0.1), rgba(83, 82, 79, 0.2)); + --psu-better_ctrltab-preview_focus_background: light-dark(rgba(77, 76, 78, 0.8), rgba(184, 185, 183, 0.18)); + --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); + + --psu-better_ctrltab-preview_favicon_size: 36px; + --psu-better_ctrltab-preview_favicon_outdent: 12px; +/**/ + + /* helpers */ + --psu-zoom-invert: pow(var(--psu-better_ctrltab-zoom), -1); + --psu-roundness-zoomed: calc(var(--psu-better_ctrltab-roundness) * var(--psu-better_ctrltab-zoom)); } -#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; + #ctrlTab-panel { + /* panel styling */ + --panel-border-radius: var(--psu-roundness-zoomed) !important; + --panel-shadow: 0 0 var(--psu-better_ctrltab-shadow_size) calc(var(--psu-better_ctrltab-shadow_size) / 3) rgba(1, 1, 4, 0.2) !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; + --panel-padding: 0 !important; + margin: 0 !important; + padding: 0 !important; + background-color: unset !important; -.ctrlTab-preview { - margin: 0 !important; - padding: var(--psu-better_ctrltab-padding) !important; + /* panel zoom adjust size */ + --psu-default_spacing: 10%; + --psu-tile-counter: 0; + &:has(.ctrlTab-preview:nth-child(1):not([hidden])) { + --psu-tile-counter: 1; + } + &:has(.ctrlTab-preview:nth-child(2):not([hidden])) { + --psu-tile-counter: 2; + } + &:has(.ctrlTab-preview:nth-child(3):not([hidden])) { + --psu-tile-counter: 3; + } + &:has(.ctrlTab-preview:nth-child(4):not([hidden])) { + --psu-tile-counter: 4; + } + &:has(.ctrlTab-preview:nth-child(5):not([hidden])) { + --psu-tile-counter: 5; + } + &:has(.ctrlTab-preview:nth-child(6):not([hidden])) { + --psu-tile-counter: 6; + } + &:has(.ctrlTab-preview:nth-child(7):not([hidden])) { + --psu-tile-counter: 7; + --psu-default_spacing: 7%; + } + --panel-shadow-margin: var(--psu-better_ctrltab-shadow_size) + calc( + /* decrease by default non-css space */ var(--psu-default_spacing) + (90% - var(--psu-default_spacing)) / 2 * (1 - var(--psu-better_ctrltab-zoom)) - + ( + /* increase by tile padding and borders */ ((var(--psu-better_ctrltab-preview_padding) * 2 + var(--psu-better_ctrltab-preview_border_width) * 2) * var(--psu-tile-counter)) / 2 + /* increase by panel padding */ + (var(--psu-better_ctrltab-padding) * 0.8) + ) * var(--psu-better_ctrltab-zoom) + ) !important; -.ctrlTab-preview-inner { - border-radius: calc(var(--psu-better_ctrltab-roundness) * 0.6) !important; - border: 0 !important; + #ctrlTab-previews { + /* panel zoom and padding*/ + zoom: var(--psu-better_ctrltab-zoom) !important; + padding: var(--psu-better_ctrltab-padding) calc(var(--psu-better_ctrltab-padding) * 0.8) !important; + + .ctrlTab-preview { margin: 0 !important; - padding: var(--psu-better_ctrltab-innerspace) !important; - padding-bottom: calc(var(--psu-better_ctrltab-innerspace) * 0.9) !important; - } + padding: 0 !important; + border-radius: calc(var(--psu-roundness-zoomed) * 0.8) !important; -&:focus { + /* previews styling */ .ctrlTab-preview-inner { - background: var(--psu-better_ctrltab-preview_focus_background) !important; + margin: 0 !important; + padding: calc(var(--psu-better_ctrltab-preview_padding) + var(--psu-better_ctrltab-preview_border_width)) !important; + border-radius: calc(var(--psu-roundness-zoomed) * 0.8) !important; + padding-bottom: calc(var(--psu-better_ctrltab-preview_padding) / 2) !important; + border: none !important; + text-shadow: 0.5px 0.5px 0px light-dark(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); } .ctrlTab-canvas { - box-shadow: 0px 0px 0px var(--psu-better_ctrltab-preview_border_width) var(--psu-better_ctrltab-preview_focus_border_color) !important; + margin-bottom: calc(var(--psu-better_ctrltab-preview_padding) / 2 + var(--psu-better_ctrltab-preview_border_width)) !important; + box-shadow: 0 0 0 var(--psu-better_ctrltab-preview_border_width) var(--psu-better_ctrltab-preview_border_color) !important; + } + .ctrlTab-canvas, + img, + canvas { + border-radius: calc(var(--psu-roundness-zoomed) * 0.25) !important; + } + + /* label styling */ + .ctrlTab-label { + font-size: calc(var(--psu-better_ctrltab-preview_font_size) * var(--psu-zoom-invert)) !important; + letter-spacing: calc(var(--psu-better_ctrltab-preview_letter_spacing) * var(--psu-zoom-invert)); + margin: 0 calc(var(--psu-better_ctrltab-preview_border_width) * -1) !important; + padding: 0 !important; + } + + /* favicon styling and position */ + .ctrlTab-favicon-container image { + height: var(--psu-better_ctrltab-preview_favicon_size) !important; + width: var(--psu-better_ctrltab-preview_favicon_size) !important; + box-shadow: none !important; + background: none !important; + position: absolute !important; + padding: 0 !important; + margin: 0 !important; + margin-right: calc(var(--psu-better_ctrltab-preview_favicon_outdent) * -1) !important; + margin-top: calc( + (var(--psu-better_ctrltab-preview_padding) / 2 + var(--psu-better_ctrltab-preview_border_width)) * -1 - var(--psu-better_ctrltab-preview_favicon_size) + + var(--psu-better_ctrltab-preview_favicon_outdent) * 0.8 + ) !important; + } + + /* focused bg styling */ + &:focus { + .ctrlTab-preview-inner { + background: var(--psu-better_ctrltab-preview_focus_background) !important; + border: none !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/preferences.json b/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/preferences.json index 0deb4d55..3d8961c9 100644 --- a/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/preferences.json +++ b/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/preferences.json @@ -1,86 +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" - } + { + "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": "General - Zoom (1.0 = Full width 0.5 = 25% space on each side)", + "defaultValue": "0.8", + "placeholder": "1.0", + "property": "psu.better_ctrltab.zoom", + "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": "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 - Label Letter Spacing", + "defaultValue": "0px", + "placeholder": "0px", + "property": "psu.better_ctrltab.preview_letter_spacing", + "type": "string" + }, + { + "label": "Item - Favicon Size", + "defaultValue": "36px", + "placeholder": "40px", + "property": "psu.better_ctrltab.preview_favicon_size", + "type": "string" + }, + { + "label": "Item - Favicon Outdent", + "defaultValue": "12px", + "placeholder": "6px", + "property": "psu.better_ctrltab.preview_favicon_outdent", + "type": "string" + } ] \ No newline at end of file From 2471175639aa46db9d20ef85d8d89a1cf3de3d84 Mon Sep 17 00:00:00 2001 From: "mr. m" <91018726+mauro-balades@users.noreply.github.com> Date: Thu, 22 May 2025 17:41:43 +0200 Subject: [PATCH 2/2] Update theme.json --- themes/72f8f48d-86b9-4487-acea-eb4977b18f21/theme.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/theme.json b/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/theme.json index 8e2de02f..3dfaa98e 100644 --- a/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/theme.json +++ b/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/theme.json @@ -7,9 +7,9 @@ "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", + "version": "1.0.1", "tags": [], "createdAt": "2025-03-28", "updatedAt": "2025-04-09", "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/72f8f48d-86b9-4487-acea-eb4977b18f21/preferences.json" -} \ No newline at end of file +}