25 lines
2.5 KiB
CSS
25 lines
2.5 KiB
CSS
.musicHero{grid-template-columns:240px minmax(360px,630px) minmax(270px,330px);gap:38px}
|
|
.lyricsPanel{position:relative;z-index:2;height:310px;display:flex;overflow:hidden;flex-direction:column;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(8,11,20,.48);box-shadow:0 18px 45px rgba(0,0,0,.24);backdrop-filter:blur(15px)}
|
|
.lyricsPanel>header{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;border-bottom:1px solid rgba(255,255,255,.08)}
|
|
.lyricsPanel>header>div:first-child{display:flex;flex-direction:column;gap:2px}
|
|
.lyricsPanel>header span{color:#8e72f4;font-size:7px;font-weight:800;letter-spacing:1.5px}
|
|
.lyricsPanel>header strong{font-size:10px}
|
|
.lyricVolume{display:flex;align-items:center;gap:4px}
|
|
.lyricVolume button{width:25px;height:25px;border:0;border-radius:5px;background:transparent;color:#aeb4c3;cursor:pointer;font-size:9px}
|
|
.lyricVolume input{width:58px;height:3px;accent-color:#8b6aff}
|
|
.lyricsScroll{position:relative;flex:1;overflow-y:auto;padding:92px 12px;scrollbar-width:none;mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
|
|
.lyricsScroll::-webkit-scrollbar{display:none}
|
|
.lyricsScroll button{width:100%;display:flex;align-items:center;flex-direction:column;gap:3px;padding:8px 5px;border:0;background:transparent;color:#626a7d;cursor:pointer;text-align:center;transition:color .22s,transform .22s,opacity .22s;opacity:.58}
|
|
.lyricsScroll button:hover{color:#c4cada;opacity:.9}
|
|
.lyricsScroll button strong{font-size:9px;font-weight:600}
|
|
.lyricsScroll button small{color:#51596b;font-size:6px}
|
|
.lyricsScroll .lyricActive{color:#fff;opacity:1;transform:scale(1.05)}
|
|
.lyricsScroll .lyricActive strong{font-size:11px;text-shadow:0 0 15px rgba(139,106,255,.45)}
|
|
.lyricsScroll .lyricActive small{color:#9c8bd9}
|
|
.lyricsEmpty{display:grid;flex:1;place-content:center;justify-items:center;padding:20px;color:#626a7c;text-align:center}
|
|
.lyricsEmpty>span{width:36px;height:36px;display:grid;place-items:center;border:1px solid #343a4c;border-radius:50%;font-size:13px}
|
|
.lyricsEmpty strong{margin-top:10px;color:#9da4b4;font-size:9px}
|
|
.lyricsEmpty small{max-width:190px;margin-top:5px;font-size:7px;line-height:1.6}
|
|
@media(max-width:1050px){.musicHero{grid-template-columns:200px 1fr}.lyricsPanel{grid-column:1/-1;width:min(760px,100%);height:240px;margin:0 auto}.lyricsScroll{padding-top:65px;padding-bottom:65px}}
|
|
@media(max-width:720px){.musicHero{grid-template-columns:1fr}.lyricsPanel{height:235px}.lyricVolume input{width:48px}}
|