diff --git a/public/javascripts/view.js b/public/javascripts/view.js index 119b86d3d..fce769331 100644 --- a/public/javascripts/view.js +++ b/public/javascripts/view.js @@ -12,7 +12,9 @@ $(document).ready(function(){ $("label").inFieldLabels(); - $('#flash_notice, #flash_error, #flash_alert').delay(2500).slideUp(130); + $('#flash_notice, #flash_error, #flash_alert').delay(4000).animate({ + top: -100 + }, $(this).remove()); $("div.image_cycle").cycle({ fx: 'fade', diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index 7bcb6a258..0a5f022b4 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -32,24 +32,27 @@ h3 { #flash_error, #flash_alert { z-index: 100; - top: 32px; - position: absolute; - color: black; - width: 400px; - margin: 0 0 0 -200px; - left: 50%; - text-align: center; - font-size: 14px; - padding: 3px 0; } + position: fixed; + color: white; + top: 0; + left: 0; + width: 100%; + padding: 1em; + box-shadow: 0 1px 2px #333333; + -moz-box-shadow: 0 1px 2px #333333; + -webkit-box-shadow: 0 1px 2px #333333; + font-weight: bold; } #flash_notice { - background-color: #ccffcc; - border: solid 1px #66cc66; } + background-color: rgba(127, 255, 36, 0.85); + border-bottom: solid 1px #66cc66; + text-shadow: 0 1px #66cc66; } #flash_error, #flash_alert { - background-color: #ffcccc; - border: solid 1px #cc6666; } + background-color: rgba(208, 49, 43, 0.85); + border-bottom: solid 1px #cc6666; + text-shadow: 0 1px #cc6666; } .fieldWithErrors { display: inline; } diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index a19c24a09..389adacf4 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -39,26 +39,39 @@ h3 #flash_error, #flash_alert :z-index 100 - :top 32px - :position absolute - :color #000 - :width 400px - :margin 0 0 0 -200px - :left 50% - :text - :align center - :font - :size 14px - :padding 3px 0 + :position fixed + :color #fff + :top 0 + :left 0 + + :width 100% + + :padding 1em + + :box-shadow 0 1px 2px #333 + :-moz-box-shadow 0 1px 2px #333 + :-webkit-box-shadow 0 1px 2px #333 + + :font + :weight bold + #flash_notice - :background-color #CFC - :border solid 1px #6C6 + :background + :color rgba(127,255,36,0.85) + :border + :bottom solid 1px #6C6 + :text + :shadow 0 1px #6C6 #flash_error, #flash_alert - :background-color #FCC - :border solid 1px #C66 + :background + :color rgba(208,49,43,0.85) + :border + :bottom solid 1px #C66 + :text + :shadow 0 1px #C66 .fieldWithErrors :display inline