evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

build: v1.1.2, chore: improved charts displaying by removing duplicated worldwide chart code; style: removed a lot of .scss files in favor off tailwind utilities; chore: removed some unused ids; style: improved feedback on section-tabs; chore: replaced css variable in primary color in tailwind config with the hsl color code

Browse Source
This commit is contained in:
Roberto Tonino
2020-10-14 22:18:13 +02:00
parent f600e8afad
commit c1bde5357d
35 changed files with 318 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/styles/css/components.css
View File

@@ -1,6 +1,7 @@
@layer components {
/* Button */
.btn {
@apply text-grayscale-900 relative border border-transparent border-solid rounded font-semibold text-sm py-0 px-2 h-8 uppercase;
@apply relative h-8 px-2 py-0 text-sm font-semibold uppercase border border-transparent border-solid rounded text-grayscale-900;
font-family: inherit;
transition: transform 50ms ease-in-out;
@@ -11,11 +12,11 @@
}
.btn[disabled] {
@apply bg-gray-600 text-gray-300 opacity-75 cursor-not-allowed;
@apply text-gray-300 bg-gray-600 opacity-75 cursor-not-allowed;
}
.btn-only-icon {
@apply w-12 py-0 px-1 flex justify-center items-center;
@apply flex items-center justify-center w-12 px-1 py-0;
min-width: 24px;
}
@@ -27,4 +28,22 @@
.btn-primary:hover {
@apply bg-blue-600 border-foreground;
}
/* Section tabs */
.section-tabs {
@apply flex mt-4 mb-6 list-none cursor-pointer;
}
.section-tabs__tab {
@apply flex-1 p-3 text-xl text-center capitalize border-t-4 rounded-b border-foreground bg-background-main;
}
.section-tabs__tab.active {
@apply text-primary border-primary bg-background-main;
}
.section-tabs__tab:hover {
@apply text-primary border-primary bg-background-secondary;
@apply bg-opacity-25;
}
}

18
src/styles/scss/_toasts.scss → src/styles/css/toasts.css
View File

@@ -1,26 +1,22 @@
.toast-icon {
display: inline-block;
margin-right: 8px;
@apply inline-block mr-2;
}
.circle-loader {
display: inline-block;
@apply inline-block w-4 h-4;
border: 2px solid var(--primary-color);
border-radius: 50%;
border-bottom: 2px solid var(--secondary-background);
width: 16px;
height: 16px;
animation: spin 1s linear infinite;
}
.toastify {
display: flex;
align-items: center;
@apply flex items-center;
box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(0, 0, 0, 0.3);
background: var(--toast-background);
color: var(--toast-text);
.circle-loader {
border-bottom-color: var(--toast-secondary);
}
}
.toastify .circle-loader {
border-bottom-color: var(--toast-secondary);
}

8
src/styles/scss/_middle-section.scss
View File

@@ -1,11 +1,3 @@
#search {
.search__icon {
i {
@include remove-selection-background;
}
}
}
#container {
--container-width: 95%;

51
src/styles/scss/_progressbar.scss
View File

@@ -1,51 +0,0 @@
.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;
.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;
}
}
}

15
src/styles/scss/_stackedTabs.scss
View File

@@ -1,18 +1,7 @@
// Make a component? But it would be only one HTML tag with a bunch of classes and a prop (the img src)...
.image_header {
header {
@apply bg-cover pt-56 px-6 pb-2 rounded-t-lg;
background-position: 0% 35%;
background-size: cover;
padding: 220px 24px 8px;
border-radius: 8px 8px 0px 0px;
h1,
h2 {
margin: 0px;
}
h2 {
font-size: 18px;
margin-bottom: 12px;
}
}
}

44
src/styles/scss/base/_animations.scss
View File

