lit.dev/packages/lit-dev-content/site/css/global.css at a87febb8225d5427f7bd13439c09c9179b7d4f13 · lit/lit.dev · 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
@import url('./fonts/manrope.css');
@import url('./fonts/roboto-mono.css');
@import url('./fonts/open-sans.css');
@import url('./header.css');
@import url('./footer.css');
@import url('./mobile-nav.css');
@import url('./code.css');
@import url('./codemirror.css');
@import url('./version-selector.css');

body[dsd-pending] {
  display: none;
}

html {
  font-size: 18px;
  --header-nav-height: 60px;
  /* The litdev-banner component will automatically update this variable if
     there is a banner present. */
  --banner-height: 0px;
  /* It's helpful to consider the banner part of the header, because the
     --header-height variable is used in many places to determine where the main
     content begins (e.g. other sticky elements, scroll-margin-top). */
  --header-height: calc(var(--header-nav-height) + var(--banner-height));
  --footer-top-height: 12rem;
  --footer-bottom-height: 10rem;
  --content-max-width: 76rem;
  -webkit-font-smoothing: antialiased;
}

code {
  font-family: "Roboto Mono", monospace;
}

@media (max-width: 864px) {
  html {
    --footer-top-height: 20rem;
  }
}

body {
  margin: 0;
  font-family: Manrope, sans-serif;
  background-color: var(--sys-color-background);
  color: var(--sys-color-on-background);
}

main {
  /* Ensures that the footer never floats above the bottom of the viewport on
     short pages. */
  min-height: calc(100vh - var(--header-height) - var(--footer-top-height) -
    var(--footer-bottom-height)
  );
  scroll-margin-top: var(--header-height);
}

a {
  text-decoration: none;
  color: var(--sys-color-primary-variant);
}

/* On some platforms like Linux, a traditional scrollbar will be always visible
   on the nav, which is quite distracting. This reproduces something similar to
   macOS style on all platforms. */
.minimalScroller::-webkit-scrollbar {
  width: 15px;
}
.minimalScroller:hover::-webkit-scrollbar-thumb {
  background-color: rgb(255 255 255 / 0.3);
  background-clip: content-box !important;
  border: 4px solid transparent;
  border-radius: 10px;
}

/* Hide something visually in a way that screen readers will read. */
.offscreen {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

body[code-language-preference="ts"] [code-language]:not([code-language="ts"]) {
  /* Hide JS content when preference is TS. */
  display: none;
}

body[code-language-preference="js"] [code-language]:not([code-language="js"]) {
  /* Hide TS content when preference is JS. */
  display: none;
}

:nth-child(4n+1) {
  --selection-background: var(--sys-color-primary-container);
  --selection-color: var(--sys-color-primary-container);
}
:nth-child(4n+2) {
  --selection-background: var(--color-indigo);
  --selection-color: var(--color-indigo)
}
:nth-child(4n+3) {
  --selection-background: var(--sys-color-tertiary-container);
  --selection-color: var(--sys-color-tertiary-container)
}
:nth-child(4n+4) {
  --selection-background: var(--sys-color-secondary-container);
  --selection-color: var(--sys-color-secondary-container)
}

::selection {
  background: color-mix(in srgb, var(--selection-background) 10%, var(--octonary-contrast));
  color: color-mix(in srgb, var(--selection-color) 40%, var(--primary-contrast));
}