From b5d03ff62debde4c81a2736110cf6405492aa4a4 Mon Sep 17 00:00:00 2001 From: Tiger Oakes Date: Thu, 28 May 2020 11:15:05 -0700 Subject: [PATCH] Close #10571 - Add dark mode for error pages --- .../main/assets/high_risk_error_pages.html | 43 +++--- app/src/main/assets/high_risk_error_style.css | 85 +--------- .../low_and_medium_risk_error_pages.html | 124 +++++++++------ .../low_and_medium_risk_error_style.css | 145 +++--------------- app/src/main/assets/shared_error_style.css | 131 ++++++++++++++++ 5 files changed, 255 insertions(+), 273 deletions(-) create mode 100644 app/src/main/assets/shared_error_style.css diff --git a/app/src/main/assets/high_risk_error_pages.html b/app/src/main/assets/high_risk_error_pages.html index aec567697..d0f04841d 100644 --- a/app/src/main/assets/high_risk_error_pages.html +++ b/app/src/main/assets/high_risk_error_pages.html @@ -5,34 +5,33 @@ - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> - - + + - - + + + - - -
+ + +
+ + - - - - -
+ +

-
+
- -
+ +
+
+ + +
+ - - -
- - - - + diff --git a/app/src/main/assets/high_risk_error_style.css b/app/src/main/assets/high_risk_error_style.css index 41d1bf4a9..054b72916 100644 --- a/app/src/main/assets/high_risk_error_style.css +++ b/app/src/main/assets/high_risk_error_style.css @@ -2,49 +2,12 @@ * 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/. */ -html, -body { - margin: 0; - padding: 0; - height: 100%; - --moz-vertical-spacing: 10px; - --moz-background-height: 32px; -} - -body { - background-size: 64px var(--moz-background-height); - background-repeat: repeat-x; - background-color: #c50042; - color: #ffffff; - padding: 0 40px; - font-size: 14px; - -moz-text-size-adjust: none; - font-family: sharp-sans; -} - -ul { - /* Shove the list indicator so that its left aligned, but use outside so that text - * doesn't don't wrap the text around it */ - padding: 0 1em; - margin: 0; - list-style-type: disc; -} - -#errorShortDesc, -li:not(:last-of-type) { - /* Margins between the li and buttons below it won't be collapsed. Remove the bottom margin here. */ - margin: var(--moz-vertical-spacing) 0; -} - -h1 { - margin: 0; - padding: 0; - margin: var(--moz-vertical-spacing) 0; - color: #ffffff; - font-family: sharp-sans; - font-weight: bold; - font-size: 20px; - line-height: 24px; +:root { + --background-color: #c50042; + --text-color: #ffffff; + --primary-button-color: #e6e6eb; + --primary-button-text-color: #2f2c61; + --header-color: #ffffff; } p { @@ -53,46 +16,14 @@ p { color: #ffffff; } -button { - display: block; - height: 36px; - width: 100%; - border-radius: 5px; - border-color: #e3e3e7; - font-family: sans-serif; - background-color: #e6e6eb; - color: #2f2c61; - font-size: 14px; - font-weight: bold; - margin: var(--moz-vertical-spacing) auto; - text-aligned:center; - vertical-aligned:center; - background-image: none; -} - - -.hidden { - display: none; -} - /* On large width devices, apply specific styles here. Often triggered by landscape mode or tablets */ @media (min-width: 550px) { - button { - margin: var(--moz-vertical-spacing) var(--moz-vertical-spacing); - min-width: 400px; - width: auto; - } - /* If the device is tall as well, add some padding to make content feel a bit more centered */ @media (min-height: 550px) { #errorPageContainer { - padding-top: 64px; - min-height: calc(100% - 64px); -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } } } - - diff --git a/app/src/main/assets/low_and_medium_risk_error_pages.html b/app/src/main/assets/low_and_medium_risk_error_pages.html index ed8c66615..e930454df 100644 --- a/app/src/main/assets/low_and_medium_risk_error_pages.html +++ b/app/src/main/assets/low_and_medium_risk_error_pages.html @@ -5,68 +5,96 @@ - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> - - + + - - + + + - - -
+ + +
+ + - - - - -
+ +

-
+
- -
+ +
-
+
- - + + - - + + - -
- -
+ - + + - + diff --git a/app/src/main/assets/low_and_medium_risk_error_style.css b/app/src/main/assets/low_and_medium_risk_error_style.css index 5a9217103..2b2d2792a 100644 --- a/app/src/main/assets/low_and_medium_risk_error_style.css +++ b/app/src/main/assets/low_and_medium_risk_error_style.css @@ -2,132 +2,14 @@ * 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/. */ -html, -body { - margin: 0; - padding: 0; - height: 100%; - --moz-vertical-spacing: 10px; - --moz-background-height: 32px; -} - -body { - background-size: 64px var(--moz-background-height); - background-repeat: repeat-x; - background-color: #f9f9fb; - color: #15141A; - padding: 0 40px; - font-size: 14px; - -moz-text-size-adjust: none; - font-family: sans-serif; -} - -ul { - /* Shove the list indicator so that its left aligned, but use outside so that text - * doesn't don't wrap the text around it */ - padding: 0 1em; - margin: 0; - list-style-type: disc; -} - -#errorShortDesc, -li:not(:last-of-type) { - /* Margins between the li and buttons below it won't be collapsed. Remove the bottom margin here. */ - margin: var(--moz-vertical-spacing) 0; -} - -h1 { - margin: 0; - padding: 0; - margin: var(--moz-vertical-spacing) 0; - color: #312a65; - font-family: sans-serif; - font-weight: bold; - font-size: 20px; - line-height: 24px; -} - -p { - line-height: 20px; - margin: var(--moz-vertical-spacing) 0; -} - - -button { - display: block; - height: 36px; - width: 100%; - border-radius: 5px; - border-color: #312A65; - font-family: sans-serif; - background-color: #312A65; - color: #FFFFFF; - font-size: 14px; - font-weight: bold; - margin: var(--moz-vertical-spacing) auto; - text-aligned:center; - vertical-aligned:center; -} - -hr { - height: 0; - border: 0; - border-top: 1px solid #D7D7DB; -} - -.horizontalLine { - margin-left: -40px; - margin-right: -40px; -} - -.buttonSecondary { - display: block; - width: 100%; - height: 36px; - border-radius: 5px; - border-color: #E0E0E6; - font-family: sans-serif; - font-weight: bold; - background-color: #E0E0E6; - color: #20123A; - text-aligned:center; - vertical-aligned:center; - margin: var(--moz-vertical-spacing) auto; -} - -#errorPageContainer { - /* If the page is greater than 550px center the content. - * This number should be kept in sync with the media query for tablets below */ - max-width: 550px; - margin: 0 auto; - min-height: 100%; -} - -.hidden { - display: none; -} - -/* On large width devices, apply specific styles here. Often triggered by landscape mode or tablets */ -@media (min-width: 550px) { - button { - margin: var(--moz-vertical-spacing) auto; - min-width: 400px; - width: auto; - } - - .buttonSecondary { - margin: var(--moz-vertical-spacing) auto; - min-width: 400px; - width: auto; - } - - /* If the device is tall as well, add some padding to make content feel a bit more centered */ - @media (min-height: 550px) { - #errorPageContainer { - padding-top: 64px; - min-height: calc(100% - 64px); - } - } +:root { + --background-color: #f9f9fb; + --text-color: #15141a; + --primary-button-color: #312a65; + --primary-button-text-color: #ffffff; + --secondary-button-color: #e0e0e6; + --secondary-button-text-color: #20123a; + --header-color: #312a65; } #badCertTechnicalInfo { @@ -140,3 +22,14 @@ hr { justify-content: center; } +@media (prefers-color-scheme: dark) { + :root { + --background-color: #15141a; + --text-color: #fbfbfe; + --primary-button-color: #9059ff; + --primary-button-text-color: #ffffff; + --secondary-button-color: #e0e0e6; + --secondary-button-text-color: #312a65; + --header-color: #fbfbfe; + } +} diff --git a/app/src/main/assets/shared_error_style.css b/app/src/main/assets/shared_error_style.css new file mode 100644 index 000000000..67b0877fe --- /dev/null +++ b/app/src/main/assets/shared_error_style.css @@ -0,0 +1,131 @@ +/* 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/. */ + +:root { + --moz-vertical-spacing: 10px; + --moz-background-height: 32px; + /* Default values just to indicate what color variables we use */ + --background-color: #f9f9fb; + --text-color: #15141a; + --primary-button-color: #312a65; + --primary-button-text-color: #ffffff; + --secondary-button-color: #e0e0e6; + --secondary-button-text-color: #20123a; + --header-color: var(--text-color); +} + +html, +body { + margin: 0; + padding: 0; + height: 100%; +} + +body { + background-size: 64px var(--moz-background-height); + background-repeat: repeat-x; + background-color: var(--background-color); + color: var(--text-color); + padding: 0 40px; + font-size: 14px; + font-family: sharp-sans, sans-serif; + -moz-text-size-adjust: none; +} + +ul { + /* Shove the list indicator so that its left aligned, but use outside so that text + * doesn't don't wrap the text around it */ + padding: 0 1em; + margin: 0; + list-style-type: disc; +} + +#errorShortDesc, +li:not(:last-of-type) { + /* Margins between the li and buttons below it won't be collapsed. Remove the bottom margin here. */ + margin: var(--moz-vertical-spacing) 0; +} + +h1 { + margin: 0; + padding: 0; + margin: var(--moz-vertical-spacing) 0; + color: var(--header-color); + font-weight: bold; + font-size: 20px; + line-height: 24px; +} + +p { + line-height: 20px; + margin: var(--moz-vertical-spacing) 0; +} + +button { + display: block; + height: 36px; + width: 100%; + border-radius: 5px; + border: 0; + font-family: inherit; + background-color: var(--primary-button-color); + color: var(--primary-button-text-color); + font-size: 14px; + font-weight: bold; + margin: var(--moz-vertical-spacing) auto; + text-align: center; +} + +hr { + height: 1px; + border: 0; + background: rgba(21, 20, 26, 0.12); + margin: 32px 0; +} + +.horizontalLine { + margin-left: -40px; + margin-right: -40px; +} + +.buttonSecondary { + background-color: var(--secondary-button-color); + color: var(--secondary-button-text-color); +} + +#errorPageContainer { + /* If the page is greater than 550px center the content. + * This number should be kept in sync with the media query for tablets below */ + max-width: 550px; + margin: 0 auto; + min-height: 100%; +} + +/* On large width devices, apply specific styles here. Often triggered by landscape mode or tablets */ +@media (min-width: 550px) { + button, + .buttonSecondary { + margin: var(--moz-vertical-spacing) auto; + min-width: 400px; + width: auto; + } + + /* If the device is tall as well, add some padding to make content feel a bit more centered */ + @media (min-height: 550px) { + #errorPageContainer { + padding-top: 64px; + min-height: calc(100% - 64px); + } + } +} + +#badCertTechnicalInfo { + overflow: auto; + white-space: pre-line; +} + +#advancedPanelButtonContainer { + display: flex; + justify-content: center; +}