CSS தீம்கள் ​

NABI NOTE திருத்தலுக்கும் வெளியிடப்பட்ட உள்ளடக்கத்திற்கும் ஒரே CSS-ஐப் பயன்படுத்துகிறது. package stylesheet-ஐ ஒருமுறை ஏற்றி, சேவை container-இல் தேவையான மாறிகளை மட்டும் override செய்வது பாதுகாப்பானது.

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() போன்ற எதிர்மறையல்லாத CSS நீளத்தைப் பயன்படுத்தவும். CSS மதிப்பு, மூல எழுத்துரு அளவு அல்லது திரை அகலம் மாறும்போது திறந்த பலகைகளும் தானாகப் புதுப்படும். body கீழ் நகர்த்திய உள்ளீட்டுப் பலகைகள் அசல் திருத்தியின் வரம்பைப் பின்பற்றும்.

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

மிதக்கும் பகுதிகள் ஒரு நெடுவரிசையாக மாறுவதற்குத் தனி வரம்பு உண்டு. திரை அல்ல, உரைக் கொள்கலனின் அகலம் 36rem-க்குக் குறையும்போது ஒரு நெடுவரிசை பயன்படுத்தப்படும்; அச்சிடும்போதும் அதே அமைப்பு பயன்படும்.

இருண்ட பயன்முறை ​

ஒளி பயன்முறையே இயல்புநிலை. html அல்லது body-இல் .dark-ஐச் சேர்க்கவும், அல்லது குறிப்பிட்ட திருத்தி அல்லது வெளியிடப்பட்ட body-இல் data-nabi-theme="dark"-ஐ அமைக்கவும்.

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

parent-இன் .dark-இலிருந்து விலக data-nabi-theme="light"-ஐப் பயன்படுத்துங்கள். தீம் மாற்றத்தை உங்கள் application நிர்வகிக்கிறது; package தானாக 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;
}

வெளியிடப்பட்ட உள்ளடக்கத்திற்கும் style அளியுங்கள் ​

வெளியிடப்பட்ட HTML-க்கும் .nabi-content மற்றும் அதே CSS தேவை. அட்டவணைகள், code block-கள், படங்கள், checklist-கள் மற்றும் drop cap-கள் JavaScript இன்றியே render ஆகும். அட்டவணை வரிசைப்படுத்தல் அல்லது code highlighting போன்ற நடத்தைக்காக மட்டுமே nabi-note/viewer-ஐச் சேர்க்கவும்.

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

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

உரை அகலம் மற்றும் வரி உயரம் போன்ற package-க்குச் சொந்தமில்லாத layout-ஐ உங்கள் சேவை class-இல் அமைக்கவும்.

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

திருத்தும் அமைப்பை மாற்றாதீர்கள் ​

திருத்தும் [data-key] node-களில் display அல்லது white-space-ஐ மாற்றாதீர்கள்; திருத்தக்கூடிய உரைக்குள் pseudo-element-களைச் சேர்க்காதீர்கள்; object wrapper-களின் pointer நடத்தையையும் முடக்காதீர்கள். இவ்விதிகள் caret geometry-யையும் ஆவண mapping-ஐயும் உடைக்கக்கூடும்.

வெளியிடப்பட்ட drop cap-கள் ::first-letter-ஐப் பயன்படுத்துகின்றன; திருத்தும் surface உண்மையான [data-nabi-dropcap-letter] element-ஐப் பயன்படுத்துகிறது. .nabi-editing-க்குள் வேறொரு ::first-letter விதியைச் சேர்க்கவோ அந்த element-ஐ மாற்றவோ வேண்டாம்.