fixes

src/renderer/main/components/sidebar-library-item.js

@@ -2,7 +2,7 @@ import {html} from "../html.js"
 
 export const sidebarLibraryItem = Vue.component("sidebar-library-item", {
     template: html`
-        <button class="app-sidebar-item"
+        <button class="app-sidebar-item"  v-ripple
                 :class="$root.getSidebarItemClass(page)" @click="$root.setWindowHash(page)">
             <svg-icon :url="svgIconData" :name="'sidebar-' + svgIconName" v-if="svgIconData != ''"/>
             <span class="sidebar-item-text">{{ name }}</span>

src/renderer/style.less

@@ -889,6 +889,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   text-align   : left;
   align-items  : center;
   gap          : 12px;
+  position: relative;
 
   &.app-sidebar-item-playlist {
     -webkit-user-drag: element;

src/renderer/views/app/chrome-bottom.ejs

@@ -149,27 +149,27 @@
                    v-b-tooltip.hover :title="formatVolumeTooltip()">
         </div>
         <div class="app-chrome-item generic">
-            <button class="playback-button--small cast"
+            <button class="playback-button--small cast" v-ripple
                     :title="$root.getLz('term.cast')"
                     v-b-tooltip.hover
                     @click="cfg.advanced.AudioContext ? modals.castMenu = true : (cfg.advanced.AudioContext = true, modals.castMenu = true)"></button>
         </div>
         <div class="app-chrome-item generic">
-            <button class="playback-button--small queue" :class="{'active': drawer.panel == 'queue'}"
+            <button class="playback-button--small queue" v-ripple :class="{'active': drawer.panel == 'queue'}"
                     :title="$root.getLz('term.queue')"
                     v-b-tooltip.hover
                     @click="invokeDrawer('queue')"></button>
         </div>
         <div class="app-chrome-item generic">
             <template v-if="lyrics && lyrics != [] && lyrics.length > 0">
-                <button class="playback-button--small lyrics"
+                <button class="playback-button--small lyrics" v-ripple
                         :title="$root.getLz('term.lyrics')"
                         v-b-tooltip.hover
                         :class="{'active': drawer.panel == 'lyrics'}"
                         @click="invokeDrawer('lyrics')"></button>
             </template>
             <template v-else>
-                <button class="playback-button--small lyrics"
+                <button class="playback-button--small lyrics" v-ripple
                         :style="{'opacity': 0.3, 'pointer-events': 'none'}"></button>
             </template>
 

src/renderer/views/app/chrome-top.ejs

@@ -16,19 +16,19 @@
     <template v-if="getThemeDirective('appNavigation') != 'seperate'">
       <div class="vdiv" v-if="getThemeDirective('windowLayout') == 'twopanel'"></div>
       <div class="app-chrome-item">
-        <button class="playback-button navigation" @click="navigateBack()" :title="$root.getLz('term.navigateBack')"
+        <button class="playback-button navigation" v-ripple @click="navigateBack()" :title="$root.getLz('term.navigateBack')"
           v-b-tooltip.hover>
           <svg-icon url="./views/svg/chevron-left.svg"></svg-icon>
         </button>
       </div>
       <div class="app-chrome-item">
-        <button class="playback-button navigation" @click="navigateForward()"
+        <button class="playback-button navigation" v-ripple @click="navigateForward()"
           :title="$root.getLz('term.navigateForward')" v-b-tooltip.hover>
           <svg-icon url="./views/svg/chevron-right.svg"></svg-icon>
         </button>
       </div>
       <div class="app-chrome-item" v-if="getThemeDirective('windowLayout') == 'twopanel'">
-        <button class="playback-button collapseLibrary" v-b-tooltip.hover
+        <button class="playback-button collapseLibrary" v-ripple v-b-tooltip.hover
           :title="chrome.sidebarCollapsed ? getLz('action.showLibrary') : getLz('action.hideLibrary')"
           @click="chrome.sidebarCollapsed = !chrome.sidebarCollapsed">
           <transition name="fade">
@@ -230,21 +230,21 @@
           :title="formatVolumeTooltip()" />
       </div>
       <div class="app-chrome-item generic">
-        <button class="playback-button--small cast" :title="$root.getLz('term.cast')"
+        <button class="playback-button--small cast" :title="$root.getLz('term.cast')" v-ripple
           @click="cfg.advanced.AudioContext ? modals.castMenu = true : (cfg.advanced.AudioContext = true, modals.castMenu = true)"
           v-b-tooltip.hover></button>
       </div>
       <div class="app-chrome-item generic">
-        <button class="playback-button--small queue" :title="$root.getLz('term.queue')" v-b-tooltip.hover
+        <button class="playback-button--small queue" :title="$root.getLz('term.queue')" v-b-tooltip.hover v-ripple
           :class="{'active': drawer.panel == 'queue'}" @click="invokeDrawer('queue')"></button>
       </div>
       <div class="app-chrome-item generic">
         <template v-if="lyrics && lyrics != [] && lyrics.length > 0">
-          <button class="playback-button--small lyrics" :title="$root.getLz('term.lyrics')" v-b-tooltip.hover
+          <button class="playback-button--small lyrics" :title="$root.getLz('term.lyrics')" v-b-tooltip.hover v-ripple
             :class="{'active': drawer.panel == 'lyrics'}" @click="invokeDrawer('lyrics')"></button>
         </template>
         <template v-else>
-          <button class="playback-button--small lyrics" :style="{'opacity': 0.3, 'pointer-events': 'none'}"></button>
+          <button class="playback-button--small lyrics" :style="{'opacity': 0.3, 'pointer-events': 'none'}" v-ripple></button>
         </template>
       </div>
     </template>

src/renderer/views/components/sidebar-playlist.ejs

@@ -1,6 +1,6 @@
 <script type="text/x-template" id="sidebar-playlist">
     <div class="sidebar-playlist" :key="item.id">
-        <button class="app-sidebar-item app-sidebar-item-playlist" :key="item.id"
+        <button class="app-sidebar-item app-sidebar-item-playlist" :key="item.id" v-ripple
                 :class="item.type != 'library-playlist-folders' ? {'active': $root.page.includes(item.id)} : ['playlist-folder', {'folder-button-active': folderOpened}, isPlaylistSelected]"
                 @contextmenu="playlistContextMenu($event, item.id)"
                 @dragstart="startDrag($event, item)"

src/renderer/views/pages/artist.ejs

@@ -9,7 +9,7 @@
             </animatedartwork-view>
             <div class="header-content" style="pointer-events: all;">
                 <div class="row">
-                    <div class="col-sm" style="width: auto;">
+                    <div class="col-auto" style="width: auto;">
                         <div class="artist-image"
                              v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9))&& !hasHero()">
                             <mediaitem-artwork