-
-
Notifications
You must be signed in to change notification settings - Fork 1.8k
/
shui.css
316 lines (271 loc) · 19.4 KB
/
shui.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
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
.shui__button {
@apply font-medium relative flex items-center justify-center gap-1;
border-radius: 0.25rem;
/* box-shadow: inset 0 2px 0 0px rgba(255, 255, 255, 0.2), */
/* inset 0 -2px 0 0px rgba(0, 0, 0, 0.1); */
/* background-image: linear-gradient(white, white), */
/* linear-gradient(to bottom, green, gold); */
/* background-origin: border-box; */
/* background-clip: content-box, border-box; */
}
.shui__button-size-sm {
@apply text-xs py-1 px-2;
}
.shui__button-size-md {
@apply text-sm py-1 px-3;
}
.shui__button-tiled {
padding: 0 !important;
gap: 0 !important;
}
.shui__button-tiled .shui__button__tile {
@apply flex items-center justify-center text-center;
}
.shui__button-tiled.shui__button-size-md .shui__button__tile {
@apply h-6 w-6;
}
.shui__button-tiled.shui__button-size-sm .shui__button__tile {
@apply h-4 w-4;
}
.shui__button__tile-separator {
@apply w-px h-full bg-gray-08-alpha;
}
.shui__button-theme-text {
background: none;
box-shadow: none;
}
.shui__button-theme-gray {
background: or(--lx-gray-06, --ls-quaternary-background);
}
.shui__button-theme-gray:hover {
background: or(--lx-gray-05, --ls-quaternary-background);
}
.shui__button-theme-gray:active {
background: or(--lx-gray-04, --ls-quaternary-background);
}
.dark .shui__button-theme,
.dark .shui__button-theme-color {
background: or(--lx-accent-09, --rx-blue-09);
}
.dark .shui__button-theme:hover,
.dark .shui__button-theme-color:hover {
background: or(--lx-accent-10, --rx-blue-10);
}
.dark .shui__button-theme:active,
.dark .shui__button-theme-color:active {
background: or(--lx-accent-08, --rx-blue-08);
}
.dark .shui__button-theme-gray {
background: or(--lx-gray-05, --ls-quaternary-background);
}
.dark .shui__button-theme-gray:hover {
background: or(--lx-gray-06, --ls-quaternary-background);
}
.dark .shui__button-theme-gray:active {
background: or(--lx-gray-04, --ls-quaternary-background);
}
.shui__button-theme-gradient {
--depth-shadow-from: rgba(2, 23, 53, 0.70);
--depth-shadow-to: rgba(2, 23, 53, 0.00);
}
.shui__button-theme-gradient:hover {
--depth-shadow-from: rgba(2, 23, 53, 0.30);
--depth-shadow-to: rgba(2, 23, 53, 0.00);
}
.shui__button-theme-gradient:active {
--depth-shadow-from: rgba(0, 0, 0, 0);
--depth-shadow-to: rgba(0, 0, 0, 0);
}
.shui__button-theme-gradient.shui__button-,
.shui__button-theme-gradient.shui__button-custom,
.shui__button-theme-gradient.shui__button-indigo,
.shui__button-theme-gradient.shui__button-blue,
.shui__button-theme-gradient.shui__button-sky,
.shui__button-theme-gradient.shui__button-cyan {
background: linear-gradient(37deg, var(--depth-shadow-from) 0%, var(--depth-shadow-to) 100%),
linear-gradient(135deg, var(--rx-indigo-09) 0%, var(--rx-blue-09) 33.85%, var(--rx-sky-09) 64.06%, var(--rx-cyan-09) 100%);
}
.shui__button-theme-gradient.shui__button-tomato,
.shui__button-theme-gradient.shui__button-red,
.shui__button-theme-gradient.shui__button-crimson,
.shui__button-theme-gradient.shui__button-pink,
.shui__button-theme-gradient.shui__button-plum,
.shui__button-theme-gradient.shui__button-purple,
.shui__button-theme-gradient.shui__button-violet {
background: linear-gradient(37deg, var(--depth-shadow-from) 0%, var(--depth-shadow-to) 100%),
linear-gradient(135deg, var(--rx-tomato-09) 0%, var(--rx-red-09) 16.66%, var(--rx-crimson-09) 33.33%, var(--rx-pink-09) 50%, var(--rx-plum-09) 66.66%, var(--rx-purple-09) 83.33%, var(--rx-violet-09) 100%);
}
.shui__button-theme-gradient.shui__button-green,
.shui__button-theme-gradient.shui__button-mint,
.shui__button-theme-gradient.shui__button-teal {
background: linear-gradient(37deg, var(--depth-shadow-from) 0%, var(--depth-shadow-to) 100%),
linear-gradient(135deg, var(--rx-teal-09) 0%, var(--rx-mint-09) 50%, var(--rx-green-09) 100%);
}
.shui__button-theme-gradient.shui__button-grass,
.shui__button-theme-gradient.shui__button-lime {
background: linear-gradient(37deg, var(--depth-shadow-from) 0%, var(--depth-shadow-to) 100%),
linear-gradient(135deg, var(--rx-grass-09) 0%, var(--rx-lime-09) 100%);
}
.shui__button-theme-gradient.shui__button-yellow,
.shui__button-theme-gradient.shui__button-amber,
.shui__button-theme-gradient.shui__button-orange,
.shui__button-theme-gradient.shui__button-brown {
background: linear-gradient(37deg, var(--depth-shadow-from) 0%, var(--depth-shadow-to) 100%),
linear-gradient(135deg, var(--rx-yellow-09) 0%, var(--rx-amber-09) 33.33%, var(--rx-orange-09) 66.66%, var(--rx-brown-09) 100%);
}
/* .shui__button-theme-gradient:hover { */
/* background: linear-gradient(37deg, rgba(2, 23, 53, 0.30) 0%, rgba(2, 23, 53, 0.00) 100%), linear-gradient(135deg, #8AE8FF 0%, #5373E7 33.85%, #369EFF 64.06%, #00B1CC 100%); */
/* } */
/* Shadow/xs */
/* box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); */
/* } */
.shui__button-depth-1 {
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
inset 0 -1px 0 0 rgba(0, 0, 0, 0.15);
}
.shui__button-depth-1:hover {
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
inset 0 -2px 0 0 rgba(0, 0, 0, 0.15);
}
.shui__button-depth-2 {
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 0 0 rgba(0, 0, 0, 0.2);
}
/* .shui__button-depth-1:before { */
/* @apply absolute inset-0; */
/* border-radius: 0.25rem; */
/* content: ""; */
/* padding: 1px; */
/* background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent); */
/* -webkit-mask: linear-gradient(#fff 0 0) content-box, */
/* linear-gradient(#fff 0 0); */
/* -webkit-mask-composite: xor; */
/* mask-composite: exclude; */
/* } */
/* .shui__button-depth-1:after { */
/* @apply absolute inset-0; */
/* border-radius: 0.25rem; */
/* content: ""; */
/* padding: 1px; */
/* background: linear-gradient(to top, rgba(0,0,0,0.2), transparent); */
/* -webkit-mask: linear-gradient(#fff 0 0) content-box, */
/* linear-gradient(#fff 0 0); */
/* -webkit-mask-composite: xor; */
/* mask-composite: exclude; */
/* } */
/* .shui__button-depth-2:before { */
/* @apply absolute inset-0; */
/* border-radius: 0.25rem; */
/* content: ""; */
/* padding: 1px; */
/* background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent); */
/* -webkit-mask: linear-gradient(#fff 0 0) content-box, */
/* linear-gradient(#fff 0 0); */
/* -webkit-mask-composite: xor; */
/* mask-composite: exclude; */
/* } */
/* .shui__button-depth-2:after { */
/* @apply absolute inset-0; */
/* border-radius: 0.25rem; */
/* content: ""; */
/* padding: 1px; */
/* background: linear-gradient(to top, rgba(0,0,0,0.4), transparent); */
/* -webkit-mask: linear-gradient(#fff 0 0) content-box, */
/* linear-gradient(#fff 0 0); */
/* -webkit-mask-composite: xor; */
/* mask-composite: exclude; */
/* } */
.shui__button-shortcut-key:first-of-type {
@apply ml-2;
}
.shui__button-shortcut-key {
@apply text-xs font-normal h-5 w-5 flex items-center justify-center rounded bg-gray-06-alpha;
}
.shui__cmdk-quick-capture-glow::before {
@apply absolute inset-0;
pointer-events: none;
border-radius: 0.25rem;
content: "";
padding: 1px;
background: linear-gradient(to bottom, var(--lx-accent-10), transparent);
-webkit-mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.shui__button-muted {
transition: opacity 200 ease-in;
opacity: 0.4;
}
.shui__button-muted:hover {
opacity: 1;
}
.shui__button-theme-gray.shui__button-color-custom { background-color: var(--ls-tertiary-background-color);
color: var(--ls-secondary-text-color, white); }
.shui__button-theme-color.shui__button-color-custom { background-color: hsl(var(--ls-button-background-hsl) / 0.9);
color: white; }
.shui__button-color-custom:hover, .dark .shui__button-color-custom:hover {
background: var(--ls-button-background);
}
.shui__button-theme-color.shui__button-color-lime { color: white; background-color: var(--rx-lime-09); &:hover { background-color: var(--rx-lime-10); } &:active { background-color: var(--rx-lime-08); }}
.shui__button-theme-color.shui__button-color-orange { color: white; background-color: var(--rx-orange-09); &:hover { background-color: var(--rx-orange-10); } &:active { background-color: var(--rx-orange-08); }}
.shui__button-theme-color.shui__button-color-gray { color: white; background-color: var(--rx-gray-09); &:hover { background-color: var(--rx-gray-10); } &:active { background-color: var(--rx-gray-08); }}
.shui__button-theme-color.shui__button-color-sand { color: white; background-color: var(--rx-sand-09); &:hover { background-color: var(--rx-sand-10); } &:active { background-color: var(--rx-sand-08); }}
.shui__button-theme-color.shui__button-color-crimson { color: white; background-color: var(--rx-crimson-09); &:hover { background-color: var(--rx-crimson-10); } &:active { background-color: var(--rx-crimson-08); }}
.shui__button-theme-color.shui__button-color-yellow { color: white; background-color: var(--rx-yellow-09); &:hover { background-color: var(--rx-yellow-10); } &:active { background-color: var(--rx-yellow-08); }}
.shui__button-theme-color.shui__button-color-green { color: white; background-color: var(--rx-green-09); &:hover { background-color: var(--rx-green-10); } &:active { background-color: var(--rx-green-08); }}
.shui__button-theme-color.shui__button-color-indigo { color: white; background-color: var(--rx-indigo-09); &:hover { background-color: var(--rx-indigo-10); } &:active { background-color: var(--rx-indigo-08); }}
.shui__button-theme-color.shui__button-color-cyan { color: white; background-color: var(--rx-cyan-09); &:hover { background-color: var(--rx-cyan-10); } &:active { background-color: var(--rx-cyan-08); }}
.shui__button-theme-color.shui__button-color-violet { color: white; background-color: var(--rx-violet-09); &:hover { background-color: var(--rx-violet-10); } &:active { background-color: var(--rx-violet-08); }}
.shui__button-theme-color.shui__button-color-bronze { color: white; background-color: var(--rx-bronze-09); &:hover { background-color: var(--rx-bronze-10); } &:active { background-color: var(--rx-bronze-08); }}
.shui__button-theme-color.shui__button-color-slate { color: white; background-color: var(--rx-slate-09); &:hover { background-color: var(--rx-slate-10); } &:active { background-color: var(--rx-slate-08); }}
.shui__button-theme-color.shui__button-color-gold { color: white; background-color: var(--rx-gold-09); &:hover { background-color: var(--rx-gold-10); } &:active { background-color: var(--rx-gold-08); }}
.shui__button-theme-color.shui__button-color-sage { color: white; background-color: var(--rx-sage-09); &:hover { background-color: var(--rx-sage-10); } &:active { background-color: var(--rx-sage-08); }}
.shui__button-theme-color.shui__button-color-mauve { color: white; background-color: var(--rx-mauve-09); &:hover { background-color: var(--rx-mauve-10); } &:active { background-color: var(--rx-mauve-08); }}
.shui__button-theme-color.shui__button-color-mint { color: white; background-color: var(--rx-mint-09); &:hover { background-color: var(--rx-mint-10); } &:active { background-color: var(--rx-mint-08); }}
.shui__button-theme-color.shui__button-color-red { color: white; background-color: var(--rx-red-09); &:hover { background-color: var(--rx-red-10); } &:active { background-color: var(--rx-red-08); }}
.shui__button-theme-color.shui__button-color-blue { color: white; background-color: var(--rx-blue-09); &:hover { background-color: var(--rx-blue-10); } &:active { background-color: var(--rx-blue-08); }}
.shui__button-theme-color.shui__button-color-grass { color: white; background-color: var(--rx-grass-09); &:hover { background-color: var(--rx-grass-10); } &:active { background-color: var(--rx-grass-08); }}
.shui__button-theme-color.shui__button-color-plum { color: white; background-color: var(--rx-plum-09); &:hover { background-color: var(--rx-plum-10); } &:active { background-color: var(--rx-plum-08); }}
.shui__button-theme-color.shui__button-color-pink { color: white; background-color: var(--rx-pink-09); &:hover { background-color: var(--rx-pink-10); } &:active { background-color: var(--rx-pink-08); }}
.shui__button-theme-color.shui__button-color-teal { color: white; background-color: var(--rx-teal-09); &:hover { background-color: var(--rx-teal-10); } &:active { background-color: var(--rx-teal-08); }}
.shui__button-theme-color.shui__button-color-amber { color: white; background-color: var(--rx-amber-09); &:hover { background-color: var(--rx-amber-10); } &:active { background-color: var(--rx-amber-08); }}
.shui__button-theme-color.shui__button-color-purple { color: white; background-color: var(--rx-purple-09); &:hover { background-color: var(--rx-purple-10); } &:active { background-color: var(--rx-purple-08); }}
.shui__button-theme-color.shui__button-color-brown { color: white; background-color: var(--rx-brown-09); &:hover { background-color: var(--rx-brown-10); } &:active { background-color: var(--rx-brown-08); }}
.shui__button-theme-color.shui__button-color-sky { color: white; background-color: var(--rx-sky-09); &:hover { background-color: var(--rx-sky-10); } &:active { background-color: var(--rx-sky-08); }}
.shui__button-theme-color.shui__button-color-olive { color: white; background-color: var(--rx-olive-09); &:hover { background-color: var(--rx-olive-10); } &:active { background-color: var(--rx-olive-08); }}
.shui__button-theme-color.shui__button-color-tomato { color: white; background-color: var(--rx-tomato-09); &:hover { background-color: var(--rx-tomato-10); } &:active { background-color: var(--rx-tomato-08); }}
.dark .shui__button-theme-color.shui__button-color-lime { background-color: var(--rx-lime-09); &:hover { background-color: var(--rx-lime-08); } &:active { background-color: var(--rx-lime-07); }}
.dark .shui__button-theme-color.shui__button-color-orange { background-color: var(--rx-orange-09); &:hover { background-color: var(--rx-orange-08); } &:active { background-color: var(--rx-orange-07); }}
.dark .shui__button-theme-color.shui__button-color-gray { background-color: var(--rx-gray-09); &:hover { background-color: var(--rx-gray-08); } &:active { background-color: var(--rx-gray-07); }}
.dark .shui__button-theme-color.shui__button-color-sand { background-color: var(--rx-sand-09); &:hover { background-color: var(--rx-sand-08); } &:active { background-color: var(--rx-sand-07); }}
.dark .shui__button-theme-color.shui__button-color-crimson { background-color: var(--rx-crimson-09); &:hover { background-color: var(--rx-crimson-08); } &:active { background-color: var(--rx-crimson-07); }}
.dark .shui__button-theme-color.shui__button-color-yellow { background-color: var(--rx-yellow-09); &:hover { background-color: var(--rx-yellow-08); } &:active { background-color: var(--rx-yellow-07); }}
.dark .shui__button-theme-color.shui__button-color-green { background-color: var(--rx-green-09); &:hover { background-color: var(--rx-green-08); } &:active { background-color: var(--rx-green-07); }}
.dark .shui__button-theme-color.shui__button-color-indigo { background-color: var(--rx-indigo-09); &:hover { background-color: var(--rx-indigo-08); } &:active { background-color: var(--rx-indigo-07); }}
.dark .shui__button-theme-color.shui__button-color-cyan { background-color: var(--rx-cyan-09); &:hover { background-color: var(--rx-cyan-08); } &:active { background-color: var(--rx-cyan-07); }}
.dark .shui__button-theme-color.shui__button-color-violet { background-color: var(--rx-violet-09); &:hover { background-color: var(--rx-violet-08); } &:active { background-color: var(--rx-violet-07); }}
.dark .shui__button-theme-color.shui__button-color-bronze { background-color: var(--rx-bronze-09); &:hover { background-color: var(--rx-bronze-08); } &:active { background-color: var(--rx-bronze-07); }}
.dark .shui__button-theme-color.shui__button-color-slate { background-color: var(--rx-slate-09); &:hover { background-color: var(--rx-slate-08); } &:active { background-color: var(--rx-slate-07); }}
.dark .shui__button-theme-color.shui__button-color-gold { background-color: var(--rx-gold-09); &:hover { background-color: var(--rx-gold-08); } &:active { background-color: var(--rx-gold-07); }}
.dark .shui__button-theme-color.shui__button-color-sage { background-color: var(--rx-sage-09); &:hover { background-color: var(--rx-sage-08); } &:active { background-color: var(--rx-sage-07); }}
.dark .shui__button-theme-color.shui__button-color-mauve { background-color: var(--rx-mauve-09); &:hover { background-color: var(--rx-mauve-08); } &:active { background-color: var(--rx-mauve-07); }}
.dark .shui__button-theme-color.shui__button-color-mint { background-color: var(--rx-mint-09); &:hover { background-color: var(--rx-mint-08); } &:active { background-color: var(--rx-mint-07); }}
.dark .shui__button-theme-color.shui__button-color-red { background-color: var(--rx-red-09); &:hover { background-color: var(--rx-red-08); } &:active { background-color: var(--rx-red-07); }}
.dark .shui__button-theme-color.shui__button-color-blue { background-color: var(--rx-blue-09); &:hover { background-color: var(--rx-blue-08); } &:active { background-color: var(--rx-blue-07); }}
.dark .shui__button-theme-color.shui__button-color-grass { background-color: var(--rx-grass-09); &:hover { background-color: var(--rx-grass-08); } &:active { background-color: var(--rx-grass-07); }}
.dark .shui__button-theme-color.shui__button-color-plum { background-color: var(--rx-plum-09); &:hover { background-color: var(--rx-plum-08); } &:active { background-color: var(--rx-plum-07); }}
.dark .shui__button-theme-color.shui__button-color-pink { background-color: var(--rx-pink-09); &:hover { background-color: var(--rx-pink-08); } &:active { background-color: var(--rx-pink-07); }}
.dark .shui__button-theme-color.shui__button-color-teal { background-color: var(--rx-teal-09); &:hover { background-color: var(--rx-teal-08); } &:active { background-color: var(--rx-teal-07); }}
.dark .shui__button-theme-color.shui__button-color-amber { background-color: var(--rx-amber-09); &:hover { background-color: var(--rx-amber-08); } &:active { background-color: var(--rx-amber-07); }}
.dark .shui__button-theme-color.shui__button-color-purple { background-color: var(--rx-purple-09); &:hover { background-color: var(--rx-purple-08); } &:active { background-color: var(--rx-purple-07); }}
.dark .shui__button-theme-color.shui__button-color-brown { background-color: var(--rx-brown-09); &:hover { background-color: var(--rx-brown-08); } &:active { background-color: var(--rx-brown-07); }}
.dark .shui__button-theme-color.shui__button-color-sky { background-color: var(--rx-sky-09); &:hover { background-color: var(--rx-sky-08); } &:active { background-color: var(--rx-sky-07); }}
.dark .shui__button-theme-color.shui__button-color-olive { background-color: var(--rx-olive-09); &:hover { background-color: var(--rx-olive-08); } &:active { background-color: var(--rx-olive-07); }}
.dark .shui__button-theme-color.shui__button-color-tomato { background-color: var(--rx-tomato-09); &:hover { background-color: var(--rx-tomato-08); } &:active { background-color: var(--rx-tomato-07); }}
.shui__list-item-highlighted-span {
background-color: or(--lx-accent-06, --color-level-4);
}
.dark .shui__list-item-highlighted-span {
background-color: or(--lx-accent-08-alpha, --color-level-4);
}