Notifications: New alert style

-Move corner alert to pop up under notification area, intead of in the
 window corner, for better visibility

-Give alert box tooltip appearance

ui/css/cloudstack3.css

@@ -1104,58 +1104,75 @@ div.notification-box .button.close:hover {
 
 /*** Corner alert*/
 div.notification.corner-alert {
-  background: #EBE8E8;
+  background: #FFFFFF;
+  background: rgba(255, 255, 255, 0.95);
+  /*+box-shadow:0px 2px 10px #000000;*/
+  -moz-box-shadow: 0px 2px 10px #000000;
+  -webkit-box-shadow: 0px 2px 10px #000000;
+  -o-box-shadow: 0px 2px 10px #000000;
+  box-shadow: 0px 2px 10px #000000;
   width: 300px;
-  height: 70px;
+  height: 75px;
+  /*+border-radius:3px;*/
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -khtml-border-radius: 3px;
+  border-radius: 3px;
   position: absolute;
   text-indent: 10px;
+  padding: 7px 7px 0;
   font-size: 12px;
-  border: 1px solid #8F8A8A;
   /*+opacity:70%;*/
   filter: alpha(opacity=70);
   -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
   -moz-opacity: 0.7;
   opacity: 0.7;
-  overflow: hidden;
   z-index: 100;
-  cursor: pointer;
+  margin: 38px 0 0 -56px;
+}
+
+div.notification.corner-alert .top-arrow {
+  background: url(../images/sprites.png) no-repeat -580px -1353px;
+  width: 36px;
+  height: 15px;
+  position: absolute;
+  top: -15px;
+  left: 50px;
 }
 
 div.notification.corner-alert div.title {
   width: 100%;
   height: 33px;
-  background: url(../images/bg-dialog-header.png);
   color: #FFFFFF;
 }
 
 div.notification.corner-alert div.title span {
-  background: url(../images/icons.png) no-repeat -3px -225px;
   /*+placement:shift 0px 10px;*/
   position: relative;
   left: 0px;
   top: 10px;
-  /*+text-shadow:0px 1px 1px #3A3A3A;*/
+  color: #6D6D6D;
-  -moz-text-shadow: 0px 1px 1px #3A3A3A;
-  -webkit-text-shadow: 0px 1px 1px #3A3A3A;
-  -o-text-shadow: 0px 1px 1px #3A3A3A;
-  text-shadow: 0px 1px 1px #3A3A3A;
   padding: 3px 0 12px 24px;
-  font-weight: bold;
+  font-weight: 100;
+  font-size: 14px;
+  padding-left: 33px;
+  background: url(../images/icons.png) no-repeat 3px -223px;
 }
 
 div.notification.corner-alert.error div.title span {
-  background: url(../images/icons.png) no-repeat -4px -190px;
+  background: url(../images/icons.png) no-repeat -2px -190px;
 }
 
 div.notification.corner-alert div.message span {
   position: relative;
   padding-top: 6px;
+  font-size: 14px;
   display: block;
-}
+  color: #000000;
-
+  /*+placement:shift 17px -2px;*/
-div.notification.corner-alert:hover div.message span {
+  position: relative;
-  text-decoration: underline;
+  left: 17px;
-  color: #5FAAF7;
+  top: -2px;
 }
 
 /*Tooltips*/

ui/scripts/ui/widgets/notifications.js

@@ -23,11 +23,12 @@
         cornerAlert: function(args, options) {
             if (!options) options = {};
 
-            var $container = $('#container'); // Put in main container box
+            var $container = $('#main-area'); // Put in main container box
             var $cornerAlert = $('<div>').addClass('notification corner-alert')
                 .hide()
-                .appendTo($container)
+                .appendTo('html body')
                 .append(
+                    $('<div>').addClass('top-arrow'),
                     $('<div>').addClass('title').append(
                         $('<span>').html(
                             options.error ? options.error : _l('label.task.completed')
@@ -49,19 +50,18 @@
                 .css({
                     opacity: 0,
                     position: 'absolute',
-                    top: $($container).height(),
+                    top: $('#header .notifications').offset().top,
-                    left: $($container).width() - $cornerAlert.width()
+                    left: $('#header .notifications').offset().left
                 })
                 .animate({
-                    opacity: 1,
+                    opacity: 1
-                    top: $container.height() - $cornerAlert.height()
                 }, {
                     complete: function() {
                         setTimeout(function() {
                             $cornerAlert.fadeOut('fast', function() {
                                 $cornerAlert.remove();
                             });
-                        }, 5000);
+                        }, 3000);
                     }
                 })
                 .show();