javlibrary mobile style by Haleclipse

/* ==UserStyle==
@name        javlibrary
@namespace    USO Archive
@author       Haleclipse
@description  just make javlibrary more close to modern.建议搭配油猴之“老司机”US食用，效果更佳；
@version      20191024.08.47
@license      CC-BY-4.0
@preprocessor uso
==/UserStyle== */
@-moz-document domain(javlibrary.com) {
	body,
	body *,
	html * {
		font-family: "微软雅黑", "MSYH", "Microsoft Yahei"
	}

	@media (max-width: 600px) {
		body.main {
			min-width: auto !important;
		}

		#topbanner11 {
			display: none !important;
		}

		#topmenu {
			padding: 0 !important;
		}

		#topmenu .searchbar {
			padding-left: 0 !important;
			margin-top: 20px !important;
			width: 100% !important;
		}

		#idsearchbox {
			margin-left: 50px;
			padding: 5px;
		}

		#idsearchboxmask {
			padding: 10px;
		}

		#toplogo {
			padding: 0 !important;
		}

		#toplogo .sitelogo {
			display: none;
		}

		#topbanner11 {
			display: none;
		}

		#rightcolumn {
			margin: 0 !important
		}

		#rightcolumn .textbox {
			padding: 30px !important;
			margin: 0 !important;
		}

		tr td:first-child {
			height: 30px;
			white-space: normal;
		}

		tr.dimrow td:nth-child(n+3) {
			display: none !important;
		}

		tr td:nth-last-child(-n+4):not(.t):not(.info):not(.toolbar):not(.advsearch) {
			display: none !important;
		}

		table:empty {
			display: none !important;
		}
		
		td.info:empty {
			display: none !important;
		}
		
		td.t > div.posttext {
			text-align: center;
			padding-left: 10px;
			padding-right: 10px;
			
		}
		
		table.post td {
			display: block;
			/* 将所有td展示为块级元素，独占一行 */
			width: 100%;
			/* 让td宽度扩展到整个表格宽度 */
		}
		/* 为了更精确地控制布局 也可以给每个td添加必要的内外边距 */
		table.post td.info {
			display: flex;
			/* 设置td使用Flexbox布局 */
			align-items: center;
			/* 垂直居中各元素 */
			justify-content: flex-start;
			/* 从行首开始排列 */
			gap: 10px;
			/* 设置元素之间的间隔 */
		}
		table.post td.info > div,
		/* 直接包含在info td中的div */
		table.post td.info > a {
			/* 直接包含在info td中的a标签 */
			flex: none;
			/* 未特别指定占比，按内容大小自动调整 */
		}
		
		tr td.toolbar:nth-child(2) ~ td.info:nth-child(1) {
			display: none;
			/* 隐藏前面的第一个info td元素 */
		}

		table.post {
			border-collapse: collapse;
			/* 合并边框 */
		}
		table.post td,
		table.post th {
			border-left: none !important;
			/* 去除单元格的左边框 */
			border-right: none !important;
			/* 去除单元格的右边框 */
		}

		/* 		tr td {
			display: block;
			width: 100%;
		}

		tr {
			display: flex;
			flex-wrap: wrap;
		}
		
		tr td:first-child {
			flex: 0 0 100%;
		}
		
		tr td:not(:first-child) {
			flex: 1;
		}

		tr td:nth-last-child(2) {
			display: none !important;
		} */
		.videothumblist {
			padding: 10px !important;
			height: 100% !important;
		}

		.videothumblist .videos .video {
			min-width: 50% !important;
		}
		
		.page_selector {
			margin-top: 30px;
		}

		.page_selector a.page,
		.page_selector span,
		.page_selector span.first,
		.page_selector span.prev {
			padding: 10px !important;
		}


		table.about {
			display: none !important;
		}

		.titlebox {
			display: none;
		}

		.bottombanner13 {
			display: none !important;
		}

		#bottomcopyright {
			display: none;
		}

		#bottommenu {
			padding: 0 !important;
		}

		#sder43f {
			display: none;
		}
	}

	body.main {
		background: #FFF !important;
		width: 100%;
		overflow-x: hidden;
		overflow-y: scroll;
	}

	.videothumblist {
		height: auto !important
	}

	a:link {
		color: #25C6FC
	}

	a:visited {
		color: #1F6FB5
	}

	a:hover,
	a:active {
		color: #FF534D;
	}

	input,
	label,
	select,
	button,
	textarea {
		margin: 0;
		padding: 0;
		display: inline-block;
		vertical-align: middle;
		white-space: normal;
		background: none;
		line-height: 1;
		border: 1px solid rgba(0, 0, 0, 0.5);
		background-color: #fff
	}

	input:focus {
		outline: 0
	}

	input,
	textarea {
		box-sizing: content-box
	}

	.clear:after {
		display: block;
		content: "";
		height: 0;
		width: 0;
		clear: both;
		float: none
	}

	#topmenu {
		background: #344047;
		height: auto;
		padding: .3em 0 .2rem 2.5rem;
	}

	#topmenu:after {
		display: block;
		content: "";
		height: 0;
		width: 0;
		clear: both;
		float: none
	}

	#topmenu .searchbar {
		margin: 0;
		position: static;
		padding-left: 1em;
		float: left
	}

	#topmenu .searchbar #idsearchbox {
		font-size: 12px;
		height: auto;
		line-height: 1.5;
		background-image: none;
		box-shadow: none;
		border-radius: .3em
	}

	#topmenu .searchbar #idsearchboxmask {
		font-size: 12px;
		line-height: 1.35em;
		text-indent: .5em;
		margin: .3em 0 0 4.5em
	}

	#topmenu .searchbar #idsearchbutton {
		background: #fb5557;
		border: 0;
		content: "Serch";
		padding: .27em 1em;
		font-size: 12px;
		height: auto;
		width: auto;
		color: #fff;
		font-weight: 300;
		margin-left: .75em;
		font-family: "微软雅黑", "MSYH", "Microsoft Yahei";
		border-radius: .3em;
		box-shadow: none;
		cursor: pointer
	}

	#topmenu .searchbar #idsearchbutton:active,
	#topmenu .searchbar #idsearchbutton:hover {
		position: static
	}

	#topmenu .searchbar td.advsearch {
		width: auto;
		padding: 0;
		vertical-align: middle;
		color: rgba(255, 255, 255, 0)
	}

	#topmenu .searchbar td.advsearch a,
	#topmenu .searchbar td.advsearch a:hover,
	#topmenu .searchbar td.advsearch a:active {
		color: #fff;
		border-radius: .3em;
		margin: 0;
		display: inline-block;
		padding: .1em 1em;
		background: #fb5557;
		font-weight: 300
	}

	#topmenu .searchbar td.advsearch a:hover,
	#topmenu .searchbar td.advsearch a:active {
		background: #fb5557
	}

	#topmenu .searchbar td.socialmedia {
		display: none
	}

	#topmenu .socialmedia {
		content: ""
	}

	#topmenu .menutext {
		line-height: 1.7em;
		position: static;
		float: right;
		margin-top: 0;
		font-size: 12px;
		margin-right: 3rem;
		color: rgba(255, 255, 255, 0.5)
	}

	#topmenu .menutext a,
	#topmenu .menutext a:link,
	#topmenu .menutext a:visited {
		color: #fff;
		margin: 0 .5em
	}

	#topmenu .menutext a:hover,
	#topmenu .menutext a:active {
		color: rgba(255, 255, 255, 0.6)
	}

	#toplogo {
		display: block;
		height: 40px;
		width: auto;
		box-sizing: content-box;
		padding: .5rem 3.5rem;
	}

	#toplogo .sitelogo,
	#topbanner11 {
		height: 40px;
		position: relative;
		top: 0;
		left: 0;
	}

	#toplogo .sitelogo {
		position: absolute;
		margin: .5rem 0 0 3.5rem;
	}

	#toplogo img {
		display: block;
		height: 40px !important;
		width: auto !important;
	}

	#content {
		background: #fff;
		margin: 0;
		padding: 0;
		width: 100%;
		border: 0
	}

	#leftmenu {
		width: 10em;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		background: #fff;
		border: 0;
		border-right: .2rem solid #fb5557;
		transition: margin-left .3s;
		z-index: 9;
		margin-left: -10em;
		box-shadow: 0 0 1rem rgba(0, 0, 0, .25)
	}

	#leftmenu:before {
		content: "MENU";
		display: block;
		background: #fb5557;
		color: #FFF;
		text-align: center;
		height: 2rem;
		width: 4rem;
		line-height: 2rem;
		font-size: 1rem;
		position: absolute;
		right: -3rem;
		top: 3rem;
		transform: rotate(90deg);
		transition: all .3s;
	}

	#leftmenu:hover {
		margin-left: 0;
		transition: all .3s
	}

	/* #leftmenu:hover:before {
    right: -1rem;
    transition: all .3s;
} */
	#leftmenu .menul1 {
		background: #fff;
		margin: 0
	}

	#leftmenu .category {
		font-size: 14px;
		color: #34495e;
		line-height: 2em;
		background: rgba(149, 165, 165, 0.1);
		border-bottom: 1px solid rgba(255, 255, 255, 0.2)
	}

	#leftmenu li {
		border: 0
	}

	#leftmenu li a {
		font-size: 12px;
		background: transparent;
		color: #34495e;
		border: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		text-indent: 1.5em;
		border-left: 0;
		line-height: 2em;
		padding: .25rem;

		transition: all .2s
	}

	#leftmenu li a:last-child {
		border: 0
	}

	#leftmenu a:before {
		content: "";
		width: 0;
		height: 0;
		border-bottom: .3rem solid transparent;
		border-top: .3rem solid transparent;
		border-left: .3rem solid rgba(52, 73, 94, 0.2);
		position: absolute;
		margin-top: .4rem;
		margin-left: -.75rem;
		font-size: 0;
		line-height: 0;

		transition: all .2s
	}

	#leftmenu li a {
		border: 0;
	}

	#leftmenu li a:hover {
		background: #fb5557;
		color: #FFF;
		border: 0;
		padding-left: 1rem;

		transition: all .2s
	}

	#leftmenu a:hover:before {
		border-left-color: #FFF;

		transition: all .2s
	}

	#leftmenu table {
		display: none !important;
	}
	#rightcolumn {
		padding: 0;
		margin-left: 2rem;
		border: 0
	}

	#rightcolumn .displaymode {
		box-sizing: border-box;
		padding-left: 15em;
		position: absolute;
		right: 1em;
		margin-top: -1.75em
	}

	#rightcolumn .displaymode .left {
		font-size: 12px;
		color: #34495e
	}

	#rightcolumn .displaymode a {
		color: #34495e
	}

	#rightcolumn .boxtitle {
		position: static;
		font-size: 14px;
		text-indent: 2em;
		color: #34495e;
		display: block;
		padding: .5em 2em;
		background: rgba(0, 0, 0, 0.02);
		width: auto
	}

	#rightcolumn #video_title {
		font-size: 14px;
		padding: 1em;
		border-bottom: 1px solid #fb5557
	}

	#rightcolumn #video_title a {
		color: #fb5557
	}

	#rightcolumn .post-body {
		width: 99%;
		margin: 0 auto
	}
	#rightcolumn #video_jacket {
		min-width: 20rem;
		padding: .5rem;
	}
	#rightcolumn #video_jacket img {
		margin: 0 auto;
		border-radius: .5em;
		width: 100%;
		max-width: 60rem;
		display: block
	}

	#rightcolumn #video_info .item table {
		border: 0
	}

	#rightcolumn #video_info .item .header {
		width: 6em
	}

	#rightcolumn #video_info .item .text {
		padding: 0 2em
	}

	#ri...