@import url("/css/shared/markdown.css");
/* #write-form */
#write-form>.field>input[type="text"]{
	flex:auto;
}
#write-form>.field>w-taginput{
	flex:auto;color:var(--text-color);
  border:1px solid var(--light-gray-4);
}
#write-form>.field>w-taginput:focus{
  border:1px solid var(--normal-gray);
}
#write-form>.editor{
	display:block;line-height:25px;font-size:0.9rem;
	margin-top:15px;text-align:left;
}
#write-form>.editor>.textarea{
	width:100%;resize:none;box-sizing:border-box;
	border:1px solid var(--light-gray-4);color:var(--text-color);
	padding:10px 15px;height:500px;overflow-y:auto;
	display:none;
}
#write-form>.editor>.textarea:focus{
  border:1px solid var(--normal-gray);
}
#write-form>.editor>.current{
	display:block;
}
#write-form>.editor>.toolbar{
  display:flex;align-items:center;
	padding:6px 10px;border:1px solid var(--light-gray-4);border-top:none;
}
#write-form>.editor>.toolbar>.tags{
  display:flex;align-items:center;
  flex:auto;
}
#write-form>.editor>.toolbar>.tags>.tag{
	padding:6px 10px;cursor:pointer;
}
#write-form>.editor>.toolbar>.tags>.current{
	font-weight:bold;
}
#write-form>.editor>.toolbar>.attachment{
  text-align:right;
	cursor:pointer;
}
#write-form>.editor>.toolbar>.attachment>input[type="file"]{
	width:1px;height:1px;
}
#write-form>.field>.draft{
	flex:auto;text-align:right;color:var(--normal-gray);
	animation:fade-out 5s;
}
/* #author-index */
#author-index>.authors{
	display:grid;grid-template:auto / 1fr 1fr;
	gap:20px;padding:10px 0px;
}
#author-index>.authors>.author{
	display:grid;grid-template:25px 25px / 60px auto;
	grid-template-areas:
		"picture name"
		"picture latest-topic";
	align-items:center;
}
#author-index>.authors>.author>img.picture{
	grid-area:picture;
	width:48px;height:48px;object-fit:cover;border-radius:50%;
}
#author-index>.authors>.author>.name{
	grid-area:name;font-weight:bold;
}
#author-index>.authors>.author>.latest-topic{
	grid-area:latest-topic;
	overflow-x:hidden;white-space:nowrap;text-overflow:ellipsis;
}
@media (max-width:600px){
	#author-index>.authors{
		grid-template:auto / 1fr;
	}
}
/* #topic-index */
#topic-index{
	display:flex;
}
#topic-index>.left{
	flex:auto;margin-right:30px;
}
#topic-index>.right{
	flex:none;width:250px;
}
@media (max-width:800px){
	#topic-index{
		display:block;
	}
	#topic-index>.left{
		padding:0px;margin-right:0px;
	}
	#topic-index>.right{
		width:auto;padding:0px;
	}
}
/* section>.author-profile */
section>.author-profile{
	display:grid;grid-template:30px 30px 30px / 90px auto;
	grid-template-areas:
		"picture name"
		"picture variety"
		"picture counting";
	column-gap:15px;
	align-items:center;
}
section>.author-profile>img.picture{
	grid-area:picture;
	width:90px;height:90px;object-fit:cover;border-radius:50%;
}
section>.author-profile>.name{
	grid-area:name;
}
section>.author-profile>.keywords{
	grid-area:variety;
	overflow-x:hidden;white-space:nowrap;text-overflow:ellipsis;
}
section>.author-profile>.counting{
	grid-area:counting;
}
/* section .topics */
section .topics>.topic{
	line-height:1.5rem;
	margin-bottom:20px;background-color:var(--light-gray-5);padding:10px;
}
section .topics>.topic>.title{
	display:block;cursor:pointer;
	font-weight:bold;margin-bottom:5px;
}
section .topics>.topic>.stats{
	font-size:0.9rem;
	margin-bottom:5px;
}
section .topics>.topic>.keywords{
	font-size:0.9rem;margin-bottom:10px;
}
section .topics>.topic>.keywords>.keyword, section>.author-profile>.keywords>.keyword{
	color:var(--brand-color);background-color:var(--brand-bg-color);
	padding:3px 5px;margin-right:5px;cursor:pointer;white-space:nowrap;
}
section .topics>.topic>.keywords>.keyword:hover,
section .topics>.topic>.keywords>.keyword:active,
section>.author-profile>.keywords>.keyword:hover,
section>.author-profile>.keywords>.keyword:active{
	background-color:var(--brand-hover-bg-color);
}
section .topics>.topic>.infos{
	display:flex;justify-content:flex-end;align-items:center;font-size:0.9rem;
}
section .topics>.topic>.infos>.author{
	display:flex;align-items:center;margin-right:5px;
}
section .topics>.topic>.infos>.author>img.avatar{
	width:27px;height:27px;border-radius:50%;border:1px solid white;
}
section .topics>.topic>.infos>.author>.name{
	margin-left:5px;
}
/* section .trends */
section .trends{
	margin-left:10px;
}
section .trends>.keyword{
	display:block;padding:2px 0px;
	opacity:0.85;
}
section .trends>.keyword:hover,
section .trends>.keyword:active{
	opacity:1;
}
/* section>.topic */
section>.topic>.nav{
	display:flex;align-items:center;
	padding:10px 15px;
}
section>.topic>.nav>.author{
	flex:auto;
	display:flex;align-items:center;cursor:pointer;
}
section>.topic>.nav>.author>.picture{
	width:30px;height:30px;object-fit:cover;border-radius:50%;
}
section>.topic>.nav>.author>.name{
	margin-left:10px;
}
section>.topic>.nav>.action{
	flex:none;width:90px;text-align:right;
}
section>.topic>.nav>.action>.icon{
	width:30px;height:30px;margin-left:10px;
	cursor:pointer;opacity:0.15
}
section>.topic>.nav>.action>.icon:hover,
section>.topic>.nav>.action>.icon:active{
	opacity:1;
}
/* section>.topic>.main */
section>.topic>.main{
	padding:10px 15px;margin-bottom:15px;
}
section>.topic>.main>.title{
	font-size:1.4rem;font-weight:bold;
	margin-bottom:20px;
}
section>.topic>.main>.datetime{
	font-size:0.9rem;text-align:right;
	border-bottom:1px solid var(--normal-gray);
	padding-bottom:10px;margin-bottom:30px;
}
section>.topic>.main>.keywords{
	font-size:0.9rem;text-align:right;
	margin-top:30px;margin-bottom:10px;
}
section>.topic>.main>.keywords>.keyword{
	color:var(--brand-color);background-color:var(--brand-bg-color);
	padding:3px 5px;margin-left:5px;cursor:pointer;
}
section>.topic>.main>.keywords>.keyword:hover,
section>.topic>.main>.keywords>.keyword:active{
	background-color:var(--brand-hover-bg-color);
}
section>.topic>.link{
	padding:5px 15px;
	cursor:pointer;overflow-x:hidden;white-space:nowrap
}
/* section>.topic>.likes */
section>.topic>.likes{
	display:flex;
	padding:5px 15px;
}
section>.topic>.likes>.action{
	display:flex;align-items:center;justify-content:flex-end;
	flex:none;padding:5px 10px;cursor:pointer;
}
section>.topic>.likes>.action:hover,
section>.topic>.likes>.action:active{
	background-color:var(--light-gray-5);
}
section>.topic>.likes>.action>.icon{
	width:30px;height:30px;margin-right:5px;
	background-image:url("/images/like-inactive.png");
	background-size:100% 100%;
}
section>.topic>.likes>.action-liked>.icon{
	background-image:url("/images/like-active.png");
}
section>.topic>.likes>.action-liked>.text{
	color:var(--like-color);
}
section>.topic>.likes>.users{
	font-size:0.9rem;
	padding:5px 0px;margin-right:10px;
}
section>.topic>.likes>.users-clickable{
	cursor:pointer;
}
section>.topic>.likes>.users-clickable:hover,
section>.topic>.likes>.users-clickable:active{
	text-decoration:underline;
}
/* section>.topic>.comments */
section>.topic>.comments{
	padding:5px 15px;
}
section>.topic>.comments>.count{
	cursor:pointer;
}
section>.topic>.comments>.count:hover,
section>.topic>.comments>.count:active{
	text-decoration:underline;
}
section>.topic>.comments>.comment{
	position:relative;
	background-color:#ffffff;padding:20px 10px;
	border-bottom:1px solid var(--light-gray-5);
}
section>.topic>.comments>.comment>.avatar-commenter{
	display:flex;align-items:center;gap:5px;
	margin-bottom:5px;
}
section>.topic>.comments>.comment>.avatar-commenter>a>.avatar{
	visibility:hidden;width:30px;height:30px;
	border-radius:50%;
	vertical-align:middle;
}
section>.topic>.comments>.comment>.commenter{
	font-weight:bold;display:block;
}
section>.topic>.comments>.comment>.content{
	word-break:break-all;
}
section>.topic>.comments>.comment>.delete{
	position:absolute;top:0px;right:0px;cursor:pointer;opacity:0.3;
	width:30px;height:30px;display:flex;justify-content:center;align-items:center;
}
section>.topic>.comments>.comment>.delete:hover,
section>.topic>.comments>.comment>.delete:active{
	opacity:1;
}
section>.topic>.comments>.form{
	display:flex;align-items:flex-end;width:100%;
	background-color:white;margin-top:10px;margin-bottom:5px;
}
section>.topic>.comments>.form>textarea{
	flex:auto;
}
section>.topic>.comments>.form>.btn{
	width:32px;height:32px;padding:0px 5px;cursor:pointer;
	opacity:0.75;
}
section>.topic>.comments>.form>.btn:hover,
section>.topic>.comments>.form>.btn:active{
	opacity:1;
}