bon css

Basket/basket.css

@@ -240,7 +240,7 @@ box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4);
 .popupT .content {
   position:absolute;
   top:98px; 
-  left:830px;
+  left:750px;
   transform:translate(-50%,-50%) scale(0);
   background:#fff;
   width:200px;
@@ -252,19 +252,20 @@ box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4);
   font-family:"Open Sans",sans-serif;
 }
  
-.popupT .content {
+.popupT .close-btn {
+  cursor:pointer;
   position:absolute;
-  top:98px; 
-  left:750px;
-  transform:translate(-50%,-50%) scale(0);
-  background:#fff;
-  width:200px;
-  height:80px;
-  z-index:2;
+  right: 10px;
+  top:20px;
+  width:30px;
+  height:30px;
+  background:#222;
+  color:#fff;
+  font-size:25px;
+  font-weight:600;
+  line-height:30px;
   text-align:center;
-  
-  box-sizing:border-box;
-  font-family:"Open Sans",sans-serif;
+  border-radius:50%;
 }
 
 

basket.css

@@ -1,3 +1,4 @@
+
 #barre_nav{
   background: black;
   height: 56px;
@@ -62,7 +63,7 @@ body{
   bottom: 0;
   right: 0;
   z-index: 100; /* Behind the navbar */
-	padding: 48px 0 0; /* Height of navbar */
+  padding: 0px 0 0; /* Height of navbar */
   box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
   background-color: #b9b7b7;
 }
@@ -134,6 +135,8 @@ body{
 
 #sidebarMenu{
   min-width: 50px;
+  overflow-y: scroll;
+  overflow-x: hidden;
 }
 
 #terrain{
@@ -159,21 +162,19 @@ body{
 }
 
 .boutons {
-	margin-top: 1%;
+  margin-top: 5px;
 }
 
-#bouttonadd: hover {
-	background-color : "red";
-	border-color: "yellow"; 
-}
+
 
 #bouttonadd:active{
 box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4); 
 }
 
 .red {
-	background-color: "red";
-	margin-left: 15%;
+  
+  box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4); 
+  
 }
 
 .yay {
@@ -184,13 +185,11 @@ box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4);
   
   top:0px;
   left:0px;
-  width:100vw;
-  height:100vh;
-  background:rgba(0,0,0,0.7);
   z-index:1;
   display:none;
 }
 
+ 
 .popup .content {
   position:absolute;
   top:183px; 
@@ -221,10 +220,42 @@ box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4);
   text-align:center;
   border-radius:50%;
 }
-.close-btn2 {
+
+ 
+.popup.active .overlay {
+  display:block;
+}
+ 
+.popup.active .content {
+  transition:all 300ms ease-in-out;
+  transform:translate(-50%,-50%) scale(1);
+}
+
+.test{
+  width: 155px;
+  height: 40px;
+  display: block;
+}
+
+.popupT .content {
+  position:absolute;
+  top:98px; 
+  left:750px;
+  transform:translate(-50%,-50%) scale(0);
+  background:#fff;
+  width:200px;
+  height:80px;
+  z-index:2;
+  text-align:center;
+  
+  box-sizing:border-box;
+  font-family:"Open Sans",sans-serif;
+}
+ 
+.popupT .close-btn {
   cursor:pointer;
   position:absolute;
-  left: 15px;
+  right: 10px;
   top:20px;
   width:30px;
   height:30px;
@@ -237,15 +268,61 @@ box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4);
   border-radius:50%;
 }
 
-.popup.active .overlay {
+
+
+ 
+.popupT.active .overlay {
   display:block;
 }
  
-.popup.active .content {
+.popupT.active .content {
   transition:all 300ms ease-in-out;
   transform:translate(-50%,-50%) scale(1);
 }
 
+
+.popupL .content {
+  position:absolute;
+  top:98px; 
+  left:865px;
+  transform:translate(-50%,-50%) scale(0);
+  background:#fff;
+  width:200px;
+  height:80px;
+  z-index:2;
+  text-align:center;
+  
+  box-sizing:border-box;
+  font-family:"Open Sans",sans-serif;
+}
+ 
+.popupL .close-btn {
+  cursor:pointer;
+  position:absolute;
+  right: 10px;
+  top:20px;
+  width:30px;
+  height:30px;
+  background:#222;
+  color:#fff;
+  font-size:25px;
+  font-weight:600;
+  line-height:30px;
+  text-align:center;
+  border-radius:50%;
+}
+
+ 
+.popupL.active .overlay {
+  display:block;
+}
+ 
+.popupL.active .content {
+  transition:all 300ms ease-in-out;
+  transform:translate(-50%,-50%) scale(1);
+}
+
+
 .skin_barre  /* on reprend le nom qu'on a mis dans 'class=' */
 {
 
@@ -315,6 +392,7 @@ box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4);
 .skin_resultat
 {
   position:absolute;
+
   top:330px;
   left:60px;
   border:1px solid black; /* dessine un cadre noir autour du 'input' et d'un pixel d'épaisseur */