From caf7b4ca3635591f2da4af2191d95cf9c7614d7b Mon Sep 17 00:00:00 2001 From: Tykayn Date: Wed, 1 Jan 2025 11:21:31 +0100 Subject: [PATCH] sass style --- styles.sh | 3 + styles/main.scss | 652 ++++++++++++++++++++++++++++++++++++ styles/style.css | 770 +++++++++++++++++++++---------------------- styles/style.css.map | 1 + 4 files changed, 1026 insertions(+), 400 deletions(-) create mode 100644 styles.sh create mode 100644 styles/main.scss create mode 100644 styles/style.css.map diff --git a/styles.sh b/styles.sh new file mode 100644 index 0000000..b9a8291 --- /dev/null +++ b/styles.sh @@ -0,0 +1,3 @@ +#!/bin/bash + +sass styles/main.scss styles/style.css \ No newline at end of file diff --git a/styles/main.scss b/styles/main.scss new file mode 100644 index 0000000..372cb01 --- /dev/null +++ b/styles/main.scss @@ -0,0 +1,652 @@ +:root { + --background-color:#222; + --text-color:#ddd; + --icon-background:white; + --icon-border:cornflowerblue; + --button-background:#497cd3; + --button-hover-background:#0d377b; + --button-border:#497cd3ff; + --link-color:#38f; + --popup-background:white; + --zoom-message-background:rgba(255, 255, 255, 0.9); + --zoom-message-border:#ff0000; + --color-indication-background:#c0b1b1; + --no-data-border:dodgerblue; + --no-data-link-color:dodgerblue; + --food-marker-color:#fff; +} + +* { + box-sizing: border-box; +} + +html { + height: 100%; + width: 100%; + background: var(--background-color); + padding: 0; + margin: 0; +} + +body { + height: 100%; + width: 100%; + background: var(--background-color); + padding: 0; + margin: 0; + padding: 0; + margin: 0; +} + +html { + font-family: Calibri, Roboto, Arial, "Ubuntu Mono"; + font-size: 1rem; +} + +p { + font-family: Calibri, Roboto, Arial, "Ubuntu Mono"; + font-size: 1rem; + font-size: 1rem; +} + +#map { + height: 95vh; + width: 100%; + margin: 0; + border: solid 2px; +} + +.padded { + padding: 1rem; +} + +#heading { + background: #000; + color: var(--text-color); + min-height: 5%; + height: 4rem; + width: 100%; + padding-left: 1em; +} + +.icon { + width: 0.25rem !important; + height: 0.25rem !important; + display: inline-block; + margin-right: 1rem; + background: var(--icon-background); + border-radius: 100%; + padding: 0.25rem; + margin-top: -0.5rem; + float: left; + border-color: var(--icon-border); +} + +.title { + margin-right: 1em; + line-height: 1.5rem; +} + +h2 { + font-weight: normal; +} + +#overpass-api-controls { + position: fixed; + top: -0.5rem; + left: 4em; + padding: 10px; + background-color: transparent; + border: 0; + z-index: 10; + + a { + display: inline; + } +} + +.has_output_of_irve_specified { + box-shadow: 0 0 15rem darkred; +} + +img.leaflet-marker-icon.tag-socket\:type2_yes { + box-shadow: 0 0 0.5em cornflowerblue; + border-color: cornflowerblue; + border-width: 3px; +} + +.rounded-button, .navigation-link, .panoramax-link, .edit-button { + background: var(--button-background); + padding: 0.5em 1em; + border-radius: 2em; + color: white !important; + border: solid 1px var(--button-border); + float: right; +} + +.panoramax-link { + top: 7rem; + position: absolute; + right: 1rem; + + img { + width: 1rem; + height: 1rem; + } +} + +.side-panel button { + min-width: 15em; + margin-bottom: 0.5em; +} + +.navigation-link { + background: white; + border-radius: 0.25em; + float: none; + position: relative; + top: 5em; + right: -7.9rem; + + &:hover { + border: black; + background: #96b1ea; + } +} + +button:hover { + background: var(--button-hover-background); + border: solid 1px #08285c; + cursor: pointer; +} + +.edit-button { + &:hover { + background: var(--button-hover-background); + border: solid 1px #08285c; + cursor: pointer; + } + + margin-left: 1ch; +} + +.pull-left { + float: left; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(359deg); + } +} + +a { + color: var(--link-color); +} + +.leaflet-control-custom { + padding: 1rem; + background: var(--popup-background); +} + +#spinning_icon { + position: fixed; + top: 0; + left: 0; + z-index: 10; + background: white; + font-size: 2rem; + + svg { + position: fixed; + top: 0.5rem; + right: 3rem; + background: white; + border-radius: 100%; + width: 3rem; + height: 3rem; + animation: spin 2s linear infinite; + } +} + +#footer { + max-width: 70ch; + margin: 0 auto; +} + +.leaflet-popup-content { + min-width: 15rem; + word-break: break-all; + word-wrap: break-word; +} + +.popup-content { + width: 100%; + display: block; + overflow: auto; + min-width: 10rem; + max-width: 20rem; + min-height: 5rem; + max-height: 10rem; +} + +.popup-key { + width: 50%; + display: inline-block; +} + +.popup-value { + width: 42%; + text-align: right; + display: inline-block; + padding-right: 1rem; +} + +.bottom-content { + padding: 0 2rem 4rem; +} + +#star { + left: 10rem; +} + +.color-indication { + min-width: 1rem; + max-width: 5rem; + height: 1rem; + padding: 1rem; + border-radius: 2rem; + display: block; + position: relative; + top: -2rem; + color: white; + text-shadow: 0 0 0.5rem #222; + clear: right; +} + +.no-data { + border-left: 3px solid var(--no-data-border); + padding: 1em 2rem; + min-height: 4rem; + + a { + color: var(--no-data-link-color); + } +} + +/** +marqueurs + */ + +.marker-demo { + margin-right: 1rem; +} + +.map-marker-circle-demo { + border-radius: 100%; + display: inline-block; + width: 1rem; + height: 1rem; + background: #fff; +} + +.color-unknown { + background: var(--color-indication-background); +} + +.map-marker-circle-demo.color-1 { + background: #36423d; +} + +.color-power-lesser-than-50, .map-marker-circle-demo.color-2 { + background: #4e8a8d; +} + +.color-power-lesser-than-100, .map-marker-circle-demo.color-3 { + background: #2999b3; +} + +.color-power-lesser-than-200, .map-marker-circle-demo.color-4 { + background: #1782dd; +} + +.color-power-lesser-than-300, .map-marker-circle-demo.color-5 { + background: #2900ff; +} + +.color-power-lesser-than-max, .map-marker-circle-demo.color-6 { + background: #8000ff; +} + +#found_charging_stations { + margin-top: 2rem; +} + +button { + cursor: pointer; + padding: 0.5rem; + background: white; +} + +#bars_power { + margin: 1rem 0; + height: 3rem; +} + +.bar { + height: 2em; + text-align: right; + padding: 0.35rem 0.25rem 0.35rem 0.35rem; + float: left; +} + +.key-values { + max-height: 4rem; + overflow: auto; + width: 100%; + display: block; +} + +.icon-img { + width: 3rem; + height: 3rem; + fill: #000; +} + +.sockets-list { + margin-top: 0.25rem; +} + +.socket-counter { + background: #dedede; + margin-top: 1rem; + margin-left: -0.25rem; + border-radius: 1rem; + padding: 0.25rem; +} + +.leaflet-interactive { + border: solid 3px white; +} + +#infos_carte { + padding: 1rem 0; +} + +button + button { + margin-left: 1rem; +} + +.filter-group button { + padding: 1rem 2rem; + border-radius: 0.25rem; + + &:after { + position: relative; + float: right; + left: 1rem; + top: 1rem; + font-size: 0.9em; + } + + &.filter-state-hide:after { + content: "cacher"; + color: grey; + } + + &.filter-state-show:after { + content: "montrer"; + color: green; + } + + &.filter-state-showOnly:after { + content: "montrer uniquement"; + color: orange; + } + + &.filter-state-hide { + background: #fff; + } + + &.filter-state-show { + color: green; + } + + &.filter-state-showOnly { + color: orange; + } +} + +.leaflet-control-layers-toggle { + background-size: contain; +} + +#round_power_legend { + font-size: 0.8rem; +} + +.side-panel { + font-size: 1rem; + position: fixed; + left: 0; + top: 0; + width: 20vw; + height: 74vh; + background: white; + box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2); + overflow-y: auto; + 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; + width: 29vw; + border-right: #ccc solid 1px; + height: 93vh; + } + + #map { + margin-left: 28.8vw; + top: 5.55rem; + } +} + +#infos_carte { + clear: both; +} + +#zoomMessage { + position: fixed; + bottom: 5rem; + left: 50%; + transform: translateX(-50%); + background: var(--zoom-message-background); + padding: 1rem 2rem; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + text-align: center; + z-index: 10; + border-left: 4px solid var(--zoom-message-border); + animation: rainbow-border 4s linear infinite; +} + +header { + background: #222; + position: fixed; + width: 20vw; + + h1 { + width: 100vw; + line-height: 3rem; + } + + img { + float: left; + margin-right: 1rem; + } +} + +#map { + z-index: 1; + top: 5.55rem; +} + +.side-panel #map { + margin-left: 26vw; +} + +.rounded-button { + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 1rem; + cursor: pointer; + transition: background-color 0.3s; + + &:hover { + background-color: #0d377b; + } +} + +.search-input { + width: 100%; + padding: 10px; + margin-bottom: 10px; + border: 1px solid var(--button-border); + border-radius: 5px; +} + +#count_features_fond { + position: fixed; + bottom: 1rem; + right: 1rem; + z-index: 10; + background: white; + padding: 1rem; + border-radius: 8px; +} + +#removeMarkers { + margin-right: 1rem; +} + +.filters-box { + margin-top: 4rem; + height: 10rem; + width: auto; + + .rounded-button { + margin-right: 1rem; + margin-bottom: 1rem; + } +} + +#searchButton { + margin-right: 1rem; +} + +/** +overrides leaflet + */ + +.leaflet-left .leaflet-control { + margin-left: 2rem; +} + +/* Style pour mobile */ +@media (max-width: 1200px) { + header h1 { + width: 100vw; + font-size: 1.5rem; + } + + #toggleSidePanel { + right: 1rem; + top: 1.3rem; + } + + body { + /* border: solid 3px blue; */ + } + + .side-panel-open .side-panel { + position: static; + transform: none; + box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); + margin: 20px 0 0; + width: 100vw; + } + + .side-panel.active { + transform: none; + } + + .side-panel-open #map, #map { + margin: 0; + left: 0; + top: 0; + width: 100vw; + height: 90vh; + height: 55vh; + } + + header { + position: static; + } +} + +@keyframes rainbow-border { + 0% { + border-left-color: #ff0000; + } + + 17% { + border-left-color: #ff8000; + } + + 33% { + border-left-color: #ffff00; + } + + 50% { + border-left-color: #00ff00; + } + + 67% { + border-left-color: #0000ff; + } + + 83% { + border-left-color: #8000ff; + } + + 100% { + border-left-color: #ff0000; + } +} diff --git a/styles/style.css b/styles/style.css index fb83908..7edc52b 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,647 +1,617 @@ :root { - --background-color: #222; - --text-color: #ddd; - --icon-background: white; - --icon-border: cornflowerblue; - --button-background: #497cd3; - --button-hover-background: #0d377b; - --button-border: #497cd3ff; - --link-color: #38f; - --popup-background: white; - --zoom-message-background: rgba(255, 255, 255, 0.9); - --zoom-message-border: #ff0000; - --color-indication-background: #c0b1b1; - --no-data-border: dodgerblue; - --no-data-link-color: dodgerblue; - --food-marker-color: #fff; + --background-color:#222; + --text-color:#ddd; + --icon-background:white; + --icon-border:cornflowerblue; + --button-background:#497cd3; + --button-hover-background:#0d377b; + --button-border:#497cd3ff; + --link-color:#38f; + --popup-background:white; + --zoom-message-background:rgba(255, 255, 255, 0.9); + --zoom-message-border:#ff0000; + --color-indication-background:#c0b1b1; + --no-data-border:dodgerblue; + --no-data-link-color:dodgerblue; + --food-marker-color:#fff; } * { - box-sizing: border-box; + box-sizing: border-box; } -html, body { - height: 100%; - width: 100%; - background: var(--background-color); - - padding: 0; - margin: 0; +html { + height: 100%; + width: 100%; + background: var(--background-color); + padding: 0; + margin: 0; } + body { - padding: 0; - margin: 0; + height: 100%; + width: 100%; + background: var(--background-color); + padding: 0; + margin: 0; + padding: 0; + margin: 0; } -html, p { - font-family: Calibri, Roboto, Arial, "Ubuntu Mono"; - font-size: 1rem; +html { + font-family: Calibri, Roboto, Arial, "Ubuntu Mono"; + font-size: 1rem; } p { - font-size: 1rem; + font-family: Calibri, Roboto, Arial, "Ubuntu Mono"; + font-size: 1rem; + font-size: 1rem; } #map { - height: 95vh; - width: 100%; - margin: 0; - border: solid 2px; + height: 95vh; + width: 100%; + margin: 0; + border: solid 2px; } .padded { - padding: 1rem; + padding: 1rem; } #heading { - background: #000; - color: var(--text-color); - min-height: 5%; - height: 4rem; - width: 100%; - padding-left: 1em; + background: #000; + color: var(--text-color); + min-height: 5%; + height: 4rem; + width: 100%; + padding-left: 1em; } .icon { - width: 0.25rem !important; - height: 0.25rem !important; - display: inline-block; - margin-right: 1rem; - background: var(--icon-background); - border-radius: 100%; - padding: 0.25rem; - margin-top: -0.5rem; - float: left; - border-color: var(--icon-border); + width: 0.25rem !important; + height: 0.25rem !important; + display: inline-block; + margin-right: 1rem; + background: var(--icon-background); + border-radius: 100%; + padding: 0.25rem; + margin-top: -0.5rem; + float: left; + border-color: var(--icon-border); } .title { - margin-right: 1em; - line-height: 1.5rem; + margin-right: 1em; + line-height: 1.5rem; } h2 { - font-weight: normal; + font-weight: normal; } #overpass-api-controls { - position: fixed; - top: -0.5rem; - left: 4em; - padding: 10px; - background-color: transparent; - border: 0; - z-index: 10; + position: fixed; + top: -0.5rem; + left: 4em; + padding: 10px; + background-color: transparent; + border: 0; + z-index: 10; } - #overpass-api-controls a { - display: inline; + display: inline; } .has_output_of_irve_specified { - box-shadow: 0 0 15rem darkred; + box-shadow: 0 0 15rem darkred; } img.leaflet-marker-icon.tag-socket\:type2_yes { - box-shadow: 0 0 0.5em cornflowerblue; - border-color: cornflowerblue; - border-width: 3px; + box-shadow: 0 0 0.5em cornflowerblue; + border-color: cornflowerblue; + border-width: 3px; } -.rounded-button, -.navigation-link, -.panoramax-link, -.edit-button { - background: var(--button-background); - padding: 0.5em 1em; - border-radius: 2em; - color: white !important; - border: solid 1px var(--button-border); - float: right; +.rounded-button, .navigation-link, .panoramax-link, .edit-button { + background: var(--button-background); + padding: 0.5em 1em; + border-radius: 2em; + color: white !important; + border: solid 1px var(--button-border); + float: right; } .panoramax-link { - top: 7rem; - position: absolute; - right: 1rem; + top: 7rem; + position: absolute; + right: 1rem; } - .panoramax-link img { - width: 1rem; - height: 1rem; + width: 1rem; + height: 1rem; } .side-panel button { - min-width: 15em; - margin-bottom: 0.5em; + min-width: 15em; + margin-bottom: 0.5em; } .navigation-link { - background: white; - border-radius: 0.25em; - float: none; - position: relative; - top: 5em; - right: -7.9rem; + background: white; + border-radius: 0.25em; + float: none; + position: relative; + top: 5em; + right: -7.9rem; } - .navigation-link:hover { - border: black; - background: #96b1ea; + border: black; + background: #96b1ea; } -button:hover, -.edit-button:hover { - background: var(--button-hover-background); - border: solid 1px #08285c; - cursor: pointer; +button:hover { + background: var(--button-hover-background); + border: solid 1px #08285c; + cursor: pointer; } .edit-button { - margin-left: 1ch; - + margin-left: 1ch; +} +.edit-button:hover { + background: var(--button-hover-background); + border: solid 1px #08285c; + cursor: pointer; } - .pull-left { - float: left; + float: left; } @keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(359deg); - } + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(359deg); + } } - a { - color: var(--link-color); + color: var(--link-color); } .leaflet-control-custom { - padding: 1rem; - background: var(--popup-background); + padding: 1rem; + background: var(--popup-background); } #spinning_icon { - position: fixed; - top: 0; - left: 0; - z-index: 10; - background: white; - font-size: 2rem; + position: fixed; + top: 0; + left: 0; + z-index: 10; + background: white; + font-size: 2rem; } - #spinning_icon svg { - position: fixed; - top: 0.5rem; - right: 3rem; - background: white; - border-radius: 100%; - width: 3rem; - height: 3rem; -} - -#spinning_icon svg { - animation: spin 2s linear infinite; + position: fixed; + top: 0.5rem; + right: 3rem; + background: white; + border-radius: 100%; + width: 3rem; + height: 3rem; + animation: spin 2s linear infinite; } #footer { - max-width: 70ch; - margin: 0 auto; + max-width: 70ch; + margin: 0 auto; } .leaflet-popup-content { - min-width: 15rem; - word-break: break-all; - word-wrap: break-word; + min-width: 15rem; + word-break: break-all; + word-wrap: break-word; } .popup-content { - width: 100%; - display: block; - overflow: auto; - min-width: 10rem; - max-width: 20rem; - min-height: 5rem; - max-height: 10rem; + width: 100%; + display: block; + overflow: auto; + min-width: 10rem; + max-width: 20rem; + min-height: 5rem; + max-height: 10rem; } .popup-key { - width: 50%; - display: inline-block; + width: 50%; + display: inline-block; } .popup-value { - width: 42%; - text-align: right; - display: inline-block; - padding-right: 1rem; + width: 42%; + text-align: right; + display: inline-block; + padding-right: 1rem; } .bottom-content { - padding: 0 2rem 4rem; + padding: 0 2rem 4rem; } #star { - left: 10rem; + left: 10rem; } .color-indication { - min-width: 1rem; - max-width: 5rem; - height: 1rem; - padding: 1rem; - border-radius: 2rem; - display: block; - position: relative; - top: -2rem; - color: white; - text-shadow: 0 0 0.5rem #222; - clear: right; + min-width: 1rem; + max-width: 5rem; + height: 1rem; + padding: 1rem; + border-radius: 2rem; + display: block; + position: relative; + top: -2rem; + color: white; + text-shadow: 0 0 0.5rem #222; + clear: right; } .no-data { - border-left: 3px solid var(--no-data-border); - padding: 1em 2rem; - min-height: 4rem; - + border-left: 3px solid var(--no-data-border); + padding: 1em 2rem; + min-height: 4rem; } - .no-data a { - color: var(--no-data-link-color); + color: var(--no-data-link-color); } /** marqueurs */ .marker-demo { - margin-right: 1rem; + margin-right: 1rem; } .map-marker-circle-demo { - border-radius: 100%; - display: inline-block; - width: 1rem; - height: 1rem; - background: #fff; + border-radius: 100%; + display: inline-block; + width: 1rem; + height: 1rem; + background: #fff; } .color-unknown { - background: var(--color-indication-background); + background: var(--color-indication-background); } - .map-marker-circle-demo.color-1 { - background: #36423d; + background: #36423d; } -.color-power-lesser-than-50, -.map-marker-circle-demo.color-2 { - background: #4e8a8d; +.color-power-lesser-than-50, .map-marker-circle-demo.color-2 { + background: #4e8a8d; } -.color-power-lesser-than-100, -.map-marker-circle-demo.color-3 { - background: #2999b3; +.color-power-lesser-than-100, .map-marker-circle-demo.color-3 { + background: #2999b3; } -.color-power-lesser-than-200, -.map-marker-circle-demo.color-4 { - background: #1782dd; +.color-power-lesser-than-200, .map-marker-circle-demo.color-4 { + background: #1782dd; } -.color-power-lesser-than-300, -.map-marker-circle-demo.color-5 { - background: #2900ff; +.color-power-lesser-than-300, .map-marker-circle-demo.color-5 { + background: #2900ff; } -.color-power-lesser-than-max, -.map-marker-circle-demo.color-6 { - background: #8000ff; +.color-power-lesser-than-max, .map-marker-circle-demo.color-6 { + background: #8000ff; } #found_charging_stations { - margin-top: 2rem; + margin-top: 2rem; } button { - cursor: pointer; - padding: 0.5rem; - background: white; + cursor: pointer; + padding: 0.5rem; + background: white; } #bars_power { - margin: 1rem 0; - height: 3rem; + margin: 1rem 0; + height: 3rem; } .bar { - height: 1em; - text-align: right; - padding: 0.35rem; - padding-right: 0.25rem; - float: left; + height: 2em; + text-align: right; + padding: 0.35rem 0.25rem 0.35rem 0.35rem; + float: left; } .key-values { - max-height: 4rem; - overflow: auto; - width: 100%; - display: block; + max-height: 4rem; + overflow: auto; + width: 100%; + display: block; } .icon-img { - width: 3rem; - height: 3rem; - fill: #000; + width: 3rem; + height: 3rem; + fill: #000; } .sockets-list { - margin-top: 0.25rem; + margin-top: 0.25rem; } .socket-counter { - background: #dedede; - margin-top: 1rem; - margin-left: -0.25rem; - border-radius: 1rem; - padding: 0.25rem; + background: #dedede; + margin-top: 1rem; + margin-left: -0.25rem; + border-radius: 1rem; + padding: 0.25rem; } .leaflet-interactive { - border: solid 3px white; + border: solid 3px white; } #infos_carte { - padding: 1rem 0; + padding: 1rem 0; } button + button { - margin-left: 1rem; + margin-left: 1rem; } .filter-group button { - padding: 1rem 2rem; - border-radius: 0.25rem; + padding: 1rem 2rem; + border-radius: 0.25rem; } - .filter-group button:after { - position: relative; - float: right; - left: 1rem; - top: 1rem; - font-size: 0.9em; + position: relative; + float: right; + left: 1rem; + top: 1rem; + font-size: 0.9em; } - .filter-group button.filter-state-hide:after { - content: "cacher"; - color: grey; + content: "cacher"; + color: grey; } - .filter-group button.filter-state-show:after { - content: "montrer"; - color: green; + content: "montrer"; + color: green; } - .filter-group button.filter-state-showOnly:after { - content: "montrer uniquement"; - color: orange; + content: "montrer uniquement"; + color: orange; } - .filter-group button.filter-state-hide { - background: #fff; + background: #fff; } - .filter-group button.filter-state-show { - color: green; + color: green; } - .filter-group button.filter-state-showOnly { - color: orange; + color: orange; } .leaflet-control-layers-toggle { - background-size: contain; + background-size: contain; } #round_power_legend { - font-size: 0.8rem; + font-size: 0.8rem; } .side-panel { - font-size: 1rem; - position: fixed; - left: 0; - top: 0; - width: 20vw; - height: 74vh; - background: white; - box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2); - overflow-y: auto; - padding: 1rem 2rem; - padding-bottom: 15rem; - z-index: 1000; - visibility: hidden; - top: 5.7rem; - width: 26vw; + font-size: 1rem; + position: fixed; + left: 0; + top: 0; + width: 20vw; + height: 74vh; + background: white; + box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2); + overflow-y: auto; + 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); + 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; + padding-left: 2rem; + color: #666; } .side-panel-open .side-panel { - visibility: visible; + visibility: visible; + width: 29vw; + border-right: #ccc solid 1px; + height: 93vh; } - .side-panel-open #map { - margin-left: 28.8vw; - top: 5.55rem; + margin-left: 28.8vw; + top: 5.55rem; } #infos_carte { - clear: both; + clear: both; } #zoomMessage { - position: fixed; - bottom: 5rem; - left: 50%; - transform: translateX(-50%); - background: var(--zoom-message-background); - padding: 1rem 2rem; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); - text-align: center; - z-index: 10; - border-left: 4px solid var(--zoom-message-border); - animation: rainbow-border 4s linear infinite; + position: fixed; + bottom: 5rem; + left: 50%; + transform: translateX(-50%); + background: var(--zoom-message-background); + padding: 1rem 2rem; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + text-align: center; + z-index: 10; + border-left: 4px solid var(--zoom-message-border); + animation: rainbow-border 4s linear infinite; } header { - background: #222; - position: fixed; - width: 20vw; + background: #222; + position: fixed; + width: 20vw; } - header h1 { - line-height: 3rem; + width: 100vw; + line-height: 3rem; } - header img { - float: left; - margin-right: 1rem; + float: left; + margin-right: 1rem; } - #map { - z-index: 1; - top: 5.55rem; + z-index: 1; + top: 5.55rem; } .side-panel #map { - margin-left: 26vw; + margin-left: 26vw; } - .rounded-button { - display: inline-flex; - align-items: center; - justify-content: center; - font-size: 1rem; - cursor: pointer; - transition: background-color 0.3s; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 1rem; + cursor: pointer; + transition: background-color 0.3s; } - .rounded-button:hover { - background-color: #0d377b; + background-color: #0d377b; } - .search-input { - width: calc(100% - 2rem); - padding: 10px; - margin-bottom: 10px; - border: 1px solid var(--button-border); - border-radius: 5px; + width: 100%; + padding: 10px; + margin-bottom: 10px; + border: 1px solid var(--button-border); + border-radius: 5px; } #count_features_fond { - position: fixed; - bottom: 1rem; - right: 1rem; - z-index: 10; - background: white; - padding: 1rem; - border-radius: 8px; + position: fixed; + bottom: 1rem; + right: 1rem; + z-index: 10; + background: white; + padding: 1rem; + border-radius: 8px; } -#removeMarkers{ - margin-right: 1rem; +#removeMarkers { + margin-right: 1rem; } -.filters-box{ - margin-top: 4rem; - height: 10rem; - width: auto; + +.filters-box { + margin-top: 4rem; + height: 10rem; + width: auto; } -.filters-box .rounded-button{ - margin-right: 1rem; - margin-bottom: 1rem; +.filters-box .rounded-button { + margin-right: 1rem; + margin-bottom: 1rem; } -#searchButton{ - margin-right: 1rem; + +#searchButton { + margin-right: 1rem; } + /** overrides leaflet */ - -.leaflet-left .leaflet-control{ - margin-left: 2rem; +.leaflet-left .leaflet-control { + margin-left: 2rem; } - - - /* Style pour mobile */ @media (max-width: 1200px) { - - header h1{ - width: 100vw; - font-size: 1.5rem; - } - #toggleSidePanel{ - right: 1rem; - top: 1.3rem; - } - body { - /* border: solid 3px blue; */ - } - - .side-panel { - margin: 0; - position: static; - width: 100vw; - height: auto; - transform: none; - box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); - margin-top: 20px; - } - - .side-panel.active { - transform: none; - } - - .side-panel-open #map, - #map { - margin: 0; - left: 0; - top: 0; - width: 100vw; - height: 90vh; - height: 55vh; - } - - header { - position: static; - } - + header h1 { + width: 100vw; + font-size: 1.5rem; + } + #toggleSidePanel { + right: 1rem; + top: 1.3rem; + } + body { + /* border: solid 3px blue; */ + } + .side-panel-open .side-panel { + position: static; + transform: none; + box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); + margin: 20px 0 0; + width: 100vw; + } + .side-panel.active { + transform: none; + } + .side-panel-open #map, #map { + margin: 0; + left: 0; + top: 0; + width: 100vw; + height: 90vh; + height: 55vh; + } + header { + position: static; + } +} +@keyframes rainbow-border { + 0% { + border-left-color: #ff0000; + } + 17% { + border-left-color: #ff8000; + } + 33% { + border-left-color: #ffff00; + } + 50% { + border-left-color: #00ff00; + } + 67% { + border-left-color: #0000ff; + } + 83% { + border-left-color: #8000ff; + } + 100% { + border-left-color: #ff0000; + } } -@keyframes rainbow-border { - 0% { - border-left-color: #ff0000; - } - 17% { - border-left-color: #ff8000; - } - 33% { - border-left-color: #ffff00; - } - 50% { - border-left-color: #00ff00; - } - 67% { - border-left-color: #0000ff; - } - 83% { - border-left-color: #8000ff; - } - 100% { - border-left-color: #ff0000; - } -} \ No newline at end of file +/*# sourceMappingURL=style.css.map */ diff --git a/styles/style.css.map b/styles/style.css.map new file mode 100644 index 0000000..9d6b59a --- /dev/null +++ b/styles/style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EAOE;;AANA;EACE;EACA;EACA;;;AAMJ;EACE;;;AAGF;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;;AAIJ;AAAA;AAAA;AAIA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAIA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AACA;EACE;IACE;IACA;;EAGF;IACE;IACA;;EAGF;AACE;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE","file":"style.css"} \ No newline at end of file