Skip to content

Commit 65cd004

Browse files
tw93tw93
committed
🎨 Optimize image effects and selection
1 parent ab79f74 commit 65cd004

File tree

2 files changed

+363
-163
lines changed

2 files changed

+363
-163
lines changed

‎newtab/newtab.html

Lines changed: 126 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -27,39 +27,73 @@
2727

2828
#bg-selector {
2929
outline: none;
30-
font-size: 14px;
30+
font-size: 12px;
3131
color: #fff;
32-
text-shadow: 2px 2px 4px rgba(50, 50, 100, 0.5);
33-
padding: 6px 20px 6px 10px;
34-
border: none;
35-
border-radius: 6px;
36-
background: transparent;
32+
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
33+
padding: 4px 16px 4px 8px;
34+
border: 1px solid rgba(255, 255, 255, 0.2);
35+
border-radius: 4px;
36+
background: rgba(0, 0, 0, 0.1);
3737
appearance: none;
38+
min-width: 80px;
39+
cursor: pointer;
40+
transition: all 0.2s ease;
41+
opacity: 0.7;
42+
}
43+
44+
#bg-selector:hover {
45+
background: rgba(0, 0, 0, 0.2);
46+
border-color: rgba(255, 255, 255, 0.3);
47+
opacity: 1;
3848
}
39-
.selector-container::after {
49+
.select-wrapper {
50+
position: relative;
51+
}
52+
53+
.select-wrapper::after {
4054
content: "▽";
4155
color: #fff;
42-
text-shadow: 2px 2px 4px rgba(50, 50, 100, 0.5);
56+
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
4357
position: absolute;
44-
right: 8px;
58+
right: 6px;
4559
top: 50%;
4660
transform: translateY(-50%);
4761
pointer-events: none;
62+
font-size: 10px;
63+
opacity: 0.7;
4864
}
4965

50-
.selector-container {
66+
#bottom-ui-container {
5167
position: fixed;
52-
top: 16px;
53-
right: 16px;
68+
bottom: 35px;
69+
left: 30px;
70+
display: flex;
71+
flex-direction: column;
72+
align-items: flex-start;
73+
gap: 12px;
74+
visibility: hidden;
75+
opacity: 0;
76+
transition: all 0.3s ease-in-out;
77+
transform: translateY(10px);
78+
}
79+
80+
#bottom-ui-container.visible {
81+
visibility: visible;
82+
opacity: 1;
83+
transform: translateY(0);
84+
}
85+
86+
.selector-container {
87+
position: relative;
88+
display: flex;
89+
align-items: center;
90+
gap: 8px;
5491
}
5592

5693
#bg-description {
57-
position: fixed;
58-
bottom: 16px;
59-
left: 26px;
6094
display: flex;
6195
align-items: flex-start;
62-
gap: 6px;
96+
gap: 4px;
6397
cursor: pointer;
6498
text-decoration: none;
6599
font-size: 14px;
@@ -69,62 +103,74 @@
69103
0 0 12px rgba(0, 0, 0, 0.5),
70104
1px 1px 2px rgba(0, 0, 0, 0.6);
71105
line-height: 1.4;
72-
max-width: 400px;
106+
max-width: 600px;
73107
}
74108

75109
.bg-content {
76110
flex: 1;
111+
display: flex;
112+
flex-direction: column;
113+
gap: 4px;
114+
min-width: 0;
115+
}
116+
117+
.content-row {
118+
display: flex;
119+
align-items: center;
120+
gap: 6px;
121+
min-width: 0;
122+
}
123+
124+
.title-part {
125+
flex: 1;
126+
white-space: nowrap;
127+
overflow: hidden;
128+
text-overflow: ellipsis;
129+
margin-right: 8px;
130+
}
131+
132+
.date-part {
133+
flex-shrink: 0;
134+
white-space: nowrap;
77135
}
78136

