diff --git a/src/components/ItemSlider.vue b/src/components/ItemSlider.vue index 92fabee5fbd50a7d729dc68d7dd622928c90fa1c..70250ef0975cc5ee6cf569793214e187e75d8270 100644 --- a/src/components/ItemSlider.vue +++ b/src/components/ItemSlider.vue @@ -194,6 +194,10 @@ export default { .navSlider:hover { background: rgb(236, 236, 236); + background-image: var(--icon-triangle-e-000); + background-repeat: no-repeat; + background-position: center center; + background-size: 80%; } .navNext { diff --git a/src/components/Player.vue b/src/components/Player.vue index eecb16539e9e49fc52de9f0d750ff27f86c7286a..c5f445eb96d2f7628d8e7304f331a41a84369889 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -22,6 +22,15 @@ <template> <div id="app-settings"> + <div class="playerThumb" /> + <input + class="seek" + type="range" + name="seek" + min="0" + max="1" + step=".05"> + <span>Hallo Test</span> <div class="wrap" :class="{ buffering: player.isBuffering }"> @@ -30,22 +39,21 @@ :class="player.isPlaying ? 'pause' : 'play'" @click="togglePlay" /> </div> - <div - class="volumeIcon" - :class="player.volume == 0 ? 'volumeMute' : 'volumeFull'" - @click="toggleMute" /> - <input - class="volume" - type="range" - name="volume" - min="0" - max="1" - step=".05" - :value="player.volume" - @input="changeVolume($event)" - @change="saveVolume($event)"> - <div class="playerMetadata"> - {{ player.title }} + <div> + <div + class="volumeIcon" + :class="player.volume == 0 ? 'volumeMute' : 'volumeFull'" + @click="toggleMute" /> + <input + class="volume" + type="range" + name="volume" + min="0" + max="1" + step=".05" + :value="player.volume" + @input="changeVolume($event)" + @change="saveVolume($event)"> </div> </div> </template> @@ -76,6 +84,22 @@ export default { <style> + #app-settings { + display: flex; + flex-direction: column; + align-items: center; + } + + .playerThumb { + width: 200px; + height: 200px; + background: #ddd; + } + + .seek { + width: 200px; + } + .wrap { background: var(--color-main-background); border: 3px solid #0082c9; @@ -121,17 +145,6 @@ export default { } } - .playerMetadata{ - position: relative; - left: 5px; - top: -20px; - width: 203px; - height: 20px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .volumeIcon { width: 25px; height: 25px;