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

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

View File

@ -1,6 +1,6 @@
{ {
"name": "deemix-webui", "name": "deemix-webui",
"version": "1.1.2", "version": "1.1.3",
"homepage": "https://codeberg.org/RemixDev/deemix-webui/src/master/README.md", "homepage": "https://codeberg.org/RemixDev/deemix-webui/src/master/README.md",
"repository": { "repository": {
"type": "git", "type": "git",

File diff suppressed because one or more lines are too long

View File

@ -7,6 +7,7 @@ window.vol = {
import '@/styles/scss/style.scss' import '@/styles/scss/style.scss'
import '@/styles/css/components.css' import '@/styles/css/components.css'
import '@/styles/css/toasts.css'
import App from '@/App.vue' import App from '@/App.vue'
import i18n from '@/plugins/i18n' import i18n from '@/plugins/i18n'

View File

@ -44,6 +44,10 @@ $searchbar-height: 45px;
i { i {
font-size: $icon-dimension; font-size: $icon-dimension;
color: var(--foreground); color: var(--foreground);
&::selection {
background: none;
}
} }
} }

View File

@ -129,6 +129,58 @@
} }
} }
} }
.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;
}
}
}
</style> </style>
<script> <script>

View File

@ -1,16 +1,23 @@
<template> <template>
<div <div
id="download_tab_container" id="download_tab_container"
class="tab_hidden" class="block tab_hidden bg-panels-bg text-panels-text"
@transitionend="$refs.container.style.transition = ''" @transitionend="$refs.container.style.transition = ''"
ref="container" ref="container"
:data-label="$t('downloads')" :data-label="$t('downloads')"
aria-label="downloads" aria-label="downloads"
> >
<div id="download_tab_drag_handler" @mousedown.prevent="startDrag" ref="dragHandler"></div> <!-- Drag Handler -->
<div
v-show="isExpanded"
class="absolute w-4 h-full bg-grayscale-200"
@mousedown.prevent="startDrag"
style="cursor: ew-resize"
></div>
<i <i
id="toggle_download_tab" id="toggle_download_tab"
class="material-icons download_bar_icon" class="m-1 text-2xl cursor-pointer material-icons"
@click.prevent="toggleDownloadTab" @click.prevent="toggleDownloadTab"
ref="toggler" ref="toggler"
:title="$t('globals.toggle_download_tab_hint')" :title="$t('globals.toggle_download_tab_hint')"
@ -18,20 +25,25 @@
<div id="queue_buttons"> <div id="queue_buttons">
<i <i
v-if="clientMode" v-if="clientMode"
class="material-icons download_bar_icon" class="m-1 text-2xl cursor-pointer material-icons"
:title="$t('globals.open_downloads_folder')" :title="$t('globals.open_downloads_folder')"
@click="openDownloadsFolder" @click="openDownloadsFolder"
> >
folder_open folder_open
</i> </i>
<i class="material-icons download_bar_icon" @click="cleanQueue" :title="$t('globals.clean_queue_hint')"> <i class="m-1 text-2xl cursor-pointer material-icons" @click="cleanQueue" :title="$t('globals.clean_queue_hint')">
clear_all clear_all
</i> </i>
<i class="material-icons download_bar_icon" @click="cancelQueue" :title="$t('globals.cancel_queue_hint')"> <i
class="m-1 text-2xl cursor-pointer material-icons"
@click="cancelQueue"
:title="$t('globals.cancel_queue_hint')"
>
delete_sweep delete_sweep
</i> </i>
</div> </div>
<div id="download_list" ref="list">
<div v-show="isExpanded" id="download_list" class="w-full pr-2" ref="list">
<QueueItem <QueueItem
v-for="item in queueList" v-for="item in queueList"
:queue-item="item" :queue-item="item"
@ -47,6 +59,27 @@
#download_tab_container { #download_tab_container {
height: 100vh; height: 100vh;
} }
#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;
}
}
</style> </style>
<script> <script>
@ -68,8 +101,8 @@ export default {
cachedTabWidth: parseInt(localStorage.getItem('downloadTabWidth')) || 300, cachedTabWidth: parseInt(localStorage.getItem('downloadTabWidth')) || 300,
queue: [], queue: [],
queueList: {}, queueList: {},
queueComplete: [] queueComplete: [],
// clientMode: window.clientMode isExpanded: localStorage.getItem('downloadTabOpen') === 'true'
} }
}, },
computed: { computed: {
@ -273,12 +306,13 @@ export default {
// Toggle returns a Boolean based on the action it performed // Toggle returns a Boolean based on the action it performed
let isHidden = this.$refs.container.classList.toggle('tab_hidden') let isHidden = this.$refs.container.classList.toggle('tab_hidden')
this.isExpanded = !isHidden
if (!isHidden) { if (this.isExpanded) {
this.setTabWidth(this.cachedTabWidth) this.setTabWidth(this.cachedTabWidth)
} }
localStorage.setItem('downloadTabOpen', !isHidden) localStorage.setItem('downloadTabOpen', this.isExpanded)
}, },
cleanQueue() { cleanQueue() {
socket.emit('removeFinishedDownloads') socket.emit('removeFinishedDownloads')

View File

@ -9,6 +9,51 @@
</div> </div>
</div> </div>
</template> </template>
<style lang="scss" 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;
}
}
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<script> <script>
export default { export default {
props: { props: {

View File

@ -1,6 +1,7 @@
<template> <template>
<div id="about_tab" class="main_tabcontent" ref="root"> <div id="about_tab" ref="root">
<h2 class="page_heading">{{ $t('sidebar.about') }}</h2> <h1 class="mb-8 text-5xl capitalize">{{ $t('sidebar.about') }}</h1>
<ul> <ul>
<li> <li>
{{ $t('about.updates.currentVersion') }}: {{ $t('about.updates.currentVersion') }}:

View File

@ -1,5 +1,5 @@
<template> <template>
<div id="artist_tab" class="main_tabcontent image_header" ref="root"> <div id="artist_tab" class="relative image_header" ref="root">
<header <header
class="inline-flex" class="inline-flex"
:style="{ :style="{
@ -7,18 +7,19 @@
'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\'' + image + '\')' 'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\'' + image + '\')'
}" }"
> >
<h1>{{ title }}</h1> <h1 class="m-0">{{ title }}</h1>
<div role="button" aria-label="download" @click.stop="addToQueue" :data-link="link" class="fab right"> <div role="button" aria-label="download" @click.stop="addToQueue" :data-link="link" class="fab right">
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i> <i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div> </div>
</header> </header>
<div class="tab"> <div class="my-4">
<button <button
v-for="(item, name) in body" v-for="(item, name) in body"
:key="name" :key="name"
class="btn btn-primary" class="mr-2 btn bg-background-main"
:class="{ active: name === currentTab }" :class="{ 'btn-primary': name === currentTab }"
:href="'#artist_' + name" :href="'#artist_' + name"
@click="changeTab(name)" @click="changeTab(name)"
> >
@ -70,12 +71,6 @@
</div> </div>
</template> </template>
<style lang="scss" scoped>
.main_tabcontent {
position: relative;
}
</style>
<script> <script>
import { isEmpty, orderBy } from 'lodash-es' import { isEmpty, orderBy } from 'lodash-es'
import { socket } from '@/utils/socket' import { socket } from '@/utils/socket'

View File

@ -1,40 +1,25 @@
<template> <template>
<div id="charts_tab" class="main_tabcontent" ref="root"> <div>
<h2 class="page_heading">{{ $t('charts.title') }}</h2> <h1 class="mb-8 text-5xl">{{ $t('charts.title') }}</h1>
<div v-if="country === ''" id="charts_selection">
<div class="release_grid charts_grid">
<template v-for="release in countries">
<div
role="button"
:aria-label="release.title"
v-if="release.title === 'Worldwide'"
class="release clickable"
@click="getTrackList"
:data-title="release.title"
:data-id="release.id"
:key="release.id"
>
<img class="rounded coverart" :src="release.picture_medium" />
</div>
</template>
<template v-for="release in countries"> <div v-if="country === ''">
<div class="release_grid charts_grid">
<div <div
v-for="release in countries"
role="button" role="button"
:aria-label="release.title" :aria-label="release.title"
v-if="release.title !== 'Worldwide'" class="w-40 h-40 release clickable"
class="release clickable"
@click="getTrackList" @click="getTrackList"
:data-title="release.title" :data-title="release.title"
:data-id="release.id" :data-id="release.id"
:key="release.id" :key="release.id"
> >
<img class="rounded coverart" :src="release.picture_medium" /> <img class="w-full rounded coverart" :src="release.picture_medium" />
</div>
</template>
</div> </div>
</div> </div>
<div v-else id="charts_table"> </div>
<div v-else>
<button class="btn btn-primary" @click="onChangeCountry">{{ $t('charts.changeCountry') }}</button> <button class="btn btn-primary" @click="onChangeCountry">{{ $t('charts.changeCountry') }}</button>
<button class="btn btn-primary" @click.stop="addToQueue" :data-link="'https://www.deezer.com/playlist/' + id"> <button class="btn btn-primary" @click.stop="addToQueue" :data-link="'https://www.deezer.com/playlist/' + id">
{{ $t('charts.download') }} {{ $t('charts.download') }}
@ -118,13 +103,32 @@ export default {
chart: [] chart: []
} }
}, },
computed: {
worldwideRelease() {
let worldwideRelease = this.countries.filter(country => {
return country.title === 'Worldwide'
})
return worldwideRelease[0]
}
},
async created() { async created() {
socket.on('setChartTracks', this.setTracklist) socket.on('setChartTracks', this.setTracklist)
this.$on('hook:destroyed', () => { this.$on('hook:destroyed', () => {
socket.off('setChartTracks') socket.off('setChartTracks')
}) })
const chartsData = await getChartsData() let chartsData = await getChartsData()
let worldwideChart
chartsData = chartsData.filter(item => {
if (item.title === 'Worldwide') {
worldwideChart = item
}
return item.title !== 'Worldwide'
})
chartsData.unshift(worldwideChart)
this.initCharts(chartsData) this.initCharts(chartsData)
}, },
@ -183,6 +187,3 @@ export default {
} }
} }
</script> </script>
<style>
</style>

