@@ -13,7 +13,6 @@
|
||||
|
||||
&--alert {
|
||||
background-color: var(--bg-positive);
|
||||
& .text { color: white }
|
||||
}
|
||||
|
||||
&:empty {
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
@extend .room-selector-flexItem;
|
||||
margin: 0 var(--sp-extra-tight);
|
||||
|
||||
color: var(--tc-surface-normal);
|
||||
color: var(--tc-surface-normal-low);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@@ -54,7 +54,7 @@ function RoomViewFloating({
|
||||
return (
|
||||
<>
|
||||
<div className={`room-view__typing${isSomeoneTyping(typingMembers) ? ' room-view__typing--open' : ''}`}>
|
||||
<div className="bouncingLoader"><div /></div>
|
||||
<div className="bouncing-loader"><div /></div>
|
||||
<Text variant="b2">{getTypingMessage(typingMembers)}</Text>
|
||||
</div>
|
||||
<div className={`room-view__STB${reachedBottom ? '' : ' room-view__STB--open'}`}>
|
||||
|
||||
@@ -9,10 +9,6 @@
|
||||
color: var(--tc-surface-high);
|
||||
}
|
||||
|
||||
&--open {
|
||||
transform: translateY(-99%);
|
||||
}
|
||||
|
||||
& .text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
@@ -22,37 +18,48 @@
|
||||
text-overflow: ellipsis;
|
||||
margin: 0 var(--sp-tight);
|
||||
}
|
||||
|
||||
&--open {
|
||||
transform: translateY(-99%);
|
||||
& .bouncing-loader {
|
||||
& > *,
|
||||
&::after,
|
||||
&::before {
|
||||
animation: bouncing-loader 0.6s infinite alternate;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bouncingLoader {
|
||||
.bouncing-loader {
|
||||
transform: translateY(2px);
|
||||
margin: 0 calc(var(--sp-ultra-tight) / 2);
|
||||
}
|
||||
.bouncingLoader > div,
|
||||
.bouncingLoader:before,
|
||||
.bouncingLoader:after {
|
||||
.bouncing-loader > div,
|
||||
.bouncing-loader::before,
|
||||
.bouncing-loader::after {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--tc-surface-high);
|
||||
border-radius: 50%;
|
||||
animation: bouncing-loader 0.6s infinite alternate;
|
||||
}
|
||||
|
||||
.bouncingLoader:before,
|
||||
.bouncingLoader:after {
|
||||
|
||||
.bouncing-loader::before,
|
||||
.bouncing-loader::after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
.bouncingLoader > div {
|
||||
.bouncing-loader > div {
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.bouncingLoader > div {
|
||||
.bouncing-loader > div {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.bouncingLoader:after {
|
||||
.bouncing-loader::after {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
|
||||
@@ -104,7 +104,7 @@ function AboutSection() {
|
||||
<div>
|
||||
<Text variant="h2">
|
||||
Cinny
|
||||
<span className="text text-b3" style={{ margin: '0 var(--sp-extra-tight)' }}>v1.3.0</span>
|
||||
<span className="text text-b3" style={{ margin: '0 var(--sp-extra-tight)' }}>v1.3.1</span>
|
||||
</Text>
|
||||
<Text>Yet another matrix client</Text>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user