Refs #4127 Latest updates to theme: form elements themed, line charts, Help icon (looks great!), inline help and other design improvements

7 files changed, 323 insertions, 202 deletions

diff --git a/plugins/Morpheus/stylesheets/charts.less b/plugins/Morpheus/stylesheets/charts.less
index 24edc72684..492f6a0f98 100644
--- a/plugins/Morpheus/stylesheets/charts.less
+++ b/plugins/Morpheus/stylesheets/charts.less
@@ -11,44 +11,36 @@
   color: @theme-color-background-smallContrast;
 }
 
-.bar-graph-colors[data-name=series10] {
-  color: darken(@theme-color-base-series, 0%);
-}
-
-.bar-graph-colors[data-name=series1] {
-  color: darken(@theme-color-base-series, 15%);
-}
-
-.bar-graph-colors[data-name=series5] {
-  color: darken(@theme-color-base-series, 10%);
+.bar-graph-colors[data-name=series4] {
+  color: #3b0b09;
 }
 
-.bar-graph-colors[data-name=series7] {
-  color: darken(@theme-color-base-series, 20%);
+.bar-graph-colors[data-name=series2] {
+  color: #a11f18;
 }
 
-.bar-graph-colors[data-name=series9] {
-  color: darken(@theme-color-base-series, 25%);
+.bar-graph-colors[data-name=series3] {
+  color: #6e1510;
 }
 
-.bar-graph-colors[data-name=series3] {
-  color: darken(@theme-color-base-series, 30%);
+.bar-graph-colors[data-name=series1] {
+  color: #d4291f;
 }
 
-.bar-graph-colors[data-name=series8] {
-  color: darken(@theme-color-base-series, 35%);
+.bar-graph-colors[data-name=series5] {
+  color: #d43e20;
 }
 
 .bar-graph-colors[data-name=series6] {
-  color: darken(@theme-color-base-series, 40%);
+  color: #a12f18;
 }
 
-.bar-graph-colors[data-name=series4] {
-  color: darken(@theme-color-base-series, 45%);
+.bar-graph-colors[data-name=series7] {
+  color: #6e2010;
 }
 
-.bar-graph-colors[data-name=series2] {
-  color: darken(@theme-color-base-series, 5%);
+.bar-graph-colors[data-name=series8] {
+  color: #ed4524;
 }
 
 .bar-graph-colors[data-name=ticks] {
@@ -68,44 +60,36 @@
   color: @theme-color-background-smallContrast;
 }
 
-.pie-graph-colors[data-name=series10] {
-  color: darken(@theme-color-base-series, 0%);
-}
-
-.pie-graph-colors[data-name=series3] {
-  color: darken(@theme-color-base-series, 15%);
-}
-
-.pie-graph-colors[data-name=series5] {
-  color: darken(@theme-color-base-series, 10%);
+.pie-graph-colors[data-name=series4] {
+  color: #3b0b09;
 }
 
 .pie-graph-colors[data-name=series2] {
-  color: darken(@theme-color-base-series, 20%);
+  color: #a11f18;
 }
 
-.pie-graph-colors[data-name=series9] {
-  color: darken(@theme-color-base-series, 25%);
+.pie-graph-colors[data-name=series3] {
+  color: #6e1510;
 }
 
 .pie-graph-colors[data-name=series1] {
-  color: darken(@theme-color-base-series, 30%);
+  color: #d4291f;
 }
 
-.pie-graph-colors[data-name=series8] {
-  color: darken(@theme-color-base-series, 35%);
+.pie-graph-colors[data-name=series5] {
+  color: #d43e20;
 }
 
 .pie-graph-colors[data-name=series6] {
-  color: darken(@theme-color-base-series, 40%);
+  color: #a12f18;
 }
 
-.pie-graph-colors[data-name=series4] {
-  color: darken(@theme-color-base-series, 45%);
+.pie-graph-colors[data-name=series7] {
+  color: #6e2010;
 }
 
-.pie-graph-colors[data-name=series7] {
-  color: darken(@theme-color-base-series, 5%);
+.pie-graph-colors[data-name=series8] {
+  color: #ed4524;
 }
 
 .pie-graph-colors[data-name=ticks] {
@@ -117,3 +101,58 @@
 }
 
 //line chart colors
+
+// evolution graph colors
+
+.evolution-graph-colors[data-name=series4] {
+  color: #3b0b09;
+}
+
+.evolution-graph-colors[data-name=series2] {
+  color: #a11f18;
+}
+
+.evolution-graph-colors[data-name=series3] {
+  color: #6e1510;
+}
+
+.evolution-graph-colors[data-name=series1] {
+  color: #d4291f;
+}
+
+.evolution-graph-colors[data-name=series5] {
+  color: #d43e20;
+}
+
+.evolution-graph-colors[data-name=series6] {
+  color: #a12f18;
+}
+
+.evolution-graph-colors[data-name=series7] {
+  color: #6e2010;
+}
+
+.evolution-graph-colors[data-name=series8] {
+  color: #ed4524;
+}
+
+.evolution-graph-colors[data-name=ticks] {
+  color: #ccc;
+}
+
+.evolution-graph-colors[data-name=grid-background] {
+  color: #fff;
+}
+
+.evolution-graph-colors[data-name=grid-border] {
+  color: #f00;
+}
+
+.evolution-graph-colors[data-name=ticks] {
+    color: #ccc;
+}
+
+.evolution-graph-colors[data-name=single-metric-label] {
+    color: #666;
+}
+
diff --git a/plugins/Morpheus/stylesheets/components.less b/plugins/Morpheus/stylesheets/components.less
index 992759447d..12a3f03f18 100644
--- a/plugins/Morpheus/stylesheets/components.less
+++ b/plugins/Morpheus/stylesheets/components.less
@@ -27,6 +27,10 @@
             border-bottom: 1px solid @gray;
         }
     }
+
+    .ui-datepicker-title select {
+        font-size: 10px;
+    }
 }
 
 .ui-datepicker td.ui-datepicker-current-period a.ui-state-default, td .ui-state-active, .ui-datepicker td.ui-datepicker-current-period a.ui-state-active, .ui-datepicker td.ui-datepicker-week-end .ui-state-active, .ui-datepicker td.ui-datepicker-other-month.ui-datepicker-current-period {
@@ -37,6 +41,7 @@
     background: @calendarCurrentStateHover;
 }
 
+//add new segment
 .add_new_segment,
 #calendarRangeApply {
     font-size: 12px !important;
@@ -44,6 +49,124 @@
     margin-left: 0px !important;
 }
 
+.segment-element {
+    background: @white;
+    border-color: @silver-80;
+
+    .segment-add-row {
+        .border-radius(5px);
+    }
+
+    .segment-nav {
+        h4.visits {
+            background: url('plugins/Morpheus/images/segment-users.png') no-repeat 3px 0px;
+        }
+    }
+
+    .custom_select_search {
+        input {
+            margin-top: -10px;
+        }
+    }
+
+    .segment-content {
+        h3 {
+            font-weight: normal;
+            .font-default(13px, 15px);
+            color: @brand-black;
+        }
+        
+        .segment-add-row > div a span,
+        .segment-add-or > div a span {
+            color: @brand-red;
+            text-shadow: none;
+        }
+
+        .segment-input {
+            select, input {
+                .font-default(12px, 14px);
+                color: @brand-black;
+                font-weight: 500;
+                margin: 0px;
+                min-height: auto;
+            }
+        }
+    }
+    .segment-nav {
+        div > ul > li {
+            padding: 5px 0;
+            a {
+                font-weight: normal;
+                color: #333333;
+                text-shadow: none;
+            }
+            li {
+                padding: 3px 0 ;
+                &:hover {
+                    background: #f2f2f2;
+                    border: 0;
+                     padding: 4px 0 3px;
+                  
+                    a {
+                        border: 0;
+                        background-color: #f2f2f2;
+                        padding-right: 15px;
+
+                    }
+                }
+            }
+
+        } 
+    } 
+
+    .segment-top {
+        .font-default(10px, 12px);
+        color: #444;
+        text-transform: uppercase;
+
+        h4 {
+            color: @silver-30;
+            text-transform: uppercase;
+            .font-default(10px, 12px);
+            a.dropdown {
+                color: @silver-30;
+                text-transform: uppercase;
+                .font-default(10px, 12px);
+            }
+        }
+
+        a.dropdown {
+            color: @brand-black;
+            background: url('plugins/Zeitgeist/images/sort_subtable_desc.png') 100% -2px no-repeat;
+            &.ui-autocomplete-input {
+                background-position: 100% -2px;
+            }
+        }
+    }
+    .segment-footer {
+        background: @white;
+        button {
+            height: auto;
+            font-weight: normal;
+            min-width: 100px;
+        }
+
+        a.delete {
+            color: @brand-red;
+        }
+        .segmentFooterNote, .segment-element .segment-footer .segmentFooterNote a {
+            color: #444;
+        }
+    }
+}
+
+#available_segments a.dropdown  {
+    color: @brand-black;
+    text-transform: uppercase;
+    .font-default(10px, 12px);
+}
+
+
 #periodString {
     border: 1px solid @silver-80;
     .border-radius(0px);
@@ -134,4 +257,87 @@
             padding: 6px 5px;
         }
     }
+}
+
+//reports box 
+.reports {
+    border: 1px solid @gray;
+    .border-radius(6px);
+
+    h2 {
+        background: #f2f2f2;
+        border-bottom: 1px solid @gray;
+        padding: 11px 15px 10px;
+    }
+}
+
+.jqplot-seriespicker-popover { 
+    .box-shadow-1(none);
+}
+
+// transition box
+#Transitions_Container {
+    #Transitions_CenterBox {
+        border: 1px solid @gray;
+        .box-shadow-1(none);
+        .border-radius(6px);
+        margin: 27px 0 0 319px;
+        width: 258px;
+        height: 390px;
+        background: #fff;
+        h2 {
+            color: #1e93d1;
+            border-bottom: 1px solid @gray;
+            font-weight: normal;
+            padding: 15px;
+            background: #f5f5f5;
+            .border-radius(6px 6px 0 0);
+        }
+
+        .Transitions_CenterBoxMetrics {
+            padding: 0;
+            p {
+                font-family: Verdana, sans-serif;
+            }
+            p.Transitions_Margin {
+                text-align: left;
+                .font-default(15px, 20px);
+                border-bottom: 1px solid @gray;
+                padding: 13px;
+                .Transitions_Metric {
+                    font-weight: normal;
+                }
+            }
+            .Transitions_IncomingTraffic {
+                padding: 0 15px;
+
+                h3 {
+                    font-weight: normal;
+                    color: #000;
+                    .font-default(15px, 20px);
+                    margin-bottom: 10px;
+                }
+            }
+            .Transitions_OutgoingTraffic {
+                padding: 0 15px;
+                h3 {
+                    font-weight: normal;
+                    color: #000;
+                    .font-default(15px, 20px);
+                    margin-bottom: 10px;
+                }
+            } 
+        }
+    }
+
+    .Transitions_TitleOfOpenGroup {
+        color: #000;
+        .font-default(15px, 20px);
+        font-weight: normal;
+        margin-top: -4px;
+    }
+}
+h2 .reportDocumentationIcon,
+table.dataTable th .columnDocumentationTitle {
+    background: no-repeat url('plugins/Morpheus/images/help.png');
 }
\ No newline at end of file
diff --git a/plugins/Morpheus/stylesheets/forms.less b/plugins/Morpheus/stylesheets/forms.less
index 3c56c693e0..f654ee21b5 100644
--- a/plugins/Morpheus/stylesheets/forms.less
+++ b/plugins/Morpheus/stylesheets/forms.less
@@ -155,7 +155,7 @@ button[type="button"],
     display: block;
     float: left;
     cursor: pointer;
-    background: url('@{root}/images/forms-sprite.png');
+    background: url('plugins/Morpheus/images/forms-sprite.png');
     margin: 2px 5px 2px 0;
 }
 
diff --git a/plugins/Morpheus/stylesheets/map.less b/plugins/Morpheus/stylesheets/map.less
index fcf324accc..acf68f620d 100644
--- a/plugins/Morpheus/stylesheets/map.less
+++ b/plugins/Morpheus/stylesheets/map.less
@@ -58,47 +58,14 @@
     font-size: 14px;
 }
 
