|
|
:root{
|
|
|
--couleur : black;
|
|
|
--couleurfond : white;
|
|
|
/*Dimensions*/
|
|
|
--x : 5vw;
|
|
|
--y : 4vw; /*taille anneau*/
|
|
|
--z : 3vw; /*taille rond*/
|
|
|
}
|
|
|
/*Rond*/
|
|
|
|
|
|
.containform {
|
|
|
position: relative;
|
|
|
height: var(--x);
|
|
|
width: var(--x);
|
|
|
display: table-cell;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
.containform2{
|
|
|
position: relative;
|
|
|
height: var(--x);
|
|
|
width: var(--x);
|
|
|
display: table-cell;
|
|
|
vertical-align: middle;
|
|
|
background-color: var(--couleur);
|
|
|
}
|
|
|
|
|
|
.anneau {
|
|
|
position: relative;
|
|
|
left: calc((var(--x) - var(--y)) / 2);
|
|
|
background-color: var(--couleur);
|
|
|
border-radius: var(--y);
|
|
|
height: var(--y);
|
|
|
width: var(--y);
|
|
|
display: table-cell;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
.anneau2 {
|
|
|
position: relative;
|
|
|
background-color: var(--couleurfond);
|
|
|
border-radius: var(--y);
|
|
|
height: var(--y);
|
|
|
width: var(--y);
|
|
|
left : calc((var(--x) - var(--y))/2);
|
|
|
display: table-cell;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
.anneau3 {
|
|
|
position: relative;
|
|
|
background-color: var(--couleur);
|
|
|
border-radius: var(--y);
|
|
|
height: var(--y);
|
|
|
width: var(--y);
|
|
|
margin-left: auto;
|
|
|
margin-right: auto;
|
|
|
}
|
|
|
.rondinterieur {
|
|
|
background-color: var(--couleurfond);
|
|
|
height: var(--z);
|
|
|
width: var(--z);
|
|
|
display: table;
|
|
|
margin: 0 auto;
|
|
|
border-radius: var(--z);
|
|
|
}
|
|
|
.rond {
|
|
|
display: table;
|
|
|
margin: 0 auto;
|
|
|
background-color: var(--couleur);
|
|
|
height: var(--z);
|
|
|
width: var(--z);
|
|
|
border-radius: var(--z);
|
|
|
}
|
|
|
.rond2 {
|
|
|
display: table;
|
|
|
margin: 0 auto;
|
|
|
background-color: var(--couleurfond);
|
|
|
height: var(--z);
|
|
|
width: var(--z);
|
|
|
border-radius: var(--z);
|
|
|
}
|
|
|
.rond3 {
|
|
|
position: relative;
|
|
|
top : calc((var(--y) - var(--z))/ 2);
|
|
|
left : calc((var(--y) - var(--z))/2);
|
|
|
display: table-cell;
|
|
|
vertical-align: middle;
|
|
|
background-color: var(--couleurfond);
|
|
|
height: var(--z);
|
|
|
width: var(--z);
|
|
|
border-radius: var(--z);
|
|
|
}
|
|
|
.rond4 {
|
|
|
display: table;
|
|
|
margin: 0 auto;
|
|
|
background-color: var(--couleur);
|
|
|
height: var(--z);
|
|
|
width: var(--z);
|
|
|
border-radius: var(--z);
|
|
|
}
|
|
|
|
|
|
/*Carré*/
|
|
|
.carre {
|
|
|
position: relative;
|
|
|
background-color: var(--couleur);
|
|
|
height: var(--y);
|
|
|
width: var(--y);
|
|
|
margin-left: auto;
|
|
|
margin-right: auto;
|
|
|
}
|
|
|
.carreinterieur {
|
|
|
position: relative;
|
|
|
top : calc((var(--y) - var(--z))/2);
|
|
|
left : calc((var(--y) - var(--z))/2);
|
|
|
display: table-cell;
|
|
|
vertical-align: middle;
|
|
|
background-color: var(--couleurfond);
|
|
|
height: var(--z);
|
|
|
width: var(--z);
|
|
|
}
|
|
|
.carre2 {
|
|
|
background-color: var(--couleur);
|
|
|
height: var(--z);
|
|
|
width: var(--z);
|
|
|
display: table;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
.carreinterieur2 {
|
|
|
background-color: var(--couleurfond);
|
|
|
height: var(--z);
|
|
|
width: var(--z);
|
|
|
display: table;
|
|
|
margin-left: auto;
|
|
|
margin-right: auto;
|
|
|
}
|
|
|
.carreinterieur3 {
|
|
|
position: relative;
|
|
|
background-color: var(--couleurfond);
|
|
|
height: var(--y);
|
|
|
width: var(--y);
|
|
|
left : calc((var(--x) - var(--y))/2);
|
|
|
display: table-cell;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
.carrev2 {
|
|
|
position: relative;
|
|
|
background-color: var(--couleur);
|
|
|
height: var(--y);
|
|
|
width: var(--y);
|
|
|
margin-left: auto;
|
|
|
margin-right: auto;
|
|
|
}
|
|
|
.carreinterieur4 {
|
|
|
position : relative;
|
|
|
top : calc((var(--y) - var(--z)) / 2);
|
|
|
left : calc((var(--y) - var(--z)) / 2);
|
|
|
background-color: var(--couleurfond);
|
|
|
height: var(--z);
|
|
|
width: var(--z);
|
|
|
display: table-cell;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
.carre3 {
|
|
|
background-color: var(--couleur);
|
|
|
height: var(--z);
|
|
|
width: var(--z);
|
|
|
display: table;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
/*triangle*/
|
|
|
.triangle {
|
|
|
display: table;
|
|
|
margin: 0 auto;
|
|
|
border-left: calc(var(--y) /2) solid transparent;
|
|
|
border-right: calc(var(--y) /2) solid transparent;
|
|
|
border-bottom: var(--y) solid var(--couleur);
|
|
|
}
|
|
|
|
|
|
.trianglerinterieur {
|
|
|
position: absolute;
|
|
|
bottom: calc(((var(--x) - var(--y))/1.5) + ((var(--y) - var(--z))/3));
|
|
|
left : calc(((var(--x) - var(--z))/2) + (var(--z)) / 10);
|
|
|
border-left: calc(var(--z) /2.5) solid transparent;
|
|
|
border-right: calc(var(--z) /2.5) solid transparent;
|
|
|
border-bottom: calc(var(--z) / 1.25) solid var(--couleurfond);
|
|
|
}
|
|
|
|
|
|
.trianglerinterieur2 {
|
|
|
position: absolute;
|
|
|
bottom: calc((var(--x) - var(--z))/2);
|
|
|
left : calc((var(--x) - var(--z))/2);
|
|
|
border-left: calc(var(--z) /2) solid transparent;
|
|
|
border-right: calc(var(--z) /2) solid transparent;
|
|
|
border-bottom: var(--z) solid var(--couleurfond);
|
|
|
}
|
|
|
|
|
|
.ptriangle {
|
|
|
position: absolute;
|
|
|
bottom: calc(((var(--x) - var(--y))/1.5) + ((var(--y) - var(--z))/3));
|
|
|
left : calc((var(--x) - var(--z))/2);
|
|
|
border-left: calc(var(--z) /2) solid transparent;
|
|
|
border-right: calc(var(--z) /2) solid transparent;
|
|
|
border-bottom: var(--z) solid var(--couleur);
|
|
|
}
|
|
|
|
|
|
.triangle2 {
|
|
|
display: table;
|
|
|
margin: 0 auto;
|
|
|
border-left: calc(var(--y) /2) solid transparent;
|
|
|
border-right: calc(var(--y) /2) solid transparent;
|
|
|
border-bottom: var(--y) solid var(--couleurfond);
|
|
|
}
|
|
|
|
|
|
.croix{
|
|
|
position: absolute;
|
|
|
left: calc((var(--x) - var(--y)) / 2);
|
|
|
bottom: calc( ((var(--x) - var(--y))/2) + ((var(--y)) / 4) );
|
|
|
}
|
|
|
|
|
|
.croixinté{
|
|
|
z-index: 2;
|
|
|
position: absolute;
|
|
|
left: calc((var(--x) - var(--z))/2);
|
|
|
bottom: calc( ((var(--x) - var(--z))/2) + ((var(--z)) / 2.33) );
|
|
|
}
|
|
|
.croixgauche{
|
|
|
position: relative;
|
|
|
background-color: var(--couleur);
|
|
|
height: calc(var(--y)/4);
|
|
|
width: var(--y);
|
|
|
top : calc(var(--y) / 8);
|
|
|
transform: rotate(45deg);
|
|
|
}
|
|
|
.croixdroite{
|
|
|
position: relative;
|
|
|
background-color: var(--couleur);
|
|
|
height: calc(var(--y)/4);
|
|
|
width: var(--y);
|
|
|
bottom : calc(var(--y) / 8);
|
|
|
transform: rotate(-45deg);
|
|
|
}
|
|
|
|
|
|
.croixgauche2{
|
|
|
position: relative;
|
|
|
background-color: var(--couleurfond);
|
|
|
height: calc(var(--y)/4);
|
|
|
width: var(--y);
|
|
|
top : calc(var(--y) / 8);
|
|
|
transform: rotate(45deg);
|
|
|
}
|
|
|
|
|
|
.croixdroite2{
|
|
|
position: relative;
|
|
|
background-color: var(--couleurfond);
|
|
|
height: calc(var(--y)/4);
|
|
|
width: var(--y);
|
|
|
bottom : calc(var(--y) / 8);
|
|
|
transform: rotate(-45deg);
|
|
|
}
|
|
|
|
|
|
.croixgaucheinte{
|
|
|
position: relative;
|
|
|
background-color: var(--couleurfond);
|
|
|
height: calc(var(--z)/16);
|
|
|
width: calc(var(--z));
|
|
|
top : calc(var(--z) / 32);
|
|
|
transform: rotate(45deg);
|
|
|
}
|
|
|
.croixdroiteinte{
|
|
|
position: relative;
|
|
|
background-color: var(--couleurfond);
|
|
|
height: calc(var(--z)/16);
|
|
|
width: calc(var(--z));
|
|
|
bottom : calc(var(--z) / 32);
|
|
|
transform: rotate(-45deg);
|
|
|
}
|
|
|
.croixgaucheinte2{
|
|
|
position: relative;
|
|
|
background-color: var(--couleur);
|
|
|
height: calc(var(--z)/16);
|
|
|
width: calc(var(--z));
|
|
|
top : calc(var(--z) / 32);
|
|
|
transform: rotate(45deg);
|
|
|
}
|
|
|
.croixdroiteinte2{
|
|
|
position: relative;
|
|
|
background-color: var(--couleur);
|
|
|
height: calc(var(--z)/16);
|
|
|
width: calc(var(--z));
|
|
|
bottom : calc(var(--z) / 32);
|
|
|
transform: rotate(-45deg);
|
|
|
}
|
|
|
.losangehaut {
|
|
|
z-index: 2;
|
|
|
position: absolute;
|
|
|
left: calc((var(--x) - var(--y)) / 2.4);
|
|
|
bottom : calc(var(--x) / 2);
|
|
|
border-left: calc(var(--y) /1.9) solid transparent;
|
|
|
border-right: calc(var(--y) /1.9) solid transparent;
|
|
|
border-bottom: calc(var(--y) /1.9) solid var(--couleur);
|
|
|
}
|
|
|
.losangebas {
|
|
|
position: absolute;
|
|
|
z-index: 2;
|
|
|
left: calc((var(--x) - var(--y)) / 2.4);
|
|
|
top : calc(var(--x) / 2);
|
|
|
border-left: calc(var(--y) /1.9) solid transparent;
|
|
|
border-right: calc(var(--y) /1.9) solid transparent;
|
|
|
border-top: calc(var(--y) /1.9) solid var(--couleur);
|
|
|
}
|
|
|
.losangehaut2 {
|
|
|
position: absolute;
|
|
|
left: calc((var(--x) - var(--y)) / 2);
|
|
|
bottom : calc(var(--x) / 2);
|
|
|
border-left: calc(var(--y) /2) solid transparent;
|
|
|
border-right: calc(var(--y) /2) solid transparent;
|
|
|
border-bottom: calc(var(--y) /2) solid var(--couleurfond);
|
|
|
}
|
|
|
.losangebas2 {
|
|
|
position: absolute;
|
|
|
left: calc((var(--x) - var(--y)) / 2);
|
|
|
top : calc(var(--x) / 2);
|
|
|
border-left: calc(var(--y) /2) solid transparent;
|
|
|
border-right: calc(var(--y) /2) solid transparent;
|
|
|
border-top: calc(var(--y) /2) solid var(--couleurfond);
|
|
|
}
|
|
|
.losangehautinte {
|
|
|
z-index: 3;
|
|
|
position: absolute;
|
|
|
left: calc((var(--x) - var(--z))/2);
|
|
|
bottom : calc(var(--x) / 2);
|
|
|
border-left: calc(var(--z) /2) solid transparent;
|
|
|
border-right: calc(var(--z) /2) solid transparent;
|
|
|
border-bottom: calc(var(--z) /2) solid var(--couleurfond);
|
|
|
}
|
|
|
.losangebasinte {
|
|
|
z-index: 3;
|
|
|
position: absolute;
|
|
|
left: calc((var(--x) - var(--z))/2);
|
|
|
top : calc(var(--x) / 2);
|
|
|
border-left: calc(var(--z) /2) solid transparent;
|
|
|
border-right: calc(var(--z) /2) solid transparent;
|
|
|
border-top: calc(var(--z) /2) solid var(--couleurfond);
|
|
|
}
|
|
|
|
|
|
.losangehautinte2 {
|
|
|
z-index: 3;
|
|
|
position: absolute;
|
|
|
left: calc((var(--x) - var(--z))/2);
|
|
|
bottom : calc(var(--x) / 2);
|
|
|
border-left: calc(var(--z) /2) solid transparent;
|
|
|
border-right: calc(var(--z) /2) solid transparent;
|
|
|
border-bottom: calc(var(--z) /2) solid var(--couleur);
|
|
|
}
|
|
|
|
|
|
.losangebasinte2 {
|
|
|
z-index: 3;
|
|
|
position: absolute;
|
|
|
left: calc((var(--x) - var(--z))/2);
|
|
|
top : calc(var(--x) / 2);
|
|
|
border-left: calc(var(--z) /2) solid transparent;
|
|
|
border-right: calc(var(--z) /2) solid transparent;
|
|
|
border-top: calc(var(--z) /2) solid var(--couleur);
|
|
|
}
|
|
|
/*Figures simples :( */
|
|
|
.trapeze{
|
|
|
width: var(--y);
|
|
|
height: var(--y);
|
|
|
background: var(--couleur);
|
|
|
position: relative;
|
|
|
left: calc((var(--x) - var(--y)) / 2);
|
|
|
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
|
|
|
}
|
|
|
|
|
|
.trapeze2{
|
|
|
width: var(--y);
|
|
|
height: var(--y);
|
|
|
background: var(--couleurfond);
|
|
|
position: relative;
|
|
|
left: calc((var(--x) - var(--y)) / 2);
|
|
|
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
|
|
|
}
|
|
|
|
|
|
.trapezeinte{
|
|
|
width: var(--z);
|
|
|
height: var(--z);
|
|
|
background: var(--couleurfond);
|
|
|
position: absolute;
|
|
|
z-index: 2;
|
|
|
bottom : calc( ((var(--x) - var(--z))/2.1));
|
|
|
left: calc((var(--x) - var(--z))/2);
|
|
|
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
|
|
|
}
|
|
|
|
|
|
.trapezeinte2{
|
|
|
width: var(--z);
|
|
|
height: var(--z);
|
|
|
background: var(--couleur);
|
|
|
position: absolute;
|
|
|
z-index: 2;
|
|
|
bottom : calc( ((var(--x) - var(--z))/2.1));
|
|
|
left: calc((var(--x) - var(--z))/2);
|
|
|
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
|
|
|
}
|
|
|
|
|
|
.octogon{
|
|
|
width: var(--y);
|
|
|
height: var(--y);
|
|
|
background: var(--couleur);
|
|
|
position: relative;
|
|
|
left: calc((var(--x) - var(--y)) / 2);
|
|
|
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
|
|
|
}
|
|
|
.octogon2{
|
|
|
width: var(--y);
|
|
|
height: var(--y);
|
|
|
background: var(--couleurfond);
|
|
|
position: relative;
|
|
|
left: calc((var(--x) - var(--y)) / 2);
|
|
|
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
|
|
|
}
|
|
|
|
|
|
.octogoninte{
|
|
|
width: var(--z);
|
|
|
height: var(--z);
|
|
|
background: var(--couleurfond);
|
|
|
position: absolute;
|
|
|
z-index: 2;
|
|
|
bottom : calc( ((var(--x) - var(--z))/2.1));
|
|
|
left: calc((var(--x) - var(--z))/2);
|
|
|
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
|
|
|
}
|
|
|
.octogoninte2{
|
|
|
width: var(--z);
|
|
|
height: var(--z);
|
|
|
background: var(--couleur);
|
|
|
position: absolute;
|
|
|
z-index: 2;
|
|
|
bottom : calc( ((var(--x) - var(--z))/2.1));
|
|
|
left: calc((var(--x) - var(--z))/2);
|
|
|
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
|
|
|
}
|
|
|
|
|
|
.value {
|
|
|
border-bottom: 4px dashed #bdc3c7;
|
|
|
text-align: center;
|
|
|
font-weight: bold;
|
|
|
font-size: 10em;
|
|
|
width: 300px;
|
|
|
height: 100px;
|
|
|
line-height: 60px;
|
|
|
margin: 40px auto;
|
|
|
letter-spacing: -.07em;
|
|
|
text-shadow: white 2px 2px 2px;
|
|
|
}
|
|
|
input[type="range"] {
|
|
|
display: block;
|
|
|
-webkit-appearance: none;
|
|
|
background-color: #bdc3c7;
|
|
|
width: 300px;
|
|
|
height: 5px;
|
|
|
border-radius: 5px;
|
|
|
margin: 0 auto;
|
|
|
outline: 0;
|
|
|
}
|
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
|
-webkit-appearance: none;
|
|
|
background-color: #e74c3c;
|
|
|
width: 30px;
|
|
|
height: 30px;
|
|
|
border-radius: 50%;
|
|
|
border: 2px solid white;
|
|
|
cursor: pointer;
|
|
|
transition: .3s ease-in-out;
|
|
|
}
|
|
|
input[type="range"]::-webkit-slider-thumb:hover {
|
|
|
background-color: white;
|
|
|
border: 2px solid #e74c3c;
|
|
|
}
|
|
|
input[type="range"]::-webkit-slider-thumb:active {
|
|
|
transform: scale(1.6);
|
|
|
} |
