From 023e479beb656cb2706eedb0c26a5053fc779b59 Mon Sep 17 00:00:00 2001
From: Matthias Mees <mm@yellowled.de>
Date: Tue, 4 Mar 2014 13:40:54 +0100
Subject: [PATCH] Optimize CSS: linear gradients

Since all modern browsers by now support linear-gradient in at least
the current version, we can use it unprefixed. -webkit prefix kept
for iOS 6, though. All other browser fall back to solid color. This
alone actually saves about 6% of the backend CSS!
---
 templates/2k11/admin/style.css | 46 +++-------------------------------
 1 file changed, 4 insertions(+), 42 deletions(-)

diff --git a/templates/2k11/admin/style.css b/templates/2k11/admin/style.css
index df0f3505..f3131a8d 100644
--- a/templates/2k11/admin/style.css
+++ b/templates/2k11/admin/style.css
@@ -573,10 +573,7 @@ input[type="submit"] {
 button,
 input[type="button"] {
     background: #ddd;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(100%, #ddd));
     background-image: -webkit-linear-gradient(#fff, #ddd);
-    background-image: -moz-linear-gradient(#fff, #ddd);
-    background-image: -o-linear-gradient(#fff, #ddd);
     background-image: linear-gradient(#fff, #ddd);
     border-color: #ddd #bbb #999;
     color: #222;
@@ -588,10 +585,7 @@ input[type="button"] {
 input[type="submit"],
 button[type="submit"] {
     background: #468847;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #63af64), color-stop(100%, #468847));
     background-image: -webkit-linear-gradient(#63af64, #468847);
-    background-image: -moz-linear-gradient(#63af64, #468847);
-    background-image: -o-linear-gradient(#63af64, #468847);
     background-image: linear-gradient(#63af64, #468847);
     border-color: #468847 #2f5c30 #182f18;
 }
@@ -602,10 +596,7 @@ input[type="reset"],
 input[type="submit"].state_cancel,
 input[type="submit"].state_cancel:visited {
     background: #b94a48;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cc7a79), color-stop(100%, #b94a48));
     background-image: -webkit-linear-gradient(#cc7a79, #b94a48);
-    background-image: -moz-linear-gradient(#cc7a79, #b94a48);
-    background-image: -o-linear-gradient(#cc7a79, #b94a48);
     background-image: linear-gradient(#cc7a79, #b94a48);
     border-color: #b94a48 #893634 #582322;
 }
@@ -614,10 +605,8 @@ input[type="submit"].state_cancel:visited {
 .tabs > ul a:hover,
 button:hover,
 input[type="button"]:hover {
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(1px, #eee), color-stop(100%, #ccc));
+    background: #ccc;
     background-image: -webkit-linear-gradient(#fff, #eee 1px, #ccc);
-    background-image: -moz-linear-gradient(#fff, #eee 1px, #ccc);
-    background-image: -o-linear-gradient(#fff, #eee 1px, #ccc);
     background-image: linear-gradient(#fff, #eee 1px, #ccc);
 }
 
@@ -625,10 +614,8 @@ input[type="button"]:hover {
 .state_submit:focus,
 input[type="submit"]:hover,
 button[type="submit"]:hover {
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #63af64), color-stop(1px, #519e52), color-stop(100%, #3b723c));
+    background: #63af64;
     background-image: -webkit-linear-gradient(#63af64, #519e52 1px, #3b723c);
-    background-image: -moz-linear-gradient(#63af64, #519e52 1px, #3b723c);
-    background-image: -o-linear-gradient(#63af64, #519e52 1px, #3b723c);
     background-image: linear-gradient(#63af64, #519e52 1px, #3b723c);
 }
 
@@ -637,10 +624,8 @@ button[type="submit"]:hover {
 input[type="reset"]:hover,
 input[type="submit"].state_cancel:hover,
 input[type="submit"].state_cancel:focus {
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cc7a79), color-stop(1px, #c26260), color-stop(100%, #a2403e));
+    background: #cc7a79;
     background-image: -webkit-linear-gradient(#cc7a79, #c26260 1px, #a2403e);
-    background-image: -moz-linear-gradient(#cc7a79, #c26260 1px, #a2403e);
-    background-image: -o-linear-gradient(#cc7a79, #c26260 1px, #a2403e);
     background-image: linear-gradient(#cc7a79, #c26260 1px, #a2403e);
 }
 
@@ -651,10 +636,7 @@ input:checked + .media_selector,
 .tabs > ul a:active,
 button:active,
 input[type="button"]:active {
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(1px, #ddd), color-stop(100%, #eee));
     background-image: -webkit-linear-gradient(#fff, #ddd 1px, #eee);
-    background-image: -moz-linear-gradient(#fff, #ddd 1px, #eee);
-    background-image: -o-linear-gradient(#fff, #ddd 1px, #eee);
     background-image: linear-gradient(#fff, #ddd 1px, #eee);
     box-shadow: inset rgba(0, 0, 0, 0.25) 0 1px 2px 0;
     border-color: #999 #bbb #ddd;
@@ -663,10 +645,7 @@ input[type="button"]:active {
 .state_submit:active,
 input[type="submit"]:active
 button[type="submit"]:active {
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #63af64), color-stop(1px, #468847), color-stop(100%, #519e52));
     background-image: -webkit-linear-gradient(#63af64, #468847 1px, #519e52);
-    background-image: -moz-linear-gradient(#63af64, #468847 1px, #519e52);
-    background-image: -o-linear-gradient(#63af64, #468847 1px, #519e52);
     background-image: linear-gradient(#63af64, #468847 1px, #519e52);
     border-color: #182f18 #2f5c30 #468847;
 }
@@ -674,20 +653,14 @@ button[type="submit"]:active {
 .state_cancel:active,
 input[type="reset"]:active
 input[type="submit"].state_cancel:active {
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cc7a79), color-stop(1px, #b94a48), color-stop(100%, #c26260));
     background-image: -webkit-linear-gradient(#cc7a79, #b94a48 1px, #c26260);
-    background-image: -moz-linear-gradient(#cc7a79, #b94a48 1px, #c26260);
-    background-image: -o-linear-gradient(#cc7a79, #b94a48 1px, #c26260);
     background-image: linear-gradient(#cc7a79, #b94a48 1px, #c26260);
     border-color: #582322 #893634 #b94a48;color: #fafafa;
 }
 
 input[type="submit"].entry_preview {
     background: #ddd;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(100%, #ddd));
     background-image: -webkit-linear-gradient(#fff, #ddd);
-    background-image: -moz-linear-gradient(#fff, #ddd);
-    background-image: -o-linear-gradient(#fff, #ddd);
     background-image: linear-gradient(#fff, #ddd);
     border-color: #ddd #bbb #999;
     color: #222;
@@ -696,10 +669,8 @@ input[type="submit"].entry_preview {
 
 input[type="submit"].entry_preview:hover,
 input[type="submit"].entry_preview:focus {
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(1px, #eee), color-stop(100%, #ccc));
+    background: #ccc;
     background-image: -webkit-linear-gradient(#fff, #eee 1px, #ccc);
-    background-image: -moz-linear-gradient(#fff, #eee 1px, #ccc);
-    background-image: -o-linear-gradient(#fff, #eee 1px, #ccc);
     background-image: linear-gradient(#fff, #eee 1px, #ccc);
     color: #222;
     text-shadow: #fff 0 1px 1px;
@@ -1279,10 +1250,7 @@ summary {
    ----------------------------------------------------------------- */
 #top {
     background: #3e5f81;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3e5f81), color-stop(100%, #294564));
     background-image: -webkit-linear-gradient(#3e5f81, #294564);
-    background-image: -moz-linear-gradient(#3e5f81, #294564);
-    background-image: -o-linear-gradient(#3e5f81, #294564);
     background-image: linear-gradient(#3e5f81, #294564);
     box-shadow: 0 1px 4px rgba(0,0,0,.5);
     color: #ccdde7;
@@ -1618,10 +1586,7 @@ form > .button_link:first-of-type,
 .serendipity_statistics > section > h3,
 #login fieldset > span {
     background: #ddd;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(100%, #ddd));
     background-image: -webkit-linear-gradient(#fff, #ddd);
-    background-image: -moz-linear-gradient(#fff, #ddd);
-    background-image: -o-linear-gradient(#fff, #ddd);
     background-image: linear-gradient(#fff, #ddd);
     border-bottom: 1px solid #aaa;
     color: #666;
@@ -2943,10 +2908,7 @@ img.mfp-img {
 
     #main_menu h3 {
         background: #ddd;
-        background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(100%, #ddd));
         background-image: -webkit-linear-gradient(#fff, #ddd);
-        background-image: -moz-linear-gradient(#fff, #ddd);
-        background-image: -o-linear-gradient(#fff, #ddd);
         background-image: linear-gradient(#fff, #ddd);
         border-bottom: 1px solid #aaa;
         display: block;