seperated playlist component into different files
This commit is contained in:
parent
c66e04643c
commit
8d704ac6bd
@ -77,7 +77,7 @@ fn HomePage() -> impl IntoView {
|
|||||||
|
|
||||||
view! {
|
view! {
|
||||||
<div class="home-container">
|
<div class="home-container">
|
||||||
<Sidebar setter=set_dashboard_open active=dashboard_open />
|
<Sidebar setter=set_dashboard_open active=dashboard_open logged_in=logged_in/>
|
||||||
<Show
|
<Show
|
||||||
when=move || {dashboard_open() == true}
|
when=move || {dashboard_open() == true}
|
||||||
fallback=move || view! { <Search /> }
|
fallback=move || view! { <Search /> }
|
||||||
|
|||||||
@ -2,3 +2,6 @@ pub mod sidebar;
|
|||||||
pub mod dashboard;
|
pub mod dashboard;
|
||||||
pub mod search;
|
pub mod search;
|
||||||
pub mod personal;
|
pub mod personal;
|
||||||
|
pub mod playlist;
|
||||||
|
pub mod create_playlist;
|
||||||
|
pub mod playlists;
|
||||||
44
src/components/create_playlist.rs
Normal file
44
src/components/create_playlist.rs
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
use leptos::*;
|
||||||
|
use leptos_icons::*;
|
||||||
|
use leptos::leptos_dom::*;
|
||||||
|
use crate::api::playlists::create_playlist;
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
pub fn CreatePlayList(opened: ReadSignal<bool>,closer: WriteSignal<bool>) -> impl IntoView {
|
||||||
|
|
||||||
|
let (playlist_name, set_playlist_name) = create_signal("".to_string());
|
||||||
|
|
||||||
|
let on_submit = move |ev: leptos::ev::SubmitEvent| {
|
||||||
|
ev.prevent_default();
|
||||||
|
let new_playlist_name = playlist_name.get();
|
||||||
|
spawn_local(async move {
|
||||||
|
let create_result = create_playlist(new_playlist_name).await;
|
||||||
|
if let Err(err) = create_result {
|
||||||
|
// Handle the error here, e.g., log it or display to the user
|
||||||
|
log!("Error creating playlist: {:?}", err);
|
||||||
|
} else {
|
||||||
|
log!("Playlist created successfully!");
|
||||||
|
closer.update(|value| *value = false);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<div class="create-playlist-popup-container" style={move || if opened() {"display:flex"} else {"display:none"}}>
|
||||||
|
<div class="close-button" on:click=move |_| closer.update(|value| *value = false)>
|
||||||
|
<Icon icon=icondata::IoCloseSharp />
|
||||||
|
</div>
|
||||||
|
<h1 class="header">Create Playlist</h1>
|
||||||
|
<form class="create-playlist-form" action="POST" on:submit=on_submit>
|
||||||
|
<input class="name-input" type="text" placeholder="Playlist Name"
|
||||||
|
on:input=move |ev| {
|
||||||
|
set_playlist_name(event_target_value(&ev));
|
||||||
|
log!("playlist name changed to: {}", playlist_name.get());
|
||||||
|
}
|
||||||
|
prop:value=playlist_name
|
||||||
|
/>
|
||||||
|
<button class="create-button" type="submit">Create</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
25
src/components/playlist.rs
Normal file
25
src/components/playlist.rs
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
use leptos::*;
|
||||||
|
use leptos_icons::*;
|
||||||
|
use crate::models::Playlist;
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
pub fn Playlist(playlist: Playlist) -> impl IntoView {
|
||||||
|
let (show_playlist, set_show_playlist) = create_signal(false);
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<div class="playlist" on:click=move|_| set_show_playlist.update(|value| *value=true) >
|
||||||
|
<h1 class="name">{playlist.name.clone()}</h1>
|
||||||
|
<Show
|
||||||
|
when=move || show_playlist()
|
||||||
|
fallback=move || view! {<div></div>}
|
||||||
|
>
|
||||||
|
<div class="playlist-container">
|
||||||
|
<div class="close-button" on:click=move |_| set_show_playlist.update(|value| *value = false)>
|
||||||
|
<Icon icon=icondata::IoCloseSharp />
|
||||||
|
</div>
|
||||||
|
<h1>{playlist.name.clone()}</h1>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
51
src/components/playlists.rs
Normal file
51
src/components/playlists.rs
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
use leptos::*;
|
||||||
|
use leptos::leptos_dom::*;
|
||||||
|
use leptos_icons::*;
|
||||||
|
use crate::components::create_playlist::CreatePlayList;
|
||||||
|
use crate::components::playlist::Playlist;
|
||||||
|
use crate::api::playlists::get_playlists;
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
pub fn Playlists() -> impl IntoView {
|
||||||
|
let (create_playlist_open, set_create_playlist_open) = create_signal(false);
|
||||||
|
let (playlists, set_playlists) = create_signal(vec![]);
|
||||||
|
|
||||||
|
create_effect(move |_| {
|
||||||
|
spawn_local(async move {
|
||||||
|
let playlists = get_playlists().await;
|
||||||
|
if let Err(err) = playlists {
|
||||||
|
// Handle the error here, e.g., log it or display to the user
|
||||||
|
log!("Error getting playlists: {:?}", err);
|
||||||
|
} else {
|
||||||
|
log!("Playlists: {:?}", playlists);
|
||||||
|
set_playlists.update(|value| *value = playlists.unwrap());
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<div class="sidebar-playlists-container">
|
||||||
|
<div class="heading">
|
||||||
|
<h1 class="header">Playlists</h1>
|
||||||
|
<button on:click=move|_| set_create_playlist_open.update(|value|*value = true) class="add-playlist">
|
||||||
|
<div class="add-sign">
|
||||||
|
<Icon icon=icondata::IoAddSharp />
|
||||||
|
</div>
|
||||||
|
New Playlist
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<CreatePlayList opened=create_playlist_open closer=set_create_playlist_open/>
|
||||||
|
<ul class="playlists">
|
||||||
|
{
|
||||||
|
move || playlists.get().iter().enumerate().map(|(index,playlist)| view! {
|
||||||
|
<Playlist playlist=playlist.clone() />
|
||||||
|
}).collect::<Vec<_>>()
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,12 +1,11 @@
|
|||||||
use leptos::leptos_dom::*;
|
use leptos::leptos_dom::*;
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
use leptos_icons::*;
|
use leptos_icons::*;
|
||||||
use crate::api::playlists::create_playlist;
|
use crate::components::playlists::Playlists;
|
||||||
use crate::api::playlists::get_playlists;
|
|
||||||
use crate::models::Playlist;
|
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn Sidebar(setter: WriteSignal<bool>, active: ReadSignal<bool>) -> impl IntoView {
|
pub fn Sidebar(setter: WriteSignal<bool>, active: ReadSignal<bool>, logged_in:ReadSignal<bool>) -> impl IntoView {
|
||||||
let open_dashboard = move |_| {
|
let open_dashboard = move |_| {
|
||||||
setter.update(|value| *value = true);
|
setter.update(|value| *value = true);
|
||||||
log!("open dashboard");
|
log!("open dashboard");
|
||||||
@ -29,106 +28,15 @@ pub fn Sidebar(setter: WriteSignal<bool>, active: ReadSignal<bool>) -> impl Into
|
|||||||
<h1>Search</h1>
|
<h1>Search</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Bottom />
|
<div class="sidebar-bottom-container">
|
||||||
|
<Show
|
||||||
</div>
|
when=move || {logged_in() == true}
|
||||||
}
|
fallback=move|| view!{<h1>LOG IN PLEASE</h1>}
|
||||||
}
|
>
|
||||||
|
<Playlists />
|
||||||
#[component]
|
</Show>
|
||||||
pub fn Bottom() -> impl IntoView {
|
|
||||||
let (create_playlist_open, set_create_playlist_open) = create_signal(false);
|
|
||||||
let (playlists, set_playlists) = create_signal(vec![]);
|
|
||||||
|
|
||||||
create_effect(move |_| {
|
|
||||||
spawn_local(async move {
|
|
||||||
let playlists = get_playlists().await;
|
|
||||||
if let Err(err) = playlists {
|
|
||||||
// Handle the error here, e.g., log it or display to the user
|
|
||||||
log!("Error getting playlists: {:?}", err);
|
|
||||||
} else {
|
|
||||||
log!("Playlists: {:?}", playlists);
|
|
||||||
set_playlists.update(|value| *value = playlists.unwrap());
|
|
||||||
}
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
view! {
|
|
||||||
<div class="sidebar-bottom-container">
|
|
||||||
<div class="heading">
|
|
||||||
<h1 class="header">Playlists</h1>
|
|
||||||
<button on:click=move|_| set_create_playlist_open.update(|value|*value = true) class="add-playlist">
|
|
||||||
<div class="add-sign">
|
|
||||||
<Icon icon=icondata::IoAddSharp />
|
|
||||||
</div>
|
|
||||||
New Playlist
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<CreatePlayList opened=create_playlist_open closer=set_create_playlist_open/>
|
|
||||||
<ul class="playlists">
|
|
||||||
{
|
|
||||||
move || playlists.get().iter().enumerate().map(|(index,playlist)| view! {
|
|
||||||
<Playlist playlist=playlist.clone() />
|
|
||||||
}).collect::<Vec<_>>()
|
|
||||||
}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#[component]
|
|
||||||
pub fn CreatePlayList(opened: ReadSignal<bool>,closer: WriteSignal<bool>) -> impl IntoView {
|
|
||||||
|
|
||||||
let (playlist_name, set_playlist_name) = create_signal("".to_string());
|
|
||||||
|
|
||||||
let on_submit = move |ev: leptos::ev::SubmitEvent| {
|
|
||||||
ev.prevent_default();
|
|
||||||
let new_playlist_name = playlist_name.get();
|
|
||||||
spawn_local(async move {
|
|
||||||
let create_result = create_playlist(new_playlist_name).await;
|
|
||||||
if let Err(err) = create_result {
|
|
||||||
// Handle the error here, e.g., log it or display to the user
|
|
||||||
log!("Error creating playlist: {:?}", err);
|
|
||||||
} else {
|
|
||||||
log!("Playlist created successfully!");
|
|
||||||
closer.update(|value| *value = false);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
||||||
view! {
|
|
||||||
<div class="create-playlist-popup-container" style={move || if opened() {"display:flex"} else {"display:none"}}>
|
|
||||||
<div class="close-button" on:click=move |_| closer.update(|value| *value = false)>
|
|
||||||
<Icon icon=icondata::IoCloseSharp />
|
|
||||||
</div>
|
|
||||||
<h1 class="header">Create Playlist</h1>
|
|
||||||
<form class="create-playlist-form" action="POST" on:submit=on_submit>
|
|
||||||
<input class="name-input" type="text" placeholder="Playlist Name"
|
|
||||||
on:input=move |ev| {
|
|
||||||
set_playlist_name(event_target_value(&ev));
|
|
||||||
log!("playlist name changed to: {}", playlist_name.get());
|
|
||||||
}
|
|
||||||
prop:value=playlist_name
|
|
||||||
/>
|
|
||||||
<button class="create-button" type="submit">Create</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#[component]
|
|
||||||
pub fn Playlist(playlist: Playlist) -> impl IntoView {
|
|
||||||
let (show_playlist, set_show_playlist) = create_signal(false);
|
|
||||||
|
|
||||||
view! {
|
|
||||||
<div class="playlist" on:click=move|_| set_show_playlist.update(|value| *value=true) >
|
|
||||||
<h1 class="name">{playlist.name.clone()}</h1>
|
|
||||||
<div class="playlist-container" style={move || if show_playlist() {"display: flex"} else {"display: none"}}>
|
|
||||||
<div class="close-button" on:click=move |_| set_show_playlist.update(|value| *value = false)>
|
|
||||||
<Icon icon=icondata::IoCloseSharp />
|
|
||||||
</div>
|
|
||||||
<h1>{playlist.name.clone()}</h1>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -51,167 +51,173 @@
|
|||||||
padding: 0.2rem 1rem 1rem 1rem;
|
padding: 0.2rem 1rem 1rem 1rem;
|
||||||
height: calc(100% - 9rem);
|
height: calc(100% - 9rem);
|
||||||
|
|
||||||
.heading {
|
.sidebar-playlists-container {
|
||||||
display: flex;
|
width: 100%;
|
||||||
flex-direction: row;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.header {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: 200;
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-playlist {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
border-radius: 50px;
|
|
||||||
border: none;
|
|
||||||
height: 2.2rem;
|
|
||||||
padding-right: 2rem;
|
|
||||||
padding-left: 2rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.3s ease;
|
|
||||||
.add-sign {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
margin-top: auto;
|
|
||||||
margin-right: 5px;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.add-playlist:hover {
|
|
||||||
background-color: #9e9e9e;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.create-playlist-popup-container {
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
flex-direction: column;
|
|
||||||
// background-color: #1c1c1c;
|
|
||||||
height: 12rem;
|
|
||||||
width: 20rem;
|
|
||||||
border-radius: 2px;
|
|
||||||
padding: 1rem;
|
|
||||||
padding-top: 0.1rem;
|
|
||||||
border: 1px solid grey;
|
|
||||||
position: fixed;
|
|
||||||
top: 40%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
.close-button {
|
|
||||||
position: absolute;
|
|
||||||
top: 5px;
|
|
||||||
right: 5px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 50%;
|
|
||||||
font-size: 1.6rem;
|
|
||||||
transition: all 0.3s;
|
|
||||||
}
|
|
||||||
.close-button:hover {
|
|
||||||
transform: scale(1.1);
|
|
||||||
background-color: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-button:active {
|
|
||||||
transform: scale(0.8);
|
|
||||||
}
|
|
||||||
.header {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: 200;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
.create-playlist-form {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
.name-input {
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
border-bottom: 1px solid grey;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
color: white;
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
.name-input:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
.create-button {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0px;
|
|
||||||
width: 5rem;
|
|
||||||
padding: 0.4rem;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.playlists {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
margin-top: 5px;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
.playlist {
|
.heading {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-playlist {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
border-radius: 50px;
|
||||||
|
border: none;
|
||||||
|
height: 2.2rem;
|
||||||
|
padding-right: 2rem;
|
||||||
|
padding-left: 2rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
.add-sign {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-top: auto;
|
||||||
|
margin-right: 5px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.add-playlist:hover {
|
||||||
|
background-color: #9e9e9e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.create-playlist-popup-container {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
flex-direction: column;
|
||||||
|
// background-color: #1c1c1c;
|
||||||
|
height: 12rem;
|
||||||
|
width: 20rem;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 1rem;
|
||||||
|
padding-top: 0.1rem;
|
||||||
|
border: 1px solid grey;
|
||||||
|
position: fixed;
|
||||||
|
top: 40%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
.close-button {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
right: 5px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
.close-button:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-button:active {
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 200;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.create-playlist-form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
.name-input {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid grey;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: white;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
.name-input:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.create-button {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
width: 5rem;
|
||||||
|
padding: 0.4rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.playlists {
|
||||||
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
display: flex;
|
height: 100%;
|
||||||
flex-direction: row;
|
|
||||||
border: 1px solid grey;
|
|
||||||
height: 3rem;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.3s ease;
|
|
||||||
.name {
|
|
||||||
font-size: 1rem;
|
|
||||||
margin-left: 1rem;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.playlist-container {
|
|
||||||
background-color: red;
|
|
||||||
width: 10rem;
|
|
||||||
height: 10rem;
|
|
||||||
position: fixed;
|
|
||||||
top: 40%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
|
|
||||||
.close-button {
|
.playlist {
|
||||||
position: absolute;
|
padding: 0;
|
||||||
top: 5px;
|
margin: 0;
|
||||||
right: 5px;
|
margin-top: 5px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
flex-direction: row;
|
||||||
align-items: center;
|
border: 1px solid grey;
|
||||||
cursor: pointer;
|
height: 3rem;
|
||||||
border-radius: 50%;
|
border-radius: 5px;
|
||||||
font-size: 1.6rem;
|
cursor: pointer;
|
||||||
transition: all 0.3s;
|
transition: background-color 0.3s ease;
|
||||||
|
.name {
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-left: 1rem;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
.playlist-container {
|
||||||
|
background-color: red;
|
||||||
|
width: 10rem;
|
||||||
|
height: 10rem;
|
||||||
|
position: fixed;
|
||||||
|
top: 40%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
|
||||||
.close-button:hover {
|
.close-button {
|
||||||
transform: scale(1.1);
|
position: absolute;
|
||||||
background-color: rgba(255, 255, 255, 0.1);
|
top: 5px;
|
||||||
}
|
right: 5px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
.close-button:active {
|
.close-button:hover {
|
||||||
transform: scale(0.8);
|
transform: scale(1.1);
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-button:active {
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
.playlist:hover {
|
||||||
.playlist:hover {
|
background-color: #adadad36;
|
||||||
background-color: #adadad36;
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user