update
This commit is contained in:
@ -356,31 +356,31 @@ export class CodeBlockHandler extends BaseBlockHandler {
|
||||
|
||||
getStyles(): string {
|
||||
return `
|
||||
/* Code Block Container */
|
||||
/* Code Block Container - Minimalist shadcn style */
|
||||
.code-block-container {
|
||||
position: relative;
|
||||
margin: 16px 0;
|
||||
background: ${cssManager.bdTheme('#f6f8fa', '#0d1117')};
|
||||
border: 1px solid ${cssManager.bdTheme('#d1d5da', '#30363d')};
|
||||
border-radius: 8px;
|
||||
margin: 12px 0;
|
||||
background: transparent;
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#374151')};
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.code-block-container.selected {
|
||||
border-color: ${cssManager.bdTheme('#0969da', '#58a6ff')};
|
||||
box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(9, 105, 218, 0.15)', 'rgba(88, 166, 255, 0.15)')};
|
||||
border-color: ${cssManager.bdTheme('#9ca3af', '#6b7280')};
|
||||
}
|
||||
|
||||
.code-block-container.editing {
|
||||
border-color: ${cssManager.bdTheme('#0969da', '#58a6ff')};
|
||||
border-color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
|
||||
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
}
|
||||
|
||||
/* Header */
|
||||
/* Header - Simplified */
|
||||
.code-header {
|
||||
background: ${cssManager.bdTheme('#f6f8fa', '#161b22')};
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#d1d5da', '#30363d')};
|
||||
padding: 8px 16px;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#374151')};
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@ -388,52 +388,55 @@ export class CodeBlockHandler extends BaseBlockHandler {
|
||||
|
||||
.language-label {
|
||||
font-size: 12px;
|
||||
color: ${cssManager.bdTheme('#57606a', '#8b949e')};
|
||||
background: ${cssManager.bdTheme('#ffffff', '#0d1117')};
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
/* Copy Button */
|
||||
/* Copy Button - Minimal */
|
||||
.copy-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 12px;
|
||||
gap: 4px;
|
||||
padding: 4px 8px;
|
||||
background: transparent;
|
||||
border: 1px solid ${cssManager.bdTheme('#d1d5da', '#30363d')};
|
||||
border-radius: 6px;
|
||||
color: ${cssManager.bdTheme('#57606a', '#8b949e')};
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
|
||||
font-size: 12px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.15s ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.copy-button:hover {
|
||||
background: ${cssManager.bdTheme('#f3f4f6', '#1c2128')};
|
||||
color: ${cssManager.bdTheme('#24292f', '#c9d1d9')};
|
||||
border-color: ${cssManager.bdTheme('#8b949e', '#484f58')};
|
||||
background: ${cssManager.bdTheme('#f9fafb', '#1f2937')};
|
||||
border-color: ${cssManager.bdTheme('#e5e7eb', '#374151')};
|
||||
color: ${cssManager.bdTheme('#374151', '#e5e7eb')};
|
||||
}
|
||||
|
||||
.copy-button:active {
|
||||
transform: scale(0.95);
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.copy-button.copied {
|
||||
background: ${cssManager.bdTheme('#2ea043', '#238636')};
|
||||
border-color: ${cssManager.bdTheme('#2ea043', '#238636')};
|
||||
color: white;
|
||||
color: ${cssManager.bdTheme('#059669', '#10b981')};
|
||||
}
|
||||
|
||||
.copy-icon {
|
||||
flex-shrink: 0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.copy-button:hover .copy-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.copy-text {
|
||||
min-width: 45px;
|
||||
min-width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -441,26 +444,27 @@ export class CodeBlockHandler extends BaseBlockHandler {
|
||||
.code-body {
|
||||
display: flex;
|
||||
position: relative;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
}
|
||||
|
||||
/* Line Numbers */
|
||||
/* Line Numbers - Subtle */
|
||||
.line-numbers {
|
||||
flex-shrink: 0;
|
||||
padding: 16px 0;
|
||||
background: ${cssManager.bdTheme('#f6f8fa', '#010409')};
|
||||
border-right: 1px solid ${cssManager.bdTheme('#d1d5da', '#30363d')};
|
||||
padding: 12px 0;
|
||||
background: transparent;
|
||||
text-align: right;
|
||||
user-select: none;
|
||||
min-width: 50px;
|
||||
min-width: 40px;
|
||||
border-right: 1px solid ${cssManager.bdTheme('#e5e7eb', '#374151')};
|
||||
}
|
||||
|
||||
.line-number {
|
||||
padding: 0 12px;
|
||||
color: ${cssManager.bdTheme('#57606a', '#484f58')};
|
||||
padding: 0 12px 0 8px;
|
||||
color: ${cssManager.bdTheme('#9ca3af', '#4b5563')};
|
||||
font-family: 'SF Mono', Monaco, Consolas, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
height: 21px;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* Code Content */
|
||||
@ -478,122 +482,124 @@ export class CodeBlockHandler extends BaseBlockHandler {
|
||||
|
||||
.code-editor {
|
||||
display: block;
|
||||
padding: 16px;
|
||||
padding: 12px 16px;
|
||||
margin: 0;
|
||||
font-family: 'SF Mono', Monaco, Consolas, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
color: ${cssManager.bdTheme('#24292f', '#c9d1d9')};
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
color: ${cssManager.bdTheme('#111827', '#f9fafb')};
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
min-height: 84px;
|
||||
min-height: 60px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Placeholder */
|
||||
.code-editor:empty::before {
|
||||
content: "// Type or paste code here...";
|
||||
color: ${cssManager.bdTheme('#6a737d', '#484f58')};
|
||||
color: ${cssManager.bdTheme('#9ca3af', '#4b5563')};
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Colors */
|
||||
/* Syntax Highlighting - Muted colors */
|
||||
.code-editor .hljs-keyword {
|
||||
color: ${cssManager.bdTheme('#d73a49', '#ff7b72')};
|
||||
color: ${cssManager.bdTheme('#dc2626', '#f87171')};
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.code-editor .hljs-string {
|
||||
color: ${cssManager.bdTheme('#032f62', '#a5d6ff')};
|
||||
color: ${cssManager.bdTheme('#059669', '#10b981')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-number {
|
||||
color: ${cssManager.bdTheme('#005cc5', '#79c0ff')};
|
||||
color: ${cssManager.bdTheme('#7c3aed', '#a78bfa')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-function {
|
||||
color: ${cssManager.bdTheme('#6f42c1', '#d2a8ff')};
|
||||
color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-comment {
|
||||
color: ${cssManager.bdTheme('#6a737d', '#8b949e')};
|
||||
color: ${cssManager.bdTheme('#6b7280', '#6b7280')};
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.code-editor .hljs-variable,
|
||||
.code-editor .hljs-attr {
|
||||
color: ${cssManager.bdTheme('#e36209', '#ffa657')};
|
||||
color: ${cssManager.bdTheme('#ea580c', '#fb923c')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-class,
|
||||
.code-editor .hljs-title {
|
||||
color: ${cssManager.bdTheme('#6f42c1', '#d2a8ff')};
|
||||
color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.code-editor .hljs-params {
|
||||
color: ${cssManager.bdTheme('#24292f', '#c9d1d9')};
|
||||
color: ${cssManager.bdTheme('#374151', '#e5e7eb')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-built_in {
|
||||
color: ${cssManager.bdTheme('#005cc5', '#79c0ff')};
|
||||
color: ${cssManager.bdTheme('#7c3aed', '#a78bfa')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-literal {
|
||||
color: ${cssManager.bdTheme('#005cc5', '#79c0ff')};
|
||||
color: ${cssManager.bdTheme('#7c3aed', '#a78bfa')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-meta {
|
||||
color: ${cssManager.bdTheme('#735c0f', '#f2cc60')};
|
||||
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-punctuation {
|
||||
color: ${cssManager.bdTheme('#24292f', '#c9d1d9')};
|
||||
color: ${cssManager.bdTheme('#374151', '#d1d5db')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-tag {
|
||||
color: ${cssManager.bdTheme('#22863a', '#7ee83f')};
|
||||
color: ${cssManager.bdTheme('#dc2626', '#f87171')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-attribute {
|
||||
color: ${cssManager.bdTheme('#6f42c1', '#d2a8ff')};
|
||||
color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-selector-tag {
|
||||
color: ${cssManager.bdTheme('#22863a', '#7ee83f')};
|
||||
color: ${cssManager.bdTheme('#dc2626', '#f87171')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-selector-class {
|
||||
color: ${cssManager.bdTheme('#6f42c1', '#d2a8ff')};
|
||||
color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-selector-id {
|
||||
color: ${cssManager.bdTheme('#005cc5', '#79c0ff')};
|
||||
color: ${cssManager.bdTheme('#7c3aed', '#a78bfa')};
|
||||
}
|
||||
|
||||
/* Selection */
|
||||
.code-editor::selection,
|
||||
.code-editor *::selection {
|
||||
background: ${cssManager.bdTheme('rgba(9, 105, 218, 0.3)', 'rgba(88, 166, 255, 0.3)')};
|
||||
background: ${cssManager.bdTheme('rgba(99, 102, 241, 0.2)', 'rgba(99, 102, 241, 0.3)')};
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
/* Scrollbar styling - Minimal */
|
||||
.code-content::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.code-content::-webkit-scrollbar-track {
|
||||
background: ${cssManager.bdTheme('#f6f8fa', '#010409')};
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.code-content::-webkit-scrollbar-thumb {
|
||||
background: ${cssManager.bdTheme('#d1d5da', '#30363d')};
|
||||
border-radius: 4px;
|
||||
background: ${cssManager.bdTheme('#d1d5db', '#4b5563')};
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.code-content::-webkit-scrollbar-thumb:hover {
|
||||
background: ${cssManager.bdTheme('#c8c8c8', '#484f58')};
|
||||
background: ${cssManager.bdTheme('#9ca3af', '#6b7280')};
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
Reference in New Issue
Block a user