/** * Dialog Theme * Based on top theme */ /** * Animations */ /* drop in */ @-webkit-keyframes vex-dropin { 0% { transform: translateY(0); opacity: 0; } 1% { transform: translateY(-800px); opacity: 0; } 2% { transform: translateY(-800px); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } } /* drop out */ @-webkit-keyframes vex-dropout { 0% { transform: translateY(0); } 100% { transform: translateY(-800px); } } /** * Content */ .vex.dialog-theme.vex-closing .vex-content { -webkit-animation: vex-dropout 0.5s; backface-visibility: hidden; } .vex.dialog-theme .vex-content { -webkit-animation: vex-dropin 0.5s; backface-visibility: hidden; } .vex.dialog-theme .vex-content { position: relative; padding: 1em 1em 0 1em; background: white; margin: 0 auto; max-width: 100%; width: 450px; max-height: 80%; overflow: auto; font-family: "Helvetica Neue", sans-serif; color: #282828; font-size: 1.1em; line-height: 1.5em; } .vex.dialog-theme .vex-content .main-title { border-bottom: 1px solid currentColor; margin-top: 0; margin-bottom: 0.5em; } /* closing button */ .vex.dialog-theme .vex-close { position: absolute; top: 0; right: 0; cursor: pointer; } .vex.dialog-theme .vex-close:before { content: "\00D7"; position: absolute; top: 3px; right: 3px; background: transparent; text-align: center; height: 30px; width: 30px; color: #bbbbbb; font-size: 26px; font-weight: normal; line-height: 31px; } .vex.dialog-theme .vex-close:hover:before, .vex.dialog-theme .vex-close:active:before { color: #282828; background: #e0e0e0; } /* inputs, forms, buttons */ .vex.dialog-theme .vex-dialog-form .vex-dialog-message { margin-bottom: 0.5em; } .vex.dialog-theme .vex-dialog-form .vex-dialog-input { margin-bottom: 1em; } .vex.dialog-theme .vex-dialog-form .vex-dialog-buttons:after { content: ""; display: table; clear: both; } .vex.dialog-theme .bt { float: right; margin: 0 0 0 0.5em; } .vex.dialog-theme .bt:last-child { margin-left: 0; } .vex-loading-spinner.dialog-theme { box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3); border-radius: 100%; background: #f0f0f0; border: 0.2em solid transparent; border-top-color: #bbbbbb; top: -1.1em; bottom: auto; }