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