Golfier
frperalde 4 years ago
parent 016595d067
commit c2fdfe1be2

@ -14,25 +14,40 @@
z-index: 10; z-index: 10;
} }
.containerparam{
position: absolute;
display: flex;
margin-left: 1vw;
}
.containerparam > div {
margin-right: 4vh;
}
/*Bouton info*/ /*Bouton info*/
#infosec{ #infosec{
z-index:15; z-index:15;
width: 2vw;
}
#infosec2{
z-index:15;
width: 2vw;
} }
#info { #info {
color: #B7B7B7; color: var(--lightprima);
text-decoration: none; text-decoration: none;
font-size: 45px; font-size: 45px;
} }
#info:hover { #info:hover {
color: #E4E8E7; color: var(--lightprima);
} }
.activity { .activity {
padding: 0; padding: 0;
margin: 2em 0;
list-style: none; list-style: none;
} }
@ -47,7 +62,6 @@ li {
display: inline-block; display: inline-block;
font-size: 0.889em; font-size: 0.889em;
height: 3em; height: 3em;
margin: 0 1em 1em;
position: relative; position: relative;
text-align: center; text-align: center;
text-transform: lowercase; text-transform: lowercase;
@ -79,15 +93,9 @@ li {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
background-color: #B130DE; background-color: var(--lightsedonca);
} }
#infosec {
position: absolute;
left: 57%;
top: 35%;
}
/*Les règles popups*/ /*Les règles popups*/
.overlay { .overlay {
position: fixed; position: fixed;
@ -143,7 +151,85 @@ li {
overflow: auto; overflow: auto;
} }
/*Parametres*/
.popup2 {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 45%;
height: 65%;
position: relative;
top:10%;
}
.popup2 h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
h3 {
margin: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup2 .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup2 .close:hover {
color: #06D85F;
}
.popup2 .content {
max-height: 30%;
}
.titre{
display: ruby-base;
}
label {
cursor: pointer;
text-indent: -9999px;
width: 2vw;
height: 1vw;
background: grey;
display: block;
border-radius: 100px;
position: relative;
}
label:after {
content: '';
position: absolute;
top: 0.1vw;
left: 0.1vw;
width: 0.8vw;
height: 0.8vw;
background: #fff;
border-radius: 90px;
transition: 0.3s;
}
input:checked + label {
background: #bada55;
}
input:checked + label:after {
left: calc(100% - 0.1vw);
transform: translateX(-100%);
}
label:active:after {
width: 1.4vw;
}
/* J'ai trop avancé, mode multi*/ /* J'ai trop avancé, mode multi*/

@ -23,13 +23,24 @@
</a> </a>
</div> </div>
<div id="infosec"> <div class="containerparam">
<div class="inner"> <div id="infosec">
<ul class="activity"> <div class="inner">
<li id="listeinfobtn"> <ul class="activity">
<a id="info" href="#popup1">i</a> <li id="listeinfobtn">
</li> <a id="info" href="#popup1">i</a>
</ul> </li>
</ul>
</div>
</div>
<div id="infosec2">
<div class="inner">
<ul class="activity">
<li id="listeinfobtn">
<a id="info" href="#popup2">&#9881;</a>
</li>
</ul>
</div>
</div> </div>
</div> </div>
@ -43,6 +54,7 @@
</a> </a>
</div> </div>
<div id="popup1" class="overlay"> <div id="popup1" class="overlay">
<div class="popup"> <div class="popup">
<h2>Les Règles :</h2> <h2>Les Règles :</h2>
@ -56,6 +68,26 @@
</div> </div>
</div> </div>
<div id="popup2" class="overlay">
<div class="popup2">
<h2>Les Paramètres :</h2>
<a class="close" href="#">&times;</a>
<div class="content">
<div class="Mode_Forme">
<div class="titre">
<h3>Mode Forme</h3>
</div>
</div>
<h3>Choix Couleur</h3>
</div>
</div>
</div>
<!-- <!--
<div id="containpseudo"> <div id="containpseudo">
<div id="pseudoenter"> <div id="pseudoenter">

Loading…
Cancel
Save