Skip to content

Fixed tab enumeration when folders are closed #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
juccul wants to merge 1 commit into
base: main
Choose a base branch
from
+133 −125
Open

Fixed tab enumeration when folders are closed #29

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
258 changes: 133 additions & 125 deletions chrome.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 <zen-folder> element which contains a collapsed label.
* We explicitly target <zen-folder> 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 */
Expand All @@ -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 */
Expand All @@ -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 */
}