/*
Theme Name:     B2子主题
Theme URI:      http: //7b2.com/
Description:    Child theme for the B2 PRO
Author:         子主题模版
Author URI:     http: //7b2.com/
Template:       b2
Version:        0.1.5
*/

/*下面是您自己DIY的css样式代码*/

/* =============== 全站缩略图hover时放大 =============== */
.post-module-thumb>a {  
  overflow: hidden;
}
/* 图片基础样式 - 强制保证过渡生效 */
.post-thumb {
  transform: scale(1); /* 强制初始缩放值 */
  /* 关键：增加-webkit-前缀兼容webkit内核浏览器，同时强制过渡生效 */
  -webkit-transition: transform 0.4s ease-out ;
  transition: transform 0.4s ease-out !important;
  will-change: transform; /* 告诉浏览器提前优化这个属性的渲染 */
}
/* =============== 全站缩略图hover时放大 =============== */

/* 鼠标悬浮放大 - 仅修改缩放值 */
.item-in:hover .post-thumb {
  transform: scale(1.1) !important; /* 强制触发缩放 */
}
/* 鼠标悬浮放大 - 仅修改缩放值 */


/* hover文章向上微动 */
    .item-post-style-1>.item-in {
        transition:all .4s ease-out;;
    }
    
    .item-post-style-1>.item-in:hover {
        transform: translateY(-3px);
        box-shadow: 0 2rem 1rem -1rem #ddd3fb4d;
        transition:all .4s ease-out;;
    }
/* hover文章向上微动 */
/* ============================================
   顶部导航毛玻璃效果页面滚动时，导航栏轻微透明，透出页面内容
   ============================================ */
.site-header-in {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9 !important;
}

/* 导航背景轻微透明，模糊效果才能透出来 */
.header-banner {
    background: rgba(255, 255, 255, 0.70) !important;
}

/* ============================================
   顶部导航毛玻璃效果页面滚动时，导航栏轻微透明，透出页面内容
   ============================================ */

/* 取消向下滚动时导航向上收回的效果 */
.site.up .site-header-in {
    transform: translate(0, 0) !important;
}
.header-banner-left.hidden {
    opacity: 1!important;
}
/* 取消向下滚动时导航向上收回的效果 */

/* 鼠标悬停导航链接时轻微放大 */
.site-header a, 
#app-header a {
    transition: transform 0.25s ease-in-out;
}

.site-header a:hover, 
#app-header a:hover {
    transform: scale(1.15) !important; /* 放大到 1.08 倍 */
}
/* 鼠标悬停导航链接时轻微放大 */

