db/data/ferrum/playlists.ibd

Reviewed

This is a binary file and will not be displayed.

db/data/ferrum/sessions.ibd

Reviewed

This is a binary file and will not be displayed.

db/data/ib_logfile0

Reviewed

This is a binary file and will not be displayed.

db/data/ibdata1

Reviewed

This is a binary file and will not be displayed.

db/data/mysql.ibd

Reviewed

This is a binary file and will not be displayed.

db/data/undo_001

Reviewed

This is a binary file and will not be displayed.

db/data/undo_002

Reviewed

This is a binary file and will not be displayed.

+6 -5

web/src/pug/music/music.pug

Reviewed

··· 36 36 +column("flexible-width", "album", "Album") 37 37 +column("auto-width", "dateAdded", "Date Added") 38 38 +column("auto-width", "plays", "Plays") 39 39 - aside.sidebar 39 39 + div.sidebar-container 40 40 .sidebar-resizer 41 41 - svg.icon.create-playlist(tabindex="0", fill='#FFFFFF', xmlns='http://www.w3.org/2000/svg', height='24', viewbox='0 0 24 24', width='24') 42 42 - path(d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z') 43 43 - path(d='M0 0h24v24H0z', fill='none') 44 44 - .header Playlists 41 41 + aside.sidebar 42 42 + svg.icon.create-playlist(tabindex="0", fill='#FFFFFF', xmlns='http://www.w3.org/2000/svg', height='24', viewbox='0 0 24 24', width='24') 43 43 + path(d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z') 44 44 + path(d='M0 0h24v24H0z', fill='none') 45 45 + .header Playlists 45 46 include player.pug

+20 -22

web/src/sass/music.sass

Reviewed

··· 36 36 justify-content: flex-end 37 37 svg:last-child 38 38 margin-right: 0px 39 39 - aside.sidebar 40 40 - width: 200px 41 41 - height: calc(100% - 64px - 20px - 80px) 42 42 - padding: 10px 0px 39 39 + div.sidebar-container 40 40 + height: calc(100% - 64px - 80px) 43 41 top: 64px 44 42 right: 0px 45 43 position: fixed 46 44 z-index: 20 47 45 background-color: rgba(#ffffff, 0.05) 48 46 box-shadow: $shadow-2-left, $shadow-1-inset-top, $shadow-2-inset-bottom 49 49 - overflow-y: scroll 50 50 - overflow: visible 51 47 transition: transform $transition 48 48 + aside.sidebar 49 49 + width: 200px 50 50 + height: calc(100% - 20px) 51 51 + padding: 10px 0px 52 52 + overflow-y: auto 52 53 &.hidden 53 54 transform: translateX(calc(100% + 3px)) 54 55 .sidebar-resizer ··· 95 96 main.content 96 97 display: flex 97 98 width: calc(100% - 200px) 98 98 - height: calc(100% - 64px - 20px - 80px) 99 99 - padding-top: 20px 99 99 + height: calc(100% - 64px - 80px) 100 100 position: absolute 101 101 top: 64px 102 102 z-index: 20 ··· 106 106 main.music-page 107 107 width: 100% 108 108 height: 100% 109 109 - padding: 0px 20px 110 110 - overflow-y: scroll 109 109 + overflow-y: auto 111 110 header.playlist-header 112 111 display: none 113 112 width: 100% ··· 137 136 color: rgba(#FFFFFF, 0.75) 138 137 border-radius: 3px 139 138 padding: 0px 14px 140 140 - background: linear-gradient(to bottom, rgba(#FFFFFF, 0.10) 48px, rgba(#FFFFFF, 0.05) 48px) 141 141 - box-shadow: $shadow-1 142 142 - margin-bottom: 20px 139 139 + margin: 20px 0px 143 140 user-select: none 144 141 .col:first-child, .col:last-child 145 142 .cell:nth-child(1n+2)::after ··· 163 160 &.flexible-width 164 161 width: 0px 165 162 &.rearranging 166 166 - box-shadow: $shadow-3 163 163 + box-shadow: $shadow-col 167 164 .cell 168 165 &.hover .cover-container .cover-overlay 169 166 opacity: 1 ··· 205 202 &.time:nth-child(n+2) 206 203 color: #76797F 207 204 padding: 10px 208 208 - &:last-child 209 209 - margin-bottom: 12px 210 205 &:first-child 211 211 - padding-top: 22px 206 206 + padding-top: 14px 207 207 + padding-bottom: 14px 212 208 font-family: "Roboto", sans-serif 213 209 font-size: 14px 214 210 font-variant-caps: all-small-caps 215 211 color: #FFFFFF 216 212 position: relative 217 213 cursor: move 214 214 + overflow: visible 218 215 span.col-span 219 216 cursor: pointer 220 217 &.flexible-width:not(.last-non-auto), &.fixed-width:not(.last-non-auto) 221 218 .cell:first-child .col-resizer 222 222 - width: 9px 223 223 - height: 100% 219 219 + width: 3px 220 220 + height: 50% 224 221 padding: 0px 2px 225 222 position: absolute 226 223 right: -3px 227 224 top: 50% 228 225 cursor: col-resize 229 229 - transform: translate(3px, -50%) 226 226 + transform: translate(0px, -50%) 227 227 + z-index: 22 230 228 .line 231 231 - width: 2px 229 229 + width: 1px 232 230 height: 100% 233 233 - background-color: rgba(#FFFFFF, 0.05) 231 231 + background-color: rgba(#FFFFFF, 0.15) 234 232 margin: auto 235 233 pointer-events: none

+3

web/src/sass/player.sass

Reviewed

··· 113 113 transform: translateX(20%) scale(0.75) 114 114 transition: opacity $transition, transform $transition 115 115 width: 100px 116 116 + &::after 117 117 + left: -6px 118 118 + right: -6px 116 119 .rangeSlider__buffer 117 120 z-index: 62 118 121 .rangeSlider__fill

web/src/sass/variables.css

Reviewed

This is a binary file and will not be displayed.

+1

web/src/sass/variables.sass

Reviewed

··· 7 7 $shadow-2-inset-top: inset 0px 22px 4px -20px rgba(0,0,0,0.24) 8 8 $shadow-2-inset-bottom: inset 0px -22px 4px -20px rgba(0,0,0,0.24) 9 9 $shadow-3: 0px 3px 6px 0px rgba(0,0,0,0.24) 10 10 + $shadow-col: 0px 3px 6px 2px rgba(0,0,0,0.24) 10 11 $shadow-3-inset-top: inset 0px 23px 6px -20px rgba(0,0,0,0.24) 11 12 $shadow-4: 0px 4px 8px 0px rgba(0,0,0,0.24) 12 13 $shadow-4-inset-top: inset 0px 24px 8px -20px rgba(0,0,0,0.24)

+1 -1

web/src/static/global.css

Reviewed

··· 1 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}.icon{width:24px;height:24px;cursor:pointer;padding:6px;margin:3px;transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);opacity:0.8}.icon:focus{opacity:1}.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 p.text{font-size:14px;color:rgba(255,255,255,0.75);height:42px;line-height:42px}.dialogs .dialog p.trackBitrate{margin-left:20px;white-space:nowrap}.dialogs .dialog input.field{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 .flex-row{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;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:flex-end}header.app-bar .right svg:last-child{margin-right:0px}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;overflow:visible;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 svg.create-playlist{background-color:transparent;position:absolute;margin:2px 13px;right:0px;height:24px;width:24px}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;user-select:none}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;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:10px}main.music-page .music-table .col .cell.hover .cover-container .cover-overlay{opacity:1}main.music-page .music-table .col .cell .cover-container{height:30px;width:30px;position:absolute;transform:translate(-33px, -7px);pointer-events:none}main.music-page .music-table .col .cell .cover-container .cover-overlay{pointer-events:all;height:100%;width:100%;position:absolute;z-index:22;opacity:0;background-color:rgba(3,3,3,0.65);background-image:url('data:image/svg+xml;utf8,<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>');background-size:cover;background-repeat:no-repeat;background-position:center}main.music-page .music-table .col .cell .cover-container img.cover{height:100%;width:100%;position:absolute}main.music-page .music-table .col .cell[data-col-name="name"]:not(:first-child){padding-left:36px}main.music-page .music-table .col .cell[data-col-name="artist"]:hover:not(:first-child){text-decoration:underline}main.music-page .music-table .col .cell[data-col-name="album"]:hover:not(:first-child){text-decoration:underline}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%}.rangeSlider::after{content:"";display:block;position:absolute;top:-15px;bottom:-15px;left:0px;right:0px}.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;pointer-events:all}.player.playing .rangeSlider.progress-slider,.player.paused .rangeSlider.progress-slider{opacity:1;pointer-events:all}.player .icon{width:30px;height:30px}.player .rangeSlider.progress-slider{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);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;pointer-events:none;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} 1 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}.icon{width:24px;height:24px;cursor:pointer;padding:6px;margin:3px;transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);opacity:0.8}.icon:focus{opacity:1}.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 p.text{font-size:14px;color:rgba(255,255,255,0.75);height:42px;line-height:42px}.dialogs .dialog p.trackBitrate{margin-left:20px;white-space:nowrap}.dialogs .dialog input.field{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 .flex-row{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;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:flex-end}header.app-bar .right svg:last-child{margin-right:0px}div.sidebar-container{height:calc(100% - 64px - 80px);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);transition:transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)}div.sidebar-container aside.sidebar{width:200px;height:calc(100% - 20px);padding:10px 0px;overflow-y:auto}div.sidebar-container.hidden{transform:translateX(calc(100% + 3px))}div.sidebar-container .sidebar-resizer{width:7px;transform:translateX(-50%);cursor:col-resize;height:100%;position:absolute;top:0px;z-index:25}div.sidebar-container svg.create-playlist{background-color:transparent;position:absolute;margin:2px 13px;right:0px;height:24px;width:24px}div.sidebar-container .header{font-family:"Roboto", sans-serif;font-variant-caps:all-small-caps;padding:0px 24px;font-size:16px;height:40px;line-height:40px}div.sidebar-container .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>')}div.sidebar-container .playlist:hover{background-color:rgba(255,255,255,0.025)}div.sidebar-container .playlist:focus{background-color:rgba(255,255,255,0.05)}main.content{display:flex;width:calc(100% - 200px);height:calc(100% - 64px - 80px);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%;overflow-y:auto}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;margin:20px 0px;user-select:none}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 2px rgba(0,0,0,0.24)}main.music-page .music-table .col .cell{height:16px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:10px}main.music-page .music-table .col .cell.hover .cover-container .cover-overlay{opacity:1}main.music-page .music-table .col .cell .cover-container{height:30px;width:30px;position:absolute;transform:translate(-33px, -7px);pointer-events:none}main.music-page .music-table .col .cell .cover-container .cover-overlay{pointer-events:all;height:100%;width:100%;position:absolute;z-index:22;opacity:0;background-color:rgba(3,3,3,0.65);background-image:url('data:image/svg+xml;utf8,<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>');background-size:cover;background-repeat:no-repeat;background-position:center}main.music-page .music-table .col .cell .cover-container img.cover{height:100%;width:100%;position:absolute}main.music-page .music-table .col .cell[data-col-name="name"]:not(:first-child){padding-left:36px}main.music-page .music-table .col .cell[data-col-name="artist"]:hover:not(:first-child){text-decoration:underline}main.music-page .music-table .col .cell[data-col-name="album"]:hover:not(:first-child){text-decoration:underline}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:first-child{padding-top:14px;padding-bottom:14px;font-family:"Roboto", sans-serif;font-size:14px;font-variant-caps:all-small-caps;color:#FFFFFF;position:relative;cursor:move;overflow:visible}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:3px;height:50%;padding:0px 2px;position:absolute;right:-3px;top:50%;cursor:col-resize;transform:translate(0px, -50%);z-index:22}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:1px;height:100%;background-color:rgba(255,255,255,0.15);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%}.rangeSlider::after{content:"";display:block;position:absolute;top:-15px;bottom:-15px;left:0px;right:0px}.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;pointer-events:all}.player.playing .rangeSlider.progress-slider,.player.paused .rangeSlider.progress-slider{opacity:1;pointer-events:all}.player .icon{width:30px;height:30px}.player .rangeSlider.progress-slider{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);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;pointer-events:none;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::after{left:-6px;right:-6px}.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 -1

web/src/static/global.js

Reviewed

··· 1057 1057 1058 1058 (function sidebar() { 1059 1059 var sidebar = document.querySelector("aside.sidebar"); 1060 1060 - var resizer = document.querySelector("aside.sidebar .sidebar-resizer"); 1060 1060 + var resizer = document.querySelector(".sidebar-resizer"); 1061 1061 var mainContent = document.querySelector("main.content"); 1062 1062 sidebar.style.width = localPref.sidebar.width+"px"; 1063 1063 mainContent.style.width = "calc(100% - "+localPref.sidebar.width+"px)";