diff --git a/index.html b/index.html index 7e3d8d6..287bca2 100644 --- a/index.html +++ b/index.html @@ -66,6 +66,8 @@ + + @@ -76,13 +78,14 @@

humane.js

A simple, modern, framework-independent, well-tested, unobtrusive, notification system.
Utilizes CSS transitions when available, falls back to JS animation when not. Includes mobile support.

-

Select a theme: +

Select a theme:

Click a code sample below to see it in action:

@@ -184,4 +187,4 @@

Download and Usage

}(pretags[i])) } - + diff --git a/themes/flatty.css b/themes/flatty.css new file mode 100644 index 0000000..74d94f8 --- /dev/null +++ b/themes/flatty.css @@ -0,0 +1,94 @@ +html, +body { + min-height: 100%; +} +.humane, +.humane-flatty { + position: fixed; + -moz-transition: all 0.4s ease-in-out; + -webkit-transition: all 0.4s ease-in-out; + -ms-transition: all 0.4s ease-in-out; + -o-transition: all 0.4s ease-in-out; + transition: all 0.4s ease-in-out; + z-index: 100000; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); +} +.humane, +.humane-flatty { + font-family: Helvetica Neue, Helvetica, san-serif; + font-size: 16px; + top: 0; + left: 30%; + opacity: 0; + width: 40%; + color: #444; + padding: 10px; + text-align: center; + background-color: #fff; + -webkit-border-bottom-right-radius: 3px; + -webkit-border-bottom-left-radius: 3px; + -moz-border-radius-bottomright: 3px; + -moz-border-radius-bottomleft: 3px; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; + -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5); + box-shadow: 0 1px 2px rgba(0,0,0,0.5); + -moz-transform: translateY(-100px); + -webkit-transform: translateY(-100px); + -ms-transform: translateY(-100px); + -o-transform: translateY(-100px); + transform: translateY(-100px); +} +.humane p, +.humane-flatty p, +.humane ul, +.humane-flatty ul { + margin: 0; + padding: 0; +} +.humane ul, +.humane-flatty ul { + list-style: none; +} +.humane.humane-flatty-info, +.humane-flatty.humane-flatty-info { + background-color: #3498db; + color: #FFF; +} +.humane.humane-flatty-success, +.humane-flatty.humane-flatty-success { + background-color: #18bc9c; + color: #FFF; +} +.humane.humane-flatty-error, +.humane-flatty.humane-flatty-error { + background-color: #e74c3c; + color: #FFF; +} +.humane-animate, +.humane-flatty.humane-flatty-animate { + opacity: 1; + -moz-transform: translateY(0); + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + -o-transform: translateY(0); + transform: translateY(0); +} +.humane-animate:hover, +.humane-flatty.humane-flatty-animate:hover { + opacity: 0.7; +} +.humane-js-animate, +.humane-flatty.humane-flatty-js-animate { + opacity: 1; + -moz-transform: translateY(0); + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + -o-transform: translateY(0); + transform: translateY(0); +} +.humane-js-animate:hover, +.humane-flatty.humane-flatty-js-animate:hover { + opacity: 0.7; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); +}