CSS-темы ​

NABI NOTE использует один CSS для редактирования и публикации. Один раз подключите таблицу стилей пакета, затем переопределите только нужные переменные в контейнере сервиса.

import 'nabi-note/nabi.css'

.article-editor {
  --nabi-fg: #202124;
  --nabi-bg: #fff;
  --nabi-accent: #5b4ee8;
  --nabi-content-min-height: 20rem;
  --nabi-font: Pretendard, system-ui, sans-serif;
  --nabi-sticky-top: 4rem;
}

Назначьте одинаковый класс темы элементам .nabi редактора и .nabi-content опубликованной страницы, чтобы применить к ним одинаковые переменные. Подключайте CSS сервиса после CSS пакета и указывайте текущую тему через data-nabi-theme.

<div class="nabi brand-note" data-nabi-theme="light">...</div>
<article class="nabi-content brand-note" data-nabi-theme="light">...</article>

.brand-note:is(.nabi, .nabi-content)[data-nabi-theme="light"] {
  --nabi-fg: #1f2937;
  --nabi-muted: #6b7280;
  --nabi-bg: #fff;
  --nabi-soft: #f7f7fb;
  --nabi-line: #e5e7eb;
  --nabi-accent: #635bff;
  --nabi-radius: 10px;
}

Основные переменные ​

Подсветка и цвет текста используют --nabi-hl-<name> и --nabi-tc-<name>. Фон ячеек использует --nabi-cell-<name> со значениями yellow, green, cyan, pink, purple, orange. Переменные меняют только отображаемый цвет, а не сохранённое имя.

.brand-note:is(.nabi, .nabi-content)[data-nabi-theme="light"] {
  --nabi-hl-yellow: #fff0a6;
  --nabi-tc-blue: #2563eb;
  --nabi-cell-cyan: #e2f4f7;
}

В стандартной теме фон ячеек светлый и мягкий. Тёмная тема сохраняет имена цветов, но использует отдельные, более светлые и менее насыщенные оттенки, чтобы их было проще различать на тёмном фоне. Сквозь эти полупрозрачные цвета виден фон; при настройке проверяйте контраст текста на реальном фоне страницы. Чтобы переопределить стандартные переменные цвета, назначайте класс темы непосредственно элементу редактора или опубликованного содержимого, как выше, а не произвольному внешнему родителю.

.brand-note:is(.nabi, .nabi-content)[data-nabi-theme="dark"] {
  --nabi-cell-cyan: #183b43;
}

Порог мобильного режима ​

Стандартная панель layout: 'compact' переходит в одну мобильную строку при ширине экрана менее 36rem. При ровно 36rem сохраняется настольная раскладка. На компьютере все инструменты переносятся на новые строки даже в узком редакторе. Свойства объектов также переносятся ниже; обе строки занимают место над текстом. Полноэкранный режим раскрывает все инструменты при любой ширине.

На мобильном быстрые инструменты, кнопка всех инструментов и подключённые кнопки предпросмотра/полного экрана остаются в основной панели. Они доступны и при появлении свойств. Палитра всех инструментов сохраняет порядок групп и разделители настольной версии. layout: 'wrap' всегда показывает все инструменты с переносом строк.

Мобильные панели открываются в доступном месте вокруг панели инструментов и свойств. Выбор размера таблицы — исключение: он открывается по центру на полупрозрачном фоне с удобной для касаний сеткой 5×5. Он не ждёт закрытия клавиатуры; выбор размера вставляет одну таблицу и закрывает окно выбора.

Задайте --nabi-mobile-breakpoint на :root, предке или отдельном .nabi, чтобы изменить порог. Используйте неотрицательную длину CSS, например rem, px или calc(). Изменения значения CSS, корневого размера шрифта или ширины экрана автоматически применяются и к открытым панелям. Панели ввода, перенесённые под body, сохраняют порог исходного редактора.

.article-editor {
  --nabi-mobile-breakpoint: 40rem;
}

Для перехода плавающих областей в одну колонку действует отдельный порог: ширина контейнера текста, а не экрана, должна быть меньше 36rem. При печати используется та же раскладка.

Тёмная тема ​

По умолчанию используется светлая тема. Добавьте .dark к html или body либо задайте data-nabi-theme="dark" отдельному редактору или опубликованному содержимому.

<div class="nabi" data-nabi-theme="dark">...</div>
<article class="nabi-content" data-nabi-theme="dark">...</article>

data-nabi-theme="light" позволяет отказаться от .dark предка. Переключением темы управляет приложение; пакет не следует prefers-color-scheme автоматически.

.brand-note:is(.nabi, .nabi-content)[data-nabi-theme="dark"] {
  --nabi-fg: #f3f4f6;
  --nabi-muted: #a1a1aa;
  --nabi-bg: #18181b;
  --nabi-soft: #27272a;
  --nabi-line: #3f3f46;
  --nabi-accent: #a5b4fc;
}

Оформляйте и опубликованное содержимое ​

Опубликованному HTML также нужны .nabi-content и тот же CSS. Таблицы, блоки кода, изображения, списки задач и буквицы отображаются без JavaScript. Подключайте nabi-note/viewer только для поведения вроде сортировки таблиц или подсветки кода.

<article class="nabi-content article-body">...</article>

.article-body {
  --nabi-font: "Noto Serif KR", serif;
  --nabi-bg: transparent;
}

Параметры макета, которыми пакет не управляет, например ширину текста и высоту строки, задавайте в классе сервиса.

.article-body {
  max-inline-size: 46rem;
  margin-inline: auto;
  padding: 2rem 1.25rem;
  line-height: 1.75;
}

Не изменяйте структуру редактора ​

Не меняйте display или white-space узлов [data-key] в редакторе, не добавляйте псевдоэлементы внутрь редактируемого текста и не отключайте pointer-поведение обёрток объектов. Такие правила могут нарушить геометрию каретки и сопоставление документа.

Опубликованная буквица использует ::first-letter, а редактор — реальный элемент [data-nabi-dropcap-letter]. Не добавляйте ещё одно правило ::first-letter внутри .nabi-editing и не заменяйте этот элемент.