mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-01-24 10:54:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Remove the styles from the Image/Video primitive components and Fix the container styles (#6726)

Browse Source 
* Remove the styles from the Image/Video primitive components and Fix the container styles

* add changeset

* Fix image example size styles

* Remove border from image/Example with type=gallery

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
This commit is contained in:
Yuichiro Tachibana (Tsuchiya) 2023-12-11 23:15:02 +01:00 committed by GitHub
parent a1b966edf7
commit 21cfb0acc3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.changeset/legal-geese-agree.md Normal file
View File

@ -0,0 +1,7 @@
---
"@gradio/image": minor
"@gradio/video": minor
"gradio": minor
---
feat:Remove the styles from the Image/Video primitive components and Fix the container styles

7
js/image/Example.svelte
View File

@ -17,6 +17,11 @@
</div>
<style>
.container :global(img) {
width: 100%;
height: 100%;
}
.container.selected {
border-color: var(--border-color-accent);
}
@ -25,13 +30,13 @@
margin: 0 auto;
border: 2px solid var(--border-color-primary);
border-radius: var(--radius-lg);
overflow: hidden;
width: var(--size-20);
height: var(--size-20);
object-fit: cover;
}
.container.gallery {
border: 2px solid var(--border-color-primary);
height: var(--size-20);
max-height: var(--size-20);
object-fit: cover;

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

@ -13,11 +13,3 @@
{:catch error}
<p style="color: red;">{error.message}</p>
{/await}
<style>
img {
width: 100%;
height: 100%;
border-radius: var(--radius-lg);
}
</style>

10
js/video/Example.svelte
View File

@ -43,10 +43,13 @@
<style>
.container {
flex: none;
border: 2px solid var(--border-color-primary);
border-radius: var(--radius-lg);
max-width: none;
}
.container :global(video) {
width: var(--size-full);
height: var(--size-full);
object-fit: cover;
}
.container:hover,
.container.selected {
@ -54,6 +57,9 @@
}
.container.table {
margin: 0 auto;
border: 2px solid var(--border-color-primary);
border-radius: var(--radius-lg);
overflow: hidden;
width: var(--size-20);
height: var(--size-20);
object-fit: cover;

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

@ -254,4 +254,8 @@
width: var(--size-full);
border-radius: var(--radius-xl);
}
.wrap :global(video) {
height: var(--size-full);
width: var(--size-full);
}
</style>

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

@ -121,13 +121,4 @@
background: #fff;
}
}
video {
position: inherit;
background-color: black;
width: var(--size-full);
height: var(--size-full);
object-fit: contain;
border-radius: var(--radius-xl);
}
</style>