From fb6778256810c4f8473e721c401375b21456dc08 Mon Sep 17 00:00:00 2001 From: emeric dallot Date: Tue, 30 Mar 2021 12:17:59 +0200 Subject: [PATCH] bon css --- Basket/BDD.db | Bin 385024 -> 385024 bytes Basket/basket.css | 195 +++++++++++++++++----------------- basket.css | 264 ++++++++++++++++++++++++++++++---------------- 3 files changed, 269 insertions(+), 190 deletions(-) diff --git a/Basket/BDD.db b/Basket/BDD.db index fe422ad6fe7983d0c8e25c856d81db11234f97e9..a1a5d824d20d645ab4179d98fbe88302cd8c652a 100644 GIT binary patch delta 243 zcmZoTAl`65e1bHi>_i!7R#^r;`S(d7oR+OKepS}5(yjB7S6aP5|{-^xsfLizQOIb1| z7Kt)3>oa2LnEa$)0ch6+2L22D&-kbDKLcv$oOtj`F$A#k0027VQIG%t delta 166 zcmZoTAl`65e1bHi^h6nFR%r%36NQZ_3;1~$`EN7u-{#-QAI=}XSunt!f3m-P1_vWY zVo^y(Y0=~j^Cg&b@^d!dlGjS$VB~+w!2gv0I8fa_ekMysknH3q{R%)so-y!01Hx(i z&w!Gh{F7(SH=n$DzUbzs^W__0`kn%%_VP1Xf%UaN)@KA_CLm@8VwUZX^;u;%000T3 BJ2C(O diff --git a/Basket/basket.css b/Basket/basket.css index 42e06e5..25cdeb8 100644 --- a/Basket/basket.css +++ b/Basket/basket.css @@ -1,168 +1,168 @@ #barre_nav{ - background: black; - height: 56px; - /*padding-top: 5px;*/ - vertical-align: center; + background: black; + height: 56px; + /*padding-top: 5px;*/ + vertical-align: center; } #titre{ - font-family: "Lucida Console", Courier, monospace; - text-shadow: white 0 -1px; + font-family: "Lucida Console", Courier, monospace; + text-shadow: white 0 -1px; } #navbarSupportedContent{ - margin: 8px; + margin: 8px; } .nav-item:hover{ - background-color: orange; - border-radius: 10px; - width: 70%; + background-color: orange; + border-radius: 10px; + width: 70%; } #image_ballon{ - margin-bottom: 5px; + margin-bottom: 5px; } body{ - background-color: #303030; - overflow-x: scroll; - overflow-y: scroll; + background-color: #303030; + overflow-x: scroll; + overflow-y: scroll; } .collapse.width, .collapsing.width { - max-width: 0; - min-width: 0; - width: 0; - transition: all .2s ease; + max-width: 0; + min-width: 0; + width: 0; + transition: all .2s ease; } .collapse .flex-column { - overflow: auto; - flex-wrap: nowrap; /* Optional, if you don't want the links to form columns if they overflow */ + overflow: auto; + flex-wrap: nowrap; /* Optional, if you don't want the links to form columns if they overflow */ } .collapse .flex-column li { - width: 100%; + width: 100%; } .feather { - width: 16px; - height: 16px; - vertical-align: text-bottom; + width: 16px; + height: 16px; + vertical-align: text-bottom; } .sidebar { - width: 20%; - margin-top: 56px; - position: fixed; - top: 0; - bottom: 0; - right: 0; - z-index: 100; /* Behind the navbar */ - padding: 0px 0 0; /* Height of navbar */ - box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); - background-color: #b9b7b7; + width: 20%; + margin-top: 56px; + position: fixed; + top: 0; + bottom: 0; + right: 0; + z-index: 100; /* Behind the navbar */ + padding: 0px 0 0; /* Height of navbar */ + box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); + background-color: #b9b7b7; } @media (max-width: 767.98px) { - .sidebar { - top: 5rem; - } + .sidebar { + top: 5rem; + } } .sidebar-sticky { - position: relative; - top: 0; - height: calc(100vh - 48px); - padding-top: .5rem; - overflow-x: hidden; - overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ + position: relative; + top: 0; + height: calc(100vh - 48px); + padding-top: .5rem; + overflow-x: hidden; + overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ } @supports ((position: -webkit-sticky) or (position: sticky)) { - .sidebar-sticky { - position: -webkit-sticky; - position: sticky; - } + .sidebar-sticky { + position: -webkit-sticky; + position: sticky; + } } .sidebar .nav-link { - font-weight: 500; - color: #333; + font-weight: 500; + color: #333; } .sidebar .nav-link .feather { - margin-right: 4px; - color: #999; + margin-right: 4px; + color: #999; } .sidebar .nav-link.active { - color: #007bff; + color: #007bff; } .sidebar .nav-link:hover .feather, .sidebar .nav-link.active .feather { - color: inherit; + color: inherit; } .sidebar-heading { - font-size: .75rem; - text-transform: uppercase; + font-size: .75rem; + text-transform: uppercase; } #list-home-list{ - height: 50px; - width: 49%; + height: 50px; + width: 49%; } #ul{ - padding-left: 15px; - padding-right: 15px; + padding-left: 15px; + padding-right: 15px; } #list-home-list{ - padding-right:10px; - width: 99% + padding-right:10px; + width: 99% } #bouton{ - margin-left: 15px; + margin-left: 15px; } #arbre{ - height: 150px; - width: 80%; + height: 150px; + width: 80%; } #sidebarMenu{ - min-width: 50px; - overflow-y: scroll; - overflow-x: hidden; + min-width: 50px; + overflow-y: scroll; + overflow-x: hidden; } #terrain{ - margin-top: 2%; - margin-left: 5%; - width: 75%; - height: auto; + margin-top: 2%; + margin-left: 5%; + width: 75%; + height: auto; } #demiTerrainDroit{ - margin-top: 2%; - margin-left: 20%; - width: 75%; - height: auto; + margin-top: 2%; + margin-left: 20%; + width: 75%; + height: auto; } #demiTerrainGauche{ - margin-top: 2%; - margin-left: 20%; - width: 75%; - height: auto; - /*transform: rotate(90deg);*/ + margin-top: 2%; + margin-left: 20%; + width: 75%; + height: auto; + /*transform: rotate(90deg);*/ } .boutons { - margin-top: 5px; + margin-top: 5px; } @@ -172,13 +172,13 @@ box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4); } .red { - - box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4); - + + box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4); + } .yay { - display: none; + display: none; } .popup .overlay { @@ -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%; } diff --git a/basket.css b/basket.css index dafc86b..25cdeb8 100644 --- a/basket.css +++ b/basket.css @@ -1,195 +1,194 @@ + #barre_nav{ - background: black; - height: 56px; - /*padding-top: 5px;*/ - vertical-align: center; + background: black; + height: 56px; + /*padding-top: 5px;*/ + vertical-align: center; } #titre{ - font-family: "Lucida Console", Courier, monospace; - text-shadow: white 0 -1px; + font-family: "Lucida Console", Courier, monospace; + text-shadow: white 0 -1px; } #navbarSupportedContent{ - margin: 8px; + margin: 8px; } .nav-item:hover{ - background-color: orange; - border-radius: 10px; - width: 70%; + background-color: orange; + border-radius: 10px; + width: 70%; } #image_ballon{ - margin-bottom: 5px; + margin-bottom: 5px; } body{ - background-color: #303030; - overflow-x: scroll; - overflow-y: scroll; + background-color: #303030; + overflow-x: scroll; + overflow-y: scroll; } .collapse.width, .collapsing.width { - max-width: 0; - min-width: 0; - width: 0; - transition: all .2s ease; + max-width: 0; + min-width: 0; + width: 0; + transition: all .2s ease; } .collapse .flex-column { - overflow: auto; - flex-wrap: nowrap; /* Optional, if you don't want the links to form columns if they overflow */ + overflow: auto; + flex-wrap: nowrap; /* Optional, if you don't want the links to form columns if they overflow */ } .collapse .flex-column li { - width: 100%; + width: 100%; } .feather { - width: 16px; - height: 16px; - vertical-align: text-bottom; + width: 16px; + height: 16px; + vertical-align: text-bottom; } .sidebar { - width: 20%; - margin-top: 56px; - position: fixed; - top: 0; - bottom: 0; - right: 0; - z-index: 100; /* Behind the navbar */ - padding: 48px 0 0; /* Height of navbar */ - box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); - background-color: #b9b7b7; + width: 20%; + margin-top: 56px; + position: fixed; + top: 0; + bottom: 0; + right: 0; + z-index: 100; /* Behind the navbar */ + padding: 0px 0 0; /* Height of navbar */ + box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); + background-color: #b9b7b7; } @media (max-width: 767.98px) { - .sidebar { - top: 5rem; - } + .sidebar { + top: 5rem; + } } .sidebar-sticky { - position: relative; - top: 0; - height: calc(100vh - 48px); - padding-top: .5rem; - overflow-x: hidden; - overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ + position: relative; + top: 0; + height: calc(100vh - 48px); + padding-top: .5rem; + overflow-x: hidden; + overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ } @supports ((position: -webkit-sticky) or (position: sticky)) { - .sidebar-sticky { - position: -webkit-sticky; - position: sticky; - } + .sidebar-sticky { + position: -webkit-sticky; + position: sticky; + } } .sidebar .nav-link { - font-weight: 500; - color: #333; + font-weight: 500; + color: #333; } .sidebar .nav-link .feather { - margin-right: 4px; - color: #999; + margin-right: 4px; + color: #999; } .sidebar .nav-link.active { - color: #007bff; + color: #007bff; } .sidebar .nav-link:hover .feather, .sidebar .nav-link.active .feather { - color: inherit; + color: inherit; } .sidebar-heading { - font-size: .75rem; - text-transform: uppercase; + font-size: .75rem; + text-transform: uppercase; } #list-home-list{ - height: 50px; - width: 49%; + height: 50px; + width: 49%; } #ul{ - padding-left: 15px; - padding-right: 15px; + padding-left: 15px; + padding-right: 15px; } #list-home-list{ - padding-right:10px; - width: 99% + padding-right:10px; + width: 99% } #bouton{ - margin-left: 15px; + margin-left: 15px; } #arbre{ - height: 150px; - width: 80%; + height: 150px; + width: 80%; } #sidebarMenu{ - min-width: 50px; + min-width: 50px; + overflow-y: scroll; + overflow-x: hidden; } #terrain{ - margin-top: 2%; - margin-left: 5%; - width: 75%; - height: auto; + margin-top: 2%; + margin-left: 5%; + width: 75%; + height: auto; } #demiTerrainDroit{ - margin-top: 2%; - margin-left: 20%; - width: 75%; - height: auto; + margin-top: 2%; + margin-left: 20%; + width: 75%; + height: auto; } #demiTerrainGauche{ - margin-top: 2%; - margin-left: 20%; - width: 75%; - height: auto; - /*transform: rotate(90deg);*/ + margin-top: 2%; + margin-left: 20%; + width: 75%; + height: auto; + /*transform: rotate(90deg);*/ } .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 { - display: none; + display: none; } .popup .overlay { top:0px; left:0px; - width:100vw; - height:100vh; - background:rgba(0,0,0,0.7); z-index:1; display:none; } + .popup .content { position:absolute; @@ -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; @@ -236,16 +267,62 @@ box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4); text-align:center; 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 */