New styling for content / media titles

src/Umbraco.Web.UI.Client/src/common/directives/editors/umbcontentname.directive.js

@@ -26,6 +26,41 @@ angular.module("umbraco.directives")
 							scope.placeholder = value;	
 						});
 				}
+			    
+				(function () {
+
+				    var mX, mY, distance;
+
+				    function calculateDistance(elem, mouseX, mouseY) {
+
+				        var cx = Math.max(Math.min(mouseX, elem.offset().left + elem.width()), elem.offset().left);
+				        var cy = Math.max(Math.min(mouseY, elem.offset().top + elem.height()), elem.offset().top);
+				        return Math.sqrt((mouseX - cx) * (mouseX - cx) + (mouseY - cy) * (mouseY - cy));
+				    }
+
+				    var mouseMoveDebounce = _.throttle(function (e) {
+				        mX = e.pageX;
+				        mY = e.pageY;
+				        // not focused and not over element
+				        if (!inputElement.is(":focus") && !inputElement.hasClass("ng-invalid")) {
+				            // on page
+				            if (mX >= inputElement.offset().left) {
+				                distance = calculateDistance(inputElement, mX, mY);
+				                if (distance <= 155) {
+
+				                    distance = 1 - (100 / 150 * distance / 100);
+				                    inputElement.css("border", "1px solid rgba(175,175,175, " + distance + ")");
+				                    inputElement.css("background-color", "rgba(255,255,255, " + distance + ")");
+				                }
+				            }
+
+				        }
+
+				    }, 15);
+
+				    $(document).mousemove(mouseMoveDebounce);
+
+				})();
 
 				$timeout(function(){
 					if(!scope.model){

src/Umbraco.Web.UI.Client/src/less/modals.less

@@ -9,8 +9,8 @@
 .umb-modalcolumn-header {
   background: @grayLighter;
   border-bottom: 1px solid @grayLight;
-  height: 79px;
-  padding: 20px 20px 0px 20px;
+  height: 94px;
+  padding: 5px 20px 0px 20px;
   white-space: nowrap
 }
 

src/Umbraco.Web.UI.Client/src/less/panel.less

@@ -38,18 +38,19 @@
 }
 
 .umb-panel-header .umb-headline, .umb-panel-header h1 {
-  font-size: 18px;
+  font-size: 16px;
   border: none;
   background: none;
-  margin: 25px 0 0 20px;
-  padding: 0;
+  margin: 15px 0 0 20px;
+  padding: 3px 5px;
   height: auto;
   width: 100%;
+  border: 1px solid @grayLighter;
 }
 
-.umb-panel-header .umb-headline:hover,.umb-panel-header .umb-headline:active  {
-  border-bottom: 1px dotted @grayLight;
-  color: @black
+.umb-panel-header .umb-headline:focus,.umb-panel-header .umb-headline:active  {
+  border: 1px solid @grayLight;
+  background-color: @white;
 }
 
 .umb-headline-editor-wrapper{
@@ -94,9 +95,9 @@
   color: @red;
 }
 
-.umb-headline-editor-wrapper input.ng-invalid::-webkit-input-placeholder {color: @red;}
-.umb-headline-editor-wrapper input.ng-invalid::-moz-placeholder {color: @red;}
-.umb-headline-editor-wrapper input.ng-invalid:-ms-input-placeholder {color: @red;}
+.umb-headline-editor-wrapper input.ng-invalid::-webkit-input-placeholder {color: @red; line-height: 22px;}
+.umb-headline-editor-wrapper input.ng-invalid::-moz-placeholder {color: @red; line-height: 22px;}
+.umb-headline-editor-wrapper input.ng-invalid:-ms-input-placeholder {color: @red; line-height: 22px;}
 
 .umb-panel-header i {
   font-size: 13px;
@@ -109,7 +110,7 @@
 
 .umb-panel-header .umb-btn-toolbar {
     float: right;
-    padding: 20px 20px 0 0;
+    padding: 5px 20px 0 0;
 }
 
 .umb-panel-footer {