youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-06 02:18:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: update AudioPlayer styles with CSS variables and improve VideoGallery rendering

Browse Source
This commit is contained in:
twwu
2024-11-12 15:49:00 +08:00
parent 8203b23df2
commit 7791d290c7
2 changed files with 13 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
web/app/components/base/audio-gallery/AudioPlayer.module.css
View File

@ -2,15 +2,15 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
background-color: #ffffff; background-color: var(--color-components-chat-input-audio-bg-alt);
border-radius: 10px; border-radius: 10px;
padding: 8px; padding: 8px;
min-width: 240px; min-width: 240px;
max-width: 420px; max-width: 420px;
max-height: 40px; max-height: 40px;
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
border: 1px solid rgba(16, 24, 40, 0.08); border: 1px solid var(--color-components-panel-border-subtle);
box-shadow: 0 1px 2px rgba(9, 9, 11, 0.05); box-shadow: 0 1px 2px var(--color-shadow-shadow-3);
gap: 8px; gap: 8px;
} }
@ -19,8 +19,8 @@
width: 16px; width: 16px;
height: 16px; height: 16px;
border-radius: 50%; border-radius: 50%;
background-color: #296DFF; background-color: var(--color-components-button-primary-bg);
color: white; color: var(--color-components-chat-input-audio-bg-alt);
border: none; border: none;
cursor: pointer; cursor: pointer;
align-items: center; align-items: center;
@ -30,16 +30,15 @@
} }
.playButton:hover { .playButton:hover {
background-color: #3367d6; background-color: var(--color-components-button-primary-bg-hover);
} }
.playButton:disabled { .playButton:disabled {
background-color: #bdbdbf; background-color: var(--color-components-button-primary-bg-disabled);
} }
.audioControls { .audioControls {
flex-grow: 1; flex-grow: 1;
} }
.progressBarContainer { .progressBarContainer {
@ -76,8 +75,8 @@
.timeDisplay { .timeDisplay {
/* position: absolute; */ /* position: absolute; */
color: #296DFF; color: var(--color-text-accent-secondary);
border-radius: 2px; font-size: 12px;
order: 0; order: 0;
height: 100%; height: 100%;
width: 50px; width: 50px;
@ -97,7 +96,6 @@
} */ } */
.duration { .duration {
background-color: rgba(255, 255, 255, 0.8);
padding: 2px 4px; padding: 2px 4px;
border-radius: 10px; border-radius: 10px;
} }
@ -114,6 +112,6 @@
} }
.playButton svg path, .playButton svg path,
.playButton svg rect{ .playButton svg rect {
fill:currentColor; fill: currentColor;
} }

2
web/app/components/base/video-gallery/index.tsx
View File

@ -6,7 +6,7 @@ type Props = {
} }
const VideoGallery: React.FC<Props> = ({ srcs }) => { const VideoGallery: React.FC<Props> = ({ srcs }) => {
return (<><br/>{srcs.map((src, index) => (<><br/><VideoPlayer key={`video_${index}`} src={src}/></>))}</>) return (<><br/>{srcs.map((src, index) => (<React.Fragment key={`video_${index}`}><br/><VideoPlayer src={src}/></React.Fragment>))}</>)
} }
export default React.memo(VideoGallery) export default React.memo(VideoGallery)