diff --git a/SwichGIT/src/css/base.css b/SwichGIT/src/css/base.css index 4faddde..7cb4e34 100644 --- a/SwichGIT/src/css/base.css +++ b/SwichGIT/src/css/base.css @@ -14,15 +14,6 @@ --colorfive : #2E6DB4;/*HEXA*/ --colorsix : #E6792F;/*HOCTO*/ - --colorbase : #e75259; - --colorcarre : #30C0DE; - --colorone : #00CBFF; - --colortwo : #00FF6E; - --colorthree : #C800FF; - --colorfour : #E6DA27; - --colorfive : #2E6DB4; - --colorsix : #E6792F; - /*Tailles cartes*/ --tailleTablette : 12vw; --taille: 10vw; diff --git a/SwichGIT/src/css/formes.css b/SwichGIT/src/css/formes.css index d68c9e7..c810914 100644 --- a/SwichGIT/src/css/formes.css +++ b/SwichGIT/src/css/formes.css @@ -20,6 +20,8 @@ vertical-align: middle; background-color: black; } + + /*ROND*/ .containexte{ height: var(--y); @@ -33,10 +35,7 @@ display: none; } -.rond{ - -webkit-clip-path: circle(50% at 50% 50%); - clip-path: circle(50% at 50% 50%); -} + .round{ border-radius: 5vw; @@ -50,14 +49,16 @@ background-color: black; } -.formeinte{ - height: 90%; - width: 90%; - margin: 0 auto; -} -.formeexte{ - height: 100%; - width: 100%; + + + + +/* UTILISATION FORMES CARTES*/ +.containformCarte{ + position: relative; + height: var(--x); + width: var(--x); + display: table-cell; } .carre{ @@ -109,3 +110,35 @@ clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); } +.rond{ + -webkit-clip-path: circle(50% at 50% 50%); + clip-path: circle(50% at 50% 50%); +} + +.formeinte{ + height: 100%; + width: 100%; + margin: 0 auto; +} +.formeexte{ + height: 100%; + width: 100%; +} + +.containinteCarte{ + top:calc((var(--x) - var(--z)) / 2); + left:calc((var(--x) - var(--z)) / 2); + height: var(--z); + width: var(--z); + z-index: 2; + position: absolute; +} + +.containexteCarte{ + top:calc((var(--x) - var(--y)) / 2); + left:calc((var(--x) - var(--y)) / 2); + height: var(--y); + width: var(--y); + z-index: 1; + position: absolute; +} \ No newline at end of file