chatgpt-web/src/app.scss

150 lines
2.7 KiB
SCSS

@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#app {
display: flex;
flex-direction: column;
flex-grow: 1;
min-height: 100vh;
section.section {
flex-grow: 1;
}
}
.rotate {
animation: rotating 10s linear infinite;
}
a.is-disabled {
pointer-events: none;
cursor: default;
opacity: 0.5;
}
.greyscale {
filter: grayscale(100%);
}
.user-message {
max-width: 90%;
margin-right: 0;
margin-left: auto;
width: fit-content;
}
.assistant-message {
max-width: 90%;
width: fit-content;
}
/* Show the edit button on hover of the user message */
.user-message:hover .editbutton {
/* TODO: add when ready: display: block !important; */
text-decoration: none !important;
}
/* Swap the border on user messages to the other side */
.user-message > .message-body {
border-width: 0 4px 0 0 !important;
}
/* Show the edit button on hover of the chat name */
.chat-header:hover .editbutton {
display: inline !important;
text-decoration: none !important;
}
/* Style the chat input */
.chat-input {
overflow-y: hidden;
resize: vertical;
}
$footer-padding: 3rem 1.5rem;
$fullhd: 2000px;
$modal-content-width: 1000px;
@import "/node_modules/bulma/bulma.sass";
/* Pulsing effect - background goes to red color and back */
.is-pulse {
animation: pulse 1s infinite;
}
@keyframes pulse {
0% {
background-color: initial; /* Default color */
}
50% {
background-color: $danger; /* Red */
}
100% {
background-color: initial /* Default color */
}
}
/* Support for dark mode */
$modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove this once a new version of bulma-prefers-dark is released
@import "/node_modules/bulma-prefers-dark/build/bulma-prefers-dark.sass";
.modal-card-body { // remove this once https: //github.com/jloh/bulma-prefers-dark/pull/90 is merged and released
background-color: $background-dark;
}
/* Support for copy code button */
.code-block > button {
position: absolute;
top: 0.5rem;
right: 0.5rem;
}
/* Make menu stick on the left side */
.menu {
position: sticky;
top: 1rem;
}
.menu-list {
a:hover {
.delete-btn {
display: block;
}
}
}
.delete-btn {
display: none;
position: absolute;
width: 20px;
height: 20px;
top: 50%;
right: 0;
transform: translateY(-50%);
margin-right: 5px;
}
/* Loading chat messages */
.is-loading {
opacity: 0.5;
@include loader;
width: 1.5rem;
height: 1.5rem;
border-width: 0.25em;
}
/* Support for fullwidth dropdowns, see https://github.com/jgthms/bulma/issues/2055 */
.dropdown.is-fullwidth {
display: flex;
.dropdown-trigger,
.dropdown-menu {
width: 100%;
}
}