Add cookie notice (testing phase)

2018-11-17 16:45:46 +00:00
parent 97e94a8c06
commit 6e968fb21d
3 changed files with 131 additions and 0 deletions
--- a/assets/global.css
+++ b/assets/global.css
@@ -50,3 +50,122 @@ body {
 .main-content {
    margin-top: 20px;
 }
+
+/* for cookie notice */
+
+#cookies {
+    display: none;
+    width: 100%;
+    height: 70px;
+    padding-top: 30px;
+    position: absolute;
+    background: #ffffff;
+    border-bottom: 2px solid #fbeed5;
+    color: #c09853;
+    text-align: center;
+    bottom: 0;
+    left: 0;
+    z-index: 9999;
+}
+
+  #cookies > p {
+    margin: 0 0 10px 0;
+    font-weight: bold;
+}
+
+  #cookies > p a {
+    color: #00adb4;
+    text-decoration: none;
+}
+
+#cookies.display {
+    display: block;
+
+    /* Cross browser animation */
+    -webkit-animation: cookies 1s 1; /* Chrome, Safari 5+ */
+    -moz-animation: cookies 1s 1; /* Firefox 5-15 */
+    -ms-animation: cookies 1s 1; /* IE9 */
+    -o-animation: cookies 1s 1; /* Opera 12.00 */
+    animation: cookies 1s 1; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
+}
+
+@keyframes cookies {
+    0%   {
+        opacity: 0;
+        -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */
+        -moz-transform: translate3d(0,-100px,0); /* Firefox */
+        -ms-transform: translate3d(0,-100px,0); /* IE9 */
+        -o-transform: translate3d(0,-100px,0); /* Opera */
+        transform: translate3d(0,-100px,0);
+    }
+    100% {
+        opacity: 1;
+        -webkit-transform: translate3d(0,0,0); /* Safari & Chrome */
+        -moz-transform: translate3d(0,0,0); /* Firefox */
+        -ms-transform: translate3d(0,0,0); /* IE9 */
+        -o-transform: translate3d(0,0,0); /* Opera */
+        transform: translate3d(0,0,0);
+    }
+}
+@-webkit-keyframes cookies {
+    0%   {
+        -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */
+        -moz-transform: translate3d(0,-100px,0); /* Firefox */
+        -ms-transform: translate3d(0,-100px,0); /* IE9 */
+        -o-transform: translate3d(0,-100px,0); /* Opera */
+        transform: translate3d(0,-100px,0);
+    }
+    100% {
+        -webkit-transform: translate3d(0,0,0); /* Safari & Chrome */
+        -moz-transform: translate3d(0,0,0); /* Firefox */
+        -ms-transform: translate3d(0,0,0); /* IE9 */
+        -o-transform: translate3d(0,0,0); /* Opera */
+        transform: translate3d(0,0,0);
+    }
+}
+@-moz-keyframes cookies {
+    0%   {
+        -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */
+        -moz-transform: translate3d(0,-100px,0); /* Firefox */
+        -ms-transform: translate3d(0,-100px,0); /* IE9 */
+        -o-transform: translate3d(0,-100px,0); /* Opera */
+        transform: translate3d(0,-100px,0);
+    }
+    100% {
+        -webkit-transform: translate3d(0,0,0); /* Safari & Chrome */
+        -moz-transform: translate3d(0,0,0); /* Firefox */
+        -ms-transform: translate3d(0,0,0); /* IE9 */
+        -o-transform: translate3d(0,0,0); /* Opera */
+        transform: translate3d(0,0,0);
+    }
+}
+@-o-keyframes cookies {
+    0%   {
+        -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */
+        -moz-transform: translate3d(0,-100px,0); /* Firefox */
+        -ms-transform: translate3d(0,-100px,0); /* IE9 */
+        -o-transform: translate3d(0,-100px,0); /* Opera */
+        transform: translate3d(0,-100px,0);
+    }
+    100% {
+        -webkit-transform: translate3d(0,0,0); /* Safari & Chrome */
+        -moz-transform: translate3d(0,0,0); /* Firefox */
+        -ms-transform: translate3d(0,0,0); /* IE9 */
+        -o-transform: translate3d(0,0,0); /* Opera */
+        transform: translate3d(0,0,0);
+    }
+}
+
+.close-cookies {
+    -webkit-transition: all 0.2s ease-out;
+    -moz-transition: all 0.2s ease-out;
+    -ms-transition: all 0.2s ease-out;
+    -o-transition: all 0.2s ease-out;
+    transition: all 0.2s ease-out;
+
+  -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */
+    -moz-transform: translate3d(0,-100px,0); /* Firefox */
+    -ms-transform: translate3d(0,-100px,0); /* IE9 */
+    -o-transform: translate3d(0,-100px,0); /* Opera */
+    transform: translate3d(0,-100px,0);
+}