You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1094 lines
33 KiB
1094 lines
33 KiB
/*.vis-hq-no-select {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}*/
|
|
.vis-hq-no-space {
|
|
border: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
border-spacing: 0;
|
|
border-image-width: 0;
|
|
}
|
|
|
|
.vis-hq-nodata {
|
|
position: absolute;
|
|
top: 10%;
|
|
left: 10%;
|
|
transform: scale(2);
|
|
}
|
|
.vis-hq-battery {
|
|
position: absolute;
|
|
top: -8px;
|
|
right: -8px;
|
|
}
|
|
.vis-hq-working {
|
|
position: absolute;
|
|
top: -8px;
|
|
left: -8px;
|
|
}
|
|
/* ------------------------ Button styles ---------------------------*/
|
|
/* Basis */
|
|
.vis-hq-button-base {
|
|
font-family: 'Tahoma', sans-serif;
|
|
cursor: pointer;
|
|
z-index:2;
|
|
}
|
|
.vis-hq-main {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.vis-hq-main:active {
|
|
transform: scale(0.95);
|
|
}
|
|
.vis-hq-main-none {
|
|
/*transform: none !important;*/
|
|
pointer-events:none;
|
|
}
|
|
.vis-hq-leftinfo {
|
|
background: #bbe9f9; /* Old browsers */
|
|
background: rgba(182,182,182,0.6);
|
|
font-family: 'Tahoma', sans-serif;
|
|
position: absolute;
|
|
z-index: -1;
|
|
font-size: 12px;
|
|
border-radius: 10px;
|
|
margin-top: 5px;
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
}
|
|
.vis-hq-rightinfo {
|
|
background: #bbe9f9; /* Old browsers */
|
|
background: rgba(182,182,182,0.6);
|
|
font-family: 'Tahoma', sans-serif;
|
|
position: absolute;
|
|
z-index: -1;
|
|
margin-top: 5px;
|
|
font-size: 12px;
|
|
border-radius: 10px;
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
left: 50%;
|
|
white-space: nowrap;
|
|
}
|
|
.vis-hq-button-base-normal {
|
|
background: #ADADAD;
|
|
background: -ms-linear-gradient(top, #ADADAD 0%, #333333 100%);
|
|
background: -moz-linear-gradient(top, #ADADAD 0%, #333333 100%);
|
|
background: -o-linear-gradient(top, #ADADAD 0%, #333333 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ADADAD), color-stop(1, #333333));
|
|
background: -webkit-linear-gradient(top, #ADADAD 0%, #333333 100%);
|
|
background: linear-gradient(to bottom, #ADADAD 0%, #333333 100%);
|
|
border: 1px solid rgba(0,0,0,0.9) ;
|
|
box-shadow: inset 0 1px 0 0 rgba(128,128,128,0.5),
|
|
0 0 1px 1px rgba(128,128,128,0.8),
|
|
0 0 0 6px rgba(0,0,0,0.06),
|
|
0 0 0 3px rgba(0,0,0,0.1);
|
|
}
|
|
.vis-hq-button-base-normal:hover {
|
|
background: #E0E0E0;
|
|
backgrounD: -ms-linear-gradient(top, #E0E0E0 0%, #8F8F8F 100%);
|
|
backgrounD: -moz-linear-gradient(top, #E0E0E0 0%, #8F8F8F 100%);
|
|
backgrounD: -o-linear-gradient(top, #E0E0E0 0%, #8F8F8F 100%);
|
|
backgrounD: -webkit-gradient(linear, left top, left bottom, color-stop(0, #E0E0E0), color-stop(1, #8F8F8F));
|
|
backgrounD: -webkit-linear-gradient(top, #E0E0E0 0%, #8F8F8F 100%);
|
|
backgrounD: linear-gradient(to bottom, #E0E0E0 0%, #8F8F8F 100%);
|
|
border: 1px solid rgba(0,0,0,0.4) ;
|
|
box-shadow: inset 0 1px 0 0 rgba(128,128,128,0.5),
|
|
0 0 1px 1px rgba(128,128,128,0.8),
|
|
0 0 0 6px rgba(0,0,0,0.06),
|
|
0 0 0 3px rgba(0,0,0,0.1);
|
|
}
|
|
.vis-hq-button-base-on {
|
|
background: rgb(255,214,94);
|
|
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZDY1ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZWJmMDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
|
|
background: -moz-linear-gradient(top, rgba(255,214,94,1) 0%, rgba(254,191,4,1) 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,214,94,1)), color-stop(100%,rgba(254,191,4,1)));
|
|
background: -webkit-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%);
|
|
background: -o-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%);
|
|
background: -ms-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%);
|
|
background: linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 );
|
|
border: 1px solid rgba(0,0,0,0.4) ;
|
|
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.5),
|
|
0 0 1px 1px rgba(255,255,255,0.8),
|
|
0 0 0 6px rgba(0,0,0,0.06),
|
|
0 0 0 3px rgba(0,0,0,0.1);
|
|
}
|
|
.vis-hq-button-base-on:hover {
|
|
background-image: -ms-linear-gradient(top, #FDCB28 0%, #E08600 100%);
|
|
background-image: -moz-linear-gradient(top, #FDCB28 0%, #E08600 100%);
|
|
background-image: -o-linear-gradient(top, #FDCB28 0%, #E08600 100%);
|
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDCB28), color-stop(1, #E08600));
|
|
background-image: -webkit-linear-gradient(top, #FDCB28 0%, #E08600 100%);
|
|
background-image: linear-gradient(to bottom, #FDCB28 0%, #E08600 100%);
|
|
border: 1px solid rgba(0,0,0,0.4) ;
|
|
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.5),
|
|
0 0 1px 1px rgba(255,255,255,0.8),
|
|
0 0 0 6px rgba(0,0,0,0.06),
|
|
0 0 0 3px rgba(0,0,0,0.1);
|
|
}
|
|
.vis-hq-button-base-moving {
|
|
background-image: -ms-linear-gradient(top, #00ACFC 0%, #006899 100%);
|
|
background-image: -moz-linear-gradient(top, #00ACFC 0%, #006899 100%);
|
|
background-image: -o-linear-gradient(top, #00ACFC 0%, #006899 100%);
|
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00ACFC), color-stop(1, #006899));
|
|
background-image: -webkit-linear-gradient(top, #00ACFC 0%, #006899 100%);
|
|
background-image: linear-gradient(to bottom, #00ACFC 0%, #006899 100%);
|
|
cursor:move;
|
|
border: 1px solid rgba(0,0,0,0.9) ;
|
|
box-shadow: inset 0 1px 0 0 rgba(128,128,128,0.5),
|
|
0 0 1px 1px rgba(128,128,128,0.8),
|
|
0 0 0 6px rgba(0,0,0,0.06),
|
|
0 0 0 3px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.vis-hq-actual-style {
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
.vis-hq-humidity-style {
|
|
text-align: center;
|
|
}
|
|
.vis-hq-readonly::before {
|
|
content: "";
|
|
cursor: default;
|
|
display: block;
|
|
position: absolute;
|
|
top: -2px;
|
|
left: -2px;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* ------------------------ Blind styles ---------------------------*/
|
|
.hq-blind-base { /* Basis */
|
|
background: #fffeff; /* Old browsers */
|
|
background: -moz-linear-gradient(top, #fffeff 0%, #8e8e90 100%); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fffeff), color-stop(100%,#8e8e90)); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(top, #fffeff 0%,#8e8e90 100%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(top, #fffeff 0%,#8e8e90 100%); /* Opera 11.10+ */
|
|
background: -ms-linear-gradient(top, #fffeff 0%,#8e8e90 100%); /* IE10+ */
|
|
background: linear-gradient(to bottom, #fffeff 0%,#8e8e90 100%); /* W3C */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffeff', endColorstr='#8e8e90',GradientType=0 ); /* IE6-9 */
|
|
box-shadow: inset 0 1px 0 0 rgba(128,128,128,0.5),
|
|
0 0 1px 1px rgba(128,128,128,0.8),
|
|
0 0 0 6px rgba(0,0,0,0.06),
|
|
0 0 0 3px rgba(0,0,0,0.1);
|
|
overflow: visible;
|
|
}
|
|
.hq-blind-blind {
|
|
background-image:url(../img/blind.png);
|
|
background-position: 0 100%;
|
|
}
|
|
.hq-blind-blind1 {
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing:border-box;
|
|
-moz-box-sizing:border-box;
|
|
-webkit-box-sizing:border-box;
|
|
border-style: solid;
|
|
background: rgb(173,174,178); /* Old browsers */
|
|
background: -moz-linear-gradient(45deg, rgba(173,174,178,1) 0%, rgba(251,251,251,1) 100%); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(173,174,178,1)), color-stop(100%,rgba(251,251,251,1))); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(45deg, rgba(173,174,178,1) 0%,rgba(251,251,251,1) 100%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(45deg, rgba(173,174,178,1) 0%,rgba(251,251,251,1) 100%); /* Opera 11.10+ */
|
|
background: -ms-linear-gradient(45deg, rgba(173,174,178,1) 0%,rgba(251,251,251,1) 100%); /* IE10+ */
|
|
background: linear-gradient(45deg, rgba(173,174,178,1) 0%,rgba(251,251,251,1) 100%); /* W3C */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#adaeb2', endColorstr='#fbfbfb',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
|
|
}
|
|
.hq-blind-blind2 {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing:border-box;
|
|
-moz-box-sizing:border-box;
|
|
-webkit-box-sizing:border-box;
|
|
border-style: solid;
|
|
border-color: rgba(0,0,0,0);
|
|
}
|
|
.hq-blind-blind3 {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing:border-box;
|
|
-moz-box-sizing:border-box;
|
|
-webkit-box-sizing:border-box;
|
|
background: -moz-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,51,135,0.83) 100%); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,51,135,0.83))); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,51,135,0.83) 100%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,51,135,0.83) 100%); /* Opera 11.10+ */
|
|
background: -ms-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,51,135,0.83) 100%); /* IE10+ */
|
|
background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,51,135,0.83) 100%); /* W3C */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#d4003387',GradientType=0 ); /* IE6-9 */
|
|
}
|
|
|
|
.hq-blind-blind4 {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing:border-box;
|
|
-moz-box-sizing:border-box;
|
|
-webkit-box-sizing:border-box;
|
|
border-style: solid;
|
|
background: rgb(221,231,243); /* Old browsers */
|
|
background: -moz-linear-gradient(45deg, rgba(221,231,243,0.7) 0%, rgba(120,132,146,0.7) 52%, rgba(166,178,190,0.7) 68%, rgba(201,206,210,0.7) 100%); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(221,231,243,0.7)), color-stop(52%,rgba(120,132,146,0.7)), color-stop(68%,rgba(166,178,190,0.7)), color-stop(100%,rgba(201,206,210,0.7))); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(45deg, rgba(221,231,243,0.7) 0%,rgba(120,132,146,0.7) 52%,rgba(166,178,190,0.7) 68%,rgba(201,206,210,0.7) 100%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(45deg, rgba(221,231,243,0.7) 0%,rgba(120,132,146,0.7) 52%,rgba(166,178,190,0.7) 68%,rgba(201,206,210,0.7) 100%); /* Opera 11.10+ */
|
|
background: -ms-linear-gradient(45deg, rgba(221,231,243,0.7) 0%,rgba(120,132,146,0.7) 52%,rgba(166,178,190,0.7) 68%,rgba(201,206,210,0.7) 100%); /* IE10+ */
|
|
background: linear-gradient(45deg, rgba(221,231,243,0.7) 0%,rgba(120,132,146,0.7) 52%,rgba(166,178,190,0.7) 68%,rgba(201,206,210,0.7) 100%); /* W3C */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dde7f3', endColorstr='#c9ced2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
|
|
}
|
|
.hq-blind-blind4-opened-left {
|
|
-moz-transform: skew(0deg,10deg) scale(0.9, 1);
|
|
-webkit-transform: skew(0deg, 10deg) scale(0.9, 1);
|
|
-o-transform: skew(0deg,10deg) scale(0.9, 1);
|
|
-ms-transform: skew(0deg,10deg) scale(0.9, 1);
|
|
transform: skew(0deg,10deg) scale(0.9, 1);
|
|
transform-origin: 0 0
|
|
}
|
|
.hq-blind-blind4-opened-right {
|
|
-moz-transform: skew(0deg,-10deg) scale(0.9, 1);
|
|
-webkit-transform: skew(0deg, -10deg) scale(0.9, 1);
|
|
-o-transform: skew(0deg,-10deg) scale(0.9, 1);
|
|
-ms-transform: skew(0deg,-10deg) scale(0.9, 1);
|
|
transform: skew(0deg,-10deg) scale(0.9, 1);
|
|
transform-origin: 100% 0
|
|
}
|
|
.hq-blind-blind4-opened-top, .hq-blind-blind4-tilted {
|
|
-moz-transform: skew(-10deg,0deg) scale(1, 0.9);
|
|
-webkit-transform: skew(-10deg, 0deg) scale(1, 0.9);
|
|
-o-transform: skew(-10deg,0deg) scale(1, 0.9);
|
|
-ms-transform: skew(-10deg,0deg) scale(1, 0.9);
|
|
transform: skew(-10deg,0deg) scale(1, 0.9);
|
|
transform-origin: 0 100%
|
|
}
|
|
.hq-blind-blind4-opened-bottom {
|
|
-moz-transform: skew(10deg,0deg) scale(1, 0.9);
|
|
-webkit-transform: skew(10deg, 0deg) scale(1, 0.9);
|
|
-o-transform: skew(10deg,0deg) scale(1, 0.9);
|
|
-ms-transform: skew(10deg,0deg) scale(1, 0.9);
|
|
transform: skew(10deg,0deg) scale(1, 0.9);
|
|
transform-origin: 0 0
|
|
}
|
|
|
|
.hq-blind-handle {
|
|
position: absolute;
|
|
border-color: #a5aaad;
|
|
border-style: solid;
|
|
}
|
|
.hq-blind-handle-bg {
|
|
background: rgb(226,226,226); /* Old browsers */
|
|
background: -moz-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(226,226,226,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(254,254,254,1))); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Opera 11.10+ */
|
|
background: -ms-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* IE10+ */
|
|
background: linear-gradient(to bottom, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* W3C */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
|
|
}
|
|
.hq-blind-handle-tilted-bg {
|
|
background: rgb(241,231,103); /* Old browsers */
|
|
background: -moz-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(241,231,103,1)), color-stop(100%,rgba(254,182,69,1))); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(top, rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(top, rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* Opera 11.10+ */
|
|
background: -ms-linear-gradient(top, rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* IE10+ */
|
|
background: linear-gradient(to bottom, rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* W3C */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645',GradientType=0 ); /* IE6-9 */
|
|
}
|
|
|
|
.hq-blind-big {
|
|
position: absolute;
|
|
z-index: 901;
|
|
/*top: calc(50% - 120px);
|
|
left: calc(50% - 55px);*/
|
|
width: 7em;
|
|
height: 18em;
|
|
}
|
|
|
|
.hq-blind-big-slider {
|
|
border-width: 3px 2px 2px 2px;
|
|
border-color: #a5aaad;
|
|
border-style: solid;
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-border-radius: 15px;
|
|
-moz-border-radius: 15px;
|
|
border-radius: 15px;
|
|
background: rgb(221,231,243); /* Old browsers */
|
|
background: -moz-linear-gradient(45deg, rgba(221,231,243,0.9) 0%, rgba(120,132,146,0.9) 52%, rgba(166,178,190,0.9) 68%, rgba(201,206,210,0.9) 100%); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(221,231,243,0.9)), color-stop(52%,rgba(120,132,146,0.9)), color-stop(68%,rgba(166,178,190,0.9)), color-stop(100%,rgba(201,206,210,0.9))); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(45deg, rgba(221,231,243,0.9) 0%,rgba(120,132,146,0.9) 52%,rgba(166,178,190,0.9) 68%,rgba(201,206,210,0.9) 100%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(45deg, rgba(221,231,243,0.9) 0%,rgba(120,132,146,0.9) 52%,rgba(166,178,190,0.9) 68%,rgba(201,206,210,0.9) 100%); /* Opera 11.10+ */
|
|
background: -ms-linear-gradient(45deg, rgba(221,231,243,0.9) 0%,rgba(120,132,146,0.9) 52%,rgba(166,178,190,0.9) 68%,rgba(201,206,210,0.9) 100%); /* IE10+ */
|
|
background: linear-gradient(45deg, rgba(221,231,243,0.9) 0%,rgba(120,132,146,0.9) 52%,rgba(166,178,190,0.9) 68%,rgba(201,206,210,0.9) 100%); /* W3C */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dde7f3', endColorstr='#c9ced2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
|
|
}
|
|
|
|
.hq-blind-big-button {
|
|
height: 2.5em;
|
|
width: 100%;
|
|
-moz-box-shadow:inset 0 1px 0 0 #bbdaf7;
|
|
-webkit-box-shadow:inset 0 1px 0 0 #bbdaf7;
|
|
box-shadow:inset 0 1px 0 0 #bbdaf7;
|
|
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
|
|
background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
|
|
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
|
|
background-color:#79bbff;
|
|
-webkit-border-radius:15px;
|
|
-moz-border-radius:15px;
|
|
border-radius:15px;
|
|
text-indent:0;
|
|
border:1px solid #84bbf3;
|
|
}
|
|
.hq-blind-big-button-up {
|
|
background-image: url(../img/inject-bottom.png);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.hq-blind-big-button-down {
|
|
background-image: url(../img/inject-top.png);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
/* ------------- Door --------------------------------*/
|
|
.vis-hq-door {
|
|
-webkit-border-radius: 1px;
|
|
-moz-border-radius: 1px;
|
|
border-radius: 1px;
|
|
}
|
|
.vis-hq-door-sheet {
|
|
background: #fffeff; /* Old browsers */
|
|
background: -moz-linear-gradient(top, #fffeff 0%, #8e8e90 100%); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fffeff), color-stop(100%,#8e8e90)); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(top, #fffeff 0%,#8e8e90 100%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(top, #fffeff 0%,#8e8e90 100%); /* Opera 11.10+ */
|
|
background: -ms-linear-gradient(top, #fffeff 0%,#8e8e90 100%); /* IE10+ */
|
|
background: linear-gradient(to bottom, #fffeff 0%,#8e8e90 100%); /* W3C */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffeff', endColorstr='#8e8e90',GradientType=0 ); /* IE6-9 */
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.vis-hq-door-empty-right, .vis-hq-door-empty-left {
|
|
width: 0;
|
|
height: 100%;
|
|
}
|
|
.vis-hq-door-handle {
|
|
position: absolute;
|
|
top: 50%;
|
|
background: #fffeff; /* Old browsers */
|
|
background: -moz-linear-gradient(top, #fffeff 0%, #8e8e90 100%); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fffeff), color-stop(100%,#8e8e90)); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(top, #fffeff 0%,#8e8e90 100%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(top, #fffeff 0%,#8e8e90 100%); /* Opera 11.10+ */
|
|
background: -ms-linear-gradient(top, #fffeff 0%,#8e8e90 100%); /* IE10+ */
|
|
background: linear-gradient(to bottom, #fffeff 0%,#8e8e90 100%); /* W3C */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffeff', endColorstr='#8e8e90',GradientType=0 ); /* IE6-9 */
|
|
box-shadow: inset 0 1px 0 0 rgba(128,128,128,0.5),
|
|
0 0 1px 1px rgba(128,128,128,0.8),
|
|
0 0 0 3px rgba(0,0,0,0.1);
|
|
-webkit-border-radius: 2px;
|
|
-moz-border-radius: 2px;
|
|
border-radius: 2px;
|
|
width: 4px;
|
|
height: 4px;
|
|
}
|
|
/* ------------ Lock -----------*/
|
|
.vis-hq-biglock {
|
|
position: absolute;
|
|
z-index:1001;
|
|
background: rgb(221,231,243); /* Old browsers */
|
|
background: -moz-linear-gradient(45deg, rgba(221,231,243,0.9) 0%, rgba(120,132,146,0.9) 52%, rgba(166,178,190,0.9) 68%, rgba(201,206,210,0.9) 100%); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(221,231,243,0.9)), color-stop(52%,rgba(120,132,146,0.9)), color-stop(68%,rgba(166,178,190,0.9)), color-stop(100%,rgba(201,206,210,0.9))); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(45deg, rgba(221,231,243,0.9) 0%,rgba(120,132,146,0.9) 52%,rgba(166,178,190,0.9) 68%,rgba(201,206,210,0.9) 100%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(45deg, rgba(221,231,243,0.9) 0%,rgba(120,132,146,0.9) 52%,rgba(166,178,190,0.9) 68%,rgba(201,206,210,0.9) 100%); /* Opera 11.10+ */
|
|
background: -ms-linear-gradient(45deg, rgba(221,231,243,0.9) 0%,rgba(120,132,146,0.9) 52%,rgba(166,178,190,0.9) 68%,rgba(201,206,210,0.9) 100%); /* IE10+ */
|
|
background: linear-gradient(45deg, rgba(221,231,243,0.9) 0%,rgba(120,132,146,0.9) 52%,rgba(166,178,190,0.9) 68%,rgba(201,206,210,0.9) 100%); /* W3C */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dde7f3', endColorstr='#c9ced2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
|
|
border-width: 3px 2px 2px 2px;
|
|
border-color: #a5aaad;
|
|
border-style: solid;
|
|
width: 150px;
|
|
height: 150px;
|
|
-webkit-border-radius: 75px;
|
|
-moz-border-radius: 75px;
|
|
border-radius: 75px;
|
|
|
|
}
|
|
.vis-hq-biglock-button {
|
|
width: 28%;
|
|
height: 28%;
|
|
position: absolute;
|
|
}
|
|
.vis-hq-biglock-close {
|
|
left: 36%;
|
|
top: 12%;
|
|
}
|
|
.vis-hq-biglock-open {
|
|
left: 16%;
|
|
bottom: 18%;
|
|
}
|
|
.vis-hq-biglock-openDoor {
|
|
right: 16%;
|
|
bottom: 18%;
|
|
}
|
|
.vis-hq-biglock-button:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
/* ------------- Animation ---------------------------*/
|
|
.animated05s {
|
|
-webkit-animation-duration: 0.5s;
|
|
animation-duration: 0.5s;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
}
|
|
.animated1s {
|
|
-webkit-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
.animated2s {
|
|
-webkit-animation-duration: 2s;
|
|
animation-duration: 2s;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
.animated3s {
|
|
-webkit-animation-duration: 3s;
|
|
animation-duration: 3s;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
@-webkit-keyframes zoomIn1 {
|
|
0% {
|
|
opacity: 0.7;
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
|
|
70% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(2.5, 2.5, 2.5);
|
|
transform: scale3d(2.5, 2.5, 2.5);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@-webkit-keyframes zoomIn2 {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
/*29% {
|
|
opacity: 0;
|
|
}*/
|
|
30% {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(2.5, 2.5, 2.5);
|
|
transform: scale3d(2.5, 2.5, 2.5);
|
|
}
|
|
}
|
|
|
|
@keyframes zoomIn1 {
|
|
0% {
|
|
opacity: 0.7;
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
|
|
70% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(2.5, 2.5, 2.5);
|
|
transform: scale3d(2.5, 2.5, 2.5);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes zoomIn2 {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
/*29% {
|
|
opacity: 0;
|
|
}*/
|
|
30% {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(2.5, 2.5, 2.5);
|
|
transform: scale3d(2.5, 2.5, 2.5);
|
|
}
|
|
}
|
|
|
|
.zoomIn1 {
|
|
-webkit-animation-name: zoomIn1;
|
|
animation-name: zoomIn1;
|
|
}
|
|
.zoomIn2 {
|
|
-webkit-animation-name: zoomIn2;
|
|
animation-name: zoomIn2;
|
|
}
|
|
.wave {
|
|
border: 3px solid grey;
|
|
opacity: 0.7;
|
|
border-radius: 50px;
|
|
position: relative;
|
|
display:none;
|
|
}
|
|
|
|
@-webkit-keyframes zoomIn {
|
|
0% {
|
|
opacity: 0.3;
|
|
-webkit-transform: scale3d(0.1, 0.1, 0.1);
|
|
transform: scale3d(0.1, 0.1, 0.1);
|
|
}
|
|
100% {
|
|
opacity: 0.8;
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
@keyframes zoomIn {
|
|
0% {
|
|
opacity: 0.3;
|
|
-webkit-transform: scale3d(0.1, 0.1, 0.1);
|
|
transform: scale3d(0.1, 0.1, 0.1);
|
|
}
|
|
100% {
|
|
opacity: 0.8;
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
.zoomIn{
|
|
-webkit-animation-name: zoomIn;
|
|
animation-name: zoomIn;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOut {
|
|
0% {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
0% {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.fadeOut {
|
|
-webkit-animation-name: fadeOut;
|
|
animation-name: fadeOut;
|
|
}
|
|
|
|
@-webkit-keyframes zoomOut {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
100% {
|
|
opacity: 0.3;
|
|
-webkit-transform: scale3d(0.1, 0.1, 0.1);
|
|
transform: scale3d(0.1, 0.1, 0.1);
|
|
}
|
|
}
|
|
@keyframes zoomOut {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
100% {
|
|
opacity: 0.3;
|
|
-webkit-transform: scale3d(0.1, 0.1, 0.1);
|
|
transform: scale3d(0.1, 0.1, 0.1);
|
|
}
|
|
}
|
|
.zoomOut {
|
|
-webkit-animation-name: zoomOut;
|
|
animation-name: zoomOut;
|
|
}
|
|
|
|
@-webkit-keyframes bounce {
|
|
0%, 20%, 53%, 80%, 100% {
|
|
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
|
|
40%, 43% {
|
|
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
|
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
|
-webkit-transform: translate3d(0, -30px, 0);
|
|
transform: translate3d(0, -30px, 0);
|
|
}
|
|
|
|
70% {
|
|
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
|
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
|
-webkit-transform: translate3d(0, -15px, 0);
|
|
transform: translate3d(0, -15px, 0);
|
|
}
|
|
|
|
90% {
|
|
-webkit-transform: translate3d(0,-4px,0);
|
|
transform: translate3d(0,-4px,0);
|
|
}
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 20%, 53%, 80%, 100% {
|
|
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
|
|
40%, 43% {
|
|
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
|
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
|
-webkit-transform: translate3d(0, -30px, 0);
|
|
transform: translate3d(0, -30px, 0);
|
|
}
|
|
|
|
70% {
|
|
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
|
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
|
-webkit-transform: translate3d(0, -15px, 0);
|
|
transform: translate3d(0, -15px, 0);
|
|
}
|
|
|
|
90% {
|
|
-webkit-transform: translate3d(0,-4px,0);
|
|
transform: translate3d(0,-4px,0);
|
|
}
|
|
}
|
|
|
|
.bounce {
|
|
-webkit-animation-name: bounce;
|
|
animation-name: bounce;
|
|
-webkit-transform-origin: center bottom;
|
|
transform-origin: center bottom;
|
|
}
|
|
|
|
@-webkit-keyframes flash {
|
|
0%, 50%, 100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
25%, 75% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes flash {
|
|
0%, 50%, 100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
25%, 75% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.flash {
|
|
-webkit-animation-name: flash;
|
|
animation-name: flash;
|
|
}
|
|
|
|
/* originally authored by Nick Pettit - https://git.spacen.net/nickpettit/glide */
|
|
|
|
@-webkit-keyframes pulse {
|
|
0% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: scale3d(1.05, 1.05, 1.05);
|
|
transform: scale3d(1.05, 1.05, 1.05);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: scale3d(1.05, 1.05, 1.05);
|
|
transform: scale3d(1.05, 1.05, 1.05);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
|
|
.pulse {
|
|
-webkit-animation-name: pulse;
|
|
animation-name: pulse;
|
|
}
|
|
|
|
@-webkit-keyframes rubberBand {
|
|
0% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
|
|
30% {
|
|
-webkit-transform: scale3d(1.25, 0.75, 1);
|
|
transform: scale3d(1.25, 0.75, 1);
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: scale3d(0.75, 1.25, 1);
|
|
transform: scale3d(0.75, 1.25, 1);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: scale3d(1.15, 0.85, 1);
|
|
transform: scale3d(1.15, 0.85, 1);
|
|
}
|
|
|
|
65% {
|
|
-webkit-transform: scale3d(.95, 1.05, 1);
|
|
transform: scale3d(.95, 1.05, 1);
|
|
}
|
|
|
|
75% {
|
|
-webkit-transform: scale3d(1.05, .95, 1);
|
|
transform: scale3d(1.05, .95, 1);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes rubberBand {
|
|
0% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
|
|
30% {
|
|
-webkit-transform: scale3d(1.25, 0.75, 1);
|
|
transform: scale3d(1.25, 0.75, 1);
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: scale3d(0.75, 1.25, 1);
|
|
transform: scale3d(0.75, 1.25, 1);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: scale3d(1.15, 0.85, 1);
|
|
transform: scale3d(1.15, 0.85, 1);
|
|
}
|
|
|
|
65% {
|
|
-webkit-transform: scale3d(.95, 1.05, 1);
|
|
transform: scale3d(.95, 1.05, 1);
|
|
}
|
|
|
|
75% {
|
|
-webkit-transform: scale3d(1.05, .95, 1);
|
|
transform: scale3d(1.05, .95, 1);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
|
|
.rubberBand {
|
|
-webkit-animation-name: rubberBand;
|
|
animation-name: rubberBand;
|
|
}
|
|
|
|
@-webkit-keyframes shake {
|
|
0%, 100% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
10%, 30%, 50%, 70%, 90% {
|
|
-webkit-transform: translate3d(-10px, 0, 0);
|
|
transform: translate3d(-10px, 0, 0);
|
|
}
|
|
|
|
20%, 40%, 60%, 80% {
|
|
-webkit-transform: translate3d(10px, 0, 0);
|
|
transform: translate3d(10px, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes shake {
|
|
0%, 100% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
10%, 30%, 50%, 70%, 90% {
|
|
-webkit-transform: translate3d(-10px, 0, 0);
|
|
transform: translate3d(-10px, 0, 0);
|
|
}
|
|
|
|
20%, 40%, 60%, 80% {
|
|
-webkit-transform: translate3d(10px, 0, 0);
|
|
transform: translate3d(10px, 0, 0);
|
|
}
|
|
}
|
|
|
|
.shake {
|
|
-webkit-animation-name: shake;
|
|
animation-name: shake;
|
|
}
|
|
|
|
@-webkit-keyframes swing {
|
|
20% {
|
|
-webkit-transform: rotate3d(0, 0, 1, 15deg);
|
|
transform: rotate3d(0, 0, 1, 15deg);
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: rotate3d(0, 0, 1, -10deg);
|
|
transform: rotate3d(0, 0, 1, -10deg);
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: rotate3d(0, 0, 1, 5deg);
|
|
transform: rotate3d(0, 0, 1, 5deg);
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: rotate3d(0, 0, 1, -5deg);
|
|
transform: rotate3d(0, 0, 1, -5deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: rotate3d(0, 0, 1, 0deg);
|
|
transform: rotate3d(0, 0, 1, 0deg);
|
|
}
|
|
}
|
|
|
|
@keyframes swing {
|
|
20% {
|
|
-webkit-transform: rotate3d(0, 0, 1, 15deg);
|
|
transform: rotate3d(0, 0, 1, 15deg);
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: rotate3d(0, 0, 1, -10deg);
|
|
transform: rotate3d(0, 0, 1, -10deg);
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: rotate3d(0, 0, 1, 5deg);
|
|
transform: rotate3d(0, 0, 1, 5deg);
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: rotate3d(0, 0, 1, -5deg);
|
|
transform: rotate3d(0, 0, 1, -5deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: rotate3d(0, 0, 1, 0deg);
|
|
transform: rotate3d(0, 0, 1, 0deg);
|
|
}
|
|
}
|
|
|
|
.swing {
|
|
-webkit-transform-origin: top center;
|
|
transform-origin: top center;
|
|
-webkit-animation-name: swing;
|
|
animation-name: swing;
|
|
}
|
|
|
|
@-webkit-keyframes tada {
|
|
0% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
|
|
10%, 20% {
|
|
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
|
|
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
|
|
}
|
|
|
|
30%, 50%, 70%, 90% {
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
|
}
|
|
|
|
40%, 60%, 80% {
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes tada {
|
|
0% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
|
|
10%, 20% {
|
|
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
|
|
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
|
|
}
|
|
|
|
30%, 50%, 70%, 90% {
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
|
}
|
|
|
|
40%, 60%, 80% {
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
|
|
.tada {
|
|
-webkit-animation-name: tada;
|
|
animation-name: tada;
|
|
}
|
|
|
|
/* originally authored by Nick Pettit - https://git.spacen.net/nickpettit/glide */
|
|
|
|
@-webkit-keyframes wobble {
|
|
0% {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
|
|
15% {
|
|
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
|
|
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
|
|
}
|
|
|
|
30% {
|
|
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
|
|
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
|
|
}
|
|
|
|
45% {
|
|
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
|
|
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
|
|
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
|
|
}
|
|
|
|
75% {
|
|
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
|
|
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
@keyframes wobble {
|
|
0% {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
|
|
15% {
|
|
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
|
|
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
|
|
}
|
|
|
|
30% {
|
|
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
|
|
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
|
|
}
|
|
|
|
45% {
|
|
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
|
|
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
|
|
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
|
|
}
|
|
|
|
75% {
|
|
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
|
|
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.wobble {
|
|
-webkit-animation-name: wobble;
|
|
animation-name: wobble;
|
|
}
|