diff --git a/app/javascript/src/styles/base/020_base.scss b/app/javascript/src/styles/base/020_base.scss index 23de8c808..c0e31b18b 100644 --- a/app/javascript/src/styles/base/020_base.scss +++ b/app/javascript/src/styles/base/020_base.scss @@ -56,6 +56,31 @@ img { vertical-align: middle; } +input, select, textarea { + background: var(--form-input-background); + border: var(--form-input-border); + color: var(--form-input-text-color); +} + +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); + } +} + menu { margin: 0; padding: 0; diff --git a/app/javascript/src/styles/base/040_colors.css b/app/javascript/src/styles/base/040_colors.css index c0b119ac3..48634ddf3 100644 --- a/app/javascript/src/styles/base/040_colors.css +++ b/app/javascript/src/styles/base/040_colors.css @@ -26,6 +26,18 @@ --responsive-sidebar-submit-button-border: 1px solid rgb(197, 197, 197); --responsive-form-input-border: 1px solid #c5c5c5; + --form-input-text-color: var(--text-color); + --form-input-background: var(--body-background-color); + --form-input-border: 1px solid #CCC; + --form-button-text-color: var(--form-input-text-color); + --form-button-background: #EEE; + --form-button-border: var(--form-input-border); + --form-button-hover-background: #F5F5F5; + --form-button-hover-box-shadow: 0px 0px 2px grey; + --form-button-active-background: #DDD; + --form-button-active-border: var(--form-button-border); + --form-button-active-color: var(--form-button-text-color); + --user-upgrade-gold-background-color: #FFF380; --user-upgrade-platinum-background-color: #EEE; --user-upgrade-table-row-hover-background-color: #FEF; @@ -168,18 +180,11 @@ --sidebar-submit-button-color: #EEE; --footer-border: 1px solid #EEE; - --jquery-ui-button-border: 1px solid darkgrey; - --jquery-ui-button-background: #f6f6f6; - --jquery-ui-button-hover-background: #fefefe; - --jquery-ui-button-hover-box-shadow: grey; - --jquery-ui-state-error-background: #FDDFDE; --jquery-ui-state-error-border: 1px solid #FBC7C6; - --jquery-ui-state-highlight-background: #FDF5D9; --jquery-ui-state-highlight-border: 1px solid #FCEEC1; --jquery-ui-state-highlight-color: #363636; - --jquery-ui-dialog-box-shadow: 2px 2px 1px grey; --dtext-blockquote-border: 1px solid #666; diff --git a/app/javascript/src/styles/common/jquery_ui_custom.scss b/app/javascript/src/styles/common/jquery_ui_custom.scss index 2cf603b0b..bb5e0f5ba 100644 --- a/app/javascript/src/styles/common/jquery_ui_custom.scss +++ b/app/javascript/src/styles/common/jquery_ui_custom.scss @@ -57,8 +57,9 @@ div.ui-dialog { .ui-button { margin: 0; padding: 0.25em 1em; - border: var(--jquery-ui-button-border); - background: var(--jquery-ui-button-background); + border: var(--form-button-border); + background: var(--form-button-background); + color: var(--form-button-text-color); &.sub { font-size: 90%; @@ -68,11 +69,17 @@ div.ui-dialog { font-size: 90%; padding: 0.25em 0.5em; } -} -.ui-button:hover { - box-shadow: var(--jquery-ui-button-hover-box-shadow); - background: var(--jquery-ui-button-hover-background); + &: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); + color: var(--form-button-text-color); + } } .ui-front {