From 657f02c7d558bb0209f093c9e938c4f4eb3ba613 Mon Sep 17 00:00:00 2001 From: Roberto Tonino Date: Mon, 22 Jun 2020 21:07:51 +0200 Subject: [PATCH] finished writing scss declarations with SASS synthax. Now the repo is a bit lighter --- public/css/style.css | 2 +- public/index.html | 4 +- src/styles/scss/_middle-section.scss | 88 +++---- src/styles/scss/_progressbar.scss | 99 ------- src/styles/scss/_sidebar.scss | 2 +- src/styles/scss/_toasts.scss | 26 ++ src/styles/scss/_track-preview.scss | 6 - src/styles/scss/base/_animations.scss | 40 ++- src/styles/scss/base/_base.scss | 8 +- src/styles/scss/base/_functions.scss | 17 ++ src/styles/scss/base/_mixins.scss | 2 +- src/styles/scss/base/_variables.scss | 6 + src/styles/scss/globals/_globals.scss | 315 +++++++++++----------- src/styles/scss/globals/_tables.scss | 186 ++++++------- src/styles/scss/style.scss | 1 + src/styles/scss/tabs/_charts-tab.scss | 10 +- src/styles/scss/tabs/_download-tab.scss | 317 ++++++++++++----------- src/styles/scss/tabs/_favorites-tab.scss | 4 - src/styles/scss/tabs/_search-tab.scss | 138 +++++----- src/styles/scss/tabs/_settings-tab.scss | 74 +++--- src/styles/scss/tabs/_tabs.scss | 32 ++- 21 files changed, 678 insertions(+), 699 deletions(-) create mode 100644 src/styles/scss/_toasts.scss create mode 100644 src/styles/scss/base/_functions.scss diff --git a/public/css/style.css b/public/css/style.css index e0feab8..f6ac08f 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%);--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-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[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} +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%);--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%)}html{height:100vh}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{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]{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:active{background-color:var(--accent-color);transform:scale(0.95)}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}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}a{color:#1e90ff}a.single-cover{position:relative;display:inline-block;color:#fff}a:visited{color:#1e90ff}.clickable{cursor:pointer !important}.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}.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}#main_content{margin-left:48px;width:calc(100% - $sidebar-width);height:100%;display:flex}.inline-flex{display:flex;align-items:center}.inline-flex .right{margin-left:auto}.right{float:right}.hide{display:none !important}.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)}.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)}.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(--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}.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}#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:"downloads";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}.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}#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.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}.search_tabcontent,.main_tabcontent,.favorites_tabcontent{display:none}.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}.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;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:100%;height:calc(100% - 93px);overflow-y:scroll;overflow-x:hidden}#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{--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%}}#container{margin:0 auto;max-width:1280px;width:var(--container-width)}.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{--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%}}.smallmodal-content{background-color:transparent;margin:auto;width:var(--modal-content-width);position:relative;top:50%;transform:translateY(-50%)}.smallmodal-content button{width:100%;margin-bottom:8px}.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}#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-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[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}.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/index.html b/public/index.html index 551d04e..47af105 100644 --- a/public/index.html +++ b/public/index.html @@ -1139,7 +1139,7 @@

- @@ -1308,7 +1308,7 @@

{{ title }}

{{ title }} explicit

+ class="material-icons explicit_icon explicit_icon--right">explicit

{{ metadata }}{{ release_date }}

diff --git a/src/styles/scss/_middle-section.scss b/src/styles/scss/_middle-section.scss index c7edadc..6fb80a8 100644 --- a/src/styles/scss/_middle-section.scss +++ b/src/styles/scss/_middle-section.scss @@ -8,6 +8,7 @@ /* Center section */ $icon-dimension: 2rem; +$searchbar-height: calc(2rem + 1em); #search { background-color: var(--secondary-background); @@ -23,20 +24,12 @@ $icon-dimension: 2rem; .search__icon { width: $icon-dimension; height: $icon-dimension; - // cursor: pointer; i { font-size: $icon-dimension; - transition: color 250ms ease-in-out; color: var(--foreground); - @include removeSelectionBackground; - } - - &:hover { - i { - // color: var(--accent-color); - } + @include remove-selection-background; } } @@ -44,8 +37,6 @@ $icon-dimension: 2rem; border: 1px solid var(--foreground); } - $searchbar-height: calc(2rem + 1em); - #searchbar { height: $searchbar-height; padding-left: 0.5em; @@ -74,11 +65,12 @@ $icon-dimension: 2rem; #content { background-color: var(--main-background); - width: calc(100% - 10px); + // width: calc(100% - 10px); + width: 100%; height: calc(100% - 93px); overflow-y: scroll; overflow-x: hidden; - padding-left: 10px; + // padding-left: 10px; &::-webkit-scrollbar { width: 10px; @@ -96,60 +88,62 @@ $icon-dimension: 2rem; } } +#container { + --container-width: 95%; + + @media only screen and (min-width: $small) { + --container-width: 85%; + } + + @media only screen and (min-width: $medium) { + --container-width: 70%; + } +} + #container { margin: 0 auto; max-width: 1280px; - width: 90%; + width: var(--container-width); } /* The Modal (background) */ .smallmodal { - display: none; /* Hidden by default */ - position: fixed; /* Stay in place */ - z-index: 1250; /* Sit on top */ + display: none; + position: fixed; + z-index: 1250; left: 0; top: 0; - width: 100%; /* Full width */ - height: 100%; /* Full height */ - overflow: auto; /* Enable scroll if needed */ - background-color: rgb(0, 0, 0); /* Fallback color */ - background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ + width: 100%; + height: 100%; + overflow: auto; + background-color: rgb(0, 0, 0); + background-color: rgba(0, 0, 0, 0.4); animation-duration: 0.3s; } /* Modal Content */ .smallmodal-content { - background-color: none; + --modal-content-width: 95%; + + @media only screen and (min-width: $small) { + --modal-content-width: 85%; + } + + @media only screen and (min-width: $medium) { + --modal-content-width: 70%; + } +} + +.smallmodal-content { + background-color: transparent; margin: auto; - width: 30%; - align-items: center; + width: var(--modal-content-width); position: relative; top: 50%; transform: translateY(-50%); - & button { + 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%; - } -} diff --git a/src/styles/scss/_progressbar.scss b/src/styles/scss/_progressbar.scss index 302c0fe..8cca92e 100644 --- a/src/styles/scss/_progressbar.scss +++ b/src/styles/scss/_progressbar.scss @@ -48,102 +48,3 @@ } } } - -@-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; /* Safari */ - animation: spin 1s linear infinite; -} - -.toastify .circle-loader { - border-bottom-color: var(--toast-secondary); -} - -/* Safari */ -@-webkit-keyframes spin { - 0% { - -webkit-transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - } -} - -@keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} diff --git a/src/styles/scss/_sidebar.scss b/src/styles/scss/_sidebar.scss index ac05b4a..46006ca 100644 --- a/src/styles/scss/_sidebar.scss +++ b/src/styles/scss/_sidebar.scss @@ -58,7 +58,7 @@ $sidebar-delay: 75ms; cursor: default; } - @include removeSelectionBackground; + @include remove-selection-background; } &:hover { diff --git a/src/styles/scss/_toasts.scss b/src/styles/scss/_toasts.scss new file mode 100644 index 0000000..5c0f19e --- /dev/null +++ b/src/styles/scss/_toasts.scss @@ -0,0 +1,26 @@ +.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, 0.12), 0 10px 36px -4px rgba(0, 0, 0, 0.3); + background: var(--toast-background); + color: var(--toast-text); + + .circle-loader { + border-bottom-color: var(--toast-secondary); + } +} diff --git a/src/styles/scss/_track-preview.scss b/src/styles/scss/_track-preview.scss index fbf904b..e3a0eaa 100644 --- a/src/styles/scss/_track-preview.scss +++ b/src/styles/scss/_track-preview.scss @@ -16,9 +16,3 @@ .preview_playlist_controls { cursor: pointer; } - -a.single-cover { - position: relative; - display: inline-block; - color: white; -} diff --git a/src/styles/scss/base/_animations.scss b/src/styles/scss/base/_animations.scss index 480f7dd..c9f5510 100644 --- a/src/styles/scss/base/_animations.scss +++ b/src/styles/scss/base/_animations.scss @@ -40,23 +40,43 @@ } } +/* ====== */ + @keyframes spin { - from { + 0% { transform: rotate(0deg); } - - to { + 100% { transform: rotate(360deg); } } -// You can find a better name, I have no ideas -@keyframes grayscalize { - from { - filter: grayscale(0); +@keyframes indeterminate { + 0% { + left: -35%; + right: 100%; } - - to { - filter: grayscale(1); + 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%; } } diff --git a/src/styles/scss/base/_base.scss b/src/styles/scss/base/_base.scss index 846e9f9..b026be4 100644 --- a/src/styles/scss/base/_base.scss +++ b/src/styles/scss/base/_base.scss @@ -1,6 +1,4 @@ html { - height: 100vh; - --main-scroll: hsl(0, 0%, 33%); --panels-scroll: hsl(180, 2%, 17%); --tag-background: hsl(210, 100%, 38%); @@ -9,8 +7,6 @@ html { --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'] { @@ -67,6 +63,10 @@ html[data-theme='purple'] { --table-highlight: hsl(257, 66%, 27%); } +html { + height: 100vh; +} + body { margin: 0px; width: 100%; diff --git a/src/styles/scss/base/_functions.scss b/src/styles/scss/base/_functions.scss new file mode 100644 index 0000000..93f39f5 --- /dev/null +++ b/src/styles/scss/base/_functions.scss @@ -0,0 +1,17 @@ +// https://css-tricks.com/using-custom-property-stacks-to-tame-the-cascade/ +@function vars($stack...) { + $output: null; + $close: ''; + $length: length($stack); + + @each $var in $stack { + @if (str-index('#{$var}', '--') == 1) { + $var: 'var(#{$var}'; + $close: '#{$close})'; + } + + $output: if($output, '#{$output}, #{$var}', $var); + } + + @return unquote($output + $close); +} diff --git a/src/styles/scss/base/_mixins.scss b/src/styles/scss/base/_mixins.scss index 05533d2..07a6777 100644 --- a/src/styles/scss/base/_mixins.scss +++ b/src/styles/scss/base/_mixins.scss @@ -1,4 +1,4 @@ -@mixin removeSelectionBackground { +@mixin remove-selection-background { &::selection { background: none; } diff --git a/src/styles/scss/base/_variables.scss b/src/styles/scss/base/_variables.scss index 944a420..bbf8fae 100644 --- a/src/styles/scss/base/_variables.scss +++ b/src/styles/scss/base/_variables.scss @@ -1 +1,7 @@ +// Breakpoints (@todo change them in more proper values) +$small: 601px; +$medium: 993px; + +// Static variables (not an oxymoron) $sidebar-width: 48px; +$explicit-separator: 0.3125em; diff --git a/src/styles/scss/globals/_globals.scss b/src/styles/scss/globals/_globals.scss index 9162850..2b086a0 100644 --- a/src/styles/scss/globals/_globals.scss +++ b/src/styles/scss/globals/_globals.scss @@ -32,18 +32,18 @@ input[type='checkbox'] { 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); + &: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 { @@ -85,6 +85,31 @@ button { cursor: pointer; transition: transform 50ms ease-in-out, background-color 200ms ease; + &[disabled] { + background-color: var(--secondary-background); + color: var(--foreground); + opacity: 0.75; + } + + &.selective { + background-color: var(--main-background); + color: var(--foreground); + + &.active { + background-color: var(--accent-color); + color: var(--accent-text); + } + } + + &.with_icon { + display: flex; + align-items: center; + + i { + margin-left: 8px; + } + } + &:active { background-color: var(--accent-color); transform: scale(0.95); @@ -96,139 +121,62 @@ button { } } -#main_content { - margin-left: $sidebar-width; - width: calc(100% - $sidebar-width); - height: 100%; - display: flex; +img { + &.rounded { + border-radius: 5px; + } + + &.circle { + border-radius: 50%; + } } -img.rounded { - border-radius: 5px; +i { + &.disabled { + opacity: 0.5; + cursor: default; + } + + &.explicit_icon { + color: hsl(3, 100%, 59%); + margin-right: $explicit-separator; + + &.explicit_icon--right { + margin-left: $explicit-separator; + margin-right: 0px; + } + } } -img.circle { - border-radius: 50%; +span { + &.tag { + background-color: var(--tag-background); + border-radius: 2px; + color: var(--tag-text); + display: inline-block; + font-size: 10px; + padding: 3px 6px; + } } -.coverart { - background-color: var(--secondary-background); -} - -.cover_container { - position: relative; -} - -.cover_container .coverart { - opacity: 1; - display: block; - width: 100%; - height: auto; - transition: 0.5s ease; - backface-visibility: hidden; -} - -.cover_container .download_overlay { - transition: 0.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: #000000; - color: white; - border-radius: 50%; - padding: 10px; - cursor: pointer; -} - -.cover_container:hover .coverart { - opacity: 0.75; -} - -.cover_container:hover .download_overlay { - opacity: 1; -} - -i.disabled { - opacity: 0.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 { +a { color: dodgerblue; + + &.single-cover { + position: relative; + display: inline-block; + color: white; + } + + &:visited { + color: dodgerblue; + } } .clickable { cursor: pointer !important; } -.toastify { - display: flex; - align-items: center; - box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(0, 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: 0.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; @@ -242,10 +190,6 @@ button.with_icon i { margin-top: 24px; } -.tab { - margin: 16px 0px; -} - .fab { width: 56px; height: 56px; @@ -254,33 +198,27 @@ button.with_icon i { background-color: var(--accent-color); color: var(--accent-text); cursor: pointer; -} -.fab i { - font-size: 24px; - padding: 16px; + i { + font-size: 24px; + padding: 16px; + } } .with_checkbox { display: flex; align-items: center; -} -.with_checkbox [type='checkbox'] { - cursor: pointer; -} + [type='checkbox'] { + cursor: pointer; + } -.with_checkbox .checkbox_text { - margin-left: 10px; - cursor: pointer; -} + .checkbox_text { + margin-left: 10px; + cursor: pointer; -.with_checkbox .checkbox_text::selection { - background: none; -} - -.hide { - display: none !important; + @include remove-selection-background; + } } .loading_placeholder { @@ -313,3 +251,74 @@ button.with_icon i { z-index: 1000; } } + +.coverart { + background-color: var(--secondary-background); +} + +.cover_container { + position: relative; + + .coverart { + opacity: 1; + display: block; + width: 100%; + height: auto; + transition: 0.5s ease; + backface-visibility: hidden; + } + + .download_overlay { + transition: 0.5s ease; + opacity: 0; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + + i { + background-color: #000000; + color: white; + border-radius: 50%; + padding: 10px; + cursor: pointer; + } + } + + &:hover { + .coverart { + opacity: 0.75; + } + + .download_overlay { + opacity: 1; + } + } +} + +#main_content { + margin-left: $sidebar-width; + width: calc(100% - $sidebar-width); + height: 100%; + display: flex; +} + +// @todo Remove +.inline-flex { + display: flex; + align-items: center; + + .right { + margin-left: auto; + } +} + +// @todo Remove +.right { + float: right; +} + +.hide { + display: none !important; +} diff --git a/src/styles/scss/globals/_tables.scss b/src/styles/scss/globals/_tables.scss index a5295bb..63b0265 100644 --- a/src/styles/scss/globals/_tables.scss +++ b/src/styles/scss/globals/_tables.scss @@ -1,10 +1,11 @@ +$vertical-separator: 7px; +$table-border-radius: 3px; + .table { width: 100%; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; - --vertical-separator: 7px; - tbody { tr:not(.table__row-no-highlight):hover { background: var(--table-highlight); @@ -55,14 +56,14 @@ } td { - padding: var(--vertical-separator) 10px; + padding: $vertical-separator 10px; &:first-child { - padding: var(--vertical-separator) 10px var(--vertical-separator) 20px; + padding: $vertical-separator 10px $vertical-separator 20px; } &:last-child { - padding: var(--vertical-separator) 20px var(--vertical-separator) 10px; + padding: $vertical-separator 20px $vertical-separator 10px; } img { @@ -70,6 +71,85 @@ } } + /* === Tracks Table === */ + &--tracks { + border-collapse: collapse; + + thead { + border-bottom: 2px solid var(--table-highlight); + } + + th { + padding-bottom: 10px; + height: 45px; + } + + td { + height: 35px; + + &.breakline { + word-break: break-word; + } + } + + tr { + &:first-child { + td { + &:first-child { + border-top-left-radius: $table-border-radius; + } + + &:last-child { + border-top-right-radius: $table-border-radius; + } + } + } + + &:last-child { + td { + &:first-child { + border-bottom-left-radius: $table-border-radius; + } + + &:last-child { + border-bottom-right-radius: $table-border-radius; + } + } + } + } + } + + /* === Tracklist Table === */ + &--tracklist { + thead { + border-bottom: 2px solid var(--table-highlight); + } + + th { + height: 45px; + padding: $vertical-separator 10px; + + &:first-child { + padding: $vertical-separator 10px $vertical-separator 20px; + } + + &:last-child { + padding: $vertical-separator 20px $vertical-separator 10px; + } + } + + td { + height: 35px; + } + } + + /* === Charts Table === */ + &--charts { + td { + height: 35px; + } + } + .table__icon { box-sizing: content-box; width: 32px; @@ -134,95 +214,21 @@ } } -.track_row > td > img { - width: 32px; - height: 32px; -} - -.track_row > td > a > img { - width: 56px; - height: 56px; +.track_row { + > td > img { + width: 32px; + height: 32px; + } + + > td > a > img { + width: 56px; + height: 56px; + } } +// @todo Remove .top-tracks-position { padding: 12px; text-align: center; cursor: default; } - -/* === Tracks Table === */ -.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); -} - -/* === Tracklist Table === */ - -/* .table--tracklist {} */ - -.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); -} - -/* === Charts Table === */ - -/* .table--charts {} */ - -.table--charts td { - height: 35px; -} diff --git a/src/styles/scss/style.scss b/src/styles/scss/style.scss index 768b1c2..7e7f790 100644 --- a/src/styles/scss/style.scss +++ b/src/styles/scss/style.scss @@ -24,3 +24,4 @@ @import './sidebar'; @import './stackedTabs'; @import './track-preview'; +@import './toasts'; diff --git a/src/styles/scss/tabs/_charts-tab.scss b/src/styles/scss/tabs/_charts-tab.scss index 14343c9..8d7e3ca 100644 --- a/src/styles/scss/tabs/_charts-tab.scss +++ b/src/styles/scss/tabs/_charts-tab.scss @@ -1,4 +1,8 @@ -.charts_grid .release .coverart { - width: 156px; - height: 156px; +.charts_grid { + .release { + .coverart { + width: 156px; + height: 156px; + } + } } diff --git a/src/styles/scss/tabs/_download-tab.scss b/src/styles/scss/tabs/_download-tab.scss index dc219b6..edba467 100644 --- a/src/styles/scss/tabs/_download-tab.scss +++ b/src/styles/scss/tabs/_download-tab.scss @@ -1,23 +1,64 @@ #download_tab_container { - /* width: 300px; */ height: 100%; background-color: var(--panels-background); color: var(--panels-text); display: block; flex-direction: column; + + &.tab_hidden { + width: 32px; + + #toggle_download_tab { + margin-left: 4px; + + &::before { + font-family: 'Material Icons'; + font-style: normal; + font-weight: 400; + content: 'chevron_left'; + } + } + + #download_tab_drag_handler { + display: none; + } + + #queue_buttons { + opacity: 0; + visibility: hidden; + } + + #download_list { + display: none; + } + + #download_tab_label { + opacity: 1; + visibility: visible; + } + + &::after { + content: 'downloads'; + 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'; + &::before { + font-family: 'Material Icons'; + font-style: normal; + font-weight: 400; + content: 'chevron_right'; + } } .download_bar_icon { @@ -31,167 +72,127 @@ height: calc(100% - 32px); padding: 0px 8px 0px 28px; overflow-y: scroll; + + > .download_object { + padding-bottom: 8px; + + .download_info { + display: flex; + align-items: center; + + img { + width: 75px; + height: 75px; + display: inline-block; + flex-shrink: 0; + } + + .download_line { + display: block; + } + + .download_slim_separator { + display: none; + } + } + + .download_info_data { + width: 100%; + margin-left: 8px; + } + + .download_info_status { + margin-left: 8px; + width: 80px; + } + } + + &.slim { + > .download_object { + .download_info { + display: block; + + img { + display: none; + } + + .download_line { + display: inline-block; + } + + .download_slim_separator { + display: inline-block; + } + } + + .download_info_data { + width: calc(80% - 16px); + display: inline-block; + padding-left: 0px; + } + + .download_info_status { + width: 20%; + display: inline-block; // ignored due tu float + float: right; + } + } + } + + &::-webkit-scrollbar { + width: 10px; + } + + &::-webkit-scrollbar-track { + background: var(--panels-background); + } + + &::-webkit-scrollbar-thumb { + background: var(--panels-scroll); + border-radius: 4px; + width: 6px; + padding: 0px 2px; + } } -#download_list::-webkit-scrollbar { - width: 10px; +.download_object { + > .download_bar { + display: flex; + align-items: center; + height: 24px; + + > .queue_icon { + cursor: default; + margin-left: 8px; + } + + > .progress { + margin: 0px; + } + } } -#download_list::-webkit-scrollbar-track { - background: var(--panels-background); -} +#download_tab_container { + #queue_buttons { + position: absolute; + top: 0; + right: 0; + opacity: 1; + visibility: visible; + transition: all 250ms ease-in-out; + } -#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_list { - /* width: 300px; */ -} - -#download_tab_container #download_tab_label { - opacity: 0; - visibility: hidden; - transition: all 250ms ease-in-out; + #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; + background-color: hsl(0, 0%, 20%); cursor: ew-resize; } - -/* ===== Hidden tab styles ===== */ -#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 { - /* display: inline; */ - opacity: 1; - visibility: visible; -} diff --git a/src/styles/scss/tabs/_favorites-tab.scss b/src/styles/scss/tabs/_favorites-tab.scss index cf4f3c5..5848c74 100644 --- a/src/styles/scss/tabs/_favorites-tab.scss +++ b/src/styles/scss/tabs/_favorites-tab.scss @@ -1,7 +1,3 @@ -.favorites_tablinks.active { - color: var(--accent-text); -} - .reload-button { &.reload-button--inline { display: inline-block; diff --git a/src/styles/scss/tabs/_search-tab.scss b/src/styles/scss/tabs/_search-tab.scss index f50b893..5780b1d 100644 --- a/src/styles/scss/tabs/_search-tab.scss +++ b/src/styles/scss/tabs/_search-tab.scss @@ -1,11 +1,20 @@ -#main_search .search_section { - float: none; - padding-top: 20px; - padding-bottom: 20px; -} +#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); + &:not(:first-child) { + border-top: 1px solid var(--separator); + } + } + + .top_result_header { + display: block; + cursor: default; + font-size: 2rem; + text-align: center; + } } .search_header { @@ -13,94 +22,83 @@ cursor: pointer; font-size: 1.75rem; margin-bottom: 25px; -} -.search_header:not(.top_result_header) { - transition: color 200ms ease-in-out; -} + &:not(.top_result_header) { + transition: color 200ms ease-in-out; -.search_header:not(.top_result_header):hover { - color: var(--accent-color); -} - -/* Tab links */ - -.search_tablinks.active { - color: var(--foreground-inverted); + &:hover { + color: var(--accent-color); + } + } } /* Top Result */ -#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; -} + > .cover_container { + width: 156px; + height: 156px; + } -.top_result .info_box { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-top: 15px; -} + .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; -} + .primary-text, + .secondary-text { + font-size: 18px; + text-align: center; + } -.top_result .info_box .primary-text { - margin-bottom: 5px; -} + .primary-text { + margin-bottom: 5px; + } -.top_result .info_box .secondary-text { - margin-bottom: 10px; -} + .secondary-text { + margin-bottom: 10px; + } -.top_result .info_box .tag { - width: 40px; - text-align: center; + .tag { + width: 40px; + text-align: center; + } + } } /* Releases */ -.release .primary-text, -.release .secondary-text { - margin: 0px; - margin-bottom: 4px; -} +.release { + .primary-text, + .secondary-text { + margin: 0px; + margin-bottom: 4px; + } -.release .secondary-text { - opacity: 0.75; - font-size: 14px; -} + .secondary-text { + opacity: 0.75; + font-size: 14px; -.release .secondary-text .material-icons { - font-size: 17px !important; - margin-left: 4px; + .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; + &.firstrow_only { + grid-template-rows: 1fr; + grid-auto-rows: 0; + grid-row-gap: 0px; + overflow-y: hidden; + } } diff --git a/src/styles/scss/tabs/_settings-tab.scss b/src/styles/scss/tabs/_settings-tab.scss index 7558fd1..8ab8a08 100644 --- a/src/styles/scss/tabs/_settings-tab.scss +++ b/src/styles/scss/tabs/_settings-tab.scss @@ -30,13 +30,13 @@ width: 48px; margin: 0px 0px 0px 8px; padding: 0px 4px; + + i { + padding: 6px 0px; + } } -#settings_btn_copyArl i { - padding: 6px 0px; -} - -#spotify-icon { +#spotify_icon { width: 24px; height: 24px; fill: #1db954; @@ -51,61 +51,61 @@ border-top: 1px solid var(--separator); /* Need less opacity */ padding-top: 20px; padding-bottom: 20px; -} -.settings-group > * { - margin-bottom: 15px; + > * { + margin-bottom: 15px; + } } /* Settings group header */ .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 { + display: inline-flex; + align-items: center; -.settings-group__header--with-icon i.material-icons { - margin-right: 15px; + i.material-icons { + margin-right: 15px; + } + } } /* Settings container */ .settings-container { display: flex; -} -.settings-container__half > *, -.settings-container__third > * { - margin-bottom: 15px; -} + &__half { + width: 50%; + } -.settings-container__half { - width: 50%; -} + &__third { + width: 33%; -.settings-container__third { - width: 33%; -} + &--only-checkbox { + display: flex; + flex-direction: column; + justify-content: center; + align-items: start; + } + } -.settings-container__third--only-checkbox { - display: flex; - flex-direction: column; - justify-content: center; - align-items: start; + &__half > *, + &__third > * { + margin-bottom: 15px; + } } /* Input group */ .input_group { margin-bottom: 25px; -} -.input_group .input_group_text { - margin-bottom: 7px; -} + .input_group_text { + margin-bottom: 7px; + } -.with_checkbox + .input_group { - margin-top: 10px; + .with_checkbox + & { + margin-top: 10px; + } } diff --git a/src/styles/scss/tabs/_tabs.scss b/src/styles/scss/tabs/_tabs.scss index a2a63a6..8730875 100644 --- a/src/styles/scss/tabs/_tabs.scss +++ b/src/styles/scss/tabs/_tabs.scss @@ -4,28 +4,34 @@ display: none; } -.main_tabcontent h1 { - margin-bottom: 12px; +.main_tabcontent { + h1 { + margin-bottom: 12px; + } } -.tab button { - background-color: var(--main-background); - color: var(--foreground); -} +.tab { + margin: 16px 0px; -.tab button.active { - background-color: var(--accent-color); + button { + background-color: var(--main-background); + color: var(--foreground); + + &.active { + background-color: var(--accent-color); + } + } } .release { display: inline-block; width: 156px; -} -.release .cover_container { - width: 156px; - height: 156px; - margin-bottom: 10px; + .cover_container { + width: 156px; + height: 156px; + margin-bottom: 10px; + } } .section-tabs {