style: 重构全站主题配色，调整为暖棕浅色调风格
重构全局CSS变量与组件样式，将深色主题替换为暖棕浅色系主题： 1. 更新全局CSS变量，替换背景、文字、边框、主题色等基础配色 2. 调整所有页面和组件的hover、选中、背景色样式，适配新主题色 3. 移除naive-ui的darkTheme引入，修改主题覆盖配置为新的暖棕配色方案 4. 统一替换原紫色主题为#b4532a暖棕主题色
This commit is contained in:
parent
381b29309a
commit
e8caaee04f
|
|
@ -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
47
src/App.vue
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="app-root">
|
||||
<n-config-provider :theme="darkTheme" :theme-overrides="themeOverrides">
|
||||
<n-config-provider :theme-overrides="themeOverrides">
|
||||
<n-message-provider>
|
||||
<n-notification-provider>
|
||||
<n-dialog-provider>
|
||||
|
|
@ -14,7 +14,6 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
darkTheme,
|
||||
NConfigProvider,
|
||||
NDialogProvider,
|
||||
NMessageProvider,
|
||||
|
|
@ -25,28 +24,28 @@ import { RouterView } from "vue-router";
|
|||
|
||||
const themeOverrides: GlobalThemeOverrides = {
|
||||
common: {
|
||||
primaryColor: "#6d5df6",
|
||||
primaryColorHover: "#7e6fff",
|
||||
primaryColorPressed: "#5c4de8",
|
||||
primaryColorSuppl: "#6d5df6",
|
||||
successColor: "#22c55e",
|
||||
successColorHover: "#3edb7a",
|
||||
successColorPressed: "#17a84c",
|
||||
infoColor: "#60a5fa",
|
||||
bodyColor: "#0f0f23",
|
||||
cardColor: "#171735",
|
||||
modalColor: "#1c1c3e",
|
||||
popoverColor: "#1c1c3e",
|
||||
tableColor: "#171735",
|
||||
inputColor: "rgba(255, 255, 255, 0.06)",
|
||||
borderColor: "rgba(255, 255, 255, 0.09)",
|
||||
dividerColor: "rgba(255, 255, 255, 0.08)",
|
||||
textColorBase: "#f8fafc",
|
||||
textColor1: "#f8fafc",
|
||||
textColor2: "#d9d9ee",
|
||||
textColor3: "#a5a5c4",
|
||||
hoverColor: "rgba(255, 255, 255, 0.06)",
|
||||
borderRadius: "8px",
|
||||
primaryColor: "#b4532a",
|
||||
primaryColorHover: "#c66a3d",
|
||||
primaryColorPressed: "#98431f",
|
||||
primaryColorSuppl: "#b4532a",
|
||||
successColor: "#70845b",
|
||||
successColorHover: "#839d6c",
|
||||
successColorPressed: "#5b7048",
|
||||
infoColor: "#527b86",
|
||||
bodyColor: "#f4eddf",
|
||||
cardColor: "#fffaf0",
|
||||
modalColor: "#fffaf0",
|
||||
popoverColor: "#fffaf0",
|
||||
tableColor: "#fffaf0",
|
||||
inputColor: "#fffdf8",
|
||||
borderColor: "#d8c8b3",
|
||||
dividerColor: "#e4d8c7",
|
||||
textColorBase: "#3f3028",
|
||||
textColor1: "#3f3028",
|
||||
textColor2: "#6e584a",
|
||||
textColor3: "#927b6c",
|
||||
hoverColor: "#f2e8d9",
|
||||
borderRadius: "10px",
|
||||
fontFamily:
|
||||
"'Inter','HarmonyOS Sans SC','PingFang SC','Microsoft YaHei',system-ui,-apple-system,sans-serif",
|
||||
},
|
||||
|
|
|
|||
|
|
@ -200,7 +200,7 @@ watch(currentLyricIndex, (newIndex) => {
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(15, 15, 35, 0.75);
|
||||
background: rgba(63, 48, 40, 0.68);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
|
|
@ -215,14 +215,14 @@ watch(currentLyricIndex, (newIndex) => {
|
|||
height: 48px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
background: rgba(63, 48, 40, 0.54);
|
||||
color: var(--app-text);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
background: rgba(63, 48, 40, 0.72);
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
|
|
@ -339,7 +339,7 @@ watch(currentLyricIndex, (newIndex) => {
|
|||
padding: 12px 0;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
color: rgba(255, 250, 240, 0.56);
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
|
@ -348,7 +348,7 @@ watch(currentLyricIndex, (newIndex) => {
|
|||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
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 {
|
||||
|
|
@ -382,7 +382,7 @@ watch(currentLyricIndex, (newIndex) => {
|
|||
|
||||
.progress-slider-large :deep(.n-slider-rail) {
|
||||
height: 6px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: rgba(255, 250, 240, 0.28);
|
||||
}
|
||||
|
||||
.progress-slider-large :deep(.n-slider-fill) {
|
||||
|
|
@ -409,14 +409,14 @@ watch(currentLyricIndex, (newIndex) => {
|
|||
height: 56px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 250, 240, 0.18);
|
||||
color: var(--app-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.control-icon-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: rgba(255, 250, 240, 0.3);
|
||||
color: var(--app-text);
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
|
@ -433,15 +433,15 @@ watch(currentLyricIndex, (newIndex) => {
|
|||
border: none;
|
||||
border-radius: 50%;
|
||||
background: var(--app-green);
|
||||
color: #052e16;
|
||||
color: #fffaf0;
|
||||
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;
|
||||
}
|
||||
|
||||
.play-toggle-large:hover {
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ const router = useRouter();
|
|||
const coverStyle = computed(() => ({
|
||||
background:
|
||||
displayCover(props.playlist.cover) ||
|
||||
"linear-gradient(135deg, #4338ca 0%, #7c3aed 100%)",
|
||||
"linear-gradient(135deg, #4b9fb0 0%, #6f9ed8 100%)",
|
||||
}));
|
||||
|
||||
function openDetail() {
|
||||
|
|
@ -94,7 +94,7 @@ function play() {
|
|||
border: none;
|
||||
border-radius: 50%;
|
||||
background: var(--app-green);
|
||||
color: #052e16;
|
||||
color: #fffaf0;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
|
|
@ -102,11 +102,11 @@ function play() {
|
|||
opacity 0.2s ease,
|
||||
transform 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 {
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
@ -126,8 +126,8 @@ function play() {
|
|||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
color: #fffaf0;
|
||||
background: rgba(63, 48, 40, 0.72);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -267,7 +267,7 @@ onUnmounted(() => {
|
|||
height: clamp(72px, 9vh, 88px);
|
||||
padding: 0 clamp(14px, 2vw, 22px);
|
||||
flex-shrink: 0;
|
||||
background: rgba(18, 18, 40, 0.92);
|
||||
background: rgba(255, 250, 240, 0.94);
|
||||
backdrop-filter: blur(14px);
|
||||
border-top: 1px solid var(--app-border);
|
||||
}
|
||||
|
|
@ -304,7 +304,7 @@ onUnmounted(() => {
|
|||
}
|
||||
|
||||
.cover-mini-mark {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
color: rgba(63, 48, 40, 0.46);
|
||||
}
|
||||
|
||||
.meta {
|
||||
|
|
@ -360,7 +360,7 @@ onUnmounted(() => {
|
|||
|
||||
.ctrl-btn:hover {
|
||||
color: var(--app-text);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: rgba(180, 83, 42, 0.08);
|
||||
}
|
||||
|
||||
.ctrl-btn.active {
|
||||
|
|
@ -375,9 +375,9 @@ onUnmounted(() => {
|
|||
border: none;
|
||||
border-radius: 50%;
|
||||
background: var(--app-green);
|
||||
color: #052e16;
|
||||
color: #fffaf0;
|
||||
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:
|
||||
transform 0.15s ease,
|
||||
box-shadow 0.2s ease;
|
||||
|
|
@ -385,7 +385,7 @@ onUnmounted(() => {
|
|||
|
||||
.play-toggle:hover {
|
||||
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 {
|
||||
|
|
@ -415,7 +415,7 @@ onUnmounted(() => {
|
|||
}
|
||||
|
||||
.volume-slider :deep(.n-slider-rail) {
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
background: #d8c8b3;
|
||||
}
|
||||
|
||||
.player-right {
|
||||
|
|
@ -448,7 +448,7 @@ onUnmounted(() => {
|
|||
|
||||
.icon-btn:hover {
|
||||
color: var(--app-text);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: rgba(180, 83, 42, 0.08);
|
||||
}
|
||||
|
||||
.icon-btn.active {
|
||||
|
|
@ -489,7 +489,7 @@ onUnmounted(() => {
|
|||
}
|
||||
|
||||
.queue-item:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
background: rgba(180, 83, 42, 0.07);
|
||||
}
|
||||
|
||||
.queue-item.current .queue-name {
|
||||
|
|
|
|||
|
|
@ -212,7 +212,7 @@ function stopPolling() {
|
|||
padding: clamp(16px, 2vw, 22px);
|
||||
border: 1px solid var(--app-border);
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
background: rgba(255, 250, 240, 0.72);
|
||||
}
|
||||
|
||||
.setting-head {
|
||||
|
|
@ -280,7 +280,7 @@ function stopPolling() {
|
|||
}
|
||||
|
||||
.qr-mask.success {
|
||||
background: rgba(34, 197, 94, 0.72);
|
||||
background: rgba(112, 132, 91, 0.72);
|
||||
}
|
||||
|
||||
.qr-mask.expired {
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ function play(song: Song) {
|
|||
border: 1px solid var(--app-border);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
background: rgba(255, 250, 240, 0.72);
|
||||
}
|
||||
|
||||
.table-head,
|
||||
|
|
@ -106,11 +106,11 @@ function play(song: Song) {
|
|||
}
|
||||
|
||||
.table-row:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
background: #f2e8d9;
|
||||
}
|
||||
|
||||
.table-row.active {
|
||||
background: rgba(109, 93, 246, 0.12);
|
||||
background: rgba(180, 83, 42, 0.1);
|
||||
}
|
||||
|
||||
.col-index {
|
||||
|
|
@ -198,7 +198,7 @@ function play(song: Song) {
|
|||
|
||||
.icon-btn:hover {
|
||||
color: var(--app-text);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: rgba(180, 83, 42, 0.1);
|
||||
}
|
||||
|
||||
.icon-btn .liked {
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ watch(
|
|||
height: 100vh;
|
||||
flex-shrink: 0;
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
@ -108,9 +108,9 @@ watch(
|
|||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, #22c55e 0%, #0ea5e9 100%);
|
||||
color: #052e16;
|
||||
box-shadow: 0 6px 14px rgba(34, 197, 94, 0.35);
|
||||
background: linear-gradient(135deg, #d98b5f 0%, #b4532a 100%);
|
||||
color: #fffaf0;
|
||||
box-shadow: 0 6px 14px rgba(180, 83, 42, 0.25);
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
|
|
@ -159,13 +159,13 @@ watch(
|
|||
|
||||
.nav-item:hover {
|
||||
color: var(--app-text);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
background: rgba(180, 83, 42, 0.08);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
color: #fff;
|
||||
color: var(--app-primary);
|
||||
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 {
|
||||
|
|
@ -199,12 +199,12 @@ watch(
|
|||
|
||||
.nav-sub:hover {
|
||||
color: var(--app-text);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
background: rgba(180, 83, 42, 0.08);
|
||||
}
|
||||
|
||||
.nav-sub.active {
|
||||
color: var(--app-green);
|
||||
background: rgba(34, 197, 94, 0.08);
|
||||
background: rgba(112, 132, 91, 0.12);
|
||||
}
|
||||
|
||||
.sub-dot {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
:root {
|
||||
--app-bg: #0f0f23;
|
||||
--app-bg-elevated: #161632;
|
||||
--app-card: #1a1a3a;
|
||||
--app-border: rgba(255, 255, 255, 0.08);
|
||||
--app-text: #f8fafc;
|
||||
--app-text-secondary: #b9b9d6;
|
||||
--app-text-muted: #6e6e96;
|
||||
--app-primary: #6d5df6;
|
||||
--app-green: #22c55e;
|
||||
--app-bg: #f4eddf;
|
||||
--app-bg-elevated: #eee2d1;
|
||||
--app-card: #fffaf0;
|
||||
--app-border: #d8c8b3;
|
||||
--app-text: #3f3028;
|
||||
--app-text-secondary: #6e584a;
|
||||
--app-text-muted: #927b6c;
|
||||
--app-primary: #b4532a;
|
||||
--app-green: #70845b;
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -38,7 +38,7 @@ body {
|
|||
}
|
||||
|
||||
::selection {
|
||||
background: rgba(109, 93, 246, 0.45);
|
||||
background: rgba(180, 83, 42, 0.22);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
|
|
@ -47,12 +47,12 @@ body {
|
|||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
background: #d8c8b3;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.24);
|
||||
background: #bfa992;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
|
|
@ -64,7 +64,7 @@ button {
|
|||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--app-green);
|
||||
outline: 2px solid var(--app-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -161,7 +161,7 @@ onMounted(() => {
|
|||
.banner-text p {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
color: rgba(255, 250, 240, 0.88);
|
||||
}
|
||||
|
||||
.banner-mark {
|
||||
|
|
@ -239,7 +239,7 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.mini-mark {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
color: rgba(255, 250, 240, 0.62);
|
||||
}
|
||||
|
||||
.mini-play {
|
||||
|
|
@ -252,7 +252,7 @@ onMounted(() => {
|
|||
height: 30px;
|
||||
border-radius: 50%;
|
||||
background: var(--app-green);
|
||||
color: #052e16;
|
||||
color: #fffaf0;
|
||||
opacity: 0;
|
||||
transform: translateY(5px);
|
||||
transition:
|
||||
|
|
@ -304,8 +304,8 @@ onMounted(() => {
|
|||
.rank-preview:hover,
|
||||
.rank-preview:focus-visible {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(109, 93, 246, 0.45);
|
||||
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
|
||||
border-color: rgba(180, 83, 42, 0.5);
|
||||
box-shadow: 0 12px 28px rgba(96, 66, 45, 0.14);
|
||||
}
|
||||
|
||||
.rank-head {
|
||||
|
|
@ -314,7 +314,7 @@ onMounted(() => {
|
|||
justify-content: space-between;
|
||||
height: 52px;
|
||||
padding: 0 16px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
color: rgba(255, 250, 240, 0.94);
|
||||
}
|
||||
|
||||
.rank-name {
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ const headerPlayCount = computed(() =>
|
|||
)
|
||||
const headerCover = computed(() => {
|
||||
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>(
|
||||
() => (summary.value?.source as Source) ?? settingsStore.defaultSource,
|
||||
|
|
@ -152,7 +152,7 @@ function favorite() {
|
|||
|
||||
.back-btn:hover {
|
||||
color: var(--app-text);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
background: rgba(180, 83, 42, 0.08);
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
|
|
@ -179,7 +179,7 @@ function favorite() {
|
|||
}
|
||||
|
||||
.cover-mark {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
color: rgba(255, 250, 240, 0.58);
|
||||
}
|
||||
|
||||
.detail-info {
|
||||
|
|
@ -207,8 +207,8 @@ function favorite() {
|
|||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #22c55e, #0ea5e9);
|
||||
color: #052e16;
|
||||
background: linear-gradient(135deg, #d98b5f, #b4532a);
|
||||
color: #fffaf0;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ function playRank(rankIndex: number) {
|
|||
padding: clamp(12px, 1.8vw, 16px);
|
||||
border: 1px solid var(--app-border);
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
background: rgba(255, 250, 240, 0.72);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
|
|
@ -114,8 +114,8 @@ function playRank(rankIndex: number) {
|
|||
.rank-card:hover,
|
||||
.rank-card:focus-visible {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(109, 93, 246, 0.45);
|
||||
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
|
||||
border-color: rgba(180, 83, 42, 0.5);
|
||||
box-shadow: 0 12px 28px rgba(96, 66, 45, 0.14);
|
||||
}
|
||||
|
||||
.rank-cover {
|
||||
|
|
@ -130,7 +130,7 @@ function playRank(rankIndex: number) {
|
|||
}
|
||||
|
||||
.cover-mark {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
color: rgba(255, 250, 240, 0.62);
|
||||
}
|
||||
|
||||
.rank-badge {
|
||||
|
|
@ -140,8 +140,8 @@ function playRank(rankIndex: number) {
|
|||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
color: #fffaf0;
|
||||
background: rgba(63, 48, 40, 0.72);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
|
|
@ -156,7 +156,7 @@ function playRank(rankIndex: number) {
|
|||
border: none;
|
||||
border-radius: 50%;
|
||||
background: var(--app-green);
|
||||
color: #052e16;
|
||||
color: #fffaf0;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transform: translateY(5px);
|
||||
|
|
@ -164,7 +164,7 @@ function playRank(rankIndex: number) {
|
|||
opacity 0.2s ease,
|
||||
transform 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,
|
||||
|
|
@ -256,7 +256,7 @@ function playRank(rankIndex: number) {
|
|||
|
||||
.more-btn:hover {
|
||||
color: var(--app-green);
|
||||
background: rgba(34, 197, 94, 0.08);
|
||||
background: rgba(112, 132, 91, 0.12);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
|
|
|
|||
|
|
@ -345,7 +345,7 @@ onBeforeUnmount(() => {
|
|||
|
||||
.clear-btn:hover {
|
||||
color: var(--app-text);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
background: rgba(180, 83, 42, 0.08);
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ const settingsStore = useSettingsStore()
|
|||
padding: clamp(16px, 2vw, 22px);
|
||||
border: 1px solid var(--app-border);
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
background: rgba(255, 250, 240, 0.72);
|
||||
}
|
||||
|
||||
.setting-head {
|
||||
|
|
@ -124,13 +124,13 @@ const settingsStore = useSettingsStore()
|
|||
}
|
||||
|
||||
.source-item:hover {
|
||||
border-color: rgba(109, 93, 246, 0.45);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-color: rgba(180, 83, 42, 0.5);
|
||||
background: rgba(180, 83, 42, 0.08);
|
||||
}
|
||||
|
||||
.source-item.checked {
|
||||
border-color: rgba(34, 197, 94, 0.5);
|
||||
background: rgba(34, 197, 94, 0.06);
|
||||
border-color: rgba(112, 132, 91, 0.58);
|
||||
background: rgba(112, 132, 91, 0.1);
|
||||
}
|
||||
|
||||
.source-label {
|
||||
|
|
@ -161,7 +161,7 @@ const settingsStore = useSettingsStore()
|
|||
}
|
||||
|
||||
.default-radio:hover {
|
||||
border-color: rgba(109, 93, 246, 0.45);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-color: rgba(180, 83, 42, 0.5);
|
||||
background: rgba(180, 83, 42, 0.08);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue