/*主题*/
@import "base.css";
@import "hit.css";
@import "article.css";

/*默认字体*/
body,td,th {
font-family: "'Helvetica Neue',Helvetica,Arial,'Microsoft Yahei','Hiragino Sans GB','Heiti SC','WenQuanYi Micro Hei',sans-serif,Arial Black";
font-size: 16px;;
/* text-align: center; */
}

body{
	padding:0;
	margin:0;
}

/*空白处blank：浅色*/
.light {
	background-color: var(--light-bg-color);
	color:var(--light-color);
}

/* 浮雕文字 */
.emboss{
	color:var(--light-color-2);
}

/* 深色背景 */
.dark {
	background-color:  var(--dark-bg-color);
	color: var(--dark-color);
}
/* 网站图标 */
.logo{
padding: 10px 20px;
display: block;
position: absolute;
top: 50px;
left: 50px;
}

.left{
text-align: left;
}

/* 主要内容-去掉头尾的部分 */
.area_content{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.imgbar{
	min-height:30px;
	padding: 5px;
}
.imgfile{
	/* height: 100px; */
	width: 80%;
}

/* 中部主要部分 */
.area_mid {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
/* 边栏 */
.sidebar{
	display: flex;
	flex-shrink: 0; /* 防止右边被压缩 */
	flex-direction: column;
	border-radius:5px;
	box-shadow: 2px 2px 2px 0px var(--light-shadow-color);
	min-width: var(--sidebar-collapsed-width);
	/* max-width: 300px; */
	width: var(--sidebar-expanded-width);
	border-right: 5%;
	margin-right:5%;
	background-color:var(--white); 
 	opacity:0.7;
}

/* 折叠后的样式 */
.sidebar.collapsed {
	width: 20px;
}

/* 切换按钮样式 */
.toggle-btn {
	/* position: absolute; */
	left: 0;
	/* top: 50%; */
	/* transform: translateX(-100%); */
	background: #333;
	color: white;
	border: none;
	padding: 5px;
	cursor: pointer;
	border-radius: 5px 5px 5px 5px;
	/* width: var(--sidebar-collapsed-width);; */
}

/* 边栏内容 除伸缩按钮*/
.sidebar-content {
	padding: 5px;
}

/* 图标样式 */
.icon {
	display: none;
	font-size: 20px;
}

/* 折叠时显示图标 */
.collapsed .full-text {
	display: none;
}

.collapsed .icon {
	display: block;
	text-align: center;
}

/* 边栏上的标签 */
.full-text h3 {
    background-color: var(--dark-bg-color);
	background-image:url('../img/soar_mini.png');
	background-size:contain;
	/* background-size: 100% 50%; */
	/* background-repeat: no-repeat round; */
	background-repeat: no-repeat;
	background-position: 5px;
	color: var(--light-bg-color);
	border-radius: 3px;
	padding: 0 4px 0 40px;
	margin: 3px;
}
/* 边栏上的列表 */
.full-text ul{padding: 0px 5px;}
.full-text ul li{
	color: var(--light-color);
		padding: 0px 5px;
		text-decoration: none;
		/* display:inline-block; */
		/* border-radius:5px; */
		list-style-type: none;
		vertical-align: middle;
	}
.full-text ul li:hover {background-color: var(--dark-bg-color)}
.full-text ul li a{text-decoration:none;color: var(--light-color);display:inline-block; padding: 3px;}
.full-text ul li a:hover{text-decoration:none; color: var(--light-bg-color);}

/* 添加鼠标悬停展开效果 */
/* @media (hover: hover) {
    .sidebar.collapsed:hover {
        width: var(--sidebar-expanded-width);
    }
} */


/* 主要内容中的文字内容部分 */
.content{
	flex-grow: 1; /* 左边填满剩余空间 */
	border-radius:5px;
	box-shadow: 2px 2px 2px 0px var(--light-shadow-color);
	min-width: 200px;
	min-height: 600px;
	margin-left:5%;
	margin-right:0%;
	background-color:var(--white); 
 	opacity:0.75;  
	padding: 10px;
}

/* .filelist { */
	/* box-shadow: px 4px 4px 0px var(--shadow-color); */
/* } */

.filelist ul{
	display: flex;
	flex-direction: column;
    font-size: 16px;
    border: none;
    cursor: pointer;
	padding: 5px;
	border-radius:10px;
	border: #333;
}
.filelist ul li{
    color: var(--light-color);
    background-attachment: var(--light-bg-color);
    text-decoration: none;
    display:inline-block;
    vertical-align: middle;
    padding: 4px;
    border-radius:5px;
}
.filelist ul li:hover {background-color: var(--light-bg-color-2);color:var(--light-color);}
.filelist ul li a{text-decoration:none;color: var(--light-color);display:block;padding: 5px; border-radius:5px;} /*padding: 5px;*/
.filelist ul li a:hover{text-decoration:none; background-color: var(--foucs-bg-color);color: var(--foucs-color);}

.userinfo{
	display: flex;
	flex-direction: column;
}
.userinfo img{
	width: 70px;
	height: 70px;
}
.username{
	font-size: 24px;
}
.postlist{
	display: flex;
	flex-direction: row;
}
.postlist img {
	width: 32px;
	width: 32px;
}

/* 底端版权备注 */
.bottom_bar{
/* position:absolute; */
display: flex;
bottom: 20px;
text-align: center;
width:100%;
justify-content:center;
font-size: 9pt;
}

.blog_body{
	display: flex;
	flex-direction: row;
	justify-content:center;
	min-height: 500px;
}

.right_sidebar{
	display: flex;
	flex-direction: column;
	justify-content:center;
}