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,332 @@
+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-image: url(background-main-hover.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-on strong
+{
+  font-weight: normal;
+  color: #12610e;
+}
+
+#enabled-off 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
+{
+  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;
+}