﻿
/*
    润少的ui样式
    create 2021年9月3日08:41:48
    QQ：2283392731
    phone：18824863976
*/


/************   下拉选择    *****************/
.hr-ui-selector {
    display:none;
}

.hr-ui-temp-selector {
    height:30px;
    border:1px solid #e0e0e0;
    cursor:pointer;
    text-indent:10px;
    position:relative;
}
.hr-ui-selector-display {
    width:calc(100% - 24px);
    line-height:30px;
    overflow:hidden;
    text-indent:10px;
    color: #666;
    height: 30px;
    display: block;
    text-overflow:ellipsis;
    white-space:nowrap;
    float: left;
}
.hr-ui-selector-icon {
    width:14px;
    height:14px;
    background:url(http://cdn.bilyf.com/Image//hrui/hr-ui-selector-icon.png);
    background-size:14px;
    background-repeat:no-repeat;
    float: right;
    display:block;
    margin:8px 5px;
    transition: 0.1s linear;
    -webkit-transition: 0.1s linear;
    -moz-transition: 0.1s linear;
    -o-transition: 0.1s linear;
}
.hr-ui-selector-expand .hr-ui-selector-icon {
    transform: rotate(90deg);
}
.hr-ui-disabled {
    background:#e0e0e0;
    cursor:no-drop;
}
.hr-ui-selector-item-container {
    position:absolute;
    top:40px;
    left:-1px;
    min-height:100px;
    min-width:100px;
    border:1px solid #e0e0e0;
    border-radius:3px;
    display:none;
    z-index:99;
    background:#fff;
    box-shadow:0px 0px 6px 0px #b0b0b0;
}
.hr-ui-selector-item-container:after, .hr-ui-selector-item-container:before {
    position: absolute;
    display: block;
    content: "";
    width: 0;
    height: 0;
    border: 8px dashed transparent;
    z-index: 1;
    border-bottom-style: solid;
    border-width: 0 8px 8px;
    left: 10px;
    top: -9px;
    pointer-events: none;
}
.hr-ui-selector-item-container:before{
    border-bottom-color: #ddd;
    bottom: 0;
}
.hr-ui-selector-item-container:after{
    border-bottom-color: #fff;
    bottom: -1px;
    top: -8px;
}
.hr-ui-selector-item-list {
    width:100%;
    overflow:auto;
    max-height:600px;
}
.hr-ui-selector-item {
    width:calc(100% - 16px);
    line-height:20px;
    padding:8px 8px;
    display: block;
}
.hr-ui-selector-item:hover{
    background:#e2e2e2;
}
.hr-ui-selector-item-selected {
    color:#0094ff;
    font-weight:bold;
}



/************   日期选择    *****************/
.hr-ui-date-picker {
    display:none;
    min-width: calc(100% - 7px);
    height: 30px;
    line-height: 30px;
    color:#000;
}
.hr-ui-temp-date-picker {
    height:30px;
    border:1px solid #e0e0e0;
    cursor:pointer;
    /*text-indent:10px;*/
    position:relative;
    color:#000;
}
.hr-ui-date-picker-display {
    width:calc(100% - 24px);
    line-height:30px;
    overflow:hidden;
    text-indent:10px;
    color: #666;
    height: 30px;
    display: block;
    text-overflow:ellipsis;
    white-space:nowrap;
    float: left;
}
.hr-ui-date-picker-icon {
    width:14px;
    height:14px;
    background:url(http://cdn.bilyf.com/Image//hrui/hr-ui-date-picker-icon-gray.png);
    background-size:14px;
    background-repeat:no-repeat;
    float: right;
    display:block;
    margin:8px 5px;
    transition: 0.1s linear;
    -webkit-transition: 0.1s linear;
    -moz-transition: 0.1s linear;
    -o-transition: 0.1s linear;
}
.hr-ui-date-picker-expand .hr-ui-date-picker-icon{
    background:url(http://cdn.bilyf.com/Image//hrui/hr-ui-date-picker-icon-blue.png);
    background-size:14px;
    background-repeat:no-repeat;
}

.hr-ui-date-picker-panel-container {
    position:absolute;
    top:40px;
    left:-1px;
    min-height:100px;
    min-width:100px;
    border:1px solid #e0e0e0;
    border-radius:3px;
    z-index:99;
    background:#fff;
    box-shadow:0px 0px 6px 0px #b0b0b0;
}
.hr-ui-date-picker-panel-container:after, .hr-ui-date-picker-panel-container:before {
    position: absolute;
    display: block;
    content: "";
    width: 0;
    height: 0;
    border: 8px dashed transparent;
    z-index: 1;
    border-bottom-style: solid;
    border-width: 0 8px 8px;
    left: 10px;
    top: -9px;
    pointer-events: none;
    color: #000;
}
.hr-ui-date-picker-panel-container:before{
    border-bottom-color: #ddd;
    bottom: 0;
}
.hr-ui-date-picker-panel-container:after{
    border-bottom-color: #fff;
    bottom: -1px;
    top: -8px;
}

.hr-ui-date-picker-tab-panel {
    width:100%;
}
.hr-ui-date-picker-tab-title {
    width:100%;
    height:40px;
    line-height:40px;
    text-align:center;
    border-bottom: 1px solid #e0e0e0;
}
.hr-ui-date-picker-tab-title-text {
    width:calc(100% - 120px);
    line-height:40px;
    text-align:center;
    font-size:16px;
    display:inline-block;
    color: #333;
}
.hr-ui-date-picker-tab-title-text:hover{
    color:#0094ff;
}
.hr-ui-date-picker-icon-previous {
    background:url(http://cdn.bilyf.com/Image//hrui/hr-ui-previous-gray.png);
    background-size:18px;
    background-position:3px;
    background-repeat:no-repeat;
    float:left;
    width:24px;
    height:24px;
    display:block;
    margin:8px 5px;
    transition: 0.1s linear;
    -webkit-transition: 0.1s linear;
    -moz-transition: 0.1s linear;
    -o-transition: 0.1s linear;
    transform:rotate(180deg);
}
.hr-ui-date-picker-icon-next {
   background:url(http://cdn.bilyf.com/Image//hrui/hr-ui-previous-gray.png);
    background-size:18px;
    background-position:3px;
    background-repeat:no-repeat;
    width:24px;
    height:24px;
    display:block;
    margin:8px 5px;
    transition: 0.1s linear;
    -webkit-transition: 0.1s linear;
    -moz-transition: 0.1s linear;
    -o-transition: 0.1s linear;
    float:right;
}

.hr-ui-date-picker-tab-item-Panel {
    width:calc(100% - 20px);
    padding: 10px 10px;
    text-align:left;
}
.hr-ui-date-picker-tab-week-Panel {
    width:calc(100% - 20px);
    padding: 10px 10px;
    text-align:left;
    border-bottom:1px solid #d0d0d0;
}
.hr-ui-date-picker-tab-week-item {
    line-height:30px;
    height:30px;
    width:14%;
    display:inline-block;
    text-align:center;
    margin:5px 0;
    color:#000;
}

.hr-ui-date-picker-tab-item-year,.hr-ui-date-picker-tab-item-month {
    line-height:60px;
    height:60px;
    width:25%;
    display:inline-block;
    text-align:center
}
.hr-ui-date-picker-tab-item-year:hover,.hr-ui-date-picker-tab-item-month:hover{
    color:#0094ff;
    background:#f2f2f2;

}
.hr-ui-item-selected {
    color: #0094ff;
    font-weight: bold;
}
.hr-ui-date-picker-tab-item-day {
    line-height:40px;
    height:40px;
    width:calc(14.28% - 4px);
    display:inline-block;
    text-align:center;
    margin:2px 2px;
    color:#000;
}
.hr-ui-date-picker-tab-item-day-label{
    display: block;
    line-height: 16px;
    height: 16px;
    position: absolute;
    top: 26px;
    font-size: 12px;
    text-align: center;
    width: 100%;
    color: #16fb16;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.hr-ui-item-day-selected,.hr-ui-date-picker-tab-item-day:hover{
    background:#0094ff;
    color:#FFF;
    border-radius:5px;
    font-weight: bold;
}
.pre-day,.next-day {
    color:#d0d0d0!important;
}
.pre-day:hover,.next-day:hover {
    background:#80dbf8;
    color:#FFF!important;
    border-radius:5px;
    font-weight: bold;
}
.hr-ui-date-picker-time-selected-Panel{
    width: calc(100% - 20px);
    padding: 0px 10px 10px;
    text-align: left;
    float: left;
}
.hr-ui-date-picker-time-selected-text{
    float: left;
    line-height: 32px;
    font-size: 15px;
    color: #666;
}
.hr-ui-date-picker-time-selected-hhh{
    float: left;
    line-height: 24px;
    font-size: 15px;
    color: #666;
    width: 60px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #c0c0c0;
    margin-top: 4px;
    height: 24px;
}
.hr-ui-date-picker-time-selected-sss{
    float: left;
    line-height: 32px;
    font-size: 15px;
    color: #666;
}
.hr-ui-date-picker-time-selected-ok-btn{
    float: right;
    line-height: 20px;padding: 3px 10px;
    background: #0094ff;
    font-size: 14px;
    color: #fff;
    border-radius: 4px;
    margin-top: 4px;
    cursor: pointer;
}

/*-------------鼠标悬停提示语-------------------*/
.hr-ui-tips-panel-container {
    position:fixed;
    top:40px;
    left:-1px;
    min-height:30px;
    min-width:30px;
    max-width:300px;
    line-height:20px;
    border:1px solid #e0e0e0;
    border-radius:3px;
    z-index:99;
    background:#fff;
    box-shadow:0px 0px 6px 0px #b0b0b0;
    padding:15px;
    font-size:13px;
    color:#0094ff;
    text-decoration:underline;
    font-style:italic;
}
.hr-ui-tips-panel-container:after, .hr-ui-tips-panel-container:before {
    position: absolute;
    display: block;
    content: "";
    width: 0;
    height: 0;
    border: 8px dashed transparent;
    z-index: 1;
    border-bottom-style: solid;
    border-width: 0 8px 8px;
    left: 10px;
    top: -9px;
    pointer-events: none;
}
.hr-ui-tips-panel-container:before{
    border-bottom-color: #ddd;
    bottom: 0;
}
.hr-ui-tips-panel-container:after{
    border-bottom-color: #fff;
    bottom: -1px;
    top: -8px;
}
.hr-ui-tips-cursor {
    cursor:help;
}


/*-------------switch开关-------------------*/

.hr-ui-switch {
	display:none;
}
.hr-ui-switch-panel {
	width:46px;
	height:24px;
	border-radius:12px;
	border:1px solid #e0e0e0;
	background:#e0e0e0;
	overflow:hidden;
	cursor:pointer;
}
.hr-ui-switch-disabled {
	cursor:no-drop;
}
.hr-ui-switch-panel-round {
	width:16px;
	height:16px;
	background:#fff;
	border-radius:50%;
	float:left;
	margin:3px 5px;
	float:left;
}
.hr-ui-switch-panel-text {
	font-size:13px;
	float:right;
	width:20px;
	line-height:24px;
	text-align:center;
}
.hr-ui-switch-checked {
	border:1px solid #13CE66;
	background:#13CE66;
}
.hr-ui-switch-checked .hr-ui-switch-panel-round{
	float:right;
}
.hr-ui-switch-checked .hr-ui-switch-panel-text{
	float:left;
	color:#fff;
	text-indent:5px;
}

/*-------------checkbox 复选框-------------------*/
.hr-ui-checkbox {
	display:none;
}
.hr-ui-check-box-panel {
	min-width:40px;
	float:left;
	height:32px;
	border-radius:2px;
	margin-right:10px;
}
.hr-ui-check-box-border {
	border:1px solid  #e0e0e0;
}

.hr-ui-check-box-panel-square {
	width:14px;
	height:14px;
	border:1px solid #e0e0e0;
	border-radius:2px;
	cursor:pointer;
	float:left;
	background:#fff;
	margin:8px;
}
.hr-ui-check-box-disabled {
	cursor:no-drop;
}
.hr-ui-check-box-disabled .hr-ui-check-box-panel-square{
	background:#eee;
}
.hr-ui-check-box-panel-label {
	float:left;
	line-height:32px;
	font-size:14px;
	padding-right:10px;
}

.hr-ui-check-box-checked {
	color:#0094ff;
}
.hr-ui-check-box-checked .hr-ui-check-box-panel-square{
	background:#0094ff;
	color:#fff;
	background-image:url(https://cdn.bilyf.com/Image//allicon/icon-dui-white.png);
	background-repeat:no-repeat;
	background-size:12px;
	background-position:1px;
}


























