diff --git a/public/css/style.css b/public/css/style.css index a9faf65..532f994 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,1543 +1 @@ -@charset "UTF-8"; -html { - height: 100vh; - --main-scroll: #555; - --panels-scroll: #2a2c2c; - --accent-color: #0a84ff; - --tag-background: #0062c4; - --tag-text: #ffffff; - --toast-background: #000000dd; - --toast-secondary: #ffffff22; - --toast-text: #ffffffde; - --separator: #8f8f8f; - --explicit-separator: 0.3125em; -} - -html[data-theme=light] { - --main-background: #ffffff; - --secondary-background: #eeeeee; - --main-text: #333333; - --main-text-inverted: #eeeeee; - --panels-background: #222324; - --panels-text: #ffffff; - --accent-text: black; - --table-bg: #ffffff; - --table-zebra: #c9c9c9; - --table-highlight: #8f8f8f; -} - -html[data-theme=dark] { - --main-background: hsl(0, 0%, 8%); - --secondary-background: hsl(0, 0%, 14%); - --main-text: hsl(0, 0%, 93%); - --main-text-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%); - --main-text: hsl(0, 0%, 93%); - --accent-color: hsl(261, 85%, 37%); - --main-text-inverted: hsl(258, 62%, 8%); - --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(--main-text); -} - -* { - 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; -} - -input[type=text], -input[type=password], -input[type=number] { - width: calc(100% - 16px); - border: 0px solid black; - line-height: 36px; - padding: 0px 8px; - border-radius: 4px; - background-color: var(--secondary-background); - color: var(--primary-text); - margin-bottom: 8px; -} - -input[type=checkbox] { - -webkit-appearance: none; - appearance: none; - background-color: none; - border: 2px solid gray; - opacity: 0.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 black; - 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(--primary-text); - 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); -} - -#loading_overlay { - justify-content: center; - align-items: center; - position: absolute; - flex-direction: column; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - background: rgba(0, 0, 0, 0.5); - display: none; - z-index: 1000; -} - -#loading_overlay.active { - display: flex; -} - -#loading_text { - margin-bottom: 20px; -} - -#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: 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 { - color: dodgerblue; -} - -.clickable { - cursor: pointer; -} - -.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(--main-text); - opacity: 0.75; -} - -button.selective { - background-color: var(--main-background); - color: var(--main-text); -} - -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; -} - -.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: 0.7em; - padding-left: 3px; - line-height: 0.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: 0.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; -} - -/* === 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; -} - -.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 { - /* width: 300px; */ - 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_list { - /* width: 300px; */ -} - -#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; -} - -/* ===== 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; -} - -.favorites_tablinks.active { - color: var(--accent-text); -} - -div.reload-button { - width: 36px; - height: 36px; -} - -div.reload-button i { - padding: 6px; -} - -div.reload-button.spin { - animation-name: spin; - animation-duration: 0.5s; - animation-iteration-count: infinite; - animation-timing-function: ease-out; -} - -@keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} -#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); -} - -/* Tab links */ -.search_tablinks.active { - color: var(--main-text-inverted); -} - -/* 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; -} - -.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; -} - -/* Releases */ -.release .primary-text, -.release .secondary-text { - margin: 0px; - margin-bottom: 4px; -} - -.release .secondary-text { - opacity: 0.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 */ -.settings-group { - display: flex; - flex-direction: column; - justify-content: center; - border-top: 1px solid var(--separator); - /* Need less opacity */ - padding-top: 20px; - padding-bottom: 20px; -} - -.settings-group > * { - 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 i.material-icons { - margin-right: 15px; -} - -/* Settings container */ -.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 */ -.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(--primary-background); - color: var(--main-text); -} - -.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; -} - -/* Source: https://loading.io/css/ */ -.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); - } -} -/* Middle section */ -#middle_section { - background-color: var(--main-background); - width: 100%; - height: 100%; - min-width: 10px; -} - -/* Center section */ -#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(--main-text); -} -#search .search__icon i::selection { - background: none; -} -#search:focus-within { - border: 1px solid var(--main-text); -} -#search #searchbar { - height: calc(2rem + 1em); - padding-left: 0.5em; - border: 0px; - border-radius: 0px; - background-color: var(--secondary-background); - color: var(--primary-text); - 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%; -} - -/* The Modal (background) */ -.smallmodal { - display: none; - /* Hidden by default */ - position: fixed; - /* Stay in place */ - z-index: 1250; - /* Sit on top */ - left: 0; - top: 0; - width: 100%; - /* Full width */ - height: 100%; - /* Full height */ - overflow: auto; - /* Enable scroll if needed */ - background-color: black; - /* Fallback color */ - background-color: rgba(0, 0, 0, 0.4); - /* Black w/ opacity */ - animation-duration: 0.3s; -} - -/* Modal Content */ -.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: 0.5rem 0 1rem 0; - overflow: hidden; -} -.progress .determinate { - position: absolute; - top: 0; - left: 0; - bottom: 0; - background-color: var(--accent-color); - -webkit-transition: width 0.3s linear; - transition: width 0.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; - /* 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); - } -} -#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 */ -#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: white; -} -.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, 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: white; -} - -/*# sourceMappingURL=style.css.map */ +html{height:100vh;--main-scroll: #555;--panels-scroll: #2a2c2c;--accent-color: #0a84ff;--tag-background: #0062c4;--tag-text: #ffffff;--toast-background: #000000dd;--toast-secondary: #ffffff22;--toast-text: #ffffffde;--separator: #8f8f8f;--explicit-separator: 0.3125em}html[data-theme=light]{--main-background: #ffffff;--secondary-background: #eeeeee;--main-text: #333333;--main-text-inverted: #eeeeee;--panels-background: #222324;--panels-text: #ffffff;--accent-text: black;--table-bg: #ffffff;--table-zebra: #c9c9c9;--table-highlight: #8f8f8f}html[data-theme=dark]{--main-background: hsl(0, 0%, 8%);--secondary-background: hsl(0, 0%, 14%);--main-text: hsl(0, 0%, 93%);--main-text-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%);--main-text: hsl(0, 0%, 93%);--accent-color: hsl(261, 85%, 37%);--main-text-inverted: hsl(258, 62%, 8%);--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(--main-text)}*{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}input[type=text],input[type=password],input[type=number]{width:calc(100% - 16px);border:0px solid #000;line-height:36px;padding:0px 8px;border-radius:4px;background-color:var(--secondary-background);color:var(--primary-text);margin-bottom:8px}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(--primary-text);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)}#loading_overlay{justify-content:center;align-items:center;position:absolute;flex-direction:column;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.5);display:none;z-index:1000}#loading_overlay.active{display:flex}#loading_text{margin-bottom:20px}#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}.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(--main-text);opacity:.75}button.selective{background-color:var(--main-background);color:var(--main-text)}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}.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)}div.reload-button{width:36px;height:36px}div.reload-button i{padding:6px}div.reload-button.spin{animation-name:spin;animation-duration:.5s;animation-iteration-count:infinite;animation-timing-function:ease-out}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}#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(--main-text-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(--primary-background);color:var(--main-text)}.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}.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)}}#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(--main-text)}#search .search__icon i::selection{background:none}#search:focus-within{border:1px solid var(--main-text)}#search #searchbar{height:calc(2rem + 1em);padding-left:.5em;border:0px;border-radius:0px;background-color:var(--secondary-background);color:var(--primary-text);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} diff --git a/public/css/style.css.map b/public/css/style.css.map deleted file mode 100644 index 426cd6b..0000000 --- a/public/css/style.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sourceRoot":"","sources":["../../src/styles/scss/base/_base.scss","../../src/styles/scss/base/_normalize.scss","../../src/styles/scss/globals/_globals.scss","../../src/styles/scss/globals/_tables.scss","../../src/styles/scss/globals/_typography.scss","../../src/styles/scss/tabs/_about-tab.scss","../../src/styles/scss/tabs/_charts-tab.scss","../../src/styles/scss/tabs/_download-tab.scss","../../src/styles/scss/tabs/_favorites-tab.scss","../../src/styles/scss/tabs/_home-tab.scss","../../src/styles/scss/tabs/_search-tab.scss","../../src/styles/scss/tabs/_settings-tab.scss","../../src/styles/scss/tabs/_tabs.scss","../../src/styles/scss/_animations.scss","../../src/styles/scss/_middle-section.scss","../../src/styles/scss/base/_mixins.scss","../../src/styles/scss/_progressbar.scss","../../src/styles/scss/_sidebar.scss","../../src/styles/scss/_stackedTabs.scss","../../src/styles/scss/_track-preview.scss"],"names":[],"mappings":";AAAA;EACC;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AClED;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AC5BD;AAAA;AAAA;EAGC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;ACtSD;EACC;EACA;EACA;EAEA;;AAGC;EACC;;AAIF;EACC;EACA;;AAEA;EACC;EACA;;AAGD;EACC;;AAIF;AAAA;EAEC;;AAIA;EACC;EACA;;AAKA;AAAA;EACC;EACA;EACA;;AAIF;EACC;;AAGD;EACC;;AAIF;EACC;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAIF;EACC;EACA;;AAEA;EACC;EACA;;AAKD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAEA;EACC;;AAIA;EACC;;AAOH;EAGC;EACA;;;AAKH;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;AACA;EACC;EAEA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAEA;AAEA;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAEA;AAEA;EACC;;;AClOD;EACC;EACA;;;AAGD;EACC;EACA;;;ACPD;EACC;;;AAED;EACC;;;AAED;EACC;;;ACPD;EACC;EACA;;;ACFD;AACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;AACA;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;AACC;EACA;EACA;;;ACnMD;EACC;;;AAGD;EACC;EACA;;;AAED;EACC;;;AAGD;EACC;EACC;EACA;EACA;;;AAGF;EACI;IACI;;EAEJ;IACI;;;ACxBR;EACC;;;AAGD;EACC;EACA;EACA;;;ACPD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAEA;EACC;;;AAGD;AACA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;AACA;AAAA;EAEC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;ACxGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;AAAwC;EACxC;EACA;;;AAGD;EACC;;;AAGD;AACA;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;AACA;EACC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;AACA;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AC7GD;AAAA;AAAA;EAGC;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AChCD;AACA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAKH;EACC;IACC;;EAED;IACC;;;ACtCF;AACA;EACC;EACA;EACA;EACA;;;AAGD;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC,OAde;EAef,QAfe;;AAkBf;EACC,WAnBc;EAoBd;EACA;;AC7BF;EACC;;ADwCD;EACC;;AAKD;EACC,QAHkB;EAIlB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAID;EAIC;EACA;;;AAKH;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;;;AAGD;AACA;EACC;AAAe;EACf;AAAiB;EACjB;AAAe;EACf;EACA;EACA;AAAa;EACb;AAAc;EACd;AAAgB;EAChB;AAAgC;EAChC;AAAsC;EACtC;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;;AAIF;EACC;AAAA;IAEC;;;AAIF;EACC;AAAA;IAEC;;;AAIF;EACC;AAAA;IAEC;;;AExJF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKH;EACC;IACC;IACA;;EAED;IACC;IACA;;EAED;IACC;IACA;;;AAIF;EACC;IACC;IACA;;EAED;IACC;IACA;;EAED;IACC;IACA;;;AAIF;EACC;IACC;IACA;;EAED;IACC;IACA;;EAED;IACC;IACA;;;AAIF;EACC;IACC;IACA;;EAED;IACC;IACA;;EAED;IACC;IACA;;;AAIF;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;AAA4C;EAC5C;;;AAGD;EACC;;;AAGD;AACA;EACC;IACC;;EAED;IACC;;;AAIF;EACC;IACC;;EAED;IACC;;;AClJF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAIA;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;AAGD;EACC;;AAKD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;;AAKH;AAEA;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;;AC5GD;EACC;EACA;EACA;EACA;;AAEA;AAAA;EAEC;;AAGD;EACC;EACA;;;ACdH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA","file":"style.css","sourcesContent":["html {\n\theight: 100vh;\n\n\t--main-scroll: #555;\n\t--panels-scroll: #2a2c2c;\n\t--accent-color: #0a84ff;\n\t--tag-background: #0062c4;\n\t--tag-text: #ffffff;\n\t--toast-background: #000000dd;\n\t--toast-secondary: #ffffff22;\n\t--toast-text: #ffffffde;\n\t--separator: #8f8f8f;\n\n\t--explicit-separator: 0.3125em;\n}\n\nhtml[data-theme='light'] {\n\t--main-background: #ffffff;\n\t--secondary-background: #eeeeee;\n\t--main-text: #333333;\n\t--main-text-inverted: #eeeeee;\n\t--panels-background: #222324;\n\t--panels-text: #ffffff;\n\t--accent-text: black;\n\n\t--table-bg: #ffffff;\n\t--table-zebra: #c9c9c9;\n\t--table-highlight: #8f8f8f;\n}\n\nhtml[data-theme='dark'] {\n\t--main-background: hsl(0, 0%, 8%);\n\t--secondary-background: hsl(0, 0%, 14%);\n\t--main-text: hsl(0, 0%, 93%);\n\t--main-text-inverted: hsl(0, 0%, 20%);\n\t--panels-background: hsl(0, 0%, 10%);\n\t--panels-text: hsl(0, 0%, 100%);\n\t--accent-text: hsl(0, 0%, 87%);\n\n\t--table-bg: hsl(0, 0%, 8%);\n\t--table-zebra: hsl(0, 0%, 14%);\n\t--table-highlight: hsl(0, 0%, 20%);\n}\n\nhtml[data-theme='purple'] {\n\t--main-background: hsl(261, 74%, 6%);\n\t--secondary-background: hsl(257, 61%, 10%);\n\t--main-text: hsl(0, 0%, 93%);\n\t--accent-color: hsl(261, 85%, 37%);\n\t--main-text-inverted: hsl(258, 62%, 8%);\n\t--panels-background: hsl(257, 70%, 9%);\n\t--panels-text: hsl(0, 0%, 100%);\n\t--accent-text: hsl(0, 0%, 87%);\n\n\t--table-bg: hsl(261, 74%, 6%);\n\t--table-zebra: hsl(257, 61%, 10%);\n\t--table-highlight: hsl(257, 66%, 27%);\n}\n\nbody {\n\tmargin: 0px;\n\twidth: 100%;\n\theight: 100%;\n\tfont-family: 'Open Sans';\n\toverflow: hidden;\n\tbackground: var(--main-background);\n\tcolor: var(--main-text);\n}\n","* {\n\tmargin: 0;\n\tpadding: 0;\n\tbox-sizing: border-box;\n}\n\n:root {\n\tfont-size: 16px;\n}\n\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd {\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 0;\n\tfont-size: 100%;\n\tfont: inherit;\n\tvertical-align: baseline;\n}\n\ntable {\n\tborder-collapse: collapse;\n\tborder-spacing: 0;\n}\n","input[type='text'],\ninput[type='password'],\ninput[type='number'] {\n\twidth: calc(100% - 16px);\n\tborder: 0px solid black;\n\tline-height: 36px;\n\tpadding: 0px 8px;\n\tborder-radius: 4px;\n\tbackground-color: var(--secondary-background);\n\tcolor: var(--primary-text);\n\tmargin-bottom: 8px;\n}\n\ninput[type='checkbox'] {\n\t-webkit-appearance: none;\n\tappearance: none;\n\tbackground-color: none;\n\tborder: 2px solid gray;\n\topacity: 0.5;\n\tborder-radius: 2px;\n\tpadding: 7px;\n\tmargin: 3px;\n\tdisplay: inline-block;\n\tposition: relative;\n}\n\ninput[type='checkbox']:checked {\n\topacity: 1;\n\tbackground-color: var(--accent-color);\n\tbackground-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\");\n\tbackground-position: center center;\n\tborder: 0px solid var(--accent-color);\n\tborder-radius: 2px;\n\tpadding: 9px;\n\tmargin: 3px;\n\tcolor: var(--accent-text);\n}\n\nselect {\n\t-webkit-appearance: none;\n\tappearance: none;\n\twidth: 100%;\n\tborder: 0px solid black;\n\tline-height: 36px;\n\tpadding: 0px 40px 0px 8px;\n\tborder-radius: 4px;\n\tbackground-color: var(--secondary-background);\n\tbackground-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\");\n\tbackground-repeat: no-repeat;\n\tbackground-size: 24px;\n\tbackground-position: calc(100% - 8px) center;\n\tbackground-clip: border-box;\n\tcolor: var(--primary-text);\n\tmargin-bottom: 8px;\n}\n\np {\n\tword-break: break-word;\n}\n\nbutton {\n\tmin-width: 64px;\n\tcolor: var(--accent-text);\n\tposition: relative;\n\tbackground-color: var(--accent-color);\n\tborder: 1px solid transparent;\n\tborder-radius: 4px;\n\tfont-family: inherit;\n\tfont-weight: 600;\n\tfont-size: 14px;\n\tpadding: 0px 8px;\n\tmargin-right: 8px;\n\theight: 36px;\n\ttext-transform: uppercase;\n\tcursor: pointer;\n\ttransition: transform 50ms ease-in-out, background-color 200ms ease;\n}\n\nbutton:active {\n\tbackground-color: var(--accent-color);\n\ttransform: scale(0.95);\n}\n\nbutton:hover {\n\tbackground: none;\n\tborder: 1px solid var(--accent-color);\n}\n\n#loading_overlay {\n\tjustify-content: center;\n\talign-items: center;\n\tposition: absolute;\n\tflex-direction: column;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100vw;\n\theight: 100vh;\n\tbackground: rgba(0, 0, 0, 0.5);\n\tdisplay: none;\n\tz-index: 1000;\n}\n\n#loading_overlay.active {\n\tdisplay: flex;\n}\n\n#loading_text {\n\tmargin-bottom: 20px;\n}\n\n#main_content {\n\tmargin-left: 48px;\n\twidth: calc(100% - 48px);\n\theight: 100%;\n\tdisplay: flex;\n}\n\nimg.rounded {\n\tborder-radius: 5px;\n}\n\nimg.circle {\n\tborder-radius: 50%;\n}\n\n.coverart {\n\tbackground-color: var(--secondary-background);\n}\n\n.cover_container {\n\tposition: relative;\n}\n\n.cover_container .coverart {\n\topacity: 1;\n\tdisplay: block;\n\twidth: 100%;\n\theight: auto;\n\ttransition: 0.5s ease;\n\tbackface-visibility: hidden;\n}\n\n.cover_container .download_overlay {\n\ttransition: 0.5s ease;\n\topacity: 0;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n\t-ms-transform: translate(-50%, -50%);\n\ttext-align: center;\n}\n\n.cover_container .download_overlay i {\n\tbackground-color: #000000;\n\tcolor: white;\n\tborder-radius: 50%;\n\tpadding: 10px;\n\tcursor: pointer;\n}\n\n.cover_container:hover .coverart {\n\topacity: 0.75;\n}\n\n.cover_container:hover .download_overlay {\n\topacity: 1;\n}\n\ni.disabled {\n\topacity: 0.5;\n\tcursor: default;\n}\n\ni.explicit_icon {\n\tcolor: #ff3b30;\n\tmargin-right: var(--explicit-separator);\n}\n\nspan.tag {\n\tbackground-color: var(--tag-background);\n\tborder-radius: 2px;\n\tcolor: var(--tag-text);\n\tdisplay: inline-block;\n\tfont-size: 10px;\n\tpadding: 3px 6px;\n}\n\na,\na:visited {\n\tcolor: dodgerblue;\n}\n\n.clickable {\n\tcursor: pointer;\n}\n\n.toastify {\n\tdisplay: flex;\n\talign-items: center;\n\tbox-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(0, 0, 0, 0.3);\n\tbackground: var(--toast-background);\n\tcolor: var(--toast-text);\n}\n\n.inline-flex {\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.inline-flex .right {\n\tmargin-left: auto;\n}\n\nbutton[disabled] {\n\tbackground-color: var(--secondary-background);\n\tcolor: var(--main-text);\n\topacity: 0.75;\n}\n\nbutton.selective {\n\tbackground-color: var(--main-background);\n\tcolor: var(--main-text);\n}\n\nbutton.selective.active {\n\tbackground-color: var(--accent-color);\n\tcolor: var(--accent-text);\n}\n\nbutton.with_icon {\n\tdisplay: flex;\n\talign-items: center;\n}\n\nbutton.with_icon i {\n\tmargin-left: 8px;\n}\n\n.right {\n\tfloat: right;\n}\n\n.fixed_footer footer {\n\tposition: sticky;\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: row;\n\tjustify-content: flex-end;\n\tbackground-color: var(--main-background);\n\tbottom: 0px;\n\theight: 64px;\n\twidth: 100%;\n\tmargin-top: 24px;\n}\n\n.tab {\n\tmargin: 16px 0px;\n}\n\n.fab {\n\twidth: 56px;\n\theight: 56px;\n\tborder-radius: 28px;\n\tdisplay: inline-block;\n\tbackground-color: var(--accent-color);\n\tcolor: var(--accent-text);\n\tcursor: pointer;\n}\n\n.fab i {\n\tfont-size: 24px;\n\tpadding: 16px;\n}\n\n.with_checkbox {\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.with_checkbox [type='checkbox'] {\n\tcursor: pointer;\n}\n\n.with_checkbox .checkbox_text {\n\tmargin-left: 10px;\n\tcursor: pointer;\n}\n\n.with_checkbox .checkbox_text::selection {\n\tbackground: none;\n}\n\n.hide {\n\tdisplay: none !important;\n}\n",".table {\n\twidth: 100%;\n\t-webkit-border-horizontal-spacing: 0px;\n\t-webkit-border-vertical-spacing: 0px;\n\n\t--vertical-separator: 7px;\n\n\ttbody {\n\t\ttr:not(.table__row-no-highlight):hover {\n\t\t\tbackground: var(--table-highlight);\n\t\t}\n\t}\n\n\ttr {\n\t\tbackground: var(--table-bg);\n\t\ttransition: background-color 175ms ease-in-out;\n\n\t\t&:nth-child(even) {\n\t\t\tbackground: var(--table-zebra);\n\t\t\ttransition: background-color 175ms ease-in-out;\n\t\t}\n\n\t\t&:not(:last-child) {\n\t\t\tborder-bottom: 1px solid var(--table-highlight);\n\t\t}\n\t}\n\n\ttd,\n\tth {\n\t\tvertical-align: middle;\n\t}\n\n\tth {\n\t\t.sortable {\n\t\t\t-webkit-user-select: none;\n\t\t\tuser-select: none;\n\t\t}\n\n\t\t.sort-asc,\n\t\t.sort-desc {\n\t\t\t&::after {\n\t\t\t\tfont-size: 0.7em;\n\t\t\t\tpadding-left: 3px;\n\t\t\t\tline-height: 0.7em;\n\t\t\t}\n\t\t}\n\n\t\t.sort-asc::after {\n\t\t\tcontent: '\\25b2';\n\t\t}\n\n\t\t.sort-desc::after {\n\t\t\tcontent: '\\25bc';\n\t\t}\n\t}\n\n\ttd {\n\t\tpadding: var(--vertical-separator) 10px;\n\n\t\t&:first-child {\n\t\t\tpadding: var(--vertical-separator) 10px var(--vertical-separator) 20px;\n\t\t}\n\n\t\t&:last-child {\n\t\t\tpadding: var(--vertical-separator) 20px var(--vertical-separator) 10px;\n\t\t}\n\n\t\timg {\n\t\t\tvertical-align: middle;\n\t\t}\n\t}\n\n\t.table__icon {\n\t\tbox-sizing: content-box;\n\t\twidth: 32px;\n\n\t\t&--big {\n\t\t\twidth: 48px;\n\t\t\ttext-align: center;\n\t\t}\n\t}\n\n\t.table__cell {\n\t\t&--x-small {\n\t\t\twidth: 0.32%;\n\t\t}\n\n\t\t&--small {\n\t\t\twidth: 3.2%;\n\t\t}\n\n\t\t&--medium {\n\t\t\twidth: 28.7%;\n\t\t}\n\n\t\t&--large {\n\t\t\twidth: 50%;\n\t\t}\n\n\t\t&--left {\n\t\t\ttext-align: left;\n\t\t}\n\n\t\t&--center {\n\t\t\ttext-align: center;\n\t\t}\n\n\t\t&--right {\n\t\t\ttext-align: right;\n\t\t}\n\n\t\t&--download {\n\t\t\tcursor: pointer;\n\n\t\t\ti.material-icons {\n\t\t\t\ttransition: color 175ms ease-in-out;\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\ti.material-icons {\n\t\t\t\t\tcolor: var(--table-bg);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.table__cell-content {\n\t\t&.table__cell-content--vertical-center {\n\t\t\t// Wrap cell content in this to center vertically cells\n\t\t\t// with material icons or both material icons and text\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\t}\n}\n\n.track_row > td > img {\n\twidth: 32px;\n\theight: 32px;\n}\n\n.track_row > td > a > img {\n\twidth: 56px;\n\theight: 56px;\n}\n\n.top-tracks-position {\n\tpadding: 12px;\n\ttext-align: center;\n\tcursor: default;\n}\n\n/* === Tracks Table === */\n.table--tracks {\n\tborder-collapse: collapse;\n\n\t--radius: 3px;\n}\n\n.table--tracks thead {\n\tborder-bottom: 2px solid var(--table-highlight);\n}\n\n.table--tracks th {\n\tpadding-bottom: 10px;\n\theight: 45px;\n}\n\n.table--tracks td {\n\theight: 35px;\n}\n\n.table--tracks td.breakline {\n\tword-break: break-word;\n}\n\n.table--tracks tr:first-child td:first-child {\n\tborder-top-left-radius: var(--radius);\n}\n\n.table--tracks tr:first-child td:last-child {\n\tborder-top-right-radius: var(--radius);\n}\n\n.table--tracks tr:last-child td:first-child {\n\tborder-bottom-left-radius: var(--radius);\n}\n\n.table--tracks tr:last-child td:last-child {\n\tborder-bottom-right-radius: var(--radius);\n}\n\n/* === Tracklist Table === */\n\n/* .table--tracklist {} */\n\n.table--tracklist thead {\n\tborder-bottom: 2px solid var(--table-highlight);\n}\n\n.table--tracklist th {\n\theight: 45px;\n\tpadding: var(--vertical-separator) 10px;\n}\n\n.table--tracklist th:first-child {\n\tpadding: var(--vertical-separator) 10px var(--vertical-separator) 20px;\n}\n\n.table--tracklist th:last-child {\n\tpadding: var(--vertical-separator) 20px var(--vertical-separator) 10px;\n}\n\n.table--tracklist td {\n\theight: 35px;\n}\n\n.explicit_tracklist {\n\tmargin-left: var(--explicit-separator);\n}\n\n/* === Charts Table === */\n\n/* .table--charts {} */\n\n.table--charts td {\n\theight: 35px;\n}\n",".page_heading {\n\tfont-size: 2.5rem;\n\tmargin-bottom: 35px;\n}\n\n.section_heading {\n\tfont-size: 1.75rem;\n\tmargin-bottom: 25px;\n}\n","#about_tab p {\n\tmargin-bottom: 8px;\n}\n#about_tab h3 {\n\tmargin: 8px 0px;\n}\n#about_tab hr {\n\tmargin: 12px 0px;\n}\n",".charts_grid .release .coverart {\n\twidth: 156px;\n\theight: 156px;\n}\n","#download_tab_container {\n\t/* width: 300px; */\n\theight: 100%;\n\tbackground-color: var(--panels-background);\n\tcolor: var(--panels-text);\n\tdisplay: block;\n\tflex-direction: column;\n}\n\n#toggle_download_tab {\n\twidth: 25px;\n\theight: 25px;\n\tmargin-left: 20px;\n}\n\n#toggle_download_tab::before {\n\tfont-family: 'Material Icons';\n\tfont-style: normal;\n\tfont-weight: 400;\n\tcontent: 'chevron_right';\n}\n\n.download_bar_icon {\n\tcursor: pointer;\n\tfont-size: 24px;\n\tmargin: 4px;\n}\n\n#download_list {\n\twidth: 100%;\n\theight: calc(100% - 32px);\n\tpadding: 0px 8px 0px 28px;\n\toverflow-y: scroll;\n}\n\n#download_list::-webkit-scrollbar {\n\twidth: 10px;\n}\n\n#download_list::-webkit-scrollbar-track {\n\tbackground: var(--panels-background);\n}\n\n#download_list::-webkit-scrollbar-thumb {\n\tbackground: var(--panels-scroll);\n\tborder-radius: 4px;\n\twidth: 6px;\n\tpadding: 0px 2px;\n}\n\n#download_list > .download_object {\n\tpadding-bottom: 8px;\n}\n\n#download_list > .download_object .download_info {\n\tdisplay: flex;\n\talign-items: center;\n}\n\n#download_list > .download_object .download_info img {\n\twidth: 75px;\n\theight: 75px;\n\tdisplay: inline-block;\n\tflex-shrink: 0;\n}\n\n#download_list > .download_object .download_info .download_line {\n\tdisplay: block;\n}\n\n#download_list > .download_object .download_info .download_slim_separator {\n\tdisplay: none;\n}\n\n#download_list > .download_object .download_info_data {\n\twidth: 100%;\n\tmargin-left: 8px;\n}\n\n#download_list > .download_object .download_info_status {\n\tmargin-left: 8px;\n\twidth: 80px;\n}\n\n#download_list.slim > .download_object .download_info img {\n\tdisplay: none;\n}\n\n#download_list.slim > .download_object .download_info .download_line {\n\tdisplay: inline-block;\n}\n\n#download_list.slim > .download_object .download_info .download_slim_separator {\n\tdisplay: inline-block;\n}\n\n#download_list.slim > .download_object .download_info_data {\n\twidth: calc(80% - 16px);\n\tdisplay: inline-block;\n\tpadding-left: 0px;\n}\n\n#download_list.slim > .download_object .download_info_status {\n\twidth: 20%;\n\tdisplay: inline-block;\n\tfloat: right;\n}\n\n#download_list.slim > .download_object .download_info {\n\tdisplay: block;\n}\n\n.download_object > .download_bar > .queue_icon {\n\tcursor: default;\n\tmargin-left: 8px;\n}\n\n.download_object > .download_bar {\n\tdisplay: flex;\n\talign-items: center;\n\theight: 24px;\n}\n\n.download_object > .download_bar > .progress {\n\tmargin: 0px;\n}\n\n#download_tab_container #queue_buttons {\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\topacity: 1;\n\tvisibility: visible;\n\ttransition: all 250ms ease-in-out;\n}\n\n#download_tab_container #download_list {\n\t/* width: 300px; */\n}\n\n#download_tab_container #download_tab_label {\n\topacity: 0;\n\tvisibility: hidden;\n\ttransition: all 250ms ease-in-out;\n}\n\n#download_tab_drag_handler {\n\twidth: 15px;\n\theight: 100%;\n\tposition: absolute;\n\tbackground-color: #333;\n\tcursor: ew-resize;\n}\n\n/* ===== Hidden tab styles ===== */\n#download_tab_container.tab_hidden {\n\twidth: 32px;\n}\n\n#download_tab_container.tab_hidden #toggle_download_tab {\n\tmargin-left: 4px;\n}\n\n#download_tab_container.tab_hidden #download_tab_drag_handler {\n\tdisplay: none;\n}\n\n#download_tab_container.tab_hidden #toggle_download_tab::before {\n\tfont-family: 'Material Icons';\n\tfont-style: normal;\n\tfont-weight: 400;\n\tcontent: 'chevron_left';\n}\n\n#download_tab_container.tab_hidden::after {\n\tcontent: 'downloads';\n\tdisplay: flex;\n\talign-items: center;\n\ttext-transform: capitalize;\n\twriting-mode: vertical-rl;\n\tline-height: 32px;\n}\n\n#download_tab_container.tab_hidden #queue_buttons {\n\topacity: 0;\n\tvisibility: hidden;\n}\n\n#download_tab_container.tab_hidden #download_list {\n\tdisplay: none;\n}\n\n#download_tab_container.tab_hidden #download_tab_label {\n\t/* display: inline; */\n\topacity: 1;\n\tvisibility: visible;\n}\n",".favorites_tablinks.active {\n\tcolor: var(--accent-text);\n}\n\ndiv.reload-button {\n\twidth: 36px;\n\theight: 36px;\n}\ndiv.reload-button i{\n\tpadding: 6px;\n}\n\ndiv.reload-button.spin {\n\tanimation-name: spin;\n animation-duration: 0.5s;\n animation-iteration-count: infinite;\n animation-timing-function: ease-out;\n}\n\n@keyframes spin {\n from {\n transform:rotate(0deg);\n }\n to {\n transform:rotate(360deg);\n }\n}\n","#home_not_logged_text {\n\tmargin-bottom: 15px;\n}\n\n.home_section {\n\tborder-top: 1px solid var(--separator);\n\tpadding-top: 25px;\n\tpadding-bottom: 25px;\n}\n","#main_search .search_section {\n\tfloat: none;\n\tpadding-top: 20px;\n\tpadding-bottom: 20px;\n}\n\n#main_search .search_section:not(:first-child) {\n\tborder-top: 1px solid var(--separator);\n}\n\n.search_header {\n\tdisplay: inline-block;\n\tcursor: pointer;\n\tfont-size: 1.75rem;\n\tmargin-bottom: 25px;\n}\n\n.search_header:not(.top_result_header) {\n\ttransition: color 200ms ease-in-out;\n}\n\n.search_header:not(.top_result_header):hover {\n\tcolor: var(--accent-color);\n}\n\n/* Tab links */\n\n.search_tablinks.active {\n\tcolor: var(--main-text-inverted);\n}\n\n/* Top Result */\n#main_search .top_result_header {\n\tdisplay: block;\n\tcursor: default;\n\tfont-size: 2rem;\n\ttext-align: center;\n}\n\n.top_result {\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: column;\n}\n\n.top_result > .cover_container {\n\twidth: 156px;\n\theight: 156px;\n}\n\n.top_result .info_box {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tmargin-top: 15px;\n}\n\n.top_result .info_box .primary-text,\n.top_result .info_box .secondary-text {\n\tfont-size: 18px;\n\ttext-align: center;\n}\n\n.top_result .info_box .primary-text {\n\tmargin-bottom: 5px;\n}\n\n.top_result .info_box .secondary-text {\n\tmargin-bottom: 10px;\n}\n\n.top_result .info_box .tag {\n\twidth: 40px;\n\ttext-align: center;\n}\n\n/* Releases */\n.release .primary-text,\n.release .secondary-text {\n\tmargin: 0px;\n\tmargin-bottom: 4px;\n}\n\n.release .secondary-text {\n\topacity: 0.75;\n\tfont-size: 14px;\n}\n\n.release .secondary-text .material-icons {\n\tfont-size: 17px !important;\n\tmargin-left: 4px;\n}\n\n.release_grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fill, minmax(156px, 1fr));\n\tgrid-gap: 1rem;\n}\n\n.release_grid.firstrow_only {\n\tgrid-template-rows: 1fr;\n\tgrid-auto-rows: 0;\n\tgrid-row-gap: 0px;\n\toverflow-y: hidden;\n}\n","#settings_picture {\n\twidth: 125px;\n\theight: 125px;\n}\n\n#logged_in_info {\n\theight: 250px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-evenly;\n\talign-items: center;\n}\n\n#log_info {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n}\n\n#open_login_prompt {\n\tmargin: 8px 0px;\n}\n\n#login_input_arl {\n\tmargin-bottom: 0px;\n}\n\n#settings_btn_copyArl {\n\tmin-width: 24px;\n\twidth: 48px;\n\tmargin: 0px 0px 0px 8px;\n\tpadding: 0px 4px;\n}\n\n#settings_btn_copyArl i {\n\tpadding: 6px 0px;\n}\n\n#spotify-icon {\n\twidth: 24px;\n\theight: 24px;\n\tfill: #1db954;\n\tmargin-right: 15px;\n}\n\n/* Settings group */\n.settings-group {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\tborder-top: 1px solid var(--separator); /* Need less opacity */\n\tpadding-top: 20px;\n\tpadding-bottom: 20px;\n}\n\n.settings-group > * {\n\tmargin-bottom: 15px;\n}\n\n/* Settings group header */\n.settings-group__header {\n\tfont-size: 1.5rem;\n\tmargin-bottom: 25px;\n}\n\n.settings-group__header--with-icon {\n\tdisplay: inline-flex;\n\talign-items: center;\n}\n\n.settings-group__header--with-icon i.material-icons {\n\tmargin-right: 15px;\n}\n\n/* Settings container */\n.settings-container {\n\tdisplay: flex;\n}\n\n.settings-container__half > *,\n.settings-container__third > * {\n\tmargin-bottom: 15px;\n}\n\n.settings-container__half {\n\twidth: 50%;\n}\n\n.settings-container__third {\n\twidth: 33%;\n}\n\n.settings-container__third--only-checkbox {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: start;\n}\n\n/* Input group */\n.input_group {\n\tmargin-bottom: 25px;\n}\n\n.input_group .input_group_text {\n\tmargin-bottom: 7px;\n}\n\n.with_checkbox + .input_group {\n\tmargin-top: 10px;\n}\n",".search_tabcontent,\n.main_tabcontent,\n.favorites_tabcontent {\n\tdisplay: none;\n}\n\n.main_tabcontent h1 {\n\tmargin-bottom: 12px;\n}\n\n.tab button {\n\tbackground-color: var(--primary-background);\n\tcolor: var(--main-text);\n}\n\n.tab button.active {\n\tbackground-color: var(--accent-color);\n}\n\n.release {\n\tdisplay: inline-block;\n\twidth: 156px;\n}\n\n.release .cover_container {\n\twidth: 156px;\n\theight: 156px;\n\tmargin-bottom: 10px;\n}\n\n.main_tablinks_text {\n\toverflow: hidden;\n\twhite-space: nowrap;\n}\n","/* Source: https://loading.io/css/ */\n.lds-ring {\n\tdisplay: inline-block;\n\tposition: relative;\n\twidth: 80px;\n\theight: 80px;\n\n\tdiv {\n\t\tbox-sizing: border-box;\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\twidth: 64px;\n\t\theight: 64px;\n\t\tmargin: 8px;\n\t\tborder: 8px solid #fff;\n\t\tborder-radius: 50%;\n\t\tanimation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n\t\tborder-color: #fff transparent transparent transparent;\n\n\t\t&:nth-child(1) {\n\t\t\tanimation-delay: -0.45s;\n\t\t}\n\n\t\t&:nth-child(2) {\n\t\t\tanimation-delay: -0.3s;\n\t\t}\n\n\t\t&:nth-child(3) {\n\t\t\tanimation-delay: -0.15s;\n\t\t}\n\t}\n}\n\n@keyframes lds-ring {\n\t0% {\n\t\ttransform: rotate(0deg);\n\t}\n\t100% {\n\t\ttransform: rotate(360deg);\n\t}\n}\n","/* Middle section */\n#middle_section {\n\tbackground-color: var(--main-background);\n\twidth: 100%;\n\theight: 100%;\n\tmin-width: 10px;\n}\n\n/* Center section */\n$icon-dimension: 2rem;\n\n#search {\n\tbackground-color: var(--secondary-background);\n\twidth: 100%;\n\tpadding: 0 1em;\n\tmargin-bottom: 20px;\n\tmargin-right: 32px;\n\tdisplay: flex;\n\talign-items: center;\n\tborder: 1px solid transparent;\n\ttransition: border 200ms ease-in-out;\n\n\t.search__icon {\n\t\twidth: $icon-dimension;\n\t\theight: $icon-dimension;\n\t\t// cursor: pointer;\n\n\t\ti {\n\t\t\tfont-size: $icon-dimension;\n\t\t\ttransition: color 250ms ease-in-out;\n\t\t\tcolor: var(--main-text);\n\n\t\t\t@include removeSelectionBackground;\n\t\t}\n\n\t\t&:hover {\n\t\t\ti {\n\t\t\t\t// color: var(--accent-color);\n\t\t\t}\n\t\t}\n\t}\n\n\t&:focus-within {\n\t\tborder: 1px solid var(--main-text);\n\t}\n\n\t$searchbar-height: calc(2rem + 1em);\n\n\t#searchbar {\n\t\theight: $searchbar-height;\n\t\tpadding-left: 0.5em;\n\t\tborder: 0px;\n\t\tborder-radius: 0px;\n\t\tbackground-color: var(--secondary-background);\n\t\tcolor: var(--primary-text);\n\t\tfont-size: 2rem;\n\t\tfont-family: 'Open Sans';\n\t\tfont-weight: 300;\n\n\t\t&:focus {\n\t\t\toutline: none;\n\t\t}\n\n\t\t// Removing Chrome autofill color\n\t\t&:-webkit-autofill,\n\t\t&:-webkit-autofill:hover,\n\t\t&:-webkit-autofill:focus,\n\t\t&:-webkit-autofill:active {\n\t\t\t-webkit-box-shadow: 0 0 0 $searchbar-height var(--secondary-background) inset !important;\n\t\t\tbox-shadow: 0 0 0 $searchbar-height var(--secondary-background) inset !important;\n\t\t}\n\t}\n}\n\n#content {\n\tbackground-color: var(--main-background);\n\twidth: calc(100% - 10px);\n\theight: calc(100% - 93px);\n\toverflow-y: scroll;\n\toverflow-x: hidden;\n\tpadding-left: 10px;\n\n\t&::-webkit-scrollbar {\n\t\twidth: 10px;\n\t}\n\n\t&::-webkit-scrollbar-track {\n\t\tbackground: var(--main-background);\n\t}\n\n\t&::-webkit-scrollbar-thumb {\n\t\tbackground: var(--main-scroll);\n\t\tborder-radius: 4px;\n\t\twidth: 6px;\n\t\tpadding: 0px 2px;\n\t}\n}\n\n#container {\n\tmargin: 0 auto;\n\tmax-width: 1280px;\n\twidth: 90%;\n}\n\n/* The Modal (background) */\n.smallmodal {\n\tdisplay: none; /* Hidden by default */\n\tposition: fixed; /* Stay in place */\n\tz-index: 1250; /* Sit on top */\n\tleft: 0;\n\ttop: 0;\n\twidth: 100%; /* Full width */\n\theight: 100%; /* Full height */\n\toverflow: auto; /* Enable scroll if needed */\n\tbackground-color: rgb(0, 0, 0); /* Fallback color */\n\tbackground-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */\n\tanimation-duration: 0.3s;\n}\n\n/* Modal Content */\n.smallmodal-content {\n\tbackground-color: none;\n\tmargin: auto;\n\twidth: 30%;\n\talign-items: center;\n\tposition: relative;\n\ttop: 50%;\n\ttransform: translateY(-50%);\n\n\t& button {\n\t\twidth: 100%;\n\t\tmargin-bottom: 8px;\n\t}\n}\n\n@media only screen and (min-width: 601px) {\n\t#container,\n\t.smallmodal-content {\n\t\twidth: 85%;\n\t}\n}\n\n@media only screen and (min-width: 993px) {\n\t#container,\n\t.smallmodal-content {\n\t\twidth: 70%;\n\t}\n}\n\n@media only screen and (max-width: 600px) {\n\t#container,\n\t.smallmodal-content {\n\t\twidth: 100%;\n\t}\n}\n","@mixin removeSelectionBackground {\n\t&::selection {\n\t\tbackground: none;\n\t}\n}\n",".progress {\n\tposition: relative;\n\theight: 4px;\n\tdisplay: block;\n\twidth: 100%;\n\tbackground-color: var(--secondary-background);\n\tborder-radius: 2px;\n\tmargin: 0.5rem 0 1rem 0;\n\toverflow: hidden;\n\n\t.determinate {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\tbackground-color: var(--accent-color);\n\t\t-webkit-transition: width 0.3s linear;\n\t\ttransition: width 0.3s linear;\n\t}\n\n\t.indeterminate {\n\t\tbackground-color: var(--accent-color);\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tbackground-color: inherit;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\tbottom: 0;\n\t\t\twill-change: left, right;\n\t\t\t-webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n\t\t\tanimation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tbackground-color: inherit;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\tbottom: 0;\n\t\t\twill-change: left, right;\n\t\t\t-webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n\t\t\tanimation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n\t\t\t-webkit-animation-delay: 1.15s;\n\t\t\tanimation-delay: 1.15s;\n\t\t}\n\t}\n}\n\n@-webkit-keyframes indeterminate {\n\t0% {\n\t\tleft: -35%;\n\t\tright: 100%;\n\t}\n\t60% {\n\t\tleft: 100%;\n\t\tright: -90%;\n\t}\n\t100% {\n\t\tleft: 100%;\n\t\tright: -90%;\n\t}\n}\n\n@keyframes indeterminate {\n\t0% {\n\t\tleft: -35%;\n\t\tright: 100%;\n\t}\n\t60% {\n\t\tleft: 100%;\n\t\tright: -90%;\n\t}\n\t100% {\n\t\tleft: 100%;\n\t\tright: -90%;\n\t}\n}\n\n@-webkit-keyframes indeterminate-short {\n\t0% {\n\t\tleft: -200%;\n\t\tright: 100%;\n\t}\n\t60% {\n\t\tleft: 107%;\n\t\tright: -8%;\n\t}\n\t100% {\n\t\tleft: 107%;\n\t\tright: -8%;\n\t}\n}\n\n@keyframes indeterminate-short {\n\t0% {\n\t\tleft: -200%;\n\t\tright: 100%;\n\t}\n\t60% {\n\t\tleft: 107%;\n\t\tright: -8%;\n\t}\n\t100% {\n\t\tleft: 107%;\n\t\tright: -8%;\n\t}\n}\n\n.toast-icon {\n\tdisplay: inline-block;\n\tmargin-right: 8px;\n}\n\n.circle-loader {\n\tdisplay: inline-block;\n\tborder: 2px solid var(--accent-color);\n\tborder-radius: 50%;\n\tborder-bottom: 2px solid var(--secondary-background);\n\twidth: 16px;\n\theight: 16px;\n\t-webkit-animation: spin 1s linear infinite; /* Safari */\n\tanimation: spin 1s linear infinite;\n}\n\n.toastify .circle-loader {\n\tborder-bottom-color: var(--toast-secondary);\n}\n\n/* Safari */\n@-webkit-keyframes spin {\n\t0% {\n\t\t-webkit-transform: rotate(0deg);\n\t}\n\t100% {\n\t\t-webkit-transform: rotate(360deg);\n\t}\n}\n\n@keyframes spin {\n\t0% {\n\t\ttransform: rotate(0deg);\n\t}\n\t100% {\n\t\ttransform: rotate(360deg);\n\t}\n}\n","#sidebar {\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 48px;\n\theight: 100%;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tbackground-color: var(--panels-background);\n\tcolor: var(--panels-text);\n\ttransition: width 125ms ease-in-out 75ms;\n\tz-index: 999;\n\n\t&:hover {\n\t\twidth: 200px;\n\t}\n\n\t.main_tablinks {\n\t\t&.active .side_icon {\n\t\t\tcolor: var(--accent-color);\n\t\t}\n\n\t\t&:not(#theme_selector) {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tmargin-top: 5px;\n\t\t\tcursor: pointer;\n\n\t\t\t&:hover {\n\t\t\t\tbackground-color: #3e3e3e;\n\t\t\t}\n\t\t}\n\t}\n\n\t.main_tablinks_text {\n\t\tdisplay: none;\n\t\tdisplay: inline-block;\n\t\tmargin-left: 20px;\n\t\topacity: 0;\n\t\tvisibility: hidden;\n\t\ttransition: all 50ms ease-in-out 200ms;\n\t}\n\n\t.side_icon {\n\t\tfont-size: 30px;\n\t\tpadding: 9px;\n\n\t\t&.side_icon--theme {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&::selection {\n\t\t\tbackground: none;\n\t\t}\n\t}\n\n\t&:hover {\n\t\t#theme_togglers {\n\t\t\tposition: relative;\n\t\t\topacity: 1;\n\t\t\ttransition-delay: 200ms;\n\t\t}\n\n\t\t.main_tablinks_text {\n\t\t\tdisplay: inline-block;\n\t\t\topacity: 1;\n\t\t\tvisibility: visible;\n\t\t}\n\t}\n}\n\n/* Theme selector */\n\n#theme_selector {\n\tmargin-top: 20px;\n\tdisplay: flex;\n\theight: 50px;\n}\n\n#theme_togglers {\n\tdisplay: flex;\n\topacity: 0;\n\twidth: 100%;\n\tjustify-content: space-evenly;\n\talign-items: center;\n\ttransition: all 50ms ease 0s;\n}\n\n.theme_toggler {\n\twidth: 25px;\n\theight: 25px;\n\tborder-radius: 1000px;\n\tborder: 1px solid var(--separator);\n\tcursor: pointer;\n\ttransition: border 200ms ease-in-out;\n\n\t&--active {\n\t\tborder-width: 3px;\n\t}\n\n\t&[data-theme-variant='light'] {\n\t\tbackground: white;\n\t}\n\n\t&[data-theme-variant='dark'] {\n\t\tbackground: #141414;\n\t}\n\n\t&[data-theme-variant='purple'] {\n\t\tbackground: #460ead;\n\t}\n}\n",".image_header {\n\theader {\n\t\tbackground-position: 0% 35%;\n\t\tbackground-size: cover;\n\t\tpadding: 220px 24px 8px;\n\t\tborder-radius: 8px 8px 0px 0px;\n\n\t\th1,\n\t\th2 {\n\t\t\tmargin: 0px;\n\t\t}\n\n\t\th2 {\n\t\t\tfont-size: 18px;\n\t\t\tmargin-bottom: 12px;\n\t\t}\n\t}\n}\n",".preview_controls {\n\topacity: 0;\n\tdisplay: block;\n\tbackground: rgba(0, 0, 0, 0.5);\n\twidth: 56px;\n\theight: 56px;\n\ttext-align: center;\n\tline-height: 56px;\n\tposition: absolute;\n\tborder-radius: 5px;\n\ttop: 0;\n\tright: 0;\n\ttransition: opacity 200ms ease-in-out;\n}\n\n.preview_playlist_controls {\n\tcursor: pointer;\n}\n\na.single-cover {\n\tposition: relative;\n\tdisplay: inline-block;\n\tcolor: white;\n}\n"]} \ No newline at end of file diff --git a/public/index.html b/public/index.html index f94b199..8aaa4b5 100644 --- a/public/index.html +++ b/public/index.html @@ -858,17 +858,23 @@

- - + +
+ +
+

Playlist filename template

+ +
+