1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/mobile/android/themes/core/netError.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,190 @@
1.4 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.5 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.6 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.7 +
1.8 +html,
1.9 +body {
1.10 + margin: 0;
1.11 + padding: 0;
1.12 + height: 100%;
1.13 +}
1.14 +
1.15 +body {
1.16 + /* Add a set of stripes at the top of pages */
1.17 + background-image: linear-gradient(-45deg, #dfe8ee, #dfe8ee 33%,
1.18 + #ecf0f3 33%, #ecf0f3 66%,
1.19 + #dfe8ee 66%, #dfe8ee);
1.20 + background-size: 64px 32px;
1.21 + background-repeat: repeat-x;
1.22 +
1.23 + background-color: #f1f1f1;
1.24 + padding: 0 20px;
1.25 +
1.26 + font-weight: 300;
1.27 + font-size: 13px;
1.28 + -moz-text-size-adjust: none;
1.29 + font-family: sans-serif;
1.30 +}
1.31 +
1.32 +
1.33 +ul {
1.34 + /* Shove the list indicator so that its left aligned, but use outside so that text
1.35 + * doesn't don't wrap the text around it */
1.36 + padding: 1em;
1.37 + margin: 0;
1.38 + list-style: round outside none;
1.39 +}
1.40 +
1.41 +li:not(:last-of-type),
1.42 +#errorLongDesc,
1.43 +#errorLongContent {
1.44 + padding-bottom: 10px;
1.45 +}
1.46 +
1.47 +/* Push the #ignoreWarningButton to the bottom on the blocked site page */
1.48 +.blockedsite > #errorPageContainer > #errorLongContent {
1.49 + flex: 1;
1.50 +}
1.51 +
1.52 +h1 {
1.53 + padding: 1rem 0;
1.54 + font-weight: 300;
1.55 + border-bottom: 1px solid #e0e2e5;
1.56 +}
1.57 +
1.58 +h2 {
1.59 + font-size: small;
1.60 + padding: 0;
1.61 + margin: 0;
1.62 +}
1.63 +
1.64 +p {
1.65 + margin-top: 0;
1.66 +}
1.67 +
1.68 +button {
1.69 + width: 100%;
1.70 + border: none;
1.71 + padding: 1rem;
1.72 + font-family: sans-serif;
1.73 + background-color: #e0e2e5;
1.74 + font-size: 1rem; /* Not sure why this has to be specified. See bug 892843. */
1.75 + font-weight: 300;
1.76 + border-radius: 2px;
1.77 + background-image: none;
1.78 +}
1.79 +
1.80 +button + button {
1.81 + margin-top: 1em;
1.82 +}
1.83 +
1.84 +.certerror {
1.85 + background-image: linear-gradient(-45deg, #f0d000, #f0d000 33%,
1.86 + #fedc00 33%, #fedc00 66%,
1.87 + #f0d000 66%, #f0d000);
1.88 +}
1.89 +
1.90 +.blockedsite {
1.91 + background-image: linear-gradient(-45deg, #9b2e2e, #9b2e2e 33%,
1.92 + #a83232 33%, #a83232 66%,
1.93 + #9b2e2e 66%, #9b2e2e);
1.94 + background-color: #b14646;
1.95 + color: white;
1.96 +}
1.97 +
1.98 +#errorPageContainer {
1.99 + /* If the page is greater than 550px center the content.
1.100 + * This number should be kept in sync with the media query for tablets below */
1.101 + max-width: 550px;
1.102 + margin-left: auto;
1.103 + margin-right: auto;
1.104 + padding-top: 1rem;
1.105 +
1.106 + min-height: calc(100% - 1rem);
1.107 + display: flex;
1.108 + flex-direction: column;
1.109 +}
1.110 +
1.111 +/* Expanders have a structure of
1.112 + * <div collapsed="true/false">
1.113 + * <h2 class="expander">Title</h2>
1.114 + * <p>Content</p>
1.115 + * </div>
1.116 + *
1.117 + * This shows an arrow to the right of the h2 element, and hides the content when collapsed="true". */
1.118 +.expander {
1.119 + margin: 1rem 0;
1.120 + background-image: url("chrome://browser/skin/images/dropmarker.svg");
1.121 + background-repeat: no-repeat;
1.122 + /* dropmarker.svg is 10x7. Ensure that its centered in the middle of an 18x18 box */
1.123 + background-position: 3px 5.5px;
1.124 + background-size: 10px 7px;
1.125 + padding-left: 18px;
1.126 +}
1.127 +
1.128 +.expander:first-of-type {
1.129 + /* Double the margin here so that the space above the first expander
1.130 + * is the same as the space between multiple expanders */
1.131 + margin-top: 20px;
1.132 +}
1.133 +
1.134 +div[collapsed="true"] > .expander {
1.135 + background-image: url("chrome://browser/skin/images/dropmarker-right.svg");
1.136 + /* dropmarker.svg is 7x10. Ensure that its centered in the middle of an 18x18 box */
1.137 + background-size: 7px 10px;
1.138 + background-position: 5.5px 4px;
1.139 +}
1.140 +
1.141 +div[hidden] > .expander,
1.142 +div[hidden] > .expander + *,
1.143 +div[collapsed="true"] > .expander + * {
1.144 + display: none;
1.145 +}
1.146 +
1.147 +.blockedsite h1 {
1.148 + border-bottom-color: #9b2e2e;
1.149 +}
1.150 +
1.151 +.blockedsite button {
1.152 + background-color: #9b2e2e;
1.153 + color: white;
1.154 +}
1.155 +
1.156 +/* Style warning button to look like a small text link in the
1.157 + bottom. This is preferable to just using a text link
1.158 + since there is already a mechanism in browser.js for trapping
1.159 + oncommand events from unprivileged chrome pages (ErrorPageEventHandler).*/
1.160 +#ignoreWarningButton {
1.161 + width: calc(100% + 40px);
1.162 + -moz-appearance: none;
1.163 + background: #b14646;
1.164 + border: none;
1.165 + text-decoration: underline;
1.166 + margin: 0;
1.167 + -moz-margin-start: -20px;
1.168 + font-size: smaller;
1.169 + border-radius: 0;
1.170 +}
1.171 +
1.172 +/* On large screen devices (hopefully a 7+ inch tablet, we already center content (see #errorPageContainer above).
1.173 + Apply tablet specific styles here */
1.174 +@media (min-width: 550px) {
1.175 + button {
1.176 + min-width: 160px;
1.177 + width: auto;
1.178 + }
1.179 +
1.180 + button + button {
1.181 + margin-top: 0;
1.182 + }
1.183 +
1.184 + /* If the tablet is tall as well, add some padding to make content feel a bit more centered */
1.185 + @media (min-height: 550px) {
1.186 + #errorPageContainer {
1.187 + padding-top: 64px;
1.188 + min-height: calc(100% - 64px);
1.189 + }
1.190 + }
1.191 +
1.192 +
1.193 +}
