danolo
/
deemix-webui
mirror of https://gitlab.com/RemixDev/deemix-webui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style: unified accent color and changed its name to primary-color; style: back button; style: added btn css component

This commit is contained in:
Roberto Tonino 2020-10-10 20:03:19 +02:00
parent 8d51cfa7f7
commit c1c585de3c
22 changed files with 156 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

2
src/app.js
View File

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

2
src/components/downloads/QueueItem.vue
View File

@ -171,7 +171,7 @@ export default {
},
barStyle() {
let width = 0
let backgroundColor = 'var(--accent-color)'
let backgroundColor = 'var(--primary-color)'
if (this.hasFails) {
// Orange

35
src/components/globals/BackButton.vue
View File

@ -1,34 +1,17 @@
<template>
<button class="top-back-button" @click="$router.back()">
<i class="material-icons mirrored md-36">forward</i>
<button
class="btn-primary border-transparent border-solid absolute flex items-center justify-center p-1 m-0 w-16 h-16 rounded-full"
@click="$router.back()"
>
<i class="material-icons mirrored text-4xl text-white">forward</i>
</button>
</template>
<style lang="scss" scoped>
$button-dimension: 4rem;
$button-separator: 10px;
<style scoped>
button {
top: 10px;
left: 10px;
.top-back-button {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: $button-separator;
left: $button-separator;
min-width: unset;
width: $button-dimension;
height: $button-dimension;
background: var(--secondary-background);
border-radius: 50%;
padding: 0.25rem;
margin: 0;
transition: background 200ms ease-in-out;
&:hover {
background: var(--accent-color);
}
}
</style>

4
src/components/globals/ConfirmModal.vue
View File

@ -4,8 +4,8 @@
<h1 style="flex: 1">{{ titleText }}</h1>
<div class="confirm-area">
<button class="no-hover"></button>
<button class="btn-red no-hover"></button>
<button class="no-hover">Text</button>
<button class="no-hover bg-red-600">Text</button>
</div>
</div>

31
src/components/globals/TheContextMenu.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="context-menu" v-show="menuOpen" ref="contextMenu" :style="{ top: yPos, left: xPos }">
<button
class="menu-option"
class="btn menu-option"
v-for="option of sortedOptions"
:key="option.label"
v-show="option.show"
@ -252,9 +252,9 @@ export default {
// Resetting buttons only for this component (because the style is scoped)
button {
color: var(--accent-text);
color: var(--primary-text);
color: unset;
background-color: var(--accent-color);
background-color: var(--primary-color);
background-color: unset;
min-width: unset;
position: unset;
@ -274,31 +274,6 @@ button {
outline: none;
}
&[disabled] {
background-color: unset;
color: unset;
opacity: unset;
}
&.selective {
background-color: unset;
color: unset;
&.active {
background-color: unset;
color: unset;
}
}
&.with_icon {
display: unset;
align-items: unset;
i {
margin-left: unset;
}
}
&:active {
background-color: unset;
transform: unset;

24
src/components/globals/TheQualityModal.vue
View File

@ -1,17 +1,23 @@
<template>
<div id="modal_quality" class="smallmodal" v-show="open" @click="tryToDownloadTrack($event)" ref="modal">
<div class="smallmodal-content">
<button class="quality-button" data-quality-value="9">{{ $t('globals.download', {thing: 'FLAC'}) }}</button>
<button class="quality-button" data-quality-value="3">{{ $t('globals.download', {thing: 'MP3 320kbps'}) }}</button>
<button class="quality-button" data-quality-value="1">{{ $t('globals.download', {thing: 'MP3 128kbps'}) }}</button>
<button class="quality-button" data-quality-value="15">
{{ $t('globals.download', {thing: '360 Reality Audio [HQ]'}) }}
<button class="btn btn-primary quality-button" data-quality-value="9">
{{ $t('globals.download', { thing: 'FLAC' }) }}
</button>
<button class="quality-button" data-quality-value="14">
{{ $t('globals.download', {thing: '360 Reality Audio [MQ]'}) }}
<button class="btn btn-primary quality-button" data-quality-value="3">
{{ $t('globals.download', { thing: 'MP3 320kbps' }) }}
</button>
<button class="quality-button" data-quality-value="13">
{{ $t('globals.download', {thing: '360 Reality Audio [LQ]'}) }}
<button class="btn btn-primary quality-button" data-quality-value="1">
{{ $t('globals.download', { thing: 'MP3 128kbps' }) }}
</button>
<button class="btn btn-primary quality-button" data-quality-value="15">
{{ $t('globals.download', { thing: '360 Reality Audio [HQ]' }) }}
</button>
<button class="btn btn-primary quality-button" data-quality-value="14">
{{ $t('globals.download', { thing: '360 Reality Audio [MQ]' }) }}
</button>
<button class="btn btn-primary quality-button" data-quality-value="13">
{{ $t('globals.download', { thing: '360 Reality Audio [LQ]' }) }}
</button>
</div>
</div>

2
src/components/pages/Artist.vue
View File

@ -19,7 +19,7 @@
<button
v-for="(item, name) in body"
:key="name"
class="selective"
class="btn btn-primary"
:class="{ active: name === currentTab }"
:href="'#artist_' + name"
@click="changeTab(name)"

4
src/components/pages/Charts.vue
View File

@ -35,8 +35,8 @@
</div>
</div>
<div v-else id="charts_table">
<button @click="onChangeCountry">{{ $t('charts.changeCountry') }}</button>
<button @click.stop="addToQueue" :data-link="'https://www.deezer.com/playlist/' + id">
<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') }}
</button>
<table class="table table--charts">

2
src/components/pages/Favorites.vue
View File

@ -25,7 +25,7 @@
</div>
</div>
<button 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) }) }}
</button>

19
src/components/pages/Settings.vue
View File

@ -9,7 +9,9 @@
<strong place="username" id="settings_username" ref="username">{{ user.name || 'not logged' }}</strong>
</i18n>
<button id="settings_btn_logout" @click="logout">{{ $t('settings.login.logout') }}</button>
<button class="btn btn-primary" id="settings_btn_logout" @click="logout">
{{ $t('settings.login.logout') }}
</button>
<select v-if="accounts.length" id="family_account" v-model="accountNum" @change="changeAccount">
<option v-for="(account, i) in accounts" :key="account" :value="i.toString()">{{ account.BLOG_NAME }}</option>
@ -29,7 +31,7 @@
ref="loginInput"
placeholder="ARL"
/>
<button id="settings_btn_copyArl" class="only_icon" @click="copyARLtoClipboard">
<button id="settings_btn_copyArl" class="btn btn-primary btn-only-icon ml-2" @click="copyARLtoClipboard">
<i class="material-icons">assignment</i>
</button>
</div>
@ -39,7 +41,7 @@
<a id="settings_btn_applogin" v-if="clientMode" href="#" @click="appLogin">
{{ $t('settings.login.login') }}
</a>
<button id="settings_btn_updateArl" @click="login" style="width: 100%">
<button class="btn btn-primary" id="settings_btn_updateArl" @click="login" style="width: 100%">
{{ $t('settings.login.arl.update') }}
</button>
</div>
@ -78,7 +80,12 @@
</h3>
<div class="inline-flex">
<input autocomplete="off" type="text" v-model="settings.downloadLocation" />
<button id="select_downloads_folder" v-if="clientMode" class="only_icon" @click="selectDownloadFolder">
<button
id="select_downloads_folder"
v-if="clientMode"
class="btn btn-primary btn-only-icon ml-2"
@click="selectDownloadFolder"
>
<i class="material-icons">folder</i>
</button>
</div>
@ -611,8 +618,8 @@
</div>
<footer>
<button @click="resetSettings">{{ $t('settings.reset') }}</button>
<button @click="saveSettings">{{ $t('settings.save') }}</button>
<button class="btn btn-primary mr-2" @click="resetSettings">{{ $t('settings.reset') }}</button>
<button class="btn btn-primary" @click="saveSettings">{{ $t('settings.save') }}</button>
</footer>
</div>
</template>

6
src/components/pages/Tracklist.vue
View File

@ -134,11 +134,11 @@
</table>
<span v-if="label" style="opacity: 0.4; margin-top: 8px; display: inline-block; font-size: 13px">{{ label }}</span>
<footer>
<button @click.stop="addToQueue" :data-link="link">
<button class="btn btn-primary mr-2" @click.stop="addToQueue" :data-link="link">
{{ `${$t('globals.download', { thing: $tc(`globals.listTabs.${type}`, 1) })}` }}
</button>
<button class="with_icon" @click.stop="addToQueue" :data-link="selectedLinks()">
{{ $t('tracklist.downloadSelection') }}<i class="material-icons">file_download</i>
<button class="btn btn-primary flex items-center" @click.stop="addToQueue" :data-link="selectedLinks()">
{{ $t('tracklist.downloadSelection') }}<i class="material-icons ml-2">file_download</i>
</button>
</footer>
</div>

30
src/styles/css/components.css Normal file
View File

@ -0,0 +1,30 @@
@layer components {
.btn {
@apply text-grayscale-900 relative border border-transparent border-solid rounded font-semibold text-sm py-0 px-2 h-8 uppercase;
font-family: inherit;
transition: transform 50ms ease-in-out;
}
.btn:active {
transform: scale(0.98);
}
.btn[disabled] {
@apply bg-gray-600 text-gray-300 opacity-75 cursor-not-allowed;
}
.btn-only-icon {
@apply w-12 py-0 px-1 flex justify-center items-center;
min-width: 24px;
}
.btn-primary {
@apply bg-primary;
}
.btn-primary:hover {
@apply bg-blue-600 border-foreground;
}
}

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

@ -13,7 +13,7 @@
top: 0;
left: 0;
bottom: 0;
background-color: var(--accent-color);
background-color: var(--primary-color);
transition: width 0.3s linear;
}
@ -23,7 +23,7 @@
}
.indeterminate {
background-color: var(--accent-color);
background-color: var(--primary-color);
&::before {
content: '';

4
src/styles/scss/_sidebar.scss
View File

@ -24,7 +24,7 @@ $sidebar-delay: 75ms;
color: inherit;
&.active {
background-color: var(--accent-color);
background-color: var(--primary-color);
}
&:not(#theme_selector) {
@ -37,7 +37,7 @@ $sidebar-delay: 75ms;
background-color: var(--sidebar-link-bg);
.side_icon {
color: var(--accent-color);
color: var(--primary-color);
}
}
}

2
src/styles/scss/_toasts.scss
View File

@ -5,7 +5,7 @@
.circle-loader {
display: inline-block;
border: 2px solid var(--accent-color);
border: 2px solid var(--primary-color);
border-radius: 50%;
border-bottom: 2px solid var(--secondary-background);
width: 16px;

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

@ -6,6 +6,10 @@
--toast-background: hsla(0, 0%, 0%, 0.85);
--toast-secondary: hsla(0, 0%, 100%, 0.15);
--toast-text: hsla(0, 0%, 100%, 0.85);
--primary-color: hsl(210, 100%, 52%); // will remove variable
--primary-text: theme('colors.grayscale.870'); // will remove variable
--secondary-color: hsl(46, 100%, 57%); // will remove variable
}
:root[data-theme='light'] {
@ -13,16 +17,13 @@
--secondary-background: theme('colors.grayscale.930');
--foreground: theme('colors.grayscale.200');
--foreground-inverted: theme('colors.grayscale.930');
--accent-color: hsl(210, 100%, 52%);
--secondary-color: hsl(46, 100%, 57%);
--panels-background: hsl(210, 3%, 14%);
--panels-text: theme('colors.white');
--accent-text: theme('colors.black');
--sidebar-link-bg: theme('colors.grayscale.240');
--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
--icon-hover: var(--accent-color);
--icon-hover: var(--primary-color);
--table-bg: theme('colors.white');
--table-zebra: theme('colors.grayscale.900');
@ -34,16 +35,13 @@
--secondary-background: theme('colors.grayscale.140');
--foreground: theme('colors.grayscale.930');
--foreground-inverted: theme('colors.grayscale.200');
--accent-color: hsl(210, 100%, 52%);
--secondary-color: hsl(46, 100%, 57%);
--panels-background: theme('colors.grayscale.100');
--panels-text: theme('colors.white');
--accent-text: theme('colors.grayscale.870');
--sidebar-link-bg: theme('colors.grayscale.240');
--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
--icon-hover: var(--accent-color);
--icon-hover: var(--primary-color);
--table-bg: theme('colors.grayscale.80');
--table-zebra: theme('colors.grayscale.140');
@ -55,11 +53,8 @@
--secondary-background: hsl(257, 61%, 10%);
--foreground: theme('colors.grayscale.930');
--foreground-inverted: hsl(258, 62%, 8%);
--accent-color: hsl(261, 85%, 37%);
--secondary-color: hsl(46, 100%, 57%);
--panels-background: hsl(257, 70%, 9%);
--panels-text: theme('colors.white');
--accent-text: theme('colors.grayscale.870');
--sidebar-link-bg: hsl(257, 70%, 17%);
--sidebar-link-bg-20: hsla(257, 70%, 17%, 0.2);

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

@ -28,3 +28,21 @@ table {
border-collapse: collapse;
border-spacing: 0;
}
/* Taken from Tailwind Preflight */
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
}
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
height: auto;
}
button,
[role='button'] {
cursor: pointer;
}

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

