fix(ui): 优化投票/评论按钮样式、评论弹窗浅色化、投稿表单残留黑框修复
- SongList 点赞按钮改用 indigo 渐变硬边圆角 12px，新增阴影；评论按钮从胶囊 blue 改为浅灰底 indigo 图标几何风格 - SongCommentsDialog 弹窗整体浅色化：bg-white 主底、评论卡片 zinc-50、输入框 focus indigo 环、发送按钮 indigo 主色系 - RequestForm 投稿表单：搜索结果容器从 rgba(0,0,0,0.4) 改为 bg-secondary 浅灰；备注输入框 bg-white；复选框/横条状态/手动输入按钮/提交按钮全套浅色 + indigo 主题
This commit is contained in:
@@ -486,7 +486,7 @@
|
||||
<div v-if="enableSubmissionRemarks" class="form-group">
|
||||
<div class="input-wrapper">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<label for="submission-note" class="text-[12px] font-bold text-zinc-300">投稿备注留言</label>
|
||||
<label for="submission-note" class="text-[12px] font-bold text-zinc-700">投稿备注留言</label>
|
||||
<label class="custom-checkbox-wrapper">
|
||||
<input
|
||||
v-model="submissionNotePublic"
|
||||
@@ -505,9 +505,9 @@
|
||||
id="submission-note"
|
||||
v-model="submissionNote"
|
||||
maxlength="300"
|
||||
class="w-full min-h-[60px] rounded-xl border border-zinc-800 bg-zinc-900/60 px-4 py-2 text-sm text-zinc-100 focus:outline-none focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/50 resize-y transition-all"
|
||||
class="w-full min-h-[60px] rounded-xl border border-zinc-200 bg-white px-4 py-3 text-sm text-zinc-900 placeholder-zinc-400 focus:outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 resize-y transition-all"
|
||||
/>
|
||||
<div class="mt-1 flex justify-end text-[11px] text-zinc-500">
|
||||
<div class="mt-1 flex justify-end text-[11px] text-zinc-400">
|
||||
<span>{{ submissionNote.length }}/300</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -3349,8 +3349,8 @@ defineExpose({
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-secondary, #3f3f46);
|
||||
background: rgba(24, 24, 27, 0.5);
|
||||
border: 1px solid var(--border-secondary, #d4d4d8);
|
||||
background: var(--bg-primary, #ffffff);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
@@ -3364,8 +3364,8 @@ defineExpose({
|
||||
}
|
||||
|
||||
.custom-checkbox-input:checked + .custom-checkbox-box {
|
||||
background: #3b82f6;
|
||||
border-color: var(--border-secondary, #3b82f6);
|
||||
background: var(--primary, #4f46e5);
|
||||
border-color: var(--primary, #4f46e5);
|
||||
}
|
||||
|
||||
.custom-checkbox-input:checked + .custom-checkbox-box .custom-checkbox-icon {
|
||||
@@ -3375,25 +3375,25 @@ defineExpose({
|
||||
|
||||
.custom-checkbox-text {
|
||||
font-size: 11px;
|
||||
color: #9ca3af;
|
||||
color: var(--text-secondary, #71717a);
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.custom-checkbox-input:checked ~ .custom-checkbox-text {
|
||||
color: #d1d5db;
|
||||
color: var(--primary, #4f46e5);
|
||||
}
|
||||
|
||||
.custom-checkbox-wrapper:hover .custom-checkbox-box {
|
||||
border-color: #60a5fa;
|
||||
border-color: var(--primary, #4f46e5);
|
||||
}
|
||||
|
||||
/* 横向投稿状态样式 */
|
||||
.submission-status-horizontal {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 8px;
|
||||
padding: 0.4rem 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: var(--bg-primary, #ffffff);
|
||||
border-radius: 10px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
border: 1px solid var(--border-secondary, #e4e4e7);
|
||||
}
|
||||
|
||||
.admin-notice-horizontal {
|
||||
@@ -3409,9 +3409,9 @@ defineExpose({
|
||||
|
||||
.admin-notice-horizontal .admin-text {
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
color: #ffd700;
|
||||
color: #ca8a04;
|
||||
}
|
||||
|
||||
.submission-closed-notice {
|
||||
@@ -3427,9 +3427,9 @@ defineExpose({
|
||||
|
||||
.submission-closed-notice .closed-text {
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
color: #ff6b6b;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.status-content-horizontal {
|
||||
@@ -3450,25 +3450,25 @@ defineExpose({
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
color: var(--text-primary, #ffffff);
|
||||
color: var(--text-secondary, #52525b);
|
||||
}
|
||||
|
||||
.status-item-horizontal .status-value {
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
color: #0b5afe;
|
||||
color: var(--primary, #4f46e5);
|
||||
}
|
||||
|
||||
.status-item-horizontal .status-remaining {
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
background: rgba(11, 90, 254, 0.1);
|
||||
border: 1px solid rgba(11, 90, 254, 0.3);
|
||||
border-radius: 4px;
|
||||
padding: 0.15rem 0.4rem;
|
||||
color: var(--primary, #4f46e5);
|
||||
background: rgba(79, 70, 229, 0.08);
|
||||
border: 1px solid rgba(79, 70, 229, 0.2);
|
||||
border-radius: 6px;
|
||||
padding: 0.15rem 0.5rem;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
@@ -3940,8 +3940,9 @@ defineExpose({
|
||||
/* 搜索结果容器样式 */
|
||||
.search-results-container {
|
||||
flex: 1;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 13px;
|
||||
background: var(--bg-secondary, #f4f4f5);
|
||||
border: 1px solid var(--border-secondary, #e4e4e7);
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 400px;
|
||||
@@ -4017,17 +4018,17 @@ defineExpose({
|
||||
}
|
||||
|
||||
.results-grid::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--bg-tertiary, #e4e4e7);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.results-grid::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
background: #a1a1aa;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.results-grid::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
background: #71717a;
|
||||
}
|
||||
|
||||
/* 空状态和初始状态 */
|
||||
@@ -4055,7 +4056,7 @@ defineExpose({
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: var(--text-primary, #ffffff);
|
||||
color: var(--text-primary, #09090b);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -4089,25 +4090,27 @@ defineExpose({
|
||||
.manual-input-trigger {
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-top: 1px solid var(--border-secondary, #e4e4e7);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.manual-submit-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
border-radius: 8px;
|
||||
padding: 0.5rem 1.5rem;
|
||||
background: var(--bg-secondary, #f4f4f5);
|
||||
border: 1px solid var(--border-secondary, #e4e4e7);
|
||||
border-radius: 12px;
|
||||
padding: 0.6rem 1.5rem;
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: var(--text-primary, #ffffff);
|
||||
color: var(--text-primary, #09090b);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.manual-submit-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--primary, #4f46e5);
|
||||
color: white;
|
||||
border-color: var(--primary, #4f46e5);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
@@ -4116,7 +4119,7 @@ defineExpose({
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.04em;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
color: var(--text-secondary, #71717a);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
@@ -4127,20 +4130,22 @@ defineExpose({
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
background: linear-gradient(180deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
border-radius: 8px;
|
||||
padding: 0.5rem 1.5rem;
|
||||
background: linear-gradient(180deg, #4f46e5 0%, #6366f1 100%);
|
||||
border: 1px solid rgba(79, 70, 229, 0.25);
|
||||
border-radius: 12px;
|
||||
padding: 0.65rem 1.75rem;
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
color: var(--text-primary, #ffffff);
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.18);
|
||||
}
|
||||
|
||||
.submit-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(79, 70, 229, 0.28);
|
||||
}
|
||||
|
||||
.submit-button:disabled {
|
||||
|
||||
Reference in New Issue
Block a user