ulysia/szurubooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improved button appearance

Browse source
This commit is contained in:
Marcin Kurczewski 2014-10-11 17:41:08 +02:00
parent 1415f5c521
commit 02294a355d
1 changed files with 43 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
public_html/css/forms.css
View file

@ -50,14 +50,28 @@ input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #fafafa inset; -webkit-box-shadow: 0 0 0px 1000px #fafafa inset;
} }
button::before,
input[type=button]::before {
z-index: -1;
background: linear-gradient(#f5f5f5, #e5e5e5);
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
content: '\a0';
}
button, button,
input[type=button] { input[type=button] {
vertical-align: top;
background: transparent;
position: relative;
padding: 2px 15px 3px 15px; padding: 2px 15px 3px 15px;
border: 1px solid #ccc; border: 0;
box-shadow: 0 1px 1px 0 #e5e5e5; box-shadow: 0 1px 1px 0 #e5e5e5, 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
background: linear-gradient(#f5f5f5, #e5e5e5);
color: #444; color: #444;
text-shadow: 0 1px 1px #fafafa; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 1px rgba(255, 255, 255, 0.5);
font-family: 'Droid Sans', sans-serif; font-family: 'Droid Sans', sans-serif;
font-size: 17px; font-size: 17px;
} }
@ -65,22 +79,29 @@ button:not(:disabled),
input[type=button]:not(:disabled) { input[type=button]:not(:disabled) {
cursor: pointer; cursor: pointer;
} }
button:not(:disabled):hover, button:not(:disabled):hover::before,
input[type=button]:not(:disabled):hover { input[type=button]:not(:disabled):hover::before {
background: linear-gradient(#fafafa, #eaeaea); opacity: .65;
}
button:not(:disabled):active,
input[type=button]:not(:disabled):active {
padding: 3px 15px 2px 15px;
}
button:not(:disabled):active::before,
input[type=button]:not(:disabled):active::before {
transform: rotate(180deg);
}
button:not(:disabled):focus,
input[type=button]:not(:disabled):focus {
border-color: #64C2ED;
} }
button:disabled { button:disabled {
color: gray; color: gray;
} }
button.highlight, button.highlight::before,
input[type=button].highlight { input[type=button].highlight::before {
background: linear-gradient(#74D2FD, #64C2ED); background: linear-gradient(rgb(160, 221, 251), rgb(101, 188, 239));
text-shadow: 0 1px 1px #8ff;
}
button:not(:disabled):hover.highlight,
input[type=button]:not(:disabled):hover.highlight {
background: linear-gradient(#84E2FF, #74D2FD);
} }
button:focus, button:focus,
@ -93,9 +114,8 @@ input::-moz-focus-inner {
border: 0; border: 0;
} }
.tag-input.focused, .tag-input.focused,
button:focus,
textarea:focus, textarea:focus,
input:not(.tag-real-input):focus { input:not([type=button]):not(.tag-real-input):focus {
box-shadow: 0 0 0 1px #64C2ED inset; box-shadow: 0 0 0 1px #64C2ED inset;
border-color: #64C2ED; border-color: #64C2ED;
} }
@ -112,23 +132,23 @@ input[type=checkbox] + label {
-o-user-select: none; -o-user-select: none;
user-select: none; user-select: none;
} }
input[type=radio] + label:before, input[type=radio] + label::before,
input[type=checkbox] + label:before { input[type=checkbox] + label::before {
font-family: 'FontAwesome'; font-family: 'FontAwesome';
display: inline-block; display: inline-block;
width: 1em; width: 1em;
text-align: left; text-align: left;
} }
input[type=radio] + label:before { input[type=radio] + label::before {
content: "\f1db"; content: "\f1db";
} }
input[type=radio]:checked + label:before { input[type=radio]:checked + label::before {
content: "\f192"; content: "\f192";
} }
input[type=checkbox] + label:before { input[type=checkbox] + label::before {
content: "\f096"; content: "\f096";
} }
input[type=checkbox]:checked + label:before { input[type=checkbox]:checked + label::before {
content: "\f046"; content: "\f046";
} }