Skip to content

Commit 01fb094

Browse files
BernardXiongBernardXiong
committed
Refactor styles to use LESS for improved maintainability and consistency across components
- Removed inline styles from App.vue, Banner.vue, XTerminal.vue, and Create Project.vue - Introduced index.less files for Create Project and Projects pages to centralize styles - Created new LESS files for Banner and XTerminal components - Added global mixins and variables in mixins.less and variables.less for reusable styles - Updated styles to utilize Element Plus design tokens for better theme integration
1 parent c0d434f commit 01fb094

File tree

14 files changed

+1227
-397
lines changed

14 files changed

+1227
-397
lines changed

‎src/vue/about/App.vue‎

Lines changed: 2 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -40,53 +40,6 @@ onMounted(() => {
4040
});
4141
</script>
4242

43-
<style scoped>
44-
.container {
45-
padding: 0;
46-
}
47-
48-
.header_box {
49-
background-color: #fff;
50-
border-bottom: 1px solid #e6e6e6;
51-
padding: 0 20px;
52-
}
53-
54-
.header_logo {
55-
display: flex;
56-
align-items: center;
57-
column-gap: 12px;
58-
font-size: 18px;
59-
color: #333;
60-
height: 100%;
61-
62-
.logo_img {
63-
width: 228px;
64-
height: 68px;
65-
}
66-
67-
.logo_text {
68-
color: #333;
69-
padding-top: 15px;
70-
71-
p {
72-
font-size: 18px;
73-
margin: 0;
74-
}
75-
76-
span {
77-
font-size: 12px;
78-
}
79-
}
80-
}
81-
82-
.content_area {
83-
padding: 20px;
84-
}
85-
86-
.page_title {
87-
font-size: 16px;
88-
color: #666;
89-
margin-bottom: 20px;
90-
font-weight: 500;
91-
}
43+
<style scoped lang="less">
44+
@import './index.less';
9245
</style>

‎src/vue/about/index.less‎

