Merge 505fc9f into 5a721a0

media/css/plugincheck/plugincheck.less

@@ -151,35 +151,55 @@ html[dir="rtl"] {
     margin: 30px 0 40px 0;
     padding: 8px 25px 8px 25px;
 }
-// Button overrides
-.button-negative,
-.button-negative:link,
-.button-negative:visited {
-    padding: 0 12px 0 12px;
-    width: 125px;
-    font-weight: normal;
-    span {
+/* Button overrides and styling */
+.button,
+.button:link,
+.button:visited {
+    width: 145px;
+    .font-size(1rem);
+    text-align: left;
+}
+.button {
+    &:before {
         display: inline-block;
-        background: transparent url(/media/img/plugincheck/buttons/update-now.png) 0 5px no-repeat;
+        background: transparent url(/media/img/plugincheck/icons-sprite.png) 0 0 no-repeat;
+        background-size: 36px;
         color: #fff;
-        padding: 12px 0 12px 21px;
-        width: 101px;
+        content: '';
+        padding: 12px 0 6px 41px;
+        height: 20px;
+        vertical-align: middle;
+    }
+}
+.outdated,
+.button-negative {
+    &:before {
+        background-position: 0 -35px;
+    }
+}
+.research {
+    &:before {
+        background-position: 0 -71px;
     }
 }
+.button.outdated {
+    background-color: #FFBE57;
+    background-image: linear-gradient(#FFBE57, #DB8700);
+}
+.button.outdated:hover,
+.button.outdated:link:hover,
+.button.outdated:link:focus,
+.button.outdated:visited:hover,
+.button.outdated:visited:focus,
+.button.outdated:focus {
+    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2),
+                0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset,
+                0px 12px 24px 2px #FFBE57 inset;
+}
 .safe,
 .safe:link,
 .safe:visited {
     background-image: linear-gradient(rgb(129, 188, 46), rgb(101, 147, 36));
-    padding: 0 12px 0 12px;
-    width: 125px;
-    font-weight: normal;
-    span {
-        display: inline-block;
-        background: transparent url(/media/img/plugincheck/buttons/up-to-date.png) 0 5px no-repeat;
-        color: #fff;
-        padding: 12px 0 12px 21px;
-        width: 101px;
-    }
 }
 .safe:hover,
 .safe:link:hover,
@@ -196,16 +216,6 @@ html[dir="rtl"] {
 .research:visited {
     background-color: #0095dd;
     background-image: linear-gradient(#77bef5, #0095dd);
-    padding: 0 12px 0 12px;
-    width: 125px;
-    font-weight: normal;
-    span {
-        display: inline-block;
-        background: transparent url(/media/img/plugincheck/buttons/research.png) 0 5px no-repeat;
-        color: #fff;
-        padding: 12px 0 12px 21px;
-        width: 101px;
-    }
 }
 .research:hover,
 .research:link:hover,

media/js/plugincheck/tmpl/plugincheck.ui.tmpl.js

@@ -4,27 +4,27 @@ var vulnerablePluginsTmpl = '{{#vulnerablePlugins}} <tr><th scope="row">' +
                         '<small>{{{ plugin_detail }}}</small>' +
                         '</th>' +
                         '<td class="status">{{plugin_status}}<div class="plugin_version">{{ plugin_version }}</div></td>' +
-                        '<td class="action"><a href="{{ url }}" class="button button-negative" target="_blank"><span>{{button_update}}</span></a></td>' +
+                        '<td class="action"><a href="{{ url }}" class="button button-negative" target="_blank">{{button_update}}</a></td>' +
                         '</tr> {{/vulnerablePlugins}}',
     outdatedPluginsTmpl = '{{#outdatedPlugins}} <tr><th scope="row">' +
                         '<img class="icon" width="60" height="60" src="{{icon}}" alt="" />' +
                         '{{plugin_name}}' +
                         '<small>{{{ plugin_detail }}}</small>' +
                         '</th>' +
                         '<td class="status">{{plugin_status}}<div class="plugin_version">{{ plugin_version }}</div></td>' +
-                        '<td class="action"><a href="{{ url }}" class="button button-negative" target="_blank"><span>{{button_update}}</span></a></td>' +
+                        '<td class="action"><a href="{{ url }}" class="button outdated" target="_blank">{{button_update}}</a></td>' +
                         '</tr> {{/outdatedPlugins}}',
     unknownPluginsTmpl = '{{#unknownPlugins}} <tr><th scope="row">' +
                         '{{plugin_name}} (v. {{ plugin_version }})' +
                         '<small>{{{ plugin_detail }}}</small>' +
                         '</th>' +
-                        '<td class="action"><a href="{{ url }}" class="button research" target="_blank"><span>{{button_research}}</span></a></td>' +
+                        '<td class="action"><a href="{{ url }}" class="button research" target="_blank">{{button_research}}</a></td>' +
                         '</tr> {{/unknownPlugins}}',
     upToDatePluginsTmpl = '{{#upToDatePlugins}} <tr><th scope="row">' +
                         '<img class="icon" width="60" height="60" src="{{icon}}" alt="" />' +
                         '{{plugin_name}}' +
                         '<small>{{{ plugin_detail }}}</small>' +
                         '</th>' +
                         '<td class="status">{{plugin_status}}<div class="plugin_version">{{ plugin_version }}</div></td>' +
-                        '<td class="action"><a href="{{ url }}" class="button safe" target="_blank"><span>{{button_uptodate}}</span></a></td>' +
+                        '<td class="action"><a href="{{ url }}" class="button safe" target="_blank">{{button_uptodate}}</a></td>' +
                         '</tr> {{/upToDatePlugins}}';