/**
* Block Toolbar 样式
*
* 块级常驻工具栏。绝对定位在 EditorOverlay / content overlay 容器内，
* top/left/transform 由 JS 计算后内联设置（见 block-toolbar.tsx）。
*/
.sc-block-toolbar {
position: absolute;
display: flex;
align-items: center;
gap: var(--sc-menu-gap);
padding: var(--sc-menu-padding-y) var(--sc-menu-padding-x);
background: var(--sc-menu-surface);
border: var(--sc-menu-border-width) solid var(--sc-menu-border-color);
border-radius: var(--sc-menu-radius);
box-shadow: var(--sc-menu-shadow);
-webkit-user-select: none;
user-select: none;
white-space: nowrap;
pointer-events: all;
z-index: 900;
}
.sc-block-toolbar .sc-btn--ghost {
color: var(--sc-menu-icon-color);
}
.sc-block-toolbar .sc-icon-btn-icon svg {
width: var(--sc-menu-icon-size);
height: var(--sc-menu-icon-size);
}
/**
* Floating Toolbar 样式
*/
.sc-floating-toolbar {
display: flex;
align-items: center;
gap: var(--sc-menu-gap);
padding: var(--sc-menu-padding-y) var(--sc-menu-padding-x);
background: var(--sc-menu-surface);
border: var(--sc-menu-border-width) solid var(--sc-menu-border-color);
border-radius: var(--sc-menu-radius);
box-shadow: var(--sc-menu-shadow);
-webkit-user-select: none;
user-select: none;
white-space: nowrap;
pointer-events: all;
}
.sc-floating-toolbar .sc-btn--ghost {
color: var(--sc-menu-icon-color);
}
.sc-floating-toolbar .sc-icon-btn-icon svg {
width: var(--sc-menu-icon-size);
height: var(--sc-menu-icon-size);
}
.sc-floating-toolbar-sep {
display: inline-block;
width: 1px;
height: var(--sc-menu-separator-height);
background: var(--sc-menu-separator-color);
}
.sc-floating-toolbar-btn.is-active {
color: var(--sc-menu-icon-color-active);
background: var(--sc-menu-active-bg);
}
@media (hover: hover) {
.sc-floating-toolbar-btn.is-active:hover:not(:disabled) {
color: var(--sc-menu-icon-color-active);
}
}
.sc-floating-toolbar-btn.sc-text-btn .sc-text-btn-label {
color: var(--sc-menu-text-color);
}
.sc-floating-toolbar-text-btn {
display: inline-flex;
align-items: center;
gap: 2px;
height: 24px;
padding: 0 6px;
border: none;
border-radius: var(--sc-ui-radius-sm);
background: none;
color: var(--sc-menu-text-color);
font-size: var(--sc-menu-font-size);
white-space: nowrap;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
transition: background 0.1s;
}
@media (hover: hover) {
.sc-floating-toolbar-text-btn:hover:not(:disabled) {
background: var(--sc-menu-hover-bg);
}
}
.sc-floating-toolbar-text-btn:active:not(:disabled) {
background: var(--sc-menu-active-bg);
}
.sc-floating-toolbar-text-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.sc-floating-toolbar-text-btn svg {
flex-shrink: 0;
}
.sc-floating-toolbar-text-btn > span {
white-space: nowrap;
}
.sc-floating-toolbar-toggle-group {
display: inline-flex;
align-items: center;
gap: 0;
}
.sc-turn-into-btn {
display: inline-flex;
align-items: center;
gap: 2px;
height: 26px;
padding: 0 6px;
border: none;
border-radius: var(--sc-ui-radius-sm);
background: none;
color: var(--sc-menu-text-color);
font-size: var(--sc-menu-font-size);
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: background 0.1s;
}
.sc-turn-into-btn[data-state='open'] {
background: var(--sc-menu-hover-bg);
}
@media (hover: hover) {
.sc-turn-into-btn:hover:not(:disabled) {
background: var(--sc-menu-hover-bg);
}
}
.sc-turn-into-btn.is-disabled,
.sc-turn-into-btn:disabled {
opacity: 0.4;
cursor: default;
}
.sc-turn-into-icon {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
}
.sc-turn-into-chevron {
flex-shrink: 0;
color: var(--sc-menu-text-color-muted);
}
.sc-turn-into-popover-content.sc-block-menu-content.sc-dropdown-content {
max-height: var(--radix-popper-available-height, 70vh);
overflow-y: auto;
z-index: 120;
}
.sc-turn-into-popover-content .sc-dropdown-item-icon {
color: inherit;
}
@media (hover: hover) {
.sc-turn-into-popover-content .sc-dropdown-item:hover:not(:disabled) {
background: var(--sc-ui-hover);
}
}
.sc-combined-color-content {
padding: 8px;
width: 292px;
box-sizing: border-box;
}
.sc-color-section-label {
margin: 0 0 6px;
font-size: var(--sc-menu-font-size-sm);
color: var(--sc-menu-text-color-muted);
font-weight: 500;
}
.sc-color-section-label + .sc-color-section-label {
margin-top: 10px;
}
.sc-color-row {
display: flex;
gap: 4px;
margin-bottom: 2px;
}
.sc-text-color-swatch {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: var(--sc-ui-radius-sm);
border: 2px solid transparent;
padding: 0;
background: none;
cursor: pointer;
transition: border-color 0.1s, background 0.1s, outline-color 0.1s;
flex-shrink: 0;
outline: 2px solid var(--swatch-outline-color, transparent);
outline-offset: -2px;
}
@media (hover: hover) {
.sc-text-color-swatch:hover {
background: var(--sc-ui-hover);
}
}
.sc-text-color-swatch.is-active {
border-color: var(--sc-ui-primary);
background: var(--sc-ui-active);
outline-color: var(--swatch-outline-color-active, var(--sc-ui-primary));
}
.sc-color-swatch-letter {
font-size: 13px;
font-weight: 700;
line-height: 1;
-webkit-user-select: none;
user-select: none;
}
.sc-color-grid {
display: grid;
grid-template-columns: repeat(10, 24px);
gap: 4px;
margin-bottom: 2px;
}
.sc-bg-color-swatch {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: var(--sc-ui-radius-sm);
border: 2px solid transparent;
padding: 0;
background: none;
cursor: pointer;
transition: border-color 0.1s;
}
@media (hover: hover) {
.sc-bg-color-swatch:hover {
opacity: 0.85;
}
}
.sc-bg-color-swatch.is-active {
border-color: var(--sc-ui-primary);
}
.sc-color-swatch-block {
display: block;
width: 16px;
height: 16px;
border-radius: 3px;
border: 1px solid var(--sc-ui-border);
}
.sc-color-swatch-clear {
display: block;
width: 16px;
height: 16px;
border-radius: 3px;
border: 1px solid var(--sc-ui-border);
position: relative;
overflow: hidden;
background: var(--sc-ui-bg);
}
.sc-color-swatch-clear::after {
content: '';
position: absolute;
top: 50%;
left: -2px;
right: -2px;
height: 1px;
background: var(--sc-ui-danger);
transform: rotate(-45deg);
transform-origin: center;
}
.sc-color-reset-btn {
display: block;
width: 100%;
margin-top: 8px;
padding: 6px 0;
border: 1px solid var(--sc-ui-border);
border-radius: var(--sc-ui-radius-sm);
background: none;
color: var(--sc-ui-text);
font-size: 13px;
text-align: center;
cursor: pointer;
transition: background 0.1s;
}
@media (hover: hover) {
.sc-color-reset-btn:hover {
background: var(--sc-ui-hover);
}
}
.sc-link-input-content {
padding: 8px;
min-width: 280px;
}
.sc-link-input-row {
display: flex;
align-items: center;
gap: 6px;
}
.sc-link-input-icon {
color: var(--sc-ui-text-muted);
flex-shrink: 0;
}
.sc-link-input-field {
flex: 1;
height: 28px;
padding: 0 8px;
border: 1px solid var(--sc-ui-border);
border-radius: var(--sc-ui-radius-sm);
background: var(--sc-ui-bg);
color: var(--sc-ui-text);
font-size: 13px;
outline: none;
transition: border-color 0.15s;
}
.sc-link-input-field:focus {
border-color: var(--sc-ui-primary);
}
.sc-link-input-field.is-error {
border-color: var(--sc-ui-danger);
}
.sc-link-input-field::-webkit-input-placeholder {
color: var(--sc-ui-text-muted);
}
.sc-link-input-field::placeholder {
color: var(--sc-ui-text-muted);
}
.sc-link-input-btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
border-radius: var(--sc-ui-radius-sm);
padding: 0;
cursor: pointer;
transition: background 0.1s;
}
.sc-link-input-btn.is-confirm {
background: var(--sc-ui-primary);
color: var(--sc-ui-text-on-primary);
}
@media (hover: hover) {
.sc-link-input-btn.is-confirm:hover {
background: var(--sc-ui-primary-hover);
}
}
.sc-link-input-btn.is-clear {
background: none;
color: var(--sc-ui-text-muted);
}
@media (hover: hover) {
.sc-link-input-btn.is-clear:hover {
background: var(--sc-ui-hover);
color: var(--sc-ui-danger);
}
}
.sc-link-input-error {
margin: 6px 0 0;
font-size: 12px;
color: var(--sc-ui-danger);
}
.sc-alignment-dropdown-content {
background: var(--sc-menu-surface);
border: var(--sc-menu-border-width) solid var(--sc-menu-border-color);
border-radius: var(--sc-menu-radius);
box-shadow: var(--sc-menu-shadow);
padding: 4px;
min-width: 144px;
z-index: 1000;
}
.sc-alignment-item-label {
flex: 1;
}
.sc-alignment-item-check {
margin-left: 8px;
color: var(--sc-menu-check-color, var(--sc-ui-primary));
flex-shrink: 0;
}
.sc-floating-toolbar-format-tooltip {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
min-width: -webkit-max-content;
min-width: max-content;
text-align: center;
}
.sc-floating-toolbar-format-tooltip-shortcut {
margin-left: 2px;
}
.sc-floating-toolbar-format-tooltip-markdown {
font-size: 11px;
line-height: 1.4;
}
.sc-floating-toolbar-format-tooltip-code {
font-family: var(--sc-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
font-size: 11px;
}
.sc-mobile-floating-toolbar {
position: relative;
display: flex;
align-items: center;
background: var(--sc-menu-surface);
border: var(--sc-menu-border-width) solid var(--sc-menu-border-color);
border-radius: var(--sc-menu-radius);
box-shadow: var(--sc-menu-shadow);
-webkit-user-select: none;
user-select: none;
pointer-events: all;
}
.sc-mobile-floating-toolbar:has(.sc-mobile-floating-toolbar-btn svg):has(.sc-mobile-floating-toolbar-arrow.is-above) {
transform: translateY(-6px);
}
.sc-mobile-floating-toolbar:has(.sc-mobile-floating-toolbar-btn svg):has(.sc-mobile-floating-toolbar-arrow.is-below) {
transform: translateY(2px);
}
.sc-mobile-floating-toolbar-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 14px;
font-size: var(--sc-menu-font-size);
color: var(--sc-menu-text-color);
background: none;
border: none;
cursor: pointer;
white-space: nowrap;
-webkit-user-select: none;
user-select: none;
transition: background 0.1s;
}
.sc-mobile-floating-toolbar-btn.with-triangle {
height: 26px;
border-radius: 4px;
margin-left: 4px;
padding: 0 6px;
}
.sc-mobile-floating-toolbar-btn.with-triangle[data-state='open'] {
background: var(--sc-menu-hover-bg);
}
@media (hover: hover) {
.sc-mobile-floating-toolbar-btn:hover:not(:disabled) {
background: var(--sc-menu-hover-bg);
}
}
.sc-mobile-floating-toolbar-btn:active:not(:disabled) {
background: var(--sc-menu-active-bg);
}
.sc-mobile-floating-toolbar-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.sc-mobile-floating-toolbar-sep {
width: 1px;
height: var(--sc-menu-separator-height);
background: var(--sc-menu-separator-color);
}
.sc-mobile-floating-toolbar-arrow {
position: absolute;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid var(--sc-menu-border-color);
}
.sc-mobile-floating-toolbar-arrow.is-below {
border-top: none;
border-bottom: 5px solid var(--sc-menu-border-color);
}
.sc-mobile-floating-toolbar-arrow.is-outer {
bottom: -5px;
}
.sc-mobile-floating-toolbar-arrow.is-outer.is-below {
bottom: auto;
top: -5px;
}
.sc-mobile-floating-toolbar-arrow.is-inner {
bottom: -4px;
border-top-color: var(--sc-menu-surface);
}
.sc-mobile-floating-toolbar-arrow.is-inner.is-below {
bottom: auto;
top: -4px;
border-bottom-color: var(--sc-menu-surface);
}
/* CommandPalette 样式 */
:where([data-sc-theme='light']) {
--sc-editor-bg: #fff;
--sc-color-selection: rgba(35, 131, 226, 0.28);
--sc-inline-code-bg: #f1f1ef;
--sc-table-selection-bg: rgba(22, 119, 255, 0.08);
}
:root {
--sc-embed-selected-outline: 1px solid var(--sc-ui-primary);
--sc-embed-selected-outline-offset: -1px;
}
:where([data-sc-theme='dark']) {
--sc-editor-bg: #131414;
--sc-color-selection: rgba(78, 168, 246, 0.32);
--sc-inline-code-bg: #373737;
--sc-table-selection-bg: rgba(22, 119, 255, 0.08);
}
:root {
--sc-text-default: #1f1f1f;
--sc-text-grey: #858585;
--sc-text-blue: #2972f4;
--sc-text-sky_blue: #00a3f5;
--sc-text-green: #45b076;
--sc-text-yellow: #f5c400;
--sc-text-orange: #f88825;
--sc-text-red: #de3c36;
--sc-text-rose_red: #dd4097;
--sc-text-purple: #9a38d7;
--sc-text-code: #d34097;
--sc-text-reminder: #e07800;
}
:root[data-sc-color-scheme='dark'] {
--sc-text-default: #ededed;
--sc-text-grey: #7b7b7b;
--sc-text-blue: #4ea8f6;
--sc-text-sky_blue: #25b8f7;
--sc-text-green: #72c092;
--sc-text-yellow: #f7d425;
--sc-text-orange: #f9a24a;
--sc-text-red: #e5645a;
--sc-text-rose_red: #e464a6;
--sc-text-purple: #b15cdf;
--sc-text-code: #e464a6;
--sc-text-reminder: #e69223;
}
:root {
--sc-bg-default: transparent;
--sc-bg-grey_background: #ebebeb;
--sc-bg-light_grey_background: #f3f5f7;
--sc-bg-dark_background: #dcdfe4;
--sc-bg-light_blue_background: #e5efff;
--sc-bg-blue_background: #c7dcff;
--sc-bg-light_sky_blue_background: #e5f6ff;
--sc-bg-sky_blue_background: #c7ecff;
--sc-bg-light_green_background: #eafaf1;
--sc-bg-green_background: #ace2c5;
--sc-bg-light_yellow_background: #fff9e3;
--sc-bg-yellow_background: #ffeead;
--sc-bg-light_orange_background: #fff3eb;
--sc-bg-orange_background: #ffdcc4;
--sc-bg-light_red_background: #ffe9e8;
--sc-bg-red_background: #ffc9c7;
--sc-bg-light_rose_red_background: #ffecf4;
--sc-bg-rose_red_background: #ffc7e2;
--sc-bg-light_purple_background: #fdebff;
--sc-bg-purple_background: #f2c7ff;
}
:root[data-sc-color-scheme='dark'] {
--sc-bg-default: transparent;
--sc-bg-grey_background: #3a3a3a;
--sc-bg-light_grey_background: #2d2d2d;
--sc-bg-dark_background: #4a4a4a;
--sc-bg-light_blue_background: #3d5c87;
--sc-bg-blue_background: #223b6c;
--sc-bg-light_sky_blue_background: #285781;
--sc-bg-sky_blue_background: #14486e;
--sc-bg-light_green_background: #17392b;
--sc-bg-green_background: #1b523a;
--sc-bg-light_yellow_background: #3e340f;
--sc-bg-yellow_background: #5b4a0c;
--sc-bg-light_orange_background: #422718;
--sc-bg-orange_background: #62351c;
--sc-bg-light_red_background: #4a2022;
--sc-bg-red_background: #6f282b;
--sc-bg-light_rose_red_background: #4a1f38;
--sc-bg-rose_red_background: #6f2750;
--sc-bg-light_purple_background: #3e204c;
--sc-bg-purple_background: #5b2871;
}
:root {
--sc-border-default: transparent;
--sc-border-grey: #80868f;
--sc-border-blue: #b0cdff;
--sc-border-sky_blue: #96deee;
--sc-border-green: #a8e0c2;
--sc-border-yellow: #f9e38b;
--sc-border-orange: #ffba85;
--sc-border-red: #ffa6a3;
--sc-border-rose_red: #ffaeda;
--sc-border-purple: #e7b4ff;
}
:root[data-sc-color-scheme='dark'] {
--sc-border-default: transparent;
--sc-border-grey: #5b5c5c;
--sc-border-blue: #2f4a88;
--sc-border-sky_blue: #2b6c81;
--sc-border-green: #317c58;
--sc-border-yellow: #866c25;
--sc-border-orange: #884925;
--sc-border-red: #882c30;
--sc-border-rose_red: #882f66;
--sc-border-purple: #652d88;
}
:root {
--sc-divider-default: rgba(0, 0, 0, 0.12);
--sc-divider-black_divider: #000000;
--sc-divider-grey_divider: #858585;
--sc-divider-light_grey_divider: #dcdfe4;
--sc-divider-blue_divider: #2972f4;
--sc-divider-light_blue_divider: #b0cdff;
--sc-divider-table_blue_divider: #66b7fc;
--sc-divider-sky_blue_divider: #00a3f5;
--sc-divider-light_sky_blue_divider: #96deee;
--sc-divider-green_divider: #00b371;
--sc-divider-light_green_divider: #9ce4c3;
--sc-divider-yellow_divider: #fec100;
--sc-divider-light_yellow_divider: #ffeda5;
--sc-divider-orange_divider: #ff8000;
--sc-divider-light_orange_divider: #ffdac1;
--sc-divider-red_divider: #f22329;
--sc-divider-light_red_divider: #ffc6c5;
--sc-divider-rose_red_divider: #dd4097;
--sc-divider-light_rose_red_divider: #ffaeda;
--sc-divider-purple_divider: #a72edf;
--sc-divider-light_purple_divider: #fac5ff;
}
:root[data-sc-color-scheme='dark'] {
--sc-divider-default: #ededed;
--sc-divider-black_divider: #41444a;
--sc-divider-grey_divider: #7b7b7b;
--sc-divider-light_grey_divider: #5b5c5c;
--sc-divider-blue_divider: #4ea8f6;
--sc-divider-light_blue_divider: #2f4a88;
--sc-divider-table_blue_divider: #205da4;
--sc-divider-sky_blue_divider: #25b8f7;
--sc-divider-light_sky_blue_divider: #2b6c81;
--sc-divider-green_divider: #72c092;
--sc-divider-light_green_divider: #317c58;
--sc-divider-yellow_divider: #f7d425;
--sc-divider-light_yellow_divider: #866c25;
--sc-divider-orange_divider: #f9a24a;
--sc-divider-light_orange_divider: #884925;
--sc-divider-red_divider: #e5645a;
--sc-divider-light_red_divider: #882c30;
--sc-divider-rose_red_divider: #e464a6;
--sc-divider-light_rose_red_divider: #882f66;
--sc-divider-purple_divider: #b15cdf;
--sc-divider-light_purple_divider: #652d88;
}
:where([data-sc-theme]) {
--sc-table-selector-bg: var(--sc-color-border, #e0e0e0);
--sc-table-selector-active-bg: var(--sc-color-text-tertiary, #aaa);
--sc-table-selector-selected-bg: var(--sc-primary, #1677ff);
--sc-table-selector-selected-hover-bg: var(--sc-primary-hover, #4096ff);
--sc-table-plus-btn-hover-bg: var(--sc-primary, #1677ff);
--sc-table-background: var(--sc-editor-bg);
--sc-quote-bg: transparent;
--sc-quote-text-color: var(--sc-text-grey);
--sc-quote-border-color: var(--sc-ui-primary);
--sc-menu-handle-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
--sc-code-block-bg: var(--sc-bg-grey_background);
--sc-code-block-border: 1px solid var(--sc-ui-border, rgba(0, 0, 0, 0.08));
--sc-resizer-handle-color: #3370ff;
--sc-link-color: var(--sc-ui-primary);
--sc-link-color-hover: var(--sc-ui-primary-hover);
--sc-heading-1-color: inherit;
--sc-heading-2-color: inherit;
--sc-heading-3-color: inherit;
--sc-heading-4-color: inherit;
--sc-heading-5-color: inherit;
--sc-heading-6-color: inherit;
}
:where([data-sc-theme]) {
--sc-editor-padding: calc(16px * var(--sc-font-scale, 1));
--sc-editor-padding-top: var(--sc-editor-padding);
--sc-editor-padding-right: var(--sc-editor-padding);
--sc-editor-padding-bottom: var(--sc-editor-padding);
--sc-editor-padding-left: var(--sc-editor-padding);
--sc-block-gap: calc(8px * var(--sc-font-scale, 1));
--sc-block-gap-heading-before: calc(28px * var(--sc-font-scale, 1));
--sc-block-gap-heading-after: calc(8px * var(--sc-font-scale, 1));
--sc-block-gap-media: calc(12px * var(--sc-font-scale, 1));
--sc-block-gap-table-before: calc(20px * var(--sc-font-scale, 1));
--sc-block-gap-table-after: calc(20px * var(--sc-font-scale, 1));
--sc-block-gap-separator: calc(4px * var(--sc-font-scale, 1));
--sc-block-gap-container: calc(12px * var(--sc-font-scale, 1));
--sc-block-gap-inner: calc(4px * var(--sc-font-scale, 1));
--sc-block-indent: calc(24px * var(--sc-font-scale, 1));
--sc-block-padding-x: calc(16px * var(--sc-font-scale, 1));
--sc-block-padding-y: calc(12px * var(--sc-font-scale, 1));
--sc-column-gap: calc(12px * var(--sc-font-scale, 1));
--sc-column-radius: 12px;
--sc-column-hover-bg: var(--sc-ui-hover, #f7f7f7);
--sc-block-radius: 4px;
--sc-image-radius: 10px;
--sc-table-selector-bg: var(--sc-color-border, #e0e0e0);
--sc-table-selector-active-bg: var(--sc-color-text-tertiary, #aaa);
--sc-table-selector-selected-bg: var(--sc-primary, #1677ff);
--sc-table-selector-selected-hover-bg: var(--sc-primary-hover, #4096ff);
--sc-table-plus-btn-hover-bg: var(--sc-primary, #1677ff);
--sc-quote-border-width: 2px;
--sc-table-cell-padding: calc(8px * var(--sc-font-scale, 1));
--sc-divider-padding: calc(12px * var(--sc-font-scale, 1));
--sc-inline-code-border-radius: 2px;
--sc-inline-code-padding: 0.125em 0.3em;
--sc-quote-border-radius: 0px;
--sc-quote-padding: var(--sc-block-padding-y) var(--sc-block-padding-x);
--sc-todo-checkbox-radius: 6px;
--sc-menu-handle-radius: var(--sc-ui-radius-lg);
--sc-code-block-radius: 10px;
--sc-code-block-padding-block: calc(10px * var(--sc-font-scale, 1));
--sc-code-block-padding-inline-right: calc(16px * var(--sc-font-scale, 1));
--sc-code-block-padding-inline-left: calc(44px * var(--sc-font-scale, 1));
--sc-code-line-number-inset: calc(10px * var(--sc-font-scale, 1));
--sc-callout-radius: 10px;
}
/**
* 浮动菜单专属 Token（--sc-menu-*）
*
* 面向「划词菜单 / 代码块菜单 / 图片菜单 / block 把手 / 表格操作菜单」这 5 类浮层，
* 抽出一套统一、可被外部覆盖的视觉变量，数值对齐 ardot 设计稿 toolbar-editor 组件规范。
*
* 设计原则：
* 1. 颜色类默认回退到 UI kit 的 --sc-ui-*，因此 light/dark 自动跟随，无需在此重复声明暗色值。
* 2. 尺寸类（icon-size / font-size）只暴露「最终尺寸」变量，外部可用 calc() 按系统字号等级做乘法覆盖，
* 例如：--sc-menu-font-size: calc(var(--host-font-scale, 1) * 14px);
* 3. 声明在 :root（而非 :where([data-sc-theme])）：Radix Popover / DropdownMenu 通过 Portal 渲染到
* ，需保证 Portal 内的菜单内容也能继承到这些变量。
*/
:root {
/* ── 颜色（统一，可外部覆盖；默认回退 --sc-ui-*，暗色自动跟随） ── */
/* 操作 icon 统一颜色。设计稿为 text/primary（≈ rgba(0,0,0,.9)），故映射到 --sc-ui-text。 */
--sc-menu-icon-color: var(--sc-ui-text, #1f1f1f);
/* icon / 项选中态（主题主色蓝） */
--sc-menu-icon-color-active: var(--sc-ui-primary, #2972f4);
/* 菜单项 check 符号颜色（turn into / 对齐 / 颜色等选中标记），默认跟随主色，可外部覆盖 */
--sc-menu-check-color: var(--sc-ui-primary, #2972f4);
/* 菜单内主文字颜色 */
--sc-menu-text-color: var(--sc-ui-text, #1f1f1f);
/* 菜单内次级/说明文字颜色 */
--sc-menu-text-color-muted: var(--sc-ui-text-muted, rgba(0, 0, 0, 0.45));
/* ── 尺寸（只暴露最终值，外部可用 calc 乘法覆盖） ── */
/* 主操作 icon 尺寸（svg width/height） */
--sc-menu-icon-size: 16px;
/* 菜单内主标签字号 */
--sc-menu-font-size: 14px;
/* 菜单内次级字号（如代码语言名、分组小标题） */
--sc-menu-font-size-sm: 12px;
/* ── 容器视觉（对齐设计稿；颜色回退 --sc-ui-*，暗色自动跟随） ── */
--sc-menu-surface: var(--sc-ui-surface, #fff);
--sc-menu-border-color: var(--sc-ui-surface-border, rgba(0, 0, 0, 0.08));
--sc-menu-border-width: 1px;
--sc-menu-radius: 8px;
/* 下拉/命令/语言选择等面板圆角（与工具栏胶囊 --sc-menu-radius 分离，可单独覆盖） */
--sc-menu-panel-radius: 12px;
--sc-menu-padding-x: 4px;
--sc-menu-padding-y: 4px;
--sc-menu-gap: 4px;
/* ── 交互反馈 ── */
--sc-menu-hover-bg: var(--sc-ui-hover, rgba(0, 0, 0, 0.04));
--sc-menu-active-bg: var(--sc-ui-active, rgba(0, 0, 0, 0.08));
/* ── 分隔线 ── */
--sc-menu-separator-color: var(--sc-ui-separator, rgba(0, 0, 0, 0.06));
--sc-menu-separator-height: 16px;
/* ── 阴影：设计稿 wb/shadow/Popup-Medium 双层柔和投影（远层 4% + 近层 6%） ── */
--sc-menu-shadow: 0 6px 24px -4px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.06);
}
/* 暗色模式：仅阴影需加强（颜色类已通过 --sc-ui-* 回退自动跟随） */
:root[data-sc-color-scheme='dark'] {
--sc-menu-shadow: 0 6px 24px -4px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}
:where([data-sc-theme]) {
--sc-content-font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', Helvetica, Arial, 'Microsoft YaHei', '微软雅黑', '黑体', Heiti, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', 'Android Emoji', EmojiSymbols, TdocsUncommon;
--sc-content-font-size: calc(14px * var(--sc-font-scale, 1));
--sc-content-line-height: 1.6;
--sc-ui-font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', Helvetica, Arial, 'Microsoft YaHei', '微软雅黑', sans-serif;
--sc-ui-font-size: 12px;
--sc-ui-line-height: 1.4;
--sc-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas;
--sc-code-block-font-family: 'Source Code Pro', var(--sc-font-family-mono);
--sc-content-font-weight-bold: 600;
--sc-inline-code-font-size: 93%;
--sc-quote-line-height: 1.75;
--sc-link-text-decoration: none;
--sc-heading-1-font-weight: var(--sc-content-font-weight-bold);
--sc-heading-2-font-weight: var(--sc-content-font-weight-bold);
--sc-heading-3-font-weight: var(--sc-content-font-weight-bold);
--sc-heading-letter-spacing: normal;
--sc-heading-1-line-height: 1.4;
--sc-heading-2-line-height: 1.4;
--sc-heading-3-line-height: 1.4;
--sc-heading-4-line-height: 1.5;
--sc-heading-5-line-height: 1.5;
--sc-heading-6-line-height: 1.5;
--sc-page-title-line-height: 1.7;
}
:where([data-sc-font='simsun']) {
--sc-content-font-family: SimSun, 宋体, 'Songti SC', STSong, NSimSun, FangSong, serif;
}
:where([data-sc-font='kaiti']) {
--sc-content-font-family: KaiTi, STKaiTi, 'Kaiti SC', 华文楷体, KaiTi_GB2312, 楷体_GB2312;
}
:where([data-sc-layout='compact']) {
--sc-editor-padding: calc(12px * var(--sc-font-scale, 1));
--sc-block-gap: calc(4px * var(--sc-font-scale, 1));
--sc-block-gap-heading-before: calc(16px * var(--sc-font-scale, 1));
--sc-block-gap-heading-after: calc(4px * var(--sc-font-scale, 1));
--sc-block-gap-media: calc(8px * var(--sc-font-scale, 1));
--sc-block-gap-separator: calc(2px * var(--sc-font-scale, 1));
--sc-block-gap-container: calc(8px * var(--sc-font-scale, 1));
--sc-block-gap-inner: calc(2px * var(--sc-font-scale, 1));
--sc-block-padding-x: calc(12px * var(--sc-font-scale, 1));
--sc-block-padding-y: calc(8px * var(--sc-font-scale, 1));
--sc-block-menu-handle-gap: calc(20px * var(--sc-font-scale, 1));
--sc-column-gap: calc(12px * var(--sc-font-scale, 1));
}
:where([data-sc-layout='default']) {
--sc-editor-padding: calc(16px * var(--sc-font-scale, 1));
--sc-block-gap: calc(8px * var(--sc-font-scale, 1));
--sc-block-gap-heading-before: calc(28px * var(--sc-font-scale, 1));
--sc-block-gap-heading-after: calc(8px * var(--sc-font-scale, 1));
--sc-block-gap-media: calc(12px * var(--sc-font-scale, 1));
--sc-block-gap-separator: calc(4px * var(--sc-font-scale, 1));
--sc-block-gap-container: calc(12px * var(--sc-font-scale, 1));
--sc-block-gap-inner: calc(4px * var(--sc-font-scale, 1));
--sc-block-padding-x: calc(16px * var(--sc-font-scale, 1));
--sc-block-padding-y: calc(12px * var(--sc-font-scale, 1));
--sc-block-menu-handle-gap: calc(10px * var(--sc-font-scale, 1));
--sc-column-gap: calc(12px * var(--sc-font-scale, 1));
}
:where([data-sc-layout='loose']) {
--sc-editor-padding: calc(20px * var(--sc-font-scale, 1));
--sc-block-gap: calc(12px * var(--sc-font-scale, 1));
--sc-block-gap-heading-before: calc(32px * var(--sc-font-scale, 1));
--sc-block-gap-heading-after: calc(12px * var(--sc-font-scale, 1));
--sc-block-gap-media: calc(16px * var(--sc-font-scale, 1));
--sc-block-gap-separator: calc(8px * var(--sc-font-scale, 1));
--sc-block-gap-container: calc(16px * var(--sc-font-scale, 1));
--sc-block-gap-inner: calc(6px * var(--sc-font-scale, 1));
--sc-block-padding-x: calc(20px * var(--sc-font-scale, 1));
--sc-block-padding-y: calc(16px * var(--sc-font-scale, 1));
--sc-block-menu-handle-gap: calc(5px * var(--sc-font-scale, 1));
--sc-column-gap: calc(12px * var(--sc-font-scale, 1));
}
/** 小屏 通常可做移动端适配 **/
:where([data-sc-text-size='sm']) {
--sc-content-font-size: calc(14px * var(--sc-font-scale, 1));
--sc-page-title-font-size: calc(30px * var(--sc-font-scale, 1));
--sc-heading-1-font-size: calc(24px * var(--sc-font-scale, 1));
--sc-heading-2-font-size: calc(20px * var(--sc-font-scale, 1));
--sc-heading-3-font-size: calc(18px * var(--sc-font-scale, 1));
--sc-heading-4-font-size: calc(16px * var(--sc-font-scale, 1));
--sc-heading-5-font-size: calc(14px * var(--sc-font-scale, 1));
--sc-heading-6-font-size: calc(14px * var(--sc-font-scale, 1));
--sc-heading-1-line-height: 1.4;
--sc-heading-2-line-height: 1.4;
--sc-heading-3-line-height: 1.4;
--sc-heading-4-line-height: 1.5;
--sc-heading-5-line-height: 1.5;
--sc-heading-6-line-height: 1.5;
--sc-page-title-line-height: 1.7;
--sc-content-line-height: 1.5;
--sc-code-block-font-size: calc(12px * var(--sc-font-scale, 1));
}
:where([data-sc-text-size='md']) {
--sc-content-font-size: calc(16px * var(--sc-font-scale, 1));
--sc-page-title-font-size: calc(32px * var(--sc-font-scale, 1));
--sc-heading-1-font-size: calc(26px * var(--sc-font-scale, 1));
--sc-heading-2-font-size: calc(22px * var(--sc-font-scale, 1));
--sc-heading-3-font-size: calc(18px * var(--sc-font-scale, 1));
--sc-heading-4-font-size: calc(16px * var(--sc-font-scale, 1));
--sc-heading-5-font-size: calc(16px * var(--sc-font-scale, 1));
--sc-heading-6-font-size: calc(16px * var(--sc-font-scale, 1));
--sc-heading-1-line-height: 1.4;
--sc-heading-2-line-height: 1.4;
--sc-heading-3-line-height: 1.4;
--sc-heading-4-line-height: 1.5;
--sc-heading-5-line-height: 1.5;
--sc-heading-6-line-height: 1.5;
--sc-page-title-line-height: 1.7;
--sc-content-line-height: 1.7;
--sc-code-block-font-size: calc(14px * var(--sc-font-scale, 1));
}
:where([data-sc-text-size='lg']) {
--sc-content-font-size: calc(18px * var(--sc-font-scale, 1));
--sc-page-title-font-size: calc(40px * var(--sc-font-scale, 1));
--sc-heading-1-font-size: calc(30px * var(--sc-font-scale, 1));
--sc-heading-2-font-size: calc(25px * var(--sc-font-scale, 1));
--sc-heading-3-font-size: calc(22px * var(--sc-font-scale, 1));
--sc-heading-4-font-size: calc(20px * var(--sc-font-scale, 1));
--sc-heading-5-font-size: calc(18px * var(--sc-font-scale, 1));
--sc-heading-6-font-size: calc(18px * var(--sc-font-scale, 1));
--sc-heading-1-line-height: 1.4;
--sc-heading-2-line-height: 1.4;
--sc-heading-3-line-height: 1.4;
--sc-heading-4-line-height: 1.5;
--sc-heading-5-line-height: 1.5;
--sc-heading-6-line-height: 1.5;
--sc-page-title-line-height: 1.7;
--sc-content-line-height: 1.7;
--sc-code-block-font-size: calc(16px * var(--sc-font-scale, 1));
}
[data-sc-platform-group='mobile'][data-sc-text-size='sm'] {
--sc-page-title-font-size: calc(24px * var(--sc-font-scale, 1));
--sc-heading-1-font-size: calc(20px * var(--sc-font-scale, 1));
--sc-heading-2-font-size: calc(18px * var(--sc-font-scale, 1));
--sc-page-title-line-height: 1.5;
}
[data-sc-platform-group='mobile'][data-sc-text-size='md'] {
--sc-page-title-font-size: calc(26px * var(--sc-font-scale, 1));
--sc-heading-1-font-size: calc(22px * var(--sc-font-scale, 1));
--sc-heading-2-font-size: calc(20px * var(--sc-font-scale, 1));
--sc-page-title-line-height: 1.5;
}
[data-sc-platform-group='mobile'][data-sc-text-size='lg'] {
--sc-page-title-font-size: calc(34px * var(--sc-font-scale, 1));
--sc-heading-1-font-size: calc(26px * var(--sc-font-scale, 1));
--sc-heading-2-font-size: calc(23px * var(--sc-font-scale, 1));
--sc-page-title-line-height: 1.5;
}
.sc-editor {
position: relative;
/* overlay 的 absolute 定位参照系 */
background: var(--sc-editor-bg);
color: var(--sc-text-default);
padding: var(--sc-editor-padding-top) var(--sc-editor-padding-right) var(--sc-editor-padding-bottom) var(--sc-editor-padding-left);
-webkit-font-smooth: antialiased;
/* 表格 block 可向外延伸到 .sc-editor 内容沿，但不允许溢出到页面外
* 用 overflow-x: clip 而非 hidden，避免给子元素的 sticky/transform 创建 BFC */
overflow-x: clip;
}
/* containerScroll 模式：.sc-editor 自己作为滚动宿主
* - 自身 height:100% + overflow:hidden（不滚），让内部 .sc-editor-content 滚动
* - padding 由内层 .sc-editor-content 承担，避免外圈滚动条与 padding 错位
* - .sc-editor-overlay 是 .sc-editor 直接子元素，与内层平级，不参与滚动 → 浮层贴边角 */
.sc-editor.is-container-scroll {
height: 100%;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.sc-editor.is-container-scroll > .sc-editor-content {
position: relative;
/* .sc-editor-content-overlay 的 absolute 定位参照系 */
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: clip;
/* 预留纵向滚动条槽位：内容从不满一屏变为溢出时，经典滚动条不再挤窄正文。
* overlay 滚动条（macOS 默认）不占布局，本属性无额外占位。
* 不支持 scrollbar-gutter 的浏览器忽略该声明。 */
scrollbar-gutter: stable;
padding: var(--sc-editor-padding-top) var(--sc-editor-padding-right) var(--sc-editor-padding-bottom) var(--sc-editor-padding-left);
}
/* 评论按钮（24px 宽 + 4px gap = 28px）默认渲染在 page-body.right 外侧，
* 会被本容器的 overflow-x: clip 裁剪。
* 当评论 aside 未激活时（外部业务面板 / 无面板场景），
* 强制 padding-right ≥ 32px，让 page-body 自动让出按钮位，避免裁剪。
*
* - aside 激活时（.sc-comment-aside 非空）：本规则不生效，由 aside.less 接管 padding
* - 外部仍可用 --sc-editor-padding-right 覆盖（设 ≥ 32px 时不影响；< 32px 时被 max 兜底）
* --sc-comment-button-safe-padding 可让接入方调整这个最小预留宽度。 */
.sc-editor.is-container-scroll:not([data-sc-comment-aside-open]) > .sc-editor-content {
padding-right: max(var(--sc-editor-padding-right), var(--sc-comment-button-safe-padding, 32px));
}
.sc-editor-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: visible;
/* 允许工具栏等溢出编辑器边界 */
z-index: 100;
}
/* containerScroll 模式下位于 .sc-editor-content 内部的 overlay 容器。
* position: absolute; top: 0 相对于 .sc-editor-content（position: relative）定位。
* FloatingToolbar 通过 Portal 挂入此容器，坐标 = selRect - overlayRect，
* overlayRect.top 随滚动变为负数，差值自然等于选区在内容中的绝对位置，无需 scroll 监听。 */
.sc-editor-content-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
pointer-events: none;
overflow: visible;
z-index: 100;
}
.sc-ui {
font-family: var(--sc-ui-font-family);
font-size: var(--sc-ui-font-size);
line-height: var(--sc-ui-line-height);
}
/* ── Block Flash（注意力引导高亮） ────────────────────────────── */
/* scrollToBlock({ highlight: true }) 或 highlightBlock() 触发的临时高亮。
* 由 JS 添加类名 → 1.2s 后移除，transition 自动淡出。 */
.sc-block--flash {
background-color: var(--sc-ui-active);
transition: background-color 0.4s ease;
}
:where([data-sc-theme]) [data-text-color='default'] {
color: var(--sc-text-default);
}
:where([data-sc-theme]) [data-text-color='grey'] {
color: var(--sc-text-grey);
}
:where([data-sc-theme]) [data-text-color='blue'] {
color: var(--sc-text-blue);
}
:where([data-sc-theme]) [data-text-color='sky_blue'] {
color: var(--sc-text-sky_blue);
}
:where([data-sc-theme]) [data-text-color='green'] {
color: var(--sc-text-green);
}
:where([data-sc-theme]) [data-text-color='yellow'] {
color: var(--sc-text-yellow);
}
:where([data-sc-theme]) [data-text-color='orange'] {
color: var(--sc-text-orange);
}
:where([data-sc-theme]) [data-text-color='red'] {
color: var(--sc-text-red);
}
:where([data-sc-theme]) [data-text-color='rose_red'] {
color: var(--sc-text-rose_red);
}
:where([data-sc-theme]) [data-text-color='purple'] {
color: var(--sc-text-purple);
}
:where([data-sc-theme]) [data-text-color='code'] {
color: var(--sc-text-code);
}
:where([data-sc-theme]) [data-text-color='reminder'] {
color: var(--sc-text-reminder);
}
:where([data-sc-theme]) [data-bg-color='default'] {
background-color: var(--sc-bg-default);
}
:where([data-sc-theme]) [data-bg-color='grey_background'] {
background-color: var(--sc-bg-grey_background);
}
:where([data-sc-theme]) [data-bg-color='light_grey_background'] {
background-color: var(--sc-bg-light_grey_background);
}
:where([data-sc-theme]) [data-bg-color='dark_background'] {
background-color: var(--sc-bg-dark_background);
}
:where([data-sc-theme]) [data-bg-color='light_blue_background'] {
background-color: var(--sc-bg-light_blue_background);
}
:where([data-sc-theme]) [data-bg-color='blue_background'] {
background-color: var(--sc-bg-blue_background);
}
:where([data-sc-theme]) [data-bg-color='light_sky_blue_background'] {
background-color: var(--sc-bg-light_sky_blue_background);
}
:where([data-sc-theme]) [data-bg-color='sky_blue_background'] {
background-color: var(--sc-bg-sky_blue_background);
}
:where([data-sc-theme]) [data-bg-color='light_green_background'] {
background-color: var(--sc-bg-light_green_background);
}
:where([data-sc-theme]) [data-bg-color='green_background'] {
background-color: var(--sc-bg-green_background);
}
:where([data-sc-theme]) [data-bg-color='light_yellow_background'] {
background-color: var(--sc-bg-light_yellow_background);
}
:where([data-sc-theme]) [data-bg-color='yellow_background'] {
background-color: var(--sc-bg-yellow_background);
}
:where([data-sc-theme]) [data-bg-color='light_orange_background'] {
background-color: var(--sc-bg-light_orange_background);
}
:where([data-sc-theme]) [data-bg-color='orange_background'] {
background-color: var(--sc-bg-orange_background);
}
:where([data-sc-theme]) [data-bg-color='light_red_background'] {
background-color: var(--sc-bg-light_red_background);
}
:where([data-sc-theme]) [data-bg-color='red_background'] {
background-color: var(--sc-bg-red_background);
}
:where([data-sc-theme]) [data-bg-color='light_rose_red_background'] {
background-color: var(--sc-bg-light_rose_red_background);
}
:where([data-sc-theme]) [data-bg-color='rose_red_background'] {
background-color: var(--sc-bg-rose_red_background);
}
:where([data-sc-theme]) [data-bg-color='light_purple_background'] {
background-color: var(--sc-bg-light_purple_background);
}
:where([data-sc-theme]) [data-bg-color='purple_background'] {
background-color: var(--sc-bg-purple_background);
}
:where([data-sc-theme]) [data-border-color='default'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-default);
}
:where([data-sc-theme]) [data-border-color='grey'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-grey);
}
:where([data-sc-theme]) [data-border-color='blue'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-blue);
}
:where([data-sc-theme]) [data-border-color='sky_blue'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-sky_blue);
}
:where([data-sc-theme]) [data-border-color='green'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-green);
}
:where([data-sc-theme]) [data-border-color='yellow'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-yellow);
}
:where([data-sc-theme]) [data-border-color='orange'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-orange);
}
:where([data-sc-theme]) [data-border-color='red'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-red);
}
:where([data-sc-theme]) [data-border-color='rose_red'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-rose_red);
}
:where([data-sc-theme]) [data-border-color='purple'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-purple);
}
:where([data-sc-theme]) [data-divider-color='default'] {
border-color: var(--sc-divider-default);
}
:where([data-sc-theme]) [data-divider-color='black_divider'] {
border-color: var(--sc-divider-black_divider);
}
:where([data-sc-theme]) [data-divider-color='grey_divider'] {
border-color: var(--sc-divider-grey_divider);
}
:where([data-sc-theme]) [data-divider-color='light_grey_divider'] {
border-color: var(--sc-divider-light_grey_divider);
}
:where([data-sc-theme]) [data-divider-color='blue_divider'] {
border-color: var(--sc-divider-blue_divider);
}
:where([data-sc-theme]) [data-divider-color='light_blue_divider'] {
border-color: var(--sc-divider-light_blue_divider);
}
:where([data-sc-theme]) [data-divider-color='table_blue_divider'] {
border-color: var(--sc-divider-table_blue_divider);
}
:where([data-sc-theme]) [data-divider-color='sky_blue_divider'] {
border-color: var(--sc-divider-sky_blue_divider);
}
:where([data-sc-theme]) [data-divider-color='light_sky_blue_divider'] {
border-color: var(--sc-divider-light_sky_blue_divider);
}
:where([data-sc-theme]) [data-divider-color='green_divider'] {
border-color: var(--sc-divider-green_divider);
}
:where([data-sc-theme]) [data-divider-color='light_green_divider'] {
border-color: var(--sc-divider-light_green_divider);
}
:where([data-sc-theme]) [data-divider-color='yellow_divider'] {
border-color: var(--sc-divider-yellow_divider);
}
:where([data-sc-theme]) [data-divider-color='light_yellow_divider'] {
border-color: var(--sc-divider-light_yellow_divider);
}
:where([data-sc-theme]) [data-divider-color='orange_divider'] {
border-color: var(--sc-divider-orange_divider);
}
:where([data-sc-theme]) [data-divider-color='light_orange_divider'] {
border-color: var(--sc-divider-light_orange_divider);
}
:where([data-sc-theme]) [data-divider-color='red_divider'] {
border-color: var(--sc-divider-red_divider);
}
:where([data-sc-theme]) [data-divider-color='light_red_divider'] {
border-color: var(--sc-divider-light_red_divider);
}
:where([data-sc-theme]) [data-divider-color='rose_red_divider'] {
border-color: var(--sc-divider-rose_red_divider);
}
:where([data-sc-theme]) [data-divider-color='light_rose_red_divider'] {
border-color: var(--sc-divider-light_rose_red_divider);
}
:where([data-sc-theme]) [data-divider-color='purple_divider'] {
border-color: var(--sc-divider-purple_divider);
}
:where([data-sc-theme]) [data-divider-color='light_purple_divider'] {
border-color: var(--sc-divider-light_purple_divider);
}
.sc-block-text-content {
white-space: pre-wrap;
word-break: break-word;
outline: none;
/*
* 空标题占位符：当 leaf 容器为空时，显示 data-placeholder 内容。
* - pointer-events: none 避免拦截光标点击
* - user-select: none 避免选中占位符本身
* - 颜色使用现有的弱化文本色变量，保持主题一致
*/
}
.sc-block-text-content:empty::before {
content: ' ';
}
.sc-block-text-content[data-placeholder]:empty::before {
content: attr(data-placeholder);
color: var(--sc-ui-text-muted, rgba(0, 0, 0, 0.45));
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
.sc-mark-code {
font-family: var(--sc-font-family-mono);
}
.sc-mark-link {
color: var(--sc-link-color);
-webkit-text-decoration: var(--sc-link-text-decoration);
text-decoration: var(--sc-link-text-decoration);
cursor: pointer;
padding-inline: 4px;
padding-block: max(0px, calc((1lh - 1.25em) / 2));
border-radius: 4px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.sc-mark-link:hover {
background: var(--sc-ui-active);
}
.sc-mark-link > span[style] {
text-decoration: inherit;
}
.sc-block-text,
.sc-block-header1,
.sc-block-header2,
.sc-block-header3,
.sc-block-header4,
.sc-block-header4,
.sc-block-header5 {
text-align: left;
}
.sc-block-text[data-text-align='center'],
.sc-block-header1[data-text-align='center'],
.sc-block-header2[data-text-align='center'],
.sc-block-header3[data-text-align='center'],
.sc-block-header4[data-text-align='center'],
.sc-block-header4[data-text-align='center'],
.sc-block-header5[data-text-align='center'] {
text-align: center;
}
.sc-block-text[data-text-align='right'],
.sc-block-header1[data-text-align='right'],
.sc-block-header2[data-text-align='right'],
.sc-block-header3[data-text-align='right'],
.sc-block-header4[data-text-align='right'],
.sc-block-header4[data-text-align='right'],
.sc-block-header5[data-text-align='right'] {
text-align: right;
}
.sc-inline-code {
background-color: var(--sc-inline-code-bg);
border-radius: var(--sc-inline-code-border-radius);
font-size: var(--sc-inline-code-font-size);
padding: var(--sc-inline-code-padding);
font-family: var(--sc-font-family-mono);
vertical-align: 1px;
}
/* ── Inline Token 基础排版 ──────────────────────────────────── */
/* atom 外壳（contentEditable=false 的 span）：
确保行高与所在文本行一致，选中高亮不错位。 */
.sc-inline-token--atom {
display: inline-flex;
align-items: baseline;
line-height: inherit;
vertical-align: baseline;
}
.sc-block {
position: relative;
margin-top: var(--sc-block-gap);
margin-bottom: var(--sc-block-gap);
}
.sc-block.sc-block-header1,
.sc-block.sc-block-header2,
.sc-block.sc-block-header3,
.sc-block.sc-block-header4,
.sc-block.sc-block-header5,
.sc-block.sc-block-header6 {
margin-top: var(--sc-block-gap-heading-before);
margin-bottom: var(--sc-block-gap-heading-after);
}
.sc-block.sc-block-image,
.sc-block.sc-block-equation,
.sc-block.sc-block-simple_table,
.sc-block.sc-block-column_list {
margin-top: var(--sc-block-gap-media);
margin-bottom: var(--sc-block-gap-media);
}
.sc-block.sc-block-callout,
.sc-block.sc-block-quote,
.sc-block.sc-block-code {
margin-top: var(--sc-block-gap-container);
margin-bottom: var(--sc-block-gap-container);
}
.sc-block.sc-block-divider {
margin-top: var(--sc-block-gap-separator);
margin-bottom: var(--sc-block-gap-separator);
}
.sc-block.sc-block-column {
margin-top: 0;
margin-bottom: 0;
}
.sc-page-body > .sc-block-children > .sc-block:first-child {
margin-top: 0;
}
.sc-page-body > .sc-block-children > .sc-block:last-child {
margin-bottom: 0;
}
.sc-block-callout .sc-block-children > .sc-block,
.sc-block-column .sc-block-children > .sc-block {
margin-top: var(--sc-block-gap-inner);
margin-bottom: var(--sc-block-gap-inner);
}
/* 普通 block children 缩进 */
.sc-block-children[data-layout='indented'] {
padding-left: var(--sc-block-indent);
}
.sc-block.sc-block-header1 .sc-block-content {
font-size: var(--sc-heading-1-font-size);
line-height: var(--sc-heading-1-line-height);
color: var(--sc-heading-1-color);
font-weight: var(--sc-heading-1-font-weight);
letter-spacing: var(--sc-heading-letter-spacing);
}
.sc-block.sc-block-header2 .sc-block-content {
font-size: var(--sc-heading-2-font-size);
line-height: var(--sc-heading-2-line-height);
color: var(--sc-heading-2-color);
font-weight: var(--sc-heading-2-font-weight);
letter-spacing: var(--sc-heading-letter-spacing);
}
.sc-block.sc-block-header3 .sc-block-content {
font-size: var(--sc-heading-3-font-size);
line-height: var(--sc-heading-3-line-height);
color: var(--sc-heading-3-color);
font-weight: var(--sc-heading-3-font-weight);
letter-spacing: var(--sc-heading-letter-spacing);
}
.sc-block.sc-block-header4 .sc-block-content {
font-size: var(--sc-heading-4-font-size);
line-height: var(--sc-heading-4-line-height);
color: var(--sc-heading-4-color);
font-weight: var(--sc-heading-3-font-weight);
letter-spacing: var(--sc-heading-letter-spacing);
}
.sc-block.sc-block-header5 .sc-block-content {
font-size: var(--sc-heading-5-font-size);
line-height: var(--sc-heading-5-line-height);
color: var(--sc-heading-5-color);
font-weight: var(--sc-heading-3-font-weight);
letter-spacing: var(--sc-heading-letter-spacing);
}
.sc-block.sc-block-header6 .sc-block-content {
font-size: var(--sc-heading-6-font-size);
line-height: var(--sc-heading-6-line-height);
color: var(--sc-heading-6-color);
font-weight: var(--sc-heading-3-font-weight);
letter-spacing: var(--sc-heading-letter-spacing);
}
.sc-block-callout > .sc-block-content {
display: flex;
box-sizing: border-box;
padding: var(--sc-block-padding-y) var(--sc-block-padding-x);
border-radius: var(--sc-callout-radius);
}
.sc-block-callout .sc-block-marker {
width: 28px;
min-width: 28px;
min-height: 28px;
height: calc(1lh);
margin-right: 8px;
padding: 0;
border-radius: var(--sc-callout-radius);
display: flex;
align-items: center;
justify-content: center;
}
@supports not (height: 1lh) {
.sc-block-callout .sc-block-marker {
height: calc(var(--sc-content-line-height) * 1em);
}
}
.sc-block-callout .sc-callout-icon {
width: 100%;
height: 100%;
font-size: 20px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--sc-callout-radius);
}
.sc-block-bulleted_list > .sc-block-content,
.sc-block-numbered_list > .sc-block-content,
.sc-block-to_do > .sc-block-content {
display: flex;
}
.sc-block-bulleted_list > .sc-block-content > .sc-block-text-content,
.sc-block-numbered_list > .sc-block-content > .sc-block-text-content,
.sc-block-to_do > .sc-block-content > .sc-block-text-content {
flex: 1;
min-width: 0;
}
.sc-block-bulleted_list .sc-block-marker {
display: flex;
align-items: center;
min-width: 20px;
margin-right: 4px;
flex: 0 0 auto;
height: calc(1lh);
padding-left: 2px;
}
@supports not (height: 1lh) {
.sc-block-bulleted_list .sc-block-marker {
height: calc(var(--sc-content-line-height) * 1em);
}
}
.sc-block-numbered_list .sc-block-marker {
min-width: 20px;
margin-right: 4px;
flex: 0 0 auto;
height: calc(1lh);
padding-left: 2px;
}
@supports not (height: 1lh) {
.sc-block-numbered_list .sc-block-marker {
height: calc(var(--sc-content-line-height) * 1em);
}
}
.sc-block-to_do .sc-block-marker {
width: 20px;
margin-right: 8px;
height: calc(1lh);
display: flex;
align-items: center;
padding-left: 2px;
}
@supports not (height: 1lh) {
.sc-block-to_do .sc-block-marker {
height: calc(var(--sc-content-line-height) * 1em);
}
}
.sc-list-marker {
display: block;
}
.sc-list-marker[data-kind='bulleted_list'].sc-list-marker[data-style='solid_circle'] {
width: 6px;
height: 6px;
border-radius: 6px;
background: currentcolor;
}
.sc-list-marker[data-kind='bulleted_list'].sc-list-marker[data-style='solid_square'] {
width: 5px;
height: 5px;
background: currentcolor;
}
.sc-list-marker[data-kind='bulleted_list'].sc-list-marker[data-style='hollow_circle'] {
width: 6px;
height: 6px;
border-radius: 6px;
border: 1px solid currentcolor;
box-sizing: border-box;
}
.sc-block-column_list {
margin-inline: -8px;
}
.sc-block-column_list > .sc-block-content {
position: relative;
}
.sc-block-column_list > .sc-block-content > .sc-column-list__wrap {
position: relative;
padding-bottom: 4px;
}
.sc-block-column_list > .sc-block-content > .sc-column-list__wrap > .sc-block-children {
display: flex;
gap: var(--sc-column-gap);
}
.sc-block-column_list > .sc-block-content > .sc-column-list__wrap > .sc-block-children > .sc-block-column {
flex: none;
}
@media (max-width: 640px) {
.sc-block-column_list > .sc-block-content > .sc-column-list__wrap > .sc-block-children {
flex-direction: column;
gap: 0;
}
.sc-block-column_list > .sc-block-content > .sc-column-list__wrap > .sc-block-children > .sc-block-column {
flex: unset !important;
width: auto !important;
}
.sc-block-column_list > .sc-block-content > .sc-column-list__wrap > .sc-block-children > .sc-block-column:not(:last-child) {
margin-bottom: 4px;
}
.sc-block-column_list > .sc-block-content > .sc-column-list__wrap > .sc-block-children > .sc-block-column .sc-block-image img {
display: block;
margin-left: auto;
margin-right: auto;
}
}
.sc-block-column .sc-block-text > .sc-block-content,
.sc-block-column .sc-block-header1 > .sc-block-content,
.sc-block-column .sc-block-header2 > .sc-block-content,
.sc-block-column .sc-block-header3 > .sc-block-content,
.sc-block-column .sc-block-header4 > .sc-block-content,
.sc-block-column .sc-block-header5 > .sc-block-content,
.sc-block-column .sc-block-header6 > .sc-block-content,
.sc-block-column .sc-block-numbered_list > .sc-block-content,
.sc-block-column .sc-block-bulleted_list > .sc-block-content,
.sc-block-column .sc-block-to_do > .sc-block-content {
padding: 0 4px;
}
.sc-column-list__dividers-layer {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.sc-column-list__divider-slot {
position: absolute;
top: 0;
bottom: 0;
width: 0;
pointer-events: none;
}
.sc-column-divider {
position: absolute;
top: 0;
bottom: 0;
left: -9px;
width: 18px;
pointer-events: auto;
cursor: default;
-webkit-user-select: none;
user-select: none;
display: flex;
justify-content: center;
align-items: stretch;
z-index: 1;
}
.sc-column-divider > .sc-column-divider__line {
width: 2px;
height: 100%;
background: transparent;
transition: background-color 0.1s ease;
}
.sc-column-divider.is-hover > .sc-column-divider__line {
background: color-mix(in srgb, var(--sc-ui-primary) 45%, transparent);
}
.sc-column-divider.is-dragging > .sc-column-divider__line {
background: var(--sc-ui-primary);
}
.sc-column-divider.sc-column-divider--resizable {
cursor: col-resize;
}
.sc-column-divider__add-wrap {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
transform: translate(-50%, -50%) scale(0.8);
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.12s ease, transform 0.12s ease;
}
.sc-column-divider.is-hover > .sc-column-divider__add-wrap {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
pointer-events: auto;
}
.sc-column-divider__add-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: color-mix(in srgb, var(--sc-ui-primary) 45%, transparent);
pointer-events: none;
}
.sc-column-divider__add {
position: relative;
width: 18px;
height: 18px;
border-radius: 50%;
border: none;
padding: 0;
background: var(--sc-ui-primary);
color: var(--sc-ui-text-on-primary, #fff);
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.sc-column-divider__add::before,
.sc-column-divider__add::after {
content: '';
position: absolute;
background-color: currentColor;
border-radius: 1px;
}
.sc-column-divider__add::before {
top: 50%;
left: 50%;
width: 10px;
height: 2px;
margin-left: -5px;
margin-top: -1px;
}
.sc-column-divider__add::after {
top: 50%;
left: 50%;
width: 2px;
height: 10px;
margin-left: -1px;
margin-top: -5px;
}
.sc-column-divider__add:hover {
background: var(--sc-ui-primary);
}
.sc-column-list__badges-layer {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
}
.sc-column-list__badge {
position: absolute;
top: 0;
width: 30px;
height: 16px;
border-radius: 4px;
background: var(--sc-ui-text-muted);
color: var(--sc-ui-text-on-primary, #fff);
font-size: 10px;
line-height: 11px;
text-align: center;
font-weight: 400;
white-space: nowrap;
padding: 2px 4px;
}
.sc-column-list__equal-btn {
position: absolute;
top: 0;
right: calc(-28px - var(--sc-column-gap));
width: 28px;
height: 28px;
border-radius: var(--sc-ui-radius-sm);
border: 1px solid var(--sc-ui-border, rgba(0, 0, 0, 0.08));
background: var(--sc-ui-surface, #fff);
color: var(--sc-ui-text-muted, rgba(0, 0, 0, 0.55));
padding: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 3;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.sc-column-list__equal-btn > svg {
display: block;
}
.sc-column-list__equal-btn:hover {
background: var(--sc-ui-hover);
color: var(--sc-ui-primary);
}
.sc-block-column {
position: relative;
}
.sc-block-column::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
border-radius: var(--sc-column-radius);
background: var(--sc-column-hover-bg);
pointer-events: none;
opacity: 0;
transition: opacity 0.25s ease;
}
.sc-block-column > .sc-block-content {
position: relative;
z-index: 1;
}
.sc-block-column:has(.sc-block-menu-handle) > .sc-block-content {
z-index: 3;
}
.sc-column-list__wrap:hover .sc-block-column::before,
.sc-block-column.is-selection-active::before {
opacity: 1;
}
.sc-editor.sc-column-divider-dragging {
cursor: col-resize;
-webkit-user-select: none;
user-select: none;
}
/*
* Code block: 单层 Decoration 方案。
*
* 编辑层通过 InlineDecoration 直接着色（span + inline style），
* 不再需要独立的高亮层。
*/
/* 内置代码字体不使用 local()，保证不同设备加载同一版本。 */
@font-face {
font-family: 'Source Code Pro';
src: url(../image/SourceCodePro-Regular.ttf.bf82ff7b.woff2) format('woff2');
font-style: normal;
font-weight: 400;
font-display: swap;
unicode-range: U+20-7e, U+a0-ff, U+131, U+152-153, U+2bb-2bc, U+2c6, U+2da, U+2dc, U+300-301, U+303-304, U+308-309, U+323, U+329, U+2013-2014, U+2018-201a, U+201c-201e, U+2022, U+2026, U+2032-2033, U+2039-203a, U+2044, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff;
}
@font-face {
font-family: 'Source Code Pro';
src: url(../image/SourceCodePro-It.ttf.21bfb13a.woff2) format('woff2');
font-style: italic;
font-weight: 400;
font-display: swap;
unicode-range: U+20-7e, U+a0-ff, U+131, U+152-153, U+2bb-2bc, U+2c6, U+2da, U+2dc, U+300-301, U+303-304, U+308-309, U+323, U+329, U+2013-2014, U+2018-201a, U+201c-201e, U+2022, U+2026, U+2032-2033, U+2039-203a, U+2044, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff;
}
@font-face {
font-family: 'Source Code Pro';
src: url(../image/SourceCodePro-Bold.ttf.1a6edaa3.woff2) format('woff2');
font-style: normal;
font-weight: 700;
font-display: swap;
unicode-range: U+20-7e, U+a0-ff, U+131, U+152-153, U+2bb-2bc, U+2c6, U+2da, U+2dc, U+300-301, U+303-304, U+308-309, U+323, U+329, U+2013-2014, U+2018-201a, U+201c-201e, U+2022, U+2026, U+2032-2033, U+2039-203a, U+2044, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff;
}
@font-face {
font-family: 'Source Code Pro';
src: url(../image/SourceCodePro-BoldIt.ttf.1fd3be99.woff2) format('woff2');
font-style: italic;
font-weight: 700;
font-display: swap;
unicode-range: U+20-7e, U+a0-ff, U+131, U+152-153, U+2bb-2bc, U+2c6, U+2da, U+2dc, U+300-301, U+303-304, U+308-309, U+323, U+329, U+2013-2014, U+2018-201a, U+201c-201e, U+2022, U+2026, U+2032-2033, U+2039-203a, U+2044, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff;
}
.sc-block-code .sc-code-block-content {
position: relative;
background-color: var(--sc-code-block-bg);
border: var(--sc-code-block-border);
border-radius: var(--sc-code-block-radius);
overflow-x: auto;
content-visibility: auto;
contain-intrinsic-size: auto 96px;
}
.sc-block-code .sc-code-block-pre {
position: relative;
margin: 0;
padding: var(--sc-code-block-padding-block) var(--sc-code-block-padding-inline-right) var(--sc-code-block-padding-block) var(--sc-code-block-padding-inline-left);
min-width: -webkit-fit-content;
min-width: fit-content;
font-family: var(--sc-code-block-font-family, var(--sc-font-family-mono));
font-size: var(--sc-code-block-font-size);
line-height: var(--sc-content-line-height);
}
.sc-block-code .sc-code-block-wrap .sc-code-editable {
white-space: pre-wrap;
word-break: break-all;
}
.sc-block-code .sc-code-line-numbers {
position: absolute;
top: 0;
left: 0;
width: var(--sc-code-block-padding-inline-left);
padding-top: var(--sc-code-block-padding-block);
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
.sc-block-code .sc-code-line-number {
position: absolute;
left: var(--sc-code-line-number-inset);
color: var(--sc-text-grey);
}
.sc-block-code .sc-code-editable {
display: block;
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: var(--sc-code-block-font-family, var(--sc-font-family-mono));
tab-size: 4;
white-space: pre;
word-break: normal;
overflow-wrap: normal;
position: relative;
color: var(--sc-text-default);
caret-color: var(--sc-text-default);
outline: none;
}
.sc-block-code .sc-code-editable::selection {
background: var(--sc-color-selection, rgba(35, 131, 226, 0.28));
}
/* 控制条需要溢出显示，sc-block-content 不裁剪（横向溢出由父级编辑器容器自然处理） */
.sc-block-simple_table > .sc-block-content {
overflow: visible;
}
/*
* 表格 block 在常规 --sc-block-gap-media 之外额外增加上下间距，给 col-selector / row-selector /
* + 按钮 hot zone 留出视觉缓冲，避免与相邻 block 视觉重合。
*
* 选择器与 page.less 中 `.sc-block.sc-block-simple_table` 等特异性（0,2,0），
* 且本文件 @import 顺序在 page.less 之后，确保此处覆盖生效。
* 否则会退化为基础 --sc-block-gap-media（12px），col-selector 12px 高会直接贴上一个 block。
*/
.sc-block.sc-block-simple_table {
margin-top: var(--sc-block-gap-table-before);
margin-bottom: var(--sc-block-gap-table-after);
}
.sc-block.sc-block-simple_table:has(.sc-block-content.is-structure_disabled) {
margin-top: calc(var(--sc-block-gap-media) + 12px);
}
.sc-block-simple_table table {
border-collapse: collapse;
table-layout: fixed;
border-spacing: 0;
/* 表格底色：保持不透明，避免 block 高亮（sc-block--flash）等上层装饰色
* 穿透到下层背景造成"空心"视觉。仅作用于 table 本身，不含周边控件区域。
* header cell 的 --sc-bg-grey_background 与 cell 的 data-bg-color 特异性更高，正常覆盖。 */
background-color: var(--sc-table-background);
}
.sc-block-simple_table table:focus-visible {
outline: 0;
}
/* tableType='fit'：表格至少撑满容器宽度，列按固定宽度比例分配剩余空间；
* 列总宽超出容器时保持原有宽度，由 viewport 层提供横向滚动。 */
.sc-table-wrapper.is-table-fit table {
min-width: 100%;
}
.sc-block-simple_table_row {
border: 1px solid var(--sc-border-grey);
vertical-align: top;
overflow: hidden;
word-break: break-word;
}
.sc-block-simple_table_cell {
border: 1px solid var(--sc-border-grey);
vertical-align: top;
/* table-layout:fixed 下 cell 必须 overflow:hidden 才能阻止子内容
* 的 min-width 撑开列宽。cell 内 handle 已由 TableCellHandleLayer
* 在 wrapper 层独立渲染，不再依赖 cell overflow:visible。 */
overflow: hidden;
word-break: break-word;
}
.sc-block-simple_table_cell {
padding: var(--sc-table-cell-padding);
position: relative;
}
/* 单元格选择光标由 JS 动态控制（通过 --sc-table-cursor 变量），避免空白区域误显示 */
.sc-block-simple_table_cell.is-table-header {
background-color: var(--sc-bg-grey_background, #f5f5f5);
font-weight: 500;
}
/* TODO: 标题行吸顶——当前 .sc-table-viewport 的 clip-path 会创建 containing block，
* 导致 position: sticky 参照 viewport 而非页面滚动容器，无法正常吸顶。
* 后续需用 JS（IntersectionObserver + transform）方案实现。 */
/* 左上角（同时是行标题和列标题）z-index 更高 */
.sc-block-simple_table_cell.is-row-header.is-col-header {
z-index: 3;
}
.sc-block-simple_table_cell.is-in-selection {
box-shadow: inset 0 0 0 9999px var(--sc-table-selection-bg);
}
/* 分割线 block
*
* 视觉布局：
* sc-block-content 作为「分隔区」hitzone：
* - 固定 min-height + padding-block 让分割线上下都有稳定的呼吸感
* - flex 居中，让 hr 横线垂直居中
* - cursor: pointer 提示可点击选中
*
由 React 渲染，浏览器默认样式重置后只保留 border-bottom 作为视觉线条
*/
.sc-divider-line {
display: block;
width: 100%;
margin: 0;
border: 0;
border-bottom: 1px solid var(--sc-divider-default);
transition: border-color 0.1s ease;
}
.sc-block-divider .sc-block-content {
display: flex;
align-items: center;
min-height: calc(var(--sc-divider-padding) * 2);
/* padding-block 控制分割线上下的呼吸感与点击 hitzone */
padding-block: var(--sc-divider-padding);
cursor: pointer;
}
/**
* Image block 对齐（容器级）。
*
* 消费 `BlockShell` 注入的 `data-align` 属性，把 `.sc-block-content`
* 的 flex 对齐切换为 left / center / right。
*
* Block 内部（占位、图片、caption、工具按钮等）的样式在
* `packages/editor/src/view/blocks/image/image-block.less` 中定义。
*/
.sc-block-image .sc-block-content {
display: flex;
justify-content: center;
}
.sc-block-image[data-align='center'] .sc-block-content {
justify-content: center;
}
.sc-block-image[data-align='left'] .sc-block-content {
justify-content: flex-start;
}
.sc-block-image[data-align='right'] .sc-block-content {
justify-content: flex-end;
}
.sc-block-quote > .sc-block-content {
border-left: var(--sc-quote-border-width) solid var(--sc-quote-border-color);
padding: var(--sc-quote-padding);
color: var(--sc-quote-text-color);
background: var(--sc-quote-bg);
border-radius: var(--sc-quote-border-radius);
}
.sc-block.sc-block-quote > .sc-block-content {
line-height: var(--sc-quote-line-height);
}
.sc-block-equation .sc-block-content {
display: flex;
justify-content: center;
width: 100%;
}
.sc-block .sc-block-content {
font-size: var(--sc-content-font-size);
line-height: var(--sc-content-line-height);
}
.sc-block[data-border-color]:not(.sc-block-simple_table_cell),
.sc-block[data-bg-color]:not(.sc-block-simple_table_cell) {
border-radius: var(--sc-block-radius);
}
.sc-block-children.is-trim-top > .sc-block:first-of-type {
margin-top: 0;
}
.sc-block-children.is-trim-bottom > .sc-block:last-of-type {
margin-bottom: 0;
}
.sc-block.is-trim-top {
margin-top: 0;
}
.sc-block.is-trim-bottom {
margin-bottom: 0;
}
/* Root CE 编辑模式：纯文本输入，阻止浏览器在编辑时添加行内样式 */
.sc-root-editable[contenteditable='true'] {
-webkit-user-modify: read-write-plaintext-only;
outline: none;
}
/* InlineEditor 移动端：恢复原生文字选择能力
- read-write-plaintext-only 会抑制 iOS Safari 长按选词 callout（放大镜+选区把手），
主编辑器通过 MobileFloatingToolbar 补偿；InlineEditor 无此浮层，
在触摸设备上完全移除 -webkit-user-modify，让 iOS 原生 contenteditable
选区系统正常工作（长按"选择"扩展选区、把手拖拽等）。
- read-write 仍不完全等价于原生 contenteditable，iOS Safari 的 callout 系统
对 -webkit-user-modify 元素的选区扩展行为有差异，必须 unset 才能彻底恢复。 */
@media (pointer: coarse) {
[data-sc-inline-editor] .sc-root-editable[contenteditable='true'] {
-webkit-user-modify: unset;
}
}
/* 选区高亮：只在 Leaf CE 内的文本上显示 */
.sc-root-editable ::selection {
background: var(--sc-color-selection);
}
/* InlineEditor 选区高亮：
InlineEditor 可能独立于 EditorRoot 使用（无 data-sc-theme 祖先），
--sc-color-selection 未定义时 ::selection 背景为空（不可见）。
此处补 fallback，确保任何使用场景下选区都有视觉反馈。 */
[data-sc-inline-editor] ::selection {
background: var(--sc-color-selection, rgba(35, 131, 226, 0.28));
}
/* 非文本层选区透明化，避免间隙高亮 */
.sc-root-editable::selection,
.sc-page::selection,
.sc-page-body::selection,
.sc-page-header::selection,
.sc-block::selection,
.sc-block-children::selection,
.sc-block-content::selection {
background: transparent;
}
/* ── Embed block 选区端点行为 ──────────────────────────────────
* embed block（divider / image / equation / page，含外部 plugin 声明
* `category: 'embed'` 的 block）允许浏览器原生 DOM Range 端点落在内部 ——
* 这是为了让 mouseup 在 embed 上时 focus 能稳定停留，由 onSelect 链路的
* clampSelectionAcrossEmbed 把 focus 钳到 (embedId, 0)，再由
* cross-block-highlight 加 `.is-selected` 蒙层渲染整块覆盖。
*
* 视觉副作用控制：
* ::selection 在通用规则（上方 .sc-block-content::selection 等）已透明，
* embed 内部即便落入 DOM Range 端点也不会出现碎片高亮，蒙层接管整块视觉。
*
* 历史决策：曾尝试 `user-select: none` 让浏览器自动跳过 embed（Phase 1，
* Notion 同款）。但实测发现当 embed 在文档/容器末尾时，浏览器 mouseup 把 focus
* 退回到 embed 之前的最近文本节点末尾，editor.selection 的 focus.blockId
* 永远不会指向 embed 自身，跨块蒙层判定也失效。改为 P-B 方案：
* 不再阻止浏览器选区进入 embed，而由 JS 在 onSelect 链路主动钳位端点到
* embed 边界（focus.offset = 0）。
*
* 选择器维护：依赖 BlockShell 投射的 `data-block-category="embed"` 属性
* （来源：BlockSpec.category === 'embed'），声明式扩展，外部 plugin 自动享用。
*/
/* 非编辑区域隔离：marker / icon 不可选中，不可进入光标 */
.sc-block-marker {
-webkit-user-select: none;
user-select: none;
}
/* ── 矩形框选（rect-selection）──────────────────────────────── */
/* 蓝色半透明框选矩形：挂在 .sc-editor-overlay 内，与 editor 内容同一滚动坐标系 */
.sc-rect-selection-overlay {
background: var(--sc-color-selection, rgba(35, 131, 226, 0.18));
border: 1px solid rgba(35, 131, 226, 0.5);
border-radius: 2px;
/* pointer-events 已在内联样式中 none，这里不重复 */
}
/* 被框选命中的 block：整体高亮（叠加现有背景之上） */
.sc-block.is-selected {
/* ::after 用 inset:0 + absolute，需要一个定位上下文；
sc-block 本身不一定是 positioned，这里显式声明 */
position: relative;
/* 选中态高亮：::after 伪元素铺满整块，水平方向略外扩以避免紧贴文字 */
}
.sc-block.is-selected::after {
content: '';
position: absolute;
inset: 0 -4px;
background: var(--sc-color-selection, rgba(35, 131, 226, 0.18));
border-radius: 4px;
pointer-events: none;
/* 覆盖表格 cell 等带 z-index 的后代 */
z-index: 10;
}
/* 容器型 block（callout / quote / code 等）：蒙层不外扩，贴合容器自身边界 */
.sc-block-callout.is-selected::after,
.sc-block-quote.is-selected::after,
.sc-block-code.is-selected::after {
inset: 0;
}
/* ── 嵌套选中态压制 ──
* 当一个 selected block 嵌套在另一个 selected block 内（典型场景：list 整棵子树
* Cmd+A 选中），由外层 ::after 蒙层统一覆盖子树即可，内层不再独立渲染蒙层 / 描边，
* 避免半透明蓝色互相叠加产生越来越深的颜色。 */
.sc-block.is-selected .sc-block.is-selected {
/* image 用 outline 描边；嵌套时一并去掉 */
/* 表格用 table::after 蒙层；嵌套时一并去掉 */
}
.sc-block.is-selected .sc-block.is-selected::after {
content: none;
}
.sc-block.is-selected .sc-block.is-selected .sc-image-media {
outline: none;
}
.sc-block.is-selected .sc-block.is-selected table::after {
content: none;
}
/* 代码块选中态：整块蒙层覆盖时，抑制内部编辑层的 ::selection 碎片高亮。
代码块的编辑层文字本身是 color:transparent（靠高亮层着色），
但 ::selection 背景色仍可见，需要在整块选中时压掉。
用 .sc-root-editable 前缀确保优先级高于通用 ::selection 规则。 */
.sc-root-editable .sc-block-code.is-selected .sc-code-editable::selection,
.sc-root-editable .sc-block-code.is-selected .sc-code-editable ::selection {
background: transparent;
}
/* 表格选中态：整块蒙层覆盖（focus 钳到 (tableId, 0) 或 anchor 反向同理）时，
抑制 cell 内 paragraph 的 ::selection 文字片段高亮，避免内部蓝色文字与
外层蒙层视觉割裂。仅在 simple_table.is-selected 整块覆盖时压制；
表格内 cell-range（TableCellRangeSelection）走独立高亮通道，不受影响。 */
.sc-root-editable .sc-block-simple_table.is-selected .sc-block-text-content::selection,
.sc-root-editable .sc-block-simple_table.is-selected .sc-block-text-content ::selection {
background: transparent;
}
/* 分割线 block：保留默认 .sc-block.is-selected::after 浅蓝填充蒙层。
分割线自身 hitzone 已经增加到 32px，蒙层铺满后视觉效果接近 Notion / Lark 的整块高亮。
hr 自身保持灰色细线，不需要额外加粗。 */
/* 图片等媒体型 block：铺色遮罩会压住图像本身，改为紧贴图片的细描边。
- 不覆盖 block 整个行宽（含对齐留白 / caption），只框住图片本身；
- 描边紧贴图片外沿，视觉上轻量不喧宾夺主。 */
.sc-block-image.is-selected {
/* 关闭默认的 block 级 ::after 遮罩，交给 .sc-image-media 自己画边 */
}
.sc-block-image.is-selected::after {
content: none;
}
.sc-block-image.is-selected .sc-image-media,
.sc-block-image.is-selected .sc-image-placeholder {
outline: var(--sc-embed-selected-outline);
outline-offset: var(--sc-embed-selected-outline-offset);
}
.sc-block-image.is-selected .sc-image-media img,
.sc-block-image.is-selected .sc-image-placeholder img {
cursor: zoom-in;
}
/* 表格 block：选区贴合 table 元素实际尺寸，不受 block shell 宽度和 viewport clip-path 影响 */
.sc-block-simple_table.is-selected::after {
content: none;
}
.sc-block-simple_table.is-selected table {
position: relative;
}
.sc-block-simple_table.is-selected table::after {
content: '';
position: absolute;
inset: 0;
background: var(--sc-color-selection, rgba(35, 131, 226, 0.18));
border-radius: 4px;
pointer-events: none;
z-index: 10;
}
/* Block 拖拽样式 */
.sc-drag-overlay {
position: fixed;
inset: 0;
z-index: 9999;
cursor: -webkit-grabbing;
cursor: grabbing;
}
.sc-drag-preview {
position: fixed;
pointer-events: none;
border-radius: 6px;
overflow: hidden;
z-index: 10000;
/* 超长 block（长列表 / 大段文字 / 代码块）裁剪到视口内，避免遮挡下方 drop 区域 */
max-height: min(60vh, 420px);
/* 磨砂质感：半透明背景 + 背后模糊 */
background: color-mix(in srgb, var(--sc-ui-surface, #fff) 72%, transparent);
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
/* 立体阴影 + 细边 */
box-shadow: var(--sc-ui-surface-shadow-1, 0 8px 24px rgba(0, 0, 0, 0.08));
border: 1px solid var(--sc-ui-surface-border, rgba(0, 0, 0, 0.08));
/* 内边距让内容离容器边缘更舒服 */
padding: 4px 8px;
/* 轻微缩放，强化"被拎起"的感觉 */
transform: scale(0.98);
transform-origin: top left;
/* 清除 clone 带来的行间距 margin */
/* 内容被截断时底部渐隐，暗示下方还有更多 */
}
.sc-drag-preview .sc-block {
margin: 0;
}
.sc-drag-preview::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 32px;
pointer-events: none;
background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--sc-ui-surface, #fff) 85%, transparent));
}
.sc-drop-indicator {
pointer-events: none;
z-index: 9998;
background: var(--sc-ui-primary);
border-radius: 1px;
/* 位置在不同 block 之间切换时仅对 transform 做过渡。
width/height 改用突变，避免在 before/after(2px 高)
与 left/right(2px 宽)之间切换时，过渡帧把 2px 的线
临时放大成一块蓝色矩形。 */
transition: transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
will-change: transform;
}
/* onto: 沿目标 block 轮廓显示虚框，区别于边缘指示线。
独立类名，不复用 .sc-drop-indicator 的蓝色 background / transition，
避免被误渲染成实心蓝色矩形。 */
.sc-drop-indicator--onto {
pointer-events: none;
z-index: 9998;
background: transparent;
border-radius: 6px;
outline: 2px solid var(--sc-ui-primary);
outline-offset: -1px;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--sc-ui-primary) 15%, transparent);
will-change: transform, width, height;
}
/* hint: 同一 host 上除胜出方向外的其它可用方向，淡色占位线，
提醒用户该 block 支持哪些方向。不做过渡，避免跟随 active 动画闪烁。 */
.sc-drop-indicator--hint {
background: color-mix(in srgb, var(--sc-ui-primary) 28%, transparent);
transition: none;
}
/* onto 的 hint 形态：只保留淡色外框，不要实心光晕，避免与 active onto 抢视觉焦点。 */
.sc-drop-indicator--hint-onto {
outline: 1px dashed color-mix(in srgb, var(--sc-ui-primary) 45%, transparent);
box-shadow: none;
}
/* block 正在被拖拽时原地显示为半透明影子 */
.sc-block.is-dragging {
opacity: 0.25;
pointer-events: none;
}
/* 多选拖拽角标：贴在 preview 右上角外沿，显示被拖 block 数量 */
.sc-drag-preview-badge {
position: fixed;
z-index: 10001;
pointer-events: none;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 10px;
background: var(--sc-ui-primary, #2f54eb);
color: #fff;
font-size: 12px;
font-weight: 600;
line-height: 20px;
text-align: center;
/* 用 translate 把 badge 中心对齐到 preview 右上顶点外侧 */
transform: translate(-50%, -50%);
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
}
/* 拖拽期间全局锁定光标与禁用文本选择，避免经过不同元素时光标样式闪烁 */
body.sc-body-dragging,
body.sc-body-dragging * {
cursor: -webkit-grabbing !important;
cursor: grabbing !important;
-webkit-user-select: none !important;
user-select: none !important;
}
/**
* Block Decoration 基础样式
*
* .is-block-decorated — 给有 decoration 的 block 加 position: relative
* .sc-block-decoration-slot — decoration 容器
* - 绝对定位覆盖整个 block
* - pointer-events: none，不阻挡编辑交互
* - z-index 高于内容但低于菜单
*
* .sc-block-decoration-entry — 单个 decoration 渲染项
*/
.sc-block.is-block-decorated {
position: relative;
}
.sc-block-decoration-slot {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
.sc-block-decoration-entry {
position: absolute;
inset: 0;
pointer-events: none;
}
/**
* Error fallback 样式
*
* 5 个默认 fallback 共用的样式（实现见 view/error/default-fallbacks.tsx）：
* - .sc-block-error-fallback block 渲染异常（dev 完整诊断 / prod 删除按钮）
* - .sc-page-section-error-fallback page 分区异常（极简一行）
* - .sc-editor-error-fallback 编辑器顶层异常（卡片）
* - .sc-unknown-block-fallback 未注册 spec
* - .sc-stale-block-fallback React 17 stale 窗口（仅 dev 渲染）
*
* 设计语言：用 `--sc-ui-danger` 衍生表达"异常"——红边框 + 浅红衬底，统一于 danger
* 语义。block fallback 与 editor fallback 共用同一套异常视觉，只是密度不同。
*
* 暗色模式适配：所有颜色走 `--sc-ui-*` token，无幻影 token，无硬编码色值。
*
* 按钮：fallback 内按钮默认走 `.sc-btn .sc-btn--outline .sc-btn--sm`，hover/active
* 状态由 button.less 提供。「删除该块」叠加 `.sc-btn--danger` 让边框 / hover 走红色。
*/
/* ── 共享 mixin：异常容器边框 + 衬底 ─────────────────────────────────── */
/* ── Block 渲染异常 fallback ────────────────────────────────────────── */
.sc-block-error-fallback {
border: 1px solid var(--sc-ui-danger);
/* 浅红底：用 color-mix 把 danger 与 surface 调出 8% 浓度，dark 模式下 surface 已变暗，
混合结果自动跟随。color-mix 在 Chrome 111+ / Safari 16.2+ 支持，覆盖目标用户。 */
background: color-mix(in srgb, var(--sc-ui-danger) 8%, var(--sc-ui-surface));
color: var(--sc-ui-text);
border-radius: var(--sc-ui-radius-md);
padding: 12px;
margin: 4px 0;
}
.sc-block-error-fallback__title {
font-weight: 600;
margin-bottom: 4px;
color: var(--sc-ui-danger);
}
.sc-block-error-fallback__meta {
font-size: 12px;
color: var(--sc-ui-text-muted);
margin-bottom: 8px;
/* dev 视图下展示 type / id，monospace 让 id 视觉对齐 */
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.sc-block-error-fallback__actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.sc-block-error-fallback__details {
margin-top: 8px;
font-size: 12px;
}
.sc-block-error-fallback__details > summary {
cursor: pointer;
color: var(--sc-ui-text-muted);
-webkit-user-select: none;
user-select: none;
}
.sc-block-error-fallback__details > summary:hover {
color: var(--sc-ui-text);
}
.sc-block-error-fallback__details > pre {
white-space: pre-wrap;
word-break: break-word;
background: var(--sc-ui-bg-subtle);
padding: 8px;
border-radius: var(--sc-ui-radius-sm);
margin-top: 4px;
max-height: 200px;
overflow: auto;
font-size: 11px;
color: var(--sc-ui-text);
}
/* ── Page 分区 fallback（极简一行） ─────────────────────────────────── */
.sc-page-section-error-fallback {
border: 1px solid var(--sc-ui-danger);
/* 浅红底：用 color-mix 把 danger 与 surface 调出 8% 浓度，dark 模式下 surface 已变暗，
混合结果自动跟随。color-mix 在 Chrome 111+ / Safari 16.2+ 支持，覆盖目标用户。 */
background: color-mix(in srgb, var(--sc-ui-danger) 8%, var(--sc-ui-surface));
color: var(--sc-ui-text);
border-radius: var(--sc-ui-radius-md);
padding: 8px 12px;
margin: 4px 0;
font-size: 13px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
color: var(--sc-ui-text-muted);
}
.sc-page-section-error-fallback__details {
width: 100%;
margin-top: 4px;
font-size: 11px;
}
.sc-page-section-error-fallback__details > summary {
cursor: pointer;
color: var(--sc-ui-text-muted);
-webkit-user-select: none;
user-select: none;
}
.sc-page-section-error-fallback__details > pre {
white-space: pre-wrap;
word-break: break-word;
margin: 4px 0;
color: var(--sc-ui-text);
}
/* ── 编辑器顶层异常 fallback（卡片） ────────────────────────────────── */
.sc-editor-error-fallback {
border: 1px solid var(--sc-ui-danger);
/* 浅红底：用 color-mix 把 danger 与 surface 调出 8% 浓度，dark 模式下 surface 已变暗，
混合结果自动跟随。color-mix 在 Chrome 111+ / Safari 16.2+ 支持，覆盖目标用户。 */
background: color-mix(in srgb, var(--sc-ui-danger) 8%, var(--sc-ui-surface));
color: var(--sc-ui-text);
border-radius: var(--sc-ui-radius-md);
width: 100%;
padding: 32px;
margin: 32px auto;
max-width: 640px;
text-align: center;
}
.sc-editor-error-fallback__title {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
color: var(--sc-ui-danger);
}
.sc-editor-error-fallback__message {
margin-bottom: 16px;
color: var(--sc-ui-text-muted);
/* dev 视图直接显示 error.message，可能很长；做基本换行 */
word-break: break-word;
}
.sc-editor-error-fallback__actions {
display: inline-flex;
gap: 8px;
margin-bottom: 16px;
}
.sc-editor-error-fallback__details {
margin-top: 16px;
font-size: 12px;
text-align: left;
}
.sc-editor-error-fallback__details > summary {
cursor: pointer;
color: var(--sc-ui-text-muted);
-webkit-user-select: none;
user-select: none;
}
.sc-editor-error-fallback__details > summary:hover {
color: var(--sc-ui-text);
}
.sc-editor-error-fallback__details > pre {
white-space: pre-wrap;
word-break: break-word;
background: var(--sc-ui-bg-subtle);
padding: 8px;
border-radius: var(--sc-ui-radius-sm);
margin-top: 4px;
max-height: 240px;
overflow: auto;
font-size: 11px;
color: var(--sc-ui-text);
}
/* ── Unknown / Stale block 占位 ─────────────────────────────────────── */
.sc-unknown-block-fallback,
.sc-stale-block-fallback {
padding: 6px 12px;
margin: 4px 0;
font-size: 13px;
color: var(--sc-ui-text-muted);
background: var(--sc-ui-bg-subtle);
border-radius: var(--sc-ui-radius-sm);
}
/* ── Danger 按钮 modifier ──────────────────────────────────────────────
* 「删除该块」需要红色强调以提示破坏性。在 sc-btn--outline 基础上叠加，
* 边框、文字、hover 衬底都换 danger 色。这里没把 modifier 放进 ui/button.less
* 是因为 danger 按钮目前只有 fallback 在用，避免污染 button 通用 API。
*/
.sc-btn--danger.sc-btn--outline {
border-color: var(--sc-ui-danger);
color: var(--sc-ui-danger);
}
.sc-btn--danger.sc-btn--outline:hover:not(:disabled) {
background: color-mix(in srgb, var(--sc-ui-danger) 12%, transparent);
color: var(--sc-ui-danger);
}
.sc-btn--danger.sc-btn--outline:active:not(:disabled) {
background: color-mix(in srgb, var(--sc-ui-danger) 18%, transparent);
}
/* Block Menu */
/* Block Menu 样式 */
/*
* 通用组件样式（Button, DropdownMenu, Popover）已移到 packages/ui。
* 这里只保留 block-menu 特有的定位和布局样式。
*/
/* ── Handle（菜单把手） ── */
.sc-block-menu-handle {
position: absolute;
left: 0;
top: 0;
transform: translateX(-100%);
/** 占位元素，用于撑开空间 避免鼠标从block移动到handle过程中因移出元素导致菜单关闭 */
/* 空行模式只渲染单个 + 按钮，正方形白底容器 */
/* 无类型 icon（仅 grip）时收窄偏移，让拖拽把手贴近 block */
z-index: 10;
display: flex;
flex-direction: row;
align-items: center;
-webkit-user-select: none;
user-select: none;
opacity: 0;
animation: sc-handle-fade-in 0.12s ease forwards;
/*
* 与 .sc-block-content 第一行文字垂直居中对齐。
* font-size 和 line-height 从同级 .sc-block-content 继承同源 CSS 变量，
* 使得 handle 高度 = 一行内容的高度，按钮在其中垂直居中。
*/
font-size: var(--sc-content-font-size);
line-height: var(--sc-content-line-height);
height: calc(var(--sc-content-line-height) * 1em);
}
.sc-block-menu-handle::after {
content: '';
width: var(--sc-block-menu-handle-gap);
height: calc(var(--sc-content-line-height) * 1em);
}
.sc-block-menu-handle--empty {
/* 偏移 -12px：容器宽 28px，向左拉出使其视觉居中于 block 左边缘 */
left: -12px;
width: 28px;
height: 28px;
max-height: 28px;
justify-content: center;
align-self: center;
padding: 0;
background: var(--sc-menu-surface);
border: var(--sc-menu-border-width) solid var(--sc-menu-border-color);
border-radius: var(--sc-menu-radius);
box-shadow: var(--sc-menu-shadow);
/* picker 打开时隐藏白底容器 */
/* 去掉占位伪元素 */
/* 内部按钮：撑满容器、居中图标、去掉 hover/active 效果。
* :not(:disabled) 把特异性抬到 0-4-0：原先与 ui 包 .sc-btn--ghost:hover:not(:disabled)
* (0-3-0) 打平、取决于样式加载顺序，ghost 的 hover 灰底(var(--sc-ui-hover))
* 会在 ui 样式后加载时穿透本白底容器 */
}
.sc-block-menu-handle--empty.is-picker-open {
background: transparent;
border-color: transparent;
box-shadow: none;
}
.sc-block-menu-handle--empty::after {
display: none;
}
.sc-block-menu-handle--empty .sc-btn,
.sc-block-menu-handle--empty .sc-icon-btn {
width: 100%;
height: 100%;
min-width: unset;
padding: 0;
background: transparent;
border-radius: 0;
}
.sc-block-menu-handle--empty .sc-btn:hover:not(:disabled),
.sc-block-menu-handle--empty .sc-icon-btn:hover:not(:disabled),
.sc-block-menu-handle--empty .sc-btn:active:not(:disabled),
.sc-block-menu-handle--empty .sc-icon-btn:active:not(:disabled) {
background: transparent;
box-shadow: none;
}
.sc-block-menu-handle:not(:has(.sc-block-menu-type-indicator)):not(.sc-block-menu-handle--empty) {
left: -36px;
}
/* 类型图标 + 拖拽把手 横向排列 */
.sc-block-menu-handle-row {
position: relative;
display: flex;
align-items: center;
gap: 4px;
}
/* 胶囊容器：将类型图标和拖拽把手合并在一个圆角容器里。
* 整体作为一个交互单元（button）：onPointerDown 绑在 capsule 上,
* hover 视觉作用在整个 capsule(背景色变化),而不是各个子图标分别高亮。
*/
.sc-block-menu-handle-capsule {
/* button reset */
-webkit-appearance: none;
appearance: none;
margin: 0;
font: inherit;
color: inherit;
display: inline-flex;
align-items: center;
gap: 0;
background: var(--sc-menu-surface);
border: var(--sc-menu-border-width) solid var(--sc-menu-border-color);
border-radius: var(--sc-menu-radius);
box-shadow: var(--sc-menu-shadow);
overflow: hidden;
padding: var(--sc-menu-padding-y) var(--sc-menu-padding-x);
cursor: -webkit-grab;
cursor: grab;
-webkit-user-select: none;
user-select: none;
transition: background 0.15s ease, color 0.15s ease;
}
@media (hover: hover) {
.sc-block-menu-handle-capsule:hover {
/*
* 不直接用 --sc-menu-hover-bg（4% 透明黑/白）：
* capsule 默认是 --sc-menu-surface 白底，hover 切到 4% 透明时，胶囊下方
* 的文档内容（特别是表格列选择条上的列头）会直接穿透显示。
* dark 模式同理自动跟随 surface / text 的暗色值。
*/
background: color-mix(in srgb, var(--sc-menu-surface) 96%, var(--sc-ui-text));
}
}
.sc-block-menu-handle-capsule:active {
cursor: -webkit-grabbing;
cursor: grabbing;
background: var(--sc-menu-active-bg);
}
.sc-block-menu-handle-capsule:focus-visible {
outline: 2px solid var(--sc-menu-icon-color-active);
outline-offset: 1px;
}
/* 类型指示器:装饰性 icon,不响应单独 hover。颜色统一到 --sc-ui-text-tertiary（原为主题蓝）。 */
.sc-block-menu-type-indicator {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: var(--sc-ui-text-tertiary, rgba(0, 0, 0, 0.5));
flex-shrink: 0;
pointer-events: none;
}
.sc-block-menu-type-indicator > svg {
width: var(--sc-menu-icon-size);
height: var(--sc-menu-icon-size);
}
/* 拖拽把手 grip:装饰性 icon,不响应单独 hover */
.sc-block-menu-handle-grip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: var(--sc-ui-text-tertiary, rgba(0, 0, 0, 0.5));
flex-shrink: 0;
pointer-events: none;
}
.sc-block-menu-handle-grip > svg {
width: var(--sc-menu-icon-size);
height: var(--sc-menu-icon-size);
}
@keyframes sc-handle-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 表格 block 自身的 handle：上移到列选择条区域，右边缘紧贴可见内容区左边 */
.sc-block-simple_table:has(.sc-block-content.is-structure_disabled) > .sc-block-menu-handle {
top: 4px;
}
.sc-block-simple_table > .sc-block-menu-handle {
top: -25px;
left: calc(-1 * var(--sc-table-handle-offset, 0px));
z-index: 20;
pointer-events: none;
}
.sc-block-simple_table > .sc-block-menu-handle .sc-block-menu-handle-capsule,
.sc-block-simple_table > .sc-block-menu-handle .sc-block-menu-edge {
pointer-events: auto;
}
.sc-block-simple_table > .sc-block-menu-handle::after {
width: 14px;
}
/* portal slot 内的 handle（cell 子 block）：整体事件穿透，不遮挡 row-selector 点击。
仅 capsule / edge 恢复事件响应保证可交互。
hover 保持由 row-selector 的 mouseenter → cancelHide 机制保证。 */
.sc-block-menu-handle-portal-slot .sc-block-menu-handle {
pointer-events: none;
}
.sc-block-menu-handle-portal-slot .sc-block-menu-handle .sc-block-menu-handle-capsule,
.sc-block-menu-handle-portal-slot .sc-block-menu-handle .sc-block-menu-edge {
pointer-events: auto;
}
/* heading 类型下 handle 高度跟随 heading 的 line-height 和 font-size */
.sc-block-header1 > .sc-block-menu-handle {
font-size: var(--sc-heading-1-font-size);
line-height: var(--sc-heading-1-line-height);
height: calc(var(--sc-heading-1-line-height) * 1em);
}
.sc-block-header2 > .sc-block-menu-handle {
font-size: var(--sc-heading-2-font-size);
line-height: var(--sc-heading-2-line-height);
height: calc(var(--sc-heading-2-line-height) * 1em);
}
.sc-block-header3 > .sc-block-menu-handle {
font-size: var(--sc-heading-3-font-size);
line-height: var(--sc-heading-3-line-height);
height: calc(var(--sc-heading-3-line-height) * 1em);
}
.sc-block-header4 > .sc-block-menu-handle,
.sc-block-header5 > .sc-block-menu-handle,
.sc-block-header6 > .sc-block-menu-handle {
font-size: var(--sc-heading-4-font-size);
line-height: var(--sc-heading-4-line-height);
height: calc(var(--sc-heading-4-line-height) * 1em);
}
/*
* 以 handle 容器为基准（handle 是 position: absolute），
* 宽度撑满 handle，上/下紧贴 row（row 居中，上下各留一定间距）。
*/
.sc-block-menu-edge {
position: absolute;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
height: 18px;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
border-radius: 4px;
color: transparent;
transition: background 0.15s ease, color 0.15s ease;
/* row 居中：top 50% - row高/2 - gap - edge高 = 50% - 14 - 2 - 18 */
}
.sc-block-menu-edge.is-top {
bottom: calc(50% + 14px + 2px);
}
.sc-block-menu-edge.is-bottom {
top: calc(50% + 14px + 2px);
}
.sc-block-menu-edge.is-active {
background: var(--sc-menu-hover-bg);
color: var(--sc-menu-icon-color);
}
@media (hover: hover) {
.sc-block-menu-edge:hover {
background: var(--sc-menu-active-bg);
}
}
/* ── BlockMenuPopupContent 专属区块 ── */
/*
* block menu 的 DropdownMenu.Content 需要尽量完整展示内容，同时在视口不足时
* 允许滚动查看全部项。
*
* 通用 .sc-dropdown-content 默认 max-height: 400px，会限制菜单高度；
* 这里放宽到 var(--radix-dropdown-menu-content-available-height)，让
* Radix 根据碰撞检测下发的可用高度来决定最大高度，从而把视口空间用满；
* overflow-y 保持 auto，超出后可滚动。
*
* 同时拉宽 min-width 让菜单内容更舒展。
*/
.sc-block-menu-content.sc-dropdown-content {
width: -webkit-fit-content;
width: fit-content;
min-width: 176px;
max-height: var(--radix-dropdown-menu-content-available-height, 560px);
overflow-y: auto;
padding: 12px 8px;
/* 覆盖 .sc-dropdown-content 基类的 8px（对齐 ardot 菜单面板圆角，
* 与 toc 悬浮目录面板一致）；复合选择器特异性 0-2-0，同时命中
* block 菜单 Content 与二级菜单 SubContent（均带 sc-block-menu-content 类） */
border-radius: var(--sc-menu-panel-radius);
/* 菜单底色接入 --sc-menu-surface token（划词工具栏系已消费），
* 覆盖基类 --sc-ui-surface，使菜单系浮层底色可一处统一覆盖 */
background: var(--sc-menu-surface, var(--sc-ui-surface));
/* 阴影三件套：接入 --sc-menu-shadow（设计稿 wb/shadow/Popup-Medium），
* 覆盖基类 --sc-ui-surface-shadow-1/2 重阴影 */
box-shadow: var(--sc-menu-shadow);
}
/* 顶部类型快捷切换网格（样式对齐 CommandGrid：5 列、无边框、hover 背景） */
.sc-block-menu-type-grid {
display: grid;
grid-template-columns: repeat(5, 24px);
gap: 8px;
padding: 0 0 8px;
justify-content: start;
border-bottom: 1px solid var(--sc-ui-separator);
margin-bottom: 8px;
}
.sc-block-menu-type-grid-item {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: none;
background: transparent;
border-radius: var(--sc-ui-radius-sm, 4px);
color: var(--sc-cmd-text-muted, var(--sc-menu-icon-color));
cursor: pointer;
transition: background 0.1s ease;
}
.sc-block-menu-type-grid-item > svg {
width: var(--sc-menu-icon-size);
height: var(--sc-menu-icon-size);
}
@media (hover: hover) {
.sc-block-menu-type-grid-item:hover {
background: var(--sc-cmd-hover, var(--sc-menu-hover-bg));
}
}
.sc-block-menu-type-grid-item.is-active {
background: var(--sc-cmd-active, var(--sc-menu-active-bg));
color: var(--sc-cmd-primary, var(--sc-menu-icon-color-active));
}
/* 颜色子菜单：分组小标题（非 Radix Label，禁止聚焦） */
.sc-block-menu-section-label {
padding: 8px 10px 4px;
font-size: var(--sc-menu-font-size-sm);
line-height: 16px;
color: var(--sc-menu-text-color-muted);
font-weight: 500;
pointer-events: none;
}
/* Block menu 静态展示项（disabled）： 置灰、不响应交互 */
.sc-block-menu-content .sc-dropdown-item[data-disabled] {
cursor: not-allowed;
opacity: 0.4;
}
.sc-block-menu-content .sc-dropdown-item[data-disabled]:hover,
.sc-block-menu-content .sc-dropdown-item[data-disabled][data-selected='true'],
.sc-block-menu-content .sc-dropdown-item[data-disabled][data-highlighted] {
background: transparent;
}
/* 颜色子菜单：色块预览 */
.sc-block-menu-color-swatch {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 3px;
border: 1px solid var(--sc-ui-border, rgba(0, 0, 0, 0.08));
font-size: 12px;
line-height: 1;
font-weight: 600;
}
/* 字体色：白底 + 字母 A 显示为目标色 */
.sc-block-menu-color-swatch--font {
background: var(--sc-ui-surface, #ffffff);
}
/* ── 变量桥 mixin ── */
/* --sc-cmd-* 变量桥（--sc-ui-* 别名）。palette 与 portal 到 body 的浮层需各自调用：
portal 元素非 DOM 后代，继承不到 palette 上的变量定义 */
/* ── 组件级 CSS 变量 ── */
.sc-command-palette {
--sc-cmd-surface: var(--sc-menu-surface, var(--sc-ui-surface, #ffffff));
--sc-cmd-border: var(--sc-ui-surface-border, rgba(0, 0, 0, 0.08));
--sc-cmd-shadow: var(--sc-menu-shadow, var(--sc-ui-surface-shadow-1, 0 8px 24px rgba(0, 0, 0, 0.08)));
--sc-cmd-text: var(--sc-ui-text, #1f1f1f);
--sc-cmd-text-muted: var(--sc-ui-text-muted, rgba(0, 0, 0, 0.45));
--sc-cmd-hover: var(--sc-ui-hover, rgba(0, 0, 0, 0.04));
--sc-cmd-active: var(--sc-ui-active, rgba(0, 0, 0, 0.08));
--sc-cmd-primary: var(--sc-ui-primary, #2972f4);
--sc-cmd-separator: var(--sc-ui-separator, rgba(0, 0, 0, 0.06));
/* icon 颜色独立可控（默认主文字色，区别于次级文字 --sc-cmd-text-muted） */
--sc-cmd-icon: var(--sc-ui-text, #1f1f1f);
/* 宽度由顶部 icon 网格决定；无网格（搜索态）时仍对齐默认 5 列 */
width: -webkit-max-content;
width: max-content;
min-width: calc(5 * 24px + 4 * 8px);
max-height: 420px;
overflow-x: hidden;
overflow-y: auto;
background: var(--sc-cmd-surface);
border: 0.5px solid var(--sc-cmd-border);
/* 对齐 ardot 菜单面板圆角（slash 菜单容器），与 toc 悬浮目录面板一致 */
border-radius: var(--sc-menu-panel-radius);
box-shadow: var(--sc-cmd-shadow);
padding: 12px 8px;
color: var(--sc-cmd-text);
}
/* ── Grid 区域 ── */
.sc-command-palette__grid {
display: grid;
gap: 8px;
width: -webkit-max-content;
width: max-content;
padding: 0 0 8px;
justify-content: center;
margin-inline: auto;
border-bottom: 1px solid var(--sc-cmd-separator, rgba(0, 0, 0, 0.06));
margin-bottom: 8px;
}
.sc-command-palette__grid-item {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: none;
background: transparent;
border-radius: var(--sc-ui-radius-sm, 4px);
color: var(--sc-cmd-icon);
cursor: pointer;
transition: background 0.1s ease;
}
.sc-command-palette__grid-item > svg {
width: var(--sc-menu-icon-size);
height: var(--sc-menu-icon-size);
}
@media (hover: hover) {
.sc-command-palette__grid-item:hover {
background: var(--sc-cmd-hover, rgba(0, 0, 0, 0.04));
}
}
.sc-command-palette__grid-item.is-active {
background: var(--sc-cmd-active, rgba(0, 0, 0, 0.08));
}
/* ── List 区域 ── */
.sc-command-palette__list {
/* width:0 + min-width:100%：吃满网格宽度，自身长文案不参与父级 max-content */
width: 0;
min-width: 100%;
}
.sc-command-palette__group {
/* fieldset 默认 min-width: min-content，长文案会撑开整栏 */
min-width: 0;
min-inline-size: 0;
width: 100%;
padding: 0;
margin: 0;
border: none;
}
.sc-command-palette__group + .sc-command-palette__group {
border-top: 1px solid var(--sc-cmd-separator, rgba(0, 0, 0, 0.06));
margin-top: 4px;
padding-top: 4px;
}
.sc-command-palette__group-label {
padding: 8px 10px 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--sc-menu-font-size-sm);
line-height: 16px;
font-weight: 500;
color: var(--sc-cmd-text-muted, rgba(0, 0, 0, 0.45));
letter-spacing: 0.02em;
}
.sc-command-palette__option {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px;
min-width: 0;
overflow: hidden;
min-height: 32px;
border-radius: var(--sc-ui-radius-md, 6px);
cursor: pointer;
transition: background 0.1s ease;
-webkit-user-select: none;
user-select: none;
}
@media (hover: hover) {
.sc-command-palette__option:hover {
background: var(--sc-cmd-hover, rgba(0, 0, 0, 0.04));
}
}
.sc-command-palette__option.is-selected {
background: var(--sc-cmd-active, rgba(0, 0, 0, 0.08));
}
.sc-command-palette__option-icon {
display: flex;
align-items: center;
justify-content: center;
width: var(--sc-menu-icon-size);
height: var(--sc-menu-icon-size);
color: var(--sc-cmd-icon);
flex-shrink: 0;
}
.sc-command-palette__option-icon svg {
width: var(--sc-menu-icon-size);
height: var(--sc-menu-icon-size);
}
.sc-command-palette__option-label {
flex: 1 1 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--sc-menu-font-size);
line-height: 20px;
color: var(--sc-cmd-text);
}
.sc-command-palette__option-shortcut {
margin-left: auto;
font-size: var(--sc-menu-font-size-sm);
line-height: 16px;
color: var(--sc-cmd-text-muted, rgba(0, 0, 0, 0.45));
flex-shrink: 0;
}
/* ── Shortcut 高亮 ── */
.sc-command-palette__highlight {
color: var(--sc-cmd-primary);
background: transparent;
font-weight: 600;
}
/* ── 子菜单（hover 右侧展开） ── */
.sc-command-palette__option-sub-chevron {
display: flex;
align-items: center;
margin-left: auto;
flex-shrink: 0;
color: var(--sc-cmd-text-muted, rgba(0, 0, 0, 0.45));
}
/* shortcut 标签存在时，chevron 不再重复撑开间距 */
.sc-command-palette__option-shortcut + .sc-command-palette__option-sub-chevron {
margin-left: 2px;
}
/* 复合选择器提升优先级：与 sc-popover-content--bare 的同名属性（bg/border/shadow/padding）
同为单类优先级且打包顺序不保证，需稳定胜出 */
.sc-popover-content--bare.sc-command-palette__submenu {
/* portal 到 body 后脱离 palette 变量作用域，用 mixin 重建 */
--sc-cmd-surface: var(--sc-menu-surface, var(--sc-ui-surface, #ffffff));
--sc-cmd-border: var(--sc-ui-surface-border, rgba(0, 0, 0, 0.08));
--sc-cmd-shadow: var(--sc-menu-shadow, var(--sc-ui-surface-shadow-1, 0 8px 24px rgba(0, 0, 0, 0.08)));
--sc-cmd-text: var(--sc-ui-text, #1f1f1f);
--sc-cmd-text-muted: var(--sc-ui-text-muted, rgba(0, 0, 0, 0.45));
--sc-cmd-hover: var(--sc-ui-hover, rgba(0, 0, 0, 0.04));
--sc-cmd-active: var(--sc-ui-active, rgba(0, 0, 0, 0.08));
--sc-cmd-primary: var(--sc-ui-primary, #2972f4);
--sc-cmd-separator: var(--sc-ui-separator, rgba(0, 0, 0, 0.06));
/* icon 颜色独立可控（默认主文字色，区别于次级文字 --sc-cmd-text-muted） */
--sc-cmd-icon: var(--sc-ui-text, #1f1f1f);
z-index: 1001;
min-width: 160px;
padding: 8px;
background: var(--sc-cmd-surface);
border: 0.5px solid var(--sc-cmd-border);
border-radius: 8px;
box-shadow: var(--sc-cmd-shadow);
color: var(--sc-cmd-text);
}
.sc-command-palette__submenu-option {
min-height: 32px;
padding: 0 8px;
/* 键盘 → 展开子菜单后的高亮项（role=menuitem 不支持 aria-selected，故用 data 属性） */
}
.sc-command-palette__submenu-option[data-selected] {
background: var(--sc-cmd-active, rgba(0, 0, 0, 0.08));
}
/* EmojiRenderer 公共样式
* 三种状态：sc-emoji-svg（sprite）、sc-emoji-img（自定义 URL）、sc-emoji-native（字符）、sc-emoji-placeholder（占位）
*/
.sc-emoji {
display: inline-block;
vertical-align: middle;
user-select: none;
-webkit-user-select: none;
}
/* SVG sprite 模式 */
.sc-emoji-svg {
/* 默认从父 font-size 继承尺寸：1em x 1em，不带显式 size 时无副作用 */
width: 1em;
height: 1em;
/* viewBox 是 128x128，浏览器自动按等比缩放 */
fill: currentColor;
}
/* 自定义 emoji 图片 */
.sc-emoji-img {
width: 1em;
height: 1em;
/* 防止图片在跨行时被基线规则影响 */
object-fit: contain;
/* 用户拖拽体验抑制 */
-webkit-user-drag: none;
}
/* 找不到自定义 emoji 时的占位框 */
.sc-emoji-placeholder {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1em;
height: 1em;
border: 1px dashed var(--sc-ui-border, rgba(0, 0, 0, 0.18));
border-radius: 2px;
font-size: 0.75em;
color: var(--sc-ui-text-muted, rgba(0, 0, 0, 0.4));
background: transparent;
}
/* native 字符 */
.sc-emoji-native {
/* 不强制 size，由 font-size 决定；保持为 inline-block 仅为统一对齐 */
line-height: 1;
}
.sc-block-callout .sc-callout-icon {
font-size: 20px;
width: 30px;
line-height: 1;
}
.sc-block-callout .sc-callout-icon.is-editable {
cursor: pointer;
border-radius: 4px;
border: none;
background: none;
padding: 0;
transition: background-color 0.15s;
}
.sc-block-callout .sc-callout-icon.is-editable:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.sc-emoji-picker {
width: 380px;
/* 高度随内容，但最多撑满外层容器（Popover 会给定 max-height）。
外层用 display:flex + max-height 决定上限，picker 用 flex:1 占满即可。 */
flex: 1 1 auto;
min-height: 0;
max-height: 100%;
display: flex;
flex-direction: column;
font-family: var(--sc-content-font-family, system-ui, sans-serif);
overflow: hidden;
}
/* ── 顶部操作栏（表情符号 | 移除）── */
.sc-emoji-picker__header {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px 4px;
}
.sc-emoji-picker__header-title {
font-size: 13px;
font-weight: 500;
color: var(--sc-ui-text-muted);
}
.sc-emoji-picker__header-remove {
font-size: 13px;
color: var(--sc-ui-text-muted);
background: none;
border: none;
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
transition: background 0.15s, color 0.15s;
}
@media (hover: hover) {
.sc-emoji-picker__header-remove:hover {
background: var(--sc-ui-hover);
color: var(--sc-ui-text);
}
}
/* ── 搜索栏（固定不滚动）── */
.sc-emoji-picker__search {
flex-shrink: 0;
display: flex;
align-items: center;
margin: 4px 8px 4px;
border: 1px solid var(--sc-ui-surface-border);
border-radius: 6px;
background: var(--sc-ui-surface);
transition: border-color 0.15s;
}
.sc-emoji-picker__search:focus-within {
border-color: var(--sc-ui-primary);
}
.sc-emoji-picker__search-icon {
flex-shrink: 0;
padding-left: 8px;
font-size: 13px;
line-height: 1;
}
.sc-emoji-picker__search-input {
flex: 1;
padding: 6px 8px;
border: none;
font-size: 13px;
outline: none;
background: transparent;
color: var(--sc-ui-text);
min-width: 0;
}
.sc-emoji-picker__search-input::-webkit-input-placeholder {
color: var(--sc-ui-text-muted);
}
.sc-emoji-picker__search-input::placeholder {
color: var(--sc-ui-text-muted);
}
/* ── 中间滚动区域（唯一可滚动，填满剩余空间）── */
.sc-emoji-picker__scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
}
/* ── 分类标题（scroll 内 sticky）── */
.sc-emoji-picker__category-label {
padding: 8px 12px 2px;
font-size: 11px;
font-weight: 600;
color: var(--sc-ui-text-muted);
letter-spacing: 0.5px;
position: sticky;
top: 0;
background: var(--sc-ui-surface);
z-index: 1;
}
/* ── Emoji 网格 ── */
.sc-emoji-picker__grid {
display: grid;
grid-template-columns: repeat(11, 1fr);
gap: 1px;
padding: 2px 6px 4px;
}
.sc-emoji-picker__item {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
font-size: 22px;
background: none;
border: none;
border-radius: 6px;
cursor: pointer;
padding: 0;
line-height: 1;
transition: background 0.15s;
}
.sc-emoji-picker__item:hover {
background: var(--sc-ui-hover);
}
.sc-emoji-picker__empty {
grid-column: 1 / -1;
text-align: center;
color: var(--sc-ui-text-muted);
font-size: 13px;
padding: 20px 0;
}
/* ── 底部分类 tab bar（固定不滚动）── */
.sc-emoji-picker__tabs {
flex-shrink: 0;
display: flex;
gap: 2px;
padding: 4px 8px;
border-top: 1px solid var(--sc-ui-surface-border);
}
.sc-emoji-picker__tab {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
height: 30px;
font-size: 16px;
background: none;
border: none;
border-radius: 4px;
cursor: pointer;
padding: 0;
transition: background 0.15s;
}
@media (hover: hover) {
.sc-emoji-picker__tab:hover {
background: var(--sc-ui-hover);
}
}
.sc-emoji-picker__tab.is-active {
background: var(--sc-ui-active);
}
/* ── Popover 外壳：覆盖 Radix 默认 overflow ── */
.sc-emoji-picker-popover {
overflow: hidden !important;
}
/**
* LightboxShell 共享视觉。
*
* 风格沿用历史 image-lightbox 的"经典 lightbox"样式：深色 backdrop +
* 白图标 + 深色胶囊工具栏。两类 lightbox 视觉自此一致。
*/
.sc-lightbox-shell {
position: fixed;
inset: 0;
z-index: 2000;
background: rgba(0, 0, 0, 0.85);
cursor: zoom-out;
animation: sc-lightbox-shell-fade 120ms ease-out;
-webkit-user-select: none;
user-select: none;
padding: 60px 80px 88px;
}
.sc-lightbox-shell__viewport {
width: 100% !important;
height: 100% !important;
cursor: -webkit-grab;
cursor: grab;
}
.sc-lightbox-shell__viewport:active {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.sc-lightbox-shell__content {
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.sc-lightbox-shell__content-inner {
display: inline-block;
line-height: 0;
}
.sc-lightbox-shell__content-inner > img,
.sc-lightbox-shell__content-inner > svg {
display: block;
max-width: calc(100vw - 160px);
max-height: calc(100vh - 148px);
object-fit: contain;
-webkit-user-drag: none;
}
.sc-lightbox-shell__close {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: #fff;
cursor: pointer;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: background 120ms ease;
outline: none;
}
@media (hover: hover) {
.sc-lightbox-shell__close:hover {
background: rgba(255, 255, 255, 0.24);
}
}
.sc-lightbox-shell__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
width: 44px;
height: 44px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: #fff;
cursor: pointer;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: background 120ms ease;
}
@media (hover: hover) {
.sc-lightbox-shell__nav:hover {
background: rgba(255, 255, 255, 0.2);
}
}
.sc-lightbox-shell__nav--prev {
left: 16px;
}
.sc-lightbox-shell__nav--next {
right: 16px;
}
.sc-lightbox-shell__toolbar {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #fff;
}
.sc-lightbox-shell__btn-group {
display: flex;
align-items: center;
}
.sc-lightbox-shell__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: none;
border-radius: 6px;
background: transparent;
color: #fff;
cursor: pointer;
font: inherit;
transition: background 100ms ease;
}
@media (hover: hover) {
.sc-lightbox-shell__btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.15);
}
}
.sc-lightbox-shell__btn:disabled {
opacity: 0.35;
cursor: default;
}
.sc-lightbox-shell__zoom-label {
width: auto;
min-width: 48px;
font-size: 12px;
font-weight: 500;
text-align: center;
}
.sc-lightbox-shell__counter {
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
padding: 0 8px;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.sc-lightbox-shell__divider {
display: inline-block;
width: 1px;
height: 20px;
margin: 0 6px;
background: rgba(255, 255, 255, 0.2);
}
@keyframes sc-lightbox-shell-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (max-width: 768px) {
.sc-lightbox-shell {
padding: 0;
}
.sc-lightbox-shell__content-inner > img,
.sc-lightbox-shell__content-inner > svg {
max-width: 100vw;
max-height: 100vh;
}
.sc-lightbox-shell__close {
top: 8px;
right: 8px;
z-index: 2;
}
.sc-lightbox-shell__nav {
width: 48px;
height: 88px;
border-radius: 0;
background: rgba(0, 0, 0, 0.25);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.sc-lightbox-shell__nav:active {
background: rgba(255, 255, 255, 0.12);
}
.sc-lightbox-shell__nav--prev {
left: 0;
}
.sc-lightbox-shell__nav--next {
right: 0;
}
.sc-lightbox-shell__toolbar {
bottom: 12px;
padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
}
}
.sc-link-edit-overlay {
position: fixed;
inset: 0;
background: transparent;
pointer-events: auto;
z-index: 1099;
}
.sc-link-edit-content {
position: absolute;
width: 360px;
padding: 16px;
background: var(--sc-ui-surface);
border: 1px solid var(--sc-ui-surface-border);
border-radius: var(--sc-ui-radius-md);
box-shadow: var(--sc-ui-surface-shadow-1);
-webkit-user-select: none;
user-select: none;
pointer-events: all;
z-index: 1100;
}
.sc-link-edit-content.is-fixed {
position: fixed;
}
.sc-link-edit-title {
font-size: 14px;
font-weight: 600;
color: var(--sc-ui-text);
margin-bottom: 12px;
}
.sc-link-edit-form {
display: flex;
flex-direction: column;
gap: 8px;
}
.sc-link-edit-row {
display: flex;
align-items: center;
gap: 12px;
}
.sc-link-edit-label {
flex-shrink: 0;
width: 60px;
font-size: 13px;
color: var(--sc-ui-text);
}
.sc-link-edit-input {
flex: 1;
height: 32px;
padding: 0 10px;
border: 1px solid var(--sc-ui-border);
border-radius: var(--sc-ui-radius-sm);
background: var(--sc-ui-bg);
color: var(--sc-ui-text);
font-size: 13px;
outline: none;
transition: border-color 0.15s;
}
.sc-link-edit-input:focus {
border-color: var(--sc-ui-primary);
}
.sc-link-edit-input.is-error {
border-color: var(--sc-ui-danger);
}
.sc-link-edit-input::-webkit-input-placeholder {
color: var(--sc-ui-text-muted);
}
.sc-link-edit-input::placeholder {
color: var(--sc-ui-text-muted);
}
.sc-link-edit-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 16px;
}
.sc-link-edit-btn {
height: 32px;
padding: 0 16px;
border: none;
border-radius: var(--sc-ui-radius-sm);
font-size: 13px;
cursor: pointer;
transition: background 0.1s;
}
.sc-link-edit-btn.is-cancel {
background: var(--sc-ui-hover);
color: var(--sc-ui-text);
}
@media (hover: hover) {
.sc-link-edit-btn.is-cancel:hover {
background: var(--sc-ui-active);
}
}
.sc-link-edit-btn.is-confirm {
background: var(--sc-ui-primary);
color: var(--sc-ui-text-on-primary);
}
@media (hover: hover) {
.sc-link-edit-btn.is-confirm:hover {
background: var(--sc-ui-primary-hover);
}
}
/**
* Code block 语言选择器样式。
*
* 说明：代码块基础布局（背景、边框、行号等）由主题层承担；
* 本文件只负责浮动工具栏中语言选择 Popover 的交互样式。
*
* ── 组件级 token（可被外部覆盖） ──────────────────────────────
* --sc-code-lang-font-size: 触发按钮 + 列表项 + 搜索框字号
* --sc-code-lang-btn-height: 触发按钮高度
* --sc-code-lang-btn-font-weight:触发按钮字重
* --sc-code-lang-btn-bg: 触发按钮默认背景
* --sc-code-lang-btn-border: 触发按钮边框
* --sc-code-lang-btn-hover-bg: 触发按钮 hover/open 背景
* --sc-code-lang-active-color: 选中项文字色
* --sc-code-lang-active-bg: 选中项背景色
* --sc-code-lang-highlighted-bg: 键盘高亮项背景色
*
* 声明在 :root：语言选择下拉通过 Portal 渲染到 body，
* 只有 :root 级别才能确保 btn / popover 内所有消费者都能继承。
*/
:root {
--sc-code-lang-font-size: var(--sc-menu-font-size-sm);
--sc-code-lang-btn-height: 26px;
--sc-code-lang-btn-font-weight: 500;
--sc-code-lang-btn-bg: none;
--sc-code-lang-btn-border: none;
--sc-code-lang-btn-hover-bg: var(--sc-menu-hover-bg);
--sc-code-lang-active-color: var(--sc-menu-icon-color-active);
--sc-code-lang-active-bg: var(--sc-menu-active-bg);
--sc-code-lang-highlighted-bg: var(--sc-menu-hover-bg);
}
.sc-code-language-btn {
display: inline-flex;
align-items: center;
gap: 2px;
height: var(--sc-code-lang-btn-height);
padding: 0 6px 0 8px;
border: var(--sc-code-lang-btn-border);
border-radius: 4px;
background: var(--sc-code-lang-btn-bg);
color: var(--sc-menu-text-color);
font-size: var(--sc-code-lang-font-size);
font-weight: var(--sc-code-lang-btn-font-weight);
cursor: pointer;
white-space: nowrap;
max-width: 120px;
transition: background 120ms ease;
}
.sc-code-language-btn[data-state='open'] {
background: var(--sc-code-lang-btn-hover-bg);
}
@media (hover: hover) {
.sc-code-language-btn:hover {
background: var(--sc-code-lang-btn-hover-bg);
}
}
.sc-code-language-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--sc-code-lang-font-size);
}
.sc-code-language-chevron {
flex-shrink: 0;
color: var(--sc-menu-text-color-muted);
}
/* 复合选择器（0-2-0）覆盖 .sc-popover-content 基类的 10px（--sc-ui-radius-lg）与背景：
* 菜单系浮层统一 --sc-menu-panel-radius + --sc-menu-surface 底色（默认回退 --sc-ui-surface，视觉不变） */
.sc-popover-content.sc-code-language-content {
width: 180px;
min-width: 180px;
max-height: 320px;
padding: 0;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: var(--sc-menu-panel-radius);
background: var(--sc-menu-surface, var(--sc-ui-surface));
box-shadow: var(--sc-menu-shadow);
}
.sc-code-language-search {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 10px;
border-bottom: 1px solid var(--sc-menu-separator-color);
}
.sc-code-language-search-icon {
flex-shrink: 0;
color: var(--sc-menu-text-color-muted);
}
.sc-code-language-search-input {
flex: 1;
min-height: 24px;
padding: 0;
border: none;
background: none;
color: var(--sc-menu-text-color);
font-size: var(--sc-code-lang-font-size);
outline: none;
}
.sc-code-language-search-input::-webkit-input-placeholder {
color: var(--sc-text-placeholder, #b8bcc4);
}
.sc-code-language-search-input::placeholder {
color: var(--sc-text-placeholder, #b8bcc4);
}
.sc-code-language-list {
flex: 1;
overflow-y: auto;
padding: 4px;
}
.sc-code-language-item {
display: flex;
align-items: center;
width: 100%;
padding: 6px 8px;
border: none;
border-radius: 4px;
background: none;
color: var(--sc-menu-text-color);
font-size: var(--sc-code-lang-font-size);
text-align: left;
cursor: pointer;
transition: background 120ms ease;
}
@media (hover: hover) {
.sc-code-language-item:hover {
background: var(--sc-code-lang-highlighted-bg);
}
}
.sc-code-language-item.is-highlighted {
background: var(--sc-code-lang-highlighted-bg);
}
.sc-code-language-item.is-active {
color: var(--sc-code-lang-active-color);
background: var(--sc-code-lang-active-bg);
}
.sc-code-language-item-label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sc-code-language-empty {
padding: 12px 8px;
text-align: center;
font-size: var(--sc-code-lang-font-size);
color: var(--sc-menu-text-color-muted);
}
.sc-block-equation .katex-display {
margin: 0;
}
/**
* 通用 block 缩放组件样式。
*
* 约定：
* - 宿主容器（resizer 的父节点）需要 `position: relative`；
* - 拖动期间本组件给宿主加 `is-resizing` 类，并写入 CSS 变量
* `--sc-resizer-w` / `--sc-resizer-h`，供宿主映射到实际尺寸。
* - 把手显隐由调用方控制（通常是 hover 宿主或选中态）。
*/
.sc-block-resizer {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
}
.sc-block-resizer-handle {
position: absolute;
pointer-events: none;
touch-action: none;
background: var(--sc-resizer-handle-color);
border: 1px solid #fff;
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.12);
opacity: 0;
transition: opacity 120ms ease;
}
.is-selected .sc-block-resizer > .sc-block-resizer-handle,
.is-resizing > .sc-block-resizer > .sc-block-resizer-handle {
opacity: 1;
pointer-events: auto;
}
.sc-block-resizer-handle-e,
.sc-block-resizer-handle-w {
top: 50%;
width: 6px;
height: 36px;
max-height: 50%;
margin-top: -18px;
border-radius: 3px;
}
.sc-block-resizer-handle-e {
right: -3px;
}
.sc-block-resizer-handle-w {
left: -3px;
}
.sc-block-resizer-handle-n,
.sc-block-resizer-handle-s {
left: 50%;
width: 36px;
height: 6px;
max-width: 50%;
margin-left: -18px;
border-radius: 3px;
}
.sc-block-resizer-handle-n {
top: -3px;
}
.sc-block-resizer-handle-s {
bottom: -3px;
}
.sc-block-resizer-handle-ne,
.sc-block-resizer-handle-nw,
.sc-block-resizer-handle-se,
.sc-block-resizer-handle-sw {
width: 8px;
height: 8px;
border-radius: 50%;
}
.sc-block-resizer-handle-ne {
top: -4px;
right: -4px;
}
.sc-block-resizer-handle-nw {
top: -4px;
left: -4px;
}
.sc-block-resizer-handle-se {
bottom: -4px;
right: -4px;
}
.sc-block-resizer-handle-sw {
bottom: -4px;
left: -4px;
}
/**
* SheetAction 移动端底部弹出操作面板样式。
*/
.sc-sheet-action {
position: fixed;
inset: 0;
z-index: 2100;
background: rgba(0, 0, 0, 0);
transition: background 200ms ease;
user-select: none;
-webkit-user-select: none;
touch-action: none;
pointer-events: none;
}
.sc-sheet-action.is-visible {
background: rgba(0, 0, 0, 0.4);
pointer-events: auto;
}
.sc-sheet-action__panel {
position: absolute;
bottom: 0;
left: 0;
right: 0;
transform: translateY(100%);
transition: transform 250ms cubic-bezier(0.32, 0.72, 0, 1);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.is-visible .sc-sheet-action__panel {
transform: translateY(0);
}
.sc-sheet-action__list {
margin: 0 8px 16px;
border-radius: 12px;
overflow: hidden;
background: #fff;
}
.sc-sheet-action__item {
display: block;
width: 100%;
padding: 16px 20px;
border: none;
background: transparent;
font-size: 17px;
line-height: 1.4;
color: #1a1a1a;
text-align: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.sc-sheet-action__item:not(:last-child) {
border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
}
.sc-sheet-action__item:active {
background: rgba(0, 0, 0, 0.05);
}
.sc-sheet-action__item.is-danger {
color: #e53935;
}
/**
* MobileLightboxShell 移动端图片查看器样式。
*/
.sc-mobile-lightbox {
position: fixed;
inset: 0;
z-index: 2000;
background: #000;
animation: sc-mobile-lightbox-fade 150ms ease-out;
user-select: none;
-webkit-user-select: none;
touch-action: none;
}
.sc-mobile-lightbox__counter {
position: absolute;
top: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
padding: 4px 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
color: #fff;
font-size: 13px;
font-variant-numeric: tabular-nums;
line-height: 1.4;
white-space: nowrap;
transition: opacity 200ms ease;
}
.sc-mobile-lightbox__counter.is-hidden {
opacity: 0;
pointer-events: none;
}
.sc-mobile-lightbox__carousel {
position: absolute;
inset: 0;
overflow: hidden;
}
.sc-mobile-lightbox__strip {
display: flex;
height: 100%;
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.sc-mobile-lightbox__slide {
flex: 0 0 100vw;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.sc-mobile-lightbox__viewport {
width: 100% !important;
height: 100% !important;
}
.sc-mobile-lightbox__content {
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.sc-mobile-lightbox__item-wrap {
display: inline-block;
line-height: 0;
touch-action: pan-x pan-y pinch-zoom;
}
.sc-mobile-lightbox-item {
display: block;
max-width: 100vw;
max-height: 100vh;
object-fit: contain;
-webkit-user-drag: none;
}
@keyframes sc-mobile-lightbox-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/**
* 线性进度（LinearProgress）样式——文件卡片底部进度条。
*
* 走主题 token：轨道 --sc-ui-bg-subtle，填充 --sc-text-green。
*/
.sc-upload-bar-track {
width: 100%;
height: 4px;
border-radius: 2px;
background: var(--sc-ui-bg-subtle);
overflow: hidden;
}
.sc-upload-bar-track .sc-upload-bar-fill {
height: 100%;
border-radius: 2px;
background: var(--sc-ui-text-muted);
transition: width 0.2s ease;
}
/**
* 上传蒙层（UploadOverlay）样式——线状进度覆盖层（图片 / 视频）。
*
* 结构：浅色蒙层 + 居中"上传中 N%"文本 + 线状进度条。
* 进度条本身样式由 LinearProgress 自带的 linear-progress.less 承担。
*/
.sc-upload-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.2);
border-radius: var(--sc-block-radius);
z-index: 1;
}
.sc-upload-overlay-body {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
width: 200px;
max-width: calc(100% - 24px);
}
.sc-upload-overlay-body .sc-upload-bar-track {
background: var(--sc-bg-dark_background);
}
.sc-upload-overlay-body .sc-upload-bar-track .sc-upload-bar-fill {
border-radius: 4px;
}
.sc-upload-overlay-text {
font-size: 14px;
font-weight: 500;
color: var(--sc-ui-text-muted);
text-align: center;
white-space: nowrap;
}
/**
* Image lightbox 私有样式（壳由 lightbox-shell 提供，含 max-width/max-height 兜底）。
* 这里只剩拖拽时不出现 ghost 的微调。
* 覆盖默认样式pointer-events 让系统右键菜单正常出现
*/
.sc-lightbox-shell .sc-lightbox-shell__content-inner img {
display: block;
-webkit-user-drag: none;
pointer-events: unset;
}
/**
* Image block 本体样式。
*
* 说明：容器对齐（data-align="left|center|right" → justify-content）由
* `packages/editor/src/view/theme/blocks/image.less` 承担；本文件只负责 block
* 内部的展示、占位、交互按钮、caption 样式。
*/
.sc-block-image {
/**
* 图片加载失败的兜底卡片（对应 image-error-fallback.tsx）。
*
* 外层 .sc-image-media 是 inline-flex，宽度由内容决定；这里给一个合理的
* 默认宽高，让卡片不随 broken URL 的 alt 长度抖动，也不依赖父级 max-width。
* 右上角的下载按钮通过 .sc-image-media:hover 控制显隐，与正常态一致。
*/
}
.sc-block-image .sc-image-frame {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: stretch;
max-width: 100%;
gap: 4px;
/**
* 空态（仅渲染 placeholder）时，frame 撑满 block content，
* 让内部 placeholder 的 width:100% 能真正拉满整行；
* 非空态 frame 宽度由 img 内容决定，保持原样。
*/
}
.sc-block-image .sc-image-frame.is-empty {
display: flex;
width: 100%;
}
.sc-block-image .sc-image-media {
position: relative;
display: inline-flex;
max-width: 100%;
/**
* 图片加载期间：给一个浅灰底色，避免白屏只看到进度条。
*
* 有已知尺寸时（默认路径）：不注入定值宽度，占位空间由 ![]()
自身的
* width/height 属性 + max-width:100% 预留，与加载完成后完全一致，
* 因此不会在自动布局表格里撑开列宽（修复上传换链后的撑大再缩回）。
*/
/**
* 无已知尺寸的兜底：ImageRenderer 注入 320×180 定值占位（width + aspect-ratio），
* 让 ![]()
填满该占位框，避免加载前塌陷成 0×0。
*/
/**
* 缩放拖动中：由 BlockResizer 写入 CSS 变量驱动容器宽高，
* 让预览尺寸实时反馈而不落 editor 状态。松手后变量清除，
* 容器回到由 ![]()
决定的自然尺寸（已在 applyOps 中写回）。
*/
/**
* 图片超链接包裹层（linkUrl 非空时启用）。
* - 编辑态：保留 href 让 hover 提示可见，但单击被 onClick={preventDefault} 拦下，
* 通过浮动工具栏的"打开链接"按钮跳转。
* - 只读态：单击新窗口跳转。
* 不引入额外蓝框/装饰，避免破坏图片视觉。
*/
}
.sc-block-image .sc-image-media.is-image-loading {
background: var(--sc-ui-bg-2, #f5f6f7);
border-radius: var(--sc-block-radius);
}
.sc-block-image .sc-image-media.is-image-loading-fallback img {
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0;
}
.sc-block-image .sc-image-media.is-resizing {
width: var(--sc-resizer-w);
height: var(--sc-resizer-h);
}
.sc-block-image .sc-image-media.is-resizing img {
width: 100%;
height: 100%;
}
.sc-block-image .sc-image-media img {
display: block;
max-width: 100%;
height: auto;
border-radius: var(--sc-block-radius);
}
.sc-block-image .sc-image-media .sc-image-link {
display: inline-flex;
max-width: 100%;
color: inherit;
text-decoration: none;
cursor: pointer;
}
.sc-block-image .sc-image-placeholder {
display: flex;
align-items: center;
width: 100%;
height: 40px;
padding: 6px 36px 6px 6px;
border: 1px solid var(--sc-ui-border);
border-radius: 4px;
background: var(--sc-ui-bg-2, #f5f6f7);
color: var(--sc-text-grey);
font-size: 11pt;
cursor: pointer;
box-sizing: border-box;
transition: background 120ms ease, border-color 120ms ease;
}
@media (hover: hover) {
.sc-block-image .sc-image-placeholder:hover {
background: var(--sc-ui-hover, #ebecef);
}
}
.sc-block-image .sc-image-placeholder.is-loading {
cursor: progress;
}
.sc-block-image .sc-image-placeholder .sc-image-placeholder-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
margin-right: 7px;
color: var(--sc-icon-weak, #b8bcc4);
}
.sc-block-image .sc-image-placeholder .sc-image-placeholder-text {
flex: 1;
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
.sc-block-image .sc-image-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
box-sizing: border-box;
width: 320px;
max-width: 100%;
min-height: 120px;
padding: 16px 20px;
border: 1px dashed var(--sc-ui-border);
border-radius: 4px;
background: var(--sc-ui-bg-2, #f5f6f7);
color: var(--sc-text-grey);
-webkit-user-select: none;
user-select: none;
}
.sc-block-image .sc-image-error .sc-image-error-icon {
color: var(--sc-icon-weak, #b8bcc4);
flex-shrink: 0;
}
.sc-block-image .sc-image-error .sc-image-error-text {
font-size: 12px;
line-height: 1.5;
}
.sc-block-image .sc-image-error .sc-image-error-url {
max-width: 100%;
font-size: 11px;
line-height: 1.4;
color: var(--sc-text-placeholder, #b8bcc4);
/* URL 常含长连续字符，需要 break-all 才能触发截断 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
direction: ltr;
}
.sc-block-image .sc-image-caption {
color: var(--sc-text-grey, #8a8f99);
font-size: 12px;
text-align: center;
min-height: 18px;
line-height: 1.7;
outline: none;
/* 防止长 caption 撑宽 frame：宽度归零后由 min-width 填满父级（即图片宽度） */
width: 0;
min-width: 100%;
word-break: break-word;
}
/**
* NumberingPopover 样式
*
* 容器、item、icon 样式对齐 block-menu 弹层（.sc-block-menu-content.sc-dropdown-content），
* 保持与 block-menu 视觉一致。
*/
/* 容器：base dropdown + block-menu 覆盖值 */
/* 使用复合选择器 .sc-popover-content.sc-numbering-popover 提高权重，避免被 base Popover 样式覆盖 */
.sc-popover-content.sc-numbering-popover {
width: -webkit-fit-content;
width: fit-content;
min-width: 176px;
max-height: var(--radix-dropdown-menu-content-available-height, 560px);
overflow-y: auto;
padding: 12px 8px;
}
.sc-numbering-popover-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 6px 8px;
min-height: 32px;
border: none;
background: transparent;
cursor: pointer;
font-size: 14px;
line-height: 20px;
color: var(--sc-ui-text);
text-align: left;
outline: none;
border-radius: var(--sc-ui-radius-md);
transition: background 0.1s ease;
}
.sc-numbering-popover-item:hover {
background: var(--sc-ui-hover);
}
.sc-numbering-popover-item.is-disabled {
cursor: not-allowed;
opacity: 0.4;
}
.sc-numbering-popover-item.is-disabled:hover {
background: transparent;
}
.sc-numbering-popover-icon {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
color: var(--sc-ui-text-muted);
flex-shrink: 0;
}
.sc-numbering-popover-icon svg {
width: 16px;
height: 16px;
}
.sc-numbering-popover-label {
flex: 1;
}
/**
* NumberingMarkerButton 样式
*
* 设计要点：
* - wrapper span 不影响布局（inline-flex，尺寸由内部 button 决定）
* - button 复用 .sc-block-marker 类名保持与原 list marker 一致的布局
* - hover 时显示背景色 + 圆角，提示可点击
* - popover 打开时保持 hover 视觉态
*/
.sc-numbering-marker-wrapper {
display: inline-flex;
}
.sc-numbering-marker-trigger {
border: none;
background: transparent;
padding: 0 2px;
margin: 0;
font: inherit;
color: inherit;
cursor: pointer;
text-align: left;
user-select: none;
-webkit-user-select: none;
display: flex;
align-items: center;
border-radius: 3px;
transition: background 100ms ease;
}
@media (hover: hover) {
.sc-numbering-marker-trigger:hover {
background: var(--sc-ui-hover);
}
}
.sc-numbering-marker-trigger[data-state='open'] {
background: var(--sc-ui-hover);
}
.sc-numbering-marker-trigger:focus {
outline: none;
}
.sc-numbering-marker-text {
display: inline-block;
}
:where([data-sc-theme='light']) {
--sc-editor-bg: #fff;
--sc-color-selection: rgba(35, 131, 226, 0.28);
--sc-inline-code-bg: #f1f1ef;
--sc-table-selection-bg: rgba(22, 119, 255, 0.08);
}
:root {
--sc-embed-selected-outline: 1px solid var(--sc-ui-primary);
--sc-embed-selected-outline-offset: -1px;
}
:where([data-sc-theme='dark']) {
--sc-editor-bg: #131414;
--sc-color-selection: rgba(78, 168, 246, 0.32);
--sc-inline-code-bg: #373737;
--sc-table-selection-bg: rgba(22, 119, 255, 0.08);
}
:root {
--sc-text-default: #1f1f1f;
--sc-text-grey: #858585;
--sc-text-blue: #2972f4;
--sc-text-sky_blue: #00a3f5;
--sc-text-green: #45b076;
--sc-text-yellow: #f5c400;
--sc-text-orange: #f88825;
--sc-text-red: #de3c36;
--sc-text-rose_red: #dd4097;
--sc-text-purple: #9a38d7;
--sc-text-code: #d34097;
--sc-text-reminder: #e07800;
}
:root[data-sc-color-scheme='dark'] {
--sc-text-default: #ededed;
--sc-text-grey: #7b7b7b;
--sc-text-blue: #4ea8f6;
--sc-text-sky_blue: #25b8f7;
--sc-text-green: #72c092;
--sc-text-yellow: #f7d425;
--sc-text-orange: #f9a24a;
--sc-text-red: #e5645a;
--sc-text-rose_red: #e464a6;
--sc-text-purple: #b15cdf;
--sc-text-code: #e464a6;
--sc-text-reminder: #e69223;
}
:root {
--sc-bg-default: transparent;
--sc-bg-grey_background: #ebebeb;
--sc-bg-light_grey_background: #f3f5f7;
--sc-bg-dark_background: #dcdfe4;
--sc-bg-light_blue_background: #e5efff;
--sc-bg-blue_background: #c7dcff;
--sc-bg-light_sky_blue_background: #e5f6ff;
--sc-bg-sky_blue_background: #c7ecff;
--sc-bg-light_green_background: #eafaf1;
--sc-bg-green_background: #ace2c5;
--sc-bg-light_yellow_background: #fff9e3;
--sc-bg-yellow_background: #ffeead;
--sc-bg-light_orange_background: #fff3eb;
--sc-bg-orange_background: #ffdcc4;
--sc-bg-light_red_background: #ffe9e8;
--sc-bg-red_background: #ffc9c7;
--sc-bg-light_rose_red_background: #ffecf4;
--sc-bg-rose_red_background: #ffc7e2;
--sc-bg-light_purple_background: #fdebff;
--sc-bg-purple_background: #f2c7ff;
}
:root[data-sc-color-scheme='dark'] {
--sc-bg-default: transparent;
--sc-bg-grey_background: #3a3a3a;
--sc-bg-light_grey_background: #2d2d2d;
--sc-bg-dark_background: #4a4a4a;
--sc-bg-light_blue_background: #3d5c87;
--sc-bg-blue_background: #223b6c;
--sc-bg-light_sky_blue_background: #285781;
--sc-bg-sky_blue_background: #14486e;
--sc-bg-light_green_background: #17392b;
--sc-bg-green_background: #1b523a;
--sc-bg-light_yellow_background: #3e340f;
--sc-bg-yellow_background: #5b4a0c;
--sc-bg-light_orange_background: #422718;
--sc-bg-orange_background: #62351c;
--sc-bg-light_red_background: #4a2022;
--sc-bg-red_background: #6f282b;
--sc-bg-light_rose_red_background: #4a1f38;
--sc-bg-rose_red_background: #6f2750;
--sc-bg-light_purple_background: #3e204c;
--sc-bg-purple_background: #5b2871;
}
:root {
--sc-border-default: transparent;
--sc-border-grey: #80868f;
--sc-border-blue: #b0cdff;
--sc-border-sky_blue: #96deee;
--sc-border-green: #a8e0c2;
--sc-border-yellow: #f9e38b;
--sc-border-orange: #ffba85;
--sc-border-red: #ffa6a3;
--sc-border-rose_red: #ffaeda;
--sc-border-purple: #e7b4ff;
}
:root[data-sc-color-scheme='dark'] {
--sc-border-default: transparent;
--sc-border-grey: #5b5c5c;
--sc-border-blue: #2f4a88;
--sc-border-sky_blue: #2b6c81;
--sc-border-green: #317c58;
--sc-border-yellow: #866c25;
--sc-border-orange: #884925;
--sc-border-red: #882c30;
--sc-border-rose_red: #882f66;
--sc-border-purple: #652d88;
}
:root {
--sc-divider-default: rgba(0, 0, 0, 0.12);
--sc-divider-black_divider: #000000;
--sc-divider-grey_divider: #858585;
--sc-divider-light_grey_divider: #dcdfe4;
--sc-divider-blue_divider: #2972f4;
--sc-divider-light_blue_divider: #b0cdff;
--sc-divider-table_blue_divider: #66b7fc;
--sc-divider-sky_blue_divider: #00a3f5;
--sc-divider-light_sky_blue_divider: #96deee;
--sc-divider-green_divider: #00b371;
--sc-divider-light_green_divider: #9ce4c3;
--sc-divider-yellow_divider: #fec100;
--sc-divider-light_yellow_divider: #ffeda5;
--sc-divider-orange_divider: #ff8000;
--sc-divider-light_orange_divider: #ffdac1;
--sc-divider-red_divider: #f22329;
--sc-divider-light_red_divider: #ffc6c5;
--sc-divider-rose_red_divider: #dd4097;
--sc-divider-light_rose_red_divider: #ffaeda;
--sc-divider-purple_divider: #a72edf;
--sc-divider-light_purple_divider: #fac5ff;
}
:root[data-sc-color-scheme='dark'] {
--sc-divider-default: #ededed;
--sc-divider-black_divider: #41444a;
--sc-divider-grey_divider: #7b7b7b;
--sc-divider-light_grey_divider: #5b5c5c;
--sc-divider-blue_divider: #4ea8f6;
--sc-divider-light_blue_divider: #2f4a88;
--sc-divider-table_blue_divider: #205da4;
--sc-divider-sky_blue_divider: #25b8f7;
--sc-divider-light_sky_blue_divider: #2b6c81;
--sc-divider-green_divider: #72c092;
--sc-divider-light_green_divider: #317c58;
--sc-divider-yellow_divider: #f7d425;
--sc-divider-light_yellow_divider: #866c25;
--sc-divider-orange_divider: #f9a24a;
--sc-divider-light_orange_divider: #884925;
--sc-divider-red_divider: #e5645a;
--sc-divider-light_red_divider: #882c30;
--sc-divider-rose_red_divider: #e464a6;
--sc-divider-light_rose_red_divider: #882f66;
--sc-divider-purple_divider: #b15cdf;
--sc-divider-light_purple_divider: #652d88;
}
:where([data-sc-theme]) {
--sc-table-selector-bg: var(--sc-color-border, #e0e0e0);
--sc-table-selector-active-bg: var(--sc-color-text-tertiary, #aaa);
--sc-table-selector-selected-bg: var(--sc-primary, #1677ff);
--sc-table-selector-selected-hover-bg: var(--sc-primary-hover, #4096ff);
--sc-table-plus-btn-hover-bg: var(--sc-primary, #1677ff);
--sc-table-background: var(--sc-editor-bg);
--sc-quote-bg: transparent;
--sc-quote-text-color: var(--sc-text-grey);
--sc-quote-border-color: var(--sc-ui-primary);
--sc-menu-handle-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
--sc-code-block-bg: var(--sc-bg-grey_background);
--sc-code-block-border: 1px solid var(--sc-ui-border, rgba(0, 0, 0, 0.08));
--sc-resizer-handle-color: #3370ff;
--sc-link-color: var(--sc-ui-primary);
--sc-link-color-hover: var(--sc-ui-primary-hover);
--sc-heading-1-color: inherit;
--sc-heading-2-color: inherit;
--sc-heading-3-color: inherit;
--sc-heading-4-color: inherit;
--sc-heading-5-color: inherit;
--sc-heading-6-color: inherit;
}
:where([data-sc-theme]) {
--sc-editor-padding: calc(16px * var(--sc-font-scale, 1));
--sc-editor-padding-top: var(--sc-editor-padding);
--sc-editor-padding-right: var(--sc-editor-padding);
--sc-editor-padding-bottom: var(--sc-editor-padding);
--sc-editor-padding-left: var(--sc-editor-padding);
--sc-block-gap: calc(8px * var(--sc-font-scale, 1));
--sc-block-gap-heading-before: calc(28px * var(--sc-font-scale, 1));
--sc-block-gap-heading-after: calc(8px * var(--sc-font-scale, 1));
--sc-block-gap-media: calc(12px * var(--sc-font-scale, 1));
--sc-block-gap-table-before: calc(20px * var(--sc-font-scale, 1));
--sc-block-gap-table-after: calc(20px * var(--sc-font-scale, 1));
--sc-block-gap-separator: calc(4px * var(--sc-font-scale, 1));
--sc-block-gap-container: calc(12px * var(--sc-font-scale, 1));
--sc-block-gap-inner: calc(4px * var(--sc-font-scale, 1));
--sc-block-indent: calc(24px * var(--sc-font-scale, 1));
--sc-block-padding-x: calc(16px * var(--sc-font-scale, 1));
--sc-block-padding-y: calc(12px * var(--sc-font-scale, 1));
--sc-column-gap: calc(12px * var(--sc-font-scale, 1));
--sc-column-radius: 12px;
--sc-column-hover-bg: var(--sc-ui-hover, #f7f7f7);
--sc-block-radius: 4px;
--sc-image-radius: 10px;
--sc-table-selector-bg: var(--sc-color-border, #e0e0e0);
--sc-table-selector-active-bg: var(--sc-color-text-tertiary, #aaa);
--sc-table-selector-selected-bg: var(--sc-primary, #1677ff);
--sc-table-selector-selected-hover-bg: var(--sc-primary-hover, #4096ff);
--sc-table-plus-btn-hover-bg: var(--sc-primary, #1677ff);
--sc-quote-border-width: 2px;
--sc-table-cell-padding: calc(8px * var(--sc-font-scale, 1));
--sc-divider-padding: calc(12px * var(--sc-font-scale, 1));
--sc-inline-code-border-radius: 2px;
--sc-inline-code-padding: 0.125em 0.3em;
--sc-quote-border-radius: 0px;
--sc-quote-padding: var(--sc-block-padding-y) var(--sc-block-padding-x);
--sc-todo-checkbox-radius: 6px;
--sc-menu-handle-radius: var(--sc-ui-radius-lg);
--sc-code-block-radius: 10px;
--sc-code-block-padding-block: calc(10px * var(--sc-font-scale, 1));
--sc-code-block-padding-inline-right: calc(16px * var(--sc-font-scale, 1));
--sc-code-block-padding-inline-left: calc(44px * var(--sc-font-scale, 1));
--sc-code-line-number-inset: calc(10px * var(--sc-font-scale, 1));
--sc-callout-radius: 10px;
}
/**
* 浮动菜单专属 Token（--sc-menu-*）
*
* 面向「划词菜单 / 代码块菜单 / 图片菜单 / block 把手 / 表格操作菜单」这 5 类浮层，
* 抽出一套统一、可被外部覆盖的视觉变量，数值对齐 ardot 设计稿 toolbar-editor 组件规范。
*
* 设计原则：
* 1. 颜色类默认回退到 UI kit 的 --sc-ui-*，因此 light/dark 自动跟随，无需在此重复声明暗色值。
* 2. 尺寸类（icon-size / font-size）只暴露「最终尺寸」变量，外部可用 calc() 按系统字号等级做乘法覆盖，
* 例如：--sc-menu-font-size: calc(var(--host-font-scale, 1) * 14px);
* 3. 声明在 :root（而非 :where([data-sc-theme])）：Radix Popover / DropdownMenu 通过 Portal 渲染到
* ，需保证 Portal 内的菜单内容也能继承到这些变量。
*/
:root {
/* ── 颜色（统一，可外部覆盖；默认回退 --sc-ui-*，暗色自动跟随） ── */
/* 操作 icon 统一颜色。设计稿为 text/primary（≈ rgba(0,0,0,.9)），故映射到 --sc-ui-text。 */
--sc-menu-icon-color: var(--sc-ui-text, #1f1f1f);
/* icon / 项选中态（主题主色蓝） */
--sc-menu-icon-color-active: var(--sc-ui-primary, #2972f4);
/* 菜单项 check 符号颜色（turn into / 对齐 / 颜色等选中标记），默认跟随主色，可外部覆盖 */
--sc-menu-check-color: var(--sc-ui-primary, #2972f4);
/* 菜单内主文字颜色 */
--sc-menu-text-color: var(--sc-ui-text, #1f1f1f);
/* 菜单内次级/说明文字颜色 */
--sc-menu-text-color-muted: var(--sc-ui-text-muted, rgba(0, 0, 0, 0.45));
/* ── 尺寸（只暴露最终值，外部可用 calc 乘法覆盖） ── */
/* 主操作 icon 尺寸（svg width/height） */
--sc-menu-icon-size: 16px;
/* 菜单内主标签字号 */
--sc-menu-font-size: 14px;
/* 菜单内次级字号（如代码语言名、分组小标题） */
--sc-menu-font-size-sm: 12px;
/* ── 容器视觉（对齐设计稿；颜色回退 --sc-ui-*，暗色自动跟随） ── */
--sc-menu-surface: var(--sc-ui-surface, #fff);
--sc-menu-border-color: var(--sc-ui-surface-border, rgba(0, 0, 0, 0.08));
--sc-menu-border-width: 1px;
--sc-menu-radius: 8px;
/* 下拉/命令/语言选择等面板圆角（与工具栏胶囊 --sc-menu-radius 分离，可单独覆盖） */
--sc-menu-panel-radius: 12px;
--sc-menu-padding-x: 4px;
--sc-menu-padding-y: 4px;
--sc-menu-gap: 4px;
/* ── 交互反馈 ── */
--sc-menu-hover-bg: var(--sc-ui-hover, rgba(0, 0, 0, 0.04));
--sc-menu-active-bg: var(--sc-ui-active, rgba(0, 0, 0, 0.08));
/* ── 分隔线 ── */
--sc-menu-separator-color: var(--sc-ui-separator, rgba(0, 0, 0, 0.06));
--sc-menu-separator-height: 16px;
/* ── 阴影：设计稿 wb/shadow/Popup-Medium 双层柔和投影（远层 4% + 近层 6%） ── */
--sc-menu-shadow: 0 6px 24px -4px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.06);
}
/* 暗色模式：仅阴影需加强（颜色类已通过 --sc-ui-* 回退自动跟随） */
:root[data-sc-color-scheme='dark'] {
--sc-menu-shadow: 0 6px 24px -4px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}
:where([data-sc-theme]) {
--sc-content-font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', Helvetica, Arial, 'Microsoft YaHei', '微软雅黑', '黑体', Heiti, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', 'Android Emoji', EmojiSymbols, TdocsUncommon;
--sc-content-font-size: calc(14px * var(--sc-font-scale, 1));
--sc-content-line-height: 1.6;
--sc-ui-font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', Helvetica, Arial, 'Microsoft YaHei', '微软雅黑', sans-serif;
--sc-ui-font-size: 12px;
--sc-ui-line-height: 1.4;
--sc-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas;
--sc-code-block-font-family: 'Source Code Pro', var(--sc-font-family-mono);
--sc-content-font-weight-bold: 600;
--sc-inline-code-font-size: 93%;
--sc-quote-line-height: 1.75;
--sc-link-text-decoration: none;
--sc-heading-1-font-weight: var(--sc-content-font-weight-bold);
--sc-heading-2-font-weight: var(--sc-content-font-weight-bold);
--sc-heading-3-font-weight: var(--sc-content-font-weight-bold);
--sc-heading-letter-spacing: normal;
--sc-heading-1-line-height: 1.4;
--sc-heading-2-line-height: 1.4;
--sc-heading-3-line-height: 1.4;
--sc-heading-4-line-height: 1.5;
--sc-heading-5-line-height: 1.5;
--sc-heading-6-line-height: 1.5;
--sc-page-title-line-height: 1.7;
}
.sc-block-page button.sc-page-block-inner {
display: flex;
align-items: center;
gap: 6px;
padding: 2px;
border-radius: 4px;
border: none;
background: none;
cursor: pointer;
text-align: left;
width: 100%;
transition: background-color 80ms ease;
min-height: 28px;
}
.sc-block-page button.sc-page-block-inner:hover {
background-color: var(--sc-block-hover-bg, rgba(0, 0, 0, 0.04));
}
.sc-block-page button.sc-page-block-inner:active {
background-color: var(--sc-block-active-bg, rgba(0, 0, 0, 0.08));
}
.sc-block-page .sc-page-block-icon {
flex-shrink: 0;
font-size: 16px;
line-height: 1;
width: 22px;
text-align: center;
}
.sc-block-page .sc-page-block-title {
font-size: var(--sc-content-font-size, 14px);
line-height: var(--sc-content-line-height, 1.6);
color: var(--sc-text-default);
text-decoration: underline;
text-underline-offset: 2px;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sc-block-page .sc-page-block-title--empty {
color: var(--sc-text-grey);
text-decoration: none;
}
/**
* 表格控件层样式入口
*
* 按职责拆分到 styles/ 子目录：
* - _tokens.less z-index 层级与几何参数
* - layout.less wrapper / viewport / content / 边缘阴影 / 横向滚动条
* - plus-and-resize.less + 按钮 hot zone / 列宽 resize / hover-line / 磁吸 indicator
* - selectors.less 行/列选择条 / 角块 / 移动 indicator / 拖拽预览卡片
* - view-zoom.less 宿主 CSS zoom 时控件层二次缩放补偿（--sc-view-zoom）
*
* 注：.sc-block-simple_table > .sc-block-content 的 overflow 在 theme/blocks/table.less 统一管理
*/
/**
* 表格容器层：wrapper / viewport / content / 边缘阴影 / 横向滚动条
*
* wrapper > viewport > content：
* - viewport 用 clip-path 模拟单轴 overflow（CSS 规范单轴 visible 会被强制 auto，不能用 overflow:hidden）
* ⚠️ 不要给 viewport 加 overflow:hidden：会裁掉 top:-12px 的列选择条（.sc-table-col-selector）
* 与顶部 hot zone。横向延伸量由 computeExtendMetrics 在 JS 层 clamp 到编辑器内容区内，
* 无需 viewport 兜底裁剪；竖向溢出交给 clip-path 的 inset(-34px ...) 上扩展。
* - content 用 width:max-content + transform: translateX 承载横向滚动（由 SimpleTableBlock 写 inline style）
* - ColController 挂在 wrapper 层（col-controller-host），不受 viewport clip-path 裁剪
*
* 双向扩展：表格可向 .sc-editor 内容沿延伸
* - --sc-table-extend-left / -right：实际扩展量，由 wrapper inline style 写入
* - --sc-table-clip-left / -right：viewport clip 内沿（值越接近 0 露出越少），扩展量增大时收紧
*
* baseline 留出（未扩展时 viewport 外可见的内容范围）：
* - 顶部 -34：容纳 col + 按钮 hot zone（zone 高 28，与表格上方留 6px buffer）
* - 下方 -12：底部 buffer
* - 未扩展时左 -34 / 右 -12（容纳 row + 按钮 / 右 + 按钮）
* - 已扩展（>= baseline）时收紧到 0，避免向外露出空白
*/
/**
* 表格控件层共享 token：z-index 层级 + 几何参数
*
* z-index（从低到高）
* 2 selector 列/行选择条
* 3 col-resize-zone 列宽 hot zone + grip
* 4 hover-line + 按钮 hover 联动的蓝色线
* 5 col-resize-line 拖拽列宽时的蓝色指示线
* 6 plus-zone 顶部/左侧 + 按钮区
* 7 edge-shadow 内容溢出时的右侧渐变阴影
* 9 drag-preview 移动拖拽预览卡片（实际 z-index 见 .grabbing-layer）
* 10 move-indicator 移动拖拽蓝线 / 磁吸黄线
* 12 scrollbar 横向滚动条
*/
/* + 按钮直径（顶部、左侧统一） */
/* + 按钮 hot zone 大小：比按钮大 10px，给鼠标移动留 buffer，消除"间隙导致 hover 丢失" */
/* hot zone 中心相对表格边线的外侧偏移：zone 边缘紧贴表格边线（offset = size/2） */
/* 列宽 resize hot zone 半宽 */
/* 移动端横向滚动条总高度：视觉高度 8px + padding-top 10px 上方留白（仅作视觉指示器，非触摸热区）。
edge-shadow 的 bottom 与它绑定，确保阴影底边停在滚动条上方。 */
/* view-zoom 补偿后的滚动条占位高度：宿主对版心 CSS zoom 时同步 --sc-view-zoom，
轨道按倒数放大，视觉高度回到 100%。
edge-shadow 的 bottom 必须复用同一套补偿（而不是直接用 @scrollbar-height），
否则父级 zoom 会把这段间距再乘一次，阴影底边与滚动条错位。 */
.sc-table-wrapper {
position: relative;
}
/* ColController 宿主：挂在 wrapper 层，不受 viewport clip-path 裁剪。
* transform: translateX(contentOffset) 由 JS inline style 写入，与 content 保持同步偏移。
* pointer-events: none 避免遮挡表格内容，子元素保留 pointer-events: auto。 */
.sc-table-col-controller-host {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: 3;
}
.sc-table-col-controller-host > * {
pointer-events: auto;
}
/* 列选择条 portal 宿主（仅移动端）：列选择条 top:-12px 溢出会被原生滚动 viewport
的 overflow 裁掉，故 portal 到 wrapper 层。
host 是「固定」裁剪窗口：width:100% + overflow:hidden 把列选择条裁到
wrapper（= viewport 可视区）宽度，避免滚动到中间时列选择条右边缘超出可视区
「突出来」——portal 到 wrapper 层后失去 viewport 的 overflow-x:auto 裁剪，
需在此补横向裁剪。
滚动跟随由列选择条内容自身 translateX（SelectorController 的 colSelectorOffset）
完成，host 不再整体 translateX —— 否则裁剪窗口会随 host 一起移动，滚动后
后面的列选择条单元格始终落在窗口外被裁掉。
height:12px 与 .sc-table-col-selector 的高度一致（子元素为 absolute，不撑开
host，需显式给高）。 */
.sc-table-col-selector-host {
position: absolute;
top: -12px;
left: 0;
width: 100%;
height: 12px;
overflow: hidden;
pointer-events: none;
z-index: 3;
}
.sc-table-col-selector-host > * {
pointer-events: auto;
}
.sc-table-col-selector-host .sc-table-col-selector {
top: 0;
}
.sc-table-viewport {
position: relative;
margin-left: calc(0px - var(--sc-table-extend-left, 0px));
width: calc(100% + var(--sc-table-extend-left, 0px) + var(--sc-table-extend-right, 0px));
-webkit-clip-path: inset(-34px var(--sc-table-clip-right, -12px) -12px var(--sc-table-clip-left, -80px));
clip-path: inset(-34px var(--sc-table-clip-right, -12px) -12px var(--sc-table-clip-left, -80px));
}
.sc-table-content {
position: relative;
width: -webkit-max-content;
width: max-content;
min-width: 100%;
will-change: transform;
/* cell 内子 block 的 handle 被 viewport clip-path 裁掉不可见，
* 由 TableCellHandleLayer 在 wrapper 层独立渲染替代。
* 用 visibility:hidden + pointer-events:none 隐藏原生 handle，
* 保留 DOM 存在（React 组件生命周期不受影响）。 */
}
.sc-table-content .sc-block-menu-handle {
visibility: hidden;
pointer-events: none;
}
/* fit 模式下 content 不超过 viewport 宽度，
* 避免 width:max-content 把 table 百分比列宽循环放大 */
.is-table-fit .sc-table-content {
max-width: 100%;
}
/* 不扩展时（extendLeft=0 && extendRight=0）wrapper 宽度锁定为父容器宽度。
* 嵌套场景（表格作为非根节点 block 的子节点）下，表格内容溢出由 viewport 内
* 横向滚动条处理，不应撑大父 block。
* 扩展场景下（is-table-extended）不应用此约束，wrapper 通过 viewport 的
* margin-left 负值 / width calc 向 editor 边界延伸。 */
.sc-table-wrapper:not(.is-table-extended) {
width: 100%;
}
/* 边缘阴影：左右两侧溢出提示 */
.sc-table-edge-shadow {
position: absolute;
top: 0;
/* 与滚动条轨道共用补偿后的占位高度，保证阴影底边始终停在滚动条上方 */
bottom: calc(14px / var(--sc-view-zoom, 1));
width: 14px;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
z-index: 7;
}
.sc-table-edge-shadow.is-visible {
opacity: 1;
}
.sc-table-edge-shadow--left {
/* 阴影已从 viewport 内移到 wrapper 层，用 extend-left 对齐到 viewport（可视区）左边缘 */
left: calc(0px - var(--sc-table-extend-left, 0px));
background: linear-gradient(to right, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0));
}
.sc-table-edge-shadow--right {
right: calc(0px - var(--sc-table-extend-right, 0px));
background: linear-gradient(to left, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0));
}
/* 横向滚动条：sticky 吸附在视口底部，独立轨道。
* sticky 让表格很高时滚动条始终跟随视口底部，保持可见可拖动。 */
.sc-table-scrollbar {
position: sticky;
/* 宿主对版心 CSS zoom 时同步 --sc-view-zoom；轨道按倒数放大，视觉间距保持 100% */
bottom: calc(3px / var(--sc-view-zoom, 1));
height: calc(14px / var(--sc-view-zoom, 1));
width: 100%;
overflow-x: auto;
overflow-y: hidden;
z-index: 12;
opacity: 0;
transition: opacity 0.2s ease;
scrollbar-width: thin;
scrollbar-color: var(--sc-color-border, rgba(0, 0, 0, 0.25)) transparent;
}
.sc-table-scrollbar::-webkit-scrollbar {
height: calc(8px / var(--sc-view-zoom, 1));
}
.sc-table-scrollbar::-webkit-scrollbar-thumb {
background-color: var(--sc-color-border, rgba(0, 0, 0, 0.25));
border-radius: 4px;
}
.sc-table-scrollbar::-webkit-scrollbar-thumb:hover {
background-color: var(--sc-color-text-tertiary, rgba(0, 0, 0, 0.4));
}
.sc-table-scrollbar::-webkit-scrollbar-track {
background: none;
border: none;
box-shadow: none;
}
/* containerScroll 模式修正：
* 此模式下 scroll container 是 .sc-editor-content（overflow-y:auto），其
* padding-bottom 会把 bottom sticky 的吸附线从视口底（padding box 底）上移
* padding-bottom 的量（吸附线落在 content box 底），导致滚动条停得偏高。
* 减去 padding-bottom 把吸附线拉回视口底（仍保留 @scrollbar-bottom 间距）。
* 非 containerScroll 模式 scroll container 在 .sc-editor 之外，不命中此规则，bottom 维持原值。 */
.sc-editor.is-container-scroll .sc-table-scrollbar {
bottom: calc(3px / var(--sc-view-zoom, 1) - var(--sc-editor-padding-bottom, 0px));
}
.sc-table-scrollbar.is-visible {
opacity: 1;
}
/* 撑出 scrollLeft 范围的占位 */
.sc-table-scrollbar-inner {
height: 1px;
}
/* ── 移动端适配 ── */
/* 移动端：viewport 为原生 overflow-x:auto 滚动容器，去掉双向扩展的 clip-path/margin。
overflow-y:hidden 显式声明（避免 overflow-x:auto 把 overflow-y 强制为 auto 产生纵向滚动条）；
列选择条 / 行 + 按钮 / 列 + 按钮 均已 portal 到 wrapper 层，viewport 内不再有负向溢出装饰。 */
[data-sc-platform-group='mobile'] .sc-table-viewport {
margin-left: 0;
width: 100%;
-webkit-clip-path: none;
clip-path: none;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
[data-sc-platform-group='mobile'] .sc-table-viewport::-webkit-scrollbar {
display: none;
}
/* 移动端 content 由 viewport 原生滚动，不再 translateX，去掉合成层提示 */
[data-sc-platform-group='mobile'] .sc-table-content {
will-change: auto;
}
/* iOS Safari 程序化 scrollLeft 不触发原生 overlay，用 JS isScrolling 状态 + is-scrolling class 控制显隐。
移动端滚动数据源是 viewport 原生 overflow-x:auto，scroller 仅作纯视觉指示器（scrollLeft 由
viewport 单向同步），必须 pointer-events:none 禁用拖动 —— 否则拖动 thumb 不会同步回 viewport，
且下一次 viewport 滚动又会把 scroller.scrollLeft 重置，表现为「拖动后弹回」。 */
[data-sc-platform-group='mobile'] .sc-table-scrollbar {
opacity: 0;
min-height: 18px;
/* 视觉高度 8px + 上方留白，仅作指示器，非触摸热区 */
padding-top: 10px;
/* 上方留白，视觉高度仍为 8px */
background-clip: content-box;
pointer-events: none;
transition: opacity 0.3s ease;
}
[data-sc-platform-group='mobile'] .sc-table-scrollbar.is-scrolling {
opacity: 1;
}
[data-sc-platform-group='mobile'] .sc-table-edge-shadow {
bottom: calc(18px / var(--sc-view-zoom, 1));
}
/**
* 分隔线触发的控件：+ 按钮（顶部/左侧）、列宽 resize、hover-line、snap-line
*
* 顶部 + zone（28×28）：按钮 18×18 靠下贴表格上边线，上方 10px 是 buffer hot area，
* 让鼠标从表格内向上移动时无缝衔接。左侧 + zone 同理（buffer 在左侧）。
* 最左竖线特殊处理：zone 收窄到 y=-18~0，避免与第一条横线 row + zone 重叠。
*/
.sc-table-col-plus-zone {
position: absolute;
top: -28px;
left: 0;
width: 28px;
height: 28px;
margin-left: -14px;
z-index: 6;
pointer-events: auto;
display: flex;
align-items: flex-end;
justify-content: center;
}
/* 最左竖线 + 按钮：避免与第一条横线 row + zone 在 -14~+14 区间冲突 */
.sc-table-col-plus-zone.is-leftmost {
top: -18px;
height: 18px;
align-items: center;
}
.sc-table-row-plus-zone {
position: absolute;
left: 0;
top: 0;
width: 28px;
height: 28px;
margin-top: -14px;
margin-left: -14px;
z-index: 6;
pointer-events: auto;
display: flex;
align-items: center;
justify-content: flex-end;
}
/* 最上横线 + 按钮：不再做任何样式覆盖。
* 此前用 width:18 + justify-content:center 做"避让最左列 col-plus"，
* 但这会让按钮从 zone 右沿（=表格左边线）偏到 zone 中心（=表格左边线左 14px），
* 视觉上首行 + 按钮偏左。左上角的重叠实际由「邻近优先」（一次只渲染一个 +）
* + z-index 处理，无需偏移避让。is-topmost class 保留在 row-controller 中仅作语义判定。 */
/* + 按钮（顶部/左侧通用）：固定 18×18，+ 图标用伪元素绘制（避免 svg 内部偏移） */
.sc-table-col-plus-btn,
.sc-table-row-plus-btn {
all: unset;
box-sizing: border-box;
position: relative;
width: 18px;
height: 18px;
flex: 0 0 auto;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background-color: var(--sc-color-text-quaternary, #bbb);
color: var(--sc-ui-text-on-primary, #fff);
box-shadow: var(--sc-ui-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.15));
cursor: pointer;
font-size: 0;
line-height: 0;
transition: background-color 0.1s ease;
}
.sc-table-col-plus-btn::before,
.sc-table-row-plus-btn::before,
.sc-table-col-plus-btn::after,
.sc-table-row-plus-btn::after {
content: '';
position: absolute;
background-color: currentColor;
}
.sc-table-col-plus-btn::before,
.sc-table-row-plus-btn::before {
top: 50%;
left: 50%;
width: 10px;
height: 2px;
margin-left: -5px;
margin-top: -1px;
border-radius: 1px;
}
.sc-table-col-plus-btn::after,
.sc-table-row-plus-btn::after {
top: 50%;
left: 50%;
width: 2px;
height: 10px;
margin-left: -1px;
margin-top: -5px;
border-radius: 1px;
}
.sc-table-col-plus-btn.is-hover,
.sc-table-row-plus-btn.is-hover {
background-color: var(--sc-table-plus-btn-hover-bg);
}
/* + hover 时联动的蓝线 */
.sc-table-col-hover-line {
position: absolute;
top: 0;
width: 2px;
margin-left: -1px;
background-color: var(--sc-primary, #1677ff);
pointer-events: none;
z-index: 4;
}
.sc-table-row-hover-line {
position: absolute;
left: 0;
height: 2px;
margin-top: -1px;
background-color: var(--sc-primary, #1677ff);
pointer-events: none;
z-index: 4;
}
/* 列宽 resize：hot zone 纯视觉，事件委托给 */
.sc-table-col-resize-zone {
position: absolute;
top: 0;
width: 12px;
margin-left: -6px;
z-index: 3;
pointer-events: none;
}
/* 移动端列宽 resize 手柄：独立触摸元素，静态 touch-action:none。
table 在 viewport 原生横向滚动容器（overflow-x:auto）内，从 table 开始的横向
拖拽会被浏览器接管为滚动；手柄声明 none 后，从手柄开始的触摸不被滚动接管，
pointerdown 直接启动 resize。透明竖条覆盖列分隔线，height 由 inline style 提供。
宽度 = cell padding × 2（半宽 = --sc-table-cell-padding）：手柄只覆盖列分隔线两侧
的 padding 区，不得超出 padding 侵入 cell 内容区——否则会遮挡内容里的子 block
交互把手（如图片缩放 corner handle），导致图片无法缩放。 */
[data-sc-platform-group='mobile'] .sc-table-col-resize-handle {
position: absolute;
top: 0;
width: calc(var(--sc-table-cell-padding, 8px) * 2);
margin-left: calc(var(--sc-table-cell-padding, 8px) * -1);
touch-action: none;
z-index: 3;
}
/* grip 视觉：仅 hover/snap 时显示 */
.sc-table-col-resize-grip {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 4px;
height: 16px;
border-radius: 2px;
background-color: var(--sc-primary, #1677ff);
pointer-events: none;
opacity: 0.5;
}
.sc-table-col-resize-grip.is-snap {
background-color: var(--sc-color-warning, #f5a623);
box-shadow: 0 0 0 2px var(--sc-ui-surface, #fff);
opacity: 1;
}
/* 拖拽列宽时的蓝色指示线 */
.sc-table-col-resize-line {
position: absolute;
top: 0;
width: 2px;
margin-left: -1px;
background-color: var(--sc-primary, #1677ff);
pointer-events: none;
z-index: 5;
}
/* 等宽磁吸 indicator：黄色药丸；top 由 inline style 控制（跟随光标 y） */
.sc-table-col-snap-line {
position: absolute;
top: 14px;
width: 3px;
height: 10px;
margin-left: -1.5px;
border-radius: 2px;
background-color: var(--sc-color-warning, #f5a623);
pointer-events: none;
z-index: 10;
}
/**
* 行/列选择条 + 左上角角块 + 移动拖拽视觉（蓝线 indicator + 跟随光标的卡片）
*
* 列选择条：紧贴表格上边线，宽度由 inline style 设为表格 totalWidth，避免被 content min-width:100% 撑大。
* 行选择条：通过 React Portal 挂到 .sc-table-row-selector-host（content 外），
* 不受 content transform 影响；host 用 left:-offset 定位，视觉锚定在 content 视觉左沿外 12px，
* offset 随滚动同步、撞到 .sc-editor 左内沿就钳住。
*/
/* ─── 列选择条（表格上方） ─── */
/* 容器 left/width 由 controller 按 geometry.colDividers 实测值通过 inline style 写入，
确保覆盖范围严格贴齐表格的可视左右边沿；背景色与表格边线同色，
让 cell 之间的 1px 间隙视觉上等同于表格列边线向上的延伸。 */
.sc-table-col-selector {
position: absolute;
top: -12px;
height: 12px;
z-index: 2;
pointer-events: auto;
-webkit-user-select: none;
user-select: none;
background-color: var(--sc-table-selector-bg);
}
.sc-table-col-selector-cell {
position: absolute;
height: 100%;
border-radius: 0;
background-color: var(--sc-table-selector-bg);
cursor: pointer;
transition: background-color 0.15s ease;
}
.sc-table-col-selector-cell.is-active {
background-color: var(--sc-table-selector-active-bg);
}
.sc-table-col-selector-cell.is-selected {
background-color: var(--sc-table-selector-selected-bg);
}
.sc-table-col-selector-cell.is-selected:hover {
background-color: var(--sc-table-selector-selected-hover-bg);
}
/* ─── 行选择条（表格左侧） ─── */
/*
* host 兼两职：
* 1) 行选择条 portal 容器 —— 承载 offset 定位（left = -offset），
* 子 row-selector 只需 left:0 即落在正确竖带，无需自身 transform。
* 2) 左侧 hover 保持捕获层 —— 撑满表格高度、pointer-events:auto，
* 覆盖 row-selector 所在的 12px 竖带。即使表格未聚焦（row-selector 未渲染），
* 鼠标移到此竖带（cell 子 block handle 向左偏移的落点区）也能保持 hover。
* hover 保持逻辑绑在此元素的 mouseenter/leave 上。
*
* offset 随横向滚动/贴边钳制动态变化（--sc-table-row-selector-offset，由 wrapper inline 写入）。
* z-index: 0 使其低于 .sc-table-content（z-index:1）；水平上位于 wrapper 左沿外，二者不重叠。
*/
.sc-table-row-selector-host {
position: absolute;
top: 0;
bottom: 0;
left: calc(-1 * var(--sc-table-row-selector-offset, 12px));
width: 12px;
pointer-events: auto;
z-index: 0;
}
/* 容器 top/height 由 controller 按 geometry.rowDividers 实测值通过 inline style 写入，
确保覆盖范围严格贴齐表格的可视上下边沿；背景色与表格边线同色，
让 cell 之间的 1px 间隙视觉上等同于表格行边线向左的延伸。 */
.sc-table-row-selector {
position: absolute;
left: 0;
width: 12px;
z-index: 2;
pointer-events: auto;
-webkit-user-select: none;
user-select: none;
background-color: var(--sc-table-selector-bg);
}
.sc-table-row-selector::before {
content: '';
position: absolute;
top: -12px;
left: 0;
width: 100%;
height: 12px;
background-color: var(--sc-table-selector-bg);
}
.sc-table-row-selector-cell {
position: absolute;
width: 100%;
border-radius: 0;
background-color: var(--sc-table-selector-bg);
cursor: pointer;
transition: background-color 0.15s ease;
}
.sc-table-row-selector-cell.is-active {
background-color: var(--sc-table-selector-active-bg);
}
.sc-table-row-selector-cell.is-selected {
background-color: var(--sc-table-selector-selected-bg);
}
.sc-table-row-selector-cell.is-selected:hover {
background-color: var(--sc-table-selector-selected-hover-bg);
}
/* ─── 移动拖拽 indicator：蓝色细线，标示 drop 位置 ─── */
.sc-table-move-indicator {
position: absolute;
z-index: 10;
pointer-events: none;
}
.sc-table-move-indicator--col {
width: 2px;
margin-left: -1px;
background-color: var(--sc-primary, #1677ff);
}
.sc-table-move-indicator--row {
height: 2px;
margin-top: -1px;
background-color: var(--sc-primary, #1677ff);
}
/* ─── 拖拽预览卡片（portal 到 body） ─── */
/* grabbing-layer：覆盖全屏，统一光标 grabbing 形态；与全局 popup 同级 */
.sc-table-drag-preview-grabbing-layer {
position: fixed;
inset: 0;
pointer-events: none;
cursor: -webkit-grabbing;
cursor: grabbing;
z-index: 9999;
}
.sc-table-drag-preview-card {
position: fixed;
display: flex;
pointer-events: none;
font-size: 13px;
color: var(--sc-text-default, #333);
}
.sc-table-drag-preview-card.is-col {
flex-direction: column;
}
.sc-table-drag-preview-card.is-row {
flex-direction: row;
}
.sc-table-drag-preview-card .sc-table-drag-preview-header {
background: var(--sc-color-text-tertiary, #888);
flex: 0 0 auto;
}
.sc-table-drag-preview-card.is-col .sc-table-drag-preview-header {
height: 12px;
width: 100%;
border-radius: 4px 4px 0 0;
}
.sc-table-drag-preview-card.is-row .sc-table-drag-preview-header {
width: 12px;
height: 100%;
border-radius: 4px 0 0 4px;
}
.sc-table-drag-preview-card .sc-table-drag-preview-body {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
background: var(--sc-ui-surface, #fff);
border: 1px solid var(--sc-color-border, #e0e0e0);
opacity: 0.92;
box-shadow: var(--sc-ui-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.08));
}
.sc-table-drag-preview-card.is-col .sc-table-drag-preview-body {
border-top: none;
border-radius: 0 0 4px 4px;
}
.sc-table-drag-preview-card.is-row .sc-table-drag-preview-body {
border-left: none;
border-radius: 0 4px 4px 0;
}
/* ─── 移动端：选择条是结构操作区，禁止浏览器滚动接管 ─── */
/* 行/列选择条 cell 是「移动行列」「扩展选区」的拖拽入口。默认 touch-action 下，
触摸移动会被浏览器接管为滚动并派发 pointercancel，导致拖拽中断、页面/表格
随之滚动（拖拽行选择条纵向移动 → 页面滚动；拖拽列选择条 → 表格横向滚动）。
声明 none 让 pointermove 持续派发，拖拽全程由 JS 处理（含边缘自动滚动）。
tap 点击选中行列不受影响：touch-action 只作用于滚动/缩放手势。 */
[data-sc-platform-group='mobile'] .sc-table-row-selector-cell,
[data-sc-platform-group='mobile'] .sc-table-col-selector-cell {
touch-action: none;
}
/**
* 会话级几何缩放（--sc-view-zoom）下的表格控件补偿。
*
* 与 --sc-font-scale（排版字号+间距）正交。宿主对 .sc-page（或退回的
* .sc-editor-content）写 CSS zoom 时，必须在同一节点同步 --sc-view-zoom。
*
* 控件层用 getBoundingClientRect 写 inline 坐标，该值已含父级 CSS zoom；
* 控件又画在被 zoom 的树里，定位会被乘两次。只抵消控件层自身。
*
* 不要给 .sc-table-wrapper / 反向 zoom：横向滚动溢出判断拿 table
* 宽度比 block clientWidth，改 layout 宽度会在缩小后卸掉滚动条。
*
* 行选择条打在 portal host 上——host 的负 left 会被 CSS zoom 一起放大，
* 右缘仍贴表左边。不要再把 left/top 除一遍 --sc-view-zoom。
*
* 滚动条高度/间距在 layout.less 里用同一变量补偿，不用 zoom（全宽条会横向溢出）。
*/
.sc-block-menu-handle,
.sc-table-col-selector,
.sc-table-col-plus-zone,
.sc-table-col-hover-line,
.sc-table-col-resize-line,
.sc-table-row-hover-line,
.sc-table-row-resize-line,
.sc-table-col-snap-line,
.sc-table-col-resize-handle,
.sc-table-move-indicator,
.sc-table-row-selector-host {
zoom: calc(1 / var(--sc-view-zoom, 1));
}
.sc-block-to_do {
/*
* checkbox 按钮：扩大到整个 marker 区域（24x24），保证足够的点击 hot zone。
* 视觉 icon 仍是 16x16，hover/勾选态作用于内部 icon。
*/
/* --sc-todo-checkbox-border-color: 未勾选态边框色，默认 --sc-divider-default */
}
.sc-block-to_do .sc-block-text-content.is-checked {
text-decoration: line-through;
opacity: 0.5;
}
.sc-block-to_do .sc-to_do-checkbox {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
color: inherit;
}
.sc-block-to_do .sc-to_do-checkbox:hover .sc-to_do-checkbox-icon {
background-color: var(--sc-ui-hover);
}
.sc-block-to_do .sc-to_do-checkbox:hover .sc-to_do-checkbox-icon.is-checked {
background-color: var(--sc-ui-primary-hover);
}
.sc-block-to_do .sc-to_do-checkbox-icon {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
box-sizing: border-box;
border: 1px solid var(--sc-todo-checkbox-border-color, var(--sc-divider-default));
border-radius: var(--sc-todo-checkbox-radius);
}
.sc-block-to_do .sc-to_do-checkbox-icon.is-checked {
background-color: var(--sc-ui-primary);
border-color: transparent;
opacity: 0.5;
}
.sc-block-toggle {
/*
* 让 marker 与标题同一行（参考 list 块）；
* 默认 .sc-block-content 不是 flex，这里需要显式设置。
*/
/*
* 展开但无子节点时的占位提示。外层复用 .sc-block-children[data-layout='indented']
* 以继承统一缩进，这里自身只需按钮样式重置。
*/
}
.sc-block-toggle > .sc-block-content {
display: flex;
align-items: flex-start;
}
.sc-block-toggle > .sc-block-content > .sc-block-marker {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: calc(1lh);
margin-right: 2px;
}
@supports not (height: 1lh) {
.sc-block-toggle > .sc-block-content > .sc-block-marker {
height: calc(var(--sc-content-line-height) * 1em);
}
}
.sc-block-toggle > .sc-block-content > .sc-block-text-content {
flex: 1;
min-width: 0;
}
.sc-block-toggle .sc-list-marker[data-kind='toggle'] {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
padding: 0;
background: transparent;
border: none;
color: var(--sc-text-tertiary, #8a8f8d);
cursor: pointer;
transition: transform 0.15s ease-out;
transform: rotate(0deg);
}
.sc-block-toggle .sc-list-marker[data-kind='toggle'].is-expanded {
transform: rotate(90deg);
}
.sc-block-toggle .sc-list-marker[data-kind='toggle']:hover {
color: var(--sc-text-primary, #222);
}
.sc-block-toggle .sc-block-toggle__empty {
display: block;
width: 100%;
padding: 2px 0;
background: transparent;
border: none;
color: var(--sc-ui-text-muted, rgba(0, 0, 0, 0.45));
text-align: left;
font: inherit;
cursor: text;
-webkit-user-select: none;
user-select: none;
}
.sc-emoji-menu-portal {
background: var(--sc-ui-surface);
border: 1px solid var(--sc-ui-surface-border);
border-radius: 8px;
box-shadow: var(--sc-ui-surface-shadow-1);
overflow: hidden;
height: 420px;
}
/* 文件拖拽视觉反馈样式
----------------------------------------------------------------
蓝色插入线（before / after）由 block 拖拽的 DropIndicator 组件 +
drag.less 中的 .sc-drop-indicator 类提供，本文件仅保留 badge 样式。
---------------------------------------------------------------- */
/* 浮窗提示 badge：白色磨砂背景 + 圆角 + 阴影 + 绿色图标 */
.sc-file-drop-indicator-badge {
z-index: 10000;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 6px;
background: color-mix(in srgb, var(--sc-ui-surface, #fff) 92%, transparent);
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
box-shadow: var(--sc-ui-surface-shadow-1, 0 4px 12px rgba(0, 0, 0, 0.08));
border: 1px solid var(--sc-ui-surface-border, rgba(0, 0, 0, 0.08));
font-size: 13px;
font-weight: 500;
line-height: 20px;
color: var(--sc-ui-text, #1f2329);
white-space: nowrap;
-webkit-user-select: none;
user-select: none;
pointer-events: none;
}
.sc-file-drop-indicator-icon {
color: var(--sc-text-green, #45b076);
flex: 0 0 auto;
}
/* 全文搜索面板：Notion 风格右上角浮层 */
:where([data-sc-theme='light']) {
--sc-editor-bg: #fff;
--sc-color-selection: rgba(35, 131, 226, 0.28);
--sc-inline-code-bg: #f1f1ef;
--sc-table-selection-bg: rgba(22, 119, 255, 0.08);
}
:root {
--sc-embed-selected-outline: 1px solid var(--sc-ui-primary);
--sc-embed-selected-outline-offset: -1px;
}
:where([data-sc-theme='dark']) {
--sc-editor-bg: #131414;
--sc-color-selection: rgba(78, 168, 246, 0.32);
--sc-inline-code-bg: #373737;
--sc-table-selection-bg: rgba(22, 119, 255, 0.08);
}
:root {
--sc-text-default: #1f1f1f;
--sc-text-grey: #858585;
--sc-text-blue: #2972f4;
--sc-text-sky_blue: #00a3f5;
--sc-text-green: #45b076;
--sc-text-yellow: #f5c400;
--sc-text-orange: #f88825;
--sc-text-red: #de3c36;
--sc-text-rose_red: #dd4097;
--sc-text-purple: #9a38d7;
--sc-text-code: #d34097;
--sc-text-reminder: #e07800;
}
:root[data-sc-color-scheme='dark'] {
--sc-text-default: #ededed;
--sc-text-grey: #7b7b7b;
--sc-text-blue: #4ea8f6;
--sc-text-sky_blue: #25b8f7;
--sc-text-green: #72c092;
--sc-text-yellow: #f7d425;
--sc-text-orange: #f9a24a;
--sc-text-red: #e5645a;
--sc-text-rose_red: #e464a6;
--sc-text-purple: #b15cdf;
--sc-text-code: #e464a6;
--sc-text-reminder: #e69223;
}
:root {
--sc-bg-default: transparent;
--sc-bg-grey_background: #ebebeb;
--sc-bg-light_grey_background: #f3f5f7;
--sc-bg-dark_background: #dcdfe4;
--sc-bg-light_blue_background: #e5efff;
--sc-bg-blue_background: #c7dcff;
--sc-bg-light_sky_blue_background: #e5f6ff;
--sc-bg-sky_blue_background: #c7ecff;
--sc-bg-light_green_background: #eafaf1;
--sc-bg-green_background: #ace2c5;
--sc-bg-light_yellow_background: #fff9e3;
--sc-bg-yellow_background: #ffeead;
--sc-bg-light_orange_background: #fff3eb;
--sc-bg-orange_background: #ffdcc4;
--sc-bg-light_red_background: #ffe9e8;
--sc-bg-red_background: #ffc9c7;
--sc-bg-light_rose_red_background: #ffecf4;
--sc-bg-rose_red_background: #ffc7e2;
--sc-bg-light_purple_background: #fdebff;
--sc-bg-purple_background: #f2c7ff;
}
:root[data-sc-color-scheme='dark'] {
--sc-bg-default: transparent;
--sc-bg-grey_background: #3a3a3a;
--sc-bg-light_grey_background: #2d2d2d;
--sc-bg-dark_background: #4a4a4a;
--sc-bg-light_blue_background: #3d5c87;
--sc-bg-blue_background: #223b6c;
--sc-bg-light_sky_blue_background: #285781;
--sc-bg-sky_blue_background: #14486e;
--sc-bg-light_green_background: #17392b;
--sc-bg-green_background: #1b523a;
--sc-bg-light_yellow_background: #3e340f;
--sc-bg-yellow_background: #5b4a0c;
--sc-bg-light_orange_background: #422718;
--sc-bg-orange_background: #62351c;
--sc-bg-light_red_background: #4a2022;
--sc-bg-red_background: #6f282b;
--sc-bg-light_rose_red_background: #4a1f38;
--sc-bg-rose_red_background: #6f2750;
--sc-bg-light_purple_background: #3e204c;
--sc-bg-purple_background: #5b2871;
}
:root {
--sc-border-default: transparent;
--sc-border-grey: #80868f;
--sc-border-blue: #b0cdff;
--sc-border-sky_blue: #96deee;
--sc-border-green: #a8e0c2;
--sc-border-yellow: #f9e38b;
--sc-border-orange: #ffba85;
--sc-border-red: #ffa6a3;
--sc-border-rose_red: #ffaeda;
--sc-border-purple: #e7b4ff;
}
:root[data-sc-color-scheme='dark'] {
--sc-border-default: transparent;
--sc-border-grey: #5b5c5c;
--sc-border-blue: #2f4a88;
--sc-border-sky_blue: #2b6c81;
--sc-border-green: #317c58;
--sc-border-yellow: #866c25;
--sc-border-orange: #884925;
--sc-border-red: #882c30;
--sc-border-rose_red: #882f66;
--sc-border-purple: #652d88;
}
:root {
--sc-divider-default: rgba(0, 0, 0, 0.12);
--sc-divider-black_divider: #000000;
--sc-divider-grey_divider: #858585;
--sc-divider-light_grey_divider: #dcdfe4;
--sc-divider-blue_divider: #2972f4;
--sc-divider-light_blue_divider: #b0cdff;
--sc-divider-table_blue_divider: #66b7fc;
--sc-divider-sky_blue_divider: #00a3f5;
--sc-divider-light_sky_blue_divider: #96deee;
--sc-divider-green_divider: #00b371;
--sc-divider-light_green_divider: #9ce4c3;
--sc-divider-yellow_divider: #fec100;
--sc-divider-light_yellow_divider: #ffeda5;
--sc-divider-orange_divider: #ff8000;
--sc-divider-light_orange_divider: #ffdac1;
--sc-divider-red_divider: #f22329;
--sc-divider-light_red_divider: #ffc6c5;
--sc-divider-rose_red_divider: #dd4097;
--sc-divider-light_rose_red_divider: #ffaeda;
--sc-divider-purple_divider: #a72edf;
--sc-divider-light_purple_divider: #fac5ff;
}
:root[data-sc-color-scheme='dark'] {
--sc-divider-default: #ededed;
--sc-divider-black_divider: #41444a;
--sc-divider-grey_divider: #7b7b7b;
--sc-divider-light_grey_divider: #5b5c5c;
--sc-divider-blue_divider: #4ea8f6;
--sc-divider-light_blue_divider: #2f4a88;
--sc-divider-table_blue_divider: #205da4;
--sc-divider-sky_blue_divider: #25b8f7;
--sc-divider-light_sky_blue_divider: #2b6c81;
--sc-divider-green_divider: #72c092;
--sc-divider-light_green_divider: #317c58;
--sc-divider-yellow_divider: #f7d425;
--sc-divider-light_yellow_divider: #866c25;
--sc-divider-orange_divider: #f9a24a;
--sc-divider-light_orange_divider: #884925;
--sc-divider-red_divider: #e5645a;
--sc-divider-light_red_divider: #882c30;
--sc-divider-rose_red_divider: #e464a6;
--sc-divider-light_rose_red_divider: #882f66;
--sc-divider-purple_divider: #b15cdf;
--sc-divider-light_purple_divider: #652d88;
}
:where([data-sc-theme]) {
--sc-table-selector-bg: var(--sc-color-border, #e0e0e0);
--sc-table-selector-active-bg: var(--sc-color-text-tertiary, #aaa);
--sc-table-selector-selected-bg: var(--sc-primary, #1677ff);
--sc-table-selector-selected-hover-bg: var(--sc-primary-hover, #4096ff);
--sc-table-plus-btn-hover-bg: var(--sc-primary, #1677ff);
--sc-table-background: var(--sc-editor-bg);
--sc-quote-bg: transparent;
--sc-quote-text-color: var(--sc-text-grey);
--sc-quote-border-color: var(--sc-ui-primary);
--sc-menu-handle-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
--sc-code-block-bg: var(--sc-bg-grey_background);
--sc-code-block-border: 1px solid var(--sc-ui-border, rgba(0, 0, 0, 0.08));
--sc-resizer-handle-color: #3370ff;
--sc-link-color: var(--sc-ui-primary);
--sc-link-color-hover: var(--sc-ui-primary-hover);
--sc-heading-1-color: inherit;
--sc-heading-2-color: inherit;
--sc-heading-3-color: inherit;
--sc-heading-4-color: inherit;
--sc-heading-5-color: inherit;
--sc-heading-6-color: inherit;
}
:where([data-sc-theme]) {
--sc-editor-padding: calc(16px * var(--sc-font-scale, 1));
--sc-editor-padding-top: var(--sc-editor-padding);
--sc-editor-padding-right: var(--sc-editor-padding);
--sc-editor-padding-bottom: var(--sc-editor-padding);
--sc-editor-padding-left: var(--sc-editor-padding);
--sc-block-gap: calc(8px * var(--sc-font-scale, 1));
--sc-block-gap-heading-before: calc(28px * var(--sc-font-scale, 1));
--sc-block-gap-heading-after: calc(8px * var(--sc-font-scale, 1));
--sc-block-gap-media: calc(12px * var(--sc-font-scale, 1));
--sc-block-gap-table-before: calc(20px * var(--sc-font-scale, 1));
--sc-block-gap-table-after: calc(20px * var(--sc-font-scale, 1));
--sc-block-gap-separator: calc(4px * var(--sc-font-scale, 1));
--sc-block-gap-container: calc(12px * var(--sc-font-scale, 1));
--sc-block-gap-inner: calc(4px * var(--sc-font-scale, 1));
--sc-block-indent: calc(24px * var(--sc-font-scale, 1));
--sc-block-padding-x: calc(16px * var(--sc-font-scale, 1));
--sc-block-padding-y: calc(12px * var(--sc-font-scale, 1));
--sc-column-gap: calc(12px * var(--sc-font-scale, 1));
--sc-column-radius: 12px;
--sc-column-hover-bg: var(--sc-ui-hover, #f7f7f7);
--sc-block-radius: 4px;
--sc-image-radius: 10px;
--sc-table-selector-bg: var(--sc-color-border, #e0e0e0);
--sc-table-selector-active-bg: var(--sc-color-text-tertiary, #aaa);
--sc-table-selector-selected-bg: var(--sc-primary, #1677ff);
--sc-table-selector-selected-hover-bg: var(--sc-primary-hover, #4096ff);
--sc-table-plus-btn-hover-bg: var(--sc-primary, #1677ff);
--sc-quote-border-width: 2px;
--sc-table-cell-padding: calc(8px * var(--sc-font-scale, 1));
--sc-divider-padding: calc(12px * var(--sc-font-scale, 1));
--sc-inline-code-border-radius: 2px;
--sc-inline-code-padding: 0.125em 0.3em;
--sc-quote-border-radius: 0px;
--sc-quote-padding: var(--sc-block-padding-y) var(--sc-block-padding-x);
--sc-todo-checkbox-radius: 6px;
--sc-menu-handle-radius: var(--sc-ui-radius-lg);
--sc-code-block-radius: 10px;
--sc-code-block-padding-block: calc(10px * var(--sc-font-scale, 1));
--sc-code-block-padding-inline-right: calc(16px * var(--sc-font-scale, 1));
--sc-code-block-padding-inline-left: calc(44px * var(--sc-font-scale, 1));
--sc-code-line-number-inset: calc(10px * var(--sc-font-scale, 1));
--sc-callout-radius: 10px;
}
/**
* 浮动菜单专属 Token（--sc-menu-*）
*
* 面向「划词菜单 / 代码块菜单 / 图片菜单 / block 把手 / 表格操作菜单」这 5 类浮层，
* 抽出一套统一、可被外部覆盖的视觉变量，数值对齐 ardot 设计稿 toolbar-editor 组件规范。
*
* 设计原则：
* 1. 颜色类默认回退到 UI kit 的 --sc-ui-*，因此 light/dark 自动跟随，无需在此重复声明暗色值。
* 2. 尺寸类（icon-size / font-size）只暴露「最终尺寸」变量，外部可用 calc() 按系统字号等级做乘法覆盖，
* 例如：--sc-menu-font-size: calc(var(--host-font-scale, 1) * 14px);
* 3. 声明在 :root（而非 :where([data-sc-theme])）：Radix Popover / DropdownMenu 通过 Portal 渲染到
* ，需保证 Portal 内的菜单内容也能继承到这些变量。
*/
:root {
/* ── 颜色（统一，可外部覆盖；默认回退 --sc-ui-*，暗色自动跟随） ── */
/* 操作 icon 统一颜色。设计稿为 text/primary（≈ rgba(0,0,0,.9)），故映射到 --sc-ui-text。 */
--sc-menu-icon-color: var(--sc-ui-text, #1f1f1f);
/* icon / 项选中态（主题主色蓝） */
--sc-menu-icon-color-active: var(--sc-ui-primary, #2972f4);
/* 菜单项 check 符号颜色（turn into / 对齐 / 颜色等选中标记），默认跟随主色，可外部覆盖 */
--sc-menu-check-color: var(--sc-ui-primary, #2972f4);
/* 菜单内主文字颜色 */
--sc-menu-text-color: var(--sc-ui-text, #1f1f1f);
/* 菜单内次级/说明文字颜色 */
--sc-menu-text-color-muted: var(--sc-ui-text-muted, rgba(0, 0, 0, 0.45));
/* ── 尺寸（只暴露最终值，外部可用 calc 乘法覆盖） ── */
/* 主操作 icon 尺寸（svg width/height） */
--sc-menu-icon-size: 16px;
/* 菜单内主标签字号 */
--sc-menu-font-size: 14px;
/* 菜单内次级字号（如代码语言名、分组小标题） */
--sc-menu-font-size-sm: 12px;
/* ── 容器视觉（对齐设计稿；颜色回退 --sc-ui-*，暗色自动跟随） ── */
--sc-menu-surface: var(--sc-ui-surface, #fff);
--sc-menu-border-color: var(--sc-ui-surface-border, rgba(0, 0, 0, 0.08));
--sc-menu-border-width: 1px;
--sc-menu-radius: 8px;
/* 下拉/命令/语言选择等面板圆角（与工具栏胶囊 --sc-menu-radius 分离，可单独覆盖） */
--sc-menu-panel-radius: 12px;
--sc-menu-padding-x: 4px;
--sc-menu-padding-y: 4px;
--sc-menu-gap: 4px;
/* ── 交互反馈 ── */
--sc-menu-hover-bg: var(--sc-ui-hover, rgba(0, 0, 0, 0.04));
--sc-menu-active-bg: var(--sc-ui-active, rgba(0, 0, 0, 0.08));
/* ── 分隔线 ── */
--sc-menu-separator-color: var(--sc-ui-separator, rgba(0, 0, 0, 0.06));
--sc-menu-separator-height: 16px;
/* ── 阴影：设计稿 wb/shadow/Popup-Medium 双层柔和投影（远层 4% + 近层 6%） ── */
--sc-menu-shadow: 0 6px 24px -4px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.06);
}
/* 暗色模式：仅阴影需加强（颜色类已通过 --sc-ui-* 回退自动跟随） */
:root[data-sc-color-scheme='dark'] {
--sc-menu-shadow: 0 6px 24px -4px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}
:where([data-sc-theme]) {
--sc-content-font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', Helvetica, Arial, 'Microsoft YaHei', '微软雅黑', '黑体', Heiti, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', 'Android Emoji', EmojiSymbols, TdocsUncommon;
--sc-content-font-size: calc(14px * var(--sc-font-scale, 1));
--sc-content-line-height: 1.6;
--sc-ui-font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', Helvetica, Arial, 'Microsoft YaHei', '微软雅黑', sans-serif;
--sc-ui-font-size: 12px;
--sc-ui-line-height: 1.4;
--sc-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas;
--sc-code-block-font-family: 'Source Code Pro', var(--sc-font-family-mono);
--sc-content-font-weight-bold: 600;
--sc-inline-code-font-size: 93%;
--sc-quote-line-height: 1.75;
--sc-link-text-decoration: none;
--sc-heading-1-font-weight: var(--sc-content-font-weight-bold);
--sc-heading-2-font-weight: var(--sc-content-font-weight-bold);
--sc-heading-3-font-weight: var(--sc-content-font-weight-bold);
--sc-heading-letter-spacing: normal;
--sc-heading-1-line-height: 1.4;
--sc-heading-2-line-height: 1.4;
--sc-heading-3-line-height: 1.4;
--sc-heading-4-line-height: 1.5;
--sc-heading-5-line-height: 1.5;
--sc-heading-6-line-height: 1.5;
--sc-page-title-line-height: 1.7;
}
:where([data-sc-font='simsun']) {
--sc-content-font-family: SimSun, 宋体, 'Songti SC', STSong, NSimSun, FangSong, serif;
}
:where([data-sc-font='kaiti']) {
--sc-content-font-family: KaiTi, STKaiTi, 'Kaiti SC', 华文楷体, KaiTi_GB2312, 楷体_GB2312;
}
:where([data-sc-layout='compact']) {
--sc-editor-padding: calc(12px * var(--sc-font-scale, 1));
--sc-block-gap: calc(4px * var(--sc-font-scale, 1));
--sc-block-gap-heading-before: calc(16px * var(--sc-font-scale, 1));
--sc-block-gap-heading-after: calc(4px * var(--sc-font-scale, 1));
--sc-block-gap-media: calc(8px * var(--sc-font-scale, 1));
--sc-block-gap-separator: calc(2px * var(--sc-font-scale, 1));
--sc-block-gap-container: calc(8px * var(--sc-font-scale, 1));
--sc-block-gap-inner: calc(2px * var(--sc-font-scale, 1));
--sc-block-padding-x: calc(12px * var(--sc-font-scale, 1));
--sc-block-padding-y: calc(8px * var(--sc-font-scale, 1));
--sc-block-menu-handle-gap: calc(20px * var(--sc-font-scale, 1));
--sc-column-gap: calc(12px * var(--sc-font-scale, 1));
}
:where([data-sc-layout='default']) {
--sc-editor-padding: calc(16px * var(--sc-font-scale, 1));
--sc-block-gap: calc(8px * var(--sc-font-scale, 1));
--sc-block-gap-heading-before: calc(28px * var(--sc-font-scale, 1));
--sc-block-gap-heading-after: calc(8px * var(--sc-font-scale, 1));
--sc-block-gap-media: calc(12px * var(--sc-font-scale, 1));
--sc-block-gap-separator: calc(4px * var(--sc-font-scale, 1));
--sc-block-gap-container: calc(12px * var(--sc-font-scale, 1));
--sc-block-gap-inner: calc(4px * var(--sc-font-scale, 1));
--sc-block-padding-x: calc(16px * var(--sc-font-scale, 1));
--sc-block-padding-y: calc(12px * var(--sc-font-scale, 1));
--sc-block-menu-handle-gap: calc(10px * var(--sc-font-scale, 1));
--sc-column-gap: calc(12px * var(--sc-font-scale, 1));
}
:where([data-sc-layout='loose']) {
--sc-editor-padding: calc(20px * var(--sc-font-scale, 1));
--sc-block-gap: calc(12px * var(--sc-font-scale, 1));
--sc-block-gap-heading-before: calc(32px * var(--sc-font-scale, 1));
--sc-block-gap-heading-after: calc(12px * var(--sc-font-scale, 1));
--sc-block-gap-media: calc(16px * var(--sc-font-scale, 1));
--sc-block-gap-separator: calc(8px * var(--sc-font-scale, 1));
--sc-block-gap-container: calc(16px * var(--sc-font-scale, 1));
--sc-block-gap-inner: calc(6px * var(--sc-font-scale, 1));
--sc-block-padding-x: calc(20px * var(--sc-font-scale, 1));
--sc-block-padding-y: calc(16px * var(--sc-font-scale, 1));
--sc-block-menu-handle-gap: calc(5px * var(--sc-font-scale, 1));
--sc-column-gap: calc(12px * var(--sc-font-scale, 1));
}
/** 小屏 通常可做移动端适配 **/
:where([data-sc-text-size='sm']) {
--sc-content-font-size: calc(14px * var(--sc-font-scale, 1));
--sc-page-title-font-size: calc(30px * var(--sc-font-scale, 1));
--sc-heading-1-font-size: calc(24px * var(--sc-font-scale, 1));
--sc-heading-2-font-size: calc(20px * var(--sc-font-scale, 1));
--sc-heading-3-font-size: calc(18px * var(--sc-font-scale, 1));
--sc-heading-4-font-size: calc(16px * var(--sc-font-scale, 1));
--sc-heading-5-font-size: calc(14px * var(--sc-font-scale, 1));
--sc-heading-6-font-size: calc(14px * var(--sc-font-scale, 1));
--sc-heading-1-line-height: 1.4;
--sc-heading-2-line-height: 1.4;
--sc-heading-3-line-height: 1.4;
--sc-heading-4-line-height: 1.5;
--sc-heading-5-line-height: 1.5;
--sc-heading-6-line-height: 1.5;
--sc-page-title-line-height: 1.7;
--sc-content-line-height: 1.5;
--sc-code-block-font-size: calc(12px * var(--sc-font-scale, 1));
}
:where([data-sc-text-size='md']) {
--sc-content-font-size: calc(16px * var(--sc-font-scale, 1));
--sc-page-title-font-size: calc(32px * var(--sc-font-scale, 1));
--sc-heading-1-font-size: calc(26px * var(--sc-font-scale, 1));
--sc-heading-2-font-size: calc(22px * var(--sc-font-scale, 1));
--sc-heading-3-font-size: calc(18px * var(--sc-font-scale, 1));
--sc-heading-4-font-size: calc(16px * var(--sc-font-scale, 1));
--sc-heading-5-font-size: calc(16px * var(--sc-font-scale, 1));
--sc-heading-6-font-size: calc(16px * var(--sc-font-scale, 1));
--sc-heading-1-line-height: 1.4;
--sc-heading-2-line-height: 1.4;
--sc-heading-3-line-height: 1.4;
--sc-heading-4-line-height: 1.5;
--sc-heading-5-line-height: 1.5;
--sc-heading-6-line-height: 1.5;
--sc-page-title-line-height: 1.7;
--sc-content-line-height: 1.7;
--sc-code-block-font-size: calc(14px * var(--sc-font-scale, 1));
}
:where([data-sc-text-size='lg']) {
--sc-content-font-size: calc(18px * var(--sc-font-scale, 1));
--sc-page-title-font-size: calc(40px * var(--sc-font-scale, 1));
--sc-heading-1-font-size: calc(30px * var(--sc-font-scale, 1));
--sc-heading-2-font-size: calc(25px * var(--sc-font-scale, 1));
--sc-heading-3-font-size: calc(22px * var(--sc-font-scale, 1));
--sc-heading-4-font-size: calc(20px * var(--sc-font-scale, 1));
--sc-heading-5-font-size: calc(18px * var(--sc-font-scale, 1));
--sc-heading-6-font-size: calc(18px * var(--sc-font-scale, 1));
--sc-heading-1-line-height: 1.4;
--sc-heading-2-line-height: 1.4;
--sc-heading-3-line-height: 1.4;
--sc-heading-4-line-height: 1.5;
--sc-heading-5-line-height: 1.5;
--sc-heading-6-line-height: 1.5;
--sc-page-title-line-height: 1.7;
--sc-content-line-height: 1.7;
--sc-code-block-font-size: calc(16px * var(--sc-font-scale, 1));
}
[data-sc-platform-group='mobile'][data-sc-text-size='sm'] {
--sc-page-title-font-size: calc(24px * var(--sc-font-scale, 1));
--sc-heading-1-font-size: calc(20px * var(--sc-font-scale, 1));
--sc-heading-2-font-size: calc(18px * var(--sc-font-scale, 1));
--sc-page-title-line-height: 1.5;
}
[data-sc-platform-group='mobile'][data-sc-text-size='md'] {
--sc-page-title-font-size: calc(26px * var(--sc-font-scale, 1));
--sc-heading-1-font-size: calc(22px * var(--sc-font-scale, 1));
--sc-heading-2-font-size: calc(20px * var(--sc-font-scale, 1));
--sc-page-title-line-height: 1.5;
}
[data-sc-platform-group='mobile'][data-sc-text-size='lg'] {
--sc-page-title-font-size: calc(34px * var(--sc-font-scale, 1));
--sc-heading-1-font-size: calc(26px * var(--sc-font-scale, 1));
--sc-heading-2-font-size: calc(23px * var(--sc-font-scale, 1));
--sc-page-title-line-height: 1.5;
}
.sc-editor {
position: relative;
/* overlay 的 absolute 定位参照系 */
background: var(--sc-editor-bg);
color: var(--sc-text-default);
padding: var(--sc-editor-padding-top) var(--sc-editor-padding-right) var(--sc-editor-padding-bottom) var(--sc-editor-padding-left);
-webkit-font-smooth: antialiased;
/* 表格 block 可向外延伸到 .sc-editor 内容沿，但不允许溢出到页面外
* 用 overflow-x: clip 而非 hidden，避免给子元素的 sticky/transform 创建 BFC */
overflow-x: clip;
}
/* containerScroll 模式：.sc-editor 自己作为滚动宿主
* - 自身 height:100% + overflow:hidden（不滚），让内部 .sc-editor-content 滚动
* - padding 由内层 .sc-editor-content 承担，避免外圈滚动条与 padding 错位
* - .sc-editor-overlay 是 .sc-editor 直接子元素，与内层平级，不参与滚动 → 浮层贴边角 */
.sc-editor.is-container-scroll {
height: 100%;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.sc-editor.is-container-scroll > .sc-editor-content {
position: relative;
/* .sc-editor-content-overlay 的 absolute 定位参照系 */
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: clip;
/* 预留纵向滚动条槽位：内容从不满一屏变为溢出时，经典滚动条不再挤窄正文。
* overlay 滚动条（macOS 默认）不占布局，本属性无额外占位。
* 不支持 scrollbar-gutter 的浏览器忽略该声明。 */
scrollbar-gutter: stable;
padding: var(--sc-editor-padding-top) var(--sc-editor-padding-right) var(--sc-editor-padding-bottom) var(--sc-editor-padding-left);
}
/* 评论按钮（24px 宽 + 4px gap = 28px）默认渲染在 page-body.right 外侧，
* 会被本容器的 overflow-x: clip 裁剪。
* 当评论 aside 未激活时（外部业务面板 / 无面板场景），
* 强制 padding-right ≥ 32px，让 page-body 自动让出按钮位，避免裁剪。
*
* - aside 激活时（.sc-comment-aside 非空）：本规则不生效，由 aside.less 接管 padding
* - 外部仍可用 --sc-editor-padding-right 覆盖（设 ≥ 32px 时不影响；< 32px 时被 max 兜底）
* --sc-comment-button-safe-padding 可让接入方调整这个最小预留宽度。 */
.sc-editor.is-container-scroll:not([data-sc-comment-aside-open]) > .sc-editor-content {
padding-right: max(var(--sc-editor-padding-right), var(--sc-comment-button-safe-padding, 32px));
}
.sc-editor-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: visible;
/* 允许工具栏等溢出编辑器边界 */
z-index: 100;
}
/* containerScroll 模式下位于 .sc-editor-content 内部的 overlay 容器。
* position: absolute; top: 0 相对于 .sc-editor-content（position: relative）定位。
* FloatingToolbar 通过 Portal 挂入此容器，坐标 = selRect - overlayRect，
* overlayRect.top 随滚动变为负数，差值自然等于选区在内容中的绝对位置，无需 scroll 监听。 */
.sc-editor-content-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
pointer-events: none;
overflow: visible;
z-index: 100;
}
.sc-ui {
font-family: var(--sc-ui-font-family);
font-size: var(--sc-ui-font-size);
line-height: var(--sc-ui-line-height);
}
/* ── Block Flash（注意力引导高亮） ────────────────────────────── */
/* scrollToBlock({ highlight: true }) 或 highlightBlock() 触发的临时高亮。
* 由 JS 添加类名 → 1.2s 后移除，transition 自动淡出。 */
.sc-block--flash {
background-color: var(--sc-ui-active);
transition: background-color 0.4s ease;
}
:where([data-sc-theme]) [data-text-color='default'] {
color: var(--sc-text-default);
}
:where([data-sc-theme]) [data-text-color='grey'] {
color: var(--sc-text-grey);
}
:where([data-sc-theme]) [data-text-color='blue'] {
color: var(--sc-text-blue);
}
:where([data-sc-theme]) [data-text-color='sky_blue'] {
color: var(--sc-text-sky_blue);
}
:where([data-sc-theme]) [data-text-color='green'] {
color: var(--sc-text-green);
}
:where([data-sc-theme]) [data-text-color='yellow'] {
color: var(--sc-text-yellow);
}
:where([data-sc-theme]) [data-text-color='orange'] {
color: var(--sc-text-orange);
}
:where([data-sc-theme]) [data-text-color='red'] {
color: var(--sc-text-red);
}
:where([data-sc-theme]) [data-text-color='rose_red'] {
color: var(--sc-text-rose_red);
}
:where([data-sc-theme]) [data-text-color='purple'] {
color: var(--sc-text-purple);
}
:where([data-sc-theme]) [data-text-color='code'] {
color: var(--sc-text-code);
}
:where([data-sc-theme]) [data-text-color='reminder'] {
color: var(--sc-text-reminder);
}
:where([data-sc-theme]) [data-bg-color='default'] {
background-color: var(--sc-bg-default);
}
:where([data-sc-theme]) [data-bg-color='grey_background'] {
background-color: var(--sc-bg-grey_background);
}
:where([data-sc-theme]) [data-bg-color='light_grey_background'] {
background-color: var(--sc-bg-light_grey_background);
}
:where([data-sc-theme]) [data-bg-color='dark_background'] {
background-color: var(--sc-bg-dark_background);
}
:where([data-sc-theme]) [data-bg-color='light_blue_background'] {
background-color: var(--sc-bg-light_blue_background);
}
:where([data-sc-theme]) [data-bg-color='blue_background'] {
background-color: var(--sc-bg-blue_background);
}
:where([data-sc-theme]) [data-bg-color='light_sky_blue_background'] {
background-color: var(--sc-bg-light_sky_blue_background);
}
:where([data-sc-theme]) [data-bg-color='sky_blue_background'] {
background-color: var(--sc-bg-sky_blue_background);
}
:where([data-sc-theme]) [data-bg-color='light_green_background'] {
background-color: var(--sc-bg-light_green_background);
}
:where([data-sc-theme]) [data-bg-color='green_background'] {
background-color: var(--sc-bg-green_background);
}
:where([data-sc-theme]) [data-bg-color='light_yellow_background'] {
background-color: var(--sc-bg-light_yellow_background);
}
:where([data-sc-theme]) [data-bg-color='yellow_background'] {
background-color: var(--sc-bg-yellow_background);
}
:where([data-sc-theme]) [data-bg-color='light_orange_background'] {
background-color: var(--sc-bg-light_orange_background);
}
:where([data-sc-theme]) [data-bg-color='orange_background'] {
background-color: var(--sc-bg-orange_background);
}
:where([data-sc-theme]) [data-bg-color='light_red_background'] {
background-color: var(--sc-bg-light_red_background);
}
:where([data-sc-theme]) [data-bg-color='red_background'] {
background-color: var(--sc-bg-red_background);
}
:where([data-sc-theme]) [data-bg-color='light_rose_red_background'] {
background-color: var(--sc-bg-light_rose_red_background);
}
:where([data-sc-theme]) [data-bg-color='rose_red_background'] {
background-color: var(--sc-bg-rose_red_background);
}
:where([data-sc-theme]) [data-bg-color='light_purple_background'] {
background-color: var(--sc-bg-light_purple_background);
}
:where([data-sc-theme]) [data-bg-color='purple_background'] {
background-color: var(--sc-bg-purple_background);
}
:where([data-sc-theme]) [data-border-color='default'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-default);
}
:where([data-sc-theme]) [data-border-color='grey'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-grey);
}
:where([data-sc-theme]) [data-border-color='blue'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-blue);
}
:where([data-sc-theme]) [data-border-color='sky_blue'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-sky_blue);
}
:where([data-sc-theme]) [data-border-color='green'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-green);
}
:where([data-sc-theme]) [data-border-color='yellow'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-yellow);
}
:where([data-sc-theme]) [data-border-color='orange'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-orange);
}
:where([data-sc-theme]) [data-border-color='red'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-red);
}
:where([data-sc-theme]) [data-border-color='rose_red'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-rose_red);
}
:where([data-sc-theme]) [data-border-color='purple'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-purple);
}
:where([data-sc-theme]) [data-divider-color='default'] {
border-color: var(--sc-divider-default);
}
:where([data-sc-theme]) [data-divider-color='black_divider'] {
border-color: var(--sc-divider-black_divider);
}
:where([data-sc-theme]) [data-divider-color='grey_divider'] {
border-color: var(--sc-divider-grey_divider);
}
:where([data-sc-theme]) [data-divider-color='light_grey_divider'] {
border-color: var(--sc-divider-light_grey_divider);
}
:where([data-sc-theme]) [data-divider-color='blue_divider'] {
border-color: var(--sc-divider-blue_divider);
}
:where([data-sc-theme]) [data-divider-color='light_blue_divider'] {
border-color: var(--sc-divider-light_blue_divider);
}
:where([data-sc-theme]) [data-divider-color='table_blue_divider'] {
border-color: var(--sc-divider-table_blue_divider);
}
:where([data-sc-theme]) [data-divider-color='sky_blue_divider'] {
border-color: var(--sc-divider-sky_blue_divider);
}
:where([data-sc-theme]) [data-divider-color='light_sky_blue_divider'] {
border-color: var(--sc-divider-light_sky_blue_divider);
}
:where([data-sc-theme]) [data-divider-color='green_divider'] {
border-color: var(--sc-divider-green_divider);
}
:where([data-sc-theme]) [data-divider-color='light_green_divider'] {
border-color: var(--sc-divider-light_green_divider);
}
:where([data-sc-theme]) [data-divider-color='yellow_divider'] {
border-color: var(--sc-divider-yellow_divider);
}
:where([data-sc-theme]) [data-divider-color='light_yellow_divider'] {
border-color: var(--sc-divider-light_yellow_divider);
}
:where([data-sc-theme]) [data-divider-color='orange_divider'] {
border-color: var(--sc-divider-orange_divider);
}
:where([data-sc-theme]) [data-divider-color='light_orange_divider'] {
border-color: var(--sc-divider-light_orange_divider);
}
:where([data-sc-theme]) [data-divider-color='red_divider'] {
border-color: var(--sc-divider-red_divider);
}
:where([data-sc-theme]) [data-divider-color='light_red_divider'] {
border-color: var(--sc-divider-light_red_divider);
}
:where([data-sc-theme]) [data-divider-color='rose_red_divider'] {
border-color: var(--sc-divider-rose_red_divider);
}
:where([data-sc-theme]) [data-divider-color='light_rose_red_divider'] {
border-color: var(--sc-divider-light_rose_red_divider);
}
:where([data-sc-theme]) [data-divider-color='purple_divider'] {
border-color: var(--sc-divider-purple_divider);
}
:where([data-sc-theme]) [data-divider-color='light_purple_divider'] {
border-color: var(--sc-divider-light_purple_divider);
}
.sc-block-text-content {
white-space: pre-wrap;
word-break: break-word;
outline: none;
/*
* 空标题占位符：当 leaf 容器为空时，显示 data-placeholder 内容。
* - pointer-events: none 避免拦截光标点击
* - user-select: none 避免选中占位符本身
* - 颜色使用现有的弱化文本色变量，保持主题一致
*/
}
.sc-block-text-content:empty::before {
content: ' ';
}
.sc-block-text-content[data-placeholder]:empty::before {
content: attr(data-placeholder);
color: var(--sc-ui-text-muted, rgba(0, 0, 0, 0.45));
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
.sc-mark-code {
font-family: var(--sc-font-family-mono);
}
.sc-mark-link {
color: var(--sc-link-color);
-webkit-text-decoration: var(--sc-link-text-decoration);
text-decoration: var(--sc-link-text-decoration);
cursor: pointer;
padding-inline: 4px;
padding-block: max(0px, calc((1lh - 1.25em) / 2));
border-radius: 4px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.sc-mark-link:hover {
background: var(--sc-ui-active);
}
.sc-mark-link > span[style] {
text-decoration: inherit;
}
.sc-block-text,
.sc-block-header1,
.sc-block-header2,
.sc-block-header3,
.sc-block-header4,
.sc-block-header4,
.sc-block-header5 {
text-align: left;
}
.sc-block-text[data-text-align='center'],
.sc-block-header1[data-text-align='center'],
.sc-block-header2[data-text-align='center'],
.sc-block-header3[data-text-align='center'],
.sc-block-header4[data-text-align='center'],
.sc-block-header4[data-text-align='center'],
.sc-block-header5[data-text-align='center'] {
text-align: center;
}
.sc-block-text[data-text-align='right'],
.sc-block-header1[data-text-align='right'],
.sc-block-header2[data-text-align='right'],
.sc-block-header3[data-text-align='right'],
.sc-block-header4[data-text-align='right'],
.sc-block-header4[data-text-align='right'],
.sc-block-header5[data-text-align='right'] {
text-align: right;
}
.sc-inline-code {
background-color: var(--sc-inline-code-bg);
border-radius: var(--sc-inline-code-border-radius);
font-size: var(--sc-inline-code-font-size);
padding: var(--sc-inline-code-padding);
font-family: var(--sc-font-family-mono);
vertical-align: 1px;
}
/* ── Inline Token 基础排版 ──────────────────────────────────── */
/* atom 外壳（contentEditable=false 的 span）：
确保行高与所在文本行一致，选中高亮不错位。 */
.sc-inline-token--atom {
display: inline-flex;
align-items: baseline;
line-height: inherit;
vertical-align: baseline;
}
.sc-block {
position: relative;
margin-top: var(--sc-block-gap);
margin-bottom: var(--sc-block-gap);
}
.sc-block.sc-block-header1,
.sc-block.sc-block-header2,
.sc-block.sc-block-header3,
.sc-block.sc-block-header4,
.sc-block.sc-block-header5,
.sc-block.sc-block-header6 {
margin-top: var(--sc-block-gap-heading-before);
margin-bottom: var(--sc-block-gap-heading-after);
}
.sc-block.sc-block-image,
.sc-block.sc-block-equation,
.sc-block.sc-block-simple_table,
.sc-block.sc-block-column_list {
margin-top: var(--sc-block-gap-media);
margin-bottom: var(--sc-block-gap-media);
}
.sc-block.sc-block-callout,
.sc-block.sc-block-quote,
.sc-block.sc-block-code {
margin-top: var(--sc-block-gap-container);
margin-bottom: var(--sc-block-gap-container);
}
.sc-block.sc-block-divider {
margin-top: var(--sc-block-gap-separator);
margin-bottom: var(--sc-block-gap-separator);
}
.sc-block.sc-block-column {
margin-top: 0;
margin-bottom: 0;
}
.sc-page-body > .sc-block-children > .sc-block:first-child {
margin-top: 0;
}
.sc-page-body > .sc-block-children > .sc-block:last-child {
margin-bottom: 0;
}
.sc-block-callout .sc-block-children > .sc-block,
.sc-block-column .sc-block-children > .sc-block {
margin-top: var(--sc-block-gap-inner);
margin-bottom: var(--sc-block-gap-inner);
}
/* 普通 block children 缩进 */
.sc-block-children[data-layout='indented'] {
padding-left: var(--sc-block-indent);
}
.sc-block.sc-block-header1 .sc-block-content {
font-size: var(--sc-heading-1-font-size);
line-height: var(--sc-heading-1-line-height);
color: var(--sc-heading-1-color);
font-weight: var(--sc-heading-1-font-weight);
letter-spacing: var(--sc-heading-letter-spacing);
}
.sc-block.sc-block-header2 .sc-block-content {
font-size: var(--sc-heading-2-font-size);
line-height: var(--sc-heading-2-line-height);
color: var(--sc-heading-2-color);
font-weight: var(--sc-heading-2-font-weight);
letter-spacing: var(--sc-heading-letter-spacing);
}
.sc-block.sc-block-header3 .sc-block-content {
font-size: var(--sc-heading-3-font-size);
line-height: var(--sc-heading-3-line-height);
color: var(--sc-heading-3-color);
font-weight: var(--sc-heading-3-font-weight);
letter-spacing: var(--sc-heading-letter-spacing);
}
.sc-block.sc-block-header4 .sc-block-content {
font-size: var(--sc-heading-4-font-size);
line-height: var(--sc-heading-4-line-height);
color: var(--sc-heading-4-color);
font-weight: var(--sc-heading-3-font-weight);
letter-spacing: var(--sc-heading-letter-spacing);
}
.sc-block.sc-block-header5 .sc-block-content {
font-size: var(--sc-heading-5-font-size);
line-height: var(--sc-heading-5-line-height);
color: var(--sc-heading-5-color);
font-weight: var(--sc-heading-3-font-weight);
letter-spacing: var(--sc-heading-letter-spacing);
}
.sc-block.sc-block-header6 .sc-block-content {
font-size: var(--sc-heading-6-font-size);
line-height: var(--sc-heading-6-line-height);
color: var(--sc-heading-6-color);
font-weight: var(--sc-heading-3-font-weight);
letter-spacing: var(--sc-heading-letter-spacing);
}
.sc-block-callout > .sc-block-content {
display: flex;
box-sizing: border-box;
padding: var(--sc-block-padding-y) var(--sc-block-padding-x);
border-radius: var(--sc-callout-radius);
}
.sc-block-callout .sc-block-marker {
width: 28px;
min-width: 28px;
min-height: 28px;
height: calc(1lh);
margin-right: 8px;
padding: 0;
border-radius: var(--sc-callout-radius);
display: flex;
align-items: center;
justify-content: center;
}
@supports not (height: 1lh) {
.sc-block-callout .sc-block-marker {
height: calc(var(--sc-content-line-height) * 1em);
}
}
.sc-block-callout .sc-callout-icon {
width: 100%;
height: 100%;
font-size: 20px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--sc-callout-radius);
}
.sc-block-bulleted_list > .sc-block-content,
.sc-block-numbered_list > .sc-block-content,
.sc-block-to_do > .sc-block-content {
display: flex;
}
.sc-block-bulleted_list > .sc-block-content > .sc-block-text-content,
.sc-block-numbered_list > .sc-block-content > .sc-block-text-content,
.sc-block-to_do > .sc-block-content > .sc-block-text-content {
flex: 1;
min-width: 0;
}
.sc-block-bulleted_list .sc-block-marker {
display: flex;
align-items: center;
min-width: 20px;
margin-right: 4px;
flex: 0 0 auto;
height: calc(1lh);
padding-left: 2px;
}
@supports not (height: 1lh) {
.sc-block-bulleted_list .sc-block-marker {
height: calc(var(--sc-content-line-height) * 1em);
}
}
.sc-block-numbered_list .sc-block-marker {
min-width: 20px;
margin-right: 4px;
flex: 0 0 auto;
height: calc(1lh);
padding-left: 2px;
}
@supports not (height: 1lh) {
.sc-block-numbered_list .sc-block-marker {
height: calc(var(--sc-content-line-height) * 1em);
}
}
.sc-block-to_do .sc-block-marker {
width: 20px;
margin-right: 8px;
height: calc(1lh);
display: flex;
align-items: center;
padding-left: 2px;
}
@supports not (height: 1lh) {
.sc-block-to_do .sc-block-marker {
height: calc(var(--sc-content-line-height) * 1em);
}
}
.sc-list-marker {
display: block;
}
.sc-list-marker[data-kind='bulleted_list'].sc-list-marker[data-style='solid_circle'] {
width: 6px;
height: 6px;
border-radius: 6px;
background: currentcolor;
}
.sc-list-marker[data-kind='bulleted_list'].sc-list-marker[data-style='solid_square'] {
width: 5px;
height: 5px;
background: currentcolor;
}
.sc-list-marker[data-kind='bulleted_list'].sc-list-marker[data-style='hollow_circle'] {
width: 6px;
height: 6px;
border-radius: 6px;
border: 1px solid currentcolor;
box-sizing: border-box;
}
.sc-block-column_list {
margin-inline: -8px;
}
.sc-block-column_list > .sc-block-content {
position: relative;
}
.sc-block-column_list > .sc-block-content > .sc-column-list__wrap {
position: relative;
padding-bottom: 4px;
}
.sc-block-column_list > .sc-block-content > .sc-column-list__wrap > .sc-block-children {
display: flex;
gap: var(--sc-column-gap);
}
.sc-block-column_list > .sc-block-content > .sc-column-list__wrap > .sc-block-children > .sc-block-column {
flex: none;
}
@media (max-width: 640px) {
.sc-block-column_list > .sc-block-content > .sc-column-list__wrap > .sc-block-children {
flex-direction: column;
gap: 0;
}
.sc-block-column_list > .sc-block-content > .sc-column-list__wrap > .sc-block-children > .sc-block-column {
flex: unset !important;
width: auto !important;
}
.sc-block-column_list > .sc-block-content > .sc-column-list__wrap > .sc-block-children > .sc-block-column:not(:last-child) {
margin-bottom: 4px;
}
.sc-block-column_list > .sc-block-content > .sc-column-list__wrap > .sc-block-children > .sc-block-column .sc-block-image img {
display: block;
margin-left: auto;
margin-right: auto;
}
}
.sc-block-column .sc-block-text > .sc-block-content,
.sc-block-column .sc-block-header1 > .sc-block-content,
.sc-block-column .sc-block-header2 > .sc-block-content,
.sc-block-column .sc-block-header3 > .sc-block-content,
.sc-block-column .sc-block-header4 > .sc-block-content,
.sc-block-column .sc-block-header5 > .sc-block-content,
.sc-block-column .sc-block-header6 > .sc-block-content,
.sc-block-column .sc-block-numbered_list > .sc-block-content,
.sc-block-column .sc-block-bulleted_list > .sc-block-content,
.sc-block-column .sc-block-to_do > .sc-block-content {
padding: 0 4px;
}
.sc-column-list__dividers-layer {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.sc-column-list__divider-slot {
position: absolute;
top: 0;
bottom: 0;
width: 0;
pointer-events: none;
}
.sc-column-divider {
position: absolute;
top: 0;
bottom: 0;
left: -9px;
width: 18px;
pointer-events: auto;
cursor: default;
-webkit-user-select: none;
user-select: none;
display: flex;
justify-content: center;
align-items: stretch;
z-index: 1;
}
.sc-column-divider > .sc-column-divider__line {
width: 2px;
height: 100%;
background: transparent;
transition: background-color 0.1s ease;
}
.sc-column-divider.is-hover > .sc-column-divider__line {
background: color-mix(in srgb, var(--sc-ui-primary) 45%, transparent);
}
.sc-column-divider.is-dragging > .sc-column-divider__line {
background: var(--sc-ui-primary);
}
.sc-column-divider.sc-column-divider--resizable {
cursor: col-resize;
}
.sc-column-divider__add-wrap {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
transform: translate(-50%, -50%) scale(0.8);
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.12s ease, transform 0.12s ease;
}
.sc-column-divider.is-hover > .sc-column-divider__add-wrap {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
pointer-events: auto;
}
.sc-column-divider__add-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: color-mix(in srgb, var(--sc-ui-primary) 45%, transparent);
pointer-events: none;
}
.sc-column-divider__add {
position: relative;
width: 18px;
height: 18px;
border-radius: 50%;
border: none;
padding: 0;
background: var(--sc-ui-primary);
color: var(--sc-ui-text-on-primary, #fff);
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.sc-column-divider__add::before,
.sc-column-divider__add::after {
content: '';
position: absolute;
background-color: currentColor;
border-radius: 1px;
}
.sc-column-divider__add::before {
top: 50%;
left: 50%;
width: 10px;
height: 2px;
margin-left: -5px;
margin-top: -1px;
}
.sc-column-divider__add::after {
top: 50%;
left: 50%;
width: 2px;
height: 10px;
margin-left: -1px;
margin-top: -5px;
}
.sc-column-divider__add:hover {
background: var(--sc-ui-primary);
}
.sc-column-list__badges-layer {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
}
.sc-column-list__badge {
position: absolute;
top: 0;
width: 30px;
height: 16px;
border-radius: 4px;
background: var(--sc-ui-text-muted);
color: var(--sc-ui-text-on-primary, #fff);
font-size: 10px;
line-height: 11px;
text-align: center;
font-weight: 400;
white-space: nowrap;
padding: 2px 4px;
}
.sc-column-list__equal-btn {
position: absolute;
top: 0;
right: calc(-28px - var(--sc-column-gap));
width: 28px;
height: 28px;
border-radius: var(--sc-ui-radius-sm);
border: 1px solid var(--sc-ui-border, rgba(0, 0, 0, 0.08));
background: var(--sc-ui-surface, #fff);
color: var(--sc-ui-text-muted, rgba(0, 0, 0, 0.55));
padding: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 3;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.sc-column-list__equal-btn > svg {
display: block;
}
.sc-column-list__equal-btn:hover {
background: var(--sc-ui-hover);
color: var(--sc-ui-primary);
}
.sc-block-column {
position: relative;
}
.sc-block-column::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
border-radius: var(--sc-column-radius);
background: var(--sc-column-hover-bg);
pointer-events: none;
opacity: 0;
transition: opacity 0.25s ease;
}
.sc-block-column > .sc-block-content {
position: relative;
z-index: 1;
}
.sc-block-column:has(.sc-block-menu-handle) > .sc-block-content {
z-index: 3;
}
.sc-column-list__wrap:hover .sc-block-column::before,
.sc-block-column.is-selection-active::before {
opacity: 1;
}
.sc-editor.sc-column-divider-dragging {
cursor: col-resize;
-webkit-user-select: none;
user-select: none;
}
/*
* Code block: 单层 Decoration 方案。
*
* 编辑层通过 InlineDecoration 直接着色（span + inline style），
* 不再需要独立的高亮层。
*/
/* 内置代码字体不使用 local()，保证不同设备加载同一版本。 */
@font-face {
font-family: 'Source Code Pro';
src: url(../image/SourceCodePro-Regular.ttf.bf82ff7b.woff2) format('woff2');
font-style: normal;
font-weight: 400;
font-display: swap;
unicode-range: U+20-7e, U+a0-ff, U+131, U+152-153, U+2bb-2bc, U+2c6, U+2da, U+2dc, U+300-301, U+303-304, U+308-309, U+323, U+329, U+2013-2014, U+2018-201a, U+201c-201e, U+2022, U+2026, U+2032-2033, U+2039-203a, U+2044, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff;
}
@font-face {
font-family: 'Source Code Pro';
src: url(../image/SourceCodePro-It.ttf.21bfb13a.woff2) format('woff2');
font-style: italic;
font-weight: 400;
font-display: swap;
unicode-range: U+20-7e, U+a0-ff, U+131, U+152-153, U+2bb-2bc, U+2c6, U+2da, U+2dc, U+300-301, U+303-304, U+308-309, U+323, U+329, U+2013-2014, U+2018-201a, U+201c-201e, U+2022, U+2026, U+2032-2033, U+2039-203a, U+2044, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff;
}
@font-face {
font-family: 'Source Code Pro';
src: url(../image/SourceCodePro-Bold.ttf.1a6edaa3.woff2) format('woff2');
font-style: normal;
font-weight: 700;
font-display: swap;
unicode-range: U+20-7e, U+a0-ff, U+131, U+152-153, U+2bb-2bc, U+2c6, U+2da, U+2dc, U+300-301, U+303-304, U+308-309, U+323, U+329, U+2013-2014, U+2018-201a, U+201c-201e, U+2022, U+2026, U+2032-2033, U+2039-203a, U+2044, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff;
}
@font-face {
font-family: 'Source Code Pro';
src: url(../image/SourceCodePro-BoldIt.ttf.1fd3be99.woff2) format('woff2');
font-style: italic;
font-weight: 700;
font-display: swap;
unicode-range: U+20-7e, U+a0-ff, U+131, U+152-153, U+2bb-2bc, U+2c6, U+2da, U+2dc, U+300-301, U+303-304, U+308-309, U+323, U+329, U+2013-2014, U+2018-201a, U+201c-201e, U+2022, U+2026, U+2032-2033, U+2039-203a, U+2044, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff;
}
.sc-block-code .sc-code-block-content {
position: relative;
background-color: var(--sc-code-block-bg);
border: var(--sc-code-block-border);
border-radius: var(--sc-code-block-radius);
overflow-x: auto;
content-visibility: auto;
contain-intrinsic-size: auto 96px;
}
.sc-block-code .sc-code-block-pre {
position: relative;
margin: 0;
padding: var(--sc-code-block-padding-block) var(--sc-code-block-padding-inline-right) var(--sc-code-block-padding-block) var(--sc-code-block-padding-inline-left);
min-width: -webkit-fit-content;
min-width: fit-content;
font-family: var(--sc-code-block-font-family, var(--sc-font-family-mono));
font-size: var(--sc-code-block-font-size);
line-height: var(--sc-content-line-height);
}
.sc-block-code .sc-code-block-wrap .sc-code-editable {
white-space: pre-wrap;
word-break: break-all;
}
.sc-block-code .sc-code-line-numbers {
position: absolute;
top: 0;
left: 0;
width: var(--sc-code-block-padding-inline-left);
padding-top: var(--sc-code-block-padding-block);
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
.sc-block-code .sc-code-line-number {
position: absolute;
left: var(--sc-code-line-number-inset);
color: var(--sc-text-grey);
}
.sc-block-code .sc-code-editable {
display: block;
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: var(--sc-code-block-font-family, var(--sc-font-family-mono));
tab-size: 4;
white-space: pre;
word-break: normal;
overflow-wrap: normal;
position: relative;
color: var(--sc-text-default);
caret-color: var(--sc-text-default);
outline: none;
}
.sc-block-code .sc-code-editable::selection {
background: var(--sc-color-selection, rgba(35, 131, 226, 0.28));
}
/* 控制条需要溢出显示，sc-block-content 不裁剪（横向溢出由父级编辑器容器自然处理） */
.sc-block-simple_table > .sc-block-content {
overflow: visible;
}
/*
* 表格 block 在常规 --sc-block-gap-media 之外额外增加上下间距，给 col-selector / row-selector /
* + 按钮 hot zone 留出视觉缓冲，避免与相邻 block 视觉重合。
*
* 选择器与 page.less 中 `.sc-block.sc-block-simple_table` 等特异性（0,2,0），
* 且本文件 @import 顺序在 page.less 之后，确保此处覆盖生效。
* 否则会退化为基础 --sc-block-gap-media（12px），col-selector 12px 高会直接贴上一个 block。
*/
.sc-block.sc-block-simple_table {
margin-top: var(--sc-block-gap-table-before);
margin-bottom: var(--sc-block-gap-table-after);
}
.sc-block.sc-block-simple_table:has(.sc-block-content.is-structure_disabled) {
margin-top: calc(var(--sc-block-gap-media) + 12px);
}
.sc-block-simple_table table {
border-collapse: collapse;
table-layout: fixed;
border-spacing: 0;
/* 表格底色：保持不透明，避免 block 高亮（sc-block--flash）等上层装饰色
* 穿透到下层背景造成"空心"视觉。仅作用于 table 本身，不含周边控件区域。
* header cell 的 --sc-bg-grey_background 与 cell 的 data-bg-color 特异性更高，正常覆盖。 */
background-color: var(--sc-table-background);
}
.sc-block-simple_table table:focus-visible {
outline: 0;
}
/* tableType='fit'：表格至少撑满容器宽度，列按固定宽度比例分配剩余空间；
* 列总宽超出容器时保持原有宽度，由 viewport 层提供横向滚动。 */
.sc-table-wrapper.is-table-fit table {
min-width: 100%;
}
.sc-block-simple_table_row {
border: 1px solid var(--sc-border-grey);
vertical-align: top;
overflow: hidden;
word-break: break-word;
}
.sc-block-simple_table_cell {
border: 1px solid var(--sc-border-grey);
vertical-align: top;
/* table-layout:fixed 下 cell 必须 overflow:hidden 才能阻止子内容
* 的 min-width 撑开列宽。cell 内 handle 已由 TableCellHandleLayer
* 在 wrapper 层独立渲染，不再依赖 cell overflow:visible。 */
overflow: hidden;
word-break: break-word;
}
.sc-block-simple_table_cell {
padding: var(--sc-table-cell-padding);
position: relative;
}
/* 单元格选择光标由 JS 动态控制（通过 --sc-table-cursor 变量），避免空白区域误显示 */
.sc-block-simple_table_cell.is-table-header {
background-color: var(--sc-bg-grey_background, #f5f5f5);
font-weight: 500;
}
/* TODO: 标题行吸顶——当前 .sc-table-viewport 的 clip-path 会创建 containing block，
* 导致 position: sticky 参照 viewport 而非页面滚动容器，无法正常吸顶。
* 后续需用 JS（IntersectionObserver + transform）方案实现。 */
/* 左上角（同时是行标题和列标题）z-index 更高 */
.sc-block-simple_table_cell.is-row-header.is-col-header {
z-index: 3;
}
.sc-block-simple_table_cell.is-in-selection {
box-shadow: inset 0 0 0 9999px var(--sc-table-selection-bg);
}
/* 分割线 block
*
* 视觉布局：
* sc-block-content 作为「分隔区」hitzone：
* - 固定 min-height + padding-block 让分割线上下都有稳定的呼吸感
* - flex 居中，让 hr 横线垂直居中
* - cursor: pointer 提示可点击选中
*
由 React 渲染，浏览器默认样式重置后只保留 border-bottom 作为视觉线条
*/
.sc-divider-line {
display: block;
width: 100%;
margin: 0;
border: 0;
border-bottom: 1px solid var(--sc-divider-default);
transition: border-color 0.1s ease;
}
.sc-block-divider .sc-block-content {
display: flex;
align-items: center;
min-height: calc(var(--sc-divider-padding) * 2);
/* padding-block 控制分割线上下的呼吸感与点击 hitzone */
padding-block: var(--sc-divider-padding);
cursor: pointer;
}
/**
* Image block 对齐（容器级）。
*
* 消费 `BlockShell` 注入的 `data-align` 属性，把 `.sc-block-content`
* 的 flex 对齐切换为 left / center / right。
*
* Block 内部（占位、图片、caption、工具按钮等）的样式在
* `packages/editor/src/view/blocks/image/image-block.less` 中定义。
*/
.sc-block-image .sc-block-content {
display: flex;
justify-content: center;
}
.sc-block-image[data-align='center'] .sc-block-content {
justify-content: center;
}
.sc-block-image[data-align='left'] .sc-block-content {
justify-content: flex-start;
}
.sc-block-image[data-align='right'] .sc-block-content {
justify-content: flex-end;
}
.sc-block-quote > .sc-block-content {
border-left: var(--sc-quote-border-width) solid var(--sc-quote-border-color);
padding: var(--sc-quote-padding);
color: var(--sc-quote-text-color);
background: var(--sc-quote-bg);
border-radius: var(--sc-quote-border-radius);
}
.sc-block.sc-block-quote > .sc-block-content {
line-height: var(--sc-quote-line-height);
}
.sc-block-equation .sc-block-content {
display: flex;
justify-content: center;
width: 100%;
}
.sc-block .sc-block-content {
font-size: var(--sc-content-font-size);
line-height: var(--sc-content-line-height);
}
.sc-block[data-border-color]:not(.sc-block-simple_table_cell),
.sc-block[data-bg-color]:not(.sc-block-simple_table_cell) {
border-radius: var(--sc-block-radius);
}
.sc-block-children.is-trim-top > .sc-block:first-of-type {
margin-top: 0;
}
.sc-block-children.is-trim-bottom > .sc-block:last-of-type {
margin-bottom: 0;
}
.sc-block.is-trim-top {
margin-top: 0;
}
.sc-block.is-trim-bottom {
margin-bottom: 0;
}
/* Root CE 编辑模式：纯文本输入，阻止浏览器在编辑时添加行内样式 */
.sc-root-editable[contenteditable='true'] {
-webkit-user-modify: read-write-plaintext-only;
outline: none;
}
/* InlineEditor 移动端：恢复原生文字选择能力
- read-write-plaintext-only 会抑制 iOS Safari 长按选词 callout（放大镜+选区把手），
主编辑器通过 MobileFloatingToolbar 补偿；InlineEditor 无此浮层，
在触摸设备上完全移除 -webkit-user-modify，让 iOS 原生 contenteditable
选区系统正常工作（长按"选择"扩展选区、把手拖拽等）。
- read-write 仍不完全等价于原生 contenteditable，iOS Safari 的 callout 系统
对 -webkit-user-modify 元素的选区扩展行为有差异，必须 unset 才能彻底恢复。 */
@media (pointer: coarse) {
[data-sc-inline-editor] .sc-root-editable[contenteditable='true'] {
-webkit-user-modify: unset;
}
}
/* 选区高亮：只在 Leaf CE 内的文本上显示 */
.sc-root-editable ::selection {
background: var(--sc-color-selection);
}
/* InlineEditor 选区高亮：
InlineEditor 可能独立于 EditorRoot 使用（无 data-sc-theme 祖先），
--sc-color-selection 未定义时 ::selection 背景为空（不可见）。
此处补 fallback，确保任何使用场景下选区都有视觉反馈。 */
[data-sc-inline-editor] ::selection {
background: var(--sc-color-selection, rgba(35, 131, 226, 0.28));
}
/* 非文本层选区透明化，避免间隙高亮 */
.sc-root-editable::selection,
.sc-page::selection,
.sc-page-body::selection,
.sc-page-header::selection,
.sc-block::selection,
.sc-block-children::selection,
.sc-block-content::selection {
background: transparent;
}
/* ── Embed block 选区端点行为 ──────────────────────────────────
* embed block（divider / image / equation / page，含外部 plugin 声明
* `category: 'embed'` 的 block）允许浏览器原生 DOM Range 端点落在内部 ——
* 这是为了让 mouseup 在 embed 上时 focus 能稳定停留，由 onSelect 链路的
* clampSelectionAcrossEmbed 把 focus 钳到 (embedId, 0)，再由
* cross-block-highlight 加 `.is-selected` 蒙层渲染整块覆盖。
*
* 视觉副作用控制：
* ::selection 在通用规则（上方 .sc-block-content::selection 等）已透明，
* embed 内部即便落入 DOM Range 端点也不会出现碎片高亮，蒙层接管整块视觉。
*
* 历史决策：曾尝试 `user-select: none` 让浏览器自动跳过 embed（Phase 1，
* Notion 同款）。但实测发现当 embed 在文档/容器末尾时，浏览器 mouseup 把 focus
* 退回到 embed 之前的最近文本节点末尾，editor.selection 的 focus.blockId
* 永远不会指向 embed 自身，跨块蒙层判定也失效。改为 P-B 方案：
* 不再阻止浏览器选区进入 embed，而由 JS 在 onSelect 链路主动钳位端点到
* embed 边界（focus.offset = 0）。
*
* 选择器维护：依赖 BlockShell 投射的 `data-block-category="embed"` 属性
* （来源：BlockSpec.category === 'embed'），声明式扩展，外部 plugin 自动享用。
*/
/* 非编辑区域隔离：marker / icon 不可选中，不可进入光标 */
.sc-block-marker {
-webkit-user-select: none;
user-select: none;
}
/* ── 矩形框选（rect-selection）──────────────────────────────── */
/* 蓝色半透明框选矩形：挂在 .sc-editor-overlay 内，与 editor 内容同一滚动坐标系 */
.sc-rect-selection-overlay {
background: var(--sc-color-selection, rgba(35, 131, 226, 0.18));
border: 1px solid rgba(35, 131, 226, 0.5);
border-radius: 2px;
/* pointer-events 已在内联样式中 none，这里不重复 */
}
/* 被框选命中的 block：整体高亮（叠加现有背景之上） */
.sc-block.is-selected {
/* ::after 用 inset:0 + absolute，需要一个定位上下文；
sc-block 本身不一定是 positioned，这里显式声明 */
position: relative;
/* 选中态高亮：::after 伪元素铺满整块，水平方向略外扩以避免紧贴文字 */
}
.sc-block.is-selected::after {
content: '';
position: absolute;
inset: 0 -4px;
background: var(--sc-color-selection, rgba(35, 131, 226, 0.18));
border-radius: 4px;
pointer-events: none;
/* 覆盖表格 cell 等带 z-index 的后代 */
z-index: 10;
}
/* 容器型 block（callout / quote / code 等）：蒙层不外扩，贴合容器自身边界 */
.sc-block-callout.is-selected::after,
.sc-block-quote.is-selected::after,
.sc-block-code.is-selected::after {
inset: 0;
}
/* ── 嵌套选中态压制 ──
* 当一个 selected block 嵌套在另一个 selected block 内（典型场景：list 整棵子树
* Cmd+A 选中），由外层 ::after 蒙层统一覆盖子树即可，内层不再独立渲染蒙层 / 描边，
* 避免半透明蓝色互相叠加产生越来越深的颜色。 */
.sc-block.is-selected .sc-block.is-selected {
/* image 用 outline 描边；嵌套时一并去掉 */
/* 表格用 table::after 蒙层；嵌套时一并去掉 */
}
.sc-block.is-selected .sc-block.is-selected::after {
content: none;
}
.sc-block.is-selected .sc-block.is-selected .sc-image-media {
outline: none;
}
.sc-block.is-selected .sc-block.is-selected table::after {
content: none;
}
/* 代码块选中态：整块蒙层覆盖时，抑制内部编辑层的 ::selection 碎片高亮。
代码块的编辑层文字本身是 color:transparent（靠高亮层着色），
但 ::selection 背景色仍可见，需要在整块选中时压掉。
用 .sc-root-editable 前缀确保优先级高于通用 ::selection 规则。 */
.sc-root-editable .sc-block-code.is-selected .sc-code-editable::selection,
.sc-root-editable .sc-block-code.is-selected .sc-code-editable ::selection {
background: transparent;
}
/* 表格选中态：整块蒙层覆盖（focus 钳到 (tableId, 0) 或 anchor 反向同理）时，
抑制 cell 内 paragraph 的 ::selection 文字片段高亮，避免内部蓝色文字与
外层蒙层视觉割裂。仅在 simple_table.is-selected 整块覆盖时压制；
表格内 cell-range（TableCellRangeSelection）走独立高亮通道，不受影响。 */
.sc-root-editable .sc-block-simple_table.is-selected .sc-block-text-content::selection,
.sc-root-editable .sc-block-simple_table.is-selected .sc-block-text-content ::selection {
background: transparent;
}
/* 分割线 block：保留默认 .sc-block.is-selected::after 浅蓝填充蒙层。
分割线自身 hitzone 已经增加到 32px，蒙层铺满后视觉效果接近 Notion / Lark 的整块高亮。
hr 自身保持灰色细线，不需要额外加粗。 */
/* 图片等媒体型 block：铺色遮罩会压住图像本身，改为紧贴图片的细描边。
- 不覆盖 block 整个行宽（含对齐留白 / caption），只框住图片本身；
- 描边紧贴图片外沿，视觉上轻量不喧宾夺主。 */
.sc-block-image.is-selected {
/* 关闭默认的 block 级 ::after 遮罩，交给 .sc-image-media 自己画边 */
}
.sc-block-image.is-selected::after {
content: none;
}
.sc-block-image.is-selected .sc-image-media,
.sc-block-image.is-selected .sc-image-placeholder {
outline: var(--sc-embed-selected-outline);
outline-offset: var(--sc-embed-selected-outline-offset);
}
.sc-block-image.is-selected .sc-image-media img,
.sc-block-image.is-selected .sc-image-placeholder img {
cursor: zoom-in;
}
/* 表格 block：选区贴合 table 元素实际尺寸，不受 block shell 宽度和 viewport clip-path 影响 */
.sc-block-simple_table.is-selected::after {
content: none;
}
.sc-block-simple_table.is-selected table {
position: relative;
}
.sc-block-simple_table.is-selected table::after {
content: '';
position: absolute;
inset: 0;
background: var(--sc-color-selection, rgba(35, 131, 226, 0.18));
border-radius: 4px;
pointer-events: none;
z-index: 10;
}
/* Block 拖拽样式 */
.sc-drag-overlay {
position: fixed;
inset: 0;
z-index: 9999;
cursor: -webkit-grabbing;
cursor: grabbing;
}
.sc-drag-preview {
position: fixed;
pointer-events: none;
border-radius: 6px;
overflow: hidden;
z-index: 10000;
/* 超长 block（长列表 / 大段文字 / 代码块）裁剪到视口内，避免遮挡下方 drop 区域 */
max-height: min(60vh, 420px);
/* 磨砂质感：半透明背景 + 背后模糊 */
background: color-mix(in srgb, var(--sc-ui-surface, #fff) 72%, transparent);
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
/* 立体阴影 + 细边 */
box-shadow: var(--sc-ui-surface-shadow-1, 0 8px 24px rgba(0, 0, 0, 0.08));
border: 1px solid var(--sc-ui-surface-border, rgba(0, 0, 0, 0.08));
/* 内边距让内容离容器边缘更舒服 */
padding: 4px 8px;
/* 轻微缩放，强化"被拎起"的感觉 */
transform: scale(0.98);
transform-origin: top left;
/* 清除 clone 带来的行间距 margin */
/* 内容被截断时底部渐隐，暗示下方还有更多 */
}
.sc-drag-preview .sc-block {
margin: 0;
}
.sc-drag-preview::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 32px;
pointer-events: none;
background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--sc-ui-surface, #fff) 85%, transparent));
}
.sc-drop-indicator {
pointer-events: none;
z-index: 9998;
background: var(--sc-ui-primary);
border-radius: 1px;
/* 位置在不同 block 之间切换时仅对 transform 做过渡。
width/height 改用突变，避免在 before/after(2px 高)
与 left/right(2px 宽)之间切换时，过渡帧把 2px 的线
临时放大成一块蓝色矩形。 */
transition: transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
will-change: transform;
}
/* onto: 沿目标 block 轮廓显示虚框，区别于边缘指示线。
独立类名，不复用 .sc-drop-indicator 的蓝色 background / transition，
避免被误渲染成实心蓝色矩形。 */
.sc-drop-indicator--onto {
pointer-events: none;
z-index: 9998;
background: transparent;
border-radius: 6px;
outline: 2px solid var(--sc-ui-primary);
outline-offset: -1px;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--sc-ui-primary) 15%, transparent);
will-change: transform, width, height;
}
/* hint: 同一 host 上除胜出方向外的其它可用方向，淡色占位线，
提醒用户该 block 支持哪些方向。不做过渡，避免跟随 active 动画闪烁。 */
.sc-drop-indicator--hint {
background: color-mix(in srgb, var(--sc-ui-primary) 28%, transparent);
transition: none;
}
/* onto 的 hint 形态：只保留淡色外框，不要实心光晕，避免与 active onto 抢视觉焦点。 */
.sc-drop-indicator--hint-onto {
outline: 1px dashed color-mix(in srgb, var(--sc-ui-primary) 45%, transparent);
box-shadow: none;
}
/* block 正在被拖拽时原地显示为半透明影子 */
.sc-block.is-dragging {
opacity: 0.25;
pointer-events: none;
}
/* 多选拖拽角标：贴在 preview 右上角外沿，显示被拖 block 数量 */
.sc-drag-preview-badge {
position: fixed;
z-index: 10001;
pointer-events: none;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 10px;
background: var(--sc-ui-primary, #2f54eb);
color: #fff;
font-size: 12px;
font-weight: 600;
line-height: 20px;
text-align: center;
/* 用 translate 把 badge 中心对齐到 preview 右上顶点外侧 */
transform: translate(-50%, -50%);
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
}
/* 拖拽期间全局锁定光标与禁用文本选择，避免经过不同元素时光标样式闪烁 */
body.sc-body-dragging,
body.sc-body-dragging * {
cursor: -webkit-grabbing !important;
cursor: grabbing !important;
-webkit-user-select: none !important;
user-select: none !important;
}
/**
* Block Decoration 基础样式
*
* .is-block-decorated — 给有 decoration 的 block 加 position: relative
* .sc-block-decoration-slot — decoration 容器
* - 绝对定位覆盖整个 block
* - pointer-events: none，不阻挡编辑交互
* - z-index 高于内容但低于菜单
*
* .sc-block-decoration-entry — 单个 decoration 渲染项
*/
.sc-block.is-block-decorated {
position: relative;
}
.sc-block-decoration-slot {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
.sc-block-decoration-entry {
position: absolute;
inset: 0;
pointer-events: none;
}
/**
* Error fallback 样式
*
* 5 个默认 fallback 共用的样式（实现见 view/error/default-fallbacks.tsx）：
* - .sc-block-error-fallback block 渲染异常（dev 完整诊断 / prod 删除按钮）
* - .sc-page-section-error-fallback page 分区异常（极简一行）
* - .sc-editor-error-fallback 编辑器顶层异常（卡片）
* - .sc-unknown-block-fallback 未注册 spec
* - .sc-stale-block-fallback React 17 stale 窗口（仅 dev 渲染）
*
* 设计语言：用 `--sc-ui-danger` 衍生表达"异常"——红边框 + 浅红衬底，统一于 danger
* 语义。block fallback 与 editor fallback 共用同一套异常视觉，只是密度不同。
*
* 暗色模式适配：所有颜色走 `--sc-ui-*` token，无幻影 token，无硬编码色值。
*
* 按钮：fallback 内按钮默认走 `.sc-btn .sc-btn--outline .sc-btn--sm`，hover/active
* 状态由 button.less 提供。「删除该块」叠加 `.sc-btn--danger` 让边框 / hover 走红色。
*/
/* ── 共享 mixin：异常容器边框 + 衬底 ─────────────────────────────────── */
/* ── Block 渲染异常 fallback ────────────────────────────────────────── */
.sc-block-error-fallback {
border: 1px solid var(--sc-ui-danger);
/* 浅红底：用 color-mix 把 danger 与 surface 调出 8% 浓度，dark 模式下 surface 已变暗，
混合结果自动跟随。color-mix 在 Chrome 111+ / Safari 16.2+ 支持，覆盖目标用户。 */
background: color-mix(in srgb, var(--sc-ui-danger) 8%, var(--sc-ui-surface));
color: var(--sc-ui-text);
border-radius: var(--sc-ui-radius-md);
padding: 12px;
margin: 4px 0;
}
.sc-block-error-fallback__title {
font-weight: 600;
margin-bottom: 4px;
color: var(--sc-ui-danger);
}
.sc-block-error-fallback__meta {
font-size: 12px;
color: var(--sc-ui-text-muted);
margin-bottom: 8px;
/* dev 视图下展示 type / id，monospace 让 id 视觉对齐 */
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.sc-block-error-fallback__actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.sc-block-error-fallback__details {
margin-top: 8px;
font-size: 12px;
}
.sc-block-error-fallback__details > summary {
cursor: pointer;
color: var(--sc-ui-text-muted);
-webkit-user-select: none;
user-select: none;
}
.sc-block-error-fallback__details > summary:hover {
color: var(--sc-ui-text);
}
.sc-block-error-fallback__details > pre {
white-space: pre-wrap;
word-break: break-word;
background: var(--sc-ui-bg-subtle);
padding: 8px;
border-radius: var(--sc-ui-radius-sm);
margin-top: 4px;
max-height: 200px;
overflow: auto;
font-size: 11px;
color: var(--sc-ui-text);
}
/* ── Page 分区 fallback（极简一行） ─────────────────────────────────── */
.sc-page-section-error-fallback {
border: 1px solid var(--sc-ui-danger);
/* 浅红底：用 color-mix 把 danger 与 surface 调出 8% 浓度，dark 模式下 surface 已变暗，
混合结果自动跟随。color-mix 在 Chrome 111+ / Safari 16.2+ 支持，覆盖目标用户。 */
background: color-mix(in srgb, var(--sc-ui-danger) 8%, var(--sc-ui-surface));
color: var(--sc-ui-text);
border-radius: var(--sc-ui-radius-md);
padding: 8px 12px;
margin: 4px 0;
font-size: 13px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
color: var(--sc-ui-text-muted);
}
.sc-page-section-error-fallback__details {
width: 100%;
margin-top: 4px;
font-size: 11px;
}
.sc-page-section-error-fallback__details > summary {
cursor: pointer;
color: var(--sc-ui-text-muted);
-webkit-user-select: none;
user-select: none;
}
.sc-page-section-error-fallback__details > pre {
white-space: pre-wrap;
word-break: break-word;
margin: 4px 0;
color: var(--sc-ui-text);
}
/* ── 编辑器顶层异常 fallback（卡片） ────────────────────────────────── */
.sc-editor-error-fallback {
border: 1px solid var(--sc-ui-danger);
/* 浅红底：用 color-mix 把 danger 与 surface 调出 8% 浓度，dark 模式下 surface 已变暗，
混合结果自动跟随。color-mix 在 Chrome 111+ / Safari 16.2+ 支持，覆盖目标用户。 */
background: color-mix(in srgb, var(--sc-ui-danger) 8%, var(--sc-ui-surface));
color: var(--sc-ui-text);
border-radius: var(--sc-ui-radius-md);
width: 100%;
padding: 32px;
margin: 32px auto;
max-width: 640px;
text-align: center;
}
.sc-editor-error-fallback__title {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
color: var(--sc-ui-danger);
}
.sc-editor-error-fallback__message {
margin-bottom: 16px;
color: var(--sc-ui-text-muted);
/* dev 视图直接显示 error.message，可能很长；做基本换行 */
word-break: break-word;
}
.sc-editor-error-fallback__actions {
display: inline-flex;
gap: 8px;
margin-bottom: 16px;
}
.sc-editor-error-fallback__details {
margin-top: 16px;
font-size: 12px;
text-align: left;
}
.sc-editor-error-fallback__details > summary {
cursor: pointer;
color: var(--sc-ui-text-muted);
-webkit-user-select: none;
user-select: none;
}
.sc-editor-error-fallback__details > summary:hover {
color: var(--sc-ui-text);
}
.sc-editor-error-fallback__details > pre {
white-space: pre-wrap;
word-break: break-word;
background: var(--sc-ui-bg-subtle);
padding: 8px;
border-radius: var(--sc-ui-radius-sm);
margin-top: 4px;
max-height: 240px;
overflow: auto;
font-size: 11px;
color: var(--sc-ui-text);
}
/* ── Unknown / Stale block 占位 ─────────────────────────────────────── */
.sc-unknown-block-fallback,
.sc-stale-block-fallback {
padding: 6px 12px;
margin: 4px 0;
font-size: 13px;
color: var(--sc-ui-text-muted);
background: var(--sc-ui-bg-subtle);
border-radius: var(--sc-ui-radius-sm);
}
/* ── Danger 按钮 modifier ──────────────────────────────────────────────
* 「删除该块」需要红色强调以提示破坏性。在 sc-btn--outline 基础上叠加，
* 边框、文字、hover 衬底都换 danger 色。这里没把 modifier 放进 ui/button.less
* 是因为 danger 按钮目前只有 fallback 在用，避免污染 button 通用 API。
*/
.sc-btn--danger.sc-btn--outline {
border-color: var(--sc-ui-danger);
color: var(--sc-ui-danger);
}
.sc-btn--danger.sc-btn--outline:hover:not(:disabled) {
background: color-mix(in srgb, var(--sc-ui-danger) 12%, transparent);
color: var(--sc-ui-danger);
}
.sc-btn--danger.sc-btn--outline:active:not(:disabled) {
background: color-mix(in srgb, var(--sc-ui-danger) 18%, transparent);
}
/* Block Menu */
/* Block Menu 样式 */
/*
* 通用组件样式（Button, DropdownMenu, Popover）已移到 packages/ui。
* 这里只保留 block-menu 特有的定位和布局样式。
*/
/* ── Handle（菜单把手） ── */
.sc-block-menu-handle {
position: absolute;
left: 0;
top: 0;
transform: translateX(-100%);
/** 占位元素，用于撑开空间 避免鼠标从block移动到handle过程中因移出元素导致菜单关闭 */
/* 空行模式只渲染单个 + 按钮，正方形白底容器 */
/* 无类型 icon（仅 grip）时收窄偏移，让拖拽把手贴近 block */
z-index: 10;
display: flex;
flex-direction: row;
align-items: center;
-webkit-user-select: none;
user-select: none;
opacity: 0;
animation: sc-handle-fade-in 0.12s ease forwards;
/*
* 与 .sc-block-content 第一行文字垂直居中对齐。
* font-size 和 line-height 从同级 .sc-block-content 继承同源 CSS 变量，
* 使得 handle 高度 = 一行内容的高度，按钮在其中垂直居中。
*/
font-size: var(--sc-content-font-size);
line-height: var(--sc-content-line-height);
height: calc(var(--sc-content-line-height) * 1em);
}
.sc-block-menu-handle::after {
content: '';
width: var(--sc-block-menu-handle-gap);
height: calc(var(--sc-content-line-height) * 1em);
}
.sc-block-menu-handle--empty {
/* 偏移 -12px：容器宽 28px，向左拉出使其视觉居中于 block 左边缘 */
left: -12px;
width: 28px;
height: 28px;
max-height: 28px;
justify-content: center;
align-self: center;
padding: 0;
background: var(--sc-menu-surface);
border: var(--sc-menu-border-width) solid var(--sc-menu-border-color);
border-radius: var(--sc-menu-radius);
box-shadow: var(--sc-menu-shadow);
/* picker 打开时隐藏白底容器 */
/* 去掉占位伪元素 */
/* 内部按钮：撑满容器、居中图标、去掉 hover/active 效果。
* :not(:disabled) 把特异性抬到 0-4-0：原先与 ui 包 .sc-btn--ghost:hover:not(:disabled)
* (0-3-0) 打平、取决于样式加载顺序，ghost 的 hover 灰底(var(--sc-ui-hover))
* 会在 ui 样式后加载时穿透本白底容器 */
}
.sc-block-menu-handle--empty.is-picker-open {
background: transparent;
border-color: transparent;
box-shadow: none;
}
.sc-block-menu-handle--empty::after {
display: none;
}
.sc-block-menu-handle--empty .sc-btn,
.sc-block-menu-handle--empty .sc-icon-btn {
width: 100%;
height: 100%;
min-width: unset;
padding: 0;
background: transparent;
border-radius: 0;
}
.sc-block-menu-handle--empty .sc-btn:hover:not(:disabled),
.sc-block-menu-handle--empty .sc-icon-btn:hover:not(:disabled),
.sc-block-menu-handle--empty .sc-btn:active:not(:disabled),
.sc-block-menu-handle--empty .sc-icon-btn:active:not(:disabled) {
background: transparent;
box-shadow: none;
}
.sc-block-menu-handle:not(:has(.sc-block-menu-type-indicator)):not(.sc-block-menu-handle--empty) {
left: -36px;
}
/* 类型图标 + 拖拽把手 横向排列 */
.sc-block-menu-handle-row {
position: relative;
display: flex;
align-items: center;
gap: 4px;
}
/* 胶囊容器：将类型图标和拖拽把手合并在一个圆角容器里。
* 整体作为一个交互单元（button）：onPointerDown 绑在 capsule 上,
* hover 视觉作用在整个 capsule(背景色变化),而不是各个子图标分别高亮。
*/
.sc-block-menu-handle-capsule {
/* button reset */
-webkit-appearance: none;
appearance: none;
margin: 0;
font: inherit;
color: inherit;
display: inline-flex;
align-items: center;
gap: 0;
background: var(--sc-menu-surface);
border: var(--sc-menu-border-width) solid var(--sc-menu-border-color);
border-radius: var(--sc-menu-radius);
box-shadow: var(--sc-menu-shadow);
overflow: hidden;
padding: var(--sc-menu-padding-y) var(--sc-menu-padding-x);
cursor: -webkit-grab;
cursor: grab;
-webkit-user-select: none;
user-select: none;
transition: background 0.15s ease, color 0.15s ease;
}
@media (hover: hover) {
.sc-block-menu-handle-capsule:hover {
/*
* 不直接用 --sc-menu-hover-bg（4% 透明黑/白）：
* capsule 默认是 --sc-menu-surface 白底，hover 切到 4% 透明时，胶囊下方
* 的文档内容（特别是表格列选择条上的列头）会直接穿透显示。
* dark 模式同理自动跟随 surface / text 的暗色值。
*/
background: color-mix(in srgb, var(--sc-menu-surface) 96%, var(--sc-ui-text));
}
}
.sc-block-menu-handle-capsule:active {
cursor: -webkit-grabbing;
cursor: grabbing;
background: var(--sc-menu-active-bg);
}
.sc-block-menu-handle-capsule:focus-visible {
outline: 2px solid var(--sc-menu-icon-color-active);
outline-offset: 1px;
}
/* 类型指示器:装饰性 icon,不响应单独 hover。颜色统一到 --sc-ui-text-tertiary（原为主题蓝）。 */
.sc-block-menu-type-indicator {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: var(--sc-ui-text-tertiary, rgba(0, 0, 0, 0.5));
flex-shrink: 0;
pointer-events: none;
}
.sc-block-menu-type-indicator > svg {
width: var(--sc-menu-icon-size);
height: var(--sc-menu-icon-size);
}
/* 拖拽把手 grip:装饰性 icon,不响应单独 hover */
.sc-block-menu-handle-grip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: var(--sc-ui-text-tertiary, rgba(0, 0, 0, 0.5));
flex-shrink: 0;
pointer-events: none;
}
.sc-block-menu-handle-grip > svg {
width: var(--sc-menu-icon-size);
height: var(--sc-menu-icon-size);
}
@keyframes sc-handle-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 表格 block 自身的 handle：上移到列选择条区域，右边缘紧贴可见内容区左边 */
.sc-block-simple_table:has(.sc-block-content.is-structure_disabled) > .sc-block-menu-handle {
top: 4px;
}
.sc-block-simple_table > .sc-block-menu-handle {
top: -25px;
left: calc(-1 * var(--sc-table-handle-offset, 0px));
z-index: 20;
pointer-events: none;
}
.sc-block-simple_table > .sc-block-menu-handle .sc-block-menu-handle-capsule,
.sc-block-simple_table > .sc-block-menu-handle .sc-block-menu-edge {
pointer-events: auto;
}
.sc-block-simple_table > .sc-block-menu-handle::after {
width: 14px;
}
/* portal slot 内的 handle（cell 子 block）：整体事件穿透，不遮挡 row-selector 点击。
仅 capsule / edge 恢复事件响应保证可交互。
hover 保持由 row-selector 的 mouseenter → cancelHide 机制保证。 */
.sc-block-menu-handle-portal-slot .sc-block-menu-handle {
pointer-events: none;
}
.sc-block-menu-handle-portal-slot .sc-block-menu-handle .sc-block-menu-handle-capsule,
.sc-block-menu-handle-portal-slot .sc-block-menu-handle .sc-block-menu-edge {
pointer-events: auto;
}
/* heading 类型下 handle 高度跟随 heading 的 line-height 和 font-size */
.sc-block-header1 > .sc-block-menu-handle {
font-size: var(--sc-heading-1-font-size);
line-height: var(--sc-heading-1-line-height);
height: calc(var(--sc-heading-1-line-height) * 1em);
}
.sc-block-header2 > .sc-block-menu-handle {
font-size: var(--sc-heading-2-font-size);
line-height: var(--sc-heading-2-line-height);
height: calc(var(--sc-heading-2-line-height) * 1em);
}
.sc-block-header3 > .sc-block-menu-handle {
font-size: var(--sc-heading-3-font-size);
line-height: var(--sc-heading-3-line-height);
height: calc(var(--sc-heading-3-line-height) * 1em);
}
.sc-block-header4 > .sc-block-menu-handle,
.sc-block-header5 > .sc-block-menu-handle,
.sc-block-header6 > .sc-block-menu-handle {
font-size: var(--sc-heading-4-font-size);
line-height: var(--sc-heading-4-line-height);
height: calc(var(--sc-heading-4-line-height) * 1em);
}
/*
* 以 handle 容器为基准（handle 是 position: absolute），
* 宽度撑满 handle，上/下紧贴 row（row 居中，上下各留一定间距）。
*/
.sc-block-menu-edge {
position: absolute;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
height: 18px;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
border-radius: 4px;
color: transparent;
transition: background 0.15s ease, color 0.15s ease;
/* row 居中：top 50% - row高/2 - gap - edge高 = 50% - 14 - 2 - 18 */
}
.sc-block-menu-edge.is-top {
bottom: calc(50% + 14px + 2px);
}
.sc-block-menu-edge.is-bottom {
top: calc(50% + 14px + 2px);
}
.sc-block-menu-edge.is-active {
background: var(--sc-menu-hover-bg);
color: var(--sc-menu-icon-color);
}
@media (hover: hover) {
.sc-block-menu-edge:hover {
background: var(--sc-menu-active-bg);
}
}
/* ── BlockMenuPopupContent 专属区块 ── */
/*
* block menu 的 DropdownMenu.Content 需要尽量完整展示内容，同时在视口不足时
* 允许滚动查看全部项。
*
* 通用 .sc-dropdown-content 默认 max-height: 400px，会限制菜单高度；
* 这里放宽到 var(--radix-dropdown-menu-content-available-height)，让
* Radix 根据碰撞检测下发的可用高度来决定最大高度，从而把视口空间用满；
* overflow-y 保持 auto，超出后可滚动。
*
* 同时拉宽 min-width 让菜单内容更舒展。
*/
.sc-block-menu-content.sc-dropdown-content {
width: -webkit-fit-content;
width: fit-content;
min-width: 176px;
max-height: var(--radix-dropdown-menu-content-available-height, 560px);
overflow-y: auto;
padding: 12px 8px;
/* 覆盖 .sc-dropdown-content 基类的 8px（对齐 ardot 菜单面板圆角，
* 与 toc 悬浮目录面板一致）；复合选择器特异性 0-2-0，同时命中
* block 菜单 Content 与二级菜单 SubContent（均带 sc-block-menu-content 类） */
border-radius: var(--sc-menu-panel-radius);
/* 菜单底色接入 --sc-menu-surface token（划词工具栏系已消费），
* 覆盖基类 --sc-ui-surface，使菜单系浮层底色可一处统一覆盖 */
background: var(--sc-menu-surface, var(--sc-ui-surface));
/* 阴影三件套：接入 --sc-menu-shadow（设计稿 wb/shadow/Popup-Medium），
* 覆盖基类 --sc-ui-surface-shadow-1/2 重阴影 */
box-shadow: var(--sc-menu-shadow);
}
/* 顶部类型快捷切换网格（样式对齐 CommandGrid：5 列、无边框、hover 背景） */
.sc-block-menu-type-grid {
display: grid;
grid-template-columns: repeat(5, 24px);
gap: 8px;
padding: 0 0 8px;
justify-content: start;
border-bottom: 1px solid var(--sc-ui-separator);
margin-bottom: 8px;
}
.sc-block-menu-type-grid-item {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: none;
background: transparent;
border-radius: var(--sc-ui-radius-sm, 4px);
color: var(--sc-cmd-text-muted, var(--sc-menu-icon-color));
cursor: pointer;
transition: background 0.1s ease;
}
.sc-block-menu-type-grid-item > svg {
width: var(--sc-menu-icon-size);
height: var(--sc-menu-icon-size);
}
@media (hover: hover) {
.sc-block-menu-type-grid-item:hover {
background: var(--sc-cmd-hover, var(--sc-menu-hover-bg));
}
}
.sc-block-menu-type-grid-item.is-active {
background: var(--sc-cmd-active, var(--sc-menu-active-bg));
color: var(--sc-cmd-primary, var(--sc-menu-icon-color-active));
}
/* 颜色子菜单：分组小标题（非 Radix Label，禁止聚焦） */
.sc-block-menu-section-label {
padding: 8px 10px 4px;
font-size: var(--sc-menu-font-size-sm);
line-height: 16px;
color: var(--sc-menu-text-color-muted);
font-weight: 500;
pointer-events: none;
}
/* Block menu 静态展示项（disabled）： 置灰、不响应交互 */
.sc-block-menu-content .sc-dropdown-item[data-disabled] {
cursor: not-allowed;
opacity: 0.4;
}
.sc-block-menu-content .sc-dropdown-item[data-disabled]:hover,
.sc-block-menu-content .sc-dropdown-item[data-disabled][data-selected='true'],
.sc-block-menu-content .sc-dropdown-item[data-disabled][data-highlighted] {
background: transparent;
}
/* 颜色子菜单：色块预览 */
.sc-block-menu-color-swatch {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 3px;
border: 1px solid var(--sc-ui-border, rgba(0, 0, 0, 0.08));
font-size: 12px;
line-height: 1;
font-weight: 600;
}
/* 字体色：白底 + 字母 A 显示为目标色 */
.sc-block-menu-color-swatch--font {
background: var(--sc-ui-surface, #ffffff);
}
/* ── 面板容器 ──
* 面板 absolute 定位在 EditorOverlay 内（EditorOverlay 是 .sc-editor 的子元素）。
* 当 EditorRoot 启用 containerScroll 时，滚动收敛到 .sc-editor-content 内层，
* EditorOverlay 不参与内容滚动 → 面板天然钉在 .sc-editor 视觉右上角。
*/
.sc-search-panel {
position: absolute;
top: 12px;
right: 12px;
z-index: 50;
display: flex;
flex-direction: column;
gap: 4px;
padding: 6px 8px;
/* 响应式宽度：理想 360px，但窄视口（移动端 / 分屏）下不能溢出编辑器；
* 父级 EditorOverlay 宽度 = .sc-editor 宽度，预留 24px 给 top/right margin 共 12px*2 */
min-width: min(360px, calc(100% - 24px));
max-width: calc(100vw - 24px);
background: var(--sc-ui-surface);
border: 1px solid var(--sc-ui-surface-border);
border-radius: var(--sc-ui-radius-lg);
box-shadow: var(--sc-ui-surface-shadow-1);
color: var(--sc-ui-text);
/* 面板自身要参与编辑器内点击事件，但不要阻塞父级 EditorOverlay 的 pointer-events */
pointer-events: auto;
}
/* ── 单行（搜索行 / 替换行） ── */
.sc-search-panel__row {
display: flex;
align-items: center;
gap: 4px;
}
/* 替换行（在 find 模式下条件渲染消失，replace 模式下出现）— 加滑入动画避免生硬切换 */
.sc-search-panel__row.is-replace-row {
animation: sc-search-replace-row-in 0.16s cubic-bezier(0.16, 1, 0.3, 1);
transform-origin: top;
}
@keyframes sc-search-replace-row-in {
from {
opacity: 0;
transform: translateY(-4px) scaleY(0.92);
max-height: 0;
}
to {
opacity: 1;
transform: translateY(0) scaleY(1);
max-height: 60px;
}
}
/* ── 输入框 ── */
.sc-search-panel__input {
flex: 1 1 auto;
min-width: 120px;
height: 28px;
padding: 0 8px;
background: var(--sc-ui-bg-subtle);
border: 1px solid transparent;
border-radius: var(--sc-ui-radius-md);
color: var(--sc-ui-text);
font-size: 13px;
line-height: 26px;
outline: none;
transition: border-color 0.12s ease;
}
.sc-search-panel__input::-webkit-input-placeholder {
color: var(--sc-ui-text-muted);
}
.sc-search-panel__input::placeholder {
color: var(--sc-ui-text-muted);
}
.sc-search-panel__input:focus {
border-color: var(--sc-ui-primary);
}
/* ── 计数文本 ── */
.sc-search-panel__count {
flex: 0 0 auto;
min-width: 48px;
padding: 0 4px;
font-size: 12px;
line-height: 28px;
color: var(--sc-ui-text-muted);
text-align: right;
-webkit-user-select: none;
user-select: none;
white-space: nowrap;
}
/* ── 操作按钮组 ── */
.sc-search-panel__actions {
display: inline-flex;
align-items: center;
gap: 2px;
}
/* ── 单个按钮 ── */
.sc-search-panel__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 26px;
padding: 0 6px;
background: transparent;
border: none;
border-radius: var(--sc-ui-radius-sm);
color: var(--sc-ui-text);
font-size: 12px;
line-height: 1;
cursor: pointer;
transition: background 0.12s ease;
-webkit-user-select: none;
user-select: none;
/* Aa toggle 激活态：用主色文字 + 浅底凸显 */
}
@media (hover: hover) {
.sc-search-panel__button:hover:not(:disabled) {
background: var(--sc-ui-hover);
}
}
.sc-search-panel__button:active:not(:disabled) {
background: var(--sc-ui-active);
}
.sc-search-panel__button:disabled {
opacity: var(--sc-ui-disabled-opacity);
cursor: default;
}
.sc-search-panel__button.is-case-active {
background: var(--sc-ui-active);
color: var(--sc-ui-primary);
font-weight: 600;
}
/* ── 搜索高亮（CSS Custom Highlight API） ── */
/* 命中淡黄底，当前命中橙色加深；多 editor 实例由 JS 注入实际 highlight name 后缀，
但样式按通用 highlight 名字一次性铺开仍然命中（::highlight 接受任意 ident）。
为了简洁，这里用通配前缀写两套规则覆盖；具体实例的 highlight 名前缀已隔离，
不会跨实例串色。 */
/* 由于 ::highlight() 不支持通配，下面直接列出最常见的 N 个实例后缀；
实际生产中 editor 实例数极少，且 createSearchHighlight 句柄在卸载时会 delete
注册名，浏览器对未匹配的 ::highlight 名静默忽略。
编辑器内通常只有 1 个实例：sc-search-match-{8 位 hex}。
这里用 attribute selector 无法实现 ::highlight 通配，采用 CSS-in-JS 注入更复杂；
保守做法：在 EditorRoot 内部注入一段 \3c style> 仅包含本实例的两个 highlight 规则。 */
.sc-link-hover-card {
position: absolute;
display: flex;
align-items: center;
padding: var(--sc-menu-padding-y) var(--sc-menu-padding-x);
background: var(--sc-menu-surface);
border: var(--sc-menu-border-width) solid var(--sc-menu-border-color);
border-radius: var(--sc-menu-radius);
box-shadow: var(--sc-menu-shadow);
-webkit-user-select: none;
user-select: none;
white-space: nowrap;
pointer-events: all;
}
.sc-link-hover-card .sc-btn--ghost {
color: var(--sc-menu-icon-color);
}
.sc-link-hover-row {
display: flex;
align-items: center;
gap: var(--sc-menu-gap);
}
.sc-link-hover-open.sc-btn {
color: var(--sc-menu-text-color);
font-weight: 400;
height: 24px;
padding: 0 8px;
border-radius: var(--sc-ui-radius-md);
font-size: var(--sc-menu-font-size);
}
.sc-link-hover-btn {
width: 24px;
height: 24px;
min-width: 24px;
padding: 4px;
border-radius: var(--sc-ui-radius-md);
border: none;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.1s;
}
.sc-link-hover-btn svg {
width: var(--sc-menu-icon-size);
height: var(--sc-menu-icon-size);
}
@media (hover: hover) {
.sc-link-hover-btn:hover {
background: var(--sc-menu-hover-bg);
}
}
.sc-link-hover-sep {
display: inline-block;
width: 1px;
height: var(--sc-menu-separator-height);
background: var(--sc-menu-separator-color);
margin: 0 4px;
}
/* ── Page Root View 样式 ── */
/* 对应 view/runtime/page-root-view/ 下的组件 */
/* Page 根节点 = CN.page.root（'sc-page'）。
* 会话级几何缩放，与 --sc-font-scale 正交。宿主对 .sc-page 写 CSS zoom 时，
* 必须在同一节点同步 --sc-view-zoom（表格控件用 var(--sc-view-zoom, 1) 反算）。
*
* 此处刻意不声明 `--sc-view-zoom: 1`。宿主也可能把 zoom 与 --sc-view-zoom 一起
* 写在本节点的外层（如 .sc-editor-content，见 view-zoom.less）；一旦这里显式写 1，
* 继承值会被屏蔽，控件层的 zoom: calc(1 / var(--sc-view-zoom, 1)) 退化成 1，
* 控件却仍处在外层 zoom 的树里，位置会随外层缩放整体偏移（拖拽指示线对不上
* 真实分割线）。宿主未设置时，各使用处的 var(--sc-view-zoom, 1) 自带回退值 1。 */
.sc-page-body {
display: block;
/* 底部留白移到 .sc-page-bottom 之后（margin-bottom），
* 让 page-bottom 的内容紧跟正文，符合"内容末尾的页脚"语义 */
padding-bottom: 0;
}
/**
* Page 底部常驻 slot —— 与正文同宽居中，供插件作为底部面板挂载点。
* 默认无内边距、无视觉表现；插件挂载内容后由插件自身控制样式。
*
* margin-bottom: 30vh 保留底部空白点击区（原本 .sc-page-body 的留白）。
* 使用 CSS 变量允许外部定制。
*/
.sc-page-bottom {
display: block;
max-width: 860px;
margin: 0 auto var(--sc-page-body-padding-bottom, 30vh);
}
/* title/icon/cover 均隐藏时，内容区与顶部保持间距 */
.sc-page-body.sc-page-body--no-header {
padding-top: var(--sc-page-body-padding-top, 32px);
}
.sc-page-body,
.sc-page-title,
.sc-page-icon {
max-width: 860px;
margin: 0 auto;
}
/* page 首层 children 不缩进 */
.sc-page-body > .sc-block-children[data-layout='indented'] {
padding-left: 0;
}
/* 空页面 placeholder —— 纯视觉提示，模拟第一个 text block 的布局位置 */
.sc-page-body-placeholder {
color: var(--sc-ui-text-muted, rgba(0, 0, 0, 0.45));
font-size: var(--sc-content-font-size);
cursor: text;
-webkit-user-select: none;
user-select: none;
pointer-events: none;
/* 对齐 .sc-block 的 margin，避免 block 创建后位置跳动 */
margin-top: var(--sc-block-gap, 8px);
margin-bottom: var(--sc-block-gap, 8px);
line-height: var(--sc-content-line-height);
}
/* ── Page Header ── */
/* 当 header 前面没有 icon/placeholder/extra-actions 时（只读且无 icon，或功能禁用），
* 由 header 自身提供顶部间距。
* 当前面有 sc-page-icon 或 sc-page-extra-actions 时，间距已由它们提供，header 不再加。 */
.sc-page-header.without-page-cover {
margin-top: var(--sc-page-top-spacing, 60px);
}
.sc-page-header.with-page-cover {
margin-top: var(--sc-page-top-spacing-with-cover, 16px);
}
/* icon / placeholder / extra-actions 紧接着 header 时，header 不需要自己的 margin-top */
.sc-page-icon + .sc-page-header,
.sc-page-extra-actions + .sc-page-header,
.sc-page-icon + .sc-page-extra-actions + .sc-page-header {
margin-top: 0;
}
.sc-page-title {
margin-top: 2px;
margin-bottom: 48px;
font-family: var(--sc-content-font-family);
font-size: var(--sc-page-title-font-size);
line-height: var(--sc-page-title-line-height);
font-weight: var(--sc-content-font-weight-bold);
}
/* ── Page Cover ── */
.sc-page-cover {
height: 30vh;
max-height: 400px;
position: relative;
margin-inline: calc(var(--sc-editor-padding-left) * -1) calc(var(--sc-editor-padding-right) * -1);
margin-top: calc(var(--sc-editor-padding-top) * -1);
width: calc(100% + var(--sc-editor-padding-left) + var(--sc-editor-padding-right));
-webkit-user-select: none;
user-select: none;
/* 调整位置态：cursor 提示 + 图片可拖拽 + 顶层蒙层 */
}
.sc-page-cover .sc-page-cover-img {
height: 100%;
width: 100%;
object-position: center 50%;
object-fit: cover;
pointer-events: none;
}
.sc-page-cover .sc-page-cover-fill {
height: 100%;
width: 100%;
}
.sc-page-cover.is-reposition {
cursor: -webkit-grab;
cursor: grab;
/* 调整位置态加一层细边框，强化"进入编辑"反馈 */
}
.sc-page-cover.is-reposition.is-dragging {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.sc-page-cover.is-reposition .sc-page-cover-img {
pointer-events: auto;
}
.sc-page-cover.is-reposition::after {
content: '';
position: absolute;
inset: 0;
border: 2px solid var(--sc-ui-accent, #2f80ed);
pointer-events: none;
}
/* 右下角浮层工具条：默认隐藏，hover 容器或工具条自身时显示 */
.sc-page-cover-actions {
position: absolute;
right: 12px;
bottom: 12px;
display: flex;
gap: 4px;
padding: 4px;
background: rgba(255, 255, 255, 0.95);
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
opacity: 0;
transition: opacity 0.15s;
}
.sc-page-cover:hover .sc-page-cover-actions,
.sc-page-cover-actions:hover {
opacity: 1;
}
.sc-page-cover-action-btn {
border: none;
background: transparent;
color: var(--sc-ui-text-primary, #333);
font-size: 12px;
padding: 4px 8px;
border-radius: 4px;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s;
}
@media (hover: hover) {
.sc-page-cover-action-btn:hover {
background: var(--sc-ui-surface-hover, rgba(0, 0, 0, 0.06));
}
}
.sc-page-cover-action-btn.is-primary {
background: var(--sc-ui-accent, #2f80ed);
color: #fff;
}
@media (hover: hover) {
.sc-page-cover-action-btn.is-primary:hover {
background: var(--sc-ui-accent-hover, #1f70dd);
}
}
/* 调整位置态：底部 hint + 保存按钮 */
.sc-page-cover-reposition-bar {
position: absolute;
left: 50%;
bottom: 12px;
transform: translateX(-50%);
display: flex;
gap: 8px;
align-items: center;
padding: 6px 10px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
border-radius: 6px;
font-size: 12px;
pointer-events: auto;
z-index: 10;
}
.sc-page-cover-reposition-hint {
white-space: nowrap;
}
.sc-page-cover-reposition-btn {
border: none;
background: rgba(255, 255, 255, 0.2);
color: #fff;
font-size: 12px;
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s;
}
@media (hover: hover) {
.sc-page-cover-reposition-btn:hover {
background: rgba(255, 255, 255, 0.3);
}
}
.sc-page-cover-reposition-btn.is-primary {
background: var(--sc-ui-accent, #2f80ed);
color: #fff;
}
@media (hover: hover) {
.sc-page-cover-reposition-btn.is-primary:hover {
background: var(--sc-ui-accent-hover, #1f70dd);
}
}
/* ── Cover Picker 弹窗 ── */
.sc-cover-picker-popover {
z-index: 1000;
padding: 0;
border: none;
max-height: var(--radix-popover-content-available-height);
overflow: hidden;
}
.sc-cover-picker {
width: 552px;
max-height: inherit;
display: flex;
flex-direction: column;
background: var(--sc-ui-surface, #fff);
border-radius: 8px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
overflow: hidden;
}
.sc-cover-picker__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px 0;
flex-shrink: 0;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
/* picker 内去掉 Tabs 默认下划线与底部 margin，让 header 整体白底干净 */
}
.sc-cover-picker__header .sc-tabs-list {
border-bottom: none;
margin-bottom: 0;
}
.sc-cover-picker__remove {
padding: 4px 10px;
font-size: 12px;
border: none;
background: var(--sc-ui-hover);
color: var(--sc-ui-text);
border-radius: 4px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
@media (hover: hover) {
.sc-cover-picker__remove:hover {
background: var(--sc-ui-active);
}
}
.sc-cover-picker__body {
padding: 12px 16px 16px;
flex: 1;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
/* Radix Tabs.Content 是 picker__body 的直接子节点（active panel），让它撑满 body */
}
.sc-cover-picker__body > [role='tabpanel'] {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
/* Gallery Tab */
.sc-cover-picker__gallery {
display: flex;
flex-direction: column;
gap: 16px;
flex: 1;
min-height: 0;
max-height: 432px;
overflow-y: auto;
}
.sc-cover-picker__section-title {
font-size: 12px;
color: var(--sc-ui-text-tertiary, #999);
margin-bottom: 8px;
font-weight: 500;
}
.sc-cover-picker__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.sc-cover-picker__item {
position: relative;
height: 69px;
border: none;
border-radius: 4px;
cursor: pointer;
background-repeat: no-repeat;
padding: 0;
overflow: hidden;
}
.sc-cover-picker__item::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.16);
opacity: 0;
transition: opacity 0.15s;
pointer-events: none;
}
@media (hover: hover) {
.sc-cover-picker__item:hover:not(.is-active)::after {
opacity: 1;
}
}
.sc-cover-picker__item.is-active {
outline: 1px solid var(--sc-ui-accent, #2f80ed);
outline-offset: 1px;
}
/* Upload Tab */
.sc-cover-picker__upload {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 32px 0;
}
.sc-cover-picker__upload-hint {
font-size: 13px;
color: var(--sc-ui-text-tertiary, #999);
margin: 0;
}
.sc-cover-picker__upload-btn {
padding: 8px 20px;
font-size: 13px;
border: 1px solid var(--sc-ui-accent, #2f80ed);
background: var(--sc-ui-accent, #2f80ed);
color: #fff;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s, transform 0.1s;
}
@media (hover: hover) {
.sc-cover-picker__upload-btn:hover {
background: var(--sc-ui-accent-hover, #1f70dd);
}
}
.sc-cover-picker__upload-btn:active {
transform: scale(0.97);
}
/* Link Tab */
.sc-cover-picker__link {
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px 0;
}
.sc-cover-picker__link-input {
width: 100%;
padding: 8px 12px;
font-size: 13px;
border: 1px solid var(--sc-ui-border, #e0e0e0);
border-radius: 6px;
outline: none;
transition: border-color 0.15s;
}
.sc-cover-picker__link-input:focus {
border-color: var(--sc-ui-accent, #2f80ed);
}
.sc-cover-picker__link-submit {
align-self: flex-start;
padding: 6px 16px;
font-size: 13px;
border: none;
background: var(--sc-ui-accent, #2f80ed);
color: #fff;
border-radius: 4px;
cursor: pointer;
transition: background 0.15s;
}
@media (hover: hover) {
.sc-cover-picker__link-submit:hover:not(:disabled) {
background: var(--sc-ui-accent-hover, #1f70dd);
}
}
.sc-cover-picker__link-submit:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.sc-cover-picker__link-hint {
font-size: 12px;
color: var(--sc-ui-text-tertiary, #999);
margin: 0;
}
/* ── Page Icon ── */
.sc-page-icon {
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
.sc-page-icon.sc-page-icon-placeholder {
pointer-events: auto;
}
.sc-page-icon.with-page-cover {
margin-top: -40px;
position: relative;
}
.sc-page-icon.without-page-cover {
margin-top: var(--sc-page-top-spacing, 60px);
}
.sc-page-icon .sc-page-icon-emoji {
pointer-events: auto;
width: 80px;
height: 80px;
font-size: 68px;
display: flex;
align-items: center;
justify-content: center;
}
.sc-page-icon .sc-page-icon-emoji.sc-page-icon-clickable {
cursor: pointer;
border-radius: 8px;
transition: background 0.15s;
border: none;
background: transparent;
padding: 0;
outline: none;
}
@media (hover: hover) {
.sc-page-icon .sc-page-icon-emoji.sc-page-icon-clickable:hover {
background: var(--sc-ui-surface-hover, rgba(0, 0, 0, 0.04));
}
}
/* ── 无 icon 时的 hover 占位区域 ── */
/* hover 标题及其上方区域（.sc-page-top）时显示 */
.sc-page-icon.sc-page-icon-placeholder {
opacity: 0;
transition: opacity 0.15s;
-webkit-user-select: none;
user-select: none;
display: flex;
align-items: center;
gap: 4px;
width: auto;
height: auto;
padding: 6px 0;
/* 有封面时：placeholder 在封面和标题之间 */
}
.sc-page-icon.sc-page-icon-placeholder.with-page-cover {
margin-top: 12px;
}
/* hover 顶部区域、或 placeholder 自身、或 focus-within 时显示 */
.sc-page-top:hover .sc-page-icon.sc-page-icon-placeholder,
.sc-page-icon.sc-page-icon-placeholder:focus-within {
opacity: 1;
}
/* "已有 icon、无 cover"时的 hover 区——只显示"添加封面" */
.sc-page-extra-actions {
max-width: 860px;
margin: 0 auto;
padding: 6px 0;
opacity: 0;
transition: opacity 0.15s;
-webkit-user-select: none;
user-select: none;
}
.sc-page-top:hover .sc-page-extra-actions,
.sc-page-extra-actions:focus-within {
opacity: 1;
}
/* ── Page Header Actions 按钮 ── */
.sc-page-actions__btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
font-size: 13px;
color: var(--sc-ui-text-tertiary, #999);
background: none;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
@media (hover: hover) {
.sc-page-actions__btn:hover {
background: var(--sc-ui-surface-hover, rgba(0, 0, 0, 0.04));
color: var(--sc-ui-text-secondary, #666);
}
}
.sc-page-actions__btn-icon {
font-size: 16px;
line-height: 1;
}
/* ── Full Width 模式 ── */
.sc-page-full-width {
/* 水平内边距统一走 CSS 变量，业务方可通过 --sc-page-padding-x 覆盖 */
}
.sc-page-full-width .sc-page-body,
.sc-page-full-width .sc-page-title,
.sc-page-full-width .sc-page-icon,
.sc-page-full-width .sc-page-extra-actions,
.sc-page-full-width .sc-page-bottom {
max-width: none;
}
.sc-page-full-width .sc-page-body,
.sc-page-full-width .sc-page-title,
.sc-page-full-width .sc-page-icon,
.sc-page-full-width .sc-page-extra-actions,
.sc-page-full-width .sc-page-bottom {
padding-left: var(--sc-page-padding-x, 80px);
padding-right: var(--sc-page-padding-x, 80px);
}
/* Slash Menu 样式 */
:where([data-sc-theme='light']) {
--sc-editor-bg: #fff;
--sc-color-selection: rgba(35, 131, 226, 0.28);
--sc-inline-code-bg: #f1f1ef;
--sc-table-selection-bg: rgba(22, 119, 255, 0.08);
}
:root {
--sc-embed-selected-outline: 1px solid var(--sc-ui-primary);
--sc-embed-selected-outline-offset: -1px;
}
:where([data-sc-theme='dark']) {
--sc-editor-bg: #131414;
--sc-color-selection: rgba(78, 168, 246, 0.32);
--sc-inline-code-bg: #373737;
--sc-table-selection-bg: rgba(22, 119, 255, 0.08);
}
:root {
--sc-text-default: #1f1f1f;
--sc-text-grey: #858585;
--sc-text-blue: #2972f4;
--sc-text-sky_blue: #00a3f5;
--sc-text-green: #45b076;
--sc-text-yellow: #f5c400;
--sc-text-orange: #f88825;
--sc-text-red: #de3c36;
--sc-text-rose_red: #dd4097;
--sc-text-purple: #9a38d7;
--sc-text-code: #d34097;
--sc-text-reminder: #e07800;
}
:root[data-sc-color-scheme='dark'] {
--sc-text-default: #ededed;
--sc-text-grey: #7b7b7b;
--sc-text-blue: #4ea8f6;
--sc-text-sky_blue: #25b8f7;
--sc-text-green: #72c092;
--sc-text-yellow: #f7d425;
--sc-text-orange: #f9a24a;
--sc-text-red: #e5645a;
--sc-text-rose_red: #e464a6;
--sc-text-purple: #b15cdf;
--sc-text-code: #e464a6;
--sc-text-reminder: #e69223;
}
:root {
--sc-bg-default: transparent;
--sc-bg-grey_background: #ebebeb;
--sc-bg-light_grey_background: #f3f5f7;
--sc-bg-dark_background: #dcdfe4;
--sc-bg-light_blue_background: #e5efff;
--sc-bg-blue_background: #c7dcff;
--sc-bg-light_sky_blue_background: #e5f6ff;
--sc-bg-sky_blue_background: #c7ecff;
--sc-bg-light_green_background: #eafaf1;
--sc-bg-green_background: #ace2c5;
--sc-bg-light_yellow_background: #fff9e3;
--sc-bg-yellow_background: #ffeead;
--sc-bg-light_orange_background: #fff3eb;
--sc-bg-orange_background: #ffdcc4;
--sc-bg-light_red_background: #ffe9e8;
--sc-bg-red_background: #ffc9c7;
--sc-bg-light_rose_red_background: #ffecf4;
--sc-bg-rose_red_background: #ffc7e2;
--sc-bg-light_purple_background: #fdebff;
--sc-bg-purple_background: #f2c7ff;
}
:root[data-sc-color-scheme='dark'] {
--sc-bg-default: transparent;
--sc-bg-grey_background: #3a3a3a;
--sc-bg-light_grey_background: #2d2d2d;
--sc-bg-dark_background: #4a4a4a;
--sc-bg-light_blue_background: #3d5c87;
--sc-bg-blue_background: #223b6c;
--sc-bg-light_sky_blue_background: #285781;
--sc-bg-sky_blue_background: #14486e;
--sc-bg-light_green_background: #17392b;
--sc-bg-green_background: #1b523a;
--sc-bg-light_yellow_background: #3e340f;
--sc-bg-yellow_background: #5b4a0c;
--sc-bg-light_orange_background: #422718;
--sc-bg-orange_background: #62351c;
--sc-bg-light_red_background: #4a2022;
--sc-bg-red_background: #6f282b;
--sc-bg-light_rose_red_background: #4a1f38;
--sc-bg-rose_red_background: #6f2750;
--sc-bg-light_purple_background: #3e204c;
--sc-bg-purple_background: #5b2871;
}
:root {
--sc-border-default: transparent;
--sc-border-grey: #80868f;
--sc-border-blue: #b0cdff;
--sc-border-sky_blue: #96deee;
--sc-border-green: #a8e0c2;
--sc-border-yellow: #f9e38b;
--sc-border-orange: #ffba85;
--sc-border-red: #ffa6a3;
--sc-border-rose_red: #ffaeda;
--sc-border-purple: #e7b4ff;
}
:root[data-sc-color-scheme='dark'] {
--sc-border-default: transparent;
--sc-border-grey: #5b5c5c;
--sc-border-blue: #2f4a88;
--sc-border-sky_blue: #2b6c81;
--sc-border-green: #317c58;
--sc-border-yellow: #866c25;
--sc-border-orange: #884925;
--sc-border-red: #882c30;
--sc-border-rose_red: #882f66;
--sc-border-purple: #652d88;
}
:root {
--sc-divider-default: rgba(0, 0, 0, 0.12);
--sc-divider-black_divider: #000000;
--sc-divider-grey_divider: #858585;
--sc-divider-light_grey_divider: #dcdfe4;
--sc-divider-blue_divider: #2972f4;
--sc-divider-light_blue_divider: #b0cdff;
--sc-divider-table_blue_divider: #66b7fc;
--sc-divider-sky_blue_divider: #00a3f5;
--sc-divider-light_sky_blue_divider: #96deee;
--sc-divider-green_divider: #00b371;
--sc-divider-light_green_divider: #9ce4c3;
--sc-divider-yellow_divider: #fec100;
--sc-divider-light_yellow_divider: #ffeda5;
--sc-divider-orange_divider: #ff8000;
--sc-divider-light_orange_divider: #ffdac1;
--sc-divider-red_divider: #f22329;
--sc-divider-light_red_divider: #ffc6c5;
--sc-divider-rose_red_divider: #dd4097;
--sc-divider-light_rose_red_divider: #ffaeda;
--sc-divider-purple_divider: #a72edf;
--sc-divider-light_purple_divider: #fac5ff;
}
:root[data-sc-color-scheme='dark'] {
--sc-divider-default: #ededed;
--sc-divider-black_divider: #41444a;
--sc-divider-grey_divider: #7b7b7b;
--sc-divider-light_grey_divider: #5b5c5c;
--sc-divider-blue_divider: #4ea8f6;
--sc-divider-light_blue_divider: #2f4a88;
--sc-divider-table_blue_divider: #205da4;
--sc-divider-sky_blue_divider: #25b8f7;
--sc-divider-light_sky_blue_divider: #2b6c81;
--sc-divider-green_divider: #72c092;
--sc-divider-light_green_divider: #317c58;
--sc-divider-yellow_divider: #f7d425;
--sc-divider-light_yellow_divider: #866c25;
--sc-divider-orange_divider: #f9a24a;
--sc-divider-light_orange_divider: #884925;
--sc-divider-red_divider: #e5645a;
--sc-divider-light_red_divider: #882c30;
--sc-divider-rose_red_divider: #e464a6;
--sc-divider-light_rose_red_divider: #882f66;
--sc-divider-purple_divider: #b15cdf;
--sc-divider-light_purple_divider: #652d88;
}
:where([data-sc-theme]) {
--sc-table-selector-bg: var(--sc-color-border, #e0e0e0);
--sc-table-selector-active-bg: var(--sc-color-text-tertiary, #aaa);
--sc-table-selector-selected-bg: var(--sc-primary, #1677ff);
--sc-table-selector-selected-hover-bg: var(--sc-primary-hover, #4096ff);
--sc-table-plus-btn-hover-bg: var(--sc-primary, #1677ff);
--sc-table-background: var(--sc-editor-bg);
--sc-quote-bg: transparent;
--sc-quote-text-color: var(--sc-text-grey);
--sc-quote-border-color: var(--sc-ui-primary);
--sc-menu-handle-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
--sc-code-block-bg: var(--sc-bg-grey_background);
--sc-code-block-border: 1px solid var(--sc-ui-border, rgba(0, 0, 0, 0.08));
--sc-resizer-handle-color: #3370ff;
--sc-link-color: var(--sc-ui-primary);
--sc-link-color-hover: var(--sc-ui-primary-hover);
--sc-heading-1-color: inherit;
--sc-heading-2-color: inherit;
--sc-heading-3-color: inherit;
--sc-heading-4-color: inherit;
--sc-heading-5-color: inherit;
--sc-heading-6-color: inherit;
}
:where([data-sc-theme]) {
--sc-editor-padding: calc(16px * var(--sc-font-scale, 1));
--sc-editor-padding-top: var(--sc-editor-padding);
--sc-editor-padding-right: var(--sc-editor-padding);
--sc-editor-padding-bottom: var(--sc-editor-padding);
--sc-editor-padding-left: var(--sc-editor-padding);
--sc-block-gap: calc(8px * var(--sc-font-scale, 1));
--sc-block-gap-heading-before: calc(28px * var(--sc-font-scale, 1));
--sc-block-gap-heading-after: calc(8px * var(--sc-font-scale, 1));
--sc-block-gap-media: calc(12px * var(--sc-font-scale, 1));
--sc-block-gap-table-before: calc(20px * var(--sc-font-scale, 1));
--sc-block-gap-table-after: calc(20px * var(--sc-font-scale, 1));
--sc-block-gap-separator: calc(4px * var(--sc-font-scale, 1));
--sc-block-gap-container: calc(12px * var(--sc-font-scale, 1));
--sc-block-gap-inner: calc(4px * var(--sc-font-scale, 1));
--sc-block-indent: calc(24px * var(--sc-font-scale, 1));
--sc-block-padding-x: calc(16px * var(--sc-font-scale, 1));
--sc-block-padding-y: calc(12px * var(--sc-font-scale, 1));
--sc-column-gap: calc(12px * var(--sc-font-scale, 1));
--sc-column-radius: 12px;
--sc-column-hover-bg: var(--sc-ui-hover, #f7f7f7);
--sc-block-radius: 4px;
--sc-image-radius: 10px;
--sc-table-selector-bg: var(--sc-color-border, #e0e0e0);
--sc-table-selector-active-bg: var(--sc-color-text-tertiary, #aaa);
--sc-table-selector-selected-bg: var(--sc-primary, #1677ff);
--sc-table-selector-selected-hover-bg: var(--sc-primary-hover, #4096ff);
--sc-table-plus-btn-hover-bg: var(--sc-primary, #1677ff);
--sc-quote-border-width: 2px;
--sc-table-cell-padding: calc(8px * var(--sc-font-scale, 1));
--sc-divider-padding: calc(12px * var(--sc-font-scale, 1));
--sc-inline-code-border-radius: 2px;
--sc-inline-code-padding: 0.125em 0.3em;
--sc-quote-border-radius: 0px;
--sc-quote-padding: var(--sc-block-padding-y) var(--sc-block-padding-x);
--sc-todo-checkbox-radius: 6px;
--sc-menu-handle-radius: var(--sc-ui-radius-lg);
--sc-code-block-radius: 10px;
--sc-code-block-padding-block: calc(10px * var(--sc-font-scale, 1));
--sc-code-block-padding-inline-right: calc(16px * var(--sc-font-scale, 1));
--sc-code-block-padding-inline-left: calc(44px * var(--sc-font-scale, 1));
--sc-code-line-number-inset: calc(10px * var(--sc-font-scale, 1));
--sc-callout-radius: 10px;
}
/**
* 浮动菜单专属 Token（--sc-menu-*）
*
* 面向「划词菜单 / 代码块菜单 / 图片菜单 / block 把手 / 表格操作菜单」这 5 类浮层，
* 抽出一套统一、可被外部覆盖的视觉变量，数值对齐 ardot 设计稿 toolbar-editor 组件规范。
*
* 设计原则：
* 1. 颜色类默认回退到 UI kit 的 --sc-ui-*，因此 light/dark 自动跟随，无需在此重复声明暗色值。
* 2. 尺寸类（icon-size / font-size）只暴露「最终尺寸」变量，外部可用 calc() 按系统字号等级做乘法覆盖，
* 例如：--sc-menu-font-size: calc(var(--host-font-scale, 1) * 14px);
* 3. 声明在 :root（而非 :where([data-sc-theme])）：Radix Popover / DropdownMenu 通过 Portal 渲染到
* ，需保证 Portal 内的菜单内容也能继承到这些变量。
*/
:root {
/* ── 颜色（统一，可外部覆盖；默认回退 --sc-ui-*，暗色自动跟随） ── */
/* 操作 icon 统一颜色。设计稿为 text/primary（≈ rgba(0,0,0,.9)），故映射到 --sc-ui-text。 */
--sc-menu-icon-color: var(--sc-ui-text, #1f1f1f);
/* icon / 项选中态（主题主色蓝） */
--sc-menu-icon-color-active: var(--sc-ui-primary, #2972f4);
/* 菜单项 check 符号颜色（turn into / 对齐 / 颜色等选中标记），默认跟随主色，可外部覆盖 */
--sc-menu-check-color: var(--sc-ui-primary, #2972f4);
/* 菜单内主文字颜色 */
--sc-menu-text-color: var(--sc-ui-text, #1f1f1f);
/* 菜单内次级/说明文字颜色 */
--sc-menu-text-color-muted: var(--sc-ui-text-muted, rgba(0, 0, 0, 0.45));
/* ── 尺寸（只暴露最终值，外部可用 calc 乘法覆盖） ── */
/* 主操作 icon 尺寸（svg width/height） */
--sc-menu-icon-size: 16px;
/* 菜单内主标签字号 */
--sc-menu-font-size: 14px;
/* 菜单内次级字号（如代码语言名、分组小标题） */
--sc-menu-font-size-sm: 12px;
/* ── 容器视觉（对齐设计稿；颜色回退 --sc-ui-*，暗色自动跟随） ── */
--sc-menu-surface: var(--sc-ui-surface, #fff);
--sc-menu-border-color: var(--sc-ui-surface-border, rgba(0, 0, 0, 0.08));
--sc-menu-border-width: 1px;
--sc-menu-radius: 8px;
/* 下拉/命令/语言选择等面板圆角（与工具栏胶囊 --sc-menu-radius 分离，可单独覆盖） */
--sc-menu-panel-radius: 12px;
--sc-menu-padding-x: 4px;
--sc-menu-padding-y: 4px;
--sc-menu-gap: 4px;
/* ── 交互反馈 ── */
--sc-menu-hover-bg: var(--sc-ui-hover, rgba(0, 0, 0, 0.04));
--sc-menu-active-bg: var(--sc-ui-active, rgba(0, 0, 0, 0.08));
/* ── 分隔线 ── */
--sc-menu-separator-color: var(--sc-ui-separator, rgba(0, 0, 0, 0.06));
--sc-menu-separator-height: 16px;
/* ── 阴影：设计稿 wb/shadow/Popup-Medium 双层柔和投影（远层 4% + 近层 6%） ── */
--sc-menu-shadow: 0 6px 24px -4px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.06);
}
/* 暗色模式：仅阴影需加强（颜色类已通过 --sc-ui-* 回退自动跟随） */
:root[data-sc-color-scheme='dark'] {
--sc-menu-shadow: 0 6px 24px -4px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}
:where([data-sc-theme]) {
--sc-content-font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', Helvetica, Arial, 'Microsoft YaHei', '微软雅黑', '黑体', Heiti, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', 'Android Emoji', EmojiSymbols, TdocsUncommon;
--sc-content-font-size: calc(14px * var(--sc-font-scale, 1));
--sc-content-line-height: 1.6;
--sc-ui-font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', Helvetica, Arial, 'Microsoft YaHei', '微软雅黑', sans-serif;
--sc-ui-font-size: 12px;
--sc-ui-line-height: 1.4;
--sc-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas;
--sc-code-block-font-family: 'Source Code Pro', var(--sc-font-family-mono);
--sc-content-font-weight-bold: 600;
--sc-inline-code-font-size: 93%;
--sc-quote-line-height: 1.75;
--sc-link-text-decoration: none;
--sc-heading-1-font-weight: var(--sc-content-font-weight-bold);
--sc-heading-2-font-weight: var(--sc-content-font-weight-bold);
--sc-heading-3-font-weight: var(--sc-content-font-weight-bold);
--sc-heading-letter-spacing: normal;
--sc-heading-1-line-height: 1.4;
--sc-heading-2-line-height: 1.4;
--sc-heading-3-line-height: 1.4;
--sc-heading-4-line-height: 1.5;
--sc-heading-5-line-height: 1.5;
--sc-heading-6-line-height: 1.5;
--sc-page-title-line-height: 1.7;
}
:where([data-sc-font='simsun']) {
--sc-content-font-family: SimSun, 宋体, 'Songti SC', STSong, NSimSun, FangSong, serif;
}
:where([data-sc-font='kaiti']) {
--sc-content-font-family: KaiTi, STKaiTi, 'Kaiti SC', 华文楷体, KaiTi_GB2312, 楷体_GB2312;
}
:where([data-sc-layout='compact']) {
--sc-editor-padding: calc(12px * var(--sc-font-scale, 1));
--sc-block-gap: calc(4px * var(--sc-font-scale, 1));
--sc-block-gap-heading-before: calc(16px * var(--sc-font-scale, 1));
--sc-block-gap-heading-after: calc(4px * var(--sc-font-scale, 1));
--sc-block-gap-media: calc(8px * var(--sc-font-scale, 1));
--sc-block-gap-separator: calc(2px * var(--sc-font-scale, 1));
--sc-block-gap-container: calc(8px * var(--sc-font-scale, 1));
--sc-block-gap-inner: calc(2px * var(--sc-font-scale, 1));
--sc-block-padding-x: calc(12px * var(--sc-font-scale, 1));
--sc-block-padding-y: calc(8px * var(--sc-font-scale, 1));
--sc-block-menu-handle-gap: calc(20px * var(--sc-font-scale, 1));
--sc-column-gap: calc(12px * var(--sc-font-scale, 1));
}
:where([data-sc-layout='default']) {
--sc-editor-padding: calc(16px * var(--sc-font-scale, 1));
--sc-block-gap: calc(8px * var(--sc-font-scale, 1));
--sc-block-gap-heading-before: calc(28px * var(--sc-font-scale, 1));
--sc-block-gap-heading-after: calc(8px * var(--sc-font-scale, 1));
--sc-block-gap-media: calc(12px * var(--sc-font-scale, 1));
--sc-block-gap-separator: calc(4px * var(--sc-font-scale, 1));
--sc-block-gap-container: calc(12px * var(--sc-font-scale, 1));
--sc-block-gap-inner: calc(4px * var(--sc-font-scale, 1));
--sc-block-padding-x: calc(16px * var(--sc-font-scale, 1));
--sc-block-padding-y: calc(12px * var(--sc-font-scale, 1));
--sc-block-menu-handle-gap: calc(10px * var(--sc-font-scale, 1));
--sc-column-gap: calc(12px * var(--sc-font-scale, 1));
}
:where([data-sc-layout='loose']) {
--sc-editor-padding: calc(20px * var(--sc-font-scale, 1));
--sc-block-gap: calc(12px * var(--sc-font-scale, 1));
--sc-block-gap-heading-before: calc(32px * var(--sc-font-scale, 1));
--sc-block-gap-heading-after: calc(12px * var(--sc-font-scale, 1));
--sc-block-gap-media: calc(16px * var(--sc-font-scale, 1));
--sc-block-gap-separator: calc(8px * var(--sc-font-scale, 1));
--sc-block-gap-container: calc(16px * var(--sc-font-scale, 1));
--sc-block-gap-inner: calc(6px * var(--sc-font-scale, 1));
--sc-block-padding-x: calc(20px * var(--sc-font-scale, 1));
--sc-block-padding-y: calc(16px * var(--sc-font-scale, 1));
--sc-block-menu-handle-gap: calc(5px * var(--sc-font-scale, 1));
--sc-column-gap: calc(12px * var(--sc-font-scale, 1));
}
/** 小屏 通常可做移动端适配 **/
:where([data-sc-text-size='sm']) {
--sc-content-font-size: calc(14px * var(--sc-font-scale, 1));
--sc-page-title-font-size: calc(30px * var(--sc-font-scale, 1));
--sc-heading-1-font-size: calc(24px * var(--sc-font-scale, 1));
--sc-heading-2-font-size: calc(20px * var(--sc-font-scale, 1));
--sc-heading-3-font-size: calc(18px * var(--sc-font-scale, 1));
--sc-heading-4-font-size: calc(16px * var(--sc-font-scale, 1));
--sc-heading-5-font-size: calc(14px * var(--sc-font-scale, 1));
--sc-heading-6-font-size: calc(14px * var(--sc-font-scale, 1));
--sc-heading-1-line-height: 1.4;
--sc-heading-2-line-height: 1.4;
--sc-heading-3-line-height: 1.4;
--sc-heading-4-line-height: 1.5;
--sc-heading-5-line-height: 1.5;
--sc-heading-6-line-height: 1.5;
--sc-page-title-line-height: 1.7;
--sc-content-line-height: 1.5;
--sc-code-block-font-size: calc(12px * var(--sc-font-scale, 1));
}
:where([data-sc-text-size='md']) {
--sc-content-font-size: calc(16px * var(--sc-font-scale, 1));
--sc-page-title-font-size: calc(32px * var(--sc-font-scale, 1));
--sc-heading-1-font-size: calc(26px * var(--sc-font-scale, 1));
--sc-heading-2-font-size: calc(22px * var(--sc-font-scale, 1));
--sc-heading-3-font-size: calc(18px * var(--sc-font-scale, 1));
--sc-heading-4-font-size: calc(16px * var(--sc-font-scale, 1));
--sc-heading-5-font-size: calc(16px * var(--sc-font-scale, 1));
--sc-heading-6-font-size: calc(16px * var(--sc-font-scale, 1));
--sc-heading-1-line-height: 1.4;
--sc-heading-2-line-height: 1.4;
--sc-heading-3-line-height: 1.4;
--sc-heading-4-line-height: 1.5;
--sc-heading-5-line-height: 1.5;
--sc-heading-6-line-height: 1.5;
--sc-page-title-line-height: 1.7;
--sc-content-line-height: 1.7;
--sc-code-block-font-size: calc(14px * var(--sc-font-scale, 1));
}
:where([data-sc-text-size='lg']) {
--sc-content-font-size: calc(18px * var(--sc-font-scale, 1));
--sc-page-title-font-size: calc(40px * var(--sc-font-scale, 1));
--sc-heading-1-font-size: calc(30px * var(--sc-font-scale, 1));
--sc-heading-2-font-size: calc(25px * var(--sc-font-scale, 1));
--sc-heading-3-font-size: calc(22px * var(--sc-font-scale, 1));
--sc-heading-4-font-size: calc(20px * var(--sc-font-scale, 1));
--sc-heading-5-font-size: calc(18px * var(--sc-font-scale, 1));
--sc-heading-6-font-size: calc(18px * var(--sc-font-scale, 1));
--sc-heading-1-line-height: 1.4;
--sc-heading-2-line-height: 1.4;
--sc-heading-3-line-height: 1.4;
--sc-heading-4-line-height: 1.5;
--sc-heading-5-line-height: 1.5;
--sc-heading-6-line-height: 1.5;
--sc-page-title-line-height: 1.7;
--sc-content-line-height: 1.7;
--sc-code-block-font-size: calc(16px * var(--sc-font-scale, 1));
}
[data-sc-platform-group='mobile'][data-sc-text-size='sm'] {
--sc-page-title-font-size: calc(24px * var(--sc-font-scale, 1));
--sc-heading-1-font-size: calc(20px * var(--sc-font-scale, 1));
--sc-heading-2-font-size: calc(18px * var(--sc-font-scale, 1));
--sc-page-title-line-height: 1.5;
}
[data-sc-platform-group='mobile'][data-sc-text-size='md'] {
--sc-page-title-font-size: calc(26px * var(--sc-font-scale, 1));
--sc-heading-1-font-size: calc(22px * var(--sc-font-scale, 1));
--sc-heading-2-font-size: calc(20px * var(--sc-font-scale, 1));
--sc-page-title-line-height: 1.5;
}
[data-sc-platform-group='mobile'][data-sc-text-size='lg'] {
--sc-page-title-font-size: calc(34px * var(--sc-font-scale, 1));
--sc-heading-1-font-size: calc(26px * var(--sc-font-scale, 1));
--sc-heading-2-font-size: calc(23px * var(--sc-font-scale, 1));
--sc-page-title-line-height: 1.5;
}
.sc-editor {
position: relative;
/* overlay 的 absolute 定位参照系 */
background: var(--sc-editor-bg);
color: var(--sc-text-default);
padding: var(--sc-editor-padding-top) var(--sc-editor-padding-right) var(--sc-editor-padding-bottom) var(--sc-editor-padding-left);
-webkit-font-smooth: antialiased;
/* 表格 block 可向外延伸到 .sc-editor 内容沿，但不允许溢出到页面外
* 用 overflow-x: clip 而非 hidden，避免给子元素的 sticky/transform 创建 BFC */
overflow-x: clip;
}
/* containerScroll 模式：.sc-editor 自己作为滚动宿主
* - 自身 height:100% + overflow:hidden（不滚），让内部 .sc-editor-content 滚动
* - padding 由内层 .sc-editor-content 承担，避免外圈滚动条与 padding 错位
* - .sc-editor-overlay 是 .sc-editor 直接子元素，与内层平级，不参与滚动 → 浮层贴边角 */
.sc-editor.is-container-scroll {
height: 100%;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.sc-editor.is-container-scroll > .sc-editor-content {
position: relative;
/* .sc-editor-content-overlay 的 absolute 定位参照系 */
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: clip;
/* 预留纵向滚动条槽位：内容从不满一屏变为溢出时，经典滚动条不再挤窄正文。
* overlay 滚动条（macOS 默认）不占布局，本属性无额外占位。
* 不支持 scrollbar-gutter 的浏览器忽略该声明。 */
scrollbar-gutter: stable;
padding: var(--sc-editor-padding-top) var(--sc-editor-padding-right) var(--sc-editor-padding-bottom) var(--sc-editor-padding-left);
}
/* 评论按钮（24px 宽 + 4px gap = 28px）默认渲染在 page-body.right 外侧，
* 会被本容器的 overflow-x: clip 裁剪。
* 当评论 aside 未激活时（外部业务面板 / 无面板场景），
* 强制 padding-right ≥ 32px，让 page-body 自动让出按钮位，避免裁剪。
*
* - aside 激活时（.sc-comment-aside 非空）：本规则不生效，由 aside.less 接管 padding
* - 外部仍可用 --sc-editor-padding-right 覆盖（设 ≥ 32px 时不影响；< 32px 时被 max 兜底）
* --sc-comment-button-safe-padding 可让接入方调整这个最小预留宽度。 */
.sc-editor.is-container-scroll:not([data-sc-comment-aside-open]) > .sc-editor-content {
padding-right: max(var(--sc-editor-padding-right), var(--sc-comment-button-safe-padding, 32px));
}
.sc-editor-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: visible;
/* 允许工具栏等溢出编辑器边界 */
z-index: 100;
}
/* containerScroll 模式下位于 .sc-editor-content 内部的 overlay 容器。
* position: absolute; top: 0 相对于 .sc-editor-content（position: relative）定位。
* FloatingToolbar 通过 Portal 挂入此容器，坐标 = selRect - overlayRect，
* overlayRect.top 随滚动变为负数，差值自然等于选区在内容中的绝对位置，无需 scroll 监听。 */
.sc-editor-content-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
pointer-events: none;
overflow: visible;
z-index: 100;
}
.sc-ui {
font-family: var(--sc-ui-font-family);
font-size: var(--sc-ui-font-size);
line-height: var(--sc-ui-line-height);
}
/* ── Block Flash（注意力引导高亮） ────────────────────────────── */
/* scrollToBlock({ highlight: true }) 或 highlightBlock() 触发的临时高亮。
* 由 JS 添加类名 → 1.2s 后移除，transition 自动淡出。 */
.sc-block--flash {
background-color: var(--sc-ui-active);
transition: background-color 0.4s ease;
}
:where([data-sc-theme]) [data-text-color='default'] {
color: var(--sc-text-default);
}
:where([data-sc-theme]) [data-text-color='grey'] {
color: var(--sc-text-grey);
}
:where([data-sc-theme]) [data-text-color='blue'] {
color: var(--sc-text-blue);
}
:where([data-sc-theme]) [data-text-color='sky_blue'] {
color: var(--sc-text-sky_blue);
}
:where([data-sc-theme]) [data-text-color='green'] {
color: var(--sc-text-green);
}
:where([data-sc-theme]) [data-text-color='yellow'] {
color: var(--sc-text-yellow);
}
:where([data-sc-theme]) [data-text-color='orange'] {
color: var(--sc-text-orange);
}
:where([data-sc-theme]) [data-text-color='red'] {
color: var(--sc-text-red);
}
:where([data-sc-theme]) [data-text-color='rose_red'] {
color: var(--sc-text-rose_red);
}
:where([data-sc-theme]) [data-text-color='purple'] {
color: var(--sc-text-purple);
}
:where([data-sc-theme]) [data-text-color='code'] {
color: var(--sc-text-code);
}
:where([data-sc-theme]) [data-text-color='reminder'] {
color: var(--sc-text-reminder);
}
:where([data-sc-theme]) [data-bg-color='default'] {
background-color: var(--sc-bg-default);
}
:where([data-sc-theme]) [data-bg-color='grey_background'] {
background-color: var(--sc-bg-grey_background);
}
:where([data-sc-theme]) [data-bg-color='light_grey_background'] {
background-color: var(--sc-bg-light_grey_background);
}
:where([data-sc-theme]) [data-bg-color='dark_background'] {
background-color: var(--sc-bg-dark_background);
}
:where([data-sc-theme]) [data-bg-color='light_blue_background'] {
background-color: var(--sc-bg-light_blue_background);
}
:where([data-sc-theme]) [data-bg-color='blue_background'] {
background-color: var(--sc-bg-blue_background);
}
:where([data-sc-theme]) [data-bg-color='light_sky_blue_background'] {
background-color: var(--sc-bg-light_sky_blue_background);
}
:where([data-sc-theme]) [data-bg-color='sky_blue_background'] {
background-color: var(--sc-bg-sky_blue_background);
}
:where([data-sc-theme]) [data-bg-color='light_green_background'] {
background-color: var(--sc-bg-light_green_background);
}
:where([data-sc-theme]) [data-bg-color='green_background'] {
background-color: var(--sc-bg-green_background);
}
:where([data-sc-theme]) [data-bg-color='light_yellow_background'] {
background-color: var(--sc-bg-light_yellow_background);
}
:where([data-sc-theme]) [data-bg-color='yellow_background'] {
background-color: var(--sc-bg-yellow_background);
}
:where([data-sc-theme]) [data-bg-color='light_orange_background'] {
background-color: var(--sc-bg-light_orange_background);
}
:where([data-sc-theme]) [data-bg-color='orange_background'] {
background-color: var(--sc-bg-orange_background);
}
:where([data-sc-theme]) [data-bg-color='light_red_background'] {
background-color: var(--sc-bg-light_red_background);
}
:where([data-sc-theme]) [data-bg-color='red_background'] {
background-color: var(--sc-bg-red_background);
}
:where([data-sc-theme]) [data-bg-color='light_rose_red_background'] {
background-color: var(--sc-bg-light_rose_red_background);
}
:where([data-sc-theme]) [data-bg-color='rose_red_background'] {
background-color: var(--sc-bg-rose_red_background);
}
:where([data-sc-theme]) [data-bg-color='light_purple_background'] {
background-color: var(--sc-bg-light_purple_background);
}
:where([data-sc-theme]) [data-bg-color='purple_background'] {
background-color: var(--sc-bg-purple_background);
}
:where([data-sc-theme]) [data-border-color='default'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-default);
}
:where([data-sc-theme]) [data-border-color='grey'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-grey);
}
:where([data-sc-theme]) [data-border-color='blue'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-blue);
}
:where([data-sc-theme]) [data-border-color='sky_blue'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-sky_blue);
}
:where([data-sc-theme]) [data-border-color='green'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-green);
}
:where([data-sc-theme]) [data-border-color='yellow'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-yellow);
}
:where([data-sc-theme]) [data-border-color='orange'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-orange);
}
:where([data-sc-theme]) [data-border-color='red'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-red);
}
:where([data-sc-theme]) [data-border-color='rose_red'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-rose_red);
}
:where([data-sc-theme]) [data-border-color='purple'] {
border-width: 1px;
border-style: solid;
border-color: var(--sc-border-purple);
}
:where([data-sc-theme]) [data-divider-color='default'] {
border-color: var(--sc-divider-default);
}
:where([data-sc-theme]) [data-divider-color='black_divider'] {
border-color: var(--sc-divider-black_divider);
}
:where([data-sc-theme]) [data-divider-color='grey_divider'] {
border-color: var(--sc-divider-grey_divider);
}
:where([data-sc-theme]) [data-divider-color='light_grey_divider'] {
border-color: var(--sc-divider-light_grey_divider);
}
:where([data-sc-theme]) [data-divider-color='blue_divider'] {
border-color: var(--sc-divider-blue_divider);
}
:where([data-sc-theme]) [data-divider-color='light_blue_divider'] {
border-color: var(--sc-divider-light_blue_divider);
}
:where([data-sc-theme]) [data-divider-color='table_blue_divider'] {
border-color: var(--sc-divider-table_blue_divider);
}
:where([data-sc-theme]) [data-divider-color='sky_blue_divider'] {
border-color: var(--sc-divider-sky_blue_divider);
}
:where([data-sc-theme]) [data-divider-color='light_sky_blue_divider'] {
border-color: var(--sc-divider-light_sky_blue_divider);
}
:where([data-sc-theme]) [data-divider-color='green_divider'] {
border-color: var(--sc-divider-green_divider);
}
:where([data-sc-theme]) [data-divider-color='light_green_divider'] {
border-color: var(--sc-divider-light_green_divider);
}
:where([data-sc-theme]) [data-divider-color='yellow_divider'] {
border-color: var(--sc-divider-yellow_divider);
}
:where([data-sc-theme]) [data-divider-color='light_yellow_divider'] {
border-color: var(--sc-divider-light_yellow_divider);
}
:where([data-sc-theme]) [data-divider-color='orange_divider'] {
border-color: var(--sc-divider-orange_divider);
}
:where([data-sc-theme]) [data-divider-color='light_orange_divider'] {
border-color: var(--sc-divider-light_orange_divider);
}
:where([data-sc-theme]) [data-divider-color='red_divider'] {
border-color: var(--sc-divider-red_divider);
}
:where([data-sc-theme]) [data-divider-color='light_red_divider'] {
border-color: var(--sc-divider-light_red_divider);
}
:where([data-sc-theme]) [data-divider-color='rose_red_divider'] {
border-color: var(--sc-divider-rose_red_divider);
}
:where([data-sc-theme]) [data-divider-color='light_rose_red_divider'] {
border-color: var(--sc-divider-light_rose_red_divider);
}
:where([data-sc-theme]) [data-divider-color='purple_divider'] {
border-color: var(--sc-divider-purple_divider);
}
:where([data-sc-theme]) [data-divider-color='light_purple_divider'] {
border-color: var(--sc-divider-light_purple_divider);
}
.sc-block-text-content {
white-space: pre-wrap;
word-break: break-word;
outline: none;
/*
* 空标题占位符：当 leaf 容器为空时，显示 data-placeholder 内容。
* - pointer-events: none 避免拦截光标点击
* - user-select: none 避免选中占位符本身
* - 颜色使用现有的弱化文本色变量，保持主题一致
*/
}
.sc-block-text-content:empty::before {
content: ' ';
}
.sc-block-text-content[data-placeholder]:empty::before {
content: attr(data-placeholder);
color: var(--sc-ui-text-muted, rgba(0, 0, 0, 0.45));
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
.sc-mark-code {
font-family: var(--sc-font-family-mono);
}
.sc-mark-link {
color: var(--sc-link-color);
-webkit-text-decoration: var(--sc-link-text-decoration);
text-decoration: var(--sc-link-text-decoration);
cursor: pointer;
padding-inline: 4px;
padding-block: max(0px, calc((1lh - 1.25em) / 2));
border-radius: 4px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.sc-mark-link:hover {
background: var(--sc-ui-active);
}
.sc-mark-link > span[style] {
text-decoration: inherit;
}
.sc-block-text,
.sc-block-header1,
.sc-block-header2,
.sc-block-header3,
.sc-block-header4,
.sc-block-header4,
.sc-block-header5 {
text-align: left;
}
.sc-block-text[data-text-align='center'],
.sc-block-header1[data-text-align='center'],
.sc-block-header2[data-text-align='center'],
.sc-block-header3[data-text-align='center'],
.sc-block-header4[data-text-align='center'],
.sc-block-header4[data-text-align='center'],
.sc-block-header5[data-text-align='center'] {
text-align: center;
}
.sc-block-text[data-text-align='right'],
.sc-block-header1[data-text-align='right'],
.sc-block-header2[data-text-align='right'],
.sc-block-header3[data-text-align='right'],
.sc-block-header4[data-text-align='right'],
.sc-block-header4[data-text-align='right'],
.sc-block-header5[data-text-align='right'] {
text-align: right;
}
.sc-inline-code {
background-color: var(--sc-inline-code-bg);
border-radius: var(--sc-inline-code-border-radius);
font-size: var(--sc-inline-code-font-size);
padding: var(--sc-inline-code-padding);
font-family: var(--sc-font-family-mono);
vertical-align: 1px;
}
/* ── Inline Token 基础排版 ──────────────────────────────────── */
/* atom 外壳（contentEditable=false 的 span）：
确保行高与所在文本行一致，选中高亮不错位。 */
.sc-inline-token--atom {
display: inline-flex;
align-items: baseline;
line-height: inherit;
vertical-align: baseline;
}
.sc-block {
position: relative;
margin-top: var(--sc-block-gap);
margin-bottom: var(--sc-block-gap);
}
.sc-block.sc-block-header1,
.sc-block.sc-block-header2,
.sc-block.sc-block-header3,
.sc-block.sc-block-header4,
.sc-block.sc-block-header5,
.sc-block.sc-block-header6 {
margin-top: var(--sc-block-gap-heading-before);
margin-bottom: var(--sc-block-gap-heading-after);
}
.sc-block.sc-block-image,
.sc-block.sc-block-equation,
.sc-block.sc-block-simple_table,
.sc-block.sc-block-column_list {
margin-top: var(--sc-block-gap-media);
margin-bottom: var(--sc-block-gap-media);
}
.sc-block.sc-block-callout,
.sc-block.sc-block-quote,
.sc-block.sc-block-code {
margin-top: var(--sc-block-gap-container);
margin-bottom: var(--sc-block-gap-container);
}
.sc-block.sc-block-divider {
margin-top: var(--sc-block-gap-separator);
margin-bottom: var(--sc-block-gap-separator);
}
.sc-block.sc-block-column {
margin-top: 0;
margin-bottom: 0;
}
.sc-page-body > .sc-block-children > .sc-block:first-child {
margin-top: 0;
}
.sc-page-body > .sc-block-children > .sc-block:last-child {
margin-bottom: 0;
}
.sc-block-callout .sc-block-children > .sc-block,
.sc-block-column .sc-block-children > .sc-block {
margin-top: var(--sc-block-gap-inner);
margin-bottom: var(--sc-block-gap-inner);
}
/* 普通 block children 缩进 */
.sc-block-children[data-layout='indented'] {
padding-left: var(--sc-block-indent);
}
.sc-block.sc-block-header1 .sc-block-content {
font-size: var(--sc-heading-1-font-size);
line-height: var(--sc-heading-1-line-height);
color: var(--sc-heading-1-color);
font-weight: var(--sc-heading-1-font-weight);
letter-spacing: var(--sc-heading-letter-spacing);
}
.sc-block.sc-block-header2 .sc-block-content {
font-size: var(--sc-heading-2-font-size);
line-height: var(--sc-heading-2-line-height);
color: var(--sc-heading-2-color);
font-weight: var(--sc-heading-2-font-weight);
letter-spacing: var(--sc-heading-letter-spacing);
}
.sc-block.sc-block-header3 .sc-block-content {
font-size: var(--sc-heading-3-font-size);
line-height: var(--sc-heading-3-line-height);
color: var(--sc-heading-3-color);
font-weight: var(--sc-heading-3-font-weight);
letter-spacing: var(--sc-heading-letter-spacing);
}
.sc-block.sc-block-header4 .sc-block-content {
font-size: var(--sc-heading-4-font-size);
line-height: var(--sc-heading-4-line-height);
color: var(--sc-heading-4-color);
font-weight: var(--sc-heading-3-font-weight);
letter-spacing: var(--sc-heading-letter-spacing);
}
.sc-block.sc-block-header5 .sc-block-content {
font-size: var(--sc-heading-5-font-size);
line-height: var(--sc-heading-5-line-height);
color: var(--sc-heading-5-color);
font-weight: var(--sc-heading-3-font-weight);
letter-spacing: var(--sc-heading-letter-spacing);
}
.sc-block.sc-block-header6 .sc-block-content {
font-size: var(--sc-heading-6-font-size);
line-height: var(--sc-heading-6-line-height);
color: var(--sc-heading-6-color);
font-weight: var(--sc-heading-3-font-weight);
letter-spacing: var(--sc-heading-letter-spacing);
}
.sc-block-callout > .sc-block-content {
display: flex;
box-sizing: border-box;
padding: var(--sc-block-padding-y) var(--sc-block-padding-x);
border-radius: var(--sc-callout-radius);
}
.sc-block-callout .sc-block-marker {
width: 28px;
min-width: 28px;
min-height: 28px;
height: calc(1lh);
margin-right: 8px;
padding: 0;
border-radius: var(--sc-callout-radius);
display: flex;
align-items: center;
justify-content: center;
}
@supports not (height: 1lh) {
.sc-block-callout .sc-block-marker {
height: calc(var(--sc-content-line-height) * 1em);
}
}
.sc-block-callout .sc-callout-icon {
width: 100%;
height: 100%;
font-size: 20px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--sc-callout-radius);
}
.sc-block-bulleted_list > .sc-block-content,
.sc-block-numbered_list > .sc-block-content,
.sc-block-to_do > .sc-block-content {
display: flex;
}
.sc-block-bulleted_list > .sc-block-content > .sc-block-text-content,
.sc-block-numbered_list > .sc-block-content > .sc-block-text-content,
.sc-block-to_do > .sc-block-content > .sc-block-text-content {
flex: 1;
min-width: 0;
}
.sc-block-bulleted_list .sc-block-marker {
display: flex;
align-items: center;
min-width: 20px;
margin-right: 4px;
flex: 0 0 auto;
height: calc(1lh);
padding-left: 2px;
}
@supports not (height: 1lh) {
.sc-block-bulleted_list .sc-block-marker {
height: calc(var(--sc-content-line-height) * 1em);
}
}
.sc-block-numbered_list .sc-block-marker {
min-width: 20px;
margin-right: 4px;
flex: 0 0 auto;
height: calc(1lh);
padding-left: 2px;
}
@supports not (height: 1lh) {
.sc-block-numbered_list .sc-block-marker {
height: calc(var(--sc-content-line-height) * 1em);
}
}
.sc-block-to_do .sc-block-marker {
width: 20px;
margin-right: 8px;
height: calc(1lh);
display: flex;
align-items: center;
padding-left: 2px;
}
@supports not (height: 1lh) {
.sc-block-to_do .sc-block-marker {
height: calc(var(--sc-content-line-height) * 1em);
}
}
.sc-list-marker {
display: block;
}
.sc-list-marker[data-kind='bulleted_list'].sc-list-marker[data-style='solid_circle'] {
width: 6px;
height: 6px;
border-radius: 6px;
background: currentcolor;
}
.sc-list-marker[data-kind='bulleted_list'].sc-list-marker[data-style='solid_square'] {
width: 5px;
height: 5px;
background: currentcolor;
}
.sc-list-marker[data-kind='bulleted_list'].sc-list-marker[data-style='hollow_circle'] {
width: 6px;
height: 6px;
border-radius: 6px;
border: 1px solid currentcolor;
box-sizing: border-box;
}
.sc-block-column_list {
margin-inline: -8px;
}
.sc-block-column_list > .sc-block-content {
position: relative;
}
.sc-block-column_list > .sc-block-content > .sc-column-list__wrap {
position: relative;
padding-bottom: 4px;
}
.sc-block-column_list > .sc-block-content > .sc-column-list__wrap > .sc-block-children {
display: flex;
gap: var(--sc-column-gap);
}
.sc-block-column_list > .sc-block-content > .sc-column-list__wrap > .sc-block-children > .sc-block-column {
flex: none;
}
@media (max-width: 640px) {
.sc-block-column_list > .sc-block-content > .sc-column-list__wrap > .sc-block-children {
flex-direction: column;
gap: 0;
}
.sc-block-column_list > .sc-block-content > .sc-column-list__wrap > .sc-block-children > .sc-block-column {
flex: unset !important;
width: auto !important;
}
.sc-block-column_list > .sc-block-content > .sc-column-list__wrap > .sc-block-children > .sc-block-column:not(:last-child) {
margin-bottom: 4px;
}
.sc-block-column_list > .sc-block-content > .sc-column-list__wrap > .sc-block-children > .sc-block-column .sc-block-image img {
display: block;
margin-left: auto;
margin-right: auto;
}
}
.sc-block-column .sc-block-text > .sc-block-content,
.sc-block-column .sc-block-header1 > .sc-block-content,
.sc-block-column .sc-block-header2 > .sc-block-content,
.sc-block-column .sc-block-header3 > .sc-block-content,
.sc-block-column .sc-block-header4 > .sc-block-content,
.sc-block-column .sc-block-header5 > .sc-block-content,
.sc-block-column .sc-block-header6 > .sc-block-content,
.sc-block-column .sc-block-numbered_list > .sc-block-content,
.sc-block-column .sc-block-bulleted_list > .sc-block-content,
.sc-block-column .sc-block-to_do > .sc-block-content {
padding: 0 4px;
}
.sc-column-list__dividers-layer {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.sc-column-list__divider-slot {
position: absolute;
top: 0;
bottom: 0;
width: 0;
pointer-events: none;
}
.sc-column-divider {
position: absolute;
top: 0;
bottom: 0;
left: -9px;
width: 18px;
pointer-events: auto;
cursor: default;
-webkit-user-select: none;
user-select: none;
display: flex;
justify-content: center;
align-items: stretch;
z-index: 1;
}
.sc-column-divider > .sc-column-divider__line {
width: 2px;
height: 100%;
background: transparent;
transition: background-color 0.1s ease;
}
.sc-column-divider.is-hover > .sc-column-divider__line {
background: color-mix(in srgb, var(--sc-ui-primary) 45%, transparent);
}
.sc-column-divider.is-dragging > .sc-column-divider__line {
background: var(--sc-ui-primary);
}
.sc-column-divider.sc-column-divider--resizable {
cursor: col-resize;
}
.sc-column-divider__add-wrap {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
transform: translate(-50%, -50%) scale(0.8);
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.12s ease, transform 0.12s ease;
}
.sc-column-divider.is-hover > .sc-column-divider__add-wrap {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
pointer-events: auto;
}
.sc-column-divider__add-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: color-mix(in srgb, var(--sc-ui-primary) 45%, transparent);
pointer-events: none;
}
.sc-column-divider__add {
position: relative;
width: 18px;
height: 18px;
border-radius: 50%;
border: none;
padding: 0;
background: var(--sc-ui-primary);
color: var(--sc-ui-text-on-primary, #fff);
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.sc-column-divider__add::before,
.sc-column-divider__add::after {
content: '';
position: absolute;
background-color: currentColor;
border-radius: 1px;
}
.sc-column-divider__add::before {
top: 50%;
left: 50%;
width: 10px;
height: 2px;
margin-left: -5px;
margin-top: -1px;
}
.sc-column-divider__add::after {
top: 50%;
left: 50%;
width: 2px;
height: 10px;
margin-left: -1px;
margin-top: -5px;
}
.sc-column-divider__add:hover {
background: var(--sc-ui-primary);
}
.sc-column-list__badges-layer {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
}
.sc-column-list__badge {
position: absolute;
top: 0;
width: 30px;
height: 16px;
border-radius: 4px;
background: var(--sc-ui-text-muted);
color: var(--sc-ui-text-on-primary, #fff);
font-size: 10px;
line-height: 11px;
text-align: center;
font-weight: 400;
white-space: nowrap;
padding: 2px 4px;
}
.sc-column-list__equal-btn {
position: absolute;
top: 0;
right: calc(-28px - var(--sc-column-gap));
width: 28px;
height: 28px;
border-radius: var(--sc-ui-radius-sm);
border: 1px solid var(--sc-ui-border, rgba(0, 0, 0, 0.08));
background: var(--sc-ui-surface, #fff);
color: var(--sc-ui-text-muted, rgba(0, 0, 0, 0.55));
padding: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 3;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.sc-column-list__equal-btn > svg {
display: block;
}
.sc-column-list__equal-btn:hover {
background: var(--sc-ui-hover);
color: var(--sc-ui-primary);
}
.sc-block-column {
position: relative;
}
.sc-block-column::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
border-radius: var(--sc-column-radius);
background: var(--sc-column-hover-bg);
pointer-events: none;
opacity: 0;
transition: opacity 0.25s ease;
}
.sc-block-column > .sc-block-content {
position: relative;
z-index: 1;
}
.sc-block-column:has(.sc-block-menu-handle) > .sc-block-content {
z-index: 3;
}
.sc-column-list__wrap:hover .sc-block-column::before,
.sc-block-column.is-selection-active::before {
opacity: 1;
}
.sc-editor.sc-column-divider-dragging {
cursor: col-resize;
-webkit-user-select: none;
user-select: none;
}
/*
* Code block: 单层 Decoration 方案。
*
* 编辑层通过 InlineDecoration 直接着色（span + inline style），
* 不再需要独立的高亮层。
*/
/* 内置代码字体不使用 local()，保证不同设备加载同一版本。 */
@font-face {
font-family: 'Source Code Pro';
src: url(../image/SourceCodePro-Regular.ttf.bf82ff7b.woff2) format('woff2');
font-style: normal;
font-weight: 400;
font-display: swap;
unicode-range: U+20-7e, U+a0-ff, U+131, U+152-153, U+2bb-2bc, U+2c6, U+2da, U+2dc, U+300-301, U+303-304, U+308-309, U+323, U+329, U+2013-2014, U+2018-201a, U+201c-201e, U+2022, U+2026, U+2032-2033, U+2039-203a, U+2044, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff;
}
@font-face {
font-family: 'Source Code Pro';
src: url(../image/SourceCodePro-It.ttf.21bfb13a.woff2) format('woff2');
font-style: italic;
font-weight: 400;
font-display: swap;
unicode-range: U+20-7e, U+a0-ff, U+131, U+152-153, U+2bb-2bc, U+2c6, U+2da, U+2dc, U+300-301, U+303-304, U+308-309, U+323, U+329, U+2013-2014, U+2018-201a, U+201c-201e, U+2022, U+2026, U+2032-2033, U+2039-203a, U+2044, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff;
}
@font-face {
font-family: 'Source Code Pro';
src: url(../image/SourceCodePro-Bold.ttf.1a6edaa3.woff2) format('woff2');
font-style: normal;
font-weight: 700;
font-display: swap;
unicode-range: U+20-7e, U+a0-ff, U+131, U+152-153, U+2bb-2bc, U+2c6, U+2da, U+2dc, U+300-301, U+303-304, U+308-309, U+323, U+329, U+2013-2014, U+2018-201a, U+201c-201e, U+2022, U+2026, U+2032-2033, U+2039-203a, U+2044, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff;
}
@font-face {
font-family: 'Source Code Pro';
src: url(../image/SourceCodePro-BoldIt.ttf.1fd3be99.woff2) format('woff2');
font-style: italic;
font-weight: 700;
font-display: swap;
unicode-range: U+20-7e, U+a0-ff, U+131, U+152-153, U+2bb-2bc, U+2c6, U+2da, U+2dc, U+300-301, U+303-304, U+308-309, U+323, U+329, U+2013-2014, U+2018-201a, U+201c-201e, U+2022, U+2026, U+2032-2033, U+2039-203a, U+2044, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff;
}
.sc-block-code .sc-code-block-content {
position: relative;
background-color: var(--sc-code-block-bg);
border: var(--sc-code-block-border);
border-radius: var(--sc-code-block-radius);
overflow-x: auto;
content-visibility: auto;
contain-intrinsic-size: auto 96px;
}
.sc-block-code .sc-code-block-pre {
position: relative;
margin: 0;
padding: var(--sc-code-block-padding-block) var(--sc-code-block-padding-inline-right) var(--sc-code-block-padding-block) var(--sc-code-block-padding-inline-left);
min-width: -webkit-fit-content;
min-width: fit-content;
font-family: var(--sc-code-block-font-family, var(--sc-font-family-mono));
font-size: var(--sc-code-block-font-size);
line-height: var(--sc-content-line-height);
}
.sc-block-code .sc-code-block-wrap .sc-code-editable {
white-space: pre-wrap;
word-break: break-all;
}
.sc-block-code .sc-code-line-numbers {
position: absolute;
top: 0;
left: 0;
width: var(--sc-code-block-padding-inline-left);
padding-top: var(--sc-code-block-padding-block);
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
.sc-block-code .sc-code-line-number {
position: absolute;
left: var(--sc-code-line-number-inset);
color: var(--sc-text-grey);
}
.sc-block-code .sc-code-editable {
display: block;
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: var(--sc-code-block-font-family, var(--sc-font-family-mono));
tab-size: 4;
white-space: pre;
word-break: normal;
overflow-wrap: normal;
position: relative;
color: var(--sc-text-default);
caret-color: var(--sc-text-default);
outline: none;
}
.sc-block-code .sc-code-editable::selection {
background: var(--sc-color-selection, rgba(35, 131, 226, 0.28));
}
/* 控制条需要溢出显示，sc-block-content 不裁剪（横向溢出由父级编辑器容器自然处理） */
.sc-block-simple_table > .sc-block-content {
overflow: visible;
}
/*
* 表格 block 在常规 --sc-block-gap-media 之外额外增加上下间距，给 col-selector / row-selector /
* + 按钮 hot zone 留出视觉缓冲，避免与相邻 block 视觉重合。
*
* 选择器与 page.less 中 `.sc-block.sc-block-simple_table` 等特异性（0,2,0），
* 且本文件 @import 顺序在 page.less 之后，确保此处覆盖生效。
* 否则会退化为基础 --sc-block-gap-media（12px），col-selector 12px 高会直接贴上一个 block。
*/
.sc-block.sc-block-simple_table {
margin-top: var(--sc-block-gap-table-before);
margin-bottom: var(--sc-block-gap-table-after);
}
.sc-block.sc-block-simple_table:has(.sc-block-content.is-structure_disabled) {
margin-top: calc(var(--sc-block-gap-media) + 12px);
}
.sc-block-simple_table table {
border-collapse: collapse;
table-layout: fixed;
border-spacing: 0;
/* 表格底色：保持不透明，避免 block 高亮（sc-block--flash）等上层装饰色
* 穿透到下层背景造成"空心"视觉。仅作用于 table 本身，不含周边控件区域。
* header cell 的 --sc-bg-grey_background 与 cell 的 data-bg-color 特异性更高，正常覆盖。 */
background-color: var(--sc-table-background);
}
.sc-block-simple_table table:focus-visible {
outline: 0;
}
/* tableType='fit'：表格至少撑满容器宽度，列按固定宽度比例分配剩余空间；
* 列总宽超出容器时保持原有宽度，由 viewport 层提供横向滚动。 */
.sc-table-wrapper.is-table-fit table {
min-width: 100%;
}
.sc-block-simple_table_row {
border: 1px solid var(--sc-border-grey);
vertical-align: top;
overflow: hidden;
word-break: break-word;
}
.sc-block-simple_table_cell {
border: 1px solid var(--sc-border-grey);
vertical-align: top;
/* table-layout:fixed 下 cell 必须 overflow:hidden 才能阻止子内容
* 的 min-width 撑开列宽。cell 内 handle 已由 TableCellHandleLayer
* 在 wrapper 层独立渲染，不再依赖 cell overflow:visible。 */
overflow: hidden;
word-break: break-word;
}
.sc-block-simple_table_cell {
padding: var(--sc-table-cell-padding);
position: relative;
}
/* 单元格选择光标由 JS 动态控制（通过 --sc-table-cursor 变量），避免空白区域误显示 */
.sc-block-simple_table_cell.is-table-header {
background-color: var(--sc-bg-grey_background, #f5f5f5);
font-weight: 500;
}
/* TODO: 标题行吸顶——当前 .sc-table-viewport 的 clip-path 会创建 containing block，
* 导致 position: sticky 参照 viewport 而非页面滚动容器，无法正常吸顶。
* 后续需用 JS（IntersectionObserver + transform）方案实现。 */
/* 左上角（同时是行标题和列标题）z-index 更高 */
.sc-block-simple_table_cell.is-row-header.is-col-header {
z-index: 3;
}
.sc-block-simple_table_cell.is-in-selection {
box-shadow: inset 0 0 0 9999px var(--sc-table-selection-bg);
}
/* 分割线 block
*
* 视觉布局：
* sc-block-content 作为「分隔区」hitzone：
* - 固定 min-height + padding-block 让分割线上下都有稳定的呼吸感
* - flex 居中，让 hr 横线垂直居中
* - cursor: pointer 提示可点击选中
*
由 React 渲染，浏览器默认样式重置后只保留 border-bottom 作为视觉线条
*/
.sc-divider-line {
display: block;
width: 100%;
margin: 0;
border: 0;
border-bottom: 1px solid var(--sc-divider-default);
transition: border-color 0.1s ease;
}
.sc-block-divider .sc-block-content {
display: flex;
align-items: center;
min-height: calc(var(--sc-divider-padding) * 2);
/* padding-block 控制分割线上下的呼吸感与点击 hitzone */
padding-block: var(--sc-divider-padding);
cursor: pointer;
}
/**
* Image block 对齐（容器级）。
*
* 消费 `BlockShell` 注入的 `data-align` 属性，把 `.sc-block-content`
* 的 flex 对齐切换为 left / center / right。
*
* Block 内部（占位、图片、caption、工具按钮等）的样式在
* `packages/editor/src/view/blocks/image/image-block.less` 中定义。
*/
.sc-block-image .sc-block-content {
display: flex;
justify-content: center;
}
.sc-block-image[data-align='center'] .sc-block-content {
justify-content: center;
}
.sc-block-image[data-align='left'] .sc-block-content {
justify-content: flex-start;
}
.sc-block-image[data-align='right'] .sc-block-content {
justify-content: flex-end;
}
.sc-block-quote > .sc-block-content {
border-left: var(--sc-quote-border-width) solid var(--sc-quote-border-color);
padding: var(--sc-quote-padding);
color: var(--sc-quote-text-color);
background: var(--sc-quote-bg);
border-radius: var(--sc-quote-border-radius);
}
.sc-block.sc-block-quote > .sc-block-content {
line-height: var(--sc-quote-line-height);
}
.sc-block-equation .sc-block-content {
display: flex;
justify-content: center;
width: 100%;
}
.sc-block .sc-block-content {
font-size: var(--sc-content-font-size);
line-height: var(--sc-content-line-height);
}
.sc-block[data-border-color]:not(.sc-block-simple_table_cell),
.sc-block[data-bg-color]:not(.sc-block-simple_table_cell) {
border-radius: var(--sc-block-radius);
}
.sc-block-children.is-trim-top > .sc-block:first-of-type {
margin-top: 0;
}
.sc-block-children.is-trim-bottom > .sc-block:last-of-type {
margin-bottom: 0;
}
.sc-block.is-trim-top {
margin-top: 0;
}
.sc-block.is-trim-bottom {
margin-bottom: 0;
}
/* Root CE 编辑模式：纯文本输入，阻止浏览器在编辑时添加行内样式 */
.sc-root-editable[contenteditable='true'] {
-webkit-user-modify: read-write-plaintext-only;
outline: none;
}
/* InlineEditor 移动端：恢复原生文字选择能力
- read-write-plaintext-only 会抑制 iOS Safari 长按选词 callout（放大镜+选区把手），
主编辑器通过 MobileFloatingToolbar 补偿；InlineEditor 无此浮层，
在触摸设备上完全移除 -webkit-user-modify，让 iOS 原生 contenteditable
选区系统正常工作（长按"选择"扩展选区、把手拖拽等）。
- read-write 仍不完全等价于原生 contenteditable，iOS Safari 的 callout 系统
对 -webkit-user-modify 元素的选区扩展行为有差异，必须 unset 才能彻底恢复。 */
@media (pointer: coarse) {
[data-sc-inline-editor] .sc-root-editable[contenteditable='true'] {
-webkit-user-modify: unset;
}
}
/* 选区高亮：只在 Leaf CE 内的文本上显示 */
.sc-root-editable ::selection {
background: var(--sc-color-selection);
}
/* InlineEditor 选区高亮：
InlineEditor 可能独立于 EditorRoot 使用（无 data-sc-theme 祖先），
--sc-color-selection 未定义时 ::selection 背景为空（不可见）。
此处补 fallback，确保任何使用场景下选区都有视觉反馈。 */
[data-sc-inline-editor] ::selection {
background: var(--sc-color-selection, rgba(35, 131, 226, 0.28));
}
/* 非文本层选区透明化，避免间隙高亮 */
.sc-root-editable::selection,
.sc-page::selection,
.sc-page-body::selection,
.sc-page-header::selection,
.sc-block::selection,
.sc-block-children::selection,
.sc-block-content::selection {
background: transparent;
}
/* ── Embed block 选区端点行为 ──────────────────────────────────
* embed block（divider / image / equation / page，含外部 plugin 声明
* `category: 'embed'` 的 block）允许浏览器原生 DOM Range 端点落在内部 ——
* 这是为了让 mouseup 在 embed 上时 focus 能稳定停留，由 onSelect 链路的
* clampSelectionAcrossEmbed 把 focus 钳到 (embedId, 0)，再由
* cross-block-highlight 加 `.is-selected` 蒙层渲染整块覆盖。
*
* 视觉副作用控制：
* ::selection 在通用规则（上方 .sc-block-content::selection 等）已透明，
* embed 内部即便落入 DOM Range 端点也不会出现碎片高亮，蒙层接管整块视觉。
*
* 历史决策：曾尝试 `user-select: none` 让浏览器自动跳过 embed（Phase 1，
* Notion 同款）。但实测发现当 embed 在文档/容器末尾时，浏览器 mouseup 把 focus
* 退回到 embed 之前的最近文本节点末尾，editor.selection 的 focus.blockId
* 永远不会指向 embed 自身，跨块蒙层判定也失效。改为 P-B 方案：
* 不再阻止浏览器选区进入 embed，而由 JS 在 onSelect 链路主动钳位端点到
* embed 边界（focus.offset = 0）。
*
* 选择器维护：依赖 BlockShell 投射的 `data-block-category="embed"` 属性
* （来源：BlockSpec.category === 'embed'），声明式扩展，外部 plugin 自动享用。
*/
/* 非编辑区域隔离：marker / icon 不可选中，不可进入光标 */
.sc-block-marker {
-webkit-user-select: none;
user-select: none;
}
/* ── 矩形框选（rect-selection）──────────────────────────────── */
/* 蓝色半透明框选矩形：挂在 .sc-editor-overlay 内，与 editor 内容同一滚动坐标系 */
.sc-rect-selection-overlay {
background: var(--sc-color-selection, rgba(35, 131, 226, 0.18));
border: 1px solid rgba(35, 131, 226, 0.5);
border-radius: 2px;
/* pointer-events 已在内联样式中 none，这里不重复 */
}
/* 被框选命中的 block：整体高亮（叠加现有背景之上） */
.sc-block.is-selected {
/* ::after 用 inset:0 + absolute，需要一个定位上下文；
sc-block 本身不一定是 positioned，这里显式声明 */
position: relative;
/* 选中态高亮：::after 伪元素铺满整块，水平方向略外扩以避免紧贴文字 */
}
.sc-block.is-selected::after {
content: '';
position: absolute;
inset: 0 -4px;
background: var(--sc-color-selection, rgba(35, 131, 226, 0.18));
border-radius: 4px;
pointer-events: none;
/* 覆盖表格 cell 等带 z-index 的后代 */
z-index: 10;
}
/* 容器型 block（callout / quote / code 等）：蒙层不外扩，贴合容器自身边界 */
.sc-block-callout.is-selected::after,
.sc-block-quote.is-selected::after,
.sc-block-code.is-selected::after {
inset: 0;
}
/* ── 嵌套选中态压制 ──
* 当一个 selected block 嵌套在另一个 selected block 内（典型场景：list 整棵子树
* Cmd+A 选中），由外层 ::after 蒙层统一覆盖子树即可，内层不再独立渲染蒙层 / 描边，
* 避免半透明蓝色互相叠加产生越来越深的颜色。 */
.sc-block.is-selected .sc-block.is-selected {
/* image 用 outline 描边；嵌套时一并去掉 */
/* 表格用 table::after 蒙层；嵌套时一并去掉 */
}
.sc-block.is-selected .sc-block.is-selected::after {
content: none;
}
.sc-block.is-selected .sc-block.is-selected .sc-image-media {
outline: none;
}
.sc-block.is-selected .sc-block.is-selected table::after {
content: none;
}
/* 代码块选中态：整块蒙层覆盖时，抑制内部编辑层的 ::selection 碎片高亮。
代码块的编辑层文字本身是 color:transparent（靠高亮层着色），
但 ::selection 背景色仍可见，需要在整块选中时压掉。
用 .sc-root-editable 前缀确保优先级高于通用 ::selection 规则。 */
.sc-root-editable .sc-block-code.is-selected .sc-code-editable::selection,
.sc-root-editable .sc-block-code.is-selected .sc-code-editable ::selection {
background: transparent;
}
/* 表格选中态：整块蒙层覆盖（focus 钳到 (tableId, 0) 或 anchor 反向同理）时，
抑制 cell 内 paragraph 的 ::selection 文字片段高亮，避免内部蓝色文字与
外层蒙层视觉割裂。仅在 simple_table.is-selected 整块覆盖时压制；
表格内 cell-range（TableCellRangeSelection）走独立高亮通道，不受影响。 */
.sc-root-editable .sc-block-simple_table.is-selected .sc-block-text-content::selection,
.sc-root-editable .sc-block-simple_table.is-selected .sc-block-text-content ::selection {
background: transparent;
}
/* 分割线 block：保留默认 .sc-block.is-selected::after 浅蓝填充蒙层。
分割线自身 hitzone 已经增加到 32px，蒙层铺满后视觉效果接近 Notion / Lark 的整块高亮。
hr 自身保持灰色细线，不需要额外加粗。 */
/* 图片等媒体型 block：铺色遮罩会压住图像本身，改为紧贴图片的细描边。
- 不覆盖 block 整个行宽（含对齐留白 / caption），只框住图片本身；
- 描边紧贴图片外沿，视觉上轻量不喧宾夺主。 */
.sc-block-image.is-selected {
/* 关闭默认的 block 级 ::after 遮罩，交给 .sc-image-media 自己画边 */
}
.sc-block-image.is-selected::after {
content: none;
}
.sc-block-image.is-selected .sc-image-media,
.sc-block-image.is-selected .sc-image-placeholder {
outline: var(--sc-embed-selected-outline);
outline-offset: var(--sc-embed-selected-outline-offset);
}
.sc-block-image.is-selected .sc-image-media img,
.sc-block-image.is-selected .sc-image-placeholder img {
cursor: zoom-in;
}
/* 表格 block：选区贴合 table 元素实际尺寸，不受 block shell 宽度和 viewport clip-path 影响 */
.sc-block-simple_table.is-selected::after {
content: none;
}
.sc-block-simple_table.is-selected table {
position: relative;
}
.sc-block-simple_table.is-selected table::after {
content: '';
position: absolute;
inset: 0;
background: var(--sc-color-selection, rgba(35, 131, 226, 0.18));
border-radius: 4px;
pointer-events: none;
z-index: 10;
}
/* Block 拖拽样式 */
.sc-drag-overlay {
position: fixed;
inset: 0;
z-index: 9999;
cursor: -webkit-grabbing;
cursor: grabbing;
}
.sc-drag-preview {
position: fixed;
pointer-events: none;
border-radius: 6px;
overflow: hidden;
z-index: 10000;
/* 超长 block（长列表 / 大段文字 / 代码块）裁剪到视口内，避免遮挡下方 drop 区域 */
max-height: min(60vh, 420px);
/* 磨砂质感：半透明背景 + 背后模糊 */
background: color-mix(in srgb, var(--sc-ui-surface, #fff) 72%, transparent);
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
/* 立体阴影 + 细边 */
box-shadow: var(--sc-ui-surface-shadow-1, 0 8px 24px rgba(0, 0, 0, 0.08));
border: 1px solid var(--sc-ui-surface-border, rgba(0, 0, 0, 0.08));
/* 内边距让内容离容器边缘更舒服 */
padding: 4px 8px;
/* 轻微缩放，强化"被拎起"的感觉 */
transform: scale(0.98);
transform-origin: top left;
/* 清除 clone 带来的行间距 margin */
/* 内容被截断时底部渐隐，暗示下方还有更多 */
}
.sc-drag-preview .sc-block {
margin: 0;
}
.sc-drag-preview::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 32px;
pointer-events: none;
background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--sc-ui-surface, #fff) 85%, transparent));
}
.sc-drop-indicator {
pointer-events: none;
z-index: 9998;
background: var(--sc-ui-primary);
border-radius: 1px;
/* 位置在不同 block 之间切换时仅对 transform 做过渡。
width/height 改用突变，避免在 before/after(2px 高)
与 left/right(2px 宽)之间切换时，过渡帧把 2px 的线
临时放大成一块蓝色矩形。 */
transition: transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
will-change: transform;
}
/* onto: 沿目标 block 轮廓显示虚框，区别于边缘指示线。
独立类名，不复用 .sc-drop-indicator 的蓝色 background / transition，
避免被误渲染成实心蓝色矩形。 */
.sc-drop-indicator--onto {
pointer-events: none;
z-index: 9998;
background: transparent;
border-radius: 6px;
outline: 2px solid var(--sc-ui-primary);
outline-offset: -1px;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--sc-ui-primary) 15%, transparent);
will-change: transform, width, height;
}
/* hint: 同一 host 上除胜出方向外的其它可用方向，淡色占位线，
提醒用户该 block 支持哪些方向。不做过渡，避免跟随 active 动画闪烁。 */
.sc-drop-indicator--hint {
background: color-mix(in srgb, var(--sc-ui-primary) 28%, transparent);
transition: none;
}
/* onto 的 hint 形态：只保留淡色外框，不要实心光晕，避免与 active onto 抢视觉焦点。 */
.sc-drop-indicator--hint-onto {
outline: 1px dashed color-mix(in srgb, var(--sc-ui-primary) 45%, transparent);
box-shadow: none;
}
/* block 正在被拖拽时原地显示为半透明影子 */
.sc-block.is-dragging {
opacity: 0.25;
pointer-events: none;
}
/* 多选拖拽角标：贴在 preview 右上角外沿，显示被拖 block 数量 */
.sc-drag-preview-badge {
position: fixed;
z-index: 10001;
pointer-events: none;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 10px;
background: var(--sc-ui-primary, #2f54eb);
color: #fff;
font-size: 12px;
font-weight: 600;
line-height: 20px;
text-align: center;
/* 用 translate 把 badge 中心对齐到 preview 右上顶点外侧 */
transform: translate(-50%, -50%);
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
}
/* 拖拽期间全局锁定光标与禁用文本选择，避免经过不同元素时光标样式闪烁 */
body.sc-body-dragging,
body.sc-body-dragging * {
cursor: -webkit-grabbing !important;
cursor: grabbing !important;
-webkit-user-select: none !important;
user-select: none !important;
}
/**
* Block Decoration 基础样式
*
* .is-block-decorated — 给有 decoration 的 block 加 position: relative
* .sc-block-decoration-slot — decoration 容器
* - 绝对定位覆盖整个 block
* - pointer-events: none，不阻挡编辑交互
* - z-index 高于内容但低于菜单
*
* .sc-block-decoration-entry — 单个 decoration 渲染项
*/
.sc-block.is-block-decorated {
position: relative;
}
.sc-block-decoration-slot {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
.sc-block-decoration-entry {
position: absolute;
inset: 0;
pointer-events: none;
}
/**
* Error fallback 样式
*
* 5 个默认 fallback 共用的样式（实现见 view/error/default-fallbacks.tsx）：
* - .sc-block-error-fallback block 渲染异常（dev 完整诊断 / prod 删除按钮）
* - .sc-page-section-error-fallback page 分区异常（极简一行）
* - .sc-editor-error-fallback 编辑器顶层异常（卡片）
* - .sc-unknown-block-fallback 未注册 spec
* - .sc-stale-block-fallback React 17 stale 窗口（仅 dev 渲染）
*
* 设计语言：用 `--sc-ui-danger` 衍生表达"异常"——红边框 + 浅红衬底，统一于 danger
* 语义。block fallback 与 editor fallback 共用同一套异常视觉，只是密度不同。
*
* 暗色模式适配：所有颜色走 `--sc-ui-*` token，无幻影 token，无硬编码色值。
*
* 按钮：fallback 内按钮默认走 `.sc-btn .sc-btn--outline .sc-btn--sm`，hover/active
* 状态由 button.less 提供。「删除该块」叠加 `.sc-btn--danger` 让边框 / hover 走红色。
*/
/* ── 共享 mixin：异常容器边框 + 衬底 ─────────────────────────────────── */
/* ── Block 渲染异常 fallback ────────────────────────────────────────── */
.sc-block-error-fallback {
border: 1px solid var(--sc-ui-danger);
/* 浅红底：用 color-mix 把 danger 与 surface 调出 8% 浓度，dark 模式下 surface 已变暗，
混合结果自动跟随。color-mix 在 Chrome 111+ / Safari 16.2+ 支持，覆盖目标用户。 */
background: color-mix(in srgb, var(--sc-ui-danger) 8%, var(--sc-ui-surface));
color: var(--sc-ui-text);
border-radius: var(--sc-ui-radius-md);
padding: 12px;
margin: 4px 0;
}
.sc-block-error-fallback__title {
font-weight: 600;
margin-bottom: 4px;
color: var(--sc-ui-danger);
}
.sc-block-error-fallback__meta {
font-size: 12px;
color: var(--sc-ui-text-muted);
margin-bottom: 8px;
/* dev 视图下展示 type / id，monospace 让 id 视觉对齐 */
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.sc-block-error-fallback__actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.sc-block-error-fallback__details {
margin-top: 8px;
font-size: 12px;
}
.sc-block-error-fallback__details > summary {
cursor: pointer;
color: var(--sc-ui-text-muted);
-webkit-user-select: none;
user-select: none;
}
.sc-block-error-fallback__details > summary:hover {
color: var(--sc-ui-text);
}
.sc-block-error-fallback__details > pre {
white-space: pre-wrap;
word-break: break-word;
background: var(--sc-ui-bg-subtle);
padding: 8px;
border-radius: var(--sc-ui-radius-sm);
margin-top: 4px;
max-height: 200px;
overflow: auto;
font-size: 11px;
color: var(--sc-ui-text);
}
/* ── Page 分区 fallback（极简一行） ─────────────────────────────────── */
.sc-page-section-error-fallback {
border: 1px solid var(--sc-ui-danger);
/* 浅红底：用 color-mix 把 danger 与 surface 调出 8% 浓度，dark 模式下 surface 已变暗，
混合结果自动跟随。color-mix 在 Chrome 111+ / Safari 16.2+ 支持，覆盖目标用户。 */
background: color-mix(in srgb, var(--sc-ui-danger) 8%, var(--sc-ui-surface));
color: var(--sc-ui-text);
border-radius: var(--sc-ui-radius-md);
padding: 8px 12px;
margin: 4px 0;
font-size: 13px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
color: var(--sc-ui-text-muted);
}
.sc-page-section-error-fallback__details {
width: 100%;
margin-top: 4px;
font-size: 11px;
}
.sc-page-section-error-fallback__details > summary {
cursor: pointer;
color: var(--sc-ui-text-muted);
-webkit-user-select: none;
user-select: none;
}
.sc-page-section-error-fallback__details > pre {
white-space: pre-wrap;
word-break: break-word;
margin: 4px 0;
color: var(--sc-ui-text);
}
/* ── 编辑器顶层异常 fallback（卡片） ────────────────────────────────── */
.sc-editor-error-fallback {
border: 1px solid var(--sc-ui-danger);
/* 浅红底：用 color-mix 把 danger 与 surface 调出 8% 浓度，dark 模式下 surface 已变暗，
混合结果自动跟随。color-mix 在 Chrome 111+ / Safari 16.2+ 支持，覆盖目标用户。 */
background: color-mix(in srgb, var(--sc-ui-danger) 8%, var(--sc-ui-surface));
color: var(--sc-ui-text);
border-radius: var(--sc-ui-radius-md);
width: 100%;
padding: 32px;
margin: 32px auto;
max-width: 640px;
text-align: center;
}
.sc-editor-error-fallback__title {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
color: var(--sc-ui-danger);
}
.sc-editor-error-fallback__message {
margin-bottom: 16px;
color: var(--sc-ui-text-muted);
/* dev 视图直接显示 error.message，可能很长；做基本换行 */
word-break: break-word;
}
.sc-editor-error-fallback__actions {
display: inline-flex;
gap: 8px;
margin-bottom: 16px;
}
.sc-editor-error-fallback__details {
margin-top: 16px;
font-size: 12px;
text-align: left;
}
.sc-editor-error-fallback__details > summary {
cursor: pointer;
color: var(--sc-ui-text-muted);
-webkit-user-select: none;
user-select: none;
}
.sc-editor-error-fallback__details > summary:hover {
color: var(--sc-ui-text);
}
.sc-editor-error-fallback__details > pre {
white-space: pre-wrap;
word-break: break-word;
background: var(--sc-ui-bg-subtle);
padding: 8px;
border-radius: var(--sc-ui-radius-sm);
margin-top: 4px;
max-height: 240px;
overflow: auto;
font-size: 11px;
color: var(--sc-ui-text);
}
/* ── Unknown / Stale block 占位 ─────────────────────────────────────── */
.sc-unknown-block-fallback,
.sc-stale-block-fallback {
padding: 6px 12px;
margin: 4px 0;
font-size: 13px;
color: var(--sc-ui-text-muted);
background: var(--sc-ui-bg-subtle);
border-radius: var(--sc-ui-radius-sm);
}
/* ── Danger 按钮 modifier ──────────────────────────────────────────────
* 「删除该块」需要红色强调以提示破坏性。在 sc-btn--outline 基础上叠加，
* 边框、文字、hover 衬底都换 danger 色。这里没把 modifier 放进 ui/button.less
* 是因为 danger 按钮目前只有 fallback 在用，避免污染 button 通用 API。
*/
.sc-btn--danger.sc-btn--outline {
border-color: var(--sc-ui-danger);
color: var(--sc-ui-danger);
}
.sc-btn--danger.sc-btn--outline:hover:not(:disabled) {
background: color-mix(in srgb, var(--sc-ui-danger) 12%, transparent);
color: var(--sc-ui-danger);
}
.sc-btn--danger.sc-btn--outline:active:not(:disabled) {
background: color-mix(in srgb, var(--sc-ui-danger) 18%, transparent);
}
/* Block Menu */
/* Block Menu 样式 */
/*
* 通用组件样式（Button, DropdownMenu, Popover）已移到 packages/ui。
* 这里只保留 block-menu 特有的定位和布局样式。
*/
/* ── Handle（菜单把手） ── */
.sc-block-menu-handle {
position: absolute;
left: 0;
top: 0;
transform: translateX(-100%);
/** 占位元素，用于撑开空间 避免鼠标从block移动到handle过程中因移出元素导致菜单关闭 */
/* 空行模式只渲染单个 + 按钮，正方形白底容器 */
/* 无类型 icon（仅 grip）时收窄偏移，让拖拽把手贴近 block */
z-index: 10;
display: flex;
flex-direction: row;
align-items: center;
-webkit-user-select: none;
user-select: none;
opacity: 0;
animation: sc-handle-fade-in 0.12s ease forwards;
/*
* 与 .sc-block-content 第一行文字垂直居中对齐。
* font-size 和 line-height 从同级 .sc-block-content 继承同源 CSS 变量，
* 使得 handle 高度 = 一行内容的高度，按钮在其中垂直居中。
*/
font-size: var(--sc-content-font-size);
line-height: var(--sc-content-line-height);
height: calc(var(--sc-content-line-height) * 1em);
}
.sc-block-menu-handle::after {
content: '';
width: var(--sc-block-menu-handle-gap);
height: calc(var(--sc-content-line-height) * 1em);
}
.sc-block-menu-handle--empty {
/* 偏移 -12px：容器宽 28px，向左拉出使其视觉居中于 block 左边缘 */
left: -12px;
width: 28px;
height: 28px;
max-height: 28px;
justify-content: center;
align-self: center;
padding: 0;
background: var(--sc-menu-surface);
border: var(--sc-menu-border-width) solid var(--sc-menu-border-color);
border-radius: var(--sc-menu-radius);
box-shadow: var(--sc-menu-shadow);
/* picker 打开时隐藏白底容器 */
/* 去掉占位伪元素 */
/* 内部按钮：撑满容器、居中图标、去掉 hover/active 效果。
* :not(:disabled) 把特异性抬到 0-4-0：原先与 ui 包 .sc-btn--ghost:hover:not(:disabled)
* (0-3-0) 打平、取决于样式加载顺序，ghost 的 hover 灰底(var(--sc-ui-hover))
* 会在 ui 样式后加载时穿透本白底容器 */
}
.sc-block-menu-handle--empty.is-picker-open {
background: transparent;
border-color: transparent;
box-shadow: none;
}
.sc-block-menu-handle--empty::after {
display: none;
}
.sc-block-menu-handle--empty .sc-btn,
.sc-block-menu-handle--empty .sc-icon-btn {
width: 100%;
height: 100%;
min-width: unset;
padding: 0;
background: transparent;
border-radius: 0;
}
.sc-block-menu-handle--empty .sc-btn:hover:not(:disabled),
.sc-block-menu-handle--empty .sc-icon-btn:hover:not(:disabled),
.sc-block-menu-handle--empty .sc-btn:active:not(:disabled),
.sc-block-menu-handle--empty .sc-icon-btn:active:not(:disabled) {
background: transparent;
box-shadow: none;
}
.sc-block-menu-handle:not(:has(.sc-block-menu-type-indicator)):not(.sc-block-menu-handle--empty) {
left: -36px;
}
/* 类型图标 + 拖拽把手 横向排列 */
.sc-block-menu-handle-row {
position: relative;
display: flex;
align-items: center;
gap: 4px;
}
/* 胶囊容器：将类型图标和拖拽把手合并在一个圆角容器里。
* 整体作为一个交互单元（button）：onPointerDown 绑在 capsule 上,
* hover 视觉作用在整个 capsule(背景色变化),而不是各个子图标分别高亮。
*/
.sc-block-menu-handle-capsule {
/* button reset */
-webkit-appearance: none;
appearance: none;
margin: 0;
font: inherit;
color: inherit;
display: inline-flex;
align-items: center;
gap: 0;
background: var(--sc-menu-surface);
border: var(--sc-menu-border-width) solid var(--sc-menu-border-color);
border-radius: var(--sc-menu-radius);
box-shadow: var(--sc-menu-shadow);
overflow: hidden;
padding: var(--sc-menu-padding-y) var(--sc-menu-padding-x);
cursor: -webkit-grab;
cursor: grab;
-webkit-user-select: none;
user-select: none;
transition: background 0.15s ease, color 0.15s ease;
}
@media (hover: hover) {
.sc-block-menu-handle-capsule:hover {
/*
* 不直接用 --sc-menu-hover-bg（4% 透明黑/白）：
* capsule 默认是 --sc-menu-surface 白底，hover 切到 4% 透明时，胶囊下方
* 的文档内容（特别是表格列选择条上的列头）会直接穿透显示。
* dark 模式同理自动跟随 surface / text 的暗色值。
*/
background: color-mix(in srgb, var(--sc-menu-surface) 96%, var(--sc-ui-text));
}
}
.sc-block-menu-handle-capsule:active {
cursor: -webkit-grabbing;
cursor: grabbing;
background: var(--sc-menu-active-bg);
}
.sc-block-menu-handle-capsule:focus-visible {
outline: 2px solid var(--sc-menu-icon-color-active);
outline-offset: 1px;
}
/* 类型指示器:装饰性 icon,不响应单独 hover。颜色统一到 --sc-ui-text-tertiary（原为主题蓝）。 */
.sc-block-menu-type-indicator {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: var(--sc-ui-text-tertiary, rgba(0, 0, 0, 0.5));
flex-shrink: 0;
pointer-events: none;
}
.sc-block-menu-type-indicator > svg {
width: var(--sc-menu-icon-size);
height: var(--sc-menu-icon-size);
}
/* 拖拽把手 grip:装饰性 icon,不响应单独 hover */
.sc-block-menu-handle-grip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: var(--sc-ui-text-tertiary, rgba(0, 0, 0, 0.5));
flex-shrink: 0;
pointer-events: none;
}
.sc-block-menu-handle-grip > svg {
width: var(--sc-menu-icon-size);
height: var(--sc-menu-icon-size);
}
@keyframes sc-handle-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 表格 block 自身的 handle：上移到列选择条区域，右边缘紧贴可见内容区左边 */
.sc-block-simple_table:has(.sc-block-content.is-structure_disabled) > .sc-block-menu-handle {
top: 4px;
}
.sc-block-simple_table > .sc-block-menu-handle {
top: -25px;
left: calc(-1 * var(--sc-table-handle-offset, 0px));
z-index: 20;
pointer-events: none;
}
.sc-block-simple_table > .sc-block-menu-handle .sc-block-menu-handle-capsule,
.sc-block-simple_table > .sc-block-menu-handle .sc-block-menu-edge {
pointer-events: auto;
}
.sc-block-simple_table > .sc-block-menu-handle::after {
width: 14px;
}
/* portal slot 内的 handle（cell 子 block）：整体事件穿透，不遮挡 row-selector 点击。
仅 capsule / edge 恢复事件响应保证可交互。
hover 保持由 row-selector 的 mouseenter → cancelHide 机制保证。 */
.sc-block-menu-handle-portal-slot .sc-block-menu-handle {
pointer-events: none;
}
.sc-block-menu-handle-portal-slot .sc-block-menu-handle .sc-block-menu-handle-capsule,
.sc-block-menu-handle-portal-slot .sc-block-menu-handle .sc-block-menu-edge {
pointer-events: auto;
}
/* heading 类型下 handle 高度跟随 heading 的 line-height 和 font-size */
.sc-block-header1 > .sc-block-menu-handle {
font-size: var(--sc-heading-1-font-size);
line-height: var(--sc-heading-1-line-height);
height: calc(var(--sc-heading-1-line-height) * 1em);
}
.sc-block-header2 > .sc-block-menu-handle {
font-size: var(--sc-heading-2-font-size);
line-height: var(--sc-heading-2-line-height);
height: calc(var(--sc-heading-2-line-height) * 1em);
}
.sc-block-header3 > .sc-block-menu-handle {
font-size: var(--sc-heading-3-font-size);
line-height: var(--sc-heading-3-line-height);
height: calc(var(--sc-heading-3-line-height) * 1em);
}
.sc-block-header4 > .sc-block-menu-handle,
.sc-block-header5 > .sc-block-menu-handle,
.sc-block-header6 > .sc-block-menu-handle {
font-size: var(--sc-heading-4-font-size);
line-height: var(--sc-heading-4-line-height);
height: calc(var(--sc-heading-4-line-height) * 1em);
}
/*
* 以 handle 容器为基准（handle 是 position: absolute），
* 宽度撑满 handle，上/下紧贴 row（row 居中，上下各留一定间距）。
*/
.sc-block-menu-edge {
position: absolute;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
height: 18px;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
border-radius: 4px;
color: transparent;
transition: background 0.15s ease, color 0.15s ease;
/* row 居中：top 50% - row高/2 - gap - edge高 = 50% - 14 - 2 - 18 */
}
.sc-block-menu-edge.is-top {
bottom: calc(50% + 14px + 2px);
}
.sc-block-menu-edge.is-bottom {
top: calc(50% + 14px + 2px);
}
.sc-block-menu-edge.is-active {
background: var(--sc-menu-hover-bg);
color: var(--sc-menu-icon-color);
}
@media (hover: hover) {
.sc-block-menu-edge:hover {
background: var(--sc-menu-active-bg);
}
}
/* ── BlockMenuPopupContent 专属区块 ── */
/*
* block menu 的 DropdownMenu.Content 需要尽量完整展示内容，同时在视口不足时
* 允许滚动查看全部项。
*
* 通用 .sc-dropdown-content 默认 max-height: 400px，会限制菜单高度；
* 这里放宽到 var(--radix-dropdown-menu-content-available-height)，让
* Radix 根据碰撞检测下发的可用高度来决定最大高度，从而把视口空间用满；
* overflow-y 保持 auto，超出后可滚动。
*
* 同时拉宽 min-width 让菜单内容更舒展。
*/
.sc-block-menu-content.sc-dropdown-content {
width: -webkit-fit-content;
width: fit-content;
min-width: 176px;
max-height: var(--radix-dropdown-menu-content-available-height, 560px);
overflow-y: auto;
padding: 12px 8px;
/* 覆盖 .sc-dropdown-content 基类的 8px（对齐 ardot 菜单面板圆角，
* 与 toc 悬浮目录面板一致）；复合选择器特异性 0-2-0，同时命中
* block 菜单 Content 与二级菜单 SubContent（均带 sc-block-menu-content 类） */
border-radius: var(--sc-menu-panel-radius);
/* 菜单底色接入 --sc-menu-surface token（划词工具栏系已消费），
* 覆盖基类 --sc-ui-surface，使菜单系浮层底色可一处统一覆盖 */
background: var(--sc-menu-surface, var(--sc-ui-surface));
/* 阴影三件套：接入 --sc-menu-shadow（设计稿 wb/shadow/Popup-Medium），
* 覆盖基类 --sc-ui-surface-shadow-1/2 重阴影 */
box-shadow: var(--sc-menu-shadow);
}
/* 顶部类型快捷切换网格（样式对齐 CommandGrid：5 列、无边框、hover 背景） */
.sc-block-menu-type-grid {
display: grid;
grid-template-columns: repeat(5, 24px);
gap: 8px;
padding: 0 0 8px;
justify-content: start;
border-bottom: 1px solid var(--sc-ui-separator);
margin-bottom: 8px;
}
.sc-block-menu-type-grid-item {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: none;
background: transparent;
border-radius: var(--sc-ui-radius-sm, 4px);
color: var(--sc-cmd-text-muted, var(--sc-menu-icon-color));
cursor: pointer;
transition: background 0.1s ease;
}
.sc-block-menu-type-grid-item > svg {
width: var(--sc-menu-icon-size);
height: var(--sc-menu-icon-size);
}
@media (hover: hover) {
.sc-block-menu-type-grid-item:hover {
background: var(--sc-cmd-hover, var(--sc-menu-hover-bg));
}
}
.sc-block-menu-type-grid-item.is-active {
background: var(--sc-cmd-active, var(--sc-menu-active-bg));
color: var(--sc-cmd-primary, var(--sc-menu-icon-color-active));
}
/* 颜色子菜单：分组小标题（非 Radix Label，禁止聚焦） */
.sc-block-menu-section-label {
padding: 8px 10px 4px;
font-size: var(--sc-menu-font-size-sm);
line-height: 16px;
color: var(--sc-menu-text-color-muted);
font-weight: 500;
pointer-events: none;
}
/* Block menu 静态展示项（disabled）： 置灰、不响应交互 */
.sc-block-menu-content .sc-dropdown-item[data-disabled] {
cursor: not-allowed;
opacity: 0.4;
}
.sc-block-menu-content .sc-dropdown-item[data-disabled]:hover,
.sc-block-menu-content .sc-dropdown-item[data-disabled][data-selected='true'],
.sc-block-menu-content .sc-dropdown-item[data-disabled][data-highlighted] {
background: transparent;
}
/* 颜色子菜单：色块预览 */
.sc-block-menu-color-swatch {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 3px;
border: 1px solid var(--sc-ui-border, rgba(0, 0, 0, 0.08));
font-size: 12px;
line-height: 1;
font-weight: 600;
}
/* 字体色：白底 + 字母 A 显示为目标色 */
.sc-block-menu-color-swatch--font {
background: var(--sc-ui-surface, #ffffff);
}
/* ── Portal 容器 ── */
.sc-slash-menu-portal {
/* position: fixed 由 JS 设置 */
}
[data-sc-platform-group='mobile'] {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
--sc-page-body-padding-top: 0;
}
[data-sc-platform-group='mobile'][data-sc-theme] {
--sc-link-text-decoration: none;
--sc-inline-code-border-radius: 4px;
--sc-inline-code-padding: 0.15em 0.35em;
--sc-inline-code-font-size: 90%;
--sc-quote-border-radius: 0 6px 6px 0;
--sc-quote-border-width: 3px;
--sc-quote-padding: calc(2px * var(--sc-font-scale, 1)) 0 calc(2px * var(--sc-font-scale, 1)) calc(12px * var(--sc-font-scale, 1));
--sc-block-gap-container: calc(20px * var(--sc-font-scale, 1));
--sc-block-gap-heading-before: calc(20px * var(--sc-font-scale, 1));
--sc-block-gap-media: calc(20px * var(--sc-font-scale, 1));
--sc-block-padding-x: calc(16px * var(--sc-font-scale, 1));
--sc-block-padding-y: calc(12px * var(--sc-font-scale, 1));
--sc-block-indent: calc(20px * var(--sc-font-scale, 1));
--sc-divider-padding: calc(8px * var(--sc-font-scale, 1));
--sc-page-body-padding-bottom: 12px;
--sc-page-padding-x: 12px;
}
[data-sc-platform-group='mobile'] .sc-page-body {
/** 移动端页面底部留白 给底部工具栏留空间 */
padding-bottom: 40px;
overflow: hidden;
}
[data-sc-platform-group='mobile'] .sc-code-language-btn {
margin-left: 4px;
}
[data-sc-platform-group='mobile'] .sc-block-code {
-webkit-user-select: none;
user-select: none;
}
[data-sc-platform-group='mobile'] .sc-mermaid-editor {
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}