refs #7090 #4789 Improve the look of data tables, entity tables, forms, ...

1 files changed, 62 insertions, 45 deletions

diff --git a/plugins/Live/stylesheets/live.less b/plugins/Live/stylesheets/live.less
index b7161cf973..82480f5569 100644
--- a/plugins/Live/stylesheets/live.less
+++ b/plugins/Live/stylesheets/live.less
@@ -2,18 +2,26 @@
     text-align: left;
     font-size: 90%;
     color: @theme-color-text-light;
+    border-top: 1px solid @color-silver-l90;
+
+   .dataTable {
+     margin-bottom: -1px;
+   }
 }
 
-#visitsLive .datetime, #visitsLive .country, #visitsLive .referrer, #visitsLive .settings, #visitsLive .returning {
-    border-bottom: 1px solid #d3d1c5;
-    border-right: 1px solid #d3d1c5;
-    padding: 5px 5px 5px 12px;
+#visitsLive .settings {
+  border-bottom: 1px solid @color-silver-l90;
+}
+
+#visitsLive .datetime, #visitsLive .country, #visitsLive .settings, #visitsLive .returning {
+    padding: 10px 5px 10px 12px;
 }
 
 #visitsLive .datetime {
     background: #E4E2D7;
     border-top: 1px solid #d3d1c5;
     margin: 0;
+    line-height: 20px;
     text-align: left;
 }
 
@@ -22,11 +30,9 @@
 }
 
 #visitsLive .referrer {
-    background: #F9FAFA none repeat scroll 0 0;
-}
-
-#visitsLive .referrer:hover {
-    background: #FFFFF7;
+  display: block;
+  padding-top: 4px;
+  padding-bottom: 1px;
 }
 
 #visitsLive .pagesTitle {
@@ -78,10 +84,6 @@
     text-decoration: none;
 }
 
-table.dataTable td.highlightField {
-    background-color: #FFFFCB !important;
-}
-
 ol.visitorLog {
     list-style: decimal inside none;
 }
@@ -118,7 +120,6 @@ ol.visitorLog li {
 }
 
 .visitorRank {
-    margin-left: 5px;
     border: 1px solid #D8D8D8;
     color: #474747;
     border-radius: 3px;
@@ -190,36 +191,52 @@ ol.visitorLog p {
     padding:0;
 }
 
-.dataTableVizVisitorLog table.dataTable .column {
-  white-space: normal;
-  padding: 12px 5px;
-}
-.dataTableVizVisitorLog table.dataTable .label {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+.dataTableVizVisitorLog {
+
+  .card {
+    padding: 15px 0px;
+    font-size: 13px;
+    text-align: left;
+
+    a {
+      text-decoration: none !important;
+      color: @theme-color-link;
+      width: inherit;
+    }
+  }
+
+  .visitorLog > li > div {
+    width: 95%;
+  }
+
+  .dataTableWrapper {
+     width:100%;
+  }
 
-.dataTableVizVisitorLog .dataTableWrapper {
-    width:100%;
+  .card {
+
+    &:hover .visitor-log-visitor-profile-link {
+      display:inline;
+    }
+  }
 }
 
 .visitor-log-page-list {
     position:relative;
 }
-.dataTableVizVisitorLog tr:hover .visitor-log-visitor-profile-link {
-    display:inline;
-}
+
 a.visitor-log-visitor-profile-link {
+    z-index: 2;
     position:absolute;
     display:none;
-    right:8px;
-    top:0;
+    right: 15px;
+    top: 15px;
     font-style:italic;
     font-size:13px;
 
     img {
-        margin-top:-2px;
+        margin-top: -2px;
+        margin-bottom: -3px;
     }
 }
 
@@ -249,18 +266,12 @@ a.visitor-log-visitor-profile-link {
     display: block;
 }
 
-span.visitorLogIcons:after {
-  content: " ";
-  clear: both;
-  display: inline-block;
-}
-
 .visitorLogIconWithDetails .details {
     display: none;
 }
 
 .visitorLogIcons>span>span>img {
-    margin: auto 0 auto 5px;
+    margin: auto 0 auto 0px;
 }
 
 .visitorLogIcons .visitorLogIconWithDetails>img {
@@ -271,16 +282,22 @@ span.visitorLogIcons:after {
     margin: auto 0;
 }
 
-.visitorLogIcons .visitorDetails {
-    float: left;
+.visitorLogIcons {
+  .visitorDetails, .visitorType {
     display: block;
-    height: 100px;
+    margin-top: 4px;
+  }
 }
 
-.visitorLogIcons .visitorType {
-    float: right;
-    display: block;
-    margin-bottom: 1em;
+.own-visitor-column {
+  .visitorLogIcons {
+    .visitorDetails {
+      margin-top: 0px;
+    }
+    .visitorType {
+      margin-top: 8px;
+    }
+  }
 }
 
 .visitorReferrer {