@charset "UTF-8"; @font-face { font-family: 'ZhuqueFangsong'; src: url("../fonts/ZhuqueFangsong-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; } body { font-family: 'ZhuqueFangsong'; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } button { border: none; background: none; } a { text-decoration: none; color: inherit; outline: none; cursor: pointer; } a:hover, a:active { text-decoration: none; } ul, ol { list-style: none; } .dark .blog-body { background-color: #0f172a; } .dark .blog-body .bg-blur { background-color: rgba(31, 27, 36, 0.8); } .dark .blog-body .card { background-color: #0c1222; } .dark .blog-body .main-wrap .article-detail .typography { color: #ddd; } .dark .blog-body .main-wrap .comment-list .comment-text { background-color: #212529 !important; } body { padding: 0 !important; margin: 0 !important; position: relative; font-size: 15px; font-weight: normal; overflow-x: hidden !important; overflow-y: auto !important; color: var(--bs-body-color); transition: all 1s ease; } .blog-body .navbar { --bs-navbar-padding-x: 0; --bs-navbar-padding-y: 0; transition: .3s ease-out; box-shadow: 0 0.5rem 1rem rgba(18, 38, 63, 0.05); border: 1px solid rgba(17, 24, 39, 0.1); } .blog-body .navbar .container-fluid { height: 3rem; } .blog-body .navbar .container-fluid .nav-toggle, .blog-body .navbar .container-fluid .nav-search-button { width: 2.5rem; height: 100%; } .blog-body .sidebar-banner { position: relative; background-image: url("../images/wallhaven-qr9jml.jpg"); background-position-x: center; background-position-y: center; background-size: cover; min-height: 120px; width: 100%; overflow: hidden; border-top-right-radius: 6px; border-top-left-radius: 6px; } .blog-body .sidebar-banner::after { content: ""; width: 100%; height: 40%; position: absolute; bottom: 0; left: 0; background: linear-gradient(to top, var(--bs-white), transparent); } .blog-body .sidebar-avatar { position: absolute; left: 50%; transform: translateX(-50%) translateY(-50%); border: rgba(255, 255, 255, 0.4) 4px solid; width: 68px; height: 68px; border-radius: 50%; } .blog-body .sidebar-sign { padding-left: .75rem; padding-right: .75rem; margin-bottom: 1rem; font-size: .875rem; line-height: 1.5rem; letter-spacing: .05em; text-align: center; } .blog-body .offcanvas { height: 100vh; max-width: 78%; } .blog-body .offcanvas.offcanvas-start { top: -1px; left: -1px; } .blog-body .offcanvas .offcanvas-body { padding: 0; } .blog-body .hero-box { position: relative; height: 730px; background-image: url("../images/acg.jpg"); background-position-x: center; background-position-y: center; background-size: cover; } .blog-body .hero-box::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); } .blog-body .mode_switcher.my_switcher { position: fixed; right: -50px; top: 100px; z-index: 9999999; transition: 0.3s; } .blog-body .mode_switcher.my_switcher:hover { right: 0; } .blog-body .mode_switcher.my_switcher button { display: flex; font-size: 20px; background: #5F2DED; padding: 10px; line-height: 20px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; width: 90px; box-shadow: 0px 6px 34px rgba(215, 216, 222, 0.15); border: none; } .blog-body .main-wrap .article-list .article-item { display: flex; overflow: hidden; position: relative; background-color: #fff; height: 10rem; border-radius: var(--bs-border-radius); border-width: 1px; margin-bottom: 1rem; } .blog-body .main-wrap .article-list .article-item .blur-img { z-index: 0; } .blog-body .main-wrap .article-list .article-item .blur-img img { object-fit: cover; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 14.5rem; transform: scale(1.55); } .blog-body .main-wrap .article-list .article-item.flex-row-reverse .article-img { clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%); } .blog-body .main-wrap .article-list .article-item .article-img { z-index: 10; margin: 0; width: 33.333333%; border-width: 0; clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%); } .blog-body .main-wrap .article-list .article-item .article-img .article-left-img { object-fit: cover; background-position: center; background-size: cover; width: 100%; height: 100%; } .blog-body .main-wrap .article-list .article-item .article-ctx { display: flex; z-index: 10; padding: 1.25rem 1rem; color: #fff; flex-direction: column; justify-content: space-between; width: 100%; background-color: rgba(0, 0, 0, 0.35); } .blog-body .main-wrap .article-list .article-item .article-ctx .article-info { display: flex; font-size: .75rem; line-height: 1rem; justify-content: space-between; letter-spacing: .06rem; text-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.3); } .blog-body .main-wrap .article-list .article-item .article-ctx .article-title { font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; font-size: 20px; line-height: 1.75rem; letter-spacing: .05em; color: #fff; overflow: hidden; } .blog-body .main-wrap .article-list .article-item .article-ctx .article-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12px; text-indent: 2em; line-height: 1.5rem; word-break: break-all; overflow: hidden; color: #fff; } .blog-body .main-wrap #NextButton { width: auto; padding-left: 3rem; padding-right: 3rem; } .blog-body .main-wrap .article-detail .tag .tag-item { color: #0d6efd !important; background-color: rgba(13, 110, 253, 0.1) !important; } .blog-body .main-wrap .article-detail .typography { color: #2c2e3b; font-size: 15px; line-height: 1.5; } .blog-body .main-wrap .article-detail .copyright { padding: 1rem; margin-top: 1.5rem; line-height: 1.5rem; border-radius: .25rem; } .blog-body .main-wrap .article-detail .copyright .copyright-text { word-break: break-all; } .blog-body .main-wrap .ssbox .ss-list { padding-left: 0; } .blog-body .main-wrap .ssbox .ss-list .ss-content .ss-datetime { display: flex; width: 16px; line-height: 18px; font-size: 18px; text-align: center; border-right: 1px solid var(--bs-border-color); padding: 0 22px 8px 0; float: left; margin-right: 1rem; overflow: hidden; max-height: 100px; } .blog-body .main-wrap .ssbox .ss-list .ss-content .ss-data-content { margin: 0 0 0 3.2rem; min-height: 88px; } .blog-body .main-wrap .pigeonhole .icon { width: auto; height: auto; font-size: 12px; } .blog-body .main-wrap .pigeonhole .accordion-button:focus { box-shadow: none; } .blog-body .main-wrap .pigeonhole .accordion-item { margin-bottom: 10px; } .blog-body .main-wrap .pigeonhole .accordion-item:last-child { margin-bottom: 0; } .blog-body .main-wrap .pigeonhole .accordion-item:not(:first-of-type) { border-top: 1px solid var(--bs-border-color); } .blog-body .main-wrap .comment-list { display: flex; flex-direction: column; align-self: stretch; padding: 0px; margin: 0px; flex: 1 1 auto; gap: 1.5rem; } .blog-body .main-wrap .comment-list .content { font-size: 14px; } .blog-body .main-wrap .comment-list .content .comment-text { font-size: 14px; line-height: 1.5; background-color: #f4f6fb; overflow-wrap: break-word; word-break: break-all; margin: 0.5rem 0px; padding: 0.5rem 0.75rem; border-radius: 2px; } .blog-body .main-wrap .comment-list .comment-di .comment-inner img { width: 45px; height: 45px; border-radius: 999px; } .blog-body .main-wrap .comment-list .comment-quote { padding-left: 2rem; } .blog-body .main-wrap .comment-list .common-child .common-child-item { margin-top: 1rem; } .blog-body .main-wrap .comment-list .common-child .common-child-item .avatar { width: 35px; height: 35px; border-radius: 999px; } .blog-body .main-wrap .friendship-links .friend-link-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .blog-body .main-wrap .friendship-links .friend-link-card:hover { transform: translateY(-5px); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); } .blog-body .main-wrap .friendship-links .friend-link-avatar { width: 80px; height: 80px; object-fit: cover; border: 3px solid rgba(13, 110, 253, 0.2); } .blog-body .main-wrap .friendship-links .card { border-radius: var(--bs-border-radius); border: 1px solid var(--bs-border-color); } .blog-body .main-wrap .friendship-links .card-header { background-color: rgba(0, 0, 0, 0.03); border-bottom: 1px solid var(--bs-border-color); } .blog-body .tools { display: none; position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1045; margin-top: .25rem; flex-direction: column; } .blog-body .tools .backup-btn { cursor: pointer; width: 50px; height: 50px; line-height: 50px; background-color: var(--bs-secondary-bg); right: 20px; bottom: 60px; text-align: center; overflow: hidden; border-radius: 50px; z-index: 9811 !important; position: fixed; display: block; box-shadow: 0px 10px 50px rgba(13, 38, 59, 0.15); } .blog-body .tools .backup-btn i { width: 100%; display: block; line-height: 50px; font-size: 20px; transition: 0.5s; } .blog-body .footer { border-top-width: 1px; border-top-style: solid; border-color: var(--bs-border-color); line-height: 1.8rem; letter-spacing: .3px; } @media screen and (max-width: 576px) { .blog-body .hero-box { height: 20rem; } .blog-body .main-wrap .ssbox .ss-list { padding-left: 0; } .blog-body .main-wrap .ssbox .ss-list .ss-data-content { margin: 0 0 0 2.5rem; } } @media screen and (min-width: 768px) { .blog-body .main-wrap .article-list .article-item { background-color: #000; border-width: 0; height: 14.5rem; } .blog-body .main-wrap .article-list .article-item .blur-img img { filter: blur(1.875rem) brightness(0.75); } .blog-body .main-wrap .article-list .article-item .article-ctx { background-color: unset; padding: 3rem 2rem; width: 66.666667%; } } [class^="fa-"], [class*=" fa-"] { vertical-align: middle; } img { display: block; max-width: 100%; height: auto; vertical-align: middle; } .has-img { backdrop-filter: blur(8px); } .bg-blur { background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: saturate(200%) blur(20px); backdrop-filter: saturate(200%) blur(20px); } .text-xs { font-size: .75rem; } .icon { font-size: 1rem; width: 1rem; height: 1rem; fill: currentColor; overflow: hidden; flex-shrink: 0; } :root { scroll-behavior: auto; } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 6px; height: 6px; } html::-webkit-scrollbar-corner, body::-webkit-scrollbar-corner { background: unset; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: rgba(135, 135, 135, 0.4); border-radius: 6px; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: rgba(135, 135, 135, 0.1); } .dark html::-webkit-scrollbar-thumb, .dark body::-webkit-scrollbar-thumb { background: rgba(135, 135, 135, 0.6); } .dark html::-webkit-scrollbar-track, .dark body::-webkit-scrollbar-track { background: rgba(135, 135, 135, 0.2); } .blog-body .article-detail .article-meta { background-color: var(--bs-light); padding: 0.75rem 1rem; border-radius: 0.375rem; margin: 1rem 0; } .blog-body .article-detail .article-meta .meta-item { display: flex; align-items: center; gap: 0.5rem; } .blog-body .article-detail .tag .tag-item { color: #0d6efd !important; background-color: rgba(13, 110, 253, 0.1) !important; text-decoration: none; } .blog-body .article-detail .tag .tag-item:hover { background-color: rgba(13, 110, 253, 0.2) !important; } .blog-body .article-detail .copyright { padding: 1rem; margin-top: 1.5rem; line-height: 1.5rem; border-radius: .25rem; background-color: var(--bs-light); } .blog-body .article-detail .copyright .copyright-text { word-break: break-all; } .blog-body .toc-container { position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow-y: auto; padding: 1rem 0; } .blog-body .toc-container .toc-header { padding: 0.5rem 1rem; font-weight: 600; border-bottom: 1px solid var(--bs-border-color); margin-bottom: 0.5rem; } .blog-body .toc-container .toc-nav a { display: block; color: var(--bs-secondary-color); text-decoration: none; padding: 0.25rem 1rem; border-left: 2px solid transparent; transition: all 0.2s; font-size: 0.875rem; } .blog-body .toc-container .toc-nav a:hover { color: var(--bs-primary); border-left-color: var(--bs-primary); background-color: rgba(13, 110, 253, 0.05); } .blog-body .toc-container .toc-nav a.active { color: var(--bs-primary); border-left-color: var(--bs-primary); font-weight: 500; } .blog-body .share-section { padding: 1rem 0; } .blog-body .share-section .share-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--bs-body-color); background-color: var(--bs-light); transition: all 0.3s; } .blog-body .share-section .share-button:hover { background-color: var(--bs-primary); color: white; } .blog-body .article-navigation .prev-article, .blog-body .article-navigation .next-article { flex: 1; } .blog-body .article-navigation .prev-article a, .blog-body .article-navigation .next-article a { color: var(--bs-body-color); text-decoration: none; } .blog-body .article-navigation .prev-article a:hover, .blog-body .article-navigation .next-article a:hover { color: var(--bs-primary); } .blog-body .comments-section .comment-form { background-color: var(--bs-light); padding: 1.5rem; border-radius: 0.375rem; } .blog-body .comments-section .comment-item { padding: 1rem 0; } .blog-body .comments-section .comment-item:not(:last-child) { border-bottom: 1px solid var(--bs-border-color); } .toc-container::-webkit-scrollbar { width: 6px; } .toc-container::-webkit-scrollbar-thumb { background: rgba(135, 135, 135, 0.4); border-radius: 6px; } .toc-container::-webkit-scrollbar-track { background: rgba(135, 135, 135, 0.1); } @media (max-width: 991.98px) { .toc-container { position: static; max-height: none; overflow-y: visible; margin-top: 1.5rem; } } /* 评论区域样式 */ .comments-section { margin-top: 2rem; } .comment-item { padding: 1rem 0; } .comment-item:not(:last-child) { border-bottom: 1px solid #eee; } .comment-form .form-control { border-radius: 0.375rem; } .comment-form .btn { border-radius: 0.375rem; } /* 回复评论的样式 */ .comment-item .comment-item { padding-left: 1rem; margin-top: 1rem; } /* 响应式调整 */ @media (max-width: 768px) { .comment-item .comment-item { margin-left: 1rem; } } /*# sourceMappingURL=main.css.map */