687 lines
15 KiB
CSS
687 lines
15 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 222.2 84% 4.9%;
|
|
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 222.2 84% 4.9%;
|
|
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 222.2 84% 4.9%;
|
|
|
|
--primary: 222.2 47.4% 11.2%;
|
|
--primary-foreground: 210 40% 98%;
|
|
|
|
--secondary: 210 40% 96.1%;
|
|
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
|
|
--muted: 210 40% 96.1%;
|
|
--muted-foreground: 215.4 16.3% 46.9%;
|
|
|
|
--accent: 210 40% 96.1%;
|
|
--accent-foreground: 222.2 47.4% 11.2%;
|
|
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
|
|
--border: 214.3 31.8% 91.4%;
|
|
--input: 214.3 31.8% 91.4%;
|
|
--ring: 222.2 84% 4.9%;
|
|
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
.dark {
|
|
--background: 222.2 84% 4.9%;
|
|
--foreground: 210 40% 98%;
|
|
|
|
--card: 222.2 84% 4.9%;
|
|
--card-foreground: 210 40% 98%;
|
|
|
|
--popover: 222.2 84% 4.9%;
|
|
--popover-foreground: 210 40% 98%;
|
|
|
|
--primary: 210 40% 98%;
|
|
--primary-foreground: 222.2 47.4% 11.2%;
|
|
|
|
--secondary: 217.2 32.6% 17.5%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
|
|
--muted: 217.2 32.6% 17.5%;
|
|
--muted-foreground: 215 20.2% 65.1%;
|
|
|
|
--accent: 217.2 32.6% 17.5%;
|
|
--accent-foreground: 210 40% 98%;
|
|
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
|
|
--border: 217.2 32.6% 17.5%;
|
|
--input: 217.2 32.6% 17.5%;
|
|
--ring: 212.7 26.8% 83.9%;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
}
|
|
|
|
/* 模板样式 */
|
|
.prose-elegant {
|
|
--tw-prose-body: #2c3e50;
|
|
--tw-prose-headings: #16a34a;
|
|
--tw-prose-links: #3b82f6;
|
|
--tw-prose-code: #475569;
|
|
--tw-prose-quotes: #64748b;
|
|
}
|
|
|
|
.prose-modern {
|
|
--tw-prose-body: #374151;
|
|
--tw-prose-headings: #111827;
|
|
--tw-prose-links: #2563eb;
|
|
--tw-prose-code: #374151;
|
|
--tw-prose-quotes: #4b5563;
|
|
}
|
|
|
|
.prose-creative {
|
|
--tw-prose-body: #4a5568;
|
|
--tw-prose-headings: #2d3748;
|
|
--tw-prose-links: #4299e1;
|
|
--tw-prose-code: #4a5568;
|
|
--tw-prose-quotes: #718096;
|
|
}
|
|
|
|
.prose-minimal {
|
|
--tw-prose-body: #1a1a1a;
|
|
--tw-prose-headings: #000000;
|
|
--tw-prose-links: #0066cc;
|
|
--tw-prose-code: #1a1a1a;
|
|
--tw-prose-quotes: #666666;
|
|
}
|
|
|
|
/* 预览区域滚动条优化 */
|
|
.preview-container {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: hsl(var(--muted-foreground)) hsl(var(--muted));
|
|
}
|
|
|
|
.preview-container::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.preview-container::-webkit-scrollbar-track {
|
|
background: hsl(var(--muted));
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.preview-container::-webkit-scrollbar-thumb {
|
|
background-color: hsl(var(--muted-foreground));
|
|
border-radius: 4px;
|
|
border: 2px solid hsl(var(--muted));
|
|
}
|
|
|
|
.preview-container::-webkit-scrollbar-thumb:hover {
|
|
background-color: hsl(var(--foreground));
|
|
}
|
|
|
|
/* ByteMD 编辑器样式优化 */
|
|
.bytemd {
|
|
height: 100% !important;
|
|
border: none !important;
|
|
background: transparent !important;
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
}
|
|
|
|
.bytemd-toolbar {
|
|
background: #fff !important;
|
|
border-bottom: 1px solid #e5e7eb !important;
|
|
padding: 8px !important;
|
|
position: sticky !important;
|
|
top: 0 !important;
|
|
z-index: 10 !important;
|
|
}
|
|
|
|
.bytemd-toolbar-left {
|
|
display: flex !important;
|
|
flex-wrap: wrap !important;
|
|
gap: 4px !important;
|
|
}
|
|
|
|
.bytemd-toolbar-right {
|
|
display: flex !important;
|
|
gap: 4px !important;
|
|
}
|
|
|
|
.bytemd-toolbar-icon {
|
|
padding: 6px !important;
|
|
margin: 0 !important;
|
|
border-radius: 4px !important;
|
|
color: #4b5563 !important;
|
|
transition: all 0.2s ease !important;
|
|
}
|
|
|
|
.bytemd-toolbar-icon:hover {
|
|
background: #f3f4f6 !important;
|
|
color: #111827 !important;
|
|
}
|
|
|
|
.bytemd-toolbar-icon.active {
|
|
background: #f3f4f6 !important;
|
|
color: #2563eb !important;
|
|
}
|
|
|
|
.bytemd-status {
|
|
background: #fff !important;
|
|
border-top: 1px solid #e5e7eb !important;
|
|
padding: 4px 12px !important;
|
|
color: #6b7280 !important;
|
|
font-size: 12px !important;
|
|
position: sticky !important;
|
|
bottom: 0 !important;
|
|
z-index: 10 !important;
|
|
}
|
|
|
|
.bytemd-editor {
|
|
background: #fff !important;
|
|
flex: 1 !important;
|
|
overflow: auto !important;
|
|
padding: 0 16px !important;
|
|
}
|
|
|
|
.CodeMirror {
|
|
height: 100% !important;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
|
|
font-size: 14px !important;
|
|
line-height: 1.6 !important;
|
|
color: #374151 !important;
|
|
padding: 16px 0 !important;
|
|
}
|
|
|
|
.CodeMirror-lines {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.CodeMirror-line {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.CodeMirror-cursor {
|
|
border-left: 2px solid #2563eb !important;
|
|
}
|
|
|
|
.CodeMirror-selected {
|
|
background: rgba(37, 99, 235, 0.1) !important;
|
|
}
|
|
|
|
/* Markdown 语法高亮 */
|
|
.cm-s-default .cm-header {
|
|
color: #1e40af !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
.cm-s-default .cm-quote {
|
|
color: #059669 !important;
|
|
font-style: italic !important;
|
|
}
|
|
|
|
.cm-s-default .cm-link {
|
|
color: #2563eb !important;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.cm-s-default .cm-url {
|
|
color: #6b7280 !important;
|
|
}
|
|
|
|
.cm-s-default .cm-code,
|
|
.cm-s-default .cm-comment {
|
|
color: #dc2626 !important;
|
|
background: rgba(0, 0, 0, 0.05) !important;
|
|
padding: 2px 4px !important;
|
|
border-radius: 3px !important;
|
|
}
|
|
|
|
.cm-s-default .cm-strong {
|
|
color: #111827 !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
.cm-s-default .cm-em {
|
|
color: #4b5563 !important;
|
|
font-style: italic !important;
|
|
}
|
|
|
|
/* 编辑器滚动条优化 */
|
|
.bytemd-editor ::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.bytemd-editor ::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.bytemd-editor ::-webkit-scrollbar-thumb {
|
|
background: #d1d5db;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.bytemd-editor ::-webkit-scrollbar-thumb:hover {
|
|
background: #9ca3af;
|
|
}
|
|
|
|
/* 编辑器暗色主题支持 */
|
|
.dark .bytemd {
|
|
background: hsl(var(--background)) !important;
|
|
}
|
|
|
|
.dark .bytemd-toolbar {
|
|
background: hsl(var(--background)) !important;
|
|
border-color: hsl(var(--border)) !important;
|
|
}
|
|
|
|
.dark .bytemd-toolbar-icon {
|
|
color: hsl(var(--muted-foreground)) !important;
|
|
}
|
|
|
|
.dark .bytemd-toolbar-icon:hover {
|
|
background: hsl(var(--accent)) !important;
|
|
color: hsl(var(--accent-foreground)) !important;
|
|
}
|
|
|
|
.dark .bytemd-toolbar-icon.active {
|
|
background: hsl(var(--accent)) !important;
|
|
color: hsl(var(--accent-foreground)) !important;
|
|
}
|
|
|
|
.dark .bytemd-status {
|
|
background: hsl(var(--background)) !important;
|
|
border-color: hsl(var(--border)) !important;
|
|
color: hsl(var(--muted-foreground)) !important;
|
|
}
|
|
|
|
.dark .bytemd-editor {
|
|
background: hsl(var(--background)) !important;
|
|
}
|
|
|
|
.dark .CodeMirror {
|
|
color: hsl(var(--foreground)) !important;
|
|
background: hsl(var(--background)) !important;
|
|
}
|
|
|
|
.dark .CodeMirror-selected {
|
|
background: hsl(var(--accent))/.2 !important;
|
|
}
|
|
|
|
.dark .CodeMirror-line::selection,
|
|
.dark .CodeMirror-line > span::selection,
|
|
.dark .CodeMirror-line > span > span::selection {
|
|
background: hsl(var(--accent))/.2 !important;
|
|
}
|
|
|
|
.dark .cm-s-default .cm-header {
|
|
color: hsl(var(--primary)) !important;
|
|
}
|
|
|
|
.dark .cm-s-default .cm-quote {
|
|
color: hsl(var(--accent-foreground)) !important;
|
|
}
|
|
|
|
.dark .cm-s-default .cm-link {
|
|
color: hsl(var(--primary)) !important;
|
|
}
|
|
|
|
.dark .cm-s-default .cm-url {
|
|
color: hsl(var(--muted-foreground)) !important;
|
|
}
|
|
|
|
.dark .cm-s-default .cm-code,
|
|
.dark .cm-s-default .cm-comment {
|
|
color: hsl(var(--destructive)) !important;
|
|
background: hsl(var(--muted)) !important;
|
|
border-radius: 3px;
|
|
padding: 0 3px;
|
|
}
|
|
|
|
.dark .cm-s-default .cm-strong {
|
|
color: hsl(var(--foreground)) !important;
|
|
}
|
|
|
|
.dark .cm-s-default .cm-em {
|
|
color: hsl(var(--muted-foreground)) !important;
|
|
}
|
|
|
|
/* 编辑器容器样式优化 */
|
|
.editor-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.editor-container .bytemd {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100% !important;
|
|
}
|
|
|
|
.editor-container .bytemd-toolbar {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.editor-container .bytemd-editor {
|
|
flex: 1;
|
|
overflow: auto;
|
|
height: auto !important;
|
|
}
|
|
|
|
/* 预览容器样式优化 */
|
|
.preview-container {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.preview-container .preview-header {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.preview-container .preview-content {
|
|
padding: 20px;
|
|
overflow-wrap: break-word;
|
|
font-size: 15px;
|
|
line-height: 1.75;
|
|
color: #333;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.editor-container .bytemd-editor::-webkit-scrollbar-thumb,
|
|
.preview-container .preview-content::-webkit-scrollbar-thumb,
|
|
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
|
|
.CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
|
|
background-color: hsl(var(--muted-foreground));
|
|
border-radius: 4px;
|
|
border: 2px solid hsl(var(--muted));
|
|
}
|
|
|
|
.editor-container .bytemd-editor::-webkit-scrollbar-thumb:hover,
|
|
.preview-container .preview-content::-webkit-scrollbar-thumb:hover,
|
|
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
|
|
.CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover {
|
|
background-color: hsl(var(--foreground));
|
|
}
|
|
|
|
/* 暗黑模式下的滚动条样式 */
|
|
.dark .editor-container .bytemd-editor,
|
|
.dark .preview-container .preview-content,
|
|
.dark .CodeMirror-vscrollbar,
|
|
.dark .CodeMirror-hscrollbar {
|
|
scrollbar-color: hsl(var(--muted-foreground)) hsl(var(--muted));
|
|
}
|
|
|
|
.dark .editor-container .bytemd-editor::-webkit-scrollbar-track,
|
|
.dark .preview-container .preview-content::-webkit-scrollbar-track,
|
|
.dark .CodeMirror-vscrollbar::-webkit-scrollbar-track,
|
|
.dark .CodeMirror-hscrollbar::-webkit-scrollbar-track {
|
|
background: hsl(var(--muted));
|
|
}
|
|
|
|
.dark .editor-container .bytemd-editor::-webkit-scrollbar-thumb,
|
|
.dark .preview-container .preview-content::-webkit-scrollbar-thumb,
|
|
.dark .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
|
|
.dark .CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
|
|
background-color: hsl(var(--muted-foreground));
|
|
border: 2px solid hsl(var(--muted));
|
|
}
|
|
|
|
.dark .editor-container .bytemd-editor::-webkit-scrollbar-thumb:hover,
|
|
.dark .preview-container .preview-content::-webkit-scrollbar-thumb:hover,
|
|
.dark .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
|
|
.dark .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover {
|
|
background-color: hsl(var(--foreground));
|
|
}
|
|
|
|
/* 编辑器内部滚动条样式 */
|
|
.CodeMirror-vscrollbar,
|
|
.CodeMirror-hscrollbar {
|
|
display: block !important;
|
|
}
|
|
|
|
.CodeMirror-vscrollbar {
|
|
width: 8px !important;
|
|
}
|
|
|
|
.CodeMirror-hscrollbar {
|
|
height: 8px !important;
|
|
}
|
|
|
|
/* 隐藏默认滚动条 */
|
|
.CodeMirror-scroll {
|
|
margin-right: -8px !important;
|
|
margin-bottom: -8px !important;
|
|
}
|
|
|
|
/* 暗黑模式下的预览内容样式 */
|
|
.dark .preview-content {
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.dark .preview-content h1,
|
|
.dark .preview-content h2,
|
|
.dark .preview-content h3,
|
|
.dark .preview-content h4,
|
|
.dark .preview-content h5,
|
|
.dark .preview-content h6 {
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.dark .preview-content p {
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.dark .preview-content pre {
|
|
background: hsl(var(--muted));
|
|
border: 1px solid hsl(var(--border));
|
|
}
|
|
|
|
.dark .preview-content code {
|
|
background: hsl(var(--muted));
|
|
color: hsl(var(--accent-foreground));
|
|
}
|
|
|
|
.dark .preview-content blockquote {
|
|
background: hsl(var(--muted));
|
|
border-left-color: hsl(var(--primary));
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.dark .preview-content img {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.dark .preview-content th {
|
|
background: hsl(var(--muted));
|
|
}
|
|
|
|
.dark .preview-content td,
|
|
.dark .preview-content th {
|
|
border-color: hsl(var(--border));
|
|
}
|
|
|
|
/* 暗黑模式下的编辑器样式 */
|
|
.dark .bytemd {
|
|
background: hsl(var(--background)) !important;
|
|
}
|
|
|
|
.dark .bytemd-toolbar {
|
|
background: hsl(var(--background)) !important;
|
|
border-color: hsl(var(--border)) !important;
|
|
}
|
|
|
|
.dark .bytemd-toolbar-icon {
|
|
color: hsl(var(--muted-foreground)) !important;
|
|
}
|
|
|
|
.dark .bytemd-toolbar-icon:hover {
|
|
background: hsl(var(--accent)) !important;
|
|
color: hsl(var(--accent-foreground)) !important;
|
|
}
|
|
|
|
.dark .bytemd-toolbar-icon.active {
|
|
background: hsl(var(--accent)) !important;
|
|
color: hsl(var(--accent-foreground)) !important;
|
|
}
|
|
|
|
.dark .bytemd-status {
|
|
background: hsl(var(--background)) !important;
|
|
border-color: hsl(var(--border)) !important;
|
|
color: hsl(var(--muted-foreground)) !important;
|
|
}
|
|
|
|
.dark .bytemd-editor {
|
|
background: hsl(var(--background)) !important;
|
|
}
|
|
|
|
.dark .CodeMirror {
|
|
color: hsl(var(--foreground)) !important;
|
|
background: hsl(var(--background)) !important;
|
|
}
|
|
|
|
.dark .CodeMirror-cursor {
|
|
border-left-color: hsl(var(--primary)) !important;
|
|
}
|
|
|
|
.dark .CodeMirror-selected {
|
|
background: hsl(var(--accent))/.2 !important;
|
|
}
|
|
|
|
.dark .CodeMirror-line::selection,
|
|
.dark .CodeMirror-line > span::selection,
|
|
.dark .CodeMirror-line > span > span::selection {
|
|
background: hsl(var(--accent))/.2 !important;
|
|
}
|
|
|
|
.dark .cm-s-default .cm-header {
|
|
color: hsl(var(--primary)) !important;
|
|
}
|
|
|
|
.dark .cm-s-default .cm-quote {
|
|
color: hsl(var(--accent-foreground)) !important;
|
|
}
|
|
|
|
.dark .cm-s-default .cm-link {
|
|
color: hsl(var(--primary)) !important;
|
|
}
|
|
|
|
.dark .cm-s-default .cm-url {
|
|
color: hsl(var(--muted-foreground)) !important;
|
|
}
|
|
|
|
.dark .cm-s-default .cm-code,
|
|
.dark .cm-s-default .cm-comment {
|
|
color: hsl(var(--destructive)) !important;
|
|
background: hsl(var(--muted)) !important;
|
|
border-radius: 3px;
|
|
padding: 0 3px;
|
|
}
|
|
|
|
.dark .cm-s-default .cm-strong {
|
|
color: hsl(var(--foreground)) !important;
|
|
}
|
|
|
|
.dark .cm-s-default .cm-em {
|
|
color: hsl(var(--muted-foreground)) !important;
|
|
}
|
|
|
|
/* 暗黑模式下的滚动条样式 */
|
|
.dark .editor-container .bytemd-editor::-webkit-scrollbar,
|
|
.dark .preview-container ::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.dark .editor-container .bytemd-editor::-webkit-scrollbar-track,
|
|
.dark .preview-container ::-webkit-scrollbar-track {
|
|
background: hsl(var(--background));
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.dark .editor-container .bytemd-editor::-webkit-scrollbar-thumb,
|
|
.dark .preview-container ::-webkit-scrollbar-thumb {
|
|
background: hsl(var(--muted));
|
|
border-radius: 4px;
|
|
border: 2px solid hsl(var(--background));
|
|
}
|
|
|
|
.dark .editor-container .bytemd-editor::-webkit-scrollbar-thumb:hover,
|
|
.dark .preview-container ::-webkit-scrollbar-thumb:hover {
|
|
background: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
/* 暗黑模式下的UI元素样式 */
|
|
.dark .template-preview-card {
|
|
background: hsl(var(--background));
|
|
border-color: hsl(var(--border));
|
|
}
|
|
|
|
.dark .template-preview-card:hover {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.dark .template-preview-card::before {
|
|
background: linear-gradient(to right, hsl(var(--primary)), hsl(var(--primary-foreground)));
|
|
}
|
|
|
|
/* 暗黑模式下的分割线样式 */
|
|
.dark .h-px {
|
|
background: hsl(var(--border));
|
|
}
|
|
|
|
/* 暗黑模式下的阴影样式 */
|
|
.dark .shadow-sm {
|
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* 暗黑模式下的选择框样式 */
|
|
.dark select {
|
|
background-color: hsl(var(--background));
|
|
border-color: hsl(var(--border));
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.dark select:focus {
|
|
border-color: hsl(var(--primary));
|
|
box-shadow: 0 0 0 2px hsl(var(--primary)/.2);
|
|
}
|
|
|
|
.dark select option {
|
|
background-color: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
/* 暗黑模式下的按钮悬停效果 */
|
|
.dark .hover\:bg-muted\/90:hover {
|
|
background-color: hsl(var(--muted)/.9);
|
|
}
|
|
|
|
.dark .hover\:bg-primary\/90:hover {
|
|
background-color: hsl(var(--primary)/.9);
|
|
}
|
|
|
|
/* 暗黑模式下的加载动画 */
|
|
.dark .animate-spin {
|
|
color: hsl(var(--primary));
|
|
} |