servnest/less/form.less

107 lines
1.5 KiB
Text

form {
margin-left: 50px;
margin-right: 50px;
text-align: center;
@media (max-width: 500px) {
margin-left: 0px;
margin-right: 0px;
}
}
input, select {
border-radius: 12px;
font-size: @fontSize;
margin: 5px;
padding: 10px;
border-style: solid;
border-width: 2px;
&:hover {
border-width: 3px;
padding: 9px;
}
&:focus {
border-width: 4px;
padding: 8px;
}
@media @light {
background-color: @lightColor;
color: @darkColor;
border-color: @darkColor;
}
@media @dark {
background-color: @darkColor;
color: @lightColor;
border-color: @lightColor;
}
}
input[type=text] {
font-family: monospace;
}
input[type=submit] {
margin: 22px;
}
input#subdomain, input#ttl-value {
text-align: right;
}
#password {
width: 32ch;
text-align: center;
}
#username {
width: 16ch;
}
#keytag {
width: 7ch;
}
input:invalid+span::after {
content: '✖';
}
input:valid+span::after {
content: ''; // ✓
}
input+span::after {
display: inline-block;
width: 20px;
font-size: 30px;
padding-left: 20px;
font-family: monospace;
}
label.aboutInputCondition {
display: block;
font-size: @fontSize - 10%;
}
fieldset {
border-radius: 20px;
border-width: 2px;
border-style: solid;
display: flex;
flex-direction: row;
justify-content: center;
@media @light {
border-color: @darkColor;
}
@media @dark {
border-color: @lightColor;
}
}
.elForm {
flex-direction: column;
}