diff --git a/app/components/Player/Fullscreen.vue b/app/components/Player/Fullscreen.vue index 6cfbae9..40f906f 100644 --- a/app/components/Player/Fullscreen.vue +++ b/app/components/Player/Fullscreen.vue @@ -55,9 +55,7 @@ nuxtApp.hook("page:finish", () => { />
- + @@ -66,6 +67,22 @@ const durationFormatted = computed(() => @click="repeat = !repeat" />
+ +
+ + +
@@ -127,12 +144,11 @@ const durationFormatted = computed(() => width: 100%; gap: 1rem; - overflow: hidden; - max-height: 30px; - transition: max-height 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; &.hidden { - max-height: 0; + opacity: 0; + pointer-events: none; } & > * { @@ -143,4 +159,23 @@ const durationFormatted = computed(() => color: $color-accent; } } + +.volume-slider { + align-self: stretch; + margin: 0.5rem 1rem 0; + display: flex; + align-items: center; + gap: 0.75rem; + opacity: 1; + transition: opacity 0.2s ease-in-out; + + :deep(.slider) { + flex: 1; + } + + &.hidden { + opacity: 0; + pointer-events: none; + } +}