/* Page: locked screen */ /* ADD THIS CLASS TO THE TAG */ .lockscreen { background: url(../img/blur-background09.jpg) repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /* Remove the background from the body element */ .lockscreen > body { background: transparent; } /* We will put the dynamically generated digital clock here */ .lockscreen .headline { color: #fff; text-shadow: 1px 3px 5px rgba(0,0,0,0.5); font-weight: 300; -webkit-font-smoothing: antialiased !important; opacity: 0.8; margin: 10px 0 30px 0; font-size: 90px; } @media screen and (max-width: @screen-xs) { .lockscreen .headline { font-size: 60px; margin-bottom: 40px; } } /* User name [optional] */ .lockscreen .lockscreen-name { text-align: center; font-weight: 600; font-size: 16px; } /* Will contain the image and the sign in form */ .lockscreen-item { padding: 0; background: #fff; position: relative; .border-radius(4px); .clearfix(); margin: 10px auto; width: 290px; } /* User image */ .lockscreen-item > .lockscreen-image { position: absolute; left: -10px; top: -30px; background: #fff; padding: 10px; .border-radius(50%); z-index: 10; > img { width: 70px; height: 70px; .border-radius(50%); } } /* Contains the password input and the login button */ .lockscreen-item > .lockscreen-credentials { margin-left: 80px; input { border: 0 !important; } .btn { background-color: #fff; border: 0; } } /* Extra to give the user an option to navigate the website [optional]*/ .lockscreen-link { margin-top: 30px; text-align: center; }