lexgui 0.6.4 → 0.6.6

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.
@@ -0,0 +1,410 @@
1
+ @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
2
+ @font-face {
3
+ font-family: "GeistSans";
4
+ src: url("https://raw.githubusercontent.com/jxarco/lexgui.js/master/data/GeistSans.ttf");
5
+ }
6
+
7
+ :root {
8
+ color-scheme: light dark;
9
+
10
+ --border-style: 1px solid #444;
11
+ --panel-width: 300px;
12
+ --page-padding: 24px;
13
+ --max-width: 960px;
14
+ --icon-size: 20px;
15
+ --stylish-color: light-dark(#fd18a5, #e2c886);
16
+ }
17
+
18
+ #content {
19
+ font-family: "GeistSans", sans-serif;
20
+ tab-size: 4;
21
+ max-width: var(--max-width);
22
+ width: 100%;
23
+ height: auto;
24
+ margin: 0 auto;
25
+ padding: var(--page-padding);
26
+ word-break: break-word;
27
+ text-align: justify;
28
+ text-justify: inter-word;
29
+ border-radius: 12px;
30
+ }
31
+
32
+ #content .lexarea.docs {
33
+ margin-block: 1.5em;
34
+ width: 80% !important;
35
+ justify-self: center;
36
+ }
37
+
38
+ #content::-webkit-scrollbar {
39
+ display: none;
40
+ }
41
+
42
+ .code-container {
43
+ position: relative;
44
+ margin: 16px calc(-1 * var(--page-padding));
45
+ }
46
+
47
+ .code-container button {
48
+ border: none;
49
+ outline: none;
50
+ background: none;
51
+ position: absolute;
52
+ top: 12px;
53
+ right: 12px;
54
+ font-size: 18px;
55
+ padding: 6px;
56
+ color: #bbb;
57
+ transition: color 0.25s;
58
+ z-index: 1;
59
+ }
60
+
61
+ .code-container button:hover {
62
+ color: #ccc;
63
+ cursor: pointer;
64
+ }
65
+
66
+ .code-container button.copied svg {
67
+ color: #42d065;
68
+ }
69
+
70
+ #content a {
71
+ color: var(--global-color-accent-light);
72
+ cursor: pointer;
73
+ text-decoration: none;
74
+ }
75
+
76
+ #content .lexpanel a, #content .lexarea a {
77
+ color: unset;
78
+ }
79
+
80
+ #content h1 {
81
+ font-size: 32px;
82
+ line-height: 48px;
83
+ margin-left: -2px;
84
+ margin-top: 0.67em;
85
+ margin-bottom: 0.67em;
86
+ font-optical-sizing: auto;
87
+ font-weight: 600;
88
+ font-style: normal;
89
+ font-variation-settings: "wdth" 100;
90
+ }
91
+
92
+ #content h2 {
93
+ font-size: 28px;
94
+ line-height: 36px;
95
+ font-weight: normal;
96
+ margin-left: -1px;
97
+ margin-top: 0.83em;
98
+ margin-bottom: 0.83em;
99
+ }
100
+
101
+ #content h3 {
102
+ font-size: 20px;
103
+ line-height: 28px;
104
+ font-weight: normal;
105
+ margin-top: 0.95em;
106
+ margin-bottom: 0.95em;
107
+ }
108
+
109
+ code {
110
+ font-family: "Roboto Mono", monospace;
111
+ font-size: 14px;
112
+ line-height: calc(var(--line-height) - 1px);
113
+ /* margin: 16px calc(-1 * var(--page-padding)); */
114
+ background-color: #282828;
115
+ text-align: unset !important;
116
+ text-justify: unset !important;
117
+ }
118
+
119
+ code.inline {
120
+ display: inline-block;
121
+ vertical-align: middle;
122
+ border-radius: 4px;
123
+ padding: 3px 6px;
124
+ margin: 0;
125
+ }
126
+
127
+ code.inline:not(.ref) {
128
+ color: var(--stylish-color);
129
+ font-weight: 500;
130
+ }
131
+
132
+ code:not(.inline) {
133
+ display: block;
134
+ padding: calc(var(--page-padding) - 6px) var(--page-padding);
135
+ /* white-space: pre-wrap; */
136
+ overflow: auto;
137
+ box-sizing: border-box;
138
+ position: relative;
139
+ border-radius: 6px;
140
+ }
141
+
142
+ code.inline.table {
143
+ padding: 0px 2px;
144
+ line-height: unset;
145
+ font-size: 13px;
146
+ }
147
+
148
+ code.inline.desc {
149
+ background-color: var(--global-color-tertiary);
150
+ color: var(--global-text-tertiary);
151
+ }
152
+
153
+ #content strong {
154
+ font-weight:900;
155
+ }
156
+
157
+ #content a.permalink {
158
+ float: right;
159
+ margin-left: 5px;
160
+ display: none;
161
+ }
162
+
163
+ #content > img {
164
+ width: 100%;
165
+ /* margin: 16px calc(-1 * var(--page-padding)) ; */
166
+ border-radius: 4px;
167
+ }
168
+
169
+ @media all and ( min-width: 1700px ) {
170
+
171
+ :root {
172
+ --panel-width: 360px;
173
+ --line-height: 28px;
174
+ --page-padding: 28px;
175
+ --icon-size: 24px;
176
+ }
177
+
178
+ #content h1 {
179
+ font-size: 42px;
180
+ line-height: 50px;
181
+ }
182
+
183
+ #content h2 {
184
+ font-size: 32px;
185
+ line-height: 40px;
186
+ }
187
+
188
+ #content h3 {
189
+ font-size: 24px;
190
+ line-height: 32px;
191
+ }
192
+
193
+ }
194
+
195
+ /* mobile */
196
+
197
+ @media all and ( max-width: 640px ) {
198
+
199
+ :root {
200
+ --page-padding: 16px;
201
+ --icon-size: 20px;
202
+ }
203
+
204
+ #content {
205
+ padding: var(--page-padding);
206
+ }
207
+
208
+ #content h1 {
209
+ font-size: 28px;
210
+ line-height: 36px;
211
+ padding-right: 20px;
212
+ margin-top: 0;
213
+ }
214
+
215
+ #content h2 {
216
+ font-size: 24px;
217
+ line-height: 32px;
218
+ margin-top: 24px;
219
+ }
220
+
221
+ #content h3 {
222
+ font-size: 20px;
223
+ line-height: 28px;
224
+ }
225
+
226
+ }
227
+
228
+ #goUpButton {
229
+ position: fixed;
230
+ z-index: 10;
231
+ bottom: 32px;
232
+ right: 32px;
233
+ border: 1px solid #666;
234
+ border-radius: 6px;
235
+ outline: none;
236
+ background: none;
237
+ font-size: 18px;
238
+ padding: 6px;
239
+ color: #bbb;
240
+ transition: all 0.25s;
241
+ width: 32px;
242
+ height: 32px;
243
+ }
244
+
245
+ #goUpButton:hover {
246
+ color: #ccc;
247
+ border-color: #ccc;
248
+ cursor: pointer;
249
+ }
250
+
251
+ pre .str, code .str { color: #c79369; } /* string */
252
+ pre .kwd, code .kwd { color: #2194ce; } /* keyword */
253
+ pre .com, code .com { color: #999999; } /* comment */
254
+ pre .cls, code .cls { color: #4fccbd; } /* class */
255
+ pre .stc, code .stc { color: #0b6b60; } /* static member */
256
+ pre .stf, code .stf { color: #6d8cf5; } /* static function */
257
+ pre .lit, code .lit { color: #ce57b4; } /* literal */
258
+
259
+ pre .pre, code .pre { color: #8f8c8c; } /* preprocessor */
260
+ pre .pln, code .pln { color: #444444; } /* plaintext */
261
+ pre .dec, code .dec { color: #a5dba0; } /* decimal */
262
+ pre .mtd, code .mtd { color: #e6e2b8; } /* method */
263
+ pre .var, code .var { color: #d8d5d5; } /* variable */
264
+ pre .enu, code .enu { color: #c0dec2; } /* enum */
265
+
266
+ pre .tag, code .tag { color: #2194ce; } /* HTML tag */
267
+ pre .atn, code .atn { color: #81cdf8; } /* HTML attribute name */
268
+ pre .com, code .com { color: #4e994d; } /* comment */
269
+ pre .pln, code .pln { color: #aaaaaa; } /* plaintext */
270
+
271
+ .desc {
272
+ color: var(--global-text-tertiary);
273
+ }
274
+
275
+ a .desc {
276
+ color: var(--global-color-accent);
277
+ }
278
+
279
+ .param {
280
+ color: var(--stylish-color);
281
+ }
282
+
283
+ .prop, .method {
284
+ color: var(--stylish-color);
285
+ font-size: 16px;
286
+ }
287
+
288
+ code:has(.constructor) {
289
+ background: none;
290
+ }
291
+
292
+ .constructor {
293
+ color: var(--stylish-color);
294
+ font-size: 21px;
295
+ }
296
+
297
+ #content span.solid {
298
+ /* background-color: var(--global-selected); */
299
+ border-radius: 8px;
300
+ padding: 2px;
301
+ padding-inline: 8px;
302
+ }
303
+
304
+ #content span.outline {
305
+ /* border: 1px solid var(--global-accent); */
306
+ /* color: var(--global-selected); */
307
+ border-radius: 8px;
308
+ padding: 2px;
309
+ padding-inline: 8px;
310
+ }
311
+
312
+ .note {
313
+ border-radius: 8px;
314
+ overflow: hidden;
315
+ margin: 16px 0;
316
+ font-size: 0.95rem;
317
+ color: var(--global-text-secondary);
318
+ box-shadow: 0 1px 3px var(--global-color-tertiary);
319
+ }
320
+
321
+ .note-header {
322
+ background-color: var(--global-color-tertiary);
323
+ color: var(--global-text-secondary);
324
+ padding: 8px 12px;
325
+ display: flex;
326
+ align-items: center;
327
+ gap: 0.5em;
328
+ font-weight: bold;
329
+ }
330
+
331
+ .note-header svg {
332
+ width: 1em;
333
+ height: 1em;
334
+ flex-shrink: 0;
335
+ }
336
+
337
+ .note-body {
338
+ padding: 12px;
339
+ line-height: 1.5;
340
+ }
341
+
342
+ :root[data-theme="light"] #content {
343
+ color: #202124;
344
+ }
345
+
346
+ :root[data-theme="light"] code {
347
+ background-color: #ededed;
348
+ }
349
+
350
+ :root[data-theme="light"] code button {
351
+ color: #434e53;
352
+ }
353
+
354
+ :root[data-theme="light"] code button:hover {
355
+ color: #879094;
356
+ }
357
+
358
+ :root[data-theme="light"] pre .str, :root[data-theme="light"] code .str { color: #188038; }
359
+ :root[data-theme="light"] pre .kwd, :root[data-theme="light"] code .kwd { color: #1967d2; }
360
+ :root[data-theme="light"] pre .com, :root[data-theme="light"] code .com { color: #b80672; }
361
+ :root[data-theme="light"] pre .cls, :root[data-theme="light"] code .cls { color: #0b9484; }
362
+ :root[data-theme="light"] pre .dec, :root[data-theme="light"] code .dec { color: #c5221f; }
363
+ :root[data-theme="light"] pre .mtd, :root[data-theme="light"] code .mtd { color: #636362; }
364
+ :root[data-theme="light"] pre .lit, :root[data-theme="light"] code .lit { color: #1967d2; }
365
+ :root[data-theme="light"] pre .var, :root[data-theme="light"] code .var { color: #222222; }
366
+ :root[data-theme="light"] pre .enu, :root[data-theme="light"] code .enu { color: #505fe2; }
367
+ :root[data-theme="light"] pre .tag, :root[data-theme="light"] code .tag { color: #2183b4; }
368
+ :root[data-theme="light"] pre .atn, :root[data-theme="light"] code .atn { color: #a753c0; }
369
+
370
+ :root[data-theme="light"] .desc {
371
+ color: #70777a;
372
+ }
373
+
374
+ :root[data-theme="light"] a .desc {
375
+ color: var(--global-color-accent);
376
+ }
377
+
378
+ :root[data-theme="light"] .param {
379
+ color: #37474f;
380
+ }
381
+
382
+ :root[data-theme="light"] .prop, :root[data-theme="light"] .method {
383
+ color: #37474f;
384
+ }
385
+
386
+ :root[data-theme="light"] #goUpButton {
387
+ color: #37474f;
388
+ }
389
+
390
+ :root[data-theme="light"] #goUpButton:hover {
391
+ color: #879094;
392
+ }
393
+
394
+ .lextable {
395
+ overflow-x: scroll
396
+ }
397
+
398
+ .lextable table {
399
+ table-layout: auto;
400
+ }
401
+
402
+ .lextable table th {
403
+ white-space: nowrap;
404
+ }
405
+
406
+ /* Hack to shrink Type and Method columns in reference docs */
407
+ .lextable:has(input) table tbody tr:last-child td:not(:last-child) {
408
+ width: 1px;
409
+ white-space: nowrap;
410
+ }
package/build/lexgui.css CHANGED
@@ -3938,6 +3938,10 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3938
3938
 
3939
3939
  /* Table Widget */
3940
3940
 
3941
+ .lextable {
3942
+ overflow-x: scroll;
3943
+ }
3944
+
3941
3945
  .lextable table {
3942
3946
  width: 100%;
3943
3947
  border: 1px solid;
@@ -3999,6 +4003,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
3999
4003
  padding-block: 2px;
4000
4004
  cursor: pointer;
4001
4005
  transition: all 0.1s linear;
4006
+ white-space: nowrap;
4002
4007
  background-color: var(--global-color-tertiary);
4003
4008
  -webkit-user-select: none;
4004
4009
  -moz-user-select: none;
@@ -5873,6 +5878,12 @@ ul.lexassetscontent {
5873
5878
  .hover\:fg-error:hover { color: var(--global-color-error) !important }
5874
5879
  .hover\:fg-warning:hover { color: var(--global-color-warning) !important }
5875
5880
 
5881
+ .hover\:scale-xs:hover { transform: scale(1.01); transition: transform 0.3s cubic-bezier(.42,.97,.52,1.19); }
5882
+ .hover\:scale-sm:hover { transform: scale(1.025); transition: transform 0.3s cubic-bezier(.42,.97,.52,1.19); }
5883
+ .hover\:scale-md:hover { transform: scale(1.05); transition: transform 0.3s cubic-bezier(.42,.97,.52,1.19); }
5884
+ .hover\:scale-bg:hover { transform: scale(1.1); transition: transform 0.3s cubic-bezier(.42,.97,.52,1.19); }
5885
+ .hover\:scale-xl:hover { transform: scale(1.25); transition: transform 0.3s cubic-bezier(.42,.97,.52,1.19); }
5886
+
5876
5887
  .stroke-none { stroke: none }
5877
5888
 
5878
5889
  /* Layout */