:root{ --bg:#f6f7f9; --panel:#fff; --text:#222; --muted:#6b7280; --border:#e5e7eb; /* Card polish */ --card-radius: 12px; --card-pad: 16px; --card-border: #edf1f5; --card-shadow: 0 1px 1px rgba(17,24,39,.04), 0 6px 20px rgba(17,24,39,.06); --control-radius: 8px; } *{box-sizing:border-box} html,body{height:100%} /* Base font-size: all rem sizes scale with this; controlled by --x-base-fs */ html{ font-size: var(--x-base-fs, 16px); } body{ margin:0; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Noto Sans SC, Source Han Sans SC, Helvetica, Arial, sans-serif; color:var(--text); background:var(--bg); } .topbar{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--panel); border-bottom:1px solid var(--border)} .topbar h1{font-size:16px; margin:0} .actions{display:flex; gap:8px} button{padding:8px 12px; border:1px solid var(--card-border); background:#fff; border-radius:var(--control-radius); cursor:pointer} button:hover{background:#fafafa} .layout{ display:grid; grid-template-columns: minmax(340px, 1fr) auto 240px; gap:16px; padding:16px; max-width:1200px; margin: 0 auto; } .panel{background:var(--panel); border:1px solid var(--card-border); border-radius:var(--card-radius); padding:var(--card-pad); display:flex; flex-direction:column; box-shadow: var(--card-shadow)} .panel-title{ margin:0 0 12px; font-size:15px; font-weight:600; color: var(--text); letter-spacing:.2px } .editor-toolbar{ display:flex; gap:8px; margin-bottom:8px; } .editor-toolbar button{ display:inline-flex; align-items:center; gap:6px; } .field{display:flex; flex-direction:column; gap:6px} label{font-size:12px; color:var(--muted)} textarea{width:100%; height:60vh; resize:vertical; font:14px/1.6 -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Noto Sans SC, Source Han Sans SC, Helvetica, Arial, sans-serif; padding:10px 12px; border:1px solid var(--card-border); border-radius:var(--control-radius); background:#f9f9f9} /* Hide scrollbar in editor while keeping scroll */ #md{ overflow:auto; scrollbar-width: none; -ms-overflow-style: none; } #md::-webkit-scrollbar{ display:none; width:0; height:0; } /* Make left editor fill its card */ .panel.input{ min-height: calc(100vh - 120px); } .panel.input .field{ flex:1; min-height:0; } .panel.input textarea{ height:100%; } .settings{margin-top:12px} .settings .grid{display:grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap:8px} .settings .row{display:flex; gap:6px; align-items:center} .settings input{width:100%; padding:6px 8px; border:1px solid var(--border); border-radius:6px} .preview{min-height:70vh; max-height:calc(100vh - 120px); overflow:auto; align-self:start; /* hide scrollbars while keeping scroll */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ } .preview::-webkit-scrollbar{ display:none; width:0; height:0; } .preview-toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; color:var(--muted); font-size:12px} .pages{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; } .page{background:transparent; border:none; border-radius:0; overflow:hidden; display:flex; flex-direction:column; position:relative} .page canvas{width:100%; height:auto; display:block; background:#fff} /* per-page download button shows on hover at top-right */ .page .page-actions{ position:absolute; top:8px; right:8px; padding:0; border:0; background:transparent; display:inline-block; line-height:0; opacity:0; pointer-events:none; transition:opacity .15s ease; z-index:2 } .page.show-actions .page-actions{ opacity:1; pointer-events:auto } .page .page-actions button{ width:auto; min-width:96px; padding:6px 10px; margin:0; background:#ef4444; color:#fff; border:1px solid #dc2626; border-radius:6px } .page .page-actions button:hover{ background:#dc2626; color:#fff } /* Make the top-right bulk download button match per-page red style */ #downloadAllBtn{ background:#ef4444; color:#fff; border:1px solid #dc2626 } #downloadAllBtn:hover{ background:#dc2626; color:#fff } .footer{padding:8px 16px; color:var(--muted); font-size:12px} /* Site header and nav */ .site-header{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:var(--panel); border-bottom:1px solid var(--card-border); position:sticky; top:0; z-index:20; box-shadow: 0 1px 1px rgba(17,24,39,.03)} .brand{font-weight:700; font-size:17px; letter-spacing:.2px} .nav{display:flex; gap:10px; align-items:center} .nav a{font-size:13px; color:#4b5563; text-decoration:none; padding:8px 12px; border-radius:var(--control-radius); border:1px solid transparent; transition:background-color .15s ease, color .15s ease, border-color .15s ease} .nav a:hover{background:#f8fafc; color:#111827; border-color:#e5e7eb} .nav a.active{color:#111827; background:#f6f7f9; border-color:#e5e7eb} .nav a.disabled{color:#c7cad1; pointer-events:none} /* preview sizing */ .page{ width: 300px; } /* preview column sizing */ .preview{ justify-self: start; } .preview .preview-toolbar{ width: 300px; } .preview .pages{ width: 300px; } /* HTML page preview */ .page{ width: 300px; } .page .xcontent{ position:relative; width: 1200px; height: 1600px; background: var(--x-bg-color, #fff); } .page .xinner{ position:absolute; box-sizing:border-box; left:72px; top:100px; right:72px; bottom:120px; } /* Typography for HTML pages */ .xinner{ color: var(--x-text-color, #222); font-family: var(--x-font-family, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Noto Sans SC, Source Han Sans SC, Helvetica, Arial, sans-serif); font-size: 1rem; line-height: var(--x-lh, 1.5); display:flex; flex-direction:column; justify-content: var(--x-v-justify, flex-start); } .xinner h1, .xinner h2, .xinner h3{ text-align: var(--x-heading-align, left); color: var(--x-heading-color, var(--x-text-color, #222)); } .xinner h1{ margin:0.60rem 0 0.90rem; font-weight:700; font-size:1.60rem; line-height:1.35; } .xinner h2{ margin:0.50rem 0 0.70rem; font-weight:700; font-size:1.38rem; line-height:1.3; } .xinner h3{ margin:0.40rem 0 0.60rem; font-weight:600; font-size:1.20rem; line-height:1.25; } .xinner p{ margin:0 0 0.50rem; line-height: var(--x-lh, 1.45); } .xinner ul, .xinner ol, .xinner li{ line-height: var(--x-lh, 1.45); } .xinner ul, .xinner ol{ margin:0 0 0.50rem 1.25rem; padding:0; } /* revert task list custom styles */ .xinner li{ margin:0 0 0.2rem; } .xinner blockquote{ margin:0rem 0.2rem 0.8rem; padding-left:0.6rem; border-left:0.25rem solid var(--x-quote-bar, #e5e7eb); color: var(--x-quote-text, #555); } /* fenced code block */ .xinner pre{ margin:0 0 0.6rem; padding:0.60rem; border-radius:0.3rem; background: transparent; border:1px solid var(--x-code-border, currentColor); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size:0.85rem; line-height:1.3; white-space:pre-wrap; color: var(--x-text-color, #222); } /* inline code */ .xinner code{ display:inline-block; padding:0.05rem 0.25rem; border-radius:0.2rem; background: transparent; border:1px solid currentColor; color: var(--x-text-color, #222); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size:0.92em; } /* HTML page preview (frame wrapper to keep layout height scaled) */ .page{ width: 300px; } .page .xframe{ width: 300px; height: 400px; position: relative; overflow:hidden; background: var(--x-bg-color, #fff); border:1px solid var(--card-border); border-radius:0; box-shadow: 0 1px 1px rgba(17,24,39,.04); } .page .xpage{ width: 1200px; height: 1600px; position:absolute; left:0; top:0; transform-origin: top left; transform: scale(calc(300 / 1200)); } .page .xcontent{ position:relative; width: 1200px; height: 1600px; background: var(--x-bg-color, #fff); } .page .xinner{ position:absolute; box-sizing:border-box; left:72px; top:100px; right:72px; bottom:120px; } .font-panel{ width:240px; } .font-panel .field{ margin-bottom:12px } .font-panel select{ width:100%; padding:6px 8px; border:1px solid var(--card-border); border-radius:6px } /* two color pickers in one row */ .font-panel .field-row{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px; } .font-panel .field-row .field{ margin-bottom:0 } .font-panel input[type="color"]{ width:100%; height:32px; padding:1px 2px; border:1px solid var(--card-border); border-radius:6px; background:#fff } /* icon toggle group */ .toggle-group{ display:flex; gap:6px; } .toggle-btn{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:6px 8px; border:1px solid var(--card-border); background:#fff; border-radius:var(--control-radius); cursor:pointer; color:#555 } /* smaller radius for settings toggles (页面比例、标题对齐) */ .font-panel .toggle-btn{ border-radius:6px } .toggle-btn:hover{ background:#fafafa } .toggle-btn.is-active{ border-color:#fecaca; color:#f87171; background:#fff1f2 } /* nicer select arrow spacing */ .font-panel select{ padding-right: 36px; /* leave space for arrow */ background-color: #fff; -webkit-appearance:none; -moz-appearance:none; appearance:none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 12px; }