diff --git a/src/assets/scss/5-modules/player-progress.scss b/src/assets/scss/5-modules/player-progress.scss index ea39b3e..8c9da4a 100644 --- a/src/assets/scss/5-modules/player-progress.scss +++ b/src/assets/scss/5-modules/player-progress.scss @@ -2,10 +2,13 @@ /* == Player progress module */ /* ----------------------------------------------------------- */ +.playerBig .playerProgress { + margin-bottom: 3rem; +} + /* Progress bar -------------------------------------------------------------- */ - .playerProgress__progress { position: relative; } diff --git a/src/assets/scss/5-modules/player-track.scss b/src/assets/scss/5-modules/player-track.scss new file mode 100644 index 0000000..daccd0b --- /dev/null +++ b/src/assets/scss/5-modules/player-track.scss @@ -0,0 +1,77 @@ +/* ----------------------------------------------------------- */ +/* == Player track infos module */ +/* ----------------------------------------------------------- */ + +.playerTrack { + display: flex; + justify-content: space-between; + margin-bottom: .8rem; + max-width: 100%; +} + +.playerBig .playerTrack { + margin-bottom: 3rem; +} + +/* Infos +-------------------------------------------------------------- */ + +.playerTrack__infos { + flex-grow: 1; + min-width: 0; +} + +.playerTrack__name { + display: -webkit-box; + display: box; + overflow: hidden; + margin-bottom: .8rem; + color: $color-secondary; + text-overflow: ellipsis; + font-weight: 600; + font-size: 1.8rem; + line-height: 1.16em; + + -webkit-box-orient: vertical; + box-orient: vertical; + -webkit-line-clamp: 2; + line-clamp: 2; +} + +.playerTrack__referer { + overflow: hidden; + color: $color-grey-1; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 1.4rem; +} + +.playerTrack__username { + text-transform: capitalize; +} + +/* Fav +-------------------------------------------------------------- */ + +.playerTrack__fav { + flex-shrink: 0; + align-self: flex-start; + margin-top: -.9rem; + margin-right: -1rem; + margin-left: 1rem; + padding: 1rem; + border: none; + background-color: transparent; + color: rgba($color-primary, .8); + font-size: 0; +} + +.playerTrack__fav:hover, +.playerTrack__fav:active, +.playerTrack__fav:focus { + color: $color-primary; +} + +.playerTrack__fav svg .filled { + display: none; +} diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss index aeb1353..d4f2e3e 100755 --- a/src/assets/scss/style.scss +++ b/src/assets/scss/style.scss @@ -63,6 +63,7 @@ @import "5-modules/player-big"; @import "5-modules/player-progress"; +@import "5-modules/player-track"; // -------------------------------------------------------------- diff --git a/src/components/Viewer.svelte b/src/components/Viewer.svelte index a084357..14c0135 100644 --- a/src/components/Viewer.svelte +++ b/src/components/Viewer.svelte @@ -28,11 +28,24 @@ on:input={event => updateCurrentTime(event.target.value, false)} on:change={event => updateCurrentTime(event.target.value, true)} > + +
+
+
{$current.title}
+
+ share by {$current.referer.username} +
+
+ +
+ +