Updated styles

examples/resources/layout.css

@@ -122,13 +122,15 @@ ol.inline>li {
   background: url(map-background.jpg) repeat;
   margin-bottom: 10px;
 }
+
+.ol-control {
+  line-height: normal;
+}
+
 .ol-attribution.ol-logo-only,
 .ol-attribution.ol-uncollapsible {
   max-width: calc(100% - 3em);
 }
-.ol-attribution ul {
-  font-size: 14px;
-}
 .iframe-info iframe {
   width: 100%;
 }

src/ol/control/Attribution.js

@@ -25,7 +25,7 @@ import {removeChildren, replaceNode} from '../dom.js';
  * Instead of text, also an element (e.g. a `span` element) can be used.
  * @property {string} [expandClassName=className + '-expand'] CSS class name for the
  * collapsed attributions button.
- * @property {string|HTMLElement} [collapseLabel='»'] Text label to use
+ * @property {string|HTMLElement} [collapseLabel='›'] Text label to use
  * for the expanded attributions button.
  * Instead of text, also an element (e.g. a `span` element) can be used.
  * @property {string} [collapseClassName=className + '-collapse'] CSS class name for the
@@ -105,7 +105,7 @@ class Attribution extends Control {
         : className + '-expand';
 
     const collapseLabel =
-      options.collapseLabel !== undefined ? options.collapseLabel : '\u00BB';
+      options.collapseLabel !== undefined ? options.collapseLabel : '\u203A';
 
     const collapseClassName =
       options.collapseClassName !== undefined

src/ol/control/OverviewMap.js

@@ -48,10 +48,10 @@ class ControlledMap extends PluggableMap {
  * @typedef {Object} Options
  * @property {string} [className='ol-overviewmap'] CSS class name.
  * @property {boolean} [collapsed=true] Whether the control should start collapsed or not (expanded).
- * @property {string|HTMLElement} [collapseLabel='«'] Text label to use for the
+ * @property {string|HTMLElement} [collapseLabel='‹'] Text label to use for the
  * expanded overviewmap button. Instead of text, also an element (e.g. a `span` element) can be used.
  * @property {boolean} [collapsible=true] Whether the control can be collapsed or not.
- * @property {string|HTMLElement} [label='»'] Text label to use for the collapsed
+ * @property {string|HTMLElement} [label='›'] Text label to use for the collapsed
  * overviewmap button. Instead of text, also an element (e.g. a `span` element) can be used.
  * @property {Array<import("../layer/Layer.js").default>|import("../Collection.js").default<import("../layer/Layer.js").default>} [layers]
  * Layers for the overview map.
@@ -127,7 +127,7 @@ class OverviewMap extends Control {
       options.tipLabel !== undefined ? options.tipLabel : 'Overview map';
 
     const collapseLabel =
-      options.collapseLabel !== undefined ? options.collapseLabel : '\u00AB';
+      options.collapseLabel !== undefined ? options.collapseLabel : '\u2039';
 
     if (typeof collapseLabel === 'string') {
       /**
@@ -140,7 +140,7 @@ class OverviewMap extends Control {
       this.collapseLabel_ = collapseLabel;
     }
 
-    const label = options.label !== undefined ? options.label : '\u00BB';
+    const label = options.label !== undefined ? options.label : '\u203A';
 
     if (typeof label === 'string') {
       /**

src/ol/control/Zoom.js

@@ -14,7 +14,7 @@ import {easeOut} from '../easing.js';
  * @property {string} [zoomOutClassName=className + '-out'] CSS class name for the zoom-out button.
  * @property {string|HTMLElement} [zoomInLabel='+'] Text label to use for the zoom-in
  * button. Instead of text, also an element (e.g. a `span` element) can be used.
- * @property {string|HTMLElement} [zoomOutLabel='-'] Text label to use for the zoom-out button.
+ * @property {string|HTMLElement} [zoomOutLabel='–'] Text label to use for the zoom-out button.
  * Instead of text, also an element (e.g. a `span` element) can be used.
  * @property {string} [zoomInTipLabel='Zoom in'] Text label to use for the button tip.
  * @property {string} [zoomOutTipLabel='Zoom out'] Text label to use for the button tip.
@@ -61,7 +61,7 @@ class Zoom extends Control {
     const zoomInLabel =
       options.zoomInLabel !== undefined ? options.zoomInLabel : '+';
     const zoomOutLabel =
-      options.zoomOutLabel !== undefined ? options.zoomOutLabel : '\u2212';
+      options.zoomOutLabel !== undefined ? options.zoomOutLabel : '\u2013';
 
     const zoomInTipLabel =
       options.zoomInTipLabel !== undefined ? options.zoomInTipLabel : 'Zoom in';

src/ol/ol.css

@@ -1,7 +1,8 @@
 .ol-box {
   box-sizing: border-box;
   border-radius: 2px;
-  border: 2px solid blue;
+  border: 1.5px solid rgb(179,197,219);
+  background-color: rgba(255,255,255,0.4);
 }
 
 .ol-mouse-position {
@@ -130,7 +131,6 @@
   margin: 1px;
   padding: 0;
   color: white;
-  font-size: 1.14em;
   font-weight: bold;
   text-decoration: none;
   text-align: center;
@@ -180,13 +180,18 @@
   max-width: calc(100% - 1.3em);
   display: flex;
   flex-flow: row-reverse;
-  align-items: flex-end;
+  align-items: center;
+}
+.ol-attribution a {
+  color: rgba(0,60,136,0.7);
+  text-decoration: none;
 }
 .ol-attribution ul {
   margin: 0;
   padding: 1px .5em;
   color: #000;
   text-shadow: 0 0 2px #fff;
+  font-size: 12px;
 }
 .ol-attribution li {
   display: inline;