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;
|
||||
|
||||
@@ -195,7 +195,7 @@ onMounted(async () => {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
|
||||
background: linear-gradient(135deg, var(--card-bg, #ffffff) 0%, #f0f0f0 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
|
||||
+6
-6
@@ -1910,7 +1910,7 @@ if (
|
||||
height: 18px;
|
||||
border-radius: 9px;
|
||||
background-color: var(--error, #ef4444);
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
@@ -3405,7 +3405,7 @@ if (
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.35);
|
||||
z-index: 2;
|
||||
transform: rotate(-5deg);
|
||||
@@ -3485,7 +3485,7 @@ if (
|
||||
background: var(--primary, #0b5afe);
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
@@ -3600,7 +3600,7 @@ if (
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #0b5afe;
|
||||
background-color: var(--bg-secondary, #0b5afe);
|
||||
display: inline-block;
|
||||
z-index: 2;
|
||||
}
|
||||
@@ -3664,9 +3664,9 @@ if (
|
||||
}
|
||||
|
||||
.login-button {
|
||||
background: linear-gradient(180deg, #0043f8 0%, #0075f8 100%);
|
||||
background: linear-gradient(180deg, var(--bg-secondary, #0043f8) 0%, #0075f8 100%);
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary, #ffffff);
|
||||
padding: 10px 20px;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
|
||||
@@ -211,8 +211,8 @@ const handleTouchEnd = (e) => {
|
||||
.review-page {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
background-color: var(--bg-primary, #111111);
|
||||
color: var(--text-primary, #ffffff);
|
||||
z-index: 9999;
|
||||
font-family:
|
||||
'MiSans',
|
||||
@@ -230,7 +230,7 @@ const handleTouchEnd = (e) => {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #000;
|
||||
background-color: var(--bg-primary, #111111);
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
@@ -285,7 +285,7 @@ const handleTouchEnd = (e) => {
|
||||
.empty .empty-icon-circle {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
background: #111827;
|
||||
background: var(--bg-secondary, #111827);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -364,7 +364,7 @@ const handleTouchEnd = (e) => {
|
||||
|
||||
.indicator-dot.active {
|
||||
height: 1.5rem;
|
||||
background: #fff;
|
||||
background: var(--card-bg, #fff);
|
||||
}
|
||||
|
||||
/* 滚动提示 */
|
||||
|
||||
+128
@@ -0,0 +1,128 @@
|
||||
import fs from 'fs/promises';
|
||||
import path from 'path';
|
||||
|
||||
async function walk(dir) {
|
||||
const files = await fs.readdir(dir, { withFileTypes: true });
|
||||
let results = [];
|
||||
for (const file of files) {
|
||||
const res = path.resolve(dir, file.name);
|
||||
if (file.isDirectory()) {
|
||||
results = results.concat(await walk(res));
|
||||
} else if (file.name.endsWith('.vue')) {
|
||||
results.push(res);
|
||||
}
|
||||
}
|
||||
return results;
|
||||
}
|
||||
|
||||
async function fixColors() {
|
||||
const dirs = [path.resolve('app', 'components'), path.resolve('app', 'pages'), path.resolve('app', 'layouts')];
|
||||
let files = [];
|
||||
for (const dir of dirs) {
|
||||
try {
|
||||
files = files.concat(await walk(dir));
|
||||
} catch (e) {
|
||||
// Ignore if dir doesn't exist
|
||||
}
|
||||
}
|
||||
|
||||
for (const file of files) {
|
||||
let content = await fs.readFile(file, 'utf-8');
|
||||
let original = content;
|
||||
|
||||
// Generic regex for hardcoded grayscales in styles
|
||||
const grayscales = {
|
||||
'#000000': 'var(--bg-primary, #111111)',
|
||||
'#000': 'var(--bg-primary, #111111)',
|
||||
'#111111': 'var(--bg-primary, #111111)',
|
||||
'#111': 'var(--bg-primary, #111111)',
|
||||
'#1a1a1a': 'var(--bg-secondary, #1a1a1a)',
|
||||
'#222222': 'var(--bg-tertiary, #222222)',
|
||||
'#222': 'var(--bg-tertiary, #222222)',
|
||||
'#2a2a2a': 'var(--bg-tertiary, #2a2a2a)',
|
||||
'#333333': 'var(--bg-quaternary, #333333)',
|
||||
'#333': 'var(--bg-quaternary, #333333)',
|
||||
'#3a3a3a': 'var(--bg-quaternary, #3a3a3a)',
|
||||
'#444444': 'var(--text-disabled, #444444)',
|
||||
'#444': 'var(--text-disabled, #444444)',
|
||||
'#666666': 'var(--text-quaternary, #666666)',
|
||||
'#666': 'var(--text-quaternary, #666666)',
|
||||
'#888888': 'var(--text-tertiary, #888888)',
|
||||
'#888': 'var(--text-tertiary, #888888)',
|
||||
'#999999': 'var(--text-tertiary, #999999)',
|
||||
'#999': 'var(--text-tertiary, #999999)',
|
||||
'#aaaaaa': 'var(--text-secondary, #aaaaaa)',
|
||||
'#aaa': 'var(--text-secondary, #aaaaaa)',
|
||||
'#cccccc': 'var(--text-secondary, #cccccc)',
|
||||
'#ccc': 'var(--text-secondary, #cccccc)',
|
||||
'#dddddd': 'var(--border-secondary, #dddddd)',
|
||||
'#ddd': 'var(--border-secondary, #dddddd)',
|
||||
'#eeeeee': 'var(--border-primary, #eeeeee)',
|
||||
'#eee': 'var(--border-primary, #eeeeee)',
|
||||
'#ffffff': 'var(--text-primary, #ffffff)',
|
||||
'#fff': 'var(--text-primary, #ffffff)'
|
||||
};
|
||||
|
||||
// We only want to replace inside <style> blocks.
|
||||
const styleBlocks = content.match(/<style[^>]*>[\s\S]*?<\/style>/gi);
|
||||
if (styleBlocks) {
|
||||
for (const block of styleBlocks) {
|
||||
let newBlock = block;
|
||||
|
||||
// Match CSS properties like background: #1a1a1a;
|
||||
newBlock = newBlock.replace(/(background(-color)?|color|border(-color)?|border-(top|right|bottom|left)(-color)?|fill|stroke):\s*([^;}]*?)(#[0-9a-fA-F]{3,6})/gi, (match, p1, p2, p3, p4, p5, p6, hex) => {
|
||||
const hexLower = hex.toLowerCase();
|
||||
|
||||
// Don't replace if it's already inside a var()
|
||||
if (p6.includes('var(')) return match;
|
||||
|
||||
let replacement = hex;
|
||||
|
||||
if (grayscales[hexLower]) {
|
||||
// Determine if it's a background, border, or text color
|
||||
if (p1.startsWith('border')) {
|
||||
replacement = `var(--border-secondary, ${hexLower})`;
|
||||
} else if (p1.startsWith('background')) {
|
||||
if (hexLower === '#ffffff' || hexLower === '#fff') {
|
||||
replacement = `var(--card-bg, ${hexLower})`; // White background is usually a card
|
||||
} else {
|
||||
replacement = grayscales[hexLower].replace('text', 'bg'); // Force bg variables for background
|
||||
}
|
||||
} else if (p1 === 'color') {
|
||||
if (['#000000', '#000', '#111111', '#111', '#1a1a1a', '#222222', '#222', '#2a2a2a'].includes(hexLower)) {
|
||||
replacement = `var(--text-primary, ${hexLower})`;
|
||||
} else {
|
||||
replacement = grayscales[hexLower].replace('bg', 'text'); // Force text variables for color
|
||||
}
|
||||
} else {
|
||||
replacement = grayscales[hexLower];
|
||||
}
|
||||
} else {
|
||||
// Heuristic for unknown grayscales or dark colors
|
||||
// Check if it's a dark shade (e.g. #040e15, #242f38)
|
||||
if (p1.startsWith('background') && match.match(/#0[0-9a-f]{5}/i)) {
|
||||
replacement = `var(--bg-secondary, ${hexLower})`;
|
||||
} else if (p1.startsWith('background') && match.match(/#1[0-9a-f]{5}/i)) {
|
||||
replacement = `var(--bg-secondary, ${hexLower})`;
|
||||
} else if (p1.startsWith('background') && match.match(/#2[0-9a-f]{5}/i)) {
|
||||
replacement = `var(--bg-tertiary, ${hexLower})`;
|
||||
} else if (p1.startsWith('border') && match.match(/#[1-4][0-9a-f]{5}/i)) {
|
||||
replacement = `var(--border-secondary, ${hexLower})`;
|
||||
}
|
||||
}
|
||||
|
||||
return `${p1}: ${p6}${replacement}`;
|
||||
});
|
||||
|
||||
content = content.replace(block, newBlock);
|
||||
}
|
||||
}
|
||||
|
||||
if (content !== original) {
|
||||
await fs.writeFile(file, content, 'utf-8');
|
||||
console.log('Fixed', file);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fixColors().catch(console.error);
|
||||
+3661
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,447 @@
|
||||
import wasm from 'vite-plugin-wasm'
|
||||
import glsl from 'vite-plugin-glsl'
|
||||
import { fileURLToPath } from 'url'
|
||||
import { index, uniqueIndex } from 'drizzle-orm'
|
||||
|
||||
const customSeoConfig: Record<string, unknown> | null = (() => {
|
||||
const raw = process.env.NUXT_PUBLIC_SEO_CONFIG
|
||||
if (!raw) return null
|
||||
try {
|
||||
const parsed = JSON.parse(raw)
|
||||
if (parsed && typeof parsed === 'object') return parsed as Record<string, unknown>
|
||||
return null
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
})()
|
||||
|
||||
function readNumberEnv(name: string, defaultValue: number): number {
|
||||
const raw = process.env[name]
|
||||
if (raw === undefined || raw === '') return defaultValue
|
||||
const num = Number(raw)
|
||||
return Number.isFinite(num) ? num : defaultValue
|
||||
}
|
||||
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
compatibilityDate: '2026-01-30',
|
||||
future: {
|
||||
compatibilityVersion: 4
|
||||
},
|
||||
srcDir: 'app',
|
||||
serverDir: fileURLToPath(new URL('./server', import.meta.url)),
|
||||
dir: {
|
||||
public: fileURLToPath(new URL('./public', import.meta.url))
|
||||
},
|
||||
devtools: { enabled: process.env.NODE_ENV === 'development' },
|
||||
devServer: {
|
||||
host: '0.0.0.0',
|
||||
port: 3000
|
||||
},
|
||||
modules: [
|
||||
'@nuxtjs/tailwindcss',
|
||||
...((process.env.NODE_ENV === 'development' || process.env.npm_lifecycle_event?.includes('lint'))
|
||||
? ['@nuxt/eslint']
|
||||
: []),
|
||||
...((process.env.PWA_ENABLED || 'false') === 'true'
|
||||
? ['@vite-pwa/nuxt']
|
||||
: [])
|
||||
],
|
||||
|
||||
pwa: (process.env.PWA_ENABLED || 'false') === 'true'
|
||||
? {
|
||||
registerType: 'autoUpdate',
|
||||
manifest: {
|
||||
name: process.env.NUXT_PUBLIC_SITE_TITLE || '鏍″洯骞挎挱绔欑偣姝岀郴缁?,
|
||||
short_name: process.env.NUXT_PUBLIC_SITE_TITLE || 'VoiceHub',
|
||||
description: process.env.NUXT_PUBLIC_SITE_DESCRIPTION || '鏍″洯骞挎挱绔欑偣姝岀郴缁?,
|
||||
display: (process.env.PWA_DISPLAY as any) || 'standalone',
|
||||
background_color: process.env.PWA_BACKGROUND_COLOR || '#000000',
|
||||
theme_color: process.env.PWA_THEME_COLOR || '#111111',
|
||||
icons: [
|
||||
{
|
||||
src: '/images/logo.png',
|
||||
sizes: '192x192',
|
||||
type: 'image/png'
|
||||
},
|
||||
{
|
||||
src: '/images/logo.png',
|
||||
sizes: '512x512',
|
||||
type: 'image/png'
|
||||
}
|
||||
]
|
||||
},
|
||||
workbox: {
|
||||
navigateFallback: '/',
|
||||
globPatterns: ['**/*.{js,css,html,png,jpg,jpeg,svg,ico,webp,woff2}']
|
||||
},
|
||||
client: {
|
||||
installPrompt: true,
|
||||
periodicSyncForUpdates: 3600
|
||||
},
|
||||
devOptions: {
|
||||
enabled: process.env.NODE_ENV === 'development'
|
||||
}
|
||||
}
|
||||
: {},
|
||||
|
||||
// 寮曞叆鍏ㄥ眬CSS
|
||||
css: [
|
||||
'~/assets/css/variables.css',
|
||||
'~/assets/css/components.css',
|
||||
'~/assets/css/main.css',
|
||||
'~/assets/css/transitions.css',
|
||||
'~/assets/css/mobile-admin.css',
|
||||
'~/assets/css/print-fix.css',
|
||||
'~/assets/css/sf-pro-icons.css'
|
||||
],
|
||||
|
||||
build: {
|
||||
transpile: []
|
||||
},
|
||||
|
||||
// 瀹為獙鎬т紭鍖栧姛鑳? experimental: {
|
||||
payloadExtraction: true,
|
||||
renderJsonPayloads: true,
|
||||
viewTransition: true
|
||||
},
|
||||
|
||||
// 閰嶇疆杩愯鏃堕厤缃? runtimeConfig: {
|
||||
// 鏈嶅姟鍣ㄧ鏈夐敭锛堜笉浼氭毚闇插埌瀹㈡埛绔級
|
||||
jwtSecret: process.env.JWT_SECRET || 'your-secret-key',
|
||||
// Redis閰嶇疆锛堝彲閫夛級
|
||||
redisUrl: process.env.REDIS_URL || '',
|
||||
redisKeyPrefix: process.env.REDIS_KEY_PREFIX || '',
|
||||
// Sentry 鏈嶅姟绔厤缃紙涓嶄細鏆撮湶鍒板鎴风锛? sentry: {
|
||||
serverDsn: process.env.SENTRY_SERVER_DSN || process.env.SENTRY_DSN || '',
|
||||
dsn: process.env.SENTRY_DSN || '',
|
||||
errorSampleRate: readNumberEnv('SENTRY_ERROR_SAMPLE_RATE', 1.0),
|
||||
tracesSampleRate: readNumberEnv('SENTRY_TRACES_SAMPLE_RATE', 1.0),
|
||||
replaySessionSampleRate: readNumberEnv('SENTRY_REPLAY_SESSION_SAMPLE_RATE', 0),
|
||||
replayOnErrorSampleRate: readNumberEnv('SENTRY_REPLAY_ON_ERROR_SAMPLE_RATE', 0),
|
||||
release: process.env.SENTRY_RELEASE || '',
|
||||
environment: process.env.SENTRY_ENVIRONMENT || process.env.NODE_ENV || 'production'
|
||||
},
|
||||
// 鍏叡閿紙浼氭毚闇插埌瀹㈡埛绔級
|
||||
public: {
|
||||
host: process.env.NUXT_PUBLIC_HOST || '',
|
||||
apiBase: '/api',
|
||||
oauth: {
|
||||
github: !!process.env.GITHUB_CLIENT_ID,
|
||||
casdoor: !!process.env.CASDOOR_CLIENT_ID,
|
||||
google: !!process.env.GOOGLE_CLIENT_ID,
|
||||
aggregate: !!process.env.AGGREGATE_OAUTH_APP_ID
|
||||
},
|
||||
siteTitle: process.env.NUXT_PUBLIC_SITE_TITLE || '鏍″洯骞挎挱绔欑偣姝岀郴缁?,
|
||||
siteLogo: process.env.NUXT_PUBLIC_SITE_LOGO || '',
|
||||
siteDescription:
|
||||
process.env.NUXT_PUBLIC_SITE_DESCRIPTION || '鏍″洯骞挎挱绔欑偣姝岀郴缁?- 璁╀綘鐨勫０闊宠鍚',
|
||||
isNetlify: process.env.NETLIFY === 'true',
|
||||
// SEO 鑷畾涔夐厤缃紙閫氳繃 NUXT_PUBLIC_SEO_CONFIG 娉ㄥ叆 JSON 瀛楃涓诧級
|
||||
seoConfig: customSeoConfig ?? {},
|
||||
// 鍥惧舰楠岃瘉鐮佺浉鍏? captcha: {
|
||||
enabled: (process.env.CAPTCHA_ENABLED || 'false') === 'true',
|
||||
provider: process.env.CAPTCHA_PROVIDER || 'turnstile',
|
||||
siteKey: process.env.CAPTCHA_SITE_KEY || ''
|
||||
},
|
||||
// PWA 鐩稿叧缁撴瀯锛堟湰鍦颁笉鍚敤妯″潡锛屼絾淇濈暀閰嶇疆椤逛互渚夸笂灞傚簲鐢ㄤ娇鐢級
|
||||
pwa: {
|
||||
enabled: (process.env.PWA_ENABLED || 'false') === 'true',
|
||||
display: process.env.PWA_DISPLAY || 'standalone',
|
||||
backgroundColor: process.env.PWA_BACKGROUND_COLOR || '#000000',
|
||||
themeColor: process.env.PWA_THEME_COLOR || '#111111'
|
||||
},
|
||||
// 涓婚閰嶇疆
|
||||
defaultTheme: process.env.NUXT_PUBLIC_DEFAULT_THEME || 'ClassicLight',
|
||||
enabledThemes: (process.env.NUXT_PUBLIC_ENABLED_THEMES || 'ClassicLight,ModernLight')
|
||||
.split(',')
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean),
|
||||
// Sentry 瀹㈡埛绔厤缃紙浠呭叕寮€ DSN 涓庨噰鏍风巼锛? sentry: {
|
||||
dsn: process.env.SENTRY_DSN || '',
|
||||
tracesSampleRate: readNumberEnv('SENTRY_TRACES_SAMPLE_RATE', 1.0),
|
||||
replaySessionSampleRate: readNumberEnv('SENTRY_REPLAY_SESSION_SAMPLE_RATE', 0),
|
||||
replayOnErrorSampleRate: readNumberEnv('SENTRY_REPLAY_ON_ERROR_SAMPLE_RATE', 0)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 閰嶇疆鐜鍙橀噺
|
||||
app: {
|
||||
head: {
|
||||
title: process.env.NUXT_PUBLIC_SITE_TITLE || '鏍″洯骞挎挱绔欑偣姝岀郴缁?,
|
||||
htmlAttrs: { lang: 'zh-CN' },
|
||||
meta: [
|
||||
{ charset: 'utf-8' },
|
||||
{
|
||||
name: 'viewport',
|
||||
content:
|
||||
'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover'
|
||||
},
|
||||
{
|
||||
name: 'description',
|
||||
content:
|
||||
process.env.NUXT_PUBLIC_SITE_DESCRIPTION || '鏍″洯骞挎挱绔欑偣姝岀郴缁?- 璁╀綘鐨勫０闊宠鍚'
|
||||
},
|
||||
// 绉诲姩绔紭鍖? { name: 'theme-color', content: '#111111' },
|
||||
{
|
||||
name: 'x-default-theme',
|
||||
content: process.env.NUXT_PUBLIC_DEFAULT_THEME || 'ClassicLight'
|
||||
},
|
||||
{
|
||||
name: 'x-enabled-themes',
|
||||
content: process.env.NUXT_PUBLIC_ENABLED_THEMES || 'ClassicLight,ModernLight'
|
||||
},
|
||||
{ name: 'apple-mobile-web-app-capable', content: 'yes' },
|
||||
{ name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
|
||||
{ name: 'apple-mobile-web-app-title', content: 'VoiceHub绠＄悊' },
|
||||
{ name: 'mobile-web-app-capable', content: 'yes' },
|
||||
{ name: 'format-detection', content: 'telephone=no' }
|
||||
],
|
||||
script: [
|
||||
{
|
||||
type: 'text/javascript',
|
||||
tagPosition: 'head',
|
||||
children: [
|
||||
`(function(){try{`,
|
||||
` var k='voicehub:theme', d=document, r=d.documentElement, s=null, eff=null, def=null, list=[];`,
|
||||
` try{`,
|
||||
` var mt=d.querySelector('meta[name="x-enabled-themes"]');`,
|
||||
` if(mt && mt.content){list=String(mt.content).split(',').map(function(x){return x.replace(/^\\s+|\\s+$/g,'')}).filter(Boolean)}`,
|
||||
` }catch(e){list=[]}`,
|
||||
` try{`,
|
||||
` var md=d.querySelector('meta[name="x-default-theme"]');`,
|
||||
` if(md && md.content){def=md.content}`,
|
||||
` }catch(e){def=null}`,
|
||||
` if(!def){def='ClassicLight'}`,
|
||||
` if(list.length===0){list=['ClassicLight','ModernLight']}`,
|
||||
` function valid(t){`,
|
||||
` if(list.indexOf(t)!==-1){return t}`,
|
||||
` if(list.indexOf(def)!==-1){return def}`,
|
||||
` return list[0]`,
|
||||
` }`,
|
||||
` try{s=localStorage.getItem(k)}catch(e){s=null}`,
|
||||
` if(!s){s=def}`,
|
||||
` else{s=valid(s)}`,
|
||||
` if(typeof s==='string' && (s==='System'||s==='system')){eff=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'}`,
|
||||
` else if(typeof s==='string'){eff=s.endsWith('Dark')||s==='dark'?'dark':(s.endsWith('Light')||s==='light'?'light':s)}`,
|
||||
` else{eff='light'}`,
|
||||
` r.setAttribute('data-theme', (typeof s==='string'?s:eff));`,
|
||||
` if(eff==='dark'){r.classList.add('dark'); r.classList.remove('light'); r.style.colorScheme='dark'}`,
|
||||
` else if(eff==='light'){r.classList.add('light'); r.classList.remove('dark'); r.style.colorScheme='light'}`,
|
||||
` else{r.classList.remove('dark','light'); r.style.colorScheme='light dark'}`,
|
||||
` try{`,
|
||||
` var tm=d.querySelector('meta[name="theme-color"]');`,
|
||||
` if(tm){tm.content=(eff==='light'?'#f8fafc':'#111111')}`,
|
||||
` }catch(e){}`,
|
||||
`}catch(e){}})();`
|
||||
].join('')
|
||||
}
|
||||
],
|
||||
link: [
|
||||
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
|
||||
{ rel: 'preload', as: 'image', href: '/images/logo.png' },
|
||||
{ rel: 'preload', as: 'image', href: '/images/site-logo.png' },
|
||||
{ rel: 'preload', as: 'image', href: '/images/school-logo-white.png' },
|
||||
// 浼樺厛鍔犺浇甯歌瀛椾綋锛岀‘淇濋〉闈㈠揩閫熸樉绀? {
|
||||
rel: 'preload',
|
||||
as: 'style',
|
||||
href: 'https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Regular.min.css'
|
||||
},
|
||||
{
|
||||
rel: 'stylesheet',
|
||||
href: 'https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Regular.min.css'
|
||||
},
|
||||
// 寤惰繜鍔犺浇鍏朵粬瀛楅噸锛岄伩鍏嶉樆濉為〉闈㈡覆鏌? {
|
||||
rel: 'preload',
|
||||
as: 'style',
|
||||
href: 'https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Medium.min.css',
|
||||
onload: "this.onload=null;this.rel='stylesheet'"
|
||||
},
|
||||
{
|
||||
rel: 'preload',
|
||||
as: 'style',
|
||||
href: 'https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Semibold.min.css',
|
||||
onload: "this.onload=null;this.rel='stylesheet'"
|
||||
},
|
||||
{
|
||||
rel: 'preload',
|
||||
as: 'style',
|
||||
href: 'https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Bold.min.css',
|
||||
onload: "this.onload=null;this.rel='stylesheet'"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
features: {
|
||||
inlineStyles: false
|
||||
},
|
||||
|
||||
// TypeScript閰嶇疆
|
||||
typescript: {
|
||||
strict: true
|
||||
},
|
||||
|
||||
// 鏈嶅姟鍣ㄧ閰嶇疆
|
||||
nitro: {
|
||||
compressPublicAssets: true,
|
||||
preset: process.env.VERCEL
|
||||
? 'vercel'
|
||||
: process.env.NETLIFY
|
||||
? 'netlify'
|
||||
: process.env.NITRO_PRESET || 'node-server',
|
||||
// 澧炲己閿欒澶勭悊鍜岀ǔ瀹氭€? experimental: {
|
||||
wasm: true,
|
||||
asyncContext: true
|
||||
},
|
||||
timing: true,
|
||||
// 澧炲姞璇锋眰瓒呮椂鏃堕棿
|
||||
routeRules: {
|
||||
// 瀹屽叏绂佺敤鎵€鏈堿PI璺敱鐨勭紦瀛橈紝纭繚姣忔閮借姹傛暟鎹簱
|
||||
'/api/**': {
|
||||
headers: {
|
||||
'Cache-Control': 'no-cache, no-store, must-revalidate',
|
||||
Pragma: 'no-cache',
|
||||
Expires: '0',
|
||||
Connection: 'keep-alive'
|
||||
}
|
||||
},
|
||||
// 闈欐€佽祫婧愭枃浠剁紦瀛橀厤缃? '/_nuxt/**': {
|
||||
headers: {
|
||||
'Cache-Control': 'public, max-age=31536000, immutable'
|
||||
}
|
||||
},
|
||||
'/assets/**': {
|
||||
headers: {
|
||||
'Cache-Control': 'public, max-age=31536000, immutable'
|
||||
}
|
||||
},
|
||||
'/favicon.ico': {
|
||||
headers: {
|
||||
'Cache-Control': 'public, max-age=86400'
|
||||
}
|
||||
},
|
||||
// 鍥剧墖銆丆SS銆丣S绛夐潤鎬佽祫婧愮紦瀛? '/**/*.{png,jpg,jpeg,gif,webp,svg,ico}': {
|
||||
headers: {
|
||||
'Cache-Control': 'public, max-age=31536000, immutable'
|
||||
}
|
||||
},
|
||||
'/**/*.{css,js}': {
|
||||
headers: {
|
||||
'Cache-Control': 'public, max-age=31536000, immutable'
|
||||
}
|
||||
},
|
||||
// 璁よ瘉鐩稿叧椤甸潰涓嶇紦瀛? '/login': {
|
||||
headers: {
|
||||
'Cache-Control': 'no-cache, no-store, must-revalidate',
|
||||
Pragma: 'no-cache',
|
||||
Expires: '0'
|
||||
}
|
||||
},
|
||||
'/dashboard': {
|
||||
headers: {
|
||||
'Cache-Control': 'no-cache, no-store, must-revalidate',
|
||||
Pragma: 'no-cache',
|
||||
Expires: '0'
|
||||
}
|
||||
},
|
||||
'/change-password': {
|
||||
headers: {
|
||||
'Cache-Control': 'no-cache, no-store, must-revalidate',
|
||||
Pragma: 'no-cache',
|
||||
Expires: '0'
|
||||
}
|
||||
},
|
||||
'/auth/**': {
|
||||
headers: {
|
||||
'Cache-Control': 'no-cache, no-store, must-revalidate',
|
||||
Pragma: 'no-cache',
|
||||
Expires: '0'
|
||||
}
|
||||
},
|
||||
'/notification-settings': {
|
||||
headers: {
|
||||
'Cache-Control': 'no-cache, no-store, must-revalidate',
|
||||
Pragma: 'no-cache',
|
||||
Expires: '0'
|
||||
}
|
||||
}
|
||||
},
|
||||
// 鏍规嵁閮ㄧ讲鐜璋冩暣閰嶇疆
|
||||
...(process.env.VERCEL
|
||||
? {
|
||||
// Vercel 鐜锛氫娇鐢ㄦ爣鍑嗛厤缃? }
|
||||
: process.env.NETLIFY
|
||||
? {
|
||||
// Netlify 鐜锛氱‘淇?Drizzle 姝ｇ‘鎵撳寘
|
||||
experimental: {
|
||||
wasm: true
|
||||
}
|
||||
}
|
||||
: {
|
||||
// 鍏朵粬鐜锛氫娇鐢ㄦ爣鍑嗛厤缃? })
|
||||
},
|
||||
|
||||
// Vite 閰嶇疆
|
||||
vite: {
|
||||
build: {
|
||||
chunkSizeWarningLimit: 2000,
|
||||
cssCodeSplit: true,
|
||||
rollupOptions: {
|
||||
maxParallelFileOps: 2,
|
||||
output: {
|
||||
manualChunks(id) {
|
||||
if (id.includes('node_modules/lucide-vue-next')) {
|
||||
return 'lucide'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
resolve: {
|
||||
alias: [
|
||||
{
|
||||
find: '@applemusic-like-lyrics/core/style.css',
|
||||
replacement: fileURLToPath(
|
||||
new URL('./vendor/amll-core/src/styles/index.css', import.meta.url)
|
||||
)
|
||||
},
|
||||
{
|
||||
find: '@applemusic-like-lyrics/core',
|
||||
replacement: fileURLToPath(new URL('./vendor/amll-core/src/index.ts', import.meta.url))
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [wasm(), glsl()],
|
||||
optimizeDeps: {
|
||||
include: ['drizzle-orm'],
|
||||
exclude: ['@applemusic-like-lyrics/vue', '@applemusic-like-lyrics/lyric']
|
||||
},
|
||||
build: {
|
||||
sourcemap: false,
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks(id) {
|
||||
if (!id.includes('node_modules')) return
|
||||
if (id.includes('lucide-vue-next')) return 'icons'
|
||||
if (id.includes('@pixi')) return 'pixi'
|
||||
if (id.includes('@applemusic-like-lyrics')) return 'lyric-engine'
|
||||
if (id.includes('drizzle-orm') || id.includes('postgres')) return 'database'
|
||||
if (id.includes('xlsx') || id.includes('jspdf') || id.includes('jszip')) return 'office'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 娣诲姞 WASM 鏀寔閰嶇疆
|
||||
assetsInclude: ['**/*.wasm'],
|
||||
// SSR閰嶇疆
|
||||
ssr: {
|
||||
noExternal: process.env.NETLIFY
|
||||
? ['drizzle-orm', 'postgres']
|
||||
: process.env.VERCEL
|
||||
? []
|
||||
: ['drizzle-orm', 'postgres']
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,433 @@
|
||||
import wasm from 'vite-plugin-wasm'
|
||||
import glsl from 'vite-plugin-glsl'
|
||||
import { fileURLToPath } from 'url'
|
||||
import { index, uniqueIndex } from 'drizzle-orm'
|
||||
|
||||
const customSeoConfig: Record<string, unknown> | null = (() => {
|
||||
const raw = process.env.NUXT_PUBLIC_SEO_CONFIG
|
||||
if (!raw) return null
|
||||
try {
|
||||
const parsed = JSON.parse(raw)
|
||||
if (parsed && typeof parsed === 'object') return parsed as Record<string, unknown>
|
||||
return null
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
})()
|
||||
|
||||
function readNumberEnv(name: string, defaultValue: number): number {
|
||||
const raw = process.env[name]
|
||||
if (raw === undefined || raw === '') return defaultValue
|
||||
const num = Number(raw)
|
||||
return Number.isFinite(num) ? num : defaultValue
|
||||
}
|
||||
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
compatibilityDate: '2026-01-30',
|
||||
future: {
|
||||
compatibilityVersion: 4
|
||||
},
|
||||
srcDir: 'app',
|
||||
serverDir: fileURLToPath(new URL('./server', import.meta.url)),
|
||||
dir: {
|
||||
public: fileURLToPath(new URL('./public', import.meta.url))
|
||||
},
|
||||
devtools: { enabled: process.env.NODE_ENV === 'development' },
|
||||
devServer: {
|
||||
host: '0.0.0.0',
|
||||
port: 3000
|
||||
},
|
||||
modules: [
|
||||
'@nuxtjs/tailwindcss',
|
||||
...((process.env.NODE_ENV === 'development' || process.env.npm_lifecycle_event?.includes('lint'))
|
||||
? ['@nuxt/eslint']
|
||||
: []),
|
||||
...((process.env.PWA_ENABLED || 'false') === 'true'
|
||||
? ['@vite-pwa/nuxt']
|
||||
: [])
|
||||
],
|
||||
|
||||
pwa: (process.env.PWA_ENABLED || 'false') === 'true'
|
||||
? {
|
||||
registerType: 'autoUpdate',
|
||||
manifest: {
|
||||
name: process.env.NUXT_PUBLIC_SITE_TITLE || '鏍″洯骞挎挱绔欑偣姝岀郴缁?,
|
||||
short_name: process.env.NUXT_PUBLIC_SITE_TITLE || 'VoiceHub',
|
||||
description: process.env.NUXT_PUBLIC_SITE_DESCRIPTION || '鏍″洯骞挎挱绔欑偣姝岀郴缁?,
|
||||
display: (process.env.PWA_DISPLAY as any) || 'standalone',
|
||||
background_color: process.env.PWA_BACKGROUND_COLOR || '#000000',
|
||||
theme_color: process.env.PWA_THEME_COLOR || '#111111',
|
||||
icons: [
|
||||
{
|
||||
src: '/images/logo.png',
|
||||
sizes: '192x192',
|
||||
type: 'image/png'
|
||||
},
|
||||
{
|
||||
src: '/images/logo.png',
|
||||
sizes: '512x512',
|
||||
type: 'image/png'
|
||||
}
|
||||
]
|
||||
},
|
||||
workbox: {
|
||||
navigateFallback: '/',
|
||||
globPatterns: ['**/*.{js,css,html,png,jpg,jpeg,svg,ico,webp,woff2}']
|
||||
},
|
||||
client: {
|
||||
installPrompt: true,
|
||||
periodicSyncForUpdates: 3600
|
||||
},
|
||||
devOptions: {
|
||||
enabled: process.env.NODE_ENV === 'development'
|
||||
}
|
||||
}
|
||||
: {},
|
||||
|
||||
// 寮曞叆鍏ㄥ眬CSS
|
||||
css: [
|
||||
'~/assets/css/variables.css',
|
||||
'~/assets/css/components.css',
|
||||
'~/assets/css/main.css',
|
||||
'~/assets/css/transitions.css',
|
||||
'~/assets/css/mobile-admin.css',
|
||||
'~/assets/css/print-fix.css',
|
||||
'~/assets/css/sf-pro-icons.css'
|
||||
],
|
||||
|
||||
build: {
|
||||
transpile: []
|
||||
},
|
||||
|
||||
// 瀹為獙鎬т紭鍖栧姛鑳? experimental: {
|
||||
payloadExtraction: true,
|
||||
renderJsonPayloads: true,
|
||||
viewTransition: true
|
||||
},
|
||||
|
||||
// 閰嶇疆杩愯鏃堕厤缃? runtimeConfig: {
|
||||
// 鏈嶅姟鍣ㄧ鏈夐敭锛堜笉浼氭毚闇插埌瀹㈡埛绔級
|
||||
jwtSecret: process.env.JWT_SECRET || 'your-secret-key',
|
||||
// Redis閰嶇疆锛堝彲閫夛級
|
||||
redisUrl: process.env.REDIS_URL || '',
|
||||
redisKeyPrefix: process.env.REDIS_KEY_PREFIX || '',
|
||||
// Sentry 鏈嶅姟绔厤缃紙涓嶄細鏆撮湶鍒板鎴风锛? sentry: {
|
||||
serverDsn: process.env.SENTRY_SERVER_DSN || process.env.SENTRY_DSN || '',
|
||||
dsn: process.env.SENTRY_DSN || '',
|
||||
errorSampleRate: readNumberEnv('SENTRY_ERROR_SAMPLE_RATE', 1.0),
|
||||
tracesSampleRate: readNumberEnv('SENTRY_TRACES_SAMPLE_RATE', 1.0),
|
||||
replaySessionSampleRate: readNumberEnv('SENTRY_REPLAY_SESSION_SAMPLE_RATE', 0),
|
||||
replayOnErrorSampleRate: readNumberEnv('SENTRY_REPLAY_ON_ERROR_SAMPLE_RATE', 0),
|
||||
release: process.env.SENTRY_RELEASE || '',
|
||||
environment: process.env.SENTRY_ENVIRONMENT || process.env.NODE_ENV || 'production'
|
||||
},
|
||||
// 鍏叡閿紙浼氭毚闇插埌瀹㈡埛绔級
|
||||
public: {
|
||||
host: process.env.NUXT_PUBLIC_HOST || '',
|
||||
apiBase: '/api',
|
||||
oauth: {
|
||||
github: !!process.env.GITHUB_CLIENT_ID,
|
||||
casdoor: !!process.env.CASDOOR_CLIENT_ID,
|
||||
google: !!process.env.GOOGLE_CLIENT_ID,
|
||||
aggregate: !!process.env.AGGREGATE_OAUTH_APP_ID
|
||||
},
|
||||
siteTitle: process.env.NUXT_PUBLIC_SITE_TITLE || '鏍″洯骞挎挱绔欑偣姝岀郴缁?,
|
||||
siteLogo: process.env.NUXT_PUBLIC_SITE_LOGO || '',
|
||||
siteDescription:
|
||||
process.env.NUXT_PUBLIC_SITE_DESCRIPTION || '鏍″洯骞挎挱绔欑偣姝岀郴缁?- 璁╀綘鐨勫０闊宠鍚',
|
||||
isNetlify: process.env.NETLIFY === 'true',
|
||||
// SEO 鑷畾涔夐厤缃紙閫氳繃 NUXT_PUBLIC_SEO_CONFIG 娉ㄥ叆 JSON 瀛楃涓诧級
|
||||
seoConfig: customSeoConfig ?? {},
|
||||
// 鍥惧舰楠岃瘉鐮佺浉鍏? captcha: {
|
||||
enabled: (process.env.CAPTCHA_ENABLED || 'false') === 'true',
|
||||
provider: process.env.CAPTCHA_PROVIDER || 'turnstile',
|
||||
siteKey: process.env.CAPTCHA_SITE_KEY || ''
|
||||
},
|
||||
// PWA 鐩稿叧缁撴瀯锛堟湰鍦颁笉鍚敤妯″潡锛屼絾淇濈暀閰嶇疆椤逛互渚夸笂灞傚簲鐢ㄤ娇鐢級
|
||||
pwa: {
|
||||
enabled: (process.env.PWA_ENABLED || 'false') === 'true',
|
||||
display: process.env.PWA_DISPLAY || 'standalone',
|
||||
backgroundColor: process.env.PWA_BACKGROUND_COLOR || '#000000',
|
||||
themeColor: process.env.PWA_THEME_COLOR || '#111111'
|
||||
},
|
||||
// 涓婚閰嶇疆
|
||||
defaultTheme: process.env.NUXT_PUBLIC_DEFAULT_THEME || 'ClassicLight',
|
||||
enabledThemes: (process.env.NUXT_PUBLIC_ENABLED_THEMES || 'ClassicLight,ModernLight')
|
||||
.split(',')
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean),
|
||||
// Sentry 瀹㈡埛绔厤缃紙浠呭叕寮€ DSN 涓庨噰鏍风巼锛? sentry: {
|
||||
dsn: process.env.SENTRY_DSN || '',
|
||||
tracesSampleRate: readNumberEnv('SENTRY_TRACES_SAMPLE_RATE', 1.0),
|
||||
replaySessionSampleRate: readNumberEnv('SENTRY_REPLAY_SESSION_SAMPLE_RATE', 0),
|
||||
replayOnErrorSampleRate: readNumberEnv('SENTRY_REPLAY_ON_ERROR_SAMPLE_RATE', 0)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 閰嶇疆鐜鍙橀噺
|
||||
app: {
|
||||
head: {
|
||||
title: process.env.NUXT_PUBLIC_SITE_TITLE || '鏍″洯骞挎挱绔欑偣姝岀郴缁?,
|
||||
htmlAttrs: { lang: 'zh-CN' },
|
||||
meta: [
|
||||
{ charset: 'utf-8' },
|
||||
{
|
||||
name: 'viewport',
|
||||
content:
|
||||
'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover'
|
||||
},
|
||||
{
|
||||
name: 'description',
|
||||
content:
|
||||
process.env.NUXT_PUBLIC_SITE_DESCRIPTION || '鏍″洯骞挎挱绔欑偣姝岀郴缁?- 璁╀綘鐨勫０闊宠鍚'
|
||||
},
|
||||
// 绉诲姩绔紭鍖? { name: 'theme-color', content: '#111111' },
|
||||
{
|
||||
name: 'x-default-theme',
|
||||
content: process.env.NUXT_PUBLIC_DEFAULT_THEME || 'System'
|
||||
},
|
||||
{ name: 'apple-mobile-web-app-capable', content: 'yes' },
|
||||
{ name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
|
||||
{ name: 'apple-mobile-web-app-title', content: 'VoiceHub绠＄悊' },
|
||||
{ name: 'mobile-web-app-capable', content: 'yes' },
|
||||
{ name: 'format-detection', content: 'telephone=no' }
|
||||
],
|
||||
script: [
|
||||
{
|
||||
type: 'text/javascript',
|
||||
tagPosition: 'head',
|
||||
children: [
|
||||
`(function(){try{`,
|
||||
` var k='voicehub:theme', d=document, r=d.documentElement, s=null, eff=null;`,
|
||||
` try{s=localStorage.getItem(k)}catch(e){s=null}`,
|
||||
` if(!s){`,
|
||||
` try{`,
|
||||
` var meta=document.querySelector('meta[name="x-default-theme"]');`,
|
||||
` if(meta && meta.content){s=meta.content}`,
|
||||
` }catch(e){s=null}`,
|
||||
` if(!s){s='System'}`,
|
||||
` }`,
|
||||
` if(s==='System'||s==='system'){eff=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'}`,
|
||||
` else if(typeof s==='string'){eff=s.endsWith('Dark')||s==='dark'?'dark':(s.endsWith('Light')||s==='light'?'light':s)}`,
|
||||
` else{eff='dark'}`,
|
||||
` r.setAttribute('data-theme', (typeof s==='string'?s:eff));`,
|
||||
` if(eff==='dark'){r.classList.add('dark'); r.classList.remove('light'); r.style.colorScheme='dark'}`,
|
||||
` else if(eff==='light'){r.classList.add('light'); r.classList.remove('dark'); r.style.colorScheme='light'}`,
|
||||
` else{r.classList.remove('dark','light'); r.style.colorScheme='light dark'}`,
|
||||
` try{`,
|
||||
` var tm=d.querySelector('meta[name="theme-color"]');`,
|
||||
` if(tm){tm.content=(eff==='light'?'#f8fafc':'#111111')}`,
|
||||
` }catch(e){}`,
|
||||
`}catch(e){}})();`
|
||||
].join('')
|
||||
}
|
||||
],
|
||||
link: [
|
||||
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
|
||||
{ rel: 'preload', as: 'image', href: '/images/logo.png' },
|
||||
{ rel: 'preload', as: 'image', href: '/images/site-logo.png' },
|
||||
{ rel: 'preload', as: 'image', href: '/images/school-logo-white.png' },
|
||||
// 浼樺厛鍔犺浇甯歌瀛椾綋锛岀‘淇濋〉闈㈠揩閫熸樉绀? {
|
||||
rel: 'preload',
|
||||
as: 'style',
|
||||
href: 'https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Regular.min.css'
|
||||
},
|
||||
{
|
||||
rel: 'stylesheet',
|
||||
href: 'https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Regular.min.css'
|
||||
},
|
||||
// 寤惰繜鍔犺浇鍏朵粬瀛楅噸锛岄伩鍏嶉樆濉為〉闈㈡覆鏌? {
|
||||
rel: 'preload',
|
||||
as: 'style',
|
||||
href: 'https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Medium.min.css',
|
||||
onload: "this.onload=null;this.rel='stylesheet'"
|
||||
},
|
||||
{
|
||||
rel: 'preload',
|
||||
as: 'style',
|
||||
href: 'https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Semibold.min.css',
|
||||
onload: "this.onload=null;this.rel='stylesheet'"
|
||||
},
|
||||
{
|
||||
rel: 'preload',
|
||||
as: 'style',
|
||||
href: 'https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Bold.min.css',
|
||||
onload: "this.onload=null;this.rel='stylesheet'"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
features: {
|
||||
inlineStyles: false
|
||||
},
|
||||
|
||||
// TypeScript閰嶇疆
|
||||
typescript: {
|
||||
strict: true
|
||||
},
|
||||
|
||||
// 鏈嶅姟鍣ㄧ閰嶇疆
|
||||
nitro: {
|
||||
compressPublicAssets: true,
|
||||
preset: process.env.VERCEL
|
||||
? 'vercel'
|
||||
: process.env.NETLIFY
|
||||
? 'netlify'
|
||||
: process.env.NITRO_PRESET || 'node-server',
|
||||
// 澧炲己閿欒澶勭悊鍜岀ǔ瀹氭€? experimental: {
|
||||
wasm: true,
|
||||
asyncContext: true
|
||||
},
|
||||
timing: true,
|
||||
// 澧炲姞璇锋眰瓒呮椂鏃堕棿
|
||||
routeRules: {
|
||||
// 瀹屽叏绂佺敤鎵€鏈堿PI璺敱鐨勭紦瀛橈紝纭繚姣忔閮借姹傛暟鎹簱
|
||||
'/api/**': {
|
||||
headers: {
|
||||
'Cache-Control': 'no-cache, no-store, must-revalidate',
|
||||
Pragma: 'no-cache',
|
||||
Expires: '0',
|
||||
Connection: 'keep-alive'
|
||||
}
|
||||
},
|
||||
// 闈欐€佽祫婧愭枃浠剁紦瀛橀厤缃? '/_nuxt/**': {
|
||||
headers: {
|
||||
'Cache-Control': 'public, max-age=31536000, immutable'
|
||||
}
|
||||
},
|
||||
'/assets/**': {
|
||||
headers: {
|
||||
'Cache-Control': 'public, max-age=31536000, immutable'
|
||||
}
|
||||
},
|
||||
'/favicon.ico': {
|
||||
headers: {
|
||||
'Cache-Control': 'public, max-age=86400'
|
||||
}
|
||||
},
|
||||
// 鍥剧墖銆丆SS銆丣S绛夐潤鎬佽祫婧愮紦瀛? '/**/*.{png,jpg,jpeg,gif,webp,svg,ico}': {
|
||||
headers: {
|
||||
'Cache-Control': 'public, max-age=31536000, immutable'
|
||||
}
|
||||
},
|
||||
'/**/*.{css,js}': {
|
||||
headers: {
|
||||
'Cache-Control': 'public, max-age=31536000, immutable'
|
||||
}
|
||||
},
|
||||
// 璁よ瘉鐩稿叧椤甸潰涓嶇紦瀛? '/login': {
|
||||
headers: {
|
||||
'Cache-Control': 'no-cache, no-store, must-revalidate',
|
||||
Pragma: 'no-cache',
|
||||
Expires: '0'
|
||||
}
|
||||
},
|
||||
'/dashboard': {
|
||||
headers: {
|
||||
'Cache-Control': 'no-cache, no-store, must-revalidate',
|
||||
Pragma: 'no-cache',
|
||||
Expires: '0'
|
||||
}
|
||||
},
|
||||
'/change-password': {
|
||||
headers: {
|
||||
'Cache-Control': 'no-cache, no-store, must-revalidate',
|
||||
Pragma: 'no-cache',
|
||||
Expires: '0'
|
||||
}
|
||||
},
|
||||
'/auth/**': {
|
||||
headers: {
|
||||
'Cache-Control': 'no-cache, no-store, must-revalidate',
|
||||
Pragma: 'no-cache',
|
||||
Expires: '0'
|
||||
}
|
||||
},
|
||||
'/notification-settings': {
|
||||
headers: {
|
||||
'Cache-Control': 'no-cache, no-store, must-revalidate',
|
||||
Pragma: 'no-cache',
|
||||
Expires: '0'
|
||||
}
|
||||
}
|
||||
},
|
||||
// 鏍规嵁閮ㄧ讲鐜璋冩暣閰嶇疆
|
||||
...(process.env.VERCEL
|
||||
? {
|
||||
// Vercel 鐜锛氫娇鐢ㄦ爣鍑嗛厤缃? }
|
||||
: process.env.NETLIFY
|
||||
? {
|
||||
// Netlify 鐜锛氱‘淇?Drizzle 姝ｇ‘鎵撳寘
|
||||
experimental: {
|
||||
wasm: true
|
||||
}
|
||||
}
|
||||
: {
|
||||
// 鍏朵粬鐜锛氫娇鐢ㄦ爣鍑嗛厤缃? })
|
||||
},
|
||||
|
||||
// Vite 閰嶇疆
|
||||
vite: {
|
||||
build: {
|
||||
chunkSizeWarningLimit: 2000,
|
||||
cssCodeSplit: true,
|
||||
rollupOptions: {
|
||||
maxParallelFileOps: 2,
|
||||
output: {
|
||||
manualChunks(id) {
|
||||
if (id.includes('node_modules/lucide-vue-next')) {
|
||||
return 'lucide'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
resolve: {
|
||||
alias: [
|
||||
{
|
||||
find: '@applemusic-like-lyrics/core/style.css',
|
||||
replacement: fileURLToPath(
|
||||
new URL('./vendor/amll-core/src/styles/index.css', import.meta.url)
|
||||
)
|
||||
},
|
||||
{
|
||||
find: '@applemusic-like-lyrics/core',
|
||||
replacement: fileURLToPath(new URL('./vendor/amll-core/src/index.ts', import.meta.url))
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [wasm(), glsl()],
|
||||
optimizeDeps: {
|
||||
include: ['drizzle-orm'],
|
||||
exclude: ['@applemusic-like-lyrics/vue', '@applemusic-like-lyrics/lyric']
|
||||
},
|
||||
build: {
|
||||
sourcemap: false,
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks(id) {
|
||||
if (!id.includes('node_modules')) return
|
||||
if (id.includes('lucide-vue-next')) return 'icons'
|
||||
if (id.includes('@pixi')) return 'pixi'
|
||||
if (id.includes('@applemusic-like-lyrics')) return 'lyric-engine'
|
||||
if (id.includes('drizzle-orm') || id.includes('postgres')) return 'database'
|
||||
if (id.includes('xlsx') || id.includes('jspdf') || id.includes('jszip')) return 'office'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 娣诲姞 WASM 鏀寔閰嶇疆
|
||||
assetsInclude: ['**/*.wasm'],
|
||||
// SSR閰嶇疆
|
||||
ssr: {
|
||||
noExternal: process.env.NETLIFY
|
||||
? ['drizzle-orm', 'postgres']
|
||||
: process.env.VERCEL
|
||||
? []
|
||||
: ['drizzle-orm', 'postgres']
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,556 @@
|
||||
/* 鍏ㄥ眬CSS鍙橀噺 - 缁熶竴閰嶈壊鏂规 */
|
||||
:root {
|
||||
/* 涓昏壊璋?*/
|
||||
--primary: #3b82f6;
|
||||
--primary-hover: #2563eb;
|
||||
--primary-light: rgba(59, 130, 246, 0.1);
|
||||
--primary-border: rgba(59, 130, 246, 0.2);
|
||||
|
||||
/* 鎴愬姛鑹?*/
|
||||
--success: #10b981;
|
||||
--success-hover: #059669;
|
||||
--success-light: rgba(16, 185, 129, 0.1);
|
||||
--success-border: rgba(16, 185, 129, 0.2);
|
||||
|
||||
/* 璀﹀憡鑹?*/
|
||||
--warning: #f59e0b;
|
||||
--warning-hover: #d97706;
|
||||
--warning-light: rgba(245, 158, 11, 0.1);
|
||||
--warning-border: rgba(245, 158, 11, 0.2);
|
||||
|
||||
/* 閿欒鑹?*/
|
||||
--error: #ef4444;
|
||||
--error-hover: #dc2626;
|
||||
--error-light: rgba(239, 68, 68, 0.1);
|
||||
--error-border: rgba(239, 68, 68, 0.2);
|
||||
|
||||
/* 淇℃伅鑹?*/
|
||||
--info: #3b82f6;
|
||||
--info-hover: #2563eb;
|
||||
--info-light: rgba(59, 130, 246, 0.1);
|
||||
--info-border: rgba(59, 130, 246, 0.2);
|
||||
|
||||
/* 鑳屾櫙鑹?*/
|
||||
--bg-primary: #111111;
|
||||
--bg-secondary: #1a1a1a;
|
||||
--bg-tertiary: #2a2a2a;
|
||||
--bg-quaternary: #3a3a3a;
|
||||
--bg-hover: #1f1f1f;
|
||||
|
||||
/* 鏂囧瓧棰滆壊 */
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #cccccc;
|
||||
--text-tertiary: #888888;
|
||||
--text-quaternary: #666666;
|
||||
--text-disabled: #444444;
|
||||
|
||||
/* 杈规棰滆壊 */
|
||||
--border-primary: #1f1f1f;
|
||||
--border-secondary: #2a2a2a;
|
||||
--border-tertiary: #3a3a3a;
|
||||
--border-quaternary: #4a4a4a;
|
||||
|
||||
/* 闃村奖 */
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
|
||||
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
|
||||
|
||||
/* 鍦嗚 */
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
--radius-xl: 12px;
|
||||
--radius-2xl: 16px;
|
||||
|
||||
/* 闂磋窛 */
|
||||
--spacing-xs: 4px;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-md: 12px;
|
||||
--spacing-lg: 16px;
|
||||
--spacing-xl: 20px;
|
||||
--spacing-2xl: 24px;
|
||||
--spacing-3xl: 32px;
|
||||
|
||||
/* 瀛椾綋澶у皬 */
|
||||
--text-xs: 12px;
|
||||
--text-sm: 14px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-xl: 20px;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 30px;
|
||||
|
||||
/* 瀛椾綋绮楃粏 */
|
||||
--font-normal: 400;
|
||||
--font-medium: 500;
|
||||
--font-semibold: 600;
|
||||
--font-bold: 700;
|
||||
|
||||
/* 杩囨浮鍔ㄧ敾 */
|
||||
--transition-fast: 0.15s ease;
|
||||
--transition-normal: 0.2s ease;
|
||||
--transition-slow: 0.3s ease;
|
||||
|
||||
/* Z-index灞傜骇 */
|
||||
--z-dropdown: 100;
|
||||
--z-sticky: 200;
|
||||
--z-fixed: 300;
|
||||
--z-modal-backdrop: 400;
|
||||
--z-modal: 500;
|
||||
--z-popover: 600;
|
||||
--z-tooltip: 700;
|
||||
--z-toast: 800;
|
||||
|
||||
/* 鐗规畩鐘舵€侀鑹?*/
|
||||
--status-pending: #fbbf24;
|
||||
--status-pending-light: rgba(251, 191, 36, 0.1);
|
||||
--status-approved: #10b981;
|
||||
--status-approved-light: rgba(16, 185, 129, 0.1);
|
||||
--status-played: #6b7280;
|
||||
--status-played-light: rgba(107, 114, 128, 0.1);
|
||||
|
||||
/* 鎶曠エ鐩稿叧棰滆壊 */
|
||||
--vote-heart: #ef4444;
|
||||
--vote-heart-hover: #dc2626;
|
||||
--vote-count: var(--text-tertiary);
|
||||
|
||||
/* 鎷栨嫿鐘舵€侀鑹?*/
|
||||
--drag-over: var(--primary-light);
|
||||
--drag-over-border: var(--primary);
|
||||
--dragging-opacity: 0.5;
|
||||
|
||||
/* 琛ㄦ牸棰滆壊 */
|
||||
--table-header-bg: var(--bg-tertiary);
|
||||
--table-row-hover: var(--bg-hover);
|
||||
--table-border: var(--border-secondary);
|
||||
--table-selected: var(--primary-light);
|
||||
|
||||
/* 鍗＄墖棰滆壊 */
|
||||
--card-bg: var(--bg-secondary);
|
||||
--card-border: var(--border-secondary);
|
||||
--card-hover-border: var(--border-tertiary);
|
||||
--card-shadow: var(--shadow-md);
|
||||
|
||||
/* 鎸夐挳棰滆壊 */
|
||||
--btn-primary-bg: var(--primary);
|
||||
--btn-primary-hover: var(--primary-hover);
|
||||
--btn-primary-text: var(--text-primary);
|
||||
--btn-primary-border: var(--primary-border);
|
||||
|
||||
--btn-secondary-bg: #3a3a3a;
|
||||
--btn-secondary-hover: #4a4a4a;
|
||||
--btn-secondary-text: var(--text-primary);
|
||||
--btn-secondary-border: #555555;
|
||||
|
||||
--btn-success-bg: var(--success);
|
||||
--btn-success-hover: var(--success-hover);
|
||||
--btn-success-text: var(--text-primary);
|
||||
--btn-success-border: var(--success-border);
|
||||
|
||||
--btn-warning-bg: var(--warning);
|
||||
--btn-warning-hover: var(--warning-hover);
|
||||
--btn-warning-text: var(--text-primary);
|
||||
--btn-warning-border: var(--warning-border);
|
||||
|
||||
--btn-error-bg: var(--error);
|
||||
--btn-error-hover: var(--error-hover);
|
||||
--btn-error-text: var(--text-primary);
|
||||
--btn-error-border: var(--error-border);
|
||||
|
||||
--btn-disabled-bg: var(--bg-tertiary);
|
||||
--btn-disabled-text: var(--text-disabled);
|
||||
|
||||
/* 杈撳叆妗嗛鑹?*/
|
||||
--input-bg: var(--bg-tertiary);
|
||||
--input-border: var(--border-tertiary);
|
||||
--input-border-focus: var(--primary);
|
||||
--input-text: var(--text-primary);
|
||||
--input-placeholder: var(--text-quaternary);
|
||||
--input-shadow-focus: 0 0 0 3px var(--primary-light);
|
||||
|
||||
/* 妯℃€佹棰滆壊 */
|
||||
--modal-backdrop: rgba(0, 0, 0, 0.7);
|
||||
--modal-bg: var(--bg-secondary);
|
||||
--modal-border: var(--border-secondary);
|
||||
--modal-header-border: var(--border-secondary);
|
||||
--modal-footer-border: var(--border-secondary);
|
||||
|
||||
/* 閫氱煡棰滆壊 */
|
||||
--notification-success-bg: var(--success-light);
|
||||
--notification-success-border: var(--success-border);
|
||||
--notification-success-text: var(--success);
|
||||
|
||||
--notification-warning-bg: var(--warning-light);
|
||||
--notification-warning-border: var(--warning-border);
|
||||
--notification-warning-text: var(--warning);
|
||||
|
||||
--notification-error-bg: var(--error-light);
|
||||
--notification-error-border: var(--error-border);
|
||||
--notification-error-text: var(--error);
|
||||
|
||||
--notification-info-bg: var(--info-light);
|
||||
--notification-info-border: var(--info-border);
|
||||
--notification-info-text: var(--info);
|
||||
|
||||
/* 鍔犺浇鍔ㄧ敾棰滆壊 */
|
||||
--spinner-primary: var(--primary);
|
||||
--spinner-secondary: var(--bg-tertiary);
|
||||
|
||||
/* 婊氬姩鏉￠鑹?*/
|
||||
--scrollbar-track: var(--bg-tertiary);
|
||||
--scrollbar-thumb: var(--bg-quaternary);
|
||||
--scrollbar-thumb-hover: #4a4a4a;
|
||||
}
|
||||
|
||||
:root[data-theme='light'],
|
||||
:root[data-theme='ClassicLight'],
|
||||
:root[data-theme='ModernLight'] {
|
||||
--bg-primary: #f8fafc;
|
||||
--bg-secondary: #f1f5f9;
|
||||
--bg-tertiary: #e2e8f0;
|
||||
--bg-quaternary: #cbd5e1;
|
||||
--bg-hover: #e2e8f0;
|
||||
|
||||
--text-primary: #0f172a;
|
||||
--text-secondary: #334155;
|
||||
--text-tertiary: #475569;
|
||||
--text-quaternary: #64748b;
|
||||
--text-disabled: #94a3b8;
|
||||
|
||||
--border-primary: #e2e8f0;
|
||||
--border-secondary: #cbd5e1;
|
||||
--border-tertiary: #94a3b8;
|
||||
--border-quaternary: #64748b;
|
||||
|
||||
--modal-backdrop: rgba(0, 0, 0, 0.4);
|
||||
--scrollbar-thumb-hover: #94a3b8;
|
||||
|
||||
--btn-secondary-bg: #f1f5f9;
|
||||
--btn-secondary-hover: #e2e8f0;
|
||||
--btn-secondary-text: #0f172a;
|
||||
--btn-secondary-border: #cbd5e1;
|
||||
|
||||
--card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
:root[data-theme='ClassicLight'] {
|
||||
--primary: #1e40af;
|
||||
--primary-hover: #1e3a8a;
|
||||
--primary-light: rgba(30, 64, 175, 0.08);
|
||||
--primary-border: rgba(30, 64, 175, 0.15);
|
||||
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f5f7fa;
|
||||
--bg-tertiary: #edf0f5;
|
||||
--bg-quaternary: #d9dee7;
|
||||
--bg-hover: #f0f3f8;
|
||||
|
||||
--success: #059669;
|
||||
--success-hover: #047857;
|
||||
--success-light: rgba(5, 150, 105, 0.08);
|
||||
--success-border: rgba(5, 150, 105, 0.15);
|
||||
|
||||
--warning: #d97706;
|
||||
--warning-hover: #b45309;
|
||||
--warning-light: rgba(217, 119, 6, 0.08);
|
||||
--warning-border: rgba(217, 119, 6, 0.15);
|
||||
|
||||
--error: #dc2626;
|
||||
--error-hover: #b91c1c;
|
||||
--error-light: rgba(220, 38, 38, 0.08);
|
||||
--error-border: rgba(220, 38, 38, 0.15);
|
||||
|
||||
--info: #2563eb;
|
||||
--info-hover: #1d4ed8;
|
||||
--info-light: rgba(37, 99, 235, 0.08);
|
||||
--info-border: rgba(37, 99, 235, 0.15);
|
||||
|
||||
--text-primary: #1a2332;
|
||||
--text-secondary: #4a5568;
|
||||
--text-tertiary: #6b7280;
|
||||
--text-quaternary: #9ca3af;
|
||||
--text-disabled: #c5cbd3;
|
||||
|
||||
--border-primary: #e5e7eb;
|
||||
--border-secondary: #d1d5db;
|
||||
--border-tertiary: #9ca3af;
|
||||
--border-quaternary: #6b7280;
|
||||
|
||||
--input-bg: #ffffff;
|
||||
--input-border: #d1d5db;
|
||||
--input-border-focus: #1e40af;
|
||||
--input-text: #1a2332;
|
||||
--input-placeholder: #9ca3af;
|
||||
--input-shadow-focus: 0 0 0 3px rgba(30, 64, 175, 0.1);
|
||||
|
||||
--card-bg: #ffffff;
|
||||
--card-border: #e5e7eb;
|
||||
--card-hover-border: #d1d5db;
|
||||
|
||||
--table-header-bg: #f5f7fa;
|
||||
--table-row-hover: #f9fafb;
|
||||
--table-border: #e5e7eb;
|
||||
--table-selected: rgba(30, 64, 175, 0.06);
|
||||
|
||||
--scrollbar-track: #f1f5f9;
|
||||
--scrollbar-thumb: #cbd5e1;
|
||||
--scrollbar-thumb-hover: #94a3b8;
|
||||
|
||||
--status-pending: #ca8a04;
|
||||
--status-pending-light: rgba(202, 138, 4, 0.08);
|
||||
--status-approved: #059669;
|
||||
--status-approved-light: rgba(5, 150, 105, 0.08);
|
||||
--status-played: #6b7280;
|
||||
--status-played-light: rgba(107, 114, 128, 0.08);
|
||||
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.06), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
|
||||
|
||||
--radius-sm: 3px;
|
||||
--radius-md: 5px;
|
||||
--radius-lg: 6px;
|
||||
--radius-xl: 8px;
|
||||
--radius-2xl: 10px;
|
||||
}
|
||||
|
||||
:root[data-theme='ModernLight'] {
|
||||
--primary: #4f46e5;
|
||||
--primary-hover: #4338ca;
|
||||
--primary-light: rgba(79, 70, 229, 0.1);
|
||||
--primary-border: rgba(79, 70, 229, 0.2);
|
||||
|
||||
--bg-primary: #fafafa;
|
||||
--bg-secondary: #f4f4f5;
|
||||
--bg-tertiary: #e4e4e7;
|
||||
--bg-quaternary: #d4d4d8;
|
||||
--bg-hover: #eeeeef;
|
||||
|
||||
--success: #16a34a;
|
||||
--success-hover: #15803d;
|
||||
--success-light: rgba(22, 163, 74, 0.1);
|
||||
--success-border: rgba(22, 163, 74, 0.2);
|
||||
|
||||
--warning: #ea580c;
|
||||
--warning-hover: #c2410c;
|
||||
--warning-light: rgba(234, 88, 12, 0.1);
|
||||
--warning-border: rgba(234, 88, 12, 0.2);
|
||||
|
||||
--error: #e11d48;
|
||||
--error-hover: #be123c;
|
||||
--error-light: rgba(225, 29, 72, 0.1);
|
||||
--error-border: rgba(225, 29, 72, 0.2);
|
||||
|
||||
--info: #0ea5e9;
|
||||
--info-hover: #0284c7;
|
||||
--info-light: rgba(14, 165, 233, 0.1);
|
||||
--info-border: rgba(14, 165, 233, 0.2);
|
||||
|
||||
--text-primary: #09090b;
|
||||
--text-secondary: #3f3f46;
|
||||
--text-tertiary: #71717a;
|
||||
--text-quaternary: #a1a1aa;
|
||||
--text-disabled: #d4d4d8;
|
||||
|
||||
--border-primary: #e4e4e7;
|
||||
--border-secondary: #d4d4d8;
|
||||
--border-tertiary: #a1a1aa;
|
||||
--border-quaternary: #71717a;
|
||||
|
||||
--input-bg: #ffffff;
|
||||
--input-border: #e4e4e7;
|
||||
--input-border-focus: #4f46e5;
|
||||
--input-text: #09090b;
|
||||
--input-placeholder: #a1a1aa;
|
||||
--input-shadow-focus: 0 0 0 3px rgba(79, 70, 229, 0.12);
|
||||
|
||||
--card-bg: #ffffff;
|
||||
--card-border: #e4e4e7;
|
||||
--card-hover-border: #d4d4d8;
|
||||
|
||||
--table-header-bg: #f4f4f5;
|
||||
--table-row-hover: #fafafa;
|
||||
--table-border: #e4e4e7;
|
||||
--table-selected: rgba(79, 70, 229, 0.08);
|
||||
|
||||
--scrollbar-track: #f4f4f5;
|
||||
--scrollbar-thumb: #d4d4d8;
|
||||
--scrollbar-thumb-hover: #a1a1aa;
|
||||
|
||||
--status-pending: #eab308;
|
||||
--status-pending-light: rgba(234, 179, 8, 0.12);
|
||||
--status-approved: #22c55e;
|
||||
--status-approved-light: rgba(34, 197, 94, 0.12);
|
||||
--status-played: #71717a;
|
||||
--status-played-light: rgba(113, 113, 122, 0.12);
|
||||
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
|
||||
--shadow-md: 0 2px 8px -2px rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.03);
|
||||
--shadow-lg: 0 8px 24px -4px rgba(0, 0, 0, 0.06), 0 2px 8px -4px rgba(0, 0, 0, 0.04);
|
||||
--shadow-xl: 0 16px 40px -8px rgba(0, 0, 0, 0.08), 0 4px 16px -8px rgba(0, 0, 0, 0.05);
|
||||
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
--radius-xl: 10px;
|
||||
--radius-2xl: 12px;
|
||||
}
|
||||
|
||||
/* 娣辫壊涓婚鐗瑰畾璋冩暣 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
/* 鍦ㄦ繁鑹叉ā寮忎笅鍙互杩涜寰皟 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 楂樺姣斿害妯″紡鏀寔 */
|
||||
@media (prefers-contrast: high) {
|
||||
:root {
|
||||
--border-primary: #444444;
|
||||
--border-secondary: #555555;
|
||||
--border-tertiary: #666666;
|
||||
--text-tertiary: #aaaaaa;
|
||||
--text-quaternary: #888888;
|
||||
}
|
||||
}
|
||||
|
||||
/* 鍑忓皯鍔ㄧ敾妯″紡鏀寔 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
:root {
|
||||
--transition-fast: 0s;
|
||||
--transition-normal: 0s;
|
||||
--transition-slow: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
/* 鍏ㄥ眬婊氬姩鏉℃牱寮?*/
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background: var(--scrollbar-track);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbar-thumb);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--scrollbar-thumb-hover);
|
||||
}
|
||||
|
||||
/* 鍏ㄥ眬閫夋嫨鏂囨湰鏍峰紡 */
|
||||
::selection {
|
||||
background: var(--primary-light);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* 鍏ㄥ眬鐒︾偣鏍峰紡 */
|
||||
*:focus {
|
||||
outline: 2px solid var(--primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
*:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 鍏ㄥ眬绂佺敤鐘舵€佹牱寮?*/
|
||||
*:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* 鍏ㄥ眬閾炬帴鏍峰紡 */
|
||||
a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition-normal);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--primary-hover);
|
||||
}
|
||||
|
||||
/* 鍏ㄥ眬鎸夐挳閲嶇疆 */
|
||||
button {
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
* {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
button,
|
||||
a,
|
||||
input,
|
||||
textarea {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
*:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
button,
|
||||
a {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 鍏ㄥ眬杈撳叆妗嗛噸缃?*/
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/* 鍏ㄥ眬鍥剧墖鏍峰紡 */
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* 鍏ㄥ眬琛ㄦ牸鏍峰紡 */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 鍏ㄥ眬浠ｇ爜鏍峰紡 */
|
||||
code,
|
||||
pre {
|
||||
font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 2px 4px;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: var(--spacing-lg);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
pre code {
|
||||
padding: 0;
|
||||
background: none;
|
||||
}
|
||||
@@ -0,0 +1,556 @@
|
||||
/* 鍏ㄥ眬CSS鍙橀噺 - 缁熶竴閰嶈壊鏂规 */
|
||||
:root {
|
||||
/* 涓昏壊璋?*/
|
||||
--primary: #3b82f6;
|
||||
--primary-hover: #2563eb;
|
||||
--primary-light: rgba(59, 130, 246, 0.1);
|
||||
--primary-border: rgba(59, 130, 246, 0.2);
|
||||
|
||||
/* 鎴愬姛鑹?*/
|
||||
--success: #10b981;
|
||||
--success-hover: #059669;
|
||||
--success-light: rgba(16, 185, 129, 0.1);
|
||||
--success-border: rgba(16, 185, 129, 0.2);
|
||||
|
||||
/* 璀﹀憡鑹?*/
|
||||
--warning: #f59e0b;
|
||||
--warning-hover: #d97706;
|
||||
--warning-light: rgba(245, 158, 11, 0.1);
|
||||
--warning-border: rgba(245, 158, 11, 0.2);
|
||||
|
||||
/* 閿欒鑹?*/
|
||||
--error: #ef4444;
|
||||
--error-hover: #dc2626;
|
||||
--error-light: rgba(239, 68, 68, 0.1);
|
||||
--error-border: rgba(239, 68, 68, 0.2);
|
||||
|
||||
/* 淇℃伅鑹?*/
|
||||
--info: #3b82f6;
|
||||
--info-hover: #2563eb;
|
||||
--info-light: rgba(59, 130, 246, 0.1);
|
||||
--info-border: rgba(59, 130, 246, 0.2);
|
||||
|
||||
/* 鑳屾櫙鑹?*/
|
||||
--bg-primary: #111111;
|
||||
--bg-secondary: #1a1a1a;
|
||||
--bg-tertiary: #2a2a2a;
|
||||
--bg-quaternary: #3a3a3a;
|
||||
--bg-hover: #1f1f1f;
|
||||
|
||||
/* 鏂囧瓧棰滆壊 */
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #cccccc;
|
||||
--text-tertiary: #888888;
|
||||
--text-quaternary: #666666;
|
||||
--text-disabled: #444444;
|
||||
|
||||
/* 杈规棰滆壊 */
|
||||
--border-primary: #1f1f1f;
|
||||
--border-secondary: #2a2a2a;
|
||||
--border-tertiary: #3a3a3a;
|
||||
--border-quaternary: #4a4a4a;
|
||||
|
||||
/* 闃村奖 */
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
|
||||
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
|
||||
|
||||
/* 鍦嗚 */
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
--radius-xl: 12px;
|
||||
--radius-2xl: 16px;
|
||||
|
||||
/* 闂磋窛 */
|
||||
--spacing-xs: 4px;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-md: 12px;
|
||||
--spacing-lg: 16px;
|
||||
--spacing-xl: 20px;
|
||||
--spacing-2xl: 24px;
|
||||
--spacing-3xl: 32px;
|
||||
|
||||
/* 瀛椾綋澶у皬 */
|
||||
--text-xs: 12px;
|
||||
--text-sm: 14px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-xl: 20px;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 30px;
|
||||
|
||||
/* 瀛椾綋绮楃粏 */
|
||||
--font-normal: 400;
|
||||
--font-medium: 500;
|
||||
--font-semibold: 600;
|
||||
--font-bold: 700;
|
||||
|
||||
/* 杩囨浮鍔ㄧ敾 */
|
||||
--transition-fast: 0.15s ease;
|
||||
--transition-normal: 0.2s ease;
|
||||
--transition-slow: 0.3s ease;
|
||||
|
||||
/* Z-index灞傜骇 */
|
||||
--z-dropdown: 100;
|
||||
--z-sticky: 200;
|
||||
--z-fixed: 300;
|
||||
--z-modal-backdrop: 400;
|
||||
--z-modal: 500;
|
||||
--z-popover: 600;
|
||||
--z-tooltip: 700;
|
||||
--z-toast: 800;
|
||||
|
||||
/* 鐗规畩鐘舵€侀鑹?*/
|
||||
--status-pending: #fbbf24;
|
||||
--status-pending-light: rgba(251, 191, 36, 0.1);
|
||||
--status-approved: #10b981;
|
||||
--status-approved-light: rgba(16, 185, 129, 0.1);
|
||||
--status-played: #6b7280;
|
||||
--status-played-light: rgba(107, 114, 128, 0.1);
|
||||
|
||||
/* 鎶曠エ鐩稿叧棰滆壊 */
|
||||
--vote-heart: #ef4444;
|
||||
--vote-heart-hover: #dc2626;
|
||||
--vote-count: var(--text-tertiary);
|
||||
|
||||
/* 鎷栨嫿鐘舵€侀鑹?*/
|
||||
--drag-over: var(--primary-light);
|
||||
--drag-over-border: var(--primary);
|
||||
--dragging-opacity: 0.5;
|
||||
|
||||
/* 琛ㄦ牸棰滆壊 */
|
||||
--table-header-bg: var(--bg-tertiary);
|
||||
--table-row-hover: var(--bg-hover);
|
||||
--table-border: var(--border-secondary);
|
||||
--table-selected: var(--primary-light);
|
||||
|
||||
/* 鍗＄墖棰滆壊 */
|
||||
--card-bg: var(--bg-secondary);
|
||||
--card-border: var(--border-secondary);
|
||||
--card-hover-border: var(--border-tertiary);
|
||||
--card-shadow: var(--shadow-md);
|
||||
|
||||
/* 鎸夐挳棰滆壊 */
|
||||
--btn-primary-bg: var(--primary);
|
||||
--btn-primary-hover: var(--primary-hover);
|
||||
--btn-primary-text: var(--text-primary);
|
||||
--btn-primary-border: var(--primary-border);
|
||||
|
||||
--btn-secondary-bg: #3a3a3a;
|
||||
--btn-secondary-hover: #4a4a4a;
|
||||
--btn-secondary-text: var(--text-primary);
|
||||
--btn-secondary-border: #555555;
|
||||
|
||||
--btn-success-bg: var(--success);
|
||||
--btn-success-hover: var(--success-hover);
|
||||
--btn-success-text: var(--text-primary);
|
||||
--btn-success-border: var(--success-border);
|
||||
|
||||
--btn-warning-bg: var(--warning);
|
||||
--btn-warning-hover: var(--warning-hover);
|
||||
--btn-warning-text: var(--text-primary);
|
||||
--btn-warning-border: var(--warning-border);
|
||||
|
||||
--btn-error-bg: var(--error);
|
||||
--btn-error-hover: var(--error-hover);
|
||||
--btn-error-text: var(--text-primary);
|
||||
--btn-error-border: var(--error-border);
|
||||
|
||||
--btn-disabled-bg: var(--bg-tertiary);
|
||||
--btn-disabled-text: var(--text-disabled);
|
||||
|
||||
/* 杈撳叆妗嗛鑹?*/
|
||||
--input-bg: var(--bg-tertiary);
|
||||
--input-border: var(--border-tertiary);
|
||||
--input-border-focus: var(--primary);
|
||||
--input-text: var(--text-primary);
|
||||
--input-placeholder: var(--text-quaternary);
|
||||
--input-shadow-focus: 0 0 0 3px var(--primary-light);
|
||||
|
||||
/* 妯℃€佹棰滆壊 */
|
||||
--modal-backdrop: rgba(0, 0, 0, 0.7);
|
||||
--modal-bg: var(--bg-secondary);
|
||||
--modal-border: var(--border-secondary);
|
||||
--modal-header-border: var(--border-secondary);
|
||||
--modal-footer-border: var(--border-secondary);
|
||||
|
||||
/* 閫氱煡棰滆壊 */
|
||||
--notification-success-bg: var(--success-light);
|
||||
--notification-success-border: var(--success-border);
|
||||
--notification-success-text: var(--success);
|
||||
|
||||
--notification-warning-bg: var(--warning-light);
|
||||
--notification-warning-border: var(--warning-border);
|
||||
--notification-warning-text: var(--warning);
|
||||
|
||||
--notification-error-bg: var(--error-light);
|
||||
--notification-error-border: var(--error-border);
|
||||
--notification-error-text: var(--error);
|
||||
|
||||
--notification-info-bg: var(--info-light);
|
||||
--notification-info-border: var(--info-border);
|
||||
--notification-info-text: var(--info);
|
||||
|
||||
/* 鍔犺浇鍔ㄧ敾棰滆壊 */
|
||||
--spinner-primary: var(--primary);
|
||||
--spinner-secondary: var(--bg-tertiary);
|
||||
|
||||
/* 婊氬姩鏉￠鑹?*/
|
||||
--scrollbar-track: var(--bg-tertiary);
|
||||
--scrollbar-thumb: var(--bg-quaternary);
|
||||
--scrollbar-thumb-hover: #4a4a4a;
|
||||
}
|
||||
|
||||
:root[data-theme='light'],
|
||||
:root[data-theme='ClassicLight'],
|
||||
:root[data-theme='ModernLight'] {
|
||||
--bg-primary: #f8fafc;
|
||||
--bg-secondary: #f1f5f9;
|
||||
--bg-tertiary: #e2e8f0;
|
||||
--bg-quaternary: #cbd5e1;
|
||||
--bg-hover: #e2e8f0;
|
||||
|
||||
--text-primary: #0f172a;
|
||||
--text-secondary: #334155;
|
||||
--text-tertiary: #475569;
|
||||
--text-quaternary: #64748b;
|
||||
--text-disabled: #94a3b8;
|
||||
|
||||
--border-primary: #e2e8f0;
|
||||
--border-secondary: #cbd5e1;
|
||||
--border-tertiary: #94a3b8;
|
||||
--border-quaternary: #64748b;
|
||||
|
||||
--modal-backdrop: rgba(0, 0, 0, 0.4);
|
||||
--scrollbar-thumb-hover: #94a3b8;
|
||||
|
||||
--btn-secondary-bg: #f1f5f9;
|
||||
--btn-secondary-hover: #e2e8f0;
|
||||
--btn-secondary-text: #0f172a;
|
||||
--btn-secondary-border: #cbd5e1;
|
||||
|
||||
--card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
:root[data-theme='ClassicLight'] {
|
||||
--primary: #1e40af;
|
||||
--primary-hover: #1e3a8a;
|
||||
--primary-light: rgba(30, 64, 175, 0.08);
|
||||
--primary-border: rgba(30, 64, 175, 0.15);
|
||||
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f5f7fa;
|
||||
--bg-tertiary: #edf0f5;
|
||||
--bg-quaternary: #d9dee7;
|
||||
--bg-hover: #f0f3f8;
|
||||
|
||||
--success: #059669;
|
||||
--success-hover: #047857;
|
||||
--success-light: rgba(5, 150, 105, 0.08);
|
||||
--success-border: rgba(5, 150, 105, 0.15);
|
||||
|
||||
--warning: #d97706;
|
||||
--warning-hover: #b45309;
|
||||
--warning-light: rgba(217, 119, 6, 0.08);
|
||||
--warning-border: rgba(217, 119, 6, 0.15);
|
||||
|
||||
--error: #dc2626;
|
||||
--error-hover: #b91c1c;
|
||||
--error-light: rgba(220, 38, 38, 0.08);
|
||||
--error-border: rgba(220, 38, 38, 0.15);
|
||||
|
||||
--info: #2563eb;
|
||||
--info-hover: #1d4ed8;
|
||||
--info-light: rgba(37, 99, 235, 0.08);
|
||||
--info-border: rgba(37, 99, 235, 0.15);
|
||||
|
||||
--text-primary: #1a2332;
|
||||
--text-secondary: #4a5568;
|
||||
--text-tertiary: #6b7280;
|
||||
--text-quaternary: #9ca3af;
|
||||
--text-disabled: #c5cbd3;
|
||||
|
||||
--border-primary: #e5e7eb;
|
||||
--border-secondary: #d1d5db;
|
||||
--border-tertiary: #9ca3af;
|
||||
--border-quaternary: #6b7280;
|
||||
|
||||
--input-bg: #ffffff;
|
||||
--input-border: #d1d5db;
|
||||
--input-border-focus: #1e40af;
|
||||
--input-text: #1a2332;
|
||||
--input-placeholder: #9ca3af;
|
||||
--input-shadow-focus: 0 0 0 3px rgba(30, 64, 175, 0.1);
|
||||
|
||||
--card-bg: #ffffff;
|
||||
--card-border: #e5e7eb;
|
||||
--card-hover-border: #d1d5db;
|
||||
|
||||
--table-header-bg: #f5f7fa;
|
||||
--table-row-hover: #f9fafb;
|
||||
--table-border: #e5e7eb;
|
||||
--table-selected: rgba(30, 64, 175, 0.06);
|
||||
|
||||
--scrollbar-track: #f1f5f9;
|
||||
--scrollbar-thumb: #cbd5e1;
|
||||
--scrollbar-thumb-hover: #94a3b8;
|
||||
|
||||
--status-pending: #ca8a04;
|
||||
--status-pending-light: rgba(202, 138, 4, 0.08);
|
||||
--status-approved: #059669;
|
||||
--status-approved-light: rgba(5, 150, 105, 0.08);
|
||||
--status-played: #6b7280;
|
||||
--status-played-light: rgba(107, 114, 128, 0.08);
|
||||
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.06), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
|
||||
|
||||
--radius-sm: 3px;
|
||||
--radius-md: 5px;
|
||||
--radius-lg: 6px;
|
||||
--radius-xl: 8px;
|
||||
--radius-2xl: 10px;
|
||||
}
|
||||
|
||||
:root[data-theme='ModernLight'] {
|
||||
--primary: #4f46e5;
|
||||
--primary-hover: #4338ca;
|
||||
--primary-light: rgba(79, 70, 229, 0.1);
|
||||
--primary-border: rgba(79, 70, 229, 0.2);
|
||||
|
||||
--bg-primary: #fafafa;
|
||||
--bg-secondary: #f4f4f5;
|
||||
--bg-tertiary: #e4e4e7;
|
||||
--bg-quaternary: #d4d4d8;
|
||||
--bg-hover: #eeeeef;
|
||||
|
||||
--success: #16a34a;
|
||||
--success-hover: #15803d;
|
||||
--success-light: rgba(22, 163, 74, 0.1);
|
||||
--success-border: rgba(22, 163, 74, 0.2);
|
||||
|
||||
--warning: #ea580c;
|
||||
--warning-hover: #c2410c;
|
||||
--warning-light: rgba(234, 88, 12, 0.1);
|
||||
--warning-border: rgba(234, 88, 12, 0.2);
|
||||
|
||||
--error: #e11d48;
|
||||
--error-hover: #be123c;
|
||||
--error-light: rgba(225, 29, 72, 0.1);
|
||||
--error-border: rgba(225, 29, 72, 0.2);
|
||||
|
||||
--info: #0ea5e9;
|
||||
--info-hover: #0284c7;
|
||||
--info-light: rgba(14, 165, 233, 0.1);
|
||||
--info-border: rgba(14, 165, 233, 0.2);
|
||||
|
||||
--text-primary: #09090b;
|
||||
--text-secondary: #3f3f46;
|
||||
--text-tertiary: #71717a;
|
||||
--text-quaternary: #a1a1aa;
|
||||
--text-disabled: #d4d4d8;
|
||||
|
||||
--border-primary: #e4e4e7;
|
||||
--border-secondary: #d4d4d8;
|
||||
--border-tertiary: #a1a1aa;
|
||||
--border-quaternary: #71717a;
|
||||
|
||||
--input-bg: #ffffff;
|
||||
--input-border: #e4e4e7;
|
||||
--input-border-focus: #4f46e5;
|
||||
--input-text: #09090b;
|
||||
--input-placeholder: #a1a1aa;
|
||||
--input-shadow-focus: 0 0 0 3px rgba(79, 70, 229, 0.12);
|
||||
|
||||
--card-bg: #ffffff;
|
||||
--card-border: #e4e4e7;
|
||||
--card-hover-border: #d4d4d8;
|
||||
|
||||
--table-header-bg: #f4f4f5;
|
||||
--table-row-hover: #fafafa;
|
||||
--table-border: #e4e4e7;
|
||||
--table-selected: rgba(79, 70, 229, 0.08);
|
||||
|
||||
--scrollbar-track: #f4f4f5;
|
||||
--scrollbar-thumb: #d4d4d8;
|
||||
--scrollbar-thumb-hover: #a1a1aa;
|
||||
|
||||
--status-pending: #eab308;
|
||||
--status-pending-light: rgba(234, 179, 8, 0.12);
|
||||
--status-approved: #22c55e;
|
||||
--status-approved-light: rgba(34, 197, 94, 0.12);
|
||||
--status-played: #71717a;
|
||||
--status-played-light: rgba(113, 113, 122, 0.12);
|
||||
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
|
||||
--shadow-md: 0 2px 8px -2px rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.03);
|
||||
--shadow-lg: 0 8px 24px -4px rgba(0, 0, 0, 0.06), 0 2px 8px -4px rgba(0, 0, 0, 0.04);
|
||||
--shadow-xl: 0 16px 40px -8px rgba(0, 0, 0, 0.08), 0 4px 16px -8px rgba(0, 0, 0, 0.05);
|
||||
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
--radius-xl: 10px;
|
||||
--radius-2xl: 12px;
|
||||
}
|
||||
|
||||
/* 娣辫壊涓婚鐗瑰畾璋冩暣 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
/* 鍦ㄦ繁鑹叉ā寮忎笅鍙互杩涜寰皟 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 楂樺姣斿害妯″紡鏀寔 */
|
||||
@media (prefers-contrast: high) {
|
||||
:root {
|
||||
--border-primary: #444444;
|
||||
--border-secondary: #555555;
|
||||
--border-tertiary: #666666;
|
||||
--text-tertiary: #aaaaaa;
|
||||
--text-quaternary: #888888;
|
||||
}
|
||||
}
|
||||
|
||||
/* 鍑忓皯鍔ㄧ敾妯″紡鏀寔 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
:root {
|
||||
--transition-fast: 0s;
|
||||
--transition-normal: 0s;
|
||||
--transition-slow: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
/* 鍏ㄥ眬婊氬姩鏉℃牱寮?*/
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background: var(--scrollbar-track);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbar-thumb);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--scrollbar-thumb-hover);
|
||||
}
|
||||
|
||||
/* 鍏ㄥ眬閫夋嫨鏂囨湰鏍峰紡 */
|
||||
::selection {
|
||||
background: var(--primary-light);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* 鍏ㄥ眬鐒︾偣鏍峰紡 */
|
||||
*:focus {
|
||||
outline: 2px solid var(--primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
*:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 鍏ㄥ眬绂佺敤鐘舵€佹牱寮?*/
|
||||
*:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* 鍏ㄥ眬閾炬帴鏍峰紡 */
|
||||
a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition-normal);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--primary-hover);
|
||||
}
|
||||
|
||||
/* 鍏ㄥ眬鎸夐挳閲嶇疆 */
|
||||
button {
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
* {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
button,
|
||||
a,
|
||||
input,
|
||||
textarea {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
*:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
button,
|
||||
a {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 鍏ㄥ眬杈撳叆妗嗛噸缃?*/
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/* 鍏ㄥ眬鍥剧墖鏍峰紡 */
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* 鍏ㄥ眬琛ㄦ牸鏍峰紡 */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 鍏ㄥ眬浠ｇ爜鏍峰紡 */
|
||||
code,
|
||||
pre {
|
||||
font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 2px 4px;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: var(--spacing-lg);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
pre code {
|
||||
padding: 0;
|
||||
background: none;
|
||||
}
|
||||
Reference in New Issue
Block a user