lightmetal 0.0.0-stage → 0.3.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/CHANGELOG.md +25 -0
- package/LICENSE +21 -0
- package/README.md +383 -2
- package/dist/lightmetal.css +334 -0
- package/dist/lightmetal.esm.js +1099 -0
- package/dist/lightmetal.js +1121 -0
- package/dist/lightmetal.min.css +1 -0
- package/dist/lightmetal.min.js +1 -0
- package/ligHTMetaL.png +0 -0
- package/package.json +28 -4
- package/src/lightmetal.css +334 -0
- package/src/lightmetal.js +1302 -0
|
@@ -0,0 +1,334 @@
|
|
|
1
|
+
/* lightmetal.css — default styles for the lightmetal editor.
|
|
2
|
+
*
|
|
3
|
+
* Every rule is scoped under .lightmetal. Theme via the --lightmetal-*
|
|
4
|
+
* custom properties. Pin a theme on the element with .lightmetal-dark or
|
|
5
|
+
* .lightmetal-light; without a pin, dark follows the system setting.
|
|
6
|
+
*
|
|
7
|
+
* Force dark: <div class="lightmetal lightmetal-dark">
|
|
8
|
+
* Force light: <div class="lightmetal lightmetal-light">
|
|
9
|
+
* Follow system: <div class="lightmetal">
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
.lightmetal {
|
|
13
|
+
/* Light theme (default). */
|
|
14
|
+
--lightmetal-bg: #ffffff;
|
|
15
|
+
--lightmetal-bg-toolbar: #f7f8fa;
|
|
16
|
+
--lightmetal-border: #e3e6eb;
|
|
17
|
+
--lightmetal-color: #24292f;
|
|
18
|
+
--lightmetal-color-dim: #6a737d;
|
|
19
|
+
--lightmetal-hover: #edf0f4;
|
|
20
|
+
--lightmetal-accent: #556ee7;
|
|
21
|
+
--lightmetal-accent-soft: rgba(85, 110, 231, 0.12);
|
|
22
|
+
--lightmetal-error-fg: #b42318;
|
|
23
|
+
--lightmetal-error-bg: #fdecea;
|
|
24
|
+
|
|
25
|
+
border: 1px solid var(--lightmetal-border);
|
|
26
|
+
border-radius: 10px;
|
|
27
|
+
background-color: var(--lightmetal-bg);
|
|
28
|
+
color: var(--lightmetal-color);
|
|
29
|
+
box-sizing: border-box;
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* Dark theme. */
|
|
34
|
+
|
|
35
|
+
.lightmetal.lightmetal-dark {
|
|
36
|
+
--lightmetal-bg: #16181c;
|
|
37
|
+
--lightmetal-bg-toolbar: #1e2126;
|
|
38
|
+
--lightmetal-border: #2c313a;
|
|
39
|
+
--lightmetal-color: #e6e9ee;
|
|
40
|
+
--lightmetal-color-dim: #9aa4b2;
|
|
41
|
+
--lightmetal-hover: #262b33;
|
|
42
|
+
--lightmetal-accent: #8fa0ff;
|
|
43
|
+
--lightmetal-accent-soft: rgba(143, 160, 255, 0.18);
|
|
44
|
+
--lightmetal-error-fg: #ffb4ad;
|
|
45
|
+
--lightmetal-error-bg: rgba(255, 99, 99, 0.16);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* Follow the system setting unless a theme is pinned. */
|
|
49
|
+
|
|
50
|
+
@media (prefers-color-scheme: dark) {
|
|
51
|
+
.lightmetal:not(.lightmetal-light) {
|
|
52
|
+
--lightmetal-bg: #16181c;
|
|
53
|
+
--lightmetal-bg-toolbar: #1e2126;
|
|
54
|
+
--lightmetal-border: #2c313a;
|
|
55
|
+
--lightmetal-color: #e6e9ee;
|
|
56
|
+
--lightmetal-color-dim: #9aa4b2;
|
|
57
|
+
--lightmetal-hover: #262b33;
|
|
58
|
+
--lightmetal-accent: #8fa0ff;
|
|
59
|
+
--lightmetal-accent-soft: rgba(143, 160, 255, 0.18);
|
|
60
|
+
--lightmetal-error-fg: #ffb4ad;
|
|
61
|
+
--lightmetal-error-bg: rgba(255, 99, 99, 0.16);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/* Toolbar. */
|
|
66
|
+
|
|
67
|
+
.lightmetal .lightmetal-actionbar {
|
|
68
|
+
display: flex;
|
|
69
|
+
flex-wrap: wrap;
|
|
70
|
+
gap: 2px;
|
|
71
|
+
padding: 6px;
|
|
72
|
+
background-color: var(--lightmetal-bg-toolbar);
|
|
73
|
+
border-bottom: 1px solid var(--lightmetal-border);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.lightmetal .lightmetal-button {
|
|
77
|
+
flex: 0 0 auto;
|
|
78
|
+
display: inline-flex;
|
|
79
|
+
align-items: center;
|
|
80
|
+
justify-content: center;
|
|
81
|
+
width: 34px;
|
|
82
|
+
height: 30px;
|
|
83
|
+
padding: 0;
|
|
84
|
+
border: none;
|
|
85
|
+
border-radius: 6px;
|
|
86
|
+
background-color: transparent;
|
|
87
|
+
color: var(--lightmetal-color-dim);
|
|
88
|
+
font-size: 14px;
|
|
89
|
+
line-height: 1;
|
|
90
|
+
cursor: pointer;
|
|
91
|
+
transition: background-color 0.12s ease, color 0.12s ease;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.lightmetal .lightmetal-button:hover,
|
|
95
|
+
.lightmetal .lightmetal-table-button:hover:not(:disabled) {
|
|
96
|
+
background-color: var(--lightmetal-hover);
|
|
97
|
+
color: var(--lightmetal-color);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.lightmetal .lightmetal-button:focus-visible,
|
|
101
|
+
.lightmetal .lightmetal-table-button:focus-visible {
|
|
102
|
+
outline: 2px solid var(--lightmetal-accent);
|
|
103
|
+
outline-offset: -2px;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.lightmetal .lightmetal-button-selected {
|
|
107
|
+
background-color: var(--lightmetal-accent-soft);
|
|
108
|
+
color: var(--lightmetal-accent);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.lightmetal .lightmetal-button svg {
|
|
112
|
+
display: block;
|
|
113
|
+
/* CSS sizes the icons; the 15px in the markup is a fallback. */
|
|
114
|
+
width: 18px;
|
|
115
|
+
height: 18px;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/* Table insertion dropdown. Popover support lifts it above clipped hosts. */
|
|
119
|
+
|
|
120
|
+
.lightmetal .lightmetal-table-dropdown {
|
|
121
|
+
position: fixed;
|
|
122
|
+
inset: auto;
|
|
123
|
+
margin: 0;
|
|
124
|
+
z-index: 1000;
|
|
125
|
+
box-sizing: border-box;
|
|
126
|
+
width: 270px;
|
|
127
|
+
padding: 12px;
|
|
128
|
+
overflow: auto;
|
|
129
|
+
border: 1px solid var(--lightmetal-border);
|
|
130
|
+
border-radius: 8px;
|
|
131
|
+
background: var(--lightmetal-bg);
|
|
132
|
+
color: var(--lightmetal-color);
|
|
133
|
+
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
|
|
134
|
+
font: inherit;
|
|
135
|
+
font-size: 13px;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.lightmetal .lightmetal-table-dropdown[hidden] {
|
|
139
|
+
display: none;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.lightmetal .lightmetal-table-dimensions {
|
|
143
|
+
margin-bottom: 8px;
|
|
144
|
+
font-weight: 600;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.lightmetal .lightmetal-table-grid {
|
|
148
|
+
display: grid;
|
|
149
|
+
gap: 3px;
|
|
150
|
+
margin-bottom: 12px;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.lightmetal .lightmetal-table-grid button {
|
|
154
|
+
aspect-ratio: 1;
|
|
155
|
+
min-width: 0;
|
|
156
|
+
padding: 0;
|
|
157
|
+
border: 1px solid var(--lightmetal-border);
|
|
158
|
+
border-radius: 2px;
|
|
159
|
+
background: var(--lightmetal-bg-toolbar);
|
|
160
|
+
cursor: pointer;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.lightmetal .lightmetal-table-grid .lightmetal-grid-selected {
|
|
164
|
+
border-color: var(--lightmetal-accent);
|
|
165
|
+
background: var(--lightmetal-accent-soft);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.lightmetal .lightmetal-table-form {
|
|
169
|
+
display: flex;
|
|
170
|
+
flex-wrap: wrap;
|
|
171
|
+
align-items: end;
|
|
172
|
+
gap: 8px;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.lightmetal .lightmetal-table-form label {
|
|
176
|
+
flex: 1;
|
|
177
|
+
min-width: 65px;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.lightmetal .lightmetal-table-form input {
|
|
181
|
+
box-sizing: border-box;
|
|
182
|
+
display: block;
|
|
183
|
+
width: 100%;
|
|
184
|
+
margin-top: 4px;
|
|
185
|
+
padding: 5px;
|
|
186
|
+
border: 1px solid var(--lightmetal-border);
|
|
187
|
+
border-radius: 4px;
|
|
188
|
+
background: var(--lightmetal-bg);
|
|
189
|
+
color: var(--lightmetal-color);
|
|
190
|
+
font: inherit;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.lightmetal .lightmetal-table-form button {
|
|
194
|
+
padding: 6px 10px;
|
|
195
|
+
border: none;
|
|
196
|
+
border-radius: 4px;
|
|
197
|
+
background: var(--lightmetal-accent);
|
|
198
|
+
color: var(--lightmetal-bg);
|
|
199
|
+
font: inherit;
|
|
200
|
+
cursor: pointer;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.lightmetal .lightmetal-table-dropdown button:focus-visible,
|
|
204
|
+
.lightmetal .lightmetal-table-dropdown input:focus-visible {
|
|
205
|
+
outline: 2px solid var(--lightmetal-accent);
|
|
206
|
+
outline-offset: 2px;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.lightmetal .lightmetal-table-message {
|
|
210
|
+
margin-top: 8px;
|
|
211
|
+
color: var(--lightmetal-error-fg);
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.lightmetal .lightmetal-table-message:empty {
|
|
215
|
+
display: none;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
/* Contextual table controls stay outside the saved HTML. */
|
|
219
|
+
|
|
220
|
+
.lightmetal .lightmetal-tablebar {
|
|
221
|
+
display: flex;
|
|
222
|
+
flex-wrap: wrap;
|
|
223
|
+
align-items: center;
|
|
224
|
+
gap: 4px;
|
|
225
|
+
padding: 6px;
|
|
226
|
+
background-color: var(--lightmetal-bg-toolbar);
|
|
227
|
+
border-bottom: 1px solid var(--lightmetal-border);
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.lightmetal .lightmetal-tablebar[hidden] {
|
|
231
|
+
display: none;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.lightmetal .lightmetal-table-button {
|
|
235
|
+
padding: 5px 8px;
|
|
236
|
+
border: none;
|
|
237
|
+
border-radius: 6px;
|
|
238
|
+
background: transparent;
|
|
239
|
+
color: var(--lightmetal-color-dim);
|
|
240
|
+
font: inherit;
|
|
241
|
+
font-size: 12px;
|
|
242
|
+
cursor: pointer;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.lightmetal .lightmetal-table-button:disabled {
|
|
246
|
+
opacity: 0.45;
|
|
247
|
+
cursor: not-allowed;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.lightmetal .lightmetal-table-note {
|
|
251
|
+
color: var(--lightmetal-color-dim);
|
|
252
|
+
font-size: 12px;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
/* WYSIWYG content. */
|
|
256
|
+
|
|
257
|
+
.lightmetal .lightmetal-content {
|
|
258
|
+
box-sizing: border-box;
|
|
259
|
+
height: 300px;
|
|
260
|
+
overflow-y: auto;
|
|
261
|
+
outline: none;
|
|
262
|
+
padding: 12px 14px;
|
|
263
|
+
background-color: var(--lightmetal-bg);
|
|
264
|
+
color: var(--lightmetal-color);
|
|
265
|
+
scrollbar-width: thin;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
/* Tables use the editor theme. Wide tables scroll with the content. */
|
|
269
|
+
|
|
270
|
+
.lightmetal .lightmetal-content table {
|
|
271
|
+
border-collapse: collapse;
|
|
272
|
+
margin: 0.75em 0;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.lightmetal .lightmetal-content td,
|
|
276
|
+
.lightmetal .lightmetal-content th {
|
|
277
|
+
border: 1px solid var(--lightmetal-border);
|
|
278
|
+
padding: 6px 10px;
|
|
279
|
+
min-width: 40px;
|
|
280
|
+
vertical-align: top;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.lightmetal .lightmetal-content th {
|
|
284
|
+
background-color: var(--lightmetal-bg-toolbar);
|
|
285
|
+
text-align: left;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.lightmetal .lightmetal-content caption {
|
|
289
|
+
padding: 6px 0;
|
|
290
|
+
color: var(--lightmetal-color-dim);
|
|
291
|
+
text-align: left;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
/* Source-mode textarea. Same box as the content so the height does not
|
|
295
|
+
* jump when the mode toggles. */
|
|
296
|
+
|
|
297
|
+
.lightmetal .lightmetal-sources {
|
|
298
|
+
box-sizing: border-box;
|
|
299
|
+
display: block;
|
|
300
|
+
width: 100%;
|
|
301
|
+
height: 300px;
|
|
302
|
+
padding: 12px 14px;
|
|
303
|
+
border: none;
|
|
304
|
+
outline: none;
|
|
305
|
+
resize: none;
|
|
306
|
+
font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
|
|
307
|
+
font-size: 13px;
|
|
308
|
+
line-height: 1.5;
|
|
309
|
+
background-color: var(--lightmetal-bg);
|
|
310
|
+
color: var(--lightmetal-color);
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.lightmetal .lightmetal-sources[hidden] {
|
|
314
|
+
display: none;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
/* Image drop highlight. */
|
|
318
|
+
|
|
319
|
+
.lightmetal .lightmetal-drop {
|
|
320
|
+
outline: 2px dashed var(--lightmetal-accent);
|
|
321
|
+
outline-offset: -6px;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
/* Inline error note shown in the toolbar. */
|
|
325
|
+
|
|
326
|
+
.lightmetal .lightmetal-error {
|
|
327
|
+
margin-left: auto;
|
|
328
|
+
padding: 3px 10px;
|
|
329
|
+
font-size: 12px;
|
|
330
|
+
line-height: 1.4;
|
|
331
|
+
border-radius: 6px;
|
|
332
|
+
color: var(--lightmetal-error-fg);
|
|
333
|
+
background-color: var(--lightmetal-error-bg);
|
|
334
|
+
}
|