Changeset 109601 in spip-zone


Ignore:
Timestamp:
Mar 18, 2018, 6:34:50 PM (19 months ago)
Author:
placido@…
Message:

Compléter le markup du modèle, pour cibler plus facilement certains éléments

  • label du bouton play dans un <span/> pour le cacher mais le laisser accessible. L'astuce précédente avec text-indent avait le désavantage de générer un outline pas très heureux lors du focus (cf: https://pic.infini.fr/WWWPT6M7/nRzupz1N.png).
  • Harmoniser :focus et :hover
  • Remplacer le <br> par du style CSS
Location:
_plugins_/oembed
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/oembed/css/oembed.css

    r103989 r109601  
    5353/* Play button */
    5454.oe-play-button {position: relative;cursor: pointer;}
    55 .oe-play-button button {text-indent:-5000em;position: absolute;display: block;padding:0;left: 50%;top: 50%;border: none;background:#000;width: 66px;height: 66px;margin-left: -33px;margin-top: -33px;z-index:10;-moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 50%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
     55.oe-play-button button {position: absolute;display: block;padding:0;left: 50%;top: 50%;border: none;background:#000;width: 66px;height: 66px;margin-left: -33px;margin-top: -33px;z-index:10;-moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 50%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
    5656.oe-play-button button:before {content:"";position: absolute;top:-1px;left:-1px;display: block;padding:0;border:4px solid #ddd;width: 68px;height: 68px;-moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 50%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
    5757.oe-play-button button:after {content:"";position: absolute;display: block;left: 50%;top: 50%;border-left:20px solid #ddd;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left: -7px;margin-top: -10px;z-index:11;}
    58 .oe-play-button:hover button {background-color: #DD2826;}
    59 .oe-play-button:hover button:before{border-color:#fff;}
    60 .oe-play-button:hover button:after{border-left-color:#fff;}
     58.oe-play-button button:hover {cursor: pointer;}
     59.oe-play-button button .label {position: fixed; left: -999em;}
     60.oe-play-button:hover button,.oe-play-button button:focus {background-color: #DD2826;}
     61.oe-play-button:hover button:before,.oe-play-button button:focus:before{border-color:#fff;}
     62.oe-play-button:hover button:after,.oe-play-button:hover button:focus:after{border-left-color:#fff;}
     63
     64/* Legende */
     65.oe-title {}
     66.oe-author_name { display: inline-block; width: 100%; font-style: italic;}
    6167
    6268/* Cas particuliers */
  • _plugins_/oembed/modeles/oembed_photo.html

    r107159 r109601  
    55</span>]
    66<figcaption>
    7 [<div class="spip_doc_titre" style="max-width:#ENV{data/width}px;"><a href="#ENV*{url}" class="oe-title">(#ENV*{data/title})</a>[
    8 <span class="oe-author_name"><br /><i><:par_auteur:>(#ENV*{data/author_name}|oui)[(#ENV*{data/author_url}|lien_ou_expose{#ENV*{data/author_name},#ENV*{data/author_url}|non})]</i></span>]</div>]
     7[<div class="spip_doc_titre" style="max-width:#ENV{data/width}px;"><a href="#ENV*{url}" class="oe-title">(#ENV*{data/title})</a>[(#ENV*{data/author_name}|oui)
     8<span class="oe-author_name"><span class="par"><:par_auteur:></span>[(#ENV*{data/author_url}|?{[<a class="nom" href="#ENV*{data/author_url}">(#ENV*{data/author_name})</a>],<span class="nom">#ENV*{data/author_name}}</span>)]</span>]</div>]
    99[<div class="spip_doc_titre oembed-source">(#ENV*{lien}|echappe_retour)</div>]
    1010</figcaption>
  • _plugins_/oembed/modeles/oembed_rich.html

    r107159 r109601  
    77                onclick="if (jQuery(this).is('.oe-play-button')){jQuery(this).removeClass('oe-play-button').addClass('loading').html(decodeURIComponent('[(#ENV*{data/html}|oembed_force_video_autoplay|rawurlencode|texte_script)]'));}"
    88        ]>
    9                 [(#GET{async}|oui) <button onclick="jQuery(this).parent().trigger('click');"><:oembed:bouton_lecture:></button>]
     9                [(#GET{async}|oui) <button onclick="jQuery(this).parent().trigger('click');"><span class="label"><:oembed:bouton_lecture:></span></button>]
    1010                [(#GET{async}|non) [(#ENV*{data/html}|et{#ENV{autoplay}}|?{[(#ENV*{data/html}|oembed_force_video_autoplay)],#ENV*{data/html}|sinon{#ENV{url}}})] ]
    1111        </div>
     
    1313</div>
    1414<figcaption>
    15 [<div class="spip_doc_titre" style="max-width:#ENV{data/width}px;"><a href="#ENV*{url}" class="oe-title">(#ENV*{data/title})</a>[
    16 <span class="oe-author_name"><br /><i><:par_auteur:>(#ENV*{data/author_name}|oui)[(#ENV*{data/author_url}|lien_ou_expose{#ENV*{data/author_name},#ENV*{data/author_url}|non})]</i></span>]</div>]
     15[<div class="spip_doc_titre" style="max-width:#ENV{data/width}px;"><a href="#ENV*{url}" class="oe-title">(#ENV*{data/title})</a>[(#ENV*{data/author_name}|oui)
     16<span class="oe-author_name"><span class="par"><:par_auteur:></span>[(#ENV*{data/author_url}|?{[<a class="nom" href="#ENV*{data/author_url}">(#ENV*{data/author_name})</a>],<span class="nom">#ENV*{data/author_name}}</span>)]</span>]</div>]
    1717[<div class="spip_doc_titre oembed-source">(#ENV*{lien}|echappe_retour)</div>]
    1818</figcaption>
  • _plugins_/oembed/modeles/oembed_video.html

    r107159 r109601  
    77                        onclick="if (jQuery(this).is('.oe-play-button')){jQuery(this).removeClass('oe-play-button').addClass('loading').html(decodeURIComponent('[(#ENV*{data/html}|oembed_force_video_autoplay|rawurlencode|texte_script)]'));}"
    88                ]>
    9                         [(#GET{async}|oui)<button onclick="jQuery(this).parent().trigger('click');"><:oembed:bouton_lecture:></button>]
     9                        [(#GET{async}|oui)<button onclick="jQuery(this).parent().trigger('click');"><span class="label"><:oembed:bouton_lecture:></span></button>]
    1010                        [(#GET{async}|non)[(#ENV*{data/html}|et{#ENV{autoplay}}|?{[(#ENV*{data/html}|oembed_force_video_autoplay)],#ENV*{data/html}|sinon{#ENV{url}}})] ]
    1111        </div>
     
    1414<figcaption>
    1515[<div class="spip_doc_titre" style="max-width:#ENV{data/width}px;"><a href="#ENV*{url}" class="oe-title">(#ENV*{data/title})</a>[(#ENV*{data/author_name}|oui)
    16 <span class="oe-author_name"><br /><i><:par_auteur:> [(#ENV*{data/author_url}|?{[<a href="#ENV*{data/author_url}">(#ENV*{data/author_name})</a>],#ENV*{data/author_name}})]</i></span>]</div>]
     16<span class="oe-author_name"><span class="par"><:par_auteur:></span>[(#ENV*{data/author_url}|?{[<a class="nom" href="#ENV*{data/author_url}">(#ENV*{data/author_name})</a>],<span class="nom">#ENV*{data/author_name}}</span>)]</span>]</div>]
    1717[<div class="spip_doc_titre oembed-source">(#ENV*{lien}|echappe_retour)</div>]
    1818</figcaption>
  • _plugins_/oembed/paquet.xml

    r108745 r109601  
    22        prefix="oembed"
    33        categorie="multimedia"
    4         version="2.0.4"
     4        version="2.0.5"
    55        etat="stable"
    66        compatibilite="[3.0.0;3.2.*]"
Note: See TracChangeset for help on using the changeset viewer.