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(128, 128, 128); | 11 background-color: rgb(187, 187, 187); |
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 | |
26 h1 { | 18 h1 { |
27 padding: 0pt 10pt; | 19 padding: 0pt 10pt; |
28 font-size: 10pt; | 20 font-size: 10pt; |
29 font-weight: normal; | 21 font-weight: normal; |
30 visibility: hidden; | 22 visibility: hidden; |
31 } | 23 } |
32 | 24 |
33 #outer:hover h1 { | 25 #outer:hover h1 { |
34 visibility: visible; | 26 visibility: visible; |
35 } | 27 } |
36 | 28 |
37 #plugin_icon { | 29 #plugin_icon { |
38 opacity: .4; | 30 opacity: .6; |
39 } | |
40 | |
41 #outer:hover #plugin_icon { | |
42 opacity: 1.0; | |
43 } | 31 } |
44 | 32 |
45 p { | 33 p { |
46 padding: 0pt 14pt; | 34 padding: 0pt 14pt; |
47 font-size: 8pt; | 35 font-size: 8pt; |
48 } | 36 } |
49 | 37 |
50 #outer { | 38 #outer { |
51 width: 100%; | 39 width: 100%; |
52 height: 100%; | 40 height: 100%; |
53 cursor: crosshair; | |
54 position: absolute; | 41 position: absolute; |
55 border: 1px black solid; | 42 border: 1px black solid; |
56 box-sizing: border-box; | 43 box-sizing: border-box; |
57 } | 44 } |
58 | 45 |
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 | |
66 #inner { | 46 #inner { |
67 position: relative; | 47 position: relative; |
68 top: 50%; | 48 top: 50%; |
69 margin-top: -70px; | 49 margin-top: -70px; |
70 } | 50 } |
71 </style> | 51 </style> |
72 </head> | 52 </head> |
73 | 53 |
74 <body id="t" onSelectStart="return false;"> | 54 <body id="t" onSelectStart="return false;"> |
75 <div i18n-values="title:name" id="outer" onclick="plugin.load()"> | 55 <div i18n-values="title:name" id="outer"> |
76 <div id="inner"> | 56 <div id="inner"> |
77 <div><img id="plugin_icon" src="plugin_blocked.png" /></div> | 57 <div><img id="plugin_icon" src="plugin_blocked.png" /></div> |
78 <h1 i18n-content="message">PLUGIN_LOAD</h1> | 58 <h1 i18n-content="message">PLUGIN_BLOCKED</h1> |
79 <h1 i18n-content="name">PLUGIN_NAME</h1> | |
80 <p id="debug"> </p> | 59 <p id="debug"> </p> |
81 </div> | 60 </div> |
82 </div> | 61 </div> |
83 </body> | 62 </body> |
84 </html> | 63 </html> |
OLD | NEW |