mirror of
https://github.com/tcsenpai/swingmusic.git
synced 2025-06-07 11:45:35 +00:00
more refactoring
This commit is contained in:
geoffrey45
parent
fe07961757
commit
38df211882
@ -35,7 +35,7 @@
|
||||
|
||||
.artists {
|
||||
font-size: 0.8rem;
|
||||
color: $highlight-blue;
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -47,7 +47,7 @@
|
||||
align-items: center;
|
||||
margin: $small;
|
||||
padding: $small;
|
||||
background-color: $bbb;
|
||||
background-color: $gray5;
|
||||
|
||||
.progress-bottom {
|
||||
display: flex;
|
||||
|
||||
@ -27,8 +27,8 @@
|
||||
border-radius: $small;
|
||||
margin-bottom: $small;
|
||||
text-align: center !important;
|
||||
font-size: 1;
|
||||
color: #fff;
|
||||
font-size: 2rem;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.input {
|
||||
@ -49,9 +49,9 @@
|
||||
.theme {
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
#141414 0%,
|
||||
#464545fd 50%,
|
||||
#111111 100%
|
||||
#464545fd 0%,
|
||||
#1d1d1d 50%,
|
||||
#4d4e50 100%
|
||||
);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@ -1,11 +1,7 @@
|
||||
// colors
|
||||
|
||||
$card-dark: #040406;
|
||||
$red: #df4646;
|
||||
$blue: #055096;
|
||||
$green: #439443;
|
||||
$card-dark: #000000;
|
||||
$separator: #ffffff2f;
|
||||
$pink: #c43a3a;
|
||||
$highlight-blue: #006eff;
|
||||
$bbb: #161616; //bottom controls background
|
||||
$theme: #464545fd;
|
||||
@ -17,6 +13,28 @@ $medium: 0.75rem;
|
||||
$large: 1.5rem;
|
||||
$larger: 2rem;
|
||||
|
||||
// apple human design guideline colors
|
||||
$black: #000000;
|
||||
$white: #ffffffde;
|
||||
|
||||
$gray: #1c1c1e;
|
||||
$gray1: rgb(142, 142, 147);
|
||||
$gray2: rgb(99, 99, 102);
|
||||
$gray3: rgb(72, 72, 74);
|
||||
$gray4: rgb(58, 58, 60);
|
||||
$gray5: rgb(44, 44, 46);
|
||||
|
||||
$red: rgb(255, 69, 58);
|
||||
$blue: rgb(10, 132, 255);
|
||||
$green: rgb(48, 209, 88);
|
||||
$yellow: rgb(255, 214, 10);
|
||||
$orange: rgb(255, 159, 10);
|
||||
$pink: rgb(255, 55, 95);
|
||||
$purple: rgb(191, 90, 242);
|
||||
$brown: rgb(172, 142, 104);
|
||||
$indigo: rgb(94, 92, 230);
|
||||
$teal: rgb(64, 200, 224);
|
||||
|
||||
// media query mixins
|
||||
@mixin phone-only {
|
||||
@media (max-width: 599px) {
|
||||
|
||||
@ -77,7 +77,7 @@ button {
|
||||
border-radius: $small;
|
||||
|
||||
&:hover {
|
||||
background-color: $pink !important;
|
||||
background-color: $red !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -157,7 +157,7 @@ button {
|
||||
}
|
||||
|
||||
.shadow-sm {
|
||||
box-shadow: 0 0 .5rem rgb(0, 0, 0);
|
||||
box-shadow: 0 0 .5rem rgba(0, 0, 0, 0.452);
|
||||
}
|
||||
|
||||
.shadow-md {
|
||||
|
||||
@ -28,7 +28,7 @@ const props = defineProps({
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
background-color: #ffffff09;
|
||||
background-color: $gray;
|
||||
transition: all 0.2s ease;
|
||||
border-radius: .75rem;
|
||||
|
||||
@ -58,12 +58,12 @@ const props = defineProps({
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #0575e6; /* fallback for old browsers */
|
||||
background: #0575e6;
|
||||
background: linear-gradient(
|
||||
to top right,
|
||||
#021b79,
|
||||
#0575e6
|
||||
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
||||
);
|
||||
background-size: 105% 105%;
|
||||
background-position-x: -$small;
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<div class="next" @click="scrollRight"></div>
|
||||
</div>
|
||||
<div class="artists" ref="artists_dom">
|
||||
<div class="xartist border c1 image">
|
||||
<div class="xartist c1 image">
|
||||
<div class="blur"></div>
|
||||
<div class="s2"></div>
|
||||
<p>Featured Artists</p>
|
||||
@ -121,7 +121,7 @@ export default {
|
||||
position: relative;
|
||||
background-size: 400px 11rem;
|
||||
background-position: 100%;
|
||||
|
||||
width: 8.25rem;
|
||||
background-image: linear-gradient(
|
||||
320deg,
|
||||
#b63939 13%,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="p-header rounded">
|
||||
<div class="p-header">
|
||||
<div class="info">
|
||||
<div>
|
||||
<div class="name">Makaveli Radio</div>
|
||||
@ -30,6 +30,7 @@
|
||||
background-image: url("../../assets/images/eggs.jpg");
|
||||
position: relative;
|
||||
margin-top: $small;
|
||||
border-radius: .75rem;
|
||||
|
||||
.last-updated {
|
||||
position: absolute;
|
||||
@ -68,7 +69,8 @@
|
||||
align-items: flex-end;
|
||||
padding: 1rem 1rem 4rem 1rem;
|
||||
box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.658);
|
||||
border-radius: .5rem;
|
||||
border-radius: .75rem;
|
||||
background-color: $black;
|
||||
|
||||
@include phone-only {
|
||||
width: calc(100% - 1rem);
|
||||
@ -77,6 +79,7 @@
|
||||
.name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: $white;
|
||||
|
||||
&::before {
|
||||
content: "😎 ";
|
||||
@ -85,10 +88,8 @@
|
||||
|
||||
.metrics {
|
||||
margin-top: $small;
|
||||
background-color: rgba(47, 55, 129, 0.233);
|
||||
color: rgb(0, 60, 255);
|
||||
color: $blue;
|
||||
padding: $small;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
|
||||
@ -109,7 +109,7 @@ export default {
|
||||
|
||||
.r-grid {
|
||||
position: relative;
|
||||
height: calc(100% - 2.5rem);
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: min-content;
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="albums-results">
|
||||
<div class="heading theme">ALBUMS</div>
|
||||
<div class="heading">Albums</div>
|
||||
<div class="grid">
|
||||
<AlbumCard v-for="album in albums" :key="album" :album="album" />
|
||||
</div>
|
||||
@ -40,15 +40,16 @@ export default {
|
||||
overflow-x: hidden;
|
||||
border: solid 2px $theme;
|
||||
|
||||
|
||||
.result-item:hover {
|
||||
border: solid 2px $theme;
|
||||
background-color: $gray3;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
|
||||
flex-wrap: wrap;
|
||||
gap: $small;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="artists-results">
|
||||
<div class="heading theme">ARTISTS</div>
|
||||
<div class="heading">Artists</div>
|
||||
<div class="grid">
|
||||
<ArtistCard v-for="artist in artists" :key="artist" :artist="artist" />
|
||||
</div>
|
||||
@ -31,23 +31,26 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.right-search .artists-results {
|
||||
border-radius: 0.5rem;
|
||||
background: #1214178c;
|
||||
padding: $small;
|
||||
margin-bottom: $small;
|
||||
border: solid 2px $theme;
|
||||
|
||||
.xartist:hover {
|
||||
border: solid 2px $theme;
|
||||
|
||||
.xartist {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
$gray2 20%,
|
||||
$gray4 50%,
|
||||
$gray 80%
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: .75rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="morexx">
|
||||
<button @click="loadMore" class="theme">
|
||||
<button @click="loadMore" class="">
|
||||
<div class="text">Load More</div>
|
||||
</button>
|
||||
</div>
|
||||
@ -27,9 +27,19 @@ export default {
|
||||
margin-top: $small;
|
||||
|
||||
button {
|
||||
border-radius: 1.5rem;
|
||||
height: 2.5rem;
|
||||
width: 10rem;
|
||||
width: 15rem;
|
||||
display: grid;
|
||||
transition: all 0.5s ease;
|
||||
color: rgba(255, 255, 255, 0.87) !important;
|
||||
background-color: transparent;
|
||||
border: solid 1px $gray;
|
||||
|
||||
&:hover {
|
||||
background-color: $gray !important;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -68,6 +68,7 @@ export default {
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease-in-out;
|
||||
position: relative;
|
||||
background-color: $gray4;
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="tracks-results" v-if="tracks">
|
||||
<div class="heading theme">TRACKS</div>
|
||||
<div class="heading">Tracks</div>
|
||||
<div class="items">
|
||||
<table>
|
||||
<tbody>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
name: 'AlbumView',
|
||||
params: { album: album.name, artist: album.artist },
|
||||
}"
|
||||
class="result-item"
|
||||
class="result-item shadow-sm"
|
||||
>
|
||||
<div
|
||||
class="album-art image"
|
||||
@ -29,18 +29,17 @@ export default {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: $small;
|
||||
border-radius: .75rem;
|
||||
border-radius: 0.75rem;
|
||||
text-align: left !important;
|
||||
border: solid 2px transparent;
|
||||
|
||||
// &:hover {
|
||||
// background-color: #1b3688cb;
|
||||
// }
|
||||
background-color: $gray;
|
||||
color: #ffffffde !important;
|
||||
transition: all 0.5s ease;
|
||||
|
||||
.album-art {
|
||||
height: 7.5rem;
|
||||
width: 7.5rem;
|
||||
border-radius: .5rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
@ -22,15 +22,15 @@ export default {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
width: 9em;
|
||||
min-width: 8.25em;
|
||||
height: 11em;
|
||||
border-radius: 1rem;
|
||||
border-radius: .75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
|
||||
|
||||
.artist-image {
|
||||
width: 7em;
|
||||
@ -41,6 +41,7 @@ export default {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
transition: all 0.5s ease-in-out;
|
||||
transition-delay: .25s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
@ -47,7 +47,6 @@ const playThis = (song) => {
|
||||
playAudio.playAudio(song.trackid);
|
||||
perks.current.value = song;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@ -65,6 +64,7 @@ const playThis = (song) => {
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: $gray5 !important;
|
||||
}
|
||||
|
||||
hr {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user