From 14cb526f8611c86f5d49e19f96e39b709d434e55 Mon Sep 17 00:00:00 2001
From: Misty Stanley-Jones <misty@docker.com>
Date: Fri, 10 Feb 2017 13:46:00 -0800
Subject: [PATCH] Un-linkedin-ify the buttons

---
 css/hopscotch.css | 89 +++++++++++++----------------------------------
 1 file changed, 24 insertions(+), 65 deletions(-)

diff --git a/css/hopscotch.css b/css/hopscotch.css
index c5e557d490e..af5170baf35 100644
--- a/css/hopscotch.css
+++ b/css/hopscotch.css
@@ -196,9 +196,7 @@
     animation-name: fadeInLeft;
 }
 div.hopscotch-bubble .hopscotch-nav-button {
-    font-weight: 700;
-    border-width: 1px;
-    border-style: solid;
+    font-weight: 900;
     cursor: pointer;
     margin: 0;
     overflow: visible;
@@ -208,77 +206,34 @@ div.hopscotch-bubble .hopscotch-nav-button {
     height: 26px;
     line-height: 24px;
     font-size: 12px;
-    *zoom: 1;
-    white-space: nowrap;
     display: -moz-inline-stack;
     display: inline-block;
     *vertical-align: auto;
-    zoom: 1;
-    *display: inline;
     vertical-align: middle;
-    -moz-border-radius: 3px;
-    -ms-border-radius: 3px;
-    -o-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-}
-div.hopscotch-bubble .hopscotch-nav-button:hover {
-    *zoom: 1;
-    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
-    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
-}
-div.hopscotch-bubble .hopscotch-nav-button:active {
-    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .25) inset;
-    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .25) inset;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, .25) inset;
-}
-div.hopscotch-bubble .hopscotch-nav-button.next {
-    border-color: #1b5480;
-    color: #fff;
-    margin: 0 0 0 10px;
-    text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
-    background-color: #287bbc;
-    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0,  startColorstr='#287bbc',  endColorstr='#23639a');
-    background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #287bbc), color-stop(100%, #23639a));
-    background-image: -webkit-linear-gradient(top, #287bbc 0, #23639a 100%);
-    background-image: -moz-linear-gradient(top, #287bbc 0, #23639a 100%);
-    background-image: -o-linear-gradient(top, #287bbc 0, #23639a 100%);
-    background-image: linear-gradient(top, #287bbc 0, #23639a 100%);
-}
-div.hopscotch-bubble .hopscotch-nav-button.next:hover {
-    background-color: #2672ae;
-    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0,  startColorstr='#2672ae',  endColorstr='#1e4f7e');
-    background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #2672ae), color-stop(100%, #1e4f7e));
-    background-image: -webkit-linear-gradient(top, #2672ae 0, #1e4f7e 100%);
-    background-image: -moz-linear-gradient(top, #2672ae 0, #1e4f7e 100%);
-    background-image: -o-linear-gradient(top, #2672ae 0, #1e4f7e 100%);
-    background-image: linear-gradient(top, #2672ae 0, #1e4f7e 100%);
 }
+
+div.hopscotch-bubble .hopscotch-nav-button.next,
 div.hopscotch-bubble .hopscotch-nav-button.prev {
-    border-color: #a7a7a7;
-    color: #444;
-    text-shadow: 0 1px 1px rgba(255, 255, 255, .75);
-    background-color: #f2f2f2;
-    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0,  startColorstr='#f2f2f2',  endColorstr='#e9e9e9');
-    background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #f2f2f2), color-stop(100%, #e9e9e9));
-    background-image: -webkit-linear-gradient(top, #f2f2f2 0, #e9e9e9 100%);
-    background-image: -moz-linear-gradient(top, #f2f2f2 0, #e9e9e9 100%);
-    background-image: -o-linear-gradient(top, #f2f2f2 0, #e9e9e9 100%);
-    background-image: linear-gradient(top, #f2f2f2 0, #e9e9e9 100%);
+    background-color: #fff;
+    margin: 0 0 0 10px;
 }
+
+div.hopscotch-bubble .hopscotch-nav-button.next:hover,
 div.hopscotch-bubble .hopscotch-nav-button.prev:hover {
-    background-color: #e8e8e8;
-    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0,  startColorstr='#FFE8E8E8',  endColorstr='#FFA9A9A9');
-    background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #e8e8e8), color-stop(13%, #e3e3e3), color-stop(32%, #d7d7d7), color-stop(71%, #b9b9b9), color-stop(100%, #a9a9a9));
-    background-image: -webkit-linear-gradient(top, #e8e8e8 0, #e3e3e3 13%, #d7d7d7 32%, #b9b9b9 71%, #a9a9a9 100%);
-    background-image: -moz-linear-gradient(top, #e8e8e8 0, #e3e3e3 13%, #d7d7d7 32%, #b9b9b9 71%, #a9a9a9 100%);
-    background-image: -o-linear-gradient(top, #e8e8e8 0, #e3e3e3 13%, #d7d7d7 32%, #b9b9b9 71%, #a9a9a9 100%);
-    background-image: linear-gradient(top, #e8e8e8 0, #e3e3e3 13%, #d7d7d7 32%, #b9b9b9 71%, #a9a9a9 100%);
+    opacity: .8;
 }
+
+div.hopscotch-bubble .hopscotch-nav-button.next {
+  color: #0087c9;
+  border: 2px solid #0087c9;
+}
+
+div.hopscotch-bubble .hopscotch-nav-button.prev {
+  color: #999;
+  border: 2px solid #999;
+}
+
+
 div.hopscotch-bubble {
     background-color: #fff;
     border: 5px solid #000;
@@ -369,6 +324,10 @@ div.hopscotch-bubble .hopscotch-bubble-close {
     font-weight: bold;
 }
 
+div.hopscotch-bubble .hopscotch-bubble-close:hover {
+  opacity: .8;
+}
+
 div.hopscotch-bubble .hopscotch-bubble-close.hide, div.hopscotch-bubble .hopscotch-bubble-close.hide-all {
     display: none;
 }