diff --git a/SwichGIT/src/css/PageDaccueil.css b/SwichGIT/src/css/PageDaccueil.css index 9368e35..13688e8 100644 --- a/SwichGIT/src/css/PageDaccueil.css +++ b/SwichGIT/src/css/PageDaccueil.css @@ -376,25 +376,7 @@ label:active:after { z-index: 10; } -#choosemode { - height: 4vw; - width: 16vw; - position: absolute; - left: 42vw; - top: 50vh; - z-index: 15; -} -#conteneurmode{ - width: 80%; - height: 2vw; - left : 10%; - top : 25%; - position: absolute; - margin: 0 auto; - background-color: var(--lightsedonca); - border-radius: 5vw; -} #modeprec{ height: 100%; @@ -417,31 +399,9 @@ label:active:after { left: 15%; } -#textmode { - font-family: Lucida Console, Arial Black, Arial; - font-size: 1vw; - color: #707070; - text-align:center; - margin: 5% auto 0 auto; -} -#triangleprec{ - width: 0; - height: 0; - margin: 0.25vw auto 0 auto; - border-top: 0.75vw solid transparent; - border-right: 1.25vw solid grey; - border-bottom: 0.75vw solid transparent; -} -#trianglesuiv{ - width: 0; - height: 0; - margin: 0.25vw auto 0 auto; - border-top: 0.75vw solid transparent; - border-left: 1.25vw solid grey; - border-bottom: 0.75vw solid transparent; -} + #buttonadd { position: absolute; diff --git a/SwichGIT/src/css/PartieGame.css b/SwichGIT/src/css/PartieGame.css index 013774c..301e8a3 100644 --- a/SwichGIT/src/css/PartieGame.css +++ b/SwichGIT/src/css/PartieGame.css @@ -15,11 +15,6 @@ justify-content: center; } -.divmenu { - width: 10vw; - height: inherit; - margin-right: 1vw; -} .retourstp { position: absolute; @@ -30,13 +25,6 @@ top:-3vw; } -#affPoints { - text-align: center; - font-family: Montserrat, impact, Arial Black; - font-size: 2vw; - margin-top: 1.2vw; - color: var(--lightsedonca); -} #affSolution { text-align: center; diff --git a/SwichGIT/src/css/desktops.css b/SwichGIT/src/css/desktops.css index 7bec418..6320d4f 100644 --- a/SwichGIT/src/css/desktops.css +++ b/SwichGIT/src/css/desktops.css @@ -1,7 +1,10 @@ /*Ecran*/ @media screen and (min-width: 992px) { - + :root{ + --taille : 10vw; + } + /*PARTIE FORMES*/ .containform3 { position: relative; @@ -31,6 +34,52 @@ z-index: 15; } + #choosemode { + height: 4vw; + width: 16vw; + position: absolute; + left: 42vw; + top: 50vh; + z-index: 15; + } + + #conteneurmode{ + width: 80%; + height: 2vw; + left : 10%; + top : 25%; + position: absolute; + margin: 0 auto; + background-color: var(--lightsedonca); + border-radius: 5vw; + } + + #triangleprec{ + width: 0; + height: 0; + margin: 0.25vw auto 0 auto; + border-top: 0.75vw solid transparent; + border-right: 1.25vw solid grey; + border-bottom: 0.75vw solid transparent; + } + + #trianglesuiv{ + width: 0; + height: 0; + margin: 0.25vw auto 0 auto; + border-top: 0.75vw solid transparent; + border-left: 1.25vw solid grey; + border-bottom: 0.75vw solid transparent; + } + + #textmode { + font-family: Lucida Console, Arial Black, Arial; + font-size: 1vw; + color: #707070; + text-align:center; + margin: 5% auto 0 auto; + } + #formSize{ margin : 0 auto; width: 100%; @@ -107,6 +156,20 @@ display: block; } + #affPoints { + text-align: center; + font-family: Montserrat, impact, Arial Black; + font-size: 2vw; + margin-top: 1.2vw; + color: var(--lightsedonca); + } + + .divmenu { + width: 10vw; + height: inherit; + margin-right: 1vw; + } + .containButtonForm{ height: 2.5vw; width: 2.5vw; @@ -127,7 +190,7 @@ .flex-item { background: var(--lightsedonca); - width: 10vw; + width: var(--taille); border-radius: 0.75vw; padding-right: 0.15vw; padding-left: 0.15vw; diff --git a/SwichGIT/src/css/tablet.css b/SwichGIT/src/css/tablet.css index a04ca70..dac108b 100644 --- a/SwichGIT/src/css/tablet.css +++ b/SwichGIT/src/css/tablet.css @@ -1,6 +1,10 @@ /*DemTéléphone 1i Ecran*/ @media screen and (min-width: 669px) and (max-width: 992px) { + :root{ + --taille : 14vw; + } + .containform3 { position: relative; height: calc(1.25*var(--x)); @@ -93,7 +97,6 @@ width: 20vh; padding-top: 1vh; position: relative; - left: 27vw; } .txt { @@ -159,7 +162,128 @@ position: absolute; font-size: 10vw; margin-top: 0.2vw; - margin-left: 12.5vw; + width: inherit; + text-align: center; + color: var(--lightsedonca); + } + + #choosemode { + height: 7vw; + width: 50vw; + position: absolute; + left: 25vw; + top: 50vh; + z-index: 15; + } + + #conteneurmode{ + width: 80%; + height: 80%; + left : 10%; + top : 45%; + position: absolute; + background-color: var(--lightsedonca); + border-radius: 5vw; + } + + #triangleprec{ + width: 0; + height: 0; + margin: 0.25vw auto 0 auto; + border-top: 2vw solid transparent; + border-right: 4vw solid grey; + border-bottom: 2vw solid transparent; + margin-top: 0.75vw; + } + + #trianglesuiv{ + width: 0; + height: 0; + margin: 0.25vw auto 0 auto; + border-top: 2vw solid transparent; + border-left: 4vw solid grey; + border-bottom: 2vw solid transparent; + margin-top: 0.75vw; + } + + #textmode { + font-family: Lucida Console, Arial Black, Arial; + font-size: 3vw; + color: #707070; + text-align:center; + margin: 5% auto 0 auto; + } + + .logoboutton{ + font-size: 2vw; + color: var(--lightprima); + margin: 1vw; + } + + /*Externe*/ + .bouttonMenuHaut{ + height: 4vw; + width: 4vw; + background-color: var(--lightsedonca); + border-radius: 50%; + margin: 0 auto; + margin-top: 2.5vw; + position: relative; + display: block; + } + + + .divmenu { + width: 25vw; + height: inherit; + margin-right: 1vw; + } + + + #affPoints { + text-align: center; + font-family: Montserrat, impact, Arial Black; + font-size: 2vw; + margin-top: 3.5vw; color: var(--lightsedonca); } + + .containcards { + overflow-x: auto; + display: flex; + flex-wrap: wrap; + padding-top: 5vw; + justify-content: center; + width: 70vw; + margin: 0 auto; + grid-row-gap: 2vw; + column-gap: 2vw; + } + + .flex-item { + flex-grow: 1; + background: var(--lightsedonca); + width: var(--taille); + border-radius: 0.75vw; + padding-right: 0.15vw; + padding-left: 0.15vw; + padding-bottom: 0.25vw; + list-style: none; + display: flex; + margin-right: 0.4vw; + margin-left: 0.4vw; + margin-bottom: 1vw; + -webkit-flex-flow: row wrap; + justify-content: space-around; + } + + .item-form { + width: 4vw; + height: 4vw; + padding-left: 0.1vw; + margin-top: 0.25vw; + border-radius: 10px; + background-color: var(--lighttercia); + } + } diff --git a/SwichGIT/src/index.html b/SwichGIT/src/index.html index 01ff10e..bb16043 100644 --- a/SwichGIT/src/index.html +++ b/SwichGIT/src/index.html @@ -642,7 +642,7 @@