word-games-theme 1.5.1 → 1.5.2

data/assets/css/game.css

@@ -1,35 +1,39 @@
 /* create wordle screen css */
-.create-wordle{
-    box-shadow: 0 5px 15px rgb(0 0 0 / 20%) ; 
+.create-wordle {
+    box-shadow: 0 5px 15px rgb(0 0 0 / 20%);
     margin-bottom: 150px;
-    padding:8rem 0;
+    padding: 8rem 0;
 }
-.word-generator-link{
+
+.word-generator-link {
     font-size: 18px;
     background: #f8f9fa;
     padding: 5px 15px;
-    color:#404040;
-    box-shadow: 0 0 1px rgba(0,0,0,0.1);
+    color: #404040;
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
     border-radius: 4px;
     margin: 0 15px;
-    border:1px solid rgba(0,0,0,.1)
+    border: 1px solid rgba(0, 0, 0, .1)
 }
-.create-wordle .custom-word{
+
+.create-wordle .custom-word {
     font-weight: 600;
     text-transform: uppercase;
-      width: 60%;
-      height: 50px;
-      margin:18px auto;
-      text-align: center;
-      outline: none;
-      border: 1px solid rgba(0, 0, 0, 0.1);
-      background: rgba(255, 255, 255, 0.2);
-      border-radius: 40px;
-      color: #000;
-      font-size: 12px;
-      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
-}
-.create-wordle .generate-word-game-link,.copy-btn{
+    width: 60%;
+    height: 50px;
+    margin: 18px auto;
+    text-align: center;
+    outline: none;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 40px;
+    color: #000;
+    font-size: 12px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+}
+
+.create-wordle .generate-word-game-link,
+.copy-btn {
     background-color: #6aaa64;
     border: #6aaa64;
     color: #fff;
@@ -40,7 +44,7 @@
     font-weight: 600;
 }
 
-.game-play-btn{
+.game-play-btn {
     display: block;
     margin: 5px auto;
     background-color: #6aaa64;
@@ -53,44 +57,48 @@
     font-weight: 600;
 }
 
-.game-play-btn:hover{
-    color:#fff !important
+.game-play-btn:hover {
+    color: #fff !important
 }
 
-
-
-.create-wordle .generate-word-game-link:hover,.copy-btn:hover{
-    color:#fff !important
+.create-wordle .generate-word-game-link:hover,
+.copy-btn:hover {
+    color: #fff !important
 }
-::placeholder{
+
+::placeholder {
     font-weight: 400;
-    text-transform: capitalize ;
+    text-transform: capitalize;
 }
+
 /* modal style */
-.close{
+.close {
     background-color: transparent;
-    border:none;
+    border: none;
     outline: none;
 }
-.times-icon{
+
+.times-icon {
     font-size: 25px;
 }
-.modal-header .close{
+
+.modal-header .close {
     margin: -1rem 0rem -1rem auto !important
 }
+
 .modal-dialog {
-    max-width: 450px !important; 
-    margin: 0rem auto !important; 
+    max-width: 450px !important;
+    margin: 0rem auto !important;
     top: 60px !important;
 }
 
-.game{
+.game {
     width: 100%;
     /* height: 100vh; */
 }
 
 /* wordle game play css */
-.game .game-container .game-board{
+.game .game-container .game-board {
     width: 350px;
     height: auto;
     margin: 0 auto;
@@ -99,15 +107,16 @@
     flex-wrap: wrap;
     justify-content: center;
 }
-.game .game-container .game-board .tile{
-    
+
+.game .game-container .game-board .tile {
+
     display: flex;
     justify-content: center;
     align-items: center;
     width: 55px;
     height: 55px;
     text-align: center;
-    border:2px solid #dee1e9;
+    border: 2px solid #dee1e9;
     border-radius: 5px;
     color: #363535;
     font-size: 28px;
@@ -119,23 +128,27 @@
 }
 
 
-.game .game-container .game-board .tile:focus-visible{
+.game .game-container .game-board .tile:focus-visible {
     outline: none !important;
 }
-.popAni{
+
+.popAni {
     animation: popAni 495ms ease-in-out;
 }
-.game .game-container .game-keyboard{
+
+.game .game-container .game-keyboard {
     display: flex;
     flex-direction: column;
     width: 50%;
-    margin:0rem auto
+    margin: 0rem auto
 }
-.game .game-container .game-keyboard-row{
+
+.game .game-container .game-keyboard-row {
     display: flex;
     flex-direction: row;
     justify-content: center;
 }
+
 .game .game-container .key-btn {
     align-items: center;
     background-color: #edeff1;
@@ -151,10 +164,10 @@
     min-height: 40px;
     padding: 14px;
     text-decoration: inherit;
-    
+
 }
 
-.alert-container{
+.alert-container {
     font-size: 15px;
     box-shadow: 0 5px 15px rgb(0 0 0 / 10%);
     position: fixed;
@@ -166,18 +179,21 @@
     text-align: center;
     z-index: 9999999;
     background: #000;
-    color:#fff;
+    color: #fff;
     border-radius: 4px;
 }
-.active-alert{
+
+.active-alert {
     visibility: visible;
 }
+
 .tick {
     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAL7SURBVEhL7ZZdSBRRFMf/s+PWSrsUFGoUfi1ooWISFUQPvfRhH1hUL5agvogvaQ/hamBRbz0W2VNBQb2IgqJsGL2VVBK11UNpPkhGKmWK6wfu7kznzFxGx5lxZ+tN/MGdOefOzP3PnTn3noN11jySOLvnWamfniqGJGVovqpOQMVnHI9ENd8l7oTDe/zwSGfp7nPkHaPm0/qXWKD2kl7gERS1A+Uf5vVuZ1YXbg9KCAT2kWgjeaeoBbR+Z/gFupFQWhGNDuLCsKp3W3EW1kQ3HYRHfkhegd7pmkEoiVrMzPY7iXvE2YrfXyJEg3pHShTQsw9oDMcXthfuLfNDlq+RxQ/KWl/qFNIYN7WxbLAX9uIMhWu58P4D9TSNVSEcE06fmqM3WSAZ+DwbcCXnEk5sO7QyaNKpVeumGWtw9ZYE4E2bIGvlkrGFRZtyqxHKq8HQ3HfsfVOJmBIXVzUWEItn4OSnGeFrWGcspxXR0ZXolrQAmkgwlFeL4blRtAzdRVxJiKsGPhqzUNgGVmFJzRSWCVmSqZlvb8ipRCi3BtPxGYSG7qD3F+8hNqtHUncIy8DpH5tg0VvBeoTL7iHbl6XN9HqwDjfy6zCy8BPnI1edRXUsv9QqrEo/hGXAA+7fXIwjWw+gbXczmunTNmZX4uvcCFq/teHVVGQ1UR5zTFgGroMrJz0LbbtatMhlxhd/azNNKuoQXNbN4enEIqq2HyYrX+/QmY5H8XzyNYr8QSwqMVz+chsvJgeSiTI9KI88FraB/V7dV3aRjvepWdYyz3znxkz0T310I8qzrMfR9090dwn74Iqhk94pLDwTI/Njbj6vQOqhsbqEY8J+xky4lPZaTzdZqWYmhhfzMBSligqEt3qXGeflxPmUUxunuNQhUU6L0QHhW3DOPO1/gAr/KLzePioEuMzhYPNq15zhf9pJhUADorPv/q0QWA6XPrLEWYaTB2ctu9KHY6IDCbWLSp+k9Zc74eVwseehXAuJt0GJir1xirOUi7111jrAXwKK6K/PgrsYAAAAAElFTkSuQmCC) no-repeat;
     height: 35px;
     margin: 10px 0;
     background-position: center;
 }
+
 .close-icon {
     background: url(/assets/images/close.png) no-repeat;
     height: 20px;
@@ -185,34 +201,42 @@
     background-position: center;
     background-size: contain;
 }
+
 [data-state="active"] {
     border-color: hsl(200, 1%, 34%);
 }
+
 [data-state="correct-spot"] {
-    color:#fff !important;
-    background-color:#6aaa64 !important;
-    border: none  !important;
+    color: #fff !important;
+    background-color: #6aaa64 !important;
+    border: none !important;
 }
+
 [data-state="wrong-spot"] {
-    color:#fff !important;
+    color: #fff !important;
     background-color: #c9b458 !important;
     border: none !important;
 }
+
 [data-state="wrong-word"] {
-    color:white !important;
-    background-color: #787c7e!important;
+    color: white !important;
+    background-color: #787c7e !important;
     border: none !important;
 }
+
 .shake {
     animation: shake 240ms ease-in-out;
 }
+
 .dance {
     animation: dance 495ms ease-in-out;
 }
+
 .flip {
     transform: rotateX(90deg);
 }
-.wordle-game-restart{
+
+.wordle-game-restart {
     width: 120px;
     margin: 0 auto;
     background: #57ac57;
@@ -225,8 +249,9 @@
     margin-bottom: 1rem;
     text-align: center;
 }
-.wordle-game-restart:hover{
-    color:#fff !important;
+
+.wordle-game-restart:hover {
+    color: #fff !important;
     text-decoration: none !important;
 }
 
@@ -287,7 +312,7 @@
         transform: scale(.8);
         opacity: 0;
     }
-    
+
     40% {
         transform: scale(1.1);
         opacity: 1;
@@ -306,19 +331,20 @@
 }
 
 
-#confetti-canvas{
+#confetti-canvas {
     width: 100%;
     position: fixed;
-    top:0
+    top: 0
 }
 
-.gameResult{
+.gameResult {
     text-align: center;
     width: 100%;
     font-size: 18px;
     font-weight: 900;
 }
-#result-guess-word{
+
+#result-guess-word {
     background: #f8f9fa;
     width: 100px;
     text-align: center;
@@ -331,7 +357,8 @@
     text-transform: uppercase;
     font-weight: 600;
 }
-.wordle-game-button{
+
+.wordle-game-button {
     padding: 0px 15px;
     color: #626568;
     font-size: 14px;
@@ -348,26 +375,30 @@
     align-items: center;
     align-content: center;
     margin: 6px 0px;
-    border: 1px solid rgba(0,0,0,0.1);
+    border: 1px solid rgba(0, 0, 0, 0.1);
 }
-.wordle-game-button:hover{
+
+.wordle-game-button:hover {
     text-decoration: none !important;
 }
-.social-sharing-icons{
-    display:flex;
+
+.social-sharing-icons {
+    display: flex;
     justify-content: center;
 }
-.share-icon{
+
+.share-icon {
     width: 50px;
     height: 50px;
 }
 
 
 #wordle-examples {
-    border-top: 1px solid rgba(0,0,0,0.1);
-    border-bottom: 1px solid rgba(0,0,0,0.1);
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     padding: 1rem 0rem;
-  }
+}
+
 .wordle-game-spot {
     padding: 20px;
     border: 2px solid #3a3a3c;
@@ -378,47 +409,62 @@
     text-align: center;
     font-size: 25px;
 }
+
 .wordle-game-absent {
     background-color: #3a3a3c !important;
     border-color: #3a3a3c !important;
     color: #fff;
-  }
+}
+
 .wordle-game-present {
     background-color: #b59f3b !important;
     border-color: #b59f3b !important;
     color: white;
-  }
+}
+
 .wordle-game-correct {
     background-color: #538d4e !important;
     border-color: #538d4e !important;
     color: white;
-  }
+}
+
 .wordle-game-spot:before {
     content: "\a0";
-  }
-.wordle-game-spot[title]:before { content: attr(title); }
+}
+
+.wordle-game-spot[title]:before {
+    content: attr(title);
+}
+
 .wordle-game-row-active .wordle-game-spot {
-      border-color: #666;
-  }
-  @media (max-width: 768px) {
-      .tile{
+    border-color: #666;
+}
+
+@media (max-width: 768px) {
+    .tile {
         caret-color: transparent;
         cursor: default;
-      }
-    #create-wordle-form{
-        padding:0 10px;
     }
-    .create-wordle .custom-word{
+
+    #create-wordle-form {
+        padding: 0 10px;
+    }
+
+    .create-wordle .custom-word {
         width: 100%;
     }
-    #exampleModal,.wordletip{
-        padding:15px;
+
+    #exampleModal,
+    .wordletip {
+        padding: 15px;
     }
-    .game .game-container .key-btn{
-        margin:2px;
-        padding:15px 10px;
+
+    .game .game-container .key-btn {
+        margin: 2px;
+        padding: 15px 10px;
     }
-    .game .game-container .game-keyboard{
+
+    .game .game-container .game-keyboard {
         margin-top: 3rem !important;
     }
 }
@@ -433,4 +479,4 @@
         transform: scale(1.03);
     }
      */
-/* } */
+/* } */