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 పై ఇవ్వండి. rem, px, calc() వంటి రుణాత్మకం కాని 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;
}

ప్రచురిత కంటెంట్‌కూ శైలి ఇవ్వండి ​

ప్రచురిత 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ను మార్చవద్దు, సవరించగల వచనంలో ప్సూడో-ఎలిమెంట్‌లను చేర్చవద్దు, ఆబ్జెక్ట్ ర్యాపర్‌లలో పాయింటర్ ప్రవర్తనను నిలిపివేయవద్దు. ఈ నియమాలు కర్సర్ జ్యామితి, పత్ర మ్యాపింగ్‌ను చెడగొట్టవచ్చు.

ప్రచురిత పెద్ద తొలి అక్షరాలు ::first-letterను వాడతాయి; సవరణ సర్ఫేస్ నిజమైన [data-nabi-dropcap-letter] ఎలిమెంట్‌ను వాడుతుంది. .nabi-editingలో మరో ::first-letter నియమాన్ని చేర్చవద్దు లేదా ఆ ఎలిమెంట్‌ను భర్తీ చేయవద్దు.