/*GENERAL*/
html, body {
height: 100%;
margin: 0; padding: 0;
background-image: url("/clyggames/static/background.jpg");
background-repeat: no-repeat;
background-size: cover;
font-family: Source Sans Pro;
--color1 : rgba(43, 80, 85, 0.534);
--color2 : rgba(32, 61, 65, 0.534);
--color3 : #93c9ff;
}
.pdm{
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 0;
width: 0;
z-index: -1;
}
section{
display: flex;
justify-content: center;
min-height: 200px;
align-items: center;
}
section .chargement{
position: relative;
width: 150px;
height: 150px;
}
section .chargement span{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: rotate(calc(18deg * var(--i)));
}
section .chargement span::before{
content: '';
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
width: 15px;
height: 15px;
background: white;
box-shadow: 0 0 10px var(--color3),
0 0 20px var(--color3),
0 0 40px var(--color3),
0 0 60px var(--color3);
animation: tourne 2s linear infinite;
animation-delay: calc(0.1s * var(--i));
}
@keyframes tourne {
0%
{
transform: scale(1);
}
80%,100%
{
transform: scale(0);
}
}
input[type="submit"].hbtn {
display: none;
}
input[type="submit"].hbtn + label {
padding: 0rem 0.1rem;
border: 1px solid white;
background-color: var(--color2);
cursor: pointer;
}
input[type="submit"].hbtn + label:hover {
background-color: rgba(32, 61, 65, 0.39);
border: 1px solid var(--color3);
}
header label{
width: 75%;
font-size: 0.75vw;
}
header label img{
width: 2.5vw;
height:2.5vw;
}
input[type="button"].hbtn {
display: none;
}
input[type="button"].hbtn + label {
padding: 0.1rem 0.1rem;
border: 1px solid white;
background-color: var(--color2);
cursor: pointer;
}
input[type="button"].hbtn + label:hover {
background-color: rgba(32, 61, 65, 0.39);
border: 1px solid var(--color3);
}
.profil{
background-color: var(--color1);
color: white;
border: 3px solid rgb(255, 255, 255);
width: 40%;
height: 70%;
margin-left: auto;
margin-right: auto;
padding: 5px 5px 5px 5px;
}
footer{
border-top: 3px solid white;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
width:100%;
overflow: hidden;
height:10%;
background-color:var(--color1);
color: white;
}
input{
background-color: var(--color2);
color: white;
border: 1px solid white;
cursor: pointer;
}
input:hover{
border: 1px solid var(--color3);
background-color: rgba(32, 61, 65, 0.39);
}
textarea{
background-color: var(--color2);
border: 1px solid white;
color: white;
}
select{
padding: 3px 3px 3px 3px;
background-color: var(--color2);
border: 1px solid white;
color: white;
}
option{
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0);
}
option:hover{
border: 1px solid var(--color3);
background-color: rgba(32, 61, 65, 0.39);
}
.textd{
width:100%;
height:100%;
}
th,td{
border: 1px solid rgb(255, 255, 255);
padding: 2px 2px 2px 2px;
}
.select{
width:70%
}
header{
border-bottom: 3px solid white;
width:100%;
height:11.5%;
right: 0px;
left: 0px;
overflow: hidden;
color:white;
background-color:var(--color1);
}
header table th{
border: 0px;
}
h1{
text-align:center;
color:white;
}
.interieur{
margin-top: 10px;
margin-bottom: 10px;
position: absolute;
top: 12%;
bottom: 10%;
right: 0px;
left: 0px;
overflow : auto ;
}
body{
width: 100%;
}
.logoIMG {
margin-top: -5px;
width:70%;
height:70%;
}
.login{
color: white;
background-color: var(--color1);
border: 3px solid white;
width: 70%;
margin-left: auto;
margin-right: auto;
}
/*CREATION PARTIE*/
.pdp{
width:300px;
height:300px;
}
.TBLC{
background-color: var(--color1);
color: white;
border: 3px solid rgb(255, 255, 255);
width: 65%;
height: 70%;
padding: 5px 5px 5px 5px;
margin-left: auto;
margin-right: auto;
}
.RIMG{
width: 2.75vw;
height: 2.75vw;
}
input[type="radio"].JEU {
display: none;
}
input[type="radio"].JEU + label {
padding: 0.1rem 0.5rem;
border: 1px solid white;
background-color: var(--color2);
cursor: pointer;
margin-bottom: 3px;
font-size: 0.90vw;
}
input[type="radio"].JEU:checked + label {
border: 1px solid var(--color3);
}
input[type="radio"].JEU + label:hover {
border: 1px solid var(--color3);
background-color: rgba(32, 61, 65, 0.39);
}
/*PETIT BAC*/
.PETITBAC{
align-items: center;
height:100%;
width:100%;
display: grid;
}
.BAC{
background-color: var(--color1);
border: 3px solid rgb(255, 255, 255);
height:50%;
margin-left: auto;
margin-right: auto;
padding: 5px 5px 5px 5px;
color: white;
}
.BAC td{
padding: 3px 7px;
}
/*DICTEE*/
.TBLD{
background-color: var(--color1);
color: white;
margin-left: auto;
margin-right: auto;
border: 3px solid rgb(255, 255, 255);
width:400px;
height:400px;
padding: 5px 5px 5px 5px;
}
/*GEOQUIZZ*/
.TBLG{
background-color: var(--color1);
color: white;
border: 3px solid rgb(255, 255, 255);
width: 70%;
margin-left: auto;
margin-right: auto;
padding: 5px 5px 5px 5px;
}
.map__image{
width: 100%;
float: left;
cursor: crosshair;
}
.map__image path{
fill : #ADADD3;
stroke: #FFF;
stroke-width: 1px;
transition: fill 0.3s;
}
.map__image path:hover{
fill : var(--color3);
stroke: #FFF;
stroke-width: 1px;
transition: fill 0.3s;
}
#epingle{
left: 0px ;
top: 0px;
transform : scale(0.05);
position : absolute;
clip: rect(0, 400px, auto, 120px);
}
.form-container {
max-width: 300px;
padding: 20px;
background-color: var(--color1);
}
.form-container .btn {
background-color: green;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom: 10px;
opacity: 0.8;
border: 2px solid white;
}
.form-container .btn:hover,
.open-button:hover {
opacity: 1;
}
.form-container .cancel {
background-color: #cc0000;
}
.login-popup {
position: relative;
text-align: center;
width: 100%;
}
.form-popup {
display: none;
padding: 3px 3px 3px 3px;
background-color: rgba(43, 80, 85);
position: fixed;
left: 49.5%;
top: 20%;
color: white;
transform: translate(-45%, 5%);
border: 3px solid white;
z-index: 9;
}
/* Labyrinthé */
.case /* Toutes les cellules des tableaux... */
{
border: 1px solid white; /* auront une bordure de 1px */
width: 25px;
height: 25px;
}
.lab
{
margin-left: auto;
margin-right: auto;
background-color: var(--color1);
border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
}
#tablab{
display: none;
}
/* BANDEROLE */
.banderole{
position: relative;
background-color: var(--color1);
border: 2px solid white;
width: 80%;
height: 300px;
overflow: hidden;
}
.pages{
z-index: 1;
width: 500%;
height: 300px;
display: flex;
}
.pages input{
display: none;
}
.page{
width: 20%;
transition: 2s;
}
.banderole .pages .info{
position: absolute;
width: 100%;
top: 0;
}
.banderole .pages .info h3{
margin-top: 10px;
font-size: 35px;
text-transform: uppercase;
font-weight: 800;
}
.page img{
width: 20%;
height: 300px;
}
.navigation-manuel{
position: absolute;
width: 100%;
margin-top: -40px;
display: flex;
justify-content: center;
transition: 1s;
}
.manuel-btn{
border: 2px solid var(--color3);
padding: 5px;
border-radius: 10px;
cursor: pointer;
transition: 1s;
}
.manuel-btn:not(:last-child){
margin-right: 40px;
}
.manuel-btn:hover{
background: var(--color3);
}
#radio1:checked ~ .first{
margin-left: 0;
}
#radio2:checked ~ .first{
margin-left: -20%;
}
#radio3:checked ~ .first{
margin-left: -40%;
}
#radio4:checked ~ .first{
margin-left: -60%;
}
#radio5:checked ~ .first{
margin-left: -80%;
}
.navigation-automatique{
position: absolute;
display: flex;
width: 100%;
justify-content: center;
margin-top: 260px;
}
.navigation-automatique div{
border: 2px solid var(--color3);
padding: 5px;
border-radius: 10px;
transition: 1s;
}
.navigation-automatique div:not(:last-child){
margin-right: 40px;
}
#radio1:checked ~ .navigation-automatique .auto1{
background: var(--color3);
}
#radio2:checked ~ .navigation-automatique .auto2{
background: var(--color3);
}
#radio3:checked ~ .navigation-automatique .auto3{
background: var(--color3);
}
#radio4:checked ~ .navigation-automatique .auto4{
background: var(--color3);
}
#radio5:checked ~ .navigation-automatique .auto5{
background: var(--color3);
}
/* CLASSEMENT */
.TBLM{
margin-top: 5%;
color: white;
width: 50%;
margin-left: auto;
margin-right: auto;
padding: 5px 5px 5px 5px;
}
.TBLM th {
border: 0px;
padding: 0px 0px;
width: 33.3%;
}
.TBLM thead tr{
height: 25%
}
.TBLM tbody tr{
height: 10%;
}
.TBLM thead{
background-color: rgba(255, 255, 255, 0);
border: 0px;
}
.TBLM tbody{
background-color: var(--color1);
border: 2px solid white;
overflow : auto ;
}
.TBLM thead div{
background: var(--color2);
width: 85px;
min-width: 65xp;
margin-bottom: 3px;
border-radius: 10%;
}
.TBLM div p{
padding: 0;
margin: 0;
}
.svg2{
width=100%;
height:auto;
}