::-moz-focus-inner { border-color: transparent; } .dialog { position: fixed; left: 0; top: 0; z-index: 10001; width: 100%; height: 100%; } .dialog-overlay { position: absolute; top: 0; left: 0; z-index: 10002; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .dialog-content { position: absolute; top: 50%; left: 50%; z-index: 10003; width: 90%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); line-height: 1.5; background-color: rgba(255, 255, 255, 0.95); border-radius: 10px; } .dialog-content * { box-sizing: border-box; -webkit-box-sizing: border-box; margin: 0; padding: 0; border: 0; outline: none; -moz-user-select: none; -webkit-tap-highlight-color: transparent; font-family: Helvetica; font-size: 15px; } .dialog-btn, .dialog-btn-hl { position: relative; display: inline-block; height: 44px; line-height: 44px; color: #007aff; font-size: 17px; font-weight: 400; cursor: pointer; text-decoration: none; background-color: transparent; } .dialog-btn:hover, .dialog-btn:active, .dialog-btn-hl:hover, .dialog-btn-hl:active { background-color: rgba(0, 0, 0, 0.05); } .dialog-content-hd { position: relative; padding: 20px 20px 10px; margin-bottom: -25px; text-align: center; } .dialog-content-hd .dialog-content-title { font-size: 18px; font-weight: 400; color: #333; } .dialog-content-hd .dialog-btn-close { display: block; width: 26px; height: 26px; overflow: hidden; position: absolute; top: 18px; right: 15px; cursor: pointer; background-color: transparent; } .dialog-content-hd .dialog-btn-close span { display: none; } .dialog-content-hd .dialog-btn-close:before, .dialog-content-hd .dialog-btn-close:after { content: ""; display: block; width: 18px; height: 1px; background-color: #808080; position: absolute; top: 13px; right: 3px; } .dialog-content-hd .dialog-btn-close:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .dialog-content-hd .dialog-btn-close:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .dialog-content-bd { margin: 25px 20px; color: #666; text-align: center; } .dialog-content-bd p { padding: 5px 0; } .content-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; } .dialog-content-ft { display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; font-size: 0; } .dialog-content-ft:after { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 1px; border-top: 1px solid #d5d5d5; color: #d5d5d5; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .dialog-content-ft .dialog-btn { -webkit-flex: 1; -ms-flex: 1; flex: 1; display: block; } .dialog-content-ft .dialog-btn:after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; border-left: 1px solid #d5d5d5; color: #d5d5d5; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleX(0.5); -ms-transform: scaleX(0.5); transform: scaleX(0.5); } .dialog-content-ft .dialog-btn:first-child { border-bottom-left-radius: 8px; } .dialog-content-ft .dialog-btn:first-child:after { border-left: none; } .dialog-content-ft .dialog-btn:last-child { border-bottom-right-radius: 8px; } .dialog-content-ft.stacked { -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; display: block; } .dialog-content-ft.stacked:after { border: none; } .dialog-content-ft.stacked .dialog-btn { position: relative; display: block; width: 100%; } .dialog-content-ft.stacked .dialog-btn:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; border-top: 1px solid #d5d5d5; color: #d5d5d5; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .dialog-open .dialog-content, .dialog-open .dialog-overlay, .dialog-close .dialog-content, .dialog-close .dialog-overlay { -webkit-animation-duration: 0.25s; animation-duration: 0.25s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .dialog-open .dialog-content { -webkit-animation-name: zoom-in; animation-name: zoom-in; } .dialog-open .dialog-overlay { -webkit-animation-name: fade-in; animation-name: fade-in; } .dialog-close .dialog-content { -webkit-animation-name: fade-out; animation-name: fade-out; } .dialog-close .dialog-overlay { -webkit-animation-name: fade-out; animation-name: fade-out; } /**------------------------- * android style **------------------------*/ [data-style=android] .dialog-content { box-sizing: content-box; border-radius: 0; background-color: white; } [data-style=android] .dialog-content-hd { text-align: left; padding: 20px 20px 0; margin-bottom: -10px; } [data-style=android] .dialog-content-hd .dialog-btn-close { top: 15px; right: 15px; } [data-style=android] .dialog-content-bd { margin: 25px 20px; text-align: left; } [data-style=android] .dialog-content-ft { display: block; padding: 8px; margin-top: -10px; text-align: right; } [data-style=android] .dialog-content-ft:after { border: none; } [data-style=android] .dialog-content-ft .dialog-btn { display: inline-block; min-width: 60px; height: 36px; line-height: 36px; overflow: hidden; padding: 0 13px; font-size: 16px; color: #808080; text-align: center; border-radius: 2px; } [data-style=android] .dialog-content-ft .dialog-btn:after { border: none; } [data-style=android] .dialog-content-ft .dialog-btn-confirm, [data-style=android] .dialog-content-ft .dialog-btn-hl { color: #00bbd3; } [data-style=android] .dialog-content-ft.stacked .dialog-btn { display: block; text-align: right; width: 100%; } [data-style=android] .dialog-content-ft-border:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; border-top: 1px solid #d5d5d5; color: #d5d5d5; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } [data-style=android] .ripple { border-radius: 99999px; pointer-events: none; position: absolute; width: 200px; height: 200px; background: rgba(0, 0, 0, 0.5); opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); animation: ripple .75s ease-out; -webkit-animation: ripple .75s ease-out; } @-webkit-keyframes ripple { 0% { -webkit-transform: scale(0); opacity: .5; } 100% { -webkit-transform: scale(2); opacity: 0; } } @keyframes ripple { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: .5; } 100% { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } [data-style=android].dialog-open .dialog-content { -webkit-animation-name: bounce-in-down; animation-name: bounce-in-down; } [data-style=android].dialog-open .dialog-overlay { -webkit-animation-name: fade-in; animation-name: fade-in; } [data-style=android].dialog-close .dialog-content { -webkit-animation-name: bounce-out-up; animation-name: bounce-out-up; } [data-style=android].dialog-close .dialog-overlay { -webkit-animation-name: fade-out; animation-name: fade-out; } /* toast */ .dialog-toast .dialog-overlay { background-color: transparent; } .dialog-toast .dialog-content { width: 148px; height: 148px; border-radius: 10px; background-color: rgba(0, 0, 0, 0.8); display: table; } .dialog-toast .dialog-content-bd { margin: 0; padding: 0; font-size: 0; position: relative; width: 100%; height: 100%; display: table-cell; text-align: center; vertical-align: middle; } .dialog-toast .dialog-content-bd p { margin: 0; padding: 0; } .dialog-toast .info-icon { width: 56px; max-width: 56px; } .dialog-toast .info-text { display: block; width: 90%; margin: 12px auto 0; font-size: 16px; color: #fff; } .dialog-toast.dialog-open .dialog-content, .dialog-toast.dialog-open .dialog-overlay { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .dialog-toast.dialog-close .dialog-content, .dialog-toast.dialog-close .dialog-overlay { -webkit-animation-duration: 0.35s; animation-duration: 0.35s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .dialog-toast.dialog-open .dialog-content { -webkit-animation-name: fade-in; animation-name: fade-in; } .dialog-toast.dialog-open .dialog-overlay { -webkit-animation-name: fade-in; animation-name: fade-in; } .dialog-toast.dialog-close .dialog-content { -webkit-animation-name: fade-out; animation-name: fade-out; } .dialog-toast.dialog-close .dialog-overlay { -webkit-animation-name: fade-out; animation-name: fade-out; } /* notice */ .dialog-notice .dialog-overlay { background-color: transparent; } .dialog-notice .dialog-content { display: table; width: auto; max-width: 85%; border-radius: 4px; background-color: rgba(0, 0, 0, 0.8); } .dialog-notice .dialog-content-bd { margin: 0; font-size: 0; padding: 10px 15px; line-height: normal; } .dialog-notice .info-icon { width: 16px; max-width: 16px; margin: 0 2px; vertical-align: middle; position: relative; top: -1px; } .dialog-notice .info-text { margin: 0 2px; font-size: 14px; color: #fff; line-height: 1.3; vertical-align: middle; } .dialog-notice.dialog-open .dialog-content, .dialog-notice.dialog-open .dialog-overlay { -webkit-animation-duration: 0.1s; animation-duration: 0.1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .dialog-notice.dialog-close .dialog-content, .dialog-notice.dialog-close .dialog-overlay { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .dialog-notice.dialog-open .dialog-content { -webkit-animation-name: fade-in; animation-name: fade-in; } .dialog-notice.dialog-open .dialog-overlay { -webkit-animation-name: fade-in; animation-name: fade-in; } .dialog-notice.dialog-close .dialog-content { -webkit-animation-name: fade-out; animation-name: fade-out; } .dialog-notice.dialog-close .dialog-overlay { -webkit-animation-name: fade-out; animation-name: fade-out; } .dialog-notice-bottom .dialog-content { top: auto; bottom: 0; -webkit-transform: translate(-50%, -20px); -ms-transform: translate(-50%, -20px); transform: translate(-50%, -20px); } .dialog-notice-bottom.dialog-open .dialog-content, .dialog-notice-bottom.dialog-open .dialog-overlay, .dialog-notice-bottom.dialog-close .dialog-content, .dialog-notice-bottom.dialog-close .dialog-overlay { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .dialog-notice-bottom.dialog-open .dialog-content { -webkit-animation-name: bounce-in-up; animation-name: bounce-in-up; } .dialog-notice-bottom.dialog-close .dialog-content { -webkit-animation-name: fade-out; animation-name: fade-out; } /**------------------------- * meida query **------------------------*/ @media screen and (min-width: 1023px) { .dialog-content { max-width: 40%; } } @media screen and (min-width: 767px) { .dialog-content { max-width: 60%; } } /**------------------------- * animate library **------------------------*/ @-webkit-keyframes zoom-in { 0% { opacity: 0; -webkit-transform: translate(-50%, -50%) scale(1.2, 1.2); } 100% { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1, 1); } } @keyframes zoom-in { 0% { opacity: 0; -webkit-transform: translate(-50%, -50%) scale(1.2, 1.2); transform: translate(-50%, -50%) scale(1.2, 1.2); } 100% { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1, 1); transform: translate(-50%, -50%) scale(1, 1); } } @-webkit-keyframes zoom-out { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate(-50%, -50%) scale(0.8, 0.8); } } @keyframes zoom-out { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate(-50%, -50%) scale(0.8, 0.8); transform: translate(-50%, -50%) scale(0.8, 0.8); } } @-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes bounce-in-down { 0% { opacity: 0; -webkit-transform: translate(-50%, -75%); } 100% { opacity: 1; -webkit-transform: translate(-50%, -50%); } } @keyframes bounce-in-down { 0% { opacity: 0; -webkit-transform: translate(-50%, -75%); transform: translate(-50%, -75%); } 100% { opacity: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @-webkit-keyframes bounce-out-up { 0% { opacity: 1; -webkit-transform: translate(-50%, -50%); } 100% { opacity: 0; -webkit-transform: translate(-50%, -75%); } } @keyframes bounce-out-up { 0% { opacity: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 100% { opacity: 0; -webkit-transform: translate(-50%, -75%); transform: translate(-50%, -75%); } } @-webkit-keyframes bounce-in-up { 0% { opacity: 0; -webkit-transform: translate(-50%, 0); } 80% { opacity: 1; -webkit-transform: translate(-50%, -24px); } 100% { opacity: 1; -webkit-transform: translate(-50%, -20px); } } @keyframes bounce-in-up { 0% { opacity: 0; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } 80% { opacity: 1; -webkit-transform: translate(-50%, -24px); transform: translate(-50%, -24px); } 100% { opacity: 1; -webkit-transform: translate(-50%, -20px); transform: translate(-50%, -20px); } } @-webkit-keyframes bounce-out-down { 0% { opacity: 1; -webkit-transform: translate(-50%, -20px); } 100% { opacity: 0; -webkit-transform: translate(-50%, 0); } } @keyframes bounce-out-down { 0% { opacity: 1; -webkit-transform: translate(-50%, -20px); transform: translate(-50%, -20px); } 100% { opacity: 0; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } }