├── README.md └── flat_zhihu.CSS /README.md: -------------------------------------------------------------------------------- 1 | ![Plains-Gate](http://pic4.zhimg.com/e0b0f57df6c510302a79c5f5b552f7ab_b.jpg) 2 | 3 | The title comes from the famous Game/Animation Steins;Gate. 4 | 5 | As the description says, this is a flat UI project. I design flat UI for the websites I frequently use. That's it. 6 | 7 | The first project is [Zhihu](www.zhihu.com). The UI part of the project is almost done, however the interaction part really got some trouble. The interaction of a website is more complicated. It can't be that easy like just write a CSS and get all the problem's done. So, the left part of the project is pause, but you still can use it for the UI modification. 8 | 9 | The second project is [bilibili](www.bilibili.tv) which is still in preparation. 10 | 11 | ##### User Guide 12 | 13 | 1. Please use it on Chrome or Firefox. 14 | 2. Install Stylish for Chrome: [Stylish - Chrome Web Store](https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe/) 15 | 3. Firefox user could click this link: [Stylish for Firefox](https://addons.mozilla.org/en-US/firefox/addon/stylish/?src=external-userstyleshome/) 16 | 4. Open this page to install CSS: [Flat_Zhihu ](https://userstyles.org/styles/108011/flat-zhihu-v2-1/) 17 | 5. Enjoy! 18 | 19 | If you have any problems or advices with this project, comment or send me a message on Zhihu:[【Plains;Gate.】Flat_Zhihu v2.1 - 知乎专栏](https://zhuanlan.zhihu.com/p/24231834) 20 | 21 | 22 | ---- 23 | 24 | 项目名 Neta 自著名游戏/改编动画《命运石之门》 25 | 26 | 取了一个看起来很厉害的名字，但实际上做的东西很简单，只是将一些 UI 非常不符合我个人审美但又每天都不得不打开看看刷刷的网站，给他们换个皮而已。扁平化的设计会是这个项目的主流，所以如果对扁平化设计不感冒的话，那么可以退散了。 27 | 28 | 第一个子项目是[知乎](www.zhihu.com) ，目前完成度已经接近 80% 了。UI 方面基本完成，交互上虽然还有很多想要优化的地方，但是绝大多数交互问题已经不是写个 CSS 就能解决得了的，于是暂时搁置。 29 | 30 | 第二个子项目暂定是哔哩哔哩，目前处于设（wā）计（kēng）阶段，竣工日期未知。 31 | 32 | ##### 如何使用 33 | 34 | 1. 确认自己用的是 Chrome 谷歌浏览器或 Firefox 火狐浏览器 35 | 2. Chrome 用户请下载并安装好 Stylish 这个扩展程序：[Stylish - Chrome Web Store](https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe/) 36 | 3. Firefox 用户请到这里安装： [Stylish for Firefox](https://addons.mozilla.org/en-US/firefox/addon/stylish/?src=external-userstyleshome/) 37 | 4. 打开这个页面[Flat_Zhihu ](https://userstyles.org/styles/108011/flat-zhihu-v2-1/)，一键安装 38 | 39 | 反馈和建议可通过知乎私信 @錦榮 或在专栏下评论：[【Plains;Gate.】Flat_Zhihu v2.1 - 知乎专栏](https://zhuanlan.zhihu.com/p/24231834) 40 | -------------------------------------------------------------------------------- /flat_zhihu.CSS: -------------------------------------------------------------------------------- 1 | @-moz-document url-prefix("http://www.zhihu.com/"), url-prefix("https://www.zhihu.com/") { 2 | /*===========================================*/ 3 | /*================== 全局 ====================*/ 4 | /*===========================================*/ 5 | 6 | @media only screen and (-webkit-min-device-pixel-ratio: 2), not all { 7 | i[class^=z-icon-], .modal-dialog-title-close, .goog-option-selected .goog-menuitem-checkbox, .zg-content-img-icon, .zg-content-video-icon, .tr-icon, .tr-inline-icon, .zg-icon, .icon-external, .ignore, .side-topic-item .up, .side-topic-item .delete, .zu-edit-button-icon, .zg-blue-edit, .zm-add-question-detail-icon, .zh-hovercard-arrow, .zu-top-live-icon, .zm-profile-details-items .zm-profile-tag-btn, .zm-item-top-btn, .zm-profile-icon, .zm-profile-header-icon, .zm-profile-empty-icon, .zu-global-notify-icon, .zu-global-notify-close, .zm-modal-dialog-guide-title-msg, .zm-modal-dialog-guide-title-dropdown, .zm-noti7-popup-tab-item .icon, .zu-noti7-popup .zu-top-live-icon, .icon-info, .icon-green-check, .icon-big-arrow-left, .icon-big-arrow-right, .icon-weibo, .icon-qzone, .icon-weibo-corner, .icon-big-white-sina, .icon-big-white-qq, .icon-big-white-mail, .icon-sign-arrow { 8 | background-image: url(https://ohupjrb3o.qnssl.com/sprites-1.1.2@2x.png); 9 | background-size: 308px 250px; 10 | } 11 | } 12 | 13 | html body, html input, html textarea, html select, html button { 14 | font-family: '.SFNSText-Regular', 'Helvetica Neue', Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; 15 | letter-spacing: 0.02em; 16 | text-rendering: optimizeLegibility; 17 | } 18 | 19 | a { 20 | color: #259; 21 | text-decoration: none!important; 22 | -webkit-transition: all .2s ease-in-out; 23 | -moz-transition: all .2s ease-in-out; 24 | -ms-transition: all .2s ease-in-out; 25 | -o-transition: all .2s ease-in-out; 26 | transition: all .2s ease-in-out; 27 | } 28 | 29 | i, em { 30 | font-style: normal!important; 31 | } 32 | 33 | strong, b { 34 | font-weight: 600; 35 | letter-spacing: 0.02em; 36 | font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; 37 | } 38 | 39 | h1, h2, h3, h4, h5 { 40 | font-weight: 600; 41 | letter-spacing: 0.02em; 42 | font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; 43 | } 44 | /*===========================================*/ 45 | /*================== 宽屏适配 ==================*/ 46 | /*===========================================*/ 47 | 48 | .zg-wrap { 49 | width: 1200px; 50 | } 51 | 52 | @media (max-width: 1024px) and (min-width: 360px) { 53 | .zu-main { 54 | padding: 70px 0 50px!important; 55 | } 56 | } 57 | 58 | .zu-main { 59 | padding: 25px 0 50px; 60 | } 61 | 62 | .zu-main-sidebar { 63 | margin: 0 0 0 -310px; 64 | width: 310px; 65 | } 66 | 67 | h1, h2, h3, h4, h5 { 68 | font-size: 15px; 69 | } 70 | 71 | body, input, textarea, select, button { 72 | font-size: 15px; 73 | line-height: 1.9; 74 | color: #444; 75 | } 76 | 77 | @media (max-width: 1400px) and (min-width: 961px) { 78 | .zg-wrap { 79 | width: 960px!important; 80 | } 81 | .zu-main.with-indention-votebar .zu-main-content-inner { 82 | margin-left: 48px!important; 83 | } 84 | .zu-main-sidebar { 85 | margin: 0 0 0 -270px!important; 86 | width: 270px!important; 87 | } 88 | body, input, textarea, select, button { 89 | font-size: 13px!important; 90 | } 91 | h1, h2, h3, h4, h5 { 92 | font-size: 14px!important; 93 | } 94 | } 95 | 96 | @media (max-width: 967px) { 97 | .zg-wrap { 98 | width: auto!important; 99 | } 100 | .zu-main.with-indention-votebar .zu-main-content-inner { 101 | margin-left: 48px!important; 102 | } 103 | .zu-main-sidebar { 104 | width: 210px!important; 105 | margin: 0 0 0 -230px; 106 | } 107 | .zu-top-search-form { 108 | width: 240px!important; 109 | } 110 | .zu-top-nav-link { 111 | width: auto!important; 112 | padding: 0 10px!important; 113 | } 114 | body, input, textarea, select, button { 115 | font-size: 14px!important; 116 | } 117 | h1, h2, h3, h4, h5 { 118 | font-size: 14px!important; 119 | } 120 | } 121 | 122 | .feed-item .content h2 { 123 | font-size: 16px 124 | } 125 | 126 | .feed-item .entry-body, .feed-item .zm-item-answer { 127 | margin-top: 5px; 128 | } 129 | 130 | .feed-main { 131 | margin: -5px 0 2px 48px; 132 | } 133 | 134 | .feed-item .author-info, .feed-item .author-info a { 135 | font-size: 14px; 136 | } 137 | 138 | .feed-item .zm-item-answer-author-info { 139 | font-size: 14px; 140 | font-weight: bold; 141 | } 142 | 143 | .zm-item-rich-text.js-collapse-body, .zm-item-answer-author-info, .zh-summary.summary.clearfix { 144 | line-height: 1.9; 145 | } 146 | 147 | #zh-question-title>.zm-item-title { 148 | font-size: 22px; 149 | } 150 | 151 | .zm-item-vote-info .text { 152 | font-size: 14px; 153 | } 154 | 155 | .zm-item-vote-info { 156 | margin: 5px 0; 157 | } 158 | 159 | .zm-meta-panel { 160 | padding: 3px 0; 161 | font-size: 14px; 162 | } 163 | 164 | .feed-item { 165 | padding: 21px 0 18px 0; 166 | } 167 | 168 | .zh-summary { 169 | padding-top: 3px; 170 | } 171 | 172 | @media (max-width: 1400px) and (min-width: 968px) { 173 | html body, html input, html textarea, html select, html button { 174 | font-size: 13px!important; 175 | line-height: 1.9em!important; 176 | } 177 | .feed-main { 178 | margin-top: -3px; 179 | } 180 | .feed-main { 181 | margin-bottom: 2px; 182 | } 183 | .feed-item .content h2 { 184 | font-size: 14px!important; 185 | } 186 | .feed-item .author-info, .feed-item .author-info a { 187 | font-size: 13px!important; 188 | } 189 | .feed-item .zm-item-vote-info, .feed-item .zm-item-answer-author-info { 190 | font-size: 13px!important; 191 | } 192 | .zm-item-rich-text.js-collapse-body, .zm-item-answer-author-info, .zh-summary.summary.clearfix { 193 | font-size: 13px!important; 194 | line-height: 1.9!important; 195 | } 196 | .feed-item .entry-body, .feed-item .zm-item-answer { 197 | margin-top: 2px!important; 198 | } 199 | #zh-question-title>.zm-item-title { 200 | font-size: 18px!important; 201 | } 202 | .zm-item-vote-info .text { 203 | font-size: 12px!important; 204 | } 205 | .zm-item-vote-info { 206 | margin: 7px 0!important; 207 | } 208 | .zm-meta-panel { 209 | padding: 3px 0!important; 210 | font-size: 13px!important; 211 | } 212 | .feed-item { 213 | padding: 18px 0 13px 0; 214 | } 215 | .zh-summary { 216 | padding-top: 0px; 217 | } 218 | } 219 | 220 | address, blockquote, sup { 221 | line-height: 1.8em; 222 | } 223 | 224 | @media (max-width: 1400px) and (min-width: 968px) { 225 | address, blockquote, sup { 226 | line-height: 1.9em!important; 227 | } 228 | } 229 | 230 | .feed-source, .feed-source a { 231 | font-size: 14px; 232 | } 233 | 234 | @media (max-width: 1400px) and (min-width: 968px) { 235 | .feed-source, .feed-source a { 236 | font-size: 13px!important; 237 | } 238 | } 239 | 240 | .zu-main-content-inner { 241 | position: relative; 242 | margin: 0 388px 0 0!important; 243 | } 244 | 245 | @media (max-width: 1400px) and (min-width: 968px) { 246 | .zu-main-content-inner { 247 | position: relative; 248 | margin: 0 328px 0 0!important; 249 | } 250 | } 251 | 252 | @media (max-width: 967px) { 253 | .zu-main-content-inner { 254 | position: relative; 255 | margin: 0 280px 0 30px!important; 256 | } 257 | } 258 | 259 | .zm-side-nav-link { 260 | height: 34px; 261 | } 262 | 263 | @media (max-width: 1400px) and (min-width: 968px) { 264 | .zm-side-nav-link { 265 | height: 31px!important; 266 | } 267 | } 268 | 269 | .zm-profile-header-main .top { 270 | margin-left: 185px; 271 | } 272 | 273 | @media (max-width: 1400px) and (min-width: 968px) { 274 | .zm-profile-header-main .top { 275 | margin-left: 162px!important; 276 | } 277 | } 278 | 279 | .zm-item-answer-author-wrap { 280 | font-size: 14px; 281 | } 282 | 283 | @media (max-width: 1400px) and (min-width: 968px) { 284 | .zm-item-answer-author-wrap { 285 | font-size: 13px!important; 286 | } 287 | } 288 | 289 | .zu-top-search { 290 | margin: 7px 0 0 34px; 291 | } 292 | 293 | @media (max-width: 1400px) and (min-width: 968px) { 294 | .zu-top-search { 295 | margin: 7px 0 0 12px!important; 296 | } 297 | } 298 | 299 | .zu-top-search-form { 300 | width: 400px; 301 | } 302 | 303 | @media (max-width: 1400px) and (min-width: 968px) { 304 | .zu-top-search-form { 305 | width: 367px!important; 306 | } 307 | } 308 | 309 | .zu-top-nav-ul { 310 | margin: 0 0 0 40px; 311 | } 312 | 313 | @media (max-width: 1400px) and (min-width: 968px) { 314 | .zu-top-nav-ul { 315 | margin: 0 0 0 18px!important; 316 | } 317 | } 318 | 319 | .zu-top-nav-link { 320 | width: 60px; 321 | height: 46px; 322 | font-size: 15px; 323 | } 324 | 325 | @media (max-width: 1400px) and (min-width: 968px) { 326 | .zu-top-nav-link { 327 | width: 54px!important; 328 | font-size: 14px!important; 329 | } 330 | } 331 | 332 | .zu-noti7-popup.zu-top-nav-live { 333 | left: 136px; 334 | top: 50px; 335 | font-size: 13px; 336 | } 337 | 338 | .zu-top-nav-count { 339 | left: 45px; 340 | } 341 | 342 | @media (max-width: 1400px) and (min-width: 968px) { 343 | .zu-noti7-popup.zu-top-nav-live { 344 | left: 51px!important; 345 | } 346 | .zu-top-nav-count { 347 | left: 31px!important; 348 | } 349 | } 350 | 351 | .feed-item .time { 352 | font-size: 13px; 353 | margin-top: -6px; 354 | } 355 | 356 | .editable { 357 | font-size: 14px; 358 | } 359 | 360 | @media (max-width: 1400px) and (min-width: 968px) { 361 | .editable { 362 | font-size: 13px!important; 363 | } 364 | } 365 | 366 | @media (max-width: 1400px) and (min-width: 968px) { 367 | .feed-item .time { 368 | font-size: 13px!important; 369 | margin-top: -4px!important; 370 | } 371 | } 372 | 373 | .comment-app-holder, .zm-comment-box { 374 | max-width: 764px; 375 | } 376 | 377 | @media (max-width: 1400px) and (min-width: 968px) { 378 | .comment-app-holder, .zm-comment-box { 379 | max-width: 540px!important; 380 | } 381 | } 382 | 383 | .feed-item .author-info, .feed-item .author-info a { 384 | margin-bottom: 5px!important; 385 | color: #444!important; 386 | } 387 | 388 | @media (max-width: 1400px) and (min-width: 968px) { 389 | .feed-item .author-info, .feed-item .author-info a { 390 | margin-bottom: 6px; 391 | } 392 | } 393 | 394 | .feed-item .zm-item-vote-info, .feed-item .zm-item-answer-author-info { 395 | margin: 2px 0 5px 0; 396 | } 397 | 398 | @media (max-width: 1400px) and (min-width: 968px) { 399 | .feed-item .zm-item-vote-info, .feed-item .zm-item-answer-author-info { 400 | margin: 2px 0 6px 0!important; 401 | } 402 | } 403 | 404 | .zu-top-add-question { 405 | margin: 7px 10px 0 0; 406 | } 407 | 408 | @media (max-width: 1400px) and (min-width: 968px) { 409 | .zu-top-add-question { 410 | margin: 7px 0 0 0!important; 411 | } 412 | } 413 | 414 | .zh-backtotop { 415 | margin-left: 300px; 416 | } 417 | 418 | @media (max-width: 1400px) and (min-width: 968px) { 419 | .zh-backtotop { 420 | margin-left: 230px!important; 421 | } 422 | } 423 | 424 | .feed-item .source { 425 | font-size: 13px; 426 | } 427 | 428 | @media (max-width: 1400px) and (min-width: 968px) { 429 | .zm-side-my-columns .column-link { 430 | padding-bottom: 4px!important; 431 | } 432 | } 433 | 434 | .zm-side-my-columns .column-link { 435 | line-height: 32px; 436 | padding-bottom: 2px; 437 | } 438 | 439 | .profile-navbar .item { 440 | padding: 12px 30px; 441 | font-size: 15px; 442 | line-height: 30px; 443 | } 444 | 445 | @media (max-width: 1400px) and (min-width: 968px) { 446 | .profile-navbar .item { 447 | padding: 12px 20px!important; 448 | font-size: 14px; 449 | line-height: 22px; 450 | } 451 | } 452 | 453 | #zu-distraction-free-editor .title, #zu-distraction-free-editor .wrapper, #zu-distraction-free-editor .toolbar, #zu-distraction-free-editor .content { 454 | width: 1200px; 455 | } 456 | 457 | #zu-distraction-free-editor .goog-scrollfloater { 458 | width: 1200px; 459 | } 460 | 461 | @media (max-width: 1400px) and (min-width: 968px) { 462 | #zu-distraction-free-editor .title, #zu-distraction-free-editor .wrapper, #zu-distraction-free-editor .toolbar, #zu-distraction-free-editor .content { 463 | width: 800px!important; 464 | } 465 | } 466 | 467 | @media (max-width: 1400px) and (min-width: 968px) { 468 | #zu-distraction-free-editor .goog-scrollfloater { 469 | width: 800px!important; 470 | } 471 | } 472 | 473 | .zh-profile-card { 474 | width: 400px; 475 | } 476 | 477 | .zh-profile-card .upper span.name { 478 | font-size: 16px; 479 | } 480 | 481 | .zh-profile-card .upper div.tagline { 482 | font-size: 14px; 483 | } 484 | 485 | @media (max-width: 1400px) and (min-width: 968px) { 486 | .zh-profile-card { 487 | width: 380px!important; 488 | } 489 | .zh-profile-card .upper span.name { 490 | font-size: 13px!important; 491 | } 492 | .zh-profile-card .upper div.tagline { 493 | font-size: 13px!important; 494 | } 495 | } 496 | 497 | .zu-top-nav-li { 498 | padding: 0 6px; 499 | } 500 | 501 | @media (max-width: 1400px) and (min-width: 968px) { 502 | .zu-top-nav-li { 503 | padding: 0!important; 504 | } 505 | } 506 | 507 | .zm-profile-section-main.zm-profile-section-activity-main .question_link, .zm-profile-section-main.zm-profile-section-activity-main .post-link, h2.zm-profile-question { 508 | font-size: 15px; 509 | } 510 | 511 | .skilled-topics .item .content .content-inner a, .skilled-topics .item .content .content-inner p, .zg-gray { 512 | font-size: 14px; 513 | } 514 | 515 | .zm-profile-vote-count { 516 | height: 42px; 517 | } 518 | 519 | .zm-profile-vote-num { 520 | padding: 4px 0 4px; 521 | } 522 | 523 | .HomeEntry-box { 524 | margin-left: 0px; 525 | border: 0px solid #f0f0f0; 526 | background: #f9f9f9; 527 | } 528 | 529 | @media (max-width: 1400px) and (min-width: 968px) { 530 | .zm-profile-section-main.zm-profile-section-activity-main .question_link, .zm-profile-section-main.zm-profile-section-activity-main .post-link, h2.zm-profile-question { 531 | font-size: 14px!important; 532 | } 533 | .skilled-topics .item .content .content-inner a, .skilled-topics .item .content .content-inner p, .zg-gray { 534 | font-size: 13px!important; 535 | } 536 | .zm-profile-vote-count { 537 | height: 38px!important; 538 | } 539 | .zm-profile-vote-num { 540 | padding: 2px 0 4px!important; 541 | } 542 | } 543 | 544 | .zm-editable-editor-field-wrap { 545 | padding: 10px 24px; 546 | } 547 | 548 | @media (max-width: 1400px) and (min-width: 968px) { 549 | .zm-editable-editor-field-wrap { 550 | padding: 8px 10px!important; 551 | } 552 | } 553 | 554 | .zm-item-rich-text li, .zm-editable-content li, .editable li { 555 | margin: 8px 5px 5px 30px; 556 | } 557 | 558 | @media (max-width: 1400px) and (min-width: 968px) { 559 | .zm-item-rich-text li, .zm-editable-content li, .editable li { 560 | margin: 8px 5px 5px 30px!important; 561 | } 562 | } 563 | 564 | blockquote { 565 | padding: 0 0 0 16px; 566 | } 567 | 568 | .Avatar--l { 569 | width: 150px; 570 | height: 150px; 571 | border: none; 572 | border-radius: 10px; 573 | position: absolute; 574 | } 575 | 576 | .zm-profile-header-main .top .bio { 577 | font-size: 15px; 578 | } 579 | 580 | @media (max-width: 1400px) and (min-width: 968px) { 581 | .Avatar--l { 582 | width: 136px!important; 583 | height: 136px!important; 584 | } 585 | .ProfileAvatarEditor { 586 | width: 136px!important; 587 | height: 136px!important; 588 | } 589 | .zm-profile-header-info { 590 | margin-left: 120px!important; 591 | padding-top: 0px; 592 | } 593 | .zm-profile-header-description.editable-group { 594 | margin: 10px -18px 0px -122px!important; 595 | } 596 | .zm-profile-header .items { 597 | margin-left: 40px!important; 598 | } 599 | .title-section.ellipsis { 600 | margin-left: 46px!important; 601 | } 602 | .zm-profile-header-main .top .bio { 603 | font-size: 13px; 604 | } 605 | .zm-profile-side-columns .link, .zm-profile-side-topics .link, .zm-profile-side-columns .Avatar, .zm-profile-side-topics .Avatar { 606 | height: 34px!important; 607 | width: 34px!important; 608 | } 609 | } 610 | 611 | .zm-profile-header-main { 612 | padding: 12px 18px 0px 18px; 613 | } 614 | 615 | .zm-profile-header-description.editable-group { 616 | border-top: none; 617 | margin: 18px -18px 0px -132px; 618 | color: #444; 619 | } 620 | 621 | .zm-profile-header-description { 622 | padding: 0 0 6px 0; 623 | } 624 | 625 | .zm-profile-header .zm-profile-header-user-describe .item+.item { 626 | margin-top: 5px; 627 | } 628 | 629 | .zm-profile-header-marked { 630 | padding: 6px 18px 14px 18px; 631 | border-top: none; 632 | } 633 | 634 | .ProfileAvatarEditor { 635 | width: 150px; 636 | height: 150px; 637 | box-shadow: none; 638 | border-radius: 10px; 639 | } 640 | 641 | .zm-profile-header .items { 642 | margin-left: 50px; 643 | min-height: 78px; 644 | color: #444; 645 | } 646 | 647 | .title-section.ellipsis { 648 | margin-left: 65px; 649 | max-width: 380px; 650 | color: #666; 651 | font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; 652 | } 653 | 654 | .zm-profile-header-info { 655 | margin-left: 132px; 656 | padding-top: 5px; 657 | } 658 | 659 | .zg-link-litblue { 660 | font-size: inherit; 661 | } 662 | 663 | #zh-fav-list-side-related .zm-item-title { 664 | font-size: inherit; 665 | } 666 | /*===========================================*/ 667 | /*================== 首页动态 ==================*/ 668 | /*===========================================*/ 669 | 670 | .feed-item-l { 671 | display: none; 672 | } 673 | 674 | .feed-item-p { 675 | display: none; 676 | } 677 | 678 | .HomeEntry-boxArrow { 679 | display: none; 680 | } 681 | 682 | .HomeEntry-avatar { 683 | display: none; 684 | } 685 | 686 | .feed-item { 687 | padding: 18px 0 13px 0; 688 | } 689 | 690 | #zh-home-list-title { 691 | color: #999; 692 | } 693 | 694 | .zm-noti-cleaner-setting { 695 | opacity: 0; 696 | position: relative; 697 | top: 2px; 698 | transition: none; 699 | } 700 | 701 | .zg-section:hover .zm-noti-cleaner-setting { 702 | opacity: 1; 703 | } 704 | 705 | .zu-main-feed-con { 706 | border-top: 1px solid #ddd; 707 | border-bottom: 1px solid #ddd; 708 | } 709 | 710 | a.zu-main-feed-fresh-button { 711 | border: 1px solid #f9f9f9; 712 | background-color: #f9f9f9; 713 | text-shadow: none; 714 | transition: all 0.2s ease-in-out; 715 | color: #999; 716 | } 717 | 718 | .zm-editable-content .answer-date-link-wrap { 719 | margin-top: 5px; 720 | } 721 | 722 | a.zu-main-feed-fresh-button:hover, a.zu-main-feed-fresh-button:active { 723 | background: #E4EAFF; 724 | border: 1px solid #E4EAFF; 725 | color: #698ebf; 726 | } 727 | 728 | .zg-btn-white.zu-button-more:hover { 729 | background-color: #E4EAFF; 730 | color: #698ebf!important; 731 | } 732 | 733 | .zg-btn-white.zu-button-more { 734 | background-color: #F9F9F9; 735 | transition: all 0.2s ease-in-out; 736 | } 737 | 738 | .zg-btn-white.zu-button-more:active { 739 | background: #daedf5; 740 | } 741 | 742 | ._CommentBox_root_G_1m._CommentBox_bordered_3Fo- { 743 | box-shadow: none; 744 | border: none; 745 | border-top: 1px solid #ddd; 746 | border-radius: 0px; 747 | } 748 | 749 | .zm-comment-box { 750 | box-shadow: none; 751 | border: none; 752 | border-top: 1px solid #ddd; 753 | border-radius: 0px; 754 | } 755 | 756 | .zm-item-comment+.zm-item-comment { 757 | border-top: dotted 1px #ddd; 758 | } 759 | 760 | .zm-item-comment .zm-comment-hd, .zm-item-comment .zm-comment-ft { 761 | margin: 4px 0 4px 0; 762 | } 763 | 764 | .zm-item-comment { 765 | border-bottom: dotted 1px #ddd; 766 | } 767 | 768 | .zm-item-comment+.zm-item-comment { 769 | border-bottom: dotted 1px #ddd; 770 | border-top: solid 0px #eee; 771 | } 772 | 773 | ._CommentForm_bordered_2isg { 774 | background: none; 775 | border-radius: 0px; 776 | border-top: 0px dotted #ddd; 777 | border-bottom: 1px solid #ddd; 778 | } 779 | 780 | ._CommentBox_pagerBorder_yuO1 { 781 | border-top: 1px solid #eee; 782 | margin: 0 1em 0 1em; 783 | border-bottom: 1px solid #eee; 784 | } 785 | 786 | .zm-comment-box.empty.cannot-comment .zm-comment-box-ft, .zm-comment-box .zm-comment-box-ft { 787 | background: none; 788 | border-radius: 0px; 789 | border-top: 0px dotted #ddd; 790 | border-bottom: 1px solid #ddd; 791 | } 792 | 793 | ._InputBox_root_1Xwi { 794 | border: 1px solid #ddddFF; 795 | border-radius: 3px; 796 | box-shadow: none; 797 | color: #333; 798 | line-height: 1.8; 799 | background-color: #F9F9FF; 800 | transition: all .2s ease-in-out; 801 | } 802 | 803 | ._InputBox_root_1Xwi:focus { 804 | border: 1px solid #ddddFF; 805 | background-color: #FCFCFF; 806 | } 807 | 808 | .zm-comment-form .zm-comment-textarea, .zm-comment-form .zm-comment-editable { 809 | border: 1px solid #ddddFF; 810 | border-radius: 3px; 811 | box-shadow: none; 812 | background-color: #F9F9FF; 813 | transition: all .2s ease-in-out; 814 | } 815 | 816 | .zm-comment-form .zm-comment-textarea, .zm-comment-form .zm-comment-editable:focus { 817 | border: 1px solid #ddddFF; 818 | background-color: #FCFCFF; 819 | } 820 | 821 | .modal-dialog-buttons button[name=cancel] { 822 | color: #999; 823 | background: transparent; 824 | cursor: none; 825 | } 826 | 827 | html.no-touch .modal-dialog-buttons button[name=cancel]:hover { 828 | text-decoration: none; 829 | } 830 | 831 | .goog-buttonset-default { 832 | background-color: #2c93ee; 833 | background-image: none; 834 | text-shadow: none; 835 | border: 0px; 836 | color: #fff!important; 837 | box-shadow: none; 838 | border-radius: 3px; 839 | } 840 | 841 | .goog-buttonset-default:hover { 842 | background: #35A0FF; 843 | background-color: #35A0FF; 844 | background-image: none; 845 | box-shadow: none; 846 | } 847 | 848 | .goog-buttonset-default:active { 849 | background: #35A0FF; 850 | background-color: #35A0FF; 851 | background-image: none; 852 | box-shadow: none; 853 | } 854 | 855 | .zg-btn-blue { 856 | background-color: #2c93ee; 857 | background-image: none; 858 | text-shadow: none; 859 | border: 0px; 860 | color: #fff!important; 861 | box-shadow: none; 862 | border-radius: 3px; 863 | } 864 | 865 | .zg-btn-blue:hover { 866 | background: #35A0FF; 867 | background-color: #35A0FF; 868 | background-image: none; 869 | box-shadow: none; 870 | } 871 | 872 | .zg-btn-blue:active { 873 | background: #35A0FF; 874 | background-color: #35A0FF; 875 | background-image: none; 876 | box-shadow: none; 877 | } 878 | 879 | .zm-command-cancel { 880 | font-size: 13px; 881 | margin: 0px; 882 | border: 0px solid #6EBBFF; 883 | padding: 8px 11px 6px 11px; 884 | border-radius: 3px 0px 0px 3px; 885 | line-height: 1.7; 886 | color: #999 887 | } 888 | 889 | .zm-command-cancel:hover { 890 | text-decoration: none; 891 | } 892 | 893 | .feed-item .ignore:hover { 894 | background-position: -261px -62px; 895 | } 896 | 897 | .zm-comment-box .load-more { 898 | border: 0px; 899 | border-bottom: 1px dotted #ddd; 900 | color: #999; 901 | box-shadow: none; 902 | text-shadow: none; 903 | margin: 0 12px; 904 | } 905 | 906 | .zm-comment-box .load-more { 907 | border: 0px; 908 | border-bottom: 1px dotted #ddd; 909 | color: #999; 910 | box-shadow: none; 911 | text-shadow: none; 912 | margin: 0 12px; 913 | } 914 | 915 | html.no-touch .zm-comment-box .load-more:hover { 916 | background: #fcfcfc; 917 | text-decoration: none; 918 | } 919 | 920 | .feed-item .time { 921 | opacity: 0; 922 | margin-top: -2px; 923 | transition: .1s; 924 | } 925 | 926 | .feed-item:hover .time { 927 | opacity: 1; 928 | } 929 | 930 | .feed-item .avatar img { 931 | opacity: 0.5; 932 | border-radius: 3px; 933 | transition: .1s; 934 | } 935 | 936 | .feed-item:hover .avatar img { 937 | opacity: 1; 938 | } 939 | 940 | .zm-item-vote-count { 941 | opacity: 0.65; 942 | line-height: inherit; 943 | } 944 | 945 | .feed-item:hover .zm-item-vote-count { 946 | opacity: 1; 947 | transition: .1s; 948 | } 949 | 950 | .feed-item .ignore { 951 | visibility: visible!important; 952 | opacity: 0; 953 | right: -4px; 954 | } 955 | 956 | .feed-item:hover .ignore { 957 | opacity: 1; 958 | } 959 | 960 | .zu-autohide { 961 | transition: .1s; 962 | } 963 | 964 | .feed-item.combine.first-combine .content, .feed-item.combine.first-combine .entry-body { 965 | margin-top: 0px; 966 | } 967 | 968 | .zh-summary .inline-img { 969 | display: none; 970 | } 971 | 972 | .zh-summary { 973 | min-height: 26px; 974 | } 975 | 976 | .video-box.thumbonly { 977 | display: none; 978 | } 979 | 980 | .video-box-thumbnail { 981 | display: none; 982 | } 983 | 984 | .video-box-thumbnail .thumbnail { 985 | display: none; 986 | } 987 | 988 | a.toggle-expand { 989 | transition: .1s; 990 | } 991 | 992 | .zm-noti7-frame-border.top::after { 993 | box-shadow: none; 994 | } 995 | 996 | .zm-noti7-frame-border.bottom::after { 997 | box-shadow: none; 998 | } 999 | 1000 | .zm-comment-box .load-more+.zm-item-comment { 1001 | border-top: 0px solid #eee; 1002 | } 1003 | 1004 | .toggle-expand.btn-toggle-question-detail { 1005 | left: 0; 1006 | } 1007 | 1008 | .feed-item .roundtable .left img, .feed-item .column .left img { 1009 | display: none; 1010 | } 1011 | 1012 | .feed-item .roundtable .content, .feed-item .column .content { 1013 | padding: 0 0 10px; 1014 | color: #333; 1015 | } 1016 | 1017 | .feed-item .roundtable .info, .feed-item .column .info { 1018 | padding: 10px 0 0; 1019 | } 1020 | 1021 | .feed-item .avatar { 1022 | margin: 3px 0 0; 1023 | } 1024 | 1025 | .source .zg-bull { 1026 | display: none; 1027 | font-size: 14px; 1028 | } 1029 | 1030 | .feed-item:hover .source .zg-bull { 1031 | display: inline!important; 1032 | } 1033 | 1034 | .zm-meta-panel>a, .zm-meta-panel>span { 1035 | color: #999; 1036 | } 1037 | 1038 | .zg-bull { 1039 | margin-bottom: -1px; 1040 | } 1041 | 1042 | html.no-touch .meta-item:hover .goog-menu-button-caption { 1043 | text-decoration: none!important; 1044 | } 1045 | 1046 | img.avatar.avatar-xs { 1047 | max-width: none; 1048 | } 1049 | 1050 | .zm-item-rich-text li, .zm-editable-content li, .editable li { 1051 | list-style-position: inherit; 1052 | } 1053 | 1054 | #zu-distraction-free-editor .editable { 1055 | font: 16px/2 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, 'Hiragino Sans GB', sans-serif!important; 1056 | } 1057 | 1058 | span.bio { 1059 | font-weight: normal; 1060 | } 1061 | 1062 | .SidebarListNav-hint { 1063 | display: none; 1064 | } 1065 | 1066 | .zm-form-table-medium>.zm-form-table-head { 1067 | width: auto; 1068 | } 1069 | /* 首页 feed 底部操作 1070 | .zm-meta-panel .zg-bull { 1071 | display: none; 1072 | } 1073 | 1074 | .feed-item:hover .zm-meta-panel .zg-bull{ 1075 | display: inline!important; 1076 | } 1077 | 1078 | .meta-item.copyright { 1079 | display: none; 1080 | } 1081 | 1082 | .feed-item:hover .meta-item.copyright{ 1083 | display: inline!important; 1084 | } 1085 | */ 1086 | /*===========================================*/ 1087 | /*================== 侧边栏 ====================*/ 1088 | /*===========================================*/ 1089 | 1090 | .zm-side-nav-link { 1091 | margin-bottom: 3px; 1092 | display: block; 1093 | line-height: 31px; 1094 | color: #666; 1095 | border-radius: 3px; 1096 | background-color: transparent; 1097 | } 1098 | 1099 | .zm-side-nav-link.active, html.no-touchevents .zm-side-nav-link:hover { 1100 | color: #259; 1101 | border-left: 3px solid #ddddff; 1102 | margin-left: 10px; 1103 | background-color: #E4EAFF; 1104 | border-radius: 3px; 1105 | text-decoration: none; 1106 | } 1107 | 1108 | .SidebarListNav-itemLink { 1109 | margin-bottom: 3px; 1110 | display: block; 1111 | color: #666; 1112 | border-radius: 3px; 1113 | background-color: transparent; 1114 | } 1115 | 1116 | .SidebarListNav-itemLink:active, html.no-touchevents .SidebarListNav-listItem .follow-link:hover+.SidebarListNav-itemLink, html.no-touchevents .SidebarListNav-itemLink:hover { 1117 | color: #259; 1118 | border-left: 3px solid #ddddff; 1119 | margin-left: 10px; 1120 | background-color: #E4EAFF; 1121 | border-radius: 3px; 1122 | text-decoration: none; 1123 | } 1124 | 1125 | .SidebarListNav-sideLink { 1126 | opacity: 0; 1127 | } 1128 | 1129 | .SidebarListNav:hover .SidebarListNav-sideLink { 1130 | opacity: 1; 1131 | } 1132 | 1133 | .zu-main-sidebar h3, .zm-side-section h3, .zu-main-sidebar h2, .zm-side-section h2 { 1134 | color: #999; 1135 | } 1136 | 1137 | .zm-side-section:hover a.zg-link-litblue { 1138 | visibility: visible; 1139 | } 1140 | 1141 | a.zg-link-litblue.zg-right { 1142 | visibility: hidden; 1143 | } 1144 | 1145 | .zm-side-section+.zm-side-section>.zm-side-section-inner { 1146 | padding: 0px; 1147 | border-top: 0px solid #eee; 1148 | } 1149 | 1150 | .zm-side-nav-group+.zm-side-nav-group { 1151 | border-top: 1px solid #ddd; 1152 | padding-top: 15px; 1153 | } 1154 | 1155 | .zm-side-nav-group { 1156 | margin-bottom: 15px; 1157 | } 1158 | 1159 | .zm-side-list-content { 1160 | border-top: 1px solid #ddd; 1161 | } 1162 | 1163 | a.shameimaru-link { 1164 | opacity: 0.6; 1165 | } 1166 | 1167 | a.shameimaru-link:hover { 1168 | opacity: 1; 1169 | } 1170 | /*===========================================*/ 1171 | /*=================== 顶部栏 ===================*/ 1172 | /*===========================================*/ 1173 | 1174 | .zu-top { 1175 | position: fixed; 1176 | background: #137ad5; 1177 | background-color: #137ad5; 1178 | background-image: none; 1179 | border-bottom: none; 1180 | box-shadow: none; 1181 | height: 46px; 1182 | } 1183 | /*===========================================*/ 1184 | /*=================== 搜索框 ===================*/ 1185 | /*===========================================*/ 1186 | 1187 | .zu-top-search-form .zu-top-search-button { 1188 | width: 40px; 1189 | height: 31px; 1190 | background: #2C93EE; 1191 | background-color: #2C93EE; 1192 | background-image: none; 1193 | border: 1px solid #2C93EE; 1194 | box-shadow: none; 1195 | border-top-right-radius: 3px; 1196 | border-bottom-right-radius: 3px; 1197 | transition: all .1s; 1198 | } 1199 | 1200 | .zu-top-search-button:hover { 1201 | background-color: #35A0FF; 1202 | border: 1px solid #35A0FF; 1203 | } 1204 | 1205 | .hide-text { 1206 | display: none; 1207 | } 1208 | 1209 | .zu-top-search-input { 1210 | height: 31px; 1211 | padding: 0px 50px 0px 10px; 1212 | border: none; 1213 | box-shadow: none; 1214 | background-color: #F1F1FF; 1215 | line-height: 17px!important; 1216 | color: #999; 1217 | border-radius: 3px 4px 4px 3px; 1218 | font-size: 13px; 1219 | } 1220 | 1221 | .zu-top-search-input:focus { 1222 | background-color: #FFF; 1223 | box-shadow: none; 1224 | border: none; 1225 | } 1226 | 1227 | .zu-top-add-question { 1228 | background-color: #2c93ee; 1229 | background-image: none; 1230 | border: none; 1231 | height: 31px; 1232 | box-shadow: none; 1233 | text-shadow: none; 1234 | border-radius: 3px; 1235 | display: none; 1236 | } 1237 | 1238 | .zu-top-add-question:hover { 1239 | background-color: #35A0FF; 1240 | border: none; 1241 | box-shadow: none; 1242 | } 1243 | 1244 | .zu-top-add-question:active { 1245 | background-color: #35A0FF; 1246 | background: #35A0FF; 1247 | border: 0px solid #0659ac; 1248 | box-shadow: none; 1249 | } 1250 | 1251 | .ac-renderer { 1252 | left: 0px; 1253 | -moz-box-shadow: 0 0px 2px rgba(0, 0, 0, .3); 1254 | box-shadow: 0 0px 2px rgba(0, 0, 0, .3); 1255 | } 1256 | /*===========================================*/ 1257 | /*================== 导航菜单 ==================*/ 1258 | /*===========================================*/ 1259 | 1260 | .zu-top-link-logo { 1261 | background-position: 0 8px; 1262 | } 1263 | 1264 | .top-nav-dropdown { 1265 | display: block; 1266 | top: -175px!important; 1267 | transition: all 0.2s; 1268 | z-index: -1; 1269 | } 1270 | 1271 | .open .top-nav-dropdown, html.no-touchevents .top-nav-profile:hover .top-nav-dropdown { 1272 | top: 46px!important; 1273 | } 1274 | 1275 | .zu-top-nav-userinfo.selected, html.no-touchevents .top-nav-profile:hover .zu-top-nav-userinfo { 1276 | height: 46px!important; 1277 | background-image: -webkit-linear-gradient(top, #137AD5, #1069bd)!important; 1278 | background-image: -moz-linear-gradient(top, #137AD5, #1069bd)!important; 1279 | box-shadow: none; 1280 | } 1281 | 1282 | html.no-touchevents .top-nav-dropdown a:hover { 1283 | background-color: #1376DA; 1284 | } 1285 | 1286 | .top-nav-dropdown .zg-icon { 1287 | margin: 0 8px 0 20px; 1288 | } 1289 | 1290 | .zu-top-nav-link:hover { 1291 | color: #FFF!important; 1292 | } 1293 | 1294 | .zu-top-nav-link, .zu-top-nav-link:visited, .zu-top-nav-link:active { 1295 | color: #ddd; 1296 | } 1297 | 1298 | .zu-top-nav-li.current { 1299 | background-image: -webkit-linear-gradient(top, #137AD5, #1069bd); 1300 | background-image: -moz-linear-gradient(top, #137AD5, #1069bd); 1301 | box-shadow: none; 1302 | } 1303 | 1304 | .zu-top-nav-userinfo .zu-top-nav-pm-count { 1305 | left: 34px; 1306 | } 1307 | 1308 | .top-nav-profile:hover .zu-top-nav-userinfo { 1309 | background-image: -webkit-linear-gradient(top, #137AD5, #1069bd)!important; 1310 | background-image: -moz-linear-gradient(top, #137AD5, #1069bd)!important; 1311 | } 1312 | 1313 | .zu-top-nav-userinfo.selected, html.no-touch .top-nav-profile:hover .zu-top-nav-userinfo { 1314 | height: 46px!important; 1315 | background-image: -webkit-linear-gradient(top, #137AD5, #1069bd)!important; 1316 | background-image: -moz-linear-gradient(top, #137AD5, #1069bd)!important; 1317 | box-shadow: none; 1318 | } 1319 | 1320 | .zg-noti-number { 1321 | background: #CA3939; 1322 | border: 1px solid #fff; 1323 | box-shadow: none; 1324 | font-weight: 400; 1325 | } 1326 | 1327 | .top-nav-dropdown li a { 1328 | border-top: none; 1329 | box-shadow: none; 1330 | height: 44px; 1331 | line-height: 44px; 1332 | } 1333 | 1334 | .top-nav-profile { 1335 | min-width: 130px; 1336 | } 1337 | 1338 | .top-nav-profile a { 1339 | background-color: #1069bd; 1340 | width: 130px; 1341 | text-shadow: none; 1342 | } 1343 | 1344 | .top-nav-profile .top-nav-dropdown a { 1345 | width: 130px; 1346 | transition: all .1s ease-in-out; 1347 | } 1348 | 1349 | .zu-top-nav-userinfo .avatar { 1350 | left: 18px; 1351 | border: none; 1352 | box-shadow: none; 1353 | border-radius: 2px; 1354 | background-size: 25px 25px; 1355 | position: absolute; 1356 | z-index: 3; 1357 | } 1358 | 1359 | .top-nav-profile .zu-top-nav-userinfo { 1360 | text-indent: 52px; 1361 | transition: none; 1362 | background: #137AD5; 1363 | } 1364 | 1365 | .zu-top-nav-userinfo .Avatar { 1366 | left: 15px; 1367 | } 1368 | 1369 | html.no-touch .top-nav-dropdown a:hover { 1370 | width: 130px; 1371 | background-color: #1b78d0; 1372 | background-image: none; 1373 | transition: all .1s; 1374 | } 1375 | /*===========================================*/ 1376 | /*================== 个人页面 ==================*/ 1377 | /*===========================================*/ 1378 | 1379 | html.no-touch .zg-follow:hover { 1380 | color: #698ebf; 1381 | } 1382 | 1383 | .zm-profile-header { 1384 | border: none; 1385 | box-shadow: none; 1386 | border-radius: 0 0 0 0; 1387 | color: #999; 1388 | } 1389 | 1390 | .zm-profile-side-columns .link, .zm-profile-side-topics .link, .zm-profile-side-columns .Avatar, .zm-profile-side-topics .Avatar { 1391 | position: inherit; 1392 | } 1393 | 1394 | .zm-profile-header-avatar-container .zm-entry-head-avatar-edit-button { 1395 | background: rgba(0, 0, 0, 0.4); 1396 | } 1397 | 1398 | .zm-entry-head-avatar-edit-button { 1399 | width: 118px; 1400 | border-radius: 0 0 7px 7px; 1401 | } 1402 | 1403 | .zm-profile-header .zm-profile-header-user-describe .item .topic-link { 1404 | color: #444; 1405 | } 1406 | 1407 | .zm-profile-header-avatar-container { 1408 | float: left; 1409 | top: -34px; 1410 | box-shadow: none; 1411 | border-radius: 0px; 1412 | width: 118px; 1413 | height: 118px; 1414 | } 1415 | 1416 | .zm-profile-header .zm-profile-header-user-detail { 1417 | display: none; 1418 | } 1419 | 1420 | h3.ellipsis { 1421 | left: 0px; 1422 | } 1423 | 1424 | i.icon.icon-profile-location { 1425 | margin-left: 1px; 1426 | margin-right: 5px!important; 1427 | } 1428 | 1429 | i.icon.icon-profile-education { 1430 | margin-bottom: 3px; 1431 | } 1432 | 1433 | .zm-profile-header-main .name { 1434 | font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; 1435 | font-weight: 600; 1436 | color: #444; 1437 | } 1438 | 1439 | .zm-profile-header-operation { 1440 | padding: 0 18px; 1441 | margin: 0 0 16px 0; 1442 | border-top: none; 1443 | } 1444 | 1445 | #zh-question-side-header-wrap .follow-button { 1446 | min-width: 78px; 1447 | } 1448 | 1449 | .zg-btn-green, .zg-btn-follow { 1450 | background-color: #E4EAFF; 1451 | background-image: none; 1452 | text-shadow: none; 1453 | border: none; 1454 | color: #698ebf!important; 1455 | box-shadow: none; 1456 | } 1457 | 1458 | .zg-btn-green:active { 1459 | background: #E4EAFF; 1460 | color: #698ebf; 1461 | background-color: #E4EAFF; 1462 | background-image: none; 1463 | box-shadow: none; 1464 | } 1465 | 1466 | .zg-btn-unfollow, .zg-btn-disabled { 1467 | background: #eee; 1468 | color: #999; 1469 | border: 0px solid #ddd; 1470 | } 1471 | 1472 | .zg-btn-follow:active { 1473 | background: #E4EAFF; 1474 | background-color: #E4EAFF; 1475 | color: #698ebf!important; 1476 | background-image: none; 1477 | box-shadow: none; 1478 | } 1479 | 1480 | .zg-btn-white { 1481 | background: #eee; 1482 | background-color: #eee; 1483 | background-image: none; 1484 | text-shadow: none; 1485 | border: none; 1486 | box-shadow: none; 1487 | color: #999!important; 1488 | } 1489 | 1490 | .profile-navbar { 1491 | background-color: #fff; 1492 | ; 1493 | border-top: 1px solid #ddd; 1494 | border-bottom: 1px solid #ddd; 1495 | box-shadow: none; 1496 | margin-top: 20px; 1497 | border-radius: 0px; 1498 | } 1499 | 1500 | .profile-navbar .item { 1501 | color: #666; 1502 | position: relative; 1503 | top: 1px; 1504 | } 1505 | 1506 | .profile-navbar .item.home { 1507 | border-right: none; 1508 | } 1509 | 1510 | .profile-navbar .item.active { 1511 | color: #666; 1512 | border: none; 1513 | border-width: 0 1px; 1514 | background-color: #fff; 1515 | box-shadow: none; 1516 | border-radius: 0px; 1517 | border-bottom: 3px solid #666; 1518 | } 1519 | 1520 | .profile-navbar .item.home.active { 1521 | border-color: #ddd; 1522 | border-width: 1px; 1523 | } 1524 | 1525 | .profile-navbar .item .num { 1526 | margin-left: 4px; 1527 | } 1528 | 1529 | .zm-profile-side-following .item { 1530 | padding: 2px 55px 8px 0; 1531 | } 1532 | 1533 | .zm-profile-header-user-weibo .zm-profile-header-icon.sina { 1534 | background-position: -193px -108px; 1535 | width: 18px; 1536 | } 1537 | 1538 | .zm-profile-header-icon { 1539 | vertical-align: -5px; 1540 | height: 18px; 1541 | margin-right: 2px; 1542 | } 1543 | 1544 | .profile-navbar .item.home { 1545 | border-right: 0px; 1546 | } 1547 | 1548 | .zm-profile-section-list { 1549 | padding: 4px 14px; 1550 | } 1551 | 1552 | .zm-item+.zm-item { 1553 | padding-top: 12px; 1554 | } 1555 | 1556 | .zm-profile-header-user-agree .zm-profile-header-icon { 1557 | background-position: -123px -146px; 1558 | } 1559 | 1560 | .zm-profile-header-operation strong { 1561 | letter-spacing: 0.02em; 1562 | font-weight: 600; 1563 | color: #666; 1564 | font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; 1565 | } 1566 | 1567 | .zm-profile-side-following .item strong { 1568 | font-weight: 600; 1569 | letter-spacing: 0.02em; 1570 | font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; 1571 | } 1572 | 1573 | .vote-thanks-relation p+p { 1574 | margin-top: 2px; 1575 | } 1576 | /*===========================================*/ 1577 | /*================== 擅长话题 ==================*/ 1578 | /*===========================================*/ 1579 | 1580 | .skilled-topics .item .avatar, .expert-item-moving .avatar { 1581 | position: relative; 1582 | top: 4px; 1583 | } 1584 | 1585 | .zm-profile-section-more-btn { 1586 | visibility: hidden; 1587 | } 1588 | 1589 | .zm-profile-section-wrap { 1590 | border: none; 1591 | border-radius: 0px; 1592 | box-shadow: none; 1593 | border-bottom: 1px solid #ddd; 1594 | } 1595 | 1596 | .skilled-topics .item, .expert-item-moving { 1597 | border-right: none; 1598 | margin-left: -1px; 1599 | } 1600 | 1601 | .zm-profile-section-head { 1602 | border-bottom: 1px solid #DDD; 1603 | } 1604 | 1605 | .zm-profile-section-name { 1606 | color: #666; 1607 | font-size: 14px; 1608 | } 1609 | 1610 | .zg-gray-darker { 1611 | color: #666; 1612 | } 1613 | 1614 | .skilled-topics .item .content .content-inner h3, .expert-item-moving .content .content-inner h3, .skilled-topics .item .content .content-inner a, .expert-item-moving .content .content-inner a, .skilled-topics .item .content .content-inner p, .expert-item-moving .content .content-inner p { 1615 | line-height: 1.8; 1616 | } 1617 | 1618 | .skilled-topics .item .content .meta, .expert-item-moving .content .meta { 1619 | color: #999; 1620 | font-weight: 400; 1621 | } 1622 | 1623 | .profile-navbar .item .num { 1624 | color: #999; 1625 | font-weight: 400; 1626 | } 1627 | 1628 | i.zm-profile-header-icon.sina { 1629 | vertical-align: -3px; 1630 | } 1631 | /*============================================*/ 1632 | /*==================== 回答 ====================*/ 1633 | /*===========================================*/ 1634 | 1635 | .zm-profile-vote-count { 1636 | margin: 3px 0 0 0; 1637 | color: #259; 1638 | } 1639 | 1640 | .zm-votebar .up, .zm-votebar .down { 1641 | margin: 5px 0 0 0; 1642 | } 1643 | 1644 | .zm-profile-section-main.zm-profile-section-activity-main .question_link, .zm-profile-section-main.zm-profile-section-activity-main .post-link { 1645 | font-weight: 600; 1646 | line-height: 1.8em; 1647 | margin-bottom: 5px; 1648 | } 1649 | 1650 | .zm-votebar.goog-scrollfloater-floating { 1651 | margin-top: 50px; 1652 | } 1653 | /*===========================================*/ 1654 | /*================== 右侧栏 ====================*/ 1655 | /*===========================================*/ 1656 | 1657 | .zu-noti7-popup .zu-top-nav-live-inner { 1658 | box-shadow: 0 0px 3px rgba(0, 0, 0, .3); 1659 | } 1660 | 1661 | .zm-profile-side-following { 1662 | border-bottom: 1px solid #ddd; 1663 | margin: 10px 0 15px 0; 1664 | } 1665 | 1666 | .vote-thanks-relation .zg-icon.vote { 1667 | display: none; 1668 | } 1669 | 1670 | .vote-thanks-relation .zg-icon.be-voted { 1671 | display: none; 1672 | } 1673 | 1674 | .zm-profile-side-section+.zm-profile-side-section { 1675 | border-top: 1px solid #ddd; 1676 | } 1677 | 1678 | .zu-main-sidebar .zh-footer .zg-wrap { 1679 | border-top-color: #ddd; 1680 | letter-spacing: 0; 1681 | width: auto!important; 1682 | } 1683 | 1684 | .zm-profile-side-following .item+.item { 1685 | border-left: 0px solid #ddd; 1686 | padding-left: 10px; 1687 | } 1688 | /*===========================================*/ 1689 | /*================== 小名片 ====================*/ 1690 | /*===========================================*/ 1691 | 1692 | i.icon.icon-profile-female { 1693 | margin-top: -3px; 1694 | } 1695 | 1696 | i.icon.icon-profile-male { 1697 | margin-top: -2px; 1698 | } 1699 | 1700 | .popover .popover-content { 1701 | border-radius: 4px; 1702 | } 1703 | 1704 | #zh-tooltip.goog-hovercard.popover { 1705 | margin-top: -1px; 1706 | } 1707 | 1708 | .zh-profile-card .lower .meta .item { 1709 | margin-left: 6px; 1710 | padding: 0 12px; 1711 | border-right: 0px solid #eee; 1712 | } 1713 | 1714 | .zh-profile-card .lower .meta .item .value { 1715 | font-size: 15px; 1716 | font-weight: 600; 1717 | color: #600; 1718 | letter-spacing: 0.02em; 1719 | font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; 1720 | } 1721 | 1722 | .zh-profile-card .lower .meta .item .key { 1723 | font-size: 13px; 1724 | color: #999; 1725 | } 1726 | 1727 | .zh-profile-card .lower { 1728 | background: #FAFAFF; 1729 | } 1730 | 1731 | .zu-noti7-popup.zu-top-nav-live { 1732 | border: none; 1733 | } 1734 | 1735 | .popover.bottom .arrow { 1736 | display: none; 1737 | } 1738 | 1739 | .popover.bottom .arrow2 { 1740 | top: 0px; 1741 | display: none; 1742 | } 1743 | 1744 | .popover.top .arrow { 1745 | display: none; 1746 | } 1747 | 1748 | .popover.top .arrow2 { 1749 | bottom: 0px; 1750 | border-top: 13px solid #fcfcfc; 1751 | display: none; 1752 | } 1753 | 1754 | .popover .popover-content { 1755 | border: none; 1756 | box-shadow: 0 0px 2px rgba(0, 0, 0, .3); 1757 | } 1758 | 1759 | .zm-noti7-popup-tab-item+.zm-noti7-popup-tab-item { 1760 | border-left: 0px solid #ddd; 1761 | } 1762 | 1763 | .zu-noti7-popup .zm-noti7-content-item { 1764 | border-bottom: 1px dotted #ddd; 1765 | } 1766 | 1767 | .zm-noti7-content-body .zm-noti7-content-item.unread { 1768 | border-bottom: 1px dotted #ddd; 1769 | } 1770 | 1771 | .zu-noti7-popup .zm-noti7-content-item::after { 1772 | background: none; 1773 | } 1774 | 1775 | .zm-noti7-frame-border { 1776 | background: #ddd; 1777 | } 1778 | /*===========================================*/ 1779 | /*================== 提问页面 ==================*/ 1780 | /*===========================================*/ 1781 | 1782 | .modal-dialog-title { 1783 | background-color: #1575d5; 1784 | background-image: none; 1785 | padding: 10px 15px; 1786 | border-radius: 6px 6px 0 0; 1787 | border: 0px solid #0D6EB8; 1788 | box-shadow: none; 1789 | margin: 0px; 1790 | } 1791 | 1792 | .modal-dialog-title-text { 1793 | font-size: 14px; 1794 | font-weight: 600; 1795 | color: #fff; 1796 | text-shadow: none; 1797 | } 1798 | 1799 | .modal-dialog { 1800 | border: 0px solid #888; 1801 | box-shadow: 0 0 4px 0 rgba(0, 0, 0, .4); 1802 | } 1803 | 1804 | .zg-form-text-input { 1805 | box-shadow: none; 1806 | border-radius: 3px; 1807 | border: 1px solid #ddd; 1808 | color: #999; 1809 | } 1810 | 1811 | textarea.zg-form-text-input, .zg-form-text-input>textarea { 1812 | color: #444; 1813 | } 1814 | 1815 | .zm-editable-editor-field-wrap { 1816 | border: 1px solid #ddd; 1817 | box-shadow: none; 1818 | } 1819 | 1820 | .zm-add-question-form-topic-wrap .zm-tag-editor-editor { 1821 | box-shadow: none; 1822 | border: 1px solid #ddd!important; 1823 | padding: 8px 8px 3px; 1824 | position: relative; 1825 | } 1826 | 1827 | .zh-add-question-form .zm-add-question-form-sns-wrap .goog-checkbox.goog-checkbox-checked { 1828 | box-shadow: none; 1829 | } 1830 | 1831 | .zm-item-tag, .zm-tag-editor-edit-item { 1832 | background: #E4EAFF; 1833 | color: #698ebf; 1834 | transition: all .1s; 1835 | } 1836 | 1837 | html.no-touch .zm-item-tag:hover, html.no-touch .zm-item-tag-x:hover { 1838 | background: #698ebf; 1839 | color: #fff; 1840 | text-decoration: none; 1841 | } 1842 | 1843 | .zg-icon-dropdown-menu { 1844 | width: 30px; 1845 | } 1846 | /*===========================================*/ 1847 | /*================== 问题页面 ==================*/ 1848 | /*===========================================*/ 1849 | 1850 | .zu-edit-button { 1851 | transition: all .1s; 1852 | } 1853 | 1854 | .question-invite-panel { 1855 | margin: 15px 0 35px; 1856 | color: #444; 1857 | border: 0px solid #ddd; 1858 | border-bottom: 1px solid #ddd; 1859 | border-top: 1px solid #ddd; 1860 | box-shadow: none; 1861 | border-radius: 0px; 1862 | } 1863 | 1864 | .question-invite-panel .search-input { 1865 | color: #666; 1866 | background: #F9F9FF; 1867 | border: 1px solid #ddddFF; 1868 | } 1869 | 1870 | .zg-form-text-input:focus { 1871 | box-shadow: none; 1872 | border: 1px solid #E2E0FF; 1873 | position: relative; 1874 | background: #FCFCFF; 1875 | } 1876 | 1877 | .goog-toolbar { 1878 | border-top: 1px solid #ddd; 1879 | border-left: 1px solid #ddd; 1880 | border-right: 1px solid #ddd; 1881 | box-shadow: none; 1882 | background-color: #f3f3f3; 1883 | background-image: none; 1884 | } 1885 | 1886 | .goog-toolbar-button, .goog-toolbar-menu-button:hover { 1887 | box-shadow: none; 1888 | } 1889 | 1890 | .zu-global-notify { 1891 | top: 0px; 1892 | box-shadow: none; 1893 | } 1894 | 1895 | .zm-item-answer-author-wrap { 1896 | margin: 1px 0 0 0; 1897 | } 1898 | 1899 | .zm-item-vote-info { 1900 | margin: 7px 0; 1901 | } 1902 | 1903 | .zh-answer-form { 1904 | margin-bottom: 15px; 1905 | margin-top: 15px; 1906 | } 1907 | 1908 | .goog-menu { 1909 | background: #fff; 1910 | color: #666; 1911 | border: solid 1px #eee; 1912 | box-shadow: none; 1913 | } 1914 | 1915 | .zm-tag-editor-remove-button { 1916 | transition: none; 1917 | } 1918 | /*===========================================*/ 1919 | /*================== 话题页面 ==================*/ 1920 | /*===========================================*/ 1921 | 1922 | .side-topic-content.ellipsis { 1923 | left: 0px; 1924 | } 1925 | 1926 | .pin-topic-avatar-link { 1927 | position: relative; 1928 | top: 5px; 1929 | } 1930 | 1931 | .side-topic-item { 1932 | padding: 13px; 1933 | } 1934 | 1935 | .zm-topic-cat-sub p { 1936 | height: 3.4em; 1937 | } 1938 | } 1939 | 1940 | @-moz-document url-prefix("http://zhuanlan.zhihu.com/"), url-prefix("https://zhuanlan.zhihu.com/") { 1941 | /*===========================================*/ 1942 | /*================ 知乎专栏 ==================*/ 1943 | /*===========================================*/ 1944 | 1945 | html body, html input, html textarea, html select, html button { 1946 | font-family: '.SFNSText-Regular', 'Helvetica Neue', Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; 1947 | letter-spacing: 0.02em; 1948 | text-rendering: optimizeLegibility; 1949 | } 1950 | 1951 | body, input, textarea, select, button { 1952 | font-size: 16px; 1953 | line-height: 1.9; 1954 | color: #444; 1955 | } 1956 | 1957 | a { 1958 | color: #259; 1959 | text-decoration: none!important; 1960 | -webkit-transition: all .2s ease-in-out; 1961 | -moz-transition: all .2s ease-in-out; 1962 | -ms-transition: all .2s ease-in-out; 1963 | -o-transition: all .2s ease-in-out; 1964 | transition: all .2s ease-in-out; 1965 | } 1966 | 1967 | i, em { 1968 | font-style: normal!important; 1969 | } 1970 | 1971 | strong, b { 1972 | font-weight: 600; 1973 | letter-spacing: 0.02em; 1974 | font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; 1975 | } 1976 | 1977 | h1, h2, h3, h4, h5 { 1978 | font-weight: 600; 1979 | letter-spacing: 0.02em; 1980 | font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; 1981 | } 1982 | 1983 | .entry-content { 1984 | line-height: 2; 1985 | } 1986 | 1987 | .review-comment-panel.fold { 1988 | height: 60px; 1989 | } 1990 | 1991 | .pop-panel-title { 1992 | padding: 10px 0px 0px 18px; 1993 | } 1994 | 1995 | .home .card-item, .home .column-card-item, .home .post-card-item { 1996 | height: 279px; 1997 | } 1998 | 1999 | .review-comment-panel .toggle, .review-comment-panel .close { 2000 | top: 11px; 2001 | } 2002 | /*===========================================*/ 2003 | /*================== 宽屏适配 ==================*/ 2004 | /*===========================================*/ 2005 | 2006 | body, input, textarea, select, button { 2007 | font-size: 18px; 2008 | line-height: 2; 2009 | color: #444; 2010 | } 2011 | 2012 | .receptacle { 2013 | width: 1080px; 2014 | } 2015 | 2016 | .post-write .title { 2017 | font-size: 32px!important; 2018 | } 2019 | 2020 | .post-write .toolbar-holder { 2021 | width: 1080px; 2022 | } 2023 | 2024 | .post-write .entry-content { 2025 | min-width: 1080px; 2026 | margin-left: -540px; 2027 | } 2028 | 2029 | .navbar-title-container { 2030 | width: 1080px; 2031 | margin-left: -540px; 2032 | } 2033 | 2034 | .post-view .entry-title { 2035 | font-size: 40px; 2036 | line-height: 60px; 2037 | } 2038 | 2039 | @media (max-width: 1400px) and (min-width: 968px) { 2040 | .receptacle { 2041 | width: 660px!important; 2042 | } 2043 | .post-write .toolbar-holder { 2044 | width: 660px!important; 2045 | } 2046 | .post-write .entry-content { 2047 | min-width: 660px!important; 2048 | margin-left: -330px!important; 2049 | } 2050 | .navbar-title-container { 2051 | width: 660px!important; 2052 | margin-left: -330px!important; 2053 | } 2054 | body, input, textarea, select, button { 2055 | font-size: 15px!important; 2056 | } 2057 | .post-view .entry-title { 2058 | font-size: 32px!important; 2059 | line-height: 45px!important; 2060 | } 2061 | } 2062 | } 2063 | 2064 | @-moz-document url-prefix("http://www.zhihu.com/question/"), url-prefix("https://www.zhihu.com/question/") { 2065 | /*===========================================*/ 2066 | /*================== 宽屏适配 ==================*/ 2067 | /*===========================================*/ 2068 | 2069 | .zm-meta-panel { 2070 | padding: 7px 0 13px 0; 2071 | } 2072 | 2073 | @media (max-width: 1400px) and (min-width: 968px) { 2074 | .zm-meta-panel { 2075 | padding: 3px 0!important; 2076 | } 2077 | } 2078 | } 2079 | 2080 | @-moz-document url-prefix("https://www.zhihu.com/people/") { 2081 | .Card { 2082 | border-radius: 6px; 2083 | } 2084 | 2085 | .UserCover-image, .UserCover-image img { 2086 | opacity: 0.2; 2087 | -webkit-transition: -webkit-opacity 0.5s ease-out; 2088 | transition: -webkit-opacity 0.5s ease-out; 2089 | transition: opacity 0.5s ease-out; 2090 | transition: opacity 0.5s ease-out, -webkit-transform 6s ease-out; 2091 | border-top-right-radius: 5px; 2092 | border-top-left-radius: 5px; 2093 | } 2094 | 2095 | .UserCover:hover .UserCover-image { 2096 | opacity: 1; 2097 | } 2098 | 2099 | .UserCover { 2100 | height: 100px; 2101 | border-top-right-radius: 5px; 2102 | border-top-left-radius: 5px; 2103 | } 2104 | 2105 | .UserCoverGuide-item { 2106 | border-top-right-radius: 5px; 2107 | border-top-left-radius: 5px; 2108 | } 2109 | 2110 | .UserCoverGuide-dialog { 2111 | box-shadow: 0 1px 3px rgba(0, 37, 55, .2); 2112 | } 2113 | 2114 | .UserCover:hover { 2115 | height: 240px; 2116 | } 2117 | 2118 | .UserCover--colorBlock { 2119 | height: 100px!important; 2120 | background: #fff; 2121 | } 2122 | 2123 | .Profile-followStatus { 2124 | width: 49%; 2125 | } 2126 | 2127 | .ContentItem-content { 2128 | font-size: 14px; 2129 | } 2130 | 2131 | .ContentItem-title { 2132 | font-size: 15px!important; 2133 | line-height: 1.0; 2134 | font-weight: 600; 2135 | } 2136 | 2137 | .AuthorInfo-name { 2138 | font-size: 15px; 2139 | font-weight: 600; 2140 | line-height: 1.6; 2141 | } 2142 | 2143 | .AuthorInfo-badge { 2144 | margin-top: 2px; 2145 | line-height: 1.6; 2146 | } 2147 | 2148 | .Profile-lightItem, .Profile-lightList { 2149 | padding-left: 1px; 2150 | padding-right: 1px; 2151 | } 2152 | 2153 | .ProfileHeader-name { 2154 | font-weight: 600; 2155 | } 2156 | 2157 | .ProfileHeader-headline { 2158 | font-weight: 300; 2159 | } 2160 | 2161 | .ContentItem-content.is-collapsed:hover { 2162 | color: #444; 2163 | } 2164 | 2165 | .Tabs-link { 2166 | border-bottom: 3px solid transparent; 2167 | } 2168 | 2169 | .Tabs-link:hover { 2170 | border-bottom: 3px solid #259; 2171 | } 2172 | 2173 | .Tabs-link.is-active:after { 2174 | bottom: -3px; 2175 | background: #259; 2176 | } 2177 | 2178 | .Tabs-link:hover { 2179 | color: #259; 2180 | } 2181 | 2182 | .Tabs-link:hover .Tabs-meta { 2183 | color: #259; 2184 | } 2185 | 2186 | .Tabs-link.is-active { 2187 | font-weight: 600; 2188 | } 2189 | 2190 | .ContentItem-cover { 2191 | display: none; 2192 | } 2193 | 2194 | a { 2195 | color: inherit; 2196 | } 2197 | 2198 | .Profile-sideColumnItemLink:hover { 2199 | color: #259; 2200 | } 2201 | 2202 | .Profile-followStatus:hover .Profile-followStatusValue { 2203 | color: #259; 2204 | } 2205 | 2206 | .Profile-followStatusValue:hover { 2207 | color: #259; 2208 | } 2209 | 2210 | .Profile-lightItem:hover, .Profile-lightItem:hover .Profile-lightItemValue { 2211 | color: #259; 2212 | } 2213 | 2214 | a.Footer-item:hover { 2215 | color: #259; 2216 | } 2217 | 2218 | .Profile-footerOperations .Footer { 2219 | padding-left: 1px; 2220 | padding-right: 1px; 2221 | } 2222 | } 2223 | --------------------------------------------------------------------------------