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