flatty.css 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. html,
  2. body {
  3. min-height: 100%;
  4. }
  5. .humane,
  6. .humane-flatty {
  7. position: fixed;
  8. -moz-transition: all 0.4s ease-in-out;
  9. -webkit-transition: all 0.4s ease-in-out;
  10. -ms-transition: all 0.4s ease-in-out;
  11. -o-transition: all 0.4s ease-in-out;
  12. transition: all 0.4s ease-in-out;
  13. z-index: 100000;
  14. filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  15. }
  16. .humane,
  17. .humane-flatty {
  18. font-family: Helvetica Neue, Helvetica, san-serif;
  19. font-size: 16px;
  20. top: 0;
  21. left: 30%;
  22. opacity: 0;
  23. width: 40%;
  24. color: #444;
  25. padding: 10px;
  26. text-align: center;
  27. background-color: #fff;
  28. -webkit-border-bottom-right-radius: 3px;
  29. -webkit-border-bottom-left-radius: 3px;
  30. -moz-border-radius-bottomright: 3px;
  31. -moz-border-radius-bottomleft: 3px;
  32. border-bottom-right-radius: 3px;
  33. border-bottom-left-radius: 3px;
  34. -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
  35. box-shadow: 0 1px 2px rgba(0,0,0,0.5);
  36. -moz-transform: translateY(-100px);
  37. -webkit-transform: translateY(-100px);
  38. -ms-transform: translateY(-100px);
  39. -o-transform: translateY(-100px);
  40. transform: translateY(-100px);
  41. }
  42. .humane p,
  43. .humane-flatty p,
  44. .humane ul,
  45. .humane-flatty ul {
  46. margin: 0;
  47. padding: 0;
  48. }
  49. .humane ul,
  50. .humane-flatty ul {
  51. list-style: none;
  52. }
  53. .humane.humane-flatty-info,
  54. .humane-flatty.humane-flatty-info {
  55. background-color: #3498db;
  56. color: #FFF;
  57. }
  58. .humane.humane-flatty-success,
  59. .humane-flatty.humane-flatty-success {
  60. background-color: #18bc9c;
  61. color: #FFF;
  62. }
  63. .humane.humane-flatty-error,
  64. .humane-flatty.humane-flatty-error {
  65. background-color: #e74c3c;
  66. color: #FFF;
  67. }
  68. .humane-animate,
  69. .humane-flatty.humane-flatty-animate {
  70. opacity: 1;
  71. -moz-transform: translateY(0);
  72. -webkit-transform: translateY(0);
  73. -ms-transform: translateY(0);
  74. -o-transform: translateY(0);
  75. transform: translateY(0);
  76. }
  77. .humane-animate:hover,
  78. .humane-flatty.humane-flatty-animate:hover {
  79. opacity: 0.7;
  80. }
  81. .humane-js-animate,
  82. .humane-flatty.humane-flatty-js-animate {
  83. opacity: 1;
  84. -moz-transform: translateY(0);
  85. -webkit-transform: translateY(0);
  86. -ms-transform: translateY(0);
  87. -o-transform: translateY(0);
  88. transform: translateY(0);
  89. }
  90. .humane-js-animate:hover,
  91. .humane-flatty.humane-flatty-js-animate:hover {
  92. opacity: 0.7;
  93. filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  94. }