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

.date-bar-wrap {
	height: 30px;
	border-bottom: 3px solid #f88c21;
	border-left: 1px solid #dfdfdf;
	border-right: 1px solid #dfdfdf;
}

	.date-bar-wrap .date-bar-prev,
	.date-bar-wrap .date-bar-next {
		width: 28px;
		height: 28px;
		background: linear-gradient(to bottom, #fcfcfb, #e5e4e4);
		border-top: 1px solid #dfdfdf;
		border-bottom: 1px solid #d67e29;
		cursor: pointer;
	}

		.date-bar-wrap .date-bar-prev .arrow-left,
		.date-bar-wrap .date-bar-next .arrow-right {
			display: block;
			margin: 5px auto;
			width: 0;
			height: 0;
			border-top: 10px solid transparent;
			border-bottom: 10px solid transparent;
			position: relative;
		}

		.date-bar-wrap .date-bar-prev .arrow-left {
			border-right: 10px solid #a8a7a8;
		}

		.date-bar-wrap .date-bar-next .arrow-right {
			border-left: 10px solid #a8a7a8;
		}

			.date-bar-wrap .date-bar-prev .arrow-left:after,
			.date-bar-wrap .date-bar-next .arrow-right:after {
				content: '';
				position: absolute;
				display: block;
				margin: 10px auto;
				width: 0;
				height: 0;
				border-top: 10px solid transparent;
				border-bottom: 10px solid transparent;
				top: -20px;
			}

		.date-bar-wrap .date-bar-prev .arrow-left:after {
			border-right: 10px solid #efeeee;
			left: 3px;
		}

		.date-bar-wrap .date-bar-next .arrow-right:after {
			border-left: 10px solid #efeeee;
			left: -13px;
		}

		.date-bar-wrap .date-bar-prev:hover .arrow-left {
			border-right: 10px solid #f88c21;
		}

		.date-bar-wrap .date-bar-next:hover .arrow-right {
			border-left: 10px solid #f88c21;
		}

	.date-bar-wrap .date-bar-prev {
		border-right: 1px solid #cccbc8;
	}

	.date-bar-wrap .date-bar-next {
		border-left: 1px solid #cccbc8;
	}

	.date-bar-wrap .date-bar {
		width: 922px;
		height: 30px;
		background: linear-gradient(to bottom, #f1f0f0, #dbdbdb);
		color: #777;
	}

		.date-bar-wrap .date-bar .date-bar-list {
			width: 100%;
			height: 30px;
		}

			.date-bar-wrap .date-bar .date-bar-list li {
				width: 14.28%;
				height: 100%;
				float: left;
				border-top: 1px solid #dfdfdf;
				border-left: 1px solid #b8b7b7;
				border-bottom: 1px solid #d67e29;
				position: relative;
				cursor: pointer;
				box-sizing: border-box;
				line-height: 28px;
				text-align: center;
			}

				.date-bar-wrap .date-bar .date-bar-list li.disabled {
					background-color: #cccccc;
					color: #aaaaaa;
					cursor: not-allowed;
				}

				.date-bar-wrap .date-bar .date-bar-list li h5 {
					font-weight: bold;
					font-size: 16px;
					text-align: center;
					margin-right: 8px;
					display: inline-block;
				}

				.date-bar-wrap .date-bar .date-bar-list li span {
					text-align: center;
				}

				.date-bar-wrap .date-bar .date-bar-list li.selected,
				.date-bar-wrap .date-bar .date-bar-list li:hover {
					background: linear-gradient(to bottom, #fc9e40, #f78b20);
					color: #ffffff;
					border-left: 1px solid #d67e29;
					border-top: 1px solid #d67e29;
					border-bottom: 1px solid #f78b20;
				}

				.date-bar-wrap .date-bar .date-bar-list li.disabled:hover {
					color: #aaaaaa;
					background: #cccccc;
					border-left-color: #b8b7b7;
					border-top-color: #dfdfdf;
				}

				.date-bar-wrap .date-bar .date-bar-list li.selected:after,
				.date-bar-wrap .date-bar .date-bar-list li.selected:before {
					content: '';
					position: absolute;
					width: 0;
					height: 0;
					border-bottom: 5px solid #c6701a;
					border-left: 5px solid transparent;
					border-right: 5px solid transparent;
					top: 100%;
					left: 50%;
					margin-left: -5px;
					margin-top: -1px;
				}

				.date-bar-wrap .date-bar .date-bar-list li.selected:after {
					border-bottom: 5px solid #f5f5f5;
					margin-top: 0;
				}

				.date-bar-wrap .date-bar .date-bar-list li.selected + li {
					border-left: 1px solid #d67e29;
				}

				.date-bar-wrap .date-bar .date-bar-list li:last-child {
				}

				.date-bar-wrap .date-bar .date-bar-list li:first-child {
					border-left: none;
				}

/*日期选择器*/
.date-selector {
	background-color: #ffffff;
}

	.date-selector nav {
		line-height: 61px;
		overflow: hidden;
		font-size: 18px;
		overflow: hidden;
	}

		.date-selector nav .month-prev {
			float: left;
			padding-left: 15px;
			padding-right: 15px;
			cursor: pointer;
			color: rgb(249, 134, 5);
		}

.month-first .month-next,
.month-second .month-prev {
	display: none;
}

.date-selector nav .month-next {
	float: right;
	padding-right: 15px;
	padding-left: 15px;
	cursor: pointer;
	color: rgb(249, 134, 5);
}

	.date-selector nav .month-prev:hover,
	.date-selector nav .month-next:hover {
		background-color: rgb(245, 208, 168);
	}

.date-selector nav header {
	font-size: 18px;
	color: #7d848d;
	text-align: center;
	font-weight: bold;
}

.date-selector table {
	border-collapse: separate;
	width: 100%;
}

	.date-selector table th {
		line-height: 31px;
		border-top: 1px solid #bb6c29;
		border-bottom: 1px solid #bb6c29;
		background: linear-gradient(to top, #f87c06, #fa9104);
		color: #ffffff;
		width: 45px;
		text-align: center;
	}

	.date-selector table td {
		line-height: 31px;
		border-bottom: 1px solid #e1e1e1;
		background: #f2f2f2;
		color: #7d848d;
		width: 45px;
		text-align: center;
	}

		.date-selector table td + td {
			border-left: 1px solid #e1e1e1;
		}

		.date-selector table td:hover,
		.date-selector table td.date-selected {
			background-color: #ff9b00;
			color: #ffffff;
			cursor: pointer;
		}

/*.date-selector table td:active {
				background-color: #f78800;
				color: #ffffff;
				cursor: pointer;
			}*/

.date-selector .date-current {
	color: #f78800;
	font-weight: bold;
}

.date-selector .date-commonavailable {
	color: #d8a15e;
	background-color: #FFF1E0;
	font-weight: bold;
}

.date-selector .date-notavailable {
	background-color: #ffffff;
	color: #ccc;
}

	.date-selector .date-notavailable:hover {
		cursor: not-allowed;
		background: none;
		color: #ccc;
	}