|
imported>Freejp |
| ১ নং লাইন: |
১ নং লাইন: |
| /* MP3 Player */ | | <noinclude>__NOTOC__ |
| .green-audio-player{ | | This widget allows you to embed '''[https://github.com/etianen/html5media HTML5 Audio Media]''' on your wiki page. |
| width:320px;
| | |
| min-width:300px;
| | Created by [https://www.wikihoster.net Karsten Hoffmeyer]. |
| height:36px;
| | |
| -webkit-box-shadow:0 4px 16px 0 rgba(0,0,0,.07);
| | == Using this widget == |
| box-shadow:0 4px 16px 0 rgba(0,0,0,.07);
| | To insert this widget, use the following code: |
| display:-webkit-box!important;
| | |
| display:-ms-flexbox!important;
| | <nowiki>{{#widget:Audio|url=https://bn.sarkarverse.org/PS/1000-1999-f/1669%20VISHVA%20LIILA%27%20RACANA%27%20KARE.mp3}}</nowiki> |
| display:fålex!important;
| | </noinclude> |
| -webkit-box-pack:justify;
| | <includeonly><div class="sarkarverse-mp3-player"><audio crossorigin><source src="<!--{$url|validate:url}-->" type="audio/mpeg"></audio></div></includeonly> |
| -ms-flex-pack:justify;
| |
| justify-content:space-between;
| |
| -webkit-box-align:center;
| |
| -ms-flex-align:center;
| |
| align-items:center;
| |
| padding-left:24px;
| |
| padding-right:24px;
| |
| border-radius:4px;
| |
| -webkit-user-select:none;
| |
| -moz-user-select:none;
| |
| -ms-user-select:none;
| |
| user-select:none;
| |
| background-color:#fff;
| |
| -webkit-box-sizing:border-box;
| |
| box-sizing:border-box;
| |
| outline:none
| |
| }
| |
| .green-audio-player.player-accessible .controls:hover,.green-audio-player.player-accessible .download:hover,.green-audio-player.player-accessible .play-pause-btn:hover,.green-audio-player.player-accessible .volume__button:hover,.green-audio-player.player-accessible .volume__controls:hover{
| |
| outline:1px dotted #999
| |
| }
| |
| .green-audio-player img,.green-audio-player svg{
| |
| display:block
| |
| }
| |
| .green-audio-player .holder{
| |
| position:relative
| |
| }
| |
| .green-audio-player .holder .loading .loading__spinner{
| |
| position:absolute;
| |
| left:-3px;
| |
| bottom:2px;
| |
| width:16px;
| |
| height:16px;
| |
| border:2px solid #b0b0b0;
| |
| border-right-color:transparent;
| |
| border-radius:50%;
| |
| -webkit-animation:spin .4s linear infinite;
| |
| animation:spin .4s linear infinite
| |
| }
| |
| .green-audio-player .holder .play-pause-btn{
| |
| visibility:hidden;
| |
| cursor:pointer;
| |
| outline:none
| |
| }
| |
| .green-audio-player .holder .play-pause-btn:focus{
| |
| outline:none
| |
| }
| |
| .green-audio-player .slider{
| |
| -webkit-box-flex:1;
| |
| -ms-flex-positive:1;
| |
| flex-grow:1;
| |
| background-color:#d8d8d8;
| |
| cursor:pointer;
| |
| position:relative
| |
| }
| |
| .green-audio-player .slider .gap-progress{
| |
| background-color:#44bfa3;
| |
| border-radius:inherit;
| |
| position:absolute;
| |
| pointer-events:none
| |
| }
| |
| .green-audio-player .slider .gap-progress .pin{
| |
| height:16px;
| |
| width:16px;
| |
| border-radius:8px;
| |
| background-color:#44bfa3;
| |
| position:absolute;
| |
| pointer-events:all;
| |
| -webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,.32);
| |
| box-shadow:0 1px 1px 0 rgba(0,0,0,.32)
| |
| }
| |
| .green-audio-player .slider .gap-progress .pin:after{
| |
| content:"";
| |
| display:block;
| |
| background:transparent;
| |
| width:200%;
| |
| height:200%;
| |
| margin-left:-50%;
| |
| margin-top:-50%;
| |
| border-radius:50%
| |
| }
| |
| .green-audio-player .controls{
| |
| font-family:Roboto,sans-serif;
| |
| font-size:16px;
| |
| line-height:18px;
| |
| color:#55606e;
| |
| display:-webkit-box;
| |
| display:-ms-flexbox;
| |
| display:flex;
| |
| -webkit-box-flex:1;
| |
| -ms-flex-positive:1;
| |
| flex-grow:1;
| |
| -webkit-box-pack:justify;
| |
| -ms-flex-pack:justify;
| |
| justify-content:space-between;
| |
| -webkit-box-align:center;
| |
| -ms-flex-align:center;
| |
| align-items:center;
| |
| margin-left:15px;
| |
| margin-right:15px;
| |
| outline:none
| |
| }
| |
| .green-audio-player .controls .controls__slider{
| |
| margin-left:16px;
| |
| margin-right:16px;
| |
| border-radius:2px;
| |
| height:4px
| |
| }
| |
| .green-audio-player .controls .controls__slider .controls__progress{
| |
| width:0;
| |
| height:100%
| |
| }
| |
| .green-audio-player .controls .controls__slider .controls__progress .progress__pin{ | |
| right:-8px;
| |
| top:-6px
| |
| } | |
| .green-audio-player .controls span{
| |
| cursor:default
| |
| } | |
| .green-audio-player .controls:focus{
| |
| outline:none
| |
| }
| |
| .green-audio-player .volume{
| |
| position:relative
| |
| }
| |
| .green-audio-player .volume .volume__button{
| |
| cursor:pointer;
| |
| outline:none
| |
| }
| |
| .green-audio-player .volume .volume__button:focus{
| |
| outline:none
| |
| } | |
| .green-audio-player .volume .volume__button.open path{
| |
| fill:#44bfa3
| |
| }
| |
| .green-audio-player .volume .volume__controls{
| |
| width:30px;
| |
| height:135px;
| |
| background-color:rgba(0,0,0,.62);
| |
| border-radius:7px;
| |
| position:absolute;
| |
| left:-3px;
| |
| bottom:52px;
| |
| -webkit-box-orient:vertical;
| |
| -webkit-box-direction:normal;
| |
| -ms-flex-direction:column;
| |
| flex-direction:column;
| |
| -webkit-box-align:center;
| |
| -ms-flex-align:center;
| |
| align-items:center;
| |
| display:-webkit-box;
| |
| display:-ms-flexbox;
| |
| display:flex;
| |
| z-index:2;
| |
| outline:none
| |
| }
| |
| .green-audio-player .volume .volume__controls .volume__slider{
| |
| margin-top:12px;
| |
| margin-bottom:12px;
| |
| width:6px;
| |
| border-radius:3px
| |
| }
| |
| .green-audio-player .volume .volume__controls .volume__slider .volume__progress{
| |
| bottom:0;
| |
| height:100%;
| |
| width:6px
| |
| }
| |
| .green-audio-player .volume .volume__controls .volume__slider .volume__progress .volume__pin{
| |
| left:-5px;
| |
| top:-8px
| |
| }
| |
| .green-audio-player .volume .volume__controls:focus{
| |
| outline:none
| |
| }
| |
| .green-audio-player .volume .volume__controls.hidden{
| |
| display:none
| |
| }
| |
| .green-audio-player .volume .volume__controls.top{
| |
| bottom:52px;
| |
| left:-3px
| |
| }
| |
| .green-audio-player .volume .volume__controls.middle{
| |
| bottom:-54px;
| |
| left:54px
| |
| }
| |
| .green-audio-player .volume .volume__controls.bottom{
| |
| bottom:-164px;
| |
| left:-3px
| |
| }
| |
| .green-audio-player .download{
| |
| display:none;
| |
| margin-left:16px;
| |
| cursor:pointer;
| |
| outline:none
| |
| }
| |
| .green-audio-player .download:focus,.green-audio-player:focus{
| |
| outline:none
| |
| }
| |
| .message__offscreen{
| |
| border:0;
| |
| clip:rect(1px,1px,1px,1px);
| |
| -webkit-clip-path:inset(50%);
| |
| clip-path:inset(50%);
| |
| height:1px;
| |
| margin:-1px;
| |
| overflow:hidden;
| |
| padding:0;
| |
| position:absolute;
| |
| width:1px;
| |
| word-wrap:normal
| |
| }
| |