Style Change now dark mode

Kiroto · Aug 16, 2023 · c1bb49c · c1bb49c
1 parent 7cbe632
commit c1bb49c
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 12 deletions.
diff --git a/js/controller.js b/js/controller.js
@@ -19,6 +19,8 @@ const crearHTMLdeGenerador = (generador, id) => {
     const botonCompra = document.createElement("button");
     const ImagenGenerador = document.createElement("img");
 
+    espacioGenerador.classList.add("espacio-generador");
+
     const generadorTextoDeTienda = (generador, id) => {
         return `${variablesDeJuego.generadores[id]} - ${generador.nombre} (+${
             generador.marshmallowPorSegundo

diff --git a/style.css b/style.css
@@ -1,22 +1,22 @@
 body {
-    font-family: 'Comic Sans MS';
-    color: #111111;
+    font-family: "Comic Sans MS";
+    color: #eeeeee;
+    background-color: #111;
     font-size: 1.5em;
-    background-image: url("./img/fondo.png");
 }
 
 img {
-  object-fit: cover;
+    object-fit: cover;
 }
 
 #main {
     display: flex;
     flex-wrap: nowrap;
 }
 
-
 #shop {
-
+    display: flex;
+    flex-direction: column;
     border-style: groove;
     border-width: 0.2cm;
     border-color: aliceblue;
@@ -47,10 +47,14 @@ img {
     display: block;
     text-align: center;
     padding: auto;
-    height: 150px
+    height: 150px;
 }
 
 #marshmallow {
+    position: relative;
+    top: 50%;
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
     user-select: none;
     transition: 300ms; /* Velocidad de animacion */
     cursor: pointer; /* Pone el dedito */
@@ -61,11 +65,13 @@ img {
     -o-transition: 300ms;
 }
 
-#marshmallow:hover { /* Cuando se pasa mouse por arriba */
+#marshmallow:hover {
+    /* Cuando se pasa mouse por arriba */
     width: 150px;
 }
 
-#marshmallow:active { /* Cuando se hace clic */
+#marshmallow:active {
+    /* Cuando se hace clic */
     transition: 10ms;
     width: 140px;
     -webkit-transition: 10ms;
@@ -74,17 +80,61 @@ img {
     -o-transition: 10ms;
 }
 
+#textoContador {
+    color: #0ff;
+}
+
+.espacio-generador {
+    width: 100%;
+    gap: 1em;
+    display: flex;
+}
+
+.espacio-generador > *:nth-child(2) {
+    flex-grow: 1;
+}
 
-.imagenProducto{
+.imagenProducto {
     height: 80px;
     width: 80px;
+    border-style: solid;
+    border-width: 2px;
+    border-radius: 1em;
+    -webkit-border-radius: 1em;
+    -moz-border-radius: 1em;
+    -ms-border-radius: 1em;
+    -o-border-radius: 1em;
 }
 footer * {
-    float:left;
+    float: left;
     text-decoration: none;
     box-sizing: border-box;
 }
 footer *:hover {
-    color:red;
+    color: red;
 }
 
+button {
+    transition: 300ms;
+    border-radius: 0.5em;
+    padding: 0.5em;
+    -webkit-border-radius: 0.5em;
+    -moz-border-radius: 0.5em;
+    -ms-border-radius: 0.5em;
+    -o-border-radius: 0.5em;
+    -webkit-transition: 300ms;
+    -moz-transition: 300ms;
+    -ms-transition: 300ms;
+    -o-transition: 300ms;
+
+    border-color: darkgreen;
+    color: darkgreen;
+}
+
+button:hover {
+    background-color: greenyellow;
+}
+
+button:active {
+    background-color: green;
+}