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