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

276 lines
6.3 KiB
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;
}