From 6491b161a9d7b2792a9c89fc5c50e26eb60ba054 Mon Sep 17 00:00:00 2001
From: Tim Schaub <tim@planet.com>
Date: Sat, 30 Jul 2022 15:11:54 -0600
Subject: [PATCH] Uniformly uncolored

---
 src/ol/ol.css | 127 ++++++++++++++++++++++++++++++++++----------------
 1 file changed, 88 insertions(+), 39 deletions(-)

diff --git a/src/ol/ol.css b/src/ol/ol.css
index 69b79389e9..4644c09e3a 100644
--- a/src/ol/ol.css
+++ b/src/ol/ol.css
@@ -1,8 +1,16 @@
+:root {
+  --ol-background-color: white;
+  --ol-foreground-color: #333333;
+  --ol-subtle-foreground-color: #666666;
+  --ol-subtle-background-color: rgba(128, 128, 128, 0.25);
+  --ol-partial-background-color: rgba(255, 255, 255, 0.75);
+}
+
 .ol-box {
   box-sizing: border-box;
   border-radius: 2px;
-  border: 1.5px solid rgb(179,197,219);
-  background-color: rgba(255,255,255,0.4);
+  border: 1.5px solid var(--ol-background-color);
+  background-color: var(--ol-subtle-background-color);
 }
 
 .ol-mouse-position {
@@ -12,122 +20,138 @@
 }
 
 .ol-scale-line {
-  background: rgba(0,60,136,0.3);
+  background: var(--ol-partial-background-color);
   border-radius: 4px;
   bottom: 8px;
   left: 8px;
   padding: 2px;
   position: absolute;
 }
+
 .ol-scale-line-inner {
-  border: 1px solid #eee;
+  border: 1px solid var(--ol-subtle-foreground-color);
   border-top: none;
-  color: #eee;
+  color: var(--ol-foreground-color);
   font-size: 10px;
   text-align: center;
   margin: 1px;
   will-change: contents, width;
   transition: all 0.25s;
 }
-.ol-scale-singlebar-even{
-  background-color: #000000;
+
+.ol-scale-singlebar-even {
+  background-color: var(--ol-subtle-foreground-color);
 }
-.ol-scale-singlebar-odd{
-  background-color: #ffffff;
+
+.ol-scale-singlebar-odd {
+  background-color: var(--ol-background-color);
 }
+
 .ol-scale-bar {
   position: absolute;
   bottom: 8px;
   left: 8px;
 }
+
 .ol-scale-step-marker {
   width: 1px;
   height: 15px;
-  background-color: #000000;
+  background-color: var(--ol-foreground-color);
   float: right;
   z-index: 10;
 }
+
 .ol-scale-step-text {
   position: absolute;
   bottom: -5px;
-  font-size: 12px;
+  font-size: 10px;
   z-index: 11;
-  color: #000000;
-  text-shadow: -2px 0 #FFFFFF, 0 2px #FFFFFF, 2px 0 #FFFFFF, 0 -2px #FFFFFF;
+  color: var(--ol-foreground-color);
+  text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);
 }
+
 .ol-scale-text {
   position: absolute;
-  font-size: 14px;
+  font-size: 12px;
   text-align: center;
   bottom: 25px;
-  color: #000000;
-  text-shadow: -2px 0 #FFFFFF, 0 2px #FFFFFF, 2px 0 #FFFFFF, 0 -2px #FFFFFF;
+  color: var(--ol-foreground-color);
+  text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);
 }
+
 .ol-scale-singlebar {
   position: relative;
   height: 10px;
   z-index: 9;
   box-sizing: border-box;
-  border: 1px solid black;
+  border: 1px solid var(--ol-foreground-color);
 }
 
 .ol-unsupported {
   display: none;
 }