View File

@ -1,6 +1,6 @@
<template> <template>
<div id="errors_tab" class="main_tabcontent"> <div>
<h1>{{ $t('errors.title', { name: title }) }}</h1> <h1 class="mb-8 text-5xl">{{ $t('errors.title', { name: title }) }}</h1>
<table class="table table--tracklist"> <table class="table table--tracklist">
<tr> <tr>

View File

@ -1,20 +1,20 @@
<template> <template>
<div class="main_tabcontent"> <div>
<h2 class="page_heading"> <h1 class="mb-8 text-5xl">
{{ $t('favorites.title') }} {{ $t('favorites.title') }}
<div <div
@click="reloadTabs" @click="reloadTabs"
class="clickable reload-button reload-button--inline" class="inline-block clickable reload-button"
ref="reloadButton" ref="reloadButton"
role="button" role="button"
aria-label="reload" aria-label="reload"
> >
<i class="material-icons">sync</i> <i class="material-icons">sync</i>
</div> </div>
</h2> </h1>
<div class="section-tabs"> <ul class="section-tabs">
<div <li
class="section-tabs__tab favorites_tablinks" class="section-tabs__tab favorites_tablinks"
:class="{ active: activeTab === tab }" :class="{ active: activeTab === tab }"
@click="activeTab = tab" @click="activeTab = tab"
@ -22,8 +22,8 @@
:key="tab" :key="tab"
> >
{{ $tc(`globals.listTabs.${tab}`, 2) }} {{ $tc(`globals.listTabs.${tab}`, 2) }}
</div> </li>
</div> </ul>
<button class="btn btn-primary" v-if="!activeTabEmpty" style="margin-bottom: 2rem" @click="downloadAllOfType"> <button class="btn btn-primary" v-if="!activeTabEmpty" style="margin-bottom: 2rem" @click="downloadAllOfType">
{{ $t('globals.downloadAll', { thing: $tc(`globals.listTabs.${activeTab}`, 2) }) }} {{ $t('globals.downloadAll', { thing: $tc(`globals.listTabs.${activeTab}`, 2) }) }}
@ -228,6 +228,14 @@
display: block; display: block;
} }
} }
.reload-button {
&.spin {
i {
animation: spin 500ms infinite ease-out reverse;
}
}
}
</style> </style>
<script> <script>

