mirror of
https://github.com/tcsenpai/swingmusic.git
synced 2025-06-06 03:05:35 +00:00
search component initial build
This commit is contained in:
geoffrey45
parent
872badbc65
commit
206e89878c
53
src/App.vue
53
src/App.vue
@ -12,33 +12,36 @@
|
||||
<PinnedStuff :collapsed="collapsed" />
|
||||
<div id="settings-button">
|
||||
<div class="in">
|
||||
<div class="nav-icon" id="settings-icon"></div>
|
||||
<div class="nav-icon image" id="settings-icon"></div>
|
||||
<span id="text">Settings</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav">
|
||||
<div id="nav"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<router-view />
|
||||
</div>
|
||||
<div class="r-sidebar"></div>
|
||||
<div class="r-sidebar">
|
||||
<Search/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from "@vue/reactivity";
|
||||
|
||||
import Navigation from "./components/LeftSidebar/Navigation.vue";
|
||||
import PinnedStuff from "./components/LeftSidebar/PinnedStuff.vue";
|
||||
|
||||
import Search from "./components/RightSideBar/Search.vue"
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Navigation,
|
||||
PinnedStuff,
|
||||
Search
|
||||
},
|
||||
setup() {
|
||||
const collapsed = ref(false);
|
||||
const collapsed = ref(true);
|
||||
|
||||
const logo = ref(null);
|
||||
|
||||
@ -52,9 +55,9 @@ export default {
|
||||
|
||||
<style>
|
||||
.logo {
|
||||
height: 30px;
|
||||
width: 150px;
|
||||
margin-left: 35px;
|
||||
height: 2em;
|
||||
width: 9em;
|
||||
margin-left: 2.25em;
|
||||
background: url(./assets/logo.svg);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
@ -73,32 +76,28 @@ export default {
|
||||
}
|
||||
|
||||
#logo-container {
|
||||
height: 60px;
|
||||
margin-left: 20px;
|
||||
height: 3.60em;
|
||||
margin-left: 1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
.l-sidebar {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.l-container .seperator {
|
||||
margin-left: -2em;
|
||||
}
|
||||
|
||||
.l-container #toggle {
|
||||
position: fixed;
|
||||
top: 7px;
|
||||
width: 30px;
|
||||
height: 60px;
|
||||
top: 1em;
|
||||
width: 1.75em;
|
||||
height: 3.75em;
|
||||
background: url(./assets/icons/menu.svg);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
cursor: pointer;
|
||||
margin-right: 5px;
|
||||
margin-left: .25em;
|
||||
}
|
||||
|
||||
.l-container #settings-button {
|
||||
@ -108,7 +107,7 @@ export default {
|
||||
color: #fff;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
border-top: 1px solid #ffffff27;
|
||||
border-top: 1px solid var(--seperator);
|
||||
}
|
||||
|
||||
#settings-button .in {
|
||||
@ -123,14 +122,14 @@ export default {
|
||||
}
|
||||
|
||||
.l-container #settings-button #settings-icon {
|
||||
margin-left: 23px;
|
||||
margin-right: 5px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-left: 1em;
|
||||
margin-right: .25em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
background-image: url(./assets/icons/settings.svg);
|
||||
background-size: contain;
|
||||
/* background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-position: center; */
|
||||
}
|
||||
|
||||
.collapsed #settings-button #settings-icon {
|
||||
|
||||
@ -1,133 +1,141 @@
|
||||
:root {
|
||||
--seperator: #ffffff48;
|
||||
--green: #4AD168;
|
||||
--seperator: #ffffff46;
|
||||
--green: #4AD168;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: #0d0e0e;
|
||||
color: #fff;
|
||||
font-family: 'Helvetica Neue', sans-serif;
|
||||
margin: 0;
|
||||
background: #0d0e0e;
|
||||
color: #fff;
|
||||
font-family: 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
/* #app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
} */
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.seperator {
|
||||
border: 1px solid;
|
||||
color: transparent;
|
||||
margin: 0em;
|
||||
border: 1px solid;
|
||||
color: transparent;
|
||||
margin: 0em;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.l-container {
|
||||
display: grid;
|
||||
grid-template-columns: min-content 4fr 1.5fr;
|
||||
grid-template-rows: 78px 1fr 1fr;
|
||||
grid-auto-flow: row;
|
||||
grid-template-areas:
|
||||
"l-sidebar nav nav"
|
||||
"l-sidebar content r-sidebar"
|
||||
"l-sidebar content r-sidebar";
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background: rgba(0, 0, 0, 0.575);
|
||||
backdrop-filter: blur(40px);
|
||||
-webkit-backdrop-filter: blur(40px);
|
||||
-moz-backdrop-filter: blur(40px)
|
||||
display: grid;
|
||||
grid-template-columns: min-content 4fr 30em;
|
||||
grid-template-rows: 4em 1fr 1fr;
|
||||
grid-auto-flow: row;
|
||||
grid-template-areas: "l-sidebar content r-sidebar" "l-sidebar content r-sidebar" "l-sidebar content r-sidebar";
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background: rgba(0, 0, 0, 0.575);
|
||||
backdrop-filter: blur(40px);
|
||||
-webkit-backdrop-filter: blur(40px);
|
||||
-moz-backdrop-filter: blur(40px);
|
||||
}
|
||||
|
||||
#bg-blur {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(27, 27, 27, 0.548);
|
||||
background-image: url(../images/dark-bg.jpg);
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(27, 27, 27, 0.548);
|
||||
background-image: url(../images/dark-bg.jpg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.collapsed .l-sidebar {
|
||||
width: 70px;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 0.3s;
|
||||
transition-property: width;
|
||||
width: 70px;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 0.3s;
|
||||
transition-property: width;
|
||||
}
|
||||
|
||||
.l-sidebar {
|
||||
width: 250px;
|
||||
grid-area: l-sidebar;
|
||||
padding-top: 0.5em;
|
||||
background-color: #131313b2;
|
||||
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
transition-duration: 0.3s;
|
||||
transition-property: width;
|
||||
width: 250px;
|
||||
grid-area: l-sidebar;
|
||||
padding-top: 0.5em;
|
||||
margin: .5em 0 .5em .5em;
|
||||
border-radius: .5em;
|
||||
background-color: #131313b2;
|
||||
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
transition-duration: 0.3s;
|
||||
transition-property: width;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.circular {
|
||||
border-radius: 20px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav {
|
||||
grid-area: nav;
|
||||
border: 1px solid;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.content {
|
||||
grid-area: content;
|
||||
border-radius: .25em;
|
||||
padding: .5em;
|
||||
overflow: hidden;
|
||||
grid-area: content;
|
||||
border-radius: .25em;
|
||||
padding: .5em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.r-sidebar {
|
||||
grid-area: r-sidebar;
|
||||
border: 1px solid rgb(109, 109, 109);
|
||||
border-radius: 5px;
|
||||
grid-area: r-sidebar;
|
||||
border-radius: 5px;
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
.image {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
/* scrollbars */
|
||||
|
||||
|
||||
/* width */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: .5em;
|
||||
width: .5em;
|
||||
}
|
||||
|
||||
|
||||
/* Track */
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(51, 51, 51, 0.459);
|
||||
border-radius: 1em;
|
||||
background: rgba(51, 51, 51, 0.459);
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
|
||||
/* Handle */
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: grey;
|
||||
border-radius: 1em;
|
||||
background: grey;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(163, 163, 163);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(163, 163, 163);
|
||||
}
|
||||
BIN
src/assets/images/thriller.jpg
Normal file
BIN
src/assets/images/thriller.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
@ -5,7 +5,7 @@
|
||||
</div>
|
||||
<div class="fsearch">
|
||||
<div>
|
||||
<input type="search" placeholder="Search here" />
|
||||
<input type="search" placeholder="Search this directory" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -44,7 +44,7 @@ export default {};
|
||||
.folder-top .fsearch input {
|
||||
width: 30em;
|
||||
border: none;
|
||||
border-radius: 2em;
|
||||
border-radius: .5em;
|
||||
padding-left: 1em;
|
||||
background-color: #4645456c;
|
||||
color: rgba(255, 255, 255, 0.521);
|
||||
@ -63,6 +63,6 @@ export default {};
|
||||
|
||||
.folder-top .fsearch input:focus {
|
||||
color: rgb(255, 255, 255);
|
||||
outline: 0.1em solid #fafafa;
|
||||
outline: 0.1em solid #fafafa52;
|
||||
}
|
||||
</style>
|
||||
@ -10,9 +10,9 @@
|
||||
</tr>
|
||||
<tr v-for="song in songs" :key="song">
|
||||
<td :style="{ width: songTitleWidth + 'px' }" class="flex">
|
||||
<div class="album-art rounded"></div>
|
||||
<div class="album-art rounded image"></div>
|
||||
<div>
|
||||
<span>{{ song.title }}</span>
|
||||
<span class="ellipsis">{{ song.title }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td :style="{ width: songTitleWidth + 'px' }">
|
||||
@ -92,9 +92,6 @@ export default {
|
||||
margin-right: 1em;
|
||||
background-color: #ccc;
|
||||
background-image: url(../../assets/images/Jim_Reeves.png);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.folder .table .flex {
|
||||
@ -106,9 +103,6 @@ export default {
|
||||
position: absolute;
|
||||
bottom: 1.5em;
|
||||
width: calc(100% - 6em);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td,
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="nav-container" :class="{ collapsed: collapsed }">
|
||||
<div class="side-nav-container" :class="{ collapsed: collapsed }">
|
||||
<router-link :to="{ name: 'Home' }">
|
||||
<div class="nav-button" id="home-button">
|
||||
<div class="in">
|
||||
<div class="nav-icon" id="home-icon"></div>
|
||||
<div class="nav-icon image" id="home-icon"></div>
|
||||
<span id="text">Home</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -12,7 +12,7 @@
|
||||
<router-link :to="{ name: 'Home' }">
|
||||
<div class="nav-button" id="album-button">
|
||||
<div class="in">
|
||||
<div class="nav-icon" id="album-icon"></div>
|
||||
<div class="nav-icon image" id="album-icon"></div>
|
||||
<span id="text">Albums</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -21,7 +21,7 @@
|
||||
<router-link :to="{ name: 'Home' }">
|
||||
<div class="nav-button" id="artists-button">
|
||||
<div class="in">
|
||||
<div class="nav-icon" id="artists-icon"></div>
|
||||
<div class="nav-icon image" id="artists-icon"></div>
|
||||
<span id="text">Artists</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -30,7 +30,7 @@
|
||||
<router-link :to="{ name: 'Home' }">
|
||||
<div class="nav-button" id="playlists-button">
|
||||
<div class="in">
|
||||
<div class="nav-icon" id="playlists-icon"></div>
|
||||
<div class="nav-icon image" id="playlists-icon"></div>
|
||||
<span id="text">Playlist</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -39,7 +39,7 @@
|
||||
<router-link :to="{ name: 'Home' }">
|
||||
<div class="nav-button" id="mixes-button">
|
||||
<div class="in">
|
||||
<div class="nav-icon" id="mixes-icon"></div>
|
||||
<div class="nav-icon image" id="mixes-icon"></div>
|
||||
<span id="text">Mixes</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -48,7 +48,7 @@
|
||||
<router-link :to="{ name: 'FolderView' }">
|
||||
<div class="nav-button" id="folders-button">
|
||||
<div class="in">
|
||||
<div class="nav-icon" id="folders-icon"></div>
|
||||
<div class="nav-icon image" id="folders-icon"></div>
|
||||
<span id="text">Folders</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -66,7 +66,7 @@ export default {
|
||||
|
||||
|
||||
<style>
|
||||
.nav-container .in {
|
||||
.side-nav-container .in {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@ -75,14 +75,14 @@ export default {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
.side-nav-container {
|
||||
color: #fff;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.158);
|
||||
border-top: 1px solid var(--seperator);
|
||||
margin-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.nav-container .nav-button {
|
||||
.side-nav-container .nav-button {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
@ -97,53 +97,50 @@ export default {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.nav-container .nav-button:hover {
|
||||
.side-nav-container .nav-button:hover {
|
||||
background-color: rgba(220, 20, 60, 0.5);
|
||||
}
|
||||
|
||||
.nav-container .nav-button .nav-icon {
|
||||
.side-nav-container .nav-button .nav-icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin-right: 0.5em;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.nav-container #home-button #home-icon {
|
||||
.side-nav-container #home-button #home-icon {
|
||||
background-image: url(../../assets/icons/home.svg);
|
||||
}
|
||||
|
||||
.nav-container #album-button #album-icon {
|
||||
.side-nav-container #album-button #album-icon {
|
||||
background-image: url(../../assets/icons/album.svg);
|
||||
}
|
||||
|
||||
.nav-container #home-button #text {
|
||||
.side-nav-container #home-button #text {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.nav-container #artists-button #artists-icon {
|
||||
.side-nav-container #artists-button #artists-icon {
|
||||
background-image: url(../../assets/icons/artist.svg);
|
||||
}
|
||||
|
||||
.nav-container #playlists-button #playlists-icon {
|
||||
.side-nav-container #playlists-button #playlists-icon {
|
||||
background-image: url(../../assets/icons/playlist.svg);
|
||||
}
|
||||
|
||||
.nav-container #mixes-button #mixes-icon {
|
||||
.side-nav-container #mixes-button #mixes-icon {
|
||||
background-image: url(../../assets/icons/mix.svg);
|
||||
}
|
||||
|
||||
.nav-container #folders-button #folders-icon {
|
||||
.side-nav-container #folders-button #folders-icon {
|
||||
background-image: url(../../assets/icons/folder.svg);
|
||||
}
|
||||
|
||||
.nav-container #folders-button #text {
|
||||
.side-nav-container #folders-button #text {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.nav-container hr {
|
||||
.side-nav-container hr {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
class="nav-container"
|
||||
class="side-nav-container"
|
||||
:class="{ hidden: collapsed }"
|
||||
id="pinned-container"
|
||||
>
|
||||
|
||||
213
src/components/RightSideBar/Search.vue
Normal file
213
src/components/RightSideBar/Search.vue
Normal file
@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div class="right-search">
|
||||
<input type="search" id="search" placeholder="Michael Jackson" />
|
||||
<div class="scrollable">
|
||||
<h3 class="heading">TRACKS <span class="more">MORE</span></h3>
|
||||
|
||||
<div class="tracks-results">
|
||||
<div class="result-item" v-for="song in songs" :key="song">
|
||||
<div class="album-art image"></div>
|
||||
<div class="tags">
|
||||
<span class="title">{{ song.title }}</span>
|
||||
<hr />
|
||||
<span class="artist">{{ song.artist }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="albums-results">
|
||||
<h3 class="heading">ALBUMS <span class="more">MORE</span></h3>
|
||||
<div class="grid">
|
||||
<div class="result-item result-item3" v-for="album in albums" :key="album">
|
||||
<div class="album-art image"></div>
|
||||
<div class="title ellipsis">{{ album }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="artists-results">
|
||||
<h3 class="heading">ARTISTS <span class="more">MORE</span></h3>
|
||||
<div class="grid">
|
||||
<div class="result-item result-item3" v-for="album in albums" :key="album">
|
||||
<div class="image"></div>
|
||||
<div class="name ellipsis">{{ album }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
setup() {
|
||||
const songs = [
|
||||
{
|
||||
title: "Thriller",
|
||||
artist: "Michael jackson",
|
||||
},
|
||||
{
|
||||
title: "We are the world",
|
||||
artist: "Michael jackson",
|
||||
},
|
||||
];
|
||||
|
||||
const albums = [
|
||||
"Smooth Criminal like wtf ... and im serious",
|
||||
"Xscape",
|
||||
"USA for Africa",
|
||||
];
|
||||
|
||||
return { songs, albums };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.right-search {
|
||||
position: relative;
|
||||
height: 30em;
|
||||
border-radius: 1em;
|
||||
margin: 0.5em 0 0 0;
|
||||
padding: 0.75em;
|
||||
background-color: rgba(32, 31, 31, 0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.right-search .scrollable {
|
||||
height: calc(100% - 4em);
|
||||
overflow-y: scroll;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.right-search .scrollable::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.right-search .heading {
|
||||
font-size: small;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.right-search .heading .more {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
border-radius: 0.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.right-search input {
|
||||
width: 100%;
|
||||
border: 0.1em solid;
|
||||
border-radius: 0.5em;
|
||||
padding-left: 1em;
|
||||
background-color: transparent;
|
||||
color: rgba(255, 255, 255, 0.479);
|
||||
font-size: 1em;
|
||||
line-height: 3em;
|
||||
outline: none;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.right-search input::-webkit-search-cancel-button {
|
||||
position: relative;
|
||||
right: 1em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.right-search input:focus {
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.right-search .tracks-results {
|
||||
border-radius: 0.5em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.right-search .tracks-results .result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 5em;
|
||||
background-color: rgba(20, 20, 20, 0.733);
|
||||
}
|
||||
|
||||
.right-search .tracks-results .result-item:nth-child(odd) {
|
||||
background-color: rgba(90, 90, 90, 0.233);
|
||||
}
|
||||
.right-search .tracks-results .result-item .album-art {
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
background-color: rgb(27, 150, 74);
|
||||
border-radius: 0.5em;
|
||||
margin: 0 0.5em 0 0.25em;
|
||||
background-image: url(../../assets/images/thriller.jpg);
|
||||
}
|
||||
|
||||
.right-search hr {
|
||||
margin: 0.1em;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.right-search .tracks-results .result-item .tags .artist {
|
||||
font-size: small;
|
||||
color: rgba(255, 255, 255, 0.63);
|
||||
}
|
||||
|
||||
.right-search .albums-results {
|
||||
border-radius: 0.5em;
|
||||
background-color: rgba(8, 3, 1, 0.274);
|
||||
margin-top: 1em;
|
||||
}
|
||||
.right-search .albums-results .grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.right-search .result-item3 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.right-search .albums-results .result-item .album-art {
|
||||
height: 7em;
|
||||
width: 7em;
|
||||
background-color: rgba(26, 26, 26, 0.452);
|
||||
border-radius: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
background-image: url(../../assets/images/thriller.jpg);
|
||||
}
|
||||
|
||||
.right-search .albums-results .result-item .title {
|
||||
width: 7em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.right-search .artists-results {
|
||||
border-radius: 0.5em;
|
||||
background-color: rgba(8, 3, 1, 0.274);
|
||||
}
|
||||
|
||||
.right-search h3 {
|
||||
padding: 1em 1em 0 1em;
|
||||
}
|
||||
|
||||
.right-search .artists-results .grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.right-search .artists-results .result-item .image {
|
||||
height: 7em;
|
||||
width: 7em;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(26, 26, 26, 0.452);
|
||||
margin-bottom: 0.5em;
|
||||
background-image: url(../../assets/images/thriller.jpg);
|
||||
}
|
||||
|
||||
.right-search .artists-results .result-item .name {
|
||||
width: 7em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user