85 lines
1.8 KiB
SCSS
85 lines
1.8 KiB
SCSS
|
@import "./mixins.scss";
|
||
|
|
@import "./colors.scss";
|
||
|
|
|
||
|
|
.music {
|
||
|
|
@include widget-border-radius;
|
||
|
|
font-size: 15px;
|
||
|
|
background-color: $background;
|
||
|
|
margin: 0.5rem 2rem 0.5rem 1rem;
|
||
|
|
padding-left: 1rem;
|
||
|
|
padding-right: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.music-cover {
|
||
|
|
@include widget-border-radius;
|
||
|
|
background-size: 42px 42px;
|
||
|
|
background-position: center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
margin-top: 0.3rem;
|
||
|
|
margin-bottom: 0.3rem;
|
||
|
|
min-height: 2rem;
|
||
|
|
min-width: 4rem;
|
||
|
|
border-radius: 0.8rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.music-cover-big {
|
||
|
|
margin: 0rem;
|
||
|
|
background-size: 450px 450px;
|
||
|
|
background-position: center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
border-radius: 30%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.music-widget {
|
||
|
|
background-position: center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: 1100px 1100px;
|
||
|
|
border: 3px solid $background-highlight;
|
||
|
|
border-radius: 0.7rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.music-widget-title {
|
||
|
|
@include widget-border-radius;
|
||
|
|
font-size: 24px;
|
||
|
|
margin: 2rem 2rem 0rem 1rem;
|
||
|
|
background-color: $background;
|
||
|
|
padding: 1.1rem;
|
||
|
|
border: 3px solid $background-highlight;
|
||
|
|
}
|
||
|
|
|
||
|
|
.music-controls {
|
||
|
|
@include button-sizing;
|
||
|
|
background-color: $background;
|
||
|
|
margin: 5rem 7rem 2rem 6rem;
|
||
|
|
padding: 0.4rem;
|
||
|
|
border-radius: 8px;
|
||
|
|
border: 3px solid $background-highlight;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hover-play:hover {
|
||
|
|
background-color: $green;
|
||
|
|
transition: all 100ms ease-in;
|
||
|
|
color: $background-highlight;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hover-pause:hover {
|
||
|
|
background-color: $red;
|
||
|
|
transition: all 200ms ease-in;
|
||
|
|
color: $background-highlight;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.close-button {
|
||
|
|
margin: 0.5rem 2rem 0rem 30rem;
|
||
|
|
background-color: $background;
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 0.5rem;
|
||
|
|
&:hover {
|
||
|
|
background-color: $red;
|
||
|
|
transition: all 100ms ease-in;
|
||
|
|
color: $background-highlight;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
}
|