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: html,
michael@0: body {
michael@0:   margin: 0;
michael@0:   padding: 0;
michael@0:   height: 100%;
michael@0: }
michael@0: 
michael@0: body {
michael@0:   /* Add a set of stripes at the top of pages */
michael@0:   background-image: linear-gradient(-45deg, #dfe8ee,     #dfe8ee 33%,
michael@0:                                             #ecf0f3 33%, #ecf0f3 66%,
michael@0:                                             #dfe8ee 66%, #dfe8ee);
michael@0:   background-size: 64px 32px;
michael@0:   background-repeat: repeat-x;
michael@0: 
michael@0:   background-color: #f1f1f1;
michael@0:   padding: 0 20px;
michael@0: 
michael@0:   font-weight: 300;
michael@0:   font-size: 13px;
michael@0:   -moz-text-size-adjust: none;
michael@0:   font-family: sans-serif;
michael@0: }
michael@0: 
michael@0: 
michael@0: ul {
michael@0:   /* Shove the list indicator so that its left aligned, but use outside so that text
michael@0:    * doesn't don't wrap the text around it */
michael@0:   padding: 1em;
michael@0:   margin: 0;
michael@0:   list-style: round outside none;
michael@0: }
michael@0: 
michael@0: li:not(:last-of-type),
michael@0: #errorLongDesc,
michael@0: #errorLongContent {
michael@0:   padding-bottom: 10px;
michael@0: }
michael@0: 
michael@0: /* Push the #ignoreWarningButton to the bottom on the blocked site page */
michael@0: .blockedsite > #errorPageContainer > #errorLongContent {
michael@0:   flex: 1;
michael@0: }
michael@0: 
michael@0: h1 {
michael@0:   padding: 1rem 0;
michael@0:   font-weight: 300;
michael@0:   border-bottom: 1px solid #e0e2e5;
michael@0: }
michael@0: 
michael@0: h2 {
michael@0:   font-size: small;
michael@0:   padding: 0;
michael@0:   margin: 0;
michael@0: }
michael@0: 
michael@0: p {
michael@0:   margin-top: 0;
michael@0: }
michael@0: 
michael@0: button {
michael@0:   width: 100%;
michael@0:   border: none;
michael@0:   padding: 1rem;
michael@0:   font-family: sans-serif;
michael@0:   background-color: #e0e2e5;
michael@0:   font-size: 1rem; /* Not sure why this has to be specified. See bug 892843. */
michael@0:   font-weight: 300;
michael@0:   border-radius: 2px;
michael@0:   background-image: none;
michael@0: }
michael@0: 
michael@0: button + button {
michael@0:   margin-top: 1em;  
michael@0: }
michael@0: 
michael@0: .certerror {
michael@0:   background-image: linear-gradient(-45deg, #f0d000,     #f0d000 33%,
michael@0:                                             #fedc00 33%, #fedc00 66%,
michael@0:                                             #f0d000 66%, #f0d000);
michael@0: }
michael@0: 
michael@0: .blockedsite {
michael@0:   background-image: linear-gradient(-45deg, #9b2e2e,     #9b2e2e 33%,
michael@0:                                             #a83232 33%, #a83232 66%,
michael@0:                                             #9b2e2e 66%, #9b2e2e);
michael@0:   background-color: #b14646;
michael@0:   color: white;
michael@0: }
michael@0: 
michael@0: #errorPageContainer {
michael@0:   /* If the page is greater than 550px center the content.
michael@0:    * This number should be kept in sync with the media query for tablets below */
michael@0:   max-width: 550px;
michael@0:   margin-left: auto;
michael@0:   margin-right: auto;
michael@0:   padding-top: 1rem;
michael@0: 
michael@0:   min-height: calc(100% - 1rem);
michael@0:   display: flex;
michael@0:   flex-direction: column;
michael@0: }
michael@0: 
michael@0: /* Expanders have a structure of
michael@0:  * <div collapsed="true/false">
michael@0:  *   <h2 class="expander">Title</h2>
michael@0:  *   <p>Content</p>
michael@0:  * </div>
michael@0:  *
michael@0:  * This shows an arrow to the right of the h2 element, and hides the content when collapsed="true". */
michael@0: .expander {
michael@0:   margin: 1rem 0;
michael@0:   background-image: url("chrome://browser/skin/images/dropmarker.svg");
michael@0:   background-repeat: no-repeat;
michael@0:   /* dropmarker.svg is 10x7. Ensure that its centered in the middle of an 18x18 box */
michael@0:   background-position: 3px 5.5px;
michael@0:   background-size: 10px 7px;
michael@0:   padding-left: 18px;
michael@0: }
michael@0: 
michael@0: .expander:first-of-type {
michael@0:   /* Double the margin here so that the space above the first expander
michael@0:    * is the same as the space between multiple expanders */
michael@0:   margin-top: 20px;
michael@0: }
michael@0: 
michael@0: div[collapsed="true"] > .expander {
michael@0:   background-image: url("chrome://browser/skin/images/dropmarker-right.svg");
michael@0:   /* dropmarker.svg is 7x10. Ensure that its centered in the middle of an 18x18 box */
michael@0:   background-size: 7px 10px;
michael@0:   background-position: 5.5px 4px;
michael@0: }
michael@0: 
michael@0: div[hidden] > .expander,
michael@0: div[hidden] > .expander + *,
michael@0: div[collapsed="true"] > .expander + * {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: .blockedsite h1 {
michael@0:   border-bottom-color: #9b2e2e;
michael@0: }
michael@0: 
michael@0: .blockedsite button {
michael@0:   background-color: #9b2e2e;
michael@0:   color: white;
michael@0: }
michael@0: 
michael@0: /* Style warning button to look like a small text link in the
michael@0:    bottom. This is preferable to just using a text link
michael@0:    since there is already a mechanism in browser.js for trapping
michael@0:    oncommand events from unprivileged chrome pages (ErrorPageEventHandler).*/
michael@0: #ignoreWarningButton {
michael@0:   width: calc(100% + 40px);
michael@0:   -moz-appearance: none;
michael@0:   background: #b14646;
michael@0:   border: none;
michael@0:   text-decoration: underline;
michael@0:   margin: 0;
michael@0:   -moz-margin-start: -20px;
michael@0:   font-size: smaller;
michael@0:   border-radius: 0;
michael@0: }
michael@0: 
michael@0: /* On large screen devices (hopefully a 7+ inch tablet, we already center content (see #errorPageContainer above).
michael@0:    Apply tablet specific styles here */
michael@0: @media (min-width: 550px) {
michael@0:   button {
michael@0:     min-width: 160px;
michael@0:     width: auto;
michael@0:   }
michael@0: 
michael@0:   button + button {
michael@0:     margin-top: 0;
michael@0:   }
michael@0: 
michael@0:   /* If the tablet is tall as well, add some padding to make content feel a bit more centered */
michael@0:   @media (min-height: 550px) {
michael@0:     #errorPageContainer {
michael@0:       padding-top: 64px;
michael@0:       min-height: calc(100% - 64px);
michael@0:     }
michael@0:   }
michael@0: 
michael@0: 
michael@0: }