feat: permit to play Funkwhale songs

This commit is contained in:
2025-10-17 21:23:44 +04:00
parent 95de788114
commit b3ee9d9837
4 changed files with 233 additions and 13 deletions
+61 -4
View File
@@ -62,22 +62,28 @@
display: flex;
padding: 8px 12px;
border-bottom: 1px solid var(--border-color);
text-decoration: none;
color: inherit;
transition: background-color 0.2s ease;
gap: 8px;
position: relative;
}
.funkwhale-track-item:hover {
background: var(--hover-bg);
text-decoration: none;
color: inherit;
}
.funkwhale-track-item:last-child {
border-bottom: none;
}
.funkwhale-track-item.playing {
background: var(--hover-bg);
}
.funkwhale-track-item.playing .funkwhale-track-title {
color: var(--primary-red);
}
.funkwhale-track-thumb {
width: 60px;
height: 60px;
@@ -90,6 +96,14 @@
justify-content: center;
color: var(--text-secondary);
position: relative;
border: none;
padding: 0;
cursor: pointer;
transition: transform 0.2s ease;
}
.funkwhale-track-thumb:hover {
transform: scale(1.05);
}
.funkwhale-track-thumb img {
@@ -98,7 +112,8 @@
object-fit: cover;
}
.funkwhale-play-icon {
.funkwhale-play-icon,
.funkwhale-pause-icon {
position: absolute;
top: 50%;
left: 50%;
@@ -115,6 +130,18 @@
opacity: 1;
}
.funkwhale-track-item.playing .funkwhale-play-icon {
opacity: 0;
}
.funkwhale-track-item.playing .funkwhale-pause-icon {
opacity: 1;
}
.funkwhale-track-item.playing:hover .funkwhale-pause-icon {
opacity: 1;
}
.funkwhale-track-info {
flex: 1;
min-width: 0;
@@ -170,6 +197,36 @@
font-size: 0.9rem;
}
/* Lien externe vers Funkwhale */
.funkwhale-external-link {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex-shrink: 0;
color: var(--text-secondary);
text-decoration: none;
border-radius: 50%;
transition: all 0.2s ease;
margin-left: auto;
}
.funkwhale-external-link:hover {
background: var(--tag-bg);
color: var(--primary-red);
transform: scale(1.1);
}
.funkwhale-external-link i {
font-size: 0.85rem;
}
/* Masquer l'élément audio */
.funkwhale-track-item audio {
display: none;
}
/* Responsive Design */
@media (max-width: 1024px) {
.funkwhale-section {