SparksFly
/
YwYMusic
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: 重构全站主题配色，调整为暖棕浅色调风格 

重构全局CSS变量与组件样式，将深色主题替换为暖棕浅色系主题：
1. 更新全局CSS变量，替换背景、文字、边框、主题色等基础配色
2. 调整所有页面和组件的hover、选中、背景色样式，适配新主题色
3. 移除naive-ui的darkTheme引入，修改主题覆盖配置为新的暖棕配色方案
4. 统一替换原紫色主题为#b4532a暖棕主题色
This commit is contained in:
sparksfly 2026-08-14 00:07:31 +08:00
parent 381b29309a
commit e8caaee04f
14 changed files with 125 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
.trae/rules/git-commit-message.md Normal file
View File

@ -0,0 +1,20 @@
---
alwaysApply: true
scene: git_message
language: zh-CN
---
## Git Commit Message Rules
### Language Requirement
- All generated commit messages **MUST BE in Chinese (中文)**.
- Do NOT use English for commit messages.
### Format Requirement
- First line: Short description (under 50 characters)
- Empty line
- Body (optional): Detailed description of changes and reasons
### Content Requirement
- Clearly describe "What was changed" and "Why it was changed"
- Keep it concise and accurate

47
src/App.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="app-root"> <div class="app-root">
<n-config-provider :theme="darkTheme" :theme-overrides="themeOverrides"> <n-config-provider :theme-overrides="themeOverrides">
<n-message-provider> <n-message-provider>
<n-notification-provider> <n-notification-provider>
<n-dialog-provider> <n-dialog-provider>
@ -14,7 +14,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { import {
darkTheme,
NConfigProvider, NConfigProvider,
NDialogProvider, NDialogProvider,
NMessageProvider, NMessageProvider,
@ -25,28 +24,28 @@ import { RouterView } from "vue-router";
const themeOverrides: GlobalThemeOverrides = { const themeOverrides: GlobalThemeOverrides = {
common: { common: {
primaryColor: "#6d5df6", primaryColor: "#b4532a",
primaryColorHover: "#7e6fff", primaryColorHover: "#c66a3d",
primaryColorPressed: "#5c4de8", primaryColorPressed: "#98431f",
primaryColorSuppl: "#6d5df6", primaryColorSuppl: "#b4532a",
successColor: "#22c55e", successColor: "#70845b",
successColorHover: "#3edb7a", successColorHover: "#839d6c",
successColorPressed: "#17a84c", successColorPressed: "#5b7048",
infoColor: "#60a5fa", infoColor: "#527b86",
bodyColor: "#0f0f23", bodyColor: "#f4eddf",
cardColor: "#171735", cardColor: "#fffaf0",
modalColor: "#1c1c3e", modalColor: "#fffaf0",
popoverColor: "#1c1c3e", popoverColor: "#fffaf0",
tableColor: "#171735", tableColor: "#fffaf0",
inputColor: "rgba(255, 255, 255, 0.06)", inputColor: "#fffdf8",
borderColor: "rgba(255, 255, 255, 0.09)", borderColor: "#d8c8b3",
dividerColor: "rgba(255, 255, 255, 0.08)", dividerColor: "#e4d8c7",
textColorBase: "#f8fafc", textColorBase: "#3f3028",
textColor1: "#f8fafc", textColor1: "#3f3028",
textColor2: "#d9d9ee", textColor2: "#6e584a",
textColor3: "#a5a5c4", textColor3: "#927b6c",
hoverColor: "rgba(255, 255, 255, 0.06)", hoverColor: "#f2e8d9",
borderRadius: "8px", borderRadius: "10px",
fontFamily: fontFamily:
"'Inter','HarmonyOS Sans SC','PingFang SC','Microsoft YaHei',system-ui,-apple-system,sans-serif", "'Inter','HarmonyOS Sans SC','PingFang SC','Microsoft YaHei',system-ui,-apple-system,sans-serif",
}, },

22
src/components/FullscreenPlayer.vue
View File

@ -200,7 +200,7 @@ watch(currentLyricIndex, (newIndex) => {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(15, 15, 35, 0.75); background: rgba(63, 48, 40, 0.68);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
} }
@ -215,14 +215,14 @@ watch(currentLyricIndex, (newIndex) => {
height: 48px; height: 48px;
border: none; border: none;
border-radius: 50%; border-radius: 50%;
background: rgba(0, 0, 0, 0.4); background: rgba(63, 48, 40, 0.54);
color: var(--app-text); color: var(--app-text);
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.close-btn:hover { .close-btn:hover {
background: rgba(0, 0, 0, 0.6); background: rgba(63, 48, 40, 0.72);
transform: scale(1.08); transform: scale(1.08);
} }
@ -339,7 +339,7 @@ watch(currentLyricIndex, (newIndex) => {
padding: 12px 0; padding: 12px 0;
font-size: 16px; font-size: 16px;
line-height: 1.6; line-height: 1.6;
color: rgba(255, 255, 255, 0.4); color: rgba(255, 250, 240, 0.56);
text-align: center; text-align: center;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
@ -348,7 +348,7 @@ watch(currentLyricIndex, (newIndex) => {
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
color: var(--app-text); color: var(--app-text);
text-shadow: 0 2px 8px rgba(109, 93, 246, 0.4); text-shadow: 0 2px 8px rgba(180, 83, 42, 0.34);
} }
.lower-section { .lower-section {
@ -382,7 +382,7 @@ watch(currentLyricIndex, (newIndex) => {
.progress-slider-large :deep(.n-slider-rail) { .progress-slider-large :deep(.n-slider-rail) {
height: 6px; height: 6px;
background: rgba(255, 255, 255, 0.15); background: rgba(255, 250, 240, 0.28);
} }
.progress-slider-large :deep(.n-slider-fill) { .progress-slider-large :deep(.n-slider-fill) {
@ -409,14 +409,14 @@ watch(currentLyricIndex, (newIndex) => {
height: 56px; height: 56px;
border: none; border: none;
border-radius: 50%; border-radius: 50%;
background: rgba(255, 255, 255, 0.08); background: rgba(255, 250, 240, 0.18);
color: var(--app-text-secondary); color: var(--app-text-secondary);
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.control-icon-btn:hover { .control-icon-btn:hover {
background: rgba(255, 255, 255, 0.15); background: rgba(255, 250, 240, 0.3);
color: var(--app-text); color: var(--app-text);
transform: scale(1.08); transform: scale(1.08);
} }
@ -433,15 +433,15 @@ watch(currentLyricIndex, (newIndex) => {
border: none; border: none;
border-radius: 50%; border-radius: 50%;
background: var(--app-green); background: var(--app-green);
color: #052e16; color: #fffaf0;
cursor: pointer; cursor: pointer;
box-shadow: 0 8px 24px rgba(34, 197, 94, 0.4); box-shadow: 0 8px 24px rgba(180, 83, 42, 0.26);
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.play-toggle-large:hover { .play-toggle-large:hover {
transform: scale(1.1); transform: scale(1.1);
box-shadow: 0 12px 32px rgba(34, 197, 94, 0.5); box-shadow: 0 12px 32px rgba(180, 83, 42, 0.36);
} }
.fullscreen-enter-active, .fullscreen-enter-active,

12
src/components/MusicCard.vue
View File

@ -37,7 +37,7 @@ const router = useRouter();
const coverStyle = computed(() => ({ const coverStyle = computed(() => ({
background: background:
displayCover(props.playlist.cover) || displayCover(props.playlist.cover) ||
"linear-gradient(135deg, #4338ca 0%, #7c3aed 100%)", "linear-gradient(135deg, #4b9fb0 0%, #6f9ed8 100%)",
})); }));
function openDetail() { function openDetail() {
@ -94,7 +94,7 @@ function play() {
border: none; border: none;
border-radius: 50%; border-radius: 50%;
background: var(--app-green); background: var(--app-green);
color: #052e16; color: #fffaf0;
cursor: pointer; cursor: pointer;
opacity: 0; opacity: 0;
transform: translateY(6px); transform: translateY(6px);
@ -102,11 +102,11 @@ function play() {
opacity 0.2s ease, opacity 0.2s ease,
transform 0.2s ease, transform 0.2s ease,
box-shadow 0.2s ease; box-shadow 0.2s ease;
box-shadow: 0 8px 18px rgba(34, 197, 94, 0.4); box-shadow: 0 8px 18px rgba(180, 83, 42, 0.24);
} }
.play-btn:hover { .play-btn:hover {
box-shadow: 0 10px 22px rgba(34, 197, 94, 0.55); box-shadow: 0 10px 22px rgba(180, 83, 42, 0.34);
transform: translateY(0) scale(1.06); transform: translateY(0) scale(1.06);
} }
@ -126,8 +126,8 @@ function play() {
padding: 2px 8px; padding: 2px 8px;
border-radius: 999px; border-radius: 999px;
font-size: 12px; font-size: 12px;
color: rgba(255, 255, 255, 0.92); color: #fffaf0;
background: rgba(0, 0, 0, 0.35); background: rgba(63, 48, 40, 0.72);
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
} }

18
src/components/PlayerBar.vue
View File

@ -267,7 +267,7 @@ onUnmounted(() => {
height: clamp(72px, 9vh, 88px); height: clamp(72px, 9vh, 88px);
padding: 0 clamp(14px, 2vw, 22px); padding: 0 clamp(14px, 2vw, 22px);
flex-shrink: 0; flex-shrink: 0;
background: rgba(18, 18, 40, 0.92); background: rgba(255, 250, 240, 0.94);
backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border-top: 1px solid var(--app-border); border-top: 1px solid var(--app-border);
} }
@ -304,7 +304,7 @@ onUnmounted(() => {
} }
.cover-mini-mark { .cover-mini-mark {
color: rgba(255, 255, 255, 0.45); color: rgba(63, 48, 40, 0.46);
} }
.meta { .meta {
@ -360,7 +360,7 @@ onUnmounted(() => {
.ctrl-btn:hover { .ctrl-btn:hover {
color: var(--app-text); color: var(--app-text);
background: rgba(255, 255, 255, 0.08); background: rgba(180, 83, 42, 0.08);
} }
.ctrl-btn.active { .ctrl-btn.active {
@ -375,9 +375,9 @@ onUnmounted(() => {
border: none; border: none;
border-radius: 50%; border-radius: 50%;
background: var(--app-green); background: var(--app-green);
color: #052e16; color: #fffaf0;
cursor: pointer; cursor: pointer;
box-shadow: 0 6px 16px rgba(34, 197, 94, 0.35); box-shadow: 0 6px 16px rgba(180, 83, 42, 0.25);
transition: transition:
transform 0.15s ease, transform 0.15s ease,
box-shadow 0.2s ease; box-shadow 0.2s ease;
@ -385,7 +385,7 @@ onUnmounted(() => {
.play-toggle:hover { .play-toggle:hover {
transform: scale(1.06); transform: scale(1.06);
box-shadow: 0 8px 20px rgba(34, 197, 94, 0.5); box-shadow: 0 8px 20px rgba(180, 83, 42, 0.34);
} }
.progress { .progress {
@ -415,7 +415,7 @@ onUnmounted(() => {
} }
.volume-slider :deep(.n-slider-rail) { .volume-slider :deep(.n-slider-rail) {
background: rgba(255, 255, 255, 0.14); background: #d8c8b3;
} }
.player-right { .player-right {
@ -448,7 +448,7 @@ onUnmounted(() => {
.icon-btn:hover { .icon-btn:hover {
color: var(--app-text); color: var(--app-text);
background: rgba(255, 255, 255, 0.08); background: rgba(180, 83, 42, 0.08);
} }
.icon-btn.active { .icon-btn.active {
@ -489,7 +489,7 @@ onUnmounted(() => {
} }
.queue-item:hover { .queue-item:hover {
background: rgba(255, 255, 255, 0.06); background: rgba(180, 83, 42, 0.07);
} }
.queue-item.current .queue-name { .queue-item.current .queue-name {

4
src/components/QrLogin.vue
View File

@ -212,7 +212,7 @@ function stopPolling() {
padding: clamp(16px, 2vw, 22px); padding: clamp(16px, 2vw, 22px);
border: 1px solid var(--app-border); border: 1px solid var(--app-border);
border-radius: 14px; border-radius: 14px;
background: rgba(255, 255, 255, 0.02); background: rgba(255, 250, 240, 0.72);
} }
.setting-head { .setting-head {
@ -280,7 +280,7 @@ function stopPolling() {
} }
.qr-mask.success { .qr-mask.success {
background: rgba(34, 197, 94, 0.72); background: rgba(112, 132, 91, 0.72);
} }
.qr-mask.expired { .qr-mask.expired {

8
src/components/SongTable.vue
View File

@ -79,7 +79,7 @@ function play(song: Song) {
border: 1px solid var(--app-border); border: 1px solid var(--app-border);
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
background: rgba(255, 255, 255, 0.02); background: rgba(255, 250, 240, 0.72);
} }
.table-head, .table-head,
@ -106,11 +106,11 @@ function play(song: Song) {
} }
.table-row:hover { .table-row:hover {
background: rgba(255, 255, 255, 0.05); background: #f2e8d9;
} }
.table-row.active { .table-row.active {
background: rgba(109, 93, 246, 0.12); background: rgba(180, 83, 42, 0.1);
} }
.col-index { .col-index {
@ -198,7 +198,7 @@ function play(song: Song) {
.icon-btn:hover { .icon-btn:hover {
color: var(--app-text); color: var(--app-text);
background: rgba(255, 255, 255, 0.08); background: rgba(180, 83, 42, 0.1);
} }
.icon-btn .liked { .icon-btn .liked {

18
src/layouts/MainLayout.vue
View File

@ -90,7 +90,7 @@ watch(
height: 100vh; height: 100vh;
flex-shrink: 0; flex-shrink: 0;
padding: 20px 14px 14px; padding: 20px 14px 14px;
background: linear-gradient(180deg, #12122b 0%, #0f0f23 100%); background: linear-gradient(180deg, #eadcc8 0%, #f4eddf 100%);
border-right: 1px solid var(--app-border); border-right: 1px solid var(--app-border);
} }
@ -108,9 +108,9 @@ watch(
width: 34px; width: 34px;
height: 34px; height: 34px;
border-radius: 10px; border-radius: 10px;
background: linear-gradient(135deg, #22c55e 0%, #0ea5e9 100%); background: linear-gradient(135deg, #d98b5f 0%, #b4532a 100%);
color: #052e16; color: #fffaf0;
box-shadow: 0 6px 14px rgba(34, 197, 94, 0.35); box-shadow: 0 6px 14px rgba(180, 83, 42, 0.25);
} }
.brand-logo { .brand-logo {
@ -159,13 +159,13 @@ watch(
.nav-item:hover { .nav-item:hover {
color: var(--app-text); color: var(--app-text);
background: rgba(255, 255, 255, 0.05); background: rgba(180, 83, 42, 0.08);
} }
.nav-item.active { .nav-item.active {
color: #fff; color: var(--app-primary);
font-weight: 600; font-weight: 600;
background: linear-gradient(90deg, rgba(109, 93, 246, 0.24), rgba(109, 93, 246, 0.08)); background: linear-gradient(90deg, rgba(180, 83, 42, 0.16), rgba(180, 83, 42, 0.05));
} }
.nav-section { .nav-section {
@ -199,12 +199,12 @@ watch(
.nav-sub:hover { .nav-sub:hover {
color: var(--app-text); color: var(--app-text);
background: rgba(255, 255, 255, 0.05); background: rgba(180, 83, 42, 0.08);
} }
.nav-sub.active { .nav-sub.active {
color: var(--app-green); color: var(--app-green);
background: rgba(34, 197, 94, 0.08); background: rgba(112, 132, 91, 0.12);
} }
.sub-dot { .sub-dot {

26
src/styles/global.css
View File

@ -1,13 +1,13 @@
:root { :root {
--app-bg: #0f0f23; --app-bg: #f4eddf;
--app-bg-elevated: #161632; --app-bg-elevated: #eee2d1;
--app-card: #1a1a3a; --app-card: #fffaf0;
--app-border: rgba(255, 255, 255, 0.08); --app-border: #d8c8b3;
--app-text: #f8fafc; --app-text: #3f3028;
--app-text-secondary: #b9b9d6; --app-text-secondary: #6e584a;
--app-text-muted: #6e6e96; --app-text-muted: #927b6c;
--app-primary: #6d5df6; --app-primary: #b4532a;
--app-green: #22c55e; --app-green: #70845b;
} }
* { * {
@ -38,7 +38,7 @@ body {
} }
::selection { ::selection {
background: rgba(109, 93, 246, 0.45); background: rgba(180, 83, 42, 0.22);
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
@ -47,12 +47,12 @@ body {
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.14); background: #d8c8b3;
border-radius: 999px; border-radius: 999px;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.24); background: #bfa992;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
@ -64,7 +64,7 @@ button {
} }
:focus-visible { :focus-visible {
outline: 2px solid var(--app-green); outline: 2px solid var(--app-primary);
outline-offset: 2px; outline-offset: 2px;
} }

12
src/views/DiscoverView.vue
View File

@ -161,7 +161,7 @@ onMounted(() => {
.banner-text p { .banner-text p {
margin: 0; margin: 0;
font-size: 15px; font-size: 15px;
color: rgba(255, 255, 255, 0.85); color: rgba(255, 250, 240, 0.88);
} }
.banner-mark { .banner-mark {
@ -239,7 +239,7 @@ onMounted(() => {
} }
.mini-mark { .mini-mark {
color: rgba(255, 255, 255, 0.4); color: rgba(255, 250, 240, 0.62);
} }
.mini-play { .mini-play {
@ -252,7 +252,7 @@ onMounted(() => {
height: 30px; height: 30px;
border-radius: 50%; border-radius: 50%;
background: var(--app-green); background: var(--app-green);
color: #052e16; color: #fffaf0;
opacity: 0; opacity: 0;
transform: translateY(5px); transform: translateY(5px);
transition: transition:
@ -304,8 +304,8 @@ onMounted(() => {
.rank-preview:hover, .rank-preview:hover,
.rank-preview:focus-visible { .rank-preview:focus-visible {
transform: translateY(-2px); transform: translateY(-2px);
border-color: rgba(109, 93, 246, 0.45); border-color: rgba(180, 83, 42, 0.5);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3); box-shadow: 0 12px 28px rgba(96, 66, 45, 0.14);
} }
.rank-head { .rank-head {
@ -314,7 +314,7 @@ onMounted(() => {
justify-content: space-between; justify-content: space-between;
height: 52px; height: 52px;
padding: 0 16px; padding: 0 16px;
color: rgba(255, 255, 255, 0.9); color: rgba(255, 250, 240, 0.94);
} }
.rank-name { .rank-name {

10
src/views/PlaylistDetailView.vue
View File

@ -77,7 +77,7 @@ const headerPlayCount = computed(() =>
) )
const headerCover = computed(() => { const headerCover = computed(() => {
const cover = summary.value?.cover ?? mockPlaylist.value?.cover ?? songs.value[0]?.cover ?? "" const cover = summary.value?.cover ?? mockPlaylist.value?.cover ?? songs.value[0]?.cover ?? ""
return cover ? displayCover(cover) : "linear-gradient(135deg, #4338ca 0%, #7c3aed 100%)" return cover ? displayCover(cover) : "linear-gradient(135deg, #4b9fb0 0%, #6f9ed8 100%)"
}) })
const playlistSource = computed<Source>( const playlistSource = computed<Source>(
() => (summary.value?.source as Source) ?? settingsStore.defaultSource, () => (summary.value?.source as Source) ?? settingsStore.defaultSource,
@ -152,7 +152,7 @@ function favorite() {
.back-btn:hover { .back-btn:hover {
color: var(--app-text); color: var(--app-text);
background: rgba(255, 255, 255, 0.06); background: rgba(180, 83, 42, 0.08);
} }
.back-icon { .back-icon {
@ -179,7 +179,7 @@ function favorite() {
} }
.cover-mark { .cover-mark {
color: rgba(255, 255, 255, 0.3); color: rgba(255, 250, 240, 0.58);
} }
.detail-info { .detail-info {
@ -207,8 +207,8 @@ function favorite() {
width: 26px; width: 26px;
height: 26px; height: 26px;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(135deg, #22c55e, #0ea5e9); background: linear-gradient(135deg, #d98b5f, #b4532a);
color: #052e16; color: #fffaf0;
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
} }

18
src/views/RankingView.vue
View File

@ -103,7 +103,7 @@ function playRank(rankIndex: number) {
padding: clamp(12px, 1.8vw, 16px); padding: clamp(12px, 1.8vw, 16px);
border: 1px solid var(--app-border); border: 1px solid var(--app-border);
border-radius: 14px; border-radius: 14px;
background: rgba(255, 255, 255, 0.02); background: rgba(255, 250, 240, 0.72);
cursor: pointer; cursor: pointer;
transition: transition:
transform 0.2s ease, transform 0.2s ease,
@ -114,8 +114,8 @@ function playRank(rankIndex: number) {
.rank-card:hover, .rank-card:hover,
.rank-card:focus-visible { .rank-card:focus-visible {
transform: translateY(-2px); transform: translateY(-2px);
border-color: rgba(109, 93, 246, 0.45); border-color: rgba(180, 83, 42, 0.5);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3); box-shadow: 0 12px 28px rgba(96, 66, 45, 0.14);
} }
.rank-cover { .rank-cover {
@ -130,7 +130,7 @@ function playRank(rankIndex: number) {
} }
.cover-mark { .cover-mark {
color: rgba(255, 255, 255, 0.3); color: rgba(255, 250, 240, 0.62);
} }
.rank-badge { .rank-badge {
@ -140,8 +140,8 @@ function playRank(rankIndex: number) {
padding: 2px 8px; padding: 2px 8px;
border-radius: 999px; border-radius: 999px;
font-size: 11px; font-size: 11px;
color: rgba(255, 255, 255, 0.92); color: #fffaf0;
background: rgba(0, 0, 0, 0.35); background: rgba(63, 48, 40, 0.72);
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
} }
@ -156,7 +156,7 @@ function playRank(rankIndex: number) {
border: none; border: none;
border-radius: 50%; border-radius: 50%;
background: var(--app-green); background: var(--app-green);
color: #052e16; color: #fffaf0;
cursor: pointer; cursor: pointer;
opacity: 0; opacity: 0;
transform: translateY(5px); transform: translateY(5px);
@ -164,7 +164,7 @@ function playRank(rankIndex: number) {
opacity 0.2s ease, opacity 0.2s ease,
transform 0.2s ease, transform 0.2s ease,
box-shadow 0.2s ease; box-shadow 0.2s ease;
box-shadow: 0 8px 18px rgba(34, 197, 94, 0.4); box-shadow: 0 8px 18px rgba(180, 83, 42, 0.24);
} }
.rank-card:hover .play-btn, .rank-card:hover .play-btn,
@ -256,7 +256,7 @@ function playRank(rankIndex: number) {
.more-btn:hover { .more-btn:hover {
color: var(--app-green); color: var(--app-green);
background: rgba(34, 197, 94, 0.08); background: rgba(112, 132, 91, 0.12);
} }
@media (max-width: 900px) { @media (max-width: 900px) {

2
src/views/SearchView.vue
View File

@ -345,7 +345,7 @@ onBeforeUnmount(() => {
.clear-btn:hover { .clear-btn:hover {
color: var(--app-text); color: var(--app-text);
background: rgba(255, 255, 255, 0.06); background: rgba(180, 83, 42, 0.08);
} }
.hot-title { .hot-title {

14
src/views/SettingsView.vue
View File

@ -85,7 +85,7 @@ const settingsStore = useSettingsStore()
padding: clamp(16px, 2vw, 22px); padding: clamp(16px, 2vw, 22px);
border: 1px solid var(--app-border); border: 1px solid var(--app-border);
border-radius: 14px; border-radius: 14px;
background: rgba(255, 255, 255, 0.02); background: rgba(255, 250, 240, 0.72);
} }
.setting-head { .setting-head {
@ -124,13 +124,13 @@ const settingsStore = useSettingsStore()
} }
.source-item:hover { .source-item:hover {
border-color: rgba(109, 93, 246, 0.45); border-color: rgba(180, 83, 42, 0.5);
background: rgba(255, 255, 255, 0.04); background: rgba(180, 83, 42, 0.08);
} }
.source-item.checked { .source-item.checked {
border-color: rgba(34, 197, 94, 0.5); border-color: rgba(112, 132, 91, 0.58);
background: rgba(34, 197, 94, 0.06); background: rgba(112, 132, 91, 0.1);
} }
.source-label { .source-label {
@ -161,7 +161,7 @@ const settingsStore = useSettingsStore()
} }
.default-radio:hover { .default-radio:hover {
border-color: rgba(109, 93, 246, 0.45); border-color: rgba(180, 83, 42, 0.5);
background: rgba(255, 255, 255, 0.04); background: rgba(180, 83, 42, 0.08);
} }
</style> </style>