1 files changed, 119 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..9d9147d05d
--- /dev/null
+++ b/toolkit/components/prompts/content/tabprompts.css
@@ -0,0 +1,119 @@
+/* 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;
+}