browser/metro/theme/config.css@7e26c7da4463
browser/metro/theme/config.css
Wed, 31 Dec 2014 06:55:50 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:55:50 +0100
- changeset 2
- 7e26c7da4463
- permissions
- -rw-r--r--
Added tag UPSTREAM_283F7C6 for changeset ca08bd8f51b2
1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
5 html,
6 body {
7 margin: 0;
8 padding: 0;
9 background-color: #ced7de;
10 -moz-user-select: none;
11 font-family: "Segoe UI", sans-serif;
12 -moz-text-size-adjust: none;
13 }
15 .toolbar {
16 width: 100%;
17 height: 3em;
18 position: fixed;
19 top: 0;
20 left: 0;
21 z-index: 10;
22 box-shadow: 0 0 3px #444;
23 background-color: #ced7de;
24 color: #000000;
25 font-weight: bold;
26 border-bottom: 2px solid;
27 -moz-border-bottom-colors: #ff9100 #f27900;
28 }
30 .toolbar-container {
31 max-width: 40em;
32 margin-left: auto;
33 margin-right: auto;
34 }
36 #filter-container {
37 margin-top: 0.5em;
38 margin-bottom: 0.5em;
39 margin-right: 0.5em;
40 height: 2em;
41 border: 1px solid transparent;
42 border-image-source: url("chrome://browser/skin/images/textfield.png");
43 border-image-slice: 1 1 3 1;
44 border-image-width: 1px 1px 3px 1px;
45 overflow: hidden;
46 display: flex;
47 flex-direction: row;
48 }
50 #filter-input {
51 -moz-appearance: none;
52 border: none;
53 background-image: none;
54 background-color: transparent;
55 display: inline-block;
56 width: 12em;
57 min-width: 0;
58 color: #000000;
59 opacity: 1;
60 flex: 1 1 auto;
61 }
63 #filter-input:-moz-placeholder {
64 color: rgba(255,255,255,0.5);
65 }
67 .toolbar input {
68 display: inline-block;
69 height: 100%;
70 min-width: 3em;
71 box-sizing: border-box;
72 opacity: 0.75;
73 }
75 #new-pref-toggle-button {
76 background-position: center center;
77 background-image: url("chrome://browser/skin/images/reader-plus-icon-xhdpi.png");
78 background-size: 48px 48px;
79 height: 48px;
80 width: 48px;
81 display: inline-block;
82 outline-style: none;
83 }
85 #filter-search-button {
86 background-image: url("chrome://browser/skin/images/search.png");
87 background-size: 32px 32px;
88 height: 32px;
89 width: 32px;
90 display: inline-block;
91 outline-style: none;
92 }
94 #filter-input-clear-button {
95 background-image: url("chrome://browser/skin/images/search-clear-30.png");
96 background-size: 32px 32px;
97 height: 32px;
98 width: 32px;
99 display: inline-block;
100 outline-style: none;
101 }
103 #filter-input[value=""] + #filter-input-clear-button {
104 display: none;
105 }
107 .toolbar-item {
108 display: inline-block;
109 height: 3em;
110 min-width: 3em;
111 float: right;
112 }
114 #content {
115 position: relative;
116 margin: 0;
117 margin-left: auto;
118 margin-right: auto;
119 padding-top: 3em;
120 padding-left: 0;
121 padding-right: 0;
122 min-height: 100%;
123 max-width: 40em;
124 }
126 ul {
127 list-style-position: inside;
128 border: 1px solid #808080;
129 background-color: #ffffff;
130 min-height: 100%;
131 width: 100%;
132 padding-top: 0;
133 margin: 0;
134 padding-left: 0;
135 box-sizing: border-box;
136 box-shadow: 0 0 5px #000000;
137 overflow-x: hidden;
138 }
140 #new-pref-container {
141 width: 100%;
142 margin: 0;
143 background-color: #ffffff;
144 box-sizing: border-box;
145 box-shadow: 0 0 5px #000000;
146 overflow-x: hidden;
147 max-width: 40em;
148 max-height: 100%;
149 position: fixed;
150 top: 3em;
151 left: auto;
152 display: none;
153 z-index: 5;
154 }
156 #new-pref-container input,
157 #new-pref-container select {
158 border: none;
159 background-image: none;
160 }
162 #new-pref-container.show {
163 display: block;
164 }
166 li {
167 list-style-type: none;
168 border-bottom: 1px solid #d3d3d3;
169 opacity: 1;
170 background-color: #ffffff;
171 cursor: pointer;
172 }
174 #new-pref-line-boolean,
175 #new-pref-value-string,
176 #new-pref-value-int {
177 display: none;
178 }
179 #new-pref-item[typestyle="boolean"] #new-pref-line-boolean,
180 #new-pref-item[typestyle="string"] #new-pref-value-string,
181 #new-pref-item[typestyle="int"] #new-pref-value-int {
182 display: block;
183 }
185 .pref-name,
186 .pref-value {
187 padding: 15px 10px;
188 text-align: left;
189 text-overflow: ellipsis;
190 overflow: hidden;
191 background-image: none;
192 }
194 .pref-value {
195 color: rgba(0,0,0,0.5);
196 flex: 1 1 auto;
197 border: none;
198 -moz-appearance: none;
199 background-image: none;
200 background-color: transparent;
201 }
203 .pref-name[locked] {
204 padding-right: 20px;
205 background-image: url("chrome://browser/skin/images/lock.png");
206 background-repeat: no-repeat;
207 background-position: right 50%;
208 background-size: auto 60%;
209 }
211 #new-pref-name {
212 width: 30em;
213 }
215 #new-pref-type {
216 display: inline-block !important;
217 border-left: 1px solid #d3d3d3;
218 width: 10em;
219 text-align: right;
220 }
222 .pref-item-line {
223 border-top: 1px solid rgba(0,0,0,0.05);
224 color: rgba(0,0,0,0.5);
225 display: flex;
226 flex-direction: row;
227 }
229 #new-pref-value-boolean {
230 flex: 1 1 auto;
231 }
233 /* Disable newPref dialog spinbuttons, use custom version from Android */
234 /* Filed Bug 962359 to enhance the default spinbutton style to be touch-friendly */
235 #new-pref-value-int {
236 -moz-appearance: textfield;
237 }
239 #new-pref-container .pref-button.toggle {
240 display: inline-block;
241 opacity: 1;
242 flex: 0 1 auto;
243 float: right;
244 }
246 #new-pref-container .pref-button.cancel,
247 #new-pref-container .pref-button.create {
248 display: inline-block;
249 opacity: 1;
250 flex: 1 1 auto;
251 }
253 .pref-item-line {
254 pointer-events: none;
255 }
257 #new-pref-container .pref-item-line,
258 .pref-item.selected .pref-item-line,
259 .pref-item:not(.selected) .pref-button.reset {
260 pointer-events: auto;
261 }
263 #new-pref-container .pref-button.create[disabled] {
264 color: #d3d3d3;
265 }
267 .pref-item.selected {
268 background-color: rgba(0,0,255,0.05);
269 }
271 .pref-button {
272 display: inline-block;
273 box-sizing: border-box;
274 text-align: center;
275 padding: 10px 1em;
276 border-left: 1px solid rgba(0,0,0,0.1);
277 opacity: 0;
278 transition-property: opacity;
279 transition-duration: 500ms;
280 }
282 .pref-item.selected .pref-item-line .pref-button {
283 opacity: 1;
284 }
286 .pref-item:not(.selected) .pref-item-line .pref-button:not(.reset) {
287 display: none;
288 }
290 .pref-item:not(.selected) .pref-button.reset {
291 opacity: 1;
292 }
294 /* Disable detail list item spinbuttons, use custom version from Android */
295 /* Filed Bug 962359 to enhance the default spinbutton style to be touch-friendly */
296 .pref-item input[type="number"] {
297 -moz-appearance: textfield;
298 }
300 .pref-button:active {
301 background-color: rgba(0,0,255,0.2);
302 }
304 .pref-button[disabled] {
305 display: none;
306 }
308 .pref-button.up {
309 background-image: url("chrome://browser/skin/images/arrowup-16.png");
310 background-position: center center;
311 background-repeat: no-repeat;
312 }
314 .pref-button.down {
315 background-image: url("chrome://browser/skin/images/arrowdown-16.png");
316 background-position: center center;
317 background-repeat: no-repeat;
318 }
320 #prefs-shield {
321 width: 100%;
322 height: 100%;
323 background-color: rgba(0,0,0,0.5);
324 position: fixed;
325 top: 0;
326 left: 0;
327 opacity: 0;
328 transition-property: opacity;
329 transition-duration: 500ms;
330 display: none;
331 }
333 #prefs-shield[shown] {
334 display: block;
335 opacity: 1;
336 }
338 #loading-container > li {
339 background-image: url(chrome://global/skin/media/throbber.png);
340 background-position: center center;
341 background-repeat: no-repeat;
342 padding-left: 40px;
343 height: 3em;
344 width: 100%;
345 }
