swap route control buttons

public/css/app.css

@@ -305,21 +305,26 @@ button,
 #route-page fieldset {
   display: grid;
   padding: 0;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: .5rem;
+  grid-template-columns: repeat(3, var(--icon-button-size));
+  justify-content: end;
+  gap: .65rem;
   margin: 0 0 1rem;
 }
 
 #route-page fieldset button.ui-button {
   display: grid;
   place-items: center;
-  min-width: 0;
-  min-height: 3.25rem;
+  width: var(--icon-button-size);
+  height: var(--icon-button-size);
+  min-width: 44px;
+  min-height: 44px;
   box-sizing: border-box;
-  padding: .55rem;
-  border: 1px solid transparent;
-  border-radius: .55rem;
-  box-shadow: 0 .12rem .35rem rgba(0, 0, 0, .12);
+  padding: .75rem;
+  border: 1px solid #c8d3ca;
+  border-radius: 1rem;
+  background: var(--surface);
+  box-shadow: 0 .08rem .2rem rgba(0, 0, 0, .06);
+  transition: background-color 150ms ease, border-color 150ms ease;
   cursor: pointer;
   touch-action: manipulation;
 }
@@ -335,8 +340,8 @@ button,
 }
 
 #route-page fieldset button.ui-button img {
-  width: 2rem;
-  height: 2rem;
+  width: 1.5rem;
+  height: 1.5rem;
   pointer-events: none;
 }
 #route-page fieldset > legend,
@@ -351,19 +356,8 @@ button,
   border: 0;
 }
 
-#start-route {
-  background: var(--primary);
-  border-color: var(--primary-dark);
-}
-
-#pause-route {
-  background: #9a6500;
-  border-color: #704a00;
-}
-
-#stop-route {
-  background: #9b2c2c;
-  border-color: #701f1f;
+#route-page #start-route {
+  background: #e7f1e9;
 }
 #slideshow {
   overflow: hidden;
@@ -504,20 +498,24 @@ button,
   }
 
   .app-page > header .back-button.ui-button:hover,
-  .app-page > header .back-button.ui-button:focus,
-  #start-route:not(:disabled):hover,
-  #start-route:not(:disabled):focus {
+  .app-page > header .back-button.ui-button:focus {
     background: var(--primary-dark);
     color: #fff;
   }
+  #route-page #start-route:not(:disabled):hover {
+    background: #dceade;
+    border-color: var(--primary);
+  }
   #pause-route:not(:disabled):hover,
   #pause-route:not(:disabled):focus {
-    background: #704a00;
+    background: #fff8d6;
+    border-color: #9a6500;
   }
 
   #stop-route:not(:disabled):hover,
   #stop-route:not(:disabled):focus {
-    background: #701f1f;
+    background: #fff1ef;
+    border-color: #9b2c2c;
   }
 }