@markgrafhq/markgraf-embed 0.1.15 → 0.1.17
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/README.md +2 -2
- package/dist/markgraf-embed.css +16 -12
- package/dist/markgraf-embed.js +16 -16
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -16,7 +16,7 @@ active.
|
|
|
16
16
|
|
|
17
17
|
<div data-markgraf>
|
|
18
18
|
seed 1
|
|
19
|
-
|
|
19
|
+
keyframe v1 {
|
|
20
20
|
+node client "Client"
|
|
21
21
|
+node api "API"
|
|
22
22
|
+edge client api
|
|
@@ -52,7 +52,7 @@ Set inline CSS on the embed element:
|
|
|
52
52
|
The script also exposes `window.markgraf`:
|
|
53
53
|
|
|
54
54
|
```js
|
|
55
|
-
markgraf.mount(element, "seed 1\
|
|
55
|
+
markgraf.mount(element, "seed 1\nkeyframe v1 { +node a \"A\" }");
|
|
56
56
|
markgraf.mountAll(); // scan the whole document
|
|
57
57
|
markgraf.mountAll(myContainer); // scan a subtree
|
|
58
58
|
```
|
package/dist/markgraf-embed.css
CHANGED
|
@@ -67,17 +67,29 @@
|
|
|
67
67
|
transform: scale(1);
|
|
68
68
|
}
|
|
69
69
|
|
|
70
|
-
/* The bar sits in normal flow *below* the canvas (not as a bottom overlay),
|
|
71
|
-
so it reserves its own space and can never cover the lowest node of the
|
|
72
|
-
graph. It's always visible — a player should show its scrubber. */
|
|
73
70
|
.markgraf-embed [data-mg="bar"] {
|
|
74
|
-
position:
|
|
71
|
+
position: absolute;
|
|
72
|
+
left: 0;
|
|
73
|
+
right: 0;
|
|
74
|
+
bottom: 0;
|
|
75
75
|
display: flex;
|
|
76
76
|
align-items: center;
|
|
77
77
|
gap: 8px;
|
|
78
78
|
padding: 6px 8px;
|
|
79
79
|
background: rgba(255, 255, 255, 0.92);
|
|
80
80
|
color: var(--mg-fg);
|
|
81
|
+
opacity: 0;
|
|
82
|
+
transform: translateY(2px);
|
|
83
|
+
transition: opacity 0.08s ease, transform 0.08s ease;
|
|
84
|
+
pointer-events: none;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.markgraf-embed:hover [data-mg="bar"],
|
|
88
|
+
.markgraf-embed:focus-within [data-mg="bar"] {
|
|
89
|
+
opacity: 1;
|
|
90
|
+
transform: translateY(0);
|
|
91
|
+
pointer-events: auto;
|
|
92
|
+
transition: opacity 0.16s ease, transform 0.16s ease;
|
|
81
93
|
}
|
|
82
94
|
|
|
83
95
|
.markgraf-embed [data-mg="play"] {
|
|
@@ -217,10 +229,6 @@
|
|
|
217
229
|
|
|
218
230
|
.markgraf-embed [data-mg="scrub"]::-webkit-slider-runnable-track {
|
|
219
231
|
height: 4px;
|
|
220
|
-
/* WebKit lays the 4px track at the top of the 18px input box, which floated
|
|
221
|
-
the line and thumb above the play button / time / speed. Centre it within
|
|
222
|
-
the input: (18 - 4) / 2 = 7px. */
|
|
223
|
-
margin-top: 7px;
|
|
224
232
|
background: var(--mg-track);
|
|
225
233
|
border-radius: 999px;
|
|
226
234
|
transition: background 0.15s ease;
|
|
@@ -244,11 +252,7 @@
|
|
|
244
252
|
border-radius: 50%;
|
|
245
253
|
background: #111;
|
|
246
254
|
border: 2px solid #fff;
|
|
247
|
-
/* `margin-top` centres the thumb on the track; `top: auto` resets any host
|
|
248
|
-
slider positioning (e.g. Obsidian's editor sets `top: var(--slider-thumb-y)`
|
|
249
|
-
on range thumbs, which otherwise floats ours above the controls). */
|
|
250
255
|
margin-top: -5px;
|
|
251
|
-
top: auto;
|
|
252
256
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
|
253
257
|
transition: transform 0.08s ease;
|
|
254
258
|
}
|