diff --git a/chrome.css b/chrome.css index 83c2e6c..05c7dd0 100644 --- a/chrome.css +++ b/chrome.css @@ -1,68 +1,23 @@ #vertical-pinned-tabs-container > .zen-workspace-tabs-section[hidden="true"] { - display: none !important; +display: none !important; } tabs { counter-reset: tab-counter; -} /* Automatically increment tab numbers for each tab which is essential or is in an active workspace */ -hbox.zen-essentials-container tab:not([zen-glance-tab="true"]), -zen-workspace[active] tab:not([zen-glance-tab="true"]) { - counter-increment: tab-counter; -} /* Styles when the sidebar is expanded */ -@media (-moz-bool-pref: "zen.view.sidebar-expanded") { - tab:not([zen-glance-tab="true"]) > .tab-stack > .tab-content::after { - 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: 3px; /* Changed to 3px to align with the Close Button */ + /* 1. Base Rule: Increment everything by default (Keep your existing rule) */ + hbox.zen-essentials-container tab:not([zen-glance-tab="true"]), + zen-workspace[active] tab:not([zen-glance-tab="true"]) { + counter-increment: 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; - } - - /* Hide tab numbers on the right side when hovering over */ - tab:not([zen-glance-tab="true"]) > .tab-stack > .tab-content:hover::after { - opacity: 0; /* Make it invisible */ - width: 0; /* In order to bring the close button to the right */ - margin: 0; - } + /* 2. Definitive Exception Rule: Stop counting tabs inside collapsed folders */ - /* 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"]) { + /* Target tabs that are inside a element which contains a collapsed label. + * We explicitly target to ensure we don't accidentally match the whole workspace. */ + zen-folder:has(.tab-group-label[aria-expanded="false"]) tab { + counter-increment: none; + } /* Styles when the sidebar is expanded */ + @media (-moz-bool-pref: "zen.view.sidebar-expanded") { tab:not([zen-glance-tab="true"]) > .tab-stack > .tab-content::after { - display: none; /* Hide the ::after pseudo-element first */ - } - tab:not([zen-glance-tab="true"]) > .tab-stack > .tab-content::before { content: counter( tab-counter ); /* Space before the number */ /* Positioning and styling */ @@ -73,8 +28,8 @@ zen-workspace[active] tab:not([zen-glance-tab="true"]) { 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 */ @@ -84,82 +39,135 @@ zen-workspace[active] tab:not([zen-glance-tab="true"]) { 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:not([zen-glance-tab="true"]) > .tab-stack > .tab-content::before { - 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") */ - 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"]) { + + /* 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:not([zen-glance-tab="true"]) > .tab-stack > .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:not([zen-glance-tab="true"]) > .tab-stack > .tab-content::after { + display: none; /* Hide the ::after pseudo-element first */ + } + tab:not([zen-glance-tab="true"]) > .tab-stack > .tab-content::before { + 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:not([zen-glance-tab="true"]) > .tab-stack > .tab-content::before { 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") */ + 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:not([zen-glance-tab="true"]) > .tab-stack > .tab-content::before { + 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:not([zen-glance-tab="true"]) > .tab-stack > .tab-content { + --bold-text: bold; } } -} /* Enable bold text when the preference is enabled */ -@media (-moz-bool-pref: "uc.theme.bold-text-enable.enabled") { - tab:not([zen-glance-tab="true"]) > .tab-stack > .tab-content { - --bold-text: bold; + @media (-moz-bool-pref: "uc.theme.custom_color_enabled") { + tab:not([zen-glance-tab="true"]) > .tab-stack > .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 */ } -} -@media (-moz-bool-pref: "uc.theme.custom_color_enabled") { - tab:not([zen-glance-tab="true"]) > .tab-stack > .tab-content { - --number_color: var(--uc-theme-number_color) !important; - --number_background_color: var( - --uc-theme-number_background_color - ) !important; + :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 */ } -} /* 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 */ -}