galadrielmap_sk/public/galadrielmap.css

a server-based chartplotter navigation software for pleasure crafts, motorhomes, and off-road cars. It's can be used on tablets and smartphones without install any app. Only browser need.

/* Стили, заменяющие соответствующее в оригинальных стилях */
/* leaflet */
.leaflet-touch .leaflet-bar a {
	/*background-color: rgba(255,255,255,0.66);*/
    width: 1.65rem;
    height: 1.65rem;
    line-height: 1.65rem;
}
.leaflet-top .leaflet-control {
    margin-top: 40px;
}
.leaflet-control-scale-line {
	font-size: 24px;
}

/* leaflet-sidebar-v2 */
.leaflet-sidebar-tabs {
	background-color: rgba(255, 255, 255, 0.66); 
}
.leaflet-sidebar-content {
	background-color: rgba(255, 255, 255, 0.9);
}
.disabled {
	opacity:0.3; /* Полупрозрачность элемента */
	/*visibility: hidden;*/
}
.leaflet-sidebar-close { 	/* уберём свойства, исходно приписываемые стилю. Но навешивание обработчика на этот стиль где-то в скрипте останется. В результате этим стилем мы можем навесить обработчик без порчи картинки. */
  position: unset;
  top: unset;
  width: unset;
  height: unset;
  text-align: unset;
}
.leaflet-sidebar-close-icn { /* создадим аналогичный стиль с другим именем, но на который не навешен обработчик. Картинка сохранится. */
  position: absolute;
  top: 0;
  width: 40px;
  height: 40px;
  text-align: center;
  cursor: pointer; 
}
.leaflet-measure-path-measurement { /* цифры на маршруте */
	font-size: 130%;
}
.leaflet-measure-path-measurement > div { /* подпись на маршруте */
    position: relative;
    margin-top: -75% !important;	/* поскольку собственный стиль библиотеки leaflet-measure-path загружается позже */
    left: -50%;
}
@media (max-width: 767px) { /* 854×480 */
	.leaflet-sidebar-header {
		font-size: 9px;
	}
	.leaflet-sidebar { 	/*  */
		width: 160px;
		max-width: 160px; 
	}
	.leaflet-sidebar-pane {
		min-width: 140px; 
	} 
	.leaflet-sidebar-left ~ .leaflet-control-container .leaflet-left {
		left: 160px; 
	}
	.leaflet-sidebar-right ~ .leaflet-control-container .leaflet-right {
		right: 160px; 
	}
	.big_symbol {
		font-size:20px;
	}
	.scaledText {
		font-size:50%;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	.leaflet-sidebar-header {
		font-size: 12px;
	}
	.leaflet-sidebar { 	/* исходно на 40 пикселов больше, чем leaflet-sidebar-pane */
		width: 250px;
		max-width: 250px; 
	}
	.leaflet-sidebar-pane {
		min-width: 230px; 
	} 
	.leaflet-sidebar-left ~ .leaflet-control-container .leaflet-left {
		left: 280px; 
	}
	.leaflet-sidebar-right ~ .leaflet-control-container .leaflet-right {
		right: 280px; 
	}
	.big_symbol {
		font-size:25px;
	}
	.scaledText {
		font-size:75%;
	}
}
@media (min-width: 992px) and (max-width: 1199px) { /* 1920x1200 */
	.leaflet-sidebar-header {
		font-size: 15px;
	}
	.leaflet-sidebar {
		width: 270px;
		max-width: 270px; 
	}
	.leaflet-sidebar-pane {
		min-width: 250px; 
	} 
	.leaflet-sidebar-left ~ .leaflet-control-container .leaflet-left {
		left: 315px; 
	}
	.leaflet-sidebar-right ~ .leaflet-control-container .leaflet-right {
		right: 315px; 
	}
	.big_symbol {
		font-size:40px;
	}
	.scaledText {
		font-size:inherit;
	}
}
@media (min-width: 1200px) {
	.leaflet-sidebar {
		width: 320px;
		max-width: 320px; 
	}
	.leaflet-sidebar-pane {
		min-width: 300px; 
	} 
	.leaflet-sidebar-left ~ .leaflet-control-container .leaflet-left {
		left: 335px; 
	}
	.leaflet-sidebar-right ~ .leaflet-control-container .leaflet-right {
		right: 335px; 
	}
	.big_symbol {
		font-size:52px;
	}
	.scaledText {
		font-size:inherit;
	}
}
.leaflet-sidebar-left .leaflet-sidebar-close-icn {
    right: 0; 
}
.leaflet-sidebar-right .leaflet-sidebar-close-icn {
    left: 0; 
}
.leaflet-sidebar-tabs > ul {
	margin: 1rem auto;
}

@media (min-height: 500px) {
	.leaflet-sidebar-tabs > li, .leaflet-sidebar-tabs > ul > li {
		margin: 0 auto;
	}
	#MOB-tab {
		margin-top:1rem;
		margin-bottom:1rem;
	}
}
@media (min-height: 501px) and (max-height: 649px) {
	.leaflet-sidebar-tabs > li, .leaflet-sidebar-tabs > ul > li {
		margin: 0.5rem auto;
	}
	#MOB-tab {
		margin-top:1rem;
		margin-bottom:50%;
	}
}
@media (min-height: 650px) {
	.leaflet-sidebar-tabs > li, .leaflet-sidebar-tabs > ul > li {
		margin: 0.75rem auto;
	}
	#MOB-tab {
		margin-top:1rem;
		margin-bottom:100%;
	}
}