View File

@ -1,16 +1,16 @@
<template> <template>
<div id="home_tab" class="main_tabcontent" ref="root"> <div id="home_tab">
<h2 class="page_heading">{{ $t('globals.welcome') }}</h2> <h1 class="mb-8 text-5xl">{{ $t('globals.welcome') }}</h1>
<section class="home_section" ref="notLogged" v-if="!isLoggedIn"> <section class="py-6 border-0 border-t border-solid border-grayscale-500" ref="notLogged" v-if="!isLoggedIn">
<p id="home_not_logged_text">{{ $t('home.needTologin') }}</p> <p id="home_not_logged_text" class="mb-4">{{ $t('home.needTologin') }}</p>
<router-link tag="button" name="button" :to="{ name: 'Settings' }" class="btn btn-primary"> <router-link tag="button" name="button" :to="{ name: 'Settings' }" class="btn btn-primary">
{{ $t('home.openSettings') }} {{ $t('home.openSettings') }}
</router-link> </router-link>
</section> </section>
<section v-if="playlists.length" class="home_section"> <section v-if="playlists.length" class="py-6 border-0 border-t border-solid border-grayscale-500">
<h3 class="section_heading">{{ $t('home.sections.popularPlaylists') }}</h3> <h2 class="mb-6 text-3xl">{{ $t('home.sections.popularPlaylists') }}</h2>
<div class="release_grid"> <div class="release_grid">
<router-link <router-link
tag="div" tag="div"
@ -47,8 +47,8 @@
</div> </div>
</section> </section>
<section v-if="albums.length" class="home_section"> <section v-if="albums.length" class="py-6 border-0 border-t border-solid border-grayscale-500">
<h3 class="section_heading">{{ $t('home.sections.popularAlbums') }}</h3> <h2 class="mb-6 text-3xl">{{ $t('home.sections.popularAlbums') }}</h2>
<div class="release_grid"> <div class="release_grid">
<router-link <router-link
tag="div" tag="div"

