92 lines
1.7 KiB
CSS
92 lines
1.7 KiB
CSS
|
table {
|
||
|
|
border-collapse: collapse;
|
||
|
|
table-layout: fixed;
|
||
|
|
}
|
||
|
|
td {
|
||
|
|
padding: 0.3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
form > table {
|
||
|
|
width: 100%;
|
||
|
|
margin: auto;
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
article {
|
||
|
|
width: 100%;
|
||
|
|
margin: 2rem auto;
|
||
|
|
display: grid;
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
input, textarea {
|
||
|
|
border: none;
|
||
|
|
font-family: var(--stdfont);
|
||
|
|
}
|
||
|
|
input[type="text"], input[type="email"], textarea {
|
||
|
|
width: 100%;
|
||
|
|
background: none;
|
||
|
|
border-bottom: 2px solid #444444;
|
||
|
|
color: gainsboro;
|
||
|
|
padding: 0.35rem;
|
||
|
|
box-sizing: border-box;
|
||
|
|
font-size: .9em;
|
||
|
|
}
|
||
|
|
input[type="submit"], input[type="reset"] {
|
||
|
|
padding: 0.35rem 0.5rem;
|
||
|
|
box-shadow: 2px 2px 6px black;
|
||
|
|
margin: 0.3rem;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
input[type="submit"]:active, input[type="reset"]:active {
|
||
|
|
transform: translate(1px, 1px); box-shadow: 0 0 2px black;
|
||
|
|
}
|
||
|
|
input[type="submit"]:hover, input[type="reset"]:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.error {
|
||
|
|
color: red;
|
||
|
|
font-size: 0.85em;
|
||
|
|
}
|
||
|
|
.success {
|
||
|
|
color: #00ff00;
|
||
|
|
font-size: 0.85em;
|
||
|
|
}
|
||
|
|
.reply {
|
||
|
|
border-left: 3px solid gainsboro;
|
||
|
|
padding-left: 1rem;
|
||
|
|
}
|
||
|
|
.message {
|
||
|
|
padding-top: 1.5rem;
|
||
|
|
}
|
||
|
|
@media only screen and (hover: none) {
|
||
|
|
form td:first-child {
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
form td:nth-child(2) {
|
||
|
|
padding-left: 0;
|
||
|
|
padding-right: 0;
|
||
|
|
}
|
||
|
|
input[type="text"], input[type="email"], textarea {
|
||
|
|
background: none;
|
||
|
|
border: 2px solid #00000033;
|
||
|
|
border-bottom: 2px solid #888888;
|
||
|
|
}
|
||
|
|
article {
|
||
|
|
margin: 2rem auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (prefers-contrast: more) {
|
||
|
|
input[type="text"], input[type="email"], textarea {
|
||
|
|
outline: 1px solid white;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
input:focus, textarea:focus {
|
||
|
|
outline: 3px solid white;
|
||
|
|
}
|
||
|
|
input[type="submit"] {
|
||
|
|
background: none;
|
||
|
|
color: white;
|
||
|
|
outline: 1px solid white;
|
||
|
|
}
|
||
|
|
}
|