Refs #4127 Latest update by designers of the new Piwik 2 theme: Morpheus. Work in progress.... Let us know what you think!2.0-b10

8 files changed, 427 insertions, 6 deletions

diff --git a/plugins/Morpheus/stylesheets/admin.less b/plugins/Morpheus/stylesheets/admin.less
index a85d7260ee..213915560c 100644
--- a/plugins/Morpheus/stylesheets/admin.less
+++ b/plugins/Morpheus/stylesheets/admin.less
@@ -64,6 +64,10 @@
     }
 }
 
+.sites_autocomplete  {
+    vertical-align: middle;
+}
+
 #loadingError {
     color: @brand-red;
     font-weight: normal;
@@ -82,6 +86,15 @@
     color: @brand-blue;
 }
 
+.addRowSite,
+.addrow {
+    cursor: pointer;
+}
+
+.addrow {
+    margin-top: 10px;
+}
+
 .addRowSite {
     display: inline-block;
     margin: 5px 0;
diff --git a/plugins/Morpheus/stylesheets/charts.less b/plugins/Morpheus/stylesheets/charts.less
new file mode 100644
index 0000000000..24edc72684
--- /dev/null
+++ b/plugins/Morpheus/stylesheets/charts.less
@@ -0,0 +1,119 @@
+// bar graph colors
+.bar-graph-colors[data-name=grid-background] {
+  color: @theme-color-background-base;
+}
+
+.bar-graph-colors[data-name=grid-border] {
+  color: #f00;
+}
+
+.bar-graph-colors[data-name=grid-border] {
+  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=series7] {
+  color: darken(@theme-color-base-series, 20%);
+}
+
+.bar-graph-colors[data-name=series9] {
+  color: darken(@theme-color-base-series, 25%);
+}
+
+.bar-graph-colors[data-name=series3] {
+  color: darken(@theme-color-base-series, 30%);
+}
+
+.bar-graph-colors[data-name=series8] {
+  color: darken(@theme-color-base-series, 35%);
+}
+
+.bar-graph-colors[data-name=series6] {
+  color: darken(@theme-color-base-series, 40%);
+}
+
+.bar-graph-colors[data-name=series4] {
+  color: darken(@theme-color-base-series, 45%);
+}
+
+.bar-graph-colors[data-name=series2] {
+  color: darken(@theme-color-base-series, 5%);
+}
+
+.bar-graph-colors[data-name=ticks] {
+  color: #ccc;
+}
+
+.bar-graph-colors[data-name=single-metric-label] {
+  color: #666;
+}
+
+// pie graph colors
+.pie-graph-colors[data-name=grid-background] {
+  color: @theme-color-background-base;
+}
+
+.pie-graph-colors[data-name=grid-border] {
+  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=series2] {
+  color: darken(@theme-color-base-series, 20%);
+}
+
+.pie-graph-colors[data-name=series9] {
+  color: darken(@theme-color-base-series, 25%);
+}
+
+.pie-graph-colors[data-name=series1] {
+  color: darken(@theme-color-base-series, 30%);
+}
+
+.pie-graph-colors[data-name=series8] {
+  color: darken(@theme-color-base-series, 35%);
+}
+
+.pie-graph-colors[data-name=series6] {
+  color: darken(@theme-color-base-series, 40%);
+}
+
+.pie-graph-colors[data-name=series4] {
+  color: darken(@theme-color-base-series, 45%);
+}
+
+.pie-graph-colors[data-name=series7] {
+  color: darken(@theme-color-base-series, 5%);
+}
+
+.pie-graph-colors[data-name=ticks] {
+  color: #ccc;
+}
+
+.pie-graph-colors[data-name=single-metric-label] {
+  color: #444;
+}
+
+//line chart colors
diff --git a/plugins/Morpheus/stylesheets/colors.less b/plugins/Morpheus/stylesheets/colors.less
index 661ab637d5..18bc5dfbdd 100644
--- a/plugins/Morpheus/stylesheets/colors.less
+++ b/plugins/Morpheus/stylesheets/colors.less
@@ -31,6 +31,14 @@
 @brand-social-lightblue: #1c87bd;
 @brand-orange: #ff9600;
 
+//charts
+@theme-color-background-base: #fff;
+@theme-color-background-contrast: #5F5A60;
+@theme-color-background-smallContrast: #202020;
+@theme-color-background-lighter: #888;
+@theme-color-base-series: #ee3024;
+
+
 .color-red {
     color: @defaultRed;
 }
diff --git a/plugins/Morpheus/stylesheets/components.less b/plugins/Morpheus/stylesheets/components.less
index 20d8c321d1..992759447d 100644
--- a/plugins/Morpheus/stylesheets/components.less
+++ b/plugins/Morpheus/stylesheets/components.less
@@ -119,6 +119,7 @@
     }
 }
 
