up

styles/style.css

@@ -1,7 +1,7 @@
 html, body {
     height: 100%;
     width: 100%;
-    background: #ccc;
+    background: #222;
 }
 
 body {
@@ -94,7 +94,7 @@ img.leaflet-marker-icon.tag-socket\:type2_yes {
     float: right;
 }
 
-#chercherButton {
+.side-panel button {
     min-width: 10em;
 }
 
@@ -112,7 +112,7 @@ img.leaflet-marker-icon.tag-socket\:type2_yes {
     background: #96b1ea;
 }
 
-#chercherButton:hover,
+button:hover,
 .edit-button:hover {
     background: #0d377b;
     border: solid 1px #08285c;
@@ -149,8 +149,8 @@ a {
 
 #spinning_icon {
     position: fixed;
-    bottom: 11rem;
-    left: 20.5rem;
+    top: 0;
+    left: 0;
     z-index: 10;
     background: white;
     font-size: 2rem;
@@ -292,6 +292,7 @@ marqueurs
 button {
     cursor: pointer;
     padding: 0.5rem;
+    background: white;
 }
 
 #bars_power {
@@ -302,7 +303,7 @@ button {
 .bar {
     height: 1em;
     text-align: right;
-    padding: 0.55rem;
+    padding: 0.35rem;
     padding-right: 0.25rem;
     float: left;
 }
@@ -339,6 +340,11 @@ button {
 #infos_carte{
     padding: 1rem 0;
 }
+
+button + button{
+    margin-left: 1rem;
+    
+}
 .filter-group button{
     padding: 1rem 2rem;
     border-radius: 0.25rem;
@@ -376,6 +382,9 @@ button {
     background-size:contain;
 }
 
+#round_power_legend{
+    font-size: 0.8rem;
+}
 .side-panel {
     font-size: 1rem;
     position: fixed;
@@ -386,8 +395,36 @@ button {
     background: white;
     box-shadow: -2px 0 5px rgba(0,0,0,0.2);
     overflow-y: auto;
-    padding: 20px;
+    padding: 1rem 2rem;
+    padding-bottom: 15rem;
     z-index: 1000;
+    visibility: hidden;
+    top: 5.7rem;
+    width: 26vw;
+}
+
+#toggleSidePanel{
+    position: fixed;
+    top: 1rem;
+    right: 2rem;
+    z-index: 10;
+    background: white;
+    padding: 1rem 2rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+header{
+    padding-left: 2rem;
+    color: #666;
+}
+.side-panel-open .side-panel{
+    visibility: visible;
+}
+.side-panel-open #map{
+    margin-left: 23.5rem;
+}
+#infos_carte{
+    clear:both;
 }
 #zoomMessage{
     position: fixed;
@@ -404,6 +441,17 @@ button {
     animation: rainbow-border 4s linear infinite;
 }
 
+header{
+    background: #222;
+    position: fixed;
+}
+header h1{
+    line-height: 3rem;
+}
+header img{
+    float: left;
+    margin-right: 1rem;
+}
 @keyframes rainbow-border {
     0% { border-left-color: #ff0000; }
     17% { border-left-color: #ff8000; }
@@ -416,7 +464,10 @@ button {
 
 #map {
     z-index: 1;
-    margin-right: 300px; /* Pour laisser de la place au panneau */
+    top: 5.55rem;
+}
+.side-panel #map{
+    margin-left: 20vw;
 }
 
 /* Style pour mobile */