master
emeric dallot 4 years ago
parent a0463b4e7f
commit fb67782568

Binary file not shown.

@ -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;
}
@ -173,12 +173,12 @@ 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%;
}

@ -1,196 +1,195 @@
#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;
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 */

Loading…
Cancel
Save