@ -37,14 +37,14 @@ input[type='checkbox'] {
&:checked {
opacity: 1;
background-color: var(--accent-color);
background-color: var(--primary-color);
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='3 3 18 18' width='18'%3E%3Cpath fill='%23ffffff' d='M 10,17 5,12 6.41,10.59 10,14.17 17.59,6.58 19,8 Z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
background-position: center center;
border: 0px solid var(--accent-color);
border: 0px solid var(--primary-color);
border-radius: 2px;
padding: 9px;
margin: 3px;
color: var(--accent-text);
color: var(--primary-text);
}
}
@ -70,86 +70,6 @@ p {
word-break: break-word;
}
button {
min-width: 64px;
color: var(--accent-text);
position: relative;
background-color: var(--accent-color);
border: 1px solid transparent;
border-radius: 4px;
font-family: inherit;
font-weight: 600;
font-size: 14px;
padding: 0px 8px;
margin-right: 8px;
height: 36px;
text-transform: uppercase;
cursor: pointer;
transition: transform 50ms ease-in-out, background-color 200ms ease;
&[disabled] {
background-color: var(--secondary-background);
color: var(--foreground);
opacity: 0.75;
}
&.btn-green {
background-color: green;
&:active {
background-color: green;
}
}
&.btn-red {
background-color: red;
&:active {
background-color: red;
}
}
&.selective {
background-color: var(--main-background);
color: var(--foreground);
&.active {
background-color: var(--accent-color);
color: var(--accent-text);
}
}
&.with_icon {
display: flex;
align-items: center;
i {
margin-left: 8px;
}
}
&.only_icon {
min-width: 24px;
width: 48px;
margin: 0px 0px 0px 8px;
padding: 0px 4px;
i {
padding: 6px 0px;
}
}
&:active {
background-color: var(--accent-color);
transform: scale(0.98);
}
&:not(.no-hover):hover {
background: none;
border: 1px solid var(--accent-color);
}
}
img {
&.rounded {
border-radius: 5px;
@ -233,8 +153,8 @@ a {
height: 56px;
border-radius: 28px;
display: inline-block;
background-color: var(--accent-color);
color: var(--accent-text);
background-color: var(--primary-color);
color: var(--primary-text);
cursor: pointer;
i {

2
src/styles/scss/tabs/_search-tab.scss
View File

@ -28,7 +28,7 @@
transition: color 200ms ease-in-out;
&:hover {
color: var(--accent-color);
color: var(--primary-color);
}
}
}

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

@ -12,7 +12,7 @@
color: var(--foreground);
&.active {
background-color: var(--accent-color);
background-color: var(--primary-color);
}
}
}
@ -43,8 +43,8 @@
text-transform: capitalize;
&.active {
color: var(--accent-color);
border-top: 3px solid var(--accent-color);
color: var(--primary-color);
border-top: 3px solid var(--primary-color);
}
}
}

