miyuchiq music player gen 1
This commit is contained in:
66
MusicPlayer/miyuchiq/generation 1/style.css
Normal file
66
MusicPlayer/miyuchiq/generation 1/style.css
Normal file
@ -0,0 +1,66 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
|
||||
|
||||
#widget {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
visibility: hidden
|
||||
}
|
||||
|
||||
#widget.active {
|
||||
visibility: visible
|
||||
}
|
||||
|
||||
#player {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
width: 800px;
|
||||
height: 230px;
|
||||
overflow: hidden;
|
||||
border-radius: 30px;
|
||||
margin-inline: 30px;
|
||||
color: #fff;
|
||||
font-family: "Nunito", sans-serif;
|
||||
opacity: 0;
|
||||
background-color: #242424;
|
||||
transition: opacity 350ms ease-in-out
|
||||
}
|
||||
|
||||
#player.active {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
#player #background_img {
|
||||
height: 100%;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
#player .meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 520px;
|
||||
margin: auto;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
#player .meta a {
|
||||
word-break: keep-all;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#player #album {
|
||||
font-size: 32px;
|
||||
color: #E47D7D;
|
||||
}
|
||||
|
||||
#player #title {
|
||||
font-size: 42px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
#player #artist {
|
||||
font-size: 40px;
|
||||
opacity: .6;
|
||||
}
|
||||
Reference in New Issue
Block a user