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

css: factor out button css.

Browse Source 
Factor out the buttons from the user upgrades page into a general
UI component.
This commit is contained in:
evazion
2021-02-14 02:45:12 -06:00
parent f42fe5f1f7
commit ae204df4ca
5 changed files with 109 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 <input type="text"> elements */
::placeholder {
color: var(--form-input-placeholder-text-color);

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

@@ -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);