/* Transisi umum */
.btn, .btn:hover, .menu-link, .menu-link:hover {
transition: all 0.3s ease !important;
}
/* Fallback untuk background sebelum backdrop-filter */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
background: rgb(255 255 255 / 60%)!important; /* Fallback jika backdrop-filter tidak didukung */
background-color: rgba(255, 255, 255, 0.6)!important; /* Fallback untuk browser lama */
transition: all 0.3s ease !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); /* Untuk Safari */
}
/* Saat hover di leaflet-popup */
.leaflet-popup:hover .leaflet-popup-content-wrapper,
.leaflet-popup:hover .leaflet-popup-tip {
background: rgb(255 255 255 / 80%)!important; /* Fallback jika backdrop-filter tidak didukung */
background-color: rgba(255, 255, 255, 0.8)!important; /* Fallback */
transition: all 0.3s ease !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); /* Untuk Safari */
}
/* Modal dengan backdrop-filter */
.modal {
backdrop-filter: blur(1px); /* Efek blur di latar belakang */
-webkit-backdrop-filter: blur(1px); /* Untuk Safari */
}
.footer .bi {
color: var(--bs-link-color)!important;
}
@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.9;
}
}
.blink {
animation: blink 1s infinite;
/* Fallback for older browsers */
-webkit-animation: blink 1s infinite;
/* Safari */
-moz-animation: blink 1s infinite;
/* Firefox */
-o-animation: blink 1s infinite;
/* Older Opera */
-ms-animation: blink 1s infinite;
/* Internet Explorer */
}
body {
overflow-x: hidden !important;
}
#map,.leaflet-container {
height: 70vh;
max-width: 100%;
max-height: 100%;
}
/* Style for the locate button to resemble Google Maps */
.locate-button {
background-color: #fff;
/* Background color */
border: 2px solid rgba(0, 0, 0, 0.3);
/* Border color */
/*border-radius: 10px; Circular shape */
width: 30px;
/* Width */
height: 30px;
/* Height */
cursor: pointer;
/* Cursor style */
display: flex;
/* Flexbox */
align-items: center;
/* Centering items */
justify-content: center;
/* Centering items */
z-index: 1000;
/* Ensure it is on top */
/*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); Shadow effect */
}
.locate-button:hover {
background-color: #f1f1f1;
/* Background color on hover */
}
.locate-button:active {
background-color: #e0e0e0;
/* Background color on active */
}
.locate-button i {
color: #4285F4;
/* Icon color */
font-size: 18px;
/* Icon size */
}
.locate-button,
.leaflet-bar a {
background-color: var(--kt-form-select-bg) !important;
color: var(--bs-body-color) !important;
border-radius: 4px !important;
border: none !important;
}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
border: none !important;
}
.leaflet-bar a.fullscreen-icon {
background-image: none !important;
background-color: var(--kt-form-select-bg);
/* Latar belakang tambahan */
}
.leaflet-bar a.fullscreen-icon::before {
content: "";
/* Menggunakan konten kosong */
position: absolute;
/* Mengatur posisi absolut */
top: 8.5%;
/* Mengatur posisi atas ke tengah */
left: 6.5%;
/* Mengatur posisi kiri ke tengah */
width: 85%;
/* Lebar 85% */
height: 85%;
/* Tinggi 85% */
z-index: 1;
/* Mengatur z-index untuk berada di belakang */
background-color: var(--bs-body-color) !important;
color: var(--kt-form-select-bg) !important;
/* Menggunakan variabel CSS untuk warna */
-webkit-mask: url('data:image/svg+xml;utf8,') top no-repeat;
-webkit-mask-size: cover;
/* Ukuran menyesuaikan ukuran elemen */
mask: url('data:image/svg+xml;utf8,') top no-repeat;
mask-size: cover;
}
.leaflet-bar a.leaflet-fullscreen-on.fullscreen-icon::before {
-webkit-mask-position: bottom;
mask-position: bottom;
}
.popup-content {
margin: 0;
/* Menghilangkan margin pada konten popup */
padding: 0;
/* Menghilangkan padding pada konten popup */
align-items: left !Important;
/* Centering items */
justify-content: left !Important;
/* Centering items */
font-weight: 500;
}
.popup-content .title {
display: flex;
padding: 5px;
margin-bottom: 5px;
justify-content: center;
font-weight: 700;
text-align: center;
line-height: 25px;
border-radius: 5px;
}
.popup-content .title svg {
margin-right: 5px;
}
.blink-dot {
width: 0.7em;
/* Ukuran sama dengan ukuran font default */
height: 0.7em;
/* Ukuran sama dengan ukuran font default */
background-color: red;
/* Warna lingkaran */
border-radius: 100%;
/* Membuatnya menjadi lingkaran */
display: inline-block;
/* Membuat elemen sejajar dengan teks */
margin: 0 2px 2px;
/* Jarak horizontal antara lingkaran dan teks */
padding: 0;
/* Menghilangkan padding */
animation: blink 1s infinite;
/* Mengaktifkan animasi */
vertical-align: middle;
/* Menjaga keselarasan vertikal dengan teks */
}
.live-text {
font-size: inherit;
/* Menggunakan ukuran font yang sama dengan parent */
margin: 0;
/* Menghilangkan margin */
padding: 0;
/* Menghilangkan padding */
vertical-align: middle;
/* Menjaga keselarasan vertikal */
}
@keyframes blink {
0%,
100% {
opacity: 1;
/* Lingkaran terlihat */
}
50% {
opacity: 0;
/* Lingkaran tidak terlihat */
}
}
/* Custom styles for the leaflet control layers */
.leaflet-control-layers-list {
padding: 10px;
}
.leaflet-container {}
.leaflet-control-layers-list::before {
display: block;
content: "Filter : ";
font-size: 1.5em;
font-weight: 900;
padding-bottom: 5px;
}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
opacity: 0;
visibility: hidden;
display: none;
-webkit-transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
display: block;
position: relative;
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.leaflet-control-layers-expanded {
padding: 0 !important;
}
.leaflet-control-layers-overlays {
border-top: 1px solid #c3c2c1;
padding: 7px 3px 5px;
}
.leaflet-control-layers-overlays span span {
display: inline-block;
margin-left: 5px;
}
.leaflet-control-layers-overlays span {
display: inline-block;
margin: 2px 0 0;
}
.leaflet-control-layers-toggle {
background: #fff !important;
/* Remove background */
background-image: none !important;
border: none;
/* Remove border */
color: #000 !Important;
/* Set the color of the icon */
cursor: pointer;
/* Change cursor on hover */
font-size: 24px;
/* Adjust font size */
padding: 5px 11px;
/* Add some padding */
transition: transform 0.3s ease, color 0.3s ease;
/* Smooth transition for transform and color */
z-index: 9999;
}
.leaflet-control-layers-toggle:focus {
outline: none;
/* Remove outline on focus */
}
.leaflet-control-layers-toggle:before {
content: "\f0c9";
/* Font Awesome hamburger icon */
font-family: FontAwesome;
/* Use FontAwesome for icons */
font-weight: 900;
/* Adjust weight for visibility */
font-size: 24px;
/* Adjust size */
}
/* Base styles for the Leaflet control layers */
.leaflet-control-layers-list input[type="checkbox"] {
-webkit-appearance: none;
/* Remove default checkbox styling for WebKit browsers */
-moz-appearance: none;
/* Remove default checkbox styling for Firefox */
appearance: none;
/* Standard appearance removal */
top: 3px;
width: 30px;
/* Smaller width */
height: 16px;
/* Smaller height */
background-color: #555;
/* Background color for the switch in dark theme */
border-radius: 16px;
/* Rounded switch */
position: relative;
outline: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* The "switch" circle */
.leaflet-control-layers-list input[type="checkbox"]::before {
content: '';
width: 12px;
/* Smaller circle */
height: 12px;
/* Smaller circle */
background-color: #ddd;
/* Circle color */
border-radius: 50%;
/* Make it circular */
position: absolute;
top: 2px;
left: 3px;
transition: background-color 0.3s ease, transform 0.3s ease;
}
/* Checked state for the switch */
.leaflet-control-layers-list input[type="checkbox"]:checked {
background-color: #275EFE;
/* Checked background color */
}
/* Move the circle to the right when checked */
.leaflet-control-layers-list input[type="checkbox"]:checked::before {
background-color: #fff;
/* Circle color */
transform: translateX(12px);
/* Move the circle when checked */
}
/* Style for the label next to the switch */
.leaflet-control-layers-list label {
font-size: 12px;
/* Smaller font size */
vertical-align: middle;
cursor: pointer;
}
.layer-dropdown {
font-size: 12px;
vertical-align: middle;
border-radius: 4px;
z-index: 1000;
/* Ensure it appears above other elements */
}
.layer-dropdown .form-select {
border: none;
cursor: pointer;
}
}