diff --git a/src/assets/scss/5-modules/player-big.scss b/src/assets/scss/5-modules/player-big.scss index 30018f4..e46f4e5 100644 --- a/src/assets/scss/5-modules/player-big.scss +++ b/src/assets/scss/5-modules/player-big.scss @@ -2,10 +2,6 @@ /* == Big player */ /* ----------------------------------------------------------- */ -.playerBig { - margin-bottom: 6rem; -} - .playerBig__player { position: relative; overflow: hidden; diff --git a/src/assets/scss/5-modules/player-cover.scss b/src/assets/scss/5-modules/player-cover.scss new file mode 100644 index 0000000..b3dad8a --- /dev/null +++ b/src/assets/scss/5-modules/player-cover.scss @@ -0,0 +1,49 @@ +/* ----------------------------------------------------------- */ +/* == Player cover */ +/* ----------------------------------------------------------- */ + +.playerCover { + position: relative; + overflow: hidden; + width: 100%; + border-radius: 4px; + background-color: #f2f2f2; +} + +.playerCover::before { + display: block; + padding-bottom: 100%; + content: "";; +} + +.playerCover__img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + + object-fit: cover; +} + +.playerCover__expand, +.playerCover__expand:visited { + position: absolute; + right: .5rem; + bottom: .5rem; + padding: .5rem; + width: 2.4rem; + height: 2.4rem; + border: none; + border-radius: .3rem; + background: none; + color: rgba(#fff, .6); + font-size: 0; +} + +.playerCover:hover .playerCover__expand, +.playerCover:active .playerCover__expand, +.playerCover:focus .playerCover__expand { + background-color: rgba($color-primary, .6); + color: #fff; +} diff --git a/src/assets/scss/5-modules/player-layout.scss b/src/assets/scss/5-modules/player-layout.scss new file mode 100644 index 0000000..8dc24e1 --- /dev/null +++ b/src/assets/scss/5-modules/player-layout.scss @@ -0,0 +1,65 @@ +/* ----------------------------------------------------------- */ +/* == 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; +} diff --git a/src/assets/scss/5-modules/player-progress.scss b/src/assets/scss/5-modules/player-progress.scss index f382b14..da9028e 100644 --- a/src/assets/scss/5-modules/player-progress.scss +++ b/src/assets/scss/5-modules/player-progress.scss @@ -17,11 +17,12 @@ position: absolute; width: 100%; height: .5rem; - border-radius: .2rem; + border-radius: .5rem; background-color: #e5e5e5; } .playerBig .playerProgress__progressBg { + border-radius: .2rem; border-top-left-radius: 0; border-top-right-radius: 0; } @@ -30,8 +31,8 @@ position: absolute; width: 0; height: .5rem; - border-top-left-radius: .2rem; - border-bottom-left-radius: .2rem; + border-top-left-radius: .5rem; + border-bottom-left-radius: .5rem; background-color: $color-primary; } @@ -50,7 +51,7 @@ width: 100%; height: .5rem; border: none; - border-radius: .2rem; + border-radius: .5rem; background-color: transparent; box-shadow: none; cursor: pointer; diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss index 3c1cd45..8e0ecef 100755 --- a/src/assets/scss/style.scss +++ b/src/assets/scss/style.scss @@ -63,6 +63,8 @@ @import "5-modules/placeholder"; @import "5-modules/player-big"; +@import "5-modules/player-layout"; +@import "5-modules/player-cover"; @import "5-modules/player-progress"; @import "5-modules/player-track"; @import "5-modules/volume"; diff --git a/src/components/Viewer.svelte b/src/components/Viewer.svelte index 54f2549..3d9925f 100644 --- a/src/components/Viewer.svelte +++ b/src/components/Viewer.svelte @@ -1,5 +1,5 @@ -