blog/source/css/custom.css

/* ==================== 全局毛玻璃样式 ==================== */
/* 明亮模式 */
#body-wrap #recent-posts > .recent-post-item,
#body-wrap .recent-post-item,
#body-wrap #aside-content .card-widget,
#body-wrap .layout > div:first-child:not(.recent-posts),
#body-wrap #nav .menus_items .menus_item .menus_item_child,
#body-wrap #pagination .page-number:not(.current),
#body-wrap #pagination .extend,
#page-header #post-info {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 16px -4px rgba(138, 138, 138, 0.15);
    transition: background 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}
#body-wrap #pagination .page-number:not(.current):hover,
#body-wrap #pagination .extend:hover {
    background: #ff7142d2;
    border-color: #ff7142d2;
    color: #fff;
}
/* 夜间模式 */
html[data-theme="dark"] #body-wrap #recent-posts > .recent-post-item,
html[data-theme="dark"] #body-wrap .recent-post-item,
html[data-theme="dark"] #body-wrap #aside-content .card-widget,
html[data-theme="dark"] #body-wrap .layout > div:first-child:not(.recent-posts),
html[data-theme="dark"] #body-wrap #nav .menus_items .menus_item .menus_item_child,
html[data-theme="dark"] #body-wrap #pagination .page-number:not(.current),
html[data-theme="dark"] #body-wrap #pagination .extend,
html[data-theme="dark"] #page-header #post-info {
    background: rgba(30, 30, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.2);
}

/* ==================== 页头与页脚透明 ==================== */
#footer, #page-header.post-bg, #page-header.page-bg {
    background: transparent !important;
}
#page-header.post-bg::before, #page-header.page-bg::before {
    background-color: transparent !important;
}

/* ==================== 文章卡片透明 ==================== */
#body-wrap #recent-posts > .recent-post-item .recent-post-info,
#body-wrap #recent-posts > .recent-post-item .recent-post-info::before,
#body-wrap #recent-posts > .recent-post-item .recent-post-info::after,
#body-wrap #recent-posts > .recent-post-item .recent-post-info > .article-title,
#body-wrap #recent-posts > .recent-post-item .recent-post-info > .article-meta-wrap,
#body-wrap #recent-posts > .recent-post-item .recent-post-info > .content {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* ==================== 表格样式 ==================== */
#article-container table:not(.gist table) {
    border-collapse: collapse;
    width: 100%;
    margin: 1.5rem 0;
    overflow-x: auto;
}
#article-container table:not(.gist table) thead {
    background: var(--btn-bg);
    color: var(--btn-color);
}
#article-container table:not(.gist table) th,
#article-container table:not(.gist table) td {
    padding: 10px 16px;
    border: 1px solid var(--border-color);
    text-align: left;
    vertical-align: middle;
}
#article-container table:not(.gist table) tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.03);
}
html[data-theme="dark"] #article-container table:not(.gist table) tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}

/* ==================== 排版美化 ==================== */
#article-container p {
    line-height: 1.8;
    margin: 1rem 0;
    text-align: justify;
}
#article-container h1, #article-container h2, #article-container h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid var(--border-color);
}

/* ==================== 文章标题栏字体颜色（明亮模式） ==================== */
html:not([data-theme="dark"]) #post-info .post-title {
    color: #2c3e50 !important;
    text-shadow: none !important;
}
html:not([data-theme="dark"]) #post-info #post-meta,
html:not([data-theme="dark"]) #post-info #post-meta a,
html:not([data-theme="dark"]) #post-info #post-meta .post-meta-separator,
html:not([data-theme="dark"]) #post-info #post-meta i {
    color: #2c3e50 !important;
    text-shadow: none !important;
}

/* ==================== 文章标题栏悬浮居中 ==================== */
#page-header #post-info {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
    padding: 20px 40px;
    box-sizing: border-box;
    display: block;
    text-align: left;
    border-radius: 10px;
    width: min(92%, 1200px);
}
@media screen and (max-width: 768px) {
    #page-header #post-info {
        padding: 15px 20px !important;
        bottom: 20px !important;
        width: 90% !important;
    }
    #post-info #post-meta > .meta-firstline > span:not(.post-meta-wordcount),
    #post-info #post-meta > .meta-secondline > span:not(.post-meta-wordcount) {
        display: none !important;
    }
    #post-info #post-meta > .meta-firstline > .post-meta-separator,
    #post-info #post-meta > .meta-secondline > .post-meta-separator {
        display: none !important;
    }
    #post-info .post-title {
        text-align: justify !important;
        text-align-last: left !important;
        display: block;
        margin-bottom: 10px;
    }
}

/* ==================== 文章标题栏字号放大 30% ==================== */
#post-info .post-title {
    font-size: 3.25em !important;
}

@media screen and (max-width: 768px) {
    #post-info .post-title {
        font-size: 2.73em !important;
    }
}