View File

@ -1,6 +1,6 @@
<template> <template>
<div id="analyzer_tab" class="main_tabcontent image_header" ref="root"> <div id="analyzer_tab" class="image_header" ref="root">
<h2 class="page_heading page_heading--capitalize">{{ $t('sidebar.linkAnalyzer') }}</h2> <h1 class="mb-8 text-5xl capitalize">{{ $t('sidebar.linkAnalyzer') }}</h1>
<div v-if="link === ''"> <div v-if="link === ''">
<p> <p>
@ -24,8 +24,8 @@
}" }"
> >
<div> <div>
<h1>{{ title }}</h1> <h1 class="m-0">{{ title }}</h1>
<h2 v-if="type === 'track'"> <h2 v-if="type === 'track'" class="m-0 mb-3 text-lg">
<i18n path="globals.by" tag="span"> <i18n path="globals.by" tag="span">
<router-link <router-link
tag="span" tag="span"
@ -48,7 +48,7 @@
</router-link> </router-link>
</i18n> </i18n>
</h2> </h2>
<h2 v-else-if="type === 'album'"> <h2 v-else-if="type === 'album'" class="m-0 mb-3 text-lg">
<i18n path="globals.by" tag="span"> <i18n path="globals.by" tag="span">
<router-link <router-link
tag="span" tag="span"

View File

@ -1,5 +1,5 @@
<template> <template>
<div id="search_tab" class="main_tabcontent" ref="root"> <div id="search_tab" ref="root">
<div v-show="!showSearchTab"> <div v-show="!showSearchTab">
<h2>{{ $t('search.startSearching') }}</h2> <h2>{{ $t('search.startSearching') }}</h2>
<p>{{ $t('search.description') }}</p> <p>{{ $t('search.description') }}</p>

View File

@ -1,6 +1,6 @@
<template> <template>
<div id="settings_tab" class="main_tabcontent fixed_footer" ref="root"> <div id="settings_tab" class="fixed_footer" ref="root">
<h2 class="page_heading">{{ $t('settings.title') }}</h2> <h1 class="mb-8 text-5xl">{{ $t('settings.title') }}</h1>
<div id="logged_in_info" v-if="isLoggedIn" ref="loggedInInfo"> <div id="logged_in_info" v-if="isLoggedIn" ref="loggedInInfo">
<img id="settings_picture" :src="pictureHref" alt="Profile Picture" ref="userpicture" class="circle" /> <img id="settings_picture" :src="pictureHref" alt="Profile Picture" ref="userpicture" class="circle" />
@ -31,7 +31,7 @@
ref="loginInput" ref="loginInput"
placeholder="ARL" placeholder="ARL"
/> />
<button id="settings_btn_copyArl" class="btn btn-primary btn-only-icon ml-2" @click="copyARLtoClipboard"> <button id="settings_btn_copyArl" class="ml-2 btn btn-primary btn-only-icon" @click="copyARLtoClipboard">
<i class="material-icons">assignment</i> <i class="material-icons">assignment</i>
</button> </button>
</div> </div>
@ -83,7 +83,7 @@
<button <button
id="select_downloads_folder" id="select_downloads_folder"
v-if="clientMode" v-if="clientMode"
class="btn btn-primary btn-only-icon ml-2" class="ml-2 btn btn-primary btn-only-icon"
@click="selectDownloadFolder" @click="selectDownloadFolder"
> >
<i class="material-icons">folder</i> <i class="material-icons">folder</i>
@ -618,7 +618,7 @@
</div> </div>
<footer> <footer>
<button class="btn btn-primary mr-2" @click="resetSettings">{{ $t('settings.reset') }}</button> <button class="mr-2 btn btn-primary" @click="resetSettings">{{ $t('settings.reset') }}</button>
<button class="btn btn-primary" @click="saveSettings">{{ $t('settings.save') }}</button> <button class="btn btn-primary" @click="saveSettings">{{ $t('settings.save') }}</button>
</footer> </footer>
</div> </div>

