.mint-msgbox { position: fixed; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); background-color: #fff; width: 85%; border-radius: 3px; font-size: 16px; -webkit-user-select: none; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: .2s; transition: .2s; } .mint-msgbox-header { padding: 15px 0 0; } .mint-msgbox-content { padding: 10px 20px 15px; border-bottom: 1px solid #ddd; min-height: 36px; position: relative; } .mint-msgbox-input { padding-top: 15px; } .mint-msgbox-input input { border: 1px solid #dedede; border-radius: 5px; padding: 4px 5px; width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; } .mint-msgbox-input input.invalid { border-color: #ff4949; } .mint-msgbox-input input.invalid:focus { border-color: #ff4949; } .mint-msgbox-errormsg { color: red; font-size: 12px; min-height: 18px; margin-top: 2px; } .mint-msgbox-title { text-align: center; padding-left: 0; margin-bottom: 0; font-size: 16px; font-weight: 700; color: #333; } .mint-msgbox-message { color: #999; margin: 0; text-align: center; line-height: 36px; } .mint-msgbox-btns { display: -webkit-box; display: -ms-flexbox; display: flex; height: 40px; line-height: 40px; } .mint-msgbox-btn { line-height: 35px; display: block; background-color: #fff; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin: 0; border: 0; } .mint-msgbox-btn:focus { outline: none; } .mint-msgbox-btn:active { background-color: #fff; } .mint-msgbox-cancel { width: 50%; border-right: 1px solid #ddd; } .mint-msgbox-cancel:active { color: #000; } .mint-msgbox-confirm { color: #26a2ff; width: 50%; } .mint-msgbox-confirm:active { color: #26a2ff; } .msgbox-bounce-enter { opacity: 0; -webkit-transform: translate3d(-50%, -50%, 0) scale(0.7); transform: translate3d(-50%, -50%, 0) scale(0.7); } .msgbox-bounce-leave-active { opacity: 0; -webkit-transform: translate3d(-50%, -50%, 0) scale(0.9); transform: translate3d(-50%, -50%, 0) scale(0.9); } .v-modal-enter { -webkit-animation: v-modal-in .2s ease; animation: v-modal-in .2s ease; } .v-modal-leave { -webkit-animation: v-modal-out .2s ease forwards; animation: v-modal-out .2s ease forwards; } @-webkit-keyframes v-modal-in { 0% { opacity: 0; } 100% { } } @keyframes v-modal-in { 0% { opacity: 0; } 100% { } } @-webkit-keyframes v-modal-out { 0% { } 100% { opacity: 0; } } @keyframes v-modal-out { 0% { } 100% { opacity: 0; } } .v-modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.5; background: #000; }