Fix button borders

This commit is contained in:
Wim Brand
2018-01-24 10:56:53 +01:00
parent e4449f1053
commit 11ce21d281

View File

@@ -3,6 +3,10 @@
Author : Fornax Author : Fornax
*/ */
:root {
--highlight_border: inset 0px 0px 5px 1px var(--highlight_color), 0px 0px 1px 0px var(--highlight_color);
}
body{ body{
background-color: #111; background-color: #111;
background-repeat: repeat; background-repeat: repeat;
@@ -73,7 +77,7 @@ html{
} }
.navigation a:hover { .navigation a:hover {
background: linear-gradient(var(--highlight_color), var(--highlight_color_dark)); background: linear-gradient(var(--highlight_color), var(--highlight_color_dark));
box-shadow: 2px 2px 8px #000000; box-shadow: var(--highlight_border), 2px 2px 8px #000000;
color: #000000; color: #000000;
text-decoration: none; text-decoration: none;
} }
@@ -244,10 +248,10 @@ input[type="button"],
input[type="color"], input[type="color"],
select{ select{
border-radius: 4px; border-radius: 4px;
border: 1px hidden transparent; border: none;
margin: 2px;
background: linear-gradient(#606060, #404040); background: linear-gradient(#606060, #404040);
padding: 6px 10px 6px 10px; padding: 6px 10px 6px 10px;
margin: 2px;
box-shadow: 2px 2px 8px #000000; box-shadow: 2px 2px 8px #000000;
font-weight: bold; font-weight: bold;
color: #FFFFFF; color: #FFFFFF;
@@ -265,16 +269,13 @@ input[type="submit"]:focus,
input[type="button"]:focus, input[type="button"]:focus,
input[type="color"]:focus, input[type="color"]:focus,
select:focus{ select:focus{
border: 1px solid var(--highlight_color); box-shadow: var(--highlight_border), 2px 2px 8px #000000;
margin: 1px;
} }
button:active, button:active,
input[type="submit"]:active, input[type="submit"]:active,
input[type="button"]:active, input[type="button"]:active,
input[type="color"]:active, input[type="color"]:active,
select:active{ select:active{
border: 1px solid var(--highlight_color);
margin: 1px;
background: linear-gradient(#404040, #606060); background: linear-gradient(#404040, #606060);
box-shadow: inset 3px 3px 6px #000000; box-shadow: inset 3px 3px 6px #000000;
padding: 8px 8px 4px 12px; padding: 8px 8px 4px 12px;
@@ -320,8 +321,7 @@ input[type="text"]:focus,
input[type="password"]:focus, input[type="password"]:focus,
input[type="email"]:focus, input[type="email"]:focus,
input[type="number"]:focus{ input[type="number"]:focus{
border: 1px solid var(--highlight_color); box-shadow: var(--highlight_border), inset 3px 3px 6px #000000;
padding: 3px 4px;
} }
input[type=file]{ input[type=file]{