Apriel-Chat / styles.css
bradnow's picture
Add prompt logging and opt-out options for users. Additional logging and timing info added.
f6b99ca
:root {
--color-grey-50: #f9fafb;
}
.toast-body {
background-color: var(--color-grey-50);
}
.html-container:has(.css-styles) {
padding: 0;
margin: 0;
}
.css-styles {
height: 0;
}
.model-message {
text-align: end;
}
.model-dropdown-container {
display: flex;
align-items: center;
gap: 10px;
padding: 0;
}
.chatbot {
max-height: 1400px;
}
button.cancel {
border: var(--button-border-width) solid var(--button-cancel-border-color);
background: var(--button-cancel-background-fill);
color: var(--button-cancel-text-color);
box-shadow: var(--button-cancel-shadow);
}
button.cancel:hover, .cancel[disabled] {
background: var(--button-cancel-background-fill-hover);
color: var(--button-cancel-text-color-hover);
}
.opt-out-message {
top: 8px;
}
.opt-out-message .html-container, .opt-out-checkbox label {
font-size: 14px !important;
padding: 0 !important;
margin: 0 !important;
color: var(--neutral-400) !important;
}
@media (max-width: 800px) {
.responsive-row {
flex-direction: column;
}
.model-message {
text-align: start;
font-size: 10px !important;
}
.model-dropdown-container {
flex-direction: column;
align-items: flex-start;
}
.chatbot {
max-height: 800px;
}
}
@media (max-width: 400px) {
.responsive-row {
flex-direction: column;
}
.model-message {
text-align: start;
font-size: 10px !important;
}
.model-dropdown-container {
flex-direction: column;
align-items: flex-start;
}
.chatbot {
max-height: 360px;
}
}
@media (max-width: 1280px) {
.chatbot {
max-height: 900px;
}
}
@media (max-height: 932px) {
.chatbot {
max-height: calc(100dvh - 400px);
}
}
@media (max-height: 1280px) {
.chatbot {
max-height: calc(100dvh - 400px);
}
}
@media (min-height: 1281px) {
.chatbot {
/*max-height: calc(100dvh - 400px);*/
}
}