tab numbers are replaced by close button on hover

themes/22c9ec3b-7c62-46ae-991f-c8fff5046829/chrome.css

@@ -1,22 +1,17 @@
+@-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 */
-
-/* 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 */
+      content: counter(
-
+        tab-counter
-    /* Positioning and styling */
+      ); /* 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;
+      z-index: -100; /* Background and shape for the number */
-
-    /* Background and shape for the number */
       display: inline-block;
       background-color: var(
         --number_background_color,
@@ -31,25 +26,46 @@ 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 */
     }
+
+    /* 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;
+    }
+
+    /*  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;
+    }
+
+    /* 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 */
+        content: counter(
-
+          tab-counter
-      /* Positioning and styling */
+        ); /* 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;
+        z-index: -100; /* Background and shape for the number */
-
-      /* Background and shape for the number */
         display: inline-block;
         background-color: var(
           --number_background_color,
@@ -67,36 +83,32 @@ tabs {
         margin-right: 5px;
       }
     }
-}
+  } /* Styles when the sidebar is NOT expanded (compact mode) */
-
-/* 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;
       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") */
+      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) */
-  /* 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,
@@ -105,15 +117,12 @@ tabs {
         color: var(--number_color, inherit); /* Fallback to default color */
       }
     }
-}
+  } /* Enable bold text when the preference is enabled */
-
-/* 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;
@@ -121,56 +130,38 @@ tabs {
         --uc-theme-number_background_color
       ) !important;
     }
-}
+  } /* Set font size for Extra Small (Override default) */
-
-/* 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 */
-
-/* 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) */
-
-/* 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) */
-
-/* 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) */
-
-/* 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. */
-
-/* Ensure Close X button is on top of everything. */
   .tab-close-button {
     z-index: 10;
-}
+  } /* Customize the shape based on the preference values */
-
-/* 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 */
   }
+}

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

themes/22c9ec3b-7c62-46ae-991f-c8fff5046829/theme.json

@@ -7,11 +7,9 @@
   "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",
+  "version": "1.0.4",
   "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/22c9ec3b-7c62-46ae-991f-c8fff5046829/preferences.json",
-    "tags": [
+  "tags": ["tabs"],
-        "tabs"
-    ],
   "createdAt": "2024-11-09",
   "updatedAt": "2024-12-22"
 }