michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: /*
michael@0:  *  This defines the look-and-feel styling of the error pages.
michael@0:  *  (see: netError.xhtml)
michael@0:  *
michael@0:  *  Original styling by William Price <bugzilla@mob.rice.edu>
michael@0:  *  Updated for mobile by: Wes Johnston <wjohnston@mozilla.com>
michael@0:  */
michael@0: 
michael@0: %filter substitution
michael@0: %include defines.inc
michael@0: %include platform.css
michael@0: 
michael@0: /*
michael@0:  * In-browser content styles,
michael@0:  * XXX: should be extracted and consolidated into a shared stylesheet for all in-browser content
michael@0:  */
michael@0: body {
michael@0:   background-color: #F4F4F4;
michael@0:   color: rgb(51,51,51);
michael@0:   font-family: "Segoe UI", sans-serif;
michael@0:   font-size: @font_normal@;
michael@0:   line-height: 23px;
michael@0: }
michael@0: 
michael@0: h1 {
michael@0:   font-size: @metro_font_xlarge@;
michael@0:   font-weight: normal;
michael@0:   line-height: @metro_spacing_large@;
michael@0: }
michael@0: h2 {
michael@0:   font-size: @metro_font_large@;
michael@0:   line-height: @metro_spacing_xxxnormal@;
michael@0:   font-weight: normal;
michael@0: }
michael@0: h3 {
michael@0:   font-size: @font_normal@;
michael@0:   line-height: @metro_spacing_xxnormal@;
michael@0: }
michael@0: h4 {
michael@0:   font-size: @font_normal@;
michael@0:   line-height: @metro_spacing_xxnormal@;
michael@0:   font-style: italic;
michael@0:   display: inline;
michael@0: }
michael@0: 
michael@0: /*
michael@0:  * Net error page styles
michael@0:  */
michael@0: 
michael@0: a {
michael@0:   text-decoration: none;
michael@0: }
michael@0: 
michael@0: ul {
michael@0:   margin: 0px;
michael@0:   padding: 0px 0px 0px 1em;
michael@0: }
michael@0: 
michael@0: li {
michael@0:   margin: 0px;
michael@0:   padding: 8px 0px;
michael@0: }
michael@0: 
michael@0: #errorPage.certerror, #errorPage.blockedsite {
michael@0:   background-color: @error_page_background_color@;
michael@0: }
michael@0: 
michael@0: #errorPage button {
michael@0:     margin: 5px 10px 5px 0;
michael@0: }
michael@0: 
michael@0: #errorPage > .top-decoration {
michael@0:     position: absolute;
michael@0:     top: 0;
michael@0:     left: 0;
michael@0:     width: 100%;
michael@0:     height: 25px;
michael@0: }
michael@0: 
michael@0: #errorPage.certerror > .top-decoration {
michael@0:    background: linear-gradient(-45deg,
michael@0:                     @error_page_background_color@ 25%,
michael@0:                     @error_page_warning_color@ 25%,
michael@0:                     @error_page_warning_color@ 50%,
michael@0:                     @error_page_background_color@ 50%,
michael@0:                     @error_page_background_color@ 75%,
michael@0:                     @error_page_warning_color@ 75%,
michael@0:                     @error_page_warning_color@) repeat scroll 0% 0% /
michael@0:                     80px 80px transparent;
michael@0: }
michael@0: 
michael@0: #errorPage.blockedsite > .top-decoration {
michael@0:   background: linear-gradient(-45deg,
michael@0:                     @error_page_background_color@ 25%,
michael@0:                     @error_page_error_color@ 25%,
michael@0:                     @error_page_error_color@ 50%,
michael@0:                     @error_page_background_color@ 50%,
michael@0:                     @error_page_background_color@ 75%,
michael@0:                     @error_page_error_color@ 75%,
michael@0:                     @error_page_error_color@) repeat scroll 0% 0% /
michael@0:                     80px 80px transparent;
michael@0: }
michael@0: 
michael@0: #errorPage #cert_domain_link {
michael@0:     color: #0095dd;
michael@0: }
michael@0: 
michael@0: #errorPage.certerror #errorPageContainer > .section-header,
michael@0: #errorPage.blockedsite #errorPageContainer > .section-header {
michael@0:   border-bottom: @metro_border_thin@ solid rgb(133,137,140);
michael@0: }
michael@0: 
michael@0: #errorPageContainer {
michael@0:   max-width: 628px;
michael@0:   margin-left: auto;
michael@0:   margin-right: auto;
michael@0:   margin-top: 60px;
michael@0:   -moz-padding-start: 40px;
michael@0:   -moz-padding-end: 24px;
michael@0: }
michael@0: 
michael@0: #errorTitleIcon {
michael@0:   background-image: url("chrome://browser/skin/images/errorpage-warning.png");
michael@0:   background-position: center center;
michael@0:   background-repeat: no-repeat;
michael@0:   background-size: 40px 40px;
michael@0:   background-origin: content-box;
michael@0:   display: inline-block;
michael@0:   -moz-margin-start: -64px;
michael@0:   -moz-margin-end: 24px;
michael@0:   height: 40px;
michael@0:   vertical-align: middle;
michael@0:   width: 40px;
michael@0: }
michael@0: 
michael@0: #errorPage.certerror #errorTitleIcon,  #errorPage.blockedsite #errorTitleIcon {
michael@0:   background-size: 60px 60px;
michael@0:   width: 60px;
michael@0:   height: 60px;
michael@0:   -moz-margin-start: -80px;
michael@0:   -moz-margin-end: 10px;
michael@0: }
michael@0: 
michael@0: #errorPage.certerror #errorTitleIcon {
michael@0:   background-image: url("chrome://browser/skin/images/errorpage-cert-untrusted.png");
michael@0: }
michael@0: 
michael@0: #errorPage.blockedsite #errorTitleIcon {
michael@0:   background-image: url("chrome://browser/skin/images/errorpage-blocked-site.png");
michael@0: }
michael@0: 
michael@0: @media (min-resolution: @min_res_140pc@) {
michael@0:   /* Load 140% image when scaled by 140% */
michael@0:   #errorTitleIcon {
michael@0:     background-image: url("chrome://browser/skin/images/errorpage-warning@1.4x.png");
michael@0:   }
michael@0: 
michael@0:   #errorPage.certerror #errorTitleIcon {
michael@0:     background-image: url("chrome://browser/skin/images/errorpage-cert-untrusted@1.4x.png");
michael@0:   }
michael@0: 
michael@0:   #errorPage.blockedsite #errorTitleIcon {
michael@0:     background-image: url("chrome://browser/skin/images/errorpage-blocked-site@1.4x.png");
michael@0:   }
michael@0: }
michael@0: 
michael@0: @media (min-resolution: @min_res_180pc@) {
michael@0:   /* Load 180% image when scaled by 180% */
michael@0:   #errorTitleIcon {
michael@0:     background-image: url("chrome://browser/skin/images/errorpage-warning@1.8x.png");
michael@0:   }
michael@0: 
michael@0:   #errorPage.certerror #errorTitleIcon {
michael@0:     background-image: url("chrome://browser/skin/images/errorpage-cert-untrusted@1.8x.png");
michael@0:   }
michael@0: 
michael@0:   #errorPage.blockedsite #errorTitleIcon {
michael@0:     background-image: url("chrome://browser/skin/images/errorpage-blocked-site@1.8x.png");
michael@0:   }
michael@0: }
michael@0: 
michael@0: @media (max-width: 760px) {
michael@0:   #errorPage.certerror #errorTitleIcon, #errorPage.blockedsite #errorTitleIcon {
michael@0:     display: block;
michael@0:     -moz-margin-start: 0;
michael@0:     -moz-margin-end: 0;
michael@0:   }
michael@0: }
michael@0: 
michael@0: .errorTitleText {
michael@0:   padding: 0;
michael@0:   display: inline-block;
michael@0:   vertical-align: middle;
michael@0: }
michael@0: 
michael@0: #errorPageContainer > .section-header {
michael@0:   border-bottom: @metro_border_thin@ solid @border_color@;
michael@0:   margin-top: @metro_spacing_xxxnormal@;
michael@0:   padding-bottom: @metro_spacing_snormal@;
michael@0: }
michael@0: 
michael@0: #errorPageContainer > .section-details {
michael@0:   margin-top: @metro_spacing_xxxnormal@;
michael@0:   padding-bottom: @metro_spacing_xxxnormal@;
michael@0: }
michael@0: 
michael@0: #errorPageContainer > .section-footer {
michael@0:   padding-bottom: @metro_spacing_xxxnormal@;
michael@0: }
michael@0: 
michael@0: #errorShortDesc > p:empty {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: #errorShortDesc > p {
michael@0:   overflow: auto;
michael@0:   padding-bottom: 1em;
michael@0:   margin: 0;
michael@0: }
michael@0: 
michael@0: #errorPage.blockedsite #errorShortDesc > p {
michael@0:   font-weight: bold;
michael@0:   border-bottom: none;
michael@0:   padding-bottom: 0px;
michael@0: }
michael@0: 
michael@0: 
michael@0: #detailsLink {
michael@0:   color: black;
michael@0:   display: table-row;
michael@0: }
michael@0: 
michael@0: #detailsGrid {
michael@0:   display: table;
michael@0: }
michael@0: 
michael@0: #detailsContainer {
michael@0:   display: table-row;
michael@0: }
michael@0: 
michael@0: #detailsLinkLabel {
michael@0:   display: table-cell;
michael@0: }
michael@0: 
michael@0: .detailsSpacer {
michael@0:   display: table-cell;
michael@0:   padding-right: 8px;
michael@0: }
michael@0: 
michael@0: #securityOverrideDiv {
michael@0:   padding-top: 10px;
michael@0: }
michael@0: 
michael@0: .expandable-section {
michael@0:   background: url("chrome://browser/skin/images/arrowdown-16.png") no-repeat left 0.6em;
michael@0:   background-size: 11px 11px;
michael@0: }
michael@0: 
michael@0: .expandable-section[collapsed] {
michael@0:   background-image: url("chrome://browser/skin/images/arrowright-16.png");
michael@0: }
michael@0: 
michael@0: .expandable-section[collapsed] > .expandable-content {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: .expandable-section > .expandable-heading {
michael@0:     cursor: pointer;
michael@0:     -moz-padding-start: 15px;
michael@0:     -moz-user-select: none;
michael@0: }