diff options
author | Sébastien Dailly <sebastien@chimrod.com> | 2021-04-29 15:20:11 +0200 |
---|---|---|
committer | Sébastien Dailly <sebastien@dailly.me> | 2022-02-07 16:43:33 +0100 |
commit | 2fc4e793b12341df6264e22c0b8bd0f6dd2bd27d (patch) | |
tree | b61b55dc11e4361927c1638d1eb4e82feeef5465 /editor/modal.css | |
parent | eb319516fd922ab89b7120a885d1e801fa3f45aa (diff) |
Added pop-up and events in editor
Diffstat (limited to 'editor/modal.css')
-rwxr-xr-x | editor/modal.css | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/editor/modal.css b/editor/modal.css new file mode 100755 index 0000000..0c50a8d --- /dev/null +++ b/editor/modal.css @@ -0,0 +1,69 @@ +/* The Modal (background) */ +.modal { + position: fixed; /* Stay in place */ + z-index: 100; /* Sit on top */ + padding-top: 100px; /* Location of the box */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ +} + +/* Modal Content */ +.modal-content { + position: relative; + background-color: #fefefe; + margin: auto; + padding: 0; + border: 1px solid #000; + width: 45%; + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); + -webkit-animation-name: animatetop; + -webkit-animation-duration: 0.4s; + animation-name: animatetop; + animation-duration: 0.4s +} + +/* Add Animation */ +@-webkit-keyframes animatetop { + from {top:-300px; opacity:0} + to {top:0; opacity:1} +} + +@keyframes animatetop { + from {top:-300px; opacity:0} + to {top:0; opacity:1} +} + + +/* The Close Button */ +.modal-close { + color: white; + float: right; + font-size: 28px; + font-weight: bold; +} + +.modal-close:hover, +.modal-close:focus { + color: #000; + text-decoration: none; + cursor: pointer; +} + +.modal-header { + padding: 1px 16px; + background-color: #333; + color: white; +} + +.modal-body {padding: 16px 16px;} + +.modal-footer { + padding: 1px 16px; + background-color: #333; + color: white; +} |