/* Notepad — app-like two-pane layout (sidebar list + editor). Mobile: one screen at a time. */ .np-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .np { --np-h: clamp(520px, calc(100dvh - 260px), 900px); position: relative; display: flex; height: var(--np-h); min-height: 420px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; animation: rise .5s var(--ease) both; } .np mark { background: var(--warning-soft); color: inherit; border-radius: 3px; padding: 0 .05em; } /* Local scroll-lock used only while focus mode is open (applied to / by tool.js). */ html.np-scroll-lock, html.np-scroll-lock body { overflow: hidden; height: 100%; overscroll-behavior: none; } /* ---------- Sidebar ---------- */ .np-side { width: 300px; flex: none; display: flex; flex-direction: column; min-height: 0; background: var(--bg-soft); border-right: 1px solid var(--border); transition: width .22s var(--ease); } .np-side-top { flex: none; display: flex; padding: .55rem .55rem 0; } .np-sidebar-collapse { margin-left: auto; } .np-side-head { padding: .5rem .9rem .75rem; display: flex; flex-direction: column; gap: .65rem; border-bottom: 1px solid var(--border); min-width: 0; } .np-side-actions { display: flex; gap: .5rem; min-width: 0; } .np-side-actions .np-new { flex: 1; justify-content: center; min-width: 0; } .np-btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Collapsed sidebar: a slim icon rail. Desktop/tablet only — below the narrow breakpoint the sidebar becomes an off-canvas drawer instead (see the narrow media query), so this collapsed styling is guarded to widths above it and never fights the drawer transform. */ @media (min-width: 861px) { .np[data-sidebar="collapsed"] .np-side { width: 64px; } .np[data-sidebar="collapsed"] .np-side-top { justify-content: center; padding-inline: 0; } .np[data-sidebar="collapsed"] .np-sidebar-collapse { margin-left: 0; } .np[data-sidebar="collapsed"] .np-side-head { align-items: center; padding-inline: .6rem; } .np[data-sidebar="collapsed"] .np-side-actions { flex-direction: column; align-items: center; } .np[data-sidebar="collapsed"] .np-side-actions .np-new { width: 44px; padding: 0; } .np[data-sidebar="collapsed"] .np-btn-label { display: none; } .np[data-sidebar="collapsed"] [data-act="open-file"], .np[data-sidebar="collapsed"] .np-search, .np[data-sidebar="collapsed"] .np-list-meta, .np[data-sidebar="collapsed"] .np-list, .np[data-sidebar="collapsed"] .np-side-foot { display: none; } } .np-search { position: relative; display: flex; align-items: center; } .np-search > .icon { position: absolute; left: .7rem; width: 17px; height: 17px; color: var(--text-faint); pointer-events: none; } .np-search .input { padding-left: 2.15rem; padding-right: 2.15rem; } .np-search-clear { position: absolute; right: .4rem; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 99px; border: none; background: none; color: var(--text-faint); cursor: pointer; } .np-search-clear:hover { background: var(--surface-2); color: var(--text); } .np-search-clear .icon { width: 15px; height: 15px; } @media (pointer: coarse) { .np-search-clear { width: 44px; height: 44px; right: 0; } } .np-list-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .np-count { font-size: .82rem; color: var(--text-soft); } .np-sort select { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--radius-xs); padding: .3rem .5rem; font: inherit; font-size: .82rem; cursor: pointer; } .np-trash-head { padding: .9rem; display: flex; flex-direction: column; gap: .5rem; border-bottom: 1px solid var(--border); } .np-trash-back { align-self: flex-start; padding-inline: .4rem; } .np-trash-title { margin: 0; font-size: 1.02rem; } .np-trash-head .hint { margin: 0; } .np-empty-trash { align-self: flex-start; } .np-list { list-style: none; margin: 0; padding: .5rem; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .15rem; } .np-empty-row { padding: 1.5rem 1rem; text-align: center; color: var(--text-faint); font-size: .9rem; } .np-item { position: relative; border-radius: var(--radius-sm); } .np-item-btn { display: flex; flex-direction: column; gap: .15rem; width: 100%; text-align: left; padding: .55rem 2.1rem .55rem .7rem; background: none; border: none; border-radius: inherit; cursor: pointer; color: inherit; font: inherit; } .np-item:hover .np-item-btn, .np-item-btn:focus-visible { background: var(--surface-2); } .np-item.is-active .np-item-btn { background: var(--primary-soft); } .np-item.is-active .np-item-title { color: var(--primary); } .np-item-title-row { display: flex; align-items: center; gap: .32rem; min-width: 0; } .np-item-pin { width: 13px; height: 13px; flex: none; color: var(--primary); } .np-item-title { font-weight: 650; font-size: .93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .np-item-snippet { font-size: .82rem; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .np-item-snippet:empty { display: none; } .np-item-meta { font-size: .74rem; color: var(--text-faint); } .np-item-del { position: absolute; right: .35rem; top: 50%; translate: 0 -50%; width: 30px; height: 30px; display: grid; place-items: center; border: none; background: none; border-radius: 99px; color: var(--text-faint); cursor: pointer; opacity: 0; transition: opacity .15s var(--ease); } .np-item-del .icon { width: 15px; height: 15px; } .np-item:hover .np-item-del, .np-item-del:focus-visible { opacity: 1; } .np-item-del:hover { background: var(--danger-soft); color: var(--danger); } @media (pointer: coarse) { .np-item-del { opacity: 1; width: 44px; height: 44px; } } .np-item-trash { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .7rem; } .np-item-info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .np-item-info .np-item-title { font-size: .92rem; } .np-item-trash-actions { display: flex; gap: .35rem; flex: none; } .np-side-foot { border-top: 1px solid var(--border); padding: .4rem; display: flex; flex-direction: column; } .np-foot-btn { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border: none; background: none; border-radius: var(--radius-sm); color: var(--text-soft); font: inherit; font-size: .88rem; cursor: pointer; text-align: left; } .np-foot-btn:hover { background: var(--surface-2); color: var(--text); } .np-foot-btn .icon { width: 17px; height: 17px; } .np-foot-count { font-size: .78rem; color: var(--text-faint); background: var(--surface-2); border-radius: 99px; padding: .05rem .5rem; } .np-foot-count:empty { display: none; } /* ---------- Main (editor) ---------- */ .np-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; position: relative; } .np-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; text-align: center; padding: 2rem; } .np-empty-title { margin: .25rem 0 0; font-size: 1.15rem; font-weight: 650; } .np-empty-hint { margin: 0 0 .5rem; color: var(--text-soft); max-width: 32ch; } .np-toolbar { display: flex; align-items: center; gap: .3rem; padding: .5rem .7rem; border-bottom: 1px solid var(--border); flex-wrap: nowrap; } .np-sidebar-btn { display: none; flex: none; } /* Shown on desktop only once the sidebar is collapsed (its own rail toggle is off to the side); shown always on narrow widths, where it's the only way to reach the off-canvas notes drawer. */ @media (min-width: 861px) { .np[data-sidebar="collapsed"] .np-sidebar-btn { display: inline-flex; } } .np-tools { display: flex; align-items: center; gap: .15rem; min-width: 0; overflow: hidden; } .np-sep { width: 1px; height: 22px; background: var(--border); margin: 0 .25rem; flex: none; } .np-tb { padding: .4rem .55rem; gap: .4rem; flex: none; } .np-tb .icon { width: 17px; height: 17px; } .np-tb-danger:hover { color: var(--danger); background: var(--danger-soft); } .np-tb[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary); } .np-size { display: flex; align-items: center; gap: 0; flex: none; } .np-size-btn { padding: .4rem .5rem; gap: .1rem; } .np-a { font-weight: 700; } .np-a-sm { font-size: .78rem; } .np-a-lg { font-size: 1.05rem; } .np-status { display: flex; align-items: center; gap: .35rem; margin-left: auto; padding: 0 .5rem; font-size: .83rem; color: var(--text-faint); flex: none; white-space: nowrap; } .np-status[data-state="saved"] { color: var(--success); } .np-status[data-state="error"] { color: var(--danger); } .np-status-icon .icon { width: 15px; height: 15px; display: block; } .np-spin { animation: np-spin 1s linear infinite; } @keyframes np-spin { to { transform: rotate(360deg); } } .np-status-pulse { animation: np-pulse .5s var(--ease); } @keyframes np-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } } .np-more-wrap { position: relative; flex: none; } .np-menu { position: absolute; top: calc(100% + 6px); right: .6rem; z-index: 40; width: min(300px, calc(100vw - 24px)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .4rem; animation: np-menu-in .16s var(--ease) both; max-height: min(70vh, 560px); overflow-y: auto; } @keyframes np-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } } .np-menu-section { padding: .35rem .2rem; } .np-menu-section + .np-menu-section { border-top: 1px solid var(--border); } .np-menu-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .3rem .5rem; } .np-menu-row-stack { flex-direction: column; align-items: stretch; gap: .4rem; } .np-menu-label { font-size: .84rem; font-weight: 600; color: var(--text-soft); } .np-size-inline { display: flex; align-items: center; gap: .5rem; } .np-size-value { min-width: 3.2em; text-align: center; font-variant-numeric: tabular-nums; font-size: .88rem; } .np-switch { display: flex; align-items: center; gap: .6rem; padding: .4rem .5rem; font-size: .9rem; cursor: pointer; } .np-mi { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .5rem; border: none; background: none; border-radius: var(--radius-sm); color: var(--text); font: inherit; font-size: .9rem; text-align: left; cursor: pointer; } .np-mi:hover, .np-mi:focus-visible { background: var(--surface-2); } .np-mi .icon { width: 17px; height: 17px; color: var(--text-soft); flex: none; } .np-mi-danger { color: var(--danger); } .np-mi-danger .icon { color: var(--danger); } .np-kbd { margin-left: auto; font-size: .74rem; padding: .1rem .4rem; } .np-font-serif { font-family: Georgia, 'Times New Roman', serif; } .np-font-mono { font-family: var(--font-mono); } .np-findbar { border-bottom: 1px solid var(--border); background: var(--bg-soft); padding: .5rem .7rem; display: flex; flex-direction: column; gap: .4rem; } .np-find-row, .np-replace-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .np-find-field { position: relative; display: flex; align-items: center; flex: 1; min-width: 160px; } .np-find-field > .icon { position: absolute; left: .6rem; width: 15px; height: 15px; color: var(--text-faint); } .np-find-field .input { padding-left: 2rem; padding-right: 4.5rem; } .np-find-count { position: absolute; right: .6rem; font-size: .78rem; color: var(--text-faint); white-space: nowrap; } .np-find-buttons { display: flex; align-items: center; gap: .2rem; flex: none; } .np-find-buttons .icon { width: 16px; height: 16px; } .np-find-buttons [aria-pressed="true"] { background: var(--primary-soft); color: var(--primary); } .np-banner { margin: .6rem .7rem 0; } .np-banner:empty { display: none; } .np-editor-wrap { position: relative; flex: 1; min-height: 0; display: flex; } .np-editor { flex: 1; width: 100%; height: 100%; resize: none; border: none; outline: none; background: transparent; color: var(--text); padding: 1.25rem 1.5rem; line-height: 1.7; font-family: var(--font-sans); caret-color: var(--primary); } .np[data-font="serif"] .np-editor { font-family: Georgia, 'Times New Roman', serif; } .np[data-font="mono"] .np-editor { font-family: var(--font-mono); } .np-editor.np-nowrap { overflow-x: auto; } .np-editor::placeholder { color: var(--text-faint); } .np-editor:read-only { cursor: default; } .np-statusbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .9rem; border-top: 1px solid var(--border); } .np-counts { margin: 0; font-size: .78rem; color: var(--text-faint); } .np-keys-btn { display: flex; align-items: center; gap: .4rem; border: none; background: none; color: var(--text-faint); font: inherit; font-size: .78rem; cursor: pointer; padding: .2rem .4rem; border-radius: var(--radius-xs); } .np-keys-btn:hover { background: var(--surface-2); color: var(--text-soft); } .np-keys-btn .icon { width: 14px; height: 14px; } /* Focus mode: the whole app fills the browser window (above the header, hero, help and footer), the sidebar and secondary chrome are hidden, and the writing area gets full room to breathe. `--np-vvh` is kept in sync with visualViewport by tool.js as a fallback for the on-screen keyboard on browsers where 100dvh doesn't shrink reliably; 100dvh/100vh are the normal path. */ .np[data-focus="1"] { position: fixed; inset: 0; z-index: 90; width: 100%; height: 100vh; height: var(--np-vvh, 100dvh); max-width: none; min-height: 0; border: none; border-radius: 0; box-shadow: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); animation: none; } .np[data-focus="1"] .np-side, .np[data-focus="1"] .np-backdrop { display: none; } .np[data-focus="1"] .np-tools > *:not(.np-focus-keep) { display: none; } .np[data-focus="1"] .np-sidebar-btn { display: none; } .np[data-focus="1"] .np-editor { max-width: 760px; margin: 0 auto; padding-top: 2rem; } /* Drag & drop overlay */ .np-drop { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(2px); } .np-drop-card { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2rem 2.5rem; border: 2px dashed var(--primary); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); text-align: center; } .np-drop-title { margin: 0; font-weight: 650; } .np-drop-hint { margin: 0; color: var(--text-soft); font-size: .88rem; } /* Undo toast (small local addition — ui.js toast() has no action button) */ .np-undo-toast { padding-right: .5rem; } .np-undo-btn { border: none; background: rgb(255 255 255 / .14); color: inherit; font: inherit; font-weight: 650; padding: .3rem .7rem; border-radius: 99px; cursor: pointer; margin-left: .2rem; } .np-undo-btn:hover { background: rgb(255 255 255 / .24); } :root[data-theme="dark"] .np-undo-btn { background: rgb(0 0 0 / .08); } :root[data-theme="dark"] .np-undo-btn:hover { background: rgb(0 0 0 / .16); } /* Print */ .np-print { display: none; } .np-print h1 { font-size: 1.4rem; margin: 0 0 1rem; } .np-print pre { white-space: pre-wrap; word-wrap: break-word; font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; } /* ---------- Drawer backdrop (narrow-width off-canvas sidebar) ---------- */ .np-backdrop { position: absolute; inset: 0; z-index: 15; background: color-mix(in srgb, var(--bg) 55%, transparent); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); } .np[data-drawer="open"] .np-backdrop { opacity: 1; pointer-events: auto; } /* ---------- Narrow / mobile ---------- */ .np-show-narrow { display: none; } /* Keyboard-shortcut hints are only useful with a keyboard — this class is set in the markup but had no rule at all, so it never actually hid anything; on touch it also crowds the status bar. */ @media (pointer: coarse) { .np-hide-touch { display: none !important; } } @media (max-width: 860px) { .np { height: clamp(460px, calc(100dvh - 190px), 900px); border-radius: var(--radius); } .np-hide-narrow { display: none !important; } .np-show-narrow { display: flex !important; } .np-main { width: 100%; } /* The sidebar slides over the editor as a drawer instead of sharing the width with it. */ .np-side { position: absolute; inset: 0 auto 0 0; z-index: 20; width: min(320px, 84vw); max-width: 320px; transform: translateX(-100%); transition: transform .25s var(--ease); box-shadow: var(--shadow-lg); padding-top: env(safe-area-inset-top); } .np[data-drawer="open"] .np-side { transform: translateX(0); } /* Nothing wraps into a mess on narrow toolbars — the secondary tools scroll sideways instead. */ .np-tb-label { display: none; } .np-toolbar { flex-wrap: nowrap; padding-inline: .5rem; } /* Below the rail breakpoint the sidebar is always an off-canvas drawer, so this is the only way to reach it — unlike the desktop rail toggle, it must stay visible whether the drawer is open or closed. */ .np-sidebar-btn { display: inline-flex; } .np-tools { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-behavior: smooth; } .np-tools::-webkit-scrollbar { display: none; } .np-status { margin-left: 0; } } @media (max-width: 480px) { .np-side-head, .np-trash-head { padding: .7rem .7rem .6rem; } .np-editor { padding: 1rem; } .np-statusbar { padding: .45rem .7rem; } .np-menu { right: .4rem; left: .4rem; width: auto; } } /* Landscape phones: a short viewport shouldn't be forced into a panel taller than the screen. */ @media (max-width: 900px) and (max-height: 480px) { .np { height: clamp(260px, calc(100dvh - 100px), 900px); } .np-toolbar { padding-block: .3rem; } .np-editor { padding-block: .65rem; } .np-statusbar { padding-block: .3rem; } } @media (prefers-reduced-motion: reduce) { .np-spin { animation: none; } .np-side, .np-backdrop, .np-side-actions .np-new { transition: none; } } @media print { .tool-hero, .np { display: none !important; } .np-print { display: block !important; } }