about/static/css/plugin-lastfm.css

.lastfm-section {
    position: relative;
}

.lastfm-stats{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 14px;background:rgba(255,255,255,.02);border-radius:10px;
    margin-bottom:14px;box-shadow:inset 0 0 0 1px var(--edge-0)
}
.scrobbles-text{font-size:13px;color:var(--ink-2);font-weight:600}

.current-track{margin-bottom:16px}
.track-main{display:flex;gap:14px;align-items:flex-start}

.track-cover-large{
    width:140px;height:140px;border-radius:14px;overflow:hidden;flex-shrink:0;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .08);
    transition: transform .2s ease, box-shadow .3s ease;
    will-change: transform;
}
.track-cover-large:hover{
    transform:scale(1.02);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.track-cover-large img{width:100%;height:100%;object-fit:cover;display:block}

.track-overlay{
    position:absolute;inset:0;background:rgba(0,0,0,.6);
    display:flex;align-items:center;justify-content:center;
    opacity: 0;
    transition: opacity .25s ease;
    backdrop-filter: blur(4px);
    will-change: opacity;
}
.track-cover-large:hover .track-overlay{opacity:1}

.play-btn{
    width:56px;height:56px;border-radius:50%;border:none;
    background:rgba(122,162,255,.95);color:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:transform .2s ease,background .2s ease,box-shadow .3s ease;
    box-shadow: 0 4px 12px rgba(122, 162, 255, .4);
    padding-left: 4px;
    will-change: transform;
}
.play-btn:hover{
    transform:scale(1.08);background:var(--accent);
    box-shadow: 0 6px 18px rgba(122, 162, 255, .6)
}
.play-btn:active{transform:scale(.95)}

.track-info{flex:1;min-width:0}
.track-status{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.status-text{font-size:13px;color:var(--muted);font-weight:600}
.track-status.now-playing .status-text{color:var(--good)}

.track-title{
    font-size:clamp(16px,3.5vw,20px);font-weight:800;color:var(--ink);
    margin-bottom:4px;line-height:1.2;word-wrap:break-word
}
.track-artist{font-size:14px;color:var(--ink-2);margin-bottom:3px;font-weight:600}
.track-album{font-size:13px;color:var(--muted);margin-bottom:10px}

.track-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.track-actions .btn{padding:6px 12px;font-size:12px;display:inline-flex;align-items:center;gap:6px}

.recent-tracks{margin-top:18px}
.recent-tracks h4{
    font-size:15px;font-weight:700;margin:0 0 10px;color:var(--ink);
    display:flex;align-items:center;gap:8px
}
.recent-tracks-list{display:flex;flex-direction:column;gap:8px}

.recent-track-item{
    display:flex;align-items:center;gap:10px;padding:8px 10px;
    border-radius:10px;background:rgba(255,255,255,.02);
    transition:background .2s ease,transform .15s ease;cursor:pointer;
    box-shadow: inset 0 0 0 1px var(--edge-0);
    will-change: transform;
}
.recent-track-item:hover{
    background:rgba(255,255,255,.05);transform:translateX(2px)
}

.recent-track-cover{
    width:44px;height:44px;border-radius:8px;overflow:hidden;flex-shrink:0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .08)
}
.recent-track-cover img{width:100%;height:100%;object-fit:cover}

.recent-track-info{flex:1;min-width:0;margin-right:8px}
.recent-track-name{
    font-size:13px;font-weight:700;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px
}
.recent-track-artist{
    font-size:12px;color:var(--ink-2);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.recent-track-time{
    font-size:11px;color:var(--muted);flex-shrink:0;
    font-variant-numeric:tabular-nums
}

.custom-music-player{
    display:flex;align-items:center;gap:12px;padding:12px;
    background:linear-gradient(135deg, rgba(122,162,255,.08) 0%, rgba(182,146,255,.06) 100%);
    border-radius:14px;margin-top:12px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 4px 12px rgba(0, 0, 0, .2);
}

.player-artwork-mini{
    width:48px;height:48px;border-radius:8px;overflow:hidden;flex-shrink:0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .1)
}
.player-artwork-mini img{width:100%;height:100%;object-fit:cover}

.player-info{flex:1;min-width:0;margin-right:8px}
.player-track-name{
    font-weight:700;font-size:14px;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px
}
.player-artist-name{
    font-size:12px;color:var(--ink-2);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

.player-progress-container{flex:1;min-width:120px;max-width:200px}
.player-progress-bar{
    width:100%;height:6px;background:rgba(0,0,0,.25);border-radius:3px;
    position:relative;cursor:pointer;overflow:hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3)
}
.player-progress-fill{
    height:100%;background:linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
    border-radius:3px;width:0%;transition:width .1s linear;
    box-shadow: 0 0 6px rgba(122, 162, 255, .4);
    position: relative;
    will-change: width;
}
.player-progress-fill::after{
    content:'';position:absolute;right:0;top:0;bottom:0;width:8px;
    background:radial-gradient(circle, rgba(255,255,255,.6), transparent);
    border-radius:50%
}

.player-time{
    display:flex;justify-content:space-between;margin-top:4px;
    font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums
}

.player-controls{display:flex;gap:8px;align-items:center}
.player-btn{
    width:36px;height:36px;border-radius:50%;border:none;
    background:rgba(255,255,255,.08);color:var(--ink);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .2s ease,transform .15s ease,box-shadow .2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2)
}
.player-btn:hover{
    background:rgba(255,255,255,.14);transform:scale(1.05);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .3)
}
.player-btn:active{transform:scale(.95)}

