From f2d7094c849165e4af32821a2c49fc83de43ce27 Mon Sep 17 00:00:00 2001
From: Dennis Eichhorn <spl1nes.com@googlemail.com>
Date: Sun, 7 Jan 2018 17:37:34 +0100
Subject: [PATCH] Remove button gradient

---
 button.css  | 272 +++++++++++++++++++++++++---------------------------
 button.scss |   4 +-
 styles.css  |  16 +---
 3 files changed, 134 insertions(+), 158 deletions(-)

diff --git a/button.css b/button.css
index 664dc7d..aee396f 100644
--- a/button.css
+++ b/button.css
@@ -1,142 +1,130 @@
-/* Global */
-/* Content Container */
-/* Content box */
-/* Navigation */
-/* Colors */
-.btn {
-  cursor: pointer; }
-
-button, input[type="submit"], input[type="button"], a.button {
-  border: 1px solid #b7b7b7;
-  cursor: pointer;
-  text-shadow: 1px 1px 1px #ffffff;
-  min-width: 70px;
-  height: 2rem;
-  font-size: 0.9rem;
-  background: #d9d9d9;
-  background: -moz-linear-gradient(top, #f1f1f1 0, #d1d1d1 100);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1f1f1), color-stop(100, #d1d1d1));
-  background: -webkit-linear-gradient(top, #f1f1f1 0, #d1d1d1 100);
-  background: -o-linear-gradient(top, #f1f1f1 0, #d1d1d1 100);
-  background: -ms-linear-gradient(top, #f1f1f1 0, #d1d1d1 100);
-  background: linear-gradient(to bottom, #f1f1f1 0, #d1d1d1 100);
-  -moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
-  -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
-  box-shadow: inset 1px 1px 0px 0px #ffffff; }
-  button:hover, button :active, input[type="submit"]:hover, input[type="submit"] :active, input[type="button"]:hover, input[type="button"] :active, a.button:hover, a.button :active {
-    text-shadow: -1px -1px 1px #ffffff;
-    background: #d9d9d9;
-    background: -moz-linear-gradient(top, #d6d6d6 0, #ededed 100);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d6d6d6), color-stop(100, #ededed));
-    background: -webkit-linear-gradient(top, #d6d6d6 0, #ededed 100);
-    background: -o-linear-gradient(top, #d6d6d6 0, #ededed 100);
-    background: -ms-linear-gradient(top, #d6d6d6 0, #ededed 100);
-    background: linear-gradient(to bottom, #d6d6d6 0, #ededed 100); }
-
-button.red {
-  color: #ffffff;
-  text-shadow: 1px 1px 1px #696969;
-  background: #d9645b;
-  background: -moz-linear-gradient(top, #f17068 0, #d16059 100);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f17068), color-stop(100, #d16059));
-  background: -webkit-linear-gradient(top, #f17068 0, #d16059 100);
-  background: -o-linear-gradient(top, #f17068 0, #d16059 100);
-  background: -ms-linear-gradient(top, #f17068 0, #d16059 100);
-  background: linear-gradient(to bottom, #f17068 0, #d16059 100);
-  -moz-box-shadow: inset 1px 1px 0px 0px #ff8d7c;
-  -webkit-box-shadow: inset 1px 1px 0px 0px #ff8d7c;
-  box-shadow: inset 1px 1px 0px 0px #ff8d7c; }
-  button.red:hover, button.red :active {
-    text-shadow: -1px -1px 1px #696969;
-    background: #d9645b;
-    background: -moz-linear-gradient(top, #d16059 0, #f17068 100);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d16059), color-stop(100, #f17068));
-    background: -webkit-linear-gradient(top, #d16059 0, #f17068 100);
-    background: -o-linear-gradient(top, #d16059 0, #f17068 100);
-    background: -ms-linear-gradient(top, #d16059 0, #f17068 100);
-    background: linear-gradient(to bottom, #d16059 0, #f17068 100); }
-
-button.green {
-  color: #ffffff;
-  text-shadow: 1px 1px 1px #696969;
-  background: #90d99d;
-  background: -moz-linear-gradient(top, #9df1ad 0, #77d17c 100);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9df1ad), color-stop(100, #77d17c));
-  background: -webkit-linear-gradient(top, #9df1ad 0, #77d17c 100);
-  background: -o-linear-gradient(top, #9df1ad 0, #77d17c 100);
-  background: -ms-linear-gradient(top, #9df1ad 0, #77d17c 100);
-  background: linear-gradient(to bottom, #9df1ad 0, #77d17c 100);
-  -moz-box-shadow: inset 1px 1px 0px 0px #c8ffb6;
-  -webkit-box-shadow: inset 1px 1px 0px 0px #c8ffb6;
-  box-shadow: inset 1px 1px 0px 0px #c8ffb6; }
-  button.green:hover, button.green :active {
-    text-shadow: -1px -1px 1px #696969;
-    background: #90d99d;
-    background: -moz-linear-gradient(top, #77d17c 0, #9df1ad 100);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #77d17c), color-stop(100, #9df1ad));
-    background: -webkit-linear-gradient(top, #77d17c 0, #9df1ad 100);
-    background: -o-linear-gradient(top, #77d17c 0, #9df1ad 100);
-    background: -ms-linear-gradient(top, #77d17c 0, #9df1ad 100);
-    background: linear-gradient(to bottom, #77d17c 0, #9df1ad 100); }
-
-button.blue {
-  color: #ffffff;
-  text-shadow: 1px 1px 1px #696969;
-  background: #97afd9;
-  background: -moz-linear-gradient(top, #beddf1 0, #7ba9d1 100);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #beddf1), color-stop(100, #7ba9d1));
-  background: -webkit-linear-gradient(top, #beddf1 0, #7ba9d1 100);
-  background: -o-linear-gradient(top, #beddf1 0, #7ba9d1 100);
-  background: -ms-linear-gradient(top, #beddf1 0, #7ba9d1 100);
-  background: linear-gradient(to bottom, #beddf1 0, #7ba9d1 100);
-  -moz-box-shadow: inset 1px 1px 0px 0px #cbf3ff;
-  -webkit-box-shadow: inset 1px 1px 0px 0px #cbf3ff;
-  box-shadow: inset 1px 1px 0px 0px #cbf3ff; }
-  button.blue:hover, button.blue :active {
-    text-shadow: -1px -1px 1px #696969;
-    background: #97afd9;
-    background: -moz-linear-gradient(top, #7ba9d1 0, #beddf1 100);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7ba9d1), color-stop(100, #beddf1));
-    background: -webkit-linear-gradient(top, #7ba9d1 0, #beddf1 100);
-    background: -o-linear-gradient(top, #7ba9d1 0, #beddf1 100);
-    background: -ms-linear-gradient(top, #7ba9d1 0, #beddf1 100);
-    background: linear-gradient(to bottom, #7ba9d1 0, #beddf1 100); }
-
-ul.btns {
-  list-style: none;
-  overflow: hidden;
-  font-size: 12px; }
-  ul.btns li {
-    background: #f5f5ff;
-    border-left: 1px solid #b7b7b7;
-    border-top: 1px solid #b7b7b7;
-    border-bottom: 1px solid #b7b7b7;
-    float: left;
-    text-shadow: -1px -1px 1px #ffffff;
-    cursor: pointer;
-    -moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
-    -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
-    box-shadow: inset 1px 1px 0px 0px #ffffff; }
-    ul.btns li:last-child {
-      border-right: 1px solid #b7b7b7; }
-    ul.btns li:before {
-      border-left-color: #b7b7b7;
-      margin-left: 1px; }
-  ul.btns a {
-    display: block;
-    padding: 10px; }
-  ul.btns .active {
-    cursor: default; }
-  ul.btns .active, ul.btns li:hover {
-    background: #ffffff; }
-
-button.simple {
-  background: #f5f5ff;
-  border: 1px solid #b7b7b7;
-  text-shadow: -1px -1px 1px #ffffff;
-  padding: 5px;
-  min-width: 40px; }
-  button.simple:hover {
-    background: #ffffff; }
-
-/*# sourceMappingURL=button.css.map */
+/* Global */
+/* Content Container */
+/* Content box */
+/* Navigation */
+/* Colors */
+.btn {
+  cursor: pointer; }
+
+button, input[type="submit"], input[type="button"], a.button {
+  border: 1px solid #b7b7b7;
+  cursor: pointer;
+  text-shadow: 1px 1px 1px #ffffff;
+  min-width: 70px;
+  height: 2rem;
+  font-size: 0.9rem;
+  background: #f1f1f1;
+  -moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
+  -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
+  box-shadow: inset 1px 1px 0px 0px #ffffff; }
+  button:hover, button :active, input[type="submit"]:hover, input[type="submit"] :active, input[type="button"]:hover, input[type="button"] :active, a.button:hover, a.button :active {
+    text-shadow: -1px -1px 1px #ffffff;
+    background: #d6d6d6; }
+
+button.red {
+  color: #ffffff;
+  text-shadow: 1px 1px 1px #696969;
+  background: #d9645b;
+  background: -moz-linear-gradient(top, #f17068 0, #d16059 100);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f17068), color-stop(100, #d16059));
+  background: -webkit-linear-gradient(top, #f17068 0, #d16059 100);
+  background: -o-linear-gradient(top, #f17068 0, #d16059 100);
+  background: -ms-linear-gradient(top, #f17068 0, #d16059 100);
+  background: linear-gradient(to bottom, #f17068 0, #d16059 100);
+  -moz-box-shadow: inset 1px 1px 0px 0px #ff8d7c;
+  -webkit-box-shadow: inset 1px 1px 0px 0px #ff8d7c;
+  box-shadow: inset 1px 1px 0px 0px #ff8d7c; }
+  button.red:hover, button.red :active {
+    text-shadow: -1px -1px 1px #696969;
+    background: #d9645b;
+    background: -moz-linear-gradient(top, #d16059 0, #f17068 100);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d16059), color-stop(100, #f17068));
+    background: -webkit-linear-gradient(top, #d16059 0, #f17068 100);
+    background: -o-linear-gradient(top, #d16059 0, #f17068 100);
+    background: -ms-linear-gradient(top, #d16059 0, #f17068 100);
+    background: linear-gradient(to bottom, #d16059 0, #f17068 100); }
+
+button.green {
+  color: #ffffff;
+  text-shadow: 1px 1px 1px #696969;
+  background: #90d99d;
+  background: -moz-linear-gradient(top, #9df1ad 0, #77d17c 100);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9df1ad), color-stop(100, #77d17c));
+  background: -webkit-linear-gradient(top, #9df1ad 0, #77d17c 100);
+  background: -o-linear-gradient(top, #9df1ad 0, #77d17c 100);
+  background: -ms-linear-gradient(top, #9df1ad 0, #77d17c 100);
+  background: linear-gradient(to bottom, #9df1ad 0, #77d17c 100);
+  -moz-box-shadow: inset 1px 1px 0px 0px #c8ffb6;
+  -webkit-box-shadow: inset 1px 1px 0px 0px #c8ffb6;
+  box-shadow: inset 1px 1px 0px 0px #c8ffb6; }
+  button.green:hover, button.green :active {
+    text-shadow: -1px -1px 1px #696969;
+    background: #90d99d;
+    background: -moz-linear-gradient(top, #77d17c 0, #9df1ad 100);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #77d17c), color-stop(100, #9df1ad));
+    background: -webkit-linear-gradient(top, #77d17c 0, #9df1ad 100);
+    background: -o-linear-gradient(top, #77d17c 0, #9df1ad 100);
+    background: -ms-linear-gradient(top, #77d17c 0, #9df1ad 100);
+    background: linear-gradient(to bottom, #77d17c 0, #9df1ad 100); }
+
+button.blue {
+  color: #ffffff;
+  text-shadow: 1px 1px 1px #696969;
+  background: #97afd9;
+  background: -moz-linear-gradient(top, #beddf1 0, #7ba9d1 100);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #beddf1), color-stop(100, #7ba9d1));
+  background: -webkit-linear-gradient(top, #beddf1 0, #7ba9d1 100);
+  background: -o-linear-gradient(top, #beddf1 0, #7ba9d1 100);
+  background: -ms-linear-gradient(top, #beddf1 0, #7ba9d1 100);
+  background: linear-gradient(to bottom, #beddf1 0, #7ba9d1 100);
+  -moz-box-shadow: inset 1px 1px 0px 0px #cbf3ff;
+  -webkit-box-shadow: inset 1px 1px 0px 0px #cbf3ff;
+  box-shadow: inset 1px 1px 0px 0px #cbf3ff; }
+  button.blue:hover, button.blue :active {
+    text-shadow: -1px -1px 1px #696969;
+    background: #97afd9;
+    background: -moz-linear-gradient(top, #7ba9d1 0, #beddf1 100);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7ba9d1), color-stop(100, #beddf1));
+    background: -webkit-linear-gradient(top, #7ba9d1 0, #beddf1 100);
+    background: -o-linear-gradient(top, #7ba9d1 0, #beddf1 100);
+    background: -ms-linear-gradient(top, #7ba9d1 0, #beddf1 100);
+    background: linear-gradient(to bottom, #7ba9d1 0, #beddf1 100); }
+
+ul.btns {
+  list-style: none;
+  overflow: hidden;
+  font-size: 12px; }
+  ul.btns li {
+    background: #f5f5ff;
+    border-left: 1px solid #b7b7b7;
+    border-top: 1px solid #b7b7b7;
+    border-bottom: 1px solid #b7b7b7;
+    float: left;
+    text-shadow: -1px -1px 1px #ffffff;
+    cursor: pointer;
+    -moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
+    -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
+    box-shadow: inset 1px 1px 0px 0px #ffffff; }
+    ul.btns li:last-child {
+      border-right: 1px solid #b7b7b7; }
+    ul.btns li:before {
+      border-left-color: #b7b7b7;
+      margin-left: 1px; }
+  ul.btns a {
+    display: block;
+    padding: 10px; }
+  ul.btns .active {
+    cursor: default; }
+  ul.btns .active, ul.btns li:hover {
+    background: #ffffff; }
+
+button.simple {
+  background: #f5f5ff;
+  border: 1px solid #b7b7b7;
+  text-shadow: -1px -1px 1px #ffffff;
+  padding: 5px;
+  min-width: 40px; }
+  button.simple:hover {
+    background: #ffffff; }
+
+/*# sourceMappingURL=button.css.map */
diff --git a/button.scss b/button.scss
index 04f3e2c..e42e0f3 100644
--- a/button.scss
+++ b/button.scss
@@ -11,12 +11,12 @@ button, input[type="submit"], input[type="button"], a.button {
     min-width: 70px;
     height: 2rem;
     font-size: 0.9rem;
-    @include gradient-top-bottom(#f1f1f1, 0, #d1d1d1, 100, #d9d9d9);
+    background: #f1f1f1;
     @include box-shadow-out(#ffffff);
 
     &:hover, :active {
         text-shadow: -1px -1px 1px #ffffff;
-        @include gradient-top-bottom(#d6d6d6, 0, #ededed, 100, #d9d9d9);
+        background: #d6d6d6;
     }
 }
 
diff --git a/styles.css b/styles.css
index a86a241..2c1bc35 100644
--- a/styles.css
+++ b/styles.css
@@ -3990,25 +3990,13 @@ button, input[type="submit"], input[type="button"], a.button {
   min-width: 70px;
   height: 2rem;
   font-size: 0.9rem;
-  background: #d9d9d9;
-  background: -moz-linear-gradient(top, #f1f1f1 0, #d1d1d1 100);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1f1f1), color-stop(100, #d1d1d1));
-  background: -webkit-linear-gradient(top, #f1f1f1 0, #d1d1d1 100);
-  background: -o-linear-gradient(top, #f1f1f1 0, #d1d1d1 100);
-  background: -ms-linear-gradient(top, #f1f1f1 0, #d1d1d1 100);
-  background: linear-gradient(to bottom, #f1f1f1 0, #d1d1d1 100);
+  background: #f1f1f1;
   -moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
   -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
   box-shadow: inset 1px 1px 0px 0px #ffffff; }
   button:hover, button :active, input[type="submit"]:hover, input[type="submit"] :active, input[type="button"]:hover, input[type="button"] :active, a.button:hover, a.button :active {
     text-shadow: -1px -1px 1px #ffffff;
-    background: #d9d9d9;
-    background: -moz-linear-gradient(top, #d6d6d6 0, #ededed 100);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d6d6d6), color-stop(100, #ededed));
-    background: -webkit-linear-gradient(top, #d6d6d6 0, #ededed 100);
-    background: -o-linear-gradient(top, #d6d6d6 0, #ededed 100);
-    background: -ms-linear-gradient(top, #d6d6d6 0, #ededed 100);
-    background: linear-gradient(to bottom, #d6d6d6 0, #ededed 100); }
+    background: #d6d6d6; }
 
 button.red {
   color: #ffffff;