login.css 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. html {
  2. height:100%
  3. }
  4. body.signin {
  5. height:auto;
  6. background:url(../img/login-background.jpg) no-repeat center fixed;
  7. -webkit-background-size:cover;
  8. -moz-background-size:cover;
  9. -o-background-size:cover;
  10. background-size:cover;
  11. color:rgba(255,255,255,.95)
  12. }
  13. .signinpanel {
  14. width:750px;
  15. margin:10% auto 0
  16. }
  17. .signinpanel .logopanel {
  18. float:none;
  19. width:auto;
  20. padding:0;
  21. background:0 0
  22. }
  23. .signinpanel .signin-info ul {
  24. list-style:none;
  25. padding:0;
  26. margin:20px 0
  27. }
  28. .signinpanel .form-control {
  29. display:block;
  30. margin-top:15px
  31. }
  32. .signinpanel .uname {
  33. background:#fff url(../img/user.png) no-repeat 95% center;
  34. color:#333
  35. }
  36. .signinpanel .pword {
  37. background:#fff url(../img/locked.png) no-repeat 95% center;
  38. color:#333
  39. }
  40. .signinpanel .code {
  41. background: #fff no-repeat 95% center;color:#333; margin:0 0 15px 0;
  42. }
  43. .signinpanel .btn {
  44. margin-top:15px
  45. }
  46. .signinpanel form {
  47. background:rgba(255,255,255,.2);
  48. border:1px solid rgba(255,255,255,.3);
  49. -moz-box-shadow:0 3px 0 rgba(12,12,12,.03);
  50. -webkit-box-shadow:0 3px 0 rgba(12,12,12,.03);
  51. box-shadow:0 3px 0 rgba(12,12,12,.03);
  52. -moz-border-radius:3px;
  53. -webkit-border-radius:3px;
  54. border-radius:3px;
  55. padding:30px
  56. }
  57. .signup-footer {
  58. border-top:solid 1px rgba(255,255,255,.3);
  59. margin:20px 0;
  60. padding-top:15px
  61. }
  62. @media screen and (max-width:768px) {
  63. .signinpanel,.signuppanel {
  64. margin:0 auto;
  65. width:380px!important;
  66. padding:20px
  67. }
  68. .signinpanel form {
  69. margin-top:20px
  70. }
  71. .signup-footer,.signuppanel .form-control {
  72. margin-bottom:10px
  73. }
  74. .signup-footer .pull-left,.signup-footer .pull-right {
  75. float:none!important;
  76. text-align:center
  77. }
  78. .signinpanel .signin-info ul {
  79. display:none
  80. }
  81. }@media screen and (max-width:320px) {
  82. .signinpanel,.signuppanel {
  83. margin:0 20px;
  84. width:auto
  85. }
  86. }
  87. /*
  88. 登录界面check样式
  89. */
  90. .checkbox-custom {
  91. position: relative;
  92. padding: 0 15px 0 25px;
  93. margin-bottom: 7px;
  94. display: inline-block;
  95. }
  96. /*
  97. 将初始的checkbox的样式改变
  98. */
  99. .checkbox-custom input[type="checkbox"] {
  100. opacity: 0; /*将初始的checkbox隐藏起来*/
  101. position: absolute;
  102. cursor: pointer;
  103. z-index: 2;
  104. margin: -6px 0 0 0;
  105. top: 50%;
  106. left: 3px;
  107. }
  108. /*
  109. 设计新的checkbox,位置
  110. */
  111. .checkbox-custom label:before {
  112. content: '';
  113. position: absolute;
  114. top: 50%;
  115. left: 0;
  116. margin-top: -9px;
  117. width: 18px;
  118. height: 17px;
  119. display: inline-block;
  120. border-radius: 2px;
  121. border: 1px solid #bbb;
  122. background: #fff;
  123. }
  124. /*
  125. 点击初始的checkbox,将新的checkbox关联起来
  126. */
  127. .checkbox-custom input[type="checkbox"]:checked +label:after {
  128. position: absolute;
  129. display: inline-block;
  130. font-family: 'Glyphicons Halflings';
  131. content: "\e013";
  132. top: 42%;
  133. left: 3px;
  134. margin-top: -5px;
  135. font-size: 11px;
  136. line-height: 1;
  137. width: 16px;
  138. height: 16px;
  139. color: #333;
  140. }
  141. .checkbox-custom label {
  142. cursor: pointer;
  143. line-height: 1.2;
  144. font-weight: normal; /*改变了rememberme的字体*/
  145. margin-bottom: 0;
  146. text-align: left;
  147. }
  148. .form-control, .form-control:focus, .has-error .form-control:focus, .has-success .form-control:focus, .has-warning .form-control:focus, .navbar-collapse, .navbar-form, .navbar-form-custom .form-control:focus, .navbar-form-custom .form-control:hover, .open .btn.dropdown-toggle, .panel, .popover, .progress, .progress-bar {
  149. box-shadow: none;
  150. }
  151. .form-control{
  152. border-radius: 1px!important;
  153. padding: 6px 12px!important;
  154. height: 34px!important;
  155. }
  156. .form-control:focus{
  157. border-color: #1ab394 !important;
  158. }