-
Notifications
You must be signed in to change notification settings - Fork 0
/
theme.css
233 lines (194 loc) · 8.02 KB
/
theme.css
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
@import "~typeface-lato";
@import "~typeface-raleway";
:root {
--leading: 1rem;
--background-color-main-dark: hsl(207, 23%, 17%);
--backdrop-color-hue: 0;
--nav-logo-color: #fff;
--nav-logo-color-inverted: hsl(210, 18%, 15%);
}
body {
--warning-text-color: var(--amber-text-color);
--warning-border-color: var(--amber-border-color);
--warning-background-color: var(--amber-background-color);
}
.light,
body {
--background-color: #fff;
--background-color-secondary: #f4f4f4;
--background-color-tertiary: #fbfbfb;
--nav-background-color: hsla(207, 80%, 4%, 0.9);
--nav-text-color: rgba(255, 255, 255, 0.75);
--logo-color: #1d3557;
--logo-color-inverted: #fff;
--text-highlight-background-color: var(--blue-background-color);
--text-highlight-border-color: var(--blue-border-color);
--search-highlight-background-color: hsla(54, 100%, 50%, 1);
--search-highlight-border-color: hsla(54, 100%, 46%, 1);
--text-color: black;
--text-color-inverted: white;
--text-color-light: rgba(0, 0, 0, 0.8);
--text-color-lighter: rgba(0, 0, 0, 0.6);
--text-color-lightest: rgba(0, 0, 0, 0.4);
--text-color-secondary: hsla(208, 30%, 50%, 1);
--text-color-red: hsla(0, 70%, 45%, 1);
--text-color-green: hsla(120, 80%, 40%, 1);
--link-color: hsl(203, 82%, 35%);
--link-icon-color: hsl(203, 82%, 70%);
--red-text-color: hsla(0, 70%, 40%, 1);
--red-border-color: hsla(0, 80%, 72%, 0.7);
--red-background-color: hsla(0, 80%, 72%, 0.16);
--orange-text-color: hsla(30, 100%, 40%, 1);
--orange-border-color: hsla(30, 80%, 72%, 0.7);
--orange-background-color: hsla(30, 80%, 72%, 0.16);
--amber-text-color: hsla(45, 85%, 28%, 1);
--amber-border-color: hsla(45, 90%, 50%, 0.6);
--amber-background-color: hsla(45, 90%, 78%, 0.16);
--yellow-text-color: hsla(54, 100%, 35%, 1);
--yellow-border-color: hsla(54, 100%, 50%, 0.9);
--yellow-background-color: hsla(54, 100%, 50%, 0.16);
--yellow-dim-text-color: hsla(54, 100%, 45%, 0.6);
--yellow-dim-border-color: hsla(54, 100%, 50%, 0.35);
--yellow-dim-background-color: hsla(54, 100%, 50%, 0.14);
--green-text-color: hsla(80, 90%, 35%, 1);
--green-border-color: hsla(80, 80%, 72%, 0.7);
--green-background-color: hsla(80, 80%, 72%, 0.16);
--mint-text-color: hsla(140, 90%, 35%, 1);
--mint-border-color: hsla(140, 80%, 72%, 0.7);
--mint-background-color: hsla(140, 80%, 72%, 0.16);
--cyan-text-color: hsla(180, 80%, 30%, 1);
--cyan-border-color: hsla(180, 80%, 75%, 0.9);
--cyan-background-color: hsla(180, 80%, 75%, 0.16);
--blue-text-color: hsla(210, 50%, 50%, 1);
--blue-border-color: hsla(210, 80%, 75%, 0.9);
--blue-background-color: hsla(210, 80%, 75%, 0.16);
--navy-text-color: hsla(245, 80%, 60%, 1);
--navy-border-color: hsla(245, 80%, 75%, 0.9);
--navy-background-color: hsla(245, 80%, 75%, 0.16);
--violet-text-color: hsla(280, 80%, 50%, 1);
--violet-border-color: hsla(280, 64%, 72%, 0.9);
--violet-background-color: hsla(280, 64%, 72%, 0.16);
--pink-text-color: hsla(320, 80%, 45%, 1);
--pink-border-color: hsla(320, 64%, 72%, 0.9);
--pink-background-color: hsla(320, 64%, 72%, 0.16);
--border-color: rgba(0, 0, 0, 0.12);
--hr-color: hsla(0, 0%, 0%, 0.15);
--item-icon-color: var(--amber-text-color);
--label-icon-color: var(--item-icon-color);
--kbd-outer-border-color: #ccc;
--kbd-inner-border-color: var(--background-color);
--kbd-background-color: hsla(0, 0%, 0%, 0.07);
--tab-accent-color: hsl(208, 82%, 45%);
--tab-background-color: hsl(208, 50%, 95%);
--tab-border-color: hsl(0, 0%, 91%);
--tab-background-color-secondary: hsl(208, 0%, 100%);
--tab-border-color-secondary: hsl(0, 0%, 65%);
--tab-background-color-on-secondary: hsl(208, 60%, 95%);
--tab-border-color-on-secondary: hsl(0, 0%, 88%);
--overlay-background-color: hsla(0, 0%, 100%, 0.7);
--active-button-background-color: hsla(203, 95%, 80%, 0.15);
--active-button-background-color-hover: hsla(203, 95%, 80%, 0.08);
--active-button-border-color: hsla(203, 82%, 50%, 0.35);
--active-button-border-color-hover: hsla(203, 82%, 50%, 0.15);
--outline-color: rgba(19, 124, 189, 0.6);
}
.dark {
--background-color: hsl(210, 18%, 15%);
--background-color-secondary: hsl(210, 18%, 18%);
--background-color-tertiary: hsl(210, 18%, 16.5%);
--nav-background-color: hsla(207, 60%, 1%, 0.3);
--nav-text-color: rgba(255, 255, 255, 0.75);
--logo-color: #fff;
--logo-color-inverted: var(--background-color);
--text-highlight-background-color: hsla(210, 80%, 75%, 0.15);
--text-highlight-border-color: hsla(210, 80%, 75%, 0.75);
--search-highlight-background-color: hsla(40, 100%, 60%, 0.4);
--search-highlight-border-color: hsl(40, 100%, 50%);
--text-color: rgba(255, 255, 255, 1);
--text-color-inverted: black;
--text-color-light: rgba(255, 255, 255, 0.75);
--text-color-lighter: rgba(255, 255, 255, 0.55);
--text-color-lightest: rgba(255, 255, 255, 0.4);
--text-color-secondary: hsla(208, 30%, 70%, 1);
--text-color-red: hsla(0, 50%, 50%, 1);
--text-color-green: hsla(120, 80%, 40%, 1);
--link-color: hsl(203, 85%, 61%);
--link-icon-color: hsl(203, 82%, 40%);
--red-text-color: hsla(0, 70%, 40%, 1);
--red-border-color: hsla(0, 80%, 72%, 0.7);
--red-background-color: hsla(0, 80%, 72%, 0.08);
--orange-text-color: hsla(30, 60%, 50%, 1);
--orange-border-color: hsla(30, 90%, 72%, 0.5);
--orange-background-color: hsla(30, 90%, 72%, 0.08);
--amber-text-color: hsla(45, 90%, 43%, 1);
--amber-border-color: hsla(45, 90%, 50%, 0.6);
--amber-background-color: hsla(45, 90%, 72%, 0.08);
--yellow-text-color: hsla(54, 100%, 45%, 1);
--yellow-border-color: hsla(54, 100%, 50%, 0.9);
--yellow-background-color: hsla(54, 100%, 50%, 0.08);
--yellow-dim-text-color: hsla(54, 100%, 45%, 0.6);
--yellow-dim-border-color: hsla(54, 100%, 50%, 0.35);
--yellow-dim-background-color: hsla(54, 100%, 50%, 0.07);
--green-text-color: hsla(80, 80%, 50%, 1);
--green-border-color: hsla(80, 80%, 72%, 0.7);
--green-background-color: hsla(80, 80%, 72%, 0.08);
--mint-text-color: hsla(140, 80%, 50%, 1);
--mint-border-color: hsla(140, 80%, 72%, 0.7);
--mint-background-color: hsla(140, 80%, 72%, 0.08);
--cyan-text-color: hsla(180, 80%, 50%, 1);
--cyan-border-color: hsla(180, 80%, 75%, 0.9);
--cyan-background-color: hsla(180, 80%, 75%, 0.08);
--blue-text-color: hsla(210, 50%, 50%, 1);
--blue-border-color: hsla(210, 95%, 75%, 0.5);
--blue-background-color: hsla(210, 80%, 75%, 0.08);
--navy-text-color: hsla(245, 90%, 65%, 1);
--navy-border-color: hsla(245, 80%, 75%, 0.9);
--navy-background-color: hsla(245, 80%, 75%, 0.08);
--violet-text-color: hsla(280, 80%, 60%, 1);
--violet-border-color: hsla(280, 64%, 72%, 0.9);
--violet-background-color: hsla(280, 64%, 72%, 0.08);
--pink-text-color: hsla(320, 80%, 55%, 1);
--pink-border-color: hsla(320, 64%, 72%, 0.9);
--pink-background-color: hsla(320, 64%, 72%, 0.08);
--border-color: rgba(255, 255, 255, 0.12);
--hr-color: hsla(0, 0%, 100%, 0.15);
--kbd-outer-border-color: hsl(207, 28%, 11%);
--kbd-inner-border-color: hsl(207, 23%, 27%);
--kbd-background-color: hsl(207, 23%, 22%);
--tab-accent-color: hsl(208, 82%, 55%);
--tab-background-color: hsl(207, 23%, 22%);
--tab-border-color: hsl(207, 28%, 12%);
--tab-background-color-secondary: hsl(207, 23%, 15%);
--tab-border-color-secondary: hsl(207, 28%, 5%);
--tab-background-color-on-secondary: hsl(207, 23%, 23%);
--tab-border-color-on-secondary: hsl(207, 28%, 12%);
--overlay-background-color: hsla(0, 0%, 0%, 0.7);
--active-button-background-color: hsla(203, 70%, 60%, 0.1);
--active-button-background-color-hover: hsla(203, 70%, 60%, 0.05);
--active-button-border-color: hsla(203, 50%, 50%, 0.3);
--active-button-border-color-hover: hsla(203, 50%, 50%, 0.15);
--outline-color: rgba(255, 255, 255, 0.6);
}
.dark {
-webkit-font-smoothing: antialiased;
}
body,
input,
button,
select {
font-family: Lato, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Raleway, sans-serif;
}
textarea,
code,
pre {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}