EarlyBlue/global/in-content/info-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/common.css");
   6 /* Body and container */
   7 body {
   8   display: flex;
   9   flex-direction: column;
  10   box-sizing: border-box;
  11   min-height: 100vh;
  12   padding-top: 0;
  13   padding-bottom: 0;
  14   padding-inline-start: calc(48px + 4.6em);
  15   padding-inline-end: 48px;
  16   align-items: center;
  17   justify-content: center;
  18 }
  19
  20 .container {
  21   min-width: 13em;
  22   max-width: 52em;
  23 }
  24
  25 .container.restore-chosen {
  26   display: flex;
  27   flex-direction: column;
  28   flex-grow: 1;
  29   margin: 10vh 0;
  30 }
  31
  32 /* Typography */
  33 .title {
  34   background-image: url("chrome://global/skin/icons/info.svg");
  35   background-position: left 0;
  36   background-repeat: no-repeat;
  37   background-size: 1.6em;
  38   margin-inline-start: -2.3em;
  39   padding-inline-start: 2.3em;
  40   font-size: 2.5em;
  41 }
  42
  43 .title:moz-locale-dir(rtl),
  44 .title:dir(rtl) {
  45   background-position: right 0;
  46 }
  47
  48 .title-text {
  49   border-bottom: 1px solid #666699;
  50   font-size: inherit;
  51   padding-bottom: 0.4em;
  52 }
  53
  54 @media (max-width: 675px) {
  55   body {
  56     padding: 0 48px;
  57   }
  58
  59   .title {
  60     background-image: none !important;
  61     padding-inline-start: 0;
  62     margin-inline-start: 0;
  63   }
  64
  65   .title-text {
  66     padding-top: 0;
  67   }
  68 }
  69
  70 ul, ol {
  71   margin: 0;
  72   padding: 0;
  73   margin-inline-start: 1em;
  74 }
  75
  76 ul > li, ol > li {
  77   margin-bottom: .5em;
  78 }
  79
  80 ul {
  81   list-style: disc;
  82 }
  83
  84 /* Buttons */
  85 .button-container {
  86   margin-top: 1.2em;
  87 }
  88
  89 .button-container > button {
  90   min-width: 150px;
  91 }
  92
  93 .button-container > button:first-child {
  94   margin-inline-start: 0;
  95 }
  96
  97 /* Trees */
  98 .tree-container {
  99   margin-top: 1.2em;
 100   flex-grow: 1;
 101   min-height: 12em;
 102 }
 103
 104 .tree-container > tree {
 105   height: 100%;
 106 }
 107
 108 tree {
 109   width: 100%;
 110 }