@open-wysiwyg-editor/react 1.0.0 → 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 +420 -283
- package/dist/content.min.css +1 -1
- package/dist/style.css +1300 -1082
- package/dist/style.min.css +1 -1
- package/package.json +2 -2
package/dist/content.css
CHANGED
|
@@ -1,323 +1,460 @@
|
|
|
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
|
|
12
|
+
* light and dark: every brand-dependent token below is derived from it with color-mix().
|
|
13
|
+
* --owe-brand brand color (default #0066ff) --owe-brand-2 2nd stop of --owe-gradient (#00b8ff)
|
|
14
|
+
* --owe-on-brand text/icons on brand fills (#fff) Pick a dark --owe-on-brand for light brands.
|
|
15
|
+
* --owe-primary solid fill = brand --owe-primary-hover primary mixed 15% toward black
|
|
16
|
+
* --owe-accent brand-tinted TEXT/link/focus color: brand mixed 30% toward black (light) or
|
|
17
|
+
* 40% toward white (dark). Pale brands may need an explicit --owe-accent (4.5:1).
|
|
18
|
+
* --owe-accent-soft brand 18% over --owe-bg --owe-selection brand at 22% (light) / 45% (dark)
|
|
19
|
+
* --owe-focus, --owe-caret follow --owe-accent --owe-gradient brand -> brand-2 (bottom edge)
|
|
20
|
+
* Overriding any of these directly still wins over the derivation.
|
|
21
|
+
*
|
|
22
|
+
* Button and surface tokens (no default is declared; the rules fall back to the value in brackets,
|
|
23
|
+
* so they can be set on .owe or on any ancestor):
|
|
24
|
+
* --owe-btn-color (--owe-icon) --owe-btn-bg (transparent) --owe-btn-radius (--owe-radius-sm)
|
|
25
|
+
* --owe-btn-hover-color (--owe-text) --owe-btn-hover-bg (--owe-surface-2)
|
|
26
|
+
* --owe-btn-active-color (--owe-on-accent) --owe-btn-active-bg (--owe-primary) pressed / toggled buttons
|
|
27
|
+
* --owe-btn-active-hover-bg (active-bg mixed 15% toward black)
|
|
28
|
+
* --owe-btn-primary-bg (--owe-primary) --owe-btn-primary-color (--owe-on-accent)
|
|
29
|
+
* --owe-btn-primary-hover-bg (--owe-primary-hover) dialog primary buttons
|
|
30
|
+
* --owe-toolbar-bg (--owe-chrome) --owe-toolbar-border (--owe-border-subtle) toolbar, find bar, status bar
|
|
31
|
+
* --owe-editor-border (--owe-border-subtle) --owe-editor-radius (--owe-radius) the card
|
|
32
|
+
*
|
|
33
|
+
* Other tokens (set them anywhere, like the ones above):
|
|
8
34
|
* --owe-radius card radius (24px) --owe-radius-sm inner controls (10px)
|
|
9
35
|
* --owe-radius-md menus (12px) --owe-radius-lg dialogs (16px)
|
|
10
36
|
* --owe-btn-size toolbar button (40px) --owe-pad-x/-y editing-area padding
|
|
11
37
|
* --owe-chrome toolbar / status bar surface
|
|
12
38
|
* --owe-field-bg inputs and source view --owe-popup-border menu / dialog edge
|
|
13
39
|
* --owe-body paragraph text --owe-text-2 secondary text (quotes)
|
|
14
|
-
* --owe-icon toolbar icon color --owe-
|
|
15
|
-
* --owe-primary(-hover) solid fills: pressed buttons, primary buttons (white text, 4.8:1)
|
|
16
|
-
* --owe-gradient bottom edge of the card --owe-backdrop dialog backdrop
|
|
17
|
-
* --owe-accent is the TEXT/link/focus blue; --owe-primary is the FILL blue.
|
|
40
|
+
* --owe-icon toolbar icon color --owe-backdrop dialog backdrop
|
|
18
41
|
* Set --owe-font (e.g. "Almarai", system-ui) to change the typeface; no web fonts are bundled.
|
|
42
|
+
* The JS options `ui.brand` and `ui.tokens` and the <owe-editor brand> attribute set these
|
|
43
|
+
* properties inline on the editor root.
|
|
19
44
|
*/
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
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);
|
|
37
65
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
--owe-warning: #8a5300;
|
|
60
|
-
--owe-success: #146c2e;
|
|
61
|
-
--owe-selection: rgb(0 102 255 / 0.22);
|
|
62
|
-
--owe-code-bg: #f4f6f8;
|
|
63
|
-
--owe-mark: #fff2a8;
|
|
64
|
-
--owe-shadow: 0 16px 40px rgb(16 17 18 / 0.16), 0 2px 8px rgb(16 17 18 / 0.08);
|
|
65
|
-
--owe-backdrop: rgb(16 17 18 / 0.45);
|
|
66
|
-
--owe-z-popover: 1000;
|
|
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;
|
|
67
87
|
|
|
68
|
-
|
|
69
|
-
|
|
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);
|
|
70
103
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
.owe-content-root:not([data-theme="light"]) {
|
|
74
|
-
--owe-bg: #17191b;
|
|
75
|
-
--owe-chrome: #131517;
|
|
76
|
-
--owe-surface: #1e2124;
|
|
77
|
-
--owe-surface-2: #25282b;
|
|
78
|
-
--owe-field-bg: #101214;
|
|
79
|
-
--owe-text: #ffffff;
|
|
80
|
-
--owe-body: #dcdedf;
|
|
81
|
-
--owe-text-2: #c3c7cb;
|
|
82
|
-
--owe-muted: #a1a7ad;
|
|
83
|
-
--owe-icon: #d2d4d5;
|
|
84
|
-
--owe-border: #6b7279;
|
|
85
|
-
--owe-border-subtle: #25282b;
|
|
86
|
-
--owe-popup-border: #33383d;
|
|
87
|
-
--owe-accent: #4d94ff;
|
|
88
|
-
--owe-on-accent: #ffffff;
|
|
89
|
-
--owe-primary: #0066ff;
|
|
90
|
-
--owe-primary-hover: #0057d9;
|
|
91
|
-
--owe-accent-soft: #14315e;
|
|
92
|
-
--owe-focus: #4d94ff;
|
|
93
|
-
--owe-caret: #5b9dff;
|
|
94
|
-
--owe-danger: #f2b8b5;
|
|
95
|
-
--owe-warning: #f6c66b;
|
|
96
|
-
--owe-success: #8bd6a0;
|
|
97
|
-
--owe-selection: rgb(0 102 255 / 0.55);
|
|
98
|
-
--owe-code-bg: #0f1112;
|
|
99
|
-
--owe-mark: #4a35b8;
|
|
100
|
-
--owe-shadow: 0 16px 40px rgb(0 0 0 / 0.55), 0 2px 8px rgb(0 0 0 / 0.4);
|
|
101
|
-
--owe-backdrop: rgb(4 5 16 / 0.65);
|
|
102
|
-
color-scheme: dark;
|
|
103
|
-
}
|
|
104
|
-
}
|
|
104
|
+
color-scheme: light;
|
|
105
|
+
}
|
|
105
106
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
--owe-
|
|
112
|
-
--owe-
|
|
113
|
-
--owe-
|
|
114
|
-
--owe-
|
|
115
|
-
--owe-
|
|
116
|
-
--owe-
|
|
117
|
-
--owe-
|
|
118
|
-
--owe-
|
|
119
|
-
--owe-
|
|
120
|
-
--owe-
|
|
121
|
-
--owe-
|
|
122
|
-
--owe-
|
|
123
|
-
--owe-
|
|
124
|
-
--owe-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
--owe-
|
|
130
|
-
--owe-
|
|
131
|
-
--owe-
|
|
132
|
-
--owe-
|
|
133
|
-
--owe-
|
|
134
|
-
--owe-
|
|
135
|
-
--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);
|
|
136
138
|
color-scheme: dark;
|
|
137
139
|
}
|
|
140
|
+
}
|
|
138
141
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
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));
|
|
147
176
|
}
|
|
148
177
|
}
|
|
149
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
|
+
|
|
150
236
|
/*
|
|
151
237
|
* Content styles — shared by the editing area (.owe-content) and published pages
|
|
152
238
|
* (wrap saved HTML in <div class="owe-content-root">), so what authors see is what readers get.
|
|
153
239
|
*/
|
|
154
|
-
|
|
155
|
-
:
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
}
|
|
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
|
+
}
|
|
162
247
|
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
248
|
+
:is(.owe-content, .owe-content-root) > :first-child:not(.\#):not(.\#) {
|
|
249
|
+
margin-block-start: 0;
|
|
250
|
+
}
|
|
166
251
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
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
|
+
}
|
|
170
255
|
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
:is([dir="rtl"], :lang(ar), :lang(fa), :lang(ur), :lang(he))
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
:is(
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
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
|
+
}
|
|
190
291
|
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
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
|
+
}
|
|
196
297
|
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
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
|
+
}
|
|
203
335
|
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
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
|
+
}
|
|
229
361
|
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
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
|
+
}
|
|
238
370
|
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
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
|
+
}
|
|
264
396
|
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
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
|
+
}
|
|
270
402
|
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
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
|
+
}
|
|
284
416
|
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
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
|
+
}
|
|
311
443
|
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
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
|
+
}
|
|
318
450
|
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
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;
|
|
323
460
|
}
|