diff --git a/README.md b/README.md index f8ee272..a54cb49 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,7 @@ This is just the WebUI for deemix, it should be used with deemix-pyweb or someth - Copy and paste functions - Block selection where it's not needed (keep only titles artists albums labels and useful data) - There's a SASS mixin for this. Need to use it in the proper classes +- Better feedback for socket.io possible errors - ? # License diff --git a/public/css/style.css b/public/css/style.css index c87ec73..37cd19a 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1 +1 @@ -html{height:100vh;--main-scroll: hsl(0, 0%, 33%);--panels-scroll: hsl(180, 2%, 17%);--accent-color: hsl(210, 100%, 52%);--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%);--explicit-separator: 0.3125em}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%);--panels-background: hsl(210, 3%, 14%);--panels-text: hsl(0, 0%, 100%);--accent-text: hsl(0, 0%, 0%);--table-bg: hsl(0, 0%, 100%);--table-zebra: hsl(0, 0%, 79%);--table-highlight: hsl(0, 0%, 56%)}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%);--panels-background: hsl(0, 0%, 10%);--panels-text: hsl(0, 0%, 100%);--accent-text: hsl(0, 0%, 87%);--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%);--panels-background: hsl(257, 70%, 9%);--panels-text: hsl(0, 0%, 100%);--accent-text: hsl(0, 0%, 87%);--table-bg: hsl(261, 74%, 6%);--table-zebra: hsl(257, 61%, 10%);--table-highlight: hsl(257, 66%, 27%)}body{margin:0px;width:100%;height:100%;font-family:"Open Sans";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{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}input[type=text],input[type=password],input[type=number],input[type=search]{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:active{background-color:var(--accent-color);transform:scale(0.95)}button:hover{background:none;border:1px solid var(--accent-color)}#main_content{margin-left:48px;width:calc(100% - 48px);height:100%;display:flex}img.rounded{border-radius:5px}img.circle{border-radius:50%}.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%);-ms-transform:translate(-50%, -50%);text-align:center}.cover_container .download_overlay i{background-color:#000;color:#fff;border-radius:50%;padding:10px;cursor:pointer}.cover_container:hover .coverart{opacity:.75}.cover_container:hover .download_overlay{opacity:1}i.disabled{opacity:.5;cursor:default}i.explicit_icon{color:#ff3b30;margin-right:var(--explicit-separator)}span.tag{background-color:var(--tag-background);border-radius:2px;color:var(--tag-text);display:inline-block;font-size:10px;padding:3px 6px}a,a:visited{color:#1e90ff}.clickable{cursor:pointer !important}.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)}.inline-flex{display:flex;align-items:center}.inline-flex .right{margin-left:auto}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}.right{float:right}.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}.tab{margin:16px 0px}.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}.hide{display:none !important}.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}.table{width:100%;-webkit-border-horizontal-spacing:0px;-webkit-border-vertical-spacing:0px;--vertical-separator: 7px}.table tbody tr:not(.table__row-no-highlight):hover{background:var(--table-highlight)}.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:var(--vertical-separator) 10px}.table td:first-child{padding:var(--vertical-separator) 10px var(--vertical-separator) 20px}.table td:last-child{padding:var(--vertical-separator) 20px var(--vertical-separator) 10px}.table td img{vertical-align:middle}.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(--table-bg)}.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}.table--tracks{border-collapse:collapse;--radius: 3px}.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:var(--radius)}.table--tracks tr:first-child td:last-child{border-top-right-radius:var(--radius)}.table--tracks tr:last-child td:first-child{border-bottom-left-radius:var(--radius)}.table--tracks tr:last-child td:last-child{border-bottom-right-radius:var(--radius)}.table--tracklist thead{border-bottom:2px solid var(--table-highlight)}.table--tracklist th{height:45px;padding:var(--vertical-separator) 10px}.table--tracklist th:first-child{padding:var(--vertical-separator) 10px var(--vertical-separator) 20px}.table--tracklist th:last-child{padding:var(--vertical-separator) 20px var(--vertical-separator) 10px}.table--tracklist td{height:35px}.explicit_tracklist{margin-left:var(--explicit-separator)}.table--charts td{height:35px}.page_heading{font-size:2.5rem;margin-bottom:35px}.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}#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::-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_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 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.slim>.download_object .download_info{display:block}.download_object>.download_bar>.queue_icon{cursor:default;margin-left:8px}.download_object>.download_bar{display:flex;align-items:center;height:24px}.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}#download_tab_container.tab_hidden{width:32px}#download_tab_container.tab_hidden #toggle_download_tab{margin-left:4px}#download_tab_container.tab_hidden #download_tab_drag_handler{display:none}#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::after{content:"downloads";display:flex;align-items:center;text-transform:capitalize;writing-mode:vertical-rl;line-height:32px}#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}.favorites_tablinks.active{color:var(--accent-text)}.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)}.search_header{display:inline-block;cursor:pointer;font-size:1.75rem;margin-bottom:25px}.search_header:not(.top_result_header){transition:color 200ms ease-in-out}.search_header:not(.top_result_header):hover{color:var(--accent-color)}.search_tablinks.active{color:var(--foreground-inverted)}#main_search .top_result_header{display:block;cursor:default;font-size:2rem;text-align:center}.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}#logged_in_info{height:250px;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center}#log_info{display:flex;flex-direction:column;align-items:center}#open_login_prompt{margin:8px 0px}#login_input_arl{margin-bottom:0px}#settings_btn_copyArl{min-width:24px;width:48px;margin:0px 0px 0px 8px;padding:0px 4px}#settings_btn_copyArl i{padding:6px 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--with-icon{display:inline-flex;align-items:center}.settings-group__header--with-icon i.material-icons{margin-right:15px}.settings-container{display:flex}.settings-container__half>*,.settings-container__third>*{margin-bottom:15px}.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}.input_group{margin-bottom:25px}.input_group .input_group_text{margin-bottom:7px}.with_checkbox+.input_group{margin-top:10px}.search_tabcontent,.main_tabcontent,.favorites_tabcontent{display:none}.main_tabcontent h1{margin-bottom:12px}.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}.main_tablinks_text{overflow:hidden;white-space:nowrap}.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}.section-tabs__tab.active{color:var(--accent-color);border-top:3px solid var(--accent-color)}#middle_section{background-color:var(--main-background);width:100%;height:100%;min-width:10px}#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;transition:color 250ms ease-in-out;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}#content{background-color:var(--main-background);width:calc(100% - 10px);height:calc(100% - 93px);overflow-y:scroll;overflow-x:hidden;padding-left:10px}#content::-webkit-scrollbar{width:10px}#content::-webkit-scrollbar-track{background:var(--main-background)}#content::-webkit-scrollbar-thumb{background:var(--main-scroll);border-radius:4px;width:6px;padding:0px 2px}#container{margin:0 auto;max-width:1280px;width:90%}.smallmodal{display:none;position:fixed;z-index:1250;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.4);animation-duration:.3s}.smallmodal-content{background-color:none;margin:auto;width:30%;align-items:center;position:relative;top:50%;transform:translateY(-50%)}.smallmodal-content button{width:100%;margin-bottom:8px}@media only screen and (min-width: 601px){#container,.smallmodal-content{width:85%}}@media only screen and (min-width: 993px){#container,.smallmodal-content{width:70%}}@media only screen and (max-width: 600px){#container,.smallmodal-content{width:100%}}.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 .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}@-webkit-keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@-webkit-keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}@keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}.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;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}.toastify .circle-loader{border-bottom-color:var(--toast-secondary)}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}#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.active .side_icon{color:var(--accent-color)}#sidebar .main_tablinks:not(#theme_selector){display:flex;align-items:center;margin-top:5px;cursor:pointer}#sidebar .main_tablinks:not(#theme_selector):hover{background-color:#3e3e3e}#sidebar .main_tablinks_text{display:none;display:inline-block;margin-left:20px;opacity:0;visibility:hidden;transition:all 50ms ease-in-out 200ms}#sidebar .side_icon{font-size:30px;padding:9px}#sidebar .side_icon.side_icon--theme{cursor:default}#sidebar .side_icon::selection{background:none}#sidebar:hover #theme_togglers{position:relative;opacity:1;transition-delay:200ms}#sidebar:hover .main_tablinks_text{display:inline-block;opacity:1;visibility:visible}#theme_selector{margin-top:20px;display:flex;height:50px}#theme_togglers{display:flex;opacity:0;width:100%;justify-content:space-evenly;align-items:center;transition:all 50ms ease 0s}.theme_toggler{width:25px;height:25px;border-radius:1000px;border:1px solid var(--separator);cursor:pointer;transition:border 200ms ease-in-out}.theme_toggler--active{border-width:3px}.theme_toggler[data-theme-variant=light]{background:#fff}.theme_toggler[data-theme-variant=dark]{background:#141414}.theme_toggler[data-theme-variant=purple]{background:#460ead}.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}a.single-cover{position:relative;display:inline-block;color:#fff} +html{height:100vh;--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%);--explicit-separator: 0.3125em}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%);--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);--table-bg: hsl(0, 0%, 100%);--table-zebra: hsl(0, 0%, 79%);--table-highlight: hsl(0, 0%, 56%)}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%);--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);--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%);--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);--table-bg: hsl(261, 74%, 6%);--table-zebra: hsl(257, 61%, 10%);--table-highlight: hsl(257, 66%, 27%)}body{margin:0px;width:100%;height:100%;font-family:"Open Sans";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{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes grayscalize{from{filter:grayscale(0)}to{filter:grayscale(1)}}input[type=text],input[type=password],input[type=number],input[type=search]{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:active{background-color:var(--accent-color);transform:scale(0.95)}button:hover{background:none;border:1px solid var(--accent-color)}#main_content{margin-left:48px;width:calc(100% - $sidebar-width);height:100%;display:flex}img.rounded{border-radius:5px}img.circle{border-radius:50%}.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%);-ms-transform:translate(-50%, -50%);text-align:center}.cover_container .download_overlay i{background-color:#000;color:#fff;border-radius:50%;padding:10px;cursor:pointer}.cover_container:hover .coverart{opacity:.75}.cover_container:hover .download_overlay{opacity:1}i.disabled{opacity:.5;cursor:default}i.explicit_icon{color:#ff3b30;margin-right:var(--explicit-separator)}span.tag{background-color:var(--tag-background);border-radius:2px;color:var(--tag-text);display:inline-block;font-size:10px;padding:3px 6px}a,a:visited{color:#1e90ff}.clickable{cursor:pointer !important}.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)}.inline-flex{display:flex;align-items:center}.inline-flex .right{margin-left:auto}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}.right{float:right}.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}.tab{margin:16px 0px}.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}.hide{display:none !important}.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}.table{width:100%;-webkit-border-horizontal-spacing:0px;-webkit-border-vertical-spacing:0px;--vertical-separator: 7px}.table tbody tr:not(.table__row-no-highlight):hover{background:var(--table-highlight)}.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:var(--vertical-separator) 10px}.table td:first-child{padding:var(--vertical-separator) 10px var(--vertical-separator) 20px}.table td:last-child{padding:var(--vertical-separator) 20px var(--vertical-separator) 10px}.table td img{vertical-align:middle}.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(--table-bg)}.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}.table--tracks{border-collapse:collapse;--radius: 3px}.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:var(--radius)}.table--tracks tr:first-child td:last-child{border-top-right-radius:var(--radius)}.table--tracks tr:last-child td:first-child{border-bottom-left-radius:var(--radius)}.table--tracks tr:last-child td:last-child{border-bottom-right-radius:var(--radius)}.table--tracklist thead{border-bottom:2px solid var(--table-highlight)}.table--tracklist th{height:45px;padding:var(--vertical-separator) 10px}.table--tracklist th:first-child{padding:var(--vertical-separator) 10px var(--vertical-separator) 20px}.table--tracklist th:last-child{padding:var(--vertical-separator) 20px var(--vertical-separator) 10px}.table--tracklist td{height:35px}.explicit_tracklist{margin-left:var(--explicit-separator)}.table--charts td{height:35px}.page_heading{font-size:2.5rem;margin-bottom:35px}.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}#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::-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_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 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.slim>.download_object .download_info{display:block}.download_object>.download_bar>.queue_icon{cursor:default;margin-left:8px}.download_object>.download_bar{display:flex;align-items:center;height:24px}.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}#download_tab_container.tab_hidden{width:32px}#download_tab_container.tab_hidden #toggle_download_tab{margin-left:4px}#download_tab_container.tab_hidden #download_tab_drag_handler{display:none}#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::after{content:"downloads";display:flex;align-items:center;text-transform:capitalize;writing-mode:vertical-rl;line-height:32px}#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}.favorites_tablinks.active{color:var(--accent-text)}.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)}.search_header{display:inline-block;cursor:pointer;font-size:1.75rem;margin-bottom:25px}.search_header:not(.top_result_header){transition:color 200ms ease-in-out}.search_header:not(.top_result_header):hover{color:var(--accent-color)}.search_tablinks.active{color:var(--foreground-inverted)}#main_search .top_result_header{display:block;cursor:default;font-size:2rem;text-align:center}.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}#logged_in_info{height:250px;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center}#log_info{display:flex;flex-direction:column;align-items:center}#open_login_prompt{margin:8px 0px}#login_input_arl{margin-bottom:0px}#settings_btn_copyArl{min-width:24px;width:48px;margin:0px 0px 0px 8px;padding:0px 4px}#settings_btn_copyArl i{padding:6px 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--with-icon{display:inline-flex;align-items:center}.settings-group__header--with-icon i.material-icons{margin-right:15px}.settings-container{display:flex}.settings-container__half>*,.settings-container__third>*{margin-bottom:15px}.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}.input_group{margin-bottom:25px}.input_group .input_group_text{margin-bottom:7px}.with_checkbox+.input_group{margin-top:10px}.search_tabcontent,.main_tabcontent,.favorites_tabcontent{display:none}.main_tabcontent h1{margin-bottom:12px}.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}.section-tabs__tab.active{color:var(--accent-color);border-top:3px solid var(--accent-color)}#middle_section{background-color:var(--main-background);width:100%;height:100%;min-width:10px}#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;transition:color 250ms ease-in-out;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}#content{background-color:var(--main-background);width:calc(100% - 10px);height:calc(100% - 93px);overflow-y:scroll;overflow-x:hidden;padding-left:10px}#content::-webkit-scrollbar{width:10px}#content::-webkit-scrollbar-track{background:var(--main-background)}#content::-webkit-scrollbar-thumb{background:var(--main-scroll);border-radius:4px;width:6px;padding:0px 2px}#container{margin:0 auto;max-width:1280px;width:90%}.smallmodal{display:none;position:fixed;z-index:1250;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.4);animation-duration:.3s}.smallmodal-content{background-color:none;margin:auto;width:30%;align-items:center;position:relative;top:50%;transform:translateY(-50%)}.smallmodal-content button{width:100%;margin-bottom:8px}@media only screen and (min-width: 601px){#container,.smallmodal-content{width:85%}}@media only screen and (min-width: 993px){#container,.smallmodal-content{width:70%}}@media only screen and (max-width: 600px){#container,.smallmodal-content{width:100%}}.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 .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}@-webkit-keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@-webkit-keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}@keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}.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;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}.toastify .circle-loader{border-bottom-color:var(--toast-secondary)}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}#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}#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;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);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[data-theme-variant=light]{background:#fff}#sidebar .theme_toggler[data-theme-variant=dark]{background:#141414}#sidebar .theme_toggler[data-theme-variant=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}a.single-cover{position:relative;display:inline-block;color:#fff} diff --git a/public/index.html b/public/index.html index 79c13e3..43a3811 100644 --- a/public/index.html +++ b/public/index.html @@ -58,7 +58,7 @@ info - Info + About palette @@ -1202,7 +1202,7 @@

