Spaces:
Runtime error
Runtime error
html, body { | |
background: #0e1320 ; | |
margin: 0; | |
padding: 0; | |
color: white; | |
font-family: monospace; | |
} | |
body{ | |
padding-top: 10px; | |
} | |
h1{ | |
color: white; | |
font-family: monospace; | |
text-align: center; | |
} | |
textarea{ | |
resize: none; | |
outline: none; | |
overflow: auto; | |
border: none; | |
padding: 10px; | |
width: 408px; | |
} | |
textarea#prompt-inp { | |
/*border-top-left-radius: 6px;*/ | |
/*border-top-right-radius: 6px;*/ | |
} | |
textarea#neg-prompt-inp { | |
/*border-bottom-left-radius: 6px;*/ | |
/*border-bottom-right-radius: 6px;*/ | |
} | |
button#show-hide-diff-btn { | |
border: 4px solid white; | |
color: white; | |
cursor: pointer; | |
background: none; | |
border-top-left-radius: 10px; | |
border-bottom-left-radius: 10px; | |
text-align: center; | |
height: 105px; | |
width: 105px; | |
margin-right: 3px; | |
} | |
button#api-btn, button#running-api-btn { | |
border: 4px solid white; | |
color: white; | |
cursor: pointer; | |
background: none; | |
border-top-right-radius: 10px; | |
border-bottom-right-radius: 10px; | |
text-align: center; | |
height: 105px; | |
width: 105px; | |
margin-left: 3px; | |
} | |
div.main-container{ | |
display: flex; | |
justify-content: center; | |
} | |
div#left-panel, div#right-panel{ | |
/*border: 1px solid white;*/ | |
border-radius: 10px; | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
height: auto; | |
margin: 20px; | |
width: 100px; | |
} | |
i{ | |
font-size: 30px; | |
} | |
span.spec-onions { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
} | |
span.spec-onions > i.fa-solid.fa-circle { | |
margin-left: -14px; | |
} | |
button#hide-onion-btn { | |
border-color: #ef70ff ; | |
color: #ef70ff ; | |
} | |
button.tool-active { | |
border-color: #70c9ff ; | |
color: #70c9ff ; | |
} | |
div#right-panel > button, div#left-panel > button{ | |
background: none; | |
border: 4px solid rgb(181,181,181); | |
border-radius: 10px; | |
color: rgb(181,181,181); | |
cursor: pointer; | |
height: 70px; | |
margin-bottom: 10px; | |
text-align: center; | |
width: 70px; | |
} | |
div#right-panel > button:hover, div#left-panel > button:hover{ | |
color:white; | |
border-color:white; | |
} | |
button#play-btn{ | |
border: 4px solid #6bff6f ; | |
color: #6bff6f ; | |
} | |
button#stop-btn { | |
border: 4px solid #ff303b ; | |
color: #ff303b ; | |
} | |
div#timeline-ctn{ | |
align-items: center; | |
/*border: 1px dashed white;*/ | |
border-radius: 10px; | |
display: flex; | |
height: 60px; | |
justify-content: center; | |
margin: 4px 0; | |
} | |
div#canvas-ctn{ | |
/*background: white;*/ | |
/*border: 1px solid white;*/ | |
/*border-radius : 10px;*/ | |
/*padding: 20px;*/ | |
/*width: 512px;*/ | |
} | |
canvas { | |
cursor: crosshair; | |
display: block; | |
border: 1px solid #dbdbdb; | |
border-radius: 6px; | |
} | |
.aframe{ | |
display: flex; | |
align-items: center; | |
color: black; | |
font-family: monospace; | |
justify-content: center; | |
width: 30px; | |
height: 30px; | |
background: white; | |
border: 2px solid #ffffff; | |
border-radius: 20px; | |
cursor: pointer; | |
margin: 0 2px; | |
} | |
.current-frame{ | |
background: #ffcf1e; | |
border: 2px solid #ff9d0c; | |
color: #422700; | |
font-weight: bold; | |
} | |
#timeline, #ui-container{ | |
display: flex; | |
} | |
div#ml-config-ctn{ | |
display: flex; | |
width: 512px; | |
justify-content: center; | |
margin-top: 20px; | |
} | |
button#show-hide-diff-btn { | |
/*display: none;*/ | |
} | |
div#prompts-ctn { | |
display: flex; | |
flex-direction: column; | |
gap: 3px; | |
} | |
.hide{ | |
display: none; | |
} | |
i.fa-solid.fa-spinner{ | |
animation: rotation .8s infinite linear; | |
} | |
@keyframes rotation { | |
from { | |
transform: rotate(0deg); | |
} | |
to { | |
transform: rotate(359deg); | |
} | |
} |