View File

@ -1,16 +1,16 @@
<template> <template>
<div class="main_tabcontent fixed_footer image_header" ref="root"> <div class="relative fixed_footer image_header" ref="root">
<header <header
:style="{ :style="{
'background-image': 'background-image':
'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\'' + image + '\')' 'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\'' + image + '\')'
}" }"
> >
<h1 class="inline-flex"> <h1 class="inline-flex m-0 text-5xl">
{{ title }} <i v-if="explicit" class="material-icons explicit_icon explicit_icon--right">explicit</i> {{ title }} <i v-if="explicit" class="material-icons explicit_icon explicit_icon--right">explicit</i>
</h1> </h1>
<h2> <h2 class="m-0 mb-3 text-lg">
<p v-if="metadata">{{ metadata }}</p> <p v-if="metadata">{{ metadata }}</p>
<p v-if="release_date">{{ release_date }}</p> <p v-if="release_date">{{ release_date }}</p>
</h2> </h2>
@ -150,12 +150,6 @@
</div> </div>
</template> </template>
<style lang="scss" scoped>
.main_tabcontent {
position: relative;
}
</style>
<script> <script>
import { isEmpty } from 'lodash-es' import { isEmpty } from 'lodash-es'
import { socket } from '@/utils/socket' import { socket } from '@/utils/socket'

View File

@ -1,6 +1,7 @@
@layer components { @layer components {
/* Button */
.btn { .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; font-family: inherit;
transition: transform 50ms ease-in-out; transition: transform 50ms ease-in-out;
@ -11,11 +12,11 @@
} }
.btn[disabled] { .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 { .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; min-width: 24px;
} }
@ -27,4 +28,22 @@
.btn-primary:hover { .btn-primary:hover {
@apply bg-blue-600 border-foreground; @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;
}
} }

View File

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

View File

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

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;
}
}
}

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 { .image_header {
header { header {
@apply bg-cover pt-56 px-6 pb-2 rounded-t-lg;
background-position: 0% 35%; 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;
}
} }
} }

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 { @keyframes spin {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);

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);
}

View File

@ -37,6 +37,16 @@ button,
-webkit-appearance: 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-inner-spin-button,
[type='number']::-webkit-outer-spin-button { [type='number']::-webkit-outer-spin-button {
height: auto; height: auto;
@ -46,3 +56,10 @@ button,
[role='button'] { [role='button'] {
cursor: pointer; cursor: pointer;
} }
*,
::before,
::after {
border-width: 0;
border-style: solid;
}

View File

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

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);
}
}

View File

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

View File

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

View File

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

View File

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

View File

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

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;
}

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 { .release {
display: inline-block; display: inline-block;
width: 156px; width: 156px;
@ -27,24 +8,3 @@
margin-bottom: 10px; 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);
}
}
}

View File

@ -37,7 +37,8 @@ module.exports = {
900: 'hsl(0, 0%, 90%)', 900: 'hsl(0, 0%, 90%)',
930: 'hsl(0, 0%, 93%)' // Remove maybe 930: 'hsl(0, 0%, 93%)' // Remove maybe
}, },
primary: 'var(--primary-color)', // primary: 'var(--primary-color)',
primary: 'hsl(210, 100%, 52%)',
background: { background: {
main: 'var(--main-background)', main: 'var(--main-background)',
secondary: 'var(--secondary-background)' secondary: 'var(--secondary-background)'