Changeset ace7865 for styles/globals.scss

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.scss (modified) (6 diffs)

styles/globals.scss

@@ -9 +9 @@
 
   font-family: 'Inter', sans-serif;
+
+  overflow: hidden;
 }
 
@@ -135 +137 @@
   */
 .alert {
+  z-index: 30;
+
   width: 100vw;
   
@@ -147 +151 @@
 
   position: absolute;
-  top: 50vh;
 
   transform: translateY(-70%);
@@ -782 +785 @@
   left: 18%;
 
-  transform: translate(-50%, -50%);
+  transition: all .5s ease-in-out;
   
   width: 450px;
@@ -829 +832 @@
 
   transform: translate(-50%, -50%);
-  
-  font-size: 2.5rem;
-
-  color: black;
-}
-
-.rouletteBetModal {
-  z-index: 20;
-
+
+  display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  gap: 5px;
+  
+  font-size: 2.5rem;
+
+  color: black;
+}
+
+.rouletteBetModal {
+  z-index: 20;
+
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 
   position: fixed;
@@ -867 +876 @@
 
 /**
+  * Spin effect on the roulette wheel
+  */
+.spin {
+  animation: spinner 4s infinite;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes spinner {
+  0% {
+    transform: translate(-50%, -50%) rotateZ(0deg);
+  }
+  10% {
+    transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
+  }
+  20% {
+    transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
+  }
+  30% {
+    transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
+  }
+  40% {
+    transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
+  }
+  50% {
+    transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
+  }
+  60% {
+    transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
+  }
+  70% {
+    transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
+  }
+  80% {
+    transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
+  }
+  90% {
+    transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
+  }
+  100% {
+    transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
+  }
+}
+
+/**
   * File <- Poker Main
   */
-
+.pokerMainContainer {
+  
+}