-.ol-viewport, .ol-unselectable {
+
+.ol-viewport,
+.ol-unselectable {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: transparent;
 }
+
 .ol-viewport canvas {
   all: unset;
 }
+
 .ol-selectable {
   -webkit-touch-callout: default;
   -webkit-user-select: text;
   -moz-user-select: text;
   user-select: text;
 }
+
 .ol-grabbing {
   cursor: -webkit-grabbing;
   cursor: -moz-grabbing;
   cursor: grabbing;
 }
+
 .ol-grab {
   cursor: move;
   cursor: -webkit-grab;
   cursor: -moz-grab;
   cursor: grab;
 }
+
 .ol-control {
   position: absolute;
-  background-color: rgba(255,255,255,0.4);
+  background-color: var(--ol-subtle-background-color);
   border-radius: 4px;
-  padding: 2px;
-}
-.ol-control:hover {
-  background-color: rgba(255,255,255,0.6);
 }
+
 .ol-zoom {
   top: .5em;
   left: .5em;
 }
+
 .ol-rotate {
   top: .5em;
   right: .5em;
   transition: opacity .25s linear, visibility 0s linear;
 }
+
 .ol-rotate.ol-hidden {
   opacity: 0;
   visibility: hidden;
   transition: opacity .25s linear, visibility 0s linear .25s;
 }
+
 .ol-zoom-extent {
   top: 4.643em;
   left: .5em;
 }
+
 .ol-full-screen {
   right: .5em;
   top: .5em;
@@ -137,7 +161,7 @@
   display: block;
   margin: 1px;
   padding: 0;
-  color: white;
+  color: var(--ol-subtle-foreground-color);
   font-weight: bold;
   text-decoration: none;
   font-size: inherit;
@@ -145,42 +169,49 @@
   height: 1.375em;
   width: 1.375em;
   line-height: .4em;
-  background-color: rgba(0,60,136,0.5);
+  background-color: var(--ol-background-color);
   border: none;
   border-radius: 2px;
 }
+
 .ol-control button::-moz-focus-inner {
   border: none;
   padding: 0;
 }
+
 .ol-zoom-extent button {
   line-height: 1.4em;
 }
+
 .ol-compass {
   display: block;
   font-weight: normal;
-  font-size: 1.2em;
   will-change: transform;
 }
+
 .ol-touch .ol-control button {
   font-size: 1.5em;
 }
+
 .ol-touch .ol-zoom-extent {
   top: 5.5em;
 }
+
 .ol-control button:hover,
 .ol-control button:focus {
   text-decoration: none;
-  background-color: rgba(0,60,136,0.7);
+  outline: 1px solid var(--ol-subtle-foreground-color);
+  color: var(--ol-foreground-color);
 }
+
 .ol-zoom .ol-zoom-in {
   border-radius: 2px 2px 0 0;
 }
+
 .ol-zoom .ol-zoom-out {
   border-radius: 0 0 2px 2px;
 }
 
-
 .ol-attribution {
   text-align: right;
   bottom: .5em;
@@ -190,47 +221,58 @@
   flex-flow: row-reverse;
   align-items: center;
 }
+
 .ol-attribution a {
-  color: rgba(0,60,136,0.7);
+  color: var(--ol-subtle-foreground-color);
   text-decoration: none;
 }
+
 .ol-attribution ul {
   margin: 0;
   padding: 1px .5em;
-  color: #000;
-  text-shadow: 0 0 2px #fff;
+  color: var(--ol-foreground-color);
+  text-shadow: 0 0 2px var(--ol-background-color);
   font-size: 12px;
 }
+
 .ol-attribution li {
   display: inline;
   list-style: none;
 }
+
 .ol-attribution li:not(:last-child):after {
   content: " ";
 }
+
 .ol-attribution img {
   max-height: 2em;
   max-width: inherit;
   vertical-align: middle;
 }
+
 .ol-attribution button {
   flex-shrink: 0;
 }
+
 .ol-attribution.ol-collapsed ul {
   display: none;
 }
+
 .ol-attribution:not(.ol-collapsed) {
-  background: rgba(255,255,255,0.8);
+  background: var(--ol-partial-background-color);
 }
+
 .ol-attribution.ol-uncollapsible {
   bottom: 0;
   right: 0;
   border-radius: 4px 0 0;
 }
+
 .ol-attribution.ol-uncollapsible img {
   margin-top: -.2em;
   max-height: 1.6em;
 }
+
 .ol-attribution.ol-uncollapsible button {
   display: none;
 }
@@ -240,6 +282,7 @@
   left: .5em;
   height: 200px;
 }
+
 .ol-zoomslider button {
   position: relative;
   height: 10px;
@@ -253,35 +296,41 @@
   left: 0.5em;
   bottom: 0.5em;
 }
+
 .ol-overviewmap.ol-uncollapsible {
   bottom: 0;
   left: 0;
   border-radius: 0 4px 0 0;
 }
+
 .ol-overviewmap .ol-overviewmap-map,
 .ol-overviewmap button {
   display: block;
 }
+
 .ol-overviewmap .ol-overviewmap-map {
-  border: 1px solid #7b98bc;
+  border: 1px solid var(--ol-subtle-foreground-color);
   height: 150px;
-  margin: 2px;
   width: 150px;
 }
+
 .ol-overviewmap:not(.ol-collapsed) button {
-  bottom: 2px;
-  left: 2px;
+  bottom: 0;
+  left: 0;
   position: absolute;
 }
+
 .ol-overviewmap.ol-collapsed .ol-overviewmap-map,
 .ol-overviewmap.ol-uncollapsible button {
   display: none;
 }
+
 .ol-overviewmap:not(.ol-collapsed) {
-  background: rgba(255,255,255,0.8);
+  background: var(--ol-subtle-background-color);
 }
+
 .ol-overviewmap-box {
-  border: 2px dotted rgba(0,60,136,0.7);
+  border: 1.5px dotted var(--ol-subtle-foreground-color);
 }
 
 .ol-overviewmap .ol-overviewmap-box:hover {