gecko-dev/browser/metro/theme/netError.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/*
 *  This defines the look-and-feel styling of the error pages.
 *  (see: netError.xhtml)
 *
 *  Original styling by William Price <bugzilla@mob.rice.edu>
 *  Updated for mobile by: Wes Johnston <wjohnston@mozilla.com>
 */

%filter substitution
%include defines.inc
%include platform.css

/*
 * In-browser content styles,
 * XXX: should be extracted and consolidated into a shared stylesheet for all in-browser content
 */
body {
  background-color: #F4F4F4;
  color: rgb(51,51,51);
  font-family: "Segoe UI", sans-serif;
  font-size: @font_normal@;
  line-height: 23px;
}

h1 {
  font-size: @metro_font_xlarge@;
  font-weight: normal;
  line-height: @metro_spacing_large@;
}
h2 {
  font-size: @metro_font_large@;
  line-height: @metro_spacing_xxxnormal@;
  font-weight: normal;
}
h3 {
  font-size: @font_normal@;
  line-height: @metro_spacing_xxnormal@;
}
h4 {
  font-size: @font_normal@;
  line-height: @metro_spacing_xxnormal@;
  font-style: italic;
  display: inline;
}

/*
 * Net error page styles
 */

a {
  text-decoration: none;
}

ul {
  margin: 0px;
  padding: 0px 0px 0px 1em;
}

li {
  margin: 0px;
  padding: 8px 0px;
}

#errorPage.certerror, #errorPage.blockedsite {
  background-color: @error_page_background_color@;
}

#errorPage button {
    margin: 5px 10px 5px 0;
}

#errorPage > .top-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25px;
}

#errorPage.certerror > .top-decoration {
   background: linear-gradient(-45deg,
                    @error_page_background_color@ 25%,
                    @error_page_warning_color@ 25%,
                    @error_page_warning_color@ 50%,
                    @error_page_background_color@ 50%,
                    @error_page_background_color@ 75%,
                    @error_page_warning_color@ 75%,
                    @error_page_warning_color@) repeat scroll 0% 0% /
                    80px 80px transparent;
}

#errorPage.blockedsite > .top-decoration {
  background: linear-gradient(-45deg,
                    @error_page_background_color@ 25%,
                    @error_page_error_color@ 25%,
                    @error_page_error_color@ 50%,
                    @error_page_background_color@ 50%,
                    @error_page_background_color@ 75%,
                    @error_page_error_color@ 75%,
                    @error_page_error_color@) repeat scroll 0% 0% /
                    80px 80px transparent;
}

#errorPage #cert_domain_link {
    color: #0095dd;
}

#errorPage.certerror #errorPageContainer > .section-header,
#errorPage.blockedsite #errorPageContainer > .section-header {
  border-bottom: @metro_border_thin@ solid rgb(133,137,140);
}

#errorPageContainer {
  max-width: 628px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 60px;
  -moz-padding-start: 40px;
  -moz-padding-end: 24px;
}

#errorTitleIcon {
  background-image: url("chrome://browser/skin/images/errorpage-warning.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-origin: content-box;
  display: inline-block;
  -moz-margin-start: -64px;
  -moz-margin-end: 24px;
  height: 40px;
  vertical-align: middle;
  width: 40px;
}

#errorPage.certerror #errorTitleIcon,  #errorPage.blockedsite #errorTitleIcon {
  background-size: 60px 60px;
  width: 60px;
  height: 60px;
  -moz-margin-start: -80px;
  -moz-margin-end: 10px;
}

#errorPage.certerror #errorTitleIcon {
  background-image: url("chrome://browser/skin/images/errorpage-cert-untrusted.png");
}

#errorPage.blockedsite #errorTitleIcon {
  background-image: url("chrome://browser/skin/images/errorpage-blocked-site.png");
}

@media (min-resolution: @min_res_140pc@) {
  /* Load 140% image when scaled by 140% */
  #errorTitleIcon {
    background-image: url("chrome://browser/skin/images/errorpage-warning@1.4x.png");
  }

  #errorPage.certerror #errorTitleIcon {
    background-image: url("chrome://browser/skin/images/errorpage-cert-untrusted@1.4x.png");
  }

  #errorPage.blockedsite #errorTitleIcon {
    background-image: url("chrome://browser/skin/images/errorpage-blocked-site@1.4x.png");
  }
}

@media (min-resolution: @min_res_180pc@) {
  /* Load 180% image when scaled by 180% */
  #errorTitleIcon {
    background-image: url("chrome://browser/skin/images/errorpage-warning@1.8x.png");
  }

  #errorPage.certerror #errorTitleIcon {
    background-image: url("chrome://browser/skin/images/errorpage-cert-untrusted@1.8x.png");
  }

  #errorPage.blockedsite #errorTitleIcon {
    background-image: url("chrome://browser/skin/images/errorpage-blocked-site@1.8x.png");
  }
}

@media (max-width: 760px) {
  #errorPage.certerror #errorTitleIcon, #errorPage.blockedsite #errorTitleIcon {
    display: block;
    -moz-margin-start: 0;
    -moz-margin-end: 0;
  }
}

.errorTitleText {
  padding: 0;
  display: inline-block;
  vertical-align: middle;
}

#errorPageContainer > .section-header {
  border-bottom: @metro_border_thin@ solid @border_color@;
  margin-top: @metro_spacing_xxxnormal@;
  padding-bottom: @metro_spacing_snormal@;
}

#errorPageContainer > .section-details {
  margin-top: @metro_spacing_xxxnormal@;
  padding-bottom: @metro_spacing_xxxnormal@;
}

#errorPageContainer > .section-footer {
  padding-bottom: @metro_spacing_xxxnormal@;
}

#errorShortDesc > p:empty {
  display: none;
}

#errorShortDesc > p {
  overflow: auto;
  padding-bottom: 1em;
  margin: 0;
}

#errorPage.blockedsite #errorShortDesc > p {
  font-weight: bold;
  border-bottom: none;
  padding-bottom: 0px;
}


#detailsLink {
  color: black;
  display: table-row;
}

#detailsGrid {
  display: table;
}

#detailsContainer {
  display: table-row;
}

#detailsLinkLabel {
  display: table-cell;
}

.detailsSpacer {
  display: table-cell;
  padding-right: 8px;
}

#securityOverrideDiv {
  padding-top: 10px;
}

.expandable-section {
  background: url("chrome://browser/skin/images/arrowdown-16.png") no-repeat left 0.6em;
  background-size: 11px 11px;
}

.expandable-section[collapsed] {
  background-image: url("chrome://browser/skin/images/arrowright-16.png");
}

.expandable-section[collapsed] > .expandable-content {
  display: none;
}

.expandable-section > .expandable-heading {
    cursor: pointer;
    -moz-padding-start: 15px;
    -moz-user-select: none;
}