mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-12-04 18:59:03 +00:00
226 lines
5 KiB
Plaintext
226 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;
|
|
}
|
|
|
|
.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 );
|
|
}
|