// Variables $popup-body-min-height: 120px; // Minimum height for the loading indicator $popup-background-color: $color-layer-1; .dbq-popup-backdrop { display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: $padding-default 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1038; // This is 1 below the DbqModalDialog z-index, which is used to display errors and other miscellanious info. //background: rgba(6, 22, 42, 0.3); background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); @include scrollbar; .modal-backdrop { opacity: initial !important; background: rgba(6, 22, 42, 0.3); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .dbq-popup { width: 1100px; max-width: calc(100% - 10px); &.dbq-popup-size-small { width: 520px; } &.dbq-popup-fullscreen { min-width: calc(100% - 30px); } .dbq-popup-header { color: $modal-header-color; //background-color: $modal-header-background; background-color: $popup-background-color; border: 0; border-bottom: 1px solid $modal-header-border-color; font-size: $font-size-medium; font-weight: $font-weight-bold; padding: 20px 30px; margin-bottom: 0; border-radius: $border-radius-default $border-radius-default 0 0; .dbq-popup-header-button { float: right; background: 0 none; border: 0 none; outline: 0 none; svg { fill: $modal-header-color; } &:focus, &:hover { float: right; background: 0 none; border: 0 none; outline: 0 none; } &:hover { svg { fill: $color-primary; } } &.dbq-popup-close-button { svg { width: 28px; height: 28px; } } } } .dbq-popup-body { position: relative; // The loading indicator has absolute positioning min-height: $popup-body-min-height; //background-color: $modal-body-background; background-color: $popup-background-color; color: $text-color-default; border-radius: 0 0 $border-radius-default $border-radius-default; > .dbq-loading-spinner-container { background: transparent; } .modal-footer { border-color: $modal-header-border-color; } } } } // Add extra padding when the popup is displayed directly under the tag body { > .dbq-popup-backdrop { padding: 30px 0; .dbq-popup { max-width: calc(100% - 30px); } } }