diff --git a/README.md b/README.md index 33420f4..4cd1681 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,7 @@ You can find more informations about deemix at https://deemix.app/ - `CTRL+SHIFT+Backspace` deletes all the search bar content - `CTRL+F` focuses the search bar +- `CTRL+B` toggles the download bar - `ALT+Left` goes back to the previous page, if present (like would happen in the browser) - `ALT+Right` goes forward to the next page, if present (like would happen in the browser) - Custom context menu: on certain elements, like download buttons or album covers, when opening the context menu, a custom one with more options will appear instead of the default one diff --git a/public/css/style.css b/public/css/style.css index a0c975d..eca4c4c 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1 +1 @@ -html{--main-scroll: hsl(0, 0%, 33%);--panels-scroll: hsl(180, 2%, 17%);--tag-background: hsl(210, 100%, 38%);--tag-text: hsl(0, 0%, 100%);--toast-background: hsla(0, 0%, 0%, 0.867);--toast-secondary: hsla(0, 0%, 100%, 0.133);--toast-text: hsla(0, 0%, 100%, 0.871);--separator: hsl(0, 0%, 50%)}html[data-theme=light]{--main-background: hsl(0, 0%, 100%);--secondary-background: hsl(0, 0%, 93%);--foreground: hsl(0, 0%, 20%);--foreground-inverted: hsl(0, 0%, 93%);--accent-color: hsl(210, 100%, 52%);--secondary-color: hsl(46, 100%, 57%);--panels-background: hsl(210, 3%, 14%);--panels-text: hsl(0, 0%, 100%);--accent-text: hsl(0, 0%, 0%);--sidebar-link-bg: hsl(0, 0%, 24%);--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);--icon-hover: var(--accent-color);--table-bg: hsl(0, 0%, 100%);--table-zebra: hsl(0, 0%, 90%);--table-highlight: hsl(0, 0%, 84%)}html[data-theme=dark]{--main-background: hsl(0, 0%, 8%);--secondary-background: hsl(0, 0%, 14%);--foreground: hsl(0, 0%, 93%);--foreground-inverted: hsl(0, 0%, 20%);--accent-color: hsl(210, 100%, 52%);--secondary-color: hsl(46, 100%, 57%);--panels-background: hsl(0, 0%, 10%);--panels-text: hsl(0, 0%, 100%);--accent-text: hsl(0, 0%, 87%);--sidebar-link-bg: hsl(0, 0%, 24%);--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);--icon-hover: var(--accent-color);--table-bg: hsl(0, 0%, 8%);--table-zebra: hsl(0, 0%, 14%);--table-highlight: hsl(0, 0%, 20%)}html[data-theme=purple]{--main-background: hsl(261, 74%, 6%);--secondary-background: hsl(257, 61%, 10%);--foreground: hsl(0, 0%, 93%);--foreground-inverted: hsl(258, 62%, 8%);--accent-color: hsl(261, 85%, 37%);--secondary-color: hsl(46, 100%, 57%);--panels-background: hsl(257, 70%, 9%);--panels-text: hsl(0, 0%, 100%);--accent-text: hsl(0, 0%, 87%);--sidebar-link-bg: hsl(257, 70%, 17%);--sidebar-link-bg-20: hsla(257, 70%, 17%, 0.2);--icon-hover: hsl(186, 44%, 54%);--table-bg: hsl(261, 74%, 6%);--table-zebra: hsl(257, 61%, 10%);--table-highlight: hsl(257, 66%, 27%)}html{height:100vh}body{margin:0px;width:100%;height:100%;font-family:"Open Sans","sans-serif";overflow:hidden;background:var(--main-background);color:var(--foreground)}*{margin:0;padding:0;box-sizing:border-box}:root{font-size:16px}table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}table{border-collapse:collapse;border-spacing:0}.lds-ring{display:inline-block;position:relative;width:80px;height:80px}.lds-ring div{box-sizing:border-box;display:block;position:absolute;width:64px;height:64px;margin:8px;border:8px solid #fff;border-radius:50%;animation:lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;border-color:#fff transparent transparent transparent}.lds-ring div:nth-child(1){animation-delay:-0.45s}.lds-ring div:nth-child(2){animation-delay:-0.3s}.lds-ring div:nth-child(3){animation-delay:-0.15s}@keyframes lds-ring{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}input[type=text],input[type=password],input[type=number],input[type=search]{-webkit-appearance:none;appearance:none;width:calc(100% - 16px);border:0px solid #000;line-height:36px;padding:0px 8px;border-radius:4px;background-color:var(--secondary-background);color:var(--foreground);margin-bottom:8px}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;width:28px;height:28px;background-color:var(--foreground);-webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E")}input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:none;border:2px solid gray;opacity:.5;border-radius:2px;padding:7px;margin:3px;display:inline-block;position:relative}input[type=checkbox]:checked{opacity:1;background-color:var(--accent-color);background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='3 3 18 18' width='18'%3E%3Cpath fill='%23ffffff' d='M 10,17 5,12 6.41,10.59 10,14.17 17.59,6.58 19,8 Z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");background-position:center center;border:0px solid var(--accent-color);border-radius:2px;padding:9px;margin:3px;color:var(--accent-text)}select{-webkit-appearance:none;appearance:none;width:100%;border:0px solid #000;line-height:36px;padding:0px 40px 0px 8px;border-radius:4px;background-color:var(--secondary-background);background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath style='fill%3A%23000000%3Bfill-opacity%3A0.25' d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:24px;background-position:calc(100% - 8px) center;background-clip:border-box;color:var(--foreground);margin-bottom:8px}p{word-break:break-word}button{min-width:64px;color:var(--accent-text);position:relative;background-color:var(--accent-color);border:1px solid transparent;border-radius:4px;font-family:inherit;font-weight:600;font-size:14px;padding:0px 8px;margin-right:8px;height:36px;text-transform:uppercase;cursor:pointer;transition:transform 50ms ease-in-out,background-color 200ms ease}button[disabled]{background-color:var(--secondary-background);color:var(--foreground);opacity:.75}button.selective{background-color:var(--main-background);color:var(--foreground)}button.selective.active{background-color:var(--accent-color);color:var(--accent-text)}button.with_icon{display:flex;align-items:center}button.with_icon i{margin-left:8px}button.only_icon{min-width:24px;width:48px;margin:0px 0px 0px 8px;padding:0px 4px}button.only_icon i{padding:6px 0px}button:active{background-color:var(--accent-color);transform:scale(0.98)}button:hover{background:none;border:1px solid var(--accent-color)}img.rounded{border-radius:5px}img.circle{border-radius:50%}i.disabled{opacity:.5;cursor:default}i.explicit_icon{color:#ff382e;margin-right:.3125em;margin-left:-3px}i.explicit_icon.explicit_icon--right{margin-left:.3125em;margin-right:0px}span.tag{background-color:var(--tag-background);border-radius:2px;color:var(--tag-text);display:inline-block;font-size:10px;padding:3px 6px;text-transform:capitalize}a{color:#1e90ff}a.single-cover{position:relative;display:inline-block;color:#fff}a:visited{color:#1e90ff}.clickable{cursor:pointer !important}.table--tracklist .clickable:hover,.table--charts .clickable:hover{text-decoration:underline}.fixed_footer footer{position:sticky;display:flex;align-items:center;flex-direction:row;justify-content:flex-end;background-color:var(--main-background);bottom:0px;height:64px;width:100%;margin-top:24px}.fab{width:56px;height:56px;border-radius:28px;display:inline-block;background-color:var(--accent-color);color:var(--accent-text);cursor:pointer}.fab i{font-size:24px;padding:16px}.with_checkbox{display:flex;align-items:center}.with_checkbox [type=checkbox]{cursor:pointer}.with_checkbox .checkbox_text{margin-left:10px;cursor:pointer}.with_checkbox .checkbox_text::selection{background:none}.loading_placeholder{display:flex;justify-content:center;align-items:center;flex-direction:column;flex:1;height:100%}.loading_placeholder.loading_placeholder--hidden{display:none}.loading_placeholder__text{margin-bottom:20px}.loading_placeholder#search_placeholder{height:calc(100% - 93px)}.loading_placeholder#start_app_placeholder{position:absolute;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.5);z-index:1000}.coverart{background-color:var(--secondary-background)}.cover_container{position:relative}.cover_container .coverart{opacity:1;display:block;width:100%;height:auto;transition:.5s ease;backface-visibility:hidden}.cover_container .download_overlay{transition:.5s ease;opacity:0;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);text-align:center;background-color:#000;border-radius:50%;min-width:32px;padding:0px;height:44px;border:0px}.cover_container .download_overlay i{color:#fff;padding:10px;cursor:pointer}.cover_container .download_overlay:focus{opacity:1}.cover_container:hover .coverart{opacity:.75}.cover_container:hover .download_overlay{opacity:1;border:0px}.inline-flex{display:flex;align-items:center}.inline-flex .right{margin-left:auto}.right{float:right}.hide{display:none !important}.changing-theme{transition:all 200ms ease-in-out}[v-cloak]{display:none}.table{width:100%;-webkit-border-horizontal-spacing:0px;-webkit-border-vertical-spacing:0px}.table tbody tr:not(.table__row-no-highlight):hover{background:var(--table-highlight);cursor:default}.table tr{background:var(--table-bg);transition:background-color 175ms ease-in-out}.table tr:nth-child(even){background:var(--table-zebra);transition:background-color 175ms ease-in-out}.table tr:not(:last-child){border-bottom:1px solid var(--table-highlight)}.table td,.table th{vertical-align:middle}.table th .sortable{-webkit-user-select:none;user-select:none}.table th .sort-asc::after,.table th .sort-desc::after{font-size:.7em;padding-left:3px;line-height:.7em}.table th .sort-asc::after{content:"▲"}.table th .sort-desc::after{content:"▼"}.table td{padding:7px 10px}.table td:first-child{padding:7px 10px 7px 20px}.table td:last-child{padding:7px 20px 7px 10px}.table td img{vertical-align:middle}.table--tracks{border-collapse:collapse}.table--tracks thead{border-bottom:2px solid var(--table-highlight)}.table--tracks th{padding-bottom:10px;height:45px}.table--tracks td{height:35px}.table--tracks td.breakline{word-break:break-word}.table--tracks tr:first-child td:first-child{border-top-left-radius:3px}.table--tracks tr:first-child td:last-child{border-top-right-radius:3px}.table--tracks tr:last-child td:first-child{border-bottom-left-radius:3px}.table--tracks tr:last-child td:last-child{border-bottom-right-radius:3px}.table--tracklist thead{border-bottom:2px solid var(--table-highlight);text-transform:capitalize}.table--tracklist th{height:45px;padding:7px 10px}.table--tracklist th:first-child{padding:7px 10px 7px 20px}.table--tracklist th:last-child{padding:7px 20px 7px 10px}.table--tracklist td{height:35px}.table--charts td{height:35px}.table .table__icon{box-sizing:content-box;width:32px}.table .table__icon--big{width:48px;text-align:center}.table .table__cell--x-small{width:.32%}.table .table__cell--small{width:3.2%}.table .table__cell--medium{width:28.7%}.table .table__cell--large{width:50%}.table .table__cell--left{text-align:left}.table .table__cell--center{text-align:center}.table .table__cell--right{text-align:right}.table .table__cell--download{cursor:pointer}.table .table__cell--download i.material-icons{transition:color 175ms ease-in-out}.table .table__cell--download:hover i.material-icons{color:var(--icon-hover)}.table .table__cell-content.table__cell-content--vertical-center{display:flex;align-items:center}.track_row>td>img{width:32px;height:32px}.track_row>td>a>img{width:56px;height:56px}.top-tracks-position{padding:12px;text-align:center;cursor:default}.page_heading{font-size:2.5rem;margin-bottom:35px}.page_heading--capitalize{text-transform:capitalize}.page_heading--uppercase{text-transform:uppercase}.section_heading{font-size:1.75rem;margin-bottom:25px}#about_tab p{margin-bottom:8px}#about_tab h3{margin:8px 0px}#about_tab hr{margin:12px 0px}.charts_grid .release .coverart{width:156px;height:156px}#download_tab_container{height:100%;background-color:var(--panels-background);color:var(--panels-text);display:block;flex-direction:column}#download_tab_container.tab_hidden{width:32px}#download_tab_container.tab_hidden #toggle_download_tab{margin-left:4px}#download_tab_container.tab_hidden #toggle_download_tab::before{font-family:"Material Icons";font-style:normal;font-weight:400;content:"chevron_left"}#download_tab_container.tab_hidden #download_tab_drag_handler{display:none}#download_tab_container.tab_hidden #queue_buttons{opacity:0;visibility:hidden}#download_tab_container.tab_hidden #download_list{display:none}#download_tab_container.tab_hidden #download_tab_label{opacity:1;visibility:visible}#download_tab_container.tab_hidden::after{content:attr(data-label);display:flex;align-items:center;text-transform:capitalize;writing-mode:vertical-rl;line-height:32px}#toggle_download_tab{width:25px;height:25px;margin-left:20px}#toggle_download_tab::before{font-family:"Material Icons";font-style:normal;font-weight:400;content:"chevron_right"}.download_bar_icon{cursor:pointer;font-size:24px;margin:4px}#download_list{width:100%;height:calc(100% - 32px);padding:0px 8px 0px 28px;overflow-y:scroll}#download_list>.download_object{padding-bottom:8px}#download_list>.download_object .download_info{display:flex;align-items:center}#download_list>.download_object .download_info img{width:75px;height:75px;display:inline-block;flex-shrink:0}#download_list>.download_object .download_info .download_line{display:block}#download_list>.download_object .download_info .download_slim_separator{display:none}#download_list>.download_object .download_info_data{width:100%;margin-left:8px}#download_list>.download_object .download_info_status{margin-left:8px;width:80px}#download_list.slim>.download_object .download_info{display:block}#download_list.slim>.download_object .download_info img{display:none}#download_list.slim>.download_object .download_info .download_line{display:inline-block}#download_list.slim>.download_object .download_info .download_slim_separator{display:inline-block}#download_list.slim>.download_object .download_info_data{width:calc(80% - 16px);display:inline-block;padding-left:0px}#download_list.slim>.download_object .download_info_status{width:20%;display:inline-block;float:right}#download_list::-webkit-scrollbar{width:10px}#download_list::-webkit-scrollbar-track{background:var(--panels-background)}#download_list::-webkit-scrollbar-thumb{background:var(--panels-scroll);border-radius:4px;width:6px;padding:0px 2px}.download_object>.download_bar{display:flex;align-items:center;height:24px}.download_object>.download_bar>.queue_icon{cursor:default;margin-left:8px}.download_object>.download_bar>.progress{margin:0px}#download_tab_container #queue_buttons{position:absolute;top:0;right:0;opacity:1;visibility:visible;transition:all 250ms ease-in-out}#download_tab_container #download_tab_label{opacity:0;visibility:hidden;transition:all 250ms ease-in-out}#download_tab_drag_handler{width:15px;height:100%;position:absolute;background-color:#333;cursor:ew-resize}.reload-button.reload-button--inline{display:inline-block}.reload-button.spin i{animation:spin 500ms infinite ease-out reverse}#home_not_logged_text{margin-bottom:15px}.home_section{border-top:1px solid var(--separator);padding-top:25px;padding-bottom:25px}#main_search .search_section{float:none;padding-top:20px;padding-bottom:20px}#main_search .search_section:not(:first-child){border-top:1px solid var(--separator)}#main_search .top_result_header{display:block;cursor:default;font-size:2rem;text-align:center}.search_header{display:inline-block;cursor:pointer;font-size:1.75rem;margin-bottom:25px;text-transform:capitalize}.search_header:not(.top_result_header){transition:color 200ms ease-in-out}.search_header:not(.top_result_header):hover{color:var(--accent-color)}.top_result{display:flex;align-items:center;flex-direction:column}.top_result>.cover_container{width:156px;height:156px}.top_result .info_box{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-top:15px}.top_result .info_box .primary-text,.top_result .info_box .secondary-text{font-size:18px;text-align:center}.top_result .info_box .primary-text{margin-bottom:5px}.top_result .info_box .secondary-text{margin-bottom:10px}.top_result .info_box .tag{width:40px;text-align:center}.release .primary-text,.release .secondary-text{margin:0px;margin-bottom:4px}.release .secondary-text{opacity:.75;font-size:14px}.release .secondary-text .material-icons{font-size:17px !important;margin-left:4px}.release_grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(156px, 1fr));grid-gap:1rem}.release_grid.firstrow_only{grid-template-rows:1fr;grid-auto-rows:0;grid-row-gap:0px;overflow-y:hidden}#settings_picture{width:125px;height:125px}#log_info{display:flex;flex-direction:column;align-items:center}#open_login_prompt{margin:8px 0px}.inline-flex input{margin-bottom:0px}#spotify_icon{width:24px;height:24px;fill:#1db954;margin-right:15px}.settings-group{display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--separator);padding-top:20px;padding-bottom:20px}.settings-group>*{margin-bottom:15px}.settings-group__header{font-size:1.5rem;margin-bottom:25px}.settings-group__header.settings-group__header--with-icon{display:inline-flex;align-items:center}.settings-group__header.settings-group__header--with-icon i.material-icons{margin-right:15px}.settings-container{display:flex}.settings-container__half{width:50%}.settings-container__third{width:33%}.settings-container__third--only-checkbox{display:flex;flex-direction:column;justify-content:center;align-items:start}.settings-container__half>*,.settings-container__third>*{margin-bottom:15px}.input_group{margin-bottom:25px}.input_group .input_group_text{margin-bottom:7px}.with_checkbox+.input_group{margin-top:10px}.main_tabcontent h1{margin-bottom:12px}.tab{margin:16px 0px}.tab button{background-color:var(--main-background);color:var(--foreground)}.tab button.active{background-color:var(--accent-color)}.release{display:inline-block;width:156px}.release .cover_container{width:156px;height:156px;margin-bottom:10px}.section-tabs{list-style-type:none;display:flex;margin:16px 0 24px 0;cursor:pointer}.section-tabs__tab{flex:1;font-size:1.2rem;padding:.8em;border-top:3px solid var(--foreground);text-align:center;text-transform:capitalize}.section-tabs__tab.active{color:var(--accent-color);border-top:3px solid var(--accent-color)}#search{background-color:var(--secondary-background);width:100%;padding:0 1em;margin-bottom:20px;margin-right:32px;display:flex;align-items:center;border:1px solid transparent;transition:border 200ms ease-in-out}#search .search__icon{width:2rem;height:2rem}#search .search__icon i{font-size:2rem;color:var(--foreground)}#search .search__icon i::selection{background:none}#search:focus-within{border:1px solid var(--foreground)}#search #searchbar{height:calc(2rem + 1em);padding-left:.5em;border:0px;border-radius:0px;background-color:var(--secondary-background);color:var(--foreground);font-size:2rem;font-family:"Open Sans";font-weight:300}#search #searchbar:focus{outline:none}#search #searchbar:-webkit-autofill,#search #searchbar:-webkit-autofill:hover,#search #searchbar:-webkit-autofill:focus,#search #searchbar:-webkit-autofill:active{-webkit-box-shadow:0 0 0 calc(2rem + 1em) var(--secondary-background) inset !important;box-shadow:0 0 0 calc(2rem + 1em) var(--secondary-background) inset !important}#container{--container-width: 95%}@media only screen and (min-width: 601px){#container{--container-width: 85%}}@media only screen and (min-width: 993px){#container{--container-width: 70%}}.smallmodal-content{--modal-content-width: 95%}@media only screen and (min-width: 601px){.smallmodal-content{--modal-content-width: 85%}}@media only screen and (min-width: 993px){.smallmodal-content{--modal-content-width: 70%}}.progress{position:relative;height:4px;display:block;width:100%;background-color:var(--secondary-background);border-radius:2px;margin:.5rem 0 1rem 0;overflow:hidden}.progress .determinate{position:absolute;top:0;left:0;bottom:0;background-color:var(--accent-color);-webkit-transition:width .3s linear;transition:width .3s linear}.progress .converting{background-color:var(--secondary-color);-webkit-transition:none !important;transition:none !important}.progress .indeterminate{background-color:var(--accent-color)}.progress .indeterminate::before{content:"";position:absolute;background-color:inherit;top:0;left:0;bottom:0;will-change:left,right;-webkit-animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite}.progress .indeterminate::after{content:"";position:absolute;background-color:inherit;top:0;left:0;bottom:0;will-change:left,right;-webkit-animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;-webkit-animation-delay:1.15s;animation-delay:1.15s}#sidebar{display:flex;flex-direction:column;width:48px;height:100%;position:absolute;top:0;left:0;background-color:var(--panels-background);color:var(--panels-text);transition:width 125ms ease-in-out 75ms;z-index:999}#sidebar:hover{width:200px}#sidebar .main_tablinks{transition:all 500ms;text-decoration:none;color:inherit}#sidebar .main_tablinks.active{background-color:var(--accent-color)}#sidebar .main_tablinks:not(#theme_selector){display:flex;align-items:center;height:55px;cursor:pointer}#sidebar .main_tablinks:not(#theme_selector):hover{background-color:var(--sidebar-link-bg)}#sidebar .main_tablinks:not(#theme_selector):hover .side_icon{color:var(--accent-color)}#sidebar .main_tablinks_text{margin-left:20px;opacity:0;overflow:hidden;text-transform:capitalize;letter-spacing:1.3px;white-space:nowrap;transition:all 50ms ease-in-out 200ms}#sidebar .side_icon{font-size:30px;padding:9px;transition:all 500ms}#sidebar .side_icon--theme{cursor:default}#sidebar .side_icon::selection{background:none}#sidebar:hover .main_tablinks:hover{background:var(--sidebar-link-bg-20);filter:grayscale(0) opacity(1)}#sidebar:hover .main_tablinks.active{background:var(--sidebar-link-bg);filter:grayscale(1)}html[data-theme=purple] #sidebar:hover .main_tablinks.active{background:var(--sidebar-link-bg-20);filter:grayscale(0)}#sidebar:hover .main_tablinks.active:hover{background:var(--sidebar-link-bg-20);filter:grayscale(0)}#sidebar:hover .main_tablinks_text{opacity:1}#sidebar:hover #theme_togglers{opacity:1}#sidebar #theme_selector{margin-top:20px;display:flex;height:50px}#sidebar #theme_togglers{position:relative;display:flex;justify-content:space-evenly;align-items:center;width:100%;opacity:0;transition:all 125ms ease-in-out 75ms}#sidebar .theme_toggler{width:25px;height:25px;border-radius:1000px;border:1px solid var(--separator);cursor:pointer;transition:border 200ms ease-in-out}#sidebar .theme_toggler--active{border-width:3px}#sidebar .theme_toggler--light{background:#fff}#sidebar .theme_toggler--dark{background:#141414}#sidebar .theme_toggler--purple{background:#460eaf}.image_header header{background-position:0% 35%;background-size:cover;padding:220px 24px 8px;border-radius:8px 8px 0px 0px}.image_header header h1,.image_header header h2{margin:0px}.image_header header h2{font-size:18px;margin-bottom:12px}.preview_controls{opacity:0;display:block;background:rgba(0,0,0,.5);width:56px;height:56px;text-align:center;line-height:56px;position:absolute;border-radius:5px;top:0;right:0;transition:opacity 200ms ease-in-out}.preview_playlist_controls{cursor:pointer}.toast-icon{display:inline-block;margin-right:8px}.circle-loader{display:inline-block;border:2px solid var(--accent-color);border-radius:50%;border-bottom:2px solid var(--secondary-background);width:16px;height:16px;animation:spin 1s linear infinite}.toastify{display:flex;align-items:center;box-shadow:0 3px 6px -1px rgba(0,0,0,.12),0 10px 36px -4px rgba(0,0,0,.3);background:var(--toast-background);color:var(--toast-text)}.toastify .circle-loader{border-bottom-color:var(--toast-secondary)} +html{--main-scroll: hsl(0, 0%, 33%);--panels-scroll: hsl(180, 2%, 17%);--tag-background: hsl(210, 100%, 38%);--tag-text: hsl(0, 0%, 100%);--toast-background: hsla(0, 0%, 0%, 0.867);--toast-secondary: hsla(0, 0%, 100%, 0.133);--toast-text: hsla(0, 0%, 100%, 0.871);--separator: hsl(0, 0%, 50%)}html[data-theme=light]{--main-background: hsl(0, 0%, 100%);--secondary-background: hsl(0, 0%, 93%);--foreground: hsl(0, 0%, 20%);--foreground-inverted: hsl(0, 0%, 93%);--accent-color: hsl(210, 100%, 52%);--secondary-color: hsl(46, 100%, 57%);--panels-background: hsl(210, 3%, 14%);--panels-text: hsl(0, 0%, 100%);--accent-text: hsl(0, 0%, 0%);--sidebar-link-bg: hsl(0, 0%, 24%);--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);--icon-hover: var(--accent-color);--table-bg: hsl(0, 0%, 100%);--table-zebra: hsl(0, 0%, 90%);--table-highlight: hsl(0, 0%, 84%)}html[data-theme=dark]{--main-background: hsl(0, 0%, 8%);--secondary-background: hsl(0, 0%, 14%);--foreground: hsl(0, 0%, 93%);--foreground-inverted: hsl(0, 0%, 20%);--accent-color: hsl(210, 100%, 52%);--secondary-color: hsl(46, 100%, 57%);--panels-background: hsl(0, 0%, 10%);--panels-text: hsl(0, 0%, 100%);--accent-text: hsl(0, 0%, 87%);--sidebar-link-bg: hsl(0, 0%, 24%);--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);--icon-hover: var(--accent-color);--table-bg: hsl(0, 0%, 8%);--table-zebra: hsl(0, 0%, 14%);--table-highlight: hsl(0, 0%, 20%)}html[data-theme=purple]{--main-background: hsl(261, 74%, 6%);--secondary-background: hsl(257, 61%, 10%);--foreground: hsl(0, 0%, 93%);--foreground-inverted: hsl(258, 62%, 8%);--accent-color: hsl(261, 85%, 37%);--secondary-color: hsl(46, 100%, 57%);--panels-background: hsl(257, 70%, 9%);--panels-text: hsl(0, 0%, 100%);--accent-text: hsl(0, 0%, 87%);--sidebar-link-bg: hsl(257, 70%, 17%);--sidebar-link-bg-20: hsla(257, 70%, 17%, 0.2);--icon-hover: hsl(186, 44%, 54%);--table-bg: hsl(261, 74%, 6%);--table-zebra: hsl(257, 61%, 10%);--table-highlight: hsl(257, 66%, 27%)}html{height:100vh}body{margin:0px;width:100%;height:100%;font-family:"Open Sans","sans-serif";overflow:hidden;background:var(--main-background);color:var(--foreground)}*{margin:0;padding:0;box-sizing:border-box}:root{font-size:16px}table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}table{border-collapse:collapse;border-spacing:0}.lds-ring{display:inline-block;position:relative;width:80px;height:80px}.lds-ring div{box-sizing:border-box;display:block;position:absolute;width:64px;height:64px;margin:8px;border:8px solid #fff;border-radius:50%;animation:lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;border-color:#fff transparent transparent transparent}.lds-ring div:nth-child(1){animation-delay:-0.45s}.lds-ring div:nth-child(2){animation-delay:-0.3s}.lds-ring div:nth-child(3){animation-delay:-0.15s}@keyframes lds-ring{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}input[type=text],input[type=password],input[type=number],input[type=search]{-webkit-appearance:none;appearance:none;width:calc(100% - 16px);border:0px solid #000;line-height:36px;padding:0px 8px;border-radius:4px;background-color:var(--secondary-background);color:var(--foreground);margin-bottom:8px}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;width:28px;height:28px;background-color:var(--foreground);-webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E")}input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:none;border:2px solid gray;opacity:.5;border-radius:2px;padding:7px;margin:3px;display:inline-block;position:relative}input[type=checkbox]:checked{opacity:1;background-color:var(--accent-color);background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='3 3 18 18' width='18'%3E%3Cpath fill='%23ffffff' d='M 10,17 5,12 6.41,10.59 10,14.17 17.59,6.58 19,8 Z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");background-position:center center;border:0px solid var(--accent-color);border-radius:2px;padding:9px;margin:3px;color:var(--accent-text)}select{-webkit-appearance:none;appearance:none;width:100%;border:0px solid #000;line-height:36px;padding:0px 40px 0px 8px;border-radius:4px;background-color:var(--secondary-background);background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath style='fill%3A%23000000%3Bfill-opacity%3A0.25' d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:24px;background-position:calc(100% - 8px) center;background-clip:border-box;color:var(--foreground);margin-bottom:8px}p{word-break:break-word}button{min-width:64px;color:var(--accent-text);position:relative;background-color:var(--accent-color);border:1px solid transparent;border-radius:4px;font-family:inherit;font-weight:600;font-size:14px;padding:0px 8px;margin-right:8px;height:36px;text-transform:uppercase;cursor:pointer;transition:transform 50ms ease-in-out,background-color 200ms ease}button[disabled]{background-color:var(--secondary-background);color:var(--foreground);opacity:.75}button.selective{background-color:var(--main-background);color:var(--foreground)}button.selective.active{background-color:var(--accent-color);color:var(--accent-text)}button.with_icon{display:flex;align-items:center}button.with_icon i{margin-left:8px}button.only_icon{min-width:24px;width:48px;margin:0px 0px 0px 8px;padding:0px 4px}button.only_icon i{padding:6px 0px}button:active{background-color:var(--accent-color);transform:scale(0.98)}button:hover{background:none;border:1px solid var(--accent-color)}img.rounded{border-radius:5px}img.circle{border-radius:50%}i.disabled{opacity:.5;cursor:default}i.explicit_icon{color:#ff382e;margin-right:.3125em;margin-left:-3px}i.explicit_icon.explicit_icon--right{margin-left:.3125em;margin-right:0px}span.tag{background-color:var(--tag-background);border-radius:2px;color:var(--tag-text);display:inline-block;font-size:10px;padding:3px 6px;text-transform:capitalize}a{color:#1e90ff}a.single-cover{position:relative;display:inline-block;color:#fff}a:visited{color:#1e90ff}.clickable{cursor:pointer !important}.table--tracklist .clickable:hover,.table--charts .clickable:hover{text-decoration:underline}.fixed_footer footer{position:sticky;display:flex;align-items:center;flex-direction:row;justify-content:flex-end;background-color:var(--main-background);bottom:0px;height:64px;width:100%;margin-top:24px}.fab{width:56px;height:56px;border-radius:28px;display:inline-block;background-color:var(--accent-color);color:var(--accent-text);cursor:pointer}.fab i{font-size:24px;padding:16px}.with_checkbox{display:flex;align-items:center}.with_checkbox [type=checkbox]{cursor:pointer}.with_checkbox .checkbox_text{margin-left:10px;cursor:pointer}.with_checkbox .checkbox_text::selection{background:none}.loading_placeholder{display:flex;justify-content:center;align-items:center;flex-direction:column;flex:1;height:100%}.loading_placeholder.loading_placeholder--hidden{display:none}.loading_placeholder__text{margin-bottom:20px}.loading_placeholder#search_placeholder{height:calc(100% - 93px)}.loading_placeholder#start_app_placeholder{position:absolute;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.5);z-index:1000}.coverart{background-color:var(--secondary-background)}.cover_container{position:relative}.cover_container .coverart{opacity:1;display:block;width:100%;height:auto;transition:.5s ease;backface-visibility:hidden}.cover_container .download_overlay{transition:.5s ease;opacity:0;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);text-align:center;background-color:#000;border-radius:50%;min-width:32px;padding:0px;height:44px;border:0px}.cover_container .download_overlay i{color:#fff;padding:10px;cursor:pointer}.cover_container .download_overlay:focus{opacity:1}.cover_container:hover .coverart{opacity:.75}.cover_container:hover .download_overlay{opacity:1;border:0px}.inline-flex{display:flex;align-items:center}.inline-flex .right{margin-left:auto}.right{float:right}.hide{display:none !important}.changing-theme{transition:all 200ms ease-in-out}[v-cloak]{display:none}.table{width:100%;-webkit-border-horizontal-spacing:0px;-webkit-border-vertical-spacing:0px}.table tbody tr:not(.table__row-no-highlight):hover{background:var(--table-highlight);cursor:default}.table tr{background:var(--table-bg);transition:background-color 175ms ease-in-out}.table tr:nth-child(even){background:var(--table-zebra);transition:background-color 175ms ease-in-out}.table tr:not(:last-child){border-bottom:1px solid var(--table-highlight)}.table td,.table th{vertical-align:middle}.table th .sortable{-webkit-user-select:none;user-select:none}.table th .sort-asc::after,.table th .sort-desc::after{font-size:.7em;padding-left:3px;line-height:.7em}.table th .sort-asc::after{content:"▲"}.table th .sort-desc::after{content:"▼"}.table td{padding:7px 10px}.table td:first-child{padding:7px 10px 7px 20px}.table td:last-child{padding:7px 20px 7px 10px}.table td img{vertical-align:middle}.table--tracks{border-collapse:collapse}.table--tracks thead{border-bottom:2px solid var(--table-highlight)}.table--tracks th{padding-bottom:10px;height:45px}.table--tracks td{height:35px}.table--tracks td.breakline{word-break:break-word}.table--tracks tr:first-child td:first-child{border-top-left-radius:3px}.table--tracks tr:first-child td:last-child{border-top-right-radius:3px}.table--tracks tr:last-child td:first-child{border-bottom-left-radius:3px}.table--tracks tr:last-child td:last-child{border-bottom-right-radius:3px}.table--tracklist thead{border-bottom:2px solid var(--table-highlight);text-transform:capitalize}.table--tracklist th{height:45px;padding:7px 10px}.table--tracklist th:first-child{padding:7px 10px 7px 20px}.table--tracklist th:last-child{padding:7px 20px 7px 10px}.table--tracklist td{height:35px}.table--charts td{height:35px}.table .table__icon{box-sizing:content-box;width:32px}.table .table__icon--big{width:48px;text-align:center}.table .table__cell--x-small{width:.32%}.table .table__cell--small{width:3.2%}.table .table__cell--medium{width:28.7%}.table .table__cell--large{width:50%}.table .table__cell--left{text-align:left}.table .table__cell--center{text-align:center}.table .table__cell--right{text-align:right}.table .table__cell--download{cursor:pointer}.table .table__cell--download i.material-icons{transition:color 175ms ease-in-out}.table .table__cell--download:hover i.material-icons{color:var(--icon-hover)}.table .table__cell-content.table__cell-content--vertical-center{display:flex;align-items:center}.track_row>td>img{width:32px;height:32px}.track_row>td>a>img{width:56px;height:56px}.top-tracks-position{padding:12px;text-align:center;cursor:default}.page_heading{font-size:2.5rem;margin-bottom:35px}.page_heading--capitalize{text-transform:capitalize}.page_heading--uppercase{text-transform:uppercase}.section_heading{font-size:1.75rem;margin-bottom:25px}#about_tab p{margin-bottom:8px}#about_tab h3{margin:8px 0px}#about_tab hr{margin:12px 0px}.charts_grid .release .coverart{width:156px;height:156px}#download_tab_container{height:100%;background-color:var(--panels-background);color:var(--panels-text);display:block;flex-direction:column}#download_tab_container.tab_hidden{width:32px}#download_tab_container.tab_hidden #toggle_download_tab{margin-left:4px}#download_tab_container.tab_hidden #toggle_download_tab::before{font-family:"Material Icons";font-style:normal;font-weight:400;content:"chevron_left"}#download_tab_container.tab_hidden #download_tab_drag_handler{display:none}#download_tab_container.tab_hidden #queue_buttons{opacity:0;visibility:hidden}#download_tab_container.tab_hidden #download_list{display:none}#download_tab_container.tab_hidden #download_tab_label{opacity:1;visibility:visible}#download_tab_container.tab_hidden::after{content:attr(data-label);display:flex;align-items:center;text-transform:capitalize;writing-mode:vertical-rl;line-height:32px}#toggle_download_tab{width:25px;height:25px;margin-left:20px}#toggle_download_tab::before{font-family:"Material Icons";font-style:normal;font-weight:400;content:"chevron_right"}.download_bar_icon{cursor:pointer;font-size:24px;margin:4px}#download_list{width:100%;height:calc(100% - 32px);padding:0px 8px 0px 28px;overflow-y:scroll}#download_list>.download_object{padding-bottom:8px}#download_list>.download_object .download_info{display:flex;align-items:center}#download_list>.download_object .download_info img{width:75px;height:75px;display:inline-block;flex-shrink:0}#download_list>.download_object .download_info .download_line{display:block}#download_list>.download_object .download_info .download_slim_separator{display:none}#download_list>.download_object .download_info_data{width:100%;margin-left:8px}#download_list>.download_object .download_info_status{margin-left:8px;width:80px}#download_list.slim>.download_object .download_info{display:block}#download_list.slim>.download_object .download_info img{display:none}#download_list.slim>.download_object .download_info .download_line{display:inline-block}#download_list.slim>.download_object .download_info .download_slim_separator{display:inline-block}#download_list.slim>.download_object .download_info_data{width:calc(80% - 16px);display:inline-block;padding-left:0px}#download_list.slim>.download_object .download_info_status{width:20%;display:inline-block;float:right}#download_list::-webkit-scrollbar{width:10px}#download_list::-webkit-scrollbar-track{background:var(--panels-background)}#download_list::-webkit-scrollbar-thumb{background:var(--panels-scroll);border-radius:4px;width:6px;padding:0px 2px}.download_object>.download_bar{display:flex;align-items:center;height:24px}.download_object>.download_bar>.queue_icon{cursor:default;margin-left:8px}.download_object>.download_bar>.progress{margin:0px}#download_tab_container #queue_buttons{position:absolute;top:0;right:0;opacity:1;visibility:visible;transition:all 250ms ease-in-out}#download_tab_container #download_tab_label{opacity:0;visibility:hidden;transition:all 250ms ease-in-out}#download_tab_drag_handler{width:15px;height:100%;position:absolute;background-color:#333;cursor:ew-resize}.reload-button.reload-button--inline{display:inline-block}.reload-button.spin i{animation:spin 500ms infinite ease-out reverse}#home_not_logged_text{margin-bottom:15px}.home_section{border-top:1px solid var(--separator);padding-top:25px;padding-bottom:25px}#main_search .search_section{float:none;padding-top:20px;padding-bottom:20px}#main_search .search_section:not(:first-child){border-top:1px solid var(--separator)}#main_search .top_result_header{display:block;cursor:default;font-size:2rem;text-align:center}.search_header{display:inline-block;cursor:pointer;font-size:1.75rem;margin-bottom:25px;text-transform:capitalize}.search_header:not(.top_result_header){transition:color 200ms ease-in-out}.search_header:not(.top_result_header):hover{color:var(--accent-color)}.top_result{display:flex;align-items:center;flex-direction:column}.top_result>.cover_container{width:156px;height:156px}.top_result .info_box{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-top:15px}.top_result .info_box .primary-text,.top_result .info_box .secondary-text{font-size:18px;text-align:center}.top_result .info_box .primary-text{margin-bottom:5px}.top_result .info_box .secondary-text{margin-bottom:10px}.top_result .info_box .tag{width:40px;text-align:center}.release .primary-text,.release .secondary-text{margin:0px;margin-bottom:4px}.release .secondary-text{opacity:.75;font-size:14px}.release .secondary-text .material-icons{font-size:17px !important;margin-left:4px}.release_grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(156px, 1fr));grid-gap:1rem}.release_grid.firstrow_only{grid-template-rows:1fr;grid-auto-rows:0;grid-row-gap:0px;overflow-y:hidden}#settings_picture{width:125px;height:125px}#log_info{display:flex;flex-direction:column;align-items:center}#open_login_prompt{margin:8px 0px}.inline-flex input{margin-bottom:0px}#spotify_icon{width:24px;height:24px;fill:#1db954;margin-right:15px}.settings-group{display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--separator);padding-top:20px;padding-bottom:20px}.settings-group>*{margin-bottom:15px}.settings-group__header{font-size:1.5rem;margin-bottom:25px}.settings-group__header.settings-group__header--with-icon{display:inline-flex;align-items:center}.settings-group__header.settings-group__header--with-icon i.material-icons{margin-right:15px}.settings-container{display:flex}.settings-container__half{width:50%}.settings-container__third{width:33%}.settings-container__third--only-checkbox{display:flex;flex-direction:column;justify-content:center;align-items:start}.settings-container__half>*,.settings-container__third>*{margin-bottom:15px}.input_group{margin-bottom:25px}.input_group .input_group_text{margin-bottom:7px}.with_checkbox+.input_group{margin-top:10px}.main_tabcontent h1{margin-bottom:12px}.tab{margin:16px 0px}.tab button{background-color:var(--main-background);color:var(--foreground)}.tab button.active{background-color:var(--accent-color)}.release{display:inline-block;width:156px}.release .cover_container{width:156px;height:156px;margin-bottom:10px}.section-tabs{list-style-type:none;display:flex;margin:16px 0 24px 0;cursor:pointer}.section-tabs__tab{flex:1;font-size:1.2rem;padding:.8em;border-top:3px solid var(--foreground);text-align:center;text-transform:capitalize}.section-tabs__tab.active{color:var(--accent-color);border-top:3px solid var(--accent-color)}#search .search__icon i::selection{background:none}#container{--container-width: 95%}@media only screen and (min-width: 601px){#container{--container-width: 85%}}@media only screen and (min-width: 993px){#container{--container-width: 70%}}.smallmodal-content{--modal-content-width: 95%}@media only screen and (min-width: 601px){.smallmodal-content{--modal-content-width: 85%}}@media only screen and (min-width: 993px){.smallmodal-content{--modal-content-width: 70%}}.progress{position:relative;height:4px;display:block;width:100%;background-color:var(--secondary-background);border-radius:2px;margin:.5rem 0 1rem 0;overflow:hidden}.progress .determinate{position:absolute;top:0;left:0;bottom:0;background-color:var(--accent-color);-webkit-transition:width .3s linear;transition:width .3s linear}.progress .converting{background-color:var(--secondary-color);-webkit-transition:none !important;transition:none !important}.progress .indeterminate{background-color:var(--accent-color)}.progress .indeterminate::before{content:"";position:absolute;background-color:inherit;top:0;left:0;bottom:0;will-change:left,right;-webkit-animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite}.progress .indeterminate::after{content:"";position:absolute;background-color:inherit;top:0;left:0;bottom:0;will-change:left,right;-webkit-animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;-webkit-animation-delay:1.15s;animation-delay:1.15s}#sidebar{display:flex;flex-direction:column;width:48px;height:100%;position:absolute;top:0;left:0;background-color:var(--panels-background);color:var(--panels-text);transition:width 125ms ease-in-out 75ms;z-index:999}#sidebar:hover{width:200px}#sidebar .main_tablinks{transition:all 500ms;text-decoration:none;color:inherit}#sidebar .main_tablinks.active{background-color:var(--accent-color)}#sidebar .main_tablinks:not(#theme_selector){display:flex;align-items:center;height:55px;cursor:pointer}#sidebar .main_tablinks:not(#theme_selector):hover{background-color:var(--sidebar-link-bg)}#sidebar .main_tablinks:not(#theme_selector):hover .side_icon{color:var(--accent-color)}#sidebar .main_tablinks_text{margin-left:20px;opacity:0;overflow:hidden;text-transform:capitalize;letter-spacing:1.3px;white-space:nowrap;transition:all 50ms ease-in-out 200ms}#sidebar .side_icon{font-size:30px;padding:9px;transition:all 500ms}#sidebar .side_icon--theme{cursor:default}#sidebar .side_icon::selection{background:none}#sidebar:hover .main_tablinks:hover{background:var(--sidebar-link-bg-20);filter:grayscale(0) opacity(1)}#sidebar:hover .main_tablinks.active{background:var(--sidebar-link-bg);filter:grayscale(1)}html[data-theme=purple] #sidebar:hover .main_tablinks.active{background:var(--sidebar-link-bg-20);filter:grayscale(0)}#sidebar:hover .main_tablinks.active:hover{background:var(--sidebar-link-bg-20);filter:grayscale(0)}#sidebar:hover .main_tablinks_text{opacity:1}#sidebar:hover #theme_togglers{opacity:1}#sidebar #theme_selector{margin-top:20px;display:flex;height:50px}#sidebar #theme_togglers{position:relative;display:flex;justify-content:space-evenly;align-items:center;width:100%;opacity:0;transition:all 125ms ease-in-out 75ms}#sidebar .theme_toggler{width:25px;height:25px;border-radius:1000px;border:1px solid var(--separator);cursor:pointer;transition:border 200ms ease-in-out}#sidebar .theme_toggler--active{border-width:3px}#sidebar .theme_toggler--light{background:#fff}#sidebar .theme_toggler--dark{background:#141414}#sidebar .theme_toggler--purple{background:#460eaf}.image_header header{background-position:0% 35%;background-size:cover;padding:220px 24px 8px;border-radius:8px 8px 0px 0px}.image_header header h1,.image_header header h2{margin:0px}.image_header header h2{font-size:18px;margin-bottom:12px}.preview_controls{opacity:0;display:block;background:rgba(0,0,0,.5);width:56px;height:56px;text-align:center;line-height:56px;position:absolute;border-radius:5px;top:0;right:0;transition:opacity 200ms ease-in-out}.preview_playlist_controls{cursor:pointer}.toast-icon{display:inline-block;margin-right:8px}.circle-loader{display:inline-block;border:2px solid var(--accent-color);border-radius:50%;border-bottom:2px solid var(--secondary-background);width:16px;height:16px;animation:spin 1s linear infinite}.toastify{display:flex;align-items:center;box-shadow:0 3px 6px -1px rgba(0,0,0,.12),0 10px 36px -4px rgba(0,0,0,.3);background:var(--toast-background);color:var(--toast-text)}.toastify .circle-loader{border-bottom-color:var(--toast-secondary)} diff --git a/public/js/bundle.js b/public/js/bundle.js index c2827dd..4081d23 100644 --- a/public/js/bundle.js +++ b/public/js/bundle.js @@ -17,7 +17,7 @@ function(e){if(Number(e.version.split(".")[0])>=2)e.mixin({beforeCreate:a});else * * Copyright (C) 2018 Varun A P */ -!function(t,a){e.exports?e.exports=a():t.Toastify=a()}(Oo,(function(e){var t=function(e){return new t.lib.init(e)};function a(e,t){return!(!e||"string"!=typeof t)&&!!(e.className&&e.className.trim().split(/\s+/gi).indexOf(t)>-1)}return t.lib=t.prototype={toastify:"1.8.0",constructor:t,init:function(e){return e||(e={}),this.options={},this.toastElement=null,this.options.text=e.text||"Hi there!",this.options.node=e.node,this.options.duration=0===e.duration?0:e.duration||3e3,this.options.selector=e.selector,this.options.callback=e.callback||function(){},this.options.destination=e.destination,this.options.newWindow=e.newWindow||!1,this.options.close=e.close||!1,this.options.gravity="bottom"===e.gravity?"toastify-bottom":"toastify-top",this.options.positionLeft=e.positionLeft||!1,this.options.position=e.position||"",this.options.backgroundColor=e.backgroundColor,this.options.avatar=e.avatar||"",this.options.className=e.className||"",this.options.stopOnFocus=void 0===e.stopOnFocus||e.stopOnFocus,this.options.onClick=e.onClick,this},buildToast:function(){if(!this.options)throw"Toastify is not initialized";var e=document.createElement("div");if(e.className="toastify on "+this.options.className,this.options.position?e.className+=" toastify-"+this.options.position:!0===this.options.positionLeft?(e.className+=" toastify-left",console.warn("Property `positionLeft` will be depreciated in further versions. Please use `position` instead.")):e.className+=" toastify-right",e.className+=" "+this.options.gravity,this.options.backgroundColor&&(e.style.background=this.options.backgroundColor),this.options.node&&this.options.node.nodeType===Node.ELEMENT_NODE)e.appendChild(this.options.node);else if(e.innerHTML=this.options.text,""!==this.options.avatar){var t=document.createElement("img");t.src=this.options.avatar,t.className="toastify-avatar","left"==this.options.position||!0===this.options.positionLeft?e.appendChild(t):e.insertAdjacentElement("beforeend",t)}if(!0===this.options.close){var a=document.createElement("span");a.innerHTML="✖",a.className="toast-close",a.addEventListener("click",function(e){e.stopPropagation(),this.removeElement(this.toastElement),window.clearTimeout(this.toastElement.timeOutValue)}.bind(this));var n=window.innerWidth>0?window.innerWidth:screen.width;("left"==this.options.position||!0===this.options.positionLeft)&&n>360?e.insertAdjacentElement("afterbegin",a):e.appendChild(a)}if(this.options.stopOnFocus&&this.options.duration>0){const t=this;e.addEventListener("mouseover",(function(t){window.clearTimeout(e.timeOutValue)})),e.addEventListener("mouseleave",(function(){e.timeOutValue=window.setTimeout((function(){t.removeElement(e)}),t.options.duration)}))}return void 0!==this.options.destination&&e.addEventListener("click",function(e){e.stopPropagation(),!0===this.options.newWindow?window.open(this.options.destination,"_blank"):window.location=this.options.destination}.bind(this)),"function"==typeof this.options.onClick&&void 0===this.options.destination&&e.addEventListener("click",function(e){e.stopPropagation(),this.options.onClick()}.bind(this)),e},showToast:function(){var e;if(this.toastElement=this.buildToast(),!(e=void 0===this.options.selector?document.body:document.getElementById(this.options.selector)))throw"Root element is not defined";return e.insertBefore(this.toastElement,e.firstChild),t.reposition(),this.options.duration>0&&(this.toastElement.timeOutValue=window.setTimeout(function(){this.removeElement(this.toastElement)}.bind(this),this.options.duration)),this},hideToast:function(){this.toastElement.timeOutValue&&clearTimeout(this.toastElement.timeOutValue),this.removeElement(this.toastElement)},removeElement:function(e){e.className=e.className.replace(" on",""),window.setTimeout(function(){this.options.node&&this.options.node.parentNode&&this.options.node.parentNode.removeChild(this.options.node),e.parentNode&&e.parentNode.removeChild(e),this.options.callback.call(e),t.reposition()}.bind(this),400)}},t.reposition=function(){for(var e,t={top:15,bottom:15},n={top:15,bottom:15},i={top:15,bottom:15},r=document.getElementsByClassName("toastify"),s=0;s0?window.innerWidth:screen.width)<=360?(r[s].style[e]=i[e]+"px",i[e]+=o+15):!0===a(r[s],"toastify-left")?(r[s].style[e]=t[e]+"px",t[e]+=o+15):(r[s].style[e]=n[e]+"px",n[e]+=o+15)}return this},t.lib.init.prototype=t.lib,t}))}));let Uo={};const qo=function(e,t=null,a=!0,n=null){if(Uo[n]){let i=Uo[n],r=document.querySelectorAll(`div.toastify[toast_id=${n}]`);e&&r.forEach(t=>{t.querySelectorAll(".toast-message").forEach(t=>{t.innerHTML=e})}),t&&(t="loading"==t?'
':`${t}`,r.forEach(e=>{e.querySelectorAll(".toast-icon").forEach(e=>{e.innerHTML=t})})),null!==a&&a&&(r.forEach(e=>{e.classList.add("dismissable")}),setTimeout(()=>{i.hideToast(),delete Uo[n]},3e3))}else{let i=Bo({text:`${t=null==t?"":"loading"==t?'
':`${t}`}${e}`,duration:a?3e3:0,gravity:"bottom",position:"left",className:a?"dismissable":"",onClick:function(){let e=!0;if(n){let t=document.querySelector(`div.toastify[toast_id=${n}]`).classList;t&&(e=-1!=Array.prototype.slice.call(t).indexOf("dismissable"))}i&&e&&(i.hideToast(),n&&delete Uo[n])}}).showToast();n&&(Uo[n]=i,i.toastElement.setAttribute("toast_id",n))}};jo.on("toast",e=>{const{msg:t,icon:a,dismiss:n,id:i}=e;qo(t,a||null,void 0===n||n,i||null)});const Vo={components:{QueueItem:Lo},data:()=>({cachedTabWidth:parseInt(localStorage.getItem("downloadTabWidth"))||300,queue:[],queueList:{},queueComplete:[]}),computed:{...ko({clientMode:"getClientMode"})},mounted(){jo.on("startDownload",this.startDownload),jo.on("startConversion",this.startConversion),jo.on("init_downloadQueue",this.initQueue),jo.on("addedToQueue",this.addToQueue),jo.on("updateQueue",this.updateQueue),jo.on("removedFromQueue",this.removeFromQueue),jo.on("finishDownload",this.finishDownload),jo.on("removedAllDownloads",this.removeAllDownloads),jo.on("removedFinishedDownloads",this.removedFinishedDownloads),"true"===localStorage.getItem("slimDownloads")&&this.$refs.list.classList.add("slim"),"true"===localStorage.getItem("downloadTabOpen")&&(this.$refs.container.classList.remove("tab_hidden"),this.setTabWidth(this.cachedTabWidth)),document.addEventListener("mouseup",()=>{document.removeEventListener("mousemove",this.handleDrag)}),window.addEventListener("beforeunload",()=>{localStorage.setItem("downloadTabWidth",this.cachedTabWidth)})},methods:{...Ao(["setErrors"]),onRemoveItem(e){jo.emit("removeFromQueue",e)},setTabWidth(e){void 0===e?(this.$refs.container.style.width="",this.$refs.list.style.width=""):(this.$refs.container.style.width=e+"px",this.$refs.list.style.width=e+"px")},initQueue(e){const{queue:t,queueComplete:a,currentItem:n,queueList:i,restored:r}=e;a.length&&a.forEach(e=>{i[e].silent=!0,this.addToQueue(i[e])}),n&&(i[n].silent=!0,this.addToQueue(i[n],!0)),t.forEach(e=>{i[e].silent=!0,this.addToQueue(i[e])}),r&&(qo(this.$t("toasts.queueRestored"),"done",!0,"restoring_queue"),jo.emit("queueRestored"))},addToQueue(e,t=!1){if(Array.isArray(e)){if(e.length>1)return e.forEach((e,t)=>{e.silent=!0,this.addToQueue(e)}),void qo(this.$t("toasts.addedMoreToQueue",{n:e.length}),"playlist_add_check");e=e[0]}this.$set(e,"current",t),this.$set(this.queueList,e.uuid,e);if(e.downloaded+e.failed==e.size){const t=-1==this.queueComplete.indexOf(e.uuid);this.$set(this.queueList[e.uuid],"status","download finished"),t&&this.queueComplete.push(e.uuid)}else{-1==this.queue.indexOf(e.uuid)&&this.queue.push(e.uuid)}(e.progress>0&&e.progress<100||t)&&this.startDownload(e.uuid),e.silent||qo(this.$t("toasts.addedToQueue",{item:e.title}),"playlist_add_check")},updateQueue(e){const{uuid:t,downloaded:a,failed:n,progress:i,conversion:r,error:s,data:o,errid:l}=e;t&&this.queue.indexOf(t)>-1&&(a&&this.queueList[t].downloaded++,n&&(this.queueList[t].failed++,this.queueList[t].errors.push({message:s,data:o,errid:l})),i&&(this.queueList[t].progress=i),r&&(this.queueList[t].conversion=r))},removeFromQueue(e){let t=this.queue.indexOf(e);t>-1&&(this.$delete(this.queue,t),this.$delete(this.queueList,e))},removeAllDownloads(e){if(this.queueComplete=[],e){this.queue=[e];let t=this.queueList[e];this.queueList={},this.queueList[e]=t}else this.queue=[],this.queueList={}},removedFinishedDownloads(){this.queueComplete.forEach(e=>{this.$delete(this.queueList,e)}),this.queueComplete=[]},toggleDownloadTab(e){this.setTabWidth(),this.$refs.container.style.transition="all 250ms ease-in-out";let t=this.$refs.container.classList.toggle("tab_hidden");t||this.setTabWidth(this.cachedTabWidth),localStorage.setItem("downloadTabOpen",!t)},cleanQueue(){jo.emit("removeFinishedDownloads")},cancelQueue(){jo.emit("cancelAllDownloads")},openDownloadsFolder(){jo.emit("openDownloadsFolder")},handleDrag(e){let t=window.innerWidth-e.pageX+2;t<250?t=250:t>500&&(t=500),this.cachedTabWidth=t,this.setTabWidth(t)},startDrag(){document.addEventListener("mousemove",this.handleDrag)},startDownload(e){this.$set(this.queueList[e],"status","downloading")},finishDownload(e){if(!(this.queue.indexOf(e)>-1))return;this.$set(this.queueList[e],"status","download finished"),qo(this.$t("toasts.finishDownload",{item:this.queueList[e].title}),"done");let t=this.queue.indexOf(e);t>-1&&(this.queue.splice(t,1),this.queueComplete.push(e)),this.queue.length<=0&&qo(this.$t("toasts.allDownloaded"),"done_all")},startConversion(e){this.$set(this.queueList[e],"status","converting"),this.$set(this.queueList[e],"conversion",0)},async showErrorsTab(e){await this.setErrors(e),this.$router.push({name:"Errors"})}}};var Go=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{ref:"container",staticClass:"tab_hidden",attrs:{id:"download_tab_container","data-label":e.$t("downloads"),"aria-label":"downloads"},on:{transitionend:function(t){e.$refs.container.style.transition=""}}},[a("div",{ref:"dragHandler",attrs:{id:"download_tab_drag_handler"},on:{mousedown:function(t){return t.preventDefault(),e.startDrag(t)}}}),e._v(" "),a("i",{ref:"toggler",staticClass:"material-icons download_bar_icon",attrs:{id:"toggle_download_tab",title:e.$t("globals.toggle_download_tab_hint")},on:{click:function(t){return t.preventDefault(),e.toggleDownloadTab(t)}}}),e._v(" "),a("div",{attrs:{id:"queue_buttons"}},[e.clientMode?a("i",{staticClass:"material-icons download_bar_icon",attrs:{id:"open_downloads_folder",title:e.$t("globals.open_downloads_folder")},on:{click:e.openDownloadsFolder}},[e._v("\n\t\t\tfolder_open\n\t\t")]):e._e(),e._v(" "),a("i",{staticClass:"material-icons download_bar_icon",attrs:{id:"clean_queue",title:e.$t("globals.clean_queue_hint")},on:{click:e.cleanQueue}},[e._v("\n\t\t\tclear_all\n\t\t")]),e._v(" "),a("i",{staticClass:"material-icons download_bar_icon",attrs:{id:"cancel_queue",title:e.$t("globals.cancel_queue_hint")},on:{click:e.cancelQueue}},[e._v("\n\t\t\tdelete_sweep\n\t\t")])]),e._v(" "),a("div",{ref:"list",attrs:{id:"download_list"}},e._l(e.queueList,(function(t){return a("QueueItem",{key:t.uuid,attrs:{"queue-item":t},on:{"show-errors":e.showErrorsTab,"remove-item":e.onRemoveItem}})})),1)])};Go._withStripped=!0;var Ho=function(e,t,a,n,i,r,s,o){const l=("function"==typeof a?a.options:a)||{};l.__file="C:\\Users\\Roberto\\Dev\\repos\\deemix-pyweb\\webui\\src\\components\\downloads\\TheDownloadBar.vue",l.render||(l.render=e.render,l.staticRenderFns=e.staticRenderFns,l._compiled=!0,i&&(l.functional=!0)),l._scopeId=n;{let e;if(t&&(e=function(e){t.call(this,s(e))}),void 0!==e)if(l.functional){const t=l.render;l.render=function(a,n){return e.call(n),t(a,n)}}else{const t=l.beforeCreate;l.beforeCreate=t?[].concat(t,e):[e]}}return l}({render:Go,staticRenderFns:[]},(function(e){e&&e("data-v-376d9def_0",{source:"#download_tab_container[data-v-376d9def] {\n height: 100vh;\n}\n\n/*# sourceMappingURL=TheDownloadBar.vue.map */",map:{version:3,sources:["C:\\Users\\Roberto\\Dev\\repos\\deemix-pyweb\\webui/C:\\Users\\Roberto\\Dev\\repos\\deemix-pyweb\\webui/C:\\Users\\Roberto\\Dev\\repos\\deemix-pyweb\\webui\\src\\components\\downloads\\TheDownloadBar.vue","TheDownloadBar.vue"],names:[],mappings:"AAyDA;EACA,aAAA;AAAA;;ACvDA,6CAA6C",file:"TheDownloadBar.vue",sourcesContent:[null,"#download_tab_container {\n height: 100vh; }\n\n/*# sourceMappingURL=TheDownloadBar.vue.map */"]},media:void 0})}),Vo,"data-v-376d9def",!1,0,(function e(){const t=document.head||document.getElementsByTagName("head")[0],a=e.styles||(e.styles={}),n="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());return function(e,i){if(document.querySelector('style[data-vue-ssr-id~="'+e+'"]'))return;const r=n?i.media||"default":e,s=a[r]||(a[r]={ids:[],parts:[],element:void 0});if(!s.ids.includes(e)){let a=i.source,o=s.ids.length;if(s.ids.push(e),n&&(s.element=s.element||document.querySelector("style[data-group="+r+"]")),!s.element){const e=s.element=document.createElement("style");e.type="text/css",i.media&&e.setAttribute("media",i.media),n&&(e.setAttribute("data-group",r),e.setAttribute("data-next-index","0")),t.appendChild(e)}if(n&&(o=parseInt(s.element.getAttribute("data-next-index")),s.element.setAttribute("data-next-index",o+1)),s.element.styleSheet)s.parts.push(a),s.element.styleSheet.cssText=s.parts.filter(Boolean).join("\n");else{const e=document.createTextNode(a),t=s.element.childNodes;t[o]&&s.element.removeChild(t[o]),t.length?s.element.insertBefore(e,t[o]):s.element.appendChild(e)}}}}));const Wo={props:{text:{type:String,required:!1,default:"Loading..."},id:{type:String,required:!1},hidden:{type:Boolean,required:!1,default:!1}}};var Ko=function(e,t){var a=t._c;return a("div",{staticClass:"loading_placeholder",class:{"loading_placeholder--hidden":t.props.hidden},attrs:{id:t.props.id}},[a("span",{staticClass:"loading_placeholder__text"},[t._v(t._s(t.props.text))]),t._v(" "),t._m(0)])};Ko._withStripped=!0;var Qo=function(e,t,a,n,i,r,s,o){const l=("function"==typeof a?a.options:a)||{};return l.__file="C:\\Users\\Roberto\\Dev\\repos\\deemix-pyweb\\webui\\src\\components\\globals\\BaseLoadingPlaceholder.vue",l.render||(l.render=e.render,l.staticRenderFns=e.staticRenderFns,l._compiled=!0,i&&(l.functional=!0)),l._scopeId=n,l}({render:Ko,staticRenderFns:[function(e,t){var a=t._c;return a("div",{staticClass:"lds-ring"},[a("div"),t._v(" "),a("div"),t._v(" "),a("div"),t._v(" "),a("div")])}]},0,Wo,void 0,!0);function Yo(e,t=null){e&&jo.emit("addToQueue",{url:e,bitrate:t},()=>{})}var Jo={sendAddToQueue:Yo};function Zo(e){let t=e.toLowerCase();if(t.startsWith("http")){if(t.indexOf("deezer.com")>=0||t.indexOf("deezer.page.link")>=0||t.indexOf("open.spotify.com")>=0)return!0}else if(t.startsWith("spotify:"))return!0;return!1}function Xo(e){let t,a;return t=Math.floor(e/60),a=e-60*t,a<10&&(a="0"+a),t+":"+a}function el(e){return e.toString().replace(/\B(?=(\d{3})+(?!\d))/g,".")}function tl(e,t,a){var n;return function(){var i=this,r=arguments,s=function(){n=null,a||e.apply(i,r)},o=a&&!n;clearTimeout(n),n=setTimeout(s,t),o&&e.apply(i,r)}}function al(e){const t=document.createElement("input");document.body.appendChild(t),t.setAttribute("type","text"),t.setAttribute("value",e),t.select(),t.setSelectionRange(0,99999),document.execCommand("copy"),t.remove()}var nl={isValidURL:Zo,convertDuration:Xo,convertDurationSeparated:function(e){let t,a,n;return a=Math.floor(e/60),t=Math.floor(a/60),n=e-60*a,a-=60*t,[t,a,n]},numberWithDots:el,debounce:tl};const il=[{objName:"flac",label:"FLAC",value:9},{objName:"320kbps",label:"MP3 320kbps",value:3},{objName:"128kbps",label:"MP3 128kbps",value:1},{objName:"realityAudioHQ",label:"360 Reality Audio [HQ]",value:15},{objName:"realityAudioMQ",label:"360 Reality Audio [MQ]",value:14},{objName:"realityAudioLQ",label:"360 Reality Audio [LQ]",value:13}];const rl={data:()=>({menuOpen:!1,xPos:0,yPos:0,deezerHref:"",generalHref:"",imgSrc:""}),computed:{options(){const e={cut:{label:this.$t("globals.cut"),show:!1,position:1,action:()=>{document.execCommand("Cut")}},copy:{label:this.$t("globals.copy"),show:!1,position:2,action:()=>{document.execCommand("Copy")}},copyLink:{label:this.$t("globals.copyLink"),show:!1,position:3,action:()=>{al(this.generalHref)}},copyImageLink:{label:this.$t("globals.copyImageLink"),show:!1,position:4,action:()=>{al(this.imgSrc)}},copyDeezerLink:{label:this.$t("globals.copyDeezerLink"),show:!1,position:5,action:()=>{al(this.deezerHref)}},paste:{label:this.$t("globals.paste"),show:!1,position:6,action:()=>{clipboard in navigator?navigator.clipboard.readText().then(e=>{document.execCommand("insertText",void 0,e)}):document.execCommand("paste")}}};let t=Object.values(e).length+1;return il.forEach((a,n)=>{e[a.objName]={label:""+this.$t("globals.download",{thing:a.label}),show:!1,position:t+n,action:Yo.bind(null,this.deezerHref,a.value)}}),e},sortedOptions(){return Object.values(this.options).sort((e,t)=>e.position{this.menuOpen=!1,this.options.copyLink.show=!1,this.options.copyDeezerLink.show=!1,this.options.copyImageLink.show=!1,il.forEach(e=>{this.options[e.objName].show=!1})}).catch(e=>{console.error(e)})},positionMenu(e,t){this.xPos=e+"px",this.yPos=t+"px",this.$nextTick().then(()=>{const{innerHeight:a,innerWidth:n}=window,i=e+this.$refs.contextMenu.getBoundingClientRect().width,r=t+this.$refs.contextMenu.getBoundingClientRect().height;if(i>n){const t=i-n+15;this.xPos=e-t+"px"}if(r>a){const e=r-a+15;this.yPos=t-e+"px"}})},showDeezerOptions(){this.options.copyDeezerLink.show=!0,il.forEach(e=>{this.options[e.objName].show=!0})}}};var sl=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{directives:[{name:"show",rawName:"v-show",value:e.menuOpen,expression:"menuOpen"}],ref:"contextMenu",staticClass:"context-menu",style:{top:e.yPos,left:e.xPos}},e._l(e.sortedOptions,(function(t){return a("button",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"option.show"}],key:t.label,staticClass:"menu-option",on:{click:function(e){return e.preventDefault(),t.action(e)}}},[a("span",{staticClass:"menu-option__text"},[e._v(e._s(t.label))])])})),0)};sl._withStripped=!0;var ol=function(e,t,a,n,i,r,s,o){const l=("function"==typeof a?a.options:a)||{};l.__file="C:\\Users\\Roberto\\Dev\\repos\\deemix-pyweb\\webui\\src\\components\\globals\\TheContextMenu.vue",l.render||(l.render=e.render,l.staticRenderFns=e.staticRenderFns,l._compiled=!0,i&&(l.functional=!0)),l._scopeId=n;{let e;if(t&&(e=function(e){t.call(this,s(e))}),void 0!==e)if(l.functional){const t=l.render;l.render=function(a,n){return e.call(n),t(a,n)}}else{const t=l.beforeCreate;l.beforeCreate=t?[].concat(t,e):[e]}}return l}({render:sl,staticRenderFns:[]},(function(e){e&&e("data-v-5bd3f801_0",{source:".context-menu[data-v-5bd3f801] {\n position: absolute;\n top: 0;\n left: 0;\n min-width: 100px;\n border-radius: 7px;\n background: var(--foreground-inverted);\n box-shadow: 4px 10px 18px 0px rgba(0, 0, 0, 0.15);\n overflow: hidden;\n z-index: 10000;\n}\n.menu-option[data-v-5bd3f801] {\n display: flex;\n align-items: center;\n width: 100%;\n height: 40px;\n padding-left: 10px;\n padding-right: 10px;\n color: var(--foreground);\n cursor: pointer;\n}\n.menu-option[data-v-5bd3f801]:hover {\n background: var(--table-highlight);\n filter: brightness(150%);\n}\n.menu-option__text[data-v-5bd3f801] {\n text-transform: capitalize;\n}\nbutton[data-v-5bd3f801] {\n color: var(--accent-text);\n color: unset;\n background-color: var(--accent-color);\n background-color: unset;\n min-width: unset;\n position: unset;\n border: unset;\n border-radius: unset;\n font-family: unset;\n font-weight: unset;\n font-size: unset;\n padding: unset;\n margin-right: unset;\n height: unset;\n text-transform: unset;\n cursor: unset;\n transition: unset;\n}\nbutton[data-v-5bd3f801]:focus {\n outline: none;\n}\nbutton[disabled][data-v-5bd3f801] {\n background-color: unset;\n color: unset;\n opacity: unset;\n}\nbutton.selective[data-v-5bd3f801] {\n background-color: unset;\n color: unset;\n}\nbutton.selective.active[data-v-5bd3f801] {\n background-color: unset;\n color: unset;\n}\nbutton.with_icon[data-v-5bd3f801] {\n display: unset;\n align-items: unset;\n}\nbutton.with_icon i[data-v-5bd3f801] {\n margin-left: unset;\n}\nbutton[data-v-5bd3f801]:active {\n background-color: unset;\n transform: unset;\n}\nbutton[data-v-5bd3f801]:hover {\n background: unset;\n border: unset;\n}\n\n/*# sourceMappingURL=TheContextMenu.vue.map */",map:{version:3,sources:["C:\\Users\\Roberto\\Dev\\repos\\deemix-pyweb\\webui/C:\\Users\\Roberto\\Dev\\repos\\deemix-pyweb\\webui/C:\\Users\\Roberto\\Dev\\repos\\deemix-pyweb\\webui\\src\\components\\globals\\TheContextMenu.vue","TheContextMenu.vue"],names:[],mappings:"AA4NA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,gBAAA;EACA,kBAAA;EACA,sCAAA;EACA,iDAAA;EACA,gBAAA;EACA,cAAA;AAAA;AAGA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,mBAAA;EACA,wBAAA;EACA,eAAA;AAAA;AARA;IAWA,kCAAA;IACA,wBAAA;AAAA;AAGA;IACA,0BAAA;AAAA;AAKA;EACA,yBAAA;EACA,YAAA;EACA,qCAAA;EACA,uBAAA;EACA,gBAAA;EACA,eAAA;EACA,aAAA;EACA,oBAAA;EACA,kBAAA;EACA,kBAAA;EACA,gBAAA;EACA,cAAA;EACA,mBAAA;EACA,aAAA;EACA,qBAAA;EACA,aAAA;EACA,iBAAA;AAAA;AAjBA;IAoBA,aAAA;AAAA;AApBA;IAwBA,uBAAA;IACA,YAAA;IACA,cAAA;AAAA;AA1BA;IA8BA,uBAAA;IACA,YAAA;AAAA;AA/BA;MAkCA,uBAAA;MACA,YAAA;AAAA;AAnCA;IAwCA,cAAA;IACA,kBAAA;AAAA;AAzCA;MA4CA,kBAAA;AAAA;AA5CA;IAiDA,uBAAA;IACA,gBAAA;AAAA;AAlDA;IAsDA,iBAAA;IACA,aAAA;AAAA;;AChPA,6CAA6C",file:"TheContextMenu.vue",sourcesContent:[null,".context-menu {\n position: absolute;\n top: 0;\n left: 0;\n min-width: 100px;\n border-radius: 7px;\n background: var(--foreground-inverted);\n box-shadow: 4px 10px 18px 0px rgba(0, 0, 0, 0.15);\n overflow: hidden;\n z-index: 10000; }\n\n.menu-option {\n display: flex;\n align-items: center;\n width: 100%;\n height: 40px;\n padding-left: 10px;\n padding-right: 10px;\n color: var(--foreground);\n cursor: pointer; }\n .menu-option:hover {\n background: var(--table-highlight);\n filter: brightness(150%); }\n .menu-option__text {\n text-transform: capitalize; }\n\nbutton {\n color: var(--accent-text);\n color: unset;\n background-color: var(--accent-color);\n background-color: unset;\n min-width: unset;\n position: unset;\n border: unset;\n border-radius: unset;\n font-family: unset;\n font-weight: unset;\n font-size: unset;\n padding: unset;\n margin-right: unset;\n height: unset;\n text-transform: unset;\n cursor: unset;\n transition: unset; }\n button:focus {\n outline: none; }\n button[disabled] {\n background-color: unset;\n color: unset;\n opacity: unset; }\n button.selective {\n background-color: unset;\n color: unset; }\n button.selective.active {\n background-color: unset;\n color: unset; }\n button.with_icon {\n display: unset;\n align-items: unset; }\n button.with_icon i {\n margin-left: unset; }\n button:active {\n background-color: unset;\n transform: unset; }\n button:hover {\n background: unset;\n border: unset; }\n\n/*# sourceMappingURL=TheContextMenu.vue.map */"]},media:void 0})}),rl,"data-v-5bd3f801",!1,0,(function e(){const t=document.head||document.getElementsByTagName("head")[0],a=e.styles||(e.styles={}),n="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());return function(e,i){if(document.querySelector('style[data-vue-ssr-id~="'+e+'"]'))return;const r=n?i.media||"default":e,s=a[r]||(a[r]={ids:[],parts:[],element:void 0});if(!s.ids.includes(e)){let a=i.source,o=s.ids.length;if(s.ids.push(e),n&&(s.element=s.element||document.querySelector("style[data-group="+r+"]")),!s.element){const e=s.element=document.createElement("style");e.type="text/css",i.media&&e.setAttribute("media",i.media),n&&(e.setAttribute("data-group",r),e.setAttribute("data-next-index","0")),t.appendChild(e)}if(n&&(o=parseInt(s.element.getAttribute("data-next-index")),s.element.setAttribute("data-next-index",o+1)),s.element.styleSheet)s.parts.push(a),s.element.styleSheet.cssText=s.parts.filter(Boolean).join("\n");else{const e=document.createTextNode(a),t=s.element.childNodes;t[o]&&s.element.removeChild(t[o]),t.length?s.element.insertBefore(e,t[o]):s.element.appendChild(e)}}}})),ll=new _a;async function cl(e,t,{duration:a=1e3,easing:n=dl,interval:i=13}={}){const r=e.volume,s=t-r;if(!(s&&a&&n&&i))return e.volume=t,Promise.resolve();const o=Math.floor(a/i);let l=1;return new Promise(t=>{const a=setInterval(()=>{e.volume=r+n(l/o)*s,++l===o&&(clearInterval(a),t())},i)})}function dl(e){return.5-Math.cos(e*Math.PI)/2}const ul={data:()=>({previewStopped:!1}),mounted(){this.$refs.preview.volume=1,ll.$on("trackPreview:playPausePreview",this.playPausePreview),ll.$on("trackPreview:stopStackedTabsPreview",this.stopStackedTabsPreview),ll.$on("trackPreview:previewMouseEnter",this.previewMouseEnter),ll.$on("trackPreview:previewMouseLeave",this.previewMouseLeave)},methods:{async onCanPlay(){await this.$refs.preview.play(),this.previewStopped=!1,await cl(this.$refs.preview,window.vol.preview_max_volume/100,{duration:500})},async onTimeUpdate(){if(isNaN(this.$refs.preview.duration))return;let e=this.$refs.preview.duration;isFinite(e)||(e=30),e-this.$refs.preview.currentTime>=1||this.previewStopped||(await cl(this.$refs.preview,0,{duration:800}),this.previewStopped=!0,document.querySelectorAll("a[playing] > .preview_controls").forEach(e=>{e.style.opacity=0}),document.querySelectorAll("*").forEach(e=>{e.removeAttribute("playing")}),document.querySelectorAll(".preview_controls, .preview_playlist_controls").forEach(e=>{e.textContent="play_arrow"}))},async playPausePreview(e){e.preventDefault(),e.stopPropagation();const{currentTarget:t}=event;var a="I"==t.tagName?t:t.querySelector("i");t.hasAttribute("playing")?this.$refs.preview.paused?(this.$refs.preview.play(),this.previewStopped=!1,a.innerText="pause",await cl(this.$refs.preview,window.vol.preview_max_volume/100,{duration:500})):(this.previewStopped=!0,a.innerText="play_arrow",await cl(this.$refs.preview,0,{duration:250}),this.$refs.preview.pause()):(document.querySelectorAll("*").forEach(e=>{e.removeAttribute("playing")}),t.setAttribute("playing",!0),document.querySelectorAll(".preview_controls, .preview_playlist_controls").forEach(e=>{e.textContent="play_arrow"}),document.querySelectorAll(".preview_controls").forEach(e=>{e.style.opacity=0}),a.innerText="pause",a.style.opacity=1,this.previewStopped=!1,await cl(this.$refs.preview,0,{duration:250}),this.$refs.preview.pause(),document.getElementById("preview-track_source").src=t.getAttribute("data-preview"),this.$refs.preview.load())},async stopStackedTabsPreview(){let e=Array.prototype.slice.call(document.querySelectorAll(".preview_playlist_controls[playing]"));0!==e.length&&(await cl(this.$refs.preview,0,{duration:800}),this.previewStopped=!0,e.forEach(e=>{e.removeAttribute("playing"),e.innerText="play_arrow"}))},previewMouseEnter(e){e.currentTarget.style.opacity=1},previewMouseLeave(e){const{currentTarget:t}=e,a=t.parentElement.hasAttribute("playing");(a&&this.previewStopped||!a)&&(t.style.opacity=0)}}};var pl=function(){var e=this.$createElement,t=this._self._c||e;return t("audio",{ref:"preview",attrs:{id:"preview-track"},on:{canplay:this.onCanPlay,timeupdate:this.onTimeUpdate}},[t("source",{attrs:{id:"preview-track_source",src:"",type:"audio/mpeg"}})])};pl._withStripped=!0;var hl=function(e,t,a,n,i,r,s,o){const l=("function"==typeof a?a.options:a)||{};l.__file="C:\\Users\\Roberto\\Dev\\repos\\deemix-pyweb\\webui\\src\\components\\globals\\TheTrackPreview.vue",l.render||(l.render=e.render,l.staticRenderFns=e.staticRenderFns,l._compiled=!0,i&&(l.functional=!0)),l._scopeId=n;{let e;if(t&&(e=function(e){t.call(this,s(e))}),void 0!==e)if(l.functional){const t=l.render;l.render=function(a,n){return e.call(n),t(a,n)}}else{const t=l.beforeCreate;l.beforeCreate=t?[].concat(t,e):[e]}}return l}({render:pl,staticRenderFns:[]},(function(e){e&&e("data-v-00e70a4e_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"TheTrackPreview.vue"},media:void 0})}),ul,void 0,!1,0,(function e(){const t=document.head||document.getElementsByTagName("head")[0],a=e.styles||(e.styles={}),n="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());return function(e,i){if(document.querySelector('style[data-vue-ssr-id~="'+e+'"]'))return;const r=n?i.media||"default":e,s=a[r]||(a[r]={ids:[],parts:[],element:void 0});if(!s.ids.includes(e)){let a=i.source,o=s.ids.length;if(s.ids.push(e),n&&(s.element=s.element||document.querySelector("style[data-group="+r+"]")),!s.element){const e=s.element=document.createElement("style");e.type="text/css",i.media&&e.setAttribute("media",i.media),n&&(e.setAttribute("data-group",r),e.setAttribute("data-next-index","0")),t.appendChild(e)}if(n&&(o=parseInt(s.element.getAttribute("data-next-index")),s.element.setAttribute("data-next-index",o+1)),s.element.styleSheet)s.parts.push(a),s.element.styleSheet.cssText=s.parts.filter(Boolean).join("\n");else{const e=document.createTextNode(a),t=s.element.childNodes;t[o]&&s.element.removeChild(t[o]),t.length?s.element.insertBefore(e,t[o]):s.element.appendChild(e)}}}}));const ml={data:()=>({open:!1,url:""}),mounted(){this.$root.$on("QualityModal:open",this.openModal),this.$refs.modal.addEventListener("webkitAnimationEnd",this.handleAnimationEnd)},methods:{tryToDownloadTrack(e){const{target:t}=e;this.$refs.modal.classList.add("animated","fadeOut"),t.matches(".quality-button")&&Jo.sendAddToQueue(this.url,t.dataset.qualityValue)},openModal(e){this.url=e,this.open=!0,this.$refs.modal.classList.add("animated","fadeIn")},handleAnimationEnd(e){const{animationName:t}=e;this.$refs.modal.classList.remove("animated",t),"fadeIn"!==t&&(this.open=!1)}}};var gl=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{directives:[{name:"show",rawName:"v-show",value:e.open,expression:"open"}],ref:"modal",staticClass:"smallmodal",attrs:{id:"modal_quality"},on:{click:function(t){return e.tryToDownloadTrack(t)}}},[a("div",{staticClass:"smallmodal-content"},[a("button",{staticClass:"quality-button",attrs:{"data-quality-value":"9"}},[e._v(e._s(e.$t("globals.download",{thing:"FLAC"})))]),e._v(" "),a("button",{staticClass:"quality-button",attrs:{"data-quality-value":"3"}},[e._v(e._s(e.$t("globals.download",{thing:"MP3 320kbps"})))]),e._v(" "),a("button",{staticClass:"quality-button",attrs:{"data-quality-value":"1"}},[e._v(e._s(e.$t("globals.download",{thing:"MP3 128kbps"})))]),e._v(" "),a("button",{staticClass:"quality-button",attrs:{"data-quality-value":"15"}},[e._v("\n\t\t\t"+e._s(e.$t("globals.download",{thing:"360 Reality Audio [HQ]"}))+"\n\t\t")]),e._v(" "),a("button",{staticClass:"quality-button",attrs:{"data-quality-value":"14"}},[e._v("\n\t\t\t"+e._s(e.$t("globals.download",{thing:"360 Reality Audio [MQ]"}))+"\n\t\t")]),e._v(" "),a("button",{staticClass:"quality-button",attrs:{"data-quality-value":"13"}},[e._v("\n\t\t\t"+e._s(e.$t("globals.download",{thing:"360 Reality Audio [LQ]"}))+"\n\t\t")])])])};gl._withStripped=!0;var fl=function(e,t,a,n,i,r,s,o){const l=("function"==typeof a?a.options:a)||{};l.__file="C:\\Users\\Roberto\\Dev\\repos\\deemix-pyweb\\webui\\src\\components\\globals\\TheQualityModal.vue",l.render||(l.render=e.render,l.staticRenderFns=e.staticRenderFns,l._compiled=!0,i&&(l.functional=!0)),l._scopeId=n;{let e;if(t&&(e=function(e){t.call(this,s(e))}),void 0!==e)if(l.functional){const t=l.render;l.render=function(a,n){return e.call(n),t(a,n)}}else{const t=l.beforeCreate;l.beforeCreate=t?[].concat(t,e):[e]}}return l}({render:gl,staticRenderFns:[]},(function(e){e&&e("data-v-19da7f1c_0",{source:"\n.smallmodal {\r\n\tposition: fixed;\r\n\tz-index: 1250;\r\n\tleft: 0;\r\n\ttop: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\toverflow: auto;\r\n\tbackground-color: hsla(0, 0%, 0%, 0.4);\r\n\tanimation-duration: 0.3s;\n}\n.smallmodal-content {\r\n\tbackground-color: transparent;\r\n\tmargin: auto;\r\n\twidth: var(--modal-content-width);\r\n\tposition: relative;\r\n\ttop: 50%;\r\n\ttransform: translateY(-50%);\n}\n.smallmodal-content button {\r\n\twidth: 100%;\r\n\tmargin-bottom: 8px;\n}\r\n",map:{version:3,sources:["C:\\Users\\Roberto\\Dev\\repos\\deemix-pyweb\\webui/C:\\Users\\Roberto\\Dev\\repos\\deemix-pyweb\\webui\\src\\components\\globals\\TheQualityModal.vue"],names:[],mappings:";AAmBA;CACA,eAAA;CACA,aAAA;CACA,OAAA;CACA,MAAA;CACA,WAAA;CACA,YAAA;CACA,cAAA;CACA,sCAAA;CACA,wBAAA;AACA;AAEA;CACA,6BAAA;CACA,YAAA;CACA,iCAAA;CACA,kBAAA;CACA,QAAA;CACA,2BAAA;AACA;AAEA;CACA,WAAA;CACA,kBAAA;AACA",file:"TheQualityModal.vue",sourcesContent:["\r\n\r\n - + diff --git a/src/components/downloads/TheDownloadBar.vue b/src/components/downloads/TheDownloadBar.vue index dd75a37..047efbb 100644 --- a/src/components/downloads/TheDownloadBar.vue +++ b/src/components/downloads/TheDownloadBar.vue @@ -5,7 +5,7 @@ @transitionend="$refs.container.style.transition = ''" ref="container" :data-label="$t('downloads')" - aria-label="downloads" + aria-label="downloads" >
folder_open - + clear_all - + delete_sweep
@@ -88,6 +77,19 @@ export default { clientMode: 'getClientMode' }) }, + created() { + const checkIfToggleBar = keyEvent => { + if (!(keyEvent.ctrlKey && keyEvent.key === 'b')) return + + this.toggleDownloadTab() + } + + document.addEventListener('keyup', checkIfToggleBar) + + this.$on('hook:destroyed', () => { + document.removeEventListener('keyup', checkIfToggleBar) + }) + }, mounted() { socket.on('startDownload', this.startDownload) socket.on('startConversion', this.startConversion) @@ -264,7 +266,7 @@ export default { this.queueComplete = [] }, - toggleDownloadTab(clickEvent) { + toggleDownloadTab() { this.setTabWidth() this.$refs.container.style.transition = 'all 250ms ease-in-out' diff --git a/src/styles/scss/_middle-section.scss b/src/styles/scss/_middle-section.scss index ae34e9d..8176a7c 100644 --- a/src/styles/scss/_middle-section.scss +++ b/src/styles/scss/_middle-section.scss @@ -1,58 +1,9 @@ -/* Center section */ -$icon-dimension: 2rem; -$searchbar-height: calc(2rem + 1em); - #search { - background-color: var(--secondary-background); - width: 100%; - padding: 0 1em; - margin-bottom: 20px; - margin-right: 32px; - display: flex; - align-items: center; - border: 1px solid transparent; - transition: border 200ms ease-in-out; - .search__icon { - width: $icon-dimension; - height: $icon-dimension; - i { - font-size: $icon-dimension; - color: var(--foreground); - @include remove-selection-background; } } - - &:focus-within { - border: 1px solid var(--foreground); - } - - #searchbar { - height: $searchbar-height; - padding-left: 0.5em; - border: 0px; - border-radius: 0px; - background-color: var(--secondary-background); - color: var(--foreground); - font-size: 2rem; - font-family: 'Open Sans'; - font-weight: 300; - - &:focus { - outline: none; - } - - // Removing Chrome autofill color - &:-webkit-autofill, - &:-webkit-autofill:hover, - &:-webkit-autofill:focus, - &:-webkit-autofill:active { - -webkit-box-shadow: 0 0 0 $searchbar-height var(--secondary-background) inset !important; - box-shadow: 0 0 0 $searchbar-height var(--secondary-background) inset !important; - } - } } #container {