The Tor Browser / file comparison
comparison: browser/metro/theme/netError.css
browser/metro/theme/netError.css
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
equal
deleted
inserted
replaced
| -1:000000000000 | 0:f57d0fe9238c |
|---|---|
| 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/. */ | |
| 4 | |
| 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 */ | |
| 12 | |
| 13 %filter substitution | |
| 14 %include defines.inc | |
| 15 %include platform.css | |
| 16 | |
| 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 } | |
| 28 | |
| 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 } | |
| 49 | |
| 50 /* | |
| 51 * Net error page styles | |
| 52 */ | |
| 53 | |
| 54 a { | |
| 55 text-decoration: none; | |
| 56 } | |
| 57 | |
| 58 ul { | |
| 59 margin: 0px; | |
| 60 padding: 0px 0px 0px 1em; | |
| 61 } | |
| 62 | |
| 63 li { | |
| 64 margin: 0px; | |
| 65 padding: 8px 0px; | |
| 66 } | |
| 67 | |
| 68 #errorPage.certerror, #errorPage.blockedsite { | |
| 69 background-color: @error_page_background_color@; | |
| 70 } | |
| 71 | |
| 72 #errorPage button { | |
| 73 margin: 5px 10px 5px 0; | |
| 74 } | |
| 75 | |
| 76 #errorPage > .top-decoration { | |
| 77 position: absolute; | |
| 78 top: 0; | |
| 79 left: 0; | |
| 80 width: 100%; | |
| 81 height: 25px; | |
| 82 } | |
| 83 | |
| 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 } | |
| 95 | |
| 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 } | |
| 107 | |
| 108 #errorPage #cert_domain_link { | |
| 109 color: #0095dd; | |
| 110 } | |
| 111 | |
| 112 #errorPage.certerror #errorPageContainer > .section-header, | |
| 113 #errorPage.blockedsite #errorPageContainer > .section-header { | |
| 114 border-bottom: @metro_border_thin@ solid rgb(133,137,140); | |
| 115 } | |
| 116 | |
| 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 } | |
| 125 | |
| 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 } | |
| 139 | |
| 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 } | |
| 147 | |
| 148 #errorPage.certerror #errorTitleIcon { | |
| 149 background-image: url("chrome://browser/skin/images/errorpage-cert-untrusted.png"); | |
| 150 } | |
| 151 | |
| 152 #errorPage.blockedsite #errorTitleIcon { | |
| 153 background-image: url("chrome://browser/skin/images/errorpage-blocked-site.png"); | |
| 154 } | |
| 155 | |
| 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 } | |
| 161 | |
| 162 #errorPage.certerror #errorTitleIcon { | |
| 163 background-image: url("chrome://browser/skin/images/errorpage-cert-untrusted@1.4x.png"); | |
| 164 } | |
| 165 | |
| 166 #errorPage.blockedsite #errorTitleIcon { | |
| 167 background-image: url("chrome://browser/skin/images/errorpage-blocked-site@1.4x.png"); | |
| 168 } | |
| 169 } | |
| 170 | |
| 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 } | |
| 176 | |
| 177 #errorPage.certerror #errorTitleIcon { | |
| 178 background-image: url("chrome://browser/skin/images/errorpage-cert-untrusted@1.8x.png"); | |
| 179 } | |
| 180 | |
| 181 #errorPage.blockedsite #errorTitleIcon { | |
| 182 background-image: url("chrome://browser/skin/images/errorpage-blocked-site@1.8x.png"); | |
| 183 } | |
| 184 } | |
| 185 | |
| 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 } | |
| 193 | |
| 194 .errorTitleText { | |
| 195 padding: 0; | |
| 196 display: inline-block; | |
| 197 vertical-align: middle; | |
| 198 } | |
| 199 | |
| 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 } | |
| 205 | |
| 206 #errorPageContainer > .section-details { | |
| 207 margin-top: @metro_spacing_xxxnormal@; | |
| 208 padding-bottom: @metro_spacing_xxxnormal@; | |
| 209 } | |
| 210 | |
| 211 #errorPageContainer > .section-footer { | |
| 212 padding-bottom: @metro_spacing_xxxnormal@; | |
| 213 } | |
| 214 | |
| 215 #errorShortDesc > p:empty { | |
| 216 display: none; | |
| 217 } | |
| 218 | |
| 219 #errorShortDesc > p { | |
| 220 overflow: auto; | |
| 221 padding-bottom: 1em; | |
| 222 margin: 0; | |
| 223 } | |
| 224 | |
| 225 #errorPage.blockedsite #errorShortDesc > p { | |
| 226 font-weight: bold; | |
| 227 border-bottom: none; | |
| 228 padding-bottom: 0px; | |
| 229 } | |
| 230 | |
| 231 | |
| 232 #detailsLink { | |
| 233 color: black; | |
| 234 display: table-row; | |
| 235 } | |
| 236 | |
| 237 #detailsGrid { | |
| 238 display: table; | |
| 239 } | |
| 240 | |
| 241 #detailsContainer { | |
| 242 display: table-row; | |
| 243 } | |
| 244 | |
| 245 #detailsLinkLabel { | |
| 246 display: table-cell; | |
| 247 } | |
| 248 | |
| 249 .detailsSpacer { | |
| 250 display: table-cell; | |
| 251 padding-right: 8px; | |
| 252 } | |
| 253 | |
| 254 #securityOverrideDiv { | |
| 255 padding-top: 10px; | |
| 256 } | |
| 257 | |
| 258 .expandable-section { | |
| 259 background: url("chrome://browser/skin/images/arrowdown-16.png") no-repeat left 0.6em; | |
| 260 background-size: 11px 11px; | |
| 261 } | |
| 262 | |
| 263 .expandable-section[collapsed] { | |
| 264 background-image: url("chrome://browser/skin/images/arrowright-16.png"); | |
| 265 } | |
| 266 | |
| 267 .expandable-section[collapsed] > .expandable-content { | |
| 268 display: none; | |
| 269 } | |
| 270 | |
| 271 .expandable-section > .expandable-heading { | |
| 272 cursor: pointer; | |
| 273 -moz-padding-start: 15px; | |
| 274 -moz-user-select: none; | |
| 275 } |
