mediawiki-skins-Citizen/skinStyles/lib/leaflet/leaflet.less

227 lines
5 KiB
Plaintext

/*
* 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;
box-shadow: 0 1px 5px rgba( 0, 0, 0, 0.65 );
}
.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 );
}