/* Base font-size scaling for large/high-density displays.
* All Tailwind rem-based utilities (spacing, sizing, text) scale proportionally.
* Browser zoom (Ctrl+/−) works on top of this as expected. */
@media (min-width: 1920px) {
html { font-size: 16px; }
}
/**
* Eina Framework CSS Bundle
*
* This includes the auto-generated CSS variables and utility classes based on the active colorscheme,
* as well as any additional framework-wide styles.
*
* The colorscheme variables and utilities are generated dynamically from the active colorscheme definition,
* allowing for easy customization and theming across the entire framework.
*
*/
/* Colorscheme variables — generated from active colorscheme */
:root {
--primary-hover: rgba(26, 58, 107, 0.12);
--error-hover: rgba(220, 38, 38, 0.08);
--secondary-hover: rgba(139, 0, 0, 0.10);
--fg-muted-rgb: 68, 68, 68;
--primary-light-rgb: 42, 82, 152;
--primary-rgb: 26, 58, 107;
--accent-rgb: 26, 58, 107;
--bg-rgb: 255, 255, 255;
--primary-fg-rgb: 255, 255, 255;
--secondary-fg-rgb: 255, 255, 255;
--error-fg-rgb: 255, 255, 255;
--card-rgb: 250, 250, 250;
--surface-rgb: 245, 245, 245;
--border-light-rgb: 224, 224, 224;
--error-rgb: 220, 38, 38;
--border-rgb: 204, 204, 204;
--error-light-rgb: 185, 28, 28;
--fg-rgb: 17, 17, 17;
--secondary-light-rgb: 160, 0, 0;
--secondary-rgb: 139, 0, 0;
--fg-dim-rgb: 119, 119, 119;
--bg: #ffffff;
--primary-fg: #ffffff;
--secondary-fg: #ffffff;
--error-fg: #ffffff;
--card: #fafafa;
--surface: #f5f5f5;
--border-light: #e0e0e0;
--error: #dc2626;
--border: #cccccc;
--error-light: #b91c1c;
--secondary-light: #a00000;
--secondary: #8b0000;
--fg-dim: #777777;
--fg-muted: #444444;
--primary-light: #2a5298;
--primary: #1a3a6b;
--accent: #1a3a6b;
--fg: #111111;
}
/* Colorscheme color utilities — generated from active colorscheme */
.color-text-primary-hover { color: var(--primary-hover); }
.color-bg-primary-hover { background-color: var(--primary-hover); }
.color-border-primary-hover { border-color: var(--primary-hover); }
.hover\:color-bg-primary-hover:hover { background-color: var(--primary-hover); }
.hover\:color-text-primary-hover:hover { color: var(--primary-hover); }
.color-outline-primary-hover { outline-color: var(--primary-hover); }
.color-fill-primary-hover { fill: var(--primary-hover); }
.color-stroke-primary-hover { stroke: var(--primary-hover); }
.color-caret-primary-hover { caret-color: var(--primary-hover); }
.color-accent-primary-hover { accent-color: var(--primary-hover); }
.color-decoration-primary-hover { text-decoration-color: var(--primary-hover); }
.color-placeholder-primary-hover::placeholder { color: var(--primary-hover); }
.color-text-error-hover { color: var(--error-hover); }
.color-bg-error-hover { background-color: var(--error-hover); }
.color-border-error-hover { border-color: var(--error-hover); }
.hover\:color-bg-error-hover:hover { background-color: var(--error-hover); }
.hover\:color-text-error-hover:hover { color: var(--error-hover); }
.color-outline-error-hover { outline-color: var(--error-hover); }
.color-fill-error-hover { fill: var(--error-hover); }
.color-stroke-error-hover { stroke: var(--error-hover); }
.color-caret-error-hover { caret-color: var(--error-hover); }
.color-accent-error-hover { accent-color: var(--error-hover); }
.color-decoration-error-hover { text-decoration-color: var(--error-hover); }
.color-placeholder-error-hover::placeholder { color: var(--error-hover); }
.color-text-secondary-hover { color: var(--secondary-hover); }
.color-bg-secondary-hover { background-color: var(--secondary-hover); }
.color-border-secondary-hover { border-color: var(--secondary-hover); }
.hover\:color-bg-secondary-hover:hover { background-color: var(--secondary-hover); }
.hover\:color-text-secondary-hover:hover { color: var(--secondary-hover); }
.color-outline-secondary-hover { outline-color: var(--secondary-hover); }
.color-fill-secondary-hover { fill: var(--secondary-hover); }
.color-stroke-secondary-hover { stroke: var(--secondary-hover); }
.color-caret-secondary-hover { caret-color: var(--secondary-hover); }
.color-accent-secondary-hover { accent-color: var(--secondary-hover); }
.color-decoration-secondary-hover { text-decoration-color: var(--secondary-hover); }
.color-placeholder-secondary-hover::placeholder { color: var(--secondary-hover); }
.color-text-bg { color: var(--bg); }
.color-bg-bg { background-color: var(--bg); }
.color-border-bg { border-color: var(--bg); }
.hover\:color-bg-bg:hover { background-color: var(--bg); }
.hover\:color-text-bg:hover { color: var(--bg); }
.color-outline-bg { outline-color: var(--bg); }
.color-fill-bg { fill: var(--bg); }
.color-stroke-bg { stroke: var(--bg); }
.color-caret-bg { caret-color: var(--bg); }
.color-accent-bg { accent-color: var(--bg); }
.color-decoration-bg { text-decoration-color: var(--bg); }
.color-placeholder-bg::placeholder { color: var(--bg); }
.color-text-primary-fg { color: var(--primary-fg); }
.color-bg-primary-fg { background-color: var(--primary-fg); }
.color-border-primary-fg { border-color: var(--primary-fg); }
.hover\:color-bg-primary-fg:hover { background-color: var(--primary-fg); }
.hover\:color-text-primary-fg:hover { color: var(--primary-fg); }
.color-outline-primary-fg { outline-color: var(--primary-fg); }
.color-fill-primary-fg { fill: var(--primary-fg); }
.color-stroke-primary-fg { stroke: var(--primary-fg); }
.color-caret-primary-fg { caret-color: var(--primary-fg); }
.color-accent-primary-fg { accent-color: var(--primary-fg); }
.color-decoration-primary-fg { text-decoration-color: var(--primary-fg); }
.color-placeholder-primary-fg::placeholder { color: var(--primary-fg); }
.color-text-secondary-fg { color: var(--secondary-fg); }
.color-bg-secondary-fg { background-color: var(--secondary-fg); }
.color-border-secondary-fg { border-color: var(--secondary-fg); }
.hover\:color-bg-secondary-fg:hover { background-color: var(--secondary-fg); }
.hover\:color-text-secondary-fg:hover { color: var(--secondary-fg); }
.color-outline-secondary-fg { outline-color: var(--secondary-fg); }
.color-fill-secondary-fg { fill: var(--secondary-fg); }
.color-stroke-secondary-fg { stroke: var(--secondary-fg); }
.color-caret-secondary-fg { caret-color: var(--secondary-fg); }
.color-accent-secondary-fg { accent-color: var(--secondary-fg); }
.color-decoration-secondary-fg { text-decoration-color: var(--secondary-fg); }
.color-placeholder-secondary-fg::placeholder { color: var(--secondary-fg); }
.color-text-error-fg { color: var(--error-fg); }
.color-bg-error-fg { background-color: var(--error-fg); }
.color-border-error-fg { border-color: var(--error-fg); }
.hover\:color-bg-error-fg:hover { background-color: var(--error-fg); }
.hover\:color-text-error-fg:hover { color: var(--error-fg); }
.color-outline-error-fg { outline-color: var(--error-fg); }
.color-fill-error-fg { fill: var(--error-fg); }
.color-stroke-error-fg { stroke: var(--error-fg); }
.color-caret-error-fg { caret-color: var(--error-fg); }
.color-accent-error-fg { accent-color: var(--error-fg); }
.color-decoration-error-fg { text-decoration-color: var(--error-fg); }
.color-placeholder-error-fg::placeholder { color: var(--error-fg); }
.color-text-card { color: var(--card); }
.color-bg-card { background-color: var(--card); }
.color-border-card { border-color: var(--card); }
.hover\:color-bg-card:hover { background-color: var(--card); }
.hover\:color-text-card:hover { color: var(--card); }
.color-outline-card { outline-color: var(--card); }
.color-fill-card { fill: var(--card); }
.color-stroke-card { stroke: var(--card); }
.color-caret-card { caret-color: var(--card); }
.color-accent-card { accent-color: var(--card); }
.color-decoration-card { text-decoration-color: var(--card); }
.color-placeholder-card::placeholder { color: var(--card); }
.color-text-surface { color: var(--surface); }
.color-bg-surface { background-color: var(--surface); }
.color-border-surface { border-color: var(--surface); }
.hover\:color-bg-surface:hover { background-color: var(--surface); }
.hover\:color-text-surface:hover { color: var(--surface); }
.color-outline-surface { outline-color: var(--surface); }
.color-fill-surface { fill: var(--surface); }
.color-stroke-surface { stroke: var(--surface); }
.color-caret-surface { caret-color: var(--surface); }
.color-accent-surface { accent-color: var(--surface); }
.color-decoration-surface { text-decoration-color: var(--surface); }
.color-placeholder-surface::placeholder { color: var(--surface); }
.color-text-border-light { color: var(--border-light); }
.color-bg-border-light { background-color: var(--border-light); }
.color-border-border-light { border-color: var(--border-light); }
.hover\:color-bg-border-light:hover { background-color: var(--border-light); }
.hover\:color-text-border-light:hover { color: var(--border-light); }
.color-outline-border-light { outline-color: var(--border-light); }
.color-fill-border-light { fill: var(--border-light); }
.color-stroke-border-light { stroke: var(--border-light); }
.color-caret-border-light { caret-color: var(--border-light); }
.color-accent-border-light { accent-color: var(--border-light); }
.color-decoration-border-light { text-decoration-color: var(--border-light); }
.color-placeholder-border-light::placeholder { color: var(--border-light); }
.color-text-error { color: var(--error); }
.color-bg-error { background-color: var(--error); }
.color-border-error { border-color: var(--error); }
.hover\:color-bg-error:hover { background-color: var(--error); }
.hover\:color-text-error:hover { color: var(--error); }
.color-outline-error { outline-color: var(--error); }
.color-fill-error { fill: var(--error); }
.color-stroke-error { stroke: var(--error); }
.color-caret-error { caret-color: var(--error); }
.color-accent-error { accent-color: var(--error); }
.color-decoration-error { text-decoration-color: var(--error); }
.color-placeholder-error::placeholder { color: var(--error); }
.color-text-border { color: var(--border); }
.color-bg-border { background-color: var(--border); }
.color-border-border { border-color: var(--border); }
.hover\:color-bg-border:hover { background-color: var(--border); }
.hover\:color-text-border:hover { color: var(--border); }
.color-outline-border { outline-color: var(--border); }
.color-fill-border { fill: var(--border); }
.color-stroke-border { stroke: var(--border); }
.color-caret-border { caret-color: var(--border); }
.color-accent-border { accent-color: var(--border); }
.color-decoration-border { text-decoration-color: var(--border); }
.color-placeholder-border::placeholder { color: var(--border); }
.color-text-error-light { color: var(--error-light); }
.color-bg-error-light { background-color: var(--error-light); }
.color-border-error-light { border-color: var(--error-light); }
.hover\:color-bg-error-light:hover { background-color: var(--error-light); }
.hover\:color-text-error-light:hover { color: var(--error-light); }
.color-outline-error-light { outline-color: var(--error-light); }
.color-fill-error-light { fill: var(--error-light); }
.color-stroke-error-light { stroke: var(--error-light); }
.color-caret-error-light { caret-color: var(--error-light); }
.color-accent-error-light { accent-color: var(--error-light); }
.color-decoration-error-light { text-decoration-color: var(--error-light); }
.color-placeholder-error-light::placeholder { color: var(--error-light); }
.color-text-secondary-light { color: var(--secondary-light); }
.color-bg-secondary-light { background-color: var(--secondary-light); }
.color-border-secondary-light { border-color: var(--secondary-light); }
.hover\:color-bg-secondary-light:hover { background-color: var(--secondary-light); }
.hover\:color-text-secondary-light:hover { color: var(--secondary-light); }
.color-outline-secondary-light { outline-color: var(--secondary-light); }
.color-fill-secondary-light { fill: var(--secondary-light); }
.color-stroke-secondary-light { stroke: var(--secondary-light); }
.color-caret-secondary-light { caret-color: var(--secondary-light); }
.color-accent-secondary-light { accent-color: var(--secondary-light); }
.color-decoration-secondary-light { text-decoration-color: var(--secondary-light); }
.color-placeholder-secondary-light::placeholder { color: var(--secondary-light); }
.color-text-secondary { color: var(--secondary); }
.color-bg-secondary { background-color: var(--secondary); }
.color-border-secondary { border-color: var(--secondary); }
.hover\:color-bg-secondary:hover { background-color: var(--secondary); }
.hover\:color-text-secondary:hover { color: var(--secondary); }
.color-outline-secondary { outline-color: var(--secondary); }
.color-fill-secondary { fill: var(--secondary); }
.color-stroke-secondary { stroke: var(--secondary); }
.color-caret-secondary { caret-color: var(--secondary); }
.color-accent-secondary { accent-color: var(--secondary); }
.color-decoration-secondary { text-decoration-color: var(--secondary); }
.color-placeholder-secondary::placeholder { color: var(--secondary); }
.color-text-fg-dim { color: var(--fg-dim); }
.color-bg-fg-dim { background-color: var(--fg-dim); }
.color-border-fg-dim { border-color: var(--fg-dim); }
.hover\:color-bg-fg-dim:hover { background-color: var(--fg-dim); }
.hover\:color-text-fg-dim:hover { color: var(--fg-dim); }
.color-outline-fg-dim { outline-color: var(--fg-dim); }
.color-fill-fg-dim { fill: var(--fg-dim); }
.color-stroke-fg-dim { stroke: var(--fg-dim); }
.color-caret-fg-dim { caret-color: var(--fg-dim); }
.color-accent-fg-dim { accent-color: var(--fg-dim); }
.color-decoration-fg-dim { text-decoration-color: var(--fg-dim); }
.color-placeholder-fg-dim::placeholder { color: var(--fg-dim); }
.color-text-fg-muted { color: var(--fg-muted); }
.color-bg-fg-muted { background-color: var(--fg-muted); }
.color-border-fg-muted { border-color: var(--fg-muted); }
.hover\:color-bg-fg-muted:hover { background-color: var(--fg-muted); }
.hover\:color-text-fg-muted:hover { color: var(--fg-muted); }
.color-outline-fg-muted { outline-color: var(--fg-muted); }
.color-fill-fg-muted { fill: var(--fg-muted); }
.color-stroke-fg-muted { stroke: var(--fg-muted); }
.color-caret-fg-muted { caret-color: var(--fg-muted); }
.color-accent-fg-muted { accent-color: var(--fg-muted); }
.color-decoration-fg-muted { text-decoration-color: var(--fg-muted); }
.color-placeholder-fg-muted::placeholder { color: var(--fg-muted); }
.color-text-primary-light { color: var(--primary-light); }
.color-bg-primary-light { background-color: var(--primary-light); }
.color-border-primary-light { border-color: var(--primary-light); }
.hover\:color-bg-primary-light:hover { background-color: var(--primary-light); }
.hover\:color-text-primary-light:hover { color: var(--primary-light); }
.color-outline-primary-light { outline-color: var(--primary-light); }
.color-fill-primary-light { fill: var(--primary-light); }
.color-stroke-primary-light { stroke: var(--primary-light); }
.color-caret-primary-light { caret-color: var(--primary-light); }
.color-accent-primary-light { accent-color: var(--primary-light); }
.color-decoration-primary-light { text-decoration-color: var(--primary-light); }
.color-placeholder-primary-light::placeholder { color: var(--primary-light); }
.color-text-primary { color: var(--primary); }
.color-bg-primary { background-color: var(--primary); }
.color-border-primary { border-color: var(--primary); }
.hover\:color-bg-primary:hover { background-color: var(--primary); }
.hover\:color-text-primary:hover { color: var(--primary); }
.color-outline-primary { outline-color: var(--primary); }
.color-fill-primary { fill: var(--primary); }
.color-stroke-primary { stroke: var(--primary); }
.color-caret-primary { caret-color: var(--primary); }
.color-accent-primary { accent-color: var(--primary); }
.color-decoration-primary { text-decoration-color: var(--primary); }
.color-placeholder-primary::placeholder { color: var(--primary); }
.color-text-accent { color: var(--accent); }
.color-bg-accent { background-color: var(--accent); }
.color-border-accent { border-color: var(--accent); }
.hover\:color-bg-accent:hover { background-color: var(--accent); }
.hover\:color-text-accent:hover { color: var(--accent); }
.color-outline-accent { outline-color: var(--accent); }
.color-fill-accent { fill: var(--accent); }
.color-stroke-accent { stroke: var(--accent); }
.color-caret-accent { caret-color: var(--accent); }
.color-accent-accent { accent-color: var(--accent); }
.color-decoration-accent { text-decoration-color: var(--accent); }
.color-placeholder-accent::placeholder { color: var(--accent); }
.color-text-fg { color: var(--fg); }
.color-bg-fg { background-color: var(--fg); }
.color-border-fg { border-color: var(--fg); }
.hover\:color-bg-fg:hover { background-color: var(--fg); }
.hover\:color-text-fg:hover { color: var(--fg); }
.color-outline-fg { outline-color: var(--fg); }
.color-fill-fg { fill: var(--fg); }
.color-stroke-fg { stroke: var(--fg); }
.color-caret-fg { caret-color: var(--fg); }
.color-accent-fg { accent-color: var(--fg); }
.color-decoration-fg { text-decoration-color: var(--fg); }
.color-placeholder-fg::placeholder { color: var(--fg); }
/* ─────────────────────────────────────────────
App component classes — framework-wide defaults
Use these for colors/behavior; use Tailwind for
sizing, spacing, rounded corners, etc.
───────────────────────────────────────────── */
/* ── Inputs & textareas ── */
.app-input {
background-color: var(--surface);
border: 1px solid var(--border);
color: var(--fg);
transition: border-color 0.2s, box-shadow 0.2s;
}
.app-input::placeholder {
color: var(--fg-dim);
}
.app-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-hover);
}
.app-input:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ── Select ── */
.app-select {
background-color: var(--surface);
border: 1px solid var(--border);
color: var(--fg);
transition: border-color 0.2s, box-shadow 0.2s;
cursor: pointer;
}
.app-select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-hover);
}
/* ── Primary button ── */
.app-button {
background-color: var(--primary);
color: var(--primary-fg);
transition: opacity 0.15s;
cursor: pointer;
}
.app-button:hover {
opacity: 0.88;
}
.app-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ── Upload-pending spinner on submit buttons ── */
/* Applied by form_validation.js when upload:statechange fires with pending > 0 */
@keyframes _fv-spin { to { transform: rotate(360deg); } }
[data-uploads-pending] {
position: relative;
opacity: 0.7;
cursor: wait;
pointer-events: none;
}
[data-uploads-pending]::after {
content: '';
position: absolute;
inset: 0;
margin: auto;
width: 1rem;
height: 1rem;
border-radius: 50%;
border: 2px solid currentColor;
border-top-color: transparent;
animation: _fv-spin 0.7s linear infinite;
}
[data-uploads-pending] > * {
visibility: hidden;
}
/* ── Secondary/ghost button ── */
.app-button-secondary {
background-color: transparent;
border: 1px solid var(--border);
color: var(--fg);
transition: background-color 0.15s, border-color 0.15s;
cursor: pointer;
}
.app-button-secondary:hover {
background-color: var(--primary-hover);
border-color: var(--primary);
}
/* ── Role / option card (checkbox-based) ──
Usage:
── */
.app-role-card {
background-color: var(--surface);
border: 1.5px solid var(--border);
transition: border-color 0.15s, background-color 0.15s;
cursor: pointer;
}
.app-role-card:has(input:checked) {
border-color: var(--primary);
background-color: var(--primary-hover);
}
/* ── Toggle (checkbox-based) ──
Usage:
── */
.app-toggle {
display: inline-flex;
align-items: center;
cursor: pointer;
gap: 0.5rem;
}
.app-toggle input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.app-toggle-track {
width: 2.5rem;
height: 1.375rem;
background-color: var(--border);
border-radius: 9999px;
position: relative;
transition: background-color 0.2s;
}
.app-toggle:has(input:checked) .app-toggle-track {
background-color: var(--primary);
}
.app-toggle-thumb {
width: 1rem;
height: 1rem;
background-color: #fff;
border-radius: 9999px;
position: absolute;
top: 0.1875rem;
left: 0.1875rem;
transition: transform 0.2s;
pointer-events: none;
}
.app-toggle:has(input:checked) .app-toggle-thumb {
transform: translateX(1.125rem);
}
/* ── Datagrid rows ── */
.datagrid-tbody tr {
border-bottom: 1px solid var(--border);
}
/* ── Datagrid scrollable body ── */
.datagrid-tbody-wrap {
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.datagrid-tbody-wrap::-webkit-scrollbar {
width: 4px;
height: 4px;
}
.datagrid-tbody-wrap::-webkit-scrollbar-track {
background: transparent;
}
.datagrid-tbody-wrap::-webkit-scrollbar-thumb {
background-color: var(--border);
border-radius: 99px;
}
/* ─────────────────────────────────────────────
EditorJS — field preview, modal editor, image gallery
───────────────────────────────────────────── */
/* ── Inline preview container ── */
.editorjs-preview {
font-size: 0.9375rem;
line-height: 1.7;
text-decoration: none; /* reset inherited underline from any ancestor */
color: #111827;
}
/* ── Placeholder ── */
.editorjs-preview .editorjs-placeholder {
color: #9ca3af;
font-style: italic;
}
/* ── Shared prose: .editorjs-preview (inline) and .ejs-prose (AJAX modal preview) ── */
.editorjs-preview p,
.ejs-prose p { margin: 0 0 0.85em; line-height: 1.75; }
.editorjs-preview h1, .editorjs-preview h2, .editorjs-preview h3,
.editorjs-preview h4, .editorjs-preview h5, .editorjs-preview h6,
.ejs-prose h1, .ejs-prose h2, .ejs-prose h3,
.ejs-prose h4, .ejs-prose h5, .ejs-prose h6 {
font-weight: 700;
line-height: 1.25;
margin: 1em 0 0.35em;
}
.editorjs-preview h1, .ejs-prose h1 { font-size: 2em; }
.editorjs-preview h2, .ejs-prose h2 { font-size: 1.5em; }
.editorjs-preview h3, .ejs-prose h3 { font-size: 1.25em; }
.editorjs-preview h4, .ejs-prose h4 { font-size: 1.1em; }
.editorjs-preview h5, .ejs-prose h5 { font-size: 0.95em; }
.editorjs-preview h6, .ejs-prose h6 { font-size: 0.875em; color: #6b7280; }
.editorjs-preview ul, .editorjs-preview ol,
.ejs-prose ul, .ejs-prose ol { margin: 0 0 0.85em; padding-left: 1.75em; }
.editorjs-preview ul, .ejs-prose ul { list-style-type: disc; }
.editorjs-preview ol, .ejs-prose ol { list-style-type: decimal; }
.editorjs-preview li, .ejs-prose li { margin: 0 0 0.3em; line-height: 1.65; }
.editorjs-preview li > ul, .editorjs-preview li > ol,
.ejs-prose li > ul, .ejs-prose li > ol { margin-top: 0.25em; margin-bottom: 0; }
.editorjs-preview table, .ejs-prose table {
border-collapse: collapse; width: 100%; margin: 0 0 1em; font-size: 0.9em;
}
.editorjs-preview th, .ejs-prose th {
background: #f1f5f9; font-weight: 600; text-align: left;
padding: 0.45rem 0.7rem; border: 1px solid #e2e8f0; white-space: nowrap;
}
.editorjs-preview td, .ejs-prose td {
padding: 0.45rem 0.7rem; border: 1px solid #e2e8f0; vertical-align: top;
}
.editorjs-preview tr:nth-child(even) td,
.ejs-prose tr:nth-child(even) td { background: #f8fafc; }
.editorjs-preview pre, .ejs-prose pre {
background: #1e293b; color: #e2e8f0; padding: 0.9rem 1.1rem;
border-radius: 0.5rem; overflow-x: auto; margin: 0 0 1em;
font-size: 0.85em; line-height: 1.6;
}
.editorjs-preview pre code, .ejs-prose pre code {
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
background: none; padding: 0; font-size: inherit; color: inherit;
}
.editorjs-preview code, .ejs-prose code {
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
background: #f1f5f9; padding: 0.15em 0.35em; border-radius: 0.25em;
font-size: 0.85em; color: #c026d3;
}
.editorjs-preview blockquote, .ejs-prose blockquote {
border-left: 3px solid #e5e7eb; padding: 0.2em 0 0.2em 1em;
margin: 0 0 1em; color: #4b5563; font-style: italic;
}
.editorjs-preview blockquote p, .ejs-prose blockquote p { margin: 0 0 0.2em; }
.editorjs-preview blockquote cite, .ejs-prose blockquote cite {
font-size: 0.875em; color: #9ca3af; font-style: normal;
display: block; margin-top: 0.3em;
}
.editorjs-preview hr, .ejs-prose hr { border: none; border-top: 2px solid #e5e7eb; margin: 1.25em 0; }
.editorjs-preview strong, .editorjs-preview b,
.ejs-prose strong, .ejs-prose b { font-weight: 700; }
.editorjs-preview em, .editorjs-preview i,
.ejs-prose em, .ejs-prose i { font-style: italic; }
.editorjs-preview a, .ejs-prose a { color: #2563eb; text-decoration: underline; }
.editorjs-preview a:hover, .ejs-prose a:hover { color: #1d4ed8; }
/* ── Image gallery output ── */
.ejs-image-gallery-output { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.5rem 0; }
.ejs-image-gallery-output figure { margin: 0; flex-shrink: 0; }
.ejs-image-gallery-output figure img {
display: block; width: 80px; height: 60px;
object-fit: cover; border-radius: 0.375rem;
}
/* ── EditorJS modal mount — heading reset (Tailwind preflight overrides) ── */
.ejs-modal-mount .ce-paragraph[data-placeholder]:empty::before { color: #9ca3af; }
.ejs-modal-mount .ce-header { font-weight: 700; line-height: 1.25; margin: 0; }
.ejs-modal-mount h1.ce-header { font-size: 2em; }
.ejs-modal-mount h2.ce-header { font-size: 1.5em; }
.ejs-modal-mount h3.ce-header { font-size: 1.25em; }
.ejs-modal-mount h4.ce-header { font-size: 1.1em; }
.ejs-modal-mount h5.ce-header { font-size: 0.95em; }
.ejs-modal-mount h6.ce-header { font-size: 0.85em; color: #6b7280; }
/* ── ImageGalleryTool editor UI ── */
.ejs-img-tool { padding: 0.25rem 0; }
.ejs-img-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; user-select: none; }
.ejs-img-item { position: relative; width: 100px; height: 100px; border-radius: 0.5rem; overflow: hidden; background: #e5e7eb; cursor: grab; flex-shrink: 0; }
.ejs-img-item img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ejs-img-item--dragging { opacity: 0.35; }
.ejs-img-item--loading { display: flex; align-items: center; justify-content: center; background: #f3f4f6; }
.ejs-img-item--error { display: flex; align-items: center; justify-content: center; background: #fee2e2; font-size: 1.25rem; font-weight: 700; color: #ef4444; cursor: default; }
.ejs-img-remove { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; line-height: 1; padding: 0; opacity: 0; transition: opacity 0.15s; }
.ejs-img-item:hover .ejs-img-remove { opacity: 1; }
.ejs-img-dropzone { border: 2px dashed #d1d5db; border-radius: 0.5rem; padding: 0.625rem 1rem; text-align: center; color: #9ca3af; font-size: 0.8125rem; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; user-select: none; }
.ejs-img-dropzone:hover, .ejs-img-dropzone--over { border-color: #9ca3af; background: #f9fafb; color: #6b7280; }
.ejs-img-spinner { width: 22px; height: 22px; border: 3px solid #e5e7eb; border-top-color: #9ca3af; border-radius: 50%; animation: ejs-spin 0.7s linear infinite; }
@keyframes ejs-spin { to { transform: rotate(360deg); } }
/* ── Per-block visibility (VisibilityTune) ── */
@media (max-width: 767px) { .ejs-desktop-only { display: none !important; } }
@media (min-width: 768px) { .ejs-mobile-only { display: none !important; } }
/* ── Modal preview page scrollbar ── */
.ejs-preview-page { scrollbar-width: thin; scrollbar-color: #d1d5db transparent; }
.ejs-preview-page::-webkit-scrollbar { width: 4px; }
.ejs-preview-page::-webkit-scrollbar-track { background: transparent; }
.ejs-preview-page::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 99px; }