nightTab/css/form.css

95 lines
2.1 KiB
CSS
Raw Normal View History

2018-12-26 08:45:53 +01:00
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"] {
2018-12-26 18:43:38 +01:00
background-color: var(--gray-14);
2018-12-26 08:45:53 +01:00
padding: 0 0.5em;
margin: 0 0 1em 0;
color: var(--black);
font-size: 1em;
font-family: var(--font-regular);
line-height: 2.5em;
height: 2.5em;
width: 100%;
border-width: 2px;
border-style: solid;
border-color: transparent;
border-radius: var(--radius);
cursor: text;
transition: all var(--animation-speed-medium) ease-in-out;
-moz-appearance: textfield;
}
input[type="email"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="text"]:hover {
border-color: rgb(var(--accent));
color: var(--black);
outline: 0;
}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus {
background-color: var(--white);
border-color: rgb(var(--accent));
color: var(--black);
box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 2px rgb(var(--accent));
outline: 0;
z-index: 2;
}
input[type="email"]::placeholder,
input[type="number"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
input[type="text"]::placeholder {
color: var(--gray-10);
transition: all var(--animation-speed-medium) ease-in-out;
}
input[type="email"]:focus::placeholder,
input[type="number"]:focus::placeholder,
input[type="password"]:focus::placeholder,
input[type="search"]:focus::placeholder,
input[type="tel"]:focus::placeholder,
input[type="text"]:focus::placeholder {
color: var(--gray-14);
}
label {
color: var(--gray-18);
font-size: 1em;
display: inline-block;
}
input[type="color"] {
border: 0;
height: 2.5em;
min-width: 2.5em;
display: block;
cursor: pointer;
-webkit-appearance: none;
}
input[type="color"]:focus {
outline: 0;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: 0;
}