From 2fc4e793b12341df6264e22c0b8bd0f6dd2bd27d Mon Sep 17 00:00:00 2001 From: Sébastien Dailly Date: Thu, 29 Apr 2021 15:20:11 +0200 Subject: Added pop-up and events in editor --- editor/modal.css | 69 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100755 editor/modal.css (limited to 'editor/modal.css') 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; +} -- cgit v1.2.3