@import "../default-skin.less";
@import "../../global/mixin.less";

// 触屏点击效果
.s_phone {
	.c_table {
		table {
			tr td a.active { color:@primary;}
			thead tr th.desc.active,
			thead tr th.asc.active { color:@bg; background:@secondary;}
			td.fn.active { background:@bg-dark-0-3 !important; color:@fg-light-1;}
		}
		.body {
			.wrapper { min-height:100%; display:inline-block; min-width:100%; vertical-align:top;}
		}
	}
	.c_table-th-hover table thead tr th.active { background:@secondary;}
	.c_table-hover table tbody tr.active td { background:@primary-light-7 !important; color:@fg-light-1 !important; }
}



// 自动适应手机
.s_phone .c_table-phone-v {
	background:@bg-dark-0-4; padding:0 0.5*@gap; .x_bs; overflow:auto;
	&:after { height:0.5*@gap; content:""; display:block;}
	.top { display:none;}
	.body {
		margin:0 -0.5*@gap -0.5*@gap -0.5*@gap; .x_bs; display:block;
		> .wrapper {
			overflow:hidden;
			> table {
				margin:0 0.5*@gap 0.5*@gap 0.5*@gap;
			}
		}
	}
	table {
		display:block; width:auto;
		tbody tr { height:auto;}
		tr td.wrap,
		tr td:not(.fn):not(.key) { text-align:right !important;}
		tr td.e_left-phone:not(.fn):not(.key),
		tr td.e_left:not(.fn):not(.key) { text-align:left !important;}
		tr td:empty { display:none;}
	}
	thead { display:none;}
	tbody { display:block;}
	tr { display:flex; border-bottom:1px solid @fg-light-8; flex-direction:column; position:relative;}
	td.fn-phone-inline,
	td:not(.fn) { display:block; text-align:right; order:2; height:auto; border:none; border-left:1px solid @fg-light-8; border-right:1px solid @fg-light-8; color:@fg-light-5; white-space:normal; word-break:break-all; word-wrap:break-word; width:auto !important; background:@bg;}
	td.fn:not(.fn-phone-inline) { 
		padding:0; width:1+2*@gap; position:absolute; right:0; top:0; background:none; height:(1+2*@gap)*1.1667; line-height:(1+2*@gap)*1.1667; width:(1+2*@gap)*1.1667; padding:0; border:none; color:@fg;
		&[data-title]:before { display:none;}
		span { color:@fg;}
	}
	td.fn-phone-inline {
		position:static; text-align:center; text-align:right !important; width:auto; border-left:1px solid @fg-light-8; border-right:1px solid @fg-light-8; color:@primary;
		&[data-title]:before { display:inline-block;}
	}
	td.fn:not(.fn-phone-inline)~.fn:not(.fn-phone-inline) { right:1+2*@gap;}
	td.fn:not(.fn-phone-inline)~.fn:not(.fn-phone-inline)~.fn:not(.fn-phone-inline) { right:(1+2*@gap)*2;}
	td.fn:not(.fn-phone-inline)~.fn:not(.fn-phone-inline)~.fn:not(.fn-phone-inline)~.fn:not(.fn-phone-inline) { right:(1+2*@gap)*3;}
	td.fn:not(.fn-phone-inline)~.fn:not(.fn-phone-inline)~.fn:not(.fn-phone-inline)~.fn:not(.fn-phone-inline)~.fn:not(.fn-phone-inline) { right:(1+2*@gap)*4;}
	td.fn:not(.fn-phone-inline)~.fn:not(.fn-phone-inline)~.fn:not(.fn-phone-inline)~.fn:not(.fn-phone-inline)~.fn:not(.fn-phone-inline)~.fn:not(.fn-phone-inline) { right:(1+2*@gap)*5;}
	td.fn:not(.fn-phone-inline).active { background:@bg-dark-2 !important; color:@fg-light-1;}
	td[data-title]:before { content:attr(data-title); float:left; color:@primary-dark-1; padding-right:1em; color:@fg-light-1;}
	td.key {
		background:@bg-dark-0-4; order:1; font-size:116.67%; line-height:1+2*@gap; text-align:left; border:none; border-bottom:1px solid @fg-light-8; padding:0 0 0 0.8571*@gap; color:@fg-light-3; font-weight:bold; overflow:hidden;
		&[data-title]:before { display:none; font-size:0;}
	}
	tr.on {
		background:none;
		&:before { content:""; position:absolute; top:(1+2*@gap)*1.1667; pointer-events:none; left:0; bottom:0; right:0; border:1px solid @danger;}
	}
}


.s_phone .c_table-phone-v[class*="c_table-row"] {
	height:auto;
}
.s_phone .c_table-phone-v[class*="c_table-row"].c_table-phone-full,
.s_phone .c_table-phone-full { box-sizing:border-box; height:100%;}



.s_phone .c_table-phone-v.c_table-checkbox {
	table tbody tr td:not(.fn):not(.key):first-child { position:absolute; left:0; top:@gap*1.1667; background:none; border:none; padding:0; width:1+2*@gap !important; text-align:center !important;}
	table tbody tr td:not(.fn):not(.key):first-child input { vertical-align:top;}
	td.key { padding-left:1+2*@gap;}
	tr.on {
		td:first-child { background:@bg-dark-0-4 !important;}
	}
}



.s_phone {
	.c_table-nodata.c_table-phone-v > .c_msg { top:0;}
}