@spiritov/ds.css 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +4 -1
- package/.vscode/settings.json +0 -5
- package/CNAME +0 -1
- package/src/assets/fonts/nitrods-font.ttf +0 -0
- package/src/assets/svg/alert_border.svg +0 -1
- package/src/assets/svg/bottom_bar_bottom.svg +0 -1
- package/src/assets/svg/bottom_bar_top.svg +0 -1
- package/src/assets/svg/button.svg +0 -1
- package/src/assets/svg/button_active.svg +0 -1
- package/src/assets/svg/button_lg.svg +0 -1
- package/src/assets/svg/button_lg_active.svg +0 -1
- package/src/assets/svg/button_radio.svg +0 -1
- package/src/assets/svg/button_square.svg +0 -1
- package/src/assets/svg/button_square_active.svg +0 -1
- package/src/assets/svg/details.svg +0 -1
- package/src/assets/svg/details_head.svg +0 -1
- package/src/assets/svg/details_output.svg +0 -1
- package/src/assets/svg/favicon.svg +0 -1
- package/src/assets/svg/grid_lg.svg +0 -1
- package/src/assets/svg/info.svg +0 -1
- package/src/assets/svg/info_border.svg +0 -1
- package/src/assets/svg/info_square.svg +0 -1
- package/src/assets/svg/input.svg +0 -1
- package/src/assets/svg/input_after.svg +0 -1
- package/src/assets/svg/input_before.svg +0 -1
- package/src/assets/svg/pictochat_border.svg +0 -1
- package/src/assets/svg/pictochat_message_border.svg +0 -1
- package/src/assets/svg/pictochat_status.svg +0 -1
- package/src/assets/svg/top_bar.svg +0 -1
- package/src/ds.css +0 -723
- package/src/ds.html +0 -133
- package/src/input_tw_old.css +0 -586
- package/src/landing.html +0 -346
- package/src/output.css +0 -812
- package/src/test.html +0 -67
package/src/ds.html
DELETED
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
-
<link href="./output.css" rel="stylesheet" />
|
|
7
|
-
</head>
|
|
8
|
-
|
|
9
|
-
<body>
|
|
10
|
-
<!-- Buttons -->
|
|
11
|
-
<div class="p-4 flex flex-col gap-4">
|
|
12
|
-
<span class="text-2xl bg-ds-text-focus text-black">Buttons</span>
|
|
13
|
-
|
|
14
|
-
<button>Select</button>
|
|
15
|
-
|
|
16
|
-
<button class="button-lg">Longer Select</button>
|
|
17
|
-
|
|
18
|
-
<button class="button-lg ds-blue">Longer Select</button>
|
|
19
|
-
|
|
20
|
-
<button class="button-lg bg-ds-theme-blue">Longer Select</button>
|
|
21
|
-
|
|
22
|
-
<button class="button-square">X</button>
|
|
23
|
-
</div>
|
|
24
|
-
|
|
25
|
-
<!-- Input -->
|
|
26
|
-
<div class="p-4 flex flex-col gap-4">
|
|
27
|
-
<span class="text-2xl bg-ds-text-focus text-black">Input</span>
|
|
28
|
-
|
|
29
|
-
<label>
|
|
30
|
-
<span>label</span>
|
|
31
|
-
<div class="input-wrapper">
|
|
32
|
-
<div class="input-before"></div>
|
|
33
|
-
<input class="input-lg" type="text" />
|
|
34
|
-
</div>
|
|
35
|
-
</label>
|
|
36
|
-
|
|
37
|
-
<label>
|
|
38
|
-
<span>label</span>
|
|
39
|
-
<div class="input-wrapper">
|
|
40
|
-
<div class="input-before"></div>
|
|
41
|
-
<input type="text" />
|
|
42
|
-
<div class="input-after"></div>
|
|
43
|
-
</div>
|
|
44
|
-
</label>
|
|
45
|
-
|
|
46
|
-
<fieldset class="grid grid-cols-2 w-fit gap-8">
|
|
47
|
-
<legend>Select an option</legend>
|
|
48
|
-
<div class="radio-button">
|
|
49
|
-
<input id="radio1" type="radio" name="option" class="bg-ds-theme-fuschia" />
|
|
50
|
-
<label for="radio1">Option 1</label>
|
|
51
|
-
</div>
|
|
52
|
-
<div class="radio-button">
|
|
53
|
-
<input id="radio2" type="radio" name="option" class="bg-ds-theme-fuschia" />
|
|
54
|
-
<label for="radio2">Option 2</label>
|
|
55
|
-
</div>
|
|
56
|
-
<div class="radio-button">
|
|
57
|
-
<input id="radio3" type="radio" name="option" class="bg-ds-theme-fuschia" />
|
|
58
|
-
<label for="radio3">Option 3</label>
|
|
59
|
-
</div>
|
|
60
|
-
<div class="radio-button">
|
|
61
|
-
<input id="radio4" type="radio" name="option" class="bg-ds-theme-fuschia" />
|
|
62
|
-
<label for="radio4">Option 4</label>
|
|
63
|
-
</div>
|
|
64
|
-
<div class="radio-button">
|
|
65
|
-
<input id="radio5" type="radio" name="option" class="bg-ds-theme-fuschia" />
|
|
66
|
-
<label for="radio5">Option 5</label>
|
|
67
|
-
</div>
|
|
68
|
-
<div class="radio-button">
|
|
69
|
-
<input id="radio6" type="radio" name="option" class="bg-ds-theme-fuschia" />
|
|
70
|
-
<label for="radio6">Option 6</label>
|
|
71
|
-
</div>
|
|
72
|
-
</fieldset>
|
|
73
|
-
</div>
|
|
74
|
-
|
|
75
|
-
<!-- Grids -->
|
|
76
|
-
<div class="p-4 flex flex-col gap-4">
|
|
77
|
-
<span class="text-2xl bg-ds-text-focus text-black">Grids</span>
|
|
78
|
-
<div class="ds-grid w-96 h-48"></div>
|
|
79
|
-
<div class="ds-grid-lg w-96 h-48"></div>
|
|
80
|
-
</div>
|
|
81
|
-
|
|
82
|
-
<!-- Misc -->
|
|
83
|
-
<div class="p-4 flex flex-col gap-4">
|
|
84
|
-
<span class="text-2xl bg-ds-text-focus text-black">Misc</span>
|
|
85
|
-
<div class="alert">
|
|
86
|
-
<div class="loading-container">
|
|
87
|
-
<div class="loading-1"></div>
|
|
88
|
-
<div class="loading-2"></div>
|
|
89
|
-
<div class="loading-3"></div>
|
|
90
|
-
<div class="loading-4"></div>
|
|
91
|
-
<div class="loading-5"></div>
|
|
92
|
-
<div class="loading-6"></div>
|
|
93
|
-
<div class="loading-7"></div>
|
|
94
|
-
<div class="loading-8"></div>
|
|
95
|
-
<div class="loading-9"></div>
|
|
96
|
-
</div>
|
|
97
|
-
<span>Looking for software available for download...</span>
|
|
98
|
-
<div class="loading-container">
|
|
99
|
-
<div class="loading-1"></div>
|
|
100
|
-
<div class="loading-2"></div>
|
|
101
|
-
<div class="loading-3"></div>
|
|
102
|
-
<div class="loading-4"></div>
|
|
103
|
-
<div class="loading-5"></div>
|
|
104
|
-
<div class="loading-6"></div>
|
|
105
|
-
<div class="loading-7"></div>
|
|
106
|
-
<div class="loading-8"></div>
|
|
107
|
-
<div class="loading-9"></div>
|
|
108
|
-
</div>
|
|
109
|
-
</div>
|
|
110
|
-
|
|
111
|
-
<div class="info">
|
|
112
|
-
<div class="info-square">image</div>
|
|
113
|
-
<div class="info-container">
|
|
114
|
-
<div class="info-label">Settings</div>
|
|
115
|
-
<div class="info-text">
|
|
116
|
-
Change system settings here. Select the setting you'd like to change.
|
|
117
|
-
</div>
|
|
118
|
-
</div>
|
|
119
|
-
</div>
|
|
120
|
-
|
|
121
|
-
<div class="bar bg-ds-theme-slate"></div>
|
|
122
|
-
|
|
123
|
-
<div class="bar-lg bg-ds-theme-slate"></div>
|
|
124
|
-
|
|
125
|
-
<div class="bar-lg-reverse bg-ds-theme-slate"></div>
|
|
126
|
-
|
|
127
|
-
<div class="pictochat-window w-96 h-48">
|
|
128
|
-
<div class="pictochat-message w-82 h-10">Now entering..</div>
|
|
129
|
-
<div class="pictochat-status w-82 h-10">Now leaving..</div>
|
|
130
|
-
</div>
|
|
131
|
-
</div>
|
|
132
|
-
</body>
|
|
133
|
-
</html>
|
package/src/input_tw_old.css
DELETED
|
@@ -1,586 +0,0 @@
|
|
|
1
|
-
@import 'tailwindcss';
|
|
2
|
-
|
|
3
|
-
@font-face {
|
|
4
|
-
font-family: 'ds-system';
|
|
5
|
-
src: url('./assets/fonts/nitrods-font.ttf') format('truetype');
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
@theme {
|
|
9
|
-
/* font */
|
|
10
|
-
--font-system: 'ds-system', 'system-ui';
|
|
11
|
-
|
|
12
|
-
/* colors */
|
|
13
|
-
--color-ds-darkgrey: #494949;
|
|
14
|
-
--color-ds-info-bg: #282828;
|
|
15
|
-
|
|
16
|
-
--color-ds-pictochat-bg: #aaaaaa;
|
|
17
|
-
--color-ds-pictochat-border: #bababa;
|
|
18
|
-
|
|
19
|
-
--color-ds-grid-border: #c3c3c3;
|
|
20
|
-
--color-ds-grid-bg: #e3e3e3;
|
|
21
|
-
|
|
22
|
-
--color-ds-text-focus: #e36100;
|
|
23
|
-
|
|
24
|
-
--color-ds-loading: #fbd300;
|
|
25
|
-
|
|
26
|
-
--color-ds-theme-slate: #61829a;
|
|
27
|
-
--color-ds-theme-maroon: #ba4900;
|
|
28
|
-
--color-ds-theme-red: #fb0018;
|
|
29
|
-
--color-ds-theme-pink: #fb8afb;
|
|
30
|
-
--color-ds-theme-orange: #fb9200;
|
|
31
|
-
--color-ds-theme-yellow: #f3e300;
|
|
32
|
-
--color-ds-theme-neonyellow: #aafb00;
|
|
33
|
-
--color-ds-theme-lime: #00fb00;
|
|
34
|
-
--color-ds-theme-green: #00a238;
|
|
35
|
-
--color-ds-theme-teal: #49db8a;
|
|
36
|
-
--color-ds-theme-turquoise: #30baf3;
|
|
37
|
-
--color-ds-theme-blue: #0059f3;
|
|
38
|
-
--color-ds-theme-navy: #000092;
|
|
39
|
-
--color-ds-theme-darkpurple: #8a00d3;
|
|
40
|
-
--color-ds-theme-magenta: #d300eb;
|
|
41
|
-
--color-ds-theme-fuschia: #fb0092;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
@keyframes loading-1 {
|
|
45
|
-
12.5%,
|
|
46
|
-
37.5% {
|
|
47
|
-
opacity: 1;
|
|
48
|
-
}
|
|
49
|
-
37.51%,
|
|
50
|
-
75% {
|
|
51
|
-
opacity: 0;
|
|
52
|
-
}
|
|
53
|
-
75.01%,
|
|
54
|
-
100% {
|
|
55
|
-
opacity: 1;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
@keyframes loading-2 {
|
|
60
|
-
0%,
|
|
61
|
-
50% {
|
|
62
|
-
opacity: 1;
|
|
63
|
-
}
|
|
64
|
-
50.01%,
|
|
65
|
-
87.5% {
|
|
66
|
-
opacity: 0;
|
|
67
|
-
}
|
|
68
|
-
87.51%,
|
|
69
|
-
100% {
|
|
70
|
-
opacity: 1;
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
@keyframes loading-3 {
|
|
75
|
-
0%,
|
|
76
|
-
62.5% {
|
|
77
|
-
opacity: 1;
|
|
78
|
-
}
|
|
79
|
-
62.51%,
|
|
80
|
-
100% {
|
|
81
|
-
opacity: 0;
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
@keyframes loading-6 {
|
|
86
|
-
0%,
|
|
87
|
-
12.5% {
|
|
88
|
-
opacity: 0;
|
|
89
|
-
}
|
|
90
|
-
12.51%,
|
|
91
|
-
75% {
|
|
92
|
-
opacity: 1;
|
|
93
|
-
}
|
|
94
|
-
75.01%,
|
|
95
|
-
100% {
|
|
96
|
-
opacity: 0;
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
@keyframes loading-9 {
|
|
101
|
-
0%,
|
|
102
|
-
25% {
|
|
103
|
-
opacity: 0;
|
|
104
|
-
}
|
|
105
|
-
25.51%,
|
|
106
|
-
87.5% {
|
|
107
|
-
opacity: 1;
|
|
108
|
-
}
|
|
109
|
-
87.51%,
|
|
110
|
-
100% {
|
|
111
|
-
opacity: 0;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
@keyframes loading-8 {
|
|
116
|
-
0%,
|
|
117
|
-
37.5% {
|
|
118
|
-
opacity: 0;
|
|
119
|
-
}
|
|
120
|
-
37.51%,
|
|
121
|
-
100% {
|
|
122
|
-
opacity: 1;
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
@keyframes loading-7 {
|
|
127
|
-
0%,
|
|
128
|
-
12.5% {
|
|
129
|
-
opacity: 1;
|
|
130
|
-
}
|
|
131
|
-
12.51%,
|
|
132
|
-
50% {
|
|
133
|
-
opacity: 0;
|
|
134
|
-
}
|
|
135
|
-
50.01%,
|
|
136
|
-
100% {
|
|
137
|
-
opacity: 1;
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
@keyframes loading-4 {
|
|
142
|
-
0%,
|
|
143
|
-
25% {
|
|
144
|
-
opacity: 1;
|
|
145
|
-
}
|
|
146
|
-
25.01%,
|
|
147
|
-
62.5% {
|
|
148
|
-
opacity: 0;
|
|
149
|
-
}
|
|
150
|
-
62.51%,
|
|
151
|
-
100% {
|
|
152
|
-
opacity: 1;
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
.loading-container {
|
|
157
|
-
@apply grid grid-cols-3 gap-0.5 size-fit shrink-0;
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
.loading-container > div {
|
|
161
|
-
@apply size-1.5 bg-ds-loading;
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
.loading-1 {
|
|
165
|
-
animation: 533.33ms infinite loading-1;
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
.loading-2 {
|
|
169
|
-
animation: 533.33ms infinite loading-2;
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
.loading-3 {
|
|
173
|
-
animation: 533.33ms infinite loading-3;
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
.loading-4 {
|
|
177
|
-
animation: 533.33ms infinite loading-4;
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
.loading-6 {
|
|
181
|
-
animation: 533.33ms infinite loading-6;
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
.loading-7 {
|
|
185
|
-
animation: 533.33ms infinite loading-7;
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
.loading-8 {
|
|
189
|
-
animation: 533.33ms infinite loading-8;
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
.loading-9 {
|
|
193
|
-
animation: 533.33ms infinite loading-9;
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
.ds-slate {
|
|
197
|
-
background-color: var(--color-ds-theme-slate);
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
.ds-maroon {
|
|
201
|
-
background-color: var(--color-ds-theme-maroon);
|
|
202
|
-
}
|
|
203
|
-
.ds-red {
|
|
204
|
-
background-color: var(--color-ds-theme-red);
|
|
205
|
-
}
|
|
206
|
-
.ds-pink {
|
|
207
|
-
background-color: var(--color-ds-theme-pink);
|
|
208
|
-
}
|
|
209
|
-
.ds-orange {
|
|
210
|
-
background-color: var(--color-ds-theme-orange);
|
|
211
|
-
}
|
|
212
|
-
.ds-yellow {
|
|
213
|
-
background-color: var(--color-ds-theme-yellow);
|
|
214
|
-
}
|
|
215
|
-
.ds-neonyellow {
|
|
216
|
-
background-color: var(--color-ds-theme-neonyellow);
|
|
217
|
-
}
|
|
218
|
-
.ds-lime {
|
|
219
|
-
background-color: var(--color-ds-theme-lime);
|
|
220
|
-
}
|
|
221
|
-
.ds-green {
|
|
222
|
-
background-color: var(--color-ds-theme-green);
|
|
223
|
-
}
|
|
224
|
-
.ds-teal {
|
|
225
|
-
background-color: var(--color-ds-theme-teal);
|
|
226
|
-
}
|
|
227
|
-
.ds-turquoise {
|
|
228
|
-
background-color: var(--color-ds-theme-turquoise);
|
|
229
|
-
}
|
|
230
|
-
.ds-blue {
|
|
231
|
-
background-color: var(--color-ds-theme-blue);
|
|
232
|
-
}
|
|
233
|
-
.ds-navy {
|
|
234
|
-
background-color: var(--color-ds-theme-navy);
|
|
235
|
-
}
|
|
236
|
-
.ds-darkpurple {
|
|
237
|
-
background-color: var(--color-ds-theme-darkpurple);
|
|
238
|
-
}
|
|
239
|
-
.ds-magenta {
|
|
240
|
-
background-color: var(--color-ds-theme-magenta);
|
|
241
|
-
}
|
|
242
|
-
.ds-fuschia {
|
|
243
|
-
background-color: var(--color-ds-theme-fuschia);
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
/* @source inline(".ds-*") */
|
|
247
|
-
|
|
248
|
-
@layer base {
|
|
249
|
-
:root {
|
|
250
|
-
@apply font-system;
|
|
251
|
-
-webkit-font-smoothing: none;
|
|
252
|
-
}
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
button,
|
|
256
|
-
input[type='text'] {
|
|
257
|
-
@apply border-2 px-1 text-nowrap;
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
input[type='text'] {
|
|
261
|
-
@apply h-8.5 w-80.5 border-black text-white outline-none selection:bg-ds-text-focus;
|
|
262
|
-
background: url('./assets/svg/input.svg') -1px;
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
input[type='radio'] {
|
|
266
|
-
@apply appearance-none border-ds-darkgrey border-2 h-15.5 w-48;
|
|
267
|
-
background-image: url('./assets/svg/button_radio.svg');
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
input[type='radio']:checked {
|
|
271
|
-
@apply bg-blend-hard-light;
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
button {
|
|
275
|
-
@apply h-9 w-40 cursor-pointer border-ds-darkgrey px-0.5 bg-blend-hard-light;
|
|
276
|
-
background-image: url('./assets/svg/button.svg');
|
|
277
|
-
clip-path: polygon(
|
|
278
|
-
2px 100%,
|
|
279
|
-
2px calc(100% - 2px),
|
|
280
|
-
0 calc(100% - 2px),
|
|
281
|
-
0 2px,
|
|
282
|
-
2px 2px,
|
|
283
|
-
2px 0,
|
|
284
|
-
calc(100% - 2px) 0,
|
|
285
|
-
calc(100% - 2px) 2px,
|
|
286
|
-
100% 2px,
|
|
287
|
-
100% calc(100% - 2px),
|
|
288
|
-
calc(100% - 2px) calc(100% - 2px),
|
|
289
|
-
calc(100% - 2px) 100%
|
|
290
|
-
);
|
|
291
|
-
}
|
|
292
|
-
|
|
293
|
-
label {
|
|
294
|
-
@apply flex flex-col select-none;
|
|
295
|
-
}
|
|
296
|
-
|
|
297
|
-
button:active {
|
|
298
|
-
background-image: url('./assets/svg/button_active.svg');
|
|
299
|
-
}
|
|
300
|
-
|
|
301
|
-
details > summary {
|
|
302
|
-
@apply text-center w-111.5 h-8.5 border-2 pt-px;
|
|
303
|
-
background-image: url('./assets/svg/details_head.svg');
|
|
304
|
-
list-style: none;
|
|
305
|
-
}
|
|
306
|
-
|
|
307
|
-
details:open > p {
|
|
308
|
-
@apply px-0.5 h-23.5 w-111 border-x-2 border-b-2 text-center pt-px;
|
|
309
|
-
background-image: url('./assets/svg/details.svg');
|
|
310
|
-
}
|
|
311
|
-
|
|
312
|
-
label > span {
|
|
313
|
-
@apply h-7.5 pl-1 align-text-bottom;
|
|
314
|
-
}
|
|
315
|
-
|
|
316
|
-
legend {
|
|
317
|
-
@apply h-7.5 pl-1 align-text-bottom;
|
|
318
|
-
}
|
|
319
|
-
|
|
320
|
-
/* input[type='checkbox'] {
|
|
321
|
-
@apply grid size-9 cursor-pointer place-items-center border-ds-darkgrey;
|
|
322
|
-
background-image: url('./assets/svg/button.svg');
|
|
323
|
-
} */
|
|
324
|
-
|
|
325
|
-
.alert {
|
|
326
|
-
@apply h-33.5 w-103 content-center border-16 text-center text-white selection:bg-ds-text-focus px-5 flex items-center justify-center gap-5.5;
|
|
327
|
-
border-image: url('./assets/svg/alert_border.svg') 15;
|
|
328
|
-
background: repeating-linear-gradient(
|
|
329
|
-
black,
|
|
330
|
-
black 2px,
|
|
331
|
-
var(--color-ds-darkgrey) 2px,
|
|
332
|
-
var(--color-ds-darkgrey) 4px
|
|
333
|
-
);
|
|
334
|
-
background-size: 100% 4px;
|
|
335
|
-
clip-path: polygon(
|
|
336
|
-
/* bottom left */ 10px 100%,
|
|
337
|
-
10px calc(100% - 2px),
|
|
338
|
-
8px calc(100% - 2px),
|
|
339
|
-
8px calc(100% - 4px),
|
|
340
|
-
6px calc(100% - 4px),
|
|
341
|
-
6px calc(100% - 6px),
|
|
342
|
-
4px calc(100% - 6px),
|
|
343
|
-
4px calc(100% - 8px),
|
|
344
|
-
2px calc(100% - 8px),
|
|
345
|
-
2px calc(100% - 10px),
|
|
346
|
-
0 calc(100% - 10px),
|
|
347
|
-
/* top left */ 0 10px,
|
|
348
|
-
2px 10px,
|
|
349
|
-
2px 8px,
|
|
350
|
-
4px 8px,
|
|
351
|
-
4px 6px,
|
|
352
|
-
6px 6px,
|
|
353
|
-
6px 4px,
|
|
354
|
-
8px 4px,
|
|
355
|
-
8px 2px,
|
|
356
|
-
10px 2px,
|
|
357
|
-
10px 0,
|
|
358
|
-
/* top right */ calc(100% - 10px) 0,
|
|
359
|
-
calc(100% - 10px) 2px,
|
|
360
|
-
calc(100% - 8px) 2px,
|
|
361
|
-
calc(100% - 8px) 4px,
|
|
362
|
-
calc(100% - 6px) 4px,
|
|
363
|
-
calc(100% - 6px) 6px,
|
|
364
|
-
calc(100% - 4px) 6px,
|
|
365
|
-
calc(100% - 4px) 8px,
|
|
366
|
-
calc(100% - 2px) 8px,
|
|
367
|
-
calc(100% - 2px) 10px,
|
|
368
|
-
100% 10px,
|
|
369
|
-
/* bottom left */ 100% calc(100% - 10px),
|
|
370
|
-
calc(100% - 2px) calc(100% - 10px),
|
|
371
|
-
calc(100% - 2px) calc(100% - 8px),
|
|
372
|
-
calc(100% - 4px) calc(100% - 8px),
|
|
373
|
-
calc(100% - 4px) calc(100% - 6px),
|
|
374
|
-
calc(100% - 6px) calc(100% - 6px),
|
|
375
|
-
calc(100% - 6px) calc(100% - 4px),
|
|
376
|
-
calc(100% - 8px) calc(100% - 4px),
|
|
377
|
-
calc(100% - 8px) calc(100% - 2px),
|
|
378
|
-
calc(100% - 10px) calc(100% - 2px),
|
|
379
|
-
calc(100% - 10px) 100%
|
|
380
|
-
);
|
|
381
|
-
}
|
|
382
|
-
|
|
383
|
-
.bar {
|
|
384
|
-
@apply h-8 border-b-2 bg-blend-hard-light;
|
|
385
|
-
background-image: url('./assets/svg/top_bar.svg');
|
|
386
|
-
}
|
|
387
|
-
|
|
388
|
-
.bar-lg {
|
|
389
|
-
@apply h-11.5 border-b-2 bg-blend-hard-light;
|
|
390
|
-
background-image: url('./assets/svg/bottom_bar_top.svg');
|
|
391
|
-
}
|
|
392
|
-
|
|
393
|
-
.bar-lg-reverse {
|
|
394
|
-
@apply h-11.5 border-t-2 bg-blend-hard-light;
|
|
395
|
-
background-image: url('./assets/svg/bottom_bar_bottom.svg');
|
|
396
|
-
background-position-y: -2px;
|
|
397
|
-
}
|
|
398
|
-
|
|
399
|
-
.button-lg {
|
|
400
|
-
@apply w-55;
|
|
401
|
-
background-image: url('./assets/svg/button_lg.svg');
|
|
402
|
-
}
|
|
403
|
-
|
|
404
|
-
.button-square {
|
|
405
|
-
@apply size-9;
|
|
406
|
-
background-image: url('./assets/svg/button_square.svg');
|
|
407
|
-
}
|
|
408
|
-
|
|
409
|
-
.button-square:active {
|
|
410
|
-
background-image: url('./assets/svg/button_square_active.svg');
|
|
411
|
-
}
|
|
412
|
-
|
|
413
|
-
.button-lg:active {
|
|
414
|
-
background-image: url('./assets/svg/button_lg_active.svg');
|
|
415
|
-
}
|
|
416
|
-
|
|
417
|
-
button:active:not(:hover),
|
|
418
|
-
.button-lg:active:not(:hover),
|
|
419
|
-
.button-square:active:not(:hover) {
|
|
420
|
-
background-blend-mode: normal;
|
|
421
|
-
}
|
|
422
|
-
|
|
423
|
-
.ds-grid {
|
|
424
|
-
background:
|
|
425
|
-
repeating-linear-gradient(
|
|
426
|
-
transparent,
|
|
427
|
-
transparent 30px,
|
|
428
|
-
var(--color-ds-grid-border) 30px,
|
|
429
|
-
var(--color-ds-grid-border) 32px
|
|
430
|
-
),
|
|
431
|
-
repeating-linear-gradient(
|
|
432
|
-
to right,
|
|
433
|
-
transparent,
|
|
434
|
-
transparent 30px,
|
|
435
|
-
var(--color-ds-grid-border) 30px,
|
|
436
|
-
var(--color-ds-grid-border) 32px
|
|
437
|
-
),
|
|
438
|
-
repeating-linear-gradient(
|
|
439
|
-
white,
|
|
440
|
-
white 2px,
|
|
441
|
-
var(--color-ds-grid-bg) 2px,
|
|
442
|
-
var(--color-ds-grid-bg) 4px
|
|
443
|
-
);
|
|
444
|
-
}
|
|
445
|
-
|
|
446
|
-
.ds-grid-lg {
|
|
447
|
-
background-image: url('./assets/svg/grid_lg.svg');
|
|
448
|
-
}
|
|
449
|
-
|
|
450
|
-
/* .info-wrapper {
|
|
451
|
-
@apply flex pl-1 gap-0.5;
|
|
452
|
-
} */
|
|
453
|
-
|
|
454
|
-
.info {
|
|
455
|
-
@apply w-lg h-24 bg-blend-hard-light flex pl-1 py-0.5 gap-0.5 border-t-2;
|
|
456
|
-
background-image: url('./assets/svg/info.svg');
|
|
457
|
-
}
|
|
458
|
-
|
|
459
|
-
.info-container {
|
|
460
|
-
@apply w-104 h-22.5;
|
|
461
|
-
}
|
|
462
|
-
|
|
463
|
-
.info-label {
|
|
464
|
-
@apply pl-2 h-6.5 pr-1;
|
|
465
|
-
}
|
|
466
|
-
|
|
467
|
-
.info-square {
|
|
468
|
-
@apply size-22.5 border-2 bg-blend-hard-light grid place-items-center;
|
|
469
|
-
background-image: url('./assets/svg/info_square.svg');
|
|
470
|
-
}
|
|
471
|
-
|
|
472
|
-
.info-text {
|
|
473
|
-
@apply bg-ds-info-bg text-white border-4 h-16 px-1;
|
|
474
|
-
border-image: url('./assets/svg/info_border.svg') 4;
|
|
475
|
-
clip-path: polygon(
|
|
476
|
-
/* bottom left */ 4px 100%,
|
|
477
|
-
4px calc(100% - 2px),
|
|
478
|
-
2px calc(100% - 2px),
|
|
479
|
-
2px calc(100% - 4px),
|
|
480
|
-
0px calc(100% - 4px),
|
|
481
|
-
/* top left */ 0 4px,
|
|
482
|
-
2px 4px,
|
|
483
|
-
2px 2px,
|
|
484
|
-
4px 2px,
|
|
485
|
-
4px 0px,
|
|
486
|
-
/* top right */ calc(100% - 4px) 0,
|
|
487
|
-
calc(100% - 4px) 2px,
|
|
488
|
-
calc(100% - 2px) 2px,
|
|
489
|
-
calc(100% - 2px) 4px,
|
|
490
|
-
calc(100% - 0px) 4px,
|
|
491
|
-
/* bottom left */ 100% calc(100% - 4px),
|
|
492
|
-
calc(100% - 2px) calc(100% - 4px),
|
|
493
|
-
calc(100% - 2px) calc(100% - 2px),
|
|
494
|
-
calc(100% - 4px) calc(100% - 2px),
|
|
495
|
-
calc(100% - 4px) calc(100% - 0px)
|
|
496
|
-
);
|
|
497
|
-
}
|
|
498
|
-
|
|
499
|
-
.input-lg {
|
|
500
|
-
@apply w-104.5;
|
|
501
|
-
}
|
|
502
|
-
|
|
503
|
-
.input-wrapper {
|
|
504
|
-
@apply flex items-center gap-0.5;
|
|
505
|
-
}
|
|
506
|
-
|
|
507
|
-
.input-before {
|
|
508
|
-
@apply h-7.5 w-7 bg-no-repeat;
|
|
509
|
-
background-image: url('./assets/svg/input_before.svg');
|
|
510
|
-
}
|
|
511
|
-
|
|
512
|
-
.input-after {
|
|
513
|
-
@apply h-7.5 w-7 bg-no-repeat;
|
|
514
|
-
background-image: url('./assets/svg/input_after.svg');
|
|
515
|
-
}
|
|
516
|
-
|
|
517
|
-
.pictochat-window,
|
|
518
|
-
.pictochat-message {
|
|
519
|
-
clip-path: polygon(
|
|
520
|
-
/* bottom left */ 8px 100%,
|
|
521
|
-
8px calc(100% - 2px),
|
|
522
|
-
6px calc(100% - 2px),
|
|
523
|
-
6px calc(100% - 4px),
|
|
524
|
-
4px calc(100% - 4px),
|
|
525
|
-
4px calc(100% - 6px),
|
|
526
|
-
2px calc(100% - 6px),
|
|
527
|
-
2px calc(100% - 8px),
|
|
528
|
-
0 calc(100% - 8px),
|
|
529
|
-
/* top left */ 0 8px,
|
|
530
|
-
2px 8px,
|
|
531
|
-
2px 6px,
|
|
532
|
-
4px 6px,
|
|
533
|
-
4px 4px,
|
|
534
|
-
6px 4px,
|
|
535
|
-
6px 2px,
|
|
536
|
-
8px 2px,
|
|
537
|
-
8px 0px,
|
|
538
|
-
/* top right */ calc(100% - 8px) 0,
|
|
539
|
-
calc(100% - 8px) 2px,
|
|
540
|
-
calc(100% - 6px) 2px,
|
|
541
|
-
calc(100% - 6px) 4px,
|
|
542
|
-
calc(100% - 4px) 4px,
|
|
543
|
-
calc(100% - 4px) 6px,
|
|
544
|
-
calc(100% - 2px) 6px,
|
|
545
|
-
calc(100% - 2px) 8px,
|
|
546
|
-
100% 8px,
|
|
547
|
-
/* bottom left */ 100% calc(100% - 8px),
|
|
548
|
-
calc(100% - 2px) calc(100% - 8px),
|
|
549
|
-
calc(100% - 2px) calc(100% - 6px),
|
|
550
|
-
calc(100% - 4px) calc(100% - 6px),
|
|
551
|
-
calc(100% - 4px) calc(100% - 4px),
|
|
552
|
-
calc(100% - 6px) calc(100% - 4px),
|
|
553
|
-
calc(100% - 6px) calc(100% - 2px),
|
|
554
|
-
calc(100% - 8px) calc(100% - 2px),
|
|
555
|
-
calc(100% - 8px) 100%
|
|
556
|
-
);
|
|
557
|
-
}
|
|
558
|
-
|
|
559
|
-
/* todo: extra line at top */
|
|
560
|
-
.pictochat-window {
|
|
561
|
-
@apply border-8;
|
|
562
|
-
background: repeating-linear-gradient(
|
|
563
|
-
var(--color-ds-pictochat-bg),
|
|
564
|
-
var(--color-ds-pictochat-bg) 6px,
|
|
565
|
-
var(--color-ds-pictochat-border) 6px,
|
|
566
|
-
var(--color-ds-pictochat-border) 8px
|
|
567
|
-
);
|
|
568
|
-
border-image: url('./assets/svg/pictochat_border.svg') 8;
|
|
569
|
-
}
|
|
570
|
-
|
|
571
|
-
.pictochat-window > div {
|
|
572
|
-
@apply -m-0.5;
|
|
573
|
-
}
|
|
574
|
-
|
|
575
|
-
.pictochat-message {
|
|
576
|
-
@apply border-8 bg-white pl-1;
|
|
577
|
-
border-image: url('./assets/svg/pictochat_message_border.svg') 8;
|
|
578
|
-
}
|
|
579
|
-
|
|
580
|
-
.radio-button {
|
|
581
|
-
@apply h-15.5 w-48 relative bg-clip-border;
|
|
582
|
-
}
|
|
583
|
-
|
|
584
|
-
.radio-button > label {
|
|
585
|
-
@apply absolute w-full z-10 text-center top-1/2 -translate-y-1/2;
|
|
586
|
-
}
|