https://linod.it.idolcodesource.in/index.php?action=history&feed=atom&title=MediaWiki%3AGreen-audio-player.min.css 2026-06-10T07:13:57Z Revision history for this page on the wiki MediaWiki 1.38.2 https://linod.it.idolcodesource.in/index.php?title=MediaWiki:Green-audio-player.min.css&diff=65242&oldid=prev 2023-10-09T17:59:54Z

<p>Created page with &quot;@keyframes spin { from { transform: rotateZ(0); } to { transform: rotateZ(360deg); } } .green-audio-player { width: 400px; min-width: 300px; height: 56px; box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07); display: flex !important; justify-content: space-between; align-items: center; padding-left: 24px; padding-right: 24px; border-radius: 4px; user-select: none; background-color: #fff; box-sizing: border-box; outline: none; } .gre...&quot;</p> <p><b>New page</b></p><div>@keyframes spin {<br /> from {<br /> transform: rotateZ(0); }<br /> to {<br /> transform: rotateZ(360deg);<br /> } <br /> }<br /> <br /> .green-audio-player {<br /> width: 400px;<br /> min-width: 300px;<br /> height: 56px;<br /> box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07);<br /> display: flex !important;<br /> justify-content: space-between;<br /> align-items: center;<br /> padding-left: 24px;<br /> padding-right: 24px;<br /> border-radius: 4px;<br /> user-select: none;<br /> background-color: #fff;<br /> box-sizing: border-box;<br /> outline: none; }<br /> .green-audio-player.player-accessible .play-pause-btn:hover,<br /> .green-audio-player.player-accessible .controls:hover,<br /> .green-audio-player.player-accessible .volume__button:hover,<br /> .green-audio-player.player-accessible .volume__controls:hover,<br /> .green-audio-player.player-accessible .download:hover {<br /> outline: dotted 1px #999; }<br /> .green-audio-player svg,<br /> .green-audio-player img {<br /> display: block; }<br /> .green-audio-player .holder {<br /> position: relative; }<br /> .green-audio-player .holder .loading .loading__spinner {<br /> position: absolute;<br /> left: -3px;<br /> bottom: 2px;<br /> width: 16px;<br /> height: 16px;<br /> border: 2px solid #b0b0b0;<br /> border-right-color: rgba(0, 0, 0, 0);<br /> border-radius: 50%;<br /> animation: spin 0.4s linear infinite; }<br /> .green-audio-player .holder .play-pause-btn {<br /> visibility: hidden;<br /> cursor: pointer;<br /> outline: none; }<br /> .green-audio-player .holder .play-pause-btn:focus {<br /> outline: none; }<br /> .green-audio-player .slider {<br /> flex-grow: 1;<br /> background-color: #d8d8d8;<br /> cursor: pointer;<br /> position: relative; }<br /> .green-audio-player .slider .gap-progress {<br /> background-color: #44bfa3;<br /> border-radius: inherit;<br /> position: absolute;<br /> pointer-events: none; }<br /> .green-audio-player .slider .gap-progress .pin {<br /> height: 16px;<br /> width: 16px;<br /> border-radius: 8px;<br /> background-color: #44bfa3;<br /> position: absolute;<br /> pointer-events: all;<br /> box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.32); }<br /> .green-audio-player .slider .gap-progress .pin::after {<br /> content: &quot;&quot;;<br /> display: block;<br /> background: rgba(0, 0, 0, 0);<br /> width: 200%;<br /> height: 200%;<br /> margin-left: -50%;<br /> margin-top: -50%;<br /> border-radius: 50%; }<br /> .green-audio-player .controls {<br /> font-family: &quot;Roboto&quot;, sans-serif;<br /> font-size: 16px;<br /> line-height: 18px;<br /> color: #55606e;<br /> display: flex;<br /> flex-grow: 1;<br /> justify-content: space-between;<br /> align-items: center;<br /> margin-left: 15px;<br /> margin-right: 15px;<br /> outline: none; }<br /> .green-audio-player .controls .controls__slider {<br /> margin-left: 16px;<br /> margin-right: 16px;<br /> border-radius: 2px;<br /> height: 4px; }<br /> .green-audio-player .controls .controls__slider .controls__progress {<br /> width: 0;<br /> height: 100%; }<br /> .green-audio-player .controls .controls__slider .controls__progress .progress__pin {<br /> right: -8px;<br /> top: -6px; }<br /> .green-audio-player .controls span {<br /> cursor: default; }<br /> .green-audio-player .controls:focus {<br /> outline: none; }<br /> .green-audio-player .volume {<br /> position: relative; }<br /> .green-audio-player .volume .volume__button {<br /> cursor: pointer;<br /> outline: none; }<br /> .green-audio-player .volume .volume__button:focus {<br /> outline: none; }<br /> .green-audio-player .volume .volume__button.open path {<br /> fill: #44bfa3; }<br /> .green-audio-player .volume .volume__controls {<br /> width: 30px;<br /> height: 135px;<br /> background-color: rgba(0, 0, 0, 0.62);<br /> border-radius: 7px;<br /> position: absolute;<br /> left: -3px;<br /> bottom: 52px;<br /> flex-direction: column;<br /> align-items: center;<br /> display: flex;<br /> z-index: 2;<br /> outline: none; }<br /> .green-audio-player .volume .volume__controls .volume__slider {<br /> margin-top: 12px;<br /> margin-bottom: 12px;<br /> width: 6px;<br /> border-radius: 3px; }<br /> .green-audio-player .volume .volume__controls .volume__slider .volume__progress {<br /> bottom: 0;<br /> height: 100%;<br /> width: 6px; }<br /> .green-audio-player .volume .volume__controls .volume__slider .volume__progress .volume__pin {<br /> left: -5px;<br /> top: -8px; }<br /> .green-audio-player .volume .volume__controls:focus {<br /> outline: none; }<br /> .green-audio-player .volume .volume__controls.hidden {<br /> display: none; }<br /> .green-audio-player .volume .volume__controls.top {<br /> bottom: 52px;<br /> left: -3px; }<br /> .green-audio-player .volume .volume__controls.middle {<br /> bottom: -54px;<br /> left: 54px; }<br /> .green-audio-player .volume .volume__controls.bottom {<br /> bottom: -164px;<br /> left: -3px; }<br /> .green-audio-player .download {<br /> display: none;<br /> margin-left: 16px;<br /> cursor: pointer;<br /> outline: none; }<br /> .green-audio-player .download:focus {<br /> outline: none; }<br /> .green-audio-player:focus {<br /> outline: none; }<br /> <br /> .message__offscreen {<br /> border: 0;<br /> clip: rect(1px, 1px, 1px, 1px);<br /> clip-path: inset(50%);<br /> height: 1px;<br /> margin: -1px;<br /> overflow: hidden;<br /> padding: 0;<br /> position: absolute;<br /> width: 1px;<br /> word-wrap: normal; }</div>

Jayprakash12345