Skip to content

Commit c601e61

Browse files
committed
chore: make tab bar style compatible for light theme
1 parent 12001d5 commit c601e61

File tree

1 file changed

+92
-26
lines changed

1 file changed

+92
-26
lines changed

src/styles/Extn-TabBar.less

Lines changed: 92 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
.tab-bar-container {
22
display: flex;
33
align-items: center;
4-
background-color: #1E1E1E;
5-
border-bottom: 1px solid #333;
4+
background-color: #f5f5f5;
5+
border-bottom: 1px solid #ddd;
66
position: relative;
77
overflow: hidden;
88
z-index: 2;
99
}
1010

11+
.dark .tab-bar-container {
12+
background-color: #1E1E1E;
13+
border-bottom: 1px solid #333;
14+
}
1115

1216
.phoenix-tab-bar {
1317
flex: 1;
@@ -18,9 +22,12 @@
1822
white-space: nowrap;
1923
transition: height 0.3s ease;
2024
scroll-behavior: smooth;
21-
background-color: #1E1E1E;
25+
background-color: #f5f5f5;
2226
}
2327

28+
.dark .phoenix-tab-bar {
29+
background-color: #1E1E1E;
30+
}
2431

2532
.phoenix-tab-bar::-webkit-scrollbar {
2633
height: 0.25rem;
@@ -43,12 +50,15 @@
4350
display: none;
4451
}
4552

46-
4753
.overflow-button:hover,
4854
.overflow-button-2:hover {
49-
background-color: #333;
55+
background-color: #e0e0e0;
5056
}
5157

58+
.dark .overflow-button:hover,
59+
.dark .overflow-button-2:hover {
60+
background-color: #333;
61+
}
5262

