Can't reduce label font size below 17px

[noyannus]

I'm setting FF up for a high-res monitor, and find that TST does not reduce font-size below 17px.

For all FF, layout.css.devPixelsPerPx is set to 1.7. The zoom in FF's hamburger menu is 100%; fine tuning is done per site by Zoom Page WE.

Everything scales fine, except the label font size in TST. Setting font-size in the Advanced CSS field does have an effect above 17px, but with lower numbers, the rendered font size does not go below the size at 17px.

I tried to set font-size at several places where it appeared suitable, to no avail. I must be doing something wrong here, but couldn't find out what. Please give me a hint.

This is my current TST CSS under Advanced:

/* Show title of unread tabs with red and italic font */
/* :root.sidebar tab-item.unread .label-content {
  color: red !important;
  font-style: italic !important;
} */

/* Add private browsing indicator per tab */
:root.sidebar tab-item.private-browsing tab-label:before {
  content: "🕶";
}

/*  from TST GitHub
https://github.com/piroor/treestyletab/blob/5a8569c22feeaedeecde623a86832db7bc0419a2/webextensi
# This Source Code Form is subject to the terms of the Mozilla Public
# License, v. 2.0. If a copy of the MPL was not distributed with this
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/

@import url("/resources/ui-color.css");
@import url("base.css");


/* Coloring */

/*
:root {
  --toolbar-non-lwt-bgcolor: var(--in-content-page-background);
  --toolbar-non-lwt-textcolor: var(--in-content-page-color); font-size: 90%;

  --tab-like-surface: var(--browser-bg-base, var(--toolbar-non-lwt-bgcolor));
  --tab-surface-regular: var(--browser-bg-for-header-image, var(--tab-like-surface));
  --tab-text-regular: var(--browser-fg, var(--toolbar-non-lwt-textcolor));
  --tab-text-inverted: var(--browser-bg-more-lighter, var(--toolbar-non-lwt-bgcolor));
  --tab-text-active: var(--tab-text);
  --tab-text-active-inverted: var(--toolbar-non-lwt-bgcolor);
  --tab-border: var(--browser-border, var(--browser-bg-more-darker, var(--in-content-box-border-color-mixed)));
  --tab-surface-hover: var(--browser-bg-hover-for-header-image, var(--browser-bg-more-lighter, var(--in-content-box-background-hover)));
  --tab-surface-active: var(--browser-bg-active-for-header-image, var(--face-highlight-more-lighter, var(--in-content-button-background-mixed)));
  --tab-surface-active-hover: var(--browser-bg-active-for-header-image, var(--face-highlight-more-more-lighter, var(--in-content-button-background-active-mixed)));
  --tab-dropmarker: var(--browser-fg, var(--toolbar-non-lwt-textcolor));
  --throbber-color: var(--browser-loading-indicator, var(--tab-text));
  --throbber-color-active: var(--browser-loading-indicator, var(--tab-text-active));

  --tabbar-bg: var(--browser-bg-darker, darkgray);
}
*/


:root,
body,
background {
  background-color: var(--browser-background, var(--tabbar-bg));
  background-image: var(--browser-bg-images, none);
  background-position: var(--browser-bg-position, left);
  background-size: var(--browser-bg-size, auto);
  background-repeat: var(--browser-bg-repeat, none);
}
:root.right,
:root.right #background {
  background-position: right;
}

@media not (prefers-color-scheme: dark) {
  :root[color-scheme="system-color"] {
    --tab-surface-regular: var(--browser-bg-for-header-image, var(--browser-bg-base, -moz-dialog));
    --tab-text-regular: var(--browser-fg, -moz-dialogtext);
    --tab-text-inverted: var(--browser-bg-more-lighter, -moz-dialog);
    --tab-text-active: var(--tab-text-regular);
    --tab-text-active-inverted: Highlight;
    --tab-border: var(--browser-border, var(--browser-bg-more-darker, ThreeDShadow));
    --tab-surface-hover: var(--browser-bg-hover-for-header-image, var(--browser-bg-more-lighter, ThreeDHighlight));
    --tab-surface-active: var(--browser-bg-active-for-header-image, var(--face-highlight-more-lighter, Highlight));
    --tab-surface-active-hover: var(--browser-bg-active-for-header-image, var(--face-highlight-more-more-lighter, Highlight));
    --tab-dropmarker: var(--browser-fg, -moz-dialogtext);
    --tabbar-bg: var(--browser-bg-darker, ThreeDShadow);
  }
  :root[color-scheme="system-color"] #background::after {
    background: var(--browser-bg-darker, AppWorkspace);
    opacity: 0.15;

    bottom: 0;
    content: "";
    left: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 20;
  }
}

#tabbar {
  scrollbar-color: var(--theme-colors-toolbar_bottom_separator, var(--in-content-button-background-hover-mixed))
                   var(--theme-colors-toolbar, var(--in-content-box-background));
}

