configFiles/userChrome.css at master · geekingfrog/configFiles · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/*
 * need to enable toolkit.legacyUserProfileCustomizations.stylesheets
 * in about:config
 * Then put this file under ~/.mozilla/firefox/<profile-id>.default/chrome/userChrome.css
 * and flip to true toolkit.legacyUserProfileCustomizations.stylesheets
 * in about:config
 *
 * Doc: https://raymii.org/s/blog/Firefox-89-proton-ui-tab-styling.html
 */

.tabbrowser-tab .tab-icon-stack::after {
  position: absolute;
  top: calc(100% - 0.4rem) !important;
  left: -0.55rem;
  background-color: rgba(220, 223, 205, 0.8);
  color: black;
  /* font-family: monospace; */
  font-weight: 500;
  padding-right: 0.2rem;
  text-shadow: none;
}

.tabbrowser-tab .tab-icon-stack[selected=true]::after {
  background-color: rgba(10, 10, 25, 0.8);
  color: white;
  /* border-radius: 0 0 0 var(--tab-border-radius); */
}


/* put this one first so that it gets overridden by the other declaration. */
/* This avoid having the number 9 when there are less than 9 tabs. */
.tabbrowser-tab:last-of-type .tab-icon-stack::after { content: "9"; }
.tabbrowser-tab:nth-child(1) .tab-icon-stack::after { content: "1"; }
.tabbrowser-tab:nth-child(2) .tab-icon-stack::after { content: "2"; }
.tabbrowser-tab:nth-child(3) .tab-icon-stack::after { content: "3"; }
.tabbrowser-tab:nth-child(4) .tab-icon-stack::after { content: "4"; }
.tabbrowser-tab:nth-child(5) .tab-icon-stack::after { content: "5"; }
.tabbrowser-tab:nth-child(6) .tab-icon-stack::after { content: "6"; }
.tabbrowser-tab:nth-child(7) .tab-icon-stack::after { content: "7"; }
.tabbrowser-tab:nth-child(8) .tab-icon-stack::after { content: "8"; }