/* ========================================================= TFG MAP LAYER CONTROL V1 ========================================================= */ .tfg-map-layer-control { position: relative; font-family: Arial, sans-serif; } .tfg-map-layer-button { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid rgba(89, 161, 204, .38); border-radius: 7px; background: rgba(5, 28, 44, .96); color: #e8f6ff; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); cursor: pointer; } .tfg-map-layer-button:hover { background: rgba(10, 48, 73, .98); } .tfg-map-layer-button-icon { font-size: 16px; line-height: 1; } .tfg-map-layer-button-label { font-size: 11px; font-weight: 700; } .tfg-map-layer-panel { position: absolute; top: calc(100% + 7px); right: 0; width: 220px; padding: 12px; border: 1px solid rgba(89, 161, 204, .34); border-radius: 8px; background: rgba(5, 25, 39, .98); color: #eaf7ff; box-shadow: 0 12px 32px rgba(0, 0, 0, .38); } .tfg-map-layer-panel[hidden] { display: none !important; } .tfg-map-layer-title { margin-bottom: 10px; font-size: 13px; font-weight: 800; } .tfg-map-layer-section { padding: 9px 0; border-top: 1px solid rgba(100, 156, 189, .16); } .tfg-map-layer-section:first-of-type { border-top: 0; } .tfg-map-layer-section-title { margin-bottom: 7px; color: #87b7d1; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .tfg-map-layer-option { min-height: 32px; display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; } .tfg-map-layer-option:hover { background: rgba(255, 255, 255, .045); } .tfg-map-layer-option input { margin: 0; } .tfg-map-layer-option span { font-size: 11px; font-weight: 600; } /* ========================================================= TFG MAP SOURCE GROUP COLLAPSE V1 ========================================================= */ .tfg-map-layer-section-toggle { width: 100%; min-height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 3px 4px; margin: 0 0 4px; border: 0; border-radius: 5px; background: transparent; color: #87b7d1; font: inherit; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; } .tfg-map-layer-section-toggle:hover { background: rgba(255, 255, 255, .045); } .tfg-map-layer-section-chevron { min-width: 14px; text-align: center; font-size: 11px; } .tfg-map-layer-section-body[hidden] { display: none !important; } /* TFG MAP SOURCE GROUP COLLAPSE V1 END */ @media (max-width: 640px) { .tfg-map-layer-button { width: 38px; min-width: 38px; padding: 0; justify-content: center; } .tfg-map-layer-button-label { display: none; } .tfg-map-layer-panel { width: 210px; } } /* TFG MAP LAYER CONTROL V1 END */ /* ========================================================= TFG LAYER CONTROL - EMBEDDED GRID V1 ========================================================= */ .tfg-map-layer-grid-section { padding-bottom: 2px; } .tfg-map-layer-grid-host { width: 100%; min-height: 34px; } /* TFG LAYER CONTROL - EMBEDDED GRID V1 END */ /* ========================================================= TFG ENC / HIDROGRAFI V1 ========================================================= */ .tfg-enc-depth-label { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #111; font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap; text-align: center; } .tfg-enc-depth-label::before { display: none !important; } /* TFG ENC / HIDROGRAFI V1 END */ /* ========================================================= TFG COORDINATE FORMAT CONTROL V1 ========================================================= */ .tfg-map-coordinate-option { justify-content: space-between; gap: 8px; } .tfg-map-coordinate-main { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: 8px; cursor: pointer; } .tfg-map-coordinate-format { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 5px; background: rgba(255, 255, 255, .045); cursor: pointer; } .tfg-map-coordinate-format:hover { background: rgba(255, 255, 255, .075); } .tfg-map-coordinate-format span { font-size: 10px; font-weight: 700; } .tfg-map-coordinate-format.is-disabled { opacity: .45; cursor: default; } .tfg-map-coordinate-format input { margin: 0; } /* TFG COORDINATE FORMAT CONTROL V1 END */ /* ========================================================= TFG TACTICAL MAP OBJECT LABEL V1 Mengikuti ukuran font label Koordinat Bumi: desktop 9px, mobile 8px. Tanpa kotak, border, shadow, atau panah. ========================================================= */ .leaflet-tooltip.tfg-map-object-tooltip { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #ffffff !important; font-size: 9px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; pointer-events: none !important; text-shadow: -1px -1px 0 rgba(0, 0, 0, .95), 1px -1px 0 rgba(0, 0, 0, .95), -1px 1px 0 rgba(0, 0, 0, .95), 1px 1px 0 rgba(0, 0, 0, .95), 0 1px 2px rgba(0, 0, 0, .9); } .leaflet-tooltip.tfg-map-object-tooltip::before { display: none !important; } @media (max-width: 768px) { .leaflet-tooltip.tfg-map-object-tooltip { font-size: 8px !important; } } /* TFG TACTICAL MAP OBJECT LABEL V1 END */ /* ========================================================= TFG MAP LAYER PANEL VERTICAL SCROLL V1 Panel Layer Peta dibatasi terhadap tinggi viewport. Jika isi melebihi layar, panel dapat digulir vertikal. Posisi floating panel tetap mengikuti kontrol Leaflet. ========================================================= */ .tfg-map-layer-panel { max-height: calc(100vh - 150px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; } /* * Viewport rendah membutuhkan ruang lebih ketat. */ @media (max-height: 700px) { .tfg-map-layer-panel { max-height: calc(100vh - 105px); } } /* TFG MAP LAYER PANEL VERTICAL SCROLL V1 END */