a reactive (signals based) hypermedia web framework (wip)
stormlightlabs.github.io/volt/
desertthunder.dev
hypermedia
frontend
signals
1
2form {
3 margin: var(--space-xl) 0;
4 max-width: var(--content-width);
5}
6
7fieldset {
8 border: 1px solid var(--color-border);
9 border-radius: var(--radius-md);
10 padding: var(--space-lg);
11 margin-bottom: var(--space-lg);
12}
13
14legend {
15 font-weight: 700;
16 padding: 0 var(--space-sm);
17 color: var(--color-text);
18}
19
20label {
21 display: block;
22 margin-bottom: var(--space-xs);
23 font-weight: 600;
24 color: var(--color-text);
25}
26
27label:has(+ input[required])::after,
28label:has(+ textarea[required])::after,
29label:has(+ select[required])::after {
30 content: " *";
31 color: var(--color-error);
32}
33
34input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
35select,
36textarea {
37 width: 100%;
38 padding: var(--space-sm) var(--space-md);
39 font-family: inherit;
40 font-size: 1rem;
41 line-height: var(--line-height-base);
42 color: var(--color-text);
43 background-color: var(--color-bg);
44 border: 1px solid var(--color-border);
45 border-radius: var(--radius-sm);
46 transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
47 margin-bottom: var(--space-md);
48}
49
50input:focus,
51select:focus,
52textarea:focus {
53 outline: none;
54 border-color: var(--color-accent);
55 box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
56}
57
58input:disabled,
59select:disabled,
60textarea:disabled {
61 opacity: 0.6;
62 cursor: not-allowed;
63 background-color: var(--color-bg-alt);
64}
65
66textarea {
67 resize: vertical;
68 min-height: 8rem;
69}
70
71input[type="checkbox"],
72input[type="radio"] {
73 margin-right: var(--space-xs);
74 accent-color: var(--color-accent);
75}
76
77input[type="file"] {
78 padding: var(--space-sm);
79 border: 1px dashed var(--color-border);
80 border-radius: var(--radius-sm);
81 cursor: pointer;
82 margin-bottom: var(--space-md);
83}
84
85input[type="range"] {
86 width: 100%;
87 margin: var(--space-md) 0;
88 accent-color: var(--color-accent);
89}
90
91progress, meter {
92 width: 100%;
93 height: 1.5rem;
94 margin: var(--space-md) 0;
95 border-radius: var(--radius-sm);
96 overflow: hidden;
97}
98
99button,
100input[type="submit"],
101input[type="button"],
102input[type="reset"] {
103 display: inline-block;
104 padding: var(--space-sm) var(--space-lg);
105 font-family: inherit;
106 font-size: 1rem;
107 font-weight: 600;
108 line-height: 1;
109 color: white;
110 background-color: var(--color-accent);
111 border: none;
112 border-radius: var(--radius-md);
113 cursor: pointer;
114 text-decoration: none;
115 transition: background-color var(--transition-fast), transform var(--transition-fast);
116 margin-right: var(--space-sm);
117 margin-bottom: var(--space-sm);
118}
119
120button:hover,
121input[type="submit"]:hover,
122input[type="button"]:hover {
123 background-color: var(--color-accent-hover);
124}
125
126button:active,
127input[type="submit"]:active,
128input[type="button"]:active {
129 transform: translateY(1px);
130}
131
132input[type="reset"] {
133 background-color: var(--color-bg-alt);
134 color: var(--color-text);
135 border: 1px solid var(--color-border);
136}
137
138input[type="reset"]:hover {
139 background-color: var(--color-border);
140}
141
142button:disabled,
143input[type="submit"]:disabled,
144input[type="button"]:disabled {
145 opacity: 0.6;
146 cursor: not-allowed;
147 transform: none;
148}
149
150button:focus-visible,
151input[type="submit"]:focus-visible,
152input[type="button"]:focus-visible {
153 outline: 2px solid var(--color-accent);
154 outline-offset: 2px;
155}