diff --git a/app/assets/stylesheets/common/000_vars.css.scss b/app/assets/stylesheets/common/000_vars.css.scss index a25a5e76b..40fd5255b 100644 --- a/app/assets/stylesheets/common/000_vars.css.scss +++ b/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); +} diff --git a/app/assets/stylesheets/common/forms.css.scss b/app/assets/stylesheets/common/forms.css.scss new file mode 100644 index 000000000..46712ef3f --- /dev/null +++ b/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; + } +} diff --git a/app/assets/stylesheets/common/paginator.css.scss b/app/assets/stylesheets/common/paginator.css.scss index c0d88d9ad..781864035 100644 --- a/app/assets/stylesheets/common/paginator.css.scss +++ b/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 { diff --git a/app/assets/stylesheets/specific/uploads.css.scss b/app/assets/stylesheets/specific/uploads.css.scss index f344deba8..9773e4787 100644 --- a/app/assets/stylesheets/specific/uploads.css.scss +++ b/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; diff --git a/app/views/uploads/new.html.erb b/app/views/uploads/new.html.erb index b82d85b57..05567aa5b 100644 --- a/app/views/uploads/new.html.erb +++ b/app/views/uploads/new.html.erb @@ -57,7 +57,7 @@
- <%= submit_tag "Submit" %> + <%= submit_tag "Submit", :class => "large" %>
<% end %> diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb index 953323d14..bfd5ea468 100644 --- a/app/views/users/edit.html.erb +++ b/app/views/users/edit.html.erb @@ -4,22 +4,22 @@ <%= simple_form_for @user do |f| %>
- <%= 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"} %>
- <%= 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"} %>
- <%= f.button :submit %> + <%= f.button :submit, "Submit" %> <% end %>