toolkit/components/printing/content/print.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 :root {
   6   font: menu;
   7 }
   8
   9 :root,
  10 body {
  11   height: 100vh;
  12 }
  13
  14 body {
  15   display: flex;
  16   flex-direction: column;
  17   justify-content: flex-start;
  18   overflow: hidden;
  19 }
  20
  21 *[hidden] {
  22   display: none !important;
  23 }
  24
  25 .section-block {
  26   margin: var(--space-large);
  27
  28   .block-label {
  29     display: block;
  30     margin-bottom: var(--space-small);
  31   }
  32 }
  33
  34 .row {
  35   display: flex;
  36   flex-direction: column;
  37   width: 100%;
  38   min-height: 1.8em;
  39   margin-block: var(--space-xxsmall);
  40
  41   &.cols-2 {
  42     flex-direction: row;
  43     align-items: center;
  44
  45     #scale &,
  46     #more-settings-options > & {
  47       /* The margin-block of the checkboxes/radiobuttons
  48          already provide the needed vertical spacing. */
  49       margin-block: 0;
  50     }
  51   }
  52 }
  53
  54 hr {
  55   margin: 0 var(--space-small);
  56 }
  57
  58 .header-container {
  59   display: flex;
  60   flex-direction: row;
  61   justify-content: space-between;
  62   align-items: center;
  63   flex: 0 1 auto;
  64   padding: var(--space-small) var(--space-large);
  65
  66   > h2 {
  67     margin: 0;
  68     line-height: 1;
  69   }
  70 }
  71
  72 #sheet-count {
  73   font: message-box;
  74   padding-block: var(--space-xsmall);
  75   margin: 0;
  76
  77   &[loading],
  78   body[invalid] & {
  79     visibility: hidden;
  80   }
  81 }
  82
  83 #print {
  84   display: flex;
  85   flex: 1 1 auto;
  86   flex-direction: column;
  87   justify-content: flex-start;
  88   overflow: hidden;
  89
  90   body[loading] & {
  91     visibility: hidden;
  92   }
  93 }
  94
  95 .body-container {
  96   flex: 1 1 auto;
  97   overflow: auto;
  98 }
  99
 100 select {
 101   margin: 0;
 102   width: 100%;
 103
 104   &:not([size], [multiple])[iconic] {
 105     padding-inline-start: calc(8px + 16px + 4px); /* spacing before image + image width + spacing after image */
 106     background-size: auto 12px, 16px;
 107     background-position: right 19px center, left 8px center;
 108
 109     &:dir(rtl) {
 110       background-position-x: left 19px, right 8px;
 111     }
 112   }
 113 }
 114
 115 #printer-picker {
 116   background-image: url("chrome://global/skin/icons/arrow-down-12.svg"), url("chrome://global/skin/icons/print.svg");
 117
 118   &[output="pdf"] {
 119     background-image: url("chrome://global/skin/icons/arrow-down-12.svg"), url("chrome://global/skin/icons/page-portrait.svg");
 120   }
 121 }
 122
 123 input:is([type="number"], [type="text"]) {
 124   padding: var(--space-xxsmall);
 125   padding-inline-start: var(--space-small);
 126 }
 127
 128 input[type="number"] {
 129   box-sizing: content-box;
 130   min-height: unset;
 131   padding: 0;
 132   padding-inline-start: var(--space-small);
 133   margin: 0;
 134   height: 1.5em;
 135   width: 4em;
 136 }
 137
 138 input:is([type="checkbox"], [type="radio"]):disabled + label,
 139 input[type="radio"]:disabled + span > label {
 140   opacity: 0.5;
 141 }
 142
 143 #custom-range {
 144   margin: 0;
 145   margin-top: var(--space-xsmall);
 146   width: 100%;
 147 }
 148
 149 #percent-scale {
 150   margin-inline-start: var(--space-xsmall);
 151
 152   &:disabled {
 153     /* Let clicks on the disabled input select the radio button */
 154     pointer-events: none;
 155   }
 156 }
 157
 158 .toggle-group-label {
 159   padding: var(--space-xsmall) var(--space-small);
 160
 161   #landscape + &::before {
 162     content: url("chrome://global/skin/icons/page-landscape.svg");
 163   }
 164
 165   #portrait + &::before {
 166     content: url("chrome://global/skin/icons/page-portrait.svg");
 167   }
 168 }
 169
 170 #more-settings {
 171   > summary {
 172     list-style: none;
 173     display: flex;
 174     cursor: pointer;
 175     align-items: center;
 176
 177     > .twisty {
 178       background-image: url("chrome://global/skin/icons/arrow-down-12.svg");
 179       background-repeat: no-repeat;
 180       background-position: center;
 181       -moz-context-properties: fill;
 182       fill: currentColor;
 183       width: 12px;
 184       height: 12px;
 185     }
 186
 187     > .label {
 188       flex-grow: 1;
 189     }
 190   }
 191
 192   &[open] > summary > .twisty {
 193     background-image: url("chrome://global/skin/icons/arrow-up-12.svg");
 194   }
 195 }
 196
 197 .vertical-margins,
 198 .horizontal-margins {
 199   display: flex;
 200   gap: var(--space-large);
 201   margin-block: var(--space-xsmall);
 202
 203   > .margin-pair {
 204     width: calc(50% - (2 * var(--space-xsmall))); /* Half minus the gap */
 205
 206     > .margin-descriptor {
 207       display: block;
 208       text-align: center;
 209       margin-top: var(--space-xxsmall);
 210     }
 211
 212     > .margin-input {
 213       width: 100%;
 214       box-sizing: border-box;
 215     }
 216   }
 217 }
 218
 219 .horizontal-margins:dir(rtl) {
 220   /* Swap between the left and right margin inputs to match their position
 221    * in the form to their physical location they represent. */
 222   flex-direction: row-reverse;
 223 }
 224
 225 #open-dialog-link {
 226   display: flex;
 227   justify-content: space-between;
 228   align-items: center;
 229   gap: var(--space-xsmall);
 230
 231   &::after {
 232     display: block;
 233     flex-shrink: 0;
 234     content: "";
 235     background: url(chrome://global/skin/icons/open-in-new.svg) no-repeat center;
 236     background-size: 12px;
 237     -moz-context-properties: fill;
 238     fill: currentColor;
 239     width: 12px;
 240     height: 12px;
 241   }
 242
 243   &:dir(rtl)::after {
 244     transform: scaleX(-1);
 245   }
 246 }
 247
 248 .footer-container {
 249   flex: 0 1 auto;
 250 }
 251
 252 #print-progress {
 253   background-image: url("chrome://global/skin/icons/loading.svg");
 254   background-repeat: no-repeat;
 255   background-size: var(--size-item-small);
 256   background-position: left center;
 257   -moz-context-properties: fill;
 258   fill: var(--color-accent-primary);
 259   padding-inline-start: calc(var(--size-item-small) + var(--space-xsmall));
 260
 261   &:dir(rtl) {
 262     background-position-x: right;
 263   }
 264 }
 265
 266 .error-message {
 267   color: var(--text-color-error);
 268   margin-top: var(--space-xsmall);
 269 }