neetnestor's picture
Style update
66f35c4
raw
history blame
3.13 kB
:root {
font-size: 16px;
}
body {
padding: 2rem;
font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
display: flex;
flex-direction: column;
flex-grow: 1;
background: white;
}
main {
width: 100%;
display: flex;
flex-grow: 1;
flex-direction: column;
gap: 1.5rem;
align-items: center;
min-width: min(0, 100%);
position: relative;
margin: auto;
padding: 2rem;
}
h1,
h2,
h3,
h4 {
text-align: center;
margin-top: 0;
margin-bottom: 0;
}
h1 {
font-size: 1.4rem;
text-align: center;
}
h4 {
line-height: 1.3;
font-weight: 600;
font-size: 0.8rem;
}
p {
color: rgb(107, 114, 128);
margin-bottom: 10px;
margin-top: 5px;
}
.card {
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
overflow-y: hidden;
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
display: flex;
flex-direction: inherit;
flex-wrap: wrap;
padding: 10px 12px;
}
.card p:last-child {
margin-bottom: 0;
}
form {
flex-grow: 1;
min-width: min(160px, 100%);
margin-bottom: 0;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 620px;
gap: 1.5rem;
}
form .container {
gap: 0;
}
form span {
display: inline-block;
position: relative;
font-weight: 400;
line-height: 1.4;
color: #6b7280;
font-size: 0.8rem;
margin-bottom: 0.5rem;
}
select {
display: block;
width: 100%;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
padding: 10px;
outline: none !important;
box-shadow: 0 0 0 3px transparent, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset;
background: white;
color: #1f2937;
font-weight: 400;
font-size: 14px;
line-height: 1.4;
}
textarea {
display: block;
width: calc(100% - 20px);
overflow-y: scroll;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
padding: 10px;
position: relative;
outline: none !important;
box-shadow: 0 0 0 3px transparent, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset;
background: white;
color: #1f2937;
font-weight: 400;
font-size: 14px;
line-height: 1.4;
}
#prompt {
height: 12rem;
}
#schema {
height: 20rem;
}
#output {
height: fit-content;
width: calc(100% - 20px);
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
padding: 10px;
position: relative;
outline: none !important;
box-shadow: 0 0 0 3px transparent, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset;
background: white;
color: #1f2937;
font-weight: 400;
font-size: 14px;
line-height: 1.4;
}
button {
max-width: 620px;
color: #ea580c;
background: linear-gradient(to bottom right, #ffedd5, #fdba74);
border: 1px solid #fed7aa;
border-radius: 0.5rem;
padding: 0.5rem 1rem;
width: 100%;
}
button:hover {
border-color: #fed7aa;
background: linear-gradient(to bottom right, #ffedd5, #fed7aa);
color: #ea580c;
cursor: pointer;
}
@media (min-width: 1600px) {
main {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: start;
max-width: 1600px;
}
#right-col {
flex-direction: column;
}
h1 {
font-size: 2rem;
padding-bottom: 0.4rem;
}
h4 {
font-size: 1rem;
}
}