Spaces:
Sleeping
Sleeping
* { | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
font-family: sans-serif; | |
} | |
gradio-app { | |
background-color: #121212 ; | |
background-image: url("file=assets/bg.png") ; | |
background-size: cover ; | |
height: 100vh; | |
} | |
body > gradio-app > div > div > div > div.contain{ | |
display: flex; | |
} | |
gradio-app .gradio-container{ | |
max-width: none ; | |
padding: 30px ; | |
} | |
.gradio-container>.main{ | |
height: 100%; | |
} | |
body > gradio-app > div > div.main > div.wrap { | |
height: 100%; | |
} | |
body > gradio-app > div > div.main > div.wrap > div.contain{ | |
height: 100%; | |
} | |
#component-0 { | |
width: 100%; | |
gap: 0; | |
display: flex; | |
flex-direction: column; | |
} | |
#header_block { | |
padding: 10px 0px; | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
} | |
h1 { | |
font-size: 50px ; | |
color: #c0c0af ; | |
} | |
#logos_row { | |
width: 269px; | |
height: 70px; | |
} | |
} | |
#logos_block img { | |
flex-shrink: 1; | |
flex-grow: 0; | |
} | |
#text_row { | |
display: flex; | |
justify-content: space-between; | |
letter-spacing: 0.5px; | |
font-size: 18px; | |
} | |
#text_row span{ | |
color: white ; | |
} | |
#main_block { | |
flex-grow: 1; | |
display: flex; | |
flex-direction: column; | |
} | |
#board_row { | |
flex-wrap:nowrap; | |
padding: 20px 0px; | |
display: flex; | |
flex-grow:1; | |
align-items: center; | |
justify-content: space-between; | |
} | |
#radio_row { | |
margin: 15px, 0px; | |
align-self: center; | |
} | |
#radio_row .wrap { | |
justify-content: center; | |
} | |
.image_container { | |
overflow: visible ; | |
flex-shrink: 0 ; | |
flex-grow: 0 ; | |
flex-basis: 480px ; | |
margin: 0px; | |
position: relative; | |
display: inline-block; | |
text-align: center; | |
aspect-ratio: 1; | |
border: 2px solid #2c2c2c; | |
background-color: #121212; | |
border-radius: 30px ; | |
} | |
.image_container>div.styler { | |
overflow:hidden; | |
border-radius:30px; | |
flex-grow: 1; | |
} | |
#input_image { | |
flex-grow: 1; | |
} | |
#output_image{ | |
flex-grow: 1; | |
} | |
#input_image > div.image-container> div.wrap > span.brush{ | |
display:none; | |
} | |
#input_image > div.image-container> div.wrap > span.col{ | |
display:none; | |
} | |
#input_image > div.image-container > div > button { | |
display:none; | |
} | |
#output_image > div.icon-buttons{ | |
display:none; | |
} | |
#eraser_container.block{ | |
z-index:100; | |
width: 62px; | |
height: 62px; | |
position: absolute; | |
top: calc(50% - 31px); | |
right: -31px; | |
} | |
#draw_cta_container.block{ | |
width: 124px; | |
z-index:100; | |
position: absolute; | |
top: -91px; | |
right: -124px; | |
} | |
#eraser { | |
padding: 16px; | |
height: 62px; | |
width:62px; | |
border-radius: 50%; | |
border: none; | |
background-color: rgb(120 120 120); | |
} | |
#eraser_icon { | |
display: inline-block; | |
width: 30px; | |
height: 30px; | |
background-image: url("file=assets/eraser.png"); | |
background-size: cover; | |
} | |
#footer_block { | |
position: relative; | |
display: flex; | |
flex-direction: row; | |
justify-content: center; | |
margin-top: 30px; | |
margin-bottom: 5%; | |
} | |
input[type="radio"] { | |
display: none ; | |
} | |
.form { | |
background-color: transparent ; | |
border: none ; | |
} | |
fieldset { | |
background-color: transparent ; | |
border: none ; | |
} | |
label { | |
padding:0px ; | |
border: none ; | |
background-color: transparent ; | |
background: none ; | |
} | |
input[type="radio"] + span { | |
display: inline-block; | |
font-weight: normal; | |
font-size: 20px; | |
color: white; | |
padding: 10px 20px; | |
border-radius: 48px; | |
border: 1px solid #494949; | |
} | |
input[type="radio"]:checked + span { | |
background-color: #c0c0af; | |
border-color: #494949; | |
color: black; | |
} | |
footer { | |
display: none ; | |
} | |
#fullscreen { | |
transition: 150ms; | |
position: absolute; | |
bottom: 0; | |
right: 0; | |
margin: auto; | |
height: fit-content; | |
width: fit-content; | |
background-color: rgba(255, 255, 255, 0.2); | |
border-color: transparent; | |
border-radius: 50%; | |
padding: 16px; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
outline: none; | |
cursor: pointer; | |
} | |