mail-editor-pancake 0.0.0 → 0.0.8

package/packages/core/src/editor/styles.css

@@ -34,9 +34,15 @@
   --sm-empty-column-border: #d6d8dd;
   --sm-empty-column-stripe: rgba(0, 0, 0, 0.02);
   --sm-on-primary: #ffffff;
-  --sm-gallery-cell-bg: #f4f5f7;
-  --sm-gallery-thumb-bg: #e9ebef;
+  --sm-gallery-cell-bg: #ebecef;
+  --sm-gallery-thumb-bg: #dde1e8;
   --sm-gallery-cell-hover-border: #d6d9df;
+  /* 三栏与画布边距（窄屏见文末 @media） */
+  --sm-layout-col-left: 240px;
+  --sm-layout-col-right: 300px;
+  --sm-canvas-pad-top: 48px;
+  --sm-canvas-pad-x: 24px;
+  --sm-canvas-pad-bottom: 24px;
 
   position: relative;
   display: grid;
@@ -49,6 +55,13 @@
   background: var(--sm-bg);
 }
 
+.sm-root:fullscreen,
+.sm-root:-webkit-full-screen {
+  width: 100%;
+  height: 100%;
+  background: var(--sm-bg);
+}
+
 .sm-root *,
 .sm-root *::before,
 .sm-root *::after {
@@ -77,8 +90,8 @@
   --sm-empty-column-border: #3d444d;
   --sm-empty-column-stripe: rgba(255, 255, 255, 0.04);
   --sm-on-primary: #ffffff;
-  --sm-gallery-cell-bg: #21262d;
-  --sm-gallery-thumb-bg: #30363d;
+  --sm-gallery-cell-bg: #252c36;
+  --sm-gallery-thumb-bg: #343d4a;
   --sm-gallery-cell-hover-border: #484f58;
 }
 
@@ -105,8 +118,8 @@
     --sm-empty-column-border: #3d444d;
     --sm-empty-column-stripe: rgba(255, 255, 255, 0.04);
     --sm-on-primary: #ffffff;
-    --sm-gallery-cell-bg: #21262d;
-    --sm-gallery-thumb-bg: #30363d;
+    --sm-gallery-cell-bg: #252c36;
+    --sm-gallery-thumb-bg: #343d4a;
     --sm-gallery-cell-hover-border: #484f58;
   }
 }
@@ -138,6 +151,55 @@
   flex: 1;
 }
 
+.sm-focus-crumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2px;
+  width: 100%;
+  min-width: 0;
+  font-size: 12px;
+  line-height: 1.35;
+  color: var(--sm-text-muted);
+}
+.sm-focus-crumb__sep {
+  flex-shrink: 0;
+  padding: 0 2px;
+  color: var(--sm-text-muted);
+  opacity: 0.55;
+  user-select: none;
+}
+.sm-focus-crumb__item {
+  display: inline-block;
+  max-width: 9em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border: 0;
+  background: transparent;
+  padding: 2px 6px;
+  margin: 0;
+  border-radius: var(--sm-radius-sm);
+  font: inherit;
+  font-size: 12px;
+  color: var(--sm-text-muted);
+  cursor: pointer;
+  vertical-align: middle;
+}
+.sm-focus-crumb__item:hover {
+  background: var(--sm-ghost-hover-bg);
+  color: var(--sm-text);
+}
+.sm-focus-crumb__item--current {
+  color: var(--sm-text);
+  font-weight: 600;
+  cursor: default;
+}
+.sm-focus-crumb__item--current:hover {
+  background: transparent;
+  color: var(--sm-text);
+}
+
 .sm-topbar__theme-seg {
   flex-shrink: 0;
 }
@@ -179,6 +241,31 @@
   flex-shrink: 0;
 }
 
+.sm-topbar__icon-btn {
+  flex-shrink: 0;
+  min-width: 28px;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  justify-content: center;
+  gap: 0;
+}
+.sm-topbar__icon-btn svg {
+  display: block;
+  flex-shrink: 0;
+}
+.sm-topbar__toggle-btn[aria-pressed="true"] {
+  background: var(--sm-primary-soft);
+  color: var(--sm-primary);
+}
+.sm-topbar__toggle-btn .sm-layout-borders-check {
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+.sm-topbar__toggle-btn[aria-pressed="true"] .sm-layout-borders-check {
+  opacity: 1;
+}
+
 .sm-btn {
   display: inline-flex;
   align-items: center;
@@ -199,7 +286,16 @@
   border-color: var(--sm-primary);
   color: var(--sm-on-primary);
 }
-.sm-btn--primary:hover { filter: brightness(1.05); }
+/*
+ * .sm-btn:hover 会给所有按钮铺上 surface-hover 背景；主按钮若不覆盖 background，
+ * 会出现浅色底 + --sm-on-primary 白字（导出/下载/图库插入等在外层页面里几乎看不见）。
+ */
+.sm-btn--primary:hover:not([disabled]) {
+  background: var(--sm-primary);
+  border-color: var(--sm-primary);
+  color: var(--sm-on-primary);
+  filter: brightness(1.05);
+}
 .sm-btn--ghost { border-color: transparent; background: transparent; }
 .sm-btn--ghost:hover { background: var(--sm-ghost-hover-bg); }
 .sm-btn--secondary {
@@ -225,6 +321,9 @@
   background: var(--sm-surface);
 }
 .sm-segmented__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   height: 28px;
   padding: 0 12px;
   border: 0;
@@ -238,22 +337,62 @@
   color: var(--sm-primary);
   font-weight: 600;
 }
