Обрати сторінку

/* ----------------------------------------- */ /* Шаблон вмісту: Множення-6-10 – початок */ /* ----------------------------------------- */ .copylink input[type=text] { width: 30%; } .postid-5772 #main-header { display: none; } .postid-5772 .copyright { display: none; } .postid-5772 #et-main-area { position: relative; margin-left: 0px !important; } .mathleft { width: 320px; height: 600px; } .mathright { width: 320px; height: 600px; } @media only screen and (min-device-width : 1025px) and (max-device-width : 1315px){ #quizSection { grid-area: quizSection; min-width: 425px; } .mathleft {min-width: 200px; max-width:320px !important; width: 100%; height: 600px; } .mathright {min-width: 200px; max-width:320px !important; width: 100%; height: 600px; } #choices { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "box1 box2" "box3 box4"; grid-area: choices; grid-column-gap: 10px; grid-row-gap: 10px; } .box { /* border: 1px solid;*/ width: 100%; min-height: 60px; background-color: white; /* float: left;*/ /* margin-right: 24px;*/ border-radius: 5px; font-weight: bold; cursor: pointer; box-shadow: 0px 4px rgb(0,0,0,0.2); -moz-box-shadow: 0px 4px rgb(0,0,0,0.2); -webkit-box-shadow: 0px 4px rgb(0,0,0,0.2); text-align: center; color: #000033; line-height: 1em; font-size: 3em; position: relative; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; } } /*--------------------------------*/ #full-container { display: grid; grid-template-columns: 0.7fr 1.4fr 0.7fr; grid-template-rows: 1fr auto; grid-template-areas: "mathleft quizSection mathright" ". blockout ."; } .blockout { grid-area: blockout; } #instruction { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "choice" "wrong" "correct"; grid-area: instruction; justify-items: center; width: 100%; height: 50px; background-color: #FFFFCC; margin: 10px auto; text-align: center; line-height: 45px; box-shadow: 0px 4px #8153a8; -webkit-box-shadow: 0px 4px #8153a8; -moz-box-shadow: 0px 4px #8153a8; } .mathleft { grid-area: mathleft;} .math-left,.math-right { place-self: center; } .quizSection { grid-area: quizSection; } .mathright { grid-area: mathright; } #quizSection { grid-area: quizSection; } #mth-grid-container { display: grid; grid-template-columns: 1fr; grid-template-rows: 0.4fr 2.4fr 0.4fr 1.2fr 0.6fr; grid-template-areas: "maintitle" "question" "instruction" "choices" "mainres"; height: auto; width: auto; grid-row-gap: 10px; background-color: #99CCFF; padding: 20px; font-family: Comfortaa, sans-serif; border-radius: 10px; box-shadow: 4px 4px 0px 0px #009de4; -webkit-box-shadow: 4px 4px 0px 0px #009de4; -moz-box-shadow: 4px 4px 0px 0px #009de4; } .maintitle { grid-area: maintitle; } .maintitle h3 {margin-bottom: 0px;} #question { grid-area: question; width: 100%; min-height: 310px; background-color: #eae2f0; box-shadow: 0 4px #535aa8; -moz-box-shadow: 0 4px #535aa8; -webkit-box-shadow: 0 4px #535aa8; font-size: 11em; font-family: cursive, sans-serif; text-align: center; color: #000033; display: flex; align-items: center; justify-content: center; } #choice { grid-area: choice; font-size: 1.3em;} #wrong { grid-area: wrong; } #correct { grid-area: correct; } #choices { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr; grid-template-areas: "box1 box2 box3 box4"; grid-area: choices; grid-column-gap: 20px; } #box1 { grid-area: box1; display: flex; align-items: center; justify-content: center; } #box2 { grid-area: box2; display: flex; align-items: center; justify-content: center; } #box3 { grid-area: box3; display: flex; align-items: center; justify-content: center; } #box4 { grid-area: box4; display: flex; align-items: center; justify-content: center; } .mainres { display: grid; grid-template-columns: 0.9fr 1.2fr 0.9fr; grid-template-rows: 1fr; grid-template-areas: "timeremaining startreset score"; grid-area: mainres; } #timeremaining { grid-area: timeremaining; display:flex !important; align-items: center; justify-content: center;} #score { grid-area: score; display: flex; align-items: center; justify-content: center; color: #330066; font-weight: bold; font-size: 1.2em;} #startreset { grid-area: startreset; width: 80%; padding: 10px; background-color: rgba(255, 255, 255, 0.5); margin: 12px auto; border-radius: 3px; font-size: 1.2em; text-transform: uppercase; cursor: pointer; /*box-shadow: 0px 4px rgba(0,0,0,0.2); -o-box-shadow: 0px 4px rgba(0,0,0,0.2); -ms-box-shadow: 0px 4px rgba(0,0,0,0.2); -moz-box-shadow: 0px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 4px rgba(0,0,0,0.2);*/ text-align: center; position: relative; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; } .title{ font-size: 2em; line-height: 1.3em; font-weight: bold; font-family: cursive, sans-serif; text-align: center; color: #003399; } h3{ text-align: center; color: #333366; } #correct{ font-size: 1.3em; font-weight: bold; color: #006600; display: none; z-index: 50; } #wrong{ font-size: 1.3em; font-weight: bold; color: #de481a; display: none; z-index: 50; } .box { /* border: 1px solid;*/ width: 100%; height: 100%; background-color: white; /* float: left;*/ /* margin-right: 24px;*/ border-radius: 5px; font-weight: bold; cursor: pointer; box-shadow: 0px 4px rgb(0,0,0,0.2); -moz-box-shadow: 0px 4px rgb(0,0,0,0.2); -webkit-box-shadow: 0px 4px rgb(0,0,0,0.2); text-align: center; color: #000033; line-height: 1em; font-size: 5em; position: relative; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; } #gameover{ width: 40%; padding: 24px; border-radius: 10px; background: linear-gradient(#f3786c, #f3ca6b); background: -webkit-linear-gradient(#f3786c, #f3ca6b); background: -moz-linear-gradient(#f3786c, #f3ca6b); background: -o-linear-gradient(#f3786c, #f3ca6b); color: #fff; font-size: 2.3em; text-align: center; position: absolute; top: 180px; left: 30%; z-index: 2; display: none; line-height: 1.3em; } #gameover p { margin-bottom: 0 !important; } /*-----------------*******************-----------------------------*/ /* Fade */ .hvr-fade { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); overflow: hidden; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: color, background-color; transition-property: color, background-color; } /*.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active { background-color: #6b54d3; color: white; }*/ /* Radial Out */ .hvr-radial-out { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; background: #e1e1e1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-radial-out:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #6b54d3; border-radius: 100%; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-radial-out:hover, .hvr-radial-out:focus, .hvr-radial-out:active { color: white; } .hvr-radial-out:hover:before, .hvr-radial-out:focus:before, .hvr-radial-out:active:before { -webkit-transform: scale(2); transform: scale(2); } .container-fluid { margin-right: auto; margin-left: auto; padding-left: 0 !important; padding-right: 15px !important; } .shares,.post-ratings { display:flex !important; align-items: center; justify-content: center; } /*-----------------*******************-----------------------------*/ @media only screen and (min-device-width : 320px) and (max-device-width : 1024px){ .container-fluid { margin-right: auto; margin-left: auto; padding-left: 0 !important; padding-right: 15px !important; } #full-container { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; grid-template-areas: "." "quizSection" "blockout" "."; } #quizSection { grid-area: quizSection; } #mth-grid-container { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto; grid-template-areas: "maintitle" "question" "instruction" "choices" "mainres"; height: auto; width: auto; margin: 0; background-color: #99CCFF; padding: 0 20px 20px 20px; font-family: Comfortaa, sans-serif; border-radius: 10px; box-shadow: 4px 4px 0px 0px #009de4; -webkit-box-shadow: 4px 4px 0px 0px #009de4; -moz-box-shadow: 4px 4px 0px 0px #009de4; } .maintitle { grid-area: maintitle; } .maintitle h3 {margin-bottom: 0px; padding:0;} .title{ font-size: 1.5em; } #question { grid-area: question; width: 100%; min-height: 150px; background-color: #eae2f0; box-shadow: 0 4px #535aa8; -moz-box-shadow: 0 4px #535aa8; -webkit-box-shadow: 0 4px #535aa8; font-size: 9em; font-family: cursive, sans-serif; text-align: center; color: #000033; display: flex; align-items: center; justify-content: center; } #instruction { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "choice" "wrong" "correct"; grid-area: instruction; justify-items: center; width: 100%; height: 40px; background-color: #FFFFCC; margin: 0; text-align: center; line-height: 45px; box-shadow: 0px 4px #8153a8; -webkit-box-shadow: 0px 4px #8153a8; -moz-box-shadow: 0px 4px #8153a8; } #choice { grid-area: choice; font-size: 1.3em;} #wrong { grid-area: wrong; } #correct { grid-area: correct; } #choices { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "box1 box2" "box3 box4"; grid-area: choices; grid-column-gap: 10px; grid-row-gap: 10px; } .mainres { display: grid; grid-template-columns: 1.2fr 0.8fr; grid-template-rows: 1fr 1fr; grid-template-areas: "timeremaining score" "startreset startreset"; } #timeremaining { grid-area: timeremaining; display:flex !important; } #score { grid-area: score; color: #330066; font-weight: bold; font-size: 1.2em;} #startreset { grid-area: startreset; width: 100%; padding: 10px; background-color: rgba(255, 255, 255, 0.5); border-radius: 3px; font-size: 1.2em; margin: 0 auto; text-transform: uppercase; cursor: pointer; /*box-shadow: 0px 4px rgba(0,0,0,0.2); -o-box-shadow: 0px 4px rgba(0,0,0,0.2); -ms-box-shadow: 0px 4px rgba(0,0,0,0.2); -moz-box-shadow: 0px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 4px rgba(0,0,0,0.2);*/ text-align: center; position: relative; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; } .box { /* border: 1px solid;*/ width: 100%; min-height: 60px; background-color: white; /* float: left;*/ /* margin-right: 24px;*/ border-radius: 5px; font-weight: bold; cursor: pointer; box-shadow: 0px 4px rgb(0,0,0,0.2); -moz-box-shadow: 0px 4px rgb(0,0,0,0.2); -webkit-box-shadow: 0px 4px rgb(0,0,0,0.2); text-align: center; color: #000033; line-height: 1em; font-size: 3em; position: relative; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; } #gameover{ width: 90%; padding: 24px; border-radius: 10px; background: linear-gradient(#f3786c, #f3ca6b); background: -webkit-linear-gradient(#f3786c, #f3ca6b); background: -moz-linear-gradient(#f3786c, #f3ca6b); background: -o-linear-gradient(#f3786c, #f3ca6b); color: #fff; font-size: 2.3em; line-height: 1.3em; text-align: center; position: absolute; top: 31%; left: 5%; z-index: 2; display: none; } #gameover p { margin-bottom: 0 !important; } } /* ----------------------------------------- */ /* Шаблон вмісту: Множення-6-10 – кінець */ /* ----------------------------------------- */