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,328 @@
+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);

[Wladimir Palant, 2013/12/03 12:55:43]

Are we seriously changing the background on hover? Can we still reconsider?

[Felix Dahlke, 2013/12/04 12:30:07]

I thought the same to be honest. It's hard to judge without seeing this in
action, but I thought just underlining the settings link would suffice
affordance-wise.

[Thomas Greiner, 2013/12/10 10:09:29]

Are we talking about performance, extension size increase or design here?

Regarding the last one it's more consistent with the menu items' hover effect.
Otherwise the need for the second background image could be eliminated by
overlaying a semi-transparent layer over it to achieve the same effect.

[sven, 2013/12/11 11:00:27]

IMHO it's very unusual and insufficient only underlining the label of a button
if the hover effect is activated after hovering a way bigger element. If you
right or left click to any extension in a browser you will see that it's common
practice to change the background color after hovering a menu item. The other
argument for a background change is like thomas mentioned the consistency. So
which objective arguments are there to change it and did you mean only the
footer or all menu items Wladimir?

On 2013/12/04 12:30:07, Felix H. Dahlke wrote:

[Felix Dahlke, 2013/12/11 11:11:13]

Design, isn't that obvious?

On 2013/12/11 11:00:27, sven wrote:
Yes, I meant just the link should react to hover/click events of course.
The difference here is that this looks like a part of the border last time I
checked, and hence weird. But I've never seen it in action, I can only imagine.
I suggested an alternative here, not Wladimir. But we can't have that discussion
here, I need to see it in action. Can either of you send some current
screenshots over?

[Wladimir Palant, 2013/12/11 11:20:26]

Apparently, the idea is simply to make the background slightly darker on hover.
The current approach has issues: it adds one more background image that has to
be kept in sync with the regular background image. Please consider the following
solution:

footer:hover
{
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
url(background-main.png);
}

Note that, unlike with a plain background color, a linear gradient can be
displayed on top of the background image. Of course we would also need an
unprefixed and a -webkit- prefixed version as well but this should work without
an additional image.

[Felix Dahlke, 2013/12/11 11:30:57]

Just saw the screen cast, looks fine design-wise IMO.

Regarding Wladimir's suggestion - why is this an image to begin with? Looks like
a slightly transparent solid colour, rgba should do, wouldn't it?

[Wladimir Palant, 2013/12/11 11:46:19]

It isn't quite solid, it rather has a bit of structure in it (same as our
homepage background). We used to implement that structure as a linear gradient
but the performance of that solution wasn't great.

[Thomas Greiner, 2013/12/11 13:15:24]

Done.

+}
+
+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;
+}