finch-markdown-editor 0.2.12 → 0.2.14

package/dist/panel.css

@@ -1,5 +1,5 @@
 :root{
-  --bg:var(--finch-bg-root,#f7f7f8);
+  --bg:var(--finch-bg-main,#f7f7f8);
   --card:var(--finch-bg-elevated,#fff);
   --text:var(--finch-text-primary,#1d1d20);
   --muted:var(--finch-text-secondary,#777);
@@ -8,7 +8,7 @@
 }
 @media (prefers-color-scheme: dark) {
   :root{
-    --bg:var(--finch-bg-root,#17171a);
+    --bg:var(--finch-bg-main,#17171a);
     --card:var(--finch-bg-elevated,#242429);
     --text:var(--finch-text-primary,#eee);
     --muted:var(--finch-text-secondary,#aaa);
@@ -19,6 +19,21 @@
 *{box-sizing:border-box}
 html,body{height:100%}
 body{margin:0;background:var(--bg);color:var(--text);font:13px var(--finch-font-body,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif)}
+/* Windows and Linux reserve a scrollbar track in Chromium. Keep a compact
+   thumb for direct dragging, but make it appear only while hovering or
+   scrolling; the track itself remains transparent. macOS keeps its system
+   scrollbar behavior unchanged. */
+/* Do not set `scrollbar-width: thin`: it overrides the WebKit width below
+   in Chromium/Electron. */
+body.non-mac-platform .cm-scroller{scrollbar-color:color-mix(in srgb,var(--muted) 20%,transparent) transparent}
+/* The 2px transparent border on either side leaves an 8px painted thumb. */
+body.non-mac-platform .cm-scroller::-webkit-scrollbar{width:12px;height:12px}
+body.non-mac-platform .cm-scroller::-webkit-scrollbar-track{background:transparent}
+body.non-mac-platform .cm-scroller::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:999px;background-color:color-mix(in srgb,var(--muted) 20%,transparent);background-clip:content-box}
+body.non-mac-platform .cm-scroller:hover::-webkit-scrollbar-thumb,
+body.non-mac-platform .cm-scroller.cm-scrollbar-active::-webkit-scrollbar-thumb{background-color:color-mix(in srgb,var(--muted) 58%,transparent)}
+body.non-mac-platform .cm-scroller:hover{scrollbar-color:color-mix(in srgb,var(--muted) 58%,transparent) transparent}
+body.non-mac-platform .cm-scroller.cm-scrollbar-active{scrollbar-color:color-mix(in srgb,var(--muted) 58%,transparent) transparent}
 .app{width:100%;height:100vh;display:flex;flex-direction:column}
 .stage{position:relative;flex:1;min-height:0}
 .pane{position:absolute;inset:0;display:none}
@@ -177,7 +192,7 @@ body.app-view .status-inline-btn:hover{background:var(--finch-bg-hover,var(--bg)
 
 /* Full-screen App View shell. The same document remains a compact, host-toolbar-
    driven Panel App until finch:env explicitly identifies the appView surface. */
-.app-toolbar{height:48px;flex:none;align-items:center;gap:12px;padding:7px 12px;border-bottom:1px solid var(--border);background:var(--card)}
+.app-toolbar{height:48px;flex:none;align-items:center;gap:12px;padding:7px 12px;border-bottom:1px solid var(--border);background:var(--finch-bg-main)}
 body.app-view .app-toolbar{display:flex!important}
 .app-toolbar-group{display:flex;align-items:center;gap:6px;flex:none}
 .app-toolbar-end{margin-left:auto}
@@ -194,6 +209,43 @@ body.app-view .app-toolbar{display:flex!important}
 .app-tool-label{min-width:auto;padding:0 9px}.ic-save,.ic-save-check{display:inline-flex;align-items:center}.ic-save[hidden],.ic-save-check[hidden]{display:none}.app-menu-wrap{position:relative}.app-menu{position:absolute;z-index:32;top:calc(100% + 7px);right:0;min-width:174px;padding:5px;border:1px solid var(--border);border-radius:9px;background:var(--card);box-shadow:0 2px 8px rgba(0,0,0,.12)}
 .app-menu button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:7px 9px;border:0;border-radius:6px;background:transparent;color:var(--text);font:12px var(--finch-font-body,system-ui);text-align:left;cursor:pointer}.app-menu button:hover{background:var(--finch-bg-hover,var(--bg))}.app-menu button.checked{color:var(--text);background:var(--finch-bg-active,color-mix(in srgb,var(--text) 10%,transparent));font-weight:600}.app-menu button:disabled{color:var(--muted);cursor:default;opacity:.5}.app-menu button:disabled:hover{background:transparent}.app-menu hr{margin:5px 3px;border:0;border-top:1px solid var(--border)}
 .app-document-meta{min-width:0;display:flex;flex-direction:column;gap:1px}.app-document-meta strong,.app-document-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-document-meta strong{font-size:13px}.app-document-meta span{max-width:34vw;color:var(--muted);font-size:11px}
+/* Focus mode ("专注") in App View: instead of just dimming inactive editor
+   lines (see codemirror.ts), collapse the entire toolbar down to a single
+   floating toggle pinned top-right, out of the writing surface's way. Both
+   toolbar groups hide except #appFocus itself, so the same button — now a
+   lone pill — re-expands the toolbar on the next click. Gated on
+   has-document as well as focus-mode: a restored focusMode can be true
+   before any document is open, and the Home screen still needs its full
+   toolbar (Library/Home/Open) to navigate. */
+body.app-view.has-document.focus-mode .app-toolbar{
+  position:fixed;top:12px;right:18px;left:auto;width:auto;height:auto;
+  padding:0;gap:0;border:0;background:transparent;z-index:20;
+}
+body.app-view.has-document.focus-mode .app-toolbar-group:not(.app-toolbar-end){display:none!important}
+body.app-view.has-document.focus-mode .app-toolbar-end{margin-left:0}
+body.app-view.has-document.focus-mode .app-toolbar-end>*:not(#appFocus){display:none!important}
+body.app-view.has-document.focus-mode #appFocus{
+  width:36px;height:36px;padding:0;border-color:var(--border);border-radius:999px;
+  background:var(--card);box-shadow:0 6px 18px rgba(0,0,0,.16);
+  opacity:.62;transition:opacity .15s ease;
+  animation:mdFocusPillIn .22s cubic-bezier(.16,1,.3,1);
+}
+body.app-view.has-document.focus-mode #appFocus:hover,
+body.app-view.has-document.focus-mode #appFocus:focus-visible{opacity:1}
+/* Rises up into its resting corner rather than just fading in place. */
+@keyframes mdFocusPillIn{from{opacity:0;transform:translateY(14px)}to{opacity:.62;transform:translateY(0)}}
+/* The button sits flush against the right edge here (unlike its normal
+   toolbar position), so the shared centered tooltip (`.app-tool[data-
+   tooltip]::after` uses left:50%/translate(-50%,..)) would spill past the
+   window's right edge and get clipped. Anchor it to the button's right
+   edge instead — the id selector's specificity is enough to beat the
+   shared rule without touching it. */
+body.app-view.has-document.focus-mode #appFocus[data-tooltip]::after{
+  left:auto;right:0;transform:translateY(-3px);
+}
+body.app-view.has-document.focus-mode #appFocus[data-tooltip]:hover::after{
+  transform:translateY(0);
+}
 body.app-view .stage{display:grid;grid-template-columns:minmax(0,1fr) 6px var(--preview-width,480px);background:var(--bg)}
 body.app-view .pane{position:relative;inset:auto;min-width:0;min-height:0}
 body.app-view .pane.active{display:block}