パーツ番号 07-06-03 ・ CSSのみ

プレイリストキュー表示

現在再生中の曲がハイライトされ、次に流れる曲が控えて並ぶプレイリスト表示です。

autocss

プレビュー

ソースコード

HTML

<ul class="queue07-06-03">
          <li class="now07-06-03"><span class="pn07-06-03">01</span>夜明けのメロディ<span class="playing07-06-03">再生中</span></li>
          <li><span class="pn07-06-03">02</span>青い予感</li>
          <li><span class="pn07-06-03">03</span>星屑のステップ</li>
          <li><span class="pn07-06-03">04</span>ノスタルジア</li>
        </ul>

CSS

.d07-06-03{ display:block; padding:24px; }
        .d07-06-03 .queue07-06-03{ list-style:none; margin:0; padding:0; font-size:13px; color:#555; }
        .d07-06-03 .queue07-06-03 li{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; margin-bottom:4px; }
        .d07-06-03 .pn07-06-03{ font-size:11px; color:#999; width:18px; }
        .d07-06-03 .now07-06-03{ background:#eef2ff; color:#4338ca; font-weight:700; }
        .d07-06-03 .playing07-06-03{ margin-left:auto; font-size:10px; background:#4338ca; color:#fff; padding:2px 7px; border-radius:99px; animation:blink07-06-03 1.6s ease-in-out infinite; }
        @keyframes blink07-06-03{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

クラス名 .d07-06-03 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。