okooooooo/edgeever
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): tighten details fold alignment and size

Browse Source
This commit is contained in:
tianma-if committed 2026-09-20 19:56:56 +08:00
1 parent e0a2f38447
commit b070370142
5 files changed
+106 -54
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/web/src/styles/globals.css
+40 -20
View File
@@ -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 {
apps/web/src/styles/note-html-export.css
+6 -7
View File
@@ -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 {
apps/web/src/styles/note-print.css
+5 -5
View File
@@ -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),
packages/shared/src/details.test.mjs
+14 -1
View File
@@ -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");
});
});
packages/shared/src/details.ts
+41 -21
View File
@@ -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;
}
`;