git.roojs.org Git - bootswatch/blob - AdminLTE-master/less/lockscreen.less

   1 /*
   2     Page: locked screen
   3 */
   4
   5 /* ADD THIS CLASS TO THE <HTML> TAG */
   6 .lockscreen {
   7     background: url(../img/blur-background09.jpg) repeat center center fixed;
   8     -webkit-background-size: cover;
   9     -moz-background-size: cover;
  10     -o-background-size: cover;
  11     background-size: cover;
  12 }
  13
  14 /* Remove the background from the body element */
  15 .lockscreen > body {
  16     background: transparent;
  17 }
  18
  19 /* We will put the dynamically generated digital clock here */
  20 .lockscreen .headline {
  21     color: #fff;
  22     text-shadow: 1px 3px 5px rgba(0,0,0,0.5);
  23     font-weight: 300;
  24     -webkit-font-smoothing: antialiased !important;
  25     opacity: 0.8;
  26     margin: 10px 0 30px 0;
  27     font-size: 90px;
  28 }
  29
  30 @media screen and (max-width: @screen-xs) {
  31     .lockscreen .headline {
  32         font-size: 60px;
  33         margin-bottom: 40px;
  34     }
  35 }
  36
  37 /* User name [optional] */
  38 .lockscreen .lockscreen-name {
  39     text-align: center;
  40     font-weight: 600;
  41     font-size: 16px;
  42 }
  43
  44 /* Will contain the image and the sign in form */
  45 .lockscreen-item {
  46     padding: 0;
  47     background: #fff;
  48     position: relative;
  49     .border-radius(4px);
  50     .clearfix();
  51     margin: 10px auto;
  52     width: 290px;
  53 }
  54
  55 /* User image */
  56 .lockscreen-item > .lockscreen-image {
  57     position: absolute;
  58     left: -10px;
  59     top: -30px;
  60     background: #fff;
  61     padding: 10px;
  62     .border-radius(50%);
  63     z-index: 10;
  64     > img {
  65         width: 70px;
  66         height: 70px;
  67         .border-radius(50%);
  68     }
  69 }
  70
  71 /* Contains the password input and the login button */
  72 .lockscreen-item > .lockscreen-credentials {
  73     margin-left: 80px;
  74     input {
  75         border: 0 !important;
  76     }
  77     .btn {
  78         background-color: #fff;
  79         border: 0;
  80     }
  81 }
  82 /* Extra to give the user an option to navigate the website [optional]*/
  83 .lockscreen-link {
  84     margin-top: 30px;
  85     text-align: center;
  86 }