@meowdown/core 0.29.1 → 0.30.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.
Files changed (4) hide show
  1. package/README.md +14 -20
  2. package/dist/index.js +1 -1
  3. package/dist/style.css +554 -535
  4. package/package.json +5 -5
package/dist/style.css CHANGED
@@ -1,662 +1,681 @@
1
- .ProseMirror {
2
- word-wrap: break-word;
3
- white-space: pre-wrap;
4
- white-space: break-spaces;
5
- -webkit-font-variant-ligatures: none;
6
- font-variant-ligatures: none;
7
- font-feature-settings: "liga" 0;
8
- position: relative;
9
- }
1
+ @layer meowdown.base {
2
+ .ProseMirror {
3
+ word-wrap: break-word;
4
+ white-space: pre-wrap;
5
+ white-space: break-spaces;
6
+ -webkit-font-variant-ligatures: none;
7
+ font-variant-ligatures: none;
8
+ font-feature-settings: "liga" 0;
9
+ position: relative;
10
+ }
10
11
 
11
- .ProseMirror pre {
12
- white-space: pre-wrap;
13
- }
12
+ .ProseMirror pre {
13
+ white-space: pre-wrap;
14
+ }
14
15
 
15
- .ProseMirror li {
16
- position: relative;
17
- }
16
+ .ProseMirror li {
17
+ position: relative;
18
+ }
18
19
 
19
- .ProseMirror-hideselection ::selection {
20
- background: none;
21
- }
20
+ .ProseMirror-hideselection ::selection {
21
+ background: none;
22
+ }
22
23
 
23
- .ProseMirror-hideselection {
24
- caret-color: #0000;
25
- }
24
+ .ProseMirror-hideselection {
25
+ caret-color: #0000;
26
+ }
26
27
 
27
- .ProseMirror [draggable][contenteditable="false"] {
28
- user-select: text;
29
- }
28
+ .ProseMirror [draggable][contenteditable="false"] {
29
+ user-select: text;
30
+ }
30
31
 
31
- .ProseMirror-selectednode {
32
- outline: 2px solid #8cf;
33
- }
32
+ .ProseMirror-selectednode {
33
+ outline: 2px solid #8cf;
34
+ }
34
35
 
35
- li.ProseMirror-selectednode {
36
- outline: none;
37
- }
36
+ li.ProseMirror-selectednode {
37
+ outline: none;
38
+ }
38
39
 
39
- li.ProseMirror-selectednode:after {
40
- content: "";
41
- pointer-events: none;
42
- border: 2px solid #8cf;
43
- position: absolute;
44
- inset: -2px -2px -2px -32px;
45
- }
40
+ li.ProseMirror-selectednode:after {
41
+ content: "";
42
+ pointer-events: none;
43
+ border: 2px solid #8cf;
44
+ position: absolute;
45
+ inset: -2px -2px -2px -32px;
46
+ }
46
47
 
47
- img.ProseMirror-separator {
48
- border: none !important;
49
- margin: 0 !important;
50
- display: inline !important;
51
- }
48
+ img.ProseMirror-separator {
49
+ border: none !important;
50
+ margin: 0 !important;
51
+ display: inline !important;
52
+ }
52
53
 
53
- :root {
54
- --prosekit-list-bullet-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2.5' fill='currentColor'/%3E%3C/svg%3E");
55
- --prosekit-list-toggle-open-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='8,10 12,14 16,10' fill='currentColor'/%3E%3C/svg%3E");
56
- --prosekit-list-toggle-closed-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='10,8 14,12 10,16' fill='currentColor'/%3E%3C/svg%3E");
57
- }
54
+ :root {
55
+ --prosekit-list-bullet-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2.5' fill='currentColor'/%3E%3C/svg%3E");
56
+ --prosekit-list-toggle-open-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='8,10 12,14 16,10' fill='currentColor'/%3E%3C/svg%3E");
57
+ --prosekit-list-toggle-closed-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='10,8 14,12 10,16' fill='currentColor'/%3E%3C/svg%3E");
58
+ }
58
59
 
59
- .prosemirror-flat-list {
60
- margin: 0;
61
- padding: 0;
62
- list-style: none;
63
- position: relative;
64
- }
60
+ .prosemirror-flat-list {
61
+ margin: 0;
62
+ padding: 0;
63
+ list-style: none;
64
+ position: relative;
65
+ }
65
66
 
66
- .prosemirror-flat-list > .list-marker {
67
- text-align: center;
68
- width: 1lh;
69
- height: 1lh;
70
- position: absolute;
71
- inset-inline-start: 0;
72
- }
67
+ .prosemirror-flat-list > .list-marker {
68
+ text-align: center;
69
+ width: 1lh;
70
+ height: 1lh;
71
+ position: absolute;
72
+ inset-inline-start: 0;
73
+ }
73
74
 
74
- .prosemirror-flat-list > .list-content {
75
- margin-inline-start: 1lh;
76
- }
75
+ .prosemirror-flat-list > .list-content {
76
+ margin-inline-start: 1lh;
77
+ }
77
78
 
78
- .prosemirror-flat-list[data-list-kind="bullet"] > .list-marker, .prosemirror-flat-list[data-list-kind="toggle"] > .list-marker {
79
- background-color: currentColor;
80
- mask-position: center;
81
- mask-size: contain;
82
- mask-repeat: no-repeat;
83
- }
79
+ .prosemirror-flat-list[data-list-kind="bullet"] > .list-marker, .prosemirror-flat-list[data-list-kind="toggle"] > .list-marker {
80
+ background-color: currentColor;
81
+ mask-position: center;
82
+ mask-size: contain;
83
+ mask-repeat: no-repeat;
84
+ }
84
85
 
85
- .prosemirror-flat-list[data-list-kind="bullet"] > .list-marker {
86
- mask-image: var(--prosekit-list-bullet-icon);
87
- }
86
+ .prosemirror-flat-list[data-list-kind="bullet"] > .list-marker {
87
+ mask-image: var(--prosekit-list-bullet-icon);
88
+ }
88
89
 
89
- .prosemirror-flat-list[data-list-kind="toggle"] > .list-marker {
90
- mask-image: var(--prosekit-list-toggle-open-icon);
91
- }
90
+ .prosemirror-flat-list[data-list-kind="toggle"] > .list-marker {
91
+ mask-image: var(--prosekit-list-toggle-open-icon);
92
+ }
92
93
 
93
- .prosemirror-flat-list[data-list-kind="toggle"][data-list-collapsable][data-list-collapsed] > .list-marker {
94
- mask-image: var(--prosekit-list-toggle-closed-icon);
95
- }
94
+ .prosemirror-flat-list[data-list-kind="toggle"][data-list-collapsable][data-list-collapsed] > .list-marker {
95
+ mask-image: var(--prosekit-list-toggle-closed-icon);
96
+ }
96
97
 
97
- .prosemirror-flat-list[data-list-kind="ordered"] > * {
98
- contain: style;
99
- }
98
+ .prosemirror-flat-list[data-list-kind="ordered"] > * {
99
+ contain: style;
100
+ }
100
101
 
101
- .prosemirror-flat-list[data-list-kind="ordered"]:before {
102
- content: counter(prosemirror-flat-list-counter, decimal) ". ";
103
- font-variant-numeric: tabular-nums;
104
- position: absolute;
105
- inset-inline-end: calc(100% - 1lh);
106
- }
102
+ .prosemirror-flat-list[data-list-kind="ordered"]:before {
103
+ content: counter(prosemirror-flat-list-counter, decimal) ". ";
104
+ font-variant-numeric: tabular-nums;
105
+ position: absolute;
106
+ inset-inline-end: calc(100% - 1lh);
107
+ }
107
108
 
108
- .prosemirror-flat-list[data-list-kind="ordered"] {
109
- counter-increment: prosemirror-flat-list-counter;
110
- }
109
+ .prosemirror-flat-list[data-list-kind="ordered"] {
110
+ counter-increment: prosemirror-flat-list-counter;
111
+ }
111
112
 
112
- .prosemirror-flat-list[data-list-kind="ordered"]:first-child, :not(.prosemirror-flat-list[data-list-kind="ordered"]) + .prosemirror-flat-list[data-list-kind="ordered"] {
113
- counter-reset: prosemirror-flat-list-counter;
114
- }
113
+ .prosemirror-flat-list[data-list-kind="ordered"]:first-child, :not(.prosemirror-flat-list[data-list-kind="ordered"]) + .prosemirror-flat-list[data-list-kind="ordered"] {
114
+ counter-reset: prosemirror-flat-list-counter;
115
+ }
115
116
 
116
- @supports (counter-set: prosemirror-flat-list-counter 1) {
117
- :is(.prosemirror-flat-list[data-list-kind="ordered"]:first-child, :not(.prosemirror-flat-list[data-list-kind="ordered"]) + .prosemirror-flat-list[data-list-kind="ordered"])[data-list-order] {
118
- counter-set: prosemirror-flat-list-counter var(--prosemirror-flat-list-order);
117
+ @supports (counter-set: prosemirror-flat-list-counter 1) {
118
+ :is(.prosemirror-flat-list[data-list-kind="ordered"]:first-child, :not(.prosemirror-flat-list[data-list-kind="ordered"]) + .prosemirror-flat-list[data-list-kind="ordered"])[data-list-order] {
119
+ counter-set: prosemirror-flat-list-counter var(--prosemirror-flat-list-order);
120
+ }
119
121
  }
120
- }
121
122
 
122
- @supports not (counter-set: prosemirror-flat-list-counter 1) {
123
- :is(.prosemirror-flat-list[data-list-kind="ordered"]:first-child, :not(.prosemirror-flat-list[data-list-kind="ordered"]) + .prosemirror-flat-list[data-list-kind="ordered"])[data-list-order] {
124
- counter-increment: prosemirror-flat-list-counter var(--prosemirror-flat-list-order);
123
+ @supports not (counter-set: prosemirror-flat-list-counter 1) {
124
+ :is(.prosemirror-flat-list[data-list-kind="ordered"]:first-child, :not(.prosemirror-flat-list[data-list-kind="ordered"]) + .prosemirror-flat-list[data-list-kind="ordered"])[data-list-order] {
125
+ counter-increment: prosemirror-flat-list-counter var(--prosemirror-flat-list-order);
126
+ }
125
127
  }
126
- }
127
128
 
128
- .prosemirror-flat-list[data-list-kind="task"] > .list-marker, .prosemirror-flat-list[data-list-kind="task"] > .list-marker * {
129
- cursor: pointer;
130
- justify-content: center;
131
- align-items: center;
132
- margin: 0;
133
- padding: 0;
134
- display: flex;
135
- }
129
+ .prosemirror-flat-list[data-list-kind="task"] > .list-marker, .prosemirror-flat-list[data-list-kind="task"] > .list-marker * {
130
+ cursor: pointer;
131
+ justify-content: center;
132
+ align-items: center;
133
+ margin: 0;
134
+ padding: 0;
135
+ display: flex;
136
+ }
136
137
 
137
- .prosemirror-flat-list[data-list-kind="toggle"][data-list-collapsable] > .list-marker {
138
- cursor: pointer;
139
- }
138
+ .prosemirror-flat-list[data-list-kind="toggle"][data-list-collapsable] > .list-marker {
139
+ cursor: pointer;
140
+ }
140
141
 
141
- .prosemirror-flat-list[data-list-kind="toggle"]:not([data-list-collapsable]) > .list-marker {
142
- opacity: .4;
143
- pointer-events: none;
144
- }
142
+ .prosemirror-flat-list[data-list-kind="toggle"]:not([data-list-collapsable]) > .list-marker {
143
+ opacity: .4;
144
+ pointer-events: none;
145
+ }
145
146
 
146
- .prosemirror-flat-list[data-list-kind="toggle"][data-list-collapsable][data-list-collapsed] > .list-content > :nth-child(n+2) {
147
- display: none;
147
+ .prosemirror-flat-list[data-list-kind="toggle"][data-list-collapsable][data-list-collapsed] > .list-content > :nth-child(n+2) {
148
+ display: none;
149
+ }
148
150
  }
149
151
 
150
- :root {
151
- --meowdown-text: light-dark(#3f3f46, #d4d4d8);
152
- --meowdown-heading: light-dark(#18181b, #fafafa);
153
- --meowdown-muted: light-dark(#52525b, #a1a1aa);
154
- --meowdown-accent: light-dark(#7c3aed, #c084fc);
155
- --meowdown-mark: light-dark(#a78bfa, #8b5cf6);
156
- --meowdown-highlight: light-dark(#fef08a, #854d0e);
157
- --meowdown-border: light-dark(#e4e4e7, #3f3f46);
158
- --meowdown-code-bg: light-dark(#f4f4f5, #18181b);
159
- --meowdown-table-header-bg: light-dark(#fafafa, #27272a);
160
- --meowdown-autocomplete-bg: light-dark(#fff, #18181b);
161
- --meowdown-autocomplete-highlight-bg: light-dark(#f4f4f5, #27272a);
162
- --meowdown-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
163
- --meowdown-node-outline: light-dark(#53f, #8870ff);
164
- --meowdown-node-selection: light-dark(#5533ff1a, #8870ff1f);
165
- --meowdown-selection: light-dark(#5533ff38, #8870ff4d);
166
- --meowdown-fold-halo: var(--meowdown-accent);
167
- --meowdown-gutter: 3.5rem;
152
+ @layer meowdown.theme {
153
+ :root {
154
+ --meowdown-text: light-dark(oklch(37% .012 286), oklch(87.1% .005 286));
155
+ --meowdown-heading: light-dark(oklch(21% .006 286), oklch(98.5% 0 0));
156
+ --meowdown-muted: light-dark(oklch(44.2% .015 286), oklch(71.2% .013 286));
157
+ --meowdown-accent: light-dark(oklch(64.6% .194 41), oklch(75.8% .159 56));
158
+ --meowdown-mark: var(--meowdown-muted);
159
+ --meowdown-highlight: light-dark(oklch(94.5% .124 102), oklch(47.6% .103 62));
160
+ --meowdown-border: light-dark(oklch(92% .004 286), oklch(37% .012 286));
161
+ --meowdown-blockquote-border: color-mix(in oklab, var(--meowdown-accent) 35%, transparent);
162
+ --meowdown-code-bg: light-dark(oklch(96.7% 0 0), oklch(21% .006 286));
163
+ --meowdown-image-loading-bg: light-dark(oklch(96.7% 0 0), oklch(27.4% .005 286));
164
+ --meowdown-image-radius: .5rem;
165
+ --meowdown-table-header-bg: light-dark(oklch(98.5% 0 0), oklch(27.4% .005 286));
166
+ --meowdown-popover-bg: light-dark(oklch(100% 0 0), oklch(21% .006 286));
167
+ --meowdown-popover-hover-bg: light-dark(oklch(96.7% 0 0), oklch(27.4% .005 286));
168
+ --meowdown-danger: light-dark(oklch(63.7% .208 25), oklch(71.1% .166 22));
169
+ --meowdown-placeholder: var(--meowdown-muted);
170
+ --meowdown-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
171
+ --meowdown-node-outline: light-dark(oklch(64.2% .178 46), oklch(74.1% .165 52));
172
+ --meowdown-node-selection: light-dark(oklch(69.3% .194 46 / .1), oklch(74.1% .165 52 / .12));
173
+ --meowdown-selection: light-dark(oklch(69.3% .194 46 / .22), oklch(74.1% .165 52 / .3));
174
+ --meowdown-bullet: var(--meowdown-muted);
175
+ --meowdown-bullet-radius: 2.5px;
176
+ --meowdown-bullet-halo-radius: 5.5px;
177
+ --meowdown-bullet-collapsed: var(--meowdown-accent);
178
+ --meowdown-gutter: 3.5rem;
179
+ }
168
180
  }
169
181
 
170
- .ProseMirror {
171
- box-sizing: border-box;
172
- color: var(--meowdown-text);
173
- caret-color: var(--meowdown-accent);
174
- -webkit-font-smoothing: antialiased;
175
- outline: none;
176
- font-size: 1.0625rem;
177
- line-height: 1.7;
178
- }
182
+ @layer meowdown.editor {
183
+ .ProseMirror {
184
+ box-sizing: border-box;
185
+ color: var(--meowdown-text);
186
+ caret-color: var(--meowdown-accent);
187
+ -webkit-font-smoothing: antialiased;
188
+ outline: none;
189
+ font-size: 1.0625rem;
190
+ line-height: 1.7;
191
+ }
179
192
 
180
- .meowdown-content {
181
- padding: 1.25rem var(--meowdown-gutter) 1.75rem;
182
- }
193
+ .meowdown-content {
194
+ padding-top: 1.25rem;
195
+ padding-right: var(--meowdown-gutter);
196
+ padding-bottom: 1.75rem;
197
+ padding-left: var(--meowdown-gutter);
198
+ }
183
199
 
184
- .ProseMirror > * + * {
185
- margin-top: .85em;
186
- }
200
+ .ProseMirror > * + * {
201
+ margin-top: .85em;
202
+ }
187
203
 
188
- .ProseMirror p {
189
- white-space: pre-wrap;
190
- }
204
+ .ProseMirror p {
205
+ white-space: pre-wrap;
206
+ }
191
207
 
192
- .ProseMirror h1, .ProseMirror h2, .ProseMirror h3, .ProseMirror h4, .ProseMirror h5, .ProseMirror h6 {
193
- letter-spacing: -.01em;
194
- color: var(--meowdown-heading);
195
- white-space: pre-wrap;
196
- font-weight: 600;
197
- line-height: 1.25;
198
- }
208
+ .ProseMirror h1, .ProseMirror h2, .ProseMirror h3, .ProseMirror h4, .ProseMirror h5, .ProseMirror h6 {
209
+ letter-spacing: -.01em;
210
+ color: var(--meowdown-heading);
211
+ white-space: pre-wrap;
212
+ font-weight: 600;
213
+ line-height: 1.25;
214
+ }
199
215
 
200
- .ProseMirror h1 {
201
- font-size: 1.75rem;
202
- }
216
+ .ProseMirror h1 {
217
+ font-size: 1.75rem;
218
+ }
203
219
 
204
- .ProseMirror h2 {
205
- font-size: 1.4rem;
206
- }
220
+ .ProseMirror h2 {
221
+ font-size: 1.4rem;
222
+ }
207
223
 
208
- .ProseMirror h3 {
209
- font-size: 1.2rem;
210
- }
224
+ .ProseMirror h3 {
225
+ font-size: 1.2rem;
226
+ }
211
227
 
212
- .ProseMirror h4 {
213
- font-size: 1.1rem;
214
- }
228
+ .ProseMirror h4 {
229
+ font-size: 1.1rem;
230
+ }
215
231
 
216
- .ProseMirror h5 {
217
- font-size: 1rem;
218
- }
232
+ .ProseMirror h5 {
233
+ font-size: 1rem;
234
+ }
219
235
 
220
- .ProseMirror h6 {
221
- font-size: .95rem;
222
- }
236
+ .ProseMirror h6 {
237
+ font-size: .95rem;
238
+ }
223
239
 
224
- .ProseMirror .md-link {
225
- color: var(--meowdown-accent);
226
- text-underline-offset: 2px;
227
- cursor: pointer;
228
- text-decoration: underline 1px;
229
- }
240
+ .ProseMirror .md-link {
241
+ color: var(--meowdown-accent);
242
+ text-underline-offset: 2px;
243
+ cursor: pointer;
244
+ text-decoration: underline 1px;
245
+ }
230
246
 
231
- .ProseMirror mark {
232
- background: var(--meowdown-highlight);
233
- color: inherit;
234
- -webkit-box-decoration-break: clone;
235
- box-decoration-break: clone;
236
- border-radius: 2px;
237
- padding: 0 1px;
238
- }
247
+ .ProseMirror mark {
248
+ background: var(--meowdown-highlight);
249
+ color: inherit;
250
+ -webkit-box-decoration-break: clone;
251
+ box-decoration-break: clone;
252
+ border-radius: 2px;
253
+ padding: 0 1px;
254
+ }
239
255
 
240
- .ProseMirror code {
241
- font-family: var(--meowdown-font-mono);
242
- background: color-mix(in oklab, var(--meowdown-accent) 10%, transparent);
243
- color: color-mix(in oklab, var(--meowdown-accent) 80%, var(--meowdown-heading));
244
- border-radius: .35rem;
245
- padding: .1em .35em;
246
- font-size: .9em;
247
- }
256
+ .ProseMirror code {
257
+ font-family: var(--meowdown-font-mono);
258
+ background: var(--meowdown-code-bg);
259
+ color: inherit;
260
+ border-radius: .35rem;
261
+ padding: .1em .35em;
262
+ font-size: .9em;
263
+ }
248
264
 
249
- .ProseMirror blockquote {
250
- border-left: 3px solid color-mix(in oklab, var(--meowdown-accent) 35%, transparent);
251
- color: var(--meowdown-muted);
252
- margin-left: 0;
253
- padding-left: 1rem;
254
- font-style: italic;
255
- }
265
+ .ProseMirror blockquote {
266
+ border-left: 3px solid var(--meowdown-blockquote-border);
267
+ color: var(--meowdown-muted);
268
+ margin-left: 0;
269
+ padding-left: 1rem;
270
+ }
256
271
 
257
- .ProseMirror ul, .ProseMirror ol {
258
- padding-left: 1.5rem;
259
- }
272
+ .ProseMirror ul, .ProseMirror ol {
273
+ padding-left: 1.5rem;
274
+ }
260
275
 
261
- .ProseMirror ul {
262
- list-style: outside;
263
- }
276
+ .ProseMirror ul {
277
+ list-style: outside;
278
+ }
264
279
 
265
- .ProseMirror ol {
266
- list-style: decimal;
267
- }
280
+ .ProseMirror ol {
281
+ list-style: decimal;
282
+ }
268
283
 
269
- .ProseMirror li {
270
- margin-top: .25em;
271
- }
284
+ .ProseMirror li {
285
+ margin-top: .25em;
286
+ }
272
287
 
273
- .ProseMirror .prosemirror-flat-list[data-list-kind="task"] {
274
- transition: opacity .2s;
288
+ .ProseMirror .prosemirror-flat-list[data-list-kind="bullet"] > .list-marker {
289
+ background: radial-gradient(circle at center,
290
+ var(--meowdown-bullet) 0 var(--meowdown-bullet-radius),
291
+ transparent var(--meowdown-bullet-radius));
292
+ -webkit-mask: none;
293
+ mask: none;
294
+ }
275
295
 
276
- &[data-list-checked] {
277
- opacity: .5;
296
+ .ProseMirror .prosemirror-flat-list[data-list-kind="task"] {
297
+ transition: opacity .2s;
278
298
 
279
- & .prosemirror-flat-list[data-list-kind="task"][data-list-checked] {
280
- opacity: 1;
299
+ &[data-list-checked] {
300
+ opacity: .5;
301
+
302
+ & .prosemirror-flat-list[data-list-kind="task"][data-list-checked] {
303
+ opacity: 1;
304
+ }
281
305
  }
282
- }
283
306
 
284
- & > .list-marker {
285
- transition: transform .12s;
307
+ & > .list-marker {
308
+ transition: transform .12s;
286
309
 
287
- &:hover {
288
- transform: scale(1.1);
289
- }
310
+ &:hover {
311
+ transform: scale(1.1);
312
+ }
290
313
 
291
- & input[type="checkbox"] {
292
- -webkit-appearance: none;
293
- appearance: none;
294
- box-sizing: border-box;
295
- border: 1.5px solid var(--meowdown-border);
296
- background: center / 100% 100% no-repeat;
297
- border-radius: .25rem;
298
- width: .95rem;
299
- height: .95rem;
300
- transition: background-color .15s, border-color .15s;
301
-
302
- &:checked {
303
- background-color: var(--meowdown-accent);
304
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
305
- border-color: #0000;
314
+ & input[type="checkbox"] {
315
+ -webkit-appearance: none;
316
+ appearance: none;
317
+ box-sizing: border-box;
318
+ border: 1px solid var(--meowdown-muted);
319
+ background: center / 100% 100% no-repeat;
320
+ border-radius: .25rem;
321
+ width: .95rem;
322
+ height: .95rem;
323
+ transition: background-color .15s, border-color .15s;
324
+
325
+ &:checked {
326
+ background-color: var(--meowdown-accent);
327
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
328
+ border-color: #0000;
329
+ }
306
330
  }
307
331
  }
308
- }
309
332
 
310
- &[data-list-marker="+"] > .list-marker input[type="checkbox"] {
311
- border-radius: 100rem;
312
- width: 1.05rem;
313
- height: 1.05rem;
333
+ &[data-list-marker="+"] > .list-marker input[type="checkbox"] {
334
+ border-radius: 100rem;
335
+ width: 1.05rem;
336
+ height: 1.05rem;
337
+ }
314
338
  }
315
- }
316
339
 
317
- .ProseMirror .prosemirror-flat-list[data-list-kind="bullet"] {
318
- &[data-list-collapsable] > .list-marker {
319
- cursor: pointer;
320
- }
340
+ .ProseMirror .prosemirror-flat-list[data-list-kind="bullet"] {
341
+ &[data-list-collapsable] > .list-marker {
342
+ cursor: pointer;
343
+ }
321
344
 
322
- &[data-list-collapsable]:before {
323
- content: "";
324
- inset-inline-start: 0;
325
- background: radial-gradient(circle at center,
326
- var(--meowdown-fold-halo) 0 .45rem,
327
- transparent .45rem);
328
- opacity: 0;
329
- pointer-events: none;
330
- width: 1lh;
331
- height: 1lh;
332
- transition: opacity .12s;
333
- position: absolute;
334
- top: 0;
335
- }
345
+ &[data-list-collapsable] > .list-marker:hover {
346
+ background: radial-gradient(circle at center,
347
+ var(--meowdown-bullet) 0 var(--meowdown-bullet-radius),
348
+ color-mix(in oklab, var(--meowdown-bullet-collapsed) 20%, transparent)
349
+ var(--meowdown-bullet-radius) var(--meowdown-bullet-halo-radius),
350
+ transparent var(--meowdown-bullet-halo-radius));
351
+ }
336
352
 
337
- &[data-list-collapsable]:has( > .list-marker:hover):before {
338
- opacity: .2;
339
- }
353
+ &[data-list-collapsable][data-list-collapsed] > .list-marker {
354
+ background: radial-gradient(circle at center,
355
+ var(--meowdown-bullet-collapsed) 0 var(--meowdown-bullet-radius),
356
+ color-mix(in oklab, var(--meowdown-bullet-collapsed) 35%, transparent)
357
+ var(--meowdown-bullet-radius) var(--meowdown-bullet-halo-radius),
358
+ transparent var(--meowdown-bullet-halo-radius));
359
+ }
340
360
 
341
- &[data-list-collapsable][data-list-collapsed]:before {
342
- opacity: .35;
361
+ &[data-list-collapsable][data-list-collapsed] > .list-content > :nth-child(n+2) {
362
+ display: none;
363
+ }
343
364
  }
344
365
 
345
- &[data-list-collapsable][data-list-collapsed]:has( > .list-marker:hover):before {
346
- opacity: .45;
366
+ .ProseMirror pre {
367
+ background: var(--meowdown-code-bg);
368
+ font-family: var(--meowdown-font-mono);
369
+ border-radius: .6rem;
370
+ padding: .9rem 1rem;
371
+ font-size: .9em;
372
+ line-height: 1.5;
373
+ overflow-x: auto;
347
374
  }
348
375
 
349
- &[data-list-collapsable][data-list-collapsed] > .list-content > :nth-child(n+2) {
350
- display: none;
376
+ .ProseMirror pre code {
377
+ color: inherit;
378
+ background: none;
379
+ padding: 0;
351
380
  }
352
- }
353
381
 
354
- .ProseMirror pre {
355
- background: var(--meowdown-code-bg);
356
- font-family: var(--meowdown-font-mono);
357
- border-radius: .6rem;
358
- padding: .9rem 1rem;
359
- font-size: .9em;
360
- line-height: 1.5;
361
- overflow-x: auto;
362
- }
363
-
364
- .ProseMirror pre code {
365
- color: inherit;
366
- background: none;
367
- padding: 0;
368
- }
369
-
370
- .ProseMirror pre code .tok-keyword {
371
- color: light-dark(#cf222e, #ff7b72);
372
- }
373
-
374
- .ProseMirror pre code .tok-comment {
375
- color: light-dark(#6e7781, #8b949e);
376
- font-style: italic;
377
- }
378
-
379
- .ProseMirror pre code .tok-string, .ProseMirror pre code .tok-url {
380
- color: light-dark(#0a3069, #a5d6ff);
381
- }
382
+ .ProseMirror pre code .tok-keyword {
383
+ color: light-dark(#cf222e, #ff7b72);
384
+ }
382
385
 
383
- .ProseMirror pre code .tok-number, .ProseMirror pre code .tok-bool, .ProseMirror pre code .tok-atom, .ProseMirror pre code .tok-literal {
384
- color: light-dark(#0550ae, #79c0ff);
385
- }
386
+ .ProseMirror pre code .tok-comment {
387
+ color: light-dark(#6e7781, #8b949e);
388
+ font-style: italic;
389
+ }
386
390
 
387
- .ProseMirror pre code .tok-className, .ProseMirror pre code .tok-typeName, .ProseMirror pre code .tok-namespace {
388
- color: light-dark(#953800, #ffa657);
389
- }
391
+ .ProseMirror pre code .tok-string, .ProseMirror pre code .tok-url {
392
+ color: light-dark(#0a3069, #a5d6ff);
393
+ }
390
394
 
391
- .ProseMirror pre code .tok-definition {
392
- color: light-dark(#8250df, #d2a8ff);
393
- }
395
+ .ProseMirror pre code .tok-number, .ProseMirror pre code .tok-bool, .ProseMirror pre code .tok-atom, .ProseMirror pre code .tok-literal {
396
+ color: light-dark(#0550ae, #79c0ff);
397
+ }
394
398
 
395
- .ProseMirror pre code .tok-macroName, .ProseMirror pre code .tok-meta, .ProseMirror pre code .tok-inserted {
396
- color: light-dark(#116329, #7ee787);
397
- }
399
+ .ProseMirror pre code .tok-className, .ProseMirror pre code .tok-typeName, .ProseMirror pre code .tok-namespace {
400
+ color: light-dark(#953800, #ffa657);
401
+ }
398
402
 
399
- .ProseMirror pre code .tok-invalid, .ProseMirror pre code .tok-deleted {
400
- color: light-dark(#82071e, #ffa198);
401
- }
403
+ .ProseMirror pre code .tok-definition {
404
+ color: light-dark(#8250df, #d2a8ff);
405
+ }
402
406
 
403
- .ProseMirror pre code .tok-heading {
404
- color: light-dark(#0550ae, #79c0ff);
405
- font-weight: 600;
406
- }
407
+ .ProseMirror pre code .tok-macroName, .ProseMirror pre code .tok-meta, .ProseMirror pre code .tok-inserted {
408
+ color: light-dark(#116329, #7ee787);
409
+ }
407
410
 
408
- .ProseMirror pre code .tok-strong {
409
- font-weight: 600;
410
- }
411
+ .ProseMirror pre code .tok-invalid, .ProseMirror pre code .tok-deleted {
412
+ color: light-dark(#82071e, #ffa198);
413
+ }
411
414
 
412
- .ProseMirror pre code .tok-emphasis {
413
- font-style: italic;
414
- }
415
+ .ProseMirror pre code .tok-heading {
416
+ color: light-dark(#0550ae, #79c0ff);
417
+ font-weight: 600;
418
+ }
415
419
 
416
- .ProseMirror pre code .tok-link {
417
- text-decoration: underline;
418
- }
420
+ .ProseMirror pre code .tok-strong {
421
+ font-weight: 600;
422
+ }
419
423
 
420
- .ProseMirror hr {
421
- border: none;
422
- border-top: 1px solid var(--meowdown-border);
423
- margin: 1.5em 0;
424
- }
424
+ .ProseMirror pre code .tok-emphasis {
425
+ font-style: italic;
426
+ }
425
427
 
426
- .ProseMirror table {
427
- border-collapse: collapse;
428
- table-layout: fixed;
429
- width: 100%;
430
- overflow: hidden;
431
- }
428
+ .ProseMirror pre code .tok-link {
429
+ text-decoration: underline;
430
+ }
432
431
 
433
- .ProseMirror td, .ProseMirror th {
434
- box-sizing: border-box;
435
- border: 1px solid var(--meowdown-border);
436
- vertical-align: top;
437
- text-align: left;
438
- padding: .4rem .75rem;
439
- }
432
+ .ProseMirror hr {
433
+ border: none;
434
+ border-top: 1px solid var(--meowdown-border);
435
+ margin: 1.5em 0;
436
+ }
440
437
 
441
- .ProseMirror th {
442
- color: var(--meowdown-heading);
443
- background: var(--meowdown-table-header-bg);
444
- font-weight: 600;
445
- }
438
+ .ProseMirror table {
439
+ border-collapse: collapse;
440
+ table-layout: fixed;
441
+ width: 100%;
442
+ overflow: hidden;
443
+ }
446
444
 
447
- .ProseMirror table.ProseMirror-selectednode td, .ProseMirror table.ProseMirror-selectednode th {
448
- border-color: var(--meowdown-node-outline);
449
- }
445
+ .ProseMirror td, .ProseMirror th {
446
+ box-sizing: border-box;
447
+ border: 1px solid var(--meowdown-border);
448
+ vertical-align: top;
449
+ text-align: left;
450
+ padding: .4rem .75rem;
451
+ }
450
452
 
451
- .ProseMirror .selectedCell {
452
- border: 1px double var(--meowdown-node-outline);
453
- background: var(--meowdown-node-selection);
454
- caret-color: #0000;
455
- }
453
+ .ProseMirror th {
454
+ color: var(--meowdown-heading);
455
+ background: var(--meowdown-table-header-bg);
456
+ font-weight: 600;
457
+ }
456
458
 
457
- .ProseMirror ::selection, .ProseMirror .prosekit-virtual-selection {
458
- background: var(--meowdown-selection);
459
- }
459
+ .ProseMirror table.ProseMirror-selectednode td, .ProseMirror table.ProseMirror-selectednode th {
460
+ border-color: var(--meowdown-node-outline);
461
+ }
460
462
 
461
- .ProseMirror.ProseMirror-hideselection ::selection {
462
- --meowdown-selection: transparent;
463
- caret-color: #0000;
464
- }
463
+ .ProseMirror .selectedCell {
464
+ border: 1px double var(--meowdown-node-outline);
465
+ background: var(--meowdown-node-selection);
466
+ caret-color: #0000;
467
+ }
465
468
 
466
- .ProseMirror .ProseMirror-selectednode {
467
- outline: 1px solid var(--meowdown-node-outline);
468
- background: var(--meowdown-node-selection);
469
- border-radius: 2px;
470
- }
469
+ .ProseMirror ::selection, .ProseMirror .prosekit-virtual-selection {
470
+ background: var(--meowdown-selection);
471
+ }
471
472
 
472
- .ProseMirror pre.ProseMirror-selectednode {
473
- border-radius: .6rem;
474
- }
473
+ .ProseMirror.ProseMirror-hideselection ::selection {
474
+ caret-color: #0000;
475
+ background: none;
476
+ }
475
477
 
476
- .ProseMirror.prosekit-dragging {
477
- --meowdown-node-selection: transparent;
478
- }
478
+ .ProseMirror .ProseMirror-selectednode {
479
+ outline: 1px solid var(--meowdown-node-outline);
480
+ background: var(--meowdown-node-selection);
481
+ border-radius: 2px;
482
+ }
479
483
 
480
- .ProseMirror .md-tag {
481
- background: color-mix(in oklab, var(--meowdown-accent) 10%, transparent);
482
- color: color-mix(in oklab, var(--meowdown-accent) 80%, var(--meowdown-heading));
483
- cursor: pointer;
484
- border-radius: 6px;
485
- padding: 2px 6px;
486
- }
484
+ .ProseMirror pre.ProseMirror-selectednode {
485
+ border-radius: .6rem;
486
+ }
487
487
 
488
- .ProseMirror .md-embed-youtube {
489
- aspect-ratio: 16 / 9;
490
- border-radius: var(--meowdown-image-radius, .5rem);
491
- border: 0;
492
- width: 100%;
493
- display: block;
494
- }
488
+ .ProseMirror.prosekit-dragging .ProseMirror-selectednode, .ProseMirror.prosekit-dragging .selectedCell {
489
+ background: none;
490
+ }
495
491
 
496
- .ProseMirror .md-embed-tweet {
497
- border: 0;
498
- width: 100%;
499
- max-width: 550px;
500
- display: block;
501
- }
492
+ .ProseMirror .md-tag {
493
+ background: color-mix(in oklab, var(--meowdown-accent) 10%, transparent);
494
+ color: color-mix(in oklab, var(--meowdown-accent) 80%, var(--meowdown-heading));
495
+ cursor: pointer;
496
+ border-radius: 6px;
497
+ padding: 2px 6px;
498
+ }
502
499
 
503
- .ProseMirror .prosekit-placeholder:before {
504
- content: attr(data-placeholder);
505
- float: left;
506
- pointer-events: none;
507
- height: 0;
508
- color: var(--meowdown-placeholder, var(--meowdown-muted));
509
- }
500
+ .ProseMirror .md-embed-youtube {
501
+ aspect-ratio: 16 / 9;
502
+ border-radius: var(--meowdown-image-radius, .5rem);
503
+ border: 0;
504
+ width: 100%;
505
+ display: block;
506
+ }
510
507
 
511
- .ProseMirror .md-mark {
512
- color: var(--meowdown-mark);
513
- opacity: .7;
514
- }
508
+ .ProseMirror .md-embed-tweet {
509
+ border: 0;
510
+ width: 100%;
511
+ max-width: 550px;
512
+ display: block;
513
+ }
515
514
 
516
- .ProseMirror .md-link-uri, .ProseMirror .md-link-title {
517
- color: var(--meowdown-accent);
518
- text-underline-offset: 2px;
519
- opacity: .7;
520
- text-decoration: underline 1px;
521
- }
515
+ .ProseMirror .prosekit-placeholder:before {
516
+ content: attr(data-placeholder);
517
+ float: left;
518
+ pointer-events: none;
519
+ height: 0;
520
+ color: var(--meowdown-placeholder, var(--meowdown-muted));
521
+ }
522
522
 
523
- .ProseMirror .md-pack {
524
- display: contents;
525
- }
523
+ .ProseMirror .md-mark {
524
+ color: var(--meowdown-mark);
525
+ opacity: .7;
526
+ }
526
527
 
527
- .ProseMirror[data-mark-mode="hide"] {
528
- & .md-mark, & .md-link-uri, & .md-link-title {
529
- display: none;
528
+ .ProseMirror .md-link-uri, .ProseMirror .md-link-title {
529
+ color: var(--meowdown-accent);
530
+ text-underline-offset: 2px;
531
+ opacity: .7;
532
+ text-decoration: underline 1px;
530
533
  }
531
- }
532
534
 
533
- .ProseMirror[data-mark-mode="focus"] {
534
- & .md-mark, & .md-link-uri, & .md-link-title {
535
- vertical-align: bottom;
536
- letter-spacing: -2em;
537
- display: inline-block;
538
- overflow: hidden;
535
+ .ProseMirror .md-pack {
536
+ display: contents;
537
+ }
539
538
 
540
- &:has(.show) {
541
- letter-spacing: 0;
539
+ .ProseMirror[data-mark-mode="hide"] {
540
+ & .md-mark, & .md-link-uri, & .md-link-title {
541
+ display: none;
542
542
  }
543
543
  }
544
- }
545
544
 
546
- .ProseMirror {
547
- & .md-atom-view {
548
- vertical-align: bottom;
549
- display: inline-block;
550
- }
545
+ .ProseMirror[data-mark-mode="focus"] {
546
+ & .md-mark, & .md-link-uri, & .md-link-title {
547
+ vertical-align: bottom;
548
+ letter-spacing: -2em;
549
+ display: inline-block;
550
+ overflow: hidden;
551
551
 
552
- & .md-atom-view-preview {
553
- vertical-align: bottom;
554
- -webkit-user-select: none;
555
- user-select: none;
556
- border-radius: 6px;
557
- display: inline-block;
558
- overflow: hidden;
552
+ &:has(.show) {
553
+ letter-spacing: 0;
554
+ }
555
+ }
559
556
  }
560
557
 
561
- & .md-atom-view:has(.md-atom-selected) {
558
+ .ProseMirror {
559
+ & .md-atom-view {
560
+ vertical-align: bottom;
561
+ display: inline-block;
562
+ }
563
+
562
564
  & .md-atom-view-preview {
563
- outline: 2px solid var(--meowdown-node-outline);
564
- background: var(--meowdown-selection);
565
+ vertical-align: bottom;
566
+ -webkit-user-select: none;
567
+ user-select: none;
568
+ border-radius: 6px;
569
+ display: inline-block;
570
+ overflow: hidden;
565
571
  }
566
572
 
567
- & ::selection {
573
+ & .md-atom-view:has(.md-atom-selected) {
574
+ & .md-atom-view-preview {
575
+ outline: 2px solid var(--meowdown-node-outline);
576
+ background: var(--meowdown-selection);
577
+ }
578
+
579
+ & ::selection {
580
+ background-color: #0000;
581
+ }
582
+ }
583
+
584
+ & .md-atom-view-content {
585
+ letter-spacing: -2em;
586
+ box-sizing: border-box;
587
+ color: #0000;
568
588
  background-color: #0000;
589
+ align-items: end;
590
+ width: 2px;
591
+ margin-left: 2px;
592
+ margin-right: -4px;
593
+ display: inline-flex;
594
+ overflow: visible;
569
595
  }
570
596
  }
571
597
 
572
- & .md-atom-view-content {
573
- letter-spacing: -2em;
574
- box-sizing: border-box;
575
- color: #0000;
576
- background-color: #0000;
577
- align-items: end;
578
- width: 2px;
579
- margin-left: 2px;
580
- margin-right: -4px;
581
- display: inline-flex;
582
- overflow: visible;
583
- }
584
- }
598
+ .ProseMirror {
599
+ & .md-image-view {
600
+ max-width: 100%;
601
+ margin-left: 2px;
602
+ margin-right: 2px;
603
+ }
585
604
 
586
- .ProseMirror {
587
- & .md-image-view {
588
- max-width: 100%;
589
- margin-left: 2px;
590
- margin-right: 2px;
591
- }
605
+ & .md-image-view-preview {
606
+ outline-offset: 2px;
607
+ border-radius: 6px;
608
+ max-width: 100%;
609
+ display: inline-block;
610
+ }
592
611
 
593
- & .md-image-view-preview {
594
- outline-offset: 2px;
595
- border-radius: 6px;
596
- max-width: 100%;
597
- display: inline-flex;
598
- }
612
+ & .md-image-resizable {
613
+ vertical-align: bottom;
614
+ isolation: isolate;
615
+ min-width: 2.5rem;
616
+ max-width: 100%;
617
+ min-height: 2.5rem;
618
+ display: inline-block;
619
+ position: relative;
620
+ }
599
621
 
600
- & .md-image-resizable {
601
- isolation: isolate;
602
- min-width: 2.5rem;
603
- max-width: 100%;
604
- min-height: 2.5rem;
605
- display: inline-block;
606
- position: relative;
607
- }
622
+ & .md-image-resizable[data-loading] {
623
+ background: var(--meowdown-image-loading-bg);
624
+ border-radius: var(--meowdown-image-radius, .5rem);
625
+ }
608
626
 
609
- & .md-image-resizable img {
610
- object-fit: contain;
611
- border-radius: var(--meowdown-image-radius, .5rem);
612
- width: 100%;
613
- height: 100%;
614
- display: block;
615
- }
627
+ & .md-image-resizable img {
628
+ object-fit: contain;
629
+ border-radius: var(--meowdown-image-radius, .5rem);
630
+ width: 100%;
631
+ height: 100%;
632
+ display: block;
633
+ }
616
634
 
617
- & .md-image-resize-handle {
618
- box-sizing: border-box;
619
- mix-blend-mode: exclusion;
620
- cursor: nwse-resize;
621
- pointer-events: none;
622
- touch-action: none;
623
- opacity: 0;
624
- transform-origin: 100% 100%;
625
- border-bottom: 3px solid #fff;
626
- border-right: 3px solid #fff;
627
- border-bottom-right-radius: 5px;
628
- width: 14px;
629
- height: 14px;
630
- transition: opacity .12s, transform .12s;
631
- position: absolute;
632
- bottom: 4px;
633
- right: 4px;
634
- transform: scale(.8);
635
- }
635
+ & .md-image-resize-handle {
636
+ box-sizing: border-box;
637
+ mix-blend-mode: exclusion;
638
+ cursor: nwse-resize;
639
+ pointer-events: none;
640
+ touch-action: none;
641
+ opacity: 0;
642
+ transform-origin: 100% 100%;
643
+ border-bottom: 3px solid #fff;
644
+ border-right: 3px solid #fff;
645
+ border-bottom-right-radius: 5px;
646
+ width: 14px;
647
+ height: 14px;
648
+ transition: opacity .12s, transform .12s;
649
+ position: absolute;
650
+ bottom: 4px;
651
+ right: 4px;
652
+ transform: scale(.8);
653
+ }
636
654
 
637
- & .md-image-resizable:hover .md-image-resize-handle, & .md-image-resizable[data-resizing] .md-image-resize-handle {
638
- opacity: 1;
639
- pointer-events: auto;
640
- transform: scale(1);
655
+ & .md-image-resizable:hover .md-image-resize-handle, & .md-image-resizable[data-resizing] .md-image-resize-handle {
656
+ opacity: 1;
657
+ pointer-events: auto;
658
+ transform: scale(1);
659
+ }
641
660
  }
642
- }
643
661
 
644
- .ProseMirror {
645
- & .md-wikilink-view-label {
646
- background: color-mix(in oklab, var(--meowdown-accent) 10%, transparent);
647
- color: color-mix(in oklab, var(--meowdown-accent) 80%, var(--meowdown-heading));
648
- text-underline-offset: 2px;
649
- cursor: pointer;
650
- border-radius: 6px;
651
- padding: 2px 5px;
652
- text-decoration-line: underline;
653
- text-decoration-style: dashed;
654
- text-decoration-thickness: 1px;
655
- overflow: hidden;
656
- }
662
+ .ProseMirror {
663
+ & .md-wikilink-view-label {
664
+ background: color-mix(in oklab, var(--meowdown-accent) 10%, transparent);
665
+ color: color-mix(in oklab, var(--meowdown-accent) 80%, var(--meowdown-heading));
666
+ text-underline-offset: 2px;
667
+ cursor: pointer;
668
+ border-radius: 6px;
669
+ padding: 2px 5px;
670
+ text-decoration-line: underline;
671
+ text-decoration-style: dashed;
672
+ text-decoration-thickness: 1px;
673
+ overflow: hidden;
674
+ }
657
675
 
658
- & .md-wikilink-view:has(.md-atom-selected) .md-wikilink-view-label {
659
- background-color: #0000;
660
- outline-color: #0000;
676
+ & .md-wikilink-view:has(.md-atom-selected) .md-wikilink-view-label {
677
+ background-color: #0000;
678
+ outline-color: #0000;
679
+ }
661
680
  }
662
681
  }