Relocated icon and redesigned icon popup

skin/popup.css

Index: skin/popup.css
===================================================================
new file mode 100644
--- /dev/null
+++ b/skin/popup.css
@@ -0,0 +1,333 @@
+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);
+}
+
+#clickhide-instructions,
+#clickhide-cancel,
+body.clickhide-active li
+{
+  display: none;
+}
+
+body.clickhide-active #clickhide-instructions,
+body.clickhide-active #clickhide-cancel
+{
+  display: block;
+}
+
+body.local #enabled,
+body.local #clickhide,
+body.local #stats-page
+{
+  display: none;
+}
+
+header
+{
+  height: 45px;
+  margin-bottom: 40px;
+  border-bottom: 1px solid #e1ddd8;
+  background-image: url(background-main.png);
+}
+
+#logo
+{
+  position: relative;
+  top: 20px;
+  width: 55px;
+  height: 55px;
+  margin: 0px auto;
+  background-image: url(abp-icon-big.png);
+  background-size: 100%;
+}
+
+#wrapper
+{
+  padding: 0px 20px;
+}
+
+#notification, #menu
+{
+  margin-bottom: 10px;
+}
+
+#notification
+{
+  display: none;
+  position: relative;
+  margin-top: -70px;
+  min-height: 50px;
+  padding: 10px;
+  color: #fff;
+  border: 3px solid black;
+  background-color: #555;
+}
+
+#notification.critical
+{
+  border-color: #a4311c;
+  background-color: #c72e12;
+}
+
+#notification.information
+{
+  border-color: #1c5fa4;
+  background-color: #1281c7;
+}
+
+#notification h1
+{
+  margin: 0px 15px 5px 0px;
+  font-size: 15px;
+}
+
+#notification a
+{
+  color: #fff;
+}
+
+#close-notification
+{
+  cursor: pointer;
+  display: inline-block;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 8px;
+  height: 8px;
+  background-image: url(popup.png);
+  background-position: -34px -89px;
+}
+
+footer
+{
+  cursor: pointer;
+  padding: 10px 35px;
+  border-top: 1px solid #e1ddd8;
+  background-image: url(background-main.png);
+}
+
+footer:hover
+{
+  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;
+  padding: 0px;
+}
+
+li
+{
+  cursor: pointer;
+  list-style-type: none;
+  white-space: nowrap;
+  border-top: 1px dashed #a5a4a1;
+}
+
+li ul
+{
+  margin-left: 35px;
+}
+
+li li
+{
+  cursor: default;
+  padding: 10px 15px;
+}
+
+.menu-item
+{
+  padding: 10px 0px 10px 15px;
+}
+
+.menu-item:hover
+{
+  background-color: #ece7df;
+}
+
+.icon
+{
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  margin-right: 15px;
+  vertical-align: top;
+  background-image: url(popup.png);
+}
+
+#enabled-yes strong
+{
+  font-weight: normal;
+  color: #12610e;
+}
+
+#enabled-no strong
+{
+  font-weight: normal;
+  color: #ac0505;
+}
+
+#enabled .icon
+{
+  background-position: -50px -1px ;
+}
+
+#enabled.off .icon
+{
+  background-position: -50px -17px;
+}
+
+#enabled-no,
+#enabled.off #enabled-yes
+{
+  display: none;
+}
+
+#enabled.off #enabled-no
+{
+  display: inline;
+}
+
+#clickhide .icon,
+#clickhide-cancel .icon
+{
+  background-position: -50px -33px;
+}
+
+#clickhide-instructions
+{
+  margin: 10px 15px;
+}
+
+#stats-container .icon
+{
+  background-position: -50px -49px;
+}
+
+
+#stats strong
+{
+  font-size: 15px;
+  line-height: 140%;
+}
+
+#share
+{
+  margin-top: 5px;
+  color: #949494;
+}
+
+#share-box
+{
+  margin-top: 10px;
+}
+
+#share-box div[data-social]
+{
+  cursor: pointer;
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  margin: 3px 10px 3px 3px;
+  border-radius: 3px;
+  background-image: url(popup.png);
+}
+
+#share-box div[data-social]:hover
+{
+  margin: 0px 7px 0px 0px;
+  border: 3px solid #cdc6bd
+}
+
+#share-box div[data-social="facebook"]
+{
+  background-position: -1px -1px;
+}
+
+#share-box div[data-social="twitter"]
+{
+  background-position: -1px -34px;
+}
+
+#share-box div[data-social="gplus"]
+{
+  background-position: -1px -67px;
+}
+
+.collapse
+{
+  position: relative;
+  padding-right: 25px;
+}
+
+.collapse-icon
+{
+  display: inline-block;
+  position: absolute;
+  top: 13px;
+  right: 10px;
+  width: 11px;
+  height: 11px;
+  background-image: url(popup.png);
+  background-position: -34px -65px;
+}
+
+.collapsed .collapse-icon
+{
+  background-position: -34px -77px;
+}
+
+.collapsed .collapsable
+{
+  display: none;
+}
+
+.checkbox
+{
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  margin-right: 5px;
+  vertical-align: middle;
+  background-image: url(popup.png);
+  background-position: -34px -1px;
+}
+
+.checkbox:hover
+{
+  background-position: -34px -17px;
+}
+
+.checkbox[aria-checked="false"]
+{
+  background-position: -34px -33px;
+}
+
+.checkbox[aria-checked="false"]:hover
+{
+  background-position: -34px -49px;
+}
+
+label
+{
+  vertical-align: middle;
+}