Skip to content

Commit 2e14923

Browse files
matteiusmatteius
committed
Enhanced code refactoring
1 parent d484b20 commit 2e14923

File tree

3 files changed

+684
-0
lines changed

3 files changed

+684
-0
lines changed

‎crates/cli/src/assets/diff.css‎

Lines changed: 310 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,310 @@
1+
/* Smart Code Diff HTML Output Styles */
2+
3+
body {
4+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
5+
line-height: 1.6;
6+
color: #333;
7+
background-color: #f8f9fa;
8+
margin: 0;
9+
padding: 0;
10+
}
11+
12+
.container {
13+
max-width: 1200px;
14+
margin: 0 auto;
15+
padding: 20px;
16+
background-color: white;
17+
box-shadow: 0 0 10px rgba(0,0,0,0.1);
18+
min-height: 100vh;
19+
}
20+
21+
h1 {
22+
color: #2c3e50;
23+
border-bottom: 3px solid #3498db;
24+
padding-bottom: 10px;
25+
margin-bottom: 30px;
26+
}
27+
28+
h2 {
29+
color: #34495e;
30+
border-bottom: 2px solid #ecf0f1;
31+
padding-bottom: 8px;
32+
margin-top: 30px;
33+
margin-bottom: 20px;
34+
}
35+
36+
h3 {
37+
color: #2c3e50;
38+
margin-top: 25px;
39+
margin-bottom: 15px;
40+
}
41+
42+
.comparison {
43+
margin-bottom: 40px;
44+
border: 1px solid #e1e8ed;
45+
border-radius: 8px;
46+
padding: 20px;
47+
background-color: #fafbfc;
48+
}
49+
50+
.info-panel {
51+
display: grid;
52+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
53+
gap: 15px;
54+
margin-bottom: 20px;
55+
padding: 15px;
56+
background-color: #f1f3f4;
57+
border-radius: 6px;
58+
}
59+
60+
.info-item {
61+
padding: 8px 12px;
62+
background-color: white;
63+
border-radius: 4px;
64+
border-left: 4px solid #3498db;
65+
}
66+
67+
.changes-section {
68+
margin-bottom: 25px;
69+
}
70+
71+
.changes-list {
72+
list-style: none;
73+
padding: 0;
74+
margin: 0;
75+
}
76+
77+
.change-item {
78+
display: flex;
79+
align-items: center;
80+
padding: 10px 15px;
81+
margin-bottom: 8px;
82+
border-radius: 6px;
83+
border-left: 4px solid #ccc;
84+
}
85+
86+
.change-item.addition {
87+
background-color: #d4edda;
88+
border-left-color: #28a745;
89+
}
90+
91+
.change-item.deletion {
92+
background-color: #f8d7da;
93+
border-left-color: #dc3545;
94+
}
95+
96+
.change-item.modification {
97+
background-color: #fff3cd;
98+
border-left-color: #ffc107;
99+
}
100+
101+
.change-item.rename {
102+
background-color: #d1ecf1;
103+
border-left-color: #17a2b8;
104+
}
105+
106+
.change-item.move {
107+
background-color: #e2e3e5;
108+
border-left-color: #6c757d;
109+
}
110+
111+
.change-item.cross-file-move {
112+
background-color: #f0e6ff;
113+
border-left-color: #6f42c1;
114+
}
115+
116+
.change-type {
117+
font-weight: bold;
118+
margin-right: 15px;
119+
padding: 4px 8px;
120+
border-radius: 4px;
121+
font-size: 0.85em;
122+
text-transform: uppercase;
123+
letter-spacing: 0.5px;
124+
}
125+
126+
.change-item.addition .change-type {
127+
background-color: #28a745;
128+
color: white;
129+
}
130+
131+
.change-item.deletion .change-type {
132+
background-color: #dc3545;
133+
color: white;
134+
}
135+
136+
.change-item.modification .change-type {
137+
background-color: #ffc107;
138+
color: #212529;
139+
}
140+
141+
.change-item.rename .change-type {
142+
background-color: #17a2b8;
143+
color: white;
144+
}
145+
146+
.change-item.move .change-type {
147+
background-color: #6c757d;
148+
color: white;
149+
}
150+
151+
.change-item.cross-file-move .change-type {
152+
background-color: #6f42c1;
153+
color: white;
154+
}
155+
156+
.change-desc {
157+
flex: 1;
158+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
159+
font-size: 0.9em;
160+
}
161+
162+
.patterns-section {
163+
margin-bottom: 25px;
164+
}
165+
166+
.patterns-grid {
167+
display: grid;
168+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
169+
gap: 15px;
170+
margin-top: 15px;
171+
}
172+
173+
.pattern-card {
174+
background-color: white;
175+
border: 1px solid #e1e8ed;
176+
border-radius: 8px;
177+
padding: 15px;
178+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
179+
transition: box-shadow 0.2s ease;
180+
}
181+
182+
.pattern-card:hover {
183+
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
184+
}
185+
186+
.pattern-type {
187+
font-weight: bold;
188+
color: #2c3e50;
189+
font-size: 1.1em;
190+
margin-bottom: 8px;
191+
}
192+
193+
.pattern-confidence {
194+
color: #7f8c8d;
195+
font-size: 0.9em;
196+
margin-bottom: 10px;
197+
}
198+
199+
.pattern-desc {
200+
color: #34495e;
201+
line-height: 1.5;
202+
}
203+
204+
.stats-section {
205+
margin-top: 40px;
206+
padding: 20px;
207+
background-color: #f8f9fa;
208+
border-radius: 8px;
209+
border: 1px solid #e9ecef;
210+
}
211+
212+
.stats-grid {
213+
display: grid;
214+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
215+
gap: 15px;
216+
margin-top: 15px;
217+
}
218+
219+
.stat-item {
220+
padding: 12px 15px;
221+
background-color: white;
222+
border-radius: 6px;
223+
border-left: 4px solid #28a745;
224+
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
225+
}
226+
227+
/* Responsive design */
228+
@media (max-width: 768px) {
229+
.container {
230+
padding: 15px;
231+
}
232+
233+
.info-panel {
234+
grid-template-columns: 1fr;
235+
}
236+
237+
.patterns-grid {
238+
grid-template-columns: 1fr;
239+
}
240+
241+
.stats-grid {
242+
grid-template-columns: 1fr;
243+
}
244+
245+
.change-item {
246+
flex-direction: column;
247+
align-items: flex-start;
248+
}
249+
250+
.change-type {
251+
margin-bottom: 8px;
252+
}
253+
}
254+
255+
/* Print styles */
256+
@media print {
257+
body {
258+
background-color: white;
259+
}
260+
261+
.container {
262+
box-shadow: none;
263+
max-width: none;
264+
}
265+
266+
.pattern-card, .stat-item {
267+
box-shadow: none;
268+
border: 1px solid #ccc;
269+
}
270+
}
271+
272+
/* Code highlighting */
273+
code {
274+
background-color: #f1f3f4;
275+
padding: 2px 4px;
276+
border-radius: 3px;
277+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
278+
font-size: 0.9em;
279+
}
280+
281+
pre {
282+
background-color: #f8f9fa;
283+
border: 1px solid #e9ecef;
284+
border-radius: 6px;
285+
padding: 15px;
286+
overflow-x: auto;
287+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
288+
font-size: 0.85em;
289+
line-height: 1.4;
290+
}
291+
292+
/* Accessibility */
293+
.sr-only {
294+
position: absolute;
295+
width: 1px;
296+
height: 1px;
297+
padding: 0;
298+
margin: -1px;
299+
overflow: hidden;
300+
clip: rect(0, 0, 0, 0);
301+
white-space: nowrap;
302+
border: 0;
303+
}
304+
305+
/* Focus styles for keyboard navigation */
306+
.pattern-card:focus,
307+
.change-item:focus {
308+
outline: 2px solid #3498db;
309+
outline-offset: 2px;
310+
}

0 commit comments

Comments
 (0)