esoko/mapguesser
esoko/mapguesser
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

MAPG-181 fix and unify styles for buttons and inputs

Browse Source
This commit is contained in:
Bence Pőcze 2020-06-28 03:12:16 +02:00
parent a97a6f8977
commit 48eba75cf4
Signed by: bence
GPG Key ID: AA52B11A3269D1C1
1 changed files with 55 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
public/static/css/mapguesser.css
View File

@ -153,13 +153,27 @@ button, a.button {
line-height: 35px; line-height: 35px;
} }
button.small { button.small, div.inputWithButton>button {
font-size: 14px; font-size: 14px;
padding: 0 12px; padding: 0 12px;
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
} }
button.small {
height: 32px;
line-height: 32px;
}
div.inputWithButton>button {
border-radius: 2px;
height: 27px;
line-height: 27px;
width: 75px;
margin-left: -79px;
vertical-align: 2px;
}
button:enabled:hover, button:enabled:focus, a.button:hover, a.button:focus { button:enabled:hover, button:enabled:focus, a.button:hover, a.button:focus {
background-color: #29457f; background-color: #29457f;
outline: none; outline: none;
@ -191,7 +205,7 @@ button.gray, a.button.gray {
background-color: #808080; background-color: #808080;
} }
button.gray:hover, button.gray:focus, a.button.gray:hover, a.button.gray:focus { button.gray:enabled:hover, button.gray:enabled:focus, a.button.gray:hover, a.button.gray:focus {
background-color: #555555; background-color: #555555;
} }
@ -199,7 +213,7 @@ button.red, a.button.red {
background-color: #aa5e5e; background-color: #aa5e5e;
} }
button.red:hover, button.red:focus, a.button.red:hover, a.button.red:focus { button.red:enabled:hover, button.red:enabled:focus, a.button.red:hover, a.button.red:focus {
background-color: #7f2929; background-color: #7f2929;
} }
@ -207,7 +221,7 @@ button.yellow, a.button.yellow {
background-color: #e8a349; background-color: #e8a349;
} }
button.yellow:hover, button.yellow:focus, a.button.yellow:hover, a.button.yellow:focus { button.yellow:enabled:hover, button.yellow:enabled:focus, a.button.yellow:hover, a.button.yellow:focus {
background-color: #c37713; background-color: #c37713;
} }
@ -215,7 +229,7 @@ button.green, a.button.green {
background-color: #28a745; background-color: #28a745;
} }
button.green:hover, button.green:focus, a.button.green:hover, a.button.green:focus { button.green:enabled:hover, button.green:enabled:focus, a.button.green:hover, a.button.green:focus {
background-color: #1b7d31; background-color: #1b7d31;
} }
@ -223,22 +237,36 @@ input, select, textarea {
background-color: #f9fafb; background-color: #f9fafb;
border: solid #c8d2e1 1px; border: solid #c8d2e1 1px;
border-radius: 2px; border-radius: 2px;
padding: 4px;
box-sizing: border-box; box-sizing: border-box;
font-size: 15px; font-size: 15px;
font-weight: 300; font-weight: 300;
} }
input, select {
height: 30px;
line-height: 30px;
padding: 0 5px;
}
textarea { textarea {
font-size: 13px; padding: 5px;
resize: none; resize: none;
} }
input.big, select.big, textarea.big { input.big, select.big, textarea.big, div.inputWithButton>input {
padding: 5px;
font-size: 18px; font-size: 18px;
} }
input.big, select.big, div.inputWithButton>input {
height: 35px;
line-height: 35px;
padding: 0 6px;
}
textarea.big {
padding: 6px;
}
input.fullWidth, select.fullWidth, textarea.fullWidth { input.fullWidth, select.fullWidth, textarea.fullWidth {
display: block; display: block;
width: 100%; width: 100%;
@ -253,14 +281,30 @@ input:disabled, select:disabled, textarea:disabled {
input:focus, select:focus, textarea:focus { input:focus, select:focus, textarea:focus {
background-color: #ffffff; background-color: #ffffff;
border: solid #29457f 2px; border: solid #29457f 2px;
padding: 3px;
outline: none; outline: none;
} }
input.big:focus, select.big:focus, textarea.big:focus { input:focus, select:focus {
padding: 0 4px;
}
textarea:focus {
padding: 4px; padding: 4px;
} }
input.big:focus, select.big:focus {
padding: 0 5px;
}
div.inputWithButton>input {
width: 100%;
padding: 0 83px 0 5px;
}
textarea.big:focus {
padding: 5px;
}
div.modal { div.modal {
position: fixed; position: fixed;
background-color: #ffffff; background-color: #ffffff;