@miliastry/quasar 1.0.6 → 1.1.0

package/dist/Visuals/lyne.css

@@ -6,11 +6,28 @@
  *
  * Scoped under `.bbcode-preview-lyne` and `.theme-lyne`.
  * All rules strictly override default/osu.css styles to ensure 0% pink bleed.
+ *
+ * No `@import` of Google Fonts here — the host supplies the faces.
+ *
+ * This file used to open with
+ *   @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono…&family=Saira+Condensed…&family=Saira…')
+ * and that line broke the desktop app. Chromium reports a stylesheet as FAILED
+ * when any of its @imports fails to load, so under a CSP whose `style-src` does
+ * not list fonts.googleapis.com (Tauri's) — or simply with no network — the CSS
+ * chunk carrying this file rejected, the dynamic import of the whole BBCode
+ * feature rejected with it, and the kernel booted without an editor.
+ *
+ * Miliastry self-hosts these families with next/font and publishes them as
+ * `--font-syne-display` / `--font-syne-body` / `--font-syne-mono` (app/layout.tsx;
+ * `[data-theme='syne']` in globals.css reads the same variables). They are
+ * used when present; the plain family names remain as the fallback for a host
+ * that installs the fonts by other means.
  */
 
-@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Saira+Condensed:wght@600;700&family=Saira:wght@400;600&display=swap');
-
-:root {
+.theme-lyne,
+.bbcode-preview-lyne,
+[data-theme='syne'],
+[data-dialect='lyne'] {
   --color-accent: #2EE6E2;
   --color-accent-bright: #68FFF8;
   --color-warning: #FFC34D;
@@ -18,9 +35,9 @@
   --color-text-mid: #9EACD4;
   --color-text-dim: #606C8F;
   --color-hairline: rgba(255, 255, 255, 0.12);
-  --font-display: "Saira Condensed", sans-serif;
-  --font-body: "Saira", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  --font-numeric: "IBM Plex Mono", monospace;
+  --font-display: var(--font-syne-display, "Saira Condensed"), "Saira Condensed", sans-serif;
+  --font-body: var(--font-syne-body, "Saira"), "Saira", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-numeric: var(--font-syne-mono, "IBM Plex Mono"), "IBM Plex Mono", monospace;
   --lyne-cut: 8px;
 }
 
@@ -52,6 +69,41 @@
   border-bottom-color: var(--color-accent, #2EE6E2) !important;
 }
 
+.bbcode-preview-lyne a:has(img),
+.bbcode-preview-lyne a:has(.bb-img),
+.bbcode-preview-lyne a:has(svg),
+.bbcode-preview-lyne a.bb-link-img,
+.bbcode-preview.theme-lyne a:has(img),
+.bbcode-preview.theme-lyne a:has(.bb-img),
+.bbcode-preview.theme-lyne a:has(svg),
+.bbcode-preview.theme-lyne a.bb-link-img {
+  border-bottom: none !important;
+  text-decoration: none !important;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.bbcode-preview-lyne a:has(img):hover,
+.bbcode-preview-lyne a:has(.bb-img):hover,
+.bbcode-preview-lyne a:has(svg):hover,
+.bbcode-preview-lyne a.bb-link-img:hover,
+.bbcode-preview.theme-lyne a:has(img):hover,
+.bbcode-preview.theme-lyne a:has(.bb-img):hover,
+.bbcode-preview.theme-lyne a:has(svg):hover,
+.bbcode-preview.theme-lyne a.bb-link-img:hover {
+  border-bottom: none !important;
+  text-decoration: none !important;
+}
+
+.bbcode-preview-lyne a img,
+.bbcode-preview-lyne a .bb-img,
+.bbcode-preview.theme-lyne a img,
+.bbcode-preview.theme-lyne a .bb-img {
+  vertical-align: middle;
+  border: none;
+  text-decoration: none;
+}
+
 /* Forum @mentions — inherit the accent link look, slightly bolder so they
    read as handles rather than plain links. */
 .bbcode-preview-lyne a.bb-mention,
@@ -1121,3 +1173,62 @@
   background-clip: text !important;
   color: transparent !important;
 }
+
+/* ─── Lyne (SYNE) Preview Highlight Overrides ────────────────────────────── */
+
+.theme-lyne [data-bbid]:hover:not(:has([data-bbid]:hover, [data-node-id]:hover)),
+.bbcode-preview-lyne [data-bbid]:hover:not(:has([data-bbid]:hover, [data-node-id]:hover)) {
+  outline: 1.5px solid #2EE6E2 !important;
+  background-color: rgba(46, 230, 226, 0.1) !important;
+  box-shadow: 0 0 8px rgba(46, 230, 226, 0.25) !important;
+}
+
+.theme-lyne[data-hover-highlight="on"] [data-bbid]:hover:not(:has([data-bbid]:hover, [data-node-id]:hover)),
+.bbcode-preview-lyne[data-hover-highlight="on"] [data-bbid]:hover:not(:has([data-bbid]:hover, [data-node-id]:hover)),
+.theme-lyne[data-hover-highlight="on"] [data-node-id]:hover:not(:has([data-bbid]:hover, [data-node-id]:hover)),
+.bbcode-preview-lyne[data-hover-highlight="on"] [data-node-id]:hover:not(:has([data-bbid]:hover, [data-node-id]:hover)) {
+  outline: 1px dashed rgba(46, 230, 226, 0.55) !important;
+  box-shadow: 0 0 6px rgba(46, 230, 226, 0.2) !important;
+}
+
+.theme-lyne [data-node-id].cursor-highlight,
+.bbcode-preview-lyne [data-node-id].cursor-highlight,
+.theme-lyne .cursor-highlight,
+.bbcode-preview-lyne .cursor-highlight {
+  outline: 2px solid #2EE6E2 !important;
+  background-color: rgba(46, 230, 226, 0.18) !important;
+  box-shadow: 0 0 12px rgba(46, 230, 226, 0.35) !important;
+}
+
+.theme-lyne .bb-empty-line.cursor-highlight,
+.bbcode-preview-lyne .bb-empty-line.cursor-highlight {
+  background-color: rgba(46, 230, 226, 0.22) !important;
+  outline: 2px solid #2EE6E2 !important;
+  box-shadow: 0 0 8px rgba(46, 230, 226, 0.3) !important;
+}
+
+.theme-lyne[data-hover-highlight="on"] .bb-empty-line:hover,
+.bbcode-preview-lyne[data-hover-highlight="on"] .bb-empty-line:hover {
+  outline: 1px dashed rgba(46, 230, 226, 0.55) !important;
+  background-color: rgba(46, 230, 226, 0.1) !important;
+}
+
+.theme-lyne div.bb-block.cursor-highlight::after,
+.bbcode-preview-lyne div.bb-block.cursor-highlight::after {
+  box-shadow: inset 0 0 0 2px #2EE6E2, 0 0 10px rgba(46, 230, 226, 0.35) !important;
+  background-color: rgba(46, 230, 226, 0.18) !important;
+}
+
+.theme-lyne span.bb-block.cursor-highlight,
+.bbcode-preview-lyne span.bb-block.cursor-highlight {
+  outline: 2px solid #2EE6E2 !important;
+  background-color: rgba(46, 230, 226, 0.18) !important;
+  box-shadow: 0 0 8px rgba(46, 230, 226, 0.3) !important;
+}
+
+.theme-lyne ::selection,
+.bbcode-preview-lyne ::selection {
+  background-color: rgba(46, 230, 226, 0.3) !important;
+  color: #ffffff !important;
+}
+

package/dist/Visuals/osu.css

@@ -33,6 +33,28 @@
   color: #94C8EA;
   border-bottom: 1px solid rgba(126,184,224,0.7);
 }
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) a:has(img),
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) a:has(.bb-img),
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) a:has(svg),
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) a.bb-link-img {
+  border-bottom: none !important;
+  text-decoration: none !important;
+  display: inline-block;
+  vertical-align: middle;
+}
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) a:has(img):hover,
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) a:has(.bb-img):hover,
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) a:has(svg):hover,
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) a.bb-link-img:hover {
+  border-bottom: none !important;
+  text-decoration: none !important;
+}
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) a img,
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) a .bb-img {
+  vertical-align: middle;
+  border: none;
+  text-decoration: none;
+}
 
 /* ─── Headings ───────────────────────────────────────── */
 
@@ -99,13 +121,22 @@
 /* ─── Spoiler ────────────────────────────────────────── */
 
 .bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .spoiler {
-  background: #000;
-  color: #000;
-  cursor: text;
+  background: #111111;
+  color: #111111;
+  cursor: pointer;
+  padding: 0 4px;
+  border-radius: 3px;
+  user-select: text;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .spoiler:hover,
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .spoiler:active {
+  color: #ffffff;
+  background: #333333;
 }
 .bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .spoiler::selection {
-  color: #fff;
-  background: #555;
+  color: #ffffff;
+  background: #555555;
 }
 
 /* ─── Box / Spoilerbox ───────────────────────────────── */