From d9c93ebfdb860878609c6a59ef4df99f8f93643f Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Sun, 2 Nov 2014 20:58:46 +0300 Subject: tweak notifications; use css animations for notifications --- css/tt-rss.css | 30 +++++++++++++++++++++--------- 1 file changed, 21 insertions(+), 9 deletions(-) (limited to 'css') diff --git a/css/tt-rss.css b/css/tt-rss.css index d732c13ba..d5737989a 100644 --- a/css/tt-rss.css +++ b/css/tt-rss.css @@ -138,18 +138,30 @@ a:hover { position : absolute; } +#notify.visible { + transform: translate(0, -35px); + -webkit-transform: translate(0, -35px); + -o-transform: translate(0, -35px); + -moz-transform: translate(0, -35px); + + transition: all 0.5s ease-in-out; + -webkit-transition: all 0.5s ease-in-out; + -moz-transition: all 0.5s ease-in-out; + -o-transition: all 0.5s ease-in-out; +} + #notify { - bottom : 10px; - right : 20px; - border-width : 1px; + bottom : -35px; + right : 0px; + height : 20px; + left : 0px; + border-width : 1px 0px 0px 0px; border-style : solid; position : absolute; font-size : 12px; z-index : 99; - max-width : 200px; - min-width : 100px; padding : 5px; - -width : 200px; + box-shadow : 0px -2px 2px rgba(0,0,0,0.1); } #notify img { @@ -176,17 +188,17 @@ a:hover { background-color : #fff7d5; } -.notify.progress { +.notify.notify_progress { border-color : #d7c47a; background-color : #fff7d5; } -.notify.info { +.notify.notify_info { border-color : #88b0f0; background-color : #ecf4ff; } -.notify.error { +.notify.notify_error { background-color : #ffcccc; border-color : #ff0000; } -- cgit v1.2.3