fix(ui): 批量替换所有组件中残留的硬编码深色值以彻底支持浅色主题
This commit is contained in:
@@ -1026,7 +1026,7 @@ onMounted(() => {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.1);
|
||||
border-top-color: #3b82f6;
|
||||
border-top-color: var(--border-secondary, #3b82f6);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@@ -1044,7 +1044,7 @@ onMounted(() => {
|
||||
background: transparent;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #27272a;
|
||||
background: var(--bg-tertiary, #27272a);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
|
||||
@@ -556,8 +556,8 @@ const formatFileSize = (bytes) => {
|
||||
|
||||
/* 操作卡片 */
|
||||
.action-card {
|
||||
background: #2a2a2a;
|
||||
border: 1px solid #404040;
|
||||
background: var(--bg-tertiary, #2a2a2a);
|
||||
border: 1px solid var(--border-secondary, #404040);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
@@ -566,7 +566,7 @@ const formatFileSize = (bytes) => {
|
||||
|
||||
.action-card:hover {
|
||||
border-color: #606060;
|
||||
background: #2f2f2f;
|
||||
background: var(--bg-tertiary, #2f2f2f);
|
||||
}
|
||||
|
||||
.action-card .card-content {
|
||||
@@ -587,7 +587,7 @@ const formatFileSize = (bytes) => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
}
|
||||
|
||||
.action-icon svg {
|
||||
@@ -599,7 +599,7 @@ const formatFileSize = (bytes) => {
|
||||
.action-card h4 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
margin: 0 0 0.75rem 0;
|
||||
}
|
||||
|
||||
@@ -672,8 +672,8 @@ const formatFileSize = (bytes) => {
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: #2a2a2a;
|
||||
border: 1px solid #404040;
|
||||
background: var(--bg-tertiary, #2a2a2a);
|
||||
border: 1px solid var(--border-secondary, #404040);
|
||||
border-radius: 12px;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
@@ -724,7 +724,7 @@ const formatFileSize = (bytes) => {
|
||||
.progress-details h5,
|
||||
.progress-errors h5 {
|
||||
margin: 0 0 10px 0;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -736,14 +736,14 @@ const formatFileSize = (bytes) => {
|
||||
border: 1px solid #505050;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
background: #333333;
|
||||
background: var(--bg-quaternary, #333333);
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
padding: 4px 0;
|
||||
color: #a0a0a0;
|
||||
font-size: 13px;
|
||||
border-bottom: 1px solid #404040;
|
||||
border-bottom: 1px solid var(--border-secondary, #404040);
|
||||
}
|
||||
|
||||
.detail-item:last-child {
|
||||
@@ -754,7 +754,7 @@ const formatFileSize = (bytes) => {
|
||||
padding: 4px 0;
|
||||
color: #ff6b6b;
|
||||
font-size: 13px;
|
||||
border-bottom: 1px solid #4a2a2a;
|
||||
border-bottom: 1px solid var(--border-secondary, #4a2a2a);
|
||||
}
|
||||
|
||||
.error-item:last-child {
|
||||
@@ -772,7 +772,7 @@ const formatFileSize = (bytes) => {
|
||||
.modal-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -788,7 +788,7 @@ const formatFileSize = (bytes) => {
|
||||
|
||||
.close-btn:hover {
|
||||
background: #505050;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
}
|
||||
|
||||
.close-btn svg {
|
||||
@@ -802,11 +802,11 @@ const formatFileSize = (bytes) => {
|
||||
|
||||
.modal-footer {
|
||||
padding: 1.5rem 2rem;
|
||||
border-top: 1px solid #404040;
|
||||
border-top: 1px solid var(--border-secondary, #404040);
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: flex-end;
|
||||
background: #252525;
|
||||
background: var(--bg-tertiary, #252525);
|
||||
}
|
||||
|
||||
.modal-footer button {
|
||||
@@ -822,7 +822,7 @@ const formatFileSize = (bytes) => {
|
||||
display: block;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@@ -838,7 +838,7 @@ const formatFileSize = (bytes) => {
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
padding: 1.25rem;
|
||||
background: #333333;
|
||||
background: var(--bg-quaternary, #333333);
|
||||
border: 1px solid #505050;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
@@ -870,7 +870,7 @@ const formatFileSize = (bytes) => {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
@@ -907,12 +907,12 @@ const formatFileSize = (bytes) => {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
background: #333333;
|
||||
background: var(--bg-quaternary, #333333);
|
||||
}
|
||||
|
||||
.upload-area:hover,
|
||||
.upload-area.drag-over {
|
||||
border-color: #4a90e2;
|
||||
border-color: var(--border-secondary, #4a90e2);
|
||||
background: #383838;
|
||||
}
|
||||
|
||||
@@ -926,7 +926,7 @@ const formatFileSize = (bytes) => {
|
||||
.upload-area h4 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
@@ -941,7 +941,7 @@ const formatFileSize = (bytes) => {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1.25rem;
|
||||
background: #333333;
|
||||
background: var(--bg-quaternary, #333333);
|
||||
border: 1px solid #505050;
|
||||
border-radius: 8px;
|
||||
margin-top: 1rem;
|
||||
@@ -969,7 +969,7 @@ const formatFileSize = (bytes) => {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
@@ -1056,8 +1056,8 @@ const formatFileSize = (bytes) => {
|
||||
}
|
||||
|
||||
.notification.success {
|
||||
background: #2e7d32;
|
||||
border: 1px solid #4caf50;
|
||||
background: var(--bg-tertiary, #2e7d32);
|
||||
border: 1px solid var(--border-secondary, #4caf50);
|
||||
}
|
||||
|
||||
.notification.error {
|
||||
@@ -1071,8 +1071,8 @@ const formatFileSize = (bytes) => {
|
||||
}
|
||||
|
||||
.notification.info {
|
||||
background: #1976d2;
|
||||
border: 1px solid #2196f3;
|
||||
background: var(--bg-secondary, #1976d2);
|
||||
border: 1px solid var(--border-secondary, #2196f3);
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
|
||||
@@ -645,7 +645,7 @@ onMounted(() => {
|
||||
background: transparent;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #27272a;
|
||||
background: var(--bg-tertiary, #27272a);
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -336,7 +336,7 @@ onMounted(() => {
|
||||
background: transparent;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #27272a;
|
||||
background: var(--bg-tertiary, #27272a);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
|
||||
@@ -742,7 +742,7 @@ onUnmounted(() => {
|
||||
background: transparent;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #27272a;
|
||||
background: var(--bg-tertiary, #27272a);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
|
||||
@@ -366,7 +366,7 @@ onMounted(() => {
|
||||
background: transparent;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #27272a;
|
||||
background: var(--bg-tertiary, #27272a);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
|
||||
@@ -842,7 +842,7 @@ const cancelForm = () => {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #27272a;
|
||||
background: var(--bg-tertiary, #27272a);
|
||||
border-radius: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
|
||||
@@ -112,7 +112,7 @@ const handleImageError = (event) => {
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
color: var(--text-quaternary, #333333);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -141,7 +141,7 @@ const handleImageError = (event) => {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
color: var(--text-tertiary, #999999);
|
||||
}
|
||||
|
||||
.cover-placeholder.show {
|
||||
@@ -161,7 +161,7 @@ const handleImageError = (event) => {
|
||||
.song-title {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
color: var(--text-quaternary, #333333);
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@@ -176,7 +176,7 @@ const handleImageError = (event) => {
|
||||
display: inline-block;
|
||||
padding: 1px 4px;
|
||||
background: #e3f2fd;
|
||||
border: 1px solid #2196f3;
|
||||
border: 1px solid var(--border-secondary, #2196f3);
|
||||
border-radius: 3px;
|
||||
color: #1976d2;
|
||||
font-size: 10px;
|
||||
@@ -186,7 +186,7 @@ const handleImageError = (event) => {
|
||||
|
||||
.song-artist {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
color: var(--text-quaternary, #666666);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -197,7 +197,7 @@ const handleImageError = (event) => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
color: var(--text-quaternary, #666666);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -207,14 +207,14 @@ const handleImageError = (event) => {
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333;
|
||||
color: var(--text-quaternary, #333333);
|
||||
}
|
||||
|
||||
/* 打印样式 */
|
||||
@media print {
|
||||
.schedule-item-print {
|
||||
color: #000 !important;
|
||||
background: #fff !important;
|
||||
color: var(--text-primary, #000) !important;
|
||||
background: var(--card-bg, #fff) !important;
|
||||
width: 100% !important;
|
||||
max-width: none !important;
|
||||
box-sizing: border-box !important;
|
||||
@@ -230,7 +230,7 @@ const handleImageError = (event) => {
|
||||
|
||||
.sequence-number {
|
||||
background: #f0f0f0 !important;
|
||||
color: #000 !important;
|
||||
color: var(--text-primary, #000) !important;
|
||||
width: 30px !important;
|
||||
height: 30px !important;
|
||||
flex-shrink: 0 !important;
|
||||
@@ -264,7 +264,7 @@ const handleImageError = (event) => {
|
||||
}
|
||||
|
||||
.song-title {
|
||||
color: #000 !important;
|
||||
color: var(--text-primary, #000) !important;
|
||||
font-size: 16px !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
@@ -274,11 +274,11 @@ const handleImageError = (event) => {
|
||||
.song-artist,
|
||||
.label,
|
||||
.value {
|
||||
color: #333 !important;
|
||||
color: var(--text-quaternary, #333333) !important;
|
||||
}
|
||||
|
||||
.time-range {
|
||||
color: #666 !important;
|
||||
color: var(--text-quaternary, #666666) !important;
|
||||
}
|
||||
|
||||
.requester-info,
|
||||
|
||||
@@ -1383,15 +1383,15 @@ watch(
|
||||
/* 预览区域和打印样式的核心CSS - 保持原生CSS以确保精确控制 */
|
||||
|
||||
.preview-content {
|
||||
background: #ffffff;
|
||||
background: var(--card-bg, #ffffff);
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 打印页面样式 */
|
||||
.print-page {
|
||||
background: #ffffff;
|
||||
color: #000000;
|
||||
background: var(--card-bg, #ffffff);
|
||||
color: var(--text-primary, #000000);
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 30px;
|
||||
@@ -1426,7 +1426,7 @@ watch(
|
||||
.logo-divider {
|
||||
width: 2px;
|
||||
height: 60px;
|
||||
background: linear-gradient(to bottom, #ddd, #999, #ddd);
|
||||
background: linear-gradient(to bottom, var(--border-secondary, #dddddd), #999, #ddd);
|
||||
border-radius: 1px;
|
||||
margin: 0 4px;
|
||||
}
|
||||
@@ -1445,19 +1445,19 @@ watch(
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
margin: 0 0 4px 0;
|
||||
color: #000;
|
||||
color: var(--text-primary, #000);
|
||||
}
|
||||
|
||||
.title-section h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
color: #666;
|
||||
color: var(--text-quaternary, #666666);
|
||||
}
|
||||
|
||||
.date-info {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
color: var(--text-quaternary, #666666);
|
||||
text-align: right;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@@ -1477,14 +1477,14 @@ watch(
|
||||
.no-data-message {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #666;
|
||||
color: var(--text-quaternary, #666666);
|
||||
}
|
||||
|
||||
.no-data-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: 0 auto 20px;
|
||||
color: #ccc;
|
||||
color: var(--text-secondary, #cccccc);
|
||||
}
|
||||
|
||||
.no-data-icon svg {
|
||||
@@ -1496,7 +1496,7 @@ watch(
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
margin: 0 0 12px 0;
|
||||
color: #333;
|
||||
color: var(--text-quaternary, #333333);
|
||||
}
|
||||
|
||||
.no-data-message p {
|
||||
@@ -1512,15 +1512,15 @@ watch(
|
||||
font-weight: bold;
|
||||
margin: 24px 0 12px 0;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 2px solid #ddd;
|
||||
border-bottom: 2px solid var(--border-secondary, #ddd);
|
||||
background: #f8f9fa;
|
||||
color: #333;
|
||||
color: var(--text-quaternary, #333333);
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.playtime-group .group-title {
|
||||
background: #e3f2fd;
|
||||
border-bottom-color: #2196f3;
|
||||
border-bottom-color: var(--border-secondary, #2196f3);
|
||||
color: #1565c0;
|
||||
}
|
||||
|
||||
@@ -1533,7 +1533,7 @@ watch(
|
||||
.group-count {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: #666;
|
||||
color: var(--text-quaternary, #666666);
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@@ -1547,7 +1547,7 @@ watch(
|
||||
margin: 16px 0 8px 0;
|
||||
padding: 6px 10px;
|
||||
background: #f0f8ff;
|
||||
border-left: 3px solid #2196f3;
|
||||
border-left: 3px solid var(--border-secondary, #2196f3);
|
||||
color: #1565c0;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
@@ -1555,7 +1555,7 @@ watch(
|
||||
.playtime-count {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
color: #666;
|
||||
color: var(--text-quaternary, #666666);
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
@@ -1570,7 +1570,7 @@ watch(
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
color: var(--text-quaternary, #666666);
|
||||
}
|
||||
|
||||
.footer-left {
|
||||
|
||||
@@ -279,7 +279,7 @@ const getRoleDisplayName = (role) => {
|
||||
background: transparent;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #27272a;
|
||||
background: var(--bg-tertiary, #27272a);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
|
||||
@@ -1228,7 +1228,7 @@ onUnmounted(() => {
|
||||
background: transparent;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #27272a;
|
||||
background: var(--bg-tertiary, #27272a);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
|
||||
@@ -2179,7 +2179,7 @@ onUnmounted(() => {
|
||||
background: transparent;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #27272a;
|
||||
background: var(--bg-tertiary, #27272a);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
|
||||
@@ -223,14 +223,14 @@ watch(
|
||||
.modal-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
color: var(--text-tertiary, #888888);
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
@@ -238,8 +238,8 @@ watch(
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: #2a2a2a;
|
||||
color: #ffffff;
|
||||
background: var(--bg-tertiary, #2a2a2a);
|
||||
color: var(--text-primary, #ffffff);
|
||||
}
|
||||
|
||||
.close-btn svg {
|
||||
@@ -254,22 +254,22 @@ watch(
|
||||
}
|
||||
|
||||
.song-info {
|
||||
background: #2a2a2a;
|
||||
background: var(--bg-tertiary, #2a2a2a);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 24px;
|
||||
border: 1px solid #3a3a3a;
|
||||
border: 1px solid var(--border-secondary, #3a3a3a);
|
||||
}
|
||||
|
||||
.song-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.song-artist {
|
||||
color: #888;
|
||||
color: var(--text-tertiary, #888888);
|
||||
margin: 0 0 16px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -304,7 +304,7 @@ watch(
|
||||
.spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid #3a3a3a;
|
||||
border: 3px solid var(--border-secondary, #3a3a3a);
|
||||
border-top: 3px solid #667eea;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
@@ -366,12 +366,12 @@ watch(
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #3a3a3a;
|
||||
border-bottom: 1px solid var(--border-secondary, #3a3a3a);
|
||||
}
|
||||
|
||||
.voters-title {
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@@ -388,15 +388,15 @@ watch(
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
background: #2a2a2a;
|
||||
background: var(--bg-tertiary, #2a2a2a);
|
||||
border-radius: 8px;
|
||||
border: 1px solid #3a3a3a;
|
||||
border: 1px solid var(--border-secondary, #3a3a3a);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.voter-item:hover {
|
||||
background: #333333;
|
||||
border-color: #4a4a4a;
|
||||
background: var(--bg-quaternary, #333333);
|
||||
border-color: var(--border-secondary, #4a4a4a);
|
||||
}
|
||||
|
||||
.voter-info {
|
||||
@@ -426,18 +426,18 @@ watch(
|
||||
}
|
||||
|
||||
.voter-name {
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.vote-time {
|
||||
color: #888;
|
||||
color: var(--text-tertiary, #888888);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.voter-number {
|
||||
color: #888;
|
||||
color: var(--text-tertiary, #888888);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -454,11 +454,11 @@ watch(
|
||||
.empty-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
color: #666;
|
||||
color: var(--text-quaternary, #666666);
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
color: #888;
|
||||
color: var(--text-tertiary, #888888);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -469,8 +469,8 @@ watch(
|
||||
}
|
||||
|
||||
.close-button {
|
||||
background: #3a3a3a;
|
||||
color: #ffffff;
|
||||
background: var(--bg-quaternary, #3a3a3a);
|
||||
color: var(--text-primary, #ffffff);
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
@@ -490,7 +490,7 @@ watch(
|
||||
}
|
||||
|
||||
.voters-container::-webkit-scrollbar-track {
|
||||
background: #2a2a2a;
|
||||
background: var(--bg-tertiary, #2a2a2a);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
||||
@@ -141,21 +141,21 @@ const loginWith = (provider: string) => {
|
||||
}
|
||||
|
||||
.oauth-btn-github:hover {
|
||||
background: #24292e;
|
||||
color: #ffffff;
|
||||
border-color: #24292e;
|
||||
background: var(--bg-tertiary, #24292e);
|
||||
color: var(--text-primary, #ffffff);
|
||||
border-color: var(--border-secondary, #24292e);
|
||||
}
|
||||
|
||||
.oauth-btn-google:hover {
|
||||
background: #ffffff;
|
||||
color: #111111;
|
||||
background: var(--card-bg, #ffffff);
|
||||
color: var(--text-primary, #111111);
|
||||
border-color: #dadce0;
|
||||
}
|
||||
|
||||
.oauth-btn-aggregate:hover {
|
||||
background: #12b7f5;
|
||||
color: #ffffff;
|
||||
border-color: #12b7f5;
|
||||
background: var(--bg-secondary, #12b7f5);
|
||||
color: var(--text-primary, #ffffff);
|
||||
border-color: var(--border-secondary, #12b7f5);
|
||||
}
|
||||
|
||||
.oauth-empty-hint {
|
||||
|
||||
@@ -575,7 +575,7 @@ const handleRegister = async () => {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
background: var(--primary);
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
border: none;
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: 16px;
|
||||
|
||||
@@ -209,7 +209,7 @@ input[type='range']::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: #2563eb; /* blue-600 */
|
||||
background: var(--bg-tertiary, #2563eb); /* blue-600 */
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
@@ -218,7 +218,7 @@ input[type='range']::-webkit-slider-thumb {
|
||||
input[type='range']::-moz-range-thumb {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: #2563eb;
|
||||
background: var(--bg-tertiary, #2563eb);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
|
||||
@@ -160,7 +160,7 @@ const jumpSeek = (line: LyricLineMouseEvent) => {
|
||||
:deep(.am-lyric .is-active),
|
||||
:deep(.am-lyric .lyric-line.current),
|
||||
:deep(.am-lyric .lyric-line.is-current) {
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -824,6 +824,6 @@ onBeforeUnmount(() => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2912,7 +2912,7 @@ defineExpose({
|
||||
<style scoped>
|
||||
.request-form {
|
||||
width: 100%;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
height: calc(100vh - 160px);
|
||||
@@ -2954,7 +2954,7 @@ defineExpose({
|
||||
font-size: 15px;
|
||||
line-height: 1.7;
|
||||
letter-spacing: 0.04em;
|
||||
color: #fff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
}
|
||||
|
||||
.rules-content-desktop p {
|
||||
@@ -3181,7 +3181,7 @@ defineExpose({
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0; /* 防止标签被压缩 */
|
||||
}
|
||||
@@ -3212,11 +3212,11 @@ defineExpose({
|
||||
}
|
||||
|
||||
.search-button {
|
||||
background: linear-gradient(180deg, #0043f8 0%, #0075f8 100%);
|
||||
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.75rem 1.5rem;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
@@ -3250,7 +3250,7 @@ defineExpose({
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0; /* 防止标签被压缩 */
|
||||
}
|
||||
@@ -3271,7 +3271,7 @@ defineExpose({
|
||||
border-radius: 6px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
}
|
||||
|
||||
.remove-collaborator {
|
||||
@@ -3285,7 +3285,7 @@ defineExpose({
|
||||
}
|
||||
|
||||
.remove-collaborator:hover {
|
||||
color: #fff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
}
|
||||
|
||||
.add-collaborator-btn {
|
||||
@@ -3304,7 +3304,7 @@ defineExpose({
|
||||
|
||||
.add-collaborator-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
}
|
||||
|
||||
/* 自定义复选框样式 */
|
||||
@@ -3327,7 +3327,7 @@ defineExpose({
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #3f3f46;
|
||||
border: 1px solid var(--border-secondary, #3f3f46);
|
||||
background: rgba(24, 24, 27, 0.5);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
@@ -3343,7 +3343,7 @@ defineExpose({
|
||||
|
||||
.custom-checkbox-input:checked + .custom-checkbox-box {
|
||||
background: #3b82f6;
|
||||
border-color: #3b82f6;
|
||||
border-color: var(--border-secondary, #3b82f6);
|
||||
}
|
||||
|
||||
.custom-checkbox-input:checked + .custom-checkbox-box .custom-checkbox-icon {
|
||||
@@ -3428,7 +3428,7 @@ defineExpose({
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
}
|
||||
|
||||
.status-item-horizontal .status-value {
|
||||
@@ -3615,7 +3615,7 @@ defineExpose({
|
||||
}
|
||||
|
||||
.header-btn:hover {
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
@@ -3645,7 +3645,7 @@ defineExpose({
|
||||
.import-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
}
|
||||
|
||||
.user-status {
|
||||
@@ -3706,7 +3706,7 @@ defineExpose({
|
||||
|
||||
.action-btn-compact:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
@@ -3731,7 +3731,7 @@ defineExpose({
|
||||
}
|
||||
|
||||
.radio-label.active {
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-weight: 600;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
@@ -3775,9 +3775,9 @@ defineExpose({
|
||||
}
|
||||
|
||||
.platform-btn.active {
|
||||
background: linear-gradient(180deg, #0043f8 0%, #0075f8 100%);
|
||||
background: linear-gradient(180deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
|
||||
border-color: rgba(255, 255, 255, 0.16);
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
}
|
||||
|
||||
.platform-btn:hover:not(.active) {
|
||||
@@ -3873,7 +3873,7 @@ defineExpose({
|
||||
}
|
||||
|
||||
.source-item.healthy .source-indicator {
|
||||
background: #22c55e;
|
||||
background: var(--bg-tertiary, #22c55e);
|
||||
box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
|
||||
}
|
||||
|
||||
@@ -4031,7 +4031,7 @@ defineExpose({
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -4077,7 +4077,7 @@ defineExpose({
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
@@ -4103,14 +4103,14 @@ defineExpose({
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
background: linear-gradient(180deg, #0043f8 0%, #0075f8 100%);
|
||||
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;
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
@@ -4125,7 +4125,7 @@ defineExpose({
|
||||
transform: none;
|
||||
}
|
||||
.similar-song-alert {
|
||||
background: #21242d;
|
||||
background: var(--bg-tertiary, #21242d);
|
||||
border-radius: 10px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
|
||||
@@ -4157,7 +4157,7 @@ defineExpose({
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
}
|
||||
|
||||
.alert-content {
|
||||
@@ -4190,7 +4190,7 @@ defineExpose({
|
||||
.song-title {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -4244,11 +4244,11 @@ defineExpose({
|
||||
}
|
||||
|
||||
.vote-btn {
|
||||
background: linear-gradient(180deg, #0043f8 0%, #0075f8 100%);
|
||||
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 1rem;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
@@ -4272,7 +4272,7 @@ defineExpose({
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
border-radius: 8px;
|
||||
padding: 0.5rem 1rem;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
@@ -4390,7 +4390,7 @@ defineExpose({
|
||||
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
@@ -4415,7 +4415,7 @@ defineExpose({
|
||||
|
||||
.close-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
@@ -4456,14 +4456,14 @@ defineExpose({
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #0043f8 0%, #0075f8 100%);
|
||||
background: linear-gradient(135deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
box-shadow: 0 4px 12px rgba(0, 67, 248, 0.3);
|
||||
}
|
||||
|
||||
@@ -4527,7 +4527,7 @@ defineExpose({
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
background: #18181b;
|
||||
background: var(--bg-secondary, #18181b);
|
||||
}
|
||||
|
||||
.cover-img {
|
||||
@@ -4600,7 +4600,7 @@ defineExpose({
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
margin: 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
@@ -4662,7 +4662,7 @@ defineExpose({
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
flex-shrink: 0;
|
||||
@@ -4713,7 +4713,7 @@ defineExpose({
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
border-radius: 6px;
|
||||
padding: 0.4rem 0.8rem;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
@@ -4750,11 +4750,11 @@ defineExpose({
|
||||
}
|
||||
|
||||
.select-btn {
|
||||
background: linear-gradient(180deg, #0043f8 0%, #0075f8 100%);
|
||||
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 1rem;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
@@ -4812,7 +4812,7 @@ defineExpose({
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
@@ -4835,7 +4835,7 @@ defineExpose({
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
margin-bottom: 1rem;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
}
|
||||
|
||||
.manual-form {
|
||||
@@ -4855,7 +4855,7 @@ defineExpose({
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
border-radius: 8px;
|
||||
padding: 0.5rem 1rem;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
@@ -4868,11 +4868,11 @@ defineExpose({
|
||||
}
|
||||
|
||||
.manual-confirm-btn {
|
||||
background: linear-gradient(180deg, #0043f8 0%, #0075f8 100%);
|
||||
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 1rem;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
@@ -5148,8 +5148,8 @@ defineExpose({
|
||||
}
|
||||
|
||||
.platform-btn.active {
|
||||
background: #0b5afe;
|
||||
color: #ffffff;
|
||||
background: var(--bg-secondary, #0b5afe);
|
||||
color: var(--text-primary, #ffffff);
|
||||
box-shadow: 0 2px 8px rgba(11, 90, 254, 0.3);
|
||||
}
|
||||
|
||||
@@ -5487,7 +5487,7 @@ defineExpose({
|
||||
|
||||
.import-semester-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: #fff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
@@ -5513,7 +5513,7 @@ defineExpose({
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
@@ -5571,7 +5571,7 @@ defineExpose({
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
}
|
||||
|
||||
.episode-duration {
|
||||
|
||||
@@ -1608,7 +1608,7 @@ const vRipple = {
|
||||
}
|
||||
|
||||
.semester-label {
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
margin-right: 0.75rem;
|
||||
@@ -1620,7 +1620,7 @@ const vRipple = {
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
border-radius: 8px;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
padding: 0.6rem 1rem;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
@@ -1648,8 +1648,8 @@ const vRipple = {
|
||||
}
|
||||
|
||||
.semester-select option {
|
||||
background: #1a1d24;
|
||||
color: #ffffff;
|
||||
background: var(--bg-secondary, #1a1d24);
|
||||
color: var(--text-primary, #ffffff);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
@@ -1703,14 +1703,14 @@ const vRipple = {
|
||||
}
|
||||
|
||||
.date-item:hover {
|
||||
background: #21242d;
|
||||
background: var(--bg-tertiary, #21242d);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.date-item.active {
|
||||
background: #21242d;
|
||||
color: #ffffff;
|
||||
background: var(--bg-tertiary, #21242d);
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(11, 90, 254, 0.2);
|
||||
@@ -1775,7 +1775,7 @@ const vRipple = {
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -1784,7 +1784,7 @@ const vRipple = {
|
||||
padding: 3rem;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
background: #21242d;
|
||||
background: var(--bg-tertiary, #21242d);
|
||||
margin: 1rem 0;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
display: flex;
|
||||
@@ -1819,7 +1819,7 @@ const vRipple = {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
background: #21242d;
|
||||
background: var(--bg-tertiary, #21242d);
|
||||
margin: 1rem 0;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
@@ -1869,7 +1869,7 @@ const vRipple = {
|
||||
.song-card {
|
||||
width: 320px;
|
||||
flex-shrink: 0;
|
||||
background: #21242d;
|
||||
background: var(--bg-tertiary, #21242d);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
@@ -1886,7 +1886,7 @@ const vRipple = {
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
@@ -1930,7 +1930,7 @@ const vRipple = {
|
||||
width: 100%;
|
||||
max-width: 580px;
|
||||
max-height: 85vh;
|
||||
background: #1e1e24;
|
||||
background: var(--bg-secondary, #1e1e24);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
@@ -1964,7 +1964,7 @@ const vRipple = {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
@@ -1984,7 +1984,7 @@ const vRipple = {
|
||||
|
||||
.playlist-modal-close:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
@@ -1993,7 +1993,7 @@ const vRipple = {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1.5rem;
|
||||
background: #1e1e24;
|
||||
background: var(--bg-secondary, #1e1e24);
|
||||
}
|
||||
|
||||
/* 滚动条美化 */
|
||||
@@ -2066,7 +2066,7 @@ const vRipple = {
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background: #2a2a32;
|
||||
background: var(--bg-tertiary, #2a2a32);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -2087,7 +2087,7 @@ const vRipple = {
|
||||
|
||||
.user-name {
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
@@ -2161,9 +2161,9 @@ const vRipple = {
|
||||
.custom-select,
|
||||
.custom-input {
|
||||
width: 100%;
|
||||
background: #141418;
|
||||
background: var(--bg-secondary, #141418);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
@@ -2210,7 +2210,7 @@ const vRipple = {
|
||||
|
||||
.btn-icon:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
}
|
||||
|
||||
.btn-icon:disabled {
|
||||
@@ -2421,7 +2421,7 @@ const vRipple = {
|
||||
|
||||
.song-name {
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@@ -2469,7 +2469,7 @@ const vRipple = {
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
|
||||
}
|
||||
|
||||
@@ -2488,7 +2488,7 @@ const vRipple = {
|
||||
|
||||
.btn-secondary {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
@@ -2502,7 +2502,7 @@ const vRipple = {
|
||||
|
||||
.btn-ghost:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
}
|
||||
|
||||
/* 动画定义 */
|
||||
@@ -2537,7 +2537,7 @@ const vRipple = {
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
cursor: pointer;
|
||||
margin-right: 0.5rem;
|
||||
backdrop-filter: blur(10px);
|
||||
@@ -2661,8 +2661,8 @@ const vRipple = {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #0043f8 0%, #0075f8 100%);
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
font-family: 'MiSans', sans-serif;
|
||||
@@ -2725,7 +2725,7 @@ const vRipple = {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.04em;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@@ -2824,7 +2824,7 @@ const vRipple = {
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
@@ -2919,7 +2919,7 @@ const vRipple = {
|
||||
.date-text {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
white-space: nowrap;
|
||||
text-shadow:
|
||||
0 0 10px rgba(255, 255, 255, 0.2),
|
||||
@@ -2928,7 +2928,7 @@ const vRipple = {
|
||||
|
||||
.dropdown-icon {
|
||||
opacity: 0.5;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
}
|
||||
|
||||
.mobile-action-btn {
|
||||
@@ -2937,7 +2937,7 @@ const vRipple = {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #0b5afe 0%, #0043f8 100%);
|
||||
background: linear-gradient(135deg, var(--bg-secondary, #0b5afe) 0%, #0043f8 100%);
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 15px rgba(11, 90, 254, 0.4);
|
||||
@@ -3118,7 +3118,7 @@ const vRipple = {
|
||||
font-weight: 600;
|
||||
margin-bottom: 2px;
|
||||
line-height: 1.4;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
@@ -3366,7 +3366,7 @@ const vRipple = {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
background: #21242d;
|
||||
background: var(--bg-tertiary, #21242d);
|
||||
border-radius: 10px;
|
||||
padding: 0.75rem 1rem;
|
||||
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
|
||||
@@ -3379,7 +3379,7 @@ const vRipple = {
|
||||
.date-nav-btn {
|
||||
background: rgba(11, 90, 254, 0.1);
|
||||
border: 1px solid rgba(11, 90, 254, 0.2);
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
border-radius: 50%;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
@@ -3403,7 +3403,7 @@ const vRipple = {
|
||||
font-family: 'MiSans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
white-space: pre-line;
|
||||
@@ -3453,7 +3453,7 @@ const vRipple = {
|
||||
width: 85%;
|
||||
max-width: 350px;
|
||||
max-height: 70vh;
|
||||
background: #1a1d24;
|
||||
background: var(--bg-secondary, #1a1d24);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
@@ -1691,14 +1691,14 @@ const vRipple = {
|
||||
border-radius: 12px;
|
||||
padding: 12px 16px 12px 42px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
width: 100%;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.mobile-search-input:focus {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: #3b82f6;
|
||||
border-color: var(--border-secondary, #3b82f6);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
@@ -1785,7 +1785,7 @@ const vRipple = {
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
border-bottom-color: #0b5afe;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
@@ -1834,7 +1834,7 @@ const vRipple = {
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: #21242d;
|
||||
background: var(--bg-tertiary, #21242d);
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
@@ -1845,7 +1845,7 @@ const vRipple = {
|
||||
}
|
||||
|
||||
.semester-toggle-btn:hover {
|
||||
background: #2a2e38;
|
||||
background: var(--bg-tertiary, #2a2e38);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
color: #0b5afe;
|
||||
@@ -1855,7 +1855,7 @@ const vRipple = {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
right: 0;
|
||||
background: #1a1d24;
|
||||
background: var(--bg-secondary, #1a1d24);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
@@ -1879,7 +1879,7 @@ const vRipple = {
|
||||
|
||||
.semester-option:hover {
|
||||
background: rgba(11, 90, 254, 0.1);
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
}
|
||||
|
||||
.semester-option.active {
|
||||
@@ -1925,7 +1925,7 @@ const vRipple = {
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: #21242d;
|
||||
background: var(--bg-tertiary, #21242d);
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
@@ -1934,7 +1934,7 @@ const vRipple = {
|
||||
}
|
||||
|
||||
.refresh-button:hover {
|
||||
background: #2a2e38;
|
||||
background: var(--bg-tertiary, #2a2e38);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
@@ -2028,7 +2028,7 @@ const vRipple = {
|
||||
|
||||
.song-card-main {
|
||||
padding: 1rem 0 1rem 1rem; /* 移除右侧内边距，保留左侧、上下内边距 */
|
||||
background: #21242d;
|
||||
background: var(--bg-tertiary, #21242d);
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
position: relative;
|
||||
height: 100px; /* 减小卡片高度 */
|
||||
@@ -2076,8 +2076,8 @@ const vRipple = {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #0043f8 0%, #0075f8 100%);
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
font-family: 'MiSans-Demibold', sans-serif;
|
||||
@@ -2139,7 +2139,7 @@ const vRipple = {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.04em;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
margin-bottom: 0.5rem;
|
||||
width: 100%; /* 确保标题占满整个容器宽度 */
|
||||
display: flex;
|
||||
@@ -2215,7 +2215,7 @@ const vRipple = {
|
||||
font-family: 'MiSans-Demibold', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
@@ -2231,7 +2231,7 @@ const vRipple = {
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 45px;
|
||||
background: linear-gradient(180deg, #0043f8 0%, #0075f8 100%);
|
||||
background: linear-gradient(180deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
@@ -2239,8 +2239,8 @@ const vRipple = {
|
||||
}
|
||||
|
||||
.like-button.liked {
|
||||
background: #1a1d24;
|
||||
border-color: #242f38;
|
||||
background: var(--bg-secondary, #1a1d24);
|
||||
border-color: var(--border-secondary, #242f38);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
@@ -2329,7 +2329,7 @@ const vRipple = {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #21242d;
|
||||
background: var(--bg-tertiary, #21242d);
|
||||
border-radius: 0 0 10px 10px;
|
||||
padding: 0.5rem 1rem;
|
||||
width: 95%;
|
||||
@@ -2355,7 +2355,7 @@ const vRipple = {
|
||||
font-family: 'MiSans-Demibold', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
height: 27px;
|
||||
@@ -2368,12 +2368,12 @@ const vRipple = {
|
||||
}
|
||||
|
||||
.replay-cancel-btn {
|
||||
background: linear-gradient(180deg, #0b5afe 0%, #3d7fff 100%);
|
||||
background: linear-gradient(180deg, var(--bg-secondary, #0b5afe) 0%, #3d7fff 100%);
|
||||
min-width: 75px;
|
||||
}
|
||||
|
||||
.replay-request-btn {
|
||||
background: linear-gradient(180deg, #0b5afe 0%, #3d7fff 100%);
|
||||
background: linear-gradient(180deg, var(--bg-secondary, #0b5afe) 0%, #3d7fff 100%);
|
||||
min-width: 75px;
|
||||
}
|
||||
|
||||
@@ -2408,13 +2408,13 @@ button:disabled {
|
||||
border-radius: 4px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.page-number.active {
|
||||
background: #0b5afe;
|
||||
background: var(--bg-secondary, #0b5afe);
|
||||
border-color: #0b5afe;
|
||||
}
|
||||
|
||||
@@ -2444,7 +2444,7 @@ button:disabled {
|
||||
border-radius: 4px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
transition: all 0.2s ease;
|
||||
@@ -2467,7 +2467,7 @@ button:disabled {
|
||||
border-radius: 4px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
@@ -2705,7 +2705,7 @@ button:disabled {
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
line-height: 1.2;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
@@ -2930,7 +2930,7 @@ button:disabled {
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -2964,7 +2964,7 @@ button:disabled {
|
||||
width: 40px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #fff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
@@ -2991,7 +2991,7 @@ button:disabled {
|
||||
|
||||
.page-nav-btn:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: #3b82f6;
|
||||
border-color: var(--border-secondary, #3b82f6);
|
||||
}
|
||||
|
||||
.page-nav-btn:disabled {
|
||||
|
||||
@@ -1528,7 +1528,7 @@ const getFirstChar = (text) => {
|
||||
|
||||
.mobile-top-progress .progress-fill {
|
||||
height: 100%;
|
||||
background: #0b5afe;
|
||||
background: var(--bg-secondary, #0b5afe);
|
||||
box-shadow: 0 0 8px rgba(11, 90, 254, 0.6);
|
||||
border-radius: 0 1px 1px 0;
|
||||
}
|
||||
@@ -1729,7 +1729,7 @@ const getFirstChar = (text) => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
font-family:
|
||||
@@ -1756,7 +1756,7 @@ const getFirstChar = (text) => {
|
||||
line-height: 22px;
|
||||
padding-bottom: 2px;
|
||||
letter-spacing: -0.4px;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-family:
|
||||
'SF Pro', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimHei, Arial, Helvetica,
|
||||
sans-serif;
|
||||
@@ -1776,7 +1776,7 @@ const getFirstChar = (text) => {
|
||||
overflow: hidden;
|
||||
line-height: 20px;
|
||||
letter-spacing: -0.4px;
|
||||
color: #ffffff75;
|
||||
color: var(--text-primary, #ffffff)75;
|
||||
font-family:
|
||||
'SF Pro', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimHei, Arial, Helvetica,
|
||||
sans-serif;
|
||||
@@ -1797,7 +1797,7 @@ const getFirstChar = (text) => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 100px;
|
||||
background: #00000042;
|
||||
background: var(--bg-primary, #111111)42;
|
||||
padding: 6px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
@@ -1814,7 +1814,7 @@ const getFirstChar = (text) => {
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
font-family:
|
||||
@@ -1851,7 +1851,7 @@ const getFirstChar = (text) => {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
border: 1px solid #1a1a1a;
|
||||
border: 1px solid var(--border-secondary, #1a1a1a);
|
||||
border-radius: 7px;
|
||||
height: 8px;
|
||||
width: 100%;
|
||||
@@ -1864,14 +1864,14 @@ const getFirstChar = (text) => {
|
||||
}
|
||||
|
||||
.ios-progress-bar:hover {
|
||||
border-color: #333;
|
||||
border-color: var(--border-secondary, #333);
|
||||
box-shadow:
|
||||
0 0 20px rgba(255, 255, 255, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
background: linear-gradient(90deg, #ffffffb2, #ffffff);
|
||||
background: linear-gradient(90deg, var(--card-bg, #ffffff)b2, #ffffff);
|
||||
height: 8px;
|
||||
transition: width 0.1s linear;
|
||||
border-radius: 7px;
|
||||
@@ -1916,7 +1916,7 @@ const getFirstChar = (text) => {
|
||||
}
|
||||
|
||||
.clickable-time:hover {
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
@@ -1931,10 +1931,10 @@ const getFirstChar = (text) => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #ffffff1a;
|
||||
background: var(--card-bg, #ffffff)1a;
|
||||
border-radius: 4px;
|
||||
padding: 0 8px;
|
||||
color: #ffffffb3;
|
||||
color: var(--text-primary, #ffffff)b3;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
backdrop-filter: blur(10px);
|
||||
@@ -1944,8 +1944,8 @@ const getFirstChar = (text) => {
|
||||
}
|
||||
|
||||
.audio-quality-badge:hover {
|
||||
background: #ffffff26;
|
||||
color: #ffffff;
|
||||
background: var(--card-bg, #ffffff)26;
|
||||
color: var(--text-primary, #ffffff);
|
||||
}
|
||||
|
||||
/* 控制按钮区域 */
|
||||
@@ -1962,7 +1962,7 @@ const getFirstChar = (text) => {
|
||||
.ios-control-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #ffffff92;
|
||||
color: var(--text-primary, #ffffff)92;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
display: flex;
|
||||
@@ -1997,7 +1997,7 @@ const getFirstChar = (text) => {
|
||||
}
|
||||
|
||||
.ios-control-btn:hover {
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
transform: scale(1.1);
|
||||
box-shadow:
|
||||
0 0 20px rgba(255, 255, 255, 0.2),
|
||||
@@ -2196,7 +2196,7 @@ const getFirstChar = (text) => {
|
||||
width: 60px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0.42px;
|
||||
color: #ffffffb3;
|
||||
color: var(--text-primary, #ffffff)b3;
|
||||
font-family:
|
||||
'SF Pro', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimHei, Arial, Helvetica,
|
||||
sans-serif;
|
||||
@@ -2215,10 +2215,10 @@ const getFirstChar = (text) => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #ffffff1a;
|
||||
background: var(--card-bg, #ffffff)1a;
|
||||
border-radius: 4px;
|
||||
padding: 0 8px;
|
||||
color: #ffffffb3;
|
||||
color: var(--text-primary, #ffffff)b3;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
backdrop-filter: blur(10px);
|
||||
@@ -2228,8 +2228,8 @@ const getFirstChar = (text) => {
|
||||
}
|
||||
|
||||
.audio-quality:hover {
|
||||
background: #ffffff26;
|
||||
color: #ffffff;
|
||||
background: var(--card-bg, #ffffff)26;
|
||||
color: var(--text-primary, #ffffff);
|
||||
}
|
||||
|
||||
.audio-quality:active {
|
||||
@@ -2251,13 +2251,13 @@ const getFirstChar = (text) => {
|
||||
width: 39px;
|
||||
font-size: 25px;
|
||||
text-align: center;
|
||||
color: #ffffff92;
|
||||
color: var(--text-primary, #ffffff)92;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.lyrics-btn:hover {
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
@@ -2265,7 +2265,7 @@ const getFirstChar = (text) => {
|
||||
.control-btn {
|
||||
line-height: 1;
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
@@ -2290,7 +2290,7 @@ const getFirstChar = (text) => {
|
||||
.play-pause-btn {
|
||||
line-height: 44px;
|
||||
font-size: 37px;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
|
||||
@@ -216,7 +216,7 @@ onUnmounted(() => {
|
||||
background: transparent;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #27272a;
|
||||
background: var(--bg-tertiary, #27272a);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
|
||||
@@ -1136,7 +1136,7 @@ onUnmounted(() => {
|
||||
.default-cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #333, #555);
|
||||
background: linear-gradient(135deg, var(--bg-quaternary, #333333), #555);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -1152,7 +1152,7 @@ onUnmounted(() => {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.02em;
|
||||
white-space: normal;
|
||||
@@ -1246,7 +1246,7 @@ onUnmounted(() => {
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: #ffffff;
|
||||
background: var(--card-bg, #ffffff);
|
||||
border-radius: 3px;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -1256,7 +1256,7 @@ onUnmounted(() => {
|
||||
top: 50%;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: #ffffff;
|
||||
background: var(--card-bg, #ffffff);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
transition: transform 0.1s ease;
|
||||
@@ -1306,7 +1306,7 @@ onUnmounted(() => {
|
||||
|
||||
.secondary-btn.active {
|
||||
opacity: 1;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
@@ -1472,7 +1472,7 @@ onUnmounted(() => {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
color: #333; /* 深色文字 */
|
||||
color: var(--text-quaternary, #333333); /* 深色文字 */
|
||||
padding: 8px 12px; /* 减小内边距 */
|
||||
border-radius: 8px;
|
||||
font-size: 0.85rem; /* 稍微减小字体 */
|
||||
@@ -1490,7 +1490,7 @@ onUnmounted(() => {
|
||||
|
||||
.badge-quality-option.active {
|
||||
color: #007aff; /* 蓝色字 */
|
||||
background: #ffffff;
|
||||
background: var(--card-bg, #ffffff);
|
||||
font-weight: 600;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
@@ -1522,7 +1522,7 @@ onUnmounted(() => {
|
||||
width: 20px;
|
||||
height: 5px;
|
||||
border-radius: 3px;
|
||||
background: #ffffff;
|
||||
background: var(--card-bg, #ffffff);
|
||||
box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
@@ -1759,7 +1759,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
background: #ffffff;
|
||||
background: var(--card-bg, #ffffff);
|
||||
}
|
||||
|
||||
.progress-thumb {
|
||||
|
||||
@@ -70,8 +70,8 @@ defineEmits(['close'])
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
background: #21242d;
|
||||
color: #ffffff;
|
||||
background: var(--bg-tertiary, #21242d);
|
||||
color: var(--text-primary, #ffffff);
|
||||
max-width: 400px;
|
||||
min-width: 300px;
|
||||
font-family: 'MiSans', sans-serif;
|
||||
@@ -79,7 +79,7 @@ defineEmits(['close'])
|
||||
}
|
||||
|
||||
.notification.success {
|
||||
border-left: 4px solid #10b981;
|
||||
border-left: 4px solid var(--border-secondary, #10b981);
|
||||
}
|
||||
|
||||
.notification.error {
|
||||
@@ -140,7 +140,7 @@ defineEmits(['close'])
|
||||
}
|
||||
|
||||
.notification-close:hover {
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
}
|
||||
|
||||
/* 进度条 */
|
||||
@@ -161,7 +161,7 @@ defineEmits(['close'])
|
||||
}
|
||||
|
||||
.success .notification-progress-bar {
|
||||
background-color: #10b981;
|
||||
background-color: var(--bg-secondary, #10b981);
|
||||
}
|
||||
|
||||
.error .notification-progress-bar {
|
||||
@@ -169,7 +169,7 @@ defineEmits(['close'])
|
||||
}
|
||||
|
||||
.info .notification-progress-bar {
|
||||
background-color: #0b5afe;
|
||||
background-color: var(--bg-secondary, #0b5afe);
|
||||
}
|
||||
|
||||
@keyframes progress-shrink {
|
||||
|
||||
@@ -82,8 +82,8 @@ onMounted(() => {
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
background: #21242d;
|
||||
color: #ffffff;
|
||||
background: var(--bg-tertiary, #21242d);
|
||||
color: var(--text-primary, #ffffff);
|
||||
max-width: 400px;
|
||||
min-width: 300px;
|
||||
font-family: 'MiSans', sans-serif;
|
||||
@@ -94,7 +94,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.notification-item.success {
|
||||
border-left: 4px solid #10b981;
|
||||
border-left: 4px solid var(--border-secondary, #10b981);
|
||||
}
|
||||
|
||||
.notification-item.error {
|
||||
@@ -158,7 +158,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.notification-close:hover {
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
}
|
||||
|
||||
/* 进度条 */
|
||||
@@ -179,7 +179,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.success .notification-progress-bar {
|
||||
background-color: #10b981;
|
||||
background-color: var(--bg-secondary, #10b981);
|
||||
}
|
||||
|
||||
.error .notification-progress-bar {
|
||||
@@ -187,7 +187,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.info .notification-progress-bar {
|
||||
background-color: #0b5afe;
|
||||
background-color: var(--bg-secondary, #0b5afe);
|
||||
}
|
||||
|
||||
@keyframes progress-shrink {
|
||||
|
||||
@@ -359,15 +359,15 @@ onMounted(() => {
|
||||
z-index: 9999;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 0, 0, 0.5);
|
||||
border: 2px solid #3b82f6;
|
||||
border: 2px solid var(--border-secondary, #3b82f6);
|
||||
pointer-events: none;
|
||||
transition: all 0.4s ease;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tour-popover {
|
||||
background: #18181b;
|
||||
border: 1px solid #27272a;
|
||||
background: var(--bg-secondary, #18181b);
|
||||
border: 1px solid var(--border-secondary, #27272a);
|
||||
border-radius: 12px;
|
||||
padding: 1.25rem;
|
||||
width: 320px;
|
||||
@@ -440,9 +440,9 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.tour-btn-secondary {
|
||||
background: #27272a;
|
||||
background: var(--bg-tertiary, #27272a);
|
||||
color: #d4d4d8;
|
||||
border: 1px solid #3f3f46;
|
||||
border: 1px solid var(--border-secondary, #3f3f46);
|
||||
}
|
||||
|
||||
.tour-btn-secondary:hover {
|
||||
@@ -456,6 +456,6 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.tour-btn-primary:hover {
|
||||
background: #2563eb;
|
||||
background: var(--bg-tertiary, #2563eb);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -43,7 +43,7 @@ defineProps({
|
||||
.bg-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to top, #000, transparent, transparent);
|
||||
background: linear-gradient(to top, var(--bg-primary, #111111), transparent, transparent);
|
||||
opacity: 0.8;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@@ -74,7 +74,7 @@ const formatDate = (dateStr) => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background-color: #000;
|
||||
background-color: var(--bg-primary, #111111);
|
||||
}
|
||||
|
||||
.bg-blur {
|
||||
@@ -120,7 +120,7 @@ const formatDate = (dateStr) => {
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #fff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-weight: 700;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
@@ -141,7 +141,7 @@ const formatDate = (dateStr) => {
|
||||
overflow: hidden;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: #111827;
|
||||
background: var(--bg-secondary, #111827);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -181,7 +181,7 @@ const formatDate = (dateStr) => {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #fff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
}
|
||||
|
||||
.song-artist {
|
||||
|
||||
@@ -31,7 +31,7 @@ defineProps({
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background: radial-gradient(circle at center, #111827, #000000);
|
||||
background: radial-gradient(circle at center, var(--bg-secondary, #111827), #000000);
|
||||
}
|
||||
|
||||
.blob {
|
||||
|
||||
@@ -54,7 +54,7 @@ const formatPlatform = (platform) => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background-color: #111827; /* gray-900 */
|
||||
background-color: var(--bg-secondary, #111827); /* gray-900 */
|
||||
}
|
||||
|
||||
.bg-gradient {
|
||||
@@ -63,7 +63,7 @@ const formatPlatform = (platform) => {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
background: linear-gradient(to bottom, #1f2937, transparent);
|
||||
background: linear-gradient(to bottom, var(--bg-secondary, #1f2937), transparent);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
|
||||
@@ -56,13 +56,13 @@ defineEmits(['share'])
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background-color: #000;
|
||||
background-color: var(--bg-primary, #111111);
|
||||
}
|
||||
|
||||
.bg-gradient {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(circle at center, #1f2937, #000, #000);
|
||||
background: radial-gradient(circle at center, var(--bg-secondary, #1f2937), #000, #000);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@@ -132,8 +132,8 @@ defineEmits(['share'])
|
||||
width: 100%;
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 9999px;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
background: var(--card-bg, #fff);
|
||||
color: var(--text-primary, #000);
|
||||
font-weight: 700;
|
||||
font-size: 1.125rem;
|
||||
overflow: hidden;
|
||||
@@ -173,7 +173,7 @@ defineEmits(['share'])
|
||||
border-radius: 9999px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-weight: 700;
|
||||
font-size: 1.125rem;
|
||||
backdrop-filter: blur(12px);
|
||||
|
||||
@@ -63,7 +63,7 @@ defineExpose({
|
||||
height: 100%;
|
||||
min-height: 600px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
|
||||
background: linear-gradient(135deg, var(--bg-secondary, #0f0f23) 0%, #1a1a2e 50%, #16213e 100%);
|
||||
}
|
||||
|
||||
.card-background {
|
||||
@@ -127,7 +127,7 @@ defineExpose({
|
||||
.main-title {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 900;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #e5e7eb 50%, #9ca3af 100%);
|
||||
background: linear-gradient(135deg, var(--card-bg, #ffffff) 0%, #e5e7eb 50%, #9ca3af 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
|
||||
Reference in New Issue
Block a user