diff options
author | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
---|---|---|
committer | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
commit | 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch) | |
tree | 10027f336435511475e392454359edea8e25895d /mobile/android/themes/core/netError.css | |
parent | 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff) | |
download | UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip |
Add m-esr52 at 52.6.0
Diffstat (limited to 'mobile/android/themes/core/netError.css')
-rw-r--r-- | mobile/android/themes/core/netError.css | 226 |
1 files changed, 226 insertions, 0 deletions
diff --git a/mobile/android/themes/core/netError.css b/mobile/android/themes/core/netError.css new file mode 100644 index 000000000..ba9e397b2 --- /dev/null +++ b/mobile/android/themes/core/netError.css @@ -0,0 +1,226 @@ +/* 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/. */ + +html, +body { + margin: 0; + padding: 0; + height: 100%; + --moz-vertical-spacing: 10px; + --moz-background-height: 32px; +} + +body { + /* Add a set of stripes at the top of pages */ + background-image: linear-gradient(-45deg, #dfe8ee, #dfe8ee 33%, + #ecf0f3 33%, #ecf0f3 66%, + #dfe8ee 66%, #dfe8ee); + background-size: 64px var(--moz-background-height); + background-repeat: repeat-x; + + background-color: #f1f1f1; + padding: 0 20px; + + font-weight: 300; + font-size: 13px; + -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: round outside none; +} + +#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; +} + +li > button { + /* Removing the normal padding on the li so this stretched edge to edge. */ + margin-left: -1em; + margin-right: -1em; + width: calc(100% + 2em); +} + +/* Push the #ignoreWarningButton to the bottom on the blocked site page */ +.blockedsite > #errorPageContainer > #errorLongContent { + flex: 1; +} + +h1 { + margin: 0; + /* Since this has an underline, use padding for vertical spacing rather than margin */ + padding: var(--moz-vertical-spacing) 0; + font-weight: 300; + border-bottom: 1px solid #e0e2e5; +} + +h2 { + font-size: small; + padding: 0; + margin: var(--moz-vertical-spacing) 0; +} + +p { + margin: var(--moz-vertical-spacing) 0; +} + +button { + /* Force buttons to display: block here to try and enfoce collapsing margins */ + display: block; + width: 100%; + border: none; + padding: 1rem; + font-family: sans-serif; + background-color: #e0e2e5; + font-weight: 300; + border-radius: 2px; + background-image: none; + margin: var(--moz-vertical-spacing) 0 0; +} + +button.inProgress { + background-image: linear-gradient(-45deg, #dfe8ee, #dfe8ee 33%, + #ecf0f3 33%, #ecf0f3 66%, + #dfe8ee 66%, #dfe8ee); + background-size: 37px 5px; + background-repeat: repeat-x; + animation: progress 6s linear infinite; +} + +@keyframes progress { + from { background-position: 0 100%; } + to { background-position: 100% 100%; } +} + +.certerror { + background-image: linear-gradient(-45deg, #f0d000, #f0d000 33%, + #fedc00 33%, #fedc00 66%, + #f0d000 66%, #f0d000); +} + +.blockedsite { + background-image: linear-gradient(-45deg, #9b2e2e, #9b2e2e 33%, + #a83232 33%, #a83232 66%, + #9b2e2e 66%, #9b2e2e); + background-color: #b14646; + color: white; +} + +#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; + transform: translateY(var(--moz-background-height)); + padding-bottom: var(--moz-vertical-spacing); + + min-height: calc(100% - var(--moz-background-height) - var(--moz-vertical-spacing)); + display: flex; + flex-direction: column; +} + +/* Expanders have a structure of + * <div collapsed="true/false"> + * <h2 class="expander">Title</h2> + * <p>Content</p> + * </div> + * + * This shows an arrow to the right of the h2 element, and hides the content when collapsed="true". */ +.expander { + margin: var(--moz-vertical-spacing) 0; + background-image: url("chrome://browser/skin/images/dropmarker.svg"); + background-repeat: no-repeat; + /* dropmarker.svg is 10x7. Ensure that its centered in the middle of an 18x18 box */ + background-position: 3px 5.5px; + background-size: 10px 7px; + padding-left: 18px; +} + +div[collapsed="true"] > .expander { + background-image: url("chrome://browser/skin/images/dropmarker-right.svg"); + /* dropmarker.svg is 7x10. Ensure that its centered in the middle of an 18x18 box */ + background-size: 7px 10px; + background-position: 5.5px 4px; +} + +div[hidden] > .expander, +div[hidden] > .expander + *, +div[collapsed="true"] > .expander + * { + display: none; +} + +.blockedsite h1 { + border-bottom-color: #9b2e2e; +} + +.blockedsite button { + background-color: #9b2e2e; + color: white; +} + +/* Style warning button to look like a small text link in the + bottom. This is preferable to just using a text link + since there is already a mechanism in browser.js for trapping + oncommand events from unprivileged chrome pages (ErrorPageEventHandler).*/ +#ignoreWarningButton { + width: calc(100% + 40px); + -moz-appearance: none; + background: #b14646; + border: none; + text-decoration: underline; + margin: 0; + margin-inline-start: -20px; + font-size: smaller; + border-radius: 0; +} + +/* On large screen devices (hopefully a 7+ inch tablet, we already center content (see #errorPageContainer above). + Apply tablet specific styles here */ +@media (min-width: 550px) { + button { + min-width: 160px; + width: auto; + } + + /* If the tablet 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); + } + } +} + +#searchbox { + padding: 0; + display: flex; + margin: var(--moz-vertical-spacing) -1em; +} + +#searchbox > input { + flex: 3; + padding: 0em 3em 0em 1em; + width: 100%; + border: none; + font-family: sans-serif; + background-image: none; + background-color: white; + border-radius-top-right: none; + border-radius-bottom-right: none; +} + +#searchbox > button { + flex: 1; + margin: 0; + width: auto; +} + |