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

16 files changed, 446 insertions, 8 deletions

diff --git a/plugins/Morpheus/images/forms-sprite.png b/plugins/Morpheus/images/forms-sprite.png
new file mode 100644
index 0000000000..8c4c12d3ef
--- /dev/null
+++ b/plugins/Morpheus/images/forms-sprite.png
diff --git a/plugins/Morpheus/images/pause.gif b/plugins/Morpheus/images/pause.gif
new file mode 100644
index 0000000000..23162c35ba
--- /dev/null
+++ b/plugins/Morpheus/images/pause.gif
diff --git a/plugins/Morpheus/images/pause_disabled.gif b/plugins/Morpheus/images/pause_disabled.gif
new file mode 100644
index 0000000000..dc62608e13
--- /dev/null
+++ b/plugins/Morpheus/images/pause_disabled.gif
diff --git a/plugins/Morpheus/images/play.gif b/plugins/Morpheus/images/play.gif
new file mode 100644
index 0000000000..c49479e710
--- /dev/null
+++ b/plugins/Morpheus/images/play.gif
diff --git a/plugins/Morpheus/images/play_disabled.gif b/plugins/Morpheus/images/play_disabled.gif
new file mode 100644
index 0000000000..325147c244
--- /dev/null
+++ b/plugins/Morpheus/images/play_disabled.gif
diff --git a/plugins/Morpheus/javascripts/jquery.icheck.min.js b/plugins/Morpheus/javascripts/jquery.icheck.min.js
new file mode 100644
index 0000000000..2ca9f12eb8
--- /dev/null
+++ b/plugins/Morpheus/javascripts/jquery.icheck.min.js
@@ -0,0 +1,8 @@
+(function(f){function C(a,c,d){var b=a[0],e=/er/.test(d)?k:/bl/.test(d)?u:j;active=d==E?{checked:b[j],disabled:b[u],indeterminate:"true"==a.attr(k)||"false"==a.attr(v)}:b[e];if(/^(ch|di|in)/.test(d)&&!active)p(a,e);else if(/^(un|en|de)/.test(d)&&active)w(a,e);else if(d==E)for(var e in active)active[e]?p(a,e,!0):w(a,e,!0);else if(!c||"toggle"==d){if(!c)a[r]("ifClicked");active?b[l]!==x&&w(a,e):p(a,e)}}function p(a,c,d){var b=a[0],e=a.parent(),g=c==j,H=c==k,m=H?v:g?I:"enabled",r=h(b,m+y(b[l])),L=h(b,
+c+y(b[l]));if(!0!==b[c]){if(!d&&c==j&&b[l]==x&&b.name){var p=a.closest("form"),s='input[name="'+b.name+'"]',s=p.length?p.find(s):f(s);s.each(function(){this!==b&&f.data(this,n)&&w(f(this),c)})}H?(b[c]=!0,b[j]&&w(a,j,"force")):(d||(b[c]=!0),g&&b[k]&&w(a,k,!1));J(a,g,c,d)}b[u]&&h(b,z,!0)&&e.find("."+F).css(z,"default");e[t](L||h(b,c));e[A](r||h(b,m)||"")}function w(a,c,d){var b=a[0],e=a.parent(),g=c==j,f=c==k,m=f?v:g?I:"enabled",n=h(b,m+y(b[l])),p=h(b,c+y(b[l]));if(!1!==b[c]){if(f||!d||"force"==d)b[c]=
+!1;J(a,g,m,d)}!b[u]&&h(b,z,!0)&&e.find("."+F).css(z,"pointer");e[A](p||h(b,c)||"");e[t](n||h(b,m))}function K(a,c){if(f.data(a,n)){var d=f(a);d.parent().html(d.attr("style",f.data(a,n).s||"")[r](c||""));d.off(".i").unwrap();f(D+'[for="'+a.id+'"]').add(d.closest(D)).off(".i")}}function h(a,c,d){if(f.data(a,n))return f.data(a,n).o[c+(d?"":"Class")]}function y(a){return a.charAt(0).toUpperCase()+a.slice(1)}function J(a,c,d,b){if(!b){if(c)a[r]("ifToggled");a[r]("ifChanged")[r]("if"+y(d))}}var n="iCheck",
+F=n+"-helper",x="radio",j="checked",I="un"+j,u="disabled",v="determinate",k="in"+v,E="update",l="type",t="addClass",A="removeClass",r="trigger",D="label",z="cursor",G=/ipad|iphone|ipod|android|blackberry|windows phone|opera mini/i.test(navigator.userAgent);f.fn[n]=function(a,c){var d=":checkbox, :"+x,b=f(),e=function(a){a.each(function(){var a=f(this);b=a.is(d)?b.add(a):b.add(a.find(d))})};if(/^(check|uncheck|toggle|indeterminate|determinate|disable|enable|update|destroy)$/i.test(a))return a=a.toLowerCase(),
+e(this),b.each(function(){"destroy"==a?K(this,"ifDestroyed"):C(f(this),!0,a);f.isFunction(c)&&c()});if("object"==typeof a||!a){var g=f.extend({checkedClass:j,disabledClass:u,indeterminateClass:k,labelHover:!0},a),h=g.handle,m=g.hoverClass||"hover",y=g.focusClass||"focus",v=g.activeClass||"active",z=!!g.labelHover,s=g.labelHoverClass||"hover",B=(""+g.increaseArea).replace("%","")|0;if("checkbox"==h||h==x)d=":"+h;-50>B&&(B=-50);e(this);return b.each(function(){K(this);var a=f(this),b=this,c=b.id,d=
+-B+"%",e=100+2*B+"%",e={position:"absolute",top:d,left:d,display:"block",width:e,height:e,margin:0,padding:0,background:"#fff",border:0,opacity:0},d=G?{position:"absolute",visibility:"hidden"}:B?e:{position:"absolute",opacity:0},h="checkbox"==b[l]?g.checkboxClass||"icheckbox":g.radioClass||"i"+x,k=f(D+'[for="'+c+'"]').add(a.closest(D)),q=a.wrap('<div class="'+h+'"/>')[r]("ifCreated").parent().append(g.insert),e=f('<ins class="'+F+'"/>').css(e).appendTo(q);a.data(n,{o:g,s:a.attr("style")}).css(d);
+g.inheritClass&&q[t](b.className);g.inheritID&&c&&q.attr("id",n+"-"+c);"static"==q.css("position")&&q.css("position","relative");C(a,!0,E);if(k.length)k.on("click.i mouseenter.i mouseleave.i touchbegin.i touchend.i",function(c){var d=c[l],e=f(this);if(!b[u])if("click"==d?C(a,!1,!0):z&&(/ve|nd/.test(d)?(q[A](m),e[A](s)):(q[t](m),e[t](s))),G)c.stopPropagation();else return!1});a.on("click.i focus.i blur.i keyup.i keydown.i keypress.i",function(c){var d=c[l];c=c.keyCode;if("click"==d)return!1;if("keydown"==
+d&&32==c)return b[l]==x&&b[j]||(b[j]?w(a,j):p(a,j)),!1;if("keyup"==d&&b[l]==x)!b[j]&&p(a,j);else if(/us|ur/.test(d))q["blur"==d?A:t](y)});e.on("click mousedown mouseup mouseover mouseout touchbegin.i touchend.i",function(d){var c=d[l],e=/wn|up/.test(c)?v:m;if(!b[u]){if("click"==c)C(a,!1,!0);else{if(/wn|er|in/.test(c))q[t](e);else q[A](e+" "+v);if(k.length&&z&&e==m)k[/ut|nd/.test(c)?A:t](s)}if(G)d.stopPropagation();else return!1}})})}return this}})(jQuery);
diff --git a/plugins/Morpheus/javascripts/morpheus.js b/plugins/Morpheus/javascripts/morpheus.js
index 803e66ce91..4f555ea345 100644
--- a/plugins/Morpheus/javascripts/morpheus.js
+++ b/plugins/Morpheus/javascripts/morpheus.js
@@ -1 +1,10 @@
-console.log('Hello, Neo!');
+$(document).ready(function () {
+    // datepicker actions crashed
+    // $('input').iCheck({
+    //     checkboxClass: 'form-checkbox',
+    //     radioClass: 'form-radio',
+    //     checkedClass: 'checked',
+    //     hoverClass: 'form-hover',
+    // });
+});
+
diff --git a/plugins/Morpheus/plugin.json b/plugins/Morpheus/plugin.json
index 7005ecfba2..d8ea806c85 100644
--- a/plugins/Morpheus/plugin.json
+++ b/plugins/Morpheus/plugin.json
@@ -3,5 +3,5 @@
     "description": "Morpheus is the default theme of Piwik 2 designed to help you focus on your analytics. In Greek mythology, Morpheus is the God of dreams. In the Matrix movie, Morpheus is the leader of the rebel forces who fight to awaken humans from a dreamlike reality called The Matrix. ",
     "theme": true,
     "stylesheet": "stylesheets/theme.less",
-    "javascript": ["javascripts/morpheus.js", "javascripts/example.js"]
+    "javascript": ["javascripts/morpheus.js"]
 }
\ No newline at end of file
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 {