79137
.refresh-btn {
80138
display: none;
81139
width: 24px;
82140
height: 24px;
83141
border: none;
84-
background: none;
142+
background: rgba(255, 255, 255, 0.1);
143+
border-radius: 50%;
85144
cursor: pointer;
86145
color: #fff;
87146
font-size: 16px;
88-
text-shadow:
89-
0 0 6px rgba(0, 0, 0, 0.7),
90-
0 0 12px rgba(0, 0, 0, 0.5),
91-
1px 1px 2px rgba(0, 0, 0, 0.6);
92-
transition: transform 0.2s ease;
147+
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
148+
transition: all 0.3s ease;
93149
flex-shrink: 0;
94-
margin-top: 0px;
95-
opacity: 0.8;
150+
opacity: 0.6;
151+
padding: 0;
152+
margin: 0;
153+
backdrop-filter: blur(10px);
154+
border: 1px solid rgba(255, 255, 255, 0.1);
155+
align-items: center;
156+
justify-content: center;
96157
}
97158

98159
.refresh-btn:hover {
99160
transform: rotate(180deg);
100161
opacity: 1;
162+
background: rgba(255, 255, 255, 0.2);
163+
border-color: rgba(255, 255, 255, 0.2);
164+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
101165
}
102166

103167
.refresh-btn.show {
104-
display: flex;
168+
display: flex !important;
105169
align-items: center;
106170
justify-content: center;
107171
}
108172

109-
.selector-container {
110-
visibility: hidden;
111-
opacity: 0;
112-
transition: all 0.3s ease-in-out;
113-
transform: translateY(-10px);
114-
}
115-
116-
.selector-container.visible {
117-
visibility: visible;
118-
opacity: 1;
119-
transform: translateY(0);
120-
}
121173

122-
#bg-description {
123-
visibility: visible;
124-
opacity: 1;
125-
transition: all 0.3s ease-in-out;
126-
transform: translateY(0);
127-
}
128174

129175
@media (prefers-color-scheme: light) {
130176
body.blank #bg-description,
@@ -134,25 +180,51 @@
134180
text-shadow: none;
135181
}
136182

183+
body.blank #bg-selector {
184+
background: rgba(255, 255, 255, 0.1);
185+
border-color: rgba(0, 0, 0, 0.2);
186+
color: #333;
187+
}
188+
189+
body.blank #bg-selector:hover {
190+
border-color: rgba(0, 0, 0, 0.3);
191+
}
192+
193+
body.blank .select-wrapper::after {
194+
color: #333;
195+
}
196+
137197
body.blank .refresh-btn {
138198
color: #333;
139199
text-shadow: none;
200+
background: rgba(0, 0, 0, 0.05);
201+
border-color: rgba(0, 0, 0, 0.1);
202+
}
203+
204+
body.blank .refresh-btn:hover {
205+
background: rgba(0, 0, 0, 0.1);
206+
border-color: rgba(0, 0, 0, 0.15);
140207
}
141208
}
142209
</style>
143210
</head>
144211
<body>
145-
<div class="selector-container">
146-
<select id="bg-selector">
147-
<option value="bing">黑白艺术</option>
148-
<option value="blank">空白页面</option>
149-
<option value="random">潮流周刊</option>
150-
</select>
212+
<div id="bottom-ui-container">
213+
<div class="selector-container">
214+
<div class="select-wrapper">
215+
<select id="bg-selector">
216+
<option value="bing">必应壁纸</option>
217+
<option value="pexels">黑白艺术</option>
218+
<option value="random">潮流周刊</option>
219+
<option value="blank">空白页面</option>
220+
</select>
221+
</div>
222+
<button class="refresh-btn" id="refresh-btn" title="刷新内容">⟲</button>
223+
</div>
224+
<a id="bg-description">
225+
<div class="bg-content"></div>
226+
</a>
151227
</div>
152-
<a id="bg-description">
153-
<div class="bg-content"></div>
154-
<button class="refresh-btn" id="refresh-btn" title="刷新内容">⟲</button>
155-
</a>
156228
<script src="newtab.js"></script>
157229
</body>
158230
</html>

0 commit comments

Comments
 (0)