@miliastry/quasar 1.0.5 → 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,
@@ -249,8 +301,8 @@
  * del autor ([boxw=Title:#hex]) si lo hay; si no, el hairline del tema. */
 .bbcode-preview-lyne details.boxw,
 .bbcode-preview.theme-lyne details.boxw {
-  background: rgba(11, 16, 36, 0.5) !important;
-  border: 1px solid var(--box-accent, var(--card-accent, var(--glass-accent, var(--color-hairline, rgba(255, 255, 255, 0.12))))) !important;
+  background: var(--box-bg, rgba(11, 16, 36, 0.5)) !important;
+  border: 1px solid var(--box-border, var(--box-accent, var(--card-accent, var(--glass-accent, var(--color-hairline, rgba(255, 255, 255, 0.12)))))) !important;
   border-radius: 0 !important;
   clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px) !important;
   padding: 0 !important;
@@ -331,8 +383,8 @@
   width: 7px !important;
   height: 7px !important;
   flex: 0 0 7px !important;
-  border-right: 1.5px solid currentColor !important;
-  border-bottom: 1.5px solid currentColor !important;
+  border-right: 1px solid currentColor !important;
+  border-bottom: 1px solid currentColor !important;
   transform: rotate(-45deg) !important;
   transition: transform 0.15s ease !important;
 }
@@ -360,7 +412,7 @@
 
 .bbcode-preview-lyne details.boxw[open] > summary,
 .bbcode-preview.theme-lyne details.boxw[open] > summary {
-  border-bottom: 1px solid var(--box-accent, var(--card-accent, var(--glass-accent, var(--color-hairline, rgba(255, 255, 255, 0.12))))) !important;
+  border-bottom: 1px solid var(--box-border, var(--box-accent, var(--card-accent, var(--glass-accent, var(--color-hairline, rgba(255, 255, 255, 0.12)))))) !important;
 }
 
 .bbcode-preview-lyne details[open] > summary::before,
@@ -370,7 +422,8 @@
 
 .bbcode-preview-lyne details > summary:hover,
 .bbcode-preview.theme-lyne details > summary:hover {
-  color: var(--color-accent-bright, #68FFF8) !important;
+  color: var(--box-accent, var(--card-accent, var(--glass-accent, var(--color-accent-bright, #68FFF8)))) !important;
+  filter: brightness(1.25) !important;
 }
 
 /* ─── Lists & Markers ───────────────────────────────────────────────────── */
@@ -469,6 +522,7 @@
 .bb-table {
   width: 100% !important;
   min-width: 380px !important;
+  table-layout: fixed !important;
   border-collapse: separate !important;
   border-spacing: 0 !important;
   margin: 0 !important;
@@ -518,6 +572,64 @@
   line-height: 1.3 !important;
   text-transform: uppercase !important;
   padding: 8px 10px !important;
+  text-align: left !important;
+}
+
+.bb-table .bb-th.bb-th-full {
+  width: 100% !important;
+}
+
+/* Table header alignments */
+.bb-table .bb-th.bb-th-left,
+.bb-table .bb-th:has(.bb-left),
+.bb-table .bb-th:has([style*="text-align:left"]),
+.bb-table .bb-th:has([style*="text-align: left"]),
+.bb-left .bb-table .bb-th {
+  text-align: left !important;
+}
+
+.bb-table .bb-th.bb-th-left .bb-table-badge,
+.bb-table .bb-th:has(.bb-left) .bb-table-badge,
+.bb-table .bb-th:has([style*="text-align:left"]) .bb-table-badge,
+.bb-table .bb-th:has([style*="text-align: left"]) .bb-table-badge,
+.bb-left .bb-table .bb-th .bb-table-badge {
+  margin-right: auto !important;
+  margin-left: 0 !important;
+}
+
+.bb-table .bb-th.bb-th-centered,
+.bb-table .bb-th.bb-th-center,
+.bb-table .bb-th:has(.bb-centre),
+.bb-table .bb-th:has([style*="text-align:center"]),
+.bb-table .bb-th:has([style*="text-align: center"]),
+.bb-centre .bb-table .bb-th {
+  text-align: center !important;
+}
+
+.bb-table .bb-th.bb-th-centered .bb-table-badge,
+.bb-table .bb-th.bb-th-center .bb-table-badge,
+.bb-table .bb-th:has(.bb-centre) .bb-table-badge,
+.bb-table .bb-th:has([style*="text-align:center"]) .bb-table-badge,
+.bb-table .bb-th:has([style*="text-align: center"]) .bb-table-badge,
+.bb-centre .bb-table .bb-th .bb-table-badge {
+  margin: 0 auto !important;
+}
+
+.bb-table .bb-th.bb-th-right,
+.bb-table .bb-th:has(.bb-right),
+.bb-table .bb-th:has([style*="text-align:right"]),
+.bb-table .bb-th:has([style*="text-align: right"]),
+.bb-right .bb-table .bb-th {
+  text-align: right !important;
+}
+
+.bb-table .bb-th.bb-th-right .bb-table-badge,
+.bb-table .bb-th:has(.bb-right) .bb-table-badge,
+.bb-table .bb-th:has([style*="text-align:right"]) .bb-table-badge,
+.bb-table .bb-th:has([style*="text-align: right"]) .bb-table-badge,
+.bb-right .bb-table .bb-th .bb-table-badge {
+  margin-left: auto !important;
+  margin-right: 0 !important;
 }
 
 .bb-table-badge {
@@ -733,7 +845,7 @@
 .bb-neon-box {
   padding: 16px !important;
   margin: 0 !important;
-  border: 2px solid var(--neon-color, var(--color-accent, #2EE6E2)) !important;
+  border: 1px solid var(--neon-color, var(--color-accent, #2EE6E2)) !important;
   background: color-mix(in srgb, var(--neon-color, var(--color-accent, #2EE6E2)) 4%, rgba(7, 10, 23, 0.55)) !important;
   border-radius: 0 !important;
   box-shadow: none !important;
@@ -758,10 +870,9 @@
   align-items: center !important;
 }
 
-/* Circle: replica el .bbCircle original de Lyne (Main Bridge/line/web/
- * components/bbcode.module.css). aspect-ratio:1 + centrado convierten el div
- * en un círculo real con el contenido al centro; fondo y borde lo pintan como
- * badge. clip-path:none evita que herede los cortes de esquina de los paneles. */
+/* Square: cuadradito badge con las muescas angulares características de Lyne.
+ * aspect-ratio: 1/1, centrado, borde hairline y corte angular de esquina. */
+.bb-square,
 .bb-circle {
   display: inline-flex !important;
   align-items: center !important;
@@ -771,11 +882,11 @@
   min-height: 1.85em !important;
   padding: 0.2em 0.35em !important;
   box-sizing: border-box !important;
-  border-radius: 50% !important;
+  border-radius: 0 !important;
   overflow: hidden !important;
-  background: rgb(11 16 36 / 0.5) !important;
-  border: 1px solid var(--color-hairline, rgba(255, 255, 255, 0.12)) !important;
-  clip-path: none !important;
+  background: var(--square-bg, rgb(11 16 36 / 0.5)) !important;
+  border: 1px solid var(--square-border, var(--square-accent, var(--color-hairline, rgba(255, 255, 255, 0.12)))) !important;
+  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px) !important;
   text-align: center !important;
   line-height: 1 !important;
   vertical-align: middle !important;
@@ -1062,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 ───────────────────────────────── */