#player-play-pause{
    width:42px;height:42px;background:var(--accent);
    box-shadow: 0 3px 8px rgba(122, 162, 255, .3)
}
#player-play-pause:hover{
    background:color-mix(in oklab, var(--accent) 90%, white);
    box-shadow: 0 4px 12px rgba(122, 162, 255, .4)
}

.player-volume{
    width:80px;height:4px;-webkit-appearance:none;appearance:none;
    background:rgba(0,0,0,.25);border-radius:2px;outline:none;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.3)
}
.player-volume::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;width:14px;height:14px;
    background:var(--accent);border-radius:50%;cursor:pointer;
    box-shadow:0 2px 4px rgba(0,0,0,.3);transition:transform .15s ease
}
.player-volume::-webkit-slider-thumb:hover{transform:scale(1.2)}
.player-volume::-moz-range-thumb{
    width:14px;height:14px;background:var(--accent);border-radius:50%;
    cursor:pointer;border:none;box-shadow:0 2px 4px rgba(0,0,0,.3);
    transition:transform .15s ease
}
.player-volume::-moz-range-thumb:hover{transform:scale(1.2)}

.play-btn-large{
    width:64px !important;height:64px !important;
    background: rgba(122, 162, 255, .95) !important;
    backdrop-filter: blur(4px)
}
.play-btn-large:hover{
    background:var(--accent) !important;
    box-shadow: 0 6px 18px rgba(122, 162, 255, .5) !important
}

#lastfm-audio-element{display:none}

@media (max-width:900px){
    .track-main{flex-direction:column;align-items:center;text-align:center}
    .track-cover-large{width:180px;height:180px}
    .custom-music-player{flex-wrap:wrap;gap:10px}
    .player-progress-container{order:4;width:100%;max-width:none}
    .player-volume{width:60px}
}

@media (max-width:680px){
    .track-cover-large{width:140px;height:140px}
}

@media (max-width:520px){
    .track-main{gap:12px}
    .track-cover-large{width:120px;height:120px}
    .track-title{font-size:16px}
    .player-artwork-mini{width:40px;height:40px}
    .player-track-name{font-size:13px}
    .player-artist-name{font-size:11px}
    .player-btn{width:32px;height:32px}
    #player-play-pause{width:36px;height:36px}
    .player-volume{display:none}
}