pleroma-fe/src/components/update_notification/update_notification.scss

35 lines
1.1 KiB
SCSS

@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;
}
}