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

added hover and active style to buttons

Browse Source
This commit is contained in:
Roberto Tonino 2020-06-03 22:09:52 +02:00
parent db685df7c2
commit fa1c8cc440
4 changed files with 119 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/modules/base/base.css
View File

@ -28,7 +28,7 @@ html[data-theme='light'] {
--main-text-inverted: #eeeeee; --main-text-inverted: #eeeeee;
--panels-background: #222324; --panels-background: #222324;
--panels-text: #ffffff; --panels-text: #ffffff;
--accent-text: #ffffff; --accent-text: black;
--table-bg: #ffffff; --table-bg: #ffffff;
--table-zebra: #c9c9c9; --table-zebra: #c9c9c9;

184
public/css/modules/globals/globals.css
View File

@ -1,3 +1,92 @@
input[type='text'],
input[type='password'],
input[type='number'] {
width: calc(100% - 16px);
border: 0px solid black;
line-height: 36px;
padding: 0px 8px;
border-radius: 4px;
background-color: var(--secondary-background);
color: var(--primary-text);
margin-bottom: 8px;
}
input[type='checkbox'] {
-webkit-appearance: none;
appearance: none;
background-color: none;
border: 2px solid gray;
opacity: 0.5;
border-radius: 2px;
padding: 7px;
margin: 3px;
display: inline-block;
position: relative;
}
input[type='checkbox']:checked {
opacity: 1;
background-color: var(--accent-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-radius: 2px;
padding: 9px;
margin: 3px;
color: var(--accent-text);
}
select {
-webkit-appearance: none;
appearance: none;
width: 100%;
border: 0px solid black;
line-height: 36px;
padding: 0px 40px 0px 8px;
border-radius: 4px;
background-color: var(--secondary-background);
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath style='fill%3A%23000000%3Bfill-opacity%3A0.25' d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 24px;
background-position: calc(100% - 8px) center;
background-clip: border-box;
color: var(--primary-text);
margin-bottom: 8px;
}
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: none; */
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;
}
button:active {
background-color: var(--accent-color);
transform: scale(0.95);
}
button:hover {
background: none;
border: 1px solid var(--accent-color);
}
#loading_overlay { #loading_overlay {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -98,10 +187,6 @@ span.tag {
padding: 3px 6px; padding: 3px 6px;
} }
p {
word-break: break-word;
}
a:visited { a:visited {
color: dodgerblue; color: dodgerblue;
} }
@ -127,22 +212,6 @@ a:visited {
margin-left: auto; margin-left: auto;
} }
button {
font-family: inherit;
font-weight: 600;
font-size: 14px;
padding: 0px 8px;
margin-right: 8px;
height: 36px;
background-color: var(--accent-color);
border: 0px solid black;
border-radius: 4px;
min-width: 64px;
text-transform: uppercase;
color: var(--accent-text);
cursor: pointer;
}
button[disabled] { button[disabled] {
background-color: var(--secondary-background); background-color: var(--secondary-background);
color: var(--main-text); color: var(--main-text);
@ -168,62 +237,6 @@ button.with_icon i {
margin-left: 8px; margin-left: 8px;
} }
input[type='text'],
input[type='password'],
input[type='number'] {
width: calc(100% - 16px);
border: 0px solid black;
line-height: 36px;
padding: 0px 8px;
border-radius: 4px;
background-color: var(--secondary-background);
color: var(--primary-text);
margin-bottom: 8px;
}
select {
-webkit-appearance: none;
appearance: none;
width: 100%;
border: 0px solid black;
line-height: 36px;
padding: 0px 40px 0px 8px;
border-radius: 4px;
background-color: var(--secondary-background);
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath style='fill%3A%23000000%3Bfill-opacity%3A0.25' d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 24px;
background-position: calc(100% - 8px) center;
background-clip: border-box;
color: var(--primary-text);
margin-bottom: 8px;
}
input[type='checkbox'] {
-webkit-appearance: none;
appearance: none;
background-color: none;
border: 2px solid gray;
opacity: 0.5;
border-radius: 2px;
padding: 7px;
margin: 3px;
display: inline-block;
position: relative;
}
input[type='checkbox']:checked {
opacity: 1;
background-color: var(--accent-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-radius: 2px;
padding: 9px;
margin: 3px;
color: var(--accent-text);
}
.right { .right {
float: right; float: right;
} }
@ -245,25 +258,6 @@ input[type='checkbox']:checked {
margin: 16px 0px; margin: 16px 0px;
} }
th.sortable {
-webkit-user-select: none;
user-select: none;
}
th.sort-asc:after {
content: '\25b2';
font-size: 0.7em;
padding-left: 3px;
line-height: 0.7em;
}
th.sort-desc:after {
content: '\25bc';
font-size: 0.7em;
padding-left: 3px;
line-height: 0.7em;
}
.fab { .fab {
width: 56px; width: 56px;
height: 56px; height: 56px;

19
public/css/modules/globals/tables.css
View File

@ -29,6 +29,25 @@
vertical-align: middle; vertical-align: middle;
} }
th.sortable {
-webkit-user-select: none;
user-select: none;
}
th.sort-asc:after {
content: '\25b2';
font-size: 0.7em;
padding-left: 3px;
line-height: 0.7em;
}
th.sort-desc:after {
content: '\25bc';
font-size: 0.7em;
padding-left: 3px;
line-height: 0.7em;
}
.table td { .table td {
padding: var(--vertical-separator) 10px; padding: var(--vertical-separator) 10px;
} }

18
public/index.html
View File

@ -130,10 +130,12 @@ <h2>Start searching!</h2>
:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'"> :src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'">
</td> </td>
<td class="table__cell table__cell--large breakline"> <td class="table__cell table__cell--large breakline">
<i v-if="track.EXPLICIT_LYRICS == 1" class="material-icons explicit_icon"> <div class="table__cell-content table__cell-content--vertical-center">
explicit <i v-if="track.EXPLICIT_LYRICS == 1" class="material-icons explicit_icon">
</i> explicit
{{ track.SNG_TITLE + (track.VERSION ? ' ' + track.VERSION : '') }} </i>
{{ track.SNG_TITLE + (track.VERSION ? ' ' + track.VERSION : '') }}
</div>
</td> </td>
<td class="table__cell table__cell--medium table__cell--center breakline"> <td class="table__cell table__cell--medium table__cell--center breakline">
<span class="clickable" @click="artistView" :data-id="artist.ART_ID" <span class="clickable" @click="artistView" :data-id="artist.ART_ID"
@ -395,16 +397,16 @@ <h2 class="page_heading">Charts</h2>
<!-- Ugly af --> <!-- Ugly af -->
<template v-for="release in countries"> <template v-for="release in countries">
<div role="button" :aria-label="release.title" v-if="release.title === 'Worldwide'" <div role="button" :aria-label="release.title" v-if="release.title === 'Worldwide'"
class="release clickable" @click="getTrackList" :data-title="release.title" class="release clickable" @click="getTrackList" :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="rounded coverart" :src="release.picture_medium">
</div> </div>
</template> </template>
<template v-for="release in countries"> <template v-for="release in countries">
<div role="button" :aria-label="release.title" v-if="release.title !== 'Worldwide'" <div role="button" :aria-label="release.title" v-if="release.title !== 'Worldwide'"
class="release clickable" @click="getTrackList" :data-title="release.title" class="release clickable" @click="getTrackList" :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="rounded coverart" :src="release.picture_medium">
</div> </div>
</template> </template>