|
4 | 4 | gap: 1px; |
5 | 5 | background-color: #e5e7eb; |
6 | 6 | padding: 2px; |
7 | | - /* border-radius: 8px; */ |
8 | | - /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */ |
9 | 7 | } |
10 | 8 |
|
11 | 9 | .draw-grid-cell { |
|
32 | 30 |
|
33 | 31 | .control-panel { |
34 | 32 | position: relative; |
35 | | - /* top: 20px; |
36 | | - right: 20px; */ |
37 | 33 | background: white; |
38 | 34 | padding: 20px; |
39 | 35 | border-radius: 8px; |
|
44 | 40 | } |
45 | 41 |
|
46 | 42 | .control-panel.collapsed { |
47 | | - width: 44px; /* Enough width for the button (24px) + padding (10px * 2) */ |
48 | | - height: 44px; /* Same as width for symmetry */ |
| 43 | + width: 44px; |
| 44 | + height: 44px; |
49 | 45 | padding: 10px; |
50 | 46 | background: white; |
51 | 47 | } |
|
76 | 72 | background: #e2e8f0; |
77 | 73 | border-radius: 3px; |
78 | 74 | outline: none; |
79 | | - -webkit-appearance: none; |
| 75 | + appearance: none; |
80 | 76 | } |
81 | 77 |
|
82 | 78 | .control-group input[type='range']::-webkit-slider-thumb { |
83 | | - -webkit-appearance: none; |
| 79 | + appearance: none; |
84 | 80 | width: 18px; |
85 | 81 | height: 18px; |
86 | 82 | background: #3b82f6; |
|
130 | 126 | background-color: #2563eb; |
131 | 127 | } |
132 | 128 |
|
133 | | -:root { |
134 | | - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; |
135 | | - line-height: 1.5; |
136 | | - font-weight: 400; |
137 | | - |
138 | | - color-scheme: light dark; |
139 | | - color: rgba(255, 255, 255, 0.87); |
140 | | - background-color: #242424; |
141 | | - |
142 | | - font-synthesis: none; |
143 | | - text-rendering: optimizeLegibility; |
144 | | - -webkit-font-smoothing: antialiased; |
145 | | - -moz-osx-font-smoothing: grayscale; |
146 | | -} |
147 | | - |
148 | | -/* a { |
149 | | - font-weight: 500; |
150 | | - color: #646cff; |
151 | | - text-decoration: inherit; |
152 | | -} |
153 | | -a:hover { |
154 | | - color: #535bf2; |
155 | | -} |
156 | | -
|
157 | | -h1 { |
158 | | - font-size: 3.2em; |
159 | | - line-height: 1.1; |
160 | | -} |
161 | | -
|
162 | | -.logo { |
163 | | - height: 6em; |
164 | | - padding: 1.5em; |
165 | | - will-change: filter; |
166 | | - transition: filter 300ms; |
167 | | -} |
168 | | -.logo:hover { |
169 | | - filter: drop-shadow(0 0 2em #646cffaa); |
170 | | -} |
171 | | -.logo.vanilla:hover { |
172 | | - filter: drop-shadow(0 0 2em #3178c6aa); |
173 | | -} |
174 | | -
|
175 | | -.card { |
176 | | - padding: 2em; |
177 | | -} |
178 | | -
|
179 | | -.read-the-docs { |
180 | | - color: #888; |
181 | | -} |
182 | | -
|
183 | | -button { |
184 | | - border-radius: 8px; |
185 | | - border: 1px solid transparent; |
186 | | - padding: 0.6em 1.2em; |
187 | | - font-size: 1em; |
188 | | - font-weight: 500; |
189 | | - font-family: inherit; |
190 | | - background-color: #1a1a1a; |
191 | | - cursor: pointer; |
192 | | - transition: border-color 0.25s; |
193 | | -} |
194 | | -button:hover { |
195 | | - border-color: #646cff; |
196 | | -} |
197 | | -button:focus, |
198 | | -button:focus-visible { |
199 | | - outline: 4px auto -webkit-focus-ring-color; |
200 | | -} |
201 | | -
|
202 | | -@media (prefers-color-scheme: light) { |
203 | | - :root { |
204 | | - color: #213547; |
205 | | - background-color: #ffffff; |
206 | | - } |
207 | | - a:hover { |
208 | | - color: #747bff; |
209 | | - } |
210 | | - button { |
211 | | - background-color: #f9f9f9; |
212 | | - } |
213 | | -} */ |
214 | | - |
215 | 129 | .color-presets { |
216 | 130 | display: grid; |
217 | 131 | grid-template-columns: repeat(8, 1fr); |
|
0 commit comments