browser/metro/theme/netError.css

   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 }