html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } :root { font-size: 15px; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 500; line-height: 1.25; color: var(--title-color); } h2 { font-size: 1.375rem; margin-bottom: 0.5rem; margin-top: 1.15rem; } h3 { font-size: 1.2rem; margin-bottom: 0.666666666666667rem; margin-top: 1.333333333333333rem; } h4 { font-size: 1.125rem; margin-bottom: 0.8rem; } h5 { font-size: 1rem; margin-bottom: 0.888rem; } h6 { font-size: 0.875rem; color: var(--text-strong-color); } ul { list-style: none; } button, input, select, textarea { margin: 0; } *, *::before, *::after { box-sizing: inherit; } img { border-style: none; background-color: transparent; } img, video { height: auto; max-width: 100%; } iframe { border: 0; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } td:not([align]), th:not([align]) { text-align: left; } a { cursor: pointer; color: var(--link-color); text-decoration: none; } .post-content a:not([data-nolink]) { font-weight: 500; cursor: pointer; color: var(--text-strong-color); text-decoration: none; border-bottom: 1px solid var(--post-link-color); transition: border-bottom 0.1s; } .post-content a:not([data-nolink]):hover { border-bottom: 2px solid var(--post-link-color); } div { display: block; } * { box-sizing: border-box; } html, body { height: 100vh; font-size: 15px; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif; color: var(--text-color); background-color: var(--body-background-color); box-sizing: border-box; overflow-wrap: break-word; } ol ol, ul ol, ul ul { margin-top: 0; margin-bottom: 0; } ol ol, ul ol { list-style-type: lower-roman; } ol ol ol, ol ul ol, ul ol ol, ul ul ol { list-style-type: lower-alpha; } ol li, ul li { margin-top: 0.5rem; margin-bottom: 0.5rem; } li>p { margin-top: 1rem; } li+li { margin-top: 0.25rem; } code, kbd { font-size: 0.9rem; color: var(--code-color); background-color: var(--code-background-color); padding: 0.25rem 0.4rem; overflow-wrap: break-word; word-wrap: break-word; border-radius: 0.25rem; vertical-align: 0.1rem; } code[class*=language-] { margin: 0; padding: 0; border-radius: 0; vertical-align: 0; } pre[class*=language-] { border-radius: 0.3rem !important; } table { display: block; overflow: auto; border-spacing: 0; border-collapse: collapse; } tr { background-color: var(--widget-background-color); } td, th { border: 0.08rem solid var(--border-color); padding: 0.5rem 0.75rem; } th { font-weight: 700; color: var(--title-color); } tbody tr:nth-child(odd) { background-color: var(--tbody-background-color); } pre { overflow: auto; overflow-wrap: normal; padding: 1rem; border-radius: 0.3rem !important; } ::-webkit-scrollbar { background-color: transparent; width: 2px; height: 3px; background-clip: padding-box; } ::-webkit-scrollbar-thumb { background-color: #e6e8ee; border-radius: 0.3rem; } @media (max-width: 742px) { #dark { display: none; } #search { display: none; } } :root { --text-color: #3c4858; --text-strong-color: #2f3d4e; --text-light-color: #60656a; --text-white-color: #fff; --divider-color: #e6e8ee; --title-color: #475b6d; --link-color: #3273dc; --post-link-color: #d71a1b; --link-hover-color: #6596e5; --info-text-color: #60656a; --widget-background-color: #fff; --body-background-color: #f2f5f8; --badge-background-color: #edeff3; --badge-hover-background-color: #adb7d0; --border-color: #e1e4e9; --pre-color: #2d2d2d; --tbody-background-color: #f4f5f7; --code-color: #50687c; --code-background-color: #e9eaf0; --blue-tag-color: #3273dc; --blockquote-color: #f9f8f7; --note-primary-border-color: #428bca; --note-primary-color: #daf3fc; --note-success-border-color: #5cb85c; --note-success-color: #ebfbe2; --note-info-border-color: #5bc0de; --note-info-color: #dffdfb; --note-warning-border-color: #f0ad30; --note-warning-color: #fef5d5; --note-danger-border-color: #d9534f; --note-danger-color: #fde8dc; --highlight-comment-color: #999; --highlight-tag-color: #e2777a; --highlight-attr-color: #6196cc; --highlight-literal-color: #f08d49; --highlight-keyword-color: #cc99cd; --highlight-string-color: #7ec699; --highlight-builtin-color: #67cdcc; --base-shadow-color: 0deg, 0%, 72%; --around-shadow-style: 0.3px 0.2px 0.3px rgba(184,184,184,0.4), 0.7px 0.5px 0.8px -1.3px rgba(184,184,184,0.32), 1.9px 1.4px 2.1px -2.7px rgba(184,184,184,0.25), 5.2px 3.8px 5.8px -4px rgba(184,184,184,0.17); --tag-shadow-style: 0 2px 4px 0 rgba(0,0,0,0.2); --image-filter-style: none; } @media (prefers-color-scheme: dark) { :root:not([data-user-color-scheme]) { --text-color: #c4c6c9; --text-strong-color: #fff; --text-light-color: #909faf; --text-white-color: #fff; --divider-color: #a09c9c; --title-color: #c4c6c9; --link-color: #74a9ff; --link-hover-color: #6596e5; --post-link-color: #d71a1b; --info-text-color: #909faf; --widget-background-color: #1c1c1e; --body-background-color: #0d0d0d; --badge-background-color: #485061; --badge-hover-background-color: #818CA0; --border-color: #435266; --pre-color: #3c495b; --tbody-background-color: #3c495b; --code-color: #c3c7cb; --code-background-color: #3e4b5e; --blue-tag-color: $dark-blue-tag-color; --blockquote-color: #181c27; --note-primary-border-color: #0c2760; --note-primary-color: #456d92; --note-success-border-color: #11582a; --note-success-color: #549148; --note-info-border-color: #113c6a; --note-info-color: #2a6279; --note-warning-border-color: #733f09; --note-warning-color: #937c43; --note-danger-border-color: #680f2a; --note-danger-color: #925346; --around-shadow-style: none; --tag-shadow-style: none; --image-filter-style: brightness(0.6) contrast(1.2); } } [data-user-color-scheme='dark'] { --text-color: #c4c6c9; --text-strong-color: #fff; --text-light-color: #909faf; --text-white-color: #fff; --divider-color: #a09c9c; --title-color: #c4c6c9; --link-color: #74a9ff; --link-hover-color: #6596e5; --post-link-color: #d71a1b; --info-text-color: #909faf; --widget-background-color: #1c1c1e; --body-background-color: #0d0d0d; --badge-background-color: #485061; --badge-hover-background-color: #818CA0; --border-color: #435266; --pre-color: #3c495b; --tbody-background-color: #3c495b; --code-color: #c3c7cb; --code-background-color: #3e4b5e; --blue-tag-color: $dark-blue-tag-color; --blockquote-color: #181c27; --note-primary-border-color: #0c2760; --note-primary-color: #456d92; --note-success-border-color: #11582a; --note-success-color: #549148; --note-info-border-color: #113c6a; --note-info-color: #2a6279; --note-warning-border-color: #733f09; --note-warning-color: #937c43; --note-danger-border-color: #680f2a; --note-danger-color: #925346; --around-shadow-style: none; --tag-shadow-style: none; --image-filter-style: brightness(0.6) contrast(1.2); } code, pre { font-family: 'Fira Code', 'Consolas', monospace !important; } code[class*='hljs'], pre[class*='highlight'], code[class*='language'] { color: #ccc; background: none; font-size: 1rem !important; padding: 0; margin-left: 0; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; line-height: 1.5; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; overflow-x: auto; } pre[class*='highlight'] { padding: 1em; margin: 0.5em 0; border-radius: 0.3rem; overflow: auto; white-space: pre; overflow-wrap: normal; } pre[class*='highlight']::-webkit-scrollbar { display: none; } :not(pre) > code[class*='hljs'], pre[class*='highlight'] { background: var(--pre-color); } :not(pre) > code[class*='hljs'] { padding: 0.1em; border-radius: 0.3em; white-space: normal; } .hljs-comment, .hljs-block-comment, .hljs-prolog, .hljs-doctype, .hljs-cdata { color: var(--highlight-comment-color); } .hljs-tag { color: var(--highlight-tag-color); } .hljs-title, .hljs-attr { color: var(--highlight-attr-color); } .hljs-boolean, .hljs-number, .hljs-literal { color: var(--highlight-literal-color); } .hljs-selector, .hljs-important, .hljs-atrule, .hljs-keyword { color: var(--highlight-keyword-color); } .hljs-string, .hljs-char, .hljs-attr-value, .hljs-regex, .hljs-variable { color: var(--highlight-string-color); } .hljs-operator, .hljs-entity, .hljs-url, .hljs-built_in { color: var(--highlight-builtin-color); } .archive-card { width: 100%; } .archive-card-header { margin-bottom: 6px; font-size: 15px; } .archive-card-header .iconfont { font-size: 15px; } .archive-card-list-item { display: block; color: var(--text-color); font-size: 1rem; padding: 6px 8px; transition: background-color 0.4s; border-radius: 0.3rem; } .archive-card-list-item:hover { cursor: pointer; background-color: var(--badge-background-color); } .archive-card-list-item + .archive-card-list-item { margin-top: 3px; } .archive-card-list-item-badge { float: right; margin-right: 10px; font-size: 0.8rem; background-color: var(--badge-background-color); transition: all 0.4s; padding: 2px 7px; text-align: center; border-radius: 0.3rem; } @media (max-width: 862px) { .archive-widget { display: none; } } .card-author { margin-bottom: 1.5rem; display: flex; flex-direction: column; align-items: center; } .author-img { transition: all 0.5s; } .author-name { margin-top: 0.7rem; font-size: 1.5rem; } .author-description { margin-top: 0.5rem; font-size: 1rem; } .author-message { margin-top: 1.2rem; width: 100%; display: flex; justify-content: center; flex-direction: row; } .author-message > a { padding: 0 16px; color: var(--text-color); display: flex; flex-direction: column; align-items: center; } .author-message > a > span { font-size: 1.3rem; } .author-message > a > span + span { font-size: 0.9rem; } .author-card-society { display: flex; flex-direction: row; justify-content: center; align-items: center; margin-top: 1rem; } .author-card-society .author-card-society-icon { padding: 0 7px; } .author-card-society .author-card-society-icon a { color: var(--text-color); } .author-card-society .author-card-society-icon a:hover { color: var(--link-hover-color); } .author-card-society .author-card-society-icon a .iconfont { font-size: 1.3rem; } @media (max-width: 862px) { .card-author { display: none; margin-bottom: 0.8rem; } } .basebutton { display: flex; cursor: pointer; position: fixed; width: 44px; height: 44px; border-radius: 50%; box-shadow: var(--around-shadow-style); justify-content: center; align-items: center; background-color: var(--widget-background-color); transition: all 0.3s; } #scrollbutton { transform: rotate(90deg); display: flex; opacity: 0; bottom: 32px; right: 32px; } #scrollbutton .button-icon { font-size: 1rem; font-weight: bold; } #menubutton { display: flex; opacity: 0; bottom: 32px; right: 32px; } #menubutton .button-icon { font-size: 1.15rem; font-weight: bold; } #popbutton { z-index: 10; bottom: 32px; right: 32px; } #popbutton .button-icon { font-size: 0.9rem; font-weight: bold; } #darkbutton { display: flex; opacity: 0; bottom: 32px; right: 32px; } #darkbutton .button-icon { font-size: 1rem; } #searchbutton { display: flex; opacity: 0; bottom: 32px; right: 32px; } #searchbutton .button-icon { font-size: 1rem; } .postbutton { cursor: pointer; background-color: var(--link-color); border-radius: 4px; font-size: 1rem; padding: 4px 10px; border: none; color: #fff; } .postbutton:hover { background-color: var(--link-hover-color); } .postbutton:focus { outline: none; } .card { border-radius: .5rem; background-color: var(--widget-background-color); max-width: 100%; box-shadow: var(--around-shadow-style); transition: background-color 0.3s; } .image-wrapper+.card { border-radius: 0 0 .5rem .5rem; } .card +.card, .card +.archive-timeline { margin-top: 1.5rem; } .card-content, .card-author { background-color: var(--widget-background-color); transition: background-color 0.3s; padding: 1.5rem; } .post-title, .card-excerpt { margin-bottom: 0.8rem; } .post-title { font-size: 1.4rem; font-weight: 400; padding-bottom: 0.4rem; color: var(--title-color); line-height: 1.125; } .card-post-footer { display: flex; justify-content: space-between; padding: 0; } .card-post-footer a:hover { color: var(--link-hover-color); } .post-meta, .post-meta-link { color: var(--text-light-color); padding: 0 2px; } .dot::after { content: 'ยท'; } @media (max-width: 862px) { .card +.card { margin-top: 0.8rem; } } .categories-card { width: 100%; } .categories-header { margin-bottom: 6px; font-size: 15px; } .categories-header .iconfont { font-size: 15px; } .categories-list-item { color: var(--text-color); padding: 6px 8px; font-size: 1rem; border-radius: .5rem; transition: background-color 0.4s ease-in-out; } .categories-list-item:hover { cursor: pointer; background-color: var(--badge-background-color); } .categories-list-item + .categories-list-item { margin-top: 3px; } .categories-list-item-badge { float: right; margin-right: 10px; font-size: 0.8rem; background-color: var(--badge-background-color); padding: 2px 7px; text-align: center; border-radius: .2rem; } @media (max-width: 862px) { .categories-widget { display: none; } } .image-wrapper { overflow: hidden; display: block; width: 100%; height: 0; position: relative; background-color: var(--widget-background-color); border-radius: 0.5rem 0.5rem 0 0; } .image-wrapper .image { -o-object-fit: cover; object-fit: cover; width: 100%; -webkit-filter: var(--image-filter-style); filter: var(--image-filter-style); position: absolute; transition: -webkit-filter 0.4s ease 0s; transition: filter 0.4s ease 0s; transition: filter 0.4s ease 0s, -webkit-filter 0.4s ease 0s; } .image-wrapper .image:not(.loaded) { -webkit-filter: blur(5px) var(--image-filter-style); filter: blur(5px) var(--image-filter-style); } .post-image { margin: auto; -webkit-filter: var(--image-filter-style); filter: var(--image-filter-style); transition: -webkit-filter 0.4s ease 0s; transition: filter 0.4s ease 0s; transition: filter 0.4s ease 0s, -webkit-filter 0.4s ease 0s; } .post-image:not(.loaded) { -webkit-filter: blur(5px); filter: blur(5px); } @media screen and (min-width: 768px) { .image-wrapper { padding-bottom: 300px; } .image-wrapper .image { height: 300px; } } @media screen and (max-width: 767px) { .image-wrapper { height: 16.48rem; } .image-wrapper .image { height: 16.48rem; } } .columns, .left-column, .main-column, .right-column { display: block; padding: 0.5rem 0.25rem; } .left-column .sticky-tablet > div { margin-bottom: 0.8rem; } .main-column { content-visibility: auto; } .right-column, .left-column { display: none; } @media screen and (min-width: 862px) { .columns { display: flex; } .left-column, .right-column { width: 33.33333333333333%; } .main-column { width: 66.66666666666666%; } } @media screen and (min-width: 1280px) { .left-column .display-when-two-columns, .widescreen-archive { display: none; } .main-column { width: 52%; } .left-column, .right-column { width: 24%; } .right-column, .left-column { display: block; } } @media screen and (min-width: 1280px) { .sticky-widescreen { position: -webkit-sticky; position: sticky; top: 1.5rem; } } @media screen and (min-width: 862px) { .columns, .left-column, .main-column, .right-column { padding: 0.75rem; } .sticky-tablet { position: -webkit-sticky; position: sticky; top: 1.5rem; } .left-column .sticky-tablet > div { margin-bottom: 1.5rem; } } .container, .footer-container, .navbar-container { flex-grow: 1; width: 100%; margin: 0 auto; } @media screen and (min-width: 1088px) { .footer-container { max-width: 992px; } } @media screen and (min-width: 1280px) { .footer-container { max-width: 1184px; } } .footer { font-size: 0.9rem; background-color: var(--widget-background-color); transition: background-color 0.3s; width: 100%; box-shadow: var(--around-shadow-style); padding: 1.5rem 1rem 1.5rem; bottom: 0; } .footer-container { color: var(--info-text-color); display: block; justify-content: space-between; } .footer-container a { color: var(--text-strong-color); } .footer-container a:hover { color: var(--link-hover-color); } .footer-dsc { margin-bottom: 6px; display: flex; justify-content: center; align-items: center; } .BbeiAn-info { display: flex; justify-content: center; } .friend-card { overflow: hidden; } .friend-links { display: flex; flex-wrap: wrap; } .friend-item { width: 33.33333333333333%; padding: 6px 12px; margin: 8px 0; border-radius: .5rem; } .friend-item:hover { background-color: var(--badge-background-color); transition: background-color 0.3s; transition-duration: 0.3s; transition-timing-function: ease-in-out; } .friend-item-card { display: block; width: 100%; height: 100%; } .friend-item-content { display: flex; align-items: center; } .friend-text { width: 56%; display: flex; flex-direction: column; } .friend-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-strong-color); font-size: 1.15rem; max-height: 24.8px; } .friend-dsc { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--info-text-color); font-size: 0.9rem; max-height: 19.2px; } .friend-avatar { height: 44px; width: 44px; margin-right: 14px; } @media (max-width: 968px) { .friend-item { width: 50%; } } @media (max-width: 742px) { .friend-item { width: 100%; } } .navbar { background-color: var(--widget-background-color); transition: background-color 0.3s; height: 3.5rem; box-shadow: var(--around-shadow-style); display: flex; align-items: stretch; } .navbar-logo { display: inline-block; margin-left: 96px; } .navbar-logo-main { display: inline-flex; height: 100%; align-items: center; justify-content: space-around; padding: 0.7rem 0.6rem; color: var(--text-color); } .navbar-logo-dsc { font-size: 1.3rem; } .navbar-logo-img { margin-right: 10px; } .navbar-menu { font-size: 1rem; display: flex; align-items: center; } .navbar-menu a { display: inline-flex; height: 100%; align-items: center; color: var(--text-color); cursor: pointer; padding: 0.7rem 0.6rem; } .navbar-menu a:hover { color: var(--link-hover-color); } .navbar-menu-btn { background: none; border: none; display: flex; align-items: center; color: var(--text-color); } .navbar-menu-btn:hover { cursor: pointer; } @media (max-width: 1088px) { .navbar { min-height: 90px; display: block; } .navbar-logo { margin-left: 0; display: block; } .navbar-logo-main { display: flex; justify-content: center; } .navbar-menu { width: 100%; display: flex; margin-right: 0; justify-content: center; } } @media (max-width: 586px) { .navbar-menu { display: flex; justify-content: space-evenly; } } .nav { display: flex; flex-direction: row; margin-top: 1.5rem; } .nav-item-prev, .nav-item-next { display: flex; flex: 50%; } .nav-next-icon { margin-left: 0.7rem; } .nav-prev-icon { margin-right: 0.7rem; } .nav-item-prev { justify-content: flex-start; text-align: left; } .nav-item-next { justify-content: flex-end; text-align: right; } .nav-link { display: flex; flex-direction: row; align-items: center; padding: 0 0.5rem; } .nav-prev-icon, .nav-next-icon { color: var(--text-light-color); width: 0.65rem; } .nav-label { font-size: 0.9rem; font-weight: 500; line-height: 1.6rem; color: var(--text-light-color); } .nav-title { font-size: 1rem; font-weight: 500; line-height: 1.2rem; color: var(--text-color); } .post-show-meta { margin-bottom: 1rem; } .post-content dl + *, .post-content ol + *, .post-content ul + *, .post-content blockquote + *, .post-content h6 + *, .post-content figure + *, .post-content pre + *, .post-content p + *, .post-content table + * { margin-top: 1em; } .post-content p { line-height: 1.8rem; } .post-content blockquote { margin-top: 1rem; padding: 1rem; background-color: var(--blockquote-color); transition: background-color 0.3s; border-left: 0.25rem solid var(--border-color); } .post-content blockquote p { margin-bottom: 0; } .post-content ul { list-style: disc; margin-left: 1.2em; } .post-content ol { list-style-position: outside; margin-left: 1.2em; margin-top: 0; } .post-content ol:not([type]) { list-style-type: decimal; } .post-content h1, .post-content h2 { padding-bottom: 0.35rem; border-bottom: 1px solid var(--border-color); } .katex-block { overflow-x: auto; } mjx-container { overflow-x: auto; overflow-y: hidden; } mjx-container:focus, mjx-container svg:focus { outline: none; } .post-note { margin-top: 1rem; margin-bottom: 1rem; padding: 1rem; border-radius: 0.2rem; border-left-width: 0.25rem; border-left-style: solid; } .post-note p { margin-bottom: 0; } .copyright a { color: var(--text-color); font-weight: bold; } .copyright p + p { margin-top: 8px; } .note-default { background-color: var(--blockquote-color); border-left-color: var(--border-color); transition: background-color 0.3s; } .note-primary { border-left-color: var(--note-primary-border-color); background-color: var(--note-primary-color); transition: background-color 0.3s; } .note-success { border-left-color: var(--note-success-border-color); background-color: var(--note-success-color); transition: background-color 0.3s; } .note-info { border-left-color: var(--note-info-border-color); background-color: var(--note-info-color); transition: background-color 0.3s; } .note-warning { border-left-color: var(--note-warning-border-color); background-color: var(--note-warning-color); transition: background-color 0.3s; } .note-danger { border-left-color: var(--note-danger-border-color); background-color: var(--note-danger-color); transition: background-color 0.3s; } .image-wrapper { overflow: hidden; display: block; width: 100%; height: 0; position: relative; background-color: var(--widget-background-color); border-radius: 0.5rem 0.5rem 0 0; } .image-wrapper .image { -o-object-fit: cover; object-fit: cover; width: 100%; -webkit-filter: var(--image-filter-style); filter: var(--image-filter-style); position: absolute; transition: -webkit-filter 0.4s ease 0s; transition: filter 0.4s ease 0s; transition: filter 0.4s ease 0s, -webkit-filter 0.4s ease 0s; } .image-wrapper .image:not(.loaded) { -webkit-filter: blur(5px) var(--image-filter-style); filter: blur(5px) var(--image-filter-style); } .post-image { margin: auto; -webkit-filter: var(--image-filter-style); filter: var(--image-filter-style); transition: -webkit-filter 0.4s ease 0s; transition: filter 0.4s ease 0s; transition: filter 0.4s ease 0s, -webkit-filter 0.4s ease 0s; } .post-image:not(.loaded) { -webkit-filter: blur(5px); filter: blur(5px); } @media screen and (min-width: 768px) { .image-wrapper { padding-bottom: 300px; } .image-wrapper .image { height: 300px; } } @media screen and (max-width: 767px) { .image-wrapper { height: 16.48rem; } .image-wrapper .image { height: 16.48rem; } } .recent-posts-header { margin-bottom: 16px; font-size: 15px; } .recent-posts-header .iconfont { font-size: 15px; } .recent-posts-item { padding-left: 6px; } .recent-posts-item:last-child .divider { display: none; } .recent-posts-item + .recent-posts-item { margin-top: 10px; } .recent-posts-item-title { font-size: 0.9rem; } .recent-posts-item-content { color: var(--text-color); margin-top: 6px; font-size: 1rem; padding: 6px 0; padding-left: 8px; transition: background-color 0.4s ease-in-out; border-radius: .5rem; } .recent-posts-item-content:hover { cursor: pointer; background-color: var(--badge-background-color); } #search { font-weight: bold; } #search-input { background-color: var(--widget-background-color); margin-top: 12px; z-index: 20; position: fixed; left: 10%; width: 80%; height: 44px; padding: 8px 12px; border-radius: .5rem; border: 1px solid var(--divider-color); color: var(--text-color); font-size: 14px; } #search-input:focus { outline: none; } #search-content { max-height: 800px; overflow: auto; position: fixed; z-index: 20; margin-top: 64px; left: 10%; width: 80%; } #search-content .local-search-empty { color: var(--info-text-color); line-height: 44px; text-align: center; display: block; } #search-content ul { overflow-y: auto; border: 1px solid var(--divider-color); padding: 10px 20px; background: var(--widget-background-color); box-shadow: 1px 2px 4px var(--divider-color); } #search-content ul li { text-align: left; border-bottom: 1px solid var(--divider-color); padding-bottom: 20px; margin-bottom: 20px; line-height: 30px; font-weight: normal; } #search-content ul li:last-child { border-bottom: none; margin-bottom: 0; } #search-content ul li a { margin-top: 20px; font-size: 1rem; } #search-content ul li p { margin-top: 10px; font-size: 14px; max-height: 124px; overflow: hidden; } #search-content ul li .search-keyword { color: var(--note-danger-border-color); font-style: normal; } .section-wrap { display: flex; justify-content: center; padding: 1.3rem 1rem; } .wrapper { min-height: 100%; } @media (max-width: 862px) { .section-wrap { padding: 0.8rem 0.4rem; } } .categories-card { width: 100%; } .tags-header { margin-bottom: 12px; font-size: 15px; } .tags-header .iconfont { font-size: 15px; } .tags-list { overflow: hidden; } .tags-list-item { height: 28px; display: flex; flex-direction: row; align-items: center; color: var(--text-color); float: left; margin: 3px 6px; font-size: 1rem; background-color: var(--badge-background-color); transition: background-color 0.3s; padding: 3px 7px; text-align: center; border-radius: .5rem; } .tags-list-item:hover { cursor: pointer; background-color: var(--badge-hover-background-color); transition: background-color 0.3s; } .tag-page-card { margin-bottom: 24px; } @media (max-width: 862px) { .tags-widget { display: none; } } .toc-card { margin-bottom: 1.5rem; } .toc-header { margin-bottom: 6px; font-size: 15px; } .toc-header .iconfont { font-size: 1.15rem; } .toc { overflow: auto; max-height: calc(100vh - 30rem); padding-right: 1rem; } .toc ol, .toc li { list-style-type: none; } .toc a { color: var(--text-color); display: block; padding: 0.3rem 0.65rem; border-radius: .5rem; } .toc a:hover { background-color: var(--badge-background-color); transition: background-color 0.3s; } .toc-child { margin-left: 0.8rem; position: relative; } .toc-child::before { content: ''; position: absolute; top: 0; width: 1px; background-color: var(--badge-background-color); transition: background-color 0.3s; height: 100%; } .toc-child > li { margin-left: 0.7rem; } .toc-item { margin-bottom: 0; margin-top: 0; } #mobiletoc { display: none; } #mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: #000; opacity: 0.6; } @media (max-width: 862px) { .toc-card { display: none; position: fixed; bottom: 0; left: 0; right: 0; margin: 0.8rem 1.2rem; z-index: 20; } } .archive-timeline-tag { box-shadow: var(--tag-shadow-style); background-color: #3273dc; transition: background-color 0.3s; border-radius: 0.3rem; max-width: 66px; height: 32px; display: flex; justify-content: center; align-items: center; color: var(--text-white-color); margin: 12px 0; } .archive-timeline-item { position: relative; margin-left: 12px; } .archive-timeline-post { margin-left: 10px; padding: 6px 6px; } .archive-timeline-post-content { margin-top: 12px; font-size: 1.15rem; } .archive-timeline-post-item { color: var(--text-font-color); } @media (max-width: 862px) { .archive-timeline-item { margin-left: 18px; } .archive-timeline-post { margin-left: 8px; } } .categories-page-title { font-size: 1.15rem; } .category-page-card { margin-bottom: 24px; } .categories-page-card { display: flex; flex-wrap: wrap; } .categories-page-list-item { width: 33.33333333333333%; display: flex; color: var(--text-color); font-size: 1.15rem; flex-direction: column; align-items: center; justify-content: center; padding: 8px 20px; } .categories-page-list-item:hover { cursor: pointer; border-radius: 0.3rem; background-color: var(--badge-background-color); transition: background-color 0.3s; transition-duration: 0.3s; transition-timing-function: ease-in-out; } .categories-page-list-item + .categories-page-list-item { margin-top: 0.4rem; } .categories-page-list-item-total { font-size: 0.9rem; } @media (max-width: 968px) { .categories-page-list-item { width: 50%; } } @media (max-width: 742px) { .categories-page-list-item { width: 100%; flex-direction: row; justify-content: space-between; align-content: center; } } .tags-page-title { font-size: 1.3rem; } .about-card { display: flex; flex-direction: row; justify-content: center; align-items: center; } .about-card-avatar { width: 150px; height: 150px; margin-right: 90px; } .about-card-content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .about-card-author { margin-top: 12px; font-size: 1.5rem; } .about-card-dsc { margin-top: 6px; color: var(--text-light-color); } .about-card-society { margin-top: 8px; display: flex; flex-direction: row; } .about-card-society-icon { padding: 0 5px; } .about-card-society-icon .society-icon { font-size: 22px; color: var(--text-strong-color); } @media (max-width: 862px) { .about-card { flex-direction: column; } .about-card-avatar { margin-right: 0; } } .comment-card-title { font-size: 1.15rem; margin-bottom: 16px; } .widget-title { font-size: 1.3rem; font-weight: bold; } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { background: none !important; }