fix buttons and i

Author: LipezJ

code/functions.js

@@ -5,8 +5,8 @@ const interReg = /(fa-solid)/g
 const regAlert = /(copi|agre|elim|rest)/g
 const regSpace = /[^\s]/g
 
-let keys = window.localStorage.getItem('keys').split(',')
-if (!window.localStorage.getItem('keys')) restaurar()
+let keys
+if (!window.localStorage.getItem('keys') || !keys) restaurar()
 
 function encriptar(e) {
     let word = document.querySelector("#input").value;

index.html

@@ -17,9 +17,9 @@
         <header>
             <div id="header">Encriptador de texto</div>
             <div class="linksh">
-                <a title="github" href="https://github.com/LipezJ/Encriptador" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-github"></i></a>
+                <a id="repo" title="github" href="https://github.com/LipezJ/Encriptador" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-github"></i></a>
                 <div id="modo-cont">
-                    <button type="button" title="modo" id="modob"><i class="fa-solid fa-circle-half-stroke"></i></button>
+                    <button type="button" title="modo" id="modob"><i class="buttoni fa-solid fa-circle-half-stroke"></i></button>
                 </div>
             </div>
         </header>
@@ -42,12 +42,12 @@
                     <div class="boton util">
                         <div id="config">
                             <button title="configuracion" type="button" id="configb">
-                                <i class="fa-solid fa-wrench"></i>
+                                <i class="buttoni fa-solid fa-wrench"></i>
                             </button>
                         </div>
                         <div id="limpiar">
                             <button title="limpiar" type="button" id="limpiarb">
-                                <i class="fa-solid fa-broom"></i>
+                                <i class="buttoni fa-solid fa-broom"></i>
                             </button>
                         </div>
                     </div>
@@ -59,7 +59,7 @@
                 </div>
                 <div id="copiarbs">
                     <div id="intercambiar" class="boton util">
-                        <button title="intercambiar" type="button" id="intercamb"><i id="interb" class="fa-solid fa-arrow-right-arrow-left"></i></button>
+                        <button title="intercambiar" type="button" id="intercamb"><i id="interb" class="buttoni fa-solid fa-arrow-right-arrow-left"></i></button>
                     </div>
                     <div id="copiar" class="boton util">
                         <button title="copiar" type="button" id="copiarb">Copiar</button>
@@ -77,21 +77,21 @@
             <div id="ccont">
                 <div id="csalir" class="boton">
                     <div id="ctitle">Editar claves</div>
-                    <button type="button" title="salir" id="salirb" ><i class="fa-solid fa-xmark"></i></button>
+                    <button type="button" title="salir" id="salirb" ><i class="buttoni fa-solid fa-xmark"></i></button>
                 </div>
                 <div class="ccinput">
                     <input title="clave" id="cclave" class="cinput" type="text" maxlength="1">
                     <input title="valor" id="cvalor" class="cinput" type="text" maxlength="6">
                 </div>
                 <div  class="boton cboton">
                     <div id="restaurar">
-                        <button type="button" title="restaurar" id="restb" ><i class="fa-solid fa-repeat"></i></i></button>
+                        <button type="button" title="restaurar" id="restb" ><i class="buttoni fa-solid fa-repeat"></i></i></button>
                     </div>
                     <div id="agregar">
-                        <button type="button" title="agregar" id="agb" ><i class="fa-solid fa-plus"></i></button>
+                        <button type="button" title="agregar" id="agb" ><i class="buttoni fa-solid fa-plus"></i></button>
                     </div>
                     <div id="eliminar">
-                        <button type="button" title="eliminar" id="elimb" ><i class="fa-solid fa-minus"></i></button>
+                        <button type="button" title="eliminar" id="elimb" ><i class="buttoni fa-solid fa-minus"></i></button>
                     </div>
                 </div>
             </div>

light.css

@@ -45,7 +45,7 @@ i {
     border: #249264 solid 3px;
     color: #fffffe;
 }
-.fa-arrow-right-arrow-left, .fa-broom, .fa-circle-half-stroke, .fa-wrench, .fa-plus, .fa-minus, .fa-xmark, .fa-repeat{
+.buttoni{
     color: #fffffe;
 }
 body::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb {

style.css

@@ -67,6 +67,10 @@ button {
     outline: none;
     border-radius: 10px;
 }
+button:active {
+    padding-top: 6.5px;
+    padding-bottom: 6.5px;
+}
 .boton {
     display: flex;
     justify-content: center;
@@ -117,11 +121,14 @@ header {
     align-items: center;
     gap: 20px;
 }
+#repo {
+    font-size: 2.5rem;
+}
 #modob {
     padding: 5px 10px;
 }
 #modob:active {
-    padding-top: 7.5px;
+    padding: 6.5px 10px;
 }
 
 footer {
@@ -271,10 +278,13 @@ footer {
         padding: 2px 10px;
     }
     #limpiarb:active, #intercamb:active, #configb:active {
-        padding-top: 6.5px;
+        padding: 6.5px 25px;
+    }
+    #salirb:active, #elimb:active, #agb:active, #restb:active {
+        padding: 3.5px 10px;
     }
-    #salirb:active, #elimb:active, #agb:active, #restb:active, #modob:active {
-        padding-top: 3.5px;
+    #modob:active {
+        padding: 6.5px 10px;
     }
     .cboton {
         gap: 0px;
@@ -290,6 +300,9 @@ footer {
         left: 15vw;
         right: auto;
     }
+    #repo {
+        font-size: xx-large;
+    }
 }
 @media screen and (max-width: 450px) {
     header {
@@ -316,9 +329,4 @@ body::-webkit-scrollbar, textarea::-webkit-scrollbar {
 textarea::-webkit-scrollbar-track, textarea::-webkit-scrollbar-thumb,
 body::-webkit-scrollbar-track, body::-webkit-scrollbar-thumb {
     border-radius: 10px;
-}
-
-button:active {
-    padding-top: 6.5px;
-    padding-bottom: 6.5px;
 }