nixos-configs/devices/wim/config/ags/scss/widgets/player.scss

118 lines
1.8 KiB
SCSS
Raw Normal View History

.arrow {
transition: -gtk-icon-transform 0.3s ease-in-out;
margin-bottom: 12px;
}
.media {
margin-top: 9px;
}
.player {
all: unset;
padding: 10px;
min-width: 400px;
min-height: 200px;
border-radius: 30px;
2023-10-26 17:03:34 -04:00
border-top: 2px solid $contrast-bg;
border-bottom: 2px solid $contrast-bg;
transition: background 250ms;
2023-10-26 17:03:34 -04:00
.top {
font-size: 23px;
}
2023-10-26 17:03:34 -04:00
.metadata {
.title{
font-weight: 500;
transition: text 250ms;
}
2023-10-26 17:03:34 -04:00
.artist{
font-weight: 400;
font-size: 15px;
transition: text 250ms;
}
}
2023-10-26 17:03:34 -04:00
.bottom {
font-size: 30px;
}
.pausebutton {
transition: background-color ease .2s,
color ease .2s;
font-size: 15px;
padding: 4px 4px 4px 7px;
}
.playing {
transition: background-color ease .2s,
color ease .2s;
border-radius: 15px;
}
.stopped,
.paused {
transition: background-color ease .2s,
color ease .2s;
border-radius: 26px;
padding: 4px 4px 4px 10px;
}
2023-10-26 17:03:34 -04:00
button label {
min-width: 35px;
}
}
.position-indicator {
min-width: 18px;
margin: 7px;
background-color: rgba(255, 255, 255, 0.7);
2023-10-26 17:03:34 -04:00
box-shadow: 0 0 5px 0 rgba(255, 255, 255, 0.3);
border-radius: 100%;
}
.previous,
.next,
.shuffle,
.loop {
border-radius: 100%;
2023-09-18 13:36:50 -04:00
transition: color 200ms;
2023-10-26 17:03:34 -04:00
&:hover {
border-radius: 100%;
background-color: rgba(127, 132, 156, 0.4);
2023-09-18 13:36:50 -04:00
transition: color 200ms;
}
}
.loop {
label {
padding-right: 8px;
}
}
.position-slider {
highlight {
2023-10-26 17:03:34 -04:00
margin: 0;
border-radius: 2em;
}
trough {
margin: 0 8px;
border-radius: 2em;
}
slider {
margin: -8px;
min-height: 20px;
border-radius: 10px;
transition: background-color 0.5s ease-in-out;
}
2023-10-26 17:03:34 -04:00
slider:hover {
transition: background-color 0.5s ease-in-out;
}
}