支持在线播放音频, 且获取音频文件元数据, 歌手, 封面等信息

src/main/java/im/zhaojun/common/controller/FileController.java

@@ -111,4 +111,9 @@ public class FileController {
     public ResultBean getImageInfo(String url) throws Exception {
         return ResultBean.success(fileService.getImageInfo(url));
     }
+
+    @GetMapping("/audioInfo")
+    public ResultBean getAudioInfo(String url) throws Exception {
+        return ResultBean.success(fileService.getAudioInfo(url));
+    }
 }

src/main/java/im/zhaojun/common/model/AudioInfo.java

@@ -0,0 +1,40 @@
+package im.zhaojun.common.model;
+
+public class AudioInfo {
+    private String title;
+    private String artist;
+    private String cover;
+    private String src;
+
+    public String getTitle() {
+        return title;
+    }
+
+    public void setTitle(String title) {
+        this.title = title;
+    }
+
+    public String getArtist() {
+        return artist;
+    }
+
+    public void setArtist(String artist) {
+        this.artist = artist;
+    }
+
+    public String getCover() {
+        return cover;
+    }
+
+    public void setCover(String cover) {
+        this.cover = cover;
+    }
+
+    public String getSrc() {
+        return src;
+    }
+
+    public void setSrc(String src) {
+        this.src = src;
+    }
+}

src/main/resources/static/shikwasa/shikwasa.cjs.css