@@ -1,47 +1,3 @@
/* 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;
}
}
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* ====== */
@keyframes spin {
0% {
transform: rotate(0deg);

17
src/styles/scss/base/_functions.scss
View File

@@ -1,17 +0,0 @@
// https://css-tricks.com/using-custom-property-stacks-to-tame-the-cascade/
@function vars($stack...) {
$output: null;
$close: '';
$length: length($stack);
@each $var in $stack {
@if (str-index('#{$var}', '--') == 1) {
$var: 'var(#{$var}';
$close: '#{$close})';
}
$output: if($output, '#{$output}, #{$var}', $var);
}
@return unquote($output + $close);
}

17
src/styles/scss/base/_normalize.scss
View File

@@ -37,6 +37,16 @@ button,
-webkit-appearance: button;
}
input[type='text'],
input[type='password'],
input[type='number'],
input[type='search'],
input[type='checkbox'],
select {
-webkit-appearance: none;
appearance: none;
}
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
height: auto;
@@ -46,3 +56,10 @@ button,
[role='button'] {
cursor: pointer;
}
*,
::before,
::after {
border-width: 0;
border-style: solid;
}

26
src/styles/scss/globals/_globals.scss
View File

@@ -2,8 +2,8 @@ input[type='text'],
input[type='password'],
input[type='number'],
input[type='search'] {
-webkit-appearance: none;
appearance: none;
// -webkit-appearance: none;
// appearance: none;
width: calc(100% - 16px);
border: 0px solid black;
line-height: 36px;
@@ -24,8 +24,8 @@ input[type='search']::-webkit-search-cancel-button {
}
input[type='checkbox'] {
-webkit-appearance: none;
appearance: none;
// -webkit-appearance: none;
// appearance: none;
background-color: none;
border: 2px solid gray;
opacity: 0.5;
@@ -49,8 +49,8 @@ input[type='checkbox'] {
}
select {
-webkit-appearance: none;
appearance: none;
// -webkit-appearance: none;
// appearance: none;
width: 100%;
border: 0px solid black;
line-height: 36px;
@@ -290,3 +290,17 @@ a {
[v-cloak] {
display: none;
}
.material-icons {
$sizes: 18, 24, 36, 48;
@each $size in $sizes {
&.md-#{$size} {
font-size: $size * 1px;
}
}
&.mirrored {
transform: scaleX(-1);
}
}

31
src/styles/scss/globals/_typography.scss
View File

@@ -1,31 +0,0 @@
.page_heading {
font-size: 2.5rem;
margin-bottom: 35px;
&--capitalize {
text-transform: capitalize;
}
&--uppercase {
text-transform: uppercase;
}
}
.section_heading {
font-size: 1.75rem;
margin-bottom: 25px;
}
.material-icons {
$sizes: 18, 24, 36, 48;
@each $size in $sizes {
&.md-#{$size} {
font-size: $size * 1px;
}
}
&.mirrored {
transform: scaleX(-1);
}
}

7
src/styles/scss/style.scss
View File

@@ -26,19 +26,12 @@ body {
@import './globals/globals';
@import './globals/tables';
@import './globals/typography';
@import './tabs/about-tab';
@import './tabs/charts-tab';
@import './tabs/download-tab';
@import './tabs/favorites-tab';
@import './tabs/home-tab';
@import './tabs/search-tab';
@import './tabs/settings-tab';
@import './tabs/tabs';
@import './middle-section';
@import './progressbar';
@import './sidebar';
@import './stackedTabs';
@import './toasts';

13
src/styles/scss/tabs/_about-tab.scss
View File

@@ -1,13 +0,0 @@
#about_tab {
p {
margin-bottom: 8px;
}
h3 {
margin: 8px 0px;
}
hr {
margin: 12px 0px;
}
}

8
src/styles/scss/tabs/_charts-tab.scss
View File

@@ -1,8 +0,0 @@
.charts_grid {
.release {
.coverart {
width: 156px;
height: 156px;
}
}
}

71
src/styles/scss/tabs/_download-tab.scss
View File

@@ -1,9 +1,12 @@
#download_tab_container {
height: 100%;
background-color: var(--panels-background);
color: var(--panels-text);
display: block;
flex-direction: column;
#queue_buttons {
position: absolute;
top: 0;
right: 0;
opacity: 1;
visibility: visible;
transition: all 250ms ease-in-out;
}
&.tab_hidden {
width: 32px;
@@ -12,26 +15,15 @@
margin-left: 4px;
&::before {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
content: 'chevron_left';
}
}
#download_tab_drag_handler {
display: none;
}
#queue_buttons {
opacity: 0;
visibility: hidden;
}
#download_list {
display: none;
}
&::after {
content: attr(data-label);
display: flex;
@@ -55,50 +47,3 @@
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;
&::-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_tab_container {
#queue_buttons {
position: absolute;
top: 0;
right: 0;
opacity: 1;
visibility: visible;
transition: all 250ms ease-in-out;
}
}
#download_tab_drag_handler {
width: 15px;
height: 100%;
position: absolute;
background-color: hsl(0, 0%, 20%);
cursor: ew-resize;
}

11
src/styles/scss/tabs/_favorites-tab.scss
View File

@@ -1,11 +0,0 @@
.reload-button {
&.reload-button--inline {
display: inline-block;
}
&.spin {
i {
animation: spin 500ms infinite ease-out reverse;
}
}
}

9
src/styles/scss/tabs/_home-tab.scss
View File

@@ -1,9 +0,0 @@
#home_not_logged_text {
margin-bottom: 15px;
}
.home_section {
border-top: 1px solid theme('colors.grayscale.500');
padding-top: 25px;
padding-bottom: 25px;
}

40
src/styles/scss/tabs/_tabs.scss
View File

@@ -1,22 +1,3 @@
.main_tabcontent {
h1 {
margin-bottom: 12px;
}
}
.tab {
margin: 16px 0px;
button {
background-color: var(--main-background);
color: var(--foreground);
&.active {
background-color: var(--primary-color);
}
}
}
.release {
display: inline-block;
width: 156px;
@@ -27,24 +8,3 @@
margin-bottom: 10px;
}
}
.section-tabs {
list-style-type: none;
display: flex;
margin: 16px 0 24px 0;
cursor: pointer;
&__tab {
flex: 1;
font-size: 1.2rem;
padding: 0.8em;
border-top: 3px solid var(--foreground);
text-align: center;
text-transform: capitalize;
&.active {
color: var(--primary-color);
border-top: 3px solid var(--primary-color);
}
}
}