Relocated icon and redesigned icon popup

skin/popup.css

 body
 {
   min-width: 250px;
   margin: 0px;
   font-family: Segoe UI, Arial, sans-serif;
   font-size: 13px;
   color: #545454;
   background-color: #f8f6f2;
   background-image: url(background.png);
 }
@@ skipping 98 matching lines @@
 footer
 {
   cursor: pointer;
   padding: 10px 35px;
   border-top: 1px solid #e1ddd8;
   background-image: url(background-main.png);
 }
 
 footer:hover
 {
-  background-image: url(background-main-hover.png);
+  background: -moz-linear-gradient(top, rgba(70, 50, 0, 0.1), rgba(70, 50, 0, 0.1)),
+    url(background-main.png);
+  background: -webkit-linear-gradient(top, rgba(70, 50, 0, 0.1), rgba(70, 50, 0, 0.1)),
+    url(background-main.png);
+  background: linear-gradient(top, rgba(70, 50, 0, 0.1), rgba(70, 50, 0, 0.1)),

[Wladimir Palant, 2013/12/17 14:11:14]

The standardized linear gradient syntax is actually different, see
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Cross-browse....
Should be:

background: linear-gradient(to bottom, ...)

+    url(background-main.png);
 }
 
 footer .icon
 {
   background-position: -50px -65px;
 }
 
 ul
 {
   margin: 0px;
@@ skipping 32 matching lines @@
 .icon
 {
   display: inline-block;
   width: 15px;
   height: 15px;
   margin-right: 15px;
   vertical-align: top;
   background-image: url(popup.png);
 }
 
-#enabled-on strong
+#enabled-yes strong
 {
   font-weight: normal;
   color: #12610e;
 }
 
-#enabled-off strong
+#enabled-no strong
 {
   font-weight: normal;
   color: #ac0505;
 }
 
 #enabled .icon
 {
   background-position: -50px -1px ;
 }
 
 #enabled.off .icon

[Felix Dahlke, 2013/12/02 15:45:58]

I find it confusing that there's both #enabled-off and #enabled.off - can you
find a less ambiguous term for one case?

[Thomas Greiner, 2013/12/03 12:06:05]

Done.

 {
   background-position: -50px -17px;
 }
 
-#enabled-off
-{
-  display: none;
-}
-
-#enabled.off #enabled-on

[Felix Dahlke, 2013/12/02 15:45:58]

Can you merge this and the rule set above?

[Thomas Greiner, 2013/12/03 12:06:05]

Done.

-{
-  display: none;
-}
-
-#enabled.off #enabled-off
+#enabled-no,
+#enabled.off #enabled-yes
+{
+  display: none;
+}
+
+#enabled.off #enabled-no
 {
   display: inline;
 }
 
 #clickhide .icon,
 #clickhide-cancel .icon
 {
   background-position: -50px -33px;
 }
 
@@ skipping 108 matching lines @@
 
 .checkbox[aria-checked="false"]:hover
 {
   background-position: -34px -49px;
 }
 
 label
 {
   vertical-align: middle;
 }