博客园页面css
代码：
1 body { 2 background:#fff; 3 min-height:100%; 4 height:100%; 5 color:#314659!important; 6 font-family:Lato,"PingFang SC","Microsoft YaHei",sans-serif!important 7 } 8 a { 9 transition:all .3s ease!important 10 } 11 a:hover { 12 color:#2D8CF0!important; 13 text-decoration:none!important 14 } 15 #ad_c1,#ad_c2,#ad_t2,#author_profile,#blogCalendar,#blogTitle h2,#comment_form_container p:nth-of-type(3),#comments_pager_top,#green_channel,#homepage_top_pager,#sidebar_imagecategory,#sidebar_postarchive,#sidebar_recentcomments,#sidebar_recentposts,#sidebar_scorerank,#sidebar_search,#sidebar_search .catListTitle,#sidebar_shortcut,#sidebar_topcommentedposts,#tip_comment2,#under_post_kb,#under_post_news,.blogStats,.c_ad_block,.dayTitle { 16 display:none 17 } 18 #home { 19 width:100%; 20 height:100% 21 } 22 #header { 23 width:960px; 24 position:fixed; 25 top:0; 26 right:0; 27 left:0; 28 margin:0 auto; 29 border-top:0; 30 background:#fff; 31 opacity:.95; 32 border-bottom:1px #eef2f8 solid; 33 padding-bottom:0; 34 display:block; 35 height:60px; 36 z-index:999 37 } 38 #header #blogTitle { 39 position:relative; 40 height:60px 41 } 42 #header #blogTitle h1 { 43 font-size:25px; 44 font-family:Georgia; 45 width:auto; 46 margin-left:0; 47 margin-top:12px 48 } 49 #header #blogTitle h1 a { 50 color:#404040 51 } 52 #header #navigator { 53 height:inherit; 54 position:absolute; 55 right:0; 56 top:0; 57 background-color:transparent; 58 display:inline-block; 59 z-index:999 60 } 61 #header #navList { 62 height:inherit 63 } 64 #header #navList>li { 65 position:relative 66 } 67 #header #navList>li:hover i { 68 width:100%; 69 left:0 70 } 71 #header #navList>li>a:active,#header #navList>li>a:link,#header #navList>li>a:visited { 72 font-size:17px; 73 padding-top:0; 74 border-right:0; 75 color:#314659; 76 display:block; 77 font-weight:300; 78 width:auto; 79 padding:19px 16px; 80 height:inherit; 81 -webkit-transition:all .3s; 82 transition:all .3s 83 } 84 #header #navList>li>a:hover { 85 background:0 0 86 } 87 #header #navList>li>i { 88 width:0; 89 height:4px; 90 background-color:#2D8CF0; 91 content:""; 92 position:absolute; 93 left:50%; 94 bottom:0; 95 transition:1s 96 } 97 #header #navList .open { 98 transform:rotate(180deg) scaleX(-1) 99 } 100 #header #navList .esa-sub-navs { 101 background-color:#fff; 102 position:absolute; 103 width:130px; 104 top:65px; 105 left:calc(50% - 65px); 106 border-radius:3px; 107 box-shadow:0 1px 15px rgba(27,31,35,.15); 108 display:none; 109 padding:10px 110 } 111 #header #navList .esa-sub-navs li { 112 float:none 113 } 114 #header #navList .esa-sub-navs li a { 115 font-size:15px; 116 border-right:0; 117 color:#314659; 118 display:block; 119 width:100%; 120 font-weight:300; 121 padding:10px 0; 122 height:inherit 123 } 124 #header #navList .esa-sub-navs li a:hover { 125 background:0 0; 126 color:#2D8CF0 127 } 128 #main { 129 width:960px; 130 margin:0 auto; 131 min-height:calc(100% - 135px); 132 padding:75px 10px 0 10px; 133 animation-name:fadeIn; 134 animation-duration:1s; 135 animation-iteration-count:1; 136 -webkit-animation-name:fadeIn; 137 -webkit-animation-duration:1s; 138 -webkit-animation-iteration-count:1 139 } 140 #main #mainContent { 141 background-color:transparent 142 } 143 #main #mainContent .forFlow { 144 margin:0 auto; 145 margin-left:0; 146 max-width:960px 147 } 148 #sideBar { 149 border-right:1px solid #eef2f8; 150 font-weight:300; 151 display:none; 152 min-height:750px; 153 padding:0 15px 0 0 154 } 155 #sideBar #profile_block { 156 margin-top:10px; 157 font-size:15px 158 } 159 #sideBar #profile_block #p_b_follow { 160 margin-top:10px 161 } 162 #sideBar #profile_block a { 163 color:#314659 164 } 165 .catListTitle { 166 position:relative; 167 text-align:left; 168 margin:15px 0; 169 padding-left:15px; 170 font-size:20px; 171 font-weight:bolder; 172 border-bottom:none; 173 } 174 .catListTitle::before { 175 content:"\2662"; 176 color:#CC0033; 177 position:absolute; 178 top:1px; 179 left:-2px 180 } 181 182 #sidebar_toptags li { 183 font-size:14px; 184 height:19px; 185 line-height:20px; 186 white-space:nowrap; 187 overflow:hidden; 188 text-overflow:ellipsis; 189 padding:5px 8px; 190 border:1px solid #CC0033; 191 margin:0 6px 6px 0; 192 display:inline-grid; 193 transition:all .3s; 194 border-radius:2px 195 } 196 #sidebar_toptags li a { 197 color:#990033 198 } 199 #sidebar_toptags li:active,#sidebar_toptags li:link,#sidebar_toptags li:visited { 200 border-color:#CC0033 201 } 202 #sidebar_toptags li:hover { 203 border-color:#2D8CF0 204 } 205 #sidebar_categories li { 206 font-size:15px; 207 height:40px; 208 padding-left:3px; 209 line-height:30px; 210 white-space:nowrap; 211 overflow:hidden; 212 transition:all .5s; 213 text-overflow:ellipsis; 214 list-style:inside 215 } 216 #sidebar_categories li:hover { 217 margin-left:10px 218 } 219 #sidebar_categories li a { 220 color:#314659 221 } 222 #sidebar_topdiggedposts li,#sidebar_topviewedposts li { 223 font-size:15px; 224 padding:10px 0; 225 transition:all .3s; 226 text-align:justify; 227 border-bottom:1px solid #eef2f8 228 } 229 #sidebar_topdiggedposts li a:active,#sidebar_topdiggedposts li a:hover,#sidebar_topdiggedposts li a:link,#sidebar_topdiggedposts li a:visited,#sidebar_topviewedposts li a:active,#sidebar_topviewedposts li a:hover,#sidebar_topviewedposts li a:link,#sidebar_topviewedposts li a:visited { 230 color:#314659 231 } 232 #taglist_title,.PostListTitle,.entrylistTitle,.myposts_title,.thumbTitle { 233 padding-bottom:3px; 234 padding-right:10px; 235 width:100%; 236 text-align:left; 237 border-bottom:0!important; 238 font-size:20px!important; 239 font-weight:300; 240 margin-top:15px 241 } 242 #myposts { 243 margin-left:0 244 } 245 #myposts .PostList { 246 font-size:14px; 247 font-weight:300; 248 border-bottom:1px solid #eef2f8; 249 padding:5px 0 9px 0; 250 margin-right:0 251 } 252 #myposts .pager:first-of-type { 253 display:none 254 } 255 #myposts a:link,#myposts a:visited { 256 color:#314659 257 } 258 #myposts .postDesc2 { 259 color:inherit 260 } 261 .day,.entrylistItem { 262 width:auto; 263 border-bottom:1px solid #eef2f8; 264 padding:10px 0 15px 0; 265 text-align:justify 266 } 267 .day .postSeparator,.entrylistItem .postSeparator { 268 margin-top:15px; 269 margin-bottom:25px; 270 border-top:1px solid #eef2f8 271 } 272 .day .postTitle,.entrylist .entrylistPosttitle { 273 font-size:20px; 274 font-weight:bolder; 275 font-family:inherit; 276 padding-left:0; 277 border-bottom:none; 278 } 279 .day .postTitle a,.entrylist .entrylistPosttitle a { 280 color:#CC0033 281 } 282 .day .postCon,.entrylist .entrylistPostSummary { 283 font-size:16px; 284 font-weight:300; 285 font-family:inherit; 286 padding-left:0 287 } 288 .day .postCon .c_b_p_desc img,.entrylist .entrylistPostSummary .c_b_p_desc img { 289 height:100px; 290 margin-left:10px 291 } 292 .day .postCon .c_b_p_desc a,.entrylist .entrylistPostSummary .c_b_p_desc a { 293 border:1px solid; 294 border-radius:3px; 295 padding:2px 9px; 296 font-size:13px; 297 margin-top:10px; 298 text-decoration:none; 299 display:table; 300 color:#314659; 301 border-color:#314659 302 } 303 .day .postCon .c_b_p_desc a:after,.entrylist .entrylistPostSummary .c_b_p_desc a:after { 304 content:" »" 305 } 306 .day .postCon .c_b_p_desc a:hover,.entrylist .entrylistPostSummary .c_b_p_desc a:hover { 307 color:#2D8CF0!important; 308 border:1px solid #2D8CF0 309 } 310 .day .postDesc,.entrylist .entrylistItemPostDesc,.post .postDesc { 311 font-size:13px; 312 font-weight:300; 313 padding-right:0!important; 314 color:#314659!important 315 } 316 .day .postDesc a,.entrylist .entrylistItemPostDesc a,.post .postDesc a { 317 color:#314659 318 } 319 .entrylistDescription { 320 color:#314659; 321 font-size:13px; 322 font-weight:300; 323 padding-right:0 324 } 325 #topics .postTitle { 326 font-size:20px; 327 font-weight:300; 328 padding-left:0; 329 border-bottom:none 330 } 331 #topics .postTitle a { 332 color:#314659 333 } 334 #topics .postBody { 335 font-weight:300; 336 font-size:16px; 337 padding:10px 0; 338 line-height:1.75; 339 color:#314659; 340 border-bottom:1px solid #eef2f8 341 } 342 #topics .postBody a:active,#topics .postBody a:link,#topics .postBody a:visited { 343 color:#2D8CF0; 344 text-decoration:none 345 } 346 #topics .postBody h1 { 347 font-size:21px!important; 348 color:#314659 349 } 350 #topics .postBody h1 a:not([class=esa-anchor]) { 351 color:inherit!important; 352 text-decoration:underline 353 } 354 #topics .postBody h2 { 355 font-size:20px!important; 356 color:#314659 357 } 358 #topics .postBody h2 a:not([class=esa-anchor]) { 359 color:inherit!important; 360 text-decoration:underline 361 } 362 #topics .postBody h3 { 363 font-size:19px!important; 364 color:#314659 365 } 366 #topics .postBody h3 a:not([class=esa-anchor]) { 367 color:inherit!important; 368 text-decoration:underline 369 } 370 #topics .postBody h4 { 371 font-size:18px!important; 372 color:#314659 373 } 374 #topics .postBody h4 a:not([class=esa-anchor]) { 375 color:inherit!important; 376 text-decoration:underline 377 } 378 #topics .postBody h5 { 379 font-size:17px!important; 380 color:#314659 381 } 382 #topics .postBody h5 a:not([class=esa-anchor]) { 383 color:inherit!important; 384 text-decoration:underline 385 } 386 #topics .postBody h6 { 387 font-size:16px!important; 388 color:#314659 389 } 390 #topics .postBody h6 a:not([class=esa-anchor]) { 391 color:inherit!important; 392 text-decoration:underline 393 } 394 #topics .postBody p { 395 margin:13px auto 396 } 397 #topics .postBody hr { 398 border-left:none; 399 border-right:none; 400 border-top:none; 401 border-bottom:1px solid #eef2f8 402 } 403 #topics .postBody blockquote { 404 border:none; 405 color:#314659; 406 margin:20px 0; 407 padding:0 0 0 10px; 408 min-height:20px; 409 background:0 0; 410 line-height:inherit; 411 border-left:4px solid #dde5f1 412 } 413 #topics .postBody em { 414 padding-right:3px 415 } 416 #topics .postBody strong { 417 margin:0 3px; 418 font-weight:500 419 } 420 #topics .postBody img { 421 max-width:960px!important; 422 display:block; 423 margin:15px 0 30px 0; 424 border-radius:3px; 425 box-shadow:0 1px 15px rgba(27,31,35,.15),0 0 1px rgba(106,115,125,.35) 426 } 427 #topics .postBody ol li,#topics .postBody ul li { 428 margin:3px 0; 429 font-size:16px; 430 color:#314659 431 } 432 #topics .postBody ol li p,#topics .postBody ul li p { 433 margin:0!important 434 } 435 #topics .postBody table { 436 font-size:13px; 437 border-collapse:collapse; 438 border-spacing:0; 439 empty-cells:show; 440 border:1px solid #eef2f8; 441 width:100%; 442 margin:13px 0 443 } 444 #topics .postBody table th { 445 font-family:inherit; 446 font-size:inherit; 447 background:#f7f7f7!important; 448 white-space:nowrap; 449 font-weight:600; 450 border:1px solid #eef2f8!important; 451 padding:8px 16px!important 452 } 453 #topics .postBody table td { 454 border:1px solid #eef2f8!important; 455 padding:8px 16px!important 456 } 457 #topics .postBody h1 code,#topics .postBody h2 code,#topics .postBody h3 code,#topics .postBody h4 code,#topics .postBody h5 code,#topics .postBody h6 code,#topics .postBody li code,#topics .postBody p code,#topics .postBody table code { 458 color:#314659; 459 line-height:1; 460 font-family:consolas!important; 461 vertical-align:middle; 462 margin:0 3px; 463 background:#f2f4f5!important; 464 font-size:14px!important; 465 padding:.2em .3em!important; 466 border-radius:3px!important; 467 border:1px solid #eee!important 468 } 469 #topics .postBody #BlogPostCategory { 470 font-size:14px; 471 margin-bottom:0 472 } 473 #topics .postBody #BlogPostCategory a { 474 margin-left:5px 475 } 476 #topics .postBody #EntryTag { 477 font-size:14px; 478 color:#314659 479 } 480 #topics .postBody #EntryTag a { 481 color:#2D8CF0 482 } 483 #topics .postBody #post_next_prev { 484 font-size:13px 485 } 486 .cnblogs_code { 487 background-color:#f2f4f5; 488 padding-left:1em; 489 padding-right:1em; 490 border:none!important; 491 border-radius:3px!important; 492 font-family:Lucida Console,Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace!important 493 } 494 .cnblogs_code div { 495 background-color:transparent; 496 color:#656c73 497 } 498 .cnblogs_code img { 499 margin:0!important 500 } 501 .cnblogs_code pre { 502 color:#656c73; 503 font-family:inherit!important 504 } 505 .cnblogs_code pre span { 506 font-family:inherit!important; 507 color:inherit!important 508 } 509 .cnblogs_code textarea { 510 font-family:inherit!important; 511 padding:5px; 512 border:1px solid #3e4c42; 513 color:#c5d4ef; 514 background-color:#282c34 515 } 516 .cnblogs_code textarea:focus { 517 outline:0 518 } 519 .cnblogs_code .code_img_closed,.cnblogs_code .code_img_opened { 520 display:none!important 521 } 522 .cnblogs_code .cnblogs_code_toolbar { 523 width:20px 524 } 525 .cnblogs_code .cnblogs_code_toolbar span { 526 padding-right:0 527 } 528 .cnblogs_code .cnblogs_code_toolbar a:link img { 529 background-color:transparent!important 530 } 531 .cnblogs_code .cnblogs_code_collapse { 532 color:#656c73; 533 border:1px solid #989fa6; 534 border-radius:2px; 535 background-color:transparent; 536 display:inline-block; 537 cursor:pointer; 538 padding:5px 5px 2px 5px 539 } 540 .github-corner svg { 541 fill:#2D8CF0 542 } 543 #footer { 544 border-top:1px solid #eef2f8; 545 font-size:13px; 546 font-weight:300; 547 margin:10px 0 0 0; 548 padding:10px 0 549 } 550 #footer .esa-copyright a { 551 color:#314659 552 } 553 .cnblogs-markdown pre { 554 white-space:pre!important; 555 position:relative!important 556 } 557 #taglist_main { 558 margin-top:0 559 } 560 #taglist_main table { 561 width:100% 562 } 563 #taglist_main table tr td { 564 padding:5px 20px 5px 0 565 } 566 #taglist_main table tr td .small { 567 display:none 568 } 569 #taglist_main table tr td a { 570 display:block; 571 font-size:14px; 572 padding:5px; 573 font-weight:300; 574 height:19px; 575 line-height:20px; 576 text-align:center; 577 border:1px solid #eef2f8; 578 border-radius:2px; 579 color:#314659 580 } 581 #taglist_main table tr td a:hover { 582 color:#2D8CF0!important; 583 border:1px solid #2D8CF0; 584 text-decoration:none 585 } 586 .topicListFooter { 587 margin-right:0 588 } 589 #nav_next_page,.pager { 590 margin-right:0; 591 color:#314659 592 } 593 #nav_next_page a,.pager a { 594 padding:3px 7px; 595 border:1px solid #314659; 596 border-radius:2px; 597 margin:0 3px; 598 text-decoration:none; 599 color:inherit; 600 transition:border .2s ease-in-out,color .2s ease-in-out 601 } 602 #nav_next_page a:hover,.pager a:hover { 603 color:#2D8CF0; 604 border:1px solid #2D8CF0 605 } 606 .pager span.current { 607 padding:3px 7px; 608 border:1px solid #2D8CF0; 609 border-radius:4px; 610 font-family:Monospaced Number; 611 margin:0 3px; 612 text-decoration:none; 613 background-color:#2D8CF0 614 } 615 .esa-clipboard-button { 616 font-size:12px; 617 cursor:pointer; 618 position:absolute; 619 right:13px; 620 top:10px; 621 box-shadow:0 0 15px 0 rgba(0,0,0,.1); 622 color:#314659; 623 padding:0 6px; 624 border-radius:5px 625 } 626 .esa-toolbar { 627 position:fixed; 628 display:grid; 629 z-index:999; 630 bottom:30px; 631 right:30px 632 } 633 .esa-toolbar .esa-toolbar-contents,.esa-toolbar .esa-toolbar-follow,.esa-toolbar .esa-toolbar-gotop { 634 height:45px; 635 width:45px; 636 font-weight:400; 637 position:relative; 638 outline:0; 639 cursor:pointer; 640 border:1px solid transparent; 641 transition:color .2s linear,background-color .2s linear,border .2s linear,box-shadow .2s linear; 642 margin-top:5px; 643 border-color:#eef2f8; 644 background-color:#fff; 645 background-position:center; 646 background-repeat:no-repeat 647 } 648 .esa-toolbar .esa-toolbar-contents:hover,.esa-toolbar .esa-toolbar-follow:hover,.esa-toolbar .esa-toolbar-gotop:hover { 649 color:#2D8CF0; 650 border-color:#2D8CF0 651 } 652 .esa-toolbar .esa-toolbar-gotop { 653 display:none; 654 background-image:url(data:image/png; 655 base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAACL0lEQVRIS+3TwWvTUBwH8O/vJSLrFBURFPSkoIiCVz3IilObFA/aNR0yEEk6EXfxH1D0L5DdyroMHaJL1a1Ikw3H6kVBHHjyIKKgMEQmbOqsTpv8JOkmna4mvQyRvVv4/fL78L7vPcIKLFoBA6tIUyn/e3H1F+xjYB4B8EyGp53RTkxF2VLkneQLTieYBwmQ/cEMfgsJh41U8k0YFAnJW3YPAb2Afxv5CZj2gdAK8BQgjuia8uJvUCiSt+wrBFxaGOJ8WYeTsQr2kscTAG1k5g+eJLV1dySeN4IaIsxMpuXkQMjW4kFh55aW0/F4vOp/D9wZ2+N67gQB25h5RmJx/Gyn8nQ5aFmk17bXtn7mGyDSAoBh6ppiEBHXDzFvje3wpADaxcAcGAkjoz76HfoDyVkPNsj44QA4GDQzrukZ9WKjKK7fG99crX4vA9gP8FePhJpNKw/r+5cgfXft7cLFOIDdCxFdNjT1atjt6S8W12NeHgXoEAPzgEgZWqK0+N8vZMAqHfAAB6CtzOwBlDUyqhkGLNYt63HLJ8zaBLQxUCWQpmvKsF8PEHNotN0jt0igGBjfIHBKT6t+ZE0t/yxjc3yfQEcBdplEl5FWblOfZWcE+CZAEgMfSXC73pGcbGp6XXMuN7lG3vR+GKBkcGeIz1N+qDRIRF1RH1YUvFwuy6+nKyM1iGepluVMtytJ1rlU4l2UIVF6fOjVdOUCs3gZ+uKjDAzrWUXCElpS/3/i+gn3gM6tu0xSdwAAAABJRU5ErkJggg==) 656 } 657 .esa-toolbar .esa-toolbar-contents { 658 background-image:url(data:image/png; 659 base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAuUlEQVRIS2NkoANgpIMdDPSxZO6qbQeQffOf+X98SrD3w0WLdnL/5vi7lRo+ZZy7att/ZIMYGRi0k8K8rs1ctZufheH3B6pYMnv1dgdkg/5x/DmV7uv7bdWqVcwfGXltqWIJNQwhZAZ9Ip6QK6ghP4x8Mnfl1gaUJMzIODUpzOv1pG3b2Lk//6+kSnDRJZ/QxSfUCA5CZgyj1EXIq9SQp09w0aUUpk8+oUelRY2IJWQGfSKekCuoIQ8At39XNxqN1mQAAAAASUVORK5CYII=) 660 } 661 .esa-toolbar .esa-toolbar-follow { 662 background-image:url(data:image/png; 663 base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAsUlEQVRIS2NkIAHMXbU98D/D/zn/GRlTU0M91xGrlZFYhSB1c1Zu62RkZChj+M/QmxzuVUKs3lFLRoOLcFoZTV30ySdzV29zY2BgtGT494+ghf8ZGF0YGRmskXP8pG3b2Lm/MqQx/PsvjBGrTEz/Gf8xHmWcs3LrC0ZGRnHC0Y6kAqlYmbNyqx0jI+NBnPr/M/xgpKlPwDYzPiUYRMguHE3Co8E1WtQTzvPDJ5+Q2+4CADezs7EkSK8aAAAAAElFTkSuQmCC) 664 } 665 .esa-profile-avatar { 666 margin-top:15px; 667 border-radius:3px; 668 width:100% 669 } 670 .esa-follow-button { 671 z-index:999; 672 display:none; 673 position:fixed; 674 bottom:30px; 675 right:30px; 676 height:45px; 677 width:45px; 678 font-weight:400; 679 outline:0; 680 cursor:pointer; 681 border:1px solid transparent; 682 white-space:nowrap; 683 -webkit-user-select:none; 684 -moz-user-select:none; 685 -ms-user-select:none; 686 user-select:none; 687 font-size:12px; 688 border-radius:50px; 689 color:#515a6e; 690 background-color:#fff; 691 border-color:#dcdee2 692 } 693 .esa-follow-button:hover { 694 color:#2D8CF0; 695 border-color:#2D8CF0; 696 background-color:#fff 697 } 698 .esa-mobile-menu { 699 display:none; 700 position:fixed; 701 top:7px; 702 right:15px; 703 z-index:941113; 704 font-size:1.5em; 705 cursor:pointer; 706 color:#7f7f7f 707 } 708 .esa-mobile-menu:after { 709 content:"\2630"; 710 font-size:1.5em; 711 font-family:fontello 712 } 713 .esa-search-btn { 714 display:block; 715 padding:14px 0; 716 cursor:pointer 717 } 718 .esa-search-close { 719 display:none; 720 padding:14px 0; 721 cursor:pointer 722 } 723 .esa-search-box { 724 display:none; 725 position:fixed; 726 top:61px; 727 height:auto; 728 padding:10px 0; 729 background-color:#fff; 730 width:960px; 731 text-align:center; 732 border-bottom:1px #eef2f8 solid; 733 z-index:999 734 } 735 .esa-search-box .input_my_zzk { 736 color:#314659; 737 border:solid 1px #eef2f8; 738 width:45%; 739 height:32px; 740 padding:0 7px; 741 border-right:none; 742 font-size:16px; 743 font-weight:300; 744 border-radius:2px 0 0 2px; 745 outline:0; 746 background-color:#fff 747 } 748 .esa-search-box .btn_my_zzk { 749 height:34px; 750 font-size:14px; 751 font-weight:300; 752 margin-left:-5px; 753 background-color:#2D8CF0; 754 border:none; 755 color:#fff; 756 cursor:pointer; 757 width:75px; 758 outline:0 759 } 760 .esa-catalog { 761 position:fixed; 762 top:120px; 763 right:1px; 764 width:auto; 765 height:auto; 766 z-index:1000 767 } 768 .esa-catalog-title { 769 cursor:move; 770 padding-left:12px; 771 width:100%; 772 height:35px; 773 line-height:36px; 774 border-bottom:1px solid #eef2f8; 775 font-size:12px; 776 font-weight:600; 777 color:#314659 778 } 779 .esa-catalog-title:before { 780 content:"\2632"; 781 margin-right:5px 782 } 783 .esa-catalog-close { 784 position:absolute; 785 right:15px; 786 top:10px; 787 cursor:pointer 788 } 789 .esa-catalog-contents { 790 overflow:hidden; 791 display:none; 792 color:#314659; 793 border:1px solid #eef2f8; 794 min-width:150px; 795 opacity:1; 796 font-size:inherit; 797 font-weight:300; 798 background-color:#fff; 799 z-index:19941112 800 } 801 .esa-catalog-contents ul { 802 padding:10px 15px; 803 max-height:350px; 804 overflow-y:auto 805 } 806 .esa-catalog-contents ul li { 807 margin-top:5px; 808 max-width:160px; 809 white-space:nowrap; 810 overflow:hidden; 811 text-overflow:ellipsis; 812 cursor:pointer; 813 color:#314659 814 } 815 .esa-catalog-contents ul li code { 816 font-family:inherit 817 } 818 .esa-catalog-contents ul li a:hover { 819 color:#2D8CF0; 820 text-decoration:none 821 } 822 .esa-catalog-contents ul li .level1 { 823 margin-left:0 824 } 825 .esa-catalog-contents ul li .level2 { 826 margin-left:10px 827 } 828 .esa-catalog-contents ul li .level3 { 829 margin-left:26px 830 } 831 .esa-anchor { 832 opacity:0; 833 -webkit-transition:opacity .3s ease; 834 transition:opacity .3s ease; 835 margin-left:8px 836 } 837 .esa-post-signature { 838 padding:12px 24px 12px 30px; 839 margin-top:15px; 840 margin-left:5px; 841 border-left-width:4px; 842 font-size:15px; 843 line-height:2; 844 border-left-style:solid; 845 background-color:#f8f8f8; 846 position:relative; 847 border-bottom-right-radius:2px; 848 border-top-right-radius:2px; 849 border-left-color:#2D8CF0; 850 z-index:1 851 } 852 .esa-post-signature:before { 853 content:"!"; 854 background-color:#2D8CF0; 855 position:absolute; 856 top:25px; 857 left:-12px; 858 color:#fff; 859 width:20px; 860 height:20px; 861 border-radius:100%; 862 text-align:center; 863 line-height:20px; 864 font-weight:700; 865 font-size:14px 866 } 867 .esa-post-signature p { 868 margin:0!important 869 } 870 .esa-post-signature a { 871 color:#314659!important 872 } 873 .esa-layer { 874 position:fixed; 875 top:70px; 876 text-align:center; 877 line-height:25px; 878 font-size:15px; 879 font-family:inherit; 880 width:100%; 881 display:none; 882 z-index:9999999 883 } 884 .esa-layer-content { 885 position:relative; 886 background:rgba(0,0,0,.7); 887 max-width:250px; 888 padding:5px 10px; 889 font-size:14px; 890 border-radius:5px; 891 color:#e0e0e0; 892 display:inline-block 893 } 894 #div_digg { 895 position:static; 896 float:none; 897 margin:35px auto 85px auto; 898 z-index:-1; 899 width:200px 900 } 901 #div_digg .buryit,#div_digg .diggit { 902 background:#fff; 903 margin:0; 904 display:inline-block; 905 width:auto; 906 height:32px; 907 border-width:0; 908 cursor:pointer; 909 color:#fff; 910 user-select:none; 911 padding:0 10px; 912 border-radius:5px; 913 transition:color .2s linear,background-color .2s linear,border .2s linear,box-shadow .2s linear 914 } 915 #div_digg .diggit { 916 background-color:#18b566; 917 border-color:#18b566 918 } 919 #div_digg .diggit:hover { 920 background-color:#47cb89; 921 border-color:#47cb89 922 } 923 #div_digg .buryit { 924 background-color:#ed4014; 925 border-color:#ed4014 926 } 927 #div_digg .buryit:hover { 928 background-color:#f16643; 929 border-color:#f16643 930 } 931 #div_digg .buryit .burynum,#div_digg .diggit .diggnum { 932 color:snow; 933 display:inline-block; 934 font-size:15px; 935 position:relative; 936 top:5px; 937 width:65px 938 } 939 #div_digg .diggit .diggnum:before { 940 content:"\63a8\8350"; 941 font-size:15px; 942 margin-right:5px 943 } 944 #div_digg .buryit .burynum:before { 945 content:"\53cd\5bf9"; 946 font-size:15px; 947 margin-right:5px 948 } 949 .feedbackItem .feedbackListSubtitle { 950 color:transparent 951 } 952 .feedbackItem .feedbackListSubtitle .sendMsg2This { 953 background:0 0; 954 padding-left:0; 955 font-size:15px 956 } 957 .feedbackItem .feedbackListSubtitle .sendMsg2This::before { 958 content:"✉️" 959 } 960 .feedbackItem a { 961 color:#314659 962 } 963 .feedbackItem .louzhu { 964 background:#2D8CF0!important; 965 color:#fff; 966 border-radius:2px; 967 margin:0 2px; 968 padding:0 6px 2px 6px!important 969 } 970 .feedbackItem .comment_date { 971 color:#666 972 } 973 .feedbackItem .comment_quote { 974 border:1px dashed #2D8CF0; 975 border-radius:3px 976 } 977 #comment_nav { 978 visibility:hidden 979 } 980 .feedbackItem .feedbackCon { 981 background:0 0; 982 padding:10px 0 10px 0; 983 border-bottom:1px solid #eef2f8 984 } 985 .feedbackItem .feedbackCon .esa-comment-avatar { 986 float:left 987 } 988 .feedbackItem .feedbackCon .esa-comment-avatar img { 989 border-radius:50%; 990 transition:all .5s ease-out; 991 -webkit-transition:all .6s ease-out; 992 -moz-transition:all .5s ease-out; 993 -ms-transition:all .5s ease-out; 994 -o-transition:all .5s ease-out 995 } 996 .feedbackItem .feedbackCon .esa-comment-avatar img:hover { 997 -webkit-transform:rotateZ(360deg); 998 -moz-transform:rotateZ(360deg); 999 -ms-transform:rotateZ(360deg); 1000 -o-transform:rotateZ(360deg); 1001 transform:rotateZ(360deg) 1002 } 1003 .feedbackItem .feedbackCon .blog_comment_body { 1004 font-size:14px; 1005 font-weight:300; 1006 border-radius:3px; 1007 padding:10px; 1008 margin-left:55px; 1009 color:#314659; 1010 background-color:rgba(193,193,193,.2) 1011 } 1012 .feedbackItem .feedbackCon .blog_comment_body a { 1013 color:#2D8CF0 1014 } 1015 .feedbackItem .feedbackCon .blog_comment_body img { 1016 border-radius:3px 1017 } 1018 .feedbackItem .feedbackCon .comment_vote { 1019 margin-top:12px 1020 } 1021 .feedback_area_title { 1022 border-bottom:1px solid #eef2f8; 1023 margin-bottom:15px; 1024 font-size:20px; 1025 font-weight:300; 1026 padding-left:0; 1027 padding-bottom:5px 1028 } 1029 .commentform #commentform_title { 1030 background-image:none; 1031 padding-left:0; 1032 font-size:20px 1033 } 1034 .commentform #tip_comment { 1035 color:#f37f7f!important; 1036 margin:15px 0; 1037 display:block 1038 } 1039 .commentform .commentbox_title { 1040 border-bottom:1px solid #eef2f8; 1041 font-size:14px; 1042 font-weight:300 1043 } 1044 .commentform .commentbox_title .commentbox_title_left .commentbox_tab.active,.commentform .commentbox_title .commentbox_title_left .commentbox_tab:hover { 1045 border-bottom:2px solid #2D8CF0; 1046 color:#2D8CF0 1047 } 1048 .commentform .commentbox_title .commentbox_title_right .comment_svg:hover,.commentform .commentbox_title .commentbox_title_right .comment_svg_stroke:hover { 1049 fill:#2D8CF0 1050 } 1051 .commentform .comment_textarea { 1052 width:100%; 1053 border:1px solid #eef2f8; 1054 background-color:transparent; 1055 color:#314659 1056 } 1057 .commentform .comment_textarea:focus { 1058 outline:0 1059 } 1060 .commentform .comment_textarea:hover { 1061 border-color:#2D8CF0 1062 } 1063 .commentform #tbCommentBody { 1064 color:#314659; 1065 background-color:transparent 1066 } 1067 .commentform .feedbackCon { 1068 border-bottom:1px solid #eef2f8; 1069 background:0 0; 1070 padding:0 1071 } 1072 .commentform .comment_preview p { 1073 font-size:15px; 1074 font-weight:300 1075 } 1076 .commentform #commentbox_opt { 1077 display:block 1078 } 1079 .commentform #commentbox_opt a { 1080 color:#314659 1081 } 1082 .commentform #btn_comment_submit { 1083 width:auto; 1084 height:auto; 1085 border-width:0; 1086 cursor:pointer; 1087 color:#fff; 1088 background-color:#2D8CF0; 1089 border-color:#2D8CF0; 1090 font-weight:300; 1091 user-select:none; 1092 padding:5px 20px; 1093 font-size:12px; 1094 border-radius:5px; 1095 outline:0; 1096 transition:all .3s 1097 } 1098 .commentform #btn_comment_submit:hover { 1099 opacity:.7 1100 } 1101 .commentform .comment_my_posted>img { 1102 display:none 1103 } 1104 .commentform .comment_my_posted>a b { 1105 font-size:16px; 1106 font-weight:300 1107 } 1108 .commentform .bq_post_comment { 1109 margin-top:5px; 1110 font-size:13px; 1111 display:block; 1112 color:#314659; 1113 background-color:rgba(193,193,193,.2); 1114 border:none; 1115 border-radius:3px 1116 } 1117 .github-corner:hover .octo-arm { 1118 animation:octocat-wave 560ms ease-in-out 1119 } 1120 @keyframes octocat-wave { 1121 0%,100% { 1122 transform:rotate(0) 1123 } 1124 20%,60% { 1125 transform:rotate(-25deg) 1126 } 1127 40%,80% { 1128 transform:rotate(10deg) 1129 } 1130 }::-webkit-scrollbar { 1131 width:3px; 1132 height:3px 1133 } 1134 ::-webkit-scrollbar-thumb { 1135 border-radius:1px; 1136 box-shadow:inset 0 0 5px #314659; 1137 background:#314659 1138 } 1139 ::-webkit-scrollbar-track { 1140 background:0 0; 1141 border-radius:1px 1142 } 1143 ::-moz-selection,::selection { 1144 color:#2D8CF0 1145 } 1146 @keyframes fadeIn { 1147 0% { 1148 opacity:0 1149 } 1150 100% { 1151 opacity:1 1152 } 1153 }@media screen and (min-width:768px) and (max-width:980px) { 1154 #blog-comments-placeholder,#comment_form { 1155 padding:10px; 1156 margin-left:0 1157 } 1158 }@media only screen and (max-width:767px) { 1159 #home { 1160 font-size:12px!important 1161 } 1162 #mainContent .forFlow { 1163 padding-top:15px 1164 } 1165 #sideBar,.esa-catalog,.postDesc { 1166 display:none 1167 } 1168 .postBody { 1169 padding:0!important 1170 } 1171 #main { 1172 margin-top:60px; 1173 padding:0 15px!important 1174 } 1175 #topics .postTitle { 1176 padding-left:0!important; 1177 padding-top:10px 1178 } 1179 #cnblogs_post_body table { 1180 display:table!important 1181 } 1182 #cnblogs_post_body img { 1183 width:100%; 1184 box-shadow:0 0 10px #c4c4c4; 1185 max-width:none!important 1186 } 1187 #comment_nav,#commentbox_main { 1188 margin:0 1189 } 1190 #comment_form { 1191 padding:5px; 1192 margin-left:0 1193 } 1194 .esa-mobile-menu { 1195 display:block 1196 } 1197 .forFlow { 1198 margin-right:0; 1199 margin-left:0!important 1200 } 1201 #header { 1202 width:auto 1203 } 1204 #header #navigator { 1205 display:none; 1206 width:100%; 1207 margin-top:60px 1208 } 1209 #navList { 1210 width:inherit 1211 } 1212 #navList li { 1213 float:none 1214 } 1215 #navList li #blog_nav_tags { 1216 display:block!important 1217 } 1218 #navList a:active,#navList a:link,#navList a:visited { 1219 width:100%; 1220 background-color:#2c3e50; 1221 color:#fff!important; 1222 padding:15px 0 1223 } 1224 #navList a:hover { 1225 color:#2D8CF0; 1226 background-color:#2c3e50!important 1227 } 1228 .feedbackItem .feedbackManage { 1229 width:auto 1230 } 1231 .github-corner { 1232 display:none 1233 } 1234 }@media only screen and (max-width:410px) { 1235 #div_digg { 1236 display:grid; 1237 width:100% 1238 } 1239 #div_digg .buryit,#div_digg .diggit,#div_digg .favorite { 1240 margin:5px 0 1241 } 1242 }[data-tips] { 1243 overflow:hidden 1244 } 1245 [data-tips]:hover { 1246 overflow:visible 1247 } 1248 [data-tips]::after,[data-tips]::before { 1249 position:absolute; 1250 transition:all .3s; 1251 transform:translate3d(-50%,0,0); 1252 opacity:0; 1253 left:37px; 1254 z-index:10 1255 } 1256 [data-tips]::before { 1257 content:attr(data-tips); 1258 border-radius:6px; 1259 background-color:rgba(100,100,100,.8); 1260 color:#fff; 1261 height:24px; 1262 line-height:24px; 1263 padding:0 6px; 1264 font-size:12px; 1265 white-space:nowrap; 1266 top:-24px; 1267 left:50% 1268 } 1269 [data-tips]::after { 1270 content:""; 1271 border:5px solid #333; 1272 border-color:rgba(100,100,100,.8) transparent transparent transparent; 1273 top:0; 1274 left:50% 1275 } 1276 [data-tips]:hover::after,[data-tips]:hover::before { 1277 opacity:1 1278 } 1279 [data-tips]:hover::after,[data-tips]:hover::before { 1280 transform:translate3d(-50%,-7px,0) 1281 } 1282 .esa-sponsor { 1283 position:relative; 1284 width:100%; 1285 margin-top:70px; 1286 height:160px 1287 } 1288 .esa-sponsor .posa { 1289 position:absolute 1290 } 1291 .esa-sponsor .tr3 { 1292 transition:all .3s 1293 } 1294 .esa-sponsor .blur { 1295 -webkit-filter:blur(3px); 1296 filter:blur(3px) 1297 } 1298 .esa-sponsor .text { 1299 position:absolute; 1300 left:calc(50% - 120px); 1301 top:calc(50% - 60px); 1302 font-size:12px; 1303 width:70px; 1304 height:70px; 1305 line-height:70px; 1306 color:#fff; 1307 background:#ffd886 url(http://images.cnblogs.com/cnblogs_com/esofar/1504962/o_like.png) no-repeat center 10px; 1308 background-size:20px; 1309 border-radius:35px; 1310 text-align:center; 1311 z-index:-1; 1312 transform:rotatez(-15deg) 1313 } 1314 .esa-sponsor .github { 1315 position:absolute; 1316 left:calc(50% + 135px); 1317 top:calc(50% - 30px); 1318 width:24px; 1319 height:24px; 1320 background:no-repeat center center url(http://images.cnblogs.com/cnblogs_com/esofar/1504962/o_github.png); 1321 background-size:contain; 1322 opacity:.3; 1323 transform:rotatez(15deg) 1324 } 1325 .esa-sponsor .box { 1326 left:calc(50% - 150px); 1327 top:calc(50% - 15px); 1328 background-color:#fff; 1329 border:1px solid #ddd; 1330 border-radius:6px; 1331 width:299px; 1332 height:28px; 1333 float:left; 1334 z-index:1; 1335 margin-left:0 1336 } 1337 .esa-sponsor .box li { 1338 width:99px; 1339 float:left; 1340 margin:0!important; 1341 text-align:center; 1342 border-left:1px solid #ddd; 1343 background:no-repeat center center; 1344 background-color:rgba(204,217,220,.1); 1345 background-size:45px; 1346 transition:all .3s; 1347 cursor:pointer; 1348 overflow:hidden; 1349 line-height:600px; 1350 height:28px; 1351 -webkit-filter:grayscale(1); 1352 filter:grayscale(1); 1353 opacity:.5; 1354 list-style:none; 1355 list-style-type:none; 1356 margin:0; 1357 padding:0 1358 } 1359 .esa-sponsor .box li:hover { 1360 background-color:rgba(204,217,220,.3); 1361 -webkit-filter:grayscale(0); 1362 filter:grayscale(0); 1363 opacity:1 1364 } 1365 .esa-sponsor .box li:first-child { 1366 border-width:0 1367 } 1368 .esa-sponsor .box li a { 1369 display:block 1370 } 1371 .esa-sponsor .box .paypal { 1372 background-image:url(http://images.cnblogs.com/cnblogs_com/esofar/1504962/o_paypal.png) 1373 } 1374 .esa-sponsor .box .alipay { 1375 background-image:url(http://images.cnblogs.com/cnblogs_com/esofar/1504962/o_alipay.png) 1376 } 1377 .esa-sponsor .box .wechat { 1378 background-image:url(http://images.cnblogs.com/cnblogs_com/esofar/1504962/o_wechat.png) 1379 } 1380 .esa-sponsor #QRBox { 1381 top:0; 1382 left:0; 1383 z-index:1; 1384 display:none; 1385 perspective:400px; 1386 width:100%; 1387 height:100% 1388 } 1389 .esa-sponsor #QRBox #MainBox { 1390 cursor:pointer; 1391 position:absolute; 1392 text-align:center; 1393 width:200px; 1394 height:200px; 1395 left:calc(50% - 100px); 1396 top:calc(50% - 100px); 1397 background:#fff no-repeat center center; 1398 background-size:190px; 1399 border-radius:6px; 1400 box-shadow:0 2px 7px rgba(0,0,0,.3); 1401 opacity:0; 1402 transition:all 1s ease-in-out; 1403 transform-style:preserve-3d; 1404 transform-origin:center center; 1405 overflow:hidden 1406 } 1407 .esa-sponsor #MainBox.showQR { 1408 opacity:1; 1409 animation-name:showQR; 1410 animation-duration:3s; 1411 animation-timing-function:ease-in-out; 1412 animation-iteration-count:1; 1413 animation-fill-mode:forwards; 1414 -webkit-animation:showQR 3s ease-in-out 0s 1 normal forwards 1415 } 1416 @keyframes showQR { 1417 from { 1418 transform:rotateX(90deg) 1419 } 1420 8% { 1421 opacity:1; 1422 transform:rotateX(-60deg) 1423 } 1424 18% { 1425 opacity:1; 1426 transform:rotateX(40deg) 1427 } 1428 34% { 1429 opacity:1; 1430 transform:rotateX(-28deg) 1431 } 1432 44% { 1433 opacity:1; 1434 transform:rotateX(18deg) 1435 } 1436 58% { 1437 opacity:1; 1438 transform:rotateX(-12deg) 1439 } 1440 72% { 1441 opacity:1; 1442 transform:rotateX(9deg) 1443 } 1444 88% { 1445 opacity:1; 1446 transform:rotateX(-5deg) 1447 } 1448 96% { 1449 opacity:1; 1450 transform:rotateX(2deg) 1451 } 1452 to { 1453 opacity:1 1454 } 1455 }.esa-sponsor #MainBox.hideQR { 1456 opacity:1; 1457 animation-name:hideQR; 1458 animation-duration:.5s; 1459 animation-timing-function:ease-in-out; 1460 animation-iteration-count:1; 1461 animation-fill-mode:forwards; 1462 -webkit-animation:hideQR .5s ease-in-out 0s 1 normal forwards 1463 } 1464 @keyframes hideQR { 1465 20%,50% { 1466 transform:scale(1.08,1.08); 1467 opacity:1 1468 } 1469 to { 1470 opacity:0; 1471 transform:rotateZ(40deg) scale(.6,.6) 1472 } 1473 }::-moz-selection,::selection { 1474 background-color:#2D8CF0; 1475 color:#e1e1e1 1476 } 1477 .cnblogs-markdown .hljs { 1478 display:block; 1479 color:#333; 1480 overflow-x:auto; 1481 background:#F2F4F5!important; 1482 border:none!important; 1483 font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace!important; 1484 padding:1em!important; 1485 font-size:14px!important 1486 } 1487 .hljs-comment,.hljs-meta { 1488 color:#969896 1489 } 1490 .hljs-emphasis,.hljs-quote,.hljs-string,.hljs-strong,.hljs-template-variable,.hljs-variable { 1491 color:#df5000 1492 } 1493 .hljs-keyword,.hljs-selector-tag,.hljs-type { 1494 color:#a71d5d 1495 } 1496 .hljs-attribute,.hljs-bullet,.hljs-literal,.hljs-symbol { 1497 color:#0086b3 1498 } 1499 .hljs-name,.hljs-section { 1500 color:#63a35c 1501 } 1502 .hljs-tag { 1503 color:#333 1504 } 1505 .hljs-attr,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo,.hljs-title { 1506 color:#795da3 1507 } 1508 .hljs-addition { 1509 color:#55a532; 1510 background-color:#eaffea 1511 } 1512 .hljs-deletion { 1513 color:#bd2c00; 1514 background-color:#ffecec 1515 } 1516 .hljs-link { 1517 text-decoration:underline 1518 }
