Index: design/notify.css |
=================================================================== |
new file mode 100644 |
--- /dev/null |
+++ b/design/notify.css |
@@ -0,0 +1,47 @@ |
+@keyframes notify_back_animate_in |
+{ |
+ 0% { opacity: 0; } |
+ 100% { opacity: 0.2; } |
+} |
+@keyframes notify_popup_animate_in |
+{ |
+ 0% { opacity: 0; } |
+ 100% { opacity: 0.9; } |
+} |
+@keyframes notify_back_animate_out |
+{ |
+ 0% { opacity: 0.2; } |
+ 50% { opacity: 0; } |
+ 100% { opacity: 0; } |
+} |
+@keyframes notify_popup_animate_out |
+{ |
+ 0% { opacity: 0.9; } |
+ 50% { opacity: 0; } |
+ 100% { opacity: 0; } |
+} |
+#notification div:first-child { |
+ animation: notify_back_animate_in 0.6s ease-in; |
+ width:100%; |
+ height:100%; |
+ opacity: 0.2; |
+ background: black; |
+ position:fixed; |
+ top: 0px; |
+ left: 0px; |
+} |
+#notification div:last-child { |
+ animation: notify_popup_animate_in 0.6s ease-in; |
+ text-align: center; |
+ opacity: 0.9; |
+ position:fixed; |
+ top:40%; |
+ left:30%; |
+ width:40%; |
+ padding: 8px; |
+ width: 30%; |
+ min-height: 20%; |
+ background-image:-o-linear-gradient(#E0E0E0, #B0B0B0); |
+ box-shadow:0px 0px 4px 2px #444444; |
+ border-radius:5px; |
+} |