188 lines
5.9 KiB
CSS
188 lines
5.9 KiB
CSS
|
|
/**
|
||
|
|
* @preserve jQuery PeriodPicker plugin v5.4.2
|
||
|
|
* @homepage http://xdsoft.net/jqplugins/periodpicker/
|
||
|
|
* @copyright (c) 2016 xdsoft.net Chupurnov Valeriy
|
||
|
|
* @license PRO http://xdsoft.net/jqplugins/periodpicker/license/
|
||
|
|
*/
|
||
|
|
.xdsoft_noselect {
|
||
|
|
-webkit-user-select: none;
|
||
|
|
-moz-user-select: none;
|
||
|
|
-ms-user-select: none;
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker {
|
||
|
|
position: absolute;
|
||
|
|
top: 0px;
|
||
|
|
bottom: 0px;
|
||
|
|
left: 0px;
|
||
|
|
right: 0px;
|
||
|
|
font-family: 'Century Gothic', CenturyGothic, AppleGothic, 'Muli', sans-serif;
|
||
|
|
font-size: 1em;
|
||
|
|
overflow: hidden;
|
||
|
|
font-size: 16px;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker,
|
||
|
|
.periodpicker_timepicker * {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker input.periodpicker_key_hooker {
|
||
|
|
border: 0 !important;
|
||
|
|
background: transparent !important;
|
||
|
|
outline: 0 !important;
|
||
|
|
width: 0 !important;
|
||
|
|
height: 0 !important;
|
||
|
|
padding: 0 !important;
|
||
|
|
margin: 0 !important;
|
||
|
|
font-size: 0 !important;
|
||
|
|
-webkit-box-shadow: none !important;
|
||
|
|
-moz-box-shadow: none !important;
|
||
|
|
box-shadow: none !important;
|
||
|
|
position: absolute !important;
|
||
|
|
top: 0 !important;
|
||
|
|
left: 0 !important;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker .periodpicker_timepicker_sliders > div {
|
||
|
|
position: absolute;
|
||
|
|
top: 0px;
|
||
|
|
bottom: 0px;
|
||
|
|
width: 50%;
|
||
|
|
text-align: center;
|
||
|
|
cursor: default;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker .periodpicker_timepicker_sliders > div.periodpicker_col4 {
|
||
|
|
width: 25%;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker .periodpicker_timepicker_sliders > div.periodpicker_col4 + div.periodpicker_col4 {
|
||
|
|
left: 25%;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker .periodpicker_timepicker_sliders > div.periodpicker_col4 + div.periodpicker_col4 + div.periodpicker_col4 {
|
||
|
|
left: 50%;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker .periodpicker_timepicker_sliders > div.periodpicker_col4 + div.periodpicker_col4 + div.periodpicker_col4 + div.periodpicker_col4 {
|
||
|
|
left: 75%;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker .periodpicker_timepicker_sliders > div.periodpicker_col3 {
|
||
|
|
width: 33.3333333333%;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker .periodpicker_timepicker_sliders > div.periodpicker_col3 + div.periodpicker_col3 {
|
||
|
|
left: 33.3333333333%;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker .periodpicker_timepicker_sliders > div.periodpicker_col3 + div.periodpicker_col3 + div.periodpicker_col3 {
|
||
|
|
left: 66.6666666666%;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker .periodpicker_timepicker_sliders > div.periodpicker_col2 {
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker .periodpicker_timepicker_sliders > div.periodpicker_col2 + div.periodpicker_col2 {
|
||
|
|
left: 50%;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker .periodpicker_timepicker_sliders > div:not(.draggable) > div {
|
||
|
|
-webkit-transition: margin-top 0.1s linear;
|
||
|
|
-moz-transition: margin-top 0.1s linear;
|
||
|
|
-o-transition: margin-top 0.1s linear;
|
||
|
|
transition: margin-top 0.1s linear;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker .periodpicker_timepicker_sliders > div > div > div {
|
||
|
|
height: 22px;
|
||
|
|
line-height: 23px;
|
||
|
|
-webkit-transition: font 0.1s linear;
|
||
|
|
-moz-transition: font 0.1s linear;
|
||
|
|
-o-transition: font 0.1s linear;
|
||
|
|
transition: font 0.1s linear;
|
||
|
|
position: relative;
|
||
|
|
color: #727272;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker .periodpicker_timepicker_sliders > div > div > div.active {
|
||
|
|
-webkit-transition: none;
|
||
|
|
-moz-transition: none;
|
||
|
|
-o-transition: none;
|
||
|
|
transition: none;
|
||
|
|
color: #4B4B4B;
|
||
|
|
font-size: 1.1em;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker .periodpicker_timepicker_sliders > div.periodpicker_col4 + div.periodpicker_col4:not(.periodpicker_ampmpicker_box):not(.draggable) div.active:before,
|
||
|
|
.periodpicker_timepicker .periodpicker_timepicker_sliders > div.periodpicker_col2 + div.periodpicker_col2:not(.periodpicker_ampmpicker_box):not(.draggable) div.active:before,
|
||
|
|
.periodpicker_timepicker .periodpicker_timepicker_sliders > div.periodpicker_col3 + div.periodpicker_col3:not(.periodpicker_ampmpicker_box):not(.draggable) div.active:before {
|
||
|
|
content: ":";
|
||
|
|
position: absolute;
|
||
|
|
font-size: 16px;
|
||
|
|
margin-left: -1px;
|
||
|
|
left: 0;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #797575;
|
||
|
|
margin-top: -1px;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker .periodpicker_timepicker_sliders > div.periodpicker_col2 + div.periodpicker_col2 div.active:before {
|
||
|
|
margin-left: -9px;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker:before {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
left: 0px;
|
||
|
|
right: 0px;
|
||
|
|
height: 20px;
|
||
|
|
-webkit-box-shadow: inset 1px 32px 20px 0px rgba(255, 255, 255, 0.55);
|
||
|
|
-moz-box-shadow: inset 1px 32px 20px 0px rgba(255, 255, 255, 0.55);
|
||
|
|
box-shadow: inset 1px 32px 20px 0px rgba(255, 255, 255, 0.55);
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker:after {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
left: 0px;
|
||
|
|
right: 0px;
|
||
|
|
bottom: 0;
|
||
|
|
height: 20px;
|
||
|
|
-webkit-box-shadow: inset 0px -32px 20px 0px rgba(255, 255, 255, 0.55);
|
||
|
|
-moz-box-shadow: inset 0px -32px 20px 0px rgba(255, 255, 255, 0.55);
|
||
|
|
box-shadow: inset 0px -32px 20px 0px rgba(255, 255, 255, 0.55);
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker .periodpicker_timepicker_center {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 0px;
|
||
|
|
height: 0;
|
||
|
|
right: 0px;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker .periodpicker_timepicker_center:before,
|
||
|
|
.periodpicker_timepicker .periodpicker_timepicker_center:after {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
border-top: 1px solid #ccc;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker .periodpicker_timepicker_center:before {
|
||
|
|
margin-top: -11px;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker .periodpicker_timepicker_center:after {
|
||
|
|
margin-top: 13px;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker_dialog {
|
||
|
|
position: absolute;
|
||
|
|
height: 300px;
|
||
|
|
width: 99px;
|
||
|
|
background: #fff;
|
||
|
|
z-index: 33001;
|
||
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
||
|
|
-webkit-box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.4);
|
||
|
|
-moz-box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.4);
|
||
|
|
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.4);
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker_dialog.periodpicker_timepicker_inline {
|
||
|
|
display: inline-block;
|
||
|
|
-webkit-box-shadow: none;
|
||
|
|
-moz-box-shadow: none;
|
||
|
|
box-shadow: none;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.periodpicker_timepicker_dialog.visible {
|
||
|
|
display: block;
|
||
|
|
}
|