From 03a9cb5c86c3bdd6b23f71cf8da43a0733e22db4 Mon Sep 17 00:00:00 2001 From: Roberto Tonino Date: Sun, 7 Jun 2020 21:42:20 +0200 Subject: [PATCH] started editing styles files using sass synthax --- public/css/style.css | 2 +- src/styles/scss/_animations.scss | 42 ++-- src/styles/scss/_middle-section.scss | 33 +-- src/styles/scss/_progressbar.scss | 72 +++---- src/styles/scss/_sidebar.scss | 115 ++++++----- src/styles/scss/_stackedTabs.scss | 29 +-- src/styles/scss/_track-preview.scss | 1 + src/styles/scss/base/_base.scss | 7 - src/styles/scss/globals/_globals.scss | 4 +- src/styles/scss/globals/_tables.scss | 195 +++++++++--------- .../scss/{base => globals}/_typography.scss | 0 src/styles/scss/style.scss | 2 +- 12 files changed, 255 insertions(+), 247 deletions(-) rename src/styles/scss/{base => globals}/_typography.scss (100%) diff --git a/public/css/style.css b/public/css/style.css index 0cdf025..37e9fe5 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1 +1 @@ -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: #141414;--secondary-background: #242424;--main-text: #eeeeee;--main-text-inverted: #333333;--panels-background: #1a1a1a;--panels-text: #ffffff;--accent-text: #dfdfdf;--table-bg: #141414;--table-zebra: #242424;--table-highlight: #343434}html[data-theme=purple]{--main-background: #0c041b;--secondary-background: #130a29;--main-text: #eeeeee;--accent-color: #460ead;--main-text-inverted: #100822;--panels-background: #100727;--panels-text: #ffffff;--accent-text: #dfdfdf;--table-bg: #0c041b;--table-zebra: #130a29;--table-highlight: #321874}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}.page_heading{font-size:2.5rem;margin-bottom:35px}.section_heading{font-size:1.75rem;margin-bottom:25px}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 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 tbody tr:not(.table__row-no-highlight):hover{background:var(--table-highlight)}.table td,.table th{vertical-align:middle}th.sortable{-webkit-user-select:none;user-select:none}th.sort-asc:after{content:"▲";font-size:.7em;padding-left:3px;line-height:.7em}th.sort-desc:after{content:"▼";font-size:.7em;padding-left:3px;line-height:.7em}.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__icon.table__icon--big{width:48px;text-align:center}.table__cell--x-small{width:.32%}.table__cell--small{width:3.2%}.table__cell--medium{width:28.7%}.table__cell--large{width:50%}.table__cell--left{text-align:left}.table__cell--center{text-align:center}.table__cell--right{text-align:right}.table__cell-content.table__cell-content--vertical-center{display:flex;align-items:center}.table__cell--download{cursor:pointer}.table__cell--download i.material-icons{transition:color 175ms ease-in-out}.table__cell--download:hover i.material-icons{color:var(--table-bg)}.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}#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)}#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>#searchbar{width:calc(100% - 32px);height:32px;padding:0px 8px;margin:8px;border:0px;border-radius:6px;background-color:var(--secondary-background);color:var(--primary-text)}#content{background-color:var(--main-background);width:calc(100% - 10px);height:calc(100% - 48px);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: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:hover .main_tablinks_text{display:inline-block;opacity:1;visibility:visible}#sidebar .side_icon{font-size:30px;padding:9px}#sidebar .side_icon::selection{background:none}.side_icon--theme{cursor:default}#sidebar .main_tablinks.active .side_icon{color:var(--accent-color)}#theme_selector{margin-top:20px;display:flex;height:50px}#theme_togglers{display:flex;opacity:0;visibility:hidden;width:100%;justify-content:space-evenly;align-items:center;transition:all 50ms ease-in-out 200ms}#sidebar:hover #theme_togglers{position:relative;opacity:1;visibility:visible}.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{margin:0px;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}.preview_playlist_controls{cursor:pointer}a.single-cover{position:relative;display:inline-block;color:#fff} +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: #141414;--secondary-background: #242424;--main-text: #eeeeee;--main-text-inverted: #333333;--panels-background: #1a1a1a;--panels-text: #ffffff;--accent-text: #dfdfdf;--table-bg: #141414;--table-zebra: #242424;--table-highlight: #343434}html[data-theme=purple]{--main-background: #0c041b;--secondary-background: #130a29;--main-text: #eeeeee;--accent-color: #460ead;--main-text-inverted: #100822;--panels-background: #100727;--panels-text: #ffffff;--accent-text: #dfdfdf;--table-bg: #0c041b;--table-zebra: #130a29;--table-highlight: #321874}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)}#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>#searchbar{width:calc(100% - 32px);height:32px;padding:0px 8px;margin:8px;border:0px;border-radius:6px;background-color:var(--secondary-background);color:var(--primary-text)}#content{background-color:var(--main-background);width:calc(100% - 10px);height:calc(100% - 48px);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;visibility:visible}#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;visibility:hidden;width:100%;justify-content:space-evenly;align-items:center;transition:all 50ms ease-in-out 200ms}.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/src/styles/scss/_animations.scss b/src/styles/scss/_animations.scss index 5b78547..4e3de55 100644 --- a/src/styles/scss/_animations.scss +++ b/src/styles/scss/_animations.scss @@ -4,31 +4,31 @@ 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; -} + 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; -} + &:nth-child(1) { + animation-delay: -0.45s; + } -.lds-ring div:nth-child(2) { - animation-delay: -0.3s; -} + &:nth-child(2) { + animation-delay: -0.3s; + } -.lds-ring div:nth-child(3) { - animation-delay: -0.15s; + &:nth-child(3) { + animation-delay: -0.15s; + } + } } @keyframes lds-ring { diff --git a/src/styles/scss/_middle-section.scss b/src/styles/scss/_middle-section.scss index 0ee8663..d81f305 100644 --- a/src/styles/scss/_middle-section.scss +++ b/src/styles/scss/_middle-section.scss @@ -25,21 +25,21 @@ overflow-y: scroll; overflow-x: hidden; padding-left: 10px; -} -#content::-webkit-scrollbar { - width: 10px; -} + &::-webkit-scrollbar { + width: 10px; + } -#content::-webkit-scrollbar-track { - background: var(--main-background); -} + &::-webkit-scrollbar-track { + background: var(--main-background); + } -#content::-webkit-scrollbar-thumb { - background: var(--main-scroll); - border-radius: 4px; - width: 6px; - padding: 0px 2px; + &::-webkit-scrollbar-thumb { + background: var(--main-scroll); + border-radius: 4px; + width: 6px; + padding: 0px 2px; + } } #container { @@ -72,10 +72,11 @@ position: relative; top: 50%; transform: translateY(-50%); -} -.smallmodal-content button { - width: 100%; - margin-bottom: 8px; + + & button { + width: 100%; + margin-bottom: 8px; + } } @media only screen and (min-width: 601px) { diff --git a/src/styles/scss/_progressbar.scss b/src/styles/scss/_progressbar.scss index 8f7793c..302c0fe 100644 --- a/src/styles/scss/_progressbar.scss +++ b/src/styles/scss/_progressbar.scss @@ -7,46 +7,46 @@ 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; -} + .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); -} + .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; -} + &::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; + &::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 { diff --git a/src/styles/scss/_sidebar.scss b/src/styles/scss/_sidebar.scss index 5613ee6..110d441 100644 --- a/src/styles/scss/_sidebar.scss +++ b/src/styles/scss/_sidebar.scss @@ -10,53 +10,62 @@ color: var(--panels-text); transition: width 125ms ease-in-out 75ms; z-index: 999; -} -#sidebar:hover { - width: 200px; -} + &:hover { + width: 200px; + } -#sidebar .main_tablinks:not(#theme_selector) { - display: flex; - align-items: center; - margin-top: 5px; - cursor: pointer; -} + .main_tablinks { + &.active .side_icon { + color: var(--accent-color); + } -#sidebar .main_tablinks:not(#theme_selector):hover { - background-color: #3e3e3e; -} + &:not(#theme_selector) { + display: flex; + align-items: center; + margin-top: 5px; + cursor: pointer; -#sidebar .main_tablinks_text { - display: none; - display: inline-block; - margin-left: 20px; - opacity: 0; - visibility: hidden; - transition: all 50ms ease-in-out 200ms; -} + &:hover { + background-color: #3e3e3e; + } + } + } -#sidebar:hover .main_tablinks_text { - display: inline-block; - opacity: 1; - visibility: visible; -} + .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; -} + .side_icon { + font-size: 30px; + padding: 9px; -#sidebar .side_icon::selection { - background: none; -} + &.side_icon--theme { + cursor: default; + } -.side_icon--theme { - cursor: default; -} + &::selection { + background: none; + } + } -#sidebar .main_tablinks.active .side_icon { - color: var(--accent-color); + &:hover { + #theme_togglers { + position: relative; + opacity: 1; + visibility: visible; + } + .main_tablinks_text { + display: inline-block; + opacity: 1; + visibility: visible; + } + } } /* Theme selector */ @@ -77,12 +86,6 @@ transition: all 50ms ease-in-out 200ms; } -#sidebar:hover #theme_togglers { - position: relative; - opacity: 1; - visibility: visible; -} - .theme_toggler { width: 25px; height: 25px; @@ -90,20 +93,20 @@ border: 1px solid var(--separator); cursor: pointer; transition: border 200ms ease-in-out; -} -.theme_toggler--active { - border-width: 3px; -} + &--active { + border-width: 3px; + } -.theme_toggler[data-theme-variant='light'] { - background: white; -} + &[data-theme-variant='light'] { + background: white; + } -.theme_toggler[data-theme-variant='dark'] { - background: #141414; -} + &[data-theme-variant='dark'] { + background: #141414; + } -.theme_toggler[data-theme-variant='purple'] { - background: #460ead; + &[data-theme-variant='purple'] { + background: #460ead; + } } diff --git a/src/styles/scss/_stackedTabs.scss b/src/styles/scss/_stackedTabs.scss index 81c8530..8447a99 100644 --- a/src/styles/scss/_stackedTabs.scss +++ b/src/styles/scss/_stackedTabs.scss @@ -1,17 +1,18 @@ -.image_header header { - background-position: 0% 35%; - background-size: cover; - padding: 220px 24px 8px; - border-radius: 8px 8px 0px 0px; -} +.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; -} + h1, + h2 { + margin: 0px; + } -.image_header header h2 { - margin: 0px; - font-size: 18px; - margin-bottom: 12px; + h2 { + font-size: 18px; + margin-bottom: 12px; + } + } } diff --git a/src/styles/scss/_track-preview.scss b/src/styles/scss/_track-preview.scss index 0c5531e..fbf904b 100644 --- a/src/styles/scss/_track-preview.scss +++ b/src/styles/scss/_track-preview.scss @@ -10,6 +10,7 @@ border-radius: 5px; top: 0; right: 0; + transition: opacity 200ms ease-in-out; } .preview_playlist_controls { diff --git a/src/styles/scss/base/_base.scss b/src/styles/scss/base/_base.scss index 8f76f2c..7ea5048 100644 --- a/src/styles/scss/base/_base.scss +++ b/src/styles/scss/base/_base.scss @@ -1,10 +1,3 @@ -// @import './normalize.css'; -// @import './typography.css'; - -/* * { - transition: background-color 500ms ease-in-out; -} */ - html { height: 100vh; diff --git a/src/styles/scss/globals/_globals.scss b/src/styles/scss/globals/_globals.scss index b49692a..2e33aaa 100644 --- a/src/styles/scss/globals/_globals.scss +++ b/src/styles/scss/globals/_globals.scss @@ -64,7 +64,6 @@ button { position: relative; background-color: var(--accent-color); border: 1px solid transparent; - /* border: none; */ border-radius: 4px; font-family: inherit; font-weight: 600; @@ -187,7 +186,8 @@ span.tag { padding: 3px 6px; } -a, a:visited { +a, +a:visited { color: dodgerblue; } diff --git a/src/styles/scss/globals/_tables.scss b/src/styles/scss/globals/_tables.scss index 684d266..a5295bb 100644 --- a/src/styles/scss/globals/_tables.scss +++ b/src/styles/scss/globals/_tables.scss @@ -4,125 +4,134 @@ -webkit-border-vertical-spacing: 0px; --vertical-separator: 7px; -} -.table tr { - background: var(--table-bg); - transition: background-color 175ms ease-in-out; -} + tbody { + tr:not(.table__row-no-highlight):hover { + background: var(--table-highlight); + } + } -.table tr:nth-child(even) { - background: var(--table-zebra); - transition: background-color 175ms ease-in-out; -} + tr { + background: var(--table-bg); + transition: background-color 175ms ease-in-out; -.table tr:not(:last-child) { - border-bottom: 1px solid var(--table-highlight); -} + &:nth-child(even) { + background: var(--table-zebra); + transition: background-color 175ms ease-in-out; + } -.table tbody tr:not(.table__row-no-highlight):hover { - background: var(--table-highlight); -} + &:not(:last-child) { + border-bottom: 1px solid var(--table-highlight); + } + } -.table td, -.table th { - vertical-align: middle; -} + td, + th { + vertical-align: middle; + } -th.sortable { - -webkit-user-select: none; - user-select: none; -} + th { + .sortable { + -webkit-user-select: none; + user-select: none; + } -th.sort-asc:after { - content: '\25b2'; - font-size: 0.7em; - padding-left: 3px; - line-height: 0.7em; -} + .sort-asc, + .sort-desc { + &::after { + font-size: 0.7em; + padding-left: 3px; + line-height: 0.7em; + } + } -th.sort-desc:after { - content: '\25bc'; - font-size: 0.7em; - padding-left: 3px; - line-height: 0.7em; -} + .sort-asc::after { + content: '\25b2'; + } -.table td { - padding: var(--vertical-separator) 10px; -} + .sort-desc::after { + content: '\25bc'; + } + } -.table td:first-child { - padding: var(--vertical-separator) 10px var(--vertical-separator) 20px; -} + td { + padding: var(--vertical-separator) 10px; -.table td:last-child { - padding: var(--vertical-separator) 20px var(--vertical-separator) 10px; -} + &:first-child { + padding: var(--vertical-separator) 10px var(--vertical-separator) 20px; + } -.table td img { - vertical-align: middle; -} + &:last-child { + padding: var(--vertical-separator) 20px var(--vertical-separator) 10px; + } -.table .table__icon { - box-sizing: content-box; - width: 32px; -} + img { + vertical-align: middle; + } + } -.table__icon.table__icon--big { - width: 48px; - text-align: center; -} + .table__icon { + box-sizing: content-box; + width: 32px; -/* .table .table__cell {} */ + &--big { + width: 48px; + text-align: center; + } + } -.table__cell--x-small { - width: 0.32%; -} + .table__cell { + &--x-small { + width: 0.32%; + } -.table__cell--small { - width: 3.2%; -} + &--small { + width: 3.2%; + } -.table__cell--medium { - width: 28.7%; -} + &--medium { + width: 28.7%; + } -.table__cell--large { - width: 50%; -} + &--large { + width: 50%; + } -.table__cell--left { - text-align: left; -} + &--left { + text-align: left; + } -.table__cell--center { - text-align: center; -} + &--center { + text-align: center; + } -.table__cell--right { - text-align: right; -} + &--right { + text-align: right; + } -/* .table__cell-content {} */ + &--download { + cursor: pointer; -.table__cell-content.table__cell-content--vertical-center { - /* Wrap cell content in this to center vertically cells - with material icons or both material icons and text */ - display: flex; - align-items: center; -} + i.material-icons { + transition: color 175ms ease-in-out; + } -.table__cell--download { - cursor: pointer; -} + &:hover { + i.material-icons { + color: var(--table-bg); + } + } + } + } -.table__cell--download i.material-icons { - transition: color 175ms ease-in-out; -} - -.table__cell--download:hover i.material-icons { - color: var(--table-bg); + .table__cell-content { + &.table__cell-content--vertical-center { + // Wrap cell content in this to center vertically cells + // with material icons or both material icons and text + display: flex; + align-items: center; + } + } } .track_row > td > img { diff --git a/src/styles/scss/base/_typography.scss b/src/styles/scss/globals/_typography.scss similarity index 100% rename from src/styles/scss/base/_typography.scss rename to src/styles/scss/globals/_typography.scss diff --git a/src/styles/scss/style.scss b/src/styles/scss/style.scss index 63fbaea..06a7b12 100644 --- a/src/styles/scss/style.scss +++ b/src/styles/scss/style.scss @@ -1,9 +1,9 @@ @import './base/base'; @import './base/normalize'; -@import './base/typography'; @import './globals/globals'; @import './globals/tables'; +@import './globals/typography'; @import './tabs/about-tab'; @import './tabs/charts-tab';