1 files changed, 349 insertions, 0 deletions
diff --git a/toolkit/components/printing/content/print.css b/toolkit/components/printing/content/print.css
new file mode 100644
index 0000000000..0c2b0f10e3
--- /dev/null
+++ b/toolkit/components/printing/content/print.css
@@ -0,0 +1,349 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+html, body {
+  width: 250px;
+  height: 100vh;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  overflow: hidden;
+  background: var(--in-content-box-background);
+}
+
+body[loading] #print {
+  visibility: hidden;
+}
+
+*[hidden] {
+  display: none !important;
+}
+
+.section-block {
+  margin: 16px;
+}
+
+.section-block .block-label {
+  display: block;
+  margin-bottom: 8px;
+}
+
+.row {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 1.8em;
+  margin-block: 2px;
+}
+
+.row > input,
+.row > select,
+.col > input {
+  margin-inline: 0 0;
+  max-width: 100%;
+  display: inline-block;
+}
+
+.row.cols-2 {
+  flex-direction: row;
+  align-items: center;
+}
+
+.cols-2 > .col:nth-child(1) {
+  flex: 0 0 2em;
+  text-align: center;
+}
+
+.header-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex: 0 1 auto;
+  border-bottom: 1px solid var(--in-content-border-color);
+  padding: 8px 18px;
+}
+.header-container > h2 {
+  margin: 0;
+  font-size: 17px;
+  line-height: 1;
+}
+
+#sheet-count {
+  font-size: 11px;
+  padding: 3px 8px;
+  margin: 0;
+}
+
+#sheet-count[loading],
+body[invalid] #sheet-count {
+  visibility: hidden;
+}
+
+form#print {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  justify-content: flex-start;
+  overflow: hidden;
+  font: menu;
+}
+
+select {
+  min-height: auto;
+  margin: 0;
+  padding: 0;
+}
+
+select:not([size], [multiple])[iconic] {
+  padding-inline-start: 28px;
+}
+
+#printer-picker {
+  background-size: auto 12px, 16px;
+  background-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg"), url("chrome://global/skin/icons/print.svg");
+  background-position: right 3px center, left 8px center;
+  width: 100%;
+}
+
+#printer-picker:dir(rtl) {
+  background-position-x: left 3px, right 8px;
+}
+
+#printer-picker[output="pdf"] {
+  background-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg"), url("chrome://global/content/portrait.svg");
+}
+
+input[type="checkbox"] {
+  margin-inline-end: 8px;
+}
+
+input[type="radio"] {
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border: 1px solid var(--in-content-box-border-color);
+  border-radius: 50%;
+  margin: 0;
+  margin-inline-end: 8px;
+  background-color: var(--in-content-box-background);
+}
+
+input[type="radio"]:checked {
+  appearance: none;
+  background-image: url("chrome://global/skin/in-content/radio.svg");
+  -moz-context-properties: fill;
+  fill: #3485ff;
+}
+
+input[type="radio"]:enabled:-moz-focusring,
+input[type="radio"]:enabled:hover {
+  border-color: var(--in-content-border-focus);
+}
+
+input[type="radio"]:enabled:-moz-focusring {
+  outline: 2px solid var(--in-content-border-active);
+  /* offset outline to align with 1px border-width set for buttons/menulists above. */
+  outline-offset: -1px;
+  /* Make outline-radius slightly bigger than the border-radius set above,
+   * to make the thicker outline corners look smooth */
+  -moz-outline-radius: 50%;
+  box-shadow: 0 0 0 4px var(--in-content-border-active-shadow);
+}
+
+input[type="radio"]:disabled {
+  opacity: 0.5;
+}
+
+input[type="number"],
+input[type="text"] {
+  padding: 2px;
+  padding-inline-start: 4px;
+  outline: none !important;
+}
+
+.cols-2 > input {
+  flex: none;
+}
+
+.toggle-group-label {
+  padding: 4px 8px;
+}
+
+.body-container {
+  flex: 1 1 auto;
+  overflow: auto;
+}
+
+#more-settings {
+  border-top: 1px solid var(--in-content-border-color);
+}
+
+.twisty > summary {
+  list-style: none;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+}
+
+#more-settings > summary > .twisty {
+  background-image: url("chrome://global/skin/icons/twisty-expanded.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  width: 12px;
+  height: 12px;
+  scale: 1 1;
+}
+
+#more-settings > summary > .label {
+  flex-grow: 1;
+}
+
+#more-settings[open] > summary > .twisty {
+  /* flip arrow to point up for the open state */
+  scale: 1 -1;
+}
+
+#open-dialog-link {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#open-dialog-link::after {
+  display: block;
+  content: url(chrome://global/skin/icons/open-in-new.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+  width: 12px;
+  height: 12px;
+}
+
+#open-dialog-link:dir(rtl)::after {
+  scale: -1 1;
+}
+
+.footer-container {
+  border-top: 1px solid var(--in-content-border-color);
+  flex: 0 1 auto;
+}
+
+#print-progress {
+  background-image: url("chrome://global/skin/icons/loading.png");
+  background-repeat: no-repeat;
+  background-size: 16px;
+  background-position: left center;
+  padding-inline-start: 20px;
+}
+
+@media (min-resolution: 1.1dppx) {
+  #print-progress {
+    background-image: url("chrome://global/skin/icons/loading@2x.png");
+  }
+}
+
+#print-progress:dir(rtl) {
+  background-position-x: right;
+}
+
+#button-container {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+
+#button-container > button {
+  flex: 1 1 auto;
+  margin: 0;
+}
+
+#custom-range {
+  margin-top: 4px;
+}
+
+.vertical-margins,
+.horizontal-margins {
+  display: flex;
+  gap: 20px;
+  margin-block: 5px;
+}
+
+.margin-input {
+  width: 6em !important;
+}
+
+.margin-descriptor {
+  text-align: center;
+  display: block;
+  margin-top: 2px;
+}
+
+.toggle-group #landscape + .toggle-group-label::before {
+  content: url("chrome://global/content/landscape.svg");
+}
+.toggle-group #portrait + .toggle-group-label::before {
+  content: url("chrome://global/content/portrait.svg");
+}
+
+select:invalid,
+input[type="text"]:invalid,
+input[type="number"]:invalid {
+  border: 1px solid #D70022;
+  box-shadow: 0 0 0 1px #D70022, 0 0 0 4px rgba(215, 0, 34, 0.3);
+}
+
+.error-message {
+  font-size: 12px;
+  color: #D70022;
+  margin-top: 4px;
+}
+
+#percent-scale {
+  margin-inline-start: 4px;
+}
+
+input[type="number"].photon-number {
+  padding: 0;
+  padding-inline-start: 4px;
+  margin: 0;
+  height: 20px;
+  width: 4em;
+}
+
+input[type="number"].photon-number::-moz-number-spin-box {
+  height: 100%;
+  max-height: 100%;
+  border-inline-start: 1px solid var(--in-content-box-border-color);
+  width: 1em;
+}
+
+input[type="number"].photon-number:hover::-moz-number-spin-box {
+  border-color: var(--in-content-border-hover);
+}
+
+input[type="number"].photon-number::-moz-number-spin-up,
+input[type="number"].photon-number::-moz-number-spin-down {
+  border: 0;
+  border-radius: 0;
+  background-color: var(--in-content-button-background);
+  background-image: url("chrome://global/skin/icons/arrow-dropdown-16.svg");
+  background-size: 8px;
+  background-position: center;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+input[type="number"].photon-number::-moz-number-spin-up {
+  scale: 1 -1;
+}
+
+input[type="number"].photon-number::-moz-number-spin-up:hover,
+input[type="number"].photon-number::-moz-number-spin-down:hover {
+  background-color: var(--in-content-button-background-hover);
+}