mirror of
https://forge.chapril.org/tykayn/libre-charge-map
synced 2025-06-20 01:34:43 +02:00
split style
This commit is contained in:
Tykayn
tykayn
parent
2265ee5c8b
commit
d9488e7151
18 changed files with 1005 additions and 277 deletions
41
styles/_animations.scss
Normal file
41
styles/_animations.scss
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
@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 bounce {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(-45deg) translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(-45deg) translateY(-5px);
|
||||
}
|
||||
}
|
||||
72
styles/_mobile.scss
Normal file
72
styles/_mobile.scss
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
/* Style pour mobile ---------------------------------- */
|
||||
@media (max-width: 1200px) {
|
||||
header h1 {
|
||||
width: 100vw;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
#bars_power {
|
||||
position: fixed;
|
||||
bottom: -16px;
|
||||
width: 123vw;
|
||||
}
|
||||
|
||||
#toggleSidePanel {
|
||||
position: fixed;
|
||||
top: 0.6rem;
|
||||
right: 0.6rem;
|
||||
z-index: 10;
|
||||
background: #a9a9a9;
|
||||
padding: 0.2rem 1rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
|
||||
border: 0;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.filters-box {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.close-results-button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
background: var(--button-border);
|
||||
margin: 0;
|
||||
position: relative;
|
||||
top: -4.9rem;
|
||||
right: 1.4rem;
|
||||
height: 2.6rem;
|
||||
}
|
||||
}
|
||||
56
styles/_osmose.scss
Normal file
56
styles/_osmose.scss
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
.osmose-marker-drop:hover .osmose-marker-inner {
|
||||
animation: bounce 0.5s ease infinite;
|
||||
background-color: #9F2BFF;
|
||||
}
|
||||
|
||||
.proposed-tags-container {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
margin: 10px 0;
|
||||
padding: 5px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.proposed-tags {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 2px 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.action-buttons {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
|
||||
a {
|
||||
padding: 5px 10px;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-button.josm {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
50
styles/_overrides.scss
Normal file
50
styles/_overrides.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
/**
|
||||
overrides leaflet
|
||||
*/
|
||||
|
||||
.leaflet-left .leaflet-control {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
/* Styles pour les contrôles de couches */
|
||||
.leaflet-control-layers {
|
||||
&.base-layers {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 9l10-5 10 5-10 5-10-5zm0 6l10 5 10-5M2 12l10 5 10-5"/></svg>');
|
||||
background-size: 16px;
|
||||
background-position: 6px center;
|
||||
background-repeat: no-repeat;
|
||||
padding-left: 28px !important;
|
||||
|
||||
.leaflet-control-layers-toggle {
|
||||
background-image: none;
|
||||
width: auto;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "Fonds";
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.overlay-layers {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>');
|
||||
background-size: 16px;
|
||||
background-position: 6px center;
|
||||
background-repeat: no-repeat;
|
||||
padding-left: 28px !important;
|
||||
|
||||
.leaflet-control-layers-toggle {
|
||||
background-image: none;
|
||||
width: auto;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "Calques";
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
58
styles/_recherche.scss
Normal file
58
styles/_recherche.scss
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
#searchLocation {
|
||||
width: 80%;
|
||||
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#removeMarkers {
|
||||
margin-right: 1rem;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
#searchResults {
|
||||
width: 100%;
|
||||
border-color: var(--button-border);
|
||||
}
|
||||
|
||||
#searchButton {
|
||||
margin-right: 1rem;
|
||||
margin-top: -2.8rem;
|
||||
}
|
||||
|
||||
#count_features_fond {
|
||||
position: fixed;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
z-index: 10;
|
||||
background: white;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.search-source-control {
|
||||
margin: 5px 0;
|
||||
font-size: 0.9em;
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.close-results-button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
0
styles/_responsive.scss
Normal file
0
styles/_responsive.scss
Normal file
279
styles/main.scss
279
styles/main.scss
|
|
@ -559,29 +559,6 @@ header {
|
|||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.filters-box {
|
||||
position: fixed;
|
||||
bottom: 0.7rem;
|
||||
|
|
@ -594,9 +571,6 @@ header {
|
|||
}
|
||||
}
|
||||
|
||||
#searchButton {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.info {
|
||||
|
||||
|
|
@ -678,251 +652,10 @@ header {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Animation au survol plus visible */
|
||||
|
||||
.osmose-marker-drop:hover .osmose-marker-inner {
|
||||
animation: bounce 0.5s ease infinite;
|
||||
background-color: #9F2BFF;
|
||||
}
|
||||
|
||||
.proposed-tags-container {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
margin: 10px 0;
|
||||
padding: 5px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.proposed-tags {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.proposed-tags tr:nth-child(even) {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.proposed-tags td {
|
||||
padding: 2px 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.proposed-tags td:first-child {
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.action-buttons a {
|
||||
padding: 5px 10px;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.action-buttons .edit-button.josm {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-buttons a:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
#searchResults {
|
||||
width: 100%;
|
||||
border-color: var(--button-border);
|
||||
}
|
||||
|
||||
.search-source-control {
|
||||
margin: 5px 0;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.search-source-control label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.search-source-control input[type="checkbox"] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(-45deg) translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(-45deg) translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
overrides leaflet
|
||||
*/
|
||||
|
||||
.leaflet-left .leaflet-control {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.close-results-button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* Style pour mobile ---------------------------------- */
|
||||
@media (max-width: 1200px) {
|
||||
header h1 {
|
||||
width: 100vw;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
#bars_power {
|
||||
position: fixed;
|
||||
bottom: -16px;
|
||||
width: 123vw;
|
||||
}
|
||||
|
||||
#toggleSidePanel {
|
||||
position: fixed;
|
||||
top: 0.6rem;
|
||||
right: 0.6rem;
|
||||
z-index: 10;
|
||||
background: #a9a9a9;
|
||||
padding: 0.2rem 1rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
|
||||
border: 0;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.filters-box {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.close-results-button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
background: var(--button-border);
|
||||
margin: 0;
|
||||
position: relative;
|
||||
top: -4.9rem;
|
||||
right: 1.4rem;
|
||||
height: 2.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles pour les contrôles de couches */
|
||||
.leaflet-control-layers {
|
||||
&.base-layers {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 9l10-5 10 5-10 5-10-5zm0 6l10 5 10-5M2 12l10 5 10-5"/></svg>');
|
||||
background-size: 16px;
|
||||
background-position: 6px center;
|
||||
background-repeat: no-repeat;
|
||||
padding-left: 28px !important;
|
||||
|
||||
.leaflet-control-layers-toggle {
|
||||
background-image: none;
|
||||
width: auto;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "Fonds";
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.overlay-layers {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>');
|
||||
background-size: 16px;
|
||||
background-position: 6px center;
|
||||
background-repeat: no-repeat;
|
||||
padding-left: 28px !important;
|
||||
|
||||
.leaflet-control-layers-toggle {
|
||||
background-image: none;
|
||||
width: auto;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "Calques";
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import '_osmose.scss';
|
||||
@import '_recherche.scss';
|
||||
@import '_mobile.scss';
|
||||
@import '_overrides.scss';
|
||||
@import '_responsive.scss';
|
||||
@import '_animations.scss';
|
||||
714
styles/style.css
714
styles/style.css
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue