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.

html {
	--sidebar-width: 23vmax;
	/*--font-size: calc(var(--sidebar-width)*0.065);*/
	--font-size: calc(1.1em); /* Размер шрифта устанавливается браузером не пропорционально размеру viewport */
}
/* Стили, заменяющие соответствующее в оригинальных стилях */
/* 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: calc(var(--sidebar-width)*0.4); /* Сдвиг control масштаба от верха */
}
.leaflet-control-scale-line {
	font-size: calc(var(--font-size)*1.2);
}

/* leaflet-sidebar-v2 */
.leaflet-sidebar-tabs {
	background-color: rgba(255, 255, 255, 0.7); 
}
.leaflet-sidebar-content {
	background-color: rgba(255, 255, 255, 0.9);
	margin: 0;
}
.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: calc(var(--font-size)*0.25);
	width: calc(var(--font-size)*1.7);
	height: calc(var(--font-size)*1.7);
	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%;
}


.leaflet-sidebar-header {
	padding: calc(var(--sidebar-width)*0.03) 0 0 calc(var(--sidebar-width)*0.15);
	font-size: calc(var(--font-size)*0.8);
	font-weight: 800;
}
.leaflet-sidebar { 	/*  */
	width: var(--sidebar-width);
}
.leaflet-sidebar-pane {
	font-size: var(--font-size);
	min-width: 0; /* Не знаю, как оно, но без этого ширина панели вдвое больше. Видимо, потому, что в основном стиле принудительно указан min-width. */
	/*padding: calc(var(--sidebar-width)*0.03) 0 0 calc(var(--sidebar-width)*0.03); всё же не везде нужны эти поля*/
	padding: 0;
} 
.leaflet-sidebar-left ~ .leaflet-control-container .leaflet-left {
	left: var(--sidebar-width); 
}
.leaflet-sidebar-right ~ .leaflet-control-container .leaflet-right {
	right: var(--sidebar-width); 
}
.big_symbol {
	/*font-size: calc(var(--font-size)*1.2);*/
	font-size: calc(var(--sidebar-width)*0.07); /* Так на большом экране будут больше цифры */
}

.leaflet-sidebar-left .leaflet-sidebar-close-icn {
    right: 0; 
}
.leaflet-sidebar-right .leaflet-sidebar-close-icn {
    left: 0; 
}


.leaflet-sidebar-tabs > li, .leaflet-sidebar-tabs > ul > li {
	margin: calc(var(--font-size)*0.4) auto;
}
#MOB-tab {
	margin-top: calc(var(--font-size)*0.4);
	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 */
}

/* почему-то map(box|libre)-gl-leaflet не содержит стилей, и не указывает в коде (как leaflet) z-index добавляемого слоя. В результате векторный слой всегда ниже растровых. Это исправляет. 
absolute - потому, что нормальные слои absolute, и тогда они все будут отображаться в порядке появления?
z-index: 1 - z-index должен быть не auto
*/

.leaflet-gl-layer {
	position: absolute;
	z-index: 1;	
}


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

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

/* Переключатель 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;
	width: 48%;
    border: 1px solid;
    border-radius: 5px;
    text-align: center;
    padding: 0;
    margin: 0;
}
.routeControls > input[type="radio"].L + label {
    /*border-right: none;*/
    border-radius: 5px 0px 0px 5px;
    width:48%;
    margin-top: 0.3rem;
}
.routeControls > input[type="radio"].R + label {
    /*border-left: none;*/
    border-radius: 0px 5px 5px 0px;
    width:48%;
    margin-top: 0.3rem;
}
.routeControls > input[type="radio"].M + label {
    /*border-left: none;*/
    width:80%;
    font-size: 89%;
    margin-top: 0.7rem;
}
.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;
}

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

button:disabled {
	opacity: 0.3;
}

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

/* копирование в буфер обмена */
.CopyToClipboardClass {
    justify-content: center; /*Центрирование по горизонтали*/
    align-items: center;     /*Центрирование по вертикали */
    text-align: center;
}
/* Активная зона выключателя элементов управления */
#hideControl {
	--control-size: 20vmin;
	position: fixed; 
	width: var(--sidebar-width);
	height: var(--sidebar-width);
	z-index: 1; /*на 0 кто-то перехватывает события. А leaflet начинается с 100 */
	display: none;
	border: dashed fuchsia;
}

/*  */
.leaflet-popup-content {
    max-height: var(--sidebar-width);
    overflow-y: auto;
}
.mobIcon {
	opacity: 0.7;
}

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

.centerMarkIcon {
	background: transparent;
}

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

.scaledText {
}

.showedMapName {
	font-weight: bold;
}

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

.mapBoundsTooltip {
	color: black;
	opacity:1 !important;
	background: transparent;
	border: none;
	border-width : 0;
	text-align: left;
}

#mapInfo {
	position: absolute;
	top: calc(var(--sidebar-width)*0.4);
	left: 0;
	right: 0;
	height: 50%;
	width: 80%;
	margin: 0 auto 0 auto;
	z-index: 3000; /*на 0 кто-то перехватывает события. leaflet начинается с 100, leaflet-sidebar - с 2000 */
	
	border: solid rgba(0, 0, 0, 0.2);
	border-radius: calc(var(--sidebar-width)*0.03);
	background-color: white;
	font-size: var(--font-size);
	padding: 1rem;
	overflow-y: auto;
}
#mapInfo > h2,h3 {
	font-size: 90%;
}