@lalternative/editor 0.5.0 → 0.6.1
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/editor.css +29 -11
- package/package.json +1 -1
package/dist/editor.css
CHANGED
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
--lalt-editor-text: #111827;
|
|
10
10
|
--lalt-editor-border: rgb(0 0 0 / 0.1);
|
|
11
11
|
--lalt-editor-hover: rgb(0 0 0 / 0.06);
|
|
12
|
+
--lalt-editor-active: rgb(0 0 0 / 0.12);
|
|
12
13
|
}
|
|
13
14
|
|
|
14
15
|
/* Defaults only, and only for a host with no theme of its own: an app that
|
|
@@ -24,6 +25,7 @@
|
|
|
24
25
|
--lalt-editor-text: #f3f4f6;
|
|
25
26
|
--lalt-editor-border: rgb(255 255 255 / 0.14);
|
|
26
27
|
--lalt-editor-hover: rgb(255 255 255 / 0.08);
|
|
28
|
+
--lalt-editor-active: rgb(255 255 255 / 0.16);
|
|
27
29
|
}
|
|
28
30
|
}
|
|
29
31
|
|
|
@@ -47,24 +49,28 @@
|
|
|
47
49
|
padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
|
|
48
50
|
background: var(--lalt-editor-surface, #ffffff);
|
|
49
51
|
border-top: 1px solid var(--lalt-editor-border, rgb(0 0 0 / 0.1));
|
|
50
|
-
box-shadow: 0 -4px
|
|
52
|
+
box-shadow: 0 -4px 24px rgb(0 0 0 / 0.18);
|
|
51
53
|
color: var(--lalt-editor-text, #111827);
|
|
52
54
|
user-select: none;
|
|
53
55
|
overflow-x: auto;
|
|
54
56
|
}
|
|
55
57
|
|
|
56
|
-
@media (
|
|
58
|
+
@media (hover: hover) and (pointer: fine) {
|
|
57
59
|
.lalt-toolbar {
|
|
58
60
|
left: var(--lalt-toolbar-left, 0);
|
|
59
61
|
top: var(--lalt-toolbar-top, 0);
|
|
60
62
|
right: auto;
|
|
61
63
|
bottom: auto;
|
|
62
|
-
gap: 0.
|
|
64
|
+
gap: 0.25rem;
|
|
63
65
|
padding: 0.25rem;
|
|
64
66
|
padding-bottom: 0.25rem;
|
|
65
67
|
border: 1px solid var(--lalt-editor-border, rgb(0 0 0 / 0.1));
|
|
66
68
|
border-radius: 0.5rem;
|
|
67
|
-
|
|
69
|
+
/* Deep enough to read as floating over the text rather than sitting in
|
|
70
|
+
it — the bar appears mid-paragraph, with prose on every side. */
|
|
71
|
+
box-shadow:
|
|
72
|
+
0 4px 16px rgb(0 0 0 / 0.16),
|
|
73
|
+
0 1px 3px rgb(0 0 0 / 0.1);
|
|
68
74
|
overflow-x: visible;
|
|
69
75
|
}
|
|
70
76
|
}
|
|
@@ -79,16 +85,17 @@
|
|
|
79
85
|
min-height: 2.75rem;
|
|
80
86
|
padding: 0.5rem 0.75rem;
|
|
81
87
|
border-radius: 0.375rem;
|
|
82
|
-
background:
|
|
88
|
+
background: var(--lalt-editor-hover, rgb(0 0 0 / 0.06));
|
|
83
89
|
border: none;
|
|
84
90
|
font: inherit;
|
|
85
91
|
font-size: 0.875rem;
|
|
92
|
+
font-weight: 500;
|
|
86
93
|
white-space: nowrap;
|
|
87
94
|
cursor: pointer;
|
|
88
95
|
color: inherit;
|
|
89
96
|
}
|
|
90
97
|
|
|
91
|
-
@media (
|
|
98
|
+
@media (hover: hover) and (pointer: fine) {
|
|
92
99
|
.lalt-toolbar__button {
|
|
93
100
|
min-height: 0;
|
|
94
101
|
padding: 0.25rem 0.5rem;
|
|
@@ -96,7 +103,18 @@
|
|
|
96
103
|
}
|
|
97
104
|
|
|
98
105
|
.lalt-toolbar__button:hover {
|
|
99
|
-
background: var(--lalt-editor-
|
|
106
|
+
background: var(--lalt-editor-active, rgb(0 0 0 / 0.12));
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* The format trigger opens a menu; the caret is what says so. */
|
|
110
|
+
.lalt-toolbar__button[aria-haspopup]::after {
|
|
111
|
+
content: "";
|
|
112
|
+
width: 0.4em;
|
|
113
|
+
height: 0.4em;
|
|
114
|
+
margin-left: 0.15em;
|
|
115
|
+
border-right: 1.5px solid currentColor;
|
|
116
|
+
border-bottom: 1.5px solid currentColor;
|
|
117
|
+
transform: rotate(45deg) translate(-0.1em, -0.1em);
|
|
100
118
|
}
|
|
101
119
|
|
|
102
120
|
.lalt-toolbar__formats {
|
|
@@ -119,7 +137,7 @@
|
|
|
119
137
|
color: var(--lalt-editor-text, #111827);
|
|
120
138
|
}
|
|
121
139
|
|
|
122
|
-
@media (
|
|
140
|
+
@media (hover: hover) and (pointer: fine) {
|
|
123
141
|
.lalt-toolbar__menu {
|
|
124
142
|
position: absolute;
|
|
125
143
|
left: auto;
|
|
@@ -151,7 +169,7 @@
|
|
|
151
169
|
color: inherit;
|
|
152
170
|
}
|
|
153
171
|
|
|
154
|
-
@media (
|
|
172
|
+
@media (hover: hover) and (pointer: fine) {
|
|
155
173
|
.lalt-toolbar__item {
|
|
156
174
|
min-height: 0;
|
|
157
175
|
padding: 0.375rem 0.5rem;
|
|
@@ -174,7 +192,7 @@
|
|
|
174
192
|
opacity: 0.5;
|
|
175
193
|
}
|
|
176
194
|
|
|
177
|
-
@media (
|
|
195
|
+
@media (hover: hover) and (pointer: fine) {
|
|
178
196
|
.lalt-toolbar__shortcut {
|
|
179
197
|
display: inline;
|
|
180
198
|
}
|
|
@@ -243,7 +261,7 @@
|
|
|
243
261
|
}
|
|
244
262
|
|
|
245
263
|
/* Bigger where a finger is doing the aiming. */
|
|
246
|
-
@media (
|
|
264
|
+
@media not (hover: hover), (pointer: coarse) {
|
|
247
265
|
.lalt-suggestion__action {
|
|
248
266
|
width: 2.25rem;
|
|
249
267
|
height: 2.25rem;
|
package/package.json
CHANGED