16c47eea9d* Lint fixes. * Implement light-dark(). * Lint css with biome, remove stylelint. * Biome lint fixes. * Dark mode adjustments. * Style bug fixes. * Colour adjustments. * Move header and footer styles to base. * Site header adjustments. * Removing jQuery and umbrella libs. They where great but not needed anymore. * Add colorScheme to optionally lock light/dark. * Update README. * Biome adjustments.
87 lines
1.5 KiB
CSS
87 lines
1.5 KiB
CSS
/* Form defaults. */
|
|
|
|
form {
|
|
/* Add vertical rhythm margins. */
|
|
margin-block: 0 var(--spacing-m);
|
|
}
|
|
|
|
input,
|
|
textarea,
|
|
select {
|
|
margin-block: 0 var(--spacing-m);
|
|
}
|
|
|
|
label {
|
|
font-weight: var(--fw-bold);
|
|
|
|
/* Display as block if before input. */
|
|
&:has(+ input),
|
|
&:has(+ textarea) {
|
|
display: block;
|
|
}
|
|
|
|
/* Mark field as required if needed. */
|
|
&:has(+ :required) {
|
|
&::after {
|
|
content: '*';
|
|
color: var(--color-mark-highlight);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Valid and invalid state. */
|
|
input,
|
|
textarea {
|
|
&:user-valid {
|
|
border-color: var(--color-success);
|
|
border-style: solid;
|
|
background-color: var(--color-success-bg);
|
|
}
|
|
|
|
&:focus:user-valid {
|
|
border-color: transparent;
|
|
}
|
|
|
|
&:user-invalid {
|
|
border-color: var(--color-error);
|
|
border-style: solid;
|
|
background-color: var(--color-error-bg);
|
|
}
|
|
|
|
&:focus:user-invalid {
|
|
border-color: transparent;
|
|
background-color: var(--color-warning-bg);
|
|
}
|
|
}
|
|
|
|
/* Set max text line width for readability. */
|
|
input,
|
|
label,
|
|
textarea,
|
|
select {
|
|
max-width: var(--max-line-width);
|
|
}
|
|
|
|
fieldset {
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
/* Make field where you enter more info a bit wider. */
|
|
[type='email'],
|
|
[type='password'],
|
|
[type='range'],
|
|
[type='search'],
|
|
[type='url'] {
|
|
width: min(20em, 100%);
|
|
}
|
|
|
|
/* Make field where you enter more info a bit wider. */
|
|
[type='text'],
|
|
textarea {
|
|
width: min(30em, 100%);
|
|
}
|
|
|
|
/* Make sure textareas without a rows attribute are not tiny. */
|
|
textarea:not([rows]) {
|
|
min-height: 7lh;
|
|
}
|