matt1432/nixos-configs
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat(ags): add anim on playpause button in player

Browse source
This commit is contained in:
matt1432 2023-09-18 14:31:08 -04:00
parent b5784a9e48
commit 0004dd85be
3 changed files with 22 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
config/ags/js/media-player/mpris.js
View file

@ -47,7 +47,7 @@ export const CoverArt = (player, params) => CenterBox({
});
export const TitleLabel = (player, params) => Label({
...params,
...params,
xalign: 0,
maxWidthChars: 40,
truncate: 'end',
@ -167,7 +167,9 @@ const PlayerButton = ({ player, items, onClick, prop }) => Button({
if (prop == 'playBackStatus') {
items.forEach(item => {
item[1].setStyle(`background-color: ${player.colors.value.hoverAccent};
color: ${player.colors.value.buttonText};`);
color: ${player.colors.value.buttonText};
min-height: 40px; min-width: 36px;
margin-bottom: 1px; margin-right: 1px;`);
});
}
},
@ -176,7 +178,8 @@ const PlayerButton = ({ player, items, onClick, prop }) => Button({
if (prop == 'playBackStatus') {
items.forEach(item => {
item[1].setStyle(`background-color: ${player.colors.value.buttonAccent};
color: ${player.colors.value.buttonText};`);
color: ${player.colors.value.buttonText};
min-height: 42px; min-width: 38px;`);
});
}
},
@ -190,7 +193,8 @@ const PlayerButton = ({ player, items, onClick, prop }) => Button({
if (prop == 'playBackStatus') {
items.forEach(item => {
item[1].setStyle(`background-color: ${player.colors.value.buttonAccent};
color: ${player.colors.value.buttonText};`);
color: ${player.colors.value.buttonText};
min-height: 42px; min-width: 38px;`);
});
}
else {

17
config/ags/scss/widgets/player.scss
View file

@ -35,23 +35,24 @@
}
.pausebutton {
transition: background 250ms;
transition: background-color ease .2s,
color ease .2s;
font-size: 15px;
min-height: 14px;
min-width: 14px;
padding: 14px 14px 14px 17px;
padding: 4px 4px 4px 7px;
}
.playing {
transition: all ease .2s;
transition: background-color ease .2s,
color ease .2s;
border-radius: 15px;
}
.stopped,
.paused {
border-radius: 26px;
transition: all ease .2s;
padding: 14px 14px 14px 20px;
transition: background-color ease .2s,
color ease .2s;
border-radius: 26px;
padding: 4px 4px 4px 10px;
}
button label {
min-width: 35px;

12
config/ags/style.css
View file

@ -617,19 +617,17 @@ calendar:indeterminate {
.player .bottom {
font-size: 30px; }
.player .pausebutton {
transition: background 250ms;
transition: background-color ease .2s, color ease .2s;
font-size: 15px;
min-height: 14px;
min-width: 14px;
padding: 14px 14px 14px 17px; }
padding: 4px 4px 4px 7px; }
.player .playing {
transition: all ease .2s;
transition: background-color ease .2s, color ease .2s;
border-radius: 15px; }
.player .stopped,
.player .paused {
transition: background-color ease .2s, color ease .2s;
border-radius: 26px;
transition: all ease .2s;
padding: 14px 14px 14px 20px; }
padding: 4px 4px 4px 10px; }
.player button label {
min-width: 35px; }