@media (prefers-color-scheme: dark) {
  :root {
    --tab-highlighter: var(--browser-tab-highlighter, var(--dark-tab-line));
    --tabbar-bg: var(--browser-bg-darker, var(--dark-frame));
  }
}

tab-item * {
  --tab-size: 30px !important;
  --tab-margin-left: 0px;
  --tab-margin-right: 0px;
  --tab-margin-top: 1px;
  --tab-margin-bottom: 1px;
  color: var(--tab-text);
  # font-size: 12px;
}
tab-item-substance {
  max-height: var(--tab-size) !important;
  # min-height: var(--tab-size) !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  # font-size: 12px;
}

tab-label {
  font-size: 12px;
}


tab-item:not(.active):hover,
.after-tabs button:hover,
.after-tabs [role="button"]:hover {
  --tab-surface: var(--tab-surface-hover);
  --tab-text: var(--tab-text-regular);
}

#subpanel-selector-anchor:hover {
  background: var(--tab-surface-hover);
  color: var(--tab-text-regular);
}

tab-item.active {
  --tab-surface: var(--tab-surface-active);
  --throbber-color: var(--throbber-color-active);
  --tab-text: var(--tab-text-active);
  --tab-text-inverted: var(--tab-text-active-inverted);
}

tab-item.bundled-active,
tab-item.active:hover {
  --tab-surface: var(--tab-surface-active-hover);
}

/* Show title of unread tabs in italic */
tab-item.unread .label-content {
  font-style: italic;
}

/* Less visible tab dividers. 
   A black border with a very low alpha slightly darkens any color. */
tab-item-substance {
  border: solid 0px #00000012; 
}

tab-closebox {
  background: none transparent;
  border: none 0 transparent;
  margin: 0;
  padding: 0.1em;
}

tab-item .burster {
  --throbber-color: var(--tab-loading-fill);
}


/* As little space before the tab name as possible.
   The fold/unfold icon is not affected. */
tab-item:not(.pinned) tab-item-substance {
  padding-left: 0px !important; /* !important is required when there are enough tabs to cause a scrollbar */
}


/* Wrap tab titles (instead of cropping) */
/* 
tab-item:not(.collapsed) tab-label {
  overflow: unset;
  white-space: unset;
} 
*/

/* Dropshadow */
:root {
  --shadow-color: rgba(0, 0, 0, 0.04);
  --shadow-blur: 0.2em;
}

:root.left tab-item:not(.pinned):not(collapsed) {
  box-shadow: -0.3em 0.3em var(--shadow-blur) var(--shadow-color);
}

:root.right tab-item:not(.pinned):not(collapsed) {
  box-shadow: 0.3em 0.3em var(--shadow-blur) var(--shadow-color);
}

.after-tabs button,
.after-tabs [role="button"] {
  box-shadow: 0 0.3em var(--shadow-blur) var(--shadow-color);
}


:root.left #tabbar {
  box-shadow: inset -0.2em 0.2em var(--shadow-blur) var(--shadow-color);
}

:root.right #tabbar {
  box-shadow: inset 0.2em 0.2em var(--shadow-blur) var(--shadow-color);
}


/* Transparent tabs are shown above solid tabs.
   We have to set z-index to show all tabs in the same layer. */
tab-item {
  z-index: auto;
}

.after-tabs button,
.after-tabs [role="button"] {
  z-index: 100;
}

Firefox: 125.0.2 (64-bit) for openSUSE
TreeStyleTab: 4.0.14
Operating System: openSUSE Tumbleweed 20240427
KDE Plasma Version: 6.0.4
KDE Frameworks Version: 6.1.0
Qt Version: 6.7.0
Kernel Version: 6.8.7-1-default (64-bit)
Graphics Platform: X11

[irvinm]

Does this work for you?

tab-item .label {
  font-size: 4px; 
}

[irvinm]

@noyannus I was able to apply my change to your CSS and it worked fine. The only other things I would check is if you are using some userChrome.css or userContent.css customizations. Like you already said, about:config changes shouldn't impact anything.

[noyannus]

Thank you for the quick reply.

It does not work on my main working profile, but it does on a nearly fresh older profile.

So it may be not a TST issue at all. That the Inspector finds no 17, (and 16 or 18) in the Styles pane (the figures appear only as parts of color settings/calculation or offsets, as in the image) also would support that conclusion.

Where else could a font size be set that affects a sidebar font size, but not in a fresh-y profile? about:config has nothing set with fontsize, and only the FF settings font sizes with font.size.

[piroor]

Firefox has a minimum font size setting: Settings => General => Fonts => Advanced => Minimum font size.

Did you change it?

[noyannus]

Firefox has a minimum font size setting

That was it!
I've added a section on font size to the Wiki and will close as resolved.