kenji/illogical-impulse
1
0
Fork 0
forked from Shinonome/dots-hyprland
Code Pull Requests Activity

sidebar: ai: loading skeleton

Browse Source
This commit is contained in:
end-4
2024-04-14 21:00:52 +07:00
parent 72121dac20
commit 69fdb53c9d
6 changed files with 90 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.config/ags/scss/_lib_mixins.scss
+3 -22
View File
@@ -98,28 +98,6 @@ $elevation_margin: 0.476rem;
margin: $elevation_margin;
}
@keyframes flyin-top {
from {
margin-top: -2.795rem;
}
to {
margin-top: 0rem;
}
}
@keyframes flyin-bottom {
from {
margin-top: 4.841rem;
margin-bottom: -4.841rem;
}
to {
margin-bottom: 0rem;
margin-top: 0rem;
}
}
@mixin menu_decel {
transition: 300ms cubic-bezier(0.1, 1, 0, 1);
}
@@ -163,12 +141,15 @@ $elevation_margin: 0.476rem;
@mixin element_decel {
transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
}
@mixin element_bounceOut {
transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@mixin element_accel {
transition: 300ms cubic-bezier(0.55, 0, 1, 0.45);
}
@mixin element_easeInOut {
transition: 300ms cubic-bezier(0.85, 0, 0.15, 1);
}
.config/ags/scss/_sidebars.scss
+47 -1
View File
@@ -539,13 +539,59 @@ $colorpicker_rounding: 0.341rem;
background-color: mix($primary, $hovercolor, 40%);
}
.sidebar-chat-messagearea {
margin: 0.341rem;
}
.sidebar-chat-message {
margin: 0.682rem;
@include normal-rounding;
@include group-padding;
background-color: $layer1;
}
$skeleton-accent: mix($secondary, $onSecondary, 50%);
@keyframes sidebar-chat-message-skeletonline-anim {
0% {
background-position: 175% 0%;
}
100% {
background-position: 50% 0%;
}
}
.sidebar-chat-message-skeletonline {
border-radius: $rounding_verysmall;
min-height: 1.364rem;
background-color: $layer2;
}
.sidebar-chat-message-skeletonline-offset0 {
background-repeat: no-repeat;
background: linear-gradient(to right, $layer3 0%, $skeleton-accent 25%, $layer3 50%, $layer3 100%);
background-size: 500% 500%;
animation: sidebar-chat-message-skeletonline-anim 3s linear;
animation-iteration-count: infinite;
}
.sidebar-chat-message-skeletonline-offset1 {
background-repeat: no-repeat;
background: linear-gradient(to right, $layer3 0%, $layer3 50%, $skeleton-accent 75%, $layer3 100%);
background-size: 500% 500%;
animation: sidebar-chat-message-skeletonline-anim 3s linear;
animation-iteration-count: infinite;
}
.sidebar-chat-message-skeletonline-offset2 {
margin-right: 5.795rem;
background-repeat: no-repeat;
background: linear-gradient(to right, $layer3 0%, $layer3 25%, $skeleton-accent 50%, $layer3 75%, $layer3 100%);
background-size: 500% 500%;
animation: sidebar-chat-message-skeletonline-anim 3s linear;
animation-iteration-count: infinite;
}
.sidebar-chat-indicator {
@include element_decel;
@include full-rounding;