feat(editor): 可运行代码块模态框样式 + runnable 块绿色边框
模态框复用 Catppuccin Latte/Mocha 配色;编辑器内含 runnable 标记的 代码块加左侧绿色边框(与 Code Runner 运行按钮主色一致)。
This commit is contained in:
parent
d6fc98d253
commit
01ceef2694
@ -652,3 +652,171 @@
|
||||
/* Mocha overlay0 */
|
||||
color: #6c7086;
|
||||
}
|
||||
|
||||
/* ========== Runnable Code Block Modal ========== */
|
||||
.tiptap-runnable-modal-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.tiptap-runnable-modal {
|
||||
/* Latte mantle —— 复用 .slash-command 配色 */
|
||||
background: #e6e9ef;
|
||||
border: 1px solid #bcc0cc;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
|
||||
padding: 16px;
|
||||
min-width: 320px;
|
||||
max-width: 90vw;
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
.tiptap-runnable-modal-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
/* Latte text */
|
||||
color: #4c4f69;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.tiptap-runnable-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 13px;
|
||||
/* Latte subtext0 */
|
||||
color: #6c6f85;
|
||||
}
|
||||
|
||||
.tiptap-runnable-field input[type='number'],
|
||||
.tiptap-runnable-field select {
|
||||
flex: 1;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #bcc0cc;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
/* Latte text */
|
||||
color: #4c4f69;
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.tiptap-runnable-field input[type='checkbox'] {
|
||||
accent-color: #40a02b;
|
||||
}
|
||||
|
||||
.tiptap-runnable-preview {
|
||||
margin: 12px 0;
|
||||
padding: 8px;
|
||||
/* Latte surface0 */
|
||||
background: #ccd0da;
|
||||
border-radius: 4px;
|
||||
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
|
||||
font-size: 12px;
|
||||
/* Latte subtext1 */
|
||||
color: #5c5f77;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.tiptap-runnable-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tiptap-runnable-actions button {
|
||||
padding: 6px 16px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tiptap-runnable-actions .cancel {
|
||||
/* Latte surface0 */
|
||||
background: #ccd0da;
|
||||
/* Latte text */
|
||||
color: #4c4f69;
|
||||
}
|
||||
|
||||
.tiptap-runnable-actions .insert {
|
||||
/* Catppuccin green —— 与 Code Runner 运行按钮主色一致 */
|
||||
background: #40a02b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tiptap-runnable-actions .insert:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 编辑器内 runnable 代码块视觉提示:左侧绿色边框 */
|
||||
.tiptap-editor pre:has(code[class*='runnable']) {
|
||||
border-left: 3px solid #40a02b;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
/* ========== Dark Theme: Runnable Modal (Mocha) ========== */
|
||||
.dark .tiptap-runnable-modal {
|
||||
/* Mocha mantle */
|
||||
background: #181825;
|
||||
border-color: #45475a;
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.dark .tiptap-runnable-modal-title {
|
||||
/* Mocha text */
|
||||
color: #cdd6f4;
|
||||
}
|
||||
|
||||
.dark .tiptap-runnable-field {
|
||||
/* Mocha subtext0 */
|
||||
color: #a6adc8;
|
||||
}
|
||||
|
||||
.dark .tiptap-runnable-field input[type='number'],
|
||||
.dark .tiptap-runnable-field select {
|
||||
border-color: #45475a;
|
||||
/* Mocha base */
|
||||
background: #1e1e2e;
|
||||
/* Mocha text */
|
||||
color: #cdd6f4;
|
||||
}
|
||||
|
||||
.dark .tiptap-runnable-field input[type='checkbox'] {
|
||||
/* Mocha green */
|
||||
accent-color: #a6e3a1;
|
||||
}
|
||||
|
||||
.dark .tiptap-runnable-preview {
|
||||
/* Mocha surface0 */
|
||||
background: #313244;
|
||||
/* Mocha subtext1 */
|
||||
color: #bac2de;
|
||||
}
|
||||
|
||||
.dark .tiptap-runnable-actions .cancel {
|
||||
/* Mocha surface0 */
|
||||
background: #313244;
|
||||
/* Mocha text */
|
||||
color: #cdd6f4;
|
||||
}
|
||||
|
||||
.dark .tiptap-runnable-actions .insert {
|
||||
/* Mocha green */
|
||||
background: #a6e3a1;
|
||||
/* Mocha base */
|
||||
color: #1e1e2e;
|
||||
}
|
||||
|
||||
.dark .tiptap-editor pre:has(code[class*='runnable']) {
|
||||
border-left-color: #a6e3a1;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user