Changeset ace7865 for styles/globals.css

Timestamp:

06/25/22 11:30:19 (2 years ago)

Author:

anastasovv <simon@…>

Branches:

main

Children:

b13f93b

Parents:

9bd09b0

Message:

Finished Roulette

File:

• styles/globals.css (modified) (6 diffs)

styles/globals.css

@@ -5 +5 @@
   margin: 0;
   font-family: 'Inter', sans-serif;
+  overflow: hidden;
 }
 
@@ -131 +132 @@
   */
 .alert {
+  z-index: 30;
   width: 100vw;
   display: -webkit-box;
@@ -148 +150 @@
   background-color: rgba(0, 0, 0, 0.9);
   position: absolute;
-  top: 50vh;
   -webkit-transform: translateY(-70%);
           transform: translateY(-70%);
@@ -795 +796 @@
   top: 60%;
   left: 18%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
+  -webkit-transition: all .5s ease-in-out;
+  transition: all .5s ease-in-out;
   width: 450px;
   height: auto;
@@ -837 +838 @@
   -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  gap: 5px;
   font-size: 2.5rem;
   color: black;
@@ -875 +890 @@
 
 /**
+  * Spin effect on the roulette wheel
+  */
+.spin {
+  -webkit-animation: spinner 4s infinite;
+          animation: spinner 4s infinite;
+  -webkit-animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
+}
+
+@-webkit-keyframes spinner {
+  0% {
+    -webkit-transform: translate(-50%, -50%) rotateZ(0deg);
+            transform: translate(-50%, -50%) rotateZ(0deg);
+  }
+  10% {
+    -webkit-transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
+            transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
+  }
+  20% {
+    -webkit-transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
+            transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
+  }
+  30% {
+    -webkit-transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
+            transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
+  }
+  40% {
+    -webkit-transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
+            transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
+  }
+  50% {
+    -webkit-transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
+            transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
+  }
+  60% {
+    -webkit-transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
+            transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
+  }
+  70% {
+    -webkit-transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
+            transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
+  }
+  80% {
+    -webkit-transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
+            transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
+  }
+  90% {
+    -webkit-transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
+            transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
+  }
+  100% {
+    -webkit-transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
+            transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
+  }
+}
+
+@keyframes spinner {
+  0% {
+    -webkit-transform: translate(-50%, -50%) rotateZ(0deg);
+            transform: translate(-50%, -50%) rotateZ(0deg);
+  }
+  10% {
+    -webkit-transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
+            transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
+  }
+  20% {
+    -webkit-transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
+            transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
+  }
+  30% {
+    -webkit-transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
+            transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
+  }
+  40% {
+    -webkit-transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
+            transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
+  }
+  50% {
+    -webkit-transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
+            transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
+  }
+  60% {
+    -webkit-transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
+            transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
+  }
+  70% {
+    -webkit-transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
+            transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
+  }
+  80% {
+    -webkit-transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
+            transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
+  }
+  90% {
+    -webkit-transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
+            transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
+  }
+  100% {
+    -webkit-transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
+            transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
+  }
+}
+
+/**
   * File <- Poker Main
   */