diff --git a/src/editor/markdown/web/build/style.css b/src/editor/markdown/web/build/style.css index 2e0ecf5c..6373d953 100644 --- a/src/editor/markdown/web/build/style.css +++ b/src/editor/markdown/web/build/style.css @@ -11,6 +11,9 @@ --code-bg: #f5f5f5; --code-fg: #1f1f1f; --border: #e0e0e0; + /* 表格专用边框:半透明适配任意主题底色(浅色叠加白底 ≈ #e6e6e6,与 §4.8.5 设计稿 #e5e5e5 一致); + 不复用 --border(C++ 注入 bg.darker(130),白底时为 #c4c4c4,比设计稿明显偏深) */ + --table-border: rgba(0, 0, 0, 0.1); --link: #0058de; --content-max-width: 800px; --content-center: 1; @@ -18,6 +21,7 @@ [data-theme="dark"] { --link: #024cca; + --table-border: rgba(255, 255, 255, 0.1); } html, body { @@ -80,7 +84,8 @@ html, body { max-width: 100%; min-height: 222px; box-sizing: border-box; - border: 1px solid rgba(229, 229, 229, 1); + /* 外框用 --table-border 与内部网格线同色,避免表头区域边框与表格边框颜色不一致 */ + border: 1px solid var(--table-border); border-radius: 12px; background-color: rgba(255, 255, 255, 0.3); margin: 1em 0; @@ -96,7 +101,15 @@ html, body { border-radius: 0 0 12px 12px; } .table-wrapper table { width: 100%; border-collapse: collapse; margin: 1em 0; } -.table-block .table-wrapper table { margin: 0; } +/* 隐藏表格左/右/底外边框(collapse 冲突规则中 hidden 优先级最高): + 外框由 .table-block 的圆角边框承担,单元格不再贴边画直线—— + 否则侧面出现双线,且底部直边被 wrapper 圆角裁剪,转角处露出无边的透明缺口 */ +.table-block .table-wrapper table { + margin: 0; + border-left-style: hidden; + border-right-style: hidden; + border-bottom-style: hidden; +} .table-wrapper td, .table-wrapper th { min-width: 100px; max-width: 240px; @@ -106,7 +119,7 @@ html, body { vertical-align: middle; word-break: break-word; white-space: normal; - border: 1px solid var(--border); + border: 1px solid var(--table-border); box-sizing: border-box; } .table-wrapper th { font-weight: 700; } @@ -237,10 +250,7 @@ html, body { [data-theme="dark"] .code-block-expand { color: rgba(255, 255, 255, 0.7); } [data-theme="dark"] .code-block-expand:hover { color: rgba(255, 255, 255, 1); } [data-theme="dark"] .table-block-header { background-color: rgba(255, 255, 255, 0.05); } -[data-theme="dark"] .table-block { - border-color: var(--border); - background-color: rgba(255, 255, 255, 0.1); -} +[data-theme="dark"] .table-block { background-color: rgba(255, 255, 255, 0.1); } /* §4.8.7 图片 */ .milkdown img { diff --git a/src/editor/markdown/web/theme.css b/src/editor/markdown/web/theme.css index 07a11645..dee9e8ba 100644 --- a/src/editor/markdown/web/theme.css +++ b/src/editor/markdown/web/theme.css @@ -10,6 +10,9 @@ --code-bg: #f5f5f5; --code-fg: #1f1f1f; --border: #e0e0e0; + /* 表格专用边框:半透明适配任意主题底色(浅色叠加白底 ≈ #e6e6e6,与 §4.8.5 设计稿 #e5e5e5 一致); + 不复用 --border(C++ 注入 bg.darker(130),白底时为 #c4c4c4,比设计稿明显偏深) */ + --table-border: rgba(0, 0, 0, 0.1); --link: #0058de; --content-max-width: 800px; --content-center: 1; @@ -17,6 +20,7 @@ [data-theme="dark"] { --link: #024cca; + --table-border: rgba(255, 255, 255, 0.1); } html, body { @@ -79,7 +83,8 @@ html, body { max-width: 100%; min-height: 222px; box-sizing: border-box; - border: 1px solid rgba(229, 229, 229, 1); + /* 外框用 --table-border 与内部网格线同色,避免表头区域边框与表格边框颜色不一致 */ + border: 1px solid var(--table-border); border-radius: 12px; background-color: rgba(255, 255, 255, 0.3); margin: 1em 0; @@ -95,7 +100,15 @@ html, body { border-radius: 0 0 12px 12px; } .table-wrapper table { width: 100%; border-collapse: collapse; margin: 1em 0; } -.table-block .table-wrapper table { margin: 0; } +/* 隐藏表格左/右/底外边框(collapse 冲突规则中 hidden 优先级最高): + 外框由 .table-block 的圆角边框承担,单元格不再贴边画直线—— + 否则侧面出现双线,且底部直边被 wrapper 圆角裁剪,转角处露出无边的透明缺口 */ +.table-block .table-wrapper table { + margin: 0; + border-left-style: hidden; + border-right-style: hidden; + border-bottom-style: hidden; +} .table-wrapper td, .table-wrapper th { min-width: 100px; max-width: 240px; @@ -105,7 +118,7 @@ html, body { vertical-align: middle; word-break: break-word; white-space: normal; - border: 1px solid var(--border); + border: 1px solid var(--table-border); box-sizing: border-box; } .table-wrapper th { font-weight: 700; } @@ -236,10 +249,7 @@ html, body { [data-theme="dark"] .code-block-expand { color: rgba(255, 255, 255, 0.7); } [data-theme="dark"] .code-block-expand:hover { color: rgba(255, 255, 255, 1); } [data-theme="dark"] .table-block-header { background-color: rgba(255, 255, 255, 0.05); } -[data-theme="dark"] .table-block { - border-color: var(--border); - background-color: rgba(255, 255, 255, 0.1); -} +[data-theme="dark"] .table-block { background-color: rgba(255, 255, 255, 0.1); } /* §4.8.7 图片 */ .milkdown img {