+.sm-segmented--fill {
+  display: flex;
+  width: 100%;
+  align-self: stretch;
+}
+.sm-segmented--fill .sm-segmented__item {
+  flex: 1;
+  min-width: 0;
+  padding: 0 6px;
+}
 
 /* 主体三栏 ---------------------------------------------------------------- */
 .sm-body {
   position: relative;
   z-index: 2;
   display: grid;
-  grid-template-columns: 240px 1fr 300px;
+  grid-template-columns: var(--sm-layout-col-left) minmax(0, 1fr)
+    var(--sm-layout-col-right);
   min-height: 0;
+  overflow: auto;
+}
+
+.sm-body.sm-body--source {
+  grid-template-columns: minmax(0, 1fr);
 }
 
 .sm-panel {
   background: var(--sm-panel-bg);
   border-right: 1px solid var(--sm-border);
   overflow: auto;
+  min-width: 0;
+}
+.sm-panel--right {
+  border-right: 0;
+  border-left: 1px solid var(--sm-border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.sm-panel__head {
+  flex-shrink: 0;
+  padding: 10px 12px 8px;
+  border-bottom: 1px solid var(--sm-border);
+  background: var(--sm-panel-bg);
+}
+
+.sm-panel__head[hidden] {
+  display: none;
+}
+
+.sm-panel__body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
 }
-.sm-panel--right { border-right: 0; border-left: 1px solid var(--sm-border); }
 
 .sm-panel__title {
   font-size: 12px;
@@ -310,8 +449,30 @@
 /* 中栏：画布 ------------------------------------------------------------- */
 .sm-canvas-wrap {
   background: var(--sm-canvas-bg);
-  padding: 48px 24px 24px;
+  padding: var(--sm-canvas-pad-top) var(--sm-canvas-pad-x)
+    var(--sm-canvas-pad-bottom);
   overflow: auto;
+  min-width: 0;
+}
+
+@media (max-width: 1366px) {
+  .sm-root {
+    --sm-layout-col-left: 208px;
+    --sm-layout-col-right: 268px;
+    --sm-canvas-pad-top: 36px;
+    --sm-canvas-pad-x: 16px;
+    --sm-canvas-pad-bottom: 20px;
+  }
+}
+
+@media (max-width: 1180px) {
+  .sm-root {
+    --sm-layout-col-left: 184px;
+    --sm-layout-col-right: 244px;
+    --sm-canvas-pad-top: 28px;
+    --sm-canvas-pad-x: 12px;
+    --sm-canvas-pad-bottom: 16px;
+  }
 }
 
 .sm-canvas {
@@ -325,28 +486,85 @@
   /* 由 Canvas 在运行时设为 doc.styles.linkColor；兜底与默认邮件 link 橙一致 */
   --sm-editor-link-color: #ff5a00;
 }
-/* 用户代理对 <a> 的默认色会盖过继承的 color，需与预览/MJML 全局链接色对齐 */
-.sm-canvas a,
-.sm-canvas a:link,
-.sm-canvas a:visited,
-.sm-canvas a:hover,
-.sm-canvas a:active {
-  color: var(--sm-editor-link-color) !important;
+/*
+ * 无 inline color 时使用文档级链接色；局部 style 优先于全局（不用 !important，避免盖过 foreColor）。
+ * 属性选择器排除 background-color 等误匹配（仅匹配 style 中的 color: 声明）。
+ */
+.sm-canvas a:not([style^="color:"]):not([style*=";color:"]):not([style*="; color:"]),
+.sm-canvas a:not([style^="color:"]):not([style*=";color:"]):not([style*="; color:"]):link,
+.sm-canvas a:not([style^="color:"]):not([style*=";color:"]):not([style*="; color:"]):visited,
+.sm-canvas a:not([style^="color:"]):not([style*=";color:"]):not([style*="; color:"]):hover,
+.sm-canvas a:not([style^="color:"]):not([style*=";color:"]):not([style*="; color:"]):active {
+  color: var(--sm-editor-link-color);
 }
 
 .sm-canvas .sm-text-content :where(p) {
   margin: 0;
 }
 
-/* Section 在画布中的呈现层（包了一层壳便于选中/排序） */
+/* 宿主全局 reset（如 p/strong { font-weight:400 }）会盖过块级字重配置，子节点须继承容器 */
+.sm-canvas .sm-text-content :where(
+    p,
+    li,
+    td,
+    th,
+    span,
+    div,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    address,
+    caption
+  ) {
+  font-weight: inherit;
+}
+
+.sm-canvas .sm-text-content :where(strong, b) {
+  font-weight: bolder;
+}
+
+.sm-canvas .sm-text-content :where(ul, ol) {
+  margin: 0.5em 0;
+  padding-left: 1.5em;
+  list-style-position: outside;
+}
+
+.sm-canvas .sm-text-content ul {
+  list-style-type: disc;
+}
+
+.sm-canvas .sm-text-content ol {
+  list-style-type: decimal;
+}
+
+/* Section 外层：Sortable 拖拽壳，与列内 Sortable 分离避免嵌套冲突 */
+.sm-section-host {
+  position: relative;
+}
+.sm-section-host:hover,
+.sm-section-host.is-selected,
+.sm-section-host.sm-chosen,
+.sm-section-host.sm-drag {
+  z-index: 5;
+}
+
+/* Section 在画布中的呈现层 */
 .sm-section {
   position: relative;
   outline: 1px dashed transparent;
   outline-offset: -1px;
   transition: outline-color 0.12s;
 }
-.sm-section:hover { outline-color: var(--sm-outline-muted); }
-.sm-section.is-selected {
+.sm-root.sm-show-layout-borders .sm-section {
+  outline-color: var(--sm-outline-muted);
+}
+.sm-section-host:hover .sm-section {
+  outline-color: var(--sm-outline-muted);
+}
+.sm-section-host.is-selected .sm-section {
   outline: 2px solid var(--sm-primary);
 }
 .sm-section__toolbar {
@@ -354,19 +572,37 @@
   top: auto;
   bottom: 100%;
   right: 8px;
+  left: auto;
   margin-bottom: 10px;
-  z-index: 1;
+  z-index: 10;
   display: none;
   align-items: center;
   gap: 6px;
   flex-direction: row;
   flex-wrap: nowrap;
   max-width: calc(100% - 16px);
-  /* 贴在 Section 上沿之上，避免压住白纸圆角与选中描边（translateY(-100%) 在部分布局下仍会叠在内容上） */
+  pointer-events: auto;
+  transition: margin-bottom 0.12s ease;
+  /* 贴在 Section 上沿之上，避免压住白纸圆角与选中描边 */
   transform: none;
 }
-.sm-section.is-selected .sm-section__toolbar,
-.sm-section:hover .sm-section__toolbar {
+/* 内部 Block 工具条可见时，Section 工具条上移让位（尤其多列第一列 Block 条在左侧，避免叠层抢点击） */
+.sm-section-host:has(.sm-block:hover) .sm-section__toolbar,
+.sm-section-host:has(.sm-block.is-selected) .sm-section__toolbar,
+.sm-section-host:has(.sm-block.is-editing) .sm-section__toolbar {
+  /* margin-bottom: calc(10px + 44px); */
+}
+/* Block 交互时抬高内容层，保证列内工具条（z-index:30）在 Section 工具条之上可点 */
+.sm-section-host:has(.sm-block:hover) .sm-section,
+.sm-section-host:has(.sm-block.is-selected) .sm-section,
+.sm-section-host:has(.sm-block.is-editing) .sm-section {
+  position: relative;
+  z-index: 20;
+}
+.sm-section-host.is-selected .sm-section__toolbar,
+.sm-section-host:hover .sm-section__toolbar,
+.sm-section-host.sm-chosen .sm-section__toolbar,
+.sm-section-host.sm-drag .sm-section__toolbar {
   display: inline-flex;
 }
 .sm-section__toolbar-label {
@@ -382,7 +618,7 @@
   user-select: none;
   flex-shrink: 0;
 }
-.sm-section.is-selected .sm-section__toolbar-label {
+.sm-section-host.is-selected .sm-section__toolbar-label {
   border-color: var(--sm-primary-soft);
   color: var(--sm-primary);
 }
@@ -392,9 +628,28 @@
   gap: 4px;
   flex-shrink: 0;
 }
-.sm-section.is-selected .sm-section__toolbar-actions {
+.sm-section-host.is-selected .sm-section__toolbar-actions,
+.sm-section-host.sm-chosen .sm-section__toolbar-actions,
+.sm-section-host.sm-drag .sm-section__toolbar-actions {
   display: inline-flex;
 }
+.sm-section-host.is-selected .sm-section__toolbar,
+.sm-section-host.sm-chosen .sm-section__toolbar,
+.sm-section-host.sm-drag .sm-section__toolbar {
+  background: rgba(31, 35, 40, 0.92);
+  padding: 4px 6px;
+  border-radius: 6px;
+  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.14);
+}
+.sm-section-host.is-selected .sm-section__toolbar-label,
+.sm-section-host.sm-chosen .sm-section__toolbar-label,
+.sm-section-host.sm-drag .sm-section__toolbar-label {
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  padding: 0;
+  color: rgba(255, 255, 255, 0.88);
+}
 .sm-tool-btn {
   width: 24px;
   height: 24px;
@@ -409,13 +664,18 @@
 }
 .sm-tool-btn:hover { filter: brightness(1.1); }
 .sm-tool-btn--danger { background: var(--sm-danger); }
+.sm-section__handle { cursor: grab; }
+.sm-section__handle:active { cursor: grabbing; }
 
 .sm-section__columns {
   position: relative;
-  z-index: 2;
   display: flex;
   width: 100%;
 }
+.sm-section-host.sm-chosen .sm-section__columns,
+.sm-section-host.sm-drag .sm-section__columns {
+  pointer-events: none;
+}
 
 .sm-column {
   flex: 1 1 auto;
@@ -448,13 +708,30 @@
 .sm-block {
   position: relative;
   outline: 1px dashed transparent;
-  outline-offset: -2px;
+  /* 不用负 offset，避免行首 caret 被描边盖住 */
+  outline-offset: 0;
 }
-.sm-block:hover { outline-color: var(--sm-outline-muted); }
-.sm-block.is-selected { outline: 2px solid var(--sm-primary); }
-.sm-block.is-editing {
+.sm-root.sm-show-layout-borders .sm-block:not(.is-selected):not(.is-editing) {
+  outline-color: var(--sm-outline-muted);
+}
+.sm-block:hover:not(.is-selected):not(.is-editing) {
+  outline-color: var(--sm-outline-muted);
+}
+.sm-block.is-selected:not(.is-editing) {
   outline: 2px solid var(--sm-primary);
+}
+.sm-block.is-editing {
+  /* 编辑中：块级虚线框（偏外），与内层 focus 实线区分 */
+  outline: 1px dashed color-mix(in srgb, var(--sm-primary) 55%, var(--sm-border));
+  outline-offset: 3px;
   cursor: text;
+  /* 列内 Block 按 DOM 顺序绘制；下方块（如 padding-top:0 的分割线）会盖住 offset 描边 */
+  z-index: 3;
+}
+/* hover / 选中态同样抬升，避免 2px 实线描边被相邻块遮挡（编辑态 z-index 更高，见 .is-editing） */
+.sm-block:hover:not(.is-editing),
+.sm-block.is-selected:not(.is-editing) {
+  z-index: 2;
 }
 .sm-block__content { position: relative; }
 
@@ -464,7 +741,7 @@
   bottom: 100%;
   right: 0;
   margin-bottom: 8px;
-  z-index: 20;
+  z-index: 30;
   display: none;
   align-items: center;
   gap: 6px;
@@ -641,6 +918,7 @@
   align-items: center;
 }
 .sm-social-link-list__color {
+  cursor: pointer;
   width: 100%;
   height: 32px;
   padding: 2px;
@@ -761,6 +1039,16 @@
   text-align: center;
   line-height: 1.2;
 }
+.sm-spacing-row input[type='range'],
+.sm-field__slider-row input[type='range'],
+.sm-width-field__slider-row input[type='range'] {
+  cursor: pointer;
+}
+.sm-spacing-row input[type='range']::-webkit-slider-thumb,
+.sm-field__slider-row input[type='range']::-webkit-slider-thumb,
+.sm-width-field__slider-row input[type='range']::-webkit-slider-thumb {
+  cursor: pointer;
+}
 .sm-spacing-row input[type='range'] {
   flex: 1 1 auto;
   min-width: 0;
@@ -768,8 +1056,9 @@
   accent-color: var(--sm-primary);
 }
 .sm-spacing-row .sm-input {
-  flex: 0 0 52px;
-  width: 52px;
+  flex: 0 0 64px;
+  width: 64px;
+  min-width: 64px;
   text-align: center;
 }
 
@@ -787,11 +1076,67 @@
   font-size: 11px;
 }
 
+.sm-field__label-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.sm-inherit-switch {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.sm-inherit-switch__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  user-select: none;
+}
+.sm-inherit-switch__text {
+  font-size: 12px;
+  color: var(--sm-text-muted);
+}
+.sm-inherit-switch__input {
+  width: 28px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--sm-primary);
+  cursor: pointer;
+}
+.sm-inherit-switch__value {
+  font-size: 12px;
+  color: var(--sm-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+.sm-inherit-switch__value[hidden] {
+  display: none;
+}
+.sm-segmented--disabled {
+  opacity: 0.45;
+}
+
 .sm-field__slider-row {
   display: flex;
   align-items: center;
   gap: 8px;
 }
+.sm-field__slider-row--inherit {
+  opacity: 0.55;
+}
+.sm-field__slider-row--inherit input[type='range'] {
+  accent-color: var(--sm-outline-muted);
+}
+.sm-field__slider-row--inherit input[type='number']:disabled {
+  background: var(--sm-surface-hover);
+  color: var(--sm-text-muted);
+}
+.sm-input--inherit-disabled {
+  opacity: 0.55;
+}
 .sm-field__slider-row input[type='range'] {
   flex: 1;
   min-width: 0;
@@ -799,11 +1144,12 @@
   accent-color: var(--sm-primary);
 }
 .sm-field__slider-row .sm-input {
-  width: 52px;
+  flex: 0 0 64px;
+  width: 64px;
+  min-width: 64px;
   flex-shrink: 0;
   text-align: center;
 }
-
 .sm-segmented--wrap {
   flex-wrap: wrap;
   max-width: 100%;
@@ -825,8 +1171,9 @@
   accent-color: var(--sm-primary);
 }
 .sm-width-field__slider-row .sm-input {
-  flex: 0 0 60px;
-  width: 60px;
+  flex: 0 0 64px;
+  width: 64px;
+  min-width: 64px;
   text-align: center;
 }
 .sm-width-field__slider-row.is-disabled {
@@ -842,6 +1189,11 @@
   border: 1px solid var(--sm-border);
   border-radius: 6px;
   background: none;
+  cursor: pointer;
+}
+.sm-color-row input[type='color'].sm-color-row__pick--inherit {
+  opacity: 0.55;
+  border-style: dashed;
 }
 
 .sm-empty-form {
@@ -914,13 +1266,26 @@
 
 /* 内联编辑 + 富文本浮动工具条 -------------------------------------------- */
 .sm-inline-editing {
-  outline: 2px dashed var(--sm-primary) !important;
+  /* 编辑中未聚焦（如点浮动工具条）：虚线 + 淡底；正 offset 不挡行首 caret */
+  outline: 2px dashed color-mix(in srgb, var(--sm-primary) 70%, var(--sm-outline-muted)) !important;
   outline-offset: 2px;
+  box-shadow: none;
+  border-radius: 2px;
+  background-color: color-mix(in srgb, var(--sm-primary-soft) 55%, transparent);
   cursor: text;
   min-height: 1em;
   caret-color: var(--sm-primary);
+  transition:
+    outline-color 0.12s ease,
+    box-shadow 0.12s ease,
+    background-color 0.12s ease;
+}
+.sm-inline-editing:focus {
+  outline: 2px solid var(--sm-primary) !important;
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px var(--sm-primary-soft);
+  background-color: color-mix(in srgb, var(--sm-primary-soft) 35%, transparent);
 }
-.sm-inline-editing:focus { outline-style: solid !important; }
 .sm-inline-editing:empty::before {
   content: attr(data-placeholder);
   color: var(--sm-placeholder);
@@ -1017,6 +1382,89 @@
 .sm-floating-toolbar__link-panel .sm-input::placeholder { color: rgba(255,255,255,0.5); }
 .sm-floating-toolbar__link-panel .sm-btn { height: 26px; }
 
+/* 自定义色板（右栏 / 富文本色卡） ---------------------------------------- */
+.sm-color-picker-layer {
+  position: absolute;
+  z-index: 210;
+}
+.sm-color-picker {
+  width: 220px;
+  padding: 10px;
+  background: var(--sm-surface, #fff);
+  border: 1px solid var(--sm-border, #e6e8ec);
+  border-radius: var(--sm-radius-sm, 6px);
+  box-shadow: var(--sm-shadow-md, 0 4px 16px rgba(16, 24, 40, 0.08));
+}
+.sm-color-picker__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.sm-color-picker__title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--sm-text, #1f2328);
+}
+.sm-color-picker__close {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--sm-radius-sm, 6px);
+  background: transparent;
+  color: var(--sm-text-muted, #6b7280);
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+}
+.sm-color-picker__close:hover {
+  background: var(--sm-ghost-hover-bg, #f0f1f4);
+  color: var(--sm-text, #1f2328);
+}
+.sm-color-picker__swatches {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 4px;
+  margin-bottom: 8px;
+}
+.sm-color-picker__swatch {
+  width: 100%;
+  aspect-ratio: 1;
+  padding: 0;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 4px;
+  cursor: pointer;
+}
+.sm-color-picker__swatch:hover {
+  outline: 2px solid var(--sm-primary, #4f46e5);
+  outline-offset: 1px;
+}
+.sm-color-picker__native {
+  width: 100%;
+  height: 32px;
+  margin-bottom: 6px;
+  padding: 0;
+  border: 1px solid var(--sm-border, #e6e8ec);
+  border-radius: 6px;
+  cursor: pointer;
+}
+.sm-color-picker__hex {
+  width: 100%;
+  text-align: center;
+}
+.sm-color-picker__foot {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+.sm-color-picker__clear {
+  height: 26px;
+  font-size: 12px;
+}
+
 /* 弹层（变量插入） ------------------------------------------------------- */
 .sm-popover {
   position: absolute;
@@ -1046,6 +1494,7 @@
 .sm-popover__label { font-size: 11px; color: var(--sm-text-muted); }
 
 /* Modal -------------------------------------------------------------------- */
+/* 弹层常挂在 document.body，无 .sm-root 祖先时 CSS 变量不存在；凡 var(...) 须带浅色兜底，避免卡片「透明」与页面叠在一起 */
 .sm-modal__mask {
   position: fixed;
   inset: 0;
@@ -1056,16 +1505,43 @@
   background: rgba(15, 23, 42, 0.45);
   opacity: 0;
   transition: opacity 0.18s ease;
+  /*
+   * 子树内的 .sm-btn / .sm-input 依赖 --sm-border、--sm-surface 等；
+   * body 下无继承链时在此补齐与浅色 .sm-root 一致的令牌，按钮不再像「纯文字」。
+   */
+  --sm-border: #e6e8ec;
+  --sm-outline-muted: #c7cad1;
+  --sm-surface: #ffffff;
+  --sm-surface-hover: #f5f6f8;
+  --sm-text: #1f2328;
+  --sm-text-muted: #6b7280;
+  --sm-primary: #4f46e5;
+  --sm-primary-soft: #eef2ff;
+  --sm-on-primary: #ffffff;
+  --sm-danger: #dc2626;
+  --sm-ghost-hover-bg: #f0f1f4;
+  --sm-code-bg: #fafbfc;
+  --sm-modal-footer-bg: #fafbfc;
+  --sm-canvas-bg: #eceef2;
+  --sm-panel-bg: #ffffff;
+  --sm-radius-sm: 6px;
+  --sm-radius: 8px;
+  --sm-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
+  --sm-shadow-md: 0 4px 16px rgba(16, 24, 40, 0.08);
 }
 .sm-modal__mask.is-open { opacity: 1; }
 
 .sm-modal__card {
   display: flex;
   flex-direction: column;
-  background: var(--sm-panel-bg);
-  color: var(--sm-text);
+  background: var(--sm-panel-bg, #ffffff);
+  color: var(--sm-text, #1f2328);
   border-radius: 12px;
-  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
+  border: 1px solid var(--sm-border, #e6e8ec);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
+    0 24px 48px rgba(15, 23, 42, 0.14),
+    0 8px 24px rgba(15, 23, 42, 0.08);
   max-width: 96vw;
   max-height: 92vh;
   transform: translateY(8px) scale(0.98);
@@ -1076,12 +1552,35 @@
   transform: translateY(0) scale(1);
 }
 
+/* 预览邮件：弹框高度随内容（JS 测量 iframe），整体不超过视口 */
+.sm-modal__card.sm-modal--preview {
+  max-height: calc(100vh - 24px);
+  min-height: 50%;
+  height: auto;
+}
+.sm-modal__card.sm-modal--preview .sm-modal__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+}
+.sm-modal__card.sm-modal--preview .sm-modal__body.sm-modal__body--center {
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+}
+.sm-modal__card.sm-modal--preview .sm-preview__viewport {
+  flex: 0 0 auto;
+  width: var(--sm-preview-w);
+  max-width: 100%;
+}
+
 .sm-modal__header {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 12px 16px;
-  border-bottom: 1px solid var(--sm-border);
+  background: var(--sm-panel-bg, #ffffff);
+  border-bottom: 1px solid var(--sm-border, #e6e8ec);
 }
 .sm-modal__title {
   font-weight: 600;
@@ -1102,21 +1601,25 @@
   border: 0;
   border-radius: 6px;
   background: transparent;
-  color: var(--sm-text-muted);
+  color: var(--sm-text-muted, #6b7280);
   cursor: pointer;
 }
-.sm-modal__close:hover { background: var(--sm-ghost-hover-bg); color: var(--sm-text); }
+.sm-modal__close:hover {
+  background: var(--sm-ghost-hover-bg, #f0f1f4);
+  color: var(--sm-text, #1f2328);
+}
 
 .sm-modal__body {
   flex: 1;
   min-height: 0;
   overflow: auto;
+  background: var(--sm-panel-bg, #ffffff);
 }
 .sm-modal__body--center {
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  background: var(--sm-canvas-bg);
+  background: var(--sm-canvas-bg, #eceef2);
   padding: 16px;
 }
 
@@ -1125,8 +1628,8 @@
   justify-content: flex-end;
   gap: 8px;
   padding: 10px 16px;
-  border-top: 1px solid var(--sm-border);
-  background: var(--sm-modal-footer-bg);
+  border-top: 1px solid var(--sm-border, #e6e8ec);
+  background: var(--sm-modal-footer-bg, #fafbfc);
 }
 .sm-modal__footer:empty { display: none; }
 
@@ -1137,9 +1640,27 @@
   min-height: 240px;
 }
 
+.sm-modal--gallery .sm-modal__header {
+  padding: 14px 18px;
+  background: linear-gradient(
+    180deg,
+    var(--sm-modal-footer-bg, #fafbfc) 0%,
+    var(--sm-panel-bg, #ffffff) 100%
+  );
+}
+.sm-modal--gallery .sm-modal__title {
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+.sm-modal--gallery .sm-modal__footer {
+  padding: 12px 18px;
+  gap: 10px;
+}
+
 .sm-gallery-modal {
-  --sm-gallery-gap: 10px;
-  --sm-gallery-cell-border: var(--sm-border);
+  --sm-gallery-gap: 12px;
+  --sm-gallery-cell-border: var(--sm-border, #e6e8ec);
   --sm-gallery-cell-radius: 8px;
   --sm-gallery-thumb-h: 88px;
 
@@ -1149,9 +1670,9 @@
   gap: var(--sm-gallery-gap);
   flex: 1;
   min-height: 0;
-  padding: 12px;
-  background: var(--sm-panel-bg);
-  color: var(--sm-text);
+  padding: 14px 16px 16px;
+  background: var(--sm-panel-bg, #ffffff);
+  color: var(--sm-text, #1f2328);
 }
 
 .sm-gallery-modal__toolbar {
@@ -1161,12 +1682,18 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
 }
 .sm-gallery-modal__search {
   flex: 1 1 140px;
   min-width: 100px;
   height: 32px;
+  padding-left: 32px;
+  background-color: var(--sm-surface, #ffffff);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='4.25'/%3E%3Cpath d='M9.5 9.5 12 12'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: 10px center;
+  background-size: 14px 14px;
 }
 .sm-gallery-modal__addurl-input {
   flex: 1 1 min(220px, 36vw);
@@ -1176,8 +1703,11 @@
 .sm-gallery-modal__toolbar-action {
   flex-shrink: 0;
   height: 32px;
+  min-width: 72px;
+  justify-content: center;
   font-size: 12px;
-  padding: 0 12px;
+  font-weight: 500;
+  padding: 0 14px;
 }
 .sm-gallery-modal__file {
   position: absolute;
@@ -1189,7 +1719,7 @@
 
 .sm-gallery-modal__error {
   font-size: 12px;
-  color: var(--sm-danger);
+  color: var(--sm-danger, #dc2626);
   flex-shrink: 0;
 }
 
@@ -1200,17 +1730,30 @@
   display: flex;
   flex-direction: column;
   gap: 10px;
+  padding: 4px;
+  margin-top: 2px;
+  background: var(--sm-modal-footer-bg, #fafbfc);
+  border: 1px solid var(--sm-border, #e6e8ec);
+  border-radius: var(--sm-radius-sm, 6px);
 }
 
 .sm-gallery-modal__grid {
   display: grid;
+  /* minmax 下限由列承担；子项须 min-width:0，否则大图固有宽度会撑破网格导致重叠 */
   grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
   gap: 8px;
+  width: 100%;
+  min-width: 0;
+}
+
+.sm-gallery-modal__grid > * {
+  min-width: 0;
 }
 
 .sm-gallery-modal__cell-wrap {
   position: relative;
   min-width: 0;
+  max-width: 100%;
 }
 
 .sm-gallery-modal__cell-delete {
@@ -1224,8 +1767,8 @@
   margin: 0;
   border: 0;
   border-radius: 4px;
-  background: rgba(15, 23, 42, 0.65);
-  color: var(--sm-on-primary);
+  background: rgba(15, 23, 42, 0.82);
+  color: var(--sm-on-primary, #ffffff);
   font-size: 16px;
   line-height: 1;
   cursor: pointer;
@@ -1234,7 +1777,7 @@
   justify-content: center;
 }
 .sm-gallery-modal__cell-delete:hover {
-  background: var(--sm-danger);
+  background: var(--sm-danger, #dc2626);
 }
 
 .sm-gallery-modal__cell {
@@ -1245,66 +1788,82 @@
   padding: 6px;
   border: 2px solid transparent;
   border-radius: var(--sm-gallery-cell-radius);
-  background: var(--sm-gallery-cell-bg);
+  background: var(--sm-gallery-cell-bg, #ebecef);
   cursor: pointer;
   text-align: left;
   font: inherit;
   color: inherit;
   transition: border-color 0.12s, box-shadow 0.12s;
+  box-sizing: border-box;
+  min-width: 0;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
 }
 .sm-gallery-modal__cell:hover {
-  border-color: var(--sm-gallery-cell-hover-border);
+  border-color: var(--sm-gallery-cell-hover-border, #d6d9df);
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.07);
 }
 .sm-gallery-modal__cell.is-selected {
-  border-color: var(--sm-primary);
-  box-shadow: 0 0 0 2px var(--sm-primary-soft);
+  border-color: var(--sm-primary, #4f46e5);
+  box-shadow:
+    0 0 0 2px var(--sm-primary-soft, #eef2ff),
+    0 4px 14px rgba(79, 70, 229, 0.12);
 }
 
 .sm-gallery-modal__thumb {
+  display: block;
+  flex-shrink: 0;
   width: 100%;
-  height: var(--sm-gallery-thumb-h);
-  object-fit: cover;
+  max-width: 100%;
+  /* height: var(--sm-gallery-thumb-h); */
+  max-height: var(--sm-gallery-thumb-h);
+  /* object-fit: cover; */
   border-radius: 4px;
-  background: var(--sm-gallery-thumb-bg);
+  background: var(--sm-gallery-thumb-bg, #dde1e8);
 }
 
 .sm-gallery-modal__caption {
   font-size: 11px;
-  color: var(--sm-text-muted);
+  color: var(--sm-text-muted, #6b7280);
   margin-top: 4px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  min-width: 0;
 }
 
 .sm-gallery-modal__empty {
   grid-column: 1 / -1;
   text-align: center;
   font-size: 13px;
-  color: var(--sm-text-muted);
+  color: var(--sm-text-muted, #6b7280);
   padding: 28px 12px;
 }
 
 .sm-gallery-modal__loadmore {
   align-self: center;
-  margin-top: 4px;
-  height: 32px;
+  margin-top: 10px;
+  height: 34px;
+  min-width: 128px;
+  justify-content: center;
   font-size: 12px;
+  font-weight: 500;
 }
 
 /* Preview ------------------------------------------------------------------ */
 .sm-preview__viewport {
   --sm-preview-w: 800px;
-  --sm-preview-h: 700px;
   width: var(--sm-preview-w);
   max-width: 100%;
-  height: var(--sm-preview-h);
-  max-height: 100%;
+  min-height: 200px;
+  /* 高度由 PreviewModal 根据 iframe 文档 scrollHeight 写入 */
   /* 预览 iframe 内为邮件 HTML，外框保持白纸 */
   background: #ffffff;
   border-radius: 12px;
-  border: 1px solid var(--sm-border);
-  box-shadow: var(--sm-shadow-md);
+  border: 1px solid var(--sm-border, #e6e8ec);
+  box-shadow: var(--sm-shadow-md, 0 4px 16px rgba(16, 24, 40, 0.08));
   overflow: hidden;
   transition: width 0.2s ease, height 0.2s ease;
 }
@@ -1319,18 +1878,22 @@
 .sm-modal--export .sm-modal__body,
 .sm-modal--block-code .sm-modal__body {
   padding: 0;
-  background: var(--sm-code-bg);
+  background: var(--sm-code-bg, #fafbfc);
 }
 .sm-export__editor {
   height: 100%;
-  background: var(--sm-code-bg);
+  background: var(--sm-code-bg, #fafbfc);
 }
 .sm-export__editor .cm-editor {
   height: 100%;
-  background: var(--sm-code-bg) !important;
-  color: var(--sm-text);
+  background: var(--sm-code-bg, #fafbfc) !important;
+  color: var(--sm-text, #1f2328);
+}
+.sm-export__editor .cm-content {
+  padding: 12px;
+  font-size: 12px;
+  color: var(--sm-text, #1f2328);
 }
-.sm-export__editor .cm-content { padding: 12px; font-size: 12px; color: var(--sm-text); }
 
 /* Toast -------------------------------------------------------------------- */
 .sm-toast {