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