added styles for diamond input and some styles for btns start and claim, saperpage

luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css

@@ -47,7 +47,8 @@ input[type="number"]::-webkit-outer-spin-button {
     font-size: 13px;
 }
 
-.crystals h3 {
+.crystals h3,
+.diamonds h3 {
     color: #44C6EF54;
     text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     font-family: Montserrat Alternates;
@@ -56,7 +57,8 @@ input[type="number"]::-webkit-outer-spin-button {
     line-height: 31px;
 }
 
-.crystals .crystals__choises input {
+.crystals .crystals__choises input,
+.diamonds .diamonds__choises input {
     width: 110px;
     height: 38px;
     color: #FFF;
@@ -75,7 +77,8 @@ input[type="number"]::-webkit-outer-spin-button {
     align-items: center;
 }
 
-.crystals .crystals__choises input:focus {
+.crystals .crystals__choises input:focus,
+.diamonds .diamonds__choises input:focus {
     outline: none;
 }
 
@@ -83,7 +86,8 @@ input[type="number"]::-webkit-outer-spin-button {
     margin-left: -22px;
 }
 
-.crystals-btns__choices button {
+.crystals-btns__choices button,
+.btn-style__diamonds button {
     margin-left: 5px;
     border-radius: 10px;
     background: #252C47;
@@ -97,7 +101,8 @@ input[type="number"]::-webkit-outer-spin-button {
     padding: 4px 23px;
 }
 
-.crystal-icon {
+.crystal-icon,
+.diamond-icon  {
     position: relative;
     left: 25px;
     top: 2px;
@@ -105,4 +110,63 @@ input[type="number"]::-webkit-outer-spin-button {
 
 .crystals-btns__display {
     display: flex;
+}
+
+#diamonds-input {
+    width: 347px;
+    height: 38px;
+}
+
+.diamonds h3 {
+    margin: 5px 0 0 23px;
+}
+
+.diamonds-input__margin {
+    margin-left: -23px;
+}
+
+.diamonds .diamonds__choises input {
+    padding-left: 35px;
+}
+
+.diamond-icon {
+    top: 12px;
+    left: 35px;
+}
+
+.diamonds__btns {
+    margin: 10px 0 0 22px;
+}
+
+.diamonds-btns__display {
+    display: flex;
+}
+
+.btn-style__diamonds button {
+    padding: 4px 20px;
+}
+
+#max-button {
+    text-transform: uppercase;
+    font-family: Inter;
+    font-size: 16px;
+    font-weight: 700;
+}
+
+.saper-start__btns {
+    margin: 14px 10px 0 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.saper-start__btns button {
+    width: 100%;
+    padding: 14px;
+    margin-bottom: 5px;
+
+}
+
+.btn-start {
+
 }

luckydiamond/src/pages/games-pages/SapergamePage.vue

@@ -23,6 +23,24 @@
               </ul>
             </div>
           </div>
+          <div class="saper-start__choises diamonds diamonds-input__margin">
+            <h3>Сумма депозита</h3>
+            <div class="diamonds__choises">
+              <img class="diamond-icon" src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png">
+              <input type="number" id="diamonds-input">
+              <div class="diamonds__btns btn-style__diamonds">
+                <ul class="diamonds-btns__display">
+                  <li v-for="(item, index) in SaperNumbers" :key="index">
+                    <button :id="item.diamonds === 'max' ? 'max-button' : null" v-if="item.diamonds !== undefined">{{ item.diamonds }}</button>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="saper-start__btns btn-start btn-claim">
+            <button>Начать игру</button>
+            <button>Забрать 15 АР</button>
+          </div>
         </div>
       </div>
     </section>