@markgrafhq/markgraf-embed 0.1.14 → 0.1.15
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/markgraf-embed.css +12 -16
- package/dist/markgraf-embed.js +13 -13
- package/package.json +1 -1
package/dist/markgraf-embed.css
CHANGED
|
@@ -67,29 +67,17 @@
|
|
|
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. */
|
|
70
73
|
.markgraf-embed [data-mg="bar"] {
|
|
71
|
-
position:
|
|
72
|
-
left: 0;
|
|
73
|
-
right: 0;
|
|
74
|
-
bottom: 0;
|
|
74
|
+
position: relative;
|
|
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;
|
|
93
81
|
}
|
|
94
82
|
|
|
95
83
|
.markgraf-embed [data-mg="play"] {
|
|
@@ -229,6 +217,10 @@
|
|
|
229
217
|
|
|
230
218
|
.markgraf-embed [data-mg="scrub"]::-webkit-slider-runnable-track {
|
|
231
219
|
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;
|
|
232
224
|
background: var(--mg-track);
|
|
233
225
|
border-radius: 999px;
|
|
234
226
|
transition: background 0.15s ease;
|
|
@@ -252,7 +244,11 @@
|
|
|
252
244
|
border-radius: 50%;
|
|
253
245
|
background: #111;
|
|
254
246
|
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). */
|
|
255
250
|
margin-top: -5px;
|
|
251
|
+
top: auto;
|
|
256
252
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
|
257
253
|
transition: transform 0.08s ease;
|
|
258
254
|
}
|