/* --------------------------------------------------------------------------- Markdown Wizard — app stylesheet Theme is driven by data-theme="light|dark" on (set by theme-boot.js). --------------------------------------------------------------------------- */ :root { --bg: #f2f2f5; --panel: #ffffff; --panel2: #f8f8fa; --text: #1c1c24; --muted: #6d6d7a; --border: #e2e2ea; --accent: #6d28d9; --accent-weak: #f0eafd; --sheet: #ffffff; --editor-bg: #fcfcfe; --code-bg: #f1eff7; --shadow: 0 1px 3px rgba(24, 20, 48, .08), 0 10px 30px rgba(24, 20, 48, .07); --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } html[data-theme="dark"] { --bg: #101016; --panel: #17171f; --panel2: #1c1c26; --text: #e9e9f1; --muted: #9a9aac; --border: #2b2b38; --accent: #a78bfa; --accent-weak: #2a2342; --sheet: #1b1b25; --editor-bg: #14141c; --code-bg: #262633; --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .45); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font: 14px/1.5 var(--sans); background: var(--bg); color: var(--text); display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; } /* ------------------------------------------------------------------ topbar */ .topbar { flex: none; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; background: var(--panel); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; white-space: nowrap; } .brand .logo { font-size: 19px; } .doc-title { flex: 1 1 auto; min-width: 60px; max-width: 430px; font: inherit; font-weight: 600; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 6px 10px; } .doc-title::placeholder { color: var(--muted); font-weight: 500; } .doc-title:hover { border-color: var(--border); } .doc-title:focus { outline: none; border-color: var(--accent); background: var(--panel2); } .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } .privacy-badge { font-size: 12px; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; white-space: nowrap; cursor: help; } .btn { appearance: none; font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; cursor: pointer; white-space: nowrap; } .btn:hover { border-color: var(--accent); color: var(--accent); } .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .btn.primary:hover { filter: brightness(1.1); color: #fff; } .btn.primary[disabled] { opacity: .6; cursor: progress; } .btn .caret { font-size: 11px; } .icon-btn { padding: 7px 10px; font-size: 15px; line-height: 1; } /* --------------------------------------------------------------- main split */ .split { flex: 1; display: flex; min-height: 0; } .pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .editor-pane { flex: 0 0 var(--split, 50%); background: var(--editor-bg); } .preview-pane { flex: 1 1 auto; background: var(--bg); } .pane-head { flex: none; display: flex; align-items: baseline; gap: 10px; padding: 5px 16px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: var(--panel2); border-bottom: 1px solid var(--border); user-select: none; } .pane-hint { font-weight: 400; letter-spacing: .02em; text-transform: none; opacity: .8; } #editor { flex: 1; width: 100%; border: 0; resize: none; outline: none; background: transparent; color: var(--text); padding: 20px 24px 40vh; font: 13.5px/1.7 var(--mono); tab-size: 2; caret-color: var(--accent); } #editor::placeholder { color: var(--muted); opacity: .7; } .divider { flex: none; width: 5px; cursor: col-resize; background: var(--border); transition: background .15s; } .divider:hover, .divider.active, .divider:focus-visible { background: var(--accent); outline: none; } #preview { flex: 1; overflow: auto; padding: 26px 28px 48px; scrollbar-gutter: stable; } .sheet { max-width: 820px; margin: 0 auto; min-height: calc(100% - 2px); background: var(--sheet); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 52px 58px 64px; } /* --------------------------------------------------- rendered document body */ .md-body { font-family: var(--sans); font-size: 15px; line-height: 1.7; word-wrap: break-word; } .md-body > :first-child { margin-top: 0; } .md-body > :last-child { margin-bottom: 0; } .md-body h1, .md-body h2, .md-body h3, .md-body h4, .md-body h5, .md-body h6 { line-height: 1.3; margin: 1.4em 0 .5em; font-weight: 700; } .md-body h1 { font-size: 2em; padding-bottom: .3em; border-bottom: 1px solid var(--border); } .md-body h2 { font-size: 1.5em; padding-bottom: .25em; border-bottom: 1px solid var(--border); } .md-body h3 { font-size: 1.25em; } .md-body h4 { font-size: 1.05em; } .md-body h5 { font-size: .95em; } .md-body h6 { font-size: .88em; color: var(--muted); } .md-body p { margin: .7em 0; } .md-body a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } .md-body code { font-family: var(--mono); font-size: .88em; background: var(--code-bg); padding: .15em .42em; border-radius: 5px; } .md-body pre { background: var(--code-bg); padding: 14px 17px; border-radius: 9px; overflow-x: auto; line-height: 1.55; margin: .9em 0; } .md-body pre code { background: none; padding: 0; font-size: .85em; } .md-body blockquote { margin: .9em 0; padding: .15em 1.1em; border-left: 3px solid var(--accent); color: var(--muted); } .md-body ul, .md-body ol { margin: .7em 0; padding-left: 1.7em; } .md-body li { margin: .28em 0; } .md-body li > p { margin: .3em 0; } .md-body li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.45em; } .md-body input[type="checkbox"] { margin-right: .5em; accent-color: var(--accent); vertical-align: -1px; } .md-body table { border-collapse: collapse; margin: .9em 0; max-width: 100%; display: block; overflow-x: auto; width: max-content; } .md-body th, .md-body td { border: 1px solid var(--border); padding: 7px 13px; } .md-body th { background: var(--code-bg); font-weight: 600; } .md-body img { max-width: 100%; border-radius: 6px; } .md-body hr { border: 0; border-top: 2px solid var(--border); margin: 1.8em 0; } /* ---------------------------------------------------------------- toolbar */ .toolbar { flex: none; display: flex; align-items: center; gap: 3px; padding: 6px 10px; background: var(--panel); border-top: 1px solid var(--border); overflow-x: auto; scrollbar-width: thin; } .tbtn { appearance: none; flex: none; min-width: 32px; height: 32px; padding: 0 9px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text); font-family: var(--sans); font-size: 12.5px; cursor: pointer; white-space: nowrap; } .tbtn:hover { background: var(--accent-weak); color: var(--accent); border-color: var(--border); } .t-bold { font-weight: 800; } .t-italic { font-style: italic; font-family: Georgia, serif; } .t-strike { text-decoration: line-through; } .t-mono { font-family: var(--mono); font-size: 11.5px; } .tsep { flex: none; width: 1px; height: 20px; background: var(--border); margin: 0 6px; } .counts { margin-left: auto; padding: 0 8px; color: var(--muted); font-size: 12px; white-space: nowrap; user-select: none; } /* ------------------------------------------------------------------- menu */ .download-wrap { position: relative; } .menu { position: absolute; top: calc(100% + 7px); right: 0; min-width: 285px; max-height: min(72vh, 640px); overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 11px; box-shadow: var(--shadow); padding: 6px; z-index: 60; } .mitem { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--text); font: inherit; border-radius: 8px; padding: 8px 11px; cursor: pointer; } .mitem:hover, .mitem:focus-visible { background: var(--accent-weak); outline: none; } .mitem[disabled] { opacity: .55; cursor: progress; } .mitem .fmt { display: block; font-weight: 600; font-size: 13px; } .mitem .fmt em { font-style: normal; color: var(--muted); font-weight: 500; } .mitem .hint { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; } .msep { height: 1px; background: var(--border); margin: 6px 6px; } /* ------------------------------------------------------------------- toast */ .toast { position: fixed; left: 50%; bottom: 62px; transform: translateX(-50%) translateY(10px); background: var(--text); color: var(--bg); padding: 9px 17px; border-radius: 9px; font-size: 13px; font-weight: 500; box-shadow: var(--shadow); opacity: 0; transition: opacity .18s, transform .18s; z-index: 100; pointer-events: none; max-width: 80vw; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ------------------------------------------------------------- drag state */ body.dragging { cursor: col-resize; user-select: none; } body.dragging #editor, body.dragging #preview { pointer-events: none; } /* ------------------------------------------------------------- drop state */ body.dropping .editor-pane { outline: 2px dashed var(--accent); outline-offset: -6px; } /* ------------------------------------------------------------------ print */ @media print { .topbar, .toolbar, .editor-pane, .divider, .pane-head, .toast { display: none !important; } body { height: auto; overflow: visible; background: #fff; } .split { display: block; } .preview-pane { background: #fff; } #preview { overflow: visible; padding: 0; } .sheet { box-shadow: none; border: 0; border-radius: 0; max-width: none; padding: 0; background: #fff; } } /* ----------------------------------------------------------------- mobile */ @media (max-width: 860px) { .split { flex-direction: column; } .editor-pane { flex: 1 1 50%; } .preview-pane { flex: 1 1 50%; border-top: 1px solid var(--border); } .divider { display: none; } .privacy-badge, .brand-name, #btnNew { display: none; } .doc-title { max-width: 170px; } .sheet { padding: 26px 22px 40px; } #editor { padding: 14px 16px 30vh; } }