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

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