Add stop button
This commit is contained in:
@@ -108,6 +108,26 @@ body {
|
||||
margin-top: var(--s0);
|
||||
}
|
||||
|
||||
.chat-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--s1) 0;
|
||||
}
|
||||
|
||||
.chat-loading[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chat-loading__spinner {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 2px solid var(--color-gray2);
|
||||
border-top-color: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
/* ==================== */
|
||||
/* Collapsible */
|
||||
/* ==================== */
|
||||
@@ -259,21 +279,34 @@ body {
|
||||
animation: pulse 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.compose__action-btn--send.loading {
|
||||
position: relative;
|
||||
color: transparent;
|
||||
pointer-events: none;
|
||||
.compose__action-btn--send .compose__icon--stop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.compose__action-btn--send.loading::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
border: 2px solid var(--color-gray2);
|
||||
border-top-color: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
.compose__action-btn--send.loading {
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Hide the send icon, show the stop icon during loading */
|
||||
.compose__action-btn--send.loading .compose__icon--send {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.compose__action-btn--send.loading .compose__icon--stop {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Pending stop: yellow background, click again to confirm */
|
||||
.compose__action-btn--send.loading.pending {
|
||||
background: var(--color-yellow);
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.compose__action-btn--send.loading.pending:hover {
|
||||
background: var(--color-yellow);
|
||||
}
|
||||
}
|
||||
|
||||
.compose__actions {
|
||||
|
||||
Reference in New Issue
Block a user