@import "_partial/comment"
div.postPage{
	margin-top -13.5vh
	overflow unset
	div.postMeta {
		padding 1.5rem 0
		width 100%
		height 2.5rem
		display flex
		justify-content center
		align-items center
		overflow hidden
		div.mdui-chip {
			margin 0 0.5rem
			span.mdui-chip-title{
				a{
					text-decoration none
				}
			}
		}
	}
	div.mdui-card-content.mdui-typo{
		img,
		p img{
			max-height 75vh
			max-width 100%!important
			width 100%
			object-fit contain
			object-position center
		}
		p div.imgDesc{
			text-align center
			font-size 0.9rem
			color #999
			margin-top 0.5rem
		}
		blockquote.mdx-warn {
			border-left-color #c80000!important
			color #c80000!important
		}
		div.mdui-panel{
			margin 1rem 0
			box-shadow none
			div.mdui-panel-item {
				border-radius 8px!important
				box-shadow none
				background-color #f4f4f4
				div.mdui-panel-item-body{
					overflow scroll
				}
			}
		}
		div.mdx-github-card{
			margin 1rem 0
		}
		div.mdx-github-card div.mdx-github-info-card{
			border-radius 8px
			background #414141
			height 100pt
			line-height 1.8
			display flex
			flex-direction column
			justify-content space-between
			padding 1.2rem
			*{
				transition all .3s ease
			}
			div.upperLayer a{
				font-size 15px
				display flex 
				justify-content flex-start
				align-items center
				text-decoration none
				border none
				color #fff
				opacity .5
				svg{
					height 20px
					width 20px
				}
				&:before{
					content unset
				}
			}
			div.middleLayer{
				a.repoLink{
					font-size 28px
					color #FFF
					span.owner{
						opacity .5
					}
					&:before{
						content unset
					}
					&:hover{
						opacity .7
					}
				}
				div.repoDescription{
					font-size 15px
					color #fff
					display flex
					div.mdui-spinner{
						position relative
						left calc(50% - 10px)
					}
				}
			}
			div.lowerLayer{
				display flex
				flex-direction row
				justify-content space-between
				font-size 15px
				color #fff
				a{
					text-decoration none
					color #fff
					opacity .5
					&:hover{
						opacity .7
					}
					&:before{
						content unset
					}
				}
			}
		}
		@import "_partial/highlight"
	}
	div.pageEnd{
		background-color #ededed
		padding 25px 10px
		max-width 90vw
		margin 20px 0
		overflow unset
		button.mdui-fab.shareBtn{
			transform translate(-65%,-100%)
			position absolute
		}
		div#shareToWechatQRCodeDialog{
			width 300px
			div.mdui-container.shareToWechatQRCodeOuterContainer{
				width 300px
				height 315px
				text-align center
				div#shareToWechatQRCodeContainer{
					display flex
					justify-content center
					align-items center
					img {
						margin-bottom 15px
					}
				}
			}
		}
		div#generateSharePictureDialog{
			min-height 620px !important
			display flex!important
			flex-direction column
			justify-content space-between
			div.mdui-container.generateSharePictureDialogOuterContainer{
				text-align center
				width 100%
				padding 0
				div#generateSharePictureDialogContainer{
					width 100%
					canvas{
						width 100%
						max-height 500px
						object-fit scale-down
					}
				}
			}
			div.generateSharePictureDialogActionBar{
				display flex
				flex-direction row
			}
		}
		div.postTags{
			i.mdui-icon{
				font-size 18px
			}
			a.tag-none-link {
				text-decoration none
				transition opacity .05s ease
				&:before{
					content " #"
				}
				&:last-child {
					margin-right 0
				}
				&:hover{
					opacity .7
				}
			}
		}
		div.nav{
			margin-top 1rem
			height 2.5rem
			display flex
			justify-content space-between
			align-items center
			a{
				display flex
				justify-content center
				align-items center
				text-decoration none
				transition opacity .05s ease
				&:first-child{
					margin-right 1.5rem
				}
				&:last-child{
					margin-left 1.5rem
				}
				&:hover{
					opacity .7
				}
			}
		}
	}
	svg#mdxReadProgress{
		pointer-events: none
		z-index 200
		circle#mdxReadProgressRing{
			transition all .1s ease
			stroke-dasharray 166.5
			stroke-dashoffset 166.5
			transform rotateZ(-270deg) rotateY(180deg)
			transform-origin center
		}
		&.hide{
			opacity 0
		}
	}
	div#imgBox{
		display none
		position fixed
		top 0
		left 0
		height 100vh
		width 100vw
		z-index 100000000
		justify-content center
		align-items center
		flex-direction column
		background-color #000000bf
		&.show{
			display flex
			animation imgBoxFadeIn .15s linear
			@keyframes imgBoxFadeIn {
				0%{
					opacity 0
				}
				100%{
					opacity 1
				}
			}
		}
		&.removing{
			display flex
			animation imgBoxFadeOut .16s linear
			@keyframes imgBoxFadeOut {
				0%{
					opacity 1
				}
				100%{
					opacity 0
				}
			}
		}
		img#imgBoxImage{
			max-height 90vh
			max-width 90vw
			cursor zoom-out !important
		}
		div#imgBoxDescription{
			margin 10px
			color #FFF
			font-size 20px
		}
	}
}