/* ── Base ── */ html { margin: 0; overflow: hidden; /* Rubber-band suppression lives on via overscroll-behavior:none. position:fixed used to live here but traps the iOS viewport when the keyboard opens or the address bar retracts. */ } body { height: 100%; height: 100dvh; /* dynamic viewport height — adjusts for iOS keyboard & address bar */ margin: 0; overflow: hidden; overscroll-behavior: none; -webkit-overflow-scrolling: touch; background-color: var(--bg); color: var(--text); font-family: Arial, sans-serif; display: flex; flex-direction: column; /* iOS safe area: toolbar placed below notch, app fills full screen */ padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* ── Button container — flat by default, floating pill on hover ── */ #button-container { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); margin: 0; padding: 0.25em; display: flex; align-items: center; gap: 2px; flex-shrink: 0; z-index: 100; background-color: transparent; border-radius: 999px; transition: opacity 0.35s var(--easing-bounce), transform 0.35s var(--easing-bounce), background-color 0.2s ease, box-shadow 0.2s ease; } @media (hover: hover) { #button-container:hover { background-color: var(--bg); box-shadow: 0 1px 4px var(--shadow), 0 6px 20px var(--shadow-light); } } /* Floating pill when note is scrolled below the top */ #button-container.scrolled-down { background-color: var(--bg); box-shadow: 0 1px 4px var(--shadow), 0 6px 20px var(--shadow-light); } #bottom-status-area.scroll-faded { opacity: 0 !important; pointer-events: none; transform: translateX(-50%) translateY(8px); transition: opacity 0.12s ease-out, transform 0.12s ease-out; } /* Prevent button groups from shrinking so overflow is detectable via getBoundingClientRect */ #button-container .button-group { flex-shrink: 0; } /* ── macOS: custom titlebar drag regions ──────────────────────────────────── Only applied when body.platform-darwin is set by app-init.js. #window-drag-region — position:fixed strip covering the full toolbar row. z-index 98, behind the toolbar (100). Handles empty space on the right side of the toolbar not covered by #button-container content. #button-container — anchored to the left edge so the custom HTML traffic-light buttons (#traffic-lights) sit at the start of the pill. Native Electron traffic lights are moved off-screen via trafficLightPosition in main.js. Also marked draggable so empty gaps between buttons initiate a native drag; interactive children opt-out below. */ body.platform-darwin #window-drag-region { position: fixed; top: 0; left: 0; right: 0; height: var(--toolbar-h); -webkit-app-region: drag; app-region: drag; z-index: 98; } body.platform-darwin #button-container { left: 8px; transform: none; -webkit-app-region: drag; app-region: drag; } /* ── macOS custom traffic lights — HTML circles inside the toolbar pill ── */ #traffic-lights { display: none; /* hidden on all platforms except darwin */ } body.platform-darwin #traffic-lights { display: flex; align-items: center; gap: 7px; padding: 0 10px 0 4px; flex-shrink: 0; } .traffic-btn { width: 12px; height: 12px; border-radius: 50%; border: none; padding: 0; margin: 0; cursor: default; flex-shrink: 0; background: none; -webkit-app-region: no-drag; app-region: no-drag; position: relative; transition: filter 0.12s ease; } #btn-close { background: #ff5f56; } #btn-minimize { background: #ffbd2e; } #btn-maximize { background: #27c93f; } /* Dim all three when the window is inactive */ body.window-inactive .traffic-btn { background: var(--muted) !important; opacity: 0.5; } /* Show symbols on group hover */ #traffic-lights:hover .traffic-btn::after { display: flex; align-items: center; justify-content: center; } .traffic-btn::after { content: ''; display: none; position: absolute; inset: 0; font-size: 8px; line-height: 1; font-weight: bold; color: rgba(0, 0, 0, 0.55); } #traffic-lights:hover #btn-close::after { content: '✕'; } #traffic-lights:hover #btn-minimize::after { content: '–'; } #traffic-lights:hover #btn-maximize::after { content: '+'; } /* Every interactive descendant must opt out so native clicks are not swallowed. */ body.platform-darwin #button-container button, body.platform-darwin #button-container input, body.platform-darwin #tools-overflow-row button, body.platform-darwin #tools-overflow-row input { -webkit-app-region: no-drag; app-region: no-drag; } /* The side panel overlaps the drag region at the top of the window. Mark the entire panel as no-drag so the pin button and all panel interactions are not swallowed by the macOS window-drag shell handler. */ body.platform-darwin #panel-lists { -webkit-app-region: no-drag; app-region: no-drag; } /* panel-open-btn sits in the top-right corner which overlaps the drag region; mark it no-drag so clicks are not swallowed by the native drag handler. */ body.platform-darwin #panel-open-btn { -webkit-app-region: no-drag; app-region: no-drag; } /* panel-arrow covers the full right edge including the drag-region strip; mark it no-drag so mouseenter/mouseleave events reach the DOM handler. */ body.platform-darwin #panel-arrow { -webkit-app-region: no-drag; app-region: no-drag; } /* ── Hide scrollbars while keeping scroll functionality ── */ /* Global scrollbar hiding for all elements */ * { scrollbar-width: none; /* Firefox */ } *::-webkit-scrollbar { display: none; /* Chrome, Safari, Edge */ } /* Hidden on desktop — only visible on mobile via swipe */ #mobile-right-panel { display: none; } #mobile-overlay { display: none; } /* ── Respect prefers-reduced-motion ─────────────────────────────────────── Users who have requested reduced motion get near-instant transitions and no decorative animations. We still allow tiny (~10ms) transitions so state-driven styles (e.g. visibility toggles) still apply — fully zeroing them out can break interactions that depend on transitionend events. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── Print stylesheet ───────────────────────────────────────────────────── Strip the app chrome (toolbar, panels, status bar, search overlay) and print only the rendered note content. The preview pane stretches to the full page; long notes paginate naturally. */ @media print { html, body { height: auto !important; overflow: visible !important; background: #fff !important; color: #000 !important; } #button-container, #tools-overflow-row, #bottom-status-area, #panel-lists, #panel-arrow, #mobile-right-panel, #mobile-overlay, #global-search-panel, #wikilink-dropdown, #window-drag-region, #traffic-lights { display: none !important; } /* Prefer the rendered preview over the raw textarea when printing. */ textarea, #editor-highlight { display: none !important; } #preview { position: static !important; padding: 0 !important; overflow: visible !important; height: auto !important; color: #000 !important; background: #fff !important; } /* Avoid breaking headings or code blocks across pages where possible */ #preview h1, #preview h2, #preview h3, #preview pre, #preview table, #preview figure { break-inside: avoid; } }