@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot');
src: url('fonts/icomoon.eot#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
body{
padding:0;
margin:0;
font-size:13px;
font-family:Helvetica, Arial, sans-serif;
color:#eee;
text-decoration:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
/*html{
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%
}*/
body,html{height:100%;background:#111;
/*overflow:hidden*/
}
.pk_noselect{
-webkit-touch-callout: none;
-ms-user-select: none;
user-select: none
}
.pk_app{
width:100%;
height:100%;
/*min-width:560px*/
}
/** HEADER **/
.pk_hdr{
z-index:7;
padding:0 5px;
height:24px;
position:relative;
border-bottom:1px solid #454545
}
.pk_hdr .pk_btn{
float:left;
margin:4px 18px 0 18px;
position:relative;
min-width:40px;
border-radius:10px;
text-align:center
}
.pk_btn button{
padding: 0 12px;
border:0;
outline:0;
color:inherit;
background:transparent;
cursor: pointer;
text-decoration:inherit;
text-shadow:inherit;
white-space:nowrap
}
.pk_hdr .pk_btn:hover{
background:#eee;
color:#111
}
.pk_hdr .pk_btn.pk_act{
background:#bbb;
color:#000;
text-decoration:underline;
text-shadow: 0 1px 2px white;
}
.pk_hdr .pk_btn .pk_menu{
position:absolute;
min-width:100px;
min-height:20px;
top:20px;
border-radius:10px;
background:#eee;
opacity:0;
z-index:-1;
visibility:hidden;
padding: 8px 0px;
display:none;
transition:opacity 200ms
}
.pk_hdr .pk_btn.pk_vis .pk_menu{
display:block;
}
.pk_hdr .pk_btn.pk_act .pk_menu{
z-index:5;
opacity:1;
visibility:visible;
display:block;
}
.pk_hdr .pk_btn .pk_menu_el .pk_act{
background:lightblue;
}
/*.pk_hdr .pk_btn i{
margin-left: 4px;
font-style: normal;
color: #555
}*/
.pk_hdr .pk_btn .pk_shrtct{
color: #555;
margin-left: 24px;
display: inline-block;
font-size: 0.92em;
text-align: right;
}
.pk_hdr .pk_btn .pk_menu_el button{
margin: 2px 0;
display: block;
width: 100%;
text-align: left;
padding: 2px 12px;
display:flex;
justify-content: space-between;
}
/** ENDOF HEADER **/
/** TOOL BAR **/
.pk_tb{
height:48px;
background: #363636;
position: relative;
z-index: 6;
padding:8px 0px 8px 14px;
border-bottom:1px solid #000;
min-width:560px;
text-rendering: optimizeSpeed;
}
.pk_total_dur,
.pk_hover_dur{
color:#99c2c6;
font-size:14px;
position:absolute;
right:10px;
top:6px;
}
.pk_mload{
width: 200px;
margin: 0 auto;
height: 3px;
position: relative;
background: #111;
overflow: hidden;
margin-top: 25px;
}
.pk_mload > div:before {
content:" ";
/*transition:all 300ms ease-in-out;*/
background:#ccc;
height:100%;
width:100%;
margin-left:0;
z-index:1;
left:0;
position: absolute;
transform: scaleX(0) translate3d(0,0,0);
transform-origin: 0 0 0;
will-change: transform;
}
.pk_act .pk_mload > div:before {
animation-name: pk_loader_anim;
animation-duration: 1.8s;
animation-iteration-count: infinite;
}
.pk_prc{
margin-top: 20px;
font-size: 14px;
}
.pk_prc span{
margin-right:10px;
padding-bottom: 7px;
text-align: center;
}
.pk_prc button{
border-radius: 3px;
border:1px solid #eee;
background: transparent;
color: #eee;
padding: 4px 12px;
outline:0;
}
.pk_hover_dur{
top:26px;
}
.pk_inpfile{
visibility: hidden;
width: 1px;
height: 1px;
overflow:hidden;
position:absolute;
z-index:-1;
}
button{color:#040404;-webkit-tap-highlight-color:rgba(0,0,0,0)}
a{cursor:pointer;color:#99c2c6;-webkit-tap-highlight-color:rgba(0,0,0,0)}
.pk_tmpMsg{
position: absolute;
left: 50%;
top: 50%;
margin-left: -170px;
width: 340px;
z-index: 6;
margin-top: -40px;
height: 100px;
font-size: 18px;
color: #ddd;
text-align: center;
text-shadow: 0 0 1px black;
line-height:32px;
}
.pk_tmpMsg2{
position: fixed;
background:rgba(0,0,0,0.6);
z-index: 10;
left:0;right:0;
top:0;bottom:0;
text-align:center;
font-size: 16px;
justify-content: center;
flex-direction: column;
display:none;
cursor:progress !important;
}
.pk_tmpMsg2.pk_act{display:flex}
.pk_timecontainer{
float: left;
width: 236px;
margin-right:12px;
border: 1px solid #777;
background: black;
position:relative;
height: 46px;
color: #eee;
border-radius: 3px;
contain:strict;
}
.pk_mob .pk_timecontainer{
cursor:pointer
}
.pk_timing{
display: block;
position: absolute;
padding:9px 0 0 14px;
letter-spacing: 1px;
font-size: 29px;
text-align: left;
z-index: 2;
}
.pk_timingcnv{
display: block;
position: absolute;
z-index: 2;
left:6px;
}
.pk_btngroup{float:left;}
.pk_selection,
.pk_ctns,
.pk_transport{
float:left;
margin-right:12px;
min-width:340px;
padding: 0 2px;
height:46px;
border:1px solid #777;
border-radius: 3px;
}
.pk_selection{margin-right:0}
.pk_ctns{
min-width:40px;
}
.pk_tb .pk_btn{
font-family: 'icomoon';
position: relative;
font-size: 1.32em;
display: inline-block;
border-radius: 3px;
width: 38px;
height: 38px;
margin: 4px 3px;
text-align: center;
line-height: 25px;
border: none;
outline: 0;
padding:0;
}
.pk_tb .pk_btn:hover{
box-shadow:0 0 6px #7799ff;
}
.pk_tb .pk_btn:active{
box-shadow: inset 0 0 10px #262626;
}
.pk_ftr .pk_btn span,
.pk_tb .pk_btn span {
display: block;
-ms-user-select: none;
user-select: none;
visibility: hidden;
line-height: 26px;
opacity: 0;
pointer-events: none;
font-family: Arial, sans-serif;
position: absolute;
bottom: -31px;
left: 50%;
transform:translate(-50%, 0);
white-space: nowrap;
background: #000;
font-size: 11px;
font-weight:normal;
padding: 0 6px;
border-radius: 3px;
transition: opacity 320ms 296ms;
color:#eee;
z-index:6;
letter-spacing:normal;
}
.pk_ftr .pk_btn.pk_inact:hover span,
.pk_tb .pk_btn.pk_inact:hover span{
opacity:0;
visibility:hidden;
}
.pk_ftr .pk_btn:hover span,
.pk_tb .pk_btn:hover span{
visibility:visible;
opacity:1;
}
.pk_mob .pk_ftr .pk_btn span,
.pk_mob .pk_tb .pk_btn span{
visibility:hidden;
display:none;
}
.pk_mob .pk_tb .pk_btn:hover{
box-shadow:none;
}
/** ENDOF TOOLBAR **/
/** AUDIOVIEW **/
.pk_av_cont{
position:relative;
touch-action:none;
}
.pk_av{
clear:both;
width:100%;
width:calc(100% - 64px);
margin:0 auto;
contain: content;
/*height:calc(100% - 168px);*/
background:#000;
position:relative;
overflow:hidden;
margin-left: 48px; /*left menu*/
}
.pk_av wave{
cursor:text;
}
#pk_prgwv{
position: absolute;
z-index: 3;
left: 0;
top: 0;
bottom: 0;
background:#ff8c35;
width:1px;
display: none;
/*box-sizing: 'border-box'*/
transform: translate3d(0,0,0);
pointer-events:none;
}
/*
#pk_prgwv:after{
content: '';
display:block;
background:#ff8c35;
width:1px;
height:100%;
}*/
/*.pk_mob .pk_av{
width:calc(100% - 28px);
}*/
/** ENDOF AUDIOVIEW **/
.pk_selection .pk_sellist{
color: #e1e1e1;
margin:5px;
width:346px;
}
.pk_sellist .pk_title{
line-height:35px;
float:left;
}
.pk_selection .pk_sellist div{
float:left;
margin:0 10px;
width:40px;
text-align:center;
}
.pk_selection .title{
display:block;
line-height: 18px;
}
.pk_selection .pk_dat{
background:#383838;
padding:2px 5px;
color:#99c2c6;
min-width: 14px;
display: inline-block
}
.pk_btn.icon-clearsel{
font-family:Helvetica, Arial, sans-serif;
width: 92px;
font-size: 12px;
line-height: 20px;
height: 30px;
padding: 0;
margin: 3px 0 0 12px;
}
.pk_ftr{padding:2px 14px 8px 14px;}
.pk_volpar{
position:relative;
width:100%;
height:5px;
background:#000;
border:1px solid #222;
background:green;
overflow:hidden;
background: linear-gradient(to right, #99c2c6 0%,#6ecc87 54%,#d6af22 85%,#d15110 100%);
background: -webkit-linear-gradient(left, #99c2c6 0%,#6ecc87 54%,#d6af22 85%,#d15110 100%);
}
.pk_volpar:last-child{
border-top:2px solid #222;
}
.pk_vol{
position:absolute;
right:0;
top:0;
width:100%;
bottom:0;
z-index:1;
pointer-events:none;
background:black;
transform:translate3d(0,0,0);
}
.pk_peaker{
position:absolute;
height:100%;
right:0;
top:0;
z-index:2;
width:15px;
border-left: 2px solid #282828;
background:#111;
}
.pk_peaker.pk_act{
background:red
}
.pk_markers{
font-size: 10px;
position: relative;
width: 100%;
border-right: 12px solid transparent;
text-align: left;
color: #858585;
box-sizing: border-box;
margin-top:4px;
font-weight:lighter;
letter-spacing: 0.5px;
}
.pk_mark1{
display:inline-block;
width:2.777%;
}
.pk_mark1:last-child{
position:absolute;
text-align:right;
right:0px;
}
.pk_zoombtn{
float: left;
/*height: 26px;*/
padding-right: 4px;
position:relative;
}
.pk_zoombtn button{
border-radius: 3px;
border:1px solid #246e6e;
height: 18px;
margin-right: 6px;
padding: 0;
width: 26px;
line-height: 16px;
cursor: pointer;
color: #246e6e;
background: #000;
font-size: 12px;
outline: 0;
font-weight:bold;
font-family:Arial, serif;
}
.pk_zoombtn .pk_zoom_out_v,
.pk_zoombtn .pk_zoom_in_v{
position:absolute;
left:0;
top:-50px;
}
.pk_zoombtn .pk_zoom_in_v span,
.pk_zoombtn .pk_zoom_out_v span{
margin-left:40px;
}
.pk_zoombtn .pk_zoom_out_v{
top:-26px;
}
/*
.pk_mob .pk_zoombtn{
display:none
}*/
.pk_mob .pk_zoom_in_v,
.pk_mob .pk_zoom_out_v{
display:none
}
.pk_panner{
position: absolute;
width: 48px;
height: 100%;
left: 0;
top: 0;
}
.pk_mono .pk_panner{
display:none !important;
}
.pk_pan_left{
position: absolute;
left:14px;
top: 0%;
height:50%;
}
.pk_pan_right{
position: absolute;
left:14px;
top: 50%;
height:50%;
}
.pk_pan_btn {
position: absolute;
left: 20%;
display: block;
padding: 0;
margin: 0;
font-size:10px;
word-break: break-all;
border: 0;
white-space: nowrap;
top: 30%;
border-radius: 3px;
width: 24px;
text-align: center;
outline:0;
height: 40%;
color: #2a8472;
background: #040405;
}
.pk_pan_btn strong{font-size:12px;display:block}
.pk_pan_btn:active{
background: #000;
color: #46b49d;
}
.pk_contextMenu{
position:absolute;
z-index:99999;
}
.pk_contextMenu div{ position:relative; }
.pk_contextMenu{
background: #111;
border: 1px solid #444;
font-family:Arial, serif, sans-serif;
font-size:14px;
margin: 1px 0 0;
min-width: 150px;
padding: 4px 0;
color:#111;
z-index: 8;
border-radius:3px;
box-shadow: 0 2px 12px rgba(138, 58, 138, 0.5);
background-clip: padding-box;
}
.pk_contextMenu a, .pk_contextMenu a:hover{
clear: both;
color: #eee;
display: block;
font-weight: normal;
line-height: 18px;
margin:2px 5px;
padding: 5px 8px;
font-size:13px;
white-space: nowrap;
cursor:pointer;
font-family:Arial, serif, sans-serif;
font-weight:normal;
transition: all 110ms;
}
.pk_contextMenu a:hover{
color:#99c2c6;
line-height: 18px;
text-decoration: none;
}
/* if max height < ... hide vertical buttons and position to 0... */
.pk_wavescroll {
margin-bottom:10px;
height: 14px;
border: 1px solid #222;
background: #000;
overflow:hidden;
position:relative;
contain:strict;
}
.pk_wavedrag.pk_drag{
cursor:grabbing;
cursor:-webkit-grabbing;
}
.pk_wavedrag{
cursor:pointer;
cursor:grab;
cursor:-webkit-grab;
border-radius:4px;
transform:translate3d(0,0,0);
}
.pk_wavedrag.pk_inact{
cursor:default;
border-radius:0;
}
.pk_wavescroll .pk_wavedrag{
display:block;
width:100%;
height:100%;
min-width:50px;
position:absolute;
background:#246e6e; /*#2c7b7b;*/
}
.pk_wavescroll .pk_wavedrag_l{
float:left;
width:12px;
height:100%;
cursor: col-resize;
}
.pk_wavescroll .pk_wavedrag_r{
float:right;
width:12px;
height:100%;
cursor: col-resize;
}
.pk_play.pk_act{
background:#da4f4f;
background: linear-gradient(-75deg, #d01111, #ff8d8d);
}
.pk_loop.pk_act{
background:gold;
background: linear-gradient(-65deg, #43C6AC, #F8FFAE);
}
.wavesurfer-region{
opacity: 0.41;
background-color: rgba(30, 30, 162, 1.0);
background: linear-gradient(-65deg, #43b7c6, #d186d2);
}
.pk_inact,
.pk_app .pk_inact,
.pk_btn.pk_inact{
opacity:0.5;
cursor:default;
}
.icon-silence:before {
content:"S";
height:1px;
font-family:Helvetica, Arial, serif;
display:inline-block;
}
.icon-clearsel:before {
content: "å–消选择";
}
.icon-files-empty:before {
content: "\e925";
}
.icon-file-text2:before {
content: "\e926";
}
.icon-zoom-in:before {
content: "\e987";
}
.icon-zoom-out:before {
content: "\e988";
}
.icon-hammer:before {
content: "\e996";
}
.icon-play3:before {
content: "\ea1c";
}
.icon-pause2:before {
content: "\ea1d";
}
.icon-stop2:before {
content: "\ea1e";
}
.icon-backward2:before {
content: "\ea1f";
}
.icon-forward3:before {
content: "\ea20";
}
.icon-first:before {
content: "\ea21";
}
.icon-last:before {
content: "\ea22";
}
.icon-previous2:before {
content: "\ea23";
}
.icon-next2:before {
content: "\ea24";
}
.icon-loop:before {
content: "\ea2d";
}
.icon-scissors:before {
content: "\ea5a";
}
.icon-rec:before {
content: ".";
width: 33%;
background: #922;
height: 33%;
margin-top: -2px;
display: inline-block;
vertical-align: middle;
font-size: 0px;
color: transparent;
border-radius: 30px;
}
.icon-rec.pk_act{
box-shadow: 0 0 6px #d44;
background:#e13030;
animation: fade_anim .6s steps(6, start) infinite alternate;
}
.pk_mob .icon-rec.pk_act{
box-shadow:none;
}
.icon-rec.pk_act:before{
background:#111;
}
/** 1up **/
.pk_oneup{
margin:0;
position:fixed;
z-index:15;
transition:all 300ms ease-in-out;
left:50%;
top:49%;
transform: translate(-50%,-50%);
padding:10px;
background:rgba(0,0,0,0.66);
color:#eee;
border:1px solid #333;
border-radius:3px;
font-size:16px;
user-select: none;
pointer-events:none;
}
/** modal **/
.pk_modal_back{
z-index:8;
position:absolute;
left:0;
top:0;
overflow:auto;
right:0;
/*display:flex;
justify-content:center;
align-items:center;*/
/*
overflow:visible;
min-height:100%;
*/
display:block;
/*min-width:560px;*/
height:100%;
/*min-height:300px;*/
background:rgba(0,0,0,0.62);
touch-action:manipulation;
-webkit-overflow-scrolling:touch
}
.pk_modal_cnt{
position:absolute;
/* position:relative; */
top:0%;
/*left:50%;
transform:translate(-50%, 0px);*/
min-height:100%;
/* width:100%; */
min-width:100%;
padding:40px 20px;
box-sizing:border-box;
display:flex;
justify-content:center;
align-items:center
}
.pk_modal{
position:relative;
margin:-40px auto 0 auto;
border:1px solid #333;
background:#222;
display:block;
box-shadow: 0 0 20px #333;
min-width: 344px;
min-height: 168px;
animation: pk_shw .2s ease-out 0ms 1;
margin-top:0;
}
.pk_modal.pk_bigger{
min-width: 400px;
}
.pk_modal_title {
padding: 8px 15px;
text-shadow: 0 0 1px black;
border-bottom: 1px solid #444;
margin-bottom: 10px;
font-size:14px;
}
.pk_modal_main{
position:relative;
clear: both;
padding: 0 15px 52px 15px;
}
.pk_modal_bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 22px;
border-top: 1px solid #444;
padding: 12px 15px;
/*overflow: hidden;*/
background:#222;
}
.pk_modal_a_bottom{
float: right;
display: block;
padding: 4px 10px;
border: 1px solid #999;
border-radius: 21px;
color:#eee;
font-size: 12px;
margin-left: 16px;
-webkit-user-select:none;
user-select:none;
}
.pk_modal_a_bottom:hover{
/*background: #eee;
color: #111;
border-color: #eee;*/
border-color: teal;
box-shadow: 0 0 6px rgba(39, 136, 158, 0.4);
}
.pk_modal_a_red{
border-color: red;
color: #000;
background: #b41919;
float: left;
margin-left: 2px;
}
.pk_modal_cancel{
border-color: #c87a7a;
color: #c87a7a;
transition: background 120ms;
}
.pk_modal_cancel:hover{
box-shadow: 0 0 6px rgba(158, 39, 39, 0.6);
border-color: unset;
background: #280a0ac7;
}
.pk_modal_a_accpt{
border-color: #99c2c6;
color: #cbe2e3;
transition: border-color 120ms, color 120ms;
}
.pk_modal_a_accpt:hover{
color: #99c2c6;
}
.pk_modal .pk_txt{
display: block;
margin-top:6px;
background: #111;
outline: 0;
padding: 4px 8px;
color: #eee;
border-radius: 4px;
border: 1px solid #333;
border-bottom: 1px solid #444;
}
.pk_modal_a_top{
float: right;
font-size: 11px;
color: #99cccc;
display: block;
padding: 2px 4px;
}
.pk_modal_a_top.pk_act{
text-decoration: underline;
color:#9ad6d6;
}
/*
.pk_modal_a_top.pk_act:before{
content: 'â–º';
text-decoration: none;
position: absolute;
margin: 3px 0 0px -10px;
font-size: 8px;
}
*/
.pk_col{
float:left;
margin-top:8px;
text-align:center;
position:relative;
}
.pk_h200 .pk_col{
height:220px;
max-width:60px;
width:10%;
min-width:38px;
}
.pk_dens .pk_h200 .pk_col{
max-width:54px;
overflow:hidden;
}
.pk_dens .pk_h200 .pk_val{
padding: 2px 6px;
font-size: 11px;
}
.pk_h200 .pk_col .pk_vert{
display: inline-block;
width:160px;
-ms-transform-origin: 80px 80px;
transform-origin: 80px 80px;
margin-left:50%;
margin-top:12px;
}
.pk_h200 .pk_btm{
bottom:10px;
font-size:12px;
}
.pk_h200 .pk_val{
margin:0;
background: #1b1b1b;
padding:2px 8px;
}
.pk_wave_cursor{
position:absolute;
left:0;
top:0;
z-index:5;
margin-left: -2px;
bottom:0;
width:1px;
pointer-events:none;
border-right:1px dashed gold;
transform:translate3d(0,0,0);
}
.pk_row{
clear: both;
border-bottom: 1px solid #444;
overflow: hidden;
padding-top: 6px;
margin-bottom: 4px;
padding-bottom: 12px;
}
.pk_row:last-child{
border:none;
}
.pk_row input{
float: left;
}
.pk_row label{
display:block;
margin-bottom: 4px;
margin-right:24px;
}
.pk_row label.pk_line{
display: block;
float: left;
text-align: center;
width: 80px;
padding-right: 6px;
margin: 8px 0;
}
.pk_btm{
position:absolute;
user-select:none;
left:0;right:0;bottom:0;
}
.pk_val{
background: #111;
padding: 4px 10px;
text-align: center;
min-width: 30px;
border-radius: 11px;
border-bottom: 1px solid #4e4e4e;
font-size: 12px;
border-top: 1px solid #000;
user-select:none;
}
.pk_row .pk_val{float: right;margin:4px 0;}
.pk_sel{float:left;max-width:92px}
.pk_sel_edt{
width: 24px;
height: 22px;
display: block;
float: left;
font-weight: bold;
border-radius: 6px;
text-align: center;
margin-left: 6px;
color: #888;
cursor:pointer;
position:relative;
visibility: hidden;
opacity: 0;
border: 1px solid #888;
transition: opacity 620ms;
}
.pk_sel_edt > span{
display: block;
-ms-user-select: none;
user-select: none;
visibility: hidden;
line-height: 26px;
opacity: 0;
pointer-events: none;
font-family: Arial, sans-serif;
position: absolute;
bottom: -30px;
left: 50%;
transform: translate(-50%, 0);
white-space: nowrap;
background: #000;
font-size: 11px;
font-weight: normal;
padding: 0 6px;
border-radius: 3px;
transition: opacity 320ms 296ms;
color: #eee;
z-index: 6;
letter-spacing: normal;
}
.pk_sel_edt:hover > span{
visibility:visible;
opacity: 1;
}
button{background-color:rgb(221, 221, 221);}
select{
display: block;
padding: 0 10px;
border: 1px solid #999;
border-radius: 21px;
font-size: 12px;
height:25px;
outline: 0;
background: transparent;
color: #eee;
line-height:24px;
font-weight: lighter;
margin:0;
}
select option{
background:#333;
padding:2px 0;
margin:2px 0;
}
.pk_vert,
.pk_horiz {
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
width: 100%;
height: 10px;
margin: 10px 0;
border: none;
padding: 1px 2px;
border-radius: 14px;
background: #111;
box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
-webkit-box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
outline: none; /* no focus outline */
max-width:235px;
}
.pk_vert{
-ms-transform:rotate(270deg) translate(0,-5px);
transform:rotate(270deg) translate(0,-5px);
}
input.pk_horiz.pk_w180{
max-width:200px;
}
.pk_bigger .pk_horiz {
max-width:180px;
}
.pk_vert::-moz-range-track,
.pk_horiz::-moz-range-track {
border: inherit;
background: transparent;
}
.pk_vert::-ms-track,
.pk_horiz::-ms-track {
border: inherit;
color: transparent; /* don't drawn vertical reference line */
background: transparent;
}
.pk_vert::-ms-fill-lower,
.pk_vert::-ms-fill-upper,
.pk_horiz::-ms-fill-lower,
.pk_horiz::-ms-fill-upper {
background: transparent;
}
.pk_vert::-ms-tooltip,
.pk_horiz::-ms-tooltip {
display: none;
}
/* thumb */
.pk_vert::-webkit-slider-thumb,
.pk_horiz::-webkit-slider-thumb {
-webkit-appearance: none;
width: 38px;
height: 18px;
border: 1px solid black;
border-radius: 12px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #47497d), color-stop(100%, #519fa7)); /* android <= 2.2 */
background-image: -webkit-linear-gradient(top , #47497d 0, #519fa7 100%); /* older mobile safari and android > 2.2 */;
background-image: linear-gradient(to bottom, #47497d 0, #519fa7 100%);
}
.pk_vert::-moz-range-thumb,
.pk_horiz::-moz-range-thumb {
width: 38px;
height: 18px;
border: 1px solid black;
border-radius: 12px;
background-image: linear-gradient(to bottom, #47497d 0, #519fa7 100%); /* W3C */
}
.pk_vert::-ms-thumb,
.pk_horiz::-ms-thumb {
width: 38px;
height: 18px;
border-radius: 12px;
border: 1px solid black;
background-image: linear-gradient(to bottom, #47497d 0, #519fa7 100%); /* W3C */
}
/* Base for label styling */
.pk_check:not(:checked),
.pk_check:checked {
position: absolute;
left: -9999px;
}
.pk_check:not(:checked) + label,
.pk_check:checked + label {
position: relative;
padding-left: 30px;
display:inline-block;
height:24px;
line-height:24px;
cursor: pointer;
}
/* checkbox aspect */
.pk_check:not(:checked) + label:before,
.pk_check:checked + label:before {
content: '';
outline:0;
position: absolute;
left: 0; top: 0;
width: 20px; height: 20px;
border: 1px solid #222;
background: #111;
border-radius: 20px;
box-shadow: inset 0 1px 0 0 #000000, inset 0 -1px 0 0 #4d5158;
}
/* checked mark aspect */
.pk_check:not(:checked) + label:after,
.pk_check:checked + label:after {
content: ' ';
outline:0;
position: absolute;
top: 3px;
left: 3px;
background: #99c2c6;
transition: all .1s;
border-radius: 20px;
height: 16px;
width: 16px;
}
.pk_check:checked + label:before {
border: 1px solid #666;
}
/* checked mark aspect changes */
.pk_check:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
.pk_check:checked + label:after {
opacity: 1;
transform: scale(1);
}
/* disabled checkbox */
.pk_check:disabled:not(:checked) + label:before,
.pk_check:disabled:checked + label:before {
box-shadow: none;
border-color: #bbb;
background-color: #ddd;
}
.pk_check:disabled:checked + label:after {
color: #999;
}
.pk_check:disabled + label {
color: #aaa;
}
.pk_grabbing wave,
.pk_grabbing{
cursor: move !important;
cursor: -webkit-grabbing !important;
}
.pk_modal_anim{
animation: pk_ppr .22s ease-out 0ms 1;
}
@keyframes pk_ppr{
0%{transform:scale(.2)}
100%{transform:scale(1)}
}
@keyframes pk_shw{
0%{opacity:0}
100%{opacity:1}
}
@keyframes pk_loader_anim {
/* 0% {width: 0%;margin-left:0;}
25% {width: 50%;;margin-left:0;}
50% {margin-left: 30%;width:40%;}
75% {margin-left: 50%;width:60%;}
100% {margin-left: 100%;width:60%;}
*/
0% {transform:scaleX(0) translate3d(0,0,0);}
25% {transform:scaleX(0.5) translate3d(0,0,0);}
50% {transform:scaleX(0.4) translate3d(70%,0,0);}
75% {transform:scaleX(0.6) translate3d(50%,0,0);}
100% {transform:scaleX(1) translate3d(100%,0,0);}
}
@keyframes fade_anim {
to {
opacity:.78
}
}
@media only screen and (max-height: 438px) {
.pk_zoombtn .pk_zoom_out_v,
.pk_zoombtn .pk_zoom_in_v{
display:none !important;
}
}
@media only screen and (max-width: 1250px) {
.pk_ctns,
.pk_transport{
float: none;
display: block;
border: 0;
min-width:auto;
margin-right: 14px;
margin-top: 0;
height: 28px;
}
.pk_selection{
min-width:auto;
}
.pk_tb .pk_btn {
font-size: 12px;
width: 24px;
height: 23px;
margin: 0px 3px;
line-height: 24px;
}
.pk_sellist .pk_title{
font-size:10px;
}
.pk_selection .pk_sellist {
width: 296px;
}
.pk_tb .pk_selection .pk_btn{
width: 60px;
line-height: 10px;
font-size: 11px;
height: 32px;
margin-top: 3px;
margin-left: 10px;
}
.pk_mark1{
width:5.554%;
}
.pk_mark1.pk_odd{
display:none;
}
}
@media only screen and (max-width: 864px) {
.pk_selection .pk_sellist div{
margin:0 16px 0 0;
}
.pk_sellist .pk_title{
display:none;
}
.pk_tb .pk_selection .pk_btn{
width:34px;
}
.pk_selection .pk_sellist {
width: 212px;
}
.icon-clearsel:before {
content: "clear";
}
.pk_mark1{
font-size:9px;
letter-spacing:0;
}
}
@media only screen and (max-width: 779px) {
.pk_selection {
display:none !important;
}
.pk_btn button{
padding: 2px 12px;
}
.pk_timecontainer{
margin-right:10px;
width:200px
}
.pk_timing{
font-size:24px;
padding:10px 0 0 8px
}
.pk_total_dur, .pk_hover_dur{
font-size:13px
}
.pk_hdr .pk_btn{
margin:2px 10px 0 10px
}
.pk_tbc{
overflow-x:scroll;
background:#363636;
border-bottom: 1px solid #000;
-webkit-overflow-scrolling:touch;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.pk_tbc::-webkit-scrollbar { /* WebKit */
width: 0;
height: 0;
}
.pk_tb{
padding:6px 0px 6px 14px;
white-space:nowrap;
border-bottom:none;
}
.pk_mob .pk_ctns, .pk_mob .pk_transport {
height:36px;
}
.pk_mark1{font-size:8px}
.pk_tmpMsg{
font-size:14px;
line-height:28px;
margin-left:-120px;
width:240px
}
.pk_mob .pk_hdr{
padding: 20px 5px 0 5px;
}
.pk_mob .pk_transport,
.pk_mob .pk_ctns,
.pk_mob .pk_btngroup {
float:none;
display:inline-block;
}
.pk_mob .pk_btngroup{
padding-top:8px;
}
.pk_mob .pk_tb .pk_btn {
font-size: 16px;
width: 32px;
height: 32px;
margin: 0px 4px;
line-height: 24px;
}
.pk_h200 .pk_col {
width: 20%;
overflow: hidden;
}
.pk_zoombtn button{
height:19px;
}
.pk_wavescroll{
margin-bottom:8px;
height:16px;
}
.pk_markers{
margin-top:3px;
}
.pk_lcldrf .pk_lcla{
margin-left:14px;
font-size:12px;
}
}
@media only screen and (max-width: 400px) {
.pk_hdr .pk_btn{
margin:2px 4px 0 4px
}
}
.pk_av canvas{
opacity:0;
transition: opacity 440ms;
}
.pk_dck{
position:relative;
display:none;
}
.pk_frqan{
border:1px solid #444;
width:380px;
margin:15px 15px 12px 15px;
height:110px;
border-radius: 3px;
position:absolute;
z-index:7;
background:#111
}
.pk_wavepoint{
position: absolute;
width: 2px;
background: #d7ba6d;
height: 100%;
pointer-events:none;
top: 0;
transform:translate3d(0,0,0);
display: none;
}
.pk_peq{
width:450px;
height:225px;
z-index:3;
position:relative;
}
.pk_peq2{
position:absolute;
left: 14px;
width:225px;
height:112px;
z-index:2;
transform:scale(2);
transform-origin:0 0;
}
.pk_peq3{
font-size:10px;
color:#666;
position:relative;
z-index:1;
}
.pk_peq3 span span{
position: absolute;
top: -229px;
width: 1px;
display: block;
height: 225px;
border-left: 1px dashed #585858;
left: 50%;
}
.pk_peq4{
font-size:9px;
color:#666;
position:absolute;
left: 0;
top: 0;
height: 225px;
}
.pk_peq4:before{
content: ' ';
position: absolute;
background: #1b1a1a;
width: 450px;
height: 225px;
display: block;
left: 15px;
top: 5px;
}
.pk_peq4 span span{
position: absolute;
width: 446px;
left: 18px;
display: block;
top: 5px;
height: 1px;
border-top: 1px solid #4d4729;
}
.pk_peq4 span{
text-align:center;
top: 50%;
left: 0px;
width: 15px;
position: absolute;
}
.pk_pgeq_els{
margin-bottom: 0px;
padding: 6px 0;
border-bottom: 1px solid #333;
transition:background 120ms;
}
.pk_pgeq_els:hover{
background:#3b413f;
}
.pk_pgeq_els.pk_act{
background:#24302c;
}
.pk_pgeq_els > span{
display:inline-block;
width:18%;
text-align:center;
color: #ccc;
font-size: 12px;
}
.pk_pgeq_els .pk_txlft{
text-align: left;
width:20%;
}
.pk_pgeq_els .pk_del{
width:8%;
overflow:hidden;
font-size:8px;
text-align:left;
}
.pk_pgeq_els > div{
position:relative;
display:inline-block;
width:18%;
text-align: center;
}
.pk_pgeq_els .pk_val{
float:none;
margin:0;
color:#fff;
outline:0;
min-width: 32px;
max-width: 44px;
border-left: none;
border-right: none;
}
.pk_pgeq_els select{
margin: 0 auto;
padding:0 0 0 10px;
}
.pk_pgeq_freq{
position: absolute;
background: #212121;
padding: 2px 20px;
z-index: 9;
width: 220px;
border-radius: 20px;
left: -100px;
border: 1px solid #313131;
top: 30px;
box-shadow: 0 1px 13px 4px #090909;
}
.pk_pgeq_freq .pk_arr{
pointer-events:none;
width: 0px;
height: 0px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
position: absolute;
border-bottom: 8px solid #2f2f2f;
left: 50%;
top: -8px;
}
.pk_pgeq_els .pk_check:not(:checked) + label,
.pk_pgeq_els .pk_check:checked + label {
position: relative;
padding-left: 25px;
display: inline-block;
height: 24px;
line-height: 20px;
cursor: pointer;
font-size: 10px;
margin:0;
}
.pk_pgeq_els i{
display: inline-block;
padding: 0 8px;
margin-right: 8px;
}
label.pk_dis,
.pk_pgeq_els.pk_dis .pk_gain{
pointer-events: none;
opacity:0.5;
}
.pk_pglst{
max-height: 160px;
overflow-y: scroll;
padding-bottom: 20px;
overflow: -moz-scrollbars-none;
-ms-overflow-style: none;
}
.pk_pglst::-webkit-scrollbar {
width: 0px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
body.pk_stndln{
padding-bottom:600px;
overflow:hidden;
}
.pk_stndln .pk_fxd{
height:100%;
position:fixed;
left:0;top:0;width:100%;
}
.pk_stndln .pk_modal_back {
position:fixed;
}
.pk_fnt10 .pk_modal_a_bottom{
font-size:10px
}
.pk_tbs{
margin-left: -14px;
margin-right: -14px;
margin-top: -10px;
text-align: center;
}
.pk_tbsa{
width: 33.3%;
display: inline-block;
padding: 10px 0;
box-sizing: border-box;
border-right: 1px solid #111;
border-bottom: 1px solid #111;
background:#303030;
}
.pk_tbsa:hover{
box-shadow: inset 0 -2px 6px #181818;
}
.pk_tbsa.pk_act{
box-shadow:none;
border-bottom:none;
background:transparent;
text-shadow:0 0 1px #000
}
#pk_tmp_tap{
width: 100%;
background: #151515;
min-width: 500px;
height: 30px;
position:relative;
overflow:hidden;
clear: both;
border-bottom: 1px solid #333;
border-left: 1px solid #333;
border-right: 1px solid #333;
margin-bottom: 10px;
box-sizing: border-box;
}
#pk_tmp_tap2 .pk_obj,
#pk_tmp_tap .pk_obj{
width: 100%;
height: 100%;
z-index:2;
background: linear-gradient(to right, rgba(68, 18, 19, 0.75) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,0) 100%);
border-left: 2px solid #f52b2b;
position: absolute;
top: 0;
transform: translate3d(100%,0,0);
left: -4px;
will-change: transform;
overflow:hidden;
transition: transform 3.3s linear;
}
#pk_tmp_tap2 .pk_obj{
transform: translate3d(50%,0,0);
transition:transform 1770ms linear;
}
#pk_tmp_tap .pk_obj2{
width:100px;
display:block;
position:absolute;
left:50%;
line-height:30px;
margin-left:-50px;
text-align:center;
opacity:.6;
font-size:16px;
transition:opacity 200ms;
}
#pk_tmp_tap3{
width: 100%;
background: #333;
min-width: 500px;
min-height: 200px;
border: 1px solid #424242;
overflow:hidden;
position:relative;
box-sizing: border-box;
margin-top:10px;
transition: background 70ms;
}
#pk_tmp_tap3:hover{
background:#363636;
}
#pk_tmp_tap3.pk_act{
background:#555;
}
.pk_modal_a_bottom.pk_act{
color:#000;
background:#ccc;
}
.pk_modal_a_bottom.pk_inact{
pointer-events:none;
}
.pk_id3ttl{
font-weight: bold;
padding: 2px 10px;
display: inline-block;
min-width: 64px;
}
.pk_lcldrf{
padding: 6px 0 14px 0;
margin-top: 10px;
overflow: hidden;
position:relative;
border-bottom: 1px solid #444;
margin-left:-5px;
padding-left:5px;
margin-right:-5px;
padding-right:5px;
}
.pk_lcldrf:hover{
background:#292929;
}
.pk_lcldrf .pk_i{
color:#909090;
font-size:11px;
padding-right:5px;
line-height:16px;
vertical-align:middle;
min-width:20px;
display:inline-block;
}
.pk_lcla{
margin:0 10px;
margin-left:15px;
vertical-align: middle;
}
.pk_lcla2{
position: absolute;
left: 7px;
bottom: 16px;
background: rgba(0,0,0,0.75);
border-radius: 4px;
font-size: 9px;
display: block;
padding: 1px 8px;
border: 1px solid rgba(255,255,255,0.3);
}
.pk_lcla2.pk_act{
background:rgba(255,255,255,0.74);
color:#111;
}
.pk_lcli{
max-width:120px;
width:120px;
vertical-align:middle;
height:48px;
background:#111;
}
.pk_lcls{
min-width: 74px;
width:25%;
margin-bottom: 6px;
display: inline-block;
vertical-align:top;
line-height:16px;
white-space:nowrap;
}
.pk_aut_act,
.pk_aut{
box-shadow: 0px 0px 20px #eee, inset 0px 0px 4px gold;
}