320 lines
10 KiB
CSS
320 lines
10 KiB
CSS
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Liberation Serif — bundled so the editor renders the EXACT metrics of the
|
|
font the exported .odt uses. odf-kit emits Liberation Serif as the document
|
|
default, and LibreOffice ships the identical file; this keeps the on-screen
|
|
preview pixel-faithful to the export. (SIL Open Font License — see
|
|
src/assets/fonts/LICENSE-LiberationFonts.txt.) */
|
|
@font-face {
|
|
font-family: 'Liberation Serif';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url('../assets/fonts/LiberationSerif-Regular.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Liberation Serif';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: url('../assets/fonts/LiberationSerif-Bold.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Liberation Serif';
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url('../assets/fonts/LiberationSerif-Italic.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Liberation Serif';
|
|
font-style: italic;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: url('../assets/fonts/LiberationSerif-BoldItalic.ttf') format('truetype');
|
|
}
|
|
|
|
/* Bullet-marker symbols Liberation Serif lacks (❖ ➢ ⇨ ✓ ▸ ◆), subset from DejaVu
|
|
Sans so markers render compact and identical on every platform. First in the
|
|
::marker/picker stacks; per-glyph fallback keeps all other chars in the text
|
|
font. (Bitstream Vera license — see src/assets/fonts/LICENSE-DejaVu.txt.) */
|
|
@font-face {
|
|
font-family: 'EdenText Symbols';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url('../assets/fonts/EdenSymbols.woff2') format('woff2');
|
|
}
|
|
|
|
/* Metric-compatible substitutes for the common MS-Office fonts that imported
|
|
.odt files reference. Each face is keyed to the MS name but prefers a real
|
|
local copy, then a system twin, then the bundled open-source twin — so text
|
|
renders with matching metrics (like LibreOffice) instead of dropping to the
|
|
browser's default serif. (OFL — see src/assets/fonts/LICENSE-*.) */
|
|
|
|
/* Calibri → Carlito */
|
|
@font-face {
|
|
font-family: 'Calibri';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: local('Calibri'), local('Carlito'), url('../assets/fonts/Carlito-Regular.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Calibri';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: local('Calibri Bold'), local('Carlito Bold'), url('../assets/fonts/Carlito-Bold.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Calibri';
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: local('Calibri Italic'), local('Carlito Italic'), url('../assets/fonts/Carlito-Italic.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Calibri';
|
|
font-style: italic;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: local('Calibri Bold Italic'), local('Carlito Bold Italic'), url('../assets/fonts/Carlito-BoldItalic.ttf') format('truetype');
|
|
}
|
|
|
|
/* Arial → Liberation Sans */
|
|
@font-face {
|
|
font-family: 'Arial';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: local('Arial'), local('Liberation Sans'), url('../assets/fonts/LiberationSans-Regular.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Arial';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: local('Arial Bold'), local('Liberation Sans Bold'), url('../assets/fonts/LiberationSans-Bold.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Arial';
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: local('Arial Italic'), local('Liberation Sans Italic'), url('../assets/fonts/LiberationSans-Italic.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Arial';
|
|
font-style: italic;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: local('Arial Bold Italic'), local('Liberation Sans Bold Italic'), url('../assets/fonts/LiberationSans-BoldItalic.ttf') format('truetype');
|
|
}
|
|
|
|
/* Cambria → Caladea */
|
|
@font-face {
|
|
font-family: 'Cambria';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: local('Cambria'), local('Caladea'), url('../assets/fonts/Caladea-Regular.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Cambria';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: local('Cambria Bold'), local('Caladea Bold'), url('../assets/fonts/Caladea-Bold.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Cambria';
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: local('Cambria Italic'), local('Caladea Italic'), url('../assets/fonts/Caladea-Italic.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Cambria';
|
|
font-style: italic;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: local('Cambria Bold Italic'), local('Caladea Bold Italic'), url('../assets/fonts/Caladea-BoldItalic.ttf') format('truetype');
|
|
}
|
|
|
|
/* Courier New → Liberation Mono */
|
|
@font-face {
|
|
font-family: 'Courier New';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: local('Courier New'), local('Liberation Mono'), url('../assets/fonts/LiberationMono-Regular.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Courier New';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: local('Courier New Bold'), local('Liberation Mono Bold'), url('../assets/fonts/LiberationMono-Bold.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Courier New';
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: local('Courier New Italic'), local('Liberation Mono Italic'), url('../assets/fonts/LiberationMono-Italic.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Courier New';
|
|
font-style: italic;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: local('Courier New Bold Italic'), local('Liberation Mono Bold Italic'), url('../assets/fonts/LiberationMono-BoldItalic.ttf') format('truetype');
|
|
}
|
|
|
|
/* Times New Roman → Liberation Serif (reuses the bundled Serif files) */
|
|
@font-face {
|
|
font-family: 'Times New Roman';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: local('Times New Roman'), local('Liberation Serif'), url('../assets/fonts/LiberationSerif-Regular.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Times New Roman';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: local('Times New Roman Bold'), local('Liberation Serif Bold'), url('../assets/fonts/LiberationSerif-Bold.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Times New Roman';
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: local('Times New Roman Italic'), local('Liberation Serif Italic'), url('../assets/fonts/LiberationSerif-Italic.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Times New Roman';
|
|
font-style: italic;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: local('Times New Roman Bold Italic'), local('Liberation Serif Bold Italic'), url('../assets/fonts/LiberationSerif-BoldItalic.ttf') format('truetype');
|
|
}
|
|
|
|
:root {
|
|
--radius: 6px;
|
|
--island-radius: 14px; /* corner radius of the floating toolbar card */
|
|
--toolbar-btn-size: 1.7rem; /* height of all toolbar controls (matches the floating toolbars) */
|
|
--shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
--font-serif: 'Liberation Serif', 'Times New Roman', Georgia, serif;
|
|
/* Headings are sans, like LibreOffice's Heading style ('Arial' is the bundled
|
|
Liberation Sans; see HEADING_FONT in export/odt.ts). */
|
|
--font-heading: 'Arial', 'Liberation Sans', sans-serif;
|
|
/* Brand accents: the primary slate + the logo's warm coral; the gradient is
|
|
the app's signature (island hairline). */
|
|
--accent-warm: #d96b4a;
|
|
--brand-gradient: linear-gradient(90deg, var(--color-primary), var(--accent-warm));
|
|
}
|
|
|
|
/* Signature micro-interactions, shared across all toolbar components. */
|
|
@keyframes menu-in {
|
|
from { opacity: 0; transform: translateY(-5px); }
|
|
}
|
|
|
|
.toolbar-region button:active:not(:disabled) {
|
|
transform: scale(0.93);
|
|
}
|
|
|
|
.theme-dropdown, .ol-dropdown, .align-dropdown, .font-dropdown, .size-dropdown,
|
|
.color-dropdown, .char-dropdown, .history-dropdown, .layout-dropdown,
|
|
.lh-dropdown, .sp-dropdown, .table-dropdown, .bp-dropdown {
|
|
animation: menu-in 0.14s ease;
|
|
}
|
|
|
|
/* Scrolling body of a popup menu. Only this inner box scrolls; the panel keeps
|
|
the background and frame, so the elastic overscroll bounce can't drag the
|
|
background off the border and show the page through the gap. */
|
|
.menu-scroll {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.toolbar-region button:active:not(:disabled) { transform: none; }
|
|
.theme-dropdown, .ol-dropdown, .align-dropdown, .font-dropdown, .size-dropdown,
|
|
.color-dropdown, .char-dropdown, .history-dropdown, .layout-dropdown,
|
|
.lh-dropdown, .sp-dropdown, .table-dropdown, .bp-dropdown { animation: none; }
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--color-bg: #e6e9eb;
|
|
--color-surface: #ffffff;
|
|
--color-border: #e2e8f0;
|
|
--color-text: #1e293b;
|
|
--color-text-muted: #94a3b8;
|
|
--color-primary: #52748b;
|
|
--color-toolbar-bg: #ffffff;
|
|
--color-btn-hover: #cbd5e1;
|
|
--color-page-bg: #ffffff;
|
|
--color-page-text: #1e293b;
|
|
--color-page-border: #e2e8f0;
|
|
--scrollbar-thumb: #cbd5e1;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--color-bg: #2f2f31;
|
|
--color-surface: #161b22;
|
|
--color-border: #30363d;
|
|
--color-text: #f2e6f3;
|
|
--color-text-muted: #7d8590;
|
|
--color-primary: #52748b;
|
|
--color-toolbar-bg: #161b22;
|
|
--color-btn-hover: #3b4350;
|
|
--color-page-bg: #ffffff;
|
|
--color-page-text: #1e293b;
|
|
--color-page-border: #e2e8f0;
|
|
/* Primary (active-button color) so the toolbar scrollbar stands out on dark. */
|
|
--scrollbar-thumb: var(--color-primary);
|
|
--scrollbar-thumb-hover: color-mix(in srgb, var(--color-primary) 75%, white);
|
|
}
|
|
|
|
[data-theme="allBlack"] {
|
|
--color-bg: #0d1117;
|
|
--color-surface: #161b22;
|
|
--color-border: #30363d;
|
|
--color-text: #e6edf3;
|
|
--color-text-muted: #7d8590;
|
|
--color-primary: #52748b;
|
|
--color-toolbar-bg: #161b22;
|
|
--color-btn-hover: #3b4350;
|
|
--color-page-bg: #161b22;
|
|
--color-page-text: #e6edf3;
|
|
--color-page-border: #30363d;
|
|
--scrollbar-thumb: var(--color-primary);
|
|
--scrollbar-thumb-hover: color-mix(in srgb, var(--color-primary) 75%, white);
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
font-family: var(--font-sans);
|
|
background: var(--color-bg);
|
|
color: var(--color-text);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
#app {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|