humane-rails 5.0.1 → 5.0.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +8 -8
- data/humane-rails.gemspec +1 -1
- data/lib/humane-rails/version.rb +1 -1
- data/vendor/assets/components/humane-js/Makefile +7 -0
- data/vendor/assets/components/humane-js/changelog.md +145 -0
- data/vendor/assets/components/humane-js/component.json +7 -0
- data/vendor/assets/components/humane-js/humane.js +229 -0
- data/vendor/assets/components/humane-js/humane.min.js +1 -0
- data/vendor/assets/components/humane-js/index.html +187 -0
- data/vendor/assets/components/humane-js/package.json +20 -0
- data/vendor/assets/components/humane-js/readme.md +85 -0
- data/vendor/assets/components/humane-js/test/issue23.html +11 -0
- data/vendor/assets/components/humane-js/test/issue36.html +9 -0
- data/vendor/assets/components/humane-js/test/issue38.html +15 -0
- data/vendor/assets/components/humane-js/theme-src/bigbox.styl +65 -0
- data/vendor/assets/components/humane-js/theme-src/boldlight.styl +64 -0
- data/vendor/assets/components/humane-js/theme-src/jackedup.styl +69 -0
- data/vendor/assets/components/humane-js/theme-src/libnotify.styl +61 -0
- data/vendor/assets/components/humane-js/theme-src/original.styl +51 -0
- data/vendor/assets/components/humane-js/themes/bigbox.css +123 -0
- data/vendor/assets/components/humane-js/themes/boldlight.css +122 -0
- data/vendor/assets/components/humane-js/themes/jackedup.css +123 -0
- data/vendor/assets/components/humane-js/themes/libnotify.css +115 -0
- data/vendor/assets/components/humane-js/themes/original.css +72 -0
- metadata +24 -3
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
# humane.js
|
|
2
|
+
This project was heavily inspired by [humanmsg](http://code.google.com/p/humanmsg/) project for jQuery. I really
|
|
3
|
+
liked the project but I wanted to remove the jQuery dependency, add support for CSS transitions, and have more
|
|
4
|
+
control over the timing.
|
|
5
|
+
|
|
6
|
+
## About
|
|
7
|
+
humane.js tries to be as unobtrusive as possible to the user experience while providing helpful information that is
|
|
8
|
+
clear and grabs the users attention. It is framework independent. Customizable.
|
|
9
|
+
|
|
10
|
+
## Setup
|
|
11
|
+
Setup is simple:
|
|
12
|
+
|
|
13
|
+
- Download tar/zip
|
|
14
|
+
- Select a [theme](humane-js/wiki/Themes) from `themes` dir.
|
|
15
|
+
- Include the theme CSS in your page
|
|
16
|
+
- Include `humane.min.js` in your page
|
|
17
|
+
|
|
18
|
+
## Demo/Usage
|
|
19
|
+
|
|
20
|
+
You can see a [demo and usage here](http://wavded.github.com/humane-js/)
|
|
21
|
+
|
|
22
|
+
## Custom Themes
|
|
23
|
+
|
|
24
|
+
Got a neat theme/animation, love to see it. View `theme-src/bigbox.styl` for an template to get started (uses [Stylus](http://learnboost.github.com/stylus/) w/ Nib and Canvas).
|
|
25
|
+
|
|
26
|
+
To get setup with Stylus use [npm](http://npmjs.org):
|
|
27
|
+
|
|
28
|
+
```sh
|
|
29
|
+
(sudo) npm install -g stylus nib canvas
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
With Stylus installed you can watch for changes and compile into CSS by running:
|
|
33
|
+
|
|
34
|
+
```sh
|
|
35
|
+
make watch
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Desktop and Mobile Browser Support
|
|
39
|
+
|
|
40
|
+
humane.js has been tested for the following browsers.
|
|
41
|
+
|
|
42
|
+
- Internet Explorer 7+
|
|
43
|
+
- Firefox 3+
|
|
44
|
+
- Chrome 9+
|
|
45
|
+
- Safari 3+
|
|
46
|
+
- Opera 10+
|
|
47
|
+
- iOS 4+
|
|
48
|
+
- Android 2+
|
|
49
|
+
|
|
50
|
+
## AMD and Node.js Support
|
|
51
|
+
|
|
52
|
+
humane.js works for AMD systems like [require.js](http://requirejs.org/) and within Node.js CommonJS module system like [browserify](https://github.com/substack/node-browserify).
|
|
53
|
+
|
|
54
|
+
## Contributers
|
|
55
|
+
|
|
56
|
+
Many thanks to the JS/Browser wizards that helped make this better, community rocks!
|
|
57
|
+
|
|
58
|
+
- @bga_ (Alexander)
|
|
59
|
+
- @joseanpg (Jose)
|
|
60
|
+
- @OiNutter (Will McKenzie)
|
|
61
|
+
- @ianmassey (Ian Massey)
|
|
62
|
+
|
|
63
|
+
## License
|
|
64
|
+
|
|
65
|
+
(The MIT License)
|
|
66
|
+
|
|
67
|
+
Copyright (c) 2011 Marc Harter <wavded@gmail.com>
|
|
68
|
+
|
|
69
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
|
70
|
+
a copy of this software and associated documentation files (the
|
|
71
|
+
'Software'), to deal in the Software without restriction, including
|
|
72
|
+
without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
|
|
73
|
+
permit persons to whom the Software is furnished to do so, subject to
|
|
74
|
+
the following conditions:
|
|
75
|
+
|
|
76
|
+
The above copyright notice and this permission notice shall be
|
|
77
|
+
included in all copies or substantial portions of the Software.
|
|
78
|
+
|
|
79
|
+
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
|
|
80
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
|
81
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
|
82
|
+
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
|
|
83
|
+
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
|
84
|
+
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
|
85
|
+
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<link href='../themes/bigbox.css' rel='stylesheet'>
|
|
4
|
+
<script src='../humane.js'></script>
|
|
5
|
+
</head>
|
|
6
|
+
<div id='notify'></div>
|
|
7
|
+
<script>
|
|
8
|
+
var notify = humane.create({container: document.getElementById('notify')});
|
|
9
|
+
notify.log("<h2>Order successfully submitted for 435645 of the Test Brochure</h2><p>You will be contacted shortly with confirmation of your order</p>", {
|
|
10
|
+
timeout: 5000,
|
|
11
|
+
clickToClose: false,
|
|
12
|
+
addnCls: "humane-bigbox-success"
|
|
13
|
+
})
|
|
14
|
+
</script>
|
|
15
|
+
</html>
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
@import 'nib'
|
|
2
|
+
vendor-prefixes = moz webkit ms o official
|
|
3
|
+
support-for-ie = false
|
|
4
|
+
|
|
5
|
+
html, body { min-height: 100% }
|
|
6
|
+
.humane
|
|
7
|
+
.humane-bigbox
|
|
8
|
+
position : fixed
|
|
9
|
+
transition : all .3s ease-out
|
|
10
|
+
z-index : 100000
|
|
11
|
+
filter : unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=100)")
|
|
12
|
+
|
|
13
|
+
.humane
|
|
14
|
+
.humane-bigbox
|
|
15
|
+
font-family : Ubuntu, Verdana, sans-serif
|
|
16
|
+
line-height : 40px
|
|
17
|
+
font-size : 35px
|
|
18
|
+
top : 25%
|
|
19
|
+
left : 25%
|
|
20
|
+
opacity : 0
|
|
21
|
+
width : 50%
|
|
22
|
+
min-height : 40px
|
|
23
|
+
padding : 30px
|
|
24
|
+
text-align : center
|
|
25
|
+
background-image : linear-gradient-image(200px, rgba(0,0,0,1), rgba(100,100,100,0.8))
|
|
26
|
+
background : linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0.9)) no-repeat
|
|
27
|
+
*background-color : #000
|
|
28
|
+
color : #fff
|
|
29
|
+
border-radius : 15px
|
|
30
|
+
text-shadow : 0 -1px 1px #ddd
|
|
31
|
+
box-shadow : 0 15px 15px -15px #000
|
|
32
|
+
transform : scale(0.1)
|
|
33
|
+
p, ul
|
|
34
|
+
margin: 0
|
|
35
|
+
padding: 0
|
|
36
|
+
ul
|
|
37
|
+
list-style: none
|
|
38
|
+
&.humane-bigbox-info
|
|
39
|
+
background-image : linear-gradient-image(200px, rgba(0,0,100,1), rgba(0,0,100,0.8))
|
|
40
|
+
background : linear-gradient(top, rgba(0,0,100,1), rgba(0,0,100,0.9)) no-repeat
|
|
41
|
+
*background-color : #030
|
|
42
|
+
&.humane-bigbox-success
|
|
43
|
+
background-image : linear-gradient-image(200px, rgba(0,100,0,1), rgba(0,100,0,0.8))
|
|
44
|
+
background : linear-gradient(top, rgba(0,100,0,1), rgba(0,100,0,0.9)) no-repeat
|
|
45
|
+
*background-color : #030
|
|
46
|
+
&.humane-bigbox-error
|
|
47
|
+
background-image : linear-gradient-image(200px, rgba(100,0,0,1), rgba(100,0,0,0.8))
|
|
48
|
+
background : linear-gradient(top, rgba(100,0,0,1), rgba(100,0,0,0.9)) no-repeat
|
|
49
|
+
*background-color : #300
|
|
50
|
+
|
|
51
|
+
.humane.humane-animate
|
|
52
|
+
.humane-bigbox.humane-bigbox-animate
|
|
53
|
+
opacity: 1
|
|
54
|
+
transform: scale(1)
|
|
55
|
+
&:hover
|
|
56
|
+
opacity: 0.6
|
|
57
|
+
transform: scale(0.8)
|
|
58
|
+
|
|
59
|
+
.humane.humane-js-animate
|
|
60
|
+
.humane-bigbox.humane-bigbox-js-animate
|
|
61
|
+
opacity: 1
|
|
62
|
+
transform: scale(1)
|
|
63
|
+
&:hover
|
|
64
|
+
opacity: 0.6
|
|
65
|
+
filter : unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=60)")
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
@import 'nib'
|
|
2
|
+
vendor-prefixes = moz webkit ms o official
|
|
3
|
+
support-for-ie = false
|
|
4
|
+
|
|
5
|
+
html, body { min-height: 100% }
|
|
6
|
+
.humane
|
|
7
|
+
.humane-boldlight
|
|
8
|
+
position : fixed
|
|
9
|
+
transition : all .3s ease-out
|
|
10
|
+
z-index : 100000
|
|
11
|
+
filter : unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=100)")
|
|
12
|
+
|
|
13
|
+
.humane
|
|
14
|
+
.humane-boldlight
|
|
15
|
+
font-family : Ubuntu, Verdana, sans-serif
|
|
16
|
+
font-size : 25px
|
|
17
|
+
letter-spacing : -1px
|
|
18
|
+
top : 25%
|
|
19
|
+
left : 25%
|
|
20
|
+
opacity : 0
|
|
21
|
+
width : 50%
|
|
22
|
+
color : #000
|
|
23
|
+
padding : 10px
|
|
24
|
+
text-align : center
|
|
25
|
+
background-image : linear-gradient-image(150px, rgba(255,255,255,0.8), rgba(150,150,150,0.8))
|
|
26
|
+
background : linear-gradient(top, rgba(255,255,255,0.8), rgba(150,150,150,0.8)) no-repeat
|
|
27
|
+
*background-color: #fff
|
|
28
|
+
border-radius : 15px
|
|
29
|
+
text-shadow : 0 -1px 1px rgba(#ddd,0.4)
|
|
30
|
+
box-shadow : 0 4px 4px -4px #eee
|
|
31
|
+
transform : scale(1.1)
|
|
32
|
+
p, ul
|
|
33
|
+
margin: 0
|
|
34
|
+
padding: 0
|
|
35
|
+
ul
|
|
36
|
+
list-style: none
|
|
37
|
+
&.humane-boldlight-info
|
|
38
|
+
background-image : linear-gradient-image(200px, rgba(100,100,255,1), rgba(100,100,255,0.8))
|
|
39
|
+
background : linear-gradient(top, rgba(100,100,255,1), rgba(100,100,255,0.8)) no-repeat
|
|
40
|
+
*background-color : rgb(100,100,255)
|
|
41
|
+
&.humane-boldlight-success
|
|
42
|
+
background-image : linear-gradient-image(200px, rgba(100,255,100,0.8), rgba(100,255,100,0.8))
|
|
43
|
+
background : linear-gradient(top, rgba(100,255,100,1), rgba(100,255,100,0.8)) no-repeat
|
|
44
|
+
*background-color : rgb(100,255,100)
|
|
45
|
+
&.humane-boldlight-error
|
|
46
|
+
background-image : linear-gradient-image(200px, rgba(255,100,100,0.8), rgba(255,100,100,0.8))
|
|
47
|
+
background : linear-gradient(top, rgba(255,100,100,1), rgba(255,100,100,0.8)) no-repeat
|
|
48
|
+
*background-color : rgb(255,100,100)
|
|
49
|
+
|
|
50
|
+
.humane.humane-animate
|
|
51
|
+
.humane-boldlight.humane-boldlight-animate
|
|
52
|
+
opacity : 1
|
|
53
|
+
transform : scale(1)
|
|
54
|
+
&:hover
|
|
55
|
+
opacity : 0.4
|
|
56
|
+
transform : scale(1.8)
|
|
57
|
+
|
|
58
|
+
.humane.humane-animate
|
|
59
|
+
.humane-boldlight.humane-boldlight-js-animate
|
|
60
|
+
opacity : 1
|
|
61
|
+
transform : scale(1)
|
|
62
|
+
&:hover
|
|
63
|
+
opacity : 0.4
|
|
64
|
+
filter : unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=40)")
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
@import 'nib'
|
|
2
|
+
vendor-prefixes = moz webkit ms o official
|
|
3
|
+
support-for-ie = false
|
|
4
|
+
|
|
5
|
+
html, body { min-height: 100% }
|
|
6
|
+
.humane
|
|
7
|
+
.humane-jackedup
|
|
8
|
+
position : fixed
|
|
9
|
+
transition : all .6s ease-in-out
|
|
10
|
+
z-index : 100000
|
|
11
|
+
filter : unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=100)")
|
|
12
|
+
|
|
13
|
+
.humane
|
|
14
|
+
.humane-jackedup
|
|
15
|
+
font-family : Helvetica Neue, Helvetica, san-serif
|
|
16
|
+
font-size : 18px
|
|
17
|
+
letter-spacing : -1px
|
|
18
|
+
top : 20px
|
|
19
|
+
left : 30%
|
|
20
|
+
opacity : 0
|
|
21
|
+
width : 40%
|
|
22
|
+
color : #333
|
|
23
|
+
padding : 10px
|
|
24
|
+
text-align : center
|
|
25
|
+
background-image : linear-gradient-image(150px, rgba(0,0,0,.1), rgba(0,0,0,.2))
|
|
26
|
+
background : linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,.2)) no-repeat
|
|
27
|
+
background-color : #fff
|
|
28
|
+
border-radius : 3px
|
|
29
|
+
text-shadow : 0 1px 1px rgba(rgba(255,255,255,.8))
|
|
30
|
+
box-shadow : 0 1px 2px rgba(0,0,0,.5)
|
|
31
|
+
transform : translateY(-100px)
|
|
32
|
+
p, ul
|
|
33
|
+
margin: 0
|
|
34
|
+
padding: 0
|
|
35
|
+
ul
|
|
36
|
+
list-style: none
|
|
37
|
+
&.humane-jackedup-info
|
|
38
|
+
background-image : linear-gradient-image(200px, rgba(100,100,255,1), rgba(100,100,255,0.8))
|
|
39
|
+
background : linear-gradient(top, rgba(0,0,0,.7), rgba(0,0,0,.85)) no-repeat
|
|
40
|
+
background-color : #fff
|
|
41
|
+
color : #fff
|
|
42
|
+
text-shadow : 0 -1px 1px rgba(0,0,0,.35)
|
|
43
|
+
&.humane-jackedup-success
|
|
44
|
+
background-image : linear-gradient-image(200px, rgba(100,255,100,1), rgba(100,255,100,0.8))
|
|
45
|
+
background : linear-gradient(top, rgba(98,196,98,1), rgba(87,169,87,1)) no-repeat
|
|
46
|
+
background-color : rgb(100,255,100)
|
|
47
|
+
color : #fff
|
|
48
|
+
text-shadow : 0 -1px 1px rgba(0,0,0,.35)
|
|
49
|
+
&.humane-jackedup-error
|
|
50
|
+
background-image : linear-gradient-image(200px, rgba(238,95,91,1), rgba(196,60,53,1))
|
|
51
|
+
background : linear-gradient(top, rgba(238,95,91,1), rgba(196,60,53,1)) no-repeat
|
|
52
|
+
background-color : rgb(238,95,91)
|
|
53
|
+
color : #fff
|
|
54
|
+
text-shadow : 0 -1px 1px rgba(rgba(0,0,0,.35))
|
|
55
|
+
|
|
56
|
+
.humane-animate
|
|
57
|
+
.humane-jackedup.humane-jackedup-animate
|
|
58
|
+
opacity : 1
|
|
59
|
+
transform : translateY(0)
|
|
60
|
+
&:hover
|
|
61
|
+
opacity : .7
|
|
62
|
+
|
|
63
|
+
.humane-js-animate
|
|
64
|
+
.humane-jackedup.humane-jackedup-js-animate
|
|
65
|
+
opacity : 1
|
|
66
|
+
transform : translateY(0)
|
|
67
|
+
&:hover
|
|
68
|
+
opacity : 0.7
|
|
69
|
+
filter : unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=70)")
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
@import 'nib'
|
|
2
|
+
vendor-prefixes = moz webkit ms o official
|
|
3
|
+
support-for-ie = false
|
|
4
|
+
|
|
5
|
+
html, body { min-height: 100% }
|
|
6
|
+
.humane
|
|
7
|
+
.humane-libnotify
|
|
8
|
+
position : fixed
|
|
9
|
+
transition : all .3s ease-out
|
|
10
|
+
z-index : 100000
|
|
11
|
+
filter : unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=100)")
|
|
12
|
+
|
|
13
|
+
.humane
|
|
14
|
+
.humane-libnotify
|
|
15
|
+
font-family : Ubuntu, Arial, sans-serif
|
|
16
|
+
text-align : center
|
|
17
|
+
font-size : 15px
|
|
18
|
+
top : 10px
|
|
19
|
+
right : 10px
|
|
20
|
+
opacity : 0
|
|
21
|
+
width : 150px
|
|
22
|
+
color : #fff
|
|
23
|
+
padding : 10px
|
|
24
|
+
background-image : linear-gradient-image(80px, rgba(0,0,0,0.9), rgba(50,50,50,0.9))
|
|
25
|
+
background : linear-gradient(top, rgba(0,0,0,0.9), rgba(50,50,50,0.9)) no-repeat
|
|
26
|
+
*background-color : #000
|
|
27
|
+
border-radius : 5px
|
|
28
|
+
box-shadow : 0 4px 4px -4px #000
|
|
29
|
+
transform : translateY(-40px)
|
|
30
|
+
p, ul
|
|
31
|
+
margin: 0
|
|
32
|
+
padding: 0
|
|
33
|
+
ul
|
|
34
|
+
list-style: none
|
|
35
|
+
&.humane-libnotify-info
|
|
36
|
+
background-image : linear-gradient-image(80px, rgba(0,0,50,0.9), rgba(0,0,100,0.9))
|
|
37
|
+
background : linear-gradient(top, rgba(0,0,50,0.9), rgba(0,0,100,0.9)) no-repeat
|
|
38
|
+
*background-color : #030
|
|
39
|
+
&.humane-libnotify-success
|
|
40
|
+
background-image : linear-gradient-image(80px, rgba(0,50,0,0.9), rgba(0,100,0,0.9))
|
|
41
|
+
background : linear-gradient(top, rgba(0,50,0,0.9), rgba(0,100,0,0.9)) no-repeat
|
|
42
|
+
*background-color : #030
|
|
43
|
+
&.humane-libnotify-error
|
|
44
|
+
background-image : linear-gradient-image(200px, rgba(50,0,0,0.9), rgba(100,0,0,0.9))
|
|
45
|
+
background : linear-gradient(top, rgba(50,0,0,0.9), rgba(100,0,0,0.9)) no-repeat
|
|
46
|
+
*background-color : #300
|
|
47
|
+
|
|
48
|
+
.humane.humane-animate
|
|
49
|
+
.humane-libnotify.humane-libnotify-animate
|
|
50
|
+
opacity : 1
|
|
51
|
+
transform : translateY(0)
|
|
52
|
+
&:hover
|
|
53
|
+
opacity : 0.2
|
|
54
|
+
|
|
55
|
+
.humane.humane-animate
|
|
56
|
+
.humane-libnotify.humane-libnotify-js-animate
|
|
57
|
+
opacity : 1
|
|
58
|
+
transform : translateY(0)
|
|
59
|
+
&:hover
|
|
60
|
+
opacity : 0.2
|
|
61
|
+
filter : unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=20)")
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
@import 'nib'
|
|
2
|
+
vendor-prefixes = moz webkit ms o official
|
|
3
|
+
support-for-ie = false
|
|
4
|
+
|
|
5
|
+
html, body { min-height: 100% }
|
|
6
|
+
.humane
|
|
7
|
+
.humane-original
|
|
8
|
+
position : fixed
|
|
9
|
+
transition : all .2s ease-out
|
|
10
|
+
z-index : 100000
|
|
11
|
+
filter : unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=100)")
|
|
12
|
+
|
|
13
|
+
.humane
|
|
14
|
+
.humane-original
|
|
15
|
+
font-family : Ubuntu, Verdana, sans-serif
|
|
16
|
+
line-height : 40px
|
|
17
|
+
font-size : 25px
|
|
18
|
+
top : 25%
|
|
19
|
+
left : 25%
|
|
20
|
+
opacity : 0
|
|
21
|
+
width : 50%
|
|
22
|
+
min-height : 40px
|
|
23
|
+
padding : 10px
|
|
24
|
+
text-align : center
|
|
25
|
+
background-color : #000
|
|
26
|
+
color : #fff
|
|
27
|
+
border-radius : 15px
|
|
28
|
+
p, ul
|
|
29
|
+
margin: 0
|
|
30
|
+
padding: 0
|
|
31
|
+
ul
|
|
32
|
+
list-style: none
|
|
33
|
+
&.humane-original-info
|
|
34
|
+
background-color : #030
|
|
35
|
+
&.humane-original-success
|
|
36
|
+
background-color : #030
|
|
37
|
+
&.humane-original-error
|
|
38
|
+
background-color : #300
|
|
39
|
+
|
|
40
|
+
.humane.humane-animate
|
|
41
|
+
.humane-original.humane-original-animate
|
|
42
|
+
opacity : 0.8
|
|
43
|
+
&:hover
|
|
44
|
+
opacity : 0.6
|
|
45
|
+
|
|
46
|
+
.humane.humane-js-animate
|
|
47
|
+
.humane-original.humane-original-js-animate
|
|
48
|
+
opacity : 0.8
|
|
49
|
+
&:hover
|
|
50
|
+
opacity : 0.6
|
|
51
|
+
filter : unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=60)")
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
html,
|
|
2
|
+
body {
|
|
3
|
+
min-height: 100%;
|
|
4
|
+
}
|
|
5
|
+
.humane,
|
|
6
|
+
.humane-bigbox {
|
|
7
|
+
position: fixed;
|
|
8
|
+
-moz-transition: all 0.3s ease-out;
|
|
9
|
+
-webkit-transition: all 0.3s ease-out;
|
|
10
|
+
-ms-transition: all 0.3s ease-out;
|
|
11
|
+
-o-transition: all 0.3s ease-out;
|
|
12
|
+
transition: all 0.3s ease-out;
|
|
13
|
+
z-index: 100000;
|
|
14
|
+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
|
15
|
+
}
|
|
16
|
+
.humane,
|
|
17
|
+
.humane-bigbox {
|
|
18
|
+
font-family: Ubuntu, Verdana, sans-serif;
|
|
19
|
+
line-height: 40px;
|
|
20
|
+
font-size: 35px;
|
|
21
|
+
top: 25%;
|
|
22
|
+
left: 25%;
|
|
23
|
+
opacity: 0;
|
|
24
|
+
width: 50%;
|
|
25
|
+
min-height: 40px;
|
|
26
|
+
padding: 30px;
|
|
27
|
+
text-align: center;
|
|
28
|
+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAc0lEQVQokb2RQQ6EMAwDx/7/n80BtIEC3RYhLlXrVLGTAYiBWBIGtkPSP01SfreTVoV5re9Rcee1scwDk9NurbR62sZJcpzy9O+2X5KsXabyPaQFYNuvkqkRviDTp9Vs8opC0TpkHvJtVjeReW/5kEyX1gKeLEKE9peeWAAAAABJRU5ErkJggg==');
|
|
29
|
+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000), color-stop(1, rgba(0,0,0,0.9))) no-repeat;
|
|
30
|
+
background: -moz-linear-gradient(top, #000 0%, rgba(0,0,0,0.9) 100%) no-repeat;
|
|
31
|
+
background: -webkit-linear-gradient(top, #000 0%, rgba(0,0,0,0.9) 100%) no-repeat;
|
|
32
|
+
background: -ms-linear-gradient(top, #000 0%, rgba(0,0,0,0.9) 100%) no-repeat;
|
|
33
|
+
background: -o-linear-gradient(top, #000 0%, rgba(0,0,0,0.9) 100%) no-repeat;
|
|
34
|
+
background: linear-gradient(top, #000 0%, rgba(0,0,0,0.9) 100%) no-repeat;
|
|
35
|
+
*background-color: #000;
|
|
36
|
+
color: #fff;
|
|
37
|
+
-webkit-border-radius: 15px;
|
|
38
|
+
border-radius: 15px;
|
|
39
|
+
text-shadow: 0 -1px 1px #ddd;
|
|
40
|
+
-webkit-box-shadow: 0 15px 15px -15px #000;
|
|
41
|
+
box-shadow: 0 15px 15px -15px #000;
|
|
42
|
+
-moz-transform: scale(0.1);
|
|
43
|
+
-webkit-transform: scale(0.1);
|
|
44
|
+
-ms-transform: scale(0.1);
|
|
45
|
+
-o-transform: scale(0.1);
|
|
46
|
+
transform: scale(0.1);
|
|
47
|
+
}
|
|
48
|
+
.humane p,
|
|
49
|
+
.humane-bigbox p,
|
|
50
|
+
.humane ul,
|
|
51
|
+
.humane-bigbox ul {
|
|
52
|
+
margin: 0;
|
|
53
|
+
padding: 0;
|
|
54
|
+
}
|
|
55
|
+
.humane ul,
|
|
56
|
+
.humane-bigbox ul {
|
|
57
|
+
list-style: none;
|
|
58
|
+
}
|
|
59
|
+
.humane.humane-bigbox-info,
|
|
60
|
+
.humane-bigbox.humane-bigbox-info {
|
|
61
|
+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAQElEQVQokWNgYEj5z8TAwPCfiYGBgQGVIEKMTG2DTYwRVez/IHIaNcUGyBnYgpORel6gpvFEJhBqpxIaG8/AAADsKDq/HhYQ2AAAAABJRU5ErkJggg==');
|
|
62
|
+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000064), color-stop(1, rgba(0,0,100,0.9))) no-repeat;
|
|
63
|
+
background: -moz-linear-gradient(top, #000064 0%, rgba(0,0,100,0.9) 100%) no-repeat;
|
|
64
|
+
background: -webkit-linear-gradient(top, #000064 0%, rgba(0,0,100,0.9) 100%) no-repeat;
|
|
65
|
+
background: -ms-linear-gradient(top, #000064 0%, rgba(0,0,100,0.9) 100%) no-repeat;
|
|
66
|
+
background: -o-linear-gradient(top, #000064 0%, rgba(0,0,100,0.9) 100%) no-repeat;
|
|
67
|
+
background: linear-gradient(top, #000064 0%, rgba(0,0,100,0.9) 100%) no-repeat;
|
|
68
|
+
*background-color: #030;
|
|
69
|
+
}
|
|
70
|
+
.humane.humane-bigbox-success,
|
|
71
|
+
.humane-bigbox.humane-bigbox-success {
|
|
72
|
+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAPklEQVQokWNgSGH4z8TAACEYUAkixMjUNsjEGFHF/g8ip1FVbGCcgS04GannBaoaT1wCwWkvmXbQ2HgGBgYA8Yw6v+m4Kh8AAAAASUVORK5CYII=');
|
|
73
|
+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #006400), color-stop(1, rgba(0,100,0,0.9))) no-repeat;
|
|
74
|
+
background: -moz-linear-gradient(top, #006400 0%, rgba(0,100,0,0.9) 100%) no-repeat;
|
|
75
|
+
background: -webkit-linear-gradient(top, #006400 0%, rgba(0,100,0,0.9) 100%) no-repeat;
|
|
76
|
+
background: -ms-linear-gradient(top, #006400 0%, rgba(0,100,0,0.9) 100%) no-repeat;
|
|
77
|
+
background: -o-linear-gradient(top, #006400 0%, rgba(0,100,0,0.9) 100%) no-repeat;
|
|
78
|
+
background: linear-gradient(top, #006400 0%, rgba(0,100,0,0.9) 100%) no-repeat;
|
|
79
|
+
*background-color: #030;
|
|
80
|
+
}
|
|
81
|
+
.humane.humane-bigbox-error,
|
|
82
|
+
.humane-bigbox.humane-bigbox-error {
|
|
83
|
+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAPklEQVQokWNIYWD4z8QAJRhQCSLEyNQ2uMQYUcX+DyKnUVdsQJyBLTgZqecF6hpPVALBaS+ZdtDYeAYGBgYA9vA6v4OR3MkAAAAASUVORK5CYII=');
|
|
84
|
+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #640000), color-stop(1, rgba(100,0,0,0.9))) no-repeat;
|
|
85
|
+
background: -moz-linear-gradient(top, #640000 0%, rgba(100,0,0,0.9) 100%) no-repeat;
|
|
86
|
+
background: -webkit-linear-gradient(top, #640000 0%, rgba(100,0,0,0.9) 100%) no-repeat;
|
|
87
|
+
background: -ms-linear-gradient(top, #640000 0%, rgba(100,0,0,0.9) 100%) no-repeat;
|
|
88
|
+
background: -o-linear-gradient(top, #640000 0%, rgba(100,0,0,0.9) 100%) no-repeat;
|
|
89
|
+
background: linear-gradient(top, #640000 0%, rgba(100,0,0,0.9) 100%) no-repeat;
|
|
90
|
+
*background-color: #300;
|
|
91
|
+
}
|
|
92
|
+
.humane.humane-animate,
|
|
93
|
+
.humane-bigbox.humane-bigbox-animate {
|
|
94
|
+
opacity: 1;
|
|
95
|
+
-moz-transform: scale(1);
|
|
96
|
+
-webkit-transform: scale(1);
|
|
97
|
+
-ms-transform: scale(1);
|
|
98
|
+
-o-transform: scale(1);
|
|
99
|
+
transform: scale(1);
|
|
100
|
+
}
|
|
101
|
+
.humane.humane-animate:hover,
|
|
102
|
+
.humane-bigbox.humane-bigbox-animate:hover {
|
|
103
|
+
opacity: 0.6;
|
|
104
|
+
-moz-transform: scale(0.8);
|
|
105
|
+
-webkit-transform: scale(0.8);
|
|
106
|
+
-ms-transform: scale(0.8);
|
|
107
|
+
-o-transform: scale(0.8);
|
|
108
|
+
transform: scale(0.8);
|
|
109
|
+
}
|
|
110
|
+
.humane.humane-js-animate,
|
|
111
|
+
.humane-bigbox.humane-bigbox-js-animate {
|
|
112
|
+
opacity: 1;
|
|
113
|
+
-moz-transform: scale(1);
|
|
114
|
+
-webkit-transform: scale(1);
|
|
115
|
+
-ms-transform: scale(1);
|
|
116
|
+
-o-transform: scale(1);
|
|
117
|
+
transform: scale(1);
|
|
118
|
+
}
|
|
119
|
+
.humane.humane-js-animate:hover,
|
|
120
|
+
.humane-bigbox.humane-bigbox-js-animate:hover {
|
|
121
|
+
opacity: 0.6;
|
|
122
|
+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
|
|
123
|
+
}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
html,
|
|
2
|
+
body {
|
|
3
|
+
min-height: 100%;
|
|
4
|
+
}
|
|
5
|
+
.humane,
|
|
6
|
+
.humane-boldlight {
|
|
7
|
+
position: fixed;
|
|
8
|
+
-moz-transition: all 0.3s ease-out;
|
|
9
|
+
-webkit-transition: all 0.3s ease-out;
|
|
10
|
+
-ms-transition: all 0.3s ease-out;
|
|
11
|
+
-o-transition: all 0.3s ease-out;
|
|
12
|
+
transition: all 0.3s ease-out;
|
|
13
|
+
z-index: 100000;
|
|
14
|
+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
|
15
|
+
}
|
|
16
|
+
.humane,
|
|
17
|
+
.humane-boldlight {
|
|
18
|
+
font-family: Ubuntu, Verdana, sans-serif;
|
|
19
|
+
font-size: 25px;
|
|
20
|
+
letter-spacing: -1px;
|
|
21
|
+
top: 25%;
|
|
22
|
+
left: 25%;
|
|
23
|
+
opacity: 0;
|
|
24
|
+
width: 50%;
|
|
25
|
+
color: #000;
|
|
26
|
+
padding: 10px;
|
|
27
|
+
text-align: center;
|
|
28
|
+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACWCAYAAAAfduJyAAAABmJLR0QA/wD/AP+gvaeTAAAAPElEQVQokWP4////Gab///8zQAgGBgYo8e/fP2QxSpSgydJNCYJLRSVoPqeOkgEIYop9TrGbSfcWpW4GAFeF/7lb/oWBAAAAAElFTkSuQmCC');
|
|
29
|
+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255,255,255,0.8)), color-stop(1, rgba(150,150,150,0.8))) no-repeat;
|
|
30
|
+
background: -moz-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(150,150,150,0.8) 100%) no-repeat;
|
|
31
|
+
background: -webkit-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(150,150,150,0.8) 100%) no-repeat;
|
|
32
|
+
background: -ms-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(150,150,150,0.8) 100%) no-repeat;
|
|
33
|
+
background: -o-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(150,150,150,0.8) 100%) no-repeat;
|
|
34
|
+
background: linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(150,150,150,0.8) 100%) no-repeat;
|
|
35
|
+
*background-color: #fff;
|
|
36
|
+
-webkit-border-radius: 15px;
|
|
37
|
+
border-radius: 15px;
|
|
38
|
+
text-shadow: 0 -1px 1px rgba(221,221,221,0.4);
|
|
39
|
+
-webkit-box-shadow: 0 4px 4px -4px #eee;
|
|
40
|
+
box-shadow: 0 4px 4px -4px #eee;
|
|
41
|
+
-moz-transform: scale(1.1);
|
|
42
|
+
-webkit-transform: scale(1.1);
|
|
43
|
+
-ms-transform: scale(1.1);
|
|
44
|
+
-o-transform: scale(1.1);
|
|
45
|
+
transform: scale(1.1);
|
|
46
|
+
}
|
|
47
|
+
.humane p,
|
|
48
|
+
.humane-boldlight p,
|
|
49
|
+
.humane ul,
|
|
50
|
+
.humane-boldlight ul {
|
|
51
|
+
margin: 0;
|
|
52
|
+
padding: 0;
|
|
53
|
+
}
|
|
54
|
+
.humane ul,
|
|
55
|
+
.humane-boldlight ul {
|
|
56
|
+
list-style: none;
|
|
57
|
+
}
|
|
58
|
+
.humane.humane-boldlight-info,
|
|
59
|
+
.humane-boldlight.humane-boldlight-info {
|
|
60
|
+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAR0lEQVQokWNISfn/n4mBgeE/EwMDAwMqQYQYmdoGlxgjI4rY//+Dx2nUFRsQZ2ALTrQQp8QL1DWeqASC014y7aCx8QwMDAwA1aZBIulmpvwAAAAASUVORK5CYII=');
|
|
61
|
+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6464ff), color-stop(1, rgba(100,100,255,0.8))) no-repeat;
|
|
62
|
+
background: -moz-linear-gradient(top, #6464ff 0%, rgba(100,100,255,0.8) 100%) no-repeat;
|
|
63
|
+
background: -webkit-linear-gradient(top, #6464ff 0%, rgba(100,100,255,0.8) 100%) no-repeat;
|
|
64
|
+
background: -ms-linear-gradient(top, #6464ff 0%, rgba(100,100,255,0.8) 100%) no-repeat;
|
|
65
|
+
background: -o-linear-gradient(top, #6464ff 0%, rgba(100,100,255,0.8) 100%) no-repeat;
|
|
66
|
+
background: linear-gradient(top, #6464ff 0%, rgba(100,100,255,0.8) 100%) no-repeat;
|
|
67
|
+
*background-color: #6464ff;
|
|
68
|
+
}
|
|
69
|
+
.humane.humane-boldlight-success,
|
|
70
|
+
.humane-boldlight.humane-boldlight-success {
|
|
71
|
+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAGklEQVQokWNI+Z9yhomBgYFhlBglRonhSgAAFX0EItSd0k8AAAAASUVORK5CYII=');
|
|
72
|
+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #64ff64), color-stop(1, rgba(100,255,100,0.8))) no-repeat;
|
|
73
|
+
background: -moz-linear-gradient(top, #64ff64 0%, rgba(100,255,100,0.8) 100%) no-repeat;
|
|
74
|
+
background: -webkit-linear-gradient(top, #64ff64 0%, rgba(100,255,100,0.8) 100%) no-repeat;
|
|
75
|
+
background: -ms-linear-gradient(top, #64ff64 0%, rgba(100,255,100,0.8) 100%) no-repeat;
|
|
76
|
+
background: -o-linear-gradient(top, #64ff64 0%, rgba(100,255,100,0.8) 100%) no-repeat;
|
|
77
|
+
background: linear-gradient(top, #64ff64 0%, rgba(100,255,100,0.8) 100%) no-repeat;
|
|
78
|
+
*background-color: #64ff64;
|
|
79
|
+
}
|
|
80
|
+
.humane.humane-boldlight-error,
|
|
81
|
+
.humane-boldlight.humane-boldlight-error {
|
|
82
|
+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAGklEQVQokWP4n5JyhomBgYFhlBglRonhSgAAFhgEIhjGqQkAAAAASUVORK5CYII=');
|
|
83
|
+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff6464), color-stop(1, rgba(255,100,100,0.8))) no-repeat;
|
|
84
|
+
background: -moz-linear-gradient(top, #ff6464 0%, rgba(255,100,100,0.8) 100%) no-repeat;
|
|
85
|
+
background: -webkit-linear-gradient(top, #ff6464 0%, rgba(255,100,100,0.8) 100%) no-repeat;
|
|
86
|
+
background: -ms-linear-gradient(top, #ff6464 0%, rgba(255,100,100,0.8) 100%) no-repeat;
|
|
87
|
+
background: -o-linear-gradient(top, #ff6464 0%, rgba(255,100,100,0.8) 100%) no-repeat;
|
|
88
|
+
background: linear-gradient(top, #ff6464 0%, rgba(255,100,100,0.8) 100%) no-repeat;
|
|
89
|
+
*background-color: #ff6464;
|
|
90
|
+
}
|
|
91
|
+
.humane.humane-animate,
|
|
92
|
+
.humane-boldlight.humane-boldlight-animate {
|
|
93
|
+
opacity: 1;
|
|
94
|
+
-moz-transform: scale(1);
|
|
95
|
+
-webkit-transform: scale(1);
|
|
96
|
+
-ms-transform: scale(1);
|
|
97
|
+
-o-transform: scale(1);
|
|
98
|
+
transform: scale(1);
|
|
99
|
+
}
|
|
100
|
+
.humane.humane-animate:hover,
|
|
101
|
+
.humane-boldlight.humane-boldlight-animate:hover {
|
|
102
|
+
opacity: 0.4;
|
|
103
|
+
-moz-transform: scale(1.8);
|
|
104
|
+
-webkit-transform: scale(1.8);
|
|
105
|
+
-ms-transform: scale(1.8);
|
|
106
|
+
-o-transform: scale(1.8);
|
|
107
|
+
transform: scale(1.8);
|
|
108
|
+
}
|
|
109
|
+
.humane.humane-animate,
|
|
110
|
+
.humane-boldlight.humane-boldlight-js-animate {
|
|
111
|
+
opacity: 1;
|
|
112
|
+
-moz-transform: scale(1);
|
|
113
|
+
-webkit-transform: scale(1);
|
|
114
|
+
-ms-transform: scale(1);
|
|
115
|
+
-o-transform: scale(1);
|
|
116
|
+
transform: scale(1);
|
|
117
|
+
}
|
|
118
|
+
.humane.humane-animate:hover,
|
|
119
|
+
.humane-boldlight.humane-boldlight-js-animate:hover {
|
|
120
|
+
opacity: 0.4;
|
|
121
|
+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
|
|
122
|
+
}
|