/*可配置颜色*/
:root {
  --primary-color:#027AFF;
  --body-bg-color: #f5f7f9;
  --content-bg-color: #fff;
  --text-color: rgba(0,0,0,0.65);
  --link-color: #555;
  --code-bg-color:#f0f0f0;
}
.header { margin: 0 auto; position: relative; width: calc(100% - 20px); } body { margin: 0; background:var(--body-bg-color); color: var(--text-color); line-height: 2; } a { color: var(--link-color); text-decoration:none; } #main { align-items: flex-start; display: flex; justify-content: space-between; flex-direction: row-reverse; margin: 0 auto; width: calc(100% - 20px); } #page_begin_html { margin: 0 auto; position: relative; } .header-inner { background: #fff; border-radius: initial; box-shadow: initial; overflow: hidden; padding: 0; position: absolute; top: 0; width: 240px; margin: 0 auto; } .site-brand-container { background: var(--primary-color); display: flex; flex-shrink: 0; padding: 0 10px; } .site-meta { padding: 20px 0; flex-grow: 1; text-align: center; } .brand { color: #fff; display: inline-block; padding: 0 40px; position: relative; } .site-title { font-family: 'Times New Roman',sans-serif; font-size: 1.375em; font-weight: 400; margin: 0; line-height: 1.5; } .menu { margin-top: 20px; padding-left: 0; } .menu .menu-item { display: block; margin: 0; list-style: none; } .search-wrap { display: inline-block; background-color: var(--code-bg-color); border-radius: 20px; padding: 0 10px; } .input_my_zzk { width: 140px; vertical-align: middle; background-color: var(--code-bg-color); height: 30px; border: none; outline: none } .site-nav-right, .site-nav-toggle { display: none; } .site-nav-right .toggle, .site-nav-toggle .toggle { padding: 10px; width: 22px; color: #fff; } .site-nav-right .toggle a .fa{ color: #fff; } .toggle { line-height: 0; } .site-nav-right .toggle .toggle-line, .site-nav-toggle .toggle .toggle-line { background: #fff; border-radius: 1px; } .toggle.toggle-close .toggle-line-first { transform: rotate(-45deg); top: 5px; } .toggle.toggle-close .toggle-line-middle { opacity: 0; } .toggle.toggle-close .toggle-line-last { transform: rotate(45deg); top: -5px; } .toggle .toggle-line { display: inline-block; height: 2px; left: 0; position: relative; top: 0; transition: all .4s; vertical-align: top; width: 100%; } .toggle .toggle-line:not(:first-child) { margin-top: 3px; } .site-nav.site-nav-on { display: block; } .site-nav .menu-item-active { border-right: 3px solid var(--primary-color); background: var(--body-bg-color); } .site-nav .menu-item .menu-item-inner { color: #555; font-size: 16px; padding: 5px 20px; position: relative; text-align: left; display: block; line-height: 2; } .site-nav .menu-item .menu-item-inner .fa { color: #69c0ff; margin-right: 8px; } #sideBar { margin-top: 300px; position: static; width: 240px; background: #fff; margin-right: 12px; /*?*/ } .affix { position: fixed; top: 0; } #post-toc-wrap { background: var(--content-bg-color); width: 240px; } #post-toc-wrap ol{ font-size: 14px; line-height: 1.8; list-style: none;padding: 0 2px 5px 10px; } #author_profile_detail { margin-left: 10px; font-size: 14px; color: var(--link-color); } .author_avatar, .site-author-image { border-radius: 50%; } .site-author-image { border: 1px solid #eee; display: block; margin: 20px auto 0; max-width: 80px; padding: 2px; } .site-author-name { color: var(--text-color); font-weight: 600; margin: 10px 0 0; text-align: center; } .site-state { margin: 10px auto; text-align: center; color: var(--text-color); } #mainContent { background: var(--content-bg-color); box-sizing: border-box; padding: 40px; width: calc(100% - 252px); } .forFlow { padding-top: 20px; } .day { margin-bottom: 60px; } .dayTitle { display: none; } .postTitle { font-size: 27px; font-weight: 400; line-height: 1.5; text-align: center; word-wrap: break-word; color: var(--link-color); } .postCon { font-family: 'Noto Serif SC','Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif; word-wrap: break-word; margin: .5em 0; } .c_b_p_desc_readmore { color: var(--primary-color); } .c_b_p_desc { line-height: 2; } .postDesc { text-align: right; font-style: italic; font-size: 14px; color: #bbbbbb; } #cnblogs_post_description { font-family: 'Noto Serif SC','Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif; color: var(--text-color); } #post-description-meta { line-height: 4; text-align: center; font-size: 18.667px; font-weight: 500; color: rgba(0,0,0,.85); font-family: SimHei,'Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif; } #post-keyword { color: var(--text-color); font-family: 'Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif; } #post-keyword a { font-family: 'Noto Serif SC','Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif; } #cnblogs_post_body p{ font-family: 'Noto Serif SC','Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif; } #cnblogs_post_body h3 { padding-top: 10px; font-size: 18.667px; font-weight: 500; color: rgba(0,0,0,.85); font-family: SimHei,'Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif; } #cnblogs_post_body h4,#cnblogs_post_body h5,#cnblogs_post_body h6 { padding-top: 10px; font-size: 16px; font-weight: 500; color: rgba(0,0,0,.85); font-family: SimHei,'Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif; } #cnblogs_post_body h2 { padding-top: 10px; text-align: center; font-size: 21.333px; margin: 1em auto; font-weight: 500; line-height: 2em; color: rgba(0,0,0,.85); } .postBody blockquote { border:none; border-left: 4px solid #ddd; color: #666; margin: 0; padding: 0 15px; } .postBody p > a { text-decoration: underline; } #cnblogs_post_body table { border-collapse: collapse; border-spacing: 0; font-size: .875em; margin: 0 auto; max-width: 100%; width: auto; border:none; border-top: 2px solid #222; border-bottom: 2px solid #222; } #cnblogs_post_body table thead { border-bottom: 1px solid #999; } #cnblogs_post_body table tr { overflow-x: auto; overflow-y: hidden; text-align: justify; word-break: keep-all; white-space: nowrap; } #cnblogs_post_body table td, #cnblogs_post_body table th { padding: 4px 8px; width: 150px; border: none; } .cnblogs-markdown code { background-color: var(--code-bg-color) !important; border: none !important; } .cnblogs-markdown .hljs { font-size: 14px !important; padding: 10px !important; } #cnblogs_post_body img { display: block; margin: 0 auto; } .footnotes-meta { margin: 2em 0 0 0; } .github-corner svg { border: 0; color: #fff; fill: var(--primary-color); position: absolute; right: 0; top: 0; z-index: 1000; } .github-corner:hover .octo-arm { animation: octocat-wave 560ms ease-in-out; } @keyframes octocat-wave { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(-25deg); } 40%, 80% { transform: rotate(10deg); } } .comment_textarea{ padding: 15px; border-radius: 10px; outline: 0; resize: none; overflow: hidden; width: 100%; } #footer { color: #999; font-size: .875em; line-height: 28px; padding-left: 260px; box-sizing: border-box; margin: 0 auto; text-align: center; width: calc(100% - 20px); } #header,.catListTitle,#profile_block, #under_post_news, #ad_t2, .c_ad_block, #under_post_kb, #comment_nav { display: none; } /* Responsive design*/ @media (min-width: 1600px) { #main,.header { width: 73%; } } @media (min-width: 1200px) { #main, .header { width: 1160px; } .header-inner { width: 240px; } } @media (max-width: 991px) { .header, .header-inner, .main-inner, #footer { width: auto; } .header-inner { border-radius: initial; position: relative; } #sideBar, #post-toc-wrap, .github-corner { display: none; } #mainContent { border-radius: initial; padding: 20px; width: 100%; } .site-brand-container { box-shadow: 0 0 16px rgba(50,132,191,.9); } #footer { padding-left: 0; padding-right: 0; } } @media (max-width: 991px) and (min-width: 768px) { .site-nav-right, .site-nav-toggle { display: flex; flex-direction: column; justify-content: center; } .site-nav { display: none; } } @media (max-width: 767px) { .site-nav { clear: both; display: none; } .site-nav-right, .site-nav-toggle { display:flex; flex-direction:column; justify-content:center } }