browser/metro/theme/netError.css@7e26c7da4463
browser/metro/theme/netError.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 /*
6 * This defines the look-and-feel styling of the error pages.
7 * (see: netError.xhtml)
8 *
9 * Original styling by William Price <bugzilla@mob.rice.edu>
10 * Updated for mobile by: Wes Johnston <wjohnston@mozilla.com>
11 */
13 %filter substitution
14 %include defines.inc
15 %include platform.css
17 /*
18 * In-browser content styles,
19 * XXX: should be extracted and consolidated into a shared stylesheet for all in-browser content
20 */
21 body {
22 background-color: #F4F4F4;
23 color: rgb(51,51,51);
24 font-family: "Segoe UI", sans-serif;
25 font-size: @font_normal@;
26 line-height: 23px;
27 }
29 h1 {
30 font-size: @metro_font_xlarge@;
31 font-weight: normal;
32 line-height: @metro_spacing_large@;
33 }
34 h2 {
35 font-size: @metro_font_large@;
36 line-height: @metro_spacing_xxxnormal@;
37 font-weight: normal;
38 }
39 h3 {
40 font-size: @font_normal@;
41 line-height: @metro_spacing_xxnormal@;
42 }
43 h4 {
44 font-size: @font_normal@;
45 line-height: @metro_spacing_xxnormal@;
46 font-style: italic;
47 display: inline;
48 }
50 /*
51 * Net error page styles
52 */
54 a {
55 text-decoration: none;
56 }
58 ul {
59 margin: 0px;
60 padding: 0px 0px 0px 1em;
61 }
63 li {
64 margin: 0px;
65 padding: 8px 0px;
66 }
68 #errorPage.certerror, #errorPage.blockedsite {
69 background-color: @error_page_background_color@;
70 }
72 #errorPage button {
73 margin: 5px 10px 5px 0;
74 }
76 #errorPage > .top-decoration {
77 position: absolute;
78 top: 0;
79 left: 0;
80 width: 100%;
81 height: 25px;
82 }
84 #errorPage.certerror > .top-decoration {
85 background: linear-gradient(-45deg,
86 @error_page_background_color@ 25%,
87 @error_page_warning_color@ 25%,
88 @error_page_warning_color@ 50%,
89 @error_page_background_color@ 50%,
90 @error_page_background_color@ 75%,
91 @error_page_warning_color@ 75%,
92 @error_page_warning_color@) repeat scroll 0% 0% /
93 80px 80px transparent;
94 }
96 #errorPage.blockedsite > .top-decoration {
97 background: linear-gradient(-45deg,
98 @error_page_background_color@ 25%,
99 @error_page_error_color@ 25%,
100 @error_page_error_color@ 50%,
101 @error_page_background_color@ 50%,
102 @error_page_background_color@ 75%,
103 @error_page_error_color@ 75%,
104 @error_page_error_color@) repeat scroll 0% 0% /
105 80px 80px transparent;
106 }
108 #errorPage #cert_domain_link {
109 color: #0095dd;
110 }
112 #errorPage.certerror #errorPageContainer > .section-header,
113 #errorPage.blockedsite #errorPageContainer > .section-header {
114 border-bottom: @metro_border_thin@ solid rgb(133,137,140);
115 }
117 #errorPageContainer {
118 max-width: 628px;
119 margin-left: auto;
120 margin-right: auto;
121 margin-top: 60px;
122 -moz-padding-start: 40px;
123 -moz-padding-end: 24px;
124 }
126 #errorTitleIcon {
127 background-image: url("chrome://browser/skin/images/errorpage-warning.png");
128 background-position: center center;
129 background-repeat: no-repeat;
130 background-size: 40px 40px;
131 background-origin: content-box;
132 display: inline-block;
133 -moz-margin-start: -64px;
134 -moz-margin-end: 24px;
135 height: 40px;
136 vertical-align: middle;
137 width: 40px;
138 }
140 #errorPage.certerror #errorTitleIcon, #errorPage.blockedsite #errorTitleIcon {
141 background-size: 60px 60px;
142 width: 60px;
143 height: 60px;
144 -moz-margin-start: -80px;
145 -moz-margin-end: 10px;
146 }
148 #errorPage.certerror #errorTitleIcon {
149 background-image: url("chrome://browser/skin/images/errorpage-cert-untrusted.png");
150 }
152 #errorPage.blockedsite #errorTitleIcon {
153 background-image: url("chrome://browser/skin/images/errorpage-blocked-site.png");
154 }
156 @media (min-resolution: @min_res_140pc@) {
157 /* Load 140% image when scaled by 140% */
158 #errorTitleIcon {
159 background-image: url("chrome://browser/skin/images/errorpage-warning@1.4x.png");
160 }
162 #errorPage.certerror #errorTitleIcon {
163 background-image: url("chrome://browser/skin/images/errorpage-cert-untrusted@1.4x.png");
164 }
166 #errorPage.blockedsite #errorTitleIcon {
167 background-image: url("chrome://browser/skin/images/errorpage-blocked-site@1.4x.png");
168 }
169 }
171 @media (min-resolution: @min_res_180pc@) {
172 /* Load 180% image when scaled by 180% */
173 #errorTitleIcon {
174 background-image: url("chrome://browser/skin/images/errorpage-warning@1.8x.png");
175 }
177 #errorPage.certerror #errorTitleIcon {
178 background-image: url("chrome://browser/skin/images/errorpage-cert-untrusted@1.8x.png");
179 }
181 #errorPage.blockedsite #errorTitleIcon {
182 background-image: url("chrome://browser/skin/images/errorpage-blocked-site@1.8x.png");
183 }
184 }
186 @media (max-width: 760px) {
187 #errorPage.certerror #errorTitleIcon, #errorPage.blockedsite #errorTitleIcon {
188 display: block;
189 -moz-margin-start: 0;
190 -moz-margin-end: 0;
191 }
192 }
194 .errorTitleText {
195 padding: 0;
196 display: inline-block;
197 vertical-align: middle;
198 }
200 #errorPageContainer > .section-header {
201 border-bottom: @metro_border_thin@ solid @border_color@;
202 margin-top: @metro_spacing_xxxnormal@;
203 padding-bottom: @metro_spacing_snormal@;
204 }
206 #errorPageContainer > .section-details {
207 margin-top: @metro_spacing_xxxnormal@;
208 padding-bottom: @metro_spacing_xxxnormal@;
209 }
211 #errorPageContainer > .section-footer {
212 padding-bottom: @metro_spacing_xxxnormal@;
213 }
215 #errorShortDesc > p:empty {
216 display: none;
217 }
219 #errorShortDesc > p {
220 overflow: auto;
221 padding-bottom: 1em;
222 margin: 0;
223 }
225 #errorPage.blockedsite #errorShortDesc > p {
226 font-weight: bold;
227 border-bottom: none;
228 padding-bottom: 0px;
229 }
232 #detailsLink {
233 color: black;
234 display: table-row;
235 }
237 #detailsGrid {
238 display: table;
239 }
241 #detailsContainer {
242 display: table-row;
243 }
245 #detailsLinkLabel {
246 display: table-cell;
247 }
249 .detailsSpacer {
250 display: table-cell;
251 padding-right: 8px;
252 }
254 #securityOverrideDiv {
255 padding-top: 10px;
256 }
258 .expandable-section {
259 background: url("chrome://browser/skin/images/arrowdown-16.png") no-repeat left 0.6em;
260 background-size: 11px 11px;
261 }
263 .expandable-section[collapsed] {
264 background-image: url("chrome://browser/skin/images/arrowright-16.png");
265 }
267 .expandable-section[collapsed] > .expandable-content {
268 display: none;
269 }
271 .expandable-section > .expandable-heading {
272 cursor: pointer;
273 -moz-padding-start: 15px;
274 -moz-user-select: none;
275 }
