Skip to content

Commit 2c191ec

Browse files
ericmjericmj
committed
WIP
1 parent 791223d commit 2c191ec

File tree

19 files changed

+6939
-444
lines changed

19 files changed

+6939
-444
lines changed

‎assets/css/app.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import "./milligram.css";
2+
@import "./diff.css";
23

34
html, body {
45
display:flex;

‎assets/css/diff.css‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
/* Diff LiveView Styles */
2+
.diff-container {
3+
max-width: 1200px;
4+
margin: 0 auto;
5+
padding: 20px;
6+
}
7+
8+
.diff-header {
9+
display: flex;
10+
justify-content: space-between;
11+
align-items: center;
12+
margin-bottom: 20px;
13+
border-bottom: 2px solid #e1e4e8;
14+
padding-bottom: 15px;
15+
}
16+
17+
.diff-header h1 {
18+
margin: 0;
19+
font-size: 1.8rem;
20+
color: #24292e;
21+
}
22+
23+
.version-range {
24+
display: flex;
25+
align-items: center;
26+
gap: 10px;
27+
font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
28+
}
29+
30+
.from-version, .to-version {
31+
padding: 4px 8px;
32+
background: #f6f8fa;
33+
border: 1px solid #e1e4e8;
34+
border-radius: 4px;
35+
font-size: 14px;
36+
}
37+
38+
.arrow {
39+
color: #6a737d;
40+
font-weight: bold;
41+
}
42+
43+
.diff-stats {
44+
display: flex;
45+
gap: 20px;
46+
margin-bottom: 20px;
47+
padding: 15px;
48+
background: #f6f8fa;
49+
border-radius: 6px;
50+
border: 1px solid #e1e4e8;
51+
}
52+
53+
.stat {
54+
display: flex;
55+
flex-direction: column;
56+
align-items: center;
57+
gap: 4px;
58+
}
59+
60+
.stat .label {
61+
font-size: 12px;
62+
color: #6a737d;
63+
font-weight: 600;
64+
text-transform: uppercase;
65+
}
66+
67+
.stat .value {
68+
font-size: 18px;
69+
font-weight: bold;
70+
color: #24292e;
71+
}
72+
73+
.stat.additions .value {
74+
color: #28a745;
75+
}
76+
77+
.stat.deletions .value {
78+
color: #d73a49;
79+
}
80+
81+
.loading-container {
82+
display: flex;
83+
align-items: center;
84+
justify-content: center;
85+
gap: 10px;
86+
padding: 40px;
87+
color: #6a737d;
88+
}
89+
90+
.loading-spinner {
91+
width: 20px;
92+
height: 20px;
93+
border: 2px solid #e1e4e8;
94+
border-top: 2px solid #0366d6;
95+
border-radius: 50%;
96+
animation: spin 1s linear infinite;
97+
}
98+
99+
@keyframes spin {
100+
0% { transform: rotate(0deg); }
101+
100% { transform: rotate(360deg); }
102+
}
103+
104+
.search-container {
105+
margin-bottom: 20px;
106+
}
107+
108+
.search-container input {
109+
width: 100%;
110+
padding: 10px 12px;
111+
border: 1px solid #e1e4e8;
112+
border-radius: 6px;
113+
font-size: 14px;
114+
background: #fff;
115+
}
116+
117+
.search-container input:focus {
118+
outline: none;
119+
border-color: #0366d6;
120+
box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
121+
}
122+
123+
.patch-list {
124+
display: flex;
125+
flex-direction: column;
126+
gap: 20px;
127+
}
128+
129+
.patch-container {
130+
border: 1px solid #e1e4e8;
131+
border-radius: 6px;
132+
overflow: hidden;
133+
}
134+
135+
.patch-loading {
136+
padding: 20px;
137+
text-align: center;
138+
color: #6a737d;
139+
background: #f6f8fa;
140+
}
141+
142+
.load-more-container {
143+
display: flex;
144+
justify-content: center;
145+
padding: 20px;
146+
}
147+
148+
.load-more-btn {
149+
padding: 10px 20px;
150+
background: #0366d6;
151+
color: white;
152+
border: none;
153+
border-radius: 6px;
154+
cursor: pointer;
155+
font-size: 14px;
156+
font-weight: 600;
157+
}
158+
159+
.load-more-btn:hover {
160+
background: #0256cc;
161+
}
162+
163+
.load-more-btn:active {
164+
background: #024ea4;
165+
}
166+
167+
.patch-error {
168+
padding: 20px;
169+
background: #ffeaea;
170+
color: #d73a49;
171+
border: 1px solid #f1b9b7;
172+
border-radius: 4px;
173+
margin: 10px;
174+
}
175+
176+
/* Responsive design */
177+
@media (max-width: 768px) {
178+
.diff-header {
179+
flex-direction: column;
180+
align-items: flex-start;
181+
gap: 15px;
182+
}
183+
184+
.diff-stats {
185+
flex-direction: column;
186+
gap: 15px;
187+
}
188+
189+
.version-range {
190+
flex-wrap: wrap;
191+
}
192+
}

0 commit comments

Comments
 (0)