146 lines
6.2 KiB
CSS
146 lines
6.2 KiB
CSS
/*
|
|
Document : style
|
|
Created on : 03.04.2014, 10:51:45
|
|
Author : all4dk
|
|
Description:
|
|
Purpose of the stylesheet follows.
|
|
*/
|
|
|
|
html {height: 100%;}
|
|
body {margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;}
|
|
html body h1 {font-family: Ubuntu, inherit;}
|
|
html body h2 {font-family: Ubuntu, inherit;}
|
|
html body h3 {font-family: Ubuntu, inherit;}
|
|
div#map {width: 100%; position: absolute; top: 0; bottom: 0px;}
|
|
body.openBox div#map {right: 250px;}
|
|
div.clear {clear: both;}
|
|
div.infoCard {text-align: justify;}
|
|
div.infoCard h3 {text-align: center; margin-top: 0;}
|
|
div.infoCard img {width: 200px; float: left; margin: 0 10px 5px 0; cursor: pointer;}
|
|
div.infoCard .photosCount {position: absolute;margin: 3px;color: white;background-color: black;border-radius: 3px;padding: 2px 4px;opacity: 0.5;}
|
|
div.header {display: block; position: absolute; top: 0px; left: 40px; z-index: 1000; background-color: rgba(255,255,255,0.7); padding: 5px 10px; border-radius: 0 0 5px 5px;}
|
|
div.header img {height: 89px;}
|
|
div.add {cursor: pointer;}
|
|
|
|
.fotorama {display: inline-block;}
|
|
.fotorama .fotorama__caption{text-align: left; font-size: 9px; opacity: 0.7;}
|
|
|
|
#addPointModal .extraImage .button {cursor: pointer; background-color: #eeeeee;}
|
|
#addPointModal .extraImage .remove:hover {background-color: #f4bfbf;}
|
|
#addPointModal .extraImage .add:hover {background-color: #bff4c8;}
|
|
#addPointModal .extraImage .type.button:hover {background-color: #ddd;}
|
|
#addPointModal .extraImage .input-group-addon.type.button {border-left: 0px;}
|
|
|
|
div.leaflet-popup-content div.control {margin-top: 7px;}
|
|
div.leaflet-popup-content div.control a {min-width: 150px; color: #333; font-size: 14px; font-weight: normal;}
|
|
div.leaflet-popup-content div.control a span.label {display: inline; font-size: 12px; font-weight: normal; color: #333;}
|
|
div.leaflet-popup-content div.control:hover a {min-width: 40px;}
|
|
div.leaflet-popup-content div.control:hover a span.label {display: none;}
|
|
div.leaflet-popup-content div.control:hover a:hover {min-width: 150px;}
|
|
div.leaflet-popup-content div.control:hover a:hover span.label {display: inline;}
|
|
div.leaflet-popup-content button span.label {display: none; font-size: 90%; font-weight: normal; color: #333;}
|
|
div.leaflet-popup-content button:hover {min-width: 150px;}
|
|
div.leaflet-popup-content button:hover span.label {display: inline;}
|
|
|
|
.form-group .error {display: none;}
|
|
.form-group.has-error .error {display: inline-block;}
|
|
|
|
#wayPoints {margin-bottom: 10px;}
|
|
#wayPoints .wayPoint {cursor: pointer; border: solid 1px #999; padding: 2px 5px; margin-bottom: 3px; background-color: #fff;}
|
|
#wayPoints .wayPoint span.del {font-weight: bold; color: red;}
|
|
|
|
#routes {margin-bottom: 10px; height: 200px;}
|
|
#routes .route {cursor: pointer; border: solid 1px #999; padding: 2px 5px; margin-bottom: 3px;}
|
|
#routes .route span {font-weight: bold; color: red;}
|
|
|
|
/*Controls for BOX*/
|
|
div#control {width: 50px; position: absolute; top: 0; right: 0;bottom: 50px; color: white; font-size: 20px; padding-top: 10px;}
|
|
body.openBox div#control {right: 250px;}
|
|
div#control div {background-color: rgba(15, 15, 15, 0.65); border-radius: 8px 0 0 8px; width: auto; padding: 10px; margin-left: 10px; margin-bottom: 8px; cursor: pointer;}
|
|
div#control div:before {cursor: pointer;}
|
|
div#control div:hover {background-color: #000;}
|
|
div#control div.active {background-color: rgb(255, 162, 0);}
|
|
div#control div.big {font-size: 22px; padding: 14px; margin-left: 0;}
|
|
div#control div._t {border-radius: 8px 0 0 0;border-bottom: solid 1px #666; margin-bottom: 0;}
|
|
div#control div._c {border-radius: 0; border-bottom: solid 1px #666; margin-bottom: 0;}
|
|
div#control div._b {border-radius: 0 0 0 8px;}
|
|
div#control div.space {height: 10px; background-color: transparent; padding: 0;}
|
|
|
|
/*BOX*/
|
|
body.openBox div#box {display: block;}
|
|
div#box {width: 250px; display: none; position: absolute; top: 0; right: 0;bottom: 0px; border-left: 2px solid rgba(45, 45, 45, 0.8); padding: 0 7px;}
|
|
div#box #boxClose {position: absolute; right: 7px; top: 7px; color: #999; font-size: 18px; font-weight: bolder; cursor: pointer;}
|
|
div#box div {display: none;}
|
|
div#box div div{display: block;}
|
|
div#box h3 {margin-top: 10px;}
|
|
div#box {background-image: url('/img/back.png'); background-repeat: no-repeat; background-position: 100% 100%;}
|
|
|
|
.layers {cursor: pointer;}
|
|
.layers.selected {font-weight: bold;}
|
|
|
|
/*Leaflet FIX*/
|
|
.leaflet-popup-content-wrapper .leaflet-popup-scrolled {border-bottom: none;border-top: none;}
|
|
|
|
#suggestContainer {position: absolute;top: 40px;background-color: #fff;padding-bottom: 8px; border-bottom: 1px solid #333; width: 100%; display: none;}
|
|
#suggestContainer > div:hover {background-color: #eee;}
|
|
#suggestContainer > div.hover {background-color: #eee;}
|
|
|
|
/* ------------- PAGE --------------------*/
|
|
.coords-container {text-align: right; margin-bottom: 20px; color: #777;font-size: 0.9em;}
|
|
#pageSmoothBackground {z-index: -100; width: 106%; height: 106%; position: fixed; top: -3%; left: -3%; background-size: cover; -webkit-filter: blur(5px);}
|
|
.pagePoinsNearCards {display: inline-block; overflow: hidden; padding: 0 2px 4px 2px;width: 186px; height: 139px;}
|
|
.pagePoinsNearCardsImg {width: 186px; height: 139px;}
|
|
|
|
|
|
/* -------------------------------------------*/
|
|
/* ------------- ADAPTIVE --------------------*/
|
|
/* -------------------------------------------*/
|
|
|
|
/* Target landscape smartphones, portrait tablets, narrow desktops */
|
|
@media screen and (max-width:1000px) {
|
|
.modal-dialog {
|
|
width: 100%!important;
|
|
height: 100%!important;
|
|
margin: 0!important;
|
|
}
|
|
.modal-content {
|
|
width: 100%!important;
|
|
height: 100%!important;
|
|
}
|
|
|
|
.modal-header {
|
|
border: none!important;
|
|
margin-bottom: -47px!important;
|
|
}
|
|
.modal-header .close {
|
|
font-size: 40px!important;
|
|
position: absolute!important;
|
|
z-index: 10!important;
|
|
right: 10px!important;
|
|
top: 0px!important;
|
|
}
|
|
.modal-header h4 {
|
|
display: none!important;
|
|
}
|
|
.modal-body {
|
|
padding: 3px!important;
|
|
margin: 0!important;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width:815px) {
|
|
body {
|
|
padding: 0!important;
|
|
}
|
|
|
|
div.container{
|
|
padding: 5px;
|
|
}
|
|
|
|
div.header a img {
|
|
width: 115px;
|
|
height: 69px;
|
|
}
|
|
}
|
|
|