33
tailwind.config.js
View File

@ -37,7 +37,7 @@ module.exports = {
900: 'hsl(0, 0%, 90%)',
930: 'hsl(0, 0%, 93%)' // Remove maybe
},
accent: 'var(--accent-color)',
primary: 'var(--primary-color)',
background: {
main: 'var(--main-background)',
secondary: 'var(--secondary-background)'
@ -57,5 +57,34 @@ module.exports = {
corePlugins: {
preflight: false
},
plugins: []
plugins: [outlinesPlugin()]
}
function outlinesPlugin() {
return ({ addUtilities, theme }) => {
// https://github.com/tailwindlabs/discuss/issues/196
let newUtilities = {}
const boxShadowPrefix = '0 0 0 3px'
const colors = theme('colors')
Object.keys(colors).forEach(color => {
const colorData = colors[color]
if (typeof colorData === 'string') {
newUtilities[`.outline-${color}`] = {
boxShadow: `${boxShadowPrefix} ${colorData}`
}
} else {
Object.keys(colorData).forEach(colorVariation => {
newUtilities[`.outline-${color}-${colorVariation}`] = {
boxShadow: `${boxShadowPrefix} ${colorData[colorVariation]}`
}
})
}
})
addUtilities(newUtilities, {
variants: ['focus']
})
}
}