-// realtime map colors (for theming)
-.realtime-map[data-name=white-bg] {
-    color: #fff;
-}
-
 .realtime-map[data-name=white-fill] {
-    color: #aa9;
-}
-
-.realtime-map[data-name=black-bg] {
-    color: #000;
-}
-
-.realtime-map[data-name=black-fill] {
-    color: #444440;
+    color: #f2f2f2 !important;
 }
 
 .realtime-map[data-name=visit-stroke] {
-    color: #fff;
-}
-
-.realtime-map[data-name=website-referrer-color] {
-    color: #F29007;
+    color: #fff !important;
 }
 
-.realtime-map[data-name=direct-referrer-color] {
-    color: #5170AE;
-}
-
-.realtime-map[data-name=search-referrer-color] {
-    color: #CC3399;
-}
-
-.realtime-map[data-name=live-widget-highlight] {
-    color: #E4CD74;
-}
-
-.realtime-map[data-name=live-widget-unhighlight] {
-    color: #E4E2D7;
-}
-
-.realtime-map[data-name=symbol-animate-fill] {
-    color: #fdb;
+.realtime-map[data-name=white-bg] {
+    color: #808080 !important; 
 }
\ No newline at end of file
diff --git a/plugins/Morpheus/stylesheets/popups.less b/plugins/Morpheus/stylesheets/popups.less
index 3cf74f62b3..b5d84ff2cc 100644
--- a/plugins/Morpheus/stylesheets/popups.less
+++ b/plugins/Morpheus/stylesheets/popups.less
@@ -3,6 +3,16 @@
     font-weight: normal;
 }
 
