body {
font-family: 'Google Sans', 'Segoe UI', sans-serif;
background: #fff;
}
#background, .tombol-convert, .tombol-download {
display: none;
}
.thumbnail-wrapper {
position: relative;
display: block;
margin: auto;
padding: 20px 10px;
max-width: 1000px;
width: calc(100% - 20px);
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
line-height: 1.5;
}
.formthumb {
position: relative;
display: block;
margin: 10px 0;
padding: 0;
width: 100%;
}
.formthumb label {
position: relative;
display: block;
margin-bottom: 10px;
font-size: 16px;
font-weight: 600;
color: #444;
}
.formthumb input, .formthumb select {
position: relative;
display: block;
margin: auto;
padding: 10px 15px;
width: calc(100% - 30px);
background: #fff;
color: #444;
border: 1.5px solid #007bff;
outline: none;
border-radius: 5px;
}
.formthumb select {
width: 100%;
}
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
::-webkit-file-upload-button {
background: #007bff;
color: #fff;
padding: 5px 10px;
border: none;
border-radius: 5px;
outline: 0;
cursor: pointer;
}
.background {
width: 900px;
height: 472px;
color: #fff;
overflow: hidden;
position: relative;
z-index: 1;
opacity: 1;
visibility: visible;
user-select: none;
margin: 30px auto;
}
.content-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 30px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
max-height: 420px;
color: #fff !important;
opacity: 1 !important;
}
.footer-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
font-family: 'Google Sans', 'Segoe UI', sans-serif;
font-size: 20px;
font-weight: 700;
text-shadow: 4px 2px 5px rgb(0 0 0 / 20%);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 999;
}
#mistar {
width: 60px;
height: 10px;
display: inline-block;
background: #fff;
margin-right: 15px;
vertical-align: -3px;
}
#output-label {
position: relative;
display: inline-block;
font-family: 'Google Sans', 'Segoe UI', sans-serif;
font-size: 20px;
font-weight: 700;
text-shadow: 4px 2px 5px rgb(0 0 0 / 20%);
z-index: 999;
vertical-align: top;
}
.title-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 auto;
width: 100%;
height: 400px;
font-size: 13px;
margin-bottom: 20px;
transition: all 0.5s;
}
#output-judul {
font-size: 50px;
font-family: 'Google Sans', 'Segoe UI', sans-serif;
font-weight: 700;
padding-right: 10px;
line-height: 1.2;
text-shadow: 4px 2px 5px rgb(0 0 0 / 20%);
overflow: hidden;
z-index: 999;
opacity: 1;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
-webkit-box-flex: 1;
-ms-flex: 1 1 50%;
flex: 1 1 auto;
width: calc(100% - 300px);
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto;
}
#output-image {
-webkit-box-flex: 1;
-ms-flex: 1 1 50%;
flex: 1 1 auto;
width: 300px;
min-height: 250px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto;
border-radius: 7px;
}
#output-nama {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#content-container {
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -999;
}
#canvas {
position: relative;
display: block;
margin: 20px auto;
text-align: center;
}
.tombol-convert, .tombol-download {
position: relative;
margin: 20px auto;
text-align: center;
}
button#convert-image,button#download-image,button#reset-image{
color: #fff;
background-color: #007bff;
display: inline-block;
text-align: center;
cursor: pointer;
outline: none;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: bold;
padding: 7px 15px;
margin: 0 auto;
}