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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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>