[READ-ONLY] Mirror of https://github.com/probablykasper/ferrum. Music library app for Mac, Linux and Windows
ferrum.kasper.space
electron
linux
macos
music
music-library
music-player
napi
windows
Changed play/pause icon
+9
-14
db/data/ferrum/sessions.ibd
db/data/ferrum/sessions.ibd
This is a binary file and will not be displayed.
db/data/ferrum/tracks.ibd
db/data/ferrum/tracks.ibd
This is a binary file and will not be displayed.
db/data/ib_logfile0
db/data/ib_logfile0
This is a binary file and will not be displayed.
db/data/ibdata1
db/data/ibdata1
This is a binary file and will not be displayed.
db/data/undo_001
db/data/undo_001
This is a binary file and will not be displayed.
db/data/undo_002
db/data/undo_002
This is a binary file and will not be displayed.
+2
-5
web/src/pug/music/player.pug
+2
-5
web/src/pug/music/player.pug
···
8
8
.name Gravity
9
9
.artist EDEN
10
10
.middle
11
-
//- svg.play-icon(tabindex="0" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24")
12
-
//- path(d="M8 5v14l11-7z")
13
-
//- path(d="M0 0h24v24H0z" fill="none")
14
11
svg.icon.prev(tabindex="0" fill="#FFFFFF", height="24", viewbox="0 0 24 24", width="24", xmlns="http://www.w3.org/2000/svg")
15
12
path(d="M6 6h2v12H6zm3.5 6l8.5 6V6z")
16
13
path(d="M0 0h24v24H0z", fill="none")
17
14
svg.icon.play-pause(tabindex="0" fill="#FFFFFF", height="24", viewbox="0 0 24 24", width="24", xmlns="http://www.w3.org/2000/svg")
18
-
path(d="M0 0h24v24H0z", fill="none")
19
-
path(d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z")
15
+
path(d="M8 5v14l11-7z")
16
+
path(d="M0 0h24v24H0z" fill="none")
20
17
svg.icon.next(tabindex="0" fill="#FFFFFF", height="24", viewbox="0 0 24 24", width="24", xmlns="http://www.w3.org/2000/svg")
21
18
path(d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z")
22
19
path(d="M0 0h24v24H0z", fill="none")
+2
-6
web/src/sass/player.sass
+2
-6
web/src/sass/player.sass
+1
-1
web/src/static/global.css
+1
-1
web/src/static/global.css
···
1
-
html body{margin:0px;font-family:"Nunito", Arial, sans-serif;color:#FFFFFF;font-size:18px}html p,html h1,html h2,html h3,html h4,html h5,html h6{margin:0px;font-weight:normal}html .metadata,html .md{display:none}html h1{font-size:50px}html h2{font-size:35px}html h3{font-size:30px}html h4{font-size:25px}html h5{font-size:20px}html a,html a:link,html a:visited,html a:active{text-decoration:none;outline:none;color:white}html a{display:block}html img{display:block}html input:focus,html button:focus,html textarea:focus,html div,html p,html svg{outline:none}html input,html textarea,html button{color:#FFFFFF;font-family:"Roboto", Arial, sans-serif;border:none;font-size:15px}html input[type="range"]{display:none}html .flex-row{display:flex;justify-content:center;flex-direction:row;width:100%}html .flex-col{display:flex;justify-content:center;flex-direction:column;height:100%}html .invisible{visibility:none}.bg{background:linear-gradient(to bottom right, #192A3D, #181D28);width:100%;height:100%;position:fixed;z-index:5}.fg{width:100%;height:100%;position:fixed;z-index:80;transition:opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);background-color:transparent;pointer-events:none;opacity:0;background-color:#000000}.fg.visible{transition:opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);pointer-events:all;opacity:0.3}.fg.short{transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1)}.button-highlight{cursor:pointer;border-radius:3px;background-color:rgba(255,255,255,0.05);box-shadow:0px 1px 2px 0px rgba(0,0,0,0.24);width:100px;transition:background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1),box-shadow 0.1s cubic-bezier(0.4, 0, 0.2, 1)}.button-highlight.secondary:focus{box-shadow:0px 4px 8px 0px rgba(0,0,0,0.24)}.button-highlight.secondary:focus:active{background-color:rgba(255,255,255,0.025)}.button-highlight:focus{box-shadow:0px 4px 8px 0px rgba(0,0,0,0.24)}.button-highlight:focus:active{background-color:rgba(255,255,255,0.1);box-shadow:0px 4px 8px 0px rgba(0,0,0,0.24)}.button-highlight.secondary{background-color:transparent;box-shadow:none;width:auto}.dialogs{z-index:95;width:100%;height:100%;position:fixed;pointer-events:none}.dialogs .dialog{pointer-events:all;padding:20px;width:500px;position:absolute;left:50%;background-color:#182432;box-shadow:0px 4px 8px 0px rgba(0,0,0,0.24);border-radius:3px;transition:transform 0.3s cubic-bezier(0.4, 0, 1, 1),bottom 0.3s cubic-bezier(0.4, 0, 1, 1);transform:translate(-50%, 100%);bottom:0px}.dialogs .dialog.visible{display:block;transition:transform 0.3s cubic-bezier(0, 0, 0.2, 1),bottom 0.3s cubic-bezier(0, 0, 0.2, 1);transform:translate(-50%, 50%);bottom:50%}.dialogs .dialog .title{margin-bottom:20px}.dialogs .dialog input,.dialogs .dialog textarea,.dialogs .dialog button{box-sizing:border-box;width:100%;padding:12px 12px;font-size:15px;border-radius:3px;margin-bottom:20px}.dialogs .dialog input.name{height:42px;box-shadow:0px 1px 2px 0px rgba(0,0,0,0.24);background-color:rgba(255,255,255,0.05)}.dialogs .dialog textarea.description{height:calc(42px * 3);resize:none;display:block;box-shadow:0px 1px 2px 0px rgba(0,0,0,0.24);background-color:rgba(255,255,255,0.05)}.dialogs .dialog p.description{margin-bottom:20px;font-size:16px;color:rgba(255,255,255,0.75)}.dialogs .dialog .buttons{display:flex;justify-content:flex-end}.dialogs .dialog button{margin-bottom:0px;width:auto;min-width:100px;margin-left:20px}.context-menu{border-radius:3px;background-color:#28313D;box-shadow:0px 3px 6px 0px rgba(0,0,0,0.24);padding:8px 0px;min-width:140px;max-width:350px;white-space:nowrap;user-select:none;display:none;z-index:70;position:fixed;font-size:14px}.context-menu .context-item:not(.arrow){overflow:hidden;text-overflow:ellipsis}.context-menu .context-item{padding:0px 30px;height:36px;line-height:36px;cursor:default}.context-menu .context-item.hover,.context-menu .context-item:hover{background-color:rgba(255,255,255,0.05)}.context-menu .context-item.arrow{position:relative}.context-menu .context-item.arrow.hover .context-submenu,.context-menu .context-item.arrow:hover .context-submenu{opacity:1;pointer-events:all}.context-menu .context-item.arrow .context-submenu{border-radius:3px;background-color:#28313D;box-shadow:0px 3px 6px 0px rgba(0,0,0,0.24);padding:8px 0px;min-width:140px;max-width:350px;pointer-events:none;opacity:0;top:-8px;position:absolute;overflow:scroll}.context-menu .context-item.checked{background-image:url('data:image/svg+xml;utf8,<svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');background-position:10px center;background-size:12px;background-repeat:no-repeat}.context-menu .context-item.arrow{background-image:url('data:image/svg+xml;utf8,<svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');background-position:calc(100% - 10px) center;background-size:12px;background-repeat:no-repeat}.context-menu .context-spacer{margin:6px 0px;height:1px;background-color:rgba(255,255,255,0.05)}.notifications{pointer-events:none;z-index:100;bottom:80px;position:fixed;display:flex;justify-content:flex-end;flex-direction:column;font-size:14px;padding:20px;overflow:hidden}.notifications .notification-container.fade-in .notification{transform:none;max-height:100px;margin-top:20px}.notifications .notification-container.faded-in .notification{transition:transform 0.3s cubic-bezier(0.4, 0, 1, 1),max-height 0.1s cubic-bezier(0.4, 0, 0.2, 1),margin-top 0.1s cubic-bezier(0.4, 0, 0.2, 1)}.notifications .notification-container.fade-out .notification{transform:translate(calc(-100% - 20px), 0px) scale(0.75)}.notifications .notification-container .notification{border-radius:3px;pointer-events:all;background-color:#192a3d;width:250px;box-shadow:0px 6px 10px 0px rgba(0,0,0,0.24);position:relative;transition:transform 0.3s cubic-bezier(0, 0, 0.2, 1),max-height 0.1s cubic-bezier(0.4, 0, 0.2, 1),margin-top 0.1s cubic-bezier(0.4, 0, 0.2, 1);max-height:0px;margin-top:0px;transform:translateX(calc(-100% - 20px)) scale(0.75)}.notifications .notification-container .notification.err::after{content:"";position:absolute;width:4px;height:100%;top:0px;border-top-left-radius:3px;border-bottom-left-radius:3px;background-color:rgba(217,46,46,0.5)}.notifications .notification-container .notification .container{padding:12px;border-radius:3px;background-color:rgba(255,255,255,0.05);display:flex;justify-content:space-between}.notifications .notification-container .notification p.msg{white-space:normal;color:rgba(255,255,255,0.75)}.notifications .notification-container .notification button{font-variant-caps:all-small-caps;background-color:transparent;font-family:"Roboto", sans-serif;cursor:pointer;padding:0px}.upload-box{width:533px;height:300px;transform:translate(-50%, -50%);top:50%;left:50%;position:fixed;z-index:90;background-color:#45484f;border-radius:3px;display:flex;opacity:0;pointer-events:none;transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1)}.upload-box.hover{background-color:#3C3E45}.upload-box.visible{opacity:1;pointer-events:all}.upload-box .middle{width:178px;height:100px;position:relative;margin:auto;display:flex;flex-direction:column;justify-content:center}.upload-box .middle .icon{background-image:url('data:image/svg+xml;utf8,<svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/></svg>');background-position:center;background-size:48px;width:48px;height:48px;background-repeat:no-repeat;margin-left:auto;margin-right:auto}.upload-box .middle .text{text-align:center}.page-container{display:none}.page-container.active{display:block}@keyframes show-fields{0%{height:0px;margin:0px;padding:0px;width:0px;opacity:0}33%{opacity:0}66%{height:42px;margin:10px 0px;padding:12px 12px;width:100%}100%{opacity:1;height:auto;margin:10px 0px;padding:12px 12px;width:100%}}@keyframes hide-fields{0%{opacity:1;height:auto;margin:10px 0px;padding:12px 12px;width:100%}66%{opacity:0}33%{height:42px;margin:10px 0px;padding:12px 12px;width:100%}100%{height:0px;margin:0px;padding:0px;width:0px;opacity:0}}main.home-page-logged-out{min-height:420px;display:flex;flex-direction:column;position:fixed;z-index:20;height:100%;width:100%}main.home-page-logged-out p.logo{margin-top:14px;left:50%;top:0px;text-align:center;font-size:70px;font-family:"Nunito", sans-serif}main.home-page-logged-out .form{left:50%;height:80%;position:relative;transform:translateX(-50%);width:270px;display:flex;flex-direction:column;justify-content:center;padding:0px 15px}main.home-page-logged-out .form input,main.home-page-logged-out .form button{box-sizing:border-box;width:100%;padding:12px 12px;background-color:rgba(255,255,255,0.05);font-size:15px;border-radius:3px;height:42px}main.home-page-logged-out .form input{box-shadow:0px 1px 2px 0px rgba(0,0,0,0.24)}main.home-page-logged-out .form.expanded.login .fields input.for-login,main.home-page-logged-out .form.expanded.register .fields input.for-register{opacity:1;height:auto;pointer-events:all;margin:10px 0px;width:100%;padding:12px 12px;animation-name:show-fields;animation-duration:.3s}main.home-page-logged-out .form.has-been-expanded .fields input{animation-duration:.3s}main.home-page-logged-out .form .fields{transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),height 0.15s cubic-bezier(0.4, 0, 0.2, 1);display:flex;flex-direction:column;align-items:center}main.home-page-logged-out .form .fields .success{font-size:15px;opacity:0;height:0px;position:relative;transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),height 0.15s cubic-bezier(0.4, 0, 0.2, 1)}main.home-page-logged-out .form .fields .success.visible{opacity:1;height:18px}main.home-page-logged-out .form .fields .error{width:300px;font-size:15px;height:0px;color:#FF7777;opacity:0;transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),height 0.15s cubic-bezier(0.4, 0, 0.2, 1),padding 0.15s cubic-bezier(0.4, 0, 0.2, 1);margin-left:50px;height:0px}main.home-page-logged-out .form .fields .error.visible{opacity:1;height:14px;padding-top:4px}main.home-page-logged-out .form .fields input,main.home-page-logged-out .form .fields button{animation-name:hide-fields;animation-duration:0s;pointer-events:none;opacity:0;height:0px;margin:0px;padding:0px;width:0px}main.home-page-logged-out .form .buttons{display:flex}main.home-page-logged-out .form .buttons button.login{margin-left:0px}main.home-page-logged-out .form .buttons button.register{margin-right:0px;transition:background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1),box-shadow 0.1s cubic-bezier(0.4, 0, 0.2, 1),width 0.1s cubic-bezier(0.4, 0, 0.2, 1)}main.home-page-logged-out .form .buttons button{margin:10px}main.home-page-logged-out .form.expanded.register .buttons button.register{width:200%}main.home-page-logged-out .form.expanded.register .buttons button.login{background-color:transparent;box-shadow:none;background-image:url('data:image/svg+xml;utf8,<svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>');background-repeat:no-repeat;background-position:center;color:transparent}main.home-page-logged-out .form.expanded.register .buttons button.login:focus{opacity:0.8}header.app-bar{position:fixed;z-index:50;width:calc(100% - 40px);height:36px;padding:14px 20px;display:flex;justify-content:space-between;align-items:center}header.app-bar .left{width:100px;margin-right:20px}header.app-bar .left a.logo{font-family:"Nunito", sans-serif;font-size:23px;display:inline-block;height:36px;line-height:36px;padding:0px 6px;vertical-align:middle;cursor:pointer}header.app-bar input.search-bar{font-size:15px;font-family:"Nunito", sans-serif;border-radius:3px;padding:8px 12px;background-color:transparent;border-bottom:4px blue;width:50%;max-width:500px;background-color:rgba(255,255,255,0.05)}header.app-bar .right{width:100px;margin-left:20px;display:flex;justify-content:space-between;padding:0px 6px}header.app-bar .right button{width:36px;height:36px;border-radius:3px;background-color:rgba(255,255,255,0.05);background-size:24px;background-repeat:no-repeat;background-position:center;transition:background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1)}header.app-bar .right .playlists{background-image:url('data:image/svg+xml;utf8,<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 24 24" height="24" id="Layer_1" version="1.1" viewBox="0 0 24 24" width="24" x="0px" xml:space="preserve" y="0px"><g id="XMLID_1_"><path d="M0,0h24v24H0V0z" fill="none"/><g id="XMLID_2_"><rect height="2" id="XMLID_3_" width="12" x="4" y="10"/><rect height="2" id="XMLID_4_" width="12" x="4" y="6"/><rect height="2" id="XMLID_5_" width="8" x="4" y="14"/><polygon id="XMLID_6_" points="14,14 14,20 19,17 "/></g></g></svg>')}header.app-bar .right .account{background-image:url('data:image/svg+xml;utf8,<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/><path d="M0 0h24v24H0z" fill="none"/></svg>')}aside.sidebar{width:200px;height:calc(100% - 64px - 20px - 80px);padding:10px 0px;top:64px;right:0px;position:fixed;z-index:20;background-color:rgba(255,255,255,0.05);box-shadow:-20px 0px 4px -20px rgba(0,0,0,0.24),inset 0px 21px 2px -20px rgba(0,0,0,0.24),inset 0px -22px 4px -20px rgba(0,0,0,0.24);overflow-y:scroll;transition:transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)}aside.sidebar.hidden{transform:translateX(calc(100% + 3px))}aside.sidebar .sidebar-resizer{width:7px;transform:translateX(-50%);cursor:col-resize;height:100%;position:absolute;top:0px;z-index:25}aside.sidebar button.create-playlist{background-color:transparent;position:absolute;margin-right:16px;margin-top:8px;right:0px;height:24px;width:24px;background-size:24px;background-repeat:no-repeat;background-position:center;background-image:url('data:image/svg+xml;utf8,<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');cursor:pointer;transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1)}aside.sidebar button.create-playlist:focus:active{opacity:0.7}aside.sidebar button.create-playlist:focus{opacity:0.8}aside.sidebar .header{font-family:"Roboto", sans-serif;font-variant-caps:all-small-caps;padding:0px 24px;font-size:16px;height:40px;line-height:40px}aside.sidebar .playlist{cursor:pointer;padding:0px 24px;height:36px;line-height:36px;color:rgba(255,255,255,0.75);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:48px;background-size:24px;background-repeat:no-repeat;background-position:24px center;background-image:url('data:image/svg+xml;utf8,<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 24 24" height="24" id="Layer_1" version="1.1" viewBox="0 0 24 24" width="24" x="0px" xml:space="preserve" y="0px"><g id="XMLID_1_"><path d="M0,0h24v24H0V0z" fill="none"/><g id="XMLID_2_"><rect height="2" id="XMLID_3_" width="12" x="4" y="10"/><rect height="2" id="XMLID_4_" width="12" x="4" y="6"/><rect height="2" id="XMLID_5_" width="8" x="4" y="14"/><polygon id="XMLID_6_" points="14,14 14,20 19,17 "/></g></g></svg>')}aside.sidebar .playlist:hover{background-color:rgba(255,255,255,0.025)}aside.sidebar .playlist:focus{background-color:rgba(255,255,255,0.05)}main.content{display:flex;width:calc(100% - 200px);height:calc(100% - 64px - 20px - 80px);padding-top:20px;position:absolute;top:64px;z-index:20;box-shadow:inset 0px 23px 6px -20px rgba(0,0,0,0.24),inset 0px -24px 8px -20px rgba(0,0,0,0.24)}main.content.transitioning{transition:width 0.15s cubic-bezier(0.4, 0, 0.2, 1)}main.music-page{width:100%;height:100%;padding:0px 20px;overflow-y:scroll}main.music-page header.playlist-header{display:none;width:100%;margin-bottom:20px;display:flex}main.music-page header.playlist-header .image{background-repeat:no-repeat;background-size:cover;width:200px;height:200px}main.music-page header.playlist-header .playlist-info{display:flex;flex-direction:column;justify-content:center;margin-left:20px}main.music-page header.playlist-header .playlist-info p.playlist-name{font-size:35px}main.music-page header.playlist-header .playlist-info p.playlist-description{font-size:15px;color:rgba(255,255,255,0.75)}main.music-page .music-table.rearranging .col .cell.hover{background-color:transparent}main.music-page .music-table{font-size:14px;display:flex;justify-content:center;color:rgba(255,255,255,0.75);border-radius:3px;padding:0px 14px;background:linear-gradient(to bottom, rgba(255,255,255,0.1) 48px, rgba(255,255,255,0.05) 48px);box-shadow:0px 1px 2px 0px rgba(0,0,0,0.24);margin-bottom:20px}main.music-page .music-table .col:first-child .cell:nth-child(1n+2)::after,main.music-page .music-table .col:last-child .cell:nth-child(1n+2)::after{content:"";position:absolute;height:36px;width:14px;transform:translateY(-10px)}main.music-page .music-table .col:first-child .cell.hover::after,main.music-page .music-table .col:last-child .cell.hover::after{background-color:rgba(255,255,255,0.025)}main.music-page .music-table .col:first-child .cell::after{right:100%}main.music-page .music-table .col:last-child .cell::after{left:100%}main.music-page .music-table .col{position:relative;transition:left 0.1s cubic-bezier(0.4, 0, 0.2, 1);left:0px}main.music-page .music-table .col.no-transition{transition:none}main.music-page .music-table .col.flexible-width{width:0px}main.music-page .music-table .col.rearranging{box-shadow:0px 3px 6px 0px rgba(0,0,0,0.24)}main.music-page .music-table .col .cell{height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:10px}main.music-page .music-table .col .cell.hover{background-color:rgba(255,255,255,0.025)}main.music-page .music-table .col .cell.time:nth-child(n+2){color:#76797F}main.music-page .music-table .col .cell:last-child{margin-bottom:12px}main.music-page .music-table .col .cell:first-child{padding-top:22px;font-family:"Roboto", sans-serif;font-size:14px;font-variant-caps:all-small-caps;color:#FFFFFF;position:relative;cursor:move}main.music-page .music-table .col .cell:first-child span.col-span{cursor:pointer}main.music-page .music-table .col.flexible-width:not(.last-non-auto) .cell:first-child .col-resizer,main.music-page .music-table .col.fixed-width:not(.last-non-auto) .cell:first-child .col-resizer{width:9px;height:100%;padding:0px 2px;position:absolute;right:-3px;top:50%;cursor:col-resize;transform:translate(3px, -50%)}main.music-page .music-table .col.flexible-width:not(.last-non-auto) .cell:first-child .col-resizer .line,main.music-page .music-table .col.fixed-width:not(.last-non-auto) .cell:first-child .col-resizer .line{width:2px;height:100%;background-color:rgba(255,255,255,0.05);margin:auto;pointer-events:none}.msg-404{position:absolute;z-index:20;top:50%;left:50%;transform:translate(-50%, -50%);font-size:20px}.rangeSlider{cursor:pointer;height:4px;position:relative;background-color:rgba(255,255,255,0.4)}.rangeSlider .rangeSlider__fill{background-color:rgba(255,255,255,0.75);height:100%;position:absolute}.rangeSlider .rangeSlider__handle{height:12px;width:12px;background-color:#FFFFFF;border-radius:100%;position:absolute;bottom:-100%}.player{z-index:60;width:100%;height:80px;position:fixed;bottom:0px;background-color:rgba(255,255,255,0.1)}.player.playing .controls .left,.player.paused .controls .left{opacity:1}.player.playing .rangeSlider.progress-slider,.player.paused .rangeSlider.progress-slider{opacity:1}.player .icon{width:30px;height:30px;cursor:pointer;padding:5px;margin:3px;transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);opacity:0.8}.player .icon:focus{opacity:1}.player .rangeSlider.progress-slider{opacity:0;transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);width:calc(100% - 80px + 12px);left:calc(80px - 12px/2);background-color:transparent}.player .rangeSlider.progress-slider:hover,.player .rangeSlider.progress-slider.mouse-down{background-color:rgba(255,255,255,0.4)}.player .rangeSlider.progress-slider .rangeSlider__buffer{z-index:62}.player .rangeSlider.progress-slider .rangeSlider__fill{z-index:64}.player .rangeSlider.progress-slider .rangeSlider__handle{z-index:66}.player .controls{display:flex;width:100%;height:100%;justify-content:space-between}.player .controls>div{height:100%;width:calc(50% - 180px/2);display:flex;align-items:center}.player .controls .left{opacity:0;transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);justify-content:flex-start;min-width:0}.player .controls .left .cover{height:80px;width:80px;position:relative;bottom:4px;z-index:65}.player .controls .left .track-info{padding-left:10px;overflow:hidden}.player .controls .left .track-info>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player .controls .left .track-info .title{font-size:18px}.player .controls .left .track-info .artist{font-size:14px;color:rgba(255,255,255,0.75)}.player .controls .middle{justify-content:center;width:180px}.player .controls .middle .icon.play-pause{width:48px;height:48px}.player .controls .middle .icon.pause{width:48px;height:48px;display:none}.player .controls .right{justify-content:flex-end}.player .controls .right .volume-container{display:flex;align-items:center;padding-left:40px}.player .controls .right .volume-container:hover .volume-slider,.player .controls .right .volume-container.mouse-down .volume-slider{opacity:1;transform:translateX(0px) scale(1)}.player .controls .right .volume-container .volume-slider{opacity:0;transform:translateX(20%) scale(0.75);transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);width:100px}.player .controls .right .volume-container .volume-slider .rangeSlider__buffer{z-index:62}.player .controls .right .volume-container .volume-slider .rangeSlider__fill{z-index:64}.player .controls .right .volume-container .volume-slider .rangeSlider__handle{z-index:66}
1
+
html body{margin:0px;font-family:"Nunito", Arial, sans-serif;color:#FFFFFF;font-size:18px}html p,html h1,html h2,html h3,html h4,html h5,html h6{margin:0px;font-weight:normal}html .metadata,html .md{display:none}html h1{font-size:50px}html h2{font-size:35px}html h3{font-size:30px}html h4{font-size:25px}html h5{font-size:20px}html a,html a:link,html a:visited,html a:active{text-decoration:none;outline:none;color:white}html a{display:block}html img{display:block}html input:focus,html button:focus,html textarea:focus,html div,html p,html svg{outline:none}html input,html textarea,html button{color:#FFFFFF;font-family:"Roboto", Arial, sans-serif;border:none;font-size:15px}html input[type="range"]{display:none}html .flex-row{display:flex;justify-content:center;flex-direction:row;width:100%}html .flex-col{display:flex;justify-content:center;flex-direction:column;height:100%}html .invisible{visibility:none}.bg{background:linear-gradient(to bottom right, #192A3D, #181D28);width:100%;height:100%;position:fixed;z-index:5}.fg{width:100%;height:100%;position:fixed;z-index:80;transition:opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);background-color:transparent;pointer-events:none;opacity:0;background-color:#000000}.fg.visible{transition:opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);pointer-events:all;opacity:0.3}.fg.short{transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1)}.button-highlight{cursor:pointer;border-radius:3px;background-color:rgba(255,255,255,0.05);box-shadow:0px 1px 2px 0px rgba(0,0,0,0.24);width:100px;transition:background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1),box-shadow 0.1s cubic-bezier(0.4, 0, 0.2, 1)}.button-highlight.secondary:focus{box-shadow:0px 4px 8px 0px rgba(0,0,0,0.24)}.button-highlight.secondary:focus:active{background-color:rgba(255,255,255,0.025)}.button-highlight:focus{box-shadow:0px 4px 8px 0px rgba(0,0,0,0.24)}.button-highlight:focus:active{background-color:rgba(255,255,255,0.1);box-shadow:0px 4px 8px 0px rgba(0,0,0,0.24)}.button-highlight.secondary{background-color:transparent;box-shadow:none;width:auto}.dialogs{z-index:95;width:100%;height:100%;position:fixed;pointer-events:none}.dialogs .dialog{pointer-events:all;padding:20px;width:500px;position:absolute;left:50%;background-color:#182432;box-shadow:0px 4px 8px 0px rgba(0,0,0,0.24);border-radius:3px;transition:transform 0.3s cubic-bezier(0.4, 0, 1, 1),bottom 0.3s cubic-bezier(0.4, 0, 1, 1);transform:translate(-50%, 100%);bottom:0px}.dialogs .dialog.visible{display:block;transition:transform 0.3s cubic-bezier(0, 0, 0.2, 1),bottom 0.3s cubic-bezier(0, 0, 0.2, 1);transform:translate(-50%, 50%);bottom:50%}.dialogs .dialog .title{margin-bottom:20px}.dialogs .dialog input,.dialogs .dialog textarea,.dialogs .dialog button{box-sizing:border-box;width:100%;padding:12px 12px;font-size:15px;border-radius:3px;margin-bottom:20px}.dialogs .dialog input.name{height:42px;box-shadow:0px 1px 2px 0px rgba(0,0,0,0.24);background-color:rgba(255,255,255,0.05)}.dialogs .dialog textarea.description{height:calc(42px * 3);resize:none;display:block;box-shadow:0px 1px 2px 0px rgba(0,0,0,0.24);background-color:rgba(255,255,255,0.05)}.dialogs .dialog p.description{margin-bottom:20px;font-size:16px;color:rgba(255,255,255,0.75)}.dialogs .dialog .buttons{display:flex;justify-content:flex-end}.dialogs .dialog button{margin-bottom:0px;width:auto;min-width:100px;margin-left:20px}.context-menu{border-radius:3px;background-color:#28313D;box-shadow:0px 3px 6px 0px rgba(0,0,0,0.24);padding:8px 0px;min-width:140px;max-width:350px;white-space:nowrap;user-select:none;display:none;z-index:70;position:fixed;font-size:14px}.context-menu .context-item:not(.arrow){overflow:hidden;text-overflow:ellipsis}.context-menu .context-item{padding:0px 30px;height:36px;line-height:36px;cursor:default}.context-menu .context-item.hover,.context-menu .context-item:hover{background-color:rgba(255,255,255,0.05)}.context-menu .context-item.arrow{position:relative}.context-menu .context-item.arrow.hover .context-submenu,.context-menu .context-item.arrow:hover .context-submenu{opacity:1;pointer-events:all}.context-menu .context-item.arrow .context-submenu{border-radius:3px;background-color:#28313D;box-shadow:0px 3px 6px 0px rgba(0,0,0,0.24);padding:8px 0px;min-width:140px;max-width:350px;pointer-events:none;opacity:0;top:-8px;position:absolute;overflow:scroll}.context-menu .context-item.checked{background-image:url('data:image/svg+xml;utf8,<svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');background-position:10px center;background-size:12px;background-repeat:no-repeat}.context-menu .context-item.arrow{background-image:url('data:image/svg+xml;utf8,<svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');background-position:calc(100% - 10px) center;background-size:12px;background-repeat:no-repeat}.context-menu .context-spacer{margin:6px 0px;height:1px;background-color:rgba(255,255,255,0.05)}.notifications{pointer-events:none;z-index:100;bottom:80px;position:fixed;display:flex;justify-content:flex-end;flex-direction:column;font-size:14px;padding:20px;overflow:hidden}.notifications .notification-container.fade-in .notification{transform:none;max-height:100px;margin-top:20px}.notifications .notification-container.faded-in .notification{transition:transform 0.3s cubic-bezier(0.4, 0, 1, 1),max-height 0.1s cubic-bezier(0.4, 0, 0.2, 1),margin-top 0.1s cubic-bezier(0.4, 0, 0.2, 1)}.notifications .notification-container.fade-out .notification{transform:translate(calc(-100% - 20px), 0px) scale(0.75)}.notifications .notification-container .notification{border-radius:3px;pointer-events:all;background-color:#192a3d;width:250px;box-shadow:0px 6px 10px 0px rgba(0,0,0,0.24);position:relative;transition:transform 0.3s cubic-bezier(0, 0, 0.2, 1),max-height 0.1s cubic-bezier(0.4, 0, 0.2, 1),margin-top 0.1s cubic-bezier(0.4, 0, 0.2, 1);max-height:0px;margin-top:0px;transform:translateX(calc(-100% - 20px)) scale(0.75)}.notifications .notification-container .notification.err::after{content:"";position:absolute;width:4px;height:100%;top:0px;border-top-left-radius:3px;border-bottom-left-radius:3px;background-color:rgba(217,46,46,0.5)}.notifications .notification-container .notification .container{padding:12px;border-radius:3px;background-color:rgba(255,255,255,0.05);display:flex;justify-content:space-between}.notifications .notification-container .notification p.msg{white-space:normal;color:rgba(255,255,255,0.75)}.notifications .notification-container .notification button{font-variant-caps:all-small-caps;background-color:transparent;font-family:"Roboto", sans-serif;cursor:pointer;padding:0px}.upload-box{width:533px;height:300px;transform:translate(-50%, -50%);top:50%;left:50%;position:fixed;z-index:90;background-color:#45484f;border-radius:3px;display:flex;opacity:0;pointer-events:none;transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1)}.upload-box.hover{background-color:#3C3E45}.upload-box.visible{opacity:1;pointer-events:all}.upload-box .middle{width:178px;height:100px;position:relative;margin:auto;display:flex;flex-direction:column;justify-content:center}.upload-box .middle .icon{background-image:url('data:image/svg+xml;utf8,<svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/></svg>');background-position:center;background-size:48px;width:48px;height:48px;background-repeat:no-repeat;margin-left:auto;margin-right:auto}.upload-box .middle .text{text-align:center}.page-container{display:none}.page-container.active{display:block}@keyframes show-fields{0%{height:0px;margin:0px;padding:0px;width:0px;opacity:0}33%{opacity:0}66%{height:42px;margin:10px 0px;padding:12px 12px;width:100%}100%{opacity:1;height:auto;margin:10px 0px;padding:12px 12px;width:100%}}@keyframes hide-fields{0%{opacity:1;height:auto;margin:10px 0px;padding:12px 12px;width:100%}66%{opacity:0}33%{height:42px;margin:10px 0px;padding:12px 12px;width:100%}100%{height:0px;margin:0px;padding:0px;width:0px;opacity:0}}main.home-page-logged-out{min-height:420px;display:flex;flex-direction:column;position:fixed;z-index:20;height:100%;width:100%}main.home-page-logged-out p.logo{margin-top:14px;left:50%;top:0px;text-align:center;font-size:70px;font-family:"Nunito", sans-serif}main.home-page-logged-out .form{left:50%;height:80%;position:relative;transform:translateX(-50%);width:270px;display:flex;flex-direction:column;justify-content:center;padding:0px 15px}main.home-page-logged-out .form input,main.home-page-logged-out .form button{box-sizing:border-box;width:100%;padding:12px 12px;background-color:rgba(255,255,255,0.05);font-size:15px;border-radius:3px;height:42px}main.home-page-logged-out .form input{box-shadow:0px 1px 2px 0px rgba(0,0,0,0.24)}main.home-page-logged-out .form.expanded.login .fields input.for-login,main.home-page-logged-out .form.expanded.register .fields input.for-register{opacity:1;height:auto;pointer-events:all;margin:10px 0px;width:100%;padding:12px 12px;animation-name:show-fields;animation-duration:.3s}main.home-page-logged-out .form.has-been-expanded .fields input{animation-duration:.3s}main.home-page-logged-out .form .fields{transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),height 0.15s cubic-bezier(0.4, 0, 0.2, 1);display:flex;flex-direction:column;align-items:center}main.home-page-logged-out .form .fields .success{font-size:15px;opacity:0;height:0px;position:relative;transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),height 0.15s cubic-bezier(0.4, 0, 0.2, 1)}main.home-page-logged-out .form .fields .success.visible{opacity:1;height:18px}main.home-page-logged-out .form .fields .error{width:300px;font-size:15px;height:0px;color:#FF7777;opacity:0;transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),height 0.15s cubic-bezier(0.4, 0, 0.2, 1),padding 0.15s cubic-bezier(0.4, 0, 0.2, 1);margin-left:50px;height:0px}main.home-page-logged-out .form .fields .error.visible{opacity:1;height:14px;padding-top:4px}main.home-page-logged-out .form .fields input,main.home-page-logged-out .form .fields button{animation-name:hide-fields;animation-duration:0s;pointer-events:none;opacity:0;height:0px;margin:0px;padding:0px;width:0px}main.home-page-logged-out .form .buttons{display:flex}main.home-page-logged-out .form .buttons button.login{margin-left:0px}main.home-page-logged-out .form .buttons button.register{margin-right:0px;transition:background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1),box-shadow 0.1s cubic-bezier(0.4, 0, 0.2, 1),width 0.1s cubic-bezier(0.4, 0, 0.2, 1)}main.home-page-logged-out .form .buttons button{margin:10px}main.home-page-logged-out .form.expanded.register .buttons button.register{width:200%}main.home-page-logged-out .form.expanded.register .buttons button.login{background-color:transparent;box-shadow:none;background-image:url('data:image/svg+xml;utf8,<svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>');background-repeat:no-repeat;background-position:center;color:transparent}main.home-page-logged-out .form.expanded.register .buttons button.login:focus{opacity:0.8}header.app-bar{position:fixed;z-index:50;width:calc(100% - 40px);height:36px;padding:14px 20px;display:flex;justify-content:space-between;align-items:center}header.app-bar .left{width:100px;margin-right:20px}header.app-bar .left a.logo{font-family:"Nunito", sans-serif;font-size:23px;display:inline-block;height:36px;line-height:36px;padding:0px 6px;vertical-align:middle;cursor:pointer}header.app-bar input.search-bar{font-size:15px;font-family:"Nunito", sans-serif;border-radius:3px;padding:8px 12px;background-color:transparent;border-bottom:4px blue;width:50%;max-width:500px;background-color:rgba(255,255,255,0.05)}header.app-bar .right{width:100px;margin-left:20px;display:flex;justify-content:space-between;padding:0px 6px}header.app-bar .right button{width:36px;height:36px;border-radius:3px;background-color:rgba(255,255,255,0.05);background-size:24px;background-repeat:no-repeat;background-position:center;transition:background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1)}header.app-bar .right .playlists{background-image:url('data:image/svg+xml;utf8,<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 24 24" height="24" id="Layer_1" version="1.1" viewBox="0 0 24 24" width="24" x="0px" xml:space="preserve" y="0px"><g id="XMLID_1_"><path d="M0,0h24v24H0V0z" fill="none"/><g id="XMLID_2_"><rect height="2" id="XMLID_3_" width="12" x="4" y="10"/><rect height="2" id="XMLID_4_" width="12" x="4" y="6"/><rect height="2" id="XMLID_5_" width="8" x="4" y="14"/><polygon id="XMLID_6_" points="14,14 14,20 19,17 "/></g></g></svg>')}header.app-bar .right .account{background-image:url('data:image/svg+xml;utf8,<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/><path d="M0 0h24v24H0z" fill="none"/></svg>')}aside.sidebar{width:200px;height:calc(100% - 64px - 20px - 80px);padding:10px 0px;top:64px;right:0px;position:fixed;z-index:20;background-color:rgba(255,255,255,0.05);box-shadow:-20px 0px 4px -20px rgba(0,0,0,0.24),inset 0px 21px 2px -20px rgba(0,0,0,0.24),inset 0px -22px 4px -20px rgba(0,0,0,0.24);overflow-y:scroll;transition:transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)}aside.sidebar.hidden{transform:translateX(calc(100% + 3px))}aside.sidebar .sidebar-resizer{width:7px;transform:translateX(-50%);cursor:col-resize;height:100%;position:absolute;top:0px;z-index:25}aside.sidebar button.create-playlist{background-color:transparent;position:absolute;margin-right:16px;margin-top:8px;right:0px;height:24px;width:24px;background-size:24px;background-repeat:no-repeat;background-position:center;background-image:url('data:image/svg+xml;utf8,<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');cursor:pointer;transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1)}aside.sidebar button.create-playlist:focus:active{opacity:0.7}aside.sidebar button.create-playlist:focus{opacity:0.8}aside.sidebar .header{font-family:"Roboto", sans-serif;font-variant-caps:all-small-caps;padding:0px 24px;font-size:16px;height:40px;line-height:40px}aside.sidebar .playlist{cursor:pointer;padding:0px 24px;height:36px;line-height:36px;color:rgba(255,255,255,0.75);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:48px;background-size:24px;background-repeat:no-repeat;background-position:24px center;background-image:url('data:image/svg+xml;utf8,<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 24 24" height="24" id="Layer_1" version="1.1" viewBox="0 0 24 24" width="24" x="0px" xml:space="preserve" y="0px"><g id="XMLID_1_"><path d="M0,0h24v24H0V0z" fill="none"/><g id="XMLID_2_"><rect height="2" id="XMLID_3_" width="12" x="4" y="10"/><rect height="2" id="XMLID_4_" width="12" x="4" y="6"/><rect height="2" id="XMLID_5_" width="8" x="4" y="14"/><polygon id="XMLID_6_" points="14,14 14,20 19,17 "/></g></g></svg>')}aside.sidebar .playlist:hover{background-color:rgba(255,255,255,0.025)}aside.sidebar .playlist:focus{background-color:rgba(255,255,255,0.05)}main.content{display:flex;width:calc(100% - 200px);height:calc(100% - 64px - 20px - 80px);padding-top:20px;position:absolute;top:64px;z-index:20;box-shadow:inset 0px 23px 6px -20px rgba(0,0,0,0.24),inset 0px -24px 8px -20px rgba(0,0,0,0.24)}main.content.transitioning{transition:width 0.15s cubic-bezier(0.4, 0, 0.2, 1)}main.music-page{width:100%;height:100%;padding:0px 20px;overflow-y:scroll}main.music-page header.playlist-header{display:none;width:100%;margin-bottom:20px;display:flex}main.music-page header.playlist-header .image{background-repeat:no-repeat;background-size:cover;width:200px;height:200px}main.music-page header.playlist-header .playlist-info{display:flex;flex-direction:column;justify-content:center;margin-left:20px}main.music-page header.playlist-header .playlist-info p.playlist-name{font-size:35px}main.music-page header.playlist-header .playlist-info p.playlist-description{font-size:15px;color:rgba(255,255,255,0.75)}main.music-page .music-table.rearranging .col .cell.hover{background-color:transparent}main.music-page .music-table{font-size:14px;display:flex;justify-content:center;color:rgba(255,255,255,0.75);border-radius:3px;padding:0px 14px;background:linear-gradient(to bottom, rgba(255,255,255,0.1) 48px, rgba(255,255,255,0.05) 48px);box-shadow:0px 1px 2px 0px rgba(0,0,0,0.24);margin-bottom:20px}main.music-page .music-table .col:first-child .cell:nth-child(1n+2)::after,main.music-page .music-table .col:last-child .cell:nth-child(1n+2)::after{content:"";position:absolute;height:36px;width:14px;transform:translateY(-10px)}main.music-page .music-table .col:first-child .cell.hover::after,main.music-page .music-table .col:last-child .cell.hover::after{background-color:rgba(255,255,255,0.025)}main.music-page .music-table .col:first-child .cell::after{right:100%}main.music-page .music-table .col:last-child .cell::after{left:100%}main.music-page .music-table .col{position:relative;transition:left 0.1s cubic-bezier(0.4, 0, 0.2, 1);left:0px}main.music-page .music-table .col.no-transition{transition:none}main.music-page .music-table .col.flexible-width{width:0px}main.music-page .music-table .col.rearranging{box-shadow:0px 3px 6px 0px rgba(0,0,0,0.24)}main.music-page .music-table .col .cell{height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:10px}main.music-page .music-table .col .cell.hover{background-color:rgba(255,255,255,0.025)}main.music-page .music-table .col .cell.time:nth-child(n+2){color:#76797F}main.music-page .music-table .col .cell:last-child{margin-bottom:12px}main.music-page .music-table .col .cell:first-child{padding-top:22px;font-family:"Roboto", sans-serif;font-size:14px;font-variant-caps:all-small-caps;color:#FFFFFF;position:relative;cursor:move}main.music-page .music-table .col .cell:first-child span.col-span{cursor:pointer}main.music-page .music-table .col.flexible-width:not(.last-non-auto) .cell:first-child .col-resizer,main.music-page .music-table .col.fixed-width:not(.last-non-auto) .cell:first-child .col-resizer{width:9px;height:100%;padding:0px 2px;position:absolute;right:-3px;top:50%;cursor:col-resize;transform:translate(3px, -50%)}main.music-page .music-table .col.flexible-width:not(.last-non-auto) .cell:first-child .col-resizer .line,main.music-page .music-table .col.fixed-width:not(.last-non-auto) .cell:first-child .col-resizer .line{width:2px;height:100%;background-color:rgba(255,255,255,0.05);margin:auto;pointer-events:none}.msg-404{position:absolute;z-index:20;top:50%;left:50%;transform:translate(-50%, -50%);font-size:20px}.rangeSlider{cursor:pointer;height:4px;position:relative;background-color:rgba(255,255,255,0.4)}.rangeSlider .rangeSlider__fill{background-color:rgba(255,255,255,0.75);height:100%;position:absolute}.rangeSlider .rangeSlider__handle{height:12px;width:12px;background-color:#FFFFFF;border-radius:100%;position:absolute;bottom:-100%}.player{z-index:60;width:100%;height:80px;position:fixed;bottom:0px;background-color:rgba(255,255,255,0.1)}.player.playing .controls .left,.player.paused .controls .left{opacity:1}.player.playing .rangeSlider.progress-slider,.player.paused .rangeSlider.progress-slider{opacity:1}.player .icon{width:30px;height:30px;cursor:pointer;padding:5px;margin:3px;transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);opacity:0.8}.player .icon:focus{opacity:1}.player .rangeSlider.progress-slider{opacity:0;transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);width:calc(100% - 80px + 12px);left:calc(80px - 12px/2);background-color:transparent}.player .rangeSlider.progress-slider:hover,.player .rangeSlider.progress-slider.mouse-down{background-color:rgba(255,255,255,0.4)}.player .rangeSlider.progress-slider .rangeSlider__buffer{z-index:62}.player .rangeSlider.progress-slider .rangeSlider__fill{z-index:64}.player .rangeSlider.progress-slider .rangeSlider__handle{z-index:66}.player .controls{display:flex;width:100%;height:100%;justify-content:space-between}.player .controls>div{height:100%;width:calc(50% - 180px/2);display:flex;align-items:center}.player .controls .left{opacity:0;transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);justify-content:flex-start;min-width:0}.player .controls .left .cover{height:80px;width:80px;position:relative;bottom:4px;z-index:65}.player .controls .left .track-info{padding-left:10px;overflow:hidden}.player .controls .left .track-info>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player .controls .left .track-info .title{font-size:18px}.player .controls .left .track-info .artist{font-size:14px;color:rgba(255,255,255,0.75)}.player .controls .middle{justify-content:center;width:180px}.player .controls .middle .icon.play-pause{width:40px;height:40px}.player .controls .right{justify-content:flex-end}.player .controls .right .volume-container{display:flex;align-items:center;padding-left:40px}.player .controls .right .volume-container:hover .volume-slider,.player .controls .right .volume-container.mouse-down .volume-slider{opacity:1;transform:translateX(0px) scale(1)}.player .controls .right .volume-container .volume-slider{opacity:0;transform:translateX(20%) scale(0.75);transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);width:100px}.player .controls .right .volume-container .volume-slider .rangeSlider__buffer{z-index:62}.player .controls .right .volume-container .volume-slider .rangeSlider__fill{z-index:64}.player .controls .right .volume-container .volume-slider .rangeSlider__handle{z-index:66}
+4
-2
web/src/static/global.js
+4
-2
web/src/static/global.js
···
1146
1146
if (changeHTML) {
1147
1147
player.classList.remove("paused");
1148
1148
player.classList.add("playing");
1149
-
playPauseIcon.innerHTML = '<path d="M0 0h24v24H0z" fill="none"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"></path>';
1149
+
// playPauseIcon.innerHTML = '<path d="M0 0h24v24H0z" fill="none"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"></path>';
1150
+
playPauseIcon.innerHTML = '<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/><path d="M0 0h24v24H0z" fill="none"/>';
1150
1151
}
1151
1152
};
1152
1153
window.pause = function() {
···
1154
1155
clearInterval(progressInterval);
1155
1156
player.classList.remove("playing");
1156
1157
player.classList.add("paused");
1157
-
playPauseIcon.innerHTML = '<path d="M0 0h24v24H0z" fill="none"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"></path>';
1158
+
// playPauseIcon.innerHTML = '<path d="M0 0h24v24H0z" fill="none"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"></path>';
1159
+
playPauseIcon.innerHTML = '<path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/>';
1158
1160
};
1159
1161
window.next = function() {
1160
1162
if (playingTrackIndex >= queue.length-1) {