@spiritov/ds.css 1.0.0
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/.vscode/settings.json +5 -0
- package/CNAME +1 -0
- package/LICENSE +21 -0
- package/README.md +2 -0
- package/dist/assets/fonts/nitrods-font.ttf +0 -0
- package/dist/assets/svg/alert_border.svg +1 -0
- package/dist/assets/svg/bottom_bar_bottom.svg +1 -0
- package/dist/assets/svg/bottom_bar_top.svg +1 -0
- package/dist/assets/svg/button.svg +1 -0
- package/dist/assets/svg/button_active.svg +1 -0
- package/dist/assets/svg/button_lg.svg +1 -0
- package/dist/assets/svg/button_lg_active.svg +1 -0
- package/dist/assets/svg/button_radio.svg +1 -0
- package/dist/assets/svg/button_square.svg +1 -0
- package/dist/assets/svg/button_square_active.svg +1 -0
- package/dist/assets/svg/details.svg +1 -0
- package/dist/assets/svg/details_head.svg +1 -0
- package/dist/assets/svg/details_output.svg +1 -0
- package/dist/assets/svg/favicon.svg +1 -0
- package/dist/assets/svg/grid_lg.svg +1 -0
- package/dist/assets/svg/info.svg +1 -0
- package/dist/assets/svg/info_border.svg +1 -0
- package/dist/assets/svg/info_square.svg +1 -0
- package/dist/assets/svg/input.svg +1 -0
- package/dist/assets/svg/input_after.svg +1 -0
- package/dist/assets/svg/input_before.svg +1 -0
- package/dist/assets/svg/pictochat_border.svg +1 -0
- package/dist/assets/svg/pictochat_message_border.svg +1 -0
- package/dist/assets/svg/pictochat_status.svg +1 -0
- package/dist/assets/svg/top_bar.svg +1 -0
- package/dist/ds.css +721 -0
- package/package.json +35 -0
- package/src/assets/fonts/nitrods-font.ttf +0 -0
- package/src/assets/svg/alert_border.svg +1 -0
- package/src/assets/svg/bottom_bar_bottom.svg +1 -0
- package/src/assets/svg/bottom_bar_top.svg +1 -0
- package/src/assets/svg/button.svg +1 -0
- package/src/assets/svg/button_active.svg +1 -0
- package/src/assets/svg/button_lg.svg +1 -0
- package/src/assets/svg/button_lg_active.svg +1 -0
- package/src/assets/svg/button_radio.svg +1 -0
- package/src/assets/svg/button_square.svg +1 -0
- package/src/assets/svg/button_square_active.svg +1 -0
- package/src/assets/svg/details.svg +1 -0
- package/src/assets/svg/details_head.svg +1 -0
- package/src/assets/svg/details_output.svg +1 -0
- package/src/assets/svg/favicon.svg +1 -0
- package/src/assets/svg/grid_lg.svg +1 -0
- package/src/assets/svg/info.svg +1 -0
- package/src/assets/svg/info_border.svg +1 -0
- package/src/assets/svg/info_square.svg +1 -0
- package/src/assets/svg/input.svg +1 -0
- package/src/assets/svg/input_after.svg +1 -0
- package/src/assets/svg/input_before.svg +1 -0
- package/src/assets/svg/pictochat_border.svg +1 -0
- package/src/assets/svg/pictochat_message_border.svg +1 -0
- package/src/assets/svg/pictochat_status.svg +1 -0
- package/src/assets/svg/top_bar.svg +1 -0
- package/src/ds.css +723 -0
- package/src/ds.html +133 -0
- package/src/input_tw_old.css +586 -0
- package/src/landing.html +346 -0
- package/src/output.css +812 -0
- package/src/test.html +67 -0
package/src/landing.html
ADDED
|
@@ -0,0 +1,346 @@
|
|
|
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 class="ds-grid">
|
|
10
|
+
<div class="flex gap-2 min-h-dvh">
|
|
11
|
+
<!-- side -->
|
|
12
|
+
<div class="flex flex-col p-7.5 pr-0 gap-3">
|
|
13
|
+
<a href="#colors" draggable="false">
|
|
14
|
+
<button class="bg-ds-theme-pink">Colors</button>
|
|
15
|
+
</a>
|
|
16
|
+
<a href="#buttons" draggable="false">
|
|
17
|
+
<button class="bg-ds-theme-blue">Buttons</button>
|
|
18
|
+
</a>
|
|
19
|
+
<a href="#input" draggable="false">
|
|
20
|
+
<button class="bg-ds-theme-green">Input</button>
|
|
21
|
+
</a>
|
|
22
|
+
<a href="#radio" draggable="false">
|
|
23
|
+
<button class="bg-ds-theme-green">Radio Buttons</button>
|
|
24
|
+
</a>
|
|
25
|
+
<a href="#grids" draggable="false">
|
|
26
|
+
<button class="bg-ds-theme-slate">Grids</button>
|
|
27
|
+
</a>
|
|
28
|
+
<a href="#borders" draggable="false">
|
|
29
|
+
<button class="bg-ds-theme-slate">Borders</button>
|
|
30
|
+
</a>
|
|
31
|
+
<a href="#alertpopup" draggable="false">
|
|
32
|
+
<button class="bg-ds-theme-orange">Alert / Popup</button>
|
|
33
|
+
</a>
|
|
34
|
+
<a href="#infoheader" draggable="false">
|
|
35
|
+
<button class="bg-ds-theme-red">Info Header Box</button>
|
|
36
|
+
</a>
|
|
37
|
+
<a href="#pictochat" draggable="false">
|
|
38
|
+
<button class="bg-ds-theme-turquoise">Pictochat</button>
|
|
39
|
+
</a>
|
|
40
|
+
</div>
|
|
41
|
+
<!-- main -->
|
|
42
|
+
<main class="flex flex-col pictochat-window w-full m-4">
|
|
43
|
+
<p class="max-w-3xl">
|
|
44
|
+
ds.css is pure css, though this example page was built with the help of Tailwind. It does
|
|
45
|
+
rely on some svgs, totaling around 3.3mb in size.
|
|
46
|
+
</p>
|
|
47
|
+
|
|
48
|
+
<p class="max-w-3xl">
|
|
49
|
+
See the project's
|
|
50
|
+
<a class="text-ds-theme-blue" href="https://github.com/spiritov/ds.css" target="_blank"
|
|
51
|
+
>GitHub</a
|
|
52
|
+
>
|
|
53
|
+
to get started, and use this page to see what's included with ds.css!
|
|
54
|
+
</p>
|
|
55
|
+
|
|
56
|
+
<div class="alert">
|
|
57
|
+
When resizing, some gradients may break. A single-column pixel error that occurs on some
|
|
58
|
+
of the DS's dithered gradients is also included here.
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<!-- colors -->
|
|
62
|
+
<div class="pictochat-status mt-16" id="colors">Colors</div>
|
|
63
|
+
<div class="pictochat-message">
|
|
64
|
+
<span>16 themed colors are available.</span>
|
|
65
|
+
</div>
|
|
66
|
+
|
|
67
|
+
<div class="pictochat-message w-fit text-xs min-w-96">
|
|
68
|
+
<pre>
|
|
69
|
+
bg-ds-theme-slate
|
|
70
|
+
bg-ds-theme-maroon
|
|
71
|
+
bg-ds-theme-red
|
|
72
|
+
bg-ds-theme-pink
|
|
73
|
+
bg-ds-theme-orange
|
|
74
|
+
bg-ds-theme-yellow
|
|
75
|
+
bg-ds-theme-neonyellow
|
|
76
|
+
bg-ds-theme-lime
|
|
77
|
+
bg-ds-theme-green
|
|
78
|
+
bg-ds-theme-teal
|
|
79
|
+
bg-ds-theme-turquoise
|
|
80
|
+
bg-ds-theme-blue
|
|
81
|
+
bg-ds-theme-navy
|
|
82
|
+
bg-ds-theme-darkpurple
|
|
83
|
+
bg-ds-theme-magenta
|
|
84
|
+
bg-ds-theme-fuschia</pre
|
|
85
|
+
>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<div class="grid grid-cols-4 w-fit gap-3.5">
|
|
89
|
+
<button class="button-square bg-ds-theme-slate"></button>
|
|
90
|
+
<button class="button-square bg-ds-theme-maroon"></button>
|
|
91
|
+
<button class="button-square bg-ds-theme-red"></button>
|
|
92
|
+
<button class="button-square bg-ds-theme-pink"></button>
|
|
93
|
+
<button class="button-square bg-ds-theme-orange"></button>
|
|
94
|
+
<button class="button-square bg-ds-theme-yellow"></button>
|
|
95
|
+
<button class="button-square bg-ds-theme-neonyellow"></button>
|
|
96
|
+
<button class="button-square bg-ds-theme-lime"></button>
|
|
97
|
+
<button class="button-square bg-ds-theme-green"></button>
|
|
98
|
+
<button class="button-square bg-ds-theme-teal"></button>
|
|
99
|
+
<button class="button-square bg-ds-theme-turquoise"></button>
|
|
100
|
+
<button class="button-square bg-ds-theme-blue"></button>
|
|
101
|
+
<button class="button-square bg-ds-theme-navy"></button>
|
|
102
|
+
<button class="button-square bg-ds-theme-darkpurple"></button>
|
|
103
|
+
<button class="button-square bg-ds-theme-magenta"></button>
|
|
104
|
+
<button class="button-square bg-ds-theme-fuschia"></button>
|
|
105
|
+
</div>
|
|
106
|
+
|
|
107
|
+
<!-- buttons -->
|
|
108
|
+
<div class="pictochat-status" id="buttons">Buttons</div>
|
|
109
|
+
<div class="pictochat-message">
|
|
110
|
+
<span>Buttons have 3 widths, and can be colored.</span>
|
|
111
|
+
</div>
|
|
112
|
+
<div class="pictochat-message w-fit text-xs min-w-96">
|
|
113
|
+
<pre>
|
|
114
|
+
<button></button>
|
|
115
|
+
<button class="button-lg"></button>
|
|
116
|
+
<button class="button-square">X</button></pre
|
|
117
|
+
>
|
|
118
|
+
</div>
|
|
119
|
+
<button></button>
|
|
120
|
+
<button class="button-lg"></button>
|
|
121
|
+
<button class="button-square">X</button>
|
|
122
|
+
|
|
123
|
+
<!-- input -->
|
|
124
|
+
<div class="pictochat-status mt-16" id="input">Input</div>
|
|
125
|
+
<p>
|
|
126
|
+
<span>Inputs can have optional bumpers before and after them!</span>
|
|
127
|
+
</p>
|
|
128
|
+
|
|
129
|
+
<div class="pictochat-message w-fit text-xs min-w-96">
|
|
130
|
+
<pre>
|
|
131
|
+
<label>
|
|
132
|
+
<span>label</span>
|
|
133
|
+
<div class="input-wrapper">
|
|
134
|
+
<div class="input-before"></div>
|
|
135
|
+
<input type="text" />
|
|
136
|
+
<div class="input-after"></div>
|
|
137
|
+
</div>
|
|
138
|
+
</label></pre
|
|
139
|
+
>
|
|
140
|
+
</div>
|
|
141
|
+
|
|
142
|
+
<label>
|
|
143
|
+
<span>label</span>
|
|
144
|
+
<div class="input-wrapper">
|
|
145
|
+
<div class="input-before"></div>
|
|
146
|
+
<input type="text" />
|
|
147
|
+
<div class="input-after"></div>
|
|
148
|
+
</div>
|
|
149
|
+
</label>
|
|
150
|
+
|
|
151
|
+
<!-- Radio Buttons -->
|
|
152
|
+
<div class="pictochat-status mt-16" id="radio">Radio</div>
|
|
153
|
+
<p>
|
|
154
|
+
<span
|
|
155
|
+
>Radio buttons need a color to appear selected. This example uses a css grid for its
|
|
156
|
+
layout.</span
|
|
157
|
+
>
|
|
158
|
+
</p>
|
|
159
|
+
|
|
160
|
+
<div class="pictochat-message w-fit text-xs min-w-96">
|
|
161
|
+
<pre>
|
|
162
|
+
<fieldset>
|
|
163
|
+
<legend>Select an option</legend>
|
|
164
|
+
<div class="radio-button">
|
|
165
|
+
<input id="radio1" type="radio" name="option" class="bg-ds-theme-fuschia" />
|
|
166
|
+
<label for="radio1">Piece of Cipher</label>
|
|
167
|
+
</div>
|
|
168
|
+
<div class="radio-button">
|
|
169
|
+
<input id="radio2" type="radio" name="option" class="bg-ds-theme-fuschia" />
|
|
170
|
+
<label for="radio2">Chaining Intention</label>
|
|
171
|
+
</div>
|
|
172
|
+
<div class="radio-button">
|
|
173
|
+
<input id="radio3" type="radio" name="option" class="bg-ds-theme-fuschia" />
|
|
174
|
+
<label for="radio3">0259 in my room</label>
|
|
175
|
+
</div>
|
|
176
|
+
<div class="radio-button">
|
|
177
|
+
<input id="radio4" type="radio" name="option" class="bg-ds-theme-fuschia" />
|
|
178
|
+
<label for="radio4">Fantasia Nr.2</label>
|
|
179
|
+
</div>
|
|
180
|
+
</fieldset></pre
|
|
181
|
+
>
|
|
182
|
+
</div>
|
|
183
|
+
|
|
184
|
+
<fieldset class="ds-grid-lg grid grid-cols-2 w-fit gap-4 p-3.5 px-10 pt-5">
|
|
185
|
+
<legend class="top-5 relative">Select an option</legend>
|
|
186
|
+
<div class="radio-button">
|
|
187
|
+
<input id="radio1" type="radio" name="option" class="bg-ds-theme-fuschia" />
|
|
188
|
+
<label for="radio1">Piece of Cipher</label>
|
|
189
|
+
</div>
|
|
190
|
+
<div class="radio-button">
|
|
191
|
+
<input id="radio2" type="radio" name="option" class="bg-ds-theme-fuschia" />
|
|
192
|
+
<label for="radio2">Chaining Intention</label>
|
|
193
|
+
</div>
|
|
194
|
+
<div class="radio-button">
|
|
195
|
+
<input id="radio3" type="radio" name="option" class="bg-ds-theme-fuschia" />
|
|
196
|
+
<label for="radio3">0259 in my room</label>
|
|
197
|
+
</div>
|
|
198
|
+
<div class="radio-button">
|
|
199
|
+
<input id="radio4" type="radio" name="option" class="bg-ds-theme-fuschia" />
|
|
200
|
+
<label for="radio4">Fantasia Nr.2</label>
|
|
201
|
+
</div>
|
|
202
|
+
</fieldset>
|
|
203
|
+
|
|
204
|
+
<!-- grids -->
|
|
205
|
+
<div class="pictochat-status mt-16" id="grids">Grids</div>
|
|
206
|
+
<p>
|
|
207
|
+
<span>Grids should be provided with a width/height if they're empty.</span>
|
|
208
|
+
</p>
|
|
209
|
+
<div class="pictochat-message w-fit text-xs min-w-96">
|
|
210
|
+
<pre>
|
|
211
|
+
<div class="ds-grid"></div>
|
|
212
|
+
<div class="ds-grid-lg"></div></pre
|
|
213
|
+
>
|
|
214
|
+
</div>
|
|
215
|
+
<div class="ds-grid w-96 h-48"></div>
|
|
216
|
+
<div class="ds-grid-lg w-96 h-48"></div>
|
|
217
|
+
|
|
218
|
+
<!-- borders -->
|
|
219
|
+
<div class="pictochat-status mt-16" id="borders">Borders</div>
|
|
220
|
+
<p>
|
|
221
|
+
<span>Borders can also appear colored!</span>
|
|
222
|
+
</p>
|
|
223
|
+
|
|
224
|
+
<div class="pictochat-message w-fit text-xs min-w-96">
|
|
225
|
+
<pre>
|
|
226
|
+
<div class="bar bg-ds-theme-slate"></div>
|
|
227
|
+
<div class="bar-lg bg-ds-theme-green"></div>
|
|
228
|
+
<div class="bar-lg-reverse bg-ds-theme-darkpurple"></div></pre
|
|
229
|
+
>
|
|
230
|
+
</div>
|
|
231
|
+
|
|
232
|
+
<div class="bar bg-ds-theme-slate"></div>
|
|
233
|
+
<div class="bar-lg bg-ds-theme-green"></div>
|
|
234
|
+
<div class="bar-lg-reverse bg-ds-theme-darkpurple"></div>
|
|
235
|
+
|
|
236
|
+
<!-- alert -->
|
|
237
|
+
<div class="pictochat-status mt-16" id="alertpopup">Alert</div>
|
|
238
|
+
<p>
|
|
239
|
+
<span>There is a loading animation available that can be used in alerts.</span>
|
|
240
|
+
</p>
|
|
241
|
+
|
|
242
|
+
<div class="pictochat-message w-fit text-xs min-w-96">
|
|
243
|
+
<pre>
|
|
244
|
+
<div class="alert">
|
|
245
|
+
<div class="loading-container">
|
|
246
|
+
<div class="loading-1"></div>
|
|
247
|
+
<div class="loading-2"></div>
|
|
248
|
+
<div class="loading-3"></div>
|
|
249
|
+
<div class="loading-4"></div>
|
|
250
|
+
<div class="loading-5"></div>
|
|
251
|
+
<div class="loading-6"></div>
|
|
252
|
+
<div class="loading-7"></div>
|
|
253
|
+
<div class="loading-8"></div>
|
|
254
|
+
<div class="loading-9"></div>
|
|
255
|
+
</div>
|
|
256
|
+
<span>Looking for software available for download...</span>
|
|
257
|
+
<div class="loading-container">
|
|
258
|
+
<div class="loading-1"></div>
|
|
259
|
+
<div class="loading-2"></div>
|
|
260
|
+
<div class="loading-3"></div>
|
|
261
|
+
<div class="loading-4"></div>
|
|
262
|
+
<div class="loading-5"></div>
|
|
263
|
+
<div class="loading-6"></div>
|
|
264
|
+
<div class="loading-7"></div>
|
|
265
|
+
<div class="loading-8"></div>
|
|
266
|
+
<div class="loading-9"></div>
|
|
267
|
+
</div>
|
|
268
|
+
</div></pre
|
|
269
|
+
>
|
|
270
|
+
</div>
|
|
271
|
+
|
|
272
|
+
<div class="alert">
|
|
273
|
+
<div class="loading-container">
|
|
274
|
+
<div class="loading-1"></div>
|
|
275
|
+
<div class="loading-2"></div>
|
|
276
|
+
<div class="loading-3"></div>
|
|
277
|
+
<div class="loading-4"></div>
|
|
278
|
+
<div class="loading-5"></div>
|
|
279
|
+
<div class="loading-6"></div>
|
|
280
|
+
<div class="loading-7"></div>
|
|
281
|
+
<div class="loading-8"></div>
|
|
282
|
+
<div class="loading-9"></div>
|
|
283
|
+
</div>
|
|
284
|
+
<span>Looking for software available for download...</span>
|
|
285
|
+
<div class="loading-container">
|
|
286
|
+
<div class="loading-1"></div>
|
|
287
|
+
<div class="loading-2"></div>
|
|
288
|
+
<div class="loading-3"></div>
|
|
289
|
+
<div class="loading-4"></div>
|
|
290
|
+
<div class="loading-5"></div>
|
|
291
|
+
<div class="loading-6"></div>
|
|
292
|
+
<div class="loading-7"></div>
|
|
293
|
+
<div class="loading-8"></div>
|
|
294
|
+
<div class="loading-9"></div>
|
|
295
|
+
</div>
|
|
296
|
+
</div>
|
|
297
|
+
|
|
298
|
+
<!-- info / header -->
|
|
299
|
+
<div class="pictochat-status mt-16" id="infoheader">Info / Header Box</div>
|
|
300
|
+
|
|
301
|
+
<div class="pictochat-message w-fit text-xs min-w-96">
|
|
302
|
+
<pre>
|
|
303
|
+
<div class="info">
|
|
304
|
+
<div class="info-square">image</div>
|
|
305
|
+
<div class="info-container">
|
|
306
|
+
<div class="info-label">Settings</div>
|
|
307
|
+
<div class="info-text">
|
|
308
|
+
Change system settings here. Select the setting you'd like to change.
|
|
309
|
+
</div>
|
|
310
|
+
</div>
|
|
311
|
+
</div></pre
|
|
312
|
+
>
|
|
313
|
+
</div>
|
|
314
|
+
|
|
315
|
+
<div class="info">
|
|
316
|
+
<div class="info-square">image</div>
|
|
317
|
+
<div class="info-container">
|
|
318
|
+
<div class="info-label">Settings</div>
|
|
319
|
+
<div class="info-text">
|
|
320
|
+
Change system settings here. Select the setting you'd like to change.
|
|
321
|
+
</div>
|
|
322
|
+
</div>
|
|
323
|
+
</div>
|
|
324
|
+
|
|
325
|
+
<!-- pictochat -->
|
|
326
|
+
<div class="pictochat-status mt-16" id="pictochat">Pictochat</div>
|
|
327
|
+
|
|
328
|
+
<div class="pictochat-message w-fit text-xs min-w-96">
|
|
329
|
+
<pre>
|
|
330
|
+
<div class="pictochat-window">
|
|
331
|
+
<div class="pictochat-message">A message..</div>
|
|
332
|
+
<div class="pictochat-status">Now leaving..</div>
|
|
333
|
+
</div></pre
|
|
334
|
+
>
|
|
335
|
+
</div>
|
|
336
|
+
|
|
337
|
+
<div class="ds-grid-lg w-fit p-3.5">
|
|
338
|
+
<div class="pictochat-window w-96 h-48">
|
|
339
|
+
<div class="pictochat-message">A message..</div>
|
|
340
|
+
<div class="pictochat-status">Now leaving..</div>
|
|
341
|
+
</div>
|
|
342
|
+
</div>
|
|
343
|
+
</main>
|
|
344
|
+
</div>
|
|
345
|
+
</body>
|
|
346
|
+
</html>
|