In ACSS 4, all form styles were removed, and now it only supports WS Forms, which is great for those of us who use WS Forms, but if you don’t, it could be a challenge. I decided to pull all the legacy styles from ACSS 3 in case someone needs them.
.form--light input[type="date"], .form--light input[type="datetime-local"], .form--light input[type="month"], .form--light input[type="password"], .form--light input[type="search"], .form--light input[type="time"], .form--light input[type="week"], .form--light input[type="email"], .form--light input[type="number"], .form--light input[type="tel"], .form--light input[type="text"], .form--light input[type="url"], .form--light select:not([multiple]):not([size]), .form--light .bricks-search-form input[type="date"], .form--light .bricks-search-form input[type="datetime-local"], .form--light .bricks-search-form input[type="month"], .form--light .bricks-search-form input[type="password"], .form--light .bricks-search-form input[type="search"], .form--light .bricks-search-form input[type="time"], .form--light .bricks-search-form input[type="week"], .form--light .bricks-search-form input[type="email"], .form--light .bricks-search-form input[type="number"], .form--light .bricks-search-form input[type="tel"], .form--light .bricks-search-form input[type="text"], .form--light .bricks-search-form input[type="url"], .form--light .bricks-search-form select:not([multiple]):not([size]), .form--light .brxe-post-comments input[type="date"], .form--light .brxe-post-comments input[type="datetime-local"], .form--light .brxe-post-comments input[type="month"], .form--light .brxe-post-comments input[type="password"], .form--light .brxe-post-comments input[type="search"], .form--light .brxe-post-comments input[type="time"], .form--light .brxe-post-comments input[type="week"], .form--light .brxe-post-comments input[type="email"], .form--light .brxe-post-comments input[type="number"], .form--light .brxe-post-comments input[type="tel"], .form--light .brxe-post-comments input[type="text"], .form--light .brxe-post-comments input[type="url"], .form--light .brxe-post-comments select:not([multiple]):not([size]) {
height: var(--f-input-height, 3.125rem);
}
.form--light .input, .form--light input:not([type="submit"]), .form--light select, .form--light textarea, .form--light .bricks-search-form .input, .form--light .bricks-search-form input:not([type="submit"]), .form--light .bricks-search-form select, .form--light .bricks-search-form textarea, .form--light .brxe-post-comments .input, .form--light .brxe-post-comments input:not([type="submit"]), .form--light .brxe-post-comments select, .form--light .brxe-post-comments textarea {
background-color: var(--f-light-input-background, var(--white));
border-top-width: var(--f-input-border-top-size, 0.0625rem);
border-right-width: var(--f-input-border-right-size, 0.0625rem);
border-bottom-width: var(--f-input-border-bottom-size, 0.0625rem);
border-left-width: var(--f-input-border-left-size, 0.0625rem);
border-style: var(--f-input-border-style, solid);
border-color: var(--f-light-input-border-color, var(--neutral-light));
border-radius: var(--f-input-border-radius, var(--btn-radius));
color: var(--f-light-input-text-color, var(--neutral-dark));
font-size: var(--f-input-size, --text-m);
font-weight: var(--f-input-font-weight, 400);
line-height: var(--f-input-line-height, 1);
padding: var(--f-input-padding-y, 0.5em) var(--f-input-padding-x, 1em);
-webkit-border-radius: var(--f-input-border-radius, var(--btn-radius));
-moz-border-radius: var(--f-input-border-radius, var(--btn-radius));
-ms-border-radius: var(--f-input-border-radius, var(--btn-radius));
-o-border-radius: var(--f-input-border-radius, var(--btn-radius));
transition: var(--transition-duration) var(--transition-timing) var(--transition-delay);
}
.form--light .input:hover:not([data-wsf-legal]), .form--light .input:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light input:not([type="submit"]):hover:not([data-wsf-legal]), .form--light input:not([type="submit"]):hover:enabled:not(:focus):not([data-wsf-legal]), .form--light select:hover:not([data-wsf-legal]), .form--light select:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light textarea:hover:not([data-wsf-legal]), .form--light textarea:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .bricks-search-form .input:hover:not([data-wsf-legal]), .form--light .bricks-search-form .input:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .bricks-search-form input:not([type="submit"]):hover:not([data-wsf-legal]), .form--light .bricks-search-form input:not([type="submit"]):hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .bricks-search-form select:hover:not([data-wsf-legal]), .form--light .bricks-search-form select:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .bricks-search-form textarea:hover:not([data-wsf-legal]), .form--light .bricks-search-form textarea:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .brxe-post-comments .input:hover:not([data-wsf-legal]), .form--light .brxe-post-comments .input:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .brxe-post-comments input:not([type="submit"]):hover:not([data-wsf-legal]), .form--light .brxe-post-comments input:not([type="submit"]):hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .brxe-post-comments select:hover:not([data-wsf-legal]), .form--light .brxe-post-comments select:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .brxe-post-comments textarea:hover:not([data-wsf-legal]), .form--light .brxe-post-comments textarea:hover:enabled:not(:focus):not([data-wsf-legal]) {
background-color: var(--f-light-input-color-background-hover, var(--white));
border-color: var(--f-light-input-border-color-hover, var(--neutral-light));
color: var(--f-light-input-text-color-hover, var(--neutral-dark));
}
.form--light .input::placeholder, .form--light input:not([type="submit"])::placeholder, .form--light select::placeholder, .form--light textarea::placeholder, .form--light .bricks-search-form .input::placeholder, .form--light .bricks-search-form input:not([type="submit"])::placeholder, .form--light .bricks-search-form select::placeholder, .form--light .bricks-search-form textarea::placeholder, .form--light .brxe-post-comments .input::placeholder, .form--light .brxe-post-comments input:not([type="submit"])::placeholder, .form--light .brxe-post-comments select::placeholder, .form--light .brxe-post-comments textarea::placeholder {
color: var(--f-light-input-placeholder-color, var(--neutral-dark));
opacity: var(--f-light-input-placeholder-opacity, 0.5);
transition: var(--transition-duration) var(--transition-timing) var(--transition-delay);
}
.form--light .input:hover::placeholder, .form--light input:not([type="submit"]):hover::placeholder, .form--light select:hover::placeholder, .form--light textarea:hover::placeholder, .form--light .bricks-search-form .input:hover::placeholder, .form--light .bricks-search-form input:not([type="submit"]):hover::placeholder, .form--light .bricks-search-form select:hover::placeholder, .form--light .bricks-search-form textarea:hover::placeholder, .form--light .brxe-post-comments .input:hover::placeholder, .form--light .brxe-post-comments input:not([type="submit"]):hover::placeholder, .form--light .brxe-post-comments select:hover::placeholder, .form--light .brxe-post-comments textarea:hover::placeholder {
color: var(--f-light-input-placeholder-color-hover, var(--neutral-dark));
}
.form--light .bricks-button, .form--light .bricks-search-form .bricks-button, .form--light .brxe-post-comments .bricks-button {
background-color: var(--f-light-btn-background, var(--primary));
color: var(--f-light-btn-text-color, var(--primary-ultra-light));
border-style: var(--f-btn-border-style, solid);
border-width: var(--f-btn-border-width, var(--btn-border-width));
border-color: var(--f-light-btn-border-color, var(--primary));
border-radius: var(--f-btn-border-radius, var(--btn-radius));
-webkit-border-radius: var(--f-btn-border-radius, var(--btn-radius));
-moz-border-radius: var(--f-btn-border-radius, var(--btn-radius));
-ms-border-radius: var(--f-btn-border-radius, var(--btn-radius));
-o-border-radius: var(--f-btn-border-radius, var(--btn-radius));
font-size: var(--f-btn-text-size, --text-m);
font-weight: var(--f-btn-font-weight, 400);
line-height: var(--f-btn-line-height, 1);
padding: var(--f-btn-padding-y, 0.75em) var(--f-btn-padding-x, 1.5em);
margin-block-start: var(--f-btn-margin-top, 0);
text-align: center;
-webkit-text-decoration: var(--f-btn-text-decoration, none);
text-decoration: var(--f-btn-text-decoration, none);
text-transform: var(--f-btn-text-transform, none);
transition: all var(--btn-transition-duration) ease;
min-height: var(--f-input-height, 3.125rem);
}
.form--light .bricks-button:hover, .form--light .bricks-search-form .bricks-button:hover, .form--light .brxe-post-comments .bricks-button:hover {
background-color: var(--f-light-btn-background-hover, var(--primary-hover));
color: var(--f-light-btn-text-color-hover, var(--primary-ultra-light));
border-color: var(--f-light-btn-border-color-hover, var(--primary-hover));
}
.form--light .bricks-button.bricks-background-secondary, .form--light .bricks-search-form .bricks-button.bricks-background-secondary, .form--light .brxe-post-comments .bricks-button.bricks-background-secondary {
background-color: var(--f-light-secondary-btn-background-color, var(--neutral-light));
color: var(--f-light-secondary-btn-text-color, var(--neutral-ultra-dark));
border-color: var(--f-light-secondary-btn-background-color, var(--neutral-light));
}
.form--light .bricks-button.bricks-background-secondary:hover, .form--light .bricks-search-form .bricks-button.bricks-background-secondary:hover, .form--light .brxe-post-comments .bricks-button.bricks-background-secondary:hover {
background-color: var(--f-light-secondary-btn-background-color-hover, var(--neutral-ultra-light));
color: var(--f-light-secondary-btn-text-color-hover, var(--neutral-ultra-dark));
border-color: var(--f-light-secondary-btn-background-color-hover, var(--neutral-ultra-light));
}
.form--light .form-group, .form--light .bricks-search-form .form-group, .form--light .brxe-post-comments .form-group {
padding: 0;
}
.form--light .form-group:not(.submit-button-wrapper), .form--light .bricks-search-form .form-group:not(.submit-button-wrapper), .form--light .brxe-post-comments .form-group:not(.submit-button-wrapper) {
margin-block-end: var(--f-field-margin-bottom, 1.5em);
}
.form--light .message, .form--light .bricks-search-form .message, .form--light .brxe-post-comments .message {
margin-block-start: var(--f-field-margin-bottom, 1.5em);
}
.form--light label:not(.ff-el-form-check-label), .form--light div.label, .form--light .bricks-search-form label:not(.ff-el-form-check-label), .form--light .bricks-search-form div.label, .form--light .brxe-post-comments label:not(.ff-el-form-check-label), .form--light .brxe-post-comments div.label {
background-color: var(--f-light-label-background-color, );
color: var(--f-light-label-text-color, var(--neutral-dark));
font-size: var(--f-label-size, --text-m);
font-weight: var(--f-label-font-weight, 400);
line-height: var(--f-label-line-height, 1);
margin-block-end: var(--f-label-margin-bottom, 0.5em);
text-transform: var(--f-label-text-transform, none);
padding: var(--f-label-padding-y, 0) var(--f-label-padding-x, 0);
}
.form--light .required:after, .form--light .bricks-search-form .required:after, .form--light .brxe-post-comments .required:after {
color: var(--f-light-required-color, var(--action));
}
.form--light input[type="file"], .form--light .bricks-search-form input[type="file"], .form--light .brxe-post-comments input[type="file"] {
padding: 0;
}
.form--light .choose-files, .form--light .bricks-search-form .choose-files, .form--light .brxe-post-comments .choose-files {
padding: var(--f-input-padding-y 1em, 0.5em 1em);
color: var(--f-light-upload-btn-text-color, var(--neutral-ultra-dark));
font-size: var(--text-s-pure, 1.42rem);
font-size: calc(var(--f-label-size-min, 0.875) * 1rem + (var(--f-label-size-max, 1) - var(--f-label-size-min, 0.875) * ((100vw - 22.5rem) / 67.5)));
font-size: clamp(var(--f-label-size-min, 0.875) * 1rem, calc(var(--f-label-size-max, 1) - var(--f-label-size-min, 0.875) / 67.5 * 100vw + var(--f-label-size-min, 0.875) - var(--f-label-size-max, 1) - var(--f-label-size-min, 0.875) / 67.5 * 22.5 * 1rem), var(--f-label-size-max, 1) * 1rem);
font-weight: var(--f-label-font-weight, 400);
line-height: var(--f-label-line-height, 1);
background: var(--f-light-upload-btn-background-color, var(--neutral-light));
transition: all var(--btn-transition-duration) ease;
}
.form--light .choose-files:hover, .form--light .bricks-search-form .choose-files:hover, .form--light .brxe-post-comments .choose-files:hover {
color: var(--f-light-upload-btn-text-color-hover, var(--neutral-ultra-dark));
background: var(--f-light-upload-btn-background-color-hover, var(--neutral-ultra-light));
}
.form--light .file-result.show, .form--light .bricks-search-form .file-result.show, .form--light .brxe-post-comments .file-result.show {
font-size: var(--text-s-pure, 1.42rem);
font-size: calc(var(--f-label-size-min, 0.875) * 1rem + (var(--f-label-size-max, 1) - var(--f-label-size-min, 0.875) * ((100vw - 22.5rem) / 67.5)));
font-size: clamp(var(--f-label-size-min, 0.875) * 1rem, calc(var(--f-label-size-max, 1) - var(--f-label-size-min, 0.875) / 67.5 * 100vw + var(--f-label-size-min, 0.875) - var(--f-label-size-max, 1) - var(--f-label-size-min, 0.875) / 67.5 * 22.5 * 1rem), var(--f-label-size-max, 1) * 1rem);
font-weight: var(--f-label-font-weight, 400);
line-height: var(--f-label-line-height, 1);
transition: all var(--btn-transition-duration) ease;
}
.form--light .file-result.show .remove:hover, .form--light .bricks-search-form .file-result.show .remove:hover, .form--light .brxe-post-comments .file-result.show .remove:hover {
background-color: var(--f-light-btn-background-hover, var(--primary-hover));
color: var(--f-light-btn-text-color-hover, var(--primary-ultra-light));
border-color: var(--f-light-btn-border-color-hover, var(--primary-hover));
}
.form--light input[type="radio"], .form--light .bricks-search-form input[type="radio"], .form--light .brxe-post-comments input[type="radio"] {
accent-color: var(--f-light-option-action-color, var(--primary));
}
.form--light input[type="radio"] + label, .form--light .bricks-search-form input[type="radio"] + label, .form--light .brxe-post-comments input[type="radio"] + label {
background-color: var(--f-light-option-background-color, transparent);
display: inline-block;
color: var(--f-light-label-text-color, var(--neutral-dark));
font-family: inherit;
font-size: var(--f-option-label-size, --text-m);
font-weight: var(--f-option-label-font-weight, 400);
line-height: var(--f-option-label-line-height, 1.4);
margin: 0 0 10px;
-webkit-padding-start: 1.75em;
padding-inline-start: 1.75em;
-webkit-padding-start: inherit;
padding-inline-start: inherit;
margin: 0;
}
.form--light .options-wrapper li, .form--light .bricks-search-form .options-wrapper li, .form--light .brxe-post-comments .options-wrapper li {
position: relative;
}
.form--light input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input), .form--light .bricks-search-form input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input), .form--light .brxe-post-comments input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input) {
width: 0px;
height: 0px;
padding: 0;
margin: 0;
opacity: 0;
position: absolute;
}
.form--light input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus, .form--light .bricks-search-form input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus, .form--light .brxe-post-comments input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus {
outline: none;
}
.form--light input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before, .form--light .bricks-search-form input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before, .form--light .brxe-post-comments input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before {
border-color: var(--f-light-focus-color, var(--primary));
box-shadow: 0 0 0 4px hsl(var(--f-light-focus-hsl, 327 99% 38%) / var(--f-light-focus-color-opacity, 0.25));
outline: 0;
}
.form--light input[type="checkbox"] + label, .form--light .bricks-search-form input[type="checkbox"] + label, .form--light .brxe-post-comments input[type="checkbox"] + label {
background-color: var(--f-light-option-background-color, transparent);
display: inline-block;
color: var(--f-light-label-text-color, var(--neutral-dark));
font-family: inherit;
font-size: var(--f-option-label-size, --text-m);
font-weight: var(--f-option-label-font-weight, 400);
line-height: var(--f-option-label-line-height, 1.4);
margin: 0 0 10px;
-webkit-padding-start: 1.75em;
padding-inline-start: 1.75em;
background-color: unset;
display: block;
position: relative;
margin: 0;
cursor: pointer;
}
.form--light input[type="checkbox"]:hover + label:before, .form--light .bricks-search-form input[type="checkbox"]:hover + label:before, .form--light .brxe-post-comments input[type="checkbox"]:hover + label:before {
background: var(--f-light-option-action-color, var(--primary));
box-shadow: inset 0px 0px 0px 2px transparent;
}
.form--light input[type="checkbox"] + label:before, .form--light .bricks-search-form input[type="checkbox"] + label:before, .form--light .brxe-post-comments input[type="checkbox"] + label:before {
content: "";
display: block;
width: 1.4em;
height: 1.4em;
border: 1px solid var(--f-light-option-border-color, var(--neutral));
border-radius: 0.2em;
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
-webkit-transition: all 0.2s, background 0.2s ease-in-out;
transition: all 0.2s, background 0.2s ease-in-out;
background-color: var(--f-light-option-background-color, transparent);
}
.form--light input[type="checkbox"]:checked + label:before, .form--light .bricks-search-form input[type="checkbox"]:checked + label:before, .form--light .brxe-post-comments input[type="checkbox"]:checked + label:before {
background: var(--primary);
box-shadow: 0 0 0 1px var(--f-light-option-border-color, var(--neutral));
}
.form--light input[type="checkbox"]:checked + label:before, .form--light .bricks-search-form input[type="checkbox"]:checked + label:before, .form--light .brxe-post-comments input[type="checkbox"]:checked + label:before {
background: var(--f-light-option-action-color, var(--primary));
box-shadow: 0 0 0 1px var(--f-light-option-border-color, var(--neutral));
}
.form--light input[type="checkbox"]:checked + label:after, .form--light .bricks-search-form input[type="checkbox"]:checked + label:after, .form--light .brxe-post-comments input[type="checkbox"]:checked + label:after {
content: "";
cursor: pointer;
display: inline-block;
height: 1.5em;
width: 1.5em;
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23ffffff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e") 50% no-repeat;
background-size: 50%;
}
.form--light select, .form--light .bricks-search-form select, .form--light .brxe-post-comments select {
background-image: none;
}
.form--light select:not(:has(+ span)), .form--light .bricks-search-form select:not(:has(+ span)), .form--light .brxe-post-comments select:not(:has(+ span)) {
background-image: linear-gradient(45deg, transparent 50%, var(--f-light-select-arrow-color, var(--neutral)) 0), linear-gradient(135deg, var(--f-light-select-arrow-color, var(--neutral)) 50%, transparent 0);
background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
background-repeat: no-repeat;
background-size: 4px 4px, 4px 4px;
}
.form--light .options-wrapper li + li, .form--light .bricks-search-form .options-wrapper li + li, .form--light .brxe-post-comments .options-wrapper li + li {
margin-block-start: var(--f-option-label-spacing, 0.5em);
}
main:has(.form--light) ~ .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, main:has(.form--light) ~ .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current, main:has(.form--light) ~ .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current, main:has(.form--light) ~ .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover, main:has(.form--light) ~ .xdsoft_datetimepicker .xdsoft_calendar td:hover, main:has(.form--light) ~ .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
background: var(--primary) !important;
}
/* Form Dark */
.form--dark input[type="date"], .form--dark input[type="datetime-local"], .form--dark input[type="month"], .form--dark input[type="password"], .form--dark input[type="search"], .form--dark input[type="time"], .form--dark input[type="week"], .form--dark input[type="email"], .form--dark input[type="number"], .form--dark input[type="tel"], .form--dark input[type="text"], .form--dark input[type="url"], .form--dark select:not([multiple]):not([size]), .form--dark .bricks-search-form input[type="date"], .form--dark .bricks-search-form input[type="datetime-local"], .form--dark .bricks-search-form input[type="month"], .form--dark .bricks-search-form input[type="password"], .form--dark .bricks-search-form input[type="search"], .form--dark .bricks-search-form input[type="time"], .form--dark .bricks-search-form input[type="week"], .form--dark .bricks-search-form input[type="email"], .form--dark .bricks-search-form input[type="number"], .form--dark .bricks-search-form input[type="tel"], .form--dark .bricks-search-form input[type="text"], .form--dark .bricks-search-form input[type="url"], .form--dark .bricks-search-form select:not([multiple]):not([size]), .form--dark .brxe-post-comments input[type="date"], .form--dark .brxe-post-comments input[type="datetime-local"], .form--dark .brxe-post-comments input[type="month"], .form--dark .brxe-post-comments input[type="password"], .form--dark .brxe-post-comments input[type="search"], .form--dark .brxe-post-comments input[type="time"], .form--dark .brxe-post-comments input[type="week"], .form--dark .brxe-post-comments input[type="email"], .form--dark .brxe-post-comments input[type="number"], .form--dark .brxe-post-comments input[type="tel"], .form--dark .brxe-post-comments input[type="text"], .form--dark .brxe-post-comments input[type="url"], .form--dark .brxe-post-comments select:not([multiple]):not([size]) {
height: var(--f-input-height, 3.125rem);
}
.form--dark .input, .form--dark input:not([type="submit"]), .form--dark select, .form--dark textarea, .form--dark .bricks-search-form .input, .form--dark .bricks-search-form input:not([type="submit"]), .form--dark .bricks-search-form select, .form--dark .bricks-search-form textarea, .form--dark .brxe-post-comments .input, .form--dark .brxe-post-comments input:not([type="submit"]), .form--dark .brxe-post-comments select, .form--dark .brxe-post-comments textarea {
background-color: var(--f-dark-input-background, var(--neutral-dark));
border-top-width: var(--f-input-border-top-size, 0.0625rem);
border-right-width: var(--f-input-border-right-size, 0.0625rem);
border-bottom-width: var(--f-input-border-bottom-size, 0.0625rem);
border-left-width: var(--f-input-border-left-size, 0.0625rem);
border-style: var(--f-input-border-style, solid);
border-color: var(--f-dark-input-border-color, var(--neutral-medium));
border-radius: var(--f-input-border-radius, var(--btn-radius));
color: var(--f-dark-input-text-color, var(--neutral-ultra-light));
font-size: var(--f-input-size, --text-m);
font-weight: var(--f-input-font-weight, 400);
line-height: var(--f-input-line-height, 1);
padding: var(--f-input-padding-y, 0.5em) var(--f-input-padding-x, 1em);
-webkit-border-radius: var(--f-input-border-radius, var(--btn-radius));
-moz-border-radius: var(--f-input-border-radius, var(--btn-radius));
-ms-border-radius: var(--f-input-border-radius, var(--btn-radius));
-o-border-radius: var(--f-input-border-radius, var(--btn-radius));
transition: var(--transition-duration) var(--transition-timing) var(--transition-delay);
}
.form--dark .input:hover:not([data-wsf-legal]), .form--dark .input:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark input:not([type="submit"]):hover:not([data-wsf-legal]), .form--dark input:not([type="submit"]):hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark select:hover:not([data-wsf-legal]), .form--dark select:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark textarea:hover:not([data-wsf-legal]), .form--dark textarea:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .bricks-search-form .input:hover:not([data-wsf-legal]), .form--dark .bricks-search-form .input:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .bricks-search-form input:not([type="submit"]):hover:not([data-wsf-legal]), .form--dark .bricks-search-form input:not([type="submit"]):hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .bricks-search-form select:hover:not([data-wsf-legal]), .form--dark .bricks-search-form select:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .bricks-search-form textarea:hover:not([data-wsf-legal]), .form--dark .bricks-search-form textarea:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .brxe-post-comments .input:hover:not([data-wsf-legal]), .form--dark .brxe-post-comments .input:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .brxe-post-comments input:not([type="submit"]):hover:not([data-wsf-legal]), .form--dark .brxe-post-comments input:not([type="submit"]):hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .brxe-post-comments select:hover:not([data-wsf-legal]), .form--dark .brxe-post-comments select:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .brxe-post-comments textarea:hover:not([data-wsf-legal]), .form--dark .brxe-post-comments textarea:hover:enabled:not(:focus):not([data-wsf-legal]) {
background-color: var(--f-dark-input-color-background-hover, var(--neutral-dark));
border-color: var(--f-dark-input-border-color-hover, var(--neutral-semi-dark));
color: var(--f-dark-input-text-color-hover, var(--neutral-ultra-light));
}
.form--dark .input::placeholder, .form--dark input:not([type="submit"])::placeholder, .form--dark select::placeholder, .form--dark textarea::placeholder, .form--dark .bricks-search-form .input::placeholder, .form--dark .bricks-search-form input:not([type="submit"])::placeholder, .form--dark .bricks-search-form select::placeholder, .form--dark .bricks-search-form textarea::placeholder, .form--dark .brxe-post-comments .input::placeholder, .form--dark .brxe-post-comments input:not([type="submit"])::placeholder, .form--dark .brxe-post-comments select::placeholder, .form--dark .brxe-post-comments textarea::placeholder {
color: var(--f-dark-input-placeholder-color, var(--neutral-ultra-light));
opacity: var(--f-dark-input-placeholder-opacity, 0.5);
transition: var(--transition-duration) var(--transition-timing) var(--transition-delay);
}
.form--dark .input:hover::placeholder, .form--dark input:not([type="submit"]):hover::placeholder, .form--dark select:hover::placeholder, .form--dark textarea:hover::placeholder, .form--dark .bricks-search-form .input:hover::placeholder, .form--dark .bricks-search-form input:not([type="submit"]):hover::placeholder, .form--dark .bricks-search-form select:hover::placeholder, .form--dark .bricks-search-form textarea:hover::placeholder, .form--dark .brxe-post-comments .input:hover::placeholder, .form--dark .brxe-post-comments input:not([type="submit"]):hover::placeholder, .form--dark .brxe-post-comments select:hover::placeholder, .form--dark .brxe-post-comments textarea:hover::placeholder {
color: var(--f-dark-input-placeholder-color-hover, var(--neutral-ultra-light));
}
.form--dark .bricks-button, .form--dark .bricks-search-form .bricks-button, .form--dark .brxe-post-comments .bricks-button {
background-color: var(--f-dark-btn-background, var(--primary));
color: var(--f-dark-btn-text-color, var(--primary-ultra-light));
border-style: var(--f-btn-border-style, solid);
border-width: var(--f-btn-border-width, var(--btn-border-width));
border-color: var(--f-dark-btn-border-color, var(--primary));
border-radius: var(--f-btn-border-radius, var(--btn-radius));
-webkit-border-radius: var(--f-btn-border-radius, var(--btn-radius));
-moz-border-radius: var(--f-btn-border-radius, var(--btn-radius));
-ms-border-radius: var(--f-btn-border-radius, var(--btn-radius));
-o-border-radius: var(--f-btn-border-radius, var(--btn-radius));
font-size: var(--f-btn-text-size, --text-m);
font-weight: var(--f-btn-font-weight, 400);
line-height: var(--f-btn-line-height, 1);
padding: var(--f-btn-padding-y, 0.75em) var(--f-btn-padding-x, 1.5em);
margin-block-start: var(--f-btn-margin-top, 0);
text-align: center;
-webkit-text-decoration: var(--f-btn-text-decoration, none);
text-decoration: var(--f-btn-text-decoration, none);
text-transform: var(--f-btn-text-transform, none);
transition: all var(--btn-transition-duration) ease;
min-height: var(--f-input-height, 3.125rem);
}
.form--dark .bricks-button:hover, .form--dark .bricks-search-form .bricks-button:hover, .form--dark .brxe-post-comments .bricks-button:hover {
background-color: var(--f-dark-btn-background-hover, var(--primary-hover));
color: var(--f-dark-btn-text-color-hover, var(--primary-ultra-light));
border-color: var(--f-dark-btn-border-color-hover, var(--primary-hover));
}
.form--dark .bricks-button.bricks-background-secondary, .form--dark .bricks-search-form .bricks-button.bricks-background-secondary, .form--dark .brxe-post-comments .bricks-button.bricks-background-secondary {
background-color: var(--f-dark-secondary-btn-background-color, var(--neutral-light));
color: var(--f-dark-secondary-btn-text-color, var(--neutral-ultra-dark));
border-color: var(--f-dark-secondary-btn-background-color, var(--neutral-light));
}
.form--dark .bricks-button.bricks-background-secondary:hover, .form--dark .bricks-search-form .bricks-button.bricks-background-secondary:hover, .form--dark .brxe-post-comments .bricks-button.bricks-background-secondary:hover {
background-color: var(--f-dark-secondary-btn-background-color-hover, var(--neutral-ultra-light));
color: var(--f-dark-secondary-btn-text-color-hover, var(--neutral-ultra-dark));
border-color: var(--f-dark-secondary-btn-background-color-hover, var(--neutral-ultra-light));
}
.form--dark .form-group, .form--dark .bricks-search-form .form-group, .form--dark .brxe-post-comments .form-group {
padding: 0;
}
.form--dark .form-group:not(.submit-button-wrapper), .form--dark .bricks-search-form .form-group:not(.submit-button-wrapper), .form--dark .brxe-post-comments .form-group:not(.submit-button-wrapper) {
margin-block-end: var(--f-field-margin-bottom, 1.5em);
}
.form--dark .message, .form--dark .bricks-search-form .message, .form--dark .brxe-post-comments .message {
margin-block-start: var(--f-field-margin-bottom, 1.5em);
}
.form--dark label:not(.ff-el-form-check-label), .form--dark div.label, .form--dark .bricks-search-form label:not(.ff-el-form-check-label), .form--dark .bricks-search-form div.label, .form--dark .brxe-post-comments label:not(.ff-el-form-check-label), .form--dark .brxe-post-comments div.label {
background-color: var(--f-dark-label-background-color, transparent);
color: var(--f-dark-label-text-color, var(--neutral-ultra-light));
font-size: var(--f-label-size, --text-m);
font-weight: var(--f-label-font-weight, 400);
line-height: var(--f-label-line-height, 1);
margin-block-end: var(--f-label-margin-bottom, 0.5em);
text-transform: var(--f-label-text-transform, none);
padding: var(--f-label-padding-y, 0) var(--f-label-padding-x, 0);
}
.form--dark .required:after, .form--dark .bricks-search-form .required:after, .form--dark .brxe-post-comments .required:after {
color: var(--f-dark-required-color, var(--action));
}
.form--dark input[type="file"], .form--dark .bricks-search-form input[type="file"], .form--dark .brxe-post-comments input[type="file"] {
padding: 0;
}
.form--dark .choose-files, .form--dark .bricks-search-form .choose-files, .form--dark .brxe-post-comments .choose-files {
padding: var(--f-input-padding-y 1em, 0.5em 1em);
color: var(--f-dark-upload-btn-text-color, var(--neutral-ultra-dark));
font-size: var(--f-label-size, --text-m);
font-weight: var(--f-label-font-weight, 400);
line-height: var(--f-label-line-height, 1);
background: var(--f-dark-upload-btn-background-color, var(--neutral-light));
transition: all var(--btn-transition-duration) ease;
}
.form--dark .choose-files:hover, .form--dark .bricks-search-form .choose-files:hover, .form--dark .brxe-post-comments .choose-files:hover {
color: var(--f-dark-upload-btn-text-color-hover, var(--neutral-ultra-dark));
background: var(--f-dark-upload-btn-background-color-hover, var(--neutral-ultra-light));
}
.form--dark .file-result.show, .form--dark .bricks-search-form .file-result.show, .form--dark .brxe-post-comments .file-result.show {
font-size: var(--f-label-size, --text-m);
font-weight: var(--f-label-font-weight, 400);
line-height: var(--f-label-line-height, 1);
transition: all var(--btn-transition-duration) ease;
}
.form--dark .file-result.show .remove:hover, .form--dark .bricks-search-form .file-result.show .remove:hover, .form--dark .brxe-post-comments .file-result.show .remove:hover {
background-color: var(--f-dark-btn-background-hover, var(--primary-hover));
color: var(--f-dark-btn-text-color-hover, var(--primary-ultra-light));
border-color: var(--f-dark-btn-border-color-hover, var(--primary-hover));
}
.form--dark input[type="radio"], .form--dark .bricks-search-form input[type="radio"], .form--dark .brxe-post-comments input[type="radio"] {
accent-color: var(--f-dark-option-action-color, var(--primary));
}
.form--dark input[type="radio"] + label, .form--dark .bricks-search-form input[type="radio"] + label, .form--dark .brxe-post-comments input[type="radio"] + label {
background-color: var(--f-dark-option-background-color, transparent);
display: inline-block;
color: var(--f-dark-label-text-color, var(--neutral-ultra-light));
font-family: inherit;
font-size: var(--f-option-label-size, --text-m);
font-weight: var(--f-option-label-font-weight, 400);
line-height: var(--f-option-label-line-height, 1.4);
margin: 0 0 10px;
-webkit-padding-start: 1.75em;
padding-inline-start: 1.75em;
-webkit-padding-start: inherit;
padding-inline-start: inherit;
margin: 0;
}
.form--dark .options-wrapper li, .form--dark .bricks-search-form .options-wrapper li, .form--dark .brxe-post-comments .options-wrapper li {
position: relative;
}
.form--dark input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input), .form--dark .bricks-search-form input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input), .form--dark .brxe-post-comments input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input) {
width: 0px;
height: 0px;
padding: 0;
margin: 0;
opacity: 0;
position: absolute;
}
.form--dark input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus, .form--dark .bricks-search-form input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus, .form--dark .brxe-post-comments input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus {
outline: none;
}
.form--dark input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before, .form--dark .bricks-search-form input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before, .form--dark .brxe-post-comments input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before {
border-color: var(--f-dark-focus-color, var(--primary));
box-shadow: 0 0 0 4px hsl(var(--f-dark-focus-hsl, 327 99% 38%) / var(--f-dark-focus-color-opacity, 0.25));
outline: 0;
}
.form--dark input[type="checkbox"] + label, .form--dark .bricks-search-form input[type="checkbox"] + label, .form--dark .brxe-post-comments input[type="checkbox"] + label {
background-color: var(--f-dark-option-background-color, transparent);
display: inline-block;
color: var(--f-dark-label-text-color, var(--neutral-ultra-light));
font-family: inherit;
font-size: var(--f-option-label-size, --text-m);
font-weight: var(--f-option-label-font-weight, 400);
line-height: var(--f-option-label-line-height, 1.4);
margin: 0 0 10px;
-webkit-padding-start: 1.75em;
padding-inline-start: 1.75em;
background-color: unset;
display: block;
position: relative;
margin: 0;
cursor: pointer;
}
.form--dark input[type="checkbox"]:hover + label:before, .form--dark .bricks-search-form input[type="checkbox"]:hover + label:before, .form--dark .brxe-post-comments input[type="checkbox"]:hover + label:before {
background: var(--f-dark-option-action-color, var(--primary));
box-shadow: inset 0px 0px 0px 2px transparent;
}
.form--dark input[type="checkbox"] + label:before, .form--dark .bricks-search-form input[type="checkbox"] + label:before, .form--dark .brxe-post-comments input[type="checkbox"] + label:before {
content: "";
display: block;
width: 1.4em;
height: 1.4em;
border: 1px solid var(--f-dark-option-border-color, var(--neutral));
border-radius: 0.2em;
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
-webkit-transition: all 0.2s, background 0.2s ease-in-out;
transition: all 0.2s, background 0.2s ease-in-out;
background-color: var(--f-dark-option-background-color, transparent);
}
.form--dark input[type="checkbox"]:checked + label:before, .form--dark .bricks-search-form input[type="checkbox"]:checked + label:before, .form--dark .brxe-post-comments input[type="checkbox"]:checked + label:before {
background: var(--primary);
box-shadow: 0 0 0 1px var(--f-dark-option-border-color, var(--neutral));
}
.form--dark input[type="checkbox"]:checked + label:before, .form--dark .bricks-search-form input[type="checkbox"]:checked + label:before, .form--dark .brxe-post-comments input[type="checkbox"]:checked + label:before {
background: var(--f-dark-option-action-color, var(--primary));
box-shadow: 0 0 0 1px var(--f-dark-option-border-color, var(--neutral));
}
.form--dark input[type="checkbox"]:checked + label:after, .form--dark .bricks-search-form input[type="checkbox"]:checked + label:after, .form--dark .brxe-post-comments input[type="checkbox"]:checked + label:after {
content: "";
cursor: pointer;
display: inline-block;
height: 1.5em;
width: 1.5em;
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23ffffff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e") 50% no-repeat;
background-size: 50%;
}
.form--dark select, .form--dark .bricks-search-form select, .form--dark .brxe-post-comments select {
background-image: none;
}
.form--dark select:not(:has(+ span)), .form--dark .bricks-search-form select:not(:has(+ span)), .form--dark .brxe-post-comments select:not(:has(+ span)) {
background-image: linear-gradient(45deg, transparent 50%, var(--f-dark-select-arrow-color, var(--neutral-ultra-light)) 0), linear-gradient(135deg, var(--f-dark-select-arrow-color, var(--neutral-ultra-light)) 50%, transparent 0);
background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
background-repeat: no-repeat;
background-size: 4px 4px, 4px 4px;
}
.form--dark .options-wrapper li + li, .form--dark .bricks-search-form .options-wrapper li + li, .form--dark .brxe-post-comments .options-wrapper li + li {
margin-block-start: var(--f-option-label-spacing, 0.5em);
}
main:has(.form--dark) ~ .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, main:has(.form--dark) ~ .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current, main:has(.form--dark) ~ .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current, main:has(.form--dark) ~ .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover, main:has(.form--dark) ~ .xdsoft_datetimepicker .xdsoft_calendar td:hover, main:has(.form--dark) ~ .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
background: var(--primary) !important;
}
Leave a Reply