LCARStrek/browser/error-pages.css

   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 @import url("chrome://global/skin/in-content/info-pages.css");
   6
   7 body {
   8   background-size: 64px 32px;
   9   background-repeat: repeat-x;
  10   /* Top padding for when the window height is small.
  11      Bottom padding to keep everything centered. */
  12   padding: 75px 0;
  13 }
  14
  15 .button-container {
  16   display: flex;
  17   flex-flow: row wrap;
  18 }
  19
  20 .button-spacer {
  21   flex: 1;
  22 }
  23
  24 @media only screen and (max-width: 959px) {
  25   body {
  26     padding: 75px 48px;
  27   }
  28
  29   .title {
  30     background-image: none !important;
  31     padding-inline-start: 0;
  32     margin-inline-start: 0;
  33   }
  34
  35   .title-text {
  36     padding-top: 0;
  37   }
  38 }
  39
  40 @media only screen and (max-width: 640px) {
  41   body {
  42     justify-content: unset;
  43     /* Now that everything is top-aligned, we don't need the
  44      * bottom padding for centering - though it's added back
  45      * when the viewport height is < 480px (see below). */
  46     padding: 75px 20px 0;
  47   }
  48
  49   .title-text {
  50     padding-bottom: 0;
  51     border-bottom: none;
  52   }
  53 }
  54
  55 @media only screen and (max-width: 480px) {
  56   .button-container button {
  57     /* Force buttons to display: block here to try and enforce collapsing margins */
  58     display: block;
  59     width: 100%;
  60     margin: 0.66em 0 0;
  61   }
  62 }
  63
  64 /* For small window height, shift the stripes up by 10px.
  65  * We could just change the background size, but that changes
  66  * the angle of the stripes so just shifting up is easier. */
  67 @media only screen and (max-height: 480px) {
  68   body {
  69     background-position: 10px -10px;
  70     padding-top: 38px;
  71     /* We get rid of bottom padding for width < 640px, but
  72      * for height < 480px a bit of space between the content
  73      * and the viewport edge is nice. */
  74     padding-bottom: 38px;
  75   }
  76 }