styled form elements

app/assets/stylesheets/common/000_vars.css.scss

@@ -10,21 +10,22 @@ $h1_padding: 1.25em 0;
 $h2_padding: 1.45833em 0;
 $h3_padding: 1.51785em 0;
 $baseline: 1em;
+$basefont: 100%;
 
-@mixin border-radius($radius) {
-  -moz-border-radius: $radius;
-  -webkit-border-radius: $radius;
-  -ms-border-radius: $radius;
-  -o-border-radius: $radius;
-  border-radius: $radius;
+@mixin border-radius($val) {
+  -moz-border-radius: $val;
+  -webkit-border-radius: $val;
+  -ms-border-radius: $val;
+  -o-border-radius: $val;
+  border-radius: $val;
 }
 
-@mixin box-shadow($x, $y, $blur, $color) {
-  -moz-box-shadow: $x $y $blur $color;
-  -webkit-box-shadow: $x $y $blur $color;
-  -ms-box-shadow: $x $y $blur $color;
-  -o-box-shadow: $x $y $blur $color;
-  box-shadow: $x $y $blur $color;
+@mixin box-shadow($val) {
+  -moz-box-shadow: $val;
+  -webkit-box-shadow: $val;
+  -ms-box-shadow: $val;
+  -o-box-shadow: $val;
+  box-shadow: $val;
 }
 
 @mixin text-shadow($val) {
@@ -70,3 +71,28 @@ $baseline: 1em;
   border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
   border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) opacify(rgba(0,0,0,0.1), 0.15);
 }
+
+@mixin transition($transition) {
+  -webkit-transition: $transition;
+     -moz-transition: $transition;
+      -ms-transition: $transition;
+       -o-transition: $transition;
+          transition: $transition;
+}
+
+@mixin vertical-three-colors-gradient($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
+  background-color: $endColor;
+  background-repeat: no-repeat;
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
+  background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
+  background-image: -moz-linear-gradient($startColor, $midColor $colorStop, $endColor);
+  background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor);
+  background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
+  background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0); // IE9 and down, gets no color-stop at all the proper fallback
+}
+
+// Reset filters for IE
+@mixin reset-filter() {
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+}

app/assets/stylesheets/common/forms.css.scss

@@ -0,0 +1,189 @@
+// taken from https://github.com/jlong/sass-twitter-bootstrap/blob/master/lib/forms.scss
+
+@import "000_vars.css.scss";
+
+button,
+input,
+select,
+textarea {
+  font-size: 100%;
+  margin: 0;
+  vertical-align: baseline;
+  *vertical-align: middle;
+}
+button,
+input {
+  line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
+  *overflow: visible; // Inner spacing ie IE6/7
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
+  border: 0;
+  padding: 0;
+}
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  cursor: pointer; // Cursors on all buttons applied consistently
+  -webkit-appearance: button; // Style clicable inputs in iOS
+}
+input[type="search"] { // Appearance in Safari/Chrome
+  -webkit-appearance: textfield;
+  -webkit-box-sizing: content-box;
+     -moz-box-sizing: content-box;
+          box-sizing: content-box;
+}
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
+}
+textarea {
+  overflow: auto; // Remove vertical scrollbar in IE6-9
+  vertical-align: top; // Readability and alignment cross-browser
+}
+
+input[type=checkbox],
+input[type=radio] {
+  cursor: pointer;
+}
+
+input,
+textarea,
+select {
+  display: inline-block;
+  width: 210px;
+  height: $baseline;
+  padding: 4px;
+  font-size: $basefont;
+  line-height: $baseline;
+  border: 1px solid #ccc;
+  @include border-radius(3px);
+}
+
+select {
+  padding: initial;
+}
+
+input[type=checkbox],
+input[type=radio] {
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 3px 0;
+  *margin-top: 0; /* IE6-7 */
+  line-height: normal;
+  border: none;
+}
+
+input[type=file] {
+  background-color: white;
+  padding: initial;
+  border: initial;
+  line-height: initial;
+  @include box-shadow(none);
+}
+
+input[type=button],
+input[type=reset],
+input[type=submit] {
+  width: auto;
+  height: auto;
+}
+
+select,
+input[type=file] {
+  height: $baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
+  *height: auto; // Reset for IE7
+  line-height: $baseline * 1.5;
+  *margin-top: 4px; /* For IE7, add top margin to align select with labels */
+}
+
+textarea {
+  height: auto;
+}
+
+input,
+textarea {
+  $transition: border linear .2s, box-shadow linear .2s;
+  @include transition($transition);
+  @include box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
+}
+input:focus,
+textarea:focus {
+  outline: 0;
+  border-color: rgba(82,168,236,.8);
+  $shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
+  @include box-shadow($shadow);
+}
+input[type=file]:focus,
+input[type=checkbox]:focus,
+select:focus {
+  @include box-shadow(none); // override for file inputs
+  outline: 1px dotted #666; // Select elements don't get box-shadow styles, so instead we do outline
+}
+
+// button styles
+button, input[type="submit"] {
+  // Sets the close button to the middle of message
+  .close {
+    font-family: Arial, sans-serif;
+    line-height: 18px;
+  }
+}
+
+// Base .btn styles
+button, input[type="submit"] {
+  // Button Base
+  cursor: pointer;
+  display: inline-block;
+  @include vertical-three-colors-gradient(#fff, #fff, 25%, darken(#fff, 10%));
+  padding: 3px 10px 3px;
+  text-shadow: 0 1px 1px rgba(255,255,255,.75);
+  color: #222;
+  font-size: $basefont;
+  line-height: normal;
+  border: 1px solid #ccc;
+  border-bottom-color: #bbb;
+  @include border-radius(4px);
+  $shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+  @include box-shadow($shadow);
+
+  &:hover {
+    background-position: 0 -15px;
+    color: #333;
+    text-decoration: none;
+  }
+
+  // Focus state for keyboard and accessibility
+  &:focus {
+    outline: 1px dotted #666;
+  }
+
+  // Active and Disabled states
+  &.active,
+  &:active {
+    $shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
+    @include box-shadow($shadow);
+  }
+  
+  &.large {
+    font-size: $basefont + 15%;
+    line-height: normal;
+    padding: 9px 14px 9px;
+    @include border-radius(6px);
+  }
+}
+// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
+:root .alert-message,
+:root .btn {
+  border-radius: 0 \0;
+}
+
+// Help Firefox not be a jerk about adding extra padding to buttons
+button,
+input[type=submit] {
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+  }
+}

