117 lines
1.7 KiB
CSS
117 lines
1.7 KiB
CSS
* {
|
|
display: border-box;
|
|
}
|
|
|
|
datalist, datalist option {
|
|
visibility:hidden;
|
|
}
|
|
|
|
hr {
|
|
margin:1em 0;
|
|
}
|
|
|
|
header, main, form > div {
|
|
padding:1em;
|
|
}
|
|
label {
|
|
display: block;
|
|
padding:0.75em 0;
|
|
text-shadow: #fff 3px 3px 10px;
|
|
}
|
|
label::after {
|
|
content: ':';
|
|
}
|
|
fieldset {
|
|
margin-bottom: 1em;
|
|
border-radius: 0.25em;
|
|
}
|
|
fieldset fieldset { background: #eee;}
|
|
fieldset fieldset fieldset { background: #ddd; }
|
|
fieldset fieldset fieldset fieldset { background: #ccc; }
|
|
|
|
legend {
|
|
padding: 0.25em;
|
|
border: 1px solid #ddd;
|
|
border-radius: 0.25em;
|
|
}
|
|
|
|
code {
|
|
font-family: Consolas, Monaco, sans-serif;
|
|
overflow-x: scroll;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
code, legend {
|
|
background:#fdf6e3;
|
|
}
|
|
|
|
.form-field {
|
|
display: block;
|
|
}
|
|
|
|
.form-field .example, .form-field code {
|
|
/* Old Mozilla */
|
|
display:-moz-inline-box;
|
|
/* Modern */
|
|
display:inline-block;
|
|
vertical-align:top;
|
|
margin: 0.5em auto;
|
|
}
|
|
|
|
.form-field .example {
|
|
width: 32%;
|
|
}
|
|
|
|
.form-field code {
|
|
border: 1px solid #ddd;
|
|
border-radius:0.25em;
|
|
margin-left: 0.5em;
|
|
padding:0.5em;
|
|
width: 64%;
|
|
}
|
|
|
|
.example {
|
|
text-align: center;
|
|
}
|
|
|
|
.example > * {
|
|
margin: 0 auto;
|
|
text-align:left;
|
|
width:90%;
|
|
}
|
|
|
|
.example > code {
|
|
width: inherit;
|
|
}
|
|
|
|
output {
|
|
text-align:left;
|
|
}
|
|
|
|
input:active + label, input:hover + label, input:focus + label {
|
|
font-size:1.5em;
|
|
font-weight:bold;
|
|
}
|
|
|
|
[type="checkbox"] + label, [type="option"] + label{
|
|
font-weight:normal;
|
|
}
|
|
|
|
[type="checkbox"]:checked + label, [type="option"]:checked + label {
|
|
font-weight:bold;
|
|
}
|
|
|
|
[required]:valid + label {
|
|
color: green;
|
|
}
|
|
[required]:invalid + label {
|
|
font-weight:bold;
|
|
color: red;
|
|
}
|
|
|
|
.antipattern {
|
|
background: #c77;
|
|
}
|
|
.antipattern fieldset {
|
|
background: #a55;
|
|
} |