1 files changed, 103 insertions, 0 deletions
diff --git a/browser/components/newtab/content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss b/browser/components/newtab/content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss
new file mode 100644
index 0000000000..a1006c9437
--- /dev/null
+++ b/browser/components/newtab/content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss
@@ -0,0 +1,103 @@
+// Variable for the about:welcome modal scrollbars
+$modal-scrollbar-z-index: 1100;
+
+.activity-stream {
+  &.modal-open {
+    overflow: hidden;
+  }
+}
+
+.modalOverlayOuter {
+  background: var(--newtab-overlay-color);
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  display: none;
+  z-index: $modal-scrollbar-z-index;
+  overflow: auto;
+
+  &.active {
+    display: flex;
+  }
+}
+
+.modalOverlayInner {
+  min-width: min-content;
+  width: 100%;
+  max-width: 960px;
+  position: relative;
+  margin: auto;
+  background: var(--newtab-background-color-secondary);
+  box-shadow: $shadow-large;
+  border-radius: 4px;
+  display: none;
+  z-index: $modal-scrollbar-z-index;
+
+  // modal takes over entire screen
+  @media(max-width: 960px) {
+    height: 100%;
+    top: 0;
+    left: 0;
+    box-shadow: none;
+    border-radius: 0;
+  }
+
+  &.active {
+    display: block;
+  }
+
+  h2 {
+    color: var(--newtab-text-primary-color);
+    text-align: center;
+    font-weight: 200;
+    margin-top: 30px;
+    font-size: 28px;
+    line-height: 37px;
+    letter-spacing: -0.13px;
+
+    @media(max-width: 960px) {
+      margin-top: 100px;
+    }
+
+    @media(max-width: 850px) {
+      margin-top: 30px;
+    }
+  }
+
+  .footer {
+    border-top: $border-secondary;
+    border-radius: 4px;
+    height: 70px;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    text-align: center;
+    background-color: $white;
+
+    // if modal is short enough, footer becomes sticky
+    @media(max-width: 850px) and (max-height: 730px) {
+      position: sticky;
+    }
+
+    // if modal is narrow enough, footer becomes sticky
+    @media(max-width: 650px) and (max-height: 600px) {
+      position: sticky;
+    }
+
+    .modalButton {
+      margin-top: 20px;
+      min-width: 150px;
+      height: 30px;
+      padding: 4px 30px 6px;
+      font-size: 15px;
+
+      &:focus,
+      &.active,
+      &:hover {
+        @include fade-in-card;
+      }
+    }
+  }
+}