From b12193fb51ac861ba9b11a7e66e15511a41cbe89 Mon Sep 17 00:00:00 2001 From: philmard Date: Mon, 20 Jan 2025 18:44:24 +0200 Subject: [PATCH] tab numbers are replaced by close button on hover --- .../chrome.css | 267 +++++++++--------- .../readme.md | 4 + .../theme.json | 30 +- 3 files changed, 147 insertions(+), 154 deletions(-) diff --git a/themes/22c9ec3b-7c62-46ae-991f-c8fff5046829/chrome.css b/themes/22c9ec3b-7c62-46ae-991f-c8fff5046829/chrome.css index 440c62e4..dc395b07 100644 --- a/themes/22c9ec3b-7c62-46ae-991f-c8fff5046829/chrome.css +++ b/themes/22c9ec3b-7c62-46ae-991f-c8fff5046829/chrome.css @@ -1,60 +1,22 @@ -tabs { - counter-reset: tab-counter; -} - -/* Automatically increment tab numbers for each .tab-content inside a tab */ - -/* Styles when the sidebar is expanded */ -@media (-moz-bool-pref: "zen.view.sidebar-expanded") { - tab .tab-content::after { - counter-increment: tab-counter; - content: counter(tab-counter); /* Space before the number */ - - /* Positioning and styling */ - font-weight: var(--bold-text, normal); - font-size: var(--font_size, 80%); - color: var(--number_color, inherit); - z-index: -100; - - /* Background and shape for the number */ - display: inline-block; - background-color: var( - --number_background_color, - #717171d7 - ); /* Change to any color */ - text-align: center; - width: 20px; /* Width of the circular background */ - height: 20px; /* Height of the circular background */ - line-height: 20px; /* Vertically center the number inside the circle */ - border-radius: var( - --background_shape, - 20% - ); /* Default for Slightly Rounded Square */ - margin-left: 3px; - margin-right: 5px; - } - /* put tab numbers on the left side when expanded_side="Left" (AND in expanded mode) */ - :root:has(#theme-Tab-Numbers[uc-theme-expanded_side="Left"]) { +@-moz-document url-prefix("chrome:") { + tabs { + counter-reset: tab-counter; + } /* Automatically increment tab numbers for each .tab-content inside a tab */ /* Styles when the sidebar is expanded */ + @media (-moz-bool-pref: "zen.view.sidebar-expanded") { tab .tab-content::after { - display: none; /* Hide the ::after pseudo-element first */ - } - - tab .tab-content::before { counter-increment: tab-counter; - content: counter(tab-counter); /* Space before the number */ - - /* Positioning and styling */ + content: counter( + tab-counter + ); /* Space before the number */ /* Positioning and styling */ font-weight: var(--bold-text, normal); font-size: var(--font_size, 80%); color: var(--number_color, inherit); - z-index: -100; - - /* Background and shape for the number */ + z-index: -100; /* Background and shape for the number */ display: inline-block; background-color: var( --number_background_color, - #888888 - ); /* Default color is light grey */ + #717171d7 + ); /* Change to any color */ text-align: center; width: 20px; /* Width of the circular background */ height: 20px; /* Height of the circular background */ @@ -64,113 +26,142 @@ tabs { 20% ); /* Default for Slightly Rounded Square */ margin-left: 3px; - margin-right: 5px; + margin-right: 3px; /* Changed to 3px to align with the Close Button */ } - } -} -/* Styles when the sidebar is NOT expanded (compact mode) */ -@media not (-moz-bool-pref: "zen.view.sidebar-expanded") { - tab .tab-content::before { - counter-increment: tab-counter; - content: counter(tab-counter) ""; + /* Hide the "X" close button by default */ + tab .tab-close-button { + visibility: hidden; + opacity: 0; + /* In order to not hide the tab title. [Can't make this work. It still hides the title] */ + /* Also, display: none; doesn't seem to work */ + width: 0; + margin: 0; + } - position: absolute; - top: 4px; - right: 1px; - padding: 0px 0px; - z-index: -100; + /* Hide tab numbers on the right side when hovering over */ + tab .tab-content:hover::after { + opacity: 0; /* Make it invisible */ + width: 0; /* In order to bring the close button to the right */ + margin: 0; + } - font-weight: var(--bold-text, normal); - font-size: var(--font_size, 80%); /* Default font size (same as "Small") */ - color: var(--number_color, inherit); /* Fallback to default color */ - } - /* put tab numbers on the left side when compact_side="Left" (AND in compact mode) */ - :root:has(#theme-Tab-Numbers[uc-theme-compact_side="Left"]) { + /* Show the "X" close button on hover */ + tab:hover .tab-close-button { + visibility: visible; + opacity: 1; + } + + /* put tab numbers on the left side when expanded_side="Left" (AND in expanded mode) */ + :root:has(#theme-Tab-Numbers[uc-theme-expanded_side="Left"]) { + tab .tab-content::after { + display: none; /* Hide the ::after pseudo-element first */ + } + tab .tab-content::before { + counter-increment: tab-counter; + content: counter( + tab-counter + ); /* Space before the number */ /* Positioning and styling */ + font-weight: var(--bold-text, normal); + font-size: var(--font_size, 80%); + color: var(--number_color, inherit); + z-index: -100; /* Background and shape for the number */ + display: inline-block; + background-color: var( + --number_background_color, + #888888 + ); /* Default color is light grey */ + text-align: center; + width: 20px; /* Width of the circular background */ + height: 20px; /* Height of the circular background */ + line-height: 20px; /* Vertically center the number inside the circle */ + border-radius: var( + --background_shape, + 20% + ); /* Default for Slightly Rounded Square */ + margin-left: 3px; + margin-right: 5px; + } + } + } /* Styles when the sidebar is NOT expanded (compact mode) */ + @media not (-moz-bool-pref: "zen.view.sidebar-expanded") { tab .tab-content::before { counter-increment: tab-counter; content: counter(tab-counter) ""; - position: absolute; top: 4px; - left: 1px; + right: 1px; padding: 0px 0px; z-index: -100; - font-weight: var(--bold-text, normal); font-size: var( --font_size, 80% ); /* Default font size (same as "Small") */ color: var(--number_color, inherit); /* Fallback to default color */ + } /* put tab numbers on the left side when compact_side="Left" (AND in compact mode) */ + :root:has(#theme-Tab-Numbers[uc-theme-compact_side="Left"]) { + tab .tab-content::before { + counter-increment: tab-counter; + content: counter(tab-counter) ""; + position: absolute; + top: 4px; + left: 1px; + padding: 0px 0px; + z-index: -100; + font-weight: var(--bold-text, normal); + font-size: var( + --font_size, + 80% + ); /* Default font size (same as "Small") */ + color: var(--number_color, inherit); /* Fallback to default color */ + } + } + } /* Enable bold text when the preference is enabled */ + @media (-moz-bool-pref: "uc.theme.bold-text-enable.enabled") { + tab .tab-content { + --bold-text: bold; } } -} - -/* Enable bold text when the preference is enabled */ -@media (-moz-bool-pref: "uc.theme.bold-text-enable.enabled") { - tab .tab-content { - --bold-text: bold; + @media (-moz-bool-pref: "uc.theme.custom_color_enabled") { + tab .tab-content { + --number_color: var(--uc-theme-number_color) !important; + --number_background_color: var( + --uc-theme-number_background_color + ) !important; + } + } /* Set font size for Extra Small (Override default) */ + :root:has(#theme-Tab-Numbers[uc-theme-font_size="XSmall"]) { + --font_size: 70% !important; /* Extra Small font size */ + } /* Set font size for Small */ + :root:has(#theme-Tab-Numbers[uc-theme-font_size="Small"]) { + --font_size: 80% !important; /* Small font size */ + } /* Set font size for Medium (Override default) */ + :root:has(#theme-Tab-Numbers[uc-theme-font_size="Medium"]) { + --font_size: 90% !important; /* Medium font size */ + } /* Set font size for Large (Override default) */ + :root:has(#theme-Tab-Numbers[uc-theme-font_size="Large"]) { + --font_size: 100% !important; /* Large font size */ + } /* Set font size for Extra Large (Override default) */ + :root:has(#theme-Tab-Numbers[uc-theme-font_size="XLarge"]) { + --font_size: 120% !important; /* Extra Large font size */ + } /* Ensure Close X button is on top of everything. */ + .tab-close-button { + z-index: 10; + } /* Customize the shape based on the preference values */ + :root:has(#theme-Tab-Numbers[uc-theme-background_shape="Square"]) { + --background_shape: 0%; /* Square */ + } + :root:has(#theme-Tab-Numbers[uc-theme-background_shape="SlightlyRounded"]) { + --background_shape: 5%; /* Slightly Rounded Square */ + } + :root:has(#theme-Tab-Numbers[uc-theme-background_shape="ModeratelyRounded"]) { + --background_shape: 15%; /* Moderately Rounded Square */ + } + :root:has(#theme-Tab-Numbers[uc-theme-background_shape="FullyRounded"]) { + --background_shape: 30%; /* Fully Rounded Square */ + } + :root:has(#theme-Tab-Numbers[uc-theme-background_shape="Circle"]) { + --background_shape: 50%; /* Perfect Circle */ } } - -@media (-moz-bool-pref: "uc.theme.custom_color_enabled") { - tab .tab-content { - --number_color: var(--uc-theme-number_color) !important; - --number_background_color: var( - --uc-theme-number_background_color - ) !important; - } -} - -/* Set font size for Extra Small (Override default) */ -:root:has(#theme-Tab-Numbers[uc-theme-font_size="XSmall"]) { - --font_size: 70% !important; /* Extra Small font size */ -} - -/* Set font size for Small */ -:root:has(#theme-Tab-Numbers[uc-theme-font_size="Small"]) { - --font_size: 80% !important; /* Small font size */ -} - -/* Set font size for Medium (Override default) */ -:root:has(#theme-Tab-Numbers[uc-theme-font_size="Medium"]) { - --font_size: 90% !important; /* Medium font size */ -} - -/* Set font size for Large (Override default) */ -:root:has(#theme-Tab-Numbers[uc-theme-font_size="Large"]) { - --font_size: 100% !important; /* Large font size */ -} - -/* Set font size for Extra Large (Override default) */ -:root:has(#theme-Tab-Numbers[uc-theme-font_size="XLarge"]) { - --font_size: 120% !important; /* Extra Large font size */ -} - -/* Ensure Close X button is on top of everything. */ -.tab-close-button { - z-index: 10; -} - -/* Customize the shape based on the preference values */ - -:root:has(#theme-Tab-Numbers[uc-theme-background_shape="Square"]) { - --background_shape: 0%; /* Square */ -} - -:root:has(#theme-Tab-Numbers[uc-theme-background_shape="SlightlyRounded"]) { - --background_shape: 5%; /* Slightly Rounded Square */ -} - -:root:has(#theme-Tab-Numbers[uc-theme-background_shape="ModeratelyRounded"]) { - --background_shape: 15%; /* Moderately Rounded Square */ -} - -:root:has(#theme-Tab-Numbers[uc-theme-background_shape="FullyRounded"]) { - --background_shape: 30%; /* Fully Rounded Square */ -} - -:root:has(#theme-Tab-Numbers[uc-theme-background_shape="Circle"]) { - --background_shape: 50%; /* Perfect Circle */ -} diff --git a/themes/22c9ec3b-7c62-46ae-991f-c8fff5046829/readme.md b/themes/22c9ec3b-7c62-46ae-991f-c8fff5046829/readme.md index a468b320..5b994b49 100644 --- a/themes/22c9ec3b-7c62-46ae-991f-c8fff5046829/readme.md +++ b/themes/22c9ec3b-7c62-46ae-991f-c8fff5046829/readme.md @@ -2,6 +2,10 @@ Shows the Number corresponding to each Tab. This can help you navigate between Tabs faster by pressing Cmd + Number of the Tab. (or Ctrl + Number on Windows) +Additions (v1.0.4 - current version): + +- Tab Numbers are replaced with Close button on Hover (in Expanded Mode) + Additions (v1.0.3 - current version): - Nicer Design for Expanded Tabs Mode diff --git a/themes/22c9ec3b-7c62-46ae-991f-c8fff5046829/theme.json b/themes/22c9ec3b-7c62-46ae-991f-c8fff5046829/theme.json index f19bea04..45d24e6c 100644 --- a/themes/22c9ec3b-7c62-46ae-991f-c8fff5046829/theme.json +++ b/themes/22c9ec3b-7c62-46ae-991f-c8fff5046829/theme.json @@ -1,17 +1,15 @@ { - "id": "22c9ec3b-7c62-46ae-991f-c8fff5046829", - "name": "Tab Numbers", - "description": "Shows the Number corresponding to each Tab.", - "homepage": "https://github.com/philmard/tab-numbers", - "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/22c9ec3b-7c62-46ae-991f-c8fff5046829/chrome.css", - "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/22c9ec3b-7c62-46ae-991f-c8fff5046829/readme.md", - "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/22c9ec3b-7c62-46ae-991f-c8fff5046829/image.png", - "author": "philmard", - "version": "1.0.3", - "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/22c9ec3b-7c62-46ae-991f-c8fff5046829/preferences.json", - "tags": [ - "tabs" - ], - "createdAt": "2024-11-09", - "updatedAt": "2024-12-22" -} \ No newline at end of file + "id": "22c9ec3b-7c62-46ae-991f-c8fff5046829", + "name": "Tab Numbers", + "description": "Shows the Number corresponding to each Tab.", + "homepage": "https://github.com/philmard/tab-numbers", + "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/22c9ec3b-7c62-46ae-991f-c8fff5046829/chrome.css", + "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/22c9ec3b-7c62-46ae-991f-c8fff5046829/readme.md", + "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/22c9ec3b-7c62-46ae-991f-c8fff5046829/image.png", + "author": "philmard", + "version": "1.0.4", + "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/22c9ec3b-7c62-46ae-991f-c8fff5046829/preferences.json", + "tags": ["tabs"], + "createdAt": "2024-11-09", + "updatedAt": "2024-12-22" +}