mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-03-25 12:10:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix styling issues with Audio, Image and Video components (#5934)

Browse Source 
* audio styling fix

* video styling fix

* image examples styling fix

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
This commit is contained in:
Ali Abdalla 2023-10-16 12:51:05 -07:00 committed by GitHub
parent 3618238960
commit 8d909624f6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.changeset/sad-webs-end.md Normal file
View File

@ -0,0 +1,8 @@
---
"@gradio/audio": minor
"@gradio/image": minor
"@gradio/video": minor
"gradio": minor
---
feat:Fix styling issues with Audio, Image and Video components

6
js/audio/interactive/Audio.svelte
View File

@ -362,10 +362,4 @@
opacity: 0;
}
}
.container {
padding: var(--size-2);
width: var(--size-full);
height: var(--size-14);
}
</style>

9
js/audio/shared/Audio.svelte
View File

@ -31,3 +31,12 @@
{:catch error}
<p style="color: red;">{error.message}</p>
{/await}
<style>
audio {
padding: var(--size-2);
width: var(--size-full);
height: var(--size-14);
}
</style>

5
js/image/example/Image.svelte
View File

@ -17,11 +17,6 @@
</div>
<style>
.container {
border-radius: var(--radius-lg);
max-width: none;
}
.container.selected {
border-color: var(--border-color-accent);
}

2
js/image/shared/Image.svelte
View File

@ -18,5 +18,7 @@
img {
max-width: 100%;
max-height: 100%;
border-radius: var(--radius-lg);
max-width: none;
}
</style>

8
js/video/shared/Player.svelte
View File

@ -169,14 +169,6 @@
background-color: rgba(255, 255, 255, 0.9);
}
video {
position: inherit;
background-color: black;
width: var(--size-full);
height: var(--size-full);
object-fit: contain;
}
.mirror {
transform: scaleX(-1);
}

7
js/video/shared/Video.svelte
View File

@ -61,7 +61,10 @@
<style>
video {
max-width: 100%;
max-height: 100%;
position: inherit;
background-color: black;
width: var(--size-full);
height: var(--size-full);
object-fit: contain;
}
</style>