diff --git a/src/components/carta.vue b/src/components/carta.vue
index e230cff..8e85a02 100644
--- a/src/components/carta.vue
+++ b/src/components/carta.vue
@@ -179,13 +179,8 @@ export default defineComponent({
.cont-carta
margin-left: 1px
-.c-carta-resaltada
- transform: translateY(calc(var(--phx) * -1))
- filter: saturate(1.75) !important
- opacity: 1 !important
.c-carta
- opacity: 0.95
position: relative
font:
size: calc(var(--phx) * 4 * var(--escala))
@@ -218,7 +213,7 @@ export default defineComponent({
top: -95%
width: 100%
height: 100%
- background-image: linear-gradient(135deg, rgba(210, 210, 210, 0.0) 0%, rgba(210, 210, 210, 0.0) 45%, rgba(210, 210, 210, 0.3) 55%, rgba(210, 210, 210, 0.9) 63%, rgba(210, 210, 210, 0.3) 67%, rgba(210, 210, 210, 0.0) 75%, rgba(210, 210, 210, 0.0) 100%)
+ background-image: linear-gradient(135deg, rgba(169, 169, 169, 0.0) 0%, rgba(169, 169, 169, 0.0) 45%, rgba(169, 169, 169, 0.3) 55%, rgba(169, 169, 169, 0.9) 63%, rgba(169, 169, 169, 0.3) 67%, rgba(169, 169, 169, 0.0) 75%, rgba(169, 169, 169, 0.0) 100%)
transition: transform 1000ms
animation-duration: 4s
animation-name: brillocarta
@@ -274,26 +269,47 @@ export default defineComponent({
background-color: var(--color-fondo)
color: var(--color-texto)
+.carta-cNegro.c-carta-resaltada
+ background-color: var(--color-fondo-resaltado-carta-negra) !important
+
.carta-cRojo
background-color: var(--color-fondo-carta-roja)
color: var(--color-texto-carta-roja)
+.carta-cRojo.c-carta-resaltada
+ background-color: var(--color-fondo-resaltado-carta-roja) !important
+
.carta-cReyes
background-color: var(--color-fondo-reyes)
color: var(--color-texto-reyes)
+.carta-cReyes.c-carta-resaltada
+ background-color: var(--color-fondo-resaltado-reyes) !important
+
.carta-dNegro
background-color: var(--color-fondo)
+.carta-dNegro.c-carta-resaltada
+ background-color: var(--color-fondo-resaltado-carta-negra) !important
+
.carta-dRojo
background-color: var(--color-fondo-dragon-rojo)
+.carta-dRojo.c-carta-resaltada
+ background-color: var(--color-fondo-resaltado-dragon-rojo) !important
+
.carta-dVerde
background-color: var(--color-fondo-dragon-verde)
+.carta-dVerde.c-carta-resaltada
+ background-color: var(--color-fondo-resaltado-dragon-verde) !important
+
.carta-dAzul
background-color: var(--color-fondo-dragon-azul)
+.carta-dAzul.c-carta-resaltada
+ background-color: var(--color-fondo-resaltado-dragon-azul) !important
+
.carta-
opacity: 0
diff --git a/src/styles/global.sass b/src/styles/global.sass
index 0965469..e934bc8 100644
--- a/src/styles/global.sass
+++ b/src/styles/global.sass
@@ -4,8 +4,7 @@ body
color: var(--color-texto)
margin: 0
-// Claro
-.tema-automatico
+@mixin tema-claro
--color-fondo: #ffffff
--color-texto: #151515
--color-fondo-transparente: rgba(255, 255, 255, 0.8)
@@ -18,26 +17,17 @@ body
--color-fondo-reyes: #ffffff
--color-texto-reyes: #2E7D32
- --color-mesa-1: #E3F2FD
- --color-mesa-2: #90CAF9
-
-.tema-claro
- --color-fondo: #ffffff
- --color-texto: #151515
- --color-fondo-transparente: rgba(255, 255, 255, 0.8)
- --color-borde: gray
- --color-texto-carta-roja: #b71c1c
- --color-fondo-carta-roja: #ffffff
- --color-fondo-dragon-rojo: #ffffff
- --color-fondo-dragon-verde: #ffffff
- --color-fondo-dragon-azul: #ffffff
- --color-fondo-reyes: #ffffff
- --color-texto-reyes: #2E7D32
+ --color-fondo-resaltado-carta-roja: #64B5F6
+ --color-fondo-resaltado-carta-negra: #64B5F6
+ --color-fondo-resaltado-dragon-rojo: #64B5F6
+ --color-fondo-resaltado-dragon-verde: #64B5F6
+ --color-fondo-resaltado-dragon-azul: #64B5F6
+ --color-fondo-resaltado-reyes: #64B5F6
--color-mesa-1: #E3F2FD
--color-mesa-2: #90CAF9
-.tema-oscuro
+@mixin tema-oscuro
--color-fondo: #151515
--color-texto: #dedede
--color-fondo-transparente: rgba(21, 21, 21, 0.85)
@@ -50,22 +40,26 @@ body
--color-fondo-reyes: #2E7D32
--color-texto-reyes: #ffffff
+ --color-fondo-resaltado-carta-roja: #e57373
+ --color-fondo-resaltado-carta-negra: #757575
+ --color-fondo-resaltado-dragon-rojo: #e57373
+ --color-fondo-resaltado-dragon-verde: #66BB6A
+ --color-fondo-resaltado-dragon-azul: #29B6F6
+ --color-fondo-resaltado-reyes: #66BB6A
+
--color-mesa-1: #004D40
--color-mesa-2: #003027
+// Claro
+.tema-claro
+ @include tema-claro
+
+.tema-oscuro
+ @include tema-oscuro
+
+.tema-automatico
+ @include tema-claro
+
@media (prefers-color-scheme: dark)
.tema-automatico
- --color-fondo: #151515
- --color-texto: #dedede
- --color-fondo-transparente: rgba(21, 21, 21, 0.85)
- --color-borde: #c1c1c1
- --color-texto-carta-roja: #dedede
- --color-fondo-carta-roja: #b71c1c
- --color-fondo-dragon-rojo: #b71c1c
- --color-fondo-dragon-verde: #2E7D32
- --color-fondo-dragon-azul: #1565C0
- --color-fondo-reyes: #2E7D32
- --color-texto-reyes: #ffffff
-
- --color-mesa-1: #004D40
- --color-mesa-2: #003027
+ @include tema-oscuro
diff --git a/src/views/Juego/components/pantalla-empate.vue b/src/views/Juego/components/pantalla-empate.vue
index 3852cf5..b708f7d 100644
--- a/src/views/Juego/components/pantalla-empate.vue
+++ b/src/views/Juego/components/pantalla-empate.vue
@@ -1,10 +1,10 @@
- div.contenedor-pantalla-empate
- h1 Empate
- hr
- router-link(to="/") Ir al inicio
+div.contenedor-pantalla-empate
+ h1 Empate
+ hr
+ router-link(to="/") Ir al inicio
- //
+//