/*.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; }