5363
.overflow-button::before,
5464
.overflow-button-2::before {
@@ -59,17 +69,21 @@
5969
width: 1rem;
6070
height: 100%;
6171
pointer-events: none;
62-
background: linear-gradient(to right, rgba(30, 30, 30, 0), #1E1E1E);
72+
background: linear-gradient(to right, rgba(245, 245, 245, 0), #f5f5f5);
6373
}
6474

75+
.dark .overflow-button::before,
76+
.dark .overflow-button-2::before {
77+
background: linear-gradient(to right, rgba(30, 30, 30, 0), #1E1E1E);
78+
}
6579

6680
.tab {
6781
display: inline-flex;
6882
align-items: center;
6983
padding: 0 0.5rem 0 0.85rem;
7084
height: 100%;
71-
background-color: #2D2D2D;
72-
border-right: 1px solid #333;
85+
background-color: #F8F8F8;
86+
border-right: 1px solid #ddd;
7387
cursor: pointer;
7488
position: relative;
7589
flex: 0 0 auto;
@@ -78,6 +92,10 @@
7892
transition: transform 60ms ease, opacity 60ms ease;
7993
}
8094

95+
.dark .tab {
96+
background-color: #2D2D2D;
97+
border-right: 1px solid #333;
98+
}
8199

82100
.tab,
83101
.tab-close,
@@ -86,16 +104,14 @@
86104
transition: all 120ms ease-out;
87105
}
88106

89-
90107
.tab-icon {
91108
display: flex;
92109
align-items: center;
93110
margin-bottom: -2px;
94111
}
95112

96-
97113
.tab-name {
98-
color: #aaa;
114+
color: #555;
99115
display: inline-flex;
100116
align-items: center;
101117
font-size: 0.85rem;
@@ -104,28 +120,40 @@
104120
white-space: nowrap;
105121
}
106122

123+
.dark .tab-name {
124+
color: #aaa;
125+
}
126+
107127
.tab.active .tab-name {
108-
color: #dedede;
128+
color: #333;
109129
}
110130

131+
.dark .tab.active .tab-name {
132+
color: #dedede;
133+
}
111134

112135
.tab .tab-dirname {
113136
font-size: 0.65rem;
114137
opacity: 0.7;
115138
font-weight: normal;
116139
}
117140

118-
119141
.tab.active {
120-
background-color: #3D3D3D;
142+
background-color: #fff;
121143
}
122144

145+
.dark .tab.active {
146+
background-color: #3D3D3D;
147+
}
123148

124149
.tab:hover {
125-
background-color: #4d4949;
150+
background-color: #f0f0f0;
126151
cursor: pointer;
127152
}
128153

154+
.dark .tab:hover {
155+
background-color: #4d4949;
156+
}
129157

130158
.tab.active::after {
131159
content: "";
@@ -134,36 +162,45 @@
134162
left: 0;
135163
right: 0;
136164
height: 0.12rem;
137-
background-color: #75BEFF;
165+
background-color: #0078D7;
138166
}
139167

168+
.dark .tab.active::after {
169+
background-color: #75BEFF;
170+
}
140171

141172
.tab.dirty::before {
142173
content: "";
143-
color: #8D8D8E;
174+
color: #888;
144175
font-size: 1.6rem;
145176
position: absolute;
146177
left: 0.75rem;
147178
top: 0.25rem;
148179
}
149180

181+
.dark .tab.dirty::before {
182+
color: #8D8D8E;
183+
}
184+
150185
.tab.dirty .tab-icon {
151186
margin-left: 0.8rem;
152187
}
153188

154-
155189
.tab-close {
156190
font-size: 0.75rem;
157191
padding: 0.08rem 0.4rem;
158192
margin-left: 0.25rem;
159-
color: #CCC;
193+
color: #666;
160194
transition: all 0.2s ease;
161195
border-radius: 0.2rem;
162196
visibility: hidden;
163197
opacity: 0;
164198
pointer-events: none;
165199
}
166200

201+
.dark .tab-close {
202+
color: #CCC;
203+
}
167204

168205
.tab:hover .tab-close,
169206
.tab.active .tab-close {
@@ -172,37 +209,50 @@
172209
pointer-events: auto;
173210
}
174211

175-
176212
.tab-close:hover {
177213
cursor: pointer;
178-
background-color: rgba(255, 255, 255, 0.1);
214+
background-color: rgba(0, 0, 0, 0.1);
179215
}
180216

217+
.dark .tab-close:hover {
218+
background-color: rgba(255, 255, 255, 0.1);
219+
}
181220

182221
.tab.dragging {
183222
opacity: 0.7;
184223
transform: scale(0.95);
185224
cursor: grabbing !important;
186225
z-index: 10000;
226+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
227+
}
228+
229+
.dark .tab.dragging {
187230
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
188231
}
189232

190233
.tab.drag-target {
191-
background-color: #383838;
234+
background-color: #e5e5e5;
192235
}
193236

237+
.dark .tab.drag-target {
238+
background-color: #383838;
239+
}
194240

195241
.tab-drag-indicator {
196242
position: fixed;
197243
width: 2px;
198-
background-color: #75BEFF;
244+
background-color: #0078D7;
199245
pointer-events: none;
200246
z-index: 10001;
201-
box-shadow: 0 0 3px rgba(117, 190, 255, 0.5);
247+
box-shadow: 0 0 3px rgba(0, 120, 215, 0.5);
202248
display: none;
203249
animation: pulse 1.5s infinite;
204250
}
205251

252+
.dark .tab-drag-indicator {
253+
background-color: #75BEFF;
254+
box-shadow: 0 0 3px rgba(117, 190, 255, 0.5);
255+
}
206256

207257
@keyframes pulse {
208258
0% {
@@ -226,6 +276,10 @@
226276
}
227277

228278
.dropdown-tab-item:hover {
279+
background-color: #e8f0fa;
280+
}
281+
282+
.dark .dropdown-tab-item:hover {
229283
background-color: #2A3B50;
230284
}
231285

@@ -248,13 +302,17 @@
248302
}
249303

250304
.tab-dirty-icon-overflow {
251-
color: #8D8D8E;
305+
color: #888;
252306
font-size: 1.6rem;
253307
width: 0.2rem;
254308
display: inline-flex;
255309
margin: 0.125rem 0.6rem 0.4rem -0.2rem;
256310
}
257311

312+
.dark .tab-dirty-icon-overflow {
313+
color: #8D8D8E;
314+
}
315+
258316
.tab-dirty-icon-overflow.empty {
259317
visibility: hidden;
260318
}
@@ -265,11 +323,19 @@
265323
padding: 0.3rem 0.6rem;
266324
margin-left: 0.5rem;
267325
margin-top: -0.1rem;
268-
color: #CCC;
326+
color: #666;
269327
transition: all 0.2s ease;
270328
border-radius: 0.25rem;
271329
}
272330

331+
.dark .tab-close-icon-overflow {
332+
color: #CCC;
333+
}
334+
273335
.tab-close-icon-overflow .fa-solid.fa-times:hover {
336+
color: #333;
337+
}
338+
339+
.dark .tab-close-icon-overflow .fa-solid.fa-times:hover {
274340
color: #FFF;
275341
}

0 commit comments

Comments
 (0)