Light12306/Web12306/css/ui/passenger-selector.css

/*联系人搜索*/

.passenger-selector-wrap {
	position: relative;
	overflow: visible;
	display: inline-block;
}

	.passenger-selector-wrap section div.loading-indicator {
		display: none;
	}

	.passenger-selector-wrap section.loading ul,
	.passenger-selector-wrap section.loading .passenger-pager {
		display: none;
	}

	.passenger-selector-wrap section.loading div.loading-indicator {
		display: block;
	}

.passenger-selector {
	position: absolute;
	z-index: 100;
	left: 0;
	top: 30px;
	box-shadow: 3px 3px 10px rgba(110, 110, 110, 0.5);
	border-radius: 0 5px 5px 5px;
	border: 1px solid #c7c7c7;
	background-color: #ffffff;
	padding: 6px;
	display: none;
	min-width: 600px;
}

.passenger-notverified {
	display: none;
}

.passenger-notverified a {
	color: red;
}

	.passenger-notverified a:hover {
		text-decoration: underline;
	}

.passenger-selector:hover {
	display: block;
}

.passenger-selector .passenger-search {
	/*
			TODO 这里要搜索何用？
			*/
	display: none;
}

.passenger-selector button {
	color: #616161;
	height: 26px;
	background: linear-gradient(180deg, #f4f4f4, #e9e8e9);
	border: 1px solid #d1d1d1;
	border-radius: 2px;
	cursor: pointer;
}

	.passenger-selector button:hover {
		background: linear-gradient(180deg, #fefefe, #f3f3f3);
		border: 1px solid #e1e1e1;
	}

	.passenger-selector button:active {
		background: linear-gradient(180deg, #e9e8e9, #f4f4f4);
		border: 1px solid #d1d1d1;
	}

.passenger-selector .passenger-search div.fr:before {
	position: absolute;
	right: 6px;
	top: 6px;
	color: #6c6f83;
}

.passenger-selector .passenger-search-key {
	line-height: 16px;
	padding: 4px 24px 4px 6px;
	border: 1px solid #c7c7c7;
	margin: 0;
	width: 180px;
	border-radius: 2px;
}

.passenger-selector ul {
	width: 500px;
	margin-top: 6px;
}

	.passenger-selector ul li {
		width: 300px;
		float: left;
		width: 98px;
		line-height: 35px;
		border: 1px solid #e1e1e1;
		text-align: center;
		color: #676767;
		cursor: pointer;
		position: relative;
		margin-top: -1px;
		margin-left: -1px;
	}

		.passenger-selector ul li.selected {
			border-right-color: #ebd0b3;
			border-bottom-color: #ebd0b3;
			background-color: #fff5e6;
			color: #f2983a;
		}

#passenger-selector ul li.selected:after {
	border-top: 1px solid #ebd0b3;
	width: 100%;
	height: 0;
	position: absolute;
	top: -1px;
	left: 0;
	content: '';
}

.passenger-selector ul li.selected:before {
	border-left: 1px solid #ebd0b3;
	height: 100%;
	width: 0;
	position: absolute;
	top: 0;
	left: -1px;
	content: '';
}

.passenger-selector ul li:hover {
	border-right-color: #e19b23;
	border-bottom-color: #e19b23;
	background: linear-gradient(to top, #f78c21, #fca818);
	color: #fef3ea;
}

	.passenger-selector ul li:hover:after {
		border-top: 1px solid #e19b23;
		width: 100%;
		height: 0;
		position: absolute;
		top: -1px;
		left: 0;
		content: '';
	}

	.passenger-selector ul li:hover:before {
		border-left: 1px solid #e19b23;
		height: 100%;
		width: 0;
		position: absolute;
		top: 0;
		left: -1px;
		content: '';
	}

.passenger-selector .passenger-pager {
	text-align: center;
	width: 100%;
}

	.passenger-selector .passenger-pager button {
		line-height: 24px;
		background: linear-gradient(to top, #e6e6e6, #f9f9f9);
		color: #7d848d;
		border: 1px solid #bdbcbc;
		border-radius: 4px;
		cursor: pointer;
	}

		.passenger-selector .passenger-pager button:hover {
			background: linear-gradient(to top, #efefef, #ffffff);
		}

		.passenger-selector .passenger-pager button:disabled {
			border: 1px solid transparent;
			background: none transparent;
			color: #9da2a8;
		}