// base styles for every modal popup used in Discourse // prevents bg scrolling when modal is open html:has(.d-modal) { overflow: hidden; } html.keyboard-visible.mobile-view { .d-modal { max-height: calc(var(--composer-vh, var(--1dvh)) * 100); height: calc(var(--composer-vh, var(--1dvh)) * 100); bottom: 0; } .d-modal__container { max-height: calc(var(--composer-vh, var(--1dvh)) * 100); height: calc(var(--composer-vh, var(--1dvh)) * 100); } } html:not(.keyboard-visible.mobile-view) { .d-modal__container { padding-bottom: env(safe-area-inset-bottom); } } .d-modal { align-items: flex-end; &__container { // this is a hack to prevent issues on safari with transforms position: fixed; width: 100%; max-width: 100%; max-height: calc(var(--composer-vh, var(--1dvh)) * 85); } &__header { padding: 0.5rem; } .ios-device & { &__footer { margin-top: auto; } } &__title-text { font-size: var(--font-up-1-rem); } // fixes modal placement on Android when keyboard is visible html.keyboard-visible:not(.ios-device) & { height: calc(100% - env(keyboard-inset-height)); .d-modal__container { max-height: 100%; min-height: 100%; height: 100%; } } } //legacy .modal-open #main { overflow: hidden; } .modal-middle-container { max-width: 100%; margin-bottom: 30px; // For iOS Safari issues } .modal { &.fade { transition: opacity 0.3s linear, top 0.3s ease-out; top: -25%; } &.fade.in { top: 50%; } .modal-body { padding: 0.667em; overflow-y: scroll; > * { // adding box-sizing: border-box; to .modal-body causes iOS dropdown issues box-sizing: border-box; } } } .close { font-size: var(--font-up-4); } @media only screen and (max-device-width: 568px) { .flag-modal-body .flag-message { height: 3em; } } /* fix for tall modals */ .fixed-modal { .modal-middle-container { margin-bottom: 0; } .modal-inner-container { max-height: 90vh; overflow: auto; } &.insert-hyperlink-modal .modal-inner-container { overflow: visible; } html.keyboard-visible:not(.ios-device) & { height: calc(100% - env(keyboard-inset-height)); .modal-inner-container { margin: auto; } } }