Merge branch 'master' into gh-pages

humane-themes/bigbox.css

@@ -0,0 +1,92 @@
+@import 'http://fonts.googleapis.com/css?family=Ubuntu&v2';
+
+/* recommended base settings */
+html, body { height: 100%; }
+.humane {
+  filter                : progid:DXImageTransform.Microsoft.alpha(opacity=100);
+  -ms-filter            : "progid:DXImageTransform.Microsoft.alpha(opacity=100)";
+  position              : fixed;
+  _position             : absolute; /* ie6 */
+  -moz-transition       : all .3s ease-out;  /* .3s transition */
+  -webkit-transition    : all .3s ease-out;
+  -o-transition         : all .3s ease-out;
+  -ms-transition        : all .3s ease-out;
+  transition            : all .3s ease-out;
+  z-index               : -1;
+}
+.humane.humane-show { z-index: 100000; }
+/* ie hover state, recommended */
+.humane:hover {
+  filter                : progid:DXImageTransform.Microsoft.alpha(opacity=60);
+  -ms-filter            : "progid:DXImageTransform.Microsoft.alpha(opacity=60)";
+}
+/* standards hover state, recommended */
+div.humane.humane-show:hover {
+  opacity: 0.6;
+  -webkit-transform     : scale(0.8);
+  -moz-transform        : scale(0.8);
+  -o-transform          : scale(0.8);
+  -ms-transform         : scale(0.8);
+  transform             : scale(0.8);
+}
+
+/* custom settings */
+.humane {
+  font-family           : Ubuntu, Verdana, sans-serif;
+  font-size             : 35px;
+  letter-spacing        : -1px;
+  top                   : 25%;
+  left                  : 25%;
+  opacity               : 0;
+  width                 : 50%;
+  min-height            : 40px;
+  color                 : #fff;
+  padding               : 30px;
+  text-align            : center;
+  background-color      :                                                       rgb(0,0,0);
+  background-color      :                                                      rgba(0,0,0,0.8);
+  background-image      : -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.8)));
+  background-image      : -webkit-linear-gradient(                        top, rgba(0,0,0,1),     rgba(0,0,0,0.8));
+  background-image      : -moz-linear-gradient(                           top, rgba(0,0,0,1),     rgba(0,0,0,0.8));
+  background-image      : -ms-linear-gradient(                            top, rgba(0,0,0,1),     rgba(0,0,0,0.8));
+  background-image      : -o-linear-gradient(                             top, rgba(0,0,0,1),     rgba(0,0,0,0.8));
+  background-image      : linear-gradient(                                top, rgba(0,0,0,1),     rgba(0,0,0,0.8));;
+  -moz-border-radius    : 15px;
+  -webkit-border-radius : 15px;
+  -o-border-radius      : 15px;
+  border-radius         : 5px;
+  text-shadow           : 0 -1px 1px #ddd;
+  -moz-box-shadow       : 0 15px 15px -15px #000;
+  -webkit-box-shadow    : 0 15px 15px -15px #000;
+  box-shadow            : 0 15px 15px -15px #000;
+  -webkit-transform     : scale(0.1);
+  -moz-transform        : scale(0.1);
+  -o-transform          : scale(0.1);
+  -ms-transform         : scale(0.1);
+  transform             : scale(0.1);
+}
+
+/* custom animation for css transition supported browsers */
+.humane.humane-show {
+  opacity: 1;
+  -webkit-transform     : scale(1);
+  -moz-transform        : scale(1);
+  -o-transform          : scale(1);
+  -ms-transform         : scale(1);
+  transform             : scale(1);
+}
+
+/* other customizations */
+.humane p {
+  margin                : 1em;
+  display               : inline;
+}
+.humane ul {
+  list-style            : none;
+  margin                : 0;
+  padding               : 0;
+}
+.humane .error {
+  color                 : red;
+  text-shadow           : 0 -1px 1px #f11;
+}

index.html

@@ -47,6 +47,7 @@ <h1>Humane JS</h1>
          <option selected>bold-dark</option>
          <option>bold-light</option>
          <option>libnotify</option>
+         <option>bigbox</option>
          <option>gshellish</option>
       </select>