Spaces:
Sleeping
Sleeping
body { | |
--text: hsl(0 0% 15%); | |
padding: 2.5rem; | |
font-family: sans-serif; | |
color: var(--text); | |
} | |
body.dark-theme { | |
--text: hsl(0 0% 90%); | |
background-color: hsl(223 39% 7%); | |
} | |
main { | |
max-width: 80rem; | |
text-align: center; | |
} | |
section { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
} | |
a { | |
color: var(--text); | |
} | |
form { | |
width: 30rem; | |
margin: 0 auto; | |
border-radius: 3px; | |
} | |
input { | |
width: 100%; | |
border-radius: 3px; | |
} | |
button { | |
cursor: pointer; | |
border-radius: 3px; | |
} | |
.text-gen-output { | |
min-height: 1.2rem; | |
margin: 1rem; | |
border: 0.5px solid grey; | |
border-radius: 3px; | |
} | |
#chat-box { | |
width: 60%; | |
height: 40vh; | |
overflow-y: auto; | |
border: 1px solid #ccc; | |
padding: 1rem; | |
border-radius: 3px; | |
resize: none; | |
} | |
#chat-input { | |
width: 60%; | |
height: 3rem; | |
overflow-y: auto; | |
resize: none; | |
border-radius: 3px; | |
} | |
.spinner-overlay { | |
position: fixed; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background: rgba(0, 0, 0, 0.5); | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
z-index: 1000; | |
display: none; /* Initially hidden */ | |
} | |
.spinner { | |
border: 8px solid rgba(255, 255, 255, 0.3); | |
border-top: 8px solid white; | |
border-radius: 50%; | |
width: 60px; | |
height: 60px; | |
animation: spin 1s linear infinite; | |
} | |
@keyframes spin { | |
0% { transform: rotate(0deg); } | |
100% { transform: rotate(360deg); } | |
} | |
.user-message { | |
text-align: right; | |
margin: 0.5rem 0; | |
} | |
.bot-reply { | |
text-align: left; | |
margin: 0.5rem 0; | |
} |