@open-wysiwyg-editor/react 1.0.1 → 1.0.2
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/dist/content.css +396 -273
- package/dist/content.min.css +1 -1
- package/dist/style.css +1276 -1078
- package/dist/style.min.css +1 -1
- package/package.json +2 -2
package/dist/content.css
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
/*! open-wysiwyg-editor | MIT License */
|
|
2
2
|
/*
|
|
3
|
-
* Design tokens
|
|
4
|
-
*
|
|
3
|
+
* Design tokens: the editor's styling API. The defaults below are written as --owe-<name>, but the
|
|
4
|
+
* build renames each declaration to a private --owe-d-<name> and every use to
|
|
5
|
+
* var(--owe-<name>, var(--owe-d-<name>)) (scripts/build-css.mjs). So the editor never declares a public
|
|
6
|
+
* --owe-* property itself, and a token you set always wins: from ui.brand / ui.tokens / setTheme(),
|
|
7
|
+
* the brand and theme attributes, or CSS on .owe, a wrapper or :root, in any cascade layer.
|
|
8
|
+
* Host CSS can't restyle the editor otherwise (see base.css).
|
|
5
9
|
* Contrast: text >= 4.5:1, borders/focus/states >= 3:1 against --owe-bg (WCAG 1.4.3 / 1.4.11).
|
|
6
10
|
*
|
|
7
11
|
* One-color branding. Set --owe-brand (on .owe, a wrapper or :root) and the whole UI follows, in
|
|
@@ -26,7 +30,7 @@
|
|
|
26
30
|
* --owe-toolbar-bg (--owe-chrome) --owe-toolbar-border (--owe-border-subtle) toolbar, find bar, status bar
|
|
27
31
|
* --owe-editor-border (--owe-border-subtle) --owe-editor-radius (--owe-radius) the card
|
|
28
32
|
*
|
|
29
|
-
* Other tokens (
|
|
33
|
+
* Other tokens (set them anywhere, like the ones above):
|
|
30
34
|
* --owe-radius card radius (24px) --owe-radius-sm inner controls (10px)
|
|
31
35
|
* --owe-radius-md menus (12px) --owe-radius-lg dialogs (16px)
|
|
32
36
|
* --owe-btn-size toolbar button (40px) --owe-pad-x/-y editing-area padding
|
|
@@ -36,302 +40,421 @@
|
|
|
36
40
|
* --owe-icon toolbar icon color --owe-backdrop dialog backdrop
|
|
37
41
|
* Set --owe-font (e.g. "Almarai", system-ui) to change the typeface; no web fonts are bundled.
|
|
38
42
|
* The JS options `ui.brand` and `ui.tokens` and the <owe-editor brand> attribute set these
|
|
39
|
-
* properties on the editor root
|
|
43
|
+
* properties inline on the editor root.
|
|
40
44
|
*/
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
45
|
+
.owe:not(.\#):not(.\#),
|
|
46
|
+
.owe-content-root:not(.\#):not(.\#) {
|
|
47
|
+
--owe-d-font:
|
|
48
|
+
system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", "Noto Sans", Tahoma,
|
|
49
|
+
sans-serif;
|
|
50
|
+
--owe-d-font-mono:
|
|
51
|
+
ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
|
|
52
|
+
--owe-d-font-size: 1rem;
|
|
53
|
+
--owe-d-line-height: 1.65;
|
|
54
|
+
--owe-d-radius: 24px;
|
|
55
|
+
--owe-d-radius-sm: 10px;
|
|
56
|
+
--owe-d-radius-md: 12px;
|
|
57
|
+
--owe-d-radius-lg: 16px;
|
|
58
|
+
--owe-d-space: 8px;
|
|
59
|
+
--owe-d-target: 32px; /* >= 24px (WCAG 2.5.8); 32px is comfortable */
|
|
60
|
+
--owe-d-btn-size: 40px;
|
|
61
|
+
/* cqi: a share of the editor's own width (its toolbar and editing area are size containers), so the
|
|
62
|
+
padding follows the editor, also when it sits in a narrow column of a wide page. */
|
|
63
|
+
--owe-d-pad-x: clamp(12px, 4cqi, 32px);
|
|
64
|
+
--owe-d-pad-y: clamp(16px, 5cqi, 28px);
|
|
57
65
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
66
|
+
--owe-d-bg: #ffffff;
|
|
67
|
+
--owe-d-chrome: #fafbfc;
|
|
68
|
+
--owe-d-surface: #f4f6f8;
|
|
69
|
+
--owe-d-surface-2: #f1f3f5;
|
|
70
|
+
--owe-d-field-bg: #ffffff;
|
|
71
|
+
--owe-d-text: #101112;
|
|
72
|
+
--owe-d-body: #1b1f24;
|
|
73
|
+
--owe-d-text-2: #3d434a;
|
|
74
|
+
--owe-d-muted: #54595f; /* 7:1 on white */
|
|
75
|
+
--owe-d-icon: #3a3f45;
|
|
76
|
+
--owe-d-border: #8a929a; /* 3.2:1 on white */
|
|
77
|
+
--owe-d-border-subtle: #e3e6ea;
|
|
78
|
+
--owe-d-popup-border: #d5d9de;
|
|
79
|
+
--owe-d-danger: #b3261e;
|
|
80
|
+
--owe-d-warning: #8a5300;
|
|
81
|
+
--owe-d-success: #146c2e;
|
|
82
|
+
--owe-d-code-bg: #f4f6f8;
|
|
83
|
+
--owe-d-mark: #fff2a8;
|
|
84
|
+
--owe-d-shadow: 0 16px 40px rgb(16 17 18 / 0.16), 0 2px 8px rgb(16 17 18 / 0.08);
|
|
85
|
+
--owe-d-backdrop: rgb(16 17 18 / 0.45);
|
|
86
|
+
--owe-d-z-popover: 1000;
|
|
79
87
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
88
|
+
/* Brand-derived. --owe-brand / -brand-2 / -on-brand have no declaration here, so they can be set
|
|
89
|
+
on any ancestor; the fallbacks are the defaults. */
|
|
90
|
+
--owe-d-gradient: linear-gradient(90deg, var(--owe-brand, #0066ff), var(--owe-brand-2, #00b8ff));
|
|
91
|
+
--owe-d-on-accent: var(--owe-on-brand, #ffffff);
|
|
92
|
+
--owe-d-primary: var(--owe-brand, #0066ff); /* white on #0066ff: 4.8:1 */
|
|
93
|
+
--owe-d-primary-hover: color-mix(in oklab, var(--owe-primary, var(--owe-d-primary)) 85%, black);
|
|
94
|
+
--owe-d-accent: color-mix(
|
|
95
|
+
in oklab,
|
|
96
|
+
var(--owe-brand, #0066ff) 70%,
|
|
97
|
+
black
|
|
98
|
+
); /* 9.8:1 on white for #0066ff */
|
|
99
|
+
--owe-d-accent-soft: color-mix(in oklab, var(--owe-brand, #0066ff) 18%, var(--owe-bg, var(--owe-d-bg)));
|
|
100
|
+
--owe-d-focus: var(--owe-accent, var(--owe-d-accent));
|
|
101
|
+
--owe-d-caret: var(--owe-accent, var(--owe-d-accent));
|
|
102
|
+
--owe-d-selection: color-mix(in oklab, var(--owe-brand, #0066ff) 22%, transparent);
|
|
91
103
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
/* Dark values are listed twice (OS preference, then an explicit data-theme="dark"). Brand-derived
|
|
96
|
-
tokens that read --owe-bg or --owe-accent (accent-soft, focus, caret, hover) follow on their own. */
|
|
97
|
-
@media (prefers-color-scheme: dark) {
|
|
98
|
-
.owe:not([data-theme="light"]),
|
|
99
|
-
.owe-content-root:not([data-theme="light"]) {
|
|
100
|
-
--owe-bg: #17191b;
|
|
101
|
-
--owe-chrome: #131517;
|
|
102
|
-
--owe-surface: #1e2124;
|
|
103
|
-
--owe-surface-2: #25282b;
|
|
104
|
-
--owe-field-bg: #101214;
|
|
105
|
-
--owe-text: #ffffff;
|
|
106
|
-
--owe-body: #dcdedf;
|
|
107
|
-
--owe-text-2: #c3c7cb;
|
|
108
|
-
--owe-muted: #a1a7ad;
|
|
109
|
-
--owe-icon: #d2d4d5;
|
|
110
|
-
--owe-border: #6b7279;
|
|
111
|
-
--owe-border-subtle: #25282b;
|
|
112
|
-
--owe-popup-border: #33383d;
|
|
113
|
-
--owe-accent: color-mix(in oklab, var(--owe-brand, #0066ff) 60%, white); /* 7.5:1 on the dark card */
|
|
114
|
-
--owe-danger: #f2b8b5;
|
|
115
|
-
--owe-warning: #f6c66b;
|
|
116
|
-
--owe-success: #8bd6a0;
|
|
117
|
-
--owe-selection: color-mix(in oklab, var(--owe-brand, #0066ff) 45%, transparent);
|
|
118
|
-
--owe-code-bg: #0f1112;
|
|
119
|
-
--owe-mark: #6b4e00; /* deep amber: body text stays 5.7:1 */
|
|
120
|
-
--owe-shadow: 0 16px 40px rgb(0 0 0 / 0.55), 0 2px 8px rgb(0 0 0 / 0.4);
|
|
121
|
-
--owe-backdrop: rgb(4 5 16 / 0.65);
|
|
122
|
-
color-scheme: dark;
|
|
123
|
-
}
|
|
124
|
-
}
|
|
104
|
+
color-scheme: light;
|
|
105
|
+
}
|
|
125
106
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
--owe-
|
|
132
|
-
--owe-
|
|
133
|
-
--owe-
|
|
134
|
-
--owe-
|
|
135
|
-
--owe-
|
|
136
|
-
--owe-
|
|
137
|
-
--owe-
|
|
138
|
-
--owe-
|
|
139
|
-
--owe-
|
|
140
|
-
--owe-
|
|
141
|
-
--owe-
|
|
142
|
-
--owe-
|
|
143
|
-
--owe-
|
|
144
|
-
--owe-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
--owe-
|
|
107
|
+
/* Dark values are listed twice (OS preference, then an explicit data-theme="dark"). Brand-derived
|
|
108
|
+
tokens that read --owe-bg or --owe-accent (accent-soft, focus, caret, hover) follow on their own. */
|
|
109
|
+
@media (prefers-color-scheme: dark) {
|
|
110
|
+
.owe:not([data-theme="light"]):not(.\#):not(.\#),
|
|
111
|
+
.owe-content-root:not([data-theme="light"]):not(.\#):not(.\#) {
|
|
112
|
+
--owe-d-bg: #17191b;
|
|
113
|
+
--owe-d-chrome: #131517;
|
|
114
|
+
--owe-d-surface: #1e2124;
|
|
115
|
+
--owe-d-surface-2: #25282b;
|
|
116
|
+
--owe-d-field-bg: #101214;
|
|
117
|
+
--owe-d-text: #ffffff;
|
|
118
|
+
--owe-d-body: #dcdedf;
|
|
119
|
+
--owe-d-text-2: #c3c7cb;
|
|
120
|
+
--owe-d-muted: #a1a7ad;
|
|
121
|
+
--owe-d-icon: #d2d4d5;
|
|
122
|
+
--owe-d-border: #6b7279;
|
|
123
|
+
--owe-d-border-subtle: #25282b;
|
|
124
|
+
--owe-d-popup-border: #33383d;
|
|
125
|
+
--owe-d-accent: color-mix(
|
|
126
|
+
in oklab,
|
|
127
|
+
var(--owe-brand, #0066ff) 60%,
|
|
128
|
+
white
|
|
129
|
+
); /* 7.5:1 on the dark card */
|
|
130
|
+
--owe-d-danger: #f2b8b5;
|
|
131
|
+
--owe-d-warning: #f6c66b;
|
|
132
|
+
--owe-d-success: #8bd6a0;
|
|
133
|
+
--owe-d-selection: color-mix(in oklab, var(--owe-brand, #0066ff) 45%, transparent);
|
|
134
|
+
--owe-d-code-bg: #0f1112;
|
|
135
|
+
--owe-d-mark: #6b4e00; /* deep amber: body text stays 5.7:1 */
|
|
136
|
+
--owe-d-shadow: 0 16px 40px rgb(0 0 0 / 0.55), 0 2px 8px rgb(0 0 0 / 0.4);
|
|
137
|
+
--owe-d-backdrop: rgb(4 5 16 / 0.65);
|
|
150
138
|
color-scheme: dark;
|
|
151
139
|
}
|
|
140
|
+
}
|
|
152
141
|
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
142
|
+
.owe[data-theme="dark"]:not(.\#):not(.\#),
|
|
143
|
+
.owe-content-root[data-theme="dark"]:not(.\#):not(.\#) {
|
|
144
|
+
--owe-d-bg: #17191b;
|
|
145
|
+
--owe-d-chrome: #131517;
|
|
146
|
+
--owe-d-surface: #1e2124;
|
|
147
|
+
--owe-d-surface-2: #25282b;
|
|
148
|
+
--owe-d-field-bg: #101214;
|
|
149
|
+
--owe-d-text: #ffffff;
|
|
150
|
+
--owe-d-body: #dcdedf;
|
|
151
|
+
--owe-d-text-2: #c3c7cb;
|
|
152
|
+
--owe-d-muted: #a1a7ad;
|
|
153
|
+
--owe-d-icon: #d2d4d5;
|
|
154
|
+
--owe-d-border: #6b7279;
|
|
155
|
+
--owe-d-border-subtle: #25282b;
|
|
156
|
+
--owe-d-popup-border: #33383d;
|
|
157
|
+
--owe-d-accent: color-mix(in oklab, var(--owe-brand, #0066ff) 60%, white);
|
|
158
|
+
--owe-d-danger: #f2b8b5;
|
|
159
|
+
--owe-d-warning: #f6c66b;
|
|
160
|
+
--owe-d-success: #8bd6a0;
|
|
161
|
+
--owe-d-selection: color-mix(in oklab, var(--owe-brand, #0066ff) 45%, transparent);
|
|
162
|
+
--owe-d-code-bg: #0f1112;
|
|
163
|
+
--owe-d-mark: #6b4e00;
|
|
164
|
+
--owe-d-shadow: 0 16px 40px rgb(0 0 0 / 0.55), 0 2px 8px rgb(0 0 0 / 0.4);
|
|
165
|
+
--owe-d-backdrop: rgb(4 5 16 / 0.65);
|
|
166
|
+
color-scheme: dark;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
@media (prefers-contrast: more) {
|
|
170
|
+
.owe:not(.\#):not(.\#) {
|
|
171
|
+
--owe-d-border: currentColor;
|
|
172
|
+
--owe-d-border-subtle: var(--owe-border, var(--owe-d-border));
|
|
173
|
+
--owe-d-popup-border: var(--owe-border, var(--owe-d-border));
|
|
174
|
+
--owe-d-muted: var(--owe-text, var(--owe-d-text));
|
|
175
|
+
--owe-d-text-2: var(--owe-text, var(--owe-d-text));
|
|
161
176
|
}
|
|
162
177
|
}
|
|
163
178
|
|
|
179
|
+
/*
|
|
180
|
+
* Isolation. The editor looks the same in any page: host CSS (resets such as Tailwind's preflight,
|
|
181
|
+
* element rules like `button {}` or `h2 {}`, utility classes on an ancestor) doesn't reach into it.
|
|
182
|
+
* Every stylesheet of the editor is unlayered, and the build raises the specificity of every rule by
|
|
183
|
+
* two classes (scripts/build-css.mjs), so only a more
|
|
184
|
+
* specific selector or !important overrides them. Theme the editor through its tokens instead
|
|
185
|
+
* (`ui.brand`, `ui.tokens`, the brand/theme attributes, or --owe-* custom properties), which always win.
|
|
186
|
+
* This file comes first in both bundles: the editor's own rules win ties against it.
|
|
187
|
+
*/
|
|
188
|
+
.owe:not(.\#):not(.\#),
|
|
189
|
+
.owe-content-root:not(.\#):not(.\#) {
|
|
190
|
+
box-sizing: border-box;
|
|
191
|
+
font-style: normal;
|
|
192
|
+
font-weight: 400;
|
|
193
|
+
font-variant: normal;
|
|
194
|
+
font-stretch: normal;
|
|
195
|
+
letter-spacing: normal;
|
|
196
|
+
word-spacing: normal;
|
|
197
|
+
text-transform: none;
|
|
198
|
+
text-indent: 0;
|
|
199
|
+
text-align: start;
|
|
200
|
+
text-shadow: none;
|
|
201
|
+
white-space: normal;
|
|
202
|
+
}
|
|
203
|
+
.owe:not(.\#):not(.\#) {
|
|
204
|
+
font-size: var(--owe-font-size, var(--owe-d-font-size));
|
|
205
|
+
line-height: 1.5;
|
|
206
|
+
}
|
|
207
|
+
.owe *:not(.\#):not(.\#),
|
|
208
|
+
.owe-content-root *:not(.\#):not(.\#) {
|
|
209
|
+
box-sizing: border-box;
|
|
210
|
+
margin: 0;
|
|
211
|
+
padding: 0;
|
|
212
|
+
border: 0 solid;
|
|
213
|
+
background: transparent;
|
|
214
|
+
box-shadow: none;
|
|
215
|
+
text-shadow: none;
|
|
216
|
+
font: inherit;
|
|
217
|
+
color: inherit;
|
|
218
|
+
letter-spacing: inherit;
|
|
219
|
+
word-spacing: inherit;
|
|
220
|
+
text-transform: inherit;
|
|
221
|
+
text-indent: 0;
|
|
222
|
+
text-align: inherit;
|
|
223
|
+
text-decoration: none;
|
|
224
|
+
white-space: inherit;
|
|
225
|
+
list-style: inherit;
|
|
226
|
+
vertical-align: baseline;
|
|
227
|
+
float: none;
|
|
228
|
+
}
|
|
229
|
+
.owe :not(.\#):not(.\#)::before,
|
|
230
|
+
.owe :not(.\#):not(.\#)::after,
|
|
231
|
+
.owe-content-root :not(.\#):not(.\#)::before,
|
|
232
|
+
.owe-content-root :not(.\#):not(.\#)::after {
|
|
233
|
+
box-sizing: border-box;
|
|
234
|
+
}
|
|
235
|
+
|
|
164
236
|
/*
|
|
165
237
|
* Content styles — shared by the editing area (.owe-content) and published pages
|
|
166
238
|
* (wrap saved HTML in <div class="owe-content-root">), so what authors see is what readers get.
|
|
167
239
|
*/
|
|
168
|
-
|
|
169
|
-
:
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
}
|
|
240
|
+
:is(.owe-content, .owe-content-root):not(.\#):not(.\#) {
|
|
241
|
+
font-family: var(--owe-font, var(--owe-d-font));
|
|
242
|
+
font-size: var(--owe-font-size, var(--owe-d-font-size));
|
|
243
|
+
line-height: var(--owe-line-height, var(--owe-d-line-height));
|
|
244
|
+
color: var(--owe-body, var(--owe-d-body));
|
|
245
|
+
overflow-wrap: break-word;
|
|
246
|
+
}
|
|
176
247
|
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
248
|
+
:is(.owe-content, .owe-content-root) > :first-child:not(.\#):not(.\#) {
|
|
249
|
+
margin-block-start: 0;
|
|
250
|
+
}
|
|
180
251
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
252
|
+
:is(.owe-content, .owe-content-root) :is(p, ul, ol, blockquote, pre, table, figure, hr):not(.\#):not(.\#) {
|
|
253
|
+
margin-block: 0 0.85em;
|
|
254
|
+
}
|
|
184
255
|
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
:is([dir="rtl"], :lang(ar), :lang(fa), :lang(ur), :lang(he))
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
:is(
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
256
|
+
:is(.owe-content, .owe-content-root) :is(h1, h2, h3, h4, h5, h6):not(.\#):not(.\#) {
|
|
257
|
+
line-height: 1.2;
|
|
258
|
+
margin-block: 1.3em 0.5em;
|
|
259
|
+
font-weight: 700;
|
|
260
|
+
letter-spacing: -0.02em;
|
|
261
|
+
color: var(--owe-text, var(--owe-d-text));
|
|
262
|
+
}
|
|
263
|
+
/* Negative tracking breaks Arabic joining: reset for RTL / Arabic-script content. */
|
|
264
|
+
:is(.owe-content, .owe-content-root)
|
|
265
|
+
:is(h1, h2, h3, h4, h5, h6):is([dir="rtl"], :lang(ar), :lang(fa), :lang(ur), :lang(he)):not(.\#):not(.\#),
|
|
266
|
+
:is([dir="rtl"], :lang(ar), :lang(fa), :lang(ur), :lang(he))
|
|
267
|
+
:is(.owe-content, .owe-content-root)
|
|
268
|
+
:is(h1, h2, h3, h4, h5, h6):not(.\#):not(.\#),
|
|
269
|
+
:is(.owe-content, .owe-content-root):is([dir="rtl"], :lang(ar), :lang(fa), :lang(ur), :lang(he))
|
|
270
|
+
:is(h1, h2, h3, h4, h5, h6):not(.\#):not(.\#) {
|
|
271
|
+
letter-spacing: 0;
|
|
272
|
+
}
|
|
273
|
+
:is(.owe-content, .owe-content-root) h1:not(.\#):not(.\#) {
|
|
274
|
+
font-size: 2.1em;
|
|
275
|
+
}
|
|
276
|
+
:is(.owe-content, .owe-content-root) h2:not(.\#):not(.\#) {
|
|
277
|
+
font-size: 1.5em;
|
|
278
|
+
}
|
|
279
|
+
:is(.owe-content, .owe-content-root) h3:not(.\#):not(.\#) {
|
|
280
|
+
font-size: 1.25em;
|
|
281
|
+
}
|
|
282
|
+
:is(.owe-content, .owe-content-root) h4:not(.\#):not(.\#) {
|
|
283
|
+
font-size: 1.1em;
|
|
284
|
+
}
|
|
285
|
+
:is(.owe-content, .owe-content-root) h5:not(.\#):not(.\#) {
|
|
286
|
+
font-size: 1em;
|
|
287
|
+
}
|
|
288
|
+
:is(.owe-content, .owe-content-root) h6:not(.\#):not(.\#) {
|
|
289
|
+
font-size: 0.9em;
|
|
290
|
+
}
|
|
204
291
|
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
292
|
+
:is(.owe-content, .owe-content-root) a:not(.\#):not(.\#) {
|
|
293
|
+
color: var(--owe-accent, var(--owe-d-accent));
|
|
294
|
+
text-decoration: underline; /* never colour alone (WCAG 1.4.1) */
|
|
295
|
+
text-underline-offset: 0.15em;
|
|
296
|
+
}
|
|
210
297
|
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
298
|
+
:is(.owe-content, .owe-content-root) :is(ul, ol):not(.\#):not(.\#) {
|
|
299
|
+
padding-inline-start: 1.6em;
|
|
300
|
+
}
|
|
301
|
+
/* Set explicitly: base.css (and resets like Tailwind's preflight) clear list markers and inline styles. */
|
|
302
|
+
:is(.owe-content, .owe-content-root) ul:not(.\#):not(.\#) {
|
|
303
|
+
list-style: disc;
|
|
304
|
+
}
|
|
305
|
+
:is(.owe-content, .owe-content-root) ol:not(.\#):not(.\#) {
|
|
306
|
+
list-style: decimal;
|
|
307
|
+
}
|
|
308
|
+
:is(.owe-content, .owe-content-root) :is(strong, b):not(.\#):not(.\#) {
|
|
309
|
+
font-weight: 700;
|
|
310
|
+
}
|
|
311
|
+
:is(.owe-content, .owe-content-root) :is(em, i):not(.\#):not(.\#) {
|
|
312
|
+
font-style: italic;
|
|
313
|
+
}
|
|
314
|
+
:is(.owe-content, .owe-content-root) u:not(.\#):not(.\#) {
|
|
315
|
+
text-decoration: underline;
|
|
316
|
+
}
|
|
317
|
+
:is(.owe-content, .owe-content-root) s:not(.\#):not(.\#) {
|
|
318
|
+
text-decoration: line-through;
|
|
319
|
+
}
|
|
320
|
+
:is(.owe-content, .owe-content-root) :is(sub, sup):not(.\#):not(.\#) {
|
|
321
|
+
position: relative;
|
|
322
|
+
font-size: 0.75em;
|
|
323
|
+
line-height: 0;
|
|
324
|
+
vertical-align: baseline;
|
|
325
|
+
}
|
|
326
|
+
:is(.owe-content, .owe-content-root) sup:not(.\#):not(.\#) {
|
|
327
|
+
inset-block-start: -0.5em;
|
|
328
|
+
}
|
|
329
|
+
:is(.owe-content, .owe-content-root) sub:not(.\#):not(.\#) {
|
|
330
|
+
inset-block-end: -0.25em;
|
|
331
|
+
}
|
|
332
|
+
:is(.owe-content, .owe-content-root) li > :is(p, ul, ol):not(.\#):not(.\#) {
|
|
333
|
+
margin-block: 0.15em;
|
|
334
|
+
}
|
|
217
335
|
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
336
|
+
:is(.owe-content, .owe-content-root) ul[data-type="taskList"]:not(.\#):not(.\#) {
|
|
337
|
+
list-style: none;
|
|
338
|
+
padding-inline-start: 0.25em;
|
|
339
|
+
}
|
|
340
|
+
:is(.owe-content, .owe-content-root) li[data-type="taskItem"]:not(.\#):not(.\#) {
|
|
341
|
+
display: flex;
|
|
342
|
+
align-items: flex-start;
|
|
343
|
+
gap: 0.5em;
|
|
344
|
+
}
|
|
345
|
+
:is(.owe-content, .owe-content-root) li[data-type="taskItem"] > input:not(.\#):not(.\#),
|
|
346
|
+
.owe-task-control > input:not(.\#):not(.\#) {
|
|
347
|
+
inline-size: 1.1em;
|
|
348
|
+
block-size: 1.1em;
|
|
349
|
+
margin-block-start: 0.3em;
|
|
350
|
+
accent-color: var(--owe-primary, var(--owe-d-primary));
|
|
351
|
+
flex: none;
|
|
352
|
+
}
|
|
353
|
+
:is(.owe-content, .owe-content-root) li[data-type="taskItem"] > div:not(.\#):not(.\#) {
|
|
354
|
+
flex: 1;
|
|
355
|
+
min-inline-size: 0;
|
|
356
|
+
}
|
|
357
|
+
:is(.owe-content, .owe-content-root) li[data-checked="true"] > div:not(.\#):not(.\#) {
|
|
358
|
+
text-decoration: line-through;
|
|
359
|
+
color: var(--owe-muted, var(--owe-d-muted));
|
|
360
|
+
}
|
|
243
361
|
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
362
|
+
:is(.owe-content, .owe-content-root) blockquote:not(.\#):not(.\#) {
|
|
363
|
+
margin-inline: 0;
|
|
364
|
+
padding-inline-start: 1em;
|
|
365
|
+
border-inline-start: 3px solid var(--owe-accent, var(--owe-d-accent));
|
|
366
|
+
border-start-start-radius: 2px;
|
|
367
|
+
border-end-start-radius: 2px;
|
|
368
|
+
color: var(--owe-text-2, var(--owe-d-text-2));
|
|
369
|
+
}
|
|
252
370
|
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
371
|
+
:is(.owe-content, .owe-content-root) code:not(.\#):not(.\#) {
|
|
372
|
+
font-family: var(--owe-font-mono, var(--owe-d-font-mono));
|
|
373
|
+
font-size: 0.9em;
|
|
374
|
+
background: var(--owe-code-bg, var(--owe-d-code-bg));
|
|
375
|
+
border: 1px solid var(--owe-border-subtle, var(--owe-d-border-subtle));
|
|
376
|
+
border-radius: 6px;
|
|
377
|
+
padding: 0.1em 0.35em;
|
|
378
|
+
}
|
|
379
|
+
:is(.owe-content, .owe-content-root) pre:not(.\#):not(.\#) {
|
|
380
|
+
font-family: var(--owe-font-mono, var(--owe-d-font-mono));
|
|
381
|
+
background: var(--owe-code-bg, var(--owe-d-code-bg));
|
|
382
|
+
border: 1px solid var(--owe-border-subtle, var(--owe-d-border-subtle));
|
|
383
|
+
border-radius: var(--owe-radius-md, var(--owe-d-radius-md));
|
|
384
|
+
padding: 1em 1.25em;
|
|
385
|
+
overflow-x: auto;
|
|
386
|
+
direction: ltr; /* code is left-to-right even in RTL documents */
|
|
387
|
+
text-align: start;
|
|
388
|
+
tab-size: 2;
|
|
389
|
+
}
|
|
390
|
+
:is(.owe-content, .owe-content-root) pre code:not(.\#):not(.\#) {
|
|
391
|
+
background: none;
|
|
392
|
+
border: 0;
|
|
393
|
+
padding: 0;
|
|
394
|
+
font-size: 0.9em;
|
|
395
|
+
}
|
|
278
396
|
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
397
|
+
:is(.owe-content, .owe-content-root) hr:not(.\#):not(.\#) {
|
|
398
|
+
border: none;
|
|
399
|
+
border-block-start: 2px solid var(--owe-border-subtle, var(--owe-d-border-subtle));
|
|
400
|
+
margin-block: 1.5em;
|
|
401
|
+
}
|
|
284
402
|
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
403
|
+
:is(.owe-content, .owe-content-root) img:not(.\#):not(.\#) {
|
|
404
|
+
max-inline-size: 100%;
|
|
405
|
+
block-size: auto;
|
|
406
|
+
display: block;
|
|
407
|
+
}
|
|
408
|
+
:is(.owe-content, .owe-content-root) figure:not(.\#):not(.\#) {
|
|
409
|
+
margin-inline: 0;
|
|
410
|
+
}
|
|
411
|
+
:is(.owe-content, .owe-content-root) figcaption:not(.\#):not(.\#) {
|
|
412
|
+
color: var(--owe-muted, var(--owe-d-muted));
|
|
413
|
+
font-size: 0.9em;
|
|
414
|
+
margin-block-start: 0.4em;
|
|
415
|
+
}
|
|
298
416
|
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
417
|
+
:is(.owe-content, .owe-content-root) table:not(.\#):not(.\#) {
|
|
418
|
+
border-collapse: collapse;
|
|
419
|
+
inline-size: 100%;
|
|
420
|
+
table-layout: fixed;
|
|
421
|
+
}
|
|
422
|
+
:is(.owe-content, .owe-content-root) caption:not(.\#):not(.\#) {
|
|
423
|
+
caption-side: top;
|
|
424
|
+
text-align: start;
|
|
425
|
+
font-weight: 600;
|
|
426
|
+
padding-block-end: 0.4em;
|
|
427
|
+
}
|
|
428
|
+
:is(.owe-content, .owe-content-root) :is(td, th):not(.\#):not(.\#) {
|
|
429
|
+
border: 1px solid var(--owe-border-subtle, var(--owe-d-border-subtle));
|
|
430
|
+
padding: 0.55em 0.8em;
|
|
431
|
+
vertical-align: top;
|
|
432
|
+
text-align: start;
|
|
433
|
+
min-inline-size: 3em;
|
|
434
|
+
}
|
|
435
|
+
:is(.owe-content, .owe-content-root) th:not(.\#):not(.\#) {
|
|
436
|
+
background: var(--owe-surface, var(--owe-d-surface));
|
|
437
|
+
color: var(--owe-text, var(--owe-d-text));
|
|
438
|
+
font-weight: 700;
|
|
439
|
+
}
|
|
440
|
+
:is(.owe-content, .owe-content-root) :is(td, th) > :last-child:not(.\#):not(.\#) {
|
|
441
|
+
margin-block-end: 0;
|
|
442
|
+
}
|
|
325
443
|
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
444
|
+
:is(.owe-content, .owe-content-root) mark:not(.\#):not(.\#) {
|
|
445
|
+
background-color: var(--owe-mark, var(--owe-d-mark));
|
|
446
|
+
color: inherit;
|
|
447
|
+
border-radius: 0.2em;
|
|
448
|
+
padding-inline: 0.15em;
|
|
449
|
+
}
|
|
332
450
|
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
451
|
+
/* Alignment classes (used by the editor always, and by output when TextAlign output: "class"). */
|
|
452
|
+
.owe-align-center:not(.\#):not(.\#) {
|
|
453
|
+
text-align: center;
|
|
454
|
+
}
|
|
455
|
+
.owe-align-end:not(.\#):not(.\#) {
|
|
456
|
+
text-align: end;
|
|
457
|
+
}
|
|
458
|
+
.owe-align-justify:not(.\#):not(.\#) {
|
|
459
|
+
text-align: justify;
|
|
337
460
|
}
|