133 lines
2.4 KiB
CSS
133 lines
2.4 KiB
CSS
:root {
|
|
/* Colors taken from https://isabelcastillo.com/error-info-messages-css */
|
|
--success-color: #4f8a10;
|
|
--success-bg-color: #dff2bf;
|
|
--warning-color: #9f6000;
|
|
--warning-bg-color: #feefb3;
|
|
--error-color: #d8000c;
|
|
--error-bg-color: #ffbaba;
|
|
|
|
/* Color taken from https://fandom.com */
|
|
--fandom-redlink: #ba0000;
|
|
}
|
|
|
|
|
|
/* Shared definitions */
|
|
a.redLink {
|
|
color: var(--fandom-redlink);
|
|
}
|
|
|
|
|
|
/* Forgot password buttons */
|
|
#forgotPasswordGoTo, #forgotPasswordGoBack, #resetPasswordGoBack {
|
|
margin-left: 1em;
|
|
}
|
|
|
|
|
|
/* Trackings table */
|
|
#trackings form, #trackings button, #addTrackingPersonName {
|
|
margin-bottom: unset;
|
|
}
|
|
|
|
#addTrackingPersonName, #addTrackingButton {
|
|
display: inline;
|
|
}
|
|
|
|
#addTrackingPersonName {
|
|
width: unset;
|
|
}
|
|
|
|
|
|
/* Email validation forms */
|
|
#resendEmailVerificationForm label {
|
|
display: inline;
|
|
}
|
|
|
|
#resendEmailVerificationForm label .validationInfo {
|
|
display: none;
|
|
}
|
|
|
|
#resendEmailVerificationButton {
|
|
margin: 0;
|
|
padding: .4rem;
|
|
height: unset;
|
|
line-height: unset;
|
|
}
|
|
|
|
|
|
/* Input validation elements */
|
|
.validationInfo {
|
|
display: block;
|
|
font-weight: normal;
|
|
}
|
|
|
|
input + .validationInfo {
|
|
margin-top: -1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.success {
|
|
color: var(--success-color);
|
|
}
|
|
|
|
.success > input, .success > input:focus {
|
|
color: var(--success-color);
|
|
border-color: var(--success-color);
|
|
}
|
|
|
|
.success > .validationInfo {
|
|
color: var(--success-color);
|
|
}
|
|
|
|
.warning {
|
|
color: var(--warning-color);
|
|
}
|
|
|
|
.warning > input, .warning > input:focus {
|
|
color: var(--warning-color);
|
|
border-color: var(--warning-color);
|
|
}
|
|
|
|
.warning > .validationInfo {
|
|
color: var(--warning-color);
|
|
}
|
|
|
|
.error {
|
|
color: var(--error-color);
|
|
}
|
|
|
|
.error > input, .error > input:focus {
|
|
color: var(--error-color);
|
|
border-color: var(--error-color);
|
|
}
|
|
|
|
.error > .validationInfo {
|
|
color: var(--error-color);
|
|
}
|
|
|
|
.formValidationInfo {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.formValidationInfo:not(.success):not(.warning):not(.error) {
|
|
display: none;
|
|
}
|
|
|
|
.formValidationInfo.success {
|
|
color: var(--success-color);
|
|
border: 1px solid var(--success-color);
|
|
background-color: var(--success-bg-color);
|
|
}
|
|
|
|
.formValidationInfo.warning {
|
|
color: var(--warning-color);
|
|
border: 1px solid var(--warning-color);
|
|
background-color: var(--warning-bg-color);
|
|
}
|
|
|
|
.formValidationInfo.error {
|
|
color: var(--error-color);
|
|
border: 1px solid var(--error-color);
|
|
background-color: var(--error-bg-color);
|
|
}
|