/* 改变首页文章显示样式 */
.posts-item, 
.post-list-item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* 2. 精准定位卡片内部容器：加大圆角、柔和阴影 */
.posts-item .item-in, 
.post-list-item .item-in,
.posts-item > div:not(.post-thumb) {
    background: #ffffff !important;
    border-radius: 18px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 3. 鼠标悬停时：卡片优雅上浮并加深阴影 */
.posts-item:hover .item-in, 
.post-list-item:hover .item-in,
.posts-item:hover > div:not(.post-thumb) {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* 4. 缩略图区域：四周留白，打造内嵌式圆角大图效果 */
.posts-item .post-module-thumb,
.posts-item .item-thumbnail,
.post-list-item .post-thumb-box {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    margin: 12px 12px 0 12px !important;
}

.posts-item img, 
.post-list-item img,
.item-thumbnail img {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 鼠标悬停时图片平滑放大 */
.posts-item:hover img, 
.post-list-item:hover img,
.item-thumbnail img:hover {
    transform: scale(1.08) !important;
}

/* 5. 悬浮在图片左下角的高颜值粉红胶囊分类标签 */
.posts-item .item-cat,
.posts-item .post-category,
.posts-item .item-meta-category,
.item-thumbnail-cat,
.post-module-thumb .category {
    position: absolute !important;
    bottom: 12px !important;
    left: 12px !important;
    background: #e60067 !important;
    color: #ffffff !important;
    padding: 4px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    z-index: 3 !important;
    box-shadow: 0 4px 12px rgba(230, 0, 103, 0.35) !important;
    text-decoration: none !important;
}
/* 改变首页文章显示样式 */

/* 手机端二级导航设为透明 */
@media screen and (max-width: 768px) {
    .header-banner-left {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }
}
/* 手机端二级导航设为透明 */

/* 修改首页文章上面分类放大效果 */
.post-carts-list-row .cat-list:hover {
    transform: scale(1.15); /* 整体放大一点点，避免太夸张 */
    transition: transform 0.2s ease;
    
}
/* 修改首页文章上面分类放大效果 */

/* B2搜索弹窗组件的关闭按钮放大 */
.b2-popup .close, 
.popup-close,
.b2-popup-close,
.b2-radius .close-button,
div[class*="popup"] .close {
    font-size: 40px !important; /* 增大 X 的文字/图标尺寸 */
    width: 36px !important;     /* 扩大点击热区宽度 */
    height: 36px !important;    /* 扩大点击热区高度 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

/* 2. 鼠标悬停时的放大与变色特效 */
.b2-popup .close:hover, 
.popup-close:hover,
.b2-popup-close:hover,
.b2-radius .close-button:hover,
div[class*="popup"] .close:hover {
    transform: scale(1.3) !important; /* 悬停时整体放大 1.3 倍 */
    color: #000 !important;           /* 悬停时颜色变深 */
}
/* B2搜索弹窗组件的关闭按钮放大 */

/* 全局/侧边栏滚动条（斑马纹进度条）美化 */
::-webkit-scrollbar {
    width: 8px !important;       /* 垂直滚动条的宽度 */
    height: 8px !important;      /* 水平滚动条的高度 */
}

/* 2. 滚动条的滑槽（轨道） */
::-webkit-scrollbar-track {
    background-color: #f6f7f9 !important; /* 极浅的灰色轨道，与页面背景自然融合 */
    border-radius: 8px !important;
}

/* 3. 滚动条的滑块（核心：蓝色斜纹渐变） */
::-webkit-scrollbar-thumb {
    background-color: #1890ff !important; /* 基础主题蓝 */
    border-radius: 8px !important;        /* 滑块圆角 */
    
    /* 利用 CSS 渐变画出 45 度角的半透明白色斜条纹，叠加在蓝底上 */
    background-image: linear-gradient(
        45deg, 
        rgba(255, 255, 255, 0.2) 25%, 
        transparent 25%, 
        transparent 50%, 
        rgba(255, 255, 255, 0.2) 50%, 
        rgba(255, 255, 255, 0.2) 75%, 
        transparent 75%, 
        transparent
    ) !important;
    background-size: 80px 80px !important; /* 控制条纹的密度和粗细 */
}

/* 4. 鼠标悬停在滚动条上时的颜色变深效果 */
::-webkit-scrollbar-thumb:hover {
    background-color: #0071e3 !important; /* 悬停变为深一点的高级蓝 */
}
/* 全局/侧边栏滚动条（斑马纹进度条）美化 */

/* 侧边栏小工具（推荐文章等）悬停放大与浮起特效 */
.b2-widget-post ul li,
.widget-area .b2-widget-box ul li {
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important; /* 丝滑的过渡曲线 */
    border-radius: 12px !important;       /* 给每一行加个圆角 */
    padding: 10px !important;             /* 稍微增加一点内边距，防止放大时碰到边界 */
    margin-bottom: 8px !important;        /* 条目之间留点空隙 */
    background-color: transparent !important;
    position: relative;
    z-index: 1;
}

/* 2. 鼠标悬停在当前行时：整体微缩放 + 柔和阴影 */
.b2-widget-post ul li:hover,
.widget-area .b2-widget-box ul li:hover {
    transform: scale(1.03) translateY(-2px) !important; /* 整体放大 3% 并向上微浮 2px */
    background-color: #ffffff !important;               /* 悬浮时底色变纯白 */
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important; /* 增加高级柔和阴影 */
    z-index: 2 !important;                              /* 保证放大时不被其他条目遮挡 */
}

/* 3. 针对左侧缩略图的单独设置（强制限制外框，防止图片放大出界） */
.b2-widget-post-thumb,
.widget-area .b2-widget-box .b2-widget-post-thumb {
    overflow: hidden !important;
    border-radius: 6px !important;
}

/* 4. 左侧图片的基础过渡 */
.b2-widget-post-thumb img,
.widget-area .b2-widget-box .b2-widget-post-thumb img {
    transition: transform 0.5s ease !important;
}

/* 5. 鼠标悬停在这一行时：左侧缩略图单独放大 10% */
.b2-widget-post ul li:hover .b2-widget-post-thumb img,
.widget-area .b2-widget-box ul li:hover .b2-widget-post-thumb img {
    transform: scale(1.1) !important; 
}
/* 侧边栏小工具（推荐文章等）悬停放大与浮起特效 */

/************************* H标签样式美化 ******************************/
    .entry-content>h2,.entry-content>h3,.entry-content>h4,.entry-content>h5 {
        font-weight: bold;
        background-color: #f6f6f6;
        margin: 20px 0;
        border-bottom: 0px solid red;
        padding: 5px 12px;
        border-left: 5px solid red;
        margin: 12px 0px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    
    .entry-content>h2 {
        font-weight: bold;
        background-color: #f6f6f6;
        margin: 20px 0;
        border-bottom: 0px solid #FF1493;
        padding: 5px 12px;
        border-left: 5px solid #FF1493;
        margin: 12px 0px;
    }
    
    .entry-content>h3 {
        font-weight: bold;
        background-color: #f6f6f6;
        margin: 20px 0;
        border-bottom: 0px solid #4169E1;
        padding: 5px 12px;
        border-left: 5px solid #4169E1;
        margin: 12px 0px;
    }
    
    .entry-content>h4 {
        font-weight: bold;
        background-color: #f6f6f6;
        margin: 20px 0;
        border-bottom: 0px solid #3CB371;
        padding: 5px 12px;
        border-left: 5px solid #3CB371;
        margin: 12px 0px;
    }
    
    .entry-content>h5 {
        font-weight: bold;
        background-color: #f6f6f6;
        margin: 20px 0;
        border-bottom: 0px solid #FFC0CB;
        padding: 5px 12px;
        border-left: 5px solid #FFC0CB;
        margin: 12px 0px;
    }
/********************** H标签样式美化 **************************/


/**logo扫光效果CSS 开始**/
.logo{   /**根据logo外div样式名称修改名称，如果是ripro  请修改成 .logo-wrapper**/
  position: relative;
  overflow: hidden;
  float:left;
  max-height: 50px;
}
.logo:before{   /**根据logo外div样式名称修改before前名称，如果是ripro  请修改成 .logo-wrapper**/
    content: "";
    position: absolute;
    width: 150px;
    height: 10px; /**光标的宽度，可根据实际调整**/
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: blink 1s ease-in 1s infinite;
    animation: blink 1s ease-in 1s infinite;  /**第一个数字参数控制扫光速度，数字越大越慢**/
}
 
@-webkit-keyframes blink {
    from {left: 10px;top: 0;}
    to {left: 320px;top: 0;}
}
@-o-keyframes blink {
    from {left: 10px;top: 0;}
    to {left: 320px;top: 0;}
}
@-moz-keyframes blink {
    from {left: 10px;top: 0;}
    to {left: 320px;top: 0;}
}
@keyframes blink {
    from {left: -100px;top: 0;}
    to {left: 320px;top: 0;}
}
/**logo扫光效果CSS  结束**/

/**阿里云图标库大小调整开始**/
.icon {
    width: 26px;
    height: 22px;
    vertical-align: -4px;
    fill: currentColor;
    overflow: hidden;
    shape-rendering: geometricPrecision;
}
/**阿里云图标库大小调整结束**/

/* 导航栏彻底隐藏前面的下拉分类和输入框只显示搜索小图标开始 */
.top-search .top-search-button,
.top-search .search-input {
    display: none !important;
}

/* 2. 修正外层容器，保持垂直居中 */
.top-search {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    width: auto !important;
}
.top-search .mobile-search-input {
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
}

/* 3. 按钮层加大尺寸 */
.top-search .search-button-action {
    position: static !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    color: #444 !important; 
    cursor: pointer;
    box-shadow: none !important;
    width: auto !important;
    height: 40px !important; 
    padding: 0 12px !important;
    margin: 0 5px 0 0 !important;
    transition: all 0.3s ease !important; 
}

/* 4. 【核心调整】直接把内部图标字体放大到 32px，并加粗线条 */
.top-search .search-button-action i {
    font-size: 26px !important; /* 这里可以根据视觉效果继续改大，比如 34px 或 36px */
    font-weight: bold !important;
}

/* 5. 鼠标悬停（Hover）时的放大特效（基于当前大尺寸再放大 1.15 倍） */
.top-search .search-button-action:hover {
    color: #000 !important; 
    transform: scale(1.3) !important; 
}

/* 6. 移动端直接隐藏 */
@media screen and (max-width: 768px) {
    .top-search {
        display: none !important;
    }
}
/* 导航栏彻底隐藏前面的下拉分类和输入框只显示搜索小图标结束 */

/*给用户添加头像框*/
.txgj {
    top: -2px;
    transform: scale(1.7);
    width: 90px;
    position: absolute;
}
.top-user-info-box-name .txgj{
    left: -5px;
    transform: scale(1);
    top: 6px;
}
.post-meta-left .txgj{
    display: none;
}
.post-meta-left .avatar-parent .txgj{
    display: block;
    transform: scale(1.6);
    display: block;
    left: 0px!important;
}
.top-user-box-drop .avatar {
    border-radius: 50%;
}
.comment .gravatar img {
    border-radius: 50%;
}
/*给用户添加头像框*/

/*导航菜单添加彩色渐变的文字*/
.meihua {
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 33.3%, rgba(255, 0, 45, 1) 66.6%, rgba(131, 58, 180, 1) 100%);
-webkit-background-clip: text;
color: transparent !important;
background-size: 300% 100%;
animation: text 4s infinite linear
}
@media (max-width:768px) {
span.ua-info {
display: none
}
.comment-author .user-title {
width: 40% !important
}
}
.comment-author .user-title {
font-size: 13px;
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 33.3%, rgba(255, 0, 45, 1) 66.6%, rgba(131, 58, 180, 1) 100%);
-webkit-background-clip: text;
color: transparent !important;
background-size: 300% 100%;
animation: text 4s infinite linear
}
@keyframes text {
0% {
background-position: 0 0
}
100% {
background-position: -150% 0
}
}
.b2-qr-code-fill {
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 33.3%, rgba(255, 0, 45, 1) 66.6%, rgba(131, 58, 180, 1) 100%);
-webkit-background-clip: text;
color: transparent !important;
background-size: 300% 100%;
animation: text 4s infinite linear
}
/*导航菜单添加彩色渐变的文字*/
/*自定义用户等级颜色代码*/
.lv-icon.b2-lv0 i {
    background-color: rgb(199 194 194);
}

.lv-icon.b2-lv1 i {
        background-color: #ff9400;
}
.lv-icon.b2-lv1 b {
    color: #ff9400;
}

.lv-icon.b2-lv2 i {
    background-color: #ff9400;
}
.lv-icon.b2-lv2 b {
    color: #ff9400;
}

.lv-icon.b2-lv3 i {
    background-color: #ff3a55;
}
.lv-icon.b2-lv3 b {
    color: #ff3a55;
}

.lv-icon.b2-lv4 i {
    background-color: #ff3a55;
}
.lv-icon.b2-lv4 b {
    color: #ff3a55;
}

.lv-icon.b2-lv5 i {
    background-color: #de00ff;
}
.lv-icon.b2-lv5 b {
    color: #de00ff;
}

.lv-icon.b2-lv6 i {
    background-color: #de00ff;
}
.lv-icon.b2-lv6 b {
    color: #de00ff;
}

.lv-icon.b2-lv7 i {
    background-color: #ff0000;
}
.lv-icon.b2-lv7 b {
    color: #ff0000;
}

.lv-icon.b2-lv8 i {
    background-color: #3478f7;
}
.lv-icon.b2-lv8 b {
    color: #3478f7;
}
/*自定义用户等级颜色代码*/