chrome/renderer/resources/plugin_poster.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8">
   5 <meta name="viewport" content="width=device-width, user-scalable=no">
   6 <script>
   7 function notifyDidFinishLoading() {
   8   if (plugin.didFinishLoading)
   9     plugin.didFinishLoading();
  10 }
  11
  12 document.onkeydown = function(e) {
  13   if (e.keyIdentifier == 'Enter' || e.keyIdentifier == 'U+0020') {
  14     plugin.load();
  15     e.preventDefault();
  16   }
  17 };
  18 </script>
  19 <link rel="stylesheet" href="plugin_placeholders.css"></link>
  20 <style>
  21 #outer {
  22   position: relative;
  23   border: none;
  24   cursor: pointer;
  25 }
  26
  27 #shielding {
  28   background-color: rgba(0, 0, 0, 0.5);
  29   position: absolute;
  30   top: 0px;
  31   left: 0px;
  32   height: 100%;
  33   width: 100%;
  34   z-index: 2;
  35 }
  36
  37 #plugin_icon {
  38   opacity: 0.8;
  39 }
  40
  41 #plugin_icon:hover {
  42   opacity: 0.95;
  43 }
  44
  45 #poster {
  46   height: 100%;
  47   width: 100%;
  48   z-index: 1;
  49 }
  50
  51 #inner_container {
  52   height: 100%;
  53   width: 100%;
  54   position: relative;
  55 }
  56
  57 #inner {
  58   margin-top: -25px;
  59 }
  60 </style>
  61 <base i18n-values="href:baseurl">
  62 </head>
  63
  64 <body onload="notifyDidFinishLoading();">
  65   <div i18n-values="title:name" id="outer" onclick="plugin.load()">
  66     <img id="poster" i18n-values="srcset:poster">
  67     <div id="shielding">
  68       <div id="inner_container"
  69            i18n-values=".style.width:visibleWidth;.style.height:visibleHeight">
  70         <div id="inner">
  71           <img id="plugin_icon" src="plugin_power_saver_play.png" />
  72         </div>
  73       </div>
  74     </div>
  75   </div>
  76 </body>
  77 </html>