chiyi/image2api
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(ui): 操作按钮白底灰边，危险按钮悬停淡红

Browse Source 
Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
chiyi
2026-10-27 18:12:31 +08:00
co-authored by Devin
parent 58ee41a4f8
commit e8e5527e63
6 changed files with 28 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/BannedWordsView.vue
+5 -4
View File
@@ -203,11 +203,12 @@ onMounted(load)
.act {
display: inline-flex; align-items: center; justify-content: center;
width: 1.9rem; height: 1.9rem; border-radius: 0.6rem;
color: var(--fg-3); background: transparent;
transition: background 0.15s, color 0.15s;
color: var(--fg-3); background: var(--surface-solid);
box-shadow: inset 0 0 0 1px var(--hairline);
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.act:hover { background: var(--hover); color: var(--fg); }
.act.danger:hover { background: rgb(244 63 94 / 0.1); color: #dc2626; }
.act:hover { background: var(--surface-2); color: var(--fg); box-shadow: inset 0 0 0 1px rgb(24 24 27 / 0.14); }
.act.danger:hover { background: rgb(244 63 94 / 0.08); color: #dc2626; box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.28); }
.btn-soft.danger {
color: rgb(253 164 175);
frontend/src/views/CdksView.vue
+5 -4
View File
@@ -333,11 +333,12 @@ const pageNumbers = computed(() => {
.act {
display: inline-flex; align-items: center; justify-content: center;
width: 1.9rem; height: 1.9rem; border-radius: 0.6rem;
color: var(--fg-3); background: transparent;
transition: background 0.15s, color 0.15s;
color: var(--fg-3); background: var(--surface-solid);
box-shadow: inset 0 0 0 1px var(--hairline);
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.act:hover { background: var(--hover); color: var(--fg); }
.act.danger:hover { background: rgb(244 63 94 / 0.1); color: #dc2626; }
.act:hover { background: var(--surface-2); color: var(--fg); box-shadow: inset 0 0 0 1px rgb(24 24 27 / 0.14); }
.act.danger:hover { background: rgb(244 63 94 / 0.08); color: #dc2626; box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.28); }
.fp {
display: inline-flex; align-items: center; gap: 0.35rem;
frontend/src/views/ChannelsView.vue
+3 -3
View File
@@ -324,9 +324,9 @@ onMounted(load)
.lbl { display: block; font-size: 0.72rem; font-weight: 500; color: var(--fg-3); margin-bottom: 0.4rem; }
.op { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; margin-left: 4px; border-radius: 8px; background: transparent; color: var(--fg-3); transition: background 0.15s, color 0.15s; }
.op:hover { background: var(--hover); color: var(--fg); }
.op.danger:hover { background: rgb(244 63 94 / 0.1); color: #dc2626; }
.op { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; margin-left: 4px; border-radius: 8px; background: var(--surface-solid); color: var(--fg-3); box-shadow: inset 0 0 0 1px var(--hairline); transition: background 0.15s, color 0.15s, box-shadow 0.15s; }
.op:hover { background: var(--surface-2); color: var(--fg); box-shadow: inset 0 0 0 1px rgb(24 24 27 / 0.14); }
.op.danger:hover { background: rgb(244 63 94 / 0.08); color: #dc2626; box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.28); }
/* iOS-style switch for 模型开关 in the sync modal */
.sw { position: relative; width: 2rem; height: 1.15rem; border-radius: 9999px; background: var(--hover); box-shadow: inset 0 0 0 1px var(--hairline); transition: background 0.18s ease; flex-shrink: 0; }
frontend/src/views/ConcurrencyView.vue
+5 -4
View File
@@ -138,11 +138,12 @@ onMounted(load)
.act {
display: inline-flex; align-items: center; justify-content: center;
width: 1.9rem; height: 1.9rem; border-radius: 0.6rem;
color: var(--fg-3); background: transparent;
transition: background 0.15s, color 0.15s;
color: var(--fg-3); background: var(--surface-solid);
box-shadow: inset 0 0 0 1px var(--hairline);
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.act:hover { background: var(--hover); color: var(--fg); }
.act.danger:hover { background: rgb(244 63 94 / 0.1); color: #dc2626; }
.act:hover { background: var(--surface-2); color: var(--fg); box-shadow: inset 0 0 0 1px rgb(24 24 27 / 0.14); }
.act.danger:hover { background: rgb(244 63 94 / 0.08); color: #dc2626; box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.28); }
.fade-enter-active, .fade-leave-active { transition: opacity 0.15s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
frontend/src/views/ModelsView.vue
+5 -4
View File
@@ -275,10 +275,11 @@ onMounted(loadModels)
.act {
display: inline-flex; align-items: center; justify-content: center;
width: 1.9rem; height: 1.9rem; border-radius: 0.6rem;
color: var(--fg-3); background: transparent;
transition: background 0.15s, color 0.15s;
color: var(--fg-3); background: var(--surface-solid);
box-shadow: inset 0 0 0 1px var(--hairline);
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.act:hover { background: var(--hover); color: var(--fg); }
.act.danger:hover { background: rgb(244 63 94 / 0.1); color: #dc2626; }
.act:hover { background: var(--surface-2); color: var(--fg); box-shadow: inset 0 0 0 1px rgb(24 24 27 / 0.14); }
.act.danger:hover { background: rgb(244 63 94 / 0.08); color: #dc2626; box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.28); }
</style>
frontend/src/views/UsersView.vue
+5 -4
View File
@@ -628,11 +628,12 @@ async function doRecharge() {
.act {
display: inline-flex; align-items: center; justify-content: center;
width: 1.9rem; height: 1.9rem; border-radius: 0.6rem;
color: var(--fg-3); background: transparent;
transition: background 0.15s, color 0.15s;
color: var(--fg-3); background: var(--surface-solid);
box-shadow: inset 0 0 0 1px var(--hairline);
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.act:hover { background: var(--hover); color: var(--fg); }
.act.danger:hover { background: rgb(244 63 94 / 0.1); color: #dc2626; }
.act:hover { background: var(--surface-2); color: var(--fg); box-shadow: inset 0 0 0 1px rgb(24 24 27 / 0.14); }
.act.danger:hover { background: rgb(244 63 94 / 0.08); color: #dc2626; box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.28); }
/* disabled inputs in the edit modal — readable, but visually 'cool' so the
admin knows they can't change them. */