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

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

@ -1,34 +1,17 @@
<template> <template>
<button class="top-back-button" @click="$router.back()"> <button
<i class="material-icons mirrored md-36">forward</i> 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> </button>
</template> </template>
<style lang="scss" scoped> <style scoped>
$button-dimension: 4rem; button {
$button-separator: 10px; 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; transition: background 200ms ease-in-out;
&:hover {
background: var(--accent-color);
}
} }
</style> </style>

View File

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

View File

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

View File

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

View File

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

View File

@ -35,8 +35,8 @@
</div> </div>
</div> </div>
<div v-else id="charts_table"> <div v-else id="charts_table">
<button @click="onChangeCountry">{{ $t('charts.changeCountry') }}</button> <button class="btn btn-primary" @click="onChangeCountry">{{ $t('charts.changeCountry') }}</button>
<button @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') }}
</button> </button>
<table class="table table--charts"> <table class="table table--charts">

View File

@ -25,7 +25,7 @@
</div> </div>
</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) }) }} {{ $t('globals.downloadAll', { thing: $tc(`globals.listTabs.${activeTab}`, 2) }) }}
</button> </button>

View File

@ -9,7 +9,9 @@
<strong place="username" id="settings_username" ref="username">{{ user.name || 'not logged' }}</strong> <strong place="username" id="settings_username" ref="username">{{ user.name || 'not logged' }}</strong>
</i18n> </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"> <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> <option v-for="(account, i) in accounts" :key="account" :value="i.toString()">{{ account.BLOG_NAME }}</option>
@ -29,7 +31,7 @@
ref="loginInput" ref="loginInput"
placeholder="ARL" 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> <i class="material-icons">assignment</i>
</button> </button>
</div> </div>
@ -39,7 +41,7 @@
<a id="settings_btn_applogin" v-if="clientMode" href="#" @click="appLogin"> <a id="settings_btn_applogin" v-if="clientMode" href="#" @click="appLogin">
{{ $t('settings.login.login') }} {{ $t('settings.login.login') }}
</a> </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') }} {{ $t('settings.login.arl.update') }}
</button> </button>
</div> </div>
@ -78,7 +80,12 @@
</h3> </h3>
<div class="inline-flex"> <div class="inline-flex">
<input autocomplete="off" type="text" v-model="settings.downloadLocation" /> <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> <i class="material-icons">folder</i>
</button> </button>
</div> </div>
@ -611,8 +618,8 @@
</div> </div>
<footer> <footer>
<button @click="resetSettings">{{ $t('settings.reset') }}</button> <button class="btn btn-primary mr-2" @click="resetSettings">{{ $t('settings.reset') }}</button>
<button @click="saveSettings">{{ $t('settings.save') }}</button> <button class="btn btn-primary" @click="saveSettings">{{ $t('settings.save') }}</button>
</footer> </footer>
</div> </div>
</template> </template>

View File

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

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

View File

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

View File

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

View File

@ -5,7 +5,7 @@
.circle-loader { .circle-loader {
display: inline-block; display: inline-block;
border: 2px solid var(--accent-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; width: 16px;

View File

@ -6,6 +6,10 @@
--toast-background: hsla(0, 0%, 0%, 0.85); --toast-background: hsla(0, 0%, 0%, 0.85);
--toast-secondary: hsla(0, 0%, 100%, 0.15); --toast-secondary: hsla(0, 0%, 100%, 0.15);
--toast-text: hsla(0, 0%, 100%, 0.85); --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'] { :root[data-theme='light'] {
@ -13,16 +17,13 @@
--secondary-background: theme('colors.grayscale.930'); --secondary-background: theme('colors.grayscale.930');
--foreground: theme('colors.grayscale.200'); --foreground: theme('colors.grayscale.200');
--foreground-inverted: theme('colors.grayscale.930'); --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-background: hsl(210, 3%, 14%);
--panels-text: theme('colors.white'); --panels-text: theme('colors.white');
--accent-text: theme('colors.black');
--sidebar-link-bg: theme('colors.grayscale.240'); --sidebar-link-bg: theme('colors.grayscale.240');
--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2); --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-bg: theme('colors.white');
--table-zebra: theme('colors.grayscale.900'); --table-zebra: theme('colors.grayscale.900');
@ -34,16 +35,13 @@
--secondary-background: theme('colors.grayscale.140'); --secondary-background: theme('colors.grayscale.140');
--foreground: theme('colors.grayscale.930'); --foreground: theme('colors.grayscale.930');
--foreground-inverted: theme('colors.grayscale.200'); --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-background: theme('colors.grayscale.100');
--panels-text: theme('colors.white'); --panels-text: theme('colors.white');
--accent-text: theme('colors.grayscale.870');
--sidebar-link-bg: theme('colors.grayscale.240'); --sidebar-link-bg: theme('colors.grayscale.240');
--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2); --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-bg: theme('colors.grayscale.80');
--table-zebra: theme('colors.grayscale.140'); --table-zebra: theme('colors.grayscale.140');
@ -55,11 +53,8 @@
--secondary-background: hsl(257, 61%, 10%); --secondary-background: hsl(257, 61%, 10%);
--foreground: theme('colors.grayscale.930'); --foreground: theme('colors.grayscale.930');
--foreground-inverted: hsl(258, 62%, 8%); --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-background: hsl(257, 70%, 9%);
--panels-text: theme('colors.white'); --panels-text: theme('colors.white');
--accent-text: theme('colors.grayscale.870');
--sidebar-link-bg: hsl(257, 70%, 17%); --sidebar-link-bg: hsl(257, 70%, 17%);
--sidebar-link-bg-20: hsla(257, 70%, 17%, 0.2); --sidebar-link-bg-20: hsla(257, 70%, 17%, 0.2);

View File

@ -28,3 +28,21 @@ table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; 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;
}

View File

@ -37,14 +37,14 @@ input[type='checkbox'] {
&:checked { &:checked {
opacity: 1; 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-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; background-position: center center;
border: 0px solid var(--accent-color); border: 0px solid var(--primary-color);
border-radius: 2px; border-radius: 2px;
padding: 9px; padding: 9px;
margin: 3px; margin: 3px;
color: var(--accent-text); color: var(--primary-text);
} }
} }
@ -70,86 +70,6 @@ p {
word-break: break-word; 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 { img {
&.rounded { &.rounded {
border-radius: 5px; border-radius: 5px;
@ -233,8 +153,8 @@ a {
height: 56px; height: 56px;
border-radius: 28px; border-radius: 28px;
display: inline-block; display: inline-block;
background-color: var(--accent-color); background-color: var(--primary-color);
color: var(--accent-text); color: var(--primary-text);
cursor: pointer; cursor: pointer;
i { i {

View File

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

View File

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

View File

@ -37,7 +37,7 @@ 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
}, },
accent: 'var(--accent-color)', primary: 'var(--primary-color)',
background: { background: {
main: 'var(--main-background)', main: 'var(--main-background)',
secondary: 'var(--secondary-background)' secondary: 'var(--secondary-background)'
@ -57,5 +57,34 @@ module.exports = {
corePlugins: { corePlugins: {
preflight: false 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']
})
}
} }