/*
https://docs.nexmoe.com/v4.2/config/style.html
*/
@import url('//fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC&display=swap');

:root {
    --gutter: 25px;
    --radius: 13px;
    --color-primary: rgba(128,128,128,1);/*rgba(0,52,146,1)*/
    --color2: rgba(100,100,100,1);
    --color3: rgba(100,100,100,1);
    --color4: rgba(100,100,100,1);
    --color5: rgba(100,100,100,1);
    --color6: rgba(140,140,140,1);
    --color7: rgba(160,160,160,1);
    --color-primary-bg: rgba(128,128,128,0.15);
    --color2-bg: rgba(100,100,100,0.15);
    --color3-bg: rgba(80,80,80,0.15);
    --color4-bg: rgba(60,60,60,0.15);
    --color5-bg: rgba(40,40,40,0.15);
    --color6-bg: rgba(140,140,140,0.15);
    --color7-bg: rgba(160,160,160,0.15);
    --color-shadow: rgba(161, 177, 204, 0.4);

    --color-card: rgba(20, 20, 20, 1);
    --color-text-1: rgba(190, 190, 190, 0.8);
    --color-text-2: rgba(190, 190, 190, 0.8);
}

body,
.container,
article {
    font-family: 'Noto Serif SC', serif;
}

.nexmoe-post .nexmoe-post-cover {
    background-color: var(--color-card);/*设置div背景色，消除圆角白边*/
}

.nexmoe-post .nexmoe-post-cover h1 {
    font-size: 1.8rem;/* 缩小标题字体 */
}

/*post卡片鼠标悬浮阴影效果*/
.nexmoe-post-cover {
    transition: all 0.3s ease; /* 为阴影添加过渡效果 */
}
a:hover .nexmoe-post-cover {
    box-shadow: 0px 4px 15px rgba(150, 150, 150, 0.6); /* 调整阴影效果 */ 
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 平滑过渡 */
}

@media only screen and (max-width: 600px) {
    .nexmoe-post .nexmoe-post-cover h1 {
        font-size: 1.5rem; /* 缩小移动端首页字体 */
    }
}

#nexmoe-background .nexmoe-bg {
    opacity: 0;/* 不要背景 */
}

.nexmoe #nexmoe-content .nexmoe-primary,
.nexmoe #nexmoe-header .nexmoe-avatar,
.nexmoe #nexmoe-header .nexmoe-list .nexmoe-list-item.true,
.nexmoe-widget-wrap {
    box-shadow: 0 0 0rem var(--color-shadow);/* 关闭自带其他阴影 */
}


/*文章头图缩小*/
.nexmoe-post article .nexmoe-post-cover {
    padding-top: 30% !important; 
}
/*文章头图模糊*/
.nexmoe-post article .nexmoe-post-cover img {
    /*filter: blur(1px);*/
    opacity: 0.6;
    transform: scale(1.1);/*放大一点点，以去除白边*/
}
/*标题下的渐变阴影
.nexmoe-post .nexmoe-post-cover h1:after {
    background-image:none;
}*/


/*回到顶部变色*/
.nexmoe-post-right .nexmoe-tool .mdui-fab {
    background: rgba(200, 200, 200, 0.6);
    transition: all 0.3s ease; /* 添加背景颜色的过渡效果 */
}
.nexmoe-post-right .nexmoe-tool .mdui-fab:hover {
    background: rgba(255, 255, 255, 1); /* 鼠标悬浮时背景变为纯白、不透明 */
}
/*回到顶部变色 END*/

.nexmoe-post-footer,
.nexmoe #nexmoe-header .mdui-drawer{
    background-color: var(--color-card);
}

/*魔改元素加载的淡出淡入*/
.nexmoe-posts,
.nexmoe-copyright {
    visibility: hidden; /* 初始隐藏内容 */
    opacity: 0; /* 初始透明度为 0 */
    transition: opacity 0.75s ease-in-out; /* 添加淡入动画 */
}
.nexmoe-posts.visible,
.nexmoe-copyright.visible {
    visibility: visible; /* 布局完成后显示内容 */
    opacity: 1; /* 完全显示 */
}
/*魔改元素加载的淡出淡入 END*/


/*瀑布流布局*/
#nexmoe-content {
    display: flex;
    justify-content: space-between;
}

.nexmoe-primary {
    width: 70%;
}

.nexmoe-post-right {
    width: 25%;
}

.nexmoe-posts {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.nexmoe-posts .nexmoe-post {
    margin-bottom: 20px;
    box-sizing: border-box;
}


.nexmoe-posts .nexmoe-column {
    width: calc(50% - 10px);
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .nexmoe-post, .nexmoe-column {
        width: 100%;
    }

    .nexmoe-posts {
        flex-direction: column;
    }
}

@media screen and (max-width: 1024px) {
    .nexmoe #nexmoe-content .nexmoe-primary {
        position: absolute; /*绝对布局避免右侧留空*/
    }
}

/*瀑布流布局 END*/