1 files changed, 221 insertions, 0 deletions
diff --git a/toolkit/themes/shared/aboutNetError.css b/toolkit/themes/shared/aboutNetError.css
new file mode 100644
index 0000000000..c84a72fce4
--- /dev/null
+++ b/toolkit/themes/shared/aboutNetError.css
@@ -0,0 +1,221 @@
+/* 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/. */
+
+@import url("chrome://global/skin/error-pages.css");
+
+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;
+}
+
+.title {
+  font-size: 1.75em;
+}
+
+body.captiveportal .title {
+  background-image: url("chrome://global/skin/in-content/wifi.svg");
+}
+
+body.certerror .title {
+  background-image: url("chrome://global/skin/icons/warning.svg");
+  color: var(--warning-color);
+}
+
+body.blocked .title {
+  background-image: url("chrome://global/skin/icons/blocked.svg");
+}
+
+body.clockSkewError .title {
+  background-image: none;
+  background-repeat: no-repeat;
+}
+
+.title-text {
+  font-weight: 300;
+  line-height: 1.2;
+}
+
+/* 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 {
+    /* !important is necessary here until Bug 1723718 is resolved */
+    background-image: url("chrome://global/skin/icons/warning.svg") !important;
+    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;
+  }
+}