From a9f0ad9a10ed764a65145826d4e0ee920fc95c30 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Sun, 3 Dec 2023 08:53:19 +0300
Subject: [PATCH] added styles for text and input in saperpage

---
 .../css/PagesStyles/games-pages/saper.css     | 59 +++++++++++++++++--
 .../src/pages/games-pages/SapergamePage.vue   |  4 +-
 2 files changed, 57 insertions(+), 6 deletions(-)

diff --git a/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css b/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css
index b4e08b0..586d7c9 100644
--- a/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css
+++ b/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css
@@ -2,6 +2,12 @@
     height: 95%;
 }
 
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
 .saper {
     padding-top: 15%;
     border-radius: 20px;
@@ -14,18 +20,63 @@
     border-radius: 20px;
     background: #22252F;
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
-    width: 25%;
-    height: 70%;
+    width: 27%;
+    height: 75%;
+}
+
+.padding-elements {
+    padding-left: 22px;
+}
+
+.title-saper h2 {
+    padding: 16px 0 5px 0;
+    color: #FFF;
+    font-weight: 700;
+    line-height: 31px;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.00);
+    font-family: Montserrat Alternates;
+    font-size: 26px;
+}
+
+.saper-start__content p {
+    color: #FFFFFF84;
+    font-weight: 700;
+    line-height: 31px;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size: 13px;
+}
+
+.crystals h3 {
+    color: #44C6EF54;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 31px;
+}
+
+.crystals .crystals__choises input {
+    width: 110px;
+    height: 38px;
+    border-radius: 10px;
+    padding-left: 25px;
+    border: 2px solid #2B3458;
+    background: #22252F;
+}
+
+.crystals .crystals__choises input:focus {
+    outline: none;
 }
 
 .crystals-input__margin {
-    margin-left: -15px;
+    margin-left: -22px;
 }
 
 
 
 .crystal-icon {
     position: relative;
-    left: 23px;
+    left: 25px;
     top: 11px;
 }
\ No newline at end of file
diff --git a/luckydiamond/src/pages/games-pages/SapergamePage.vue b/luckydiamond/src/pages/games-pages/SapergamePage.vue
index c248727..c6f8ba2 100644
--- a/luckydiamond/src/pages/games-pages/SapergamePage.vue
+++ b/luckydiamond/src/pages/games-pages/SapergamePage.vue
@@ -8,14 +8,14 @@
 
     <section class="saper">
       <div class="saper-start">
-        <div class="saper-start__content">
+        <div class="saper-start__content title-saper padding-elements">
           <h2>Сапёр</h2>
           <p>Находи изумруды на поле и избегай кристалы</p>
           <div class="saper-start__choises crystals">
             <h3>Количество кристалов</h3>
             <div class="crystals__choises crystals-input__margin">
               <img class="crystal-icon" width="25" height="25" src="@/assets/icons-games/saper-game/icon-crystall-saper.svg">
-              <input type="text">
+              <input type="number">
             </div>
           </div>
         </div>