You are here

Home » API reference » Super Login 7

super-login.css in Super Login 7

Same filename and directory in other branches
  1. 8 css/super-login.css
/* Try to hide Page Titles on login pages */
#page-title,
h1#page-title,
h1.page-header{
  display:none;
}

p.login-title{
  font-weight:bold;
  font-size:1.5em;
  margin:0;
  color:#555;
}
#user-login{
  margin-bottom:2em;
}
#user-login .description{
  font-size:11px;
  color:#777;
  padding-left:10px;
}

/* Field Icons */
#edit-name
{
   background: #fff url("email.png") no-repeat 5px center;
   background-size: 1em 1em;
   text-indent:2em;
   border: 1px solid #aaa;   
}

#edit-pass{ 
    background: #fff url("password.png") no-repeat 5px center;
    background-size: 1em 1em;
    text-indent:2em;
    border: 1px solid #aaa;
}

/* Forms */
#user-login,
#user-pass
{
  max-width:600px;
  margin:0 auto;
  border:5px solid #555;
  padding:1em;
}

#user-login .actions-suffix{
  float:right;
  position:relative;
  bottom:10px;
}

#edit-actions{  
  margin-top:1em;
}

#user-pass label,
#user-login label{
  display:block;
  font-weight:normal;
  font-size:.8em;
}
.form-item{
  max-width:100%;
  overflow:hidden;
}
.form-item-pass,
p.forgot-password{
  display:inline-block;  
}
p.super-login-password{
  font-size:.9em;
  margin:0 0 0 1em;
}
p.forgot-password{
  margin-left:1em;
}

#user-pass .form-item.form-item-name,
#user-login .form-item.form-item-name{
  margin:1em 0;
}
#user-login .form-item.form-item-pass{
  margin:0;
}
#capslockdiv{
  height:1em;
}

#capslockdiv P{
  color:#c61414;
  margin:0;
  background:url("warning.png") left center no-repeat;
  background-size: 1em 1em;
  text-indent:1.25em;
  font-size:.75em;
  margin-top:.5em;
  margin-left:1.5em;  
}

#user-login .messages,
#user-pass .messages{
  margin:0 0 1em 0;
}

.back-to-login{
  font-size:.9em;
  float:right;
  margin:0 1em .125em 0;
}

input.form-text{
  border: 2px solid #dadada;  
}

input.form-text:focus { 
    outline: none;
    border-color: #0088cc;
    box-shadow: 0 0 8px #9ecaed;
}

input.form-control{
  display:inline;
  width:auto;
}


/* Remove Chrome's autofill yellow */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

@media all and (max-width: 500px) {
  #user-login div .actions-suffix{
    float:none;
    bottom:0;
    margin:0;
    text-align: center;
  }
  #user-login div p.forgot-password,
  #user-login div .form-actions{
    margin:0;
    text-align: center;
  }
  #user-login div #capslockdiv{
    display:none;
    height:0;
  }
  #user-login div .form-actions{
    margin:1em 0;
  }  
}

File

css/super-login.css
View source 
  1. /* Try to hide Page Titles on login pages */

  2. #page-title,

  3. h1#page-title,

  4. h1.page-header{

  5.   display:none;

  6. }

  7. 

  8. p.login-title{

  9.   font-weight:bold;

  10.   font-size:1.5em;

  11.   margin:0;

  12.   color:#555;

  13. }

  14. #user-login{

  15.   margin-bottom:2em;

  16. }

  17. #user-login .description{

  18.   font-size:11px;

  19.   color:#777;

  20.   padding-left:10px;

  21. }

  22. 

  23. /* Field Icons */

  24. #edit-name

  25. {

  26.    background: #fff url("email.png") no-repeat 5px center;

  27.    background-size: 1em 1em;

  28.    text-indent:2em;

  29.    border: 1px solid #aaa;   

  30. }

  31. 

  32. #edit-pass{ 

  33.     background: #fff url("password.png") no-repeat 5px center;

  34.     background-size: 1em 1em;

  35.     text-indent:2em;

  36.     border: 1px solid #aaa;

  37. }

  38. 

  39. /* Forms */

  40. #user-login,

  41. #user-pass

  42. {

  43.   max-width:600px;

  44.   margin:0 auto;

  45.   border:5px solid #555;

  46.   padding:1em;

  47. }

  48. 

  49. #user-login .actions-suffix{

  50.   float:right;

  51.   position:relative;

  52.   bottom:10px;

  53. }

  54. 

  55. #edit-actions{  

  56.   margin-top:1em;

  57. }

  58. 

  59. #user-pass label,

  60. #user-login label{

  61.   display:block;

  62.   font-weight:normal;

  63.   font-size:.8em;

  64. }

  65. .form-item{

  66.   max-width:100%;

  67.   overflow:hidden;

  68. }

  69. .form-item-pass,

  70. p.forgot-password{

  71.   display:inline-block;  

  72. }

  73. p.super-login-password{

  74.   font-size:.9em;

  75.   margin:0 0 0 1em;

  76. }

  77. p.forgot-password{

  78.   margin-left:1em;

  79. }

  80. 

  81. #user-pass .form-item.form-item-name,

  82. #user-login .form-item.form-item-name{

  83.   margin:1em 0;

  84. }

  85. #user-login .form-item.form-item-pass{

  86.   margin:0;

  87. }

  88. #capslockdiv{

  89.   height:1em;

  90. }

  91. 

  92. #capslockdiv P{

  93.   color:#c61414;

  94.   margin:0;

  95.   background:url("warning.png") left center no-repeat;

  96.   background-size: 1em 1em;

  97.   text-indent:1.25em;

  98.   font-size:.75em;

  99.   margin-top:.5em;

  100.   margin-left:1.5em;  

  101. }

  102. 

  103. #user-login .messages,

  104. #user-pass .messages{

  105.   margin:0 0 1em 0;

  106. }

  107. 

  108. .back-to-login{

  109.   font-size:.9em;

  110.   float:right;

  111.   margin:0 1em .125em 0;

  112. }

  113. 

  114. input.form-text{

  115.   border: 2px solid #dadada;  

  116. }

  117. 

  118. input.form-text:focus { 

  119.     outline: none;

  120.     border-color: #0088cc;

  121.     box-shadow: 0 0 8px #9ecaed;

  122. }

  123. 

  124. input.form-control{

  125.   display:inline;

  126.   width:auto;

  127. }

  128. 

  129. 

  130. /* Remove Chrome's autofill yellow */

  131. input:-webkit-autofill {

  132.     -webkit-box-shadow: 0 0 0px 1000px white inset;

  133. }

  134. 

  135. @media all and (max-width: 500px) {

  136.   #user-login div .actions-suffix{

  137.     float:none;

  138.     bottom:0;

  139.     margin:0;

  140.     text-align: center;

  141.   }

  142.   #user-login div p.forgot-password,

  143.   #user-login div .form-actions{

  144.     margin:0;

  145.     text-align: center;

  146.   }

  147.   #user-login div #capslockdiv{

  148.     display:none;

  149.     height:0;

  150.   }

  151.   #user-login div .form-actions{

  152.     margin:1em 0;

  153.   }  

  154. }