From 22b5f73813fa8c87c157b060f7d408f7261bf678 Mon Sep 17 00:00:00 2001 From: Sarmaged <3858245+Sarmaged@users.noreply.github.com> Date: Fri, 10 Jan 2025 01:31:33 +0300 Subject: [PATCH 1/4] release: version 2025.1.10 feat: fonts fix: + selectors weight --- form.css | 4 ++-- package.json | 2 +- src/button.css | 4 ++-- src/file.css | 6 +++--- src/input.css | 4 ++-- src/select.css | 4 ++-- src/switch.css | 4 ++-- src/textarea.css | 4 ++-- src/validate.css | 12 ++++++------ src/var.css | 2 +- 10 files changed, 23 insertions(+), 23 deletions(-) diff --git a/form.css b/form.css index 9d0db69..ecc0ed5 100644 --- a/form.css +++ b/form.css @@ -1,3 +1,3 @@ -/*! style-forge.form 2025.1.8 | MIT License | https://github.com/Style-Forge/form */ +/*! style-forge.form 2025.1.10 | MIT License | https://github.com/Style-Forge/form */ -:root{--sf-form-c-white:0 0% 100%;--sf-form-c-info:200 100% 60%;--sf-form-c-error:0 100% 60%;--sf-form-c-success:0 100% 60%;--sf-form-c-warning:39 100% 50%;--sf-form-c-bg:0 0% 90%;--sf-form-c-bd:0 0% 10%;--sf-form-c-loading:0 0% 10%;--sf-form-c-txt:0 0% 10%;--sf-form-dark-c-white:0 0% 100%;--sf-form-dark-c-info:219 79% 66%;--sf-form-dark-c-error:0 100% 65%;--sf-form-dark-c-success:0 100% 65%;--sf-form-dark-c-warning:39 100% 60%;--sf-form-dark-c-bg:0 0% 20%;--sf-form-dark-c-bd:0 0% 100%;--sf-form-dark-c-loading:0 0% 100%;--sf-form-dark-c-txt:0 0% 90%;--sf-form-radius:3px;--sf-form-fz:0.9375rem;--sf-form-p-input-block:0.5em;--sf-form-p-input-inline:0.5em;--sf-form-switch-size:1rem;--sf-form-ff:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';--sf-form-fz-small:0.75rem;--sf-lh-normal:1.1875;--sf-disabled:0.4}html[data-theme='dark'],html.dark{color-scheme:dark;--sf-form-c-white:var(--sf-form-dark-c-white);--sf-form-c-bg:var(--sf-form-dark-c-bg);--sf-form-c-error:var(--sf-form-dark-c-error);--sf-form-c-success:var(--sf-form-dark-c-success);--sf-form-c-warning:var(--sf-form-dark-c-warning);--sf-form-c-info:var(--sf-form-dark-c-info);--sf-form-c-bd:var(--sf-form-dark-c-bd);--sf-form-c-loading:var(--sf-form-dark-c-loading);--sf-form-c-txt:var(--sf-form-dark-c-txt)}@media (prefers-color-scheme:dark){html[data-theme='auto'],html.auto{color-scheme:light dark;--sf-form-c-white:var(--sf-form-dark-c-white);--sf-form-c-bg:var(--sf-form-dark-c-bg);--sf-form-c-error:var(--sf-form-dark-c-error);--sf-form-c-success:var(--sf-form-dark-c-success);--sf-form-c-warning:var(--sf-form-dark-c-warning);--sf-form-c-info:var(--sf-form-dark-c-info);--sf-form-c-bd:var(--sf-form-dark-c-bd);--sf-form-c-loading:var(--sf-form-dark-c-loading);--sf-form-c-txt:var(--sf-form-dark-c-txt)}}.sf-input *,.sf-input *::before,.sf-input *::after{box-sizing:inherit}.sf-input[type='image'],.sf-input[type='range']{cursor:pointer;border:0;padding:0}.sf-input{cursor:auto;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-transform:none;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border-style:solid;border-color:hsl(var(--sf-form-c-bd)/20%);border-width:0 0 1px;border-radius:0;outline:none;width:100%;height:32px;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);box-sizing:border-box;vertical-align:top}.sf-input[type='range']{width:100%}.sf-input[type='image']{width:auto;height:auto}.sf-input[type='time'],.sf-input[type='week'],.sf-input[type='month'],.sf-input[type='date'],.sf-input[type='datetime-local']{-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:start}.sf-input::-webkit-date-and-time-value{text-align:start}.sf-input::-webkit-calendar-picker-indicator{cursor:pointer;outline:none;opacity:0.5}.sf-input:hover::-webkit-calendar-picker-indicator{opacity:1}.sf-input::-moz-placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-input:-ms-input-placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-input::placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-input:focus{border-color:transparent transparent hsl(var(--sf-form-c-info));outline:none}.sf-input[type='color']:focus-visible,.sf-input[type='image']:focus-visible,.sf-input[type='range']:focus-visible{outline:2px solid hsl(var(--sf-form-c-info));outline-offset:2px}.sf-input:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}html.var .sf-input{font-size:15px;font-family:Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2);border-color:hsla(0,0%,10%,0.2);padding:8px}html.var .sf-input::-moz-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input:-ms-input-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input::placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input:-moz-placeholder-shown{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:-ms-input-placeholder{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:placeholder-shown{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:focus{border-color:hsl(200,100%,60%)}html.var .sf-input[type='image'],html.var .sf-input[type='range']{background:none}html.var .sf-input[type='color']:focus-visible,html.var .sf-input[type='image']:focus-visible,html.var .sf-input[type='range']:focus-visible{outline:2px solid hsl(200,100%,60%)}html.var .sf-input:disabled{opacity:0.4}.sf-button{cursor:pointer;display:inline-block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);text-align:center;text-decoration:none;text-transform:none;border-radius:var(--sf-form-radius);height:32px;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);box-sizing:border-box;vertical-align:baseline}a.sf-button:not([href]),.sf-button:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-button:focus-visible{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}html.var .sf-button{font-size:15px;font-family:Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);border-radius:3px;padding:8px}html.var a.sf-button:not([href]),html.var .sf-button:disabled{opacity:0.4}html.var .sf-button:focus-visible{outline:1px solid hsl(200,100%,60%)}label.sf-radio,label.sf-checkbox{box-sizing:border-box}label.sf-radio *,label.sf-radio *::before,label.sf-radio *::after,label.sf-checkbox *,label.sf-checkbox *::before,label.sf-checkbox *::after{box-sizing:inherit}label.sf-radio input,label.sf-checkbox input,label.sf-radio input::before,label.sf-checkbox input::before{width:16px;height:16px}label.sf-radio input,label.sf-radio input~*,label.sf-checkbox input,label.sf-checkbox input~*{cursor:pointer}label.sf-radio input:disabled,label.sf-radio input:disabled~*,label.sf-checkbox input:disabled,label.sf-checkbox input:disabled~*{cursor:not-allowed;opacity:var(--sf-disabled)}label.sf-radio input,label.sf-checkbox input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;margin:0 0 -2px;padding:0;vertical-align:baseline}label.sf-radio input::before,label.sf-checkbox input::before{top:0;left:0;position:absolute;width:16px;height:16px;content:'';background-color:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%)}label.sf-radio input::after,label.sf-checkbox input::after{top:3px;left:3px;right:3px;bottom:3px;position:absolute;content:''}label.sf-radio input:checked::before,label.sf-checkbox input:checked::before{border-color:hsl(var(--sf-form-c-info))}label.sf-radio input:checked::after,label.sf-checkbox input:checked::after{background-color:hsl(var(--sf-form-c-info))}label.sf-radio input::before,label.sf-radio input::after{border-radius:50%}.sf-radio input:focus-visible,.sf-checkbox input:focus-visible{border-color:transparent;outline:2px solid hsl(var(--sf-form-c-info));outline-offset:2px}.sf-radio input:focus-visible{border-radius:50%}html.var label.sf-radio input:disabled,html.var label.sf-radio input:disabled~*,html.var label.sf-checkbox input:disabled,html.var label.sf-checkbox input:disabled~*{opacity:0.4}html.var label.sf-radio input::before,html.var label.sf-checkbox input::before{border-color:hsla(0,0%,10%,0.2)}html.var label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible{outline-color:hsl(200,100%,60%)}.sf-select,.sf-select option{font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:var(--sf-lh-normal);text-transform:none}.sf-select{padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);cursor:pointer;background:hsl(var(--sf-form-c-bg)/20%);border-width:1px;border-style:solid;border-color:hsl(var(--sf-form-c-bd)/20%);border-radius:0;width:100%;height:auto;overflow:auto}.sf-select option{padding:calc(var(--sf-form-p-input-block) / 2) var(--sf-form-p-input-inline)}.sf-select optgroup{padding:calc(var(--sf-form-p-input-block) / 2) 0 0}.sf-select:not([multiple]){height:32px;padding:0 var(--sf-form-p-input-inline);border-width:0 0 1px}.sf-select::-ms-expand{border:0;background:none}.sf-select:focus-visible{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}.sf-select:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}html.var .sf-select,html.var .sf-select option{font-size:15px;font-family:Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'}html.var .sf-select:not([multiple]){padding:0 0 0 8px}html.var .sf-select{padding:8px 0 8px 8px;color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2);border-color:hsla(0,0%,10%,0.2)}html.var .sf-select:disabled{opacity:0.4}.sf-textarea{font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1.499535;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);width:100%;max-width:100%;min-height:calc((1.499535em + 2px + var(--sf-form-p-input-block)) * 4);padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);border-radius:var(--sf-form-radius);resize:vertical;overflow:auto;box-sizing:border-box}.sf-textarea::-moz-placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-textarea:-ms-input-placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-textarea::placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-textarea:disabled{cursor:not-allowed;resize:none;opacity:var(--sf-disabled)}.sf-textarea:focus-visible{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}html.var .sf-textarea{font-size:15px;font-family:Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2);border:1px solid hsla(0,0%,10%,0.2);min-height:calc((1.499535em + 2px + 0.5em) * 4);padding:8px;border-radius:3px}html.var .sf-textarea::-moz-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea:-ms-input-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea::placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea:disabled{opacity:0.4}html.var .sf-textarea:focus:valid{border-color:hsl(200,100%,60%)}.sf-input[type='color']{cursor:pointer;width:32px;height:32px;background:conic-gradient(from 0,yellow,darkorange,red,fuchsia,blue,cyan,lime,yellowgreen,yellow);padding:0;border:0;border-radius:50%}.sf-input[type='color']:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-input[type='color']::-webkit-color-swatch-wrapper{padding:3px}.sf-input[type='color']::-webkit-color-swatch{border:2px solid hsl(var(--sf-form-c-white));border-radius:50%}.sf-input[type='color']::-moz-color-swatch{border:2px solid hsl(var(--sf-form-c-white));border-radius:50%}.sf-input[type='color']:focus-visible{border-radius:50%}html.var .sf-input[type='color']:disabled{opacity:0.4}html.var .sf-input[type='color']::-webkit-color-swatch{border:2px solid hsl(0,0%,100%)}html.var .sf-input[type='color']::-moz-color-swatch{border:2px solid hsl(0,0%,100%)}.sf-input[type='file']{cursor:pointer;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;border:0;width:auto;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sf-input[type='file']::-webkit-file-upload-button{cursor:pointer;display:inline-block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-align:center;text-transform:none;text-decoration:none;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);height:32px;border-radius:var(--sf-form-radius)}.sf-input[type='file']::file-selector-button{cursor:pointer;display:inline-block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-align:center;text-transform:none;text-decoration:none;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);height:32px;border-radius:var(--sf-form-radius)}.sf-input[type='file']:focus-visible{outline:none}.sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}.sf-input[type='file']:focus-visible::file-selector-button{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}.sf-input[type='file']:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-input[type='file']:disabled::-webkit-file-upload-button{cursor:not-allowed}.sf-input[type='file']:disabled::file-selector-button{cursor:not-allowed}html.var .sf-input[type='file']{font-size:15px;font-family:Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';padding:0}html.var .sf-input[type='file']::-webkit-file-upload-button{font-size:15px;font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);border-radius:3px}html.var .sf-input[type='file']::file-selector-button{font-size:15px;font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);border-radius:3px}html.var .sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline:1px solid hsl(200,100%,60%)}html.var .sf-input[type='file']:focus-visible::file-selector-button{outline:1px solid hsl(200,100%,60%)}html.var .sf-input[type='file']:disabled{opacity:0.4}.sf-switch{box-sizing:border-box;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-transform:none}.sf-switch.multiple *,.sf-switch.multiple *::before,.sf-switch.multiple *::after{box-sizing:inherit}label.sf-switch input[type='checkbox']{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:none;padding:0;margin:0;width:calc(var(--sf-form-switch-size) * 2);height:var(--sf-form-switch-size);vertical-align:text-top}label.sf-switch input[type='checkbox']::before{cursor:pointer;top:0;left:0;position:absolute;width:calc(var(--sf-form-switch-size) * 2);height:var(--sf-form-switch-size);content:'';background:hsl(var(--sf-form-c-bd)/20%);border-radius:calc(var(--sf-form-switch-size) / 2)}label.sf-switch input[type='checkbox']::after{cursor:pointer;top:2px;left:2px;position:absolute;width:calc(var(--sf-form-switch-size) - 2px * 2);height:calc(var(--sf-form-switch-size) - 2px * 2);content:'';background:hsl(var(--sf-form-c-white));border-radius:calc(var(--sf-form-switch-size) / 2);box-shadow:0 0 0 1px hsl(var(--sf-form-c-white));transition:transform 0.05s ease-in}label.sf-switch input[type='checkbox']:checked::before{background:hsl(var(--sf-form-c-info))}label.sf-switch input[type='checkbox']:checked::after{transform:translate3d(var(--sf-form-switch-size),0,0)}label.sf-switch input[type='radio']~*,label.sf-switch input[type='checkbox']~*{cursor:pointer}.sf-switch.multiple .sf-switch-toggle{display:inline-block;background:hsl(var(--sf-form-c-bg)/20%);box-shadow:1px 2px 8px 0 hsl(var(--sf-form-c-bd)/15%)}.sf-switch.multiple .sf-switch-toggle *{display:inline-block}.sf-switch.multiple .sf-switch-toggle label{position:relative}.sf-switch.multiple .sf-switch-toggle span{font-size:var(--sf-form-fz-small);text-align:center;min-width:32px;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);background:hsl(var(--sf-form-c-bd)/5%)}.sf-switch.multiple input[type='checkbox'],.sf-switch.multiple input[type='radio']{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;top:0;left:0;right:0;bottom:0;position:absolute;z-index:1;width:100%;height:100%;padding:0;margin:0;border:0;opacity:0}.sf-switch.multiple input[type='checkbox']::before,.sf-switch.multiple input[type='radio']::before,.sf-switch.multiple input[type='checkbox']::after,.sf-switch.multiple input[type='radio']::after{content:none}.sf-switch.multiple input[type='checkbox']:checked~span,.sf-switch.multiple input[type='radio']:checked~span{color:hsl(var(--sf-form-c-white));background:hsl(var(--sf-form-c-info))}.sf-switch.multiple.vert .sf-switch-toggle{-ms-flex-flow:column;flex-flow:column}.sf-switch.multiple .sf-switch-description{font-size:var(--sf-form-fz-small);margin:0.5em 0 0;padding:0 0 0.5em}.sf-switch input[type='checkbox']:disabled,.sf-switch input[type='checkbox']:disabled::after,.sf-switch input[type='checkbox']:disabled::before,.sf-switch input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='checkbox']:disabled,.sf-switch.multiple input[type='radio']:disabled,.sf-switch.multiple input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='radio']:disabled~*{cursor:not-allowed}.sf-switch input[type='checkbox']:disabled,.sf-switch input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='radio']:disabled~*{opacity:var(--sf-disabled)}.sf-switch input[type='checkbox']:focus-visible,.sf-switch input[type='radio']:focus-visible{border-color:transparent;outline:2px solid hsl(var(--sf-form-c-info))}.sf-switch:not(.multiple) input[type='checkbox']:focus-visible,.sf-switch:not(.multiple) input[type='radio']:focus-visible{border-radius:calc(var(--sf-form-switch-size) / 2)}html.var .sf-switch{font-size:15px;font-family:Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'}html.var label.sf-switch input[type='checkbox']{width:16px;height:16px}html.var label.sf-switch input[type='checkbox']::before{width:16px;height:16px;background:hsla(0,0%,10%,0.2);border-radius:8px}html.var label.sf-switch input[type='checkbox']::after{width:28px;height:28px;background:hsl(0,0%,100%);border-radius:8px;box-shadow:0 0 0 1px hsl(0,0%,100%)}html.var label.sf-switch input[type='checkbox']:checked::before{background:hsl(200,100%,60%)}html.var .sf-switch.multiple .sf-switch-toggle{background:hsla(0,0%,90%,0.2);box-shadow:1px 2px 8px 0 hsla(0,0%,10%,0.15)}html.var .sf-switch.multiple .sf-switch-toggle span{font-size:12px;padding:8px;background:hsla(0,0%,10%,0.1)}html.var .sf-switch.multiple input[type='checkbox']:checked~span,html.var .sf-switch.multiple input[type='radio']:checked~span{color:hsl(0,0%,100%);background:hsl(200,100%,60%)}html.var .sf-switch.multiple .sf-switch-description{font-size:12px}html.var .sf-switch input[type='checkbox']:disabled~*,html.var .sf-switch.multiple input[type='checkbox']:disabled~*,html.var .sf-switch.multiple input[type='radio']:disabled~*{opacity:0.4}html.var .sf-switch input[type='checkbox']:focus-visible,html.var .sf-switch input[type='radio']:focus-visible{outline:2px solid hsl(200,100%,60%)}html.var .sf-switch:not(.multiple) input[type='checkbox']:focus-visible,html.var .sf-switch:not(.multiple) input[type='radio']:focus-visible{border-radius:8px}@keyframes Loading{from{background-position:0 0}to{background-position:28px 0}}a.sf-loading.sf-button:not([href]),.sf-loading:disabled,.sf-loading.sf-button:disabled,.sf-loading.sf-input:not([type='color']):disabled{--c1:transparent;--c2:hsl(var(--sf-form-c-loading)/5%);cursor:progress;background:repeating-linear-gradient(45deg,var(--c1),var(--c1) 10px,var(--c2) 10px,var(--c2) 20px);background-size:28px 100%;animation:Loading .3s linear infinite}html.var a.sf-loading.sf-button:not([href]),html.var .sf-loading:disabled,html.var .sf-loading.sf-button:disabled,html.var .sf-loading.sf-input:not([type='color']):disabled{background:repeating-linear-gradient(45deg,transparent,transparent 10px,hsla(0,0%,10%,0.05) 10px,hsla(0,0%,10%,0.05) 20px)}.sf-description,.sf-invalid,.sf-valid{display:none;color:hsl(var(--sf-form-c-txt)/40%);font-size:var(--sf-form-fz-small);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-transform:none;margin:0.5em 0 0;padding:0 0 0.5em}.sf-description{display:block}.sf-invalid{color:hsl(var(--sf-form-c-error))}.sf-valid:not(.sf-description){color:hsl(var(--sf-form-c-txt))}.show.sf-description,.show.sf-invalid,.show.sf-valid{display:block}.hide.sf-description,.hide.sf-invalid,.hide.sf-valid{display:none}.validates:focus:invalid~.sf-invalid,.validates:focus:valid~.sf-valid,.validates:focus:valid~.sf-description.sf-valid{display:block}.validates:focus:invalid~.validates~.sf-invalid,.validates:focus:valid~.validates~.sf-valid,.validates:focus:valid~.validates~.sf-description.sf-valid{display:none}.validates:focus~.sf-description{display:none}.validates:focus~.validates~.sf-description{display:block}.error:not(:disabled)+.sf-invalid,.error:not(:disabled)+.sf-valid+.sf-invalid,.error:not(:disabled)+.sf-description+.sf-invalid{display:block !important}.error:not(:disabled)+.sf-invalid+.sf-valid,.error:not(:disabled)+.sf-invalid+.sf-description,.error:not(:disabled)+.sf-description,.error:not(:disabled)+.sf-description+.sf-valid,.error:not(:disabled)+.sf-valid,.error:not(:disabled)+.sf-valid+.sf-description{display:none !important}.validates input[type='checkbox']~.sf-description{display:none}.validates input[type='checkbox']:invalid~.sf-invalid{display:block}.validates input[type='checkbox']:valid~.sf-valid{display:block}.validates:required:invalid:not(:focus){border-bottom-color:hsl(var(--sf-form-c-warning))}.validates:required:invalid:not(:disabled){border-bottom-color:hsl(var(--sf-form-c-warning))}.validates input[type='radio']:invalid::before,.validates input[type='checkbox']:invalid::before{border-color:hsl(var(--sf-form-c-error))}.error:not(:disabled),.validates:required:invalid:focus{border-bottom-color:hsl(var(--sf-form-c-error));outline:none}label.validates.sf-switch .sf-description,label.validates.sf-switch .sf-valid,label.validates.sf-switch .sf-invalid,label.validates.sf-checkbox .sf-description,label.validates.sf-checkbox .sf-valid,label.validates.sf-checkbox .sf-invalid{width:100%;line-height:var(--sf-lh-normal)}form.validates:invalid .sf-button[type='submit']{cursor:not-allowed;text-decoration:none;opacity:var(--sf-disabled);-webkit-text-fill-color:hsl(var(--sf-form-c-txt))}html.var .sf-description,html.var .sf-invalid,html.var .sf-valid{color:hsla(0,0%,10%,0.4);font-size:12px;font-family:Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'}html.var label.validates.sf-switch .sf-description,html.var label.validates.sf-switch .sf-valid,html.var label.validates.sf-switch .sf-invalid,html.var label.validates.sf-checkbox .sf-description,html.var label.validates.sf-checkbox .sf-valid,html.var label.validates.sf-checkbox .sf-invalid{line-height:1.1875}html.var .sf-invalid{color:hsl(0,100%,60%)}html.var .error:not(:disabled){border-bottom-color:hsl(0,100%,60%)}html.var .validates:invalid:required{border-bottom-color:hsl(39,100%,50%)}html.var .validates:invalid:focus{border-bottom-color:hsl(0,100%,60%)}html.var[data-theme='dark'] .sf-select::-ms-expand,html.var.dark .sf-select::-ms-expand{color:hsl(0,0%,90%)}html.var[data-theme='dark'] .sf-input[type='file']::-webkit-file-upload-button, html.var.dark .sf-input[type='file']::-webkit-file-upload-button{color:hsl(0,0%,90%);background-color:hsla(0,0%,20%,0.2);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='file']::file-selector-button,html.var.dark .sf-input[type='file']::file-selector-button{color:hsl(0,0%,90%);background-color:hsla(0,0%,20%,0.2);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='file']:focus-visible::-webkit-file-upload-button, html.var.dark .sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-input[type='file']:focus-visible::file-selector-button,html.var.dark .sf-input[type='file']:focus-visible::file-selector-button{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-button,html.var[data-theme='dark'] .sf-input,html.var[data-theme='dark'] .sf-textarea,html.var[data-theme='dark'] .sf-select,html.var[data-theme='dark'] option,html.var.dark .sf-button,html.var.dark .sf-input,html.var.dark .sf-textarea,html.var.dark .sf-select,html.var.dark option{color:hsl(0,0%,90%);background-color:hsl(0,0%,20%);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-description,html.var[data-theme='dark'] .sf-valid,html.var.dark .sf-description,html.var.dark .sf-valid{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-invalid,html.var.dark .sf-invalid{color:hsl(0,100%,65%)}html.var[data-theme='dark'] .sf-button:focus-visible,html.var[data-theme='dark'] label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var[data-theme='dark'] label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible,html.var[data-theme='dark'] .sf-input:focus,html.var[data-theme='dark'] .sf-input[type='color']:focus-visible,html.var[data-theme='dark'] .sf-input[type='image']:focus-visible,html.var[data-theme='dark'] .sf-input[type='range']:focus-visible,html.var[data-theme='dark'] .sf-textarea:focus-visible,html.var[data-theme='dark'] .sf-select:focus-visible,html.var.dark .sf-button:focus-visible,html.var.dark label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var.dark label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible,html.var.dark .sf-input:focus,html.var.dark .sf-input[type='color']:focus-visible,html.var.dark .sf-input[type='image']:focus-visible,html.var.dark .sf-input[type='range']:focus-visible,html.var.dark .sf-textarea:focus-visible,html.var.dark .sf-select:focus-visible{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-input[type='color']::-webkit-color-swatch,html.var.dark .sf-input[type='color']::-webkit-color-swatch{border-color:hsl(0,0%,100%)}html.var[data-theme='dark'] .sf-input[type='color']::-moz-color-swatch,html.var.dark .sf-input[type='color']::-moz-color-swatch{border-color:hsl(0,0%,100%)}html.var[data-theme='dark'] .sf-input,html.var.dark .sf-input{border-color:transparent transparent hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input::-moz-placeholder, html.var[data-theme='dark'] .sf-textarea::-moz-placeholder, html.var.dark .sf-input::-moz-placeholder, html.var.dark .sf-textarea::-moz-placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input:-ms-input-placeholder, html.var[data-theme='dark'] .sf-textarea:-ms-input-placeholder, html.var.dark .sf-input:-ms-input-placeholder, html.var.dark .sf-textarea:-ms-input-placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input::placeholder,html.var[data-theme='dark'] .sf-textarea::placeholder,html.var.dark .sf-input::placeholder,html.var.dark .sf-textarea::placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input:-moz-placeholder-shown, html.var.dark .sf-input:-moz-placeholder-shown{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input:-ms-input-placeholder, html.var.dark .sf-input:-ms-input-placeholder{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input:placeholder-shown,html.var.dark .sf-input:placeholder-shown{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='image'],html.var[data-theme='dark'] .sf-input[type='range'],html.var.dark .sf-input[type='image'],html.var.dark .sf-input[type='range']{background:none} +:root{--sf-form-c-white:0 0% 100%;--sf-form-c-info:200 100% 60%;--sf-form-c-error:0 100% 60%;--sf-form-c-success:0 100% 60%;--sf-form-c-warning:39 100% 50%;--sf-form-c-bg:0 0% 90%;--sf-form-c-bd:0 0% 10%;--sf-form-c-loading:0 0% 10%;--sf-form-c-txt:0 0% 10%;--sf-form-dark-c-white:0 0% 100%;--sf-form-dark-c-info:219 79% 66%;--sf-form-dark-c-error:0 100% 65%;--sf-form-dark-c-success:0 100% 65%;--sf-form-dark-c-warning:39 100% 60%;--sf-form-dark-c-bg:0 0% 20%;--sf-form-dark-c-bd:0 0% 100%;--sf-form-dark-c-loading:0 0% 100%;--sf-form-dark-c-txt:0 0% 90%;--sf-form-radius:3px;--sf-form-fz:0.9375rem;--sf-form-p-input-block:0.5em;--sf-form-p-input-inline:0.5em;--sf-form-switch-size:1rem;--sf-form-ff:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';--sf-form-fz-small:0.75rem;--sf-lh-normal:1.1875;--sf-disabled:0.4}html[data-theme='dark'],html.dark{color-scheme:dark;--sf-form-c-white:var(--sf-form-dark-c-white);--sf-form-c-bg:var(--sf-form-dark-c-bg);--sf-form-c-error:var(--sf-form-dark-c-error);--sf-form-c-success:var(--sf-form-dark-c-success);--sf-form-c-warning:var(--sf-form-dark-c-warning);--sf-form-c-info:var(--sf-form-dark-c-info);--sf-form-c-bd:var(--sf-form-dark-c-bd);--sf-form-c-loading:var(--sf-form-dark-c-loading);--sf-form-c-txt:var(--sf-form-dark-c-txt)}@media (prefers-color-scheme:dark){html[data-theme='auto'],html.auto{color-scheme:light dark;--sf-form-c-white:var(--sf-form-dark-c-white);--sf-form-c-bg:var(--sf-form-dark-c-bg);--sf-form-c-error:var(--sf-form-dark-c-error);--sf-form-c-success:var(--sf-form-dark-c-success);--sf-form-c-warning:var(--sf-form-dark-c-warning);--sf-form-c-info:var(--sf-form-dark-c-info);--sf-form-c-bd:var(--sf-form-dark-c-bd);--sf-form-c-loading:var(--sf-form-dark-c-loading);--sf-form-c-txt:var(--sf-form-dark-c-txt)}}.sf-input *,.sf-input *::before,.sf-input *::after{box-sizing:inherit}.sf-input[type='image'],.sf-input[type='range']{cursor:pointer;border:0;padding:0}.sf-input{cursor:auto;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-transform:none;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border-style:solid;border-color:hsl(var(--sf-form-c-bd)/20%);border-width:0 0 1px;border-radius:0;outline:none;width:100%;height:32px;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);box-sizing:border-box;vertical-align:top}.sf-input[type='range']{width:100%}.sf-input[type='image']{width:auto;height:auto}.sf-input[type='time'],.sf-input[type='week'],.sf-input[type='month'],.sf-input[type='date'],.sf-input[type='datetime-local']{-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:start}.sf-input::-webkit-date-and-time-value{text-align:start}.sf-input::-webkit-calendar-picker-indicator{cursor:pointer;outline:none;opacity:0.5}.sf-input:hover::-webkit-calendar-picker-indicator{opacity:1}.sf-input::-moz-placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-input:-ms-input-placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-input::placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-input:focus{border-color:transparent transparent hsl(var(--sf-form-c-info));outline:none}.sf-input[type='color']:focus-visible,.sf-input[type='image']:focus-visible,.sf-input[type='range']:focus-visible{outline:2px solid hsl(var(--sf-form-c-info));outline-offset:2px}.sf-input:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}html.var .sf-input{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2);border-color:hsla(0,0%,10%,0.2);padding:8px}html.var .sf-input::-moz-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input:-ms-input-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input::placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input:-moz-placeholder-shown{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:-ms-input-placeholder{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:placeholder-shown{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:focus{border-color:hsl(200,100%,60%)}html.var .sf-input[type='image'],html.var .sf-input[type='range']{background:none}html.var .sf-input[type='color']:focus-visible,html.var .sf-input[type='image']:focus-visible,html.var .sf-input[type='range']:focus-visible{outline:2px solid hsl(200,100%,60%)}html.var .sf-input:disabled{opacity:0.4}.sf-button{cursor:pointer;display:inline-block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);text-align:center;text-decoration:none;text-transform:none;border-radius:var(--sf-form-radius);height:32px;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);box-sizing:border-box;vertical-align:baseline}a.sf-button:not([href]),.sf-button:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-button:focus-visible{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}html.var .sf-button{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);border-radius:3px;padding:8px}html.var a.sf-button:not([href]),html.var .sf-button:disabled{opacity:0.4}html.var .sf-button:focus-visible{outline:1px solid hsl(200,100%,60%)}label.sf-radio,label.sf-checkbox{box-sizing:border-box}label.sf-radio *,label.sf-radio *::before,label.sf-radio *::after,label.sf-checkbox *,label.sf-checkbox *::before,label.sf-checkbox *::after{box-sizing:inherit}label.sf-radio input,label.sf-checkbox input,label.sf-radio input::before,label.sf-checkbox input::before{width:16px;height:16px}label.sf-radio input,label.sf-radio input~*,label.sf-checkbox input,label.sf-checkbox input~*{cursor:pointer}label.sf-radio input:disabled,label.sf-radio input:disabled~*,label.sf-checkbox input:disabled,label.sf-checkbox input:disabled~*{cursor:not-allowed;opacity:var(--sf-disabled)}label.sf-radio input,label.sf-checkbox input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;margin:0 0 -2px;padding:0;vertical-align:baseline}label.sf-radio input::before,label.sf-checkbox input::before{top:0;left:0;position:absolute;width:16px;height:16px;content:'';background-color:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%)}label.sf-radio input::after,label.sf-checkbox input::after{top:3px;left:3px;right:3px;bottom:3px;position:absolute;content:''}label.sf-radio input:checked::before,label.sf-checkbox input:checked::before{border-color:hsl(var(--sf-form-c-info))}label.sf-radio input:checked::after,label.sf-checkbox input:checked::after{background-color:hsl(var(--sf-form-c-info))}label.sf-radio input::before,label.sf-radio input::after{border-radius:50%}.sf-radio input:focus-visible,.sf-checkbox input:focus-visible{border-color:transparent;outline:2px solid hsl(var(--sf-form-c-info));outline-offset:2px}.sf-radio input:focus-visible{border-radius:50%}html.var label.sf-radio input:disabled,html.var label.sf-radio input:disabled~*,html.var label.sf-checkbox input:disabled,html.var label.sf-checkbox input:disabled~*{opacity:0.4}html.var label.sf-radio input::before,html.var label.sf-checkbox input::before{border-color:hsla(0,0%,10%,0.2)}html.var label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible{outline-color:hsl(200,100%,60%)}.sf-select,.sf-select option{font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:var(--sf-lh-normal);text-transform:none}.sf-select{padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);cursor:pointer;background:hsl(var(--sf-form-c-bg)/20%);border-width:1px;border-style:solid;border-color:hsl(var(--sf-form-c-bd)/20%);border-radius:0;width:100%;height:auto;overflow:auto}.sf-select option{padding:calc(var(--sf-form-p-input-block) / 2) var(--sf-form-p-input-inline)}.sf-select optgroup{padding:calc(var(--sf-form-p-input-block) / 2) 0 0}.sf-select:not([multiple]){height:32px;padding:0 var(--sf-form-p-input-inline);border-width:0 0 1px}.sf-select::-ms-expand{border:0;background:none}.sf-select:focus-visible{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}.sf-select:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}html.var .sf-select,html.var .sf-select option{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'}html.var .sf-select:not([multiple]){padding:0 0 0 8px}html.var .sf-select{padding:8px 0 8px 8px;color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2);border-color:hsla(0,0%,10%,0.2)}html.var .sf-select:disabled{opacity:0.4}.sf-textarea{font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1.499535;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);width:100%;max-width:100%;min-height:calc((1.499535em + 2px + var(--sf-form-p-input-block)) * 4);padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);border-radius:var(--sf-form-radius);resize:vertical;overflow:auto;box-sizing:border-box}.sf-textarea::-moz-placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-textarea:-ms-input-placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-textarea::placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-textarea:disabled{cursor:not-allowed;resize:none;opacity:var(--sf-disabled)}.sf-textarea:focus-visible{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}html.var .sf-textarea{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2);border:1px solid hsla(0,0%,10%,0.2);min-height:calc((1.499535em + 2px + 0.5em) * 4);padding:8px;border-radius:3px}html.var .sf-textarea::-moz-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea:-ms-input-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea::placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea:disabled{opacity:0.4}html.var .sf-textarea:focus:valid{border-color:hsl(200,100%,60%)}.sf-input[type='color']{cursor:pointer;width:32px;height:32px;background:conic-gradient(from 0,yellow,darkorange,red,fuchsia,blue,cyan,lime,yellowgreen,yellow);padding:0;border:0;border-radius:50%}.sf-input[type='color']:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-input[type='color']::-webkit-color-swatch-wrapper{padding:3px}.sf-input[type='color']::-webkit-color-swatch{border:2px solid hsl(var(--sf-form-c-white));border-radius:50%}.sf-input[type='color']::-moz-color-swatch{border:2px solid hsl(var(--sf-form-c-white));border-radius:50%}.sf-input[type='color']:focus-visible{border-radius:50%}html.var .sf-input[type='color']:disabled{opacity:0.4}html.var .sf-input[type='color']::-webkit-color-swatch{border:2px solid hsl(0,0%,100%)}html.var .sf-input[type='color']::-moz-color-swatch{border:2px solid hsl(0,0%,100%)}.sf-input[type='file']{cursor:pointer;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;border:0;width:auto;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sf-input[type='file']::-webkit-file-upload-button{cursor:pointer;display:inline-block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-align:center;text-transform:none;text-decoration:none;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);height:32px;border-radius:var(--sf-form-radius)}.sf-input[type='file']::file-selector-button{cursor:pointer;display:inline-block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-align:center;text-transform:none;text-decoration:none;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);height:32px;border-radius:var(--sf-form-radius)}.sf-input[type='file']:focus-visible{outline:none}.sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}.sf-input[type='file']:focus-visible::file-selector-button{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}.sf-input[type='file']:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-input[type='file']:disabled::-webkit-file-upload-button{cursor:not-allowed}.sf-input[type='file']:disabled::file-selector-button{cursor:not-allowed}html.var .sf-input[type='file']{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';padding:0}html.var .sf-input[type='file']::-webkit-file-upload-button{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);border-radius:3px}html.var .sf-input[type='file']::file-selector-button{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);border-radius:3px}html.var .sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline:1px solid hsl(200,100%,60%)}html.var .sf-input[type='file']:focus-visible::file-selector-button{outline:1px solid hsl(200,100%,60%)}html.var .sf-input[type='file']:disabled{opacity:0.4}.sf-switch{box-sizing:border-box;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-transform:none}.sf-switch.multiple *,.sf-switch.multiple *::before,.sf-switch.multiple *::after{box-sizing:inherit}label.sf-switch input[type='checkbox']{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:none;padding:0;margin:0;width:calc(var(--sf-form-switch-size) * 2);height:var(--sf-form-switch-size);vertical-align:text-top}label.sf-switch input[type='checkbox']::before{cursor:pointer;top:0;left:0;position:absolute;width:calc(var(--sf-form-switch-size) * 2);height:var(--sf-form-switch-size);content:'';background:hsl(var(--sf-form-c-bd)/20%);border-radius:calc(var(--sf-form-switch-size) / 2)}label.sf-switch input[type='checkbox']::after{cursor:pointer;top:2px;left:2px;position:absolute;width:calc(var(--sf-form-switch-size) - 2px * 2);height:calc(var(--sf-form-switch-size) - 2px * 2);content:'';background:hsl(var(--sf-form-c-white));border-radius:calc(var(--sf-form-switch-size) / 2);box-shadow:0 0 0 1px hsl(var(--sf-form-c-white));transition:transform 0.05s ease-in}label.sf-switch input[type='checkbox']:checked::before{background:hsl(var(--sf-form-c-info))}label.sf-switch input[type='checkbox']:checked::after{transform:translate3d(var(--sf-form-switch-size),0,0)}label.sf-switch input[type='radio']~*,label.sf-switch input[type='checkbox']~*{cursor:pointer}.sf-switch.multiple .sf-switch-toggle{display:inline-block;background:hsl(var(--sf-form-c-bg)/20%);box-shadow:1px 2px 8px 0 hsl(var(--sf-form-c-bd)/15%)}.sf-switch.multiple .sf-switch-toggle *{display:inline-block}.sf-switch.multiple .sf-switch-toggle label{position:relative}.sf-switch.multiple .sf-switch-toggle span{font-size:var(--sf-form-fz-small);text-align:center;min-width:32px;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);background:hsl(var(--sf-form-c-bd)/5%)}.sf-switch.multiple input[type='checkbox'],.sf-switch.multiple input[type='radio']{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;top:0;left:0;right:0;bottom:0;position:absolute;z-index:1;width:100%;height:100%;padding:0;margin:0;border:0;opacity:0}.sf-switch.multiple input[type='checkbox']::before,.sf-switch.multiple input[type='radio']::before,.sf-switch.multiple input[type='checkbox']::after,.sf-switch.multiple input[type='radio']::after{content:none}.sf-switch.multiple input[type='checkbox']:checked~span,.sf-switch.multiple input[type='radio']:checked~span{color:hsl(var(--sf-form-c-white));background:hsl(var(--sf-form-c-info))}.sf-switch.multiple.vert .sf-switch-toggle{-ms-flex-flow:column;flex-flow:column}.sf-switch.multiple .sf-switch-description{font-size:var(--sf-form-fz-small);margin:0.5em 0 0;padding:0 0 0.5em}.sf-switch input[type='checkbox']:disabled,.sf-switch input[type='checkbox']:disabled::after,.sf-switch input[type='checkbox']:disabled::before,.sf-switch input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='checkbox']:disabled,.sf-switch.multiple input[type='radio']:disabled,.sf-switch.multiple input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='radio']:disabled~*{cursor:not-allowed}.sf-switch input[type='checkbox']:disabled,.sf-switch input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='radio']:disabled~*{opacity:var(--sf-disabled)}.sf-switch input[type='checkbox']:focus-visible,.sf-switch input[type='radio']:focus-visible{border-color:transparent;outline:2px solid hsl(var(--sf-form-c-info))}.sf-switch:not(.multiple) input[type='checkbox']:focus-visible,.sf-switch:not(.multiple) input[type='radio']:focus-visible{border-radius:calc(var(--sf-form-switch-size) / 2)}html.var .sf-switch{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'}html.var label.sf-switch input[type='checkbox']{width:16px;height:16px}html.var label.sf-switch input[type='checkbox']::before{width:16px;height:16px;background:hsla(0,0%,10%,0.2);border-radius:8px}html.var label.sf-switch input[type='checkbox']::after{width:28px;height:28px;background:hsl(0,0%,100%);border-radius:8px;box-shadow:0 0 0 1px hsl(0,0%,100%)}html.var label.sf-switch input[type='checkbox']:checked::before{background:hsl(200,100%,60%)}html.var .sf-switch.multiple .sf-switch-toggle{background:hsla(0,0%,90%,0.2);box-shadow:1px 2px 8px 0 hsla(0,0%,10%,0.15)}html.var .sf-switch.multiple .sf-switch-toggle span{font-size:12px;padding:8px;background:hsla(0,0%,10%,0.1)}html.var .sf-switch.multiple input[type='checkbox']:checked~span,html.var .sf-switch.multiple input[type='radio']:checked~span{color:hsl(0,0%,100%);background:hsl(200,100%,60%)}html.var .sf-switch.multiple .sf-switch-description{font-size:12px}html.var .sf-switch input[type='checkbox']:disabled~*,html.var .sf-switch.multiple input[type='checkbox']:disabled~*,html.var .sf-switch.multiple input[type='radio']:disabled~*{opacity:0.4}html.var .sf-switch input[type='checkbox']:focus-visible,html.var .sf-switch input[type='radio']:focus-visible{outline:2px solid hsl(200,100%,60%)}html.var .sf-switch:not(.multiple) input[type='checkbox']:focus-visible,html.var .sf-switch:not(.multiple) input[type='radio']:focus-visible{border-radius:8px}@keyframes Loading{from{background-position:0 0}to{background-position:28px 0}}a.sf-loading.sf-button:not([href]),.sf-loading:disabled,.sf-loading.sf-button:disabled,.sf-loading.sf-input:not([type='color']):disabled{--c1:transparent;--c2:hsl(var(--sf-form-c-loading)/5%);cursor:progress;background:repeating-linear-gradient(45deg,var(--c1),var(--c1) 10px,var(--c2) 10px,var(--c2) 20px);background-size:28px 100%;animation:Loading .3s linear infinite}html.var a.sf-loading.sf-button:not([href]),html.var .sf-loading:disabled,html.var .sf-loading.sf-button:disabled,html.var .sf-loading.sf-input:not([type='color']):disabled{background:repeating-linear-gradient(45deg,transparent,transparent 10px,hsla(0,0%,10%,0.05) 10px,hsla(0,0%,10%,0.05) 20px)}html .sf-description,html .sf-invalid,html .sf-valid{display:none;color:hsl(var(--sf-form-c-txt)/40%);font-size:var(--sf-form-fz-small);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-transform:none;margin:0.5em 0 0;padding:0 0 0.5em}html .sf-description{display:block}html .sf-invalid{color:hsl(var(--sf-form-c-error))}html .sf-valid:not(.sf-description){color:hsl(var(--sf-form-c-txt))}.show.sf-description,.show.sf-invalid,.show.sf-valid{display:block}.hide.sf-description,.hide.sf-invalid,.hide.sf-valid{display:none}.validates:focus:invalid~.sf-invalid,.validates:focus:valid~.sf-valid,.validates:focus:valid~.sf-description.sf-valid{display:block}.validates:focus:invalid~.validates~.sf-invalid,.validates:focus:valid~.validates~.sf-valid,.validates:focus:valid~.validates~.sf-description.sf-valid{display:none}.validates:focus~.sf-description{display:none}.validates:focus~.validates~.sf-description{display:block}.error:not(:disabled)+.sf-invalid,.error:not(:disabled)+.sf-valid+.sf-invalid,.error:not(:disabled)+.sf-description+.sf-invalid{display:block !important}.error:not(:disabled)+.sf-invalid+.sf-valid,.error:not(:disabled)+.sf-invalid+.sf-description,.error:not(:disabled)+.sf-description,.error:not(:disabled)+.sf-description+.sf-valid,.error:not(:disabled)+.sf-valid,.error:not(:disabled)+.sf-valid+.sf-description{display:none !important}.validates input[type='checkbox']~.sf-description{display:none}.validates input[type='checkbox']:invalid~.sf-invalid{display:block}.validates input[type='checkbox']:valid~.sf-valid{display:block}.validates:required:invalid:not(:focus){border-bottom-color:hsl(var(--sf-form-c-warning))}.validates:required:invalid:not(:disabled){border-bottom-color:hsl(var(--sf-form-c-warning))}.validates input[type='radio']:invalid::before,.validates input[type='checkbox']:invalid::before{border-color:hsl(var(--sf-form-c-error))}.error:not(:disabled),.validates:required:invalid:focus{border-bottom-color:hsl(var(--sf-form-c-error));outline:none}label.validates.sf-switch .sf-description,label.validates.sf-switch .sf-valid,label.validates.sf-switch .sf-invalid,label.validates.sf-checkbox .sf-description,label.validates.sf-checkbox .sf-valid,label.validates.sf-checkbox .sf-invalid{width:100%;line-height:var(--sf-lh-normal)}form.validates:invalid .sf-button[type='submit']{cursor:not-allowed;text-decoration:none;opacity:var(--sf-disabled);-webkit-text-fill-color:hsl(var(--sf-form-c-txt))}html.var .sf-description,html.var .sf-invalid,html.var .sf-valid{color:hsla(0,0%,10%,0.4);font-size:12px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'}html.var label.validates.sf-switch .sf-description,html.var label.validates.sf-switch .sf-valid,html.var label.validates.sf-switch .sf-invalid,html.var label.validates.sf-checkbox .sf-description,html.var label.validates.sf-checkbox .sf-valid,html.var label.validates.sf-checkbox .sf-invalid{line-height:1.1875}html.var .sf-invalid{color:hsl(0,100%,60%)}html.var .error:not(:disabled){border-bottom-color:hsl(0,100%,60%)}html.var .validates:invalid:required{border-bottom-color:hsl(39,100%,50%)}html.var .validates:invalid:focus{border-bottom-color:hsl(0,100%,60%)}html.var[data-theme='dark'] .sf-select::-ms-expand,html.var.dark .sf-select::-ms-expand{color:hsl(0,0%,90%)}html.var[data-theme='dark'] .sf-input[type='file']::-webkit-file-upload-button, html.var.dark .sf-input[type='file']::-webkit-file-upload-button{color:hsl(0,0%,90%);background-color:hsla(0,0%,20%,0.2);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='file']::file-selector-button,html.var.dark .sf-input[type='file']::file-selector-button{color:hsl(0,0%,90%);background-color:hsla(0,0%,20%,0.2);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='file']:focus-visible::-webkit-file-upload-button, html.var.dark .sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-input[type='file']:focus-visible::file-selector-button,html.var.dark .sf-input[type='file']:focus-visible::file-selector-button{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-button,html.var[data-theme='dark'] .sf-input,html.var[data-theme='dark'] .sf-textarea,html.var[data-theme='dark'] .sf-select,html.var[data-theme='dark'] option,html.var.dark .sf-button,html.var.dark .sf-input,html.var.dark .sf-textarea,html.var.dark .sf-select,html.var.dark option{color:hsl(0,0%,90%);background-color:hsl(0,0%,20%);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-description,html.var[data-theme='dark'] .sf-valid,html.var.dark .sf-description,html.var.dark .sf-valid{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-invalid,html.var.dark .sf-invalid{color:hsl(0,100%,65%)}html.var[data-theme='dark'] .sf-button:focus-visible,html.var[data-theme='dark'] label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var[data-theme='dark'] label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible,html.var[data-theme='dark'] .sf-input:focus,html.var[data-theme='dark'] .sf-input[type='color']:focus-visible,html.var[data-theme='dark'] .sf-input[type='image']:focus-visible,html.var[data-theme='dark'] .sf-input[type='range']:focus-visible,html.var[data-theme='dark'] .sf-textarea:focus-visible,html.var[data-theme='dark'] .sf-select:focus-visible,html.var.dark .sf-button:focus-visible,html.var.dark label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var.dark label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible,html.var.dark .sf-input:focus,html.var.dark .sf-input[type='color']:focus-visible,html.var.dark .sf-input[type='image']:focus-visible,html.var.dark .sf-input[type='range']:focus-visible,html.var.dark .sf-textarea:focus-visible,html.var.dark .sf-select:focus-visible{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-input[type='color']::-webkit-color-swatch,html.var.dark .sf-input[type='color']::-webkit-color-swatch{border-color:hsl(0,0%,100%)}html.var[data-theme='dark'] .sf-input[type='color']::-moz-color-swatch,html.var.dark .sf-input[type='color']::-moz-color-swatch{border-color:hsl(0,0%,100%)}html.var[data-theme='dark'] .sf-input,html.var.dark .sf-input{border-color:transparent transparent hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input::-moz-placeholder, html.var[data-theme='dark'] .sf-textarea::-moz-placeholder, html.var.dark .sf-input::-moz-placeholder, html.var.dark .sf-textarea::-moz-placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input:-ms-input-placeholder, html.var[data-theme='dark'] .sf-textarea:-ms-input-placeholder, html.var.dark .sf-input:-ms-input-placeholder, html.var.dark .sf-textarea:-ms-input-placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input::placeholder,html.var[data-theme='dark'] .sf-textarea::placeholder,html.var.dark .sf-input::placeholder,html.var.dark .sf-textarea::placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input:-moz-placeholder-shown, html.var.dark .sf-input:-moz-placeholder-shown{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input:-ms-input-placeholder, html.var.dark .sf-input:-ms-input-placeholder{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input:placeholder-shown,html.var.dark .sf-input:placeholder-shown{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='image'],html.var[data-theme='dark'] .sf-input[type='range'],html.var.dark .sf-input[type='image'],html.var.dark .sf-input[type='range']{background:none} diff --git a/package.json b/package.json index 72ca2fe..53dc433 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "style-forge.form", - "version": "2025.1.8", + "version": "2025.1.10", "description": "Style-Forge.Form: versatile library for easy form creation, validation, styling, and submission in web apps.", "type": "module", "main": "form.css", diff --git a/src/button.css b/src/button.css index fd07cbd..8490afb 100644 --- a/src/button.css +++ b/src/button.css @@ -1,5 +1,5 @@ :root { - --sf-form-ff: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + --sf-form-ff: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --sf-form-fz: 0.9375rem; --sf-disabled: 0.4; --sf-form-radius: 3px; @@ -54,7 +54,7 @@ a.sf-button:not([href]), html.var .sf-button { font-size: 15px; - font-family: Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; color: hsl(0, 0%, 10%); background: hsla(0, 0%, 100%, 0.2); diff --git a/src/file.css b/src/file.css index 5ed0da2..72a8d32 100644 --- a/src/file.css +++ b/src/file.css @@ -1,5 +1,5 @@ :root { - --sf-form-ff: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + --sf-form-ff: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --sf-form-fz: 0.9375rem; --sf-disabled: 0.4; --sf-form-radius: 3px; @@ -62,12 +62,12 @@ html.var .sf-input[type='file'] { font-size: 15px; - font-family: Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; padding: 0; /* required */ } html.var .sf-input[type='file']::file-selector-button { font-size: 15px; - font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; color: hsl(0, 0%, 10%); background: hsla(0, 0%, 100%, 0.2); border: 1px solid hsla(0, 0%, 10%, 0.2); diff --git a/src/input.css b/src/input.css index b93ee81..1b67c70 100644 --- a/src/input.css +++ b/src/input.css @@ -1,5 +1,5 @@ :root { - --sf-form-ff: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + --sf-form-ff: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --sf-form-fz: 0.9375rem; @@ -91,7 +91,7 @@ html.var .sf-input { font-size: 15px; - font-family: Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; color: hsl(0, 0%, 10%); background: hsla(0, 0%, 90%, 0.2); diff --git a/src/select.css b/src/select.css index 956f696..f079745 100644 --- a/src/select.css +++ b/src/select.css @@ -1,5 +1,5 @@ :root { - --sf-form-ff: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + --sf-form-ff: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --sf-form-fz: 0.9375rem; --sf-lh-normal: 1.1875; --sf-disabled: 0.4; @@ -65,7 +65,7 @@ html.var .sf-select, html.var .sf-select option { font-size: 15px; - font-family: Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; } html.var .sf-select:not([multiple]) { padding: 0 0 0 8px } html.var .sf-select { padding: 8px 0 8px 8px } diff --git a/src/switch.css b/src/switch.css index 01f42ca..722df68 100644 --- a/src/switch.css +++ b/src/switch.css @@ -1,5 +1,5 @@ :root { - --sf-form-ff: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + --sf-form-ff: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --sf-form-fz: 0.9375rem; --sf-form-fz-small: 0.75rem; --sf-disabled: 0.4; @@ -176,7 +176,7 @@ label.sf-switch input[type='checkbox'] ~ * html.var .sf-switch { font-size: 15px; - font-family: Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; } html.var label.sf-switch input[type='checkbox'] { diff --git a/src/textarea.css b/src/textarea.css index 8e99d70..f54e0fd 100644 --- a/src/textarea.css +++ b/src/textarea.css @@ -1,5 +1,5 @@ :root { - --sf-form-ff: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + --sf-form-ff: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --sf-form-fz: 0.9375rem; --sf-disabled: 0.4; --sf-form-radius: 3px; @@ -51,7 +51,7 @@ html.var .sf-textarea { font-size: 15px; - font-family: Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; color: hsl(0, 0%, 10%); background: hsla(0, 0%, 90%, 0.2); diff --git a/src/validate.css b/src/validate.css index ab6d639..8e49763 100644 --- a/src/validate.css +++ b/src/validate.css @@ -1,11 +1,11 @@ :root { - --sf-form-ff: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + --sf-form-ff: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --sf-form-fz-small: 0.75rem; --sf-lh-normal: 1.1875; --sf-disabled: 0.4; } -.sf-description, .sf-invalid, .sf-valid { +html .sf-description, html .sf-invalid, html .sf-valid { display: none; color: hsl(var(--sf-form-c-txt) / 40%); @@ -20,10 +20,10 @@ padding: 0 0 0.5em; } -.sf-description { display: block } +html .sf-description { display: block } -.sf-invalid { color: hsl(var(--sf-form-c-error)) } -.sf-valid:not(.sf-description) { color: hsl(var(--sf-form-c-txt)) } +html .sf-invalid { color: hsl(var(--sf-form-c-error)) } +html .sf-valid:not(.sf-description) { color: hsl(var(--sf-form-c-txt)) } .show.sf-description, .show.sf-invalid, .show.sf-valid { display: block } .hide.sf-description, .hide.sf-invalid, .hide.sf-valid { display: none } @@ -99,7 +99,7 @@ html.var .sf-valid { color: hsla(0, 0%, 10%, 0.4); font-size: 12px; - font-family: Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; } html.var label.validates.sf-switch .sf-description, diff --git a/src/var.css b/src/var.css index 5b88db0..f1abbf7 100644 --- a/src/var.css +++ b/src/var.css @@ -10,7 +10,7 @@ --sf-form-c-loading: 0 0% 10%; --sf-form-c-txt: 0 0% 10%; - /* global dark theme */ + /* colors dark theme */ --sf-form-dark-c-white: 0 0% 100%; --sf-form-dark-c-info: 219 79% 66%; --sf-form-dark-c-error: 0 100% 65%; From 7e195ee513b0187f7688e292c1546819afebeb6c Mon Sep 17 00:00:00 2001 From: Sarmaged <3858245+Sarmaged@users.noreply.github.com> Date: Fri, 10 Jan 2025 01:52:16 +0300 Subject: [PATCH 2/4] fix: - font-weight: 300 - + selectors weight --- form.css | 2 +- src/validate.css | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/form.css b/form.css index ecc0ed5..fbd7451 100644 --- a/form.css +++ b/form.css @@ -1,3 +1,3 @@ /*! style-forge.form 2025.1.10 | MIT License | https://github.com/Style-Forge/form */ -:root{--sf-form-c-white:0 0% 100%;--sf-form-c-info:200 100% 60%;--sf-form-c-error:0 100% 60%;--sf-form-c-success:0 100% 60%;--sf-form-c-warning:39 100% 50%;--sf-form-c-bg:0 0% 90%;--sf-form-c-bd:0 0% 10%;--sf-form-c-loading:0 0% 10%;--sf-form-c-txt:0 0% 10%;--sf-form-dark-c-white:0 0% 100%;--sf-form-dark-c-info:219 79% 66%;--sf-form-dark-c-error:0 100% 65%;--sf-form-dark-c-success:0 100% 65%;--sf-form-dark-c-warning:39 100% 60%;--sf-form-dark-c-bg:0 0% 20%;--sf-form-dark-c-bd:0 0% 100%;--sf-form-dark-c-loading:0 0% 100%;--sf-form-dark-c-txt:0 0% 90%;--sf-form-radius:3px;--sf-form-fz:0.9375rem;--sf-form-p-input-block:0.5em;--sf-form-p-input-inline:0.5em;--sf-form-switch-size:1rem;--sf-form-ff:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';--sf-form-fz-small:0.75rem;--sf-lh-normal:1.1875;--sf-disabled:0.4}html[data-theme='dark'],html.dark{color-scheme:dark;--sf-form-c-white:var(--sf-form-dark-c-white);--sf-form-c-bg:var(--sf-form-dark-c-bg);--sf-form-c-error:var(--sf-form-dark-c-error);--sf-form-c-success:var(--sf-form-dark-c-success);--sf-form-c-warning:var(--sf-form-dark-c-warning);--sf-form-c-info:var(--sf-form-dark-c-info);--sf-form-c-bd:var(--sf-form-dark-c-bd);--sf-form-c-loading:var(--sf-form-dark-c-loading);--sf-form-c-txt:var(--sf-form-dark-c-txt)}@media (prefers-color-scheme:dark){html[data-theme='auto'],html.auto{color-scheme:light dark;--sf-form-c-white:var(--sf-form-dark-c-white);--sf-form-c-bg:var(--sf-form-dark-c-bg);--sf-form-c-error:var(--sf-form-dark-c-error);--sf-form-c-success:var(--sf-form-dark-c-success);--sf-form-c-warning:var(--sf-form-dark-c-warning);--sf-form-c-info:var(--sf-form-dark-c-info);--sf-form-c-bd:var(--sf-form-dark-c-bd);--sf-form-c-loading:var(--sf-form-dark-c-loading);--sf-form-c-txt:var(--sf-form-dark-c-txt)}}.sf-input *,.sf-input *::before,.sf-input *::after{box-sizing:inherit}.sf-input[type='image'],.sf-input[type='range']{cursor:pointer;border:0;padding:0}.sf-input{cursor:auto;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-transform:none;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border-style:solid;border-color:hsl(var(--sf-form-c-bd)/20%);border-width:0 0 1px;border-radius:0;outline:none;width:100%;height:32px;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);box-sizing:border-box;vertical-align:top}.sf-input[type='range']{width:100%}.sf-input[type='image']{width:auto;height:auto}.sf-input[type='time'],.sf-input[type='week'],.sf-input[type='month'],.sf-input[type='date'],.sf-input[type='datetime-local']{-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:start}.sf-input::-webkit-date-and-time-value{text-align:start}.sf-input::-webkit-calendar-picker-indicator{cursor:pointer;outline:none;opacity:0.5}.sf-input:hover::-webkit-calendar-picker-indicator{opacity:1}.sf-input::-moz-placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-input:-ms-input-placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-input::placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-input:focus{border-color:transparent transparent hsl(var(--sf-form-c-info));outline:none}.sf-input[type='color']:focus-visible,.sf-input[type='image']:focus-visible,.sf-input[type='range']:focus-visible{outline:2px solid hsl(var(--sf-form-c-info));outline-offset:2px}.sf-input:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}html.var .sf-input{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2);border-color:hsla(0,0%,10%,0.2);padding:8px}html.var .sf-input::-moz-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input:-ms-input-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input::placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input:-moz-placeholder-shown{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:-ms-input-placeholder{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:placeholder-shown{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:focus{border-color:hsl(200,100%,60%)}html.var .sf-input[type='image'],html.var .sf-input[type='range']{background:none}html.var .sf-input[type='color']:focus-visible,html.var .sf-input[type='image']:focus-visible,html.var .sf-input[type='range']:focus-visible{outline:2px solid hsl(200,100%,60%)}html.var .sf-input:disabled{opacity:0.4}.sf-button{cursor:pointer;display:inline-block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);text-align:center;text-decoration:none;text-transform:none;border-radius:var(--sf-form-radius);height:32px;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);box-sizing:border-box;vertical-align:baseline}a.sf-button:not([href]),.sf-button:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-button:focus-visible{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}html.var .sf-button{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);border-radius:3px;padding:8px}html.var a.sf-button:not([href]),html.var .sf-button:disabled{opacity:0.4}html.var .sf-button:focus-visible{outline:1px solid hsl(200,100%,60%)}label.sf-radio,label.sf-checkbox{box-sizing:border-box}label.sf-radio *,label.sf-radio *::before,label.sf-radio *::after,label.sf-checkbox *,label.sf-checkbox *::before,label.sf-checkbox *::after{box-sizing:inherit}label.sf-radio input,label.sf-checkbox input,label.sf-radio input::before,label.sf-checkbox input::before{width:16px;height:16px}label.sf-radio input,label.sf-radio input~*,label.sf-checkbox input,label.sf-checkbox input~*{cursor:pointer}label.sf-radio input:disabled,label.sf-radio input:disabled~*,label.sf-checkbox input:disabled,label.sf-checkbox input:disabled~*{cursor:not-allowed;opacity:var(--sf-disabled)}label.sf-radio input,label.sf-checkbox input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;margin:0 0 -2px;padding:0;vertical-align:baseline}label.sf-radio input::before,label.sf-checkbox input::before{top:0;left:0;position:absolute;width:16px;height:16px;content:'';background-color:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%)}label.sf-radio input::after,label.sf-checkbox input::after{top:3px;left:3px;right:3px;bottom:3px;position:absolute;content:''}label.sf-radio input:checked::before,label.sf-checkbox input:checked::before{border-color:hsl(var(--sf-form-c-info))}label.sf-radio input:checked::after,label.sf-checkbox input:checked::after{background-color:hsl(var(--sf-form-c-info))}label.sf-radio input::before,label.sf-radio input::after{border-radius:50%}.sf-radio input:focus-visible,.sf-checkbox input:focus-visible{border-color:transparent;outline:2px solid hsl(var(--sf-form-c-info));outline-offset:2px}.sf-radio input:focus-visible{border-radius:50%}html.var label.sf-radio input:disabled,html.var label.sf-radio input:disabled~*,html.var label.sf-checkbox input:disabled,html.var label.sf-checkbox input:disabled~*{opacity:0.4}html.var label.sf-radio input::before,html.var label.sf-checkbox input::before{border-color:hsla(0,0%,10%,0.2)}html.var label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible{outline-color:hsl(200,100%,60%)}.sf-select,.sf-select option{font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:var(--sf-lh-normal);text-transform:none}.sf-select{padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);cursor:pointer;background:hsl(var(--sf-form-c-bg)/20%);border-width:1px;border-style:solid;border-color:hsl(var(--sf-form-c-bd)/20%);border-radius:0;width:100%;height:auto;overflow:auto}.sf-select option{padding:calc(var(--sf-form-p-input-block) / 2) var(--sf-form-p-input-inline)}.sf-select optgroup{padding:calc(var(--sf-form-p-input-block) / 2) 0 0}.sf-select:not([multiple]){height:32px;padding:0 var(--sf-form-p-input-inline);border-width:0 0 1px}.sf-select::-ms-expand{border:0;background:none}.sf-select:focus-visible{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}.sf-select:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}html.var .sf-select,html.var .sf-select option{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'}html.var .sf-select:not([multiple]){padding:0 0 0 8px}html.var .sf-select{padding:8px 0 8px 8px;color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2);border-color:hsla(0,0%,10%,0.2)}html.var .sf-select:disabled{opacity:0.4}.sf-textarea{font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1.499535;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);width:100%;max-width:100%;min-height:calc((1.499535em + 2px + var(--sf-form-p-input-block)) * 4);padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);border-radius:var(--sf-form-radius);resize:vertical;overflow:auto;box-sizing:border-box}.sf-textarea::-moz-placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-textarea:-ms-input-placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-textarea::placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-textarea:disabled{cursor:not-allowed;resize:none;opacity:var(--sf-disabled)}.sf-textarea:focus-visible{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}html.var .sf-textarea{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2);border:1px solid hsla(0,0%,10%,0.2);min-height:calc((1.499535em + 2px + 0.5em) * 4);padding:8px;border-radius:3px}html.var .sf-textarea::-moz-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea:-ms-input-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea::placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea:disabled{opacity:0.4}html.var .sf-textarea:focus:valid{border-color:hsl(200,100%,60%)}.sf-input[type='color']{cursor:pointer;width:32px;height:32px;background:conic-gradient(from 0,yellow,darkorange,red,fuchsia,blue,cyan,lime,yellowgreen,yellow);padding:0;border:0;border-radius:50%}.sf-input[type='color']:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-input[type='color']::-webkit-color-swatch-wrapper{padding:3px}.sf-input[type='color']::-webkit-color-swatch{border:2px solid hsl(var(--sf-form-c-white));border-radius:50%}.sf-input[type='color']::-moz-color-swatch{border:2px solid hsl(var(--sf-form-c-white));border-radius:50%}.sf-input[type='color']:focus-visible{border-radius:50%}html.var .sf-input[type='color']:disabled{opacity:0.4}html.var .sf-input[type='color']::-webkit-color-swatch{border:2px solid hsl(0,0%,100%)}html.var .sf-input[type='color']::-moz-color-swatch{border:2px solid hsl(0,0%,100%)}.sf-input[type='file']{cursor:pointer;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;border:0;width:auto;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sf-input[type='file']::-webkit-file-upload-button{cursor:pointer;display:inline-block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-align:center;text-transform:none;text-decoration:none;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);height:32px;border-radius:var(--sf-form-radius)}.sf-input[type='file']::file-selector-button{cursor:pointer;display:inline-block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-align:center;text-transform:none;text-decoration:none;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);height:32px;border-radius:var(--sf-form-radius)}.sf-input[type='file']:focus-visible{outline:none}.sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}.sf-input[type='file']:focus-visible::file-selector-button{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}.sf-input[type='file']:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-input[type='file']:disabled::-webkit-file-upload-button{cursor:not-allowed}.sf-input[type='file']:disabled::file-selector-button{cursor:not-allowed}html.var .sf-input[type='file']{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';padding:0}html.var .sf-input[type='file']::-webkit-file-upload-button{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);border-radius:3px}html.var .sf-input[type='file']::file-selector-button{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);border-radius:3px}html.var .sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline:1px solid hsl(200,100%,60%)}html.var .sf-input[type='file']:focus-visible::file-selector-button{outline:1px solid hsl(200,100%,60%)}html.var .sf-input[type='file']:disabled{opacity:0.4}.sf-switch{box-sizing:border-box;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-transform:none}.sf-switch.multiple *,.sf-switch.multiple *::before,.sf-switch.multiple *::after{box-sizing:inherit}label.sf-switch input[type='checkbox']{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:none;padding:0;margin:0;width:calc(var(--sf-form-switch-size) * 2);height:var(--sf-form-switch-size);vertical-align:text-top}label.sf-switch input[type='checkbox']::before{cursor:pointer;top:0;left:0;position:absolute;width:calc(var(--sf-form-switch-size) * 2);height:var(--sf-form-switch-size);content:'';background:hsl(var(--sf-form-c-bd)/20%);border-radius:calc(var(--sf-form-switch-size) / 2)}label.sf-switch input[type='checkbox']::after{cursor:pointer;top:2px;left:2px;position:absolute;width:calc(var(--sf-form-switch-size) - 2px * 2);height:calc(var(--sf-form-switch-size) - 2px * 2);content:'';background:hsl(var(--sf-form-c-white));border-radius:calc(var(--sf-form-switch-size) / 2);box-shadow:0 0 0 1px hsl(var(--sf-form-c-white));transition:transform 0.05s ease-in}label.sf-switch input[type='checkbox']:checked::before{background:hsl(var(--sf-form-c-info))}label.sf-switch input[type='checkbox']:checked::after{transform:translate3d(var(--sf-form-switch-size),0,0)}label.sf-switch input[type='radio']~*,label.sf-switch input[type='checkbox']~*{cursor:pointer}.sf-switch.multiple .sf-switch-toggle{display:inline-block;background:hsl(var(--sf-form-c-bg)/20%);box-shadow:1px 2px 8px 0 hsl(var(--sf-form-c-bd)/15%)}.sf-switch.multiple .sf-switch-toggle *{display:inline-block}.sf-switch.multiple .sf-switch-toggle label{position:relative}.sf-switch.multiple .sf-switch-toggle span{font-size:var(--sf-form-fz-small);text-align:center;min-width:32px;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);background:hsl(var(--sf-form-c-bd)/5%)}.sf-switch.multiple input[type='checkbox'],.sf-switch.multiple input[type='radio']{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;top:0;left:0;right:0;bottom:0;position:absolute;z-index:1;width:100%;height:100%;padding:0;margin:0;border:0;opacity:0}.sf-switch.multiple input[type='checkbox']::before,.sf-switch.multiple input[type='radio']::before,.sf-switch.multiple input[type='checkbox']::after,.sf-switch.multiple input[type='radio']::after{content:none}.sf-switch.multiple input[type='checkbox']:checked~span,.sf-switch.multiple input[type='radio']:checked~span{color:hsl(var(--sf-form-c-white));background:hsl(var(--sf-form-c-info))}.sf-switch.multiple.vert .sf-switch-toggle{-ms-flex-flow:column;flex-flow:column}.sf-switch.multiple .sf-switch-description{font-size:var(--sf-form-fz-small);margin:0.5em 0 0;padding:0 0 0.5em}.sf-switch input[type='checkbox']:disabled,.sf-switch input[type='checkbox']:disabled::after,.sf-switch input[type='checkbox']:disabled::before,.sf-switch input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='checkbox']:disabled,.sf-switch.multiple input[type='radio']:disabled,.sf-switch.multiple input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='radio']:disabled~*{cursor:not-allowed}.sf-switch input[type='checkbox']:disabled,.sf-switch input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='radio']:disabled~*{opacity:var(--sf-disabled)}.sf-switch input[type='checkbox']:focus-visible,.sf-switch input[type='radio']:focus-visible{border-color:transparent;outline:2px solid hsl(var(--sf-form-c-info))}.sf-switch:not(.multiple) input[type='checkbox']:focus-visible,.sf-switch:not(.multiple) input[type='radio']:focus-visible{border-radius:calc(var(--sf-form-switch-size) / 2)}html.var .sf-switch{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'}html.var label.sf-switch input[type='checkbox']{width:16px;height:16px}html.var label.sf-switch input[type='checkbox']::before{width:16px;height:16px;background:hsla(0,0%,10%,0.2);border-radius:8px}html.var label.sf-switch input[type='checkbox']::after{width:28px;height:28px;background:hsl(0,0%,100%);border-radius:8px;box-shadow:0 0 0 1px hsl(0,0%,100%)}html.var label.sf-switch input[type='checkbox']:checked::before{background:hsl(200,100%,60%)}html.var .sf-switch.multiple .sf-switch-toggle{background:hsla(0,0%,90%,0.2);box-shadow:1px 2px 8px 0 hsla(0,0%,10%,0.15)}html.var .sf-switch.multiple .sf-switch-toggle span{font-size:12px;padding:8px;background:hsla(0,0%,10%,0.1)}html.var .sf-switch.multiple input[type='checkbox']:checked~span,html.var .sf-switch.multiple input[type='radio']:checked~span{color:hsl(0,0%,100%);background:hsl(200,100%,60%)}html.var .sf-switch.multiple .sf-switch-description{font-size:12px}html.var .sf-switch input[type='checkbox']:disabled~*,html.var .sf-switch.multiple input[type='checkbox']:disabled~*,html.var .sf-switch.multiple input[type='radio']:disabled~*{opacity:0.4}html.var .sf-switch input[type='checkbox']:focus-visible,html.var .sf-switch input[type='radio']:focus-visible{outline:2px solid hsl(200,100%,60%)}html.var .sf-switch:not(.multiple) input[type='checkbox']:focus-visible,html.var .sf-switch:not(.multiple) input[type='radio']:focus-visible{border-radius:8px}@keyframes Loading{from{background-position:0 0}to{background-position:28px 0}}a.sf-loading.sf-button:not([href]),.sf-loading:disabled,.sf-loading.sf-button:disabled,.sf-loading.sf-input:not([type='color']):disabled{--c1:transparent;--c2:hsl(var(--sf-form-c-loading)/5%);cursor:progress;background:repeating-linear-gradient(45deg,var(--c1),var(--c1) 10px,var(--c2) 10px,var(--c2) 20px);background-size:28px 100%;animation:Loading .3s linear infinite}html.var a.sf-loading.sf-button:not([href]),html.var .sf-loading:disabled,html.var .sf-loading.sf-button:disabled,html.var .sf-loading.sf-input:not([type='color']):disabled{background:repeating-linear-gradient(45deg,transparent,transparent 10px,hsla(0,0%,10%,0.05) 10px,hsla(0,0%,10%,0.05) 20px)}html .sf-description,html .sf-invalid,html .sf-valid{display:none;color:hsl(var(--sf-form-c-txt)/40%);font-size:var(--sf-form-fz-small);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-transform:none;margin:0.5em 0 0;padding:0 0 0.5em}html .sf-description{display:block}html .sf-invalid{color:hsl(var(--sf-form-c-error))}html .sf-valid:not(.sf-description){color:hsl(var(--sf-form-c-txt))}.show.sf-description,.show.sf-invalid,.show.sf-valid{display:block}.hide.sf-description,.hide.sf-invalid,.hide.sf-valid{display:none}.validates:focus:invalid~.sf-invalid,.validates:focus:valid~.sf-valid,.validates:focus:valid~.sf-description.sf-valid{display:block}.validates:focus:invalid~.validates~.sf-invalid,.validates:focus:valid~.validates~.sf-valid,.validates:focus:valid~.validates~.sf-description.sf-valid{display:none}.validates:focus~.sf-description{display:none}.validates:focus~.validates~.sf-description{display:block}.error:not(:disabled)+.sf-invalid,.error:not(:disabled)+.sf-valid+.sf-invalid,.error:not(:disabled)+.sf-description+.sf-invalid{display:block !important}.error:not(:disabled)+.sf-invalid+.sf-valid,.error:not(:disabled)+.sf-invalid+.sf-description,.error:not(:disabled)+.sf-description,.error:not(:disabled)+.sf-description+.sf-valid,.error:not(:disabled)+.sf-valid,.error:not(:disabled)+.sf-valid+.sf-description{display:none !important}.validates input[type='checkbox']~.sf-description{display:none}.validates input[type='checkbox']:invalid~.sf-invalid{display:block}.validates input[type='checkbox']:valid~.sf-valid{display:block}.validates:required:invalid:not(:focus){border-bottom-color:hsl(var(--sf-form-c-warning))}.validates:required:invalid:not(:disabled){border-bottom-color:hsl(var(--sf-form-c-warning))}.validates input[type='radio']:invalid::before,.validates input[type='checkbox']:invalid::before{border-color:hsl(var(--sf-form-c-error))}.error:not(:disabled),.validates:required:invalid:focus{border-bottom-color:hsl(var(--sf-form-c-error));outline:none}label.validates.sf-switch .sf-description,label.validates.sf-switch .sf-valid,label.validates.sf-switch .sf-invalid,label.validates.sf-checkbox .sf-description,label.validates.sf-checkbox .sf-valid,label.validates.sf-checkbox .sf-invalid{width:100%;line-height:var(--sf-lh-normal)}form.validates:invalid .sf-button[type='submit']{cursor:not-allowed;text-decoration:none;opacity:var(--sf-disabled);-webkit-text-fill-color:hsl(var(--sf-form-c-txt))}html.var .sf-description,html.var .sf-invalid,html.var .sf-valid{color:hsla(0,0%,10%,0.4);font-size:12px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'}html.var label.validates.sf-switch .sf-description,html.var label.validates.sf-switch .sf-valid,html.var label.validates.sf-switch .sf-invalid,html.var label.validates.sf-checkbox .sf-description,html.var label.validates.sf-checkbox .sf-valid,html.var label.validates.sf-checkbox .sf-invalid{line-height:1.1875}html.var .sf-invalid{color:hsl(0,100%,60%)}html.var .error:not(:disabled){border-bottom-color:hsl(0,100%,60%)}html.var .validates:invalid:required{border-bottom-color:hsl(39,100%,50%)}html.var .validates:invalid:focus{border-bottom-color:hsl(0,100%,60%)}html.var[data-theme='dark'] .sf-select::-ms-expand,html.var.dark .sf-select::-ms-expand{color:hsl(0,0%,90%)}html.var[data-theme='dark'] .sf-input[type='file']::-webkit-file-upload-button, html.var.dark .sf-input[type='file']::-webkit-file-upload-button{color:hsl(0,0%,90%);background-color:hsla(0,0%,20%,0.2);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='file']::file-selector-button,html.var.dark .sf-input[type='file']::file-selector-button{color:hsl(0,0%,90%);background-color:hsla(0,0%,20%,0.2);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='file']:focus-visible::-webkit-file-upload-button, html.var.dark .sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-input[type='file']:focus-visible::file-selector-button,html.var.dark .sf-input[type='file']:focus-visible::file-selector-button{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-button,html.var[data-theme='dark'] .sf-input,html.var[data-theme='dark'] .sf-textarea,html.var[data-theme='dark'] .sf-select,html.var[data-theme='dark'] option,html.var.dark .sf-button,html.var.dark .sf-input,html.var.dark .sf-textarea,html.var.dark .sf-select,html.var.dark option{color:hsl(0,0%,90%);background-color:hsl(0,0%,20%);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-description,html.var[data-theme='dark'] .sf-valid,html.var.dark .sf-description,html.var.dark .sf-valid{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-invalid,html.var.dark .sf-invalid{color:hsl(0,100%,65%)}html.var[data-theme='dark'] .sf-button:focus-visible,html.var[data-theme='dark'] label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var[data-theme='dark'] label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible,html.var[data-theme='dark'] .sf-input:focus,html.var[data-theme='dark'] .sf-input[type='color']:focus-visible,html.var[data-theme='dark'] .sf-input[type='image']:focus-visible,html.var[data-theme='dark'] .sf-input[type='range']:focus-visible,html.var[data-theme='dark'] .sf-textarea:focus-visible,html.var[data-theme='dark'] .sf-select:focus-visible,html.var.dark .sf-button:focus-visible,html.var.dark label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var.dark label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible,html.var.dark .sf-input:focus,html.var.dark .sf-input[type='color']:focus-visible,html.var.dark .sf-input[type='image']:focus-visible,html.var.dark .sf-input[type='range']:focus-visible,html.var.dark .sf-textarea:focus-visible,html.var.dark .sf-select:focus-visible{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-input[type='color']::-webkit-color-swatch,html.var.dark .sf-input[type='color']::-webkit-color-swatch{border-color:hsl(0,0%,100%)}html.var[data-theme='dark'] .sf-input[type='color']::-moz-color-swatch,html.var.dark .sf-input[type='color']::-moz-color-swatch{border-color:hsl(0,0%,100%)}html.var[data-theme='dark'] .sf-input,html.var.dark .sf-input{border-color:transparent transparent hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input::-moz-placeholder, html.var[data-theme='dark'] .sf-textarea::-moz-placeholder, html.var.dark .sf-input::-moz-placeholder, html.var.dark .sf-textarea::-moz-placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input:-ms-input-placeholder, html.var[data-theme='dark'] .sf-textarea:-ms-input-placeholder, html.var.dark .sf-input:-ms-input-placeholder, html.var.dark .sf-textarea:-ms-input-placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input::placeholder,html.var[data-theme='dark'] .sf-textarea::placeholder,html.var.dark .sf-input::placeholder,html.var.dark .sf-textarea::placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input:-moz-placeholder-shown, html.var.dark .sf-input:-moz-placeholder-shown{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input:-ms-input-placeholder, html.var.dark .sf-input:-ms-input-placeholder{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input:placeholder-shown,html.var.dark .sf-input:placeholder-shown{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='image'],html.var[data-theme='dark'] .sf-input[type='range'],html.var.dark .sf-input[type='image'],html.var.dark .sf-input[type='range']{background:none} +:root{--sf-form-c-white:0 0% 100%;--sf-form-c-info:200 100% 60%;--sf-form-c-error:0 100% 60%;--sf-form-c-success:0 100% 60%;--sf-form-c-warning:39 100% 50%;--sf-form-c-bg:0 0% 90%;--sf-form-c-bd:0 0% 10%;--sf-form-c-loading:0 0% 10%;--sf-form-c-txt:0 0% 10%;--sf-form-dark-c-white:0 0% 100%;--sf-form-dark-c-info:219 79% 66%;--sf-form-dark-c-error:0 100% 65%;--sf-form-dark-c-success:0 100% 65%;--sf-form-dark-c-warning:39 100% 60%;--sf-form-dark-c-bg:0 0% 20%;--sf-form-dark-c-bd:0 0% 100%;--sf-form-dark-c-loading:0 0% 100%;--sf-form-dark-c-txt:0 0% 90%;--sf-form-radius:3px;--sf-form-fz:0.9375rem;--sf-form-p-input-block:0.5em;--sf-form-p-input-inline:0.5em;--sf-form-switch-size:1rem;--sf-form-ff:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';--sf-form-fz-small:0.75rem;--sf-lh-normal:1.1875;--sf-disabled:0.4}html[data-theme='dark'],html.dark{color-scheme:dark;--sf-form-c-white:var(--sf-form-dark-c-white);--sf-form-c-bg:var(--sf-form-dark-c-bg);--sf-form-c-error:var(--sf-form-dark-c-error);--sf-form-c-success:var(--sf-form-dark-c-success);--sf-form-c-warning:var(--sf-form-dark-c-warning);--sf-form-c-info:var(--sf-form-dark-c-info);--sf-form-c-bd:var(--sf-form-dark-c-bd);--sf-form-c-loading:var(--sf-form-dark-c-loading);--sf-form-c-txt:var(--sf-form-dark-c-txt)}@media (prefers-color-scheme:dark){html[data-theme='auto'],html.auto{color-scheme:light dark;--sf-form-c-white:var(--sf-form-dark-c-white);--sf-form-c-bg:var(--sf-form-dark-c-bg);--sf-form-c-error:var(--sf-form-dark-c-error);--sf-form-c-success:var(--sf-form-dark-c-success);--sf-form-c-warning:var(--sf-form-dark-c-warning);--sf-form-c-info:var(--sf-form-dark-c-info);--sf-form-c-bd:var(--sf-form-dark-c-bd);--sf-form-c-loading:var(--sf-form-dark-c-loading);--sf-form-c-txt:var(--sf-form-dark-c-txt)}}.sf-input *,.sf-input *::before,.sf-input *::after{box-sizing:inherit}.sf-input[type='image'],.sf-input[type='range']{cursor:pointer;border:0;padding:0}.sf-input{cursor:auto;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-transform:none;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border-style:solid;border-color:hsl(var(--sf-form-c-bd)/20%);border-width:0 0 1px;border-radius:0;outline:none;width:100%;height:32px;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);box-sizing:border-box;vertical-align:top}.sf-input[type='range']{width:100%}.sf-input[type='image']{width:auto;height:auto}.sf-input[type='time'],.sf-input[type='week'],.sf-input[type='month'],.sf-input[type='date'],.sf-input[type='datetime-local']{-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:start}.sf-input::-webkit-date-and-time-value{text-align:start}.sf-input::-webkit-calendar-picker-indicator{cursor:pointer;outline:none;opacity:0.5}.sf-input:hover::-webkit-calendar-picker-indicator{opacity:1}.sf-input::-moz-placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-input:-ms-input-placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-input::placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-input:focus{border-color:transparent transparent hsl(var(--sf-form-c-info));outline:none}.sf-input[type='color']:focus-visible,.sf-input[type='image']:focus-visible,.sf-input[type='range']:focus-visible{outline:2px solid hsl(var(--sf-form-c-info));outline-offset:2px}.sf-input:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}html.var .sf-input{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2);border-color:hsla(0,0%,10%,0.2);padding:8px}html.var .sf-input::-moz-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input:-ms-input-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input::placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input:-moz-placeholder-shown{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:-ms-input-placeholder{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:placeholder-shown{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:focus{border-color:hsl(200,100%,60%)}html.var .sf-input[type='image'],html.var .sf-input[type='range']{background:none}html.var .sf-input[type='color']:focus-visible,html.var .sf-input[type='image']:focus-visible,html.var .sf-input[type='range']:focus-visible{outline:2px solid hsl(200,100%,60%)}html.var .sf-input:disabled{opacity:0.4}.sf-button{cursor:pointer;display:inline-block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);text-align:center;text-decoration:none;text-transform:none;border-radius:var(--sf-form-radius);height:32px;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);box-sizing:border-box;vertical-align:baseline}a.sf-button:not([href]),.sf-button:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-button:focus-visible{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}html.var .sf-button{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);border-radius:3px;padding:8px}html.var a.sf-button:not([href]),html.var .sf-button:disabled{opacity:0.4}html.var .sf-button:focus-visible{outline:1px solid hsl(200,100%,60%)}label.sf-radio,label.sf-checkbox{box-sizing:border-box}label.sf-radio *,label.sf-radio *::before,label.sf-radio *::after,label.sf-checkbox *,label.sf-checkbox *::before,label.sf-checkbox *::after{box-sizing:inherit}label.sf-radio input,label.sf-checkbox input,label.sf-radio input::before,label.sf-checkbox input::before{width:16px;height:16px}label.sf-radio input,label.sf-radio input~*,label.sf-checkbox input,label.sf-checkbox input~*{cursor:pointer}label.sf-radio input:disabled,label.sf-radio input:disabled~*,label.sf-checkbox input:disabled,label.sf-checkbox input:disabled~*{cursor:not-allowed;opacity:var(--sf-disabled)}label.sf-radio input,label.sf-checkbox input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;margin:0 0 -2px;padding:0;vertical-align:baseline}label.sf-radio input::before,label.sf-checkbox input::before{top:0;left:0;position:absolute;width:16px;height:16px;content:'';background-color:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%)}label.sf-radio input::after,label.sf-checkbox input::after{top:3px;left:3px;right:3px;bottom:3px;position:absolute;content:''}label.sf-radio input:checked::before,label.sf-checkbox input:checked::before{border-color:hsl(var(--sf-form-c-info))}label.sf-radio input:checked::after,label.sf-checkbox input:checked::after{background-color:hsl(var(--sf-form-c-info))}label.sf-radio input::before,label.sf-radio input::after{border-radius:50%}.sf-radio input:focus-visible,.sf-checkbox input:focus-visible{border-color:transparent;outline:2px solid hsl(var(--sf-form-c-info));outline-offset:2px}.sf-radio input:focus-visible{border-radius:50%}html.var label.sf-radio input:disabled,html.var label.sf-radio input:disabled~*,html.var label.sf-checkbox input:disabled,html.var label.sf-checkbox input:disabled~*{opacity:0.4}html.var label.sf-radio input::before,html.var label.sf-checkbox input::before{border-color:hsla(0,0%,10%,0.2)}html.var label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible{outline-color:hsl(200,100%,60%)}.sf-select,.sf-select option{font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:var(--sf-lh-normal);text-transform:none}.sf-select{padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);cursor:pointer;background:hsl(var(--sf-form-c-bg)/20%);border-width:1px;border-style:solid;border-color:hsl(var(--sf-form-c-bd)/20%);border-radius:0;width:100%;height:auto;overflow:auto}.sf-select option{padding:calc(var(--sf-form-p-input-block) / 2) var(--sf-form-p-input-inline)}.sf-select optgroup{padding:calc(var(--sf-form-p-input-block) / 2) 0 0}.sf-select:not([multiple]){height:32px;padding:0 var(--sf-form-p-input-inline);border-width:0 0 1px}.sf-select::-ms-expand{border:0;background:none}.sf-select:focus-visible{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}.sf-select:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}html.var .sf-select,html.var .sf-select option{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'}html.var .sf-select:not([multiple]){padding:0 0 0 8px}html.var .sf-select{padding:8px 0 8px 8px;color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2);border-color:hsla(0,0%,10%,0.2)}html.var .sf-select:disabled{opacity:0.4}.sf-textarea{font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1.499535;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);width:100%;max-width:100%;min-height:calc((1.499535em + 2px + var(--sf-form-p-input-block)) * 4);padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);border-radius:var(--sf-form-radius);resize:vertical;overflow:auto;box-sizing:border-box}.sf-textarea::-moz-placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-textarea:-ms-input-placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-textarea::placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-textarea:disabled{cursor:not-allowed;resize:none;opacity:var(--sf-disabled)}.sf-textarea:focus-visible{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}html.var .sf-textarea{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2);border:1px solid hsla(0,0%,10%,0.2);min-height:calc((1.499535em + 2px + 0.5em) * 4);padding:8px;border-radius:3px}html.var .sf-textarea::-moz-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea:-ms-input-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea::placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea:disabled{opacity:0.4}html.var .sf-textarea:focus:valid{border-color:hsl(200,100%,60%)}.sf-input[type='color']{cursor:pointer;width:32px;height:32px;background:conic-gradient(from 0,yellow,darkorange,red,fuchsia,blue,cyan,lime,yellowgreen,yellow);padding:0;border:0;border-radius:50%}.sf-input[type='color']:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-input[type='color']::-webkit-color-swatch-wrapper{padding:3px}.sf-input[type='color']::-webkit-color-swatch{border:2px solid hsl(var(--sf-form-c-white));border-radius:50%}.sf-input[type='color']::-moz-color-swatch{border:2px solid hsl(var(--sf-form-c-white));border-radius:50%}.sf-input[type='color']:focus-visible{border-radius:50%}html.var .sf-input[type='color']:disabled{opacity:0.4}html.var .sf-input[type='color']::-webkit-color-swatch{border:2px solid hsl(0,0%,100%)}html.var .sf-input[type='color']::-moz-color-swatch{border:2px solid hsl(0,0%,100%)}.sf-input[type='file']{cursor:pointer;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;border:0;width:auto;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sf-input[type='file']::-webkit-file-upload-button{cursor:pointer;display:inline-block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-align:center;text-transform:none;text-decoration:none;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);height:32px;border-radius:var(--sf-form-radius)}.sf-input[type='file']::file-selector-button{cursor:pointer;display:inline-block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-align:center;text-transform:none;text-decoration:none;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);height:32px;border-radius:var(--sf-form-radius)}.sf-input[type='file']:focus-visible{outline:none}.sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}.sf-input[type='file']:focus-visible::file-selector-button{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}.sf-input[type='file']:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-input[type='file']:disabled::-webkit-file-upload-button{cursor:not-allowed}.sf-input[type='file']:disabled::file-selector-button{cursor:not-allowed}html.var .sf-input[type='file']{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';padding:0}html.var .sf-input[type='file']::-webkit-file-upload-button{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);border-radius:3px}html.var .sf-input[type='file']::file-selector-button{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);border-radius:3px}html.var .sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline:1px solid hsl(200,100%,60%)}html.var .sf-input[type='file']:focus-visible::file-selector-button{outline:1px solid hsl(200,100%,60%)}html.var .sf-input[type='file']:disabled{opacity:0.4}.sf-switch{box-sizing:border-box;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-transform:none}.sf-switch.multiple *,.sf-switch.multiple *::before,.sf-switch.multiple *::after{box-sizing:inherit}label.sf-switch input[type='checkbox']{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:none;padding:0;margin:0;width:calc(var(--sf-form-switch-size) * 2);height:var(--sf-form-switch-size);vertical-align:text-top}label.sf-switch input[type='checkbox']::before{cursor:pointer;top:0;left:0;position:absolute;width:calc(var(--sf-form-switch-size) * 2);height:var(--sf-form-switch-size);content:'';background:hsl(var(--sf-form-c-bd)/20%);border-radius:calc(var(--sf-form-switch-size) / 2)}label.sf-switch input[type='checkbox']::after{cursor:pointer;top:2px;left:2px;position:absolute;width:calc(var(--sf-form-switch-size) - 2px * 2);height:calc(var(--sf-form-switch-size) - 2px * 2);content:'';background:hsl(var(--sf-form-c-white));border-radius:calc(var(--sf-form-switch-size) / 2);box-shadow:0 0 0 1px hsl(var(--sf-form-c-white));transition:transform 0.05s ease-in}label.sf-switch input[type='checkbox']:checked::before{background:hsl(var(--sf-form-c-info))}label.sf-switch input[type='checkbox']:checked::after{transform:translate3d(var(--sf-form-switch-size),0,0)}label.sf-switch input[type='radio']~*,label.sf-switch input[type='checkbox']~*{cursor:pointer}.sf-switch.multiple .sf-switch-toggle{display:inline-block;background:hsl(var(--sf-form-c-bg)/20%);box-shadow:1px 2px 8px 0 hsl(var(--sf-form-c-bd)/15%)}.sf-switch.multiple .sf-switch-toggle *{display:inline-block}.sf-switch.multiple .sf-switch-toggle label{position:relative}.sf-switch.multiple .sf-switch-toggle span{font-size:var(--sf-form-fz-small);text-align:center;min-width:32px;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);background:hsl(var(--sf-form-c-bd)/5%)}.sf-switch.multiple input[type='checkbox'],.sf-switch.multiple input[type='radio']{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;top:0;left:0;right:0;bottom:0;position:absolute;z-index:1;width:100%;height:100%;padding:0;margin:0;border:0;opacity:0}.sf-switch.multiple input[type='checkbox']::before,.sf-switch.multiple input[type='radio']::before,.sf-switch.multiple input[type='checkbox']::after,.sf-switch.multiple input[type='radio']::after{content:none}.sf-switch.multiple input[type='checkbox']:checked~span,.sf-switch.multiple input[type='radio']:checked~span{color:hsl(var(--sf-form-c-white));background:hsl(var(--sf-form-c-info))}.sf-switch.multiple.vert .sf-switch-toggle{-ms-flex-flow:column;flex-flow:column}.sf-switch.multiple .sf-switch-description{font-size:var(--sf-form-fz-small);margin:0.5em 0 0;padding:0 0 0.5em}.sf-switch input[type='checkbox']:disabled,.sf-switch input[type='checkbox']:disabled::after,.sf-switch input[type='checkbox']:disabled::before,.sf-switch input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='checkbox']:disabled,.sf-switch.multiple input[type='radio']:disabled,.sf-switch.multiple input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='radio']:disabled~*{cursor:not-allowed}.sf-switch input[type='checkbox']:disabled,.sf-switch input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='radio']:disabled~*{opacity:var(--sf-disabled)}.sf-switch input[type='checkbox']:focus-visible,.sf-switch input[type='radio']:focus-visible{border-color:transparent;outline:2px solid hsl(var(--sf-form-c-info))}.sf-switch:not(.multiple) input[type='checkbox']:focus-visible,.sf-switch:not(.multiple) input[type='radio']:focus-visible{border-radius:calc(var(--sf-form-switch-size) / 2)}html.var .sf-switch{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'}html.var label.sf-switch input[type='checkbox']{width:16px;height:16px}html.var label.sf-switch input[type='checkbox']::before{width:16px;height:16px;background:hsla(0,0%,10%,0.2);border-radius:8px}html.var label.sf-switch input[type='checkbox']::after{width:28px;height:28px;background:hsl(0,0%,100%);border-radius:8px;box-shadow:0 0 0 1px hsl(0,0%,100%)}html.var label.sf-switch input[type='checkbox']:checked::before{background:hsl(200,100%,60%)}html.var .sf-switch.multiple .sf-switch-toggle{background:hsla(0,0%,90%,0.2);box-shadow:1px 2px 8px 0 hsla(0,0%,10%,0.15)}html.var .sf-switch.multiple .sf-switch-toggle span{font-size:12px;padding:8px;background:hsla(0,0%,10%,0.1)}html.var .sf-switch.multiple input[type='checkbox']:checked~span,html.var .sf-switch.multiple input[type='radio']:checked~span{color:hsl(0,0%,100%);background:hsl(200,100%,60%)}html.var .sf-switch.multiple .sf-switch-description{font-size:12px}html.var .sf-switch input[type='checkbox']:disabled~*,html.var .sf-switch.multiple input[type='checkbox']:disabled~*,html.var .sf-switch.multiple input[type='radio']:disabled~*{opacity:0.4}html.var .sf-switch input[type='checkbox']:focus-visible,html.var .sf-switch input[type='radio']:focus-visible{outline:2px solid hsl(200,100%,60%)}html.var .sf-switch:not(.multiple) input[type='checkbox']:focus-visible,html.var .sf-switch:not(.multiple) input[type='radio']:focus-visible{border-radius:8px}@keyframes Loading{from{background-position:0 0}to{background-position:28px 0}}a.sf-loading.sf-button:not([href]),.sf-loading:disabled,.sf-loading.sf-button:disabled,.sf-loading.sf-input:not([type='color']):disabled{--c1:transparent;--c2:hsl(var(--sf-form-c-loading)/5%);cursor:progress;background:repeating-linear-gradient(45deg,var(--c1),var(--c1) 10px,var(--c2) 10px,var(--c2) 20px);background-size:28px 100%;animation:Loading .3s linear infinite}html.var a.sf-loading.sf-button:not([href]),html.var .sf-loading:disabled,html.var .sf-loading.sf-button:disabled,html.var .sf-loading.sf-input:not([type='color']):disabled{background:repeating-linear-gradient(45deg,transparent,transparent 10px,hsla(0,0%,10%,0.05) 10px,hsla(0,0%,10%,0.05) 20px)}.sf-description,.sf-invalid,.sf-valid{color:hsl(var(--sf-form-c-txt)/40%);font-size:var(--sf-form-fz-small);font-family:var(--sf-form-ff);font-weight:300;line-height:1;text-transform:none;margin:0.5em 0 0;padding:0 0 0.5em}html .sf-description,html .sf-invalid,html .sf-valid{display:none}html .sf-description{display:block}.sf-invalid{color:hsl(var(--sf-form-c-error))}.sf-valid:not(.sf-description){color:hsl(var(--sf-form-c-txt))}.show.sf-description,.show.sf-invalid,.show.sf-valid{display:block}.hide.sf-description,.hide.sf-invalid,.hide.sf-valid{display:none}.validates:focus:invalid~.sf-invalid,.validates:focus:valid~.sf-valid,.validates:focus:valid~.sf-description.sf-valid{display:block}.validates:focus:invalid~.validates~.sf-invalid,.validates:focus:valid~.validates~.sf-valid,.validates:focus:valid~.validates~.sf-description.sf-valid{display:none}.validates:focus~.sf-description{display:none}.validates:focus~.validates~.sf-description{display:block}.error:not(:disabled)+.sf-invalid,.error:not(:disabled)+.sf-valid+.sf-invalid,.error:not(:disabled)+.sf-description+.sf-invalid{display:block !important}.error:not(:disabled)+.sf-invalid+.sf-valid,.error:not(:disabled)+.sf-invalid+.sf-description,.error:not(:disabled)+.sf-description,.error:not(:disabled)+.sf-description+.sf-valid,.error:not(:disabled)+.sf-valid,.error:not(:disabled)+.sf-valid+.sf-description{display:none !important}.validates input[type='checkbox']~.sf-description{display:none}.validates input[type='checkbox']:invalid~.sf-invalid{display:block}.validates input[type='checkbox']:valid~.sf-valid{display:block}.validates:required:invalid:not(:focus){border-bottom-color:hsl(var(--sf-form-c-warning))}.validates:required:invalid:not(:disabled){border-bottom-color:hsl(var(--sf-form-c-warning))}.validates input[type='radio']:invalid::before,.validates input[type='checkbox']:invalid::before{border-color:hsl(var(--sf-form-c-error))}.error:not(:disabled),.validates:required:invalid:focus{border-bottom-color:hsl(var(--sf-form-c-error));outline:none}label.validates.sf-switch .sf-description,label.validates.sf-switch .sf-valid,label.validates.sf-switch .sf-invalid,label.validates.sf-checkbox .sf-description,label.validates.sf-checkbox .sf-valid,label.validates.sf-checkbox .sf-invalid{width:100%;line-height:var(--sf-lh-normal)}form.validates:invalid .sf-button[type='submit']{cursor:not-allowed;text-decoration:none;opacity:var(--sf-disabled);-webkit-text-fill-color:hsl(var(--sf-form-c-txt))}html.var .sf-description,html.var .sf-invalid,html.var .sf-valid{color:hsla(0,0%,10%,0.4);font-size:12px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'}html.var label.validates.sf-switch .sf-description,html.var label.validates.sf-switch .sf-valid,html.var label.validates.sf-switch .sf-invalid,html.var label.validates.sf-checkbox .sf-description,html.var label.validates.sf-checkbox .sf-valid,html.var label.validates.sf-checkbox .sf-invalid{line-height:1.1875}html.var .sf-invalid{color:hsl(0,100%,60%)}html.var .error:not(:disabled){border-bottom-color:hsl(0,100%,60%)}html.var .validates:invalid:required{border-bottom-color:hsl(39,100%,50%)}html.var .validates:invalid:focus{border-bottom-color:hsl(0,100%,60%)}html.var[data-theme='dark'] .sf-select::-ms-expand,html.var.dark .sf-select::-ms-expand{color:hsl(0,0%,90%)}html.var[data-theme='dark'] .sf-input[type='file']::-webkit-file-upload-button, html.var.dark .sf-input[type='file']::-webkit-file-upload-button{color:hsl(0,0%,90%);background-color:hsla(0,0%,20%,0.2);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='file']::file-selector-button,html.var.dark .sf-input[type='file']::file-selector-button{color:hsl(0,0%,90%);background-color:hsla(0,0%,20%,0.2);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='file']:focus-visible::-webkit-file-upload-button, html.var.dark .sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-input[type='file']:focus-visible::file-selector-button,html.var.dark .sf-input[type='file']:focus-visible::file-selector-button{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-button,html.var[data-theme='dark'] .sf-input,html.var[data-theme='dark'] .sf-textarea,html.var[data-theme='dark'] .sf-select,html.var[data-theme='dark'] option,html.var.dark .sf-button,html.var.dark .sf-input,html.var.dark .sf-textarea,html.var.dark .sf-select,html.var.dark option{color:hsl(0,0%,90%);background-color:hsl(0,0%,20%);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-description,html.var[data-theme='dark'] .sf-valid,html.var.dark .sf-description,html.var.dark .sf-valid{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-invalid,html.var.dark .sf-invalid{color:hsl(0,100%,65%)}html.var[data-theme='dark'] .sf-button:focus-visible,html.var[data-theme='dark'] label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var[data-theme='dark'] label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible,html.var[data-theme='dark'] .sf-input:focus,html.var[data-theme='dark'] .sf-input[type='color']:focus-visible,html.var[data-theme='dark'] .sf-input[type='image']:focus-visible,html.var[data-theme='dark'] .sf-input[type='range']:focus-visible,html.var[data-theme='dark'] .sf-textarea:focus-visible,html.var[data-theme='dark'] .sf-select:focus-visible,html.var.dark .sf-button:focus-visible,html.var.dark label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var.dark label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible,html.var.dark .sf-input:focus,html.var.dark .sf-input[type='color']:focus-visible,html.var.dark .sf-input[type='image']:focus-visible,html.var.dark .sf-input[type='range']:focus-visible,html.var.dark .sf-textarea:focus-visible,html.var.dark .sf-select:focus-visible{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-input[type='color']::-webkit-color-swatch,html.var.dark .sf-input[type='color']::-webkit-color-swatch{border-color:hsl(0,0%,100%)}html.var[data-theme='dark'] .sf-input[type='color']::-moz-color-swatch,html.var.dark .sf-input[type='color']::-moz-color-swatch{border-color:hsl(0,0%,100%)}html.var[data-theme='dark'] .sf-input,html.var.dark .sf-input{border-color:transparent transparent hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input::-moz-placeholder, html.var[data-theme='dark'] .sf-textarea::-moz-placeholder, html.var.dark .sf-input::-moz-placeholder, html.var.dark .sf-textarea::-moz-placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input:-ms-input-placeholder, html.var[data-theme='dark'] .sf-textarea:-ms-input-placeholder, html.var.dark .sf-input:-ms-input-placeholder, html.var.dark .sf-textarea:-ms-input-placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input::placeholder,html.var[data-theme='dark'] .sf-textarea::placeholder,html.var.dark .sf-input::placeholder,html.var.dark .sf-textarea::placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input:-moz-placeholder-shown, html.var.dark .sf-input:-moz-placeholder-shown{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input:-ms-input-placeholder, html.var.dark .sf-input:-ms-input-placeholder{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input:placeholder-shown,html.var.dark .sf-input:placeholder-shown{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='image'],html.var[data-theme='dark'] .sf-input[type='range'],html.var.dark .sf-input[type='image'],html.var.dark .sf-input[type='range']{background:none} diff --git a/src/validate.css b/src/validate.css index 8e49763..08c6f02 100644 --- a/src/validate.css +++ b/src/validate.css @@ -5,13 +5,12 @@ --sf-disabled: 0.4; } -html .sf-description, html .sf-invalid, html .sf-valid { - display: none; +.sf-description, .sf-invalid, .sf-valid { color: hsl(var(--sf-form-c-txt) / 40%); font-size: var(--sf-form-fz-small); font-family: var(--sf-form-ff); - font-weight: 400; + font-weight: 300; line-height: 1; text-transform: none; @@ -20,10 +19,11 @@ html .sf-description, html .sf-invalid, html .sf-valid { padding: 0 0 0.5em; } +html .sf-description, html .sf-invalid, html .sf-valid { display: none } html .sf-description { display: block } -html .sf-invalid { color: hsl(var(--sf-form-c-error)) } -html .sf-valid:not(.sf-description) { color: hsl(var(--sf-form-c-txt)) } +.sf-invalid { color: hsl(var(--sf-form-c-error)) } +.sf-valid:not(.sf-description) { color: hsl(var(--sf-form-c-txt)) } .show.sf-description, .show.sf-invalid, .show.sf-valid { display: block } .hide.sf-description, .hide.sf-invalid, .hide.sf-valid { display: none } From 5c6ab125d46cfdc9b3c08ee7d472512fd37e1b58 Mon Sep 17 00:00:00 2001 From: Sarmaged <3858245+Sarmaged@users.noreply.github.com> Date: Fri, 10 Jan 2025 02:01:22 +0300 Subject: [PATCH 3/4] chore: changed comment --- src/var.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/var.css b/src/var.css index f1abbf7..0e7bbc0 100644 --- a/src/var.css +++ b/src/var.css @@ -10,7 +10,7 @@ --sf-form-c-loading: 0 0% 10%; --sf-form-c-txt: 0 0% 10%; - /* colors dark theme */ + /* colors for dark theme */ --sf-form-dark-c-white: 0 0% 100%; --sf-form-dark-c-info: 219 79% 66%; --sf-form-dark-c-error: 0 100% 65%; From 6a19e94c5b35c5664f7b9bddbdbeb55e5d037a3c Mon Sep 17 00:00:00 2001 From: Sarmaged <3858245+Sarmaged@users.noreply.github.com> Date: Fri, 10 Jan 2025 02:16:24 +0300 Subject: [PATCH 4/4] fix: variables --- form.css | 2 +- src/button.css | 8 ++--- src/checkbox-radio.css | 10 +++--- src/color.css | 4 +-- src/file.css | 8 ++--- src/input.css | 12 +++---- src/loading.css | 2 +- src/select.css | 6 ++-- src/switch.css | 20 ++++++------ src/textarea.css | 10 +++--- src/validate.css | 16 ++++----- src/var.css | 74 +++++++++++++++++++++--------------------- 12 files changed, 86 insertions(+), 86 deletions(-) diff --git a/form.css b/form.css index fbd7451..de6b94c 100644 --- a/form.css +++ b/form.css @@ -1,3 +1,3 @@ /*! style-forge.form 2025.1.10 | MIT License | https://github.com/Style-Forge/form */ -:root{--sf-form-c-white:0 0% 100%;--sf-form-c-info:200 100% 60%;--sf-form-c-error:0 100% 60%;--sf-form-c-success:0 100% 60%;--sf-form-c-warning:39 100% 50%;--sf-form-c-bg:0 0% 90%;--sf-form-c-bd:0 0% 10%;--sf-form-c-loading:0 0% 10%;--sf-form-c-txt:0 0% 10%;--sf-form-dark-c-white:0 0% 100%;--sf-form-dark-c-info:219 79% 66%;--sf-form-dark-c-error:0 100% 65%;--sf-form-dark-c-success:0 100% 65%;--sf-form-dark-c-warning:39 100% 60%;--sf-form-dark-c-bg:0 0% 20%;--sf-form-dark-c-bd:0 0% 100%;--sf-form-dark-c-loading:0 0% 100%;--sf-form-dark-c-txt:0 0% 90%;--sf-form-radius:3px;--sf-form-fz:0.9375rem;--sf-form-p-input-block:0.5em;--sf-form-p-input-inline:0.5em;--sf-form-switch-size:1rem;--sf-form-ff:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';--sf-form-fz-small:0.75rem;--sf-lh-normal:1.1875;--sf-disabled:0.4}html[data-theme='dark'],html.dark{color-scheme:dark;--sf-form-c-white:var(--sf-form-dark-c-white);--sf-form-c-bg:var(--sf-form-dark-c-bg);--sf-form-c-error:var(--sf-form-dark-c-error);--sf-form-c-success:var(--sf-form-dark-c-success);--sf-form-c-warning:var(--sf-form-dark-c-warning);--sf-form-c-info:var(--sf-form-dark-c-info);--sf-form-c-bd:var(--sf-form-dark-c-bd);--sf-form-c-loading:var(--sf-form-dark-c-loading);--sf-form-c-txt:var(--sf-form-dark-c-txt)}@media (prefers-color-scheme:dark){html[data-theme='auto'],html.auto{color-scheme:light dark;--sf-form-c-white:var(--sf-form-dark-c-white);--sf-form-c-bg:var(--sf-form-dark-c-bg);--sf-form-c-error:var(--sf-form-dark-c-error);--sf-form-c-success:var(--sf-form-dark-c-success);--sf-form-c-warning:var(--sf-form-dark-c-warning);--sf-form-c-info:var(--sf-form-dark-c-info);--sf-form-c-bd:var(--sf-form-dark-c-bd);--sf-form-c-loading:var(--sf-form-dark-c-loading);--sf-form-c-txt:var(--sf-form-dark-c-txt)}}.sf-input *,.sf-input *::before,.sf-input *::after{box-sizing:inherit}.sf-input[type='image'],.sf-input[type='range']{cursor:pointer;border:0;padding:0}.sf-input{cursor:auto;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-transform:none;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border-style:solid;border-color:hsl(var(--sf-form-c-bd)/20%);border-width:0 0 1px;border-radius:0;outline:none;width:100%;height:32px;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);box-sizing:border-box;vertical-align:top}.sf-input[type='range']{width:100%}.sf-input[type='image']{width:auto;height:auto}.sf-input[type='time'],.sf-input[type='week'],.sf-input[type='month'],.sf-input[type='date'],.sf-input[type='datetime-local']{-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:start}.sf-input::-webkit-date-and-time-value{text-align:start}.sf-input::-webkit-calendar-picker-indicator{cursor:pointer;outline:none;opacity:0.5}.sf-input:hover::-webkit-calendar-picker-indicator{opacity:1}.sf-input::-moz-placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-input:-ms-input-placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-input::placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-input:focus{border-color:transparent transparent hsl(var(--sf-form-c-info));outline:none}.sf-input[type='color']:focus-visible,.sf-input[type='image']:focus-visible,.sf-input[type='range']:focus-visible{outline:2px solid hsl(var(--sf-form-c-info));outline-offset:2px}.sf-input:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}html.var .sf-input{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2);border-color:hsla(0,0%,10%,0.2);padding:8px}html.var .sf-input::-moz-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input:-ms-input-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input::placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input:-moz-placeholder-shown{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:-ms-input-placeholder{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:placeholder-shown{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:focus{border-color:hsl(200,100%,60%)}html.var .sf-input[type='image'],html.var .sf-input[type='range']{background:none}html.var .sf-input[type='color']:focus-visible,html.var .sf-input[type='image']:focus-visible,html.var .sf-input[type='range']:focus-visible{outline:2px solid hsl(200,100%,60%)}html.var .sf-input:disabled{opacity:0.4}.sf-button{cursor:pointer;display:inline-block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);text-align:center;text-decoration:none;text-transform:none;border-radius:var(--sf-form-radius);height:32px;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);box-sizing:border-box;vertical-align:baseline}a.sf-button:not([href]),.sf-button:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-button:focus-visible{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}html.var .sf-button{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);border-radius:3px;padding:8px}html.var a.sf-button:not([href]),html.var .sf-button:disabled{opacity:0.4}html.var .sf-button:focus-visible{outline:1px solid hsl(200,100%,60%)}label.sf-radio,label.sf-checkbox{box-sizing:border-box}label.sf-radio *,label.sf-radio *::before,label.sf-radio *::after,label.sf-checkbox *,label.sf-checkbox *::before,label.sf-checkbox *::after{box-sizing:inherit}label.sf-radio input,label.sf-checkbox input,label.sf-radio input::before,label.sf-checkbox input::before{width:16px;height:16px}label.sf-radio input,label.sf-radio input~*,label.sf-checkbox input,label.sf-checkbox input~*{cursor:pointer}label.sf-radio input:disabled,label.sf-radio input:disabled~*,label.sf-checkbox input:disabled,label.sf-checkbox input:disabled~*{cursor:not-allowed;opacity:var(--sf-disabled)}label.sf-radio input,label.sf-checkbox input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;margin:0 0 -2px;padding:0;vertical-align:baseline}label.sf-radio input::before,label.sf-checkbox input::before{top:0;left:0;position:absolute;width:16px;height:16px;content:'';background-color:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%)}label.sf-radio input::after,label.sf-checkbox input::after{top:3px;left:3px;right:3px;bottom:3px;position:absolute;content:''}label.sf-radio input:checked::before,label.sf-checkbox input:checked::before{border-color:hsl(var(--sf-form-c-info))}label.sf-radio input:checked::after,label.sf-checkbox input:checked::after{background-color:hsl(var(--sf-form-c-info))}label.sf-radio input::before,label.sf-radio input::after{border-radius:50%}.sf-radio input:focus-visible,.sf-checkbox input:focus-visible{border-color:transparent;outline:2px solid hsl(var(--sf-form-c-info));outline-offset:2px}.sf-radio input:focus-visible{border-radius:50%}html.var label.sf-radio input:disabled,html.var label.sf-radio input:disabled~*,html.var label.sf-checkbox input:disabled,html.var label.sf-checkbox input:disabled~*{opacity:0.4}html.var label.sf-radio input::before,html.var label.sf-checkbox input::before{border-color:hsla(0,0%,10%,0.2)}html.var label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible{outline-color:hsl(200,100%,60%)}.sf-select,.sf-select option{font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:var(--sf-lh-normal);text-transform:none}.sf-select{padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);cursor:pointer;background:hsl(var(--sf-form-c-bg)/20%);border-width:1px;border-style:solid;border-color:hsl(var(--sf-form-c-bd)/20%);border-radius:0;width:100%;height:auto;overflow:auto}.sf-select option{padding:calc(var(--sf-form-p-input-block) / 2) var(--sf-form-p-input-inline)}.sf-select optgroup{padding:calc(var(--sf-form-p-input-block) / 2) 0 0}.sf-select:not([multiple]){height:32px;padding:0 var(--sf-form-p-input-inline);border-width:0 0 1px}.sf-select::-ms-expand{border:0;background:none}.sf-select:focus-visible{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}.sf-select:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}html.var .sf-select,html.var .sf-select option{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'}html.var .sf-select:not([multiple]){padding:0 0 0 8px}html.var .sf-select{padding:8px 0 8px 8px;color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2);border-color:hsla(0,0%,10%,0.2)}html.var .sf-select:disabled{opacity:0.4}.sf-textarea{font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1.499535;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);width:100%;max-width:100%;min-height:calc((1.499535em + 2px + var(--sf-form-p-input-block)) * 4);padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);border-radius:var(--sf-form-radius);resize:vertical;overflow:auto;box-sizing:border-box}.sf-textarea::-moz-placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-textarea:-ms-input-placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-textarea::placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-textarea:disabled{cursor:not-allowed;resize:none;opacity:var(--sf-disabled)}.sf-textarea:focus-visible{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}html.var .sf-textarea{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2);border:1px solid hsla(0,0%,10%,0.2);min-height:calc((1.499535em + 2px + 0.5em) * 4);padding:8px;border-radius:3px}html.var .sf-textarea::-moz-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea:-ms-input-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea::placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea:disabled{opacity:0.4}html.var .sf-textarea:focus:valid{border-color:hsl(200,100%,60%)}.sf-input[type='color']{cursor:pointer;width:32px;height:32px;background:conic-gradient(from 0,yellow,darkorange,red,fuchsia,blue,cyan,lime,yellowgreen,yellow);padding:0;border:0;border-radius:50%}.sf-input[type='color']:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-input[type='color']::-webkit-color-swatch-wrapper{padding:3px}.sf-input[type='color']::-webkit-color-swatch{border:2px solid hsl(var(--sf-form-c-white));border-radius:50%}.sf-input[type='color']::-moz-color-swatch{border:2px solid hsl(var(--sf-form-c-white));border-radius:50%}.sf-input[type='color']:focus-visible{border-radius:50%}html.var .sf-input[type='color']:disabled{opacity:0.4}html.var .sf-input[type='color']::-webkit-color-swatch{border:2px solid hsl(0,0%,100%)}html.var .sf-input[type='color']::-moz-color-swatch{border:2px solid hsl(0,0%,100%)}.sf-input[type='file']{cursor:pointer;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;border:0;width:auto;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sf-input[type='file']::-webkit-file-upload-button{cursor:pointer;display:inline-block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-align:center;text-transform:none;text-decoration:none;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);height:32px;border-radius:var(--sf-form-radius)}.sf-input[type='file']::file-selector-button{cursor:pointer;display:inline-block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-align:center;text-transform:none;text-decoration:none;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);height:32px;border-radius:var(--sf-form-radius)}.sf-input[type='file']:focus-visible{outline:none}.sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}.sf-input[type='file']:focus-visible::file-selector-button{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}.sf-input[type='file']:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-input[type='file']:disabled::-webkit-file-upload-button{cursor:not-allowed}.sf-input[type='file']:disabled::file-selector-button{cursor:not-allowed}html.var .sf-input[type='file']{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';padding:0}html.var .sf-input[type='file']::-webkit-file-upload-button{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);border-radius:3px}html.var .sf-input[type='file']::file-selector-button{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);border-radius:3px}html.var .sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline:1px solid hsl(200,100%,60%)}html.var .sf-input[type='file']:focus-visible::file-selector-button{outline:1px solid hsl(200,100%,60%)}html.var .sf-input[type='file']:disabled{opacity:0.4}.sf-switch{box-sizing:border-box;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-transform:none}.sf-switch.multiple *,.sf-switch.multiple *::before,.sf-switch.multiple *::after{box-sizing:inherit}label.sf-switch input[type='checkbox']{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:none;padding:0;margin:0;width:calc(var(--sf-form-switch-size) * 2);height:var(--sf-form-switch-size);vertical-align:text-top}label.sf-switch input[type='checkbox']::before{cursor:pointer;top:0;left:0;position:absolute;width:calc(var(--sf-form-switch-size) * 2);height:var(--sf-form-switch-size);content:'';background:hsl(var(--sf-form-c-bd)/20%);border-radius:calc(var(--sf-form-switch-size) / 2)}label.sf-switch input[type='checkbox']::after{cursor:pointer;top:2px;left:2px;position:absolute;width:calc(var(--sf-form-switch-size) - 2px * 2);height:calc(var(--sf-form-switch-size) - 2px * 2);content:'';background:hsl(var(--sf-form-c-white));border-radius:calc(var(--sf-form-switch-size) / 2);box-shadow:0 0 0 1px hsl(var(--sf-form-c-white));transition:transform 0.05s ease-in}label.sf-switch input[type='checkbox']:checked::before{background:hsl(var(--sf-form-c-info))}label.sf-switch input[type='checkbox']:checked::after{transform:translate3d(var(--sf-form-switch-size),0,0)}label.sf-switch input[type='radio']~*,label.sf-switch input[type='checkbox']~*{cursor:pointer}.sf-switch.multiple .sf-switch-toggle{display:inline-block;background:hsl(var(--sf-form-c-bg)/20%);box-shadow:1px 2px 8px 0 hsl(var(--sf-form-c-bd)/15%)}.sf-switch.multiple .sf-switch-toggle *{display:inline-block}.sf-switch.multiple .sf-switch-toggle label{position:relative}.sf-switch.multiple .sf-switch-toggle span{font-size:var(--sf-form-fz-small);text-align:center;min-width:32px;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);background:hsl(var(--sf-form-c-bd)/5%)}.sf-switch.multiple input[type='checkbox'],.sf-switch.multiple input[type='radio']{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;top:0;left:0;right:0;bottom:0;position:absolute;z-index:1;width:100%;height:100%;padding:0;margin:0;border:0;opacity:0}.sf-switch.multiple input[type='checkbox']::before,.sf-switch.multiple input[type='radio']::before,.sf-switch.multiple input[type='checkbox']::after,.sf-switch.multiple input[type='radio']::after{content:none}.sf-switch.multiple input[type='checkbox']:checked~span,.sf-switch.multiple input[type='radio']:checked~span{color:hsl(var(--sf-form-c-white));background:hsl(var(--sf-form-c-info))}.sf-switch.multiple.vert .sf-switch-toggle{-ms-flex-flow:column;flex-flow:column}.sf-switch.multiple .sf-switch-description{font-size:var(--sf-form-fz-small);margin:0.5em 0 0;padding:0 0 0.5em}.sf-switch input[type='checkbox']:disabled,.sf-switch input[type='checkbox']:disabled::after,.sf-switch input[type='checkbox']:disabled::before,.sf-switch input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='checkbox']:disabled,.sf-switch.multiple input[type='radio']:disabled,.sf-switch.multiple input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='radio']:disabled~*{cursor:not-allowed}.sf-switch input[type='checkbox']:disabled,.sf-switch input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='radio']:disabled~*{opacity:var(--sf-disabled)}.sf-switch input[type='checkbox']:focus-visible,.sf-switch input[type='radio']:focus-visible{border-color:transparent;outline:2px solid hsl(var(--sf-form-c-info))}.sf-switch:not(.multiple) input[type='checkbox']:focus-visible,.sf-switch:not(.multiple) input[type='radio']:focus-visible{border-radius:calc(var(--sf-form-switch-size) / 2)}html.var .sf-switch{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'}html.var label.sf-switch input[type='checkbox']{width:16px;height:16px}html.var label.sf-switch input[type='checkbox']::before{width:16px;height:16px;background:hsla(0,0%,10%,0.2);border-radius:8px}html.var label.sf-switch input[type='checkbox']::after{width:28px;height:28px;background:hsl(0,0%,100%);border-radius:8px;box-shadow:0 0 0 1px hsl(0,0%,100%)}html.var label.sf-switch input[type='checkbox']:checked::before{background:hsl(200,100%,60%)}html.var .sf-switch.multiple .sf-switch-toggle{background:hsla(0,0%,90%,0.2);box-shadow:1px 2px 8px 0 hsla(0,0%,10%,0.15)}html.var .sf-switch.multiple .sf-switch-toggle span{font-size:12px;padding:8px;background:hsla(0,0%,10%,0.1)}html.var .sf-switch.multiple input[type='checkbox']:checked~span,html.var .sf-switch.multiple input[type='radio']:checked~span{color:hsl(0,0%,100%);background:hsl(200,100%,60%)}html.var .sf-switch.multiple .sf-switch-description{font-size:12px}html.var .sf-switch input[type='checkbox']:disabled~*,html.var .sf-switch.multiple input[type='checkbox']:disabled~*,html.var .sf-switch.multiple input[type='radio']:disabled~*{opacity:0.4}html.var .sf-switch input[type='checkbox']:focus-visible,html.var .sf-switch input[type='radio']:focus-visible{outline:2px solid hsl(200,100%,60%)}html.var .sf-switch:not(.multiple) input[type='checkbox']:focus-visible,html.var .sf-switch:not(.multiple) input[type='radio']:focus-visible{border-radius:8px}@keyframes Loading{from{background-position:0 0}to{background-position:28px 0}}a.sf-loading.sf-button:not([href]),.sf-loading:disabled,.sf-loading.sf-button:disabled,.sf-loading.sf-input:not([type='color']):disabled{--c1:transparent;--c2:hsl(var(--sf-form-c-loading)/5%);cursor:progress;background:repeating-linear-gradient(45deg,var(--c1),var(--c1) 10px,var(--c2) 10px,var(--c2) 20px);background-size:28px 100%;animation:Loading .3s linear infinite}html.var a.sf-loading.sf-button:not([href]),html.var .sf-loading:disabled,html.var .sf-loading.sf-button:disabled,html.var .sf-loading.sf-input:not([type='color']):disabled{background:repeating-linear-gradient(45deg,transparent,transparent 10px,hsla(0,0%,10%,0.05) 10px,hsla(0,0%,10%,0.05) 20px)}.sf-description,.sf-invalid,.sf-valid{color:hsl(var(--sf-form-c-txt)/40%);font-size:var(--sf-form-fz-small);font-family:var(--sf-form-ff);font-weight:300;line-height:1;text-transform:none;margin:0.5em 0 0;padding:0 0 0.5em}html .sf-description,html .sf-invalid,html .sf-valid{display:none}html .sf-description{display:block}.sf-invalid{color:hsl(var(--sf-form-c-error))}.sf-valid:not(.sf-description){color:hsl(var(--sf-form-c-txt))}.show.sf-description,.show.sf-invalid,.show.sf-valid{display:block}.hide.sf-description,.hide.sf-invalid,.hide.sf-valid{display:none}.validates:focus:invalid~.sf-invalid,.validates:focus:valid~.sf-valid,.validates:focus:valid~.sf-description.sf-valid{display:block}.validates:focus:invalid~.validates~.sf-invalid,.validates:focus:valid~.validates~.sf-valid,.validates:focus:valid~.validates~.sf-description.sf-valid{display:none}.validates:focus~.sf-description{display:none}.validates:focus~.validates~.sf-description{display:block}.error:not(:disabled)+.sf-invalid,.error:not(:disabled)+.sf-valid+.sf-invalid,.error:not(:disabled)+.sf-description+.sf-invalid{display:block !important}.error:not(:disabled)+.sf-invalid+.sf-valid,.error:not(:disabled)+.sf-invalid+.sf-description,.error:not(:disabled)+.sf-description,.error:not(:disabled)+.sf-description+.sf-valid,.error:not(:disabled)+.sf-valid,.error:not(:disabled)+.sf-valid+.sf-description{display:none !important}.validates input[type='checkbox']~.sf-description{display:none}.validates input[type='checkbox']:invalid~.sf-invalid{display:block}.validates input[type='checkbox']:valid~.sf-valid{display:block}.validates:required:invalid:not(:focus){border-bottom-color:hsl(var(--sf-form-c-warning))}.validates:required:invalid:not(:disabled){border-bottom-color:hsl(var(--sf-form-c-warning))}.validates input[type='radio']:invalid::before,.validates input[type='checkbox']:invalid::before{border-color:hsl(var(--sf-form-c-error))}.error:not(:disabled),.validates:required:invalid:focus{border-bottom-color:hsl(var(--sf-form-c-error));outline:none}label.validates.sf-switch .sf-description,label.validates.sf-switch .sf-valid,label.validates.sf-switch .sf-invalid,label.validates.sf-checkbox .sf-description,label.validates.sf-checkbox .sf-valid,label.validates.sf-checkbox .sf-invalid{width:100%;line-height:var(--sf-lh-normal)}form.validates:invalid .sf-button[type='submit']{cursor:not-allowed;text-decoration:none;opacity:var(--sf-disabled);-webkit-text-fill-color:hsl(var(--sf-form-c-txt))}html.var .sf-description,html.var .sf-invalid,html.var .sf-valid{color:hsla(0,0%,10%,0.4);font-size:12px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'}html.var label.validates.sf-switch .sf-description,html.var label.validates.sf-switch .sf-valid,html.var label.validates.sf-switch .sf-invalid,html.var label.validates.sf-checkbox .sf-description,html.var label.validates.sf-checkbox .sf-valid,html.var label.validates.sf-checkbox .sf-invalid{line-height:1.1875}html.var .sf-invalid{color:hsl(0,100%,60%)}html.var .error:not(:disabled){border-bottom-color:hsl(0,100%,60%)}html.var .validates:invalid:required{border-bottom-color:hsl(39,100%,50%)}html.var .validates:invalid:focus{border-bottom-color:hsl(0,100%,60%)}html.var[data-theme='dark'] .sf-select::-ms-expand,html.var.dark .sf-select::-ms-expand{color:hsl(0,0%,90%)}html.var[data-theme='dark'] .sf-input[type='file']::-webkit-file-upload-button, html.var.dark .sf-input[type='file']::-webkit-file-upload-button{color:hsl(0,0%,90%);background-color:hsla(0,0%,20%,0.2);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='file']::file-selector-button,html.var.dark .sf-input[type='file']::file-selector-button{color:hsl(0,0%,90%);background-color:hsla(0,0%,20%,0.2);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='file']:focus-visible::-webkit-file-upload-button, html.var.dark .sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-input[type='file']:focus-visible::file-selector-button,html.var.dark .sf-input[type='file']:focus-visible::file-selector-button{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-button,html.var[data-theme='dark'] .sf-input,html.var[data-theme='dark'] .sf-textarea,html.var[data-theme='dark'] .sf-select,html.var[data-theme='dark'] option,html.var.dark .sf-button,html.var.dark .sf-input,html.var.dark .sf-textarea,html.var.dark .sf-select,html.var.dark option{color:hsl(0,0%,90%);background-color:hsl(0,0%,20%);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-description,html.var[data-theme='dark'] .sf-valid,html.var.dark .sf-description,html.var.dark .sf-valid{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-invalid,html.var.dark .sf-invalid{color:hsl(0,100%,65%)}html.var[data-theme='dark'] .sf-button:focus-visible,html.var[data-theme='dark'] label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var[data-theme='dark'] label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible,html.var[data-theme='dark'] .sf-input:focus,html.var[data-theme='dark'] .sf-input[type='color']:focus-visible,html.var[data-theme='dark'] .sf-input[type='image']:focus-visible,html.var[data-theme='dark'] .sf-input[type='range']:focus-visible,html.var[data-theme='dark'] .sf-textarea:focus-visible,html.var[data-theme='dark'] .sf-select:focus-visible,html.var.dark .sf-button:focus-visible,html.var.dark label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var.dark label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible,html.var.dark .sf-input:focus,html.var.dark .sf-input[type='color']:focus-visible,html.var.dark .sf-input[type='image']:focus-visible,html.var.dark .sf-input[type='range']:focus-visible,html.var.dark .sf-textarea:focus-visible,html.var.dark .sf-select:focus-visible{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-input[type='color']::-webkit-color-swatch,html.var.dark .sf-input[type='color']::-webkit-color-swatch{border-color:hsl(0,0%,100%)}html.var[data-theme='dark'] .sf-input[type='color']::-moz-color-swatch,html.var.dark .sf-input[type='color']::-moz-color-swatch{border-color:hsl(0,0%,100%)}html.var[data-theme='dark'] .sf-input,html.var.dark .sf-input{border-color:transparent transparent hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input::-moz-placeholder, html.var[data-theme='dark'] .sf-textarea::-moz-placeholder, html.var.dark .sf-input::-moz-placeholder, html.var.dark .sf-textarea::-moz-placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input:-ms-input-placeholder, html.var[data-theme='dark'] .sf-textarea:-ms-input-placeholder, html.var.dark .sf-input:-ms-input-placeholder, html.var.dark .sf-textarea:-ms-input-placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input::placeholder,html.var[data-theme='dark'] .sf-textarea::placeholder,html.var.dark .sf-input::placeholder,html.var.dark .sf-textarea::placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input:-moz-placeholder-shown, html.var.dark .sf-input:-moz-placeholder-shown{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input:-ms-input-placeholder, html.var.dark .sf-input:-ms-input-placeholder{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input:placeholder-shown,html.var.dark .sf-input:placeholder-shown{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='image'],html.var[data-theme='dark'] .sf-input[type='range'],html.var.dark .sf-input[type='image'],html.var.dark .sf-input[type='range']{background:none} +:root{--sf-c-form-white:0 0% 100%;--sf-c-form-info:200 100% 60%;--sf-c-form-error:0 100% 60%;--sf-c-form-success:0 100% 60%;--sf-c-form-warning:39 100% 50%;--sf-c-form-bg:0 0% 90%;--sf-c-form-bd:0 0% 10%;--sf-c-form-loading:0 0% 10%;--sf-c-form-txt:0 0% 10%;--sf-dark-c-form-white:0 0% 100%;--sf-dark-c-form-info:219 79% 66%;--sf-dark-c-form-error:0 100% 65%;--sf-dark-c-form-success:0 100% 65%;--sf-dark-c-form-warning:39 100% 60%;--sf-dark-c-form-bg:0 0% 20%;--sf-dark-c-form-bd:0 0% 100%;--sf-dark-c-form-loading:0 0% 100%;--sf-dark-c-form-txt:0 0% 90%;--sf-form-radius:3px;--sf-form-fz:0.9375rem;--sf-form-p-input-block:0.5em;--sf-form-p-input-inline:0.5em;--sf-form-switch-size:1rem;--sf-form-ff:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';--sf-form-fz-small:0.75rem;--sf-lh-normal:1.1875;--sf-disabled:0.4}html[data-theme='dark'],html.dark{color-scheme:dark;--sf-c-form-white:var(--sf-dark-c-form-white);--sf-c-form-bg:var(--sf-dark-c-form-bg);--sf-c-form-error:var(--sf-dark-c-form-error);--sf-c-form-success:var(--sf-dark-c-form-success);--sf-c-form-warning:var(--sf-dark-c-form-warning);--sf-c-form-info:var(--sf-dark-c-form-info);--sf-c-form-bd:var(--sf-dark-c-form-bd);--sf-c-form-loading:var(--sf-dark-c-form-loading);--sf-c-form-txt:var(--sf-dark-c-form-txt)}@media (prefers-color-scheme:dark){html[data-theme='auto'],html.auto{color-scheme:light dark;--sf-c-form-white:var(--sf-dark-c-form-white);--sf-c-form-bg:var(--sf-dark-c-form-bg);--sf-c-form-error:var(--sf-dark-c-form-error);--sf-c-form-success:var(--sf-dark-c-form-success);--sf-c-form-warning:var(--sf-dark-c-form-warning);--sf-c-form-info:var(--sf-dark-c-form-info);--sf-c-form-bd:var(--sf-dark-c-form-bd);--sf-c-form-loading:var(--sf-dark-c-form-loading);--sf-c-form-txt:var(--sf-dark-c-form-txt)}}.sf-input *,.sf-input *::before,.sf-input *::after{box-sizing:inherit}.sf-input[type='image'],.sf-input[type='range']{cursor:pointer;border:0;padding:0}.sf-input{cursor:auto;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-transform:none;color:hsl(var(--sf-c-form-txt));background:hsl(var(--sf-c-form-bg)/20%);border-style:solid;border-color:hsl(var(--sf-c-form-bd)/20%);border-width:0 0 1px;border-radius:0;outline:none;width:100%;height:32px;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);box-sizing:border-box;vertical-align:top}.sf-input[type='range']{width:100%}.sf-input[type='image']{width:auto;height:auto}.sf-input[type='time'],.sf-input[type='week'],.sf-input[type='month'],.sf-input[type='date'],.sf-input[type='datetime-local']{-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:start}.sf-input::-webkit-date-and-time-value{text-align:start}.sf-input::-webkit-calendar-picker-indicator{cursor:pointer;outline:none;opacity:0.5}.sf-input:hover::-webkit-calendar-picker-indicator{opacity:1}.sf-input::-moz-placeholder{color:hsl(var(--sf-c-form-txt)/40%)}.sf-input:-ms-input-placeholder{color:hsl(var(--sf-c-form-txt)/40%)}.sf-input::placeholder{color:hsl(var(--sf-c-form-txt)/40%)}.sf-input:focus{border-color:transparent transparent hsl(var(--sf-c-form-info));outline:none}.sf-input[type='color']:focus-visible,.sf-input[type='image']:focus-visible,.sf-input[type='range']:focus-visible{outline:2px solid hsl(var(--sf-c-form-info));outline-offset:2px}.sf-input:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}html.var .sf-input{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2);border-color:hsla(0,0%,10%,0.2);padding:8px}html.var .sf-input::-moz-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input:-ms-input-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input::placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input:-moz-placeholder-shown{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:-ms-input-placeholder{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:placeholder-shown{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:focus{border-color:hsl(200,100%,60%)}html.var .sf-input[type='image'],html.var .sf-input[type='range']{background:none}html.var .sf-input[type='color']:focus-visible,html.var .sf-input[type='image']:focus-visible,html.var .sf-input[type='range']:focus-visible{outline:2px solid hsl(200,100%,60%)}html.var .sf-input:disabled{opacity:0.4}.sf-button{cursor:pointer;display:inline-block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;color:hsl(var(--sf-c-form-txt));background:hsl(var(--sf-c-form-bg)/20%);border:1px solid hsl(var(--sf-c-form-bd)/20%);text-align:center;text-decoration:none;text-transform:none;border-radius:var(--sf-form-radius);height:32px;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);box-sizing:border-box;vertical-align:baseline}a.sf-button:not([href]),.sf-button:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-button:focus-visible{outline:1px solid hsl(var(--sf-c-form-info));outline-offset:-1px}html.var .sf-button{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);border-radius:3px;padding:8px}html.var a.sf-button:not([href]),html.var .sf-button:disabled{opacity:0.4}html.var .sf-button:focus-visible{outline:1px solid hsl(200,100%,60%)}label.sf-radio,label.sf-checkbox{box-sizing:border-box}label.sf-radio *,label.sf-radio *::before,label.sf-radio *::after,label.sf-checkbox *,label.sf-checkbox *::before,label.sf-checkbox *::after{box-sizing:inherit}label.sf-radio input,label.sf-checkbox input,label.sf-radio input::before,label.sf-checkbox input::before{width:16px;height:16px}label.sf-radio input,label.sf-radio input~*,label.sf-checkbox input,label.sf-checkbox input~*{cursor:pointer}label.sf-radio input:disabled,label.sf-radio input:disabled~*,label.sf-checkbox input:disabled,label.sf-checkbox input:disabled~*{cursor:not-allowed;opacity:var(--sf-disabled)}label.sf-radio input,label.sf-checkbox input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;margin:0 0 -2px;padding:0;vertical-align:baseline}label.sf-radio input::before,label.sf-checkbox input::before{top:0;left:0;position:absolute;width:16px;height:16px;content:'';background-color:hsl(var(--sf-c-form-bg)/20%);border:1px solid hsl(var(--sf-c-form-bd)/20%)}label.sf-radio input::after,label.sf-checkbox input::after{top:3px;left:3px;right:3px;bottom:3px;position:absolute;content:''}label.sf-radio input:checked::before,label.sf-checkbox input:checked::before{border-color:hsl(var(--sf-c-form-info))}label.sf-radio input:checked::after,label.sf-checkbox input:checked::after{background-color:hsl(var(--sf-c-form-info))}label.sf-radio input::before,label.sf-radio input::after{border-radius:50%}.sf-radio input:focus-visible,.sf-checkbox input:focus-visible{border-color:transparent;outline:2px solid hsl(var(--sf-c-form-info));outline-offset:2px}.sf-radio input:focus-visible{border-radius:50%}html.var label.sf-radio input:disabled,html.var label.sf-radio input:disabled~*,html.var label.sf-checkbox input:disabled,html.var label.sf-checkbox input:disabled~*{opacity:0.4}html.var label.sf-radio input::before,html.var label.sf-checkbox input::before{border-color:hsla(0,0%,10%,0.2)}html.var label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible{outline-color:hsl(200,100%,60%)}.sf-select,.sf-select option{font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:var(--sf-lh-normal);text-transform:none}.sf-select{padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);cursor:pointer;background:hsl(var(--sf-c-form-bg)/20%);border-width:1px;border-style:solid;border-color:hsl(var(--sf-c-form-bd)/20%);border-radius:0;width:100%;height:auto;overflow:auto}.sf-select option{padding:calc(var(--sf-form-p-input-block) / 2) var(--sf-form-p-input-inline)}.sf-select optgroup{padding:calc(var(--sf-form-p-input-block) / 2) 0 0}.sf-select:not([multiple]){height:32px;padding:0 var(--sf-form-p-input-inline);border-width:0 0 1px}.sf-select::-ms-expand{border:0;background:none}.sf-select:focus-visible{outline:1px solid hsl(var(--sf-c-form-info));outline-offset:-1px}.sf-select:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}html.var .sf-select,html.var .sf-select option{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'}html.var .sf-select:not([multiple]){padding:0 0 0 8px}html.var .sf-select{padding:8px 0 8px 8px;color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2);border-color:hsla(0,0%,10%,0.2)}html.var .sf-select:disabled{opacity:0.4}.sf-textarea{font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1.499535;color:hsl(var(--sf-c-form-txt));background:hsl(var(--sf-c-form-bg)/20%);border:1px solid hsl(var(--sf-c-form-bd)/20%);width:100%;max-width:100%;min-height:calc((1.499535em + 2px + var(--sf-form-p-input-block)) * 4);padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);border-radius:var(--sf-form-radius);resize:vertical;overflow:auto;box-sizing:border-box}.sf-textarea::-moz-placeholder{color:hsl(var(--sf-c-form-txt)/40%)}.sf-textarea:-ms-input-placeholder{color:hsl(var(--sf-c-form-txt)/40%)}.sf-textarea::placeholder{color:hsl(var(--sf-c-form-txt)/40%)}.sf-textarea:disabled{cursor:not-allowed;resize:none;opacity:var(--sf-disabled)}.sf-textarea:focus-visible{outline:1px solid hsl(var(--sf-c-form-info));outline-offset:-1px}html.var .sf-textarea{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2);border:1px solid hsla(0,0%,10%,0.2);min-height:calc((1.499535em + 2px + 0.5em) * 4);padding:8px;border-radius:3px}html.var .sf-textarea::-moz-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea:-ms-input-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea::placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea:disabled{opacity:0.4}html.var .sf-textarea:focus:valid{border-color:hsl(200,100%,60%)}.sf-input[type='color']{cursor:pointer;width:32px;height:32px;background:conic-gradient(from 0,yellow,darkorange,red,fuchsia,blue,cyan,lime,yellowgreen,yellow);padding:0;border:0;border-radius:50%}.sf-input[type='color']:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-input[type='color']::-webkit-color-swatch-wrapper{padding:3px}.sf-input[type='color']::-webkit-color-swatch{border:2px solid hsl(var(--sf-c-form-white));border-radius:50%}.sf-input[type='color']::-moz-color-swatch{border:2px solid hsl(var(--sf-c-form-white));border-radius:50%}.sf-input[type='color']:focus-visible{border-radius:50%}html.var .sf-input[type='color']:disabled{opacity:0.4}html.var .sf-input[type='color']::-webkit-color-swatch{border:2px solid hsl(0,0%,100%)}html.var .sf-input[type='color']::-moz-color-swatch{border:2px solid hsl(0,0%,100%)}.sf-input[type='file']{cursor:pointer;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;border:0;width:auto;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sf-input[type='file']::-webkit-file-upload-button{cursor:pointer;display:inline-block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-align:center;text-transform:none;text-decoration:none;color:hsl(var(--sf-c-form-txt));background:hsl(var(--sf-c-form-bg)/20%);border:1px solid hsl(var(--sf-c-form-bd)/20%);height:32px;border-radius:var(--sf-form-radius)}.sf-input[type='file']::file-selector-button{cursor:pointer;display:inline-block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-align:center;text-transform:none;text-decoration:none;color:hsl(var(--sf-c-form-txt));background:hsl(var(--sf-c-form-bg)/20%);border:1px solid hsl(var(--sf-c-form-bd)/20%);height:32px;border-radius:var(--sf-form-radius)}.sf-input[type='file']:focus-visible{outline:none}.sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline:1px solid hsl(var(--sf-c-form-info));outline-offset:-1px}.sf-input[type='file']:focus-visible::file-selector-button{outline:1px solid hsl(var(--sf-c-form-info));outline-offset:-1px}.sf-input[type='file']:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-input[type='file']:disabled::-webkit-file-upload-button{cursor:not-allowed}.sf-input[type='file']:disabled::file-selector-button{cursor:not-allowed}html.var .sf-input[type='file']{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';padding:0}html.var .sf-input[type='file']::-webkit-file-upload-button{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);border-radius:3px}html.var .sf-input[type='file']::file-selector-button{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);border-radius:3px}html.var .sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline:1px solid hsl(200,100%,60%)}html.var .sf-input[type='file']:focus-visible::file-selector-button{outline:1px solid hsl(200,100%,60%)}html.var .sf-input[type='file']:disabled{opacity:0.4}.sf-switch{box-sizing:border-box;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-transform:none}.sf-switch.multiple *,.sf-switch.multiple *::before,.sf-switch.multiple *::after{box-sizing:inherit}label.sf-switch input[type='checkbox']{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:none;padding:0;margin:0;width:calc(var(--sf-form-switch-size) * 2);height:var(--sf-form-switch-size);vertical-align:text-top}label.sf-switch input[type='checkbox']::before{cursor:pointer;top:0;left:0;position:absolute;width:calc(var(--sf-form-switch-size) * 2);height:var(--sf-form-switch-size);content:'';background:hsl(var(--sf-c-form-bd)/20%);border-radius:calc(var(--sf-form-switch-size) / 2)}label.sf-switch input[type='checkbox']::after{cursor:pointer;top:2px;left:2px;position:absolute;width:calc(var(--sf-form-switch-size) - 2px * 2);height:calc(var(--sf-form-switch-size) - 2px * 2);content:'';background:hsl(var(--sf-c-form-white));border-radius:calc(var(--sf-form-switch-size) / 2);box-shadow:0 0 0 1px hsl(var(--sf-c-form-white));transition:transform 0.05s ease-in}label.sf-switch input[type='checkbox']:checked::before{background:hsl(var(--sf-c-form-info))}label.sf-switch input[type='checkbox']:checked::after{transform:translate3d(var(--sf-form-switch-size),0,0)}label.sf-switch input[type='radio']~*,label.sf-switch input[type='checkbox']~*{cursor:pointer}.sf-switch.multiple .sf-switch-toggle{display:inline-block;background:hsl(var(--sf-c-form-bg)/20%);box-shadow:1px 2px 8px 0 hsl(var(--sf-c-form-bd)/15%)}.sf-switch.multiple .sf-switch-toggle *{display:inline-block}.sf-switch.multiple .sf-switch-toggle label{position:relative}.sf-switch.multiple .sf-switch-toggle span{font-size:var(--sf-form-fz-small);text-align:center;min-width:32px;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);background:hsl(var(--sf-c-form-bd)/5%)}.sf-switch.multiple input[type='checkbox'],.sf-switch.multiple input[type='radio']{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;top:0;left:0;right:0;bottom:0;position:absolute;z-index:1;width:100%;height:100%;padding:0;margin:0;border:0;opacity:0}.sf-switch.multiple input[type='checkbox']::before,.sf-switch.multiple input[type='radio']::before,.sf-switch.multiple input[type='checkbox']::after,.sf-switch.multiple input[type='radio']::after{content:none}.sf-switch.multiple input[type='checkbox']:checked~span,.sf-switch.multiple input[type='radio']:checked~span{color:hsl(var(--sf-c-form-white));background:hsl(var(--sf-c-form-info))}.sf-switch.multiple.vert .sf-switch-toggle{-ms-flex-flow:column;flex-flow:column}.sf-switch.multiple .sf-switch-description{font-size:var(--sf-form-fz-small);margin:0.5em 0 0;padding:0 0 0.5em}.sf-switch input[type='checkbox']:disabled,.sf-switch input[type='checkbox']:disabled::after,.sf-switch input[type='checkbox']:disabled::before,.sf-switch input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='checkbox']:disabled,.sf-switch.multiple input[type='radio']:disabled,.sf-switch.multiple input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='radio']:disabled~*{cursor:not-allowed}.sf-switch input[type='checkbox']:disabled,.sf-switch input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='radio']:disabled~*{opacity:var(--sf-disabled)}.sf-switch input[type='checkbox']:focus-visible,.sf-switch input[type='radio']:focus-visible{border-color:transparent;outline:2px solid hsl(var(--sf-c-form-info))}.sf-switch:not(.multiple) input[type='checkbox']:focus-visible,.sf-switch:not(.multiple) input[type='radio']:focus-visible{border-radius:calc(var(--sf-form-switch-size) / 2)}html.var .sf-switch{font-size:15px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'}html.var label.sf-switch input[type='checkbox']{width:16px;height:16px}html.var label.sf-switch input[type='checkbox']::before{width:16px;height:16px;background:hsla(0,0%,10%,0.2);border-radius:8px}html.var label.sf-switch input[type='checkbox']::after{width:28px;height:28px;background:hsl(0,0%,100%);border-radius:8px;box-shadow:0 0 0 1px hsl(0,0%,100%)}html.var label.sf-switch input[type='checkbox']:checked::before{background:hsl(200,100%,60%)}html.var .sf-switch.multiple .sf-switch-toggle{background:hsla(0,0%,90%,0.2);box-shadow:1px 2px 8px 0 hsla(0,0%,10%,0.15)}html.var .sf-switch.multiple .sf-switch-toggle span{font-size:12px;padding:8px;background:hsla(0,0%,10%,0.1)}html.var .sf-switch.multiple input[type='checkbox']:checked~span,html.var .sf-switch.multiple input[type='radio']:checked~span{color:hsl(0,0%,100%);background:hsl(200,100%,60%)}html.var .sf-switch.multiple .sf-switch-description{font-size:12px}html.var .sf-switch input[type='checkbox']:disabled~*,html.var .sf-switch.multiple input[type='checkbox']:disabled~*,html.var .sf-switch.multiple input[type='radio']:disabled~*{opacity:0.4}html.var .sf-switch input[type='checkbox']:focus-visible,html.var .sf-switch input[type='radio']:focus-visible{outline:2px solid hsl(200,100%,60%)}html.var .sf-switch:not(.multiple) input[type='checkbox']:focus-visible,html.var .sf-switch:not(.multiple) input[type='radio']:focus-visible{border-radius:8px}@keyframes Loading{from{background-position:0 0}to{background-position:28px 0}}a.sf-loading.sf-button:not([href]),.sf-loading:disabled,.sf-loading.sf-button:disabled,.sf-loading.sf-input:not([type='color']):disabled{--c1:transparent;--c2:hsl(var(--sf-c-form-loading)/5%);cursor:progress;background:repeating-linear-gradient(45deg,var(--c1),var(--c1) 10px,var(--c2) 10px,var(--c2) 20px);background-size:28px 100%;animation:Loading .3s linear infinite}html.var a.sf-loading.sf-button:not([href]),html.var .sf-loading:disabled,html.var .sf-loading.sf-button:disabled,html.var .sf-loading.sf-input:not([type='color']):disabled{background:repeating-linear-gradient(45deg,transparent,transparent 10px,hsla(0,0%,10%,0.05) 10px,hsla(0,0%,10%,0.05) 20px)}.sf-description,.sf-invalid,.sf-valid{color:hsl(var(--sf-c-form-txt)/40%);font-size:var(--sf-form-fz-small);font-family:var(--sf-form-ff);font-weight:300;line-height:1;text-transform:none;margin:0.5em 0 0;padding:0 0 0.5em}html .sf-description,html .sf-invalid,html .sf-valid{display:none}html .sf-description{display:block}.sf-invalid{color:hsl(var(--sf-c-form-error))}.sf-valid:not(.sf-description){color:hsl(var(--sf-c-form-txt))}.show.sf-description,.show.sf-invalid,.show.sf-valid{display:block}.hide.sf-description,.hide.sf-invalid,.hide.sf-valid{display:none}.validates:focus:invalid~.sf-invalid,.validates:focus:valid~.sf-valid,.validates:focus:valid~.sf-description.sf-valid{display:block}.validates:focus:invalid~.validates~.sf-invalid,.validates:focus:valid~.validates~.sf-valid,.validates:focus:valid~.validates~.sf-description.sf-valid{display:none}.validates:focus~.sf-description{display:none}.validates:focus~.validates~.sf-description{display:block}.error:not(:disabled)+.sf-invalid,.error:not(:disabled)+.sf-valid+.sf-invalid,.error:not(:disabled)+.sf-description+.sf-invalid{display:block !important}.error:not(:disabled)+.sf-invalid+.sf-valid,.error:not(:disabled)+.sf-invalid+.sf-description,.error:not(:disabled)+.sf-description,.error:not(:disabled)+.sf-description+.sf-valid,.error:not(:disabled)+.sf-valid,.error:not(:disabled)+.sf-valid+.sf-description{display:none !important}.validates input[type='checkbox']~.sf-description{display:none}.validates input[type='checkbox']:invalid~.sf-invalid{display:block}.validates input[type='checkbox']:valid~.sf-valid{display:block}.validates:required:invalid:not(:focus){border-bottom-color:hsl(var(--sf-c-form-warning))}.validates:required:invalid:not(:disabled){border-bottom-color:hsl(var(--sf-c-form-warning))}.validates input[type='radio']:invalid::before,.validates input[type='checkbox']:invalid::before{border-color:hsl(var(--sf-c-form-error))}.error:not(:disabled),.validates:required:invalid:focus{border-bottom-color:hsl(var(--sf-c-form-error));outline:none}label.validates.sf-switch .sf-description,label.validates.sf-switch .sf-valid,label.validates.sf-switch .sf-invalid,label.validates.sf-checkbox .sf-description,label.validates.sf-checkbox .sf-valid,label.validates.sf-checkbox .sf-invalid{width:100%;line-height:var(--sf-lh-normal)}form.validates:invalid .sf-button[type='submit']{cursor:not-allowed;text-decoration:none;opacity:var(--sf-disabled);-webkit-text-fill-color:hsl(var(--sf-c-form-txt))}html.var .sf-description,html.var .sf-invalid,html.var .sf-valid{color:hsla(0,0%,10%,0.4);font-size:12px;font-family:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'}html.var label.validates.sf-switch .sf-description,html.var label.validates.sf-switch .sf-valid,html.var label.validates.sf-switch .sf-invalid,html.var label.validates.sf-checkbox .sf-description,html.var label.validates.sf-checkbox .sf-valid,html.var label.validates.sf-checkbox .sf-invalid{line-height:1.1875}html.var .sf-invalid{color:hsl(0,100%,60%)}html.var .error:not(:disabled){border-bottom-color:hsl(0,100%,60%)}html.var .validates:invalid:required{border-bottom-color:hsl(39,100%,50%)}html.var .validates:invalid:focus{border-bottom-color:hsl(0,100%,60%)}html.var[data-theme='dark'] .sf-select::-ms-expand,html.var.dark .sf-select::-ms-expand{color:hsl(0,0%,90%)}html.var[data-theme='dark'] .sf-input[type='file']::-webkit-file-upload-button, html.var.dark .sf-input[type='file']::-webkit-file-upload-button{color:hsl(0,0%,90%);background-color:hsla(0,0%,20%,0.2);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='file']::file-selector-button,html.var.dark .sf-input[type='file']::file-selector-button{color:hsl(0,0%,90%);background-color:hsla(0,0%,20%,0.2);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='file']:focus-visible::-webkit-file-upload-button, html.var.dark .sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-input[type='file']:focus-visible::file-selector-button,html.var.dark .sf-input[type='file']:focus-visible::file-selector-button{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-button,html.var[data-theme='dark'] .sf-input,html.var[data-theme='dark'] .sf-textarea,html.var[data-theme='dark'] .sf-select,html.var[data-theme='dark'] option,html.var.dark .sf-button,html.var.dark .sf-input,html.var.dark .sf-textarea,html.var.dark .sf-select,html.var.dark option{color:hsl(0,0%,90%);background-color:hsl(0,0%,20%);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-description,html.var[data-theme='dark'] .sf-valid,html.var.dark .sf-description,html.var.dark .sf-valid{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-invalid,html.var.dark .sf-invalid{color:hsl(0,100%,65%)}html.var[data-theme='dark'] .sf-button:focus-visible,html.var[data-theme='dark'] label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var[data-theme='dark'] label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible,html.var[data-theme='dark'] .sf-input:focus,html.var[data-theme='dark'] .sf-input[type='color']:focus-visible,html.var[data-theme='dark'] .sf-input[type='image']:focus-visible,html.var[data-theme='dark'] .sf-input[type='range']:focus-visible,html.var[data-theme='dark'] .sf-textarea:focus-visible,html.var[data-theme='dark'] .sf-select:focus-visible,html.var.dark .sf-button:focus-visible,html.var.dark label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var.dark label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible,html.var.dark .sf-input:focus,html.var.dark .sf-input[type='color']:focus-visible,html.var.dark .sf-input[type='image']:focus-visible,html.var.dark .sf-input[type='range']:focus-visible,html.var.dark .sf-textarea:focus-visible,html.var.dark .sf-select:focus-visible{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-input[type='color']::-webkit-color-swatch,html.var.dark .sf-input[type='color']::-webkit-color-swatch{border-color:hsl(0,0%,100%)}html.var[data-theme='dark'] .sf-input[type='color']::-moz-color-swatch,html.var.dark .sf-input[type='color']::-moz-color-swatch{border-color:hsl(0,0%,100%)}html.var[data-theme='dark'] .sf-input,html.var.dark .sf-input{border-color:transparent transparent hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input::-moz-placeholder, html.var[data-theme='dark'] .sf-textarea::-moz-placeholder, html.var.dark .sf-input::-moz-placeholder, html.var.dark .sf-textarea::-moz-placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input:-ms-input-placeholder, html.var[data-theme='dark'] .sf-textarea:-ms-input-placeholder, html.var.dark .sf-input:-ms-input-placeholder, html.var.dark .sf-textarea:-ms-input-placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input::placeholder,html.var[data-theme='dark'] .sf-textarea::placeholder,html.var.dark .sf-input::placeholder,html.var.dark .sf-textarea::placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input:-moz-placeholder-shown, html.var.dark .sf-input:-moz-placeholder-shown{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input:-ms-input-placeholder, html.var.dark .sf-input:-ms-input-placeholder{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input:placeholder-shown,html.var.dark .sf-input:placeholder-shown{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='image'],html.var[data-theme='dark'] .sf-input[type='range'],html.var.dark .sf-input[type='image'],html.var.dark .sf-input[type='range']{background:none} diff --git a/src/button.css b/src/button.css index 8490afb..511d32a 100644 --- a/src/button.css +++ b/src/button.css @@ -17,9 +17,9 @@ font-weight: 400; line-height: 1; - color: hsl(var(--sf-form-c-txt)); - background: hsl(var(--sf-form-c-bg) / 20%); - border: 1px solid hsl(var(--sf-form-c-bd) / 20%); + color: hsl(var(--sf-c-form-txt)); + background: hsl(var(--sf-c-form-bg) / 20%); + border: 1px solid hsl(var(--sf-c-form-bd) / 20%); text-align: center; text-decoration: none; @@ -45,7 +45,7 @@ a.sf-button:not([href]), .sf-button:focus-visible { - outline: 1px solid hsl(var(--sf-form-c-info)); + outline: 1px solid hsl(var(--sf-c-form-info)); outline-offset: -1px; } diff --git a/src/checkbox-radio.css b/src/checkbox-radio.css index be5508e..a7125e5 100644 --- a/src/checkbox-radio.css +++ b/src/checkbox-radio.css @@ -53,8 +53,8 @@ label.sf-checkbox input::before height: 16px; content: ''; - background-color: hsl(var(--sf-form-c-bg) / 20%); - border: 1px solid hsl(var(--sf-form-c-bd) / 20%); + background-color: hsl(var(--sf-c-form-bg) / 20%); + border: 1px solid hsl(var(--sf-c-form-bd) / 20%); } label.sf-radio input::after, label.sf-checkbox input::after @@ -70,11 +70,11 @@ label.sf-checkbox input::after label.sf-radio input:checked::before, label.sf-checkbox input:checked::before -{ border-color: hsl(var(--sf-form-c-info)) } +{ border-color: hsl(var(--sf-c-form-info)) } label.sf-radio input:checked::after, label.sf-checkbox input:checked::after -{ background-color: hsl(var(--sf-form-c-info)) } +{ background-color: hsl(var(--sf-c-form-info)) } label.sf-radio input::before, label.sf-radio input::after @@ -84,7 +84,7 @@ label.sf-radio input::after .sf-checkbox input:focus-visible { border-color: transparent; - outline: 2px solid hsl(var(--sf-form-c-info)); + outline: 2px solid hsl(var(--sf-c-form-info)); outline-offset: 2px; } .sf-radio input:focus-visible { border-radius: 50% } diff --git a/src/color.css b/src/color.css index e87f3e2..47b5e09 100644 --- a/src/color.css +++ b/src/color.css @@ -25,11 +25,11 @@ .sf-input[type='color']::-webkit-color-swatch-wrapper { padding: 3px } .sf-input[type='color']::-webkit-color-swatch { - border: 2px solid hsl(var(--sf-form-c-white)); + border: 2px solid hsl(var(--sf-c-form-white)); border-radius: 50%; } .sf-input[type='color']::-moz-color-swatch { - border: 2px solid hsl(var(--sf-form-c-white)); + border: 2px solid hsl(var(--sf-c-form-white)); border-radius: 50%; } diff --git a/src/file.css b/src/file.css index 72a8d32..95af07b 100644 --- a/src/file.css +++ b/src/file.css @@ -36,9 +36,9 @@ text-transform: none; text-decoration: none; - color: hsl(var(--sf-form-c-txt)); - background: hsl(var(--sf-form-c-bg) / 20%); - border: 1px solid hsl(var(--sf-form-c-bd) / 20%); + color: hsl(var(--sf-c-form-txt)); + background: hsl(var(--sf-c-form-bg) / 20%); + border: 1px solid hsl(var(--sf-c-form-bd) / 20%); height: 32px; @@ -46,7 +46,7 @@ } .sf-input[type='file']:focus-visible { outline: none } .sf-input[type='file']:focus-visible::file-selector-button { - outline: 1px solid hsl(var(--sf-form-c-info)); + outline: 1px solid hsl(var(--sf-c-form-info)); outline-offset: -1px; } diff --git a/src/input.css b/src/input.css index 1b67c70..fbc7c84 100644 --- a/src/input.css +++ b/src/input.css @@ -28,11 +28,11 @@ text-transform: none; - color: hsl(var(--sf-form-c-txt)); - background: hsl(var(--sf-form-c-bg) / 20%); + color: hsl(var(--sf-c-form-txt)); + background: hsl(var(--sf-c-form-bg) / 20%); border-style: solid; - border-color: hsl(var(--sf-form-c-bd) / 20%); + border-color: hsl(var(--sf-c-form-bd) / 20%); border-width: 0 0 1px; border-radius: 0; @@ -68,17 +68,17 @@ } .sf-input:hover::-webkit-calendar-picker-indicator { opacity: 1 } -.sf-input::placeholder { color: hsl(var(--sf-form-c-txt) / 40%) } +.sf-input::placeholder { color: hsl(var(--sf-c-form-txt) / 40%) } .sf-input:focus { - border-color: transparent transparent hsl(var(--sf-form-c-info)); + border-color: transparent transparent hsl(var(--sf-c-form-info)); outline: none; } .sf-input[type='color']:focus-visible, .sf-input[type='image']:focus-visible, .sf-input[type='range']:focus-visible { - outline: 2px solid hsl(var(--sf-form-c-info)); + outline: 2px solid hsl(var(--sf-c-form-info)); outline-offset: 2px; } diff --git a/src/loading.css b/src/loading.css index 5c05d48..f6d58d1 100644 --- a/src/loading.css +++ b/src/loading.css @@ -9,7 +9,7 @@ a.sf-loading.sf-button:not([href]), .sf-loading.sf-input:not([type='color']):disabled { --c1: transparent; - --c2: hsl(var(--sf-form-c-loading) / 5%); + --c2: hsl(var(--sf-c-form-loading) / 5%); cursor: progress; background: repeating-linear-gradient(45deg, var(--c1), var(--c1) 10px, var(--c2) 10px, var(--c2) 20px); diff --git a/src/select.css b/src/select.css index f079745..c240363 100644 --- a/src/select.css +++ b/src/select.css @@ -25,11 +25,11 @@ .sf-select { cursor: pointer; - background: hsl(var(--sf-form-c-bg) / 20%); + background: hsl(var(--sf-c-form-bg) / 20%); border-width: 1px; border-style: solid; - border-color: hsl(var(--sf-form-c-bd) / 20%); + border-color: hsl(var(--sf-c-form-bd) / 20%); border-radius: 0; width: 100%; @@ -50,7 +50,7 @@ } .sf-select:focus-visible { - outline: 1px solid hsl(var(--sf-form-c-info)); + outline: 1px solid hsl(var(--sf-c-form-info)); outline-offset: -1px; } diff --git a/src/switch.css b/src/switch.css index 722df68..43ec03c 100644 --- a/src/switch.css +++ b/src/switch.css @@ -51,7 +51,7 @@ label.sf-switch input[type='checkbox']::before { height: var(--sf-form-switch-size); content: ''; - background: hsl(var(--sf-form-c-bd) / 20%); + background: hsl(var(--sf-c-form-bd) / 20%); border-radius: calc(var(--sf-form-switch-size) / 2); } label.sf-switch input[type='checkbox']::after { @@ -66,13 +66,13 @@ label.sf-switch input[type='checkbox']::after { content: ''; - background: hsl(var(--sf-form-c-white)); + background: hsl(var(--sf-c-form-white)); border-radius: calc(var(--sf-form-switch-size) / 2); - box-shadow: 0 0 0 1px hsl(var(--sf-form-c-white)); + box-shadow: 0 0 0 1px hsl(var(--sf-c-form-white)); transition: transform 0.05s ease-in; } -label.sf-switch input[type='checkbox']:checked::before { background: hsl(var(--sf-form-c-info)) } +label.sf-switch input[type='checkbox']:checked::before { background: hsl(var(--sf-c-form-info)) } label.sf-switch input[type='checkbox']:checked::after { transform: translate3d(var(--sf-form-switch-size), 0, 0) } label.sf-switch input[type='radio'] ~ *, @@ -82,8 +82,8 @@ label.sf-switch input[type='checkbox'] ~ * .sf-switch.multiple .sf-switch-toggle { display: inline-block; - background: hsl(var(--sf-form-c-bg) / 20%); - box-shadow: 1px 2px 8px 0 hsl(var(--sf-form-c-bd) / 15%); + background: hsl(var(--sf-c-form-bg) / 20%); + box-shadow: 1px 2px 8px 0 hsl(var(--sf-c-form-bd) / 15%); } .sf-switch.multiple .sf-switch-toggle * { display: inline-block } .sf-switch.multiple .sf-switch-toggle label { position: relative } @@ -95,7 +95,7 @@ label.sf-switch input[type='checkbox'] ~ * padding: var(--sf-form-p-input-block) var(--sf-form-p-input-inline); - background: hsl(var(--sf-form-c-bd) / 5%); + background: hsl(var(--sf-c-form-bd) / 5%); } .sf-switch.multiple input[type='checkbox'], @@ -130,8 +130,8 @@ label.sf-switch input[type='checkbox'] ~ * .sf-switch.multiple input[type='checkbox']:checked ~ span, .sf-switch.multiple input[type='radio']:checked ~ span { - color: hsl(var(--sf-form-c-white)); - background: hsl(var(--sf-form-c-info)); + color: hsl(var(--sf-c-form-white)); + background: hsl(var(--sf-c-form-info)); } .sf-switch.multiple.vert .sf-switch-toggle { flex-flow: column } @@ -164,7 +164,7 @@ label.sf-switch input[type='checkbox'] ~ * .sf-switch input[type='radio']:focus-visible { border-color: transparent; - outline: 2px solid hsl(var(--sf-form-c-info)); + outline: 2px solid hsl(var(--sf-c-form-info)); } .sf-switch:not(.multiple) input[type='checkbox']:focus-visible, .sf-switch:not(.multiple) input[type='radio']:focus-visible diff --git a/src/textarea.css b/src/textarea.css index f54e0fd..8652c95 100644 --- a/src/textarea.css +++ b/src/textarea.css @@ -13,9 +13,9 @@ font-weight: 400; line-height: 1.499535; - color: hsl(var(--sf-form-c-txt)); - background: hsl(var(--sf-form-c-bg) / 20%); - border: 1px solid hsl(var(--sf-form-c-bd) / 20%); + color: hsl(var(--sf-c-form-txt)); + background: hsl(var(--sf-c-form-bg) / 20%); + border: 1px solid hsl(var(--sf-c-form-bd) / 20%); width: 100%; max-width: 100%; @@ -32,7 +32,7 @@ box-sizing: border-box; } -.sf-textarea::placeholder { color: hsl(var(--sf-form-c-txt) / 40%) } +.sf-textarea::placeholder { color: hsl(var(--sf-c-form-txt) / 40%) } .sf-textarea:disabled { cursor: not-allowed; @@ -43,7 +43,7 @@ } .sf-textarea:focus-visible { - outline: 1px solid hsl(var(--sf-form-c-info)); + outline: 1px solid hsl(var(--sf-c-form-info)); outline-offset: -1px; } diff --git a/src/validate.css b/src/validate.css index 08c6f02..4675d2b 100644 --- a/src/validate.css +++ b/src/validate.css @@ -6,7 +6,7 @@ } .sf-description, .sf-invalid, .sf-valid { - color: hsl(var(--sf-form-c-txt) / 40%); + color: hsl(var(--sf-c-form-txt) / 40%); font-size: var(--sf-form-fz-small); font-family: var(--sf-form-ff); @@ -22,8 +22,8 @@ html .sf-description, html .sf-invalid, html .sf-valid { display: none } html .sf-description { display: block } -.sf-invalid { color: hsl(var(--sf-form-c-error)) } -.sf-valid:not(.sf-description) { color: hsl(var(--sf-form-c-txt)) } +.sf-invalid { color: hsl(var(--sf-c-form-error)) } +.sf-valid:not(.sf-description) { color: hsl(var(--sf-c-form-txt)) } .show.sf-description, .show.sf-invalid, .show.sf-valid { display: block } .hide.sf-description, .hide.sf-invalid, .hide.sf-valid { display: none } @@ -60,17 +60,17 @@ html .sf-description { display: block } .validates input[type='checkbox']:invalid ~ .sf-invalid { display: block } .validates input[type='checkbox']:valid ~ .sf-valid { display: block } -.validates:required:invalid:not(:focus) { border-bottom-color: hsl(var(--sf-form-c-warning)) } -.validates:required:invalid:not(:disabled) { border-bottom-color: hsl(var(--sf-form-c-warning)) } +.validates:required:invalid:not(:focus) { border-bottom-color: hsl(var(--sf-c-form-warning)) } +.validates:required:invalid:not(:disabled) { border-bottom-color: hsl(var(--sf-c-form-warning)) } .validates input[type='radio']:invalid::before, .validates input[type='checkbox']:invalid::before -{ border-color: hsl(var(--sf-form-c-error)) } +{ border-color: hsl(var(--sf-c-form-error)) } .error:not(:disabled), .validates:required:invalid:focus { - border-bottom-color: hsl(var(--sf-form-c-error)); + border-bottom-color: hsl(var(--sf-c-form-error)); outline: none; } @@ -88,7 +88,7 @@ form.validates:invalid .sf-button[type='submit'] { cursor: not-allowed; text-decoration: none; opacity: var(--sf-disabled); - -webkit-text-fill-color: hsl(var(--sf-form-c-txt)); + -webkit-text-fill-color: hsl(var(--sf-c-form-txt)); } /* /// */ diff --git a/src/var.css b/src/var.css index 0e7bbc0..2f6e634 100644 --- a/src/var.css +++ b/src/var.css @@ -1,56 +1,56 @@ :root { - --sf-form-c-white: 0 0% 100%; - --sf-form-c-info: 200 100% 60%; - --sf-form-c-error: 0 100% 60%; - --sf-form-c-success: 0 100% 60%; - --sf-form-c-warning: 39 100% 50%; + --sf-c-form-white: 0 0% 100%; + --sf-c-form-info: 200 100% 60%; + --sf-c-form-error: 0 100% 60%; + --sf-c-form-success: 0 100% 60%; + --sf-c-form-warning: 39 100% 50%; - --sf-form-c-bg: 0 0% 90%; - --sf-form-c-bd: 0 0% 10%; - --sf-form-c-loading: 0 0% 10%; - --sf-form-c-txt: 0 0% 10%; + --sf-c-form-bg: 0 0% 90%; + --sf-c-form-bd: 0 0% 10%; + --sf-c-form-loading: 0 0% 10%; + --sf-c-form-txt: 0 0% 10%; /* colors for dark theme */ - --sf-form-dark-c-white: 0 0% 100%; - --sf-form-dark-c-info: 219 79% 66%; - --sf-form-dark-c-error: 0 100% 65%; - --sf-form-dark-c-success: 0 100% 65%; - --sf-form-dark-c-warning: 39 100% 60%; - - --sf-form-dark-c-bg: 0 0% 20%; - --sf-form-dark-c-bd: 0 0% 100%; - --sf-form-dark-c-loading: 0 0% 100%; - --sf-form-dark-c-txt: 0 0% 90%; + --sf-dark-c-form-white: 0 0% 100%; + --sf-dark-c-form-info: 219 79% 66%; + --sf-dark-c-form-error: 0 100% 65%; + --sf-dark-c-form-success: 0 100% 65%; + --sf-dark-c-form-warning: 39 100% 60%; + + --sf-dark-c-form-bg: 0 0% 20%; + --sf-dark-c-form-bd: 0 0% 100%; + --sf-dark-c-form-loading: 0 0% 100%; + --sf-dark-c-form-txt: 0 0% 90%; } html[data-theme='dark'], html.dark { color-scheme: dark; - --sf-form-c-white: var(--sf-form-dark-c-white); + --sf-c-form-white: var(--sf-dark-c-form-white); - --sf-form-c-bg: var(--sf-form-dark-c-bg); - --sf-form-c-error: var(--sf-form-dark-c-error); - --sf-form-c-success: var(--sf-form-dark-c-success); - --sf-form-c-warning: var(--sf-form-dark-c-warning); - --sf-form-c-info: var(--sf-form-dark-c-info); - --sf-form-c-bd: var(--sf-form-dark-c-bd); - --sf-form-c-loading: var(--sf-form-dark-c-loading); - --sf-form-c-txt: var(--sf-form-dark-c-txt); + --sf-c-form-bg: var(--sf-dark-c-form-bg); + --sf-c-form-error: var(--sf-dark-c-form-error); + --sf-c-form-success: var(--sf-dark-c-form-success); + --sf-c-form-warning: var(--sf-dark-c-form-warning); + --sf-c-form-info: var(--sf-dark-c-form-info); + --sf-c-form-bd: var(--sf-dark-c-form-bd); + --sf-c-form-loading: var(--sf-dark-c-form-loading); + --sf-c-form-txt: var(--sf-dark-c-form-txt); } @media (prefers-color-scheme: dark) { html[data-theme='auto'], html.auto { color-scheme: light dark; - --sf-form-c-white: var(--sf-form-dark-c-white); + --sf-c-form-white: var(--sf-dark-c-form-white); - --sf-form-c-bg: var(--sf-form-dark-c-bg); - --sf-form-c-error: var(--sf-form-dark-c-error); - --sf-form-c-success: var(--sf-form-dark-c-success); - --sf-form-c-warning: var(--sf-form-dark-c-warning); - --sf-form-c-info: var(--sf-form-dark-c-info); - --sf-form-c-bd: var(--sf-form-dark-c-bd); - --sf-form-c-loading: var(--sf-form-dark-c-loading); - --sf-form-c-txt: var(--sf-form-dark-c-txt); + --sf-c-form-bg: var(--sf-dark-c-form-bg); + --sf-c-form-error: var(--sf-dark-c-form-error); + --sf-c-form-success: var(--sf-dark-c-form-success); + --sf-c-form-warning: var(--sf-dark-c-form-warning); + --sf-c-form-info: var(--sf-dark-c-form-info); + --sf-c-form-bd: var(--sf-dark-c-form-bd); + --sf-c-form-loading: var(--sf-dark-c-form-loading); + --sf-c-form-txt: var(--sf-dark-c-form-txt); } }