ONOS-4359: continued work on theming UI (app details panel)

Change-Id: I0961dfd6a90785b3a1dc040d500500facc8e05ed

@@ -19,12 +19,13 @@
  */
 
 .light .floatpanel {
-    background-color: rgba(255,255,255,0.8);
-    color: black;
-    box-shadow: 0 2px 12px #777;
+    background-color: white;
+    color: #3c3a3a;
+    border: 1px solid #c7c7c0;
 }
 .dark .floatpanel {
-    background-color: rgba(50,50,50,0.8);
-    color: #ccc;
-    box-shadow: 0 2px 12px #000;
+    /* TODO: dark theme */
+    background-color: white;
+    color: #3c3a3a;
+    border: 1px solid #c7c7c0;
 }

@@ -27,11 +27,8 @@
     right: -220px;
     opacity: 0;
 
-    padding: 10px;
+    padding: 2px;
     font-size: 10pt;
-
-    -moz-border-radius: 6px;
-    border-radius: 6px;
 }
 
 .floatpanel.dialog {

@@ -50,3 +50,16 @@ body {
     font-weight: lighter;
 }
 
+
+/* TODO: dark versions for links */
+a {
+    color: #009fdb;
+    text-decoration: none;
+}
+a:hover {
+    text-decoration: underline;
+}
+a:visited {
+    color: #7fabdb;
+    text-decoration: none;
+}
\ No newline at end of file

@@ -43,10 +43,11 @@
 }
 
 .light #application-details-panel.floatpanel {
-    background-color: rgb(229, 234, 237);
+    background-color: white;
 }
 .dark #application-details-panel.floatpanel {
-    background-color: #3A4042;
+    /* TODO: dark theme */
+    background-color: white;
 }
 
 .light .close-btn svg.embeddedIcon .icon.plus .glyph {
@@ -56,31 +57,28 @@
     fill: #ccc;
 }
 
-#application-details-panel td.label,
-#application-details-panel .app-url i {
-    /* works for both light and dark themes ... */
-    color: #777;
-}
-
 .light #application-details-panel hr {
-    opacity: .5;
-    border-color: #FFF;
+    border: 1px solid #c7c7c0;
 }
 .dark #application-details-panel hr {
-    border-color: #666;
+    /* TODO: dark theme */
+    border: 1px solid #c7c7c0;
 }
 
 .light #application-details-panel .bottom tr:nth-child(odd) {
-    background-color: #f9f9f9;
+    background-color: #f4f4f4;
 }
 .light #application-details-panel .bottom tr:nth-child(even) {
-    background-color: #EBEDF2;
+    background-color: #fbfbfb;
 }
+
 .dark #application-details-panel .bottom tr:nth-child(odd) {
-    background-color: #333;
+    /* TODO: dark theme */
+    background-color: #f4f4f4;
 }
 .dark #application-details-panel .bottom tr:nth-child(even) {
-    background-color: #555;
+    /* TODO: dark theme */
+    background-color: #fbfbfb;
 }
 
 .light div.dropping {

@@ -40,11 +40,13 @@
 }
 
 #application-details-panel.floatpanel {
-    -moz-border-radius: 0;
-    border-radius: 0;
     z-index: 0;
+    font-size: 12pt;
 }
 
+#application-details-panel.floatpanel a {
+    font-weight: bold;
+}
 
 #application-details-panel .container {
     padding: 0 10px;
@@ -66,14 +68,16 @@
 #application-details-panel h2 {
     display: inline-block;
     margin: 8px 0;
-    font-size: 12pt;
+    font-size: 15pt;
+    font-variant: small-caps;
+    text-transform: uppercase;
 }
 
 #application-details-panel .top .app-title {
     width: 90%;
-    height: 45px;
-    font-size: 22pt;
-    font-weight: bold;
+    height: 62px;
+    font-size: 30pt;
+    font-weight: lighter;
     overflow: hidden;
     white-space: nowrap;
     padding: 0 12px 0 0;
@@ -81,7 +85,7 @@
 
 #application-details-panel .top div.left {
     float: left;
-    padding: 0 12px 0 0;
+    padding: 12px 12px 0 4px;
 }
 #application-details-panel .top div.right {
     display: inline-block;
@@ -91,8 +95,11 @@
 
 #application-details-panel td.label,
 #application-details-panel .app-url i {
-    font-style: italic;
-    padding-right: 12px;
+    font-weight: bold;
+    text-align: right;
+    font-size: 12pt;
+
+    padding-right: 6px;
 }
 
 #application-details-panel td.value-bold {
@@ -104,8 +111,12 @@
 }
 
 #application-details-panel hr {
-    width: 95%;
-    margin: 10px auto;
+    width: 100%;
+    margin: 6px auto;
+}
+
+#application-details-panel .container {
+    overflow-y: scroll;
 }
 
 #application-details-panel .bottom table {

@@ -38,7 +38,7 @@
     var INSTALLED = 'INSTALLED',
         ACTIVE = 'ACTIVE',
         appMgmtReq = 'appManagementRequest',
-        topPdg = 50,
+        topPdg = 70,
         panelWidth = 500,
         pName = 'application-details-panel',
         detailsReq = 'appDetailsRequest',
@@ -136,19 +136,18 @@
     }
 
     function addProp(tbody, index, value) {
-        var tr = tbody.append('tr'),
-            vcls = index ? 'value' : 'value-bold';
+        var tr = tbody.append('tr');
 
         function addCell(cls, txt) {
             tr.append('td').attr('class', cls).html(txt);
         }
 
         addCell('label', friendlyProps[index] + ':');
-        addCell(vcls, value);
+        addCell('value', value);
     }
 
     function urlize(u) {
-        return '<i>URL:</i> <a href="' + u + '" target="_blank">' + u + '</a>';
+        return 'Url:<br/> <a href="' + u + '" target="_blank">' + u + '</a>';
     }
 
     function addIcon(elem, value) {

@@ -46,7 +46,7 @@
 
                 <tr ng-repeat="processor in tableData track by $index"
                     ng-repeat-complete row-id="{{processor.id}}">
-                    <td class="number">{{processor.priority}}</td>
+                    <td class="priority">{{processor.priority}}</td>
                     <td>{{processor.type}}</td>
                     <td>{{processor.processor}}</td>
                     <td class="number">{{processor.packets}}</td>