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