style(frontend): 调整md预览器引用块和音乐播放器样式

调整md预览器引用块和音乐播放器样式

Author: lingview

frontend/src/components/ArticlePreview.jsx

@@ -532,7 +532,7 @@ export default function ArticlePreview({ article }) {
                 <li className="mb-1 text-gray-700 leading-relaxed" {...props} />
             ),
             blockquote: (props) => (
-                <blockquote className="border-l-4 border-blue-500 pl-4 italic my-4 text-gray-600 bg-gray-50 py-2 rounded-r" {...props} />
+                <blockquote className="border-l-4 border-gray-200 pl-4 italic my-4 text-gray-600 bg-gray-50 py-2 rounded-r" {...props} />
             ),
             table: (props) => (
                 <div className="overflow-x-auto my-4">
@@ -641,9 +641,9 @@ export default function ArticlePreview({ article }) {
                 const fullSrc = getFullImageUrl(src);
 
                 return (
-                    <div className="my-4 p-4 bg-gray-100 border border-gray-200 rounded-xl shadow-sm max-w-lg">
+                    <div className="my-4 p-4 bg-gray-100 border border-gray-200 rounded-xl shadow-sm max-w-lg audio-player">
                         <div className="flex items-center mb-3">
-                            <div className="flex-shrink-0 w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center mr-3">
+                            <div className="flex-shrink-0 w-8 h-8 bg-blue-400 rounded-full flex items-center justify-center mr-3">
                                 <Music className="h-4 w-4 text-white" />
                             </div>
                             <div className="flex-1 min-w-0">
@@ -659,7 +659,7 @@ export default function ArticlePreview({ article }) {
                             src={fullSrc}
                             controls={controls}
                             preload={preload}
-                            className="w-full rounded-md"
+                            className="w-full rounded-md audio-element"
                             style={{ height: "40px", outline: "none" }}
                             {...props}
                         >

frontend/src/components/dashboard/MarkdownPreview.jsx

@@ -57,7 +57,7 @@ export default function MarkdownPreview({ content, previewRef }) {
         ul: (props) => <ul className="list-disc list-inside mb-3 text-gray-700" {...props} />,
         ol: (props) => <ol className="list-decimal list-inside mb-3 text-gray-700" {...props} />,
         li: (props) => <li className="mb-1 text-gray-700" {...props} />,
-        blockquote: (props) => <blockquote className="border-l-4 border-blue-500 pl-4 italic my-3 text-gray-600" {...props} />,
+        blockquote: (props) => <blockquote className="border-l-4 border-gray-200 pl-4 italic my-3 text-gray-600 bg-gray-50 py-2 rounded-r" {...props} />,
         table: (props) => (
             <div className="overflow-x-auto my-4">
                 <table className="min-w-full border-collapse border border-gray-300" {...props} />
@@ -156,9 +156,9 @@ export default function MarkdownPreview({ content, previewRef }) {
             }
 
             return (
-                <div className="my-4 p-4 bg-gray-100 border border-gray-200 rounded-xl shadow-sm max-w-lg">
+                <div className="my-4 p-4 bg-gray-100 border border-gray-200 rounded-xl shadow-sm max-w-lg audio-player">
                     <div className="flex items-center mb-3">
-                        <div className="flex-shrink-0 w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center mr-3">
+                        <div className="flex-shrink-0 w-8 h-8 bg-blue-400 rounded-full flex items-center justify-center mr-3">
                             <Music className="h-4 w-4 text-white" />
                         </div>
                         <div className="flex-1 min-w-0">
@@ -172,7 +172,7 @@ export default function MarkdownPreview({ content, previewRef }) {
                         src={src}
                         controls={controls}
                         preload={preload}
-                        className="w-full rounded-md"
+                        className="w-full rounded-md audio-element"
                         style={{ height: "40px", outline: "none" }}
                         {...props}
                     />

frontend/src/index.css

@@ -398,6 +398,41 @@
   border-color: #4b5563;
 }
 
+/* 音频播放器暗色模式 */
+.dark .audio-player .bg-blue-400 {
+  background-color: #374151 !important;
+}
+
+.dark .audio-element {
+  background-color: #1f2937;
+  border: none;
+  outline: none;
+  box-shadow: none;
+  accent-color: #60a5fa;
+  color-scheme: dark;
+}
+
+.dark .audio-element::-webkit-media-controls-panel {
+  background-color: #1f2937;
+  border: none;
+  color: #f9fafb;
+}
+
+.dark .audio-element::-webkit-media-controls-play-button,
+.dark .audio-element::-webkit-media-controls-mute-button {
+  background-color: transparent;
+  color: #f9fafb;
+}
+
+.dark .audio-element::-webkit-media-controls-timeline {
+  background-color: #1f2937;
+}
+
+.dark .audio-element::-webkit-media-controls-current-time-display,
+.dark .audio-element::-webkit-media-controls-time-remaining-display {
+  color: #d1d5db;
+}
+
 .dark .pagination-prev-next:hover:not(.disabled) {
   background-color: #374151;
 }