+.loadingPiwikBelow,
 .loadingPiwik {
     .font-default(10px, 12px);
     color: @silver-60;
@@ -128,9 +129,9 @@
 .annotations {
     table {
         td {
-            .font-default(10px, 12px) !important;
+            .font-default(12px, 14px) !important;
             color: @brand-black;
-            padding: 0 5px;
+            padding: 6px 5px;
         }
     }
 }
\ No newline at end of file
diff --git a/plugins/Morpheus/stylesheets/forms.less b/plugins/Morpheus/stylesheets/forms.less
index 35cd15b1a3..3c56c693e0 100644
--- a/plugins/Morpheus/stylesheets/forms.less
+++ b/plugins/Morpheus/stylesheets/forms.less
@@ -25,12 +25,19 @@ button[type="button"],
     cursor: pointer;
     border: 0px !important;
     &:hover {
+        background: #ff9600 !important;
         background-color: #ff9600 !important;
     }
 
     em {
         font-style: normal;
     }
+    &.ui-dialog-titlebar-close {
+        &:hover {
+            background: none !important;
+            background-color: none !important;
+        }
+    }
 }
 
 .sites_autocomplete {
@@ -136,3 +143,107 @@ button[type="button"],
     }
 }
 
+//checkboxes and radio
+.form-radio, .form-checkbox {
+    display: inline-block;
+    padding: 0;
+    margin: 0;
+}
+.form-radio, .form-checkbox {
+    height: 15px;
+    width: 15px;
+    display: block;
+    float: left;
+    cursor: pointer;
+    background: url('@{root}/images/forms-sprite.png');
+    margin: 2px 5px 2px 0;
+}
+
+label {
+    &.hover,
+    &:hover {
+        border: 0px;
+    }
+}
+
+.form-radio {
+    background-position: 0 -16px;
+    
+    &.form-hover {
+        background-position: -60px -16px;
+    }
+
+    &.checked {
+        background-position: -30px -16px;
+        &.form-hover {
+            background-position: -90px -16px;
+        }
+    }
+}
+
+.form-checkbox {
+    background-position: 0 0;
+    
+    &.form-hover {
+        background-position: -60px 0;
+    }
+
+    &.checked {
+        background-position: -30px 0;
+        &.form-hover {
+            background-position: -90px 0;
+        }
+    }
+}
+
+
+.prettycheckbox a:focus, .prettyradio a:focus {
+    outline: 0 none;
+}
+.prettycheckbox label, .prettyradio label {
+    display: block;
+    float: left;
+    margin: 2px;
+    cursor: pointer;
+}
+.prettycheckbox a.disabled, .prettycheckbox label.disabled, .prettyradio a.disabled, .prettyradio label.disabled {
+    cursor: not-allowed;
+}
+.prettycheckbox a {
+    background-position: 0 0;
+}
+.prettycheckbox a:focus {
+    background-position: -15px 0;
+}
+.prettycheckbox a.checked {
+    background-position: -38px 0;
+}
+.prettycheckbox a.checked:focus {
+    background-position: -53px 0;
+}
+.prettycheckbox a.checked.disabled {
+    background-position: -99px 0;
+}
+.prettycheckbox a.disabled {
+    background-position: -76px 0;
+}
+.prettyradio a {
+    background-position: -129px 0;
+}
+.prettyradio a:focus {
+    background-position: -144px 0;
+}
+.prettyradio a.checked {
+    background-position: -167px 0;
+}
+.prettyradio a.checked:focus {
+    background-position: -182px 0;
+}
+.prettyradio a.checked.disabled {
+    background-position: -228px 0;
+}
+.prettyradio a.disabled {
+    background-position: -205px 0;
+}
+
+
diff --git a/plugins/Morpheus/stylesheets/map.less b/plugins/Morpheus/stylesheets/map.less
new file mode 100644
index 0000000000..fcf324accc
--- /dev/null
+++ b/plugins/Morpheus/stylesheets/map.less
@@ -0,0 +1,104 @@
+.RealTimeMap-overlay,
+.RealTimeMap-tooltip {
+    display: block;
+    position: absolute;
+    z-index: 1000;
+}
+
+.RealTimeMap-overlay .content,
+.RealTimeMap-tooltip .content {
+    padding: 5px;
+    border-radius: 3px;
+    background: rgba(255, 255, 255, 0.9);
+}
+
+.RealTimeMap-title {
+    top: 5px;
+    left: 5px;
+}
+
+.RealTimeMap-legend {
+    right: 5px;
+    font-size: 9px;
+    bottom: 40px;
+}
+
+.RealTimeMap-info {
+    left: 5px;
+    font-size: 11px;
+    bottom: 60px;
+    max-width: 42%;
+}
+
+.RealTimeMap-info-btn {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAA3NCSVQICAjb4U/gAAAAOVBMVEX///8AAAAAAABXV1dSUlKsrKzExMTd3d3V1dXp6end3d3p6enz8/P7+/v39/f///+vqZ6oopWUjH2LPulWAAAAE3RSTlMAESIzM2Z3mZmqqrvd7u7/////UUgTXgAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAYdEVYdENyZWF0aW9uIFRpbWUAMDMuMDEuMjAxM8rVeD8AAABnSURBVBiVhY/LFoAgCEQZ0p4W6f9/bIJ4slV3oTIeBoaICGADIAO8ibEwWn2IcwVovev7znqmCYRon9kEWUFvg3IysXyIXSil3fOvELupC9XUx7pQx/piDV1sVFLwMNF80sw97hj/AXRPCjtYdmhtAAAAAElFTkSuQmCC);
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    left: 5px;
+    bottom: 40px;
+    position: absolute;
+    z-index: 1000;
+    opacity: 0.9;
+
+}
+
+.realTimeMap_overlay {
+    position: absolute;
+    left: 10px;
+    bottom: 6px;
+    font-size: 12px;
+    z-index: 10;
+    text-shadow: 1px 1px 1px #FFFFFF, -1px 1px 1px #FFFFFF, 1px -1px 1px #FFFFFF, -1px -1px 1px #FFFFFF, 1px 1px 1px #FFFFFF, -1px 1px 1px #FFFFFF, 1px -1px 1px #FFFFFF, -1px -1px 1px #FFFFFF;
+}
+
+.realTimeMap_datetime {
+    bottom: 24px;
+    color: #887;
+    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;
+}
+
+.realtime-map[data-name=visit-stroke] {
+    color: #fff;
+}
+
+.realtime-map[data-name=website-referrer-color] {
+    color: #F29007;
+}
+
+.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;
+}
\ No newline at end of file
diff --git a/plugins/Morpheus/stylesheets/mixins.less b/plugins/Morpheus/stylesheets/mixins.less
index de573c4401..ceeec230af 100644
--- a/plugins/Morpheus/stylesheets/mixins.less
+++ b/plugins/Morpheus/stylesheets/mixins.less
@@ -1,3 +1,16 @@
+.clearfix {
+  *zoom: 1;
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+  &:before {
+    content: "";
+    display: table;
+  }
+}
+
 .font-default(@size: 13px, @line: 16px) {
   font-family: Verdana, sans-serif;
   font-size: @size;
diff --git a/plugins/Morpheus/stylesheets/theme.less b/plugins/Morpheus/stylesheets/theme.less
index 111c645c10..45c4315ad3 100644
--- a/plugins/Morpheus/stylesheets/theme.less
+++ b/plugins/Morpheus/stylesheets/theme.less
@@ -6,6 +6,10 @@
 @import "popups.less";
 @import "admin.less";
 @import "tooltip.less";
+@import "charts.less";
+@import "map.less";
+
+@root: "/plugins/Morpheus";
 
 body {
     font-family: Verdana, sans-serif;
@@ -33,6 +37,16 @@ body {
     }
 }
 
+#leftcolumn {
+    width: 49%;
+    margin-right: 1%;
+}
+
+#rightcolumn {
+    float: left;
+    width: 50%;
+}
+
 #languageSelection .ui-autocomplete-input {
     position: relative;
     &:after {
@@ -60,7 +74,8 @@ body {
 }
 
 .entityContainer {
-    width: auto !important;
+    
+    //width: auto !important;
 }
 
 .entityTable {
@@ -130,7 +145,6 @@ body {
                         a {
                             color: @silver-40;
                             .font-default(15px, 18px);
-                            padding: 14px 21px 11px;
                         }
 
                         &.sfHover {
@@ -214,6 +228,9 @@ body {
                 }
             }
             .segmentationContainer {
+                > span > strong {
+                    color: @brand-red;
+                }
                 .submenu {
                     li {
                         font-weight: normal;
@@ -441,6 +458,7 @@ div.sparkline {
     z-index: 1;
 }
 
+
 .widget {
     border: 1px solid @silver-80;
     .border-radius();
@@ -451,6 +469,14 @@ div.sparkline {
         font-weight: normal;
     }
 
+    &.default {
+        margin-left: 0;
+        margin-right: 0;
+        .widgetTop {
+            cursor: default !important;
+        }
+    }
+
     .widgetTop {
         background: @silver-95;
         border-bottom: 1px solid @silver-80;
@@ -462,6 +488,10 @@ div.sparkline {
         }
     }
 
+    .widgetText {
+        padding: 10px;
+    }
+
     .pk-emptyDataTable {
         .font-default(12px, 16px);
         text-transform: none;
@@ -715,6 +745,10 @@ div.sparkline {
     border-top: 0px;
 }
 
+.metricValueBlock input {
+    padding: 5px !important;
+}
+
 .segment-element {
     background: @white;
     border-color: @silver-80;
@@ -735,8 +769,23 @@ div.sparkline {
             .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;
@@ -781,7 +830,10 @@ div.sparkline {
 
         a.dropdown {
             color: @brand-black;
-            background: url(plugins/Zeitgeist/images/sort_subtable_desc.png) 100% 3px no-repeat;
+            background: url(plugins/Zeitgeist/images/sort_subtable_desc.png) 100% -2px no-repeat;
+            &.ui-autocomplete-input {
+                background-position: 100% -2px;
+            }
         }
     }
     .segment-footer {