/*
Theme Name: STX
Theme URI: https://maiyin.org/
Description: STX 极简博客主题，基于 Dear 1.1.0 修改，保留原有布局与功能，增加加载动画及移动端背景适配。
Tags: blog, plaintext, one-column, minimalism, responsive, dark-mode
Version: 1.0.0
License: CC BY-NC-SA 4.0 DEED
License URI: https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh-hans
*/
:root {
    --width: 660px;
    --font-yahei: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Helvetica,Arial,"PingFangSC-Regular","Hiragino Sans GB","Lantinghei SC","Microsoft Yahei","Source Han Sans CN","WenQuanYi Micro Hei",SimSun,sans-serif;
    --font-fangsong: Baskerville, "Times New Roman", "Liberation Serif", STFangsong, FangSong, FangSong_GB2312, "CWTEX\-F", serif;
    --font-songti: Georgia, "Nimbus Roman No9 L", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif CN", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU, serif;
    --font-scale: 1em;
    --background-color: #fff;
    --heading-color: #222;
    --text-color: #444;
    --link-color: #3273dc;
    --visited-color:  #8b6fcb;
    --code-background-color: #f2f2f2;
    --code-color: #222;
    --blockquote-color: #222;
    --gray-color: #999;
}
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #111;
        --heading-color: #eee;
        --text-color: #ddd;
        --link-color: #6ab0e5;
        --visited-color:  #8b6fcb;
        --code-background-color: #000;
        --code-color: #ddd;
        --blockquote-color: #ccc;
        --gray-color: #999;
    }
}
body {
    font-family: var(--font-yahei); /* 可替换 --font-fangsong 或 --font-songti 字体 */
    font-size: var(--font-scale);
    margin: auto;
    padding: 20px;
    max-width: var(--width);
    text-align: left;
    background-color: var(--background-color);
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.7;
    color: var(--text-color);
}
html{scroll-behavior:smooth;}
h2,h3,h4,h5,h6{color:var(--heading-color);display:inherit}
a{color:var(--link-color);cursor:pointer;text-decoration:none;border-bottom:1px solid transparent}
a:hover,a[aria-current*="page"]{border-bottom:1px solid}
nav a{margin-right:8px}
strong,b{color:var(--heading-color)}
button{margin:0;cursor:pointer}
table{width:100%}
hr{border:0;border-top:1px dashed}
img{max-width:100%;height:auto}
time,.intro{color:var(--gray-color);}
code{font-family:monospace;padding:2px;background-color:var(--code-background-color);color:var(--code-color);border-radius:4px}
blockquote{border-left:1px solid #999;color:var(--code-color);padding-left:20px;font-style:italic}
input{border-radius:4px;border:1px solid var(--gray-color);margin:0 0 15px 0;padding:10px;width:50%}
input:focus{outline:0}
input[type="submit"]{padding:9px 10px 10px;text-align:center;width:80px;display:inline-flex;background-color:var(--heading-color);color:var(--code-background-color);border:none}
input[type="submit"]:hover{cursor:pointer;opacity:.7}
header,footer{padding:20px 0}
.title:hover{text-decoration:none;border:none}
.title h1,.title h2{font-size:1.5em}
ul.posts{list-style-type:none;padding:unset}
ul.posts li{display:flex;margin:3px 0}
ul.posts li span{flex:0 0 115px}
ul.posts li a:visited{color:var(--visited-color)}
.tags{margin-top:30px;color:var(--gray-color)}
.tags a{margin:0 5px 0 2px}

/* 默认背景图片 */


/* 文章页面不加载背景图 */
.single-post body {
    background-image: none !important;
}

/* 如果页面也是不需要背景图片 */
.page, .page * {
    background-image: none !important;
}


/* 返回顶部按钮样式 */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 50%;
    padding: 10px;
    font-size: 20px;
    cursor: pointer;
    display: none; /* 初始状态为隐藏 */
    z-index: 1000;
    transition: opacity 0.3s ease;
}

