Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 3f5bffd

Browse files
authored
闪存头部样式
1 parent 4e31baa commit 3f5bffd

File tree

1 file changed

+152
-1
lines changed

1 file changed

+152
-1
lines changed

‎ing.js‎

Lines changed: 152 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,134 @@ ul, ol {
8888
#right_sidebar{
8989
width:200px;
9090
}
91+
`;
92+
93+
cnblogsIngCss +=`
94+
.header-container{
95+
z-index: 3;
96+
position: fixed;
97+
top: 0;
98+
height: 60px;
99+
width: 100%;
100+
background: #fff;
101+
box-shadow: 0 2px 4px rgba(0,0,0,.1);
102+
display: flex;
103+
justify-content: space-between;
104+
align-items: center;
105+
}
106+
107+
.header-container .logo-container{
108+
margin-left: 20px;
109+
width: 200px;
110+
min-width: 200px;
111+
display: flex;
112+
align-items: center;
113+
}
114+
115+
.header-container .logo-container .logo {
116+
background-image: url(https://files-cdn.cnblogs.com/files/tangyouwei/sprite@1x.045621082c025a11d7a9.gif);
117+
background-position: -206px -85px;
118+
height: 28px;
119+
width: 28px;
120+
margin-right: 10px;
121+
}
122+
123+
.header-container .logo-container .text {
124+
font-size: 20px;
125+
color: #16b998;
126+
}
127+
128+
.header-container .logo-container .text a{
129+
color: #16b998 !important;
130+
padding: 0 !important;
131+
text-decoration: none !important;
132+
cursor: pointer;
133+
}
134+
135+
.header-container .logo-container .beta{
136+
width: 50px;
137+
height: 22px;
138+
line-height: 22px;
139+
margin-left: 8px;
140+
background: #5583aa;
141+
font-size: 12px;
142+
color: #fff;
143+
border-radius: 2px;
144+
text-align: center;
145+
}
146+
147+
.header-container .search-container{
148+
display: flex;
149+
align-items: center;
150+
position: relative;
151+
left: -65px;
152+
}
153+
154+
.header-container .search-container .search-icon {
155+
height: 32px;
156+
width: 32px;
157+
background-image: url(https://files-cdn.cnblogs.com/files/tangyouwei/sprite@1x.045621082c025a11d7a9.gif);
158+
background-position: -136px -565px;
159+
position: relative;
160+
left: 36px;
161+
}
162+
163+
.header-container .search-container input {
164+
outline: 0;
165+
width: 540px;
166+
height: 32px;
167+
border: 0 solid gray;
168+
font-size: 14px;
169+
font-family: PingFangSC-Regular;
170+
padding: 0 0 0 40px;
171+
border-radius: 4px;
172+
background: #f5f6fa;
173+
box-sizing: border-box;
174+
-moz-padding-top: 3px;
175+
}
176+
177+
.header-container .user-container{
178+
margin-right: 40px;
179+
display: flex;
180+
align-items: center;
181+
}
182+
183+
.header-container .user-container .avatar{
184+
height: 30px;
185+
width: 30px;
186+
background: #f5f6f7;
187+
border-radius: 50%;
188+
margin-right: 25px;
189+
cursor: pointer;
190+
}
191+
192+
.header-container .user-container .notify {
193+
position: relative;
194+
width: 25px;
195+
height: 25px;
196+
cursor: pointer;
197+
}
198+
199+
.header-container .user-container .notify .notify-icon {
200+
width: 25px;
201+
height: 25px;
202+
background-image: url(https://files-cdn.cnblogs.com/files/tangyouwei/sprite@1x.045621082c025a11d7a9.gif);
203+
background-position: -102px -189px;
204+
}
205+
206+
.header-container .user-container .notify .notify-count{
207+
position: absolute;
208+
top: -8px;
209+
left: 14px;
210+
padding: 0 5px;
211+
height: 16px;
212+
background: #f57f59;
213+
border-radius: 8px;
214+
display: flex;
215+
align-items: center;
216+
font-size: 10px;
217+
color: #fff;
218+
}
91219
`;
92220

93221
//与元数据块中的@grant值相对应,功能是生成一个style样式
@@ -97,6 +225,29 @@ ul, ol {
97225
reAlign();
98226

99227
function reAlign(){
100-
$("#top").remove();
228+
229+
// 顶部
230+
var topHtml = `
231+
<div class="header-container" style="width: 100%;">
232+
<div class="logo-container">
233+
<div class="logo"></div>
234+
<div class="text"><a href="https://ing.cnblogs.com">博客园闪存</a></div>
235+
<div class="beta">正式版</div>
236+
</div>
237+
<div class="search-container">
238+
<div class="search-icon"></div>
239+
<input id="searchInput" placeholder="搜索闪存、标签、用户" type="text" class="ng-pristine ng-valid ng-touched">
240+
</div>
241+
<div class="user-container">
242+
<img class="avatar" src="https://images.zsxq.com/FjyKWxEmQLmReH4FlovVXBaTFcae?e=1906272000&amp;token=kIxbL07-8jAj8w1n4s9zv64FuZZNEATmlU_Vm6zD:00v7HL5z7VZSOejkM0ZVxRBnUJE=">
243+
<div class="notify">
244+
<div class="notify-icon"></div>
245+
</div>
246+
</div>
247+
</div>
248+
`;
249+
$("#top").html(topHtml);
250+
251+
$("#wrapper #header").remove();
101252
}
102253
})();

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /