| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <script> | 4 <script> |
| 5 function debug(msg) { | 5 function debug(msg) { |
| 6 document.getElementById('debug').textContent = msg; | 6 document.getElementById('debug').textContent = msg; |
| 7 } | 7 } |
| 8 </script> | 8 </script> |
| 9 <style> | 9 <style> |
| 10 body { | 10 body { |
| 11 background-color: rgb(187, 187, 187); | 11 background-color: rgb(128, 128, 128); |
| 12 margin: 0; | 12 margin: 0; |
| 13 text-align: center; | 13 text-align: center; |
| 14 font-family: sans-serif; | 14 font-family: sans-serif; |
| 15 overflow: hidden; | 15 overflow: hidden; |
| 16 } | 16 } |
| 17 | 17 |
| 18 body #outer:hover { |
| 19 background: -webkit-gradient(linear, left top, left bottom, from(#d2d2d2), to(
#a5a5a5)); |
| 20 } |
| 21 |
| 22 body #outer:active { |
| 23 background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(
#d2d2d2)); |
| 24 } |
| 25 |
| 18 h1 { | 26 h1 { |
| 19 padding: 0pt 10pt; | 27 padding: 0pt 10pt; |
| 20 font-size: 10pt; | 28 font-size: 10pt; |
| 21 font-weight: normal; | 29 font-weight: normal; |
| 22 visibility: hidden; | 30 visibility: hidden; |
| 23 } | 31 } |
| 24 | 32 |
| 25 #outer:hover h1 { | 33 #outer:hover h1 { |
| 26 visibility: visible; | 34 visibility: visible; |
| 27 } | 35 } |
| 28 | 36 |
| 29 #plugin_icon { | 37 #plugin_icon { |
| 30 opacity: .6; | 38 opacity: .4; |
| 39 } |
| 40 |
| 41 #outer:hover #plugin_icon { |
| 42 opacity: 1.0; |
| 31 } | 43 } |
| 32 | 44 |
| 33 p { | 45 p { |
| 34 padding: 0pt 14pt; | 46 padding: 0pt 14pt; |
| 35 font-size: 8pt; | 47 font-size: 8pt; |
| 36 } | 48 } |
| 37 | 49 |
| 38 #outer { | 50 #outer { |
| 39 width: 100%; | 51 width: 100%; |
| 40 height: 100%; | 52 height: 100%; |
| 53 cursor: pointer; |
| 41 position: absolute; | 54 position: absolute; |
| 42 border: 1px black solid; | 55 border: 1px black solid; |
| 43 box-sizing: border-box; | 56 box-sizing: border-box; |
| 44 } | 57 } |
| 45 | 58 |
| 59 /* |
| 60 FIXME: This causes flickering on hover. |
| 61 #outer:hover { |
| 62 -webkit-box-shadow: rgb(229,229,229) 1px 1px inset; |
| 63 } |
| 64 */ |
| 65 |
| 46 #inner { | 66 #inner { |
| 47 position: relative; | 67 position: relative; |
| 48 top: 50%; | 68 top: 50%; |
| 49 margin-top: -70px; | 69 margin-top: -70px; |
| 50 } | 70 } |
| 51 </style> | 71 </style> |
| 52 </head> | 72 </head> |
| 53 | 73 |
| 54 <body id="t" onSelectStart="return false;"> | 74 <body id="t" onSelectStart="return false;"> |
| 55 <div i18n-values="title:name" id="outer"> | 75 <div i18n-values="title:name" id="outer" onclick="plugin.load()"> |
| 56 <div id="inner"> | 76 <div id="inner"> |
| 57 <div><img id="plugin_icon" src="plugin_blocked.png" /></div> | 77 <div><img id="plugin_icon" src="plugin_blocked.png" /></div> |
| 58 <h1 i18n-content="message">PLUGIN_OUTDATED</h1> | 78 <h1 i18n-content="message">PLUGIN_LOAD</h1> |
| 59 <h1 i18n-content="name">PLUGIN_NAME</h1> | |
| 60 <p id="debug"> </p> | 79 <p id="debug"> </p> |
| 61 </div> | 80 </div> |
| 62 </div> | 81 </div> |
| 63 </body> | 82 </body> |
| 64 </html> | 83 </html> |
| OLD | NEW |