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
parent
f600e8afad
commit
c1bde5357d
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "deemix-webui",
|
||||
"version": "1.1.2",
|
||||
"version": "1.1.3",
|
||||
"homepage": "https://codeberg.org/RemixDev/deemix-webui/src/master/README.md",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -7,6 +7,7 @@ window.vol = {
|
||||
|
||||
import '@/styles/scss/style.scss'
|
||||
import '@/styles/css/components.css'
|
||||
import '@/styles/css/toasts.css'
|
||||
|
||||
import App from '@/App.vue'
|
||||
import i18n from '@/plugins/i18n'
|
||||
|
||||
@ -44,6 +44,10 @@ $searchbar-height: 45px;
|
||||
i {
|
||||
font-size: $icon-dimension;
|
||||
color: var(--foreground);
|
||||
|
||||
&::selection {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,16 +1,23 @@
|
||||
<template>
|
||||
<div
|
||||
id="download_tab_container"
|
||||
class="tab_hidden"
|
||||
class="block tab_hidden bg-panels-bg text-panels-text"
|
||||
@transitionend="$refs.container.style.transition = ''"
|
||||
ref="container"
|
||||
:data-label="$t('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
|
||||
id="toggle_download_tab"
|
||||
class="material-icons download_bar_icon"
|
||||
class="m-1 text-2xl cursor-pointer material-icons"
|
||||
@click.prevent="toggleDownloadTab"
|
||||
ref="toggler"
|
||||
:title="$t('globals.toggle_download_tab_hint')"
|
||||
@ -18,20 +25,25 @@
|
||||
<div id="queue_buttons">
|
||||
<i
|
||||
v-if="clientMode"
|
||||
class="material-icons download_bar_icon"
|
||||
class="m-1 text-2xl cursor-pointer material-icons"
|
||||
:title="$t('globals.open_downloads_folder')"
|
||||
@click="openDownloadsFolder"
|
||||
>
|
||||
folder_open
|
||||
</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
|
||||
</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
|
||||
</i>
|
||||
</div>
|
||||
<div id="download_list" ref="list">
|
||||
|
||||
<div v-show="isExpanded" id="download_list" class="w-full pr-2" ref="list">
|
||||
<QueueItem
|
||||
v-for="item in queueList"
|
||||
:queue-item="item"
|
||||
@ -47,6 +59,27 @@
|
||||
#download_tab_container {
|
||||
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>
|
||||
|
||||
<script>
|
||||
@ -68,8 +101,8 @@ export default {
|
||||
cachedTabWidth: parseInt(localStorage.getItem('downloadTabWidth')) || 300,
|
||||
queue: [],
|
||||
queueList: {},
|
||||
queueComplete: []
|
||||
// clientMode: window.clientMode
|
||||
queueComplete: [],
|
||||
isExpanded: localStorage.getItem('downloadTabOpen') === 'true'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -273,12 +306,13 @@ export default {
|
||||
|
||||
// Toggle returns a Boolean based on the action it performed
|
||||
let isHidden = this.$refs.container.classList.toggle('tab_hidden')
|
||||
this.isExpanded = !isHidden
|
||||
|
||||
if (!isHidden) {
|
||||
if (this.isExpanded) {
|
||||
this.setTabWidth(this.cachedTabWidth)
|
||||
}
|
||||
|
||||
localStorage.setItem('downloadTabOpen', !isHidden)
|
||||
localStorage.setItem('downloadTabOpen', this.isExpanded)
|
||||
},
|
||||
cleanQueue() {
|
||||
socket.emit('removeFinishedDownloads')
|
||||
|
||||
@ -9,6 +9,51 @@
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
export default {
|
||||
props: {
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div id="about_tab" class="main_tabcontent" ref="root">
|
||||
<h2 class="page_heading">{{ $t('sidebar.about') }}</h2>
|
||||
<div id="about_tab" ref="root">
|
||||
<h1 class="mb-8 text-5xl capitalize">{{ $t('sidebar.about') }}</h1>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
{{ $t('about.updates.currentVersion') }}:
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div id="artist_tab" class="main_tabcontent image_header" ref="root">
|
||||
<div id="artist_tab" class="relative image_header" ref="root">
|
||||
<header
|
||||
class="inline-flex"
|
||||
:style="{
|
||||
@ -7,18 +7,19 @@
|
||||
'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">
|
||||
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="tab">
|
||||
<div class="my-4">
|
||||
<button
|
||||
v-for="(item, name) in body"
|
||||
:key="name"
|
||||
class="btn btn-primary"
|
||||
:class="{ active: name === currentTab }"
|
||||
class="mr-2 btn bg-background-main"
|
||||
:class="{ 'btn-primary': name === currentTab }"
|
||||
:href="'#artist_' + name"
|
||||
@click="changeTab(name)"
|
||||
>
|
||||
@ -70,12 +71,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main_tabcontent {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { isEmpty, orderBy } from 'lodash-es'
|
||||
import { socket } from '@/utils/socket'
|
||||
|
||||
@ -1,40 +1,25 @@
|
||||
<template>
|
||||
<div id="charts_tab" class="main_tabcontent" ref="root">
|
||||
<h2 class="page_heading">{{ $t('charts.title') }}</h2>
|
||||
<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>
|
||||
<div>
|
||||
<h1 class="mb-8 text-5xl">{{ $t('charts.title') }}</h1>
|
||||
|
||||
<template v-for="release in countries">
|
||||
<div v-if="country === ''">
|
||||
<div class="release_grid charts_grid">
|
||||
<div
|
||||
v-for="release in countries"
|
||||
role="button"
|
||||
:aria-label="release.title"
|
||||
v-if="release.title !== 'Worldwide'"
|
||||
class="release clickable"
|
||||
class="w-40 h-40 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>
|
||||
<img class="w-full rounded coverart" :src="release.picture_medium" />
|
||||
</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.stop="addToQueue" :data-link="'https://www.deezer.com/playlist/' + id">
|
||||
{{ $t('charts.download') }}
|
||||
@ -118,13 +103,32 @@ export default {
|
||||
chart: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
worldwideRelease() {
|
||||
let worldwideRelease = this.countries.filter(country => {
|
||||
return country.title === 'Worldwide'
|
||||
})
|
||||
|
||||
return worldwideRelease[0]
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
socket.on('setChartTracks', this.setTracklist)
|
||||
this.$on('hook:destroyed', () => {
|
||||
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)
|
||||
},
|
||||
@ -183,6 +187,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div id="errors_tab" class="main_tabcontent">
|
||||
<h1>{{ $t('errors.title', { name: title }) }}</h1>
|
||||
<div>
|
||||
<h1 class="mb-8 text-5xl">{{ $t('errors.title', { name: title }) }}</h1>
|
||||
|
||||
<table class="table table--tracklist">
|
||||
<tr>
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
<template>
|
||||
<div class="main_tabcontent">
|
||||
<h2 class="page_heading">
|
||||
<div>
|
||||
<h1 class="mb-8 text-5xl">
|
||||
{{ $t('favorites.title') }}
|
||||
<div
|
||||
@click="reloadTabs"
|
||||
class="clickable reload-button reload-button--inline"
|
||||
class="inline-block clickable reload-button"
|
||||
ref="reloadButton"
|
||||
role="button"
|
||||
aria-label="reload"
|
||||
>
|
||||
<i class="material-icons">sync</i>
|
||||
</div>
|
||||
</h2>
|
||||
</h1>
|
||||
|
||||
<div class="section-tabs">
|
||||
<div
|
||||
<ul class="section-tabs">
|
||||
<li
|
||||
class="section-tabs__tab favorites_tablinks"
|
||||
:class="{ active: activeTab === tab }"
|
||||
@click="activeTab = tab"
|
||||
@ -22,8 +22,8 @@
|
||||
:key="tab"
|
||||
>
|
||||
{{ $tc(`globals.listTabs.${tab}`, 2) }}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button class="btn btn-primary" v-if="!activeTabEmpty" style="margin-bottom: 2rem" @click="downloadAllOfType">
|
||||
{{ $t('globals.downloadAll', { thing: $tc(`globals.listTabs.${activeTab}`, 2) }) }}
|
||||
@ -228,6 +228,14 @@
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.reload-button {
|
||||
&.spin {
|
||||
i {
|
||||
animation: spin 500ms infinite ease-out reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<div id="home_tab" class="main_tabcontent" ref="root">
|
||||
<h2 class="page_heading">{{ $t('globals.welcome') }}</h2>
|
||||
<div id="home_tab">
|
||||
<h1 class="mb-8 text-5xl">{{ $t('globals.welcome') }}</h1>
|
||||
|
||||
<section class="home_section" ref="notLogged" v-if="!isLoggedIn">
|
||||
<p id="home_not_logged_text">{{ $t('home.needTologin') }}</p>
|
||||
<section class="py-6 border-0 border-t border-solid border-grayscale-500" ref="notLogged" v-if="!isLoggedIn">
|
||||
<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">
|
||||
{{ $t('home.openSettings') }}
|
||||
</router-link>
|
||||
</section>
|
||||
|
||||
<section v-if="playlists.length" class="home_section">
|
||||
<h3 class="section_heading">{{ $t('home.sections.popularPlaylists') }}</h3>
|
||||
<section v-if="playlists.length" class="py-6 border-0 border-t border-solid border-grayscale-500">
|
||||
<h2 class="mb-6 text-3xl">{{ $t('home.sections.popularPlaylists') }}</h2>
|
||||
<div class="release_grid">
|
||||
<router-link
|
||||
tag="div"
|
||||
@ -47,8 +47,8 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="albums.length" class="home_section">
|
||||
<h3 class="section_heading">{{ $t('home.sections.popularAlbums') }}</h3>
|
||||
<section v-if="albums.length" class="py-6 border-0 border-t border-solid border-grayscale-500">
|
||||
<h2 class="mb-6 text-3xl">{{ $t('home.sections.popularAlbums') }}</h2>
|
||||
<div class="release_grid">
|
||||
<router-link
|
||||
tag="div"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div id="analyzer_tab" class="main_tabcontent image_header" ref="root">
|
||||
<h2 class="page_heading page_heading--capitalize">{{ $t('sidebar.linkAnalyzer') }}</h2>
|
||||
<div id="analyzer_tab" class="image_header" ref="root">
|
||||
<h1 class="mb-8 text-5xl capitalize">{{ $t('sidebar.linkAnalyzer') }}</h1>
|
||||
|
||||
<div v-if="link === ''">
|
||||
<p>
|
||||
@ -24,8 +24,8 @@
|
||||
}"
|
||||
>
|
||||
<div>
|
||||
<h1>{{ title }}</h1>
|
||||
<h2 v-if="type === 'track'">
|
||||
<h1 class="m-0">{{ title }}</h1>
|
||||
<h2 v-if="type === 'track'" class="m-0 mb-3 text-lg">
|
||||
<i18n path="globals.by" tag="span">
|
||||
<router-link
|
||||
tag="span"
|
||||
@ -48,7 +48,7 @@
|
||||
</router-link>
|
||||
</i18n>
|
||||
</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">
|
||||
<router-link
|
||||
tag="span"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div id="search_tab" class="main_tabcontent" ref="root">
|
||||
<div id="search_tab" ref="root">
|
||||
<div v-show="!showSearchTab">
|
||||
<h2>{{ $t('search.startSearching') }}</h2>
|
||||
<p>{{ $t('search.description') }}</p>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div id="settings_tab" class="main_tabcontent fixed_footer" ref="root">
|
||||
<h2 class="page_heading">{{ $t('settings.title') }}</h2>
|
||||
<div id="settings_tab" class="fixed_footer" ref="root">
|
||||
<h1 class="mb-8 text-5xl">{{ $t('settings.title') }}</h1>
|
||||
|
||||
<div id="logged_in_info" v-if="isLoggedIn" ref="loggedInInfo">
|
||||
<img id="settings_picture" :src="pictureHref" alt="Profile Picture" ref="userpicture" class="circle" />
|
||||
@ -31,7 +31,7 @@
|
||||
ref="loginInput"
|
||||
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>
|
||||
</button>
|
||||
</div>
|
||||
@ -83,7 +83,7 @@
|
||||
<button
|
||||
id="select_downloads_folder"
|
||||
v-if="clientMode"
|
||||
class="btn btn-primary btn-only-icon ml-2"
|
||||
class="ml-2 btn btn-primary btn-only-icon"
|
||||
@click="selectDownloadFolder"
|
||||
>
|
||||
<i class="material-icons">folder</i>
|
||||
@ -618,7 +618,7 @@
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<div class="main_tabcontent fixed_footer image_header" ref="root">
|
||||
<div class="relative fixed_footer image_header" ref="root">
|
||||
<header
|
||||
:style="{
|
||||
'background-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>
|
||||
</h1>
|
||||
|
||||
<h2>
|
||||
<h2 class="m-0 mb-3 text-lg">
|
||||
<p v-if="metadata">{{ metadata }}</p>
|
||||
<p v-if="release_date">{{ release_date }}</p>
|
||||
</h2>
|
||||
@ -150,12 +150,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main_tabcontent {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { isEmpty } from 'lodash-es'
|
||||
import { socket } from '@/utils/socket'
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
@ -1,11 +1,3 @@
|
||||
#search {
|
||||
.search__icon {
|
||||
i {
|
||||
@include remove-selection-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#container {
|
||||
--container-width: 95%;
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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';
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
#about_tab {
|
||||
p {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 8px 0px;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 12px 0px;
|
||||
}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
.charts_grid {
|
||||
.release {
|
||||
.coverart {
|
||||
width: 156px;
|
||||
height: 156px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -1,11 +0,0 @@
|
||||
.reload-button {
|
||||
&.reload-button--inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.spin {
|
||||
i {
|
||||
animation: spin 500ms infinite ease-out reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -37,7 +37,8 @@ module.exports = {
|
||||
900: 'hsl(0, 0%, 90%)',
|
||||
930: 'hsl(0, 0%, 93%)' // Remove maybe
|
||||
},
|
||||
primary: 'var(--primary-color)',
|
||||
// primary: 'var(--primary-color)',
|
||||
primary: 'hsl(210, 100%, 52%)',
|
||||
background: {
|
||||
main: 'var(--main-background)',
|
||||
secondary: 'var(--secondary-background)'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user