1 files changed, 158 insertions, 0 deletions
diff --git a/toolkit/components/prompts/content/tabprompts.css b/toolkit/components/prompts/content/tabprompts.css
new file mode 100644
index 0000000000..bef56f7a87
--- /dev/null
+++ b/toolkit/components/prompts/content/tabprompts.css
@@ -0,0 +1,158 @@
+/* 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/. */
+
+/* Tab Modal Prompt boxes */
+
+.tabModalBackground {
+  -moz-box-pack: center;
+  -moz-box-orient: vertical;
+}
+
+.tabModalBackground,
+tabmodalprompt {
+  width: 100%;
+  height: 100%;
+}
+
+tabmodalprompt {
+  --tabmodalprompt-padding: 20px;
+  overflow: hidden;
+  text-shadow: none; /* remove lightweight theme text-shadow */
+}
+
+tabmodalprompt:not([hidden]) {
+  display: grid;
+  grid-template-rows: 1fr [dialog-start] auto [dialog-end] 2fr;
+  justify-items: center;
+}
+
+/*
+  Adjustments for chrome level tab-prompts to make them
+  overlap with the upper chrome UI and move them in
+  front of content prompts.
+*/
+tabmodalprompt.tab-prompt {
+  overflow: visible;
+  z-index: 1;
+  grid-template-rows: [dialog-start] auto [dialog-end] 1fr;
+}
+
+tabmodalprompt.tab-prompt .tabmodalprompt-mainContainer {
+  margin-top: -5px;
+}
+
+.tabmodalprompt-mainContainer {
+  min-width: 20em;
+  min-height: 12em;
+  max-width: calc(60% + calc(var(--tabmodalprompt-padding) * 2));
+  -moz-user-focus: normal;
+  grid-row: dialog;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.tabmodalprompt-topContainer {
+  flex-grow: 1;
+  padding: var(--tabmodalprompt-padding);
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: baseline;
+  align-content: center; /* center content vertically */
+  max-width: 100%;
+  min-height: 0;
+  max-height: 60vh;
+  box-sizing: border-box;
+}
+
+.tabmodalprompt-topContainer > div:not(.tabmodalprompt-infoContainer, [hidden]) {
+  display: contents;
+}
+
+.tabmodalprompt-infoContainer {
+  grid-column: span 2;
+
+  display: block;
+  margin-block: auto;
+  max-width: 100%;
+  height: 100%;
+  min-height: 0;
+  justify-self: center; /* center text, but only when it fits in one line */
+}
+
+/* When all elements in the first column are hidden, prevent the second column
+   from becoming the first one because it won't have the right fraction */
+.tabmodalprompt-topContainer > div > *:nth-child(2) {
+  grid-column: 2;
+}
+
+.infoTitle {
+  margin-bottom: 1em !important;
+  font-weight: bold;
+}
+
+.infoBody {
+  margin: 0 !important;
+  -moz-user-focus: normal;
+  user-select: text;
+  cursor: text !important;
+  white-space: pre-wrap;
+  unicode-bidi: plaintext;
+  outline: none; /* remove focus outline */
+  overflow: auto;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+tabmodalprompt label[value=""] {
+  display: none;
+}
+
+.tabmodalprompt-buttonContainer {
+  display: flex;
+  padding: 12px var(--tabmodalprompt-padding) 15px;
+}
+
+.tabmodalprompt-buttonSpacer {
+  flex-grow: 1;
+}
+
+/* Tab-Modal Payment Request widget */
+.paymentDialogContainer:not([hidden]) {
+  /* Center the .paymentDialogContainerFrame horizontally with flexbox. */
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  /* TODO: figure out which element is preventing this from showing */
+  z-index: 1;
+  width: 100%;
+}
+
+.paymentDialogContainer > div {
+  align-self: center;
+  box-sizing: border-box;
+  height: 600px;
+  /* By setting `inset-inline` to `auto` with `position: absolute`, the
+   * horizontal position from the `align-self: center` is used.
+   * See https://developer.mozilla.org/en-US/docs/Web/CSS/right#Values. */
+  inset-inline: auto;
+  /* Shrink the height for small browser window sizes so the dialog footer
+     remains visible.
+     Ideally this would be 100vh minus the #navigator-toolbox height. */
+  max-height: 75vh;
+  /* Leave a 16px border on each side when the normal dialog width can't fit in
+   * the browser window. This ensure that the dialog still looks like a dialog
+   * (with content showing beside) instead of a full-width overlay. */
+  max-width: calc(100vw - 16px - 16px);
+  position: absolute;
+  /* Vertically overlap the browser chrome. */
+  top: -3px;
+  width: 600px;
+}
+
+.paymentDialogContainerFrame {
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+}