-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.css
271 lines (243 loc) · 11.7 KB
/
tailwind.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
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
@tailwind base;
@tailwind utilities;
@tailwind components;
@layer base {
html {
@apply antialiased;
font-family: Inter;
line-height: 20px;
font-size: 14px;
font-style: normal;
color: #1D2331;
}
body {
--color-blue-50: #86b5ef; --color-blue-30: #d0e2f8; --color-blue-80: #024391; --color-blue-20: #e9f2fc; --color-blue-115: #040c13; --color-blue-5: #f8fbfe; --color-blue-100: #052040; --color-blue-90: #053775; --color-blue-110: #05101e; --color-blue-70: #045ac3; --color-blue-60-brand: #2278e1; --color-blue-10: #f4f8fd; --color-blue-40: #a7c9f3; --color-red-50: #ef7768; --color-red-30: #f9d1cc; --color-red-80: #9b0b00; --color-red-20: #fdedeb; --color-red-115: #0e0909; --color-red-5: #fef9f9; --color-red-100: #410800; --color-red-90: #7a0d00; --color-red-110: #1f0000; --color-red-70: #c31a03; --color-red-60-brand: #ea4a35; --color-red-10: #fef6f5; --color-red-65: #d72710; --color-red-40: #f4a499; --color-yellow-50: #ffdf40; --color-yellow-30: #fff4bf; --color-yellow-80: #773f00; --color-yellow-20: #fff9d9; --color-yellow-115: #1f0800; --color-yellow-5: #fffdf2; --color-yellow-100: #391700; --color-yellow-90: #512600; --color-yellow-110: #2c1300; --color-yellow-70: #8f4e00; --color-yellow-60-brand: #ffd400; --color-yellow-10: #fffbe6; --color-yellow-40: #ffe97f; --color-grey-50: #90959f; --color-grey-60: #4a5162; --color-grey-30: #ccced3; --color-grey-80: #28303f; --color-grey-20: #ebecee; --color-grey-5: #f9f9f9; --color-grey-100: #121822; --color-grey-90: #1d2331; --color-grey-110: #0c121b; --color-grey-70: #353d50; --color-grey-0: #ffffff; --color-grey-95: #161d28; --color-grey-55: #727885; --color-grey-10: #f5f5f6; --color-grey-40: #b9bbc2; --color-green-60: #78b506; --spacing-x1: 8px; --spacing-x6: 48px; --spacing-x3: 24px; --spacing-half: 4px; --spacing-x8: 64px; --spacing-x12: 96px; --spacing-x4: 32px; --spacing-quarter: 2px; --spacing-x2: 16px; --spacing-x1point5: 12px; --corner-corner-max: 999px; --corner-corner-s: 4px; --corner-corner-m: 6px; --corner-corner-l: 8px; --corner-corner-xs: 2px; --color-surface-info: var(--color-blue-10); --color-elements-assistive: var(--color-grey-55); --color-surface-alert: var(--color-red-10); --color-code-blue: #358fea; --color-elements-readable: var(--color-grey-90); --color-surface-1: var(--color-grey-5); --color-elements-disabled: var(--color-grey-30); --color-surface-0: var(--color-grey-0); --color-logo-readable: #1d2331; --color-elements-yellow: #ff971c; --color-cta: var(--color-blue-60-brand); --color-elements-warning: var(--color-yellow-70); --color-border-XS-critical: var(--color-red-50); --color-cta-hover: var(--color-blue-70); --color-elements-readable-inv: var(--color-grey-0); --color-surface-selected: var(--color-grey-20); --color-critical-default: var(--color-red-65); --color-elements-green: #6d9f0f; --color-elements-links: var(--color-blue-60-brand); --color-border-XS-regular-hover: var(--color-blue-50); --color-border-default: var(--color-grey-30); --color-border-XS-critical-hover: var(--color-red-40); --color-elements-info: var(--color-blue-60-brand); --color-critical-hover: var(--color-red-70); --color-code-red: #cd6153; --color-border-XS-regular: var(--color-blue-30); --color-separator: var(--color-grey-20); --color-elements-alert: var(--color-red-65); --color-surface-warning: var(--color-yellow-10)
}
body.dark {
--color-blue-50: #86b5ef; --color-blue-30: #d0e2f8; --color-blue-80: #024391; --color-blue-20: #e9f2fc; --color-blue-115: #040c13; --color-blue-5: #f8fbfe; --color-blue-100: #052040; --color-blue-90: #053775; --color-blue-110: #05101e; --color-blue-70: #045ac3; --color-blue-60-brand: #2278e1; --color-blue-10: #f4f8fd; --color-blue-40: #a7c9f3; --color-red-50: #ef7768; --color-red-30: #f9d1cc; --color-red-80: #9b0b00; --color-red-20: #fdedeb; --color-red-115: #0e0909; --color-red-5: #fef9f9; --color-red-100: #410800; --color-red-90: #7a0d00; --color-red-110: #1f0000; --color-red-70: #c31a03; --color-red-60-brand: #ea4a35; --color-red-10: #fef6f5; --color-red-65: #d72710; --color-red-40: #f4a499; --color-yellow-50: #ffdf40; --color-yellow-30: #fff4bf; --color-yellow-80: #773f00; --color-yellow-20: #fff9d9; --color-yellow-115: #1f0800; --color-yellow-5: #fffdf2; --color-yellow-100: #391700; --color-yellow-90: #512600; --color-yellow-110: #2c1300; --color-yellow-70: #8f4e00; --color-yellow-60-brand: #ffd400; --color-yellow-10: #fffbe6; --color-yellow-40: #ffe97f; --color-grey-50: #90959f; --color-grey-60: #4a5162; --color-grey-30: #ccced3; --color-grey-80: #28303f; --color-grey-20: #ebecee; --color-grey-5: #f9f9f9; --color-grey-100: #121822; --color-grey-90: #1d2331; --color-grey-110: #0c121b; --color-grey-70: #353d50; --color-grey-0: #ffffff; --color-grey-95: #161d28; --color-grey-55: #727885; --color-grey-10: #f5f5f6; --color-grey-40: #b9bbc2; --color-green-60: #78b506; --spacing-x1: 8px; --spacing-x6: 48px; --spacing-x3: 24px; --spacing-half: 4px; --spacing-x8: 64px; --spacing-x12: 96px; --spacing-x4: 32px; --spacing-quarter: 2px; --spacing-x2: 16px; --spacing-x1point5: 12px; --corner-corner-max: 999px; --corner-corner-s: 4px; --corner-corner-m: 6px; --corner-corner-l: 8px; --corner-corner-xs: 2px; --color-surface-info: var(--color-blue-100); --color-elements-assistive: var(--color-grey-55); --color-surface-alert: var(--color-red-100); --color-code-blue: #358fea; --color-elements-readable: var(--color-grey-20); --color-surface-1: var(--color-grey-95); --color-elements-disabled: var(--color-grey-90); --color-surface-0: var(--color-grey-110); --color-logo-readable: var(--color-grey-60); --color-elements-yellow: #ff971c; --color-cta: var(--color-blue-70); --color-elements-warning: var(--color-yellow-30); --color-border-XS-critical: var(--color-red-50); --color-cta-hover: var(--color-blue-80); --color-elements-readable-inv: var(--color-grey-20); --color-surface-selected: var(--color-grey-90); --color-critical-default: var(--color-red-70); --color-elements-green: #669018; --color-elements-links: var(--color-code-blue); --color-border-XS-regular-hover: var(--color-blue-50); --color-border-default: var(--color-grey-80); --color-border-XS-critical-hover: var(--color-red-40); --color-elements-info: var(--color-blue-30); --color-critical-hover: var(--color-red-80); --color-code-red: #cd6153; --color-border-XS-regular: var(--color-blue-90); --color-separator: var(--color-grey-90); --color-elements-alert: var(--color-red-30); --color-surface-warning: var(--color-yellow-100)
}
::-webkit-scrollbar {
width: 4px;
height: 4px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: var(--color-elements-assistive);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--color-elements-readable);
}
}
@layer components {
.shadow-button {
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}
.shadow-input {
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}
.shadow-dropdown {
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.05)
}
.txt-page-header {
font-family: Metropolis;
font-size: 22px;
font-style: normal;
font-weight: 500;
line-height: 24px;
letter-spacing: -0.44px;
}
.txt-section-header {
font-family: Metropolis;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 28px;
}
.txt-home {
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.txt-button-label-regular {
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px;
}
.txt-label {
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.txt-link {
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 21px;
text-decoration-line: underline;
text-underline-offset: 3px;
}
.txt-value {
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.txt-body {
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.txt-code {
font-family: "JetBrains Mono";
font-size: 14px !important;
font-style: normal;
font-weight: 400 !important;
line-height: 150%;
}
.txt-counter {
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 150%;
}
.txt-button-label-xs {
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 16px;
letter-spacing: -0.12px;
text-transform: uppercase;
}
.txt-assistive {
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.txt-assistive-code, code {
font-family: "JetBrains Mono" !important;
color: var(--color-elements-readable);
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
input[type=checkbox] {
display: none;
}
.slide-toggle {
display: block;
position: relative;
flex: none;
width: 40px;
height: 24.2px;
border-radius: 30px;
background-color: #CCCED3;
cursor: pointer;
transition: all 0.1s ease-in-out;
z-index: 1;
}
.slide-toggle::before,
.slide-toggle::after {
content: ' ';
display: block;
position: absolute;
top: 2px;
border-radius: 30px;
height: 20px;
width: 20px;
background-color: var(--color-border-default);
transform: translate3d(0, 0, 0);
transition: 0.2s cubic-bezier(0, 1.1, 1, 1.1);
}
.slide-toggle::before {
z-index: -1;
width: 34px;
right: 2px;
transform: scale(1);
}
.slide-toggle::after {
z-index: 1;
width: 20px;
left: 2px;
background-color: var(--color-elements-readable-inv);
}
input:checked + .slide-toggle {
background-color: var(--color-cta);
}
input:checked:disabled + .slide-toggle {
background-color: var(--color-elements-assistive);
}
input:checked + .slide-toggle::before {
transform: scale(0);
}
input:checked + .slide-toggle::after {
transform: translate3d(16px, 0, 0);
}
input + .slide-toggle .lock-icon {
display: none;
}
input:disabled + .slide-toggle .lock-icon {
display: block;
position: absolute;
right: 5.5px;
top: 6px;
}
input:checked:disabled + .slide-toggle .lock-icon {
display: block;
position: absolute;
left: 5.5px;
top: 6px;
color: var(--color-elements-readable-inv);
}
dialog::backdrop {
background-color: rgb(107 114 128);
opacity: 0.75;
animation: modal-opacity 0.25s ease-out;
}
dialog:open {
animation: modal-open-scale 0.25s ease-out;
}
.skeleton {
color: transparent !important;
border-radius: 5px;
background: rgba(130, 130, 130, 0.2);
background: -webkit-gradient(linear, left top, right top, color-stop(8%, rgba(130, 130, 130, 0.2)), color-stop(18%, rgba(130, 130, 130, 0.3)), color-stop(33%, rgba(130, 130, 130, 0.2)));
background: linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%);
background-size: 800px 100px;
animation: wave-squares 2s infinite ease-out;
}
@keyframes wave-squares {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
-webkit-background-clip: inherit;
-webkit-text-fill-color: inherit;
transition: background-color 5000s ease-in-out 0s;
box-shadow: inset 0 0 20px 20px inherit;
}
}