Yurik has uploaded a new change for review.
https://gerrit.wikimedia.org/r/324251
Change subject: Import wmui-base.less and override leaflet style to match
wikimedia style.
......................................................................
Import wmui-base.less and override leaflet style to match wikimedia style.
Bug: T150497
Change-Id: I7277ebb21ad9e15cf5ca7367eecc51a6494c70f8
---
M bin/build.sh
M lib/mapbox-style-fixes.css
A lib/wmui-base.less
M modules/wikivoyage/ControlLayers.js
A modules/wikivoyage/images/icon-nearby-invert.png
A modules/wikivoyage/images/icon-nearby-invert.svg
M modules/wikivoyage/images/icon-nearby.png
M modules/wikivoyage/images/icon-nearby.svg
A modules/wikivoyage/images/wm-nearby.svg
M modules/wikivoyage/styles/control-layers.less
M modules/wikivoyage/styles/control-nearby.less
M package.json
M styles/leaflet-overrides.less
13 files changed, 293 insertions(+), 46 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Kartographer
refs/changes/51/324251/1
diff --git a/bin/build.sh b/bin/build.sh
index 6301e9b..90ec62c 100644
--- a/bin/build.sh
+++ b/bin/build.sh
@@ -7,6 +7,7 @@
rm lib/mapbox/images/render.sh
cp -v node_modules/leaflet-sleep/Leaflet.Sleep.js lib/leaflet.sleep.js
+cp -v node_modules/wmui-base/wmui-base.less lib/wmui-base.less
cp -v node_modules/prunecluster/dist/PruneCluster.js \
node_modules/prunecluster/dist/LeafletStyleSheet.css \
diff --git a/lib/mapbox-style-fixes.css b/lib/mapbox-style-fixes.css
index 00994d6..19e3b78 100644
--- a/lib/mapbox-style-fixes.css
+++ b/lib/mapbox-style-fixes.css
@@ -1,29 +1,3 @@
-/* Apply a few colour fixes from MW theme */
-
-.leaflet-control-layers, .leaflet-bar {
- border-color: #ccc;
-}
-
-.leaflet-bar a {
- -webkit-transition: background-color 100ms, border-color 100ms;
- -moz-transition: background-color 100ms, border-color 100ms;
- transition: background-color 100ms, border-color 100ms;
- border-bottom-color: #ccc;
-}
-
-.leaflet-bar a:last-child {
- border-bottom: 0;
-}
-
-.leaflet-bar a:hover {
- background-color: #ebebeb;
-}
-
-.leaflet-bar a:active {
- background-color: #d9d9d9;
- border-color: #d9d9d9;
-}
-
/**
* Fix unwanted flipping of styles by CSS Janus (T127137)
*/
diff --git a/lib/wmui-base.less b/lib/wmui-base.less
new file mode 100644
index 0000000..f0da64d
--- /dev/null
+++ b/lib/wmui-base.less
@@ -0,0 +1,142 @@
+/**
+ * WikimediaUI base v0.7.0
+ * Wikimedia Foundation user interface base variables
+ */
+
+/* Colors */
+// WikimediaUI (WMUI) color palette
+@wmui-color-base0: #000; // = HSB 0°, 0%, 0%
+@wmui-color-base10: #222; // = HSB 0°, 0%, 13%
+@wmui-color-base20: #54595d; // = HSB 207°, 10%, 36%; WCAG 2.0 level AAA
7.09:1 contrast ratio on `#fff`
+@wmui-color-base30: #72777d; // = HSB 210°, 9%, 49%; WCAG 2.0 level AA at
4.52:1 contrast ratio on `#fff`
+@wmui-color-base50: #a2a9b1; // = HSB 212°, 8%, 69%
+@wmui-color-base70: #c8ccd1; // = HSB 213°, 4%, 82%
+@wmui-color-base80: #eaecf0; // = HSB 220°, 3%, 94%
+@wmui-color-base90: #f8f9fa; // = HSB 210°, 1%, 98%
+@wmui-color-base100: #fff; // = HSB 0°, 0%, 100%
+
+@wmui-color-accent30: #2a4b8d; // = HSB 220°, 70%, 55%
+@wmui-color-accent50: #36c; // = HSB 220°, 75%, 80%
+@wmui-color-accent90: #eaf3ff; // = HSB 214°, 8%, 100%
+
+@wmui-color-red30: #b32424; // = HSB 360°, 80%, 70%
+@wmui-color-red50: #d33; // = HSB 360°, 77%, 87%
+@wmui-color-red90: #fee7e6; // = HSB 3°, 9%, 100%
+
+@wmui-color-yellow30: #ac6600; // = HSB 36°, 100%, 67%
+@wmui-color-yellow50: #fc3; // = HSB 45°, 80%, 100%
+@wmui-color-yellow90: #fef6e7; // = HSB 39°, 9%, 100%
+
+@wmui-color-green30: #14866d; // = HSB 167°, 85%, 53%
+@wmui-color-green50: #00af89; // = HSB 167°, 100%, 69%
+@wmui-color-green90: #d5fdf4; // = HSB 166°, 16%, 99%
+
+// Background Colors
+@background-color-base: @wmui-color-base100;
+@background-color-code: @wmui-color-base90;
+// 'Framed' UI elements (Framed Buttons, Dropdowns, ToggleSwitches...)
+@background-color-framed: @wmui-color-base90;
+@background-color-framed--hover: @wmui-color-base100;
+@background-color-framed--active: @wmui-color-base70;
+// RGBA Colors include hex fallback on `#fff` for IE 6/7/8
+@background-color-highlight: rgba( 255, 182, 13, 0.4 );
+@background-color-highlight--fallback: #ffe29e;
+
+// Foreground Colors
+@color-base: @wmui-color-base10;
+@color-base--hover: #444;
+@color-base--active: @wmui-color-base0;
+@color-base--inverted: @wmui-color-base100;
+@color-base--emphasized: @wmui-color-base0;
+@color-base--disabled: @wmui-color-base30;
+@color-filled--disabled: @color-base--inverted;
+@color-placeholder: @wmui-color-base30;
+// Primary 'Progressive' Color, Background Color and states
+@background-color-primary: @wmui-color-base90;
+@background-color-primary--hover: rgba( 41, 98, 204, 0.1 );
+@color-primary: @wmui-color-accent50;
+@color-primary--hover: #447ff5; // = `lighten( @color-primary, 3 )`
+@color-primary--active: @wmui-color-accent30;
+@color-primary--focus: @wmui-color-accent50;
+// 'Destructive' Color, Background Color and states
+@background-color-destructive: @wmui-color-red90;
+@color-destructive: @wmui-color-red50;
+@color-destructive--hover: #e53939;
+@color-destructive--active: @wmui-color-red30;
+@color-destructive--focus: @wmui-color-red50;
+// Secondary Color and states (links only)
+@color-secondary: @wmui-color-green50;
+@color-secondary--hover: #1c6665;
+@color-secondary--active: @wmui-color-green30;
+@color-secondary--focus: @wmui-color-green50;
+
+
+// Opacity
+@opacity-base: 1;
+@opacity-base--disabled: 0.51; // = `#7d7d7d` on `background-color:
#fff`; HSB 0°, 0%, 49%
+
+
+/* Positioning */
+// Z-Index
+@z-index-base: 0;
+
+
+/* Box Model properties */
+/* Max Widths */
+@max-width-button: 28.75em; // = `460px` at `16px` base, see T95367
+@max-width-input-inline: 100%;
+
+// Border
+@border-base: @border-width-base solid @border-color-base;
+@border-dialog: @border-base;
+@border-menu: @border-base;
+// Border Colors
+@border-color-base: @wmui-color-base50;
+@border-color-base--hover: @wmui-color-base50;
+@border-color-base--active: @wmui-color-base30;
+@border-color-base--disabled: @color-base--disabled;
+@border-color-filled--disabled: @color-filled--disabled;
+@border-color-primary--active: #859dcc;
+@border-color-destructive--active: #b77c79;
+@border-color-inset--focus: @color-base--inverted;
+@border-color-heading: @wmui-color-base70;
+// Border Widths
+@border-width-base: 1px;
+// Border Radius
+@border-radius-base: 2px;
+
+// Box Shadows
+@box-shadow-base--focus: inset 0 0 0 1px @wmui-color-accent50;
+@box-shadow-inset--inverted: inset 0 0 0 1px @color-base--inverted;
+@box-shadow-filled--disabled: inset 0 0 0 1px @color-filled--disabled;
+@box-shadow-dialog: 0 0.15em 0 0 rgba( 0, 0, 0, 0.15 );
+@box-shadow-menu: @box-shadow-dialog;
+
+
+/* Typography incl. print properties */
+// Font Families
+@font-family-base: @font-family-sans;
+@font-family-heading-main: @font-family-serif;
+@font-family-sans: 'Helvetica Neue', 'Helvetica', 'Nimbus Sans L',
'Arial', 'Liberation Sans', sans-serif;
+@font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif;
+// Line Heights
+@line-height-base: 1.6;
+@line-height-heading: 1.25;
+@text-decoration-link--hover: none;
+// Text Shadows
+@text-shadow-base: 0 1px 1px @color-base--inverted; // 'coined'
effect
+@text-shadow-base--disabled: @text-shadow-base;
+
+
+/* Other Properties */
+// Cursors
+@cursor-base--disabled: default;
+
+
+/* Animation & Transition */
+// Transitions
+@transition-base: @transition-duration-base;
+@transition-medium: @transition-duration-medium;
+// Transitions > Durations
+@transition-duration-base: 100ms;
+@transition-duration-medium: 250ms;
diff --git a/modules/wikivoyage/ControlLayers.js
b/modules/wikivoyage/ControlLayers.js
index eab80b3..de20388 100644
--- a/modules/wikivoyage/ControlLayers.js
+++ b/modules/wikivoyage/ControlLayers.js
@@ -17,6 +17,15 @@
/**
* @override
+ */
+ onAdd: function ( map ) {
+ var container = L.Control.Layers.prototype.onAdd.call(
this, map );
+ container.className += ' leaflet-bar';
+ return container;
+ },
+
+ /**
+ * @override
* @private
*/
_addItem: function ( obj ) {
diff --git a/modules/wikivoyage/images/icon-nearby-invert.png
b/modules/wikivoyage/images/icon-nearby-invert.png
new file mode 100644
index 0000000..0babec8
--- /dev/null
+++ b/modules/wikivoyage/images/icon-nearby-invert.png
Binary files differ
diff --git a/modules/wikivoyage/images/icon-nearby-invert.svg
b/modules/wikivoyage/images/icon-nearby-invert.svg
new file mode 100644
index 0000000..62ee12c
--- /dev/null
+++ b/modules/wikivoyage/images/icon-nearby-invert.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"; width="24" height="24" viewBox="0 0 24
24">
+ <style>* { fill: #fff }</style>
+ <g fill-rule="evenodd">
+ <path d="M19.277 20.66c2.02-1.01 3.293-2.486 3.293-4.13 0-.036
0-.07-.002-.107-.397.25-.858.428-1.358.516-.474.82-1.503 1.536-2.89
2.05.494.453.837 1.03.957 1.67zm-7.134
1.388c-3-.11-5.63-.984-7.288-2.28.735-.263 1.343-.735 1.722-1.328 1.406.783
3.452 1.307 5.763 1.396-.218.407-.34.86-.34 1.338 0
.303.05.597.143.874zm5.902-10.182c-1.518-.548-3.32-.866-5.255-.866-3.813
0-7.123 1.237-8.738 3.037.43.06.836.186 1.2.367 1.27-1.423 4.283-2.424
7.798-2.424 1.608 0 3.11.21 4.39.57.163-.252.367-.482.605-.684zM3.5 19c1.38 0
2.5-.89 2.5-1.99C6 15.9 4.88 15 3.5 15S1 15.9 1 17.01C1 18.11 2.12 19 3.5
19zm17-3c1.38 0 2.5-.89 2.5-1.99C23 12.9 21.88 12 20.5 12s-2.5.9-2.5 2.01c0 1.1
1.12 1.99 2.5 1.99zm-4.838 7.264c1.444 0 2.616-.937 2.616-2.095
0-1.17-1.172-2.117-2.616-2.117-1.444 0-2.616.947-2.616 2.116 0 1.157 1.172
2.094 2.616 2.094z"/>
+ <path d="M13.44 0C10.44 0 8 2.74 8 6.13c0 3.38 3.02 8.16 5.44 9.53
2.42-1.37 5.45-6.15 5.45-9.53 0-3.39-2.44-6.13-5.45-6.13zm0 8.5c-1.5
0-2.72-1.36-2.72-3.05 0-1.7 1.22-3.07 2.72-3.07 1.5 0 2.73 1.37 2.73 3.07 0
1.69-1.22 3.06-2.73 3.06V8.5z"/>
+ </g>
+</svg>
diff --git a/modules/wikivoyage/images/icon-nearby.png
b/modules/wikivoyage/images/icon-nearby.png
index a293010..432b43d 100644
--- a/modules/wikivoyage/images/icon-nearby.png
+++ b/modules/wikivoyage/images/icon-nearby.png
Binary files differ
diff --git a/modules/wikivoyage/images/icon-nearby.svg
b/modules/wikivoyage/images/icon-nearby.svg
index ff9c9d7..a819f1f 100644
--- a/modules/wikivoyage/images/icon-nearby.svg
+++ b/modules/wikivoyage/images/icon-nearby.svg
@@ -1,2 +1,7 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24" height="24" viewBox="-3195 -3703 24 24"
xmlns="http://www.w3.org/2000/svg";><g fill="#000" fill-rule="evenodd"
transform="translate(-3194 -3692)"><path d="M12.05 8.85c4.67 0 8.45-1.76
8.45-3.94 0-2.17-3.78-3.93-8.45-3.93-4.66 0-8.44 1.76-8.44 3.93 0 2.18 3.78
3.94 8.44 3.94zm-.26 2.2c5.4 0 9.78-2.47 9.78-5.52
0-3.05-4.38-5.53-9.78-5.53C6.39 0 2 2.48 2 5.53c0 3.05 4.38 5.53 9.79
5.53z"/><ellipse stroke="#FFF" stroke-width="1.4" cx="15.94" cy="9.58"
rx="2.94" ry="2.58"/><path d="M2.5 8.18C3.88 8.18 5 7.25 5 6.1 5 4.94 3.88 4
2.5 4S0 4.94 0 6.1c0 1.15 1.12 2.08 2.5 2.08z" stroke="#FFF"
stroke-width="1.3"/><path d="M19.38 4.65c1.3 0 2.37-.9
2.37-2s-1.06-2-2.38-2c-1.3 0-2.37.9-2.37 2s1.06 2 2.38 2z"
stroke="#FFF"/></g><path d="M-3181.56-3703c-3 0-5.44 2.74-5.44 6.13 0 3.38 3.02
8.16 5.44 9.53 2.42-1.37 5.45-6.15 5.45-9.53 0-3.39-2.44-6.13-5.45-6.13zm0
8.5c-1.5 0-2.72-1.36-2.72-3.05 0-1.7 1.22-3.07 2.72-3.07 1.5 0 2.73 1.37 2.73
3.07 0 1.69-1.22 3.06-2.73 3.06z" fill-rule="evenodd"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"; width="24" height="24" viewBox="0 0 24
24">
+ <g fill-rule="evenodd">
+ <path d="M19.277 20.66c2.02-1.01 3.293-2.486 3.293-4.13 0-.036
0-.07-.002-.107-.397.25-.858.428-1.358.516-.474.82-1.503 1.536-2.89
2.05.494.453.837 1.03.957 1.67zm-7.134
1.388c-3-.11-5.63-.984-7.288-2.28.735-.263 1.343-.735 1.722-1.328 1.406.783
3.452 1.307 5.763 1.396-.218.407-.34.86-.34 1.338 0
.303.05.597.143.874zm5.902-10.182c-1.518-.548-3.32-.866-5.255-.866-3.813
0-7.123 1.237-8.738 3.037.43.06.836.186 1.2.367 1.27-1.423 4.283-2.424
7.798-2.424 1.608 0 3.11.21 4.39.57.163-.252.367-.482.605-.684zM3.5 19c1.38 0
2.5-.89 2.5-1.99C6 15.9 4.88 15 3.5 15S1 15.9 1 17.01C1 18.11 2.12 19 3.5
19zm17-3c1.38 0 2.5-.89 2.5-1.99C23 12.9 21.88 12 20.5 12s-2.5.9-2.5 2.01c0 1.1
1.12 1.99 2.5 1.99zm-4.838 7.264c1.444 0 2.616-.937 2.616-2.095
0-1.17-1.172-2.117-2.616-2.117-1.444 0-2.616.947-2.616 2.116 0 1.157 1.172
2.094 2.616 2.094z"/>
+ <path d="M13.44 0C10.44 0 8 2.74 8 6.13c0 3.38 3.02 8.16 5.44 9.53
2.42-1.37 5.45-6.15 5.45-9.53 0-3.39-2.44-6.13-5.45-6.13zm0 8.5c-1.5
0-2.72-1.36-2.72-3.05 0-1.7 1.22-3.07 2.72-3.07 1.5 0 2.73 1.37 2.73 3.07 0
1.69-1.22 3.06-2.73 3.06V8.5z"/>
+ </g>
+</svg>
diff --git a/modules/wikivoyage/images/wm-nearby.svg
b/modules/wikivoyage/images/wm-nearby.svg
new file mode 100644
index 0000000..7239cd7
--- /dev/null
+++ b/modules/wikivoyage/images/wm-nearby.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"; width="24" height="24" viewBox="0 0 24
24">
+ <g fill-rule="evenodd">
+ <path d="M19.277 20.66c2.02-1.01 3.293-2.486 3.293-4.13 0-.036
0-.07-.002-.107-.397.25-.858.428-1.358.516-.474.82-1.503 1.536-2.89
2.05.494.453.837 1.03.957 1.67zm-7.134
1.388c-3-.11-5.63-.984-7.288-2.28.735-.263 1.343-.735 1.722-1.328 1.406.783
3.452 1.307 5.763 1.396-.218.407-.34.86-.34 1.338 0
.303.05.597.143.874zm5.902-10.182c-1.518-.548-3.32-.866-5.255-.866-3.813
0-7.123 1.237-8.738 3.037.43.06.836.186 1.2.367 1.27-1.423 4.283-2.424
7.798-2.424 1.608 0 3.11.21 4.39.57.163-.252.367-.482.605-.684zM3.5 19c1.38 0
2.5-.89 2.5-1.99C6 15.9 4.88 15 3.5 15S1 15.9 1 17.01C1 18.11 2.12 19 3.5
19zm17-3c1.38 0 2.5-.89 2.5-1.99C23 12.9 21.88 12 20.5 12s-2.5.9-2.5 2.01c0 1.1
1.12 1.99 2.5 1.99zm-4.838 7.264c1.444 0 2.616-.937 2.616-2.095
0-1.17-1.172-2.117-2.616-2.117-1.444 0-2.616.947-2.616 2.116 0 1.157 1.172
2.094 2.616 2.094z"/>
+ <path d="M13.44 0C10.44 0 8 2.74 8 6.13c0 3.38 3.02 8.16 5.44 9.53
2.42-1.37 5.45-6.15 5.45-9.53 0-3.39-2.44-6.13-5.45-6.13zm0 8.5c-1.5
0-2.72-1.36-2.72-3.05 0-1.7 1.22-3.07 2.72-3.07 1.5 0 2.73 1.37 2.73 3.07 0
1.69-1.22 3.06-2.73 3.06V8.5z"/>
+ </g>
+</svg>
diff --git a/modules/wikivoyage/styles/control-layers.less
b/modules/wikivoyage/styles/control-layers.less
index 1b059fd..311b4cd 100644
--- a/modules/wikivoyage/styles/control-layers.less
+++ b/modules/wikivoyage/styles/control-layers.less
@@ -1,3 +1,5 @@
+@import '../../../lib/wmui-base';
+
@kartographer-wv-oo-ui-iconSize: 1em;
.leaflet-control-layers {
@@ -25,7 +27,11 @@
max-width: ~'calc( 100% - 10px )';
text-align: left;
overflow: scroll;
- padding: 0.5em 0.5em 0.5em 0.5em;
+ padding: 0.5em;
+
+ a {
+ display: inline;
+ }
/* Add ellipsis to long layer labels */
label {
@@ -54,3 +60,8 @@
margin: 0 0 0.375em 0;
}
}
+
+.mw-kartographer-interactive .leaflet-bar.leaflet-control-layers-expanded {
+ border: @border-base;
+ background-color: @background-color-framed--hover;
+}
diff --git a/modules/wikivoyage/styles/control-nearby.less
b/modules/wikivoyage/styles/control-nearby.less
index 0f11a1a..e2c4510 100644
--- a/modules/wikivoyage/styles/control-nearby.less
+++ b/modules/wikivoyage/styles/control-nearby.less
@@ -1,15 +1,21 @@
/* == Nearby articles icon == */
@import 'mediawiki.mixins';
+@import '../../../lib/wmui-base';
-.mapbox-icon-nearby-active,
-.mapbox-icon-nearby-active:hover {
- background-color: #999;
- border-color: #999;
-}
+.leaflet-control-container .leaflet-control {
+ .mw-kartographer-icon-nearby {
+ /* @embed */
+ .background-image-svg( '../images/icon-nearby.svg',
'../images/icon-nearby.png' );
+ background-position: center center;
+ background-size: 20px;
-.leaflet-control-container .leaflet-control .mw-kartographer-icon-nearby {
- /* @embed */
- .background-image-svg( '../images/icon-nearby.svg',
'../images/icon-nearby.png' );
- background-size: 20px;
+ &.mapbox-icon-nearby-active,
+ &.mapbox-icon-nearby-active:hover {
+ background-color: @color-primary--active;
+ /* @embed */
+ .background-image-svg(
'../images/icon-nearby-invert.svg', '../images/icon-nearby-invert.png' );
+ border-color: @color-primary--active;
+ }
+ }
}
diff --git a/package.json b/package.json
index 7aaee26..b289b22 100644
--- a/package.json
+++ b/package.json
@@ -21,13 +21,14 @@
"prunecluster": "^2.0.0-beta.3",
"rollup": "^0.36.1",
"rollup-plugin-commonjs": "^5.0.4",
- "stylelint-config-wikimedia": "0.3.0",
- "stylelint": "^7.0.2"
+ "stylelint": "^7.0.2",
+ "stylelint-config-wikimedia": "^0.3.0"
},
"dependencies": {
"leaflet": "^0.7.7",
"leaflet-sleep": "juliengirault/Leaflet.Sleep",
"maki": "^0.5.0",
- "wikimedia-mapdata":
"git+https://gerrit.wikimedia.org/r/mapdata#497bccd38c9a440ab32d0d64ec90f44ca8ea8d32";
+ "wikimedia-mapdata":
"git+https://gerrit.wikimedia.org/r/mapdata#497bccd38c9a440ab32d0d64ec90f44ca8ea8d32";,
+ "wmui-base":
"git+https://phabricator.wikimedia.org/diffusion/WMUI/wikimedia-ui-base.git#v0.7.1";
}
}
diff --git a/styles/leaflet-overrides.less b/styles/leaflet-overrides.less
index 155a86f..fa2cbff 100644
--- a/styles/leaflet-overrides.less
+++ b/styles/leaflet-overrides.less
@@ -1,18 +1,37 @@
-.leaflet-bar a {
- background-position: center center;
-}
+@import '../lib/wmui-base.less';
+/* stylelint-disable no-descending-specificity */
.mw-kartographer-interactive {
z-index: 0;
&.leaflet-container {
- font-size: 14px;
+ font: 14px @font-family-base;
+ color: @color-base;
.marker-description img {
width: 100%;
height: auto;
margin-bottom: 0;
margin-top: 0.5em;
+ }
+
+ a {
+ color: @color-primary;
+
+ &:hover {
+ color: @color-primary--hover;
+ text-decoration: underline;
+ }
+ &:active {
+ color: @color-primary--active;
+ }
+ &:focus {
+ color: @color-primary--focus;
+ }
+ }
+
+ &:hover .leaflet-control-attribution a {
+ color: @color-primary;
}
}
@@ -37,6 +56,71 @@
.leaflet-popup-content-wrapper,
.map-legends,
.map-tooltip {
- border-radius: 2px;
+ border-radius: @border-radius-base;
+ }
+
+ /* Leaflet Controls */
+ .leaflet-control-layers,
+ .leaflet-bar {
+ background-color: @background-color-framed;
+ border: 0;
+ box-shadow: none;
+ }
+ .leaflet-bar > a,
+ .leaflet-bar > a:hover {
+ color: #000;
+ border: @border-base;
+ border-radius: @border-radius-base;
+ border-bottom: 0;
+ box-sizing: content-box;
+ }
+ .leaflet-bar > a:hover {
+ border-color: @border-color-base--hover;
+ background-color: @background-color-framed--hover;
+ }
+ .leaflet-bar > a:active {
+ border-color: @border-color-base--active;
+ background-color: @background-color-framed--active;
+ }
+ .leaflet-bar > a:only-of-type {
+ border-bottom: @border-base;
+ border-radius: @border-radius-base;
+ }
+ .leaflet-bar > a:first-child {
+ &:not(:only-of-type) {
+ border-radius: @border-radius-base @border-radius-base
0 0;
+ }
+ }
+ .leaflet-bar > a:last-child {
+ border-bottom: @border-base;
+ &:hover {
+ border-bottom: @border-base;
+ border-color: @border-color-base--hover;
+ }
+ &:active {
+ border-bottom: @border-base;
+ border-color: @border-color-base--active;
+ }
+ &:not(:only-of-type) {
+ border-radius: 0 0 @border-radius-base
@border-radius-base;
+ }
+ }
+ .leaflet-bar > a:hover:only-of-type {
+ border-radius: @border-radius-base;
+ }
+ .leaflet-bar > .oo-ui-icon-close,
+ .leaflet-bar > .oo-ui-icon-fullScreen {
+ background-position: center center;
+ }
+
+ .leaflet-control-attribution:after,
+ .leaflet-control-zoom-in,
+ .leaflet-control-zoom-out,
+ .leaflet-popup-close-button,
+ .leaflet-control-layers-toggle,
+ .map-tooltip .close,
+ .leaflet-container.dark .map-tooltip .close,
+ .mapbox-icon {
+ opacity: @opacity-base;
}
}
--
To view, visit https://gerrit.wikimedia.org/r/324251
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I7277ebb21ad9e15cf5ca7367eecc51a6494c70f8
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Kartographer
Gerrit-Branch: wmf/1.29.0-wmf.4
Gerrit-Owner: Yurik <yu...@wikimedia.org>
Gerrit-Reviewer: JGirault <julien.inbox.w...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
