XEngineers/CamTalk
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styles：美化样式 #207

Merged
cfy777 merged 4 commits from feat/styles into main 2026-06-22 19:32:47 +08:00
Conversation 0 Commits 4 Files Changed 3 +117 -113
1 changed files with 117 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 18aa5f1949 - Show all commits

230
frontend/src/App.css
View File

@@ -1392,6 +1392,11 @@ body {
to { opacity: 1; } to { opacity: 1; }
} }
@keyframes slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---- Scrollbar ---- */ /* ---- Scrollbar ---- */
::-webkit-scrollbar { ::-webkit-scrollbar {
@@ -2206,7 +2211,7 @@ body {
} }
/* ============================================================ /* ============================================================
Custom Scenarios Styles Custom Scenarios Styles — 白色商务风格（使用 CSS 变量）
============================================================ */ ============================================================ */
/* Scenario list */ /* Scenario list */
@@ -2222,16 +2227,16 @@ body {
align-items: center; align-items: center;
gap: 10px; gap: 10px;
padding: 10px 12px; padding: 10px 12px;
background: rgba(255, 255, 255, 0.03); background: var(--color-surface-2);
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid var(--color-border);
border-radius: 8px; border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all var(--transition-fast);
} }
.scenario-item:hover { .scenario-item:hover {
background: rgba(255, 255, 255, 0.06); background: var(--color-surface-3);
border-color: rgba(255, 255, 255, 0.15); border-color: var(--color-surface-3);
} }
.scenario-item input[type="radio"] { .scenario-item input[type="radio"] {
@@ -2246,12 +2251,12 @@ body {
.scenario-item__name { .scenario-item__name {
flex: 1; flex: 1;
font-size: 14px; font-size: 14px;
color: rgba(255, 255, 255, 0.9); color: var(--color-text);
} }
.scenario-item__desc { .scenario-item__desc {
font-size: 12px; font-size: 12px;
color: rgba(255, 255, 255, 0.5); color: var(--color-text-muted);
margin-top: 2px; margin-top: 2px;
} }
@@ -2284,28 +2289,31 @@ body {
.scenario-action-btn { .scenario-action-btn {
padding: 4px 8px; padding: 4px 8px;
background: transparent; background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid var(--color-border);
border-radius: 4px; border-radius: var(--radius-sm);
font-size: 14px; font-size: 14px;
color: var(--color-text-muted);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all var(--transition-fast);
} }
.scenario-action-btn:hover { .scenario-action-btn:hover {
background: rgba(255, 255, 255, 0.08); background: var(--color-surface-2);
border-color: rgba(255, 255, 255, 0.2); border-color: var(--color-surface-3);
color: var(--color-text);
} }
.scenario-action-btn--confirm { .scenario-action-btn--confirm {
background: rgba(248, 113, 113, 0.15); background: rgba(248, 113, 113, 0.1);
border-color: rgba(248, 113, 113, 0.3); border-color: rgba(248, 113, 113, 0.2);
color: var(--color-error);
} }
.scenario-empty { .scenario-empty {
padding: 16px; padding: 16px;
text-align: center; text-align: center;
font-size: 13px; font-size: 13px;
color: rgba(255, 255, 255, 0.4); color: var(--color-text-muted);
font-style: italic; font-style: italic;
} }
@@ -2314,17 +2322,17 @@ body {
margin-left: auto; margin-left: auto;
padding: 4px 12px; padding: 4px 12px;
font-size: 12px; font-size: 12px;
background: rgba(196, 97, 47, 0.15); background: rgba(59, 130, 246, 0.08);
border: 1px solid rgba(196, 97, 47, 0.3); border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 999px; border-radius: 999px;
color: #C4612F; color: var(--color-primary);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all var(--transition-fast);
} }
.config-create-btn:hover { .config-create-btn:hover {
background: rgba(196, 97, 47, 0.25); background: rgba(59, 130, 246, 0.16);
border-color: rgba(196, 97, 47, 0.5); border-color: rgba(59, 130, 246, 0.4);
} }
.config-group__title { .config-group__title {
@@ -2340,25 +2348,30 @@ body {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.7); background: rgba(10, 10, 15, 0.45);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 10000; z-index: 10000;
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
animation: fadeIn 0.2s; animation: fadeIn 0.2s;
} }
[data-theme="light"] .modal-overlay {
background: rgba(0, 0, 0, 0.3);
}
.modal { .modal {
background: #1F2421; background: var(--color-surface);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius);
width: 90%; width: 90%;
max-width: 600px; max-width: 600px;
max-height: 85vh; max-height: 85vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); box-shadow: 0 16px 48px rgba(10, 10, 15, 0.25);
animation: slideUp 0.3s; animation: slideUp 0.3s;
} }
@@ -2371,20 +2384,21 @@ body {
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.08); border-bottom: 1px solid var(--color-border);
} }
.modal__title { .modal__title {
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 600;
color: rgba(255, 255, 255, 0.95); color: var(--color-text);
letter-spacing: -0.01em;
} }
.modal__close { .modal__close {
background: transparent; background: transparent;
border: none; border: none;
font-size: 24px; font-size: 20px;
color: rgba(255, 255, 255, 0.6); color: var(--color-text-muted);
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
width: 32px; width: 32px;
@@ -2392,13 +2406,13 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 6px; border-radius: var(--radius-sm);
transition: all 0.2s; transition: all var(--transition-fast);
} }
.modal__close:hover { .modal__close:hover {
background: rgba(255, 255, 255, 0.08); background: var(--color-surface-2);
color: rgba(255, 255, 255, 0.9); color: var(--color-text);
} }
.modal__body { .modal__body {
@@ -2412,7 +2426,7 @@ body {
gap: 12px; gap: 12px;
justify-content: flex-end; justify-content: flex-end;
padding-top: 16px; padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.08); border-top: 1px solid var(--color-border);
margin-top: 8px; margin-top: 8px;
} }
@@ -2427,12 +2441,12 @@ body {
gap: 8px; gap: 8px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: rgba(255, 255, 255, 0.85); color: var(--color-text);
margin-bottom: 8px; margin-bottom: 8px;
} }
.form-required { .form-required {
color: #C4612F; color: var(--color-primary);
} }
.form-input, .form-input,
@@ -2440,21 +2454,28 @@ body {
.form-select { .form-select {
width: 100%; width: 100%;
padding: 10px 12px; padding: 10px 12px;
background: rgba(255, 255, 255, 0.05); background: var(--color-surface-2);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid var(--color-border);
border-radius: 6px; border-radius: var(--radius-sm);
color: rgba(255, 255, 255, 0.9); color: var(--color-text);
font-size: 14px; font-size: 14px;
font-family: inherit; font-family: inherit;
transition: all 0.2s; transition: all var(--transition-fast);
}
.form-input::placeholder,
.form-textarea::placeholder {
color: var(--color-text-muted);
opacity: 0.7;
} }
.form-input:focus, .form-input:focus,
.form-textarea:focus, .form-textarea:focus,
.form-select:focus { .form-select:focus {
outline: none; outline: none;
border-color: rgba(196, 97, 47, 0.5); border-color: var(--color-primary);
background: rgba(255, 255, 255, 0.08); background: var(--color-surface);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
} }
.form-textarea { .form-textarea {
@@ -2468,15 +2489,15 @@ body {
display: block; display: block;
margin-top: 4px; margin-top: 4px;
font-size: 12px; font-size: 12px;
color: rgba(255, 255, 255, 0.4); color: var(--color-text-muted);
} }
.form-error { .form-error {
padding: 12px; padding: 12px;
background: rgba(248, 113, 113, 0.15); background: rgba(248, 113, 113, 0.08);
border: 1px solid rgba(248, 113, 113, 0.3); border: 1px solid rgba(248, 113, 113, 0.2);
border-radius: 6px; border-radius: var(--radius-sm);
color: #f87171; color: var(--color-error);
font-size: 13px; font-size: 13px;
margin-top: 12px; margin-top: 12px;
} }
@@ -2496,129 +2517,112 @@ body {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 22px; font-size: 22px;
background: rgba(255, 255, 255, 0.03); background: var(--color-surface-2);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid var(--color-border);
border-radius: 8px; border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all var(--transition-fast);
} }
.icon-picker__item:hover { .icon-picker__item:hover {
background: rgba(255, 255, 255, 0.08); background: var(--color-surface-3);
border-color: rgba(255, 255, 255, 0.2); border-color: var(--color-surface-3);
transform: scale(1.05); transform: scale(1.05);
} }
.icon-picker__item--active { .icon-picker__item--active {
background: rgba(196, 97, 47, 0.2); background: rgba(59, 130, 246, 0.1);
border-color: rgba(196, 97, 47, 0.5); border-color: rgba(59, 130, 246, 0.4);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
} }
/* Prompt guide */ /* Prompt guide */
.form-guide-btn { .form-guide-btn {
background: transparent; background: transparent;
border: none; border: none;
color: #C4612F; color: var(--color-primary);
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
padding: 4px 8px; padding: 4px 8px;
border-radius: 4px; border-radius: var(--radius-sm);
margin-left: auto; margin-left: auto;
transition: all 0.2s; transition: all var(--transition-fast);
} }
.form-guide-btn:hover { .form-guide-btn:hover {
background: rgba(196, 97, 47, 0.1); background: rgba(59, 130, 246, 0.06);
} }
.form-guide { .form-guide {
background: rgba(255, 255, 255, 0.03); background: var(--color-surface-2);
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid var(--color-border);
border-radius: 8px; border-radius: var(--radius-sm);
padding: 16px; padding: 16px;
margin-bottom: 12px; margin-bottom: 12px;
font-size: 13px; font-size: 13px;
line-height: 1.6; line-height: 1.6;
color: var(--color-text);
} }
.form-guide strong { .form-guide strong {
color: rgba(255, 255, 255, 0.9); color: var(--color-text);
} }
.form-guide ul { .form-guide ul {
margin: 8px 0; margin: 8px 0;
padding-left: 20px; padding-left: 20px;
color: rgba(255, 255, 255, 0.7); color: var(--color-text-muted);
} }
.form-guide__code { .form-guide__code {
background: rgba(0, 0, 0, 0.3); background: var(--color-surface-3);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid var(--color-border);
border-radius: 6px; border-radius: var(--radius-sm);
padding: 12px; padding: 12px;
margin-top: 8px; margin-top: 8px;
overflow-x: auto; overflow-x: auto;
font-size: 12px; font-size: 12px;
line-height: 1.5; line-height: 1.5;
color: rgba(255, 255, 255, 0.8); color: var(--color-text);
} }
/* Buttons */ /* Buttons (modal-scoped overrides — only affect modal context) */
.btn { .modal .btn {
padding: 10px 20px; padding: 10px 20px;
border-radius: 6px; border-radius: var(--radius-sm);
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all var(--transition-fast);
border: 1px solid transparent; border: 1px solid transparent;
} }
.btn:disabled { .modal .btn:disabled {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
.btn--primary { .modal .btn--primary {
background: #C4612F; background: var(--color-primary);
color: white; color: white;
border-color: #C4612F; border-color: var(--color-primary);
} }
.btn--primary:hover:not(:disabled) { .modal .btn--primary:hover:not(:disabled) {
background: #A94E22; background: var(--color-primary-hover);
border-color: #A94E22; border-color: var(--color-primary-hover);
} }
.btn--secondary { .modal .btn--secondary {
background: transparent; background: var(--color-surface-2);
color: rgba(255, 255, 255, 0.7); color: var(--color-text-muted);
border-color: rgba(255, 255, 255, 0.2); border-color: var(--color-border);
} }
.btn--secondary:hover:not(:disabled) { .modal .btn--secondary:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.08); background: var(--color-surface-3);
border-color: rgba(255, 255, 255, 0.3); border-color: var(--color-surface-3);
color: rgba(255, 255, 255, 0.9); color: var(--color-text);
} }
/* Animations */ /* Animations — fadeIn & slideUp defined in main animation section above */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}