firehacks/tabColour.css at main · confluence/firehacks · 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
/* Base tab colours */

tab .tab-background {
  /* This is overriden per element by the JS */
  --firehacks-hue: 0deg;
  /* This never changes */
  --firehacks-saturation: 100%;
  /* These are adjusted for selected/hover tabs */
  --firehacks-lightness-from: 70%;
  --firehacks-lightness-to: 90%;

  /* These are used for subdomain highlights */
  --firehacks-subdomain-hue: 0deg;
  --firehacks-subdomain-alpha: 0%;
  --firehacks-subdomain-stop: 20px;

  /* These are used for highlights for the first two GitHub path elements
   * (Usually user/org and repo)
   */
  --firehacks-github-hue-one: 0deg;
  --firehacks-github-hue-two: 0deg;
  --firehacks-github-alpha-one: 0%;
  --firehacks-github-alpha-two: 0%;

  /* Note that these gradients go right to left! */
  --firehacks-github-stop-one: 21px;
  --firehacks-github-stop-two: 30px;

  /* These gradients are ordered from top to bottom:
   * 4. GitHub highlight one (on top, so that it looks the same whether the second one exists or not)
   * 3. GitHub highlight two
   * 2. Subdomain highlight
   * 1. Main domain colour
   */
  background: linear-gradient(315deg,
    hsl(var(--firehacks-github-hue-one) var(--firehacks-saturation) var(--firehacks-lightness-to) / var(--firehacks-github-alpha-one)),
    hsl(var(--firehacks-github-hue-one) var(--firehacks-saturation) var(--firehacks-lightness-from) / var(--firehacks-github-alpha-one)) var(--firehacks-github-stop-one),
    transparent var(--firehacks-github-stop-one) 100%
  ), linear-gradient(225deg,
    hsl(var(--firehacks-github-hue-two) var(--firehacks-saturation) var(--firehacks-lightness-to) / var(--firehacks-github-alpha-two)),
    hsl(var(--firehacks-github-hue-two) var(--firehacks-saturation) var(--firehacks-lightness-from) / var(--firehacks-github-alpha-two)) var(--firehacks-github-stop-two),
    transparent var(--firehacks-github-stop-two) 100%
  ), linear-gradient(135deg,
    hsl(var(--firehacks-subdomain-hue) var(--firehacks-saturation) var(--firehacks-lightness-from) / var(--firehacks-subdomain-alpha)),
    hsl(var(--firehacks-subdomain-hue) var(--firehacks-saturation) var(--firehacks-lightness-to) / var(--firehacks-subdomain-alpha)) var(--firehacks-subdomain-stop),
    transparent var(--firehacks-subdomain-stop) 100%
  ),
  linear-gradient(135deg,
    hsl(var(--firehacks-hue) var(--firehacks-saturation) var(--firehacks-lightness-from)),
    hsl(var(--firehacks-hue) var(--firehacks-saturation) var(--firehacks-lightness-to))
  ) !important;
}

/* Hide the GitHub highlights and adjust the subdomain proportion in pinned tabs */
tab[pinned] .tab-background {
  --firehacks-subdomain-stop: 25%;
  --firehacks-github-stop-one: 0px;
  --firehacks-github-stop-two: 0px;
}

/* Make selected / hover tabs darker */
tab[selected] .tab-background, tab:hover .tab-background {
  --firehacks-lightness-from: 60%;
  --firehacks-lightness-to: 80%;
}

/* Adjust lightnesses for dark mode -- now selected/hover is lighter */
@media (prefers-color-scheme: dark) {
  tab .tab-background {
    --firehacks-lightness-from: 20%;
    --firehacks-lightness-to: 40%;
  }

  tab[selected] .tab-background, tab:hover .tab-background {
    --firehacks-lightness-from: 30%;
    --firehacks-lightness-to: 50%;
  }
}