Glowy transitions, demo shows all button types, other stuff

README → README.textile

@@ -1,9 +1,12 @@
 
-Welcome to Aristo!
-======================
+h1. Welcome to "CSS3 Aristo":http://github.com/dtrejo/aristo/!
+
+h2. CSS3 Aristo Demo
+
+See the "demo":http://dtrejo.github.com/aristo/!
+
+h2. Introduction
 
-Introduction
-------------
 Aristo is an open source UI distributed as part of the Cappuccino Open Source Framework (http://cappuccino.org)
 and specifically designed for the cross platform challenges applications face today. It is a collaborative 
 effort by 280 North, Inc. and Sofa and released under the Creative Commons Attribution Share-Alike License.

css/aristo.css

@@ -4,21 +4,6 @@ http://qooxdoo.org/documentation/general/webkit_css_styles
 http://trac.webkit.org/browser/trunk/LayoutTests//fast/css
 */
 
-html, body {
-  height: 100%;
-  overflow: hidden;
-  padding: 0;
-  margin: 0;
-  -webkit-user-select: none;
-}
-
-body {
-  font-family: Apex,"Helvetica Neue","HelveticaNeue",helvetica,sans-serif;
-  font-size: 14px;
-  font-weight: bold;
-  -webkit-font-smoothing: antialiased;
-}
-
 a {
   color: #71829E;
   cursor: pointer;
@@ -52,15 +37,14 @@ input[type="radio"]:checked {
 }
 
 input[type="range"] {
-  -khtml-appearance: none; 
+  -khtml-appearance: none;
   -webkit-border-image: url(../images/slider-horizontal-track.png) 2 4 2 4 / 2px 4px 2px 4px repeat repeat;
   height: 5px;
   padding: 0;
 }
 
 input, textarea {
-  font-size: 12px;
-  color: #000;
+  font-size: 1em;
   font-weight: normal;
   padding: 4px;
 }
@@ -70,17 +54,24 @@ textarea {
   -webkit-appearance: textfield;
   resize: none;
   padding: 4px;
-  /* 
+  /*
     Hack to make the same size as text inputs,
     since their native border isn't taken into
     account when calculating width.
   */
   padding-right: 6px;
 }
 
+/* FIXME: this grey is not showing in FF. */
+::-webkit-input-placeholder,
+:-moz-placeholder {
+  color: #8F8F8F;
+}
+
 select {
   -khtml-appearance: none;
-  background: url(../images/select-updown.png) center right no-repeat, 
+  -webkit-user-select: none;
+  background: url(../images/select-updown.png) center right no-repeat,
               -webkit-gradient(linear, left top, left bottom, from(#F5F5F5), to(#CCCCCC));
   min-height: 24px;
   border: 1px solid #BDBDBD;
@@ -93,34 +84,48 @@ select:active {
   outline: none;
 }
 
-::-webkit-input-placeholder {
-  color: #8F8F8F;
-}
+a.awesome { text-decoration: none; }
 
+a.awesome,
 button {
   margin: 5px;
   -khtml-appearance: none;
   -moz-appearance: none;
   background: none;
   padding: 4px 9px;
+  font-family: Apex, "Helvetica Neue", "HelveticaNeue", "Lucida Grande", Helvetica, Arial, sans-serif;
   font-weight: bold;
-  font-size: 12px;
+  font-size: 1em;
   color: #4F4F4F;
   text-shadow: 0px 1px 1px #fff;
 
   border-width: 1px;
   border-style: solid;
   border-color: #AFAFAF #9A9A9A #828282 #9A9A9A;
-  
+
   background: #E9E9E9;
   background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#B8B8B7));
   background: -moz-linear-gradient(top, #E9E9E9, #B8B8B7);
   -webkit-box-shadow: inset 0 1px 1px #F5F5F5;
   -moz-box-shadow: inset 0 1px 1px #F5F5F5;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
+
+  transition: all .2s ease-in-out;
+  -webkit-transition: all .2s ease-in-out;
+  -moz-transition: all .2s ease-in-out;
+  -o-transition: all .2s ease-in-out;
+  cursor: pointer;
+  -webkit-user-select: none;
+}
+button:hover,
+button:focus {
+  box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
+  -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
+  -moz-box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
 }
 
+a.awesome.default, a.awesome.blue,
 button.default, button.blue {
   border-color: #7EA1B7 #5D7C8F #4C6B7E #5D7C8F;
   color: #1C4257;
@@ -130,28 +135,53 @@ button.default, button.blue {
   -webkit-box-shadow: inset 0 1px 1px #D9EDF9;
   -moz-box-shadow: inset 0 1px 1px #D9EDF9;
 }
-
-button.green {
-  color: #374C29;
-  -webkit-box-shadow: inset 1px 1px #CDE2B2;
-  -moz-box-shadow: inset 1px 1px #CDE2B2;
-  background: #A9CD7E;
-  background: -webkit-gradient(linear, left top, left bottom, from(#A9CD7E), to(#81A558));
-  background: -moz-linear-gradient(top, #A9CD7E, #81A558);
-  border-color: #92BA63 #8AB05E #81A558 #8AB05E;
+a.awesome.default:hover, a.awesome.blue:hover,
+button.default:hover, button.blue:hover,
+button.default:focus, button.blue:focus {
+  box-shadow: 0 0 7px #53a6d5, inset 0 1px 0 rgba(255,255,255,0.5);
+  -webkit-box-shadow: 0 0 7px #53a6d5, inset 0 1px 0 rgba(255,255,255,0.5);
+  -moz-box-shadow: 0 0 7px #53a6d5, inset 0 1px 0 rgba(255,255,255,0.5);
+  -o-box-shadow: 0 0 7px #53a6d5, inset 0 1px 0 rgba(255,255,255,0.5);
 }
 
+a.awesome.red,
 button.red {
   color: #4F0F0E;
   background: #E56856;
   background: -webkit-gradient(linear, left top, left bottom, from(#EE8679), to(#B94543));
   background: -moz-linear-gradient(top, #EE8679, #B94543);
-  -webkit-box-shadow: inset 0 1px 1px #E9978D;
-  -moz-box-shadow: inset 0 1px 1px #E9978D;
+  -webkit-box-shadow: inset 0 1px 1px #F4C3BD;
+  -moz-box-shadow: inset 0 1px 1px #F4C3BD;
   text-shadow: 0 1px 1px #FA9287;
   border-color: #A2403E;
 }
+a.awesome.red:hover, a.awesome.red:focus,
+button.red:hover, button.red:focus {
+  box-shadow: 0 0 7px #B94543, inset 0 1px 0 rgba(255,255,255,0.5);
+  -webkit-box-shadow: 0 0 7px #B94543, inset 0 1px 0 rgba(255,255,255,0.5);
+  -moz-box-shadow: 0 0 7px #B94543, inset 0 1px 0 rgba(255,255,255,0.5);
+  -o-box-shadow: 0 0 7px #B94543, inset 0 1px 0 rgba(255,255,255,0.5);
+}
 
+a.awesome.green,
+button.green {
+  color: #374C29;
+  background: #A9CD7E;
+  background: -webkit-gradient(linear, left top, left bottom, from(#A9CD7E), to(#81A558));
+  background: -moz-linear-gradient(top, #A9CD7E, #81A558);
+  border-color: #92BA63 #8AB05E #81A558 #8AB05E;
+  -webkit-box-shadow: inset 0 1px 1px #CDE2B2;
+  -moz-box-shadow: inset 0 1px 1px #CDE2B2;
+  text-shadow: 0 1px 1px #C9DBB4;
+}
+a.awesome.green:hover, a.awesome.green:focus,
+button.green:hover, button.green:focus {
+  box-shadow: 0 0 7px #81A558, inset 0 1px 0 rgba(255,255,255,0.5);
+  -webkit-box-shadow: 0 0 7px #81A558, inset 0 1px 0 rgba(255,255,255,0.5);
+  -moz-box-shadow: 0 0 7px #81A558, inset 0 1px 0 rgba(255,255,255,0.5);
+  -o-box-shadow: 0 0 7px #81A558, inset 0 1px 0 rgba(255,255,255,0.5);
+}
+a.awesome:active:not(:disabled),
 button:active:not(:disabled) {
   border-color: #B6B6B6 #989898 #AEAEAE #989898;
   background: #B6B6B6;
@@ -161,7 +191,8 @@ button:active:not(:disabled) {
   -moz-box-shadow: inset 0 -1px 1px #F4F4F4;
 }
 
-button.default:active, button.blue:active {
+a.awesome:active:not(:disabled), a.awesome.blue:active:not(:disabled),
+button.default:active:not(:disabled), button.blue:active:not(:disabled) {
   border-color: #4A697C #618296 #7B9FB5 #618296;
   background: #76A0B9;
   background: -webkit-gradient(linear, left top, left bottom, from(#76A0B9), to(#B0D7EF));
@@ -170,19 +201,37 @@ button.default:active, button.blue:active {
   -moz-box-shadow: inset 0 -1px 1px #D8EDF8;
 }
 
-button.red:active {
+a.awesome.red:active:not(:disabled),
+button.red:active:not(:disabled) {
   border-color: #A2403E;
   background: #B94543;
   background: -webkit-gradient(linear, left top, left bottom, from(#B94543), to(#EE8679));
   background: -moz-linear-gradient(top, #B94543, #EE8679);
-  -webkit-box-shadow: inset 0 -1px 1px #E9978D;
-  -moz-box-shadow: inset 0 -1px 1px #E9978D;
+  -webkit-box-shadow: inset 0 -1px 1px #F4C3BD;
+  -moz-box-shadow: inset 0 -1px 1px #F4C3BD;
 }
 
-button:disabled {
-  opacity: 0.5;
+a.awesome.green:active:not(:disabled),
+button.green:active:not(:disabled) {
+  color: #374C29;
+  background: #81A558;
+  background: -webkit-gradient(linear, left top, left bottom, from(#81A558), to(#A9CD7E));
+  background: -moz-linear-gradient(top, #81A558, #A9CD7E);
+  border-color: #92BA63 #8AB05E #81A558 #8AB05E;
+  -webkit-box-shadow: inset 0px -1px 1px #CDE2B2;
+  -moz-box-shadow: inset 0px -1px 1px #CDE2B2;
 }
 
+a.awesome:disabled, a.awesome:hover:disabled,
+button:disabled, button:hover:disabled {
+  opacity: 0.5;
+  box-shadow: none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  -o-box-shadow: none;
+  cursor: default;
+}
+/*
 ::-webkit-scrollbar {
   width: 17px;
   height: 17px;
@@ -248,29 +297,47 @@ button:disabled {
 ::-webkit-scrollbar-button:end:increment {
     display: block;
 }
- 
+
 /* Turn off the down area up on top, and up area on bottom */
 ::-webkit-scrollbar-button:start:increment,
 ::-webkit-scrollbar-button:end:decrement {
     display: none;
 }
-
-::-webkit-slider-thumb { 
-  -khtml-appearance: none; 
-  background: url(../images/slider-knob.png) no-repeat; 
-  width: 23px; 
+SCROLLBAR = UGLY
+*/
+::-webkit-slider-thumb {
+  -khtml-appearance: none;
+  background: url(../images/slider-knob.png) no-repeat;
+  width: 23px;
   height: 24px;
 }
 
 /*This doesn't seem to be implemented yet*/
-::-webkit-slider-thumb:active { 
+::-webkit-slider-thumb:active {
   background: url(../images/slider-knob-highlighted.png) no-repeat;
 }
 
+.search {
+  margin: 6px 0;
+  height: 19px;
+  width: 180px;
+  padding: 0 10px;
+  background: white;
+  border: 1px solid #e1e1e1;
+  border-top: none;
+  border-radius: 10px;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  box-shadow: inset 0 1px 1px #5F5F5F;
+  -moz-box-shadow: inset 0 1px 1px #5F5F5F;
+  -webkit-box-shadow: inset 0 1px 1px #5F5F5F;
+  -moz-user-select: text;
+}
+
 .copy {
   cursor: copy;
 }
 
 .progress {
   cursor: progress;
-}
+}