Mejorar indicador de mismas cartas
Araozu
parent
28eecd6d15
commit
dfdea0df66
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue