forked from Mastodon/mastoradio-la-radio-di-mastodon
66 lines
1.1 KiB
SCSS
66 lines
1.1 KiB
SCSS
/* ----------------------------------------------------------- */
|
|
/* == Player layout */
|
|
/* ----------------------------------------------------------- */
|
|
|
|
/* Small player
|
|
-------------------------------------------------------------- */
|
|
|
|
.player {
|
|
display: grid;
|
|
margin-bottom: 5rem;
|
|
|
|
grid-template-columns: 1fr 2fr;
|
|
grid-column-gap: 2rem;
|
|
grid-row-gap: 0;
|
|
}
|
|
|
|
.playerBig__player,
|
|
.playerMini {
|
|
grid-area: 1 / 1 / 4 / 2;
|
|
}
|
|
|
|
.playerTrack {
|
|
grid-area: 1 / 2 / 2 / 3;
|
|
}
|
|
|
|
.playerProgress {
|
|
grid-area: 2 / 2 / 3 / 3;
|
|
}
|
|
|
|
.controls {
|
|
grid-area: 3 / 2 / 4 / 3;
|
|
}
|
|
|
|
/* Big player
|
|
-------------------------------------------------------------- */
|
|
|
|
.playerBig {
|
|
display: grid;
|
|
margin-bottom: 6rem;
|
|
|
|
grid-template-columns: 1fr;
|
|
grid-row-gap: 0;
|
|
grid-column-gap: 0;
|
|
}
|
|
|
|
.playerBig .playerBig__player,
|
|
.playerBig .playerMini {
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
}
|
|
|
|
.playerBig .playerMini {
|
|
display: none;
|
|
}
|
|
|
|
.playerBig .playerTrack {
|
|
grid-area: 3 / 1 / 4 / 2;
|
|
}
|
|
|
|
.playerBig .playerProgress {
|
|
grid-area: 2 / 1 / 3 / 2;
|
|
}
|
|
|
|
.playerBig .controls {
|
|
grid-area: 4 / 1 / 5 / 2;
|
|
}
|