/* * Vzhled Nibble. * * Žádný build ani generátor motivů — jen proměnné. Kdo chce jiný vzhled, * přebije je ve svém CSS. Barvy se drží systémového nastavení světla a tmy. */ /* * Proměnné sedí na :root, ne na .nb. * * Dialog se vkládá do , tedy mimo obal editoru — kdyby proměnné visely * na .nb, nedědil by je a vyšel by průhledný. Prefix --nb- je drží stranou od * všeho ostatního na stránce. */ :root { --nb-bg: #ffffff; --nb-fg: #16191c; --nb-muted: #6b7280; --nb-border: #dcdfe3; --nb-hover: #f1f3f5; --nb-active: #e3ecfb; --nb-accent: #1f5f5b; --nb-radius: 6px; /* Průsvitný schválně — kryje se jím obarvený text ve zdrojovém kódu. */ --nb-selection: rgba(31, 95, 91, .22); } @media (prefers-color-scheme: dark) { :root { --nb-bg: #1a1d1f; --nb-fg: #e7eae6; --nb-muted: #8b9490; --nb-border: #32373a; --nb-hover: #24282b; --nb-active: #1e3330; --nb-accent: #64b9ac; --nb-selection: rgba(100, 185, 172, .28); } } /* * box-sizing jen na vlastních prvcích, ne globálně přes `*`. * * Tenhle soubor se přidává do cizí stránky. Globální reset by přepsal rozvržení * hostitele, o což nikdo nežádal. Bez něj ale `width: 100%` nepočítá s vlastním * odsazením a rámečkem, takže pole v dialogu přeteče přes pravý okraj. */ .nb, .nb *, .nb-panel, .nb-panel *, .nb-grid, .nb-grid *, .nb-dialog, .nb-dialog *, .nb-picker, .nb-picker *, .nb-menu, .nb-menu * { box-sizing: border-box; } /* * `overflow: hidden` tady schválně není. * * Zaoblené rohy by se jím ořízly hezky, jenže z obalu by se stal posuvný * kontejner a `position: sticky` uvnitř by se neměl čeho chytit — ovládací * panel by při rolování odjel s obsahem. Rohy se proto zaoblují na hlavičce * a obsahu zvlášť. */ .nb { border: 1px solid var(--nb-border); border-radius: var(--nb-radius); background: var(--nb-bg); color: var(--nb-fg); } /** * Ovládací panel se drží u horního okraje — pokud si to uživatel přeje. * * U dlouhého dokumentu je jinak potřeba rolovat nahoru kvůli každému tlačítku. * Vypnout to jde v nastavení, proto je to vlastní třída a ne pevná vlastnost. */ .nb-head { background: var(--nb-bg); border-radius: var(--nb-radius) var(--nb-radius) 0 0; } .nb-head-sticky { position: sticky; top: 0; z-index: 20; } .nb-surface { position: relative; } /* Zadaná výška znamená, že se vyšší obsah roluje uvnitř editoru. */ .nb-surface-scroll { overflow: auto; } .nb-foot { border-radius: 0 0 var(--nb-radius) var(--nb-radius); } /* * Nabídka obnovy rozepsaného textu. * * Sedí nad lištou, protože je to první, co se má po obnovení stránky přečíst. * Barvou upozorňuje, ale nekřičí — není to chyba, jen nabídka. */ .nb-draft { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--nb-border); background: color-mix(in srgb, var(--nb-accent) 10%, var(--nb-bg)); font-size: 13px; } .nb-draft-text { flex: 1; min-width: 12ch; } .nb-draft-btn { font: inherit; padding: 4px 10px; border: 1px solid var(--nb-border); border-radius: 6px; background: var(--nb-bg); color: var(--nb-fg); cursor: pointer; white-space: nowrap; } .nb-draft-btn:hover { background: var(--nb-hover); } .nb-draft-btn:focus-visible { outline: 2px solid var(--nb-accent); outline-offset: 1px; } .nb-draft-btn-primary { border-color: var(--nb-accent); background: var(--nb-accent); color: #fff; } .nb-draft-btn-primary:hover { filter: brightness(1.1); background: var(--nb-accent); } /* Druhý řádek lišty. Sedí hned pod prvním, proto nahoře žádná čára. */ .nb-toolbar-second { padding-top: 0; } /* * Lišta se nezalamuje. * * Se zalomením zabrala při větším počtu tlačítek klidně čtyři řádky a z editoru * zbyl proužek. Co se nevejde, jde pod trojtečku — řádky tak zůstanou nejvýš * dva, a to jsou ty dva, které si uživatel nastavil. */ .nb-toolbar { position: relative; display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; padding: 6px 8px; border-bottom: 1px solid var(--nb-border); background: var(--nb-bg); } /* Skupiny se nesmí smrsknout — místo toho odejdou celé do trojtečky. */ .nb-toolbar > .nb-group { flex: 0 0 auto; } /* Trojtečka drží vpravo, i když v liště zbylo málo. */ .nb-overflow { margin-left: auto; flex: 0 0 auto; } /* * Panel s tím, co se nevešlo. * * Kotví se k pravému okraji lišty, ne k tlačítku — u úzkého editoru by jinak * vylezl ven z okna. Uvnitř se láme, protože tady na počtu řádků nezáleží. */ .nb-overflow-panel { position: absolute; top: calc(100% - 2px); right: 4px; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; max-width: min(420px, calc(100vw - 24px)); padding: 6px; border: 1px solid var(--nb-border); border-radius: 8px; background: var(--nb-bg); box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .45); } /* Uvnitř panelu je svislá čára mezi skupinami k ničemu — řádky se lámou. */ .nb-overflow-panel .nb-sep { display: none; } /* * Horní pruh: lišta vlevo, ozubené kolo vpravo. * * `align-items: flex-start` je tu to podstatné — lišta se láme do několika * řádků, kolo ale musí zůstat nahoře vpravo, ne sjet doprostřed výšky. */ .nb-toolrow { display: flex; align-items: flex-start; border-bottom: 1px solid var(--nb-border); background: var(--nb-bg); } /* Když následuje druhý řádek, čára mezi nimi nepatří — je to jedna lišta. */ .nb-toolrow-open { border-bottom: 0; } .nb-toolrow > .nb-toolbar { flex: 1; min-width: 0; border-bottom: 0; background: none; } /* Drží kolo vpravo, i když v horním řádku není žádná skupina. */ .nb-toolrow-fill { flex: 1; } .nb-toolrow > .nb-btn { flex: none; /* Stejné odsazení jako mají tlačítka uvnitř lišty, aby seděly v jedné ose. */ margin: 6px 8px 6px 4px; } .nb-group { display: inline-flex; align-items: center; gap: 2px; } .nb-sep { width: 1px; align-self: stretch; margin: 4px 6px; background: var(--nb-border); } /* * Skrytí musí přebít `display` níž. * * `[hidden]` je v prohlížeči jen `display: none` s nejnižší specificitou — * jakékoli vlastní `display` ho porazí. Trojtečka pak zůstala v liště vidět * i tam, kde se všechno vešlo, a klepnutí na ni otevřelo prázdný panel. */ .nb [hidden], .nb-dialog [hidden] { display: none !important; } .nb-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--nb-fg); cursor: pointer; } .nb-select { font: inherit; font-size: 13px; height: 30px; padding: 0 6px; border: 1px solid var(--nb-border); border-radius: 4px; background: var(--nb-bg); color: var(--nb-fg); cursor: pointer; max-width: 150px; } .nb-select:focus-visible { outline: 2px solid var(--nb-accent); outline-offset: -2px; } .nb-select:disabled { color: var(--nb-muted); opacity: .45; cursor: default; } .nb-btn:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--nb-hover); } .nb-btn:focus-visible { outline: 2px solid var(--nb-accent); outline-offset: -2px; } .nb-btn[aria-pressed="true"] { background: var(--nb-active); color: var(--nb-accent); } .nb-btn:disabled, .nb-btn[aria-disabled="true"] { color: var(--nb-muted); opacity: .45; cursor: default; } .nb-content { padding: 14px 16px; min-height: 200px; outline: none; line-height: 1.6; overflow-wrap: break-word; } .nb-content:focus-visible { outline: none; } .nb-content > :first-child { margin-top: 0; } .nb-content > :last-child { margin-bottom: 0; } .nb-content table { border-collapse: collapse; } .nb-content blockquote { margin: 1em 0; padding-left: 14px; border-left: 3px solid var(--nb-border); color: var(--nb-muted); } .nb-content pre { background: var(--nb-hover); padding: 10px 12px; border-radius: 4px; overflow-x: auto; white-space: pre-wrap; } .nb-content ul, .nb-content ol { padding-left: 1.6em; margin: .6em 0; } .nb-content li { margin: .2em 0; } .nb-content li > ul, .nb-content li > ol { margin: .2em 0; } /* * Kotva. * * Blok s `id` dostane v editoru značku, jinak by nebylo poznat, že tam kotva * je. Kreslí se přes `::before` mimo tok textu, takže se do obsahu nic * nepřidává a v uloženém HTML po ní není stopa. */ .nb-content :is(p, h1, h2, h3, h4, h5, h6, blockquote, pre, li, dt, dd)[id] { position: relative; } .nb-content :is(p, h1, h2, h3, h4, h5, h6, blockquote, pre, li, dt, dd)[id]::before { content: "⚓"; position: absolute; /* Pevné jednotky, ne `em`: v `em` se značka u nadpisu odsune dál, než sahá odsazení obsahu, a ořízne se o levý okraj. */ left: -13px; top: 0; font-size: 10px; line-height: 2.2; opacity: .5; user-select: none; pointer-events: none; } /* Seznam definic. Odsazení vysvětlení nechává prohlížeč na svém — mění se jen svislé mezery, ať sedí se zbytkem obsahu. */ .nb-content dl { margin: .6em 0; } .nb-content dt { font-weight: 600; margin: .4em 0 .1em; } .nb-content dd { margin: 0 0 .2em 1.6em; } .nb-content hr { border: 0; border-top: 1px solid var(--nb-border); margin: 1.2em 0; } .nb-content img { max-width: 100%; height: auto; } /* Široký obsah nesmí roztáhnout stránku. */ .nb-content { overflow-x: auto; } /* ---------- tabulky ---------- */ /* * Vodicí mřížka jen pro tabulky, které se nestylují samy. * * Editor má ukazovat, jak bude obsah vypadat na webu. Kdyby si rámečky vynutil * na všechno, tabulka s vlastním `border` nebo `style` by se v editoru * vykreslila jinak než na stránce — a to je horší než neviditelné buňky. * Tabulka bez vlastního stylu naopak potřebuje aspoň naznačit, kde buňky jsou, * jinak se do ní nedá trefit; proto čárkovaně, ať je poznat, že je to pomůcka. */ .nb-content table { max-width: 100%; } .nb-content table:not([border]):not([style]) { border-collapse: collapse; } .nb-content table:not([border]):not([style]) :where(th, td) { border: 1px dashed var(--nb-border); padding: 5px 8px; min-width: 24px; vertical-align: top; } .nb-content :where(th) { font-weight: 600; text-align: left; } /* Táhlo šířky sloupce nic nepřidává do obsahu — mění se jen kurzor. */ .nb-content.nb-col-resize { cursor: col-resize; } /* ---------- plovoucí lišta ---------- */ .nb-surface { position: relative; } .nb-context { position: absolute; z-index: 5; display: flex; gap: 2px; padding: 4px; border: 1px solid var(--nb-border); border-radius: 6px; background: var(--nb-bg); box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 8px 20px -10px rgba(0, 0, 0, .3); } .nb-context[hidden] { display: none; } /* ---------- dialog ---------- */ .nb-dialog { border: 1px solid var(--nb-border); border-radius: 8px; background: var(--nb-bg); color: var(--nb-fg); padding: 0; width: min(440px, calc(100vw - 32px)); box-shadow: 0 12px 40px -12px rgba(0, 0, 0, .45); } .nb-dialog::backdrop { background: rgba(0, 0, 0, .35); } /* * Nemodální panel — hledání. * * Sedí v pravém dolním rohu, aby nezakrýval text, ve kterém se hledá. Backdrop * nemá, takže se pod ním dá dál pracovat; `showModal()` by editor znepřístupnil * a nález by nebyl vidět. * * Tlačítka jsou čtyři a do řady se vejdou jen tak tak — proto je panel širší * než běžný dialog. Na úzké obrazovce se patička zalomí, ale popisky se * netrhají uprostřed slova. */ .nb-dialog-modeless { position: fixed; inset: auto 16px 16px auto; width: min(440px, calc(100vw - 32px)); } .nb-dialog-modeless .nb-dialog-footer { flex-wrap: wrap; } .nb-dialog-modeless .nb-dialog-btn { white-space: nowrap; } /* * Aktuální nález. * * Kreslí se přes `::highlight`, ne obalením do ``: obsah se tím nemění, * takže hledání nemůže sáhnout do dokumentu, ve kterém jen hledá. Prohlížeč * bez `CSS.highlights` ukáže obyčejný výběr — bledší, ale vidět je. */ ::highlight(nb-find) { background: #ffd54a; color: #1a1a1a; } /* * Dialog, ve kterém se pracuje. * * `resize: both` na `