src/components/update_notification/update_notification.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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;
  }
}