The Tor Browser / file comparison
comparison: mobile/android/themes/core/netError.css
mobile/android/themes/core/netError.css
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:8db3cdcef3a8 |
|---|---|
| 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 html, | |
| 6 body { | |
| 7 margin: 0; | |
| 8 padding: 0; | |
| 9 height: 100%; | |
| 10 } | |
| 11 | |
| 12 body { | |
| 13 /* Add a set of stripes at the top of pages */ | |
| 14 background-image: linear-gradient(-45deg, #dfe8ee, #dfe8ee 33%, | |
| 15 #ecf0f3 33%, #ecf0f3 66%, | |
| 16 #dfe8ee 66%, #dfe8ee); | |
| 17 background-size: 64px 32px; | |
| 18 background-repeat: repeat-x; | |
| 19 | |
| 20 background-color: #f1f1f1; | |
| 21 padding: 0 20px; | |
| 22 | |
| 23 font-weight: 300; | |
| 24 font-size: 13px; | |
| 25 -moz-text-size-adjust: none; | |
| 26 font-family: sans-serif; | |
| 27 } | |
| 28 | |
| 29 | |
| 30 ul { | |
| 31 /* Shove the list indicator so that its left aligned, but use outside so that text | |
| 32 * doesn't don't wrap the text around it */ | |
| 33 padding: 1em; | |
| 34 margin: 0; | |
| 35 list-style: round outside none; | |
| 36 } | |
| 37 | |
| 38 li:not(:last-of-type), | |
| 39 #errorLongDesc, | |
| 40 #errorLongContent { | |
| 41 padding-bottom: 10px; | |
| 42 } | |
| 43 | |
| 44 /* Push the #ignoreWarningButton to the bottom on the blocked site page */ | |
| 45 .blockedsite > #errorPageContainer > #errorLongContent { | |
| 46 flex: 1; | |
| 47 } | |
| 48 | |
| 49 h1 { | |
| 50 padding: 1rem 0; | |
| 51 font-weight: 300; | |
| 52 border-bottom: 1px solid #e0e2e5; | |
| 53 } | |
| 54 | |
| 55 h2 { | |
| 56 font-size: small; | |
| 57 padding: 0; | |
| 58 margin: 0; | |
| 59 } | |
| 60 | |
| 61 p { | |
| 62 margin-top: 0; | |
| 63 } | |
| 64 | |
| 65 button { | |
| 66 width: 100%; | |
| 67 border: none; | |
| 68 padding: 1rem; | |
| 69 font-family: sans-serif; | |
| 70 background-color: #e0e2e5; | |
| 71 font-size: 1rem; /* Not sure why this has to be specified. See bug 892843. */ | |
| 72 font-weight: 300; | |
| 73 border-radius: 2px; | |
| 74 background-image: none; | |
| 75 } | |
| 76 | |
| 77 button + button { | |
| 78 margin-top: 1em; | |
| 79 } | |
| 80 | |
| 81 .certerror { | |
| 82 background-image: linear-gradient(-45deg, #f0d000, #f0d000 33%, | |
| 83 #fedc00 33%, #fedc00 66%, | |
| 84 #f0d000 66%, #f0d000); | |
| 85 } | |
| 86 | |
| 87 .blockedsite { | |
| 88 background-image: linear-gradient(-45deg, #9b2e2e, #9b2e2e 33%, | |
| 89 #a83232 33%, #a83232 66%, | |
| 90 #9b2e2e 66%, #9b2e2e); | |
| 91 background-color: #b14646; | |
| 92 color: white; | |
| 93 } | |
| 94 | |
| 95 #errorPageContainer { | |
| 96 /* If the page is greater than 550px center the content. | |
| 97 * This number should be kept in sync with the media query for tablets below */ | |
| 98 max-width: 550px; | |
| 99 margin-left: auto; | |
| 100 margin-right: auto; | |
| 101 padding-top: 1rem; | |
| 102 | |
| 103 min-height: calc(100% - 1rem); | |
| 104 display: flex; | |
| 105 flex-direction: column; | |
| 106 } | |
| 107 | |
| 108 /* Expanders have a structure of | |
| 109 * <div collapsed="true/false"> | |
| 110 * <h2 class="expander">Title</h2> | |
| 111 * <p>Content</p> | |
| 112 * </div> | |
| 113 * | |
| 114 * This shows an arrow to the right of the h2 element, and hides the content when collapsed="true". */ | |
| 115 .expander { | |
| 116 margin: 1rem 0; | |
| 117 background-image: url("chrome://browser/skin/images/dropmarker.svg"); | |
| 118 background-repeat: no-repeat; | |
| 119 /* dropmarker.svg is 10x7. Ensure that its centered in the middle of an 18x18 box */ | |
| 120 background-position: 3px 5.5px; | |
| 121 background-size: 10px 7px; | |
| 122 padding-left: 18px; | |
| 123 } | |
| 124 | |
| 125 .expander:first-of-type { | |
| 126 /* Double the margin here so that the space above the first expander | |
| 127 * is the same as the space between multiple expanders */ | |
| 128 margin-top: 20px; | |
| 129 } | |
| 130 | |
| 131 div[collapsed="true"] > .expander { | |
| 132 background-image: url("chrome://browser/skin/images/dropmarker-right.svg"); | |
| 133 /* dropmarker.svg is 7x10. Ensure that its centered in the middle of an 18x18 box */ | |
| 134 background-size: 7px 10px; | |
| 135 background-position: 5.5px 4px; | |
| 136 } | |
| 137 | |
| 138 div[hidden] > .expander, | |
| 139 div[hidden] > .expander + *, | |
| 140 div[collapsed="true"] > .expander + * { | |
| 141 display: none; | |
| 142 } | |
| 143 | |
| 144 .blockedsite h1 { | |
| 145 border-bottom-color: #9b2e2e; | |
| 146 } | |
| 147 | |
| 148 .blockedsite button { | |
| 149 background-color: #9b2e2e; | |
| 150 color: white; | |
| 151 } | |
| 152 | |
| 153 /* Style warning button to look like a small text link in the | |
| 154 bottom. This is preferable to just using a text link | |
| 155 since there is already a mechanism in browser.js for trapping | |
| 156 oncommand events from unprivileged chrome pages (ErrorPageEventHandler).*/ | |
| 157 #ignoreWarningButton { | |
| 158 width: calc(100% + 40px); | |
| 159 -moz-appearance: none; | |
| 160 background: #b14646; | |
| 161 border: none; | |
| 162 text-decoration: underline; | |
| 163 margin: 0; | |
| 164 -moz-margin-start: -20px; | |
| 165 font-size: smaller; | |
| 166 border-radius: 0; | |
| 167 } | |
| 168 | |
| 169 /* On large screen devices (hopefully a 7+ inch tablet, we already center content (see #errorPageContainer above). | |
| 170 Apply tablet specific styles here */ | |
| 171 @media (min-width: 550px) { | |
| 172 button { | |
| 173 min-width: 160px; | |
| 174 width: auto; | |
| 175 } | |
| 176 | |
| 177 button + button { | |
| 178 margin-top: 0; | |
| 179 } | |
| 180 | |
| 181 /* If the tablet is tall as well, add some padding to make content feel a bit more centered */ | |
| 182 @media (min-height: 550px) { | |
| 183 #errorPageContainer { | |
| 184 padding-top: 64px; | |
| 185 min-height: calc(100% - 64px); | |
| 186 } | |
| 187 } | |
| 188 | |
| 189 | |
| 190 } |
