RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

reorder buttons

Browse Source
This commit is contained in:
SrGooglo 2023-05-25 03:23:54 +00:00
parent 827306ff7d
commit 7ad9cb8e5e
2 changed files with 30 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/app/src/components/EmbbededMediaPlayer/index.jsx
View File

@ -429,6 +429,7 @@ export default class AudioPlayer extends React.Component {
}
<antd.Button
className="bottom_btn"
icon={<Icons.X />}
onClick={this.close}
shape="circle"

77
packages/app/src/components/EmbbededMediaPlayer/index.less
View File

@ -16,10 +16,8 @@
&.minimized {
pointer-events: none;
opacity: 0;
height: 0px;
width: 0px;
animation: minimize 150ms ease-in-out forwards;
}
&.hovering {
@ -96,15 +94,18 @@
top: 0;
left: 0;
width: 100%;
width: fit-content;
height: 100%;
.extra_btns {
display: flex;
flex-direction: row;
flex-direction: column;
align-items: center;
justify-content: space-between;
//align-items: center;
//justify-content: flex-start;
gap: 10px;
opacity: 0;
@ -119,6 +120,10 @@
margin: 0 !important;
}
}
.bottom_btn {
//
}
}
}
@ -220,6 +225,7 @@
.controls {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
@ -341,47 +347,6 @@
color: var(--text-color);
}
}
.bpmTicker {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--background-color-contrast);
transform: translate(-50%, -50%);
&.pulse {
animation: pulseBPM;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-duration: 1s;
}
}
}
@keyframes pulseBPM {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
.ant-popover-inner-content {
@ -407,4 +372,20 @@
to {
opacity: 1;
}
}
@keyframes minimize {
0% {
opacity: 1;
}
99% {
opacity: 0;
//transform: translateX(100%);
}
100% {
opacity: 0;
height: 0px;
}
}