chrome.css

#vertical-pinned-tabs-container > .zen-workspace-tabs-section[hidden="true"] {
  display: none !important;
}
tabs {
  counter-reset: tab-counter;
} /* Automatically increment tab numbers for each tab which is essential (in the active container) or is in an active workspace */
hbox.zen-essentials-container:not([hidden="true"]) tab:not([zen-glance-tab="true"]),
zen-workspace[active] tab:not([zen-glance-tab="true"]) {
  counter-increment: tab-counter;
}
/* Stop counting tabs inside collapsed folders, except the folder's active tab */
zen-folder:has(.tab-group-label[aria-expanded="false"]) tab:not([folder-active="true"]) {
  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 {
    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 */
  }

  /* 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;
  }

  /* Hide the second icon when tab is pinned */
  [zen-pinned-changed='true']:not([zen-essential]) .tab-reset-pin-button image {
    opacity: 1 !important;
  }
  
  [zen-pinned-changed='true']:not([zen-essential]) .tab-icon-image {
    opacity: 0 !important;
  }

  /* 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;
    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: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;
  }
}
@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 */
}
: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 */
}