diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css index 9ccf553f7c2..abd112aa4eb 100644 --- a/ui/css/cloudstack3.css +++ b/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;*/ - -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; + color: #6D6D6D; 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; -} - -div.notification.corner-alert:hover div.message span { - text-decoration: underline; - color: #5FAAF7; + color: #000000; + /*+placement:shift 17px -2px;*/ + position: relative; + left: 17px; + top: -2px; } /*Tooltips*/ diff --git a/ui/images/sprites.png b/ui/images/sprites.png index f3c8226b64a..778eda23fd0 100644 Binary files a/ui/images/sprites.png and b/ui/images/sprites.png differ diff --git a/ui/scripts/ui/widgets/notifications.js b/ui/scripts/ui/widgets/notifications.js index 9b7fc4cce03..68a054cb616 100644 --- a/ui/scripts/ui/widgets/notifications.js +++ b/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 = $('
').addClass('notification corner-alert') .hide() - .appendTo($container) + .appendTo('html body') .append( + $('
').addClass('top-arrow'), $('
').addClass('title').append( $('').html( options.error ? options.error : _l('label.task.completed') @@ -49,19 +50,18 @@ .css({ opacity: 0, position: 'absolute', - top: $($container).height(), - left: $($container).width() - $cornerAlert.width() + top: $('#header .notifications').offset().top, + left: $('#header .notifications').offset().left }) .animate({ - opacity: 1, - top: $container.height() - $cornerAlert.height() + opacity: 1 }, { complete: function() { setTimeout(function() { $cornerAlert.fadeOut('fast', function() { $cornerAlert.remove(); }); - }, 5000); + }, 3000); } }) .show();