Lines changed: 268 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,268 @@
1+
// About page styles
2+
@import '../styles/mixins.less';
3+
@import '../styles/variables.less';
4+
5+
.container {
6+
.container-base();
7+
padding: 0;
8+
}
9+
10+
.content_area {
11+
padding: @spacing-xl @spacing-xxl;
12+
background-color: @el-bg-color;
13+
max-width: 900px;
14+
margin: 0 auto;
15+
16+
// Markdown content styling - GitHub Flavored Markdown style
17+
> div {
18+
color: @el-text-color-primary;
19+
font-size: @font-size-medium;
20+
line-height: 1.6;
21+
word-wrap: break-word;
22+
23+
// Headings with proper hierarchy
24+
h1, h2, h3, h4, h5, h6 {
25+
color: @el-text-color-primary;
26+
font-weight: 600;
27+
line-height: 1.25;
28+
margin-top: 24px;
29+
margin-bottom: 16px;
30+
31+
// Add subtle border for h1 and h2
32+
&:first-child {
33+
margin-top: 0;
34+
}
35+
}
36+
37+
h1 {
38+
font-size: 2em;
39+
border-bottom: 1px solid @el-border-color-lighter;
40+
padding-bottom: 0.3em;
41+
}
42+
43+
h2 {
44+
font-size: 1.5em;
45+
border-bottom: 1px solid @el-border-color-lighter;
46+
padding-bottom: 0.3em;
47+
}
48+
49+
h3 { font-size: 1.25em; }
50+
h4 { font-size: 1em; }
51+
h5 { font-size: 0.875em; }
52+
h6 {
53+
font-size: 0.85em;
54+
color: @el-text-color-secondary;
55+
}
56+
57+
// Paragraphs
58+
p {
59+
margin-top: 0;
60+
margin-bottom: 16px;
61+
color: @el-text-color-regular;
62+
line-height: 1.6;
63+
}
64+
65+
// Links
66+
a {
67+
color: @el-color-primary;
68+
text-decoration: none;
69+
font-weight: 400;
70+
transition: @transition-color;
71+
72+
&:hover {
73+
color: @el-color-primary-light-3;
74+
text-decoration: underline;
75+
}
76+
77+
&:active {
78+
color: @el-color-primary-dark-2;
79+
}
80+
}
81+
82+
// Inline code
83+
code {
84+
padding: 0.2em 0.4em;
85+
margin: 0;
86+
font-size: 85%;
87+
background-color: rgba(175, 184, 193, 0.2);
88+
border-radius: 3px;
89+
font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
90+
color: @el-text-color-primary;
91+
}
92+
93+
// Code blocks
94+
pre {
95+
margin-top: 0;
96+
margin-bottom: 16px;
97+
padding: 16px;
98+
overflow: auto;
99+
font-size: 85%;
100+
line-height: 1.45;
101+
background-color: @el-fill-color-light;
102+
border-radius: 6px;
103+
.scrollbar-style();
104+
105+
code {
106+
padding: 0;
107+
margin: 0;
108+
font-size: 100%;
109+
word-break: normal;
110+
white-space: pre;
111+
background: transparent;
112+
border: 0;
113+
color: @el-text-color-primary;
114+
line-height: inherit;
115+
}
116+
}
117+
118+
// Lists
119+
ul, ol {
120+
margin-top: 0;
121+
margin-bottom: 16px;
122+
padding-left: 2em;
123+
124+
li {
125+
margin-bottom: 0.25em;
126+
color: @el-text-color-regular;
127+
line-height: 1.6;
128+
129+
> p {
130+
margin-bottom: 0.25em;
131+
}
132+
}
133+
134+
ul, ol {
135+
margin-top: 0.25em;
136+
margin-bottom: 0.25em;
137+
}
138+
}
139+
140+
// Task lists
141+
ul li input[type="checkbox"] {
142+
margin-right: 0.5em;
143+
vertical-align: middle;
144+
}
145+
146+
// Blockquotes
147+
blockquote {
148+
margin: 16px 0;
149+
padding: 0 1em;
150+
color: @el-text-color-secondary;
151+
border-left: 0.25em solid @el-border-color;
152+
153+
> :first-child {
154+
margin-top: 0;
155+
}
156+
157+
> :last-child {
158+
margin-bottom: 0;
159+
}
160+
161+
p {
162+
color: @el-text-color-secondary;
163+
}
164+
}
165+
166+
// Tables
167+
table {
168+
display: block;
169+
width: 100%;
170+
overflow: auto;
171+
margin-top: 0;
172+
margin-bottom: 16px;
173+
border-spacing: 0;
174+
border-collapse: collapse;
175+
176+
thead {
177+
display: table-header-group;
178+
}
179+
180+
tr {
181+
background-color: @el-bg-color;
182+
border-top: 1px solid @el-border-color-light;
183+
184+
&:nth-child(2n) {
185+
background-color: @el-fill-color-lighter;
186+
}
187+
}
188+
189+
th {
190+
padding: 6px 13px;
191+
border: 1px solid @el-border-color-light;
192+
font-weight: 600;
193+
text-align: left;
194+
background-color: @el-fill-color-light;
195+
color: @el-text-color-primary;
196+
}
197+
198+
td {
199+
padding: 6px 13px;
200+
border: 1px solid @el-border-color-light;
201+
color: @el-text-color-regular;
202+
}
203+
}
204+
205+
// Horizontal rules
206+
hr {
207+
height: 0.25em;
208+
padding: 0;
209+
margin: 24px 0;
210+
background-color: @el-border-color-lighter;
211+
border: 0;
212+
}
213+
214+
// Images
215+
img {
216+
max-width: 100%;
217+
box-sizing: content-box;
218+
background-color: @el-bg-color;
219+
220+
&[align=right] {
221+
padding-left: 20px;
222+
}
223+
224+
&[align=left] {
225+
padding-right: 20px;
226+
}
227+
}
228+
229+
// Definition lists
230+
dl {
231+
padding: 0;
232+
233+
dt {
234+
padding: 0;
235+
margin-top: 16px;
236+
font-size: 1em;
237+
font-style: italic;
238+
font-weight: 600;
239+
color: @el-text-color-primary;
240+
}
241+
242+
dd {
243+
padding: 0 16px;
244+
margin-bottom: 16px;
245+
color: @el-text-color-regular;
246+
}
247+
}
248+
249+
// Keyboard keys
250+
kbd {
251+
display: inline-block;
252+
padding: 3px 5px;
253+
font-size: 11px;
254+
line-height: 10px;
255+
color: @el-text-color-primary;
256+
vertical-align: middle;
257+
background-color: @el-fill-color-lighter;
258+
border: 1px solid @el-border-color;
259+
border-radius: 3px;
260+
box-shadow: inset 0 -1px 0 @el-border-color;
261+
}
262+
}
263+
264+
// Primary button at the bottom
265+
.el-button {
266+
margin-top: @spacing-xl;
267+
}
268+
}

0 commit comments

Comments
 (0)