/*白天主题下的配置*/
#aside-content>.card-widget.card-info {
    /*换成自己图片的地址*/
    background-image: url('../imgs/themebutterfly/card-bg/bg.jpg');
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-size: 100%
}
/*黑暗主题下的配置*/
[data-theme=dark] #aside-content>.card-widget.card-info {
    /*换成自己图片的地址*/
    background-image: url('../imgs/themebutterfly/card-bg/bbg.png') !important
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

/* 个人信息Follow me按钮 */
#aside-content>.card-widget.card-info>#card-info-btn {
	background-color: #3eb8be;
	border-radius: 8px;
}

#aside-content>.sticky_layout>.card-widget {
	background: rgba(255, 255, 255, .95);
}

/*文章页面*/
.layout>#post {
	background: rgba(255, 255, 255, .95);
    border-radius: 20px;
}

/*分类页面*/
.layout>#page {
	background: rgba(255, 255, 255, .95);
    border-radius: 20px;
}

/*时间轴页面*/
.layout>#archive {
	background: rgba(255, 255, 255, .95);
    border-radius: 20px;
}

  




  :root {
    --trans-light: rgba(255, 255, 255, 0.88);
    --trans-dark: rgba(25, 25, 25, 0.88);
    --border-style: 1px solid rgb(169, 169, 169);
    --backdrop-filter: blur(5px) saturate(150%);
  }
  
  /* 首页文章卡片 */
  #recent-posts > .recent-post-item {
    background: var(--trans-light);
    border-radius: 25px;
    border: var(--border-style);
  }
  
  /* 首页侧栏卡片 */
  #aside-content .card-widget {
    background: var(--trans-light);
    border-radius: 18px;
    border: var(--border-style);
  }
  
  /* 文章页、归档页、普通页面 */
  div#post,
  div#page,
  div#archive {
    background: var(--trans-light);
    border: var(--border-style);
    border-radius: 20px;
    --border-style: 2px solid rgb(82, 224, 132);
  }

  
  /* 导航栏 */
  #page-header.nav-fixed #nav {
	  background: rgba(255, 255, 255, 0.88);
  }
  
  [data-theme="dark"] #page-header.nav-fixed #nav {
	  background: rgba(0, 0, 0, 0.7) !important;
  }

  /* 夜间模式遮罩 */
  [data-theme="dark"] #recent-posts > .recent-post-item,
  [data-theme="dark"] #aside-content .card-widget,
  [data-theme="dark"] div#post,
  [data-theme="dark"] div#archive,
  [data-theme="dark"] div#page {
	  background: var(--trans-dark);
  }
  
  
  /* 夜间模式页脚页头遮罩透明 */
  [data-theme="dark"] #footer::before {
	/* background: transparent !important; */
    background: rgba(0, 0, 0, 0.7) !important;
  }
  [data-theme="dark"] #page-header::before {
	/* background: transparent !important;*/
    background: rgba(0, 0, 0, 0.7) !important;
  }
  
  /* 阅读模式 */
  .read-mode #aside-content .card-widget {
	  background: rgba(118, 238, 152, 0.5) !important;
  }
  .read-mode div#post {
	  background: rgba(114, 227, 146, 0.5) !important;
  }
  
  /* 夜间模式下的阅读模式 */
  [data-theme="dark"] .read-mode #aside-content .card-widget {
    background: rgba(25, 25, 25, 0.9) !important;
    color: #ffffff;
  }
  [data-theme="dark"] .read-mode div#post {
    background: rgba(25, 25, 25, 0.9) !important;
    color: #ffffff;
  }


  /* 导航栏居中 */
  #nav-right{
    flex:1 1 auto;
    justify-content: flex-end;
    margin-left: auto;
    display: flex;
    flex-wrap:nowrap;
  }

  /* 导航栏常驻beg *******************************************************************************/
  .nav-fixed #nav{
    transform: translateY(58px)!important;
    -webkit-transform: translateY(58px)!important;
    -moz-transform: translateY(58px)!important;
    -ms-transform: translateY(58px)!important;
    -o-transform: translateY(58px)!important;
  }
  #nav{
    transition: none!important;
    -webkit-transition: none!important;
    -moz-transition: none!important;
    -ms-transition: none!important;
    -o-transition: none!important;
  }
  /* 导航栏常驻end*******************************************************************************/

  /* 文章页下滑显示标题，上滑显示导航栏beg******************************************************************************/
  /*显示标题*/
  #page-name::before {
	font-size: 18px;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	color: white !important;
	top: 0;
	left: 0;
	background-color: var(--lyx-theme);
	transition: all .3s;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	opacity: 0;
	box-shadow: 0 0 3px var(--lyx-theme);
	line-height: 45px;
	/*如果垂直位置不居中可以微调此值，也可以删了*/
  }

  #page-name:hover:before {
	opacity: 1;
  }

  @media screen and (max-width:900px) {

	#page-name,
	#menus {
		display: none !important;
	}
  }

  #name-container {
	transition: all .3s;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
  }

  #name-container:hover {
	scale: 1.03
  }

  #page-name {
	position: relative;
	padding: 10px 30px
  }

  #nav {
	padding: 0 20px;
  }
/* 文章页下滑显示标题，上滑显示导航栏end******************************************************************************/

/* 最新文章beg******************************************************************************/
  /*最近文章*/
  #recent-posts>.recent-post-item {
	position: relative;
  }
  /* 最新文章图标 */
  .newPost-left,
  .newPost-right {
    position: absolute;
    top: 0;
    color: white;
    padding: 0 15px;
    background-color: #49b1f5;
    border-radius: 0 0 10px 10px;
  }

  .newPost-left {
    left: 15px;
  }

  .newPost-right {
    right: 15px;
  }
/* 最新文章end******************************************************************************/

/* 首页公告栏beg******************************************************************************/
  #notice-item {
    width: 100%;
    height: 25px;
    line-height: 25px;
  }
  #notice-item .li-style {
    width: 100%;
    height: 25px;
    font-weight: 500;
    text-align: center;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: 0.3s;
  }
  #noticeList {
    width: 100%;
    background: var(--card-bg);
    color: var(--font-color);
    margin-top: 1rem;
    padding: 0.6rem 1rem;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
  #noticeList .nlogo{
    color: var(--font-color);
    font-weight: 600;
    display: inline;
  }
  #noticeList .swiper-container{
    display: flex;
    flex: 1;
  }
  #noticeList i {
	  text-align: right;
  }
  .swiper-slide:hover {
	  color: #1fc7b6;
  }
/* 首页公告栏end******************************************************************************/