Rafael Tavares Juliani 5fbf08693c INÍCIO
2025-09-04 15:53:18 -03:00

354 lines
7.1 KiB
CSS
Executable File

@keyframes pulsar_animacao {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.pulsar {
animation: pulsar_animacao 1s infinite;
}
#container_pdf_jm {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(142,249,243);
background: linear-gradient(168deg, rgba(142,249,243,1) 29%, rgba(131,119,209,1) 94%);
padding: 3px;
height: 100vh;
box-sizing: border-box;
position: fixed;
overflow-y: auto;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: white;
text-shadow: 1px 0px black;
display: none;
z-index: 9999;
}
.tela_inicial_pdf_jm {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 100%;
height: 50%;
color: rgba(131,119,209,1);
text-shadow: 0 0 white;
}
.tela_inicial_pdf_jm div {
margin: 5px 0;
}
.tela_inicial_pdf_jm h3 {
font-size: 2rem;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
margin-top: 0;
}
div#entrar_nomes_pdf_jm input {
border: none;
border-radius: 5px;
padding: 10px;
font-size: 14px;
margin: 3px 0;
}
div#entrar_nomes_pdf_jm input::placeholder {
font-size: 11px;
margin: 3px 0;
}
.iniciar_pdf_jm, .som_pdf_jm, .fechar_pdf_jm, .jogo_da_memoria_pdf_jm {
color: white;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
border-radius: 3px;
margin: 3px;
border: none;
padding: 3px 5px;
cursor: pointer;
}
.iniciar_pdf_jm, .jogo_da_memoria_pdf_jm {
background-color: #00c0ff;
text-align: center;
}
.jogo_da_memoria_pdf_jm{
display: block;
margin: 3px auto;
padding: 5px 20px;
}
.som_pdf_jm {
background-color: #2196f3;
}
.fechar_pdf_jm {
background-color: #f44336;
}
.iniciar_pdf_jm:hover, .jogo_da_memoria_pdf_jm:hover {
background-color: #FFB400;
}
.som_pdf_jm:hover {
background-color: #73bcf7;
}
.som_desativado_pdf_jm {
background-color: #dfdfdf;
}
.fechar_pdf_jm:hover {
background-color: #ff6c61;
}
#info_pdf_jm {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 28px;
padding: 3px 5px;
border-radius: 5px;
background-color: #c6c9cf;
box-sizing: border-box;
margin: 5px 0;
visibility: hidden;
opacity:0;
transition: opacity 0.3s linear;
}
#info_pdf_jm div {
margin: auto;
}
#jogador1_pdf_jm, #jogador2_pdf_jm {display: flex; align-items: center;}
#container_cartas_pdf_jm {
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
visibility: hidden;
opacity:0;
transition:opacity 0.3s linear;
}
.carta_pdf_jm {
position: relative;
min-width: 55px;
min-height: 70px;
width: 8vw;
height: 27vh;
perspective: 1000px;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
margin: 3px;
color: #444;
text-shadow: none;
font-weight: 400;
}
.carta_interior_pdf_jm {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
border-radius: 3px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.carta_interior_pdf_jm button.fechar_pdf_jm {
position: absolute;
z-index: 3000;
left: 0;
right: 0;
top: -8px;
width: 14px;
height: 14px;
font-size: 7px;
margin: auto;
display: none;
text-align: center;
padding: 0;
}
.virada_pdf_jm {
transform: rotateY(180deg);
}
.frente_pdf_jm, .verso_pdf_jm {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
padding: 7px;
box-sizing: border-box;
overflow-y: auto;
border-radius: 3px;
display: flex;
align-items: center;
}
.verso_pdf_jm span{
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
.frente_pdf_jm {
background-image: url('https://livro.online/wp-content/uploads/2022/02/LogoRegistroAlpha.svg');
background-repeat: no-repeat;
background-color: #444;
background-position: center;
background-size:contain;
}
.verso_pdf_jm {
transform: rotateY(180deg);
background-color: antiquewhite;
}
.verso_pdf_jm span {
margin: auto;
word-wrap: break-word;
overflow-wrap: break-word;
}
@media only screen and (max-width: 500px) {
.carta_pdf_jm {
font-size: 0.6em;
}
}
/* Estilo da scrollbar das cartas*/
.verso_pdf_jm::-webkit-scrollbar {
width: 5px; /* largura */
height: 10px; /* altura */
}
/* Cor da barra de rolagem */
.verso_pdf_jm::-webkit-scrollbar-thumb {
background-color: #999;
}
/* Cor da alça da barra de rolagem */
.verso_pdf_jm::-webkit-scrollbar-track {
background-color: #fff;
}
.nome_pdf_jm {
display:block;
margin-right: 3px;
text-align: right;
width: 23vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pontuacao_pdf_jm {display:inline-block;}
.disponivel_pdf_jm {
cursor: grabbing; /* Essa classe defini se podemos virar ou não uma carta. O código javascript leva ela em conta */
}
.tela_final_pdf_jm {
position: absolute;
display: none;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 300px;
height: 200px;
box-sizing: border-box;
padding: 5px 15px;
color: #444;
border-radius: 6px;
box-shadow: 2px 1px 15px 7px #5c5f62;
background-color: antiquewhite;
font-weight: 500;
text-shadow: none;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
z-index: 2000;
}
.tela_final_pdf_jm button {
border-radius: 6px;
box-sizing: border-box;
padding: 10px 15px;
color: #fff;
font-weight: bold;
background-color: #f44336;
cursor: pointer;
border: none;
margin: 10px;
}
.tela_final_pdf_jm button:hover {
background-color: #ff6c61;
}