Something went wrong. Try again.
a reactive (signals based) hypermedia web framework (wip) stormlightlabs.github.io/volt
hypermedia frontend signals
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
form { margin: var(--space-xl) 0; max-width: var(--content-width);}
fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-lg); margin-bottom: var(--space-lg);}
legend { font-weight: 700; padding: 0 var(--space-sm); color: var(--color-text);}
label { display: block; margin-bottom: var(--space-xs); font-weight: 600; color: var(--color-text);}
label:has(+ input[required])::after,label:has(+ textarea[required])::after,label:has(+ select[required])::after { content: " *"; color: var(--color-error);}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),select,textarea { width: 100%; padding: var(--space-sm) var(--space-md); font-family: inherit; font-size: 1rem; line-height: var(--line-height-base); color: var(--color-text); background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); margin-bottom: var(--space-md);}
input:focus,select:focus,textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);}
input:disabled,select:disabled,textarea:disabled { opacity: 0.6; cursor: not-allowed; background-color: var(--color-bg-alt);}
textarea { resize: vertical; min-height: 8rem;}
input[type="checkbox"],input[type="radio"] { margin-right: var(--space-xs); accent-color: var(--color-accent);}
input[type="file"] { padding: var(--space-sm); border: 1px dashed var(--color-border); border-radius: var(--radius-sm); cursor: pointer; margin-bottom: var(--space-md);}
input[type="range"] { width: 100%; margin: var(--space-md) 0; accent-color: var(--color-accent);}
progress, meter { width: 100%; height: 1.5rem; margin: var(--space-md) 0; border-radius: var(--radius-sm); overflow: hidden;}
button,input[type="submit"],input[type="button"],input[type="reset"] { display: inline-block; padding: var(--space-sm) var(--space-lg); font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1; color: white; background-color: var(--color-accent); border: none; border-radius: var(--radius-md); cursor: pointer; text-decoration: none; transition: background-color var(--transition-fast), transform var(--transition-fast); margin-right: var(--space-sm); margin-bottom: var(--space-sm);}
button:hover,input[type="submit"]:hover,input[type="button"]:hover { background-color: var(--color-accent-hover);}
button:active,input[type="submit"]:active,input[type="button"]:active { transform: translateY(1px);}
input[type="reset"] { background-color: var(--color-bg-alt); color: var(--color-text); border: 1px solid var(--color-border);}
input[type="reset"]:hover { background-color: var(--color-border);}
button:disabled,input[type="submit"]:disabled,input[type="button"]:disabled { opacity: 0.6; cursor: not-allowed; transform: none;}
button:focus-visible,input[type="submit"]:focus-visible,input[type="button"]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px;}