Change the styling of unloaded (pending) tabs

[Keith94]

Is it possible to change the css for unloaded tabs yet? For example change opacity, etc..

[piroor]

By recent commits, now discarded tabs have "discarded" class. So user-defined style rule like following will work as expected:

.tab.discarded { opacity: 0.75; }

[piroor]

This is also filed at the code snippets: https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules

[kkot]

@piroor Could you tell me how to make only icon more opaque ?

I found name of CSS class in code. Thanks for great addon.

.tab.discarded .favicon {
  opacity: 0.5 !important;
}

[vn971]

Great to see it working! BTW, I think it's important enough to be built-in.

[Ainoss]

Unfortunately, it doesn't work for me after upgrading to 57.0.2 (or this is just coincidence). User-defined style rule as @piroor posted above does nothing. Is it a known problem, or just for me? It will be great if anybody could give solution.

[vn971]

@Ainoss overriding font somewhy stopped working for me (I override with color: red;), but opacity works. I'm on ArchLinux, FF version 57.0.2.

[encukou]

works with:

.tab.discarded .label {
  color: red;
}

[Ainoss]

@encukou Thank for your suggestion! It works fine (win10).

[alreadydone]

Unable to make this work (on Windows 10, FF60.0b12) with any of the above approaches ... any ideas? Not really familiar with CSS, but "Hide the 'Tree Style Tab' header" and "Hide horizontal tabs at the top of the window" from https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#for-userchromecss were successful. Not sure relevant or not: Auto Tab Discard is installed.

[piroor]

@alreadydone You need to put custom CSS rules to an input field in TST's configuration page, instead of your userChrome.css file.

[alreadydone]

It works. Thanks!

[gnomesley]

This seems to be broken in the latest version (2.4.19) with FF 60.

[piroor]

@gnomesley Please add one more extra CSS rule:

.tab .label-content {
  color: inherit;
}

I'll include this as a builtin rule at the next release of TST. Sorry.

[gnomesley]

Thanks for the response!

[bb010g]

userChrome.css equivalent to the wiki TST snippet:

/* Change styling of pending (unloaded) tabs */
.tabbrowser-tab[pending="true"] {
  opacity: 0.75;
}
.tabbrowser-tab[pending="true"] .tab-label-container {
  color: red;
}

Only favicon:

/* Change styling of the favicon of pending (unloaded) tabs */
.tabbrowser-tab[pending="true"] .tab-icon-image {
  opacity: 0.5;
}