The Tor Browser: mobile/android/themes/core/netError.css@fc2d59ddac77

     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/. */

     5 html,

     6 body {

     7   margin: 0;

     8   padding: 0;

     9   height: 100%;

    10 }

    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;

    20   background-color: #f1f1f1;

    21   padding: 0 20px;

    23   font-weight: 300;

    24   font-size: 13px;

    25   -moz-text-size-adjust: none;

    26   font-family: sans-serif;

    27 }

    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 }

    38 li:not(:last-of-type),

    39 #errorLongDesc,

    40 #errorLongContent {

    41   padding-bottom: 10px;

    42 }

    44 /* Push the #ignoreWarningButton to the bottom on the blocked site page */

    45 .blockedsite > #errorPageContainer > #errorLongContent {

    46   flex: 1;

    47 }

    49 h1 {

    50   padding: 1rem 0;

    51   font-weight: 300;

    52   border-bottom: 1px solid #e0e2e5;

    53 }

    55 h2 {

    56   font-size: small;

    57   padding: 0;

    58   margin: 0;

    59 }

    61 p {

    62   margin-top: 0;

    63 }

    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 }

    77 button + button {

    78   margin-top: 1em;

    79 }

    81 .certerror {

    82   background-image: linear-gradient(-45deg, #f0d000,     #f0d000 33%,

    83                                             #fedc00 33%, #fedc00 66%,

    84                                             #f0d000 66%, #f0d000);

    85 }

    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 }

    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;

   103   min-height: calc(100% - 1rem);

   104   display: flex;

   105   flex-direction: column;

   106 }

   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 }

   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 }

   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 }

   138 div[hidden] > .expander,

   139 div[hidden] > .expander + *,

   140 div[collapsed="true"] > .expander + * {

   141   display: none;

   142 }

   144 .blockedsite h1 {

   145   border-bottom-color: #9b2e2e;

   146 }

   148 .blockedsite button {

   149   background-color: #9b2e2e;

   150   color: white;

   151 }

   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 }

   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   }

   177   button + button {

   178     margin-top: 0;

   179   }

   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   }

   190 }

The Tor Browser / file revision