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