From afca374a077a4e844d007729c8118811a0638d22 Mon Sep 17 00:00:00 2001 From: Local Dev Date: Sun, 20 Sep 2026 15:56:29 +0200 Subject: [PATCH] fix(studio): imported dark pages no longer render on white; language picker in the toolbar Pages such as potidaea.asm put their background on and leave transparent; the editor's base stylesheet paints white, so the imported page showed light text on white. The canvas body now stays transparent, which also matches the exported page. The gateway's public name route sends Access-Control-Allow-Origin so Studio on sirius.x can fetch a page's stylesheets and inline them instead of falling back to links; the route only serves public content. The language picker had no toolbar to attach to in Studio and floated over the blocks panel; pages can now mark a slot for it and Studio does. --- docs/index.html | 2 +- index.html | 2 +- js/i18n.js | 5 ++++- js/studio.js | 5 ++++- market.html | 2 +- portal.html | 2 +- studio.html | 5 +++-- tld.html | 2 +- 8 files changed, 16 insertions(+), 9 deletions(-) diff --git a/docs/index.html b/docs/index.html index c39a1c0..082070d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -92,7 +92,7 @@ - + diff --git a/index.html b/index.html index a20bf99..611b353 100644 --- a/index.html +++ b/index.html @@ -130,7 +130,7 @@ .verify dd{margin:2px 0 0;font-family:ui-monospace,monospace;font-size:12.5px;word-break:break-all;color:var(--ink)} footer{border-top:1px solid var(--line);padding:2.4rem 0 3.5rem;color:var(--dim);font-size:13px;text-align:center;margin-top:2.5rem} - + diff --git a/js/i18n.js b/js/i18n.js index 2455d3d..6b64dd5 100644 --- a/js/i18n.js +++ b/js/i18n.js @@ -22,7 +22,7 @@ (function () { var STORE = "sirius-lang"; var CACHE = "sirius-i18n:"; - var VERSION = "20260920c"; // bump when dictionaries change + var VERSION = "20260920d"; // bump when dictionaries change var LANGS = { en: "English", de: "Deutsch", @@ -259,6 +259,7 @@ '.lp-opt[aria-selected="true"]{color:var(--acid,#d6ff3d);background:rgba(214,255,61,.08)}' + ".lp-opt .lp-code{margin-left:auto;font-family:var(--mono,monospace);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.55}" + ".lang-picker-float{position:fixed;bottom:20px;right:20px;z-index:99}" + + ".lang-picker-inline{margin-left:0}" + "@media (max-width:560px){.lp-name{display:none}}"; document.head.appendChild(css); @@ -306,7 +307,9 @@ }); document.addEventListener("click", closePicker); + var slot = document.querySelector("[data-lang-slot]"); var nav = document.querySelector(".topnav"); + if (slot) { slot.replaceWith(picker); picker.classList.add("lang-picker-inline"); } else if (nav) { // Right side: directly before the wallet button (profile-wrap once // profile-menu.js has wrapped the portal link, the bare link before diff --git a/js/studio.js b/js/studio.js index 1a4fcb2..726c19b 100644 --- a/js/studio.js +++ b/js/studio.js @@ -110,7 +110,10 @@ function injectImportedCss() { const doc = editor.Canvas.getDocument(); if (!doc) return; let st = doc.getElementById("sirius-imported"); if (!st) { st = doc.createElement("style"); st.id = "sirius-imported"; } - st.textContent = importedCss.replace(/(^|[,{}\s])body(?=[\s,{.:\[#>])/g, "$1html body"); + // The editor's base sheet paints white, which hides a page whose + // background lives on (common in app bundles). Body stays + // transparent in the canvas; the export never had that rule anyway. + st.textContent = "html body{background-color:transparent}\n" + importedCss.replace(/(^|[,{}\s])body(?=[\s,{.:\[#>])/g, "$1html body"); doc.head.appendChild(st); for (const [k, v] of Object.entries(importedHtmlAttrs)) doc.documentElement.setAttribute(k, v); for (const href of extraHeadLinks) if (!doc.head.querySelector(`link[href="${href}"]`)) { const l = doc.createElement("link"); l.rel = "stylesheet"; l.href = href; doc.head.appendChild(l); } diff --git a/market.html b/market.html index 2ad9ffb..e6a197f 100644 --- a/market.html +++ b/market.html @@ -74,7 +74,7 @@ footer{border-top:1px solid var(--line);padding:2rem 0 3rem;color:var(--dim);font-size:13px;text-align:center;margin-top:2.5rem} @media (max-width:560px){.row{grid-template-columns:1fr auto}.row .price{grid-column:1/-1;text-align:left}} - +