.artplayer-plugin-control { .art-bottom { display: flex; align-items: center; flex-direction: column; position: absolute; height: 68px; min-width: 400px; max-width: 600px; user-select: none; border-radius: 10px; transition: opacity 0.3s ease; left: 50%; transform: translateX(-50%); bottom: 10px; font-size: 13px; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); background-color: rgba(0, 0, 0, 0.7); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.2); background-image: none; pointer-events: auto; padding: 0; .art-progress { width: 65%; display: flex; align-items: center; justify-content: space-between; gap: 10px; .art-control-thumbnails { bottom: 35px; } .art-control-progress { width: 100%; .art-control-progress-inner, .art-progress-loaded, .art-progress-played { border-radius: 5px; } } .art-progress-tip { top: -40px !important; } } .art-controls { width: 100%; height: auto; flex: 1; padding: 0 5px; .art-control-time, .art-controls-center { display: none; } .art-volume-panel { width: 60px !important; } } .art-selector-list { background-color: rgba(0, 0, 0, 0.8) !important; } .apa-control-current, .apa-control-duration { display: flex; justify-content: center; line-height: 1; width: 17.5%; position: absolute; top: 10px; } .apa-control-current { left: 0; } .apa-control-duration { right: 0; } } .art-settings { bottom: 85px; } &.art-control-show { .art-subtitle { bottom: 80px; } } } .apa-control-current, .apa-control-duration { display: none; }