From 1fa533d794ea27a11f8ec3f372c4aa3b91e5d430 Mon Sep 17 00:00:00 2001
From: Chris <chris@chrismatic.io>
Date: Wed, 25 Mar 2015 21:26:24 -0500
Subject: [PATCH] dfPanel CSS

---
 src/css/popup.css | 71 +++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 60 insertions(+), 11 deletions(-)

diff --git a/src/css/popup.css b/src/css/popup.css
index eeff8e3de..0cc42b97e 100644
--- a/src/css/popup.css
+++ b/src/css/popup.css
@@ -81,6 +81,7 @@ body[dir="rtl"] #panes > div:nth-of-type(2) {
 #panes > div:nth-of-type(1) {
     min-width: 150px;
     padding: 4px 1px;
+    position: relative;
     }
 p {
     text-align: center;
@@ -171,8 +172,54 @@ body.dirty #refresh:hover {
     font-size: 12px;
     margin: 0;
     padding: 0;
+    padding-top: 22px;
     text-align: right;
     }
+#scopeIcons {
+    display: none;
+    cursor: default;
+    position: fixed;
+    z-index: 1;
+    border: 0;
+    direction: ltr;
+    margin: 0;
+    padding: 0;
+    font-size: 16px;
+    opacity: 0.9;
+    background: white;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    }
+#panes.dfEnabled #scopeIcons {
+    display: block;
+    }
+#scopeIcons > span {
+    background-color: transparent;
+    border: none;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    color: black;
+    display: inline-block;
+    height: 22px;
+    line-height: 22px;
+    text-align: center;
+    overflow: hidden;
+    position: relative;
+    vertical-align: middle;
+    }
+#scopeIcons > span:nth-of-type(1) {
+    width: 70%;
+    }
+#scopeIcons > span:nth-of-type(2) {
+    font-size: 80%;
+    }
+#scopeIcons > span:nth-of-type(3) {
+    font-size: 110%;
+    }
+#scopeIcons > span:nth-of-type(2),
+#scopeIcons > span:nth-of-type(3) {
+    width: 15%;
+    }
 #firewallContainer > div {
     background-color: #e6e6e6;
     border: 0;
@@ -208,26 +255,23 @@ body.dirty #refresh:hover {
     cursor: pointer;
     }
 #firewallContainer > div > span:nth-of-type(1) {
-    border-right: 1px solid white;
     padding-right: 2px;
     position: relative;
     text-overflow: ellipsis;
     width: 70%;
     }
-#firewallContainer > div > span:nth-of-type(2) {
-    cursor: pointer;
-    width: 15%;
-    }
+#firewallContainer > div > span:nth-of-type(2),
 #firewallContainer > div > span:nth-of-type(3),
 #firewallContainer > div > span:nth-of-type(4) {
     border-left: 1px solid white;
-    color: #444;
     cursor: pointer;
-    text-align: center;
     width: 15%;
     }
-#firewallContainer > div > span:nth-of-type(4) {
-    display: none;
+#firewallContainer > div > span:nth-of-type(2),
+#firewallContainer > div.isDomain > span:nth-of-type(3),
+#firewallContainer > div.isSubDomain > span:nth-of-type(3) {
+    text-align: center;
+    color: #444;
     }
 #firewallContainer > div.isDomain > span:nth-of-type(1) {
     font-weight: bold;
@@ -240,10 +284,14 @@ body.dirty #refresh:hover {
 #firewallContainer.minimized > div:nth-of-type(1) > span:nth-of-type(1):before {
     content: '+';
     }
-#firewallContainer.minimized > div.isDomain > span:nth-of-type(3) {
+#firewallContainer > div.isDomain > span:nth-of-type(3),
+#firewallContainer > div.isSubDomain > span:nth-of-type(3) {
     display: none;
     }
-#firewallContainer.minimized > div.isDomain > span:nth-of-type(4) {
+#firewallContainer.minimized > div.isDomain > span:nth-of-type(2) {
+    display: none;
+    }
+#firewallContainer.minimized > div.isDomain > span:nth-of-type(3) {
     display: inline-block;
     }
 #firewallContainer > div.allowed > span:nth-of-type(1):before,
@@ -335,6 +383,7 @@ body.dirty #refresh:hover {
     line-height: 40px;
     padding: 0.1em 0.4em;
     position: fixed;
+    z-index: 10;
     text-align: center;
     }
 #firewallContainer.dirty ~ #saveRules {