479 lines
21 KiB
CSS
479 lines
21 KiB
CSS
/* =====================================================================
|
|
* editor.css — 编辑模式布局：工具栏 / 缩略图 / 画布 / 属性面板
|
|
* ===================================================================== */
|
|
|
|
.app-editor { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
|
|
|
|
/* ---------- 顶部工具栏 ---------- */
|
|
.toolbar {
|
|
height: 54px; flex-shrink: 0;
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 0 16px; gap: 12px;
|
|
background: var(--ui-bar);
|
|
border-bottom: 1px solid var(--ui-border);
|
|
box-shadow: var(--shadow-sm);
|
|
z-index: 10;
|
|
}
|
|
.brand { display: flex; align-items: baseline; gap: 6px; }
|
|
.brand .logo { color: var(--ui-primary); font-size: 20px; font-weight: 800; }
|
|
.brand .name { font-size: 17px; font-weight: 700; letter-spacing: .5px; }
|
|
.brand .sub { font-size: 12px; color: var(--ui-muted); }
|
|
.tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
|
|
.tools .sep { width: 1px; height: 22px; background: var(--ui-border); margin: 0 4px; }
|
|
.theme-select { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ui-muted); }
|
|
.theme-select select { width: auto; height: 30px; padding: 0 8px; }
|
|
|
|
/* ---------- 编辑区三栏 ---------- */
|
|
.editor-body {
|
|
flex: 1; min-height: 0;
|
|
display: grid; grid-template-columns: 178px 1fr 304px;
|
|
}
|
|
|
|
/* ---------- 左：缩略图 ---------- */
|
|
.thumb-bar { border-right: 1px solid var(--ui-border); background: var(--ui-panel); overflow: hidden; display: flex; flex-direction: column; }
|
|
.thumb-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
|
|
.thumb-item { position: relative; cursor: pointer; }
|
|
.thumb-num {
|
|
position: absolute; top: -6px; left: -6px; z-index: 2;
|
|
width: 18px; height: 18px; border-radius: 50%;
|
|
background: var(--ui-text); color: #fff; font-size: 11px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.thumb-preview {
|
|
position: relative; width: 100%; aspect-ratio: 16 / 9;
|
|
border: 1px solid var(--ui-border); border-radius: var(--radius-sm);
|
|
overflow: hidden; background: #fff;
|
|
box-shadow: var(--shadow-sm); transition: outline-color .12s, transform .1s;
|
|
outline: 2px solid transparent; outline-offset: 1px;
|
|
}
|
|
.thumb-item:hover .thumb-preview { transform: translateY(-1px); }
|
|
.thumb-item.active .thumb-preview { outline-color: var(--ui-primary); }
|
|
.thumb-del {
|
|
position: absolute; top: 2px; right: 2px; z-index: 3;
|
|
width: 18px; height: 18px; border-radius: 4px; border: none;
|
|
background: rgba(15,23,42,.6); color: #fff; font-size: 11px;
|
|
opacity: 0; transition: opacity .12s; line-height: 1;
|
|
}
|
|
.thumb-item:hover .thumb-del { opacity: 1; }
|
|
.thumb-del:hover { background: var(--ui-danger); }
|
|
.thumb-add {
|
|
border: 1.5px dashed var(--ui-border); border-radius: var(--radius-sm);
|
|
height: 40px; background: transparent; color: var(--ui-muted);
|
|
display: flex; align-items: center; justify-content: center; gap: 4px;
|
|
}
|
|
.thumb-add:hover { border-color: var(--ui-primary); color: var(--ui-primary); background: var(--ui-primary-soft); }
|
|
/* 缩略图内的迷你元素，统一缩小字号 */
|
|
.thumb-preview .el { pointer-events: none; }
|
|
|
|
/* ---------- 中：画布 ---------- */
|
|
.canvas-stage {
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
padding: 28px; min-width: 0; overflow: hidden; position: relative;
|
|
}
|
|
.canvas-frame {
|
|
position: relative;
|
|
width: min(100%, calc((100vh - 54px - 116px) * 16 / 9));
|
|
max-width: 100%;
|
|
aspect-ratio: 16 / 9;
|
|
box-shadow: var(--shadow-md); border-radius: 4px; overflow: hidden;
|
|
background: #fff;
|
|
}
|
|
.canvas {
|
|
position: absolute; top: 0; left: 0;
|
|
width: 1280px; height: 720px;
|
|
transform-origin: top left;
|
|
}
|
|
.canvas-footer {
|
|
margin-top: 10px;
|
|
flex: none;
|
|
width: min(100%, calc((100vh - 54px - 116px) * 16 / 9));
|
|
max-width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
.canvas-status { font-size: 12px; color: var(--ui-muted); flex: none; }
|
|
.note-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
height: 26px;
|
|
padding: 0 10px;
|
|
border: 1px solid transparent;
|
|
border-radius: 13px;
|
|
background: transparent;
|
|
color: var(--ui-muted);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: background .15s, color .15s, border-color .15s;
|
|
}
|
|
.note-toggle:hover {
|
|
background: var(--ui-primary-soft);
|
|
color: var(--ui-primary);
|
|
}
|
|
.note-toggle.active {
|
|
color: var(--ui-primary);
|
|
border-color: var(--ui-border);
|
|
background: var(--ui-panel);
|
|
}
|
|
.note-toggle-icon { font-size: 13px; line-height: 1; }
|
|
.note-dot {
|
|
width: 6px; height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--ui-primary);
|
|
}
|
|
.canvas-note {
|
|
margin-top: 8px;
|
|
flex: none;
|
|
/* 与 .canvas-frame 同宽，保持对齐 */
|
|
width: min(100%, calc((100vh - 54px - 116px) * 16 / 9));
|
|
max-width: 100%;
|
|
}
|
|
.canvas-note-input {
|
|
display: block;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
resize: vertical;
|
|
min-height: 44px;
|
|
max-height: 120px;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--ui-border);
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
color: var(--ui-text);
|
|
background: var(--ui-panel);
|
|
font-family: inherit;
|
|
outline: none;
|
|
transition: border-color .15s, box-shadow .15s;
|
|
}
|
|
.canvas-note-input:focus {
|
|
border-color: var(--ui-primary);
|
|
box-shadow: 0 0 0 3px var(--ui-primary-soft);
|
|
}
|
|
.canvas-note-input::placeholder {
|
|
color: var(--ui-muted);
|
|
}
|
|
|
|
/* ---------- 画布元素 ---------- */
|
|
.el { position: absolute; overflow: hidden; }
|
|
.el[data-type="title"], .el[data-type="text"], .el[data-type="list"],
|
|
.el[data-type="stat"], .el[data-type="quote"] {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
.el[data-type="stat"] { align-items: center; justify-content: center; }
|
|
.el[data-type="quote"] { align-items: center; justify-content: center; }
|
|
.el[data-type="title"], .el[data-type="quote"] { font-weight: 700; }
|
|
.el[data-type="quote"] { font-style: italic; }
|
|
.el-text { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; }
|
|
.el-list { width: 100%; height: 100%; display: flex; flex-direction: column; gap: .3em; justify-content: center; }
|
|
.el-list .li { position: relative; padding-left: 1.1em; }
|
|
.el-list .li::before {
|
|
content: ""; position: absolute; left: 0; top: .55em;
|
|
width: .35em; height: .35em; border-radius: 50%; background: currentColor;
|
|
}
|
|
/* 行首自带编号/符号（①、1.、- 等）时不再画圆点，避免双重标记 */
|
|
.el-list .li.no-marker::before { display: none; }
|
|
.el-list .li.no-marker { padding-left: 0; }
|
|
.el-stat { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
|
.el-stat .num { font-weight: 800; line-height: 1; }
|
|
.el-stat .label { margin-top: .35em; text-align: center; }
|
|
.el-shape { width: 100%; height: 100%; }
|
|
/* 形状文字层：覆盖在图形上方、居中；颜色默认白（形状为填充色底），字号/粗斜继承 style。
|
|
padding 稍大：clip-path 多边形（箭头/星形等）边缘收窄，文字留出安全区 */
|
|
.el-shape-text {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 8% 12%;
|
|
box-sizing: border-box;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
text-align: center;
|
|
outline: none;
|
|
}
|
|
/* rect/椭圆这类满幅形状，文字安全区可以小 */
|
|
.el[data-type="shape"][data-shape="rect"] > .el-shape-text,
|
|
.el[data-type="shape"][data-shape="circle"] > .el-shape-text,
|
|
.el[data-type="shape"][data-shape="ellipse"] > .el-shape-text {
|
|
padding: 6px 10px;
|
|
}
|
|
/* 空形状不显示文字占位：装饰形状（分隔条/小三角）保持纯净，
|
|
加文字的引导由属性面板「内容」输入框承担 */
|
|
.el-image { width: 100%; height: 100%; object-fit: cover; }
|
|
.el-video { width: 100%; height: 100%; background: #000; border-radius: 8px; display: block; }
|
|
/* 视频缩略图降级：不加载视频，poster 静态图 / 黑底▶占位 */
|
|
.el-video-thumb {
|
|
width: 100%; height: 100%;
|
|
background: #0f172a;
|
|
border-radius: 8px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
.el-video-thumb img { width: 100%; height: 100%; object-fit: cover; }
|
|
.el-video-thumb-play { color: rgba(255,255,255,.75); font-size: 28px; }
|
|
/* 空图片元素占位（未填 content 时不渲染裂图） */
|
|
.el-image-empty {
|
|
width: 100%; height: 100%;
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
|
|
border: 2px dashed rgba(100, 116, 139, .45); border-radius: 10px;
|
|
background: rgba(148, 163, 184, .08); color: var(--ui-muted, #64748b);
|
|
text-align: center; padding: 8px;
|
|
}
|
|
.el-image-empty-icon { font-size: 28px; opacity: .7; }
|
|
.el-image-empty-text { font-size: 12px; line-height: 1.5; }
|
|
.el-chart { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: .5em; }
|
|
.el-chart .bar-row { display: flex; align-items: center; gap: .6em; font-size: 14px; }
|
|
.el-chart .bar-label { width: 26%; flex-shrink: 0; }
|
|
.el-chart .bar-track { flex: 1; height: .7em; background: rgba(100,116,139,.18); border-radius: 99px; overflow: hidden; }
|
|
.el-chart .bar-fill { height: 100%; border-radius: 99px; }
|
|
.el-chart .bar-val { width: 3em; text-align: right; flex-shrink: 0; }
|
|
|
|
/* ===== 图表 SVG 通用 ===== */
|
|
.el-chart svg { width: 100%; height: 100%; }
|
|
.el-chart .chart-text { fill: currentColor; font-family: inherit; }
|
|
.el-chart.chart-pie { position: relative; display: flex; align-items: center; }
|
|
.el-chart .pie-legend {
|
|
position: absolute; right: 0; top: 50%; transform: translateY(-50%);
|
|
display: flex; flex-direction: column; gap: .3em; font-size: 13px;
|
|
}
|
|
.el-chart .pie-legend-item { display: flex; align-items: center; gap: .4em; }
|
|
.el-chart .pie-legend-dot { width: .8em; height: .8em; border-radius: 2px; flex-shrink: 0; }
|
|
|
|
/* ===== 表格 ===== */
|
|
.el-table {
|
|
width: 100%; height: 100%; border-collapse: collapse;
|
|
font-size: inherit; table-layout: fixed;
|
|
}
|
|
.el-table th, .el-table td {
|
|
padding: .55em .7em; text-align: left;
|
|
border-bottom: 1px solid rgba(100,116,139,.25);
|
|
overflow: hidden; word-break: break-word;
|
|
}
|
|
.el-table th {
|
|
font-weight: 700; color: var(--ui-primary, #5b5bd6);
|
|
border-bottom: 2px solid rgba(100,116,139,.35);
|
|
background: rgba(100,116,139,.06);
|
|
white-space: nowrap;
|
|
}
|
|
.el-table tbody tr:nth-child(even) { background: rgba(100,116,139,.04); }
|
|
|
|
/* ===== 代码 ===== */
|
|
.el-code {
|
|
width: 100%; height: 100%; margin: 0;
|
|
padding: 1em 1.2em; box-sizing: border-box;
|
|
background: rgba(15,23,42,.04);
|
|
border-radius: 8px; border: 1px solid rgba(100,116,139,.2);
|
|
overflow: auto; font-family: 'Consolas','Monaco','Courier New',monospace;
|
|
font-size: inherit; line-height: 1.6; color: inherit;
|
|
white-space: pre; position: relative;
|
|
}
|
|
.el-code code { font-family: inherit; }
|
|
.el-code .code-lang {
|
|
position: absolute; top: .4em; right: .8em;
|
|
opacity: .45; font-size: 11px; font-family: inherit;
|
|
text-transform: uppercase; letter-spacing: .05em;
|
|
}
|
|
|
|
/* ===== 公式 ===== */
|
|
.el-formula {
|
|
width: 100%; height: 100%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-family: 'Cambria Math','STIX','Latin Modern Math',serif;
|
|
font-size: inherit; line-height: 1.5;
|
|
}
|
|
.el-formula sup, .el-formula sub { font-size: .65em; }
|
|
.el-formula .frac {
|
|
display: inline-flex; flex-direction: column; align-items: center;
|
|
vertical-align: middle; margin: 0 .2em;
|
|
}
|
|
.el-formula .frac .num { border-bottom: 1.5px solid currentColor; padding: 0 .3em; }
|
|
.el-formula .frac .den { padding: 0 .3em; }
|
|
.el-formula .sqrt { position: relative; padding-left: .3em; display: inline-flex; align-items: flex-end; }
|
|
.el-formula .sqrt .rad { font-size: .6em; vertical-align: super; margin-right: .1em; }
|
|
.el-formula .sqrt .overline { border-top: 1.5px solid currentColor; padding: 0 .2em; }
|
|
|
|
/* 选中态与手柄 */
|
|
.el.selected { outline: 2px solid var(--ui-primary); outline-offset: 0; }
|
|
.el.dragging { opacity: .85; }
|
|
/* 多选态：次级高亮（锚点仍用 .selected 实线） */
|
|
.el.multi-selected { outline: 1.5px dashed color-mix(in srgb, var(--ui-primary) 70%, transparent); outline-offset: 1px; }
|
|
|
|
/* 框选矩形 */
|
|
.marquee-box {
|
|
position: absolute;
|
|
border: 1.5px dashed var(--ui-primary);
|
|
background: color-mix(in srgb, var(--ui-primary) 8%, transparent);
|
|
pointer-events: none;
|
|
z-index: 999;
|
|
}
|
|
.handle {
|
|
position: absolute; width: 10px; height: 10px;
|
|
background: #fff; border: 1.5px solid var(--ui-primary);
|
|
border-radius: 2px; z-index: 50;
|
|
}
|
|
.handle.tl { top: -5px; left: -5px; cursor: nwse-resize; }
|
|
.handle.tr { top: -5px; right: -5px; cursor: nesw-resize; }
|
|
.handle.bl { bottom: -5px; left: -5px; cursor: nesw-resize; }
|
|
.handle.br { bottom: -5px; right: -5px; cursor: nwse-resize; }
|
|
.handle.tm { top: -5px; left: 50%; margin-left: -5px; cursor: ns-resize; }
|
|
.handle.bm { bottom: -5px; left: 50%; margin-left: -5px; cursor: ns-resize; }
|
|
.handle.lm { left: -5px; top: 50%; margin-top: -5px; cursor: ew-resize; }
|
|
.handle.rm { right: -5px; top: 50%; margin-top: -5px; cursor: ew-resize; }
|
|
|
|
/* 元素文字可直接双击编辑 */
|
|
.el [contenteditable="true"] { outline: none; cursor: text; }
|
|
.el [contenteditable="true"]:focus { background: rgba(91,91,214,.06); border-radius: 2px; }
|
|
|
|
/* ---------- 右：侧栏 Tabs ---------- */
|
|
.side-panel { border-left: 1px solid var(--ui-border); background: var(--ui-panel); display: flex; flex-direction: column; min-height: 0; }
|
|
.panel-tabs { display: flex; border-bottom: 1px solid var(--ui-border); flex-shrink: 0; }
|
|
.panel-tab {
|
|
flex: 1; padding: 11px; border: none; background: transparent;
|
|
font-size: 13px; color: var(--ui-muted); border-bottom: 2px solid transparent;
|
|
}
|
|
.panel-tab:hover { color: var(--ui-text); background: var(--ui-hover); }
|
|
.panel-tab.active { color: var(--ui-primary); border-bottom-color: var(--ui-primary); font-weight: 600; }
|
|
.panel-pane { flex: 1; overflow-y: auto; padding: 16px; }
|
|
.panel-pane.active { display: block; }
|
|
/* AI 面板需要纵向擞布局，且不滚动整块（输入框常驻底部） */
|
|
.ai-pane { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
|
|
.ai-pane .chat-messages { flex: 1; overflow-y: auto; padding: 0 16px; }
|
|
|
|
/* ---------- 属性面板 ---------- */
|
|
.prop-section { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--ui-border); }
|
|
.prop-section:last-child { border-bottom: none; margin-bottom: 0; }
|
|
.prop-title { font-size: 12px; color: var(--ui-muted); margin-bottom: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
|
|
.prop-hint { font-size: 12.5px; color: var(--ui-muted); text-align: center; line-height: 1.8; margin-bottom: 16px; }
|
|
.prop-row { margin-bottom: 14px; }
|
|
.prop-row > label { display: block; font-size: 12px; color: var(--ui-muted); margin-bottom: 6px; font-weight: 500; }
|
|
.color-row { display: flex; gap: 6px; }
|
|
.color-row select { flex: 1; }
|
|
.color-row input[type="color"] { width: 38px; height: 32px; padding: 2px; flex-shrink: 0; }
|
|
|
|
.add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
|
.add-grid button {
|
|
height: 48px; border: 1px solid var(--ui-border); background: #fff;
|
|
border-radius: var(--radius-sm); font-size: 12px; color: var(--ui-text);
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
|
|
}
|
|
.add-grid button:hover { border-color: var(--ui-primary); color: var(--ui-primary); background: var(--ui-primary-soft); }
|
|
.add-grid button .ic { font-size: 18px; }
|
|
|
|
.bg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
|
.bg-grid button { height: 36px; border: 1px solid var(--ui-border); background: #fff; border-radius: var(--radius-sm); font-size: 12px; }
|
|
.bg-grid button.active { border-color: var(--ui-primary); box-shadow: 0 0 0 2px var(--ui-primary-soft); }
|
|
|
|
/* 分段按钮组 */
|
|
.seg { display: flex; gap: 6px; }
|
|
.seg button {
|
|
flex: 1; height: 32px; border: 1px solid var(--ui-border); background: #fff;
|
|
border-radius: var(--radius-sm); color: var(--ui-text); font-size: 13px;
|
|
}
|
|
.seg button:hover { background: var(--ui-hover); }
|
|
.seg button.active { background: var(--ui-primary); border-color: var(--ui-primary); color: #fff; }
|
|
.seg button.danger { color: var(--ui-danger); }
|
|
.seg button.danger:hover { background: #fff1f2; }
|
|
|
|
/* ---------- 卡片元素 ---------- */
|
|
.el[data-type="card"] {
|
|
background: #ffffff;
|
|
border-radius: 16px;
|
|
box-shadow: 0 12px 30px rgba(15, 23, 42, .12), 0 3px 8px rgba(15, 23, 42, .06);
|
|
overflow: hidden;
|
|
display: flex; flex-direction: column;
|
|
}
|
|
.el-card-bar { height: 6px; width: 100%; flex-shrink: 0; }
|
|
.el-card { padding: 1.1em 1.3em 1.2em; flex: 1; display: flex; flex-direction: column; gap: .5em; justify-content: flex-start; box-sizing: border-box; }
|
|
.card-icon { font-size: 1.6em; line-height: 1; margin-bottom: .1em; }
|
|
.card-title {
|
|
font-weight: 700;
|
|
font-size: 1.5em;
|
|
line-height: 1.15;
|
|
color: var(--ui-text, #1e293b);
|
|
display: flex; align-items: center; gap: .4em;
|
|
}
|
|
.card-body {
|
|
font-size: 1em;
|
|
line-height: 1.5;
|
|
color: var(--ui-muted, #64748b);
|
|
white-space: pre-wrap;
|
|
flex: 1;
|
|
}
|
|
/* 渐变形状由 renderElement 内联 backgroundImage；此处仅兜底圆角 */
|
|
.el-shape.gradient { border-radius: var(--shape-radius, 0); }
|
|
|
|
/* 装饰圆/光晕（shape 配合） */
|
|
.el[data-deco="glow"] { filter: blur(2px); opacity: .9; }
|
|
|
|
/* ---------- 文库弹窗 ---------- */
|
|
.lib-modal { width: 580px; max-width: 94vw; max-height: 86vh; display: flex; flex-direction: column; }
|
|
.lib-save-bar { display: flex; gap: 8px; margin-bottom: 14px; }
|
|
.lib-save-bar input { flex: 1; }
|
|
.lib-list { flex: 1; overflow-y: auto; border: 1px solid var(--ui-border); border-radius: var(--radius-sm); background: #fff; min-height: 140px; }
|
|
.lib-list:empty::before {
|
|
content: '文库为空 —— 在上方命名并存入你的第一份演示';
|
|
display: block; padding: 32px; text-align: center; color: var(--ui-muted); font-size: 13px;
|
|
}
|
|
.lib-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--ui-border); }
|
|
.lib-item:last-child { border-bottom: none; }
|
|
.lib-item.active { background: var(--ui-primary-soft); }
|
|
.lib-thumb { width: 72px; height: 41px; border: 1px solid var(--ui-border); border-radius: 4px; overflow: hidden; flex-shrink: 0; position: relative; background: #fff; }
|
|
.lib-info { flex: 1; min-width: 0; }
|
|
.lib-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.lib-meta { font-size: 12px; color: var(--ui-muted); margin-top: 2px; }
|
|
.lib-ops { display: flex; gap: 6px; flex-shrink: 0; }
|
|
.lib-ops .btn { height: 28px; padding: 0 10px; font-size: 12px; }
|
|
.lib-ops .btn.del { background: transparent; color: var(--ui-danger); border-color: var(--ui-border); }
|
|
.lib-ops .btn.del:hover { background: #fff1f2; }
|
|
.modal-actions .muted { margin-right: auto; font-size: 12px; }
|
|
|
|
/* 空页占位引导 */
|
|
.canvas-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ui-muted); pointer-events: none; }
|
|
.canvas-placeholder .ph-icon { font-size: 48px; font-weight: 200; color: var(--ui-border); }
|
|
.canvas-placeholder .ph-sub { font-size: 14px; opacity: .8; }
|
|
|
|
/* 长内容溢出兆底 */
|
|
.el-text { overflow: hidden; }
|
|
.el-stat .num { overflow-wrap: anywhere; }
|
|
.el-chart .bar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
/* ---------- 富文本提示 ---------- */
|
|
.rich-hint { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; }
|
|
.rich-syntax {
|
|
font-size: 11px; color: var(--ui-muted); line-height: 1.7;
|
|
background: var(--ui-hover, #f1f5f9); padding: 5px 8px; border-radius: 4px;
|
|
white-space: pre-wrap; word-break: break-all;
|
|
}
|
|
.rich-actions { display: flex; gap: 6px; }
|
|
.rich-btn {
|
|
height: 22px; padding: 0 8px; font-size: 11px;
|
|
border: 1px solid var(--ui-border, #e2e8f0); background: #fff;
|
|
color: var(--ui-text, #1e293b); border-radius: 4px; cursor: pointer;
|
|
}
|
|
.rich-btn:hover { border-color: var(--ui-primary, #5b5bd6); color: var(--ui-primary, #5b5bd6); }
|
|
.rich-btn.danger { color: var(--ui-danger, #e11d48); border-color: transparent; }
|
|
.rich-btn.danger:hover { color: var(--ui-danger, #e11d48); background: #fff1f2; }
|
|
|
|
/* ---------- 富文本渲染样式 ---------- */
|
|
.el-text-rich strong, .el-list strong, .el-card strong { font-weight: 700; }
|
|
.el-text-rich em, .el-list em, .el-card em { font-style: italic; }
|
|
.el-text-rich del, .el-list del, .el-card del { text-decoration: line-through; opacity: .7; }
|
|
.el-text-rich u, .el-list u, .el-card u { text-decoration: underline; text-underline-offset: 2px; }
|
|
.el-text-rich mark, .el-list mark, .el-card mark { background: rgba(245,158,11,.25); padding: 0 .15em; border-radius: 2px; }
|
|
.el-text-rich code, .el-list code, .el-card code {
|
|
font-family: 'Consolas','Monaco','Courier New',monospace;
|
|
background: rgba(100,116,139,.12); padding: .1em .3em; border-radius: 3px;
|
|
font-size: .85em;
|
|
}
|
|
.el-text-rich sup, .el-list sup, .el-card sup { font-size: .65em; vertical-align: super; }
|
|
.el-text-rich sub, .el-list sub, .el-card sub { font-size: .65em; vertical-align: sub; }
|
|
.el-text-rich a, .el-list a, .el-card a { text-decoration: underline; text-underline-offset: 2px; }
|
|
|
|
/* 触屏设备（无 hover）缩略图删除按钮常驻 */
|
|
@media (hover: none) { .thumb-del { opacity: 1 !important; } }
|