diff --git a/app/javascript/src/styles/base/020_base.scss b/app/javascript/src/styles/base/020_base.scss index f52f34264..f582d7399 100644 --- a/app/javascript/src/styles/base/020_base.scss +++ b/app/javascript/src/styles/base/020_base.scss @@ -63,25 +63,6 @@ textarea { font-size: var(--text-sm); } -input[type="button"], input[type="submit"], button { - border-radius: 3px; - padding: 0.25em 1em; - - background: var(--form-button-background); - border: var(--form-button-border); - color: var(--form-button-text-color); - - &:hover { - box-shadow: var(--form-button-hover-box-shadow); - background: var(--form-button-hover-background); - } - - &:active { - box-shadow: var(--form-button-hover-box-shadow); - background: var(--form-button-active-background); - } -} - /* placeholder text in elements */ ::placeholder { color: var(--form-input-placeholder-text-color); diff --git a/app/javascript/src/styles/base/040_colors.css b/app/javascript/src/styles/base/040_colors.css index b879efe6f..f9216ac39 100644 --- a/app/javascript/src/styles/base/040_colors.css +++ b/app/javascript/src/styles/base/040_colors.css @@ -25,6 +25,7 @@ --form-input-border: 1px solid #CCC; --form-input-placeholder-text-color: grey; --form-input-validation-error-border-color: red; + --form-button-text-color: var(--form-input-text-color); --form-button-background: #EEE; --form-button-border: var(--form-input-border); @@ -33,15 +34,17 @@ --form-button-active-background: #DDD; --form-button-active-border: var(--form-button-border); --form-button-active-color: var(--form-button-text-color); + --button-primary-text-color: white; + --button-primary-background-color: var(--link-color); + --button-primary-hover-background-color: hsl(213, 100%, 40%); + --button-primary-disabled-color: grey; + --button-outline-primary-color: var(--link-color); --quick-search-form-background: var(--body-background-color); --user-upgrade-basic-background-color: #F5F5FF; --user-upgrade-gold-background-color: #FFF380; --user-upgrade-platinum-background-color: #EEE; - --user-upgrade-button-text-color: white; - --user-upgrade-button-background-color: var(--link-color); - --user-upgrade-button-hover-background-color: hsl(213, 100%, 40%); --table-header-border: 2px solid #666; --table-row-border: 1px solid #CCC; @@ -331,6 +334,7 @@ body[data-current-user-theme="dark"] { --form-input-border: 1px solid var(--grey-4); --form-input-placeholder-text-color: var(--grey-4); --form-input-validation-error-border-color: var(--red-1); + --form-button-text-color: var(--grey-1); --form-button-background: var(--grey-5); --form-button-border: 1px solid var(--grey-4); @@ -339,6 +343,10 @@ body[data-current-user-theme="dark"] { --form-button-active-background: var(--grey-5); --form-button-active-border: 1px solid var(--grey-5); --form-button-active-color: white; + --button-primary-text-color: white; + --button-primary-background-color: var(--link-color); + --button-primary-hover-background-color: var(--link-hover-color); + --button-primary-disabled-color: var(--grey-4); --forum-vote-up-color: var(--green-1); --forum-vote-meh-color: var(--yellow-1); @@ -430,9 +438,6 @@ body[data-current-user-theme="dark"] { --user-upgrade-basic-background-color: var(--grey-2); --user-upgrade-gold-background-color: var(--indigo-0); --user-upgrade-platinum-background-color: var(--blue-0); - --user-upgrade-button-text-color: white; - --user-upgrade-button-background-color: var(--link-color); - --user-upgrade-button-hover-background-color: var(--link-hover-color); --wiki-page-other-name-background-color: var(--grey-3); --wiki-page-versions-diff-del-background: var(--red-0); diff --git a/app/javascript/src/styles/common/buttons.scss b/app/javascript/src/styles/common/buttons.scss new file mode 100644 index 000000000..0e4fdf520 --- /dev/null +++ b/app/javascript/src/styles/common/buttons.scss @@ -0,0 +1,89 @@ +%button { + display: inline-block; + white-space: nowrap; + border-radius: 4px; + padding: 0.5em 1em; + + &[disabled] { + cursor: default; + } +} + +input[type="button"], input[type="submit"], button { + border-radius: 3px; + padding: 0.25em 1em; + + background: var(--form-button-background); + border: var(--form-button-border); + color: var(--form-button-text-color); + + &:hover { + box-shadow: var(--form-button-hover-box-shadow); + background: var(--form-button-hover-background); + } + + &:active { + box-shadow: var(--form-button-hover-box-shadow); + background: var(--form-button-active-background); + } +} + +/* Buttons, modeled after Material Design and Bootstrap. */ +a, button, input[type="submit"] { + /* A solid blue button. */ + &.button-primary { + @extend %button; + + color: var(--button-primary-text-color); + background-color: var(--button-primary-background-color); + border: none; + + transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12); + + &:hover:not([disabled]) { + background-color: var(--button-primary-hover-background-color); + box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12) + } + + &[disabled] { + background-color: var(--button-primary-disabled-color); + } + } + + /* An outlined blue button. */ + &.button-outline-primary { + @extend %button; + + color: var(--button-outline-primary-color); + background-color: transparent; + border: 1px solid var(--button-outline-primary-color); + + transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + + &:hover:not([disabled]) { + color: var(--inverse-text-color); + background-color: var(--button-outline-primary-color); + } + + &[disabled] { + color: var(--button-primary-disabled-color); + border: 1px solid var(--button-primary-disabled-color); + } + } + + /* A small button. */ + &.button-sm { + padding: 0.25em 1em; + } + + /* A medium button. */ + &.button-md { + padding: 0.50em 1em; + } + + /* A large button. */ + &.button-lg { + padding: 0.75em 1em; + } +} diff --git a/app/javascript/src/styles/specific/user_upgrades.scss b/app/javascript/src/styles/specific/user_upgrades.scss index b32fdf483..283347b91 100644 --- a/app/javascript/src/styles/specific/user_upgrades.scss +++ b/app/javascript/src/styles/specific/user_upgrades.scss @@ -10,30 +10,6 @@ div#c-user-upgrades { text-align: center; } - .login-button, form.button_to input[type="submit"] { - display: inline-block; - - color: var(--user-upgrade-button-text-color); - background-color: var(--user-upgrade-button-background-color); - - border: none; - border-radius: 4px; - padding: 0.75em; - - transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12); - - &:hover:not([disabled]) { - background-color: var(--user-upgrade-button-hover-background-color); - box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12) - } - - &[disabled] { - background-color: grey; - cursor: default; - } - } - table#feature-comparison { width: 100%; diff --git a/app/views/user_upgrades/new.html.erb b/app/views/user_upgrades/new.html.erb index 7e25103b7..7d8200a92 100644 --- a/app/views/user_upgrades/new.html.erb +++ b/app/views/user_upgrades/new.html.erb @@ -97,21 +97,21 @@ <% if @user_upgrade.purchaser.is_anonymous? %> - <%= link_to "Login", login_path(url: new_user_upgrade_path), class: "login-button" %> - <%= link_to "Get #{Danbooru.config.canonical_app_name} Gold", login_path(url: new_user_upgrade_path), class: "login-button" %> - <%= link_to "Get #{Danbooru.config.canonical_app_name} Platinum", login_path(url: new_user_upgrade_path), class: "login-button" %> + <%= link_to "Login", login_path(url: new_user_upgrade_path), class: "login-button button-primary" %> + <%= link_to "Get #{Danbooru.config.canonical_app_name} Gold", login_path(url: new_user_upgrade_path), class: "login-button button-primary" %> + <%= link_to "Get #{Danbooru.config.canonical_app_name} Platinum", login_path(url: new_user_upgrade_path), class: "login-button button-primary" %> <% elsif @recipient.level == User::Levels::MEMBER %> - <%= button_to "Get #{Danbooru.config.canonical_app_name} Gold", user_upgrades_path(user_id: @recipient.id, upgrade_type: "gold", country: params[:country], promo: params[:promo]), remote: true, disable_with: "Redirecting..." %> - <%= button_to "Get #{Danbooru.config.canonical_app_name} Platinum", user_upgrades_path(user_id: @recipient.id, upgrade_type: "platinum", country: params[:country], promo: params[:promo]), remote: true, disable_with: "Redirecting..." %> + <%= button_to "Get #{Danbooru.config.canonical_app_name} Gold", user_upgrades_path(user_id: @recipient.id, upgrade_type: "gold", country: params[:country], promo: params[:promo]), class: "button-primary", remote: true, disable_with: "Redirecting..." %> + <%= button_to "Get #{Danbooru.config.canonical_app_name} Platinum", user_upgrades_path(user_id: @recipient.id, upgrade_type: "platinum", country: params[:country], promo: params[:promo]), class: "button-primary", remote: true, disable_with: "Redirecting..." %> <% elsif @recipient.level == User::Levels::GOLD %> - <%= button_to "Get #{Danbooru.config.canonical_app_name} Gold", nil, disabled: true %> - <%= button_to "Get #{Danbooru.config.canonical_app_name} Platinum", user_upgrades_path(user_id: @recipient.id, upgrade_type: "gold_to_platinum", country: params[:country], promo: params[:promo]), remote: true, disable_with: "Redirecting..." %> + <%= button_to "Get #{Danbooru.config.canonical_app_name} Gold", nil, class: "button-primary", disabled: true %> + <%= button_to "Get #{Danbooru.config.canonical_app_name} Platinum", user_upgrades_path(user_id: @recipient.id, upgrade_type: "gold_to_platinum", country: params[:country], promo: params[:promo]), class: "button-primary", remote: true, disable_with: "Redirecting..." %> <% else %> - <%= button_to "Get #{Danbooru.config.canonical_app_name} Gold", nil, disabled: true %> - <%= button_to "Get #{Danbooru.config.canonical_app_name} Platinum", nil, disabled: true %> + <%= button_to "Get #{Danbooru.config.canonical_app_name} Gold", nil, class: "button-primary", disabled: true %> + <%= button_to "Get #{Danbooru.config.canonical_app_name} Platinum", nil, class: "button-primary", disabled: true %> <% end %>