88 lines
1.8 KiB
CSS
88 lines
1.8 KiB
CSS
/* Status card */
|
|
.status-card {
|
|
font-weight: bold;
|
|
position: relative;
|
|
}
|
|
|
|
.status-card output {
|
|
display: block;
|
|
margin-right: var(--block-spacing-horizontal);
|
|
}
|
|
|
|
.status-card .close {
|
|
position: absolute;
|
|
right: var(--block-spacing-horizontal);
|
|
top: calc(var(--block-spacing-vertical) / 2);
|
|
|
|
width: 1rem;
|
|
height: 1rem;
|
|
|
|
background-image: var(--icon-close);
|
|
background-position: center;
|
|
background-size: auto 1rem;
|
|
background-repeat: no-repeat;
|
|
|
|
opacity: .5;
|
|
transition: opacity var(--transition);
|
|
}
|
|
|
|
.status-card .close:is([aria-current], :hover, :active, :focus) {
|
|
opacity: 1
|
|
}
|
|
|
|
.status-card.info {
|
|
/* Colors taken from https://isabelcastillo.com/error-info-messages-css */
|
|
background-color: #bde5f8;
|
|
color: #00529b;
|
|
}
|
|
|
|
.status-card.error {
|
|
background-color: var(--form-element-invalid-focus-color);
|
|
color: var(--form-element-invalid-border-color);
|
|
}
|
|
|
|
.status-card.success {
|
|
background-color: var(--form-element-valid-focus-color);
|
|
color: var(--form-element-valid-border-color);
|
|
}
|
|
|
|
.status-card.warning {
|
|
/* Colors taken from https://isabelcastillo.com/error-info-messages-css */
|
|
background-color: #feefb3;
|
|
color: #9f6000;
|
|
}
|
|
|
|
|
|
/* Input validation */
|
|
label.invalid,
|
|
*[data-label-for].invalid,
|
|
input.invalid,
|
|
*[data-hint-for].invalid {
|
|
color: var(--form-element-invalid-border-color) !important;
|
|
}
|
|
|
|
label.valid,
|
|
*[data-label-for].valid,
|
|
input.valid,
|
|
*[data-hint-for].valid {
|
|
color: var(--form-element-valid-border-color) !important;
|
|
}
|
|
|
|
|
|
/* Enable hint-like styling on any element */
|
|
.input-hint {
|
|
display: block;
|
|
|
|
/*noinspection CssUnresolvedCustomProperty*/
|
|
margin-top: calc(var(--spacing) * -.75);
|
|
}
|
|
|
|
|
|
/* Custom components */
|
|
.inline-button {
|
|
display: inline-block;
|
|
width: unset;
|
|
margin: 0;
|
|
padding: 0.3em;
|
|
}
|