1243 lines
25 KiB
CSS
Executable File
1243 lines
25 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;
|
|
}
|
|
|
|
|
|
|
|
/********************************************* Jogo Percurso das Frações *******************************************/
|
|
|
|
|
|
|
|
|
|
.btn_pf {
|
|
|
|
background-color: #00c0ff;
|
|
color: #fff;
|
|
padding: 8px 10px;
|
|
border: none;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
display: block;
|
|
margin: 8px auto;
|
|
|
|
}
|
|
|
|
.btn_pf:hover {
|
|
|
|
background-color: #FFB400;
|
|
|
|
}
|
|
|
|
.jogo_ativo_pf {
|
|
|
|
background-color: #d70f00;
|
|
|
|
}
|
|
|
|
.jogo_ativo_pf:hover {
|
|
|
|
background-color: #e94d42;
|
|
|
|
}
|
|
|
|
|
|
#tela_inicial_pf {
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
display: none;
|
|
opacity: 0;
|
|
transition: opacity 1s ease-in-out;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
color: #fff;
|
|
background: rgb(177,206,52);
|
|
background: linear-gradient(0deg, rgba(177,206,52,1) 1%, rgba(255,108,97,1) 50%);
|
|
padding: 20px 3px;
|
|
box-sizing: border-box;
|
|
flex-wrap: wrap;
|
|
|
|
}
|
|
|
|
#tela_inicial_pf button {
|
|
color: #fff;
|
|
background-color: rgb(255, 108, 97);
|
|
font-weight: bold;
|
|
font-size: 1.3rem;
|
|
border-radius: 5px;
|
|
padding: 5px;
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
|
|
#tela_inicial_pf button:hover {
|
|
background-color: rgb(255, 121, 111);
|
|
}
|
|
|
|
#numJogadores_pf {
|
|
|
|
border: 1px #fff solid;
|
|
background-color: #444;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
#info_inicial_jogadores_pf {
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
margin: 25px 0;
|
|
|
|
}
|
|
|
|
|
|
.jogador_div_pf {
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 3px;
|
|
margin: 10px;
|
|
border: #fff 1px solid;
|
|
border-radius: 20px;
|
|
|
|
}
|
|
|
|
.jogador_div_pf div {
|
|
margin: 3px 0 10px 0;
|
|
font-weight: bold;;
|
|
}
|
|
|
|
.jogador_div_pf input {
|
|
width: 85%;
|
|
border: none;
|
|
border-radius: 2px;
|
|
|
|
}
|
|
|
|
.jogador_div_pf span {
|
|
font-size: 0.7rem;
|
|
margin-top: 3px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#jogador_3_pf, #jogador_4_pf, #jogador_5_pf, #jogador_6_pf, #jogador_7_pf, #jogador_8_pf {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
.peca_pf, .peca_amostra_pf {
|
|
font-size: 25px;
|
|
width: 23px;
|
|
height: 28px;
|
|
text-shadow: 0 1px 1px #fff;
|
|
z-index: 10;
|
|
color: #000;
|
|
}
|
|
|
|
.peca_pf {
|
|
display: none;
|
|
}
|
|
|
|
|
|
.peao_solido_pf::before {
|
|
content: "♟";
|
|
}
|
|
|
|
.bispo_solido_pf::before {
|
|
content: "♝";
|
|
}
|
|
|
|
.cavalo_solido_pf::before {
|
|
content: "♞";
|
|
}
|
|
|
|
.torre_solida_pf::before {
|
|
content: "♜";
|
|
}
|
|
.peao_vazado_pf::before {
|
|
content: "♙";
|
|
}
|
|
|
|
.bispo_vazado_pf::before {
|
|
content: "♗";
|
|
}
|
|
|
|
.cavalo_vazado_pf::before {
|
|
content: "♘";
|
|
}
|
|
|
|
.torre_vazada_pf::before {
|
|
content: "♖";
|
|
}
|
|
|
|
#info_pf {
|
|
display: none;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
background-color: #dfdfdf;
|
|
border-radius: 5px;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 40;
|
|
box-shadow: 2px 2px 5px #777;
|
|
}
|
|
|
|
.som_pf {
|
|
|
|
color: white;
|
|
font-weight: bold;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
border-radius: 3px;
|
|
margin: 3px;
|
|
border: none;
|
|
padding: 3px 5px;
|
|
cursor: pointer;
|
|
box-shadow: 2px 2px 1px #777;
|
|
|
|
}
|
|
|
|
.som_pf {
|
|
background-color: #2196f3;
|
|
|
|
}
|
|
|
|
.som_pf:hover {
|
|
|
|
background-color: #73bcf7;
|
|
box-shadow: -2px -2px 1px #777;
|
|
|
|
}
|
|
|
|
|
|
.som_desativado_pf {
|
|
background-color: #dfdfdf;
|
|
}
|
|
|
|
.vez_el_pf {
|
|
margin: 3px 8px;
|
|
color: #000;
|
|
}
|
|
|
|
@keyframes anim_pulsar_pf {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.9);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.pulsar_pf {
|
|
animation: anim_pulsar_pf 1s infinite;
|
|
}
|
|
|
|
|
|
.tabuleiro_pf{
|
|
|
|
display: none;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
box-sizing: border-box;
|
|
background-color: cornflowerblue;
|
|
padding: 70px 3px;
|
|
border-radius: 3px;
|
|
opacity: 0;
|
|
transition: all .5s ease-in-out;
|
|
|
|
}
|
|
|
|
.tabuleiro_item_pf{
|
|
|
|
|
|
min-height: 120px;
|
|
min-width: 50px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: space-between;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
.casa_pf {
|
|
|
|
position: relative;
|
|
border: 2px solid #fff;
|
|
padding: 2px;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.numero_casa_pf {
|
|
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: #fff;
|
|
font-weight: bold;
|
|
font-size: 1.9rem;
|
|
|
|
}
|
|
|
|
#c_34_pf {
|
|
|
|
background: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%),
|
|
linear-gradient(-45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%);
|
|
background-size: 20px 20px;
|
|
background-color: #999;
|
|
|
|
}
|
|
|
|
|
|
#janela_definicao_ordem_pf, #janela_de_jogadas_pf {
|
|
|
|
position: fixed;
|
|
display: none;
|
|
margin: 20px auto 35px auto;
|
|
box-sizing: border-box;
|
|
padding: 40px;
|
|
max-width: 800px;
|
|
min-width: 275px;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 91%;
|
|
max-height: 90vh;
|
|
height: 650px;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background-color: #444;
|
|
color: #fff;
|
|
box-shadow: 2px 2px 5px #777;
|
|
z-index: 50;
|
|
overflow: auto;
|
|
border-radius: 10px;
|
|
transition: opacity 0.7s ease-in-out;
|
|
|
|
}
|
|
|
|
#janela_definicao_ordem_pf h3 {
|
|
color: #fff;
|
|
}
|
|
|
|
.el_pergunta_pf {
|
|
|
|
width: 95%;
|
|
box-sizing: border-box;
|
|
padding: 2px 10px 15px 10px;
|
|
margin: 30px auto;
|
|
background-color: antiquewhite;
|
|
border-radius: 3px;
|
|
color: #444;
|
|
font-weight: 300;
|
|
|
|
}
|
|
|
|
.numerador_pf, .denominador_pf, .el_resp_pf {
|
|
|
|
border: 1px solid #444;
|
|
background-color: #fff;
|
|
cursor: text;
|
|
width: 60px;
|
|
text-align: center;
|
|
margin: 0 27px;
|
|
|
|
}
|
|
|
|
.bt_responder_pf {
|
|
|
|
border: none;
|
|
background-color: rgb(4, 189, 236);
|
|
color: #fff;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
padding: 5px 15px;
|
|
font-size: small;
|
|
|
|
}
|
|
|
|
.bt_responder_pf:hover {
|
|
|
|
background-color: rgb(65, 202, 236);
|
|
|
|
|
|
}
|
|
|
|
|
|
.msg_sorteio_ordem {
|
|
padding: 10px;
|
|
background-color: #73bcf7;
|
|
border-radius: 5px;
|
|
margin: 10px;
|
|
transition: opacity .3s ease-in-out;
|
|
}
|
|
|
|
|
|
.dado_pf-container {
|
|
perspective: 800px;
|
|
width: 210px;
|
|
height: 210px;
|
|
margin: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.dado_pf {
|
|
width: 100px;
|
|
height: 100px;
|
|
position: relative;
|
|
top: 20px;
|
|
left: 5px;
|
|
transform-style: preserve-3d;
|
|
transition: transform 1s ease-in-out;
|
|
transform: rotateX(-14deg) rotateY(195deg) rotateZ(-30deg);
|
|
cursor: grab;
|
|
}
|
|
|
|
.dado_pf-face {
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 100px;
|
|
border: 1px solid #eae7dd;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
font-size: 24px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 3px 1px #ece4d9;
|
|
color:#000;
|
|
text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.95);
|
|
background: rgb(242,237,219);
|
|
background: linear-gradient(78deg, rgba(242,237,219,1) 27%, rgba(223,218,201,1) 64%);
|
|
}
|
|
|
|
.dado_pf-face div.linha {
|
|
width: 100%;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
div.linha div {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.front {
|
|
transform: translateZ(50px);
|
|
}
|
|
|
|
.back {
|
|
transform: translateZ(-50px) rotateY(180deg);
|
|
}
|
|
|
|
.right {
|
|
transform: translateX(50px) rotateY(90deg);
|
|
}
|
|
|
|
.left {
|
|
transform: translateX(-50px) rotateY(-90deg);
|
|
}
|
|
|
|
.top {
|
|
transform: translateY(-50px) rotateX(90deg);
|
|
}
|
|
|
|
.bottom {
|
|
transform: translateY(50px) rotateX(-90deg);
|
|
}
|
|
|
|
#rolar_dado_pf {
|
|
margin: 30px 20px;
|
|
}
|
|
|
|
.mostrar_face_1 {
|
|
transform: rotateX(2deg) rotateY(-5deg);
|
|
}
|
|
.mostrar_face_2 {
|
|
transform: rotateX(-821deg) rotateY(715deg);
|
|
}
|
|
.mostrar_face_3 {
|
|
transform: rotateX(-362deg) rotateY(-458deg);
|
|
}
|
|
.mostrar_face_4 {
|
|
transform: rotateX(369deg) rotateY(444deg);
|
|
}
|
|
.mostrar_face_5 {
|
|
transform: rotateX(813deg) rotateZ(-371deg);
|
|
}
|
|
.mostrar_face_6 {
|
|
transform: rotateX(1623deg) rotateY(1448deg);
|
|
}
|
|
|
|
|
|
|
|
.dado_8_pf-container {
|
|
perspective: 400px;
|
|
width: 210px;
|
|
height: 210px;
|
|
margin: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.dado_8_pf {
|
|
width: 100px;
|
|
height: 200px;
|
|
position: relative;
|
|
top: 20px;
|
|
left: 5px;
|
|
transform-style: preserve-3d;
|
|
transition: transform 1s ease-in-out;
|
|
transform: rotateX(-14deg) rotateY(228deg);
|
|
cursor: grab;
|
|
}
|
|
|
|
.dado_8_pf-face {
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 50px solid transparent;
|
|
border-right: 50px solid transparent;
|
|
border-bottom: 100px solid #F0AB01; /* Cor e tamanho do triângulo */
|
|
position: absolute;
|
|
font-size: 24px;
|
|
border-radius: 6px;
|
|
|
|
}
|
|
|
|
.dado_8_pf-face span {
|
|
text-shadow: 0px 1px 3px rgb(0 0 0 / 95%);
|
|
color: #fff;
|
|
font-weight: bold;
|
|
position: absolute;
|
|
top: 65px;
|
|
left: -8px;
|
|
transform: translate(-50%, -50%);
|
|
text-align: center;
|
|
width: 100%; /* Definindo a largura do texto para ocupar todo o espaço */
|
|
line-height: 100px;
|
|
|
|
}
|
|
|
|
.superior_pf, .inferior_pf {
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.inferior_pf {
|
|
transform-origin: center center;
|
|
transform: rotateX(180deg) translateY(-200px) translateZ(100px);
|
|
}
|
|
|
|
.face_1_d8, .face_2_d8 {
|
|
transform-origin: center bottom;
|
|
transform: rotateX(30deg);
|
|
}
|
|
|
|
.face_3_d8, .face_8_d8 {
|
|
transform-origin: right bottom;
|
|
transform: translateZ(-100px) rotateY(90deg) rotateX(30deg);
|
|
}
|
|
|
|
.face_4_d8, .face_7_d8 {
|
|
transform-origin: left bottom;
|
|
transform: translateZ(-100px) rotateY(-90deg) rotateX(30deg);
|
|
|
|
}
|
|
|
|
.face_5_d8, .face_6_d8 {
|
|
transform-origin: center bottom;
|
|
transform: translateZ(-100px) rotateY(180deg) rotateX(30deg);
|
|
}
|
|
|
|
|
|
#rolar_dado_8_pf {
|
|
margin: 30px 20px;
|
|
}
|
|
|
|
.mostrar_face_1_d8{
|
|
transform: rotateX(0deg) rotateY(-2deg);
|
|
}
|
|
.mostrar_face_2_d8 {
|
|
transform: rotateX(162deg) rotateY(7deg);
|
|
}
|
|
.mostrar_face_3_d8 {
|
|
transform: rotateX(463deg) rotateY(442deg) rotateZ(404deg);
|
|
}
|
|
.mostrar_face_4_d8 {
|
|
transform: rotateX(369deg) rotateY(444deg);
|
|
}
|
|
.mostrar_face_5_d8 {
|
|
transform: rotateX(1242deg) rotateY(338deg) rotateZ(1292deg);
|
|
}
|
|
.mostrar_face_6_d8 {
|
|
transform: rotateX(888deg) rotateY(903deg) rotateZ(755deg);
|
|
}
|
|
.mostrar_face_7_d8 {
|
|
transform: rotateX(2505deg) rotateY(2428deg) rotateZ(2719deg);
|
|
}
|
|
.mostrar_face_8_d8 {
|
|
transform: rotateX(1898deg) rotateY(1724deg) rotateZ(1550deg);
|
|
}
|
|
|
|
|
|
|
|
|
|
/************************************************* FIM Jogo Percurso das Frações **************************************/
|
|
|
|
|
|
|
|
/********************************************* Jogo Card das Frações *******************************************/
|
|
|
|
|
|
.botao-jogo-cf {
|
|
background-color: #00c0ff;
|
|
color: #fff;
|
|
padding: 8px 10px;
|
|
border: none;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
margin: 8px auto;
|
|
display: block;
|
|
}
|
|
|
|
.botao-jogo-cf:hover {
|
|
|
|
background-color: #FFB400;
|
|
|
|
}
|
|
|
|
.btn_ativo_cf {
|
|
|
|
background-color: #d70f00;
|
|
|
|
}
|
|
|
|
.btn_ativo_cf:hover {
|
|
|
|
background-color: #e94d42;
|
|
|
|
}
|
|
|
|
#container_cf {
|
|
|
|
background-color: #61d2ff;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
width: 100%;
|
|
border-radius: 5px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
|
|
.bt_pular_cf, .bt_corrigir_cf, .falar_el_cf, .som_el_cf {
|
|
|
|
color: #2a90ea;
|
|
border: none;
|
|
border-radius: 5px;
|
|
font-size: 25px;
|
|
width: 50px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
padding: 5px;
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
.bt_pular_cf:hover, .bt_corrigir_cf:hover, .falar_el_cf:hover, .som_el_cf:hover {
|
|
background-color: #73bcf7;
|
|
}
|
|
|
|
|
|
.bt_desativado_cf, .bt_desativado_cf:hover {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
color: #999;
|
|
cursor: auto;
|
|
}
|
|
|
|
.som_desativado_cf {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
|
|
@keyframes deslizarParaEsquerda_anim_cf {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
transform: translateX(-110%);
|
|
}
|
|
}
|
|
|
|
@keyframes deslizarParaDireita_anim_cf {
|
|
0% {
|
|
transform: translateX(-110%);
|
|
}
|
|
100% {
|
|
transform: translateX(0%);
|
|
}
|
|
}
|
|
|
|
.deslizarParaEsquerda_cf {
|
|
|
|
animation: deslizarParaEsquerda_anim_cf 0.7s ease-in-out forwards;
|
|
|
|
}
|
|
|
|
.deslizarParaDireita_cf {
|
|
|
|
animation: deslizarParaDireita_anim_cf 0.7s ease-in-out forwards;
|
|
|
|
}
|
|
|
|
|
|
#container_jogo_cf {
|
|
|
|
display: none;
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
|
|
|
|
.container_tela_inicial_cf {
|
|
text-align: center;
|
|
opacity: 0;
|
|
transition: opacity .3s ease-in-out;
|
|
background: rgb(97,210,255);
|
|
background: linear-gradient(0deg, rgba(97,210,255,1) 14%, rgba(255,108,97,1) 80%);
|
|
color: #fff;
|
|
padding: 25px 10px;
|
|
}
|
|
|
|
.container_tela_inicial_cf h2 {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.grupo_cf {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.grupo_cf > div {
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.container_tela_inicial_cf input[type="text"] {
|
|
padding: 5px;
|
|
width: 200px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
button.bt_iniciar_cf {
|
|
background-color: green;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
border: none;
|
|
font-weight: bolder;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button.bt_iniciar_cf:hover{
|
|
|
|
background-color: rgb(25, 172, 25);
|
|
|
|
}
|
|
|
|
|
|
|
|
.trilha_dos_cards_cf{
|
|
|
|
overflow: hidden;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
gap: 20px;
|
|
|
|
}
|
|
|
|
|
|
.card_papel_cf {
|
|
|
|
box-sizing: border-box;
|
|
background-color: transparent;
|
|
perspective: 5000px;
|
|
width: 100%;
|
|
max-width: 767px;
|
|
flex: 0 0 auto;
|
|
|
|
}
|
|
|
|
.card_interior_cf {
|
|
|
|
position: relative;
|
|
border: none;
|
|
padding: 0;
|
|
font-family: Arial, sans-serif;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 2px;
|
|
background-color: #f2f2f2;
|
|
box-shadow: 2px 2px 5px #999;
|
|
box-sizing: border-box;
|
|
transition: transform 0.6s;
|
|
transform-style: preserve-3d;
|
|
|
|
}
|
|
|
|
.container_linhas_cf {
|
|
|
|
position: relative;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-top: 40px;
|
|
padding-bottom: 10px;
|
|
|
|
}
|
|
|
|
|
|
.linha_cf {
|
|
width: 100%;
|
|
height: 20px;
|
|
background-image: repeating-linear-gradient(to bottom, transparent, transparent 10px, #2390f7 10px, #2377f5 11px);
|
|
background-size: 100% 20px;
|
|
margin-bottom: 10px;
|
|
opacity: 0.13;
|
|
transition: opacity .6s;
|
|
}
|
|
|
|
.primeira-linha_cf {
|
|
|
|
background-image: repeating-linear-gradient(to bottom, transparent, transparent 10px, #f33535 10px, #e01414 11px);
|
|
|
|
}
|
|
|
|
.papel_overlay_cf {
|
|
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
opacity: 0.13;
|
|
background-color: aliceblue;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
.card_papel_cf.virado_cf .card_interior_cf {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.card_papel_cf.virado_cf .linha_cf{
|
|
opacity: 0.1;
|
|
}
|
|
|
|
.frente_cf, .verso_cf {
|
|
|
|
position: absolute;
|
|
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
backface-visibility: hidden;
|
|
-webkit-backface-visibility: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
padding: 15px;
|
|
font-size: 1.3rem;
|
|
transform-style: preserve-3d;
|
|
overflow: auto;
|
|
|
|
}
|
|
|
|
.verso_cf {transform: rotateY(180deg);}
|
|
|
|
.numerador_cf, .denominador_cf {
|
|
|
|
border: 1px solid #777;
|
|
background-color: #fff;
|
|
cursor: text;
|
|
width: 60px;
|
|
text-align: center;
|
|
margin: 0 27px;
|
|
|
|
}
|
|
|
|
|
|
/********************************************* FIM Jogo Card das Frações *******************************************/
|
|
|