+.ui-dialog .ui-widget-header {
+    color: @brand-black;
+    .font-default(18px, 24px);
+    font-weight: bold;
+}
+
+.ui-dialog-titlebar-help {
+    background: url('plugins/Morpheus/images/help.png');
+}
+
 #feedback-sent,
 #feedback-faq {
     p {
diff --git a/plugins/Morpheus/stylesheets/theme.less b/plugins/Morpheus/stylesheets/theme.less
index 45c4315ad3..905eb3854a 100644
--- a/plugins/Morpheus/stylesheets/theme.less
+++ b/plugins/Morpheus/stylesheets/theme.less
@@ -73,11 +73,6 @@ body {
     }
 }
 
-.entityContainer {
-    
-    //width: auto !important;
-}
-
 .entityTable {
     .border-radius(0px)!important;
     border:1px solid @silver-80!important;
@@ -88,7 +83,6 @@ body {
             }
         }
     }
-
 }
 
 #root {
@@ -111,7 +105,6 @@ body {
                 color: @brand-black;
             }
         }
-
     }
 
     .top_bar_sites_selector {
@@ -749,116 +742,6 @@ div.sparkline {
     padding: 5px !important;
 }
 
-.segment-element {
-    background: @white;
-    border-color: @silver-80;
-
-    .segment-add-row {
-        .border-radius(5px);
-    }
-
-    .custom_select_search {
-        input {
-            margin-top: -10px;
-        }
-    }
-
-    .segment-content {
-        h3 {
-            font-weight: normal;
-            .font-default(13px, 15px);
-            color: @brand-black;
-        }
-        
-        .segment-add-row > div a span,
-        .segment-add-or > div a span {
-            color: @brand-red;
-            text-shadow: none;
-        }
-
-        .segment-input {
-            select, input {
-                .font-default(12px, 14px);
-                color: @brand-black;
-                font-weight: 500;
-                margin: 0px;
-                min-height: auto;
-            }
-        }
-    }
-    .segment-nav {
-        div > ul > li {
-            padding: 5px 0;
-            a {
-                font-weight: normal;
-                color: #333333;
-                text-shadow: none;
-            }
-            li {
-                padding: 3px 0 ;
-                &:hover {
-                    background: #f2f2f2;
-                    border: 0;
-                     padding: 5px 0;
-                  
-                    a {
-                        border: 0;
-                        background-color: #f2f2f2;
-
-                    }
-                }
-            }
-
-        } 
-    } 
-
-    .segment-top {
-        .font-default(10px, 12px);
-        color: #444;
-        text-transform: uppercase;
-
-        h4 {
-            color: @silver-30;
-            text-transform: uppercase;
-            .font-default(10px, 12px);
-            a.dropdown {
-                color: @silver-30;
-                text-transform: uppercase;
-                .font-default(10px, 12px);
-            }
-        }
-
-        a.dropdown {
-            color: @brand-black;
-            background: url(plugins/Zeitgeist/images/sort_subtable_desc.png) 100% -2px no-repeat;
-            &.ui-autocomplete-input {
-                background-position: 100% -2px;
-            }
-        }
-    }
-    .segment-footer {
-        background: @white;
-        button {
-            height: auto;
-            font-weight: normal;
-            min-width: 100px;
-        }
-
-        a.delete {
-            color: @brand-red;
-        }
-        .segmentFooterNote, .segment-element .segment-footer .segmentFooterNote a {
-            color: #444;
-        }
-    }
-}
-
-#available_segments a.dropdown  {
-    color: @brand-black;
-    text-transform: uppercase;
-    .font-default(10px, 12px);
-    background-position: 100% 3px !important;
-}
 
 #piwik-promo-share {
     border: 0px;
diff --git a/plugins/Morpheus/stylesheets/tooltip.less b/plugins/Morpheus/stylesheets/tooltip.less
index fc444b0b75..57f477ecc8 100644
--- a/plugins/Morpheus/stylesheets/tooltip.less
+++ b/plugins/Morpheus/stylesheets/tooltip.less
@@ -1,6 +1,8 @@
-.ui-tooltip {
-    border: 0px;
-    background: rgba(0,0,0,0.9);
+.ui-tooltip,
+.ui-tooltip.Transitions_Tooltip_Small {
+    border: 0px !important;
+    background: rgba(0,0,0,0.9) !important;
+    .box-shadow-1(none) !important;
     .border-radius(3px);
     .ui-tooltip-content {
         background: none;
@@ -11,4 +13,18 @@
         font-weight: normal;
         color: @white;
     }
+}
+
+.columnDocumentation {
+    border: 0px !important;
+    background: rgba(0,0,0,0.9) !important;
+    color: @silver-60;
+    .font-default(12px, 16px);
+    padding: 7px 10px 8px 10px;
+    text-transform: none !important;
+    .columnDocumentationTitle {
+        color: #fff;
+        font-weight: normal !important;
+        margin-bottom: 2px;
+    }
 }
\ No newline at end of file