ViperEkura
/
nanoClaw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: 修改前端风格

This commit is contained in:
ViperEkura 2026-03-24 15:37:50 +08:00
parent d7fe954098
commit b007499c7d
7 changed files with 127 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/App.vue
View File

@ -271,8 +271,8 @@ html, body {
body { body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', sans-serif;
background: #0f172a; background: #f0f4f8;
color: #e2e8f0; color: #1e293b;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }

63
frontend/src/components/ChatView.vue
View File

@ -140,7 +140,7 @@ defineExpose({ scrollToBottom })
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
background: #0f172a; background: #f8fafc;
min-width: 0; min-width: 0;
} }
@ -150,14 +150,14 @@ defineExpose({ scrollToBottom })
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #475569; color: #94a3b8;
} }
.welcome-icon { .welcome-icon {
width: 64px; width: 64px;
height: 64px; height: 64px;
border-radius: 16px; border-radius: 16px;
background: linear-gradient(135deg, #2563eb, #0ea5e9); background: linear-gradient(135deg, #2563eb, #3b82f6);
color: white; color: white;
display: flex; display: flex;
align-items: center; align-items: center;
@ -169,7 +169,7 @@ defineExpose({ scrollToBottom })
.welcome h1 { .welcome h1 {
font-size: 24px; font-size: 24px;
color: #e2e8f0; color: #1e293b;
margin: 0 0 8px; margin: 0 0 8px;
} }
@ -182,8 +182,8 @@ defineExpose({ scrollToBottom })
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 12px 24px; padding: 12px 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(0, 0, 0, 0.06);
background: rgba(15, 23, 42, 0.8); background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
} }
@ -197,7 +197,7 @@ defineExpose({ scrollToBottom })
.chat-title { .chat-title {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: #e2e8f0; color: #1e293b;
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -208,8 +208,8 @@ defineExpose({ scrollToBottom })
font-size: 11px; font-size: 11px;
padding: 2px 8px; padding: 2px 8px;
border-radius: 10px; border-radius: 10px;
background: rgba(37, 99, 235, 0.15); background: rgba(37, 99, 235, 0.1);
color: #60a5fa; color: #2563eb;
flex-shrink: 0; flex-shrink: 0;
} }
@ -217,8 +217,8 @@ defineExpose({ scrollToBottom })
font-size: 11px; font-size: 11px;
padding: 2px 8px; padding: 2px 8px;
border-radius: 10px; border-radius: 10px;
background: rgba(16, 185, 129, 0.15); background: rgba(16, 185, 129, 0.1);
color: #6ee7b7; color: #059669;
flex-shrink: 0; flex-shrink: 0;
} }
@ -233,7 +233,7 @@ defineExpose({ scrollToBottom })
border-radius: 8px; border-radius: 8px;
border: none; border: none;
background: none; background: none;
color: #64748b; color: #94a3b8;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
@ -242,8 +242,8 @@ defineExpose({ scrollToBottom })
} }
.btn-icon:hover { .btn-icon:hover {
background: rgba(255, 255, 255, 0.06); background: rgba(37, 99, 235, 0.08);
color: #e2e8f0; color: #2563eb;
} }
.messages-container { .messages-container {
@ -257,7 +257,7 @@ defineExpose({ scrollToBottom })
} }
.messages-container::-webkit-scrollbar-thumb { .messages-container::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.08);
border-radius: 3px; border-radius: 3px;
} }
@ -268,8 +268,8 @@ defineExpose({ scrollToBottom })
.load-more-top button { .load-more-top button {
background: none; background: none;
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(0, 0, 0, 0.1);
color: #94a3b8; color: #64748b;
padding: 6px 16px; padding: 6px 16px;
border-radius: 16px; border-radius: 16px;
cursor: pointer; cursor: pointer;
@ -278,8 +278,8 @@ defineExpose({ scrollToBottom })
} }
.load-more-top button:hover { .load-more-top button:hover {
background: rgba(255, 255, 255, 0.06); background: rgba(37, 99, 235, 0.06);
color: #e2e8f0; color: #2563eb;
} }
.messages-list { .messages-list {
@ -289,20 +289,20 @@ defineExpose({ scrollToBottom })
.streaming-thinking { .streaming-thinking {
font-size: 13px; font-size: 13px;
color: #94a3b8; color: #64748b;
line-height: 1.6; line-height: 1.6;
white-space: pre-wrap; white-space: pre-wrap;
padding: 12px; padding: 12px;
background: rgba(255, 255, 255, 0.02); background: #f1f5f9;
border-radius: 8px; border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.06); border: 1px solid rgba(0, 0, 0, 0.06);
margin-bottom: 8px; margin-bottom: 8px;
} }
.streaming-content { .streaming-content {
font-size: 15px; font-size: 15px;
line-height: 1.7; line-height: 1.7;
color: #e2e8f0; color: #1e293b;
word-break: break-word; word-break: break-word;
} }
@ -315,7 +315,8 @@ defineExpose({ scrollToBottom })
} }
.streaming-content :deep(pre) { .streaming-content :deep(pre) {
background: #0d1117; background: #f1f5f9;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 8px; border-radius: 8px;
padding: 16px; padding: 16px;
overflow-x: auto; overflow-x: auto;
@ -329,7 +330,8 @@ defineExpose({ scrollToBottom })
} }
.streaming-content :deep(code) { .streaming-content :deep(code) {
background: rgba(255, 255, 255, 0.06); background: rgba(37, 99, 235, 0.08);
color: #2563eb;
padding: 2px 6px; padding: 2px 6px;
border-radius: 4px; border-radius: 4px;
font-size: 13px; font-size: 13px;
@ -338,6 +340,7 @@ defineExpose({ scrollToBottom })
.streaming-content :deep(pre code) { .streaming-content :deep(pre code) {
background: none; background: none;
color: inherit;
padding: 0; padding: 0;
} }
@ -348,9 +351,9 @@ defineExpose({ scrollToBottom })
} }
.streaming-content :deep(blockquote) { .streaming-content :deep(blockquote) {
border-left: 3px solid rgba(59, 130, 246, 0.5); border-left: 3px solid rgba(59, 130, 246, 0.4);
padding-left: 12px; padding-left: 12px;
color: #94a3b8; color: #64748b;
margin: 8px 0; margin: 8px 0;
} }
@ -362,16 +365,16 @@ defineExpose({ scrollToBottom })
.streaming-content :deep(th), .streaming-content :deep(th),
.streaming-content :deep(td) { .streaming-content :deep(td) {
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(0, 0, 0, 0.08);
padding: 8px 12px; padding: 8px 12px;
text-align: left; text-align: left;
} }
.streaming-content :deep(th) { .streaming-content :deep(th) {
background: rgba(255, 255, 255, 0.04); background: #f1f5f9;
} }
.streaming-content :deep(.placeholder) { .streaming-content :deep(.placeholder) {
color: #475569; color: #94a3b8;
} }
</style> </style>

