improve chat ui
All checks were successful
Build Container / Build Container (push) Successful in 1m29s
All checks were successful
Build Container / Build Container (push) Successful in 1m29s
This commit is contained in:
parent
2ef2b04e49
commit
81923c4f8c
7 changed files with 170 additions and 48 deletions
|
|
@ -6,14 +6,45 @@
|
|||
}
|
||||
|
||||
.shimmer {
|
||||
background-image: linear-gradient(60deg, transparent 30%, rgba(100%,100%,100%,0.2) 50%, transparent 70%);
|
||||
background-image: linear-gradient(60deg, transparent 30%, rgba(100%, 100%, 100%, 0.2) 50%, transparent 70%);
|
||||
background-size: 300%;
|
||||
background-position-x: 100%;
|
||||
animation: shimmer 2s infinite linear;
|
||||
box-shadow: var(--color-primary) 0 0 1em 0.2em;
|
||||
border-end-start-radius: var(--radius-field);
|
||||
}
|
||||
|
||||
.shimmer::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
to {
|
||||
background-position-x: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.chat-start:has( + .chat-start:not(.hidden)) {
|
||||
padding-bottom: 0.1rem;
|
||||
|
||||
> .chat-image {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
> .chat-bubble {
|
||||
border-end-start-radius: var(--radius-field);
|
||||
}
|
||||
|
||||
> .chat-bubble::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& + .chat-start {
|
||||
padding-top: 0.1rem;
|
||||
|
||||
> .chat-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue