Skip to content

Commit 2b0034d

Browse files
justinchiujustinchiu
committed
add file explorer
1 parent a3f3139 commit 2b0034d

File tree

4 files changed

+1785
-0
lines changed

4 files changed

+1785
-0
lines changed

‎filesystem-explorer.css‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
/* Filesystem Explorer Tabs */
2+
.filesystem-tabs-container {
3+
margin: 20px 0;
4+
border: 1px solid #ddd;
5+
border-radius: 8px;
6+
overflow: hidden;
7+
background: #f9f9f9;
8+
}
9+
10+
.filesystem-tabs {
11+
display: flex;
12+
background: #333;
13+
margin: 0;
14+
border-bottom: none;
15+
}
16+
17+
.tab-button {
18+
background: rgba(0, 0, 0, 0.3);
19+
border: none;
20+
padding: 16px 24px;
21+
cursor: pointer;
22+
font-size: 14px;
23+
font-weight: 500;
24+
color: #bbb;
25+
transition: all 0.3s ease;
26+
flex: 1;
27+
text-align: center;
28+
position: relative;
29+
border-right: 1px solid rgba(255, 255, 255, 0.1);
30+
}
31+
32+
.tab-button:last-child {
33+
border-right: none;
34+
}
35+
36+
.tab-button:hover:not(.active) {
37+
background: rgba(255, 255, 255, 0.1);
38+
color: #ddd;
39+
}
40+
41+
.tab-button.active {
42+
color: #ffffff;
43+
background: #f9f9f9;
44+
color: #333;
45+
font-weight: 700;
46+
box-shadow: inset 0 3px 0 #007bff;
47+
}
48+
49+
.tab-button.active::before {
50+
content: '●';
51+
margin-right: 8px;
52+
color: #007bff;
53+
font-size: 12px;
54+
}
55+
56+
.tab-content {
57+
display: none;
58+
}
59+
60+
.tab-content.active {
61+
display: block;
62+
}
63+
64+
.tab-content .filesystem-explorer {
65+
border: none;
66+
border-radius: 0;
67+
margin: 0;
68+
}
69+
70+
/* Filesystem Explorer Styles */
71+
.filesystem-explorer {
72+
border: 1px solid #ddd;
73+
border-radius: 8px;
74+
margin: 20px 0;
75+
background: #f9f9f9;
76+
font-family: 'Courier New', monospace;
77+
max-width: 100%;
78+
overflow: hidden;
79+
}
80+
81+
.filesystem-header {
82+
background: #333;
83+
color: white;
84+
padding: 12px 16px;
85+
border-bottom: 1px solid #555;
86+
}
87+
88+
.filesystem-header h3 {
89+
margin: 0 0 8px 0;
90+
font-size: 16px;
91+
color: #ffffff;
92+
font-weight: 600;
93+
}
94+
95+
.filesystem-path {
96+
font-size: 12px;
97+
color: #ccc;
98+
}
99+
100+
.path-segment {
101+
cursor: pointer;
102+
padding: 2px 4px;
103+
border-radius: 3px;
104+
transition: background 0.2s;
105+
}
106+
107+
.path-segment:hover {
108+
background: #555;
109+
}
110+
111+
.path-separator {
112+
margin: 0 4px;
113+
color: #999;
114+
}
115+
116+
.filesystem-content {
117+
max-height: 500px;
118+
overflow-y: auto;
119+
}
120+
121+
.directory-listing {
122+
padding: 12px;
123+
}
124+
125+
.directory-item {
126+
padding: 8px 12px;
127+
cursor: pointer;
128+
border-radius: 4px;
129+
margin: 2px 0;
130+
transition: background 0.2s;
131+
font-size: 14px;
132+
}
133+
134+
.directory-item:hover {
135+
background: #e8e8e8;
136+
}
137+
138+
.directory-item.directory {
139+
color: #0066cc;
140+
font-weight: 500;
141+
}
142+
143+
.directory-item.file {
144+
color: #333;
145+
}
146+
147+
.directory-item.directory-back {
148+
color: #666;
149+
font-style: italic;
150+
}
151+
152+
.file-content {
153+
padding: 0;
154+
}
155+
156+
.file-header {
157+
background: #f0f0f0;
158+
padding: 8px 16px;
159+
border-bottom: 1px solid #ddd;
160+
display: flex;
161+
justify-content: space-between;
162+
align-items: center;
163+
}
164+
165+
.btn-back {
166+
background: #007bff;
167+
color: white;
168+
border: none;
169+
padding: 6px 12px;
170+
border-radius: 4px;
171+
cursor: pointer;
172+
font-size: 12px;
173+
}
174+
175+
.btn-back:hover {
176+
background: #0056b3;
177+
}
178+
179+
.file-content pre {
180+
margin: 0;
181+
padding: 16px;
182+
background: white;
183+
overflow-x: auto;
184+
font-size: 12px;
185+
line-height: 1.4;
186+
}
187+
188+
.file-content code {
189+
color: #333;
190+
}
191+
192+
/* Responsive styles */
193+
@media (max-width: 768px) {
194+
.filesystem-explorer {
195+
font-size: 12px;
196+
}
197+
198+
.filesystem-content {
199+
max-height: 400px;
200+
}
201+
202+
.directory-item {
203+
padding: 6px 8px;
204+
font-size: 12px;
205+
}
206+
207+
.file-content pre {
208+
padding: 12px;
209+
font-size: 11px;
210+
}
211+
}

0 commit comments

Comments
 (0)