Changeset 108295 in spip-zone


Ignore:
Timestamp:
Jan 2, 2018, 5:16:20 PM (17 months ago)
Author:
cedric@…
Message:

ebauche de skin pour le neoplayer, a affiner

Location:
_plugins_/player/trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/player/trunk/css/mejs-skin-neoplayer.css

    r86887 r108295  
    11/* Dewplayer */
    2 .mejs-container.mejs-neoplayer {
     2.mejs__container.mejs__neoplayer {
    33        background: none;
    44        height:20px !important;
    55}
    6 .mejs-neoplayer .mejs-controls {
     6.mejs__neoplayer .mejs__controls {
    77        background: none;
     8        padding:0;
    89        border-radius:5px;
    910        height:20px;
     
    1516        background-image: linear-gradient(to bottom, #fcfcfc, #cecece); /* Standard, IE10 */
    1617}
    17 .mejs-neoplayer .mejs-controls .mejs-playpause-button {
     18.mejs__neoplayer .mejs__controls .mejs__playpause-button {
    1819        margin-right: 5px;
    1920}
    20 .mejs-neoplayer .mejs-controls .mejs-playpause-button button {
     21.mejs__neoplayer .mejs__controls .mejs__playpause-button button {
    2122        position:relative;
    2223        background: url(img/controls-neoplayer.png) no-repeat left 0;
    2324        width: 16px;
     25        height: 16px;
    2426        margin-right: 5px;
    2527        margin-top: 3px;
    2628        margin-left: 6px;
     29        overflow: visible;
    2730}
    28 .mejs-neoplayer .mejs-controls .mejs-playpause-button button:after {
     31.mejs__neoplayer .mejs__controls .mejs__playpause-button button::after {
    2932        content:"";
    3033        display: block;
     
    3841
    3942}
    40 .mejs-neoplayer .mejs-controls .mejs-play button:hover {
     43.mejs__neoplayer .mejs__controls .mejs__play button:hover {
    4144        background-position: left -16px;
    4245}
    43 .mejs-neoplayer .mejs-controls .mejs-pause button {
     46.mejs__neoplayer .mejs__controls .mejs__pause button {
    4447        background-position: left -32px;
    4548}
    46 .mejs-neoplayer .mejs-controls .mejs-pause button:hover {
     49.mejs__neoplayer .mejs__controls .mejs__pause button:hover {
    4750        background-position: left -48px;
    4851}
    4952
    5053
    51 .mejs-neoplayer .mejs-controls .mejs-time-rail {
     54.mejs__neoplayer .mejs__controls .mejs__time-rail {
    5255        margin-right: 10px;
    5356        margin-left: 10px;
     57        padding-top: 5px;
    5458}
    55 .mejs-neoplayer .mejs-controls .mejs-time-rail>span {
     59.mejs__neoplayer .mejs__controls .mejs__time-rail>span {
    5660        height: 5px;
    5761}
    58 .mejs-neoplayer .mejs-controls .mejs-time-rail .mejs-time-total {
     62.mejs__neoplayer .mejs__controls .mejs__time-rail .mejs__time-total {
    5963        border-top:1px solid #c7c7c7;
    6064        background: none;
    6165}
    6266
    63 .mejs-neoplayer .mejs-controls .mejs-time-rail .mejs-time-buffering {
     67.mejs__neoplayer .mejs__controls .mejs__time-rail .mejs__time-buffering {
    6468        height: 0;
    6569        background: none;
     
    6771}
    6872
    69 .mejs-neoplayer .mejs-controls .mejs-time-rail .mejs-time-loaded {
     73.mejs__neoplayer .mejs__controls .mejs__time-rail .mejs__time-loaded {
    7074        height: 0;
    7175        background: none;
     
    7377}
    7478
    75 .mejs-neoplayer .mejs-controls .mejs-time-rail .mejs-time-current {
     79.mejs__neoplayer .mejs__controls .mejs__time-rail .mejs__time-current {
    7680        height: 0;
    7781        background: none;
    78         position: relative;
    7982}
    80 .mejs-neoplayer .mejs-controls .mejs-time-rail .mejs-time-current:after {
    81         content:"";
     83
     84.mejs__neoplayer .mejs__controls .mejs__time-rail .mejs__time-hovered {
     85        height: 0;
     86        background: none;
     87        border-top:1px solid #fff;
     88}
     89
     90.mejs__neoplayer .mejs__controls .mejs__time-rail .mejs__time-handle-content {
    8291        display: block;
    8392        width: 20px;
     
    8594        border-radius: 3px;
    8695        position: absolute;
    87         top:-5px;
    88         right: 0;
    89         margin-right: -10px;
    90         top:-6px;
     96        top:-9px;
     97        left: -12px;
     98        border:0;
    9199        background-color: #a4a4a4;
    92100        background-image: -moz-linear-gradient(top, #ddd, #888); /* FF 3.6+*/
     
    95103        background-image: -o-linear-gradient(top, #ddd, #888); /* Opera 11.10*/
    96104        background-image: linear-gradient(to bottom, #ddd, #888); /* Standard, IE10 */
    97 
     105        -webkit-transform: scale(1);
     106        -ms-transform: scale(1);
     107        transform: scale(1);
     108}
     109.mejs__neoplayer .mejs__controls .mejs__time-float {
     110        background: #ddd;
     111        border: 0;
     112}
     113.mejs__neoplayer .mejs__controls .mejs__time-float .mejs__time-float-corner {
     114        border-color: #ddd transparent transparent;
    98115}
    99116
    100 
    101 .mejs-neoplayer .mejs-controls .mejs-currenttime-container {
     117.mejs__neoplayer .mejs__controls .mejs__currenttime-container {
    102118        display: none;
    103119}
    104 .mejs-neoplayer .mejs-controls .mejs-duration-container {
     120.mejs__neoplayer .mejs__controls .mejs__duration-container {
    105121        display: none;
    106122}
    107123
    108 .mejs-neoplayer .mejs-controls .mejs-volume-button {
     124.mejs__neoplayer .mejs__controls .mejs__volume-button {
    109125        width:1px;
    110126        visibility:hidden;
    111127}
    112 .mejs-neoplayer .mejs-controls div.mejs-horizontal-volume-slider {
     128.mejs__neoplayer .mejs__controls .mejs__horizontal-volume-slider {
    113129        width:1px;
    114130        visibility:hidden;
  • _plugins_/player/trunk/players/mejs/player.html

    r108294 r108295  
    44<dt class='spip_doc_titre player #ENV{player}'>
    55        <div class="mejs-audio-wrapper audio-wrapper"[ style='width:(#GET{largeur})px;max-width:100%;margin:0 auto;']>
    6                 <audio class="mejs mejs__player[ mejs-(#GET{id_document})][ mejs-(#ENV{skin})][(#ENV{playlist}|oui)mejs-playlist]"
     6                <audio class="mejs mejs__player[ mejs-(#GET{id_document})][ mejs__(#ENV{skin})][(#ENV{playlist}|oui)mejs__playlist]"
    77                       data-id="[(#VAL{mejs-#GET{id_document}}|concat{'-',#GET{url},'-',#ENV{skin},}|md5)]"
    88                       src="#GET{url}"
Note: See TracChangeset for help on using the changeset viewer.