Javi/saborflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Playlists

Browse Source
This commit is contained in:
Javier Blanco
2026-05-02 21:43:58 +07:00
parent 9b13ac93de
commit 85ee79cf3d
10 changed files with 349 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
css/style.css
View File

@@ -1528,27 +1528,6 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
.sfB-pl-platform-group {
margin-bottom: 14px;
}
.sfB-pl-platform-label {
display: flex;
align-items: center;
gap: 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 500;
margin-bottom: 10px;
}
.sfB-pl-platform-label .pdot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.sfB-pl-platform-label .pdot.spotify { background: #1DB954; box-shadow: 0 0 6px #1DB954; }
.sfB-pl-platform-label .pdot.ytmusic { background: #FF4444; box-shadow: 0 0 6px #FF4444; }
.sfB-pl-platform-label.spotify { color: rgba(29,185,84,0.85); }
.sfB-pl-platform-label.ytmusic { color: rgba(255,80,80,0.85); }
.sfB-pl-grid5 {
display: grid;
grid-template-columns: repeat(5, 1fr);
@@ -1557,48 +1536,71 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
}
.sfB-pl-card {
padding: 16px;
border-radius: 14px;
border-radius: 16px;
background: rgba(255,246,232,0.04);
border: 1px solid rgba(255,246,232,0.08);
display: flex;
flex-direction: column;
gap: 12px;
gap: 0;
transition: all .2s;
text-decoration: none;
min-height: 140px;
}
.sfB-pl-card:hover { background: rgba(255,246,232,0.07); transform: translateY(-2px); }
.sfB-pl-card.spotify:hover { border-color: rgba(29,185,84,0.45); }
.sfB-pl-card.ytmusic:hover { border-color: rgba(255,68,68,0.4); }
.sfB-pl-card:hover { background: rgba(255,246,232,0.07); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.sfB-pl-card.spotify:hover { border-color: rgba(29,185,84,0.5); }
.sfB-pl-card.ytmusic:hover { border-color: rgba(255,68,68,0.45); }
.sfB-pl-header {
display: flex;
align-items: center;
gap: 10px;
}
.sfB-pl-logo {
width: 34px;
height: 34px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 1px solid rgba(255,255,255,0.1);
}
.sfB-pl-logo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sfB-pl-name {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: -0.2px;
line-height: 1.2;
color: var(--sf-paper);
}
.sfB-pl-spacer { flex: 1; }
.sfB-pl-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
flex: 1;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255,246,232,0.07);
}
.sfB-pl-tag {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.3px;
padding: 3px 7px;
border-radius: 4px;
background: rgba(255,246,232,0.08);
color: rgba(255,246,232,0.6);
font-family: 'JetBrains Mono', monospace;
font-size: 8px;
font-weight: 500;
letter-spacing: 0.8px;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 999px;
background: rgba(255,246,232,0.07);
color: rgba(255,246,232,0.55);
}
.sfB-pl-open {
display: inline-flex;
align-items: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.3px;
padding: 7px 11px;
border-radius: 8px;
transition: all .15s;
align-self: flex-start;
}
.sfB-pl-card.spotify .sfB-pl-open { background: rgba(29,185,84,0.12); color: #1DB954; }
.sfB-pl-card.spotify .sfB-pl-open:hover { background: rgba(29,185,84,0.22); }
.sfB-pl-card.ytmusic .sfB-pl-open { background: rgba(255,68,68,0.12); color: #FF7070; }
.sfB-pl-card.ytmusic .sfB-pl-open:hover { background: rgba(255,68,68,0.22); }
.sfB-pl-card.spotify .sfB-pl-tag { background: rgba(29,185,84,0.1); color: rgba(29,185,84,0.8); }
.sfB-pl-card.ytmusic .sfB-pl-tag { background: rgba(255,68,68,0.1); color: rgba(255,110,110,0.85); }
@media (max-width: 960px) {
.sfB-pl-grid5 { grid-template-columns: repeat(3, 1fr); }