pascal.lafourcade
/
tactique-basket
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bon css

Browse Source
master
emeric dallot 4 years ago
parent a0463b4e7f
commit fb67782568
3 changed files with 269 additions and 190 deletions
Show Stats Download Patch File Download Diff File

BIN
Basket/BDD.db
View File

Binary file not shown.

195
Basket/basket.css
Unescape View File

@ -1,168 +1,168 @@
#barre_nav{ #barre_nav{
background: black; background: black;
height: 56px; height: 56px;
/*padding-top: 5px;*/ /*padding-top: 5px;*/
vertical-align: center; vertical-align: center;
} }
#titre{ #titre{
font-family: "Lucida Console", Courier, monospace; font-family: "Lucida Console", Courier, monospace;
text-shadow: white 0 -1px; text-shadow: white 0 -1px;
} }
#navbarSupportedContent{ #navbarSupportedContent{
margin: 8px; margin: 8px;
} }
.nav-item:hover{ .nav-item:hover{
background-color: orange; background-color: orange;
border-radius: 10px; border-radius: 10px;
width: 70%; width: 70%;
} }
#image_ballon{ #image_ballon{
margin-bottom: 5px; margin-bottom: 5px;
} }
body{ body{
background-color: #303030; background-color: #303030;
overflow-x: scroll; overflow-x: scroll;
overflow-y: scroll; overflow-y: scroll;
} }
.collapse.width, .collapse.width,
.collapsing.width { .collapsing.width {
max-width: 0; max-width: 0;
min-width: 0; min-width: 0;
width: 0; width: 0;
transition: all .2s ease; transition: all .2s ease;
} }
.collapse .flex-column { .collapse .flex-column {
overflow: auto; overflow: auto;
flex-wrap: nowrap; /* Optional, if you don't want the links to form columns if they overflow */ flex-wrap: nowrap; /* Optional, if you don't want the links to form columns if they overflow */
} }
.collapse .flex-column li { .collapse .flex-column li {
width: 100%; width: 100%;
} }
.feather { .feather {
width: 16px; width: 16px;
height: 16px; height: 16px;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
.sidebar { .sidebar {
width: 20%; width: 20%;
margin-top: 56px; margin-top: 56px;
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
z-index: 100; /* Behind the navbar */ z-index: 100; /* Behind the navbar */
padding: 0px 0 0; /* Height of navbar */ padding: 0px 0 0; /* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
background-color: #b9b7b7; background-color: #b9b7b7;
} }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.sidebar { .sidebar {
top: 5rem; top: 5rem;
} }
} }
.sidebar-sticky { .sidebar-sticky {
position: relative; position: relative;
top: 0; top: 0;
height: calc(100vh - 48px); height: calc(100vh - 48px);
padding-top: .5rem; padding-top: .5rem;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
} }
@supports ((position: -webkit-sticky) or (position: sticky)) { @supports ((position: -webkit-sticky) or (position: sticky)) {
.sidebar-sticky { .sidebar-sticky {
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
} }
} }
.sidebar .nav-link { .sidebar .nav-link {
font-weight: 500; font-weight: 500;
color: #333; color: #333;
} }
.sidebar .nav-link .feather { .sidebar .nav-link .feather {
margin-right: 4px; margin-right: 4px;
color: #999; color: #999;
} }
.sidebar .nav-link.active { .sidebar .nav-link.active {
color: #007bff; color: #007bff;
} }
.sidebar .nav-link:hover .feather, .sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather { .sidebar .nav-link.active .feather {
color: inherit; color: inherit;
} }
.sidebar-heading { .sidebar-heading {
font-size: .75rem; font-size: .75rem;
text-transform: uppercase; text-transform: uppercase;
} }
#list-home-list{ #list-home-list{
height: 50px; height: 50px;
width: 49%; width: 49%;
} }
#ul{ #ul{
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
} }
#list-home-list{ #list-home-list{
padding-right:10px; padding-right:10px;
width: 99% width: 99%
} }
#bouton{ #bouton{
margin-left: 15px; margin-left: 15px;
} }
#arbre{ #arbre{
height: 150px; height: 150px;
width: 80%; width: 80%;
} }
#sidebarMenu{ #sidebarMenu{
min-width: 50px; min-width: 50px;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
} }
#terrain{ #terrain{
margin-top: 2%; margin-top: 2%;
margin-left: 5%; margin-left: 5%;
width: 75%; width: 75%;
height: auto; height: auto;
} }
#demiTerrainDroit{ #demiTerrainDroit{
margin-top: 2%; margin-top: 2%;
margin-left: 20%; margin-left: 20%;
width: 75%; width: 75%;
height: auto; height: auto;
} }
#demiTerrainGauche{ #demiTerrainGauche{
margin-top: 2%; margin-top: 2%;
margin-left: 20%; margin-left: 20%;
width: 75%; width: 75%;
height: auto; height: auto;
/*transform: rotate(90deg);*/ /*transform: rotate(90deg);*/
} }
.boutons { .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 { .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 { .yay {
display: none; display: none;
} }
.popup .overlay { .popup .overlay {
@ -240,7 +240,7 @@ box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4);
.popupT .content { .popupT .content {
position:absolute; position:absolute;
top:98px; top:98px;
left:830px; left:750px;
transform:translate(-50%,-50%) scale(0); transform:translate(-50%,-50%) scale(0);
background:#fff; background:#fff;
width:200px; 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; font-family:"Open Sans",sans-serif;
} }
.popupT .content { .popupT .close-btn {
cursor:pointer;
position:absolute; position:absolute;
top:98px; right: 10px;
left:750px; top:20px;
transform:translate(-50%,-50%) scale(0); width:30px;
background:#fff; height:30px;
width:200px; background:#222;
height:80px; color:#fff;
z-index:2; font-size:25px;
font-weight:600;
line-height:30px;
text-align:center; text-align:center;
border-radius:50%;
box-sizing:border-box;
font-family:"Open Sans",sans-serif;
} }

264
basket.css
Unescape View File

@ -1,195 +1,194 @@
#barre_nav{ #barre_nav{
background: black; background: black;
height: 56px; height: 56px;
/*padding-top: 5px;*/ /*padding-top: 5px;*/
vertical-align: center; vertical-align: center;
} }
#titre{ #titre{
font-family: "Lucida Console", Courier, monospace; font-family: "Lucida Console", Courier, monospace;
text-shadow: white 0 -1px; text-shadow: white 0 -1px;
} }
#navbarSupportedContent{ #navbarSupportedContent{
margin: 8px; margin: 8px;
} }
.nav-item:hover{ .nav-item:hover{
background-color: orange; background-color: orange;
border-radius: 10px; border-radius: 10px;
width: 70%; width: 70%;
} }
#image_ballon{ #image_ballon{
margin-bottom: 5px; margin-bottom: 5px;
} }
body{ body{
background-color: #303030; background-color: #303030;
overflow-x: scroll; overflow-x: scroll;
overflow-y: scroll; overflow-y: scroll;
} }
.collapse.width, .collapse.width,
.collapsing.width { .collapsing.width {
max-width: 0; max-width: 0;
min-width: 0; min-width: 0;
width: 0; width: 0;
transition: all .2s ease; transition: all .2s ease;
} }
.collapse .flex-column { .collapse .flex-column {
overflow: auto; overflow: auto;
flex-wrap: nowrap; /* Optional, if you don't want the links to form columns if they overflow */ flex-wrap: nowrap; /* Optional, if you don't want the links to form columns if they overflow */
} }
.collapse .flex-column li { .collapse .flex-column li {
width: 100%; width: 100%;
} }
.feather { .feather {
width: 16px; width: 16px;
height: 16px; height: 16px;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
.sidebar { .sidebar {
width: 20%; width: 20%;
margin-top: 56px; margin-top: 56px;
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
z-index: 100; /* Behind the navbar */ 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); box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
background-color: #b9b7b7; background-color: #b9b7b7;
} }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.sidebar { .sidebar {
top: 5rem; top: 5rem;
} }
} }
.sidebar-sticky { .sidebar-sticky {
position: relative; position: relative;
top: 0; top: 0;
height: calc(100vh - 48px); height: calc(100vh - 48px);
padding-top: .5rem; padding-top: .5rem;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
} }
@supports ((position: -webkit-sticky) or (position: sticky)) { @supports ((position: -webkit-sticky) or (position: sticky)) {
.sidebar-sticky { .sidebar-sticky {
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
} }
} }
.sidebar .nav-link { .sidebar .nav-link {
font-weight: 500; font-weight: 500;
color: #333; color: #333;
} }
.sidebar .nav-link .feather { .sidebar .nav-link .feather {
margin-right: 4px; margin-right: 4px;
color: #999; color: #999;
} }
.sidebar .nav-link.active { .sidebar .nav-link.active {
color: #007bff; color: #007bff;
} }
.sidebar .nav-link:hover .feather, .sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather { .sidebar .nav-link.active .feather {
color: inherit; color: inherit;
} }
.sidebar-heading { .sidebar-heading {
font-size: .75rem; font-size: .75rem;
text-transform: uppercase; text-transform: uppercase;
} }
#list-home-list{ #list-home-list{
height: 50px; height: 50px;
width: 49%; width: 49%;
} }
#ul{ #ul{
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
} }
#list-home-list{ #list-home-list{
padding-right:10px; padding-right:10px;
width: 99% width: 99%
} }
#bouton{ #bouton{
margin-left: 15px; margin-left: 15px;
} }
#arbre{ #arbre{
height: 150px; height: 150px;
width: 80%; width: 80%;
} }
#sidebarMenu{ #sidebarMenu{
min-width: 50px; min-width: 50px;
overflow-y: scroll;
overflow-x: hidden;
} }
#terrain{ #terrain{
margin-top: 2%; margin-top: 2%;
margin-left: 5%; margin-left: 5%;
width: 75%; width: 75%;
height: auto; height: auto;
} }
#demiTerrainDroit{ #demiTerrainDroit{
margin-top: 2%; margin-top: 2%;
margin-left: 20%; margin-left: 20%;
width: 75%; width: 75%;
height: auto; height: auto;
} }
#demiTerrainGauche{ #demiTerrainGauche{
margin-top: 2%; margin-top: 2%;
margin-left: 20%; margin-left: 20%;
width: 75%; width: 75%;
height: auto; height: auto;
/*transform: rotate(90deg);*/ /*transform: rotate(90deg);*/
} }
.boutons { .boutons {
margin-top: 1%; margin-top: 5px;
} }
#bouttonadd: hover {
background-color : "red";
border-color: "yellow";
}
#bouttonadd:active{ #bouttonadd:active{
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);
} }
.red { .red {
background-color: "red";
margin-left: 15%; box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4);
} }
.yay { .yay {
display: none; display: none;
} }
.popup .overlay { .popup .overlay {
top:0px; top:0px;
left:0px; left:0px;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.7);
z-index:1; z-index:1;
display:none; display:none;
} }
.popup .content { .popup .content {
position:absolute; 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; text-align:center;
border-radius:50%; 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; cursor:pointer;
position:absolute; position:absolute;
left: 15px; right: 10px;
top:20px; top:20px;
width:30px; width:30px;
height: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; text-align:center;
border-radius:50%; border-radius:50%;
} }
.popup.active .overlay { .popupT.active .overlay {
display:block; display:block;
} }
.popup.active .content { .popupT.active .content {
transition:all 300ms ease-in-out; transition:all 300ms ease-in-out;
transform:translate(-50%,-50%) scale(1); 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=' */ .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 .skin_resultat
{ {
position:absolute; position:absolute;
top:330px; top:330px;
left:60px; left:60px;
border:1px solid black; /* dessine un cadre noir autour du 'input' et d'un pixel d'épaisseur */ border:1px solid black; /* dessine un cadre noir autour du 'input' et d'un pixel d'épaisseur */

Write Preview
Loading…
Cancel
Save