diff --git a/src/app.js b/src/app.js index c2fc427..d649831 100644 --- a/src/app.js +++ b/src/app.js @@ -12,9 +12,9 @@ import '@/styles/css/base.css' import '@/styles/css/components.css' import '@/styles/css/helpers.css' import '@/styles/css/icons.css' +import '@/styles/css/tables.css' import '@/styles/css/typography.css' -import '@/styles/scss/tables.scss' import App from '@/App.vue' import i18n from '@/plugins/i18n' diff --git a/src/components/TheContent.vue b/src/components/TheContent.vue index 1fd25d6..1d1b406 100644 --- a/src/components/TheContent.vue +++ b/src/components/TheContent.vue @@ -62,20 +62,21 @@ export default { } </script> -<style lang="scss"> +<style> #container { --container-width: 95%; - margin: 0 auto; max-width: 1280px; width: var(--container-width); transform: scale(1); - - @media only screen and (min-width: 601px) { +} +@media only screen and (min-width: 601px) { + #container { --container-width: 85%; } - - @media only screen and (min-width: 993px) { +} +@media only screen and (min-width: 993px) { + #container { --container-width: 70%; } } diff --git a/src/components/TheSearchBar.vue b/src/components/TheSearchBar.vue index c79c29a..f91b684 100644 --- a/src/components/TheSearchBar.vue +++ b/src/components/TheSearchBar.vue @@ -162,10 +162,7 @@ export default defineComponent({ }) </script> -<style lang="scss"> -$icon-dimension: 2rem; -$searchbar-height: 45px; - +<style> input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; width: 28px; @@ -185,81 +182,65 @@ input[type='search']::-webkit-search-cancel-button { border-radius: 15px; margin: 10px 10px 20px 10px; overflow: hidden; - - .search__icon { - width: $icon-dimension; - height: $icon-dimension; - - i { - font-size: $icon-dimension; - color: var(--foreground); - - &::selection { - background: none; - } - } - } - - #searchbar { - height: $searchbar-height; - padding-left: 0.5em; - border: 0px; - border-radius: 0px; - background-color: var(--secondary-background); - color: var(--foreground); - font-size: 1.2rem; - font-family: 'Open Sans'; - font-weight: 300; - margin-bottom: 0; - - &:focus { - outline: none; - } - - &::-webkit-search-cancel-button { - appearance: none; - width: 28px; - height: 28px; - background-color: var(--foreground); - mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); - } - - // Removing Chrome autofill color - &:-webkit-autofill, - &:-webkit-autofill:hover, - &:-webkit-autofill:focus, - &:-webkit-autofill:active { - box-shadow: 0 0 0 $searchbar-height var(--secondary-background) inset !important; - } - } - - .searchButton { - background-color: var(--primary-color); - color: var(--primary-text); - height: 100%; - width: 48px; - display: flex; - text-decoration: none; - align-items: center; - justify-content: center; - border-radius: 0px 15px 15px 0px; - margin-left: 1em; - - i { - font-size: $icon-dimension; - - &::selection { - background: none; - } - } - } - - &:focus-within { - border: 1px solid var(--foreground); - } - - &.showSearchButton { - padding: 0 0 0 1em; - } +} +#search .search__icon { + width: 2rem; + height: 2rem; +} +#search .search__icon i { + font-size: 2rem; + color: var(--foreground); +} +#search .search__icon i::selection { + background: none; +} +#search #searchbar { + height: 45px; + padding-left: 0.5em; + border: 0px; + border-radius: 0px; + background-color: var(--secondary-background); + color: var(--foreground); + font-size: 1.2rem; + font-family: 'Open Sans'; + font-weight: 300; + margin-bottom: 0; +} +#search #searchbar:focus { + outline: none; +} +#search #searchbar::-webkit-search-cancel-button { + appearance: none; + width: 28px; + height: 28px; + background-color: var(--foreground); + mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); +} +#search #searchbar:-webkit-autofill, #search #searchbar:-webkit-autofill:hover, #search #searchbar:-webkit-autofill:focus, #search #searchbar:-webkit-autofill:active { + box-shadow: 0 0 0 45px var(--secondary-background) inset !important; +} +#search .searchButton { + background-color: var(--primary-color); + color: var(--primary-text); + height: 100%; + width: 48px; + display: flex; + text-decoration: none; + align-items: center; + justify-content: center; + border-radius: 0px 15px 15px 0px; + margin-left: 1em; +} +#search .searchButton i { + font-size: 2rem; +} +#search .searchButton i::selection { + background: none; +} +#search:focus-within { + border: 1px solid var(--foreground); +} +#search.showSearchButton { + padding: 0 0 0 1em; } </style> diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue index 066dd1a..281040d 100644 --- a/src/components/TheSidebar.vue +++ b/src/components/TheSidebar.vue @@ -103,22 +103,19 @@ export default defineComponent({ }) </script> -<style lang="scss" scoped> +<style scoped> .deemix-icon-container { display: grid; place-content: center; - - .slim-sidebar & { - margin: 0.5rem 0; - - &::v-deep svg { - height: 30px; - } - } - - &::v-deep svg { - height: 75px; - } +} +.slim-sidebar .deemix-icon-container { + margin: 0.5rem 0; +} +.slim-sidebar .deemix-icon-container::v-deep svg { + height: 30px; +} +.deemix-icon-container::v-deep svg { + height: 75px; } #update-notification { @@ -128,21 +125,17 @@ export default defineComponent({ .theme_toggler { transition: border 200ms ease-in-out; - - &--active { - border-width: 3px; - } - - &--light { - background-color: #fff; - } - - &--dark { - background-color: hsl(0, 0%, 8%); - } - - &--purple { - background: hsl(261, 85%, 37%); - } +} +.theme_toggler--active { + border-width: 3px; +} +.theme_toggler--light { + background-color: #fff; +} +.theme_toggler--dark { + background-color: #141414; +} +.theme_toggler--purple { + background: #460eaf; } </style> diff --git a/src/components/downloads/QueueItem.vue b/src/components/downloads/QueueItem.vue index dab5e35..397aa42 100644 --- a/src/components/downloads/QueueItem.vue +++ b/src/components/downloads/QueueItem.vue @@ -189,66 +189,55 @@ export default { } </script> -<style lang="scss"> +<style> .download-object { padding-bottom: 8px; - - .download-info { - display: flex; - align-items: center; - - .coverart { - height: 75px; - width: 75px; - flex: 0 0 75px; - overflow: hidden; - } - - .coverart .tag { - position: absolute; - bottom: 0px; - right: 0px; - } - - .download-line { - display: block; - - .explicit-icon { - vertical-align: bottom; - } - } - - .download-slim-separator { - display: none; - } - } - - .download-info-data { - flex: 1 50%; - margin-left: 8px; - overflow: hidden; - } - - .download-info-status { - flex: 1 15%; - margin-left: 8px; - width: 80px; - } - - > .download-bar { - display: flex; - align-items: center; - height: 24px; - - > .queue_icon { - cursor: default; - margin-left: 8px; - } - - > .progress { - margin: 0; - } - } +} +.download-object .download-info { + display: flex; + align-items: center; +} +.download-object .download-info .coverart { + height: 75px; + width: 75px; + flex: 0 0 75px; + overflow: hidden; +} +.download-object .download-info .coverart .tag { + position: absolute; + bottom: 0px; + right: 0px; +} +.download-object .download-info .download-line { + display: block; +} +.download-object .download-info .download-line .explicit-icon { + vertical-align: bottom; +} +.download-object .download-info .download-slim-separator { + display: none; +} +.download-object .download-info-data { + flex: 1 50%; + margin-left: 8px; + overflow: hidden; +} +.download-object .download-info-status { + flex: 1 15%; + margin-left: 8px; + width: 80px; +} +.download-object > .download-bar { + display: flex; + align-items: center; + height: 24px; +} +.download-object > .download-bar > .queue_icon { + cursor: default; + margin-left: 8px; +} +.download-object > .download-bar > .progress { + margin: 0; } #download_list:not(.slim) .download-line { @@ -257,36 +246,27 @@ export default { text-overflow: ellipsis; } -#download_list.slim { - > .download-object { - .download-info { - display: block; - - .coverart { - display: none; - } - - .download-line { - display: inline-block; - } - - .download-slim-separator { - display: inline-block; - } - } - - .download-info-data { - width: calc(80% - 16px); - display: inline-block; - padding-left: 0; - } - - .download-info-status { - width: 20%; - display: inline-block; // ignored due to float - float: right; - } - } +#download_list.slim > .download-object .download-info { + display: block; +} +#download_list.slim > .download-object .download-info .coverart { + 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: 0; +} +#download_list.slim > .download-object .download-info-status { + width: 20%; + display: inline-block; + float: right; } .progress { @@ -298,47 +278,42 @@ export default { border-radius: 2px; margin: 0.5rem 0 1rem 0; overflow: hidden; - - .determinate { - position: absolute; - top: 0; - left: 0; - bottom: 0; - background-color: var(--primary-color); - transition: width 0.3s linear; - } - - .converting { - background-color: var(--secondary-color); - transition: none !important; - } - - .indeterminate { - background-color: var(--primary-color); - - &::before { - content: ''; - position: absolute; - background-color: inherit; - top: 0; - left: 0; - bottom: 0; - will-change: left, right; - animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; - } - - &::after { - content: ''; - position: absolute; - background-color: inherit; - top: 0; - left: 0; - bottom: 0; - will-change: left, right; - animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; - animation-delay: 1.15s; - } - } +} +.progress .determinate { + position: absolute; + top: 0; + left: 0; + bottom: 0; + background-color: var(--primary-color); + transition: width 0.3s linear; +} +.progress .converting { + background-color: var(--secondary-color); + transition: none !important; +} +.progress .indeterminate { + background-color: var(--primary-color); +} +.progress .indeterminate::before { + content: ''; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + 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; + animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation-delay: 1.15s; } @keyframes indeterminate { diff --git a/src/components/downloads/TheDownloadBar.vue b/src/components/downloads/TheDownloadBar.vue index e517442..72cb4c4 100644 --- a/src/components/downloads/TheDownloadBar.vue +++ b/src/components/downloads/TheDownloadBar.vue @@ -391,54 +391,46 @@ export default { } </script> -<style lang="scss" scoped> +<style scoped> #toggle_download_tab { width: 25px; height: 25px; - - &::before { - font-family: 'Material Icons'; - font-style: normal; - font-weight: 400; - content: 'chevron_right'; - } +} +#toggle_download_tab::before { + font-family: 'Material Icons'; + font-style: normal; + font-weight: 400; + content: 'chevron_right'; } -#download_tab_container.tab-hidden { - #toggle_download_tab { - &::before { - content: 'chevron_left'; - } - } - - &::after { - content: attr(data-label); - display: flex; - align-items: center; - text-transform: capitalize; - writing-mode: vertical-rl; - line-height: 2rem; - } +#download_tab_container.tab-hidden +#toggle_download_tab::before { + content: 'chevron_left'; +} +#download_tab_container.tab-hidden::after { + content: attr(data-label); + display: flex; + align-items: center; + text-transform: capitalize; + writing-mode: vertical-rl; + line-height: 2rem; } #download_list { height: calc(100% - 32px); padding-left: 28px; overflow-y: scroll; - - &::-webkit-scrollbar { - width: 10px; - } - - &::-webkit-scrollbar-track { - background: var(--panels-background); - } - - &::-webkit-scrollbar-thumb { - background: var(--panels-scroll); - border-radius: 4px; - width: 6px; - padding: 0px 2px; - } +} +#download_list::-webkit-scrollbar { + width: 10px; +} +#download_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; } </style> diff --git a/src/components/globals/BaseLoadingPlaceholder.vue b/src/components/globals/BaseLoadingPlaceholder.vue index 3f7ef31..e959789 100644 --- a/src/components/globals/BaseLoadingPlaceholder.vue +++ b/src/components/globals/BaseLoadingPlaceholder.vue @@ -15,38 +15,34 @@ </div> </template> -<style lang="scss" scoped> -// Source: https://loading.io/css/ +<style scoped> +/* Source: https://loading.io/css/ */ .lds-ring { display: inline-block; position: relative; width: 80px; height: 80px; - - 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; - - &:nth-child(1) { - animation-delay: -0.45s; - } - - &:nth-child(2) { - animation-delay: -0.3s; - } - - &:nth-child(3) { - animation-delay: -0.15s; - } - } +} +.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 { diff --git a/src/components/globals/CoverContainer.vue b/src/components/globals/CoverContainer.vue index 8f9e5a9..8877012 100644 --- a/src/components/globals/CoverContainer.vue +++ b/src/components/globals/CoverContainer.vue @@ -44,46 +44,38 @@ export default { } </script> -<style lang="scss" scoped> +<style scoped> .cover-container { width: 156px; height: 156px; margin-bottom: 10px; - - .coverart { - backface-visibility: hidden; - transition: 0.5s ease; - height: auto; - } - - .download_overlay { - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - transition: 0.5s ease; - opacity: 0; - min-width: 2rem; - height: 2.75rem; - text-align: center; - - i { - padding: 0.625rem; - } - - &:focus { - opacity: 1; - } - } - - &:hover { - .coverart { - opacity: 0.75; - } - - .download_overlay { - opacity: 1; - border: 0; - } - } +} +.cover-container .coverart { + backface-visibility: hidden; + transition: 0.5s ease; + height: auto; +} +.cover-container .download_overlay { + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transition: 0.5s ease; + opacity: 0; + min-width: 2rem; + height: 2.75rem; + text-align: center; +} +.cover-container .download_overlay i { + padding: 0.625rem; +} +.cover-container .download_overlay:focus { + opacity: 1; +} +.cover-container:hover .coverart { + opacity: 0.75; +} +.cover-container:hover .download_overlay { + opacity: 1; + border: 0; } </style> diff --git a/src/components/globals/TheContextMenu.vue b/src/components/globals/TheContextMenu.vue index f4f2545..de6adf0 100644 --- a/src/components/globals/TheContextMenu.vue +++ b/src/components/globals/TheContextMenu.vue @@ -243,7 +243,7 @@ export default { } </script> -<style lang="scss" scoped> +<style scoped> .context-menu { position: absolute; top: 0; @@ -265,18 +265,16 @@ export default { padding-right: 10px; color: var(--foreground); cursor: pointer; - - &:hover { - background: var(--table-highlight); - filter: brightness(150%); - } - - &__text { - text-transform: capitalize; - } +} +.menu-option:hover { + background: var(--table-highlight); + filter: brightness(150%); +} +.menu-option__text { + text-transform: capitalize; } -// Resetting buttons only for this component (because the style is scoped) +/* Resetting buttons only for this component (because the style is scoped) */ button { color: var(--primary-text); color: unset; @@ -295,19 +293,16 @@ button { text-transform: unset; cursor: unset; transition: unset; - - &:focus { - outline: none; - } - - &:active { - background-color: unset; - transform: unset; - } - - &:hover { - background: unset; - border: unset; - } +} +button:focus { + outline: none; +} +button:active { + background-color: unset; + transform: unset; +} +button:hover { + background: unset; + border: unset; } </style> diff --git a/src/components/globals/TheQualityModal.vue b/src/components/globals/TheQualityModal.vue index 5292098..c34f3fe 100644 --- a/src/components/globals/TheQualityModal.vue +++ b/src/components/globals/TheQualityModal.vue @@ -64,7 +64,7 @@ export default { } </script> -<style lang="scss"> +<style> .smallmodal { position: fixed; z-index: 1250; @@ -79,23 +79,25 @@ export default { .smallmodal-content { --modal-content-width: 95%; - background-color: transparent; margin: auto; width: var(--modal-content-width); position: relative; top: 50%; transform: translateY(-50%); - - @media only screen and (min-width: 601px) { +} +@media only screen and (min-width: 601px) { + .smallmodal-content { --modal-content-width: 85%; } - - @media only screen and (min-width: 993px) { +} +@media only screen and (min-width: 993px) { + .smallmodal-content { --modal-content-width: 70%; } } + .smallmodal-content button { width: 100%; margin-bottom: 8px; diff --git a/src/components/pages/About.vue b/src/components/pages/About.vue index b3a6aba..36a2543 100644 --- a/src/components/pages/About.vue +++ b/src/components/pages/About.vue @@ -184,10 +184,8 @@ export default defineComponent({ }) </script> -<style lang="scss" scoped> -li, -p, -a { +<style scoped> +li, p, a { letter-spacing: 0.4px; font-size: 20px; line-height: 1.2; @@ -212,60 +210,50 @@ i::v-deep svg { h2 { text-transform: capitalize; +} - &:not(.page_heading) { - font-size: 2rem; - border-bottom: 1px solid hsla(0, 0%, 20%, 0.25); - padding: { - top: 2rem; - bottom: 1rem; - } - } +h2:not(.page_heading) { + font-size: 2rem; + border-bottom: 1px solid rgba(51, 51, 51, 0.25); + padding-top: 2rem; + padding-bottom: 1rem; +} - .subheading { - display: block; - font-size: 0.5em; - margin-top: 0.5em; - font-weight: normal; - opacity: 0.8; - text-transform: none; - } +h2 .subheading { + display: block; + font-size: 0.5em; + margin-top: 0.5em; + font-weight: normal; + opacity: 0.8; + text-transform: none; } p { margin: 0 !important; } -ul { - li { - margin-bottom: 7px; - } - - h2 + & { - margin-top: 1rem; - } - - ul + & { - margin-top: 1.25rem; - } - - &.no-dots { - list-style-type: none; - } - - &:not(.no-dots) { - list-style-type: none; - - li { - position: relative; - - &::before { - content: '—'; - position: absolute; - left: -30px; - opacity: 0.25; - } - } - } +ul li { + margin-bottom: 7px; +} +h2 + ul { + margin-top: 1rem; +} +ul + ul { + margin-top: 1.25rem; +} +ul.no-dots { + list-style-type: none; +} +ul:not(.no-dots) { + list-style-type: none; +} +ul:not(.no-dots) li { + position: relative; +} +ul:not(.no-dots) li::before { + content: '—'; + position: absolute; + left: -30px; + opacity: 0.25; } </style> diff --git a/src/components/pages/Settings.vue b/src/components/pages/Settings.vue index ed8361e..5a6846e 100644 --- a/src/components/pages/Settings.vue +++ b/src/components/pages/Settings.vue @@ -1093,7 +1093,7 @@ export default { } </script> -<style lang="scss" scoped> +<style scoped> #logged_in_info { display: grid; align-items: center; @@ -1116,22 +1116,17 @@ export default { justify-content: center; cursor: pointer; width: 60px; - - &:not(:last-child) { - margin-right: 10px; - } - - &.locale-flag--current { - ::v-deep svg { - filter: brightness(1) !important; - } - } - - &::v-deep svg { - width: 40px !important; - height: 40px !important; - filter: brightness(0.5); - } +} +.locale-flag:not(:last-child) { + margin-right: 10px; +} +.locale-flag.locale-flag--current ::v-deep svg { + filter: brightness(1) !important; +} +.locale-flag::v-deep svg { + width: 40px !important; + height: 40px !important; + filter: brightness(0.5); } .settings-group { @@ -1145,56 +1140,46 @@ export default { padding-top: 2rem; padding-bottom: 2rem; font-size: 1.5rem; - - i.material-icons { - margin-right: 1rem; - } +} +.settings-group__header i.material-icons { + margin-right: 1rem; } .settings-container { display: flex; - - &__half { - width: 50%; - } - - &__third { - width: 33%; - - &--only-checkbox { - display: flex; - align-items: start; - flex-direction: column; - justify-content: center; - } - } - - &__half > *, - &__third > * { - margin-bottom: 1rem; - } +} +.settings-container__half { + width: 50%; +} +.settings-container__third { + width: 33%; +} +.settings-container__third--only-checkbox { + display: flex; + align-items: start; + flex-direction: column; + justify-content: center; +} +.settings-container__half > *, .settings-container__third > * { + margin-bottom: 1rem; } .with-checkbox { display: flex; align-items: center; - - [type='checkbox'] { - cursor: pointer; - } - - .checkbox-text { - margin-left: 10px; - cursor: pointer; - user-select: none; - } +} +.with-checkbox [type='checkbox'] { + cursor: pointer; +} +.with-checkbox .checkbox-text { + margin-left: 10px; + cursor: pointer; + user-select: none; } /* Input group */ -.input-group { - .input-group-text { - margin-bottom: 0.5rem; - } +.input-group .input-group-text{ + margin-bottom: 0.5rem; } .login-button { diff --git a/src/styles/css/tables.css b/src/styles/css/tables.css new file mode 100644 index 0000000..ef99aec --- /dev/null +++ b/src/styles/css/tables.css @@ -0,0 +1,140 @@ +.table { + width: 100%; + -webkit-border-horizontal-spacing: 0px; + -webkit-border-vertical-spacing: 0px; +} +.table tbody tr:not(.table__row-no-highlight):hover { + background: var(--table-highlight); + cursor: default; +} +.table tr { + transition: background-color 175ms ease-in-out; + background: var(--table-bg); +} +.table tr:nth-child(even) { + transition: background-color 175ms ease-in-out; + background: var(--table-zebra); +} +.table tr:not(:last-child) { + border-bottom: 1px solid var(--table-highlight); +} +.table td, .table th { + vertical-align: middle; +} +.table th .sortable { + user-select: none; +} +.table th .sort-asc::after, .table th .sort-desc::after { + padding-left: 3px; + line-height: 0.7em; + font-size: 0.7em; +} +.table th .sort-asc::after { + content: '\25b2'; +} +.table th .sort-desc::after { + content: '\25bc'; +} +.table td { + padding: 7px 10px; +} +.table td:first-child { + padding: 7px 10px 7px 20px; +} +.table td:last-child { + padding: 7px 20px 7px 10px; +} +.table td img { + vertical-align: middle; +} + +/* === Tracks Table === */ +.table--tracks { + border-collapse: collapse; +} +.table--tracks thead { + border-bottom: 2px solid var(--table-highlight); +} +.table--tracks tr:first-child td:first-child { + border-top-left-radius: 3px; +} +.table--tracks tr:first-child td:last-child { + border-top-right-radius: 3px; +} +.table--tracks tr:last-child td:first-child { + border-bottom-left-radius: 3px; +} +.table--tracks tr:last-child td:last-child { + border-bottom-right-radius: 3px; +} + +/* === Tracklist Table === */ +.table--tracklist thead { + border-bottom: 2px solid var(--table-highlight); + text-transform: capitalize; +} +.table--tracklist th { + padding: 7px 10px; + height: 45px; +} +.table--tracklist th:first-child { + padding: 7px 10px 7px 20px; +} +.table--tracklist th:last-child { + padding: 7px 20px 7px 10px; +} +.table--tracklist td { + height: 35px; +} + +/* === Charts Table === */ +.table--charts td { + height: 35px; +} + +.table .table__icon { + box-sizing: content-box; + width: 32px; +} +.table .table__icon--big { + width: 48px; + text-align: center; +} +.table .table__cell--x-small { + width: 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-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; +} + +.table--tracklist .clickable:hover, +.table--charts .clickable:hover { + text-decoration: underline; +} diff --git a/src/styles/scss/tables.scss b/src/styles/scss/tables.scss deleted file mode 100644 index 6a3408d..0000000 --- a/src/styles/scss/tables.scss +++ /dev/null @@ -1,206 +0,0 @@ -$vertical-separator: 7px; -$table-border-radius: 3px; - -.table { - width: 100%; - -webkit-border-horizontal-spacing: 0px; - -webkit-border-vertical-spacing: 0px; - - tbody { - tr:not(.table__row-no-highlight):hover { - background: var(--table-highlight); - cursor: default; - } - } - - tr { - transition: background-color 175ms ease-in-out; - background: var(--table-bg); - - &:nth-child(even) { - transition: background-color 175ms ease-in-out; - background: var(--table-zebra); - } - - &:not(:last-child) { - border-bottom: 1px solid var(--table-highlight); - } - } - - td, - th { - vertical-align: middle; - } - - th { - .sortable { - user-select: none; - } - - .sort-asc, - .sort-desc { - &::after { - padding-left: 3px; - line-height: 0.7em; - font-size: 0.7em; - } - } - - .sort-asc::after { - content: '\25b2'; - } - - .sort-desc::after { - content: '\25bc'; - } - } - - td { - padding: $vertical-separator 10px; - - &:first-child { - padding: $vertical-separator 10px $vertical-separator 20px; - } - - &:last-child { - padding: $vertical-separator 20px $vertical-separator 10px; - } - - img { - vertical-align: middle; - } - } - - /* === Tracks Table === */ - &--tracks { - border-collapse: collapse; - - thead { - border-bottom: 2px solid var(--table-highlight); - } - - tr { - &:first-child { - td { - &:first-child { - border-top-left-radius: $table-border-radius; - } - - &:last-child { - border-top-right-radius: $table-border-radius; - } - } - } - - &:last-child { - td { - &:first-child { - border-bottom-left-radius: $table-border-radius; - } - - &:last-child { - border-bottom-right-radius: $table-border-radius; - } - } - } - } - } - - /* === Tracklist Table === */ - &--tracklist { - thead { - border-bottom: 2px solid var(--table-highlight); - text-transform: capitalize; - } - - th { - padding: $vertical-separator 10px; - height: 45px; - - &:first-child { - padding: $vertical-separator 10px $vertical-separator 20px; - } - - &:last-child { - padding: $vertical-separator 20px $vertical-separator 10px; - } - } - - td { - height: 35px; - } - } - - /* === Charts Table === */ - &--charts { - td { - height: 35px; - } - } - - .table__icon { - box-sizing: content-box; - width: 32px; - - &--big { - width: 48px; - text-align: center; - } - } - - .table__cell { - &--x-small { - width: 0.32%; - } - - &--small { - width: 3.2%; - } - - &--medium { - width: 28.7%; - } - - &--large { - width: 50%; - } - - &--left { - text-align: left; - } - - &--center { - text-align: center; - } - - &--right { - text-align: right; - } - } - - .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 { - width: 32px; - height: 32px; - } - - > td > a > img { - width: 56px; - height: 56px; - } -} - -.table--tracklist .clickable:hover, -.table--charts .clickable:hover { - text-decoration: underline; -}