/* 鼠标悬停时的样式 */
.back-to-top:hover {
    background-color: #005f87;
}
.notification-bubble {
    /* 核心磨砂效果 */
    backdrop-filter: blur(8px); /* 调整模糊程度，值越大越模糊 */
    background-color: rgba(255, 255, 255, 0.2); /* 白色半透明背景，最后一个值是透明度 */

    /* 气泡形状和间距 */
    border-radius: 15px; /* 圆角大小，值越大越圆 */
    padding: 20px; /* 内边距，让文字不紧贴边缘 */
    margin: 20px auto; /* 外边距，居中显示并与周围内容隔开 */
    max-width: 600px; /* 最大宽度，防止在宽屏幕上过长 */
    text-align: center; /* 文本居中 */
    color: #333; /* 文本颜色，根据背景调整 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影，增加立体感 */
    border: 1px solid rgba(255, 255, 255, 0.3); /* 轻微边框，增加质感 */

    /* 兼容性前缀 (可选，但推荐为了更好的浏览器支持) */
    -webkit-backdrop-filter: blur(8px);
}

.notification-bubble p {
    margin: 0; /* 移除 p 标签默认的上下外边距，避免多余空间 */
    font-size: 1.1em; /* 调整字体大小 */
    line-height: 1.6; /* 行高，让文字更易读 */
}
    /* 修改H1,H2 */
a.title h1 {
    color: #ffffff !important;
}

a.title h1 img {
    margin-left: 15px;
    position: relative;
    top: -12px;
}

a.title h2 img {
    margin-left: 15px;
    position: relative;
    top: -12px;
}

/* STX：手机端背景图铺满屏幕，保持比例并居中裁切 */
@media (max-width: 767px) {
    body.custom-background {
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
    }
}

/* STX 页面加载层 */
#stx-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #1d1021 url("assets/loading-background.jpg") center center / cover no-repeat;
    opacity: 1;
    visibility: visible;
    transition: opacity .55s ease, visibility .55s ease;
}
#stx-loader::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(15, 8, 20, .16);
}
#stx-loader.stx-loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.stx-loader-content {
    position: relative;
    z-index: 1;
    width: min(82vw, 430px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: translateY(-2vh);
}
.stx-loader-logo {
    display: block;
    width: clamp(112px, 22vw, 190px);
    height: auto;
    filter: drop-shadow(0 0 17px rgba(255, 145, 170, .75));
    transform-origin: center;
    animation: stx-heartbeat 1.25s ease-in-out infinite;
}
@keyframes stx-heartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.09); }
    28% { transform: scale(1); }
    42% { transform: scale(1.13); }
    58% { transform: scale(1); }
}
.stx-loader-domain {
    min-height: 1.5em;
    margin-top: 24px;
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(19px, 4.5vw, 30px);
    font-weight: 700;
    letter-spacing: .045em;
    text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.stx-loader-caret {
    display: inline-block;
    margin-left: 3px;
    animation: stx-caret .8s steps(1) infinite;
}
@keyframes stx-caret { 50% { opacity: 0; } }
.stx-progress-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-top: 28px;
}
.stx-progress-track {
    flex: 1;
    height: 10px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255,255,255,.35);
    box-shadow: 0 1px 5px rgba(0,0,0,.2);
}
.stx-progress-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f17f9c, #ffc0b7);
    transition: width .25s ease;
}
.stx-progress-number {
    min-width: 42px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-shadow: 0 1px 5px rgba(0,0,0,.45);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
    .stx-loader-content { width: 84vw; transform: translateY(-1vh); }
    .stx-loader-logo { width: clamp(108px, 31vw, 150px); }
    .stx-loader-domain { margin-top: 20px; }
    .stx-progress-row { gap: 10px; margin-top: 22px; }
    .stx-progress-track { height: 8px; }
    .stx-progress-number { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .stx-loader-logo, .stx-loader-caret { animation: none; }
    #stx-loader { transition: none; }
}