created variable title svg & png export module

2026-09-01 15:11:05 +02:00
parent 882164231f
commit 7b8d66edb7
14 changed files with 845 additions and 2 deletions
@@ -0,0 +1,86 @@
+/**
+ * Deliberately does NOT match the front-end theme: this is an editor tool
+ * floating over public pages, so it's styled after the Gin admin theme's
+ * dark mode instead, to read unambiguously as an admin control regardless
+ * of which front-end theme/page it's injected into.
+ *
+ * Values below are copied from Gin's own dark-mode tokens (theme/variables.css
+ * .gin--dark-mode, theme/accent.css .gin--dark-mode[data-gin-accent=blue] —
+ * Gin's default accent) rather than referencing Gin's CSS custom properties,
+ * since Gin's admin stylesheet isn't loaded on front-end pages.
+ */
+
+.leshed-svg-export {
+  /* Anchored to the title element itself (its direct DOM parent — see
+     ensurePositioningContext() in svg-export.js, which makes the title a
+     positioning context if it isn't one already). `position: absolute`
+     takes it out of flow, so it cannot shift the surrounding layout, and
+     it tracks the title automatically on scroll/resize/reflow — no JS
+     position syncing needed. Deliberately does NOT cover the rest of the
+     title with any invisible layer — a title can be a real link elsewhere
+     (the site logo, a teaser), and it must stay fully clickable. */
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  background: #1b1b1d; /* --gin-bg-app (dark mode) */
+  border: 1px solid #43454a; /* --gin-border-color (dark mode) */
+  border-radius: 0.625rem; /* --gin-border-l */
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 5px 8px rgba(0, 0, 0, 0.3);
+  /* Hidden until the title is hovered/focused — pure CSS, no JS.
+     Known limitation: this can never trigger on a title the theme itself
+     made non-interactive (`pointer-events: none`, e.g. the oversized
+     decorative h2 on a "projet" full page) — an element with
+     `pointer-events: none` never receives hover at all. Overriding that
+     would mean either touching the theme's CSS or covering the title with
+     our own layer, both ruled out. On every other title (no such rule),
+     hover works normally. */
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.leshed-svg-export-target:hover > .leshed-svg-export,
+.leshed-svg-export-target:focus-within > .leshed-svg-export {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.leshed-svg-export__btn {
+  font-family: Ginter, Inter, "Helvetica Neue", BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
+  font-size: 0.75rem; /* --gin-font-size-xxs */
+  font-weight: 525; /* --gin-font-weight-semibold */
+  line-height: 1;
+  color: #90aeef; /* --gin-color-primary, dark mode "blue" accent */
+  background: transparent;
+  border: 2px solid #90aeef;
+  border-radius: 0.375rem; /* --gin-border-s */
+  padding: 0.4375rem 0.625rem; /* --gin-spacing-xxs+2px / --gin-spacing-s */
+  cursor: pointer;
+  transition: 0.15s cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.leshed-svg-export__btn:hover {
+  background-color: #9bb6f1; /* --gin-color-primary-hover, dark mode */
+  border-color: #9bb6f1;
+  color: #111; /* --gin-color-button-text, dark mode */
+}
+
+.leshed-svg-export__btn:active,
+.leshed-svg-export__btn:focus {
+  background-color: #a1baf1; /* --gin-color-primary-active, dark mode */
+  border-color: #a1baf1;
+  color: #111;
+  outline: none;
+}
+
+.leshed-svg-export__btn:disabled {
+  cursor: progress;
+  color: #919191; /* --gin-color-disabled, dark mode */
+  border-color: #646464; /* --gin-color-disabled-border, dark mode */
+  background: transparent;
+}