mirror of
https://github.com/koel/koel
synced 2024-12-23 11:03:05 +00:00
cf27ed713d
Koel can now integrate and use the rich information from Last.fm. Now whenever a song is played, its album and artist information will be queried from Last.fm and cached for later use. What's better, if an album has no cover, Koel will try to update its cover if one is found on Last.fm. In order to use this feature, users only need to provide valid Last.fm API credentials (namely LASTFM_API_KEY and LASTFM_API_SECRET) in .env. A npm and gulp rebuild is also required - just like with every update.
145 lines
3.2 KiB
SCSS
145 lines
3.2 KiB
SCSS
@mixin vertical-center() {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
@mixin artist-album-card() {
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
display: flex;
|
|
|
|
.item {
|
|
display: flex;
|
|
flex: 0 0 256px;
|
|
flex-direction: column;
|
|
margin-bottom: 16px;
|
|
|
|
.cover {
|
|
@include vertical_center();
|
|
|
|
display: flex;
|
|
flex: 0 0 256px;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center center;
|
|
position: relative;
|
|
|
|
.control {
|
|
display: none;
|
|
width: 96px;
|
|
height: 96px;
|
|
text-align: center;
|
|
line-height: 96px;
|
|
font-size: 54px;
|
|
background: #111;
|
|
border-radius: 50%;
|
|
text-indent: 5px;
|
|
opacity: .7;
|
|
border: 1px solid transparent;
|
|
|
|
transition: .3s;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
border-color: #fff;
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
&:before {
|
|
content: " ";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 0;
|
|
transition: .3s;
|
|
}
|
|
|
|
&:hover {
|
|
&:before {
|
|
background-color: rgba(0, 0, 0, .4);
|
|
}
|
|
|
|
.control {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
footer {
|
|
padding: 16px;
|
|
background: #333;
|
|
flex: 1;
|
|
}
|
|
|
|
.name {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.meta {
|
|
color: $color2ndText;
|
|
margin-top: 4px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
@media only screen
|
|
and (max-device-width : 768px)
|
|
and (orientation : portrait) {
|
|
justify-content: center;
|
|
}
|
|
|
|
@media only screen
|
|
and (min-device-width: 769px)
|
|
and (max-device-width : 1024px) {
|
|
justify-content: space-around;
|
|
}
|
|
}
|
|
|
|
@mixin inset-when-pressed() {
|
|
&:active {
|
|
box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,1);
|
|
}
|
|
}
|
|
|
|
@mixin button-group() {
|
|
display: flex;
|
|
position: relative;
|
|
|
|
button {
|
|
$buttonHeight: 28px;
|
|
background-color: $colorHighlight;
|
|
font-size: 12px;
|
|
height: $buttonHeight;
|
|
padding: 0 16px;
|
|
line-height: $buttonHeight;
|
|
text-transform: uppercase;
|
|
display: inline-block;
|
|
|
|
border-radius: $buttonHeight/2 0px 0px $buttonHeight/2;
|
|
|
|
&:last-of-type {
|
|
border-top-right-radius: $buttonHeight/2;
|
|
border-bottom-right-radius: $buttonHeight/2;
|
|
}
|
|
|
|
&:not(:first-child) {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
margin-left: 1px;
|
|
}
|
|
|
|
i {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: darken($colorHighlight, 10%);
|
|
}
|
|
|
|
@include inset-when-pressed();
|
|
}
|
|
}
|