Source code
Revision control
Copy as Markdown
Other Tools
/* 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
body {
--warning-color: #ffa436;
}
@media (prefers-color-scheme: dark) {
body {
--warning-color: #ffbd4f;
}
}
@media (prefers-contrast) {
body {
--warning-color: var(--in-content-page-color);
}
}
body.certerror {
width: 100%;
}
/* Normally, setting e.g. `display: flex` overrides the hidden attribute.
* This allows for element hiding to be controlled entirely in HTML & JS. */
[hidden] {
display: none !important;
}
body.captiveportal .title {
}
body.certerror .title {
fill: var(--warning-color);
}
body.blocked .title {
}
body.clockSkewError .title {
background-image: none;
background-repeat: no-repeat;
}
/* Pressing the retry button will cause the cursor to flicker from a pointer to
* not-allowed. Override the disabled cursor behaviour since we will never show
* the button disabled as the initial state. */
button:disabled {
cursor: pointer;
}
#errorWhatToDoTitle {
font-weight: bold;
margin-top: 2em;
}
#openInNewWindowContainer {
margin-bottom: 0;
}
#advancedPanelButtonContainer {
background-color: rgba(128, 128, 147, 0.1);
display: flex;
justify-content: end;
padding: 5px;
margin-top: 2em;
}
#certErrorAndCaptivePortalButtonContainer {
display: flex;
}
#netErrorButtonContainer > button {
margin-top: 1.2em;
}
#openPortalLoginPageButton {
margin-inline-start: 0;
}
#blockingErrorReporting {
padding-bottom: 10px;
/* Pull a bit closer to the top than the other .advanced-panel containers
* as this is just a checkbox. */
margin-top: 1.2em;
}
.advanced-panel-container {
width: 100%;
position: absolute;
left: 0;
}
.trr-message-container {
background-color: var(--in-content-box-background);
border: 1px solid var(--in-content-box-border-color);
border-radius: 4px;
padding: 10px;
}
#badCertAdvancedPanel {
background-color: var(--in-content-box-background);
border: 1px solid var(--in-content-box-border-color);
}
.advanced-panel {
margin: 48px auto;
min-width: var(--in-content-container-min-width);
max-width: var(--in-content-container-max-width);
}
#errorCode {
white-space: nowrap;
}
#viewCertificate {
margin: 0 3em;
}
#badCertTechnicalInfo {
margin: 3em 3em 1em;
overflow: auto;
white-space: pre-wrap;
}
#certificateErrorDebugInformation {
background-color: var(--in-content-box-info-background) !important;
border-top: 1px solid var(--in-content-border-color);
width: 100%;
padding: 1em 3%;
box-sizing: border-box;
}
#certificateErrorText {
font-family: monospace;
white-space: pre-wrap;
padding: 1em 0;
display: flex;
flex-wrap: wrap;
}
#cert_domain_link:not([href]) {
color: var(--in-content-page-color);
text-decoration: none;
}
.clockSkewError .try-again {
margin-top: 0.3em;
}
#errorLongDesc strong {
font-weight: 600;
}
#errorShortDesc {
font-size: 1.15em;
line-height: 1.3;
font-weight: 400;
margin-top: 10px;
}
@media only screen and (max-width: 959px) {
#certificateErrorText {
/* The encoded certificate chain looks better when we're not
* wrapping words on big screens, but at some point we need
* to wrap to avoid overflowing */
word-wrap: anywhere;
}
}
@media only screen and (max-width: 480px) {
#badCertTechnicalInfo {
margin: 10px 10px 5px;
}
#viewCertificate {
margin: 0 10px;
}
#errorCode {
/* Break the error code to avoid long codes overflowing the screen */
white-space: normal;
word-wrap: anywhere;
}
}
@media (max-width: 970px) {
body.certerror .title {
background-position: top left;
padding-top: 60px;
margin-top: -60px;
}
/* Reduce the negative margin on small viewport sizes to avoid exceeding the
* 38px body vertical padding error-pages.css sets, leaving 8px space: */
@media (max-height: 480px) {
body.certerror .title {
margin-top: -30px;
}
}
body.certerror .title:dir(rtl) {
background-position-x: right;
}
}