83 lines
3.5 KiB
CSS
83 lines
3.5 KiB
CSS
|
body { margin:0; padding:0; overflow:hidden; touch-action:none; }
|
||
|
|
#map { position:absolute; top:0; bottom:0; width:100%; overflow:hidden; }
|
||
|
|
p {font-size: 14px;}
|
||
|
|
|
||
|
|
#sidebar {
|
||
|
|
z-index: 10; position: absolute; right: 10px; top: 10px; width: 320px;
|
||
|
|
background-color:rgba(255,255,255,.9); padding: 20px; border-radius: 3px; }
|
||
|
|
#title h1 { color: #390; }
|
||
|
|
#introduction p { margin-bottom: 10px; line-height: 1.5em }
|
||
|
|
|
||
|
|
#taxas>div { display: inline-block; }
|
||
|
|
#taxas p { text-align: center; }
|
||
|
|
.button {
|
||
|
|
background-color: #fff; background-size:cover;
|
||
|
|
border-radius: 5px; border: #390 1px solid; height:48px; width: 48px;
|
||
|
|
margin: 4px; margin-left: 8px;
|
||
|
|
}
|
||
|
|
.button.active { border:color:#390; }
|
||
|
|
.button:hover { border-color: #390; }
|
||
|
|
|
||
|
|
.button#Plantae { background-image: url('img/icon0_plantae.png') }
|
||
|
|
.button#Aves { background-image: url('img/icon0_aves.png') }
|
||
|
|
.button#Insecta { background-image: url('img/icon0_insecta.png') }
|
||
|
|
.button#Fungi { background-image: url('img/icon0_fungi.png') }
|
||
|
|
|
||
|
|
.button#Plantae.active { background-image: url('img/icon1_plantae.png') }
|
||
|
|
.button#Aves.active { background-image: url('img/icon1_aves.png') }
|
||
|
|
.button#Insecta.active { background-image: url('img/icon1_insecta.png') }
|
||
|
|
.button#Fungi.active { background-image: url('img/icon1_fungi.png') }
|
||
|
|
|
||
|
|
.button#Plantae:hover { background-image: url('img/icon1_plantae.png') }
|
||
|
|
.button#Aves:hover { background-image: url('img/icon1_aves.png') }
|
||
|
|
.button#Insecta:hover { background-image: url('img/icon1_insecta.png') }
|
||
|
|
.button#Fungi:hover { background-image: url('img/icon1_fungi.png') }
|
||
|
|
|
||
|
|
.marker {
|
||
|
|
border: #fff 1.4px solid; border-radius: 50%; cursor: pointer; box-shadow: 1px 1px 1px;
|
||
|
|
height: 48px; width: 48px; margin: -24px 0 0 -24px;
|
||
|
|
background-size: cover; }
|
||
|
|
.marker:hover { z-index: 1; border-color: #390; }
|
||
|
|
.marker.sm {
|
||
|
|
background-color: none; border-width: 0; box-shadow: 0 0 0;
|
||
|
|
height: 32px; width: 32px; margin-left: -16px; margin-top:-16px;}
|
||
|
|
.marker.sm:hover { border: #fff 1px solid; }
|
||
|
|
|
||
|
|
#me { height: 16px; width: 16px; background-size: 100% 100%; }
|
||
|
|
|
||
|
|
.mapboxgl-ctrl-geocoder { z-index: 0; }
|
||
|
|
|
||
|
|
.mapboxgl-popup { width: 280px; }
|
||
|
|
.mapboxgl-popup-close-button { background-color: rgba(255,255,255,.9); height: 30px; width: 30px; font-size: 18px; padding:2px; border-radius: 1px;}
|
||
|
|
.mapboxgl-popup p { font-size: 12px; line-height: 16px; margin-top:6px;}
|
||
|
|
.img-md { height: 260px; width:260px; background-position: center center; background-repeat: no-repeat; background-size: cover; }
|
||
|
|
|
||
|
|
.loading { display:none; }
|
||
|
|
|
||
|
|
@media only screen and (max-width: 479px) {
|
||
|
|
|
||
|
|
.mobile-hide{ display: none; }
|
||
|
|
.mobile-show{ display: inline-block !important; }
|
||
|
|
|
||
|
|
#sidebar {
|
||
|
|
z-index: 2; border-radius: 0; padding:2vh 4vw 2vh 4vw;
|
||
|
|
position: absolute; width:100%; height:150px;
|
||
|
|
bottom: 30px; left:0; right:0; top:inherit;
|
||
|
|
}
|
||
|
|
#sidebar p { margin-bottom: 2vh; font-size: 1em; }
|
||
|
|
|
||
|
|
#title { margin-bottom: 2vh; }
|
||
|
|
#title h1 { font-size: 20px; line-height: 26px; display: inline-block; }
|
||
|
|
#info {
|
||
|
|
height:18px; width:18px; display: inline-block; margin-left:3px;
|
||
|
|
background-image: url('img/arrow_down.svg'); background-size:cover; }
|
||
|
|
|
||
|
|
.button { width:15vw; margin: .5vh 1vw .5vh 10vw; height:15vw;}
|
||
|
|
.button:first-of-type { margin-left:5vw; }
|
||
|
|
.button img { height:100%; width: 100%; }
|
||
|
|
#taxas p { text-align: center; margin-left: 5vw; }
|
||
|
|
|
||
|
|
.mapboxgl-popup-content { padding: 1vw; padding-bottom: 2vw; }
|
||
|
|
.mapboxgl-popup { width: 52vw; }
|
||
|
|
.img-md { height: 50vw; width: 50vw;}
|
||
|
|
}
|