|
1 <!DOCTYPE html> |
|
2 <!-- |
|
3 Copyright 2013 Mozilla Foundation |
|
4 |
|
5 Licensed under the Apache License, Version 2.0 (the "License"); |
|
6 you may not use this file except in compliance with the License. |
|
7 You may obtain a copy of the License at |
|
8 |
|
9 http://www.apache.org/licenses/LICENSE-2.0 |
|
10 |
|
11 Unless required by applicable law or agreed to in writing, software |
|
12 distributed under the License is distributed on an "AS IS" BASIS, |
|
13 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|
14 See the License for the specific language governing permissions and |
|
15 limitations under the License. |
|
16 --> |
|
17 <html> |
|
18 <head> |
|
19 <meta charset="utf-8"> |
|
20 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
|
21 <base href=""/> |
|
22 |
|
23 <style> |
|
24 body { |
|
25 margin: 0; |
|
26 overflow: hidden; |
|
27 background-color: rgba(0, 0, 0, 0.78); |
|
28 } |
|
29 |
|
30 body.started { |
|
31 background-color: transparent; |
|
32 } |
|
33 |
|
34 #viewer { |
|
35 position:fixed !important; |
|
36 left:0;top:0;bottom:0;right:0; |
|
37 overflow: hidden; |
|
38 line-height: 0; |
|
39 } |
|
40 |
|
41 #overlay { |
|
42 display: none; |
|
43 } |
|
44 |
|
45 #overlay.enabled { |
|
46 display: block; |
|
47 position:fixed; |
|
48 bottom: 0; |
|
49 right: 0; |
|
50 } |
|
51 |
|
52 #report, #fallback { |
|
53 float: right; |
|
54 width: 70px; height: 16px; |
|
55 padding: 8px 4px 4px; |
|
56 color: white; |
|
57 background-color: rgba(0, 0, 0, 0.62); |
|
58 font: bold 10px sans-serif; |
|
59 text-align: center; |
|
60 text-decoration: none; |
|
61 } |
|
62 #report { |
|
63 display: none; |
|
64 width: 100px; |
|
65 } |
|
66 #overlay:hover #report { |
|
67 display: block; |
|
68 } |
|
69 |
|
70 #fallback .icon { |
|
71 display: none; |
|
72 color: white; |
|
73 } |
|
74 |
|
75 #fallback:hover .icon { |
|
76 display: inline-block; |
|
77 } |
|
78 |
|
79 #report:hover, #fallback:hover { |
|
80 background-color: black; |
|
81 } |
|
82 |
|
83 @media screen and (max-width: 100px), screen and (max-height: 40px) { |
|
84 body.started #overlay { |
|
85 display: none; |
|
86 } |
|
87 } |
|
88 </style> |
|
89 </head> |
|
90 |
|
91 <body contextmenu="shumwayMenu"> |
|
92 <div id="viewer"></div> |
|
93 <section> |
|
94 <div id="overlay"> |
|
95 <a id="fallback" href="#">Shumway <span class="icon">×</span></a> |
|
96 <a id="report" href="#">Report Problems</a> |
|
97 </div> |
|
98 <menu type="context" id="shumwayMenu"> |
|
99 <menuitem label="Show URL" id="showURLMenu"></menuitem> |
|
100 <menuitem label="Copy Profile" id="copyProfileMenu"></menuitem> |
|
101 <menuitem label="Open in Inspector" id="inspectorMenu"></menuitem> |
|
102 <menuitem label="Report Problems" id="reportMenu"></menuitem> |
|
103 <menuitem label="Fallback to Flash" id="fallbackMenu" hidden></menuitem> |
|
104 </menu> |
|
105 </section> |
|
106 </body> |
|
107 </html> |