error_style.css (3964B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 /* Below styling is mirroring the Android Components styling from 6 https://github.com/mozilla-mobile/firefox-android/blob/main/android-components/components/browser/errorpages/src/main/assets/error_style.css */ 7 html, 8 body { 9 margin: 0; 10 padding: 0; 11 height: 100%; 12 --moz-vertical-spacing: 10px; 13 --moz-background-height: 32px; 14 } 15 16 body { 17 background-size: 64px var(--moz-background-height); 18 /* background-size: 64px 32px; */ 19 background-repeat: repeat-x; 20 21 background-color: #363b40; 22 color: #ffffff; 23 padding: 0 20px; 24 25 font-weight: 300; 26 font-size: 13px; 27 -moz-text-size-adjust: none; 28 font-family: sans-serif; 29 } 30 31 ul { 32 /* Shove the list indicator so that its left aligned, but use outside so that text 33 * doesn't don't wrap the text around it */ 34 padding: 0 1em; 35 margin: 0; 36 list-style: round outside none; 37 } 38 39 #errorShortDesc, 40 li:not(:last-of-type) { 41 /* Margins between the li and buttons below it won't be collapsed. Remove the bottom margin here. */ 42 margin: var(--moz-vertical-spacing) 0; 43 } 44 45 h1 { 46 margin: 0; 47 /* Since this has an underline, use padding for vertical spacing rather than margin */ 48 padding: var(--moz-vertical-spacing) 0; 49 font-weight: 300; 50 border-bottom: 1px solid #e0e2e5; 51 } 52 53 h2 { 54 font-size: small; 55 padding: 0; 56 margin: var(--moz-vertical-spacing) 0; 57 } 58 59 p { 60 margin: var(--moz-vertical-spacing) 0; 61 } 62 63 button { 64 /* Force buttons to display: block here to try and enfoce collapsing margins */ 65 display: block; 66 width: 100%; 67 border: none; 68 padding: 1rem; 69 font-family: sans-serif; 70 background-color: #00a4dc; 71 color: #ffffff; 72 font-weight: 300; 73 border-radius: 2px; 74 background-image: none; 75 margin: var(--moz-vertical-spacing) 0 0; 76 } 77 78 .buttonSecondary { 79 /* Force buttons to display: block here to try and enforce collapsing margins */ 80 display: block; 81 width: 100%; 82 border: none; 83 padding: 1rem; 84 font-family: sans-serif; 85 background-color: rgba(249, 249, 250, 0.1); 86 color: #ffffff; 87 font-weight: 300; 88 border-radius: 2px; 89 background-image: none; 90 margin: var(--moz-vertical-spacing) 0 0; 91 } 92 93 #errorPageContainer { 94 /* If the page is greater than 550px center the content. 95 * This number should be kept in sync with the media query for tablets below */ 96 max-width: 550px; 97 margin: 0 auto; 98 transform: translateY(var(--moz-background-height)); 99 padding-bottom: var(--moz-vertical-spacing); 100 101 min-height: calc(100% - var(--moz-background-height) - var(--moz-vertical-spacing)); 102 display: flex; 103 flex-direction: column; 104 } 105 106 /* On large screen devices (hopefully a 7+ inch tablet, we already center content (see #errorPageContainer above). 107 Apply tablet specific styles here */ 108 @media (min-width: 550px) { 109 button { 110 min-width: 160px; 111 width: auto; 112 } 113 114 /* If the tablet is tall as well, add some padding to make content feel a bit more centered */ 115 @media (min-height: 550px) { 116 #errorPageContainer { 117 padding-top: 64px; 118 min-height: calc(100% - 64px); 119 } 120 } 121 } 122 123 .advancedPanelButtonContainer { 124 background-color: rgba(128, 128, 147, 0.1); 125 display: flex; 126 justify-content: center; 127 padding-left: 0.5em; 128 padding-right: 0.5em; 129 padding-bottom: 0.5em; 130 } 131 132 #advancedPanelBackButtonContainer { 133 padding-bottom: 0; 134 } 135 136 #advancedPanelContainer { 137 width: 100%; 138 left: 0; 139 } 140 141 .advanced-panel { 142 display: none; 143 background-color: #202023; 144 border: 1px solid rgba(249, 249, 250, 0.2); 145 margin: 48px auto; 146 min-width: 13em; 147 max-width: 52em; 148 } 149 150 .button-container { 151 display: flex; 152 flex-flow: row; 153 } 154 155 #badCertTechnicalInfo { 156 margin: 0 1em 1em; 157 overflow: auto; 158 white-space: pre-line; 159 } 160 161 #advancedButton { 162 display: none; 163 } 164 165 #badCertAdvancedPanel { 166 display: none; 167 } 168 169 /* Below styling is Focus specific */ 170 a { 171 color: white; 172 }