Spaces:
Runtime error
Runtime error
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'); | |
/* the outermost contrained of the app */ | |
.main{ | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
width: 1200px; | |
} | |
/* #main_row{ | |
} */ | |
/* hide this class */ | |
.svelte-p4aq0j { | |
display: none; | |
} | |
.wrap.svelte-p4aq0j.svelte-p4aq0j { | |
display: none; | |
} | |
#download_sketch{ | |
display: none; | |
} | |
#download_output{ | |
display: none; | |
} | |
#column_input, #column_output{ | |
width: 500px; | |
display: flex; | |
/* justify-content: center; */ | |
align-items: center; | |
} | |
#tools_header, #input_header, #output_header, #process_header { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
width: 400px; | |
} | |
#nn{ | |
width: 100px; | |
height: 100px; | |
} | |
#column_process{ | |
display: flex; | |
justify-content: center; /* Center horizontally */ | |
align-items: center; /* Center vertically */ | |
height: 600px; | |
} | |
/* this is the "pix2pix-turbo" above the process button */ | |
#description > span{ | |
display: flex; | |
justify-content: center; /* Center horizontally */ | |
align-items: center; /* Center vertically */ | |
} | |
/* this is the "UNDO_BUTTON, X_BUTTON" */ | |
div.svelte-1030q2h{ | |
width: 30px; | |
height: 30px; | |
display: none; | |
} | |
#component-5 > div{ | |
border: 0px; | |
box-shadow: none; | |
} | |
#cb-eraser, #cb-line{ | |
display: none; | |
} | |
/* eraser text */ | |
#cb-eraser > label > span{ | |
display: none; | |
} | |
#cb-line > label > span{ | |
display: none; | |
} | |
.button-row { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
height: 50px; | |
border: 0px; | |
} | |
#my-toggle-pencil{ | |
background-image: url("https://icons.getbootstrap.com/assets/icons/pencil.svg"); | |
background-color: white; | |
background-size: cover; | |
margin: 0px; | |
box-shadow: none; | |
width: 40px; | |
height: 40px; | |
} | |
#my-toggle-pencil.clicked{ | |
background-image: url("https://icons.getbootstrap.com/assets/icons/pencil-fill.svg"); | |
transform: scale(0.98); | |
background-color: gray; | |
background-size: cover; | |
/* background-size: 95%; | |
background-position: center; */ | |
/* border: 2px solid #000; */ | |
margin: 0px; | |
box-shadow: none; | |
width: 40px; | |
height: 40px; | |
} | |
#my-toggle-eraser{ | |
background-image: url("https://icons.getbootstrap.com/assets/icons/eraser.svg"); | |
background-color: white; | |
background-color: white; | |
background-size: cover; | |
margin: 0px; | |
box-shadow: none; | |
width: 40px; | |
height: 40px; | |
} | |
#my-toggle-eraser.clicked{ | |
background-image: url("https://icons.getbootstrap.com/assets/icons/eraser-fill.svg"); | |
transform: scale(0.98); | |
background-color: gray; | |
background-size: cover; | |
margin: 0px; | |
box-shadow: none; | |
width: 40px; | |
height: 40px; | |
} | |
#my-button-undo{ | |
background-image: url("https://icons.getbootstrap.com/assets/icons/arrow-counterclockwise.svg"); | |
background-color: white; | |
background-size: cover; | |
margin: 0px; | |
box-shadow: none; | |
width: 40px; | |
height: 40px; | |
} | |
#my-button-clear{ | |
background-image: url("https://icons.getbootstrap.com/assets/icons/x-lg.svg"); | |
background-color: white; | |
background-size: cover; | |
margin: 0px; | |
box-shadow: none; | |
width: 40px; | |
height: 40px; | |
} | |
#my-button-down{ | |
background-image: url("https://icons.getbootstrap.com/assets/icons/arrow-down.svg"); | |
background-color: white; | |
background-size: cover; | |
margin: 0px; | |
box-shadow: none; | |
width: 40px; | |
height: 40px; | |
} | |
.pad2{ | |
padding: 2px; | |
background-color: white; | |
border: 2px solid #000; | |
margin: 10px; | |
display: flex; | |
justify-content: center; /* Center horizontally */ | |
align-items: center; /* Center vertically */ | |
} | |
#output_image, #input_image{ | |
border-radius: 0px; | |
border: 5px solid #000; | |
border-width: none; | |
} | |
#output_image > img{ | |
border: 5px solid #000; | |
border-radius: 0px; | |
border-width: none; | |
} | |
#input_image > div.image-container.svelte-p3y7hu > div.wrap.svelte-yigbas > canvas:nth-child(1){ | |
border: 5px solid #000; | |
border-radius: 0px; | |
border-width: none; | |
} |