diff --git a/src/assets/css/Search/Search.scss b/src/assets/css/Search/Search.scss index 35f188bd..00759ee5 100644 --- a/src/assets/css/Search/Search.scss +++ b/src/assets/css/Search/Search.scss @@ -45,16 +45,6 @@ &::-webkit-scrollbar { display: none; } - - .theme { - background-image: linear-gradient( - 45deg, - #464545fd 0%, - #1d1d1d 50%, - #4d4e50 100% - ); - color: #fff; - } } .right-search { diff --git a/src/components/FolderView/FolderList.vue b/src/components/FolderView/FolderList.vue index 170110c4..913413d8 100644 --- a/src/components/FolderView/FolderList.vue +++ b/src/components/FolderView/FolderList.vue @@ -33,7 +33,7 @@ const props = defineProps({ #f-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); - gap: $small; + gap: $medium; } .f-container p { diff --git a/src/components/PlaylistView/Header.vue b/src/components/PlaylistView/Header.vue index a30074b3..b16ea1cb 100644 --- a/src/components/PlaylistView/Header.vue +++ b/src/components/PlaylistView/Header.vue @@ -2,7 +2,7 @@
-
Makaveli Radio
+
Makaveli Radio
45 Tracks • 3 Hours 4 Minutes
@@ -76,14 +76,10 @@ width: calc(100% - 1rem); } - .name { + .title { font-size: 1.5rem; font-weight: bold; color: $white; - - &::before { - content: "😎 "; - } } .metrics { diff --git a/src/components/Search/AlbumGrid.vue b/src/components/Search/AlbumGrid.vue index ce6f64bb..10aec703 100644 --- a/src/components/Search/AlbumGrid.vue +++ b/src/components/Search/AlbumGrid.vue @@ -31,15 +31,13 @@ export default { diff --git a/src/components/Search/ArtistGrid.vue b/src/components/Search/ArtistGrid.vue index 5e27b666..695143a4 100644 --- a/src/components/Search/ArtistGrid.vue +++ b/src/components/Search/ArtistGrid.vue @@ -35,8 +35,8 @@ export default { border-radius: 0.5rem; padding: $small; margin-bottom: $small; - border: solid 2px $theme; - + border: solid 1px $gray; + background-color: #150d167c; .xartist { background: linear-gradient( diff --git a/src/components/Search/TracksGrid.vue b/src/components/Search/TracksGrid.vue index 8d14227e..0b27ffd4 100644 --- a/src/components/Search/TracksGrid.vue +++ b/src/components/Search/TracksGrid.vue @@ -42,6 +42,6 @@ function loadMore() { .right-search .tracks-results { border-radius: 0.5rem; padding: $small; - border: 2px solid $theme; + border: 1px solid $gray; } diff --git a/src/components/shared/AlbumCard.vue b/src/components/shared/AlbumCard.vue index 51742875..50ec326e 100644 --- a/src/components/shared/AlbumCard.vue +++ b/src/components/shared/AlbumCard.vue @@ -6,12 +6,15 @@ }" class="result-item shadow-sm" > -
+
+
+
+
{{ album.name }}
{{ album.artist }}
@@ -36,11 +39,35 @@ export default { color: #ffffffde !important; transition: all 0.5s ease; - .album-art { - height: 7.5rem; - width: 7.5rem; - border-radius: 0.5rem; - margin-bottom: 0.5rem; + ._idk { + position: relative; + + &:hover { + .play { + visibility: visible; + } + } + + .play { + width: 3rem; + height: 3rem; + background-color: $gray; + border-radius: 1rem; + position: absolute; + left: 2rem; + bottom: 2.5rem; + background-image: url("../../assets/icons/play.svg"); + background-size: 2rem; + background-position: 60% 50%; + visibility: hidden; + } + + .album-art { + height: 7.5rem; + width: 7.5rem; + border-radius: 0.5rem; + margin-bottom: 0.5rem; + } } .title { diff --git a/src/components/shared/SongItem.vue b/src/components/shared/SongItem.vue index abb1cc9f..dbfb20b0 100644 --- a/src/components/shared/SongItem.vue +++ b/src/components/shared/SongItem.vue @@ -1,5 +1,5 @@