[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
Made playlists/account icons look acceptable
+44
-66
db/data/ferrum/sessions.ibd
db/data/ferrum/sessions.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.
+11
-11
web/src/pug/music/music.pug
+11
-11
web/src/pug/music/music.pug
···
4
4
a.logo(href="/", tabindex="0") Ferrum
5
5
input.search-bar(placeholder="Search", tabindex="0")
6
6
.right
7
-
svg#Layer_1(xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', enable-background='new 0 0 24 24', fill='#FFFFFF', height='24', version='1.1', viewbox='0 0 24 24', width='24', x='0px', xml:space='preserve', y='0px')
8
-
button.playlists.button-highlight
9
-
g#XMLID_1_
7
+
svg.icon.playlist-toggle-icon(tabindex="0", xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', enable-background='new 0 0 24 24', fill='#FFFFFF', height='24', version='1.1', viewbox='0 0 24 24', width='24', x='0px', xml:space='preserve', y='0px')
8
+
g
10
9
path(d='M0,0h24v24H0V0z', fill='none')
11
-
g#XMLID_2_
12
-
rect#XMLID_3_(height='2', width='12', x='4', y='10')
13
-
rect#XMLID_4_(height='2', width='12', x='4', y='6')
14
-
rect#XMLID_5_(height='2', width='8', x='4', y='14')
15
-
polygon#XMLID_6_(points='14,14 14,20 19,17 ')
16
-
svg(xmlns='http://www.w3.org/2000/svg', fill='#FFFFFF', height='24', viewbox='0 0 24 24', width='24')
10
+
g
11
+
rect(height='2', width='12', x='4', y='10')
12
+
rect(height='2', width='12', x='4', y='6')
13
+
rect(height='2', width='8', x='4', y='14')
14
+
polygon(points='14,14 14,20 19,17')
15
+
svg.icon.account-icon(tabindex="0", xmlns='http://www.w3.org/2000/svg', fill='#FFFFFF', height='24', viewbox='0 0 24 24', width='24')
17
16
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')
18
17
path(d='M0 0h24v24H0z', fill='none')
19
-
20
18
main.content
21
19
main.music-page
22
20
header.playlist-header(data-context-menu="playlist")
···
40
38
+column("auto-width", "plays", "Plays")
41
39
aside.sidebar
42
40
.sidebar-resizer
43
-
button.create-playlist
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
+
path(d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z')
43
+
path(d='M0 0h24v24H0z', fill='none')
44
44
.header Playlists
45
45
include player.pug
+10
web/src/sass/defaults.sass
+10
web/src/sass/defaults.sass
+6
-32
web/src/sass/music.sass
+6
-32
web/src/sass/music.sass
···
16
16
display: inline-block
17
17
height: 36px
18
18
line-height: 36px
19
-
padding: 0px 6px
20
19
vertical-align: middle
21
20
cursor: pointer
22
21
input.search-bar
···
34
33
width: 100px
35
34
margin-left: 20px
36
35
display: flex
37
-
justify-content: space-between
38
-
padding: 0px 6px
39
-
button
40
-
width: 36px
41
-
height: 36px
42
-
border-radius: 3px
43
-
background-color: rgba(#FFFFFF, 0.05)
44
-
background-size: 24px
45
-
background-repeat: no-repeat
46
-
background-position: center
47
-
transition: background-color $transition
48
-
svg
49
-
width: 24px
50
-
height: 24px
51
-
.playlists
52
-
// 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>')
53
-
.account
54
-
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>')
36
+
justify-content: flex-end
37
+
svg:last-child
38
+
margin-right: 0px
55
39
aside.sidebar
56
40
width: 200px
57
41
height: calc(100% - 64px - 20px - 80px)
···
63
47
background-color: rgba(#ffffff, 0.05)
64
48
box-shadow: $shadow-2-left, $shadow-1-inset-top, $shadow-2-inset-bottom
65
49
overflow-y: scroll
50
+
overflow: visible
66
51
transition: transform $transition
67
52
&.hidden
68
53
transform: translateX(calc(100% + 3px))
···
74
59
position: absolute
75
60
top: 0px
76
61
z-index: 25
77
-
button.create-playlist
62
+
svg.create-playlist
78
63
background-color: transparent
79
64
position: absolute
80
-
margin-right: 16px
81
-
margin-top: 8px
65
+
margin: 2px 13px
82
66
right: 0px
83
67
height: 24px
84
68
width: 24px
85
-
background-size: 24px
86
-
background-repeat: no-repeat
87
-
background-position: center
88
-
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>')
89
-
cursor: pointer
90
-
transition: opacity $transition
91
-
&:focus:active
92
-
opacity: 0.7
93
-
&:focus
94
-
opacity: 0.8
95
69
.header
96
70
font-family: "Roboto", sans-serif
97
71
font-variant-caps: all-small-caps
-7
web/src/sass/player.sass
-7
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 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;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 svg{width:24px;height:24px}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;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;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;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
+
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}
+16
-15
web/src/static/global.js
+16
-15
web/src/static/global.js
···
1093
1093
updateLocalPref();
1094
1094
}
1095
1095
});
1096
-
var button = document.querySelector("header.app-bar .playlists");
1097
-
button.addEventListener("click", function() {
1098
-
mainContent.classList.add("transitioning");
1099
-
if (sidebar.classList.contains("hidden")) {
1100
-
mainContent.style.width = "calc(100% - "+localPref.sidebar.width+"px)";
1101
-
localPref.sidebar.visible = true;
1102
-
} else {
1103
-
mainContent.style.width = "100%";
1104
-
localPref.sidebar.visible = false;
1096
+
document.addEventListener("click", function(e) {
1097
+
if (insideClass(e.target, "playlist-toggle-icon")) {
1098
+
mainContent.classList.add("transitioning");
1099
+
if (sidebar.classList.contains("hidden")) {
1100
+
mainContent.style.width = "calc(100% - "+localPref.sidebar.width+"px)";
1101
+
localPref.sidebar.visible = true;
1102
+
} else {
1103
+
mainContent.style.width = "100%";
1104
+
localPref.sidebar.visible = false;
1105
+
}
1106
+
updateLocalPref();
1107
+
sidebar.classList.toggle("hidden");
1108
+
setTimeout(function() {
1109
+
mainContent.classList.remove("transitioning");
1110
+
}, 150);
1105
1111
}
1106
-
updateLocalPref();
1107
-
sidebar.classList.toggle("hidden");
1108
-
setTimeout(function() {
1109
-
mainContent.classList.remove("transitioning");
1110
-
}, 150);
1111
1112
});
1112
1113
// createPlaylistButton
1113
-
var cpb = document.querySelector(".sidebar button.create-playlist");
1114
+
var cpb = document.querySelector(".sidebar svg.create-playlist");
1114
1115
cpb.addEventListener("click", function() {
1115
1116
openDialog("createPlaylist");
1116
1117
});