Joost/pics
1
0
Fork 0
forked from Public/pics
Code Issues Pull Requests Projects Releases Wiki Activity

Improve styling of form elements.

Browse Source
This commit is contained in:
Aaron van Geffen 2020-11-29 17:54:32 +01:00
parent 5599ff8d9b
commit d562c70667
1 changed files with 43 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
public/css/default.css
View File

@ -375,34 +375,59 @@ footer a {
input, select, .btn { input, select, .btn {
background: #fff; background: #fff;
border: 1px solid #ccc; border: 1px solid #dbdbdb;
border-radius: 4px;
color: #000; color: #000;
font: 13px/1.7 "Open Sans", "Helvetica", sans-serif; font: 13px/1.7 "Open Sans", "Helvetica", sans-serif;
padding: 3px; padding: 3px;
} }
input[type=submit], button, .btn {
background: #ddd;
border-radius: 3px;
border: 1px solid #aaa;
display: inline-block;
font: inherit;
padding: 4px 5px;
}
input[type=submit]:hover, button:hover, .btn:hover {
background-color: #d0d0d0;
border-color: #a0a0a0;
}
textarea { textarea {
border: 1px solid #ccc; border: 1px solid #dbdbdb;
font: 12px/1.4 'Monaco', 'Inconsolata', 'DejaVu Sans Mono', monospace; border-radius: 4px;
font: 14px/1.4 'Inconsolata', 'DejaVu Sans Mono', monospace;
padding: 0.75%; padding: 0.75%;
width: 98.5%;
} }
input[type=submit], button, .btn {
background-color: #eee;
border-color: #dbdbdb;
border-width: 1px;
border-radius: 4px;
color: #363636;
cursor: pointer;
display: inline-block;
justify-content: center;
padding-bottom: calc(0.4em - 1px);
padding-left: 0.8em;
padding-right: 0.8em;
padding-top: calc(0.4em - 1px);
text-align: center;
white-space: nowrap;
}
input:hover, select:hover, button:hover, .btn:hover {
border-color: #b5b5b5;
}
input:focus, select:focus, button:focus, .btn:focus {
border-color: #3273dc;
}
input:focus:not(:active), select:focus:not(:active), button:focus:not(:active), .btn:focus:not(:active) {
box-shadow: 0px 0px 0px 2px rgba(50, 115, 220, 0.25);
}
input:active, select:active, button:active, .btn:active {
border-color: #4a4a4a;
}
.btn-red { .btn-red {
background: #F3B076; background: #eebbaa;
border-color: #C98245; border-color: #cc9988;
}
.btn-red:hover, .btn-red:focus {
border-color: #bb7766;
color: #000; color: #000;
} }
.btn-red:focus:not(:active) {
box-shadow: 0px 0px 0px 2px rgba(241, 70, 104, 0.25);
}
/* Login box styles /* Login box styles