app/assets/stylesheets/common/paginator.css.scss

@@ -15,7 +15,6 @@ div.paginator {
       margin: 0 0.25em;
       padding: 0.25em 0.75em;
       border: 1px solid #EAEAEA;
-      @include border-radius(0.5em);
     }
 
     a.arrow {

app/assets/stylesheets/specific/uploads.css.scss

@@ -10,6 +10,10 @@ div#c-uploads {
       }
     }
     
+    textarea {
+      margin-bottom: 0.5em;
+    }
+    
     div#source-info {
       margin: 1em 0;
       padding: 1em;

app/views/uploads/new.html.erb

@@ -57,7 +57,7 @@
       </div>
 
       <div class="input">
-        <%= submit_tag "Submit" %>
+        <%= submit_tag "Submit", :class => "large" %>
       </div>
     <% end %>
   </div>

app/views/users/edit.html.erb

@@ -4,22 +4,22 @@
     
     <%= simple_form_for @user do |f| %>
       <fieldset>
-        <%= f.input :email, :required => Danbooru.config.enable_email_verification?, :hint => "Your email address (used for messages and for password resets)", :as => :email %>
-        <%= f.input :time_zone, :hint => "Your local time zone" %>
-        <%= f.input :receive_email_notifications, :hint => "Enable to receive email notification when you receive a DMail" %>
+        <%= f.input :email, :required => Danbooru.config.enable_email_verification?, :hint => "Used for messages and for password resets", :as => :email %>
+        <%= f.input :time_zone %>
+        <%= f.input :receive_email_notifications %>
         <%= f.input :comment_threshold, :hint => "Comments below this score will be hidden by default" %>
-        <%= f.input :always_resize_images, :hint => "Enable to automatically resize images to fit your browser window" %>
+        <%= f.input :always_resize_images, :hint => "Automatically resize images to fit your browser window" %>
         <%= f.input :default_image_size, :hint => "Medium shows images resized to #{Danbooru.config.medium_image_width} pixels wide, large is #{Danbooru.config.large_image_width} pixels wide, and original is whatever the original image is", :collection => %w(medium large original), :include_blank => false %>
         <%= f.input :favorite_tags, :hint => "A list of whitespace delimited tags that show up in your profile", :input_html => {:size => "40x5"} %>
         <%= f.input :blacklisted_tags, :hint => "A list of newline delimited tags that you never want to see", :input_html => {:size => "40x5"} %>
       </fieldset>
 
       <fieldset>
-        <%= f.input :password, :hint => "What you want your new password to be (leave blank if you don't want to change your password)", :label => "New password", :input_html => {:autocomplete => "off"} %>
-        <%= f.input :old_password, :hint => "Your old password (you must enter your password if updating your name or password)", :as => :password, :input_html => {:autocomplete => "off"} %>
+        <%= f.input :password, :hint => "Leave blank if you don't want to change your password", :label => "New password", :input_html => {:autocomplete => "off"} %>
+        <%= f.input :old_password, :as => :password, :input_html => {:autocomplete => "off"} %>
       </fieldset>
 
-      <%= f.button :submit %>
+      <%= f.button :submit, "Submit" %>
     <% end %>
   </div>
 </div>