added hover and active style to buttons
This commit is contained in:
Roberto Tonino
parent
db685df7c2
commit
fa1c8cc440
@ -28,7 +28,7 @@ html[data-theme='light'] {
|
||||
--main-text-inverted: #eeeeee;
|
||||
--panels-background: #222324;
|
||||
--panels-text: #ffffff;
|
||||
--accent-text: #ffffff;
|
||||
--accent-text: black;
|
||||
|
||||
--table-bg: #ffffff;
|
||||
--table-zebra: #c9c9c9;
|
||||
|
||||
@ -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 {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -98,10 +187,6 @@ span.tag {
|
||||
padding: 3px 6px;
|
||||
}
|
||||
|
||||
p {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: dodgerblue;
|
||||
}
|
||||
@ -127,22 +212,6 @@ a:visited {
|
||||
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] {
|
||||
background-color: var(--secondary-background);
|
||||
color: var(--main-text);
|
||||
@ -168,62 +237,6 @@ button.with_icon i {
|
||||
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 {
|
||||
float: right;
|
||||
}
|
||||
@ -245,25 +258,6 @@ input[type='checkbox']:checked {
|
||||
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 {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
|
||||
@ -29,6 +29,25 @@
|
||||
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 {
|
||||
padding: var(--vertical-separator) 10px;
|
||||
}
|
||||
|
||||
@ -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'">
|
||||
</td>
|
||||
<td class="table__cell table__cell--large breakline">
|
||||
<i v-if="track.EXPLICIT_LYRICS == 1" class="material-icons explicit_icon">
|
||||
explicit
|
||||
</i>
|
||||
{{ track.SNG_TITLE + (track.VERSION ? ' ' + track.VERSION : '') }}
|
||||
<div class="table__cell-content table__cell-content--vertical-center">
|
||||
<i v-if="track.EXPLICIT_LYRICS == 1" class="material-icons explicit_icon">
|
||||
explicit
|
||||
</i>
|
||||
{{ track.SNG_TITLE + (track.VERSION ? ' ' + track.VERSION : '') }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="table__cell table__cell--medium table__cell--center breakline">
|
||||
<span class="clickable" @click="artistView" :data-id="artist.ART_ID"
|
||||
@ -395,16 +397,16 @@ <h2 class="page_heading">Charts</h2>
|
||||
<!-- Ugly af -->
|
||||
<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">
|
||||
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>
|
||||
|
||||
<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">
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user