Updated styles for the buttons #39

Merged
merged 2 commits into from Sep 14, 2012
View
4 readme.txt
@@ -18,7 +18,9 @@ My ultra-minimal CSS might make me look like theme tartare but that means less s
=== Getting Started ===
-The first thing you want to do is copy the _s directory and change the name to something else. Like, say, megatherium. Then you'll need to do a three-step find and replace on the name in all the templates.
+If you want to keep it simple, head over to http://underscores.me and generate your _s based theme from there. You just input the name of the theme you want to create and click the "Generate" button and you get your ready-to-awesomize starter theme.
+
+If you wanna do set things up manually, download _s from github. The first thing you want to do is copy the _s directory and change the name to something else. Like, say, megatherium. Then you'll need to do a three-step find and replace on the name in all the templates.
1. Search for _s inside single quotations to capture the text domain.
2. Search for _s_ for to capture all the function names
View
36 style.css
@@ -225,36 +225,27 @@ input[type="submit"] {
border: 1px solid #ccc;
border-color: #ccc #ccc #bbb #ccc;
border-radius: 3px;
- background: #fafafa; /* Old browsers */
- background: -moz-linear-gradient(top, #fafafa 60%, #e6e6e6 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,#fafafa), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, #fafafa 60%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, #fafafa 60%,#e6e6e6 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, #fafafa 60%,#e6e6e6 100%); /* IE10+ */
- background: linear-gradient(top, #fafafa 60%,#e6e6e6 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
- box-shadow: inset 0 2px 1px #fff;
+ background: #e6e6e6;
+ -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05);
+ -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05);
+ box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05);
color: rgba(0,0,0,.8);
cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
-webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
font-size: 12px;
font-size: 1.4rem;
- padding: 1.12em 1.5em .88em;
- text-shadow: 0 1px 0 rgba(255,255,255,.5);
+ line-height: 1;
+ padding: 1.12em 1.5em 1em;
+ text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
- background: #f5f5f5; /* Old browsers */
- background: -moz-linear-gradient(top, #f5f5f5 60%, #dcdcdc 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,#f5f5f5), color-stop(100%,#dcdcdc)); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, #f5f5f5 60%,#dcdcdc 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, #f5f5f5 60%,#dcdcdc 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, #f5f5f5 60%,#dcdcdc 100%); /* IE10+ */
- background: linear-gradient(top, #f5f5f5 60%,#dcdcdc 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#dcdcdc',GradientType=0 ); /* IE6-9 */
- border-color: #bbb #bbb #aaa #bbb;
+ border-color: #ccc #bbb #aaa #bbb;
+ -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02);
+ -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02);
+ box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02);
}
button:focus,
html input[type="button"]:focus,
@@ -265,8 +256,9 @@ html input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
border-color: #aaa #bbb #bbb #bbb;
- box-shadow: inset 0 2px 3px rgba(0,0,0,.15);
- box-shadow: inset 0 2px 2px rgba(0,0,0,.15);
+ -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 2px 5px rgba(0,0,0,0.15);
+ -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 2px 5px rgba(0,0,0,0.15);
+ box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 2px 5px rgba(0,0,0,0.15);
}
input[type="checkbox"],
input[type="radio"] {