diff --git a/js/ui/dialog/css/prompt-boxes.css b/js/ui/dialog/css/prompt-boxes.css new file mode 100644 index 0000000..40ddd5b --- /dev/null +++ b/js/ui/dialog/css/prompt-boxes.css @@ -0,0 +1,165 @@ +/** Variables **/ +/* +body { + font-family: sans-serif; } + +* { + -webkit-box-sizing: border-box; + box-sizing: border-box; } +*/ + +#pb-container, .pb-backdrop { + font-family: sans-serif; + -webkit-transition: ease 0.25s; + -o-transition: ease 0.25s; + transition: ease 0.25s; } +#pb-container a, #pb-container button, #pb-container input, #pb-container textarea, #pb-container select, #pb-container div, .pb-backdrop a, .pb-backdrop button, .pb-backdrop input, .pb-backdrop textarea, .pb-backdrop select, .pb-backdrop div { + -webkit-transition: ease 0.25s; + -o-transition: ease 0.25s; + transition: ease 0.25s; } + +.pb-toast { + -webkit-transition: ease 0.25s; + -o-transition: ease 0.25s; + transition: ease 0.25s; } + .pb-toast a, .pb-toast button, .pb-toast input, .pb-toast textarea, .pb-toast select, .pb-toast div { + -webkit-transition: ease 0.25s; + -o-transition: ease 0.25s; + transition: ease 0.25s; } + +.pb-backdrop { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 97; + opacity: 0 !important; + background: rgba(0, 0, 0, 0.2); } + .pb-backdrop[data-show] { + opacity: 1; } + +#pb-container { + display: inline-block; + position: fixed; + top: 50%; + left: 0; + right: 0; + max-width: 375px; + -webkit-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + margin-top: -50px; + margin-right: auto; + margin-left: auto; + padding: 1em; + border-radius: 5px; + background: #FFF; + border: 2px solid #333; + z-index: 99; +} + #pb-container.absolute { + margin-top: 40vh; } + #pb-container input { + display: block; + width: 95%; + padding: 0.5em; + margin-bottom: 1em; + border: 1px solid #EEE; + font-size: 1em; + border-radius: 5px; } + #pb-container input:focus, #pb-container input:active { + outline: none; + border-color: #CCC; } + #pb-container[data-show] { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); } + +.pb-toast { + display: inline-block; + position: fixed; + left: 0; + right: 0; + -webkit-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + width: 400px; + margin-top: 5px; + margin-bottom: 5px; + margin-right: auto; + margin-left: auto; + padding: 1em; + color: #FFF; + border-radius: 5px; + border: 2px solid #888; + text-align: center; + z-index: 98; } + .pb-toast.top { + top: 0.25em; } + .pb-toast.bottom { + bottom: 0.25em; } + .pb-toast.success { + background: #4591bf; } + .pb-toast.error { + background: #da4242; } + .pb-toast.info { + color: #252525; + background: #EEE; } + .pb-toast.show { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); } + .pb-toast.gone { + -webkit-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); } + .pb-toast[data-close="true"] { + padding-right: 3em; } + .pb-toast .toast-close { + position: absolute; + right: 0.75em; + top: 50%; + margin-top: -13.5px; + text-decoration: none; + font-size: 24px; + color: rgba(0, 0, 0, 0.5); } + +.pb-message { + font-size: 1.05em; + margin: 0 0 0.75em; } + +.pb-buttons button { + display: inline-block; + background: #EEE; + border-radius: 2px; + border: none; + padding: 0.5em 1em; + color: #222; + font-size: 1em; + outline: none; + overflow: hidden; + cursor: pointer; + -webkit-box-shadow: none; + box-shadow: none; + font-size: 14px; } + .pb-buttons button:focus { + -webkit-box-shadow: 0 0 0 3px #FFFFFF, 0 0 0px 5px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 0 3px #FFFFFF, 0 0 0px 5px rgba(0, 0, 0, 0.2); } + .pb-buttons button:hover { + background: #CCC; } + .pb-buttons button:not(:only-of-type):last-of-type { + float: right; + background: #4591bf; + color: #FFF; } + .pb-buttons button:not(:only-of-type):last-of-type:focus { + -webkit-box-shadow: 0 0 0 3px #FFFFFF, 0 0 0px 5px rgba(69, 145, 191, 0.5); + box-shadow: 0 0 0 3px #FFFFFF, 0 0 0px 5px rgba(69, 145, 191, 0.5); } + .pb-buttons button:not(:only-of-type):last-of-type:hover { + background: #366988; } + .pb-buttons button:not(:only-of-type):last-of-type[disabled] { + opacity: 0.5; + background: none; + border-color: #CCC; + color: #999; + cursor: not-allowed; }