-

About

+

About

This app uses the deemix library, you can use this library to make your own UI for deemix.
@@ -1229,7 +1229,7 @@

Bug Reports

Before reporting a bug make sure you're running the latest version of the app and that the thing you want - to report is acatually a bug and not something that's wrong only on your end.
+ to report is actually a bug and not something that's wrong only on your end.
Make sure the bug is reproducible on another machines and also DO NOT report a bug if it's been already reported.

@@ -1252,14 +1252,16 @@

You want to contribute to this project? You can do that in different ways

If you know JavaScript, HTML or CSS you could contribute to the webui.

- If you find some bugs you can report them in the repo, just make sure your bug isn't something that only + If you find some bugs you can report them in the repo, just make sure your bug isn't something that + only affects you and it can be reproducible by other users as well.
Duplicate bug reports will be closed, so keep an eye out on that.


You want to contribute monetarily? You could make a donation!

If you can donate you can do that with this links.
- You shoud remember that this is a free project and you should support the artists you love + You shoud remember that this is a free project and you should support the artists you + love before supporting the developers.
Don't feel obligated to donate, I appreciate you anyway!

diff --git a/src/styles/scss/_sidebar.scss b/src/styles/scss/_sidebar.scss index ee04411..543c930 100644 --- a/src/styles/scss/_sidebar.scss +++ b/src/styles/scss/_sidebar.scss @@ -1,14 +1,17 @@ +$sidebar-timing: 125ms; +$sidebar-delay: 75ms; + #sidebar { display: flex; flex-direction: column; - width: 48px; + width: $sidebar-width; height: 100%; position: absolute; top: 0; left: 0; background-color: var(--panels-background); color: var(--panels-text); - transition: width 125ms ease-in-out 75ms; + transition: width $sidebar-timing ease-in-out $sidebar-delay; z-index: 999; &:hover { @@ -16,97 +19,120 @@ } .main_tablinks { - &.active .side_icon { - color: var(--accent-color); + transition: all 500ms; + + &.active { + background-color: var(--accent-color); } &:not(#theme_selector) { display: flex; align-items: center; - margin-top: 5px; + height: 55px; cursor: pointer; &:hover { - background-color: #3e3e3e; + background-color: var(--sidebar-link-bg); + + .side_icon { + color: var(--accent-color); + } } } } .main_tablinks_text { - display: none; - display: inline-block; margin-left: 20px; opacity: 0; - visibility: hidden; + overflow: hidden; + white-space: nowrap; transition: all 50ms ease-in-out 200ms; } .side_icon { font-size: 30px; padding: 9px; + transition: all 500ms; - &.side_icon--theme { + &--theme { cursor: default; } - &::selection { - background: none; - } + @include removeSelectionBackground; } &:hover { - #theme_togglers { - position: relative; - opacity: 1; - transition-delay: 200ms; + .main_tablinks { + &:hover { + background: var(--sidebar-link-bg-20); + filter: grayscale(0) opacity(1); + } + + &.active { + background: var(--sidebar-link-bg); + filter: grayscale(1); + + // Fix for purple theme in which grayscale shows incoherent color + html[data-theme='purple'] & { + background: var(--sidebar-link-bg); + filter: grayscale(0); + } + + &:hover { + background: var(--sidebar-link-bg-20); + filter: grayscale(0); + } + } } .main_tablinks_text { - display: inline-block; opacity: 1; - visibility: visible; + } + + #theme_togglers { + opacity: 1; + } + } + + /* Theme selector */ + #theme_selector { + margin-top: 20px; + display: flex; + height: 50px; + } + + #theme_togglers { + position: relative; + display: flex; + justify-content: space-evenly; + align-items: center; + width: 100%; + opacity: 0; + transition: all $sidebar-timing ease-in-out $sidebar-delay; + } + + .theme_toggler { + width: 25px; + height: 25px; + border-radius: 1000px; + border: 1px solid var(--separator); + cursor: pointer; + transition: border 200ms ease-in-out; + + &--active { + border-width: 3px; + } + + &[data-theme-variant='light'] { + background: white; + } + + &[data-theme-variant='dark'] { + background: hsl(0, 0%, 8%); + } + + &[data-theme-variant='purple'] { + background: hsl(261, 85%, 37%); } } } - -/* Theme selector */ - -#theme_selector { - margin-top: 20px; - display: flex; - height: 50px; -} - -#theme_togglers { - display: flex; - opacity: 0; - width: 100%; - justify-content: space-evenly; - align-items: center; - transition: all 50ms ease 0s; -} - -.theme_toggler { - width: 25px; - height: 25px; - border-radius: 1000px; - border: 1px solid var(--separator); - cursor: pointer; - transition: border 200ms ease-in-out; - - &--active { - border-width: 3px; - } - - &[data-theme-variant='light'] { - background: white; - } - - &[data-theme-variant='dark'] { - background: #141414; - } - - &[data-theme-variant='purple'] { - background: #460ead; - } -} diff --git a/src/styles/scss/base/_animations.scss b/src/styles/scss/base/_animations.scss index 4a1adc1..480f7dd 100644 --- a/src/styles/scss/base/_animations.scss +++ b/src/styles/scss/base/_animations.scss @@ -49,3 +49,14 @@ transform: rotate(360deg); } } + +// You can find a better name, I have no ideas +@keyframes grayscalize { + from { + filter: grayscale(0); + } + + to { + filter: grayscale(1); + } +} diff --git a/src/styles/scss/base/_base.scss b/src/styles/scss/base/_base.scss index 7f0f9dc..846e9f9 100644 --- a/src/styles/scss/base/_base.scss +++ b/src/styles/scss/base/_base.scss @@ -3,7 +3,6 @@ html { --main-scroll: hsl(0, 0%, 33%); --panels-scroll: hsl(180, 2%, 17%); - --accent-color: hsl(210, 100%, 52%); --tag-background: hsl(210, 100%, 38%); --tag-text: hsl(0, 0%, 100%); --toast-background: hsla(0, 0%, 0%, 0.867); @@ -19,10 +18,14 @@ html[data-theme='light'] { --secondary-background: hsl(0, 0%, 93%); --foreground: hsl(0, 0%, 20%); --foreground-inverted: hsl(0, 0%, 93%); + --accent-color: hsl(210, 100%, 52%); --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); + --table-bg: hsl(0, 0%, 100%); --table-zebra: hsl(0, 0%, 79%); --table-highlight: hsl(0, 0%, 56%); @@ -33,10 +36,14 @@ html[data-theme='dark'] { --secondary-background: hsl(0, 0%, 14%); --foreground: hsl(0, 0%, 93%); --foreground-inverted: hsl(0, 0%, 20%); + --accent-color: hsl(210, 100%, 52%); --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); + --table-bg: hsl(0, 0%, 8%); --table-zebra: hsl(0, 0%, 14%); --table-highlight: hsl(0, 0%, 20%); @@ -52,6 +59,9 @@ html[data-theme='purple'] { --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); + --table-bg: hsl(261, 74%, 6%); --table-zebra: hsl(257, 61%, 10%); --table-highlight: hsl(257, 66%, 27%); diff --git a/src/styles/scss/base/_variables.scss b/src/styles/scss/base/_variables.scss new file mode 100644 index 0000000..944a420 --- /dev/null +++ b/src/styles/scss/base/_variables.scss @@ -0,0 +1 @@ +$sidebar-width: 48px; diff --git a/src/styles/scss/globals/_globals.scss b/src/styles/scss/globals/_globals.scss index 5271b50..9162850 100644 --- a/src/styles/scss/globals/_globals.scss +++ b/src/styles/scss/globals/_globals.scss @@ -84,21 +84,21 @@ button { text-transform: uppercase; cursor: pointer; transition: transform 50ms ease-in-out, background-color 200ms ease; -} -button:active { - background-color: var(--accent-color); - transform: scale(0.95); -} + &:active { + background-color: var(--accent-color); + transform: scale(0.95); + } -button:hover { - background: none; - border: 1px solid var(--accent-color); + &:hover { + background: none; + border: 1px solid var(--accent-color); + } } #main_content { - margin-left: 48px; - width: calc(100% - 48px); + margin-left: $sidebar-width; + width: calc(100% - $sidebar-width); height: 100%; display: flex; } diff --git a/src/styles/scss/style.scss b/src/styles/scss/style.scss index 7630a6a..768b1c2 100644 --- a/src/styles/scss/style.scss +++ b/src/styles/scss/style.scss @@ -1,3 +1,6 @@ +// SASS only +@import './base/variables'; + @import './base/base'; @import './base/normalize'; @import './base/mixins'; diff --git a/src/styles/scss/tabs/_about-tab.scss b/src/styles/scss/tabs/_about-tab.scss index b5c649b..2b2a9a4 100644 --- a/src/styles/scss/tabs/_about-tab.scss +++ b/src/styles/scss/tabs/_about-tab.scss @@ -1,9 +1,13 @@ -#about_tab p { - margin-bottom: 8px; -} -#about_tab h3 { - margin: 8px 0px; -} -#about_tab hr { - margin: 12px 0px; +#about_tab { + p { + margin-bottom: 8px; + } + + h3 { + margin: 8px 0px; + } + + hr { + margin: 12px 0px; + } } diff --git a/src/styles/scss/tabs/_tabs.scss b/src/styles/scss/tabs/_tabs.scss index 3e26866..a2a63a6 100644 --- a/src/styles/scss/tabs/_tabs.scss +++ b/src/styles/scss/tabs/_tabs.scss @@ -28,11 +28,6 @@ margin-bottom: 10px; } -.main_tablinks_text { - overflow: hidden; - white-space: nowrap; -} - .section-tabs { list-style-type: none; display: flex; @@ -42,7 +37,7 @@ &__tab { flex: 1; font-size: 1.2rem; - padding: .8em; + padding: 0.8em; border-top: 3px solid var(--foreground); text-align: center;