@@ -1 +1 @@
-@keyframes rotate{to{transform:rotate(1turn)}}@-webkit-keyframes rotate{to{-webkit-transform:rotate(1turn)}}@-moz-keyframes rotate{to{transform:rotate(1turn)}}.shk{position:inherit;height:120px;box-sizing:border-box;display:flex;flex-flow:row nowrap;border:none;box-shadow:0 0 14px 6px hsla(0,0%,88.6%,.5);cursor:auto;font:400 18px/1.42 Pingfang SC,Hiragano,Helvetica Neue,sans-serif}.shk.Fixed{position:fixed;bottom:0;left:0;margin:0;width:100%}.shk.Fixed.Top{top:0;bottom:auto}.shk.Seeking{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.shk_cover{width:120px;flex-shrink:0}.shk_cover,.shk_main{position:relative;height:100%}.shk_main{box-sizing:border-box;flex-grow:1;padding:14px 30px 10px;border:none;border-left:5px solid var(--theme-color);width:calc(100% - 120px);background-color:#fff}.shk_img{background-color:var(--theme-color);background-size:cover;background-repeat:no-repeat;height:100%;width:100%}.shk_btn{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:none;outline:none;padding:0;cursor:pointer}.shk_cover .shk_btn{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.8}.shk_cover .shk_btn:focus,.shk_cover .shk_btn:hover{opacity:1;transition:all 1s ease}.shk_cover .shk_btn svg{box-sizing:border-box}.shk_btn_play{width:100px;height:100px}.shk_btn_pause{position:absolute;bottom:10px;right:10px;width:24px;height:24px}.shk_btn_pause circle{stroke-width:6;r:38}.shk.Pause .shk_btn_play,.shk.Play .shk_btn_pause{opacity:1;visibility:visible;transition:opacity .05s ease-in .01s,visibility .01s}.shk.Pause .shk_btn_pause,.shk.Play .shk_btn_play{opacity:0;visibility:hidden;transition:opacity .01s ease-in,visibility .01s .01s}.shk_text{overflow:hidden;width:100%;color:var(--theme-color)}.shk_controls,.shk_text,.shk_time{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.shk_subtitle{font-weight:500;max-width:calc(100% - 164px);vertical-align:middle;overflow:hidden;text-overflow:clip}.shk_subtitle,.shk_title{display:inline-block;white-space:nowrap}.shk_title{font-weight:300;margin-top:2px;font-size:24px;transition:transform 0s ease-in-out}.shk_controls{position:absolute;top:8px;right:20px;z-index:1}.shk_controls .shk_btn{display:inline-block;vertical-align:middle;width:36px;height:36px;color:var(--theme-color);font-size:13px;opacity:1;transform:scale(1)}.shk_controls .shk_btn:hover{opacity:.8}.shk_main .shk_btn svg{width:16px;height:16px;padding:10px;fill:var(--theme-color);vertical-align:middle}.shk_btn.shk_btn_download svg{fill:none;stroke:var(--theme-color)}.shk_btn_backward svg,.shk_btn_forward svg{width:18px;height:18px;padding:9px}.shk.Mute svg.shk_btn_mute,svg.shk_btn_unmute{display:inline-block}.shk.Mute svg.shk_btn_unmute,svg.shk_btn_mute{display:none}.shk_bar-wrap{height:18px;padding:1px 0;position:relative;cursor:pointer}.shk_bar{position:relative;width:100%;height:3px;margin-top:7px;box-sizing:border-box;background:#e7e7e7;z-index:0}.shk_bar_loaded,.shk_bar_played{width:0;position:absolute;left:0;top:0;bottom:0}.shk_bar_loaded{background:var(--theme-color);filter:opacity(30%);z-index:1}.shk_bar_played{z-index:2}.bar-handle,.shk_bar_played{background:var(--theme-color)}.bar-handle{position:absolute;top:0;right:0;margin-top:-6px;margin-right:-8px;height:16px;width:8px;cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.bar-handle:active{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.shk_bottom{position:absolute;right:30px;bottom:10px;font-size:0;font-weight:400;color:#555}.shk_bottom span{vertical-align:middle}.shk_loader{display:none;color:var(--theme-color)}.shk.Loading .shk_loader{display:inline-block}.shk_loader svg{width:12px;height:12px;animation:rotate 1.4s linear infinite;-webkit-animation:rotate 1.4s linear infinite;-moz-animation:rotate 1.4s linear infinite;position:relative}.shk_visuallyhidden:not(:focus):not(:active){position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden}.shk_time{margin-left:4px;display:inline-block}.shk_time span{font-size:12px}.shk_time_duration:before{content:"/";margin:0 4px}@media (max-width:768px){.shk.Auto{position:fixed;bottom:0;left:0;margin:0;width:100%}.shk.Auto.Top{top:0;bottom:auto}.shk{height:60px}.shk_cover{width:60px}.shk_cover .shk_btn svg{width:100%;height:100%;padding:10px}.shk_btn_pause{bottom:0;right:0}.shk_btn_pause circle{stroke-width:2;r:40}.shk_main{border-left:none;padding:5px 10px}.shk_subtitle{display:none}.shk_title{font-size:1rem;margin:0}.shk_controls{bottom:0;left:0;top:auto;right:auto}.shk_controls .shk_btn:hover{opacity:1}.shk_bar-wrap{display:none}.shk_bottom{right:10px;bottom:10px}}
+@-webkit-keyframes rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.shk{position:inherit;height:120px;box-sizing:border-box;display:flex;flex-flow:row nowrap;border:none;box-shadow:0 0 14px 6px hsla(0,0%,88.6%,.5);cursor:auto;font:400 18px/1.42 Pingfang SC,Hiragano,Helvetica Neue,sans-serif}.shk.Fixed{position:fixed;bottom:0;left:0;margin:0;width:100%}.shk.Fixed.Top{top:0;bottom:auto}.shk.Seeking{cursor:-webkit-grabbing;cursor:grabbing}.shk_cover{width:120px;flex-shrink:0}.shk_cover,.shk_main{position:relative;height:100%}.shk_main{box-sizing:border-box;flex-grow:1;padding:14px 30px 10px;border:none;border-left:5px solid var(--theme-color);width:calc(100% - 120px);background-color:#fff}.shk_img{background-color:var(--theme-color);background-size:cover;background-repeat:no-repeat;height:100%;width:100%}.shk_btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;outline:none;padding:0;cursor:pointer}.shk_cover .shk_btn{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.8}.shk_cover .shk_btn:focus,.shk_cover .shk_btn:hover{opacity:1;transition:all 1s ease}.shk_cover .shk_btn svg{box-sizing:border-box}.shk_btn_play{width:100px;height:100px}.shk_btn_pause{position:absolute;bottom:10px;right:10px;width:24px;height:24px}.shk_btn_pause circle{stroke-width:6;r:38}.shk.Pause .shk_btn_play,.shk.Play .shk_btn_pause{opacity:1;visibility:visible;transition:opacity .05s ease-in .01s,visibility .01s}.shk.Pause .shk_btn_pause,.shk.Play .shk_btn_play{opacity:0;visibility:hidden;transition:opacity .01s ease-in,visibility .01s .01s}.shk_text{overflow:hidden;width:100%;color:var(--theme-color)}.shk_controls,.shk_text,.shk_time{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.shk_subtitle{font-weight:500;max-width:calc(100% - 164px);vertical-align:middle;overflow:hidden;text-overflow:clip}.shk_subtitle,.shk_title{display:inline-block;white-space:nowrap}.shk_title{font-weight:300;margin-top:2px;font-size:24px;transition:-webkit-transform 0s ease-in-out;transition:transform 0s ease-in-out;transition:transform 0s ease-in-out,-webkit-transform 0s ease-in-out}.shk_controls{position:absolute;top:8px;right:20px;z-index:1}.shk_controls .shk_btn{display:inline-block;vertical-align:middle;width:36px;height:36px;color:var(--theme-color);font-size:13px;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.shk_controls .shk_btn:hover{opacity:.8}.shk_main .shk_btn svg{width:16px;height:16px;padding:10px;fill:var(--theme-color);vertical-align:middle}.shk_btn.shk_btn_download svg{fill:none;stroke:var(--theme-color)}.shk_btn_backward svg,.shk_btn_forward svg{width:18px;height:18px;padding:9px}.shk.Mute svg.shk_btn_mute,svg.shk_btn_unmute{display:inline-block}.shk.Mute svg.shk_btn_unmute,svg.shk_btn_mute{display:none}.shk_bar-wrap{height:18px;padding:1px 0;position:relative;cursor:pointer}.shk_bar{position:relative;width:100%;height:3px;margin-top:7px;box-sizing:border-box;background:#e7e7e7;z-index:0}.shk_bar_loaded,.shk_bar_played{width:0;position:absolute;left:0;top:0;bottom:0}.shk_bar_loaded{background:var(--theme-color);-webkit-filter:opacity(30%);filter:opacity(30%);z-index:1}.shk_bar_played{z-index:2}.bar-handle,.shk_bar_played{background:var(--theme-color)}.bar-handle{position:absolute;top:0;right:0;margin-top:-6px;margin-right:-8px;height:16px;width:8px;cursor:move;cursor:-webkit-grab;cursor:grab}.bar-handle:active{cursor:-webkit-grabbing;cursor:grabbing}.shk_bottom{position:absolute;right:30px;bottom:10px;font-size:0;font-weight:400;color:#555}.shk_bottom span{vertical-align:middle}.shk_loader{display:none;color:var(--theme-color)}.shk.Loading .shk_loader{display:inline-block}.shk_loader svg{width:12px;height:12px;-webkit-animation:rotate 1.4s linear infinite;animation:rotate 1.4s linear infinite;position:relative}.shk_visuallyhidden:not(:focus):not(:active){position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;-webkit-clip-path:inset(100%);clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden}.shk_time{margin-left:4px;display:inline-block}.shk_time span{font-size:12px}.shk_time_duration:before{content:"/";margin:0 4px}.shk_icons{display:none}@media (max-width:768px){.shk.Auto{position:fixed;bottom:0;left:0;margin:0;width:100%}.shk.Auto.Top{top:0;bottom:auto}.shk{height:60px}.shk_cover{width:60px}.shk_cover .shk_btn svg{width:100%;height:100%;padding:10px}.shk_btn_pause{bottom:0;right:0}.shk_btn_pause circle{stroke-width:2;r:40}.shk_main{border-left:none;padding:5px 10px}.shk_subtitle{display:none}.shk_title{font-size:1rem;margin:0}.shk_controls{bottom:0;left:0;top:auto;right:auto}.shk_controls .shk_btn:hover{opacity:1}.shk_bar-wrap{display:none}.shk_bottom{right:10px;bottom:10px}}

src/main/resources/static/shikwasa/shikwasa.min.css

@@ -1 +1 @@
-@keyframes rotate{to{transform:rotate(1turn)}}@-webkit-keyframes rotate{to{-webkit-transform:rotate(1turn)}}@-moz-keyframes rotate{to{transform:rotate(1turn)}}.shk{position:inherit;height:120px;box-sizing:border-box;display:flex;flex-flow:row nowrap;border:none;box-shadow:0 0 14px 6px hsla(0,0%,88.6%,.5);cursor:auto;font:400 18px/1.42 Pingfang SC,Hiragano,Helvetica Neue,sans-serif}.shk.Fixed{position:fixed;bottom:0;left:0;margin:0;width:100%}.shk.Fixed.Top{top:0;bottom:auto}.shk.Seeking{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.shk_cover{width:120px;flex-shrink:0}.shk_cover,.shk_main{position:relative;height:100%}.shk_main{box-sizing:border-box;flex-grow:1;padding:14px 30px 10px;border:none;border-left:5px solid var(--theme-color);width:calc(100% - 120px);background-color:#fff}.shk_img{background-color:var(--theme-color);background-size:cover;background-repeat:no-repeat;height:100%;width:100%}.shk_btn{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:none;outline:none;padding:0;cursor:pointer}.shk_cover .shk_btn{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.8}.shk_cover .shk_btn:focus,.shk_cover .shk_btn:hover{opacity:1;transition:all 1s ease}.shk_cover .shk_btn svg{box-sizing:border-box}.shk_btn_play{width:100px;height:100px}.shk_btn_pause{position:absolute;bottom:10px;right:10px;width:24px;height:24px}.shk_btn_pause circle{stroke-width:6;r:38}.shk.Pause .shk_btn_play,.shk.Play .shk_btn_pause{opacity:1;visibility:visible;transition:opacity .05s ease-in .01s,visibility .01s}.shk.Pause .shk_btn_pause,.shk.Play .shk_btn_play{opacity:0;visibility:hidden;transition:opacity .01s ease-in,visibility .01s .01s}.shk_text{overflow:hidden;width:100%;color:var(--theme-color)}.shk_controls,.shk_text,.shk_time{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.shk_subtitle{font-weight:500;max-width:calc(100% - 164px);vertical-align:middle;overflow:hidden;text-overflow:clip}.shk_subtitle,.shk_title{display:inline-block;white-space:nowrap}.shk_title{font-weight:300;margin-top:2px;font-size:24px;transition:transform 0s ease-in-out}.shk_controls{position:absolute;top:8px;right:20px;z-index:1}.shk_controls .shk_btn{display:inline-block;vertical-align:middle;width:36px;height:36px;color:var(--theme-color);font-size:13px;opacity:1;transform:scale(1)}.shk_controls .shk_btn:hover{opacity:.8}.shk_main .shk_btn svg{width:16px;height:16px;padding:10px;fill:var(--theme-color);vertical-align:middle}.shk_btn.shk_btn_download svg{fill:none;stroke:var(--theme-color)}.shk_btn_backward svg,.shk_btn_forward svg{width:18px;height:18px;padding:9px}.shk.Mute svg.shk_btn_mute,svg.shk_btn_unmute{display:inline-block}.shk.Mute svg.shk_btn_unmute,svg.shk_btn_mute{display:none}.shk_bar-wrap{height:18px;padding:1px 0;position:relative;cursor:pointer}.shk_bar{position:relative;width:100%;height:3px;margin-top:7px;box-sizing:border-box;background:#e7e7e7;z-index:0}.shk_bar_loaded,.shk_bar_played{width:0;position:absolute;left:0;top:0;bottom:0}.shk_bar_loaded{background:var(--theme-color);filter:opacity(30%);z-index:1}.shk_bar_played{z-index:2}.bar-handle,.shk_bar_played{background:var(--theme-color)}.bar-handle{position:absolute;top:0;right:0;margin-top:-6px;margin-right:-8px;height:16px;width:8px;cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.bar-handle:active{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.shk_bottom{position:absolute;right:30px;bottom:10px;font-size:0;font-weight:400;color:#555}.shk_bottom span{vertical-align:middle}.shk_loader{display:none;color:var(--theme-color)}.shk.Loading .shk_loader{display:inline-block}.shk_loader svg{width:12px;height:12px;animation:rotate 1.4s linear infinite;-webkit-animation:rotate 1.4s linear infinite;-moz-animation:rotate 1.4s linear infinite;position:relative}.shk_visuallyhidden:not(:focus):not(:active){position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden}.shk_time{margin-left:4px;display:inline-block}.shk_time span{font-size:12px}.shk_time_duration:before{content:"/";margin:0 4px}@media (max-width:768px){.shk.Auto{position:fixed;bottom:0;left:0;margin:0;width:100%}.shk.Auto.Top{top:0;bottom:auto}.shk{height:60px}.shk_cover{width:60px}.shk_cover .shk_btn svg{width:100%;height:100%;padding:10px}.shk_btn_pause{bottom:0;right:0}.shk_btn_pause circle{stroke-width:2;r:40}.shk_main{border-left:none;padding:5px 10px}.shk_subtitle{display:none}.shk_title{font-size:1rem;margin:0}.shk_controls{bottom:0;left:0;top:auto;right:auto}.shk_controls .shk_btn:hover{opacity:1}.shk_bar-wrap{display:none}.shk_bottom{right:10px;bottom:10px}}
+@-webkit-keyframes rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.shk{position:inherit;height:120px;box-sizing:border-box;display:flex;flex-flow:row nowrap;border:none;box-shadow:0 0 14px 6px hsla(0,0%,88.6%,.5);cursor:auto;font:400 18px/1.42 Pingfang SC,Hiragano,Helvetica Neue,sans-serif}.shk.Fixed{position:fixed;bottom:0;left:0;margin:0;width:100%}.shk.Fixed.Top{top:0;bottom:auto}.shk.Seeking{cursor:-webkit-grabbing;cursor:grabbing}.shk_cover{width:120px;flex-shrink:0}.shk_cover,.shk_main{position:relative;height:100%}.shk_main{box-sizing:border-box;flex-grow:1;padding:14px 30px 10px;border:none;width:calc(100% - 120px);background-color:#fff}.shk_img{background-color:var(--theme-color);background-size:cover;background-repeat:no-repeat;height:100%;width:100%}.shk_btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;outline:none;padding:0;cursor:pointer}.shk_cover .shk_btn{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.8}.shk_cover .shk_btn:focus,.shk_cover .shk_btn:hover{opacity:1;transition:all 1s ease}.shk_cover .shk_btn svg{box-sizing:border-box}.shk_btn_play{width:100px;height:100px}.shk_btn_pause{position:absolute;bottom:10px;right:10px;width:24px;height:24px}.shk_btn_pause circle{stroke-width:6;r:38}.shk.Pause .shk_btn_play,.shk.Play .shk_btn_pause{opacity:1;visibility:visible;transition:opacity .05s ease-in .01s,visibility .01s}.shk.Pause .shk_btn_pause,.shk.Play .shk_btn_play{opacity:0;visibility:hidden;transition:opacity .01s ease-in,visibility .01s .01s}.shk_text{overflow:hidden;width:100%;color:var(--theme-color)}.shk_controls,.shk_text,.shk_time{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.shk_subtitle{font-weight:500;max-width:calc(100% - 164px);vertical-align:middle;overflow:hidden;text-overflow:clip}.shk_subtitle,.shk_title{display:inline-block;white-space:nowrap}.shk_title{font-weight:300;margin-top:2px;font-size:24px;transition:-webkit-transform 0s ease-in-out;transition:transform 0s ease-in-out;transition:transform 0s ease-in-out,-webkit-transform 0s ease-in-out}.shk_controls{position:absolute;top:8px;right:20px;z-index:1}.shk_controls .shk_btn{display:inline-block;vertical-align:middle;width:36px;height:36px;color:var(--theme-color);font-size:13px;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.shk_controls .shk_btn:hover{opacity:.8}.shk_main .shk_btn svg{width:16px;height:16px;padding:10px;fill:var(--theme-color);vertical-align:middle}.shk_btn.shk_btn_download svg{fill:none;stroke:var(--theme-color)}.shk_btn_backward svg,.shk_btn_forward svg{width:18px;height:18px;padding:9px}.shk.Mute svg.shk_btn_mute,svg.shk_btn_unmute{display:inline-block}.shk.Mute svg.shk_btn_unmute,svg.shk_btn_mute{display:none}.shk_bar-wrap{height:18px;padding:1px 0;position:relative;cursor:pointer}.shk_bar{position:relative;width:100%;height:3px;margin-top:7px;box-sizing:border-box;background:#e7e7e7;z-index:0}.shk_bar_loaded,.shk_bar_played{width:0;position:absolute;left:0;top:0;bottom:0}.shk_bar_loaded{background:var(--theme-color);-webkit-filter:opacity(30%);filter:opacity(30%);z-index:1}.shk_bar_played{z-index:2}.bar-handle,.shk_bar_played{background:var(--theme-color)}.bar-handle{position:absolute;top:0;right:0;margin-top:-6px;margin-right:-8px;height:16px;width:8px;cursor:move;cursor:-webkit-grab;cursor:grab}.bar-handle:active{cursor:-webkit-grabbing;cursor:grabbing}.shk_bottom{position:absolute;right:30px;bottom:10px;font-size:0;font-weight:400;color:#555}.shk_bottom span{vertical-align:middle}.shk_loader{display:none;color:var(--theme-color)}.shk.Loading .shk_loader{display:inline-block}.shk_loader svg{width:12px;height:12px;-webkit-animation:rotate 1.4s linear infinite;animation:rotate 1.4s linear infinite;position:relative}.shk_visuallyhidden:not(:focus):not(:active){position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;-webkit-clip-path:inset(100%);clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden}.shk_time{margin-left:4px;display:inline-block}.shk_time span{font-size:12px}.shk_time_duration:before{content:"/";margin:0 4px}.shk_icons{display:none}@media (max-width:768px){.shk.Auto{position:fixed;bottom:0;left:0;margin:0;width:100%}.shk.Auto.Top{top:0;bottom:auto}.shk{height:60px}.shk_cover{width:60px}.shk_cover .shk_btn svg{width:100%;height:100%;padding:10px}.shk_btn_pause{bottom:0;right:0}.shk_btn_pause circle{stroke-width:2;r:40}.shk_main{border-left:none;padding:5px 10px}.shk_subtitle{display:none}.shk_title{font-size:1rem;margin:0}.shk_controls{bottom:0;left:0;top:auto;right:auto}.shk_controls .shk_btn:hover{opacity:1}.shk_bar-wrap{display:none}.shk_bottom{right:10px;bottom:10px}}