Commit 35f6ae2e authored by timel's avatar timel

fix: small

parent 6dcb5e7d
......@@ -16,6 +16,7 @@
.life-bar {
position: relative;
overflow: hidden;
width: 100%;
color: white;
background-color: var(--bg-color);
......@@ -47,4 +48,31 @@
display: flex;
gap: 8px;
align-items: center;
overflow: hidden;
position: relative;
.timer-text {
min-width: 3.25em;
}
}
.floodlight {
position: absolute;
height: 100%;
width: 40px;
background-color: #aaa;
top: 0;
right: 0;
filter: blur(30px);
transform: skewX(-20deg);
}
.floodlight-run {
animation: floodlight 4s linear infinite;
}
@keyframes floodlight {
0% {
right: -80px;
}
100% {
right: calc(100% + 80px);
}
}
......@@ -89,12 +89,14 @@ const LifeBarItem: React.FC<{
? "00:00"
: `${mm < 10 ? "0" + mm : mm}:${ss < 10 ? "0" + ss : ss}`;
return (
<Space
direction="vertical"
<div
style={{
flexDirection: isMe ? "column-reverse" : "column",
overflow: "hidden",
display: "flex",
gap: "0.5rem",
position: "relative",
}}
size={12}
>
<div
className={classNames("life-bar", {
......@@ -113,8 +115,9 @@ const LifeBarItem: React.FC<{
size={14}
/>
<div className="timer-text">{timeText}</div>
<div className="floodlight floodlight-run" />
</div>
)}
</Space>
</div>
);
};
......@@ -10,26 +10,4 @@
padding: 8px;
border-radius: 6px;
overflow: hidden;
.floodlight {
position: absolute;
height: 100%;
width: 40px;
background-color: white;
top: 0;
right: 0;
filter: blur(30px);
transform: skewX(-20deg);
}
.floodlight-run {
animation: floodlight 1s linear infinite;
}
}
@keyframes floodlight {
0% {
right: -80px;
}
100% {
right: calc(100% + 80px);
}
}
......@@ -124,7 +124,6 @@ export const Menu = () => {
>
<Button icon={<CloseCircleFilled />} type="text"></Button>
</DropdownWithTitle>
{/* <div className="floodlight floodlight-run" /> */}
</div>
</>
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment