CSS 테마 ​

NABI NOTE는 편집기와 게시 화면에 같은 CSS를 적용합니다. 패키지 CSS를 한 번 불러온 뒤, 서비스 컨테이너에서 필요한 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에 지정해 기준을 바꿀 수 있습니다. rem, px, calc() 등 0 이상의 CSS 길이 값을 사용합니다. CSS 값, 루트 글자 크기나 화면 폭이 바뀌면 이미 열린 패널에도 자동으로 적용됩니다. body 아래로 옮겨진 입력 패널도 원래 편집기의 기준을 따릅니다.

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

플로트 영역이 한 열로 바뀌는 기준은 별도입니다. 화면 폭이 아니라 본문 컨테이너의 폭이 36rem 미만일 때 한 열로 표시하며, 인쇄할 때도 같은 배치를 사용합니다.

다크 모드 ​

기본은 라이트 모드입니다. 페이지의 html 또는 body에 .dark를 붙이거나, 특정 편집기와 게시 화면에 data-nabi-theme="dark"를 지정하면 다크 모드가 적용됩니다.

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

상위 .dark의 영향을 끊고 싶으면 data-nabi-theme="light"를 사용합니다. 테마 전환은 서비스가 관리하며 패키지가 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;
}

게시 화면에도 CSS를 적용합니다 ​

게시 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;
}

편집 화면에서 바꾸면 안 되는 것 ​

편집 중인 [data-key] 노드의 display나 white-space를 바꾸지 마세요. 편집 텍스트 안에 pseudo-element를 넣거나, 이미지·첨부 같은 객체 wrapper의 포인터 동작을 막는 것도 피해야 합니다. 이런 변경은 캐럿 위치와 DOM의 문서 위치를 어긋나게 할 수 있습니다.

드롭캡은 게시 화면에서는 ::first-letter로 보이지만 편집 화면에서는 실제 [data-nabi-dropcap-letter] 요소를 사용합니다. .nabi-editing 안에서 ::first-letter를 추가하거나 이 요소를 바꾸지 마세요.