212 lines
3.7 KiB
SCSS
212 lines
3.7 KiB
SCSS
.composer-ai-helper-modal {
|
|
.combobox,
|
|
.text-preview,
|
|
.ai-helper-waiting-selection {
|
|
margin: 10px 0 10px 0;
|
|
}
|
|
|
|
.text-preview,
|
|
.inline-diff {
|
|
ins {
|
|
background-color: var(--success-low);
|
|
text-decoration: underline;
|
|
}
|
|
del {
|
|
background-color: var(--danger-low);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.preview-area {
|
|
height: 200px;
|
|
}
|
|
}
|
|
|
|
&__old-value {
|
|
background-color: var(--danger-low);
|
|
color: var(--danger);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
&__new-value {
|
|
background-color: var(--success-low);
|
|
color: var(--success);
|
|
}
|
|
|
|
.selection-hint {
|
|
font-size: var(--font-down-2);
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
|
|
.topic-above-suggested-outlet.related-topics {
|
|
margin: 4.5em 0 1em;
|
|
}
|
|
|
|
.ai-helper-context-menu {
|
|
background: var(--secondary);
|
|
box-shadow: var(--shadow-card);
|
|
padding: 0.25rem;
|
|
max-width: 25rem;
|
|
border: 1px solid var(--primary-low);
|
|
list-style: none;
|
|
z-index: 999;
|
|
|
|
&.out-of-bounds {
|
|
visibility: hidden;
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.btn {
|
|
justify-content: left;
|
|
text-align: left;
|
|
background: none;
|
|
width: 100%;
|
|
border-radius: 0;
|
|
margin: 0;
|
|
|
|
&:focus,
|
|
&:hover {
|
|
color: var(--primary);
|
|
background: var(--d-hover);
|
|
|
|
.d-icon {
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
}
|
|
|
|
.d-button-label {
|
|
color: var(--primary-very-high);
|
|
}
|
|
|
|
&__options {
|
|
padding: 0.25rem;
|
|
}
|
|
|
|
&__loading {
|
|
.dot-falling {
|
|
margin-inline: 1rem;
|
|
margin-left: 1.5rem;
|
|
}
|
|
|
|
li {
|
|
display: flex;
|
|
padding: 0.5rem;
|
|
gap: 1rem;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
&__resets {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-flow: row wrap;
|
|
}
|
|
|
|
&__review {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-flow: row wrap;
|
|
}
|
|
}
|
|
|
|
.d-editor-input.loading {
|
|
animation: loading-text 1.5s infinite linear;
|
|
}
|
|
|
|
@keyframes loading-text {
|
|
0% {
|
|
color: var(--primary);
|
|
}
|
|
50% {
|
|
color: var(--tertiary);
|
|
}
|
|
100% {
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
|
|
// AI Typing indicator (taken from: https://github.com/nzbin/three-dots)
|
|
.dot-falling {
|
|
position: relative;
|
|
left: -9999px;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 5px;
|
|
background-color: var(--tertiary);
|
|
color: var(--tertiary);
|
|
box-shadow: 9999px 0 0 0 var(--tertiary);
|
|
animation: dot-falling 1s infinite linear;
|
|
animation-delay: 0.1s;
|
|
}
|
|
.dot-falling::before,
|
|
.dot-falling::after {
|
|
content: "";
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
.dot-falling::before {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 5px;
|
|
background-color: var(--tertiary);
|
|
color: var(--tertiary);
|
|
animation: dot-falling-before 1s infinite linear;
|
|
animation-delay: 0s;
|
|
}
|
|
.dot-falling::after {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 5px;
|
|
background-color: var(--tertiary);
|
|
color: var(--tertiary);
|
|
animation: dot-falling-after 1s infinite linear;
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
@keyframes dot-falling {
|
|
0% {
|
|
box-shadow: 9999px -15px 0 0 rgba(152, 128, 255, 0);
|
|
}
|
|
25%,
|
|
50%,
|
|
75% {
|
|
box-shadow: 9999px 0 0 0 var(--tertiary);
|
|
}
|
|
100% {
|
|
box-shadow: 9999px 15px 0 0 rgba(152, 128, 255, 0);
|
|
}
|
|
}
|
|
@keyframes dot-falling-before {
|
|
0% {
|
|
box-shadow: 9984px -15px 0 0 rgba(152, 128, 255, 0);
|
|
}
|
|
25%,
|
|
50%,
|
|
75% {
|
|
box-shadow: 9984px 0 0 0 var(--tertiary);
|
|
}
|
|
100% {
|
|
box-shadow: 9984px 15px 0 0 rgba(152, 128, 255, 0);
|
|
}
|
|
}
|
|
@keyframes dot-falling-after {
|
|
0% {
|
|
box-shadow: 10014px -15px 0 0 rgba(152, 128, 255, 0);
|
|
}
|
|
25%,
|
|
50%,
|
|
75% {
|
|
box-shadow: 10014px 0 0 0 var(--tertiary);
|
|
}
|
|
100% {
|
|
box-shadow: 10014px 15px 0 0 rgba(152, 128, 255, 0);
|
|
}
|
|
}
|