Skip to content

Commit 225a612

Browse files
yurydelendikyurydelendik
committed
Merge pull request mozilla#2420 from brendandahl/b2g-gui
New GUI for B2g.
2 parents 12ad86e + fd4e40c commit 225a612

15 files changed

+450
-30
lines changed

‎extensions/b2g/images/div_line_left.png

1.08 KB
Loading

‎extensions/b2g/images/div_line_right.png

1.08 KB
Loading

‎extensions/b2g/images/document_bg.png

2.18 KB
Loading

‎extensions/b2g/images/icon_next_page.png

1.32 KB
Loading

‎extensions/b2g/images/icon_previous_page.png

1.36 KB
Loading

‎extensions/b2g/images/icon_zoom_in.png

1.84 KB
Loading

‎extensions/b2g/images/icon_zoom_out.png

1.74 KB
Loading

‎extensions/b2g/images/spinner.png

4.95 KB
Loading

‎extensions/b2g/images/toolbar_background.png

10.5 KB
Loading

‎extensions/b2g/viewer.css

Lines changed: 282 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,282 @@
1+
/* Copyright 2012 Mozilla Foundation
2+
*
3+
* Licensed under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License.
5+
* You may obtain a copy of the License at
6+
*
7+
* http://www.apache.org/licenses/LICENSE-2.0
8+
*
9+
* Unless required by applicable law or agreed to in writing, software
10+
* distributed under the License is distributed on an "AS IS" BASIS,
11+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
* See the License for the specific language governing permissions and
13+
* limitations under the License.
14+
*/
15+
16+
* { -moz-box-sizing: border-box; }
17+
18+
* {
19+
padding: 0;
20+
margin: 0;
21+
}
22+
23+
html {
24+
height: 100%;
25+
width: 100%;
26+
overflow: hidden;
27+
font-size: 10px;
28+
}
29+
30+
body {
31+
background: url(images/document_bg.png);
32+
color: #fff;
33+
font-family: "MozTT", sans-serif;
34+
font-size: 10px;
35+
height: 100%;
36+
width: 100%;
37+
overflow: hidden;
38+
padding-bottom: 50px;
39+
}
40+
41+
section {
42+
overflow: hidden;
43+
font-size: 10px;
44+
position: absolute;
45+
top: 0px;
46+
left: 0px;
47+
width: 100%;
48+
height: 100%;
49+
overflow: hidden;
50+
font-size: 20px;
51+
}
52+
53+
footer {
54+
background-image: url(images/toolbar_background.png);
55+
height: 40px;
56+
position: absolute;
57+
bottom: 0;
58+
left: 0;
59+
right: 0;
60+
z-index: 1;
61+
box-shadow: 0px -2px 5px rgba(50, 50, 50, 0.75);
62+
}
63+
64+
65+
.toolbarButton {
66+
display: block;
67+
padding: 0;
68+
margin: 0;
69+
border-width: 0;
70+
background-position: center center;
71+
background-repeat: no-repeat;
72+
background-color: transparent;
73+
}
74+
75+
.toolbarButton.pageUp {
76+
position: absolute;
77+
width: 18%;
78+
height: 100%;
79+
left: 0;
80+
background-image: url(images/icon_previous_page.png);
81+
}
82+
83+
.toolbarButton.pageDown {
84+
position: absolute;
85+
width: 18%;
86+
height: 100%;
87+
left: 18%;
88+
background-image: url(images/icon_next_page.png);
89+
}
90+
91+
#pageNumber {
92+
position: absolute;
93+
width: 28%;
94+
height: 100%;
95+
left: 36%;
96+
text-align: center;
97+
border: 0;
98+
background-color: transparent;
99+
font-size: 9pt;
100+
color: #FFF;
101+
background-image: url(images/div_line_left.png), url(images/div_line_right.png);
102+
background-repeat: no-repeat;
103+
background-position: left, right;
104+
}
105+
106+
.toolbarButton.zoomOut {
107+
position: absolute;
108+
width: 18%;
109+
height: 100%;
110+
left: 64%;
111+
background-image: url(images/icon_zoom_out.png);
112+
}
113+
114+
.toolbarButton.zoomIn {
115+
position: absolute;
116+
width: 18%;
117+
height: 100%;
118+
left: 82%;
119+
background-image: url(images/icon_zoom_in.png);
120+
}
121+
122+
.toolbarButton[disabled] {
123+
opacity: .3;
124+
}
125+
126+
.hidden {
127+
display: none;
128+
}
129+
[hidden] {
130+
display: none !important;
131+
}
132+
133+
#viewerContainer {
134+
position: absolute;
135+
overflow: auto;
136+
width: 100%;
137+
top: 50px;
138+
bottom: 40px;
139+
left: 0;
140+
right: 0;
141+
}
142+
143+
canvas {
144+
margin: auto;
145+
display: block;
146+
}
147+
148+
.page {
149+
direction: ltr;
150+
width: 816px;
151+
height: 1056px;
152+
margin: 10px auto;
153+
position: relative;
154+
overflow: hidden;
155+
background-color: white;
156+
}
157+
158+
.page > a {
159+
display: block;
160+
position: absolute;
161+
}
162+
163+
.loadingIcon {
164+
width: 2.9rem;
165+
height: 2.9rem;
166+
background: url("images/spinner.png") no-repeat scroll left top transparent;
167+
border: medium none;
168+
animation: 1s steps(10, end) 0s normal none infinite moveDefault;
169+
display: block;
170+
position: absolute;
171+
top: calc((100% - 2.9rem) / 2);
172+
left: calc((100% - 2.9rem) / 2);
173+
}
174+
175+
@keyframes moveDefault {
176+
from {
177+
background-position: 0 top;
178+
}
179+
180+
to {
181+
background-position: -390px top;
182+
}
183+
}
184+
185+
#loadingBox {
186+
position: absolute;
187+
top: 50%;
188+
margin-top: -25px;
189+
left: 0;
190+
right: 0;
191+
text-align: center;
192+
color: #ddd;
193+
font-size: 14px;
194+
}
195+
196+
#loadingBar {
197+
display: inline-block;
198+
clear: both;
199+
margin: 0px;
200+
margin-top: 5px;
201+
line-height: 0;
202+
border-radius: 2px;
203+
width: 200px;
204+
height: 25px;
205+
206+
background-color: hsla(0,0%,0%,.3);
207+
background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
208+
background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
209+
border: 1px solid #000;
210+
box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset,
211+
0 0 1px hsla(0,0%,0%,.2) inset,
212+
0 0 1px 1px rgba(255, 255, 255, 0.1);
213+
}
214+
215+
#loadingBar .progress {
216+
display: inline-block;
217+
float: left;
218+
219+
background: #666;
220+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2b2b2), color-stop(100%,#898989));
221+
background: -webkit-linear-gradient(top, #b2b2b2 0%,#898989 100%);
222+
background: -moz-linear-gradient(top, #b2b2b2 0%,#898989 100%);
223+
background: -ms-linear-gradient(top, #b2b2b2 0%,#898989 100%);
224+
background: -o-linear-gradient(top, #b2b2b2 0%,#898989 100%);
225+
background: linear-gradient(top, #b2b2b2 0%,#898989 100%);
226+
227+
border-top-left-radius: 2px;
228+
border-bottom-left-radius: 2px;
229+
230+
width: 0%;
231+
height: 100%;
232+
}
233+
234+
#loadingBar .progress.full {
235+
border-top-right-radius: 2px;
236+
border-bottom-right-radius: 2px;
237+
}
238+
239+
#loadingBar .progress.indeterminate {
240+
width: 100%;
241+
height: 25px;
242+
background-image: -moz-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
243+
background-image: -webkit-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
244+
background-image: -ms-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
245+
background-image: -o-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
246+
background-size: 75px 25px;
247+
-moz-animation: progressIndeterminate 1s linear infinite;
248+
-webkit-animation: progressIndeterminate 1s linear infinite;
249+
}
250+
251+
@-moz-keyframes progressIndeterminate {
252+
from { background-position: 0px 0px; }
253+
to { background-position: 75px 0px; }
254+
}
255+
256+
#errorWrapper {
257+
background: none repeat scroll 0 0 #FF5555;
258+
color: white;
259+
left: 0;
260+
position: absolute;
261+
right: 0;
262+
top: 32px;
263+
z-index: 1000;
264+
padding: 3px;
265+
font-size: 0.8em;
266+
}
267+
268+
#errorMessageLeft {
269+
float: left;
270+
}
271+
272+
#errorMessageRight {
273+
float: right;
274+
}
275+
276+
#errorMoreInfo {
277+
background-color: #FFFFFF;
278+
color: black;
279+
padding: 3px;
280+
margin: 3px;
281+
width: 98%;
282+
}

0 commit comments

Comments
 (0)