From b07037014278d477dbe5b20453e71ecdfa7f4f18 Mon Sep 17 00:00:00 2001 From: tianma-if Date: Sun, 20 Sep 2026 19:56:56 +0800 Subject: [PATCH] fix(web): tighten details fold alignment and size --- apps/web/src/styles/globals.css | 60 +++++++++++++++-------- apps/web/src/styles/note-html-export.css | 13 +++-- apps/web/src/styles/note-print.css | 10 ++-- packages/shared/src/details.test.mjs | 15 +++++- packages/shared/src/details.ts | 62 ++++++++++++++++-------- 5 files changed, 106 insertions(+), 54 deletions(-) diff --git a/apps/web/src/styles/globals.css b/apps/web/src/styles/globals.css index ea313d1f..2c2ba372 100644 --- a/apps/web/src/styles/globals.css +++ b/apps/web/src/styles/globals.css @@ -697,40 +697,52 @@ textarea { .ProseMirror [data-type="details"] { display: flex; align-items: flex-start; - gap: 0.2rem; - margin: 0.7em 0; - padding: 0.45rem 0.7rem 0.55rem 0.3rem; - border: 1px solid color-mix(in srgb, currentColor 14%, transparent); - border-radius: 10px; - background: color-mix(in srgb, currentColor 4%, transparent); + gap: 0.1em; + margin: 0.15em 0; + padding: 0; + border: 0; + background: transparent; } .ProseMirror [data-type="details"] > button { + display: inline-flex; flex: 0 0 auto; - width: 1.55rem; - height: 1.55rem; - margin-top: 0.05rem; + align-items: center; + justify-content: center; + box-sizing: border-box; + width: 1.6em; + height: 1.6em; + margin: 0; padding: 0; border: 0; - border-radius: 999px; + border-radius: 4px; background: transparent; color: #16a06e; + font: inherit; + line-height: 0; cursor: pointer; } +.ProseMirror [data-type="details"] > button:hover { + background: color-mix(in srgb, currentColor 8%, transparent); +} + +.ProseMirror [data-type="details"] > button:focus-visible { + outline: 2px solid color-mix(in srgb, #16a06e 55%, transparent); + outline-offset: 1px; +} + .ProseMirror [data-type="details"] > button::before { content: ""; - display: block; - width: 0.42rem; - height: 0.42rem; - margin: 0.38rem auto 0; - border-right: 2px solid currentColor; - border-bottom: 2px solid currentColor; + width: 0.32em; + height: 0.32em; + margin: 0; + border-right: 1.5px solid currentColor; + border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); } .ProseMirror [data-type="details"].is-open > button::before { - margin-top: 0.22rem; transform: rotate(45deg); } @@ -741,7 +753,11 @@ textarea { .ProseMirror summary { display: block; - font-weight: 650; + margin: 0; + padding: 0; + font-size: inherit; + font-weight: 500; + line-height: inherit; list-style: none; cursor: text; } @@ -750,8 +766,12 @@ textarea { display: none; } -.ProseMirror [data-type="detailsContent"] { - margin-top: 0.35rem; +.ProseMirror [data-type="details"]:not(.is-open) [data-type="detailsContent"] { + display: none !important; +} + +.ProseMirror [data-type="details"].is-open [data-type="detailsContent"] { + margin-top: 0.15em; } .edgeever-public-share .ProseMirror { diff --git a/apps/web/src/styles/note-html-export.css b/apps/web/src/styles/note-html-export.css index 64e5c9bb..7d8eb57a 100644 --- a/apps/web/src/styles/note-html-export.css +++ b/apps/web/src/styles/note-html-export.css @@ -145,20 +145,19 @@ body { } .edgeever-html-content details { - margin: 0.75rem 0; - padding: 0.55rem 0.85rem; - border: 1px solid #d1d5db; - border-radius: 8px; - background: #f8fafc; + margin: 0.2em 0; + padding: 0; + border: 0; + background: transparent; } .edgeever-html-content summary { - font-weight: 650; + font-weight: 500; cursor: pointer; } .edgeever-html-content details > :not(summary) { - margin-top: 0.5rem; + margin-top: 0.15em; } .edgeever-html-content blockquote { diff --git a/apps/web/src/styles/note-print.css b/apps/web/src/styles/note-print.css index c6160eca..937201c9 100644 --- a/apps/web/src/styles/note-print.css +++ b/apps/web/src/styles/note-print.css @@ -272,14 +272,14 @@ .edgeever-print-content details { break-inside: avoid-page; - margin: 4mm 0; - padding: 3mm 3.5mm; - border: 0.3mm solid #cbd5e1; - border-radius: 2mm; + margin: 2mm 0; + padding: 0; + border: 0; + background: transparent; } .edgeever-print-content summary { - font-weight: 700; + font-weight: 500; } .edgeever-print-content details > :not(summary), diff --git a/packages/shared/src/details.test.mjs b/packages/shared/src/details.test.mjs index 00ee75b2..12d63623 100644 --- a/packages/shared/src/details.test.mjs +++ b/packages/shared/src/details.test.mjs @@ -1,5 +1,5 @@ import { describe, expect, test } from "bun:test"; -import { flattenDetailsForLinearHtml, wrapDetailsContentHtml } from "./details.ts"; +import { DETAILS_EDITOR_CSS, flattenDetailsForLinearHtml, wrapDetailsContentHtml } from "./details.ts"; describe("details HTML helpers", () => { test("wraps GitHub details bodies for the TipTap schema", () => { @@ -26,3 +26,16 @@ describe("details HTML helpers", () => { expect(root.textContent).toContain("hidden"); }); }); + +describe("details editor chrome", () => { + test("keeps a collapsed fold as a disclosure line instead of a filled card", () => { + expect(DETAILS_EDITOR_CSS).toContain("width: 1.6em"); + expect(DETAILS_EDITOR_CSS).toContain("height: 1.6em"); + expect(DETAILS_EDITOR_CSS).toContain("align-items: center"); + expect(DETAILS_EDITOR_CSS).toContain("justify-content: center"); + expect(DETAILS_EDITOR_CSS).toContain("display: none !important"); + expect(DETAILS_EDITOR_CSS).toContain("font-weight: 500"); + expect(DETAILS_EDITOR_CSS).not.toContain("border-radius: 10px"); + expect(DETAILS_EDITOR_CSS).not.toContain("border-left: 2px solid"); + }); +}); diff --git a/packages/shared/src/details.ts b/packages/shared/src/details.ts index a947ef25..afdd754d 100644 --- a/packages/shared/src/details.ts +++ b/packages/shared/src/details.ts @@ -155,40 +155,52 @@ export const DETAILS_EDITOR_CSS = ` .edgeever-editor-content [data-type="details"] { display: flex; align-items: flex-start; - gap: 0.2rem; - margin: 0.7em 0; - padding: 0.45rem 0.7rem 0.55rem 0.3rem; - border: 1px solid color-mix(in srgb, currentColor 14%, transparent); - border-radius: 10px; - background: color-mix(in srgb, currentColor 4%, transparent); + gap: 0.1em; + margin: 0.15em 0; + padding: 0; + border: 0; + background: transparent; } .ProseMirror [data-type="details"] > button, .edgeever-editor-content [data-type="details"] > button { + display: inline-flex; flex: 0 0 auto; - width: 1.55rem; - height: 1.55rem; - margin-top: 0.05rem; + align-items: center; + justify-content: center; + box-sizing: border-box; + width: 1.6em; + height: 1.6em; + margin: 0; padding: 0; border: 0; - border-radius: 999px; + border-radius: 4px; background: transparent; color: #16a06e; + font: inherit; + line-height: 0; cursor: pointer; } +.ProseMirror [data-type="details"] > button:hover, +.edgeever-editor-content [data-type="details"] > button:hover { + background: color-mix(in srgb, currentColor 8%, transparent); +} +.ProseMirror [data-type="details"] > button:focus-visible, +.edgeever-editor-content [data-type="details"] > button:focus-visible { + outline: 2px solid color-mix(in srgb, #16a06e 55%, transparent); + outline-offset: 1px; +} .ProseMirror [data-type="details"] > button::before, .edgeever-editor-content [data-type="details"] > button::before { content: ""; - display: block; - width: 0.42rem; - height: 0.42rem; - margin: 0.38rem auto 0; - border-right: 2px solid currentColor; - border-bottom: 2px solid currentColor; + width: 0.32em; + height: 0.32em; + margin: 0; + border-right: 1.5px solid currentColor; + border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); } .ProseMirror [data-type="details"].is-open > button::before, .edgeever-editor-content [data-type="details"].is-open > button::before { - margin-top: 0.22rem; transform: rotate(45deg); } .ProseMirror [data-type="details"] > div, @@ -199,7 +211,11 @@ export const DETAILS_EDITOR_CSS = ` .ProseMirror summary, .edgeever-editor-content summary { display: block; - font-weight: 650; + margin: 0; + padding: 0; + font-size: inherit; + font-weight: 500; + line-height: inherit; list-style: none; cursor: text; } @@ -207,9 +223,13 @@ export const DETAILS_EDITOR_CSS = ` .edgeever-editor-content summary::-webkit-details-marker { display: none; } -.ProseMirror [data-type="detailsContent"], -.edgeever-editor-content [data-type="detailsContent"] { - margin-top: 0.35rem; +.ProseMirror [data-type="details"]:not(.is-open) [data-type="detailsContent"], +.edgeever-editor-content [data-type="details"]:not(.is-open) [data-type="detailsContent"] { + display: none !important; +} +.ProseMirror [data-type="details"].is-open [data-type="detailsContent"], +.edgeever-editor-content [data-type="details"].is-open [data-type="detailsContent"] { + margin-top: 0.15em; } `;