From 5b7c6538745083dfd48771392ab22de557a7a344 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 2 Aug 2022 00:37:48 +0300
Subject: initial scratch

---
 .../update_notification/update_notification.scss   | 34 ++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/components/update_notification/update_notification.scss

(limited to 'src/components/update_notification/update_notification.scss')

diff --git a/src/components/update_notification/update_notification.scss b/src/components/update_notification/update_notification.scss
new file mode 100644
index 00000000..5fd9eb9b
--- /dev/null
+++ b/src/components/update_notification/update_notification.scss
@@ -0,0 +1,34 @@
+@import 'src/_variables.scss';
+.UpdateNotificationModal {
+  /* Explanation:
+   * Modal is positioned vertically centered.
+   * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
+   * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
+   * + 10% - we move modal completely off-screen, it's top boundary touches
+   *   bottom of the screen
+   * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
+   */
+  transform: translateY(calc(((100vh - 100%) / 2 + 5%)));
+  max-width: 90vh;
+  width: 30em;
+  position: relative;
+
+  @media all and (max-width: 800px) {
+    /* For mobile, the modal takes 100% of the available screen.
+    This ensures the minimized modal is always 50px above the browser bottom bar regardless of whether or not it is visible.
+   */
+    transform: translateY(calc(100% - 50px));
+  }
+  .panel-body > p {
+    width: calc(100% - 10em)
+  }
+
+  .pleroma-tan {
+    max-width: 20em;
+    max-height: 40em;
+    position: absolute;
+    right: -5em;
+    top: -10em;
+    z-index: 10;
+  }
+}
-- 
cgit v1.2.3-70-g09d2