Modified the box design (#262)

Rakesh9100 · Feb 25, 2024 · d20018d · d20018d
1 parent 87e5e55
commit d20018d
Showing 1 changed file with 54 additions and 28 deletions.
diff --git a/assets/main.css b/assets/main.css
@@ -1472,7 +1472,6 @@ h1 {
     }
 }
 
-
 .container {
     display: flex;
     justify-content: flex-end;
@@ -1668,18 +1667,22 @@ h1 {
     }
 }
 
+#time-range-val {
+    padding: 1rem;
+}
+
 #gameplayTime {
-    background: rgb(249,249,202);
-    background: radial-gradient(circle, rgb(230, 252, 255) 26%, rgb(112, 245, 240) 100%);
-    border-width: 10px;
-    border-style: solid;
-    animation: colorfulBorder1 4s infinite linear;
-    color: black;
+    background: #07182E;
+    background: radial-gradient(circle, rgb(230, 252, 255) 26%, rgb(1, 24, 23) 100%);
+    border-width: 1px;
+    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5); /* Initial glowing effect */
+    color: rgb(255, 245, 245);
     position: absolute;
     z-index: 8;
-    padding: 1rem;
+    padding: 3rem;
     font-family: 'Times New Roman', Times, serif;
     font-weight: bold;
+    font-size: larger;
     display: none;
     align-items: center;
     justify-content: center;
@@ -1689,35 +1692,58 @@ h1 {
     flex-direction: column;
     justify-content: space-evenly;
     transition: all 0.5s ease-in-out;
-    /* animation-name: scaleMenu;*/
-    transform: scale(1); 
     border-radius: 20px;
+    overflow: hidden;
 }
 
-@keyframes colorfulBorder1 {
-    0% {
-        border-color: red;
-        transform: scale(1.2);
-    }
+#gameplayTime b {
+    z-index: 1;
+    margin-bottom: 10px;
+}
 
-    25% {
-        border-color: orange;
-    }
+#gameplayTime div {
+    z-index: 1;
+}
 
-    50% {
-        border-color: yellow;
-    }
+#gameplayTime h2 {
+    z-index: 1;
+}
 
-    75% {
-        border-color: violet;
-    }
+#gameplayTime input {
+    z-index: 1;
+}
 
-    100% {
-        border-color: rgb(28, 31, 228);
-        transform: scale(1.3);
+/* Adding color revolving effect */
+
+#gameplayTime::before {
+    content: '';
+    position: absolute;
+    width: 200px;
+    background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
+    height: 300%;
+    animation: rotBGimg 3s linear infinite;
+    transition: all 0.2s linear;
+}
+
+@keyframes rotBGimg {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
     }
 }
 
+#gameplayTime::after {
+    content: ' ';
+    position: absolute;
+    background: #07182E;
+    /* background: radial-gradient(circle, rgb(230, 252, 255) 26%, rgb(218, 11, 255) 100%); */
+    inset: 5px; 
+    border-radius: 15px;
+}
+
 * {
     cursor: none;
-}
+}