Skip to content

Commit c30ea88

Browse files
Shivanshu-07claude
Shivanshu-07
and
claude
committed
fix: vendor todomvc CSS locally so advanced snapshots render styled (PER-8195)
The advanced suite serves the app from its served root, but index.html linked node_modules/todomvc-app-css/index.css which only exists after a repo-root npm install the advanced flow never runs -> CSS 404'd and snapshots rendered unstyled. Vendor index.css beside index.html and point the href at css/index.css (matches java-selenium's existing approach). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent aded657 commit c30ea88

2 files changed

Lines changed: 394 additions & 1 deletion

File tree

‎css/index.css‎

Lines changed: 393 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,393 @@
1+
@charset 'utf-8';
2+
3+
html,
4+
body {
5+
margin: 0;
6+
padding: 0;
7+
}
8+
9+
button {
10+
margin: 0;
11+
padding: 0;
12+
border: 0;
13+
background: none;
14+
font-size: 100%;
15+
vertical-align: baseline;
16+
font-family: inherit;
17+
font-weight: inherit;
18+
color: inherit;
19+
-webkit-appearance: none;
20+
appearance: none;
21+
-webkit-font-smoothing: antialiased;
22+
-moz-osx-font-smoothing: grayscale;
23+
}
24+
25+
body {
26+
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
27+
line-height: 1.4em;
28+
background: #f5f5f5;
29+
color: #111111;
30+
min-width: 230px;
31+
max-width: 550px;
32+
margin: 0 auto;
33+
-webkit-font-smoothing: antialiased;
34+
-moz-osx-font-smoothing: grayscale;
35+
font-weight: 300;
36+
}
37+
38+
.hidden {
39+
display: none;
40+
}
41+
42+
.todoapp {
43+
background: #fff;
44+
margin: 130px 0 40px 0;
45+
position: relative;
46+
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
47+
0 25px 50px 0 rgba(0, 0, 0, 0.1);
48+
}
49+
50+
.todoapp input::-webkit-input-placeholder {
51+
font-style: italic;
52+
font-weight: 400;
53+
color: rgba(0, 0, 0, 0.4);
54+
}
55+
56+
.todoapp input::-moz-placeholder {
57+
font-style: italic;
58+
font-weight: 400;
59+
color: rgba(0, 0, 0, 0.4);
60+
}
61+
62+
.todoapp input::input-placeholder {
63+
font-style: italic;
64+
font-weight: 400;
65+
color: rgba(0, 0, 0, 0.4);
66+
}
67+
68+
.todoapp h1 {
69+
position: absolute;
70+
top: -140px;
71+
width: 100%;
72+
font-size: 80px;
73+
font-weight: 200;
74+
text-align: center;
75+
color: #b83f45;
76+
-webkit-text-rendering: optimizeLegibility;
77+
-moz-text-rendering: optimizeLegibility;
78+
text-rendering: optimizeLegibility;
79+
}
80+
81+
.new-todo,
82+
.edit {
83+
position: relative;
84+
margin: 0;
85+
width: 100%;
86+
font-size: 24px;
87+
font-family: inherit;
88+
font-weight: inherit;
89+
line-height: 1.4em;
90+
color: inherit;
91+
padding: 6px;
92+
border: 1px solid #999;
93+
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
94+
box-sizing: border-box;
95+
-webkit-font-smoothing: antialiased;
96+
-moz-osx-font-smoothing: grayscale;
97+
}
98+
99+
.new-todo {
100+
padding: 16px 16px 16px 60px;
101+
height: 65px;
102+
border: none;
103+
background: rgba(0, 0, 0, 0.003);
104+
box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
105+
}
106+
107+
.main {
108+
position: relative;
109+
z-index: 2;
110+
border-top: 1px solid #e6e6e6;
111+
}
112+
113+
.toggle-all {
114+
width: 1px;
115+
height: 1px;
116+
border: none; /* Mobile Safari */
117+
opacity: 0;
118+
position: absolute;
119+
right: 100%;
120+
bottom: 100%;
121+
}
122+
123+
.toggle-all + label {
124+
display: flex;
125+
align-items: center;
126+
justify-content: center;
127+
width: 45px;
128+
height: 65px;
129+
font-size: 0;
130+
position: absolute;
131+
top: -65px;
132+
left: -0;
133+
}
134+
135+
.toggle-all + label:before {
136+
content: '❯';
137+
display: inline-block;
138+
font-size: 22px;
139+
color: #949494;
140+
padding: 10px 27px 10px 27px;
141+
-webkit-transform: rotate(90deg);
142+
transform: rotate(90deg);
143+
}
144+
145+
.toggle-all:checked + label:before {
146+
color: #484848;
147+
}
148+
149+
.todo-list {
150+
margin: 0;
151+
padding: 0;
152+
list-style: none;
153+
}
154+
155+
.todo-list li {
156+
position: relative;
157+
font-size: 24px;
158+
border-bottom: 1px solid #ededed;
159+
}
160+
161+
.todo-list li:last-child {
162+
border-bottom: none;
163+
}
164+
165+
.todo-list li.editing {
166+
border-bottom: none;
167+
padding: 0;
168+
}
169+
170+
.todo-list li.editing .edit {
171+
display: block;
172+
width: calc(100% - 43px);
173+
padding: 12px 16px;
174+
margin: 0 0 0 43px;
175+
}
176+
177+
.todo-list li.editing .view {
178+
display: none;
179+
}
180+
181+
.todo-list li .toggle {
182+
text-align: center;
183+
width: 40px;
184+
/* auto, since non-WebKit browsers doesn't support input styling */
185+
height: auto;
186+
position: absolute;
187+
top: 0;
188+
bottom: 0;
189+
margin: auto 0;
190+
border: none; /* Mobile Safari */
191+
-webkit-appearance: none;
192+
appearance: none;
193+
}
194+
195+
.todo-list li .toggle {
196+
opacity: 0;
197+
}
198+
199+
.todo-list li .toggle + label {
200+
/*
201+
Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
202+
IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
203+
*/
204+
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
205+
background-repeat: no-repeat;
206+
background-position: center left;
207+
}
208+
209+
.todo-list li .toggle:checked + label {
210+
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%2359A193%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20fill%3D%22%233EA390%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22%2F%3E%3C%2Fsvg%3E');
211+
}
212+
213+
.todo-list li label {
214+
overflow-wrap: break-word;
215+
padding: 15px 15px 15px 60px;
216+
display: block;
217+
line-height: 1.2;
218+
transition: color 0.4s;
219+
font-weight: 400;
220+
color: #484848;
221+
}
222+
223+
.todo-list li.completed label {
224+
color: #949494;
225+
text-decoration: line-through;
226+
}
227+
228+
.todo-list li .destroy {
229+
display: none;
230+
position: absolute;
231+
top: 0;
232+
right: 10px;
233+
bottom: 0;
234+
width: 40px;
235+
height: 40px;
236+
margin: auto 0;
237+
font-size: 30px;
238+
color: #949494;
239+
transition: color 0.2s ease-out;
240+
}
241+
242+
.todo-list li .destroy:hover,
243+
.todo-list li .destroy:focus {
244+
color: #C18585;
245+
}
246+
247+
.todo-list li .destroy:after {
248+
content: '×';
249+
display: block;
250+
height: 100%;
251+
line-height: 1.1;
252+
}
253+
254+
.todo-list li:hover .destroy {
255+
display: block;
256+
}
257+
258+
.todo-list li .edit {
259+
display: none;
260+
}
261+
262+
.todo-list li.editing:last-child {
263+
margin-bottom: -1px;
264+
}
265+
266+
.footer {
267+
padding: 10px 15px;
268+
height: 20px;
269+
text-align: center;
270+
font-size: 15px;
271+
border-top: 1px solid #e6e6e6;
272+
}
273+
274+
.footer:before {
275+
content: '';
276+
position: absolute;
277+
right: 0;
278+
bottom: 0;
279+
left: 0;
280+
height: 50px;
281+
overflow: hidden;
282+
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
283+
0 8px 0 -3px #f6f6f6,
284+
0 9px 1px -3px rgba(0, 0, 0, 0.2),
285+
0 16px 0 -6px #f6f6f6,
286+
0 17px 2px -6px rgba(0, 0, 0, 0.2);
287+
}
288+
289+
.todo-count {
290+
float: left;
291+
text-align: left;
292+
}
293+
294+
.todo-count strong {
295+
font-weight: 300;
296+
}
297+
298+
.filters {
299+
margin: 0;
300+
padding: 0;
301+
list-style: none;
302+
position: absolute;
303+
right: 0;
304+
left: 0;
305+
}
306+
307+
.filters li {
308+
display: inline;
309+
}
310+
311+
.filters li a {
312+
color: inherit;
313+
margin: 3px;
314+
padding: 3px 7px;
315+
text-decoration: none;
316+
border: 1px solid transparent;
317+
border-radius: 3px;
318+
}
319+
320+
.filters li a:hover {
321+
border-color: #DB7676;
322+
}
323+
324+
.filters li a.selected {
325+
border-color: #CE4646;
326+
}
327+
328+
.clear-completed,
329+
html .clear-completed:active {
330+
float: right;
331+
position: relative;
332+
line-height: 19px;
333+
text-decoration: none;
334+
cursor: pointer;
335+
}
336+
337+
.clear-completed:hover {
338+
text-decoration: underline;
339+
}
340+
341+
.info {
342+
margin: 65px auto 0;
343+
color: #4d4d4d;
344+
font-size: 11px;
345+
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
346+
text-align: center;
347+
}
348+
349+
.info p {
350+
line-height: 1;
351+
}
352+
353+
.info a {
354+
color: inherit;
355+
text-decoration: none;
356+
font-weight: 400;
357+
}
358+
359+
.info a:hover {
360+
text-decoration: underline;
361+
}
362+
363+
/*
364+
Hack to remove background from Mobile Safari.
365+
Can't use it globally since it destroys checkboxes in Firefox
366+
*/
367+
@media screen and (-webkit-min-device-pixel-ratio:0) {
368+
.toggle-all,
369+
.todo-list li .toggle {
370+
background: none;
371+
}
372+
373+
.todo-list li .toggle {
374+
height: 40px;
375+
}
376+
}
377+
378+
@media (max-width: 430px) {
379+
.footer {
380+
height: 50px;
381+
}
382+
383+
.filters {
384+
bottom: 10px;
385+
}
386+
}
387+
388+
:focus,
389+
.toggle:focus + label,
390+
.toggle-all:focus + label {
391+
box-shadow: 0 0 2px 2px #CF7D7D;
392+
outline: 0;
393+
}

0 commit comments

Comments
 (0)