.leaflet-sidebar-tabs > ul > li > a > img {
	vertical-align: middle;
}

div.leaflet-control-zoom {
	padding: 5%;
}
.leaflet-control-zoom-in {
	margin-bottom: 2rem;
}
.leaflet-control-zoom-out {
	margin-top: 2rem;
}
.leaflet-control-attribution {
	background-color:rgba(0, 0, 0, 0)!important;	/* прозрачный фон, защищённый от переписывания в других css */
}


/* Свои стили */

ul { /* нужно, чтобы стили работали */
  list-style-type: none;
  margin: 2rem 0 2rem 0;
  padding: 0;
}
/*#mapList, #mapDisplayed, #trackList, #trackDisplayed, #routeList, #routeDisplayed, #geocodedList */
.commonList {
	cursor: pointer;
	font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
	border-bottom: 1px solid #ccc;
	margin-bottom: 1rem;
	overflow:auto;
}
.commonList > li {
	margin: 0 0 0.5rem 0;
	white-space: nowrap;
}
.currentTrackName {
	background-color:  rgba(227, 231, 251, 0.8) /* бледно-голубой полупрозрачный Потому что так эти li разноцветные, и эти цвета сохраняются. Но текущий трек, типа, надо выделить */
	/*background-color:  rgba(227, 231, 251, 0.8) !important; *//* бледно-голубой полупрозрачный Потому что так эти li разноцветные, и эти цвета сохраняются. Но текущий трек, типа, надо выделить */
}
.big_symbol {
	height:90%;
	width: 100%;	
	display: flex;
    justify-content: center; /*Центрирование по горизонтали*/
    align-items: center;    /* Центрирование по вертикали */
    text-align: center;
    /*padding: 0 auto;*/
}

/* Переключатель https://proto.io/freebies/onoff/ */
    .onoffswitch {
        position: relative; width: 60px;
        -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
    }
    .onoffswitch-checkbox {
        display: none;
    }
    .onoffswitch-label {
        display: block; overflow: hidden; cursor: pointer;
        border: 2px solid #999999; border-radius: 20px;
    }
    .onoffswitch-inner {
        display: block; width: 200%; margin-left: -100%;
        transition: margin 0.3s ease-in 0s;
    }
    .onoffswitch-inner:before, .onoffswitch-inner:after {
        display: block; float: left; width: 50%; height: 16px; padding: 0; line-height: 16px;
        font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
        box-sizing: border-box;
    }
    .onoffswitch-inner:before {
        content: "ON";
        padding-left: 10px;
        background-color: #34A7C1; color: #FFFFFF;
    }
    .onoffswitch-inner:after {
        content: "OFF";
        padding-right: 10px;
        background-color: #EEEEEE; color: #999999;
        text-align: right;
    }
    .onoffswitch-switch {
        display: block; width: 13px; margin: 1.5px;
        background: #FFFFFF;
        position: absolute; top: 0; bottom: 0;
        right: 40px;
        border: 2px solid #999999; border-radius: 20px;
        transition: all 0.3s ease-in 0s; 
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
        margin-left: 0;
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
        right: 0px; 
    } 
    
/* Кнопки управления рисованием маршрута */
.routeControls > input[type="radio"] {
	display:none;
}
.routeControls > input[type="radio"] + label {
	cursor: pointer;
    display: inline-block;
	font-weight: bold;
	font-size: 120%;
	width: 47%;
    border: 1px solid;
    border-radius: 5px;
    text-align: center;
    padding: 0.5rem 0;
}
.routeControls > input[type="radio"].L + label {
    /*border-right: none;*/
    border-radius: 5px 0px 0px 5px;
    width:47%;
}
.routeControls > input[type="radio"].R + label {
    /*border-left: none;*/
    border-radius: 0px 5px 5px 0px;
    width:47%;
}
.routeControls > input[type="radio"]:checked + label {
	background-color: rgb(233, 233, 233);
	box-shadow: 5px 5px 7px #9b9b9b inset;
}
.routeControls > input[type="radio"]:disabled + label {
	opacity: 0.3;
}

/* копирование в буфер обмена */
.CopyToClipboardClass {
    justify-content: center; /*Центрирование по горизонтали*/
    align-items: center;     /*Центрирование по вертикали */
    text-align: center;
}

#hideControl {
	--control-size: 20vmin;
	position: fixed; 
	width: var(--control-size);
	height: var(--control-size);
	z-index: 1; /*на 0 кто-то перехватывает события. А leaflet начинается с 100 */
	display: none;
	border: dashed fuchsia;
}

/*  */
.leaflet-popup-content {
    max-height: 55vh;
    overflow-y: auto;
}
.mobIcon {
	opacity: 0.7;
}

.NoGpsCursorIcon {
	filter: grayscale(100%);
}

.centerMarkIcon {
	background: transparent;
}

.selectedTile {
	background-color: rgba(0,200,255,0.35);
}

.scaledText {
}

.pointButton {
	width:2rem;
	padding:0.2rem;
	margin:0 1rem;
}

.pointButton:disabled {
	opacity: 0.2;
}

.okButton {
	width:2rem;
	padding:0.2rem;
	margin:0 0.5rem;
}

.showedMapName {
	font-weight: bold;
}

.distCirclesRadiusTooltip {
	color: #FD00DB;
	background: transparent;
	border: none;
	border-width : 0;
	border : 0;
}