jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

css: refactor <button> and <input> element styling.

Browse Source 
* Style <button> and <input> elements explicitly instead of relying on browser defaults.
* Style jquery ui buttons the same way as regular buttons.
* Add color variables so we can restyle form inputs in dark mode.
This commit is contained in:
evazion
2019-09-19 02:12:03 -05:00
parent 162ca0782a
commit 9359797a00
3 changed files with 50 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/javascript/src/styles/base/020_base.scss
View File

@@ -56,6 +56,31 @@ img {
vertical-align: middle; 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 { menu {
margin: 0; margin: 0;
padding: 0; padding: 0;

19
app/javascript/src/styles/base/040_colors.css
View File

@@ -26,6 +26,18 @@
--responsive-sidebar-submit-button-border: 1px solid rgb(197, 197, 197); --responsive-sidebar-submit-button-border: 1px solid rgb(197, 197, 197);
--responsive-form-input-border: 1px solid #c5c5c5; --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-gold-background-color: #FFF380;
--user-upgrade-platinum-background-color: #EEE; --user-upgrade-platinum-background-color: #EEE;
--user-upgrade-table-row-hover-background-color: #FEF; --user-upgrade-table-row-hover-background-color: #FEF;
@@ -168,18 +180,11 @@
--sidebar-submit-button-color: #EEE; --sidebar-submit-button-color: #EEE;
--footer-border: 1px solid #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-background: #FDDFDE;
--jquery-ui-state-error-border: 1px solid #FBC7C6; --jquery-ui-state-error-border: 1px solid #FBC7C6;
--jquery-ui-state-highlight-background: #FDF5D9; --jquery-ui-state-highlight-background: #FDF5D9;
--jquery-ui-state-highlight-border: 1px solid #FCEEC1; --jquery-ui-state-highlight-border: 1px solid #FCEEC1;
--jquery-ui-state-highlight-color: #363636; --jquery-ui-state-highlight-color: #363636;
--jquery-ui-dialog-box-shadow: 2px 2px 1px grey; --jquery-ui-dialog-box-shadow: 2px 2px 1px grey;
--dtext-blockquote-border: 1px solid #666; --dtext-blockquote-border: 1px solid #666;

19
app/javascript/src/styles/common/jquery_ui_custom.scss
View File

@@ -57,8 +57,9 @@ div.ui-dialog {
.ui-button { .ui-button {
margin: 0; margin: 0;
padding: 0.25em 1em; padding: 0.25em 1em;
border: var(--jquery-ui-button-border); border: var(--form-button-border);
background: var(--jquery-ui-button-background); background: var(--form-button-background);
color: var(--form-button-text-color);
&.sub { &.sub {
font-size: 90%; font-size: 90%;
@@ -68,11 +69,17 @@ div.ui-dialog {
font-size: 90%; font-size: 90%;
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
} }
}
.ui-button:hover { &:hover {
box-shadow: var(--jquery-ui-button-hover-box-shadow); box-shadow: var(--form-button-hover-box-shadow);
background: var(--jquery-ui-button-hover-background); 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 { .ui-front {