| .control-container{position:relative;grid-area:control;display:grid;grid-template-areas:"left center right";grid-template-columns:1fr 2fr 1fr;padding:0.625rem 1.5rem;background-color:var(--bg)}.control-container>div{display:flex;align-items:center}.control-container .material-symbols-outlined{cursor:pointer;transition:all ease-in-out 0.2s;color:var(--text-muted)}.control-container .left{grid-area:left;display:flex;align-items:center;gap:0.9375rem;overflow:hidden;opacity:0;transition:all 0.2s;width:100%}.control-container .left img{width:3.125rem;height:3.125rem;object-fit:cover;border-radius:0.3125rem}.control-container .left .track-info{display:flex;align-items:flex-start;flex-direction:column;gap:0.625rem;min-width:10%;max-width:70%}.control-container .left .track-info p{width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.control-container .btn{position:relative;display:flex;flex-direction:column;align-items:center}.control-container .btn .label{position:absolute;top:-2.8125rem;padding:0.5rem 0.75rem;background-color:var(--bg-light);border-radius:0.25rem;opacity:0;transition:all ease-in-out 0.2s;pointer-events:none;white-space:nowrap}.control-container .btn span:hover+.label{opacity:1;transition-delay:0.5s}.control-container .center{grid-area:center;display:flex;flex-direction:column;justify-content:center;gap:0.5rem}.control-container .center .actions{display:flex;align-items:center;gap:0.9375rem}.control-container .center .actions .play_btn{font-size:2.5rem;color:var(--text)}.control-container .center .actions span{font-size:1.5625rem}.control-container .center .position{display:flex;align-items:center;gap:0.875rem;width:70%;min-width:21.875rem}.control-container .position-bar{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;border-radius:0.9375rem;height:0.3125rem;transition:all 0.2s ease-in-out;background:linear-gradient(to right, var(--primary) 0%, var(--text-muted) 0%)}.control-container .position-bar::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:0.9375rem;width:0.9375rem;background-color:var(--active-text);border-radius:50%;border:none;transition:0.2s ease-in-out;opacity:0}.control-container .position-bar:hover::-webkit-slider-thumb{opacity:1}.control-container .position-bar:-webkit-slider-runnable-track{background-color:var(--text-muted)}.control-container .position-bar:-moz-range-track{background-color:var(--text-muted)}.control-container .volume-bar{-webkit-appearance:none;appearance:none;width:4.375rem;cursor:pointer;outline:none;border-radius:0.9375rem;height:0.3125rem;transition:all 0.2s ease-in-out;background:linear-gradient(to right, var(--primary) 0%, var(--text-muted) 0%)}.control-container .volume-bar::-webkit-slider-thumb{color:#fff;opacity:0}.control-container .volume-bar:hover::-webkit-slider-thumb{opacity:1}.control-container .volume-bar:-webkit-slider-runnable-track{background-color:var(--text-muted)}.control-container .volume-bar:-moz-range-track{background-color:var(--text-muted)}.control-container .right{grid-area:right;display:flex;justify-content:flex-end;gap:0.9375rem}@media (max-width: 768px){.control-container{grid-template-columns:1fr 2fr 1fr;padding:0.5rem 0.5rem;gap:0.5rem}.control-container .left,.control-container .center,.control-container .right{min-width:0}.non-essential{display:none }.important{display:flex ;align-items:center}.center .actions{gap:0.5rem}.center .btn.important span{font-size:2rem}.left.important img{width:2.2rem;height:2.2rem}.track-info.important{max-width:100px}.track-info.important p.title{font-size:1rem}}@media (max-width: 480px){.control-container{grid-template-columns:1fr 2fr 1fr;padding:0.25rem 0.25rem;gap:0.25rem}.track-info.important{max-width:60px}.track-info.important p.title{font-size:0.9rem}.center .btn.important span{font-size:1.5rem}.left.important img{width:1.5rem;height:1.5rem}} | |