You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
392 lines
8.9 KiB
CSS
392 lines
8.9 KiB
CSS
/*
|
|
patternLock.js v 0.5.0
|
|
Author: Sudhanshu Yadav
|
|
Copyright (c) 2013 Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
|
|
Demo and documentaion on: ignitersworld.com/lab/patternLock.html
|
|
*/
|
|
.patt-holder{background:#3382c0;-ms-touch-action:none}.patt-wrap{position:relative;cursor:pointer}.patt-wrap li,.patt-wrap ul{list-style:none;margin:0;padding:0}.patt-circ{position:relative;float:left;box-sizing:border-box;-moz-box-sizing:border-box}.patt-circ.hovered{border:3px solid #090}.patt-error .patt-circ.hovered{border:3px solid #BA1B26}.patt-hidden .patt-circ.hovered{border:0}.patt-dots,.patt-lines{border-radius:5px;height:10px;position:absolute}.patt-dots{background:#FFF;width:10px;top:50%;left:50%;margin-top:-5px;margin-left:-5px}.patt-lines{background:rgba(255,255,255,.7);transform-origin:5px 5px;-ms-transform-origin:5px 5px;-webkit-transform-origin:5px 5px}.patt-hidden .patt-lines{display:none}
|
|
|
|
.mhn-ui-date-time,
|
|
.text-center {
|
|
text-align: center
|
|
}
|
|
*,
|
|
:after,
|
|
:before {
|
|
box-sizing: border-box
|
|
}
|
|
.pull-left {
|
|
float: left
|
|
}
|
|
.pull-right {
|
|
float: right
|
|
}
|
|
.clearfix:after,
|
|
.clearfix:before {
|
|
content: '';
|
|
display: table
|
|
}
|
|
.clearfix:after {
|
|
clear: both;
|
|
display: block
|
|
}
|
|
body {
|
|
margin: 0;
|
|
color: #fff;
|
|
background: rgba(66, 87, 67, 0.8);
|
|
font: 300 14px/18px Roboto, sans-serif
|
|
}
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none
|
|
}
|
|
a:hover {
|
|
text-decoration: underline
|
|
}
|
|
.mhn-ui-wrap {
|
|
width: 300px;
|
|
height: 475px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
margin: 30px auto 0;
|
|
background: url(https://raw.githubusercontent.com/khadkamhn/lock-screen/master/img/mhn-ui-bg.jpg) center no-repeat #2c3e50;
|
|
box-shadow: 0 17px 50px 0 rgba(0, 0, 0, .19), 0 12px 15px 0 rgba(0, 0, 0, .24)
|
|
}
|
|
.mhn-ui-wrap:before {
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
content: '';
|
|
position: absolute;
|
|
background: rgba(0, 0, 0, .4)
|
|
}
|
|
.mhn-ui-date-time {
|
|
color: #eee;
|
|
z-index: 100;
|
|
position: relative
|
|
}
|
|
.mhn-ui-date-time .mhn-ui-time {
|
|
font-size: 28px;
|
|
font-weight: 400;
|
|
margin-bottom: 15px
|
|
}
|
|
.mhn-ui-date-time .mhn-ui-day {
|
|
font-size: 24px;
|
|
margin-bottom: 10px
|
|
}
|
|
.mhn-ui-date-time .mhn-ui-date {
|
|
font-size: 18px;
|
|
font-weight: 400
|
|
}
|
|
.mhn-ui-app-time {
|
|
padding: 0 5px;
|
|
font-size: 12px;
|
|
text-align: right;
|
|
margin: -15px -15px auto;
|
|
background: rgba(0, 0, 0, .6)
|
|
}
|
|
.mhn-lock-wrap {
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
position: absolute
|
|
}
|
|
.mhn-lock-wrap .mhn-lock-title {
|
|
text-align: center;
|
|
text-shadow: 0 1px 1px rgba(0, 0, 0, .5)
|
|
}
|
|
.mhn-lock-wrap .mhn-lock-success {
|
|
color: transparent;
|
|
text-shadow: none
|
|
}
|
|
.mhn-lock-wrap .mhn-lock-failure {
|
|
color: #f34235
|
|
}
|
|
.mhn-lock {
|
|
margin: auto;
|
|
background: 0 0
|
|
}
|
|
.patt-wrap {
|
|
margin: auto;
|
|
overflow: hidden
|
|
}
|
|
.patt-wrap li {
|
|
-webkit-transition: all .4s ease-in-out 0s;
|
|
transition: all .4s ease-in-out 0s
|
|
}
|
|
.patt-dots,
|
|
.patt-lines {
|
|
-webkit-transition: background .1s ease-in-out 0s;
|
|
transition: background .1s ease-in-out 0s
|
|
}
|
|
.patt-circ {
|
|
border: 3px solid transparent
|
|
}
|
|
.patt-dots {
|
|
background: rgba(255, 255, 255, .8)
|
|
}
|
|
.patt-lines {
|
|
background: rgba(255, 255, 255, .4)
|
|
}
|
|
.patt-circ.hovered {
|
|
border-color: #ddd;
|
|
background: rgba(255, 255, 255, .2)
|
|
}
|
|
.patt-error .patt-circ.hovered {
|
|
background: rgba(243, 66, 53, .4);
|
|
border-color: rgba(243, 66, 53, .8)
|
|
}
|
|
.patt-error .patt-lines {
|
|
background: rgba(243, 66, 53, .5)
|
|
}
|
|
.patt-success .patt-circ.hovered {
|
|
background: rgba(75, 174, 79, .4);
|
|
border-color: rgba(75, 174, 79, .8)
|
|
}
|
|
.patt-success .patt-lines {
|
|
background: rgba(75, 174, 79, .5)
|
|
}
|
|
.mhn-ui-page {
|
|
height: 100%;
|
|
z-index: 200;
|
|
display: none;
|
|
padding: 15px;
|
|
position: relative
|
|
}
|
|
.mhn-ui-page.page-lock {
|
|
position: initial
|
|
}
|
|
.mhn-ui-page .mhn-ui-app-title-head {
|
|
padding: 15px;
|
|
font-size: 16px;
|
|
margin: 0 -15px;
|
|
background: rgba(0, 0, 0, .4)
|
|
}
|
|
.mhn-ui-page .mhn-ui-filter {
|
|
float: right;
|
|
position: relative
|
|
}
|
|
.mhn-ui-page .mhn-ui-filter .mhn-ui-btn {
|
|
right: 0;
|
|
top: -5px;
|
|
padding: 5px;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
display: inline-block
|
|
}
|
|
.mhn-ui-page .mhn-ui-filter .mhn-ui-btn.active {
|
|
background: teal
|
|
}
|
|
.mhn-ui-page .mhn-ui-filter-list {
|
|
right: 0;
|
|
top: 20px;
|
|
padding: 5px;
|
|
width: 180px;
|
|
display: none;
|
|
position: absolute;
|
|
background: rgba(0, 0, 0, .8)
|
|
}
|
|
.mhn-ui-page .mhn-ui-filter-list>div {
|
|
display: block;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
padding: 2px 4px
|
|
}
|
|
.mhn-ui-page .mhn-ui-filter-list>div.active {
|
|
color: teal
|
|
}
|
|
.mhn-ui-page .mhn-ui-filter-list>div:hover {
|
|
background: teal
|
|
}
|
|
.mhn-ui-page .mhn-ui-filter-list>div.active:hover {
|
|
background: 0 0
|
|
}
|
|
.mhn-ui-page .mhn-ui-row {
|
|
margin-top: 15px
|
|
}
|
|
.mhn-ui-page .mhn-ui-row:after,
|
|
.mhn-ui-page .mhn-ui-row:before {
|
|
content: '';
|
|
display: table
|
|
}
|
|
.mhn-ui-page .mhn-ui-row:after {
|
|
clear: both;
|
|
display: block
|
|
}
|
|
.mhn-ui-page .mhn-ui-col {
|
|
width: 25%;
|
|
float: left;
|
|
margin-bottom: 15px
|
|
}
|
|
.mhn-ui-bottom-link-bar {
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 15px;
|
|
position: absolute;
|
|
text-align: center
|
|
}
|
|
.mhn-ui-bottom-link-bar .mhn-ui-bottom-btn {
|
|
width: 40px;
|
|
height: 40px;
|
|
cursor: pointer;
|
|
font-size: 28px;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
display: inline-block
|
|
}
|
|
.mhn-ui-bottom-link-bar .mhn-ui-bottom-btn:nth-child(1) {
|
|
margin-right: 15px
|
|
}
|
|
.mhn-ui-bottom-link-bar .mhn-ui-bottom-btn:nth-child(2) {
|
|
margin-left: 15px
|
|
}
|
|
.mhn-ui-bottom-link-bar .mhn-ui-bottom-btn:hover {
|
|
color: #ccc;
|
|
background: rgba(0, 0, 0, .8)
|
|
}
|
|
.mhn-ui-icon {
|
|
text-align: center
|
|
}
|
|
.mhn-ui-icon span {
|
|
width: 55px;
|
|
height: 55px;
|
|
margin: auto;
|
|
display: block;
|
|
font-size: 28px;
|
|
cursor: pointer;
|
|
line-height: 55px;
|
|
text-align: center;
|
|
border-radius: 15px;
|
|
background: rgba(0, 0, 0, .3);
|
|
-webkit-transition: background .4s ease-in-out 0s;
|
|
transition: background .4s ease-in-out 0s;
|
|
box-shadow: 0 -1px 0 rgba(255, 255, 255, .5) inset
|
|
}
|
|
.mhn-ui-icon .mhn-ui-icon-title {
|
|
margin-top: 5px;
|
|
cursor: default;
|
|
overflow: hidden;
|
|
font-size: 13px;
|
|
text-overflow: ellipsis;
|
|
text-shadow: 0 1px 1px rgba(0, 0, 0, .5)
|
|
}
|
|
.mhn-ui-page.page-author img {
|
|
padding: 8px;
|
|
margin-top: 15px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, .7)
|
|
}
|
|
.mhn-ui-credit {
|
|
padding: 5px;
|
|
font-size: 13px;
|
|
margin-top: 15px;
|
|
background: rgba(0, 0, 0, .2);
|
|
border: 1px solid rgba(0, 0, 0, .2)
|
|
}
|
|
.mhn-ui-credit p {
|
|
margin: 0;
|
|
color: #aaa
|
|
}
|
|
.mhn-ui-credit a {
|
|
font-weight: 500
|
|
}
|
|
.mhn-ui-dialog-wrap {
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: none;
|
|
z-index: 1000;
|
|
position: absolute;
|
|
background: rgba(0, 0, 0, .7)
|
|
}
|
|
.mhn-ui-dialog {
|
|
padding: 15px;
|
|
background: #000;
|
|
margin: 50% 0 auto
|
|
}
|
|
.mhn-ui-dialog .mhn-ui-dialog-title {
|
|
font-size: 18px;
|
|
font-weight: 500
|
|
}
|
|
.mhn-ui-dialog .mhn-ui-dialog-btn {
|
|
padding: 5px;
|
|
min-width: 65px;
|
|
cursor: pointer;
|
|
margin-right: 10px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
border: 2px solid rgba(255, 255, 255, .8)
|
|
}
|
|
.mhn-ui-dialog .mhn-ui-dialog-btn:hover {
|
|
background: #009688;
|
|
text-decoration: none
|
|
}
|
|
.mhn-ui-info {
|
|
margin: 30px 0;
|
|
font-size: 16px;
|
|
text-align: center
|
|
}
|
|
.mhn-ui-date,
|
|
.mhn-ui-time {
|
|
-webkit-animation: zoomIn 1s;
|
|
animation: zoomIn 1s
|
|
}
|
|
.mhn-ui-day {
|
|
-webkit-animation: rubberBand 1s;
|
|
animation: rubberBand 1s
|
|
}
|
|
.mhn-lock-failure {
|
|
-webkit-animation: zoomIn .4s;
|
|
animation: zoomIn .4s
|
|
}
|
|
.patt-circ:nth-child(1),
|
|
.patt-circ:nth-child(2),
|
|
.patt-circ:nth-child(3) {
|
|
-webkit-animation: fadeInUp .4s;
|
|
animation: fadeInUp .4s
|
|
}
|
|
.patt-circ:nth-child(4),
|
|
.patt-circ:nth-child(5),
|
|
.patt-circ:nth-child(6) {
|
|
-webkit-animation: fadeInUp .6s;
|
|
animation: fadeInUp .6s
|
|
}
|
|
.patt-circ:nth-child(7),
|
|
.patt-circ:nth-child(8),
|
|
.patt-circ:nth-child(9) {
|
|
-webkit-animation: fadeInUp .8s;
|
|
animation: fadeInUp .8s
|
|
}
|
|
.mhn-ui-icon span {
|
|
-webkit-animation: zoomIn .6s;
|
|
animation: zoomIn .6s
|
|
}
|
|
.mhn-ui-bottom-btn {
|
|
-webkit-animation: bounceInUp .8s;
|
|
animation: bounceInUp .8s
|
|
}
|
|
.mhn-ui-credit-list .mhn-ui-credit:nth-child(1) {
|
|
-webkit-animation: fadeInUp .4s;
|
|
animation: fadeInUp .4s
|
|
}
|
|
.mhn-ui-credit-list .mhn-ui-credit:nth-child(2) {
|
|
-webkit-animation: fadeInUp .5s;
|
|
animation: fadeInUp .5s
|
|
}
|
|
.mhn-ui-credit-list .mhn-ui-credit:nth-child(3) {
|
|
-webkit-animation: fadeInUp .6s;
|
|
animation: fadeInUp .6s
|
|
}
|
|
.mhn-ui-credit-list .mhn-ui-credit:nth-child(4) {
|
|
-webkit-animation: fadeInUp .7s;
|
|
animation: fadeInUp .7s
|
|
}
|
|
.mhn-ui-credit-list .mhn-ui-credit:nth-child(5) {
|
|
-webkit-animation: fadeInUp .8s;
|
|
animation: fadeInUp .8s
|
|
} |