Restructure MVC into public/src layout
Co-authored-by: LeOSW42 <673670+LeOSW42@users.noreply.github.com>
This commit is contained in:
240
public/views/css/d.map.css
Executable file
240
public/views/css/d.map.css
Executable file
@@ -0,0 +1,240 @@
|
||||
/* Custom configuration for the map page */
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
height: calc(100% - 65px);
|
||||
}
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
width: 100%;
|
||||
max-width: 820px;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
#advert {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 9999;
|
||||
background: rgba(50,50,50,0.8);
|
||||
color: #ddd;
|
||||
padding: 20px;
|
||||
border-bottom: 6px solid blue;
|
||||
text-align: center;
|
||||
}
|
||||
#advert a{
|
||||
color: white;
|
||||
}
|
||||
#advert .dots span {
|
||||
opacity: 0;
|
||||
animation: appear 1.5s infinite;
|
||||
}
|
||||
|
||||
#advert .dots span:nth-child(1) {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
#advert .dots span:nth-child(2) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
#advert .dots span:nth-child(3) {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
@keyframes appear {
|
||||
0%, 80%, 100% {
|
||||
opacity: 0;
|
||||
}
|
||||
40% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/*****************************************
|
||||
Controls of the map
|
||||
*****************************************/
|
||||
|
||||
/* General */
|
||||
|
||||
.leaflet-control-container {
|
||||
position: absolute !important;
|
||||
width: 850px !important;
|
||||
height: 100%;
|
||||
left: calc(50% - 425px) !important;
|
||||
font-family: "Fira Sans", "Open Sans",Helvetica,Arial,sans-serif !important;
|
||||
}
|
||||
.leaflet-fullscreen-on .leaflet-control-container {
|
||||
position: absolute !important;
|
||||
width: 100% !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
.leaflet-bottom.leaflet-left {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.leaflet-fullscreen-on .leaflet-bottom.leaflet-left {
|
||||
margin-bottom: 15px !important;
|
||||
margin-left: 15px !important;
|
||||
}
|
||||
|
||||
.leaflet-bottom.leaflet-right {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.leaflet-fullscreen-on .leaflet-bottom.leaflet-right {
|
||||
margin-bottom: 15px !important;
|
||||
margin-right: 15px !important;
|
||||
}
|
||||
|
||||
.leaflet-control {
|
||||
clear: none !important;
|
||||
padding: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
color: #c1c1c1 !important;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
margin: 0 0 0 15px !important;
|
||||
}
|
||||
.leaflet-left .leaflet-control {
|
||||
margin: 0 15px 0 0 !important;
|
||||
}
|
||||
|
||||
.leaflet-control a, .leaflet-control button {
|
||||
display: inline-block !important;
|
||||
float: none !important;
|
||||
border: none !important;
|
||||
background-color: #212121 !important;
|
||||
border-radius: 0 !important;
|
||||
color: #c1c1c1 !important;
|
||||
border-right: 1px #3e3e3e solid !important;
|
||||
}
|
||||
.leaflet-control a:last-child, .leaflet-control button:last-child {
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
/* Zoom */
|
||||
|
||||
.leaflet-control-zoom-in, .leaflet-control-zoom-out {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
.leaflet-disabled {
|
||||
background-color: rgba(33, 33, 33, 0.8) !important;
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
|
||||
/* Fullscreen */
|
||||
|
||||
.leaflet-control-fullscreen a {
|
||||
background: #212121 !important;
|
||||
}
|
||||
.leaflet-control-fullscreen a:before {
|
||||
content: "\f065";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
background: none !important;
|
||||
}
|
||||
.leaflet-fullscreen-on .leaflet-control-fullscreen a:before {
|
||||
content: "\f066";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
/* Baselayers */
|
||||
|
||||
.leaflet-control-layers a {
|
||||
background: #212121 !important;
|
||||
width: 26px !important;
|
||||
height: 26px !important;
|
||||
line-height: 26px !important;
|
||||
text-align: center !important;
|
||||
border-right: none !important;
|
||||
}
|
||||
.leaflet-control-layers a:before {
|
||||
content: "\f5fd";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
background: none !important;
|
||||
}
|
||||
.leaflet-control-layers-expanded a {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.leaflet-control-layers-list {
|
||||
padding: 3px 8px !important;
|
||||
color: white !important;
|
||||
background: #212121 !important;
|
||||
width: inherit !important;
|
||||
}
|
||||
|
||||
/* Scale */
|
||||
|
||||
.leaflet-control-scale-line {
|
||||
height: 30px !important;
|
||||
top: 2px !important;
|
||||
position: relative !important;
|
||||
background: #212121 !important;
|
||||
color: #c1c1c1 !important;
|
||||
text-align: center !important;
|
||||
border: none !important;
|
||||
font-size: 12px !important;
|
||||
line-height: 30px !important;
|
||||
}
|
||||
.leaflet-control-scale {
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
|
||||
/* Credit / Legend */
|
||||
|
||||
.leaflet-control button {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
#footer-credits, #footer-legend {
|
||||
background: #212121;
|
||||
padding: 15px;
|
||||
margin: 15px auto 0 auto;
|
||||
color: #c1c1c1;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
width: 100%;
|
||||
max-width: 820px;
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#footer-credits .close-link, #footer-legend .close-link {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
color: white;
|
||||
padding: 0 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#footer-credits a, #footer-legend a {
|
||||
color: white;
|
||||
}
|
||||
#footer-credits a:hover, #footer-legend a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.legend_item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.poi_icon {
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.leaflet-fullscreen-on .easy-button-container {
|
||||
display: none;
|
||||
}
|
||||
Reference in New Issue
Block a user