46
frontend/src/components/MessageBubble.vue
View File

@ -103,12 +103,12 @@ function copyContent() {
} }
.user .avatar { .user .avatar {
background: linear-gradient(135deg, #2563eb, #0ea5e9); background: linear-gradient(135deg, #2563eb, #3b82f6);
color: white; color: white;
} }
.assistant .avatar { .assistant .avatar {
background: linear-gradient(135deg, #0ea5e9, #06b6d4); background: linear-gradient(135deg, #3b82f6, #60a5fa);
color: white; color: white;
} }
@ -120,16 +120,16 @@ function copyContent() {
.thinking-block { .thinking-block {
margin-bottom: 8px; margin-bottom: 8px;
border-radius: 8px; border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.06); border: 1px solid rgba(0, 0, 0, 0.06);
overflow: hidden; overflow: hidden;
} }
.thinking-toggle { .thinking-toggle {
width: 100%; width: 100%;
padding: 8px 12px; padding: 8px 12px;
background: rgba(255, 255, 255, 0.03); background: #f8fafc;
border: none; border: none;
color: #94a3b8; color: #64748b;
font-size: 13px; font-size: 13px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -139,7 +139,7 @@ function copyContent() {
} }
.thinking-toggle:hover { .thinking-toggle:hover {
background: rgba(255, 255, 255, 0.06); background: #f1f5f9;
} }
.thinking-toggle .arrow { .thinking-toggle .arrow {
@ -154,9 +154,10 @@ function copyContent() {
.thinking-content { .thinking-content {
padding: 12px; padding: 12px;
font-size: 13px; font-size: 13px;
color: #94a3b8; color: #64748b;
line-height: 1.6; line-height: 1.6;
border-top: 1px solid rgba(255, 255, 255, 0.06); border-top: 1px solid rgba(0, 0, 0, 0.06);
background: #f8fafc;
white-space: pre-wrap; white-space: pre-wrap;
max-height: 300px; max-height: 300px;
overflow-y: auto; overflow-y: auto;
@ -165,7 +166,7 @@ function copyContent() {
.message-content { .message-content {
font-size: 15px; font-size: 15px;
line-height: 1.7; line-height: 1.7;
color: #e2e8f0; color: #1e293b;
word-break: break-word; word-break: break-word;
} }
@ -178,7 +179,8 @@ function copyContent() {
} }
.message-content :deep(pre) { .message-content :deep(pre) {
background: #0d1117; background: #f1f5f9;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 8px; border-radius: 8px;
padding: 16px; padding: 16px;
overflow-x: auto; overflow-x: auto;
@ -193,7 +195,8 @@ function copyContent() {
} }
.message-content :deep(code) { .message-content :deep(code) {
background: rgba(255, 255, 255, 0.06); background: rgba(37, 99, 235, 0.08);
color: #2563eb;
padding: 2px 6px; padding: 2px 6px;
border-radius: 4px; border-radius: 4px;
font-size: 13px; font-size: 13px;
@ -202,6 +205,7 @@ function copyContent() {
.message-content :deep(pre code) { .message-content :deep(pre code) {
background: none; background: none;
color: inherit;
padding: 0; padding: 0;
} }
@ -212,9 +216,9 @@ function copyContent() {
} }
.message-content :deep(blockquote) { .message-content :deep(blockquote) {
border-left: 3px solid rgba(59, 130, 246, 0.5); border-left: 3px solid rgba(59, 130, 246, 0.4);
padding-left: 12px; padding-left: 12px;
color: #94a3b8; color: #64748b;
margin: 8px 0; margin: 8px 0;
} }
@ -226,13 +230,13 @@ function copyContent() {
.message-content :deep(th), .message-content :deep(th),
.message-content :deep(td) { .message-content :deep(td) {
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(0, 0, 0, 0.08);
padding: 8px 12px; padding: 8px 12px;
text-align: left; text-align: left;
} }
.message-content :deep(th) { .message-content :deep(th) {
background: rgba(255, 255, 255, 0.04); background: #f1f5f9;
} }
.message-footer { .message-footer {
@ -251,14 +255,14 @@ function copyContent() {
.token-count, .token-count,
.message-time { .message-time {
font-size: 12px; font-size: 12px;
color: #475569; color: #94a3b8;
} }
.btn-copy, .btn-copy,
.btn-delete-msg { .btn-delete-msg {
background: none; background: none;
border: none; border: none;
color: #64748b; color: #94a3b8;
cursor: pointer; cursor: pointer;
padding: 4px; padding: 4px;
border-radius: 4px; border-radius: 4px;
@ -268,12 +272,12 @@ function copyContent() {
} }
.btn-copy:hover { .btn-copy:hover {
color: #60a5fa; color: #2563eb;
background: rgba(96, 165, 250, 0.1); background: rgba(37, 99, 235, 0.08);
} }
.btn-delete-msg:hover { .btn-delete-msg:hover {
color: #f87171; color: #ef4444;
background: rgba(248, 113, 113, 0.1); background: rgba(239, 68, 68, 0.08);
} }
</style> </style>

20
frontend/src/components/MessageInput.vue
View File

@ -73,15 +73,15 @@ defineExpose({ focus })
<style scoped> <style scoped>
.message-input { .message-input {
padding: 16px 24px 12px; padding: 16px 24px 12px;
background: #16213e; background: #ffffff;
border-top: 1px solid rgba(255, 255, 255, 0.06); border-top: 1px solid rgba(0, 0, 0, 0.06);
} }
.input-wrapper { .input-wrapper {
display: flex; display: flex;
align-items: flex-end; align-items: center;
background: #1a1a2e; background: #f8fafc;
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 12px; border-radius: 12px;
padding: 8px 12px; padding: 8px 12px;
transition: border-color 0.2s; transition: border-color 0.2s;
@ -95,7 +95,7 @@ textarea {
flex: 1; flex: 1;
background: none; background: none;
border: none; border: none;
color: #e2e8f0; color: #1e293b;
font-size: 15px; font-size: 15px;
line-height: 1.5; line-height: 1.5;
resize: none; resize: none;
@ -105,7 +105,7 @@ textarea {
} }
textarea::placeholder { textarea::placeholder {
color: #475569; color: #94a3b8;
} }
textarea:disabled { textarea:disabled {
@ -124,8 +124,8 @@ textarea:disabled {
height: 36px; height: 36px;
border-radius: 8px; border-radius: 8px;
border: none; border: none;
background: rgba(255, 255, 255, 0.06); background: #e2e8f0;
color: #475569; color: #94a3b8;
cursor: not-allowed; cursor: not-allowed;
display: flex; display: flex;
align-items: center; align-items: center;
@ -146,7 +146,7 @@ textarea:disabled {
.input-hint { .input-hint {
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
color: #374151; color: #94a3b8;
margin-top: 8px; margin-top: 8px;
} }
</style> </style>

49
frontend/src/components/SettingsPanel.vue
View File

@ -136,7 +136,7 @@ function save() {
.settings-overlay { .settings-overlay {
position: fixed; position: fixed;
inset: 0; inset: 0;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.3);
z-index: 100; z-index: 100;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@ -145,8 +145,8 @@ function save() {
.settings-panel { .settings-panel {
width: 380px; width: 380px;
height: 100vh; height: 100vh;
background: #1a1a2e; background: #ffffff;
border-left: 1px solid rgba(255, 255, 255, 0.06); border-left: 1px solid rgba(0, 0, 0, 0.06);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: auto; overflow-y: auto;
@ -157,19 +157,19 @@ function save() {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 20px 24px; padding: 20px 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(0, 0, 0, 0.06);
} }
.settings-header h3 { .settings-header h3 {
margin: 0; margin: 0;
font-size: 16px; font-size: 16px;
color: #e2e8f0; color: #1e293b;
} }
.btn-close { .btn-close {
background: none; background: none;
border: none; border: none;
color: #64748b; color: #94a3b8;
cursor: pointer; cursor: pointer;
padding: 4px; padding: 4px;
border-radius: 4px; border-radius: 4px;
@ -177,8 +177,8 @@ function save() {
} }
.btn-close:hover { .btn-close:hover {
color: #e2e8f0; color: #1e293b;
background: rgba(255, 255, 255, 0.06); background: rgba(37, 99, 235, 0.08);
} }
.settings-body { .settings-body {
@ -193,14 +193,14 @@ function save() {
.form-group label { .form-group label {
display: block; display: block;
font-size: 13px; font-size: 13px;
color: #94a3b8; color: #64748b;
margin-bottom: 8px; margin-bottom: 8px;
font-weight: 500; font-weight: 500;
} }
.value-display { .value-display {
float: right; float: right;
color: #60a5fa; color: #2563eb;
font-weight: 600; font-weight: 600;
} }
@ -209,10 +209,10 @@ function save() {
.form-group select { .form-group select {
width: 100%; width: 100%;
padding: 10px 12px; padding: 10px 12px;
background: #0f172a; background: #f8fafc;
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 8px; border-radius: 8px;
color: #e2e8f0; color: #1e293b;
font-size: 14px; font-size: 14px;
font-family: inherit; font-family: inherit;
outline: none; outline: none;
@ -236,7 +236,7 @@ function save() {
} }
.form-group select option { .form-group select option {
background: #0f172a; background: #ffffff;
} }
.form-row { .form-row {
@ -253,7 +253,7 @@ function save() {
height: 4px; height: 4px;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
background: rgba(255, 255, 255, 0.1); background: #e2e8f0;
border-radius: 2px; border-radius: 2px;
outline: none; outline: none;
} }
@ -266,14 +266,14 @@ function save() {
border-radius: 50%; border-radius: 50%;
background: #2563eb; background: #2563eb;
cursor: pointer; cursor: pointer;
border: 2px solid #0f172a; border: 2px solid #ffffff;
} }
.range-labels { .range-labels {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 11px; font-size: 11px;
color: #475569; color: #94a3b8;
margin-top: 4px; margin-top: 4px;
} }
@ -292,7 +292,7 @@ function save() {
height: 24px; height: 24px;
border-radius: 12px; border-radius: 12px;
border: none; border: none;
background: rgba(255, 255, 255, 0.1); background: #e2e8f0;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
transition: background 0.2s; transition: background 0.2s;
@ -300,7 +300,7 @@ function save() {
} }
.toggle.on { .toggle.on {
background: #4f46e5; background: #2563eb;
} }
.toggle-thumb { .toggle-thumb {
@ -312,6 +312,7 @@ function save() {
border-radius: 50%; border-radius: 50%;
background: white; background: white;
transition: transform 0.2s; transition: transform 0.2s;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
} }
.toggle.on .toggle-thumb { .toggle.on .toggle-thumb {
@ -320,7 +321,7 @@ function save() {
.settings-footer { .settings-footer {
padding: 16px 24px; padding: 16px 24px;
border-top: 1px solid rgba(255, 255, 255, 0.06); border-top: 1px solid rgba(0, 0, 0, 0.06);
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 8px; gap: 8px;
@ -329,17 +330,17 @@ function save() {
.btn-cancel { .btn-cancel {
padding: 8px 20px; padding: 8px 20px;
border-radius: 8px; border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(0, 0, 0, 0.1);
background: none; background: none;
color: #94a3b8; color: #64748b;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
transition: all 0.15s; transition: all 0.15s;
} }
.btn-cancel:hover { .btn-cancel:hover {
background: rgba(255, 255, 255, 0.06); background: rgba(37, 99, 235, 0.06);
color: #e2e8f0; color: #1e293b;
} }
.btn-save { .btn-save {

32
frontend/src/components/Sidebar.vue
View File

@ -75,8 +75,8 @@ function onContextMenu(e, conv) {
.sidebar { .sidebar {
width: 280px; width: 280px;
min-width: 280px; min-width: 280px;
background: #1a1a2e; background: #ffffff;
border-right: 1px solid rgba(255, 255, 255, 0.06); border-right: 1px solid rgba(0, 0, 0, 0.08);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
@ -89,10 +89,10 @@ function onContextMenu(e, conv) {
.btn-new { .btn-new {
width: 100%; width: 100%;
padding: 10px 16px; padding: 10px 16px;
background: rgba(37, 99, 235, 0.15); background: rgba(37, 99, 235, 0.08);
border: 1px dashed rgba(37, 99, 235, 0.4); border: 1px dashed rgba(37, 99, 235, 0.35);
border-radius: 10px; border-radius: 10px;
color: #60a5fa; color: #2563eb;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -102,8 +102,8 @@ function onContextMenu(e, conv) {
} }
.btn-new:hover { .btn-new:hover {
background: rgba(37, 99, 235, 0.25); background: rgba(37, 99, 235, 0.15);
border-color: rgba(37, 99, 235, 0.6); border-color: rgba(37, 99, 235, 0.5);
} }
.btn-new .icon { .btn-new .icon {
@ -122,7 +122,7 @@ function onContextMenu(e, conv) {
} }
.conversation-list::-webkit-scrollbar-thumb { .conversation-list::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.1);
border-radius: 2px; border-radius: 2px;
} }
@ -137,11 +137,11 @@ function onContextMenu(e, conv) {
} }
.conversation-item:hover { .conversation-item:hover {
background: rgba(255, 255, 255, 0.05); background: rgba(37, 99, 235, 0.06);
} }
.conversation-item.active { .conversation-item.active {
background: rgba(37, 99, 235, 0.2); background: rgba(37, 99, 235, 0.12);
} }
.conv-info { .conv-info {
@ -151,7 +151,7 @@ function onContextMenu(e, conv) {
.conv-title { .conv-title {
font-size: 14px; font-size: 14px;
color: #e2e8f0; color: #1e293b;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -159,7 +159,7 @@ function onContextMenu(e, conv) {
.conv-meta { .conv-meta {
font-size: 12px; font-size: 12px;
color: #64748b; color: #94a3b8;
margin-top: 2px; margin-top: 2px;
} }
@ -167,7 +167,7 @@ function onContextMenu(e, conv) {
opacity: 0; opacity: 0;
background: none; background: none;
border: none; border: none;
color: #64748b; color: #94a3b8;
cursor: pointer; cursor: pointer;
padding: 4px; padding: 4px;
border-radius: 4px; border-radius: 4px;
@ -180,14 +180,14 @@ function onContextMenu(e, conv) {
} }
.btn-delete:hover { .btn-delete:hover {
color: #f87171; color: #ef4444;
background: rgba(248, 113, 113, 0.1); background: rgba(239, 68, 68, 0.08);
} }
.loading-more, .loading-more,
.empty-hint { .empty-hint {
text-align: center; text-align: center;
color: #475569; color: #94a3b8;
font-size: 13px; font-size: 13px;
padding: 20px; padding: 20px;
} }

32
frontend/src/styles/highlight.css
View File

@ -1,67 +1,67 @@
/* highlight.js - GitHub Dark theme override for code blocks */ /* highlight.js - Light theme for code blocks */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');
.hljs { .hljs {
color: #e6edf3; color: #24292f;
background: #0d1117; background: #f1f5f9;
} }
.hljs-comment, .hljs-comment,
.hljs-quote { .hljs-quote {
color: #8b949e; color: #6e7781;
font-style: italic; font-style: italic;
} }
.hljs-keyword, .hljs-keyword,
.hljs-selector-tag, .hljs-selector-tag,
.hljs-type { .hljs-type {
color: #ff7b72; color: #cf222e;
} }
.hljs-string, .hljs-string,
.hljs-addition { .hljs-addition {
color: #a5d6ff; color: #0a3069;
} }
.hljs-number, .hljs-number,
.hljs-literal { .hljs-literal {
color: #79c0ff; color: #0550ae;
} }
.hljs-built_in, .hljs-built_in,
.hljs-builtin-name { .hljs-builtin-name {
color: #ffa657; color: #953800;
} }
.hljs-function .hljs-title, .hljs-function .hljs-title,
.hljs-title.function_ { .hljs-title.function_ {
color: #d2a8ff; color: #8250df;
} }
.hljs-variable, .hljs-variable,
.hljs-template-variable { .hljs-template-variable {
color: #ffa657; color: #953800;
} }
.hljs-attr, .hljs-attr,
.hljs-attribute { .hljs-attribute {
color: #79c0ff; color: #0550ae;
} }
.hljs-selector-class { .hljs-selector-class {
color: #7ee787; color: #116329;
} }
.hljs-meta { .hljs-meta {
color: #79c0ff; color: #0550ae;
} }
.hljs-deletion { .hljs-deletion {
color: #ffa198; color: #82071e;
background: rgba(248, 81, 73, 0.1); background: rgba(248, 81, 73, 0.1);
} }
.hljs-addition { .hljs-addition {
color: #aff5b4; color: #116329;
background: rgba(46, 160, 67, 0.15); background: rgba(46, 160, 67, 0.1);
} }