mirror of
https://github.com/Megghy/vtsuru.live.git
synced 2025-12-06 18:36:55 +08:00
更新列表歌单样式
This commit is contained in:
@@ -146,7 +146,7 @@ const selectTag = (tagName: string) => {
|
||||
};
|
||||
|
||||
// Select Artist (from table click, unchanged)
|
||||
const selectArtist = (artist: string) => {
|
||||
const selectArtistFromTable = (artist: string) => {
|
||||
selectedArtist.value = artist;
|
||||
};
|
||||
|
||||
@@ -433,13 +433,15 @@ export const Config = defineTemplateConfig([
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 新增: 外部背景和模糊容器 -->
|
||||
<div
|
||||
class="song-list-template"
|
||||
class="song-list-background-wrapper"
|
||||
:style="{
|
||||
backgroundImage: `url(${FILE_BASE_URL + props.config?.background})`,
|
||||
backgroundSize: 'cover', height: '100%', backdropFilter: 'blur(5px)'
|
||||
backgroundImage: props.config?.background ? `url(${FILE_BASE_URL + props.config.background})` : 'none',
|
||||
}"
|
||||
>
|
||||
<!-- 原始: 滚动和内容容器 -->
|
||||
<div class="song-list-template">
|
||||
<div class="profile-card-container">
|
||||
<!-- Profile Hover Area (unchanged) -->
|
||||
<div
|
||||
@@ -692,7 +694,7 @@ export const Config = defineTemplateConfig([
|
||||
<span
|
||||
class="artist-link"
|
||||
:title="`筛选: ${artist}`"
|
||||
@click.stop="selectArtist(artist)"
|
||||
@click.stop="selectArtistFromTable(artist)"
|
||||
>
|
||||
{{ artist }}
|
||||
</span>
|
||||
@@ -731,6 +733,7 @@ export const Config = defineTemplateConfig([
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@@ -895,50 +898,82 @@ html.dark .filter-input::placeholder {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* --- Table Styles (mostly unchanged) --- */
|
||||
/* --- MODIFIED: Structure Styles --- */
|
||||
|
||||
.song-list-template {
|
||||
/* --- NEW: Outer Background & Blur Wrapper --- */
|
||||
.song-list-background-wrapper {
|
||||
position: relative; /* Anchor for ::before */
|
||||
height: calc(100vh - var(--vtsuru-header-height) - var(--vtsuru-content-padding) - var(--vtsuru-content-padding));
|
||||
overflow-y: auto;
|
||||
border-radius: 8px;
|
||||
border-radius: 8px; /* Apply rounding here */
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
position: relative;
|
||||
background-attachment: fixed; /* Keep background fixed */
|
||||
overflow: hidden; /* Clip the ::before pseudo-element */
|
||||
}
|
||||
|
||||
.song-list-template::before {
|
||||
/* Blur effect on the wrapper's ::before */
|
||||
.song-list-background-wrapper::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
backdrop-filter: blur(5px);
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: inherit;
|
||||
z-index: 1;
|
||||
background-color: rgba(0, 0, 0, 0.1); /* Optional overlay */
|
||||
border-radius: inherit; /* Inherit rounding */
|
||||
z-index: 1; /* Below content */
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
html.dark .song-list-template::before {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
html.dark .song-list-background-wrapper::before {
|
||||
background-color: rgba(255, 255, 255, 0.05); /* Dark mode overlay */
|
||||
}
|
||||
|
||||
/* --- MODIFIED: Inner Scrolling Container --- */
|
||||
.song-list-template {
|
||||
height: 100%; /* Fill the wrapper */
|
||||
overflow-y: auto; /* Enable vertical scrolling for content */
|
||||
position: relative; /* Needed for z-index */
|
||||
z-index: 2; /* Place above the ::before blur layer */
|
||||
background: transparent !important; /* Ensure no background color obscures the wrapper */
|
||||
border-radius: inherit; /* Inherit rounding for scrollbar area */
|
||||
|
||||
/* Keep scrollbar styles */
|
||||
&::-webkit-scrollbar { width: 8px; }
|
||||
&::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 4px; }
|
||||
&::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 4px; }
|
||||
&::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); }
|
||||
}
|
||||
|
||||
/* Dark mode scrollbar styles for the scrolling container */
|
||||
html.dark .song-list-template {
|
||||
&::-webkit-scrollbar-track { background: var(--scrollbar-color); }
|
||||
&::-webkit-scrollbar-thumb { background: var(--scrollbar-color-hover); }
|
||||
&::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-color-active); }
|
||||
}
|
||||
|
||||
|
||||
/* --- MODIFIED: Main Content Container --- */
|
||||
.profile-card-container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
position: relative; /* Keep for potential absolute children if any */
|
||||
/* z-index: 2; */ /* Removed: Handled by .song-list-template */
|
||||
padding: 20px;
|
||||
font-family: sans-serif;
|
||||
color: #333333;
|
||||
/* height: 100%; */ /* Removed: Let content define height */
|
||||
min-height: 100%; /* Ensure it tries to fill the scroll container */
|
||||
box-sizing: border-box; /* Include padding in height calculation */
|
||||
}
|
||||
|
||||
html.dark .profile-card-container {
|
||||
color: var(--text-color-1);
|
||||
}
|
||||
|
||||
/* --- Profile Hover Area Styles (Unchanged) --- */
|
||||
.profile-hover-area {
|
||||
position: relative; display: flex; align-items: flex-start;
|
||||
width: fit-content; min-width: 300px; margin: 0 auto 20px auto;
|
||||
padding: 15px; border-radius: 15px;
|
||||
transition: transform 0.4s ease-in-out; z-index: 100;
|
||||
transition: transform 0.4s ease-in-out; z-index: 100; /* High z-index for hover effect */
|
||||
box-shadow: var(--box-shadow-1);
|
||||
background-color: rgba(255, 255, 255, 0.65);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
@@ -994,7 +1029,7 @@ html.dark .profile-extra-info {
|
||||
.social-links {
|
||||
position: absolute; top: 5px; left: calc(100px + 20px + 10px);
|
||||
width: 380px; padding: 15px 20px; border-radius: 10px;
|
||||
box-shadow: var(--box-shadow-2); z-index: 20;
|
||||
box-shadow: var(--box-shadow-2); z-index: 20; /* High z-index within hover area */
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
opacity: 0; visibility: hidden; transform: translateX(20px);
|
||||
@@ -1052,10 +1087,11 @@ html.dark .social-link .arrow { color: var(--text-color-3); }
|
||||
left: calc(100px - 60px + 15px);
|
||||
}
|
||||
|
||||
/* --- Song List Container Styles (Unchanged except background/border) --- */
|
||||
.song-list-container {
|
||||
padding: 15px 25px; border-radius: 15px; font-family: sans-serif;
|
||||
box-shadow: var(--box-shadow-1);
|
||||
background-color: rgba(255, 255, 255, 0.65); /* Matched profile */
|
||||
background-color: rgba(255, 255, 255, 0.50); /* Matched profile */
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
@@ -1064,21 +1100,13 @@ html.dark .song-list-container {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* --- Table Styles (Unchanged) --- */
|
||||
.song-table-wrapper {
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - 520px); /* Adjusted height calculation */
|
||||
min-height: 200px;
|
||||
overflow-y: auto; /* This overflow handles table content, not main scroll */
|
||||
/* min-height: 200px; */ /* Might not be needed if max-height is set */
|
||||
border-radius: 8px;
|
||||
&::-webkit-scrollbar { width: 8px; }
|
||||
&::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 4px; }
|
||||
&::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 4px; }
|
||||
&::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); }
|
||||
}
|
||||
|
||||
html.dark .song-table-wrapper {
|
||||
&::-webkit-scrollbar-track { background: var(--scrollbar-color); }
|
||||
&::-webkit-scrollbar-thumb { background: var(--scrollbar-color-hover); }
|
||||
&::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-color-active); }
|
||||
/* Scrollbar styling specific to this inner table scroll if needed */
|
||||
/* ... */
|
||||
}
|
||||
|
||||
.song-list-table {
|
||||
@@ -1086,7 +1114,7 @@ html.dark .song-table-wrapper {
|
||||
}
|
||||
|
||||
.song-list-table thead th {
|
||||
position: sticky; top: 0; z-index: 1;
|
||||
position: sticky; top: 0; z-index: 1; /* Sticky within .song-table-wrapper */
|
||||
padding: 10px 12px; text-align: left; font-weight: 600;
|
||||
background-color: rgba(245, 245, 245, 0.8); /* Slightly less transparent */
|
||||
backdrop-filter: blur(2px); /* Blur header slightly */
|
||||
@@ -1095,7 +1123,7 @@ html.dark .song-table-wrapper {
|
||||
}
|
||||
|
||||
html.dark .song-list-table thead th {
|
||||
background-color: rgba(55, 55, 55, 0.8); /* Dark mode header bg */
|
||||
background-color: rgba(55, 55, 55, 0.85); /* Dark mode header bg */
|
||||
border-bottom-color: var(--border-color);
|
||||
color: var(--text-color-2);
|
||||
}
|
||||
@@ -1135,7 +1163,7 @@ html.dark .song-name { color: var(--text-color-1); }
|
||||
|
||||
.artist-link {
|
||||
padding: 1px 0; cursor: pointer; text-decoration: none;
|
||||
color: var(--primary-color); /* Use theme primary for links */
|
||||
color: var(--text-color-2); /* Use theme primary for links */
|
||||
transition: color 0.2s ease, text-decoration 0.2s ease;
|
||||
}
|
||||
.artist-link:hover { text-decoration: underline; }
|
||||
|
||||
Reference in New Issue
Block a user