#pannel { width: 0%; /* width: 15%; */ border-right: solid 1px #10101011; text-align: center; /* background-color: #A0D2EBa1; */ /* background-color: #F6F4DCa0; */ position: relative; } .display-switch-bt { position: absolute; left: 100%; top: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; } .display-switch-bt a { display: inline-block; width: 100%; height: 100%; } .pannel-content { display: none; } #cover-title { padding: 10px 5px; padding-bottom: 0; text-align: center; font-weight: bold; height: 25px; } .text-line { display: inline-block; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #cover-artist { padding: 0 5px; padding-bottom: 0; text-align: center; font-size: 0.8em; color: gray; height: 25px; } #cover-square { /* border: solid 1px black; */ width: 95%; aspect-ratio: 1; margin: 5% auto; margin-top: 0; position: relative; } #cover { width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; } .liked-song { position: absolute; left: 0%; bottom: 0%; width: 32px; height: 32px; } .liked-song > img { display: inline-block; width: 100%; height: 100%; } #lyrics-container { min-height: 50px; /* width: 240px; */ margin: 0 auto; /* border: solid 2px black; */ /* background-color: #E4EBF5; */ } #controls { display: flex; flex-direction: column; width: 95%; height: 400px; margin: 0 auto; /* border: solid 1px black; */ } #song-ctl { width: 100%; height: 100px; /* border: solid 1px black; */ display: flex; } #basic-ctl { display: flex; width: 100%; align-items: center; justify-content: center; margin: 0; } #basic-ctl div { margin: 0; width: 33.3%; height: 33.3%; } #basic-ctl a { display: inline-block; width: 100%; height: 100%; } #basic-ctl img { width: 32px; height: 32px; } #progress-ctl { display: flex; flex-direction: column; align-items: center; justify-content: center; /* border: solid 1px black; */ } #play-time { margin-bottom: 0; } .progress { width: 100%; height: 20px; display: flex; align-items: center; justify-content: center; position: relative; } .progress-bar-container { height: 5px; width: 100%; border: solid 1px black; border-radius: 5px; background-color: #F0F8FF; overflow: hidden; } .progress-bar { width: 100%; height: 100%; transform: translateX(-100%); display: flex; } .progress-bar-filled { width: 100%; background-color: #8CC63F; border-radius: 5px; } .progress-bar-drag { position: absolute; left: 0%; top: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; display: none; background-image: url("../images/clover.svg"); background-size: cover; } #sound-ctl { width: 100%; display: flex; height: 100px; justify-content: center; align-items: center; /* border: solid 1px black; */ } #volume { width: 100%; }