/* * Citizen * * SkinStyles for Leaflet * Shared by Extension:DataMaps, Extension:Kartographer, Extension:Maps, Extension:SemanticResultFormats * * Date: 2024-07-09 */ /* * Backported fixes * @see https://github.com/Leaflet/Leaflet/blob/main/dist/leaflet.css */ .leaflet-container img.leaflet-tile { /* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */ mix-blend-mode: plus-lighter; } /* * Citizen modifications */ .leaflet-container { font-family: var( --font-family-base ); font-size: var( --font-size-x-small ); line-height: var( --line-height ); background: var( --color-surface-3 ) !important; // Override inline styles border-radius: var( --border-radius-medium ); a { color: var( --color-link ); } &.leaflet-active { outline: 2px solid var( --color-progressive ); } } .leaflet-zoom-box { border: 2px dotted var( --color-progressive ); // background: rgba(255,255,255,0.5); } .leaflet-bar { // Give the bar background color and make buttons quiet // We can't apply background styles directly to buttons because we need to invert the icon background-color: var( --color-surface-1 ); border-radius: var( --border-radius-base ); a, button { color: var( --color-emphasized ); background-color: transparent; border-bottom-color: var( --border-color-interactive ); &:hover { color: var( --color-emphasized ); background-color: var( --background-color-quiet--hover ); border-bottom-color: var( --border-color-interactive ); } &:active { color: var( --color-emphasized ); background-color: var( --background-color-quiet--active ); } &.leaflet-disabled { color: var( --color-disabled ); background-color: var( --background-color-disabled ); } } } .leaflet-control-layers { background: var( --color-surface-1 ); border-radius: var( --border-radius-base ); /* Make layers easier to click */ label { display: flex; min-height: 32px; padding: 0 var( --space-xs ); cursor: pointer; user-select: none; border-radius: var( --border-radius-base ); &:hover { background: var( --background-color-quiet--hover ); } :has( input:checked ) { background: var( --background-color-quiet--active ); } /* Align leaflet controls */ >div { display: flex; gap: var( --space-xs ); align-items: center; } } } .leaflet-control-layers-expanded { padding: var( --space-xs ); color: var( --color-base ); background: var( --color-surface-1 ); } /* Already aligned with the flex rules above */ .leaflet-control-layers-selector { position: static; margin-top: 0; } .leaflet-control-layers-separator { border-top-color: var( --border-color-base ); } .leaflet-container .leaflet-control-attribution { background: var( --background-color-backdrop-dark ); border-top-left-radius: var( --border-radius-base ); } .leaflet-control-attribution, .leaflet-control-scale-line { color: var( --color-subtle ); } .leaflet-control-scale-line { background: var( --background-color-backdrop-dark ); border-color: var( --border-color-interactive ); } .leaflet-control-scale-line:not( :first-child ) { border-top-color: var( --border-color-interactive ); } .leaflet-control-scale-line:not( :first-child ):not( :last-child ) { border-bottom-color: var( --border-color-interactive ); } .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar { border: 0; } .leaflet-popup-content { margin: var( --space-md ); line-height: var( --line-height-sm ); } .leaflet-popup-content > b { font-size: var( --font-size-small ); color: var( --color-emphasized ); } .leaflet-popup-content p { margin: var( --space-md ) 0; } .leaflet-popup-content-wrapper { border-radius: var( --border-radius-medium ); } .leaflet-popup-content-wrapper, .leaflet-popup-tip { color: var( --color-base ); background: var( --color-surface-1 ); } /* Make close button easier to click */ .leaflet-container a.leaflet-popup-close-button { display: grid; place-content: center; width: 24px; height: 24px; padding: 0; color: var( --color-base ); border-radius: var( --border-radius-medium ); &:hover { color: var( --color-emphasized ); background-color: var( --background-color-quiet--hover ); } } .leaflet-popup-scrolled { border-top-color: var( --border-color-base ); border-bottom-color: var( --border-color-base ); } .leaflet-div-icon { background: var( --color-surface-1 ); border-color: var( --border-color-base ); } .leaflet-tooltip { position: absolute; padding: var( --space-xs ); color: var( --color-base ); background-color: var( --color-surface-1 ); border-color: var( --color-surface-1 ); border-radius: var( --border-radius-base ); } .leaflet-tooltip-top::before { border-top-color: var( --color-surface-1 ); } .leaflet-tooltip-bottom::before { border-bottom-color: var( --color-surface-1 ); } .leaflet-tooltip-left::before { border-left-color: var( --color-surface-1 ); } .leaflet-tooltip-right::before { border-right-color: var( --color-surface-1 ); } /* Invert icons for dark mode */ .fullscreen-icon { filter: var( --filter-invert ); }