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 = $('