Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Unified Diff: skin/popup.css

Issue 29317001: Relocated icon and redesigned icon popup (Closed)
Patch Set: Rebased Created Nov. 19, 2013, 1:43 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
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
+{
+ background-position: -50px -17px;
+}
+
+#enabled-off
+{
+ display: none;
+}
+
+#enabled.off #enabled-on
+{
+ 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;
+}
« safari/background.js ('K') | « skin/background-main-hover.png ('k') | skin/popup.png » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld