b2g/chrome/content/content.css@b8a032363ba2
b2g/chrome/content/content.css
Thu, 22 Jan 2015 13:21:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 22 Jan 2015 13:21:57 +0100
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
- permissions
- -rw-r--r--
Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6
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 @namespace url("http://www.w3.org/1999/xhtml");
6 @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
8 /* Style the scrollbars */
9 xul|window xul|scrollbar {
10 display: none;
11 }
13 html xul|scrollbar[root="true"] {
14 position: relative;
15 z-index: 2147483647;
16 }
18 html xul|scrollbar {
19 -moz-appearance: none !important;
20 background-color: transparent !important;
21 background-image: none !important;
22 border: 0px solid transparent !important;
23 pointer-events: none;
24 opacity: 1;
25 }
27 xul|scrollbar[orient="vertical"] {
28 -moz-margin-start: -8px;
29 min-width: 8px;
30 max-width: 8px;
31 }
33 xul|scrollbar[orient="vertical"] xul|thumb {
34 max-width: 6px !important;
35 min-width: 6px !important;
36 }
38 xul|scrollbar[orient="horizontal"] {
39 margin-top: -8px;
40 min-height: 8px;
41 max-height: 8px;
42 }
44 xul|scrollbar[orient="horizontal"] xul|thumb {
45 max-height: 6px !important;
46 min-height: 6px !important;
47 }
49 xul|scrollbar:not([active="true"]),
50 xul|scrollbar[disabled] {
51 opacity: 0;
52 transition: opacity 1s ease;
53 }
55 xul|scrollbarbutton {
56 min-height: 8px !important;
57 min-width: 8px !important;
58 -moz-appearance: none !important;
59 visibility: hidden;
60 }
62 xul|scrollbarbutton[sbattr="scrollbar-up-top"],
63 xul|scrollbarbutton[sbattr="scrollbar-bottom-top"] {
64 display: none;
65 }
67 xul|thumb {
68 background-color: rgba(0, 0, 0, 0.4) !important;
69 -moz-border-top-colors: none !important;
70 -moz-border-bottom-colors: none !important;
71 -moz-border-right-colors: none !important;
72 -moz-border-left-colors: none !important;
73 border: 1px solid rgba(255, 255, 255, 0.4) !important;
74 border-radius: 3px;
75 }
77 xul|scrollbarbutton {
78 background-image: none !important;
79 }
81 /* -moz-touch-enabled? media elements */
82 :-moz-any(video, audio) > xul|videocontrols {
83 -moz-binding: url("chrome://global/content/bindings/videocontrols.xml#touchControls");
84 }
86 select:not([size]):not([multiple]) > xul|scrollbar,
87 select[size="1"] > xul|scrollbar,
88 select:not([size]):not([multiple]) xul|scrollbarbutton,
89 select[size="1"] xul|scrollbarbutton {
90 display: block;
91 margin-left: 0;
92 min-width: 16px;
93 }
95 /* Override inverse OS themes */
96 select,
97 textarea,
98 button,
99 xul|button,
100 * > input:not([type="image"]) {
101 -moz-appearance: none !important; /* See bug 598421 for fixing the platform */
102 border-radius: 3px;
103 }
105 select[size],
106 select[multiple],
107 select[size][multiple],
108 textarea,
109 * > input:not([type="image"]) {
110 border-style: solid;
111 border-color: #7d7d7d;
112 color: #414141;
113 background: white linear-gradient(rgba(115,115,115,0.5) 0, rgba(215,215,215,0.5) 3px, rgba(255,255,255,0.2) 16px);
114 }
116 /* Selects are handled by the form helper, see bug 685197 */
117 select option, select optgroup {
118 pointer-events: none;
119 }
121 select:not([size]):not([multiple]),
122 select[size="0"],
123 select[size="1"],
124 * > input[type="button"],
125 * > input[type="submit"],
126 * > input[type="reset"],
127 button {
128 border-style: solid;
129 border-color: #7d7d7d;
130 color: #414141;
131 background: white linear-gradient(rgba(255,255,255,0.2) 0, rgba(215,215,215,0.5) 18px, rgba(115,115,115,0.5) 100%);
132 }
134 input[type="checkbox"] {
135 background: white linear-gradient(rgba(115,115,115,0.5) 0, rgba(215,215,215,0.5) 2px, rgba(255,255,255,0.2) 6px);
136 }
138 input[type="radio"] {
139 background: radial-gradient(at 6px 6px, rgba(255,255,255,0.2) 3px, rgba(195,195,195,0.5) 5px, rgba(115,115,115,0.5) 100%);
140 }
142 select {
143 border-width: 1px;
144 padding: 1px;
145 }
147 select:not([size]):not([multiple]),
148 select[size="0"],
149 select[size="1"] {
150 padding: 0 1px 0 1px;
151 }
153 * > input:not([type="image"]) {
154 border-width: 1px;
155 padding: 1px;
156 }
158 textarea {
159 resize: none;
160 border-width: 1px;
161 padding: 2px 1px 2px 1px;
162 }
164 input[type="button"],
165 input[type="submit"],
166 input[type="reset"],
167 button {
168 border-width: 1px;
169 padding: 0 7px 0 7px;
170 }
172 input[type="radio"],
173 input[type="checkbox"] {
174 max-width: 14px;
175 max-height: 14px;
176 border: 1px solid #a7a7a7 !important;
177 padding: 2px 1px 2px 1px;
178 }
180 select > button {
181 border-width: 0px !important;
182 margin: 0px !important;
183 padding: 0px !important;
184 border-radius: 0;
185 color: #414141;
187 background-image: radial-gradient(at bottom left, #bbbbbb 40%, #f5f5f5), url(arrow.svg) !important;
188 background-color: transparent;
189 background-position: -15px center, 4px center !important;
190 background-repeat: no-repeat, no-repeat !important;
191 background-size: 100% 90%, auto auto;
193 -moz-binding: none !important;
194 position: relative !important;
195 font-size: inherit;
196 }
198 select[size]:focus,
199 select[multiple]:focus,
200 select[size][multiple]:focus,
201 textarea:focus,
202 input[type="file"]:focus > input[type="text"],
203 * > input:not([type="image"]):focus {
204 outline: 0px !important;
205 border-style: solid;
206 border-color: rgb(94,128,153);
207 background: white linear-gradient(rgba(27,113,177,0.5) 0, rgba(198,225,246,0.2) 3px, rgba(255,255,255,0.2) 16px);
208 }
210 select:not([size]):not([multiple]):focus,
211 select[size="0"]:focus,
212 select[size="1"]:focus,
213 input[type="button"]:focus,
214 input[type="submit"]:focus,
215 input[type="reset"]:focus,
216 button:focus {
217 outline: 0px !important;
218 border-style: solid;
219 border-color: rgb(94,128,153);
220 background: white linear-gradient(rgba(255,255,255,0.2) 0, rgba(198,225,256,0.2) 18px, rgba(27,113,177,0.5) 100%);
221 }
223 input[type="checkbox"]:focus,
224 input[type="radio"]:focus {
225 border-color: #99c6e0 !important;
226 }
228 input[type="checkbox"]:focus {
229 background: white linear-gradient(rgba(27,113,177,0.5) 0, rgba(198,225,246,0.2) 2px, rgba(255,255,255,0.2) 6px);
230 }
232 input[type="radio"]:focus {
233 background: radial-gradient(at 6px 6px, rgba(255,255,255,0.2) 3px, rgba(198,225,246,0.2) 5px, rgba(27,113,177,0.5) 100%);
234 }
236 /* we need to be specific for selects because the above rules are specific too */
237 textarea[disabled],
238 select[size][disabled],
239 select[multiple][disabled],
240 select[size][multiple][disabled],
241 select:not([size]):not([multiple])[disabled],
242 select[size="0"][disabled],
243 select[size="1"][disabled],
244 button[disabled],
245 * > input:not([type="image"])[disabled] {
246 color: rgba(0,0,0,0.3);
247 border-color: rgba(125,125,125,0.4);
248 border-style: solid;
249 border-width: 1px;
250 background: transparent linear-gradient(rgba(185,185,185,0.4) 0, rgba(235,235,235,0.4) 3px, rgba(255,255,255,0.4) 100%);
251 }
253 select:not([size]):not([multiple])[disabled],
254 select[size="0"][disabled],
255 select[size="1"][disabled] {
256 background: transparent linear-gradient(rgba(255,255,255,0.4) 0, rgba(235,235,235,0.4) 3px, rgba(185,185,185,0.4) 100%);
257 }
259 input[type="button"][disabled],
260 input[type="submit"][disabled],
261 input[type="reset"][disabled],
262 button[disabled="true"] {
263 padding: 0 7px 0 7px;
264 background: transparent linear-gradient(rgba(255,255,255,0.4) 0, rgba(235,235,235,0.4) 3px, rgba(185,185,185,0.4) 100%);
265 }
267 input[type="radio"][disabled],
268 input[type="radio"][disabled]:active,
269 input[type="radio"][disabled]:hover,
270 input[type="radio"][disabled]:hover:active,
271 input[type="checkbox"][disabled],
272 input[type="checkbox"][disabled]:active,
273 input[type="checkbox"][disabled]:hover,
274 input[type="checkbox"][disabled]:hover:active {
275 border:1px solid rgba(125,125,125,0.4) !important;
276 }
278 select[disabled] > button {
279 opacity: 0.6;
280 padding: 1px 7px 1px 7px;
281 }
283 *:-moz-any-link:active,
284 *[role=button]:active,
285 button:active,
286 input:active,
287 option:active,
288 select:active,
289 label:active,
290 textarea:active {
291 background-color: rgba(141, 184, 216, 0.5);
292 }
294 input[type=number] > div > div, /* work around bug 946184 */
295 input[type=number]::-moz-number-spin-box {
296 display: none;
297 }
299 %ifdef MOZ_WIDGET_GONK
300 /* This binding only provide key shortcuts that we can't use on devices */
301 input,
302 textarea {
303 -moz-binding: none !important;
304 }
305 %endif
