leaflet_svelte/static/css/custom.css
2025-12-04 19:16:48 +09:00

136 lines
2.6 KiB
CSS

.custom-navbar {
height: var(--navbar-height);
padding-top: 0rem;
padding-bottom: 0rem;
z-index: 1002;
border: none;
background-color: white !important;
}
.nav-full-height.nav-link {
color: inherit;
padding-left: 1rem !important;
padding-right: 1rem !important;
padding-top: 12px;
background-color: white;
margin-right: -1px;
}
.nav-full-height.nav-link:hover {
color: white !important;;
background-color: var(--bs-primary);
}
.nav-full-height.nav-link.active {
color: white !important;
background-color: var(--bs-primary);
}
.nav-full-height {
display: flex;
align-items: center;
height: 100%;
}
.white-bg {
background-color: #fff !important;
}
.navbar-brand {
margin-right: 1em;
}
.navbar {
z-index: 1002;
}
.card {
transition: all 0.3s ease;
}
.card-header {
cursor: pointer;
}
:root {
--navbar-height: 44px;
--panel-left: 20px;
--panel-top: 20px;
}
.map-container {
position: relative;
width: 100%;
height: calc(100vh - var(--navbar-height));
}
.coordinates-display {
position: absolute;
top: 10px;
right: 10px;
background: #fff;
padding: 3px 8px;
font-family: Arial, sans-serif;
font-size: 14px;
z-index: 1000;
border: 1px solid #ccc;
width: auto;
white-space: nowrap;
}
.panel-container {
position: absolute;
top: var(--panel-top);
left: var(--panel-left);
width: 23rem;
max-height: 90vh;
max-width: calc(100vw - var(--panel-left) - var(--panel-left));
overflow-y: auto;
z-index: 1001;
}
/* MapLibre control styles */
.maplibregl-ctrl-group {
border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
border-radius: var(--bs-border-radius) !important;
}
.maplibregl-popup-tip {
border-top-color: var(--bs-border-color) !important;
}
.maplibregl-popup-content {
background-color: var(--bs-body-bg) !important;
border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
border-radius: var(--bs-border-radius) !important;
color: var(--bs-body-color);
box-shadow: none !important;
}
.maplibregl-popup-close-button {
color: var(--bs-body-color);
}
.modal-backdrop {
opacity: var(--bs-backdrop-opacity) !important;
}
.table td.fit,
.table th.fit {
white-space: nowrap;
width: 1%;
}
.force-page-height {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.modal-tinted {
filter: brightness(0.6);
}
@media (max-width: 767.98px)
{
.coordinates-display {
display: none;
}
}